feat(ui,api): chat view with live tail and autoscroll, conversation rail with last message previews

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

@@ -6,10 +6,10 @@
   import * as Tabs from "$lib/components/ui/tabs";
   import ActivityFeed from "./activity-feed.svelte";
   import BindingsList from "./bindings-list.svelte";
+  import ChatView from "./chat-view.svelte";
   import Composer from "./composer.svelte";
   import { ConversationFeed } from "./conversation.svelte";
   import ConversationHeader from "./conversation-header.svelte";
-  import HistoryView from "./history-view.svelte";
   import QueueList from "./queue-list.svelte";
   import RawEntries from "./raw-entries.svelte";
 
@@ -31,9 +31,8 @@
     () => client,
     untrack(() => id)
   );
-  let tab = $state("activity");
+  let tab = $state("chat");
   let historyKey = $state(0);
-  let landed = $state(false);
 
   onMount(() => {
     feed.start();
@@ -55,13 +54,6 @@
       });
     }
   });
-
-  $effect(() => {
-    if (feed.loaded && !landed) {
-      landed = true;
-      tab = feed.model.running ? "activity" : "history";
-    }
-  });
 </script>
 
 <div class="flex h-full min-h-0 flex-col">
@@ -90,34 +82,44 @@
       <div class="flex min-h-0 flex-col">
         <Tabs.Root class="flex min-h-0 flex-1 flex-col gap-0" bind:value={tab}>
           <Tabs.List class="mx-4 mt-2 w-fit sm:mx-6">
+            <Tabs.Trigger value="chat">Chat</Tabs.Trigger>
             <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
-            <Tabs.Trigger value="history">History</Tabs.Trigger>
             <Tabs.Trigger value="raw">Raw</Tabs.Trigger>
-            <Tabs.Trigger class={compact ? "" : "lg:hidden"} value="meta"
-              >Meta</Tabs.Trigger
-            >
+            <Tabs.Trigger class={compact ? "" : "lg:hidden"} value="meta">
+              Meta
+            </Tabs.Trigger>
           </Tabs.List>
-          <div class="min-h-0 flex-1 overflow-y-auto px-4 py-3 sm:px-6">
-            <Tabs.Content value="activity">
-              <ActivityFeed
-                {client}
-                connected={feed.live.state === "open"}
-                conversationId={id}
-                model={feed.model}
-              />
-            </Tabs.Content>
-            <Tabs.Content value="history">
-              <HistoryView
-                {client}
-                conversationId={id}
-                refreshKey={historyKey}
-              />
-            </Tabs.Content>
-            <Tabs.Content value="raw">
-              <RawEntries {client} conversationId={id} />
-            </Tabs.Content>
-            <Tabs.Content value="meta">{@render rail()}</Tabs.Content>
-          </div>
+          <Tabs.Content class="flex min-h-0 flex-1 flex-col" value="chat">
+            <ChatView
+              {client}
+              conversationId={id}
+              model={feed.model}
+              refreshKey={historyKey}
+            />
+          </Tabs.Content>
+          <Tabs.Content
+            class="min-h-0 flex-1 overflow-y-auto px-4 py-3 sm:px-6"
+            value="activity"
+          >
+            <ActivityFeed
+              {client}
+              connected={feed.live.state === "open"}
+              conversationId={id}
+              model={feed.model}
+            />
+          </Tabs.Content>
+          <Tabs.Content
+            class="min-h-0 flex-1 overflow-y-auto px-4 py-3 sm:px-6"
+            value="raw"
+          >
+            <RawEntries {client} conversationId={id} />
+          </Tabs.Content>
+          <Tabs.Content
+            class="min-h-0 flex-1 overflow-y-auto px-4 py-3 sm:px-6"
+            value="meta"
+          >
+            {@render rail()}
+          </Tabs.Content>
         </Tabs.Root>
         <Composer
           {client}