@hienlh/ppm 0.9.80 → 0.9.81

package/src/providers/claude-agent-sdk.ts

@@ -109,6 +109,7 @@ interface StreamingSession {
  */
 interface PendingApproval {
   resolve: (result: { approved: boolean; data?: unknown }) => void;
+  sessionId: string;
 }
 
 /**
@@ -360,7 +361,13 @@ export class ClaudeAgentSdkProvider implements AIProvider {
     this.closeStreamingSession(sessionId);
     this.activeSessions.delete(sessionId);
     this.messageCount.delete(sessionId);
-    this.pendingApprovals.delete(sessionId);
+    // Resolve and clean up all pending approvals for this session
+    for (const [reqId, pending] of this.pendingApprovals) {
+      if (pending.sessionId === sessionId) {
+        pending.resolve({ approved: false });
+        this.pendingApprovals.delete(reqId);
+      }
+    }
     this.forkSources.delete(sessionId);
 
     // Best-effort: delete JSONL from ~/.claude/projects/
@@ -543,15 +550,9 @@ export class ClaudeAgentSdkProvider implements AIProvider {
      */
     const waitForApproval = (toolName: string, input: unknown): Promise<{ approved: boolean; data?: unknown }> => {
       const requestId = crypto.randomUUID();
-      const APPROVAL_TIMEOUT_MS = 5 * 60_000;
+      // No timeout — approval waits indefinitely until user responds or session cleanup resolves it.
       const promise = new Promise<{ approved: boolean; data?: unknown }>((resolve) => {
-        this.pendingApprovals.set(requestId, { resolve });
-        setTimeout(() => {
-          if (this.pendingApprovals.has(requestId)) {
-            this.pendingApprovals.delete(requestId);
-            resolve({ approved: false });
-          }
-        }, APPROVAL_TIMEOUT_MS);
+        this.pendingApprovals.set(requestId, { resolve, sessionId });
       });
       approvalEvents.push({ type: "approval_request", requestId, tool: toolName, input });
       approvalNotify?.();
@@ -609,7 +610,6 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       PreToolUse: [{
         matcher: ".*",  // Match all tools — our hook checks internally
         hooks: [preToolUseHook],
-        timeout: 300,  // 5min for user approval
       }],
     };
 

package/src/server/ws/chat.ts

@@ -85,6 +85,21 @@ function bufferAndBroadcast(sessionId: string, event: unknown): void {
     if (entry.turnEvents.length < MAX_TURN_EVENTS) {
       entry.turnEvents.push({ ...(event as Record<string, unknown>) });
     }
+    // Enrich: embed tool_result onto matching tool_use for reconnect reliability.
+    // Reconnecting clients may miss separate tool_result events — this ensures
+    // the tool_use event itself carries the result as a fallback.
+    if (evType === "tool_result") {
+      const toolUseId = (event as any)?.toolUseId;
+      if (toolUseId) {
+        for (let i = entry.turnEvents.length - 1; i >= 0; i--) {
+          const buffered = entry.turnEvents[i] as any;
+          if (buffered.type === "tool_use" && buffered.toolUseId === toolUseId) {
+            buffered.result = { output: (event as any).output, isError: (event as any).isError };
+            break;
+          }
+        }
+      }
+    }
   }
   broadcast(sessionId, event);
 }

package/src/services/cloud-ws.service.ts

@@ -152,7 +152,9 @@ function doConnect(): void {
   sock.onopen = () => {
     if (ws !== sock) return; // stale — newer connection replaced us
     reconnecting = false;
-    reconnectAttempt = 0;
+    // Don't reset reconnectAttempt here — only after auth succeeds.
+    // Resetting on open causes tight reconnect loops when the server
+    // keeps closing immediately after connect (backoff never builds up).
     log("INFO", "Cloud WS connected, sending auth");
 
     // Send auth as first message — server must process this before any other msg
@@ -170,6 +172,7 @@ function doConnect(): void {
     setTimeout(() => {
       if (ws !== sock) return; // replaced during delay
       connected = true;
+      reconnectAttempt = 0; // Auth succeeded — reset backoff
 
       // Flush queued messages
       while (outboundQueue.length > 0 && connected) {

package/src/services/tunnel.service.ts

@@ -123,11 +123,29 @@ class TunnelService {
     this.stopCloudSync();
   }
 
-  /** Get current tunnel URL (null if not running) */
+  /** Get current tunnel URL (null if not running).
+   *  Falls back to status.json if the supervisor set the URL after this process started. */
   getTunnelUrl(): string | null {
+    if (this.url) return this.url;
+    // Lazy sync: supervisor may have written shareUrl after server startup
+    this.syncFromStatusFile();
     return this.url;
   }
 
+  /** Re-read tunnel state from status.json (supervisor may have updated it after server started) */
+  private syncFromStatusFile(): void {
+    if (this.url) return; // already have a URL
+    try {
+      const statusFile = resolve(homedir(), ".ppm", "status.json");
+      const status = JSON.parse(readFileSync(statusFile, "utf-8"));
+      if (status.shareUrl) {
+        this.url = status.shareUrl;
+        this.supervisorManaged = true;
+        if (status.tunnelPid) this.externalPid = status.tunnelPid;
+      }
+    } catch {}
+  }
+
   /** Get cloudflared PID (child process or external) */
   getTunnelPid(): number | null {
     return this.childProcess?.pid ?? this.externalPid;

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

@@ -24,7 +24,6 @@ interface TeamActivityState {
 interface ChatHistoryBarProps {
   projectName: string;
   usageInfo: UsageInfo;
-  compactStatus?: "compacting" | null;
   usageLoading?: boolean;
   refreshUsage?: () => void;
   lastFetchedAt?: string | null;
@@ -95,7 +94,7 @@ function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projec
 }
 
 export function ChatHistoryBar({
-  projectName, usageInfo, compactStatus, usageLoading, refreshUsage, lastFetchedAt,
+  projectName, usageInfo, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, providerId, onSelectSession, onBugReport, isConnected, onReconnect,
   teamActivity, teamMessages, onTeamOpen,
 }: ChatHistoryBarProps) {
@@ -290,20 +289,8 @@ export function ChatHistoryBar({
             <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
             <span className="text-text-subtle">·</span>
             <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
-            {compactStatus === "compacting" && (
-              <>
-                <span className="text-text-subtle">·</span>
-                <span className="text-blue-400 animate-pulse">compacting...</span>
-              </>
-            )}
           </button>
-        ) : (
-          compactStatus === "compacting" ? (
-            <span className="text-[11px] px-1.5 py-0.5 text-blue-400 animate-pulse">
-              compacting...
-            </span>
-          ) : null
-        )}
+        ) : null}
 
         {/* Team activity */}
         {teamActivity?.hasTeams && (

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

@@ -347,6 +347,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         phase={phase}
         connectingElapsed={connectingElapsed}
         statusMessage={statusMessage}
+        compactStatus={compactStatus}
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
         onSelectSession={handleSelectSession}
@@ -358,7 +359,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         <ChatHistoryBar
           projectName={projectName}
           usageInfo={usageInfo}
-          compactStatus={compactStatus}
           usageLoading={usageLoading}
           refreshUsage={refreshUsage}
           lastFetchedAt={lastFetchedAt}

package/src/web/components/chat/message-list.tsx

@@ -43,6 +43,7 @@ interface MessageListProps {
   phase?: SessionPhase;
   connectingElapsed?: number;
   statusMessage?: string | null;
+  compactStatus?: "compacting" | null;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string, messageId?: string) => void;
@@ -60,6 +61,7 @@ export function MessageList({
   onSelectSession,
   connectingElapsed,
   statusMessage,
+  compactStatus,
   projectName,
   onFork,
 }: MessageListProps) {
@@ -117,6 +119,7 @@ export function MessageList({
         )}
 
         {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} phase={phase} elapsed={connectingElapsed} statusMessage={statusMessage} />}
+        {!isStreaming && compactStatus === "compacting" && <ThinkingIndicator lastMessage={undefined} phase="thinking" elapsed={undefined} statusMessage="Compacting messages..." />}
       </StickToBottom.Content>
       <ScrollToBottomButton />
     </StickToBottom>
@@ -675,6 +678,17 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
     }
   }
 
+  // Third pass: fallback to embedded result from buffer enrichment (reconnect).
+  // When BE buffers tool_result, it also attaches result onto the matching tool_use event.
+  for (const g of groups) {
+    if (g.kind === "tool" && !g.result && g.tool.type === "tool_use") {
+      const embedded = (g.tool as any).result;
+      if (embedded) {
+        g.result = { type: "tool_result", output: embedded.output, isError: embedded.isError } as ChatEvent;
+      }
+    }
+  }
+
   // Mark tool groups without explicit tool_result as completed when:
   // 1. It's a Read and a later Edit on the same file has a result (Edit implies Read finished)
   // 2. Streaming is fully finished
@@ -762,7 +776,7 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
 function StreamingText({ content, animate: isStreaming, projectName }: { content: string; animate: boolean; projectName?: string }) {
   return (
     <>
-      <MarkdownContent content={content} projectName={projectName} />
+      <MarkdownContent content={content} projectName={projectName} isStreaming={isStreaming} />
       {isStreaming && (
         <span className="text-text-subtle text-sm animate-pulse">Thinking...</span>
       )}
@@ -826,10 +840,10 @@ function stripTeammateMessages(text: string): string {
 }
 
 /** Wrapper: delegates to shared MarkdownRenderer with code actions enabled */
-function MarkdownContent({ content, projectName }: { content: string; projectName?: string }) {
+function MarkdownContent({ content, projectName, isStreaming }: { content: string; projectName?: string; isStreaming?: boolean }) {
   const cleaned = stripTeammateMessages(content);
   if (!cleaned) return null;
-  return <MarkdownRenderer content={cleaned} projectName={projectName} codeActions />;
+  return <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} />;
 }
 
 /* ToolCard, ToolSummary, ToolDetails extracted to ./tool-cards.tsx */

package/src/web/components/layout/mobile-nav.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
@@ -9,7 +9,7 @@ import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { findPanelPosition, MAX_ROWS } from "@/stores/panel-utils";
 import { resolveProjectColor } from "@/lib/project-palette";
 import { getProjectInitials } from "@/lib/project-avatar";
-import type { TabType } from "@/stores/tab-store";
+import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
@@ -33,11 +33,27 @@ interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void;
 
 export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const focusedPanelId = usePanelStore((s) => s.focusedPanelId);
-  const panel = usePanelStore((s) => s.panels[s.focusedPanelId]);
-  const panelCount = usePanelStore((s) => Object.keys(s.panels).length);
+  const panels = usePanelStore((s) => s.panels);
   const grid = usePanelStore((s) => s.grid);
-  const tabs = panel?.tabs ?? [];
-  const activeTabId = panel?.activeTabId ?? null;
+
+  // Merge tabs from all panels in grid (mobile shows single merged tab bar)
+  const { tabs, tabPanelMap } = useMemo(() => {
+    const panelIds = grid.flat();
+    const allTabs: Tab[] = [];
+    const map: Record<string, string> = {};
+    for (const pid of panelIds) {
+      const p = panels[pid];
+      if (p) {
+        for (const t of p.tabs) {
+          allTabs.push(t);
+          map[t.id] = pid;
+        }
+      }
+    }
+    return { tabs: allTabs, tabPanelMap: map };
+  }, [panels, grid]);
+
+  const activeTabId = panels[focusedPanelId]?.activeTabId ?? null;
   const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
   const mobileScrollRef = useRef<HTMLDivElement>(null);
   const prevTabCount = useRef(tabs.length);
@@ -65,36 +81,46 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
     if (longPressTimer.current) { clearTimeout(longPressTimer.current); longPressTimer.current = null; }
   }, []);
 
-  // Context menu actions
-  const pos = findPanelPosition(grid, focusedPanelId);
+  // Context menu actions — use the tab's actual panel (not always focused)
+  const menuTab = menuTabId ? tabs.find((t) => t.id === menuTabId) : null;
+  const menuTabPanelId = menuTabId ? tabPanelMap[menuTabId] ?? focusedPanelId : focusedPanelId;
+  const menuTabPanelTabs = panels[menuTabPanelId]?.tabs ?? [];
+  const menuTabIdx = menuTabId ? menuTabPanelTabs.findIndex((t) => t.id === menuTabId) : -1;
+
+  const pos = findPanelPosition(grid, menuTabPanelId);
   const canSplitDown = pos ? grid.length < MAX_ROWS : false;
-  const otherPanelIds = Object.keys(usePanelStore.getState().panels).filter((id) => id !== focusedPanelId);
+  const otherPanelIds = grid.flat().filter((id) => id !== menuTabPanelId);
 
   function moveTabLeft(tabId: string) {
-    const idx = tabs.findIndex((t) => t.id === tabId);
-    if (idx > 0) usePanelStore.getState().reorderTab(tabId, focusedPanelId, idx - 1);
+    const pid = tabPanelMap[tabId] ?? focusedPanelId;
+    const pTabs = usePanelStore.getState().panels[pid]?.tabs ?? [];
+    const idx = pTabs.findIndex((t) => t.id === tabId);
+    if (idx > 0) usePanelStore.getState().reorderTab(tabId, pid, idx - 1);
   }
   function moveTabRight(tabId: string) {
-    const idx = tabs.findIndex((t) => t.id === tabId);
-    if (idx < tabs.length - 1) usePanelStore.getState().reorderTab(tabId, focusedPanelId, idx + 1);
+    const pid = tabPanelMap[tabId] ?? focusedPanelId;
+    const pTabs = usePanelStore.getState().panels[pid]?.tabs ?? [];
+    const idx = pTabs.findIndex((t) => t.id === tabId);
+    if (idx < pTabs.length - 1) usePanelStore.getState().reorderTab(tabId, pid, idx + 1);
   }
   function splitDown(tabId: string) {
-    usePanelStore.getState().splitPanel("down", tabId, focusedPanelId);
+    const pid = tabPanelMap[tabId] ?? focusedPanelId;
+    usePanelStore.getState().splitPanel("down", tabId, pid);
   }
   function moveToPanel(tabId: string, targetPanelId: string) {
-    usePanelStore.getState().moveTab(tabId, focusedPanelId, targetPanelId);
+    const pid = tabPanelMap[tabId] ?? focusedPanelId;
+    usePanelStore.getState().moveTab(tabId, pid, targetPanelId);
   }
 
-  const menuTab = menuTabId ? tabs.find((t) => t.id === menuTabId) : null;
-  const menuTabIdx = menuTabId ? tabs.findIndex((t) => t.id === menuTabId) : -1;
-
   const { activeProject: activeProjectForTab } = useProjectStore.getState();
   function handleNewTab(type: TabType) {
+    const state = usePanelStore.getState();
+    const firstPanelId = state.grid[0]?.[0] ?? state.focusedPanelId;
     const needsProject = type === "git-graph" || type === "git-diff" || type === "terminal" || type === "chat";
     const metadata = needsProject ? { projectName: activeProjectForTab?.name } : undefined;
-    usePanelStore.getState().openTab(
+    state.openTab(
       { type, title: NEW_TAB_LABELS[type] ?? type, metadata, projectId: activeProjectForTab?.name ?? null, closable: true },
-      focusedPanelId,
+      firstPanelId,
     );
     setNewTabSheetOpen(false);
   }
@@ -255,7 +281,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
                 <ArrowRight className="size-4" /> Move Right
               </button>
             )}
-            {canSplitDown && tabs.length > 1 && (
+            {canSplitDown && menuTabPanelTabs.length > 1 && (
               <button onClick={() => { splitDown(menuTabId!); setMenuTabId(null); }}
                 className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated">
                 <SplitSquareVertical className="size-4" /> Split to Bottom

package/src/web/components/layout/panel-layout.tsx

@@ -3,6 +3,7 @@ import { Panel, Group, Separator } from "react-resizable-panels";
 import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { createPanel } from "@/stores/panel-utils";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { EditorPanel } from "./editor-panel";
 
 interface PanelLayoutProps {
@@ -10,9 +11,11 @@ interface PanelLayoutProps {
 }
 
 export function PanelLayout({ projectName }: PanelLayoutProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
   const grid = usePanelStore((s) =>
     s.currentProject === projectName ? s.grid : (s.projectGrids[projectName] ?? [[]]),
   );
+  const focusedPanelId = usePanelStore((s) => s.focusedPanelId);
   const panelCount = grid.flat().length;
 
   // Recover from empty grid (corrupt persisted state or edge-case bug)
@@ -29,6 +32,14 @@ export function PanelLayout({ projectName }: PanelLayoutProps) {
 
   if (panelCount === 0) return null;
 
+  // Mobile: render only the focused panel (tabs are merged in MobileNav)
+  if (!isDesktop) {
+    const allPanelIds = grid.flat();
+    const panelId = allPanelIds.includes(focusedPanelId) ? focusedPanelId : allPanelIds[0];
+    if (!panelId) return null;
+    return <EditorPanel panelId={panelId} projectName={projectName} />;
+  }
+
   if (panelCount === 1 && grid[0]?.[0]) {
     return <EditorPanel panelId={grid[0][0]} projectName={projectName} />;
   }

package/src/web/components/shared/markdown-renderer.tsx

@@ -41,6 +41,7 @@ interface MarkdownRendererProps {
   projectName?: string;
   className?: string;
   codeActions?: boolean;
+  isStreaming?: boolean;
 }
 
 /**
@@ -93,7 +94,7 @@ function transformHtml(raw: string): string {
   return html;
 }
 
-export function MarkdownRenderer({ content, projectName, className = "", codeActions = false }: MarkdownRendererProps) {
+export function MarkdownRenderer({ content, projectName, className = "", codeActions = false, isStreaming = false }: MarkdownRendererProps) {
   const html = useMemo(() => {
     try {
       const raw = marked.parse(content) as string;
@@ -321,7 +322,7 @@ export function MarkdownRenderer({ content, projectName, className = "", codeAct
   return (
     <div
       ref={containerRef}
-      className={`markdown-content prose-sm ${className}`}
+      className={`markdown-content prose-sm ${isStreaming ? "is-streaming" : ""} ${className}`}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );

package/src/web/hooks/use-chat.ts

@@ -4,6 +4,7 @@ import { api, getAuthToken, projectUrl } from "@/lib/api-client";
 import { useNotificationStore } from "@/stores/notification-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { playNotificationSound } from "@/lib/notification-sounds";
+import { toast } from "sonner";
 import type { ChatMessage, ChatEvent } from "../../types/chat";
 import type { ChatWsServerMessage, SessionPhase } from "../../types/api";
 
@@ -91,6 +92,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   sessionIdRef.current = sessionId;
   const projectNameRef = useRef(projectName);
   projectNameRef.current = projectName;
+  /** Toast ID for the current pending approval notification */
+  const approvalToastRef = useRef<string | number | null>(null);
 
   // Team activity tracking
   const teamActivityRef = useRef<{
@@ -247,6 +250,29 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           const nType = ev.tool === "AskUserQuestion" ? "question" : "approval_request";
           useNotificationStore.getState().addNotification(sessionIdRef.current, nType, projectNameRef.current);
           playNotificationSound(nType);
+          // Persistent toast with action to navigate to the waiting session
+          const sid = sessionIdRef.current;
+          const isQuestion = ev.tool === "AskUserQuestion";
+          approvalToastRef.current = toast[isQuestion ? "info" : "warning"](
+            isQuestion ? "AI has a question" : `${ev.tool} needs permission`,
+            {
+              description: projectNameRef.current || `Session ${sid.slice(0, 8)}`,
+              duration: Infinity,
+              action: {
+                label: "Go to session",
+                onClick: () => {
+                  const { panels } = usePanelStore.getState();
+                  for (const [panelId, panel] of Object.entries(panels)) {
+                    const tab = panel.tabs.find((t) => t.metadata?.sessionId === sid);
+                    if (tab) {
+                      usePanelStore.getState().setActiveTab(tab.id, panelId);
+                      break;
+                    }
+                  }
+                },
+              },
+            },
+          );
         }
         break;
       }
@@ -464,6 +490,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setPhase("idle");
     phaseRef.current = "idle";
     setPendingApproval(null);
+    if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
     setCompactStatus(null);
     streamingContentRef.current = "";
     streamingEventsRef.current = [];
@@ -548,6 +575,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         phaseRef.current = "thinking";
       }
       setPendingApproval(null);
+      if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
 
       send(JSON.stringify({
         type: "message",
@@ -590,6 +618,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       }
 
       setPendingApproval(null);
+      if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
     },
     [send],
   );
@@ -620,6 +649,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setPhase("idle");
     phaseRef.current = "idle";
     setPendingApproval(null);
+    if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
   }, [send]);
 
   const reconnect = useCallback(() => {

package/src/web/stores/panel-store.ts

@@ -209,7 +209,11 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
     },
 
     openTab: (tabDef, panelId?) => {
-      const pid = resolvePanel(panelId);
+      const mobile = get().isMobile();
+      // On mobile, always open in first panel (tabs merged in mobile nav)
+      const pid = mobile
+        ? (get().grid[0]?.[0] ?? resolvePanel(panelId))
+        : resolvePanel(panelId);
       const panel = get().panels[pid];
       if (!panel) return "";
 
@@ -250,6 +254,26 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         }
       }
 
+      // Mobile: dedup across all panels (merged tab bar shows all tabs)
+      if (mobile) {
+        for (const gpid of get().grid.flat()) {
+          const p = get().panels[gpid];
+          if (!p) continue;
+          const existing = p.tabs.find((t) => t.id === baseId || t.id.startsWith(`${baseId}@`));
+          if (existing) {
+            set((s) => ({
+              focusedPanelId: p.id,
+              panels: {
+                ...s.panels,
+                [p.id]: { ...p, activeTabId: existing.id, tabHistory: pushHistory(p.tabHistory, existing.id) },
+              },
+            }));
+            persist();
+            return existing.id;
+          }
+        }
+      }
+
       // Non-singleton: dedup within SAME panel only
       const currentPanel = get().panels[pid]!;
       const existingInPanel = currentPanel.tabs.find((t) => t.id === baseId);

package/src/web/styles/globals.css

@@ -259,3 +259,17 @@ html, body {
 .animate-blink {
   animation: blink 0.8s ease-in-out infinite;
 }
+
+/* Streaming text fade-in — last element slides in as tokens arrive */
+@keyframes streamFadeIn {
+  from { opacity: 0.6; transform: translateY(2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.markdown-content.is-streaming > *:last-child {
+  animation: streamFadeIn 0.25s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .markdown-content.is-streaming > *:last-child { animation: none; }
+}