@kimuson/claude-code-viewer 0.4.3 → 0.4.5

package/README.md

@@ -63,6 +63,40 @@ claude-code-viewer
 
 The server will start on port 3400 (or your specified PORT). Open `http://localhost:3400` in your browser to access the interface.
 
+### Docker Deployment
+
+Build the image locally:
+
+```bash
+docker build -t claude-code-viewer .
+```
+
+Run the container directly:
+
+```bash
+docker run --rm -p 3400:3400 \
+  -e ANTHROPIC_BASE_URL=... \
+  -e ANTHROPIC_API_KEY=... \
+  -e ANTHROPIC_AUTH_TOKEN=... \
+  claude-code-viewer
+```
+
+Alternatively, use the provided Compose configuration:
+
+```bash
+docker compose up --build
+```
+
+> Note: `docker-compose.yml` ships without mounting `claude_home` by default. If you need the container to reuse an existing Claude workspace, map a volume to `/root/.claude`, for example:
+>
+> ```yaml
+> services:
+>   app:
+>     volumes:
+>       - /path/to/claude_home:/root/.claude
+> ```
+
+
 ## Data Source
 
 The application reads Claude Code conversation logs from:
@@ -110,6 +144,11 @@ Settings can be configured from the sidebar in Claude Code Viewer.
 | Notifications | None | Enables sound notifications when running session processes complete. Choose from multiple notification sounds with test playback functionality. |
 | Language | System | Interface language selection. Supports English and Japanese with automatic system detection. |
 
+## Internationalization (i18n)
+
+Claude Code Viewer currently supports **English** and **Japanese**. Adding new languages is straightforward—simply add a new `messages.json` file for your locale (see [src/i18n/locales/](./src/i18n/locales/) for examples).
+
+However, we haven't added other languages yet because we're uncertain about demand. **If you'd like support for your language, please open an issue**—we'll add it quickly!
 
 ## Alternatives & Differentiation
 

package/dist/main.js

@@ -1181,13 +1181,64 @@ import { Context as Context17, Effect as Effect20, Layer as Layer18 } from "effe
 
 // src/server/core/platform/services/UserConfigService.ts
 import { Context as Context11, Effect as Effect13, Layer as Layer12, Ref as Ref5 } from "effect";
+
+// src/lib/i18n/localeDetection.ts
+var DEFAULT_LOCALE = "en";
+var normalizeTag = (tag) => {
+  if (!tag) {
+    return void 0;
+  }
+  const normalized = tag.trim().toLowerCase().replaceAll("_", "-");
+  if (normalized.length === 0 || normalized === "*") {
+    return void 0;
+  }
+  if (normalized.startsWith("zh")) {
+    return "zh_CN";
+  }
+  if (normalized.startsWith("ja") || normalized.startsWith("jp")) {
+    return "ja";
+  }
+  if (normalized.startsWith("en")) {
+    return "en";
+  }
+  return void 0;
+};
+var detectLocaleFromAcceptLanguage = (header) => {
+  if (!header) {
+    return void 0;
+  }
+  const preferences = header.split(",").map((part, index) => {
+    const [rawTag, ...params] = part.trim().split(";");
+    const qParam = params.map((param) => param.trim()).find((param) => param.startsWith("q="));
+    const quality = qParam ? Number.parseFloat(qParam.slice(2)) : 1;
+    return {
+      tag: rawTag,
+      quality: Number.isNaN(quality) ? 1 : quality,
+      index
+    };
+  }).filter((item) => Boolean(item.tag)).sort((a, b) => {
+    if (b.quality !== a.quality) {
+      return b.quality - a.quality;
+    }
+    return a.index - b.index;
+  });
+  for (const preference of preferences) {
+    const locale = normalizeTag(preference.tag);
+    if (locale) {
+      return locale;
+    }
+  }
+  return void 0;
+};
+
+// src/server/core/platform/services/UserConfigService.ts
 var LayerImpl10 = Effect13.gen(function* () {
   const configRef = yield* Ref5.make({
     hideNoUserMessageSession: true,
     unifySameTitleSession: false,
     enterKeyBehavior: "shift-enter-send",
     permissionMode: "default",
-    locale: "ja",
+    locale: DEFAULT_LOCALE,
     theme: "system"
   });
   const setUserConfig = (newConfig) => Effect13.gen(function* () {
@@ -1377,6 +1428,97 @@ var VirtualConversationDatabase = class extends Context12.Tag(
 import { FileSystem as FileSystem5 } from "@effect/platform";
 import { Context as Context13, Effect as Effect15, Layer as Layer14, Ref as Ref7 } from "effect";
 
+// src/server/core/session/constants/pricing.ts
+var MODEL_PRICING = {
+  "claude-3.5-sonnet": {
+    input: 3,
+    output: 15,
+    cache_creation: 3.75,
+    cache_read: 0.3
+  },
+  "claude-3-opus": {
+    input: 15,
+    output: 75,
+    cache_creation: 18.75,
+    cache_read: 1.5
+  },
+  "claude-3-haiku": {
+    input: 0.25,
+    output: 1.25,
+    cache_creation: 0.3,
+    cache_read: 0.03
+  },
+  "claude-instant-1.2": {
+    input: 1.63,
+    output: 5.51,
+    cache_creation: 2.0375,
+    // 1.63 * 1.25
+    cache_read: 0.163
+    // 1.63 * 0.1
+  },
+  "claude-2": {
+    input: 8,
+    output: 24,
+    cache_creation: 10,
+    // 8.0 * 1.25
+    cache_read: 0.8
+    // 8.0 * 0.1
+  }
+};
+var DEFAULT_MODEL_PRICING = MODEL_PRICING["claude-3.5-sonnet"];
+
+// src/server/core/session/functions/calculateSessionCost.ts
+function normalizeModelName(modelName) {
+  const normalized = modelName.toLowerCase();
+  if (normalized.includes("sonnet-4") || normalized.includes("3-5-sonnet") || normalized.includes("3.5-sonnet")) {
+    return "claude-3.5-sonnet";
+  }
+  if (normalized.includes("3-opus") || normalized.includes("opus-20")) {
+    return "claude-3-opus";
+  }
+  if (normalized.includes("3-haiku") || normalized.includes("haiku-20")) {
+    return "claude-3-haiku";
+  }
+  if (normalized.includes("instant-1.2") || normalized.includes("instant-1")) {
+    return "claude-instant-1.2";
+  }
+  if (normalized.startsWith("claude-2")) {
+    return "claude-2";
+  }
+  return "claude-3.5-sonnet";
+}
+function getModelPricing(modelName) {
+  const normalized = normalizeModelName(modelName);
+  return MODEL_PRICING[normalized] ?? DEFAULT_MODEL_PRICING;
+}
+function calculateTokenCost(usage, modelName) {
+  const pricing = getModelPricing(modelName);
+  const inputMTok = usage.input_tokens / 1e6;
+  const outputMTok = usage.output_tokens / 1e6;
+  const cacheCreationMTok = (usage.cache_creation_input_tokens ?? 0) / 1e6;
+  const cacheReadMTok = (usage.cache_read_input_tokens ?? 0) / 1e6;
+  const inputTokensUsd = inputMTok * pricing.input;
+  const outputTokensUsd = outputMTok * pricing.output;
+  const cacheCreationUsd = cacheCreationMTok * pricing.cache_creation;
+  const cacheReadUsd = cacheReadMTok * pricing.cache_read;
+  const totalUsd = inputTokensUsd + outputTokensUsd + cacheCreationUsd + cacheReadUsd;
+  return {
+    totalUsd,
+    breakdown: {
+      inputTokensUsd,
+      outputTokensUsd,
+      cacheCreationUsd,
+      cacheReadUsd
+    },
+    tokenUsage: {
+      inputTokens: usage.input_tokens,
+      outputTokens: usage.output_tokens,
+      cacheCreationTokens: usage.cache_creation_input_tokens ?? 0,
+      cacheReadTokens: usage.cache_read_input_tokens ?? 0
+    }
+  };
+}
+
 // src/server/core/session/functions/extractFirstUserText.ts
 var extractFirstUserText = (conversation) => {
   if (conversation.type !== "user") {
@@ -1463,6 +1605,68 @@ var SessionMetaService = class extends Context13.Tag("SessionMetaService")() {
           }
           return firstUserMessage;
         });
+        const aggregateTokenUsageAndCost = (content) => {
+          let totalInputTokens = 0;
+          let totalOutputTokens = 0;
+          let totalCacheCreationTokens = 0;
+          let totalCacheReadTokens = 0;
+          let totalInputTokensUsd = 0;
+          let totalOutputTokensUsd = 0;
+          let totalCacheCreationUsd = 0;
+          let totalCacheReadUsd = 0;
+          let lastModelName = "claude-3.5-sonnet";
+          const conversations = parseJsonl(content);
+          for (const conversation of conversations) {
+            if (conversation.type === "assistant") {
+              const usage = conversation.message.usage;
+              const modelName = conversation.message.model;
+              const messageCost = calculateTokenCost(
+                {
+                  input_tokens: usage.input_tokens,
+                  output_tokens: usage.output_tokens,
+                  cache_creation_input_tokens: usage.cache_creation_input_tokens ?? 0,
+                  cache_read_input_tokens: usage.cache_read_input_tokens ?? 0
+                },
+                modelName
+              );
+              totalInputTokens += usage.input_tokens;
+              totalOutputTokens += usage.output_tokens;
+              totalCacheCreationTokens += usage.cache_creation_input_tokens ?? 0;
+              totalCacheReadTokens += usage.cache_read_input_tokens ?? 0;
+              totalInputTokensUsd += messageCost.breakdown.inputTokensUsd;
+              totalOutputTokensUsd += messageCost.breakdown.outputTokensUsd;
+              totalCacheCreationUsd += messageCost.breakdown.cacheCreationUsd;
+              totalCacheReadUsd += messageCost.breakdown.cacheReadUsd;
+              lastModelName = modelName;
+            }
+          }
+          const totalCost = {
+            totalUsd: totalInputTokensUsd + totalOutputTokensUsd + totalCacheCreationUsd + totalCacheReadUsd,
+            breakdown: {
+              inputTokensUsd: totalInputTokensUsd,
+              outputTokensUsd: totalOutputTokensUsd,
+              cacheCreationUsd: totalCacheCreationUsd,
+              cacheReadUsd: totalCacheReadUsd
+            },
+            tokenUsage: {
+              inputTokens: totalInputTokens,
+              outputTokens: totalOutputTokens,
+              cacheCreationTokens: totalCacheCreationTokens,
+              cacheReadTokens: totalCacheReadTokens
+            }
+          };
+          const aggregatedUsage = {
+            input_tokens: totalInputTokens,
+            output_tokens: totalOutputTokens,
+            cache_creation_input_tokens: totalCacheCreationTokens,
+            cache_read_input_tokens: totalCacheReadTokens
+          };
+          return {
+            totalUsage: aggregatedUsage,
+            totalCost,
+            modelName: lastModelName
+          };
+        };
         const getSessionMeta = (projectId, sessionId) => Effect15.gen(function* () {
           const metaCache = yield* Ref7.get(sessionMetaCacheRef);
           const cached = metaCache.get(sessionId);
@@ -1476,9 +1680,15 @@ var SessionMetaService = class extends Context13.Tag("SessionMetaService")() {
             sessionPath,
             lines
           );
+          const { totalCost } = aggregateTokenUsageAndCost(content);
           const sessionMeta = {
             messageCount: lines.length,
-            firstUserMessage
+            firstUserMessage,
+            cost: {
+              totalUsd: totalCost.totalUsd,
+              breakdown: totalCost.breakdown,
+              tokenUsage: totalCost.tokenUsage
+            }
           };
           yield* Ref7.update(sessionMetaCacheRef, (cache) => {
             cache.set(sessionId, sessionMeta);
@@ -1569,7 +1779,22 @@ var LayerImpl11 = Effect16.gen(function* () {
         jsonlFilePath: `${decodeProjectId(projectId)}/${sessionId}.jsonl`,
         meta: {
           messageCount: 0,
-          firstUserMessage: null
+          firstUserMessage: null,
+          cost: {
+            totalUsd: 0,
+            breakdown: {
+              inputTokensUsd: 0,
+              outputTokensUsd: 0,
+              cacheCreationUsd: 0,
+              cacheReadUsd: 0
+            },
+            tokenUsage: {
+              inputTokens: 0,
+              outputTokens: 0,
+              cacheCreationTokens: 0,
+              cacheReadTokens: 0
+            }
+          }
         },
         conversations: virtualConversation.conversations,
         lastModifiedAt: lastConversation !== void 0 ? new Date(lastConversation.timestamp) : /* @__PURE__ */ new Date()
@@ -1670,7 +1895,22 @@ var LayerImpl11 = Effect16.gen(function* () {
         lastModifiedAt: last !== void 0 ? new Date(last.timestamp) : /* @__PURE__ */ new Date(),
         meta: {
           messageCount: conversations.length,
-          firstUserMessage: firstUserText ? parseUserMessage(firstUserText) : null
+          firstUserMessage: firstUserText ? parseUserMessage(firstUserText) : null,
+          cost: {
+            totalUsd: 0,
+            breakdown: {
+              inputTokensUsd: 0,
+              outputTokensUsd: 0,
+              cacheCreationUsd: 0,
+              cacheReadUsd: 0
+            },
+            tokenUsage: {
+              inputTokens: 0,
+              outputTokens: 0,
+              cacheCreationTokens: 0,
+              cacheReadTokens: 0
+            }
+          }
         }
       };
     }).sort((a, b) => {
@@ -4876,7 +5116,7 @@ import { z as z28 } from "zod";
 // package.json
 var package_default = {
   name: "@kimuson/claude-code-viewer",
-  version: "0.4.2",
+  version: "0.4.4",
   type: "module",
   license: "MIT",
   repository: {
@@ -5127,7 +5367,7 @@ import z27 from "zod";
 
 // src/lib/i18n/schema.ts
 import z26 from "zod";
-var localeSchema = z26.enum(["ja", "en"]);
+var localeSchema = z26.enum(["ja", "en", "zh_CN"]);
 
 // src/server/lib/config/config.ts
 var userConfigSchema = z27.object({
@@ -5169,6 +5409,7 @@ var configMiddleware = createMiddleware(
     const cookie = getCookie(c, "ccv-config");
     const parsed = parseUserConfig(cookie);
     if (cookie === void 0) {
+      const preferredLocale = detectLocaleFromAcceptLanguage(c.req.header("accept-language")) ?? DEFAULT_LOCALE;
       setCookie(
         c,
         "ccv-config",
@@ -5177,7 +5418,7 @@ var configMiddleware = createMiddleware(
           unifySameTitleSession: true,
           enterKeyBehavior: "shift-enter-send",
           permissionMode: "default",
-          locale: "ja",
+          locale: preferredLocale,
           theme: "system"
         })
       );