@hienlh/ppm 0.2.21 → 0.4.0

package/src/web/components/settings/ai-settings-section.tsx

@@ -23,7 +23,7 @@ const EFFORT_OPTIONS = [
   { value: "max", label: "Max" },
 ];
 
-export function AISettingsSection() {
+export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   const [settings, setSettings] = useState<AISettings | null>(null);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -54,11 +54,17 @@ export function AISettingsSection() {
     }
   };
 
+  const labelSize = compact ? "text-[11px]" : "text-sm";
+  const headingSize = compact ? "text-xs" : "text-sm";
+  const gapSize = compact ? "space-y-2" : "space-y-4";
+  const innerGap = compact ? "space-y-1.5" : "space-y-3";
+  const fieldGap = compact ? "space-y-1" : "space-y-1.5";
+
   if (!settings) {
     return (
-      <div className="space-y-3">
-        <h3 className="text-sm font-medium text-text-secondary">AI Provider</h3>
-        <p className="text-sm text-text-subtle">
+      <div className={innerGap}>
+        <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
+        <p className={`${labelSize} text-text-subtle`}>
           {error ? `Error: ${error}` : "Loading..."}
         </p>
       </div>
@@ -66,17 +72,17 @@ export function AISettingsSection() {
   }
 
   return (
-    <div className="space-y-4">
-      <h3 className="text-sm font-medium text-text-secondary">AI Provider</h3>
+    <div className={gapSize}>
+      <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
 
-      <div className="space-y-3">
-        <div className="space-y-1.5">
-          <Label htmlFor="ai-model">Model</Label>
+      <div className={innerGap}>
+        <div className={fieldGap}>
+          <Label htmlFor="ai-model" className={compact ? labelSize : undefined}>Model</Label>
           <Select
             value={config?.model ?? "claude-sonnet-4-6"}
             onValueChange={(v) => handleSave("model", v)}
           >
-            <SelectTrigger id="ai-model" className="w-full">
+            <SelectTrigger id="ai-model" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -89,13 +95,13 @@ export function AISettingsSection() {
           </Select>
         </div>
 
-        <div className="space-y-1.5">
-          <Label htmlFor="ai-effort">Effort</Label>
+        <div className={fieldGap}>
+          <Label htmlFor="ai-effort" className={compact ? labelSize : undefined}>Effort</Label>
           <Select
             value={config?.effort ?? "high"}
             onValueChange={(v) => handleSave("effort", v)}
           >
-            <SelectTrigger id="ai-effort" className="w-full">
+            <SelectTrigger id="ai-effort" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -108,8 +114,8 @@ export function AISettingsSection() {
           </Select>
         </div>
 
-        <div className="space-y-1.5">
-          <Label htmlFor="ai-max-turns">Max Turns (1-500)</Label>
+        <div className={fieldGap}>
+          <Label htmlFor="ai-max-turns" className={compact ? labelSize : undefined}>Max Turns (1-500)</Label>
           <Input
             key={`turns-${revision}`}
             id="ai-max-turns"
@@ -117,6 +123,7 @@ export function AISettingsSection() {
             min={1}
             max={500}
             defaultValue={config?.max_turns ?? 100}
+            className={compact ? "h-7 text-[11px]" : undefined}
             onBlur={(e) => {
               const val = parseInt(e.target.value);
               if (!isNaN(val)) handleSave("max_turns", val);
@@ -124,8 +131,8 @@ export function AISettingsSection() {
           />
         </div>
 
-        <div className="space-y-1.5">
-          <Label htmlFor="ai-budget">Max Budget (USD)</Label>
+        <div className={fieldGap}>
+          <Label htmlFor="ai-budget" className={compact ? labelSize : undefined}>Max Budget (USD)</Label>
           <Input
             key={`budget-${revision}`}
             id="ai-budget"
@@ -135,6 +142,7 @@ export function AISettingsSection() {
             max={50}
             defaultValue={config?.max_budget_usd ?? ""}
             placeholder="No limit"
+            className={compact ? "h-7 text-[11px]" : undefined}
             onBlur={(e) => {
               const val = parseFloat(e.target.value);
               handleSave("max_budget_usd", isNaN(val) ? undefined : val);
@@ -142,8 +150,8 @@ export function AISettingsSection() {
           />
         </div>
 
-        <div className="space-y-1.5">
-          <Label htmlFor="ai-thinking">Thinking Budget (tokens)</Label>
+        <div className={fieldGap}>
+          <Label htmlFor="ai-thinking" className={compact ? labelSize : undefined}>Thinking Budget (tokens)</Label>
           <Input
             key={`thinking-${revision}`}
             id="ai-thinking"
@@ -151,6 +159,7 @@ export function AISettingsSection() {
             min={0}
             defaultValue={config?.thinking_budget_tokens ?? ""}
             placeholder="Disabled"
+            className={compact ? "h-7 text-[11px]" : undefined}
             onBlur={(e) => {
               const val = parseInt(e.target.value);
               handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);

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

@@ -21,26 +21,27 @@ export function SettingsTab() {
   const { permission, isSubscribed, loading, subscribe, unsubscribe } = usePushNotification();
 
   return (
-    <div className="h-full p-4 space-y-6 overflow-auto max-w-lg">
-      <h2 className="text-lg font-semibold">Settings</h2>
+    <div className="h-full w-full overflow-auto">
+    <div className="p-3 space-y-4">
+      <h2 className="text-sm font-semibold">Settings</h2>
 
-      <div className="space-y-3">
-        <h3 className="text-sm font-medium text-text-secondary">Theme</h3>
-        <div className="flex gap-2">
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-text-secondary">Theme</h3>
+        <div className="flex gap-1.5">
           {THEME_OPTIONS.map((opt) => {
             const Icon = opt.icon;
             return (
               <Button
                 key={opt.value}
                 variant={theme === opt.value ? "default" : "outline"}
-                size="lg"
+                size="sm"
                 onClick={() => setTheme(opt.value)}
                 className={cn(
-                  "flex-1 gap-2",
+                  "flex-1 gap-1.5 text-xs h-8",
                   theme === opt.value && "ring-2 ring-primary",
                 )}
               >
-                <Icon className="size-4" />
+                <Icon className="size-3.5" />
                 {opt.label}
               </Button>
             );
@@ -54,22 +55,23 @@ export function SettingsTab() {
 
       <Separator />
 
-      <div className="space-y-3">
-        <h3 className="text-sm font-medium text-text-secondary">Notifications</h3>
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-text-secondary">Notifications</h3>
         {!pushSupported ? (
-          <p className="text-sm text-text-subtle">
-            Push notifications are not supported in this browser.
+          <p className="text-xs text-text-subtle">
+            Push notifications not supported in this browser.
           </p>
         ) : (
           <>
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {isSubscribed ? <Bell className="size-4" /> : <BellOff className="size-4" />}
-                <span className="text-sm">Push notifications</span>
+              <div className="flex items-center gap-1.5">
+                {isSubscribed ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
+                <span className="text-xs">Push notifications</span>
               </div>
               <Button
                 variant={isSubscribed ? "default" : "outline"}
                 size="sm"
+                className="h-7 text-xs"
                 disabled={loading || permission === "denied"}
                 onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
               >
@@ -77,12 +79,12 @@ export function SettingsTab() {
               </Button>
             </div>
             {permission === "denied" && (
-              <p className="text-xs text-destructive">
+              <p className="text-[11px] text-destructive">
                 Notifications blocked. Enable in browser settings.
               </p>
             )}
             {isIosNonPwa && (
-              <p className="text-xs text-text-subtle">
+              <p className="text-[11px] text-text-subtle">
                 On iOS, install PPM to Home Screen for push notifications.
               </p>
             )}
@@ -92,15 +94,16 @@ export function SettingsTab() {
 
       <Separator />
 
-      <div className="space-y-3">
-        <h3 className="text-sm font-medium text-text-secondary">About</h3>
-        <p className="text-sm text-text-secondary">
+      <div className="space-y-1.5">
+        <h3 className="text-xs font-medium text-text-secondary">About</h3>
+        <p className="text-xs text-text-secondary">
           PPM — Personal Project Manager
         </p>
-        <p className="text-xs text-text-subtle">
+        <p className="text-[11px] text-text-subtle">
           A mobile-first web IDE for managing your projects.
         </p>
       </div>
     </div>
+    </div>
   );
 }

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

@@ -0,0 +1,223 @@
+import { useMemo, useRef, useEffect } from "react";
+import { marked } from "marked";
+import { useTabStore } from "@/stores/tab-store";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+import { openCommandPalette } from "@/hooks/use-global-keybindings";
+import { api, projectUrl } from "@/lib/api-client";
+
+// Configure marked globally
+marked.use({ gfm: true, breaks: true });
+
+/** 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";
+const FILE_EXT_RE = new RegExp(`\\.(${FILE_EXTS})$`, "i");
+
+interface MarkdownRendererProps {
+  content: string;
+  projectName?: string;
+  className?: string;
+  codeActions?: boolean;
+}
+
+/**
+ * Transform HTML string:
+ * - Wrap tables in scrollable container
+ * - Add target=_blank to external links
+ * - Mark <a> file paths with data-file-path
+ * - Make inline <code> with file names clickable (via HTML transform, not DOM)
+ */
+function transformHtml(raw: string): string {
+  let html = raw;
+
+  // Wrap <table> in scroll container
+  html = html.replace(/<table/g, '<div class="table-scroll-wrapper overflow-x-auto"><table');
+  html = html.replace(/<\/table>/g, "</table></div>");
+
+  // External links → target=_blank
+  html = html.replace(
+    /<a\s+href="(https?:\/\/[^"]+)"/g,
+    '<a href="$1" target="_blank" rel="noopener noreferrer"',
+  );
+
+  // <a> with file paths → add data-file-path
+  html = html.replace(/<a\s+href="([^"]+)"/g, (match, href: string) => {
+    if (/^https?:\/\//.test(href)) return match; // already handled
+    const isFile = /^(\/|\.\/|\.\.\/)/.test(href) || FILE_EXT_RE.test(href);
+    return isFile ? `<a href="${href}" data-file-path="${href}"` : match;
+  });
+
+  // Inline <code> with file-like names → make clickable
+  // Split by <pre>...</pre> blocks to avoid transforming code inside them
+  const parts = html.split(/(<pre[\s\S]*?<\/pre>)/g);
+  html = parts.map((part) => {
+    // Skip <pre> blocks
+    if (part.startsWith("<pre")) return part;
+    // Transform inline <code> in non-pre content
+    return part.replace(
+      /<code>([^<]+)<\/code>/g,
+      (match, text: string) => {
+        const trimmed = text.trim();
+        if (!trimmed || trimmed.includes(" ")) return match;
+        if (!FILE_EXT_RE.test(trimmed) && !/^(\/|\.\/|\.\.\/)/.test(trimmed)) return match;
+        return `<code data-file-clickable="${trimmed}" style="cursor:pointer;text-decoration:underline;text-decoration-style:dotted">${text}</code>`;
+      },
+    );
+  }).join("");
+
+  return html;
+}
+
+export function MarkdownRenderer({ content, projectName, className = "", codeActions = false }: MarkdownRendererProps) {
+  const html = useMemo(() => {
+    try {
+      const raw = marked.parse(content) as string;
+      return transformHtml(raw);
+    } catch {
+      return content;
+    }
+  }, [content]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const openTab = useTabStore((s) => s.openTab);
+  const fileTree = useFileStore((s) => s.tree);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // --- Click handler for file links and clickable code ---
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      // Check <a data-file-path>
+      const link = target.closest("a[data-file-path]") as HTMLAnchorElement | null;
+      if (link && container.contains(link)) {
+        e.preventDefault();
+        openFileOrSearch(link.getAttribute("data-file-path") ?? "");
+        return;
+      }
+
+      // Check clickable <code>
+      const code = target.closest("code[data-file-clickable]") as HTMLElement | null;
+      if (code && container.contains(code)) {
+        openFileOrSearch(code.getAttribute("data-file-clickable") ?? "");
+        return;
+      }
+    };
+
+    /** Search file tree for matches by filename */
+    function findInTree(nodes: FileNode[], name: string): string[] {
+      const results: string[] = [];
+      for (const node of nodes) {
+        if (node.type === "file" && node.name === name) results.push(node.path);
+        if (node.children) results.push(...findInTree(node.children, name));
+      }
+      return results;
+    }
+
+    function openFileOrSearch(filePath: string) {
+      if (!filePath) return;
+      const isAbsolute = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
+      const isRelative = /^(\.\/|\.\.\/)/.test(filePath);
+      const fileName = filePath.split("/").pop() ?? filePath;
+
+      // Absolute path → verify then open
+      if (isAbsolute) {
+        const meta: Record<string, unknown> = { filePath };
+        if (projectName) meta.projectName = projectName;
+        api.get(`/api/fs/read?path=${encodeURIComponent(filePath)}`).then(() => {
+          openTab({ type: "editor", title: fileName, metadata: meta, projectId: null, closable: true });
+        }).catch(() => openCommandPalette(filePath));
+        return;
+      }
+
+      // Relative path with ./ or ../ → try exact path in project
+      if (isRelative && projectName) {
+        const meta: Record<string, unknown> = { filePath, projectName };
+        api.get(`${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`)
+          .then(() => {
+            openTab({ type: "editor", title: fileName, metadata: meta, projectId: projectName, closable: true });
+          })
+          .catch(() => searchAndOpen(fileName));
+        return;
+      }
+
+      // Just a filename → search in project tree
+      searchAndOpen(fileName);
+    }
+
+    /** Search project file tree; if 1 match → open directly, else → command palette */
+    function searchAndOpen(fileName: string) {
+      const matches = findInTree(fileTree, fileName);
+      if (matches.length === 1) {
+        const match = matches[0]!;
+        openTab({
+          type: "editor",
+          title: fileName,
+          metadata: { filePath: match, projectName },
+          projectId: projectName ?? null,
+          closable: true,
+        });
+      } else {
+        openCommandPalette(fileName);
+      }
+    }
+
+    container.addEventListener("click", handleClick);
+
+    // --- Code block copy/run buttons ---
+    if (codeActions) {
+      container.querySelectorAll("pre").forEach((pre) => {
+        if (pre.querySelector(".code-actions")) return;
+        const code = pre.querySelector("code");
+        const text = code?.textContent ?? pre.textContent ?? "";
+        const langClass = code?.className ?? "";
+        const isBash = /language-(bash|sh|shell|zsh)/.test(langClass)
+          || (!langClass.includes("language-") && text.startsWith("$"));
+
+        pre.style.position = "relative";
+        pre.classList.add("group");
+
+        const actions = document.createElement("div");
+        actions.className = "code-actions absolute top-1 right-1 flex gap-1";
+
+        const copyBtn = document.createElement("button");
+        copyBtn.className = "flex items-center justify-center size-6 rounded bg-surface-elevated/80 hover:bg-surface-elevated text-text-secondary hover:text-text-primary transition-colors border border-border/50";
+        copyBtn.title = "Copy";
+        copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+        copyBtn.addEventListener("click", () => {
+          navigator.clipboard.writeText(text);
+          copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+          setTimeout(() => {
+            copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+          }, 2000);
+        });
+        actions.appendChild(copyBtn);
+
+        if (isBash && projectName) {
+          const runBtn = document.createElement("button");
+          runBtn.className = "flex items-center justify-center size-6 rounded bg-surface-elevated/80 hover:bg-surface-elevated text-text-secondary hover:text-text-primary transition-colors border border-border/50";
+          runBtn.title = "Run in terminal";
+          runBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
+          runBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
+            openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
+          });
+          actions.appendChild(runBtn);
+        }
+
+        pre.appendChild(actions);
+      });
+    }
+
+    return () => container.removeEventListener("click", handleClick);
+  }, [html, projectName, openTab, codeActions]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`markdown-content prose-sm ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/web/components/ui/scroll-area.tsx

@@ -38,9 +38,9 @@ function ScrollBar({
       className={cn(
         "flex touch-none p-px transition-colors select-none",
         orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+          "h-full w-1.5 border-l border-l-transparent",
         orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+          "h-1.5 flex-col border-t border-t-transparent",
         className
       )}
       {...props}

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

@@ -82,74 +82,76 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
       return;
     }
 
+    /**
+     * Route a child event to its parent Agent/Task tool_use's children array.
+     * Returns true if routed (caller should skip flat append), false if no parent found.
+     */
+    const routeToParent = (childEvent: ChatEvent, parentToolUseId: string): boolean => {
+      const parent = streamingEventsRef.current.find(
+        (e) => e.type === "tool_use"
+          && (e.tool === "Agent" || e.tool === "Task")
+          && (e as any).toolUseId === parentToolUseId,
+      );
+      if (parent && parent.type === "tool_use") {
+        if (!parent.children) parent.children = [];
+        parent.children.push(childEvent);
+        return true;
+      }
+      return false;
+    };
+
+    /** Trigger re-render with latest events snapshot */
+    const syncMessages = () => {
+      const content = streamingContentRef.current;
+      const events = [...streamingEventsRef.current];
+      setMessages((prev) => {
+        const last = prev[prev.length - 1];
+        if (last?.role === "assistant" && !last.id.startsWith("final-")) {
+          return [...prev.slice(0, -1), { ...last, content, events }];
+        }
+        return [...prev, {
+          id: `streaming-${Date.now()}`,
+          role: "assistant" as const,
+          content,
+          events,
+          timestamp: new Date().toISOString(),
+        }];
+      });
+    };
+
     switch (data.type) {
       case "text": {
+        const pid = (data as any).parentToolUseId as string | undefined;
+        if (pid && routeToParent(data, pid)) {
+          // Child text routed to parent — just re-render
+          syncMessages();
+          break;
+        }
         streamingContentRef.current += data.content;
         streamingEventsRef.current.push(data);
-        // Snapshot BEFORE queueing setState — React 18 batching may delay updater execution
-        const txtContent = streamingContentRef.current;
-        const txtEvents = [...streamingEventsRef.current];
-        setMessages((prev) => {
-          const last = prev[prev.length - 1];
-          if (last?.role === "assistant" && !last.id.startsWith("final-")) {
-            return [
-              ...prev.slice(0, -1),
-              { ...last, content: txtContent, events: txtEvents },
-            ];
-          }
-          return [
-            ...prev,
-            {
-              id: `streaming-${Date.now()}`,
-              role: "assistant" as const,
-              content: txtContent,
-              events: txtEvents,
-              timestamp: new Date().toISOString(),
-            },
-          ];
-        });
+        syncMessages();
         break;
       }
 
       case "tool_use": {
+        const pid = (data as any).parentToolUseId as string | undefined;
+        if (pid && routeToParent(data, pid)) {
+          syncMessages();
+          break;
+        }
         streamingEventsRef.current.push(data);
-        const tuContent = streamingContentRef.current;
-        const tuEvents = [...streamingEventsRef.current];
-        setMessages((prev) => {
-          const last = prev[prev.length - 1];
-          if (last?.role === "assistant") {
-            return [
-              ...prev.slice(0, -1),
-              { ...last, events: tuEvents },
-            ];
-          }
-          return [
-            ...prev,
-            {
-              id: `streaming-${Date.now()}`,
-              role: "assistant" as const,
-              content: tuContent,
-              events: tuEvents,
-              timestamp: new Date().toISOString(),
-            },
-          ];
-        });
+        syncMessages();
         break;
       }
 
       case "tool_result": {
+        const pid = (data as any).parentToolUseId as string | undefined;
+        if (pid && routeToParent(data, pid)) {
+          syncMessages();
+          break;
+        }
         streamingEventsRef.current.push(data);
-        const trEvents = [...streamingEventsRef.current];
-        setMessages((prev) => {
-          const last = prev[prev.length - 1];
-          if (last?.role === "assistant") {
-            return [
-              ...prev.slice(0, -1),
-              { ...last, events: trEvents },
-            ];
-          }
-          return prev;
-        });
+        syncMessages();
         break;
       }
 
@@ -217,30 +219,8 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
         });
         streamingContentRef.current = "";
         streamingEventsRef.current = [];
-
-        // Flush queued message if user typed while streaming
-        const queued = pendingMessageRef.current;
-        if (queued) {
-          pendingMessageRef.current = null;
-          // Add user message to list
-          setMessages((prev2) => [
-            ...prev2,
-            {
-              id: `user-${Date.now()}`,
-              role: "user" as const,
-              content: queued,
-              timestamp: new Date().toISOString(),
-            },
-          ]);
-          streamingContentRef.current = "";
-          streamingEventsRef.current = [];
-          isStreamingRef.current = true;
-          setIsStreaming(true);
-          sendRef.current(JSON.stringify({ type: "message", content: queued }));
-        } else {
-          isStreamingRef.current = false;
-          setIsStreaming(false);
-        }
+        isStreamingRef.current = false;
+        setIsStreaming(false);
         break;
       }
     }
@@ -303,10 +283,23 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     (content: string) => {
       if (!content.trim()) return;
 
-      // If streaming, queue message to send after current stream finishes
-      if (isStreaming) {
-        pendingMessageRef.current = content;
-        return;
+      // If streaming, cancel current stream first then send immediately
+      if (isStreamingRef.current) {
+        // Finalize current streaming message
+        const finalContent = streamingContentRef.current;
+        const finalEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant") {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, id: `final-${Date.now()}`, content: finalContent || last.content, events: finalEvents.length > 0 ? finalEvents : last.events },
+            ];
+          }
+          return prev;
+        });
+        // Tell backend to abort current query
+        send(JSON.stringify({ type: "cancel" }));
       }
 
       // Add user message
@@ -323,12 +316,14 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
       // Reset streaming state
       streamingContentRef.current = "";
       streamingEventsRef.current = [];
+      pendingMessageRef.current = null;
       isStreamingRef.current = true;
       setIsStreaming(true);
+      setPendingApproval(null);
 
       send(JSON.stringify({ type: "message", content }));
     },
-    [send, isStreaming],
+    [send],
   );
 
   const respondToApproval = useCallback(