@hienlh/ppm 0.9.80 → 0.9.82

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

@@ -32,7 +32,7 @@ interface MessageInputProps {
   projectName?: string;
   /** Slash picker state change */
   onSlashStateChange?: (visible: boolean, filter: string) => void;
-  onSlashItemsLoaded?: (items: SlashItem[]) => void;
+  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean) => void;
   slashSelected?: SlashItem | null;
   /** File picker state change */
   onFileStateChange?: (visible: boolean, filter: string) => void;
@@ -83,6 +83,9 @@ export const MessageInput = memo(function MessageInput({
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
+  const slashRankedRef = useRef(false);
+  const slashDebounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const slashSearchIdRef = useRef(0);
   const fileItemsRef = useRef<FileNode[]>([]);
 
   // Voice input (Web Speech API)
@@ -147,21 +150,29 @@ export const MessageInput = memo(function MessageInput({
   useEffect(() => {
     if (!projectName) {
       slashItemsRef.current = [];
-      onSlashItemsLoaded?.([]);
+      onSlashItemsLoaded?.([], false);
       return;
     }
     api
       .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items`)
       .then((items) => {
         slashItemsRef.current = items;
-        onSlashItemsLoaded?.(items);
+        slashRankedRef.current = false;
+        onSlashItemsLoaded?.(items, false);
       })
       .catch(() => {
         slashItemsRef.current = [];
-        onSlashItemsLoaded?.([]);
+        onSlashItemsLoaded?.([], false);
       });
   }, [projectName]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
+    };
+  }, []);
+
   // Fetch file tree when projectName changes
   useEffect(() => {
     if (!projectName) {
@@ -387,6 +398,30 @@ export const MessageInput = memo(function MessageInput({
     [handleSend, permissionMode, onModeChange],
   );
 
+  /** Debounced server-side fuzzy search for slash items */
+  const fetchSlashSearch = useCallback(
+    (query: string) => {
+      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
+      if (!projectName || !query) return;
+      const requestId = ++slashSearchIdRef.current;
+      slashDebounceRef.current = setTimeout(() => {
+        api
+          .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
+          .then((items) => {
+            if (requestId !== slashSearchIdRef.current) return; // stale response
+            slashItemsRef.current = items;
+            slashRankedRef.current = true;
+            onSlashItemsLoaded?.(items, true);
+          })
+          .catch(() => {
+            if (requestId !== slashSearchIdRef.current) return;
+            slashRankedRef.current = false;
+          });
+      }, 150);
+    },
+    [projectName, onSlashItemsLoaded],
+  );
+
   const updatePickerState = useCallback(
     (text: string, cursorPos: number) => {
       const textBefore = text.slice(0, cursorPos);
@@ -394,11 +429,18 @@ export const MessageInput = memo(function MessageInput({
       // Check for slash anywhere in text (after whitespace or at start)
       const slashMatch = textBefore.match(/(?:^|\s)\/(\S*)$/);
       if (slashMatch && slashItemsRef.current.length > 0) {
-        onSlashStateChange?.(true, slashMatch[1] ?? "");
+        const filter = slashMatch[1] ?? "";
+        onSlashStateChange?.(true, filter);
         onFileStateChange?.(false, "");
+        // Trigger server-side search for non-empty filter
+        if (filter) fetchSlashSearch(filter);
         return;
       }
 
+      // Cancel pending search when slash picker closes
+      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
+      if (slashRankedRef.current) slashRankedRef.current = false;
+
       // Check for @ anywhere in text (after whitespace or at start)
       const atMatch = textBefore.match(/@(\S*)$/);
       if (atMatch && fileItemsRef.current.length > 0) {
@@ -411,7 +453,7 @@ export const MessageInput = memo(function MessageInput({
       onSlashStateChange?.(false, "");
       onFileStateChange?.(false, "");
     },
-    [onSlashStateChange, onFileStateChange],
+    [onSlashStateChange, onFileStateChange, fetchSlashSearch],
   );
 
   const handleChange = useCallback(

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) {
@@ -103,9 +105,9 @@ export function MessageList({
                 isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                 projectName={projectName}
                 onFork={msg.role === "user" && onFork ? () => {
-                  // Pass the previous message ID so the fork includes history up to (but not including) this user message
+                  // Pass the SDK UUID of the previous assistant message for fork (JSONL-level message ID)
                   const prevMsg = idx > 0 ? filtered[idx - 1] : undefined;
-                  onFork(msg.content, prevMsg?.id);
+                  onFork(msg.content, prevMsg?.sdkUuid ?? prevMsg?.id);
                 } : undefined}
               />
             ))}
@@ -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/chat/slash-command-picker.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { Sparkles, Terminal } from "lucide-react";
+import { Sparkles, Terminal, Zap } from "lucide-react";
 
 export interface SlashItem {
-  type: "skill" | "command";
+  type: "skill" | "command" | "builtin";
   name: string;
   description: string;
   argumentHint?: string;
-  scope?: "project" | "user";
+  scope?: "project" | "user" | "bundled";
+  category?: string;
+  aliases?: string[];
 }
 
 interface SlashCommandPickerProps {
@@ -15,6 +17,8 @@ interface SlashCommandPickerProps {
   onSelect: (item: SlashItem) => void;
   onClose: () => void;
   visible: boolean;
+  /** When true, items are pre-ranked by server — skip client-side filtering */
+  ranked?: boolean;
 }
 
 export function SlashCommandPicker({
@@ -23,17 +27,20 @@ export function SlashCommandPicker({
   onSelect,
   onClose,
   visible,
+  ranked,
 }: SlashCommandPickerProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const listRef = useRef<HTMLDivElement>(null);
 
-  const filtered = items.filter((item) => {
-    const q = filter.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(q) ||
-      item.description.toLowerCase().includes(q)
-    );
-  });
+  const filtered = ranked
+    ? items
+    : items.filter((item) => {
+        const q = filter.toLowerCase();
+        return (
+          item.name.toLowerCase().includes(q) ||
+          item.description.toLowerCase().includes(q)
+        );
+      });
 
   // Reset selection when filter changes
   useEffect(() => {
@@ -105,7 +112,9 @@ export function SlashCommandPicker({
             onClick={() => onSelect(item)}
           >
             <span className="shrink-0 mt-0.5">
-              {item.type === "skill" ? (
+              {item.type === "builtin" ? (
+                <Zap className="size-4 text-emerald-500" />
+              ) : item.type === "skill" ? (
                 <Sparkles className="size-4 text-amber-500" />
               ) : (
                 <Terminal className="size-4 text-blue-500" />
@@ -118,7 +127,7 @@ export function SlashCommandPicker({
                   <span className="text-xs text-text-subtle">{item.argumentHint}</span>
                 )}
                 <span className="text-xs text-text-subtle capitalize ml-auto">
-                  {item.scope === "user" ? "global" : item.type}
+                  {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
                 </span>
               </div>
               {item.description && (

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/layout/upgrade-banner.tsx

@@ -5,6 +5,8 @@ import { Loader2, ArrowUpCircle, X } from "lucide-react";
 
 const POLL_INTERVAL_MS = 60_000;
 const DISMISS_KEY_PREFIX = "ppm-upgrade-dismissed-";
+const RESTART_POLL_MS = 1_500;
+const RESTART_TIMEOUT_MS = 60_000;
 
 interface UpgradeStatus {
   currentVersion: string;
@@ -12,6 +14,37 @@ interface UpgradeStatus {
   installMethod: string;
 }
 
+interface UpgradeResult {
+  success: boolean;
+  newVersion?: string;
+  restart: boolean;
+  message?: string;
+}
+
+/** Poll /api/health aggressively until server goes down then back up, then reload. */
+async function waitForServerRestart(): Promise<boolean> {
+  let serverWentDown = false;
+  const start = Date.now();
+
+  while (Date.now() - start < RESTART_TIMEOUT_MS) {
+    await new Promise((r) => setTimeout(r, RESTART_POLL_MS));
+    try {
+      const res = await fetch("/api/health", { cache: "no-store" });
+      if (res.ok && serverWentDown) {
+        if ("caches" in window) {
+          const keys = await caches.keys();
+          await Promise.all(keys.map((k) => caches.delete(k)));
+        }
+        window.location.reload();
+        return true;
+      }
+    } catch {
+      serverWentDown = true;
+    }
+  }
+  return false;
+}
+
 interface UpgradeBannerProps {
   onVisibilityChange?: (visible: boolean) => void;
 }
@@ -50,8 +83,21 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
   const handleUpgrade = useCallback(async () => {
     setUpgrading(true);
     try {
-      await api.post("/api/upgrade/apply");
-      // useServerReload in app.tsx handles the actual page reload after restart
+      const data = await api.post<UpgradeResult>("/api/upgrade/apply");
+
+      if (data.restart) {
+        // Server will restart — poll aggressively until it comes back
+        const restarted = await waitForServerRestart();
+        if (!restarted) {
+          toast.warning("Upgrade installed but server hasn't restarted. Try refreshing manually.");
+          setUpgrading(false);
+        }
+      } else {
+        // No supervisor — manual restart needed
+        toast.info(data.message || "Upgrade installed. Restart PPM manually.");
+        setUpgrading(false);
+        setDismissed(true);
+      }
     } catch (e) {
       toast.error(`Upgrade failed: ${(e as Error).message}`);
       setUpgrading(false);

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

@@ -1,5 +1,6 @@
 import { useMemo, useRef, useEffect } from "react";
 import { marked } from "marked";
+import markedKatex from "marked-katex-extension";
 import { useTabStore } from "@/stores/tab-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useImageOverlay } from "@/stores/image-overlay-store";
@@ -29,6 +30,7 @@ const LOCAL_PATH_RE = /^(\/|[A-Za-z]:[/\\])/;
 
 // Configure marked globally
 marked.use({ gfm: true, breaks: true });
+marked.use(markedKatex({ throwOnError: false }));
 
 /** Common text file extensions that PPM can open as editor tabs */
 const FILE_EXTS = "ts|tsx|js|jsx|mjs|cjs|py|json|md|mdx|yaml|yml|toml|css|scss|less|html|htm|sh|bash|zsh|go|rs|sql|rb|java|kt|swift|c|cpp|h|hpp|cs|vue|svelte|txt|env|cfg|conf|ini|xml|csv|log|dockerfile|makefile|gradle";
@@ -41,6 +43,7 @@ interface MarkdownRendererProps {
   projectName?: string;
   className?: string;
   codeActions?: boolean;
+  isStreaming?: boolean;
 }
 
 /**
@@ -93,7 +96,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 +324,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;
       }
@@ -317,9 +343,10 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           useNotificationStore.getState().addNotification(sessionIdRef.current, "done", projectNameRef.current);
           playNotificationSound("done");
         }
-        // Finalize the streaming message
+        // Finalize the streaming message — preserve SDK UUID for fork/rewind
         const finalContent = streamingContentRef.current;
         const finalEvents = [...streamingEventsRef.current];
+        const doneUuid = ev.lastMessageUuid as string | undefined;
         setMessages((prev) => {
           const last = prev[prev.length - 1];
           if (last?.role === "assistant") {
@@ -328,6 +355,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
               id: `final-${Date.now()}`,
               content: finalContent || last.content,
               events: finalEvents.length > 0 ? finalEvents : last.events,
+              ...(doneUuid && { sdkUuid: doneUuid }),
             }];
           }
           return prev;
@@ -464,6 +492,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 +577,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 +620,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 +651,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/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./app.tsx";
 import "./styles/globals.css";
+import "katex/dist/katex.min.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

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);