ccviz 0.1.0

package/dist/chunk-KVXQKWK4.js

@@ -0,0 +1,521 @@
+// src/server/index.ts
+import express from "express";
+import path6 from "path";
+import { fileURLToPath } from "url";
+
+// src/server/api/projects.ts
+import { Router } from "express";
+import fs from "fs/promises";
+import path from "path";
+function createProjectsRouter(claudeDir) {
+  const router = Router();
+  router.get("/", async (_req, res) => {
+    try {
+      const projectsDir = path.join(claudeDir, "projects");
+      const entries = await fs.readdir(projectsDir, { withFileTypes: true });
+      const folders = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+      const projects = await Promise.all(
+        folders.map(async (encoded) => {
+          const decoded = decodePath(encoded);
+          const projectDir = path.join(projectsDir, encoded);
+          const files = await fs.readdir(projectDir);
+          const conversationCount = files.filter(
+            (f) => f.endsWith(".jsonl")
+          ).length;
+          return { encoded, decoded, conversationCount };
+        })
+      );
+      const tree = buildTree(projects);
+      res.json(tree);
+    } catch (err) {
+      res.status(500).json({ error: "Failed to read projects directory" });
+    }
+  });
+  return router;
+}
+function decodePath(encoded) {
+  return "/" + encoded.slice(1).replace(/-/g, "/");
+}
+function buildTree(projects) {
+  const root = { name: "", children: [] };
+  for (const project of projects) {
+    const parts = project.decoded.split("/").filter(Boolean);
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      let child = current.children.find((c) => c.name === part);
+      if (!child) {
+        child = { name: part, children: [] };
+        current.children.push(child);
+      }
+      if (i === parts.length - 1) {
+        child.fullPath = project.decoded;
+        child.encoded = project.encoded;
+        child.conversationCount = project.conversationCount;
+      }
+      current = child;
+    }
+  }
+  return root.children;
+}
+
+// src/server/api/conversations.ts
+import { Router as Router2 } from "express";
+import fs2 from "fs/promises";
+import path2 from "path";
+import { createReadStream } from "fs";
+import readline from "readline";
+function createConversationsRouter(claudeDir) {
+  const router = Router2();
+  router.get("/:encodedPath/conversations", async (req, res) => {
+    try {
+      const projectDir = path2.join(
+        claudeDir,
+        "projects",
+        req.params.encodedPath
+      );
+      const files = await fs2.readdir(projectDir);
+      const jsonlFiles = files.filter((f) => f.endsWith(".jsonl"));
+      const conversations = await Promise.all(
+        jsonlFiles.map(async (file) => {
+          const filePath = path2.join(projectDir, file);
+          const sessionId = file.replace(".jsonl", "");
+          const stat = await fs2.stat(filePath);
+          const summary = await quickScan(filePath);
+          return {
+            sessionId,
+            filePath,
+            sizeBytes: stat.size,
+            lastModified: stat.mtime.toISOString(),
+            ...summary
+          };
+        })
+      );
+      conversations.sort(
+        (a, b) => new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
+      );
+      res.json(conversations);
+    } catch (err) {
+      res.status(500).json({ error: "Failed to list conversations" });
+    }
+  });
+  return router;
+}
+async function quickScan(filePath) {
+  const summary = {
+    title: null,
+    agentName: null,
+    model: null,
+    startedAt: null,
+    lastTimestamp: null,
+    lineCount: 0
+  };
+  const stream = createReadStream(filePath, { encoding: "utf-8" });
+  const rl = readline.createInterface({ input: stream, crlfDelay: Infinity });
+  for await (const line of rl) {
+    summary.lineCount++;
+    if (!line.trim()) continue;
+    try {
+      const msg = JSON.parse(line);
+      if (!summary.startedAt && msg.timestamp) {
+        summary.startedAt = msg.timestamp;
+      }
+      if (msg.timestamp) {
+        summary.lastTimestamp = msg.timestamp;
+      }
+      if (msg.type === "custom-title" && msg.title) {
+        summary.title = msg.title;
+      }
+      if (msg.type === "agent-name" && msg.agentName) {
+        summary.agentName = msg.agentName;
+      }
+      if (!summary.model && msg.type === "assistant" && msg.message?.model) {
+        summary.model = msg.message.model;
+      }
+    } catch {
+    }
+  }
+  return summary;
+}
+
+// src/server/api/conversation.ts
+import { Router as Router3 } from "express";
+import path5 from "path";
+import fs4 from "fs/promises";
+
+// src/server/parser/index.ts
+import { createReadStream as createReadStream2 } from "fs";
+import readline2 from "readline";
+import path4 from "path";
+
+// src/server/parser/subagents.ts
+import fs3 from "fs/promises";
+import path3 from "path";
+async function parseSubagents(sessionDir) {
+  const subagentsDir = path3.join(sessionDir, "subagents");
+  try {
+    await fs3.access(subagentsDir);
+  } catch {
+    return [];
+  }
+  const files = await fs3.readdir(subagentsDir);
+  const agentFiles = files.filter(
+    (f) => f.startsWith("agent-") && f.endsWith(".jsonl")
+  );
+  const subagents = [];
+  for (const file of agentFiles) {
+    const agentId = file.replace(/^agent-/, "").replace(/\.jsonl$/, "");
+    const jsonlPath = path3.join(subagentsDir, file);
+    const metaPath = path3.join(subagentsDir, `agent-${agentId}.meta.json`);
+    let agentType = "unknown";
+    let description = "";
+    try {
+      const metaContent = await fs3.readFile(metaPath, "utf-8");
+      const meta = JSON.parse(metaContent);
+      agentType = meta.agentType ?? "unknown";
+      description = meta.description ?? "";
+    } catch {
+    }
+    const parsed = await parseConversation(jsonlPath, agentId);
+    subagents.push({
+      id: agentId,
+      agentType,
+      description,
+      turns: parsed.turns,
+      toolCalls: parsed.toolCalls,
+      tokenTimeline: parsed.tokenTimeline,
+      totals: {
+        inputTokens: parsed.totals.inputTokens,
+        outputTokens: parsed.totals.outputTokens,
+        toolCalls: parsed.totals.toolCalls,
+        turnCount: parsed.totals.turnCount
+      }
+    });
+  }
+  return subagents;
+}
+
+// src/server/parser/index.ts
+async function parseConversation(filePath, sessionId) {
+  const stream = createReadStream2(filePath, { encoding: "utf-8" });
+  const rl = readline2.createInterface({ input: stream, crlfDelay: Infinity });
+  let title = null;
+  let agentName = null;
+  let model = "";
+  let gitBranch = "";
+  let version = "";
+  let startedAt = "";
+  const turns = [];
+  const toolCalls = [];
+  const tokenTimeline = [];
+  const subagents = [];
+  const pendingToolCalls = /* @__PURE__ */ new Map();
+  let currentUserMsg = null;
+  let currentAssistantMsg = null;
+  let turnIndex = 0;
+  let turnDurationMs = null;
+  let cumInput = 0;
+  let cumOutput = 0;
+  for await (const line of rl) {
+    if (!line.trim()) continue;
+    let msg;
+    try {
+      msg = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (!startedAt && msg.timestamp) {
+      startedAt = msg.timestamp;
+    }
+    switch (msg.type) {
+      case "custom-title":
+        title = msg.title ?? title;
+        break;
+      case "agent-name":
+        agentName = msg.agentName ?? agentName;
+        break;
+      case "summary": {
+        break;
+      }
+      case "user": {
+        if (currentAssistantMsg) {
+          finalizeTurn();
+        }
+        currentUserMsg = msg;
+        if (msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === "tool_result" && block.tool_use_id) {
+              const pending = pendingToolCalls.get(block.tool_use_id);
+              if (pending) {
+                const resultContent = typeof block.content === "string" ? block.content : Array.isArray(block.content) ? block.content.map((c) => c.text ?? JSON.stringify(c)).join("\n") : JSON.stringify(block.content);
+                pending.result = {
+                  content: resultContent,
+                  sizeBytes: new TextEncoder().encode(resultContent).length,
+                  persistedPath: null
+                };
+                pending.endTimestamp = msg.timestamp;
+                if (pending.startTimestamp && msg.timestamp) {
+                  pending.durationMs = new Date(msg.timestamp).getTime() - new Date(pending.startTimestamp).getTime();
+                }
+                if (msg.mcpMeta) {
+                  pending.isMcp = true;
+                }
+                const completed = pending;
+                toolCalls.push(completed);
+                pendingToolCalls.delete(block.tool_use_id);
+              }
+            }
+          }
+        }
+        if (msg.toolUseResult) {
+          const pending = pendingToolCalls.get(msg.toolUseResult.toolUseId);
+          if (pending) {
+            pending.result = {
+              content: msg.toolUseResult.content ?? "[persisted to disk]",
+              sizeBytes: msg.toolUseResult.sizeBytes ?? 0,
+              persistedPath: msg.toolUseResult.path ?? null
+            };
+            pending.endTimestamp = msg.timestamp;
+            if (pending.startTimestamp && msg.timestamp) {
+              pending.durationMs = new Date(msg.timestamp).getTime() - new Date(pending.startTimestamp).getTime();
+            }
+            const completed = pending;
+            toolCalls.push(completed);
+            pendingToolCalls.delete(msg.toolUseResult.toolUseId);
+          }
+        }
+        break;
+      }
+      case "assistant": {
+        currentAssistantMsg = msg;
+        if (msg.message?.model && !model) {
+          model = msg.message.model;
+        }
+        const usage = msg.message?.usage;
+        if (usage) {
+          const inputTokens = usage.input_tokens ?? 0;
+          const outputTokens = usage.output_tokens ?? 0;
+          const cacheCreation = usage.cache_creation_input_tokens ?? 0;
+          const cacheRead = usage.cache_read_input_tokens ?? 0;
+          cumInput += inputTokens;
+          cumOutput += outputTokens;
+          tokenTimeline.push({
+            turnIndex,
+            timestamp: msg.timestamp,
+            inputTokens,
+            outputTokens,
+            cacheCreationTokens: cacheCreation,
+            cacheReadTokens: cacheRead,
+            cumulativeInputTokens: cumInput,
+            cumulativeOutputTokens: cumOutput
+          });
+        }
+        if (msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === "tool_use") {
+              const toolName = block.name ?? "unknown";
+              const isMcp = toolName.startsWith("mcp__");
+              let mcpServer = null;
+              if (isMcp) {
+                const parts = toolName.split("__");
+                mcpServer = parts[1] ?? null;
+              }
+              pendingToolCalls.set(block.id, {
+                id: block.id,
+                name: toolName,
+                input: block.input ?? {},
+                startTimestamp: msg.timestamp,
+                turnIndex,
+                isMcp,
+                mcpServer
+              });
+            }
+          }
+        }
+        break;
+      }
+      case "system": {
+        if (msg.subtype === "turn_duration" && msg.durationMs != null) {
+          turnDurationMs = msg.durationMs;
+        }
+        if (msg.version) {
+          version = msg.version;
+        }
+        if (msg.gitBranch) {
+          gitBranch = msg.gitBranch;
+        }
+        break;
+      }
+    }
+  }
+  if (currentAssistantMsg) {
+    finalizeTurn();
+  }
+  function finalizeTurn() {
+    if (!currentAssistantMsg) return;
+    const userContent = extractTextContent(currentUserMsg?.message?.content);
+    const userToolResults = extractToolResults(currentUserMsg?.message?.content);
+    const assistantContent = extractTextContent(
+      currentAssistantMsg.message?.content
+    );
+    const assistantToolCalls = extractToolCallRefs(
+      currentAssistantMsg.message?.content
+    );
+    const usage = currentAssistantMsg.message?.usage ?? {};
+    turns.push({
+      index: turnIndex,
+      userMessage: {
+        timestamp: currentUserMsg?.timestamp ?? "",
+        content: userContent,
+        toolResults: userToolResults
+      },
+      assistantMessage: {
+        timestamp: currentAssistantMsg.timestamp ?? "",
+        content: assistantContent,
+        toolCalls: assistantToolCalls,
+        usage: {
+          inputTokens: usage.input_tokens ?? 0,
+          outputTokens: usage.output_tokens ?? 0,
+          cacheCreationTokens: usage.cache_creation_input_tokens ?? 0,
+          cacheReadTokens: usage.cache_read_input_tokens ?? 0
+        }
+      },
+      durationMs: turnDurationMs
+    });
+    turnIndex++;
+    turnDurationMs = null;
+    currentUserMsg = null;
+    currentAssistantMsg = null;
+  }
+  const sessionDir = path4.join(
+    path4.dirname(filePath),
+    path4.basename(filePath, ".jsonl")
+  );
+  const parsedSubagents = await parseSubagents(sessionDir);
+  subagents.push(...parsedSubagents);
+  const totalDuration = startedAt && tokenTimeline.length > 0 ? new Date(tokenTimeline[tokenTimeline.length - 1].timestamp).getTime() - new Date(startedAt).getTime() : null;
+  const result = {
+    id: sessionId,
+    title,
+    agentName,
+    startedAt,
+    model,
+    gitBranch,
+    version,
+    turns,
+    toolCalls,
+    tokenTimeline,
+    subagents,
+    totals: {
+      inputTokens: cumInput,
+      outputTokens: cumOutput,
+      cacheCreationTokens: tokenTimeline.reduce(
+        (s, t) => s + t.cacheCreationTokens,
+        0
+      ),
+      cacheReadTokens: tokenTimeline.reduce(
+        (s, t) => s + t.cacheReadTokens,
+        0
+      ),
+      toolCalls: toolCalls.length,
+      durationMs: totalDuration,
+      turnCount: turns.length
+    }
+  };
+  return result;
+}
+function extractTextContent(content) {
+  if (!content) return "";
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content.filter((b) => b.type === "text").map((b) => b.text).join("\n");
+}
+function extractToolResults(content) {
+  if (!content || !Array.isArray(content)) return [];
+  return content.filter((b) => b.type === "tool_result").map((b) => ({
+    toolUseId: b.tool_use_id,
+    content: typeof b.content === "string" ? b.content : JSON.stringify(b.content)
+  }));
+}
+function extractToolCallRefs(content) {
+  if (!content || !Array.isArray(content)) return [];
+  return content.filter((b) => b.type === "tool_use").map((b) => ({
+    id: b.id,
+    name: b.name
+  }));
+}
+
+// src/server/api/conversation.ts
+function createConversationRouter(claudeDir) {
+  const router = Router3();
+  const cache = /* @__PURE__ */ new Map();
+  const MAX_CACHE = 20;
+  router.get("/:projectPath/:sessionId", async (req, res) => {
+    try {
+      const filePath = path5.join(
+        claudeDir,
+        "projects",
+        req.params.projectPath,
+        `${req.params.sessionId}.jsonl`
+      );
+      const stat = await fs4.stat(filePath);
+      const cacheKey = filePath;
+      const cached = cache.get(cacheKey);
+      if (cached && cached.mtime === stat.mtimeMs) {
+        res.json(cached.data);
+        return;
+      }
+      const parsed = await parseConversation(filePath, req.params.sessionId);
+      if (cache.size >= MAX_CACHE) {
+        const oldest = cache.keys().next().value;
+        cache.delete(oldest);
+      }
+      cache.set(cacheKey, { mtime: stat.mtimeMs, data: parsed });
+      res.json(parsed);
+    } catch (err) {
+      res.status(500).json({ error: "Failed to parse conversation" });
+    }
+  });
+  router.get(
+    "/:projectPath/:sessionId/tool-result/:toolUseId",
+    async (req, res) => {
+      try {
+        const resultPath = path5.join(
+          claudeDir,
+          "projects",
+          req.params.projectPath,
+          req.params.sessionId,
+          "tool-results",
+          `${req.params.toolUseId}.txt`
+        );
+        const content = await fs4.readFile(resultPath, "utf-8");
+        res.type("text/plain").send(content);
+      } catch {
+        res.status(404).json({ error: "Tool result not found" });
+      }
+    }
+  );
+  return router;
+}
+
+// src/server/index.ts
+var __dirname = path6.dirname(fileURLToPath(import.meta.url));
+function createServer({ claudeDir, isDev }) {
+  const app = express();
+  app.use("/api/projects", createProjectsRouter(claudeDir));
+  app.use("/api/projects", createConversationsRouter(claudeDir));
+  app.use("/api/conversations", createConversationRouter(claudeDir));
+  if (!isDev) {
+    const uiDir = path6.join(__dirname, "ui");
+    app.use(express.static(uiDir));
+    app.get("/{*splat}", (_req, res) => {
+      res.sendFile(path6.join(uiDir, "index.html"));
+    });
+  }
+  return app;
+}
+
+export {
+  parseConversation,
+  createServer
+};

package/dist/cli.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+import {
+  createServer,
+  parseConversation
+} from "./chunk-KVXQKWK4.js";
+
+// src/cli.ts
+import { Command } from "commander";
+import open from "open";
+import path from "path";
+import fs from "fs/promises";
+var program = new Command();
+program.name("ccviz").description("Visualize Claude Code conversations").version("0.1.0").option("-p, --port <number>", "server port", "3333").option(
+  "-d, --claude-dir <path>",
+  "path to .claude directory",
+  `${process.env.HOME}/.claude`
+).option("--no-open", "don't open browser automatically").option("--dev", "development mode (proxy to Vite dev server)").option("--json <path>", "output parsed conversation as JSON (no server)").option(
+  "--conversation <project/session>",
+  "open directly to a specific conversation"
+).action(async (opts) => {
+  const claudeDir = opts.claudeDir;
+  if (opts.json) {
+    const jsonlPath = path.resolve(opts.json);
+    const sessionId = path.basename(jsonlPath, ".jsonl");
+    try {
+      await fs.access(jsonlPath);
+    } catch {
+      console.error(`File not found: ${jsonlPath}`);
+      process.exit(1);
+    }
+    const parsed = await parseConversation(jsonlPath, sessionId);
+    console.log(JSON.stringify(parsed, null, 2));
+    return;
+  }
+  const port = parseInt(opts.port, 10);
+  const isDev = opts.dev ?? false;
+  const app = createServer({ claudeDir, isDev });
+  app.listen(port, () => {
+    let url = `http://localhost:${port}`;
+    if (opts.conversation) {
+      url += `/conversation/${opts.conversation}`;
+    }
+    console.log(`ccviz running at ${url}`);
+    if (opts.open) {
+      open(url);
+    }
+  });
+});
+program.parse();

package/dist/server/index.js

@@ -0,0 +1,6 @@
+import {
+  createServer
+} from "../chunk-KVXQKWK4.js";
+export {
+  createServer
+};