@hienlh/ppm 0.11.9 → 0.11.11

package/src/server/ws/chat.ts

@@ -6,6 +6,7 @@ import { listSessions as sdkListSessions } from "@anthropic-ai/claude-agent-sdk"
 import { getSessionTitle } from "../../services/db.service.ts";
 import type { ChatWsClientMessage, SessionPhase } from "../../types/api.ts";
 import { startWatching, stopWatching, onFileChange } from "../../services/file-watcher.service.ts";
+import { bashOutputSpy } from "../../services/bash-output-spy.ts";
 
 // Broadcast file changes to all WS clients for real-time editor reload
 onFileChange((projectName, path) => {
@@ -301,9 +302,27 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
           entry.pendingTeamCreate = ev.toolUseId;
           console.log(`[chat] session=${sessionId} TeamCreate tool_use detected, toolUseId=${ev.toolUseId}`);
         }
+        // Start bash output spy for real-time streaming
+        if (ev.tool === "Bash" && ev.toolUseId) {
+          const command = typeof ev.input === "object" && ev.input
+            ? String((ev.input as any).command ?? "")
+            : "";
+          if (command) {
+            bashOutputSpy.startSpy(ev.toolUseId, command, sessionId, (output) => {
+              broadcast(sessionId, {
+                type: "bash_output",
+                toolUseId: output.toolUseId,
+                content: output.newContent,
+                lineCount: output.totalLineCount,
+              });
+            });
+          }
+        }
       } else if (evType === "tool_result") {
         logSessionEvent(sessionId, "TOOL_RESULT", `error=${ev.isError ?? false} ${(ev.output ?? "").slice(0, 300)}`);
         console.log(`[chat] session=${sessionId} tool_result: toolUseId=${ev.toolUseId} pendingTeamCreate=${entry.pendingTeamCreate} output=${(ev.output ?? "").slice(0, 200)}`);
+        // Stop bash output spy for this tool
+        if (ev.toolUseId) bashOutputSpy.stopSpy(ev.toolUseId);
         // Detect team creation from TeamCreate tool_result
         if (entry.pendingTeamCreate && entry.pendingTeamCreate === ev.toolUseId) {
           const { extractTeamName, startTeamInboxWatcher } = await import("./team-inbox-watcher.ts");
@@ -376,6 +395,8 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
         const newId = ev.newSessionId as string;
         if (newId && newId !== sessionId) {
           console.log(`[chat] session_migrated: ${sessionId} → ${newId}`);
+          // Stop spies tagged with old session ID before re-keying
+          bashOutputSpy.stopAllForSession(sessionId);
           const oldEntry = activeSessions.get(sessionId);
           if (oldEntry) {
             activeSessions.delete(sessionId);
@@ -413,6 +434,8 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
     entry.turnEvents = [];
     setPhase(sessionId, "idle");
     entry.pendingApprovalEvent = undefined;
+    // Cleanup bash output spies
+    bashOutputSpy.stopAllForSession(sessionId);
     // Cleanup team watchers
     for (const w of entry.teamWatchers.values()) w.cleanup();
     entry.teamWatchers.clear();

package/src/services/bash-output-spy.ts

@@ -0,0 +1,213 @@
+/**
+ * BashOutputSpy — monitors SDK Bash tool execution by tailing output files.
+ *
+ * SDK redirects bash stdout to /tmp/claude-{uid}/-tmp/{uuid}/tasks/{task-id}.output
+ * We find the bash PID via pgrep, resolve its stdout fd to the output file,
+ * then poll every 100ms for new content, emitting line-buffered deltas.
+ *
+ * Cross-platform: Linux (/proc/PID/fd/1), macOS (lsof), Windows native = no-op.
+ * Graceful degradation: spy failure = same UX as today (tool_result shows full output).
+ */
+
+interface SpyEntry {
+  sessionId: string;
+  toolUseId: string;
+  filePath: string;
+  bytesRead: number;
+  lineBuffer: string;
+  polling: boolean;
+  intervalId: ReturnType<typeof setInterval>;
+}
+
+export interface SpyOutput {
+  sessionId: string;
+  toolUseId: string;
+  newContent: string;
+  totalLineCount: number;
+}
+
+type OutputCallback = (output: SpyOutput) => void;
+
+const activeSpies = new Map<string, SpyEntry>();
+/** Track total lines per spy for lineCount reporting */
+const lineCounters = new Map<string, number>();
+
+/** Escape special regex chars for pgrep -f */
+function escapeForPgrep(cmd: string): string {
+  // pgrep uses extended regex — escape metacharacters
+  return cmd.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/** Find the newest bash PID matching a command substring (current user only) */
+async function findBashPid(commandSubstring: string): Promise<number | null> {
+  try {
+    // Use a short unique substring of the command for matching
+    const searchStr = escapeForPgrep(commandSubstring.slice(0, 80));
+    const uid = String(process.getuid?.() ?? "");
+    const args = uid ? ["pgrep", "-fn", "-u", uid, searchStr] : ["pgrep", "-fn", searchStr];
+    const proc = Bun.spawn(args, {
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+    const text = await new Response(proc.stdout).text();
+    const exitCode = await proc.exited;
+    if (exitCode !== 0) return null;
+    const pid = parseInt(text.trim(), 10);
+    return Number.isFinite(pid) ? pid : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the stdout output file for a PID (cross-platform) */
+async function resolveOutputFile(pid: number): Promise<string | null> {
+  try {
+    if (process.platform === "linux") {
+      // readlink /proc/PID/fd/1 → output file path
+      const proc = Bun.spawn(["readlink", `/proc/${pid}/fd/1`], {
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      const target = (await new Response(proc.stdout).text()).trim();
+      const exitCode = await proc.exited;
+      if (exitCode !== 0 || !target) return null;
+      if (target.includes("/tasks/") && target.endsWith(".output")) return target;
+      return null;
+    }
+
+    if (process.platform === "darwin") {
+      // lsof -p PID → parse for .output file in /tasks/
+      const proc = Bun.spawn(["lsof", "-p", String(pid)], {
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      const text = await new Response(proc.stdout).text();
+      await proc.exited;
+      for (const line of text.split("\n")) {
+        const match = line.match(/\s(\/\S+\/tasks\/\S+\.output)\s*$/);
+        if (match) return match[1]!;
+      }
+      return null;
+    }
+
+    // Windows native: no-op
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/** Poll the output file for new content, emit complete lines */
+async function pollFile(entry: SpyEntry, onOutput: OutputCallback): Promise<void> {
+  try {
+    const file = Bun.file(entry.filePath);
+    const size = file.size;
+    if (size <= entry.bytesRead) return;
+
+    const newBytes = file.slice(entry.bytesRead, size);
+    const chunk = await newBytes.text();
+    entry.bytesRead = size;
+
+    // Buffer partial lines — only emit on complete newlines
+    const combined = entry.lineBuffer + chunk;
+    const lastNewline = combined.lastIndexOf("\n");
+
+    if (lastNewline === -1) {
+      // No complete line yet — buffer everything
+      entry.lineBuffer = combined;
+      return;
+    }
+
+    // Emit complete lines, keep remainder in buffer
+    const toEmit = combined.slice(0, lastNewline + 1);
+    entry.lineBuffer = combined.slice(lastNewline + 1);
+
+    const lineCount = (lineCounters.get(entry.toolUseId) ?? 0) + toEmit.split("\n").length - 1;
+    lineCounters.set(entry.toolUseId, lineCount);
+
+    onOutput({
+      sessionId: entry.sessionId,
+      toolUseId: entry.toolUseId,
+      newContent: toEmit,
+      totalLineCount: lineCount,
+    });
+  } catch {
+    // File may have been deleted — stop spying
+    stopSpy(entry.toolUseId);
+  }
+}
+
+/** Start monitoring a Bash tool's output */
+async function startSpy(
+  toolUseId: string,
+  command: string,
+  sessionId: string,
+  onOutput: OutputCallback,
+): Promise<void> {
+  // Platform guard: skip on native Windows (not WSL)
+  if (process.platform === "win32") return;
+
+  // Already spying this tool
+  if (activeSpies.has(toolUseId)) return;
+
+  // Retry PID discovery up to 3 times with 100ms delay
+  let pid: number | null = null;
+  for (let attempt = 0; attempt < 3; attempt++) {
+    pid = await findBashPid(command);
+    if (pid) break;
+    await new Promise((r) => setTimeout(r, 100));
+  }
+
+  if (!pid) {
+    console.log(`[bash-spy] toolUseId=${toolUseId} PID not found — skipping`);
+    return;
+  }
+
+  const filePath = await resolveOutputFile(pid);
+  if (!filePath) {
+    console.log(`[bash-spy] toolUseId=${toolUseId} output file not resolved — skipping`);
+    return;
+  }
+
+  const entry: SpyEntry = {
+    sessionId,
+    toolUseId,
+    filePath,
+    bytesRead: 0,
+    lineBuffer: "",
+    polling: false,
+    intervalId: setInterval(async () => {
+      if (entry.polling) return;
+      entry.polling = true;
+      try { await pollFile(entry, onOutput); }
+      finally { entry.polling = false; }
+    }, 100),
+  };
+
+  activeSpies.set(toolUseId, entry);
+  lineCounters.set(toolUseId, 0);
+  console.log(`[bash-spy] started toolUseId=${toolUseId} pid=${pid} file=${filePath}`);
+}
+
+/** Stop monitoring a specific Bash tool */
+function stopSpy(toolUseId: string): void {
+  const entry = activeSpies.get(toolUseId);
+  if (!entry) return;
+  clearInterval(entry.intervalId);
+  activeSpies.delete(toolUseId);
+  lineCounters.delete(toolUseId);
+  console.log(`[bash-spy] stopped toolUseId=${toolUseId}`);
+}
+
+/** Stop all active spies for a session (cleanup on disconnect) */
+function stopAllForSession(sessionId: string): void {
+  for (const [id, entry] of activeSpies) {
+    if (entry.sessionId === sessionId) {
+      clearInterval(entry.intervalId);
+      activeSpies.delete(id);
+      lineCounters.delete(id);
+    }
+  }
+}
+
+export const bashOutputSpy = { startSpy, stopSpy, stopAllForSession };

package/src/services/supervisor.ts

@@ -440,11 +440,29 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
     }
 
     // Kill server child to free the port; keep tunnel alive for domain continuity
+    // Use SIGKILL + process group kill to ensure grandchildren (SDK subprocesses) die too
     log("INFO", "Stopping server before spawning new supervisor (tunnel kept alive)");
-    if (serverChild) { try { serverChild.kill(); } catch {} serverChild = null; }
+    if (serverChild) {
+      const pid = serverChild.pid;
+      try { process.kill(-pid, "SIGKILL"); } catch {} // kill process group
+      try { serverChild.kill("SIGKILL"); } catch {}   // fallback: kill direct child
+      serverChild = null;
+    }
     if (healthTimer) { clearInterval(healthTimer); healthTimer = null; }
-    // Brief wait for port release
-    await Bun.sleep(500);
+    // Poll until port is actually free (max 10s) — never guess with fixed sleep
+    const portFreeStart = Date.now();
+    while (Date.now() - portFreeStart < 10_000) {
+      const inUse = await new Promise<boolean>((resolve) => {
+        const net = require("node:net") as typeof import("node:net");
+        const tester = net.createServer()
+          .once("error", (e: NodeJS.ErrnoException) => resolve(e.code === "EADDRINUSE"))
+          .once("listening", () => tester.close(() => resolve(false)))
+          .listen(_opts.port, _opts.host);
+      });
+      if (!inUse) break;
+      log("DEBUG", `Port ${_opts.port} still in use, waiting...`);
+      await Bun.sleep(200);
+    }
 
     // Spawn new supervisor using saved argv
     const cmd = originalArgv.slice();

package/src/types/api.ts

@@ -36,6 +36,7 @@ export type ChatWsServerMessage =
   | { type: "thinking"; content: string; parentToolUseId?: string }
   | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string; parentToolUseId?: string }
   | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string; parentToolUseId?: string }
+  | { type: "bash_output"; toolUseId: string; content: string; lineCount: number }
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
   | { type: "done"; sessionId: string; contextWindowPct?: number }
   | { type: "error"; message: string }

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

@@ -108,6 +108,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     teamActivity,
     teamMessages,
     markTeamRead,
+    bashPartialOutput,
   } = useChat(sessionId, providerId, projectName);
 
   // Flush pending message once WS connects (replaces unreliable setTimeout)
@@ -398,6 +399,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
         onSelectSession={handleSelectSession}
+        bashPartialOutput={bashPartialOutput}
       />
 
       {/* Bottom toolbar */}

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

@@ -3,6 +3,7 @@ import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { getAuthToken } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { SessionPhase } from "../../../types/api";
+import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
@@ -51,6 +52,8 @@ interface MessageListProps {
   onFork?: (userMessage: string, messageId?: string) => void;
   /** Called when user selects a recent session from the welcome screen */
   onSelectSession?: (session: import("../../../types/chat").SessionInfo) => void;
+  /** Partial bash output ref from useChat for real-time streaming */
+  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
 }
 
 export function MessageList({
@@ -66,6 +69,7 @@ export function MessageList({
   compactStatus,
   projectName,
   onFork,
+  bashPartialOutput,
 }: MessageListProps) {
   // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
@@ -136,6 +140,7 @@ export function MessageList({
                 projectName={projectName}
                 onFork={msg.role === "user" && onFork ? handleFork : undefined}
                 prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
+                bashPartialOutput={bashPartialOutput}
               />
             );
           })}
@@ -170,10 +175,11 @@ function ScrollToBottomButton() {
   );
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput }: {
   message: ChatMessage; isStreaming: boolean; projectName?: string;
   onFork?: (content: string, messageId: string | undefined) => void;
-  prevMsgId?: string
+  prevMsgId?: string;
+  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
 }) {
   if (message.role === "user") {
     const handleFork = onFork ? () => onFork(message.content, prevMsgId) : undefined;
@@ -195,7 +201,7 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, projec
   return (
     <div className="flex flex-col gap-2">
       {message.events && message.events.length > 0
-        ? <InterleavedEvents events={message.events} isStreaming={isStreaming} projectName={projectName} />
+        ? <InterleavedEvents events={message.events} isStreaming={isStreaming} projectName={projectName} bashPartialOutput={bashPartialOutput} />
         : message.content && (
             <div className="text-sm text-text-primary select-text">
               <MarkdownContent content={message.content} projectName={projectName} />
@@ -636,7 +642,7 @@ type EventGroup =
   | { kind: "thinking"; content: string }
   | { kind: "tool"; tool: ChatEvent; result?: ChatEvent; completed?: boolean };
 
-function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatEvent[]; isStreaming: boolean; projectName?: string }) {
+function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput }: { events: ChatEvent[]; isStreaming: boolean; projectName?: string; bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>> }) {
   // Group: consecutive text → merged text block; tool_use + tool_result paired by toolUseId
   const groups: EventGroup[] = [];
   let textBuffer = "";
@@ -757,7 +763,7 @@ function InterleavedEvents({ events, isStreaming, projectName }: { events: ChatE
             </div>
           );
         }
-        return <ToolCard key={`tool-${i}`} tool={group.tool} result={group.result} completed={group.completed} projectName={projectName} />;
+        return <ToolCard key={`tool-${i}`} tool={group.tool} result={group.result} completed={group.completed} projectName={projectName} bashPartialOutput={bashPartialOutput} />;
       })}
     </>
   );

package/src/web/components/chat/tool-cards.tsx

@@ -2,7 +2,8 @@
  * Tool card components for chat message rendering.
  * Handles summary + details for all SDK tool types.
  */
-import { useState, useMemo, lazy, Suspense } from "react";
+import { useState, useEffect, useRef, useMemo, lazy, Suspense } from "react";
+import type { BashPartialEntry } from "../../hooks/use-chat";
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
@@ -48,11 +49,13 @@ export function ToolCard({
   result,
   completed,
   projectName,
+  bashPartialOutput,
 }: {
   tool: ChatEvent;
   result?: ChatEvent;
   completed?: boolean;
   projectName?: string;
+  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
 }) {
   const [expanded, setExpanded] = useState(false);
 
@@ -75,6 +78,18 @@ export function ToolCard({
   const hasChildren = children && children.length > 0;
   const isDone = hasResult || hasAnswers || wasApproved || completed;
 
+  // Read partial bash output for streaming Bash tools
+  const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
+  const partial = toolName === "Bash" && !hasResult && toolUseId
+    ? bashPartialOutput?.current?.get(toolUseId)
+    : undefined;
+  const isStreamingBash = !!partial;
+
+  // Auto-expand ToolCard when streaming bash output
+  useEffect(() => {
+    if (isStreamingBash && !expanded) setExpanded(true);
+  }, [isStreamingBash]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <div className={`rounded border text-xs ${isSubagent ? "border-accent/30 bg-accent/5" : "border-border bg-background"}`}>
       <button
@@ -90,7 +105,10 @@ export function ToolCard({
         <span className="truncate text-text-primary">
           <ToolSummary name={toolName} input={input} />
         </span>
-        {hasChildren && (
+        {isStreamingBash && (
+          <span className="ml-auto text-[10px] text-yellow-400 shrink-0">{partial!.lineCount} line{partial!.lineCount !== 1 ? "s" : ""} streaming...</span>
+        )}
+        {hasChildren && !isStreamingBash && (
           <span className="ml-auto text-[10px] text-text-subtle shrink-0">{children!.length} steps</span>
         )}
       </button>
@@ -99,6 +117,8 @@ export function ToolCard({
           {(tool.type === "tool_use" || tool.type === "approval_request") && (
             <ToolDetails name={toolName} input={input} projectName={projectName} />
           )}
+          {/* Streaming bash output */}
+          {partial && <StreamingBashOutput content={partial.content} lineCount={partial.lineCount} />}
           {/* Subagent children: render nested tool events */}
           {hasChildren && (
             <SubagentChildren events={children!} projectName={projectName} />
@@ -463,6 +483,37 @@ function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; ma
 }
 
 
+/** Real-time streaming bash output with auto-scroll */
+function StreamingBashOutput({ content, lineCount }: { content: string; lineCount: number }) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const userScrolledRef = useRef(false);
+
+  useEffect(() => {
+    if (preRef.current && !userScrolledRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [content]);
+
+  return (
+    <div className="border-t border-border pt-1.5">
+      <div className="flex items-center gap-1 text-[10px] text-yellow-400 mb-1">
+        <Loader2 className="size-3 animate-spin" />
+        <span>Output ({lineCount} line{lineCount !== 1 ? "s" : ""}, streaming...)</span>
+      </div>
+      <pre
+        ref={preRef}
+        onScroll={(e) => {
+          const el = e.currentTarget;
+          userScrolledRef.current = el.scrollTop + el.clientHeight < el.scrollHeight - 20;
+        }}
+        className="overflow-x-auto overflow-y-auto max-h-60 text-text-subtle font-mono whitespace-pre-wrap break-all text-[11px]"
+      >
+        {content.split("\n").slice(-200).join("\n")}
+      </pre>
+    </div>
+  );
+}
+
 function truncate(str?: string, max = 50): string {
   if (!str) return "";
   return str.length > max ? str.slice(0, max) + "…" : str;

package/src/web/components/explorer/file-tree.tsx

@@ -7,6 +7,12 @@ import {
   FileJson,
   FileText,
   FileType,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileSpreadsheet,
+  FileArchive,
+  Database,
   ChevronRight,
   ChevronDown,
   Download,
@@ -40,27 +46,56 @@ function isExternalFileDrag(e: React.DragEvent): boolean {
 /** Synthetic root node for creating files/folders at project root */
 const ROOT_NODE: FileNode = { name: "", path: "", type: "directory" };
 
-const FILE_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
-  ts: FileCode,
-  tsx: FileCode,
-  js: FileCode,
-  jsx: FileCode,
-  py: FileCode,
-  rs: FileCode,
-  go: FileCode,
-  json: FileJson,
-  md: FileText,
-  txt: FileText,
-  yaml: FileType,
-  yml: FileType,
-  html: FileCode,
-  css: FileCode,
-  scss: FileCode,
+type FileIconInfo = { icon: React.ComponentType<{ className?: string }>; color?: string };
+
+const FILE_ICON_MAP: Record<string, FileIconInfo> = {
+  // Code
+  ts: { icon: FileCode, color: "text-blue-400" }, tsx: { icon: FileCode, color: "text-blue-400" },
+  js: { icon: FileCode, color: "text-yellow-400" }, jsx: { icon: FileCode, color: "text-yellow-400" },
+  py: { icon: FileCode, color: "text-green-400" }, rs: { icon: FileCode, color: "text-orange-400" },
+  go: { icon: FileCode, color: "text-cyan-400" }, c: { icon: FileCode, color: "text-blue-300" },
+  cpp: { icon: FileCode, color: "text-blue-300" }, java: { icon: FileCode, color: "text-red-400" },
+  rb: { icon: FileCode, color: "text-red-400" }, php: { icon: FileCode, color: "text-purple-400" },
+  swift: { icon: FileCode, color: "text-orange-400" }, kt: { icon: FileCode, color: "text-purple-400" },
+  dart: { icon: FileCode, color: "text-cyan-400" }, sh: { icon: FileCode, color: "text-green-300" },
+  html: { icon: FileCode, color: "text-orange-400" }, css: { icon: FileCode, color: "text-blue-400" },
+  scss: { icon: FileCode, color: "text-pink-400" },
+  // Data
+  json: { icon: FileJson, color: "text-yellow-400" },
+  yaml: { icon: FileType, color: "text-orange-300" }, yml: { icon: FileType, color: "text-orange-300" },
+  toml: { icon: FileType, color: "text-orange-300" }, ini: { icon: FileType, color: "text-orange-300" },
+  env: { icon: FileType, color: "text-yellow-300" },
+  csv: { icon: FileSpreadsheet, color: "text-green-400" },
+  xls: { icon: FileSpreadsheet, color: "text-green-400" }, xlsx: { icon: FileSpreadsheet, color: "text-green-400" },
+  // Text/Docs
+  md: { icon: FileText, color: "text-text-secondary" }, txt: { icon: FileText, color: "text-text-secondary" },
+  log: { icon: FileText, color: "text-text-subtle" }, pdf: { icon: FileText, color: "text-red-400" },
+  // Images
+  png: { icon: FileImage, color: "text-green-400" }, jpg: { icon: FileImage, color: "text-green-400" },
+  jpeg: { icon: FileImage, color: "text-green-400" }, gif: { icon: FileImage, color: "text-green-400" },
+  svg: { icon: FileImage, color: "text-yellow-400" }, webp: { icon: FileImage, color: "text-green-400" },
+  ico: { icon: FileImage, color: "text-green-400" }, bmp: { icon: FileImage, color: "text-green-400" },
+  // Video
+  mp4: { icon: FileVideo, color: "text-purple-400" }, webm: { icon: FileVideo, color: "text-purple-400" },
+  mov: { icon: FileVideo, color: "text-purple-400" }, avi: { icon: FileVideo, color: "text-purple-400" },
+  mkv: { icon: FileVideo, color: "text-purple-400" },
+  // Audio
+  mp3: { icon: FileAudio, color: "text-pink-400" }, wav: { icon: FileAudio, color: "text-pink-400" },
+  ogg: { icon: FileAudio, color: "text-pink-400" }, flac: { icon: FileAudio, color: "text-pink-400" },
+  // Database
+  db: { icon: Database, color: "text-amber-400" }, sqlite: { icon: Database, color: "text-amber-400" },
+  sqlite3: { icon: Database, color: "text-amber-400" }, sql: { icon: Database, color: "text-amber-400" },
+  // Archives
+  zip: { icon: FileArchive, color: "text-amber-300" }, tar: { icon: FileArchive, color: "text-amber-300" },
+  gz: { icon: FileArchive, color: "text-amber-300" }, rar: { icon: FileArchive, color: "text-amber-300" },
+  "7z": { icon: FileArchive, color: "text-amber-300" },
 };
 
-function getFileIcon(name: string): React.ComponentType<{ className?: string }> {
+const DEFAULT_FILE_ICON: FileIconInfo = { icon: File };
+
+function getFileIcon(name: string): FileIconInfo {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
-  return FILE_ICON_MAP[ext] ?? File;
+  return FILE_ICON_MAP[ext] ?? DEFAULT_FILE_ICON;
 }
 
 interface TreeNodeProps {
@@ -141,10 +176,8 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
     }
   }
 
-  const Icon = isDir
-    ? isExpanded
-      ? FolderOpen
-      : Folder
+  const { icon: FileIcon, color: fileIconColor } = isDir
+    ? { icon: isExpanded ? FolderOpen : Folder, color: "text-primary" }
     : getFileIcon(node.name);
 
   const sortedChildren = node.children
@@ -186,10 +219,10 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
             ) : (
               <span className="w-3.5 shrink-0" />
             )}
-            <Icon
+            <FileIcon
               className={cn(
                 "size-4 shrink-0",
-                isDir ? "text-primary" : "text-text-secondary",
+                fileIconColor ?? "text-text-secondary",
               )}
             />
             <span className="truncate">{node.name}</span>