@hienlh/ppm 0.8.86 → 0.8.87

package/src/web/components/browser/browser-tab.tsx

@@ -1,141 +1,150 @@
-import { useState, useRef } from "react";
-import { Globe, Loader2, ExternalLink, Copy, X, RefreshCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useState, useRef, useCallback } from "react";
+import { ExternalLink, Globe, Loader2, RefreshCw, X } from "lucide-react";
+import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";
 
 interface BrowserTabProps {
   metadata?: Record<string, unknown>;
+  tabId?: string;
 }
 
-export function BrowserTab({ metadata }: BrowserTabProps) {
-  const initialPort = metadata?.port ? Number(metadata.port) : undefined;
-
-  const [port, setPort] = useState(initialPort?.toString() ?? "");
+export function BrowserTab({ metadata, tabId }: BrowserTabProps) {
+  const initialPort = (metadata?.port as number) || 0;
+  const [portInput, setPortInput] = useState(initialPort ? String(initialPort) : "");
   const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const updateTab = useTabStore((s) => s.updateTab);
 
-  const startTunnel = async () => {
-    const p = Number(port);
-    if (!p || p < 1 || p > 65535) {
-      setError("Enter a valid port (1-65535)");
-      return;
-    }
+  const startTunnel = useCallback(async (port: number) => {
     setLoading(true);
     setError(null);
+    setTunnelUrl(null);
+
     try {
-      const data = await api.post<{ port: number; url: string }>("/api/tunnel/port/start", { port: p });
-      setTunnelUrl(data.url);
-    } catch (e) {
-      setError((e as Error).message);
+      const res = await api.post<{ port: number; url: string }>("/api/preview/tunnel", { port });
+      setTunnelUrl(res.url);
+      if (tabId) updateTab(tabId, { title: `localhost:${port}`, metadata: { ...metadata, port } });
+    } catch (e: any) {
+      setError(e.message || `Failed to start tunnel for port ${port}`);
     } finally {
       setLoading(false);
     }
-  };
+  }, [tabId, metadata, updateTab]);
 
-  const stopTunnel = async () => {
-    const p = Number(port);
-    if (!p) return;
-    try {
-      await api.post("/api/tunnel/port/stop", { port: p });
-    } catch {}
+  const stopTunnel = useCallback(async () => {
+    const port = parseInt(portInput, 10);
+    if (!port) return;
+    try { await api.del(`/api/preview/tunnel/${port}`); } catch {}
     setTunnelUrl(null);
-  };
+    if (tabId) updateTab(tabId, { title: "Browser" });
+  }, [portInput, tabId, updateTab]);
 
-  const copyUrl = () => {
-    if (!tunnelUrl) return;
-    navigator.clipboard.writeText(tunnelUrl);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const port = parseInt(portInput, 10);
+    if (port >= 1 && port <= 65535) startTunnel(port);
+    else setError("Port must be 1-65535");
   };
 
-  const reloadIframe = () => {
+  const reload = () => {
     if (iframeRef.current) {
-      iframeRef.current.src = iframeRef.current.src;
+      const src = iframeRef.current.src;
+      iframeRef.current.src = "";
+      requestAnimationFrame(() => { if (iframeRef.current) iframeRef.current.src = src; });
     }
   };
 
-  // Port input screen
+  // No tunnel yet — show port input
   if (!tunnelUrl) {
     return (
-      <div className="flex items-center justify-center h-full p-4">
-        <div className="w-full max-w-sm space-y-4 text-center">
-          <Globe className="size-10 mx-auto text-muted-foreground" />
-          <div className="space-y-1">
-            <h3 className="text-sm font-medium">Open Tunnel</h3>
-            <p className="text-xs text-muted-foreground">
-              Enter a local port to create a public tunnel URL
-            </p>
-          </div>
-
-          <form
-            onSubmit={(e) => { e.preventDefault(); startTunnel(); }}
-            className="flex gap-2"
-          >
-            <Input
+      <div className="flex flex-col items-center justify-center h-full gap-4 p-6">
+        <Globe className="size-12 text-text-subtle" />
+        <h2 className="text-lg font-medium text-text-primary">Open Localhost</h2>
+        <p className="text-sm text-text-secondary text-center max-w-sm">
+          Enter the port of your local dev server to preview it here.
+        </p>
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 w-full max-w-xs">
+          <div className="flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg bg-surface border border-border focus-within:border-accent/50 transition-colors">
+            <span className="text-sm text-text-subtle shrink-0">localhost:</span>
+            <input
               type="number"
-              placeholder="e.g. 3000"
-              value={port}
-              onChange={(e) => setPort(e.target.value)}
-              className="h-9 text-sm font-mono flex-1"
+              value={portInput}
+              onChange={(e) => setPortInput(e.target.value)}
+              placeholder="3000"
               min={1}
               max={65535}
               autoFocus
-              disabled={loading}
+              className="flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle min-w-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             />
-            <Button
-              type="submit"
-              size="sm"
-              className="h-9 px-4 cursor-pointer"
-              disabled={loading || !port}
-            >
-              {loading ? <Loader2 className="size-4 animate-spin" /> : "Connect"}
-            </Button>
-          </form>
-
-          {error && (
-            <p className="text-xs text-red-500">{error}</p>
-          )}
-        </div>
+          </div>
+          <button
+            type="submit"
+            disabled={loading || !portInput}
+            className="px-4 py-2.5 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent/90 disabled:opacity-50 transition-colors shrink-0"
+          >
+            {loading ? <Loader2 className="size-4 animate-spin" /> : "Open"}
+          </button>
+        </form>
+        {error && <p className="text-sm text-red-400">{error}</p>}
+        {loading && (
+          <div className="flex items-center gap-2 text-sm text-text-secondary">
+            <Loader2 className="size-4 animate-spin" />
+            <span>Starting tunnel... (may take a few seconds)</span>
+          </div>
+        )}
       </div>
     );
   }
 
-  // Tunnel active — show toolbar + iframe
+  // Tunnel active — show iframe
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full w-full bg-background">
       {/* Toolbar */}
-      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/30 shrink-0">
-        <code className="text-[11px] font-mono text-muted-foreground truncate flex-1">
-          {tunnelUrl}
-        </code>
-        <Button variant="ghost" size="sm" className="h-6 px-1.5 cursor-pointer" onClick={copyUrl} title="Copy URL">
-          {copied ? <span className="text-[10px]">Copied!</span> : <Copy className="size-3" />}
-        </Button>
-        <Button variant="ghost" size="sm" className="h-6 px-1.5 cursor-pointer" onClick={reloadIframe} title="Reload">
-          <RefreshCw className="size-3" />
-        </Button>
-        <a href={tunnelUrl} target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="sm" className="h-6 px-1.5 cursor-pointer" title="Open in new tab">
-            <ExternalLink className="size-3" />
-          </Button>
-        </a>
-        <Button variant="ghost" size="sm" className="h-6 px-1.5 cursor-pointer text-red-500" onClick={stopTunnel} title="Stop tunnel">
-          <X className="size-3" />
-        </Button>
+      <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-surface shrink-0">
+        <Globe className="size-4 text-text-subtle shrink-0" />
+        <span className="text-xs text-text-primary font-medium">localhost:{portInput}</span>
+        <span className="text-xs text-text-subtle truncate ml-1">({tunnelUrl})</span>
+        <div className="flex-1" />
+        <button
+          onClick={reload}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Reload"
+        >
+          <RefreshCw className="size-3.5" />
+        </button>
+        <button
+          onClick={() => window.open(tunnelUrl, "_blank")}
+          className="p-1.5 rounded hover:bg-surface-elevated transition-colors"
+          title="Open in browser"
+        >
+          <ExternalLink className="size-3.5" />
+        </button>
+        <button
+          onClick={stopTunnel}
+          className="p-1.5 rounded hover:bg-surface-elevated text-red-400 transition-colors"
+          title="Stop tunnel"
+        >
+          <X className="size-3.5" />
+        </button>
       </div>
 
-      {/* Iframe preview */}
-      <iframe
-        ref={iframeRef}
-        src={tunnelUrl}
-        className="flex-1 w-full border-none bg-white"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-        title={`Preview port ${port}`}
-      />
+      {/* iframe */}
+      <div className="flex-1 relative min-h-0">
+        <iframe
+          ref={iframeRef}
+          src={tunnelUrl}
+          className="w-full h-full border-0"
+          sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+          onLoad={() => setLoading(false)}
+        />
+        {loading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+            <Loader2 className="size-5 animate-spin text-text-secondary" />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/src/web/components/chat/account-rotation-settings.tsx

@@ -0,0 +1,163 @@
+import { useState, useEffect, useSyncExternalStore } from "react";
+import { Settings, X } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import {
+  getAccountSettings,
+  updateAccountSettings,
+  type AccountSettings,
+} from "../../lib/api-settings";
+
+interface AccountRotationSettingsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const mdQuery = typeof window !== "undefined" ? window.matchMedia("(min-width: 768px)") : null;
+function subscribeMedia(cb: () => void) {
+  mdQuery?.addEventListener("change", cb);
+  return () => mdQuery?.removeEventListener("change", cb);
+}
+function getIsDesktop() {
+  return mdQuery?.matches ?? true;
+}
+
+function SettingsContent() {
+  const [settings, setSettings] = useState<AccountSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    getAccountSettings()
+      .then(setSettings)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <p className="text-xs text-text-subtle py-4 text-center">Loading...</p>;
+  }
+  if (!settings) {
+    return <p className="text-xs text-text-subtle py-4 text-center">Failed to load settings</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Strategy */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-text-primary">Rotation Strategy</label>
+        <Select
+          value={settings.strategy}
+          onValueChange={async (v) => {
+            const updated = await updateAccountSettings({ strategy: v as AccountSettings["strategy"] });
+            setSettings(updated);
+          }}
+        >
+          <SelectTrigger className="w-full h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="round-robin">Round-robin</SelectItem>
+            <SelectItem value="fill-first">Fill-first</SelectItem>
+            <SelectItem value="lowest-usage">Lowest usage</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-text-subtle">
+          {settings.strategy === "round-robin" && "Cycles through accounts evenly"}
+          {settings.strategy === "fill-first" && "Uses one account until its limit, then moves on"}
+          {settings.strategy === "lowest-usage" && "Picks the account with the lowest current usage"}
+        </p>
+      </div>
+
+      {/* Max Retry */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-text-primary">Max Retry</label>
+        <input
+          type="number"
+          min={0}
+          value={settings.maxRetry}
+          className="w-full h-9 text-xs border rounded-md px-3 bg-background"
+          onChange={async (e) => {
+            const v = parseInt(e.target.value, 10);
+            if (!isNaN(v) && v >= 0) {
+              const updated = await updateAccountSettings({ maxRetry: v });
+              setSettings(updated);
+            }
+          }}
+        />
+        <p className="text-[10px] text-text-subtle">
+          How many accounts to try on failure. 0 = try all available accounts.
+        </p>
+      </div>
+
+      {/* Active accounts */}
+      <div className="flex items-center justify-between text-xs border-t border-border pt-3">
+        <span className="text-text-subtle">Active accounts</span>
+        <span className="font-medium text-text-primary">{settings.activeCount}</span>
+      </div>
+    </div>
+  );
+}
+
+export function AccountRotationSettings({ open, onOpenChange }: AccountRotationSettingsProps) {
+  const isDesktop = useSyncExternalStore(subscribeMedia, getIsDesktop);
+
+  if (!open) return null;
+
+  // Desktop: Dialog
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle className="text-sm flex items-center gap-2">
+              <Settings className="size-4" /> Rotation & Retry
+            </DialogTitle>
+          </DialogHeader>
+          <SettingsContent />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Mobile: Bottom sheet
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 transition-opacity duration-200 opacity-100"
+        onClick={() => onOpenChange(false)}
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      />
+      <div
+        className={cn(
+          "fixed bottom-0 left-0 right-0 z-50 bg-background rounded-t-2xl border-t border-border shadow-2xl",
+          "transition-transform duration-300 ease-out max-h-[85vh] overflow-y-auto",
+          "translate-y-0",
+        )}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-border" />
+        </div>
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+          <span className="text-sm font-semibold flex items-center gap-2">
+            <Settings className="size-4" /> Rotation & Retry
+          </span>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="flex items-center justify-center size-7 rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-4 py-4 pb-8">
+          <SettingsContent />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -22,6 +22,7 @@ interface ChatHistoryBarProps {
   onSelectSession?: (session: SessionInfo) => void;
   onBugReport?: () => void;
   isConnected?: boolean;
+  streamingAccountLabel?: string | null;
   onReconnect?: () => void;
 }
 
@@ -48,9 +49,37 @@ function pctColor(pct: number): string {
   return "text-green-500";
 }
 
+function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={async () => {
+        try {
+          const data = await api.get<{ ppmSessionId: string; sdkSessionId: string; jsonlPath: string | null; projectPath: string }>(
+            `${projectUrl(projectName)}/chat/sessions/${sessionId}/debug?project=${encodeURIComponent(projectName)}`,
+          );
+          const info = [
+            `PPM Session: ${data.ppmSessionId}`,
+            `SDK Session: ${data.sdkSessionId}`,
+            data.jsonlPath ? `JSONL: ${data.jsonlPath}` : `JSONL: not found`,
+            data.projectPath ? `Project: ${data.projectPath}` : null,
+          ].filter(Boolean).join("\n");
+          await navigator.clipboard.writeText(info);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        } catch { /* silent */ }
+      }}
+      className={`p-1 rounded transition-colors ${copied ? "text-green-500 bg-green-500/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-elevated"}`}
+      title={copied ? "Copied!" : "Copy session debug info"}
+    >
+      {copied ? <ClipboardCheck className="size-3" /> : <Bug className="size-3" />}
+    </button>
+  );
+}
+
 export function ChatHistoryBar({
   projectName, usageInfo, contextWindowPct, usageLoading, refreshUsage, lastFetchedAt,
-  sessionId, onSelectSession, onBugReport, isConnected, onReconnect,
+  sessionId, onSelectSession, onBugReport, isConnected, streamingAccountLabel, onReconnect,
 }: ChatHistoryBarProps) {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
@@ -121,6 +150,27 @@ export function ChatHistoryBar({
 
   const cancelEditing = useCallback(() => setEditingId(null), []);
 
+  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    if (!projectName) return;
+    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
+    try {
+      if (session.pinned) {
+        await api.del(url);
+      } else {
+        await api.put(url);
+      }
+      setSessions((prev) => {
+        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
+        return updated.sort((a, b) => {
+          if (a.pinned && !b.pinned) return -1;
+          if (!a.pinned && b.pinned) return 1;
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        });
+      });
+    } catch { /* silent */ }
+  }, [projectName]);
+
   // Filter sessions by search query
   const filteredSessions = searchQuery.trim()
     ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
@@ -167,8 +217,8 @@ export function ChatHistoryBar({
           title="Usage limits"
         >
           <Activity className="size-3" />
-          {usageInfo.activeAccountLabel && (
-            <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
+          {(streamingAccountLabel || usageInfo.activeAccountLabel) && (
+            <span className="text-text-secondary font-normal truncate max-w-[60px]">[{streamingAccountLabel || usageInfo.activeAccountLabel}]</span>
           )}
           <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
           <span className="text-text-subtle">·</span>
@@ -195,6 +245,11 @@ export function ChatHistoryBar({
           </button>
         )}
 
+        {/* Debug info — copy session IDs + JSONL path */}
+        {sessionId && (
+          <DebugCopyButton sessionId={sessionId} projectName={projectName} />
+        )}
+
         {/* Connection indicator */}
         {onReconnect && (
           <button
@@ -277,9 +332,20 @@ export function ChatHistoryBar({
                       >
                         {session.title || "Untitled"}
                       </button>
+                      <button
+                        onClick={(e) => togglePin(e, session)}
+                        className={`p-0.5 rounded transition-all ${
+                          session.pinned
+                            ? "text-primary hover:text-primary/70"
+                            : "text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100"
+                        }`}
+                        title={session.pinned ? "Unpin session" : "Pin session"}
+                      >
+                        {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+                      </button>
                       <button
                         onClick={(e) => startEditing(session, e)}
-                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100 transition-opacity"
                         title="Rename session"
                       >
                         <Pencil className="size-3" />
@@ -287,7 +353,7 @@ export function ChatHistoryBar({
                     </>
                   )}
                   {editingId !== session.id && session.updatedAt && (
-                    <span className="text-[10px] text-text-subtle shrink-0">{formatDate(session.updatedAt)}</span>
+                    <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
                   )}
                 </div>
               ))

package/src/web/components/chat/chat-tab.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import { Upload, X } from "lucide-react";
+import { Loader2, Upload, X } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
@@ -14,6 +14,7 @@ import { MessageInput, type ChatAttachment } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
+import { ChatWelcome } from "./chat-welcome";
 import type { DragEvent } from "react";
 import type { FileNode } from "../../../types/project";
 import type { Session, SessionInfo } from "../../../types/chat";
@@ -83,12 +84,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     messages,
     messagesLoading,
     isStreaming,
-    streamingStatus,
+    phase,
+    isReconnecting,
     connectingElapsed,
-    thinkingWarningThreshold,
     pendingApproval,
     contextWindowPct,
     sessionTitle,
+    streamingAccountLabel,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -311,19 +313,32 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         </div>
       )}
 
-      {/* Messages */}
-      <MessageList
-        messages={messages}
-        messagesLoading={messagesLoading}
-        pendingApproval={pendingApproval}
-        onApprovalResponse={respondToApproval}
-        isStreaming={isStreaming}
-        streamingStatus={streamingStatus}
-        connectingElapsed={connectingElapsed}
-        thinkingWarningThreshold={thinkingWarningThreshold}
-        projectName={projectName}
-        onFork={!isStreaming ? handleFork : undefined}
-      />
+      {/* Reconnect overlay */}
+      {isReconnecting && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" />
+            <span>Reconnecting...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Messages or Welcome screen */}
+      {!sessionId ? (
+        <ChatWelcome projectName={projectName} onSelectSession={handleSelectSession} />
+      ) : (
+        <MessageList
+          messages={messages}
+          messagesLoading={messagesLoading}
+          pendingApproval={pendingApproval}
+          onApprovalResponse={respondToApproval}
+          isStreaming={isStreaming}
+          phase={phase}
+          connectingElapsed={connectingElapsed}
+          projectName={projectName}
+          onFork={!isStreaming ? handleFork : undefined}
+        />
+      )}
 
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-background shrink-0">
@@ -339,6 +354,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onSelectSession={handleSelectSession}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}
+          streamingAccountLabel={streamingAccountLabel}
           onReconnect={() => {
             if (!isConnected) reconnect();
             refetchMessages();