@hienlh/ppm 0.12.10 → 0.12.12

package/src/services/config.service.ts

@@ -1,5 +1,3 @@
-import { existsSync, readFileSync, renameSync } from "node:fs";
-import { resolve } from "node:path";
 import { randomBytes } from "node:crypto";
 import type { PpmConfig, ProjectConfig } from "../types/config.ts";
 import { DEFAULT_CONFIG, sanitizeConfig } from "../types/config.ts";
@@ -15,7 +13,6 @@ import {
   getProjectSettingsJson,
   patchProjectSettingsJson,
 } from "./db.service.ts";
-import { getPpmDir } from "./ppm-dir.ts";
 
 /** Top-level config keys stored in the config table (not projects) */
 const CONFIG_TABLE_KEYS: (keyof PpmConfig)[] = [
@@ -32,20 +29,8 @@ export const FILE_CONFIG_KEYS = {
 class ConfigService {
   private config: PpmConfig = structuredClone(DEFAULT_CONFIG);
 
-  /** Load config from DB. If explicitPath given, import that YAML first. */
-  load(explicitPath?: string): PpmConfig {
-    // Import explicit YAML if provided (e.g. `ppm start -c path`)
-    if (explicitPath && existsSync(explicitPath)) {
-      this.importFromYaml(explicitPath);
-    }
-
-    // Auto-migrate: if config.yaml exists but DB has no config rows
-    // Skip migration when using in-memory DB (tests)
-    if (!getDbFilePath().includes(":memory:")) {
-      this.migrateYamlIfNeeded();
-    }
-
-    // Load from DB
+  /** Load config from SQLite. Creates defaults if DB is empty. */
+  load(): PpmConfig {
     const dbConfig = getAllConfig();
     const dbProjects = getProjects();
 
@@ -102,7 +87,7 @@ class ConfigService {
     return this.config;
   }
 
-  /** Get the DB file path (replaces getConfigPath for YAML) */
+  /** Get the DB file path */
   getConfigPath(): string {
     return getDbFilePath();
   }
@@ -184,84 +169,6 @@ class ConfigService {
       stmt.run(p.path, p.name, p.color ?? null, i);
     }
   }
-
-  private migrateYamlIfNeeded(): void {
-    const yamlPaths = [
-      resolve(getPpmDir(), "config.yaml"),
-      resolve(getPpmDir(), "config.dev.yaml"),
-    ];
-    for (const yamlPath of yamlPaths) {
-      if (!existsSync(yamlPath)) continue;
-      const existing = getAllConfig();
-      if (Object.keys(existing).length > 0) return;
-      this.importFromYaml(yamlPath);
-      try {
-        renameSync(yamlPath, yamlPath + ".bak");
-        console.log(`[config] Migrated ${yamlPath} → SQLite (backup: .bak)`);
-      } catch {}
-    }
-    this.migrateSessionMapIfNeeded();
-    this.migratePushSubsIfNeeded();
-  }
-
-  private importFromYaml(path: string): void {
-    try {
-      const yaml = require("js-yaml");
-      const raw = readFileSync(path, "utf-8");
-      const parsed = yaml.load(raw) as Partial<PpmConfig> | null;
-      if (!parsed) return;
-      const merged = { ...structuredClone(DEFAULT_CONFIG), ...parsed };
-      for (const key of CONFIG_TABLE_KEYS) {
-        const value = (merged as any)[key];
-        if (value !== undefined) {
-          setConfigValue(String(key), JSON.stringify(value));
-        }
-      }
-      if (merged.projects?.length) {
-        this.syncProjectsToDb(merged.projects);
-      }
-    } catch (err) {
-      console.error(`[config] Error importing YAML ${path}:`, (err as Error).message);
-    }
-  }
-
-  private migrateSessionMapIfNeeded(): void {
-    const mapPath = resolve(getPpmDir(), "session-map.json");
-    if (!existsSync(mapPath)) return;
-    try {
-      const { setSessionMetadata } = require("./db.service.ts");
-      const map = JSON.parse(readFileSync(mapPath, "utf-8")) as Record<string, string>;
-      for (const [_ppmId, sdkId] of Object.entries(map)) {
-        // Use SDK ID as canonical session ID (ppmId is legacy)
-        setSessionMetadata(sdkId);
-      }
-      renameSync(mapPath, mapPath + ".bak");
-      console.log("[config] Migrated session-map.json → SQLite");
-    } catch {}
-  }
-
-  private migratePushSubsIfNeeded(): void {
-    const subsPath = resolve(getPpmDir(), "push-subscriptions.json");
-    if (!existsSync(subsPath)) return;
-    try {
-      const { upsertPushSubscription } = require("./db.service.ts");
-      const subs = JSON.parse(readFileSync(subsPath, "utf-8")) as Array<{
-        endpoint: string;
-        keys: { p256dh: string; auth: string };
-        expirationTime?: number | null;
-      }>;
-      for (const sub of subs) {
-        upsertPushSubscription(
-          sub.endpoint,
-          sub.keys.p256dh,
-          sub.keys.auth,
-          sub.expirationTime != null ? String(sub.expirationTime) : null,
-        );
-      }
-      renameSync(subsPath, subsPath + ".bak");
-      console.log("[config] Migrated push-subscriptions.json → SQLite");
-    } catch {}
-  }
 }
 
 /** Singleton config service */

package/src/services/git.service.ts

@@ -122,6 +122,40 @@ class GitService {
     return files;
   }
 
+  /**
+   * Returns full file contents for both sides of a diff (VSCode-style).
+   * - original: file at HEAD (empty if new/untracked/ref missing)
+   * - modified: working tree content (empty if deleted on disk)
+   * Monaco DiffEditor will compute/render the diff from these full contents.
+   */
+  async fileFullDiff(
+    projectPath: string,
+    filePath: string,
+    ref: string = "HEAD",
+  ): Promise<{ original: string; modified: string }> {
+    const git = this.git(projectPath);
+    const absPath = path.resolve(projectPath, filePath);
+
+    let original = "";
+    try {
+      original = await git.show([`${ref}:${filePath}`]);
+    } catch {
+      // File does not exist at ref (new/untracked/added) → empty original
+      original = "";
+    }
+
+    let modified = "";
+    try {
+      const f = Bun.file(absPath);
+      if (await f.exists()) modified = await f.text();
+    } catch {
+      // File missing on disk (deleted) → empty modified
+      modified = "";
+    }
+
+    return { original, modified };
+  }
+
   async fileDiff(
     projectPath: string,
     filePath: string,

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/ppmbot/cli-reference-default.ts

@@ -13,7 +13,7 @@ ppm start
   Start the PPM server (background by default)
   -p, --port <port> — Port to listen on
   -s, --share — (deprecated) Tunnel is now always enabled
-  -c, --config <path> — Path to config file (YAML import into DB)
+  --profile <name> — DB profile name (e.g. 'dev' → ppm.dev.db)
 
 ppm stop
   Stop the PPM server (supervisor stays alive)
@@ -25,7 +25,6 @@ ppm down
 
 ppm restart
   Restart the server (keeps tunnel alive)
-  -c, --config <path> — Path to config file
   --force — Force resume from paused state
 
 ppm status
@@ -35,7 +34,6 @@ ppm status
 
 ppm open
   Open PPM in browser
-  -c, --config <path> — Path to config file
 
 ppm logs
   View PPM daemon logs
@@ -203,7 +201,6 @@ ppm autostart enable
   Register PPM to start automatically on boot
   -p, --port <port> — Override port
   -s, --share — (deprecated) Tunnel is now always enabled
-  -c, --config <path> — Config file path
   --profile <name> — DB profile name
 
 ppm autostart disable

package/src/services/supervisor.ts

@@ -2,7 +2,7 @@
  * Supervisor process — long-lived parent that manages server child + tunnel child.
  * Respawns children on crash with exponential backoff.
  * Health-checks server (/api/health) and tunnel URL (public probe).
- * Entry: __supervise__ <port> <host> [config] [profile] [--share]
+ * Entry: __supervise__ <port> <host> [profile] [--share]
  */
 import type { Subprocess } from "bun";
 import { resolve } from "node:path";
@@ -782,7 +782,6 @@ export function shutdown() {
 export async function runSupervisor(opts: {
   port: number;
   host: string;
-  config?: string;
   profile?: string;
   share: boolean;
 }) {
@@ -822,7 +821,7 @@ export async function runSupervisor(opts: {
   // Build __serve__ args
   const serverArgs = [
     "__serve__", String(opts.port), opts.host,
-    opts.config ?? "", opts.profile ?? "",
+    opts.profile ?? "",
   ];
   // Strip trailing empty args
   while (serverArgs.length > 0 && serverArgs[serverArgs.length - 1] === "") serverArgs.pop();
@@ -950,8 +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 config = process.argv[idx + 3] && process.argv[idx + 3] !== "_" ? process.argv[idx + 3] : undefined;
-  const profile = process.argv[idx + 4] && process.argv[idx + 4] !== "_" ? process.argv[idx + 4] : 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)
@@ -960,5 +959,5 @@ if (process.argv.includes("__supervise__")) {
     setDbProfile(profile);
   }
 
-  runSupervisor({ port, host, config, profile, share });
+  runSupervisor({ port, host, profile, share });
 }

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

@@ -5,6 +5,10 @@ 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 } from "./pre-compact-button";
+const PreCompactSection = lazy(() =>
+  import("./pre-compact-section").then((m) => ({ default: m.PreCompactSection }))
+);
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
@@ -310,11 +314,11 @@ 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(() => {
+  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]);
 
   const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
@@ -399,6 +403,23 @@ 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 */}
+      {jsonlPath && (
+        <Suspense fallback={<div className="mt-2 animate-pulse h-10 bg-surface/50 rounded" />}>
+          <PreCompactSection
+            jsonlPath={jsonlPath}
+            projectName={projectName}
+            renderMessage={(msg, idx) => (
+              <MessageBubble
+                key={msg.id ?? `pc-${idx}`}
+                message={msg}
+                isStreaming={false}
+                projectName={projectName}
+              />
+            )}
+          />
+        </Suspense>
+      )}
       {/* Fork/Rewind button — only for real user messages */}
       {!isSystemContext && onFork && (
         <button
@@ -788,9 +809,27 @@ 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 && (
+                <Suspense fallback={<div className="mt-2 animate-pulse h-10 bg-surface/50 rounded" />}>
+                  <PreCompactSection
+                    jsonlPath={jsonlPath}
+                    projectName={projectName}
+                    renderMessage={(msg, idx) => (
+                      <MessageBubble
+                        key={msg.id ?? `pc-${idx}`}
+                        message={msg}
+                        isStreaming={false}
+                        projectName={projectName}
+                        bashPartialOutput={bashPartialOutput}
+                      />
+                    )}
+                  />
+                </Suspense>
+              )}
             </div>
           );
         }

package/src/web/components/chat/pre-compact-button.tsx

@@ -0,0 +1,50 @@
+import { AlertCircle, ChevronUp, History, Loader2 } from "lucide-react";
+
+/** Detects a JSONL transcript path in Claude's compact summary message text. */
+const JSONL_PATH_RE = /read the full transcript at:\s*(\S+\.jsonl)/i;
+
+export function extractJsonlPath(text: string): string | null {
+  const match = text.match(JSONL_PATH_RE);
+  return match?.[1]?.trim() ?? null;
+}
+
+export type PreCompactStatus = "idle" | "loading" | "loaded" | "error";
+
+interface PreCompactButtonProps {
+  status: PreCompactStatus;
+  onLoad?: () => void;
+  count?: number;
+}
+
+/**
+ * Button shown when Claude's compact summary is detected.
+ * Clicking triggers the pre-compact-messages fetch. Shows loading/loaded/error states.
+ * Responsive: full-width on mobile, inline on desktop. Min 44px touch target.
+ */
+export function PreCompactButton({ status, onLoad, count }: PreCompactButtonProps) {
+  const isBusy = status === "loading";
+  const isLoaded = status === "loaded";
+  const isError = status === "error";
+
+  const label = isBusy
+    ? "Loading previous conversation..."
+    : isLoaded
+      ? `Previous conversation loaded${count != null ? ` (${count})` : ""}`
+      : isError
+        ? "Failed to load — retry"
+        : "Load previous conversation";
+
+  const Icon = isBusy ? Loader2 : isLoaded ? ChevronUp : isError ? AlertCircle : History;
+
+  return (
+    <button
+      type="button"
+      onClick={onLoad}
+      disabled={isBusy || isLoaded}
+      className="mt-2 inline-flex items-center justify-center gap-2 rounded-md border border-border bg-surface/50 px-4 py-2.5 text-sm text-text-primary hover:bg-surface transition-colors disabled:opacity-70 disabled:cursor-default w-full md:w-auto min-h-[44px]"
+    >
+      <Icon className={`size-4 shrink-0 ${isBusy ? "animate-spin" : ""} ${isError ? "text-red-400" : ""}`} />
+      <span>{label}</span>
+    </button>
+  );
+}

package/src/web/components/chat/pre-compact-section.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useState } from "react";
+import { ChevronDown, ChevronRight, History } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { ChatMessage } from "../../../types/chat";
+import { PreCompactButton, type PreCompactStatus } from "./pre-compact-button";
+
+interface PreCompactSectionProps {
+  jsonlPath: string;
+  projectName?: string;
+  /** Renders each loaded pre-compact message. Passed from parent to avoid circular imports. */
+  renderMessage: (msg: ChatMessage, idx: number) => React.ReactNode;
+}
+
+/**
+ * Orchestrates the "Load previous conversation" flow:
+ * 1. Shows button when idle/loading/error
+ * 2. On click: GET /api/project/:name/chat/pre-compact-messages?jsonlPath=...
+ * 3. Renders returned messages in a collapsible section
+ */
+export function PreCompactSection({ jsonlPath, projectName, renderMessage }: PreCompactSectionProps) {
+  const [status, setStatus] = useState<PreCompactStatus>("idle");
+  const [messages, setMessages] = useState<ChatMessage[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  const handleLoad = useCallback(async () => {
+    if (!projectName) { setError("No project context available"); setStatus("error"); return; }
+    setStatus("loading");
+    setError(null);
+    try {
+      const path = `${projectUrl(projectName)}/chat/pre-compact-messages?jsonlPath=${encodeURIComponent(jsonlPath)}`;
+      const data = await api.get<ChatMessage[]>(path);
+      setMessages(data);
+      setStatus("loaded");
+      setExpanded(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Unknown error");
+      setStatus("error");
+    }
+  }, [jsonlPath, projectName]);
+
+  if (status !== "loaded" || !messages) {
+    return (
+      <div className="mt-2 flex flex-col gap-1">
+        <PreCompactButton status={status} onLoad={status === "loading" ? undefined : handleLoad} />
+        {error && <p className="text-xs text-red-400">{error}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 rounded-lg border border-border/50 bg-surface/30 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-text-secondary hover:bg-surface/50 transition-colors min-h-[44px]"
+      >
+        {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+        <History className="size-4" />
+        <span>Previous conversation ({messages.length} messages)</span>
+      </button>
+      {expanded && (
+        <div className="border-t border-border/30 px-2 md:px-3 py-3 space-y-3 max-h-[60vh] overflow-y-auto">
+          {messages.map((msg, idx) => renderMessage(msg, idx))}
+        </div>
+      )}
+    </div>
+  );
+}