@hienlh/ppm 0.4.4 → 0.5.0

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

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { getAuthToken } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent } from "../../../types/chat";
+import type { StreamingStatus } from "@/hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 
@@ -8,10 +10,14 @@ import {
   AlertCircle,
   ShieldAlert,
   Bot,
+  ChevronDown,
+  ChevronRight,
   FileText,
   Image as ImageIcon,
   Copy,
   Check,
+  Loader2,
+  RotateCcw,
   TerminalSquare,
 } from "lucide-react";
 
@@ -21,7 +27,12 @@ interface MessageListProps {
   pendingApproval: { requestId: string; tool: string; input: unknown } | null;
   onApprovalResponse: (requestId: string, approved: boolean, data?: unknown) => void;
   isStreaming: boolean;
+  streamingStatus?: StreamingStatus;
+  connectingElapsed?: number;
+  thinkingWarningThreshold?: number;
   projectName?: string;
+  /** Called when user clicks Fork/Rewind — opens new forked chat tab */
+  onFork?: (userMessage: string) => void;
 }
 
 export function MessageList({
@@ -30,20 +41,13 @@ export function MessageList({
   pendingApproval,
   onApprovalResponse,
   isStreaming,
+  streamingStatus,
+  connectingElapsed,
+  thinkingWarningThreshold,
   projectName,
+  onFork,
 }: MessageListProps) {
-  const bottomRef = useRef<HTMLDivElement>(null);
-
-  const initialLoadRef = useRef(true);
-
-  useEffect(() => {
-    // First load: jump instantly. Subsequent updates: smooth scroll.
-    const behavior = initialLoadRef.current ? "instant" : "smooth";
-    bottomRef.current?.scrollIntoView({ behavior: behavior as ScrollBehavior });
-    if (initialLoadRef.current && messages.length > 0) {
-      initialLoadRef.current = false;
-    }
-  }, [messages, pendingApproval]);
+  // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
   if (messagesLoading) {
     return (
@@ -64,39 +68,55 @@ export function MessageList({
   }
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 space-y-4">
-      {messages
-        .filter((msg) => {
-          // Skip empty messages: no text content AND no events
-          const hasContent = msg.content && msg.content.trim().length > 0;
-          const hasEvents = msg.events && msg.events.length > 0;
-          return hasContent || hasEvents;
-        })
-        .map((msg) => (
-          <MessageBubble
-            key={msg.id}
-            message={msg}
-            isStreaming={isStreaming && msg.id.startsWith("streaming-")}
-            projectName={projectName}
-          />
-        ))}
-
-      {pendingApproval && (
-        pendingApproval.tool === "AskUserQuestion"
-          ? <AskUserQuestionCard approval={pendingApproval} onRespond={onApprovalResponse} />
-          : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
-      )}
+    <StickToBottom className="flex-1 overflow-y-auto" resize="smooth" initial="instant">
+      <StickToBottom.Content className="p-4 space-y-4">
+        {messages
+          .filter((msg) => {
+            const hasContent = msg.content && msg.content.trim().length > 0;
+            const hasEvents = msg.events && msg.events.length > 0;
+            return hasContent || hasEvents;
+          })
+          .map((msg) => (
+            <MessageBubble
+              key={msg.id}
+              message={msg}
+              isStreaming={isStreaming && msg.id.startsWith("streaming-")}
+              projectName={projectName}
+              onFork={msg.role === "user" && onFork ? () => onFork(msg.content) : undefined}
+            />
+          ))}
+
+        {pendingApproval && (
+          pendingApproval.tool === "AskUserQuestion"
+            ? <AskUserQuestionCard approval={pendingApproval} onRespond={onApprovalResponse} />
+            : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
+        )}
 
-      {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} />}
+        {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} streamingStatus={streamingStatus} elapsed={connectingElapsed} warningThreshold={thinkingWarningThreshold} />}
+      </StickToBottom.Content>
+      <ScrollToBottomButton />
+    </StickToBottom>
+  );
+}
 
-      <div ref={bottomRef} />
-    </div>
+/** Floating button to scroll back to bottom when user has scrolled up */
+function ScrollToBottomButton() {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  if (isAtBottom) return null;
+  return (
+    <button
+      onClick={() => scrollToBottom()}
+      className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1 px-3 py-1 rounded-full bg-surface-elevated border border-border text-xs text-text-secondary hover:text-foreground shadow-lg transition-all"
+    >
+      <ChevronDown className="size-3" />
+      Scroll to bottom
+    </button>
   );
 }
 
-function MessageBubble({ message, isStreaming, projectName }: { message: ChatMessage; isStreaming: boolean; projectName?: string }) {
+function MessageBubble({ message, isStreaming, projectName, onFork }: { message: ChatMessage; isStreaming: boolean; projectName?: string; onFork?: () => void }) {
   if (message.role === "user") {
-    return <UserBubble content={message.content} projectName={projectName} />;
+    return <UserBubble content={message.content} projectName={projectName} onFork={onFork} />;
   }
 
   if (message.role === "system") {
@@ -161,12 +181,12 @@ function isPdfPath(path: string): boolean {
 }
 
 /** User message bubble with attachment rendering */
-function UserBubble({ content, projectName }: { content: string; projectName?: string }) {
+function UserBubble({ content, projectName, onFork }: { content: string; projectName?: string; onFork?: () => void }) {
   const { files, text } = useMemo(() => parseUserAttachments(content), [content]);
 
   return (
-    <div className="flex justify-end">
-      <div className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-text-primary max-w-[85%] space-y-2">
+    <div className="flex justify-end group/user">
+      <div className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-text-primary max-w-[85%] space-y-2 relative">
         {/* Attached files */}
         {files.length > 0 && (
           <div className="flex flex-wrap gap-2">
@@ -199,6 +219,16 @@ function UserBubble({ content, projectName }: { content: string; projectName?: s
 
         {/* Text content */}
         {text && <p className="whitespace-pre-wrap break-words">{text}</p>}
+        {/* Fork/Rewind button — visible on hover */}
+        {onFork && (
+          <button
+            onClick={onFork}
+            title="Retry from this message (fork session)"
+            className="absolute -left-8 top-1/2 -translate-y-1/2 opacity-0 group-hover/user:opacity-100 transition-opacity size-6 flex items-center justify-center rounded bg-surface border border-border text-text-subtle hover:text-text-primary hover:bg-surface-elevated"
+          >
+            <RotateCcw className="size-3" />
+          </button>
+        )}
       </div>
     </div>
   );
@@ -295,6 +325,7 @@ function AuthFileLink({ src, filename, mimeType }: { src: string; filename: stri
  */
 type EventGroup =
   | { kind: "text"; content: string }
+  | { kind: "thinking"; content: string }
   | { kind: "tool"; tool: ChatEvent; result?: ChatEvent; completed?: boolean };
 
 function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatEvent[]; isStreaming: boolean; projectName?: string }) {
@@ -302,9 +333,21 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
   const groups: EventGroup[] = [];
   let textBuffer = "";
 
-  // First pass: create groups for text and tool_use events
+  // First pass: create groups for text, thinking, and tool_use events
+  let thinkingBuffer = "";
   for (let i = 0; i < events.length; i++) {
     const event = events[i]!;
+    if (event.type === "thinking") {
+      // Flush text buffer first if any
+      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
+      thinkingBuffer += event.content;
+      continue;
+    }
+    // Flush thinking buffer when non-thinking event arrives
+    if (thinkingBuffer) {
+      groups.push({ kind: "thinking", content: thinkingBuffer });
+      thinkingBuffer = "";
+    }
     if (event.type === "text") {
       textBuffer += event.content;
     } else if (event.type === "tool_use") {
@@ -323,6 +366,9 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
       groups.push({ kind: "tool", tool: event });
     }
   }
+  if (thinkingBuffer) {
+    groups.push({ kind: "thinking", content: thinkingBuffer });
+  }
   if (textBuffer) {
     groups.push({ kind: "text", content: textBuffer });
   }
@@ -374,6 +420,9 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
   return (
     <>
       {groups.map((group, i) => {
+        if (group.kind === "thinking") {
+          return <ThinkingBlock key={`think-${i}`} content={group.content} isStreaming={isStreaming && i === groups.length - 1} />;
+        }
         if (group.kind === "text") {
           const isLast = isStreaming && i === groups.length - 1;
           return (
@@ -388,6 +437,34 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
   );
 }
 
+/** Collapsible thinking block — shows Claude's reasoning, collapsed by default when done */
+function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming: boolean }) {
+  const [expanded, setExpanded] = useState(isStreaming);
+
+  // Auto-collapse when streaming finishes
+  useEffect(() => {
+    if (!isStreaming && content.length > 0) setExpanded(false);
+  }, [isStreaming, content.length]);
+
+  return (
+    <div className="rounded border border-border/50 bg-surface/30 text-xs">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 px-2 py-1.5 w-full text-left hover:bg-surface transition-colors text-text-subtle"
+      >
+        {isStreaming ? <Loader2 className="size-3 animate-spin" /> : <ChevronRight className={`size-3 transition-transform ${expanded ? "rotate-90" : ""}`} />}
+        <span>Thinking{isStreaming ? "..." : ""}</span>
+        {!isStreaming && <span className="text-text-subtle/50 ml-auto">{content.length > 100 ? `${Math.round(content.length / 4)} tokens` : ""}</span>}
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap max-h-60 overflow-y-auto text-[11px] leading-relaxed">
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}
+
 /**
  * Text component that renders streamed content directly.
  * WebSocket already delivers tokens incrementally — no fake animation needed.
@@ -405,34 +482,44 @@ function StreamingText({ content, animate: isStreaming, projectName }: { content
 }
 
 /**
- * Shows "Thinking..." when:
- * - No assistant message yet (waiting for first response)
- * - Last event is tool_use/tool_result (waiting for Claude after tool execution)
+ * Shows streaming status with elapsed time and warnings:
+ * - No assistant message: "Connecting to Claude..." with elapsed timer
+ * - After tool: "Processing..."
+ * - Text streaming: hidden
  */
-function ThinkingIndicator({ lastMessage }: { lastMessage?: ChatMessage }) {
-  // No assistant message yet
-  if (!lastMessage || lastMessage.role !== "assistant") {
-    return (
-      <div className="flex items-center gap-2 text-text-subtle text-sm">
-        <span className="animate-pulse">Thinking...</span>
+function ThinkingIndicator({ lastMessage, streamingStatus, elapsed, warningThreshold = 15 }: { lastMessage?: ChatMessage; streamingStatus?: StreamingStatus; elapsed?: number; warningThreshold?: number }) {
+  // Show "Thinking" when:
+  // 1. No assistant message yet (waiting for first response)
+  // 2. Last event is tool_use/tool_result (Claude thinking after tool execution)
+  // Hide when text is actively streaming (text itself is the indicator)
+
+  const isWaiting = !lastMessage || lastMessage.role !== "assistant";
+  // Show Thinking only after tool_result (tool finished), not tool_use (tool still running)
+  const isAfterTool = (() => {
+    if (!lastMessage?.events?.length) return false;
+    const last = lastMessage.events[lastMessage.events.length - 1]!;
+    return last.type === "tool_result";
+  })();
+
+  if (!isWaiting && !isAfterTool) return null;
+
+  const isLong = isWaiting && (elapsed ?? 0) >= warningThreshold;
+  return (
+    <div className="flex flex-col gap-1 text-sm">
+      <div className="flex items-center gap-2 text-text-subtle">
+        <Loader2 className="size-3 animate-spin" />
+        <span>
+          Thinking
+          {isWaiting && (elapsed ?? 0) > 0 && <span className="text-text-subtle/60">... ({elapsed}s)</span>}
+        </span>
       </div>
-    );
-  }
-
-  // Check if last event is non-text (tool_use, tool_result) → waiting for next response
-  const events = lastMessage.events;
-  if (events && events.length > 0) {
-    const lastEvent = events[events.length - 1]!;
-    if (lastEvent?.type === "tool_use" || lastEvent?.type === "tool_result") {
-      return (
-        <div className="flex items-center gap-2 text-text-subtle text-sm">
-          <span className="animate-pulse">Thinking...</span>
-        </div>
-      );
-    }
-  }
-
-  return null;
+      {isLong && (
+        <p className="text-xs text-yellow-500/80 ml-5">
+          Taking longer than usual — may be rate-limited or API slow. Try sending a new message to retry.
+        </p>
+      )}
+    </div>
+  );
 }
 
 /** Wrapper: delegates to shared MarkdownRenderer with code actions enabled */

package/src/web/components/chat/usage-badge.tsx

@@ -51,7 +51,7 @@ interface UsageDetailPanelProps {
   onClose: () => void;
   onReload?: () => void;
   loading?: boolean;
-  lastUpdatedAt?: number | null;
+  lastFetchedAt?: string | null;
 }
 
 function formatResetTime(bucket?: LimitBucket): string | null {
@@ -113,7 +113,7 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${mins}m ago`;
 }
 
-export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastUpdatedAt }: UsageDetailPanelProps) {
+export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastFetchedAt }: UsageDetailPanelProps) {
   if (!visible) return null;
 
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
@@ -124,8 +124,8 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage Limits</span>
-          {lastUpdatedAt && (
-            <span className="text-[10px] text-text-subtle">{formatLastUpdated(lastUpdatedAt)}</span>
+          {lastFetchedAt && (
+            <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
           )}
         </div>
         <div className="flex items-center gap-1">

package/src/web/components/layout/command-palette.tsx

@@ -242,19 +242,38 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     el?.scrollIntoView({ block: "nearest" });
   }, [selectedIdx]);
 
+  /** Open chat tab with query as message (used by "Ask AI" fallback) */
+  const askAi = useCallback(() => {
+    if (!query.trim()) return;
+    const projectId = activeProject?.name ?? null;
+    openTab({
+      type: "chat",
+      title: "AI Chat",
+      projectId,
+      metadata: { projectName: activeProject?.name, pendingMessage: query.trim() },
+      closable: true,
+    });
+    onClose();
+  }, [query, activeProject, openTab, onClose]);
+
   function handleKeyDown(e: React.KeyboardEvent) {
+    const len = filtered.length;
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        setSelectedIdx((i) => (i + 1) % filtered.length);
+        if (len > 0) setSelectedIdx((i) => (i + 1) % len);
         break;
       case "ArrowUp":
         e.preventDefault();
-        setSelectedIdx((i) => (i - 1 + filtered.length) % filtered.length);
+        if (len > 0) setSelectedIdx((i) => (i - 1 + len) % len);
         break;
       case "Enter":
         e.preventDefault();
-        filtered[selectedIdx]?.action();
+        if (len > 0) {
+          filtered[selectedIdx]?.action();
+        } else if (query.trim()) {
+          askAi();
+        }
         break;
       case "Escape":
         e.preventDefault();
@@ -268,10 +287,10 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const pathMode = isPathQuery(query);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]" onClick={onClose}>
+    <div className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[20vh]" onClick={onClose}>
       <div className="fixed inset-0 bg-black/50" />
       <div
-        className="relative z-10 w-full max-w-md rounded-lg border border-border bg-background shadow-2xl overflow-hidden"
+        className="relative z-10 w-full max-w-md rounded-t-xl md:rounded-xl border border-border bg-background shadow-2xl overflow-hidden max-h-[80vh] md:max-h-none"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={handleKeyDown}
       >
@@ -302,9 +321,19 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         {/* Results */}
         <div ref={listRef} className="max-h-72 overflow-y-auto py-1">
           {filtered.length === 0 ? (
-            <p className="px-3 py-4 text-sm text-text-subtle text-center">
-              {fsLoading ? "Searching..." : "No results"}
-            </p>
+            fsLoading ? (
+              <p className="px-3 py-4 text-sm text-text-subtle text-center">Searching...</p>
+            ) : query.trim() ? (
+              <button
+                onClick={askAi}
+                className="flex items-center gap-3 w-full px-3 py-3 text-sm text-left text-text-secondary hover:bg-accent/15 hover:text-text-primary transition-colors"
+              >
+                <MessageSquare className="size-4 shrink-0 text-accent" />
+                <span>Ask AI: <span className="text-text-primary font-medium">{query.trim().slice(0, 60)}</span></span>
+              </button>
+            ) : (
+              <p className="px-3 py-4 text-sm text-text-subtle text-center">No results</p>
+            )
           ) : (
             filtered.map((cmd, i) => {
               const Icon = cmd.icon;

package/src/web/components/layout/draggable-tab.tsx

@@ -34,11 +34,11 @@ export function DraggableTab({
         onDragOver={onDragOver}
         onDragEnd={onDragEnd}
         className={cn(
-          "group flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md whitespace-nowrap transition-colors",
-          "border-b-2 -mb-[1px] cursor-grab active:cursor-grabbing",
+          "group flex items-center gap-1 px-3 h-10 whitespace-nowrap text-xs transition-colors",
+          "border-b-2 -mb-px cursor-grab active:cursor-grabbing",
           isActive
-            ? "border-primary bg-surface text-foreground"
-            : "border-transparent text-text-secondary hover:text-foreground hover:bg-surface-elevated",
+            ? "border-primary text-primary"
+            : "border-transparent text-text-secondary hover:text-foreground",
         )}
       >
         <Icon className="size-4" />

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

@@ -7,7 +7,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
 import { ChatHistoryPanel } from "@/components/chat/chat-history-panel";
-import { openBugReport } from "@/lib/report-bug";
+import { openBugReportPopup } from "@/lib/report-bug";
 import { cn } from "@/lib/utils";
 
 type DrawerTab = "explorer" | "git" | "history";
@@ -28,7 +28,7 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
   const version = useSettingsStore((s) => s.version);
   const [activeTab, setActiveTab] = useState<DrawerTab>("explorer");
 
-  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+  const handleReportBug = useCallback(() => openBugReportPopup(version), [version]);
 
   return (
     <div

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

@@ -10,6 +10,7 @@ import { resolveProjectColor } from "@/lib/project-palette";
 import { getProjectInitials } from "@/lib/project-avatar";
 import type { TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
+import { openCommandPalette } from "@/hooks/use-global-keybindings";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -139,9 +140,9 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
           })}
         </div>
 
-        {/* Add tab button */}
+        {/* Add tab — opens command palette */}
         <button
-          onClick={() => setNewTabSheetOpen(true)}
+          onClick={() => openCommandPalette()}
           className="flex items-center justify-center size-12 shrink-0 border-t-2 border-transparent text-text-secondary"
         >
           <Plus className="size-4" />

package/src/web/components/layout/project-bar.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import { Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, Bug } from "lucide-react";
-import { openBugReport } from "@/lib/report-bug";
+import { openBugReportPopup } from "@/lib/report-bug";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -73,7 +73,7 @@ export function ProjectBar() {
   const { projects, activeProject, setActiveProject, setProjectColor, moveProject, renameProject, deleteProject, customOrder } = useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
   const version = useSettingsStore((s) => s.version);
-  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+  const handleReportBug = useCallback(() => openBugReportPopup(version), [version]);
 
   const ordered = resolveOrder(projects, customOrder);
   const allNames = ordered.map((p) => p.name);
@@ -141,7 +141,9 @@ export function ProjectBar() {
   }
 
   function handleSettings() {
-    openTab({ type: "settings", title: "Settings", projectId: null, closable: true });
+    const { sidebarCollapsed, toggleSidebar, setSidebarActiveTab } = useSettingsStore.getState();
+    if (sidebarCollapsed) toggleSidebar();
+    setSidebarActiveTab("settings");
   }
 
   return (

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -77,7 +77,9 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
   }
 
   function handleSettings() {
-    openTab({ type: "settings", title: "Settings", projectId: null, closable: true });
+    const { sidebarCollapsed, toggleSidebar, setSidebarActiveTab } = useSettingsStore.getState();
+    if (sidebarCollapsed) toggleSidebar();
+    setSidebarActiveTab("settings");
     handleClose();
   }
 

package/src/web/components/layout/tab-bar.tsx

@@ -70,7 +70,7 @@ export function TabBar({ panelId }: TabBarProps) {
 
   return (
     <div
-      className="hidden md:flex items-center h-[41px] border-b border-border bg-background"
+      className="hidden md:flex items-center h-10 border-b border-border bg-background"
       onDragOver={handleDragOverBar}
       onDrop={handleDrop}
       onDoubleClick={handleBarDoubleClick}
@@ -81,7 +81,7 @@ export function TabBar({ panelId }: TabBarProps) {
         ref={scrollRef}
         className="flex-1 overflow-x-auto overflow-y-hidden min-w-0 scrollbar-none"
       >
-        <div className="flex items-center gap-0.5 px-2 py-1">
+        <div className="flex items-center h-10">
           {tabs.map((tab, i) => (
             <DraggableTab
               key={tab.id}
@@ -107,9 +107,9 @@ export function TabBar({ panelId }: TabBarProps) {
 
           {/* + button — inside flow, sticky when overflowing */}
           <button
-            onClick={openCommandPalette}
+            onClick={() => openCommandPalette()}
             title="Open command palette (Shift+Shift)"
-            className="flex items-center justify-center size-7 shrink-0 sticky right-1 rounded-md text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors bg-background"
+            className="flex items-center justify-center size-10 shrink-0 sticky right-0 border-b-2 border-transparent text-text-secondary hover:text-foreground transition-colors bg-background"
           >
             <Plus className="size-4" />
           </button>

package/src/web/components/shared/bug-report-popup.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from "react";
+import { Copy, ExternalLink, X, Check } from "lucide-react";
+import { openGithubIssue, copyToClipboard } from "@/lib/report-bug";
+
+export function BugReportPopup() {
+  const [text, setText] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    function handleOpen(e: Event) {
+      const body = (e as CustomEvent).detail as string;
+      if (body) {
+        setText(body);
+        setCopied(false);
+      }
+    }
+    window.addEventListener("open-bug-report", handleOpen);
+    return () => window.removeEventListener("open-bug-report", handleOpen);
+  }, []);
+
+  const close = useCallback(() => setText(null), []);
+
+  if (!text) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-50 bg-black/50" onClick={close} />
+      <div className="fixed inset-4 md:inset-auto md:top-[15%] md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-lg md:max-h-[70vh] z-50 flex flex-col bg-background border border-border rounded-lg shadow-2xl overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+          <span className="text-sm font-medium">Bug Report</span>
+          <button onClick={close} className="p-1 rounded hover:bg-surface-elevated">
+            <X className="size-4" />
+          </button>
+        </div>
+        <pre className="flex-1 overflow-auto px-4 py-2 text-xs font-mono whitespace-pre-wrap break-all">{text}</pre>
+        <div className="flex gap-2 p-3 border-t border-border">
+          <button
+            onClick={async () => {
+              const ok = await copyToClipboard(text);
+              if (ok) setCopied(true);
+            }}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-surface-elevated text-xs text-foreground hover:bg-surface transition-colors"
+          >
+            {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+            {copied ? "Copied" : "Copy"}
+          </button>
+          <button
+            onClick={() => { openGithubIssue(text); close(); }}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-xs hover:bg-primary/90 transition-colors"
+          >
+            <ExternalLink className="size-3" />
+            Open GitHub Issue
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}