ui-svelte: add Svelte port of React UI (#487)

Trying out svelte for the UI. The port was done by Claude Code on the iOS app w/ Opus 4.5. 

---

* ui: add Svelte port of React UI

Port the React-based UI to Svelte 5 with the following changes:

- Create new ui-svelte directory with complete Svelte 5 implementation
- Use Svelte stores instead of React contexts for state management
- Implement custom ResizablePanels component to replace react-resizable-panels
- Port all pages: LogViewer, Models, Activity
- Port all components: Header, ConnectionStatus, LogPanel, ModelsPanel, etc.
- Use svelte-spa-router for client-side routing
- Same build output directory (proxy/ui_dist) and base path (/ui/)
- Tailwind CSS 4 with same theme configuration

https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP

* ui-svelte: simplify state management

- Remove redundant state syncing pattern in LogPanel and ModelsPanel
- Use store values directly with $ syntax instead of manual subscriptions
- Consolidate duplicate title sync logic in App.svelte
- Use existing syncTitleToDocument() from theme.ts

https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP

* ui-svelte: use idiomatic Svelte 5 patterns

- Use $effect for document side effects (theme, title) instead of
  store subscriptions
- Use class: directive for active nav links in Header
- Remove SSR guards (unnecessary for client-only SPA)
- Remove leaked subscription in syncThemeToDocument
- Simplify theme.ts by removing sync functions

https://claude.ai/code/session_01F3xXLYsd62gePVSFv7aboP

* ui-svelte: fix build warnings and improve accessibility

Fix Svelte build warnings and add proper accessibility support
to interactive components.

- add aria-labels to buttons for screen readers
- implement keyboard navigation for resizable separator
- suppress intentional state initialization warnings
- update Makefile to use ui-svelte build directory
- add peer:true to package-lock.json dependencies

* ui-svelte: reorganize navigation and add log view toggle

Make Models the default landing page and add view mode toggle
to the Logs page with persistent state.

- set Models as default route at /
- move Logs to /logs route
- reorder navigation: Models, Activity, Logs
- add view toggle with three modes: Panels, Proxy only, Upstream only
- fix horizontal overflow with width constraints

ui-svelte/src/routes/Activity.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { metrics } from "../stores/api";
+  import Tooltip from "../components/Tooltip.svelte";
+
+  function formatSpeed(speed: number): string {
+    return speed < 0 ? "unknown" : speed.toFixed(2) + " t/s";
+  }
+
+  function formatDuration(ms: number): string {
+    return (ms / 1000).toFixed(2) + "s";
+  }
+
+  function formatRelativeTime(timestamp: string): string {
+    const now = new Date();
+    const date = new Date(timestamp);
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    // Handle future dates by returning "just now"
+    if (diffInSeconds < 5) {
+      return "now";
+    }
+
+    if (diffInSeconds < 60) {
+      return `${diffInSeconds}s ago`;
+    }
+
+    const diffInMinutes = Math.floor(diffInSeconds / 60);
+    if (diffInMinutes < 60) {
+      return `${diffInMinutes}m ago`;
+    }
+
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) {
+      return `${diffInHours}h ago`;
+    }
+
+    return "a while ago";
+  }
+
+  let sortedMetrics = $derived([...$metrics].sort((a, b) => b.id - a.id));
+</script>
+
+<div class="p-2">
+  <h1 class="text-2xl font-bold">Activity</h1>
+
+  {#if $metrics.length === 0}
+    <div class="text-center py-8">
+      <p class="text-gray-600">No metrics data available</p>
+    </div>
+  {:else}
+    <div class="card overflow-auto">
+      <table class="min-w-full divide-y">
+        <thead class="border-gray-200 dark:border-white/10">
+          <tr class="text-left text-xs uppercase tracking-wider">
+            <th class="px-6 py-3">ID</th>
+            <th class="px-6 py-3">Time</th>
+            <th class="px-6 py-3">Model</th>
+            <th class="px-6 py-3">
+              Cached <Tooltip content="prompt tokens from cache" />
+            </th>
+            <th class="px-6 py-3">
+              Prompt <Tooltip content="new prompt tokens processed" />
+            </th>
+            <th class="px-6 py-3">Generated</th>
+            <th class="px-6 py-3">Prompt Processing</th>
+            <th class="px-6 py-3">Generation Speed</th>
+            <th class="px-6 py-3">Duration</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y">
+          {#each sortedMetrics as metric (metric.id)}
+            <tr class="whitespace-nowrap text-sm border-gray-200 dark:border-white/10">
+              <td class="px-4 py-4">{metric.id + 1}</td>
+              <td class="px-6 py-4">{formatRelativeTime(metric.timestamp)}</td>
+              <td class="px-6 py-4">{metric.model}</td>
+              <td class="px-6 py-4">{metric.cache_tokens > 0 ? metric.cache_tokens.toLocaleString() : "-"}</td>
+              <td class="px-6 py-4">{metric.input_tokens.toLocaleString()}</td>
+              <td class="px-6 py-4">{metric.output_tokens.toLocaleString()}</td>
+              <td class="px-6 py-4">{formatSpeed(metric.prompt_per_second)}</td>
+              <td class="px-6 py-4">{formatSpeed(metric.tokens_per_second)}</td>
+              <td class="px-6 py-4">{formatDuration(metric.duration_ms)}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>