ui: persist playground state across route navigation (#525)

- Keep Playground component mounted when navigating away, preserving
streaming/generating state
- Add animated gradient effect on Playground nav link when activity is
in progress

ui-svelte/src/App.svelte

@@ -6,23 +6,28 @@
   import Models from "./routes/Models.svelte";
   import Activity from "./routes/Activity.svelte";
   import Playground from "./routes/Playground.svelte";
+  import PlaygroundStub from "./routes/PlaygroundStub.svelte";
   import { enableAPIEvents } from "./stores/api";
   import { initScreenWidth, isDarkMode, appTitle, connectionState } from "./stores/theme";
+  import { currentRoute } from "./stores/route";
 
   const routes = {
-    "/": Playground,
+    "/": PlaygroundStub,
     "/models": Models,
     "/logs": LogViewer,
     "/activity": Activity,
-    "*": Playground,
+    "*": PlaygroundStub,
   };
 
-  // Sync theme to document attribute
+  function handleRouteLoaded(event: { detail: { route: string | RegExp } }) {
+    const route = event.detail.route;
+    currentRoute.set(typeof route === "string" ? route : "/");
+  }
+
   $effect(() => {
     document.documentElement.setAttribute("data-theme", $isDarkMode ? "dark" : "light");
   });
 
-  // Sync title to document
   $effect(() => {
     const icon = $connectionState === "connecting" ? "\u{1F7E1}" : $connectionState === "connected" ? "\u{1F7E2}" : "\u{1F534}";
     document.title = `${icon} ${$appTitle}`;
@@ -43,6 +48,11 @@
   <Header />
 
   <main class="flex-1 overflow-auto p-4">
-    <Router {routes} />
+    <div class="h-full" class:hidden={$currentRoute !== "/"}>
+      <Playground />
+    </div>
+    <div class="h-full" class:hidden={$currentRoute === "/"}>
+      <Router {routes} on:routeLoaded={handleRouteLoaded} />
+    </div>
   </main>
 </div>