feat(ui,api,admin): sveltekit admin spa, usage by day/agent/conversation/model, rate limits, memory tree, turn snapshot

ui/src/routes/+layout.svelte

@@ -1,9 +1,64 @@
 <script lang="ts">
   import "./layout.css";
+  import { ModeWatcher } from "mode-watcher";
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { base } from "$app/paths";
+  import { page } from "$app/state";
   import favicon from "$lib/assets/favicon.svg";
+  import AppSidebar from "$lib/components/app-sidebar.svelte";
+  import BottomNav from "$lib/components/bottom-nav.svelte";
+  import { Toaster } from "$lib/components/ui/sonner";
+  import * as Tooltip from "$lib/components/ui/tooltip";
+  import { gateway } from "$lib/gateway.svelte";
+  import { session } from "$lib/session.svelte";
 
   let { children } = $props();
+
+  const isLogin = $derived(page.url.pathname === `${base}/login`);
+
+  onMount(() => {
+    session.check();
+  });
+
+  $effect(() => {
+    if (!session.ready) {
+      return;
+    }
+    if (!(session.user || isLogin)) {
+      goto(`${base}/login`);
+    } else if (session.user && isLogin) {
+      goto(`${base}/`);
+    }
+  });
+
+  $effect(() => {
+    if (session.client) {
+      gateway.start();
+      return () => gateway.stop();
+    }
+  });
 </script>
 
 <svelte:head><link href={favicon} rel="icon"></svelte:head>
-{@render children()}
+
+<ModeWatcher />
+<Toaster position="bottom-right" richColors />
+
+<Tooltip.Provider delayDuration={300}>
+  {#if isLogin}
+    {@render children()}
+  {:else if session.ready && session.user}
+    <div class="flex h-dvh flex-col overflow-hidden sm:flex-row">
+      <AppSidebar />
+      <main class="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {@render children()}
+      </main>
+      <BottomNav />
+    </div>
+  {:else if session.ready && session.error}
+    <div class="flex h-dvh items-center justify-center p-6 text-sm">
+      <p class="text-destructive">{session.error}</p>
+    </div>
+  {/if}
+</Tooltip.Provider>