@hienlh/ppm 0.12.11 → 0.13.0

package/src/services/jsonl-transcript-parser.ts

@@ -0,0 +1,216 @@
+/**
+ * Parses a Claude Code JSONL transcript file into ChatMessage[].
+ * Reusable across live SDK session history (claude-agent-sdk.ts) and
+ * pre-compact transcript loading (chat route /pre-compact-messages).
+ */
+import { existsSync, realpathSync, statSync } from "node:fs";
+import { resolve } from "node:path";
+import { homedir } from "node:os";
+import type { ChatEvent, ChatMessage } from "../types/chat.ts";
+
+const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
+const TEAMMATE_MSG_RE = /<teammate-message[^>]*>[\s\S]*?<\/teammate-message>/g;
+
+/** Strip SDK teammate-message XML tags from assistant text */
+export function stripTeammateXml(text: string): string {
+  if (!text.includes("<teammate-message")) return text;
+  return text.replace(TEAMMATE_MSG_RE, "").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+/** Extract plain text from message payload */
+export function extractText(message: unknown): string {
+  if (!message || typeof message !== "object") return "";
+  const msg = message as Record<string, unknown>;
+  if (typeof msg.content === "string") return msg.content;
+  if (Array.isArray(msg.content)) {
+    return (msg.content as Array<Record<string, unknown>>)
+      .filter((b) => b.type === "text" && typeof b.text === "string")
+      .map((b) => b.text as string)
+      .join("");
+  }
+  return "";
+}
+
+/** Parse SDK SessionMessage into ChatMessage with events for tool_use blocks */
+export function parseSessionMessage(
+  msg: { uuid: string; type: string; message: unknown; parent_tool_use_id?: string | null },
+): ChatMessage {
+  const message = msg.message as Record<string, unknown> | undefined;
+  const role = msg.type as "user" | "assistant";
+  const parentId = (msg as any).parent_tool_use_id as string | undefined;
+
+  // Filter synthetic SDK-generated error messages (auth failures, rate limits, etc.)
+  const isSdkErrorMessage =
+    (msg as any).isApiErrorMessage === true ||
+    typeof (msg as any).error === "string" ||
+    (message && (message as any).model === "<synthetic>" &&
+      Array.isArray(message.content) &&
+      (message.content as Array<Record<string, unknown>>).some(
+        (b) => b.type === "text" && typeof b.text === "string" &&
+          /Failed to authenticate|API Error: 40[13]|hit your limit|rate.?limit/i.test(b.text as string),
+      ));
+  if (isSdkErrorMessage) {
+    return {
+      id: msg.uuid,
+      role,
+      content: "",
+      timestamp: new Date().toISOString(),
+      sdkUuid: msg.uuid,
+    };
+  }
+
+  const events: ChatEvent[] = [];
+  let textContent = "";
+
+  if (message && Array.isArray(message.content)) {
+    for (const block of message.content as Array<Record<string, unknown>>) {
+      if (block.type === "text" && typeof block.text === "string") {
+        const cleaned = role === "assistant" ? stripTeammateXml(block.text) : block.text;
+        textContent += cleaned;
+        if (role === "assistant" && cleaned) {
+          events.push({ type: "text", content: cleaned, ...(parentId && { parentToolUseId: parentId }) });
+        }
+      } else if (block.type === "tool_use") {
+        events.push({
+          type: "tool_use",
+          tool: (block.name as string) ?? "unknown",
+          input: block.input ?? {},
+          toolUseId: block.id as string | undefined,
+          ...(parentId && { parentToolUseId: parentId }),
+        });
+      } else if (block.type === "tool_result") {
+        const output = block.content ?? block.output ?? "";
+        events.push({
+          type: "tool_result",
+          output: typeof output === "string" ? output : JSON.stringify(output),
+          isError: !!(block as Record<string, unknown>).is_error,
+          toolUseId: block.tool_use_id as string | undefined,
+          ...(parentId && { parentToolUseId: parentId }),
+        });
+      }
+    }
+  } else {
+    textContent = extractText(message);
+  }
+
+  // SDK-generated user messages carry system text (tool_result blocks, teammate XML) —
+  // clear so they don't render as user bubbles.
+  if (role === "user" && (events.some((e) => e.type === "tool_result") || textContent.includes("<teammate-message"))) {
+    textContent = "";
+  }
+
+  return {
+    id: msg.uuid,
+    role,
+    content: textContent,
+    events: events.length > 0 ? events : undefined,
+    timestamp: new Date().toISOString(),
+    sdkUuid: msg.uuid,
+  };
+}
+
+/**
+ * Move events with parentToolUseId into their parent Agent/Task tool_use's children array.
+ * Mutates the array in-place.
+ */
+export function nestChildEvents(events: ChatEvent[]): void {
+  const parentMap = new Map<string, ChatEvent & { type: "tool_use" }>();
+  for (const ev of events) {
+    if (ev.type === "tool_use" && (ev.tool === "Agent" || ev.tool === "Task") && ev.toolUseId) {
+      parentMap.set(ev.toolUseId, ev);
+    }
+  }
+  if (parentMap.size === 0) return;
+
+  const childIndices: number[] = [];
+  for (let i = 0; i < events.length; i++) {
+    const ev = events[i]!;
+    const pid = (ev as any).parentToolUseId as string | undefined;
+    if (!pid) continue;
+    const parent = parentMap.get(pid);
+    if (parent) {
+      if (!parent.children) parent.children = [];
+      parent.children.push(ev);
+      childIndices.push(i);
+    }
+  }
+  for (let i = childIndices.length - 1; i >= 0; i--) {
+    events.splice(childIndices[i]!, 1);
+  }
+}
+
+/**
+ * Validate JSONL path — must be under ~/.claude/ (prevents arbitrary file reads).
+ * Throws Error with descriptive message. Returns resolved realpath on success.
+ */
+export function validateJsonlPath(inputPath: string): string {
+  if (!inputPath) throw new Error("jsonlPath is required");
+  // Reject obvious traversal attempts before resolution
+  if (inputPath.includes("\0")) throw new Error("Invalid path: denied");
+  if (!inputPath.endsWith(".jsonl")) throw new Error("Invalid path: must be a .jsonl file");
+
+  const resolved = resolve(inputPath);
+  if (!existsSync(resolved)) throw new Error("File not found");
+
+  let real: string;
+  try {
+    real = realpathSync(resolved);
+  } catch {
+    throw new Error("File not found");
+  }
+
+  const claudeDir = resolve(homedir(), ".claude") + "/";
+  if (!(real + "/").startsWith(claudeDir)) {
+    throw new Error("Access denied: path traversal detected");
+  }
+
+  const stat = statSync(real);
+  if (!stat.isFile()) throw new Error("Not a regular file");
+  if (stat.size > MAX_FILE_SIZE) {
+    throw new Error(`File too large: ${Math.round(stat.size / 1024 / 1024)}MB exceeds 50MB limit`);
+  }
+  return real;
+}
+
+/**
+ * Read a JSONL transcript file, parse entries, apply merge/nest pipeline, return ChatMessage[].
+ * Applies the same logic as ClaudeAgentSdkProvider.getMessages() but reads from file directly.
+ */
+export async function parseJsonlTranscript(filePath: string): Promise<ChatMessage[]> {
+  const text = await Bun.file(filePath).text();
+  const parsed: ChatMessage[] = [];
+  for (const line of text.split("\n")) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    let entry: any;
+    try {
+      entry = JSON.parse(trimmed);
+    } catch {
+      continue; // skip malformed lines defensively
+    }
+    if (entry.type !== "user" && entry.type !== "assistant") continue;
+    if (!entry.uuid || !entry.message) continue;
+    parsed.push(parseSessionMessage(entry));
+  }
+
+  // Merge tool_result-only user messages into preceding assistant
+  const merged: ChatMessage[] = [];
+  for (const msg of parsed) {
+    if (msg.events?.length && msg.events.every((e) => e.type === "tool_result")) {
+      const lastAssistant = [...merged].reverse().find((m) => m.role === "assistant");
+      if (lastAssistant?.events) {
+        lastAssistant.events.push(...msg.events);
+        continue;
+      }
+    }
+    merged.push(msg);
+  }
+
+  for (const msg of merged) {
+    if (msg.events) nestChildEvents(msg.events);
+  }
+
+  return merged.filter(
+    (msg) => msg.content.trim().length > 0 || (msg.events && msg.events.length > 0),
+  );
+}

package/src/services/skill-export/backup-existing.ts

@@ -0,0 +1,33 @@
+// Rename existing skill files to `.bak-<timestamp>` before overwriting.
+// Preserves earlier backups by embedding a UTC timestamp in the suffix.
+import { existsSync, renameSync, readdirSync, statSync } from "node:fs";
+import { resolve } from "node:path";
+
+/** Produce a compact UTC timestamp like `202604211733` (YYYYMMDDHHmm). */
+export function makeTimestamp(d: Date = new Date()): string {
+  return d.toISOString().replace(/[-:T]/g, "").slice(0, 12);
+}
+
+export function backupExisting(targetDir: string, ts: string = makeTimestamp()): string[] {
+  if (!existsSync(targetDir)) return [];
+  const backedUp: string[] = [];
+  walkAndBackup(targetDir, ts, backedUp);
+  return backedUp;
+}
+
+function walkAndBackup(dir: string, ts: string, collected: string[]): void {
+  const entries = readdirSync(dir);
+  for (const name of entries) {
+    // Skip already-backed-up files to avoid `.md.bak-X.bak-Y` chains.
+    if (name.includes(".bak-")) continue;
+    const abs = resolve(dir, name);
+    const st = statSync(abs);
+    if (st.isDirectory()) {
+      walkAndBackup(abs, ts, collected);
+    } else if (st.isFile() && name.endsWith(".md")) {
+      const dest = `${abs}.bak-${ts}`;
+      renameSync(abs, dest);
+      collected.push(dest);
+    }
+  }
+}

package/src/services/skill-export/copy-bundled-skill.ts

@@ -0,0 +1,36 @@
+// Recursive copy of the bundled skill package to a target directory.
+// Skips any stale `.bak-*` files in source (defensive, should not occur in bundle).
+import { cpSync, mkdirSync, existsSync, readdirSync, statSync, copyFileSync } from "node:fs";
+import { resolve, relative } from "node:path";
+
+export function copyBundledSkill(sourceDir: string, targetDir: string): string[] {
+  if (!existsSync(sourceDir)) {
+    throw new Error(`Source skill dir not found: ${sourceDir}`);
+  }
+  mkdirSync(targetDir, { recursive: true });
+  const copied: string[] = [];
+  walk(sourceDir, sourceDir, targetDir, copied);
+  return copied;
+}
+
+function walk(rootSrc: string, dir: string, targetRoot: string, collected: string[]): void {
+  for (const name of readdirSync(dir)) {
+    if (name.includes(".bak-")) continue;
+    const abs = resolve(dir, name);
+    const rel = relative(rootSrc, abs);
+    const dest = resolve(targetRoot, rel);
+    const st = statSync(abs);
+    if (st.isDirectory()) {
+      mkdirSync(dest, { recursive: true });
+      walk(rootSrc, abs, targetRoot, collected);
+    } else if (st.isFile()) {
+      copyFileSync(abs, dest);
+      collected.push(dest);
+    }
+  }
+}
+
+// Fallback single-shot copy using Node 16.7+ cpSync (kept in case walk is bypassed).
+export function copyTree(src: string, dest: string): void {
+  cpSync(src, dest, { recursive: true });
+}

package/src/services/skill-export/generate-db-schema.ts

@@ -0,0 +1,66 @@
+// Runtime: read the user's PPM SQLite config DB (readonly) and render a markdown schema doc.
+// Never opens the DB read-write. Gracefully handles missing DB.
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { Database } from "bun:sqlite";
+import { getPpmDir } from "../ppm-dir.ts";
+
+interface ColumnInfo {
+  cid: number;
+  name: string;
+  type: string;
+  notnull: number;
+  dflt_value: string | null;
+  pk: number;
+}
+
+interface TableRow {
+  name: string;
+}
+
+export function generateDbSchemaMarkdown(dbPath?: string): string {
+  const path = dbPath ?? resolve(getPpmDir(), "ppm.db");
+  const header = "# PPM Database Schema\n\n_Auto-generated at install time from your local config DB._\n";
+
+  if (!existsSync(path)) {
+    return `${header}\n_Database not found at \`${path}\`. Run \`ppm init\` to create it._\n`;
+  }
+
+  let db: Database | null = null;
+  try {
+    db = new Database(path, { readonly: true });
+    const tables = db
+      .query<TableRow, []>("SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name")
+      .all();
+
+    if (tables.length === 0) {
+      return `${header}\n_No tables found in \`${path}\`._\n`;
+    }
+
+    const parts: string[] = [header, ""];
+    parts.push(`Source: \`${path}\``);
+    parts.push("");
+
+    for (const t of tables) {
+      parts.push(`## ${t.name}`);
+      parts.push("");
+      const cols = db.query<ColumnInfo, []>(`PRAGMA table_info("${t.name}")`).all();
+      parts.push("| Column | Type | Nullable | PK | Default |");
+      parts.push("|---|---|---|---|---|");
+      for (const c of cols) {
+        const nullable = c.notnull === 0 ? "yes" : "no";
+        const pk = c.pk > 0 ? "yes" : "";
+        const def = c.dflt_value !== null ? `\`${c.dflt_value}\`` : "";
+        parts.push(`| \`${c.name}\` | \`${c.type || "—"}\` | ${nullable} | ${pk} | ${def} |`);
+      }
+      parts.push("");
+    }
+
+    return parts.join("\n") + "\n";
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : String(e);
+    return `${header}\n_Failed to read database at \`${path}\`: ${msg}_\n`;
+  } finally {
+    db?.close();
+  }
+}

package/src/services/skill-export/index.ts

@@ -0,0 +1,6 @@
+// Barrel re-exports for the skill-export service.
+export { resolveTargetDir, type SkillScope, type ResolveTargetOpts } from "./resolve-target-dir.ts";
+export { resolveAssetsDir } from "./resolve-assets-dir.ts";
+export { backupExisting, makeTimestamp } from "./backup-existing.ts";
+export { copyBundledSkill } from "./copy-bundled-skill.ts";
+export { generateDbSchemaMarkdown } from "./generate-db-schema.ts";

package/src/services/skill-export/resolve-assets-dir.ts

@@ -0,0 +1,31 @@
+// Resolve the bundled skill assets dir. Works both in dev (`bun src/index.ts`)
+// and installed npm package. Throws a clear error if assets are missing.
+import { fileURLToPath } from "node:url";
+import { resolve, dirname } from "node:path";
+import { existsSync } from "node:fs";
+
+const ASSETS_REL = "assets/skills/ppm";
+
+/**
+ * Walks up from this file to find the repo/package root that contains
+ * `assets/skills/ppm/SKILL.md`. Covers both:
+ *   - dev:     src/services/skill-export/*.ts      → repo root is ../../..
+ *   - bundled: compiled binary walks up similarly when `bun build --compile` preserves structure
+ */
+export function resolveAssetsDir(): string {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const candidates = [
+    resolve(here, "../../..", ASSETS_REL),
+    resolve(here, "../..", ASSETS_REL),
+    resolve(here, "..", ASSETS_REL),
+    resolve(process.cwd(), ASSETS_REL),
+  ];
+  for (const c of candidates) {
+    if (existsSync(resolve(c, "SKILL.md"))) return c;
+  }
+  throw new Error(
+    `Bundled PPM skill assets not found. Searched:\n  ${candidates.join(
+      "\n  ",
+    )}\nRun \`bun run generate:skill\` (dev) or reinstall PPM.`,
+  );
+}

package/src/services/skill-export/resolve-target-dir.ts

@@ -0,0 +1,17 @@
+// Resolve the install target directory based on scope/output flags.
+// Precedence: --output > --scope project > --scope user (default).
+import { resolve } from "node:path";
+import { homedir } from "node:os";
+
+export type SkillScope = "user" | "project";
+
+export interface ResolveTargetOpts {
+  scope?: SkillScope;
+  output?: string;
+}
+
+export function resolveTargetDir(opts: ResolveTargetOpts): string {
+  if (opts.output) return resolve(opts.output);
+  if (opts.scope === "project") return resolve(process.cwd(), ".claude/skills/ppm");
+  return resolve(homedir(), ".claude/skills/ppm");
+}

package/src/services/supervisor.ts

@@ -949,7 +949,8 @@ if (process.argv.includes("__supervise__")) {
   const idx = process.argv.indexOf("__supervise__");
   const port = parseInt(process.argv[idx + 1] ?? "8080", 10);
   const host = process.argv[idx + 2] ?? "0.0.0.0";
-  const profile = process.argv[idx + 3] && process.argv[idx + 3] !== "_" ? process.argv[idx + 3] : undefined;
+  const profileRaw = process.argv[idx + 3];
+  const profile = profileRaw && profileRaw !== "_" && !profileRaw.startsWith("--") ? profileRaw : undefined;
   const share = process.argv.includes("--share");
 
   // Set DB profile for supervisor (needed to read config)

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

@@ -88,6 +88,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   const {
     messages,
+    renderedMessages,
+    expandCompact,
+    isCompactExpanded,
     messagesLoading,
     isStreaming,
     phase,
@@ -384,7 +387,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
       {/* Messages */}
       <MessageList
-        messages={messages}
+        messages={renderedMessages}
+        onExpandCompact={expandCompact}
+        isCompactExpanded={isCompactExpanded}
         messagesLoading={messagesLoading}
         pendingApproval={pendingApproval}
         onApprovalResponse={respondToApproval}

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

@@ -5,6 +5,7 @@ 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";
+import { extractJsonlPath, PreCompactButton, type PreCompactStatus } from "./pre-compact-button";
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
@@ -55,6 +56,10 @@ interface MessageListProps {
   onSelectSession?: (session: import("../../../types/chat").SessionInfo) => void;
   /** Partial bash output ref from useChat for real-time streaming */
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  /** Fetches pre-compact transcript and prepends messages. Returns loaded count. */
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  /** Whether a given compact message has already been expanded. */
+  isCompactExpanded?: (compactMessageId: string) => boolean;
 }
 
 export function MessageList({
@@ -71,6 +76,8 @@ export function MessageList({
   projectName,
   onFork,
   bashPartialOutput,
+  onExpandCompact,
+  isCompactExpanded,
 }: MessageListProps) {
   // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
@@ -102,6 +109,15 @@ export function MessageList({
     onFork?.(msgContent, msgId);
   }, [onFork]);
 
+  // Wrap expandCompact: bump visibleCount by loaded count so expansion is immediately visible
+  // in the paginated view (pre-compact messages land at top of flattened array, above pagination window).
+  const handleExpandCompact = useCallback(async (compactId: string, jsonlPath: string): Promise<number> => {
+    if (!onExpandCompact) throw new Error("Expansion not wired");
+    const count = await onExpandCompact(compactId, jsonlPath);
+    setVisibleCount((c) => c + count);
+    return count;
+  }, [onExpandCompact]);
+
   if (messagesLoading) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
@@ -122,8 +138,8 @@ export function MessageList({
 
   return (
     <div className="relative flex-1 overflow-hidden flex flex-col min-h-0">
-      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict]" resize="smooth" initial="instant">
-        <StickToBottom.Content className="p-4 space-y-4 select-none">
+      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict] [overflow-anchor:auto]" resize="smooth" initial="instant">
+        <StickToBottom.Content className="p-4 space-y-4 select-none [&>*]:[overflow-anchor:auto]">
           {hasMore && (
             <button onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
               className="w-full py-2 text-xs text-text-secondary hover:text-text-primary bg-surface-elevated/50 hover:bg-surface-elevated rounded-md border border-border/50 transition-colors">
@@ -142,6 +158,8 @@ export function MessageList({
                 onFork={msg.role === "user" && onFork ? handleFork : undefined}
                 prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
                 bashPartialOutput={bashPartialOutput}
+                onExpandCompact={handleExpandCompact}
+                isCompactExpanded={isCompactExpanded}
               />
             );
           })}
@@ -176,16 +194,25 @@ function ScrollToBottomButton() {
   );
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput, onExpandCompact, isCompactExpanded }: {
   message: ChatMessage; isStreaming: boolean; projectName?: string;
   onFork?: (content: string, messageId: string | undefined) => void;
   prevMsgId?: string;
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
 }) {
   if (message.role === "user") {
     const handleFork = onFork ? () => onFork(message.content, prevMsgId) : undefined;
     return (
-      <UserBubble content={message.content} projectName={projectName} onFork={handleFork} />
+      <UserBubble
+        content={message.content}
+        messageId={message.id}
+        projectName={projectName}
+        onFork={handleFork}
+        onExpandCompact={onExpandCompact}
+        isCompactExpanded={isCompactExpanded}
+      />
     );
   }
 
@@ -202,7 +229,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} bashPartialOutput={bashPartialOutput} />
+        ? <InterleavedEvents events={message.events} isStreaming={isStreaming} projectName={projectName} bashPartialOutput={bashPartialOutput} messageId={message.id} onExpandCompact={onExpandCompact} isCompactExpanded={isCompactExpanded} />
         : message.content && (
             <div className="text-sm text-text-primary select-text">
               <MarkdownContent content={message.content} projectName={projectName} />
@@ -309,14 +336,38 @@ function isPdfPath(path: string): boolean {
 const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details"]);
 
 /** User message bubble — full width, collapsible, with system tag badges */
-function UserBubble({ content, projectName, onFork }: { content: string; projectName?: string; onFork?: () => void }) {
-  const { files, text, tags, command } = useMemo(() => {
+function UserBubble({ content, messageId, projectName, onFork, onExpandCompact, isCompactExpanded }: {
+  content: string;
+  messageId?: string;
+  projectName?: string;
+  onFork?: () => void;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
+}) {
+  const { files, text, tags, command, jsonlPath } = useMemo(() => {
     const parsed = parseUserAttachments(content);
     const { cleanText: noSysTags, tags } = extractSystemTags(parsed.text);
     const { command, cleanText } = parseCommandTags(noSysTags);
-    return { files: parsed.files, text: cleanText, tags, command };
+    return { files: parsed.files, text: cleanText, tags, command, jsonlPath: extractJsonlPath(cleanText) };
   }, [content]);
 
+  // Pre-compact expansion state — local per button instance
+  const [preCompactStatus, setPreCompactStatus] = useState<PreCompactStatus>(() =>
+    messageId && isCompactExpanded?.(messageId) ? "loaded" : "idle",
+  );
+  const [preCompactCount, setPreCompactCount] = useState<number | undefined>();
+  const handleExpand = useCallback(async () => {
+    if (!jsonlPath || !messageId || !onExpandCompact) return;
+    setPreCompactStatus("loading");
+    try {
+      const count = await onExpandCompact(messageId, jsonlPath);
+      setPreCompactCount(count);
+      setPreCompactStatus("loaded");
+    } catch {
+      setPreCompactStatus("error");
+    }
+  }, [jsonlPath, messageId, onExpandCompact]);
+
   const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
 
   const [expanded, setExpanded] = useState(false);
@@ -399,6 +450,15 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
           {expanded ? <><ChevronUp className="size-3" />Show less</> : <><ChevronDown className="size-3" />Show more</>}
         </button>
       )}
+      {/* Expand compacted conversation: detect JSONL path in compact summary user message.
+          Prepends pre-compact messages into main flattened list (see useChat.expandCompact). */}
+      {jsonlPath && messageId && onExpandCompact && (
+        <PreCompactButton
+          status={preCompactStatus}
+          onLoad={preCompactStatus === "idle" || preCompactStatus === "error" ? handleExpand : undefined}
+          count={preCompactCount}
+        />
+      )}
       {/* Fork/Rewind button — only for real user messages */}
       {!isSystemContext && onFork && (
         <button
@@ -673,7 +733,31 @@ type EventGroup =
   | { kind: "thinking"; content: string }
   | { kind: "tool"; tool: ChatEvent; result?: ChatEvent; completed?: boolean };
 
-function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput }: { events: ChatEvent[]; isStreaming: boolean; projectName?: string; bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>> }) {
+function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput, messageId, onExpandCompact, isCompactExpanded }: {
+  events: ChatEvent[];
+  isStreaming: boolean;
+  projectName?: string;
+  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  messageId?: string;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
+}) {
+  // Local state for the /compact slash-command path (assistant-authored summary)
+  const [preCompactStatus, setPreCompactStatus] = useState<PreCompactStatus>(() =>
+    messageId && isCompactExpanded?.(messageId) ? "loaded" : "idle",
+  );
+  const [preCompactCount, setPreCompactCount] = useState<number | undefined>();
+  const handleExpand = useCallback(async (jsonlPath: string) => {
+    if (!messageId || !onExpandCompact) return;
+    setPreCompactStatus("loading");
+    try {
+      const count = await onExpandCompact(messageId, jsonlPath);
+      setPreCompactCount(count);
+      setPreCompactStatus("loaded");
+    } catch {
+      setPreCompactStatus("error");
+    }
+  }, [messageId, onExpandCompact]);
   // Group: consecutive text → merged text block; tool_use + tool_result paired by toolUseId
   const groups: EventGroup[] = [];
   let textBuffer = "";
@@ -788,9 +872,17 @@ function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput
         }
         if (group.kind === "text") {
           const isLast = isStreaming && i === groups.length - 1;
+          const jsonlPath = extractJsonlPath(group.content);
           return (
             <div key={`text-${i}`} className="text-sm text-text-primary select-text">
               <StreamingText content={group.content} animate={isLast} projectName={projectName} />
+              {jsonlPath && messageId && onExpandCompact && (
+                <PreCompactButton
+                  status={preCompactStatus}
+                  onLoad={preCompactStatus === "idle" || preCompactStatus === "error" ? () => handleExpand(jsonlPath) : undefined}
+                  count={preCompactCount}
+                />
+              )}
             </div>
           );
         }