T5/Phase 3: SPA shell + navigation

- TanStack Router with type-safe file-based routes
- Sidebar: collapsible, workspace switcher, 12 nav links, user menu
- Topbar: search, quick-add, notifications, user avatar
- cmdk command palette: nav + create + search + @mentions
- Keyboard shortcuts: Cmd+K palette, g+t/h/p/n/c/g/s navigation, ? help
- Theme: dark default, accent picker (slate/blue/green/purple/orange), persisted to localStorage
- Auth: login -> /, logout -> /login, 401 redirect
- Placeholder pages for all 13 nav routes (real in T6/T7)
- Typed API client with useApiQuery/useApiMutation hooks

apps/web/src/routes/_app/agents.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function AgentsPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Agent Activity</h1>
+      <p className="text-muted-foreground">Coming in T7 — agent activity feed.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/agents",
+  component: AgentsPage,
+});

apps/web/src/routes/_app/agents/activity.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../../_app";
+
+function AgentActivityPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Agent Activity</h1>
+      <p className="text-muted-foreground">Coming in T7 — agent activity feed.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/agents/activity",
+  component: AgentActivityPage,
+});

apps/web/src/routes/_app/analytics.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function AnalyticsPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Analytics</h1>
+      <p className="text-muted-foreground">Coming in T7 — analytics dashboard.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/analytics",
+  component: AnalyticsPage,
+});

apps/web/src/routes/_app/calendar.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function CalendarPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Calendar</h1>
+      <p className="text-muted-foreground">Coming in T7 — calendar view.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/calendar",
+  component: CalendarPage,
+});

apps/web/src/routes/_app/canvas.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function CanvasPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Canvas</h1>
+      <p className="text-muted-foreground">Coming in T7 — visual canvas.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/canvas",
+  component: CanvasPage,
+});

apps/web/src/routes/_app/daily.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function DailyNotesPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Daily Notes</h1>
+      <p className="text-muted-foreground">Coming in T7 — daily journal.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/daily",
+  component: DailyNotesPage,
+});

apps/web/src/routes/_app/graph.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function GraphPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Graph</h1>
+      <p className="text-muted-foreground">Coming in T7 — knowledge graph.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/graph",
+  component: GraphPage,
+});

apps/web/src/routes/_app/habits.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function HabitsPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Habits</h1>
+      <p className="text-muted-foreground">Coming in T6 — habit tracking.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/habits",
+  component: HabitsPage,
+});

apps/web/src/routes/_app/index.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function DashboardPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Dashboard</h1>
+      <p className="text-muted-foreground">Coming in T7 — real dashboard widgets.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/",
+  component: DashboardPage,
+});

apps/web/src/routes/_app/notes.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function NotesPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Notes</h1>
+      <p className="text-muted-foreground">Coming in T6 — notes and documents.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/notes",
+  component: NotesPage,
+});

apps/web/src/routes/_app/projects.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function ProjectsPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Projects</h1>
+      <p className="text-muted-foreground">Coming in T6 — project management.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/projects",
+  component: ProjectsPage,
+});

apps/web/src/routes/_app/search.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function SearchPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Search</h1>
+      <p className="text-muted-foreground">Coming in T7 — full-text search.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/search",
+  component: SearchPage,
+});

apps/web/src/routes/_app/settings.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function SettingsPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Settings</h1>
+      <p className="text-muted-foreground">Coming in T7 — user preferences.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/settings",
+  component: SettingsPage,
+});

apps/web/src/routes/_app/tasks.tsx

@@ -0,0 +1,17 @@
+import { createRoute } from "@tanstack/react-router";
+import { Route as appRoute } from "../_app";
+
+function TasksPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh]">
+      <h1 className="text-3xl font-bold mb-2">Tasks</h1>
+      <p className="text-muted-foreground">Coming in T6 — full task management.</p>
+    </div>
+  );
+}
+
+export const Route = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/tasks",
+  component: TasksPage,
+});