feat: complete P0 fixes + Manus UI overhaul phase 2

P0 Fixes:
- tool_choice: pass through from caller instead of hardcoded 'auto' (llm.ts)
- glob matching: replaced custom regex with micromatch library (permissions.ts)
- graceful shutdown: SIGTERM/SIGINT handlers with DB close (index.ts, db.ts)
- Dockerfile: chmod 777 → 755 with proper chown

Manus UI:
- RightPanel: tabbed panel with Actions/Files/Preview tabs
- FileExplorer: inline file browser with directory navigation and file preview
- PreviewPanel: live viewport showing latest tool output (terminal/web/file)
- CodeDiffViewer: LCS-based diff viewer with Diff/Original/Modified tabs
- Integrated CodeDiffViewer into ActionTree for edit_file operations

Build: clean, 0 errors

Dockerfile

@@ -28,7 +28,7 @@ COPY . .
 RUN pnpm build
 
 # Create workspace directory for agent
-RUN mkdir -p /home/ubuntu && chmod 777 /home/ubuntu
+RUN mkdir -p /home/ubuntu && chown node:node /home/ubuntu && chmod 755 /home/ubuntu
 
 # HF Spaces uses port 7860
 ENV PORT=7860

client/src/components/ActionTree.tsx

@@ -23,6 +23,7 @@ import {
   Minimize2,
 } from "lucide-react";
 import type { ChatMessage } from "@/hooks/useChat";
+import { CodeDiffViewer } from "./CodeDiffViewer";
 
 // Tool category mapping for icons and colors
 const TOOL_CATEGORIES: Record<string, { icon: typeof Terminal; color: string; label: string }> = {
@@ -181,32 +182,58 @@ function ActionNode({ tool, index, isLast }: ActionNodeProps) {
             </pre>
           </div>
 
-          {/* Output */}
+          {/* Output — with CodeDiffViewer for edit/write operations */}
           {tool.result && (
             <div className="relative group/block mt-2">
-              <div className="text-[10px] text-muted-foreground/60 mb-1 flex items-center gap-1">
-                <Terminal className="size-2.5" /> Output
-                {tool.isError && (
-                  <span className="text-destructive text-[9px]">ERROR</span>
-                )}
-                <button
-                  onClick={() => handleCopy(tool.result!)}
-                  className="ml-auto opacity-0 group-hover/block:opacity-100 transition-opacity"
-                >
-                  <Copy className="size-2.5 text-muted-foreground hover:text-foreground" />
-                </button>
-              </div>
-              <pre
-                className={`text-[11px] font-mono rounded-md p-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-all ${
-                  tool.isError
-                    ? "bg-destructive/10 text-destructive/80 border border-destructive/20"
-                    : "bg-secondary/30 text-foreground/80"
-                }`}
-              >
-                {tool.result.length > 5000
-                  ? tool.result.slice(0, 5000) + "\n\n[...truncated]"
-                  : tool.result}
-              </pre>
+              {(tool.name === "edit_file" || tool.name === "multi_edit_file") && tool.result && !tool.isError ? (
+                (() => {
+                  // Try to extract old/new content from edit result
+                  try {
+                    const parsed = JSON.parse(tool.arguments);
+                    const fileName = parsed.path?.split("/").pop() || parsed.path;
+                    // Show diff viewer with result as the "after" content
+                    return (
+                      <CodeDiffViewer
+                        oldContent={parsed.old_string || parsed.old_text || ""}
+                        newContent={parsed.new_string || parsed.new_text || parsed.old_string || ""}
+                        fileName={fileName}
+                      />
+                    );
+                  } catch {
+                    return null;
+                  }
+                })() || (
+                  <pre className="text-[11px] font-mono bg-secondary/30 rounded-md p-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-all text-foreground/80">
+                    {tool.result.length > 5000 ? tool.result.slice(0, 5000) + "\n\n[...truncated]" : tool.result}
+                  </pre>
+                )
+              ) : (
+                <>
+                  <div className="text-[10px] text-muted-foreground/60 mb-1 flex items-center gap-1">
+                    <Terminal className="size-2.5" /> Output
+                    {tool.isError && (
+                      <span className="text-destructive text-[9px]">ERROR</span>
+                    )}
+                    <button
+                      onClick={() => handleCopy(tool.result!)}
+                      className="ml-auto opacity-0 group-hover/block:opacity-100 transition-opacity"
+                    >
+                      <Copy className="size-2.5 text-muted-foreground hover:text-foreground" />
+                    </button>
+                  </div>
+                  <pre
+                    className={`text-[11px] font-mono rounded-md p-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-all ${
+                      tool.isError
+                        ? "bg-destructive/10 text-destructive/80 border border-destructive/20"
+                        : "bg-secondary/30 text-foreground/80"
+                    }`}
+                  >
+                    {tool.result.length > 5000
+                      ? tool.result.slice(0, 5000) + "\n\n[...truncated]"
+                      : tool.result}
+                  </pre>
+                </>
+              )}
             </div>
           )}
         </div>

client/src/components/CodeDiffViewer.tsx

@@ -0,0 +1,190 @@
+/**
+ * CodeDiffViewer — Manus-style code diff viewer with tabs:
+ * Diff / Original / Modified
+ * Used in ActionTree when edit_file or write_file tool calls are shown.
+ */
+
+import { useState, useMemo } from "react";
+import { cn } from "@/lib/utils";
+
+type DiffTab = "diff" | "original" | "modified";
+
+interface DiffLine {
+  type: "added" | "removed" | "context";
+  lineOld?: number;
+  lineNew?: number;
+  content: string;
+}
+
+/**
+ * Simple unified diff parser.
+ * Takes old text and new text, produces a line-by-line diff.
+ */
+function computeDiff(oldText: string, newText: string): DiffLine[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const result: DiffLine[] = [];
+
+  // Simple LCS-based diff
+  const m = oldLines.length;
+  const n = newLines.length;
+
+  // For large files, fall back to a simpler approach
+  if (m * n > 1_000_000) {
+    // Just show removed then added for very large files
+    oldLines.forEach((line, i) => {
+      result.push({ type: "removed", lineOld: i + 1, content: line });
+    });
+    newLines.forEach((line, i) => {
+      result.push({ type: "added", lineNew: i + 1, content: line });
+    });
+    return result;
+  }
+
+  // Build LCS table
+  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  // Backtrack to produce diff
+  const diffLines: DiffLine[] = [];
+  let i = m, j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      diffLines.unshift({ type: "context", lineOld: i, lineNew: j, content: oldLines[i - 1] });
+      i--; j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      diffLines.unshift({ type: "added", lineNew: j, content: newLines[j - 1] });
+      j--;
+    } else {
+      diffLines.unshift({ type: "removed", lineOld: i, content: oldLines[i - 1] });
+      i--;
+    }
+  }
+
+  return diffLines;
+}
+
+interface CodeDiffViewerProps {
+  oldContent: string;
+  newContent: string;
+  fileName?: string;
+  className?: string;
+}
+
+export function CodeDiffViewer({ oldContent, newContent, fileName, className }: CodeDiffViewerProps) {
+  const [activeTab, setActiveTab] = useState<DiffTab>("diff");
+
+  const diffLines = useMemo(
+    () => computeDiff(oldContent, newContent),
+    [oldContent, newContent]
+  );
+
+  const stats = useMemo(() => {
+    const added = diffLines.filter(l => l.type === "added").length;
+    const removed = diffLines.filter(l => l.type === "removed").length;
+    return { added, removed };
+  }, [diffLines]);
+
+  const tabs: { id: DiffTab; label: string }[] = [
+    { id: "diff", label: "Diff" },
+    { id: "original", label: "Original" },
+    { id: "modified", label: "Modified" },
+  ];
+
+  return (
+    <div className={cn("flex flex-col rounded-md border border-border overflow-hidden", className)}>
+      {/* Header with tabs */}
+      <div className="flex items-center justify-between bg-secondary/30 border-b border-border">
+        <div className="flex">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                "px-3 py-1.5 text-[11px] font-medium transition-colors border-b-2 -mb-px",
+                activeTab === tab.id
+                  ? "border-primary text-foreground bg-background/50"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2 px-2">
+          {fileName && (
+            <span className="text-[10px] font-mono text-muted-foreground">
+              {fileName}
+            </span>
+          )}
+          <span className="text-[10px] font-mono text-green-500">+{stats.added}</span>
+          <span className="text-[10px] font-mono text-red-500">-{stats.removed}</span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="overflow-auto max-h-[400px] bg-[#0d1117]">
+        {activeTab === "diff" && (
+          <table className="w-full text-[11px] font-mono border-collapse">
+            <tbody>
+              {diffLines.map((line, idx) => (
+                <tr
+                  key={idx}
+                  className={cn(
+                    line.type === "added" && "bg-green-500/10",
+                    line.type === "removed" && "bg-red-500/10"
+                  )}
+                >
+                  <td className="w-[1px] px-1 text-right text-muted-foreground/40 select-none border-r border-border/30 whitespace-nowrap">
+                    {line.lineOld || ""}
+                  </td>
+                  <td className="w-[1px] px-1 text-right text-muted-foreground/40 select-none border-r border-border/30 whitespace-nowrap">
+                    {line.lineNew || ""}
+                  </td>
+                  <td className="w-[1px] px-1 select-none font-bold">
+                    <span className={cn(
+                      line.type === "added" && "text-green-500",
+                      line.type === "removed" && "text-red-500",
+                      line.type === "context" && "text-muted-foreground/30"
+                    )}>
+                      {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
+                    </span>
+                  </td>
+                  <td className="px-2 whitespace-pre-wrap break-all">
+                    <span className={cn(
+                      line.type === "added" && "text-green-400/90",
+                      line.type === "removed" && "text-red-400/90",
+                      line.type === "context" && "text-foreground/60"
+                    )}>
+                      {line.content}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+
+        {activeTab === "original" && (
+          <pre className="text-[11px] font-mono p-3 whitespace-pre-wrap break-all text-foreground/70">
+            {oldContent || "(empty)"}
+          </pre>
+        )}
+
+        {activeTab === "modified" && (
+          <pre className="text-[11px] font-mono p-3 whitespace-pre-wrap break-all text-foreground/70">
+            {newContent || "(empty)"}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/RightPanel.tsx

@@ -0,0 +1,395 @@
+/**
+ * RightPanel — Manus-style tabbed right panel.
+ * Tabs: Actions (tool timeline), Files (explorer), Preview (live viewport).
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  Activity,
+  FolderTree,
+  Monitor,
+  Folder,
+  File,
+  ChevronRight,
+  ChevronDown,
+  RefreshCw,
+  Home,
+  ArrowUp,
+  FileText,
+  FileCode,
+  FileJson,
+  Image as ImageIcon,
+  Loader2,
+  ExternalLink,
+} from "lucide-react";
+import { ActionTree } from "./ActionTree";
+import type { ChatMessage } from "@/hooks/useChat";
+import { cn } from "@/lib/utils";
+
+// ─── Tab definitions ──────────────────────────────────────────────────
+
+type TabId = "actions" | "files" | "preview";
+
+const TABS: { id: TabId; label: string; icon: typeof Activity }[] = [
+  { id: "actions", label: "Actions", icon: Activity },
+  { id: "files", label: "Files", icon: FolderTree },
+  { id: "preview", label: "Preview", icon: Monitor },
+];
+
+// ─── File Explorer types ──────────────────────────────────────────────
+
+interface FileNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size?: number;
+}
+
+function getFileIcon(name: string) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  if (["ts", "tsx", "js", "jsx", "py", "rs", "go", "java", "c", "cpp", "rb", "sh"].includes(ext))
+    return FileCode;
+  if (["json", "yaml", "yml", "toml", "xml", "env"].includes(ext))
+    return FileJson;
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(ext))
+    return ImageIcon;
+  if (["md", "txt", "log", "csv"].includes(ext))
+    return FileText;
+  return File;
+}
+
+function formatSize(bytes?: number): string {
+  if (bytes === undefined) return "";
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}
+
+// ─── Inline File Explorer ─────────────────────────────────────────────
+
+function FileExplorer() {
+  const [currentPath, setCurrentPath] = useState("/home/user");
+  const [files, setFiles] = useState<FileNode[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string | null>(null);
+  const [loadingContent, setLoadingContent] = useState(false);
+
+  const fetchFiles = useCallback(async (dirPath: string) => {
+    setLoading(true);
+    try {
+      const response = await fetch("/api/chat/slash", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ command: "/files", args: `list ${dirPath}` }),
+      });
+      const data = await response.json();
+      if (data.files) {
+        setFiles(data.files);
+      } else if (data.result) {
+        // Parse text listing
+        const lines = data.result.split("\n").filter((l: string) => l.trim());
+        const parsed: FileNode[] = lines
+          .filter((l: string) => !l.startsWith("##") && !l.startsWith("---"))
+          .map((l: string) => {
+            const isDir = l.includes("[DIR]") || l.endsWith("/");
+            const name = l.replace("[DIR]", "").replace(/\/$/, "").trim().split(/\s+/).pop() || l.trim();
+            return { name, path: `${dirPath}/${name}`.replace("//", "/"), isDirectory: isDir };
+          })
+          .filter((f: FileNode) => f.name && f.name !== "." && f.name !== "..");
+        setFiles(parsed);
+      }
+    } catch (err) {
+      console.error("Failed to fetch files:", err);
+      setFiles([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchFileContent = useCallback(async (filePath: string) => {
+    setLoadingContent(true);
+    try {
+      const response = await fetch("/api/chat/slash", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ command: "/files", args: `read ${filePath}` }),
+      });
+      const data = await response.json();
+      setFileContent(data.content || data.result || "Unable to read file");
+    } catch {
+      setFileContent("Error reading file");
+    } finally {
+      setLoadingContent(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchFiles(currentPath);
+  }, [currentPath, fetchFiles]);
+
+  const navigateUp = () => {
+    const parent = currentPath.split("/").slice(0, -1).join("/") || "/";
+    setCurrentPath(parent);
+    setSelectedFile(null);
+    setFileContent(null);
+  };
+
+  const handleClick = (file: FileNode) => {
+    if (file.isDirectory) {
+      setCurrentPath(file.path);
+      setSelectedFile(null);
+      setFileContent(null);
+    } else {
+      setSelectedFile(file.path);
+      fetchFileContent(file.path);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Path bar */}
+      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border bg-secondary/20">
+        <button
+          onClick={() => { setCurrentPath("/home/user"); setSelectedFile(null); setFileContent(null); }}
+          className="p-1 rounded hover:bg-accent/50"
+          title="Home"
+        >
+          <Home className="size-3 text-muted-foreground" />
+        </button>
+        <button
+          onClick={navigateUp}
+          className="p-1 rounded hover:bg-accent/50"
+          title="Up"
+        >
+          <ArrowUp className="size-3 text-muted-foreground" />
+        </button>
+        <div className="flex-1 text-[10px] font-mono text-muted-foreground truncate px-1">
+          {currentPath}
+        </div>
+        <button
+          onClick={() => fetchFiles(currentPath)}
+          className="p-1 rounded hover:bg-accent/50"
+          title="Refresh"
+        >
+          <RefreshCw className={cn("size-3 text-muted-foreground", loading && "animate-spin")} />
+        </button>
+      </div>
+
+      {/* File list or content preview */}
+      {selectedFile && fileContent !== null ? (
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex items-center gap-1 px-2 py-1 border-b border-border bg-secondary/10">
+            <button
+              onClick={() => { setSelectedFile(null); setFileContent(null); }}
+              className="text-[10px] text-primary hover:underline"
+            >
+              Back
+            </button>
+            <span className="text-[10px] text-muted-foreground truncate">
+              {selectedFile.split("/").pop()}
+            </span>
+          </div>
+          <div className="flex-1 overflow-auto">
+            {loadingContent ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <pre className="text-[11px] font-mono p-2 whitespace-pre-wrap break-all text-foreground/80">
+                {fileContent.length > 10000
+                  ? fileContent.slice(0, 10000) + "\n\n[...truncated]"
+                  : fileContent}
+              </pre>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="flex items-center justify-center h-32">
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            </div>
+          ) : files.length === 0 ? (
+            <div className="flex items-center justify-center h-32 text-[11px] text-muted-foreground">
+              Empty directory
+            </div>
+          ) : (
+            <div className="py-0.5">
+              {files
+                .sort((a, b) => {
+                  if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+                  return a.name.localeCompare(b.name);
+                })
+                .map((file) => {
+                  const Icon = file.isDirectory ? Folder : getFileIcon(file.name);
+                  return (
+                    <button
+                      key={file.path}
+                      onClick={() => handleClick(file)}
+                      className={cn(
+                        "flex items-center gap-1.5 w-full px-2 py-1 text-left hover:bg-accent/50 transition-colors",
+                        selectedFile === file.path && "bg-accent"
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-3.5 shrink-0",
+                          file.isDirectory ? "text-amber-400" : "text-muted-foreground"
+                        )}
+                      />
+                      <span className="text-[11px] truncate flex-1">{file.name}</span>
+                      {!file.isDirectory && file.size !== undefined && (
+                        <span className="text-[9px] text-muted-foreground/50 font-mono">
+                          {formatSize(file.size)}
+                        </span>
+                      )}
+                      {file.isDirectory && (
+                        <ChevronRight className="size-3 text-muted-foreground/30" />
+                      )}
+                    </button>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Preview Panel ────────────────────────────────────────────────────
+
+function PreviewPanel({ messages }: { messages: ChatMessage[] }) {
+  // Extract the latest tool output that could be previewed
+  // (bash output, web fetch results, file contents)
+  const latestPreviewable = (() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.role === "assistant" && msg.toolCalls) {
+        for (let j = msg.toolCalls.length - 1; j >= 0; j--) {
+          const tc = msg.toolCalls[j];
+          if (tc.result && !tc.isError) {
+            if (tc.name === "bash" || tc.name === "PowerShell") {
+              return { type: "terminal" as const, name: tc.name, content: tc.result, command: (() => { try { return JSON.parse(tc.arguments).command; } catch { return ""; } })() };
+            }
+            if (tc.name === "WebFetch" || tc.name === "WebSearch") {
+              return { type: "web" as const, name: tc.name, content: tc.result, url: (() => { try { return JSON.parse(tc.arguments).url || JSON.parse(tc.arguments).query; } catch { return ""; } })() };
+            }
+            if (tc.name === "read_file") {
+              return { type: "file" as const, name: tc.name, content: tc.result, path: (() => { try { return JSON.parse(tc.arguments).path; } catch { return ""; } })() };
+            }
+          }
+        }
+      }
+    }
+    return null;
+  })();
+
+  if (!latestPreviewable) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center text-muted-foreground/40 gap-2 p-4">
+        <Monitor className="size-8" />
+        <p className="text-xs text-center">
+          Live preview will appear here when the agent runs commands or fetches content
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Preview header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-secondary/20">
+        {latestPreviewable.type === "terminal" && (
+          <>
+            <div className="flex gap-1">
+              <div className="size-2 rounded-full bg-red-500/70" />
+              <div className="size-2 rounded-full bg-yellow-500/70" />
+              <div className="size-2 rounded-full bg-green-500/70" />
+            </div>
+            <span className="text-[10px] font-mono text-muted-foreground truncate">
+              $ {latestPreviewable.command?.slice(0, 60)}
+            </span>
+          </>
+        )}
+        {latestPreviewable.type === "web" && (
+          <>
+            <ExternalLink className="size-3 text-muted-foreground" />
+            <span className="text-[10px] font-mono text-muted-foreground truncate">
+              {latestPreviewable.url}
+            </span>
+          </>
+        )}
+        {latestPreviewable.type === "file" && (
+          <>
+            <FileText className="size-3 text-muted-foreground" />
+            <span className="text-[10px] font-mono text-muted-foreground truncate">
+              {latestPreviewable.path}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Preview content */}
+      <div className="flex-1 overflow-auto bg-[#0d1117]">
+        <pre className="text-[11px] font-mono p-3 whitespace-pre-wrap break-all text-green-400/90">
+          {latestPreviewable.content.length > 15000
+            ? latestPreviewable.content.slice(0, 15000) + "\n\n[...truncated]"
+            : latestPreviewable.content}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main RightPanel ──────────────────────────────────────────────────
+
+interface RightPanelProps {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+}
+
+export function RightPanel({ messages, isStreaming }: RightPanelProps) {
+  const [activeTab, setActiveTab] = useState<TabId>("actions");
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      {/* Tab bar */}
+      <div className="flex border-b border-border bg-secondary/10">
+        {TABS.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-2 text-[11px] font-medium transition-colors border-b-2 -mb-px",
+                isActive
+                  ? "border-primary text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
+              )}
+            >
+              <Icon className="size-3.5" />
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-hidden">
+        {activeTab === "actions" && (
+          <ActionTree messages={messages} isStreaming={isStreaming} />
+        )}
+        {activeTab === "files" && (
+          <FileExplorer />
+        )}
+        {activeTab === "preview" && (
+          <PreviewPanel messages={messages} />
+        )}
+      </div>
+    </div>
+  );
+}

client/src/pages/Home.tsx

@@ -16,6 +16,7 @@ import { BuddySprite } from "@/components/BuddySprite";
 import { useBuddy } from "@/buddy";
 import { useChat, type ChatMessage } from "@/hooks/useChat";
 import { ActionTree } from "@/components/ActionTree";
+import { RightPanel } from "@/components/RightPanel";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -1004,7 +1005,7 @@ export default function Home() {
             <ResizableHandle withHandle />
             <ResizablePanel defaultSize={40} minSize={25} maxSize={55}>
               <div className="h-full bg-background border-l border-border">
-                <ActionTree messages={messages} isStreaming={isStreaming} />
+                <RightPanel messages={messages} isStreaming={isStreaming} />
               </div>
             </ResizablePanel>
           </>

package.json

@@ -65,6 +65,7 @@
     "input-otp": "^1.4.2",
     "jose": "6.1.0",
     "lucide-react": "^0.453.0",
+    "micromatch": "^4.0.8",
     "mysql2": "^3.15.0",
     "nanoid": "^5.1.5",
     "next-themes": "^0.4.6",
@@ -90,6 +91,7 @@
     "@types/diff": "^8.0.0",
     "@types/express": "4.17.21",
     "@types/google.maps": "^3.58.1",
+    "@types/micromatch": "^4.0.10",
     "@types/node": "^24.7.0",
     "@types/react": "^19.2.1",
     "@types/react-dom": "^19.2.1",

pnpm-lock.yaml

@@ -167,6 +167,9 @@ importers:
       lucide-react:
         specifier: ^0.453.0
         version: 0.453.0(react@19.2.4)
+      micromatch:
+        specifier: ^4.0.8
+        version: 4.0.8
       mysql2:
         specifier: ^3.15.0
         version: 3.20.0(@types/node@24.12.0)
@@ -237,6 +240,9 @@ importers:
       '@types/google.maps':
         specifier: ^3.58.1
         version: 3.58.1
+      '@types/micromatch':
+        specifier: ^4.0.10
+        version: 4.0.10
       '@types/node':
         specifier: ^24.7.0
         version: 24.12.0
@@ -2375,6 +2381,9 @@ packages:
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
+  '@types/braces@3.0.5':
+    resolution: {integrity: sha512-SQFof9H+LXeWNz8wDe7oN5zu7ket0qwMu5vZubW4GCJ8Kkeh6nBWUz87+KTz/G3Kqsrp0j/W253XJb3KMEeg3w==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -2512,6 +2521,9 @@ packages:
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
+  '@types/micromatch@4.0.10':
+    resolution: {integrity: sha512-5jOhFDElqr4DKTrTEbnW8DZ4Hz5LRUEmyrGpCMrD/NphYv3nUnaF08xmSLx1rGGnyEs/kFnhiw6dCgcDqMr5PQ==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -2664,6 +2676,10 @@ packages:
     resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
     engines: {node: 18 || 20 || >=22}
 
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
   browserslist@4.28.2:
     resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3284,6 +3300,10 @@ packages:
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
   finalhandler@1.3.2:
     resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
     engines: {node: '>= 0.8'}
@@ -3501,6 +3521,10 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -3855,6 +3879,10 @@ packages:
   micromark@4.0.2:
     resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
 
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -4008,6 +4036,10 @@ packages:
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
   picomatch@4.0.4:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
@@ -4427,6 +4459,10 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -6932,6 +6968,8 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 24.12.0
 
+  '@types/braces@3.0.5': {}
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 24.12.0
@@ -7101,6 +7139,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/micromatch@4.0.10':
+    dependencies:
+      '@types/braces': 3.0.5
+
   '@types/ms@2.1.0': {}
 
   '@types/node@24.12.0':
@@ -7278,6 +7320,10 @@ snapshots:
     dependencies:
       balanced-match: 4.0.4
 
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
   browserslist@4.28.2:
     dependencies:
       baseline-browser-mapping: 2.10.13
@@ -7904,6 +7950,10 @@ snapshots:
 
   file-uri-to-path@1.0.0: {}
 
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
   finalhandler@1.3.2:
     dependencies:
       debug: 2.6.9
@@ -8186,6 +8236,8 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
+  is-number@7.0.0: {}
+
   is-plain-obj@4.1.0: {}
 
   is-property@1.0.2: {}
@@ -8739,6 +8791,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
   mime-db@1.52.0: {}
 
   mime-types@2.1.35:
@@ -8872,6 +8929,8 @@ snapshots:
 
   picocolors@1.1.1: {}
 
+  picomatch@2.3.2: {}
+
   picomatch@4.0.4: {}
 
   pkg-types@1.3.1:
@@ -9417,6 +9476,10 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
   toidentifier@1.0.1: {}
 
   trim-lines@3.0.1: {}

server/_core/index.ts

@@ -80,6 +80,30 @@ async function startServer() {
   server.listen(port, "0.0.0.0", () => {
     console.log(`Server running on http://0.0.0.0:${port}/`);
   });
+
+  // ─── Graceful shutdown ─────────────────────────────────────────────
+  const shutdown = (signal: string) => {
+    console.log(`\n[server] ${signal} received — shutting down gracefully...`);
+    server.close(() => {
+      console.log("[server] HTTP server closed");
+      // Close database connections
+      try {
+        const { closeDb } = require("../db");
+        if (typeof closeDb === "function") closeDb();
+      } catch {}
+      console.log("[server] Cleanup complete, exiting");
+      process.exit(0);
+    });
+
+    // Force exit after 10 seconds if graceful shutdown hangs
+    setTimeout(() => {
+      console.error("[server] Forced exit after timeout");
+      process.exit(1);
+    }, 10_000).unref();
+  };
+
+  process.on("SIGTERM", () => shutdown("SIGTERM"));
+  process.on("SIGINT", () => shutdown("SIGINT"));
 }
 
 startServer().catch(console.error);

server/_core/llm.ts

@@ -341,6 +341,7 @@ export async function invokeLLM(params: InvokeParams): Promise<InvokeResult> {
 export interface StreamInvokeParams {
   messages: Message[];
   tools?: Tool[];
+  tool_choice?: ToolChoice;
   model?: string;
   maxTokens?: number;
   temperature?: number;
@@ -363,7 +364,7 @@ export async function invokeLLMStream(params: StreamInvokeParams): Promise<globa
     model,
     messages: params.messages.map(normalizeMessage),
     tools: params.tools,
-    tool_choice: "auto",
+    tool_choice: params.tool_choice || "auto",
     max_tokens: params.maxTokens || DEFAULT_MAX_TOKENS,
     temperature: params.temperature ?? 0.7,
     top_p: params.topP ?? 1,

server/db.ts

@@ -397,3 +397,18 @@ export function deleteSessionState(sessionId: number, key?: string): void {
     console.error(`[db] Failed to delete session state:`, err.message);
   }
 }
+
+// ─── Graceful shutdown ────────────────────────────────────────────────────────
+
+export function closeDb() {
+  if (_sqlite) {
+    try {
+      _sqlite.close();
+      console.log("[db] SQLite connection closed");
+    } catch (err) {
+      console.error("[db] Error closing SQLite:", err);
+    }
+    _sqlite = null;
+    _db = null;
+  }
+}

server/runtime/permissions.ts

@@ -154,19 +154,15 @@ export class PermissionPolicy {
   }
 }
 
+import micromatch from "micromatch";
+
 // ─── Glob matching for tool names ────────────────────────────────────────────
 
 export function globMatchToolName(
   pattern: string,
   toolName: string
 ): boolean {
-  // Convert glob pattern to regex
-  const regexStr = pattern
-    .replace(/[.+^${}()|[\]\\]/g, "\\$&")
-    .replace(/\*/g, ".*")
-    .replace(/\?/g, ".");
-  const regex = new RegExp(`^${regexStr}$`);
-  return regex.test(toolName);
+  return micromatch.isMatch(toolName, pattern);
 }
 
 // ─── Glob matching for file paths ────────────────────────────────────────────
@@ -175,17 +171,7 @@ export function globMatchPath(pattern: string, filePath: string): boolean {
   // Normalize: remove trailing slashes
   const normalizedPath = filePath.replace(/\/+$/, "");
   const normalizedPattern = pattern.replace(/\/+$/, "");
-
-  // Convert glob pattern to regex
-  let regexStr = normalizedPattern
-    .replace(/[.+^${}()|[\]\\]/g, "\\$&")
-    .replace(/\*\*\//g, "(?:.*\/)?")
-    .replace(/\/\*\*/g, "(?:\/.*)?")
-    .replace(/\*\*/g, ".*")
-    .replace(/\*/g, "[^/]*")
-    .replace(/\?/g, "[^/]");
-  const regex = new RegExp(`^${regexStr}$`);
-  return regex.test(normalizedPath);
+  return micromatch.isMatch(normalizedPath, normalizedPattern, { dot: true });
 }
 
 // ─── Permission prompt text ──────────────────────────────────────────────────