@hienlh/ppm 0.2.21 → 0.4.0

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

@@ -8,10 +8,9 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { buildBugReport, openGithubIssue, copyToClipboard } from "@/lib/report-bug";
 import { MessageList } from "./message-list";
 import { MessageInput, type ChatAttachment } from "./message-input";
-import { Bot } from "lucide-react";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
-import { UsageBadge, UsageDetailPanel } from "./usage-badge";
+import { ChatHistoryBar } from "./chat-history-bar";
 import type { FileNode } from "../../../types/project";
 import type { Session, SessionInfo } from "../../../types/chat";
 
@@ -25,7 +24,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     (metadata?.sessionId as string) ?? null,
   );
   const [providerId, setProviderId] = useState<string>(
-    (metadata?.providerId as string) ?? "claude-sdk",
+    (metadata?.providerId as string) ?? "claude",
   );
 
   // Slash picker state
@@ -40,9 +39,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [fileFilter, setFileFilter] = useState("");
   const [fileSelected, setFileSelected] = useState<FileNode | null>(null);
 
-  // Usage detail panel
-  const [showUsageDetail, setShowUsageDetail] = useState(false);
-
   // Bug report popup
   const [bugReportText, setBugReportText] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
@@ -57,17 +53,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const updateTab = useTabStore((s) => s.updateTab);
   const version = useSettingsStore((s) => s.version);
 
-  // Fetch AI model name
-  const [modelName, setModelName] = useState<string>("");
-  useEffect(() => {
-    api.get<{ default_provider: string; providers: Record<string, { model?: string }> }>("/api/settings/ai")
-      .then((ai) => {
-        const provider = ai.providers[ai.default_provider];
-        setModelName(provider?.model ?? ai.default_provider);
-      })
-      .catch(() => {});
-  }, []);
-
   // Usage runs independently — auto-refreshes on interval
   const { usageInfo, usageLoading, lastUpdatedAt, refreshUsage, mergeUsage } =
     useUsage(projectName, providerId);
@@ -258,56 +243,24 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-background shrink-0">
-        {/* Session bar */}
-        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50">
-          <div className="flex items-center gap-1.5 text-xs text-text-secondary px-1">
-            <Bot className="size-3.5" />
-            <span className="truncate max-w-[180px]">{modelName || "AI"}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <UsageBadge
-              usage={usageInfo}
-              loading={usageLoading}
-              onClick={() => setShowUsageDetail((v) => !v)}
-            />
-            {sessionId && (
-              <button
-                onClick={async () => {
-                  const text = await buildBugReport(version, { sessionId, projectName: projectName });
-                  setBugReportText(text);
-                  setCopied(false);
-                }}
-                className="p-0.5 rounded hover:bg-surface-elevated text-text-subtle hover:text-text-secondary transition-colors"
-                title="Report bug for this chat session"
-              >
-                <Bug className="size-3.5" />
-              </button>
-            )}
-            <button
-              onClick={() => {
-                if (!isConnected) reconnect();
-                refetchMessages();
-              }}
-              className="group relative size-4 flex items-center justify-center rounded-full hover:bg-surface-hover transition-colors"
-              title={isConnected ? "Connected — click to refetch messages" : "Disconnected — click to reconnect"}
-            >
-              <span
-                className={`size-2 rounded-full transition-colors ${
-                  isConnected ? "bg-green-500" : "bg-red-500 animate-pulse"
-                }`}
-              />
-            </button>
-          </div>
-        </div>
-
-        {/* Usage detail panel (in-flow) */}
-        <UsageDetailPanel
-          usage={usageInfo}
-          visible={showUsageDetail}
-          onClose={() => setShowUsageDetail(false)}
-          onReload={refreshUsage}
-          loading={usageLoading}
+        {/* Unified toolbar: History, Config, Usage, Bug report, Connection */}
+        <ChatHistoryBar
+          projectName={projectName}
+          usageInfo={usageInfo}
+          usageLoading={usageLoading}
+          refreshUsage={refreshUsage}
           lastUpdatedAt={lastUpdatedAt}
+          sessionId={sessionId}
+          onBugReport={sessionId ? async () => {
+            const text = await buildBugReport(version, { sessionId, projectName });
+            setBugReportText(text);
+            setCopied(false);
+          } : undefined}
+          isConnected={isConnected}
+          onReconnect={() => {
+            if (!isConnected) reconnect();
+            refetchMessages();
+          }}
         />
 
         {/* Pickers (in-flow, above input — only one visible at a time) */}

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

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
-import { marked } from "marked";
 import { getAuthToken } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent } from "../../../types/chat";
-import { useTabStore } from "@/stores/tab-store";
 import { ToolCard } from "./tool-cards";
+import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+
 import {
   AlertCircle,
   ShieldAlert,
@@ -435,119 +435,9 @@ function ThinkingIndicator({ lastMessage }: { lastMessage?: ChatMessage }) {
   return null;
 }
 
-/** Configure marked for safe rendering */
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-});
-
-/** Renders markdown content with interactive code blocks and file links */
+/** Wrapper: delegates to shared MarkdownRenderer with code actions enabled */
 function MarkdownContent({ content, projectName }: { content: string; projectName?: string }) {
-  const html = useMemo(() => {
-    try {
-      return marked.parse(content) as string;
-    } catch {
-      return content;
-    }
-  }, [content]);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { openTab } = useTabStore();
-
-  // After render: inject copy/run buttons into <pre> blocks, handle file link clicks
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    // --- Code block copy/run buttons ---
-    container.querySelectorAll("pre").forEach((pre) => {
-      if (pre.querySelector(".code-actions")) return; // already added
-      const code = pre.querySelector("code");
-      const text = code?.textContent ?? pre.textContent ?? "";
-      // Detect language from class (e.g. "language-bash")
-      const langClass = code?.className ?? "";
-      const isBash = /language-(bash|sh|shell|zsh)/.test(langClass)
-        || (!langClass.includes("language-") && text.startsWith("$"));
-
-      // Wrapper for relative positioning
-      pre.style.position = "relative";
-
-      const actions = document.createElement("div");
-      actions.className = "code-actions absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity";
-      // Always visible on touch devices
-      pre.classList.add("group");
-
-      // Copy button
-      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);
-
-      // Run in terminal button (bash only)
-      if (isBash) {
-        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", () => {
-          // Copy to clipboard and open terminal
-          navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
-          if (projectName) {
-            openTab({
-              type: "terminal",
-              title: "Terminal",
-              metadata: { projectName },
-              projectId: projectName,
-              closable: true,
-            });
-          }
-        });
-        actions.appendChild(runBtn);
-      }
-
-      pre.appendChild(actions);
-    });
-
-    // --- File link click handling: open in editor tab ---
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      const link = target.closest("a");
-      if (!link || !container.contains(link)) return;
-
-      const href = link.getAttribute("href") ?? "";
-      // Detect file paths: starts with / or ./ or contains common extensions
-      const isFilePath = /^(\/|\.\/|\.\.\/)/.test(href)
-        || /\.(ts|tsx|js|jsx|py|json|md|yaml|yml|toml|css|html|sh|go|rs|sql)$/i.test(href);
-      if (isFilePath && projectName) {
-        e.preventDefault();
-        openTab({
-          type: "editor",
-          title: href.split("/").pop() ?? href,
-          metadata: { filePath: href, projectName },
-          projectId: projectName,
-          closable: true,
-        });
-      }
-    };
-    container.addEventListener("click", handleClick);
-    return () => container.removeEventListener("click", handleClick);
-  }, [html, projectName, openTab]);
-
-  return (
-    <div
-      ref={containerRef}
-      className="markdown-content prose-sm"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
+  return <MarkdownRenderer content={content} projectName={projectName} codeActions />;
 }
 
 /* ToolCard, ToolSummary, ToolDetails extracted to ./tool-cards.tsx */

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

@@ -3,7 +3,7 @@
  * Handles summary + details for all SDK tool types.
  */
 import { useState, useMemo } from "react";
-import { marked } from "marked";
+import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import {
   ChevronDown,
   ChevronRight,
@@ -65,10 +65,13 @@ export function ToolCard({
   const hasResult = result?.type === "tool_result";
   const isError = hasResult && !!(result as any).isError;
   const hasAnswers = toolName === "AskUserQuestion" && !!(input as any)?.answers;
+  const isSubagent = (toolName === "Agent" || toolName === "Task") && tool.type === "tool_use";
+  const children = isSubagent ? (tool as any).children as ChatEvent[] | undefined : undefined;
+  const hasChildren = children && children.length > 0;
   const isDone = hasResult || hasAnswers || completed;
 
   return (
-    <div className="rounded border border-border bg-background text-xs">
+    <div className={`rounded border text-xs ${isSubagent ? "border-accent/30 bg-accent/5" : "border-border bg-background"}`}>
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 px-2 py-1.5 w-full text-left hover:bg-surface transition-colors min-w-0"
@@ -82,12 +85,19 @@ export function ToolCard({
         <span className="truncate text-text-primary">
           <ToolSummary name={toolName} input={input} />
         </span>
+        {hasChildren && (
+          <span className="ml-auto text-[10px] text-text-subtle shrink-0">{children!.length} steps</span>
+        )}
       </button>
       {expanded && (
         <div className="px-2 pb-2 space-y-1.5">
           {(tool.type === "tool_use" || tool.type === "approval_request") && (
             <ToolDetails name={toolName} input={input} projectName={projectName} />
           )}
+          {/* Subagent children: render nested tool events */}
+          {hasChildren && (
+            <SubagentChildren events={children!} projectName={projectName} />
+          )}
           {hasResult && (
             <ToolResultView toolName={toolName} output={(result as any).output} />
           )}
@@ -395,24 +405,54 @@ function CollapsibleOutput({ output }: { output: string }) {
   );
 }
 
-/** Inline markdown renderer for tool details (prompt, result) */
-function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; maxHeight?: string }) {
-  const html = useMemo(() => {
-    try {
-      return marked.parse(content, { gfm: true, breaks: true }) as string;
-    } catch {
-      return content;
+/** Render subagent child events — nested tool_use/tool_result + text */
+function SubagentChildren({ events, projectName }: { events: ChatEvent[]; projectName?: string }) {
+  // Group children similar to InterleavedEvents: pair tool_use + tool_result, merge text
+  type ChildGroup =
+    | { kind: "text"; content: string }
+    | { kind: "tool"; tool: ChatEvent; result?: ChatEvent };
+
+  const groups: ChildGroup[] = [];
+  let textBuffer = "";
+
+  for (const ev of events) {
+    if (ev.type === "text") {
+      textBuffer += ev.content;
+    } else if (ev.type === "tool_use") {
+      if (textBuffer) { groups.push({ kind: "text", content: textBuffer }); textBuffer = ""; }
+      groups.push({ kind: "tool", tool: ev });
+    } else if (ev.type === "tool_result") {
+      // Match to last unmatched tool_use by toolUseId
+      const trId = (ev as any).toolUseId;
+      const match = trId
+        ? groups.find((g) => g.kind === "tool" && g.tool.type === "tool_use" && (g.tool as any).toolUseId === trId && !g.result) as (ChildGroup & { kind: "tool" }) | undefined
+        : groups.findLast((g) => g.kind === "tool" && !g.result) as (ChildGroup & { kind: "tool" }) | undefined;
+      if (match) match.result = ev;
     }
-  }, [content]);
+  }
+  if (textBuffer) groups.push({ kind: "text", content: textBuffer });
 
   return (
-    <div
-      className={`markdown-content prose-sm text-text-secondary overflow-auto ${maxHeight}`}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <div className="border-l-2 border-accent/20 pl-2 space-y-1 mt-1">
+      {groups.map((g, i) => {
+        if (g.kind === "text") {
+          return (
+            <div key={`st-${i}`} className="text-text-secondary text-[11px]">
+              <MiniMarkdown content={g.content} maxHeight="max-h-24" />
+            </div>
+          );
+        }
+        return <ToolCard key={`sc-${i}`} tool={g.tool} result={g.result} completed={!!(g.result)} projectName={projectName} />;
+      })}
+    </div>
   );
 }
 
+/** Inline markdown renderer for tool details (prompt, result) */
+function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; maxHeight?: string }) {
+  return <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />;
+}
+
 function basename(path?: string): string {
   if (!path) return "";
   return path.split("/").pop() ?? path;

package/src/web/components/editor/code-editor.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState, useCallback, useRef, useMemo } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
-import { marked } from "marked";
+import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -56,21 +56,27 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const isMarkdown = ext === "md" || ext === "mdx";
   const [mdMode, setMdMode] = useState<"edit" | "preview">("preview");
 
+  // Detect external (absolute) file path — not relative to project
+  const isExternalFile = filePath ? /^(\/|[A-Za-z]:[/\\])/.test(filePath) : false;
+
   // Load file content
   useEffect(() => {
-    if (!filePath || !projectName) return;
+    if (!filePath) return;
+    if (!isExternalFile && !projectName) return;
     if (isImage || isPdf) { setLoading(false); return; }
 
     setLoading(true);
     setError(null);
 
+    const readUrl = isExternalFile
+      ? `/api/fs/read?path=${encodeURIComponent(filePath)}`
+      : `${projectUrl(projectName!)}/files/read?path=${encodeURIComponent(filePath)}`;
+
     api
-      .get<{ content: string; encoding: string }>(
-        `${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`,
-      )
+      .get<{ content: string; encoding?: string }>(readUrl)
       .then((data) => {
         setContent(data.content);
-        setEncoding(data.encoding);
+        if (data.encoding) setEncoding(data.encoding);
         latestContentRef.current = data.content;
         setLoading(false);
       })
@@ -80,7 +86,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
       });
 
     return () => { if (saveTimerRef.current) clearTimeout(saveTimerRef.current); };
-  }, [filePath, projectName, isImage, isPdf]);
+  }, [filePath, projectName, isImage, isPdf, isExternalFile]);
 
   // Update tab title unsaved indicator
   useEffect(() => {
@@ -92,13 +98,18 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
 
   const saveFile = useCallback(
     async (text: string) => {
-      if (!filePath || !projectName) return;
+      if (!filePath) return;
+      if (!isExternalFile && !projectName) return;
       try {
-        await api.put(`${projectUrl(projectName)}/files/write`, { path: filePath, content: text });
+        if (isExternalFile) {
+          await api.put("/api/fs/write", { path: filePath, content: text });
+        } else {
+          await api.put(`${projectUrl(projectName!)}/files/write`, { path: filePath, content: text });
+        }
         setUnsaved(false);
       } catch { /* Silent — unsaved indicator persists */ }
     },
-    [filePath, projectName],
+    [filePath, projectName, isExternalFile],
   );
 
   function handleChange(value: string | undefined) {
@@ -119,7 +130,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }, []);
 
-  if (!filePath || !projectName) {
+  if (!filePath || (!isExternalFile && !projectName)) {
     return (
       <div className="flex items-center justify-center h-full text-text-secondary text-sm">
         No file selected.
@@ -142,8 +153,8 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }
 
-  if (isImage) return <ImagePreview filePath={filePath} projectName={projectName} />;
-  if (isPdf) return <PdfPreview filePath={filePath} projectName={projectName} />;
+  if (isImage) return <ImagePreview filePath={filePath!} projectName={projectName!} />;
+  if (isPdf) return <PdfPreview filePath={filePath!} projectName={projectName!} />;
 
   if (encoding === "base64") {
     return (
@@ -181,13 +192,6 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
 
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
-      {/* Desktop toolbar */}
-      <div className="hidden md:flex items-center gap-1 px-2 py-1 border-b shrink-0 bg-background">
-        {mdModeButtons}
-        <div className="flex-1" />
-        {wrapBtn}
-      </div>
-
       {isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
       ) : (
@@ -214,29 +218,12 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
           />
         </div>
       )}
-
-      {/* Mobile toolbar */}
-      <div className="md:hidden flex items-center gap-1 px-2 py-1 border-t shrink-0 bg-background">
-        {mdModeButtons}
-        <div className="flex-1" />
-        {wrapBtn}
-      </div>
     </div>
   );
 }
 
 function MarkdownPreview({ content }: { content: string }) {
-  const html = useMemo(() => {
-    try { return marked.parse(content, { gfm: true, breaks: true }) as string; }
-    catch { return content; }
-  }, [content]);
-
-  return (
-    <div
-      className="flex-1 overflow-auto p-4 markdown-content prose-sm"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
+  return <MarkdownRenderer content={content} className="flex-1 overflow-auto p-4" />;
 }
 
 function ImagePreview({ filePath, projectName }: { filePath: string; projectName: string }) {

package/src/web/components/editor/diff-viewer.tsx

@@ -162,22 +162,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-1.5 border-b text-xs text-muted-foreground">
-        <FileCode className="size-3.5" />
-        {isFileCompare ? (
-          <span className="font-mono truncate flex-1">{file1} vs {file2}</span>
-        ) : (
-          <span className="flex-1 truncate">
-            <span className="font-mono">{filePath ?? "Working tree changes"}</span>
-            {(ref1 || ref2) && (
-              <span> ({ref1?.slice(0, 7) ?? "HEAD"} vs {ref2?.slice(0, 7) ?? "working tree"})</span>
-            )}
-          </span>
-        )}
-        <div className="hidden md:block">{expandToggle}</div>
-      </div>
-
       {/* Monaco DiffEditor */}
       <div className="flex-1 overflow-hidden">
         <DiffEditor
@@ -198,11 +182,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
           loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
         />
       </div>
-
-      {/* Mobile expand toggle */}
-      <div className="md:hidden flex justify-center border-t py-1 bg-background shrink-0">
-        {expandToggle}
-      </div>
     </div>
   );
 }