feat: persist first-class navigation views

Author: Gini

docs/IMPLEMENTATION-LOG.md

@@ -46,6 +46,7 @@
 - Replaced the decorative Skills navigation with a usable capability library. Users can select up to four explicit working guides for new tasks; those IDs persist on the task, become server-side operating guidance, and create a `Skill packs attached` evidence event that explicitly states no permission change occurred.
 - Replaced the decorative Library navigation with a server-derived artifact index. It lists completed task outputs across projects while excluding raw `inputs/` and `evidence/` paths, and every card returns to the originating governed task rather than detaching artifacts from their evidence chain.
 - Added transparent queued steering for non-interruptible providers. Guidance submitted during an active turn is bounded, persisted, and recorded immediately; after a successful terminal state, ONEVibe resumes the same task with the next queued instruction. This is deliberately not represented as live prompt injection into a running Claude SDK or sandbox CLI process.
+- Made the first-class Skills, Library, and Scheduled surfaces URL-addressable (`?view=…`). Refresh and browser history now restore the intended surface and active navigation state instead of silently returning users to the home composer.
 - Added durable run identity to the event chain. `beginTurn` persists a run ID before the first event; every subsequent event—including Computer frames—binds it into the hash, and terminal events clear the active run. The Computer header exposes a concise run marker for replay across follow-ups and retries.
 - Replaced the hidden click-to-cycle composer mode control with an animated, keyboard-accessible nine-mode creation catalogue for Agent, Website, Slides, Document, Research, Data story, Design, App, and Game. Each option explains its output contract; the selected mode persists into normal task creation.
 - Added an expandable pre-delegation safety cue to the primary composer. It makes the secret-handling, untrusted-context, workspace-policy, and independent VTI Wallet boundaries legible at the point users supply a task.

docs/MANUS-PARITY.md

@@ -16,7 +16,7 @@ This is the implementation gate, not a marketing checklist. **I** means behavior
 8. **I** Expandable task messages — long user and grouped assistant turns collapse and expand in place.
 9. **I** Structured waiting state — runtime parks durably, UI renders the focused request, and an answer resumes the same execution.
 10. **I** Terminal-input request state — native Claude can invoke the ONEVibe input MCP tool and receive the user's answer as its tool result.
-11. **I** Persistent task routes — `/tasks/:taskId` survives reload and browser navigation.
+11. **I** Persistent routes — `/tasks/:taskId` and the Skills, Library, and Scheduled surfaces survive reload and browser navigation through explicit view URLs.
 12. **I** Concurrent workspace plus conversation and Computer timeline — server-classified, run-bound, evidence-backed task events render as a scrub-able terminal, visual-frame, artifact, diff, preview, deck, and approval record beside the conversation. The rail supports explicit live follow/pause and keyboard step/scrub; authenticated sandbox execution now adds bounded five-second live X11 checkpoints. High-scale replay and deployed production visual capture remain P0 work.
 13. **I** Agent-mode entry point — primary ONEVibe surface.
 14. **I** Task history surface — durable turn-based chat history, timestamps/status, cursor pagination, full-text search, reload persistence, and evidence export.

src/App.tsx

@@ -21,6 +21,11 @@ const starterPrompts = [
   'Research a market and produce an evidence-backed report',
   'Create an internal tool with a governed approval flow',
 ]
+type AppView = 'agent' | 'schedules' | 'skills' | 'library'
+const viewFromLocation = (): AppView => {
+  const value = new URLSearchParams(window.location.search).get('view')
+  return value === 'schedules' || value === 'skills' || value === 'library' ? value : 'agent'
+}
 
 export default function App() {
   const shareId = window.location.pathname.match(/^\/share\/([^/]+)$/)?.[1]
@@ -29,7 +34,7 @@ export default function App() {
   const [schedules, setSchedules] = useState<TaskSchedule[]>([])
   const [library, setLibrary] = useState<LibraryItem[]>([])
   const [activeProjectId, setActiveProjectId] = useState('project_onevibe')
-  const [view, setView] = useState<'agent' | 'schedules' | 'skills' | 'library'>('agent')
+  const [view, setView] = useState<AppView>(viewFromLocation)
   const [selectedSkills, setSelectedSkills] = useState<TaskSkill[]>([])
   const [activeTaskId, setActiveTaskId] = useState<string | null>(() => window.location.pathname.match(/^\/tasks\/([^/]+)$/)?.[1] ?? null)
   const [creating, setCreating] = useState(false)
@@ -46,7 +51,10 @@ export default function App() {
   useEffect(() => { void listSchedules().then(({ schedules }) => setSchedules(schedules)) }, [])
   useEffect(() => { void listProjects().then(({ projects }) => { setProjects(projects); if (!projects.some((project) => project.id === activeProjectId)) setActiveProjectId(projects[0]?.id ?? 'project_onevibe') }) }, [activeProjectId])
   useEffect(() => {
-    const onPopState = () => setActiveTaskId(window.location.pathname.match(/^\/tasks\/([^/]+)$/)?.[1] ?? null)
+    const onPopState = () => {
+      setActiveTaskId(window.location.pathname.match(/^\/tasks\/([^/]+)$/)?.[1] ?? null)
+      setView(viewFromLocation())
+    }
     window.addEventListener('popstate', onPopState)
     return () => window.removeEventListener('popstate', onPopState)
   }, [])
@@ -73,6 +81,11 @@ export default function App() {
     setActiveTaskId(taskId)
     window.history.pushState({}, '', taskId ? `/tasks/${taskId}` : '/')
   }
+  const navigateToView = (nextView: Exclude<AppView, 'agent'>) => {
+    setActiveTaskId(null)
+    setView(nextView)
+    window.history.pushState({}, '', `/?view=${nextView}`)
+  }
   const toggleSkill = (skill: TaskSkill) => setSelectedSkills((current) => current.includes(skill) ? current.filter((item) => item !== skill) : current.length >= 4 ? current : [...current, skill])
 
   const addProject = async (name: string, context: string) => {
@@ -108,7 +121,7 @@ export default function App() {
 
   return (
     <div className={`app-shell ${sidebarOpen ? '' : 'sidebar-collapsed'}`}>
-      <AnimatePresence>{sidebarOpen && <motion.div initial={{ x: -260 }} animate={{ x: 0 }} exit={{ x: -260 }}><Sidebar tasks={tasks} activeTaskId={activeTaskId} onNewTask={() => navigateToTask(null)} onSelectTask={(taskId) => navigateToTask(taskId)} projects={projects} activeProjectId={activeProjectId} onSelectProject={setActiveProjectId} onCreateProject={addProject} onAttachProjectFile={attachProjectFile} onOpenSkills={() => { setActiveTaskId(null); setView('skills'); window.history.pushState({}, '', '/') }} onOpenLibrary={() => { setActiveTaskId(null); setView('library'); window.history.pushState({}, '', '/') }} onOpenSchedules={() => { setActiveTaskId(null); setView('schedules'); window.history.pushState({}, '', '/') }} /></motion.div>}</AnimatePresence>
+      <AnimatePresence>{sidebarOpen && <motion.div initial={{ x: -260 }} animate={{ x: 0 }} exit={{ x: -260 }}><Sidebar view={view} tasks={tasks} activeTaskId={activeTaskId} onNewTask={() => navigateToTask(null)} onSelectTask={(taskId) => navigateToTask(taskId)} projects={projects} activeProjectId={activeProjectId} onSelectProject={setActiveProjectId} onCreateProject={addProject} onAttachProjectFile={attachProjectFile} onOpenSkills={() => navigateToView('skills')} onOpenLibrary={() => navigateToView('library')} onOpenSchedules={() => navigateToView('schedules')} /></motion.div>}</AnimatePresence>
       <main className="main-shell">
         <header className="topbar">
           <div className="topbar-left"><button className="icon-button" type="button" aria-label={sidebarOpen ? 'Collapse sidebar' : 'Open sidebar'} onClick={() => setSidebarOpen((value) => !value)}>{sidebarOpen ? <PanelLeftClose size={17} /> : <Menu size={17} />}</button><span className="model-selector"><Sparkles size={14} /> ONEVibe 0.1 <ChevronDown size={13} /></span></div>

src/components/Sidebar.tsx

@@ -6,6 +6,7 @@ import { searchChat } from '../lib/api'
 import { BrandMark } from './BrandMark'
 
 type Props = {
+  view: 'agent' | 'schedules' | 'skills' | 'library'
   tasks: Task[]
   activeTaskId: string | null
   onNewTask: () => void
@@ -20,7 +21,7 @@ type Props = {
   onOpenSchedules: () => void
 }
 
-export const Sidebar = ({ tasks, activeTaskId, onNewTask, onSelectTask, projects, activeProjectId, onSelectProject, onCreateProject, onAttachProjectFile, onOpenSkills, onOpenLibrary, onOpenSchedules }: Props) => {
+export const Sidebar = ({ view, tasks, activeTaskId, onNewTask, onSelectTask, projects, activeProjectId, onSelectProject, onCreateProject, onAttachProjectFile, onOpenSkills, onOpenLibrary, onOpenSchedules }: Props) => {
   const [query, setQuery] = useState('')
   const [creatingProject, setCreatingProject] = useState(false)
   const [projectName, setProjectName] = useState('')
@@ -44,10 +45,10 @@ export const Sidebar = ({ tasks, activeTaskId, onNewTask, onSelectTask, projects
     <button className="new-task" onClick={onNewTask}><Plus size={16} /> New task <kbd>⌘ K</kbd></button>
     <label className="history-search"><Search size={13} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search conversations" /></label>
     <nav className="primary-nav" aria-label="Primary">
-      <button className="nav-item active"><Sparkles size={16} /> Agent</button>
-      <button className="nav-item" onClick={onOpenSkills}><Blocks size={16} /> Skills <span className="nav-pill">8</span></button>
-      <button className="nav-item" onClick={onOpenSchedules}><Clock3 size={16} /> Scheduled</button>
-      <button className="nav-item" onClick={onOpenLibrary}><Library size={16} /> Library</button>
+      <button className={`nav-item ${view === 'agent' ? 'active' : ''}`} onClick={onNewTask}><Sparkles size={16} /> Agent</button>
+      <button className={`nav-item ${view === 'skills' ? 'active' : ''}`} onClick={onOpenSkills}><Blocks size={16} /> Skills <span className="nav-pill">8</span></button>
+      <button className={`nav-item ${view === 'schedules' ? 'active' : ''}`} onClick={onOpenSchedules}><Clock3 size={16} /> Scheduled</button>
+      <button className={`nav-item ${view === 'library' ? 'active' : ''}`} onClick={onOpenLibrary}><Library size={16} /> Library</button>
     </nav>
     <div className="nav-section-label"><span>Projects</span><button aria-label="Create project" onClick={() => setCreatingProject((value) => !value)}><Plus size={13} /></button></div>
     {creatingProject && <form className="project-create" onSubmit={(event) => { event.preventDefault(); const name = projectName.trim(); if (!name) return; void onCreateProject(name, projectContext.trim()).then(() => { setProjectName(''); setProjectContext(''); setCreatingProject(false) }) }}><input autoFocus value={projectName} onChange={(event) => setProjectName(event.target.value)} placeholder="Project name" maxLength={100} /><textarea value={projectContext} onChange={(event) => setProjectContext(event.target.value)} placeholder="Governed brief (optional)" maxLength={8000} rows={2} /><button type="submit">Create project</button></form>}