diff --git a/apps/gui/next-env.d.ts b/apps/gui/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/apps/gui/next-env.d.ts
+++ b/apps/gui/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/gui/package.json b/apps/gui/package.json
index 010fb0f..bfe39ce 100644
--- a/apps/gui/package.json
+++ b/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",
diff --git a/apps/gui/src/app/builder/page.tsx b/apps/gui/src/app/builder/page.tsx
index 41f29f9..b8b973c 100644
--- a/apps/gui/src/app/builder/page.tsx
+++ b/apps/gui/src/app/builder/page.tsx
@@ -2,12 +2,14 @@
 
 export default function BuilderPage() {
   return (
-    <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 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>
   );
diff --git a/apps/gui/src/app/layout.tsx b/apps/gui/src/app/layout.tsx
index 46decfc..3daadea 100644
--- a/apps/gui/src/app/layout.tsx
+++ b/apps/gui/src/app/layout.tsx
@@ -42,8 +42,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
   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">
+      <body className={`${jersey25.variable} ${jetbrainsMono.variable} ${spaceMono.variable} flex flex-col h-dvh overflow-hidden bg-background text-foreground font-sans`}>
+        <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>
@@ -68,7 +68,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             </NavigationMenu>
           </div>
         </nav>
-        {children}
+        <main className="flex-1 flex flex-col min-h-0">
+          {children}
+        </main>
       </body>
     </html>
   );
diff --git a/apps/gui/src/components/config/ConfigView.tsx b/apps/gui/src/components/config/ConfigView.tsx
index 3e9961a..5651eab 100644
--- a/apps/gui/src/components/config/ConfigView.tsx
+++ b/apps/gui/src/components/config/ConfigView.tsx
@@ -102,180 +102,182 @@ export function ConfigView() {
   };
 
   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>
-      <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>
-      )}
+    <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">
+          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();
-            }}
-          />
+        {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>
-                .
+            <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>
-            ) : (
-              <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>
+              <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>
-                  ))}
-                </TableBody>
-              </Table>
-            )}
-          </section>
-        </div>
-      )}
+                  </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>
   );
 }
diff --git a/apps/gui/src/components/play/DashboardView.tsx b/apps/gui/src/components/play/DashboardView.tsx
index 5f9fb7a..282bf54 100644
--- a/apps/gui/src/components/play/DashboardView.tsx
+++ b/apps/gui/src/components/play/DashboardView.tsx
@@ -173,7 +173,8 @@ export function DashboardView() {
   };
 
   return (
-    <div className="mx-auto max-w-[800px] px-10 py-12">
+    <div className="flex-1 overflow-y-auto w-full">
+      <div className="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">
@@ -361,5 +362,6 @@ export function DashboardView() {
         )}
       </div>
     </div>
+  </div>
   );
 }
diff --git a/apps/gui/src/components/play/PlayView.tsx b/apps/gui/src/components/play/PlayView.tsx
index 3b92f66..2d232e4 100644
--- a/apps/gui/src/components/play/PlayView.tsx
+++ b/apps/gui/src/components/play/PlayView.tsx
@@ -265,6 +265,8 @@ export function PlayView() {
     }
   };
 
+  const [activeTab, setActiveTab] = useState<"interact" | "manage">("interact");
+
   const statusMessage = () => {
     if (!snapshot) return null;
     if (loading && statusText) return statusText;
@@ -303,130 +305,232 @@ export function PlayView() {
   if (!snapshot) return null;
 
   return (
-    <div className="mx-auto max-w-[800px] px-10 py-12 animate-fade-in">
-      <div className="mb-4">
-        <div className="flex justify-between items-center mb-1">
-          <h2 className="text-headline-md text-primary">{snapshot.scenarioName}</h2>
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                pauseRequestedRef.current = true;
-                router.push("/");
-              }}
+    <div className="flex flex-1 min-h-0 overflow-hidden">
+      {/* Sidebar Navigation */}
+      <aside className="w-64 border-r border-border/30 bg-card/40 flex flex-col justify-between shrink-0">
+        <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"
+              )}
             >
-              Dashboard
-            </Button>
-            {snapshot.status !== "done" && snapshot.status !== "error" && (
-              <>
-                {snapshot.status === "running" && (
-                  loading ? (
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => {
-                        pauseRequestedRef.current = true;
-                      }}
-                    >
-                      Pause
-                    </Button>
-                  ) : (
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => runSteps(snapshot.id)}
-                    >
-                      Resume
-                    </Button>
-                  )
-                )}
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={() => {
-                    pauseRequestedRef.current = true;
-                    router.push("/");
-                  }}
-                >
-                  Stop
-                </Button>
-              </>
-            )}
+              💬 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>
-        <p className="text-sm text-muted-foreground">{snapshot.scenarioDescription}</p>
-        <p className="text-sm font-medium text-primary mt-1">
-          {loading && "⏳ "}
-          {statusMessage()}
-        </p>
-      </div>
 
-      <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..."}
+        <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>
+      </aside>
+
+      {/* 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>
+              <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>
+            {/* Simulation Global Controls */}
+            <div className="flex gap-2 shrink-0">
+              {snapshot.status !== "done" && snapshot.status !== "error" && (
+                <>
+                  {snapshot.status === "running" && (
+                    loading ? (
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => {
+                          pauseRequestedRef.current = true;
+                        }}
+                      >
+                        Pause
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => runSteps(snapshot.id)}
+                      >
+                        Resume
+                      </Button>
+                    )
+                  )}
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => {
+                      pauseRequestedRef.current = true;
+                      router.push("/");
+                    }}
+                  >
+                    Stop
+                  </Button>
+                </>
+              )}
+            </div>
           </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">{snapshot.status.toUpperCase()}</span></span>
+            <span className="text-muted-foreground">Turn: <span className="text-foreground font-bold">{snapshot.turn}</span></span>
+          </div>
+          <p className="text-xs font-medium text-primary mt-1 font-mono">
+            {loading && "⏳ "}
+            {statusMessage()}
+          </p>
+        </header>
+
+        {/* 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>
+
+              {/* 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>
+
+        {/* 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>
+
+                  <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 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>
-        </div>
-      )}
-
-      {(snapshot.status === "done" || snapshot.status === "error") && (
-        <Button
-          onClick={() => {
-            router.push("/");
-          }}
-          className="mt-4"
-        >
-          {snapshot.status === "error" ? "Back to Dashboard" : "New Simulation"}
-        </Button>
-      )}
-
       {error && !loading && (
-        <div className="border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive mt-4">
+        <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>
       )}
diff --git a/apps/gui/src/components/ui/sheet.tsx b/apps/gui/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..a37f17b
--- /dev/null
+++ b/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,
+}
diff --git a/apps/gui/src/components/ui/sidebar.tsx b/apps/gui/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..c101caa
--- /dev/null
+++ b/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-sidebar 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-sidebar 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-sidebar 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,
+}
diff --git a/apps/gui/src/components/ui/tooltip.tsx b/apps/gui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..e1ae87b
--- /dev/null
+++ b/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 }
diff --git a/apps/gui/src/hooks/use-mobile.tsx b/apps/gui/src/hooks/use-mobile.tsx
new file mode 100644
index 0000000..59da047
--- /dev/null
+++ b/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
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae8f5d2..f299d1f 100644
--- a/pnpm-lock.yaml
+++ b/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
