@cookielab.io/klovi 0.12.0 → 0.13.0

package/dist/public/{index-0wfcphj9.css → index-zwpjgh70.css}

@@ -61,11 +61,11 @@ code {
   --bg-system: #fff8c5;
   --bg-tool: #eaeef2;
   --bg-thinking: #eef6ee;
-  --bg-code: #24292f;
+  --bg-code: #fafafa;
   --text-primary: #1f2328;
   --text-secondary: #59636e;
   --text-muted: #57606a;
-  --text-code: #e0e0e0;
+  --text-code: #383a42;
   --text-inverse: #fff;
   --accent: #1a7f37;
   --accent-hover: #218c3a;
@@ -100,11 +100,11 @@ code {
   --bg-system: #1a1610;
   --bg-tool: #161b22;
   --bg-thinking: #11151a;
-  --bg-code: #080b10;
+  --bg-code: #282c34;
   --text-primary: #c9d1d9;
   --text-secondary: #8b949e;
   --text-muted: #848d97;
-  --text-code: #c9d1d9;
+  --text-code: #abb2bf;
   --text-inverse: #0d1117;
   --accent: #3fb950;
   --accent-hover: #56d364;
@@ -460,6 +460,142 @@ code {
   font-size: .85rem;
 }
 
+.message-parse-error {
+  background: var(--bg-primary);
+  border: 1px solid var(--error);
+  border-left: 4px solid var(--error);
+  font-size: .85rem;
+}
+
+.message-parse-error .message-role {
+  color: var(--error);
+}
+
+.parse-error-line {
+  color: var(--text-secondary);
+  margin-left: 8px;
+  font-size: .8em;
+  font-weight: normal;
+}
+
+.parse-error-type {
+  display: inline-block;
+  color: var(--error);
+  margin-bottom: 4px;
+  font-size: .8em;
+  font-weight: 600;
+}
+
+.parse-error-details {
+  color: var(--text-secondary);
+  font-size: .85em;
+  font-family: var(--font-mono, monospace);
+  margin-bottom: 4px;
+}
+
+.parse-error-raw {
+  margin-top: 8px;
+}
+
+.parse-error-raw summary {
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+  font-size: .8em;
+}
+
+.parse-error-raw pre {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin-top: 4px;
+  padding: 8px;
+  font-size: .8em;
+}
+
+.error-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--error);
+  border-left: 4px solid var(--error);
+  border-radius: var(--radius-md);
+  margin: 8px 0;
+  padding: 12px 16px;
+  font-size: .85rem;
+}
+
+.error-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items:  center;
+  gap: 8px;
+}
+
+.error-card-title {
+  color: var(--error);
+  font-weight: 600;
+}
+
+.error-card-details {
+  margin-top: 8px;
+}
+
+.error-card-details summary {
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+  font-size: .8em;
+}
+
+.error-card-details pre {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin-top: 4px;
+  padding: 8px;
+  font-size: .8em;
+}
+
+.error-view {
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items:  center;
+  padding: 40px;
+}
+
+.error-view-title {
+  color: var(--error);
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.error-view-message {
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+  font-size: .9rem;
+}
+
+.fetch-error {
+  display: flex;
+  color: var(--text-secondary);
+  flex-direction: column;
+  justify-content: center;
+  align-items:  center;
+  gap: 12px;
+  padding: 40px;
+  font-size: .9rem;
+}
+
+.fetch-error-message {
+  color: var(--error);
+}
+
 .status-notice {
   text-align: center;
   color: var(--text-muted);
@@ -630,6 +766,32 @@ code {
   padding: 12px 16px;
 }
 
+.diff-view-wrapper {
+  position: relative;
+}
+
+.diff-view-header {
+  display: flex;
+  background: var(--bg-code);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  color: var(--text-muted);
+  align-items:  center;
+  padding: 6px 12px;
+  font-family: SF Mono, Fira Code, Menlo, monospace;
+  font-size: .75rem;
+}
+
+.diff-view-content {
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  overflow-x: auto;
+}
+
+.diff-view-content pre {
+  background: var(--bg-code);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  margin: 0;
+}
+
 .collapsible {
   border-radius: var(--radius-sm);
   margin: 4px 0;
@@ -699,6 +861,13 @@ code {
   color: var(--error);
 }
 
+.tool-call-truncated {
+  color: var(--text-muted);
+  padding: 4px 0;
+  font-size: .75rem;
+  font-style: italic;
+}
+
 .tool-call-summary {
   color: var(--text-muted);
   font-family: SF Mono, Fira Code, Menlo, monospace;

package/dist/public/index.html

@@ -9,7 +9,7 @@
     <link rel="apple-touch-icon" href="./apple-touch-icon-st4rb42e.png" />
     
     
-  <link rel="stylesheet" crossorigin href="./index-0wfcphj9.css"><script type="module" crossorigin src="./index-73xxsc87.js"></script></head>
+  <link rel="stylesheet" crossorigin href="./index-zwpjgh70.css"><script type="module" crossorigin src="./index-42y46a3t.js"></script></head>
   <body>
     <div id="root"></div>
     

package/dist/server.js

@@ -4,7 +4,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // index.ts
 import { existsSync as existsSync2 } from "node:fs";
-import { dirname, join as join5 } from "node:path";
+import { dirname, join as join4 } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // src/server/cli.ts
@@ -27,6 +27,9 @@ function setClaudeCodeDir(dir) {
 function getProjectsDir() {
   return join(claudeCodeDir, "projects");
 }
+function getStatsCachePath() {
+  return join(claudeCodeDir, "stats-cache.json");
+}
 
 // src/server/parser/command-message.ts
 function cleanCommandMessage(text) {
@@ -35,6 +38,9 @@ function cleanCommandMessage(text) {
   const argsMatch = text.match(/<command-args>([\s\S]*?)<\/command-args>/);
   if (argsMatch?.[1])
     return argsMatch[1].trim();
+  const nameMatch = text.match(/<command-name>([\s\S]*?)<\/command-name>/);
+  if (nameMatch?.[1])
+    return nameMatch[1].trim();
   return text.replace(/<command-message>[\s\S]*?<\/command-message>/g, "").replace(/<command-name>[\s\S]*?<\/command-name>/g, "").trim();
 }
 function parseCommandMessage(text) {
@@ -242,10 +248,10 @@ async function handleSearchSessions() {
 // src/server/parser/session.ts
 import { join as join3 } from "node:path";
 async function parseSession(sessionId, encodedPath) {
-  const rawLines = await readJsonlLines(join3(getProjectsDir(), encodedPath, `${sessionId}.jsonl`));
+  const { rawLines, parseErrors } = await readJsonlLines(join3(getProjectsDir(), encodedPath, `${sessionId}.jsonl`));
   const subAgentMap = extractSubAgentMap(rawLines);
   const slug = extractSlug(rawLines);
-  const turns = buildTurns(rawLines);
+  const turns = buildTurns(rawLines, parseErrors);
   for (const turn of turns) {
     if (turn.kind !== "assistant")
       continue;
@@ -269,14 +275,14 @@ async function parseSession(sessionId, encodedPath) {
 }
 async function parseSubAgentSession(sessionId, encodedPath, agentId) {
   const filePath = join3(getProjectsDir(), encodedPath, sessionId, "subagents", `agent-${agentId}.jsonl`);
-  let rawLines;
+  let parsed;
   try {
-    rawLines = await readJsonlLines(filePath);
+    parsed = await readJsonlLines(filePath);
   } catch {
     return { sessionId, project: encodedPath, turns: [] };
   }
-  const subAgentMap = extractSubAgentMap(rawLines);
-  const turns = buildTurns(rawLines);
+  const subAgentMap = extractSubAgentMap(parsed.rawLines);
+  const turns = buildTurns(parsed.rawLines, parsed.parseErrors);
   for (const turn of turns) {
     if (turn.kind !== "assistant")
       continue;
@@ -353,14 +359,29 @@ function findImplSessionId(slug, sessions, currentSessionId) {
 async function readJsonlLines(filePath) {
   const { readFile: readFile2 } = await import("node:fs/promises");
   const text = await readFile2(filePath, "utf-8");
-  return text.split(`
-`).filter((l) => l.trim()).map((l) => {
+  const lines = text.split(`
+`);
+  const rawLines = [];
+  const parseErrors = [];
+  for (let i = 0;i < lines.length; i++) {
+    const line = lines[i];
+    if (!line.trim())
+      continue;
     try {
-      return JSON.parse(l);
-    } catch {
-      return null;
+      rawLines.push(JSON.parse(line));
+    } catch (err) {
+      parseErrors.push({
+        kind: "parse_error",
+        uuid: `parse-error-line-${i + 1}`,
+        timestamp: rawLines[rawLines.length - 1]?.timestamp ?? "",
+        lineNumber: i + 1,
+        rawLine: line.length > 500 ? `${line.slice(0, 500)}… (truncated)` : line,
+        errorType: "json_parse",
+        errorDetails: err instanceof Error ? err.message : undefined
+      });
     }
-  }).filter((l) => l !== null);
+  }
+  return { rawLines, parseErrors };
 }
 function isDisplayableLine(l) {
   if (l.type === "progress")
@@ -500,9 +521,21 @@ function handleUserLine(line, currentAssistant, turns) {
     turns.push(result);
   return flushed;
 }
-function handleAssistantLine(line, currentAssistant, toolResults) {
-  if (!line.message || !Array.isArray(line.message.content))
+function handleAssistantLine(line, currentAssistant, toolResults, structureErrors) {
+  if (!line.message)
     return currentAssistant;
+  if (!Array.isArray(line.message.content)) {
+    structureErrors.push({
+      kind: "parse_error",
+      uuid: `parse-error-${line.uuid || "unknown"}`,
+      timestamp: line.timestamp || "",
+      lineNumber: 0,
+      rawLine: JSON.stringify(line.message.content).slice(0, 500),
+      errorType: "invalid_structure",
+      errorDetails: `Assistant message content is ${typeof line.message.content}, expected array`
+    });
+    return currentAssistant;
+  }
   const current = currentAssistant ?? createAssistantTurn(line);
   processAssistantLine(line, current, toolResults);
   return current;
@@ -520,21 +553,26 @@ function handleSystemLine(line, currentAssistant, turns) {
   });
   return null;
 }
-function buildTurns(lines) {
+function buildTurns(lines, parseErrors = []) {
   const displayable = lines.filter(isDisplayableLine);
   const toolResults = collectToolResults(displayable);
   const turns = [];
   let currentAssistant = null;
+  const structureErrors = [];
   for (const line of displayable) {
     if (line.type === "user") {
       currentAssistant = handleUserLine(line, currentAssistant, turns);
     } else if (line.type === "assistant") {
-      currentAssistant = handleAssistantLine(line, currentAssistant, toolResults);
+      currentAssistant = handleAssistantLine(line, currentAssistant, toolResults, structureErrors);
     } else if (line.type === "system") {
       currentAssistant = handleSystemLine(line, currentAssistant, turns);
     }
   }
   flushAssistant(currentAssistant, turns);
+  const allErrors = [...parseErrors, ...structureErrors];
+  if (allErrors.length > 0) {
+    turns.push(...allErrors);
+  }
   return turns;
 }
 function extractToolResult(tr) {
@@ -578,11 +616,82 @@ async function handleSessions(encodedPath) {
 
 // src/server/parser/stats.ts
 import { readdir as readdir2, readFile as readFile2 } from "node:fs/promises";
-import { join as join4 } from "node:path";
+async function loadStatsCache() {
+  try {
+    const text = await readFile2(getStatsCachePath(), "utf-8");
+    const data = JSON.parse(text);
+    if (data.version !== 2)
+      return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+async function countProjects() {
+  try {
+    const entries = await readdir2(getProjectsDir(), { withFileTypes: true });
+    return entries.filter((e) => e.isDirectory()).length;
+  } catch {
+    return 0;
+  }
+}
+function todayDateString() {
+  const d = new Date;
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function isWithinLastWeek(dateStr) {
+  const now = new Date;
+  const weekAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7);
+  const weekAgoStr = `${weekAgo.getFullYear()}-${String(weekAgo.getMonth() + 1).padStart(2, "0")}-${String(weekAgo.getDate()).padStart(2, "0")}`;
+  return dateStr >= weekAgoStr;
+}
+function buildFromCache(cache, projects) {
+  const today = todayDateString();
+  const todayEntry = cache.dailyActivity.find((d) => d.date === today);
+  const thisWeekEntries = cache.dailyActivity.filter((d) => isWithinLastWeek(d.date));
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let cacheReadTokens = 0;
+  let cacheCreationTokens = 0;
+  const models = {};
+  for (const [model, usage] of Object.entries(cache.modelUsage)) {
+    inputTokens += usage.inputTokens;
+    outputTokens += usage.outputTokens;
+    cacheReadTokens += usage.cacheReadInputTokens;
+    cacheCreationTokens += usage.cacheCreationInputTokens;
+    models[model] = {
+      inputTokens: usage.inputTokens,
+      outputTokens: usage.outputTokens,
+      cacheReadTokens: usage.cacheReadInputTokens,
+      cacheCreationTokens: usage.cacheCreationInputTokens
+    };
+  }
+  const toolCalls = cache.dailyActivity.reduce((sum, d) => sum + d.toolCallCount, 0);
+  return {
+    projects,
+    sessions: cache.totalSessions,
+    messages: cache.totalMessages,
+    todaySessions: todayEntry?.sessionCount ?? 0,
+    thisWeekSessions: thisWeekEntries.reduce((sum, d) => sum + d.sessionCount, 0),
+    inputTokens,
+    outputTokens,
+    cacheReadTokens,
+    cacheCreationTokens,
+    toolCalls,
+    models
+  };
+}
 async function scanStats() {
-  const stats = {
-    projects: 0,
+  const [cache, projects] = await Promise.all([loadStatsCache(), countProjects()]);
+  if (cache) {
+    return buildFromCache(cache, projects);
+  }
+  return {
+    projects,
     sessions: 0,
+    messages: 0,
+    todaySessions: 0,
+    thisWeekSessions: 0,
     inputTokens: 0,
     outputTokens: 0,
     cacheReadTokens: 0,
@@ -590,84 +699,11 @@ async function scanStats() {
     toolCalls: 0,
     models: {}
   };
-  const projectsDir = getProjectsDir();
-  let entries;
-  try {
-    entries = await readdir2(projectsDir, { withFileTypes: true });
-  } catch {
-    return stats;
-  }
-  for (const entry of entries) {
-    if (!entry.isDirectory())
-      continue;
-    const projectDir = join4(projectsDir, entry.name);
-    let files;
-    try {
-      files = (await readdir2(projectDir)).filter((f) => f.endsWith(".jsonl"));
-    } catch {
-      continue;
-    }
-    if (files.length === 0)
-      continue;
-    stats.projects++;
-    stats.sessions += files.length;
-    for (const file of files) {
-      await scanFile(join4(projectDir, file), stats);
-    }
-  }
-  return stats;
-}
-function processAssistantLine2(msg, stats) {
-  const usage = msg.usage;
-  if (usage) {
-    stats.inputTokens += usage.input_tokens ?? 0;
-    stats.outputTokens += usage.output_tokens ?? 0;
-    stats.cacheReadTokens += usage.cache_read_input_tokens ?? 0;
-    stats.cacheCreationTokens += usage.cache_creation_input_tokens ?? 0;
-  }
-  const model = msg.model;
-  if (model) {
-    stats.models[model] = (stats.models[model] ?? 0) + 1;
-  }
-  const content = msg.content;
-  if (Array.isArray(content)) {
-    for (const block of content) {
-      if (block.type === "tool_use") {
-        stats.toolCalls++;
-      }
-    }
-  }
-}
-async function scanFile(filePath, stats) {
-  let text;
-  try {
-    text = await readFile2(filePath, "utf-8");
-  } catch {
-    return;
-  }
-  for (const line of text.split(`
-`)) {
-    if (!line.trim())
-      continue;
-    try {
-      const obj = JSON.parse(line);
-      if (obj.type === "assistant" && obj.message) {
-        processAssistantLine2(obj.message, stats);
-      }
-    } catch {}
-  }
 }
 
 // src/server/api/stats.ts
-var CACHE_TTL = 300000;
-var cache = null;
 async function handleStats() {
-  const now = Date.now();
-  if (cache && now - cache.timestamp < CACHE_TTL) {
-    return Response.json({ stats: cache.data });
-  }
   const stats = await scanStats();
-  cache = { data: stats, timestamp: now };
   return Response.json({ stats });
 }
 
@@ -683,8 +719,8 @@ async function handleSubAgent(sessionId, agentId, encodedPath) {
 
 // src/server/version.ts
 var appVersion = {
-  version: "0.12.0",
-  commitHash: "f436d2f"
+  version: "0.13.0",
+  commitHash: "df6e758"
 };
 
 // src/server/api/version.ts
@@ -970,6 +1006,6 @@ if (!acceptRisks) {
   promptSecurityWarning(port);
 }
 var __dirname2 = dirname(fileURLToPath(import.meta.url));
-var staticDir = existsSync2(join5(__dirname2, "public", "index.html")) ? join5(__dirname2, "public") : join5(__dirname2, "dist", "public");
+var staticDir = existsSync2(join4(__dirname2, "public", "index.html")) ? join4(__dirname2, "public") : join4(__dirname2, "dist", "public");
 startServer(port, createRoutes(), staticDir);
 printStartupBanner(port);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cookielab.io/klovi",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A local web app for browsing and presenting Claude Code session history",
   "module": "index.ts",
   "type": "module",
@@ -50,8 +50,7 @@
     "check:fix": "bunx biome check --write ."
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.14",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@biomejs/biome": "2.4.2",
     "@testing-library/react": "^16.3.2",
     "@types/bun": "^1.3.8",
     "@types/react": "^19.2.13",