diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4c3b21c..87fb1bb 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,10 +1,10 @@
-import type { StorybookConfig } from '@storybook/react-vite'
+import type { StorybookConfig } from '@storybook/svelte-vite'
 
 const config: StorybookConfig = {
-  stories: ['../frontend/src/**/*.stories.@(ts|tsx)'],
+  stories: ['../frontend/src/**/*.stories.@(ts|svelte.ts)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'],
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/svelte-vite',
     options: {},
   },
 }
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 12d6f95..7357551 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react-vite'
+import type { Preview } from '@storybook/svelte-vite'
 import '../frontend/src/index.css'
 
 const preview: Preview = {
diff --git a/backend/src/routes/agents.test.ts b/backend/src/routes/agents.test.ts
index 9eb8238..616f9c8 100644
--- a/backend/src/routes/agents.test.ts
+++ b/backend/src/routes/agents.test.ts
@@ -6,6 +6,14 @@ import { Hono } from 'hono'
 import { agentsRoutes } from './agents.js'
 import type { AgentRegistry } from '../agents/registry.js'
 
+const { getHistorySourceDescriptorsMock } = vi.hoisted(() => ({
+  getHistorySourceDescriptorsMock: vi.fn<(...args: unknown[]) => unknown[]>(() => []),
+}))
+
+vi.mock('../history/index.js', () => ({
+  getHistorySourceDescriptors: getHistorySourceDescriptorsMock,
+}))
+
 function makeTempDir(): string {
   const dir = join(tmpdir(), `acp-agents-routes-test-${Date.now()}-${Math.random()}`)
   mkdirSync(dir, { recursive: true })
@@ -105,6 +113,8 @@ describe('agents routes', () => {
   let origEnv: string | undefined
 
   beforeEach(() => {
+    getHistorySourceDescriptorsMock.mockReset()
+    getHistorySourceDescriptorsMock.mockReturnValue([])
     tempDir = makeTempDir()
     origEnv = process.env['ACP_HISTORY_SOURCES_CONFIG_PATH']
     process.env['ACP_HISTORY_SOURCES_CONFIG_PATH'] = join(tempDir, 'history-sources.json')
@@ -223,5 +233,82 @@ describe('agents routes', () => {
 
       expect(res.status).toBe(404)
     })
+
+    it('GET /history-sources/status returns provider discovery summaries', async () => {
+      getHistorySourceDescriptorsMock.mockImplementation((agentIdRaw: unknown) => {
+        const agentId = String(agentIdRaw)
+        if (agentId === 'copilot') {
+          return [
+            {
+              id: 'copilot:vscode_workspace_db:/x/state.vscdb',
+              backendId: 'copilot',
+              providerId: 'copilot',
+              kind: 'vscode_workspace_db',
+              path: '/x/state.vscdb',
+              platform: 'linux',
+              access: 'readable',
+              signal: 'contains_history',
+              discoveredBy: 'manual',
+              sessionCount: 7,
+            },
+          ]
+        }
+
+        if (agentId === 'gemini-cli') {
+          return [
+            {
+              id: 'gemini:tmp:/tmp/google-generative-ai-cli',
+              backendId: 'gemini-cli',
+              providerId: 'gemini-cli',
+              kind: 'gemini_tmp_dir',
+              path: '/tmp/google-generative-ai-cli',
+              platform: 'linux',
+              access: 'missing',
+              signal: 'unknown',
+              discoveredBy: 'auto',
+            },
+          ]
+        }
+
+        return []
+      })
+
+      const registry = createRegistryStub()
+      const app = new Hono().route('/api', agentsRoutes(registry))
+
+      const res = await app.request('/api/history-sources/status')
+      expect(res.status).toBe(200)
+
+      const body = (await res.json()) as Array<{
+        provider: string
+        discoveredSources: Array<{ id: string }>
+        summary: {
+          readable: number
+          missing: number
+          invalid: number
+          containsHistory: number
+          totalSessions: number
+        }
+      }>
+
+      const copilot = body.find((item) => item.provider === 'copilot')
+      expect(copilot?.discoveredSources).toHaveLength(1)
+      expect(copilot?.summary).toMatchObject({
+        readable: 1,
+        missing: 0,
+        invalid: 0,
+        containsHistory: 1,
+        totalSessions: 7,
+      })
+
+      const gemini = body.find((item) => item.provider === 'gemini')
+      expect(gemini?.summary).toMatchObject({
+        readable: 0,
+        missing: 1,
+        invalid: 0,
+        containsHistory: 0,
+        totalSessions: 0,
+      })
+    })
   })
 })
diff --git a/backend/src/routes/agents.ts b/backend/src/routes/agents.ts
index d3ae80a..b77affc 100644
--- a/backend/src/routes/agents.ts
+++ b/backend/src/routes/agents.ts
@@ -5,9 +5,29 @@ import {
   updateHistorySource,
   type HistoryProvider,
 } from '../history/sources-config.js'
+import { getHistorySourceDescriptors } from '../history/index.js'
+import type { HistorySourceDescriptor } from '../agents/types.js'
 
 const VALID_PROVIDERS = new Set<string>(['gemini', 'copilot', 'opencode'])
 
+const PROVIDER_AGENT_ID: Record<HistoryProvider, string> = {
+  copilot: 'copilot',
+  gemini: 'gemini-cli',
+  opencode: 'opencode',
+}
+
+interface HistorySourceStatus {
+  provider: HistoryProvider
+  discoveredSources: HistorySourceDescriptor[]
+  summary: {
+    readable: number
+    missing: number
+    invalid: number
+    containsHistory: number
+    totalSessions: number
+  }
+}
+
 export function agentsRoutes(registry: AgentRegistry): Hono {
   const app = new Hono()
 
@@ -67,6 +87,38 @@ export function agentsRoutes(registry: AgentRegistry): Hono {
     return c.json(sources)
   })
 
+  app.get('/history-sources/status', (c) => {
+    const sources = readHistorySourcesConfig()
+    const status: HistorySourceStatus[] = sources.map((source) => {
+      const agentId = PROVIDER_AGENT_ID[source.provider]
+      const discoveredSources = getHistorySourceDescriptors(
+        agentId,
+        source.paths,
+        source.cliPaths ?? []
+      )
+
+      const summary = discoveredSources.reduce(
+        (acc, descriptor) => {
+          if (descriptor.access === 'readable') acc.readable += 1
+          if (descriptor.access === 'missing') acc.missing += 1
+          if (descriptor.access === 'invalid') acc.invalid += 1
+          if (descriptor.signal === 'contains_history') acc.containsHistory += 1
+          acc.totalSessions += descriptor.sessionCount ?? 0
+          return acc
+        },
+        { readable: 0, missing: 0, invalid: 0, containsHistory: 0, totalSessions: 0 }
+      )
+
+      return {
+        provider: source.provider,
+        discoveredSources,
+        summary,
+      }
+    })
+
+    return c.json(status)
+  })
+
   app.patch('/history-sources/:provider', async (c) => {
     const provider = c.req.param('provider')
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 03df307..bae362e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,8 +1,8 @@
 import js from '@eslint/js'
 import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import sveltePlugin from 'eslint-plugin-svelte'
+import svelteParser from 'svelte-eslint-parser'
 
 export default tseslint.config(
   {
@@ -18,7 +18,7 @@ export default tseslint.config(
   },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ['**/*.{ts,mts,cts}'],
     languageOptions: {
       ecmaVersion: 2022,
       globals: {
@@ -26,13 +26,25 @@ export default tseslint.config(
         ...globals.node,
       },
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...sveltePlugin.configs['flat/recommended'],
+    ],
+    files: ['**/*.svelte', '**/*.svelte.ts'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parser: svelteParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: ['.svelte'],
+      },
     },
   }
 )
diff --git a/frontend/index.html b/frontend/index.html
index a463892..6c14b4a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
new file mode 100644
index 0000000..9eadd50
--- /dev/null
+++ b/frontend/src/App.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import ChatPage from './routes/ChatPage.svelte'
+  import SettingsPage from './routes/SettingsPage.svelte'
+
+  type Route = 'chat' | 'settings'
+
+  function getRouteFromHash(): Route {
+    const hash = window.location.hash
+    if (hash.startsWith('#/settings')) return 'settings'
+    return 'chat'
+  }
+
+  let route = $state<Route>(getRouteFromHash())
+
+  onMount(() => {
+    const handleHashChange = () => {
+      route = getRouteFromHash()
+    }
+    window.addEventListener('hashchange', handleHashChange)
+    // Redirect bare / or empty hash to #/chat
+    if (!window.location.hash || window.location.hash === '#/') {
+      window.location.hash = '#/chat'
+    }
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  })
+</script>
+
+{#if route === 'settings'}
+  <SettingsPage />
+{:else}
+  <ChatPage />
+{/if}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
deleted file mode 100644
index a92f8c3..0000000
--- a/frontend/src/App.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { RouterProvider } from '@tanstack/react-router'
-import { router, type AppRouter } from './router.js'
-
-interface AppProps {
-  routerInstance?: AppRouter
-}
-
-export function App({ routerInstance = router }: AppProps) {
-  return <RouterProvider router={routerInstance} />
-}
diff --git a/frontend/src/components/chat/AttachmentGroup.svelte b/frontend/src/components/chat/AttachmentGroup.svelte
new file mode 100644
index 0000000..ee73735
--- /dev/null
+++ b/frontend/src/components/chat/AttachmentGroup.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { A2UIAttachmentPayload } from './a2ui-types.js'
+
+  interface Props {
+    blocks: Array<{ kind: 'attachment'; payload: A2UIAttachmentPayload }>
+  }
+
+  const { blocks }: Props = $props()
+
+  const imageBlocks = $derived(blocks.filter((b) => b.payload.mime.startsWith('image/')))
+  let viewerIndex = $state<number | null>(null)
+  let triggerButton = $state<HTMLButtonElement | null>(null)
+  let closeButton = $state<HTMLButtonElement | null>(null)
+
+  function openViewer(index: number, btn: HTMLButtonElement) {
+    triggerButton = btn
+    viewerIndex = index
+    // Focus the close button after the dialog renders
+    requestAnimationFrame(() => { closeButton?.focus() })
+  }
+
+  function closeViewer() {
+    viewerIndex = null
+    triggerButton?.focus()
+    triggerButton = null
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      closeViewer()
+    }
+  }
+</script>
+
+<div class="space-y-2">
+  {#each blocks as block, i (`${block.payload.filename}-${i}`)}
+    {@const isImage = block.payload.mime.startsWith('image/')}
+    {@const imageIndex = imageBlocks.findIndex((c) => c.payload.url === block.payload.url)}
+    <div
+      class="flex items-center gap-3 rounded-xl border border-white/10 bg-slate-800/60 px-3 py-2 text-xs text-slate-100"
+      data-testid="a2ui-attachment-card"
+    >
+      {#if isImage}
+        <button
+          type="button"
+          onclick={(e) => { openViewer(imageIndex, e.currentTarget as HTMLButtonElement) }}
+          class="shrink-0 overflow-hidden rounded-lg border border-white/10"
+        >
+          <img
+            src={block.payload.url}
+            alt={block.payload.filename}
+            class="h-14 w-14 object-cover"
+          />
+        </button>
+      {:else}
+        <div class="flex h-14 w-14 items-center justify-center rounded-lg border border-white/10 bg-slate-900 text-[10px] uppercase tracking-[0.18em] text-slate-400">
+          File
+        </div>
+      {/if}
+
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm text-slate-100">{block.payload.filename}</p>
+        <p class="mt-1 truncate text-[11px] text-slate-400">{block.payload.mime}</p>
+      </div>
+
+      <a
+        href={block.payload.url}
+        download={block.payload.filename}
+        class="rounded-full border border-white/10 px-3 py-1.5 text-[11px] text-teal-200"
+      >
+        Download
+      </a>
+    </div>
+  {/each}
+</div>
+
+{#if viewerIndex !== null && imageBlocks[viewerIndex]}
+  <div
+    role="dialog"
+    aria-modal="true"
+    aria-label={`Image viewer: ${imageBlocks[viewerIndex].payload.filename}`}
+    tabindex="-1"
+    class="fixed inset-0 z-[80] bg-slate-950/92 p-4 backdrop-blur-sm"
+    onkeydown={handleKeydown}
+  >
+    <div class="mx-auto flex h-full max-w-5xl flex-col">
+      <div class="flex items-center justify-between gap-3 pb-4">
+        <div>
+          <p class="text-sm font-medium text-slate-100">{imageBlocks[viewerIndex].payload.filename}</p>
+          <p class="text-xs text-slate-400">{viewerIndex + 1} / {imageBlocks.length}</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <a
+            href={imageBlocks[viewerIndex].payload.url}
+            download={imageBlocks[viewerIndex].payload.filename}
+            class="rounded-full border border-white/10 px-3 py-2 text-sm text-teal-200"
+          >
+            Download
+          </a>
+          <button
+            bind:this={closeButton}
+            type="button"
+            onclick={closeViewer}
+            class="rounded-full border border-white/10 px-3 py-2 text-sm text-slate-100"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+
+      <div class="flex min-h-0 flex-1 items-center justify-between gap-3">
+        <button
+          type="button"
+          onclick={() => { viewerIndex = Math.max(0, (viewerIndex ?? 0) - 1) }}
+          disabled={viewerIndex === 0}
+          class="rounded-full border border-white/10 px-4 py-3 text-2xl text-slate-100 disabled:opacity-30"
+          aria-label="Previous image"
+        >
+          ‹
+        </button>
+
+        <div class="flex min-h-0 flex-1 items-center justify-center">
+          <img
+            src={imageBlocks[viewerIndex].payload.url}
+            alt={imageBlocks[viewerIndex].payload.filename}
+            class="max-h-full max-w-full rounded-xl border border-white/10 object-contain"
+          />
+        </div>
+
+        <button
+          type="button"
+          onclick={() => { viewerIndex = Math.min(imageBlocks.length - 1, (viewerIndex ?? 0) + 1) }}
+          disabled={viewerIndex === imageBlocks.length - 1}
+          class="rounded-full border border-white/10 px-4 py-3 text-2xl text-slate-100 disabled:opacity-30"
+          aria-label="Next image"
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/frontend/src/components/chat/ChatComposer.stories.tsx b/frontend/src/components/chat/ChatComposer.stories.tsx
deleted file mode 100644
index 0ab977b..0000000
--- a/frontend/src/components/chat/ChatComposer.stories.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
-import { ChatComposer } from './ChatComposer.js'
-import type { ModelState } from '../../hooks/useAgUiChat.js'
-
-function ComposerStory(props: {
-  disabled: boolean
-  canSubmit: boolean
-  initialValue?: string
-  helperText?: string
-  modelState?: ModelState | null
-}) {
-  const [value, setValue] = useState(props.initialValue ?? '')
-  const [modelState, setModelState] = useState<ModelState | null>(props.modelState ?? null)
-
-  const handleModelChange = (modelId: string) => {
-    setModelState((prev) => (prev ? { ...prev, currentModelId: modelId } : prev))
-  }
-
-  return (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value={value}
-        onChange={setValue}
-        onSubmit={(event) => event.preventDefault()}
-        disabled={props.disabled}
-        canSubmit={props.canSubmit}
-        helperText={props.helperText}
-        modelState={modelState}
-        onModelChange={handleModelChange}
-      />
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Chat/ChatComposer',
-  component: ComposerStory,
-  args: {
-    disabled: false,
-    canSubmit: true,
-    initialValue: 'Say hello in one short sentence.',
-    helperText: 'Streaming responses appear in the workspace as the agent thinks and replies.',
-  },
-} satisfies Meta<typeof ComposerStory>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Ready: Story = {}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    canSubmit: false,
-    initialValue: '',
-    helperText: 'Choose a project context and start a new session before sending a message.',
-  },
-}
-
-// History-session panel stories (rendered directly, not via ComposerStory wrapper)
-export const HistorySessionWithResumeAndFork: StoryObj<typeof ChatComposer> = {
-  render: () => (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value=""
-        onChange={() => {}}
-        onSubmit={(e) => e.preventDefault()}
-        disabled={false}
-        canSubmit={false}
-        isHistorySession
-        resumeAgent={{ id: 'opencode', name: 'opencode' }}
-        forkAgents={[
-          { id: 'copilot', name: 'GitHub Copilot' },
-          { id: 'gemini', name: 'Gemini CLI' },
-        ]}
-        onResume={(id) => console.log('resume', id)}
-        onFork={(id) => console.log('fork', id)}
-      />
-    </div>
-  ),
-}
-
-export const HistorySessionResumeOnly: StoryObj<typeof ChatComposer> = {
-  render: () => (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value=""
-        onChange={() => {}}
-        onSubmit={(e) => e.preventDefault()}
-        disabled={false}
-        canSubmit={false}
-        isHistorySession
-        resumeAgent={{ id: 'opencode', name: 'opencode' }}
-        forkAgents={[]}
-        onResume={(id) => console.log('resume', id)}
-      />
-    </div>
-  ),
-}
-
-export const HistorySessionForkOnly: StoryObj<typeof ChatComposer> = {
-  render: () => (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value=""
-        onChange={() => {}}
-        onSubmit={(e) => e.preventDefault()}
-        disabled={false}
-        canSubmit={false}
-        isHistorySession
-        forkAgents={[{ id: 'copilot', name: 'GitHub Copilot' }]}
-        onFork={(id) => console.log('fork', id)}
-      />
-    </div>
-  ),
-}
-
-export const HistorySessionNoAgents: StoryObj<typeof ChatComposer> = {
-  render: () => (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value=""
-        onChange={() => {}}
-        onSubmit={(e) => e.preventDefault()}
-        disabled={false}
-        canSubmit={false}
-        isHistorySession
-      />
-    </div>
-  ),
-}
-
-export const HistorySessionLoading: StoryObj<typeof ChatComposer> = {
-  render: () => (
-    <div className="max-w-5xl rounded-[2rem] border border-white/10 bg-slate-950/75 shadow-[0_18px_60px_rgba(2,6,23,0.25)]">
-      <ChatComposer
-        value=""
-        onChange={() => {}}
-        onSubmit={(e) => e.preventDefault()}
-        disabled={false}
-        canSubmit={false}
-        isHistorySession
-        historyLoading
-      />
-    </div>
-  ),
-}
-
-export const WithModelSelector: Story = {
-  args: {
-    disabled: false,
-    canSubmit: true,
-    initialValue: 'Summarise the latest changes in one paragraph.',
-    helperText: undefined,
-    modelState: {
-      availableModels: [
-        { modelId: 'gpt-4o', name: 'GPT-4o' },
-        { modelId: 'gpt-4o-mini', name: 'GPT-4o mini' },
-        { modelId: 'o3', name: 'o3' },
-      ],
-      currentModelId: 'gpt-4o',
-    },
-  },
-}
-
-export const WithSingleModel: Story = {
-  args: {
-    disabled: false,
-    canSubmit: true,
-    initialValue: 'Say hello in one short sentence.',
-    helperText: undefined,
-    modelState: {
-      availableModels: [{ modelId: 'gpt-4o', name: 'GPT-4o' }],
-      currentModelId: 'gpt-4o',
-    },
-  },
-}
diff --git a/frontend/src/components/chat/ChatComposer.svelte b/frontend/src/components/chat/ChatComposer.svelte
new file mode 100644
index 0000000..364f00c
--- /dev/null
+++ b/frontend/src/components/chat/ChatComposer.svelte
@@ -0,0 +1,343 @@
+<script lang="ts">
+  import type { ModelState } from '../../store/chatStore.svelte.js'
+
+  interface ResumableAgent {
+    id: string
+    name: string
+  }
+
+  interface Props {
+    value: string
+    onChange: (value: string) => void
+    onSubmit: (e: SubmitEvent) => void | Promise<void>
+    disabled: boolean
+    canSubmit: boolean
+    helperText?: string
+    isHistorySession?: boolean
+    historyLoading?: boolean
+    onResume?: (agentId: string) => void
+    resumableAgents?: ResumableAgent[]
+    resuming?: boolean
+    modelState?: ModelState | null
+    onModelChange?: (modelId: string) => void
+  }
+
+  const {
+    value,
+    onChange,
+    onSubmit,
+    disabled,
+    canSubmit,
+    helperText,
+    isHistorySession = false,
+    historyLoading = false,
+    onResume,
+    resumableAgents = [],
+    resuming = false,
+    modelState,
+    onModelChange,
+  }: Props = $props()
+
+  let switchOpen = $state(false)
+  let switchRef: HTMLDivElement | undefined = $state()
+  let firstMenuItemRef: HTMLButtonElement | undefined = $state()
+
+  let modelOpen = $state(false)
+  let modelRef: HTMLDivElement | undefined = $state()
+  let firstModelItemRef: HTMLButtonElement | undefined = $state()
+
+  // Close switch-agent popover on outside click / Escape
+  $effect(() => {
+    if (!switchOpen) return
+    const onMouse = (e: MouseEvent) => {
+      if (switchRef && !switchRef.contains(e.target as Node)) switchOpen = false
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') switchOpen = false
+    }
+    document.addEventListener('mousedown', onMouse)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onMouse)
+      document.removeEventListener('keydown', onKey)
+    }
+  })
+
+  // Close model popover on outside click / Escape
+  $effect(() => {
+    if (!modelOpen) return
+    const onMouse = (e: MouseEvent) => {
+      if (modelRef && !modelRef.contains(e.target as Node)) modelOpen = false
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') modelOpen = false
+    }
+    document.addEventListener('mousedown', onMouse)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onMouse)
+      document.removeEventListener('keydown', onKey)
+    }
+  })
+
+  // Focus first item when popovers open
+  $effect(() => {
+    if (switchOpen) firstMenuItemRef?.focus()
+  })
+  $effect(() => {
+    if (modelOpen) firstModelItemRef?.focus()
+  })
+
+  const hasAnyAction = $derived(resumableAgents.length > 0)
+  const canSwitch = $derived(resumableAgents.length > 0 && !resuming && !disabled)
+  const showModelSelector = $derived(
+    modelState != null && modelState.availableModels.length > 1 && !isHistorySession
+  )
+  const currentModel = $derived(
+    modelState?.availableModels.find((m) => m.modelId === modelState.currentModelId)
+  )
+</script>
+
+{#if isHistorySession}
+  <div
+    data-testid="history-session-panel"
+    class="border-t border-white/8 bg-[linear-gradient(180deg,rgba(10,14,22,0.96),rgba(5,8,14,0.98))] px-4 py-4 backdrop-blur sm:px-5 lg:px-8"
+  >
+    <div class="mx-auto max-w-5xl">
+      {#if historyLoading}
+        <div class="flex items-center gap-3 text-sm text-slate-500">
+          <span class="inline-flex h-2 w-2 animate-pulse rounded-full bg-slate-600"></span>
+          <span>Loading session history…</span>
+        </div>
+      {:else}
+        <p class="mb-3 text-sm text-slate-400">
+          This is a read-only history session. Continue the conversation with an active agent:
+        </p>
+
+        {#if !hasAnyAction}
+          <p class="text-sm text-slate-500">
+            No active agents available. Start an agent in Settings to continue this conversation.
+          </p>
+        {:else}
+          <div class="flex flex-wrap gap-2">
+            {#each resumableAgents as agent (agent.id)}
+              <button
+                type="button"
+                disabled={resuming}
+                onclick={() => onResume?.(agent.id)}
+                data-testid={`continue-agent-${agent.id}`}
+                class="inline-flex items-center gap-2 rounded-[1.2rem] border border-teal-500/40 bg-teal-500/15 px-4 py-2.5 text-sm font-semibold text-teal-100 transition hover:border-teal-400/60 hover:bg-teal-500/25 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {agent.name}
+                <span>Continue &rarr;</span>
+              </button>
+            {/each}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{:else}
+  <form
+    onsubmit={onSubmit}
+    data-testid="chat-composer"
+    class="border-t border-white/8 bg-[linear-gradient(180deg,rgba(10,14,22,0.96),rgba(5,8,14,0.98))] px-4 py-4 backdrop-blur sm:px-5 lg:px-8"
+  >
+    <div class="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-end">
+      <label class="flex-1">
+        <span class="sr-only">Message</span>
+        <input
+          value={value}
+          oninput={(e) => onChange((e.target as HTMLInputElement).value)}
+          onchange={(e) => onChange((e.target as HTMLInputElement).value)}
+          placeholder="Type a message…"
+          disabled={disabled}
+          class="w-full rounded-[1.2rem] border border-white/10 bg-slate-900/90 px-4 py-3.5 text-sm text-slate-100 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30 disabled:cursor-not-allowed disabled:bg-slate-900/70 disabled:text-slate-500"
+        />
+      </label>
+
+      {#if resumableAgents.length > 0}
+        <div bind:this={switchRef} class="relative">
+          <button
+            type="button"
+            data-testid="switch-agent-button"
+            disabled={!canSwitch}
+            aria-haspopup="menu"
+            aria-expanded={switchOpen}
+            onclick={() => (switchOpen = !switchOpen)}
+            title="Continue in a different agent"
+            class="inline-flex h-[3.2rem] items-center gap-1.5 rounded-[1.2rem] border border-white/10 bg-slate-900/90 px-3.5 text-sm text-slate-400 transition hover:border-white/20 hover:text-slate-200 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {#if resuming}
+              <span class="text-xs">Switching…</span>
+            {:else}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                class="size-3.5"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              <span class="hidden xs:inline">Switch agent</span>
+            {/if}
+          </button>
+
+          {#if switchOpen}
+            <div
+              data-testid="switch-agent-popover"
+              role="menu"
+              class="absolute bottom-full right-0 mb-2 min-w-[13rem] rounded-2xl border border-white/10 bg-slate-900 py-1.5 shadow-2xl"
+            >
+              <p class="px-3.5 pb-1.5 pt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">
+                Continue in…
+              </p>
+              {#each resumableAgents as agent, idx (agent.id)}
+                {#if idx === 0}
+                  <button
+                    bind:this={firstMenuItemRef}
+                    type="button"
+                    role="menuitem"
+                    data-testid={`switch-agent-${agent.id}`}
+                    onclick={() => {
+                      switchOpen = false
+                      onResume?.(agent.id)
+                    }}
+                    class="flex w-full items-center gap-2.5 px-3.5 py-2 text-sm text-slate-200 transition hover:bg-white/5 hover:text-white"
+                  >
+                     <span class="size-1.5 rounded-full bg-teal-400" aria-hidden="true"></span>
+                    {agent.name}
+                  </button>
+                {:else}
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-testid={`switch-agent-${agent.id}`}
+                    onclick={() => {
+                      switchOpen = false
+                      onResume?.(agent.id)
+                    }}
+                    class="flex w-full items-center gap-2.5 px-3.5 py-2 text-sm text-slate-200 transition hover:bg-white/5 hover:text-white"
+                  >
+                     <span class="size-1.5 rounded-full bg-teal-400" aria-hidden="true"></span>
+                    {agent.name}
+                  </button>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <button
+        type="submit"
+        disabled={!canSubmit}
+        class="inline-flex h-[3.2rem] items-center justify-center rounded-[1.2rem] border border-white/10 bg-teal-500 px-5 text-sm font-semibold text-slate-950 transition hover:bg-teal-400 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-slate-800 disabled:text-slate-500 sm:min-w-28"
+      >
+        Send
+      </button>
+    </div>
+
+    {#if showModelSelector}
+      <div class="mx-auto mt-2.5 max-w-5xl">
+        <div bind:this={modelRef} class="relative inline-block">
+          <button
+            type="button"
+            data-testid="model-selector-button"
+            aria-haspopup="listbox"
+            aria-expanded={modelOpen}
+            onclick={() => (modelOpen = !modelOpen)}
+            class="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-slate-900/80 px-3 py-1 text-[11px] font-medium text-slate-400 transition hover:border-white/20 hover:text-slate-300"
+          >
+            <span class="size-1.5 rounded-full bg-teal-400/70" aria-hidden="true"></span>
+            {currentModel?.name ?? modelState!.currentModelId}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              class="size-2.5"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+
+          {#if modelOpen}
+            <div
+              data-testid="model-selector-popover"
+              role="listbox"
+              aria-label="Select model"
+              class="absolute bottom-full left-0 mb-2 min-w-[16rem] rounded-2xl border border-white/10 bg-slate-900 py-1.5 shadow-2xl"
+            >
+              <p class="px-3.5 pb-1.5 pt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">
+                Model
+              </p>
+              {#each modelState!.availableModels as model, idx (model.modelId)}
+                {@const isSelected = model.modelId === modelState!.currentModelId}
+                {#if idx === 0}
+                  <button
+                    bind:this={firstModelItemRef}
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    data-testid={`model-option-${model.modelId}`}
+                    onclick={() => {
+                      modelOpen = false
+                      if (!isSelected) onModelChange?.(model.modelId)
+                    }}
+                    class="flex w-full flex-col gap-0.5 px-3.5 py-2 text-left transition hover:bg-white/5"
+                  >
+                    <span class={`text-sm font-medium ${isSelected ? 'text-teal-300' : 'text-slate-200'}`}>
+                      {#if isSelected}
+                        <span class="mr-1.5 text-teal-400" aria-hidden="true">✓</span>
+                      {/if}
+                      {model.name}
+                    </span>
+                    {#if model.description}
+                      <span class="text-[11px] text-slate-500">{model.description}</span>
+                    {/if}
+                  </button>
+                {:else}
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    data-testid={`model-option-${model.modelId}`}
+                    onclick={() => {
+                      modelOpen = false
+                      if (!isSelected) onModelChange?.(model.modelId)
+                    }}
+                    class="flex w-full flex-col gap-0.5 px-3.5 py-2 text-left transition hover:bg-white/5"
+                  >
+                    <span class={`text-sm font-medium ${isSelected ? 'text-teal-300' : 'text-slate-200'}`}>
+                      {#if isSelected}
+                        <span class="mr-1.5 text-teal-400" aria-hidden="true">✓</span>
+                      {/if}
+                      {model.name}
+                    </span>
+                    {#if model.description}
+                      <span class="text-[11px] text-slate-500">{model.description}</span>
+                    {/if}
+                  </button>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <p class="mx-auto mt-2 max-w-5xl text-[11px] text-slate-400">
+      {helperText ?? 'Streaming responses appear in the workspace as the agent thinks and replies.'}
+    </p>
+  </form>
+{/if}
diff --git a/frontend/src/components/chat/ChatComposer.tsx b/frontend/src/components/chat/ChatComposer.tsx
deleted file mode 100644
index 9927f40..0000000
--- a/frontend/src/components/chat/ChatComposer.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-import { useState, useEffect, useRef, type FormEvent } from 'react'
-import type { ModelState } from '../../hooks/useAgUiChat.js'
-
-/** Minimal agent shape needed for the delegation panel. */
-interface ResumableAgent {
-  id: string
-  name: string
-}
-
-interface ChatComposerProps {
-  value: string
-  onChange: (value: string) => void
-  onSubmit: (e: FormEvent<HTMLFormElement>) => void | Promise<void>
-  disabled: boolean
-  canSubmit: boolean
-  helperText?: string
-  /** When true, renders a read-only history session delegation panel instead of the input. */
-  isHistorySession?: boolean
-  /** True while the history session messages are being fetched. */
-  historyLoading?: boolean
-  /**
-   * The agent that supports native session/load for this history session (same
-   * agent + canLoad). Rendered as the primary "Resume" action. Undefined when
-   * no agent supports load.
-   */
-  resumeAgent?: ResumableAgent
-  /** Agents that can receive a handoff fork (all active agents except resumeAgent). */
-  forkAgents?: ResumableAgent[]
-  /** Called when the user picks the primary resume agent (session/load path). */
-  onResume?: (agentId: string) => void
-  /** Called when the user picks a fork agent (handoff path). */
-  onFork?: (agentId: string) => void
-  /**
-   * @deprecated Use resumeAgent + forkAgents instead for history sessions.
-   * Still used for the live-session switch-agent popover.
-   */
-  resumableAgents?: ResumableAgent[]
-  /** True while a resume/switch operation is in flight. */
-  resuming?: boolean
-  /** Model selection state; null or undefined when the agent does not support model switching. */
-  modelState?: ModelState | null
-  /** Called when the user selects a different model. */
-  onModelChange?: (modelId: string) => void
-}
-
-export function ChatComposer({
-  value,
-  onChange,
-  onSubmit,
-  disabled,
-  canSubmit,
-  helperText,
-  isHistorySession = false,
-  historyLoading = false,
-  resumeAgent,
-  forkAgents = [],
-  onResume,
-  onFork,
-  resumableAgents = [],
-  resuming = false,
-  modelState,
-  onModelChange,
-}: ChatComposerProps) {
-  const [switchOpen, setSwitchOpen] = useState(false)
-  const switchRef = useRef<HTMLDivElement>(null)
-  const firstMenuItemRef = useRef<HTMLButtonElement>(null)
-
-  const [modelOpen, setModelOpen] = useState(false)
-  const modelRef = useRef<HTMLDivElement>(null)
-  const firstModelItemRef = useRef<HTMLButtonElement>(null)
-
-  // Close the switch-agent popover when clicking outside or pressing Escape
-  useEffect(() => {
-    if (!switchOpen) return
-    const onMouse = (e: MouseEvent) => {
-      if (switchRef.current && !switchRef.current.contains(e.target as Node)) {
-        setSwitchOpen(false)
-      }
-    }
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setSwitchOpen(false)
-    }
-    document.addEventListener('mousedown', onMouse)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onMouse)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [switchOpen])
-
-  // Close the model popover when clicking outside or pressing Escape
-  useEffect(() => {
-    if (!modelOpen) return
-    const onMouse = (e: MouseEvent) => {
-      if (modelRef.current && !modelRef.current.contains(e.target as Node)) {
-        setModelOpen(false)
-      }
-    }
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setModelOpen(false)
-    }
-    document.addEventListener('mousedown', onMouse)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onMouse)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [modelOpen])
-
-  // Move focus to the first menu item when the switch-agent popover opens
-  useEffect(() => {
-    if (switchOpen) firstMenuItemRef.current?.focus()
-  }, [switchOpen])
-
-  // Move focus to the first model item when the model popover opens
-  useEffect(() => {
-    if (modelOpen) firstModelItemRef.current?.focus()
-  }, [modelOpen])
-
-  const hasAnyAction = resumeAgent != null || forkAgents.length > 0
-
-  if (isHistorySession) {
-    return (
-      <div
-        data-testid="history-session-panel"
-        className="border-t border-white/8 bg-[linear-gradient(180deg,rgba(10,14,22,0.96),rgba(5,8,14,0.98))] px-4 py-4 backdrop-blur sm:px-5 lg:px-8"
-      >
-        <div className="mx-auto max-w-5xl">
-          {historyLoading ? (
-            <div className="flex items-center gap-3 text-sm text-slate-500">
-              <span className="inline-flex h-2 w-2 animate-pulse rounded-full bg-slate-600" />
-              <span>Loading session history…</span>
-            </div>
-          ) : (
-            <>
-              <p className="mb-3 text-sm text-slate-400">
-                This is a read-only history session. Continue the conversation with an active agent:
-              </p>
-
-              {!hasAnyAction ? (
-                <p className="text-sm text-slate-500">
-                  No active agents available. Enable and start an agent in Settings to import this
-                  conversation.
-                </p>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {/* Primary action: native session/load — same agent, supports resume */}
-                  {resumeAgent != null && (
-                    <button
-                      key={resumeAgent.id}
-                      type="button"
-                      disabled={resuming}
-                      onClick={() => onResume?.(resumeAgent.id)}
-                      data-testid={`resume-agent-${resumeAgent.id}`}
-                      className="inline-flex items-center gap-2 rounded-[1.2rem] border border-teal-500/40 bg-teal-500/15 px-4 py-2.5 text-sm font-semibold text-teal-100 transition hover:border-teal-400/60 hover:bg-teal-500/25 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {resumeAgent.name}
-                      <span>Resume &rarr;</span>
-                    </button>
-                  )}
-
-                  {/* Secondary actions: handoff/fork — other active agents */}
-                  {forkAgents.map((agent) => (
-                    <button
-                      key={agent.id}
-                      type="button"
-                      disabled={resuming}
-                      onClick={() => onFork?.(agent.id)}
-                      data-testid={`fork-agent-${agent.id}`}
-                      className="inline-flex items-center gap-2 rounded-[1.2rem] border border-white/10 bg-slate-900/90 px-4 py-2.5 text-sm font-medium text-slate-300 transition hover:border-white/20 hover:bg-slate-800/80 hover:text-slate-100 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {agent.name}
-                      <span className="text-slate-400">Fork as new session &rarr;</span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  const canSwitch = resumableAgents.length > 0 && !resuming && !disabled
-  const showModelSelector =
-    modelState != null && modelState.availableModels.length > 1 && !isHistorySession
-  const currentModel = modelState?.availableModels.find(
-    (m) => m.modelId === modelState.currentModelId
-  )
-
-  return (
-    <form
-      onSubmit={onSubmit}
-      data-testid="chat-composer"
-      className="border-t border-white/8 bg-[linear-gradient(180deg,rgba(10,14,22,0.96),rgba(5,8,14,0.98))] px-4 py-4 backdrop-blur sm:px-5 lg:px-8"
-    >
-      <div className="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-end">
-        <label className="flex-1">
-          <span className="sr-only">Message</span>
-          <input
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder="Type a message…"
-            disabled={disabled}
-            className="w-full rounded-[1.2rem] border border-white/10 bg-slate-900/90 px-4 py-3.5 text-sm text-slate-100 outline-none transition focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30 disabled:cursor-not-allowed disabled:bg-slate-900/70 disabled:text-slate-500"
-          />
-        </label>
-
-        {/* Switch-agent popover — only shown in live sessions with other active agents */}
-        {resumableAgents.length > 0 && (
-          <div ref={switchRef} className="relative">
-            <button
-              type="button"
-              data-testid="switch-agent-button"
-              disabled={!canSwitch}
-              aria-haspopup="menu"
-              aria-expanded={switchOpen}
-              onClick={() => setSwitchOpen((o) => !o)}
-              title="Continue in a different agent"
-              className="inline-flex h-[3.2rem] items-center gap-1.5 rounded-[1.2rem] border border-white/10 bg-slate-900/90 px-3.5 text-sm text-slate-400 transition hover:border-white/20 hover:text-slate-200 disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {resuming ? (
-                <span className="text-xs">Switching…</span>
-              ) : (
-                <>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                    className="size-3.5"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  <span className="hidden xs:inline">Switch agent</span>
-                </>
-              )}
-            </button>
-
-            {switchOpen && (
-              <div
-                data-testid="switch-agent-popover"
-                role="menu"
-                className="absolute bottom-full right-0 mb-2 min-w-[13rem] rounded-2xl border border-white/10 bg-slate-900 py-1.5 shadow-2xl"
-              >
-                <p className="px-3.5 pb-1.5 pt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">
-                  Continue in…
-                </p>
-                {resumableAgents.map((agent, idx) => (
-                  <button
-                    key={agent.id}
-                    ref={idx === 0 ? firstMenuItemRef : undefined}
-                    type="button"
-                    role="menuitem"
-                    data-testid={`switch-agent-${agent.id}`}
-                    onClick={() => {
-                      setSwitchOpen(false)
-                      onResume?.(agent.id)
-                    }}
-                    className="flex w-full items-center gap-2.5 px-3.5 py-2 text-sm text-slate-200 transition hover:bg-white/5 hover:text-white"
-                  >
-                    <span className="size-1.5 rounded-full bg-teal-400" aria-hidden="true" />
-                    {agent.name}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        <button
-          type="submit"
-          disabled={!canSubmit}
-          className="inline-flex h-[3.2rem] items-center justify-center rounded-[1.2rem] border border-white/10 bg-teal-500 px-5 text-sm font-semibold text-slate-950 transition hover:bg-teal-400 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-slate-800 disabled:text-slate-500 sm:min-w-28"
-        >
-          Send
-        </button>
-      </div>
-
-      {/* Model selector — shown when the agent advertises multiple models */}
-      {showModelSelector && (
-        <div className="mx-auto mt-2.5 max-w-5xl">
-          <div ref={modelRef} className="relative inline-block">
-            <button
-              type="button"
-              data-testid="model-selector-button"
-              aria-haspopup="listbox"
-              aria-expanded={modelOpen}
-              onClick={() => setModelOpen((o) => !o)}
-              className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-slate-900/80 px-3 py-1 text-[11px] font-medium text-slate-400 transition hover:border-white/20 hover:text-slate-300"
-            >
-              <span className="size-1.5 rounded-full bg-teal-400/70" aria-hidden="true" />
-              {currentModel?.name ?? modelState!.currentModelId}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                className="size-2.5"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-
-            {modelOpen && (
-              <div
-                data-testid="model-selector-popover"
-                role="listbox"
-                aria-label="Select model"
-                className="absolute bottom-full left-0 mb-2 min-w-[16rem] rounded-2xl border border-white/10 bg-slate-900 py-1.5 shadow-2xl"
-              >
-                <p className="px-3.5 pb-1.5 pt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">
-                  Model
-                </p>
-                {modelState!.availableModels.map((model, idx) => {
-                  const isSelected = model.modelId === modelState!.currentModelId
-                  return (
-                    <button
-                      key={model.modelId}
-                      ref={idx === 0 ? firstModelItemRef : undefined}
-                      type="button"
-                      role="option"
-                      aria-selected={isSelected}
-                      data-testid={`model-option-${model.modelId}`}
-                      onClick={() => {
-                        setModelOpen(false)
-                        if (!isSelected) onModelChange?.(model.modelId)
-                      }}
-                      className="flex w-full flex-col gap-0.5 px-3.5 py-2 text-left transition hover:bg-white/5"
-                    >
-                      <span
-                        className={`text-sm font-medium ${isSelected ? 'text-teal-300' : 'text-slate-200'}`}
-                      >
-                        {isSelected && (
-                          <span className="mr-1.5 text-teal-400" aria-hidden="true">
-                            ✓
-                          </span>
-                        )}
-                        {model.name}
-                      </span>
-                      {model.description && (
-                        <span className="text-[11px] text-slate-500">{model.description}</span>
-                      )}
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      <p className="mx-auto mt-2 max-w-5xl text-[11px] text-slate-400">
-        {helperText ??
-          'Streaming responses appear in the workspace as the agent thinks and replies.'}
-      </p>
-    </form>
-  )
-}
diff --git a/frontend/src/components/chat/ChatDiffView.svelte b/frontend/src/components/chat/ChatDiffView.svelte
new file mode 100644
index 0000000..13c251e
--- /dev/null
+++ b/frontend/src/components/chat/ChatDiffView.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { buildLineClassName, parseUnifiedDiff } from './parseUnifiedDiff.js'
+
+  interface Props {
+    state: 'loading' | 'error' | 'git_not_found' | 'empty' | 'ready'
+    diff?: string
+    message?: string | null
+  }
+
+  const { state, diff = '', message = null }: Props = $props()
+
+  const parsedFiles = $derived(state === 'ready' || (state !== 'loading' && state !== 'error' && state !== 'git_not_found' && state !== 'empty') ? parseUnifiedDiff(diff) : [])
+  const totalAdditions = $derived(parsedFiles.reduce((count, file) => count + file.additions, 0))
+  const totalDeletions = $derived(parsedFiles.reduce((count, file) => count + file.deletions, 0))
+</script>
+
+{#if state === 'loading'}
+  <section
+    data-testid="chat-diff-view"
+    class="rounded-2xl border border-amber-500/20 bg-amber-500/10 px-5 py-6 text-sm text-amber-100 shadow-sm"
+  >
+    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-700">Diff</p>
+    <p class="mt-3 text-base font-medium text-slate-50">Loading project diff...</p>
+  </section>
+{:else if state === 'error'}
+  <section
+    data-testid="chat-diff-view"
+    class="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-5 py-5 text-sm text-rose-100 shadow-sm"
+  >
+    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-rose-700">Diff</p>
+    <p class="mt-3 text-base font-medium text-slate-50">{message}</p>
+  </section>
+{:else if state === 'git_not_found'}
+  <section
+    data-testid="chat-diff-view"
+    class="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 px-5 py-8 shadow-sm"
+  >
+    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Diff</p>
+    <h2 class="mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">Git not available</h2>
+    <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
+      {message ?? 'Git was not found on PATH for this backend process.'}
+    </p>
+  </section>
+{:else if state === 'empty'}
+  <section
+    data-testid="chat-diff-view"
+    class="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 px-5 py-8 shadow-sm"
+  >
+    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Diff</p>
+    <h2 class="mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">
+      Working tree is clean
+    </h2>
+    <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
+      No unstaged or staged changes are currently shown for this project.
+    </p>
+  </section>
+{:else if parsedFiles.length === 0}
+  <section
+    data-testid="chat-diff-view"
+    class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm"
+  >
+    <div class="border-b border-white/8 px-5 py-3 text-[11px] uppercase tracking-[0.22em] text-slate-500">
+      Working Tree Diff
+    </div>
+    {#if message}
+      <div class="border-b border-white/8 bg-slate-900/60 px-5 py-3 text-sm text-slate-400">
+        {message}
+      </div>
+    {/if}
+    <pre class="overflow-x-auto px-5 py-5 text-xs leading-6 text-slate-200"><code>{diff}</code></pre>
+  </section>
+{:else}
+  <section data-testid="chat-diff-view" class="space-y-4">
+    <div class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm">
+      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-white/8 px-5 py-4">
+        <div>
+          <p class="text-[11px] uppercase tracking-[0.22em] text-slate-500">Working Tree Diff</p>
+          <h2 class="mt-2 text-lg font-semibold text-slate-50">
+            {parsedFiles.length} file{parsedFiles.length === 1 ? '' : 's'} changed
+          </h2>
+        </div>
+        <div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em]">
+          <span class="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-emerald-200">
+            +{totalAdditions}
+          </span>
+          <span class="rounded-full border border-rose-500/20 bg-rose-500/10 px-3 py-1 text-rose-200">
+            -{totalDeletions}
+          </span>
+        </div>
+      </div>
+      {#if message}
+        <div class="border-b border-white/8 bg-slate-900/60 px-5 py-3 text-sm text-slate-400">
+          {message}
+        </div>
+      {/if}
+    </div>
+
+    {#each parsedFiles as file (file.header)}
+      <article class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm">
+        <header class="border-b border-white/8 px-5 py-4">
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <p class="break-all text-sm font-semibold text-slate-50 sm:break-normal">
+                {file.displayPath}
+              </p>
+              <p class="mt-1 text-xs text-slate-500">{file.header}</p>
+            </div>
+            <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em]">
+              <span class="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-1 text-emerald-200">
+                +{file.additions}
+              </span>
+              <span class="rounded-full border border-rose-500/20 bg-rose-500/10 px-2.5 py-1 text-rose-200">
+                -{file.deletions}
+              </span>
+            </div>
+          </div>
+          {#if file.metadata.length > 0}
+            <div class="mt-3 flex flex-wrap gap-2 text-[11px] text-slate-500">
+              {#each file.metadata as entry (`${file.header}-${entry}`)}
+                <span class="rounded-full border border-white/8 bg-slate-900/80 px-2.5 py-1">
+                  {entry}
+                </span>
+              {/each}
+            </div>
+          {/if}
+        </header>
+
+        <div class="divide-y divide-white/8">
+          {#each file.hunks as hunk (`${file.header}-${hunk.header}`)}
+            <section>
+              <div class="flex flex-wrap items-center justify-between gap-3 bg-slate-900/70 px-5 py-3">
+                <p class="font-mono text-xs text-sky-200">{hunk.header}</p>
+                {#if hunk.context}
+                  <p class="text-xs text-slate-500">{hunk.context}</p>
+                {/if}
+              </div>
+              <div class="overflow-x-auto">
+                <div class="min-w-0 font-mono text-[11px] leading-6 sm:min-w-[38rem] sm:text-xs">
+                  {#each hunk.lines as line, index (`${hunk.header}-${index}-${line.oldLineNumber ?? 'x'}-${line.newLineNumber ?? 'y'}`)}
+                    <div class={buildLineClassName(line.kind)}>
+                      <span class="inline-flex justify-end px-2 text-slate-600 sm:px-3">
+                        {line.oldLineNumber ?? ''}
+                      </span>
+                      <span class="inline-flex justify-end border-l border-white/5 px-2 text-slate-600 sm:px-3">
+                        {line.newLineNumber ?? ''}
+                      </span>
+                      <span class="inline-flex justify-center border-l border-white/5 px-1.5 text-slate-500 sm:px-2">
+                        {line.kind === 'addition' ? '+' : line.kind === 'deletion' ? '-' : line.kind === 'note' ? '\\' : ' '}
+                      </span>
+                      <span class="min-w-0 whitespace-pre-wrap break-words border-l border-white/5 px-2.5 py-1.5 text-slate-200 sm:px-3 sm:whitespace-pre sm:break-normal">
+                        {line.content || ' '}
+                      </span>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </section>
+          {/each}
+        </div>
+      </article>
+    {/each}
+  </section>
+{/if}
diff --git a/frontend/src/components/chat/ChatDiffView.test.tsx b/frontend/src/components/chat/ChatDiffView.test.svelte.ts
similarity index 83%
rename from frontend/src/components/chat/ChatDiffView.test.tsx
rename to frontend/src/components/chat/ChatDiffView.test.svelte.ts
index fb2cb6f..f3da9b5 100644
--- a/frontend/src/components/chat/ChatDiffView.test.tsx
+++ b/frontend/src/components/chat/ChatDiffView.test.svelte.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { describe, it, expect } from 'vitest'
-import { render, screen, within } from '@testing-library/react'
-import { ChatDiffView } from './ChatDiffView.js'
+import { render, screen, within } from '@testing-library/svelte'
+import ChatDiffView from './ChatDiffView.svelte'
 import { parseUnifiedDiff } from './parseUnifiedDiff.js'
 
 const SAMPLE_DIFF = `diff --git a/src/app.tsx b/src/app.tsx
@@ -46,7 +46,7 @@ describe('parseUnifiedDiff', () => {
 
 describe('ChatDiffView', () => {
   it('renders structured diff cards with file summaries', () => {
-    render(<ChatDiffView state="ready" diff={SAMPLE_DIFF} />)
+    render(ChatDiffView, { props: { state: 'ready', diff: SAMPLE_DIFF } })
 
     expect(screen.getByTestId('chat-diff-view')).toBeDefined()
     expect(screen.getByText(/2 files changed/i)).toBeDefined()
@@ -57,7 +57,7 @@ describe('ChatDiffView', () => {
   })
 
   it('renders hunk lines with additions and deletions visible', () => {
-    render(<ChatDiffView state="ready" diff={SAMPLE_DIFF} />)
+    render(ChatDiffView, { props: { state: 'ready', diff: SAMPLE_DIFF } })
 
     const diffView = screen.getByTestId('chat-diff-view')
     expect(within(diffView).getByText("import { ChatDiffView } from './chat'")).toBeDefined()
@@ -67,18 +67,18 @@ describe('ChatDiffView', () => {
   })
 
   it('renders the empty state when no diff text is present', () => {
-    render(<ChatDiffView state="empty" />)
+    render(ChatDiffView, { props: { state: 'empty' } })
 
     expect(screen.getByText('Working tree is clean')).toBeDefined()
   })
 
   it('renders the git missing state message', () => {
-    render(
-      <ChatDiffView
-        state="git_not_found"
-        message="Git was not found on PATH for this backend process."
-      />
-    )
+    render(ChatDiffView, {
+      props: {
+        state: 'git_not_found',
+        message: 'Git was not found on PATH for this backend process.',
+      },
+    })
 
     expect(screen.getByText('Git not available')).toBeDefined()
     expect(screen.getByText('Git was not found on PATH for this backend process.')).toBeDefined()
diff --git a/frontend/src/components/chat/ChatDiffView.tsx b/frontend/src/components/chat/ChatDiffView.tsx
deleted file mode 100644
index fd815ef..0000000
--- a/frontend/src/components/chat/ChatDiffView.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { buildLineClassName, parseUnifiedDiff } from './parseUnifiedDiff.js'
-
-interface ChatDiffViewProps {
-  state: 'loading' | 'error' | 'git_not_found' | 'empty' | 'ready'
-  diff?: string
-  message?: string | null
-}
-
-export function ChatDiffView({ state, diff = '', message = null }: ChatDiffViewProps) {
-  if (state === 'loading') {
-    return (
-      <section
-        data-testid="chat-diff-view"
-        className="rounded-2xl border border-amber-500/20 bg-amber-500/10 px-5 py-6 text-sm text-amber-100 shadow-sm"
-      >
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-700">Diff</p>
-        <p className="mt-3 text-base font-medium text-slate-50">Loading project diff...</p>
-      </section>
-    )
-  }
-
-  if (state === 'error') {
-    return (
-      <section
-        data-testid="chat-diff-view"
-        className="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-5 py-5 text-sm text-rose-100 shadow-sm"
-      >
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-rose-700">Diff</p>
-        <p className="mt-3 text-base font-medium text-slate-50">{message}</p>
-      </section>
-    )
-  }
-
-  if (state === 'git_not_found') {
-    return (
-      <section
-        data-testid="chat-diff-view"
-        className="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 px-5 py-8 shadow-sm"
-      >
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Diff</p>
-        <h2 className="mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">
-          Git not available
-        </h2>
-        <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
-          {message ?? 'Git was not found on PATH for this backend process.'}
-        </p>
-      </section>
-    )
-  }
-
-  if (state === 'empty') {
-    return (
-      <section
-        data-testid="chat-diff-view"
-        className="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 px-5 py-8 shadow-sm"
-      >
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Diff</p>
-        <h2 className="mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">
-          Working tree is clean
-        </h2>
-        <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
-          No unstaged or staged changes are currently shown for this project.
-        </p>
-      </section>
-    )
-  }
-
-  const parsedFiles = parseUnifiedDiff(diff)
-  if (parsedFiles.length === 0) {
-    return (
-      <section
-        data-testid="chat-diff-view"
-        className="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm"
-      >
-        <div className="border-b border-white/8 px-5 py-3 text-[11px] uppercase tracking-[0.22em] text-slate-500">
-          Working Tree Diff
-        </div>
-        {message ? (
-          <div className="border-b border-white/8 bg-slate-900/60 px-5 py-3 text-sm text-slate-400">
-            {message}
-          </div>
-        ) : null}
-        <pre className="overflow-x-auto px-5 py-5 text-xs leading-6 text-slate-200">
-          <code>{diff}</code>
-        </pre>
-      </section>
-    )
-  }
-
-  const totalAdditions = parsedFiles.reduce((count, file) => count + file.additions, 0)
-  const totalDeletions = parsedFiles.reduce((count, file) => count + file.deletions, 0)
-
-  return (
-    <section data-testid="chat-diff-view" className="space-y-4">
-      <div className="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm">
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/8 px-5 py-4">
-          <div>
-            <p className="text-[11px] uppercase tracking-[0.22em] text-slate-500">
-              Working Tree Diff
-            </p>
-            <h2 className="mt-2 text-lg font-semibold text-slate-50">
-              {parsedFiles.length} file{parsedFiles.length === 1 ? '' : 's'} changed
-            </h2>
-          </div>
-          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em]">
-            <span className="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-emerald-200">
-              +{totalAdditions}
-            </span>
-            <span className="rounded-full border border-rose-500/20 bg-rose-500/10 px-3 py-1 text-rose-200">
-              -{totalDeletions}
-            </span>
-          </div>
-        </div>
-        {message ? (
-          <div className="border-b border-white/8 bg-slate-900/60 px-5 py-3 text-sm text-slate-400">
-            {message}
-          </div>
-        ) : null}
-      </div>
-
-      {parsedFiles.map((file) => (
-        <article
-          key={file.header}
-          className="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70 shadow-sm"
-        >
-          <header className="border-b border-white/8 px-5 py-4">
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div>
-                <p className="break-all text-sm font-semibold text-slate-50 sm:break-normal">
-                  {file.displayPath}
-                </p>
-                <p className="mt-1 text-xs text-slate-500">{file.header}</p>
-              </div>
-              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em]">
-                <span className="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-1 text-emerald-200">
-                  +{file.additions}
-                </span>
-                <span className="rounded-full border border-rose-500/20 bg-rose-500/10 px-2.5 py-1 text-rose-200">
-                  -{file.deletions}
-                </span>
-              </div>
-            </div>
-            {file.metadata.length > 0 ? (
-              <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-slate-500">
-                {file.metadata.map((entry) => (
-                  <span
-                    key={`${file.header}-${entry}`}
-                    className="rounded-full border border-white/8 bg-slate-900/80 px-2.5 py-1"
-                  >
-                    {entry}
-                  </span>
-                ))}
-              </div>
-            ) : null}
-          </header>
-
-          <div className="divide-y divide-white/8">
-            {file.hunks.map((hunk) => (
-              <section key={`${file.header}-${hunk.header}`}>
-                <div className="flex flex-wrap items-center justify-between gap-3 bg-slate-900/70 px-5 py-3">
-                  <p className="font-mono text-xs text-sky-200">{hunk.header}</p>
-                  {hunk.context ? <p className="text-xs text-slate-500">{hunk.context}</p> : null}
-                </div>
-                <div className="overflow-x-auto">
-                  <div className="min-w-0 font-mono text-[11px] leading-6 sm:min-w-[38rem] sm:text-xs">
-                    {hunk.lines.map((line, index) => (
-                      <div
-                        key={`${hunk.header}-${index}-${line.oldLineNumber ?? 'x'}-${line.newLineNumber ?? 'y'}`}
-                        className={buildLineClassName(line.kind)}
-                      >
-                        <span className="inline-flex justify-end px-2 text-slate-600 sm:px-3">
-                          {line.oldLineNumber ?? ''}
-                        </span>
-                        <span className="inline-flex justify-end border-l border-white/5 px-2 text-slate-600 sm:px-3">
-                          {line.newLineNumber ?? ''}
-                        </span>
-                        <span className="inline-flex justify-center border-l border-white/5 px-1.5 text-slate-500 sm:px-2">
-                          {line.kind === 'addition'
-                            ? '+'
-                            : line.kind === 'deletion'
-                              ? '-'
-                              : line.kind === 'note'
-                                ? '\\'
-                                : ' '}
-                        </span>
-                        <span className="min-w-0 whitespace-pre-wrap break-words border-l border-white/5 px-2.5 py-1.5 text-slate-200 sm:px-3 sm:whitespace-pre sm:break-normal">
-                          {line.content || ' '}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </section>
-            ))}
-          </div>
-        </article>
-      ))}
-    </section>
-  )
-}
diff --git a/frontend/src/components/chat/ChatHeader.stories.tsx b/frontend/src/components/chat/ChatHeader.stories.ts
similarity index 76%
rename from frontend/src/components/chat/ChatHeader.stories.tsx
rename to frontend/src/components/chat/ChatHeader.stories.ts
index 6e38278..a6fbd8f 100644
--- a/frontend/src/components/chat/ChatHeader.stories.tsx
+++ b/frontend/src/components/chat/ChatHeader.stories.ts
@@ -1,17 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ChatHeader } from './ChatHeader.js'
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ChatHeader from './ChatHeader.svelte'
 
 const meta = {
   title: 'Chat/ChatHeader',
   component: ChatHeader,
   args: {
-    renderLink: ({ className, children }) => <span className={className}>{children}</span>,
     activeAgentName: 'GitHub Copilot',
     project: {
       id: 'acp-frontend',
       name: 'ACP Frontend',
       path: '/home/vries/projects/acp-frontend',
-      status: 'available',
+      status: 'available' as const,
     },
     sessionId: '8bde315f-d2a3-4521-80e2-a55a0f2598d8',
     title: 'Agentic Coding Presentation Outline',
diff --git a/frontend/src/components/chat/ChatHeader.svelte b/frontend/src/components/chat/ChatHeader.svelte
new file mode 100644
index 0000000..bf3f7c7
--- /dev/null
+++ b/frontend/src/components/chat/ChatHeader.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import type { ProjectSummary } from '../../store/chatStore.svelte.js'
+
+  interface Props {
+    project: ProjectSummary | null
+    sessionId: string | null
+    activeAgentName?: string
+    title?: string | null
+    errorMessage: string | null
+    ready: boolean
+    thinking: boolean
+    isHistorySession?: boolean
+  }
+
+  const {
+    project,
+    sessionId,
+    activeAgentName = 'Agent',
+    title = null,
+    errorMessage,
+    ready,
+    thinking,
+    isHistorySession = false,
+  }: Props = $props()
+
+  let isCompactViewport = $state(
+    typeof window !== 'undefined' ? window.innerWidth < 1024 : false
+  )
+  let showCompactErrorPopover = $state(false)
+
+  $effect(() => {
+    const handleResize = () => {
+      isCompactViewport = window.innerWidth < 1024
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  })
+
+  $effect(() => {
+    if (!errorMessage) {
+      showCompactErrorPopover = false
+    }
+  })
+
+  const statusLabel = $derived(
+    errorMessage
+      ? 'Needs attention'
+      : thinking
+        ? 'Thinking'
+        : isHistorySession
+          ? 'History'
+          : ready
+            ? 'Ready'
+            : 'Connecting'
+  )
+
+  const statusDetail = $derived(
+    errorMessage ??
+      (isHistorySession
+        ? 'Read-only session'
+        : !ready
+          ? 'Connecting to server'
+          : thinking
+            ? 'Reply in progress'
+            : 'Stream healthy')
+  )
+
+  const headerTitle = $derived(title?.trim() || 'Chat Workspace')
+  const compactSubtitle = $derived(
+    isHistorySession
+      ? project
+        ? `${project.name} · History`
+        : `${activeAgentName} · History`
+      : project
+        ? project.name
+        : activeAgentName
+  )
+
+  function formatSessionLabel(sid: string | null, rdy: boolean, isHistory: boolean): string {
+    if (isHistory) return 'Read-only'
+    if (!rdy) return 'Starting'
+    if (!sid) return 'Unavailable'
+    return sid.slice(0, 8)
+  }
+
+  function pillClass(tone: 'neutral' | 'ready' | 'error'): string {
+    return tone === 'error'
+      ? 'border-rose-500/25 bg-rose-500/10 text-rose-100'
+      : tone === 'ready'
+        ? 'border-emerald-500/20 bg-emerald-500/10 text-slate-100'
+        : 'border-white/10 bg-slate-900/60 text-slate-200'
+  }
+</script>
+
+{#snippet statusPill(label: string, tone: 'neutral' | 'ready' | 'error', detail?: string, compact?: boolean)}
+  <div class={`rounded-full border ${compact ? 'px-2.5 py-1.5' : 'px-3 py-2'} ${pillClass(tone)}`}>
+    <div class={`flex items-center gap-2 whitespace-nowrap ${compact ? 'text-xs' : 'text-sm'} font-medium`}>
+      <span>{label}</span>
+      {#if detail}<span class="text-xs text-slate-400">{detail}</span>{/if}
+    </div>
+  </div>
+{/snippet}
+
+<header class="border-b border-white/8 bg-slate-950/92 px-4 py-3 text-slate-100 shadow-[0_10px_40px_rgba(2,6,23,0.45)] backdrop-blur sm:px-5 lg:px-6">
+  {#if isCompactViewport}
+    <div data-testid="chat-header-compact" class="flex min-h-0 items-start justify-between gap-3">
+      <div class="flex min-w-0 items-center gap-3">
+        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-teal-400/20 bg-slate-900/85 text-sm font-semibold text-teal-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
+          ACP
+        </div>
+        <div class="min-w-0">
+          <h1 class="truncate font-[family:var(--font-display)] text-lg text-slate-50 sm:text-xl">
+            {headerTitle}
+          </h1>
+          <p class="truncate text-xs text-slate-400">{compactSubtitle}</p>
+        </div>
+      </div>
+
+      <div class="relative shrink-0">
+        {#if errorMessage}
+          <button
+            type="button"
+            aria-label="Show chat warning details"
+            aria-expanded={showCompactErrorPopover}
+            onclick={() => (showCompactErrorPopover = !showCompactErrorPopover)}
+            class="rounded-full"
+          >
+            {@render statusPill('Warning', 'error', undefined, true)}
+          </button>
+        {:else}
+          {@render statusPill(statusLabel, ready ? 'ready' : 'neutral', thinking ? 'Reply in progress' : undefined, true)}
+        {/if}
+
+        {#if errorMessage && showCompactErrorPopover}
+          <div
+            role="dialog"
+            aria-label="Chat warning details"
+            class="absolute right-0 top-[calc(100%+0.75rem)] z-20 w-[min(18rem,78vw)] rounded-2xl border border-rose-500/25 bg-[#12070c]/95 p-3 text-left text-sm text-rose-50 shadow-[0_18px_40px_rgba(2,6,23,0.5)] backdrop-blur"
+          >
+            <div class="absolute -top-2 right-5 h-4 w-4 rotate-45 border-l border-t border-rose-500/25 bg-[#12070c]/95"></div>
+            <p class="text-[10px] font-semibold uppercase tracking-[0.2em] text-rose-300">Chat warning</p>
+            <p class="mt-2 text-[13px] leading-5 text-rose-50">{errorMessage}</p>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {:else}
+    <div class="flex min-h-12 flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+      <div class="flex min-w-0 items-center gap-3">
+        <div class="flex h-9 w-9 items-center justify-center rounded-xl border border-teal-400/20 bg-slate-900/85 text-sm font-semibold text-teal-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
+          ACP
+        </div>
+        <div class="min-w-0">
+          <h1 class="truncate font-[family:var(--font-display)] text-xl text-slate-50 sm:text-[1.75rem]">
+            {headerTitle}
+          </h1>
+          <p class="truncate text-xs text-slate-400 sm:text-[13px]">
+            {#if isHistorySession}
+              {project ? `${project.name} · Imported history` : `${activeAgentName} · Imported history`}
+            {:else}
+              {project ? `${project.name} · ${activeAgentName}` : `${activeAgentName} · Local chat`}
+            {/if}
+          </p>
+        </div>
+
+        <div class="hidden items-center gap-2 lg:flex">
+          <a
+            href="/#/settings"
+            class="inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 px-3 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
+          >
+            Backends
+          </a>
+          <a
+            href="/#/settings"
+            class="inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/45 px-3 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900"
+          >
+            MCP
+          </a>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2.5 lg:justify-end">
+        {@render statusPill(isHistorySession ? `${activeAgentName} history` : activeAgentName, 'neutral')}
+        {#if project}{@render statusPill(project.name, 'neutral')}{/if}
+        {@render statusPill(statusLabel, errorMessage ? 'error' : 'ready', statusDetail)}
+        {@render statusPill(`Session ${formatSessionLabel(sessionId, ready, isHistorySession)}`, 'neutral')}
+      </div>
+    </div>
+
+    <div class="mt-3 flex gap-2 lg:hidden">
+      <a
+        href="/#/settings"
+        class="inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 px-3 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
+      >
+        Backends
+      </a>
+      <a
+        href="/#/settings"
+        class="inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/45 px-3 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900"
+      >
+        MCP
+      </a>
+    </div>
+  {/if}
+</header>
diff --git a/frontend/src/components/chat/ChatHeader.test.tsx b/frontend/src/components/chat/ChatHeader.test.svelte.ts
similarity index 79%
rename from frontend/src/components/chat/ChatHeader.test.tsx
rename to frontend/src/components/chat/ChatHeader.test.svelte.ts
index b7ea476..52357c8 100644
--- a/frontend/src/components/chat/ChatHeader.test.tsx
+++ b/frontend/src/components/chat/ChatHeader.test.svelte.ts
@@ -1,8 +1,7 @@
 // @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import type { ReactNode } from 'react'
-import { ChatHeader } from './ChatHeader.js'
+import { fireEvent, render, screen, cleanup } from '@testing-library/svelte'
+import ChatHeader from './ChatHeader.svelte'
 
 const DEFAULT_PROPS = {
   activeAgentName: 'GitHub Copilot',
@@ -17,9 +16,7 @@ const DEFAULT_PROPS = {
   errorMessage: null,
   ready: true,
   thinking: false,
-  renderLink: ({ children, className }: { children: ReactNode; className: string }) => (
-    <span className={className}>{children}</span>
-  ),
+  isHistorySession: false,
 }
 
 describe('ChatHeader', () => {
@@ -30,6 +27,7 @@ describe('ChatHeader', () => {
   })
 
   afterEach(() => {
+    cleanup()
     window.innerWidth = originalWidth
     window.dispatchEvent(new Event('resize'))
   })
@@ -38,7 +36,7 @@ describe('ChatHeader', () => {
     window.innerWidth = 390
     window.dispatchEvent(new Event('resize'))
 
-    render(<ChatHeader {...DEFAULT_PROPS} />)
+    render(ChatHeader, { props: DEFAULT_PROPS })
 
     expect(screen.getByTestId('chat-header-compact')).toBeDefined()
     expect(screen.queryByText('Backends')).toBeNull()
@@ -51,7 +49,7 @@ describe('ChatHeader', () => {
     window.innerWidth = 1280
     window.dispatchEvent(new Event('resize'))
 
-    render(<ChatHeader {...DEFAULT_PROPS} />)
+    render(ChatHeader, { props: DEFAULT_PROPS })
 
     expect(screen.queryByTestId('chat-header-compact')).toBeNull()
     expect(screen.getAllByText('Backends').length).toBeGreaterThan(0)
@@ -63,13 +61,14 @@ describe('ChatHeader', () => {
     window.innerWidth = 390
     window.dispatchEvent(new Event('resize'))
 
-    render(
-      <ChatHeader
-        {...DEFAULT_PROPS}
-        errorMessage="Unable to load that session right now. Pick another one or create a new chat."
-        ready={false}
-      />
-    )
+    render(ChatHeader, {
+      props: {
+        ...DEFAULT_PROPS,
+        errorMessage:
+          'Unable to load that session right now. Pick another one or create a new chat.',
+        ready: false,
+      },
+    })
 
     expect(
       screen.queryByText(
diff --git a/frontend/src/components/chat/ChatHeader.tsx b/frontend/src/components/chat/ChatHeader.tsx
deleted file mode 100644
index 8d15881..0000000
--- a/frontend/src/components/chat/ChatHeader.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useEffect, useState, type ReactNode } from 'react'
-import { Link } from '@tanstack/react-router'
-import type { ProjectSummary } from '../../hooks/useAgUiChat.js'
-
-interface HeaderLinkProps {
-  to: '/settings/backends' | '/settings/mcp'
-  className: string
-  children: ReactNode
-}
-
-interface ChatHeaderProps {
-  renderLink?: (props: HeaderLinkProps) => ReactNode
-  project: ProjectSummary | null
-  sessionId: string | null
-  activeAgentName?: string
-  title?: string | null
-  errorMessage: string | null
-  ready: boolean
-  thinking: boolean
-  isHistorySession?: boolean
-}
-
-function formatSessionLabel(sessionId: string | null, ready: boolean, isHistorySession: boolean) {
-  if (isHistorySession) return 'Read-only'
-  if (!ready) return 'Starting'
-  if (!sessionId) return 'Unavailable'
-  return sessionId.slice(0, 8)
-}
-
-export function ChatHeader({
-  renderLink,
-  project,
-  sessionId,
-  activeAgentName = 'Agent',
-  title,
-  errorMessage,
-  ready,
-  thinking,
-  isHistorySession = false,
-}: ChatHeaderProps) {
-  const headerLink = renderLink ?? defaultHeaderLink
-  const [isCompactViewport, setIsCompactViewport] = useState(() =>
-    typeof window !== 'undefined' ? window.innerWidth < 1024 : false
-  )
-  const [showCompactErrorPopover, setShowCompactErrorPopover] = useState(false)
-  const statusLabel = errorMessage
-    ? 'Needs attention'
-    : thinking
-      ? 'Thinking'
-      : isHistorySession
-        ? 'History'
-        : ready
-          ? 'Ready'
-          : 'Connecting'
-  const statusDetail =
-    errorMessage ??
-    (isHistorySession
-      ? 'Read-only session'
-      : !ready
-        ? 'Connecting to server'
-        : thinking
-          ? 'Reply in progress'
-          : 'Stream healthy')
-  const headerTitle = title?.trim() || 'Chat Workspace'
-  const compactSubtitle = project ? project.name : activeAgentName
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
-    const handleResize = () => {
-      setIsCompactViewport(window.innerWidth < 1024)
-    }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  useEffect(() => {
-    if (!errorMessage) {
-      setShowCompactErrorPopover(false)
-    }
-  }, [errorMessage])
-
-  return (
-    <header className="border-b border-white/8 bg-slate-950/92 px-4 py-3 text-slate-100 shadow-[0_10px_40px_rgba(2,6,23,0.45)] backdrop-blur sm:px-5 lg:px-6">
-      {isCompactViewport ? (
-        <div
-          data-testid="chat-header-compact"
-          className="flex min-h-0 items-start justify-between gap-3"
-        >
-          <div className="flex min-w-0 items-center gap-3">
-            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-teal-400/20 bg-slate-900/85 text-sm font-semibold text-teal-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
-              ACP
-            </div>
-            <div className="min-w-0">
-              <h1 className="truncate font-[family:var(--font-display)] text-lg text-slate-50 sm:text-xl">
-                {headerTitle}
-              </h1>
-              <p className="truncate text-xs text-slate-400">{compactSubtitle}</p>
-            </div>
-          </div>
-
-          <div className="relative shrink-0">
-            {errorMessage ? (
-              <button
-                type="button"
-                aria-label="Show chat warning details"
-                aria-expanded={showCompactErrorPopover}
-                onClick={() => setShowCompactErrorPopover((open) => !open)}
-                className="rounded-full"
-              >
-                <StatusPill label="Warning" tone="error" compact />
-              </button>
-            ) : (
-              <StatusPill
-                label={statusLabel}
-                detail={thinking ? 'Reply in progress' : undefined}
-                tone={ready ? (thinking ? 'ready' : 'ready') : 'neutral'}
-                compact
-              />
-            )}
-
-            {errorMessage && showCompactErrorPopover ? (
-              <div
-                role="dialog"
-                aria-label="Chat warning details"
-                className="absolute right-0 top-[calc(100%+0.75rem)] z-20 w-[min(18rem,78vw)] rounded-2xl border border-rose-500/25 bg-[#12070c]/95 p-3 text-left text-sm text-rose-50 shadow-[0_18px_40px_rgba(2,6,23,0.5)] backdrop-blur"
-              >
-                <div className="absolute -top-2 right-5 h-4 w-4 rotate-45 border-l border-t border-rose-500/25 bg-[#12070c]/95" />
-                <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-rose-300">
-                  Chat warning
-                </p>
-                <p className="mt-2 text-[13px] leading-5 text-rose-50">{errorMessage}</p>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      ) : (
-        <>
-          <div className="flex min-h-12 flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-            <div className="flex min-w-0 items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl border border-teal-400/20 bg-slate-900/85 text-sm font-semibold text-teal-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
-                ACP
-              </div>
-              <div className="min-w-0">
-                <h1 className="truncate font-[family:var(--font-display)] text-xl text-slate-50 sm:text-[1.75rem]">
-                  {headerTitle}
-                </h1>
-                <p className="truncate text-xs text-slate-400 sm:text-[13px]">
-                  {project
-                    ? `${project.name} · ${activeAgentName}`
-                    : `${activeAgentName} · Local chat`}
-                </p>
-              </div>
-
-              <div className="hidden items-center gap-2 lg:flex">
-                {headerLink({
-                  to: '/settings/backends',
-                  className:
-                    'inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 px-3 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900',
-                  children: 'Backends',
-                })}
-                {headerLink({
-                  to: '/settings/mcp',
-                  className:
-                    'inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/45 px-3 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900',
-                  children: 'MCP',
-                })}
-              </div>
-            </div>
-
-            <div className="flex flex-wrap items-center gap-2.5 lg:justify-end">
-              <StatusPill label={activeAgentName} tone="neutral" />
-              {project ? <StatusPill label={project.name} tone="neutral" /> : null}
-              <StatusPill
-                label={statusLabel}
-                detail={statusDetail}
-                tone={errorMessage ? 'error' : 'ready'}
-              />
-              <StatusPill
-                label={`Session ${formatSessionLabel(sessionId, ready, isHistorySession)}`}
-                tone="neutral"
-              />
-            </div>
-          </div>
-
-          <div className="mt-3 flex gap-2 lg:hidden">
-            {headerLink({
-              to: '/settings/backends',
-              className:
-                'inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 px-3 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900',
-              children: 'Backends',
-            })}
-            {headerLink({
-              to: '/settings/mcp',
-              className:
-                'inline-flex h-9 items-center justify-center rounded-full border border-white/10 bg-slate-900/45 px-3 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900',
-              children: 'MCP',
-            })}
-          </div>
-        </>
-      )}
-    </header>
-  )
-}
-
-function StatusPill({
-  label,
-  detail,
-  tone,
-  compact = false,
-}: {
-  label: string
-  detail?: string
-  tone: 'neutral' | 'ready' | 'error'
-  compact?: boolean
-}) {
-  const className =
-    tone === 'error'
-      ? 'border-rose-500/25 bg-rose-500/10 text-rose-100'
-      : tone === 'ready'
-        ? 'border-emerald-500/20 bg-emerald-500/10 text-slate-100'
-        : 'border-white/10 bg-slate-900/60 text-slate-200'
-
-  return (
-    <div className={`rounded-full border ${compact ? 'px-2.5 py-1.5' : 'px-3 py-2'} ${className}`}>
-      <div
-        className={`flex items-center gap-2 whitespace-nowrap ${compact ? 'text-xs' : 'text-sm'} font-medium`}
-      >
-        <span>{label}</span>
-        {detail ? <span className="text-xs text-slate-400">{detail}</span> : null}
-      </div>
-    </div>
-  )
-}
-
-function defaultHeaderLink({ to, className, children }: HeaderLinkProps) {
-  return (
-    <Link key={`${to}-${String(children)}`} to={to} className={className}>
-      {children}
-    </Link>
-  )
-}
diff --git a/frontend/src/components/chat/ChatTranscript.stories.ts b/frontend/src/components/chat/ChatTranscript.stories.ts
new file mode 100644
index 0000000..a7a934c
--- /dev/null
+++ b/frontend/src/components/chat/ChatTranscript.stories.ts
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ChatTranscript from './ChatTranscript.svelte'
+
+const meta = {
+  title: 'Chat/ChatTranscript',
+  component: ChatTranscript,
+  args: {
+    activeAgentName: 'GitHub Copilot',
+    messages: [],
+    hasSession: true,
+    loading: false,
+    ready: true,
+    thinking: false,
+    errorMessage: null,
+  },
+} satisfies Meta<typeof ChatTranscript>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {}
+
+export const Loading: Story = {
+  args: {
+    hasSession: false,
+    loading: true,
+    ready: false,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    hasSession: false,
+    errorMessage: 'Message failed to send. Check the agent connection and try again.',
+  },
+}
+
+export const LongTranscript: Story = {
+  args: {
+    hasSession: true,
+    messages: [
+      { id: 'user-1', role: 'user', content: 'Please audit the chat layout for mobile spacing.' },
+      {
+        id: 'assistant-1',
+        role: 'assistant',
+        content:
+          'The main issue is vertical crowding in the header, especially once session metadata and status badges stack. I would reduce the copy, tighten the gaps, and keep the composer pinned visually to the transcript.',
+      },
+      { id: 'user-2', role: 'user', content: 'Can you suggest a cleaner status treatment?' },
+      {
+        id: 'assistant-2',
+        role: 'assistant',
+        content:
+          'Use a single concise status block in the header and avoid repeating health diagnostics in the transcript pane. That keeps the chat area focused on conversation content.',
+      },
+    ],
+  },
+}
+
+export const Thinking: Story = {
+  args: {
+    hasSession: true,
+    messages: [{ id: 'user-1', role: 'user', content: 'Say hello in one short sentence.' }],
+    thinking: true,
+  },
+}
diff --git a/frontend/src/components/chat/ChatTranscript.stories.tsx b/frontend/src/components/chat/ChatTranscript.stories.tsx
deleted file mode 100644
index 5961b5d..0000000
--- a/frontend/src/components/chat/ChatTranscript.stories.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ChatTranscript } from './ChatTranscript.js'
-
-const meta = {
-  title: 'Chat/ChatTranscript',
-  component: ChatTranscript,
-  args: {
-    activeAgentName: 'GitHub Copilot',
-    messages: [],
-    hasSession: true,
-    loading: false,
-    ready: true,
-    thinking: false,
-    errorMessage: null,
-  },
-} satisfies Meta<typeof ChatTranscript>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Empty: Story = {}
-
-export const Loading: Story = {
-  args: {
-    hasSession: false,
-    loading: true,
-    ready: false,
-  },
-}
-
-export const Error: Story = {
-  args: {
-    hasSession: false,
-    errorMessage: 'Message failed to send. Check the agent connection and try again.',
-  },
-}
-
-export const LongTranscript: Story = {
-  args: {
-    hasSession: true,
-    messages: [
-      { id: 'user-1', role: 'user', content: 'Please audit the chat layout for mobile spacing.' },
-      {
-        id: 'assistant-1',
-        role: 'assistant',
-        content:
-          'The main issue is vertical crowding in the header, especially once session metadata and status badges stack. I would reduce the copy, tighten the gaps, and keep the composer pinned visually to the transcript.',
-      },
-      { id: 'user-2', role: 'user', content: 'Can you suggest a cleaner status treatment?' },
-      {
-        id: 'assistant-2',
-        role: 'assistant',
-        content:
-          'Use a single concise status block in the header and avoid repeating health diagnostics in the transcript pane. That keeps the chat area focused on conversation content.',
-      },
-    ],
-  },
-}
-
-export const DenseDesktop: Story = {
-  args: {
-    hasSession: true,
-    messages: [
-      {
-        id: 'assistant-1',
-        role: 'assistant',
-        content:
-          'The transcript should become the clear hero of the page, with fewer decorative status treatments stealing attention from the conversation itself.',
-      },
-      {
-        id: 'user-1',
-        role: 'user',
-        content: 'So the layout should feel more like a chat app than a dashboard?',
-      },
-      {
-        id: 'assistant-2',
-        role: 'assistant',
-        content:
-          'Exactly. Keep context available, but let the eye land on the exchange first and the controls second.',
-      },
-      {
-        id: 'user-2',
-        role: 'user',
-        content:
-          'And files or diff should stay in the same column rather than opening a separate workspace?',
-      },
-      {
-        id: 'assistant-3',
-        role: 'assistant',
-        content:
-          'Yes. The mental model is one conversation surface with contextual modes, not three competing panes.',
-      },
-    ],
-  },
-}
-
-export const Thinking: Story = {
-  args: {
-    hasSession: true,
-    messages: [{ id: 'user-1', role: 'user', content: 'Say hello in one short sentence.' }],
-    thinking: true,
-  },
-}
-
-export const Welcome: Story = {
-  args: {
-    hasSession: false,
-    ready: false,
-    canManageProjects: true,
-    canStartSession: true,
-    hasAnyProject: true,
-    hasAvailableAgent: true,
-    hasAvailableProject: true,
-    onOpenProjectManager: () => {},
-    onStartSession: () => {},
-  },
-}
-
-export const NeedsProject: Story = {
-  args: {
-    hasSession: false,
-    ready: false,
-    canManageProjects: true,
-    canStartSession: false,
-    hasAnyProject: false,
-    hasAvailableAgent: true,
-    hasAvailableProject: false,
-    onOpenProjectManager: () => {},
-  },
-}
-
-export const NeedsAgent: Story = {
-  args: {
-    hasSession: false,
-    ready: false,
-    canManageProjects: true,
-    canStartSession: false,
-    hasAnyProject: true,
-    hasAvailableAgent: false,
-    hasAvailableProject: true,
-    onOpenProjectManager: () => {},
-  },
-}
diff --git a/frontend/src/components/chat/ChatTranscript.svelte b/frontend/src/components/chat/ChatTranscript.svelte
new file mode 100644
index 0000000..4fd20a0
--- /dev/null
+++ b/frontend/src/components/chat/ChatTranscript.svelte
@@ -0,0 +1,371 @@
+<script lang="ts">
+  import type { ChatMessage } from '../../store/chatStore.svelte.js'
+  import StructuredAssistantMessage from './StructuredAssistantMessage.svelte'
+  import ChatWelcomeState from './ChatWelcomeState.svelte'
+  import TurnFooter from './TurnFooter.svelte'
+
+  const SCROLL_BOTTOM_THRESHOLD = 120
+
+  interface Props {
+    activeAgentName: string
+    canManageProjects?: boolean
+    canStartSession?: boolean
+    hasAnyProject?: boolean
+    hasAvailableAgent?: boolean
+    hasAvailableProject?: boolean
+    messages: ChatMessage[]
+    projectPath?: string | null
+    sessionId?: string | null
+    hasSession: boolean
+    loading: boolean
+    historyLoading?: boolean
+    streamReconnecting?: boolean
+    onOpenProjectManager?: () => void
+    onStartSession?: () => void
+    ready: boolean
+    thinking: boolean
+    errorMessage: string | null
+  }
+
+  const {
+    activeAgentName,
+    canManageProjects = false,
+    canStartSession = false,
+    hasAnyProject = true,
+    hasAvailableAgent = true,
+    hasAvailableProject = true,
+    messages,
+    projectPath = null,
+    sessionId = null,
+    hasSession,
+    loading,
+    historyLoading = false,
+    streamReconnecting = false,
+    onOpenProjectManager,
+    onStartSession,
+    ready,
+    thinking,
+    errorMessage,
+  }: Props = $props()
+
+  let transcriptEl = $state<HTMLDivElement | null>(null)
+  let shouldStickToBottom = $state(true)
+  let showJumpToLatest = $state(false)
+
+  function updateScrollState() {
+    const element = transcriptEl
+    if (!element) return
+    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight
+    const nearBottom = distanceFromBottom <= SCROLL_BOTTOM_THRESHOLD
+    shouldStickToBottom = nearBottom
+    showJumpToLatest = !nearBottom && messages.length > 0
+  }
+
+  function scrollToLatest(behavior: ScrollBehavior = 'smooth') {
+    const element = transcriptEl
+    if (!element) return
+    element.scrollTo({ top: element.scrollHeight, behavior })
+    shouldStickToBottom = true
+    showJumpToLatest = false
+  }
+
+  // Scroll to bottom on session change
+  $effect(() => {
+    const _sid = sessionId
+    if (!_sid) return
+    const frame = window.requestAnimationFrame(() => scrollToLatest('auto'))
+    return () => window.cancelAnimationFrame(frame)
+  })
+
+  // Stick to bottom on message/thinking updates
+  $effect(() => {
+    // Track dependencies
+    const _msgs = messages
+    void thinking
+    const frame = window.requestAnimationFrame(() => {
+      if (shouldStickToBottom) {
+        scrollToLatest(_msgs.length > 0 ? 'smooth' : 'auto')
+      } else {
+        updateScrollState()
+      }
+    })
+    return () => window.cancelAnimationFrame(frame)
+  })
+
+  const transcriptRuns = $derived(buildTranscriptRuns(messages))
+</script>
+
+<div
+  bind:this={transcriptEl}
+  data-testid="chat-transcript"
+  onscroll={updateScrollState}
+  class="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto bg-[#070b12] px-4 py-5 sm:px-6 sm:py-6 lg:px-8"
+>
+  <div class="mx-auto flex min-h-full min-w-0 w-full max-w-5xl flex-col gap-6">
+    {#if loading && !errorMessage}
+      <section class="relative overflow-hidden rounded-[1.75rem] border border-amber-500/20 bg-amber-500/10 px-5 py-6 text-sm text-amber-100 shadow-sm">
+        <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(251,191,36,0.12),transparent)] animate-pulse"></div>
+        <p class="relative text-xs font-semibold uppercase tracking-[0.24em] text-amber-700">Loading</p>
+        <h2 class="relative mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">Opening your workspace</h2>
+        <p class="relative mt-3 max-w-xl leading-6 text-slate-300">Fetching agents, projects, and your most recent session.</p>
+      </section>
+    {/if}
+
+    {#if historyLoading && hasSession && !errorMessage}
+      <section
+        data-testid="history-loading-banner"
+        class="sticky top-3 z-10 mx-auto w-full max-w-3xl overflow-hidden rounded-full border border-sky-500/18 bg-slate-950/90 px-4 py-3 text-sm text-sky-100 shadow-[0_10px_30px_rgba(15,23,42,0.35)] backdrop-blur relative"
+      >
+        <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(125,211,252,0.14),transparent)] animate-pulse"></div>
+        <div class="relative z-10 flex items-center justify-center gap-3 text-center">
+          <span class="inline-flex h-2.5 w-2.5 animate-pulse rounded-full bg-sky-300"></span>
+          <div>
+            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-300/80">Loading History</p>
+            <p class="mt-1 text-sm text-slate-100">Restoring the full conversation while keeping the current transcript in view.</p>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    {#if streamReconnecting && hasSession && !loading && !errorMessage && !historyLoading}
+      <section
+        data-testid="stream-reconnecting-banner"
+        class="sticky top-3 z-10 mx-auto w-full max-w-3xl overflow-hidden rounded-full border border-teal-500/18 bg-slate-950/90 px-4 py-3 text-sm text-teal-100 shadow-[0_10px_30px_rgba(15,23,42,0.35)] backdrop-blur relative"
+      >
+        <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(45,212,191,0.14),transparent)] animate-pulse"></div>
+        <div class="relative z-10 flex items-center justify-center gap-3 text-center">
+          <span class="inline-flex h-2.5 w-2.5 animate-pulse rounded-full bg-teal-300"></span>
+          <div>
+            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-300/80">Reconnecting Stream</p>
+            <p class="mt-1 text-sm text-slate-100">Live updates dropped for a moment. Rejoining the session stream now.</p>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    {#if errorMessage}
+      <section
+        role="alert"
+        class="rounded-[1.75rem] border border-rose-500/20 bg-rose-500/10 px-5 py-5 text-sm text-rose-100 shadow-sm"
+      >
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-rose-700">Attention</p>
+        <p class="mt-3 text-base font-medium text-slate-50">{errorMessage}</p>
+      </section>
+    {/if}
+
+    {#if ready && messages.length === 0}
+      <section class="rounded-[2rem] border border-dashed border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.78),rgba(6,10,18,0.92))] px-5 py-9 text-center shadow-sm sm:px-7">
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Transcript</p>
+        <h2 class="mt-3 font-[family:var(--font-display)] text-4xl text-slate-50">Start the conversation</h2>
+        <p class="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-400">
+          Ask {activeAgentName} to inspect code, explain a failure, or sketch a next step for the current workspace.
+        </p>
+      </section>
+    {/if}
+
+    {#if !loading && messages.length === 0 && !hasSession}
+      <ChatWelcomeState
+        {activeAgentName}
+        {canStartSession}
+        {hasAnyProject}
+        {hasAvailableProject}
+        {hasAvailableAgent}
+        {onStartSession}
+        onOpenProjectManager={canManageProjects ? onOpenProjectManager : undefined}
+      />
+    {/if}
+
+    {#each transcriptRuns as run, index (run.kind === 'user' ? `user-${run.message.id}-${index}` : `assistant-${index}`)}
+      {#if run.kind === 'user'}
+        <article class="flex min-w-0 justify-end">
+          <div class="min-w-0 max-w-[92%] rounded-[1.6rem] bg-teal-500 px-4 py-3.5 text-slate-950 shadow-sm sm:max-w-[82%] lg:max-w-[72%]">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-950/70">You</p>
+            {#if run.message.content}
+              <p class="mt-2 whitespace-pre-wrap text-[15px] leading-7">{run.message.content}</p>
+            {/if}
+            {#if run.message.structuredBlocks?.length}
+              <div class="mt-3">
+                <StructuredAssistantMessage blocks={run.message.structuredBlocks} />
+              </div>
+            {/if}
+            <TurnFooter message={run.message} compact={true} {projectPath} {sessionId} />
+          </div>
+        </article>
+      {:else}
+        <article class="flex min-w-0 justify-start">
+          <div class="w-full max-w-4xl px-4 py-3.5 text-slate-100">
+            {#each buildAssistantNodes(run.messages) as node, nodeIndex (nodeIndex)}
+              {#if node.kind === 'structured'}
+                <div class={nodeIndex === 0 ? '' : 'mt-4'}>
+                  <StructuredAssistantMessage
+                    blocks={node.blocks}
+                    summaryTitle={node.summaryTitle}
+                    {projectPath}
+                  />
+                </div>
+              {:else}
+                <div class={`${nodeIndex === 0 ? '' : 'mt-4'} min-w-0 text-[15px] leading-7 text-slate-100`}>
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html renderAssistantMarkdown(node.content)}
+                </div>
+              {/if}
+            {/each}
+            <TurnFooter
+              message={run.messages.at(-1) ?? null}
+              turnInfoOverride={aggregateAssistantTurnInfo(run.messages)}
+              {projectPath}
+              {sessionId}
+            />
+          </div>
+        </article>
+      {/if}
+    {/each}
+
+    {#if thinking}
+      <div class="flex justify-start" aria-live="polite">
+        <div class="rounded-[1.4rem] border border-teal-500/15 bg-slate-900/95 px-4 py-3 text-sm text-slate-300 shadow-sm backdrop-blur">
+          Thinking…
+        </div>
+      </div>
+    {/if}
+
+    {#if showJumpToLatest}
+      <div class="sticky bottom-4 flex justify-center">
+        <button
+          type="button"
+          onclick={() => scrollToLatest('auto')}
+          class="inline-flex items-center justify-center rounded-full border border-teal-500/30 bg-slate-950/90 px-4 py-2 text-sm font-medium text-teal-100 shadow-[0_12px_30px_rgba(2,6,23,0.45)] backdrop-blur transition hover:bg-slate-900"
+        >
+          Jump to latest
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<script lang="ts" module>
+  import type { ChatMessage as _ChatMessage } from '../../store/chatStore.svelte.js'
+  import { marked as _marked } from 'marked'
+  import _hljs from 'highlight.js'
+  import DOMPurify from 'isomorphic-dompurify'
+
+  // Configure marked with highlight.js
+  _marked.setOptions({
+    highlight: (code: string, lang: string) => {
+      if (lang && _hljs.getLanguage(lang)) {
+        try {
+          return _hljs.highlight(code, { language: lang }).value
+        } catch {
+          // fall through
+        }
+      }
+      return _hljs.highlightAuto(code).value
+    },
+  } as Parameters<typeof _marked.setOptions>[0])
+
+  // ── Data model types ───────────────────────────────────────────────────────
+  type TranscriptRun =
+    | { kind: 'user'; message: _ChatMessage }
+    | { kind: 'assistant'; messages: _ChatMessage[] }
+
+  type AssistantNode =
+    | { kind: 'structured'; blocks: NonNullable<_ChatMessage['structuredBlocks']>; summaryTitle: string | null }
+    | { kind: 'markdown'; content: string }
+
+  function buildTranscriptRuns(messages: _ChatMessage[]): TranscriptRun[] {
+    const runs: TranscriptRun[] = []
+    for (const message of messages) {
+      if (message.role === 'user') {
+        runs.push({ kind: 'user', message })
+        continue
+      }
+      const lastRun = runs.at(-1)
+      if (lastRun?.kind === 'assistant') {
+        lastRun.messages.push(message)
+        continue
+      }
+      runs.push({ kind: 'assistant', messages: [message] })
+    }
+    return runs
+  }
+
+  function aggregateAssistantTurnInfo(messages: _ChatMessage[]): _ChatMessage['turnInfo'] | undefined {
+    const infos = messages.map((m) => m.turnInfo).filter(Boolean)
+    if (infos.length === 0) return undefined
+    const startedAtMs = infos.reduce<number | undefined>((v, info) => {
+      if (info?.startedAtMs === undefined) return v
+      return v === undefined ? info.startedAtMs : Math.min(v, info.startedAtMs)
+    }, undefined)
+    const completedAtMs = infos.reduce<number | undefined>((v, info) => {
+      if (info?.completedAtMs === undefined) return v
+      return v === undefined ? info.completedAtMs : Math.max(v, info.completedAtMs)
+    }, undefined)
+    const modifiedFiles = Array.from(new Set(infos.flatMap((info) => info?.modifiedFiles ?? [])))
+    const patches = infos.flatMap((info) => info?.patches ?? [])
+    const latest = infos.at(-1)
+    return {
+      providerId: latest?.providerId,
+      modelId: latest?.modelId,
+      mode: latest?.mode,
+      startedAtMs,
+      completedAtMs,
+      durationMs:
+        startedAtMs !== undefined && completedAtMs !== undefined
+          ? completedAtMs - startedAtMs
+          : undefined,
+      modifiedFiles,
+      patches,
+    }
+  }
+
+  function buildAssistantNodes(messages: _ChatMessage[]): AssistantNode[] {
+    const nodes: AssistantNode[] = []
+    for (const message of messages) {
+      const blocks = message.structuredBlocks ?? []
+      const summary = firstLine(message.content)
+      const contentWithoutSummary =
+        blocks.length > 0 && summary ? stripLeadingSummary(message.content, summary) : message.content
+
+      if (blocks.length > 0) {
+        const previous = nodes.at(-1)
+        if (previous?.kind === 'structured') {
+          previous.blocks.push(...blocks)
+          if (!previous.summaryTitle && summary) previous.summaryTitle = summary
+        } else {
+          nodes.push({ kind: 'structured', blocks: [...blocks], summaryTitle: summary })
+        }
+      }
+
+      if (contentWithoutSummary.trim()) {
+        const previous = nodes.at(-1)
+        if (previous?.kind === 'markdown') {
+          previous.content = `${previous.content.trimEnd()}\n\n${contentWithoutSummary.trim()}`
+        } else {
+          nodes.push({ kind: 'markdown', content: contentWithoutSummary.trim() })
+        }
+      }
+    }
+    return nodes
+  }
+
+  function firstLine(value: string): string | null {
+    const line = value.split('\n').map((p) => p.trim()).find(Boolean)
+    return line ?? null
+  }
+
+  function stripLeadingSummary(content: string, summary: string): string {
+    const trimmed = content.trimStart()
+    if (!trimmed.startsWith(summary)) return content
+    return trimmed.slice(summary.length).trimStart()
+  }
+
+  // ── Markdown rendering ─────────────────────────────────────────────────────
+  function renderAssistantMarkdown(content: string): string {
+    try {
+      const html = _marked.parse(content, { async: false }) as string
+      return DOMPurify.sanitize(html)
+    } catch {
+      return content
+    }
+  }
+</script>
diff --git a/frontend/src/components/chat/ChatTranscript.test.tsx b/frontend/src/components/chat/ChatTranscript.test.svelte.ts
similarity index 95%
rename from frontend/src/components/chat/ChatTranscript.test.tsx
rename to frontend/src/components/chat/ChatTranscript.test.svelte.ts
index 365cbee..81b6c1d 100644
--- a/frontend/src/components/chat/ChatTranscript.test.tsx
+++ b/frontend/src/components/chat/ChatTranscript.test.svelte.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { ChatTranscript } from './ChatTranscript.js'
-import type { ChatMessage } from '../../hooks/useAgUiChat.js'
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte'
+import ChatTranscript from './ChatTranscript.svelte'
+import type { ChatMessage } from '../../store/chatStore.svelte.js'
 
 class MockResizeObserver {
   observe() {}
@@ -28,27 +28,23 @@ if (!HTMLElement.prototype.scrollTo) {
       this.scrollTop = options
       return
     }
-
     this.scrollTop = options?.top ?? this.scrollTop
   }
 }
 
-function renderTranscript(
-  messages: ChatMessage[],
-  extra: Partial<React.ComponentProps<typeof ChatTranscript>> = {}
-) {
-  return render(
-    <ChatTranscript
-      activeAgentName="Test Agent"
-      messages={messages}
-      hasSession
-      loading={false}
-      ready
-      thinking={false}
-      errorMessage={null}
-      {...extra}
-    />
-  )
+function renderTranscript(messages: ChatMessage[], extra: Record<string, unknown> = {}) {
+  return render(ChatTranscript, {
+    props: {
+      activeAgentName: 'Test Agent',
+      messages,
+      hasSession: true,
+      loading: false,
+      ready: true,
+      thinking: false,
+      errorMessage: null,
+      ...extra,
+    },
+  })
 }
 
 function installTranscriptMetrics(transcript: HTMLDivElement, scrollTop: number) {
@@ -401,6 +397,6 @@ describe('ChatTranscript', () => {
     })
 
     await waitFor(() => expect(scrollSpy).toHaveBeenCalled())
-    expect(scrollSpy).toHaveBeenCalledWith({ top: 0, behavior: 'auto' })
+    expect(scrollSpy).toHaveBeenCalledWith({ top: expect.any(Number), behavior: 'auto' })
   })
 })
diff --git a/frontend/src/components/chat/ChatTranscript.tsx b/frontend/src/components/chat/ChatTranscript.tsx
deleted file mode 100644
index f7c322b..0000000
--- a/frontend/src/components/chat/ChatTranscript.tsx
+++ /dev/null
@@ -1,829 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import SyntaxHighlighter from 'react-syntax-highlighter'
-import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
-import type { ChatMessage } from '../../hooks/useAgUiChat.js'
-import { parseUnifiedDiff } from './parseUnifiedDiff.js'
-import { StructuredAssistantMessage } from './StructuredAssistantMessage.js'
-import { ChatWelcomeState } from './ChatWelcomeState.js'
-
-const SCROLL_BOTTOM_THRESHOLD = 120
-
-interface ChatTranscriptProps {
-  activeAgentName: string
-  canManageProjects?: boolean
-  canStartSession?: boolean
-  hasAnyProject?: boolean
-  hasAvailableAgent?: boolean
-  hasAvailableProject?: boolean
-  messages: ChatMessage[]
-  projectPath?: string | null
-  sessionId?: string | null
-  hasSession: boolean
-  loading: boolean
-  historyLoading?: boolean
-  streamReconnecting?: boolean
-  onOpenProjectManager?: () => void
-  onStartSession?: () => void
-  ready: boolean
-  thinking: boolean
-  errorMessage: string | null
-}
-
-export function ChatTranscript({
-  activeAgentName,
-  canManageProjects = false,
-  canStartSession = false,
-  hasAnyProject = true,
-  hasAvailableAgent = true,
-  hasAvailableProject = true,
-  messages,
-  projectPath = null,
-  sessionId = null,
-  hasSession,
-  loading,
-  historyLoading = false,
-  streamReconnecting = false,
-  onOpenProjectManager,
-  onStartSession,
-  ready,
-  thinking,
-  errorMessage,
-}: ChatTranscriptProps) {
-  const transcriptRef = useRef<HTMLDivElement | null>(null)
-  const shouldStickToBottomRef = useRef(true)
-  const [showJumpToLatest, setShowJumpToLatest] = useState(false)
-
-  const updateScrollState = useCallback(() => {
-    const element = transcriptRef.current
-    if (!element) return
-
-    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight
-    const nearBottom = distanceFromBottom <= SCROLL_BOTTOM_THRESHOLD
-
-    shouldStickToBottomRef.current = nearBottom
-    setShowJumpToLatest(!nearBottom && messages.length > 0)
-  }, [messages.length])
-
-  const scrollToLatest = (behavior: ScrollBehavior = 'smooth') => {
-    const element = transcriptRef.current
-    if (!element) return
-
-    element.scrollTo({ top: element.scrollHeight, behavior })
-    shouldStickToBottomRef.current = true
-    setShowJumpToLatest(false)
-  }
-
-  useEffect(() => {
-    if (!sessionId) return
-
-    const frame = window.requestAnimationFrame(() => {
-      scrollToLatest('auto')
-    })
-
-    return () => window.cancelAnimationFrame(frame)
-  }, [sessionId])
-
-  useEffect(() => {
-    const frame = window.requestAnimationFrame(() => {
-      if (shouldStickToBottomRef.current) {
-        scrollToLatest(messages.length > 0 ? 'smooth' : 'auto')
-      } else {
-        updateScrollState()
-      }
-    })
-
-    return () => window.cancelAnimationFrame(frame)
-  }, [messages, thinking, updateScrollState])
-
-  return (
-    <div
-      ref={transcriptRef}
-      data-testid="chat-transcript"
-      onScroll={updateScrollState}
-      className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto bg-[#070b12] px-4 py-5 sm:px-6 sm:py-6 lg:px-8"
-    >
-      <div className="mx-auto flex min-h-full min-w-0 w-full max-w-5xl flex-col gap-6">
-        {loading && !errorMessage && (
-          <section className="relative overflow-hidden rounded-[1.75rem] border border-amber-500/20 bg-amber-500/10 px-5 py-6 text-sm text-amber-100 shadow-sm">
-            <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(251,191,36,0.12),transparent)] animate-pulse" />
-            <p className="relative text-xs font-semibold uppercase tracking-[0.24em] text-amber-700">
-              Loading
-            </p>
-            <h2 className="relative mt-3 font-[family:var(--font-display)] text-3xl text-slate-50">
-              Opening your workspace
-            </h2>
-            <p className="relative mt-3 max-w-xl leading-6 text-slate-300">
-              Fetching agents, projects, and your most recent session.
-            </p>
-          </section>
-        )}
-
-        {historyLoading && hasSession && !errorMessage ? (
-          <section
-            data-testid="history-loading-banner"
-            className="sticky top-3 z-10 mx-auto w-full max-w-3xl overflow-hidden rounded-full border border-sky-500/18 bg-slate-950/90 px-4 py-3 text-sm text-sky-100 shadow-[0_10px_30px_rgba(15,23,42,0.35)] backdrop-blur relative"
-          >
-            <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(125,211,252,0.14),transparent)] animate-pulse" />
-            <div className="relative z-10 flex items-center justify-center gap-3 text-center">
-              <span className="inline-flex h-2.5 w-2.5 animate-pulse rounded-full bg-sky-300" />
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-300/80">
-                  Loading History
-                </p>
-                <p className="mt-1 text-sm text-slate-100">
-                  Restoring the full conversation while keeping the current transcript in view.
-                </p>
-              </div>
-            </div>
-          </section>
-        ) : null}
-
-        {streamReconnecting && hasSession && !loading && !errorMessage && !historyLoading ? (
-          <section
-            data-testid="stream-reconnecting-banner"
-            className="sticky top-3 z-10 mx-auto w-full max-w-3xl overflow-hidden rounded-full border border-teal-500/18 bg-slate-950/90 px-4 py-3 text-sm text-teal-100 shadow-[0_10px_30px_rgba(15,23,42,0.35)] backdrop-blur relative"
-          >
-            <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,rgba(45,212,191,0.14),transparent)] animate-pulse" />
-            <div className="relative z-10 flex items-center justify-center gap-3 text-center">
-              <span className="inline-flex h-2.5 w-2.5 animate-pulse rounded-full bg-teal-300" />
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-300/80">
-                  Reconnecting Stream
-                </p>
-                <p className="mt-1 text-sm text-slate-100">
-                  Live updates dropped for a moment. Rejoining the session stream now.
-                </p>
-              </div>
-            </div>
-          </section>
-        ) : null}
-
-        {errorMessage && (
-          <section
-            role="alert"
-            className="rounded-[1.75rem] border border-rose-500/20 bg-rose-500/10 px-5 py-5 text-sm text-rose-100 shadow-sm"
-          >
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-rose-700">
-              Attention
-            </p>
-            <p className="mt-3 text-base font-medium text-slate-50">{errorMessage}</p>
-          </section>
-        )}
-
-        {ready && messages.length === 0 && (
-          <section className="rounded-[2rem] border border-dashed border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.78),rgba(6,10,18,0.92))] px-5 py-9 text-center shadow-sm sm:px-7">
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
-              Transcript
-            </p>
-            <h2 className="mt-3 font-[family:var(--font-display)] text-4xl text-slate-50">
-              Start the conversation
-            </h2>
-            <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-400">
-              Ask {activeAgentName} to inspect code, explain a failure, or sketch a next step for
-              the current workspace.
-            </p>
-          </section>
-        )}
-
-        {!loading && messages.length === 0 && !hasSession && (
-          <ChatWelcomeState
-            activeAgentName={activeAgentName}
-            canStartSession={canStartSession}
-            hasAnyProject={hasAnyProject}
-            hasAvailableProject={hasAvailableProject}
-            hasAvailableAgent={hasAvailableAgent}
-            onStartSession={onStartSession}
-            onOpenProjectManager={canManageProjects ? onOpenProjectManager : undefined}
-          />
-        )}
-
-        {buildTranscriptRuns(messages).map((run, index) =>
-          run.kind === 'user' ? (
-            <article key={`user-${run.message.id}-${index}`} className="flex min-w-0 justify-end">
-              <div className="min-w-0 max-w-[92%] rounded-[1.6rem] bg-teal-500 px-4 py-3.5 text-slate-950 shadow-sm sm:max-w-[82%] lg:max-w-[72%]">
-                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-950/70">
-                  You
-                </p>
-                {run.message.content ? (
-                  <p className="mt-2 whitespace-pre-wrap text-[15px] leading-7">
-                    {run.message.content}
-                  </p>
-                ) : null}
-                {run.message.structuredBlocks?.length ? (
-                  <div className="mt-3">
-                    <StructuredAssistantMessage blocks={run.message.structuredBlocks} />
-                  </div>
-                ) : null}
-                <TurnFooter
-                  message={run.message}
-                  compact
-                  projectPath={projectPath}
-                  sessionId={sessionId}
-                />
-              </div>
-            </article>
-          ) : (
-            <article key={`assistant-${index}`} className="flex min-w-0 justify-start">
-              <div className="w-full max-w-4xl px-4 py-3.5 text-slate-100">
-                {buildAssistantNodes(run.messages).map((node, nodeIndex) =>
-                  node.kind === 'structured' ? (
-                    <div key={`structured-${nodeIndex}`} className={nodeIndex === 0 ? '' : 'mt-4'}>
-                      <StructuredAssistantMessage
-                        blocks={node.blocks}
-                        summaryTitle={node.summaryTitle}
-                        projectPath={projectPath}
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      key={`markdown-${nodeIndex}`}
-                      className={`${nodeIndex === 0 ? '' : 'mt-4'} min-w-0 text-[15px] leading-7 text-slate-100`}
-                    >
-                      <AssistantMarkdown content={node.content} />
-                    </div>
-                  )
-                )}
-                <TurnFooter
-                  message={run.messages.at(-1) ?? null}
-                  turnInfoOverride={aggregateAssistantTurnInfo(run.messages)}
-                  projectPath={projectPath}
-                  sessionId={sessionId}
-                />
-              </div>
-            </article>
-          )
-        )}
-
-        {thinking && (
-          <div className="flex justify-start" aria-live="polite">
-            <div className="rounded-[1.4rem] border border-teal-500/15 bg-slate-900/95 px-4 py-3 text-sm text-slate-300 shadow-sm backdrop-blur">
-              Thinking…
-            </div>
-          </div>
-        )}
-
-        {showJumpToLatest ? (
-          <div className="sticky bottom-4 flex justify-center">
-            <button
-              type="button"
-              onClick={() => scrollToLatest('auto')}
-              className="inline-flex items-center justify-center rounded-full border border-teal-500/30 bg-slate-950/90 px-4 py-2 text-sm font-medium text-teal-100 shadow-[0_12px_30px_rgba(2,6,23,0.45)] backdrop-blur transition hover:bg-slate-900"
-            >
-              Jump to latest
-            </button>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-function firstLine(value: string): string | null {
-  const line = value
-    .split('\n')
-    .map((part) => part.trim())
-    .find(Boolean)
-
-  return line ?? null
-}
-
-type TranscriptRun =
-  | { kind: 'user'; message: ChatMessage }
-  | { kind: 'assistant'; messages: ChatMessage[] }
-
-type AssistantNode =
-  | {
-      kind: 'structured'
-      blocks: NonNullable<ChatMessage['structuredBlocks']>
-      summaryTitle: string | null
-    }
-  | { kind: 'markdown'; content: string }
-
-function buildTranscriptRuns(messages: ChatMessage[]): TranscriptRun[] {
-  const runs: TranscriptRun[] = []
-
-  for (const message of messages) {
-    if (message.role === 'user') {
-      runs.push({ kind: 'user', message })
-      continue
-    }
-
-    const lastRun = runs.at(-1)
-    if (lastRun?.kind === 'assistant') {
-      lastRun.messages.push(message)
-      continue
-    }
-
-    runs.push({ kind: 'assistant', messages: [message] })
-  }
-
-  return runs
-}
-
-function aggregateAssistantTurnInfo(messages: ChatMessage[]): ChatMessage['turnInfo'] | undefined {
-  const infos = messages.map((message) => message.turnInfo).filter(Boolean)
-  if (infos.length === 0) {
-    return undefined
-  }
-
-  const startedAtMs = infos.reduce<number | undefined>((value, info) => {
-    if (info?.startedAtMs === undefined) {
-      return value
-    }
-
-    return value === undefined ? info.startedAtMs : Math.min(value, info.startedAtMs)
-  }, undefined)
-
-  const completedAtMs = infos.reduce<number | undefined>((value, info) => {
-    if (info?.completedAtMs === undefined) {
-      return value
-    }
-
-    return value === undefined ? info.completedAtMs : Math.max(value, info.completedAtMs)
-  }, undefined)
-
-  const modifiedFiles = Array.from(new Set(infos.flatMap((info) => info?.modifiedFiles ?? [])))
-  const patches = infos.flatMap((info) => info?.patches ?? [])
-  const latest = infos.at(-1)
-
-  return {
-    providerId: latest?.providerId,
-    modelId: latest?.modelId,
-    mode: latest?.mode,
-    startedAtMs,
-    completedAtMs,
-    durationMs:
-      startedAtMs !== undefined && completedAtMs !== undefined
-        ? completedAtMs - startedAtMs
-        : undefined,
-    modifiedFiles,
-    patches,
-  }
-}
-
-function buildAssistantNodes(messages: ChatMessage[]): AssistantNode[] {
-  const nodes: AssistantNode[] = []
-
-  for (const message of messages) {
-    const blocks = message.structuredBlocks ?? []
-    const summary = firstLine(message.content)
-    const contentWithoutSummary =
-      blocks.length > 0 && summary ? stripLeadingSummary(message.content, summary) : message.content
-
-    if (blocks.length > 0) {
-      const previous = nodes.at(-1)
-      if (previous?.kind === 'structured') {
-        previous.blocks.push(...blocks)
-        if (!previous.summaryTitle && summary) {
-          previous.summaryTitle = summary
-        }
-      } else {
-        nodes.push({ kind: 'structured', blocks: [...blocks], summaryTitle: summary })
-      }
-    }
-
-    if (contentWithoutSummary.trim()) {
-      const previous = nodes.at(-1)
-      if (previous?.kind === 'markdown') {
-        previous.content = `${previous.content.trimEnd()}\n\n${contentWithoutSummary.trim()}`
-      } else {
-        nodes.push({ kind: 'markdown', content: contentWithoutSummary.trim() })
-      }
-    }
-  }
-
-  return nodes
-}
-
-function stripLeadingSummary(content: string, summary: string): string {
-  const trimmed = content.trimStart()
-  if (!trimmed.startsWith(summary)) {
-    return content
-  }
-
-  return trimmed.slice(summary.length).trimStart()
-}
-
-function CodeBlock({ language, children }: { language: string | null; children: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    void navigator.clipboard.writeText(children).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
-  return (
-    <div className="group relative mt-3 overflow-hidden rounded-xl border border-white/8 bg-[#05070b] text-[13px] leading-6">
-      <div className="flex items-center justify-between border-b border-white/6 bg-slate-900/60 px-3 py-1.5">
-        <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
-          {language ?? 'code'}
-        </span>
-        <button
-          type="button"
-          onClick={handleCopy}
-          className="rounded px-2 py-0.5 text-[10px] font-medium text-slate-400 transition hover:bg-slate-800 hover:text-slate-200"
-        >
-          {copied ? 'Copied!' : 'Copy'}
-        </button>
-      </div>
-      <SyntaxHighlighter
-        language={language ?? 'text'}
-        style={atomOneDark}
-        customStyle={{
-          margin: 0,
-          padding: '0.75rem',
-          background: 'transparent',
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-        }}
-        codeTagProps={{ style: { fontFamily: 'inherit' } }}
-      >
-        {children}
-      </SyntaxHighlighter>
-    </div>
-  )
-}
-
-function AssistantMarkdown({ content }: { content: string }) {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        a: ({ ...props }) => (
-          <a
-            {...props}
-            className="text-teal-300 underline decoration-teal-500/40 underline-offset-2"
-          />
-        ),
-        blockquote: ({ ...props }) => (
-          <blockquote {...props} className="border-l-2 border-teal-500/35 pl-4 text-slate-300" />
-        ),
-        code: ({ className, children, ...props }) => {
-          const match = /language-(\w+)/.exec(className ?? '')
-          const isBlock = Boolean(className)
-          if (!isBlock) {
-            return (
-              <code
-                {...props}
-                className="rounded bg-slate-800 px-1.5 py-0.5 text-[0.92em] text-teal-200"
-              >
-                {children}
-              </code>
-            )
-          }
-          return (
-            <CodeBlock language={match ? match[1] : null}>
-              {String(children).replace(/\n$/, '')}
-            </CodeBlock>
-          )
-        },
-        h1: ({ ...props }) => (
-          <h1 {...props} className="mt-5 text-2xl font-semibold text-slate-50 first:mt-0" />
-        ),
-        h2: ({ ...props }) => (
-          <h2 {...props} className="mt-5 text-xl font-semibold text-slate-50 first:mt-0" />
-        ),
-        h3: ({ ...props }) => (
-          <h3 {...props} className="mt-4 text-lg font-semibold text-slate-100 first:mt-0" />
-        ),
-        li: ({ ...props }) => (
-          <li {...props} className="ml-5 list-disc pl-1 marker:text-slate-500" />
-        ),
-        ol: ({ ...props }) => <ol {...props} className="space-y-1" />,
-        p: ({ ...props }) => <p {...props} className="mt-3 first:mt-0 whitespace-pre-wrap" />,
-        pre: ({ children }) => <>{children}</>,
-        table: ({ ...props }) => (
-          <div className="mt-3 overflow-x-auto rounded-xl border border-white/8">
-            <table {...props} className="min-w-full border-collapse text-sm" />
-          </div>
-        ),
-        td: ({ ...props }) => (
-          <td {...props} className="border-t border-white/8 px-3 py-2 text-slate-300" />
-        ),
-        th: ({ ...props }) => (
-          <th {...props} className="bg-slate-900/90 px-3 py-2 text-left text-slate-100" />
-        ),
-        ul: ({ ...props }) => <ul {...props} className="space-y-1" />,
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-  )
-}
-
-function TurnFooter({
-  message,
-  compact = false,
-  projectPath = null,
-  sessionId = null,
-  turnInfoOverride,
-}: {
-  message: ChatMessage | null
-  compact?: boolean
-  projectPath?: string | null
-  sessionId?: string | null
-  turnInfoOverride?: ChatMessage['turnInfo']
-}) {
-  const [showFiles, setShowFiles] = useState(false)
-  const [diffByHash, setDiffByHash] = useState<Record<string, string>>({})
-  const [diffErrorByHash, setDiffErrorByHash] = useState<Record<string, string>>({})
-  const [visibleDiffHashes, setVisibleDiffHashes] = useState<Record<string, boolean>>({})
-  const [loadingHash, setLoadingHash] = useState<string | null>(null)
-  const turnInfo = turnInfoOverride ?? message?.turnInfo
-  const modifiedFiles = turnInfo?.modifiedFiles ?? []
-  const patches = turnInfo?.patches ?? []
-  const chipClass = compact
-    ? 'border border-teal-950/20 text-teal-950/80'
-    : 'border border-white/10 text-slate-200'
-  const showCopy = !compact && Boolean(message?.content)
-  const patchLabel = formatPatchLabel(patches.length, modifiedFiles.length)
-
-  const loadPatchDiff = async (hash: string, nextHash: string) => {
-    if (!sessionId || loadingHash === hash) {
-      return
-    }
-
-    if (diffByHash[hash] !== undefined) {
-      setVisibleDiffHashes((current) => ({ ...current, [hash]: true }))
-      return
-    }
-
-    setLoadingHash(hash)
-    setDiffErrorByHash((current) => {
-      const next = { ...current }
-      delete next[hash]
-      return next
-    })
-    try {
-      const response = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/patch-diff`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ fromHash: hash, toHash: nextHash }),
-      })
-      if (!response.ok) {
-        throw new Error(`Patch diff request failed with status ${response.status}`)
-      }
-
-      const payload = (await response.json()) as { diff: string }
-      setDiffByHash((current) => ({ ...current, [hash]: payload.diff }))
-      setVisibleDiffHashes((current) => ({ ...current, [hash]: true }))
-    } catch (error) {
-      console.error('[ChatTranscript] patch diff load failed:', error)
-      setDiffErrorByHash((current) => ({ ...current, [hash]: 'Unable to load this patch diff.' }))
-    } finally {
-      setLoadingHash((current) => (current === hash ? null : current))
-    }
-  }
-
-  const togglePatchDiff = (hash: string, nextHash: string) => {
-    if (visibleDiffHashes[hash]) {
-      setVisibleDiffHashes((current) => ({ ...current, [hash]: false }))
-      return
-    }
-
-    void loadPatchDiff(hash, nextHash)
-  }
-
-  if (!turnInfo && modifiedFiles.length === 0 && patches.length === 0) {
-    return null
-  }
-
-  return (
-    <div
-      className={`${compact ? 'mt-3 border-teal-950/20 pt-2 text-teal-950/70' : 'mt-5 border-white/8 pt-3 text-slate-400'} border-t text-xs`}
-    >
-      <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] opacity-70">
-        {compact ? 'Turn Input' : 'Turn Outcome'}
-      </p>
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex flex-wrap items-center gap-2">
-          {modifiedFiles.length > 0 || patches.length > 0 ? (
-            <button
-              type="button"
-              onClick={() => setShowFiles((value) => !value)}
-              aria-expanded={showFiles}
-              className={`inline-flex items-center gap-2 rounded-full px-3 py-1 ${chipClass}`}
-            >
-              <span className="h-4 w-0.5 rounded bg-amber-400" />
-              <span>{patchLabel}</span>
-              <span className="text-[10px] uppercase tracking-[0.14em]">
-                {showFiles ? 'Hide' : 'Show'}
-              </span>
-            </button>
-          ) : null}
-          {turnInfo?.providerId ? <span>{turnInfo.providerId}</span> : null}
-          {turnInfo?.modelId ? <span>{turnInfo.modelId}</span> : null}
-          {turnInfo?.mode ? <span>{turnInfo.mode} mode</span> : null}
-          {turnInfo?.durationMs ? <span>{formatDuration(turnInfo.durationMs)}</span> : null}
-        </div>
-
-        {showCopy ? (
-          <button
-            type="button"
-            onClick={() => void navigator.clipboard?.writeText(message?.content ?? '')}
-            className={`rounded-full px-3 py-1 ${chipClass}`}
-          >
-            Copy
-          </button>
-        ) : null}
-      </div>
-
-      {showFiles && (modifiedFiles.length > 0 || patches.length > 0) ? (
-        <div
-          className={`${compact ? 'mt-3 border-teal-950/15 bg-teal-50/20 text-teal-950/85' : 'mt-4 border-white/8 bg-slate-900/55 text-slate-200'} w-full rounded-xl border px-3 py-3`}
-        >
-          {patches.length > 0 ? (
-            <div className="space-y-3">
-              <p className="text-[10px] font-semibold uppercase tracking-[0.18em]">Patch Summary</p>
-              <div className="space-y-3">
-                {patches.map((patch, index) => (
-                  <div
-                    key={patch.hash || `patch-${index}`}
-                    className="rounded-lg border border-current/10 px-3 py-2"
-                  >
-                    <div className="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.14em] opacity-80">
-                      <span>Patch {index + 1}</span>
-                      {patch.hash ? (
-                        <code className="rounded bg-black/10 px-1.5 py-0.5 normal-case tracking-normal">
-                          {shortHash(patch.hash)}
-                        </code>
-                      ) : null}
-                      {patch.additions !== undefined || patch.deletions !== undefined ? (
-                        <span className="normal-case tracking-normal opacity-90">
-                          {formatPatchDelta(patch.additions, patch.deletions)}
-                        </span>
-                      ) : null}
-                    </div>
-                    <div className="mt-2 space-y-2 text-sm">
-                      {patch.files.map((file) => (
-                        <div key={`${patch.hash}-${file}`} className="flex items-start gap-3">
-                          <span className="mt-1.5 h-4 w-0.5 rounded bg-amber-400" />
-                          <code className="break-all rounded bg-black/10 px-1.5 py-0.5 font-mono text-[12px]">
-                            {relativizeFile(file, projectPath)}
-                          </code>
-                        </div>
-                      ))}
-                    </div>
-                    {patch.nextHash ? (
-                      <div className="mt-3">
-                        {diffErrorByHash[patch.hash] ? (
-                          <p className="mb-2 text-[11px] text-rose-200/85">
-                            {diffErrorByHash[patch.hash]}
-                          </p>
-                        ) : null}
-                        <button
-                          type="button"
-                          onClick={() => togglePatchDiff(patch.hash, patch.nextHash ?? '')}
-                          disabled={loadingHash === patch.hash}
-                          className="rounded-full border border-current/15 px-3 py-1 text-[11px] uppercase tracking-[0.14em] opacity-90 disabled:opacity-50"
-                        >
-                          {loadingHash === patch.hash
-                            ? 'Loading diff'
-                            : visibleDiffHashes[patch.hash]
-                              ? 'Hide diff'
-                              : diffErrorByHash[patch.hash]
-                                ? 'Retry diff'
-                                : diffByHash[patch.hash] !== undefined
-                                  ? 'Show diff'
-                                  : 'View diff'}
-                        </button>
-                        {visibleDiffHashes[patch.hash] && diffByHash[patch.hash] !== undefined ? (
-                          <div className="mt-3 overflow-hidden rounded-lg border border-current/10 bg-black/10">
-                            <InlinePatchDiff diff={diffByHash[patch.hash]} />
-                          </div>
-                        ) : null}
-                      </div>
-                    ) : null}
-                  </div>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <>
-              <p className="text-[10px] font-semibold uppercase tracking-[0.18em]">
-                Modified Files
-              </p>
-              <div className="mt-3 space-y-2 text-sm">
-                {modifiedFiles.map((file) => (
-                  <div key={file} className="flex items-start gap-3">
-                    <span className="mt-1.5 h-4 w-0.5 rounded bg-amber-400" />
-                    <code className="break-all rounded bg-black/10 px-1.5 py-0.5 font-mono text-[12px]">
-                      {relativizeFile(file, projectPath)}
-                    </code>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-function formatPatchLabel(patchCount: number, modifiedFileCount: number): string {
-  if (patchCount > 0) {
-    return `Modified ${modifiedFileCount} file${modifiedFileCount === 1 ? '' : 's'} across ${patchCount} patch${patchCount === 1 ? '' : 'es'}`
-  }
-
-  return `Modified ${modifiedFileCount} file${modifiedFileCount === 1 ? '' : 's'}`
-}
-
-function formatDuration(durationMs: number): string {
-  if (durationMs < 1000) {
-    return `${durationMs}ms`
-  }
-
-  return `${(durationMs / 1000).toFixed(1)}s`
-}
-
-function relativizeFile(file: string, projectPath?: string | null): string {
-  if (!projectPath || !file.startsWith(projectPath)) {
-    return file
-  }
-
-  return `.${file.slice(projectPath.length)}`
-}
-
-function shortHash(hash: string): string {
-  return hash.slice(0, 7)
-}
-
-function formatPatchDelta(additions?: number, deletions?: number): string {
-  const added = additions ?? 0
-  const removed = deletions ?? 0
-  return `+${added} -${removed}`
-}
-
-function InlinePatchDiff({ diff }: { diff: string }) {
-  const parsedFiles = parseUnifiedDiff(diff)
-
-  if (parsedFiles.length === 0) {
-    return (
-      <pre className="overflow-x-auto px-3 py-3 text-[11px] leading-6 text-slate-200">
-        <code>{diff || 'Diff unavailable.'}</code>
-      </pre>
-    )
-  }
-
-  return (
-    <div className="space-y-3 px-3 py-3">
-      {parsedFiles.map((file) => (
-        <div
-          key={file.header}
-          className="overflow-hidden rounded-lg border border-white/8 bg-slate-950/60"
-        >
-          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/8 px-3 py-2">
-            <p className="break-all text-xs font-semibold text-slate-100">{file.displayPath}</p>
-            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.14em]">
-              <span className="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-emerald-200">
-                +{file.additions}
-              </span>
-              <span className="rounded-full border border-rose-500/20 bg-rose-500/10 px-2 py-0.5 text-rose-200">
-                -{file.deletions}
-              </span>
-            </div>
-          </div>
-          <div className="overflow-x-auto font-mono text-[11px] leading-5">
-            {file.hunks.map((hunk) => (
-              <div key={`${file.header}-${hunk.header}`}>
-                <div className="bg-slate-900/70 px-3 py-1.5 text-[10px] text-sky-200">
-                  {hunk.header}
-                </div>
-                {hunk.lines.map((line, index) => (
-                  <div
-                    key={`${hunk.header}-${index}`}
-                    className={
-                      line.kind === 'addition'
-                        ? 'bg-emerald-500/8 px-3 py-1 text-emerald-50'
-                        : line.kind === 'deletion'
-                          ? 'bg-rose-500/8 px-3 py-1 text-rose-50'
-                          : line.kind === 'note'
-                            ? 'bg-slate-900/90 px-3 py-1 italic text-slate-500'
-                            : 'bg-slate-950/30 px-3 py-1 text-slate-200'
-                    }
-                  >
-                    <span className="mr-2 text-slate-500">
-                      {line.kind === 'addition'
-                        ? '+'
-                        : line.kind === 'deletion'
-                          ? '-'
-                          : line.kind === 'note'
-                            ? '\\'
-                            : ' '}
-                    </span>
-                    {line.content || ' '}
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.tsx b/frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.svelte.ts
similarity index 67%
rename from frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.tsx
rename to frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.svelte.ts
index f081607..1f638c1 100644
--- a/frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.tsx
+++ b/frontend/src/components/chat/ChatTranscriptA2UIDisabled.test.svelte.ts
@@ -2,13 +2,13 @@
 // This file tests ChatTranscript with ENABLE_A2UI = false.
 // vi.mock is hoisted to module scope by Vitest, so it must live in its own file.
 import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import type { ChatMessage } from '../../hooks/useAgUiChat.js'
+import { render, screen } from '@testing-library/svelte'
+import type { ChatMessage } from '../../store/chatStore.svelte.js'
 
 vi.mock('../../config/features.js', () => ({ ENABLE_A2UI: false }))
 
 // Import after mock registration so the module sees the mocked value
-const { ChatTranscript } = await import('./ChatTranscript.js')
+const { default: ChatTranscript } = await import('./ChatTranscript.svelte')
 
 describe('ChatTranscript with ENABLE_A2UI disabled', () => {
   it('does not render structured blocks when ENABLE_A2UI is false', () => {
@@ -23,17 +23,17 @@ describe('ChatTranscript with ENABLE_A2UI disabled', () => {
       },
     ]
 
-    render(
-      <ChatTranscript
-        activeAgentName="Test Agent"
-        messages={messages}
-        hasSession
-        loading={false}
-        ready
-        thinking={false}
-        errorMessage={null}
-      />
-    )
+    render(ChatTranscript, {
+      props: {
+        activeAgentName: 'Test Agent',
+        messages,
+        hasSession: true,
+        loading: false,
+        ready: true,
+        thinking: false,
+        errorMessage: null,
+      },
+    })
 
     expect(screen.queryByTestId('a2ui-tool-call-card')).toBeNull()
     expect(screen.getByText('plain text only')).toBeDefined()
diff --git a/frontend/src/components/chat/ChatWelcomeState.svelte b/frontend/src/components/chat/ChatWelcomeState.svelte
new file mode 100644
index 0000000..5a85cae
--- /dev/null
+++ b/frontend/src/components/chat/ChatWelcomeState.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  interface Props {
+    activeAgentName: string
+    canStartSession: boolean
+    hasAnyProject: boolean
+    hasAvailableProject: boolean
+    hasAvailableAgent: boolean
+    onStartSession?: () => void
+    onOpenProjectManager?: () => void
+  }
+
+  const {
+    activeAgentName,
+    canStartSession,
+    hasAnyProject,
+    hasAvailableProject,
+    hasAvailableAgent,
+    onStartSession,
+    onOpenProjectManager,
+  }: Props = $props()
+
+  const title = $derived(
+    !hasAnyProject
+      ? 'Bring a project into the workspace'
+      : !hasAvailableProject
+        ? 'Choose a project that is available'
+        : !hasAvailableAgent
+          ? 'Connect an agent to begin'
+          : 'Open a fresh chat in this project'
+  )
+
+  const description = $derived(
+    !hasAnyProject
+      ? 'Projects organize every session, file view, and diff. Add one first so the chat rail has a workspace to target.'
+      : !hasAvailableProject
+        ? 'The current project entries are configured, but none are available on disk right now. Pick another path or fix the missing repository.'
+        : !hasAvailableAgent
+          ? 'An agent connection is required before the composer can stream replies. Check Settings, enable a backend, then come back to start the session.'
+          : `Create a session with ${activeAgentName} to keep the transcript, files, and diff scoped to the selected repository.`
+  )
+
+  const highlightLabel = $derived(
+    !hasAnyProject
+      ? 'Workspace setup'
+      : !hasAvailableProject
+        ? 'Project attention needed'
+        : !hasAvailableAgent
+          ? 'Agent connection'
+          : 'Ready for the first prompt'
+  )
+</script>
+
+<section
+  data-testid="chat-welcome-state"
+  class="overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(6,10,18,0.98))] shadow-[0_30px_120px_rgba(2,6,23,0.45)]"
+>
+  <div
+    class="border-b border-white/8 bg-[radial-gradient(circle_at_top_left,rgba(45,212,191,0.18),transparent_48%)] px-5 py-5 sm:px-7 sm:py-6"
+  >
+    <p class="text-[11px] font-semibold uppercase tracking-[0.26em] text-teal-200/80">
+      {highlightLabel}
+    </p>
+    <h2
+      class="mt-3 max-w-2xl font-[family:var(--font-display)] text-4xl leading-tight text-slate-50 sm:text-5xl"
+    >
+      {title}
+    </h2>
+    <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-[15px]">
+      {description}
+    </p>
+  </div>
+
+  <div
+    class="grid gap-4 px-5 py-5 sm:px-7 sm:py-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(18rem,0.8fr)]"
+  >
+    <div class="grid gap-3 sm:grid-cols-2">
+      <article
+        class="rounded-2xl border border-white/8 bg-slate-950/55 p-4 shadow-[inset_0_1px_0_rgba(148,163,184,0.04)]"
+      >
+        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+          Project scoped
+        </p>
+        <h3 class="mt-3 text-base font-semibold text-slate-50">Sessions stay tied to a repository</h3>
+        <p class="mt-2 text-sm leading-6 text-slate-400">
+          Every chat, file browse, and diff review follows the selected project instead of a global
+          workspace.
+        </p>
+      </article>
+      <article
+        class="rounded-2xl border border-white/8 bg-slate-950/55 p-4 shadow-[inset_0_1px_0_rgba(148,163,184,0.04)]"
+      >
+        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+          Agent per session
+        </p>
+        <h3 class="mt-3 text-base font-semibold text-slate-50">
+          Pick the right backend when you start
+        </h3>
+        <p class="mt-2 text-sm leading-6 text-slate-400">
+          New chats choose an agent first, so each session keeps the right execution context from the
+          beginning.
+        </p>
+      </article>
+    </div>
+
+    <div class="rounded-2xl border border-white/10 bg-slate-950/65 p-4">
+      <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Next step</p>
+      <div class="mt-3 flex flex-col gap-2.5">
+        {#if onOpenProjectManager}
+          <button
+            type="button"
+            onclick={onOpenProjectManager}
+            class="inline-flex h-11 items-center justify-center rounded-xl border border-white/10 bg-slate-900 px-4 text-sm font-semibold text-slate-100 transition hover:border-white/15 hover:bg-slate-800"
+          >
+            Open project manager
+          </button>
+        {/if}
+        {#if canStartSession && onStartSession}
+          <button
+            type="button"
+            onclick={onStartSession}
+            class="inline-flex h-11 items-center justify-center rounded-xl border border-teal-500/30 bg-teal-500/12 px-4 text-sm font-semibold text-teal-100 transition hover:bg-teal-500/18"
+          >
+            Start a session
+          </button>
+        {/if}
+        <a
+          href="/#/settings"
+          class="inline-flex h-11 items-center justify-center rounded-xl border border-white/10 bg-transparent px-4 text-sm font-semibold text-slate-300 transition hover:border-white/15 hover:bg-slate-900/70 hover:text-slate-100"
+        >
+          Open settings
+        </a>
+      </div>
+
+      <div class="mt-4 rounded-xl border border-white/8 bg-slate-900/70 px-3 py-3 text-sm text-slate-400">
+        {canStartSession
+          ? 'Once the session is open, the composer stays visible while files and diff swap into the main workspace area.'
+          : 'The composer will unlock automatically once a usable project and agent are available for the current session.'}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/frontend/src/components/chat/ChatWelcomeState.test.tsx b/frontend/src/components/chat/ChatWelcomeState.test.svelte.ts
similarity index 70%
rename from frontend/src/components/chat/ChatWelcomeState.test.tsx
rename to frontend/src/components/chat/ChatWelcomeState.test.svelte.ts
index dea9493..0e8facc 100644
--- a/frontend/src/components/chat/ChatWelcomeState.test.tsx
+++ b/frontend/src/components/chat/ChatWelcomeState.test.svelte.ts
@@ -1,22 +1,21 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-
-import { ChatWelcomeState } from './ChatWelcomeState.js'
-
-function renderWelcomeState(props: Partial<React.ComponentProps<typeof ChatWelcomeState>> = {}) {
-  return render(
-    <ChatWelcomeState
-      activeAgentName="GitHub Copilot"
-      canStartSession
-      hasAnyProject
-      hasAvailableAgent
-      hasAvailableProject
-      onStartSession={vi.fn()}
-      onOpenProjectManager={vi.fn()}
-      {...props}
-    />
-  )
+import { render, screen, fireEvent } from '@testing-library/svelte'
+import ChatWelcomeState from './ChatWelcomeState.svelte'
+
+function renderWelcomeState(props: Record<string, unknown> = {}) {
+  return render(ChatWelcomeState, {
+    props: {
+      activeAgentName: 'GitHub Copilot',
+      canStartSession: true,
+      hasAnyProject: true,
+      hasAvailableAgent: true,
+      hasAvailableProject: true,
+      onStartSession: vi.fn(),
+      onOpenProjectManager: vi.fn(),
+      ...props,
+    },
+  })
 }
 
 describe('ChatWelcomeState', () => {
@@ -49,7 +48,7 @@ describe('ChatWelcomeState', () => {
     expect(screen.getByText('Connect an agent to begin')).toBeDefined()
   })
 
-  it('fires the start callback when the CTA is pressed', () => {
+  it('fires the start callback when the CTA is pressed', async () => {
     const onStartSession = vi.fn()
     renderWelcomeState({ onStartSession })
 
diff --git a/frontend/src/components/chat/ChatWelcomeState.tsx b/frontend/src/components/chat/ChatWelcomeState.tsx
deleted file mode 100644
index 83d6189..0000000
--- a/frontend/src/components/chat/ChatWelcomeState.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-interface ChatWelcomeStateProps {
-  activeAgentName: string
-  canStartSession: boolean
-  hasAnyProject: boolean
-  hasAvailableProject: boolean
-  hasAvailableAgent: boolean
-  onStartSession?: () => void
-  onOpenProjectManager?: () => void
-}
-
-export function ChatWelcomeState({
-  activeAgentName,
-  canStartSession,
-  hasAnyProject,
-  hasAvailableProject,
-  hasAvailableAgent,
-  onStartSession,
-  onOpenProjectManager,
-}: ChatWelcomeStateProps) {
-  const title = !hasAnyProject
-    ? 'Bring a project into the workspace'
-    : !hasAvailableProject
-      ? 'Choose a project that is available'
-      : !hasAvailableAgent
-        ? 'Connect an agent to begin'
-        : 'Open a fresh chat in this project'
-
-  const description = !hasAnyProject
-    ? 'Projects organize every session, file view, and diff. Add one first so the chat rail has a workspace to target.'
-    : !hasAvailableProject
-      ? 'The current project entries are configured, but none are available on disk right now. Pick another path or fix the missing repository.'
-      : !hasAvailableAgent
-        ? 'An agent connection is required before the composer can stream replies. Check Settings, enable a backend, then come back to start the session.'
-        : `Create a session with ${activeAgentName} to keep the transcript, files, and diff scoped to the selected repository.`
-
-  const highlightLabel = !hasAnyProject
-    ? 'Workspace setup'
-    : !hasAvailableProject
-      ? 'Project attention needed'
-      : !hasAvailableAgent
-        ? 'Agent connection'
-        : 'Ready for the first prompt'
-
-  return (
-    <section
-      data-testid="chat-welcome-state"
-      className="overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(6,10,18,0.98))] shadow-[0_30px_120px_rgba(2,6,23,0.45)]"
-    >
-      <div className="border-b border-white/8 bg-[radial-gradient(circle_at_top_left,rgba(45,212,191,0.18),transparent_48%)] px-5 py-5 sm:px-7 sm:py-6">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.26em] text-teal-200/80">
-          {highlightLabel}
-        </p>
-        <h2 className="mt-3 max-w-2xl font-[family:var(--font-display)] text-4xl leading-tight text-slate-50 sm:text-5xl">
-          {title}
-        </h2>
-        <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-[15px]">
-          {description}
-        </p>
-      </div>
-
-      <div className="grid gap-4 px-5 py-5 sm:px-7 sm:py-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(18rem,0.8fr)]">
-        <div className="grid gap-3 sm:grid-cols-2">
-          <FeatureCard
-            label="Project scoped"
-            title="Sessions stay tied to a repository"
-            description="Every chat, file browse, and diff review follows the selected project instead of a global workspace."
-          />
-          <FeatureCard
-            label="Agent per session"
-            title="Pick the right backend when you start"
-            description="New chats choose an agent first, so each session keeps the right execution context from the beginning."
-          />
-        </div>
-
-        <div className="rounded-2xl border border-white/10 bg-slate-950/65 p-4">
-          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-            Next step
-          </p>
-          <div className="mt-3 flex flex-col gap-2.5">
-            {onOpenProjectManager ? (
-              <button
-                type="button"
-                onClick={onOpenProjectManager}
-                className="inline-flex h-11 items-center justify-center rounded-xl border border-white/10 bg-slate-900 px-4 text-sm font-semibold text-slate-100 transition hover:border-white/15 hover:bg-slate-800"
-              >
-                Open project manager
-              </button>
-            ) : null}
-            {canStartSession && onStartSession ? (
-              <button
-                type="button"
-                onClick={onStartSession}
-                className="inline-flex h-11 items-center justify-center rounded-xl border border-teal-500/30 bg-teal-500/12 px-4 text-sm font-semibold text-teal-100 transition hover:bg-teal-500/18"
-              >
-                Start a session
-              </button>
-            ) : null}
-            <a
-              href="/settings"
-              className="inline-flex h-11 items-center justify-center rounded-xl border border-white/10 bg-transparent px-4 text-sm font-semibold text-slate-300 transition hover:border-white/15 hover:bg-slate-900/70 hover:text-slate-100"
-            >
-              Open settings
-            </a>
-          </div>
-
-          <div className="mt-4 rounded-xl border border-white/8 bg-slate-900/70 px-3 py-3 text-sm text-slate-400">
-            {canStartSession
-              ? 'Once the session is open, the composer stays visible while files and diff swap into the main workspace area.'
-              : 'The composer will unlock automatically once a usable project and agent are available for the current session.'}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function FeatureCard({
-  label,
-  title,
-  description,
-}: {
-  label: string
-  title: string
-  description: string
-}) {
-  return (
-    <article className="rounded-2xl border border-white/8 bg-slate-950/55 p-4 shadow-[inset_0_1px_0_rgba(148,163,184,0.04)]">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-        {label}
-      </p>
-      <h3 className="mt-3 text-base font-semibold text-slate-50">{title}</h3>
-      <p className="mt-2 text-sm leading-6 text-slate-400">{description}</p>
-    </article>
-  )
-}
diff --git a/frontend/src/components/chat/ProjectContextSwitcher.svelte b/frontend/src/components/chat/ProjectContextSwitcher.svelte
new file mode 100644
index 0000000..f0b5321
--- /dev/null
+++ b/frontend/src/components/chat/ProjectContextSwitcher.svelte
@@ -0,0 +1,808 @@
+<script lang="ts">
+  import type { ProjectSummary } from '../../store/chatStore.svelte.js'
+
+  const RECENT_PATHS_STORAGE_KEY = 'acp.project-paths.recent'
+  const DRAFT_PATH_STORAGE_KEY = 'acp.project-paths.draft-path'
+  const DRAFT_NAME_STORAGE_KEY = 'acp.project-paths.draft-name'
+  const MAX_RECENT_PATHS = 6
+
+  export interface ProjectPathSuggestion {
+    name: string
+    path: string
+  }
+
+  interface Props {
+    projects: ProjectSummary[]
+    selectedProjectId: string | null
+    visibleProjectIds: string[]
+    open?: boolean
+    onProjectSelect: (projectId: string) => void | Promise<void>
+    onOpenChange?: (open: boolean) => void
+    onProjectVisibilityChange: (projectId: string, visible: boolean) => void
+    onAddProject: (name: string, path: string) => Promise<ProjectSummary>
+    onRemoveProject: (projectId: string) => Promise<void>
+    onSuggestProjectPaths: (path: string) => Promise<ProjectPathSuggestion[]>
+  }
+
+  const {
+    projects,
+    selectedProjectId,
+    visibleProjectIds,
+    open = undefined,
+    onProjectSelect,
+    onOpenChange,
+    onProjectVisibilityChange,
+    onAddProject,
+    onRemoveProject,
+    onSuggestProjectPaths,
+  }: Props = $props()
+
+  let uncontrolledManagerOpen = $state(false)
+  let addFormOpen = $state(false)
+  let addName = $state(readStoredValue(DRAFT_NAME_STORAGE_KEY))
+  let addPath = $state(readStoredValue(DRAFT_PATH_STORAGE_KEY))
+  let addError = $state<string | null>(null)
+  let addSubmitting = $state(false)
+  let removingProjectId = $state<string | null>(null)
+  let pathSuggestions = $state<ProjectPathSuggestion[]>([])
+  let pathSuggestionsLoading = $state(false)
+  let pathSuggestionsOpen = $state(false)
+  let activeSuggestionIndex = $state(-1)
+  let pathSuggestionError = $state<string | null>(null)
+  let isCompactViewport = $state(typeof window !== 'undefined' ? window.innerWidth < 1024 : false)
+  let recentPaths = $state<string[]>(readStoredPaths(RECENT_PATHS_STORAGE_KEY))
+
+  const suggestionListId = 'project-path-suggestions'
+
+  const visibleProjectSet = $derived(new Set(visibleProjectIds))
+  const visibleProjectCount = $derived(visibleProjectIds.length)
+  const selectedProject = $derived(
+    projects.find((project) => project.id === selectedProjectId) ?? null
+  )
+  const activeSuggestion = $derived(
+    activeSuggestionIndex >= 0 ? (pathSuggestions[activeSuggestionIndex] ?? null) : null
+  )
+  const breadcrumbSegments = $derived(buildBreadcrumbSegments(addPath))
+  const pathQuickActions = $derived(buildPathQuickActions(addPath, recentPaths))
+  const pathInputValue = $derived(addPath.trim())
+  const pathInputHasSearchablePrefix = $derived(looksLikeSuggestionPathInput(pathInputValue))
+  const showSuggestionPanel = $derived(addFormOpen && pathInputValue.length > 0)
+  const showSuggestionEmptyState = $derived(
+    showSuggestionPanel &&
+      !pathSuggestionsLoading &&
+      !pathSuggestionError &&
+      pathSuggestions.length === 0 &&
+      pathInputHasSearchablePrefix
+  )
+  const managerOpen = $derived(open ?? uncontrolledManagerOpen)
+
+  function setManagerOpen(nextOpen: boolean) {
+    if (open === undefined) {
+      uncontrolledManagerOpen = nextOpen
+    }
+    onOpenChange?.(nextOpen)
+  }
+
+  function applySuggestion(suggestion: ProjectPathSuggestion) {
+    addPath = toTraversableSuggestionPath(suggestion.path)
+    pathSuggestionsOpen = true
+    activeSuggestionIndex = -1
+  }
+
+  function applyPath(path: string) {
+    addPath = toTraversableSuggestionPath(path)
+    pathSuggestionsOpen = true
+    activeSuggestionIndex = -1
+  }
+
+  // Persist drafts
+  $effect(() => {
+    writeStoredValue(DRAFT_NAME_STORAGE_KEY, addName)
+  })
+
+  $effect(() => {
+    writeStoredValue(DRAFT_PATH_STORAGE_KEY, addPath)
+  })
+
+  // Resize handler
+  $effect(() => {
+    const handleResize = () => {
+      isCompactViewport = window.innerWidth < 1024
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  })
+
+  // Path suggestion debounce
+  $effect(() => {
+    if (!addFormOpen) {
+      pathSuggestions = []
+      pathSuggestionsLoading = false
+      pathSuggestionsOpen = false
+      activeSuggestionIndex = -1
+      pathSuggestionError = null
+      return
+    }
+
+    const trimmedPath = addPath.trim()
+    if (!trimmedPath || !looksLikeSuggestionPathInput(trimmedPath)) {
+      pathSuggestions = []
+      pathSuggestionsLoading = false
+      pathSuggestionsOpen = false
+      activeSuggestionIndex = -1
+      pathSuggestionError = null
+      return
+    }
+
+    let cancelled = false
+    const timer = window.setTimeout(() => {
+      pathSuggestionsLoading = true
+      pathSuggestionError = null
+
+      void onSuggestProjectPaths(trimmedPath)
+        .then((nextSuggestions) => {
+          if (cancelled) return
+          pathSuggestions = nextSuggestions
+          pathSuggestionsOpen = true
+          activeSuggestionIndex = nextSuggestions.length > 0 ? 0 : -1
+        })
+        .catch(() => {
+          if (cancelled) return
+          pathSuggestions = []
+          pathSuggestionsOpen = true
+          activeSuggestionIndex = -1
+          pathSuggestionError = 'Unable to load folder suggestions right now.'
+        })
+        .finally(() => {
+          if (!cancelled) {
+            pathSuggestionsLoading = false
+          }
+        })
+    }, 140)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+    }
+  })
+
+  // Keep activeSuggestionIndex in bounds
+  $effect(() => {
+    if (activeSuggestionIndex >= pathSuggestions.length) {
+      activeSuggestionIndex = pathSuggestions.length > 0 ? 0 : -1
+    }
+  })
+
+  async function handleAddSubmit(e: Event) {
+    e.preventDefault()
+    const trimmedPath = addPath.trim()
+
+    if (!trimmedPath) {
+      addError = 'Path is required.'
+      return
+    }
+
+    const effectiveName =
+      addName.trim() || (trimmedPath.split('/').filter(Boolean).pop() ?? trimmedPath)
+
+    addError = null
+    addSubmitting = true
+
+    try {
+      const newProject = await onAddProject(effectiveName, trimmedPath)
+      const normalizedStoredPath = normalizeStoredPath(trimmedPath)
+      if (normalizedStoredPath) {
+        const next = [
+          normalizedStoredPath,
+          ...recentPaths.filter((item) => item !== normalizedStoredPath),
+        ].slice(0, MAX_RECENT_PATHS)
+        writeStoredPaths(RECENT_PATHS_STORAGE_KEY, next)
+        recentPaths = next
+      }
+
+      addName = ''
+      addPath = ''
+      addFormOpen = false
+      pathSuggestions = []
+      pathSuggestionsOpen = false
+      activeSuggestionIndex = -1
+      onProjectVisibilityChange(newProject.id, true)
+      await onProjectSelect(newProject.id)
+    } catch {
+      addError = 'Failed to add project. Check the name and path and try again.'
+    } finally {
+      addSubmitting = false
+    }
+  }
+
+  function handlePathKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      pathSuggestionsOpen = false
+      activeSuggestionIndex = -1
+      return
+    }
+
+    if (pathSuggestions.length === 0) return
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      pathSuggestionsOpen = true
+      activeSuggestionIndex =
+        activeSuggestionIndex < pathSuggestions.length - 1 ? activeSuggestionIndex + 1 : 0
+      return
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      pathSuggestionsOpen = true
+      activeSuggestionIndex =
+        activeSuggestionIndex > 0 ? activeSuggestionIndex - 1 : pathSuggestions.length - 1
+      return
+    }
+
+    if (e.key === 'Enter' && pathSuggestionsOpen && activeSuggestion) {
+      e.preventDefault()
+      applySuggestion(activeSuggestion)
+    }
+  }
+</script>
+
+<button
+  type="button"
+  aria-label="Open project manager"
+  onclick={() => setManagerOpen(true)}
+  class="flex items-center justify-between rounded-xl border border-white/10 bg-slate-900/80 px-3 py-3 text-left transition hover:border-white/15 hover:bg-slate-900"
+>
+  <span>
+    <span class="block text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+      Projects
+    </span>
+    <span class="mt-1 block text-sm font-semibold text-slate-50">
+      {selectedProject?.name ?? 'Manage projects'}
+    </span>
+    <span class="mt-1 block text-[11px] text-slate-400">
+      {visibleProjectCount} visible in chats
+    </span>
+  </span>
+  <span class="rounded-full border border-white/10 bg-slate-950 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">
+    Open
+  </span>
+</button>
+
+{#if managerOpen}
+  <!-- Main manager modal -->
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/75 px-4 py-6 backdrop-blur-sm sm:px-6 lg:px-10">
+    <div class="flex h-full max-h-[min(88vh,920px)] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#0a0f17] shadow-[0_30px_120px_rgba(2,6,23,0.65)]">
+      <div class="flex flex-wrap items-start justify-between gap-3 border-b border-white/8 px-5 py-4">
+        <div class="min-w-0">
+          <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+            Projects
+          </p>
+          <h2 class="mt-2 font-[family:var(--font-display)] text-2xl text-slate-50">
+            Manage Project Views
+          </h2>
+          <p class="mt-2 text-sm text-slate-400">
+            Show or hide projects in the chat rail, choose the current workspace, and add
+            new repositories.
+          </p>
+        </div>
+        <div class="flex shrink-0 flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onclick={() => {
+              addFormOpen = !addFormOpen
+              addError = null
+            }}
+            class="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
+          >
+            {addFormOpen ? 'Hide Add Project' : 'Add Project'}
+          </button>
+          <button
+            type="button"
+            onclick={() => setManagerOpen(false)}
+            class="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+
+      <div
+        class={[
+          'grid min-h-0 flex-1 gap-0 overflow-hidden',
+          addFormOpen
+            ? 'lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]'
+            : 'lg:grid-cols-[minmax(0,1fr)]',
+        ].join(' ')}
+      >
+        <section class="min-h-0 overflow-y-auto border-b border-white/8 px-5 py-4 lg:border-b-0 lg:border-r">
+          <div class="mb-4 flex items-center justify-between">
+            <div>
+              <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+                Session Rail
+              </p>
+              <p class="mt-1 text-sm text-slate-300">
+                Choose which projects appear in chats.
+              </p>
+            </div>
+            <span class="rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+              {visibleProjectCount}/{projects.length}
+            </span>
+          </div>
+
+          <div class="space-y-2">
+            {#each projects as project (project.id)}
+              {@const visible = visibleProjectSet.has(project.id)}
+              {@const current = project.id === selectedProjectId}
+              {@const selectable = project.status === 'available'}
+              <div class="rounded-xl border border-white/8 bg-slate-900/55 px-3 py-3">
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <div class="flex flex-wrap items-center gap-2">
+                      <p class="truncate text-sm font-semibold text-slate-50">{project.name}</p>
+                      {#if current}
+                        <span class="rounded-full border border-teal-500/30 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
+                          Current
+                        </span>
+                      {/if}
+                      <span class={buildProjectStatusClassName(project.status)}>
+                        {describeProjectStatus(project.status)}
+                      </span>
+                    </div>
+                    <p class="mt-2 break-all text-[11px] leading-5 text-slate-400">{project.path}</p>
+                  </div>
+                  <button
+                    type="button"
+                    onclick={() => onProjectVisibilityChange(project.id, !visible)}
+                    class={[
+                      'shrink-0 rounded-lg border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em]',
+                      visible
+                        ? 'border-white/10 bg-slate-950 text-slate-300 hover:bg-slate-900'
+                        : 'border-amber-500/25 bg-amber-500/10 text-amber-200 hover:bg-amber-500/15',
+                    ].join(' ')}
+                  >
+                    {visible ? 'Shown' : 'Hidden'}
+                  </button>
+                </div>
+
+                <div class="mt-3 flex items-center justify-between gap-3 border-t border-white/6 pt-3">
+                  <p class="text-[11px] text-slate-500">
+                    {visible ? 'Visible in the session viewer.' : 'Hidden from the session viewer.'}
+                  </p>
+                  <div class="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onclick={() => {
+                        removingProjectId = project.id
+                        void onRemoveProject(project.id).finally(() => {
+                          if (removingProjectId === project.id) removingProjectId = null
+                        })
+                      }}
+                      disabled={removingProjectId === project.id}
+                      class="rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-200 hover:bg-rose-500/15 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      {removingProjectId === project.id ? 'Removing' : 'Remove'}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={!selectable || current}
+                      onclick={() => void onProjectSelect(project.id)}
+                      class="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200 hover:bg-slate-900 disabled:cursor-not-allowed disabled:text-slate-500"
+                    >
+                      {current ? 'Selected' : 'Use'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        </section>
+
+        {#if addFormOpen && !isCompactViewport}
+          <section class="min-h-0 overflow-y-auto px-5 py-4">
+            {#snippet addProjectFormContent()}
+              <div>
+                <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+                  Add Project
+                </p>
+                <p class="mt-1 text-sm text-slate-300">
+                  Register another repository for chat and explorer context.
+                </p>
+              </div>
+
+              <form
+                aria-label="Add project form"
+                onsubmit={handleAddSubmit}
+                class="mt-4 space-y-3"
+              >
+                <input
+                  type="text"
+                  aria-label="Project name"
+                  placeholder="Project name"
+                  value={addName}
+                  oninput={(e) => { addName = (e.target as HTMLInputElement).value }}
+                  disabled={addSubmitting}
+                  class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
+                />
+                <input
+                  type="text"
+                  aria-label="Project path"
+                  role="combobox"
+                  aria-expanded={pathSuggestionsOpen}
+                  aria-controls={suggestionListId}
+                  aria-activedescendant={activeSuggestion ? buildSuggestionId(activeSuggestion.path) : undefined}
+                  aria-autocomplete="list"
+                  placeholder="/absolute/path/to/project"
+                  value={addPath}
+                  oninput={(e) => {
+                    addPath = (e.target as HTMLInputElement).value
+                    pathSuggestionsOpen = true
+                  }}
+                  onfocus={() => {
+                    if (pathSuggestions.length > 0 || pathSuggestionError) {
+                      pathSuggestionsOpen = true
+                    }
+                  }}
+                  onkeydown={handlePathKeydown}
+                  disabled={addSubmitting}
+                  class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
+                />
+                <p class="text-[11px] leading-5 text-slate-500">
+                  Type an absolute path like /home/vries/projects or ~/code. Suggestions appear below when
+                  folders match.
+                </p>
+                {#if breadcrumbSegments.length > 0}
+                  <div class="flex flex-wrap gap-1">
+                    {#each breadcrumbSegments as segment (segment.path)}
+                      <button
+                        type="button"
+                        onclick={() => applyPath(segment.path)}
+                        class="rounded-full border border-white/10 bg-slate-950/70 px-2.5 py-1 text-[11px] text-slate-300 transition hover:border-teal-400/30 hover:text-teal-200"
+                      >
+                        {segment.label}
+                      </button>
+                    {/each}
+                  </div>
+                {/if}
+                {#if pathQuickActions.length > 0}
+                  <div class="grid gap-2 sm:grid-cols-2">
+                    {#each pathQuickActions as group (group.label)}
+                      <div class="rounded-xl border border-white/8 bg-slate-950/50 p-2">
+                        <div class="mb-2 flex items-center justify-between">
+                          <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+                            {group.label}
+                          </p>
+                        </div>
+                        <div class="flex flex-wrap gap-1">
+                          {#each group.paths as path (`${group.label}-${path}`)}
+                            <button
+                              type="button"
+                              onclick={() => applyPath(path)}
+                              class="max-w-full truncate rounded-lg border border-white/10 bg-slate-900/80 px-2.5 py-1.5 text-left text-[11px] text-slate-300 transition hover:border-teal-400/30 hover:text-teal-200"
+                              title={path}
+                            >
+                              {compactPathLabel(path)}
+                            </button>
+                          {/each}
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+                {#if pathSuggestionsLoading}
+                  <p class="text-[11px] text-slate-500">Loading suggestions...</p>
+                {/if}
+                {#if showSuggestionPanel && !pathInputHasSearchablePrefix}
+                  <div class="rounded-xl border border-dashed border-white/10 bg-slate-950/50 px-3 py-3 text-[11px] leading-5 text-slate-500">
+                    Start with / or ~/ to browse folders.
+                  </div>
+                {/if}
+                {#if pathSuggestionsOpen && pathSuggestions.length > 0}
+                  <div
+                    id={suggestionListId}
+                    role="listbox"
+                    aria-label="Path suggestions"
+                    class="max-h-72 overflow-y-auto rounded-xl border border-teal-500/20 bg-[linear-gradient(180deg,rgba(8,15,24,0.98),rgba(5,10,18,0.98))] p-2 shadow-[0_18px_40px_rgba(2,6,23,0.4)]"
+                  >
+                    <div class="mb-2 flex items-center justify-between px-1">
+                      <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+                        Path suggestions
+                      </p>
+                      <p class="text-[10px] text-slate-600">Arrow keys · Enter</p>
+                    </div>
+                    <div class="space-y-1">
+                      {#each pathSuggestions as suggestion, index (suggestion.path)}
+                        <button
+                          id={buildSuggestionId(suggestion.path)}
+                          type="button"
+                          role="option"
+                          aria-selected={index === activeSuggestionIndex}
+                          onmousedown={(e) => e.preventDefault()}
+                          onmouseenter={() => { activeSuggestionIndex = index }}
+                          onclick={() => applySuggestion(suggestion)}
+                          class={[
+                            'flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition',
+                            index === activeSuggestionIndex
+                              ? 'border-teal-400/40 bg-teal-500/10 text-slate-50 shadow-[inset_0_0_0_1px_rgba(45,212,191,0.08)]'
+                              : 'border-transparent bg-slate-900/70 text-slate-200 hover:border-white/8 hover:bg-slate-900',
+                          ].join(' ')}
+                        >
+                          <span class="flex min-w-0 items-center gap-3">
+                            <span class="rounded-md border border-teal-500/20 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-teal-200">
+                              Dir
+                            </span>
+                            <span class="truncate">{suggestion.name}</span>
+                          </span>
+                          <span class="ml-3 truncate text-[11px] text-slate-500">
+                            {toTraversableSuggestionPath(suggestion.path)}
+                          </span>
+                        </button>
+                      {/each}
+                    </div>
+                  </div>
+                {/if}
+                {#if pathSuggestionsOpen && pathSuggestionError}
+                  <div class="rounded-xl border border-rose-500/20 bg-rose-500/10 px-3 py-3 text-[11px] leading-5 text-rose-200">
+                    {pathSuggestionError}
+                  </div>
+                {/if}
+                {#if showSuggestionEmptyState}
+                  <div class="rounded-xl border border-dashed border-white/10 bg-slate-950/50 px-3 py-3 text-[11px] leading-5 text-slate-500">
+                    No matching folders found for {pathInputValue}.
+                  </div>
+                {/if}
+                {#if addError}
+                  <p role="alert" class="text-[11px] text-rose-400">{addError}</p>
+                {/if}
+                <button
+                  type="submit"
+                  disabled={addSubmitting}
+                  class="w-full rounded-lg border border-teal-500/30 bg-teal-500/10 px-3 py-2 text-sm font-medium text-teal-200 hover:bg-teal-500/20 disabled:opacity-50"
+                >
+                  {addSubmitting ? 'Adding…' : 'Add project'}
+                </button>
+              </form>
+            {/snippet}
+            {@render addProjectFormContent()}
+          </section>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if managerOpen && addFormOpen && isCompactViewport}
+  <!-- Mobile add project modal -->
+  <div class="fixed inset-0 z-[60] bg-slate-950/82 px-3 py-3 backdrop-blur-sm sm:px-6 sm:py-6">
+    <div
+      data-testid="mobile-add-project-modal"
+      class="mx-auto flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-[1.75rem] border border-white/10 bg-[#0a0f17] shadow-[0_30px_120px_rgba(2,6,23,0.75)]"
+    >
+      <div class="flex items-start justify-between gap-4 border-b border-white/8 px-4 py-4 sm:px-5">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+            Add Project
+          </p>
+          <p class="mt-1 text-sm text-slate-300">
+            Use a focused form so the keyboard does not cover the inputs.
+          </p>
+        </div>
+        <button
+          type="button"
+          onclick={() => { addFormOpen = false }}
+          class="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
+        >
+          Done
+        </button>
+      </div>
+
+      <section class="min-h-0 flex-1 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+            Add Project
+          </p>
+          <p class="mt-1 text-sm text-slate-300">
+            Register another repository for chat and explorer context.
+          </p>
+        </div>
+
+        <form
+          aria-label="Add project form"
+          onsubmit={handleAddSubmit}
+          class="mt-4 space-y-3"
+        >
+          <input
+            type="text"
+            aria-label="Project name"
+            placeholder="Project name"
+            value={addName}
+            oninput={(e) => { addName = (e.target as HTMLInputElement).value }}
+            disabled={addSubmitting}
+            class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
+          />
+          <input
+            type="text"
+            aria-label="Project path"
+            role="combobox"
+            aria-expanded={pathSuggestionsOpen}
+            aria-controls={suggestionListId}
+            aria-activedescendant={activeSuggestion ? buildSuggestionId(activeSuggestion.path) : undefined}
+            aria-autocomplete="list"
+            placeholder="/absolute/path/to/project"
+            value={addPath}
+            oninput={(e) => {
+              addPath = (e.target as HTMLInputElement).value
+              pathSuggestionsOpen = true
+            }}
+            onfocus={() => {
+              if (pathSuggestions.length > 0 || pathSuggestionError) {
+                pathSuggestionsOpen = true
+              }
+            }}
+            onkeydown={handlePathKeydown}
+            disabled={addSubmitting}
+            class="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
+          />
+          <p class="text-[11px] leading-5 text-slate-500">
+            Type an absolute path like /home/vries/projects or ~/code. Suggestions appear below when
+            folders match.
+          </p>
+          {#if pathSuggestionsLoading}
+            <p class="text-[11px] text-slate-500">Loading suggestions...</p>
+          {/if}
+          {#if showSuggestionPanel && !pathInputHasSearchablePrefix}
+            <div class="rounded-xl border border-dashed border-white/10 bg-slate-950/50 px-3 py-3 text-[11px] leading-5 text-slate-500">
+              Start with / or ~/ to browse folders.
+            </div>
+          {/if}
+          {#if pathSuggestionsOpen && pathSuggestions.length > 0}
+            <div
+              id="{suggestionListId}-mobile"
+              role="listbox"
+              aria-label="Path suggestions"
+              class="max-h-72 overflow-y-auto rounded-xl border border-teal-500/20 bg-[linear-gradient(180deg,rgba(8,15,24,0.98),rgba(5,10,18,0.98))] p-2 shadow-[0_18px_40px_rgba(2,6,23,0.4)]"
+            >
+              <div class="space-y-1">
+                {#each pathSuggestions as suggestion, index (suggestion.path)}
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={index === activeSuggestionIndex}
+                    onmousedown={(e) => e.preventDefault()}
+                    onmouseenter={() => { activeSuggestionIndex = index }}
+                    onclick={() => applySuggestion(suggestion)}
+                    class={[
+                      'flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition',
+                      index === activeSuggestionIndex
+                        ? 'border-teal-400/40 bg-teal-500/10 text-slate-50'
+                        : 'border-transparent bg-slate-900/70 text-slate-200 hover:bg-slate-900',
+                    ].join(' ')}
+                  >
+                    <span class="truncate">{suggestion.name}</span>
+                    <span class="ml-3 truncate text-[11px] text-slate-500">
+                      {toTraversableSuggestionPath(suggestion.path)}
+                    </span>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/if}
+          {#if addError}
+            <p role="alert" class="text-[11px] text-rose-400">{addError}</p>
+          {/if}
+          <button
+            type="submit"
+            disabled={addSubmitting}
+            class="w-full rounded-lg border border-teal-500/30 bg-teal-500/10 px-3 py-2 text-sm font-medium text-teal-200 hover:bg-teal-500/20 disabled:opacity-50"
+          >
+            {addSubmitting ? 'Adding…' : 'Add project'}
+          </button>
+        </form>
+      </section>
+    </div>
+  </div>
+{/if}
+
+<script lang="ts" module>
+  function buildProjectStatusClassName(status: string): string {
+    if (status === 'available') {
+      return 'rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-200'
+    }
+    return 'rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400'
+  }
+
+  function describeProjectStatus(status: string): string {
+    if (status === 'available') return status
+    return status === 'missing' ? 'path not found' : 'path is invalid'
+  }
+
+  function toTraversableSuggestionPath(path: string): string {
+    return path === '/' ? path : `${path}/`
+  }
+
+  function buildSuggestionId(path: string): string {
+    return `project-path-suggestion-${path.replace(/[^a-zA-Z0-9_-]+/g, '-')}`
+  }
+
+  function buildBreadcrumbSegments(path: string): Array<{ label: string; path: string }> {
+    const trimmed = path.trim()
+    if (!trimmed.startsWith('/')) return []
+    const normalized = trimmed === '/' ? '/' : trimmed.replace(/\/+$/, '')
+    if (normalized === '/') return [{ label: '/', path: '/' }]
+    const parts = normalized.split('/').filter(Boolean)
+    const segments = [{ label: '/', path: '/' }]
+    let current = ''
+    for (const part of parts) {
+      current = `${current}/${part}`
+      segments.push({ label: part, path: current })
+    }
+    return segments
+  }
+
+  function buildPathQuickActions(
+    currentPath: string,
+    recentPaths: string[]
+  ): Array<{ label: string; paths: string[] }> {
+    const current = normalizeStoredPath(currentPath)
+    const groups = [{ label: 'Recent', paths: recentPaths.filter((path) => path !== current) }]
+    return groups.filter((group) => group.paths.length > 0)
+  }
+
+  function normalizeStoredPath(path: string): string {
+    const trimmed = path.trim()
+    if (!looksLikeSuggestionPathInput(trimmed)) return ''
+    if (trimmed === '~') return '~'
+    return trimmed === '/' ? '/' : trimmed.replace(/\/+$/, '')
+  }
+
+  function looksLikeSuggestionPathInput(path: string): boolean {
+    return path.startsWith('/') || path === '~' || path.startsWith('~/')
+  }
+
+  function readStoredValue(storageKey: string): string {
+    if (typeof window === 'undefined' || !window.localStorage) return ''
+    return window.localStorage.getItem(storageKey) ?? ''
+  }
+
+  function writeStoredValue(storageKey: string, value: string): void {
+    if (typeof window === 'undefined' || !window.localStorage) return
+    if (!value) {
+      window.localStorage.removeItem(storageKey)
+      return
+    }
+    window.localStorage.setItem(storageKey, value)
+  }
+
+  function compactPathLabel(path: string): string {
+    if (path === '/' || path === '~') return path
+    const trimmed = path.replace(/\/+$/, '')
+    const parts = trimmed.split('/').filter(Boolean)
+    if (path.startsWith('~/')) {
+      const homeParts = path.slice(2).replace(/\/+$/, '').split('/').filter(Boolean)
+      if (homeParts.length <= 2) return `~/${homeParts.join('/')}`
+      return `~/${homeParts[0]}/.../${homeParts.at(-1)}`
+    }
+    if (parts.length <= 3) return path
+    return `/${parts[0]}/${parts[1]}/.../${parts.at(-1)}`
+  }
+
+  function readStoredPaths(storageKey: string): string[] {
+    if (typeof window === 'undefined' || !window.localStorage) return []
+    try {
+      const value = window.localStorage.getItem(storageKey)
+      if (!value) return []
+      const parsed = JSON.parse(value) as unknown
+      return Array.isArray(parsed)
+        ? parsed.filter((item): item is string => typeof item === 'string').slice(0, MAX_RECENT_PATHS)
+        : []
+    } catch {
+      return []
+    }
+  }
+
+  function writeStoredPaths(storageKey: string, paths: string[]): void {
+    if (typeof window === 'undefined' || !window.localStorage) return
+    window.localStorage.setItem(storageKey, JSON.stringify(paths))
+  }
+</script>
diff --git a/frontend/src/components/chat/ProjectContextSwitcher.test.tsx b/frontend/src/components/chat/ProjectContextSwitcher.test.svelte.ts
similarity index 86%
rename from frontend/src/components/chat/ProjectContextSwitcher.test.tsx
rename to frontend/src/components/chat/ProjectContextSwitcher.test.svelte.ts
index a2fe3f6..d981b2f 100644
--- a/frontend/src/components/chat/ProjectContextSwitcher.test.tsx
+++ b/frontend/src/components/chat/ProjectContextSwitcher.test.svelte.ts
@@ -1,8 +1,8 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react'
-import { ProjectContextSwitcher } from './ProjectContextSwitcher.js'
-import type { ProjectSummary } from '../../hooks/useAgUiChat.js'
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/svelte'
+import ProjectContextSwitcher from './ProjectContextSwitcher.svelte'
+import type { ProjectSummary } from '../../store/chatStore.svelte.js'
 
 const AVAILABLE_PROJECT: ProjectSummary = {
   id: 'repo-1',
@@ -24,7 +24,7 @@ const DEFAULT_PROPS = {
   visibleProjectIds: [AVAILABLE_PROJECT.id] as string[],
   onProjectSelect: vi.fn<(id: string) => void>(),
   onProjectVisibilityChange: vi.fn<(id: string, visible: boolean) => void>(),
-  onRemoveProject: vi.fn<(id: string) => Promise<void>>().mockResolvedValue(),
+  onRemoveProject: vi.fn<(id: string) => Promise<void>>().mockResolvedValue(undefined),
   onAddProject: vi
     .fn<(name: string, path: string) => Promise<ProjectSummary>>()
     .mockResolvedValue(AVAILABLE_PROJECT),
@@ -34,7 +34,7 @@ const DEFAULT_PROPS = {
 }
 
 function renderSwitcher(overrides: Partial<typeof DEFAULT_PROPS> = {}) {
-  return render(<ProjectContextSwitcher {...DEFAULT_PROPS} {...overrides} />)
+  return render(ProjectContextSwitcher, { props: { ...DEFAULT_PROPS, ...overrides } })
 }
 
 describe('ProjectContextSwitcher', () => {
@@ -46,6 +46,8 @@ describe('ProjectContextSwitcher', () => {
 
   afterEach(() => {
     vi.useRealTimers()
+    window.innerWidth = 1024
+    window.dispatchEvent(new Event('resize'))
   })
 
   it('renders a button with current project summary', () => {
@@ -118,15 +120,18 @@ describe('ProjectContextSwitcher', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /Open/i }))
     fireEvent.click(await screen.findByRole('button', { name: /Add Project/i }))
-    fireEvent.change(screen.getByRole('textbox', { name: /Project name/i }), {
+    await waitFor(() => screen.getByRole('textbox', { name: /Project name/i }))
+    fireEvent.input(screen.getByRole('textbox', { name: /Project name/i }), {
       target: { value: 'Draft Name' },
     })
-    fireEvent.change(screen.getByRole('combobox', { name: /Project path/i }), {
+    fireEvent.input(screen.getByRole('combobox', { name: /Project path/i }), {
       target: { value: '/tmp/project-draft' },
     })
 
     fireEvent.click(screen.getByRole('button', { name: /Hide Add Project/i }))
-    fireEvent.click(screen.getByRole('button', { name: /Add Project/i }))
+    await waitFor(() => screen.getByRole('button', { name: /^Add Project$/i }))
+    fireEvent.click(screen.getByRole('button', { name: /^Add Project$/i }))
+    await waitFor(() => screen.getByRole('textbox', { name: /Project name/i }))
 
     expect((screen.getByRole('textbox', { name: /Project name/i }) as HTMLInputElement).value).toBe(
       'Draft Name'
@@ -161,7 +166,8 @@ describe('ProjectContextSwitcher', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /Open/i }))
     fireEvent.click(await screen.findByRole('button', { name: /Add Project/i }))
-    fireEvent.change(screen.getByRole('combobox', { name: /Project path/i }), {
+    await waitFor(() => screen.getByRole('combobox', { name: /Project path/i }))
+    fireEvent.input(screen.getByRole('combobox', { name: /Project path/i }), {
       target: { value: '/work' },
     })
 
diff --git a/frontend/src/components/chat/ProjectContextSwitcher.tsx b/frontend/src/components/chat/ProjectContextSwitcher.tsx
deleted file mode 100644
index 01a983f..0000000
--- a/frontend/src/components/chat/ProjectContextSwitcher.tsx
+++ /dev/null
@@ -1,802 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { createPortal } from 'react-dom'
-import type { ProjectSummary } from '../../hooks/useAgUiChat.js'
-
-const RECENT_PATHS_STORAGE_KEY = 'acp.project-paths.recent'
-const DRAFT_PATH_STORAGE_KEY = 'acp.project-paths.draft-path'
-const DRAFT_NAME_STORAGE_KEY = 'acp.project-paths.draft-name'
-const MAX_RECENT_PATHS = 6
-
-export interface ProjectPathSuggestion {
-  name: string
-  path: string
-}
-
-interface ProjectContextSwitcherProps {
-  projects: ProjectSummary[]
-  selectedProjectId: string | null
-  visibleProjectIds: string[]
-  open?: boolean
-  onProjectSelect: (projectId: string) => void | Promise<void>
-  onOpenChange?: (open: boolean) => void
-  onProjectVisibilityChange: (projectId: string, visible: boolean) => void
-  onAddProject: (name: string, path: string) => Promise<ProjectSummary>
-  onRemoveProject: (projectId: string) => Promise<void>
-  onSuggestProjectPaths: (path: string) => Promise<ProjectPathSuggestion[]>
-}
-
-export function ProjectContextSwitcher({
-  projects,
-  selectedProjectId,
-  visibleProjectIds,
-  open,
-  onProjectSelect,
-  onOpenChange,
-  onProjectVisibilityChange,
-  onAddProject,
-  onRemoveProject,
-  onSuggestProjectPaths,
-}: ProjectContextSwitcherProps) {
-  const [uncontrolledManagerOpen, setUncontrolledManagerOpen] = useState(false)
-  const [addFormOpen, setAddFormOpen] = useState(false)
-  const [addName, setAddName] = useState(() => readStoredValue(DRAFT_NAME_STORAGE_KEY))
-  const [addPath, setAddPath] = useState(() => readStoredValue(DRAFT_PATH_STORAGE_KEY))
-  const [addError, setAddError] = useState<string | null>(null)
-  const [addSubmitting, setAddSubmitting] = useState(false)
-  const [removingProjectId, setRemovingProjectId] = useState<string | null>(null)
-  const [pathSuggestions, setPathSuggestions] = useState<ProjectPathSuggestion[]>([])
-  const [pathSuggestionsLoading, setPathSuggestionsLoading] = useState(false)
-  const [pathSuggestionsOpen, setPathSuggestionsOpen] = useState(false)
-  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1)
-  const [pathSuggestionError, setPathSuggestionError] = useState<string | null>(null)
-  const [isCompactViewport, setIsCompactViewport] = useState(() =>
-    typeof window !== 'undefined' ? window.innerWidth < 1024 : false
-  )
-  const [recentPaths, setRecentPaths] = useState<string[]>(() =>
-    readStoredPaths(RECENT_PATHS_STORAGE_KEY)
-  )
-  const suggestionListId = 'project-path-suggestions'
-  const visibleProjectSet = useMemo(() => new Set(visibleProjectIds), [visibleProjectIds])
-  const visibleProjectCount = visibleProjectIds.length
-  const selectedProject = useMemo(
-    () => projects.find((project) => project.id === selectedProjectId) ?? null,
-    [projects, selectedProjectId]
-  )
-  const activeSuggestion =
-    activeSuggestionIndex >= 0 ? (pathSuggestions[activeSuggestionIndex] ?? null) : null
-  const breadcrumbSegments = useMemo(() => buildBreadcrumbSegments(addPath), [addPath])
-  const pathQuickActions = useMemo(
-    () => buildPathQuickActions(addPath, recentPaths),
-    [addPath, recentPaths]
-  )
-  const pathInputValue = addPath.trim()
-  const pathInputHasSearchablePrefix = looksLikeSuggestionPathInput(pathInputValue)
-  const showSuggestionPanel = addFormOpen && pathInputValue.length > 0
-  const showSuggestionEmptyState =
-    showSuggestionPanel &&
-    !pathSuggestionsLoading &&
-    !pathSuggestionError &&
-    pathSuggestions.length === 0 &&
-    pathInputHasSearchablePrefix
-  const managerOpen = open ?? uncontrolledManagerOpen
-
-  const setManagerOpen = (nextOpen: boolean) => {
-    if (open === undefined) {
-      setUncontrolledManagerOpen(nextOpen)
-    }
-
-    onOpenChange?.(nextOpen)
-  }
-
-  const applySuggestion = (suggestion: ProjectPathSuggestion) => {
-    setAddPath(toTraversableSuggestionPath(suggestion.path))
-    setPathSuggestionsOpen(true)
-    setActiveSuggestionIndex(-1)
-  }
-
-  const applyPath = (path: string) => {
-    setAddPath(toTraversableSuggestionPath(path))
-    setPathSuggestionsOpen(true)
-    setActiveSuggestionIndex(-1)
-  }
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
-    const handleResize = () => {
-      setIsCompactViewport(window.innerWidth < 1024)
-    }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  useEffect(() => {
-    writeStoredValue(DRAFT_NAME_STORAGE_KEY, addName)
-  }, [addName])
-
-  useEffect(() => {
-    writeStoredValue(DRAFT_PATH_STORAGE_KEY, addPath)
-  }, [addPath])
-
-  useEffect(() => {
-    if (!addFormOpen) {
-      setPathSuggestions([])
-      setPathSuggestionsLoading(false)
-      setPathSuggestionsOpen(false)
-      setActiveSuggestionIndex(-1)
-      setPathSuggestionError(null)
-      return
-    }
-
-    const trimmedPath = addPath.trim()
-    if (!trimmedPath || !looksLikeSuggestionPathInput(trimmedPath)) {
-      setPathSuggestions([])
-      setPathSuggestionsLoading(false)
-      setPathSuggestionsOpen(false)
-      setActiveSuggestionIndex(-1)
-      setPathSuggestionError(null)
-      return
-    }
-
-    let cancelled = false
-    const timer = window.setTimeout(() => {
-      setPathSuggestionsLoading(true)
-      setPathSuggestionError(null)
-
-      void onSuggestProjectPaths(trimmedPath)
-        .then((nextSuggestions) => {
-          if (cancelled) {
-            return
-          }
-
-          setPathSuggestions(nextSuggestions)
-          setPathSuggestionsOpen(true)
-          setActiveSuggestionIndex(nextSuggestions.length > 0 ? 0 : -1)
-        })
-        .catch(() => {
-          if (cancelled) {
-            return
-          }
-
-          setPathSuggestions([])
-          setPathSuggestionsOpen(true)
-          setActiveSuggestionIndex(-1)
-          setPathSuggestionError('Unable to load folder suggestions right now.')
-        })
-        .finally(() => {
-          if (!cancelled) {
-            setPathSuggestionsLoading(false)
-          }
-        })
-    }, 140)
-
-    return () => {
-      cancelled = true
-      window.clearTimeout(timer)
-    }
-  }, [addFormOpen, addPath, onSuggestProjectPaths])
-
-  useEffect(() => {
-    if (activeSuggestionIndex >= pathSuggestions.length) {
-      setActiveSuggestionIndex(pathSuggestions.length > 0 ? 0 : -1)
-    }
-  }, [activeSuggestionIndex, pathSuggestions])
-
-  const handleAddSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const trimmedPath = addPath.trim()
-
-    if (!trimmedPath) {
-      setAddError('Path is required.')
-      return
-    }
-
-    const effectiveName =
-      addName.trim() || (trimmedPath.split('/').filter(Boolean).pop() ?? trimmedPath)
-
-    setAddError(null)
-    setAddSubmitting(true)
-
-    try {
-      const newProject = await onAddProject(effectiveName, trimmedPath)
-      const normalizedStoredPath = normalizeStoredPath(trimmedPath)
-      if (normalizedStoredPath) {
-        setRecentPaths((current) => {
-          const next = [
-            normalizedStoredPath,
-            ...current.filter((item) => item !== normalizedStoredPath),
-          ].slice(0, MAX_RECENT_PATHS)
-          writeStoredPaths(RECENT_PATHS_STORAGE_KEY, next)
-          return next
-        })
-      }
-
-      setAddName('')
-      setAddPath('')
-      setAddFormOpen(false)
-      setPathSuggestions([])
-      setPathSuggestionsOpen(false)
-      setActiveSuggestionIndex(-1)
-      onProjectVisibilityChange(newProject.id, true)
-      await onProjectSelect(newProject.id)
-    } catch {
-      setAddError('Failed to add project. Check the name and path and try again.')
-    } finally {
-      setAddSubmitting(false)
-    }
-  }
-
-  const addProjectForm = (
-    <>
-      <div>
-        <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-          Add Project
-        </p>
-        <p className="mt-1 text-sm text-slate-300">
-          Register another repository for chat and explorer context.
-        </p>
-      </div>
-
-      <form
-        aria-label="Add project form"
-        onSubmit={(e) => void handleAddSubmit(e)}
-        className="mt-4 space-y-3"
-      >
-        <input
-          type="text"
-          aria-label="Project name"
-          placeholder="Project name"
-          value={addName}
-          onChange={(e) => setAddName(e.target.value)}
-          disabled={addSubmitting}
-          className="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
-        />
-        <input
-          type="text"
-          aria-label="Project path"
-          role="combobox"
-          aria-expanded={pathSuggestionsOpen}
-          aria-controls={suggestionListId}
-          aria-activedescendant={
-            activeSuggestion ? buildSuggestionId(activeSuggestion.path) : undefined
-          }
-          aria-autocomplete="list"
-          placeholder="/absolute/path/to/project"
-          value={addPath}
-          onChange={(e) => {
-            setAddPath(e.target.value)
-            setPathSuggestionsOpen(true)
-          }}
-          onFocus={() => {
-            if (pathSuggestions.length > 0 || pathSuggestionError) {
-              setPathSuggestionsOpen(true)
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              setPathSuggestionsOpen(false)
-              setActiveSuggestionIndex(-1)
-              return
-            }
-
-            if (pathSuggestions.length === 0) {
-              return
-            }
-
-            if (e.key === 'ArrowDown') {
-              e.preventDefault()
-              setPathSuggestionsOpen(true)
-              setActiveSuggestionIndex((current) =>
-                current < pathSuggestions.length - 1 ? current + 1 : 0
-              )
-              return
-            }
-
-            if (e.key === 'ArrowUp') {
-              e.preventDefault()
-              setPathSuggestionsOpen(true)
-              setActiveSuggestionIndex((current) =>
-                current > 0 ? current - 1 : pathSuggestions.length - 1
-              )
-              return
-            }
-
-            if (e.key === 'Enter' && pathSuggestionsOpen && activeSuggestion) {
-              e.preventDefault()
-              applySuggestion(activeSuggestion)
-            }
-          }}
-          disabled={addSubmitting}
-          className="w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 outline-none focus:border-teal-500"
-        />
-        <p className="text-[11px] leading-5 text-slate-500">
-          Type an absolute path like /home/vries/projects or ~/code. Suggestions appear below when
-          folders match.
-        </p>
-        {breadcrumbSegments.length > 0 ? (
-          <div className="flex flex-wrap gap-1">
-            {breadcrumbSegments.map((segment) => (
-              <button
-                key={segment.path}
-                type="button"
-                onClick={() => applyPath(segment.path)}
-                className="rounded-full border border-white/10 bg-slate-950/70 px-2.5 py-1 text-[11px] text-slate-300 transition hover:border-teal-400/30 hover:text-teal-200"
-              >
-                {segment.label}
-              </button>
-            ))}
-          </div>
-        ) : null}
-        {pathQuickActions.length > 0 ? (
-          <div className="grid gap-2 sm:grid-cols-2">
-            {pathQuickActions.map((group) => (
-              <div
-                key={group.label}
-                className="rounded-xl border border-white/8 bg-slate-950/50 p-2"
-              >
-                <div className="mb-2 flex items-center justify-between">
-                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
-                    {group.label}
-                  </p>
-                </div>
-                <div className="flex flex-wrap gap-1">
-                  {group.paths.map((path) => (
-                    <button
-                      key={`${group.label}-${path}`}
-                      type="button"
-                      onClick={() => applyPath(path)}
-                      className="max-w-full truncate rounded-lg border border-white/10 bg-slate-900/80 px-2.5 py-1.5 text-left text-[11px] text-slate-300 transition hover:border-teal-400/30 hover:text-teal-200"
-                      title={path}
-                    >
-                      {compactPathLabel(path)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : null}
-        {pathSuggestionsLoading ? (
-          <p className="text-[11px] text-slate-500">Loading suggestions...</p>
-        ) : null}
-        {showSuggestionPanel && !pathInputHasSearchablePrefix ? (
-          <div className="rounded-xl border border-dashed border-white/10 bg-slate-950/50 px-3 py-3 text-[11px] leading-5 text-slate-500">
-            Start with / or ~/ to browse folders.
-          </div>
-        ) : null}
-        {pathSuggestionsOpen && pathSuggestions.length > 0 ? (
-          <div
-            id={suggestionListId}
-            role="listbox"
-            aria-label="Path suggestions"
-            className="max-h-72 overflow-y-auto rounded-xl border border-teal-500/20 bg-[linear-gradient(180deg,rgba(8,15,24,0.98),rgba(5,10,18,0.98))] p-2 shadow-[0_18px_40px_rgba(2,6,23,0.4)]"
-          >
-            <div className="mb-2 flex items-center justify-between px-1">
-              <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
-                Path suggestions
-              </p>
-              <p className="text-[10px] text-slate-600">Arrow keys · Enter</p>
-            </div>
-            <div className="space-y-1">
-              {pathSuggestions.map((suggestion, index) => (
-                <button
-                  key={suggestion.path}
-                  id={buildSuggestionId(suggestion.path)}
-                  type="button"
-                  role="option"
-                  aria-selected={index === activeSuggestionIndex}
-                  onMouseDown={(e) => e.preventDefault()}
-                  onMouseEnter={() => setActiveSuggestionIndex(index)}
-                  onClick={() => applySuggestion(suggestion)}
-                  className={[
-                    'flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition',
-                    index === activeSuggestionIndex
-                      ? 'border-teal-400/40 bg-teal-500/10 text-slate-50 shadow-[inset_0_0_0_1px_rgba(45,212,191,0.08)]'
-                      : 'border-transparent bg-slate-900/70 text-slate-200 hover:border-white/8 hover:bg-slate-900',
-                  ].join(' ')}
-                >
-                  <span className="flex min-w-0 items-center gap-3">
-                    <span className="rounded-md border border-teal-500/20 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-teal-200">
-                      Dir
-                    </span>
-                    <span className="truncate">{suggestion.name}</span>
-                  </span>
-                  <span className="ml-3 truncate text-[11px] text-slate-500">
-                    {toTraversableSuggestionPath(suggestion.path)}
-                  </span>
-                </button>
-              ))}
-            </div>
-          </div>
-        ) : null}
-        {pathSuggestionsOpen && pathSuggestionError ? (
-          <div className="rounded-xl border border-rose-500/20 bg-rose-500/10 px-3 py-3 text-[11px] leading-5 text-rose-200">
-            {pathSuggestionError}
-          </div>
-        ) : null}
-        {showSuggestionEmptyState ? (
-          <div className="rounded-xl border border-dashed border-white/10 bg-slate-950/50 px-3 py-3 text-[11px] leading-5 text-slate-500">
-            No matching folders found for {pathInputValue}.
-          </div>
-        ) : null}
-        {addError ? (
-          <p role="alert" className="text-[11px] text-rose-400">
-            {addError}
-          </p>
-        ) : null}
-        <button
-          type="submit"
-          disabled={addSubmitting}
-          className="w-full rounded-lg border border-teal-500/30 bg-teal-500/10 px-3 py-2 text-sm font-medium text-teal-200 hover:bg-teal-500/20 disabled:opacity-50"
-        >
-          {addSubmitting ? 'Adding…' : 'Add project'}
-        </button>
-      </form>
-    </>
-  )
-
-  return (
-    <>
-      <button
-        type="button"
-        aria-label="Open project manager"
-        onClick={() => setManagerOpen(true)}
-        className="flex items-center justify-between rounded-xl border border-white/10 bg-slate-900/80 px-3 py-3 text-left transition hover:border-white/15 hover:bg-slate-900"
-      >
-        <span>
-          <span className="block text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-            Projects
-          </span>
-          <span className="mt-1 block text-sm font-semibold text-slate-50">
-            {selectedProject?.name ?? 'Manage projects'}
-          </span>
-          <span className="mt-1 block text-[11px] text-slate-400">
-            {visibleProjectCount} visible in chats
-          </span>
-        </span>
-        <span className="rounded-full border border-white/10 bg-slate-950 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">
-          Open
-        </span>
-      </button>
-
-      {managerOpen && typeof document !== 'undefined'
-        ? createPortal(
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/75 px-4 py-6 backdrop-blur-sm sm:px-6 lg:px-10">
-              <div className="flex h-full max-h-[min(88vh,920px)] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#0a0f17] shadow-[0_30px_120px_rgba(2,6,23,0.65)]">
-                <div className="flex flex-wrap items-start justify-between gap-3 border-b border-white/8 px-5 py-4">
-                  <div className="min-w-0">
-                    <p className="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-                      Projects
-                    </p>
-                    <h2 className="mt-2 font-[family:var(--font-display)] text-2xl text-slate-50">
-                      Manage Project Views
-                    </h2>
-                    <p className="mt-2 text-sm text-slate-400">
-                      Show or hide projects in the chat rail, choose the current workspace, and add
-                      new repositories.
-                    </p>
-                  </div>
-                  <div className="flex shrink-0 flex-wrap items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setAddFormOpen((current) => !current)
-                        setAddError(null)
-                      }}
-                      className="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
-                    >
-                      {addFormOpen ? 'Hide Add Project' : 'Add Project'}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setManagerOpen(false)}
-                      className="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
-                    >
-                      Close
-                    </button>
-                  </div>
-                </div>
-
-                <div
-                  className={[
-                    'grid min-h-0 flex-1 gap-0 overflow-hidden',
-                    addFormOpen
-                      ? 'lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]'
-                      : 'lg:grid-cols-[minmax(0,1fr)]',
-                  ].join(' ')}
-                >
-                  <section className="min-h-0 overflow-y-auto border-b border-white/8 px-5 py-4 lg:border-b-0 lg:border-r">
-                    <div className="mb-4 flex items-center justify-between">
-                      <div>
-                        <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                          Session Rail
-                        </p>
-                        <p className="mt-1 text-sm text-slate-300">
-                          Choose which projects appear in chats.
-                        </p>
-                      </div>
-                      <span className="rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
-                        {visibleProjectCount}/{projects.length}
-                      </span>
-                    </div>
-
-                    <div className="space-y-2">
-                      {projects.map((project) => {
-                        const visible = visibleProjectSet.has(project.id)
-                        const current = project.id === selectedProjectId
-                        const selectable = project.status === 'available'
-
-                        return (
-                          <div
-                            key={project.id}
-                            className="rounded-xl border border-white/8 bg-slate-900/55 px-3 py-3"
-                          >
-                            <div className="flex items-start justify-between gap-3">
-                              <div className="min-w-0">
-                                <div className="flex flex-wrap items-center gap-2">
-                                  <p className="truncate text-sm font-semibold text-slate-50">
-                                    {project.name}
-                                  </p>
-                                  {current ? (
-                                    <span className="rounded-full border border-teal-500/30 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
-                                      Current
-                                    </span>
-                                  ) : null}
-                                  <span className={buildProjectStatusClassName(project.status)}>
-                                    {describeProjectStatus(project.status)}
-                                  </span>
-                                </div>
-                                <p className="mt-2 break-all text-[11px] leading-5 text-slate-400">
-                                  {project.path}
-                                </p>
-                              </div>
-                              <button
-                                type="button"
-                                onClick={() => onProjectVisibilityChange(project.id, !visible)}
-                                className={[
-                                  'shrink-0 rounded-lg border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em]',
-                                  visible
-                                    ? 'border-white/10 bg-slate-950 text-slate-300 hover:bg-slate-900'
-                                    : 'border-amber-500/25 bg-amber-500/10 text-amber-200 hover:bg-amber-500/15',
-                                ].join(' ')}
-                              >
-                                {visible ? 'Shown' : 'Hidden'}
-                              </button>
-                            </div>
-
-                            <div className="mt-3 flex items-center justify-between gap-3 border-t border-white/6 pt-3">
-                              <p className="text-[11px] text-slate-500">
-                                {visible
-                                  ? 'Visible in the session viewer.'
-                                  : 'Hidden from the session viewer.'}
-                              </p>
-                              <div className="flex items-center gap-2">
-                                <button
-                                  type="button"
-                                  onClick={() => {
-                                    setRemovingProjectId(project.id)
-                                    void onRemoveProject(project.id).finally(() => {
-                                      setRemovingProjectId((currentId) =>
-                                        currentId === project.id ? null : currentId
-                                      )
-                                    })
-                                  }}
-                                  disabled={removingProjectId === project.id}
-                                  className="rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-200 hover:bg-rose-500/15 disabled:cursor-not-allowed disabled:opacity-50"
-                                >
-                                  {removingProjectId === project.id ? 'Removing' : 'Remove'}
-                                </button>
-                                <button
-                                  type="button"
-                                  disabled={!selectable || current}
-                                  onClick={() => void onProjectSelect(project.id)}
-                                  className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200 hover:bg-slate-900 disabled:cursor-not-allowed disabled:text-slate-500"
-                                >
-                                  {current ? 'Selected' : 'Use'}
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </section>
-
-                  {addFormOpen && !isCompactViewport ? (
-                    <section className="min-h-0 overflow-y-auto px-5 py-4">
-                      {addProjectForm}
-                    </section>
-                  ) : null}
-                </div>
-              </div>
-            </div>,
-            document.body
-          )
-        : null}
-
-      {managerOpen && addFormOpen && isCompactViewport && typeof document !== 'undefined'
-        ? createPortal(
-            <div className="fixed inset-0 z-[60] bg-slate-950/82 px-3 py-3 backdrop-blur-sm sm:px-6 sm:py-6">
-              <div
-                data-testid="mobile-add-project-modal"
-                className="mx-auto flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-[1.75rem] border border-white/10 bg-[#0a0f17] shadow-[0_30px_120px_rgba(2,6,23,0.75)]"
-              >
-                <div className="flex items-start justify-between gap-4 border-b border-white/8 px-4 py-4 sm:px-5">
-                  <div>
-                    <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                      Add Project
-                    </p>
-                    <p className="mt-1 text-sm text-slate-300">
-                      Use a focused form so the keyboard does not cover the inputs.
-                    </p>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setAddFormOpen(false)}
-                    className="rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800"
-                  >
-                    Done
-                  </button>
-                </div>
-
-                <section className="min-h-0 flex-1 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
-                  {addProjectForm}
-                </section>
-              </div>
-            </div>,
-            document.body
-          )
-        : null}
-    </>
-  )
-}
-
-function buildProjectStatusClassName(status: ProjectSummary['status']): string {
-  if (status === 'available') {
-    return 'rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-200'
-  }
-
-  return 'rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400'
-}
-
-function describeProjectStatus(status: ProjectSummary['status']): string {
-  if (status === 'available') {
-    return status
-  }
-
-  return status === 'missing' ? 'path not found' : 'path is invalid'
-}
-
-function toTraversableSuggestionPath(path: string): string {
-  return path === '/' ? path : `${path}/`
-}
-
-function buildSuggestionId(path: string): string {
-  return `project-path-suggestion-${path.replace(/[^a-zA-Z0-9_-]+/g, '-')}`
-}
-
-function buildBreadcrumbSegments(path: string): Array<{ label: string; path: string }> {
-  const trimmed = path.trim()
-  if (!trimmed.startsWith('/')) {
-    return []
-  }
-
-  const normalized = trimmed === '/' ? '/' : trimmed.replace(/\/+$/, '')
-  if (normalized === '/') {
-    return [{ label: '/', path: '/' }]
-  }
-
-  const parts = normalized.split('/').filter(Boolean)
-  const segments = [{ label: '/', path: '/' }]
-  let current = ''
-
-  for (const part of parts) {
-    current = `${current}/${part}`
-    segments.push({ label: part, path: current })
-  }
-
-  return segments
-}
-
-function buildPathQuickActions(
-  currentPath: string,
-  recentPaths: string[]
-): Array<{ label: string; paths: string[] }> {
-  const current = normalizeStoredPath(currentPath)
-  const groups = [{ label: 'Recent', paths: recentPaths.filter((path) => path !== current) }]
-
-  return groups.filter((group) => group.paths.length > 0)
-}
-
-function normalizeStoredPath(path: string): string {
-  const trimmed = path.trim()
-  if (!looksLikeSuggestionPathInput(trimmed)) {
-    return ''
-  }
-
-  if (trimmed === '~') {
-    return '~'
-  }
-
-  return trimmed === '/' ? '/' : trimmed.replace(/\/+$/, '')
-}
-
-function looksLikeSuggestionPathInput(path: string): boolean {
-  return path.startsWith('/') || path === '~' || path.startsWith('~/')
-}
-
-function readStoredValue(storageKey: string): string {
-  if (typeof window === 'undefined' || !window.localStorage) {
-    return ''
-  }
-
-  return window.localStorage.getItem(storageKey) ?? ''
-}
-
-function writeStoredValue(storageKey: string, value: string): void {
-  if (typeof window === 'undefined' || !window.localStorage) {
-    return
-  }
-
-  if (!value) {
-    window.localStorage.removeItem(storageKey)
-    return
-  }
-
-  window.localStorage.setItem(storageKey, value)
-}
-
-function compactPathLabel(path: string): string {
-  if (path === '/' || path === '~') {
-    return path
-  }
-
-  const trimmed = path.replace(/\/+$/, '')
-  const parts = trimmed.split('/').filter(Boolean)
-  if (path.startsWith('~/')) {
-    const homeParts = path.slice(2).replace(/\/+$/, '').split('/').filter(Boolean)
-    if (homeParts.length <= 2) {
-      return `~/${homeParts.join('/')}`
-    }
-
-    return `~/${homeParts[0]}/.../${homeParts.at(-1)}`
-  }
-
-  if (parts.length <= 3) {
-    return path
-  }
-
-  return `/${parts[0]}/${parts[1]}/.../${parts.at(-1)}`
-}
-
-function readStoredPaths(storageKey: string): string[] {
-  if (typeof window === 'undefined' || !window.localStorage) {
-    return []
-  }
-
-  try {
-    const value = window.localStorage.getItem(storageKey)
-    if (!value) {
-      return []
-    }
-
-    const parsed = JSON.parse(value) as unknown
-    return Array.isArray(parsed)
-      ? parsed.filter((item): item is string => typeof item === 'string').slice(0, MAX_RECENT_PATHS)
-      : []
-  } catch {
-    return []
-  }
-}
-
-function writeStoredPaths(storageKey: string, paths: string[]): void {
-  if (typeof window === 'undefined' || !window.localStorage) {
-    return
-  }
-
-  window.localStorage.setItem(storageKey, JSON.stringify(paths))
-}
diff --git a/frontend/src/components/chat/ProjectWorkspacePanel.svelte b/frontend/src/components/chat/ProjectWorkspacePanel.svelte
new file mode 100644
index 0000000..63486d0
--- /dev/null
+++ b/frontend/src/components/chat/ProjectWorkspacePanel.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+  import type { ProjectSummary } from '../../store/chatStore.svelte.js'
+
+  export interface ProjectTreeEntry {
+    name: string
+    path: string
+    type: 'file' | 'directory'
+    hasChildren: boolean
+  }
+
+  interface Props {
+    projects: ProjectSummary[]
+    selectedProjectId: string | null
+    onProjectSelect: (projectId: string) => void | Promise<void>
+    activeAgentCount?: number
+    showProjectPicker?: boolean
+    tree: ProjectTreeEntry[]
+    treePath: string | null
+    treeLoading: boolean
+    treeError: string | null
+    expandedPaths: string[]
+    onToggleFolder: (path: string) => void | Promise<void>
+    selectedEntryPath: string | null
+    onSelectEntry: (path: string | null) => void
+  }
+
+  const {
+    projects,
+    selectedProjectId,
+    onProjectSelect,
+    activeAgentCount = 0,
+    showProjectPicker = true,
+    tree,
+    treePath,
+    treeLoading,
+    treeError,
+    expandedPaths,
+    onToggleFolder,
+    selectedEntryPath,
+    onSelectEntry,
+  }: Props = $props()
+
+  let mobileOpen = $state(false)
+  const panelId = 'project-workspace-panel'
+
+  const selectedProject = $derived(projects.find((p) => p.id === selectedProjectId) ?? null)
+  const expanded = $derived(new Set(expandedPaths))
+
+  function buildProjectOptionLabel(project: ProjectSummary, agentCount: number): string {
+    if (project.status !== 'available') return `${project.name} — ${project.status}`
+    if (agentCount === 0) return `${project.name} — no agent online`
+    return `${project.name} - ${project.path}`
+  }
+
+  function buildProjectStatusClassName(status: ProjectSummary['status']): string {
+    if (status === 'available') {
+      return 'rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-200'
+    }
+    return 'rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400'
+  }
+</script>
+
+{#snippet emptyPanel(title: string, description: string, tone: 'default' | 'error' = 'default')}
+  <div
+    class={[
+      'mt-4 rounded-xl border px-4 py-5 text-sm',
+      tone === 'error'
+        ? 'border-rose-500/20 bg-rose-500/10 text-rose-100'
+        : 'border-dashed border-white/10 bg-slate-950/60 text-slate-400',
+    ].join(' ')}
+  >
+    <p class="font-medium text-slate-50">{title}</p>
+    <p class="mt-2 leading-6">{description}</p>
+  </div>
+{/snippet}
+
+<button
+  type="button"
+  onclick={() => (mobileOpen = !mobileOpen)}
+  aria-expanded={mobileOpen}
+  aria-controls={panelId}
+  class="mx-4 mt-3 inline-flex items-center justify-between rounded-xl border border-white/10 bg-slate-950/80 px-4 py-3 text-left text-slate-100 shadow-[0_18px_40px_rgba(2,6,23,0.32)] xl:hidden"
+>
+  <span>
+    <span class="block text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+      Workspace
+    </span>
+    <span class="mt-1 block text-sm font-medium text-slate-50">
+      {selectedProject?.name ?? 'Choose a project'}
+    </span>
+  </span>
+  <span class="text-xs text-slate-400">{mobileOpen ? 'Hide' : 'Show'}</span>
+</button>
+
+<aside
+  id={panelId}
+  data-testid="chat-context-panel"
+  class={[
+    mobileOpen ? 'flex' : 'hidden',
+    'min-h-0 flex-col border-l border-white/8 bg-slate-950/82 p-4 text-slate-100 shadow-[inset_1px_0_0_rgba(148,163,184,0.08)] backdrop-blur xl:flex',
+  ].join(' ')}
+>
+  <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Workspace</p>
+  <h2 class="mt-2 font-[family:var(--font-display)] text-2xl leading-tight text-slate-50">
+    Project Context
+  </h2>
+  <p class="mt-3 text-sm leading-6 text-slate-400">
+    Pick the repository the agent should work in, then browse a read-only folder tree.
+  </p>
+
+  {#if showProjectPicker}
+    <div class="mt-5 rounded-xl border border-white/10 bg-slate-900/80 p-3">
+      <label class="block">
+        <span class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+          Active Project
+        </span>
+        <select
+          value={selectedProjectId ?? ''}
+          onchange={(event) => void onProjectSelect((event.target as HTMLSelectElement).value)}
+          aria-label="Active project"
+          class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2.5 text-sm text-slate-100 outline-none focus:border-teal-500"
+        >
+          <option value="" disabled>
+            {projects.length === 0 ? 'No projects configured' : 'Select a project'}
+          </option>
+          {#each projects as project (project.id)}
+            <option value={project.id} disabled={project.status !== 'available'}>
+              {buildProjectOptionLabel(project, activeAgentCount)}
+            </option>
+          {/each}
+        </select>
+      </label>
+
+      {#if selectedProject}
+        <div class="mt-3 rounded-lg border border-white/8 bg-slate-950/70 px-3 py-3">
+          <div class="flex items-center justify-between gap-3">
+            <p class="truncate text-sm font-semibold text-slate-50">{selectedProject.name}</p>
+            <span class={buildProjectStatusClassName(selectedProject.status)}>
+              {selectedProject.status}
+            </span>
+          </div>
+          <p class="mt-2 break-all text-[11px] leading-5 text-slate-400">{selectedProject.path}</p>
+        </div>
+      {/if}
+    </div>
+  {:else if selectedProject}
+    <div class="mt-5 rounded-xl border border-white/10 bg-slate-900/80 p-3">
+      <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+        Current Project
+      </p>
+      <div class="mt-3 rounded-lg border border-white/8 bg-slate-950/70 px-3 py-3">
+        <div class="flex items-center justify-between gap-3">
+          <p class="truncate text-sm font-semibold text-slate-50">{selectedProject.name}</p>
+          <span class={buildProjectStatusClassName(selectedProject.status)}>
+            {selectedProject.status}
+          </span>
+        </div>
+        <p class="mt-2 break-all text-[11px] leading-5 text-slate-400">{selectedProject.path}</p>
+      </div>
+    </div>
+  {/if}
+
+  <section class="mt-4 flex min-h-0 flex-1 flex-col rounded-xl border border-white/10 bg-slate-900/70 p-3">
+    <div class="flex items-center justify-between gap-3">
+      <div>
+        <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Explorer</p>
+        <p class="mt-1 text-sm text-slate-300">
+          {treePath ? `Inside ${treePath}` : 'Root tree'}
+        </p>
+      </div>
+      <div class="text-[11px] text-slate-500">
+        {treeLoading ? 'Loading...' : `${tree.length} items`}
+      </div>
+    </div>
+
+    {#if projects.length === 0}
+      {@render emptyPanel('No projects configured', 'The backend will create a starter config automatically, then use the current repo as the default workspace.')}
+    {:else if !selectedProjectId}
+      {@render emptyPanel('Choose a project', 'The chat session and folder explorer stay scoped to the selected repository.')}
+    {:else if selectedProject?.status !== 'available'}
+      {@render emptyPanel('Project unavailable', 'This entry is configured, but its path is missing or invalid on disk right now.')}
+    {:else if treeError}
+      {@render emptyPanel('Explorer unavailable', treeError, 'error')}
+    {:else if tree.length === 0 && !treeLoading}
+      {@render emptyPanel('Folder is empty', 'This location has no visible files yet.')}
+    {:else}
+      <div class="mt-4 min-h-0 flex-1 overflow-y-auto">
+        <div class="space-y-1">
+          {#each tree as entry (entry.path)}
+            {@const isDirectory = entry.type === 'directory'}
+            {@const isExpanded = expanded.has(entry.path)}
+            {@const isSelected = selectedEntryPath === entry.path}
+            <button
+              type="button"
+              onclick={() => {
+                onSelectEntry(entry.path)
+                if (isDirectory) void onToggleFolder(entry.path)
+              }}
+              class={[
+                'flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition',
+                isSelected
+                  ? 'border-teal-500/40 bg-teal-500/10 text-slate-50'
+                  : 'border-transparent bg-transparent text-slate-300 hover:border-white/8 hover:bg-slate-950/70',
+              ].join(' ')}
+            >
+              <span class="w-4 text-center text-xs text-slate-500">
+                {isDirectory ? (isExpanded ? '-' : '+') : '·'}
+              </span>
+              <span class="text-sm">{isDirectory ? 'DIR' : 'FILE'}</span>
+              <span class="min-w-0 flex-1 truncate text-sm">{entry.name}</span>
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </section>
+</aside>
diff --git a/frontend/src/components/chat/ProjectWorkspacePanel.test.tsx b/frontend/src/components/chat/ProjectWorkspacePanel.test.svelte.ts
similarity index 89%
rename from frontend/src/components/chat/ProjectWorkspacePanel.test.tsx
rename to frontend/src/components/chat/ProjectWorkspacePanel.test.svelte.ts
index 1196f2e..77fa14b 100644
--- a/frontend/src/components/chat/ProjectWorkspacePanel.test.tsx
+++ b/frontend/src/components/chat/ProjectWorkspacePanel.test.svelte.ts
@@ -1,9 +1,8 @@
 // @vitest-environment happy-dom
-import type React from 'react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, fireEvent, cleanup, within } from '@testing-library/react'
-import { ProjectWorkspacePanel } from './ProjectWorkspacePanel.js'
-import type { ProjectSummary } from '../../hooks/useAgUiChat.js'
+import { render, screen, fireEvent, cleanup, within } from '@testing-library/svelte'
+import ProjectWorkspacePanel from './ProjectWorkspacePanel.svelte'
+import type { ProjectSummary } from '../../store/chatStore.svelte.js'
 
 const AVAILABLE_PROJECT: ProjectSummary = {
   id: 'repo-1',
@@ -23,7 +22,7 @@ const DEFAULT_PROPS = {
   projects: [AVAILABLE_PROJECT, MISSING_PROJECT] as ProjectSummary[],
   selectedProjectId: AVAILABLE_PROJECT.id as string | null,
   onProjectSelect: vi.fn<(id: string) => void>(),
-  tree: [] as [],
+  tree: [] as unknown[],
   treePath: null as string | null,
   treeLoading: false,
   treeError: null as string | null,
@@ -33,8 +32,10 @@ const DEFAULT_PROPS = {
   onSelectEntry: vi.fn<(path: string | null) => void>(),
 }
 
-function renderPanel(overrides: Partial<React.ComponentProps<typeof ProjectWorkspacePanel>> = {}) {
-  return render(<ProjectWorkspacePanel {...DEFAULT_PROPS} {...overrides} />)
+function renderPanel(
+  overrides: Partial<typeof DEFAULT_PROPS> & { showProjectPicker?: boolean } = {}
+) {
+  return render(ProjectWorkspacePanel, { props: { ...DEFAULT_PROPS, ...overrides } })
 }
 
 describe('ProjectWorkspacePanel', () => {
@@ -89,7 +90,7 @@ describe('ProjectWorkspacePanel', () => {
 
   it('renders tree entries and toggles folders', () => {
     renderPanel({
-      tree: [{ name: 'src', path: 'src', type: 'directory', hasChildren: true }],
+      tree: [{ name: 'src', path: 'src', type: 'directory', hasChildren: true }] as unknown[],
     })
 
     fireEvent.click(screen.getByRole('button', { name: /src/i }))
diff --git a/frontend/src/components/chat/ProjectWorkspacePanel.tsx b/frontend/src/components/chat/ProjectWorkspacePanel.tsx
deleted file mode 100644
index 10136cc..0000000
--- a/frontend/src/components/chat/ProjectWorkspacePanel.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { useMemo, useState } from 'react'
-import type { ProjectSummary } from '../../hooks/useAgUiChat.js'
-
-export interface ProjectTreeEntry {
-  name: string
-  path: string
-  type: 'file' | 'directory'
-  hasChildren: boolean
-}
-
-interface ProjectWorkspacePanelProps {
-  projects: ProjectSummary[]
-  selectedProjectId: string | null
-  onProjectSelect: (projectId: string) => void | Promise<void>
-  activeAgentCount?: number
-  showProjectPicker?: boolean
-  tree: ProjectTreeEntry[]
-  treePath: string | null
-  treeLoading: boolean
-  treeError: string | null
-  expandedPaths: string[]
-  onToggleFolder: (path: string) => void | Promise<void>
-  selectedEntryPath: string | null
-  onSelectEntry: (path: string | null) => void
-}
-
-export function ProjectWorkspacePanel({
-  projects,
-  selectedProjectId,
-  onProjectSelect,
-  activeAgentCount = 0,
-  showProjectPicker = true,
-  tree,
-  treePath,
-  treeLoading,
-  treeError,
-  expandedPaths,
-  onToggleFolder,
-  selectedEntryPath,
-  onSelectEntry,
-}: ProjectWorkspacePanelProps) {
-  const [mobileOpen, setMobileOpen] = useState(false)
-  const panelId = 'project-workspace-panel'
-  const selectedProject = useMemo(
-    () => projects.find((project) => project.id === selectedProjectId) ?? null,
-    [projects, selectedProjectId]
-  )
-  const expanded = new Set(expandedPaths)
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => setMobileOpen((current) => !current)}
-        aria-expanded={mobileOpen}
-        aria-controls={panelId}
-        className="mx-4 mt-3 inline-flex items-center justify-between rounded-xl border border-white/10 bg-slate-950/80 px-4 py-3 text-left text-slate-100 shadow-[0_18px_40px_rgba(2,6,23,0.32)] xl:hidden"
-      >
-        <span>
-          <span className="block text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-            Workspace
-          </span>
-          <span className="mt-1 block text-sm font-medium text-slate-50">
-            {selectedProject?.name ?? 'Choose a project'}
-          </span>
-        </span>
-        <span className="text-xs text-slate-400">{mobileOpen ? 'Hide' : 'Show'}</span>
-      </button>
-
-      <aside
-        id={panelId}
-        data-testid="chat-context-panel"
-        className={[
-          mobileOpen ? 'flex' : 'hidden',
-          'min-h-0 flex-col border-l border-white/8 bg-slate-950/82 p-4 text-slate-100 shadow-[inset_1px_0_0_rgba(148,163,184,0.08)] backdrop-blur xl:flex',
-        ].join(' ')}
-      >
-        <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-          Workspace
-        </p>
-        <h2 className="mt-2 font-[family:var(--font-display)] text-2xl leading-tight text-slate-50">
-          Project Context
-        </h2>
-        <p className="mt-3 text-sm leading-6 text-slate-400">
-          Pick the repository the agent should work in, then browse a read-only folder tree.
-        </p>
-
-        {showProjectPicker ? (
-          <div className="mt-5 rounded-xl border border-white/10 bg-slate-900/80 p-3">
-            <label className="block">
-              <span className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                Active Project
-              </span>
-              <select
-                value={selectedProjectId ?? ''}
-                onChange={(event) => void onProjectSelect(event.target.value)}
-                aria-label="Active project"
-                className="mt-2 w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2.5 text-sm text-slate-100 outline-none focus:border-teal-500"
-              >
-                <option value="" disabled>
-                  {projects.length === 0 ? 'No projects configured' : 'Select a project'}
-                </option>
-                {projects.map((project) => (
-                  <option
-                    key={project.id}
-                    value={project.id}
-                    disabled={project.status !== 'available'}
-                  >
-                    {buildProjectOptionLabel(project, activeAgentCount)}
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            {selectedProject ? (
-              <div className="mt-3 rounded-lg border border-white/8 bg-slate-950/70 px-3 py-3">
-                <div className="flex items-center justify-between gap-3">
-                  <p className="truncate text-sm font-semibold text-slate-50">
-                    {selectedProject.name}
-                  </p>
-                  <span className={buildProjectStatusClassName(selectedProject.status)}>
-                    {selectedProject.status}
-                  </span>
-                </div>
-                <p className="mt-2 break-all text-[11px] leading-5 text-slate-400">
-                  {selectedProject.path}
-                </p>
-              </div>
-            ) : null}
-          </div>
-        ) : selectedProject ? (
-          <div className="mt-5 rounded-xl border border-white/10 bg-slate-900/80 p-3">
-            <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-              Current Project
-            </p>
-            <div className="mt-3 rounded-lg border border-white/8 bg-slate-950/70 px-3 py-3">
-              <div className="flex items-center justify-between gap-3">
-                <p className="truncate text-sm font-semibold text-slate-50">
-                  {selectedProject.name}
-                </p>
-                <span className={buildProjectStatusClassName(selectedProject.status)}>
-                  {selectedProject.status}
-                </span>
-              </div>
-              <p className="mt-2 break-all text-[11px] leading-5 text-slate-400">
-                {selectedProject.path}
-              </p>
-            </div>
-          </div>
-        ) : null}
-
-        <section className="mt-4 flex min-h-0 flex-1 flex-col rounded-xl border border-white/10 bg-slate-900/70 p-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                Explorer
-              </p>
-              <p className="mt-1 text-sm text-slate-300">
-                {treePath ? `Inside ${treePath}` : 'Root tree'}
-              </p>
-            </div>
-            <div className="text-[11px] text-slate-500">
-              {treeLoading ? 'Loading...' : `${tree.length} items`}
-            </div>
-          </div>
-
-          {projects.length === 0 ? (
-            <EmptyPanel
-              title="No projects configured"
-              description="The backend will create a starter config automatically, then use the current repo as the default workspace."
-            />
-          ) : !selectedProjectId ? (
-            <EmptyPanel
-              title="Choose a project"
-              description="The chat session and folder explorer stay scoped to the selected repository."
-            />
-          ) : selectedProject?.status !== 'available' ? (
-            <EmptyPanel
-              title="Project unavailable"
-              description="This entry is configured, but its path is missing or invalid on disk right now."
-            />
-          ) : treeError ? (
-            <EmptyPanel title="Explorer unavailable" description={treeError} tone="error" />
-          ) : tree.length === 0 && !treeLoading ? (
-            <EmptyPanel
-              title="Folder is empty"
-              description="This location has no visible files yet."
-            />
-          ) : (
-            <div className="mt-4 min-h-0 flex-1 overflow-y-auto">
-              <div className="space-y-1">
-                {tree.map((entry) => {
-                  const isDirectory = entry.type === 'directory'
-                  const isExpanded = expanded.has(entry.path)
-                  const isSelected = selectedEntryPath === entry.path
-
-                  return (
-                    <button
-                      key={entry.path}
-                      type="button"
-                      onClick={() => {
-                        onSelectEntry(entry.path)
-                        if (isDirectory) {
-                          void onToggleFolder(entry.path)
-                        }
-                      }}
-                      className={[
-                        'flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition',
-                        isSelected
-                          ? 'border-teal-500/40 bg-teal-500/10 text-slate-50'
-                          : 'border-transparent bg-transparent text-slate-300 hover:border-white/8 hover:bg-slate-950/70',
-                      ].join(' ')}
-                    >
-                      <span className="w-4 text-center text-xs text-slate-500">
-                        {isDirectory ? (isExpanded ? '-' : '+') : '·'}
-                      </span>
-                      <span className="text-sm">{isDirectory ? 'DIR' : 'FILE'}</span>
-                      <span className="min-w-0 flex-1 truncate text-sm">{entry.name}</span>
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-        </section>
-      </aside>
-    </>
-  )
-}
-
-function buildProjectOptionLabel(project: ProjectSummary, activeAgentCount: number): string {
-  if (project.status !== 'available') {
-    return `${project.name} — ${project.status}`
-  }
-
-  if (activeAgentCount === 0) {
-    return `${project.name} — no agent online`
-  }
-
-  return `${project.name} - ${project.path}`
-}
-
-function buildProjectStatusClassName(status: ProjectSummary['status']): string {
-  if (status === 'available') {
-    return 'rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-200'
-  }
-
-  return 'rounded-full border border-white/10 bg-slate-900 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400'
-}
-
-interface EmptyPanelProps {
-  title: string
-  description: string
-  tone?: 'default' | 'error'
-}
-
-function EmptyPanel({ title, description, tone = 'default' }: EmptyPanelProps) {
-  return (
-    <div
-      className={[
-        'mt-4 rounded-xl border px-4 py-5 text-sm',
-        tone === 'error'
-          ? 'border-rose-500/20 bg-rose-500/10 text-rose-100'
-          : 'border-dashed border-white/10 bg-slate-950/60 text-slate-400',
-      ].join(' ')}
-    >
-      <p className="font-medium text-slate-50">{title}</p>
-      <p className="mt-2 leading-6">{description}</p>
-    </div>
-  )
-}
diff --git a/frontend/src/components/chat/ReasoningGroup.svelte b/frontend/src/components/chat/ReasoningGroup.svelte
new file mode 100644
index 0000000..a67264c
--- /dev/null
+++ b/frontend/src/components/chat/ReasoningGroup.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { marked } from 'marked'
+  import DOMPurify from 'isomorphic-dompurify'
+  import type { A2UIReasoningPayload } from './a2ui-types.js'
+
+  interface Props {
+    blocks: Array<{ kind: 'reasoning'; payload: A2UIReasoningPayload }>
+  }
+
+  const { blocks }: Props = $props()
+
+  let open = $state(false)
+
+  const latestTitle = $derived(
+    [...blocks].reverse().find((b) => b.payload.title?.trim())?.payload.title?.trim()
+  )
+
+  function renderMarkdown(content: string): string {
+    try {
+      const html = marked.parse(content, { async: false }) as string
+      return DOMPurify.sanitize(html)
+    } catch {
+      return content
+    }
+  }
+
+  function stripReasoningHeading(text: string, title?: string): string {
+    if (!title) return text
+    const normalizedTitle = title.trim()
+    const withBoldHeading = new RegExp(`^\\*\\*${escapeRegExp(normalizedTitle)}\\*\\*\\s*\n*`, 'i')
+    return text.replace(withBoldHeading, '').trimStart()
+  }
+
+  function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+</script>
+
+<div
+  class="rounded-xl border border-amber-500/20 bg-amber-500/8 px-3 py-2 text-xs text-amber-50"
+  data-testid="a2ui-reasoning-card"
+>
+  <button
+    type="button"
+    onclick={() => { open = !open }}
+    class="flex w-full items-center justify-between gap-3 text-left"
+  >
+    <div>
+      <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-amber-300">
+        Reasoning
+      </p>
+      <p class="mt-1 text-sm text-amber-50">
+        {latestTitle ?? 'Working through the request'}
+      </p>
+    </div>
+    <span class="rounded-full border border-amber-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-amber-200">
+      {open ? 'Hide' : `${blocks.length}`}
+    </span>
+  </button>
+
+  {#if open}
+    <div class="mt-3 space-y-3 border-t border-amber-500/10 pt-3">
+      {#each blocks as block, i (`${block.payload.title ?? 'reasoning'}-${i}`)}
+        <div class="space-y-2">
+          {#if blocks.length > 1 && block.payload.title && block.payload.title !== latestTitle}
+            <p class="text-xs font-semibold text-amber-200">{block.payload.title}</p>
+          {/if}
+          <div class="text-sm leading-6 text-amber-50/90">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html renderMarkdown(stripReasoningHeading(block.payload.text, block.payload.title))}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/components/chat/SessionList.stories.tsx b/frontend/src/components/chat/SessionList.stories.tsx
deleted file mode 100644
index 0d1f1d4..0000000
--- a/frontend/src/components/chat/SessionList.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { SessionList } from './SessionList.js'
-
-const denseSessions = Array.from({ length: 8 }, (_, index) => ({
-  id: `session-${index + 1}`,
-  title: index === 0 ? 'Inspect auth bug' : `Conversation ${index + 1}`,
-  updatedAt: `2026-03-1${Math.min(index + 1, 8)}T08:0${index}:00.000Z`,
-  agentId: 'copilot',
-  source: 'history' as const,
-  project: {
-    id: 'acp-frontend',
-    name: 'ACP Frontend',
-    path: '/home/vries/projects/acp-frontend',
-  },
-}))
-
-const meta = {
-  title: 'Chat/SessionList',
-  component: SessionList,
-  args: {
-    agents: [
-      {
-        id: 'copilot',
-        name: 'GitHub Copilot',
-        status: 'active',
-        command: 'copilot',
-        canResume: true,
-        canLoad: false,
-      },
-      {
-        id: 'gemini-cli',
-        name: 'Gemini CLI',
-        status: 'active',
-        command: 'gemini',
-        canResume: true,
-        canLoad: false,
-      },
-      {
-        id: 'claude-code',
-        name: 'Claude Code',
-        status: 'unavailable',
-        command: null,
-        canResume: false,
-        canLoad: false,
-      },
-    ],
-    sessions: denseSessions,
-    activeSessionId: 'session-1',
-    creatingSession: false,
-    onCreate: () => {},
-    onSelect: () => {},
-  },
-} satisfies Meta<typeof SessionList>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const DenseList: Story = {}
-
-export const Empty: Story = {
-  args: {
-    sessions: [],
-    activeSessionId: null,
-  },
-}
-
-export const Creating: Story = {
-  args: {
-    creatingSession: true,
-  },
-}
-
-export const MixedAgents: Story = {
-  args: {
-    sessions: [
-      ...denseSessions,
-      {
-        id: 'gemini-session-1',
-        title: 'Gemini compatibility notes',
-        updatedAt: '2026-03-18T11:20:00.000Z',
-        agentId: 'gemini-cli',
-        source: 'history' as const,
-        project: {
-          id: 'docs-site',
-          name: 'Docs Site',
-          path: '/home/vries/projects/docs-site',
-        },
-      },
-    ],
-  },
-}
diff --git a/frontend/src/components/chat/SessionList.svelte b/frontend/src/components/chat/SessionList.svelte
new file mode 100644
index 0000000..a516982
--- /dev/null
+++ b/frontend/src/components/chat/SessionList.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import type { AgentSummary, SessionSummary } from '../../store/chatStore.svelte.js'
+
+  interface Props {
+    agents: AgentSummary[]
+    sessions: SessionSummary[]
+    selectedProjectId?: string | null
+    activeSessionId: string | null
+    creatingSession: boolean
+    loading?: boolean
+    onCreate: (agentId: string) => void | Promise<void>
+    onSelect: (sessionId: string) => void | Promise<void>
+  }
+
+  const {
+    agents,
+    sessions,
+    selectedProjectId = null,
+    activeSessionId,
+    creatingSession,
+    loading = false,
+    onCreate,
+    onSelect,
+  }: Props = $props()
+
+  let pickerOpen = $state(false)
+  let collapsedProjects = $state<string[]>([])
+
+  const agentById = $derived(new Map(agents.map((a) => [a.id, a])))
+  const activeAgents = $derived(agents.filter((agent) => agent.status === 'active'))
+  const projectGroups = $derived(
+    buildProjectGroups({ agentById, sessions, activeSessionId, selectedProjectId })
+  )
+  const selectedProjectHasSessions = $derived(
+    selectedProjectId ? projectGroups.some((group) => group.id === selectedProjectId) : false
+  )
+
+  $effect(() => {
+    if (!selectedProjectId) return
+    const sid = selectedProjectId
+    collapsedProjects = untrack(() => collapsedProjects).filter((projectId) => projectId !== sid)
+  })
+
+  function handleAgentPick(agentId: string) {
+    pickerOpen = false
+    void onCreate(agentId)
+  }
+
+  function handleNewChat() {
+    if (activeAgents.length === 1) {
+      void onCreate(activeAgents[0]!.id)
+    } else {
+      pickerOpen = !pickerOpen
+    }
+  }
+
+  function toggleCollapsed(id: string) {
+    if (collapsedProjects.includes(id)) {
+      collapsedProjects = collapsedProjects.filter((p) => p !== id)
+    } else {
+      collapsedProjects = [...collapsedProjects, id]
+    }
+  }
+
+  // ---- pure helpers --------------------------------------------------------
+
+  interface ProjectGroup {
+    id: string
+    name: string
+    pathLabel: string
+    sessions: SessionSummary[]
+  }
+
+  function buildProjectGroups({
+    agentById: agMap,
+    sessions: sess,
+    activeSessionId: activeSid,
+    selectedProjectId: selPid,
+  }: {
+    agentById: Map<string, AgentSummary>
+    sessions: SessionSummary[]
+    activeSessionId: string | null
+    selectedProjectId: string | null
+  }): ProjectGroup[] {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const grouped = new Map<string, ProjectGroup>()
+    const visibleSessions = sess
+      .filter((session) => {
+        if (session.source === 'history') return true
+        return agMap.get(session.agentId)?.status !== 'disabled'
+      })
+      .sort((l, r) => r.updatedAt.localeCompare(l.updatedAt))
+
+    for (const session of visibleSessions) {
+      const projectId = session.project?.id ?? '__no_project__'
+      const group = grouped.get(projectId)
+      if (group) {
+        group.sessions.push(session)
+        continue
+      }
+      grouped.set(projectId, {
+        id: projectId,
+        name: session.project?.name ?? 'No project',
+        pathLabel: compactProjectPath(session.project?.path ?? 'No project path'),
+        sessions: [session],
+      })
+    }
+
+    return Array.from(grouped.values()).sort((l, r) => {
+      const ls = l.id === selPid ? 1 : 0
+      const rs = r.id === selPid ? 1 : 0
+      if (ls !== rs) return rs - ls
+      const la = l.sessions.some((s) => s.id === activeSid) ? 1 : 0
+      const ra = r.sessions.some((s) => s.id === activeSid) ? 1 : 0
+      if (la !== ra) return ra - la
+      return l.name.localeCompare(r.name)
+    })
+  }
+
+  function compactProjectPath(path: string): string {
+    const trimmed = path.trim()
+    if (trimmed.length <= 36) return trimmed
+    const parts = trimmed.split('/').filter(Boolean)
+    if (parts.length <= 3) return trimmed
+    return `/${parts[0]}/${parts[1]}/.../${parts.at(-1)}`
+  }
+
+  function formatUpdatedAt(updatedAt: string): string {
+    const date = new Date(updatedAt)
+    if (Number.isNaN(date.valueOf())) return 'just now'
+    return new Intl.DateTimeFormat('en', {
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    }).format(date)
+  }
+
+  function agentStatusLabel(status: AgentSummary['status']): string {
+    return status === 'active' ? 'online' : status === 'detected' ? 'detected' : 'offline'
+  }
+
+  function agentDotClass(status: AgentSummary['status']): string {
+    return status === 'active'
+      ? 'h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_4px_rgba(52,211,153,0.6)] flex-shrink-0'
+      : status === 'detected'
+        ? 'h-2 w-2 rounded-full bg-amber-400 flex-shrink-0'
+        : 'h-2 w-2 rounded-full bg-slate-600 flex-shrink-0'
+  }
+
+  function historyProviderLabel(agentId: string): string {
+    return agentId === 'copilot'
+      ? 'GitHub Copilot history'
+      : agentId === 'gemini-cli'
+        ? 'Gemini CLI history'
+        : agentId === 'opencode'
+          ? 'OpenCode history'
+          : `${agentId} history`
+  }
+</script>
+
+<aside
+  data-testid={loading ? undefined : 'chat-session-panel'}
+  class="flex min-h-[18rem] flex-col border-r border-white/8 bg-slate-950/84 p-4 text-slate-100 shadow-[inset_-1px_0_0_rgba(148,163,184,0.08)] backdrop-blur"
+>
+  <div class="flex items-start justify-between gap-3">
+    <div>
+      <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Sessions</p>
+      <h2 class="mt-2 font-[family:var(--font-display)] text-[2rem] leading-tight text-slate-50">Chats</h2>
+      <p class="mt-2 max-w-[14rem] text-xs leading-5 text-slate-400">
+        Grouped by project so you can scan workstreams without losing repo context.
+      </p>
+    </div>
+
+    <div class="relative">
+      <button
+        type="button"
+        onclick={handleNewChat}
+        disabled={creatingSession || activeAgents.length === 0}
+        aria-label={activeAgents.length > 1 ? 'New chat — pick agent' : 'New chat'}
+        aria-expanded={activeAgents.length > 1 ? pickerOpen : undefined}
+        aria-haspopup={activeAgents.length > 1 ? 'menu' : undefined}
+        class="inline-flex h-10 items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-slate-900/80 px-3.5 text-sm font-semibold text-slate-50 transition hover:border-white/15 hover:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-800 disabled:text-slate-500"
+      >
+        {creatingSession ? 'Opening…' : 'New'}
+        {#if activeAgents.length > 1 && !creatingSession}
+          <span class="text-slate-400" aria-hidden="true">{pickerOpen ? '▲' : '▼'}</span>
+        {/if}
+      </button>
+
+      {#if pickerOpen && activeAgents.length > 1}
+        <div
+          role="menu"
+          aria-label="Pick an agent for the new chat"
+          class="absolute right-0 top-full z-20 mt-2 w-52 rounded-2xl border border-white/10 bg-slate-900/95 p-1.5 shadow-xl"
+        >
+          {#each activeAgents as agent (agent.id)}
+            <button
+              role="menuitem"
+              type="button"
+              onclick={() => handleAgentPick(agent.id)}
+              class="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-slate-100 transition hover:bg-slate-800"
+            >
+              <span class={agentDotClass(agent.status)} aria-label={agentStatusLabel(agent.status)}></span>
+              {agent.name}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="mt-5 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+    {#if selectedProjectId && !selectedProjectHasSessions}
+      <div class="rounded-2xl border border-dashed border-teal-500/20 bg-teal-500/5 p-4 text-sm text-slate-300">
+        No chats in this project yet. Start a new session to open this workspace with the selected agent.
+      </div>
+    {/if}
+
+    {#if projectGroups.length === 0}
+      {#if loading}
+        <div class="flex flex-col gap-2" aria-label="Loading sessions" aria-busy="true">
+          {#each [0, 1, 2, 3] as i (i)}
+            <div class="animate-pulse rounded-2xl border border-white/8 bg-slate-900/55 px-3.5 py-3.5">
+              <div class="mb-2 h-2.5 w-24 rounded-full bg-slate-700/60"></div>
+              <div class="h-4 w-40 rounded-full bg-slate-700/40"></div>
+            </div>
+          {/each}
+        </div>
+      {:else}
+        <div class="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 p-4 text-sm text-slate-400">
+          {activeAgents.length === 0
+            ? 'No backends are ready yet. Start an adapter and reload to continue.'
+            : 'No chats yet.'}
+        </div>
+      {/if}
+    {:else}
+      {#each projectGroups as group (group.id)}
+        {@const collapsed = collapsedProjects.includes(group.id)}
+        {@const selected = group.id === selectedProjectId}
+        <section
+          class={`rounded-2xl border px-3.5 py-3.5 ${selected ? 'border-teal-500/30 bg-[linear-gradient(180deg,rgba(10,24,31,0.5),rgba(7,14,22,0.72))]' : 'border-white/8 bg-slate-950/35'}`}
+        >
+          <button
+            type="button"
+            onclick={() => toggleCollapsed(group.id)}
+            class="flex w-full items-start justify-between gap-3 text-left"
+          >
+            <div class="min-w-0">
+              <h3 class="truncate text-sm font-semibold text-slate-100">{group.name}</h3>
+              <p class="mt-1 truncate text-[11px] text-slate-500">{group.pathLabel}</p>
+            </div>
+            <div class="flex items-center gap-2">
+              {#if selected}
+                <span class="rounded-full border border-teal-500/25 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
+                  Current
+                </span>
+              {/if}
+              <span class="rounded-full border border-white/10 bg-slate-900/65 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+                {group.sessions.length}
+              </span>
+              <span class="text-xs text-slate-500" aria-hidden="true">{collapsed ? '+' : '-'}</span>
+            </div>
+          </button>
+
+          {#if !collapsed}
+            <div class="mt-3 flex flex-col gap-2">
+              {#each group.sessions as session (session.id)}
+                {@const active = session.id === activeSessionId}
+                {@const agent = agentById.get(session.agentId)}
+                {@const isHistory = session.source === 'history'}
+                <button
+                  type="button"
+                  onclick={() => void onSelect(session.id)}
+                  class={`rounded-2xl border px-3.5 py-3.5 text-left transition ${active ? 'border-teal-500/35 bg-[linear-gradient(180deg,rgba(10,28,34,0.92),rgba(7,19,28,0.96))] shadow-[inset_0_0_0_1px_rgba(45,212,191,0.08)]' : 'border-white/6 bg-slate-950/35 hover:border-white/10 hover:bg-slate-900/60'}`}
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-100">{session.title}</p>
+                    <div class="flex shrink-0 items-center gap-1.5">
+                      {#if session.source === 'history'}
+                        <span title="Read-only history session" class="rounded-full border border-slate-600/40 bg-slate-800/60 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+                          History
+                        </span>
+                      {:else}
+                        <span title="Active live session" class="rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-300">
+                          Live
+                        </span>
+                      {/if}
+                      {#if active}
+                        <span class="rounded-full border border-teal-500/25 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
+                          Active
+                        </span>
+                      {/if}
+                    </div>
+                  </div>
+                  {#if isHistory}
+                    <div class="mt-3 flex items-center gap-1.5">
+                      <span class="rounded-full border border-slate-600/35 bg-slate-800/55 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-300">
+                        {historyProviderLabel(session.agentId)}
+                      </span>
+                    </div>
+                  {:else}
+                    <div class="mt-3 flex items-center gap-1.5">
+                      <span class={agentDotClass(agent?.status ?? 'unavailable')} aria-label={agentStatusLabel(agent?.status ?? 'unavailable')}></span>
+                      <p class="text-[11px] text-slate-400">{agent?.name ?? session.agentId}</p>
+                    </div>
+                  {/if}
+                  <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-slate-500">
+                    <span>{formatUpdatedAt(session.updatedAt)}</span>
+                  </div>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </section>
+      {/each}
+    {/if}
+  </div>
+</aside>
diff --git a/frontend/src/components/chat/SessionList.tsx b/frontend/src/components/chat/SessionList.tsx
deleted file mode 100644
index 255736d..0000000
--- a/frontend/src/components/chat/SessionList.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import type { AgentSummary, SessionSummary } from '../../hooks/useAgUiChat.js'
-
-interface SessionListProps {
-  agents: AgentSummary[]
-  sessions: SessionSummary[]
-  selectedProjectId?: string | null
-  activeSessionId: string | null
-  creatingSession: boolean
-  loading?: boolean
-  onCreate: (agentId: string) => void | Promise<void>
-  onSelect: (sessionId: string) => void | Promise<void>
-}
-
-export function SessionList({
-  agents,
-  sessions,
-  selectedProjectId = null,
-  activeSessionId,
-  creatingSession,
-  loading = false,
-  onCreate,
-  onSelect,
-}: SessionListProps) {
-  const [pickerOpen, setPickerOpen] = useState(false)
-  const [collapsedProjects, setCollapsedProjects] = useState<string[]>([])
-
-  const agentById = useMemo(() => new Map(agents.map((a) => [a.id, a])), [agents])
-  const activeAgents = useMemo(() => agents.filter((agent) => agent.status === 'active'), [agents])
-  const projectGroups = useMemo(
-    () => buildProjectGroups({ agentById, sessions, activeSessionId, selectedProjectId }),
-    [activeSessionId, agentById, selectedProjectId, sessions]
-  )
-  const selectedProjectHasSessions = useMemo(
-    () =>
-      selectedProjectId ? projectGroups.some((group) => group.id === selectedProjectId) : false,
-    [projectGroups, selectedProjectId]
-  )
-
-  useEffect(() => {
-    if (!selectedProjectId) return
-
-    setCollapsedProjects((current) =>
-      current.filter((projectId) => projectId !== selectedProjectId)
-    )
-  }, [selectedProjectId])
-
-  function handleAgentPick(agentId: string) {
-    setPickerOpen(false)
-    void onCreate(agentId)
-  }
-
-  function handleNewChat() {
-    if (activeAgents.length === 1) {
-      void onCreate(activeAgents[0]!.id)
-    } else {
-      setPickerOpen((open) => !open)
-    }
-  }
-
-  return (
-    <aside
-      data-testid="chat-session-panel"
-      className="flex min-h-[18rem] flex-col border-r border-white/8 bg-slate-950/84 p-4 text-slate-100 shadow-[inset_-1px_0_0_rgba(148,163,184,0.08)] backdrop-blur"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-            Sessions
-          </p>
-          <h2 className="mt-2 font-[family:var(--font-display)] text-[2rem] leading-tight text-slate-50">
-            Chats
-          </h2>
-          <p className="mt-2 max-w-[14rem] text-xs leading-5 text-slate-400">
-            Grouped by project so you can scan workstreams without losing repo context.
-          </p>
-        </div>
-
-        <div className="relative">
-          <button
-            type="button"
-            onClick={handleNewChat}
-            disabled={creatingSession || activeAgents.length === 0}
-            aria-label={activeAgents.length > 1 ? 'New chat — pick agent' : 'New chat'}
-            aria-expanded={activeAgents.length > 1 ? pickerOpen : undefined}
-            aria-haspopup={activeAgents.length > 1 ? 'menu' : undefined}
-            className="inline-flex h-10 items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-slate-900/80 px-3.5 text-sm font-semibold text-slate-50 transition hover:border-white/15 hover:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-800 disabled:text-slate-500"
-          >
-            {creatingSession ? 'Opening…' : 'New'}
-            {activeAgents.length > 1 && !creatingSession && (
-              <span className="text-slate-400" aria-hidden="true">
-                {pickerOpen ? '▲' : '▼'}
-              </span>
-            )}
-          </button>
-
-          {pickerOpen && activeAgents.length > 1 && (
-            <div
-              role="menu"
-              aria-label="Pick an agent for the new chat"
-              className="absolute right-0 top-full z-20 mt-2 w-52 rounded-2xl border border-white/10 bg-slate-900/95 p-1.5 shadow-xl"
-            >
-              {activeAgents.map((agent) => (
-                <button
-                  key={agent.id}
-                  role="menuitem"
-                  type="button"
-                  onClick={() => handleAgentPick(agent.id)}
-                  className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-slate-100 transition hover:bg-slate-800"
-                >
-                  <AgentDot status={agent.status} />
-                  {agent.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="mt-5 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-        {selectedProjectId && !selectedProjectHasSessions ? (
-          <div className="rounded-2xl border border-dashed border-teal-500/20 bg-teal-500/5 p-4 text-sm text-slate-300">
-            No chats in this project yet. Start a new session to open this workspace with the
-            selected agent.
-          </div>
-        ) : null}
-
-        {projectGroups.length === 0 ? (
-          loading ? (
-            <div className="flex flex-col gap-2" aria-label="Loading sessions" aria-busy="true">
-              {[...Array(4)].map((_, i) => (
-                <div
-                  key={i}
-                  className="animate-pulse rounded-2xl border border-white/8 bg-slate-900/55 px-3.5 py-3.5"
-                >
-                  <div className="mb-2 h-2.5 w-24 rounded-full bg-slate-700/60" />
-                  <div className="h-4 w-40 rounded-full bg-slate-700/40" />
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="rounded-2xl border border-dashed border-white/10 bg-slate-900/55 p-4 text-sm text-slate-400">
-              {activeAgents.length === 0
-                ? 'No backends are ready yet. Start an adapter and reload to continue.'
-                : 'No chats yet.'}
-            </div>
-          )
-        ) : (
-          projectGroups.map((group) => {
-            const collapsed = collapsedProjects.includes(group.id)
-            const selected = group.id === selectedProjectId
-
-            return (
-              <section
-                key={group.id}
-                className={`rounded-2xl border px-3.5 py-3.5 ${
-                  selected
-                    ? 'border-teal-500/30 bg-[linear-gradient(180deg,rgba(10,24,31,0.5),rgba(7,14,22,0.72))]'
-                    : 'border-white/8 bg-slate-950/35'
-                }`}
-              >
-                <button
-                  type="button"
-                  onClick={() =>
-                    setCollapsedProjects((current) =>
-                      current.includes(group.id)
-                        ? current.filter((projectId) => projectId !== group.id)
-                        : [...current, group.id]
-                    )
-                  }
-                  className="flex w-full items-start justify-between gap-3 text-left"
-                >
-                  <div className="min-w-0">
-                    <h3 className="truncate text-sm font-semibold text-slate-100">{group.name}</h3>
-                    <p className="mt-1 truncate text-[11px] text-slate-500">{group.pathLabel}</p>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    {selected ? (
-                      <span className="rounded-full border border-teal-500/25 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
-                        Current
-                      </span>
-                    ) : null}
-                    <span className="rounded-full border border-white/10 bg-slate-900/65 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
-                      {group.sessions.length}
-                    </span>
-                    <span className="text-xs text-slate-500" aria-hidden="true">
-                      {collapsed ? '+' : '-'}
-                    </span>
-                  </div>
-                </button>
-
-                {!collapsed ? (
-                  <div className="mt-3 flex flex-col gap-2">
-                    {group.sessions.map((session) => {
-                      const active = session.id === activeSessionId
-                      const agent = agentById.get(session.agentId)
-
-                      return (
-                        <button
-                          key={session.id}
-                          type="button"
-                          onClick={() => void onSelect(session.id)}
-                          className={`rounded-2xl border px-3.5 py-3.5 text-left transition ${
-                            active
-                              ? 'border-teal-500/35 bg-[linear-gradient(180deg,rgba(10,28,34,0.92),rgba(7,19,28,0.96))] shadow-[inset_0_0_0_1px_rgba(45,212,191,0.08)]'
-                              : 'border-white/6 bg-slate-950/35 hover:border-white/10 hover:bg-slate-900/60'
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-3">
-                            <p className="min-w-0 flex-1 truncate text-sm font-medium text-slate-100">
-                              {session.title}
-                            </p>
-                            <div className="flex shrink-0 items-center gap-1.5">
-                              {session.source === 'history' ? (
-                                <span
-                                  title="Read-only history session"
-                                  className="rounded-full border border-slate-600/40 bg-slate-800/60 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400"
-                                >
-                                  History
-                                </span>
-                              ) : (
-                                <span
-                                  title="Active live session"
-                                  className="rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-300"
-                                >
-                                  Live
-                                </span>
-                              )}
-                              {active ? (
-                                <span className="rounded-full border border-teal-500/25 bg-teal-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-teal-200">
-                                  Active
-                                </span>
-                              ) : null}
-                            </div>
-                          </div>
-
-                          <div className="mt-3 flex items-center gap-1.5">
-                            <AgentDot status={agent?.status ?? 'unavailable'} />
-                            <p className="text-[11px] text-slate-400">
-                              {agent?.name ?? session.agentId}
-                            </p>
-                          </div>
-
-                          <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-slate-500">
-                            <span>{formatUpdatedAt(session.updatedAt)}</span>
-                          </div>
-                        </button>
-                      )
-                    })}
-                  </div>
-                ) : null}
-              </section>
-            )
-          })
-        )}
-      </div>
-    </aside>
-  )
-}
-
-interface AgentDotProps {
-  status: AgentSummary['status']
-}
-
-function AgentDot({ status }: AgentDotProps) {
-  const className =
-    status === 'active'
-      ? 'h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_4px_rgba(52,211,153,0.6)] flex-shrink-0'
-      : status === 'detected'
-        ? 'h-2 w-2 rounded-full bg-amber-400 flex-shrink-0'
-        : 'h-2 w-2 rounded-full bg-slate-600 flex-shrink-0'
-
-  const label = status === 'active' ? 'online' : status === 'detected' ? 'detected' : 'offline'
-
-  return <span className={className} aria-label={label} />
-}
-
-function formatUpdatedAt(updatedAt: string): string {
-  const date = new Date(updatedAt)
-  if (Number.isNaN(date.valueOf())) return 'just now'
-
-  return new Intl.DateTimeFormat('en', {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  }).format(date)
-}
-
-interface ProjectGroup {
-  id: string
-  name: string
-  pathLabel: string
-  sessions: SessionSummary[]
-}
-
-function buildProjectGroups({
-  agentById,
-  sessions,
-  activeSessionId,
-  selectedProjectId,
-}: {
-  agentById: Map<string, AgentSummary>
-  sessions: SessionSummary[]
-  activeSessionId: string | null
-  selectedProjectId: string | null
-}): ProjectGroup[] {
-  const grouped = new Map<string, ProjectGroup>()
-
-  const visibleSessions = sessions
-    .filter((session) => agentById.get(session.agentId)?.status !== 'disabled')
-    .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
-
-  for (const session of visibleSessions) {
-    const projectId = session.project?.id ?? '__no_project__'
-    const group = grouped.get(projectId)
-
-    if (group) {
-      group.sessions.push(session)
-      continue
-    }
-
-    grouped.set(projectId, {
-      id: projectId,
-      name: session.project?.name ?? 'No project',
-      pathLabel: compactProjectPath(session.project?.path ?? 'No project path'),
-      sessions: [session],
-    })
-  }
-
-  return Array.from(grouped.values()).sort((left, right) => {
-    const leftSelected = left.id === selectedProjectId ? 1 : 0
-    const rightSelected = right.id === selectedProjectId ? 1 : 0
-    if (leftSelected !== rightSelected) {
-      return rightSelected - leftSelected
-    }
-
-    const leftActive = left.sessions.some((session) => session.id === activeSessionId) ? 1 : 0
-    const rightActive = right.sessions.some((session) => session.id === activeSessionId) ? 1 : 0
-    if (leftActive !== rightActive) {
-      return rightActive - leftActive
-    }
-
-    return left.name.localeCompare(right.name)
-  })
-}
-
-function compactProjectPath(path: string): string {
-  const trimmed = path.trim()
-  if (trimmed.length <= 36) {
-    return trimmed
-  }
-
-  const parts = trimmed.split('/').filter(Boolean)
-  if (parts.length <= 3) {
-    return trimmed
-  }
-
-  return `/${parts[0]}/${parts[1]}/.../${parts.at(-1)}`
-}
diff --git a/frontend/src/components/chat/StructuredAssistantMessage.svelte b/frontend/src/components/chat/StructuredAssistantMessage.svelte
new file mode 100644
index 0000000..f008bdb
--- /dev/null
+++ b/frontend/src/components/chat/StructuredAssistantMessage.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type {
+    A2UICompactionNoticePayload,
+    A2UITruncationNoticePayload,
+    StructuredBlock,
+  } from './a2ui-types.js'
+  import ReasoningGroup from './ReasoningGroup.svelte'
+  import ToolGroup from './ToolGroup.svelte'
+  import AttachmentGroup from './AttachmentGroup.svelte'
+
+  interface Props {
+    blocks: StructuredBlock[]
+    summaryTitle?: string | null
+    projectPath?: string | null
+  }
+
+  const { blocks, summaryTitle = null, projectPath = null }: Props = $props()
+
+  const groups = $derived(groupStructuredBlocks(blocks))
+</script>
+
+<div class="flex flex-col gap-2" data-testid="structured-assistant-message">
+  {#each groups as group, index (index)}
+    {#if group.kind === 'reasoning_group'}
+      <ReasoningGroup blocks={group.blocks} />
+    {:else if group.kind === 'attachment_group'}
+      <AttachmentGroup blocks={group.blocks} />
+    {:else if group.kind === 'compaction_group'}
+      {@render CompactionGroup(group.blocks)}
+    {:else if group.kind === 'truncation_group'}
+      {@render TruncationGroup(group.blocks)}
+    {:else if group.kind === 'tool_group'}
+      <ToolGroup
+        blocks={group.blocks}
+        summaryTitle={index === 0 ? summaryTitle : null}
+        {projectPath}
+      />
+    {/if}
+  {/each}
+</div>
+
+{#snippet CompactionGroup(cblocks: Array<Extract<StructuredBlock, { kind: 'compaction_notice' }>>)}
+  <div class="space-y-2">
+    {#each cblocks as block, i (`compaction-${(block.payload as A2UICompactionNoticePayload).auto}-${(block.payload as A2UICompactionNoticePayload).overflow}-${i}`)}
+      <div
+        class="rounded-xl border border-sky-500/20 bg-sky-500/8 px-3 py-2 text-xs text-sky-50"
+        data-testid="a2ui-compaction-card"
+      >
+        <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-300">Compaction</p>
+        <p class="mt-1 text-sm text-sky-50">
+          {(block.payload as A2UICompactionNoticePayload).auto ? 'Session compacted automatically' : 'Session compacted'}
+        </p>
+        <p class="mt-1 text-sky-100/80">
+          {(block.payload as A2UICompactionNoticePayload).overflow
+            ? 'Context overflow triggered a history compaction.'
+            : 'Earlier context was condensed into a compact history snapshot.'}
+        </p>
+      </div>
+    {/each}
+  </div>
+{/snippet}
+
+{#snippet TruncationGroup(tblocks: Array<Extract<StructuredBlock, { kind: 'truncation_notice' }>>)}
+  <div class="space-y-2">
+    {#each tblocks as block, i (`truncation-${(block.payload as A2UITruncationNoticePayload).tokenLimit}-${(block.payload as A2UITruncationNoticePayload).tokensRemoved}-${i}`)}
+      {@const p = block.payload as A2UITruncationNoticePayload}
+      {@const details = [
+        p.tokenLimit !== undefined ? `Limit ${p.tokenLimit.toLocaleString()} tokens` : null,
+        p.tokensRemoved !== undefined ? `Removed ${p.tokensRemoved.toLocaleString()} tokens` : null,
+        p.messagesRemoved !== undefined ? `Dropped ${p.messagesRemoved.toLocaleString()} messages` : null,
+      ].filter(Boolean).join(' - ')}
+      <div
+        class="rounded-xl border border-amber-500/20 bg-amber-500/8 px-3 py-2 text-xs text-amber-50"
+        data-testid="a2ui-truncation-card"
+      >
+        <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-amber-300">Truncation</p>
+        <p class="mt-1 text-sm text-amber-50">Session truncated to stay within context limits.</p>
+        {#if details}
+          <p class="mt-1 text-amber-100/80">{details}</p>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/snippet}
+
+<script lang="ts" module>
+  import type {
+    StructuredBlock as _StructuredBlock,
+  } from './a2ui-types.js'
+
+  // ── Grouping ───────────────────────────────────────────────────────────────
+
+  type StructuredGroup =
+    | { kind: 'reasoning_group'; blocks: Array<Extract<_StructuredBlock, { kind: 'reasoning' }>> }
+    | { kind: 'attachment_group'; blocks: Array<Extract<_StructuredBlock, { kind: 'attachment' }>> }
+    | { kind: 'compaction_group'; blocks: Array<Extract<_StructuredBlock, { kind: 'compaction_notice' }>> }
+    | { kind: 'truncation_group'; blocks: Array<Extract<_StructuredBlock, { kind: 'truncation_notice' }>> }
+    | { kind: 'tool_group'; blocks: Array<Exclude<_StructuredBlock, { kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice' }>> }
+
+  function groupStructuredBlocks(blocks: _StructuredBlock[]): StructuredGroup[] {
+    const groups: StructuredGroup[] = []
+
+    for (const block of blocks) {
+      const nextKind =
+        block.kind === 'reasoning'
+          ? 'reasoning_group'
+          : block.kind === 'attachment'
+            ? 'attachment_group'
+            : block.kind === 'compaction_notice'
+              ? 'compaction_group'
+              : block.kind === 'truncation_notice'
+                ? 'truncation_group'
+                : 'tool_group'
+
+      const current = groups.at(-1)
+
+      if (current && current.kind === nextKind) {
+        if (current.kind === 'reasoning_group' && block.kind === 'reasoning') {
+          current.blocks.push(block)
+          continue
+        }
+        if (
+          current.kind === 'tool_group' &&
+          block.kind !== 'reasoning' &&
+          block.kind !== 'attachment' &&
+          block.kind !== 'compaction_notice' &&
+          block.kind !== 'truncation_notice'
+        ) {
+          current.blocks.push(block)
+          continue
+        }
+        if (current.kind === 'attachment_group' && block.kind === 'attachment') {
+          current.blocks.push(block)
+          continue
+        }
+        if (current.kind === 'compaction_group' && block.kind === 'compaction_notice') {
+          current.blocks.push(block)
+          continue
+        }
+        if (current.kind === 'truncation_group' && block.kind === 'truncation_notice') {
+          current.blocks.push(block)
+          continue
+        }
+        continue
+      }
+
+      if (nextKind === 'reasoning_group') {
+        groups.push({ kind: nextKind, blocks: [block as Extract<_StructuredBlock, { kind: 'reasoning' }>] })
+      } else if (nextKind === 'attachment_group') {
+        groups.push({ kind: nextKind, blocks: [block as Extract<_StructuredBlock, { kind: 'attachment' }>] })
+      } else if (nextKind === 'compaction_group') {
+        groups.push({ kind: nextKind, blocks: [block as Extract<_StructuredBlock, { kind: 'compaction_notice' }>] })
+      } else if (nextKind === 'truncation_group') {
+        groups.push({ kind: nextKind, blocks: [block as Extract<_StructuredBlock, { kind: 'truncation_notice' }>] })
+      } else {
+        groups.push({
+          kind: nextKind,
+          blocks: [block as Exclude<_StructuredBlock, { kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice' }>],
+        })
+      }
+    }
+
+    return groups
+  }
+</script>
diff --git a/frontend/src/components/chat/StructuredAssistantMessage.test.tsx b/frontend/src/components/chat/StructuredAssistantMessage.test.svelte.ts
similarity index 86%
rename from frontend/src/components/chat/StructuredAssistantMessage.test.tsx
rename to frontend/src/components/chat/StructuredAssistantMessage.test.svelte.ts
index d6a6c75..8f0696a 100644
--- a/frontend/src/components/chat/StructuredAssistantMessage.test.tsx
+++ b/frontend/src/components/chat/StructuredAssistantMessage.test.svelte.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { describe, it, expect } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { StructuredAssistantMessage } from './StructuredAssistantMessage.js'
+import { fireEvent, render, screen } from '@testing-library/svelte'
+import StructuredAssistantMessage from './StructuredAssistantMessage.svelte'
 import type { StructuredBlock } from './a2ui-types.js'
 
 describe('StructuredAssistantMessage', () => {
@@ -12,7 +12,7 @@ describe('StructuredAssistantMessage', () => {
         payload: { callId: 'c-1', toolName: 'read_file', done: false },
       },
     ]
-    render(<StructuredAssistantMessage blocks={blocks} />)
+    render(StructuredAssistantMessage, { props: { blocks } })
 
     expect(screen.getByText('read_file')).toBeDefined()
     expect(screen.queryByTestId('a2ui-tool-call-card')).toBeNull()
@@ -30,7 +30,7 @@ describe('StructuredAssistantMessage', () => {
         payload: { callId: 'c-1', toolName: 'bash', result: 'exit 0', done: true },
       },
     ]
-    render(<StructuredAssistantMessage blocks={blocks} />)
+    render(StructuredAssistantMessage, { props: { blocks } })
 
     fireEvent.click(screen.getByRole('button', { name: /bash/i }))
     fireEvent.click(screen.getByRole('button', { name: /Completed/i }))
@@ -45,7 +45,7 @@ describe('StructuredAssistantMessage', () => {
         payload: { callId: 'c-1', toolName: 'bash', args: 'ls -la', done: false },
       },
     ]
-    render(<StructuredAssistantMessage blocks={blocks} />)
+    render(StructuredAssistantMessage, { props: { blocks } })
 
     fireEvent.click(screen.getByRole('button', { name: /bash/i }))
     expect(screen.getByText('ls -la')).toBeDefined()
@@ -55,8 +55,7 @@ describe('StructuredAssistantMessage', () => {
     // Cast to simulate an unrecognised kind arriving at runtime
     const blocks = [{ kind: 'unknown_future_widget', payload: {} }] as unknown as StructuredBlock[]
 
-    const { container } = render(<StructuredAssistantMessage blocks={blocks} />)
-    // The wrapper div exists but has no children
+    const { container } = render(StructuredAssistantMessage, { props: { blocks } })
     expect(container.querySelector('[data-testid="a2ui-tool-call-card"]')).toBeNull()
   })
 
@@ -65,7 +64,7 @@ describe('StructuredAssistantMessage', () => {
       { kind: 'tool_call', payload: { callId: 'c-1', toolName: 'read_file', done: false } },
       { kind: 'tool_call', payload: { callId: 'c-2', toolName: 'bash', done: true, result: 'ok' } },
     ]
-    render(<StructuredAssistantMessage blocks={blocks} />)
+    render(StructuredAssistantMessage, { props: { blocks } })
     expect(screen.getByText('2 tool calls')).toBeDefined()
 
     fireEvent.click(screen.getByRole('button', { name: /2 tool calls/i }))
@@ -104,7 +103,7 @@ describe('StructuredAssistantMessage', () => {
       },
     ]
 
-    render(<StructuredAssistantMessage blocks={blocks} />)
+    render(StructuredAssistantMessage, { props: { blocks } })
     expect(screen.getByText('Refining output')).toBeDefined()
     expect(screen.queryByTestId('a2ui-skill-card')).toBeNull()
 
@@ -119,9 +118,9 @@ describe('StructuredAssistantMessage', () => {
   })
 
   it('renders attachment blocks with inline images', () => {
-    render(
-      <StructuredAssistantMessage
-        blocks={[
+    render(StructuredAssistantMessage, {
+      props: {
+        blocks: [
           {
             kind: 'attachment',
             payload: {
@@ -130,18 +129,18 @@ describe('StructuredAssistantMessage', () => {
               url: 'data:image/png;base64,AAAA',
             },
           },
-        ]}
-      />
-    )
+        ],
+      },
+    })
 
     expect(screen.getByTestId('a2ui-attachment-card')).toBeDefined()
     expect(screen.getByAltText('image.png')).toBeDefined()
   })
 
   it('renders compaction notices as their own block group', () => {
-    render(
-      <StructuredAssistantMessage
-        blocks={[
+    render(StructuredAssistantMessage, {
+      props: {
+        blocks: [
           {
             kind: 'compaction_notice',
             payload: {
@@ -149,18 +148,18 @@ describe('StructuredAssistantMessage', () => {
               overflow: false,
             },
           },
-        ]}
-      />
-    )
+        ],
+      },
+    })
 
     expect(screen.getByTestId('a2ui-compaction-card')).toBeDefined()
     expect(screen.getByText('Session compacted automatically')).toBeDefined()
   })
 
   it('renders truncation notices distinctly from compaction notices', () => {
-    render(
-      <StructuredAssistantMessage
-        blocks={[
+    render(StructuredAssistantMessage, {
+      props: {
+        blocks: [
           {
             kind: 'truncation_notice',
             payload: {
@@ -169,18 +168,18 @@ describe('StructuredAssistantMessage', () => {
               messagesRemoved: 4,
             },
           },
-        ]}
-      />
-    )
+        ],
+      },
+    })
 
     expect(screen.getByTestId('a2ui-truncation-card')).toBeDefined()
     expect(screen.getByText('Session truncated to stay within context limits.')).toBeDefined()
   })
 
   it('renders file operations, model switches, and approval notices inside actions', () => {
-    render(
-      <StructuredAssistantMessage
-        blocks={[
+    render(StructuredAssistantMessage, {
+      props: {
+        blocks: [
           {
             kind: 'file_operation',
             payload: { path: '/repo/src/app.ts', operation: 'edit', source: 'vscode_text_edit' },
@@ -197,9 +196,9 @@ describe('StructuredAssistantMessage', () => {
               state: 'pending',
             },
           },
-        ]}
-      />
-    )
+        ],
+      },
+    })
 
     fireEvent.click(screen.getByRole('button', { name: /3 tool calls/i }))
     expect(screen.getByTestId('a2ui-file-operation-card')).toBeDefined()
diff --git a/frontend/src/components/chat/StructuredAssistantMessage.tsx b/frontend/src/components/chat/StructuredAssistantMessage.tsx
deleted file mode 100644
index 302c89c..0000000
--- a/frontend/src/components/chat/StructuredAssistantMessage.tsx
+++ /dev/null
@@ -1,778 +0,0 @@
-import { Component, useMemo, useState, type ErrorInfo, type ReactNode } from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import type {
-  A2UIApprovalNoticePayload,
-  A2UICompactionNoticePayload,
-  A2UIFileOperationPayload,
-  A2UIModelSwitchPayload,
-  A2UISkillInvocationPayload,
-  A2UISubagentInvocationPayload,
-  A2UIToolCallPayload,
-  A2UITruncationNoticePayload,
-  StructuredBlock,
-} from './a2ui-types.js'
-
-// ---------------------------------------------------------------------------
-// Error boundary — wraps each renderer so a throw can't crash the conversation
-// ---------------------------------------------------------------------------
-
-interface ErrorBoundaryState {
-  caught: boolean
-}
-
-class BlockErrorBoundary extends Component<{ children: ReactNode }, ErrorBoundaryState> {
-  state: ErrorBoundaryState = { caught: false }
-
-  static getDerivedStateFromError(): ErrorBoundaryState {
-    return { caught: true }
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo): void {
-    console.error('[A2UI] renderer threw:', error, info)
-  }
-
-  render(): ReactNode {
-    if (this.state.caught) return null
-    return this.props.children
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Individual widget renderers
-// ---------------------------------------------------------------------------
-
-function ToolCallCard({
-  payload,
-  projectPath,
-}: {
-  payload: A2UIToolCallPayload
-  projectPath?: string | null
-}) {
-  const [open, setOpen] = useState(false)
-  const argsText =
-    payload.args !== undefined
-      ? typeof payload.args === 'string'
-        ? relativizeText(payload.args, projectPath)
-        : JSON.stringify(relativizeValue(payload.args, projectPath), null, 2)
-      : null
-  const summary = summarizeToolCall(payload, projectPath)
-
-  return (
-    <div
-      className="rounded-xl border border-white/10 bg-slate-800/60 px-3 py-2 text-xs"
-      data-testid="a2ui-tool-call-card"
-    >
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center justify-between gap-3 text-left"
-      >
-        <div>
-          <p className="font-mono font-semibold text-teal-300">{payload.toolName}</p>
-          <p className="mt-1 text-sm text-slate-200">{summary}</p>
-        </div>
-        <span className="rounded-full border border-white/10 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-slate-300">
-          {open ? 'Hide' : 'Open'}
-        </span>
-      </button>
-
-      {open ? (
-        <div className="mt-3 space-y-3 border-t border-white/10 pt-3">
-          {argsText ? (
-            <div>
-              <p className="text-slate-400">Input</p>
-              <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap text-slate-200">
-                {argsText}
-              </pre>
-            </div>
-          ) : null}
-          {payload.done && payload.result !== undefined ? (
-            <div>
-              <p className="text-slate-400">Result</p>
-              <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap text-slate-200">
-                {payload.result}
-              </pre>
-            </div>
-          ) : null}
-          {!payload.done ? <p className="text-slate-500 italic">Running…</p> : null}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-function SkillInvocationCard({ payload }: { payload: A2UISkillInvocationPayload }) {
-  return (
-    <div
-      className="rounded-xl border border-cyan-500/20 bg-cyan-500/8 px-3 py-2 text-xs text-cyan-50"
-      data-testid="a2ui-skill-card"
-    >
-      <div className="flex items-center justify-between gap-2">
-        <p className="font-mono font-semibold text-cyan-200">Skill: {payload.skillName}</p>
-        <span className="rounded-full border border-cyan-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-cyan-200">
-          {payload.status}
-        </span>
-      </div>
-      {payload.result ? (
-        <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap text-slate-200">
-          {payload.result}
-        </pre>
-      ) : null}
-    </div>
-  )
-}
-
-function SubagentInvocationCard({ payload }: { payload: A2UISubagentInvocationPayload }) {
-  return (
-    <div
-      className="rounded-xl border border-fuchsia-500/20 bg-fuchsia-500/8 px-3 py-2 text-xs text-fuchsia-50"
-      data-testid="a2ui-subagent-card"
-    >
-      <div className="flex items-center justify-between gap-2">
-        <p className="font-mono font-semibold text-fuchsia-200">Subagent: {payload.agentName}</p>
-        <span className="rounded-full border border-fuchsia-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-fuchsia-200">
-          {payload.status}
-        </span>
-      </div>
-      {payload.prompt ? (
-        <p className="mt-2 whitespace-pre-wrap text-slate-200/90">{payload.prompt}</p>
-      ) : null}
-      {payload.result ? (
-        <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap text-slate-200">
-          {payload.result}
-        </pre>
-      ) : null}
-    </div>
-  )
-}
-
-function CompactionNoticeCard({ payload }: { payload: A2UICompactionNoticePayload }) {
-  const label = payload.auto ? 'Session compacted automatically' : 'Session compacted'
-  const detail = payload.overflow
-    ? 'Context overflow triggered a history compaction.'
-    : 'Earlier context was condensed into a compact history snapshot.'
-
-  return (
-    <div
-      className="rounded-xl border border-sky-500/20 bg-sky-500/8 px-3 py-2 text-xs text-sky-50"
-      data-testid="a2ui-compaction-card"
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-300">
-        Compaction
-      </p>
-      <p className="mt-1 text-sm text-sky-50">{label}</p>
-      <p className="mt-1 text-sky-100/80">{detail}</p>
-    </div>
-  )
-}
-
-function FileOperationCard({ payload }: { payload: A2UIFileOperationPayload }) {
-  return (
-    <div
-      className="rounded-xl border border-lime-500/20 bg-lime-500/8 px-3 py-2 text-xs text-lime-50"
-      data-testid="a2ui-file-operation-card"
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-lime-300">
-        File {payload.operation}
-      </p>
-      <p className="mt-1 break-all font-mono text-sm text-lime-50">{payload.path}</p>
-      {payload.source ? <p className="mt-1 text-lime-100/80">{payload.source}</p> : null}
-    </div>
-  )
-}
-
-function ModelSwitchCard({ payload }: { payload: A2UIModelSwitchPayload }) {
-  return (
-    <div
-      className="rounded-xl border border-sky-500/20 bg-sky-500/8 px-3 py-2 text-xs text-sky-50"
-      data-testid="a2ui-model-switch-card"
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-300">
-        Model Switch
-      </p>
-      <p className="mt-1 text-sm text-sky-50">
-        {payload.fromModelId ? `${payload.fromModelId} -> ${payload.toModelId}` : payload.toModelId}
-      </p>
-    </div>
-  )
-}
-
-function ApprovalNoticeCard({ payload }: { payload: A2UIApprovalNoticePayload }) {
-  return (
-    <div
-      className="rounded-xl border border-rose-500/20 bg-rose-500/8 px-3 py-2 text-xs text-rose-50"
-      data-testid="a2ui-approval-card"
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-rose-300">
-        Approval
-      </p>
-      <p className="mt-1 text-sm text-rose-50">{payload.title}</p>
-      {payload.message ? <p className="mt-1 text-rose-100/80">{payload.message}</p> : null}
-      <p className="mt-1 uppercase tracking-[0.14em] text-rose-200">{payload.state}</p>
-    </div>
-  )
-}
-
-function TruncationNoticeCard({ payload }: { payload: A2UITruncationNoticePayload }) {
-  const details = [
-    payload.tokenLimit !== undefined ? `Limit ${payload.tokenLimit.toLocaleString()} tokens` : null,
-    payload.tokensRemoved !== undefined
-      ? `Removed ${payload.tokensRemoved.toLocaleString()} tokens`
-      : null,
-    payload.messagesRemoved !== undefined
-      ? `Dropped ${payload.messagesRemoved.toLocaleString()} messages`
-      : null,
-  ]
-    .filter(Boolean)
-    .join(' - ')
-
-  return (
-    <div
-      className="rounded-xl border border-amber-500/20 bg-amber-500/8 px-3 py-2 text-xs text-amber-50"
-      data-testid="a2ui-truncation-card"
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-amber-300">
-        Truncation
-      </p>
-      <p className="mt-1 text-sm text-amber-50">Session truncated to stay within context limits.</p>
-      {details ? <p className="mt-1 text-amber-100/80">{details}</p> : null}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Component registry
-// ---------------------------------------------------------------------------
-
-type BlockRenderer<K extends StructuredBlock['kind']> = React.ComponentType<{
-  payload: Extract<StructuredBlock, { kind: K }>['payload']
-  projectPath?: string | null
-}>
-
-const REGISTRY: { [K in StructuredBlock['kind']]: BlockRenderer<K> } = {
-  approval_notice: ApprovalNoticeCard,
-  attachment: () => null,
-  compaction_notice: CompactionNoticeCard,
-  file_operation: FileOperationCard,
-  model_switch: ModelSwitchCard,
-  truncation_notice: TruncationNoticeCard,
-  skill_invocation: SkillInvocationCard,
-  subagent_invocation: SubagentInvocationCard,
-  tool_call: ToolCallCard,
-  reasoning: () => null,
-}
-
-// ---------------------------------------------------------------------------
-// Public component
-// ---------------------------------------------------------------------------
-
-interface StructuredAssistantMessageProps {
-  blocks: StructuredBlock[]
-  summaryTitle?: string | null
-  projectPath?: string | null
-}
-
-export function StructuredAssistantMessage({
-  blocks,
-  summaryTitle = null,
-  projectPath = null,
-}: StructuredAssistantMessageProps) {
-  const groups = useMemo(() => groupStructuredBlocks(blocks), [blocks])
-
-  return (
-    <div className="flex flex-col gap-2" data-testid="structured-assistant-message">
-      {groups.map((group, index) =>
-        group.kind === 'reasoning_group' ? (
-          <ReasoningGroup key={`reasoning-${index}`} blocks={group.blocks} />
-        ) : group.kind === 'attachment_group' ? (
-          <AttachmentGroup key={`attachments-${index}`} blocks={group.blocks} />
-        ) : group.kind === 'compaction_group' ? (
-          <CompactionGroup key={`compaction-${index}`} blocks={group.blocks} />
-        ) : group.kind === 'truncation_group' ? (
-          <TruncationGroup key={`truncation-${index}`} blocks={group.blocks} />
-        ) : group.kind === 'tool_group' ? (
-          <ToolGroup
-            key={`tools-${index}`}
-            blocks={group.blocks}
-            summaryTitle={index === 0 ? summaryTitle : null}
-            projectPath={projectPath}
-          />
-        ) : null
-      )}
-    </div>
-  )
-}
-
-function ReasoningGroup({
-  blocks,
-}: {
-  blocks: Array<Extract<StructuredBlock, { kind: 'reasoning' }>>
-}) {
-  const [open, setOpen] = useState(false)
-  const latestTitle = [...blocks]
-    .reverse()
-    .find((block) => block.payload.title?.trim())
-    ?.payload.title?.trim()
-
-  return (
-    <div
-      className="rounded-xl border border-amber-500/20 bg-amber-500/8 px-3 py-2 text-xs text-amber-50"
-      data-testid="a2ui-reasoning-card"
-    >
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center justify-between gap-3 text-left"
-      >
-        <div>
-          <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-amber-300">
-            Reasoning
-          </p>
-          <p className="mt-1 text-sm text-amber-50">
-            {latestTitle ?? 'Working through the request'}
-          </p>
-        </div>
-        <span className="rounded-full border border-amber-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-amber-200">
-          {open ? 'Hide' : `${blocks.length}`}
-        </span>
-      </button>
-
-      {open ? (
-        <div className="mt-3 space-y-3 border-t border-amber-500/10 pt-3">
-          {blocks.map((block, index) => (
-            <div key={`${block.payload.title ?? 'reasoning'}-${index}`} className="space-y-2">
-              {blocks.length > 1 && block.payload.title && block.payload.title !== latestTitle ? (
-                <p className="text-xs font-semibold text-amber-200">{block.payload.title}</p>
-              ) : null}
-              <div className="text-sm leading-6 text-amber-50/90">
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                  {stripReasoningHeading(block.payload.text, block.payload.title)}
-                </ReactMarkdown>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-function ToolGroup({
-  blocks,
-  summaryTitle,
-  projectPath,
-}: {
-  blocks: Array<
-    Exclude<
-      StructuredBlock,
-      {
-        kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice'
-      }
-    >
-  >
-  summaryTitle?: string | null
-  projectPath?: string | null
-}) {
-  const [open, setOpen] = useState(false)
-  const summary =
-    summaryTitle?.trim() ||
-    (blocks.length === 1 ? describeToolBlock(blocks[0]) : `${blocks.length} tool calls`)
-
-  return (
-    <div className="rounded-xl border border-white/10 bg-slate-800/55 px-3 py-2 text-xs text-slate-100">
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center justify-between gap-3 text-left"
-      >
-        <div>
-          <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
-            Actions
-          </p>
-          <p className="mt-1 text-sm text-slate-100">{summary}</p>
-        </div>
-        <span className="rounded-full border border-white/10 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-slate-300">
-          {open ? 'Hide' : `${blocks.length}`}
-        </span>
-      </button>
-
-      {open ? (
-        <div className="mt-3 space-y-2 border-t border-white/10 pt-3">
-          {blocks.map((block, index) => {
-            const Renderer = REGISTRY[block.kind] as BlockRenderer<typeof block.kind> | undefined
-            if (!Renderer) return null
-
-            const stableKey =
-              'callId' in block.payload
-                ? `${block.kind}-${block.payload.callId}`
-                : `${block.kind}-${index}`
-
-            return (
-              <BlockErrorBoundary key={stableKey}>
-                <Renderer payload={block.payload as never} projectPath={projectPath} />
-              </BlockErrorBoundary>
-            )
-          })}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-type StructuredGroup =
-  | { kind: 'reasoning_group'; blocks: Array<Extract<StructuredBlock, { kind: 'reasoning' }>> }
-  | { kind: 'attachment_group'; blocks: Array<Extract<StructuredBlock, { kind: 'attachment' }>> }
-  | {
-      kind: 'compaction_group'
-      blocks: Array<Extract<StructuredBlock, { kind: 'compaction_notice' }>>
-    }
-  | {
-      kind: 'truncation_group'
-      blocks: Array<Extract<StructuredBlock, { kind: 'truncation_notice' }>>
-    }
-  | {
-      kind: 'tool_group'
-      blocks: Array<
-        Exclude<
-          StructuredBlock,
-          {
-            kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice'
-          }
-        >
-      >
-    }
-
-function groupStructuredBlocks(blocks: StructuredBlock[]): StructuredGroup[] {
-  const groups: StructuredGroup[] = []
-
-  for (const block of blocks) {
-    const nextKind =
-      block.kind === 'reasoning'
-        ? 'reasoning_group'
-        : block.kind === 'attachment'
-          ? 'attachment_group'
-          : block.kind === 'compaction_notice'
-            ? 'compaction_group'
-            : block.kind === 'truncation_notice'
-              ? 'truncation_group'
-              : block.kind === 'approval_notice'
-                ? 'tool_group'
-                : 'tool_group'
-    const current = groups.at(-1)
-
-    if (current && current.kind === nextKind) {
-      if (current.kind === 'reasoning_group' && block.kind === 'reasoning') {
-        current.blocks.push(block)
-        continue
-      }
-
-      if (
-        current.kind === 'tool_group' &&
-        block.kind !== 'reasoning' &&
-        block.kind !== 'attachment' &&
-        block.kind !== 'compaction_notice' &&
-        block.kind !== 'truncation_notice'
-      ) {
-        current.blocks.push(block)
-        continue
-      }
-
-      if (current.kind === 'attachment_group' && block.kind === 'attachment') {
-        current.blocks.push(block)
-        continue
-      }
-
-      if (current.kind === 'compaction_group' && block.kind === 'compaction_notice') {
-        current.blocks.push(block)
-        continue
-      }
-
-      if (current.kind === 'truncation_group' && block.kind === 'truncation_notice') {
-        current.blocks.push(block)
-        continue
-      }
-
-      continue
-    }
-
-    if (nextKind === 'reasoning_group') {
-      groups.push({
-        kind: nextKind,
-        blocks: [block as Extract<StructuredBlock, { kind: 'reasoning' }>],
-      })
-    } else if (nextKind === 'attachment_group') {
-      groups.push({
-        kind: nextKind,
-        blocks: [block as Extract<StructuredBlock, { kind: 'attachment' }>],
-      })
-    } else if (nextKind === 'compaction_group') {
-      groups.push({
-        kind: nextKind,
-        blocks: [block as Extract<StructuredBlock, { kind: 'compaction_notice' }>],
-      })
-    } else if (nextKind === 'truncation_group') {
-      groups.push({
-        kind: nextKind,
-        blocks: [block as Extract<StructuredBlock, { kind: 'truncation_notice' }>],
-      })
-    } else {
-      groups.push({
-        kind: nextKind,
-        blocks: [
-          block as Exclude<
-            StructuredBlock,
-            {
-              kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice'
-            }
-          >,
-        ],
-      })
-    }
-  }
-
-  return groups
-}
-
-function describeToolBlock(
-  block: Exclude<
-    StructuredBlock,
-    {
-      kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice'
-    }
-  >
-): string {
-  switch (block.kind) {
-    case 'tool_call':
-      return block.payload.toolName
-    case 'skill_invocation':
-      return `Skill: ${block.payload.skillName}`
-    case 'subagent_invocation':
-      return `Subagent: ${block.payload.agentName}`
-    default:
-      return 'Action'
-  }
-}
-
-function AttachmentGroup({
-  blocks,
-}: {
-  blocks: Array<Extract<StructuredBlock, { kind: 'attachment' }>>
-}) {
-  const [viewerIndex, setViewerIndex] = useState<number | null>(null)
-  const imageBlocks = blocks.filter((block) => block.payload.mime.startsWith('image/'))
-
-  return (
-    <>
-      <div className="space-y-2">
-        {blocks.map((block, index) => {
-          const isImage = block.payload.mime.startsWith('image/')
-          const imageIndex = imageBlocks.findIndex(
-            (candidate) => candidate.payload.url === block.payload.url
-          )
-
-          return (
-            <div
-              key={`${block.payload.filename}-${index}`}
-              className="flex items-center gap-3 rounded-xl border border-white/10 bg-slate-800/60 px-3 py-2 text-xs text-slate-100"
-              data-testid="a2ui-attachment-card"
-            >
-              {isImage ? (
-                <button
-                  type="button"
-                  onClick={() => setViewerIndex(imageIndex)}
-                  className="shrink-0 overflow-hidden rounded-lg border border-white/10"
-                >
-                  <img
-                    src={block.payload.url}
-                    alt={block.payload.filename}
-                    className="h-14 w-14 object-cover"
-                  />
-                </button>
-              ) : (
-                <div className="flex h-14 w-14 items-center justify-center rounded-lg border border-white/10 bg-slate-900 text-[10px] uppercase tracking-[0.18em] text-slate-400">
-                  File
-                </div>
-              )}
-
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm text-slate-100">{block.payload.filename}</p>
-                <p className="mt-1 truncate text-[11px] text-slate-400">{block.payload.mime}</p>
-              </div>
-
-              <a
-                href={block.payload.url}
-                download={block.payload.filename}
-                className="rounded-full border border-white/10 px-3 py-1.5 text-[11px] text-teal-200"
-              >
-                Download
-              </a>
-            </div>
-          )
-        })}
-      </div>
-
-      {viewerIndex !== null && imageBlocks[viewerIndex] ? (
-        <div className="fixed inset-0 z-[80] bg-slate-950/92 p-4 backdrop-blur-sm">
-          <div className="mx-auto flex h-full max-w-5xl flex-col">
-            <div className="flex items-center justify-between gap-3 pb-4">
-              <div>
-                <p className="text-sm font-medium text-slate-100">
-                  {imageBlocks[viewerIndex].payload.filename}
-                </p>
-                <p className="text-xs text-slate-400">
-                  {viewerIndex + 1} / {imageBlocks.length}
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <a
-                  href={imageBlocks[viewerIndex].payload.url}
-                  download={imageBlocks[viewerIndex].payload.filename}
-                  className="rounded-full border border-white/10 px-3 py-2 text-sm text-teal-200"
-                >
-                  Download
-                </a>
-                <button
-                  type="button"
-                  onClick={() => setViewerIndex(null)}
-                  className="rounded-full border border-white/10 px-3 py-2 text-sm text-slate-100"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-
-            <div className="flex min-h-0 flex-1 items-center justify-between gap-3">
-              <button
-                type="button"
-                onClick={() =>
-                  setViewerIndex((current) => (current === null ? 0 : Math.max(0, current - 1)))
-                }
-                disabled={viewerIndex === 0}
-                className="rounded-full border border-white/10 px-4 py-3 text-2xl text-slate-100 disabled:opacity-30"
-              >
-                ‹
-              </button>
-
-              <div className="flex min-h-0 flex-1 items-center justify-center">
-                <img
-                  src={imageBlocks[viewerIndex].payload.url}
-                  alt={imageBlocks[viewerIndex].payload.filename}
-                  className="max-h-full max-w-full rounded-xl border border-white/10 object-contain"
-                />
-              </div>
-
-              <button
-                type="button"
-                onClick={() =>
-                  setViewerIndex((current) =>
-                    current === null ? 0 : Math.min(imageBlocks.length - 1, current + 1)
-                  )
-                }
-                disabled={viewerIndex === imageBlocks.length - 1}
-                className="rounded-full border border-white/10 px-4 py-3 text-2xl text-slate-100 disabled:opacity-30"
-              >
-                ›
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : null}
-    </>
-  )
-}
-
-function CompactionGroup({
-  blocks,
-}: {
-  blocks: Array<Extract<StructuredBlock, { kind: 'compaction_notice' }>>
-}) {
-  return (
-    <div className="space-y-2">
-      {blocks.map((block, index) => (
-        <CompactionNoticeCard
-          key={`compaction-${block.payload.auto}-${block.payload.overflow}-${index}`}
-          payload={block.payload}
-        />
-      ))}
-    </div>
-  )
-}
-
-function TruncationGroup({
-  blocks,
-}: {
-  blocks: Array<Extract<StructuredBlock, { kind: 'truncation_notice' }>>
-}) {
-  return (
-    <div className="space-y-2">
-      {blocks.map((block, index) => (
-        <TruncationNoticeCard
-          key={`truncation-${block.payload.tokenLimit}-${block.payload.tokensRemoved}-${index}`}
-          payload={block.payload}
-        />
-      ))}
-    </div>
-  )
-}
-
-function summarizeToolCall(payload: A2UIToolCallPayload, projectPath?: string | null): string {
-  if (typeof payload.args === 'string' && payload.args.trim()) {
-    return relativizeText(payload.args.trim(), projectPath)
-  }
-
-  if (payload.args && typeof payload.args === 'object') {
-    const record = payload.args as Record<string, unknown>
-    for (const key of [
-      'description',
-      'command',
-      'filePath',
-      'pattern',
-      'question',
-      'prompt',
-      'url',
-    ]) {
-      if (typeof record[key] === 'string' && record[key].trim()) {
-        return relativizeText(record[key].trim(), projectPath)
-      }
-    }
-  }
-
-  return payload.done ? 'Completed' : 'Running…'
-}
-
-function relativizeValue(value: unknown, projectPath?: string | null): unknown {
-  if (!projectPath) return value
-  if (typeof value === 'string') return relativizeText(value, projectPath)
-  if (Array.isArray(value)) return value.map((item) => relativizeValue(item, projectPath))
-  if (typeof value === 'object' && value !== null) {
-    return Object.fromEntries(
-      Object.entries(value as Record<string, unknown>).map(([key, entry]) => [
-        key,
-        relativizeValue(entry, projectPath),
-      ])
-    )
-  }
-
-  return value
-}
-
-function relativizeText(value: string, projectPath?: string | null): string {
-  if (!projectPath) return value
-  return value.replaceAll(projectPath, '.')
-}
-
-function stripReasoningHeading(text: string, title?: string): string {
-  if (!title) {
-    return text
-  }
-
-  const normalizedTitle = title.trim()
-  const withBoldHeading = new RegExp(`^\\*\\*${escapeRegExp(normalizedTitle)}\\*\\*\\s*\n*`, 'i')
-  return text.replace(withBoldHeading, '').trimStart()
-}
-
-function escapeRegExp(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
diff --git a/frontend/src/components/chat/ToolCallCard.svelte b/frontend/src/components/chat/ToolCallCard.svelte
new file mode 100644
index 0000000..45cdc3e
--- /dev/null
+++ b/frontend/src/components/chat/ToolCallCard.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { A2UIToolCallPayload } from './a2ui-types.js'
+
+  interface Props {
+    payload: A2UIToolCallPayload
+    projectPath?: string | null
+  }
+
+  const { payload, projectPath = null }: Props = $props()
+
+  let open = $state(false)
+
+  const argsText = $derived(
+    payload.args !== undefined
+      ? typeof payload.args === 'string'
+        ? relativizeText(payload.args, projectPath)
+        : JSON.stringify(relativizeValue(payload.args, projectPath), null, 2)
+      : null
+  )
+
+  const summary = $derived(summarizeToolCall(payload, projectPath))
+
+  function relativizeValue(value: unknown, pp?: string | null): unknown {
+    if (!pp) return value
+    if (typeof value === 'string') return relativizeText(value, pp)
+    if (Array.isArray(value)) return value.map((item) => relativizeValue(item, pp))
+    if (typeof value === 'object' && value !== null) {
+      return Object.fromEntries(
+        Object.entries(value as Record<string, unknown>).map(([key, entry]) => [
+          key,
+          relativizeValue(entry, pp),
+        ])
+      )
+    }
+    return value
+  }
+
+  function relativizeText(value: string, pp?: string | null): string {
+    if (!pp) return value
+    return value.replaceAll(pp, '.')
+  }
+
+  function summarizeToolCall(p: A2UIToolCallPayload, pp?: string | null): string {
+    if (typeof p.args === 'string' && p.args.trim()) {
+      return relativizeText(p.args.trim(), pp)
+    }
+    if (p.args && typeof p.args === 'object') {
+      const record = p.args as Record<string, unknown>
+      for (const key of ['description', 'command', 'filePath', 'pattern', 'question', 'prompt', 'url']) {
+        if (typeof record[key] === 'string' && (record[key] as string).trim()) {
+          return relativizeText((record[key] as string).trim(), pp)
+        }
+      }
+    }
+    return p.done ? 'Completed' : 'Running…'
+  }
+</script>
+
+<div
+  class="rounded-xl border border-white/10 bg-slate-800/60 px-3 py-2 text-xs"
+  data-testid="a2ui-tool-call-card"
+>
+  <button
+    type="button"
+    onclick={() => { open = !open }}
+    class="flex w-full items-center justify-between gap-3 text-left"
+  >
+    <div>
+      <p class="font-mono font-semibold text-teal-300">{payload.toolName}</p>
+      <p class="mt-1 text-sm text-slate-200">{summary}</p>
+    </div>
+    <span class="rounded-full border border-white/10 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-slate-300">
+      {open ? 'Hide' : 'Open'}
+    </span>
+  </button>
+
+  {#if open}
+    <div class="mt-3 space-y-3 border-t border-white/10 pt-3">
+      {#if argsText}
+        <div>
+          <p class="text-slate-400">Input</p>
+          <pre class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap text-slate-200">{argsText}</pre>
+        </div>
+      {/if}
+      {#if payload.done && payload.result !== undefined}
+        <div>
+          <p class="text-slate-400">Result</p>
+          <pre class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap text-slate-200">{payload.result}</pre>
+        </div>
+      {/if}
+      {#if !payload.done}
+        <p class="italic text-slate-500">Running…</p>
+      {/if}
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/components/chat/ToolGroup.svelte b/frontend/src/components/chat/ToolGroup.svelte
new file mode 100644
index 0000000..f36a589
--- /dev/null
+++ b/frontend/src/components/chat/ToolGroup.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type {
+    A2UIApprovalNoticePayload,
+    A2UIFileOperationPayload,
+    A2UIModelSwitchPayload,
+    A2UISkillInvocationPayload,
+    A2UISubagentInvocationPayload,
+    A2UIToolCallPayload,
+    StructuredBlock,
+  } from './a2ui-types.js'
+  import ToolCallCard from './ToolCallCard.svelte'
+
+  type ToolBlock = Exclude<StructuredBlock, { kind: 'reasoning' | 'attachment' | 'compaction_notice' | 'truncation_notice' }>
+
+  interface Props {
+    blocks: ToolBlock[]
+    summaryTitle?: string | null
+    projectPath?: string | null
+  }
+
+  const { blocks, summaryTitle = null, projectPath = null }: Props = $props()
+
+  let open = $state(false)
+
+  const summary = $derived(
+    summaryTitle?.trim() ||
+    (blocks.length === 1 ? describeToolBlock(blocks[0]) : `${blocks.length} tool calls`)
+  )
+
+  function describeToolBlock(block: ToolBlock): string {
+    switch (block.kind) {
+      case 'tool_call':
+        return block.payload.toolName
+      case 'skill_invocation':
+        return `Skill: ${block.payload.skillName}`
+      case 'subagent_invocation':
+        return `Subagent: ${block.payload.agentName}`
+      default:
+        return 'Action'
+    }
+  }
+</script>
+
+<div class="rounded-xl border border-white/10 bg-slate-800/55 px-3 py-2 text-xs text-slate-100">
+  <button
+    type="button"
+    onclick={() => { open = !open }}
+    class="flex w-full items-center justify-between gap-3 text-left"
+  >
+    <div>
+      <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+        Actions
+      </p>
+      <p class="mt-1 text-sm text-slate-100">{summary}</p>
+    </div>
+    <span class="rounded-full border border-white/10 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-slate-300">
+      {open ? 'Hide' : `${blocks.length}`}
+    </span>
+  </button>
+
+  {#if open}
+    <div class="mt-3 space-y-2 border-t border-white/10 pt-3">
+      {#each blocks as block, i (('callId' in block.payload) ? `${block.kind}-${block.payload.callId}` : `${block.kind}-${i}`)}
+        {#if block.kind === 'tool_call'}
+          <ToolCallCard payload={block.payload as A2UIToolCallPayload} {projectPath} />
+        {:else if block.kind === 'skill_invocation'}
+          {@const p = block.payload as A2UISkillInvocationPayload}
+          <div
+            class="rounded-xl border border-cyan-500/20 bg-cyan-500/8 px-3 py-2 text-xs text-cyan-50"
+            data-testid="a2ui-skill-card"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <p class="font-mono font-semibold text-cyan-200">Skill: {p.skillName}</p>
+              <span class="rounded-full border border-cyan-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-cyan-200">
+                {p.status}
+              </span>
+            </div>
+            {#if p.result}
+              <pre class="mt-2 max-h-32 overflow-auto whitespace-pre-wrap text-slate-200">{p.result}</pre>
+            {/if}
+          </div>
+        {:else if block.kind === 'subagent_invocation'}
+          {@const p = block.payload as A2UISubagentInvocationPayload}
+          <div
+            class="rounded-xl border border-fuchsia-500/20 bg-fuchsia-500/8 px-3 py-2 text-xs text-fuchsia-50"
+            data-testid="a2ui-subagent-card"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <p class="font-mono font-semibold text-fuchsia-200">Subagent: {p.agentName}</p>
+              <span class="rounded-full border border-fuchsia-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-fuchsia-200">
+                {p.status}
+              </span>
+            </div>
+            {#if p.prompt}
+              <p class="mt-2 whitespace-pre-wrap text-slate-200/90">{p.prompt}</p>
+            {/if}
+            {#if p.result}
+              <pre class="mt-2 max-h-32 overflow-auto whitespace-pre-wrap text-slate-200">{p.result}</pre>
+            {/if}
+          </div>
+        {:else if block.kind === 'model_switch'}
+          {@const p = block.payload as A2UIModelSwitchPayload}
+          <div
+            class="rounded-xl border border-sky-500/20 bg-sky-500/8 px-3 py-2 text-xs text-sky-50"
+            data-testid="a2ui-model-switch-card"
+          >
+            <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-300">Model Switch</p>
+            <p class="mt-1 text-sm text-sky-50">
+              {p.fromModelId ? `${p.fromModelId} -> ${p.toModelId}` : p.toModelId}
+            </p>
+          </div>
+        {:else if block.kind === 'file_operation'}
+          {@const p = block.payload as A2UIFileOperationPayload}
+          <div
+            class="rounded-xl border border-violet-500/20 bg-violet-500/8 px-3 py-2 text-xs text-violet-50"
+            data-testid="a2ui-file-operation-card"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <p class="font-mono font-semibold text-violet-200 capitalize">{p.operation}</p>
+              {#if p.source}
+                <span class="rounded-full border border-violet-500/20 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-violet-200">
+                  {p.source}
+                </span>
+              {/if}
+            </div>
+            <p class="mt-1 break-all text-sm text-violet-50">{p.path}</p>
+          </div>
+        {:else if block.kind === 'approval_notice'}
+          {@const p = block.payload as A2UIApprovalNoticePayload}
+          <div
+            class="rounded-xl border border-rose-500/20 bg-rose-500/8 px-3 py-2 text-xs text-rose-50"
+            data-testid="a2ui-approval-card"
+          >
+            <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-rose-300">Approval</p>
+            <p class="mt-1 text-sm text-rose-50">{p.title}</p>
+            {#if p.message}
+              <p class="mt-1 text-rose-100/80">{p.message}</p>
+            {/if}
+            <p class="mt-1 uppercase tracking-[0.14em] text-rose-200">{p.state}</p>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/components/chat/TurnFooter.svelte b/frontend/src/components/chat/TurnFooter.svelte
new file mode 100644
index 0000000..daea162
--- /dev/null
+++ b/frontend/src/components/chat/TurnFooter.svelte
@@ -0,0 +1,246 @@
+<script lang="ts">
+  import type { ChatMessage } from '../../store/chatStore.svelte.js'
+  import { parseUnifiedDiff } from './parseUnifiedDiff.js'
+
+  interface Props {
+    message: ChatMessage | null
+    compact?: boolean
+    projectPath?: string | null
+    sessionId?: string | null
+    turnInfoOverride?: ChatMessage['turnInfo']
+  }
+
+  const {
+    message,
+    compact = false,
+    projectPath = null,
+    sessionId = null,
+    turnInfoOverride,
+  }: Props = $props()
+
+  const turnInfo = $derived(turnInfoOverride ?? message?.turnInfo)
+  const modifiedFiles = $derived(turnInfo?.modifiedFiles ?? [])
+  const patches = $derived(turnInfo?.patches ?? [])
+  const chipClass = $derived(compact ? 'border border-teal-950/20 text-teal-950/80' : 'border border-white/10 text-slate-200')
+  const showCopy = $derived(!compact && Boolean(message?.content))
+  const patchLabel = $derived(formatPatchLabel(patches.length, modifiedFiles.length))
+
+  let showFiles = $state(false)
+  let diffByHash = $state<Record<string, string>>({})
+  let diffErrorByHash = $state<Record<string, string>>({})
+  let visibleDiffHashes = $state<Record<string, boolean>>({})
+  let loadingHash = $state<string | null>(null)
+
+  function relativizeFile(file: string, pp?: string | null): string {
+    if (!pp || !file.startsWith(pp)) return file
+    return `.${file.slice(pp.length)}`
+  }
+
+  function shortHash(hash: string): string {
+    return hash.slice(0, 7)
+  }
+
+  function formatPatchLabel(patchCount: number, modifiedFileCount: number): string {
+    if (patchCount > 0) {
+      return `Modified ${modifiedFileCount} file${modifiedFileCount === 1 ? '' : 's'} across ${patchCount} patch${patchCount === 1 ? '' : 'es'}`
+    }
+    return `Modified ${modifiedFileCount} file${modifiedFileCount === 1 ? '' : 's'}`
+  }
+
+  function formatDuration(durationMs: number): string {
+    if (durationMs < 1000) return `${durationMs}ms`
+    return `${(durationMs / 1000).toFixed(1)}s`
+  }
+
+  function formatPatchDelta(additions?: number, deletions?: number): string {
+    return `+${additions ?? 0} -${deletions ?? 0}`
+  }
+
+  async function loadDiff(hash: string, nextHash: string) {
+    if (!sessionId || loadingHash === hash) return
+    loadingHash = hash
+    const errMap = { ...diffErrorByHash }
+    delete errMap[hash]
+    diffErrorByHash = errMap
+    try {
+      const r = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/patch-diff`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ fromHash: hash, toHash: nextHash }),
+      })
+      if (!r.ok) throw new Error(`status ${r.status}`)
+      const payload = (await r.json()) as { diff: string }
+      diffByHash = { ...diffByHash, [hash]: payload.diff }
+      visibleDiffHashes = { ...visibleDiffHashes, [hash]: true }
+    } catch {
+      diffErrorByHash = { ...diffErrorByHash, [hash]: 'Unable to load this patch diff.' }
+    } finally {
+      if (loadingHash === hash) loadingHash = null
+    }
+  }
+</script>
+
+{#if turnInfo || modifiedFiles.length > 0 || patches.length > 0}
+  <div class={`${compact ? 'mt-3 border-teal-950/20 pt-2 text-teal-950/70' : 'mt-5 border-white/8 pt-3 text-slate-400'} border-t text-xs`}>
+    <p class="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] opacity-70">
+      {compact ? 'Turn Input' : 'Turn Outcome'}
+    </p>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div class="flex flex-wrap items-center gap-2">
+        {#if modifiedFiles.length > 0 || patches.length > 0}
+          <button
+            type="button"
+            onclick={() => { showFiles = !showFiles }}
+            aria-expanded={showFiles}
+            class={`inline-flex items-center gap-2 rounded-full px-3 py-1 ${chipClass}`}
+          >
+            <span class="h-4 w-0.5 rounded bg-amber-400"></span>
+            <span>{patchLabel}</span>
+            <span class="text-[10px] uppercase tracking-[0.14em]">{showFiles ? 'Hide' : 'Show'}</span>
+          </button>
+        {/if}
+        {#if turnInfo?.providerId}<span>{turnInfo.providerId}</span>{/if}
+        {#if turnInfo?.modelId}<span>{turnInfo.modelId}</span>{/if}
+        {#if turnInfo?.mode}<span>{turnInfo.mode} mode</span>{/if}
+        {#if turnInfo?.durationMs}<span>{formatDuration(turnInfo.durationMs)}</span>{/if}
+      </div>
+
+      {#if showCopy}
+        <button
+          type="button"
+          onclick={() => void navigator.clipboard?.writeText(message?.content ?? '')}
+          class={`rounded-full px-3 py-1 ${chipClass}`}
+        >
+          Copy
+        </button>
+      {/if}
+    </div>
+
+    {#if showFiles && (modifiedFiles.length > 0 || patches.length > 0)}
+      <div class={`${compact ? 'mt-3 border-teal-950/15 bg-teal-50/20 text-teal-950/85' : 'mt-4 border-white/8 bg-slate-900/55 text-slate-200'} w-full rounded-xl border px-3 py-3`}>
+        {#if patches.length > 0}
+          <div class="space-y-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.18em]">Patch Summary</p>
+            <div class="space-y-3">
+              {#each patches as patch, patchIndex (patch.hash || `patch-${patchIndex}`)}
+                <div class="rounded-lg border border-current/10 px-3 py-2">
+                  <div class="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.14em] opacity-80">
+                    <span>Patch {patchIndex + 1}</span>
+                    {#if patch.hash}
+                      <code class="rounded bg-black/10 px-1.5 py-0.5 normal-case tracking-normal">{shortHash(patch.hash)}</code>
+                    {/if}
+                    {#if patch.additions !== undefined || patch.deletions !== undefined}
+                      <span class="normal-case tracking-normal opacity-90">{formatPatchDelta(patch.additions, patch.deletions)}</span>
+                    {/if}
+                  </div>
+                  <div class="mt-2 space-y-2 text-sm">
+                    {#each patch.files as file (`${patch.hash}-${file}`)}
+                      <div class="flex items-start gap-3">
+                        <span class="mt-1.5 h-4 w-0.5 rounded bg-amber-400"></span>
+                        <code class="break-all rounded bg-black/10 px-1.5 py-0.5 font-mono text-[12px]">
+                          {relativizeFile(file, projectPath)}
+                        </code>
+                      </div>
+                    {/each}
+                  </div>
+                  {#if patch.nextHash}
+                    <div class="mt-3">
+                      {#if diffErrorByHash[patch.hash]}
+                        <p class="mb-2 text-[11px] text-rose-200/85">{diffErrorByHash[patch.hash]}</p>
+                      {/if}
+                      <button
+                        type="button"
+                        onclick={() => {
+                          if (visibleDiffHashes[patch.hash]) {
+                            visibleDiffHashes = { ...visibleDiffHashes, [patch.hash]: false }
+                            return
+                          }
+                          if (diffByHash[patch.hash] !== undefined) {
+                            visibleDiffHashes = { ...visibleDiffHashes, [patch.hash]: true }
+                            return
+                          }
+                          void loadDiff(patch.hash, patch.nextHash!)
+                        }}
+                        disabled={loadingHash === patch.hash}
+                        class="rounded-full border border-current/15 px-3 py-1 text-[11px] uppercase tracking-[0.14em] opacity-90 disabled:opacity-50"
+                      >
+                        {loadingHash === patch.hash
+                          ? 'Loading diff'
+                          : visibleDiffHashes[patch.hash]
+                            ? 'Hide diff'
+                            : diffErrorByHash[patch.hash]
+                              ? 'Retry diff'
+                              : diffByHash[patch.hash] !== undefined
+                                ? 'Show diff'
+                                : 'View diff'}
+                      </button>
+                      {#if visibleDiffHashes[patch.hash] && diffByHash[patch.hash] !== undefined}
+                        {@const parsedFiles = parseUnifiedDiff(diffByHash[patch.hash])}
+                        <div class="mt-3 overflow-hidden rounded-lg border border-current/10 bg-black/10">
+                          {#if parsedFiles.length === 0}
+                            <pre class="overflow-x-auto px-3 py-3 text-[11px] leading-6 text-slate-200"><code>{diffByHash[patch.hash] || 'Diff unavailable.'}</code></pre>
+                          {:else}
+                            <div class="space-y-3 px-3 py-3">
+                              {#each parsedFiles as file (file.header)}
+                                <div class="overflow-hidden rounded-lg border border-white/8 bg-slate-950/60">
+                                  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-white/8 px-3 py-2">
+                                    <p class="break-all text-xs font-semibold text-slate-100">{file.displayPath}</p>
+                                    <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.14em]">
+                                      <span class="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-emerald-200">+{file.additions}</span>
+                                      <span class="rounded-full border border-rose-500/20 bg-rose-500/10 px-2 py-0.5 text-rose-200">-{file.deletions}</span>
+                                    </div>
+                                  </div>
+                                  <div class="overflow-x-auto font-mono text-[11px] leading-5">
+                                    {#each file.hunks as hunk (`${file.header}-${hunk.header}`)}
+                                      <div>
+                                        <div class="bg-slate-900/70 px-3 py-1.5 text-[10px] text-sky-200">{hunk.header}</div>
+                                        {#each hunk.lines as line, li (`${hunk.header}-${li}`)}
+                                          <div
+                                            class={
+                                              line.kind === 'addition'
+                                                ? 'bg-emerald-500/8 px-3 py-1 text-emerald-50'
+                                                : line.kind === 'deletion'
+                                                  ? 'bg-rose-500/8 px-3 py-1 text-rose-50'
+                                                  : line.kind === 'note'
+                                                    ? 'bg-slate-900/90 px-3 py-1 italic text-slate-500'
+                                                    : 'bg-slate-950/30 px-3 py-1 text-slate-200'
+                                            }
+                                          >
+                                            <span class="mr-2 text-slate-500">
+                                              {line.kind === 'addition' ? '+' : line.kind === 'deletion' ? '-' : line.kind === 'note' ? '\\' : ' '}
+                                            </span>
+                                            {line.content || ' '}
+                                          </div>
+                                        {/each}
+                                      </div>
+                                    {/each}
+                                  </div>
+                                </div>
+                              {/each}
+                            </div>
+                          {/if}
+                        </div>
+                      {/if}
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          </div>
+        {:else}
+          <p class="text-[10px] font-semibold uppercase tracking-[0.18em]">Modified Files</p>
+          <div class="mt-3 space-y-2 text-sm">
+            {#each modifiedFiles as file (file)}
+              <div class="flex items-start gap-3">
+                <span class="mt-1.5 h-4 w-0.5 rounded bg-amber-400"></span>
+                <code class="break-all rounded bg-black/10 px-1.5 py-0.5 font-mono text-[12px]">
+                  {relativizeFile(file, projectPath)}
+                </code>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/frontend/src/components/chat/icons/AgentIcon.svelte b/frontend/src/components/chat/icons/AgentIcon.svelte
new file mode 100644
index 0000000..30de7ef
--- /dev/null
+++ b/frontend/src/components/chat/icons/AgentIcon.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import openCodeLogoUrl from '../../../assets/agents/opencode.png'
+
+  interface Props {
+    agentId?: string
+    class?: string
+  }
+
+  const { agentId, class: className }: Props = $props()
+
+  const id = $derived((agentId?.toLowerCase()) || '')
+  const baseClasses = $derived(`shrink-0 ${className || ''}`)
+</script>
+
+{#if id.includes('gemini')}
+  <svg viewBox="0 0 24 24" fill="currentColor" class={baseClasses}>
+    <path
+      d="M11.996 0c0 6.626-5.37 11.996-11.996 11.996 6.626 0 11.996 5.37 11.996 11.996 0-6.626 5.37-11.996 11.996-11.996-6.626 0-11.996-5.37-11.996-11.996z"
+      fill="#1A73E8"
+    />
+  </svg>
+{:else if id.includes('copilot') || id.includes('github')}
+  <svg viewBox="0 0 24 24" fill="currentColor" class={baseClasses}>
+    <path d="M11.99 0A12 12 0 000 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.03c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.81 1.3 3.49 1 .11-.77.42-1.3.76-1.6-2.66-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.17 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 016 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.65.24 2.87.12 3.17.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.49 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.69.83.58A12 12 0 0024 12 12 12 0 0011.99 0z" />
+  </svg>
+{:else if id.includes('codex') || id.includes('openai')}
+  <svg viewBox="0 0 24 24" class={baseClasses} aria-hidden="true">
+    <rect width="24" height="24" rx="4" fill="#000000" />
+    <path
+      fill="#ffffff"
+      d="M21.55 10.004a5.416 5.416 0 00-.478-4.501 5.47 5.47 0 00-5.882-2.62 5.414 5.414 0 00-4.075-1.82 5.468 5.468 0 00-5.21 3.79 5.412 5.412 0 00-3.61 2.634 5.469 5.469 0 00.68 6.418 5.416 5.416 0 00.477 4.502 5.469 5.469 0 005.883 2.62 5.414 5.414 0 004.075 1.82 5.469 5.469 0 005.21-3.79 5.413 5.413 0 003.61-2.634 5.469 5.469 0 00-.68-6.419zm-8.087 11.284a4.046 4.046 0 01-2.598-.94c.033-.018.09-.05.127-.074l4.312-2.49a.699.699 0 00.354-.61V10.86l1.824 1.053a.065.065 0 01.035.05v5.03a4.06 4.06 0 01-4.054 4.294zm-8.718-3.724a4.044 4.044 0 01-.484-2.718c.032.02.088.054.127.076l4.312 2.49a.7.7 0 00.708 0l5.263-3.039v2.105a.068.068 0 01-.027.057L10.37 18.6a4.06 4.06 0 01-5.538-1.037zm-1.136-9.41a4.04 4.04 0 012.114-1.78v5.11a.698.698 0 00.354.609l5.263 3.039-1.824 1.053a.066.066 0 01-.063.007L5.196 13.77a4.06 4.06 0 01-.587-5.616zm14.987 3.483L13.33 8.598l1.824-1.052a.066.066 0 01.063-.008l4.252 2.454a4.057 4.057 0 01-.62 7.32V12.2a.699.699 0 00-.354-.609zm1.816-2.724a5.993 5.993 0 00-.127-.075l-4.31-2.49a.7.7 0 00-.71 0L10.01 9.387V7.282a.067.067 0 01.027-.057l4.253-2.453a4.058 4.058 0 016.123 4.201zm-11.44 3.757L7.148 11.62a.067.067 0 01-.035-.051V6.539a4.057 4.057 0 016.638-3.117 5.539 5.539 0 00-.127.074L9.312 6.005a.699.699 0 00-.354.61l-.001 6.155zm.99-2.134L12 9.87l2.042 1.178v2.356L12 14.583l-2.042-1.178V10.56z"
+    />
+  </svg>
+{:else if id.includes('claude')}
+  <svg viewBox="0 6.603 1192.672 1193.397" class={baseClasses} aria-hidden="true">
+    <path
+      fill="#d97757"
+      d="m233.96 800.215 234.684-131.678 3.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035 2.738-17.477 23.84-16.027 34.147 2.98 75.463 5.155 113.235 7.812 82.147 4.832 121.692 12.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093 32.618-35.92 43.812 2.98 11.195 2.98 44.375 34.147 94.792 73.37 123.786 91.167 18.12 15.06 7.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416 20.537-6.604 49.53 6.604 20.86 18.121 30.765 70.39 49.852 110.818 77.315 150.684 22.631 44.698 12.08 41.396 4.51 12.645h7.813v-7.248l6.362-84.886 11.759-104.215 11.436-134.094 3.946-37.772 18.685-45.262 37.127-24.482 28.994 13.852 23.839 34.148-3.303 22.067-14.174 92.134-27.785 144.323-18.121 96.644h10.55l12.08-12.08 48.887-64.913 82.147-102.685 36.242-40.752 42.282-45.02 27.14-21.423h51.303l37.772 56.135-16.913 57.986-52.832 67.007-43.812 56.779-62.82 84.563-39.22 67.651 3.623 5.396 9.343-.886 141.906-30.201 76.671-13.852 91.49-15.705 41.396 19.329 4.51 19.65-16.269 40.189-97.852 24.16-114.764 22.954-170.9 40.43-2.093 1.53 2.416 2.98 76.993 7.248 32.94 1.771h80.617l150.12 11.195 39.222 25.933 23.517 31.732-3.946 24.16-60.403 30.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362 53.154 99.624 89.96 124.752 115.973 6.362 28.671-16.027 22.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067 32.296 116.537 175.167 6.04 53.719-8.456 17.476-30.201 10.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926 3.947-33.503 360.886-15.705 18.443-36.243 13.852-30.201-22.953-16.027-37.127 16.027-73.37 19.329-95.758 15.704-76.107 14.175-94.55 8.456-31.41-.563-2.094-6.927.886-71.275 97.852-108.402 146.497-85.772 91.812-20.537 8.134-35.597-18.443 3.301-32.94 19.893-29.315 118.712-151.007 71.597-93.583 46.228-54.04-.322-7.813h-2.738l-315.302 181.059-91.731 52.27-32.296 6.604-32.618-16.912z"
+    />
+  </svg>
+{:else if id.includes('opencode')}
+  <img src={openCodeLogoUrl} alt="" aria-hidden="true" class={baseClasses} />
+{:else}
+  <svg viewBox="0 0 24 24" fill="currentColor" class={baseClasses}>
+    <path
+      d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+{/if}
diff --git a/frontend/src/components/chat/icons/AgentIcon.tsx b/frontend/src/components/chat/icons/AgentIcon.tsx
deleted file mode 100644
index ac7c9fa..0000000
--- a/frontend/src/components/chat/icons/AgentIcon.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import openCodeLogoUrl from '../../../assets/agents/opencode.png'
-
-interface AgentIconProps {
-  agentId?: string
-  className?: string
-}
-
-export function AgentIcon({ agentId, className }: AgentIconProps) {
-  const id = agentId?.toLowerCase() || ''
-  const baseClasses = `shrink-0 ${className || ''}`
-
-  if (id.includes('gemini')) {
-    return (
-      <svg viewBox="0 0 24 24" fill="currentColor" className={baseClasses}>
-        <path
-          d="M11.996 0c0 6.626-5.37 11.996-11.996 11.996 6.626 0 11.996 5.37 11.996 11.996 0-6.626 5.37-11.996 11.996-11.996-6.626 0-11.996-5.37-11.996-11.996z"
-          fill="#1A73E8"
-        />
-      </svg>
-    )
-  }
-
-  if (id.includes('copilot') || id.includes('github')) {
-    return (
-      <svg viewBox="0 0 24 24" fill="currentColor" className={baseClasses}>
-        <path d="M11.99 0A12 12 0 000 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.03c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.81 1.3 3.49 1 .11-.77.42-1.3.76-1.6-2.66-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.17 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 016 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.65.24 2.87.12 3.17.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.49 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.69.83.58A12 12 0 0024 12 12 12 0 0011.99 0z" />
-      </svg>
-    )
-  }
-
-  if (id.includes('codex') || id.includes('openai')) {
-    // OpenAI logo: white mark on black rounded square background
-    return (
-      <svg viewBox="0 0 24 24" className={baseClasses} aria-hidden="true">
-        <rect width="24" height="24" rx="4" fill="#000000" />
-        <path
-          fill="#ffffff"
-          d="M21.55 10.004a5.416 5.416 0 00-.478-4.501 5.47 5.47 0 00-5.882-2.62 5.414 5.414 0 00-4.075-1.82 5.468 5.468 0 00-5.21 3.79 5.412 5.412 0 00-3.61 2.634 5.469 5.469 0 00.68 6.418 5.416 5.416 0 00.477 4.502 5.469 5.469 0 005.883 2.62 5.414 5.414 0 004.075 1.82 5.469 5.469 0 005.21-3.79 5.413 5.413 0 003.61-2.634 5.469 5.469 0 00-.68-6.419zm-8.087 11.284a4.046 4.046 0 01-2.598-.94c.033-.018.09-.05.127-.074l4.312-2.49a.699.699 0 00.354-.61V10.86l1.824 1.053a.065.065 0 01.035.05v5.03a4.06 4.06 0 01-4.054 4.294zm-8.718-3.724a4.044 4.044 0 01-.484-2.718c.032.02.088.054.127.076l4.312 2.49a.7.7 0 00.708 0l5.263-3.039v2.105a.068.068 0 01-.027.057L10.37 18.6a4.06 4.06 0 01-5.538-1.037zm-1.136-9.41a4.04 4.04 0 012.114-1.78v5.11a.698.698 0 00.354.609l5.263 3.039-1.824 1.053a.066.066 0 01-.063.007L5.196 13.77a4.06 4.06 0 01-.587-5.616zm14.987 3.483L13.33 8.598l1.824-1.052a.066.066 0 01.063-.008l4.252 2.454a4.057 4.057 0 01-.62 7.32V12.2a.699.699 0 00-.354-.609zm1.816-2.724a5.993 5.993 0 00-.127-.075l-4.31-2.49a.7.7 0 00-.71 0L10.01 9.387V7.282a.067.067 0 01.027-.057l4.253-2.453a4.058 4.058 0 016.123 4.201zm-11.44 3.757L7.148 11.62a.067.067 0 01-.035-.051V6.539a4.057 4.057 0 016.638-3.117 5.539 5.539 0 00-.127.074L9.312 6.005a.699.699 0 00-.354.61l-.001 6.155zm.99-2.134L12 9.87l2.042 1.178v2.356L12 14.583l-2.042-1.178V10.56z"
-        />
-      </svg>
-    )
-  }
-
-  if (id.includes('claude')) {
-    // Anthropic brand logomark (official ray-burst mark, color #d97757)
-    return (
-      <svg viewBox="0 6.603 1192.672 1193.397" className={baseClasses} aria-hidden="true">
-        <path
-          fill="#d97757"
-          d="m233.96 800.215 234.684-131.678 3.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035 2.738-17.477 23.84-16.027 34.147 2.98 75.463 5.155 113.235 7.812 82.147 4.832 121.692 12.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093 32.618-35.92 43.812 2.98 11.195 2.98 44.375 34.147 94.792 73.37 123.786 91.167 18.12 15.06 7.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416 20.537-6.604 49.53 6.604 20.86 18.121 30.765 70.39 49.852 110.818 77.315 150.684 22.631 44.698 12.08 41.396 4.51 12.645h7.813v-7.248l6.362-84.886 11.759-104.215 11.436-134.094 3.946-37.772 18.685-45.262 37.127-24.482 28.994 13.852 23.839 34.148-3.303 22.067-14.174 92.134-27.785 144.323-18.121 96.644h10.55l12.08-12.08 48.887-64.913 82.147-102.685 36.242-40.752 42.282-45.02 27.14-21.423h51.303l37.772 56.135-16.913 57.986-52.832 67.007-43.812 56.779-62.82 84.563-39.22 67.651 3.623 5.396 9.343-.886 141.906-30.201 76.671-13.852 91.49-15.705 41.396 19.329 4.51 19.65-16.269 40.189-97.852 24.16-114.764 22.954-170.9 40.43-2.093 1.53 2.416 2.98 76.993 7.248 32.94 1.771h80.617l150.12 11.195 39.222 25.933 23.517 31.732-3.946 24.16-60.403 30.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362 53.154 99.624 89.96 124.752 115.973 6.362 28.671-16.027 22.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067 32.296 116.537 175.167 6.04 53.719-8.456 17.476-30.201 10.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926 3.947-33.503 360.886-15.705 18.443-36.243 13.852-30.201-22.953-16.027-37.127 16.027-73.37 19.329-95.758 15.704-76.107 14.175-94.55 8.456-31.41-.563-2.094-6.927.886-71.275 97.852-108.402 146.497-85.772 91.812-20.537 8.134-35.597-18.443 3.301-32.94 19.893-29.315 118.712-151.007 71.597-93.583 46.228-54.04-.322-7.813h-2.738l-315.302 204.725-56.135 7.248-24.16-22.63 2.98-37.128 11.435-12.08 94.792-65.236-.322.323z"
-        />
-      </svg>
-    )
-  }
-
-  if (id.includes('opencode')) {
-    return <img src={openCodeLogoUrl} alt="" aria-hidden="true" className={baseClasses} />
-  }
-
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" className={baseClasses}>
-      <path
-        d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-      />
-    </svg>
-  )
-}
diff --git a/frontend/src/components/settings/BackendCard.svelte b/frontend/src/components/settings/BackendCard.svelte
new file mode 100644
index 0000000..b798c68
--- /dev/null
+++ b/frontend/src/components/settings/BackendCard.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { BackendSummary } from '../../store/backendStore.svelte.js'
+
+  interface Props {
+    backend: BackendSummary
+  }
+
+  const { backend }: Props = $props()
+
+  const statusLabel = $derived(
+    backend.status === 'active'
+      ? 'Online'
+      : backend.status === 'detected'
+        ? 'Detected'
+        : backend.status === 'disabled'
+          ? 'Disabled'
+          : 'Unavailable'
+  )
+
+  const statusClass = $derived(
+    backend.status === 'active'
+      ? 'border-emerald-500/25 bg-emerald-500/10 text-emerald-200'
+      : backend.status === 'detected'
+        ? 'border-amber-500/25 bg-amber-500/10 text-amber-200'
+        : 'border-slate-500/20 bg-slate-800/70 text-slate-300'
+  )
+
+  const statusDotClass = $derived(
+    backend.status === 'active'
+      ? 'h-2.5 w-2.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]'
+      : backend.status === 'detected'
+        ? 'h-2.5 w-2.5 rounded-full bg-amber-400'
+        : 'h-2.5 w-2.5 rounded-full bg-slate-500'
+  )
+</script>
+
+<section class="rounded-2xl border border-white/10 bg-slate-900/70 p-4 sm:p-5">
+  <div class="flex items-start justify-between gap-4">
+    <div class="min-w-0 flex-1">
+      <p class="truncate text-xl font-semibold text-slate-50">{backend.name}</p>
+      <p class="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{backend.id}</p>
+    </div>
+
+    <span class={`rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${statusClass}`}>
+      {statusLabel}
+    </span>
+  </div>
+
+  <div class="mt-4 rounded-xl border border-white/10 bg-slate-950/50 px-3 py-3">
+    <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Runtime command</p>
+    <p class="mt-2 font-mono text-xs text-slate-300">{backend.command ?? 'not detected'}</p>
+  </div>
+
+  <div class="mt-4 flex items-center justify-between gap-3 border-t border-white/10 pt-4">
+    <p class="text-xs text-slate-400">Managed by acpx runtime configuration.</p>
+    <div class="inline-flex items-center gap-2 text-xs text-slate-300">
+      <span class={statusDotClass} aria-label={statusLabel}></span>
+      <span>{backend.canResume ? 'Can resume sessions' : 'Cannot resume sessions'}</span>
+    </div>
+  </div>
+</section>
diff --git a/frontend/src/components/settings/HistorySourceCard.svelte b/frontend/src/components/settings/HistorySourceCard.svelte
new file mode 100644
index 0000000..316c233
--- /dev/null
+++ b/frontend/src/components/settings/HistorySourceCard.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type {
+    HistoryProvider,
+    HistorySourceConfig,
+    HistorySourceStatus,
+  } from '../../store/backendStore.svelte.js'
+
+  interface Props {
+    source: HistorySourceConfig
+    status?: HistorySourceStatus | null
+    busy: boolean
+    onSave: (
+      provider: HistoryProvider,
+      patch: { paths?: string[]; cliPaths?: string[] }
+    ) => Promise<void>
+  }
+
+  const { source, status = null, busy, onSave }: Props = $props()
+
+  let paths = $state.raw(source.paths.join('\n'))
+  let cliPaths = $state.raw((source.cliPaths ?? []).join('\n'))
+
+  const isCopilot = $derived(source.provider === 'copilot')
+
+  const providerLabel: Record<HistoryProvider, string> = {
+    copilot: 'GitHub Copilot',
+    gemini: 'Gemini CLI',
+    opencode: 'OpenCode',
+  }
+
+  async function handleSave() {
+    await onSave(source.provider, {
+      paths: parseLines(paths),
+      ...(isCopilot ? { cliPaths: parseLines(cliPaths) } : {}),
+    })
+  }
+
+  function parseLines(value: string): string[] {
+    return value
+      .split('\n')
+      .map((item) => item.trim())
+      .filter(Boolean)
+  }
+</script>
+
+<section class="rounded-2xl border border-white/10 bg-slate-900/70 p-4 sm:p-5">
+  <p class="text-xl font-semibold text-slate-50">{providerLabel[source.provider]}</p>
+  <p class="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{source.provider}</p>
+
+  <div class="mt-5 grid gap-4">
+    <label class="block">
+      <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+        {isCopilot ? 'VS Code Workspace Storage Roots' : 'History Path Hints'}
+      </span>
+      <textarea
+        bind:value={paths}
+        placeholder="One path per line"
+        rows={3}
+        class="mt-2 w-full resize-y overflow-auto rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
+      ></textarea>
+      <p class="mt-2 text-xs text-slate-500">
+        {#if isCopilot}
+          Paths to VS Code workspaceStorage directories containing Copilot Chat history. Example:
+          /home/user/.vscode-server/data/User/workspaceStorage
+        {:else}
+          Optional extra search roots for non-standard install locations.
+        {/if}
+      </p>
+    </label>
+
+    {#if isCopilot}
+      <label class="block">
+        <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+          CLI Session Directories
+        </span>
+        <textarea
+          bind:value={cliPaths}
+          placeholder="One path per line"
+          rows={3}
+          class="mt-2 w-full resize-y overflow-auto rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
+        ></textarea>
+        <p class="mt-2 text-xs text-slate-500">
+          Paths to Copilot CLI session-state directories. WSL paths start with
+          <code class="rounded bg-slate-800 px-1">/</code> (e.g.
+          <code class="rounded bg-slate-800 px-1">~/.copilot/session-state</code>).
+          Windows-mounted host paths start with
+          <code class="rounded bg-slate-800 px-1">/mnt/</code>. Leave empty to use the default
+          locations.
+        </p>
+      </label>
+    {/if}
+  </div>
+
+  <div class="mt-4 rounded-xl border border-white/10 bg-slate-950/40 px-3 py-3">
+    <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Discovery status</p>
+    {#if status}
+      <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
+        <span class="rounded-md border border-emerald-500/20 bg-emerald-500/10 px-2 py-1 text-emerald-200">
+          {status.summary.readable} readable
+        </span>
+        <span class="rounded-md border border-amber-500/20 bg-amber-500/10 px-2 py-1 text-amber-200">
+          {status.summary.missing} missing
+        </span>
+        <span class="rounded-md border border-rose-500/20 bg-rose-500/10 px-2 py-1 text-rose-200">
+          {status.summary.invalid} invalid
+        </span>
+        <span class="rounded-md border border-teal-500/20 bg-teal-500/10 px-2 py-1 text-teal-200">
+          {status.summary.containsHistory} with history
+        </span>
+        <span class="rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-slate-300">
+          {status.summary.totalSessions} sessions found
+        </span>
+      </div>
+
+      {#if status.discoveredSources.length > 0}
+        <div class="mt-3 grid gap-1.5">
+          {#each status.discoveredSources as descriptor (descriptor.id)}
+            <div class="rounded-lg border border-white/8 bg-slate-900/60 px-2.5 py-2 text-[11px]">
+              <p class="truncate font-mono text-slate-300">{descriptor.kind}</p>
+              <p class="mt-1 truncate text-slate-500">{descriptor.path}</p>
+            </div>
+          {/each}
+        </div>
+      {:else}
+        <p class="mt-3 text-[11px] text-slate-500">No sources discovered from the current hints.</p>
+      {/if}
+    {:else}
+      <p class="mt-3 text-[11px] text-slate-500">Discovery status is unavailable.</p>
+    {/if}
+  </div>
+
+  <div class="mt-5 flex justify-end border-t border-white/10 pt-4">
+    <button
+      type="button"
+      onclick={() => void handleSave()}
+      disabled={busy}
+      class="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm font-semibold text-slate-50 transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:text-slate-500"
+    >
+      {busy ? 'Saving...' : 'Save'}
+    </button>
+  </div>
+</section>
diff --git a/frontend/src/hooks/useAgUiChat.ts b/frontend/src/hooks/useAgUiChat.ts
deleted file mode 100644
index 039474a..0000000
--- a/frontend/src/hooks/useAgUiChat.ts
+++ /dev/null
@@ -1,971 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { EventType } from '@ag-ui/core'
-import type { StructuredBlock } from '../components/chat/a2ui-types.js'
-
-export interface ChatMessage {
-  id: string
-  role: 'user' | 'assistant'
-  content: string
-  structuredBlocks?: StructuredBlock[]
-  turnInfo?: {
-    providerId?: string
-    modelId?: string
-    mode?: string
-    startedAtMs?: number
-    completedAtMs?: number
-    durationMs?: number
-    modifiedFiles?: string[]
-    patches?: Array<{
-      hash: string
-      nextHash?: string
-      files: string[]
-      additions?: number
-      deletions?: number
-    }>
-  }
-}
-
-export interface AgentSummary {
-  id: string
-  name: string
-  status: 'active' | 'disabled' | 'detected' | 'unavailable'
-  command: string | null
-  /** True when the agent is active and can accept a resume/continuation request. */
-  canResume: boolean
-  /** True when the agent supports ACP session/load (resume as the original session). */
-  canLoad: boolean
-}
-
-export interface HistorySourceDescriptor {
-  id: string
-  backendId: string
-  providerId: string
-  kind:
-    | 'cli_session_dir'
-    | 'cli_history_dir'
-    | 'vscode_workspace_db'
-    | 'vscode_chat_sessions'
-    | 'vscode_chat_editing_sessions'
-    | 'vscode_extension_resources'
-    | 'gemini_tmp_dir'
-    | 'opencode_db'
-  path: string
-  platform: 'linux' | 'mounted_host' | 'windows' | 'unknown'
-  access: 'readable' | 'missing' | 'permission_error' | 'invalid'
-  signal: 'contains_history' | 'empty' | 'unknown'
-  discoveredBy: 'auto' | 'manual'
-  lastModifiedMs?: number
-  sessionCount?: number
-}
-
-export interface ProjectSummary {
-  id: string
-  name: string
-  path: string
-  status: 'available' | 'missing' | 'invalid'
-}
-
-export interface SessionProjectContext {
-  id: string
-  name: string
-  path: string
-}
-
-export interface SessionSummary {
-  id: string
-  title: string
-  updatedAt: string
-  agentId: string
-  project: SessionProjectContext | null
-  source: 'live' | 'history'
-}
-
-interface ProjectPathSuggestion {
-  name: string
-  path: string
-}
-
-interface SessionDetails extends SessionSummary {
-  messages: ChatMessage[]
-  /** Current model selection state; null when the agent does not support model selection. */
-  modelState: ModelState | null
-}
-
-/** A selectable model advertised by an agent via ACP session creation. */
-export interface ModelInfo {
-  modelId: string
-  name: string
-  description?: string | null
-}
-
-/** Current model selection state for a live session. */
-export interface ModelState {
-  availableModels: ModelInfo[]
-  currentModelId: string
-}
-
-interface UseAgUiChatOptions {
-  sessionId: string | null
-  projectId: string | null
-  onSessionCreated: (sessionId: string) => void
-  onSessionSelected: (sessionId: string) => void
-  onSessionCleared: () => void
-  onProjectSelected: (projectId: string | null) => void
-}
-
-export function useAgUiChat({
-  sessionId,
-  projectId,
-  onSessionCreated,
-  onSessionSelected,
-  onSessionCleared,
-  onProjectSelected,
-}: UseAgUiChatOptions) {
-  const [currentSessionId, setCurrentSessionId] = useState<string | null>(sessionId)
-  const [currentProjectId, setCurrentProjectId] = useState<string | null>(projectId)
-  const [agents, setAgents] = useState<AgentSummary[]>([])
-  const [projects, setProjects] = useState<ProjectSummary[]>([])
-  const [sessions, setSessions] = useState<SessionSummary[]>([])
-  const sessionsRef = useRef<SessionSummary[]>([])
-  const setSessionsAndRef = useCallback((nextSessions: SessionSummary[]) => {
-    sessionsRef.current = nextSessions
-    setSessions(nextSessions)
-  }, [])
-  const [messages, setMessagesRaw] = useState<ChatMessage[]>([])
-  const messagesRef = useRef<ChatMessage[]>([])
-  // Wraps the raw setter so that messagesRef always stays in sync.
-  // Used wherever we need to snapshot messages in a callback without stale-closure issues.
-  const setMessages = useCallback(
-    (next: ChatMessage[] | ((prev: ChatMessage[]) => ChatMessage[])) => {
-      if (typeof next === 'function') {
-        setMessagesRaw((prev) => {
-          const resolved = next(prev)
-          messagesRef.current = resolved
-          return resolved
-        })
-      } else {
-        messagesRef.current = next
-        setMessagesRaw(next)
-      }
-    },
-    []
-  )
-  const [thinking, setThinking] = useState(false)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [historyLoadingSessionId, setHistoryLoadingSessionId] = useState<string | null>(null)
-  const [streamReconnecting, setStreamReconnecting] = useState(false)
-  const [creatingSession, setCreatingSession] = useState(false)
-  const [modelState, setModelState] = useState<ModelState | null>(null)
-  const activeSessionRef = useRef<string | null>(sessionId)
-  const routeSessionRef = useRef<string | null>(sessionId)
-  // Stable refs so the one-shot bootstrap effect can call the latest version of
-  // these callbacks without listing them (and their transitive deps) in the dep
-  // array, which would cause the effect to re-run mid-flight and cancel itself.
-  const createSessionRef = useRef<typeof createSession | null>(null)
-  const loadSessionRef = useRef<typeof loadSession | null>(null)
-
-  useEffect(() => {
-    setCurrentProjectId(projectId)
-  }, [projectId])
-
-  const selectedProject = useMemo(
-    () => projects.find((candidate) => candidate.id === currentProjectId) ?? null,
-    [projects, currentProjectId]
-  )
-  const availableProjects = useMemo(
-    () => projects.filter((candidate) => candidate.status === 'available'),
-    [projects]
-  )
-  const activeAgents = useMemo(
-    () => agents.filter((candidate) => candidate.status === 'active'),
-    [agents]
-  )
-  const currentSession = useMemo(
-    () => sessions.find((s) => s.id === currentSessionId) ?? null,
-    [sessions, currentSessionId]
-  )
-  const currentSessionAgent = useMemo(
-    () => (currentSession ? (agents.find((a) => a.id === currentSession.agentId) ?? null) : null),
-    [agents, currentSession]
-  )
-  const ready = useMemo(
-    () =>
-      currentSessionId !== null &&
-      currentSession?.source === 'live' &&
-      currentSessionAgent?.status === 'active' &&
-      selectedProject?.status === 'available' &&
-      !creatingSession,
-    [creatingSession, currentSessionId, currentSession, currentSessionAgent, selectedProject]
-  )
-
-  const fetchJson = useCallback(async <T>(url: string, init?: RequestInit): Promise<T> => {
-    const response = await fetch(url, init)
-    if (!response.ok) {
-      throw new Error(`${url} failed with status ${response.status}`)
-    }
-
-    return (await response.json()) as T
-  }, [])
-
-  const refreshSessions = useCallback(async () => {
-    try {
-      const nextSessions = await fetchJson<SessionSummary[]>('/api/sessions')
-      setSessionsAndRef(nextSessions)
-      return nextSessions
-    } catch (error) {
-      console.error('[useAgUiChat] session list failed:', error)
-      setErrorMessage(
-        (current) =>
-          current ?? 'Unable to load session history right now. Reload or try again in a moment.'
-      )
-      return []
-    }
-  }, [fetchJson, setSessionsAndRef])
-
-  const refreshProjects = useCallback(async () => {
-    try {
-      const nextProjects = await fetchJson<ProjectSummary[]>('/api/projects')
-      setProjects(nextProjects)
-      return nextProjects
-    } catch (error) {
-      console.error('[useAgUiChat] project list failed:', error)
-      setErrorMessage(
-        (current) =>
-          current ?? 'Unable to load projects right now. Reload or try again in a moment.'
-      )
-      return []
-    }
-  }, [fetchJson])
-
-  const loadSession = useCallback(
-    async (nextSessionId: string, syncRoute = true) => {
-      setHistoryLoadingSessionId(nextSessionId)
-      try {
-        const knownSession = sessionsRef.current.find((s) => s.id === nextSessionId)
-        const agentParam = knownSession?.agentId
-          ? `?agentId=${encodeURIComponent(knownSession.agentId)}`
-          : ''
-        const session = await fetchJson<SessionDetails>(
-          `/api/sessions/${encodeURIComponent(nextSessionId)}${agentParam}`
-        )
-
-        if (activeSessionRef.current !== nextSessionId) {
-          return null
-        }
-
-        setMessages(session.messages)
-        setModelState(session.modelState ?? null)
-
-        setCurrentSessionId(nextSessionId)
-        setCurrentProjectId(session.project?.id ?? null)
-
-        if (syncRoute && session.project?.id !== projectId) {
-          onProjectSelected(session.project?.id ?? null)
-        }
-
-        if (syncRoute && sessionId !== nextSessionId) {
-          onSessionSelected(nextSessionId)
-        }
-
-        return session
-      } catch (error) {
-        console.error('[useAgUiChat] session load failed:', error)
-        setMessages([])
-        setErrorMessage(
-          'Unable to load that session right now. Pick another one or create a new chat.'
-        )
-        return null
-      } finally {
-        setHistoryLoadingSessionId((current) => (current === nextSessionId ? null : current))
-      }
-    },
-    [fetchJson, onProjectSelected, onSessionSelected, projectId, sessionId, setMessages]
-  )
-
-  useEffect(() => {
-    if (sessionId === routeSessionRef.current) {
-      return
-    }
-
-    routeSessionRef.current = sessionId
-
-    if (!sessionId) {
-      activeSessionRef.current = null
-      setCurrentSessionId(null)
-      setMessages([])
-      setThinking(false)
-      return
-    }
-
-    if (sessionId === activeSessionRef.current) {
-      return
-    }
-
-    activeSessionRef.current = sessionId
-    setCurrentSessionId(sessionId)
-    setErrorMessage(null)
-    setThinking(false)
-    void loadSession(sessionId, false)
-  }, [loadSession, sessionId, setMessages])
-
-  const createSession = useCallback(
-    async (agentId: string, nextProjectId?: string) => {
-      const effectiveProjectId = nextProjectId ?? currentProjectId ?? projectId
-
-      if (!agentId) {
-        setErrorMessage('Select an available agent before starting a new chat.')
-        return null
-      }
-
-      if (!effectiveProjectId) {
-        setErrorMessage('Select an available project before starting a new chat.')
-        return null
-      }
-
-      setCreatingSession(true)
-      setThinking(false)
-
-      try {
-        const session = await fetchJson<SessionDetails>('/api/sessions', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ agentId, projectId: effectiveProjectId }),
-        })
-
-        activeSessionRef.current = session.id
-        setCurrentSessionId(session.id)
-        setMessages(session.messages)
-        setCurrentProjectId(session.project?.id ?? effectiveProjectId)
-        onSessionCreated(session.id)
-
-        if (session.project?.id !== projectId) {
-          onProjectSelected(session.project?.id ?? effectiveProjectId)
-        }
-
-        void refreshSessions()
-        return session.id
-      } catch (error) {
-        console.error('[useAgUiChat] session create failed:', error)
-        setErrorMessage(
-          'Unable to start a chat session right now. Reload or try again in a moment.'
-        )
-        return null
-      } finally {
-        setCreatingSession(false)
-      }
-    },
-    [
-      currentProjectId,
-      fetchJson,
-      onProjectSelected,
-      onSessionCreated,
-      projectId,
-      refreshSessions,
-      setMessages,
-    ]
-  )
-
-  // Keep refs in sync so the one-shot bootstrap effect always calls the latest
-  // version without having them in its dependency array.
-  createSessionRef.current = createSession
-  loadSessionRef.current = loadSession
-
-  useEffect(() => {
-    let cancelled = false
-
-    void (async () => {
-      setLoading(true)
-      setErrorMessage(null)
-
-      try {
-        const [nextAgents, nextProjects, nextSessions] = await Promise.all([
-          fetchJson<AgentSummary[]>('/api/agents'),
-          fetchJson<ProjectSummary[]>('/api/projects'),
-          fetchJson<SessionSummary[]>('/api/sessions'),
-        ])
-
-        if (cancelled) return
-
-        setAgents(nextAgents)
-        setProjects(nextProjects)
-        setSessionsAndRef(nextSessions)
-
-        const nextActiveAgents = nextAgents.filter((candidate) => candidate.status === 'active')
-        const nextActiveAgentIds = new Set(nextActiveAgents.map((agent) => agent.id))
-
-        const availableProjectIds = new Set(
-          nextProjects
-            .filter((project) => project.status === 'available')
-            .map((project) => project.id)
-        )
-        const preferredProjectId =
-          projectId && availableProjectIds.has(projectId)
-            ? projectId
-            : currentProjectId && availableProjectIds.has(currentProjectId)
-              ? currentProjectId
-              : (nextSessions.find(
-                  (session) => session.project && availableProjectIds.has(session.project.id)
-                )?.project?.id ??
-                nextProjects.find((project) => project.status === 'available')?.id ??
-                null)
-
-        setCurrentProjectId(preferredProjectId)
-
-        if (preferredProjectId !== projectId) {
-          onProjectSelected(preferredProjectId)
-        }
-
-        const preferredSession =
-          (sessionId && nextSessions.find((session) => session.id === sessionId)) ??
-          nextSessions.find(
-            (session) =>
-              session.project?.id === preferredProjectId && nextActiveAgentIds.has(session.agentId)
-          ) ??
-          null
-
-        if (preferredSession) {
-          activeSessionRef.current = preferredSession.id
-          setCurrentSessionId(preferredSession.id)
-          // End the amber loading banner now — loadSession will show the
-          // history-shimmer pill for the session-fetch phase.
-          setLoading(false)
-          await loadSessionRef.current!(
-            preferredSession.id,
-            sessionId !== preferredSession.id || preferredSession.project?.id !== projectId
-          )
-          return
-        }
-
-        activeSessionRef.current = null
-        setCurrentSessionId(null)
-
-        if (sessionId !== null) {
-          onSessionCleared()
-        }
-
-        if (!preferredProjectId) {
-          setMessages([])
-          setErrorMessage(
-            'No projects are currently available. Check the generated workspace config and try again.'
-          )
-          return
-        }
-
-        if (nextActiveAgents.length === 0) {
-          setMessages([])
-          setErrorMessage(
-            'No agents are currently available. Start an adapter and reload to continue.'
-          )
-          return
-        }
-
-        if (cancelled) return
-        setMessages([])
-      } catch (error) {
-        console.error('[useAgUiChat] bootstrap failed:', error)
-        setErrorMessage('Unable to load chat data right now. Reload or try again in a moment.')
-      } finally {
-        if (!cancelled) {
-          setLoading(false)
-        }
-      }
-    })()
-
-    return () => {
-      cancelled = true
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (!currentSessionId || currentSession?.source !== 'live') {
-      setStreamReconnecting(false)
-      return
-    }
-
-    activeSessionRef.current = currentSessionId
-    setStreamReconnecting(false)
-    const sse = new EventSource(`/api/stream?sessionId=${encodeURIComponent(currentSessionId)}`)
-
-    sse.onopen = () => {
-      if (activeSessionRef.current !== currentSessionId) return
-      setStreamReconnecting(false)
-    }
-
-    sse.addEventListener(EventType.RUN_STARTED, () => {
-      setStreamReconnecting(false)
-      setThinking(true)
-    })
-
-    sse.addEventListener(EventType.TEXT_MESSAGE_START, (event: MessageEvent<string>) => {
-      if (activeSessionRef.current !== currentSessionId) return
-
-      const { messageId } = JSON.parse(event.data) as { messageId: string }
-      setMessages((current) =>
-        current.some((message) => message.id === messageId)
-          ? current
-          : [...current, { id: messageId, role: 'assistant', content: '', structuredBlocks: [] }]
-      )
-    })
-
-    sse.addEventListener(EventType.TEXT_MESSAGE_CONTENT, (event: MessageEvent<string>) => {
-      if (activeSessionRef.current !== currentSessionId) return
-      setStreamReconnecting(false)
-
-      const { messageId, delta } = JSON.parse(event.data) as { messageId: string; delta: string }
-
-      setMessages((current) => {
-        let found = false
-        const nextMessages = current.map((message) => {
-          if (message.id !== messageId) return message
-
-          found = true
-          return { ...message, content: message.content + delta }
-        })
-
-        return found
-          ? nextMessages
-          : [
-              ...nextMessages,
-              { id: messageId, role: 'assistant', content: delta, structuredBlocks: [] },
-            ]
-      })
-    })
-
-    sse.addEventListener(EventType.CUSTOM, (event: MessageEvent<string>) => {
-      if (activeSessionRef.current !== currentSessionId) return
-      setStreamReconnecting(false)
-
-      const customEvent = JSON.parse(event.data) as {
-        name?: string
-        value?: Record<string, unknown>
-      }
-
-      if (customEvent.name !== 'a2ui:tool_call') {
-        return
-      }
-
-      const payload = customEvent.value ?? {}
-      const callId = typeof payload['callId'] === 'string' ? payload['callId'] : null
-      const toolName = typeof payload['toolName'] === 'string' ? payload['toolName'] : null
-      const done = payload['done'] === true
-      if (!callId || !toolName) {
-        return
-      }
-
-      setMessages((current) => {
-        const nextMessages = [...current]
-        const lastAssistantIndex = [...nextMessages]
-          .reverse()
-          .findIndex((message) => message.role === 'assistant')
-        const targetIndex =
-          lastAssistantIndex === -1 ? -1 : nextMessages.length - 1 - lastAssistantIndex
-
-        const fallbackMessage = {
-          id: `assistant-tool-${callId}`,
-          role: 'assistant' as const,
-          content: '',
-          structuredBlocks: [] as StructuredBlock[],
-        }
-
-        const targetMessage = targetIndex >= 0 ? nextMessages[targetIndex] : fallbackMessage
-
-        const existingBlocks = targetMessage.structuredBlocks ?? []
-        const nextBlock: StructuredBlock = {
-          kind: 'tool_call',
-          payload: {
-            callId,
-            toolName,
-            args: payload['args'],
-            result: typeof payload['result'] === 'string' ? payload['result'] : undefined,
-            done,
-          },
-        }
-
-        const mergedBlocks = upsertStructuredBlock(existingBlocks, nextBlock)
-        const mergedMessage = { ...targetMessage, structuredBlocks: mergedBlocks }
-
-        if (targetIndex >= 0) {
-          nextMessages[targetIndex] = mergedMessage
-          return nextMessages
-        }
-
-        return [...nextMessages, mergedMessage]
-      })
-    })
-
-    const finishRun = () => {
-      if (activeSessionRef.current !== currentSessionId) return
-      setThinking(false)
-      void refreshSessions()
-    }
-
-    sse.addEventListener(EventType.RUN_FINISHED, finishRun)
-    sse.addEventListener(EventType.RUN_ERROR, finishRun)
-
-    sse.onerror = () => {
-      if (activeSessionRef.current !== currentSessionId) return
-      setThinking(false)
-      setStreamReconnecting(true)
-    }
-
-    return () => {
-      sse.close()
-    }
-  }, [currentSession?.source, currentSessionId, refreshSessions, setMessages])
-
-  const sendMessage = useCallback(
-    async (text: string) => {
-      if (!currentSessionId) return
-
-      // Find which agent owns the current session so we can pass agentId in the payload
-      const currentSession = sessions.find((s) => s.id === currentSessionId)
-      const agentId = currentSession?.agentId ?? null
-
-      setErrorMessage(null)
-      setMessages((current) => [
-        ...current,
-        { id: `user-${Date.now()}`, role: 'user', content: text },
-      ])
-
-      try {
-        const response = await fetch(
-          `/api/sessions/${encodeURIComponent(currentSessionId)}/message`,
-          {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(buildSendMessagePayload(text, agentId)),
-          }
-        )
-
-        if (!response.ok) {
-          throw new Error(`Message send failed with status ${response.status}`)
-        }
-
-        void refreshSessions()
-      } catch (error) {
-        console.error('[useAgUiChat] message send failed:', error)
-        setErrorMessage('Message failed to send. Check the agent connection and try again.')
-        throw error
-      }
-    },
-    [currentSessionId, refreshSessions, sessions, setMessages]
-  )
-
-  const selectSession = useCallback(
-    async (nextSessionId: string) => {
-      if (nextSessionId === currentSessionId) return
-      activeSessionRef.current = nextSessionId
-      setCurrentSessionId(nextSessionId)
-      setErrorMessage(null)
-      setThinking(false)
-      await loadSession(nextSessionId, true)
-    },
-    [currentSessionId, loadSession]
-  )
-
-  const selectProject = useCallback(
-    async (nextProjectId: string) => {
-      if (nextProjectId === currentProjectId) {
-        return
-      }
-
-      const candidate = projects.find((project) => project.id === nextProjectId)
-      if (!candidate || candidate.status !== 'available') {
-        return
-      }
-
-      setErrorMessage(null)
-      setMessages([])
-      setThinking(false)
-      setCurrentProjectId(nextProjectId)
-      onProjectSelected(nextProjectId)
-
-      // Pick the first active agent for the new project session
-      const firstActive = agents.find((agent) => agent.status === 'active')
-      if (!firstActive) {
-        return
-      }
-
-      activeSessionRef.current = null
-      setCurrentSessionId(null)
-      await createSession(firstActive.id, nextProjectId)
-    },
-    [agents, createSession, currentProjectId, onProjectSelected, projects, setMessages]
-  )
-
-  const startNewSession = useCallback(
-    async (agentId: string) => {
-      setErrorMessage(null)
-      await createSession(agentId)
-    },
-    [createSession]
-  )
-
-  const resumeSession = useCallback(
-    async (agentId: string) => {
-      if (!currentSessionId) return
-      setErrorMessage(null)
-      setThinking(false)
-      setStreamReconnecting(false)
-      setCreatingSession(true)
-
-      // Snapshot messages before the async call — we'll prepend them to the new session
-      // so the transcript shows the full prior conversation immediately.
-      const priorMessages = messagesRef.current
-
-      try {
-        // Pass sourceAgentId so the backend can disambiguate cross-provider session lookups
-        const sourceAgentId = currentSession?.agentId ?? null
-        const session = await fetchJson<SessionDetails>(
-          `/api/sessions/${encodeURIComponent(currentSessionId)}/resume`,
-          {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              agentId,
-              ...(sourceAgentId ? { sourceAgentId } : {}),
-            }),
-          }
-        )
-        activeSessionRef.current = session.id
-        setCurrentSessionId(session.id)
-        // Prepend the source conversation so the transcript is continuous.
-        // The new session's own messages (the context-handoff exchange) are appended after.
-        setMessages([...priorMessages, ...session.messages])
-        setCurrentProjectId(session.project?.id ?? null)
-        onSessionCreated(session.id)
-        if (session.project?.id !== projectId) {
-          onProjectSelected(session.project?.id ?? null)
-        }
-        void refreshSessions()
-      } catch (error) {
-        console.error('[useAgUiChat] session resume failed:', error)
-        setErrorMessage('Unable to continue this conversation right now. Try again in a moment.')
-      } finally {
-        setCreatingSession(false)
-      }
-    },
-    [
-      currentSession?.agentId,
-      currentSessionId,
-      fetchJson,
-      onProjectSelected,
-      onSessionCreated,
-      projectId,
-      refreshSessions,
-      setMessages,
-    ]
-  )
-
-  /**
-   * Load a history session as a live session via ACP `session/load`.
-   * This resumes the *original* session in the agent rather than creating a
-   * new session with a handoff.  Only supported by agents that advertise the
-   * `loadSession` capability (e.g. opencode).
-   */
-  const loadHistorySession = useCallback(
-    async (agentId: string) => {
-      if (!currentSessionId) return
-      setErrorMessage(null)
-      setThinking(false)
-      setStreamReconnecting(false)
-      setCreatingSession(true)
-
-      // Snapshot messages before the async call — we'll prepend them to the
-      // loaded session so the transcript shows the full prior conversation.
-      const priorMessages = messagesRef.current
-
-      try {
-        const session = await fetchJson<SessionDetails>(
-          `/api/sessions/${encodeURIComponent(currentSessionId)}/load`,
-          {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ agentId }),
-          }
-        )
-        activeSessionRef.current = session.id
-        setCurrentSessionId(session.id)
-        // Optimistically upsert the new live session into the sessions list so
-        // that currentSession immediately resolves to source:'live'.  Without
-        // this, there is a race: if refreshSessions resolves before React
-        // commits the setCurrentSessionId update above, currentSession would
-        // still look up the old history ID and find source:'history', sending
-        // the UI back into history mode.
-        setSessionsAndRef([
-          ...sessionsRef.current.filter((s) => s.id !== session.id),
-          {
-            id: session.id,
-            title: session.title,
-            updatedAt: session.updatedAt,
-            agentId: session.agentId,
-            project: session.project,
-            source: session.source,
-          },
-        ])
-        // Prepend the history messages so the transcript is continuous.
-        setMessages([...priorMessages, ...session.messages])
-        setModelState(session.modelState ?? null)
-        setCurrentProjectId(session.project?.id ?? null)
-        onSessionCreated(session.id)
-        if (session.project?.id !== projectId) {
-          onProjectSelected(session.project?.id ?? null)
-        }
-        void refreshSessions()
-      } catch (error) {
-        console.error('[useAgUiChat] session load failed:', error)
-        setErrorMessage('Unable to load this session right now. Try again in a moment.')
-      } finally {
-        setCreatingSession(false)
-      }
-    },
-    [
-      currentSessionId,
-      fetchJson,
-      onProjectSelected,
-      onSessionCreated,
-      projectId,
-      refreshSessions,
-      sessionsRef,
-      setMessages,
-      setSessionsAndRef,
-    ]
-  )
-
-  const addProject = useCallback(
-    async (name: string, path: string) => {
-      const project = await fetchJson<ProjectSummary>('/api/projects', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, path }),
-      })
-
-      const nextProjects = await refreshProjects()
-      const resolvedProject =
-        nextProjects.find((candidate) => candidate.id === project.id) ?? project
-      setCurrentProjectId(resolvedProject.id)
-      onProjectSelected(resolvedProject.id)
-      return resolvedProject
-    },
-    [fetchJson, onProjectSelected, refreshProjects]
-  )
-
-  const removeProjectById = useCallback(
-    async (projectIdToRemove: string) => {
-      const response = await fetch(`/api/projects/${encodeURIComponent(projectIdToRemove)}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        throw new Error(`/api/projects/${projectIdToRemove} failed with status ${response.status}`)
-      }
-
-      const nextProjects = await refreshProjects()
-      if (currentProjectId === projectIdToRemove) {
-        const fallbackProject =
-          nextProjects.find((project) => project.status === 'available') ?? null
-        activeSessionRef.current = null
-        setCurrentProjectId(fallbackProject?.id ?? null)
-        setCurrentSessionId(null)
-        setMessages([])
-        setThinking(false)
-        onSessionCleared()
-        onProjectSelected(fallbackProject?.id ?? null)
-      }
-    },
-    [currentProjectId, onProjectSelected, onSessionCleared, refreshProjects, setMessages]
-  )
-
-  const suggestProjectPaths = useCallback(
-    async (path: string) => {
-      return fetchJson<ProjectPathSuggestion[]>(
-        `/api/projects/path-suggestions?path=${encodeURIComponent(path)}`
-      )
-    },
-    [fetchJson]
-  )
-
-  const setSessionModel = useCallback(
-    async (newModelId: string) => {
-      if (!currentSessionId) return
-      await fetchJson(`/api/sessions/${encodeURIComponent(currentSessionId)}/model`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ modelId: newModelId }),
-      })
-      setModelState((prev) => (prev ? { ...prev, currentModelId: newModelId } : prev))
-    },
-    [currentSessionId, fetchJson]
-  )
-
-  return {
-    activeAgents,
-    agents,
-    creatingSession,
-    errorMessage,
-    historyLoading: historyLoadingSessionId !== null,
-    loading,
-    messages,
-    modelState,
-    projects,
-    ready,
-    selectedProject,
-    selectProject,
-    selectSession,
-    sendMessage,
-    sessionId: currentSessionId,
-    currentSession,
-    sessions,
-    startNewSession,
-    resumeSession,
-    loadHistorySession,
-    setSessionModel,
-    streamReconnecting,
-    thinking,
-    availableProjects,
-    addProject,
-    removeProject: removeProjectById,
-    suggestProjectPaths,
-  }
-}
-
-function upsertStructuredBlock(
-  blocks: StructuredBlock[],
-  nextBlock: StructuredBlock
-): StructuredBlock[] {
-  const nextId = readStructuredBlockId(nextBlock)
-  if (!nextId) {
-    return [...blocks, nextBlock]
-  }
-
-  const existingIndex = blocks.findIndex((block) => readStructuredBlockId(block) === nextId)
-  if (existingIndex === -1) {
-    return [...blocks, nextBlock]
-  }
-
-  return blocks.map((block, index) => (index === existingIndex ? nextBlock : block))
-}
-
-function readStructuredBlockId(block: StructuredBlock): string | null {
-  switch (block.kind) {
-    case 'tool_call':
-      return block.payload.callId
-    case 'skill_invocation':
-      return block.payload.callId
-    case 'subagent_invocation':
-      return block.payload.callId
-    case 'reasoning':
-      return block.payload.text
-    default:
-      return null
-  }
-}
-
-export function buildSendMessagePayload(message: string, agentId: string | null) {
-  return {
-    ...(agentId ? { agentId } : {}),
-    message,
-  }
-}
diff --git a/frontend/src/hooks/useBackendSettings.ts b/frontend/src/hooks/useBackendSettings.ts
deleted file mode 100644
index c4713c9..0000000
--- a/frontend/src/hooks/useBackendSettings.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-export interface BackendEndpointSupport {
-  source: 'connection' | 'unknown'
-  implemented: string[]
-  unknown: string[]
-}
-
-export interface HistorySourceDescriptor {
-  id: string
-  backendId: string
-  providerId: string
-  kind:
-    | 'cli_session_dir'
-    | 'cli_history_dir'
-    | 'vscode_workspace_db'
-    | 'vscode_chat_sessions'
-    | 'vscode_chat_editing_sessions'
-    | 'vscode_extension_resources'
-    | 'gemini_tmp_dir'
-    | 'opencode_db'
-  path: string
-  platform: 'linux' | 'mounted_host' | 'windows' | 'unknown'
-  access: 'readable' | 'missing' | 'permission_error' | 'invalid'
-  signal: 'contains_history' | 'empty' | 'unknown'
-  discoveredBy: 'auto' | 'manual'
-  lastModifiedMs?: number
-  sessionCount?: number
-  warnings?: string[]
-}
-
-export interface HistorySourceDiscoverySummary {
-  family: string
-  readable: number
-  missing: number
-  invalid: number
-  containsHistory: number
-}
-
-export interface HistorySupport {
-  source: 'none' | 'derived' | 'native'
-  supported: Array<
-    | 'text'
-    | 'markdown'
-    | 'reasoning'
-    | 'tool_calls'
-    | 'skills'
-    | 'subagents'
-    | 'attachments'
-    | 'rich_media'
-    | 'file_operations'
-    | 'patches'
-    | 'compaction'
-    | 'truncation'
-  >
-  discoveredSources: HistorySourceDescriptor[]
-  discoverySummary?: HistorySourceDiscoverySummary[]
-}
-
-export interface BackendSummary {
-  id: string
-  name: string
-  status: 'active' | 'disabled' | 'detected' | 'unavailable'
-  command: string | null
-  detectedCommand: string | null
-  args: string[]
-  defaultArgs: string[]
-  enabled: boolean
-  usesCustomCommand: boolean
-  endpointSupport: BackendEndpointSupport
-  historySupport: HistorySupport
-  lastTestResult: {
-    ok: boolean
-    message: string
-    testedAt: string
-  } | null
-}
-
-export type HistoryProvider = 'gemini' | 'copilot' | 'opencode'
-
-export interface HistorySourceConfig {
-  provider: HistoryProvider
-  /** VS Code workspace storage roots (or generic search roots for non-Copilot providers). */
-  paths: string[]
-  /** CLI session-state directory paths. Only meaningful for `copilot`. */
-  cliPaths?: string[]
-}
-
-export function useBackendSettings() {
-  const [backends, setBackends] = useState<BackendSummary[]>([])
-  const [loading, setLoading] = useState(true)
-  const [savingId, setSavingId] = useState<string | null>(null)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const loadBackends = useCallback(async () => {
-    setLoading(true)
-    setErrorMessage(null)
-
-    try {
-      const response = await fetch('/api/backends')
-      if (!response.ok) {
-        throw new Error(`Backend settings failed with status ${response.status}`)
-      }
-
-      setBackends((await response.json()) as BackendSummary[])
-    } catch (error) {
-      console.error('[useBackendSettings] load failed:', error)
-      setErrorMessage('Unable to load backend settings right now.')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    void loadBackends()
-  }, [loadBackends])
-
-  const saveBackend = useCallback(
-    async (
-      backendId: string,
-      patch: {
-        enabled?: boolean
-        command?: string | null
-        args?: string[]
-        name?: string
-      }
-    ) => {
-      setSavingId(backendId)
-      setErrorMessage(null)
-
-      try {
-        const response = await fetch(`/api/backends/${encodeURIComponent(backendId)}`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(patch),
-        })
-
-        if (!response.ok) {
-          throw new Error(`Backend save failed with status ${response.status}`)
-        }
-
-        const updated = (await response.json()) as BackendSummary
-        setBackends((current) =>
-          current.map((backend) => (backend.id === backendId ? updated : backend))
-        )
-      } catch (error) {
-        console.error('[useBackendSettings] save failed:', error)
-        setErrorMessage('Unable to save backend settings right now.')
-        throw error
-      } finally {
-        setSavingId(null)
-      }
-    },
-    []
-  )
-
-  const addBackend = useCallback(
-    async (input: { name: string; command: string; args?: string[] }) => {
-      setErrorMessage(null)
-
-      try {
-        const response = await fetch('/api/backends', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(input),
-        })
-
-        if (!response.ok) {
-          throw new Error(`Backend create failed with status ${response.status}`)
-        }
-
-        const created = (await response.json()) as BackendSummary
-        setBackends((current) => [...current, created])
-      } catch (error) {
-        console.error('[useBackendSettings] create failed:', error)
-        setErrorMessage('Unable to add a backend right now.')
-        throw error
-      }
-    },
-    []
-  )
-
-  return {
-    addBackend,
-    backends,
-    errorMessage,
-    loading,
-    saveBackend,
-    savingId,
-  }
-}
-
-export function useHistorySources() {
-  const [sources, setSources] = useState<HistorySourceConfig[]>([])
-  const [loading, setLoading] = useState(true)
-  const [savingProvider, setSavingProvider] = useState<HistoryProvider | null>(null)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const loadSources = useCallback(async () => {
-    setLoading(true)
-    setErrorMessage(null)
-
-    try {
-      const response = await fetch('/api/history-sources')
-      if (!response.ok) {
-        throw new Error(`History sources failed with status ${response.status}`)
-      }
-
-      setSources((await response.json()) as HistorySourceConfig[])
-    } catch (error) {
-      console.error('[useHistorySources] load failed:', error)
-      setErrorMessage('Unable to load history sources right now.')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    void loadSources()
-  }, [loadSources])
-
-  const saveSource = useCallback(
-    async (provider: HistoryProvider, patch: { paths?: string[]; cliPaths?: string[] }) => {
-      setSavingProvider(provider)
-      setErrorMessage(null)
-
-      try {
-        const response = await fetch(`/api/history-sources/${encodeURIComponent(provider)}`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(patch),
-        })
-
-        if (!response.ok) {
-          throw new Error(`History source save failed with status ${response.status}`)
-        }
-
-        const updated = (await response.json()) as HistorySourceConfig
-        setSources((current) => {
-          const exists = current.some((s) => s.provider === provider)
-          return exists
-            ? current.map((s) => (s.provider === provider ? updated : s))
-            : [...current, updated]
-        })
-      } catch (error) {
-        console.error('[useHistorySources] save failed:', error)
-        setErrorMessage('Unable to save history source settings right now.')
-        throw error
-      } finally {
-        setSavingProvider(null)
-      }
-    },
-    []
-  )
-
-  return {
-    sources,
-    loading,
-    saveSource,
-    savingProvider,
-    errorMessage,
-  }
-}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..dbe41a6
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,5 @@
+import App from './App.svelte'
+import './index.css'
+import { mount } from 'svelte'
+
+mount(App, { target: document.getElementById('root')! })
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
deleted file mode 100644
index 47f4b93..0000000
--- a/frontend/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { App } from './App.js'
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)
diff --git a/frontend/src/router.test.svelte.ts b/frontend/src/router.test.svelte.ts
new file mode 100644
index 0000000..411d0ff
--- /dev/null
+++ b/frontend/src/router.test.svelte.ts
@@ -0,0 +1,251 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/svelte'
+import App from './App.svelte'
+
+class MockEventSource {
+  close = vi.fn()
+
+  addEventListener() {}
+}
+
+function mockFetch() {
+  return vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
+    if (url === '/api/history-sources') {
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve([
+            {
+              provider: 'copilot',
+              paths: ['/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage'],
+              cliPaths: [],
+            },
+            { provider: 'gemini', paths: [] },
+            { provider: 'opencode', paths: [] },
+          ]),
+      } as Response)
+    }
+
+    if (url === '/api/history-sources/status') {
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve([
+            {
+              provider: 'copilot',
+              summary: {
+                readable: 2,
+                missing: 0,
+                invalid: 0,
+                containsHistory: 2,
+                totalSessions: 52,
+              },
+              discoveredSources: [
+                {
+                  id: 'copilot:vscode_workspace_db:/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage/x/state.vscdb',
+                  backendId: 'copilot',
+                  providerId: 'copilot',
+                  kind: 'vscode_workspace_db',
+                  path: '/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage/x/state.vscdb',
+                  platform: 'mounted_host',
+                  access: 'readable',
+                  signal: 'contains_history',
+                  discoveredBy: 'manual',
+                  sessionCount: 42,
+                },
+              ],
+            },
+            {
+              provider: 'gemini',
+              summary: {
+                readable: 0,
+                missing: 1,
+                invalid: 0,
+                containsHistory: 0,
+                totalSessions: 0,
+              },
+              discoveredSources: [],
+            },
+            {
+              provider: 'opencode',
+              summary: {
+                readable: 0,
+                missing: 0,
+                invalid: 0,
+                containsHistory: 0,
+                totalSessions: 0,
+              },
+              discoveredSources: [],
+            },
+          ]),
+      } as Response)
+    }
+
+    if (url === '/api/agents') {
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve([
+            {
+              id: 'copilot',
+              name: 'GitHub Copilot',
+              status: 'active',
+              command: 'copilot',
+              canResume: true,
+            },
+          ]),
+      } as Response)
+    }
+
+    if (url === '/api/projects') {
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve([
+            {
+              id: 'acp-frontend',
+              name: 'ACP Frontend',
+              path: '/home/vries/projects/acp-frontend',
+              status: 'available',
+            },
+          ]),
+      } as Response)
+    }
+
+    if (url === '/api/projects/acp-frontend/tree') {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      } as Response)
+    }
+
+    if (url === '/api/sessions') {
+      if (opts?.method === 'POST') {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: () =>
+            Promise.resolve({
+              id: 'test-session-id',
+              title: 'New chat',
+              updatedAt: '2026-03-18T08:00:00.000Z',
+              agentId: 'copilot',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+              messages: [],
+            }),
+        } as Response)
+      }
+
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve([
+            {
+              id: 'test-session-id',
+              title: 'New chat',
+              updatedAt: '2026-03-18T08:00:00.000Z',
+              agentId: 'copilot',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+            },
+          ]),
+      } as Response)
+    }
+
+    if (
+      url === '/api/sessions/test-session-id' ||
+      url.startsWith('/api/sessions/test-session-id?')
+    ) {
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            id: 'test-session-id',
+            title: 'New chat',
+            updatedAt: '2026-03-18T08:00:00.000Z',
+            agentId: 'copilot',
+            project: {
+              id: 'acp-frontend',
+              name: 'ACP Frontend',
+              path: '/home/vries/projects/acp-frontend',
+            },
+            messages: [],
+          }),
+      } as Response)
+    }
+
+    return Promise.reject(new Error(`Unexpected fetch: ${url}`))
+  })
+}
+
+describe('app router', () => {
+  beforeEach(() => {
+    vi.stubGlobal('EventSource', MockEventSource)
+    vi.stubGlobal('fetch', mockFetch())
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.unstubAllGlobals()
+    window.location.hash = ''
+  })
+
+  it('redirects to #/chat on empty hash', async () => {
+    window.location.hash = ''
+
+    render(App)
+
+    await waitFor(() => expect(window.location.hash).toBe('#/chat'))
+    expect(screen.getByPlaceholderText('Type a message…')).toBeDefined()
+  })
+
+  it('navigates to backend settings from the chat header', async () => {
+    window.location.hash = '#/chat?session=test-session-id&project=acp-frontend'
+
+    render(App)
+
+    await waitFor(() => expect(screen.getAllByRole('link', { name: 'Backends' }).length).toBe(2))
+    fireEvent.click(screen.getAllByRole('link', { name: 'Backends' })[0]!)
+
+    await waitFor(() => expect(screen.getByText('Agents')).toBeDefined())
+  })
+
+  it('renders the backend settings route', async () => {
+    window.location.hash = '#/settings'
+
+    render(App)
+
+    await waitFor(() => expect(screen.getByText('Agents')).toBeDefined())
+    expect(screen.getAllByText('GitHub Copilot').length).toBeGreaterThan(0)
+    expect(screen.getByText('Managed by acpx runtime configuration.')).toBeDefined()
+    expect(screen.getAllByText('History Sources').length).toBeGreaterThan(0)
+    await waitFor(() => expect(screen.getAllByText('Discovery status').length).toBeGreaterThan(0))
+    expect(screen.getByText('2 readable')).toBeDefined()
+    expect(screen.getByText('52 sessions found')).toBeDefined()
+    expect(screen.getByRole('link', { name: 'Back To Chat' })).toBeDefined()
+    // History Sources section is present (separate from backend cards)
+    await waitFor(() =>
+      expect(
+        screen.getByDisplayValue('/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage')
+      ).toBeDefined()
+    )
+  })
+
+  it('normalizes blank chat search params to undefined', async () => {
+    window.location.hash = '#/chat?session=%20%20%20&project='
+
+    render(App)
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
+    await waitFor(() => expect(window.location.hash.includes('%20')).toBe(false))
+    await waitFor(() => expect(window.location.hash.includes('project=')).toBe(true))
+  })
+})
diff --git a/frontend/src/router.test.tsx b/frontend/src/router.test.tsx
deleted file mode 100644
index f3e1d8f..0000000
--- a/frontend/src/router.test.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-// @vitest-environment happy-dom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { App } from './App.js'
-import { createAppRouter } from './router.js'
-
-class MockEventSource {
-  close = vi.fn()
-
-  addEventListener() {}
-}
-
-function mockFetch() {
-  return vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
-    if (url === '/api/backends') {
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve([
-            {
-              id: 'copilot-vscode-host',
-              name: 'GitHub Copilot VS Code (Host)',
-              status: 'active',
-              command: null,
-              detectedCommand: null,
-              args: [],
-              defaultArgs: [],
-              enabled: true,
-              usesCustomCommand: false,
-              endpointSupport: {
-                source: 'connection',
-                implemented: ['session/new'],
-                unknown: ['terminal/*', 'project discovery'],
-              },
-              historySupport: {
-                source: 'derived',
-                supported: ['text', 'markdown'],
-                discoveredSources: [
-                  {
-                    id: 'src-1',
-                    backendId: 'copilot-vscode-host',
-                    providerId: 'copilot-vscode-host',
-                    kind: 'vscode_workspace_db',
-                    path: '/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage/x/state.vscdb',
-                    platform: 'mounted_host',
-                    access: 'readable',
-                    signal: 'contains_history',
-                    discoveredBy: 'auto',
-                    sessionCount: 42,
-                  },
-                  {
-                    id: 'src-2',
-                    backendId: 'copilot-vscode-host',
-                    providerId: 'copilot-vscode-host',
-                    kind: 'vscode_chat_sessions',
-                    path: '/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage/x/chatSessions',
-                    platform: 'mounted_host',
-                    access: 'readable',
-                    signal: 'contains_history',
-                    discoveredBy: 'auto',
-                    sessionCount: 10,
-                  },
-                ],
-                discoverySummary: [
-                  {
-                    family: 'vscode',
-                    readable: 2,
-                    missing: 0,
-                    invalid: 0,
-                    containsHistory: 2,
-                  },
-                ],
-              },
-              lastTestResult: null,
-            },
-          ]),
-      } as Response)
-    }
-
-    if (url === '/api/history-sources') {
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve([
-            {
-              provider: 'copilot',
-              paths: ['/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage'],
-              cliPaths: [],
-            },
-            { provider: 'gemini', paths: [] },
-            { provider: 'opencode', paths: [] },
-          ]),
-      } as Response)
-    }
-
-    if (url === '/api/backends' && opts?.method === 'POST') {
-      return Promise.resolve({
-        ok: true,
-        status: 201,
-        json: () =>
-          Promise.resolve({
-            id: 'custom-wrapper',
-            name: 'Custom Wrapper',
-            status: 'detected',
-            command: 'custom-wrapper',
-            detectedCommand: 'custom-wrapper',
-            args: ['--acp'],
-            defaultArgs: ['--acp'],
-            enabled: true,
-            usesCustomCommand: true,
-            endpointSupport: {
-              source: 'unknown',
-              implemented: [],
-              unknown: ['session/new'],
-            },
-            historySupport: {
-              source: 'none',
-              supported: [],
-              discoveredSources: [],
-              discoverySummary: [],
-            },
-          }),
-      } as Response)
-    }
-
-    if (url === '/api/agents') {
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve([
-            { id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' },
-          ]),
-      } as Response)
-    }
-
-    if (url === '/api/projects') {
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve([
-            {
-              id: 'acp-frontend',
-              name: 'ACP Frontend',
-              path: '/home/vries/projects/acp-frontend',
-              status: 'available',
-            },
-          ]),
-      } as Response)
-    }
-
-    if (url === '/api/projects/acp-frontend/tree') {
-      return Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve([]),
-      } as Response)
-    }
-
-    if (url === '/api/sessions') {
-      if (opts?.method === 'POST') {
-        return Promise.resolve({
-          ok: true,
-          status: 201,
-          json: () =>
-            Promise.resolve({
-              id: 'test-session-id',
-              title: 'New chat',
-              updatedAt: '2026-03-18T08:00:00.000Z',
-              agentId: 'copilot',
-              project: {
-                id: 'acp-frontend',
-                name: 'ACP Frontend',
-                path: '/home/vries/projects/acp-frontend',
-              },
-              messages: [],
-            }),
-        } as Response)
-      }
-
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve([
-            {
-              id: 'test-session-id',
-              title: 'New chat',
-              updatedAt: '2026-03-18T08:00:00.000Z',
-              agentId: 'copilot',
-              project: {
-                id: 'acp-frontend',
-                name: 'ACP Frontend',
-                path: '/home/vries/projects/acp-frontend',
-              },
-            },
-          ]),
-      } as Response)
-    }
-
-    if (url === '/api/sessions/test-session-id') {
-      return Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve({
-            id: 'test-session-id',
-            title: 'New chat',
-            updatedAt: '2026-03-18T08:00:00.000Z',
-            agentId: 'copilot',
-            project: {
-              id: 'acp-frontend',
-              name: 'ACP Frontend',
-              path: '/home/vries/projects/acp-frontend',
-            },
-            messages: [],
-          }),
-      } as Response)
-    }
-
-    return Promise.reject(new Error(`Unexpected fetch: ${url}`))
-  })
-}
-
-describe('app router', () => {
-  beforeEach(() => {
-    vi.stubGlobal('EventSource', MockEventSource)
-    vi.stubGlobal('fetch', mockFetch())
-  })
-
-  afterEach(() => {
-    cleanup()
-    vi.unstubAllGlobals()
-    window.history.pushState({}, '', '/')
-  })
-
-  it('redirects the index route to /chat', async () => {
-    window.history.pushState({}, '', '/')
-
-    render(<App routerInstance={createAppRouter()} />)
-
-    await waitFor(() => expect(window.location.pathname).toBe('/chat'))
-    expect(screen.getByPlaceholderText('Type a message…')).toBeDefined()
-  })
-
-  it('navigates to backend settings from the chat header', async () => {
-    window.history.pushState({}, '', '/chat?session=test-session-id')
-    window.history.replaceState({}, '', '/chat?session=test-session-id&project=acp-frontend')
-
-    render(<App routerInstance={createAppRouter()} />)
-
-    await waitFor(() => expect(screen.getAllByRole('link', { name: 'Backends' }).length).toBe(2))
-    fireEvent.click(screen.getAllByRole('link', { name: 'Backends' })[0]!)
-
-    await waitFor(() => expect(screen.getByText('ACP Backends')).toBeDefined())
-  })
-
-  it('renders the MCP settings route', async () => {
-    window.history.pushState({}, '', '/settings/mcp')
-
-    render(<App routerInstance={createAppRouter()} />)
-
-    await waitFor(() => expect(screen.getByText('MCP Configuration')).toBeDefined())
-    expect(screen.getByText(/Manage ACP backends and MCP servers from one place/i)).toBeDefined()
-  })
-
-  it('renders the backend settings route', async () => {
-    window.history.pushState({}, '', '/settings/backends')
-
-    render(<App routerInstance={createAppRouter()} />)
-
-    await waitFor(() => expect(screen.getByText('ACP Backends')).toBeDefined())
-    expect(screen.getByDisplayValue('GitHub Copilot VS Code (Host)')).toBeDefined()
-    expect(screen.getByText('Add Backend')).toBeDefined()
-    expect(screen.getAllByText('History Sources').length).toBeGreaterThan(0)
-    expect(screen.getByText('vscode_workspace_db')).toBeDefined()
-    expect(screen.getByText('vscode_chat_sessions')).toBeDefined()
-    expect(screen.getByText('42 sessions')).toBeDefined()
-    expect(screen.getByRole('link', { name: 'Back To Chat' })).toBeDefined()
-    // History Sources section is present (separate from backend cards)
-    await waitFor(() =>
-      expect(
-        screen.getByDisplayValue('/mnt/c/Users/vries/AppData/Roaming/Code/User/workspaceStorage')
-      ).toBeDefined()
-    )
-  })
-
-  it('normalizes blank chat search params to undefined', async () => {
-    window.history.pushState({}, '', '/chat?session=%20%20%20&project=')
-
-    render(<App routerInstance={createAppRouter()} />)
-
-    await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
-    await waitFor(() => expect(window.location.search.includes('%20')).toBe(false))
-    await waitFor(() => expect(window.location.search.includes('project=')).toBe(true))
-  })
-})
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
deleted file mode 100644
index cdbdbdd..0000000
--- a/frontend/src/router.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Outlet,
-  createRootRoute,
-  createRoute,
-  createRouter,
-  redirect,
-} from '@tanstack/react-router'
-import { ChatPage } from './routes/chat.js'
-import { SettingsPage } from './routes/settings.js'
-
-const rootRoute = createRootRoute({
-  component: Outlet,
-})
-
-const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  beforeLoad: () => {
-    throw redirect({
-      to: '/chat',
-      search: { session: undefined, project: undefined },
-    })
-  },
-})
-
-const chatRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/chat',
-  validateSearch: (search: Record<string, unknown>) => ({
-    session: normalizeSearchString(search.session),
-    project: normalizeSearchString(search.project),
-  }),
-  component: ChatPage,
-})
-
-const settingsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/settings',
-  component: SettingsPage,
-})
-
-const mcpSettingsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/settings/mcp',
-  beforeLoad: () => {
-    throw redirect({ to: '/settings' })
-  },
-})
-
-const backendSettingsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/settings/backends',
-  beforeLoad: () => {
-    throw redirect({ to: '/settings' })
-  },
-})
-
-const routeTree = rootRoute.addChildren([
-  indexRoute,
-  chatRoute,
-  settingsRoute,
-  mcpSettingsRoute,
-  backendSettingsRoute,
-])
-
-export function createAppRouter() {
-  return createRouter({ routeTree })
-}
-
-export type AppRouter = ReturnType<typeof createAppRouter>
-
-export const router = createAppRouter()
-
-function normalizeSearchString(value: unknown): string | undefined {
-  if (typeof value !== 'string') return undefined
-  const trimmed = value.trim()
-  return trimmed.length > 0 ? trimmed : undefined
-}
-
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
-}
diff --git a/frontend/src/routes/ChatLayout.svelte b/frontend/src/routes/ChatLayout.svelte
new file mode 100644
index 0000000..45701c7
--- /dev/null
+++ b/frontend/src/routes/ChatLayout.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+  import ChatHeader from '../components/chat/ChatHeader.svelte'
+  import ChatTranscript from '../components/chat/ChatTranscript.svelte'
+  import ChatComposer from '../components/chat/ChatComposer.svelte'
+  import SessionList from '../components/chat/SessionList.svelte'
+  import ProjectWorkspacePanel from '../components/chat/ProjectWorkspacePanel.svelte'
+
+  interface Props {
+    mobileDrawer?: boolean
+    thinking?: boolean
+  }
+
+  const { mobileDrawer = false, thinking = false }: Props = $props()
+
+  let composerValue = $state('')
+
+  const project = {
+    id: 'acp-frontend',
+    name: 'ACP Frontend',
+    path: '/home/vries/projects/acp-frontend',
+    status: 'available' as const,
+  }
+
+  const agents = [
+    {
+      id: 'copilot',
+      name: 'GitHub Copilot',
+      status: 'active' as const,
+      command: 'copilot',
+      canResume: true,
+    },
+    {
+      id: 'gemini-cli',
+      name: 'Gemini CLI',
+      status: 'active' as const,
+      command: 'gemini',
+      canResume: true,
+    },
+    {
+      id: 'claude-code',
+      name: 'Claude Code',
+      status: 'unavailable' as const,
+      command: null,
+      canResume: false,
+    },
+  ]
+
+  const sessions = [
+    {
+      id: 'session-12345678',
+      title: 'Agentic Coding Presentation Outline',
+      updatedAt: '2026-03-18T09:00:00.000Z',
+      agentId: 'copilot',
+      source: 'history' as const,
+      project: {
+        id: 'acp-frontend',
+        name: 'ACP Frontend',
+        path: '/home/vries/projects/acp-frontend',
+      },
+    },
+    {
+      id: 'session-2',
+      title: 'CLI-Integrated Code Assistant Alternatives',
+      updatedAt: '2026-03-18T08:10:00.000Z',
+      agentId: 'copilot',
+      source: 'history' as const,
+      project: {
+        id: 'acp-frontend',
+        name: 'ACP Frontend',
+        path: '/home/vries/projects/acp-frontend',
+      },
+    },
+  ]
+
+  const projects = [
+    project,
+    {
+      id: 'docs-site',
+      name: 'Docs Site',
+      path: '/home/vries/projects/docs-site',
+      status: 'missing' as const,
+    },
+  ]
+
+  const messages = [
+    {
+      id: 'assistant-1',
+      role: 'assistant' as const,
+      content:
+        'The header should collapse into a tighter control bar while the side rails stop competing with the actual conversation.',
+    },
+    {
+      id: 'user-1',
+      role: 'user' as const,
+      content: 'Keep the layout tighter and less dashboard-like.',
+    },
+  ]
+</script>
+
+<main class="min-h-screen bg-[#05070b] text-slate-100">
+  <div class="mx-auto flex min-h-screen w-full max-w-[1800px] flex-col">
+    <ChatHeader
+      activeAgentName="GitHub Copilot"
+      errorMessage={null}
+      {project}
+      sessionId="session-12345678"
+      ready
+      {thinking}
+      title="Agentic Coding Presentation Outline"
+    />
+
+    <div class="grid min-h-0 flex-1 lg:grid-cols-[20rem_minmax(0,1fr)] xl:grid-cols-[18.5rem_minmax(0,1fr)_19rem]">
+      <aside class="hidden lg:flex">
+        <div class="flex min-h-0 w-full flex-col">
+          <SessionList
+            {agents}
+            {sessions}
+            activeSessionId="session-12345678"
+            creatingSession={false}
+            onCreate={() => {}}
+            onSelect={() => {}}
+          />
+        </div>
+      </aside>
+
+      <section class="flex min-h-[32rem] min-w-0 flex-col overflow-hidden bg-[#070b12] lg:border-x lg:border-white/8">
+        <ChatTranscript
+          activeAgentName="GitHub Copilot"
+          {messages}
+          hasSession
+          loading={false}
+          ready
+          {thinking}
+          errorMessage={null}
+        />
+
+        <ChatComposer
+          value={composerValue}
+          onChange={(v) => (composerValue = v)}
+          onSubmit={() => {}}
+          disabled={false}
+          canSubmit={composerValue.trim().length > 0}
+          helperText="The composer stays visible while you inspect files or diff."
+        />
+      </section>
+
+      <div class="hidden xl:flex">
+        <ProjectWorkspacePanel
+          {projects}
+          selectedProjectId="acp-frontend"
+          onProjectSelect={() => {}}
+          activeAgentCount={2}
+          tree={[
+            { name: 'src', path: 'src', type: 'directory', hasChildren: true },
+            { name: 'package.json', path: 'package.json', type: 'file', hasChildren: false },
+          ]}
+          treePath={null}
+          treeLoading={false}
+          treeError={null}
+          expandedPaths={[]}
+          onToggleFolder={() => {}}
+          selectedEntryPath="src"
+          onSelectEntry={() => {}}
+        />
+      </div>
+    </div>
+  </div>
+
+  {#if mobileDrawer}
+    <aside
+      data-testid="chat-session-drawer"
+      class="fixed inset-y-0 left-0 z-50 flex w-[min(26rem,92vw)] flex-col border-r border-white/10 bg-[#050912] shadow-[0_18px_80px_rgba(2,6,23,0.6)] lg:hidden"
+    >
+      <div class="flex items-center justify-between border-b border-white/8 px-4 py-4">
+        <div>
+          <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+            New Session
+          </p>
+          <p class="mt-1 text-sm text-slate-300">Navigation and project controls</p>
+        </div>
+        <button
+          type="button"
+          aria-label="Close navigation"
+          class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100"
+        >
+          ×
+        </button>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-y-auto">
+        <SessionList
+          {agents}
+          {sessions}
+          activeSessionId="session-12345678"
+          creatingSession={false}
+          onCreate={() => {}}
+          onSelect={() => {}}
+        />
+      </div>
+    </aside>
+  {/if}
+</main>
diff --git a/frontend/src/routes/ChatPage.svelte b/frontend/src/routes/ChatPage.svelte
new file mode 100644
index 0000000..9eb09ce
--- /dev/null
+++ b/frontend/src/routes/ChatPage.svelte
@@ -0,0 +1,608 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte'
+  import { createChatStore } from '../store/chatStore.svelte.js'
+  import ChatHeader from '../components/chat/ChatHeader.svelte'
+  import SessionList from '../components/chat/SessionList.svelte'
+  import ChatComposer from '../components/chat/ChatComposer.svelte'
+  import ChatDiffView from '../components/chat/ChatDiffView.svelte'
+  import ChatTranscript from '../components/chat/ChatTranscript.svelte'
+  import ProjectContextSwitcher from '../components/chat/ProjectContextSwitcher.svelte'
+  import ProjectWorkspacePanel, {
+    type ProjectTreeEntry,
+  } from '../components/chat/ProjectWorkspacePanel.svelte'
+
+  type WorkspaceView = 'chat' | 'files' | 'diff'
+
+  interface ProjectDiffResponse {
+    status: 'ok' | 'git_not_found' | 'error'
+    diff: string
+    message?: string
+  }
+
+  // ---------------------------------------------------------------------------
+  // URL helpers
+  // ---------------------------------------------------------------------------
+
+  function getHashParams(): URLSearchParams {
+    const hash = window.location.hash
+    const queryStart = hash.indexOf('?')
+    return queryStart >= 0
+      ? new URLSearchParams(hash.slice(queryStart + 1))
+      : new URLSearchParams()
+  }
+
+  function setHashParam(key: string, value: string | null): void {
+    const params = getHashParams()
+    if (value === null) {
+      params.delete(key)
+    } else {
+      params.set(key, value)
+    }
+    const qs = params.toString()
+    window.location.hash = qs ? `/chat?${qs}` : '/chat'
+  }
+
+  function readUrlIds() {
+    const params = getHashParams()
+    const rawSession = params.get('session')
+    const rawProject = params.get('project')
+    return {
+      sessionId: rawSession?.trim() || null,
+      projectId: rawProject?.trim() || null,
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Chat store
+  // ---------------------------------------------------------------------------
+
+  const { sessionId: initSession, projectId: initProject } = readUrlIds()
+
+  const store = createChatStore({
+    sessionId: initSession,
+    projectId: initProject,
+    onProjectSelected: (nextProjectId) => setHashParam('project', nextProjectId),
+    onSessionCreated: (nextSessionId) => setHashParam('session', nextSessionId),
+    onSessionSelected: (nextSessionId) => setHashParam('session', nextSessionId),
+    onSessionCleared: () => setHashParam('session', null),
+  })
+
+  // Propagate URL changes (back/forward navigation) into the store
+  function onHashChange() {
+    const { sessionId, projectId } = readUrlIds()
+    store.syncRouteParams(sessionId, projectId)
+  }
+
+  onMount(() => {
+    window.addEventListener('hashchange', onHashChange)
+
+    // Normalize blank URL params: if session was whitespace-only, remove it from the hash
+    const rawParams = getHashParams()
+    const rawSession = rawParams.get('session')
+    if (rawSession !== null && rawSession.trim() === '') {
+      setHashParam('session', null)
+    }
+
+    void store.bootstrap()
+    return () => window.removeEventListener('hashchange', onHashChange)
+  })
+
+  // Connect / reconnect the SSE stream whenever the active session changes.
+  // History sessions are read-only and must never attach a live stream.
+  $effect(() => {
+    const sid = store.currentSessionId
+    const session = store.currentSession
+    if (!sid || !session || session.id !== sid || session.source !== 'live') return
+    return store.connectStream(sid)
+  })
+
+  // ---------------------------------------------------------------------------
+  // Local state
+  // ---------------------------------------------------------------------------
+
+  let input = $state('')
+  let workspaceView = $state<WorkspaceView>('chat')
+  let drawerOpen = $state(false)
+  let projectManagerOpen = $state(false)
+  let resuming = $state(false)
+
+  // File explorer
+  let tree = $state<ProjectTreeEntry[]>([])
+  let treePath = $state<string | null>(null)
+  let treeLoading = $state(false)
+  let treeError = $state<string | null>(null)
+  let expandedPaths = $state<string[]>([])
+  let selectedEntryPath = $state<string | null>(null)
+
+  // Visible project filter
+  let visibleProjectIds = $state<string[]>([])
+
+  // Diff
+  let diffState = $state<'loading' | 'error' | 'git_not_found' | 'empty' | 'ready'>('empty')
+  let diffValue = $state('')
+  let diffMessage = $state<string | null>(null)
+
+  // ---------------------------------------------------------------------------
+  // Derived
+  // ---------------------------------------------------------------------------
+
+  const activeSession = $derived(
+    store.sessions.find((s) => s.id === store.currentSessionId) ?? null
+  )
+
+  const isHistorySession = $derived(store.currentSession?.source === 'history')
+
+  const resumableAgents = $derived(
+    store.agents.filter(
+      (agent) =>
+        agent.canResume &&
+        (isHistorySession || agent.id !== store.currentSession?.agentId)
+    )
+  )
+
+  const activeAgentName = $derived(
+    store.agents.find((a) => a.id === activeSession?.agentId)?.name ?? 'the agent'
+  )
+
+  const filteredSessions = $derived(
+    (() => {
+      const visibleSet = new Set(visibleProjectIds)
+      return store.sessions.filter(
+        (session) =>
+          !session.project ||
+          visibleSet.size === 0 ||
+          visibleSet.has(session.project.id)
+      )
+    })()
+  )
+
+  const activeViewLabel = $derived(
+    workspaceView === 'diff' ? 'Diff' : workspaceView === 'files' ? 'Files' : 'Chat'
+  )
+
+  // ---------------------------------------------------------------------------
+  // Effects
+  // ---------------------------------------------------------------------------
+
+  // Reset tree when selected project changes
+  $effect(() => {
+    void store.selectedProject?.id // track dependency
+    expandedPaths = []
+    selectedEntryPath = null
+    void loadTree(null)
+  })
+
+  // Sync visible project list when available projects change
+  $effect(() => {
+    const nextVisible = store.availableProjects.map((p) => p.id)
+    const current = untrack(() => visibleProjectIds)
+    if (current.length === 0) {
+      visibleProjectIds = nextVisible
+    } else {
+      const filtered = current.filter((id) => nextVisible.includes(id))
+      const added = nextVisible.filter((id) => !current.includes(id))
+      const merged = [...filtered, ...added]
+      visibleProjectIds = merged.length > 0 ? merged : nextVisible
+    }
+  })
+
+  // Load diff when switching to diff view
+  $effect(() => {
+    if (workspaceView === 'diff') {
+      void loadDiff()
+    }
+  })
+
+  // ---------------------------------------------------------------------------
+  // Tree helpers
+  // ---------------------------------------------------------------------------
+
+  function getParentTreePath(path: string): string | null {
+    const lastSlash = path.lastIndexOf('/')
+    return lastSlash >= 0 ? path.slice(0, lastSlash) : null
+  }
+
+  async function loadTree(nextPath: string | null = null): Promise<void> {
+    if (!store.selectedProject) {
+      tree = []
+      treePath = null
+      return
+    }
+
+    treeLoading = true
+    treeError = null
+
+    try {
+      const query = nextPath ? `?path=${encodeURIComponent(nextPath)}` : ''
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(store.selectedProject.id)}/tree${query}`
+      )
+      if (!response.ok) {
+        throw new Error(`Explorer request failed with status ${response.status}`)
+      }
+      tree = (await response.json()) as ProjectTreeEntry[]
+      treePath = nextPath
+    } catch (error) {
+      console.error('[ChatPage] project tree load failed:', error)
+      tree = []
+      treeError = 'Unable to load the folder explorer right now. Try another project or reload.'
+    } finally {
+      treeLoading = false
+    }
+  }
+
+  async function loadDiff(): Promise<void> {
+    if (!store.selectedProject) {
+      diffState = 'empty'
+      diffValue = ''
+      diffMessage = 'Choose a project to inspect the working tree.'
+      return
+    }
+
+    diffState = 'loading'
+    diffValue = ''
+    diffMessage = null
+
+    try {
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(store.selectedProject.id)}/diff`
+      )
+      if (!response.ok) {
+        throw new Error(`Diff request failed with status ${response.status}`)
+      }
+      const payload = (await response.json()) as ProjectDiffResponse
+      diffValue = payload.diff
+      diffMessage = payload.message ?? null
+
+      if (payload.status === 'git_not_found') {
+        diffState = 'git_not_found'
+        return
+      }
+      if (payload.status === 'error') {
+        diffState = 'error'
+        return
+      }
+      diffState = payload.diff.trim().length > 0 ? 'ready' : 'empty'
+    } catch (error) {
+      console.error('[ChatPage] project diff load failed:', error)
+      diffState = 'error'
+      diffValue = ''
+      diffMessage = 'Unable to load the current project diff right now.'
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Event handlers
+  // ---------------------------------------------------------------------------
+
+  async function handleResume(agentId: string): Promise<void> {
+    resuming = true
+    try {
+      await store.resumeSession(agentId)
+    } finally {
+      resuming = false
+    }
+  }
+
+  async function handleSubmit(e: SubmitEvent): Promise<void> {
+    e.preventDefault()
+    const text = input.trim()
+    if (!text || !store.ready) return
+
+    input = ''
+    workspaceView = 'chat'
+    try {
+      await store.sendMessage(text)
+    } catch {
+      // Error state is already surfaced by the store.
+    }
+  }
+
+  async function handleProjectSelect(nextProjectId: string): Promise<void> {
+    projectManagerOpen = false
+    await store.selectProject(nextProjectId)
+  }
+
+  function toggleProjectVisibility(projectIdToToggle: string, visible: boolean): void {
+    if (visible) {
+      if (!visibleProjectIds.includes(projectIdToToggle)) {
+        visibleProjectIds = [...visibleProjectIds, projectIdToToggle]
+      }
+    } else {
+      const next = visibleProjectIds.filter((id) => id !== projectIdToToggle)
+      if (next.length > 0) visibleProjectIds = next
+    }
+  }
+
+  async function handleSessionSelect(nextSessionId: string): Promise<void> {
+    drawerOpen = false
+    workspaceView = 'chat'
+    await store.selectSession(nextSessionId)
+  }
+
+  function openProjectManager(): void {
+    drawerOpen = false
+    projectManagerOpen = true
+  }
+
+  function buildSurfaceTabClassName(active: boolean): string {
+    return [
+      'inline-flex h-10 items-center justify-center rounded-xl border px-3.5 text-sm font-medium transition',
+      active
+        ? 'border-teal-500/30 bg-teal-500/12 text-teal-100'
+        : 'border-white/10 bg-slate-900/55 text-slate-300 hover:border-white/15 hover:bg-slate-900/85 hover:text-slate-100',
+    ].join(' ')
+  }
+</script>
+
+<main class="h-[100dvh] overflow-hidden bg-[#05070b] text-slate-100">
+  <div class="flex h-full min-h-0 w-full flex-col">
+    <ChatHeader
+      activeAgentName={activeAgentName}
+      errorMessage={store.errorMessage}
+      project={store.selectedProject}
+      sessionId={store.currentSessionId}
+      ready={store.ready}
+      thinking={store.thinking}
+      title={activeSession?.title ?? null}
+      isHistorySession={isHistorySession}
+    />
+
+    <!-- Mobile top bar -->
+    <div class="flex items-center justify-between border-b border-white/8 bg-slate-950/78 px-4 py-3 lg:hidden">
+      <button
+        type="button"
+        aria-label="Open navigation"
+        onclick={() => (drawerOpen = true)}
+        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
+      >
+        ≡
+      </button>
+
+      <div class="min-w-0 text-center">
+        <p class="truncate text-sm font-medium text-slate-100">
+          {store.selectedProject?.name ?? 'Workspace'}
+        </p>
+        <p class="truncate text-xs text-slate-400">{activeViewLabel}</p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          onclick={() => (workspaceView = 'files')}
+          class={buildSurfaceTabClassName(workspaceView === 'files')}
+        >
+          Files
+        </button>
+        <button
+          type="button"
+          onclick={() => (workspaceView = 'diff')}
+          class={buildSurfaceTabClassName(workspaceView === 'diff')}
+        >
+          Diff
+        </button>
+      </div>
+    </div>
+
+    <div class="grid min-h-0 flex-1 overflow-hidden lg:grid-cols-[20rem_minmax(0,1fr)] lg:grid-rows-[1fr]">
+      <!-- Desktop sidebar -->
+      <aside class="hidden min-h-0 overflow-hidden lg:flex">
+        <div class="flex min-h-0 w-full flex-col">
+          <SessionList
+            agents={store.agents}
+            sessions={filteredSessions}
+            selectedProjectId={store.selectedProject?.id ?? null}
+          activeSessionId={store.currentSessionId}
+          creatingSession={store.creatingSession}
+          loading={store.loading}
+          onCreate={store.startNewSession}
+          onSelect={handleSessionSelect}
+        />
+
+          <div class="border-r border-t border-white/8 bg-slate-950/84 p-4 text-slate-100">
+            <ProjectContextSwitcher
+              projects={store.projects}
+              selectedProjectId={store.selectedProject?.id ?? null}
+              visibleProjectIds={visibleProjectIds}
+              open={projectManagerOpen}
+              onOpenChange={(v) => (projectManagerOpen = v)}
+              onProjectSelect={handleProjectSelect}
+              onProjectVisibilityChange={toggleProjectVisibility}
+              onAddProject={store.addProject}
+              onRemoveProject={store.removeProject}
+              onSuggestProjectPaths={store.suggestProjectPaths}
+            />
+
+            <a
+              href="/#/settings"
+              class="mt-4 inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-200 transition hover:border-white/15 hover:bg-slate-900"
+            >
+              Settings
+            </a>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Main workspace section -->
+      <section class="flex min-h-0 min-w-0 flex-col overflow-hidden bg-[#070b12] lg:border-x lg:border-white/8">
+        <!-- Desktop workspace tabs -->
+        <div class="hidden items-center justify-between border-b border-white/8 bg-slate-950/72 px-6 py-3 lg:flex">
+          <div>
+            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+              Workspace view
+            </p>
+            <p class="mt-1 text-sm text-slate-300">
+              Keep the conversation central while switching files and diff in place.
+            </p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              onclick={() => (workspaceView = 'chat')}
+              class={buildSurfaceTabClassName(workspaceView === 'chat')}
+            >
+              Chat
+            </button>
+            <button
+              type="button"
+              onclick={() => (workspaceView = 'files')}
+              class={buildSurfaceTabClassName(workspaceView === 'files')}
+            >
+              Files
+            </button>
+            <button
+              type="button"
+              onclick={() => (workspaceView = 'diff')}
+              class={buildSurfaceTabClassName(workspaceView === 'diff')}
+            >
+              Diff
+            </button>
+          </div>
+        </div>
+
+        {#if workspaceView === 'chat'}
+          <ChatTranscript
+            activeAgentName={activeAgentName}
+            canManageProjects={true}
+            canStartSession={store.activeAgents.length > 0 && store.availableProjects.length > 0}
+            hasAnyProject={store.projects.length > 0}
+            hasAvailableAgent={store.activeAgents.length > 0}
+            hasAvailableProject={store.availableProjects.length > 0}
+            messages={store.messages}
+            projectPath={store.selectedProject?.path ?? null}
+            sessionId={store.currentSessionId}
+            hasSession={store.currentSessionId !== null}
+            loading={store.loading}
+            onOpenProjectManager={openProjectManager}
+            onStartSession={() => {
+              const firstAgent = store.activeAgents[0]
+              if (firstAgent) {
+                void store.startNewSession(firstAgent.id)
+              }
+            }}
+            ready={store.ready}
+            streamReconnecting={store.streamReconnecting}
+            thinking={store.thinking}
+            errorMessage={store.errorMessage}
+            historyLoading={store.historyLoading}
+          />
+        {:else if workspaceView === 'diff'}
+          <div class="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6 sm:py-6 lg:px-8">
+            <div class="mx-auto max-w-5xl">
+              <ChatDiffView state={diffState} diff={diffValue} message={diffMessage} />
+            </div>
+          </div>
+        {:else}
+          <ProjectWorkspacePanel
+            projects={store.projects}
+            selectedProjectId={store.selectedProject?.id ?? null}
+            onProjectSelect={handleProjectSelect}
+            activeAgentCount={store.activeAgents.length}
+            showProjectPicker={false}
+            tree={tree}
+            treePath={treePath}
+            treeLoading={treeLoading}
+            treeError={treeError}
+            expandedPaths={expandedPaths}
+            onToggleFolder={async (path) => {
+              const collapsing = expandedPaths.includes(path)
+              expandedPaths = collapsing
+                ? expandedPaths.filter((item) => item !== path)
+                : [path]
+              await loadTree(collapsing ? getParentTreePath(path) : path)
+            }}
+            selectedEntryPath={selectedEntryPath}
+            onSelectEntry={(p) => (selectedEntryPath = p)}
+          />
+        {/if}
+
+        <ChatComposer
+          value={input}
+          onChange={(v) => (input = v)}
+          onSubmit={handleSubmit}
+          disabled={!store.ready}
+          canSubmit={store.ready && input.trim().length > 0}
+          isHistorySession={isHistorySession}
+          historyLoading={store.historyLoading}
+          onResume={handleResume}
+          resumableAgents={resumableAgents}
+          resuming={resuming}
+          modelState={store.modelState}
+          onModelChange={store.setSessionModel}
+          helperText={store.ready
+            ? 'The composer stays available while you inspect files or diff so the conversation never loses context.'
+            : undefined}
+        />
+      </section>
+    </div>
+  </div>
+
+  <!-- Mobile drawer -->
+  {#if drawerOpen}
+    <button
+      type="button"
+      aria-label="Close navigation"
+      onclick={() => (drawerOpen = false)}
+      class="fixed inset-0 z-40 bg-slate-950/70 backdrop-blur-sm lg:hidden"
+    ></button>
+    <aside
+      data-testid="chat-session-drawer"
+      class="fixed inset-y-0 left-0 z-50 flex w-[min(26rem,92vw)] flex-col border-r border-white/10 bg-[#050912] shadow-[0_18px_80px_rgba(2,6,23,0.6)] lg:hidden"
+    >
+      <div class="flex items-center justify-between border-b border-white/8 px-4 py-4">
+        <div>
+          <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+            New Session
+          </p>
+          <p class="mt-1 text-sm text-slate-300">Navigation and project controls</p>
+        </div>
+        <button
+          type="button"
+          aria-label="Close navigation"
+          onclick={() => (drawerOpen = false)}
+          class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100"
+        >
+          ×
+        </button>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-y-auto">
+        <SessionList
+          agents={store.agents}
+          sessions={filteredSessions}
+          selectedProjectId={store.selectedProject?.id ?? null}
+          activeSessionId={store.currentSessionId}
+          creatingSession={store.creatingSession}
+          loading={store.loading}
+          onCreate={async (agentId) => {
+            drawerOpen = false
+            await store.startNewSession(agentId)
+          }}
+          onSelect={handleSessionSelect}
+        />
+      </div>
+
+      <div class="border-t border-white/8 p-4">
+        <button
+          type="button"
+          aria-label="Open project manager"
+          onclick={openProjectManager}
+          class="inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
+        >
+          Open project manager
+        </button>
+
+        <a
+          href="/#/settings"
+          onclick={() => (drawerOpen = false)}
+          class="mt-3 inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/55 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900"
+        >
+          Settings
+        </a>
+      </div>
+    </aside>
+  {/if}
+
+  <div class="pointer-events-none fixed inset-x-0 top-0 -z-10 h-40 bg-[radial-gradient(circle_at_top,rgba(45,212,191,0.1),transparent_42%)]"></div>
+</main>
diff --git a/frontend/src/routes/SettingsPage.svelte b/frontend/src/routes/SettingsPage.svelte
new file mode 100644
index 0000000..e95ad46
--- /dev/null
+++ b/frontend/src/routes/SettingsPage.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { createBackendStore, createHistorySourcesStore } from '../store/backendStore.svelte.js'
+  import BackendCard from '../components/settings/BackendCard.svelte'
+  import HistorySourceCard from '../components/settings/HistorySourceCard.svelte'
+
+  const backendStore = createBackendStore()
+  const historyStore = createHistorySourcesStore()
+
+  const errorMessage = $derived(backendStore.errorMessage ?? historyStore.errorMessage)
+
+  onMount(async () => {
+    await Promise.all([backendStore.load(), historyStore.load()])
+  })
+</script>
+
+<main class="min-h-screen bg-[#05070b] px-3 py-6 text-slate-100 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-6xl">
+    <div
+      class="rounded-2xl border border-white/10 bg-slate-950/80 p-4 shadow-[0_24px_80px_rgba(2,6,23,0.45)] sm:p-6"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+            Settings
+          </p>
+          <h1 class="mt-3 font-[family:var(--font-display)] text-4xl text-slate-50">Settings</h1>
+        </div>
+
+        <div class="flex gap-2">
+          <a
+            href="/#/chat"
+            class="inline-flex h-10 items-center justify-center rounded-lg border border-white/10 bg-slate-900/90 px-3 text-sm font-medium text-slate-100 transition hover:bg-slate-800"
+          >
+            Back To Chat
+          </a>
+        </div>
+      </div>
+
+      <p class="mt-4 max-w-3xl text-sm leading-6 text-slate-400">
+        acpx manages live agent runtime state, while this screen manages local history source hints
+        used to discover imported sessions from each provider.
+      </p>
+
+      {#if errorMessage}
+        <div
+          class="mt-5 rounded-xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-100"
+        >
+          {errorMessage}
+        </div>
+      {/if}
+
+      <section class="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Agents
+        </p>
+        <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
+          Agent runtime and availability are controlled by acpx. This section is read-only status so
+          you can verify what is currently reachable.
+        </p>
+
+        {#if backendStore.loading}
+          <div
+            class="mt-8 rounded-xl border border-dashed border-white/10 bg-slate-900/70 p-6 text-sm text-slate-400"
+          >
+            Loading agent status...
+          </div>
+        {:else}
+          <div class="mt-8 grid gap-5 xl:grid-cols-2">
+            {#each backendStore.backends as backend (backend.id)}
+              <BackendCard {backend} />
+            {/each}
+          </div>
+        {/if}
+      </section>
+
+      <section class="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+          History Sources
+        </p>
+        <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
+          Configure where each AI provider stores its conversation history. These paths are used to
+          discover sessions for import. History path hints are stored separately from backend
+          connection settings.
+        </p>
+
+        {#if historyStore.loading}
+          <div
+            class="mt-8 rounded-xl border border-dashed border-white/10 bg-slate-900/70 p-6 text-sm text-slate-400"
+          >
+            Loading history sources...
+          </div>
+        {:else}
+          <div class="mt-8 grid gap-5 xl:grid-cols-2">
+            {#each historyStore.sources as source (source.provider)}
+              <HistorySourceCard
+                {source}
+                status={historyStore.sourceStatus.find((entry) => entry.provider === source.provider) ?? null}
+                busy={historyStore.savingProvider === source.provider}
+                onSave={historyStore.saveSource}
+              />
+            {/each}
+          </div>
+        {/if}
+      </section>
+
+      <section class="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+          MCP Servers
+        </p>
+        <h2 class="mt-3 text-2xl font-semibold text-slate-50">MCP Configuration</h2>
+        <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
+          MCP server configuration will live in this section so backend and MCP settings share a
+          single entry point.
+        </p>
+      </section>
+    </div>
+  </div>
+</main>
diff --git a/frontend/src/routes/chat-layout.stories.ts b/frontend/src/routes/chat-layout.stories.ts
new file mode 100644
index 0000000..d49d08a
--- /dev/null
+++ b/frontend/src/routes/chat-layout.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ChatLayout from './ChatLayout.svelte'
+
+const meta = {
+  title: 'Pages/ChatLayout',
+  component: ChatLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ChatLayout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    thinking: true,
+    mobileDrawer: false,
+  },
+}
+
+export const MobileDrawerOpen: Story = {
+  args: {
+    mobileDrawer: true,
+    thinking: true,
+  },
+}
diff --git a/frontend/src/routes/chat-layout.stories.tsx b/frontend/src/routes/chat-layout.stories.tsx
deleted file mode 100644
index e402522..0000000
--- a/frontend/src/routes/chat-layout.stories.tsx
+++ /dev/null
@@ -1,434 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
-import { ChatComposer } from '../components/chat/ChatComposer.js'
-import { ChatDiffView } from '../components/chat/ChatDiffView.js'
-import { ChatHeader } from '../components/chat/ChatHeader.js'
-import { ProjectContextSwitcher } from '../components/chat/ProjectContextSwitcher.js'
-import { ProjectWorkspacePanel } from '../components/chat/ProjectWorkspacePanel.js'
-import { SessionList } from '../components/chat/SessionList.js'
-import { ChatTranscript } from '../components/chat/ChatTranscript.js'
-
-type Surface = 'chat' | 'files' | 'diff'
-
-function ChatLayoutStory(props: { mobileDrawer?: boolean; surface?: Surface; thinking?: boolean }) {
-  const [value, setValue] = useState('')
-
-  return (
-    <main className="min-h-screen bg-[#05070b] text-slate-100">
-      <div className="mx-auto flex min-h-screen w-full max-w-[1800px] flex-col">
-        <ChatHeader
-          activeAgentName="GitHub Copilot"
-          errorMessage={null}
-          renderLink={({ className, children }) => <span className={className}>{children}</span>}
-          project={{
-            id: 'acp-frontend',
-            name: 'ACP Frontend',
-            path: '/home/vries/projects/acp-frontend',
-            status: 'available',
-          }}
-          sessionId="session-12345678"
-          ready
-          thinking={props.thinking ?? false}
-          title="Agentic Coding Presentation Outline"
-        />
-
-        <div className="grid min-h-0 flex-1 lg:grid-cols-[20rem_minmax(0,1fr)] xl:grid-cols-[18.5rem_minmax(0,1fr)_19rem]">
-          <aside className="hidden lg:flex">
-            <div className="flex min-h-0 w-full flex-col">
-              <SessionList
-                agents={[
-                  {
-                    id: 'copilot',
-                    name: 'GitHub Copilot',
-                    status: 'active',
-                    command: 'copilot',
-                    canResume: true,
-                    canLoad: false,
-                  },
-                  {
-                    id: 'gemini-cli',
-                    name: 'Gemini CLI',
-                    status: 'active',
-                    command: 'gemini',
-                    canResume: true,
-                    canLoad: false,
-                  },
-                  {
-                    id: 'claude-code',
-                    name: 'Claude Code',
-                    status: 'unavailable',
-                    command: null,
-                    canResume: false,
-                    canLoad: false,
-                  },
-                ]}
-                sessions={[
-                  {
-                    id: 'session-12345678',
-                    title: 'Agentic Coding Presentation Outline',
-                    updatedAt: '2026-03-18T09:00:00.000Z',
-                    agentId: 'copilot',
-                    source: 'history' as const,
-                    project: {
-                      id: 'acp-frontend',
-                      name: 'ACP Frontend',
-                      path: '/home/vries/projects/acp-frontend',
-                    },
-                  },
-                  {
-                    id: 'session-2',
-                    title: 'CLI-Integrated Code Assistant Alternatives',
-                    updatedAt: '2026-03-18T08:10:00.000Z',
-                    agentId: 'copilot',
-                    source: 'history' as const,
-                    project: {
-                      id: 'acp-frontend',
-                      name: 'ACP Frontend',
-                      path: '/home/vries/projects/acp-frontend',
-                    },
-                  },
-                  {
-                    id: 'session-3',
-                    title: 'Gemini follow-up on grouped session discovery',
-                    updatedAt: '2026-03-16T11:18:00.000Z',
-                    agentId: 'gemini-cli',
-                    source: 'history' as const,
-                    project: {
-                      id: 'docs-site',
-                      name: 'Docs Site',
-                      path: '/home/vries/projects/docs-site',
-                    },
-                  },
-                ]}
-                activeSessionId="session-12345678"
-                creatingSession={false}
-                onCreate={() => {}}
-                onSelect={() => {}}
-              />
-
-              <div className="border-r border-t border-white/8 bg-slate-950/84 p-4">
-                <ProjectContextSwitcher
-                  projects={[
-                    {
-                      id: 'acp-frontend',
-                      name: 'ACP Frontend',
-                      path: '/home/vries/projects/acp-frontend',
-                      status: 'available',
-                    },
-                    {
-                      id: 'docs-site',
-                      name: 'Docs Site',
-                      path: '/home/vries/projects/docs-site',
-                      status: 'missing',
-                    },
-                  ]}
-                  selectedProjectId="acp-frontend"
-                  visibleProjectIds={['acp-frontend', 'docs-site']}
-                  onProjectSelect={() => {}}
-                  onOpenChange={() => {}}
-                  onProjectVisibilityChange={() => {}}
-                  onAddProject={async () => ({
-                    id: 'new-project',
-                    name: 'New Project',
-                    path: '/home/vries/projects/new-project',
-                    status: 'available',
-                  })}
-                  onRemoveProject={async () => {}}
-                  onSuggestProjectPaths={async () => []}
-                />
-
-                <button
-                  type="button"
-                  className="mt-4 inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-200"
-                >
-                  Settings
-                </button>
-              </div>
-            </div>
-          </aside>
-
-          <section className="flex min-h-[32rem] min-w-0 flex-col overflow-hidden bg-[#070b12] lg:border-x lg:border-white/8">
-            <div className="hidden items-center justify-between border-b border-white/8 bg-slate-950/72 px-6 py-3 lg:flex">
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                  Workspace view
-                </p>
-                <p className="mt-1 text-sm text-slate-300">
-                  Keep the conversation central while switching files and diff in place.
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  className={tabClassName(props.surface !== 'files' && props.surface !== 'diff')}
-                >
-                  Chat
-                </button>
-                <button type="button" className={tabClassName(props.surface === 'files')}>
-                  Files
-                </button>
-                <button type="button" className={tabClassName(props.surface === 'diff')}>
-                  Diff
-                </button>
-              </div>
-            </div>
-
-            {props.surface === 'diff' ? (
-              <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6 sm:py-6 lg:px-8">
-                <div className="mx-auto max-w-5xl">
-                  <ChatDiffView
-                    state="ready"
-                    diff={`diff --git a/src/app.tsx b/src/app.tsx
-index 1234567..89abcde 100644
---- a/src/app.tsx
-+++ b/src/app.tsx
-@@ -1,3 +1,4 @@
- import { AppShell } from './shell'
--import { LegacyPane } from './legacy'
-+import { ChatDiffView } from './chat'
- 
-+const enabled = true
- export function App() {
-`}
-                  />
-                </div>
-              </div>
-            ) : props.surface === 'files' ? (
-              <ProjectWorkspacePanel
-                projects={[
-                  {
-                    id: 'acp-frontend',
-                    name: 'ACP Frontend',
-                    path: '/home/vries/projects/acp-frontend',
-                    status: 'available',
-                  },
-                  {
-                    id: 'docs-site',
-                    name: 'Docs Site',
-                    path: '/home/vries/projects/docs-site',
-                    status: 'missing',
-                  },
-                ]}
-                selectedProjectId="acp-frontend"
-                onProjectSelect={() => {}}
-                activeAgentCount={2}
-                tree={[
-                  { name: 'src', path: 'src', type: 'directory', hasChildren: true },
-                  { name: 'package.json', path: 'package.json', type: 'file', hasChildren: false },
-                ]}
-                treePath={null}
-                treeLoading={false}
-                treeError={null}
-                expandedPaths={[]}
-                onToggleFolder={() => {}}
-                selectedEntryPath="src"
-                onSelectEntry={() => {}}
-              />
-            ) : (
-              <ChatTranscript
-                activeAgentName="GitHub Copilot"
-                canManageProjects
-                canStartSession
-                hasAnyProject
-                hasAvailableAgent
-                hasAvailableProject
-                onOpenProjectManager={() => {}}
-                onStartSession={() => {}}
-                messages={[
-                  {
-                    id: 'assistant-1',
-                    role: 'assistant',
-                    content:
-                      'The header should collapse into a tighter control bar while the side rails stop competing with the actual conversation.',
-                  },
-                  {
-                    id: 'user-1',
-                    role: 'user',
-                    content: 'Keep the layout tighter and less dashboard-like.',
-                  },
-                  {
-                    id: 'assistant-2',
-                    role: 'assistant',
-                    content:
-                      'A slimmer rail, quieter badges, and a more dominant transcript column will get much closer to that feeling.',
-                  },
-                ]}
-                hasSession
-                loading={false}
-                ready
-                thinking={props.thinking ?? true}
-                errorMessage={null}
-              />
-            )}
-
-            <ChatComposer
-              value={value}
-              onChange={setValue}
-              onSubmit={(event) => event.preventDefault()}
-              disabled={false}
-              canSubmit={value.trim().length > 0}
-              helperText="The composer stays visible while you inspect files or diff so the conversation keeps its place."
-            />
-          </section>
-
-          <div className="hidden xl:flex">
-            <ProjectWorkspacePanel
-              projects={[
-                {
-                  id: 'acp-frontend',
-                  name: 'ACP Frontend',
-                  path: '/home/vries/projects/acp-frontend',
-                  status: 'available',
-                },
-                {
-                  id: 'docs-site',
-                  name: 'Docs Site',
-                  path: '/home/vries/projects/docs-site',
-                  status: 'missing',
-                },
-              ]}
-              selectedProjectId="acp-frontend"
-              onProjectSelect={() => {}}
-              activeAgentCount={2}
-              tree={[
-                { name: 'src', path: 'src', type: 'directory', hasChildren: true },
-                { name: 'package.json', path: 'package.json', type: 'file', hasChildren: false },
-              ]}
-              treePath={null}
-              treeLoading={false}
-              treeError={null}
-              expandedPaths={[]}
-              onToggleFolder={() => {}}
-              selectedEntryPath="src"
-              onSelectEntry={() => {}}
-            />
-          </div>
-        </div>
-      </div>
-
-      {props.mobileDrawer ? (
-        <aside
-          data-testid="chat-session-drawer"
-          className="fixed inset-y-0 left-0 z-50 flex w-[min(26rem,92vw)] flex-col border-r border-white/10 bg-[#050912] shadow-[0_18px_80px_rgba(2,6,23,0.6)] lg:hidden"
-        >
-          <div className="flex items-center justify-between border-b border-white/8 px-4 py-4">
-            <div>
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-                New Session
-              </p>
-              <p className="mt-1 text-sm text-slate-300">Navigation and project controls</p>
-            </div>
-            <button
-              type="button"
-              aria-label="Close navigation"
-              className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100"
-            >
-              ×
-            </button>
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto">
-            <SessionList
-              agents={[
-                {
-                  id: 'copilot',
-                  name: 'GitHub Copilot',
-                  status: 'active',
-                  command: 'copilot',
-                  canResume: true,
-                  canLoad: false,
-                },
-                {
-                  id: 'gemini-cli',
-                  name: 'Gemini CLI',
-                  status: 'active',
-                  command: 'gemini',
-                  canResume: true,
-                  canLoad: false,
-                },
-              ]}
-              sessions={[
-                {
-                  id: 'session-12345678',
-                  title: 'Agentic Coding Presentation Outline',
-                  updatedAt: '2026-03-18T09:00:00.000Z',
-                  agentId: 'copilot',
-                  source: 'history' as const,
-                  project: {
-                    id: 'acp-frontend',
-                    name: 'ACP Frontend',
-                    path: '/home/vries/projects/acp-frontend',
-                  },
-                },
-              ]}
-              activeSessionId="session-12345678"
-              creatingSession={false}
-              onCreate={() => {}}
-              onSelect={() => {}}
-            />
-          </div>
-
-          <div className="border-t border-white/8 p-4">
-            <button
-              type="button"
-              aria-label="Open project manager"
-              className="inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-100"
-            >
-              Open project manager
-            </button>
-          </div>
-        </aside>
-      ) : null}
-    </main>
-  )
-}
-
-function tabClassName(active: boolean) {
-  return [
-    'inline-flex h-10 items-center justify-center rounded-xl border px-3.5 text-sm font-medium transition',
-    active
-      ? 'border-teal-500/30 bg-teal-500/12 text-teal-100'
-      : 'border-white/10 bg-slate-900/55 text-slate-300',
-  ].join(' ')
-}
-
-const meta = {
-  title: 'Pages/ChatLayout',
-  component: ChatLayoutStory,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof ChatLayoutStory>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    surface: 'chat',
-    thinking: true,
-  },
-}
-
-export const DiffMode: Story = {
-  args: {
-    surface: 'diff',
-    thinking: false,
-  },
-}
-
-export const FilesMode: Story = {
-  args: {
-    surface: 'files',
-    thinking: false,
-  },
-}
-
-export const MobileDrawerOpen: Story = {
-  args: {
-    mobileDrawer: true,
-    surface: 'chat',
-    thinking: true,
-  },
-}
diff --git a/frontend/src/routes/chat.test.tsx b/frontend/src/routes/chat.test.svelte.ts
similarity index 72%
rename from frontend/src/routes/chat.test.tsx
rename to frontend/src/routes/chat.test.svelte.ts
index 747a1ce..1ba5b8f 100644
--- a/frontend/src/routes/chat.test.tsx
+++ b/frontend/src/routes/chat.test.svelte.ts
@@ -1,15 +1,15 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, fireEvent, waitFor, cleanup, within } from '@testing-library/react'
-import { EventType } from '@ag-ui/core'
-import { App } from '../App.js'
-import { buildSendMessagePayload } from '../hooks/useAgUiChat.js'
-import { createAppRouter } from '../router.js'
+import { render, screen, fireEvent, waitFor, cleanup, within } from '@testing-library/svelte'
+import { StreamEvent } from '../stream-events.js'
+import App from '../App.svelte'
+import { buildSendMessagePayload } from '../store/chatStore.svelte.js'
 
 type SseHandler = (event: MessageEvent) => void
 
 class MockEventSource {
   static instance: MockEventSource | null = null
+  static instances: MockEventSource[] = []
 
   readonly url: string
   private readonly handlers: Map<string, SseHandler[]> = new Map()
@@ -19,6 +19,7 @@ class MockEventSource {
   constructor(url: string) {
     this.url = url
     MockEventSource.instance = this
+    MockEventSource.instances.push(this)
   }
 
   addEventListener(type: string, handler: SseHandler) {
@@ -35,9 +36,9 @@ class MockEventSource {
 const SESSION_ID = 'test-session-id'
 const SECOND_SESSION_ID = 'older-session-id'
 
-function renderChatPage(path = '/chat') {
-  window.history.pushState({}, '', path)
-  return render(<App routerInstance={createAppRouter()} />)
+function renderChatPage(hash = '#/chat') {
+  window.location.hash = hash
+  return render(App)
 }
 
 function mockFetch(options?: {
@@ -234,6 +235,7 @@ function mockFetch(options?: {
 describe('ChatPage', () => {
   beforeEach(() => {
     MockEventSource.instance = null
+    MockEventSource.instances = []
     vi.stubGlobal('EventSource', MockEventSource)
     vi.stubGlobal('fetch', mockFetch())
   })
@@ -241,17 +243,17 @@ describe('ChatPage', () => {
   afterEach(() => {
     cleanup()
     vi.unstubAllGlobals()
-    window.history.pushState({}, '', '/')
+    window.location.hash = ''
   })
 
   it('renders the input field', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
     await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
     await waitFor(() => expect(MockEventSource.instance).not.toBeNull())
   })
 
   it('renders the workspace shell with header and extension panels', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     await waitFor(() => expect(screen.getByText('Chat Workspace')).toBeDefined())
     expect(screen.getByTestId('chat-composer')).toBeDefined()
@@ -375,7 +377,7 @@ describe('ChatPage', () => {
       })
     )
 
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     const sessionPanel = await screen.findByTestId('chat-session-panel')
     await waitFor(() =>
@@ -385,7 +387,7 @@ describe('ChatPage', () => {
   })
 
   it('shows the files view as supporting context without project picker controls', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     await waitFor(() =>
       expect(screen.getAllByRole('button', { name: 'Files' }).length).toBeGreaterThan(0)
@@ -398,20 +400,173 @@ describe('ChatPage', () => {
   })
 
   it('shows agent status dot and name for each session', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     const sessionPanel = await screen.findByTestId('chat-session-panel')
 
     await waitFor(() =>
       expect(within(sessionPanel).getAllByText('GitHub Copilot').length).toBeGreaterThan(0)
     )
-    // Status dot for active agent should carry aria-label "online"
     const dots = within(sessionPanel).getAllByLabelText('online')
     expect(dots.length).toBeGreaterThan(0)
   })
 
+  it('renders history sessions with provider-history label instead of live status dot', async () => {
+    const HISTORY_SESSION_ID = 'history-provider-row'
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
+        if (url === '/api/agents') {
+          return Promise.resolve({
+            ok: true,
+            json: () =>
+              Promise.resolve([
+                { id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' },
+              ]),
+          } as Response)
+        }
+
+        if (url === '/api/projects') {
+          return Promise.resolve({
+            ok: true,
+            json: () =>
+              Promise.resolve([
+                {
+                  id: 'acp-frontend',
+                  name: 'ACP Frontend',
+                  path: '/home/vries/projects/acp-frontend',
+                  status: 'available',
+                },
+              ]),
+          } as Response)
+        }
+
+        if (url === '/api/projects/acp-frontend/tree') {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve([]) } as Response)
+        }
+
+        if (url === '/api/sessions') {
+          if (opts?.method === 'POST') {
+            return Promise.resolve({
+              ok: true,
+              status: 201,
+              json: () =>
+                Promise.resolve({
+                  id: SESSION_ID,
+                  title: 'New chat',
+                  updatedAt: '2026-03-18T08:00:00.000Z',
+                  agentId: 'copilot',
+                  source: 'live',
+                  project: {
+                    id: 'acp-frontend',
+                    name: 'ACP Frontend',
+                    path: '/home/vries/projects/acp-frontend',
+                  },
+                  messages: [],
+                }),
+            } as Response)
+          }
+
+          return Promise.resolve({
+            ok: true,
+            json: () =>
+              Promise.resolve([
+                {
+                  id: SESSION_ID,
+                  title: 'Live copilot chat',
+                  updatedAt: '2026-03-18T08:00:00.000Z',
+                  agentId: 'copilot',
+                  source: 'live',
+                  project: {
+                    id: 'acp-frontend',
+                    name: 'ACP Frontend',
+                    path: '/home/vries/projects/acp-frontend',
+                  },
+                },
+                {
+                  id: HISTORY_SESSION_ID,
+                  title: 'Imported copilot thread',
+                  updatedAt: '2026-03-17T09:30:00.000Z',
+                  agentId: 'copilot',
+                  source: 'history',
+                  project: {
+                    id: 'acp-frontend',
+                    name: 'ACP Frontend',
+                    path: '/home/vries/projects/acp-frontend',
+                  },
+                },
+              ]),
+          } as Response)
+        }
+
+        if (
+          url === `/api/sessions/${SESSION_ID}` ||
+          url.startsWith(`/api/sessions/${SESSION_ID}?`)
+        ) {
+          return Promise.resolve({
+            ok: true,
+            json: () =>
+              Promise.resolve({
+                id: SESSION_ID,
+                title: 'Live copilot chat',
+                updatedAt: '2026-03-18T08:00:00.000Z',
+                agentId: 'copilot',
+                source: 'live',
+                project: {
+                  id: 'acp-frontend',
+                  name: 'ACP Frontend',
+                  path: '/home/vries/projects/acp-frontend',
+                },
+                messages: [],
+              }),
+          } as Response)
+        }
+
+        if (
+          url === `/api/sessions/${HISTORY_SESSION_ID}` ||
+          url.startsWith(`/api/sessions/${HISTORY_SESSION_ID}?`)
+        ) {
+          return Promise.resolve({
+            ok: true,
+            json: () =>
+              Promise.resolve({
+                id: HISTORY_SESSION_ID,
+                title: 'Imported copilot thread',
+                updatedAt: '2026-03-17T09:30:00.000Z',
+                agentId: 'copilot',
+                source: 'history',
+                project: {
+                  id: 'acp-frontend',
+                  name: 'ACP Frontend',
+                  path: '/home/vries/projects/acp-frontend',
+                },
+                messages: [],
+              }),
+          } as Response)
+        }
+
+        return Promise.reject(new Error(`Unexpected fetch: ${url}`))
+      })
+    )
+
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
+
+    const sessionPanel = await screen.findByTestId('chat-session-panel')
+    await waitFor(() =>
+      expect(within(sessionPanel).getByText('Imported copilot thread')).toBeDefined()
+    )
+
+    expect(within(sessionPanel).getByText('GitHub Copilot history')).toBeDefined()
+
+    const historyRow = within(sessionPanel)
+      .getByText('Imported copilot thread')
+      .closest('button') as HTMLElement
+    expect(historyRow).toBeDefined()
+    expect(within(historyRow).queryByLabelText('online')).toBeNull()
+  })
+
   it('shows the empty transcript state once session is ready', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     await waitFor(() => expect(screen.getByText('Start the conversation')).toBeDefined())
   })
@@ -420,7 +575,7 @@ describe('ChatPage', () => {
     const fetchSpy = mockFetch()
     vi.stubGlobal('fetch', fetchSpy)
 
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
     await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
     const input = screen.getByPlaceholderText('Type a message…')
     await waitFor(() => expect((input as HTMLInputElement).disabled).toBe(false))
@@ -454,7 +609,7 @@ describe('ChatPage', () => {
   })
 
   it('shows user message immediately on submit', async () => {
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
     await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
     const input = screen.getByPlaceholderText('Type a message…')
     await waitFor(() => expect((input as HTMLInputElement).disabled).toBe(false))
@@ -468,7 +623,7 @@ describe('ChatPage', () => {
   it('shows a session error state when creating a session fails', async () => {
     vi.stubGlobal('fetch', mockFetch({ noSessions: true, sessionFails: true }))
 
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
 
     const sessionPanel = await screen.findByTestId('chat-session-panel')
     fireEvent.click(within(sessionPanel).getByRole('button', { name: 'New chat' }))
@@ -485,7 +640,7 @@ describe('ChatPage', () => {
   it('shows a send error state when posting a message fails', async () => {
     vi.stubGlobal('fetch', mockFetch({ messageFails: true }))
 
-    renderChatPage('/chat?session=test-session-id&project=acp-frontend')
+    renderChatPage('#/chat?session=test-session-id&project=acp-frontend')
     await waitFor(() => expect(screen.getByPlaceholderText('Type a message…')).toBeDefined())
     const input = screen.getByPlaceholderText('Type a message…')
     await waitFor(() => expect((input as HTMLInputElement).disabled).toBe(false))
@@ -502,59 +657,59 @@ describe('ChatPage', () => {
   })
 
   it('loads a previous transcript when a session is selected', async () => {
-    renderChatPage()
+    renderChatPage('#/chat')
     await waitFor(() => expect(screen.getByText('Start the conversation')).toBeDefined())
-    await waitFor(() => expect(window.location.search).toContain(`session=${SESSION_ID}`))
+    await waitFor(() => expect(window.location.hash).toContain(`session=${SESSION_ID}`))
     await waitFor(() => expect(screen.getByText('Review SSE handling')).toBeDefined())
 
     const sessionPanel = await screen.findByTestId('chat-session-panel')
     fireEvent.click(within(sessionPanel).getByRole('button', { name: /Review SSE handling/i }))
 
-    await waitFor(() => expect(window.location.search).toContain(`session=${SECOND_SESSION_ID}`))
+    await waitFor(() => expect(window.location.hash).toContain(`session=${SECOND_SESSION_ID}`))
     await waitFor(() => expect(screen.getByText('Previous answer')).toBeDefined())
   })
 
   it('reloads transcript content when the route session changes externally', async () => {
-    renderChatPage('/chat?session=test-session-id')
+    renderChatPage('#/chat?session=test-session-id')
     await waitFor(() => expect(screen.getByText('Start the conversation')).toBeDefined())
 
-    window.history.pushState({}, '', `/chat?session=${SECOND_SESSION_ID}&project=acp-frontend`)
-    window.dispatchEvent(new PopStateEvent('popstate'))
+    window.location.hash = `#/chat?session=${SECOND_SESSION_ID}&project=acp-frontend`
+    window.dispatchEvent(new HashChangeEvent('hashchange'))
 
     await waitFor(() => expect(screen.getByText('Previous answer')).toBeDefined())
   })
 
   it('appends streamed assistant text on TEXT_MESSAGE_CONTENT events', async () => {
-    renderChatPage()
+    renderChatPage('#/chat')
     await waitFor(() => expect(MockEventSource.instance).not.toBeNull())
 
     const sse = MockEventSource.instance!
     const messageId = 'msg-1'
 
-    sse.emit(EventType.TEXT_MESSAGE_START, { messageId, role: 'assistant' })
-    sse.emit(EventType.TEXT_MESSAGE_CONTENT, { messageId, delta: 'Hello' })
-    sse.emit(EventType.TEXT_MESSAGE_CONTENT, { messageId, delta: ' world' })
+    sse.emit(StreamEvent.TEXT_MESSAGE_START, { messageId, role: 'assistant' })
+    sse.emit(StreamEvent.TEXT_MESSAGE_CONTENT, { messageId, delta: 'Hello' })
+    sse.emit(StreamEvent.TEXT_MESSAGE_CONTENT, { messageId, delta: ' world' })
 
     await waitFor(() => expect(screen.getByText('Hello world')).toBeDefined())
   })
 
   it('shows thinking indicator on RUN_STARTED and hides on RUN_FINISHED', async () => {
-    renderChatPage()
+    renderChatPage('#/chat')
     await waitFor(() => expect(MockEventSource.instance).not.toBeNull())
 
     const sse = MockEventSource.instance!
 
-    sse.emit(EventType.RUN_STARTED, { threadId: SESSION_ID, runId: 'run-1' })
+    sse.emit(StreamEvent.RUN_STARTED, { threadId: SESSION_ID, runId: 'run-1' })
     await waitFor(() => expect(screen.getByText('Thinking…')).toBeDefined())
 
-    sse.emit(EventType.RUN_FINISHED, { threadId: SESSION_ID, runId: 'run-1' })
+    sse.emit(StreamEvent.RUN_FINISHED, { threadId: SESSION_ID, runId: 'run-1' })
     await waitFor(() => expect(screen.queryByText('Thinking…')).toBeNull())
   })
 
   it('renders an empty session state when no sessions exist', async () => {
     vi.stubGlobal('fetch', mockFetch({ noSessions: true }))
 
-    renderChatPage('/chat?project=acp-frontend')
+    renderChatPage('#/chat?project=acp-frontend')
 
     await waitFor(() => expect(screen.getByText('No chats yet.')).toBeDefined())
   })
@@ -596,7 +751,7 @@ describe('ChatPage', () => {
       })
     )
 
-    renderChatPage('/chat')
+    renderChatPage('#/chat')
 
     await waitFor(() =>
       expect(
@@ -665,10 +820,10 @@ describe('ChatPage', () => {
       })
     )
 
-    renderChatPage('/chat?project=acp-frontend')
+    renderChatPage('#/chat?project=acp-frontend')
 
     await waitFor(() => expect(screen.getByText('Open a fresh chat in this project')).toBeDefined())
-    expect(window.location.search).not.toContain('session=disabled-session')
+    expect(window.location.hash).not.toContain('session=disabled-session')
   })
 
   it('clears the route session when the active project is removed', async () => {
@@ -775,130 +930,84 @@ describe('ChatPage', () => {
 
     vi.stubGlobal('fetch', fetchSpy)
 
-    renderChatPage(`/chat?session=${SESSION_ID}&project=acp-frontend`)
+    renderChatPage(`#/chat?session=${SESSION_ID}&project=acp-frontend`)
 
     await waitFor(() => expect(screen.getByLabelText('Open project manager')).toBeDefined())
     fireEvent.click(screen.getByLabelText('Open project manager'))
     await waitFor(() => expect(screen.getByRole('button', { name: 'Remove' })).toBeDefined())
     fireEvent.click(screen.getByRole('button', { name: 'Remove' }))
 
-    await waitFor(() => expect(window.location.search).not.toContain(`session=${SESSION_ID}`))
+    await waitFor(() => expect(window.location.hash).not.toContain(`session=${SESSION_ID}`))
   })
 
-  it('renders sessions grouped by project and updates the list when switching projects', async () => {
-    vi.stubGlobal(
-      'fetch',
-      vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
-        if (url === '/api/agents') {
-          return Promise.resolve({
-            ok: true,
-            json: () =>
-              Promise.resolve([
-                { id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' },
-                { id: 'gemini-cli', name: 'Gemini CLI', status: 'active', command: 'gemini' },
-                { id: 'claude-code', name: 'Claude Code', status: 'unavailable', command: null },
-              ]),
-          } as Response)
-        }
+  it('renders sessions grouped by project and clears active session when switching projects', async () => {
+    const fetchMock = vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
+      if (url === '/api/agents') {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              { id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' },
+              { id: 'gemini-cli', name: 'Gemini CLI', status: 'active', command: 'gemini' },
+              { id: 'claude-code', name: 'Claude Code', status: 'unavailable', command: null },
+            ]),
+        } as Response)
+      }
 
-        if (url === '/api/projects') {
+      if (url === '/api/projects') {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+                status: 'available',
+              },
+              {
+                id: 'docs-site',
+                name: 'Docs Site',
+                path: '/home/vries/projects/docs-site',
+                status: 'available',
+              },
+            ]),
+        } as Response)
+      }
+
+      if (url === '/api/projects/acp-frontend/tree') {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([]),
+        } as Response)
+      }
+
+      if (url === '/api/sessions') {
+        if (opts?.method === 'POST') {
           return Promise.resolve({
             ok: true,
+            status: 201,
             json: () =>
-              Promise.resolve([
-                {
+              Promise.resolve({
+                id: SESSION_ID,
+                title: 'New chat',
+                updatedAt: '2026-03-18T08:00:00.000Z',
+                agentId: 'copilot',
+                project: {
                   id: 'acp-frontend',
                   name: 'ACP Frontend',
                   path: '/home/vries/projects/acp-frontend',
-                  status: 'available',
-                },
-                {
-                  id: 'docs-site',
-                  name: 'Docs Site',
-                  path: '/home/vries/projects/docs-site',
-                  status: 'available',
-                },
-              ]),
-          } as Response)
-        }
-
-        if (url === '/api/projects/acp-frontend/tree') {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve([]),
-          } as Response)
-        }
-
-        if (url === '/api/sessions') {
-          if (opts?.method === 'POST') {
-            return Promise.resolve({
-              ok: true,
-              status: 201,
-              json: () =>
-                Promise.resolve({
-                  id: SESSION_ID,
-                  title: 'New chat',
-                  updatedAt: '2026-03-18T08:00:00.000Z',
-                  agentId: 'copilot',
-                  project: {
-                    id: 'acp-frontend',
-                    name: 'ACP Frontend',
-                    path: '/home/vries/projects/acp-frontend',
-                  },
-                  messages: [],
-                }),
-            } as Response)
-          }
-
-          return Promise.resolve({
-            ok: true,
-            json: () =>
-              Promise.resolve([
-                {
-                  id: SESSION_ID,
-                  title: 'Inspect auth bug',
-                  updatedAt: '2026-03-18T08:00:00.000Z',
-                  agentId: 'copilot',
-                  project: {
-                    id: 'acp-frontend',
-                    name: 'ACP Frontend',
-                    path: '/home/vries/projects/acp-frontend',
-                  },
-                },
-                {
-                  id: 'gemini-session-id',
-                  title: 'Gemini discovery notes',
-                  updatedAt: '2026-03-18T10:00:00.000Z',
-                  agentId: 'gemini-cli',
-                  project: {
-                    id: 'docs-site',
-                    name: 'Docs Site',
-                    path: '/home/vries/projects/docs-site',
-                  },
                 },
-                {
-                  id: 'claude-session-id',
-                  title: 'Claude backlog',
-                  updatedAt: '2026-03-17T06:00:00.000Z',
-                  agentId: 'claude-code',
-                  project: {
-                    id: 'docs-site',
-                    name: 'Docs Site',
-                    path: '/home/vries/projects/docs-site',
-                  },
-                },
-              ]),
+                messages: [],
+              }),
           } as Response)
         }
 
-        if (
-          url === `/api/sessions/${SESSION_ID}` ||
-          url.startsWith(`/api/sessions/${SESSION_ID}?`)
-        ) {
-          return Promise.resolve({
-            ok: true,
-            json: () =>
-              Promise.resolve({
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              {
                 id: SESSION_ID,
                 title: 'Inspect auth bug',
                 updatedAt: '2026-03-18T08:00:00.000Z',
@@ -908,16 +1017,58 @@ describe('ChatPage', () => {
                   name: 'ACP Frontend',
                   path: '/home/vries/projects/acp-frontend',
                 },
-                messages: [],
-              }),
-          } as Response)
-        }
+              },
+              {
+                id: 'gemini-session-id',
+                title: 'Gemini discovery notes',
+                updatedAt: '2026-03-18T10:00:00.000Z',
+                agentId: 'gemini-cli',
+                project: {
+                  id: 'docs-site',
+                  name: 'Docs Site',
+                  path: '/home/vries/projects/docs-site',
+                },
+              },
+              {
+                id: 'claude-session-id',
+                title: 'Claude backlog',
+                updatedAt: '2026-03-17T06:00:00.000Z',
+                agentId: 'claude-code',
+                project: {
+                  id: 'docs-site',
+                  name: 'Docs Site',
+                  path: '/home/vries/projects/docs-site',
+                },
+              },
+            ]),
+        } as Response)
+      }
 
-        return Promise.reject(new Error(`Unexpected fetch: ${url}`))
-      })
-    )
+      if (url === `/api/sessions/${SESSION_ID}` || url.startsWith(`/api/sessions/${SESSION_ID}?`)) {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              id: SESSION_ID,
+              title: 'Inspect auth bug',
+              updatedAt: '2026-03-18T08:00:00.000Z',
+              agentId: 'copilot',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+              messages: [],
+            }),
+        } as Response)
+      }
 
-    renderChatPage('/chat?session=test-session-id')
+      return Promise.reject(new Error(`Unexpected fetch: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    renderChatPage('#/chat?session=test-session-id')
 
     const sessionPanel = await screen.findByTestId('chat-session-panel')
 
@@ -936,10 +1087,19 @@ describe('ChatPage', () => {
     const useButtons = await screen.findAllByRole('button', { name: /^Use$/ })
     fireEvent.click(useButtons[0]!)
 
-    await waitFor(() => expect(within(sessionPanel).getAllByText('Current').length).toBe(1))
+    await waitFor(() => expect(within(sessionPanel).getByText('Current')).toBeDefined())
     await waitFor(() => expect(within(sessionPanel).getByText('Docs Site')).toBeDefined())
     expect(within(sessionPanel).getByText('Gemini discovery notes')).toBeDefined()
     expect(within(sessionPanel).getByText('Claude backlog')).toBeDefined()
+    await waitFor(() => expect(screen.getByText('Open a fresh chat in this project')).toBeDefined())
+    expect(window.location.hash).toContain('project=docs-site')
+    expect(window.location.hash).not.toContain('session=')
+
+    const createdSessionCall = fetchMock.mock.calls.find(
+      (args: unknown[]) =>
+        args[0] === '/api/sessions' && (args[1] as RequestInit | undefined)?.method === 'POST'
+    )
+    expect(createdSessionCall).toBeUndefined()
   })
 
   it('shows the delegation panel instead of the composer when viewing a history session', async () => {
@@ -1030,17 +1190,173 @@ describe('ChatPage', () => {
       })
     )
 
-    renderChatPage(`/chat?session=${HISTORY_SESSION_ID}&project=acp-frontend`)
+    renderChatPage(`#/chat?session=${HISTORY_SESSION_ID}&project=acp-frontend`)
 
-    // Delegation panel should appear instead of the regular composer
     await waitFor(() => expect(screen.getByTestId('history-session-panel')).toBeDefined())
     expect(screen.queryByTestId('chat-composer')).toBeNull()
+    expect(MockEventSource.instances.length).toBe(0)
 
-    // The active agent should be listed as a fork target (copilot does not support session/load)
-    expect(screen.getByTestId('fork-agent-copilot')).toBeDefined()
+    expect(screen.getByTestId('continue-agent-copilot')).toBeDefined()
     expect(screen.getAllByText('GitHub Copilot').length).toBeGreaterThan(0)
   })
 
+  it('does not open SSE for history session on bootstrap, then opens once resumed to live', async () => {
+    const HISTORY_SESSION_ID = 'history-session-bootstrap'
+    const NEW_SESSION_ID = 'new-live-after-history'
+    const fetchMock = vi.fn().mockImplementation((url: string, opts?: RequestInit) => {
+      if (url === '/api/agents') {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              {
+                id: 'copilot',
+                name: 'GitHub Copilot',
+                status: 'active',
+                command: 'copilot',
+                canResume: true,
+              },
+            ]),
+        } as Response)
+      }
+
+      if (url === '/api/projects') {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+                status: 'available',
+              },
+            ]),
+        } as Response)
+      }
+
+      if (url === '/api/projects/acp-frontend/tree') {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve([]) } as Response)
+      }
+
+      if (url === '/api/sessions') {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve([
+              {
+                id: HISTORY_SESSION_ID,
+                title: 'Historical thread',
+                updatedAt: '2026-03-28T10:00:00.000Z',
+                agentId: 'copilot',
+                source: 'history',
+                project: {
+                  id: 'acp-frontend',
+                  name: 'ACP Frontend',
+                  path: '/home/vries/projects/acp-frontend',
+                },
+              },
+              {
+                id: NEW_SESSION_ID,
+                title: 'Live continuation',
+                updatedAt: '2026-03-30T10:00:00.000Z',
+                agentId: 'copilot',
+                source: 'live',
+                project: {
+                  id: 'acp-frontend',
+                  name: 'ACP Frontend',
+                  path: '/home/vries/projects/acp-frontend',
+                },
+              },
+            ]),
+        } as Response)
+      }
+
+      if (
+        url === `/api/sessions/${HISTORY_SESSION_ID}` ||
+        url.startsWith(`/api/sessions/${HISTORY_SESSION_ID}?`)
+      ) {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              id: HISTORY_SESSION_ID,
+              title: 'Historical thread',
+              updatedAt: '2026-03-28T10:00:00.000Z',
+              agentId: 'copilot',
+              source: 'history',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+              messages: [],
+            }),
+        } as Response)
+      }
+
+      if (url === `/api/sessions/${HISTORY_SESSION_ID}/resume` && opts?.method === 'POST') {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: () =>
+            Promise.resolve({
+              id: NEW_SESSION_ID,
+              title: 'Live continuation',
+              updatedAt: '2026-03-30T10:00:00.000Z',
+              agentId: 'copilot',
+              source: 'live',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+              messages: [],
+            }),
+        } as Response)
+      }
+
+      if (
+        url === `/api/sessions/${NEW_SESSION_ID}` ||
+        url.startsWith(`/api/sessions/${NEW_SESSION_ID}?`)
+      ) {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              id: NEW_SESSION_ID,
+              title: 'Live continuation',
+              updatedAt: '2026-03-30T10:00:00.000Z',
+              agentId: 'copilot',
+              source: 'live',
+              project: {
+                id: 'acp-frontend',
+                name: 'ACP Frontend',
+                path: '/home/vries/projects/acp-frontend',
+              },
+              messages: [],
+            }),
+        } as Response)
+      }
+
+      return Promise.reject(new Error(`Unexpected fetch: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    renderChatPage(`#/chat?session=${HISTORY_SESSION_ID}&project=acp-frontend`)
+
+    await waitFor(() => expect(screen.getByTestId('history-session-panel')).toBeDefined())
+    expect(MockEventSource.instances.length).toBe(0)
+
+    fireEvent.click(screen.getByTestId('continue-agent-copilot'))
+
+    await waitFor(() => expect(screen.getByTestId('chat-composer')).toBeDefined())
+    await waitFor(() => expect(MockEventSource.instances.length).toBeGreaterThan(0))
+    const last = MockEventSource.instances.at(-1)
+    expect(last?.url).toContain(`/api/stream?sessionId=${encodeURIComponent(NEW_SESSION_ID)}`)
+  })
+
   it('calls the resume endpoint and navigates to the new session when Continue is clicked', async () => {
     const HISTORY_SESSION_ID = 'history-session-abc'
     const NEW_SESSION_ID = 'new-live-session-xyz'
@@ -1184,20 +1500,16 @@ describe('ChatPage', () => {
     })
     vi.stubGlobal('fetch', fetchMock)
 
-    renderChatPage(`/chat?session=${HISTORY_SESSION_ID}&project=acp-frontend`)
+    renderChatPage(`#/chat?session=${HISTORY_SESSION_ID}&project=acp-frontend`)
 
-    // Wait for the delegation panel to appear
     await waitFor(() => expect(screen.getByTestId('history-session-panel')).toBeDefined())
 
-    // Click the Fork button for GitHub Copilot (copilot does not support session/load)
-    const continueButton = screen.getByTestId('fork-agent-copilot')
+    const continueButton = screen.getByTestId('continue-agent-copilot')
     fireEvent.click(continueButton)
 
-    // After resume, the regular composer should appear (live session)
     await waitFor(() => expect(screen.getByTestId('chat-composer')).toBeDefined())
     expect(screen.queryByTestId('history-session-panel')).toBeNull()
 
-    // Verify the resume endpoint was called with the right payload
     const resumeCall = fetchMock.mock.calls.find(
       (args: unknown[]) =>
         args[0] === `/api/sessions/${HISTORY_SESSION_ID}/resume` &&
diff --git a/frontend/src/routes/chat.tsx b/frontend/src/routes/chat.tsx
deleted file mode 100644
index a41e2a7..0000000
--- a/frontend/src/routes/chat.tsx
+++ /dev/null
@@ -1,619 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react'
-import { Link, useNavigate, useSearch } from '@tanstack/react-router'
-import { ChatComposer } from '../components/chat/ChatComposer.js'
-import { ChatDiffView } from '../components/chat/ChatDiffView.js'
-import { ChatHeader } from '../components/chat/ChatHeader.js'
-import { ProjectContextSwitcher } from '../components/chat/ProjectContextSwitcher.js'
-import { SessionList } from '../components/chat/SessionList.js'
-import { ChatTranscript } from '../components/chat/ChatTranscript.js'
-import { useAgUiChat } from '../hooks/useAgUiChat.js'
-import {
-  ProjectWorkspacePanel,
-  type ProjectTreeEntry,
-} from '../components/chat/ProjectWorkspacePanel.js'
-
-type WorkspaceView = 'chat' | 'files' | 'diff'
-
-interface ProjectDiffResponse {
-  status: 'ok' | 'git_not_found' | 'error'
-  diff: string
-  message?: string
-}
-
-export function ChatPage() {
-  const navigate = useNavigate({ from: '/chat' })
-  const search = useSearch({ from: '/chat' })
-  const sessionId = search.session ?? null
-  const projectId = search.project ?? null
-
-  const onProjectSelected = useCallback(
-    (nextProjectId: string | null) => {
-      void navigate({
-        to: '/chat',
-        search: (current) => ({ ...current, project: nextProjectId ?? undefined }),
-      })
-    },
-    [navigate]
-  )
-
-  const onSessionCreated = useCallback(
-    (nextSessionId: string) => {
-      void navigate({
-        to: '/chat',
-        search: (current) => ({ ...current, session: nextSessionId }),
-      })
-    },
-    [navigate]
-  )
-
-  const onSessionSelected = useCallback(
-    (nextSessionId: string) => {
-      void navigate({
-        to: '/chat',
-        search: (current) => ({ ...current, session: nextSessionId }),
-      })
-    },
-    [navigate]
-  )
-
-  const onSessionCleared = useCallback(() => {
-    void navigate({
-      to: '/chat',
-      search: (current) => ({ ...current, session: undefined }),
-    })
-  }, [navigate])
-
-  const {
-    addProject,
-    agents,
-    activeAgents,
-    availableProjects,
-    creatingSession,
-    currentSession,
-    errorMessage,
-    historyLoading,
-    loading,
-    loadHistorySession,
-    messages,
-    modelState,
-    projects,
-    ready,
-    removeProject,
-    resumeSession,
-    selectedProject,
-    selectProject,
-    selectSession,
-    sendMessage,
-    sessionId: activeSessionId,
-    sessions,
-    setSessionModel,
-    startNewSession,
-    streamReconnecting,
-    suggestProjectPaths,
-    thinking,
-  } = useAgUiChat({
-    sessionId,
-    projectId,
-    onProjectSelected,
-    onSessionCreated,
-    onSessionSelected,
-    onSessionCleared,
-  })
-
-  const [input, setInput] = useState('')
-  const [workspaceView, setWorkspaceView] = useState<WorkspaceView>('chat')
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const [projectManagerOpen, setProjectManagerOpen] = useState(false)
-  const [resuming, setResuming] = useState(false)
-  const [tree, setTree] = useState<ProjectTreeEntry[]>([])
-  const [treePath, setTreePath] = useState<string | null>(null)
-  const [treeLoading, setTreeLoading] = useState(false)
-  const [treeError, setTreeError] = useState<string | null>(null)
-  const [expandedPaths, setExpandedPaths] = useState<string[]>([])
-  const [selectedEntryPath, setSelectedEntryPath] = useState<string | null>(null)
-  const [visibleProjectIds, setVisibleProjectIds] = useState<string[]>([])
-  const [diffState, setDiffState] = useState<
-    'loading' | 'error' | 'git_not_found' | 'empty' | 'ready'
-  >('empty')
-  const [diffValue, setDiffValue] = useState('')
-  const [diffMessage, setDiffMessage] = useState<string | null>(null)
-
-  const activeSession = useMemo(
-    () => sessions.find((session) => session.id === activeSessionId) ?? null,
-    [activeSessionId, sessions]
-  )
-  const isHistorySession = currentSession?.source === 'history'
-  // For history sessions: all active agents (any can receive a handoff).
-  // For live sessions: all active agents except the current one (switch-agent).
-  const resumableAgents = useMemo(
-    () =>
-      agents.filter(
-        (agent) => agent.canResume && (isHistorySession || agent.id !== currentSession?.agentId)
-      ),
-    [agents, currentSession?.agentId, isHistorySession]
-  )
-
-  // Primary resume agent: same agent as the history session AND supports session/load.
-  const resumeAgent = useMemo(() => {
-    if (!isHistorySession) return undefined
-    return resumableAgents.find((agent) => agent.id === currentSession?.agentId && agent.canLoad)
-  }, [isHistorySession, resumableAgents, currentSession?.agentId])
-
-  // Fork agents: all resumable agents except the primary resume agent.
-  const forkAgents = useMemo(() => {
-    if (!isHistorySession) return []
-    return resumableAgents.filter((agent) => agent.id !== resumeAgent?.id)
-  }, [isHistorySession, resumableAgents, resumeAgent])
-  const activeAgentName = useMemo(() => {
-    const agent = agents.find((candidate) => candidate.id === activeSession?.agentId)
-    return agent?.name ?? 'the agent'
-  }, [activeSession, agents])
-  const filteredSessions = useMemo(() => {
-    const visibleProjectSet = new Set(visibleProjectIds)
-    return sessions.filter(
-      (session) =>
-        !session.project ||
-        visibleProjectSet.size === 0 ||
-        visibleProjectSet.has(session.project.id)
-    )
-  }, [sessions, visibleProjectIds])
-
-  const getParentTreePath = useCallback((path: string): string | null => {
-    const lastSlash = path.lastIndexOf('/')
-    return lastSlash >= 0 ? path.slice(0, lastSlash) : null
-  }, [])
-
-  const loadTree = useCallback(
-    async (nextPath: string | null = null) => {
-      if (!selectedProject) {
-        setTree([])
-        setTreePath(null)
-        return
-      }
-
-      setTreeLoading(true)
-      setTreeError(null)
-
-      try {
-        const query = nextPath ? `?path=${encodeURIComponent(nextPath)}` : ''
-        const response = await fetch(
-          `/api/projects/${encodeURIComponent(selectedProject.id)}/tree${query}`
-        )
-        if (!response.ok) {
-          throw new Error(`Explorer request failed with status ${response.status}`)
-        }
-
-        const nextTree = (await response.json()) as ProjectTreeEntry[]
-        setTree(nextTree)
-        setTreePath(nextPath)
-      } catch (error) {
-        console.error('[ChatPage] project tree load failed:', error)
-        setTree([])
-        setTreeError('Unable to load the folder explorer right now. Try another project or reload.')
-      } finally {
-        setTreeLoading(false)
-      }
-    },
-    [selectedProject]
-  )
-
-  const loadDiff = useCallback(async () => {
-    if (!selectedProject) {
-      setDiffState('empty')
-      setDiffValue('')
-      setDiffMessage('Choose a project to inspect the working tree.')
-      return
-    }
-
-    setDiffState('loading')
-    setDiffValue('')
-    setDiffMessage(null)
-
-    try {
-      const response = await fetch(`/api/projects/${encodeURIComponent(selectedProject.id)}/diff`)
-      if (!response.ok) {
-        throw new Error(`Diff request failed with status ${response.status}`)
-      }
-
-      const payload = (await response.json()) as ProjectDiffResponse
-      setDiffValue(payload.diff)
-      setDiffMessage(payload.message ?? null)
-
-      if (payload.status === 'git_not_found') {
-        setDiffState('git_not_found')
-        return
-      }
-
-      if (payload.status === 'error') {
-        setDiffState('error')
-        return
-      }
-
-      setDiffState(payload.diff.trim().length > 0 ? 'ready' : 'empty')
-    } catch (error) {
-      console.error('[ChatPage] project diff load failed:', error)
-      setDiffState('error')
-      setDiffValue('')
-      setDiffMessage('Unable to load the current project diff right now.')
-    }
-  }, [selectedProject])
-
-  useEffect(() => {
-    setExpandedPaths([])
-    setSelectedEntryPath(null)
-    void loadTree(null)
-  }, [loadTree, selectedProject?.id])
-
-  useEffect(() => {
-    const nextVisible = availableProjects.map((project) => project.id)
-    setVisibleProjectIds((current) => {
-      if (current.length === 0) {
-        return nextVisible
-      }
-
-      const filtered = current.filter((projectId) => nextVisible.includes(projectId))
-      const added = nextVisible.filter((projectId) => !current.includes(projectId))
-      const merged = [...filtered, ...added]
-      return merged.length > 0 ? merged : nextVisible
-    })
-  }, [availableProjects])
-
-  useEffect(() => {
-    if (workspaceView === 'diff') {
-      void loadDiff()
-    }
-  }, [loadDiff, workspaceView])
-
-  const handleResume = async (agentId: string) => {
-    setResuming(true)
-    try {
-      // When the user picks the same agent that originally created this history
-      // session and that agent supports ACP session/load, use it to resume the
-      // real session instead of creating a new one with a handoff transcript.
-      const isSameAgent = agentId === currentSession?.agentId
-      const sessionAgent = agents.find((a) => a.id === agentId)
-      const supportsLoad = isSameAgent && (sessionAgent?.canLoad ?? false)
-
-      if (isHistorySession && supportsLoad) {
-        await loadHistorySession(agentId)
-      } else {
-        await resumeSession(agentId)
-      }
-    } finally {
-      setResuming(false)
-    }
-  }
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const text = input.trim()
-    if (!text || !ready) return
-
-    // Clear the input immediately so it doesn't stay populated for the
-    // entire duration of the agent's response.
-    setInput('')
-    setWorkspaceView('chat')
-    try {
-      await sendMessage(text)
-    } catch {
-      // Error state is already surfaced by the hook.
-    }
-  }
-
-  const handleProjectSelect = async (nextProjectId: string) => {
-    setProjectManagerOpen(false)
-    await selectProject(nextProjectId)
-  }
-
-  const toggleProjectVisibility = (projectIdToToggle: string, visible: boolean) => {
-    setVisibleProjectIds((current) => {
-      if (visible) {
-        return current.includes(projectIdToToggle) ? current : [...current, projectIdToToggle]
-      }
-
-      const next = current.filter((projectIdValue) => projectIdValue !== projectIdToToggle)
-      return next.length > 0 ? next : current
-    })
-  }
-
-  const handleSessionSelect = async (nextSessionId: string) => {
-    setDrawerOpen(false)
-    setWorkspaceView('chat')
-    await selectSession(nextSessionId)
-  }
-
-  const openProjectManager = () => {
-    setDrawerOpen(false)
-    setProjectManagerOpen(true)
-  }
-
-  const activeViewLabel =
-    workspaceView === 'diff' ? 'Diff' : workspaceView === 'files' ? 'Files' : 'Chat'
-
-  return (
-    <main className="h-[100dvh] overflow-hidden bg-[#05070b] text-slate-100">
-      <div className="flex h-full min-h-0 w-full flex-col">
-        <ChatHeader
-          activeAgentName={activeAgentName}
-          errorMessage={errorMessage}
-          project={selectedProject}
-          sessionId={activeSessionId}
-          ready={ready}
-          thinking={thinking}
-          title={activeSession?.title ?? null}
-          isHistorySession={isHistorySession}
-        />
-
-        <div className="flex items-center justify-between border-b border-white/8 bg-slate-950/78 px-4 py-3 lg:hidden">
-          <button
-            type="button"
-            aria-label="Open navigation"
-            onClick={() => setDrawerOpen(true)}
-            className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
-          >
-            ≡
-          </button>
-
-          <div className="min-w-0 text-center">
-            <p className="truncate text-sm font-medium text-slate-100">
-              {selectedProject?.name ?? 'Workspace'}
-            </p>
-            <p className="truncate text-xs text-slate-400">{activeViewLabel}</p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => setWorkspaceView('files')}
-              className={buildSurfaceTabClassName(workspaceView === 'files')}
-            >
-              Files
-            </button>
-            <button
-              type="button"
-              onClick={() => setWorkspaceView('diff')}
-              className={buildSurfaceTabClassName(workspaceView === 'diff')}
-            >
-              Diff
-            </button>
-          </div>
-        </div>
-
-        <div className="grid min-h-0 flex-1 overflow-hidden lg:grid-cols-[20rem_minmax(0,1fr)] lg:grid-rows-[1fr]">
-          <aside className="hidden min-h-0 overflow-hidden lg:flex">
-            <div className="flex min-h-0 w-full flex-col">
-              <SessionList
-                agents={agents}
-                sessions={filteredSessions}
-                selectedProjectId={selectedProject?.id ?? null}
-                activeSessionId={activeSessionId}
-                creatingSession={creatingSession}
-                loading={loading}
-                onCreate={startNewSession}
-                onSelect={handleSessionSelect}
-              />
-
-              <div className="border-r border-t border-white/8 bg-slate-950/84 p-4 text-slate-100">
-                <ProjectContextSwitcher
-                  projects={projects}
-                  selectedProjectId={selectedProject?.id ?? null}
-                  visibleProjectIds={visibleProjectIds}
-                  open={projectManagerOpen}
-                  onOpenChange={setProjectManagerOpen}
-                  onProjectSelect={handleProjectSelect}
-                  onProjectVisibilityChange={toggleProjectVisibility}
-                  onAddProject={addProject}
-                  onRemoveProject={removeProject}
-                  onSuggestProjectPaths={suggestProjectPaths}
-                />
-
-                <Link
-                  to="/settings"
-                  className="mt-4 inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-200 transition hover:border-white/15 hover:bg-slate-900"
-                >
-                  Settings
-                </Link>
-              </div>
-            </div>
-          </aside>
-
-          <section className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-[#070b12] lg:border-x lg:border-white/8">
-            <div className="hidden items-center justify-between border-b border-white/8 bg-slate-950/72 px-6 py-3 lg:flex">
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-                  Workspace view
-                </p>
-                <p className="mt-1 text-sm text-slate-300">
-                  Keep the conversation central while switching files and diff in place.
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => setWorkspaceView('chat')}
-                  className={buildSurfaceTabClassName(workspaceView === 'chat')}
-                >
-                  Chat
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setWorkspaceView('files')}
-                  className={buildSurfaceTabClassName(workspaceView === 'files')}
-                >
-                  Files
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setWorkspaceView('diff')}
-                  className={buildSurfaceTabClassName(workspaceView === 'diff')}
-                >
-                  Diff
-                </button>
-              </div>
-            </div>
-
-            {workspaceView === 'chat' ? (
-              <ChatTranscript
-                activeAgentName={activeAgentName}
-                canManageProjects
-                canStartSession={activeAgents.length > 0 && availableProjects.length > 0}
-                hasAnyProject={projects.length > 0}
-                hasAvailableAgent={activeAgents.length > 0}
-                hasAvailableProject={availableProjects.length > 0}
-                messages={messages}
-                projectPath={selectedProject?.path ?? null}
-                sessionId={activeSessionId}
-                hasSession={activeSessionId !== null}
-                loading={loading}
-                onOpenProjectManager={openProjectManager}
-                onStartSession={() => {
-                  const firstAgent = activeAgents[0]
-                  if (firstAgent) {
-                    void startNewSession(firstAgent.id)
-                  }
-                }}
-                ready={ready}
-                streamReconnecting={streamReconnecting}
-                thinking={thinking}
-                errorMessage={errorMessage}
-                historyLoading={historyLoading}
-              />
-            ) : workspaceView === 'diff' ? (
-              <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6 sm:py-6 lg:px-8">
-                <div className="mx-auto max-w-5xl">
-                  <ChatDiffView state={diffState} diff={diffValue} message={diffMessage} />
-                </div>
-              </div>
-            ) : (
-              <ProjectWorkspacePanel
-                projects={projects}
-                selectedProjectId={selectedProject?.id ?? null}
-                onProjectSelect={handleProjectSelect}
-                activeAgentCount={activeAgents.length}
-                showProjectPicker={false}
-                tree={tree}
-                treePath={treePath}
-                treeLoading={treeLoading}
-                treeError={treeError}
-                expandedPaths={expandedPaths}
-                onToggleFolder={async (path) => {
-                  const collapsing = expandedPaths.includes(path)
-
-                  setExpandedPaths((current) =>
-                    collapsing ? current.filter((item) => item !== path) : [path]
-                  )
-
-                  await loadTree(collapsing ? getParentTreePath(path) : path)
-                }}
-                selectedEntryPath={selectedEntryPath}
-                onSelectEntry={setSelectedEntryPath}
-              />
-            )}
-
-            <ChatComposer
-              value={input}
-              onChange={setInput}
-              onSubmit={handleSubmit}
-              disabled={!ready}
-              canSubmit={ready && input.trim().length > 0}
-              isHistorySession={isHistorySession}
-              historyLoading={historyLoading}
-              resumeAgent={resumeAgent}
-              forkAgents={forkAgents}
-              onResume={handleResume}
-              onFork={handleResume}
-              resumableAgents={resumableAgents}
-              resuming={resuming}
-              modelState={modelState}
-              onModelChange={setSessionModel}
-              helperText={
-                ready
-                  ? 'The composer stays available while you inspect files or diff so the conversation never loses context.'
-                  : undefined
-              }
-            />
-          </section>
-        </div>
-      </div>
-
-      {drawerOpen ? (
-        <>
-          <button
-            type="button"
-            aria-label="Close navigation"
-            onClick={() => setDrawerOpen(false)}
-            className="fixed inset-0 z-40 bg-slate-950/70 backdrop-blur-sm lg:hidden"
-          />
-          <aside
-            data-testid="chat-session-drawer"
-            className="fixed inset-y-0 left-0 z-50 flex w-[min(26rem,92vw)] flex-col border-r border-white/10 bg-[#050912] shadow-[0_18px_80px_rgba(2,6,23,0.6)] lg:hidden"
-          >
-            <div className="flex items-center justify-between border-b border-white/8 px-4 py-4">
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-                  New Session
-                </p>
-                <p className="mt-1 text-sm text-slate-300">Navigation and project controls</p>
-              </div>
-              <button
-                type="button"
-                aria-label="Close navigation"
-                onClick={() => setDrawerOpen(false)}
-                className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-slate-900/80 text-lg text-slate-100"
-              >
-                ×
-              </button>
-            </div>
-
-            <div className="min-h-0 flex-1 overflow-y-auto">
-              <SessionList
-                agents={agents}
-                sessions={filteredSessions}
-                selectedProjectId={selectedProject?.id ?? null}
-                activeSessionId={activeSessionId}
-                creatingSession={creatingSession}
-                loading={loading}
-                onCreate={async (agentId) => {
-                  setDrawerOpen(false)
-                  await startNewSession(agentId)
-                }}
-                onSelect={handleSessionSelect}
-              />
-            </div>
-
-            <div className="border-t border-white/8 p-4">
-              <button
-                type="button"
-                aria-label="Open project manager"
-                onClick={openProjectManager}
-                className="inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/75 text-sm font-medium text-slate-100 transition hover:border-white/15 hover:bg-slate-900"
-              >
-                Open project manager
-              </button>
-
-              <Link
-                to="/settings"
-                onClick={() => setDrawerOpen(false)}
-                className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-xl border border-white/10 bg-slate-900/55 text-sm font-medium text-slate-300 transition hover:border-white/15 hover:bg-slate-900"
-              >
-                Settings
-              </Link>
-            </div>
-          </aside>
-        </>
-      ) : null}
-
-      <div className="pointer-events-none fixed inset-x-0 top-0 -z-10 h-40 bg-[radial-gradient(circle_at_top,rgba(45,212,191,0.1),transparent_42%)]" />
-    </main>
-  )
-}
-
-function buildSurfaceTabClassName(active: boolean): string {
-  return [
-    'inline-flex h-10 items-center justify-center rounded-xl border px-3.5 text-sm font-medium transition',
-    active
-      ? 'border-teal-500/30 bg-teal-500/12 text-teal-100'
-      : 'border-white/10 bg-slate-900/55 text-slate-300 hover:border-white/15 hover:bg-slate-900/85 hover:text-slate-100',
-  ].join(' ')
-}
diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
deleted file mode 100644
index e8e3c1d..0000000
--- a/frontend/src/routes/settings.tsx
+++ /dev/null
@@ -1,463 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
-import {
-  useBackendSettings,
-  useHistorySources,
-  type BackendSummary,
-  type HistoryProvider,
-  type HistorySourceConfig,
-  type HistorySourceDescriptor,
-} from '../hooks/useBackendSettings.js'
-
-export function SettingsPage() {
-  const {
-    backends,
-    errorMessage: backendError,
-    loading: backendLoading,
-    saveBackend,
-    savingId,
-    addBackend,
-  } = useBackendSettings()
-
-  const {
-    sources,
-    loading: sourcesLoading,
-    saveSource,
-    savingProvider,
-    errorMessage: sourcesError,
-  } = useHistorySources()
-
-  const [newName, setNewName] = useState('')
-  const [newCommand, setNewCommand] = useState('')
-  const [newArgs, setNewArgs] = useState('')
-
-  const errorMessage = backendError ?? sourcesError
-
-  const handleAddBackend = async () => {
-    if (!newName.trim() || !newCommand.trim()) {
-      return
-    }
-
-    await addBackend({
-      name: newName,
-      command: newCommand,
-      args: parseArgs(newArgs),
-    })
-
-    setNewName('')
-    setNewCommand('')
-    setNewArgs('')
-  }
-
-  return (
-    <main className="min-h-screen bg-[#05070b] px-3 py-6 text-slate-100 sm:px-6 lg:px-8">
-      <div className="mx-auto max-w-6xl">
-        <div className="rounded-2xl border border-white/10 bg-slate-950/80 p-4 shadow-[0_24px_80px_rgba(2,6,23,0.45)] sm:p-6">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <div>
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-                Settings
-              </p>
-              <h1 className="mt-3 font-[family:var(--font-display)] text-4xl text-slate-50">
-                Settings
-              </h1>
-            </div>
-
-            <div className="flex gap-2">
-              <Link
-                to="/chat"
-                search={{ session: undefined, project: undefined }}
-                className="inline-flex h-10 items-center justify-center rounded-lg border border-white/10 bg-slate-900/90 px-3 text-sm font-medium text-slate-100 transition hover:bg-slate-800"
-              >
-                Back To Chat
-              </Link>
-            </div>
-          </div>
-
-          <p className="mt-4 max-w-3xl text-sm leading-6 text-slate-400">
-            Manage ACP backends and MCP servers from one place. Backend capability claims now come
-            from the last established ACP connection, while history support tracks richer transcript
-            fidelity like reasoning, patches, attachments, and compaction notices.
-          </p>
-
-          {errorMessage ? (
-            <div className="mt-5 rounded-xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
-              {errorMessage}
-            </div>
-          ) : null}
-
-          <section className="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-              ACP Backends
-            </p>
-            <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
-              If no live handshake has happened yet, the app shows capability support as unknown
-              instead of guessing.
-            </p>
-
-            {backendLoading ? (
-              <div className="mt-8 rounded-xl border border-dashed border-white/10 bg-slate-900/70 p-6 text-sm text-slate-400">
-                Loading backend settings...
-              </div>
-            ) : (
-              <div className="mt-8 grid gap-5 xl:grid-cols-2">
-                {backends.map((backend) => (
-                  <BackendCard
-                    key={backend.id}
-                    backend={backend}
-                    busy={savingId === backend.id}
-                    onSave={saveBackend}
-                  />
-                ))}
-              </div>
-            )}
-
-            <details className="mt-6 group">
-              <summary className="flex cursor-pointer list-none items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 hover:text-slate-300">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                  className="size-3 transition-transform group-open:rotate-90"
-                  aria-hidden="true"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L9.19 8 6.22 5.03a.75.75 0 0 1 0-1.06Z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                Add Backend
-              </summary>
-              <div className="mt-4 rounded-2xl border border-white/10 bg-slate-950/40 p-4 sm:p-5">
-                <div className="grid gap-3 sm:grid-cols-[1.2fr_1fr_1fr_auto]">
-                  <input
-                    value={newName}
-                    onChange={(event) => setNewName(event.target.value)}
-                    placeholder="My ACP Wrapper"
-                    className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-                  />
-                  <input
-                    value={newCommand}
-                    onChange={(event) => setNewCommand(event.target.value)}
-                    placeholder="my-acp-wrapper"
-                    className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-                  />
-                  <input
-                    value={newArgs}
-                    onChange={(event) => setNewArgs(event.target.value)}
-                    placeholder="--acp"
-                    className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => void handleAddBackend()}
-                    disabled={!newName.trim() || !newCommand.trim()}
-                    className="rounded-lg border border-white/10 bg-slate-950 px-4 py-2 text-sm font-semibold text-slate-50 transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:text-slate-500"
-                  >
-                    Add
-                  </button>
-                </div>
-              </div>
-            </details>
-          </section>
-
-          <section className="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-              History Sources
-            </p>
-            <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
-              Configure where each AI provider stores its conversation history. These paths are used
-              to discover sessions for import. History path hints are stored separately from backend
-              connection settings.
-            </p>
-
-            {sourcesLoading ? (
-              <div className="mt-8 rounded-xl border border-dashed border-white/10 bg-slate-900/70 p-6 text-sm text-slate-400">
-                Loading history sources...
-              </div>
-            ) : (
-              <div className="mt-8 grid gap-5 xl:grid-cols-2">
-                {sources.map((source) => (
-                  <HistorySourceCard
-                    key={source.provider}
-                    source={source}
-                    busy={savingProvider === source.provider}
-                    onSave={saveSource}
-                  />
-                ))}
-              </div>
-            )}
-          </section>
-
-          <section className="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-4 sm:p-5">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-              MCP Servers
-            </p>
-            <h2 className="mt-3 text-2xl font-semibold text-slate-50">MCP Configuration</h2>
-            <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-400">
-              MCP server configuration will live in this section so backend and MCP settings share a
-              single entry point.
-            </p>
-          </section>
-        </div>
-      </div>
-    </main>
-  )
-}
-
-export const BackendSettingsPage = SettingsPage
-
-interface BackendCardProps {
-  backend: BackendSummary
-  busy: boolean
-  onSave: (
-    backendId: string,
-    patch: {
-      enabled?: boolean
-      command?: string | null
-      args?: string[]
-      name?: string
-    }
-  ) => Promise<void>
-}
-
-function BackendCard({ backend, busy, onSave }: BackendCardProps) {
-  const [enabled, setEnabled] = useState(backend.enabled)
-  const [name, setName] = useState(backend.name)
-  const [command, setCommand] = useState(backend.command ?? '')
-  const [args, setArgs] = useState(backend.args.join(' '))
-
-  const detectedLabel = backend.detectedCommand
-    ? `Detected: ${backend.detectedCommand}`
-    : 'Not detected'
-
-  const handleSave = async () => {
-    await onSave(backend.id, {
-      name,
-      enabled,
-      command: command.trim() || null,
-      args: parseArgs(args),
-    })
-  }
-
-  return (
-    <section className="rounded-2xl border border-white/10 bg-slate-900/70 p-4 sm:p-5">
-      <div className="flex items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <input
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-            className="w-full rounded-lg border border-transparent bg-transparent px-0 py-0 text-xl font-semibold text-slate-50 outline-none focus:border-white/10 focus:bg-slate-950/60 focus:px-3 focus:py-2"
-          />
-          <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">
-            {backend.status}
-          </p>
-        </div>
-
-        <label className="inline-flex items-center gap-2 text-sm text-slate-300">
-          <input
-            type="checkbox"
-            checked={enabled}
-            onChange={(event) => setEnabled(event.target.checked)}
-            className="h-4 w-4 rounded border-white/20 bg-slate-950 text-teal-500"
-          />
-          Enabled
-        </label>
-      </div>
-
-      <div className="mt-5 grid gap-4">
-        <label className="block">
-          <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
-            ACP Command
-          </span>
-          <input
-            value={command}
-            onChange={(event) => setCommand(event.target.value)}
-            placeholder={backend.detectedCommand ?? 'custom-acp-wrapper'}
-            className="mt-2 w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-          />
-          <p className="mt-2 text-xs text-slate-500">{detectedLabel}</p>
-        </label>
-
-        <label className="block">
-          <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
-            Args
-          </span>
-          <input
-            value={args}
-            onChange={(event) => setArgs(event.target.value)}
-            placeholder={backend.defaultArgs.join(' ')}
-            className="mt-2 w-full rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-          />
-        </label>
-      </div>
-
-      <div className="mt-3">
-        <HistorySourcesGrouped sources={backend.historySupport.discoveredSources} />
-      </div>
-
-      <div className="mt-5 flex items-center justify-between gap-3 border-t border-white/10 pt-4">
-        <p className="text-xs text-slate-500">
-          {backend.endpointSupport.source === 'connection'
-            ? 'Capabilities come from the last successful ACP initialize response.'
-            : 'Capabilities are unknown until this backend completes a live ACP handshake.'}
-        </p>
-        <button
-          type="button"
-          onClick={() => void handleSave()}
-          disabled={busy}
-          className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm font-semibold text-slate-50 transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:text-slate-500"
-        >
-          {busy ? 'Saving...' : 'Save'}
-        </button>
-      </div>
-    </section>
-  )
-}
-
-interface HistorySourceCardProps {
-  source: HistorySourceConfig
-  busy: boolean
-  onSave: (
-    provider: HistoryProvider,
-    patch: { paths?: string[]; cliPaths?: string[] }
-  ) => Promise<void>
-}
-
-function HistorySourceCard({ source, busy, onSave }: HistorySourceCardProps) {
-  const [paths, setPaths] = useState(source.paths.join('\n'))
-  const [cliPaths, setCliPaths] = useState((source.cliPaths ?? []).join('\n'))
-
-  const isCopilot = source.provider === 'copilot'
-
-  const handleSave = async () => {
-    await onSave(source.provider, {
-      paths: parseLines(paths),
-      ...(isCopilot ? { cliPaths: parseLines(cliPaths) } : {}),
-    })
-  }
-
-  const providerLabel: Record<HistoryProvider, string> = {
-    copilot: 'GitHub Copilot',
-    gemini: 'Gemini CLI',
-    opencode: 'OpenCode',
-  }
-
-  return (
-    <section className="rounded-2xl border border-white/10 bg-slate-900/70 p-4 sm:p-5">
-      <p className="text-xl font-semibold text-slate-50">{providerLabel[source.provider]}</p>
-      <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{source.provider}</p>
-
-      <div className="mt-5 grid gap-4">
-        <label className="block">
-          <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
-            {isCopilot ? 'VS Code Workspace Storage Roots' : 'History Path Hints'}
-          </span>
-          <textarea
-            value={paths}
-            onChange={(event) => setPaths(event.target.value)}
-            placeholder="One path per line"
-            rows={3}
-            className="mt-2 w-full resize-y overflow-auto rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-          />
-          <p className="mt-2 text-xs text-slate-500">
-            {isCopilot
-              ? 'Paths to VS Code workspaceStorage directories containing Copilot Chat history. Example: /home/user/.vscode-server/data/User/workspaceStorage'
-              : 'Optional extra search roots for non-standard install locations.'}
-          </p>
-        </label>
-
-        {isCopilot ? (
-          <label className="block">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
-              CLI Session Directories
-            </span>
-            <textarea
-              value={cliPaths}
-              onChange={(event) => setCliPaths(event.target.value)}
-              placeholder="One path per line"
-              rows={3}
-              className="mt-2 w-full resize-y overflow-auto rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-teal-500"
-            />
-            <p className="mt-2 text-xs text-slate-500">
-              Paths to Copilot CLI session-state directories. WSL paths start with{' '}
-              <code className="rounded bg-slate-800 px-1">/</code> (e.g.{' '}
-              <code className="rounded bg-slate-800 px-1">~/.copilot/session-state</code>).
-              Windows-mounted host paths start with{' '}
-              <code className="rounded bg-slate-800 px-1">/mnt/</code>. Leave empty to use the
-              default locations.
-            </p>
-          </label>
-        ) : null}
-      </div>
-
-      <div className="mt-5 flex justify-end border-t border-white/10 pt-4">
-        <button
-          type="button"
-          onClick={() => void handleSave()}
-          disabled={busy}
-          className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm font-semibold text-slate-50 transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:text-slate-500"
-        >
-          {busy ? 'Saving...' : 'Save'}
-        </button>
-      </div>
-    </section>
-  )
-}
-
-function HistorySourcesGrouped({ sources }: { sources: HistorySourceDescriptor[] }) {
-  if (sources.length === 0) {
-    return <p className="text-[11px] text-slate-500">No history sources discovered.</p>
-  }
-
-  const byKind = new Map<string, { readable: number; sessions: number }>()
-  for (const source of sources) {
-    const entry = byKind.get(source.kind) ?? { readable: 0, sessions: 0 }
-    if (source.access === 'readable') entry.readable += 1
-    if (source.sessionCount !== undefined) entry.sessions += source.sessionCount
-    byKind.set(source.kind, entry)
-  }
-
-  return (
-    <div className="overflow-hidden rounded-xl border border-white/10 bg-slate-950 px-3 py-3">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
-        History Sources
-      </p>
-      <div className="mt-3 grid gap-1">
-        {Array.from(byKind.entries()).map(([kind, stats]) => (
-          <div
-            key={kind}
-            className="flex min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-1.5 text-[11px]"
-          >
-            <span className="min-w-0 truncate font-mono text-slate-300">{kind}</span>
-            <div className="flex shrink-0 items-center gap-2">
-              {stats.sessions > 0 ? (
-                <span className="rounded-md border border-white/10 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-300">
-                  {stats.sessions} sessions
-                </span>
-              ) : null}
-              <span className="rounded-md border border-white/10 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-500">
-                {stats.readable} readable
-              </span>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function parseArgs(value: string): string[] {
-  return value
-    .split(' ')
-    .map((item) => item.trim())
-    .filter(Boolean)
-}
-
-function parseLines(value: string): string[] {
-  return value
-    .split('\n')
-    .map((item) => item.trim())
-    .filter(Boolean)
-}
diff --git a/frontend/src/store/backendStore.svelte.ts b/frontend/src/store/backendStore.svelte.ts
new file mode 100644
index 0000000..0ed840d
--- /dev/null
+++ b/frontend/src/store/backendStore.svelte.ts
@@ -0,0 +1,198 @@
+/**
+ * backendStore.svelte.ts
+ *
+ * Provides stores for:
+ * - read-only agent status cards (acpx-managed)
+ * - editable history source path hints
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BackendSummary {
+  id: string
+  name: string
+  status: 'active' | 'disabled' | 'detected' | 'unavailable'
+  command: string | null
+  canResume: boolean
+}
+
+export type HistoryProvider = 'gemini' | 'copilot' | 'opencode'
+
+export interface HistorySourceConfig {
+  provider: HistoryProvider
+  /** VS Code workspace storage roots (or generic search roots for non-Copilot providers). */
+  paths: string[]
+  /** CLI session-state directory paths. Only meaningful for `copilot`. */
+  cliPaths?: string[]
+}
+
+export interface HistorySourceDescriptor {
+  id: string
+  backendId: string
+  providerId: string
+  kind:
+    | 'cli_session_dir'
+    | 'cli_history_dir'
+    | 'vscode_workspace_db'
+    | 'vscode_chat_sessions'
+    | 'vscode_chat_editing_sessions'
+    | 'vscode_extension_resources'
+    | 'gemini_tmp_dir'
+    | 'opencode_db'
+  path: string
+  platform: 'linux' | 'mounted_host' | 'windows' | 'unknown'
+  access: 'readable' | 'missing' | 'permission_error' | 'invalid'
+  signal: 'contains_history' | 'empty' | 'unknown'
+  discoveredBy: 'auto' | 'manual'
+  lastModifiedMs?: number
+  sessionCount?: number
+  warnings?: string[]
+}
+
+export interface HistorySourceStatus {
+  provider: HistoryProvider
+  discoveredSources: HistorySourceDescriptor[]
+  summary: {
+    readable: number
+    missing: number
+    invalid: number
+    containsHistory: number
+    totalSessions: number
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Backend settings store
+// ---------------------------------------------------------------------------
+
+export function createBackendStore() {
+  let backends = $state<BackendSummary[]>([])
+  let loading = $state(true)
+  let errorMessage = $state<string | null>(null)
+
+  async function load() {
+    loading = true
+    errorMessage = null
+
+    try {
+      const response = await fetch('/api/agents')
+      if (!response.ok) {
+        throw new Error(`Agents request failed with status ${response.status}`)
+      }
+      backends = (await response.json()) as BackendSummary[]
+    } catch (error) {
+      console.error('[backendStore] load failed:', error)
+      errorMessage = 'Unable to load agent status right now.'
+    } finally {
+      loading = false
+    }
+  }
+
+  return {
+    get backends() {
+      return backends
+    },
+    get loading() {
+      return loading
+    },
+    get errorMessage() {
+      return errorMessage
+    },
+    load,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// History sources store
+// ---------------------------------------------------------------------------
+
+export function createHistorySourcesStore() {
+  let sources = $state<HistorySourceConfig[]>([])
+  let sourceStatus = $state<HistorySourceStatus[]>([])
+  let loading = $state(true)
+  let savingProvider = $state<HistoryProvider | null>(null)
+  let errorMessage = $state<string | null>(null)
+
+  async function load() {
+    loading = true
+    errorMessage = null
+
+    try {
+      const response = await fetch('/api/history-sources')
+      if (!response.ok) {
+        throw new Error(`History sources failed with status ${response.status}`)
+      }
+      sources = (await response.json()) as HistorySourceConfig[]
+
+      const statusResponse = await fetch('/api/history-sources/status')
+      if (!statusResponse.ok) {
+        throw new Error(`History source status failed with status ${statusResponse.status}`)
+      }
+      sourceStatus = (await statusResponse.json()) as HistorySourceStatus[]
+    } catch (error) {
+      console.error('[historySourcesStore] load failed:', error)
+      errorMessage = 'Unable to load history sources right now.'
+    } finally {
+      loading = false
+    }
+  }
+
+  async function saveSource(
+    provider: HistoryProvider,
+    patch: { paths?: string[]; cliPaths?: string[] }
+  ) {
+    savingProvider = provider
+    errorMessage = null
+
+    try {
+      const response = await fetch(`/api/history-sources/${encodeURIComponent(provider)}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(patch),
+      })
+
+      if (!response.ok) {
+        throw new Error(`History source save failed with status ${response.status}`)
+      }
+
+      const updated = (await response.json()) as HistorySourceConfig
+      const exists = sources.some((s) => s.provider === provider)
+      sources = exists
+        ? sources.map((s) => (s.provider === provider ? updated : s))
+        : [...sources, updated]
+
+      const statusResponse = await fetch('/api/history-sources/status')
+      if (statusResponse.ok) {
+        sourceStatus = (await statusResponse.json()) as HistorySourceStatus[]
+      }
+    } catch (error) {
+      console.error('[historySourcesStore] save failed:', error)
+      errorMessage = 'Unable to save history source settings right now.'
+      throw error
+    } finally {
+      savingProvider = null
+    }
+  }
+
+  return {
+    get sources() {
+      return sources
+    },
+    get sourceStatus() {
+      return sourceStatus
+    },
+    get loading() {
+      return loading
+    },
+    get savingProvider() {
+      return savingProvider
+    },
+    get errorMessage() {
+      return errorMessage
+    },
+    load,
+    saveSource,
+  }
+}
diff --git a/frontend/src/store/chatStore.svelte.ts b/frontend/src/store/chatStore.svelte.ts
new file mode 100644
index 0000000..b6d04f6
--- /dev/null
+++ b/frontend/src/store/chatStore.svelte.ts
@@ -0,0 +1,840 @@
+/**
+ * chatStore.svelte.ts — Svelte 5 runes port of useAgUiChat.ts
+ *
+ * Replaces the React hook pattern with a plain module-level reactive store.
+ * EventType from @ag-ui/core is replaced by StreamEvent from ../stream-events.js (ADR-023).
+ *
+ * The stale-closure workaround (messagesRef / sessionsRef) is eliminated because
+ * $state variables are always current inside $effect closures in Svelte 5.
+ */
+
+import { StreamEvent } from '../stream-events.js'
+import type { StructuredBlock } from '../components/chat/a2ui-types.js'
+
+export interface ChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  structuredBlocks?: StructuredBlock[]
+  turnInfo?: {
+    providerId?: string
+    modelId?: string
+    mode?: string
+    startedAtMs?: number
+    completedAtMs?: number
+    durationMs?: number
+    modifiedFiles?: string[]
+    patches?: Array<{
+      hash: string
+      nextHash?: string
+      files: string[]
+      additions?: number
+      deletions?: number
+    }>
+  }
+}
+
+export interface AgentSummary {
+  id: string
+  name: string
+  status: 'active' | 'disabled' | 'detected' | 'unavailable'
+  command: string | null
+  /** True when the agent is active and can accept a resume/continuation request. */
+  canResume: boolean
+}
+
+export interface HistorySourceDescriptor {
+  id: string
+  backendId: string
+  providerId: string
+  kind:
+    | 'cli_session_dir'
+    | 'cli_history_dir'
+    | 'vscode_workspace_db'
+    | 'vscode_chat_sessions'
+    | 'vscode_chat_editing_sessions'
+    | 'vscode_extension_resources'
+    | 'gemini_tmp_dir'
+    | 'opencode_db'
+  path: string
+  platform: 'linux' | 'mounted_host' | 'windows' | 'unknown'
+  access: 'readable' | 'missing' | 'permission_error' | 'invalid'
+  signal: 'contains_history' | 'empty' | 'unknown'
+  discoveredBy: 'auto' | 'manual'
+  lastModifiedMs?: number
+  sessionCount?: number
+}
+
+export interface ProjectSummary {
+  id: string
+  name: string
+  path: string
+  status: 'available' | 'missing' | 'invalid'
+}
+
+export interface SessionProjectContext {
+  id: string
+  name: string
+  path: string
+}
+
+export interface SessionSummary {
+  id: string
+  title: string
+  updatedAt: string
+  agentId: string
+  project: SessionProjectContext | null
+  source: 'live' | 'history'
+}
+
+interface ProjectPathSuggestion {
+  name: string
+  path: string
+}
+
+interface SessionDetails extends SessionSummary {
+  messages: ChatMessage[]
+  /** Current model selection state; null when the agent does not support model selection. */
+  modelState: ModelState | null
+}
+
+/** A selectable model advertised by an agent via ACP session creation. */
+export interface ModelInfo {
+  modelId: string
+  name: string
+  description?: string | null
+}
+
+/** Current model selection state for a live session. */
+export interface ModelState {
+  availableModels: ModelInfo[]
+  currentModelId: string
+}
+
+export interface ChatStoreOptions {
+  /** Initial session ID from URL (may be null). */
+  sessionId: string | null
+  /** Initial project ID from URL (may be null). */
+  projectId: string | null
+  onSessionCreated: (sessionId: string) => void
+  onSessionSelected: (sessionId: string) => void
+  onSessionCleared: () => void
+  onProjectSelected: (projectId: string | null) => void
+}
+
+export function buildSendMessagePayload(message: string, agentId: string | null) {
+  return {
+    ...(agentId ? { agentId } : {}),
+    message,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Store factory
+// ---------------------------------------------------------------------------
+
+export function createChatStore(options: ChatStoreOptions) {
+  // -------------------------------------------------------------------------
+  // Reactive state (Svelte 5 runes)
+  // -------------------------------------------------------------------------
+  let currentSessionId = $state<string | null>(options.sessionId)
+  let currentProjectId = $state<string | null>(options.projectId)
+  let agents = $state<AgentSummary[]>([])
+  let projects = $state<ProjectSummary[]>([])
+  let sessions = $state<SessionSummary[]>([])
+  let messages = $state<ChatMessage[]>([])
+  let thinking = $state(false)
+  let errorMessage = $state<string | null>(null)
+  let loading = $state(true)
+  let historyLoadingSessionId = $state<string | null>(null)
+  let streamReconnecting = $state(false)
+  let creatingSession = $state(false)
+  let modelState = $state<ModelState | null>(null)
+
+  // Track last-seen routeSessionId to detect URL-driven changes
+  let routeSessionIdSeen: string | null = options.sessionId
+  // Tracks the session ID that the SSE listener is attached to
+  let activeSessionId: string | null = options.sessionId
+
+  // -------------------------------------------------------------------------
+  // Derived state
+  // -------------------------------------------------------------------------
+  const selectedProject = $derived(
+    projects.find((candidate) => candidate.id === currentProjectId) ?? null
+  )
+  const availableProjects = $derived(
+    projects.filter((candidate) => candidate.status === 'available')
+  )
+  const activeAgents = $derived(agents.filter((candidate) => candidate.status === 'active'))
+  const currentSession = $derived(sessions.find((s) => s.id === currentSessionId) ?? null)
+  const currentSessionAgent = $derived(
+    currentSession ? (agents.find((a) => a.id === currentSession.agentId) ?? null) : null
+  )
+  const ready = $derived(
+    currentSessionId !== null &&
+      currentSession?.source === 'live' &&
+      currentSessionAgent?.status === 'active' &&
+      selectedProject?.status === 'available' &&
+      !creatingSession
+  )
+  const historyLoading = $derived(historyLoadingSessionId !== null)
+
+  // -------------------------------------------------------------------------
+  // Helpers
+  // -------------------------------------------------------------------------
+  async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
+    const response = await fetch(url, init)
+    if (!response.ok) {
+      throw new Error(`${url} failed with status ${response.status}`)
+    }
+    return (await response.json()) as T
+  }
+
+  async function refreshSessions(): Promise<SessionSummary[]> {
+    try {
+      const nextSessions = await fetchJson<SessionSummary[]>('/api/sessions')
+      sessions = nextSessions
+      return nextSessions
+    } catch (error) {
+      console.error('[chatStore] session list failed:', error)
+      if (!errorMessage) {
+        errorMessage = 'Unable to load session history right now. Reload or try again in a moment.'
+      }
+      return []
+    }
+  }
+
+  async function refreshProjects(): Promise<ProjectSummary[]> {
+    try {
+      const nextProjects = await fetchJson<ProjectSummary[]>('/api/projects')
+      projects = nextProjects
+      return nextProjects
+    } catch (error) {
+      console.error('[chatStore] project list failed:', error)
+      if (!errorMessage) {
+        errorMessage = 'Unable to load projects right now. Reload or try again in a moment.'
+      }
+      return []
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // loadSession
+  // -------------------------------------------------------------------------
+  async function loadSession(
+    nextSessionId: string,
+    syncRoute = true,
+    showLoadingIndicator = true
+  ): Promise<SessionDetails | null> {
+    if (showLoadingIndicator) historyLoadingSessionId = nextSessionId
+    try {
+      const session = await fetchJson<SessionDetails>(
+        `/api/sessions/${encodeURIComponent(nextSessionId)}`
+      )
+
+      if (activeSessionId !== nextSessionId) {
+        return null
+      }
+
+      messages = session.messages
+      modelState = session.modelState ?? null
+      currentSessionId = nextSessionId
+      currentProjectId = session.project?.id ?? null
+
+      if (syncRoute && session.project?.id !== options.projectId) {
+        options.onProjectSelected(session.project?.id ?? null)
+      }
+
+      if (syncRoute && options.sessionId !== nextSessionId) {
+        options.onSessionSelected(nextSessionId)
+      }
+
+      return session
+    } catch (error) {
+      console.error('[chatStore] session load failed:', error)
+      messages = []
+      errorMessage = 'Unable to load that session right now. Pick another one or create a new chat.'
+      return null
+    } finally {
+      if (showLoadingIndicator && historyLoadingSessionId === nextSessionId) {
+        historyLoadingSessionId = null
+      }
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // createSession
+  // -------------------------------------------------------------------------
+  async function createSession(agentId: string, nextProjectId?: string): Promise<string | null> {
+    const effectiveProjectId = nextProjectId ?? currentProjectId ?? options.projectId
+
+    if (!agentId) {
+      errorMessage = 'Select an available agent before starting a new chat.'
+      return null
+    }
+
+    if (!effectiveProjectId) {
+      errorMessage = 'Select an available project before starting a new chat.'
+      return null
+    }
+
+    creatingSession = true
+    thinking = false
+
+    try {
+      const session = await fetchJson<SessionDetails>('/api/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentId, projectId: effectiveProjectId }),
+      })
+
+      activeSessionId = session.id
+      currentSessionId = session.id
+      messages = session.messages
+      currentProjectId = session.project?.id ?? effectiveProjectId
+      options.onSessionCreated(session.id)
+
+      if (session.project?.id !== options.projectId) {
+        options.onProjectSelected(session.project?.id ?? effectiveProjectId)
+      }
+
+      void refreshSessions()
+      return session.id
+    } catch (error) {
+      console.error('[chatStore] session create failed:', error)
+      errorMessage = 'Unable to start a chat session right now. Reload or try again in a moment.'
+      return null
+    } finally {
+      creatingSession = false
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Bootstrap (called from onMount in consuming component)
+  // -------------------------------------------------------------------------
+  async function bootstrap() {
+    loading = true
+    errorMessage = null
+
+    try {
+      const [nextAgents, nextProjects, nextSessions] = await Promise.all([
+        fetchJson<AgentSummary[]>('/api/agents'),
+        fetchJson<ProjectSummary[]>('/api/projects'),
+        fetchJson<SessionSummary[]>('/api/sessions'),
+      ])
+
+      agents = nextAgents
+      projects = nextProjects
+      sessions = nextSessions
+
+      const nextActiveAgents = nextAgents.filter((candidate) => candidate.status === 'active')
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      const nextActiveAgentIds = new Set(nextActiveAgents.map((agent) => agent.id))
+
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      const availableProjectIds = new Set(
+        nextProjects
+          .filter((project) => project.status === 'available')
+          .map((project) => project.id)
+      )
+
+      const preferredProjectId =
+        options.projectId && availableProjectIds.has(options.projectId)
+          ? options.projectId
+          : currentProjectId && availableProjectIds.has(currentProjectId)
+            ? currentProjectId
+            : (nextSessions.find(
+                (session) => session.project && availableProjectIds.has(session.project.id)
+              )?.project?.id ??
+              nextProjects.find((project) => project.status === 'available')?.id ??
+              null)
+
+      currentProjectId = preferredProjectId
+
+      if (preferredProjectId !== options.projectId) {
+        options.onProjectSelected(preferredProjectId)
+      }
+
+      const preferredSession =
+        (options.sessionId && nextSessions.find((session) => session.id === options.sessionId)) ??
+        nextSessions.find(
+          (session) =>
+            session.project?.id === preferredProjectId && nextActiveAgentIds.has(session.agentId)
+        ) ??
+        null
+
+      if (preferredSession) {
+        activeSessionId = preferredSession.id
+        currentSessionId = preferredSession.id
+        loading = false
+        await loadSession(
+          preferredSession.id,
+          options.sessionId !== preferredSession.id ||
+            preferredSession.project?.id !== options.projectId,
+          false // bootstrap already shows its own loading state
+        )
+        return
+      }
+
+      activeSessionId = null
+      currentSessionId = null
+
+      if (options.sessionId !== null) {
+        options.onSessionCleared()
+      }
+
+      if (!preferredProjectId) {
+        messages = []
+        errorMessage =
+          'No projects are currently available. Check the generated workspace config and try again.'
+        return
+      }
+
+      if (nextActiveAgents.length === 0) {
+        messages = []
+        errorMessage = 'No agents are currently available. Start an adapter and reload to continue.'
+        return
+      }
+
+      messages = []
+    } catch (error) {
+      console.error('[chatStore] bootstrap failed:', error)
+      errorMessage = 'Unable to load chat data right now. Reload or try again in a moment.'
+    } finally {
+      loading = false
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Route session change handler (called when URL ?session= param changes)
+  // -------------------------------------------------------------------------
+  function handleRouteSessionChange(newSessionId: string | null) {
+    if (newSessionId === routeSessionIdSeen) return
+    routeSessionIdSeen = newSessionId
+
+    if (!newSessionId) {
+      activeSessionId = null
+      currentSessionId = null
+      messages = []
+      thinking = false
+      return
+    }
+
+    if (newSessionId === activeSessionId) return
+
+    activeSessionId = newSessionId
+    currentSessionId = newSessionId
+    errorMessage = null
+    thinking = false
+    void loadSession(newSessionId, false)
+  }
+
+  /**
+   * Called by ChatPage when the URL hash changes (back/forward navigation).
+   * Syncs both sessionId and projectId from the new URL params.
+   */
+  function syncRouteParams(newSessionId: string | null, newProjectId: string | null) {
+    handleRouteSessionChange(newSessionId)
+    if (newProjectId !== currentProjectId) {
+      currentProjectId = newProjectId
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // SSE stream effect (re-runs when currentSession changes)
+  // -------------------------------------------------------------------------
+  function connectStream(sessionId: string): () => void {
+    activeSessionId = sessionId
+    streamReconnecting = false
+
+    const sse = new EventSource(`/api/stream?sessionId=${encodeURIComponent(sessionId)}`)
+
+    sse.onopen = () => {
+      if (activeSessionId !== sessionId) return
+      streamReconnecting = false
+    }
+
+    sse.addEventListener(StreamEvent.RUN_STARTED, () => {
+      streamReconnecting = false
+      thinking = true
+    })
+
+    sse.addEventListener(StreamEvent.TEXT_MESSAGE_START, (event: MessageEvent<string>) => {
+      if (activeSessionId !== sessionId) return
+      const { messageId } = JSON.parse(event.data) as { messageId: string }
+      if (!messages.some((m) => m.id === messageId)) {
+        messages = [
+          ...messages,
+          { id: messageId, role: 'assistant', content: '', structuredBlocks: [] },
+        ]
+      }
+    })
+
+    sse.addEventListener(StreamEvent.TEXT_MESSAGE_CONTENT, (event: MessageEvent<string>) => {
+      if (activeSessionId !== sessionId) return
+      streamReconnecting = false
+      const { messageId, delta } = JSON.parse(event.data) as { messageId: string; delta: string }
+
+      let found = false
+      const nextMessages = messages.map((message) => {
+        if (message.id !== messageId) return message
+        found = true
+        return { ...message, content: message.content + delta }
+      })
+
+      messages = found
+        ? nextMessages
+        : [
+            ...nextMessages,
+            { id: messageId, role: 'assistant', content: delta, structuredBlocks: [] },
+          ]
+    })
+
+    sse.addEventListener(StreamEvent.CUSTOM, (event: MessageEvent<string>) => {
+      if (activeSessionId !== sessionId) return
+      streamReconnecting = false
+
+      const customEvent = JSON.parse(event.data) as {
+        name?: string
+        value?: Record<string, unknown>
+      }
+
+      if (customEvent.name !== 'a2ui:tool_call') return
+
+      const payload = customEvent.value ?? {}
+      const callId = typeof payload['callId'] === 'string' ? payload['callId'] : null
+      const toolName = typeof payload['toolName'] === 'string' ? payload['toolName'] : null
+      const done = payload['done'] === true
+      if (!callId || !toolName) return
+
+      const nextMessages = [...messages]
+      const lastAssistantIndex = [...nextMessages]
+        .reverse()
+        .findIndex((message) => message.role === 'assistant')
+      const targetIndex =
+        lastAssistantIndex === -1 ? -1 : nextMessages.length - 1 - lastAssistantIndex
+
+      const fallbackMessage = {
+        id: `assistant-tool-${callId}`,
+        role: 'assistant' as const,
+        content: '',
+        structuredBlocks: [] as StructuredBlock[],
+      }
+
+      const targetMessage = targetIndex >= 0 ? nextMessages[targetIndex] : fallbackMessage
+
+      const existingBlocks = targetMessage.structuredBlocks ?? []
+      const nextBlock: StructuredBlock = {
+        kind: 'tool_call',
+        payload: {
+          callId,
+          toolName,
+          args: payload['args'],
+          result: typeof payload['result'] === 'string' ? payload['result'] : undefined,
+          done,
+        },
+      }
+
+      const mergedBlocks = upsertStructuredBlock(existingBlocks, nextBlock)
+      const mergedMessage = { ...targetMessage, structuredBlocks: mergedBlocks }
+
+      if (targetIndex >= 0) {
+        nextMessages[targetIndex] = mergedMessage
+        messages = nextMessages
+      } else {
+        messages = [...nextMessages, mergedMessage]
+      }
+    })
+
+    const finishRun = () => {
+      if (activeSessionId !== sessionId) return
+      thinking = false
+      void refreshSessions()
+    }
+
+    sse.addEventListener(StreamEvent.RUN_FINISHED, finishRun)
+    sse.addEventListener(StreamEvent.RUN_ERROR, finishRun)
+
+    sse.onerror = () => {
+      if (activeSessionId !== sessionId) return
+      thinking = false
+      streamReconnecting = true
+    }
+
+    return () => sse.close()
+  }
+
+  // -------------------------------------------------------------------------
+  // Public actions
+  // -------------------------------------------------------------------------
+  async function sendMessage(text: string) {
+    if (!currentSessionId) return
+
+    const session = sessions.find((s) => s.id === currentSessionId)
+    const agentId = session?.agentId ?? null
+
+    errorMessage = null
+    messages = [...messages, { id: `user-${Date.now()}`, role: 'user', content: text }]
+
+    try {
+      const response = await fetch(
+        `/api/sessions/${encodeURIComponent(currentSessionId)}/message`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(buildSendMessagePayload(text, agentId)),
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error(`Message send failed with status ${response.status}`)
+      }
+
+      void refreshSessions()
+    } catch (error) {
+      console.error('[chatStore] message send failed:', error)
+      errorMessage = 'Message failed to send. Check the agent connection and try again.'
+      throw error
+    }
+  }
+
+  async function selectSession(nextSessionId: string) {
+    if (nextSessionId === currentSessionId) return
+    activeSessionId = nextSessionId
+    currentSessionId = nextSessionId
+    errorMessage = null
+    thinking = false
+    await loadSession(nextSessionId, true)
+  }
+
+  async function selectProject(nextProjectId: string) {
+    if (nextProjectId === currentProjectId) return
+
+    const candidate = projects.find((project) => project.id === nextProjectId)
+    if (!candidate || candidate.status !== 'available') return
+
+    errorMessage = null
+    messages = []
+    thinking = false
+    streamReconnecting = false
+    activeSessionId = null
+    currentSessionId = null
+    currentProjectId = nextProjectId
+    options.onSessionCleared()
+    options.onProjectSelected(nextProjectId)
+  }
+
+  async function startNewSession(agentId: string) {
+    errorMessage = null
+    await createSession(agentId)
+  }
+
+  async function resumeSession(agentId: string) {
+    if (!currentSessionId) return
+    errorMessage = null
+    thinking = false
+    streamReconnecting = false
+    creatingSession = true
+
+    const priorMessages = [...messages]
+
+    try {
+      const sourceAgentId = currentSession?.agentId ?? null
+      const session = await fetchJson<SessionDetails>(
+        `/api/sessions/${encodeURIComponent(currentSessionId)}/resume`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            agentId,
+            ...(sourceAgentId ? { sourceAgentId } : {}),
+          }),
+        }
+      )
+      activeSessionId = session.id
+      currentSessionId = session.id
+      messages = [...priorMessages, ...session.messages]
+      currentProjectId = session.project?.id ?? null
+      options.onSessionCreated(session.id)
+      if (session.project?.id !== options.projectId) {
+        options.onProjectSelected(session.project?.id ?? null)
+      }
+      void refreshSessions()
+    } catch (error) {
+      console.error('[chatStore] session resume failed:', error)
+      errorMessage = 'Unable to continue this conversation right now. Try again in a moment.'
+    } finally {
+      creatingSession = false
+    }
+  }
+
+  async function addProject(name: string, path: string): Promise<ProjectSummary> {
+    const project = await fetchJson<ProjectSummary>('/api/projects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, path }),
+    })
+
+    const nextProjects = await refreshProjects()
+    const resolvedProject = nextProjects.find((candidate) => candidate.id === project.id) ?? project
+    currentProjectId = resolvedProject.id
+    options.onProjectSelected(resolvedProject.id)
+    return resolvedProject
+  }
+
+  async function removeProject(projectIdToRemove: string) {
+    const response = await fetch(`/api/projects/${encodeURIComponent(projectIdToRemove)}`, {
+      method: 'DELETE',
+    })
+
+    if (!response.ok) {
+      throw new Error(`/api/projects/${projectIdToRemove} failed with status ${response.status}`)
+    }
+
+    const nextProjects = await refreshProjects()
+    if (currentProjectId === projectIdToRemove) {
+      const fallbackProject = nextProjects.find((project) => project.status === 'available') ?? null
+      activeSessionId = null
+      currentProjectId = fallbackProject?.id ?? null
+      currentSessionId = null
+      messages = []
+      thinking = false
+      options.onSessionCleared()
+      options.onProjectSelected(fallbackProject?.id ?? null)
+    }
+  }
+
+  async function suggestProjectPaths(path: string): Promise<ProjectPathSuggestion[]> {
+    return fetchJson<ProjectPathSuggestion[]>(
+      `/api/projects/path-suggestions?path=${encodeURIComponent(path)}`
+    )
+  }
+
+  async function setSessionModel(newModelId: string) {
+    if (!currentSessionId) return
+    await fetchJson(`/api/sessions/${encodeURIComponent(currentSessionId)}/model`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ modelId: newModelId }),
+    })
+    if (modelState) {
+      modelState = { ...modelState, currentModelId: newModelId }
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Return the store's reactive surface (getters expose $state vars)
+  // -------------------------------------------------------------------------
+  return {
+    // state getters
+    get currentSessionId() {
+      return currentSessionId
+    },
+    get currentProjectId() {
+      return currentProjectId
+    },
+    get agents() {
+      return agents
+    },
+    get projects() {
+      return projects
+    },
+    get sessions() {
+      return sessions
+    },
+    get messages() {
+      return messages
+    },
+    get thinking() {
+      return thinking
+    },
+    get errorMessage() {
+      return errorMessage
+    },
+    get loading() {
+      return loading
+    },
+    get streamReconnecting() {
+      return streamReconnecting
+    },
+    get creatingSession() {
+      return creatingSession
+    },
+    get modelState() {
+      return modelState
+    },
+    // derived getters
+    get selectedProject() {
+      return selectedProject
+    },
+    get availableProjects() {
+      return availableProjects
+    },
+    get activeAgents() {
+      return activeAgents
+    },
+    get currentSession() {
+      return currentSession
+    },
+    get currentSessionAgent() {
+      return currentSessionAgent
+    },
+    get ready() {
+      return ready
+    },
+    get historyLoading() {
+      return historyLoading
+    },
+    // actions
+    bootstrap,
+    handleRouteSessionChange,
+    syncRouteParams,
+    connectStream,
+    sendMessage,
+    selectSession,
+    selectProject,
+    startNewSession,
+    resumeSession,
+    addProject,
+    removeProject,
+    suggestProjectPaths,
+    setSessionModel,
+    refreshSessions,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function upsertStructuredBlock(
+  blocks: StructuredBlock[],
+  nextBlock: StructuredBlock
+): StructuredBlock[] {
+  const nextId = readStructuredBlockId(nextBlock)
+  if (!nextId) {
+    return [...blocks, nextBlock]
+  }
+
+  const existingIndex = blocks.findIndex((block) => readStructuredBlockId(block) === nextId)
+  if (existingIndex === -1) {
+    return [...blocks, nextBlock]
+  }
+
+  return blocks.map((block, index) => (index === existingIndex ? nextBlock : block))
+}
+
+function readStructuredBlockId(block: StructuredBlock): string | null {
+  switch (block.kind) {
+    case 'tool_call':
+      return block.payload.callId
+    case 'skill_invocation':
+      return block.payload.callId
+    case 'subagent_invocation':
+      return block.payload.callId
+    case 'reasoning':
+      return block.payload.text
+    default:
+      return null
+  }
+}
diff --git a/frontend/src/stream-events.ts b/frontend/src/stream-events.ts
new file mode 100644
index 0000000..6f2535f
--- /dev/null
+++ b/frontend/src/stream-events.ts
@@ -0,0 +1,19 @@
+/**
+ * SSE event type constants received from the backend.
+ *
+ * These replace the EventType enum from @ag-ui/core (ADR-023).
+ * The string values are identical to those in backend/src/stream-events.ts.
+ */
+export const StreamEvent = {
+  RUN_STARTED: 'RUN_STARTED',
+  RUN_FINISHED: 'RUN_FINISHED',
+  RUN_ERROR: 'RUN_ERROR',
+  TEXT_MESSAGE_START: 'TEXT_MESSAGE_START',
+  TEXT_MESSAGE_CONTENT: 'TEXT_MESSAGE_CONTENT',
+  TEXT_MESSAGE_END: 'TEXT_MESSAGE_END',
+  TOOL_CALL_START: 'TOOL_CALL_START',
+  TOOL_CALL_RESULT: 'TOOL_CALL_RESULT',
+  CUSTOM: 'CUSTOM',
+} as const
+
+export type StreamEventType = (typeof StreamEvent)[keyof typeof StreamEvent]
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 4800f40..4398056 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -2,8 +2,9 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "noEmit": true
+    "noEmit": true,
+    "moduleResolution": "bundler",
+    "types": ["svelte"]
   },
   "include": ["src"]
 }
diff --git a/package.json b/package.json
index 0ebf766..293c7b6 100644
--- a/package.json
+++ b/package.json
@@ -28,18 +28,14 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@ag-ui/core": "^0.0.47",
     "@agentclientprotocol/sdk": "^0.16.1",
-    "@copilotkit/react-core": "^1.54.0",
     "@hono/node-server": "^1.19.11",
-    "@tanstack/react-router": "^1.0.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "highlight.js": "^11.11.1",
     "hono": "^4.12.8",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^16.1.1",
-    "remark-gfm": "^4.0.1",
+    "isomorphic-dompurify": "^3.7.1",
+    "marked": "^17.0.5",
+    "svelte": "^5.55.1",
     "zod": "^4.3.6"
   },
   "pnpm": {
@@ -49,28 +45,25 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
-    "@playwright/experimental-ct-react": "^1.58.2",
+    "@playwright/experimental-ct-svelte": "1.58.2",
     "@playwright/test": "^1.58.2",
-    "@storybook/addon-a11y": "10.3.0",
-    "@storybook/addon-vitest": "10.3.0",
-    "@storybook/react-vite": "^10.3.0",
+    "@storybook/svelte": "10.3.4",
+    "@storybook/svelte-vite": "10.3.4",
     "@tailwindcss/vite": "^4.0.0",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
     "@vitest/coverage-v8": "^4.1.0",
     "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.0",
+    "eslint-plugin-svelte": "^3.17.0",
     "globals": "^15.0.0",
     "happy-dom": "^20.8.4",
     "husky": "^9.0.0",
     "prettier": "^3.0.0",
-    "storybook": "^10.3.0",
+    "storybook": "10.3.4",
+    "svelte-check": "^4.4.6",
+    "svelte-eslint-parser": "^1.6.0",
     "tailwindcss": "^4.0.0",
     "tsx": "^4.0.0",
     "typescript": "^5.0.0",
diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
index a6d0653..0595906 100644
--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig, devices } from '@playwright/experimental-ct-react'
-import react from '@vitejs/plugin-react'
+import { defineConfig, devices } from '@playwright/experimental-ct-svelte'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
@@ -13,7 +13,7 @@ export default defineConfig({
     video: 'retain-on-failure',
     ctPort: 3100,
     ctViteConfig: {
-      plugins: [react(), tailwindcss(), tsconfigPaths()],
+      plugins: [svelte(), tailwindcss(), tsconfigPaths()],
     },
   },
   projects: [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 875c9be..f7533f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,42 +8,30 @@ importers:
 
   .:
     dependencies:
-      '@ag-ui/core':
-        specifier: ^0.0.47
-        version: 0.0.47
       '@agentclientprotocol/sdk':
         specifier: ^0.16.1
         version: 0.16.1(zod@4.3.6)
-      '@copilotkit/react-core':
-        specifier: ^1.54.0
-        version: 1.54.0(@ag-ui/core@0.0.47)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql@16.13.1)(micromark-util-types@2.0.2)(micromark@4.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)(zod@4.3.6)
       '@hono/node-server':
         specifier: ^1.19.11
         version: 1.19.11(hono@4.12.8)
-      '@tanstack/react-router':
-        specifier: ^1.0.0
-        version: 1.167.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@types/react-syntax-highlighter':
-        specifier: ^15.5.13
-        version: 15.5.13
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^6.2.4
+        version: 6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       hono:
         specifier: ^4.12.8
         version: 4.12.8
-      react:
-        specifier: ^19.0.0
-        version: 19.2.4
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.2.4(react@19.2.4)
-      react-markdown:
-        specifier: ^10.1.0
-        version: 10.1.0(@types/react@19.2.14)(react@19.2.4)
-      react-syntax-highlighter:
-        specifier: ^16.1.1
-        version: 16.1.1(react@19.2.4)
-      remark-gfm:
-        specifier: ^4.0.1
-        version: 4.0.1
+      isomorphic-dompurify:
+        specifier: ^3.7.1
+        version: 3.7.1
+      marked:
+        specifier: ^17.0.5
+        version: 17.0.5
+      svelte:
+        specifier: ^5.55.1
+        version: 5.55.1
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -51,57 +39,42 @@ importers:
       '@eslint/js':
         specifier: ^9.0.0
         version: 9.39.4
-      '@playwright/experimental-ct-react':
-        specifier: ^1.58.2
-        version: 1.58.2(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@playwright/experimental-ct-svelte':
+        specifier: 1.58.2
+        version: 1.58.2(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(svelte@5.55.1)(tsx@4.21.0)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       '@playwright/test':
         specifier: ^1.58.2
         version: 1.58.2
-      '@storybook/addon-a11y':
-        specifier: 10.3.0
-        version: 10.3.0(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
-      '@storybook/addon-vitest':
-        specifier: 10.3.0
-        version: 10.3.0(@vitest/runner@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))
-      '@storybook/react-vite':
-        specifier: ^10.3.0
-        version: 10.3.0(esbuild@0.27.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@storybook/svelte':
+        specifier: 10.3.4
+        version: 10.3.4(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(svelte@5.55.1)
+      '@storybook/svelte-vite':
+        specifier: 10.3.4
+        version: 10.3.4(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       '@tailwindcss/vite':
         specifier: ^4.0.0
         version: 4.2.1(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
-      '@testing-library/react':
-        specifier: ^16.3.2
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@testing-library/svelte':
+        specifier: ^5.3.1
+        version: 5.3.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/node':
         specifier: ^22.0.0
         version: 22.19.15
-      '@types/react':
-        specifier: ^19.0.0
-        version: 19.2.14
-      '@types/react-dom':
-        specifier: ^19.0.0
-        version: 19.2.3(@types/react@19.2.14)
-      '@vitejs/plugin-react':
-        specifier: ^4.0.0
-        version: 4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       '@vitest/coverage-v8':
         specifier: ^4.1.0
-        version: 4.1.0(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))
+        version: 4.1.0(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))
       eslint:
         specifier: ^9.0.0
         version: 9.39.4(jiti@2.6.1)
-      eslint-plugin-react-hooks:
-        specifier: ^5.0.0
-        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.0
-        version: 0.4.26(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-svelte:
+        specifier: ^3.17.0
+        version: 3.17.0(eslint@9.39.4(jiti@2.6.1))(svelte@5.55.1)
       globals:
         specifier: ^15.0.0
         version: 15.15.0
@@ -115,8 +88,14 @@ importers:
         specifier: ^3.0.0
         version: 3.8.1
       storybook:
-        specifier: ^10.3.0
-        version: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: 10.3.4
+        version: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      svelte-check:
+        specifier: ^4.4.6
+        version: 4.4.6(picomatch@4.0.3)(svelte@5.55.1)(typescript@5.9.3)
+      svelte-eslint-parser:
+        specifier: ^1.6.0
+        version: 1.6.0(svelte@5.55.1)
       tailwindcss:
         specifier: ^4.0.0
         version: 4.2.1
@@ -137,83 +116,31 @@ importers:
         version: 6.1.1(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       vitest:
         specifier: ^4.1.0
-        version: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+        version: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
 
 packages:
 
-  '@0no-co/graphql.web@1.2.0':
-    resolution: {integrity: sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw==}
-    peerDependencies:
-      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
-    peerDependenciesMeta:
-      graphql:
-        optional: true
-
-  '@a2ui/lit@0.8.3':
-    resolution: {integrity: sha512-YXJksuier3nZLFtdrXfMNd7WdEOldQEfXGDMqoBTMVIM8xU22F/SvfNeDJoKQ4Wn7hXzRMi0vnwq0HI7Lzpyow==}
-
-  '@a2ui/web_core@0.8.0':
-    resolution: {integrity: sha512-UG8IDsiLYuZjnEmqH7129EbN1Ds3DfC8FXPSI/E+0kcZ4VGxo//Kij6ZF2jBXBKyrHYPehoDtffFFIIFvgBp6g==}
-
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
-  '@ag-ui/client@0.0.47':
-    resolution: {integrity: sha512-zciVwYV6gmYzdMyWwSDR/VBcOj5x1lHPG/ZGDKyxDHbCeIdGp7sKoGORKHAiPAsfUhReGLKXsR/4IknqwY2PgQ==}
-
-  '@ag-ui/core@0.0.47':
-    resolution: {integrity: sha512-fHat7ZErAH028R90psYclTWaj6PdcvN2GJxzwWPF/j1c5ceqbF2+6xe+t06Psg+gCzZneI9QE3IkOkdJNplZ5A==}
-
-  '@ag-ui/encoder@0.0.47':
-    resolution: {integrity: sha512-AgKTM/DEHtaNrcbMa0z1UQ7lKiKtalbFAjBTTP0vCh+lJ6JWIu9LrpCJQ4EjON1IRoAZtJBORlCj1KY+F14HXQ==}
-
-  '@ag-ui/proto@0.0.47':
-    resolution: {integrity: sha512-+KCrkeVeR6MulWoYUq9Fwm22gFlI9aKG50eKYRtbTM/Yuei/Che5vjbF297XfSnGUunzScrOmdnTeTCprrtb7A==}
-
   '@agentclientprotocol/sdk@0.16.1':
     resolution: {integrity: sha512-1ad+Sc/0sCtZGHthxxvgEUo5Wsbw16I+aF+YwdiLnPwkZG8KAGUEAPK6LM6Pf69lCyJPt1Aomk1d+8oE3C4ZEw==}
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  '@antfu/install-pkg@1.1.0':
-    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
-
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.29.0':
-    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.29.0':
-    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.28.6':
-    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
+  '@asamuzakjp/css-color@5.1.1':
+    resolution: {integrity: sha512-iGWN8E45Ws0XWx3D44Q1t6vX2LqhCKcwfmwBYCDsFrYFS6m4q/Ks61L2veETaLv+ckDC6+dTETJoaAAb7VjLiw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
-    engines: {node: '>=6.9.0'}
+  '@asamuzakjp/dom-selector@7.0.4':
+    resolution: {integrity: sha512-jXR6x4AcT3eIrS2fSNAwJpwirOkGcd+E7F7CP3zjdTqz9B/2huHOL8YJZBgekKwLML+u7qB/6P1LXQuMScsx0w==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
-  '@babel/helper-module-transforms@7.28.6':
-    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
-  '@babel/helper-plugin-utils@7.28.6':
-    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-string-parser@7.27.1':
@@ -224,43 +151,15 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.29.2':
-    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.29.2':
     resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/runtime@7.29.2':
     resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.29.0':
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
@@ -269,72 +168,45 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
-  '@braintree/sanitize-url@7.1.2':
-    resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
-
-  '@bufbuild/protobuf@2.11.0':
-    resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==}
-
-  '@chevrotain/cst-dts-gen@11.1.2':
-    resolution: {integrity: sha512-XTsjvDVB5nDZBQB8o0o/0ozNelQtn2KrUVteIHSlPd2VAV2utEb6JzyCJaJ8tGxACR4RiBNWy5uYUHX2eji88Q==}
-
-  '@chevrotain/gast@11.1.2':
-    resolution: {integrity: sha512-Z9zfXR5jNZb1Hlsd/p+4XWeUFugrHirq36bKzPWDSIacV+GPSVXdk+ahVWZTwjhNwofAWg/sZg58fyucKSQx5g==}
-
-  '@chevrotain/regexp-to-ast@11.1.2':
-    resolution: {integrity: sha512-nMU3Uj8naWer7xpZTYJdxbAs6RIv/dxYzkYU8GSwgUtcAAlzjcPfX1w+RKRcYG8POlzMeayOQ/znfwxEGo5ulw==}
-
-  '@chevrotain/types@11.1.2':
-    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
-
-  '@chevrotain/utils@11.1.2':
-    resolution: {integrity: sha512-4mudFAQ6H+MqBTfqLmU7G1ZwRzCLfJEooL/fsF6rCX5eePMbGhoy5n4g+G4vlh2muDcsCTJtL+uKbOzWxs5LHA==}
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
 
-  '@copilotkit/a2ui-renderer@1.54.0':
-    resolution: {integrity: sha512-98Q9c+Zk2mmEs1gt9N+BQ9ZB8DDO0mmDrsjCCb0IK3Zm6u0jRhYG+rv71PyHdEG4O8ysQf0krpjZy4uh8Gs5/Q==}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^18 || ^19 || ^19.0.0-rc
+  '@csstools/color-helpers@6.0.2':
+    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+    engines: {node: '>=20.19.0'}
 
-  '@copilotkit/react-core@1.54.0':
-    resolution: {integrity: sha512-rivNaXth1H2wGZdVWs0fnQSCiTVQm23QBjpxSU0oSc0agsZO3IRJglMQjb7eMGRw8O4Kxd4+Uh32s6EIpb11sg==}
+  '@csstools/css-calc@3.1.1':
+    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^18 || ^19 || ^19.0.0-rc
-      zod: '>=3.0.0'
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
 
-  '@copilotkit/runtime-client-gql@1.54.0':
-    resolution: {integrity: sha512-b0N4wCGPEpSHbwrdUI4ktkZxy57FKY8uSfb2oCuWVcSAYTj7Mx7NiGW3S4/wLob44eURByK1A4HM3FJRu2vV2w==}
+  '@csstools/css-color-parser@4.0.2':
+    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
 
-  '@copilotkit/shared@1.54.0':
-    resolution: {integrity: sha512-KPR345Sjh/+x2TGfvBqHlUR0RGtGz+hQn16pwcauFS7DsQheRi6J7gsEt+HdASGG6q5rzqTmOeJrb65Ecm90Aw==}
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      '@ag-ui/core': ^0.0.47
-
-  '@copilotkitnext/core@1.54.0':
-    resolution: {integrity: sha512-0aJSsfUnQjIZH/7lVobltUwp7hNpc1D8JtGz/cQVmRG+p3W0xFiAqli1qUfv4Ax9t5h6JxJESRbd6JdPmr5anA==}
-    engines: {node: '>=18'}
-    deprecated: This package is deprecated. Use @copilotkit/core instead. V2 features are being integrated into the main @copilotkit exports and will be available under the /v2 subpath.
+      '@csstools/css-tokenizer': ^4.0.0
 
-  '@copilotkitnext/react@1.54.0':
-    resolution: {integrity: sha512-Yz+RBXmLTrl2l5PPuFKoU4SHsSOFKRXtP4rN1zDEmyBSxft3cOvy53CLl6HI0qEZQ4Xn8sSf3kVxCYEcfugqyg==}
-    engines: {node: '>=18'}
-    deprecated: This package is deprecated. Use @copilotkit/react instead. V2 features are being integrated into the main @copilotkit exports and will be available under the /v2 subpath.
+  '@csstools/css-syntax-patches-for-csstree@1.1.2':
+    resolution: {integrity: sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==}
     peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@copilotkitnext/shared@1.54.0':
-    resolution: {integrity: sha512-g8K0+vvGa6mwx9etxgBz3x/P1ciHql/toghFthp1CDBlB9fM1R0TvyXL/vMYTJbjYOdRDiu5DRHZhQ+niblA1A==}
-    engines: {node: '>=18'}
-    deprecated: This package is deprecated. Use @copilotkit/shared instead. V2 features are being integrated into the main @copilotkit exports and will be available under the /v2 subpath.
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
 
-  '@copilotkitnext/web-inspector@1.54.0':
-    resolution: {integrity: sha512-l2rWMXuFNdn5DcxZx9bsKRii1UPHdH+/uNm9/Jf0EbSztyCLJlWK0sYZI6Rbdx+XU1ELxeDbxVbwhPTp0Kd8mQ==}
-    engines: {node: '>=18'}
-    deprecated: This package is deprecated. Use @copilotkit/web-inspector instead. V2 features are being integrated into the main @copilotkit exports and will be available under the /v2 subpath.
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
 
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
@@ -686,20 +558,14 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/core@1.7.5':
-    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
-
-  '@floating-ui/dom@1.7.6':
-    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
-
-  '@floating-ui/react-dom@2.1.8':
-    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+  '@exodus/bytes@1.15.0':
+    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
     peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/utils@0.2.11':
-    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
 
   '@hono/node-server@1.19.11':
     resolution: {integrity: sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g==}
@@ -723,21 +589,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify/types@2.0.0':
-    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-
-  '@iconify/utils@3.1.0':
-    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
-
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4':
-    resolution: {integrity: sha512-6PyZBYKnnVNqOSB0YFly+62R7dmov8segT27A+RVTBVd4iAE6kbW9QBJGlyR2yG4D4ohzhZSTIu7BK1UTtmFFA==}
-    peerDependencies:
-      typescript: '>= 4.3.x'
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -754,37 +605,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@lit-labs/react@2.1.3':
-    resolution: {integrity: sha512-OD9h2JynerBQUMNzb563jiVpxfvPF0HjQkKY2mx0lpVYvD7F+rtJpOGz6ek+6ufMidV3i+MPT9SX62OKWHFrQg==}
-
-  '@lit-labs/signals@0.1.3':
-    resolution: {integrity: sha512-P0yWgH5blwVyEwBg+WFspLzeu1i0ypJP1QB0l1Omr9qZLIPsUu0p4Fy2jshOg7oQyha5n163K3GJGeUhQQ682Q==}
-
-  '@lit-labs/ssr-dom-shim@1.5.1':
-    resolution: {integrity: sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==}
-
-  '@lit/context@1.1.6':
-    resolution: {integrity: sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==}
-
-  '@lit/react@1.0.8':
-    resolution: {integrity: sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==}
-    peerDependencies:
-      '@types/react': 17 || 18 || 19
-
-  '@lit/reactive-element@2.1.2':
-    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
-
-  '@lukeed/csprng@1.1.0':
-    resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
-    engines: {node: '>=8'}
-
-  '@lukeed/uuid@2.0.1':
-    resolution: {integrity: sha512-qC72D4+CDdjGqJvkFMMEAtancHUQ7/d/tAiHf64z8MopFDmcrtbcJuerDtFceuAfQJ2pDSfCKCtbqoGBNnwg0w==}
-    engines: {node: '>=8'}
-
-  '@mermaid-js/parser@1.0.1':
-    resolution: {integrity: sha512-opmV19kN1JsK0T6HhhokHpcVkqKpF+x2pPDKKM2ThHtZAB5F4PROopk0amuVYK5qMrIA4erzpNm8gmPNJgMDxQ==}
-
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -793,8 +613,8 @@ packages:
     resolution: {integrity: sha512-Imif9ggQp6YIblHAX6MvJuqDFrCGHYspoibxLP3+1soXp+1wBNuuSRajv0VWXzFbh//4l29I+xy2tpTgej0vEA==}
     engines: {node: '>=18'}
 
-  '@playwright/experimental-ct-react@1.58.2':
-    resolution: {integrity: sha512-8IdT7b+c3Wv8RVRKmAkAL2PWJU85Tu0IfqsvsbaS520OOoZJqytIoxdU7gog9gjaONpgw6SOKDykEWup3SeO7g==}
+  '@playwright/experimental-ct-svelte@1.58.2':
+    resolution: {integrity: sha512-75hpAyYIRIJPYJ8lU5SzjzFJWax6FIUESJ6hJqke2QejuFkYg1gKspBQ9pBLSs3JTs0h/CVe22ilIy696hTEjA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -803,323 +623,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@protobuf-ts/protoc@2.11.1':
-    resolution: {integrity: sha512-mUZJaV0daGO6HUX90o/atzQ6A7bbN2RSuHtdwo8SSF2Qoe3zHwa4IHyCN1evftTeHfLmdz+45qo47sL+5P8nyg==}
-    hasBin: true
-
-  '@radix-ui/primitive@1.1.3':
-    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
-
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.1.7':
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.1.11':
-    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-dropdown-menu@2.1.16':
-    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-focus-guards@1.1.3':
-    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-menu@2.1.16':
-    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.2.8':
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-presence@1.1.5':
-    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-roving-focus@1.1.11':
-    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.8':
-    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.3':
-    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
-  '@rolldown/pluginutils@1.0.0-beta.27':
-    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
-
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/rollup-android-arm-eabi@4.59.0':
     resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
     cpu: [arm]
@@ -1258,78 +761,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@scarf/scarf@1.4.0':
-    resolution: {integrity: sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==}
-
-  '@segment/analytics-core@1.8.2':
-    resolution: {integrity: sha512-5FDy6l8chpzUfJcNlIcyqYQq4+JTUynlVoCeCUuVz+l+6W0PXg+ljKp34R4yLVCcY5VVZohuW+HH0VLWdwYVAg==}
-
-  '@segment/analytics-generic-utils@1.2.0':
-    resolution: {integrity: sha512-DfnW6mW3YQOLlDQQdR89k4EqfHb0g/3XvBXkovH1FstUN93eL1kfW9CsDcVQyH3bAC5ZsFyjA/o/1Q2j0QeoWw==}
-
-  '@segment/analytics-node@2.3.0':
-    resolution: {integrity: sha512-fOXLL8uY0uAWw/sTLmezze80hj8YGgXXlAfvSS6TUmivk4D/SP0C0sxnbpFdkUzWg2zT64qWIZj26afEtSnxUA==}
-    engines: {node: '>=20'}
-
-  '@shikijs/core@3.23.0':
-    resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==}
-
-  '@shikijs/engine-javascript@3.23.0':
-    resolution: {integrity: sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==}
-
-  '@shikijs/engine-oniguruma@3.23.0':
-    resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==}
-
-  '@shikijs/langs@3.23.0':
-    resolution: {integrity: sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==}
-
-  '@shikijs/themes@3.23.0':
-    resolution: {integrity: sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==}
-
-  '@shikijs/types@3.23.0':
-    resolution: {integrity: sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==}
-
-  '@shikijs/vscode-textmate@10.0.2':
-    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
-
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@storybook/addon-a11y@10.3.0':
-    resolution: {integrity: sha512-GOQP8kp0Pos3weW00U5FC2azt1zZQOcyihP+tINQO6/MDA3hts0rKMbS5+MyVULX7A5JE5uk7SzcZQj+EZ8Yrg==}
-    peerDependencies:
-      storybook: ^10.3.0
-
-  '@storybook/addon-vitest@10.3.0':
-    resolution: {integrity: sha512-DOLlnWhQ0IhTGaBJfymSVkSt6ECZLskdvZK/CtgThpubGuOoTToUsso9RNhzIZjYxKT2QwvGRPJENQmv5XOqeg==}
-    peerDependencies:
-      '@vitest/browser': ^3.0.0 || ^4.0.0
-      '@vitest/browser-playwright': ^4.0.0
-      '@vitest/runner': ^3.0.0 || ^4.0.0
-      storybook: ^10.3.0
-      vitest: ^3.0.0 || ^4.0.0
-    peerDependenciesMeta:
-      '@vitest/browser':
-        optional: true
-      '@vitest/browser-playwright':
-        optional: true
-      '@vitest/runner':
-        optional: true
-      vitest:
-        optional: true
-
-  '@storybook/builder-vite@10.3.0':
-    resolution: {integrity: sha512-T7LfZPE31j94Jkk66bnsxMibBnbLYmebLIDgPSYzeN3ZkjPfoFhhi2+8Zxneth5cQCGRkCAhRTV0tYmFp1+H6g==}
+  '@storybook/builder-vite@10.3.4':
+    resolution: {integrity: sha512-dNQyBZpBKvwmhSTpjrsuxxY8FqFCh0hgu5+46h2WbgQ2Te3pO458heWkGb+QO7mC6FmkXO6j6zgYzXticD6F2A==}
     peerDependencies:
-      storybook: ^10.3.0
+      storybook: ^10.3.4
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/csf-plugin@10.3.0':
-    resolution: {integrity: sha512-zlBnNpv0wtmICdQPDoY91HNzn6BNqnS2hur580J+qJtcP+5ZOYU7+gNyU+vfAnQuLEWbPz34rx8b1cTzXZQCDg==}
+  '@storybook/csf-plugin@10.3.4':
+    resolution: {integrity: sha512-WPP0Z39o82WiohPkhPOs6z+9yJ+bVvqPz4d+QUPfE6FMvOOBLojlwOcGx6Xmclyn5H/CKwywFrjuz4mBO/nHhA==}
     peerDependencies:
       esbuild: '*'
       rollup: '*'
-      storybook: ^10.3.0
+      storybook: ^10.3.4
       vite: '*'
       webpack: '*'
     peerDependenciesMeta:
@@ -1351,34 +797,57 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@storybook/react-dom-shim@10.3.0':
-    resolution: {integrity: sha512-dmAnIjkMmUYZCdg3FUL83Lavybin3bYKRNRXFZq1okCH8SINa2J+zKEzJhPlqixAKkbd7x1PFDgXnxxM/Nisig==}
+  '@storybook/svelte-vite@10.3.4':
+    resolution: {integrity: sha512-/a1Xup1I7QcPEtjkV17SqDvWXl0xUiZew5y/6S22hO3W17pboQZsE+TqVq580y3rQgKxH9e2ZcGFbgZhIo1BSg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.0
+      '@sveltejs/vite-plugin-svelte': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      storybook: ^10.3.4
+      svelte: ^5.0.0
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/react-vite@10.3.0':
-    resolution: {integrity: sha512-34t+30j+gglcRchPuZx4S4uusD746cvPeUPli7iJRWd3+vpnHSct03uGFAlsVJo6DZvVgH5s7vP4QU66C76K8A==}
+  '@storybook/svelte@10.3.4':
+    resolution: {integrity: sha512-MnKFov6G1wKLIzYOFXCTUzYD3efEXRG0E093mz1j4fJUctRJVhHJ4aOD5dLVbEg3IKeOaE62yGVznOCtVEPtpg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.0
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      storybook: ^10.3.4
+      svelte: ^5.0.0
 
-  '@storybook/react@10.3.0':
-    resolution: {integrity: sha512-pN++HZYVwjyJWeNg+6cewjOPkWlSho+BaUxCq/2e6yYUCr1J6MkBCYN/l1F7/ex9pDTKv9AW0da0o1aRXm3ivg==}
+  '@sveltejs/acorn-typescript@1.0.9':
+    resolution: {integrity: sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.0
-      typescript: '>= 4.9.x'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      acorn: ^8.9.0
 
-  '@tailwindcss/node@4.2.1':
-    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
+    resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.2':
+    resolution: {integrity: sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
+  '@sveltejs/vite-plugin-svelte@5.1.1':
+    resolution: {integrity: sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.0.0
+
+  '@sveltejs/vite-plugin-svelte@6.2.4':
+    resolution: {integrity: sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
 
   '@tailwindcss/oxide-android-arm64@4.2.1':
     resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
@@ -1471,31 +940,6 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
-  '@tanstack/history@1.161.6':
-    resolution: {integrity: sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg==}
-    engines: {node: '>=20.19'}
-
-  '@tanstack/react-router@1.167.4':
-    resolution: {integrity: sha512-VpbZh382zX3WF4+X2Z+EUyd8eJhJyjg9C6ByYwrVZiWbhgbMK4+zQQIG2+lCAlIlDi7SV8fDcGL09NA8Z2kpGQ==}
-    engines: {node: '>=20.19'}
-    peerDependencies:
-      react: '>=18.0.0 || >=19.0.0'
-      react-dom: '>=18.0.0 || >=19.0.0'
-
-  '@tanstack/react-store@0.9.2':
-    resolution: {integrity: sha512-Vt5usJE5sHG/cMechQfmwvwne6ktGCELe89Lmvoxe3LKRoFrhPa8OCKWs0NliG8HTJElEIj7PLtaBQIcux5pAQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@tanstack/router-core@1.167.4':
-    resolution: {integrity: sha512-Gk5V9Zr5JFJ4SbLyCheQLJ3MnXddccENPA+DJRz+9g3QxtN8DJB8w8KCUCgDeYlWp4LvmO4nX3fy3tupqVP2Pw==}
-    engines: {node: '>=20.19'}
-    hasBin: true
-
-  '@tanstack/store@0.9.2':
-    resolution: {integrity: sha512-K013lUJEFJK2ofFQ/hZKJUmCnpcV00ebLyOyFOWQvyQHUOZp/iYO84BM6aOGiV81JzwbX0APTVmW8YI7yiG5oA==}
-
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -1504,19 +948,23 @@ packages:
     resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/react@16.3.2':
-    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
-    engines: {node: '>=18'}
+  '@testing-library/svelte-core@1.0.0':
+    resolution: {integrity: sha512-VkUePoLV6oOYwSUvX6ShA8KLnJqZiYMIbP2JW2t0GLWLkJxKGvuH5qrrZBV/X7cXFnLGuFQEC7RheYiZOW68KQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
+
+  '@testing-library/svelte@5.3.1':
+    resolution: {integrity: sha512-8Ez7ZOqW5geRf9PF5rkuopODe5RGy3I9XR+kc7zHh26gBiktLaxTfKmhlGaSHYUOTQE7wFsLMN9xCJVCszw47w==}
+    engines: {node: '>= 10'}
     peerDependencies:
-      '@testing-library/dom': ^10.0.0
-      '@types/react': ^18.0.0 || ^19.0.0
-      '@types/react-dom': ^18.0.0 || ^19.0.0
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
+      svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
+      vite: '*'
+      vitest: '*'
     peerDependenciesMeta:
-      '@types/react':
+      vite:
         optional: true
-      '@types/react-dom':
+      vitest:
         optional: true
 
   '@testing-library/user-event@14.6.1':
@@ -1528,188 +976,24 @@ packages:
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.28.0':
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
-
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
-  '@types/d3-array@3.2.2':
-    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
-
-  '@types/d3-axis@3.0.6':
-    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
-
-  '@types/d3-brush@3.0.6':
-    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
-
-  '@types/d3-chord@3.0.6':
-    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
-
-  '@types/d3-color@3.1.3':
-    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
-
-  '@types/d3-contour@3.0.6':
-    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
-
-  '@types/d3-delaunay@6.0.4':
-    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
-
-  '@types/d3-dispatch@3.0.7':
-    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
-
-  '@types/d3-drag@3.0.7':
-    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
-
-  '@types/d3-dsv@3.0.7':
-    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
-
-  '@types/d3-ease@3.0.2':
-    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
-
-  '@types/d3-fetch@3.0.7':
-    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
-
-  '@types/d3-force@3.0.10':
-    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
-
-  '@types/d3-format@3.0.4':
-    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
-
-  '@types/d3-geo@3.1.0':
-    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
-
-  '@types/d3-hierarchy@3.1.7':
-    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
-
-  '@types/d3-interpolate@3.0.4':
-    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
-
-  '@types/d3-path@3.1.1':
-    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
-
-  '@types/d3-polygon@3.0.2':
-    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
-
-  '@types/d3-quadtree@3.0.6':
-    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
-
-  '@types/d3-random@3.0.3':
-    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
-
-  '@types/d3-scale-chromatic@3.1.0':
-    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
-
-  '@types/d3-scale@4.0.9':
-    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
-
-  '@types/d3-selection@3.0.11':
-    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
-
-  '@types/d3-shape@3.1.8':
-    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
-
-  '@types/d3-time-format@4.0.3':
-    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
-
-  '@types/d3-time@3.0.4':
-    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
-
-  '@types/d3-timer@3.0.2':
-    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
-
-  '@types/d3-transition@3.0.9':
-    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
-
-  '@types/d3-zoom@3.0.8':
-    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
-
-  '@types/d3@7.4.3':
-    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
-
-  '@types/debug@4.1.12':
-    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
-
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/doctrine@0.0.9':
-    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
-
-  '@types/estree-jsx@1.0.5':
-    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/geojson@7946.0.16':
-    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
-
-  '@types/hast@2.3.10':
-    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
-
-  '@types/hast@3.0.4':
-    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/katex@0.16.8':
-    resolution: {integrity: sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==}
-
-  '@types/mdast@3.0.15':
-    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
-
-  '@types/mdast@4.0.4':
-    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
-
-  '@types/ms@2.1.0':
-    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
-
   '@types/node@22.19.15':
     resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
 
-  '@types/prismjs@1.26.6':
-    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
-
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
-  '@types/react-dom@19.2.3':
-    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
-    peerDependencies:
-      '@types/react': ^19.2.0
-
-  '@types/react-syntax-highlighter@15.5.13':
-    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
-
-  '@types/react@19.2.14':
-    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
-
-  '@types/resolve@1.20.6':
-    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
-
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
-  '@types/unist@2.0.11':
-    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
-
-  '@types/unist@3.0.3':
-    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
-
-  '@types/uuid@10.0.0':
-    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
-
   '@types/whatwg-mimetype@3.0.2':
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
 
@@ -1775,21 +1059,6 @@ packages:
     resolution: {integrity: sha512-YWnmJkXbofiz9KbnbbwuA2rpGkFPLbAIetcCNO6mJ8gdhdZ/v7WDXsoGFAJuM6ikUFKTlSQnjWnVO4ux+UzS6A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
-
-  '@upsetjs/venn.js@2.0.0':
-    resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
-
-  '@urql/core@5.2.0':
-    resolution: {integrity: sha512-/n0ieD0mvvDnVAXEQgX/7qJiVcvYvNkOHeBvkwtylfjydar123caCXcl58PXFY11oU1oquJocVXHxLAbtv4x1A==}
-
-  '@vitejs/plugin-react@4.7.0':
-    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-
   '@vitest/coverage-v8@4.1.0':
     resolution: {integrity: sha512-nDWulKeik2bL2Va/Wl4x7DLuTKAXa906iRFooIRPR+huHkcvp9QDkPQ2RJdmjOFrqOqvNfoSQLF68deE3xC3CQ==}
     peerDependencies:
@@ -1840,6 +1109,9 @@ packages:
   '@vitest/utils@4.1.0':
     resolution: {integrity: sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==}
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1868,13 +1140,13 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.6:
-    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
-    engines: {node: '>=10'}
-
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  aria-query@5.3.1:
+    resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==}
+    engines: {node: '>= 0.4'}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -1890,12 +1162,9 @@ packages:
   ast-v8-to-istanbul@1.0.0:
     resolution: {integrity: sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==}
 
-  axe-core@4.11.1:
-    resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
-    engines: {node: '>=4'}
-
-  bail@2.0.2:
-    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1904,13 +1173,8 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
-  base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-
-  baseline-browser-mapping@2.10.8:
-    resolution: {integrity: sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
@@ -1919,14 +1183,6 @@ packages:
     resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==}
     engines: {node: 18 || 20 || >=22}
 
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  buffer@6.0.3:
-    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
-
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -1935,12 +1191,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001780:
-    resolution: {integrity: sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ==}
-
-  ccount@2.0.1:
-    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
-
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -1953,32 +1203,13 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  character-entities-html4@2.1.0:
-    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
-
-  character-entities-legacy@3.0.0:
-    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
-
-  character-entities@2.0.2:
-    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
-
-  character-reference-invalid@2.0.1:
-    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
-
   check-error@2.1.3:
     resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
     engines: {node: '>= 16'}
 
-  chevrotain-allstar@0.3.1:
-    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
-    peerDependencies:
-      chevrotain: ^11.0.0
-
-  chevrotain@11.1.2:
-    resolution: {integrity: sha512-opLQzEVriiH1uUQ4Kctsd49bRoFDXGGSC4GUqj7pGyxM3RehRhvTlZJc1FL/Flew2p5uwxa1tUDWKzI4wNM8pg==}
-
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
@@ -1991,206 +1222,31 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  comma-separated-tokens@2.0.3:
-    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
-  commander@8.3.0:
-    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
-    engines: {node: '>= 12'}
-
-  compare-versions@6.1.1:
-    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@2.0.0:
-    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
-
-  cose-base@1.0.3:
-    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
-
-  cose-base@2.2.0:
-    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  csstype@3.2.3:
-    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-
-  cytoscape-cose-bilkent@4.1.0:
-    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
-    peerDependencies:
-      cytoscape: ^3.2.0
-
-  cytoscape-fcose@2.2.0:
-    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
-    peerDependencies:
-      cytoscape: ^3.2.0
-
-  cytoscape@3.33.1:
-    resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==}
-    engines: {node: '>=0.10'}
-
-  d3-array@2.12.1:
-    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
-
-  d3-array@3.2.4:
-    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
-    engines: {node: '>=12'}
-
-  d3-axis@3.0.0:
-    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
-    engines: {node: '>=12'}
-
-  d3-brush@3.0.0:
-    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
-    engines: {node: '>=12'}
-
-  d3-chord@3.0.1:
-    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
-    engines: {node: '>=12'}
-
-  d3-color@3.1.0:
-    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
-    engines: {node: '>=12'}
-
-  d3-contour@4.0.2:
-    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
-    engines: {node: '>=12'}
-
-  d3-delaunay@6.0.4:
-    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
-    engines: {node: '>=12'}
-
-  d3-dispatch@3.0.1:
-    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
-    engines: {node: '>=12'}
-
-  d3-drag@3.0.0:
-    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
-    engines: {node: '>=12'}
-
-  d3-dsv@3.0.1:
-    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
-    engines: {node: '>=12'}
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
     hasBin: true
 
-  d3-ease@3.0.1:
-    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
-    engines: {node: '>=12'}
-
-  d3-fetch@3.0.1:
-    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
-    engines: {node: '>=12'}
-
-  d3-force@3.0.0:
-    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
-    engines: {node: '>=12'}
-
-  d3-format@3.1.2:
-    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
-    engines: {node: '>=12'}
-
-  d3-geo@3.1.1:
-    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
-    engines: {node: '>=12'}
-
-  d3-hierarchy@3.1.2:
-    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
-    engines: {node: '>=12'}
-
-  d3-interpolate@3.0.1:
-    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
-    engines: {node: '>=12'}
-
-  d3-path@1.0.9:
-    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
-
-  d3-path@3.1.0:
-    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
-    engines: {node: '>=12'}
-
-  d3-polygon@3.0.1:
-    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
-    engines: {node: '>=12'}
-
-  d3-quadtree@3.0.1:
-    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
-    engines: {node: '>=12'}
-
-  d3-random@3.0.1:
-    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
-    engines: {node: '>=12'}
-
-  d3-sankey@0.12.3:
-    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
-
-  d3-scale-chromatic@3.1.0:
-    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
-    engines: {node: '>=12'}
-
-  d3-scale@4.0.2:
-    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
-    engines: {node: '>=12'}
-
-  d3-selection@3.0.0:
-    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
-    engines: {node: '>=12'}
-
-  d3-shape@1.3.7:
-    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
-
-  d3-shape@3.2.0:
-    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
-    engines: {node: '>=12'}
-
-  d3-time-format@4.1.0:
-    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
-    engines: {node: '>=12'}
-
-  d3-time@3.1.0:
-    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
-    engines: {node: '>=12'}
-
-  d3-timer@3.0.1:
-    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
-    engines: {node: '>=12'}
-
-  d3-transition@3.0.1:
-    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      d3-selection: 2 - 3
-
-  d3-zoom@3.0.0:
-    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
-    engines: {node: '>=12'}
-
-  d3@7.9.0:
-    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
-    engines: {node: '>=12'}
-
-  dagre-d3-es@7.0.14:
-    resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
-
-  dayjs@1.11.20:
-    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -2201,8 +1257,11 @@ packages:
       supports-color:
         optional: true
 
-  decode-named-character-reference@1.3.0:
-    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  dedent-js@1.0.1:
+    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
 
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
@@ -2211,6 +1270,10 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
   default-browser-id@5.0.1:
     resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
     engines: {node: '>=18'}
@@ -2223,9 +1286,6 @@ packages:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
-  delaunator@5.0.1:
-    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2234,19 +1294,8 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
-  devlop@1.1.0:
-    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
-
-  diff@5.2.2:
-    resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
-    engines: {node: '>=0.3.1'}
-
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
+  devalue@5.6.4:
+    resolution: {integrity: sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==}
 
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
@@ -2257,25 +1306,10 @@ packages:
   dompurify@3.3.3:
     resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==}
 
-  dset@3.1.4:
-    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
-    engines: {node: '>=4'}
-
-  electron-to-chromium@1.5.313:
-    resolution: {integrity: sha512-QBMrTWEf00GXZmJyx2lbYD45jpI3TUFnNIzJ5BBc8piGUDwMPa1GV6HJWTZVvY/eiN3fSopl7NRbgGp9sZ9LTA==}
-
-  empathic@2.0.0:
-    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
-    engines: {node: '>=14'}
-
   enhanced-resolve@5.20.1:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -2297,28 +1331,19 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-
-  eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react-refresh@0.4.26:
-    resolution: {integrity: sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==}
+  eslint-plugin-svelte@3.17.0:
+    resolution: {integrity: sha512-sF6wgd5FLS2P8CCaOy2HdYYYEcZ6TwL251dLHUkNmtLnWECk1Dwc+j6VeulmmnFxr7Xs0WNtjweOA+bJ0PnaFw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: '>=8.40'
+      eslint: ^8.57.1 || ^9.0.0 || ^10.0.0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
 
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
@@ -2346,6 +1371,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@10.4.0:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2359,6 +1387,9 @@ packages:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
+  esrap@2.2.4:
+    resolution: {integrity: sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -2367,12 +1398,6 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
-  estree-util-is-identifier-name@3.0.0:
-    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
-
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -2384,24 +1409,15 @@ packages:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
-  extend@3.0.2:
-    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-json-patch@3.1.1:
-    resolution: {integrity: sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ==}
-
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fault@1.0.4:
-    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -2426,10 +1442,6 @@ packages:
   flatted@3.4.1:
     resolution: {integrity: sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==}
 
-  format@0.2.2:
-    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
-    engines: {node: '>=0.4.x'}
-
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2440,21 +1452,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  get-east-asian-width@1.5.0:
-    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
-    engines: {node: '>=18'}
-
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-tsconfig@4.13.6:
     resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
 
@@ -2462,10 +1459,6 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@13.0.6:
-    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
-    engines: {node: 18 || 20 || >=22}
-
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -2474,19 +1467,16 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphql@16.13.1:
-    resolution: {integrity: sha512-gGgrVCoDKlIZ8fIqXBBb0pPKqDgki0Z/FSKNiQzSGj2uEYHr1tq5wmBegGwJx6QB5S5cM0khSBpi/JFHMCvsmQ==}
-    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
-
-  hachure-fill@0.5.2:
-    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
-
   happy-dom@20.8.4:
     resolution: {integrity: sha512-GKhjq4OQCYB4VLFBzv8mmccUadwlAusOZOI7hC1D9xDIT5HhzkJK17c4el2f6R6C715P9xB4uiMxeKUa2nHMwQ==}
     engines: {node: '>=20.0.0'}
@@ -2495,93 +1485,29 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
-  hast-util-from-dom@5.0.1:
-    resolution: {integrity: sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==}
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
 
-  hast-util-from-html-isomorphic@2.0.0:
-    resolution: {integrity: sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==}
+  hono@4.12.8:
+    resolution: {integrity: sha512-VJCEvtrezO1IAR+kqEYnxUOoStaQPGrCmX3j4wDTNOcD1uRPFpGlwQUIW8niPuvHXaTUxeOUl5MMDGrl+tmO9A==}
+    engines: {node: '>=16.9.0'}
 
-  hast-util-from-html@2.0.3:
-    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
-  hast-util-from-parse5@8.0.3:
-    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  hast-util-is-element@3.0.0:
-    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  hast-util-parse-selector@4.0.0:
-    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
-
-  hast-util-raw@9.1.0:
-    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
-
-  hast-util-sanitize@5.0.2:
-    resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
-
-  hast-util-to-html@9.0.5:
-    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
-
-  hast-util-to-jsx-runtime@2.3.6:
-    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
-
-  hast-util-to-parse5@8.0.1:
-    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
-
-  hast-util-to-text@4.0.2:
-    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
-
-  hast-util-whitespace@2.0.1:
-    resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
-
-  hast-util-whitespace@3.0.0:
-    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
-
-  hast@1.0.0:
-    resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
-    deprecated: Renamed to rehype
-
-  hastscript@9.0.1:
-    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
-
-  highlight.js@10.7.3:
-    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
-
-  highlightjs-vue@1.0.0:
-    resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
-
-  hono@4.12.8:
-    resolution: {integrity: sha512-VJCEvtrezO1IAR+kqEYnxUOoStaQPGrCmX3j4wDTNOcD1uRPFpGlwQUIW8niPuvHXaTUxeOUl5MMDGrl+tmO9A==}
-    engines: {node: '>=16.9.0'}
-
-  html-escaper@2.0.2:
-    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
-
-  html-url-attributes@3.0.1:
-    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
-
-  html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-
-  husky@9.1.7:
-    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-
-  ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
 
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
@@ -2599,36 +1525,6 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
-  inline-style-parser@0.1.1:
-    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
-
-  inline-style-parser@0.2.7:
-    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
-
-  internmap@1.0.1:
-    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
-
-  internmap@2.0.3:
-    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
-    engines: {node: '>=12'}
-
-  is-alphabetical@2.0.1:
-    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
-
-  is-alphanumerical@2.0.1:
-    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
-
-  is-buffer@2.0.5:
-    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
-    engines: {node: '>=4'}
-
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
-  is-decimal@2.0.1:
-    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
-
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2642,29 +1538,28 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-hexadecimal@2.0.1:
-    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
-
   is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
     hasBin: true
 
-  is-plain-obj@4.1.0:
-    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
-    engines: {node: '>=12'}
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
   is-wsl@3.1.1:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
     engines: {node: '>=16'}
 
-  isbot@5.1.36:
-    resolution: {integrity: sha512-C/ZtXyJqDPZ7G7JPr06ApWyYoHjYexQbS6hPYD4WYCzpv2Qes6Z+CCEfTX4Owzf+1EJ933PoI2p+B9v7wpGZBQ==}
-    engines: {node: '>=18'}
-
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isomorphic-dompurify@3.7.1:
+    resolution: {integrity: sha512-ChhzwwCm7k8h8ANiq1Vc7geCWeHGaAPusgXU5N4mu7Y2wChgn2JHvbUe6aH/XQOUG3+KV+GmqSq95MntW/V1ng==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -2681,9 +1576,6 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
-  jose@5.10.0:
-    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
-
   js-tokens@10.0.0:
     resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
 
@@ -2694,10 +1586,14 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
+  jsdom@29.0.1:
+    resolution: {integrity: sha512-z6JOK5gRO7aMybVq/y/MlIpKh8JIi68FBKMUtKkK2KH/wMSRlCxQ682d08LB9fYXplyY/UXG8P4XXTScmdjApg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
 
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@@ -2708,34 +1604,15 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  katex@0.16.38:
-    resolution: {integrity: sha512-cjHooZUmIAUmDsHBN+1n8LaZdpmbj03LtYeYPyuYB7OuloiaeaV6N4LcfjcnHVzGWjVQmKrxxTrpDcmSzEZQwQ==}
-    hasBin: true
-
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  khroma@2.1.0:
-    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
-
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  langium@4.2.1:
-    resolution: {integrity: sha512-zu9QWmjpzJcomzdJQAHgDVhLGq5bLosVak1KVa40NzQHXfqr4eAHupvnPOVXEoLkg6Ocefvf/93d//SB7du4YQ==}
-    engines: {node: '>=20.10.0', npm: '>=10.2.3'}
-
-  layout-base@1.0.2:
-    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
-
-  layout-base@2.0.1:
-    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -2815,61 +1692,27 @@ packages:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
 
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
-
-  lit-element@4.2.2:
-    resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}
-
-  lit-html@3.3.2:
-    resolution: {integrity: sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==}
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
 
-  lit@3.3.2:
-    resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  lodash-es@4.17.23:
-    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
-
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  longest-streak@3.1.0:
-    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
-
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
-  lowlight@1.20.0:
-    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
-
   lru-cache@11.2.7:
     resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
     engines: {node: 20 || >=22}
 
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
-  lucide-react@0.525.0:
-    resolution: {integrity: sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  lucide-react@0.542.0:
-    resolution: {integrity: sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  lucide@0.525.0:
-    resolution: {integrity: sha512-sfehWlaE/7NVkcEQ4T9JD3eID8RNMIGJBBUq9wF3UFiJIrcMKRbU3g1KGfDk4svcW7yw8BtDLXaXo02scDtUYQ==}
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -2884,267 +1727,13 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  markdown-it@14.1.1:
-    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
-    hasBin: true
-
-  markdown-table@3.0.4:
-    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
-
-  marked@12.0.2:
-    resolution: {integrity: sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==}
-    engines: {node: '>= 18'}
-    hasBin: true
-
-  marked@16.4.2:
-    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+  marked@17.0.5:
+    resolution: {integrity: sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==}
     engines: {node: '>= 20'}
     hasBin: true
 
-  mdast-util-definitions@5.1.2:
-    resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
-
-  mdast-util-find-and-replace@3.0.2:
-    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
-
-  mdast-util-from-markdown@1.3.1:
-    resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
-
-  mdast-util-from-markdown@2.0.3:
-    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
-
-  mdast-util-gfm-autolink-literal@2.0.1:
-    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
-
-  mdast-util-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
-
-  mdast-util-gfm-strikethrough@2.0.0:
-    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
-
-  mdast-util-gfm-table@2.0.0:
-    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
-
-  mdast-util-gfm-task-list-item@2.0.0:
-    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
-
-  mdast-util-gfm@3.1.0:
-    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
-
-  mdast-util-math@3.0.0:
-    resolution: {integrity: sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==}
-
-  mdast-util-mdx-expression@2.0.1:
-    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
-
-  mdast-util-mdx-jsx@3.2.0:
-    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
-
-  mdast-util-mdxjs-esm@2.0.1:
-    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
-
-  mdast-util-phrasing@4.1.0:
-    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
-
-  mdast-util-to-hast@12.3.0:
-    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
-
-  mdast-util-to-hast@13.2.1:
-    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
-
-  mdast-util-to-markdown@2.1.2:
-    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
-
-  mdast-util-to-string@3.2.0:
-    resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
-
-  mdast-util-to-string@4.0.0:
-    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
-
-  mdurl@2.0.0:
-    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
-
-  mermaid@11.13.0:
-    resolution: {integrity: sha512-fEnci+Immw6lKMFI8sqzjlATTyjLkRa6axrEgLV2yHTfv8r+h1wjFbV6xeRtd4rUV1cS4EpR9rwp3Rci7TRWDw==}
-
-  micromark-core-commonmark@1.1.0:
-    resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
-
-  micromark-core-commonmark@2.0.3:
-    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
-
-  micromark-extension-cjk-friendly-gfm-strikethrough@1.2.3:
-    resolution: {integrity: sha512-gSPnxgHDDqXYOBvQRq6lerrq9mjDhdtKn+7XETuXjxWcL62yZEfUdA28Ml1I2vDIPfAOIKLa0h2XDSGkInGHFQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      micromark: ^4.0.0
-      micromark-util-types: ^2.0.0
-    peerDependenciesMeta:
-      micromark-util-types:
-        optional: true
-
-  micromark-extension-cjk-friendly-util@2.1.1:
-    resolution: {integrity: sha512-egs6+12JU2yutskHY55FyR48ZiEcFOJFyk9rsiyIhcJ6IvWB6ABBqVrBw8IobqJTDZ/wdSr9eoXDPb5S2nW1bg==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      micromark-util-types: '*'
-    peerDependenciesMeta:
-      micromark-util-types:
-        optional: true
-
-  micromark-extension-cjk-friendly@1.2.3:
-    resolution: {integrity: sha512-gRzVLUdjXBLX6zNPSnHGDoo+ZTp5zy+MZm0g3sv+3chPXY7l9gW+DnrcHcZh/jiPR6MjPKO4AEJNp4Aw6V9z5Q==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      micromark: ^4.0.0
-      micromark-util-types: ^2.0.0
-    peerDependenciesMeta:
-      micromark-util-types:
-        optional: true
-
-  micromark-extension-gfm-autolink-literal@2.1.0:
-    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
-
-  micromark-extension-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
-
-  micromark-extension-gfm-strikethrough@2.1.0:
-    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
-
-  micromark-extension-gfm-table@2.1.1:
-    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
-
-  micromark-extension-gfm-tagfilter@2.0.0:
-    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
-
-  micromark-extension-gfm-task-list-item@2.1.0:
-    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
-
-  micromark-extension-gfm@3.0.0:
-    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
-
-  micromark-extension-math@3.1.0:
-    resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
-
-  micromark-factory-destination@1.1.0:
-    resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
-
-  micromark-factory-destination@2.0.1:
-    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
-
-  micromark-factory-label@1.1.0:
-    resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
-
-  micromark-factory-label@2.0.1:
-    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
-
-  micromark-factory-space@1.1.0:
-    resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
-
-  micromark-factory-space@2.0.1:
-    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
-
-  micromark-factory-title@1.1.0:
-    resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
-
-  micromark-factory-title@2.0.1:
-    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
-
-  micromark-factory-whitespace@1.1.0:
-    resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
-
-  micromark-factory-whitespace@2.0.1:
-    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
-
-  micromark-util-character@1.2.0:
-    resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
-
-  micromark-util-character@2.1.1:
-    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
-
-  micromark-util-chunked@1.1.0:
-    resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
-
-  micromark-util-chunked@2.0.1:
-    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
-
-  micromark-util-classify-character@1.1.0:
-    resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
-
-  micromark-util-classify-character@2.0.1:
-    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
-
-  micromark-util-combine-extensions@1.1.0:
-    resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
-
-  micromark-util-combine-extensions@2.0.1:
-    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
-
-  micromark-util-decode-numeric-character-reference@1.1.0:
-    resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
-
-  micromark-util-decode-numeric-character-reference@2.0.2:
-    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
-
-  micromark-util-decode-string@1.1.0:
-    resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
-
-  micromark-util-decode-string@2.0.1:
-    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
-
-  micromark-util-encode@1.1.0:
-    resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
-
-  micromark-util-encode@2.0.1:
-    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
-
-  micromark-util-html-tag-name@1.2.0:
-    resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
-
-  micromark-util-html-tag-name@2.0.1:
-    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
-
-  micromark-util-normalize-identifier@1.1.0:
-    resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
-
-  micromark-util-normalize-identifier@2.0.1:
-    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
-
-  micromark-util-resolve-all@1.1.0:
-    resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
-
-  micromark-util-resolve-all@2.0.1:
-    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
-
-  micromark-util-sanitize-uri@1.2.0:
-    resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
-
-  micromark-util-sanitize-uri@2.0.1:
-    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
-
-  micromark-util-subtokenize@1.1.0:
-    resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
-
-  micromark-util-subtokenize@2.1.0:
-    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
-
-  micromark-util-symbol@1.1.0:
-    resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
-
-  micromark-util-symbol@2.0.1:
-    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
-
-  micromark-util-types@1.1.0:
-    resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
-
-  micromark-util-types@2.0.2:
-    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
-
-  micromark@3.2.0:
-    resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
-
-  micromark@4.0.2:
-    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
@@ -3157,16 +1746,6 @@ packages:
   minimatch@3.1.5:
     resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
-  minipass@7.1.3:
-    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  mlly@1.8.1:
-    resolution: {integrity: sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==}
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -3182,31 +1761,9 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-
-  node-releases@2.0.36:
-    resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
-
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
-  oniguruma-parser@0.12.1:
-    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
-
-  oniguruma-to-es@4.3.5:
-    resolution: {integrity: sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ==}
-
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -3223,24 +1780,12 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  package-manager-detector@1.6.0:
-    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-entities@4.0.2:
-    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
-
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
-
-  partial-json@0.1.7:
-    resolution: {integrity: sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==}
-
-  path-data-parser@0.1.0:
-    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
 
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -3250,13 +1795,6 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
-  path-scurry@2.0.2:
-    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
-    engines: {node: 18 || 20 || >=22}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -3264,9 +1802,6 @@ packages:
     resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
     engines: {node: '>= 14.16'}
 
-  phoenix@1.8.5:
-    resolution: {integrity: sha512-Oj5nlRV/NKXkjBx8uMgCMmgMf1twd/B2qOcO30cHLH1PCGR8149o4T1lRIaqN4nq2KQJAeMqPiLdh1Asd0wQFg==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3274,9 +1809,6 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
-  pkg-types@1.3.1:
-    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
-
   playwright-core@1.58.2:
     resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
     engines: {node: '>=18'}
@@ -3287,11 +1819,33 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  points-on-curve@0.2.0:
-    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+  postcss-load-config@3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
 
-  points-on-path@0.2.1:
-    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
 
   postcss@8.5.8:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
@@ -3310,106 +1864,26 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  prismjs@1.30.0:
-    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
-    engines: {node: '>=6'}
-
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-
-  property-information@6.5.0:
-    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
-
-  property-information@7.1.0:
-    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
-
-  punycode.js@2.3.1:
-    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
-    engines: {node: '>=6'}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  react-docgen-typescript@2.4.0:
-    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
-    peerDependencies:
-      typescript: '>= 4.3.x'
-
-  react-docgen@8.0.3:
-    resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
-    engines: {node: ^20.9.0 || >=22}
-
   react-dom@19.2.4:
     resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
     peerDependencies:
       react: ^19.2.4
 
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
-  react-markdown@10.1.0:
-    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
-    peerDependencies:
-      '@types/react': '>=18'
-      react: '>=18'
-
-  react-markdown@8.0.7:
-    resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==}
-    peerDependencies:
-      '@types/react': '>=16'
-      react: '>=16'
-
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
-
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.2:
-    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-syntax-highlighter@16.1.1:
-    resolution: {integrity: sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==}
-    engines: {node: '>= 16.20.2'}
-    peerDependencies:
-      react: '>= 0.14.0'
-
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
   recast@0.23.11:
     resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
@@ -3418,136 +1892,45 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  refractor@5.0.0:
-    resolution: {integrity: sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==}
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
 
-  regex-recursion@6.0.2:
-    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
 
-  regex-utilities@2.3.0:
-    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  regex@6.1.0:
-    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
 
-  rehype-harden@1.1.8:
-    resolution: {integrity: sha512-Qn7vR1xrf6fZCrkm9TDWi/AB4ylrHy+jqsNm1EHOAmbARYA6gsnVJBq/sdBh6kmT4NEZxH5vgIjrscefJAOXcw==}
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
 
-  rehype-katex@7.0.1:
-    resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
 
-  rehype-raw@7.0.0:
-    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
 
-  rehype-sanitize@6.0.0:
-    resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==}
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
-  remark-cjk-friendly-gfm-strikethrough@1.2.3:
-    resolution: {integrity: sha512-bXfMZtsaomK6ysNN/UGRIcasQAYkC10NtPmP0oOHOV8YOhA2TXmwRXCku4qOzjIFxAPfish5+XS0eIug2PzNZA==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      '@types/mdast': ^4.0.0
-      unified: ^11.0.0
-    peerDependenciesMeta:
-      '@types/mdast':
-        optional: true
-
-  remark-cjk-friendly@1.2.3:
-    resolution: {integrity: sha512-UvAgxwlNk+l9Oqgl/9MWK2eWRS7zgBW/nXX9AthV7nd/3lNejF138E7Xbmk9Zs4WjTJGs721r7fAEc7tNFoH7g==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      '@types/mdast': ^4.0.0
-      unified: ^11.0.0
-    peerDependenciesMeta:
-      '@types/mdast':
-        optional: true
-
-  remark-gfm@4.0.1:
-    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
-
-  remark-math@6.0.0:
-    resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
-
-  remark-parse@10.0.2:
-    resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
-
-  remark-parse@11.0.0:
-    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
-
-  remark-rehype@10.1.0:
-    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
-
-  remark-rehype@11.1.2:
-    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
-
-  remark-stringify@11.0.0:
-    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
-
-  remend@1.0.1:
-    resolution: {integrity: sha512-152puVH0qMoRJQFnaMG+rVDdf01Jq/CaED+MBuXExurJgdbkLp0c3TIe4R12o28Klx8uyGsjvFNG05aFG69G9w==}
-
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-
-  resolve@1.22.11:
-    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
-  robust-predicates@3.0.2:
-    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
-
-  rollup@4.59.0:
-    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  roughjs@4.6.6:
-    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
-
-  run-applescript@7.1.0:
-    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
-    engines: {node: '>=18'}
-
-  rw@1.3.3:
-    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
-
-  rxjs@7.8.1:
-    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
-
-  sade@1.8.1:
-    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
-    engines: {node: '>=6'}
-
-  safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-
-  scheduler@0.27.0:
-    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
-
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
   semver@7.7.4:
     resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  seroval-plugins@1.5.1:
-    resolution: {integrity: sha512-4FbuZ/TMl02sqv0RTFexu0SP6V+ywaIe5bAWCCEik0fk17BhALgwvUDVF7e3Uvf9pxmwCEJsRPmlkUE6HdzLAw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      seroval: ^1.0
-
-  seroval@1.5.1:
-    resolution: {integrity: sha512-OwrZRZAfhHww0WEnKHDY8OM0U/Qs8OTfIDWhUD4BLpNJUfXK4cGmjiagGze086m+mhI+V2nD0gfbHEnJjb9STA==}
-    engines: {node: '>=10'}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -3556,20 +1939,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@3.23.0:
-    resolution: {integrity: sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==}
-
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-polyfill@0.2.2:
-    resolution: {integrity: sha512-p63Y4Er5/eMQ9RHg0M0Y64NlsQKpiu6MDdhBXpyywRuWiPywhJTpKJ1iB5K2hJEbFZ0BnDS7ZkJ+0AfTuL37Rg==}
-
-  signal-utils@0.21.1:
-    resolution: {integrity: sha512-i9cdLSvVH4j8ql8mz2lyrA93xL499P8wEbIev3ldSriXeUwqh+wM4Q5VPhIZ19gPtIS4BOopJuKB8l1+wH9LCg==}
-    peerDependencies:
-      signal-polyfill: ^0.2.0
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3578,17 +1950,14 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
   std-env@4.0.0:
     resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
 
-  storybook@10.3.0:
-    resolution: {integrity: sha512-OpLdng98l7cACuqBoQwewx21Vhgl9XPssgLdXQudW0+N5QPjinWXZpZCquZpXpNCyw5s5BFAcv+jKB3Qkf9jeA==}
+  storybook@10.3.4:
+    resolution: {integrity: sha512-866YXZy9k59tLPl9SN3KZZOFeBC/swxkuBVtW8iQjJIzfCrvk7zXQd8RSQ4ignmCdArVvY4lGMCAT4yNaZSt1g==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -3596,52 +1965,47 @@ packages:
       prettier:
         optional: true
 
-  streamdown@1.6.11:
-    resolution: {integrity: sha512-Y38fwRx5kCKTluwM+Gf27jbbi9q6Qy+WC9YrC1YbCpMkktT3PsRBJHMWiqYeF8y/JzLpB1IzDoeaB6qkQEDnAA==}
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0
-
-  stringify-entities@4.0.4:
-    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
-
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
-  strip-indent@4.1.1:
-    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
-    engines: {node: '>=12'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  style-to-js@1.1.21:
-    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
-
-  style-to-object@0.4.4:
-    resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
-
-  style-to-object@1.0.14:
-    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
-
-  stylis@4.3.6:
-    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  svelte-check@4.4.6:
+    resolution: {integrity: sha512-kP1zG81EWaFe9ZyTv4ZXv44Csi6Pkdpb7S3oj6m+K2ec/IcDg/a8LsFsnVLqm2nxtkSwsd5xPj/qFkTBgXHXjg==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+
+  svelte-eslint-parser@1.6.0:
+    resolution: {integrity: sha512-qoB1ehychT6OxEtQAqc/guSqLS20SlA53Uijl7x375s8nlUT0lb9ol/gzraEEatQwsyPTJo87s2CmKL9Xab+Uw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0, pnpm: 10.30.3}
+    peerDependencies:
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+
+  svelte2tsx@0.7.53:
+    resolution: {integrity: sha512-ljVSwmnYRDHRm8+7ICP6QoAN7U7vgOFfPBLN6T745YWNYqRRSzHxlrzUVqMjYls2Un8MzJissfziy/38e6Deeg==}
+    peerDependencies:
+      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
+      typescript: ^4.9.4 || ^5.0.0
 
-  tailwind-merge@3.5.0:
-    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+  svelte@5.55.1:
+    resolution: {integrity: sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw==}
+    engines: {node: '>=18'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
@@ -3653,9 +2017,6 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
-  tiny-warning@1.0.3:
-    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -3679,14 +2040,20 @@ packages:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
-  tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+  tldts-core@7.0.27:
+    resolution: {integrity: sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg==}
+
+  tldts@7.0.27:
+    resolution: {integrity: sha512-I4FZcVFcqCRuT0ph6dCDpPuO4Xgzvh+spkcTr1gK7peIvxWauoloVO0vuy1FQnijT63ss6AsHB6+OIM4aXHbPg==}
+    hasBin: true
 
-  trim-lines@3.0.1:
-    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
 
-  trough@2.2.0:
-    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
 
   ts-api-utils@2.4.0:
     resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
@@ -3698,10 +2065,6 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  ts-deepmerge@7.0.3:
-    resolution: {integrity: sha512-Du/ZW2RfwV/D4cmA5rXafYjBQVuvu4qGiEEla4EmEHVHgRdx68Gftx7i66jn2bzHPwSVZY36Ae6OuDn9el4ZKA==}
-    engines: {node: '>=14.13.1'}
-
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
@@ -3712,10 +2075,6 @@ packages:
       typescript:
         optional: true
 
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3724,13 +2083,14 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tw-animate-css@1.4.0:
-    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
   typescript-eslint@8.57.1:
     resolution: {integrity: sha512-fLvZWf+cAGw3tqMCYzGIU6yR8K+Y9NT2z23RwOjlNFF2HwSB3KhdEFI5lSBv8tNmFkkBShSjsCjzx1vahZfISA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3743,139 +2103,27 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  uc.micro@2.1.0:
-    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
-
-  ufo@1.6.3:
-    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
-
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  unified@10.1.2:
-    resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
-
-  unified@11.0.5:
-    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
-
-  unist-util-find-after@5.0.0:
-    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
-
-  unist-util-generated@2.0.1:
-    resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
-
-  unist-util-is@5.2.1:
-    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
-
-  unist-util-is@6.0.1:
-    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
-
-  unist-util-position@4.0.4:
-    resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
-
-  unist-util-position@5.0.0:
-    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
-
-  unist-util-remove-position@5.0.0:
-    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
-
-  unist-util-stringify-position@3.0.3:
-    resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
-
-  unist-util-stringify-position@4.0.0:
-    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
-
-  unist-util-visit-parents@5.1.3:
-    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
-
-  unist-util-visit-parents@6.0.2:
-    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
-
-  unist-util-visit@4.1.2:
-    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
-
-  unist-util-visit@5.1.0:
-    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+  undici@7.24.7:
+    resolution: {integrity: sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==}
+    engines: {node: '>=20.18.1'}
 
   unplugin@2.3.11:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
 
-  untruncate-json@0.0.1:
-    resolution: {integrity: sha512-4W9enDK4X1y1s2S/Rz7ysw6kDuMS3VmRjMFg7GZrNO+98OSe+x5Lh7PKYoVjy3lW/1wmhs6HW0lusnQRHgMarA==}
-
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  urql@4.2.2:
-    resolution: {integrity: sha512-3GgqNa6iF7bC4hY/ImJKN4REQILcSU9VKcKL8gfELZM8mM5BnLH1BsCc8kBdnVGD1LIFOs4W3O2idNHhON1r0w==}
-    peerDependencies:
-      '@urql/core': ^5.0.0
-      react: '>= 16.8.0'
-
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-stick-to-bottom@1.1.3:
-    resolution: {integrity: sha512-GgRLdeGhxBxpcbrBbEIEoOKUQ9d46/eaSII+wyv1r9Du+NbCn1W/OE+VddefvRP4+5w/1kATN/6g2/BAC/yowQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  uuid@10.0.0:
-    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
-    hasBin: true
-
-  uuid@11.1.0:
-    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
-    hasBin: true
-
-  uvu@0.5.6:
-    resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
-    engines: {node: '>=8'}
-    hasBin: true
-
-  vfile-location@5.0.3:
-    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
-
-  vfile-message@3.1.4:
-    resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
-
-  vfile-message@4.0.3:
-    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
-
-  vfile@5.3.7:
-    resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
-
-  vfile@6.0.3:
-    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
   vite-tsconfig-paths@6.1.1:
     resolution: {integrity: sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg==}
@@ -3922,6 +2170,14 @@ packages:
       yaml:
         optional: true
 
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vitest@4.1.0:
     resolution: {integrity: sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -3957,31 +2213,13 @@ packages:
       jsdom:
         optional: true
 
-  vscode-jsonrpc@8.2.0:
-    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
-    engines: {node: '>=14.0.0'}
-
-  vscode-languageserver-protocol@3.17.5:
-    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
-
-  vscode-languageserver-textdocument@1.0.12:
-    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
-
-  vscode-languageserver-types@3.17.5:
-    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
-
-  vscode-languageserver@9.0.1:
-    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
-    hasBin: true
-
-  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
-
-  web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
 
-  webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
 
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
@@ -3990,8 +2228,13 @@ packages:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
-  whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -4003,9 +2246,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  wonka@6.3.5:
-    resolution: {integrity: sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==}
-
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -4026,87 +2266,52 @@ packages:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
 
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  yaml@1.10.3:
+    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
+    engines: {node: '>= 6'}
 
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  zod-to-json-schema@3.25.1:
-    resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
-    peerDependencies:
-      zod: ^3.25 || ^4
-
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+  zimmerframe@1.1.4:
+    resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
 
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
-  zwitch@2.0.4:
-    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-
 snapshots:
 
-  '@0no-co/graphql.web@1.2.0(graphql@16.13.1)':
-    optionalDependencies:
-      graphql: 16.13.1
-
-  '@a2ui/lit@0.8.3(signal-polyfill@0.2.2)':
-    dependencies:
-      '@a2ui/web_core': 0.8.0
-      '@lit-labs/signals': 0.1.3
-      '@lit/context': 1.1.6
-      lit: 3.3.2
-      signal-utils: 0.21.1(signal-polyfill@0.2.2)
-    transitivePeerDependencies:
-      - signal-polyfill
-
-  '@a2ui/web_core@0.8.0':
-    dependencies:
-      zod: 3.25.76
-      zod-to-json-schema: 3.25.1(zod@3.25.76)
-
   '@adobe/css-tools@4.4.4': {}
 
-  '@ag-ui/client@0.0.47':
-    dependencies:
-      '@ag-ui/core': 0.0.47
-      '@ag-ui/encoder': 0.0.47
-      '@ag-ui/proto': 0.0.47
-      '@types/uuid': 10.0.0
-      compare-versions: 6.1.1
-      fast-json-patch: 3.1.1
-      rxjs: 7.8.1
-      untruncate-json: 0.0.1
-      uuid: 11.1.0
-      zod: 3.25.76
-
-  '@ag-ui/core@0.0.47':
-    dependencies:
-      rxjs: 7.8.1
-      zod: 3.25.76
-
-  '@ag-ui/encoder@0.0.47':
+  '@agentclientprotocol/sdk@0.16.1(zod@4.3.6)':
     dependencies:
-      '@ag-ui/core': 0.0.47
-      '@ag-ui/proto': 0.0.47
+      zod: 4.3.6
 
-  '@ag-ui/proto@0.0.47':
+  '@asamuzakjp/css-color@5.1.1':
     dependencies:
-      '@ag-ui/core': 0.0.47
-      '@bufbuild/protobuf': 2.11.0
-      '@protobuf-ts/protoc': 2.11.1
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      lru-cache: 11.2.7
 
-  '@agentclientprotocol/sdk@0.16.1(zod@4.3.6)':
+  '@asamuzakjp/dom-selector@7.0.4':
     dependencies:
-      zod: 4.3.6
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.7
 
-  '@antfu/install-pkg@1.1.0':
-    dependencies:
-      package-manager-detector: 1.6.0
-      tinyexec: 1.0.4
+  '@asamuzakjp/nwsapi@2.3.9': {}
 
   '@babel/code-frame@7.29.0':
     dependencies:
@@ -4114,109 +2319,16 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.29.0': {}
-
-  '@babel/core@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helpers': 7.29.2
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.29.1':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-compilation-targets@7.28.6':
-    dependencies:
-      '@babel/compat-data': 7.29.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-module-imports@7.28.6':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-plugin-utils@7.28.6': {}
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.29.2':
-    dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-
   '@babel/parser@7.29.2':
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/runtime@7.29.2': {}
 
-  '@babel/template@7.28.6':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-
-  '@babel/traverse@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -4224,164 +2336,42 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
-  '@braintree/sanitize-url@7.1.2': {}
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
 
-  '@bufbuild/protobuf@2.11.0': {}
+  '@csstools/color-helpers@6.0.2': {}
 
-  '@chevrotain/cst-dts-gen@11.1.2':
+  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
-      '@chevrotain/gast': 11.1.2
-      '@chevrotain/types': 11.1.2
-      lodash-es: 4.17.23
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
 
-  '@chevrotain/gast@11.1.2':
+  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
-      '@chevrotain/types': 11.1.2
-      lodash-es: 4.17.23
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
 
-  '@chevrotain/regexp-to-ast@11.1.2': {}
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
 
-  '@chevrotain/types@11.1.2': {}
+  '@csstools/css-syntax-patches-for-csstree@1.1.2(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
 
-  '@chevrotain/utils@11.1.2': {}
+  '@csstools/css-tokenizer@4.0.0': {}
 
-  '@copilotkit/a2ui-renderer@1.54.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)':
-    dependencies:
-      '@a2ui/lit': 0.8.3(signal-polyfill@0.2.2)
-      clsx: 2.1.1
-      markdown-it: 14.1.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - signal-polyfill
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
 
-  '@copilotkit/react-core@1.54.0(@ag-ui/core@0.0.47)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql@16.13.1)(micromark-util-types@2.0.2)(micromark@4.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)(zod@4.3.6)':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@copilotkit/runtime-client-gql': 1.54.0(@ag-ui/core@0.0.47)(graphql@16.13.1)(react@19.2.4)
-      '@copilotkit/shared': 1.54.0(@ag-ui/core@0.0.47)
-      '@copilotkitnext/core': 1.54.0(zod@4.3.6)
-      '@copilotkitnext/react': 1.54.0(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(micromark-util-types@2.0.2)(micromark@4.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)
-      '@scarf/scarf': 1.4.0
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-markdown: 8.0.7(@types/react@19.2.14)(react@19.2.4)
-      untruncate-json: 0.0.1
-      zod: 4.3.6
-    transitivePeerDependencies:
-      - '@ag-ui/core'
-      - '@types/mdast'
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - graphql
-      - micromark
-      - micromark-util-types
-      - signal-polyfill
-      - supports-color
+  '@esbuild/aix-ppc64@0.27.4':
+    optional: true
 
-  '@copilotkit/runtime-client-gql@1.54.0(@ag-ui/core@0.0.47)(graphql@16.13.1)(react@19.2.4)':
-    dependencies:
-      '@copilotkit/shared': 1.54.0(@ag-ui/core@0.0.47)
-      '@urql/core': 5.2.0(graphql@16.13.1)
-      react: 19.2.4
-      untruncate-json: 0.0.1
-      urql: 4.2.2(@urql/core@5.2.0(graphql@16.13.1))(react@19.2.4)
-    transitivePeerDependencies:
-      - '@ag-ui/core'
-      - encoding
-      - graphql
-
-  '@copilotkit/shared@1.54.0(@ag-ui/core@0.0.47)':
-    dependencies:
-      '@ag-ui/core': 0.0.47
-      '@segment/analytics-node': 2.3.0
-      chalk: 4.1.2
-      graphql: 16.13.1
-      uuid: 10.0.0
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - encoding
-
-  '@copilotkitnext/core@1.54.0(zod@3.25.76)':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@copilotkitnext/shared': 1.54.0
-      phoenix: 1.8.5
-      rxjs: 7.8.1
-      zod-to-json-schema: 3.25.1(zod@3.25.76)
-    transitivePeerDependencies:
-      - zod
-
-  '@copilotkitnext/core@1.54.0(zod@4.3.6)':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@copilotkitnext/shared': 1.54.0
-      phoenix: 1.8.5
-      rxjs: 7.8.1
-      zod-to-json-schema: 3.25.1(zod@4.3.6)
-    transitivePeerDependencies:
-      - zod
-
-  '@copilotkitnext/react@1.54.0(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(micromark-util-types@2.0.2)(micromark@4.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@ag-ui/core': 0.0.47
-      '@copilotkit/a2ui-renderer': 1.54.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(signal-polyfill@0.2.2)
-      '@copilotkitnext/core': 1.54.0(zod@3.25.76)
-      '@copilotkitnext/shared': 1.54.0
-      '@copilotkitnext/web-inspector': 1.54.0(zod@3.25.76)
-      '@lit-labs/react': 2.1.3(@types/react@19.2.14)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      class-variance-authority: 0.7.1
-      clsx: 2.1.1
-      katex: 0.16.38
-      lucide-react: 0.525.0(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      streamdown: 1.6.11(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.2.4)
-      tailwind-merge: 3.5.0
-      ts-deepmerge: 7.0.3
-      tw-animate-css: 1.4.0
-      use-stick-to-bottom: 1.1.3(react@19.2.4)
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - '@types/mdast'
-      - '@types/react'
-      - '@types/react-dom'
-      - micromark
-      - micromark-util-types
-      - signal-polyfill
-      - supports-color
-
-  '@copilotkitnext/shared@1.54.0':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@standard-schema/spec': 1.1.0
-      partial-json: 0.1.7
-      uuid: 11.1.0
-
-  '@copilotkitnext/web-inspector@1.54.0(zod@3.25.76)':
-    dependencies:
-      '@ag-ui/client': 0.0.47
-      '@copilotkitnext/core': 1.54.0(zod@3.25.76)
-      lit: 3.3.2
-      lucide: 0.525.0
-      marked: 12.0.2
-    transitivePeerDependencies:
-      - zod
-
-  '@esbuild/aix-ppc64@0.25.12':
-    optional: true
-
-  '@esbuild/aix-ppc64@0.27.4':
-    optional: true
-
-  '@esbuild/android-arm64@0.25.12':
-    optional: true
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
 
   '@esbuild/android-arm64@0.27.4':
     optional: true
@@ -4576,22 +2566,7 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@floating-ui/core@1.7.5':
-    dependencies:
-      '@floating-ui/utils': 0.2.11
-
-  '@floating-ui/dom@1.7.6':
-    dependencies:
-      '@floating-ui/core': 1.7.5
-      '@floating-ui/utils': 0.2.11
-
-  '@floating-ui/react-dom@2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@floating-ui/dom': 1.7.6
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-
-  '@floating-ui/utils@0.2.11': {}
+  '@exodus/bytes@1.15.0': {}
 
   '@hono/node-server@1.19.11(hono@4.12.8)':
     dependencies:
@@ -4608,22 +2583,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify/types@2.0.0': {}
-
-  '@iconify/utils@3.1.0':
-    dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@iconify/types': 2.0.0
-      mlly: 1.8.1
-
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
-    dependencies:
-      glob: 13.0.6
-      react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
-    optionalDependencies:
-      typescript: 5.9.3
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -4643,41 +2602,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@lit-labs/react@2.1.3(@types/react@19.2.14)':
-    dependencies:
-      '@lit/react': 1.0.8(@types/react@19.2.14)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@lit-labs/signals@0.1.3':
-    dependencies:
-      lit: 3.3.2
-      signal-polyfill: 0.2.2
-
-  '@lit-labs/ssr-dom-shim@1.5.1': {}
-
-  '@lit/context@1.1.6':
-    dependencies:
-      '@lit/reactive-element': 2.1.2
-
-  '@lit/react@1.0.8(@types/react@19.2.14)':
-    dependencies:
-      '@types/react': 19.2.14
-
-  '@lit/reactive-element@2.1.2':
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.5.1
-
-  '@lukeed/csprng@1.1.0': {}
-
-  '@lukeed/uuid@2.0.1':
-    dependencies:
-      '@lukeed/csprng': 1.1.0
-
-  '@mermaid-js/parser@1.0.1':
-    dependencies:
-      langium: 4.2.1
-
   '@opentelemetry/api@1.9.0':
     optional: true
 
@@ -4699,10 +2623,10 @@ snapshots:
       - tsx
       - yaml
 
-  '@playwright/experimental-ct-react@1.58.2(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+  '@playwright/experimental-ct-svelte@1.58.2(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(svelte@5.55.1)(tsx@4.21.0)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
       '@playwright/experimental-ct-core': 1.58.2(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
-      '@vitejs/plugin-react': 4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -4713,6 +2637,7 @@ snapshots:
       - stylus
       - sugarss
       - supports-color
+      - svelte
       - terser
       - tsx
       - vite
@@ -4722,294 +2647,6 @@ snapshots:
     dependencies:
       playwright: 1.58.2
 
-  '@protobuf-ts/protoc@2.11.1': {}
-
-  '@radix-ui/primitive@1.1.3': {}
-
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      aria-hidden: 1.2.6
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
-      react: 19.2.4
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
-
-  '@radix-ui/rect@1.1.1': {}
-
-  '@rolldown/pluginutils@1.0.0-beta.27': {}
-
-  '@rollup/pluginutils@5.3.0(rollup@4.59.0)':
-    dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 4.0.3
-    optionalDependencies:
-      rollup: 4.59.0
-
   '@rollup/rollup-android-arm-eabi@4.59.0':
     optional: true
 
@@ -5085,88 +2722,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.59.0':
     optional: true
 
-  '@scarf/scarf@1.4.0': {}
-
-  '@segment/analytics-core@1.8.2':
-    dependencies:
-      '@lukeed/uuid': 2.0.1
-      '@segment/analytics-generic-utils': 1.2.0
-      dset: 3.1.4
-      tslib: 2.8.1
-
-  '@segment/analytics-generic-utils@1.2.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@segment/analytics-node@2.3.0':
-    dependencies:
-      '@lukeed/uuid': 2.0.1
-      '@segment/analytics-core': 1.8.2
-      '@segment/analytics-generic-utils': 1.2.0
-      buffer: 6.0.3
-      jose: 5.10.0
-      node-fetch: 2.7.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - encoding
-
-  '@shikijs/core@3.23.0':
-    dependencies:
-      '@shikijs/types': 3.23.0
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.5
-
-  '@shikijs/engine-javascript@3.23.0':
-    dependencies:
-      '@shikijs/types': 3.23.0
-      '@shikijs/vscode-textmate': 10.0.2
-      oniguruma-to-es: 4.3.5
-
-  '@shikijs/engine-oniguruma@3.23.0':
-    dependencies:
-      '@shikijs/types': 3.23.0
-      '@shikijs/vscode-textmate': 10.0.2
-
-  '@shikijs/langs@3.23.0':
-    dependencies:
-      '@shikijs/types': 3.23.0
-
-  '@shikijs/themes@3.23.0':
-    dependencies:
-      '@shikijs/types': 3.23.0
-
-  '@shikijs/types@3.23.0':
-    dependencies:
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-
-  '@shikijs/vscode-textmate@10.0.2': {}
-
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-a11y@10.3.0(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/builder-vite@10.3.4(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
-      '@storybook/global': 5.0.0
-      axe-core: 4.11.1
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-
-  '@storybook/addon-vitest@10.3.0(@vitest/runner@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-    optionalDependencies:
-      '@vitest/runner': 4.1.0
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
-    transitivePeerDependencies:
-      - react
-      - react-dom
-
-  '@storybook/builder-vite@10.3.0(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
-    dependencies:
-      '@storybook/csf-plugin': 10.3.0(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/csf-plugin': 10.3.4(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      storybook: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ts-dedent: 2.2.0
       vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
     transitivePeerDependencies:
@@ -5174,9 +2735,9 @@ snapshots:
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.3.0(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+  '@storybook/csf-plugin@10.3.4(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.27.4
@@ -5190,62 +2751,86 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  '@storybook/react-dom-shim@10.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
-    dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-
-  '@storybook/react-vite@10.3.0(esbuild@0.27.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+  '@storybook/svelte-vite@10.3.4(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.4(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      '@storybook/builder-vite': 10.3.0(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
-      '@storybook/react': 10.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
-      empathic: 2.0.0
+      '@storybook/builder-vite': 10.3.4(esbuild@0.27.4)(rollup@4.59.0)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@storybook/svelte': 10.3.4(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(svelte@5.55.1)
+      '@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       magic-string: 0.30.21
-      react: 19.2.4
-      react-docgen: 8.0.3
-      react-dom: 19.2.4(react@19.2.4)
-      resolve: 1.22.11
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      tsconfig-paths: 4.2.0
+      storybook: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      svelte: 5.55.1
+      svelte2tsx: 0.7.53(svelte@5.55.1)(typescript@5.9.3)
+      typescript: 5.9.3
       vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
     transitivePeerDependencies:
       - esbuild
       - rollup
-      - supports-color
-      - typescript
       - webpack
 
-  '@storybook/react@10.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+  '@storybook/svelte@10.3.4(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(svelte@5.55.1)':
     dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
-      react: 19.2.4
-      react-docgen: 8.0.3
-      react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      react-dom: 19.2.4(react@19.2.4)
-      storybook: 10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-    optionalDependencies:
-      typescript: 5.9.3
+      storybook: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      svelte: 5.55.1
+      ts-dedent: 2.2.0
+      type-fest: 2.19.0
+
+  '@sveltejs/acorn-typescript@1.0.9(acorn@8.16.0)':
+    dependencies:
+      acorn: 8.16.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.1.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      debug: 4.4.3
+      svelte: 5.55.1
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@tailwindcss/node@4.2.1':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.1
-      jiti: 2.6.1
-      lightningcss: 1.31.1
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.1
-
-  '@tailwindcss/oxide-android-arm64@4.2.1':
-    optional: true
+      '@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      obug: 2.1.1
+      svelte: 5.55.1
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
-  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+  '@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      debug: 4.4.3
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.21
+      svelte: 5.55.1
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+      vitefu: 1.1.3(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      deepmerge: 4.3.1
+      magic-string: 0.30.21
+      obug: 2.1.1
+      svelte: 5.55.1
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+      vitefu: 1.1.3(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
     optional: true
 
   '@tailwindcss/oxide-darwin-x64@4.2.1':
@@ -5300,38 +2885,6 @@ snapshots:
       tailwindcss: 4.2.1
       vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
-  '@tanstack/history@1.161.6': {}
-
-  '@tanstack/react-router@1.167.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@tanstack/history': 1.161.6
-      '@tanstack/react-store': 0.9.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@tanstack/router-core': 1.167.4
-      isbot: 5.1.36
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/react-store@0.9.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@tanstack/store': 0.9.2
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      use-sync-external-store: 1.6.0(react@19.2.4)
-
-  '@tanstack/router-core@1.167.4':
-    dependencies:
-      '@tanstack/history': 1.161.6
-      '@tanstack/store': 0.9.2
-      cookie-es: 2.0.0
-      seroval: 1.5.1
-      seroval-plugins: 1.5.1(seroval@1.5.1)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/store@0.9.2': {}
-
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -5352,15 +2905,18 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@testing-library/svelte-core@1.0.0(svelte@5.55.1)':
+    dependencies:
+      svelte: 5.55.1
+
+  '@testing-library/svelte@5.3.1(svelte@5.55.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))':
     dependencies:
-      '@babel/runtime': 7.29.2
       '@testing-library/dom': 10.4.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@testing-library/svelte-core': 1.0.0(svelte@5.55.1)
+      svelte: 5.55.1
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
@@ -5368,217 +2924,23 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
-
-  '@types/babel__generator@7.27.0':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-
-  '@types/babel__traverse@7.28.0':
-    dependencies:
-      '@babel/types': 7.29.0
-
   '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
-  '@types/d3-array@3.2.2': {}
-
-  '@types/d3-axis@3.0.6':
-    dependencies:
-      '@types/d3-selection': 3.0.11
-
-  '@types/d3-brush@3.0.6':
-    dependencies:
-      '@types/d3-selection': 3.0.11
-
-  '@types/d3-chord@3.0.6': {}
-
-  '@types/d3-color@3.1.3': {}
-
-  '@types/d3-contour@3.0.6':
-    dependencies:
-      '@types/d3-array': 3.2.2
-      '@types/geojson': 7946.0.16
-
-  '@types/d3-delaunay@6.0.4': {}
-
-  '@types/d3-dispatch@3.0.7': {}
-
-  '@types/d3-drag@3.0.7':
-    dependencies:
-      '@types/d3-selection': 3.0.11
-
-  '@types/d3-dsv@3.0.7': {}
-
-  '@types/d3-ease@3.0.2': {}
-
-  '@types/d3-fetch@3.0.7':
-    dependencies:
-      '@types/d3-dsv': 3.0.7
-
-  '@types/d3-force@3.0.10': {}
-
-  '@types/d3-format@3.0.4': {}
-
-  '@types/d3-geo@3.1.0':
-    dependencies:
-      '@types/geojson': 7946.0.16
-
-  '@types/d3-hierarchy@3.1.7': {}
-
-  '@types/d3-interpolate@3.0.4':
-    dependencies:
-      '@types/d3-color': 3.1.3
-
-  '@types/d3-path@3.1.1': {}
-
-  '@types/d3-polygon@3.0.2': {}
-
-  '@types/d3-quadtree@3.0.6': {}
-
-  '@types/d3-random@3.0.3': {}
-
-  '@types/d3-scale-chromatic@3.1.0': {}
-
-  '@types/d3-scale@4.0.9':
-    dependencies:
-      '@types/d3-time': 3.0.4
-
-  '@types/d3-selection@3.0.11': {}
-
-  '@types/d3-shape@3.1.8':
-    dependencies:
-      '@types/d3-path': 3.1.1
-
-  '@types/d3-time-format@4.0.3': {}
-
-  '@types/d3-time@3.0.4': {}
-
-  '@types/d3-timer@3.0.2': {}
-
-  '@types/d3-transition@3.0.9':
-    dependencies:
-      '@types/d3-selection': 3.0.11
-
-  '@types/d3-zoom@3.0.8':
-    dependencies:
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-selection': 3.0.11
-
-  '@types/d3@7.4.3':
-    dependencies:
-      '@types/d3-array': 3.2.2
-      '@types/d3-axis': 3.0.6
-      '@types/d3-brush': 3.0.6
-      '@types/d3-chord': 3.0.6
-      '@types/d3-color': 3.1.3
-      '@types/d3-contour': 3.0.6
-      '@types/d3-delaunay': 6.0.4
-      '@types/d3-dispatch': 3.0.7
-      '@types/d3-drag': 3.0.7
-      '@types/d3-dsv': 3.0.7
-      '@types/d3-ease': 3.0.2
-      '@types/d3-fetch': 3.0.7
-      '@types/d3-force': 3.0.10
-      '@types/d3-format': 3.0.4
-      '@types/d3-geo': 3.1.0
-      '@types/d3-hierarchy': 3.1.7
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-path': 3.1.1
-      '@types/d3-polygon': 3.0.2
-      '@types/d3-quadtree': 3.0.6
-      '@types/d3-random': 3.0.3
-      '@types/d3-scale': 4.0.9
-      '@types/d3-scale-chromatic': 3.1.0
-      '@types/d3-selection': 3.0.11
-      '@types/d3-shape': 3.1.8
-      '@types/d3-time': 3.0.4
-      '@types/d3-time-format': 4.0.3
-      '@types/d3-timer': 3.0.2
-      '@types/d3-transition': 3.0.9
-      '@types/d3-zoom': 3.0.8
-
-  '@types/debug@4.1.12':
-    dependencies:
-      '@types/ms': 2.1.0
-
   '@types/deep-eql@4.0.2': {}
 
-  '@types/doctrine@0.0.9': {}
-
-  '@types/estree-jsx@1.0.5':
-    dependencies:
-      '@types/estree': 1.0.8
-
   '@types/estree@1.0.8': {}
 
-  '@types/geojson@7946.0.16': {}
-
-  '@types/hast@2.3.10':
-    dependencies:
-      '@types/unist': 2.0.11
-
-  '@types/hast@3.0.4':
-    dependencies:
-      '@types/unist': 3.0.3
-
   '@types/json-schema@7.0.15': {}
 
-  '@types/katex@0.16.8': {}
-
-  '@types/mdast@3.0.15':
-    dependencies:
-      '@types/unist': 2.0.11
-
-  '@types/mdast@4.0.4':
-    dependencies:
-      '@types/unist': 3.0.3
-
-  '@types/ms@2.1.0': {}
-
   '@types/node@22.19.15':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/prismjs@1.26.6': {}
-
-  '@types/prop-types@15.7.15': {}
-
-  '@types/react-dom@19.2.3(@types/react@19.2.14)':
-    dependencies:
-      '@types/react': 19.2.14
-
-  '@types/react-syntax-highlighter@15.5.13':
-    dependencies:
-      '@types/react': 19.2.14
-
-  '@types/react@19.2.14':
-    dependencies:
-      csstype: 3.2.3
-
-  '@types/resolve@1.20.6': {}
-
   '@types/trusted-types@2.0.7': {}
 
-  '@types/unist@2.0.11': {}
-
-  '@types/unist@3.0.3': {}
-
-  '@types/uuid@10.0.0': {}
-
   '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/ws@8.18.1':
@@ -5676,33 +3038,7 @@ snapshots:
       '@typescript-eslint/types': 8.57.1
       eslint-visitor-keys: 5.0.1
 
-  '@ungap/structured-clone@1.3.0': {}
-
-  '@upsetjs/venn.js@2.0.0':
-    optionalDependencies:
-      d3-selection: 3.0.0
-      d3-transition: 3.0.1(d3-selection@3.0.0)
-
-  '@urql/core@5.2.0(graphql@16.13.1)':
-    dependencies:
-      '@0no-co/graphql.web': 1.2.0(graphql@16.13.1)
-      wonka: 6.3.5
-    transitivePeerDependencies:
-      - graphql
-
-  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
-      '@rolldown/pluginutils': 1.0.0-beta.27
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitest/coverage-v8@4.1.0(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))':
+  '@vitest/coverage-v8@4.1.0(vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.1.0
@@ -5714,7 +3050,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.0.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      vitest: 4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -5779,6 +3115,8 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
+  '@webcontainer/env@1.1.1': {}
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -5802,14 +3140,12 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.6:
-    dependencies:
-      tslib: 2.8.1
-
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
 
+  aria-query@5.3.1: {}
+
   aria-query@5.3.2: {}
 
   assertion-error@2.0.1: {}
@@ -5824,17 +3160,15 @@ snapshots:
       estree-walker: 3.0.3
       js-tokens: 10.0.0
 
-  axe-core@4.11.1: {}
-
-  bail@2.0.2: {}
+  axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
 
-  base64-js@1.5.1: {}
-
-  baseline-browser-mapping@2.10.8: {}
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
 
   brace-expansion@1.1.12:
     dependencies:
@@ -5845,29 +3179,12 @@ snapshots:
     dependencies:
       balanced-match: 4.0.4
 
-  browserslist@4.28.1:
-    dependencies:
-      baseline-browser-mapping: 2.10.8
-      caniuse-lite: 1.0.30001780
-      electron-to-chromium: 1.5.313
-      node-releases: 2.0.36
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
-
-  buffer@6.0.3:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001780: {}
-
-  ccount@2.0.1: {}
-
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -5883,33 +3200,11 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  character-entities-html4@2.1.0: {}
-
-  character-entities-legacy@3.0.0: {}
-
-  character-entities@2.0.2: {}
-
-  character-reference-invalid@2.0.1: {}
-
   check-error@2.1.3: {}
 
-  chevrotain-allstar@0.3.1(chevrotain@11.1.2):
-    dependencies:
-      chevrotain: 11.1.2
-      lodash-es: 4.17.23
-
-  chevrotain@11.1.2:
-    dependencies:
-      '@chevrotain/cst-dts-gen': 11.1.2
-      '@chevrotain/gast': 11.1.2
-      '@chevrotain/regexp-to-ast': 11.1.2
-      '@chevrotain/types': 11.1.2
-      '@chevrotain/utils': 11.1.2
-      lodash-es: 4.17.23
-
-  class-variance-authority@0.7.1:
+  chokidar@4.0.3:
     dependencies:
-      clsx: 2.1.1
+      readdirp: 4.1.2
 
   clsx@2.1.1: {}
 
@@ -5919,238 +3214,46 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  comma-separated-tokens@2.0.3: {}
-
-  commander@7.2.0: {}
-
-  commander@8.3.0: {}
-
-  compare-versions@6.1.1: {}
-
   concat-map@0.0.1: {}
 
-  confbox@0.1.8: {}
-
   convert-source-map@2.0.0: {}
 
-  cookie-es@2.0.0: {}
-
-  cose-base@1.0.3:
-    dependencies:
-      layout-base: 1.0.2
-
-  cose-base@2.2.0:
-    dependencies:
-      layout-base: 2.0.1
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css.escape@1.5.1: {}
-
-  csstype@3.2.3: {}
-
-  cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
-    dependencies:
-      cose-base: 1.0.3
-      cytoscape: 3.33.1
-
-  cytoscape-fcose@2.2.0(cytoscape@3.33.1):
-    dependencies:
-      cose-base: 2.2.0
-      cytoscape: 3.33.1
-
-  cytoscape@3.33.1: {}
-
-  d3-array@2.12.1:
-    dependencies:
-      internmap: 1.0.1
-
-  d3-array@3.2.4:
-    dependencies:
-      internmap: 2.0.3
-
-  d3-axis@3.0.0: {}
-
-  d3-brush@3.0.0:
-    dependencies:
-      d3-dispatch: 3.0.1
-      d3-drag: 3.0.0
-      d3-interpolate: 3.0.1
-      d3-selection: 3.0.0
-      d3-transition: 3.0.1(d3-selection@3.0.0)
-
-  d3-chord@3.0.1:
-    dependencies:
-      d3-path: 3.1.0
-
-  d3-color@3.1.0: {}
-
-  d3-contour@4.0.2:
-    dependencies:
-      d3-array: 3.2.4
-
-  d3-delaunay@6.0.4:
-    dependencies:
-      delaunator: 5.0.1
-
-  d3-dispatch@3.0.1: {}
-
-  d3-drag@3.0.0:
-    dependencies:
-      d3-dispatch: 3.0.1
-      d3-selection: 3.0.0
-
-  d3-dsv@3.0.1:
-    dependencies:
-      commander: 7.2.0
-      iconv-lite: 0.6.3
-      rw: 1.3.3
-
-  d3-ease@3.0.1: {}
-
-  d3-fetch@3.0.1:
-    dependencies:
-      d3-dsv: 3.0.1
-
-  d3-force@3.0.0:
-    dependencies:
-      d3-dispatch: 3.0.1
-      d3-quadtree: 3.0.1
-      d3-timer: 3.0.1
-
-  d3-format@3.1.2: {}
-
-  d3-geo@3.1.1:
-    dependencies:
-      d3-array: 3.2.4
-
-  d3-hierarchy@3.1.2: {}
-
-  d3-interpolate@3.0.1:
-    dependencies:
-      d3-color: 3.1.0
-
-  d3-path@1.0.9: {}
-
-  d3-path@3.1.0: {}
-
-  d3-polygon@3.0.1: {}
-
-  d3-quadtree@3.0.1: {}
-
-  d3-random@3.0.1: {}
-
-  d3-sankey@0.12.3:
-    dependencies:
-      d3-array: 2.12.1
-      d3-shape: 1.3.7
-
-  d3-scale-chromatic@3.1.0:
-    dependencies:
-      d3-color: 3.1.0
-      d3-interpolate: 3.0.1
-
-  d3-scale@4.0.2:
-    dependencies:
-      d3-array: 3.2.4
-      d3-format: 3.1.2
-      d3-interpolate: 3.0.1
-      d3-time: 3.1.0
-      d3-time-format: 4.1.0
-
-  d3-selection@3.0.0: {}
-
-  d3-shape@1.3.7:
-    dependencies:
-      d3-path: 1.0.9
-
-  d3-shape@3.2.0:
-    dependencies:
-      d3-path: 3.1.0
-
-  d3-time-format@4.1.0:
+  css-tree@3.2.1:
     dependencies:
-      d3-time: 3.1.0
-
-  d3-time@3.1.0:
-    dependencies:
-      d3-array: 3.2.4
-
-  d3-timer@3.0.1: {}
-
-  d3-transition@3.0.1(d3-selection@3.0.0):
-    dependencies:
-      d3-color: 3.1.0
-      d3-dispatch: 3.0.1
-      d3-ease: 3.0.1
-      d3-interpolate: 3.0.1
-      d3-selection: 3.0.0
-      d3-timer: 3.0.1
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
 
-  d3-zoom@3.0.0:
-    dependencies:
-      d3-dispatch: 3.0.1
-      d3-drag: 3.0.0
-      d3-interpolate: 3.0.1
-      d3-selection: 3.0.0
-      d3-transition: 3.0.1(d3-selection@3.0.0)
+  css.escape@1.5.1: {}
 
-  d3@7.9.0:
-    dependencies:
-      d3-array: 3.2.4
-      d3-axis: 3.0.0
-      d3-brush: 3.0.0
-      d3-chord: 3.0.1
-      d3-color: 3.1.0
-      d3-contour: 4.0.2
-      d3-delaunay: 6.0.4
-      d3-dispatch: 3.0.1
-      d3-drag: 3.0.0
-      d3-dsv: 3.0.1
-      d3-ease: 3.0.1
-      d3-fetch: 3.0.1
-      d3-force: 3.0.0
-      d3-format: 3.1.2
-      d3-geo: 3.1.1
-      d3-hierarchy: 3.1.2
-      d3-interpolate: 3.0.1
-      d3-path: 3.1.0
-      d3-polygon: 3.0.1
-      d3-quadtree: 3.0.1
-      d3-random: 3.0.1
-      d3-scale: 4.0.2
-      d3-scale-chromatic: 3.1.0
-      d3-selection: 3.0.0
-      d3-shape: 3.2.0
-      d3-time: 3.1.0
-      d3-time-format: 4.1.0
-      d3-timer: 3.0.1
-      d3-transition: 3.0.1(d3-selection@3.0.0)
-      d3-zoom: 3.0.0
+  cssesc@3.0.0: {}
 
-  dagre-d3-es@7.0.14:
+  data-urls@7.0.0:
     dependencies:
-      d3: 7.9.0
-      lodash-es: 4.17.23
-
-  dayjs@1.11.20: {}
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
 
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
-  decode-named-character-reference@1.3.0:
-    dependencies:
-      character-entities: 2.0.2
+  decimal.js@10.6.0: {}
+
+  dedent-js@1.0.1: {}
 
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
 
+  deepmerge@4.3.1: {}
+
   default-browser-id@5.0.1: {}
 
   default-browser@5.5.0:
@@ -6160,25 +3263,11 @@ snapshots:
 
   define-lazy-prop@3.0.0: {}
 
-  delaunator@5.0.1:
-    dependencies:
-      robust-predicates: 3.0.2
-
   dequal@2.0.3: {}
 
   detect-libc@2.1.2: {}
 
-  detect-node-es@1.1.0: {}
-
-  devlop@1.1.0:
-    dependencies:
-      dequal: 2.0.3
-
-  diff@5.2.2: {}
-
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
+  devalue@5.6.4: {}
 
   dom-accessibility-api@0.5.16: {}
 
@@ -6188,19 +3277,11 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
-  dset@3.1.4: {}
-
-  electron-to-chromium@1.5.313: {}
-
-  empathic@2.0.0: {}
-
   enhanced-resolve@5.20.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
-  entities@4.5.0: {}
-
   entities@6.0.1: {}
 
   entities@7.0.1: {}
@@ -6265,19 +3346,25 @@ snapshots:
       '@esbuild/win32-ia32': 0.27.4
       '@esbuild/win32-x64': 0.27.4
 
-  escalade@3.2.0: {}
-
   escape-string-regexp@4.0.0: {}
 
-  escape-string-regexp@5.0.0: {}
-
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@2.6.1)):
-    dependencies:
-      eslint: 9.39.4(jiti@2.6.1)
-
-  eslint-plugin-react-refresh@0.4.26(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-svelte@3.17.0(eslint@9.39.4(jiti@2.6.1))(svelte@5.55.1):
     dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
+      '@jridgewell/sourcemap-codec': 1.5.5
       eslint: 9.39.4(jiti@2.6.1)
+      esutils: 2.0.3
+      globals: 16.5.0
+      known-css-properties: 0.37.0
+      postcss: 8.5.8
+      postcss-load-config: 3.1.4(postcss@8.5.8)
+      postcss-safe-parser: 7.0.1(postcss@8.5.8)
+      semver: 7.7.4
+      svelte-eslint-parser: 1.6.0(svelte@5.55.1)
+    optionalDependencies:
+      svelte: 5.55.1
+    transitivePeerDependencies:
+      - ts-node
 
   eslint-scope@8.4.0:
     dependencies:
@@ -6331,6 +3418,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@10.4.0:
     dependencies:
       acorn: 8.16.0
@@ -6343,16 +3432,17 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@2.2.4:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@typescript-eslint/types': 8.57.1
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
 
   estraverse@5.3.0: {}
 
-  estree-util-is-identifier-name@3.0.0: {}
-
-  estree-walker@2.0.2: {}
-
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -6361,20 +3451,12 @@ snapshots:
 
   expect-type@1.3.0: {}
 
-  extend@3.0.2: {}
-
   fast-deep-equal@3.1.3: {}
 
-  fast-json-patch@3.1.1: {}
-
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
 
-  fault@1.0.4:
-    dependencies:
-      format: 0.2.2
-
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
@@ -6395,22 +3477,12 @@ snapshots:
 
   flatted@3.4.1: {}
 
-  format@0.2.2: {}
-
   fsevents@2.3.2:
     optional: true
 
   fsevents@2.3.3:
     optional: true
 
-  function-bind@1.1.2: {}
-
-  gensync@1.0.0-beta.2: {}
-
-  get-east-asian-width@1.5.0: {}
-
-  get-nonce@1.0.1: {}
-
   get-tsconfig@4.13.6:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -6419,24 +3491,16 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@13.0.6:
-    dependencies:
-      minimatch: 10.2.4
-      minipass: 7.1.3
-      path-scurry: 2.0.2
-
   globals@14.0.0: {}
 
   globals@15.15.0: {}
 
+  globals@16.5.0: {}
+
   globrex@0.1.2: {}
 
   graceful-fs@4.2.11: {}
 
-  graphql@16.13.1: {}
-
-  hachure-fill@0.5.2: {}
-
   happy-dom@20.8.4:
     dependencies:
       '@types/node': 22.19.15
@@ -6451,160 +3515,20 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
+  highlight.js@11.11.1: {}
 
-  hast-util-from-dom@5.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      hastscript: 9.0.1
-      web-namespaces: 2.0.1
-
-  hast-util-from-html-isomorphic@2.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-from-dom: 5.0.1
-      hast-util-from-html: 2.0.3
-      unist-util-remove-position: 5.0.0
-
-  hast-util-from-html@2.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      devlop: 1.1.0
-      hast-util-from-parse5: 8.0.3
-      parse5: 7.3.0
-      vfile: 6.0.3
-      vfile-message: 4.0.3
-
-  hast-util-from-parse5@8.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      devlop: 1.1.0
-      hastscript: 9.0.1
-      property-information: 7.1.0
-      vfile: 6.0.3
-      vfile-location: 5.0.3
-      web-namespaces: 2.0.1
-
-  hast-util-is-element@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-parse-selector@4.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-raw@9.1.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      '@ungap/structured-clone': 1.3.0
-      hast-util-from-parse5: 8.0.3
-      hast-util-to-parse5: 8.0.1
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
-      parse5: 7.3.0
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
-  hast-util-sanitize@5.0.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@ungap/structured-clone': 1.3.0
-      unist-util-position: 5.0.0
-
-  hast-util-to-html@9.0.5:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.4
-      zwitch: 2.0.4
+  hono@4.12.8: {}
 
-  hast-util-to-jsx-runtime@2.3.6:
+  html-encoding-sniffer@6.0.0:
     dependencies:
-      '@types/estree': 1.0.8
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      style-to-js: 1.1.21
-      unist-util-position: 5.0.0
-      vfile-message: 4.0.3
+      '@exodus/bytes': 1.15.0
     transitivePeerDependencies:
-      - supports-color
-
-  hast-util-to-parse5@8.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
-  hast-util-to-text@4.0.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      hast-util-is-element: 3.0.0
-      unist-util-find-after: 5.0.0
-
-  hast-util-whitespace@2.0.1: {}
-
-  hast-util-whitespace@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast@1.0.0: {}
-
-  hastscript@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 4.0.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-
-  highlight.js@10.7.3: {}
-
-  highlightjs-vue@1.0.0: {}
-
-  hono@4.12.8: {}
+      - '@noble/hashes'
 
   html-escaper@2.0.2: {}
 
-  html-url-attributes@3.0.1: {}
-
-  html-void-elements@3.0.0: {}
-
   husky@9.1.7: {}
 
-  iconv-lite@0.6.3:
-    dependencies:
-      safer-buffer: 2.1.2
-
-  ieee754@1.2.1: {}
-
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -6618,29 +3542,6 @@ snapshots:
 
   indent-string@4.0.0: {}
 
-  inline-style-parser@0.1.1: {}
-
-  inline-style-parser@0.2.7: {}
-
-  internmap@1.0.1: {}
-
-  internmap@2.0.3: {}
-
-  is-alphabetical@2.0.1: {}
-
-  is-alphanumerical@2.0.1:
-    dependencies:
-      is-alphabetical: 2.0.1
-      is-decimal: 2.0.1
-
-  is-buffer@2.0.5: {}
-
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
-  is-decimal@2.0.1: {}
-
   is-docker@3.0.0: {}
 
   is-extglob@2.1.1: {}
@@ -6649,22 +3550,30 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-hexadecimal@2.0.1: {}
-
   is-inside-container@1.0.0:
     dependencies:
       is-docker: 3.0.0
 
-  is-plain-obj@4.1.0: {}
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
 
   is-wsl@3.1.1:
     dependencies:
       is-inside-container: 1.0.0
 
-  isbot@5.1.36: {}
-
   isexe@2.0.0: {}
 
+  isomorphic-dompurify@3.7.1:
+    dependencies:
+      dompurify: 3.3.3
+      jsdom: 29.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+      - canvas
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -6680,8 +3589,6 @@ snapshots:
 
   jiti@2.6.1: {}
 
-  jose@5.10.0: {}
-
   js-tokens@10.0.0: {}
 
   js-tokens@4.0.0: {}
@@ -6690,7 +3597,31 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsesc@3.1.0: {}
+  jsdom@29.0.1:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.1
+      '@asamuzakjp/dom-selector': 7.0.4
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.2(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.0
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.7
+      parse5: 8.0.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.1
+      undici: 7.24.7
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
 
   json-buffer@3.0.1: {}
 
@@ -6698,31 +3629,13 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
-  json5@2.2.3: {}
-
-  katex@0.16.38:
-    dependencies:
-      commander: 8.3.0
-
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
-  khroma@2.1.0: {}
-
   kleur@4.1.5: {}
 
-  langium@4.2.1:
-    dependencies:
-      chevrotain: 11.1.2
-      chevrotain-allstar: 0.3.1(chevrotain@11.1.2)
-      vscode-languageserver: 9.0.1
-      vscode-languageserver-textdocument: 1.0.12
-      vscode-uri: 3.1.0
-
-  layout-base@1.0.2: {}
-
-  layout-base@2.0.1: {}
+  known-css-properties@0.37.0: {}
 
   levn@0.4.1:
     dependencies:
@@ -6778,63 +3691,20 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
 
-  linkify-it@5.0.0:
-    dependencies:
-      uc.micro: 2.1.0
-
-  lit-element@4.2.2:
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.5.1
-      '@lit/reactive-element': 2.1.2
-      lit-html: 3.3.2
+  lilconfig@2.1.0: {}
 
-  lit-html@3.3.2:
-    dependencies:
-      '@types/trusted-types': 2.0.7
-
-  lit@3.3.2:
-    dependencies:
-      '@lit/reactive-element': 2.1.2
-      lit-element: 4.2.2
-      lit-html: 3.3.2
+  locate-character@3.0.0: {}
 
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
-  lodash-es@4.17.23: {}
-
   lodash.merge@4.6.2: {}
 
-  longest-streak@3.1.0: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
   loupe@3.2.1: {}
 
-  lowlight@1.20.0:
-    dependencies:
-      fault: 1.0.4
-      highlight.js: 10.7.3
-
   lru-cache@11.2.7: {}
 
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
-  lucide-react@0.525.0(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-
-  lucide-react@0.542.0(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-
-  lucide@0.525.0: {}
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -6851,615 +3721,9 @@ snapshots:
     dependencies:
       semver: 7.7.4
 
-  markdown-it@14.1.1:
-    dependencies:
-      argparse: 2.0.1
-      entities: 4.5.0
-      linkify-it: 5.0.0
-      mdurl: 2.0.0
-      punycode.js: 2.3.1
-      uc.micro: 2.1.0
-
-  markdown-table@3.0.4: {}
-
-  marked@12.0.2: {}
-
-  marked@16.4.2: {}
-
-  mdast-util-definitions@5.1.2:
-    dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.11
-      unist-util-visit: 4.1.2
-
-  mdast-util-find-and-replace@3.0.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      escape-string-regexp: 5.0.0
-      unist-util-is: 6.0.1
-      unist-util-visit-parents: 6.0.2
-
-  mdast-util-from-markdown@1.3.1:
-    dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.11
-      decode-named-character-reference: 1.3.0
-      mdast-util-to-string: 3.2.0
-      micromark: 3.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-decode-string: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      unist-util-stringify-position: 3.0.3
-      uvu: 0.5.6
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-from-markdown@2.0.3:
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      decode-named-character-reference: 1.3.0
-      devlop: 1.1.0
-      mdast-util-to-string: 4.0.0
-      micromark: 4.0.2
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-decode-string: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      unist-util-stringify-position: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-autolink-literal@2.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      ccount: 2.0.1
-      devlop: 1.1.0
-      mdast-util-find-and-replace: 3.0.2
-      micromark-util-character: 2.1.1
-
-  mdast-util-gfm-footnote@2.1.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-      micromark-util-normalize-identifier: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-strikethrough@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-table@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      markdown-table: 3.0.4
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-task-list-item@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm@3.1.0:
-    dependencies:
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-gfm-autolink-literal: 2.0.1
-      mdast-util-gfm-footnote: 2.1.0
-      mdast-util-gfm-strikethrough: 2.0.0
-      mdast-util-gfm-table: 2.0.0
-      mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-math@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      longest-streak: 3.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-      unist-util-remove-position: 5.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdx-expression@2.0.1:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdx-jsx@3.2.0:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-      parse-entities: 4.0.2
-      stringify-entities: 4.0.4
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdxjs-esm@2.0.1:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-phrasing@4.1.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      unist-util-is: 6.0.1
-
-  mdast-util-to-hast@12.3.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-definitions: 5.1.2
-      micromark-util-sanitize-uri: 1.2.0
-      trim-lines: 3.0.1
-      unist-util-generated: 2.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
-
-  mdast-util-to-hast@13.2.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.3.0
-      devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.1
-      trim-lines: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-
-  mdast-util-to-markdown@2.1.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      longest-streak: 3.1.0
-      mdast-util-phrasing: 4.1.0
-      mdast-util-to-string: 4.0.0
-      micromark-util-classify-character: 2.0.1
-      micromark-util-decode-string: 2.0.1
-      unist-util-visit: 5.1.0
-      zwitch: 2.0.4
-
-  mdast-util-to-string@3.2.0:
-    dependencies:
-      '@types/mdast': 3.0.15
-
-  mdast-util-to-string@4.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-
-  mdurl@2.0.0: {}
-
-  mermaid@11.13.0:
-    dependencies:
-      '@braintree/sanitize-url': 7.1.2
-      '@iconify/utils': 3.1.0
-      '@mermaid-js/parser': 1.0.1
-      '@types/d3': 7.4.3
-      '@upsetjs/venn.js': 2.0.0
-      cytoscape: 3.33.1
-      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
-      cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
-      d3: 7.9.0
-      d3-sankey: 0.12.3
-      dagre-d3-es: 7.0.14
-      dayjs: 1.11.20
-      dompurify: 3.3.3
-      katex: 0.16.38
-      khroma: 2.1.0
-      lodash-es: 4.17.23
-      marked: 16.4.2
-      roughjs: 4.6.6
-      stylis: 4.3.6
-      ts-dedent: 2.2.0
-      uuid: 11.1.0
-
-  micromark-core-commonmark@1.1.0:
-    dependencies:
-      decode-named-character-reference: 1.3.0
-      micromark-factory-destination: 1.1.0
-      micromark-factory-label: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-factory-title: 1.1.0
-      micromark-factory-whitespace: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-classify-character: 1.1.0
-      micromark-util-html-tag-name: 1.2.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
-  micromark-core-commonmark@2.0.3:
-    dependencies:
-      decode-named-character-reference: 1.3.0
-      devlop: 1.1.0
-      micromark-factory-destination: 2.0.1
-      micromark-factory-label: 2.0.1
-      micromark-factory-space: 2.0.1
-      micromark-factory-title: 2.0.1
-      micromark-factory-whitespace: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-classify-character: 2.0.1
-      micromark-util-html-tag-name: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-cjk-friendly-gfm-strikethrough@1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2):
-    dependencies:
-      devlop: 1.1.0
-      get-east-asian-width: 1.5.0
-      micromark: 4.0.2
-      micromark-extension-cjk-friendly-util: 2.1.1(micromark-util-types@2.0.2)
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-symbol: 2.0.1
-    optionalDependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-cjk-friendly-util@2.1.1(micromark-util-types@2.0.2):
-    dependencies:
-      get-east-asian-width: 1.5.0
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-    optionalDependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-cjk-friendly@1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2):
-    dependencies:
-      devlop: 1.1.0
-      micromark: 4.0.2
-      micromark-extension-cjk-friendly-util: 2.1.1(micromark-util-types@2.0.2)
-      micromark-util-chunked: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-symbol: 2.0.1
-    optionalDependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-autolink-literal@2.1.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-footnote@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-strikethrough@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.1
-      micromark-util-classify-character: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-table@2.1.1:
-    dependencies:
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-tagfilter@2.0.0:
-    dependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-task-list-item@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm@3.0.0:
-    dependencies:
-      micromark-extension-gfm-autolink-literal: 2.1.0
-      micromark-extension-gfm-footnote: 2.1.0
-      micromark-extension-gfm-strikethrough: 2.1.0
-      micromark-extension-gfm-table: 2.1.1
-      micromark-extension-gfm-tagfilter: 2.0.0
-      micromark-extension-gfm-task-list-item: 2.1.0
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-math@3.1.0:
-    dependencies:
-      '@types/katex': 0.16.8
-      devlop: 1.1.0
-      katex: 0.16.38
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-destination@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-factory-destination@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-label@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
-  micromark-factory-label@2.0.1:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-space@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-types: 1.1.0
-
-  micromark-factory-space@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-title@1.1.0:
-    dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-factory-title@2.0.1:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-factory-whitespace@1.1.0:
-    dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-factory-whitespace@2.0.1:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-character@1.2.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-util-character@2.1.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-chunked@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
-  micromark-util-chunked@2.0.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-classify-character@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-util-classify-character@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-combine-extensions@1.1.0:
-    dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-types: 1.1.0
-
-  micromark-util-combine-extensions@2.0.1:
-    dependencies:
-      micromark-util-chunked: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-decode-numeric-character-reference@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
-  micromark-util-decode-numeric-character-reference@2.0.2:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-decode-string@1.1.0:
-    dependencies:
-      decode-named-character-reference: 1.3.0
-      micromark-util-character: 1.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-symbol: 1.1.0
+  marked@17.0.5: {}
 
-  micromark-util-decode-string@2.0.1:
-    dependencies:
-      decode-named-character-reference: 1.3.0
-      micromark-util-character: 2.1.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-encode@1.1.0: {}
-
-  micromark-util-encode@2.0.1: {}
-
-  micromark-util-html-tag-name@1.2.0: {}
-
-  micromark-util-html-tag-name@2.0.1: {}
-
-  micromark-util-normalize-identifier@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
-  micromark-util-normalize-identifier@2.0.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-resolve-all@1.1.0:
-    dependencies:
-      micromark-util-types: 1.1.0
-
-  micromark-util-resolve-all@2.0.1:
-    dependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-util-sanitize-uri@1.2.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-encode: 1.1.0
-      micromark-util-symbol: 1.1.0
-
-  micromark-util-sanitize-uri@2.0.1:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-encode: 2.0.1
-      micromark-util-symbol: 2.0.1
-
-  micromark-util-subtokenize@1.1.0:
-    dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
-  micromark-util-subtokenize@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-util-symbol@1.1.0: {}
-
-  micromark-util-symbol@2.0.1: {}
-
-  micromark-util-types@1.1.0: {}
-
-  micromark-util-types@2.0.2: {}
-
-  micromark@3.2.0:
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.4.3
-      decode-named-character-reference: 1.3.0
-      micromark-core-commonmark: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-combine-extensions: 1.1.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-encode: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-sanitize-uri: 1.2.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-    transitivePeerDependencies:
-      - supports-color
-
-  micromark@4.0.2:
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.4.3
-      decode-named-character-reference: 1.3.0
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-encode: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
+  mdn-data@2.27.1: {}
 
   min-indent@1.0.1: {}
 
@@ -7471,17 +3735,6 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.12
 
-  minimist@1.2.8: {}
-
-  minipass@7.1.3: {}
-
-  mlly@1.8.1:
-    dependencies:
-      acorn: 8.16.0
-      pathe: 2.0.3
-      pkg-types: 1.3.1
-      ufo: 1.6.3
-
   mri@1.2.0: {}
 
   ms@2.1.3: {}
@@ -7490,24 +3743,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  node-fetch@2.7.0:
-    dependencies:
-      whatwg-url: 5.0.0
-
-  node-releases@2.0.36: {}
-
-  object-assign@4.1.1: {}
-
   obug@2.1.1: {}
 
-  oniguruma-parser@0.12.1: {}
-
-  oniguruma-to-es@4.3.5:
-    dependencies:
-      oniguruma-parser: 0.12.1
-      regex: 6.1.0
-      regex-recursion: 6.0.2
-
   open@10.2.0:
     dependencies:
       default-browser: 5.5.0
@@ -7532,57 +3769,26 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  package-manager-detector@1.6.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
-  parse-entities@4.0.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      character-entities-legacy: 3.0.0
-      character-reference-invalid: 2.0.1
-      decode-named-character-reference: 1.3.0
-      is-alphanumerical: 2.0.1
-      is-decimal: 2.0.1
-      is-hexadecimal: 2.0.1
-
-  parse5@7.3.0:
+  parse5@8.0.0:
     dependencies:
       entities: 6.0.1
 
-  partial-json@0.1.7: {}
-
-  path-data-parser@0.1.0: {}
-
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
 
-  path-parse@1.0.7: {}
-
-  path-scurry@2.0.2:
-    dependencies:
-      lru-cache: 11.2.7
-      minipass: 7.1.3
-
   pathe@2.0.3: {}
 
   pathval@2.0.1: {}
 
-  phoenix@1.8.5: {}
-
   picocolors@1.1.1: {}
 
   picomatch@4.0.3: {}
 
-  pkg-types@1.3.1:
-    dependencies:
-      confbox: 0.1.8
-      mlly: 1.8.1
-      pathe: 2.0.3
-
   playwright-core@1.58.2: {}
 
   playwright@1.58.2:
@@ -7591,12 +3797,25 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  points-on-curve@0.2.0: {}
+  postcss-load-config@3.1.4(postcss@8.5.8):
+    dependencies:
+      lilconfig: 2.1.0
+      yaml: 1.10.3
+    optionalDependencies:
+      postcss: 8.5.8
+
+  postcss-safe-parser@7.0.1(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+
+  postcss-scss@4.0.9(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
 
-  points-on-path@0.2.1:
+  postcss-selector-parser@7.1.1:
     dependencies:
-      path-data-parser: 0.1.0
-      points-on-curve: 0.2.0
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
 
   postcss@8.5.8:
     dependencies:
@@ -7614,133 +3833,19 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  prismjs@1.30.0: {}
-
-  prop-types@15.8.1:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
-  property-information@6.5.0: {}
-
-  property-information@7.1.0: {}
-
-  punycode.js@2.3.1: {}
-
   punycode@2.3.1: {}
 
-  react-docgen-typescript@2.4.0(typescript@5.9.3):
-    dependencies:
-      typescript: 5.9.3
-
-  react-docgen@8.0.3:
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.28.0
-      '@types/doctrine': 0.0.9
-      '@types/resolve': 1.20.6
-      doctrine: 3.0.0
-      resolve: 1.22.11
-      strip-indent: 4.1.1
-    transitivePeerDependencies:
-      - supports-color
-
   react-dom@19.2.4(react@19.2.4):
     dependencies:
       react: 19.2.4
       scheduler: 0.27.0
 
-  react-is@16.13.1: {}
-
   react-is@17.0.2: {}
 
-  react-is@18.3.1: {}
-
-  react-markdown@10.1.0(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@types/react': 19.2.14
-      devlop: 1.1.0
-      hast-util-to-jsx-runtime: 2.3.6
-      html-url-attributes: 3.0.1
-      mdast-util-to-hast: 13.2.1
-      react: 19.2.4
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.2
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  react-markdown@8.0.7(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      '@types/hast': 2.3.10
-      '@types/prop-types': 15.7.15
-      '@types/react': 19.2.14
-      '@types/unist': 2.0.11
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 2.0.1
-      prop-types: 15.8.1
-      property-information: 6.5.0
-      react: 19.2.4
-      react-is: 18.3.1
-      remark-parse: 10.0.2
-      remark-rehype: 10.1.0
-      space-separated-tokens: 2.0.2
-      style-to-object: 0.4.4
-      unified: 10.1.2
-      unist-util-visit: 4.1.2
-      vfile: 5.3.7
-    transitivePeerDependencies:
-      - supports-color
-
-  react-refresh@0.17.0: {}
-
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  react-syntax-highlighter@16.1.1(react@19.2.4):
-    dependencies:
-      '@babel/runtime': 7.29.2
-      highlight.js: 10.7.3
-      highlightjs-vue: 1.0.0
-      lowlight: 1.20.0
-      prismjs: 1.30.0
-      react: 19.2.4
-      refractor: 5.0.0
-
   react@19.2.4: {}
 
+  readdirp@4.1.2: {}
+
   recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
@@ -7754,140 +3859,12 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  refractor@5.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/prismjs': 1.26.6
-      hastscript: 9.0.1
-      parse-entities: 4.0.2
-
-  regex-recursion@6.0.2:
-    dependencies:
-      regex-utilities: 2.3.0
-
-  regex-utilities@2.3.0: {}
-
-  regex@6.1.0:
-    dependencies:
-      regex-utilities: 2.3.0
-
-  rehype-harden@1.1.8:
-    dependencies:
-      unist-util-visit: 5.1.0
-
-  rehype-katex@7.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/katex': 0.16.8
-      hast-util-from-html-isomorphic: 2.0.0
-      hast-util-to-text: 4.0.2
-      katex: 0.16.38
-      unist-util-visit-parents: 6.0.2
-      vfile: 6.0.3
-
-  rehype-raw@7.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-raw: 9.1.0
-      vfile: 6.0.3
-
-  rehype-sanitize@6.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-sanitize: 5.0.2
-
-  remark-cjk-friendly-gfm-strikethrough@1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
-    dependencies:
-      micromark-extension-cjk-friendly-gfm-strikethrough: 1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2)
-      unified: 11.0.5
-    optionalDependencies:
-      '@types/mdast': 4.0.4
-    transitivePeerDependencies:
-      - micromark
-      - micromark-util-types
-
-  remark-cjk-friendly@1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
-    dependencies:
-      micromark-extension-cjk-friendly: 1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2)
-      unified: 11.0.5
-    optionalDependencies:
-      '@types/mdast': 4.0.4
-    transitivePeerDependencies:
-      - micromark
-      - micromark-util-types
-
-  remark-gfm@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-gfm: 3.1.0
-      micromark-extension-gfm: 3.0.0
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-math@6.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-math: 3.0.0
-      micromark-extension-math: 3.1.0
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-parse@10.0.2:
-    dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-from-markdown: 1.3.1
-      unified: 10.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-parse@11.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.3
-      micromark-util-types: 2.0.2
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-rehype@10.1.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-to-hast: 12.3.0
-      unified: 10.1.2
-
-  remark-rehype@11.1.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      mdast-util-to-hast: 13.2.1
-      unified: 11.0.5
-      vfile: 6.0.3
-
-  remark-stringify@11.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-to-markdown: 2.1.2
-      unified: 11.0.5
-
-  remend@1.0.1: {}
+  require-from-string@2.0.2: {}
 
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.11:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  robust-predicates@3.0.2: {}
-
   rollup@4.59.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -7919,75 +3896,39 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.59.0
       fsevents: 2.3.3
 
-  roughjs@4.6.6:
-    dependencies:
-      hachure-fill: 0.5.2
-      path-data-parser: 0.1.0
-      points-on-curve: 0.2.0
-      points-on-path: 0.2.1
-
   run-applescript@7.1.0: {}
 
-  rw@1.3.3: {}
-
-  rxjs@7.8.1:
-    dependencies:
-      tslib: 2.8.1
-
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
-  safer-buffer@2.1.2: {}
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
 
   scheduler@0.27.0: {}
 
-  semver@6.3.1: {}
+  scule@1.3.0: {}
 
   semver@7.7.4: {}
 
-  seroval-plugins@1.5.1(seroval@1.5.1):
-    dependencies:
-      seroval: 1.5.1
-
-  seroval@1.5.1: {}
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
-  shiki@3.23.0:
-    dependencies:
-      '@shikijs/core': 3.23.0
-      '@shikijs/engine-javascript': 3.23.0
-      '@shikijs/engine-oniguruma': 3.23.0
-      '@shikijs/langs': 3.23.0
-      '@shikijs/themes': 3.23.0
-      '@shikijs/types': 3.23.0
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-
   siginfo@2.0.0: {}
 
-  signal-polyfill@0.2.2: {}
-
-  signal-utils@0.21.1(signal-polyfill@0.2.2):
-    dependencies:
-      signal-polyfill: 0.2.2
-
   source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
 
-  space-separated-tokens@2.0.2: {}
-
   stackback@0.0.2: {}
 
   std-env@4.0.0: {}
 
-  storybook@10.3.0(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -7995,6 +3936,7 @@ snapshots:
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
       '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
       esbuild: 0.27.4
       open: 10.2.0
       recast: 0.23.11
@@ -8010,74 +3952,67 @@ snapshots:
       - react-dom
       - utf-8-validate
 
-  streamdown@1.6.11(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.2.4):
-    dependencies:
-      clsx: 2.1.1
-      hast: 1.0.0
-      hast-util-to-jsx-runtime: 2.3.6
-      html-url-attributes: 3.0.1
-      katex: 0.16.38
-      lucide-react: 0.542.0(react@19.2.4)
-      marked: 16.4.2
-      mermaid: 11.13.0
-      react: 19.2.4
-      rehype-harden: 1.1.8
-      rehype-katex: 7.0.1
-      rehype-raw: 7.0.0
-      rehype-sanitize: 6.0.0
-      remark-cjk-friendly: 1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
-      remark-cjk-friendly-gfm-strikethrough: 1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
-      remark-gfm: 4.0.1
-      remark-math: 6.0.0
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.2
-      remend: 1.0.1
-      shiki: 3.23.0
-      tailwind-merge: 3.5.0
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-    transitivePeerDependencies:
-      - '@types/mdast'
-      - micromark
-      - micromark-util-types
-      - supports-color
-
-  stringify-entities@4.0.4:
-    dependencies:
-      character-entities-html4: 2.1.0
-      character-entities-legacy: 3.0.0
-
-  strip-bom@3.0.0: {}
-
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
 
-  strip-indent@4.1.1: {}
-
   strip-json-comments@3.1.1: {}
 
-  style-to-js@1.1.21:
+  supports-color@7.2.0:
     dependencies:
-      style-to-object: 1.0.14
+      has-flag: 4.0.0
 
-  style-to-object@0.4.4:
+  svelte-check@4.4.6(picomatch@4.0.3)(svelte@5.55.1)(typescript@5.9.3):
     dependencies:
-      inline-style-parser: 0.1.1
+      '@jridgewell/trace-mapping': 0.3.31
+      chokidar: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.55.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - picomatch
 
-  style-to-object@1.0.14:
+  svelte-eslint-parser@1.6.0(svelte@5.55.1):
     dependencies:
-      inline-style-parser: 0.2.7
-
-  stylis@4.3.6: {}
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      postcss: 8.5.8
+      postcss-scss: 4.0.9(postcss@8.5.8)
+      postcss-selector-parser: 7.1.1
+      semver: 7.7.4
+    optionalDependencies:
+      svelte: 5.55.1
 
-  supports-color@7.2.0:
+  svelte2tsx@0.7.53(svelte@5.55.1)(typescript@5.9.3):
     dependencies:
-      has-flag: 4.0.0
+      dedent-js: 1.0.1
+      scule: 1.3.0
+      svelte: 5.55.1
+      typescript: 5.9.3
 
-  supports-preserve-symlinks-flag@1.0.0: {}
+  svelte@5.55.1:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.9(acorn@8.16.0)
+      '@types/estree': 1.0.8
+      '@types/trusted-types': 2.0.7
+      acorn: 8.16.0
+      aria-query: 5.3.1
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      devalue: 5.6.4
+      esm-env: 1.2.2
+      esrap: 2.2.4
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.21
+      zimmerframe: 1.1.4
 
-  tailwind-merge@3.5.0: {}
+  symbol-tree@3.2.4: {}
 
   tailwindcss@4.2.1: {}
 
@@ -8085,8 +4020,6 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
-  tiny-warning@1.0.3: {}
-
   tinybench@2.9.0: {}
 
   tinyexec@1.0.4: {}
@@ -8102,11 +4035,19 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
-  tr46@0.0.3: {}
+  tldts-core@7.0.27: {}
+
+  tldts@7.0.27:
+    dependencies:
+      tldts-core: 7.0.27
 
-  trim-lines@3.0.1: {}
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.0.27
 
-  trough@2.2.0: {}
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
 
   ts-api-utils@2.4.0(typescript@5.9.3):
     dependencies:
@@ -8114,18 +4055,10 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  ts-deepmerge@7.0.3: {}
-
   tsconfck@3.1.6(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
 
-  tsconfig-paths@4.2.0:
-    dependencies:
-      json5: 2.2.3
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tslib@2.8.1: {}
 
   tsx@4.21.0:
@@ -8135,12 +4068,12 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  tw-animate-css@1.4.0: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@2.19.0: {}
+
   typescript-eslint@8.57.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -8154,89 +4087,9 @@ snapshots:
 
   typescript@5.9.3: {}
 
-  uc.micro@2.1.0: {}
-
-  ufo@1.6.3: {}
-
   undici-types@6.21.0: {}
 
-  unified@10.1.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      bail: 2.0.2
-      extend: 3.0.2
-      is-buffer: 2.0.5
-      is-plain-obj: 4.1.0
-      trough: 2.2.0
-      vfile: 5.3.7
-
-  unified@11.0.5:
-    dependencies:
-      '@types/unist': 3.0.3
-      bail: 2.0.2
-      devlop: 1.1.0
-      extend: 3.0.2
-      is-plain-obj: 4.1.0
-      trough: 2.2.0
-      vfile: 6.0.3
-
-  unist-util-find-after@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.1
-
-  unist-util-generated@2.0.1: {}
-
-  unist-util-is@5.2.1:
-    dependencies:
-      '@types/unist': 2.0.11
-
-  unist-util-is@6.0.1:
-    dependencies:
-      '@types/unist': 3.0.3
-
-  unist-util-position@4.0.4:
-    dependencies:
-      '@types/unist': 2.0.11
-
-  unist-util-position@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-
-  unist-util-remove-position@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-visit: 5.1.0
-
-  unist-util-stringify-position@3.0.3:
-    dependencies:
-      '@types/unist': 2.0.11
-
-  unist-util-stringify-position@4.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-
-  unist-util-visit-parents@5.1.3:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-
-  unist-util-visit-parents@6.0.2:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.1
-
-  unist-util-visit@4.1.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
-
-  unist-util-visit@5.1.0:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.1
-      unist-util-visit-parents: 6.0.2
+  undici@7.24.7: {}
 
   unplugin@2.3.11:
     dependencies:
@@ -8245,84 +4098,15 @@ snapshots:
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
-  untruncate-json@0.0.1: {}
-
-  update-browserslist-db@1.2.3(browserslist@4.28.1):
-    dependencies:
-      browserslist: 4.28.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
-  urql@4.2.2(@urql/core@5.2.0(graphql@16.13.1))(react@19.2.4):
-    dependencies:
-      '@urql/core': 5.2.0(graphql@16.13.1)
-      react: 19.2.4
-      wonka: 6.3.5
-
-  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  use-stick-to-bottom@1.1.3(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-
   use-sync-external-store@1.6.0(react@19.2.4):
     dependencies:
       react: 19.2.4
 
-  uuid@10.0.0: {}
-
-  uuid@11.1.0: {}
-
-  uvu@0.5.6:
-    dependencies:
-      dequal: 2.0.3
-      diff: 5.2.2
-      kleur: 4.1.5
-      sade: 1.8.1
-
-  vfile-location@5.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      vfile: 6.0.3
-
-  vfile-message@3.1.4:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-stringify-position: 3.0.3
-
-  vfile-message@4.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-stringify-position: 4.0.0
-
-  vfile@5.3.7:
-    dependencies:
-      '@types/unist': 2.0.11
-      is-buffer: 2.0.5
-      unist-util-stringify-position: 3.0.3
-      vfile-message: 3.1.4
-
-  vfile@6.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      vfile-message: 4.0.3
+  util-deprecate@1.0.2: {}
 
   vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
     dependencies:
@@ -8349,7 +4133,11 @@ snapshots:
       lightningcss: 1.31.1
       tsx: 4.21.0
 
-  vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
+  vitefu@1.1.3(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+
+  vitest@4.1.0(@opentelemetry/api@1.9.0)(@types/node@22.19.15)(happy-dom@20.8.4)(jsdom@29.0.1)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
     dependencies:
       '@vitest/expect': 4.1.0
       '@vitest/mocker': 4.1.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
@@ -8375,38 +4163,29 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@types/node': 22.19.15
       happy-dom: 20.8.4
+      jsdom: 29.0.1
     transitivePeerDependencies:
       - msw
 
-  vscode-jsonrpc@8.2.0: {}
-
-  vscode-languageserver-protocol@3.17.5:
-    dependencies:
-      vscode-jsonrpc: 8.2.0
-      vscode-languageserver-types: 3.17.5
-
-  vscode-languageserver-textdocument@1.0.12: {}
-
-  vscode-languageserver-types@3.17.5: {}
-
-  vscode-languageserver@9.0.1:
+  w3c-xmlserializer@5.0.0:
     dependencies:
-      vscode-languageserver-protocol: 3.17.5
-
-  vscode-uri@3.1.0: {}
+      xml-name-validator: 5.0.0
 
-  web-namespaces@2.0.1: {}
-
-  webidl-conversions@3.0.1: {}
+  webidl-conversions@8.0.1: {}
 
   webpack-virtual-modules@0.6.2: {}
 
   whatwg-mimetype@3.0.0: {}
 
-  whatwg-url@5.0.0:
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
     dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
+      '@exodus/bytes': 1.15.0
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
 
   which@2.0.2:
     dependencies:
@@ -8417,8 +4196,6 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wonka@6.3.5: {}
-
   word-wrap@1.2.5: {}
 
   ws@8.19.0: {}
@@ -8427,20 +4204,14 @@ snapshots:
     dependencies:
       is-wsl: 3.1.1
 
-  yallist@3.1.1: {}
+  xml-name-validator@5.0.0: {}
 
-  yocto-queue@0.1.0: {}
+  xmlchars@2.2.0: {}
 
-  zod-to-json-schema@3.25.1(zod@3.25.76):
-    dependencies:
-      zod: 3.25.76
+  yaml@1.10.3: {}
 
-  zod-to-json-schema@3.25.1(zod@4.3.6):
-    dependencies:
-      zod: 4.3.6
+  yocto-queue@0.1.0: {}
 
-  zod@3.25.76: {}
+  zimmerframe@1.1.4: {}
 
   zod@4.3.6: {}
-
-  zwitch@2.0.4: {}
diff --git a/tests/ct/chat-surfaces.spec.ts b/tests/ct/chat-surfaces.spec.ts
new file mode 100644
index 0000000..ae60265
--- /dev/null
+++ b/tests/ct/chat-surfaces.spec.ts
@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/experimental-ct-svelte'
+import ChatHeader from '../../frontend/src/components/chat/ChatHeader.svelte'
+import ChatTranscript from '../../frontend/src/components/chat/ChatTranscript.svelte'
+import SessionList from '../../frontend/src/components/chat/SessionList.svelte'
+import ChatComposer from '../../frontend/src/components/chat/ChatComposer.svelte'
+
+test.describe('chat surfaces', () => {
+  test('renders header status info', async ({ mount }) => {
+    const component = await mount(ChatHeader, {
+      props: {
+        project: {
+          id: 'acp-frontend',
+          name: 'ACP Frontend',
+          path: '/home/runner/work/acp-frontend/acp-frontend',
+          status: 'available',
+        },
+        sessionId: 'session-1',
+        errorMessage: null,
+        ready: true,
+        thinking: false,
+      },
+    })
+
+    await expect(component.getByText('Ready')).toBeVisible()
+    await expect(component.getByText('ACP Frontend', { exact: true })).toBeVisible()
+  })
+
+  test('renders transcript on mobile viewport', async ({ mount }) => {
+    const component = await mount(ChatTranscript, {
+      props: {
+        activeAgentName: 'GitHub Copilot',
+        messages: [
+          { id: 'user-1', role: 'user', content: 'Please inspect the layout.' },
+          { id: 'assistant-1', role: 'assistant', content: 'The spacing looks balanced now.' },
+        ],
+        hasSession: true,
+        loading: false,
+        ready: true,
+        thinking: true,
+        errorMessage: null,
+      },
+    })
+
+    await expect(component.getByText('Thinking…')).toBeVisible()
+    await expect(component.getByText('The spacing looks balanced now.')).toBeVisible()
+  })
+
+  test('renders dense sessions and composer', async ({ mount }) => {
+    const sessionComponent = await mount(SessionList, {
+      props: {
+        agents: [{ id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' }],
+        sessions: Array.from({ length: 6 }, (_, index) => ({
+          id: `session-${index + 1}`,
+          title: `Conversation ${index + 1}`,
+          updatedAt: `2026-03-1${index + 1}T08:00:00.000Z`,
+          agentId: 'copilot',
+          source: 'live' as const,
+          project: {
+            id: 'acp-frontend',
+            name: 'ACP Frontend',
+            path: '/home/runner/work/acp-frontend/acp-frontend',
+          },
+        })),
+        activeSessionId: 'session-1',
+        creatingSession: false,
+        onCreate: () => {},
+        onSelect: () => {},
+      },
+    })
+
+    const composerComponent = await mount(ChatComposer, {
+      props: {
+        value: 'Ship the Playwright setup',
+        onChange: () => {},
+        onSubmit: () => {},
+        disabled: false,
+        canSubmit: true,
+        resumableAgents: [],
+      },
+    })
+
+    await expect(sessionComponent.getByRole('button', { name: 'New chat' })).toBeVisible()
+    await expect(composerComponent.getByRole('button', { name: 'Send' })).toBeEnabled()
+  })
+})
diff --git a/tests/ct/chat-surfaces.spec.tsx b/tests/ct/chat-surfaces.spec.tsx
deleted file mode 100644
index cea356d..0000000
--- a/tests/ct/chat-surfaces.spec.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react'
-import { ChatHeader } from '../../frontend/src/components/chat/ChatHeader.js'
-import { ChatTranscript } from '../../frontend/src/components/chat/ChatTranscript.js'
-import { SessionList } from '../../frontend/src/components/chat/SessionList.js'
-import { ChatComposer } from '../../frontend/src/components/chat/ChatComposer.js'
-
-test.describe('chat surfaces', () => {
-  test('renders header status info', async ({ mount }) => {
-    const component = await mount(
-      <div className="p-6">
-        <ChatHeader
-          renderLink={({ className, children }) => <span className={className}>{children}</span>}
-          project={{
-            id: 'acp-frontend',
-            name: 'ACP Frontend',
-            path: '/home/runner/work/acp-frontend/acp-frontend',
-            status: 'available',
-          }}
-          sessionId="session-1"
-          errorMessage={null}
-          ready
-          thinking={false}
-        />
-      </div>
-    )
-
-    await expect(component.getByText('Ready')).toBeVisible()
-    await expect(component.getByText('ACP Frontend', { exact: true })).toBeVisible()
-  })
-
-  test('renders transcript on mobile viewport', async ({ mount }) => {
-    const component = await mount(
-      <div className="p-4">
-        <ChatTranscript
-          activeAgentName="GitHub Copilot"
-          messages={[
-            { id: 'user-1', role: 'user', content: 'Please inspect the layout.' },
-            { id: 'assistant-1', role: 'assistant', content: 'The spacing looks balanced now.' },
-          ]}
-          hasSession
-          loading={false}
-          ready
-          thinking
-          errorMessage={null}
-        />
-      </div>
-    )
-
-    await expect(component.getByText('Thinking…')).toBeVisible()
-    await expect(component.getByText('The spacing looks balanced now.')).toBeVisible()
-  })
-
-  test('renders dense sessions and composer', async ({ mount }) => {
-    const component = await mount(
-      <div className="grid grid-cols-[20rem_1fr] gap-6 p-6">
-        <SessionList
-          agents={[{ id: 'copilot', name: 'GitHub Copilot', status: 'active', command: 'copilot' }]}
-          sessions={Array.from({ length: 6 }, (_, index) => ({
-            id: `session-${index + 1}`,
-            title: `Conversation ${index + 1}`,
-            updatedAt: `2026-03-1${index + 1}T08:00:00.000Z`,
-            agentId: 'copilot',
-            project: {
-              id: 'acp-frontend',
-              name: 'ACP Frontend',
-              path: '/home/runner/work/acp-frontend/acp-frontend',
-            },
-          }))}
-          activeSessionId="session-1"
-          creatingSession={false}
-          onCreate={() => {}}
-          onSelect={() => {}}
-        />
-        <div className="rounded-[2rem] border border-white/70 bg-white/80 shadow-[0_18px_60px_rgba(15,23,42,0.07)]">
-          <ChatComposer
-            value="Ship the Playwright setup"
-            onChange={() => {}}
-            onSubmit={(event) => event.preventDefault()}
-            disabled={false}
-            canSubmit
-          />
-        </div>
-      </div>
-    )
-
-    await expect(component.getByRole('button', { name: 'New' })).toBeVisible()
-    await expect(component.getByRole('button', { name: 'Send' })).toBeEnabled()
-  })
-})
diff --git a/vite.config.ts b/vite.config.ts
index 5f12191..540c50e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,28 @@
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 
 const BACKEND_PORT = process.env['PORT'] ?? '3001'
 
 export default defineConfig({
   root: 'frontend',
-  plugins: [tailwindcss(), react()],
+  plugins: [
+    tailwindcss(),
+    svelte({
+      onwarn(warning, defaultHandler) {
+        // Form fields intentionally seeded from props once — valid pattern.
+        if (warning.code === 'state_referenced_locally') return
+        defaultHandler(warning)
+      },
+    }),
+  ],
   build: {
     outDir: '../dist/frontend',
     emptyOutDir: true,
   },
   server: {
+    host: true,
+    port: 5173,
     allowedHosts: ['michael-wsl'],
     proxy: {
       '/api': {
diff --git a/vitest.config.ts b/vitest.config.ts
index c63d347..8f71c7e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,17 +1,53 @@
 import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    svelte({
+      hot: !process.env.VITEST,
+      onwarn(warning, defaultHandler) {
+        // Form fields intentionally seeded from props once — valid pattern.
+        if (warning.code === 'state_referenced_locally') return
+        defaultHandler(warning)
+      },
+    }),
+  ],
+  resolve: {
+    conditions: ['browser'],
+  },
   test: {
-    include: ['backend/src/**/*.test.ts', 'frontend/src/**/*.test.tsx', 'frontend/src/**/*.test.ts'],
     globals: true,
+    environment: 'happy-dom',
     setupFiles: ['./frontend/src/test-setup.ts'],
+    server: {
+      deps: {
+        inline: [/svelte/],
+      },
+    },
     coverage: {
       provider: 'v8',
       reporter: ['lcov', 'text'],
       include: ['backend/src/**', 'frontend/src/**'],
       exclude: ['**/*.test.*', 'frontend/src/test-setup.ts'],
     },
+    projects: [
+      {
+        // Backend project: uses Node environment, no browser conditions
+        test: {
+          name: 'backend',
+          include: ['backend/src/**/*.test.ts'],
+          globals: true,
+          environment: 'node',
+        },
+      },
+      {
+        // Frontend project: inherits root config (svelte plugin + browser conditions)
+        extends: true,
+        test: {
+          name: 'frontend',
+          include: ['frontend/src/**/*.test.ts', 'frontend/src/**/*.test.svelte.ts'],
+        },
+      },
+    ],
   },
 })