feat(web): add app shell with sidebar navigation and routing

Implements Task 5 of Phase 3 (Stores + Router + App Shell):
- Replace App.svelte placeholder with full app shell component
- Add sidebar navigation with project selector and main nav links
- Implement view routing with Placeholder components for all routes
- Initialize WebSocket connection and dispatch events to graph/agents stores
- Use flexbox layout with fixed sidebar (240px) and scrollable main content
- Maintain dark theme with colors #12122a (sidebar) and #1a1a2e (main)

Also fixes Svelte 5 module-level $derived export issue:
- Convert selectedProject to getSelectedProject() function
- Convert goalNodes to getGoalNodes() function
- Convert tasksByStatus to getTasksByStatus() function

All files pass TypeScript check and build succeeds with no errors.
All router tests pass (14/14) and WebSocket tests pass (14/14).

Co-Authored-By: Claude Opus 4.6 <[e-mail]>

web/src/App.svelte

···
 <script lang="ts">
-  let message = $state('Rustagent Web UI');
+  /**
+   * Main app shell component.
+   * Provides layout with sidebar navigation and routed main content area.
+   * Manages WebSocket connection and dispatches events to stores.
+   */
+
+  import { getCurrentRoute, navigate, routerState } from './router.svelte';
+  import { createWsConnection } from './api/websocket';
+  import { handleWsEvent as handleGraphWsEvent } from './stores/graph.svelte';
+  import { handleWsEvent as handleAgentsWsEvent } from './stores/agents.svelte';
+  import Sidebar from './components/Sidebar.svelte';
+  import Placeholder from './views/Placeholder.svelte';
+
+  let wsConnection: ReturnType<typeof createWsConnection> | null = null;
+
+  // Initialize WebSocket connection on mount
+  $effect(() => {
+    if (!wsConnection) {
+      wsConnection = createWsConnection();
+      wsConnection.connect();
+
+      // Register event handler that dispatches to all stores
+      const handleEvent = (event: any) => {
+        handleGraphWsEvent(event);
+        handleAgentsWsEvent(event);
+      };
+
+      wsConnection.onEvent(handleEvent);
+
+      // Cleanup on unmount
+      return () => {
+        if (wsConnection) {
+          wsConnection.disconnect();
+          wsConnection = null;
+        }
+      };
+    }
+  });
+
+  // Get current route
+  const currentRoute = $derived(getCurrentRoute());
 </script>
 
-<main>
-  <h1>{message}</h1>
-  <p>Web UI is running.</p>
-</main>
+<div class="app-container">
+  <Sidebar />
+
+  <main class="main-content">
+    {#if currentRoute.name === 'dashboard'}
+      <Placeholder name="Dashboard" />
+    {:else if currentRoute.name === 'project-list'}
+      <Placeholder name="Project List" />
+    {:else if currentRoute.name === 'project-detail'}
+      <Placeholder name="Project Detail" />
+    {:else if currentRoute.name === 'task-tree'}
+      <Placeholder name="Task Tree" />
+    {:else if currentRoute.name === 'decision-graph'}
+      <Placeholder name="Decision Graph" />
+    {:else if currentRoute.name === 'agent-monitor'}
+      <Placeholder name="Agent Monitor" />
+    {:else if currentRoute.name === 'session-history'}
+      <Placeholder name="Session History" />
+    {:else if currentRoute.name === 'graph-search'}
+      <Placeholder name="Graph Search" />
+    {:else}
+      <Placeholder name="Not Found" />
+    {/if}
+  </main>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .app-container {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .main-content {
+    flex: 1;
+    background: #1a1a2e;
+    overflow-y: auto;
+    padding: 0;
+  }
+</style>

web/src/components/Sidebar.svelte

···
+<script lang="ts">
+  /**
+   * Sidebar navigation component.
+   * Provides links to main views and a project selector.
+   */
+
+  import { navigate, routerState, getCurrentRoute } from '../router.svelte';
+  import { projectsState, getSelectedProject, loadProjects } from '../stores/projects.svelte';
+
+  // Determine if a link is active based on current route
+  function isActive(route: string): boolean {
+    const currentRoute = getCurrentRoute();
+    return routerState.path === route;
+  }
+
+  // Load projects on mount
+  $effect(() => {
+    if (projectsState.projects.length === 0) {
+      loadProjects();
+    }
+  });
+</script>
+
+<aside class="sidebar">
+  <nav class="nav">
+    <div class="nav-section">
+      <a
+        href="/#/"
+        class="nav-link"
+        class:active={isActive('/')}
+        onclick={(e) => {
+          e.preventDefault();
+          navigate('/');
+        }}
+      >
+        Dashboard
+      </a>
+      <a
+        href="/#/projects"
+        class="nav-link"
+        class:active={isActive('/projects')}
+        onclick={(e) => {
+          e.preventDefault();
+          navigate('/projects');
+        }}
+      >
+        Projects
+      </a>
+      <a
+        href="/#/search"
+        class="nav-link"
+        class:active={isActive('/search')}
+        onclick={(e) => {
+          e.preventDefault();
+          navigate('/search');
+        }}
+      >
+        Search
+      </a>
+    </div>
+
+    {#if projectsState.projects.length > 0}
+      <div class="nav-section">
+        <div class="section-title">Projects</div>
+        <div class="project-list">
+          {#each projectsState.projects as project (project.id)}
+            {@const selected = getSelectedProject()}
+            <button
+              class="project-item"
+              class:active={selected?.id === project.id}
+              onclick={() => navigate(`/projects/${project.id}`)}
+            >
+              {project.name}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </nav>
+</aside>
+
+<style>
+  .sidebar {
+    width: 240px;
+    background: #12122a;
+    border-right: 1px solid #2a2a4a;
+    height: 100%;
+    overflow-y: auto;
+    flex-shrink: 0;
+  }
+
+  .nav {
+    padding: 1rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .nav-section {
+    padding: 0.5rem 0;
+  }
+
+  .nav-link {
+    display: block;
+    padding: 0.75rem 1.5rem;
+    color: #a0a0b0;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+  }
+
+  .nav-link:hover {
+    background: #1a1a3a;
+    color: #e0e0e0;
+    border-left-color: #6a5acd;
+  }
+
+  .nav-link.active {
+    background: #1a1a3a;
+    color: #e0e0e0;
+    border-left-color: #6a5acd;
+  }
+
+  .section-title {
+    padding: 0.5rem 1.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #6a6a7a;
+    letter-spacing: 0.5px;
+  }
+
+  .project-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0 0.5rem;
+  }
+
+  .project-item {
+    padding: 0.5rem 1rem;
+    margin: 0 0.5rem;
+    background: transparent;
+    border: none;
+    color: #a0a0b0;
+    text-align: left;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  .project-item:hover {
+    background: #1a1a3a;
+    color: #e0e0e0;
+  }
+
+  .project-item.active {
+    background: #2a2a4a;
+    color: #e0e0e0;
+    font-weight: 600;
+  }
+</style>

web/src/stores/graph.svelte.ts

···
 });
 
 /**
- * Derived: goal nodes from the current goal tree.
+ * Get goal nodes from the current goal tree.
  */
-export const goalNodes = $derived.by(() => {
+export function getGoalNodes(): Array<GraphNode> {
   if (!graphState.goalTree) {
     return [];
   }
   return graphState.goalTree.nodes.filter((n) => n.node_type === 'goal');
-});
+}
 
 /**
- * Derived: tasks grouped by status.
+ * Get tasks grouped by status.
  */
-export const tasksByStatus = $derived.by(() => {
+export function getTasksByStatus(): Record<NodeStatus, Array<GraphNode>> {
   const result: Record<NodeStatus, Array<GraphNode>> = {} as Record<
     NodeStatus,
     Array<GraphNode>
···
   }
 
   return result;
-});
+}
 
 const apiClient = createApiClient();
 

web/src/stores/projects.svelte.ts

···
 });
 
 /**
- * Derived: the currently selected project, or null if none selected.
+ * Get the currently selected project, or null if none selected.
  */
-export const selectedProject = $derived.by(() => {
+export function getSelectedProject(): ProjectResponse | null {
   if (!projectsState.selectedProjectId) {
     return null;
   }
   return (
     projectsState.projects.find((p) => p.id === projectsState.selectedProjectId) || null
   );
-});
+}
 
 const apiClient = createApiClient();
 

web/src/views/Placeholder.svelte

···
+<script lang="ts">
+  /**
+   * Placeholder component for views under development.
+   * Renders a simple message indicating the view is coming soon.
+   */
+
+  interface Props {
+    name: string;
+  }
+
+  let { name }: Props = $props();
+</script>
+
+<div class="placeholder">
+  <h2>{name}</h2>
+  <p>Coming soon...</p>
+</div>
+
+<style>
+  .placeholder {
+    padding: 2rem;
+    text-align: center;
+    color: #999;
+  }
+
+  h2 {
+    margin: 0 0 1rem 0;
+    color: #e0e0e0;
+  }
+
+  p {
+    margin: 0;
+  }
+</style>