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

ui/src/lib/panel/conversation-header.svelte

@@ -15,7 +15,7 @@
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import * as Select from "$lib/components/ui/select";
-  import { fmtRelative, shortId } from "$lib/format";
+  import { clip, fmtRelative, shortId } from "$lib/format";
 
   let {
     client,
@@ -43,6 +43,9 @@
   let branchText = $state("");
   let newTitle = $state("");
 
+  const WINDOW_MAX = 56;
+  const windows = $derived(info.bindings.filter((b) => b.visible));
+
   const SEEDS = [
     { label: "clean - empty context", value: "clean" },
     { label: "copy - copy of this history", value: "copy" },
@@ -193,7 +196,25 @@
     <span class="tabular">
       last activity {fmtRelative(info.last_activity_at)}
     </span>
+    {#if info.queue.length > 0}
+      <span class="tabular font-medium text-note">
+        {info.queue.length}
+        queued
+      </span>
+    {/if}
   </div>
+  {#if windows.length > 0}
+    <div
+      class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-muted-foreground text-xs"
+    >
+      {#each windows as window (window.frontend + window.external_id)}
+        <span class="truncate" title="{window.frontend}: {window.external_id}">
+          <span class="text-foreground/70">{window.frontend}</span>
+          {clip(window.external_id, WINDOW_MAX)}
+        </span>
+      {/each}
+    </div>
+  {/if}
 </header>
 
 <Dialog.Root bind:open={branchOpen}>