feat: one gateway port with path-mounted frontends, markdown chat, collapsible sidebars

ui/src/lib/panel/turn-card.svelte

@@ -10,6 +10,7 @@
   } from "$lib/format";
   import { cn } from "$lib/utils";
   import type { Turn } from "./activity.svelte";
+  import Markdown from "./markdown.svelte";
   import ToolNodeView from "./tool-node.svelte";
 
   let { turn, now }: { turn: Turn; now: number } = $props();
@@ -65,11 +66,10 @@
     {/if}
   </header>
   {#if turn.userText}
-    <p
-      class="mx-1 rounded-md bg-muted/50 px-2.5 py-1.5 text-sm whitespace-pre-wrap"
-    >
-      {turn.userText}
-    </p>
+    <Markdown
+      class="mx-1 rounded-md bg-muted/50 px-2.5 py-1.5"
+      text={turn.userText}
+    />
   {/if}
   {#if turn.roots.length > 0}
     <div class="flex flex-col">
@@ -81,13 +81,13 @@
     </div>
   {/if}
   {#each turn.says as text, index (index)}
-    <p class="mx-1 flex gap-2 rounded-md bg-primary/8 px-2.5 py-1.5 text-sm">
-      <MessageSquareIcon class="mt-0.5 size-3.5 shrink-0 text-link" />
-      <span class="whitespace-pre-wrap">{text}</span>
-    </p>
+    <div class="mx-1 flex gap-2 rounded-md bg-primary/8 px-2.5 py-1.5">
+      <MessageSquareIcon class="mt-1 size-3.5 shrink-0 text-link" />
+      <Markdown class="min-w-0 flex-1" {text} />
+    </div>
   {/each}
   {#if turn.text}
-    <p class="mx-1 px-1 text-sm whitespace-pre-wrap">{turn.text}</p>
+    <Markdown class="mx-1 px-1" text={turn.text} />
   {:else if turn.status === "running" && turn.roots.length === 0 && turn.thinking === 0}
     <p class="mx-1 px-1 text-muted-foreground text-sm">
       Waiting for the model…