claude-code-inspector 0.1.0

package/components/JsonModal.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useState } from 'react';
+
+// 语法高亮颜色
+const colors = {
+  key: 'text-purple-400',
+  string: 'text-green-400',
+  number: 'text-yellow-400',
+  boolean: 'text-blue-400',
+  null: 'text-gray-500',
+  bracket: 'text-white',
+};
+
+interface JsonNodeProps {
+  keyName?: string;
+  value: any;
+  depth: number;
+  defaultExpanded?: boolean;
+  maxDepth?: number;
+}
+
+function JsonNode({ keyName, value, depth, defaultExpanded = false, maxDepth = 3 }: JsonNodeProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded || depth < maxDepth);
+
+  const isExpandable = value !== null && (Array.isArray(value) || typeof value === 'object');
+  const isEmpty = isExpandable && (
+    (Array.isArray(value) && value.length === 0) ||
+    (typeof value === 'object' && Object.keys(value).length === 0)
+  );
+
+  if (!isExpandable || isEmpty) {
+    return (
+      <div className="flex items-start">
+        {keyName !== undefined && (
+          <span className={`${colors.key} mr-2`}>{`"${keyName}":`}</span>
+        )}
+        <span className={getValueColor(value)}>
+          {isEmpty ? (Array.isArray(value) ? '[]' : '{}') : formatSimpleValue(value)}
+        </span>
+      </div>
+    );
+  }
+
+  const entries = Array.isArray(value)
+    ? value.map((v, i) => [i, v] as [number, any])
+    : Object.entries(value);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-gray-500 hover:text-white mr-1 w-4 text-center select-none"
+        >
+          {expanded ? '▼' : '▶'}
+        </button>
+        {keyName !== undefined && (
+          <span className={`${colors.key} mr-2`}>{`"${keyName}":`}</span>
+        )}
+        <span className={colors.bracket}>
+          {expanded ? (Array.isArray(value) ? '[' : '{') : `${Array.isArray(value) ? '[' : '{'}${entries.length}${Array.isArray(value) ? ']' : '}'}`}
+        </span>
+      </div>
+
+      {expanded && (
+        <>
+          <div className="ml-4 border-l border-gray-700 pl-2">
+            {entries.map(([k, v], idx) => (
+              <JsonNode
+                key={idx}
+                keyName={typeof k === 'string' ? k : undefined}
+                value={v}
+                depth={depth + 1}
+                maxDepth={maxDepth}
+              />
+            ))}
+          </div>
+          <span className={colors.bracket}>{Array.isArray(value) ? ']' : '}'}</span>
+        </>
+      )}
+    </div>
+  );
+}
+
+function getValueColor(value: any): string {
+  if (value === null) return colors.null;
+  if (typeof value === 'boolean') return colors.boolean;
+  if (typeof value === 'number') return colors.number;
+  if (typeof value === 'string') return colors.string;
+  return '';
+}
+
+function formatSimpleValue(value: any): string {
+  if (value === null) return 'null';
+  if (typeof value === 'string') return `"${value}"`;
+  return String(value);
+}
+
+interface JsonModalProps {
+  data: any;
+  onClose: () => void;
+  allowClickAway?: boolean; // 是否允许点击背景关闭，默认 false（防止 WebSocket 更新时意外关闭）
+}
+
+const JsonModal = React.memo<JsonModalProps>(function JsonModal({ data, onClose, allowClickAway = false }) {
+  const handleBackgroundClick = () => {
+    if (allowClickAway) {
+      onClose();
+    }
+    // 如果 allowClickAway 为 false，点击背景不执行任何操作
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
+      onClick={handleBackgroundClick}
+    >
+      <div
+        className="bg-gray-900 rounded-lg w-full max-w-6xl max-h-[90vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 头部 */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h3 className="text-lg font-semibold">JSON Viewer</h3>
+          <div className="flex gap-2">
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+              }}
+              className="px-3 py-1 text-sm bg-gray-700 hover:bg-gray-600 rounded"
+            >
+              复制
+            </button>
+            <button
+              onClick={onClose}
+              className="px-3 py-1 text-sm bg-gray-700 hover:bg-gray-600 rounded"
+            >
+              关闭
+            </button>
+          </div>
+        </div>
+
+        {/* 内容 */}
+        <div className="flex-1 overflow-auto p-4">
+          <div className="font-mono text-sm">
+            <JsonNode value={data} depth={0} maxDepth={10} defaultExpanded={true} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default JsonModal;

package/components/JsonViewer.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState } from 'react';
+
+interface JsonViewerProps {
+  data: any;
+  maxHeight?: string;
+  onExpand?: (data: any) => void;
+}
+
+// 语法高亮颜色
+const colors = {
+  key: 'text-purple-400',
+  string: 'text-green-400',
+  number: 'text-yellow-400',
+  boolean: 'text-blue-400',
+  null: 'text-gray-500',
+  bracket: 'text-white',
+};
+
+// 格式化 JSON 并添加语法高亮
+function highlightJson(value: any, indent: number = 0): string {
+  if (value === null) {
+    return `<span class="${colors.null}">null</span>`;
+  }
+
+  if (typeof value === 'boolean') {
+    return `<span class="${colors.boolean}">${value}</span>`;
+  }
+
+  if (typeof value === 'number') {
+    return `<span class="${colors.number}">${value}</span>`;
+  }
+
+  if (typeof value === 'string') {
+    const escaped = value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+    return `<span class="${colors.string}">"${escaped}"</span>`;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return `<span class="${colors.bracket}">[]</span>`;
+    return `<span class="${colors.bracket}">[...]</span>`;
+  }
+
+  if (typeof value === 'object') {
+    const keys = Object.keys(value);
+    if (keys.length === 0) return `<span class="${colors.bracket}">{}</span>`;
+    return `<span class="${colors.bracket}">{...}</span>`;
+  }
+
+  return String(value);
+}
+
+interface JsonNodeProps {
+  keyName?: string;
+  value: any;
+  depth: number;
+  defaultExpanded?: boolean;
+  maxDepth?: number;
+}
+
+function JsonNode({ keyName, value, depth, defaultExpanded = false, maxDepth = 3 }: JsonNodeProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded || depth < maxDepth);
+
+  const isExpandable = value !== null && (Array.isArray(value) || typeof value === 'object');
+  const isEmpty = isExpandable && (
+    (Array.isArray(value) && value.length === 0) ||
+    (typeof value === 'object' && Object.keys(value).length === 0)
+  );
+
+  // 简单值或空对象/数组
+  if (!isExpandable || isEmpty) {
+    return (
+      <div className="flex items-start">
+        {keyName !== undefined && (
+          <span className={`${colors.key} mr-2`}>{`"${keyName}":`}</span>
+        )}
+        <span className={getValueColor(value)}>
+          {isEmpty ? (Array.isArray(value) ? '[]' : '{}') : formatSimpleValue(value)}
+        </span>
+      </div>
+    );
+  }
+
+  const entries = Array.isArray(value)
+    ? value.map((v, i) => [i, v] as [number, any])
+    : Object.entries(value);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-gray-500 hover:text-white mr-1 w-4 text-center select-none"
+        >
+          {expanded ? '▼' : '▶'}
+        </button>
+        {keyName !== undefined && (
+          <span className={`${colors.key} mr-2`}>{`"${keyName}":`}</span>
+        )}
+        <span className={colors.bracket}>
+          {expanded ? (Array.isArray(value) ? '[' : '{') : `${Array.isArray(value) ? '[' : '{'}${entries.length}${Array.isArray(value) ? ']' : '}'}`}
+        </span>
+      </div>
+
+      {expanded && (
+        <>
+          <div className="ml-4 border-l border-gray-700 pl-2">
+            {entries.map(([k, v], idx) => (
+              <JsonNode
+                key={idx}
+                keyName={typeof k === 'string' ? k : undefined}
+                value={v}
+                depth={depth + 1}
+                maxDepth={maxDepth}
+              />
+            ))}
+          </div>
+          <span className={colors.bracket}>{Array.isArray(value) ? ']' : '}'}</span>
+        </>
+      )}
+    </div>
+  );
+}
+
+function getValueColor(value: any): string {
+  if (value === null) return colors.null;
+  if (typeof value === 'boolean') return colors.boolean;
+  if (typeof value === 'number') return colors.number;
+  if (typeof value === 'string') return colors.string;
+  return '';
+}
+
+function formatSimpleValue(value: any): string {
+  if (value === null) return 'null';
+  if (typeof value === 'string') return `"${value}"`;
+  return String(value);
+}
+
+export default function JsonViewer({ data, maxHeight = '400px', onExpand }: JsonViewerProps) {
+  if (data === null || data === undefined) {
+    return <div className="text-gray-500 text-sm">No data</div>;
+  }
+
+  return (
+    <div className="relative">
+      {/* 展开/复制按钮 */}
+      <div className="absolute top-2 right-2 flex gap-1 z-10">
+        {onExpand && (
+          <button
+            onClick={() => onExpand(data)}
+            className="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded text-gray-300"
+            title="放大查看"
+          >
+            ⛶
+          </button>
+        )}
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+          }}
+          className="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded text-gray-300"
+          title="复制"
+        >
+          📋
+        </button>
+      </div>
+
+      {/* JSON 内容 */}
+      <div
+        className="bg-gray-800 rounded p-3 font-mono text-xs overflow-auto"
+        style={{ maxHeight }}
+      >
+        <JsonNode value={data} depth={0} />
+      </div>
+    </div>
+  );
+}
+
+// 导出 JsonNode 供外部使用
+export { JsonNode };

package/dev.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# 快速开发脚本 - 使用生产构建避免自动刷新
+
+echo "=== 构建生产版本 ==="
+npm run build
+
+if [ $? -ne 0 ]; then
+  echo "构建失败!"
+  exit 1
+fi
+
+echo ""
+echo "=== 启动生产服务器 ==="
+echo "访问 http://localhost:3000/dashboard"
+echo "按 Ctrl+C 停止服务器"
+echo ""
+
+NODE_ENV=production npm start

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/lib/env.ts

@@ -0,0 +1,52 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+
+/**
+ * 从 Claude Code 配置文件中加载环境变量
+ */
+export function loadClaudeEnv(): Record<string, string> {
+  const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
+  try {
+    if (fs.existsSync(settingsPath)) {
+      const content = fs.readFileSync(settingsPath, 'utf-8');
+      const settings = JSON.parse(content);
+      if (settings.env) {
+        console.log('=== Loaded from Claude Code settings ===');
+        return settings.env;
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load Claude settings:', error);
+  }
+  return {};
+}
+
+/**
+ * 初始化环境变量：合并 Claude Code 配置和系统环境变量
+ * Claude Code 配置优先于系统环境变量
+ */
+export function initEnv() {
+  const claudeSettings = loadClaudeEnv();
+
+  // 直接用 Claude Code 配置覆盖系统环境变量
+  for (const key of Object.keys(claudeSettings)) {
+    if (claudeSettings[key]) {
+      process.env[key] = claudeSettings[key];
+    }
+  }
+
+  // 如果 UPSTREAM_BASE_URL 未在 Claude Code 中设置，但 ANTHROPIC_BASE_URL 设置了
+  // 则将 ANTHROPIC_BASE_URL 的值复制给 UPSTREAM_BASE_URL
+  if (!process.env.UPSTREAM_BASE_URL && process.env.ANTHROPIC_BASE_URL) {
+    process.env.UPSTREAM_BASE_URL = process.env.ANTHROPIC_BASE_URL;
+  }
+
+  // 如果 UPSTREAM_API_KEY 未设置，但 ANTHROPIC_API_KEY 设置了
+  // 则复制 ANTHROPIC_API_KEY
+  if (!process.env.UPSTREAM_API_KEY && process.env.ANTHROPIC_API_KEY) {
+    process.env.UPSTREAM_API_KEY = process.env.ANTHROPIC_API_KEY;
+  }
+
+  return process.env as Record<string, string>;
+}

package/lib/pricing.ts

@@ -0,0 +1,131 @@
+/**
+ * Anthropic API 定价 (每 1M tokens)
+ * 参考：https://www.anthropic.com/pricing
+ */
+export interface ModelPricing {
+  input: number; // 每 1M input tokens 的价格 (USD)
+  output: number; // 每 1M output tokens 的价格 (USD)
+  cacheRead?: number; // 每 1M cache read tokens 的价格 (USD)
+  cacheCreation?: number; // 每 1M cache creation tokens 的价格 (USD)
+}
+
+export const ANTHROPIC_PRICING: Record<string, ModelPricing> = {
+  // Claude 3.7 Sonnet
+  'claude-sonnet-4-20250514': {
+    input: 3.0,
+    output: 15.0,
+    cacheRead: 0.3,
+    cacheCreation: 3.75,
+  },
+  'claude-sonnet-4-6': {
+    input: 3.0,
+    output: 15.0,
+    cacheRead: 0.3,
+    cacheCreation: 3.75,
+  },
+  'claude-3-7-sonnet-20250219': {
+    input: 3.0,
+    output: 15.0,
+    cacheRead: 0.3,
+    cacheCreation: 3.75,
+  },
+  // Claude 3.5 Sonnet
+  'claude-3-5-sonnet-20241022': {
+    input: 3.0,
+    output: 15.0,
+    cacheRead: 0.3,
+    cacheCreation: 3.75,
+  },
+  'claude-3-5-sonnet-20240620': {
+    input: 3.0,
+    output: 15.0,
+    cacheRead: 0.3,
+    cacheCreation: 3.75,
+  },
+  // Claude 3.5 Haiku
+  'claude-3-5-haiku-20241022': {
+    input: 1.0,
+    output: 5.0,
+    cacheRead: 0.1,
+    cacheCreation: 1.25,
+  },
+  // Claude 3 Opus
+  'claude-3-opus-20240229': {
+    input: 15.0,
+    output: 75.0,
+    cacheRead: 1.5,
+    cacheCreation: 18.75,
+  },
+  // Claude 3 Haiku
+  'claude-3-haiku-20240307': {
+    input: 0.25,
+    output: 1.25,
+    cacheRead: 0.025,
+    cacheCreation: 0.3125,
+  },
+};
+
+/**
+ * 默认定价 (如果使用未知模型)
+ */
+const DEFAULT_PRICING: ModelPricing = {
+  input: 3.0,
+  output: 15.0,
+  cacheRead: 0.3,
+  cacheCreation: 3.75,
+};
+
+/**
+ * 根据模型名称获取定价
+ */
+export function getModelPricing(model: string): ModelPricing {
+  // 尝试精确匹配
+  if (ANTHROPIC_PRICING[model]) {
+    return ANTHROPIC_PRICING[model];
+  }
+
+  // 尝试模糊匹配
+  for (const [key, pricing] of Object.entries(ANTHROPIC_PRICING)) {
+    if (model.includes(key) || key.includes(model)) {
+      return pricing;
+    }
+  }
+
+  // 返回默认定价
+  return DEFAULT_PRICING;
+}
+
+/**
+ * 计算请求成本 (USD)
+ */
+export function calculateCost(
+  model: string,
+  inputTokens: number,
+  outputTokens: number,
+  cacheReadTokens: number = 0,
+  cacheCreationTokens: number = 0
+): number {
+  const pricing = getModelPricing(model);
+
+  const inputCost = (inputTokens / 1_000_000) * pricing.input;
+  const outputCost = (outputTokens / 1_000_000) * pricing.output;
+  const cacheReadCost = (cacheReadTokens / 1_000_000) * (pricing.cacheRead || 0);
+  const cacheCreationCost = (cacheCreationTokens / 1_000_000) * (pricing.cacheCreation || 0);
+
+  return inputCost + outputCost + cacheReadCost + cacheCreationCost;
+}
+
+/**
+ * 格式化成本为美元字符串
+ */
+export function formatCost(cost: number): string {
+  if (cost < 0.0001) {
+    return `$${cost.toFixed(6)}`;
+  } else if (cost < 0.01) {
+    return `$${cost.toFixed(5)}`;
+  } else if (cost < 1) {
+    return `$${cost.toFixed(4)}`;
+  } else {
+    return `$${cost.toFixed(2)}`;
+  }
+}