Revise project status and v0 milestone information

Updated project status and milestone details in README.

README.md

@@ -148,7 +148,7 @@ The bundled demo scenario is exactly this: [`talking-room`](./content/demo/scena
 
 ## Project Status: What `v0` Means
 
-The finish line for the first milestone is small on purpose.
+The finish line for the first milestone is small on purpose. `v0` is almost on the horizon. All assigned systems for `v0` have been implemented and tested throughout.
 
 **Currently Implemented:**
 
@@ -163,13 +163,11 @@ The finish line for the first milestone is small on purpose.
 **[The `v0` Milestone:](https://github.com/sortedcord/omnia-consolidated/milestone/1)**
 
 - [x] Two hand-authored NPCs live in one location, playable via CLI.
-- [ ] Each has buffer and vector-archive memory and recalls something said a few turns earlier. _(buffer: done; vector archive: not started)_
+- [x] Each has buffer and vector-archive memory and recalls something said a few turns earlier.
 - [x] One NPC knows a fact the other does not and, provably by testing, will not leak it.
 - [x] The Architect processes at least one non-trivial action per exchange with a visible state change.
 - [x] The whole thing persists to a SQLite file and reloads identically.
 
-**Explicitly out of scope for `v0`:** Constraint validators (beyond basic sense-checking), multi-location perception, affect-vector decay math, the Dossier, whims/simulation tiering, the delta ledger.
-
 ### A Note on Tech Debt
 
 The Architect currently trusts an LLM's judgement about reasonable consequences rather than validating every change against declarative constraints. A general constraint solver is worth building eventually, but building it before anything is playable is foundational perfectionism that produces beautiful architecture and no framework. `v0` keeps the single-call Architect on purpose.

apps/gui/package.json

@@ -19,8 +19,10 @@
     "@omnia/memory": "workspace:*",
     "@omnia/scenario": "workspace:*",
     "@omnia/spatial": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.19",
     "@radix-ui/react-separator": "^1.1.11",
     "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^17.4.2",

apps/gui/src/app/actions.ts

@@ -123,10 +123,10 @@ export async function getConfigStatus(): Promise<{
   apiKeySet: boolean;
   apiKeyPreview: string;
   model: string;
-  availableScenarios: { path: string; name: string }[];
+  availableScenarios: { path: string; name: string; description: string }[];
 }> {
   const apiKey = process.env.GOOGLE_API_KEY;
-  const scenarios: { path: string; name: string }[] = [];
+  const scenarios: { path: string; name: string; description: string }[] = [];
 
   const cwd = process.cwd();
   const candidates = [
@@ -150,6 +150,7 @@ export async function getConfigStatus(): Promise<{
           scenarios.push({
             path: `content/demo/scenarios/${file}`,
             name: content.name || file,
+            description: content.description || "",
           });
         } catch {
           /* skip invalid */

apps/gui/src/app/builder/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+export default function BuilderPage() {
+  return (
+    <div className="flex-1 overflow-y-auto w-full">
+      <div className="mx-auto max-w-[800px] px-10 py-12">
+        <h1 className="mb-6 text-headline-lg text-primary animate-fade-in">Scenario Builder</h1>
+        <div className="border border-border/30 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] min-h-[300px] flex flex-col items-center justify-center">
+          <p className="text-body-md text-muted-foreground font-mono text-center">
+            Scenario builder interface coming soon...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/gui/src/app/config/page.tsx

@@ -1,212 +1,5 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
-import {
-  getConfigStatus,
-  listProviderInstances,
-  getProviderMappings,
-  setProviderMapping,
-  getAvailableProviders,
-  regenerateEmbeddings,
-} from "@/app/play/actions";
-import type { ModelProviderInstance, ModelProviderMeta } from "@omnia/llm";
-import { ProviderInstancesConfig } from "@/components/config/ProviderInstancesConfig";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-interface ConfigStatus {
-  apiKeySet: boolean;
-  apiKeyPreview: string;
-  model: string;
-  availableScenarios: { path: string; name: string }[];
-}
+import { ConfigView } from "@/components/config/ConfigView";
 
 export default function ConfigPage() {
-  const [config, setConfig] = useState<ConfigStatus | null>(null);
-  const [instances, setInstances] = useState<ModelProviderInstance[]>([]);
-  const [mappings, setMappings] = useState<Record<string, string>>({});
-  const [availableProviders, setAvailableProviders] = useState<ModelProviderMeta[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-
-  const loadInstances = useCallback(async () => {
-    const list = await listProviderInstances();
-    setInstances(list);
-  }, []);
-
-  const loadMappings = useCallback(async () => {
-    const maps = await getProviderMappings();
-    setMappings(maps);
-  }, []);
-
-  const loadAll = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError("");
-      const status = await getConfigStatus();
-      setConfig(status);
-      await loadInstances();
-      await loadMappings();
-      const provs = await getAvailableProviders();
-      setAvailableProviders(provs);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }, [loadInstances, loadMappings]);
-
-  useEffect(() => {
-    loadAll();
-  }, [loadAll]);
-
-  const handleUpdateMapping = async (task: string, providerInstanceId: string) => {
-    if (task === "embeddings" && mappings[task] !== providerInstanceId) {
-      const confirmChange = window.confirm(
-        "Changing the embeddings provider will delete all existing embeddings and regenerate them from scratch. Are you sure you want to do this?"
-      );
-      if (!confirmChange) return;
-    }
-
-    try {
-      setLoading(true);
-      await setProviderMapping(task, providerInstanceId);
-      if (task === "embeddings") {
-        await regenerateEmbeddings(providerInstanceId);
-      }
-      await loadMappings();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="mx-auto max-w-[800px] px-10 py-12">
-      <h1 className="mb-6 text-headline-lg text-primary animate-fade-in">Configuration</h1>
-
-      {config === null && loading && <p className="text-body-md text-muted-foreground">Loading configuration...</p>}
-      {error && (
-        <div className="mb-4 border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      {config && (
-        <div className={loading ? "opacity-60 pointer-events-none transition-opacity duration-200" : "transition-opacity duration-200"}>
-          <ProviderInstancesConfig
-            instances={instances}
-            availableProviders={availableProviders}
-            mappings={mappings}
-            onChanged={async () => {
-              await loadInstances();
-              await loadMappings();
-            }}
-          />
-
-          <section className="border-b border-dotted border-border/20 mb-8 pb-8">
-            <h2 className="mb-3 text-headline-md text-foreground">Task Provider Routing</h2>
-            <p className="my-4 border border-border/20 bg-secondary px-3 py-2 text-label-sm text-foreground/80">
-              Configure which LLM Provider Key Instance should handle each
-              specific simulation task. Mappings default to the currently{" "}
-              <strong>Active</strong> instance if not specified.
-            </p>
-            <div className="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2">
-              {[
-                { key: "actor-prose", label: "Actor Prose Generation", desc: "Generates roleplay/narrative prose for Non-Player Characters.", type: "generative" },
-                { key: "llm-validator", label: "LLM Validator", desc: "Arbitrates and validates proposed actions against the world state rules.", type: "generative" },
-                { key: "intent-decoder", label: "Intent Decoder", desc: "Splits raw prose actions into structured intents (Player and NPC).", type: "generative" },
-                { key: "timedelta", label: "TimeDelta Generator", desc: "Calculates the duration of character actions to advance the game clock.", type: "generative" },
-                { key: "handoff", label: "Memory Handoff Engine", desc: "Promotes entities' working memories to the long-term Ledger via LLM summarization and pruning.", type: "generative" },
-                { key: "embeddings", label: "Text Embeddings Generator", desc: "Generates vector embeddings for long-term memory retrieval.", type: "embedding" },
-              ].map((task) => (
-                <div
-                  key={task.key}
-                  className="flex flex-col justify-between gap-3 border border-border/30 bg-card p-4 shadow-[2px_2px_0_0_var(--border)]"
-                >
-                  <div className="flex flex-col gap-1">
-                    <strong className="text-body-md text-foreground">
-                      {task.label}
-                    </strong>
-                    <span className="mt-0.5 text-xs text-muted-foreground">{task.desc}</span>
-                  </div>
-                  <Select
-                    value={mappings[task.key] || ""}
-                    onValueChange={(value) =>
-                      handleUpdateMapping(task.key, value || "")
-                    }
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="-- Use Active Key (Default) --" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="">-- Use Active Key (Default) --</SelectItem>
-                        {instances
-                          .filter((inst) => (inst.type || "generative") === task.type)
-                          .map((inst) => (
-                            <SelectItem key={inst.id} value={inst.id}>
-                              {inst.name} ({inst.providerName}){inst.isActive ? " [Active]" : ""}
-                            </SelectItem>
-                          ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </div>
-              ))}
-            </div>
-          </section>
-
-          <section className="mb-8">
-            <h2 className="mb-3 text-headline-md text-foreground">Available Scenarios</h2>
-            {config.availableScenarios.length === 0 ? (
-              <p className="mt-3 border border-accent bg-accent/25 px-3 py-2 text-label-sm text-foreground/80">
-                No scenarios found in{" "}
-                <code className="font-mono text-xs">
-                  content/demo/scenarios/
-                </code>
-                .
-              </p>
-            ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Path</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {config.availableScenarios.map((s) => (
-                    <TableRow key={s.path}>
-                      <TableCell className="text-body-md">{s.name}</TableCell>
-                      <TableCell>
-                        <code className="font-mono text-xs text-primary">
-                          {s.path}
-                        </code>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            )}
-          </section>
-        </div>
-      )}
-    </div>
-  );
+  return <ConfigView />;
 }

apps/gui/src/app/globals.css

@@ -52,6 +52,15 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
   --color-surface: var(--surface);
   --color-surface-dim: var(--surface-dim);
   --color-surface-bright: var(--surface-bright);
@@ -64,7 +73,7 @@
 
 :root {
   --radius: 0;
-  --background: #fff8f5;
+  --background: #f4e9dc;
   --foreground: #201a16;
   --card: #fcf3e8;
   --card-foreground: #201a16;
@@ -85,6 +94,15 @@
   --input: #fff8f5;
   --ring: #e58e58;
 
+  --sidebar: #fcf3e8;
+  --sidebar-foreground: #201a16;
+  --sidebar-primary: #e58e58;
+  --sidebar-primary-foreground: #201a16;
+  --sidebar-accent: #ffd966;
+  --sidebar-accent-foreground: #201a16;
+  --sidebar-border: #5c544e;
+  --sidebar-ring: #e58e58;
+
   --surface: #fff8f5;
   --surface-dim: #e4d8d0;
   --surface-bright: #fff8f5;
@@ -96,7 +114,7 @@
 }
 
 .dark {
-  --background: #201a16;
+  --background: #181310;
   --foreground: #fff8f5;
   --card: #362f2a;
   --card-foreground: #fff8f5;
@@ -117,6 +135,15 @@
   --input: #362f2a;
   --ring: #e58e58;
 
+  --sidebar: #201a16;
+  --sidebar-foreground: #fff8f5;
+  --sidebar-primary: #e58e58;
+  --sidebar-primary-foreground: #201a16;
+  --sidebar-accent: #c1a032;
+  --sidebar-accent-foreground: #201a16;
+  --sidebar-border: #877369;
+  --sidebar-ring: #e58e58;
+
   --surface: #201a16;
   --surface-dim: #362f2a;
   --surface-bright: #201a16;

apps/gui/src/app/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { Jersey_25, JetBrains_Mono, Space_Mono } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -34,37 +34,62 @@ const spaceMono = Space_Mono({
 
 const links = [
   { href: "/", label: "Home" },
-  { href: "/play", label: "Play" },
   { href: "/config", label: "Config" },
 ];
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   const pathname = usePathname();
 
+  useEffect(() => {
+    document.title = "Omnia";
+  }, []);
+
   return (
     <html lang="en">
-      <body className={`${jersey25.variable} ${jetbrainsMono.variable} ${spaceMono.variable} min-h-dvh bg-background text-foreground font-sans`}>
-        <nav className="border-b border-dotted border-border/20 bg-secondary/30">
-          <div className="mx-auto max-w-[800px] px-10 py-3 flex items-center justify-center gap-8">
-            <Link href="/" className="font-head text-headline-sm text-primary no-underline tracking-wide hover:opacity-85">
-              Omnia
-            </Link>
+      <body
+        className={`${jersey25.variable} ${jetbrainsMono.variable} ${spaceMono.variable} flex flex-col h-dvh overflow-hidden bg-background text-foreground font-sans`}
+      >
+        {!pathname?.startsWith("/play") && (
+          <video
+            className="fixed inset-0 w-full h-full object-cover pointer-events-none"
+            src="/output.webm"
+            poster="/background.png"
+            autoPlay
+            loop
+            muted
+            playsInline
+          />
+        )}
+        <nav className="border-b border-dotted border-border/20 bg-secondary/30 shrink-0">
+          <div className="mx-auto max-w-[800px] px-10 py-3 flex items-center justify-center">
             <NavigationMenu viewport={false}>
               <NavigationMenuList>
-                {links.map((link) => (
-                  <NavigationMenuItem key={link.href}>
-                    <NavigationMenuLink asChild active={pathname === link.href}>
-                      <Link href={link.href} className="text-foreground no-underline font-medium text-sm">
-                        {link.label}
-                      </Link>
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
-                ))}
+                {links.map((link) => {
+                  const isActive =
+                    pathname === link.href ||
+                    (link.href !== "/" && pathname?.startsWith(link.href));
+                  return (
+                    <NavigationMenuItem key={link.href}>
+                      <NavigationMenuLink asChild active={isActive}>
+                        <Link
+                          href={link.href}
+                          className={`text-foreground no-underline font-medium text-sm p-2 transition-all outline-none ${
+                            isActive
+                              ? "bg-primary/15 text-primary"
+                              : "hover:bg-secondary hover:text-foreground"
+                          }`}
+                        >
+                          {link.label}
+                        </Link>
+                      </NavigationMenuLink>
+                    </NavigationMenuItem>
+                  );
+                })}
               </NavigationMenuList>
             </NavigationMenu>
           </div>
         </nav>
-        {children}
+        <main className="flex-1 flex flex-col min-h-0">{children}</main>
       </body>
     </html>
   );

apps/gui/src/app/page.tsx

@@ -1,35 +1,5 @@
-import Link from "next/link";
-import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { DashboardView } from "@/components/play/DashboardView";
 
 export default function Home() {
-  return (
-    <main className="mx-auto max-w-[800px] px-10 py-12">
-      <h1 className="mb-2 text-headline-lg text-primary">Omnia GUI</h1>
-      <p className="mb-8 text-body-md text-muted-foreground">
-        Configuration and gameplay interface for the Omnia simulation engine.
-      </p>
-      <div className="flex gap-6">
-        <Link href="/play" className="flex-1 no-underline text-foreground">
-          <Card className="transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--border)] active:translate-y-0 active:shadow-[1px_1px_0_0_var(--border)]">
-            <CardHeader>
-              <CardTitle>Play</CardTitle>
-              <CardDescription>
-                Start a simulation and interact with NPCs
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-        <Link href="/config" className="flex-1 no-underline text-foreground">
-          <Card className="transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--border)] active:translate-y-0 active:shadow-[1px_1px_0_0_var(--border)]">
-            <CardHeader>
-              <CardTitle>Config</CardTitle>
-              <CardDescription>
-                Check environment, API keys, and available scenarios
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-      </div>
-    </main>
-  );
+  return <DashboardView />;
 }

apps/gui/src/app/play/page.tsx

@@ -1,5 +1,16 @@
+"use client";
+
 import { PlayView } from "@/components/play/PlayView";
+import { Suspense } from "react";
 
 export default function PlayPage() {
-  return <PlayView />;
+  return (
+    <Suspense fallback={
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin text-primary">Loading...</div>
+      </div>
+    }>
+      <PlayView />
+    </Suspense>
+  );
 }

apps/gui/src/components/config/ConfigView.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import {
+  getConfigStatus,
+  listProviderInstances,
+  getProviderMappings,
+  setProviderMapping,
+  getAvailableProviders,
+  regenerateEmbeddings,
+} from "@/app/actions";
+import type { ModelProviderInstance, ModelProviderMeta } from "@omnia/llm";
+import { ProviderInstancesConfig } from "@/components/config/ProviderInstancesConfig";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface ConfigStatus {
+  apiKeySet: boolean;
+  apiKeyPreview: string;
+  model: string;
+  availableScenarios: { path: string; name: string }[];
+}
+
+export function ConfigView() {
+  const [config, setConfig] = useState<ConfigStatus | null>(null);
+  const [instances, setInstances] = useState<ModelProviderInstance[]>([]);
+  const [mappings, setMappings] = useState<Record<string, string>>({});
+  const [availableProviders, setAvailableProviders] = useState<
+    ModelProviderMeta[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const loadInstances = useCallback(async () => {
+    const list = await listProviderInstances();
+    setInstances(list);
+  }, []);
+
+  const loadMappings = useCallback(async () => {
+    const maps = await getProviderMappings();
+    setMappings(maps);
+  }, []);
+
+  const loadAll = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const status = await getConfigStatus();
+      setConfig(status);
+      await loadInstances();
+      await loadMappings();
+      const provs = await getAvailableProviders();
+      setAvailableProviders(provs);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [loadInstances, loadMappings]);
+
+  useEffect(() => {
+    loadAll();
+  }, [loadAll]);
+
+  const handleUpdateMapping = async (
+    task: string,
+    providerInstanceId: string,
+  ) => {
+    if (task === "embeddings" && mappings[task] !== providerInstanceId) {
+      const confirmChange = window.confirm(
+        "Changing the embeddings provider will delete all existing embeddings and regenerate them from scratch. Are you sure you want to do this?",
+      );
+      if (!confirmChange) return;
+    }
+
+    try {
+      setLoading(true);
+      await setProviderMapping(task, providerInstanceId);
+      if (task === "embeddings") {
+        await regenerateEmbeddings(providerInstanceId);
+      }
+      await loadMappings();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto w-full relative">
+      <div className="relative z-10 mx-auto max-w-[800px] px-10 py-12">
+        <h1 className="mb-6 text-headline-lg text-primary animate-fade-in">
+          Configuration
+        </h1>
+        <h2 className="mb-3 text-headline-md text-foreground">
+          Manage Model Instances
+        </h2>
+        {config === null && loading && (
+          <p className="text-body-md text-muted-foreground">
+            Loading configuration...
+          </p>
+        )}
+        {error && (
+          <div className="mb-4 border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        {config && (
+          <div
+            className={
+              loading
+                ? "opacity-60 pointer-events-none transition-opacity duration-200"
+                : "transition-opacity duration-200"
+            }
+          >
+            <ProviderInstancesConfig
+              instances={instances}
+              availableProviders={availableProviders}
+              mappings={mappings}
+              onChanged={async () => {
+                await loadInstances();
+                await loadMappings();
+              }}
+            />
+
+            <section className="border-b border-dotted border-border/20 mb-8 pb-8">
+              <h2 className="mb-3 text-headline-md text-foreground">
+                Task Provider Routing
+              </h2>
+              <p className="my-4 border border-border/20 bg-secondary px-3 py-2 text-label-sm text-foreground/80">
+                Configure which LLM Provider Key Instance should handle each
+                specific simulation task. Mappings default to the currently{" "}
+                <strong>Active</strong> instance if not specified.
+              </p>
+              <div className="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2">
+                {[
+                  {
+                    key: "actor-prose",
+                    label: "Actor Prose Generation",
+                    desc: "Generates roleplay/narrative prose for Non-Player Characters.",
+                    type: "generative",
+                  },
+                  {
+                    key: "llm-validator",
+                    label: "LLM Validator",
+                    desc: "Arbitrates and validates proposed actions against the world state rules.",
+                    type: "generative",
+                  },
+                  {
+                    key: "intent-decoder",
+                    label: "Intent Decoder",
+                    desc: "Splits raw prose actions into structured intents (Player and NPC).",
+                    type: "generative",
+                  },
+                  {
+                    key: "timedelta",
+                    label: "TimeDelta Generator",
+                    desc: "Calculates the duration of character actions to advance the game clock.",
+                    type: "generative",
+                  },
+                  {
+                    key: "handoff",
+                    label: "Memory Handoff Engine",
+                    desc: "Promotes entities' working memories to the long-term Ledger via LLM summarization and pruning.",
+                    type: "generative",
+                  },
+                  {
+                    key: "embeddings",
+                    label: "Text Embeddings Generator",
+                    desc: "Generates vector embeddings for long-term memory retrieval.",
+                    type: "embedding",
+                  },
+                ].map((task) => (
+                  <div
+                    key={task.key}
+                    className="flex flex-col justify-between gap-3 border border-border/30 bg-card p-4 shadow-[2px_2px_0_0_var(--border)]"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <strong className="text-body-md text-foreground">
+                        {task.label}
+                      </strong>
+                      <span className="mt-0.5 text-xs text-muted-foreground">
+                        {task.desc}
+                      </span>
+                    </div>
+                    <Select
+                      value={mappings[task.key] || ""}
+                      onValueChange={(value) =>
+                        handleUpdateMapping(task.key, value || "")
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="-- Use Active Key (Default) --">
+                          {(() => {
+                            const inst = instances.find(
+                              (i) => i.id === mappings[task.key],
+                            );
+                            return inst
+                              ? `${inst.name} (${inst.providerName})${inst.isActive ? " [Active]" : ""}`
+                              : null;
+                          })()}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          <SelectItem value="">
+                            -- Use Active Key (Default) --
+                          </SelectItem>
+                          {instances
+                            .filter(
+                              (inst) => (inst.type || "generative") === task.type,
+                            )
+                            .map((inst) => (
+                              <SelectItem key={inst.id} value={inst.id}>
+                                {inst.name} ({inst.providerName})
+                                {inst.isActive ? " [Active]" : ""}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="mb-8">
+              <h2 className="mb-3 text-headline-md text-foreground">
+                Available Scenarios
+              </h2>
+              {config.availableScenarios.length === 0 ? (
+                <p className="mt-3 border border-accent bg-accent/25 px-3 py-2 text-label-sm text-foreground/80">
+                  No scenarios found in{" "}
+                  <code className="font-mono text-xs">
+                    content/demo/scenarios/
+                  </code>
+                  .
+                </p>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Path</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {config.availableScenarios.map((s) => (
+                      <TableRow key={s.path}>
+                        <TableCell className="text-body-md">{s.name}</TableCell>
+                        <TableCell>
+                          <code className="font-mono text-xs text-primary">
+                            {s.path}
+                          </code>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </section>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/gui/src/components/config/ProviderInstancesConfig.tsx

@@ -7,7 +7,7 @@ import {
   setActiveProviderInstance,
   regenerateEmbeddings,
   deleteProviderInstance,
-} from "@/app/play/actions";
+} from "@/app/actions";
 import type { ModelProviderInstance, ModelProviderMeta } from "@omnia/llm";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -26,7 +26,6 @@ import {
   Card,
   CardHeader,
   CardContent,
-  CardFooter,
   CardTitle,
   CardAction,
 } from "@/components/ui/card";
@@ -237,7 +236,6 @@ export function ProviderInstancesConfig({
 
   return (
     <section className="mb-8">
-      <h2 className="mb-3 text-lg">LLM Provider Instances</h2>
       {error && (
         <div className="mb-4 rounded border-2 border-red-500 bg-red-50 px-3 py-2 text-sm text-red-700">
           {error}
@@ -281,11 +279,12 @@ export function ProviderInstancesConfig({
                   >
                     <ItemContent>
                       <ItemTitle>{inst.name}</ItemTitle>
-                      <ItemDescription>
-                        {inst.providerName} ({inst.type || "generative"})
-                      </ItemDescription>
+                      <ItemDescription>{inst.providerName}</ItemDescription>
+                      <div className="flex flex-row gap-1.5">
+                        {inst.isActive && <Badge>Active</Badge>}
+                        <Badge variant="outline">{inst.type === "generative" ? "gen" : "embed"}</Badge>
+                      </div>
                     </ItemContent>
-                    {inst.isActive && <Badge>Active</Badge>}
                   </Item>
                 ))}
               </ItemGroup>
@@ -335,7 +334,7 @@ export function ProviderInstancesConfig({
                       }
                       items={[
                         {
-                          label: "Generative (Chat / Text Completion)",
+                          label: "Generative (Text Completion)",
                           value: "generative",
                         },
                         {
@@ -373,7 +372,10 @@ export function ProviderInstancesConfig({
                       <SelectTrigger className="w-full">
                         <SelectValue />
                       </SelectTrigger>
-                      <SelectContent align="end" className="min-w-[var(--anchor-width)]">
+                      <SelectContent
+                        align="end"
+                        className="min-w-[var(--anchor-width)]"
+                      >
                         <SelectGroup>
                           {availableProviders.map((p) => (
                             <SelectItem key={p.id} value={p.id}>
@@ -438,7 +440,7 @@ export function ProviderInstancesConfig({
                   </div>
                 )}
 
-                <div className="mb-4 flex flex-row items-center gap-2">
+                <div className="flex flex-row items-center gap-2">
                   <Checkbox
                     id="formActive"
                     checked={editIsActive}
@@ -448,25 +450,25 @@ export function ProviderInstancesConfig({
                     Set as Active Instance
                   </Label>
                 </div>
-              </CardContent>
 
-              <CardFooter className="justify-between">
-                <div>
-                  {selectedInstanceId !== "new" && (
-                    <Button
-                      type="button"
-                      variant="destructive"
-                      onClick={handleDelete}
-                      disabled={loading}
-                    >
-                      Delete
-                    </Button>
-                  )}
+                <div className="flex flex-row items-center justify-between gap-2">
+                  <div>
+                    {selectedInstanceId !== "new" && (
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        onClick={handleDelete}
+                        disabled={loading}
+                      >
+                        Delete
+                      </Button>
+                    )}
+                  </div>
+                  <Button type="submit" disabled={loading}>
+                    {loading ? "Saving..." : "Save"}
+                  </Button>
                 </div>
-                <Button type="submit" disabled={loading}>
-                  {loading ? "Saving..." : "Save"}
-                </Button>
-              </CardFooter>
+              </CardContent>
             </form>
           )}
         </Card>

apps/gui/src/components/play/DashboardView.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  startSimulation,
+  listSavedSimulations,
+  getConfigStatus,
+  getScenarioEntities,
+  deleteSimulation,
+  listProviderInstances,
+} from "@/app/actions";
+import type { SimSnapshot } from "@/lib/simulation-types";
+import type { ModelProviderInstance } from "@omnia/llm";
+import { Button } from "@/components/ui/button";
+import { ScenarioCard } from "@/components/play/ScenarioCard";
+import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export function DashboardView() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [loadingData, setLoadingData] = useState(true);
+  const [error, setError] = useState("");
+
+  const [savedSessions, setSavedSessions] = useState<SimSnapshot[]>([]);
+  const [scenarios, setScenarios] = useState<
+    { path: string; name: string; description: string }[]
+  >([]);
+  const [, setProviderInstances] = useState<ModelProviderInstance[]>([]);
+
+  // Modal State
+  const [scenarioForModal, setScenarioForModal] = useState<{
+    path: string;
+    name: string;
+  } | null>(null);
+  const [modalEntities, setModalEntities] = useState<
+    { id: string; name: string }[]
+  >([]);
+  const [loadingEntities, setLoadingEntities] = useState(false);
+  const [selectedEntityForModal, setSelectedEntityForModal] =
+    useState<string>("");
+
+  const loadSavedSessions = useCallback(async () => {
+    try {
+      const res = await listSavedSimulations();
+      if (res.ok) {
+        setSavedSessions(res.sessions);
+      }
+    } catch {
+      // sessions load failed, ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    async function loadAll() {
+      setLoadingData(true);
+      try {
+        const sessionsRes = await listSavedSimulations();
+        if (active && sessionsRes.ok) {
+          setSavedSessions(sessionsRes.sessions);
+        }
+      } catch {
+        // session load failed, ignore
+      }
+
+      try {
+        const configStatus = await getConfigStatus();
+        if (active) {
+          setScenarios(configStatus.availableScenarios);
+        }
+      } catch {
+        // scenarios load failed, ignore
+      }
+
+      try {
+        const providersList = await listProviderInstances();
+        if (active) {
+          setProviderInstances(providersList);
+        }
+      } catch {
+        // providers load failed, ignore
+      }
+
+      if (active) {
+        setLoadingData(false);
+      }
+    }
+    loadAll();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const handleResume = (id: string) => {
+    router.push(`/play?simId=${id}`);
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm("Are you sure you want to delete this simulation session?"))
+      return;
+    setLoading(true);
+    try {
+      const res = await deleteSimulation(id);
+      if (!res.ok) {
+        setError(res.error);
+      } else {
+        await loadSavedSessions();
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to delete session.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleScenarioClick = async (scenario: {
+    path: string;
+    name: string;
+  }) => {
+    setScenarioForModal(scenario);
+    setLoadingEntities(true);
+    setSelectedEntityForModal(""); // Reset selection to Spectator
+    try {
+      const res = await getScenarioEntities(scenario.path);
+      if (res.ok) {
+        setModalEntities(res.entities);
+      } else {
+        setModalEntities([]);
+      }
+    } catch {
+      setModalEntities([]);
+    } finally {
+      setLoadingEntities(false);
+    }
+  };
+
+  const handleStartFromModal = async () => {
+    if (!scenarioForModal) return;
+    setLoading(true);
+    setError("");
+    const targetScenario = scenarioForModal;
+    setScenarioForModal(null); // close modal
+    try {
+      const result = await startSimulation({
+        scenario: targetScenario.path,
+        playEntity: selectedEntityForModal || undefined,
+      });
+
+      if (!result.ok) {
+        setError(result.error);
+        setLoading(false);
+        return;
+      }
+
+      // Navigate to the separate play page with the newly created simulation ID
+      router.push(`/play?simId=${result.snapshot.id}`);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to start simulation.",
+      );
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto w-full relative">
+      <div className="relative z-10 mx-auto max-w-[800px] px-10 py-12">
+        <div className="animate-fade-in">
+          {/* Centered Big Logo */}
+          <div className="flex flex-col items-center justify-center mb-10 pt-4">
+            <img
+              src="/logo-shadow.png"
+              alt="Omnia Logo"
+              className="h-28 object-contain mb-3"
+            />
+          </div>
+
+          {error && (
+            <div className="mb-6 border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {/* Simulations Section */}
+          <section className="mb-10">
+            <h2 className="text-headline-lg text-primary mb-6 animate-fade-in">
+              Simulations
+            </h2>
+            {loadingData ? (
+              <div className="flex overflow-x-auto gap-6 pb-4 scrollbar-thin scrollbar-thumb-border/20">
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <div
+                    key={index}
+                    className="flex-shrink-0 w-72 border border-border/30 bg-card p-5 shadow-sm transition-all flex flex-col justify-between h-[148px]"
+                  >
+                    <div className="space-y-3">
+                      <Skeleton className="h-5 w-2/3" />
+                      <Skeleton className="h-4 w-1/2" />
+                      <Skeleton className="h-3 w-1/3" />
+                    </div>
+                    <div className="flex justify-between items-center mt-4">
+                      <Skeleton className="h-4 w-16" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : savedSessions.length === 0 ? (
+              <p className="text-sm italic text-muted-foreground">
+                No saved simulations found. Start a new one below!
+              </p>
+            ) : (
+              <div className="flex overflow-x-auto gap-6 pb-4 scrollbar-thin scrollbar-thumb-border/20">
+                {savedSessions.map((s) => (
+                  <div
+                    key={s.id}
+                    onClick={() => handleResume(s.id)}
+                    className="flex-shrink-0 w-72 border border-border/30 bg-card p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all relative group"
+                  >
+                    <div className="flex flex-col gap-1 text-sm mb-4">
+                      <strong className="text-body-md text-foreground block">
+                        {s.scenarioName}
+                      </strong>
+                      <span className="text-xs text-muted-foreground">
+                        Turn {s.turn} &middot; {s.entities.length} entities
+                        &middot; {s.status}
+                      </span>
+                      <span className="text-xs text-muted-foreground/60 font-mono">
+                        ID: {s.id.substring(0, 8)}...
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center mt-4">
+                      <span className="text-xs text-primary font-mono uppercase tracking-wider">
+                        Resume
+                      </span>
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={(e) => handleDelete(s.id, e)}
+                        disabled={loading}
+                        title="Delete Session"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          {/* Scenarios Section */}
+          <section className="mb-10">
+            <h2 className="text-headline-lg text-primary mb-6 animate-fade-in">
+              Scenarios
+            </h2>
+            {loadingData ? (
+              <div className="flex overflow-x-auto gap-6 pb-4 scrollbar-thin scrollbar-thumb-border/20">
+                <Link href="/builder" className="no-underline flex-shrink-0">
+                  <div className="w-64 border border-border/30 bg-card p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all flex flex-col justify-between h-full min-h-[148px]">
+                    <div>
+                      <strong className="text-body-md text-foreground block mb-1">
+                        Build a scenario
+                      </strong>
+                      <span className="text-xs text-muted-foreground">
+                        Create a custom simulation starting point
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 mt-4 text-xs font-mono uppercase tracking-wider text-primary">
+                      <span className="flex items-center justify-center size-5 border border-primary text-primary font-bold text-sm bg-primary/10">
+                        +
+                      </span>
+                      <span>Create New</span>
+                    </div>
+                  </div>
+                </Link>
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <div
+                    key={index}
+                    className="flex-shrink-0 w-64 border border-border/30 bg-card p-5 shadow-sm flex flex-col justify-between h-[148px]"
+                  >
+                    <div className="space-y-3">
+                      <Skeleton className="h-5 w-3/4" />
+                      <Skeleton className="h-3 w-1/2" />
+                    </div>
+                    <div className="mt-4">
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex overflow-x-auto gap-6 pb-4 scrollbar-thin scrollbar-thumb-border/20">
+                <Link href="/builder" className="no-underline flex-shrink-0">
+                  <div className="w-64 border border-primary bg-primary p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all flex flex-col justify-between h-full min-h-[148px]">
+                    <div>
+                      <strong className="text-body-md text-surface block mb-1">
+                        Build a scenario
+                      </strong>
+                      <span className="text-xs text-surface/80">
+                        Create a custom simulation starting point
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 mt-4 text-xs font-mono uppercase tracking-wider text-surface">
+                      <span className="flex items-center justify-center size-5 border border-surface text-surface font-bold text-sm bg-surface/20">
+                        +
+                      </span>
+                      <span>Create New</span>
+                    </div>
+                  </div>
+                </Link>
+                {scenarios.map((s) => (
+                  <ScenarioCard
+                    key={s.path}
+                    name={s.name}
+                    description={s.description}
+                    onClick={() => handleScenarioClick(s)}
+                  />
+                ))}
+              </div>
+            )}
+          </section>
+
+          {/* Start Scenario Selection Modal */}
+          {scenarioForModal && (
+            <Dialog
+              open={!!scenarioForModal}
+              onOpenChange={(open) => !open && setScenarioForModal(null)}
+            >
+              <DialogContent className="max-w-[400px]">
+                <DialogHeader className="border-b border-dotted border-border/20 pb-4 mb-2">
+                  <DialogTitle>Start Scenario</DialogTitle>
+                  <DialogDescription>
+                    Choose how you want to interact with{" "}
+                    <strong>{scenarioForModal.name}</strong>.
+                  </DialogDescription>
+                </DialogHeader>
+
+                {loadingEntities ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground py-4 justify-center">
+                    <Spinner />
+                    <span>Loading scenario entities...</span>
+                  </div>
+                ) : (
+                  <div className="flex flex-col gap-4 py-4">
+                    <div className="flex flex-col gap-2">
+                      <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono">
+                        Simulation Mode / Play as
+                      </label>
+                      <Select
+                        value={selectedEntityForModal}
+                        onValueChange={(val) =>
+                          setSelectedEntityForModal(val || "")
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="-- Run Fully Autonomously --" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="">
+                              -- Run Fully Autonomously --
+                            </SelectItem>
+                            {modalEntities.map((ent) => (
+                              <SelectItem key={ent.id} value={ent.id}>
+                                Play as {ent.name}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                )}
+
+                <DialogFooter className="gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => setScenarioForModal(null)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleStartFromModal}
+                    disabled={loading || loadingEntities}
+                  >
+                    {loading ? "Starting..." : "Launch"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/gui/src/components/play/PlayView.tsx

@@ -1,32 +1,26 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
-  startSimulation,
   stepSimulation,
   submitPlayerAction,
-  listSavedSimulations,
   resumeSimulation,
-  getConfigStatus,
-  getScenarioEntities,
-  deleteSimulation,
-  listProviderInstances,
-} from "@/app/play/actions";
+} from "@/app/actions";
 import type { SimSnapshot } from "@/lib/simulation-types";
-import type { ModelProviderInstance } from "@omnia/llm";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
 import { PromptModal } from "./PromptModal";
 import { cn } from "@/lib/utils";
+import { ChevronLeft } from "lucide-react";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
 
 function IntentTag({
   intent,
@@ -48,25 +42,27 @@ function IntentTag({
     outcome = intent.isValid ? " ✅" : ` ❌ (${intent.reason})`;
   }
 
-  const textToDisplay = (isSelf && intent.selfDescription)
-    ? intent.selfDescription
-    : intent.description;
+  const textToDisplay =
+    isSelf && intent.selfDescription
+      ? intent.selfDescription
+      : intent.description;
 
-  const modifiersStr = intent.modifiers && intent.modifiers.length > 0 ? (
-    <span className="italic opacity-80 text-muted-foreground ml-1">
-      ({intent.modifiers.join(", ")})
-    </span>
-  ) : null;
+  const modifiersStr =
+    intent.modifiers && intent.modifiers.length > 0 ? (
+      <span className="italic opacity-80 text-muted-foreground ml-1">
+        ({intent.modifiers.join(", ")})
+      </span>
+    ) : null;
 
   return (
     <span className="text-sm text-muted-foreground">
-      [{label}] &ldquo;{textToDisplay}&rdquo;{modifiersStr}{outcome}
+      [{label}] &ldquo;{textToDisplay}&rdquo;{modifiersStr}
+      {outcome}
       {intent.minutesToAdvance ? ` [+${intent.minutesToAdvance}min]` : ""}
     </span>
   );
 }
 
-
 function formatSimTime(isoString: string) {
   try {
     const d = new Date(isoString);
@@ -95,18 +91,21 @@ function LogEntryCard({
   const showMenu = !!(entry.rawPrompt || entry.decoderPrompt);
 
   return (
-    <div className={cn(
-      "border p-4 shadow-[2px_2px_0_0_var(--border)]",
-      isPlayerCard 
-        ? "border-primary bg-surface-container-low" 
-        : "border-border/30 bg-card"
-    )}>
+    <div
+      className={cn(
+        "border p-4 shadow-[2px_2px_0_0_var(--border)]",
+        isPlayerCard
+          ? "border-primary bg-surface-container-low"
+          : "border-border/30 bg-card",
+      )}
+    >
       <div className="flex justify-between items-center mb-2 border-b border-dotted border-border/20 pb-2">
         <div className="flex items-center gap-2">
-          <strong className="text-body-md font-bold text-foreground">{entry.entityName}</strong>
+          <strong className="text-body-md font-bold text-foreground">
+            {entry.entityName}
+          </strong>
           <span className="text-xs text-muted-foreground font-mono">
-            Turn {entry.turn} &middot;{" "}
-            {formatSimTime(entry.timestamp)}
+            Turn {entry.turn} &middot; {formatSimTime(entry.timestamp)}
           </span>
         </div>
         {showMenu && (
@@ -120,7 +119,9 @@ function LogEntryCard({
           </Button>
         )}
       </div>
-      <div className="text-body-md leading-relaxed mb-3 text-foreground/90 whitespace-pre-wrap">{entry.narrativeProse}</div>
+      <div className="text-body-md leading-relaxed mb-3 text-foreground/90 whitespace-pre-wrap">
+        {entry.narrativeProse}
+      </div>
       <div className="flex flex-col gap-1.5 mt-2 border-t border-dotted border-border/10 pt-2">
         {entry.intents.map((intent, i) => (
           <IntentTag key={i} intent={intent} isSelf={isPlayerCard} />
@@ -129,17 +130,48 @@ function LogEntryCard({
     </div>
   );
 }
+function MobileSidebarClose() {
+  const { isMobile, setOpenMobile } = useSidebar();
+  if (!isMobile) return null;
+  return (
+    <div className="flex justify-between items-center px-6 py-4 border-b border-border/10">
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono">
+        Menu
+      </span>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setOpenMobile(false)}
+        className="h-8 w-8"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
 
 export function PlayView() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const simId = searchParams.get("simId");
+
   const [snapshot, setSnapshot] = useState<SimSnapshot | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [playerInput, setPlayerInput] = useState("");
   const [error, setError] = useState("");
   const [statusText, setStatusText] = useState("");
-  const [selectedEntryForModal, setSelectedEntryForModal] = useState<SimSnapshot["log"][number] | null>(null);
+  const [selectedEntryForModal, setSelectedEntryForModal] = useState<
+    SimSnapshot["log"][number] | null
+  >(null);
+
   const logEndRef = useRef<HTMLDivElement>(null);
   const steppingRef = useRef(false);
   const pauseRequestedRef = useRef(false);
+  const snapshotRef = useRef<SimSnapshot | null>(null);
+
+  useEffect(() => {
+    snapshotRef.current = snapshot;
+  }, [snapshot]);
 
   const scrollToBottom = useCallback(() => {
     setTimeout(
@@ -152,204 +184,88 @@ export function PlayView() {
     scrollToBottom();
   }, [snapshot, scrollToBottom]);
 
-  const runSteps = useCallback(
-    async (id: string) => {
-      if (steppingRef.current) return;
-      steppingRef.current = true;
-      setLoading(true);
-      setError("");
-      pauseRequestedRef.current = false;
+  const runSteps = useCallback(async (id: string) => {
+    if (steppingRef.current) return;
+    steppingRef.current = true;
+    setLoading(true);
+    setError("");
+    pauseRequestedRef.current = false;
 
-      try {
-        let current = snapshot;
-        while (true) {
-          if (pauseRequestedRef.current) {
-            break;
-          }
-          const result = await stepSimulation({ simId: id });
-          if (!result.ok) {
-            setError(result.error);
-            break;
-          }
-          current = result.snapshot;
-          setSnapshot(current);
-
-          if (
-            current.status === "waiting_player" ||
-            current.status === "done" ||
-            current.status === "error"
-          ) {
-            break;
-          }
-
-          const entityName =
-            current.entities[current.entityIndex ?? 0]?.name || "";
-          setStatusText(
-            `Turn ${current.turn} — processing ${entityName || "next step"}...`,
-          );
+    try {
+      let current = snapshotRef.current;
+      while (true) {
+        if (pauseRequestedRef.current) {
+          break;
         }
-      } catch (err) {
-        setError(
-          err instanceof Error
-            ? err.message
-            : "Failed during simulation step.",
+        const result = await stepSimulation({ simId: id });
+        if (!result.ok) {
+          setError(result.error);
+          break;
+        }
+        current = result.snapshot;
+        setSnapshot(current);
+
+        if (
+          current.status === "waiting_player" ||
+          current.status === "done" ||
+          current.status === "error"
+        ) {
+          break;
+        }
+
+        const entityName =
+          current.entities[current.entityIndex ?? 0]?.name || "";
+        setStatusText(
+          `Turn ${current.turn} — processing ${entityName || "next step"}...`,
         );
-      } finally {
-        steppingRef.current = false;
-        setLoading(false);
-        setStatusText("");
-      }
-    },
-    [snapshot],
-  );
-
-  const [savedSessions, setSavedSessions] = useState<SimSnapshot[]>([]);
-
-  const loadSavedSessions = useCallback(async () => {
-    try {
-      const res = await listSavedSimulations();
-      if (res.ok) {
-        setSavedSessions(res.sessions);
-      }
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!snapshot) {
-      loadSavedSessions();
-    }
-  }, [snapshot, loadSavedSessions]);
-
-  const handleResume = async (id: string) => {
-    setLoading(true);
-    setError("");
-    try {
-      const res = await resumeSimulation(id);
-      if (!res.ok) {
-        setError(res.error);
-        setLoading(false);
-        return;
-      }
-      setSnapshot(res.snapshot);
-      if (res.snapshot.status === "running") {
-        await runSteps(res.snapshot.id);
-      } else {
-        setLoading(false);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to resume session.");
-      setLoading(false);
-    }
-  };
-
-  const handleDelete = async (id: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!confirm("Are you sure you want to delete this simulation session?")) return;
-    setLoading(true);
-    try {
-      const res = await deleteSimulation(id);
-      if (!res.ok) {
-        setError(res.error);
-      } else {
-        await loadSavedSessions();
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to delete session.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const [scenarios, setScenarios] = useState<{ path: string; name: string }[]>([]);
-  const [selectedScenario, setSelectedScenario] = useState("");
-  const [availableEntities, setAvailableEntities] = useState<{ id: string; name: string }[]>([]);
-  const [selectedEntity, setSelectedEntity] = useState("");
-
-  const [providerInstances, setProviderInstances] = useState<ModelProviderInstance[]>([]);
-
-  // Load scenarios and provider instances on mount
-  useEffect(() => {
-    async function loadScenariosAndProviders() {
-      try {
-        const configStatus = await getConfigStatus();
-        setScenarios(configStatus.availableScenarios);
-        if (configStatus.availableScenarios.length > 0) {
-          setSelectedScenario(configStatus.availableScenarios[0].path);
-        }
-      } catch {
-        // ignore
-      }
-      try {
-        const providersList = await listProviderInstances();
-        setProviderInstances(providersList);
-      } catch {
-        // ignore
-      }
-    }
-    loadScenariosAndProviders();
-  }, [snapshot]);
-
-  // Fetch entities when selectedScenario changes
-  useEffect(() => {
-    if (!selectedScenario) {
-      setAvailableEntities([]);
-      setSelectedEntity("");
-      return;
-    }
-    async function loadEntities() {
-      try {
-        const res = await getScenarioEntities(selectedScenario);
-        if (res.ok) {
-          setAvailableEntities(res.entities);
-          if (res.entities.length > 0) {
-            setSelectedEntity(res.entities[0].id);
-          } else {
-            setSelectedEntity("");
-          }
-        }
-      } catch {
-        // ignore
-      }
-    }
-    loadEntities();
-  }, [selectedScenario]);
-
-  const handleStart = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    try {
-      const form = new FormData(e.currentTarget);
-      const result = await startSimulation({
-        scenario: (form.get("scenario") as string) || undefined,
-        playEntity: (form.get("playEntity") as string) || undefined,
-      });
-
-      if (!result.ok) {
-        setError(result.error);
-        setLoading(false);
-        return;
-      }
-
-      setSnapshot(result.snapshot);
-
-      if (result.snapshot.status === "running") {
-        await runSteps(result.snapshot.id);
-      } else {
-        setLoading(false);
       }
     } catch (err) {
       setError(
-        err instanceof Error
-          ? err.message
-          : "Failed to start simulation.",
+        err instanceof Error ? err.message : "Failed during simulation step.",
       );
+    } finally {
+      steppingRef.current = false;
       setLoading(false);
+      setStatusText("");
     }
-  };
+  }, []);
+
+  const handleResume = useCallback(
+    async (id: string) => {
+      setLoading(true);
+      setError("");
+      try {
+        const res = await resumeSimulation(id);
+        if (!res.ok) {
+          setError(res.error);
+          setLoading(false);
+          return;
+        }
+        setSnapshot(res.snapshot);
+        const hasPlayer = res.snapshot.entities.some((e) => e.isPlayer);
+        if (res.snapshot.status === "running" && hasPlayer) {
+          await runSteps(res.snapshot.id);
+        } else {
+          setLoading(false);
+        }
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to resume session.",
+        );
+        setLoading(false);
+      }
+    },
+    [runSteps],
+  );
+
+  // Load simulation on mount
+  useEffect(() => {
+    if (!simId) {
+      router.replace("/");
+      return;
+    }
+    handleResume(simId);
+  }, [simId, handleResume, router]);
 
   const handleSubmitAction = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -378,143 +294,140 @@ export function PlayView() {
         await runSteps(result.snapshot.id);
       }
     } catch (err) {
-      setError(
-        err instanceof Error
-          ? err.message
-          : "Failed to submit action.",
-      );
+      setError(err instanceof Error ? err.message : "Failed to submit action.");
       setLoading(false);
     }
   };
 
+  const [activeTab, setActiveTab] = useState<"interact" | "manage">("interact");
+
   const statusMessage = () => {
     if (!snapshot) return null;
     if (loading && statusText) return statusText;
     switch (snapshot.status) {
       case "waiting_player":
         return `Waiting for your input as "${snapshot.waitingEntity?.name}"...`;
-      case "done":
-        return "Simulation complete.";
       case "error":
         return `Error: ${snapshot.error}`;
       default:
-        return "Simulation running...";
+        return null;
     }
   };
 
-  return (
-    <div className="mx-auto max-w-[800px] px-10 py-12">
-      <h1 className="text-headline-lg text-primary mb-6 animate-fade-in">Omnia Play</h1>
+  const getUnifiedStatus = () => {
+    if (!snapshot) return "";
+    switch (snapshot.status) {
+      case "running":
+        return loading ? "RUNNING" : "PAUSED";
+      case "waiting_player":
+        return "WAITING FOR INPUT";
+      case "done":
+        return "COMPLETE";
+      case "error":
+        return "ERROR";
+      default:
+        return (snapshot.status as string).toUpperCase();
+    }
+  };
 
-      {!snapshot && (
-        <div className="grid grid-cols-1 md:grid-cols-[1.2fr_1fr] gap-8 mt-4">
-          <div className="border border-border/30 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
-            <h2 className="text-headline-md text-foreground mb-5 pb-2 border-b border-dotted border-border/20">Start New Simulation</h2>
-            <form onSubmit={handleStart} className="flex flex-col gap-4">
-              {error && (
-                <div className="rounded border-2 border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-                  {error}
-                </div>
-              )}
-              <div className="flex flex-col gap-1">
-                <label htmlFor="scenario" className="text-sm font-medium">Scenario</label>
-                <Select
-                  value={selectedScenario}
-                  onValueChange={(val) => setSelectedScenario(val || "")}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {scenarios.map((s) => (
-                        <SelectItem key={s.path} value={s.path}>
-                          {s.name}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-1">
-                <label htmlFor="playEntity" className="text-sm font-medium">
-                  Play as (Entity)
-                </label>
-                <Select
-                  value={selectedEntity}
-                  onValueChange={(val) => setSelectedEntity(val || "")}
-                  disabled={availableEntities.length === 0}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="-- Spectator (Observer) --" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="">-- Spectator (Observer) --</SelectItem>
-                      {availableEntities.map((ent) => (
-                        <SelectItem key={ent.id} value={ent.id}>
-                          {ent.name}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
+  if (!snapshot && loading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[400px] gap-3">
+        <Spinner />
+        <span className="text-sm text-muted-foreground font-mono">
+          Initializing simulation...
+        </span>
+      </div>
+    );
+  }
 
-              <Button type="submit" disabled={loading || providerInstances.length === 0}>
-                {loading ? "Starting..." : "Start Simulation"}
-              </Button>
-            </form>
-          </div>
-
-          <div className="border border-border/30 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
-            <h2 className="text-headline-md text-foreground mb-5 pb-2 border-b border-dotted border-border/20">Resume Simulation</h2>
-            {savedSessions.length === 0 ? (
-              <p className="text-sm italic text-muted-foreground">No saved sessions found. Start a new one!</p>
-            ) : (
-              <div className="flex flex-col gap-3 max-h-[400px] overflow-y-auto pr-1">
-                {savedSessions.map((s) => (
-                  <div key={s.id} className="border border-border/30 bg-secondary/40 p-3 flex justify-between items-center gap-4 shadow-[1px_1px_0_0_var(--border)]">
-                    <div className="flex flex-col gap-0.5 text-sm">
-                      <strong className="text-sm text-foreground">{s.scenarioName}</strong>
-                      <span className="text-xs text-muted-foreground">
-                        Turn {s.turn} &middot; {s.entities.length} entities &middot; {s.status}
-                      </span>
-                      <span className="text-xs text-muted-foreground/60">
-                        Session ID: <code className="font-mono text-xs">{s.id}</code>
-                      </span>
-                    </div>
-                    <div className="flex gap-2 items-center">
-                      <Button size="sm" onClick={() => handleResume(s.id)} disabled={loading || providerInstances.length === 0}>
-                        Resume
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="destructive"
-                        onClick={(e) => handleDelete(s.id, e)}
-                        disabled={loading}
-                        title="Delete Session"
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+  if (!snapshot && error) {
+    return (
+      <div className="mx-auto max-w-[800px] px-10 py-12">
+        <div className="border border-destructive bg-destructive/10 px-4 py-3 text-sm text-destructive mb-6">
+          {error}
         </div>
-      )}
+        <Button onClick={() => router.push("/")}>Back to Dashboard</Button>
+      </div>
+    );
+  }
 
-      {snapshot && (
-        <>
-          <div className="mb-4">
-            <div className="flex justify-between items-center mb-1">
-              <h2 className="text-headline-md text-primary">{snapshot.scenarioName}</h2>
+  if (!snapshot) return null;
+
+  return (
+    <SidebarProvider>
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Sidebar Navigation */}
+        <Sidebar className="border-r border-border/30 bg-card shrink-0">
+          <SidebarContent className="flex flex-col justify-between h-full bg-card">
+            <MobileSidebarClose />
+            <div className="p-6">
+              <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono mb-4">
+                Simulation
+              </h3>
+              <div className="flex flex-col gap-2">
+                <button
+                  onClick={() => setActiveTab("interact")}
+                  className={cn(
+                    "w-full text-left px-4 py-2.5 text-sm font-medium border transition-all duration-100",
+                    activeTab === "interact"
+                      ? "border-primary bg-primary/10 text-primary shadow-[2px_2px_0_0_var(--primary)]"
+                      : "border-border/30 hover:bg-secondary text-foreground",
+                  )}
+                >
+                  Interact
+                </button>
+                <button
+                  onClick={() => setActiveTab("manage")}
+                  className={cn(
+                    "w-full text-left px-4 py-2.5 text-sm font-medium border transition-all duration-100",
+                    activeTab === "manage"
+                      ? "border-primary bg-primary/10 text-primary shadow-[2px_2px_0_0_var(--primary)]"
+                      : "border-border/30 hover:bg-secondary text-foreground",
+                  )}
+                >
+                  Manage
+                </button>
+              </div>
+            </div>
+
+            <div className="p-6 border-t border-dotted border-border/20">
+              <Button
+                variant="outline"
+                className="w-full text-xs font-mono"
+                onClick={() => {
+                  pauseRequestedRef.current = true;
+                  router.push("/");
+                }}
+              >
+                ← Back to Home
+              </Button>
+            </div>
+          </SidebarContent>
+        </Sidebar>
+
+        {/* Main Content Area */}
+        <div className="flex-1 flex flex-col h-full overflow-hidden bg-background">
+          {/* Sticky Header */}
+          <header className="sticky top-0 bg-background/95 backdrop-blur-xs border-b border-dotted border-border/20 px-8 py-5 z-10 flex flex-col gap-2 shrink-0">
+            <div className="flex justify-between items-start gap-4">
+              <div className="flex items-center gap-3">
+                <SidebarTrigger className="md:hidden" />
+                <div>
+                  <h2 className="text-headline-md text-primary font-head tracking-wide">
+                    {snapshot.scenarioName}
+                  </h2>
+                  <p className="text-sm text-muted-foreground/90 mt-1 max-w-[550px]">
+                    {snapshot.scenarioDescription}
+                  </p>
+                </div>
+              </div>
+            {/* Simulation Global Controls */}
+            <div className="flex gap-2 shrink-0">
               {snapshot.status !== "done" && snapshot.status !== "error" && (
-                <div className="flex gap-2">
-                  {snapshot.status === "running" && (
-                    loading ? (
+                <>
+                  {snapshot.status === "running" &&
+                    (loading ? (
                       <Button
                         variant="secondary"
                         size="sm"
@@ -532,106 +445,219 @@ export function PlayView() {
                       >
                         Resume
                       </Button>
-                    )
-                  )}
+                    ))}
                   <Button
                     variant="destructive"
                     size="sm"
                     onClick={() => {
-                      setSnapshot(null);
-                      setError("");
+                      pauseRequestedRef.current = true;
+                      router.push("/");
                     }}
                   >
                     Stop
                   </Button>
-                </div>
+                </>
               )}
             </div>
-            <p className="text-sm text-muted-foreground">{snapshot.scenarioDescription}</p>
-            <p className="text-sm font-medium text-primary mt-1">
+          </div>
+          <div className="flex items-center justify-between text-xs font-mono mt-1 pt-1.5 border-t border-border/10">
+            <span className="text-muted-foreground">
+              Status:{" "}
+              <span className="text-primary font-bold">
+                {getUnifiedStatus()}
+              </span>
+            </span>
+            <span className="text-muted-foreground">
+              Turn:{" "}
+              <span className="text-foreground font-bold">{snapshot.turn}</span>
+            </span>
+          </div>
+          {statusMessage() && (
+            <p className="text-xs font-medium text-primary mt-1 font-mono">
               {loading && "⏳ "}
               {statusMessage()}
             </p>
-          </div>
+          )}
+        </header>
 
-          <div className="flex flex-col gap-4 mb-6 max-h-[55vh] overflow-y-auto border border-border/20 bg-secondary/30 p-4 shadow-[inset_1px_1px_4px_rgba(0,0,0,0.05)]">
-            {(() => {
-              const playerEntity = snapshot.entities.find((e) => e.isPlayer);
-              return snapshot.log.map((entry, i) => (
-                <LogEntryCard
-                  key={i}
-                  entry={entry}
-                  onShowPrompt={setSelectedEntryForModal}
-                  isPlayerCard={entry.entityId === playerEntity?.id}
-                />
-              ));
-            })()}
-            {loading && (
-              <div className="flex items-center gap-2 text-sm italic text-muted-foreground p-2 font-mono">
-                <Spinner />
-                {statusText || "Processing..."}
+        {/* Scrollable Center Viewport */}
+        <main className="flex-1 overflow-y-auto px-8 py-6">
+          {activeTab === "interact" ? (
+            <div className="flex flex-col gap-4 max-w-[800px] mx-auto pb-12">
+              {(() => {
+                const playerEntity = snapshot.entities.find((e) => e.isPlayer);
+                return snapshot.log.map((entry, i) => (
+                  <LogEntryCard
+                    key={i}
+                    entry={entry}
+                    onShowPrompt={setSelectedEntryForModal}
+                    isPlayerCard={entry.entityId === playerEntity?.id}
+                  />
+                ));
+              })()}
+              {loading && (
+                <div className="flex items-center gap-2 text-sm italic text-muted-foreground p-2 font-mono">
+                  <Spinner />
+                  {statusText || "Processing..."}
+                </div>
+              )}
+              <div ref={logEndRef} />
+            </div>
+          ) : (
+            <div className="max-w-[800px] mx-auto space-y-6 pb-12">
+              {/* Simulation Info */}
+              <div className="border border-border/30 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
+                <h3 className="text-headline-sm text-primary mb-4 border-b border-dotted border-border/20 pb-2">
+                  Simulation Info
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-mono">
+                  <div className="flex flex-col gap-1 border-b border-border/10 pb-2">
+                    <span className="text-muted-foreground text-xs uppercase tracking-wider">
+                      Session ID
+                    </span>
+                    <span className="text-foreground font-bold break-all">
+                      {snapshot.id}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1 border-b border-border/10 pb-2">
+                    <span className="text-muted-foreground text-xs uppercase tracking-wider">
+                      Max Turns
+                    </span>
+                    <span className="text-foreground font-bold">
+                      {snapshot.maxTurns}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1 border-b border-border/10 pb-2">
+                    <span className="text-muted-foreground text-xs uppercase tracking-wider">
+                      Turn Count
+                    </span>
+                    <span className="text-foreground font-bold">
+                      {snapshot.turn}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1 border-b border-border/10 pb-2">
+                    <span className="text-muted-foreground text-xs uppercase tracking-wider">
+                      Entities Registered
+                    </span>
+                    <span className="text-foreground font-bold">
+                      {snapshot.entities.length}
+                    </span>
+                  </div>
+                </div>
               </div>
-            )}
-            <div ref={logEndRef} />
-          </div>
 
-          {snapshot.status === "waiting_player" && snapshot.waitingEntity && (
-            <div className="border border-border/30 bg-card p-4 shadow-[2px_2px_0_0_var(--border)]">
-              <details className="mb-3">
-                <summary className="cursor-pointer text-sm font-medium font-head text-primary">
-                  <strong>
-                    Your context as {snapshot.waitingEntity.name}
-                  </strong>
-                </summary>
-                <pre className="text-xs whitespace-pre-wrap bg-input border border-border/20 p-2 max-h-[200px] overflow-y-auto mt-2 font-mono">
-                  {snapshot.waitingEntity.userContext}
-                </pre>
-              </details>
-
-              <form onSubmit={handleSubmitAction} className="flex flex-col gap-2">
-                <Textarea
-                  value={playerInput}
-                  onChange={(e) => setPlayerInput(e.target.value)}
-                  placeholder="Describe what your character does, says, or thinks..."
-                  rows={3}
-                  disabled={loading}
-                />
-                <Button
-                  type="submit"
-                  disabled={loading || !playerInput.trim()}
-                >
-                  {loading ? "Processing..." : "Submit Action"}
-                </Button>
-              </form>
+              {/* Entities Involved */}
+              <div className="border border-border/30 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
+                <h3 className="text-headline-sm text-primary mb-4 border-b border-dotted border-border/20 pb-2">
+                  Entities Involved
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {snapshot.entities.map((ent) => (
+                    <div
+                      key={ent.id}
+                      className="border border-border/20 bg-secondary/20 p-4 shadow-[1px_1px_0_0_var(--border)] flex justify-between items-center"
+                    >
+                      <div>
+                        <strong className="text-sm text-foreground block font-head tracking-wide">
+                          {ent.name}
+                        </strong>
+                        <span className="text-xs text-muted-foreground font-mono block mt-1">
+                          ID: {ent.id}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {ent.isPlayer ? (
+                          <span className="bg-primary/20 text-primary border border-primary/30 px-2 py-0.5 text-xs font-mono">
+                            PLAYER
+                          </span>
+                        ) : (
+                          <span className="bg-secondary/60 text-muted-foreground border border-border/20 px-2 py-0.5 text-xs font-mono">
+                            NPC
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
           )}
+        </main>
 
-          {(snapshot.status === "done" || snapshot.status === "error") && (
-            <Button
-              onClick={() => {
-                setSnapshot(null);
-                setError("");
-              }}
-              className="mt-4"
-            >
-              {snapshot.status === "error" ? "Try Again" : "New Simulation"}
-            </Button>
-          )}
+        {/* Sticky Chat / Interaction Input Footer */}
+        {activeTab === "interact" && (
+          <footer className="sticky bottom-0 bg-background/95 backdrop-blur-xs border-t border-dotted border-border/20 px-8 py-4 z-10 shrink-0">
+            <div className="max-w-[800px] mx-auto">
+              {snapshot.status === "waiting_player" &&
+              snapshot.waitingEntity ? (
+                <div className="border border-border/30 bg-card p-4 shadow-[2px_2px_0_0_var(--border)]">
+                  <details className="mb-3">
+                    <summary className="cursor-pointer text-sm font-medium font-head text-primary select-none outline-none">
+                      <strong>
+                        Your context as {snapshot.waitingEntity.name}
+                      </strong>
+                    </summary>
+                    <pre className="text-xs whitespace-pre-wrap bg-input border border-border/20 p-2 max-h-[150px] overflow-y-auto mt-2 font-mono">
+                      {snapshot.waitingEntity.userContext}
+                    </pre>
+                  </details>
 
-          {error && !loading && (
-            <div className="border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive mt-4">
-              {error}
+                  <form
+                    onSubmit={handleSubmitAction}
+                    className="flex flex-col gap-2"
+                  >
+                    <Textarea
+                      value={playerInput}
+                      onChange={(e) => setPlayerInput(e.target.value)}
+                      placeholder="Describe what your character does, says, or thinks..."
+                      rows={3}
+                      disabled={loading}
+                    />
+                    <Button
+                      type="submit"
+                      disabled={loading || !playerInput.trim()}
+                    >
+                      {loading ? "Processing..." : "Submit Action"}
+                    </Button>
+                  </form>
+                </div>
+              ) : snapshot.status === "done" || snapshot.status === "error" ? (
+                <div className="flex justify-between items-center bg-card border border-border/30 p-4 shadow-[2px_2px_0_0_var(--border)]">
+                  <span className="text-sm font-mono text-muted-foreground">
+                    {snapshot.status === "error"
+                      ? "Simulation finished with an error."
+                      : "Simulation complete."}
+                  </span>
+                  <Button
+                    onClick={() => {
+                      router.push("/");
+                    }}
+                    size="sm"
+                  >
+                    {snapshot.status === "error"
+                      ? "Back to Dashboard"
+                      : "New Simulation"}
+                  </Button>
+                </div>
+              ) : null}
             </div>
-          )}
+          </footer>
+        )}
+      </div>
 
-          {selectedEntryForModal && (
-            <PromptModal
-              entry={selectedEntryForModal}
-              onClose={() => setSelectedEntryForModal(null)}
-            />
-          )}
-        </>
+      {error && !loading && (
+        <div className="fixed bottom-4 right-4 z-50 border border-destructive bg-destructive/90 text-destructive-foreground px-4 py-3 shadow-[3px_3px_0_0_var(--border)] text-sm">
+          {error}
+        </div>
+      )}
+
+      {selectedEntryForModal && (
+        <PromptModal
+          entry={selectedEntryForModal}
+          onClose={() => setSelectedEntryForModal(null)}
+        />
       )}
     </div>
+    </SidebarProvider>
   );
 }

apps/gui/src/components/play/PromptModal.tsx

@@ -8,13 +8,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
 } from "@/components/ui/accordion";
+import { PromptSwitcher } from "@/components/play/PromptSwitcher";
 
 interface PromptModalProps {
   entry: SimSnapshot["log"][number];
@@ -24,41 +25,57 @@ interface PromptModalProps {
 export function PromptModal({ entry, onClose }: PromptModalProps) {
   const [activeTab, setActiveTab] = useState<"actor" | "decoder">("actor");
 
-  const parseActorPrompt = (systemPrompt: string, userContext: string, inputTokens: number) => {
-    const memoryHeader = "=== YOUR RECENT MEMORY ===";
-    const idx = userContext.indexOf(memoryHeader);
+  const parseActorPrompt = (
+    systemPrompt: string,
+    userContext: string,
+    inputTokens: number,
+  ) => {
+    const recentHeader = "=== RECENT EVENTS ===";
+    const ledgerHeader = "=== YOUR MEMORIES ===";
 
+    const recentIdx = userContext.indexOf(recentHeader);
     let worldStr = userContext;
-    let memStr = "";
+    let recentStr = "";
+    let ledgerStr = "";
 
-    if (idx !== -1) {
-      worldStr = userContext.substring(0, idx).trim();
-      memStr = userContext.substring(idx).trim();
+    if (recentIdx !== -1) {
+      worldStr = userContext.substring(0, recentIdx).trim();
+      const rest = userContext.substring(recentIdx).trim();
+      const ledgerIdx = rest.indexOf(ledgerHeader);
+      if (ledgerIdx !== -1) {
+        recentStr = rest.substring(0, ledgerIdx).trim();
+        ledgerStr = rest.substring(ledgerIdx).trim();
+      } else {
+        recentStr = rest;
+      }
     }
 
-    const sysLen = systemPrompt.length;
-    const worldLen = worldStr.length;
-    const memLen = memStr.length;
-    const totalLen = sysLen + worldLen + memLen;
+    const sections: { label: string; type: string; content: string }[] = [
+      { label: "System Prompt", type: "system", content: systemPrompt },
+      { label: "World Info", type: "world", content: worldStr },
+      { label: "Recent Events", type: "events", content: recentStr || "(No recent events.)" },
+      { label: "Long-Term Memories", type: "memories", content: ledgerStr || "(No long-term memories.)" },
+    ];
 
+    const totalLen = sections.reduce((sum, s) => sum + s.content.length, 0);
     if (totalLen === 0) return null;
 
-    const sysPct = (sysLen / totalLen) * 100;
-    const worldPct = (worldLen / totalLen) * 100;
-    const memPct = (memLen / totalLen) * 100;
-
-    const sysTokens = Math.round((sysLen / totalLen) * inputTokens);
-    const worldTokens = Math.round((worldLen / totalLen) * inputTokens);
-    const memTokens = Math.max(0, inputTokens - sysTokens - worldTokens);
-
-    return [
-      { label: "System Prompt", pct: sysPct, relativePct: sysPct, tokens: sysTokens, type: "system", content: systemPrompt },
-      { label: "World Info", pct: worldPct, relativePct: worldPct, tokens: worldTokens, type: "world", content: worldStr },
-      { label: "Recent Memories", pct: memPct, relativePct: memPct, tokens: memTokens, type: "memories", content: memStr || "(No memories yet.)" },
-    ];
+    return sections.map((s) => {
+      const pct = (s.content.length / totalLen) * 100;
+      return {
+        ...s,
+        pct,
+        relativePct: pct,
+        tokens: Math.round((s.content.length / totalLen) * inputTokens),
+      };
+    });
   };
 
-  const parseDecoderPrompt = (systemPrompt: string, userContext: string, inputTokens: number) => {
+  const parseDecoderPrompt = (
+    systemPrompt: string,
+    userContext: string,
+    inputTokens: number,
+  ) => {
     const proseHeader = "=== NARRATIVE PROSE ===";
     const idx = userContext.indexOf(proseHeader);
 
@@ -86,34 +103,84 @@ export function PromptModal({ entry, onClose }: PromptModalProps) {
     const proseTokens = Math.max(0, inputTokens - sysTokens - worldTokens);
 
     return [
-      { label: "System Prompt", pct: sysPct, relativePct: sysPct, tokens: sysTokens, type: "system", content: systemPrompt },
-      { label: "Decoder Context", pct: worldPct, relativePct: worldPct, tokens: worldTokens, type: "world", content: worldStr },
-      { label: "Narrative Prose", pct: prosePct, relativePct: prosePct, tokens: proseTokens, type: "memories", content: proseStr },
+      {
+        label: "System Prompt",
+        pct: sysPct,
+        relativePct: sysPct,
+        tokens: sysTokens,
+        type: "system",
+        content: systemPrompt,
+      },
+      {
+        label: "Decoder Context",
+        pct: worldPct,
+        relativePct: worldPct,
+        tokens: worldTokens,
+        type: "world",
+        content: worldStr,
+      },
+      {
+        label: "Narrative Prose",
+        pct: prosePct,
+        relativePct: prosePct,
+        tokens: proseTokens,
+        type: "memories",
+        content: proseStr,
+      },
     ];
   };
 
-  const actorBreakdown = (entry.rawPrompt && entry.usage) ? parseActorPrompt(entry.rawPrompt.systemPrompt, entry.rawPrompt.userContext, entry.usage.inputTokens) : null;
-  const decoderBreakdown = (entry.decoderPrompt && entry.decoderUsage) ? parseDecoderPrompt(entry.decoderPrompt.systemPrompt, entry.decoderPrompt.userContext, entry.decoderUsage.inputTokens) : null;
+  const actorBreakdown =
+    entry.rawPrompt && entry.usage
+      ? parseActorPrompt(
+          entry.rawPrompt.systemPrompt,
+          entry.rawPrompt.userContext,
+          entry.usage.inputTokens,
+        )
+      : null;
+  const decoderBreakdown =
+    entry.decoderPrompt && entry.decoderUsage
+      ? parseDecoderPrompt(
+          entry.decoderPrompt.systemPrompt,
+          entry.decoderPrompt.userContext,
+          entry.decoderUsage.inputTokens,
+        )
+      : null;
 
-  const actorMaxContext = entry.usage?.maxContext !== undefined ? entry.usage.maxContext : 32768;
+  const actorMaxContext =
+    entry.usage?.maxContext !== undefined ? entry.usage.maxContext : 32768;
   const actorUsedTokens = entry.usage?.inputTokens || 0;
-  const actorUsagePctOfContext = actorMaxContext > 0 ? (actorUsedTokens / actorMaxContext) * 100 : 0;
+  const actorUsagePctOfContext =
+    actorMaxContext > 0 ? (actorUsedTokens / actorMaxContext) * 100 : 0;
   const isActorAbsolute = actorMaxContext > 0 && actorUsagePctOfContext >= 20;
 
-  const scaledActorBreakdown = actorBreakdown ? actorBreakdown.map((item) => ({
-    ...item,
-    pct: isActorAbsolute ? item.relativePct * (actorUsedTokens / actorMaxContext) : item.relativePct
-  })) : null;
+  const scaledActorBreakdown = actorBreakdown
+    ? actorBreakdown.map((item) => ({
+        ...item,
+        pct: isActorAbsolute
+          ? item.relativePct * (actorUsedTokens / actorMaxContext)
+          : item.relativePct,
+      }))
+    : null;
 
-  const decoderMaxContext = entry.decoderUsage?.maxContext !== undefined ? entry.decoderUsage.maxContext : 32768;
+  const decoderMaxContext =
+    entry.decoderUsage?.maxContext !== undefined
+      ? entry.decoderUsage.maxContext
+      : 32768;
   const decoderUsedTokens = entry.decoderUsage?.inputTokens || 0;
-  const decoderUsagePctOfContext = decoderMaxContext > 0 ? (decoderUsedTokens / decoderMaxContext) * 100 : 0;
-  const isDecoderAbsolute = decoderMaxContext > 0 && decoderUsagePctOfContext >= 20;
+  const decoderUsagePctOfContext =
+    decoderMaxContext > 0 ? (decoderUsedTokens / decoderMaxContext) * 100 : 0;
+  const isDecoderAbsolute =
+    decoderMaxContext > 0 && decoderUsagePctOfContext >= 20;
 
-  const scaledDecoderBreakdown = decoderBreakdown ? decoderBreakdown.map((item) => ({
-    ...item,
-    pct: isDecoderAbsolute ? item.relativePct * (decoderUsedTokens / decoderMaxContext) : item.relativePct
-  })) : null;
+  const scaledDecoderBreakdown = decoderBreakdown
+    ? decoderBreakdown.map((item) => ({
+        ...item,
+        pct: isDecoderAbsolute
+          ? item.relativePct * (decoderUsedTokens / decoderMaxContext)
+          : item.relativePct,
+      }))
+    : null;
 
   useEffect(() => {
     if (!entry.rawPrompt && entry.decoderPrompt) {
@@ -123,201 +190,259 @@ export function PromptModal({ entry, onClose }: PromptModalProps) {
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-[750px] sm:max-w-[750px] max-h-[85vh] overflow-hidden flex flex-col p-0 gap-0">
-        <DialogHeader className="px-5 pt-4 pb-3 border-b">
-          <DialogTitle>Raw Prompts & Token Usage ({entry.entityName})</DialogTitle>
+      <DialogContent className="max-w-[750px] sm:max-w-[750px] h-[90vh] overflow-hidden flex flex-col p-0 gap-0">
+        <DialogHeader className="px-6 pt-5 pb-4 border-b">
+          <DialogTitle className="text-lg">
+            Raw Prompts & Token Usage ({entry.entityName})
+          </DialogTitle>
         </DialogHeader>
 
-        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "actor" | "decoder")}>
-          <TabsList className="w-full rounded-none border-b bg-muted/50 px-5">
-            <TabsTrigger value="actor" disabled={!entry.rawPrompt} className="flex-1">
-              Actor Prompt {entry.usage ? "📊" : ""}
-            </TabsTrigger>
-            <TabsTrigger value="decoder" disabled={!entry.decoderPrompt} className="flex-1">
-              Intent Decoder {entry.decoderUsage ? "📊" : ""}
-            </TabsTrigger>
-          </TabsList>
+        <PromptSwitcher
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          hasActor={!!entry.rawPrompt}
+          hasDecoder={!!entry.decoderPrompt}
+        />
 
-          <div className="overflow-y-auto flex-1 p-5">
-            <TabsContent value="actor">
-              {entry.rawPrompt && (
-                <div className="flex flex-col gap-4">
-                  {entry.usage ? (
-                    <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
-                      <strong>LLM Instance:</strong> <span>{entry.usage.providerInstanceName || "Default"}</span>
-                      {entry.usage.modelName && (
-                        <span> ({entry.usage.modelName})</span>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm italic text-muted-foreground">
-                      No LLM token usage (Player turn used fixed prose).
-                    </div>
+        <div className="overflow-y-auto flex-1 p-5">
+          {activeTab === "actor" && entry.rawPrompt && (
+            <div className="flex flex-col gap-4">
+              {entry.usage ? (
+                <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
+                  <strong>LLM Instance:</strong>{" "}
+                  <span>{entry.usage.providerInstanceName || "Default"}</span>
+                  {entry.usage.modelName && (
+                    <span> ({entry.usage.modelName})</span>
                   )}
+                </div>
+              ) : (
+                <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm italic text-muted-foreground">
+                  No LLM token usage (Player turn used fixed prose).
+                </div>
+              )}
 
-                  {scaledActorBreakdown && (
-                    <div>
-                      <div className="flex justify-between items-center text-xs text-muted-foreground mb-1">
-                        <span className="font-semibold">Input Prompt Breakdown</span>
+              {scaledActorBreakdown && (
+                <div>
+                  <div className="flex justify-between items-center text-xs text-muted-foreground mb-1">
+                    <span className="font-semibold">
+                      Input Prompt Breakdown
+                    </span>
+                    <span>
+                      Total Input Tokens: <strong>{actorUsedTokens}</strong>
+                      {actorMaxContext > 0 ? (
                         <span>
-                          Total Input Tokens: <strong>{actorUsedTokens}</strong>
-                          {actorMaxContext > 0 ? (
-                            <span> / {actorMaxContext} ({actorUsagePctOfContext.toFixed(1)}% used)</span>
-                          ) : (
-                            <span> (infinite context)</span>
-                          )}
+                          {" "}
+                          / {actorMaxContext} (
+                          {actorUsagePctOfContext.toFixed(1)}% used)
                         </span>
-                      </div>
-                      <div className="flex h-6 w-full rounded overflow-hidden bg-muted shadow-inner mb-2">
-                        {scaledActorBreakdown.map((item, idx) => {
-                          const displayPct = actorMaxContext > 0 ? (item.tokens / actorMaxContext) * 100 : item.relativePct;
-                          return (
-                            <div
-                              key={idx}
-                              className={`h-full transition-all duration-300 ${
-                                item.type === "system" ? "bg-blue-500" : item.type === "world" ? "bg-emerald-500" : "bg-amber-500"
+                      ) : (
+                        <span> (infinite context)</span>
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex h-6 w-full rounded border overflow-hidden bg-muted shadow-inner mb-2">
+                    {scaledActorBreakdown.map((item, idx) => {
+                      const displayPct =
+                        actorMaxContext > 0
+                          ? (item.tokens / actorMaxContext) * 100
+                          : item.relativePct;
+                      return (
+                        <div
+                          key={idx}
+                          className={`h-full transition-all duration-300 ${
+                            item.type === "system"
+                              ? "bg-blue-500"
+                              : item.type === "world"
+                                ? "bg-emerald-500"
+                                : item.type === "memories"
+                                  ? "bg-purple-500"
+                                  : "bg-amber-500"
+                          }`}
+                          style={{ width: `${item.pct}%` }}
+                          title={`${item.label}: ${item.tokens} tokens (${displayPct.toFixed(1)}%)`}
+                        />
+                      );
+                    })}
+                    {isActorAbsolute && (
+                      <div
+                        className="bg-white h-full"
+                        style={{ width: `${100 - actorUsagePctOfContext}%` }}
+                        title={`Available: ${actorMaxContext - actorUsedTokens} tokens (${(100 - actorUsagePctOfContext).toFixed(1)}% remaining)`}
+                      />
+                    )}
+                  </div>
+                  <Accordion type="multiple">
+                    {scaledActorBreakdown.map((item, idx) => {
+                      const displayPct =
+                        actorMaxContext > 0
+                          ? (item.tokens / actorMaxContext) * 100
+                          : item.relativePct;
+                      return (
+                        <AccordionItem key={idx} value={String(idx)}>
+                          <AccordionTrigger className="text-sm">
+                            <span
+                              className={`inline-block w-2.5 h-2.5 rounded-sm mr-2 ${
+                                item.type === "system"
+                                  ? "bg-blue-500"
+                                  : item.type === "world"
+                                    ? "bg-emerald-500"
+                                    : item.type === "memories"
+                                      ? "bg-purple-500"
+                                      : "bg-amber-500"
                               }`}
-                              style={{ width: `${item.pct}%` }}
-                              title={`${item.label}: ${item.tokens} tokens (${displayPct.toFixed(1)}%)`}
                             />
-                          );
-                        })}
-                        {isActorAbsolute && (
-                          <div
-                            className="bg-white h-full"
-                            style={{ width: `${100 - actorUsagePctOfContext}%` }}
-                            title={`Available: ${actorMaxContext - actorUsedTokens} tokens (${(100 - actorUsagePctOfContext).toFixed(1)}% remaining)`}
-                          />
-                        )}
-                      </div>
-                      <Accordion type="multiple" defaultValue={["0"]}>
-                        {scaledActorBreakdown.map((item, idx) => {
-                          const displayPct = actorMaxContext > 0 ? (item.tokens / actorMaxContext) * 100 : item.relativePct;
-                          return (
-                            <AccordionItem key={idx} value={String(idx)}>
-                              <AccordionTrigger className="text-sm">
-                                <span className={`inline-block w-2.5 h-2.5 rounded-sm mr-2 ${
-                                  item.type === "system" ? "bg-blue-500" : item.type === "world" ? "bg-emerald-500" : "bg-amber-500"
-                                }`} />
-                                {item.label}: <strong>{item.tokens}</strong> tokens ({displayPct.toFixed(0)}%)
-                              </AccordionTrigger>
-                              <AccordionContent>
-                                <pre className="m-0 p-2 bg-muted rounded text-xs font-mono whitespace-pre-wrap max-h-[250px] overflow-y-auto text-foreground">
-                                  {item.content}
-                                </pre>
-                              </AccordionContent>
-                            </AccordionItem>
-                          );
-                        })}
-                      </Accordion>
-                    </div>
-                  )}
+                            {item.label}: <strong>{item.tokens}</strong> tokens
+                            ({displayPct.toFixed(0)}%)
+                          </AccordionTrigger>
+                          <AccordionContent>
+                            <pre className="m-0 p-2 bg-muted rounded text-xs font-mono whitespace-pre-wrap text-foreground">
+                              {item.content}
+                            </pre>
+                          </AccordionContent>
+                        </AccordionItem>
+                      );
+                    })}
+                  </Accordion>
+                </div>
+              )}
 
-                  {entry.usage && (
-                    <div>
-                      <div className="flex justify-between items-center text-xs text-muted-foreground mb-2">
-                        <span className="font-semibold">LLM Output</span>
-                        <span>Total Output Tokens: <strong>{entry.usage.outputTokens}</strong></span>
-                      </div>
-                      <div className="rounded border-2">
-                        <pre className="m-0 p-2 bg-muted text-xs font-mono whitespace-pre-wrap max-h-[250px] overflow-y-auto text-foreground">
-                          {entry.narrativeProse}
-                        </pre>
-                      </div>
-                    </div>
+              {entry.usage && (
+                <div>
+                  <div className="flex justify-between items-center text-xs text-muted-foreground mb-2">
+                    <span className="font-semibold">LLM Output</span>
+                    <span>
+                      Total Output Tokens:{" "}
+                      <strong>{entry.usage.outputTokens}</strong>
+                    </span>
+                  </div>
+                  <div className="rounded border-2">
+                    <pre className="m-0 p-2 bg-muted text-xs font-mono whitespace-pre-wrap text-foreground">
+                      {entry.narrativeProse}
+                    </pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === "decoder" && entry.decoderPrompt && (
+            <div className="flex flex-col gap-4">
+              {entry.decoderUsage && (
+                <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
+                  <strong>LLM Instance:</strong>{" "}
+                  <span>
+                    {entry.decoderUsage.providerInstanceName || "Default"}
+                  </span>
+                  {entry.decoderUsage.modelName && (
+                    <span> ({entry.decoderUsage.modelName})</span>
                   )}
                 </div>
               )}
-            </TabsContent>
 
-            <TabsContent value="decoder">
-              {entry.decoderPrompt && (
-                <div className="flex flex-col gap-4">
-                  {entry.decoderUsage && (
-                    <div className="rounded border-2 bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
-                      <strong>LLM Instance:</strong> <span>{entry.decoderUsage.providerInstanceName || "Default"}</span>
-                      {entry.decoderUsage.modelName && (
-                        <span> ({entry.decoderUsage.modelName})</span>
-                      )}
-                    </div>
-                  )}
-
-                  {scaledDecoderBreakdown && (
-                    <div>
-                      <div className="flex justify-between items-center text-xs text-muted-foreground mb-1">
-                        <span className="font-semibold">Input Prompt Breakdown</span>
+              {scaledDecoderBreakdown && (
+                <div>
+                  <div className="flex justify-between items-center text-xs text-muted-foreground mb-1">
+                    <span className="font-semibold">
+                      Input Prompt Breakdown
+                    </span>
+                    <span>
+                      Total Input Tokens: <strong>{decoderUsedTokens}</strong>
+                      {decoderMaxContext > 0 ? (
                         <span>
-                          Total Input Tokens: <strong>{decoderUsedTokens}</strong>
-                          {decoderMaxContext > 0 ? (
-                            <span> / {decoderMaxContext} ({decoderUsagePctOfContext.toFixed(1)}% used)</span>
-                          ) : (
-                            <span> (infinite context)</span>
-                          )}
+                          {" "}
+                          / {decoderMaxContext} (
+                          {decoderUsagePctOfContext.toFixed(1)}% used)
                         </span>
-                      </div>
-                      <div className="flex h-6 w-full rounded overflow-hidden bg-muted shadow-inner mb-2">
-                        {scaledDecoderBreakdown.map((item, idx) => {
-                          const displayPct = decoderMaxContext > 0 ? (item.tokens / decoderMaxContext) * 100 : item.relativePct;
-                          return (
-                            <div
-                              key={idx}
-                              className={`h-full transition-all duration-300 ${
-                                item.type === "system" ? "bg-blue-500" : item.type === "world" ? "bg-emerald-500" : "bg-amber-500"
+                      ) : (
+                        <span> (infinite context)</span>
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex h-6 w-full rounded border overflow-hidden bg-muted shadow-inner mb-2">
+                    {scaledDecoderBreakdown.map((item, idx) => {
+                      const displayPct =
+                        decoderMaxContext > 0
+                          ? (item.tokens / decoderMaxContext) * 100
+                          : item.relativePct;
+                      return (
+                        <div
+                          key={idx}
+                          className={`h-full transition-all duration-300 ${
+                            item.type === "system"
+                              ? "bg-blue-500"
+                              : item.type === "world"
+                                ? "bg-emerald-500"
+                                : item.type === "memories"
+                                  ? "bg-purple-500"
+                                  : "bg-amber-500"
+                          }`}
+                          style={{ width: `${item.pct}%` }}
+                          title={`${item.label}: ${item.tokens} tokens (${displayPct.toFixed(1)}%)`}
+                        />
+                      );
+                    })}
+                    {isDecoderAbsolute && (
+                      <div
+                        className="bg-white h-full"
+                        style={{ width: `${100 - decoderUsagePctOfContext}%` }}
+                        title={`Available: ${decoderMaxContext - decoderUsedTokens} tokens (${(100 - decoderUsagePctOfContext).toFixed(1)}% remaining)`}
+                      />
+                    )}
+                  </div>
+                  <Accordion type="multiple">
+                    {scaledDecoderBreakdown.map((item, idx) => {
+                      const displayPct =
+                        decoderMaxContext > 0
+                          ? (item.tokens / decoderMaxContext) * 100
+                          : item.relativePct;
+                      return (
+                        <AccordionItem key={idx} value={String(idx)}>
+                          <AccordionTrigger className="text-sm">
+                            <span
+                              className={`inline-block w-2.5 h-2.5 rounded-sm mr-2 ${
+                                item.type === "system"
+                                  ? "bg-blue-500"
+                                  : item.type === "world"
+                                    ? "bg-emerald-500"
+                                    : item.type === "memories"
+                                      ? "bg-purple-500"
+                                      : "bg-amber-500"
                               }`}
-                              style={{ width: `${item.pct}%` }}
-                              title={`${item.label}: ${item.tokens} tokens (${displayPct.toFixed(1)}%)`}
                             />
-                          );
-                        })}
-                        {isDecoderAbsolute && (
-                          <div
-                            className="bg-white h-full"
-                            style={{ width: `${100 - decoderUsagePctOfContext}%` }}
-                            title={`Available: ${decoderMaxContext - decoderUsedTokens} tokens (${(100 - decoderUsagePctOfContext).toFixed(1)}% remaining)`}
-                          />
-                        )}
-                      </div>
-                      <Accordion type="multiple" defaultValue={["0"]}>
-                        {scaledDecoderBreakdown.map((item, idx) => {
-                          const displayPct = decoderMaxContext > 0 ? (item.tokens / decoderMaxContext) * 100 : item.relativePct;
-                          return (
-                            <AccordionItem key={idx} value={String(idx)}>
-                              <AccordionTrigger className="text-sm">
-                                <span className={`inline-block w-2.5 h-2.5 rounded-sm mr-2 ${
-                                  item.type === "system" ? "bg-blue-500" : item.type === "world" ? "bg-emerald-500" : "bg-amber-500"
-                                }`} />
-                                {item.label}: <strong>{item.tokens}</strong> tokens ({displayPct.toFixed(0)}%)
-                              </AccordionTrigger>
-                              <AccordionContent>
-                                <pre className="m-0 p-2 bg-muted rounded text-xs font-mono whitespace-pre-wrap max-h-[250px] overflow-y-auto text-foreground">
-                                  {item.content}
-                                </pre>
-                              </AccordionContent>
-                            </AccordionItem>
-                          );
-                        })}
-                      </Accordion>
-                    </div>
-                  )}
-
-                  {entry.decoderUsage && (
-                    <div>
-                      <div className="flex justify-between items-center text-xs text-muted-foreground mb-2">
-                        <span className="font-semibold">LLM Output</span>
-                        <span>Total Output Tokens: <strong>{entry.decoderUsage.outputTokens}</strong></span>
-                      </div>
-                      <div className="rounded border-2">
-                        <pre className="m-0 p-2 bg-muted text-xs font-mono whitespace-pre-wrap max-h-[250px] overflow-y-auto text-foreground">
-                          {JSON.stringify(entry.intents, null, 2)}
-                        </pre>
-                      </div>
-                    </div>
-                  )}
+                            {item.label}: <strong>{item.tokens}</strong> tokens
+                            ({displayPct.toFixed(0)}%)
+                          </AccordionTrigger>
+                          <AccordionContent>
+                            <pre className="m-0 p-2 bg-muted rounded text-xs font-mono whitespace-pre-wrap text-foreground">
+                              {item.content}
+                            </pre>
+                          </AccordionContent>
+                        </AccordionItem>
+                      );
+                    })}
+                  </Accordion>
                 </div>
               )}
-            </TabsContent>
-          </div>
-        </Tabs>
+
+              {entry.decoderUsage && (
+                <div>
+                  <div className="flex justify-between items-center text-xs text-muted-foreground mb-2">
+                    <span className="font-semibold">LLM Output</span>
+                    <span>
+                      Total Output Tokens:{" "}
+                      <strong>{entry.decoderUsage.outputTokens}</strong>
+                    </span>
+                  </div>
+                  <div className="rounded border-2">
+                    <pre className="m-0 p-2 bg-muted text-xs font-mono whitespace-pre-wrap text-foreground">
+                      {JSON.stringify(entry.intents, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </DialogContent>
     </Dialog>
   );

apps/gui/src/components/play/PromptSwitcher.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+interface PromptSwitcherProps {
+  activeTab: "actor" | "decoder";
+  onTabChange: (tab: "actor" | "decoder") => void;
+  hasActor: boolean;
+  hasDecoder: boolean;
+}
+
+export function PromptSwitcher({
+  activeTab,
+  onTabChange,
+  hasActor,
+  hasDecoder,
+}: PromptSwitcherProps) {
+  return (
+    <div className="flex items-center justify-center gap-4 border-b bg-muted/50 px-5 py-4">
+      <button
+        onClick={() => onTabChange("actor")}
+        disabled={!hasActor}
+        className={`flex h-14 w-40 items-center justify-center border-2 text-sm font-medium transition-all ${
+          activeTab === "actor"
+            ? "border-primary bg-primary text-primary-foreground shadow-sm"
+            : "border-border/30 bg-card text-foreground hover:border-primary/50"
+        } disabled:cursor-not-allowed disabled:opacity-40`}
+      >
+        Actor Prompt
+      </button>
+      <span className="text-xl text-muted-foreground">→</span>
+      <button
+        onClick={() => onTabChange("decoder")}
+        disabled={!hasDecoder}
+        className={`flex h-14 w-44 items-center justify-center border-2 text-sm font-medium transition-all ${
+          activeTab === "decoder"
+            ? "border-primary bg-primary text-primary-foreground shadow-sm"
+            : "border-border/30 bg-card text-foreground hover:border-primary/50"
+        } disabled:cursor-not-allowed disabled:opacity-40`}
+      >
+        Intent Decoder
+      </button>
+    </div>
+  );
+}

apps/gui/src/components/play/ScenarioCard.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+function truncate(text: string, maxLen: number): string {
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen).trimEnd() + "...";
+}
+
+interface ScenarioCardProps {
+  name: string;
+  description: string;
+  onClick: () => void;
+}
+
+export function ScenarioCard({ name, description, onClick }: ScenarioCardProps) {
+  return (
+    <div
+      onClick={onClick}
+      className="flex-shrink-0 w-64 border border-border/30 bg-card p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all"
+    >
+      <strong className="text-body-md text-foreground block mb-2">{name}</strong>
+      <p className="text-xs text-muted-foreground leading-relaxed mb-1">{truncate(description, 80)}</p>
+      <span className="mt-4 flex items-center justify-center size-7 border border-primary bg-primary/10 text-primary font-mono text-sm font-bold">{'>'}</span>
+    </div>
+  );
+}

apps/gui/src/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded border-2 px-2 py-0.5 text-xs font-head font-medium whitespace-nowrap shadow-sm transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded border px-2 py-0.5 text-xs font-head font-medium whitespace-nowrap transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

apps/gui/src/components/ui/card.tsx

@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center border-t border-dotted border-border/20 bg-muted/30 p-(--card-spacing)",
+        "flex items-center border-t border-dotted border-border/20 bg-muted/30 px-(--card-spacing) pt-(--card-spacing)",
         className
       )}
       {...props}

apps/gui/src/components/ui/dialog.tsx

@@ -70,7 +70,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close data-slot="dialog-close" asChild>
             <Button
-              variant="ghost"
+              variant="outline"
               className="absolute top-2 right-2"
               size="icon"
             >

apps/gui/src/components/ui/navigation-menu.tsx

@@ -128,7 +128,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "flex items-center gap-2 p-2 text-sm transition-all outline-none hover:bg-secondary hover:text-foreground focus:bg-secondary focus:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary in-data-[slot=navigation-menu-content]:rounded-sm data-active:bg-primary/15 data-active:text-primary [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 p-2 text-sm transition-all outline-none hover:bg-secondary hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary in-data-[slot=navigation-menu-content]:rounded-sm data-active:bg-primary/15 data-active:text-primary [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

apps/gui/src/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

apps/gui/src/components/ui/sidebar.tsx

@@ -0,0 +1,702 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-card text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-card p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r-2 group-data-[side=right]:border-l-2",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-card group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-accent data-open:hover:text-accent-foreground data-active:bg-primary data-active:font-medium data-active:text-primary-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-accent hover:text-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-accent hover:text-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-primary data-active:text-primary-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

apps/gui/src/components/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted/60", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

apps/gui/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/gui/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(mql.matches)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(mql.matches)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

packages/actor/src/actor-prompt-builder.ts

@@ -106,7 +106,9 @@ Guidelines:
     if (this.bufferRepo) {
       try {
         recentEntries = this.bufferRepo.listForOwner(entity.id);
-      } catch {}
+      } catch {
+        // bufferRepo may not be available
+      }
     }
 
     // --- Recent memory ---

packages/actor/tests/actor-prompt-builder.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import Database from "better-sqlite3";
-import { WorldState, Entity, AttributeVisibility } from "@omnia/core";
+import { WorldState, Entity } from "@omnia/core";
 import { BufferRepository, LedgerRepository } from "@omnia/memory";
 import { ActorPromptBuilder } from "../src/actor-prompt-builder";
 

packages/memory/src/handoff.ts

@@ -154,7 +154,7 @@ export function splitBufferForHandoff(
     "several minutes ago",
   ]);
 
-  let watermarkStartIndex = sorted.length;
+  let watermarkStartIndex: number;
 
   // 1. Mark last K entries as watermark
   if (sorted.length > K) {
@@ -239,11 +239,11 @@ ${candidatesList}
     }
 
     const result = response.data;
-    const db = (this.bufferRepo as any).db;
+    const db = (this.bufferRepo as unknown as { db: Record<string, unknown> }).db;
 
     const ledgerEntries: LedgerEntry[] = [];
     for (const chunk of result.chunks) {
-      let embedding: number[] = [];
+      let embedding: number[];
       try {
         embedding = await this.embedProvider.embed(chunk.content);
       } catch (err) {

packages/memory/src/ledger.ts

@@ -92,28 +92,27 @@ export class LedgerRepository {
     })();
   }
 
-  private mapRowToEntry(row: any, involvedEntityIds: string[]): LedgerEntry {
-    let embedding: number[] = [];
-    if (row.embedding) {
-      const buffer = row.embedding as Buffer;
-      const floatArray = new Float32Array(
-        buffer.buffer,
-        buffer.byteOffset,
-        buffer.byteLength / Float32Array.BYTES_PER_ELEMENT
-      );
-      embedding = Array.from(floatArray);
-    }
+  private mapRowToEntry(row: Record<string, unknown>, involvedEntityIds: string[]): LedgerEntry {
+    const embedding: number[] = row.embedding
+      ? Array.from(
+          new Float32Array(
+            (row.embedding as Buffer).buffer,
+            (row.embedding as Buffer).byteOffset,
+            (row.embedding as Buffer).byteLength / Float32Array.BYTES_PER_ELEMENT
+          )
+        )
+      : [];
 
     return {
-      id: row.id,
-      ownerId: row.owner_id,
-      timestamp: row.timestamp,
-      locationId: row.location_id,
+      id: row.id as string,
+      ownerId: row.owner_id as string,
+      timestamp: row.timestamp as string,
+      locationId: row.location_id as string | null,
       involvedEntityIds,
-      content: row.content,
-      quotes: JSON.parse(row.quotes_json || "[]"),
-      importance: row.importance,
-      embedding: embedding,
+      content: row.content as string,
+      quotes: JSON.parse((row.quotes_json as string) || "[]"),
+      importance: row.importance as number,
+      embedding,
     };
   }
 
@@ -126,7 +125,7 @@ export class LedgerRepository {
       WHERE id = ?
     `
       )
-      .get(id) as any;
+      .get(id) as Record<string, unknown> | undefined;
 
     if (!row) return null;
 
@@ -163,7 +162,7 @@ export class LedgerRepository {
           le.importance >= 8
     `;
 
-    const params: any[] = [ownerId];
+    const params: (string | number)[] = [ownerId];
 
     if (currentLocationId) {
       query += ` OR le.location_id = ?`;
@@ -183,7 +182,7 @@ export class LedgerRepository {
     `;
     params.push(limit);
 
-    const rows = this.db.prepare(query).all(...params) as any[];
+    const rows = this.db.prepare(query).all(...params) as Record<string, unknown>[];
 
     if (rows.length === 0) return [];
 
@@ -223,7 +222,7 @@ export class LedgerRepository {
       LIMIT 1
     `
       )
-      .get(ownerId, timestamp) as any;
+      .get(ownerId, timestamp) as Record<string, unknown> | undefined;
 
     if (preceding) {
       neighbors.push(this.mapRowToEntry(preceding, []));
@@ -240,7 +239,7 @@ export class LedgerRepository {
       LIMIT 1
     `
       )
-      .get(ownerId, timestamp) as any;
+      .get(ownerId, timestamp) as Record<string, unknown> | undefined;
 
     if (succeeding) {
       neighbors.push(this.mapRowToEntry(succeeding, []));
@@ -310,7 +309,7 @@ export class LedgerRepository {
     scored.sort((a, b) => b.score - a.score);
     const selected = scored.slice(0, limit).map((s) => s.entry);
 
-    let finalEntries = [...selected];
+    const finalEntries = [...selected];
 
     // Optionally retrieve associative neighbors
     if (includeAssociativeNeighbors && selected.length > 0) {

packages/memory/tests/handoff.test.ts

@@ -152,7 +152,7 @@ describe("Memory Handoff Tests (Tier 1)", () => {
     const success = await engine.runHandoff(entity, entries, now);
     expect(success).toBe(true);
 
-    const ledgerRows = db.prepare("SELECT * FROM ledger_entries WHERE owner_id = ?").all("alice") as any[];
+    const ledgerRows = db.prepare("SELECT * FROM ledger_entries WHERE owner_id = ?").all("alice") as Record<string, unknown>[];
     expect(ledgerRows.length).toBe(1);
     expect(ledgerRows[0].content).toBe("Alice initiated dialogue and performed various tasks.");
     expect(JSON.parse(ledgerRows[0].quotes_json)).toEqual(["Event 0"]);

pnpm-lock.yaml

@@ -286,12 +286,18 @@ importers:
       '@omnia/spatial':
         specifier: workspace:*
         version: link:../../packages/spatial
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.19
+        version: 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-separator':
         specifier: ^1.1.11
         version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-slot':
         specifier: ^1.3.0
         version: 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.12
+        version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1