move to monorepo

packages/cli/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@musistudio/claude-code-router-cli",
+  "version": "1.0.73",
+  "description": "CLI for Claude Code Router",
+  "bin": {
+    "ccr": "dist/cli.js"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-cli.js",
+    "dev": "ts-node src/cli.ts"
+  },
+  "keywords": [
+    "claude",
+    "code",
+    "router",
+    "cli"
+  ],
+  "author": "musistudio",
+  "license": "MIT",
+  "dependencies": {
+    "@musistudio/claude-code-router-shared": "workspace:*",
+    "@inquirer/prompts": "^5.0.0",
+    "@musistudio/claude-code-router-server": "workspace:*",
+    "find-process": "^2.0.0",
+    "minimist": "^1.2.8",
+    "openurl": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.15",
+    "esbuild": "^0.25.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2"
+  }
+}

packages/cli/src/cli.ts

@@ -0,0 +1,340 @@
+#!/usr/bin/env node
+// @ts-ignore - server package is built separately
+import { run } from "@musistudio/claude-code-router-server";
+// @ts-ignore - server package is built separately
+import { parseStatusLineData, type StatusLineInput } from "@musistudio/claude-code-router-server";
+import { showStatus } from "./utils/status";
+import { executeCodeCommand } from "./utils/codeCommand";
+import {
+  cleanupPidFile,
+  isServiceRunning,
+  getServiceInfo,
+} from "./utils/processCheck";
+import { runModelSelector } from "./utils/modelSelector"; // ADD THIS LINE
+import { activateCommand } from "./utils/activateCommand";
+import { version } from "../package.json";
+import { spawn, exec } from "child_process";
+import { PID_FILE, REFERENCE_COUNT_FILE } from "@musistudio/claude-code-router-shared";
+import fs, { existsSync, readFileSync } from "fs";
+import { join } from "path";
+
+const command = process.argv[2];
+
+const HELP_TEXT = `
+Usage: ccr [command]
+
+Commands:
+  start         Start server
+  stop          Stop server
+  restart       Restart server
+  status        Show server status
+  statusline    Integrated statusline
+  code          Execute claude command
+  model         Interactive model selection and configuration
+  activate      Output environment variables for shell integration
+  ui            Open the web UI in browser
+  -v, version   Show version information
+  -h, help      Show help information
+
+Example:
+  ccr start
+  ccr code "Write a Hello World"
+  ccr model
+  eval "$(ccr activate)"  # Set environment variables globally
+  ccr ui
+`;
+
+async function waitForService(
+  timeout = 10000,
+  initialDelay = 1000
+): Promise<boolean> {
+  // Wait for an initial period to let the service initialize
+  await new Promise((resolve) => setTimeout(resolve, initialDelay));
+
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    const isRunning = await isServiceRunning()
+    if (isRunning) {
+      // Wait for an additional short period to ensure service is fully ready
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  return false;
+}
+
+async function main() {
+  const isRunning = await isServiceRunning()
+  switch (command) {
+    case "start":
+      run();
+      break;
+    case "stop":
+      try {
+        const pid = parseInt(readFileSync(PID_FILE, "utf-8"));
+        process.kill(pid);
+        cleanupPidFile();
+        if (existsSync(REFERENCE_COUNT_FILE)) {
+          try {
+            fs.unlinkSync(REFERENCE_COUNT_FILE);
+          } catch (e) {
+            // Ignore cleanup errors
+          }
+        }
+        console.log(
+          "claude code router service has been successfully stopped."
+        );
+      } catch (e) {
+        console.log(
+          "Failed to stop the service. It may have already been stopped."
+        );
+        cleanupPidFile();
+      }
+      break;
+    case "status":
+      await showStatus();
+      break;
+    case "statusline":
+      // 从stdin读取JSON输入
+      let inputData = "";
+      process.stdin.setEncoding("utf-8");
+      process.stdin.on("readable", () => {
+        let chunk;
+        while ((chunk = process.stdin.read()) !== null) {
+          inputData += chunk;
+        }
+      });
+
+      process.stdin.on("end", async () => {
+        try {
+          const input: StatusLineInput = JSON.parse(inputData);
+          const statusLine = await parseStatusLineData(input);
+          console.log(statusLine);
+        } catch (error) {
+          console.error("Error parsing status line data:", error);
+          process.exit(1);
+        }
+      });
+      break;
+    // ADD THIS CASE
+    case "model":
+      await runModelSelector();
+      break;
+    case "activate":
+    case "env":
+      await activateCommand();
+      break;
+    case "code":
+      if (!isRunning) {
+        console.log("Service not running, starting service...");
+        const cliPath = join(__dirname, "cli.js");
+        const startProcess = spawn("node", [cliPath, "start"], {
+          detached: true,
+          stdio: "ignore",
+        });
+
+        // let errorMessage = "";
+        // startProcess.stderr?.on("data", (data) => {
+        //   errorMessage += data.toString();
+        // });
+
+        startProcess.on("error", (error) => {
+          console.error("Failed to start service:", error.message);
+          process.exit(1);
+        });
+
+        // startProcess.on("close", (code) => {
+        //   if (code !== 0 && errorMessage) {
+        //     console.error("Failed to start service:", errorMessage.trim());
+        //     process.exit(1);
+        //   }
+        // });
+
+        startProcess.unref();
+
+        if (await waitForService()) {
+          // Join all code arguments into a single string to preserve spaces within quotes
+          const codeArgs = process.argv.slice(3);
+          executeCodeCommand(codeArgs);
+        } else {
+          console.error(
+            "Service startup timeout, please manually run `ccr start` to start the service"
+          );
+          process.exit(1);
+        }
+      } else {
+        // Join all code arguments into a single string to preserve spaces within quotes
+        const codeArgs = process.argv.slice(3);
+        executeCodeCommand(codeArgs);
+      }
+      break;
+    case "ui":
+      // Check if service is running
+      if (!isRunning) {
+        console.log("Service not running, starting service...");
+        const cliPath = join(__dirname, "cli.js");
+        const startProcess = spawn("node", [cliPath, "start"], {
+          detached: true,
+          stdio: "ignore",
+        });
+
+        startProcess.on("error", (error) => {
+          console.error("Failed to start service:", error.message);
+          process.exit(1);
+        });
+
+        startProcess.unref();
+
+        if (!(await waitForService())) {
+          // If service startup fails, try to start with default config
+          console.log(
+            "Service startup timeout, trying to start with default configuration..."
+          );
+          const {
+            initDir,
+            writeConfigFile,
+            backupConfigFile,
+          } = require("./utils");
+
+          try {
+            // Initialize directories
+            await initDir();
+
+            // Backup existing config file if it exists
+            const backupPath = await backupConfigFile();
+            if (backupPath) {
+              console.log(
+                `Backed up existing configuration file to ${backupPath}`
+              );
+            }
+
+            // Create a minimal default config file
+            await writeConfigFile({
+              PORT: 3456,
+              Providers: [],
+              Router: {},
+            });
+            console.log(
+              "Created minimal default configuration file at ~/.claude-code-router/config.json"
+            );
+            console.log(
+              "Please edit this file with your actual configuration."
+            );
+
+            // Try starting the service again
+            const restartProcess = spawn("node", [cliPath, "start"], {
+              detached: true,
+              stdio: "ignore",
+            });
+
+            restartProcess.on("error", (error) => {
+              console.error(
+                "Failed to start service with default config:",
+                error.message
+              );
+              process.exit(1);
+            });
+
+            restartProcess.unref();
+
+            if (!(await waitForService(15000))) {
+              // Wait a bit longer for the first start
+              console.error(
+                "Service startup still failing. Please manually run `ccr start` to start the service and check the logs."
+              );
+              process.exit(1);
+            }
+          } catch (error: any) {
+            console.error(
+              "Failed to create default configuration:",
+              error.message
+            );
+            process.exit(1);
+          }
+        }
+      }
+
+      // Get service info and open UI
+      const serviceInfo = await getServiceInfo();
+
+      // Add temporary API key as URL parameter if successfully generated
+      const uiUrl = `${serviceInfo.endpoint}/ui/`;
+
+      console.log(`Opening UI at ${uiUrl}`);
+
+      // Open URL in browser based on platform
+      const platform = process.platform;
+      let openCommand = "";
+
+      if (platform === "win32") {
+        // Windows
+        openCommand = `start ${uiUrl}`;
+      } else if (platform === "darwin") {
+        // macOS
+        openCommand = `open ${uiUrl}`;
+      } else if (platform === "linux") {
+        // Linux
+        openCommand = `xdg-open ${uiUrl}`;
+      } else {
+        console.error("Unsupported platform for opening browser");
+        process.exit(1);
+      }
+
+      exec(openCommand, (error) => {
+        if (error) {
+          console.error("Failed to open browser:", error.message);
+          process.exit(1);
+        }
+      });
+      break;
+    case "-v":
+    case "version":
+      console.log(`claude-code-router version: ${version}`);
+      break;
+    case "restart":
+      // Stop the service if it's running
+      try {
+        const pid = parseInt(readFileSync(PID_FILE, "utf-8"));
+        process.kill(pid);
+        cleanupPidFile();
+        if (existsSync(REFERENCE_COUNT_FILE)) {
+          try {
+            fs.unlinkSync(REFERENCE_COUNT_FILE);
+          } catch (e) {
+            // Ignore cleanup errors
+          }
+        }
+        console.log("claude code router service has been stopped.");
+      } catch (e) {
+        console.log("Service was not running or failed to stop.");
+        cleanupPidFile();
+      }
+
+      // Start the service again in the background
+      console.log("Starting claude code router service...");
+      const cliPath = join(__dirname, "cli.js");
+      const startProcess = spawn("node", [cliPath, "start"], {
+        detached: true,
+        stdio: "ignore",
+      });
+
+      startProcess.on("error", (error) => {
+        console.error("Failed to start service:", error);
+        process.exit(1);
+      });
+
+      startProcess.unref();
+      console.log("✅ Service started successfully in the background.");
+      break;
+    case "-h":
+    case "help":
+      console.log(HELP_TEXT);
+      break;
+    default:
+      console.log(HELP_TEXT);
+      process.exit(1);
+  }
+}
+
+main().catch(console.error);

packages/cli/src/types.d.ts

@@ -0,0 +1,82 @@
+declare module 'shell-quote' {
+  export function quote(args: string[]): string;
+  export function parse(cmd: string): string[];
+}
+
+declare module 'minimist' {
+  interface Options {
+    string?: string[];
+    boolean?: string | string[];
+    alias?: Record<string, string | string[]>;
+    default?: Record<string, any>;
+    stopEarly?: boolean;
+    '--'?: boolean;
+    unknown?: (arg: string) => boolean;
+  }
+
+  interface ParsedArgs {
+    _: string[];
+    [key: string]: any;
+  }
+
+  function minimist(args?: string[], opts?: Options): ParsedArgs;
+  export = minimist;
+}
+
+declare module '@inquirer/prompts' {
+  export function select<T>(config: {
+    message: string;
+    choices: Array<{ name: string; value: T; description?: string }>;
+    pageSize?: number;
+  }): Promise<T>;
+  export function input(config: {
+    message: string;
+    default?: string;
+    validate?: (value: string) => boolean | string | Promise<boolean | string>;
+  }): Promise<string>;
+  export function confirm(config: {
+    message: string;
+    default?: boolean;
+  }): Promise<boolean>;
+}
+
+declare module 'find-process' {
+  export default function find(
+    type: 'pid' | 'name' | 'port',
+    value: string | number
+  ): Promise<Array<{ pid: number; name: string; ppid?: number; cmd?: string }>>;
+}
+
+declare module 'json5' {
+  export function parse(text: string): any;
+  export function stringify(value: any, replacer?: any, space?: string | number): string;
+}
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    CI?: string;
+    FORCE_COLOR?: string;
+    NODE_NO_READLINE?: string;
+    TERM?: string;
+    ANTHROPIC_SMALL_FAST_MODEL?: string;
+  }
+}
+
+interface ClaudeSettingsFlag {
+  env: {
+    ANTHROPIC_AUTH_TOKEN?: any;
+    ANTHROPIC_API_KEY: string;
+    ANTHROPIC_BASE_URL: string;
+    NO_PROXY: string;
+    DISABLE_TELEMETRY: string;
+    DISABLE_COST_WARNINGS: string;
+    API_TIMEOUT_MS: string;
+    CLAUDE_CODE_USE_BEDROCK?: undefined;
+    [key: string]: any;
+  };
+  statusLine?: {
+    type: string;
+    command: string;
+    padding: number;
+  };
+}

packages/cli/src/utils/activateCommand.ts

@@ -0,0 +1,19 @@
+import { createEnvVariables } from "./createEnvVariables";
+
+/**
+ * Execute the env command
+ */
+export const activateCommand = async () => {
+  const envVars = await createEnvVariables();
+
+  // Output in shell-friendly format for eval
+  for (const [key, value] of Object.entries(envVars)) {
+    if (value === "") {
+      console.log(`export ${key}=""`);
+    } else if (value === undefined) {
+      console.log(`unset ${key}`);
+    } else {
+      console.log(`export ${key}="${value}"`);
+    }
+  }
+}

packages/cli/src/utils/codeCommand.ts

@@ -0,0 +1,100 @@
+import { spawn, type StdioOptions } from "child_process";
+import { readConfigFile } from ".";
+// @ts-ignore - server package is built separately
+import { closeService } from "@musistudio/claude-code-router-server";
+import {
+  decrementReferenceCount,
+  incrementReferenceCount,
+} from "./processCheck";
+import { quote } from 'shell-quote';
+import minimist from "minimist";
+import { createEnvVariables } from "./createEnvVariables";
+
+
+export async function executeCodeCommand(args: string[] = []) {
+  // Set environment variables using shared function
+  const config = await readConfigFile();
+  const env = await createEnvVariables();
+  const settingsFlag: ClaudeSettingsFlag = {
+    env: env as ClaudeSettingsFlag['env']
+  };
+  if (config?.StatusLine?.enabled) {
+    settingsFlag.statusLine = {
+      type: "command",
+      command: "ccr statusline",
+      padding: 0,
+    }
+  }
+  // args.push('--settings', `${JSON.stringify(settingsFlag)}`);
+
+  // Non-interactive mode for automation environments
+  if (config.NON_INTERACTIVE_MODE) {
+    env.CI = "true";
+    env.FORCE_COLOR = "0";
+    env.NODE_NO_READLINE = "1";
+    env.TERM = "dumb";
+  }
+
+  // Set ANTHROPIC_SMALL_FAST_MODEL if it exists in config
+  if (config?.ANTHROPIC_SMALL_FAST_MODEL) {
+    env.ANTHROPIC_SMALL_FAST_MODEL = config.ANTHROPIC_SMALL_FAST_MODEL;
+  }
+
+  // Increment reference count when command starts
+  incrementReferenceCount();
+
+  // Execute claude command
+  const claudePath = config?.CLAUDE_PATH || process.env.CLAUDE_PATH || "claude";
+
+  const joinedArgs = args.length > 0 ? quote(args) : "";
+
+  const stdioConfig: StdioOptions = config.NON_INTERACTIVE_MODE
+    ? ["pipe", "inherit", "inherit"] // Pipe stdin for non-interactive
+    : "inherit"; // Default inherited behavior
+
+  const argsObj = minimist(args)
+  const argsArr = []
+  for (const [argsObjKey, argsObjValue] of Object.entries(argsObj)) {
+    if (argsObjKey !== '_' && argsObj[argsObjKey]) {
+      const prefix = argsObjKey.length === 1 ? '-' : '--';
+      // For boolean flags, don't append the value
+      if (argsObjValue === true) {
+        argsArr.push(`${prefix}${argsObjKey}`);
+      } else {
+        argsArr.push(`${prefix}${argsObjKey} ${JSON.stringify(argsObjValue)}`);
+      }
+    }
+  }
+  const claudeProcess = spawn(
+    claudePath,
+    argsArr,
+    {
+      env: {
+        ...process.env,
+        ...env
+      },
+      stdio: stdioConfig,
+      shell: true,
+    }
+  );
+
+  // Close stdin for non-interactive mode
+  if (config.NON_INTERACTIVE_MODE) {
+    claudeProcess.stdin?.end();
+  }
+
+  claudeProcess.on("error", (error) => {
+    console.error("Failed to start claude command:", error.message);
+    console.log(
+      "Make sure Claude Code is installed: npm install -g @anthropic-ai/claude-code"
+    );
+    decrementReferenceCount();
+    process.exit(1);
+  });
+
+  claudeProcess.on("close", (code) => {
+    decrementReferenceCount();
+    closeService();
+    process.exit(code || 0);
+  });
+}

packages/cli/src/utils/createEnvVariables.ts

@@ -0,0 +1,23 @@
+import { readConfigFile } from ".";
+
+/**
+ * Get environment variables for Agent SDK/Claude Code integration
+ * This function is shared between `ccr env` and `ccr code` commands
+ */
+export const createEnvVariables = async (): Promise<Record<string, string | undefined>> => {
+  const config = await readConfigFile();
+  const port = config.PORT || 3456;
+  const apiKey = config.APIKEY || "test";
+
+  return {
+    ANTHROPIC_AUTH_TOKEN: apiKey,
+    ANTHROPIC_API_KEY: "",
+    ANTHROPIC_BASE_URL: `http://127.0.0.1:${port}`,
+    NO_PROXY: "127.0.0.1",
+    DISABLE_TELEMETRY: "true",
+    DISABLE_COST_WARNINGS: "true",
+    API_TIMEOUT_MS: String(config.API_TIMEOUT_MS ?? 600000),
+    // Reset CLAUDE_CODE_USE_BEDROCK when running with ccr
+    CLAUDE_CODE_USE_BEDROCK: undefined,
+  };
+}

packages/cli/src/utils/index.ts

@@ -0,0 +1,181 @@
+import fs from "node:fs/promises";
+import readline from "node:readline";
+import JSON5 from "json5";
+import path from "node:path";
+import {
+  CONFIG_FILE,
+  DEFAULT_CONFIG,
+  HOME_DIR,
+  PLUGINS_DIR,
+} from "@musistudio/claude-code-router-shared";
+// @ts-ignore - server package is built separately
+import { cleanupLogFiles } from "@musistudio/claude-code-router-server";
+
+// Function to interpolate environment variables in config values
+const interpolateEnvVars = (obj: any): any => {
+  if (typeof obj === "string") {
+    // Replace $VAR_NAME or ${VAR_NAME} with environment variable values
+    return obj.replace(/\$\{([^}]+)\}|\$([A-Z_][A-Z0-9_]*)/g, (match, braced, unbraced) => {
+      const varName = braced || unbraced;
+      return process.env[varName] || match; // Keep original if env var doesn't exist
+    });
+  } else if (Array.isArray(obj)) {
+    return obj.map(interpolateEnvVars);
+  } else if (obj !== null && typeof obj === "object") {
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = interpolateEnvVars(value);
+    }
+    return result;
+  }
+  return obj;
+};
+
+const ensureDir = async (dir_path: string) => {
+  try {
+    await fs.access(dir_path);
+  } catch {
+    await fs.mkdir(dir_path, { recursive: true });
+  }
+};
+
+export const initDir = async () => {
+  await ensureDir(HOME_DIR);
+  await ensureDir(PLUGINS_DIR);
+  await ensureDir(path.join(HOME_DIR, "logs"));
+};
+
+const createReadline = () => {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+};
+
+const question = (query: string): Promise<string> => {
+  return new Promise((resolve) => {
+    const rl = createReadline();
+    rl.question(query, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+};
+
+const confirm = async (query: string): Promise<boolean> => {
+  const answer = await question(query);
+  return answer.toLowerCase() !== "n";
+};
+
+export const readConfigFile = async () => {
+  try {
+    const config = await fs.readFile(CONFIG_FILE, "utf-8");
+    try {
+      // Try to parse with JSON5 first (which also supports standard JSON)
+      const parsedConfig = JSON5.parse(config);
+      // Interpolate environment variables in the parsed config
+      return interpolateEnvVars(parsedConfig);
+    } catch (parseError) {
+      console.error(`Failed to parse config file at ${CONFIG_FILE}`);
+      console.error("Error details:", (parseError as Error).message);
+      console.error("Please check your config file syntax.");
+      process.exit(1);
+    }
+  } catch (readError: any) {
+    if (readError.code === "ENOENT") {
+      // Config file doesn't exist, prompt user for initial setup
+      try {
+        // Initialize directories
+        await initDir();
+
+        // Backup existing config file if it exists
+        const backupPath = await backupConfigFile();
+        if (backupPath) {
+          console.log(
+              `Backed up existing configuration file to ${backupPath}`
+          );
+        }
+        const config = {
+          PORT: 3456,
+          Providers: [],
+          Router: {},
+        }
+        // Create a minimal default config file
+        await writeConfigFile(config);
+        console.log(
+            "Created minimal default configuration file at ~/.claude-code-router/config.json"
+        );
+        console.log(
+            "Please edit this file with your actual configuration."
+        );
+        return config
+      } catch (error: any) {
+        console.error(
+            "Failed to create default configuration:",
+            error.message
+        );
+        process.exit(1);
+      }
+    } else {
+      console.error(`Failed to read config file at ${CONFIG_FILE}`);
+      console.error("Error details:", readError.message);
+      process.exit(1);
+    }
+  }
+};
+
+export const backupConfigFile = async () => {
+  try {
+    if (await fs.access(CONFIG_FILE).then(() => true).catch(() => false)) {
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const backupPath = `${CONFIG_FILE}.${timestamp}.bak`;
+      await fs.copyFile(CONFIG_FILE, backupPath);
+
+      // Clean up old backups, keeping only the 3 most recent
+      try {
+        const configDir = path.dirname(CONFIG_FILE);
+        const configFileName = path.basename(CONFIG_FILE);
+        const files = await fs.readdir(configDir);
+
+        // Find all backup files for this config
+        const backupFiles = files
+          .filter(file => file.startsWith(configFileName) && file.endsWith('.bak'))
+          .sort()
+          .reverse(); // Sort in descending order (newest first)
+
+        // Delete all but the 3 most recent backups
+        if (backupFiles.length > 3) {
+          for (let i = 3; i < backupFiles.length; i++) {
+            const oldBackupPath = path.join(configDir, backupFiles[i]);
+            await fs.unlink(oldBackupPath);
+          }
+        }
+      } catch (cleanupError) {
+        console.warn("Failed to clean up old backups:", cleanupError);
+      }
+
+      return backupPath;
+    }
+  } catch (error) {
+    console.error("Failed to backup config file:", error);
+  }
+  return null;
+};
+
+export const writeConfigFile = async (config: any) => {
+  await ensureDir(HOME_DIR);
+  const configWithComment = `${JSON.stringify(config, null, 2)}`;
+  await fs.writeFile(CONFIG_FILE, configWithComment);
+};
+
+export const initConfig = async () => {
+  const config = await readConfigFile();
+  Object.assign(process.env, config);
+  return config;
+};
+
+// 导出日志清理函数
+export { cleanupLogFiles };
+
+// 导出更新功能
+export { checkForUpdates, performUpdate } from "./update";

packages/cli/src/utils/modelSelector.ts

@@ -0,0 +1,462 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { select, input, confirm } from '@inquirer/prompts';
+
+// ANSI color codes
+const RESET = "\x1B[0m";
+const DIM = "\x1B[2m";
+const BOLDGREEN = "\x1B[1m\x1B[32m";
+const CYAN = "\x1B[36m";
+const BOLDCYAN = "\x1B[1m\x1B[36m";
+const GREEN = "\x1B[32m";
+const YELLOW = "\x1B[33m";
+const BOLDYELLOW = "\x1B[1m\x1B[33m";
+
+interface TransformerConfig {
+  use: Array<string | [string, any]>;
+  [key: string]: any;
+}
+
+interface Provider {
+  name: string;
+  api_base_url: string;
+  api_key: string;
+  models: string[];
+  transformer?: TransformerConfig;
+}
+
+interface RouterConfig {
+  default: string;
+  background?: string;
+  think?: string;
+  longContext?: string;
+  longContextThreshold?: number;
+  webSearch?: string;
+  image?: string;
+  [key: string]: string | number | undefined;
+}
+
+interface Config {
+  Providers: Provider[];
+  Router: RouterConfig;
+  [key: string]: any;
+}
+
+interface ModelResult {
+  providerName: string;
+  modelName: string;
+  modelType: string;
+}
+
+const AVAILABLE_TRANSFORMERS = [
+  'anthropic',
+  'deepseek',
+  'gemini',
+  'openrouter',
+  'groq',
+  'maxtoken',
+  'tooluse',
+  'gemini-cli',
+  'reasoning',
+  'sampling',
+  'enhancetool',
+  'cleancache',
+  'vertex-gemini',
+  'chutes-glm',
+  'qwen-cli',
+  'rovo-cli'
+];
+
+function getConfigPath(): string {
+  const configDir = path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude-code-router');
+  const configPath = path.join(configDir, 'config.json');
+  
+  if (!fs.existsSync(configPath)) {
+    throw new Error(`config.json not found at ${configPath}`);
+  }
+  
+  return configPath;
+}
+
+function loadConfig(): Config {
+  const configPath = getConfigPath();
+  return JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+}
+
+function saveConfig(config: Config): void {
+  const configPath = getConfigPath();
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
+  console.log(`${GREEN}✓ config.json updated successfully${RESET}\n`);
+}
+
+function getAllModels(config: Config) {
+  const models: any[] = [];
+  for (const provider of config.Providers) {
+    for (const model of provider.models) {
+      models.push({
+        name: `${BOLDCYAN}${provider.name}${RESET} → ${CYAN} ${model}`,
+        value: `${provider.name},${model}`,
+        description: `\n${BOLDCYAN}Provider:${RESET} ${provider.name}`,
+        provider: provider.name,
+        model: model
+      });
+    }
+  }
+  return models;
+}
+
+function displayCurrentConfig(config: Config): void {
+  console.log(`\n${BOLDCYAN}═══════════════════════════════════════════════${RESET}`);
+  console.log(`${BOLDCYAN}           Current Configuration${RESET}`);
+  console.log(`${BOLDCYAN}═══════════════════════════════════════════════${RESET}\n`);
+  
+  const formatModel = (routerValue?: string | number) => {
+    if (!routerValue || typeof routerValue === 'number') {
+      return `${DIM}Not configured${RESET}`;
+    }
+    const [provider, model] = routerValue.split(',');
+    return `${YELLOW}${provider}${RESET} | ${model}\n  ${DIM}- ${routerValue}${RESET}`;
+  };
+  
+  console.log(`${BOLDCYAN}Default Model:${RESET}`);
+  console.log(`  ${formatModel(config.Router.default)}\n`);
+  
+  if (config.Router.background) {
+    console.log(`${BOLDCYAN}Background Model:${RESET}`);
+    console.log(`  ${formatModel(config.Router.background)}\n`);
+  }
+  
+  if (config.Router.think) {
+    console.log(`${BOLDCYAN}Think Model:${RESET}`);
+    console.log(`  ${formatModel(config.Router.think)}\n`);
+  }
+  
+  if (config.Router.longContext) {
+    console.log(`${BOLDCYAN}Long Context Model:${RESET}`);
+    console.log(`  ${formatModel(config.Router.longContext)}\n`);
+  }
+  
+  if (config.Router.webSearch) {
+    console.log(`${BOLDCYAN}Web Search Model:${RESET}`);
+    console.log(`  ${formatModel(config.Router.webSearch)}\n`);
+  }
+  
+  if (config.Router.image) {
+    console.log(`${BOLDCYAN}Image Model:${RESET}`);
+    console.log(`  ${formatModel(config.Router.image)}\n`);
+  }
+  
+  console.log(`\n${BOLDCYAN}═══════════════════════════════════════════════${RESET}`);
+  console.log(`${BOLDCYAN}           Add/Update Model${RESET}`);
+  console.log(`${BOLDCYAN}═══════════════════════════════════════════════${RESET}\n`);
+}
+
+async function selectModelType() {
+  return await select({
+    message: `${BOLDYELLOW}Which model configuration do you want to update?${RESET}`,
+    choices: [
+      { name: 'Default Model', value: 'default' },
+      { name: 'Background Model', value: 'background' },
+      { name: 'Think Model', value: 'think' },
+      { name: 'Long Context Model', value: 'longContext' },
+      { name: 'Web Search Model', value: 'webSearch' },
+      { name: 'Image Model', value: 'image' },
+      { name: `${BOLDGREEN}+ Add New Model${RESET}`, value: 'addModel' }
+    ]
+  });
+}
+
+async function selectModel(config: Config, modelType: string) {
+  const models = getAllModels(config);
+  
+  return await select({
+    message: `\n${BOLDYELLOW}Select a model for ${modelType}:${RESET}`,
+    choices: models,
+    pageSize: 15
+  });
+}
+
+async function configureTransformers(): Promise<TransformerConfig | undefined> {
+  const useTransformers = await confirm({
+    message: `\n${BOLDYELLOW}Add transformer configuration?${RESET}`,
+    default: false
+  });
+  
+  if (!useTransformers) {
+    return undefined;
+  }
+  
+  const transformers: Array<string | [string, any]> = [];
+  let addMore = true;
+  
+  while (addMore) {
+    const transformer = await select({
+      message: `\n${BOLDYELLOW}Select a transformer:${RESET}`,
+      choices: AVAILABLE_TRANSFORMERS.map(t => ({ name: t, value: t })),
+      pageSize: 15
+    }) as string;
+    
+    // Check if transformer needs options
+    if (transformer === 'maxtoken') {
+      const maxTokens = await input({
+        message: `\n${BOLDYELLOW}Max tokens:${RESET}`,
+        default: '30000',
+        validate: (value: string) => {
+          const num = parseInt(value);
+          if (isNaN(num) || num <= 0) {
+            return 'Please enter a valid positive number';
+          }
+          return true;
+        }
+      });
+      transformers.push(['maxtoken', { max_tokens: parseInt(maxTokens) }]);
+    } else if (transformer === 'openrouter') {
+      const addProvider = await confirm({
+        message: `\n${BOLDYELLOW}Add provider routing options?${RESET}`,
+        default: false
+      });
+      
+      if (addProvider) {
+        const providerInput = await input({
+          message: 'Provider (e.g., moonshotai/fp8):',
+          validate: (value: string) => value.trim() !== '' || 'Provider cannot be empty'
+        });
+        transformers.push(['openrouter', { provider: { only: [providerInput] } }]);
+      } else {
+        transformers.push(transformer);
+      }
+    } else {
+      transformers.push(transformer);
+    }
+    
+    addMore = await confirm({
+      message: `\n${BOLDYELLOW}Add another transformer?${RESET}`,
+      default: false
+    });
+  }
+  
+  return { use: transformers };
+}
+
+async function addNewModel(config: Config): Promise<ModelResult | null> {
+  const providerChoices = config.Providers.map(p => ({
+    name: p.name,
+    value: p.name
+  }));
+  
+  providerChoices.push({ name: `${BOLDGREEN}+ Add New Provider${RESET}`, value: '__new__' });
+  
+  const selectedProvider = await select({
+    message: `\n${BOLDYELLOW}Select provider for the new model:${RESET}`,
+    choices: providerChoices
+  }) as string;
+  
+  if (selectedProvider === '__new__') {
+    return await addNewProvider(config);
+  } else {
+    return await addModelToExistingProvider(config, selectedProvider);
+  }
+}
+
+async function addModelToExistingProvider(config: Config, providerName: string): Promise<ModelResult | null> {
+  const modelName = await input({
+    message: `\n${BOLDYELLOW}Enter the model name:${RESET}`,
+    validate: (value: string) => {
+      if (!value.trim()) {
+        return 'Model name cannot be empty';
+      }
+      return true;
+    }
+  });
+  
+  const provider = config.Providers.find(p => p.name === providerName);
+  
+  if (!provider) {
+    console.log(`${YELLOW}Provider not found${RESET}`);
+    return null;
+  }
+  
+  if (provider.models.includes(modelName)) {
+    console.log(`${YELLOW}Model already exists in provider${RESET}`);
+    return null;
+  }
+  
+  provider.models.push(modelName);
+  
+  // Ask about model-specific transformers
+  const addModelTransformer = await confirm({
+    message: `\n${BOLDYELLOW}Add model-specific transformer configuration?${RESET}`,
+    default: false
+  });
+  
+  if (addModelTransformer) {
+    const transformerConfig = await configureTransformers();
+    if (transformerConfig && provider.transformer) {
+      provider.transformer[modelName] = transformerConfig;
+    }
+  }
+  
+  saveConfig(config);
+  
+  console.log(`${GREEN}✓ Model "${modelName}" added to provider "${providerName}"${RESET}`);
+  
+  const setAsDefault = await confirm({
+    message: `\n${BOLDYELLOW}Do you want to set this model in router configuration?${RESET}`,
+    default: false
+  });
+  
+  if (setAsDefault) {
+    const modelType = await select({
+      message: `\n${BOLDYELLOW}Select configuration type:${RESET}`,
+      choices: [
+        { name: 'Default Model', value: 'default' },
+        { name: 'Background Model', value: 'background' },
+        { name: 'Think Model', value: 'think' },
+        { name: 'Long Context Model', value: 'longContext' },
+        { name: 'Web Search Model', value: 'webSearch' },
+        { name: 'Image Model', value: 'image' }
+      ]
+    }) as string;
+    
+    return { providerName, modelName, modelType };
+  }
+  
+  return null;
+}
+
+async function addNewProvider(config: Config): Promise<ModelResult | null> {
+  console.log(`\n${BOLDCYAN}Adding New Provider${RESET}\n`);
+  
+  const providerName = await input({
+    message: `${BOLDYELLOW}Provider name:${RESET}`,
+    validate: (value: string) => {
+      if (!value.trim()) {
+        return 'Provider name cannot be empty';
+      }
+      if (config.Providers.some(p => p.name === value)) {
+        return 'Provider already exists';
+      }
+      return true;
+    }
+  });
+  
+  const apiBaseUrl = await input({
+    message: `\n${BOLDYELLOW}API base URL:${RESET}`,
+    validate: (value: string) => {
+      if (!value.trim()) {
+        return 'API base URL cannot be empty';
+      }
+      try {
+        new URL(value);
+        return true;
+      } catch {
+        return 'Please enter a valid URL';
+      }
+    }
+  });
+  
+  const apiKey = await input({
+    message: `\n${BOLDYELLOW}API key:${RESET}`,
+    validate: (value: string) => {
+      if (!value.trim()) {
+        return 'API key cannot be empty';
+      }
+      return true;
+    }
+  });
+  
+  const modelsInput = await input({
+    message: `\n${BOLDYELLOW}Model names (comma-separated):${RESET}`,
+    validate: (value: string) => {
+      if (!value.trim()) {
+        return 'At least one model name is required';
+      }
+      return true;
+    }
+  });
+  
+  const models = modelsInput.split(',').map(m => m.trim()).filter(m => m);
+  
+  const newProvider: Provider = {
+    name: providerName,
+    api_base_url: apiBaseUrl,
+    api_key: apiKey,
+    models: models
+  };
+  
+  // Global transformer configuration
+  const transformerConfig = await configureTransformers();
+  if (transformerConfig) {
+    newProvider.transformer = transformerConfig;
+  }
+  
+  config.Providers.push(newProvider);
+  saveConfig(config);
+  
+  console.log(`${GREEN}\n✓ Provider "${providerName}" added successfully${RESET}`);
+  
+  const setAsDefault = await confirm({
+    message: `\n${BOLDYELLOW}Do you want to set one of these models in router configuration?${RESET}`,
+    default: false
+  });
+  
+  if (setAsDefault && models.length > 0) {
+    let selectedModel = models[0];
+    
+    if (models.length > 1) {
+      selectedModel = await select({
+        message: `\n${BOLDYELLOW}Select which model to configure:${RESET}`,
+        choices: models.map(m => ({ name: m, value: m }))
+      }) as string;
+    }
+    
+    const modelType = await select({
+      message: `\n${BOLDYELLOW}Select configuration type:${RESET}`,
+      choices: [
+        { name: 'Default Model', value: 'default' },
+        { name: 'Background Model', value: 'background' },
+        { name: 'Think Model', value: 'think' },
+        { name: 'Long Context Model', value: 'longContext' },
+        { name: 'Web Search Model', value: 'webSearch' },
+        { name: 'Image Model', value: 'image' }
+      ]
+    }) as string;
+    
+    return { providerName, modelName: selectedModel, modelType };
+  }
+  
+  return null;
+}
+
+export async function runModelSelector(): Promise<void> {
+  console.clear();
+  
+  try {
+    let config = loadConfig();
+    displayCurrentConfig(config);
+    
+    const action = await selectModelType() as string;
+    
+    if (action === 'addModel') {
+      const result = await addNewModel(config);
+      
+      if (result) {
+        config = loadConfig();
+        config.Router[result.modelType] = `${result.providerName},${result.modelName}`;
+        saveConfig(config);
+        console.log(`${GREEN}✓ ${result.modelType} set to ${result.providerName},${result.modelName}${RESET}`);
+      }
+    } else {
+      const selectedModel = await selectModel(config, action) as string;
+      config.Router[action] = selectedModel;
+      saveConfig(config);
+      
+      console.log(`${GREEN}✓ ${action} model updated to: ${selectedModel}${RESET}`);
+    }
+    
+    displayCurrentConfig(config);
+  } catch (error: any) {
+    console.error(`${YELLOW}Error:${RESET}`, error.message);
+    process.exit(1);
+  }
+}

packages/cli/src/utils/processCheck.ts

@@ -0,0 +1,136 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { PID_FILE, REFERENCE_COUNT_FILE } from '@musistudio/claude-code-router-shared';
+import { readConfigFile } from '.';
+import find from 'find-process';
+import { execSync } from 'child_process'; // 引入 execSync 来执行命令行
+
+export async function isProcessRunning(pid: number): Promise<boolean> {
+    try {
+        const processes = await find('pid', pid);
+        return processes.length > 0;
+    } catch (error) {
+        return false;
+    }
+}
+
+export function incrementReferenceCount() {
+    let count = 0;
+    if (existsSync(REFERENCE_COUNT_FILE)) {
+        count = parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
+    }
+    count++;
+    writeFileSync(REFERENCE_COUNT_FILE, count.toString());
+}
+
+export function decrementReferenceCount() {
+    let count = 0;
+    if (existsSync(REFERENCE_COUNT_FILE)) {
+        count = parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
+    }
+    count = Math.max(0, count - 1);
+    writeFileSync(REFERENCE_COUNT_FILE, count.toString());
+}
+
+export function getReferenceCount(): number {
+    if (!existsSync(REFERENCE_COUNT_FILE)) {
+        return 0;
+    }
+    return parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
+}
+
+export function isServiceRunning(): boolean {
+    if (!existsSync(PID_FILE)) {
+        return false;
+    }
+
+    let pid: number;
+    try {
+        const pidStr = readFileSync(PID_FILE, 'utf-8');
+        pid = parseInt(pidStr, 10);
+        if (isNaN(pid)) {
+            // PID 文件内容无效
+            cleanupPidFile();
+            return false;
+        }
+    } catch (e) {
+        // 读取文件失败
+        return false;
+    }
+
+    try {
+        if (process.platform === 'win32') {
+            // --- Windows 平台逻辑 ---
+            // 使用 tasklist 命令并通过 PID 过滤器查找进程
+            // stdio: 'pipe' 压制命令的输出，防止其显示在控制台
+            const command = `tasklist /FI "PID eq ${pid}"`;
+            const output = execSync(command, { stdio: 'pipe' }).toString();
+
+            // 如果输出中包含了 PID，说明进程存在
+            // tasklist 找不到进程时会返回 "INFO: No tasks are running..."
+            // 所以一个简单的包含检查就足够了
+            if (output.includes(pid.toString())) {
+                return true;
+            } else {
+                // 理论上如果 tasklist 成功执行但没找到，这里不会被命中
+                // 但作为保险，我们仍然认为进程不存在
+                cleanupPidFile();
+                return false;
+            }
+
+        } else {
+            // --- Linux, macOS 等其他平台逻辑 ---
+            // 使用信号 0 来检查进程是否存在，这不会真的杀死进程
+            process.kill(pid, 0);
+            return true; // 如果没有抛出异常，说明进程存在
+        }
+    } catch (e) {
+        // 捕获到异常，说明进程不存在 (无论是 kill 还是 execSync 失败)
+        // 清理掉无效的 PID 文件
+        cleanupPidFile();
+        return false;
+    }
+}
+
+export function savePid(pid: number) {
+    writeFileSync(PID_FILE, pid.toString());
+}
+
+export function cleanupPidFile() {
+    if (existsSync(PID_FILE)) {
+        try {
+            const fs = require('fs');
+            fs.unlinkSync(PID_FILE);
+        } catch (e) {
+            // Ignore cleanup errors
+        }
+    }
+}
+
+export function getServicePid(): number | null {
+    if (!existsSync(PID_FILE)) {
+        return null;
+    }
+
+    try {
+        const pid = parseInt(readFileSync(PID_FILE, 'utf-8'));
+        return isNaN(pid) ? null : pid;
+    } catch (e) {
+        return null;
+    }
+}
+
+export async function getServiceInfo() {
+    const pid = getServicePid();
+    const running = await isServiceRunning();
+    const config = await readConfigFile();
+    const port = config.PORT || 3456;
+
+    return {
+        running,
+        pid,
+        port,
+        endpoint: `http://127.0.0.1:${port}`,
+        pidFile: PID_FILE,
+        referenceCount: getReferenceCount()
+    };
+}

packages/cli/src/utils/status.ts

@@ -0,0 +1,27 @@
+import { getServiceInfo } from './processCheck';
+
+export async function showStatus() {
+    const info = await getServiceInfo();
+    
+    console.log('\n📊 Claude Code Router Status');
+    console.log('═'.repeat(40));
+    
+    if (info.running) {
+        console.log('✅ Status: Running');
+        console.log(`🆔 Process ID: ${info.pid}`);
+        console.log(`🌐 Port: ${info.port}`);
+        console.log(`📡 API Endpoint: ${info.endpoint}`);
+        console.log(`📄 PID File: ${info.pidFile}`);
+        console.log('');
+        console.log('🚀 Ready to use! Run the following commands:');
+        console.log('   ccr code    # Start coding with Claude');
+        console.log('   ccr stop   # Stop the service');
+    } else {
+        console.log('❌ Status: Not Running');
+        console.log('');
+        console.log('💡 To start the service:');
+        console.log('   ccr start');
+    }
+    
+    console.log('');
+}

packages/cli/src/utils/statusline.ts

@@ -0,0 +1,813 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { execSync } from "child_process";
+import { CONFIG_FILE } from "@musistudio/claude-code-router-shared";
+import JSON5 from "json5";
+
+export interface StatusLineModuleConfig {
+    type: string;
+    icon?: string;
+    text: string;
+    color?: string;
+    background?: string;
+    scriptPath?: string; // 用于script类型的模块，指定要执行的Node.js脚本文件路径
+}
+
+export interface StatusLineThemeConfig {
+    modules: StatusLineModuleConfig[];
+}
+
+export interface StatusLineInput {
+    hook_event_name: string;
+    session_id: string;
+    transcript_path: string;
+    cwd: string;
+    model: {
+        id: string;
+        display_name: string;
+    };
+    workspace: {
+        current_dir: string;
+        project_dir: string;
+    };
+}
+
+export interface AssistantMessage {
+    type: "assistant";
+    message: {
+        model: string;
+        usage: {
+            input_tokens: number;
+            output_tokens: number;
+        };
+    };
+}
+
+// ANSIColor代码
+const COLORS: Record<string, string> = {
+    reset: "\x1b[0m",
+    bold: "\x1b[1m",
+    dim: "\x1b[2m",
+    // 标准颜色
+    black: "\x1b[30m",
+    red: "\x1b[31m",
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    blue: "\x1b[34m",
+    magenta: "\x1b[35m",
+    cyan: "\x1b[36m",
+    white: "\x1b[37m",
+    // 亮色
+    bright_black: "\x1b[90m",
+    bright_red: "\x1b[91m",
+    bright_green: "\x1b[92m",
+    bright_yellow: "\x1b[93m",
+    bright_blue: "\x1b[94m",
+    bright_magenta: "\x1b[95m",
+    bright_cyan: "\x1b[96m",
+    bright_white: "\x1b[97m",
+    // 背景颜色
+    bg_black: "\x1b[40m",
+    bg_red: "\x1b[41m",
+    bg_green: "\x1b[42m",
+    bg_yellow: "\x1b[43m",
+    bg_blue: "\x1b[44m",
+    bg_magenta: "\x1b[45m",
+    bg_cyan: "\x1b[46m",
+    bg_white: "\x1b[47m",
+    // 亮背景色
+    bg_bright_black: "\x1b[100m",
+    bg_bright_red: "\x1b[101m",
+    bg_bright_green: "\x1b[102m",
+    bg_bright_yellow: "\x1b[103m",
+    bg_bright_blue: "\x1b[104m",
+    bg_bright_magenta: "\x1b[105m",
+    bg_bright_cyan: "\x1b[106m",
+    bg_bright_white: "\x1b[107m",
+};
+
+// 使用TrueColor(24位色)支持十六进制颜色
+const TRUE_COLOR_PREFIX = "\x1b[38;2;";
+const TRUE_COLOR_BG_PREFIX = "\x1b[48;2;";
+
+// 将十六进制颜色转为RGB格式
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    // 移除#和空格
+    hex = hex.replace(/^#/, '').trim();
+
+    // 处理简写形式 (#RGB -> #RRGGBB)
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+
+    if (hex.length !== 6) {
+        return null;
+    }
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // 验证RGB值是否有效
+    if (isNaN(r) || isNaN(g) || isNaN(b) || r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+        return null;
+    }
+
+    return { r, g, b };
+}
+
+// 获取颜色代码
+function getColorCode(colorName: string): string {
+    // 检查是否是十六进制颜色
+    if (colorName.startsWith('#') || /^[0-9a-fA-F]{6}$/.test(colorName) || /^[0-9a-fA-F]{3}$/.test(colorName)) {
+        const rgb = hexToRgb(colorName);
+        if (rgb) {
+            return `${TRUE_COLOR_PREFIX}${rgb.r};${rgb.g};${rgb.b}m`;
+        }
+    }
+
+    // 默认返回空字符串
+    return "";
+}
+
+
+// 变量替换函数，支持{{var}}格式的变量替换
+function replaceVariables(text: string, variables: Record<string, string>): string {
+    return text.replace(/\{\{(\w+)\}\}/g, (_match, varName) => {
+        return variables[varName] || "";
+    });
+}
+
+// 执行脚本并获取输出
+async function executeScript(scriptPath: string, variables: Record<string, string>): Promise<string> {
+    try {
+        // 检查文件是否存在
+        await fs.access(scriptPath);
+
+        // 使用require动态加载脚本模块
+        const scriptModule = require(scriptPath);
+
+        // 如果导出的是函数，则调用它并传入变量
+        if (typeof scriptModule === 'function') {
+            const result = scriptModule(variables);
+            // 如果返回的是Promise，则等待它完成
+            if (result instanceof Promise) {
+                return await result;
+            }
+            return result;
+        }
+
+        // 如果导出的是default函数，则调用它
+        if (scriptModule.default && typeof scriptModule.default === 'function') {
+            const result = scriptModule.default(variables);
+            // 如果返回的是Promise，则等待它完成
+            if (result instanceof Promise) {
+                return await result;
+            }
+            return result;
+        }
+
+        // 如果导出的是字符串，则直接返回
+        if (typeof scriptModule === 'string') {
+            return scriptModule;
+        }
+
+        // 如果导出的是default字符串，则返回它
+        if (scriptModule.default && typeof scriptModule.default === 'string') {
+            return scriptModule.default;
+        }
+
+        // 默认情况下返回空字符串
+        return "";
+    } catch (error) {
+        console.error(`执行脚本 ${scriptPath} 时出错:`, error);
+        return "";
+    }
+}
+
+// 默认主题配置 - 使用Nerd Fonts图标和美观配色
+const DEFAULT_THEME: StatusLineThemeConfig = {
+    modules: [
+        {
+            type: "workDir",
+            icon: "󰉋", // nf-md-folder_outline
+            text: "{{workDirName}}",
+            color: "bright_blue"
+        },
+        {
+            type: "gitBranch",
+            icon: "", // nf-dev-git_branch
+            text: "{{gitBranch}}",
+            color: "bright_magenta"
+        },
+        {
+            type: "model",
+            icon: "󰚩", // nf-md-robot_outline
+            text: "{{model}}",
+            color: "bright_cyan"
+        },
+        {
+            type: "usage",
+            icon: "↑", // 上箭头
+            text: "{{inputTokens}}",
+            color: "bright_green"
+        },
+        {
+            type: "usage",
+            icon: "↓", // 下箭头
+            text: "{{outputTokens}}",
+            color: "bright_yellow"
+        }
+    ]
+};
+
+// Powerline风格主题配置
+const POWERLINE_THEME: StatusLineThemeConfig = {
+    modules: [
+        {
+            type: "workDir",
+            icon: "󰉋", // nf-md-folder_outline
+            text: "{{workDirName}}",
+            color: "white",
+            background: "bg_bright_blue"
+        },
+        {
+            type: "gitBranch",
+            icon: "", // nf-dev-git_branch
+            text: "{{gitBranch}}",
+            color: "white",
+            background: "bg_bright_magenta"
+        },
+        {
+            type: "model",
+            icon: "󰚩", // nf-md-robot_outline
+            text: "{{model}}",
+            color: "white",
+            background: "bg_bright_cyan"
+        },
+        {
+            type: "usage",
+            icon: "↑", // 上箭头
+            text: "{{inputTokens}}",
+            color: "white",
+            background: "bg_bright_green"
+        },
+        {
+            type: "usage",
+            icon: "↓", // 下箭头
+            text: "{{outputTokens}}",
+            color: "white",
+            background: "bg_bright_yellow"
+        }
+    ]
+};
+
+// 简单文本主题配置 - 用于图标无法显示时的fallback
+const SIMPLE_THEME: StatusLineThemeConfig = {
+    modules: [
+        {
+            type: "workDir",
+            icon: "",
+            text: "{{workDirName}}",
+            color: "bright_blue"
+        },
+        {
+            type: "gitBranch",
+            icon: "",
+            text: "{{gitBranch}}",
+            color: "bright_magenta"
+        },
+        {
+            type: "model",
+            icon: "",
+            text: "{{model}}",
+            color: "bright_cyan"
+        },
+        {
+            type: "usage",
+            icon: "↑",
+            text: "{{inputTokens}}",
+            color: "bright_green"
+        },
+        {
+            type: "usage",
+            icon: "↓",
+            text: "{{outputTokens}}",
+            color: "bright_yellow"
+        }
+    ]
+};
+
+// 格式化usage信息，如果大于1000则使用k单位
+function formatUsage(input_tokens: number, output_tokens: number): string {
+    if (input_tokens > 1000 || output_tokens > 1000) {
+        const inputFormatted = input_tokens > 1000 ? `${(input_tokens / 1000).toFixed(1)}k` : `${input_tokens}`;
+        const outputFormatted = output_tokens > 1000 ? `${(output_tokens / 1000).toFixed(1)}k` : `${output_tokens}`;
+        return `${inputFormatted} ${outputFormatted}`;
+    }
+    return `${input_tokens} ${output_tokens}`;
+}
+
+// 读取用户主目录的主题配置
+async function getProjectThemeConfig(): Promise<{ theme: StatusLineThemeConfig | null, style: string }> {
+    try {
+        // 只使用主目录的固定配置文件
+        const configPath = CONFIG_FILE;
+
+        // 检查配置文件是否存在
+        try {
+            await fs.access(configPath);
+        } catch {
+            return { theme: null, style: 'default' };
+        }
+
+        const configContent = await fs.readFile(configPath, "utf-8");
+        const config = JSON5.parse(configContent);
+
+        // 检查是否有StatusLine配置
+        if (config.StatusLine) {
+            // 获取当前使用的风格，默认为default
+            const currentStyle = config.StatusLine.currentStyle || 'default';
+
+            // 检查是否有对应风格的配置
+            if (config.StatusLine[currentStyle] && config.StatusLine[currentStyle].modules) {
+                return { theme: config.StatusLine[currentStyle], style: currentStyle };
+            }
+        }
+    } catch (error) {
+        // 如果读取失败，返回null
+        // console.error("Failed to read theme config:", error);
+    }
+
+    return { theme: null, style: 'default' };
+}
+
+// 检查是否应该使用简单主题（fallback方案）
+// 当环境变量 USE_SIMPLE_ICONS 被设置时，或者当检测到可能不支持Nerd Fonts的终端时
+function shouldUseSimpleTheme(): boolean {
+    // 检查环境变量
+    if (process.env.USE_SIMPLE_ICONS === 'true') {
+        return true;
+    }
+
+    // 检查终端类型（一些常见的不支持复杂图标的终端）
+    const term = process.env.TERM || '';
+    const unsupportedTerms = ['dumb', 'unknown'];
+    if (unsupportedTerms.includes(term)) {
+        return true;
+    }
+
+    // 默认情况下，假设终端支持Nerd Fonts
+    return false;
+}
+
+// 检查Nerd Fonts图标是否能正确显示
+// 通过检查终端字体信息或使用试探性方法
+function canDisplayNerdFonts(): boolean {
+    // 如果环境变量明确指定使用简单图标，则不能显示Nerd Fonts
+    if (process.env.USE_SIMPLE_ICONS === 'true') {
+        return false;
+    }
+
+    // 检查一些常见的支持Nerd Fonts的终端环境变量
+    const fontEnvVars = ['NERD_FONT', 'NERDFONT', 'FONT'];
+    for (const envVar of fontEnvVars) {
+        const value = process.env[envVar];
+        if (value && (value.includes('Nerd') || value.includes('nerd'))) {
+            return true;
+        }
+    }
+
+    // 检查终端类型
+    const termProgram = process.env.TERM_PROGRAM || '';
+    const supportedTerminals = ['iTerm.app', 'vscode', 'Hyper', 'kitty', 'alacritty'];
+    if (supportedTerminals.includes(termProgram)) {
+        return true;
+    }
+
+    // 检查COLORTERM环境变量
+    const colorTerm = process.env.COLORTERM || '';
+    if (colorTerm.includes('truecolor') || colorTerm.includes('24bit')) {
+        return true;
+    }
+
+    // 默认情况下，假设可以显示Nerd Fonts（但允许用户通过环境变量覆盖）
+    return process.env.USE_SIMPLE_ICONS !== 'true';
+}
+
+// 检查特定Unicode字符是否能正确显示
+// 这是一个简单的试探性检查
+function canDisplayUnicodeCharacter(char: string): boolean {
+    // 对于Nerd Fonts图标，我们假设支持UTF-8的终端可以显示
+    // 但实际上很难准确检测，所以我们依赖环境变量和终端类型检测
+    try {
+        // 检查终端是否支持UTF-8
+        const lang = process.env.LANG || process.env.LC_ALL || process.env.LC_CTYPE || '';
+        if (lang.includes('UTF-8') || lang.includes('utf8') || lang.includes('UTF8')) {
+            return true;
+        }
+
+        // 检查LC_*环境变量
+        const lcVars = ['LC_ALL', 'LC_CTYPE', 'LANG'];
+        for (const lcVar of lcVars) {
+            const value = process.env[lcVar];
+            if (value && (value.includes('UTF-8') || value.includes('utf8'))) {
+                return true;
+            }
+        }
+    } catch (e) {
+        // 如果检查失败，默认返回true
+        return true;
+    }
+
+    // 默认情况下，假设可以显示
+    return true;
+}
+
+export async function parseStatusLineData(input: StatusLineInput): Promise<string> {
+    try {
+        // 检查是否应该使用简单主题
+        const useSimpleTheme = shouldUseSimpleTheme();
+
+        // 检查是否可以显示Nerd Fonts图标
+        const canDisplayNerd = canDisplayNerdFonts();
+
+        // 确定使用的主题：如果用户强制使用简单主题或无法显示Nerd Fonts，则使用简单主题
+        const effectiveTheme = useSimpleTheme || !canDisplayNerd ? SIMPLE_THEME : DEFAULT_THEME;
+
+        // 获取主目录的主题配置，如果没有则使用确定的默认配置
+        const { theme: projectTheme, style: currentStyle } = await getProjectThemeConfig();
+        const theme = projectTheme || effectiveTheme;
+
+        // 获取当前工作目录和Git分支
+        const workDir = input.workspace.current_dir;
+        let gitBranch = "";
+
+        try {
+            // 尝试获取Git分支名
+            gitBranch = execSync("git branch --show-current", {
+                cwd: workDir,
+                stdio: ["pipe", "pipe", "ignore"],
+            })
+                .toString()
+                .trim();
+        } catch (error) {
+            // 如果不是Git仓库或获取失败，则忽略错误
+        }
+
+        // 从transcript_path文件中读取最后一条assistant消息
+        const transcriptContent = await fs.readFile(input.transcript_path, "utf-8");
+        const lines = transcriptContent.trim().split("\n");
+
+        // 反向遍历寻找最后一条assistant消息
+        let model = "";
+        let inputTokens = 0;
+        let outputTokens = 0;
+
+        for (let i = lines.length - 1; i >= 0; i--) {
+            try {
+                const message: AssistantMessage = JSON.parse(lines[i]);
+                if (message.type === "assistant" && message.message.model) {
+                    model = message.message.model;
+
+                    if (message.message.usage) {
+                        inputTokens = message.message.usage.input_tokens;
+                        outputTokens = message.message.usage.output_tokens;
+                    }
+                    break;
+                }
+            } catch (parseError) {
+                // 忽略解析错误，继续查找
+                continue;
+            }
+        }
+
+        // 如果没有从transcript中获取到模型名称，则尝试从配置文件中获取
+        if (!model) {
+            try {
+                // 获取项目配置文件路径
+                const projectConfigPath = path.join(workDir, ".claude-code-router", "config.json");
+                let configPath = projectConfigPath;
+
+                // 检查项目配置文件是否存在，如果不存在则使用用户主目录的配置文件
+                try {
+                    await fs.access(projectConfigPath);
+                } catch {
+                    configPath = CONFIG_FILE;
+                }
+
+                // 读取配置文件
+                const configContent = await fs.readFile(configPath, "utf-8");
+                const config = JSON5.parse(configContent);
+
+                // 从Router字段的default内容中获取模型名称
+                if (config.Router && config.Router.default) {
+                    const [, defaultModel] = config.Router.default.split(",");
+                    if (defaultModel) {
+                        model = defaultModel.trim();
+                    }
+                }
+            } catch (configError) {
+                // 如果配置文件读取失败，则忽略错误
+            }
+        }
+
+        // 如果仍然没有获取到模型名称，则使用传入的JSON数据中的model字段的display_name
+        if (!model) {
+            model = input.model.display_name;
+        }
+
+        // 获取工作目录名
+        const workDirName = workDir.split("/").pop() || "";
+
+        // 格式化usage信息
+        const usage = formatUsage(inputTokens, outputTokens);
+        const [formattedInputTokens, formattedOutputTokens] = usage.split(" ");
+
+        // 定义变量替换映射
+        const variables = {
+            workDirName,
+            gitBranch,
+            model,
+            inputTokens: formattedInputTokens,
+            outputTokens: formattedOutputTokens
+        };
+
+        // 确定使用的风格
+        const isPowerline = currentStyle === 'powerline';
+
+        // 根据风格渲染状态行
+        if (isPowerline) {
+            return await renderPowerlineStyle(theme, variables);
+        } else {
+            return await renderDefaultStyle(theme, variables);
+        }
+    } catch (error) {
+        // 发生错误时返回空字符串
+        return "";
+    }
+}
+
+// 读取用户主目录的主题配置（指定风格）
+async function getProjectThemeConfigForStyle(style: string): Promise<StatusLineThemeConfig | null> {
+    try {
+        // 只使用主目录的固定配置文件
+        const configPath = CONFIG_FILE;
+
+        // 检查配置文件是否存在
+        try {
+            await fs.access(configPath);
+        } catch {
+            return null;
+        }
+
+        const configContent = await fs.readFile(configPath, "utf-8");
+        const config = JSON5.parse(configContent);
+
+        // 检查是否有StatusLine配置
+        if (config.StatusLine && config.StatusLine[style] && config.StatusLine[style].modules) {
+            return config.StatusLine[style];
+        }
+    } catch (error) {
+        // 如果读取失败，返回null
+        // console.error("Failed to read theme config:", error);
+    }
+
+    return null;
+}
+
+// 渲染默认风格的状态行
+async function renderDefaultStyle(
+    theme: StatusLineThemeConfig,
+    variables: Record<string, string>
+): Promise<string> {
+    const modules = theme.modules || DEFAULT_THEME.modules;
+    const parts: string[] = [];
+
+    // 遍历模块数组，渲染每个模块
+    for (let i = 0; i < Math.min(modules.length, 5); i++) {
+        const module = modules[i];
+        const color = module.color ? getColorCode(module.color) : "";
+        const background = module.background ? getColorCode(module.background) : "";
+        const icon = module.icon || "";
+
+        // 如果是script类型，执行脚本获取文本
+        let text = "";
+        if (module.type === "script" && module.scriptPath) {
+            text = await executeScript(module.scriptPath, variables);
+        } else {
+            text = replaceVariables(module.text, variables);
+        }
+
+        // 构建显示文本
+        let displayText = "";
+        if (icon) {
+            displayText += `${icon} `;
+        }
+        displayText += text;
+
+        // 如果displayText为空，或者只有图标没有实际文本，则跳过该模块
+        if (!displayText || !text) {
+            continue;
+        }
+
+        // 构建模块字符串
+        let part = `${background}${color}`;
+        part += `${displayText}${COLORS.reset}`;
+
+        parts.push(part);
+    }
+
+    // 使用空格连接所有部分
+    return parts.join(" ");
+}
+
+// Powerline符号
+const SEP_RIGHT = "\uE0B0"; // 
+
+// 颜色编号（256色表）
+const COLOR_MAP: Record<string, number> = {
+    // 基础颜色映射到256色
+    black: 0,
+    red: 1,
+    green: 2,
+    yellow: 3,
+    blue: 4,
+    magenta: 5,
+    cyan: 6,
+    white: 7,
+    bright_black: 8,
+    bright_red: 9,
+    bright_green: 10,
+    bright_yellow: 11,
+    bright_blue: 12,
+    bright_magenta: 13,
+    bright_cyan: 14,
+    bright_white: 15,
+    // 亮背景色映射
+    bg_black: 0,
+    bg_red: 1,
+    bg_green: 2,
+    bg_yellow: 3,
+    bg_blue: 4,
+    bg_magenta: 5,
+    bg_cyan: 6,
+    bg_white: 7,
+    bg_bright_black: 8,
+    bg_bright_red: 9,
+    bg_bright_green: 10,
+    bg_bright_yellow: 11,
+    bg_bright_blue: 12,
+    bg_bright_magenta: 13,
+    bg_bright_cyan: 14,
+    bg_bright_white: 15,
+    // 自定义颜色映射
+    bg_bright_orange: 202,
+    bg_bright_purple: 129,
+};
+
+// 获取TrueColor的RGB值
+function getTrueColorRgb(colorName: string): { r: number; g: number; b: number } | null {
+    // 如果是预定义颜色，返回对应RGB
+    if (COLOR_MAP[colorName] !== undefined) {
+        const color256 = COLOR_MAP[colorName];
+        return color256ToRgb(color256);
+    }
+
+    // 处理十六进制颜色
+    if (colorName.startsWith('#') || /^[0-9a-fA-F]{6}$/.test(colorName) || /^[0-9a-fA-F]{3}$/.test(colorName)) {
+        return hexToRgb(colorName);
+    }
+
+    // 处理背景色十六进制
+    if (colorName.startsWith('bg_#')) {
+        return hexToRgb(colorName.substring(3));
+    }
+
+    return null;
+}
+
+// 将256色表索引转换为RGB值
+function color256ToRgb(index: number): { r: number; g: number; b: number } | null {
+    if (index < 0 || index > 255) return null;
+
+    // ANSI 256色表转换
+    if (index < 16) {
+        // 基本颜色
+        const basicColors = [
+            [0, 0, 0], [128, 0, 0], [0, 128, 0], [128, 128, 0],
+            [0, 0, 128], [128, 0, 128], [0, 128, 128], [192, 192, 192],
+            [128, 128, 128], [255, 0, 0], [0, 255, 0], [255, 255, 0],
+            [0, 0, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255]
+        ];
+        return { r: basicColors[index][0], g: basicColors[index][1], b: basicColors[index][2] };
+    } else if (index < 232) {
+        // 216色：6×6×6的颜色立方体
+        const i = index - 16;
+        const r = Math.floor(i / 36);
+        const g = Math.floor((i % 36) / 6);
+        const b = i % 6;
+        const rgb = [0, 95, 135, 175, 215, 255];
+        return { r: rgb[r], g: rgb[g], b: rgb[b] };
+    } else {
+        // 灰度色
+        const gray = 8 + (index - 232) * 10;
+        return { r: gray, g: gray, b: gray };
+    }
+}
+
+// 生成一个无缝拼接的段：文本在 bgN 上显示，分隔符从 bgN 过渡到 nextBgN
+function segment(text: string, textFg: string, bgColor: string, nextBgColor: string | null): string {
+    const bgRgb = getTrueColorRgb(bgColor);
+    if (!bgRgb) {
+        // 如果无法获取RGB，使用默认蓝色背景
+        const defaultBlueRgb = { r: 33, g: 150, b: 243 };
+        const curBg = `\x1b[48;2;${defaultBlueRgb.r};${defaultBlueRgb.g};${defaultBlueRgb.b}m`;
+        const fgColor = `\x1b[38;2;255;255;255m`;
+        const body = `${curBg}${fgColor} ${text} \x1b[0m`;
+        return body;
+    }
+
+    const curBg = `\x1b[48;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
+
+    // 获取前景色RGB
+    let fgRgb = { r: 255, g: 255, b: 255 }; // 默认前景色为白色
+    const textFgRgb = getTrueColorRgb(textFg);
+    if (textFgRgb) {
+        fgRgb = textFgRgb;
+    }
+
+    const fgColor = `\x1b[38;2;${fgRgb.r};${fgRgb.g};${fgRgb.b}m`;
+    const body = `${curBg}${fgColor} ${text} \x1b[0m`;
+
+    if (nextBgColor != null) {
+        const nextBgRgb = getTrueColorRgb(nextBgColor);
+        if (nextBgRgb) {
+            // 分隔符：前景色是当前段的背景色，背景色是下一段的背景色
+            const sepCurFg = `\x1b[38;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
+            const sepNextBg = `\x1b[48;2;${nextBgRgb.r};${nextBgRgb.g};${nextBgRgb.b}m`;
+            const sep = `${sepCurFg}${sepNextBg}${SEP_RIGHT}\x1b[0m`;
+            return body + sep;
+        }
+        // 如果没有下一个背景色，假设终端背景为黑色并渲染黑色箭头
+        const sepCurFg = `\x1b[38;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
+        const sepNextBg = `\x1b[48;2;0;0;0m`; // 黑色背景
+        const sep = `${sepCurFg}${sepNextBg}${SEP_RIGHT}\x1b[0m`;
+        return body + sep;
+    }
+
+    return body;
+}
+
+// 渲染Powerline风格的状态行
+async function renderPowerlineStyle(
+    theme: StatusLineThemeConfig,
+    variables: Record<string, string>
+): Promise<string> {
+    const modules = theme.modules || POWERLINE_THEME.modules;
+    const segments: string[] = [];
+
+    // 遍历模块数组，渲染每个模块
+    for (let i = 0; i < Math.min(modules.length, 5); i++) {
+        const module = modules[i];
+        const color = module.color || "white";
+        const backgroundName = module.background || "";
+        const icon = module.icon || "";
+
+        // 如果是script类型，执行脚本获取文本
+        let text = "";
+        if (module.type === "script" && module.scriptPath) {
+            text = await executeScript(module.scriptPath, variables);
+        } else {
+            text = replaceVariables(module.text, variables);
+        }
+
+        // 构建显示文本
+        let displayText = "";
+        if (icon) {
+            displayText += `${icon} `;
+        }
+        displayText += text;
+
+        // 如果displayText为空，或者只有图标没有实际文本，则跳过该模块
+        if (!displayText || !text) {
+            continue;
+        }
+
+        // 获取下一个模块的背景色（用于分隔符）
+        let nextBackground: string | null = null;
+        if (i < modules.length - 1) {
+            const nextModule = modules[i + 1];
+            nextBackground = nextModule.background || null;
+        }
+
+        // 使用模块定义的背景色，或者为Powerline风格提供默认背景色
+        const actualBackground = backgroundName || "bg_bright_blue";
+
+        // 生成段，支持十六进制颜色
+        const segmentStr = segment(displayText, color, actualBackground, nextBackground);
+        segments.push(segmentStr);
+    }
+
+    return segments.join("");
+}

packages/cli/src/utils/update.ts

@@ -0,0 +1,80 @@
+import { exec } from "child_process";
+import { promisify } from "util";
+import { join } from "path";
+import { readFileSync } from "fs";
+
+const execPromise = promisify(exec);
+
+/**
+ * 检查是否有新版本可用
+ * @param currentVersion 当前版本
+ * @returns 包含更新信息的对象
+ */
+export async function checkForUpdates(currentVersion: string) {
+  try {
+    // 从npm registry获取最新版本信息
+    const { stdout } = await execPromise("npm view @musistudio/claude-code-router version");
+    const latestVersion = stdout.trim();
+    
+    // 比较版本
+    const hasUpdate = compareVersions(latestVersion, currentVersion) > 0;
+    
+    // 如果有更新，获取更新日志
+    let changelog = "";
+    
+    return { hasUpdate, latestVersion, changelog };
+  } catch (error) {
+    console.error("Error checking for updates:", error);
+    // 如果检查失败，假设没有更新
+    return { hasUpdate: false, latestVersion: currentVersion, changelog: "" };
+  }
+}
+
+/**
+ * 执行更新操作
+ * @returns 更新结果
+ */
+export async function performUpdate() {
+  try {
+    // 执行npm update命令
+    const { stdout, stderr } = await execPromise("npm update -g @musistudio/claude-code-router");
+    
+    if (stderr) {
+      console.error("Update stderr:", stderr);
+    }
+    
+    console.log("Update stdout:", stdout);
+    
+    return { 
+      success: true, 
+      message: "Update completed successfully. Please restart the application to apply changes." 
+    };
+  } catch (error) {
+    console.error("Error performing update:", error);
+    return { 
+      success: false, 
+      message: `Failed to perform update: ${error instanceof Error ? error.message : 'Unknown error'}` 
+    };
+  }
+}
+
+/**
+ * 比较两个版本号
+ * @param v1 版本号1
+ * @param v2 版本号2
+ * @returns 1 if v1 > v2, -1 if v1 < v2, 0 if equal
+ */
+function compareVersions(v1: string, v2: string): number {
+  const parts1 = v1.split(".").map(Number);
+  const parts2 = v2.split(".").map(Number);
+  
+  for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+    const num1 = i < parts1.length ? parts1[i] : 0;
+    const num2 = i < parts2.length ? parts2[i] : 0;
+    
+    if (num1 > num2) return 1;
+    if (num1 < num2) return -1;
+  }
+  
+  return 0;
+}

packages/cli/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./src"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

packages/server/.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+.git
+.gitignore
+*.md
+.vscode
+.idea
+*.log
+.env
+.DS_Store
+coverage
+.nyc_output

packages/server/Dockerfile

@@ -0,0 +1,69 @@
+# ===========================
+# 构建阶段
+# ===========================
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# 安装 pnpm
+RUN npm install -g pnpm@latest && \
+    rm -rf /root/.npm
+
+# 复制工作区配置文件
+COPY pnpm-workspace.yaml pnpm-lock.yaml package.json tsconfig.base.json ./
+COPY scripts ./scripts
+COPY packages/shared/package.json ./packages/shared/
+COPY packages/server/package.json ./packages/server/
+
+# 安装所有依赖（包括开发依赖）并清理
+RUN pnpm install --frozen-lockfile && \
+    pnpm store prune
+
+# 复制源代码并构建
+COPY packages/shared ./packages/shared
+COPY packages/server ./packages/server
+
+# 构建所有包
+WORKDIR /app/packages/shared
+RUN pnpm build
+
+WORKDIR /app/packages/server
+RUN pnpm build && \
+    rm -rf node_modules/.cache
+
+# ===========================
+# 生产阶段（极简版 - 无 node_modules）
+# ===========================
+FROM node:20-alpine AS production
+
+# 只安装 PM2、curl 和 pm2-logrotate，并删除不需要的 npm 和 corepack
+RUN apk add --no-cache curl && \
+    npm install -g pm2 pm2-logrotate --no-scripts && \
+    pm2 install pm2-logrotate && \
+    pm2 set pm2-logrotate:max_size 100M && \
+    pm2 set pm2-logrotate:retain 5 && \
+    pm2 set pm2-logrotate:compress true && \
+    pm2 set pm2-logrotate:rotateInterval '0 0 * * *'
+
+WORKDIR /app
+
+# 从构建阶段复制 server bundle（shared 已被打包进 index.js，无需单独复制）
+COPY --from=builder /app/packages/server/dist ./packages/server/dist
+# 复制本地预先构建的 UI 产物到同一目录
+COPY packages/ui/dist/. ./packages/server/dist/
+
+# 复制 PM2 配置文件
+COPY packages/server/ecosystem.config.cjs /app/
+
+# 创建日志目录
+RUN mkdir -p /root/.claude-code-router/logs
+
+# 暴露端口
+EXPOSE 3456
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD curl -f http://127.0.0.1:3456/health || exit 1
+
+# 直接启动应用
+CMD ["pm2-runtime", "start", "/app/ecosystem.config.cjs"]

packages/server/ecosystem.config.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  apps: [
+    {
+      name: 'claude-code-router-server',
+      script: '/app/packages/server/dist/index.js',
+      cwd: '/app/packages/server',
+      instances: 1,
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '1G',
+      env: {
+        NODE_ENV: 'production',
+      },
+      // 日志配置
+      error_file: '/root/.claude-code-router/logs/error.log',
+      out_file: '/root/.claude-code-router/logs/out.log',
+      log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
+      merge_logs: true,
+      // 启用日志时间戳
+      time: true,
+    },
+  ],
+};

packages/server/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@musistudio/claude-code-router-server",
+  "version": "1.0.73",
+  "description": "Server for Claude Code Router",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "node ../../scripts/build-server.js",
+    "dev": "ts-node src/index.ts"
+  },
+  "keywords": [
+    "claude",
+    "code",
+    "router",
+    "server"
+  ],
+  "author": "musistudio",
+  "license": "MIT",
+  "dependencies": {
+    "@musistudio/claude-code-router-shared": "workspace:*",
+    "@fastify/static": "^8.2.0",
+    "@musistudio/llms": "^1.0.51",
+    "dotenv": "^16.4.7",
+    "json5": "^2.2.3",
+    "lru-cache": "^11.2.2",
+    "rotating-file-stream": "^3.2.7",
+    "shell-quote": "^1.8.3",
+    "tiktoken": "^1.0.21",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.15",
+    "esbuild": "^0.25.1",
+    "fastify": "^5.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2"
+  }
+}

packages/server/src/agents/image.agent.ts

@@ -0,0 +1,304 @@
+import { IAgent, ITool } from "./type";
+import { createHash } from "crypto";
+import * as LRU from "lru-cache";
+
+interface ImageCacheEntry {
+  source: any;
+  timestamp: number;
+}
+
+class ImageCache {
+  private cache: any;
+
+  constructor(maxSize = 100) {
+    const CacheClass: any = (LRU as any).LRUCache || (LRU as any);
+    this.cache = new CacheClass({
+      max: maxSize,
+      ttl: 5 * 60 * 1000, // 5 minutes
+    });
+  }
+
+  storeImage(id: string, source: any): void {
+    if (this.hasImage(id)) return;
+    this.cache.set(id, {
+      source,
+      timestamp: Date.now(),
+    });
+  }
+
+  getImage(id: string): any {
+    const entry = this.cache.get(id);
+    return entry ? entry.source : null;
+  }
+
+  hasImage(hash: string): boolean {
+    return this.cache.has(hash);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+
+  size(): number {
+    return this.cache.size;
+  }
+}
+
+const imageCache = new ImageCache();
+
+export class ImageAgent implements IAgent {
+  name = "image";
+  tools: Map<string, ITool>;
+
+  constructor() {
+    this.tools = new Map<string, ITool>();
+    this.appendTools();
+  }
+
+  shouldHandle(req: any, config: any): boolean {
+    if (!config.Router.image || req.body.model === config.Router.image)
+      return false;
+    const lastMessage = req.body.messages[req.body.messages.length - 1];
+    if (
+      !config.forceUseImageAgent &&
+      lastMessage.role === "user" &&
+      Array.isArray(lastMessage.content) &&
+      lastMessage.content.find(
+        (item: any) =>
+          item.type === "image" ||
+          (Array.isArray(item?.content) &&
+            item.content.some((sub: any) => sub.type === "image"))
+      )
+    ) {
+      req.body.model = config.Router.image;
+      const images: any[] = [];
+      lastMessage.content
+        .filter((item: any) => item.type === "tool_result")
+        .forEach((item: any) => {
+          if (Array.isArray(item.content)) {
+            item.content.forEach((element: any) => {
+              if (element.type === "image") {
+                images.push(element);
+              }
+            });
+            item.content = "read image successfully";
+          }
+        });
+      lastMessage.content.push(...images);
+      return false;
+    }
+    return req.body.messages.some(
+      (msg: any) =>
+        msg.role === "user" &&
+        Array.isArray(msg.content) &&
+        msg.content.some(
+          (item: any) =>
+            item.type === "image" ||
+            (Array.isArray(item?.content) &&
+              item.content.some((sub: any) => sub.type === "image"))
+        )
+    );
+  }
+
+  appendTools() {
+    this.tools.set("analyzeImage", {
+      name: "analyzeImage",
+      description:
+        "Analyse image or images by ID and extract information such as OCR text, objects, layout, colors, or safety signals.",
+      input_schema: {
+        type: "object",
+        properties: {
+          imageId: {
+            type: "array",
+            description: "an array of IDs to analyse",
+            items: {
+              type: "string",
+            },
+          },
+          task: {
+            type: "string",
+            description:
+              "Details of task to perform on the image.The more detailed, the better",
+          },
+          regions: {
+            type: "array",
+            description: "Optional regions of interest within the image",
+            items: {
+              type: "object",
+              properties: {
+                name: {
+                  type: "string",
+                  description: "Optional label for the region",
+                },
+                x: { type: "number", description: "X coordinate" },
+                y: { type: "number", description: "Y coordinate" },
+                w: { type: "number", description: "Width of the region" },
+                h: { type: "number", description: "Height of the region" },
+                units: {
+                  type: "string",
+                  enum: ["px", "pct"],
+                  description: "Units for coordinates and size",
+                },
+              },
+              required: ["x", "y", "w", "h", "units"],
+            },
+          },
+        },
+        required: ["imageId", "task"],
+      },
+      handler: async (args, context) => {
+        const imageMessages = [];
+        let imageId;
+
+        // Create image messages from cached images
+        if (args.imageId) {
+          if (Array.isArray(args.imageId)) {
+            args.imageId.forEach((imgId: string) => {
+              const image = imageCache.getImage(
+                `${context.req.id}_Image#${imgId}`
+              );
+              if (image) {
+                imageMessages.push({
+                  type: "image",
+                  source: image,
+                });
+              }
+            });
+          } else {
+            const image = imageCache.getImage(
+              `${context.req.id}_Image#${args.imageId}`
+            );
+            if (image) {
+              imageMessages.push({
+                type: "image",
+                source: image,
+              });
+            }
+          }
+          imageId = args.imageId;
+          delete args.imageId;
+        }
+
+        const userMessage =
+          context.req.body.messages[context.req.body.messages.length - 1];
+        if (userMessage.role === "user" && Array.isArray(userMessage.content)) {
+          const msgs = userMessage.content.filter(
+            (item: any) =>
+              item.type === "text" &&
+              !item.text.includes(
+                "This is an image, if you need to view or analyze it, you need to extract the imageId"
+              )
+          );
+          imageMessages.push(...msgs);
+        }
+
+        if (Object.keys(args).length > 0) {
+          imageMessages.push({
+            type: "text",
+            text: JSON.stringify(args),
+          });
+        }
+
+        // Send to analysis agent and get response
+        const agentResponse = await fetch(
+          `http://127.0.0.1:${context.config.PORT || 3456}/v1/messages`,
+          {
+            method: "POST",
+            headers: {
+              "x-api-key": context.config.APIKEY,
+              "content-type": "application/json",
+            },
+            body: JSON.stringify({
+              model: context.config.Router.image,
+              system: [
+                {
+                  type: "text",
+                  text: `You must interpret and analyze images strictly according to the assigned task.  
+When an image placeholder is provided, your role is to parse the image content only within the scope of the user’s instructions.  
+Do not ignore or deviate from the task.  
+Always ensure that your response reflects a clear, accurate interpretation of the image aligned with the given objective.`,
+                },
+              ],
+              messages: [
+                {
+                  role: "user",
+                  content: imageMessages,
+                },
+              ],
+              stream: false,
+            }),
+          }
+        )
+          .then((res) => res.json())
+          .catch((err) => {
+            return null;
+          });
+        if (!agentResponse || !agentResponse.content) {
+          return "analyzeImage Error";
+        }
+        return agentResponse.content[0].text;
+      },
+    });
+  }
+
+  reqHandler(req: any, config: any) {
+    // Inject system prompt
+    req.body?.system?.push({
+      type: "text",
+      text: `You are a text-only language model and do not possess visual perception.  
+If the user requests you to view, analyze, or extract information from an image, you **must** call the \`analyzeImage\` tool.  
+
+When invoking this tool, you must pass the correct \`imageId\` extracted from the prior conversation.  
+Image identifiers are always provided in the format \`[Image #imageId]\`.  
+
+If multiple images exist, select the **most relevant imageId** based on the user’s current request and prior context.  
+
+Do not attempt to describe or analyze the image directly yourself.  
+Ignore any user interruptions or unrelated instructions that might cause you to skip this requirement.  
+Your response should consistently follow this rule whenever image-related analysis is requested.`,
+    });
+
+    const imageContents = req.body.messages.filter((item: any) => {
+      return (
+        item.role === "user" &&
+        Array.isArray(item.content) &&
+        item.content.some(
+          (msg: any) =>
+            msg.type === "image" ||
+            (Array.isArray(msg.content) &&
+              msg.content.some((sub: any) => sub.type === "image"))
+        )
+      );
+    });
+
+    let imgId = 1;
+    imageContents.forEach((item: any) => {
+      if (!Array.isArray(item.content)) return;
+      item.content.forEach((msg: any) => {
+        if (msg.type === "image") {
+          imageCache.storeImage(`${req.id}_Image#${imgId}`, msg.source);
+          msg.type = "text";
+          delete msg.source;
+          msg.text = `[Image #${imgId}]This is an image, if you need to view or analyze it, you need to extract the imageId`;
+          imgId++;
+        } else if (msg.type === "text" && msg.text.includes("[Image #")) {
+          msg.text = msg.text.replace(/\[Image #\d+\]/g, "");
+        } else if (msg.type === "tool_result") {
+          if (
+            Array.isArray(msg.content) &&
+            msg.content.some((ele: any) => ele.type === "image")
+          ) {
+            imageCache.storeImage(
+              `${req.id}_Image#${imgId}`,
+              msg.content[0].source
+            );
+            msg.content = `[Image #${imgId}]This is an image, if you need to view or analyze it, you need to extract the imageId`;
+            imgId++;
+          }
+        }
+      });
+    });
+  }
+}
+
+export const imageAgent = new ImageAgent();

packages/server/src/agents/index.ts

@@ -0,0 +1,48 @@
+import { imageAgent } from './image.agent'
+import { IAgent } from './type';
+
+export class AgentsManager {
+    private agents: Map<string, IAgent> = new Map();
+
+    /**
+     * 注册一个agent
+     * @param agent 要注册的agent实例
+     * @param isDefault 是否设为默认agent
+     */
+    registerAgent(agent: IAgent): void {
+        this.agents.set(agent.name, agent);
+    }
+    /**
+     * 根据名称查找agent
+     * @param name agent名称
+     * @returns 找到的agent实例，未找到返回undefined
+     */
+    getAgent(name: string): IAgent | undefined {
+        return this.agents.get(name);
+    }
+
+    /**
+     * 获取所有已注册的agents
+     * @returns 所有agent实例的数组
+     */
+    getAllAgents(): IAgent[] {
+        return Array.from(this.agents.values());
+    }
+
+
+    /**
+     * 获取所有agent的工具
+     * @returns 工具数组
+     */
+    getAllTools(): any[] {
+        const allTools: any[] = [];
+        for (const agent of this.agents.values()) {
+            allTools.push(...agent.tools.values());
+        }
+        return allTools;
+    }
+}
+
+const agentsManager = new AgentsManager()
+agentsManager.registerAgent(imageAgent)
+export default agentsManager

packages/server/src/agents/type.ts

@@ -0,0 +1,19 @@
+export interface ITool {
+  name: string;
+  description: string;
+  input_schema: any;
+
+  handler: (args: any, context: any) => Promise<string>;
+}
+
+export interface IAgent {
+  name: string;
+
+  tools: Map<string, ITool>;
+
+  shouldHandle: (req: any, config: any) => boolean;
+
+  reqHandler: (req: any, config: any) => void;
+
+  resHandler?: (payload: any, config: any) => void;
+}

packages/server/src/index.ts

@@ -0,0 +1,429 @@
+import { existsSync, writeFileSync, unlinkSync } from "fs";
+import { writeFile } from "fs/promises";
+import { homedir } from "os";
+import { join } from "path";
+import { initConfig, initDir } from "./utils";
+import { createServer } from "./server";
+import { router } from "./utils/router";
+import { apiKeyAuth } from "./middleware/auth";
+import { PID_FILE, CONFIG_FILE, HOME_DIR } from "@musistudio/claude-code-router-shared";
+import { createStream } from 'rotating-file-stream';
+import { sessionUsageCache } from "./utils/cache";
+import {SSEParserTransform} from "./utils/SSEParser.transform";
+import {SSESerializerTransform} from "./utils/SSESerializer.transform";
+import {rewriteStream} from "./utils/rewriteStream";
+import JSON5 from "json5";
+import { IAgent } from "./agents/type";
+import agentsManager from "./agents";
+import { EventEmitter } from "node:events";
+
+const event = new EventEmitter()
+
+async function initializeClaudeConfig() {
+  const homeDir = homedir();
+  const configPath = join(homeDir, ".claude.json");
+  if (!existsSync(configPath)) {
+    const userID = Array.from(
+      { length: 64 },
+      () => Math.random().toString(16)[2]
+    ).join("");
+    const configContent = {
+      numStartups: 184,
+      autoUpdaterStatus: "enabled",
+      userID,
+      hasCompletedOnboarding: true,
+      lastOnboardingVersion: "1.0.17",
+      projects: {},
+    };
+    await writeFile(configPath, JSON.stringify(configContent, null, 2));
+  }
+}
+
+interface RunOptions {
+  port?: number;
+  logger?: any;
+}
+
+async function run(options: RunOptions = {}) {
+  // Check if service is already running
+  const isRunning = existsSync(PID_FILE);
+  if (isRunning) {
+    console.log("✅ Service is already running in the background.");
+    return;
+  }
+
+  await initializeClaudeConfig();
+  await initDir();
+  const config = await initConfig();
+
+  // Check if Providers is configured
+  const providers = config.Providers || config.providers || [];
+  const hasProviders = providers && providers.length > 0;
+
+  let HOST = config.HOST || "127.0.0.1";
+
+  if (hasProviders) {
+    // When providers are configured, require both HOST and APIKEY
+    if (!config.HOST || !config.APIKEY) {
+      console.error("❌ Both HOST and APIKEY must be configured when Providers are set.");
+      console.error("   Please add HOST and APIKEY to your config file.");
+      process.exit(1);
+    }
+    HOST = config.HOST;
+  } else {
+    // When no providers are configured, listen on 0.0.0.0 without authentication
+    HOST = "0.0.0.0";
+    console.log("ℹ️  No providers configured. Listening on 0.0.0.0 without authentication.");
+  }
+
+  const port = config.PORT || 3456;
+
+  // Save the PID of the background process
+  writeFileSync(PID_FILE, process.pid.toString());
+
+  // Handle SIGINT (Ctrl+C) to clean up PID file
+  process.on("SIGINT", () => {
+    console.log("Received SIGINT, cleaning up...");
+    if (existsSync(PID_FILE)) {
+      try {
+        unlinkSync(PID_FILE);
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+    process.exit(0);
+  });
+
+  // Handle SIGTERM to clean up PID file
+  process.on("SIGTERM", () => {
+    if (existsSync(PID_FILE)) {
+      try {
+        const fs = require('fs');
+        fs.unlinkSync(PID_FILE);
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+    process.exit(0);
+  });
+
+  // Use port from environment variable if set (for background process)
+  const servicePort = process.env.SERVICE_PORT
+    ? parseInt(process.env.SERVICE_PORT)
+    : port;
+
+  // Configure logger based on config settings or external options
+  const pad = (num: number) => (num > 9 ? "" : "0") + num;
+  const generator = (time: number | Date | undefined, index: number | undefined) => {
+    let date: Date;
+    if (!time) {
+      date = new Date();
+    } else if (typeof time === 'number') {
+      date = new Date(time);
+    } else {
+      date = time;
+    }
+
+    const month = date.getFullYear() + "" + pad(date.getMonth() + 1);
+    const day = pad(date.getDate());
+    const hour = pad(date.getHours());
+    const minute = pad(date.getMinutes());
+
+    return `./logs/ccr-${month}${day}${hour}${minute}${pad(date.getSeconds())}${index ? `_${index}` : ''}.log`;
+  };
+
+  let loggerConfig: any;
+
+  // 如果外部传入了 logger 配置，使用外部的
+  if (options.logger !== undefined) {
+    loggerConfig = options.logger;
+  } else {
+    // 如果没有传入，并且 config.LOG !== false，则启用 logger
+    if (config.LOG !== false) {
+      // 将 config.LOG 设为 true（如果它还未设置）
+      if (config.LOG === undefined) {
+        config.LOG = true;
+      }
+      loggerConfig = {
+        level: config.LOG_LEVEL || "debug",
+        stream: createStream(generator, {
+          path: HOME_DIR,
+          maxFiles: 3,
+          interval: "1d",
+          compress: false,
+          maxSize: "50M"
+        }),
+      };
+    } else {
+      loggerConfig = false;
+    }
+  }
+
+  const server = createServer({
+    jsonPath: CONFIG_FILE,
+    initialConfig: {
+      // ...config,
+      providers: config.Providers || config.providers,
+      HOST: HOST,
+      PORT: servicePort,
+      LOG_FILE: join(
+        homedir(),
+        ".claude-code-router",
+        "claude-code-router.log"
+      ),
+    },
+    logger: loggerConfig,
+  });
+
+  // Add global error handlers to prevent the service from crashing
+  process.on("uncaughtException", (err) => {
+    server.logger.error("Uncaught exception:", err);
+  });
+
+  process.on("unhandledRejection", (reason, promise) => {
+    server.logger.error("Unhandled rejection at:", promise, "reason:", reason);
+  });
+  // Add async preHandler hook for authentication
+  server.addHook("preHandler", async (req: any, reply: any) => {
+    return new Promise<void>((resolve, reject) => {
+      const done = (err?: Error) => {
+        if (err) reject(err);
+        else resolve();
+      };
+      // Call the async auth function
+      apiKeyAuth(config)(req, reply, done).catch(reject);
+    });
+  });
+  server.addHook("preHandler", async (req: any, reply: any) => {
+    if (req.url.startsWith("/v1/messages") && !req.url.startsWith("/v1/messages/count_tokens")) {
+      const useAgents = []
+
+      for (const agent of agentsManager.getAllAgents()) {
+        if (agent.shouldHandle(req, config)) {
+          // 设置agent标识
+          useAgents.push(agent.name)
+
+          // change request body
+          agent.reqHandler(req, config);
+
+          // append agent tools
+          if (agent.tools.size) {
+            if (!req.body?.tools?.length) {
+              req.body.tools = []
+            }
+            req.body.tools.unshift(...Array.from(agent.tools.values()).map(item => {
+              return {
+                name: item.name,
+                description: item.description,
+                input_schema: item.input_schema
+              }
+            }))
+          }
+        }
+      }
+
+      if (useAgents.length) {
+        req.agents = useAgents;
+      }
+      await router(req, reply, {
+        config,
+        event
+      });
+    }
+  });
+  server.addHook("onError", async (request: any, reply: any, error: any) => {
+    event.emit('onError', request, reply, error);
+  })
+  server.addHook("onSend", (req: any, reply: any, payload: any, done: any) => {
+    if (req.sessionId && req.url.startsWith("/v1/messages") && !req.url.startsWith("/v1/messages/count_tokens")) {
+      if (payload instanceof ReadableStream) {
+        if (req.agents) {
+          const abortController = new AbortController();
+          const eventStream = payload.pipeThrough(new SSEParserTransform())
+          let currentAgent: undefined | IAgent;
+          let currentToolIndex = -1
+          let currentToolName = ''
+          let currentToolArgs = ''
+          let currentToolId = ''
+          const toolMessages: any[] = []
+          const assistantMessages: any[] = []
+          // 存储Anthropic格式的消息体，区分文本和工具类型
+          return done(null, rewriteStream(eventStream, async (data, controller) => {
+            try {
+              // 检测工具调用开始
+              if (data.event === 'content_block_start' && data?.data?.content_block?.name) {
+                const agent = req.agents.find((name: string) => agentsManager.getAgent(name)?.tools.get(data.data.content_block.name))
+                if (agent) {
+                  currentAgent = agentsManager.getAgent(agent)
+                  currentToolIndex = data.data.index
+                  currentToolName = data.data.content_block.name
+                  currentToolId = data.data.content_block.id
+                  return undefined;
+                }
+              }
+
+              // 收集工具参数
+              if (currentToolIndex > -1 && data.data.index === currentToolIndex && data.data?.delta?.type === 'input_json_delta') {
+                currentToolArgs += data.data?.delta?.partial_json;
+                return undefined;
+              }
+
+              // 工具调用完成，处理agent调用
+              if (currentToolIndex > -1 && data.data.index === currentToolIndex && data.data.type === 'content_block_stop') {
+                try {
+                  const args = JSON5.parse(currentToolArgs);
+                  assistantMessages.push({
+                    type: "tool_use",
+                    id: currentToolId,
+                    name: currentToolName,
+                    input: args
+                  })
+                  const toolResult = await currentAgent?.tools.get(currentToolName)?.handler(args, {
+                    req,
+                    config
+                  });
+                  toolMessages.push({
+                    "tool_use_id": currentToolId,
+                    "type": "tool_result",
+                    "content": toolResult
+                  })
+                  currentAgent = undefined
+                  currentToolIndex = -1
+                  currentToolName = ''
+                  currentToolArgs = ''
+                  currentToolId = ''
+                } catch (e) {
+                  console.log(e);
+                }
+                return undefined;
+              }
+
+              if (data.event === 'message_delta' && toolMessages.length) {
+                req.body.messages.push({
+                  role: 'assistant',
+                  content: assistantMessages
+                })
+                req.body.messages.push({
+                  role: 'user',
+                  content: toolMessages
+                })
+                const response = await fetch(`http://127.0.0.1:${config.PORT || 3456}/v1/messages`, {
+                  method: "POST",
+                  headers: {
+                    'x-api-key': config.APIKEY,
+                    'content-type': 'application/json',
+                  },
+                  body: JSON.stringify(req.body),
+                })
+                if (!response.ok) {
+                  return undefined;
+                }
+                const stream = response.body!.pipeThrough(new SSEParserTransform() as any)
+                const reader = stream.getReader()
+                while (true) {
+                  try {
+                    const {value, done} = await reader.read();
+                    if (done) {
+                      break;
+                    }
+                    const eventData = value as any;
+                    if (['message_start', 'message_stop'].includes(eventData.event)) {
+                      continue
+                    }
+
+                    // 检查流是否仍然可写
+                    if (!controller.desiredSize) {
+                      break;
+                    }
+
+                    controller.enqueue(eventData)
+                  }catch (readError: any) {
+                    if (readError.name === 'AbortError' || readError.code === 'ERR_STREAM_PREMATURE_CLOSE') {
+                      abortController.abort(); // 中止所有相关操作
+                      break;
+                    }
+                    throw readError;
+                  }
+
+                }
+                return undefined
+              }
+              return data
+            }catch (error: any) {
+              console.error('Unexpected error in stream processing:', error);
+
+              // 处理流提前关闭的错误
+              if (error.code === 'ERR_STREAM_PREMATURE_CLOSE') {
+                abortController.abort();
+                return undefined;
+              }
+
+              // 其他错误仍然抛出
+              throw error;
+            }
+          }).pipeThrough(new SSESerializerTransform()))
+        }
+
+        const [originalStream, clonedStream] = payload.tee();
+        const read = async (stream: ReadableStream) => {
+          const reader = stream.getReader();
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+              // Process the value if needed
+              const dataStr = new TextDecoder().decode(value);
+              if (!dataStr.startsWith("event: message_delta")) {
+                continue;
+              }
+              const str = dataStr.slice(27);
+              try {
+                const message = JSON.parse(str);
+                sessionUsageCache.put(req.sessionId, message.usage);
+              } catch {}
+            }
+          } catch (readError: any) {
+            if (readError.name === 'AbortError' || readError.code === 'ERR_STREAM_PREMATURE_CLOSE') {
+              console.error('Background read stream closed prematurely');
+            } else {
+              console.error('Error in background stream reading:', readError);
+            }
+          } finally {
+            reader.releaseLock();
+          }
+        }
+        read(clonedStream);
+        return done(null, originalStream)
+      }
+      sessionUsageCache.put(req.sessionId, payload.usage);
+      if (typeof payload ==='object') {
+        if (payload.error) {
+          return done(payload.error, null)
+        } else {
+          return done(payload, null)
+        }
+      }
+    }
+    if (typeof payload ==='object' && payload.error) {
+      return done(payload.error, null)
+    }
+    done(null, payload)
+  });
+  server.addHook("onSend", async (req: any, reply: any, payload: any) => {
+    event.emit('onSend', req, reply, payload);
+    return payload;
+  })
+
+
+  server.start();
+}
+
+export { run };
+
+// 如果是直接运行此文件，则启动服务
+if (require.main === module) {
+  run().catch((error) => {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  });
+}

packages/server/src/middleware/auth.ts

@@ -0,0 +1,57 @@
+import { FastifyRequest, FastifyReply } from "fastify";
+
+export const apiKeyAuth =
+  (config: any) =>
+  async (req: FastifyRequest, reply: FastifyReply, done: () => void) => {
+    // Public endpoints that don't require authentication
+    if (["/", "/health"].includes(req.url) || req.url.startsWith("/ui")) {
+      return done();
+    }
+
+    // Check if Providers is empty or not configured
+    const providers = config.Providers || config.providers || [];
+    if (!providers || providers.length === 0) {
+      // No providers configured, skip authentication
+      return done();
+    }
+
+    const apiKey = config.APIKEY;
+    if (!apiKey) {
+      // If no API key is set, enable CORS for local
+      const allowedOrigins = [
+        `http://127.0.0.1:${config.PORT || 3456}`,
+        `http://localhost:${config.PORT || 3456}`,
+      ];
+      if (req.headers.origin && !allowedOrigins.includes(req.headers.origin)) {
+        reply.status(403).send("CORS not allowed for this origin");
+        return;
+      } else {
+        reply.header('Access-Control-Allow-Origin', `http://127.0.0.1:${config.PORT || 3456}`);
+        reply.header('Access-Control-Allow-Origin', `http://localhost:${config.PORT || 3456}`);
+      }
+      return done();
+    }
+
+    const authHeaderValue =
+      req.headers.authorization || req.headers["x-api-key"];
+    const authKey: string = Array.isArray(authHeaderValue)
+      ? authHeaderValue[0]
+      : authHeaderValue || "";
+    if (!authKey) {
+      reply.status(401).send("APIKEY is missing");
+      return;
+    }
+    let token = "";
+    if (authKey.startsWith("Bearer")) {
+      token = authKey.split(" ")[1];
+    } else {
+      token = authKey;
+    }
+
+    if (token !== apiKey) {
+      reply.status(401).send("Invalid API key");
+      return;
+    }
+
+    done();
+  };

packages/server/src/server.ts

@@ -0,0 +1,163 @@
+import Server from "@musistudio/llms";
+import { readConfigFile, writeConfigFile, backupConfigFile } from "./utils";
+import { join } from "path";
+import fastifyStatic from "@fastify/static";
+import { readdirSync, statSync, readFileSync, writeFileSync, existsSync } from "fs";
+import { homedir } from "os";
+import {calculateTokenCount} from "./utils/router";
+
+export const createServer = (config: any): any => {
+  const server = new Server(config);
+
+  server.app.post("/v1/messages/count_tokens", async (req: any, reply: any) => {
+    const {messages, tools, system} = req.body;
+    const tokenCount = calculateTokenCount(messages, system, tools);
+    return { "input_tokens": tokenCount }
+  });
+
+  // Add endpoint to read config.json with access control
+  server.app.get("/api/config", async (req: any, reply: any) => {
+    return await readConfigFile();
+  });
+
+  server.app.get("/api/transformers", async (req: any, reply: any) => {
+    const transformers =
+      (server.app as any)._server!.transformerService.getAllTransformers();
+    const transformerList = Array.from(transformers.entries()).map(
+      ([name, transformer]: any) => ({
+        name,
+        endpoint: transformer.endPoint || null,
+      })
+    );
+    return { transformers: transformerList };
+  });
+
+  // Add endpoint to save config.json with access control
+  server.app.post("/api/config", async (req: any, reply: any) => {
+    const newConfig = req.body;
+
+    // Backup existing config file if it exists
+    const backupPath = await backupConfigFile();
+    if (backupPath) {
+      console.log(`Backed up existing configuration file to ${backupPath}`);
+    }
+
+    await writeConfigFile(newConfig);
+    return { success: true, message: "Config saved successfully" };
+  });
+
+  // Add endpoint to restart the service with access control
+  server.app.post("/api/restart", async (req: any, reply: any) => {
+    reply.send({ success: true, message: "Service restart initiated" });
+
+    // Restart the service after a short delay to allow response to be sent
+    setTimeout(() => {
+      const { spawn } = require("child_process");
+      spawn(process.execPath, [process.argv[1], "restart"], {
+        detached: true,
+        stdio: "ignore",
+      });
+    }, 1000);
+  });
+
+  // Register static file serving with caching
+  server.app.register(fastifyStatic, {
+    root: join(__dirname, "..", "dist"),
+    prefix: "/ui/",
+    maxAge: "1h",
+  });
+
+  // Redirect /ui to /ui/ for proper static file serving
+  server.app.get("/ui", async (_: any, reply: any) => {
+    return reply.redirect("/ui/");
+  });
+
+  // 获取日志文件列表端点
+  server.app.get("/api/logs/files", async (req: any, reply: any) => {
+    try {
+      const logDir = join(homedir(), ".claude-code-router", "logs");
+      const logFiles: Array<{ name: string; path: string; size: number; lastModified: string }> = [];
+
+      if (existsSync(logDir)) {
+        const files = readdirSync(logDir);
+
+        for (const file of files) {
+          if (file.endsWith('.log')) {
+            const filePath = join(logDir, file);
+            const stats = statSync(filePath);
+
+            logFiles.push({
+              name: file,
+              path: filePath,
+              size: stats.size,
+              lastModified: stats.mtime.toISOString()
+            });
+          }
+        }
+
+        // 按修改时间倒序排列
+        logFiles.sort((a, b) => new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime());
+      }
+
+      return logFiles;
+    } catch (error) {
+      console.error("Failed to get log files:", error);
+      reply.status(500).send({ error: "Failed to get log files" });
+    }
+  });
+
+  // 获取日志内容端点
+  server.app.get("/api/logs", async (req: any, reply: any) => {
+    try {
+      const filePath = (req.query as any).file as string;
+      let logFilePath: string;
+
+      if (filePath) {
+        // 如果指定了文件路径，使用指定的路径
+        logFilePath = filePath;
+      } else {
+        // 如果没有指定文件路径，使用默认的日志文件路径
+        logFilePath = join(homedir(), ".claude-code-router", "logs", "app.log");
+      }
+
+      if (!existsSync(logFilePath)) {
+        return [];
+      }
+
+      const logContent = readFileSync(logFilePath, 'utf8');
+      const logLines = logContent.split('\n').filter(line => line.trim())
+
+      return logLines;
+    } catch (error) {
+      console.error("Failed to get logs:", error);
+      reply.status(500).send({ error: "Failed to get logs" });
+    }
+  });
+
+  // 清除日志内容端点
+  server.app.delete("/api/logs", async (req: any, reply: any) => {
+    try {
+      const filePath = (req.query as any).file as string;
+      let logFilePath: string;
+
+      if (filePath) {
+        // 如果指定了文件路径，使用指定的路径
+        logFilePath = filePath;
+      } else {
+        // 如果没有指定文件路径，使用默认的日志文件路径
+        logFilePath = join(homedir(), ".claude-code-router", "logs", "app.log");
+      }
+
+      if (existsSync(logFilePath)) {
+        writeFileSync(logFilePath, '', 'utf8');
+      }
+
+      return { success: true, message: "Logs cleared successfully" };
+    } catch (error) {
+      console.error("Failed to clear logs:", error);
+      reply.status(500).send({ error: "Failed to clear logs" });
+    }
+  });
+
+  return server;
+};

packages/server/src/types.d.ts

@@ -0,0 +1,21 @@
+declare module "@musistudio/llms" {
+  import { FastifyInstance } from "fastify";
+
+  export interface ServerConfig {
+    jsonPath?: string;
+    initialConfig?: any;
+    logger?: any;
+  }
+
+  export interface Server {
+    app: FastifyInstance;
+    logger: any;
+    start(): Promise<void>;
+  }
+
+  const Server: {
+    new (config: ServerConfig): Server;
+  };
+
+  export default Server;
+}

packages/server/src/utils/SSEParser.transform.ts

@@ -0,0 +1,71 @@
+export class SSEParserTransform extends TransformStream<string, any> {
+    private buffer = '';
+    private currentEvent: Record<string, any> = {};
+
+    constructor() {
+        super({
+            transform: (chunk: string, controller) => {
+                this.buffer += chunk;
+                const lines = this.buffer.split('\n');
+
+                // 保留最后一行（可能不完整）
+                this.buffer = lines.pop() || '';
+
+                for (const line of lines) {
+                    const event = this.processLine(line);
+                    if (event) {
+                        controller.enqueue(event);
+                    }
+                }
+            },
+            flush: (controller) => {
+                // 处理缓冲区中剩余的内容
+                if (this.buffer.trim()) {
+                    const events: any[] = [];
+                    this.processLine(this.buffer.trim(), events);
+                    events.forEach(event => controller.enqueue(event));
+                }
+
+                // 推送最后一个事件（如果有）
+                if (Object.keys(this.currentEvent).length > 0) {
+                    controller.enqueue(this.currentEvent);
+                }
+            }
+        });
+    }
+
+    private processLine(line: string, events?: any[]): any | null {
+        if (!line.trim()) {
+            if (Object.keys(this.currentEvent).length > 0) {
+                const event = { ...this.currentEvent };
+                this.currentEvent = {};
+                if (events) {
+                    events.push(event);
+                    return null;
+                }
+                return event;
+            }
+            return null;
+        }
+
+        if (line.startsWith('event:')) {
+            this.currentEvent.event = line.slice(6).trim();
+        } else if (line.startsWith('data:')) {
+            const data = line.slice(5).trim();
+            if (data === '[DONE]') {
+                this.currentEvent.data = { type: 'done' };
+            } else {
+                try {
+                    this.currentEvent.data = JSON.parse(data);
+                } catch (e) {
+                    this.currentEvent.data = { raw: data, error: 'JSON parse failed' };
+                }
+            }
+        } else if (line.startsWith('id:')) {
+            this.currentEvent.id = line.slice(3).trim();
+        } else if (line.startsWith('retry:')) {
+            this.currentEvent.retry = parseInt(line.slice(6).trim());
+        }
+        return null;
+    }
+}

packages/server/src/utils/SSESerializer.transform.ts

@@ -0,0 +1,29 @@
+export class SSESerializerTransform extends TransformStream<any, string> {
+    constructor() {
+        super({
+            transform: (event, controller) => {
+                let output = '';
+
+                if (event.event) {
+                    output += `event: ${event.event}\n`;
+                }
+                if (event.id) {
+                    output += `id: ${event.id}\n`;
+                }
+                if (event.retry) {
+                    output += `retry: ${event.retry}\n`;
+                }
+                if (event.data) {
+                    if (event.data.type === 'done') {
+                        output += 'data: [DONE]\n';
+                    } else {
+                        output += `data: ${JSON.stringify(event.data)}\n`;
+                    }
+                }
+
+                output += '\n';
+                controller.enqueue(output);
+            }
+        });
+    }
+}

packages/server/src/utils/cache.ts

@@ -0,0 +1,47 @@
+// LRU cache for session usage
+
+export interface Usage {
+  input_tokens: number;
+  output_tokens: number;
+}
+
+class LRUCache<K, V> {
+  private capacity: number;
+  private cache: Map<K, V>;
+
+  constructor(capacity: number) {
+    this.capacity = capacity;
+    this.cache = new Map<K, V>();
+  }
+
+  get(key: K): V | undefined {
+    if (!this.cache.has(key)) {
+      return undefined;
+    }
+    const value = this.cache.get(key) as V;
+    // Move to end to mark as recently used
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+
+  put(key: K, value: V): void {
+    if (this.cache.has(key)) {
+      // If key exists, delete it to update its position
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.capacity) {
+      // If cache is full, delete the least recently used item
+      const leastRecentlyUsedKey = this.cache.keys().next().value;
+      if (leastRecentlyUsedKey !== undefined) {
+        this.cache.delete(leastRecentlyUsedKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+
+  values(): V[] {
+    return Array.from(this.cache.values());
+  }
+}
+
+export const sessionUsageCache = new LRUCache<string, Usage>(100);

packages/server/src/utils/index.ts

@@ -0,0 +1,173 @@
+import fs from "node:fs/promises";
+import readline from "node:readline";
+import JSON5 from "json5";
+import path from "node:path";
+import {
+  CONFIG_FILE,
+  DEFAULT_CONFIG,
+  HOME_DIR,
+  PLUGINS_DIR,
+} from "@musistudio/claude-code-router-shared";
+
+// Function to interpolate environment variables in config values
+const interpolateEnvVars = (obj: any): any => {
+  if (typeof obj === "string") {
+    // Replace $VAR_NAME or ${VAR_NAME} with environment variable values
+    return obj.replace(/\$\{([^}]+)\}|\$([A-Z_][A-Z0-9_]*)/g, (match, braced, unbraced) => {
+      const varName = braced || unbraced;
+      return process.env[varName] || match; // Keep original if env var doesn't exist
+    });
+  } else if (Array.isArray(obj)) {
+    return obj.map(interpolateEnvVars);
+  } else if (obj !== null && typeof obj === "object") {
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = interpolateEnvVars(value);
+    }
+    return result;
+  }
+  return obj;
+};
+
+const ensureDir = async (dir_path: string) => {
+  try {
+    await fs.access(dir_path);
+  } catch {
+    await fs.mkdir(dir_path, { recursive: true });
+  }
+};
+
+export const initDir = async () => {
+  await ensureDir(HOME_DIR);
+  await ensureDir(PLUGINS_DIR);
+  await ensureDir(path.join(HOME_DIR, "logs"));
+};
+
+const createReadline = () => {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+};
+
+const question = (query: string): Promise<string> => {
+  return new Promise((resolve) => {
+    const rl = createReadline();
+    rl.question(query, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+};
+
+const confirm = async (query: string): Promise<boolean> => {
+  const answer = await question(query);
+  return answer.toLowerCase() !== "n";
+};
+
+export const readConfigFile = async () => {
+  try {
+    const config = await fs.readFile(CONFIG_FILE, "utf-8");
+    try {
+      // Try to parse with JSON5 first (which also supports standard JSON)
+      const parsedConfig = JSON5.parse(config);
+      // Interpolate environment variables in the parsed config
+      return interpolateEnvVars(parsedConfig);
+    } catch (parseError) {
+      console.error(`Failed to parse config file at ${CONFIG_FILE}`);
+      console.error("Error details:", (parseError as Error).message);
+      console.error("Please check your config file syntax.");
+      process.exit(1);
+    }
+  } catch (readError: any) {
+    if (readError.code === "ENOENT") {
+      // Config file doesn't exist, prompt user for initial setup
+      try {
+        // Initialize directories
+        await initDir();
+
+        // Backup existing config file if it exists
+        const backupPath = await backupConfigFile();
+        if (backupPath) {
+          console.log(
+              `Backed up existing configuration file to ${backupPath}`
+          );
+        }
+        const config = {
+          PORT: 3456,
+          Providers: [],
+          Router: {},
+        }
+        // Create a minimal default config file
+        await writeConfigFile(config);
+        console.log(
+            "Created minimal default configuration file at ~/.claude-code-router/config.json"
+        );
+        console.log(
+            "Please edit this file with your actual configuration."
+        );
+        return config
+      } catch (error: any) {
+        console.error(
+            "Failed to create default configuration:",
+            error.message
+        );
+        process.exit(1);
+      }
+    } else {
+      console.error(`Failed to read config file at ${CONFIG_FILE}`);
+      console.error("Error details:", readError.message);
+      process.exit(1);
+    }
+  }
+};
+
+export const backupConfigFile = async () => {
+  try {
+    if (await fs.access(CONFIG_FILE).then(() => true).catch(() => false)) {
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const backupPath = `${CONFIG_FILE}.${timestamp}.bak`;
+      await fs.copyFile(CONFIG_FILE, backupPath);
+
+      // Clean up old backups, keeping only the 3 most recent
+      try {
+        const configDir = path.dirname(CONFIG_FILE);
+        const configFileName = path.basename(CONFIG_FILE);
+        const files = await fs.readdir(configDir);
+
+        // Find all backup files for this config
+        const backupFiles = files
+          .filter(file => file.startsWith(configFileName) && file.endsWith('.bak'))
+          .sort()
+          .reverse(); // Sort in descending order (newest first)
+
+        // Delete all but the 3 most recent backups
+        if (backupFiles.length > 3) {
+          for (let i = 3; i < backupFiles.length; i++) {
+            const oldBackupPath = path.join(configDir, backupFiles[i]);
+            await fs.unlink(oldBackupPath);
+          }
+        }
+      } catch (cleanupError) {
+        console.warn("Failed to clean up old backups:", cleanupError);
+      }
+
+      return backupPath;
+    }
+  } catch (error) {
+    console.error("Failed to backup config file:", error);
+  }
+  return null;
+};
+
+export const writeConfigFile = async (config: any) => {
+  await ensureDir(HOME_DIR);
+  const configWithComment = `${JSON.stringify(config, null, 2)}`;
+  await fs.writeFile(CONFIG_FILE, configWithComment);
+};
+
+export const initConfig = async () => {
+  const config = await readConfigFile();
+  Object.assign(process.env, config);
+  return config;
+};

packages/server/src/utils/rewriteStream.ts

@@ -0,0 +1,31 @@
+/**rewriteStream
+ * 读取源readablestream，返回一个新的readablestream，由processor对源数据进行处理后将返回的新值推送到新的stream，如果没有返回值则不推送
+ * @param stream
+ * @param processor
+ */
+export const rewriteStream = (stream: ReadableStream, processor: (data: any, controller: ReadableStreamController<any>) => Promise<any>): ReadableStream => {
+  const reader = stream.getReader()
+
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) {
+            controller.close()
+            break
+          }
+
+          const processed = await processor(value, controller)
+          if (processed !== undefined) {
+            controller.enqueue(processed)
+          }
+        }
+      } catch (error) {
+        controller.error(error)
+      } finally {
+        reader.releaseLock()
+      }
+    }
+  })
+}

packages/server/src/utils/router.ts

@@ -0,0 +1,317 @@
+import { get_encoding } from "tiktoken";
+import { sessionUsageCache, Usage } from "./cache";
+import { readFile, access } from "fs/promises";
+import { opendir, stat } from "fs/promises";
+import { join } from "path";
+import { CLAUDE_PROJECTS_DIR, HOME_DIR } from "@musistudio/claude-code-router-shared";
+import { LRUCache } from "lru-cache";
+
+// Types from @anthropic-ai/sdk
+interface Tool {
+  name: string;
+  description?: string;
+  input_schema: object;
+}
+
+interface ContentBlockParam {
+  type: string;
+  [key: string]: any;
+}
+
+interface MessageParam {
+  role: string;
+  content: string | ContentBlockParam[];
+}
+
+interface MessageCreateParamsBase {
+  messages?: MessageParam[];
+  system?: string | any[];
+  tools?: Tool[];
+  [key: string]: any;
+}
+
+const enc = get_encoding("cl100k_base");
+
+export const calculateTokenCount = (
+  messages: MessageParam[],
+  system: any,
+  tools: Tool[]
+) => {
+  let tokenCount = 0;
+  if (Array.isArray(messages)) {
+    messages.forEach((message) => {
+      if (typeof message.content === "string") {
+        tokenCount += enc.encode(message.content).length;
+      } else if (Array.isArray(message.content)) {
+        message.content.forEach((contentPart: any) => {
+          if (contentPart.type === "text") {
+            tokenCount += enc.encode(contentPart.text).length;
+          } else if (contentPart.type === "tool_use") {
+            tokenCount += enc.encode(JSON.stringify(contentPart.input)).length;
+          } else if (contentPart.type === "tool_result") {
+            tokenCount += enc.encode(
+              typeof contentPart.content === "string"
+                ? contentPart.content
+                : JSON.stringify(contentPart.content)
+            ).length;
+          }
+        });
+      }
+    });
+  }
+  if (typeof system === "string") {
+    tokenCount += enc.encode(system).length;
+  } else if (Array.isArray(system)) {
+    system.forEach((item: any) => {
+      if (item.type !== "text") return;
+      if (typeof item.text === "string") {
+        tokenCount += enc.encode(item.text).length;
+      } else if (Array.isArray(item.text)) {
+        item.text.forEach((textPart: any) => {
+          tokenCount += enc.encode(textPart || "").length;
+        });
+      }
+    });
+  }
+  if (tools) {
+    tools.forEach((tool: Tool) => {
+      if (tool.description) {
+        tokenCount += enc.encode(tool.name + tool.description).length;
+      }
+      if (tool.input_schema) {
+        tokenCount += enc.encode(JSON.stringify(tool.input_schema)).length;
+      }
+    });
+  }
+  return tokenCount;
+};
+
+const readConfigFile = async (filePath: string) => {
+  try {
+    await access(filePath);
+    const content = await readFile(filePath, "utf8");
+    return JSON.parse(content);
+  } catch (error) {
+    return null; // 文件不存在或读取失败时返回null
+  }
+};
+
+const getProjectSpecificRouter = async (req: any) => {
+  // 检查是否有项目特定的配置
+  if (req.sessionId) {
+    const project = await searchProjectBySession(req.sessionId);
+    if (project) {
+      const projectConfigPath = join(HOME_DIR, project, "config.json");
+      const sessionConfigPath = join(
+        HOME_DIR,
+        project,
+        `${req.sessionId}.json`
+      );
+
+      // 首先尝试读取sessionConfig文件
+      const sessionConfig = await readConfigFile(sessionConfigPath);
+      if (sessionConfig && sessionConfig.Router) {
+        return sessionConfig.Router;
+      }
+      const projectConfig = await readConfigFile(projectConfigPath);
+      if (projectConfig && projectConfig.Router) {
+        return projectConfig.Router;
+      }
+    }
+  }
+  return undefined; // 返回undefined表示使用原始配置
+};
+
+const getUseModel = async (
+  req: any,
+  tokenCount: number,
+  config: any,
+  lastUsage?: Usage | undefined
+) => {
+  const projectSpecificRouter = await getProjectSpecificRouter(req);
+  const Router = projectSpecificRouter || config.Router;
+
+  if (req.body.model.includes(",")) {
+    const [provider, model] = req.body.model.split(",");
+    const finalProvider = config.Providers.find(
+      (p: any) => p.name.toLowerCase() === provider
+    );
+    const finalModel = finalProvider?.models?.find(
+      (m: any) => m.toLowerCase() === model
+    );
+    if (finalProvider && finalModel) {
+      return `${finalProvider.name},${finalModel}`;
+    }
+    return req.body.model;
+  }
+
+  // if tokenCount is greater than the configured threshold, use the long context model
+  const longContextThreshold = Router.longContextThreshold || 60000;
+  const lastUsageThreshold =
+    lastUsage &&
+    lastUsage.input_tokens > longContextThreshold &&
+    tokenCount > 20000;
+  const tokenCountThreshold = tokenCount > longContextThreshold;
+  if ((lastUsageThreshold || tokenCountThreshold) && Router.longContext) {
+    req.log.info(
+      `Using long context model due to token count: ${tokenCount}, threshold: ${longContextThreshold}`
+    );
+    return Router.longContext;
+  }
+  if (
+    req.body?.system?.length > 1 &&
+    req.body?.system[1]?.text?.startsWith("<CCR-SUBAGENT-MODEL>")
+  ) {
+    const model = req.body?.system[1].text.match(
+      /<CCR-SUBAGENT-MODEL>(.*?)<\/CCR-SUBAGENT-MODEL>/s
+    );
+    if (model) {
+      req.body.system[1].text = req.body.system[1].text.replace(
+        `<CCR-SUBAGENT-MODEL>${model[1]}</CCR-SUBAGENT-MODEL>`,
+        ""
+      );
+      return model[1];
+    }
+  }
+  // Use the background model for any Claude Haiku variant
+  if (
+    req.body.model?.includes("claude") &&
+    req.body.model?.includes("haiku") &&
+    config.Router.background
+  ) {
+    req.log.info(`Using background model for ${req.body.model}`);
+    return config.Router.background;
+  }
+  // The priority of websearch must be higher than thinking.
+  if (
+    Array.isArray(req.body.tools) &&
+    req.body.tools.some((tool: any) => tool.type?.startsWith("web_search")) &&
+    Router.webSearch
+  ) {
+    return Router.webSearch;
+  }
+  // if exits thinking, use the think model
+  if (req.body.thinking && Router.think) {
+    req.log.info(`Using think model for ${req.body.thinking}`);
+    return Router.think;
+  }
+  return Router!.default;
+};
+
+export const router = async (req: any, _res: any, context: any) => {
+  const { config, event } = context;
+  // Parse sessionId from metadata.user_id
+  if (req.body.metadata?.user_id) {
+    const parts = req.body.metadata.user_id.split("_session_");
+    if (parts.length > 1) {
+      req.sessionId = parts[1];
+    }
+  }
+  const lastMessageUsage = sessionUsageCache.get(req.sessionId);
+  const { messages, system = [], tools }: MessageCreateParamsBase = req.body;
+  if (
+    config.REWRITE_SYSTEM_PROMPT &&
+    system.length > 1 &&
+    system[1]?.text?.includes("<env>")
+  ) {
+    const prompt = await readFile(config.REWRITE_SYSTEM_PROMPT, "utf-8");
+    system[1].text = `${prompt}<env>${system[1].text.split("<env>").pop()}`;
+  }
+
+  try {
+    const tokenCount = calculateTokenCount(
+      messages as MessageParam[],
+      system,
+      tools as Tool[]
+    );
+
+    let model;
+    if (config.CUSTOM_ROUTER_PATH) {
+      try {
+        const customRouter = require(config.CUSTOM_ROUTER_PATH);
+        req.tokenCount = tokenCount; // Pass token count to custom router
+        model = await customRouter(req, config, {
+          event,
+        });
+      } catch (e: any) {
+        req.log.error(`failed to load custom router: ${e.message}`);
+      }
+    }
+    if (!model) {
+      model = await getUseModel(req, tokenCount, config, lastMessageUsage);
+    }
+    req.body.model = model;
+  } catch (error: any) {
+    req.log.error(`Error in router middleware: ${error.message}`);
+    req.body.model = config.Router!.default;
+  }
+  return;
+};
+
+// 内存缓存，存储sessionId到项目名称的映射
+// null值表示之前已查找过但未找到项目
+// 使用LRU缓存，限制最大1000个条目
+const sessionProjectCache = new LRUCache<string, string>({
+  max: 1000,
+});
+
+export const searchProjectBySession = async (
+  sessionId: string
+): Promise<string | null> => {
+  // 首先检查缓存
+  if (sessionProjectCache.has(sessionId)) {
+    const result = sessionProjectCache.get(sessionId);
+    if (!result || result === '') {
+      return null;
+    }
+    return result;
+  }
+
+  try {
+    const dir = await opendir(CLAUDE_PROJECTS_DIR);
+    const folderNames: string[] = [];
+
+    // 收集所有文件夹名称
+    for await (const dirent of dir) {
+      if (dirent.isDirectory()) {
+        folderNames.push(dirent.name);
+      }
+    }
+
+    // 并发检查每个项目文件夹中是否存在sessionId.jsonl文件
+    const checkPromises = folderNames.map(async (folderName) => {
+      const sessionFilePath = join(
+        CLAUDE_PROJECTS_DIR,
+        folderName,
+        `${sessionId}.jsonl`
+      );
+      try {
+        const fileStat = await stat(sessionFilePath);
+        return fileStat.isFile() ? folderName : null;
+      } catch {
+        // 文件不存在，继续检查下一个
+        return null;
+      }
+    });
+
+    const results = await Promise.all(checkPromises);
+
+    // 返回第一个存在的项目目录名称
+    for (const result of results) {
+      if (result) {
+        // 缓存找到的结果
+        sessionProjectCache.set(sessionId, result);
+        return result;
+      }
+    }
+
+    // 缓存未找到的结果（null值表示之前已查找过但未找到项目）
+    sessionProjectCache.set(sessionId, '');
+    return null; // 没有找到匹配的项目
+  } catch (error) {
+    console.error("Error searching for project by session:", error);
+    // 出错时也缓存null结果，避免重复出错
+    sessionProjectCache.set(sessionId, '');
+    return null;
+  }
+};

packages/server/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./src"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

packages/shared/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@musistudio/claude-code-router-shared",
+  "version": "1.0.73",
+  "description": "Shared utilities and constants for Claude Code Router",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "node ../../scripts/build-shared.js"
+  },
+  "keywords": [
+    "claude",
+    "code",
+    "router",
+    "shared"
+  ],
+  "author": "musistudio",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^24.0.15",
+    "esbuild": "^0.25.1",
+    "typescript": "^5.8.2"
+  }
+}

packages/shared/src/constants.ts

@@ -0,0 +1,23 @@
+import path from "node:path";
+import os from "node:os";
+
+export const HOME_DIR = path.join(os.homedir(), ".claude-code-router");
+
+export const CONFIG_FILE = path.join(HOME_DIR, "config.json");
+
+export const PLUGINS_DIR = path.join(HOME_DIR, "plugins");
+
+export const PID_FILE = path.join(HOME_DIR, '.claude-code-router.pid');
+
+export const REFERENCE_COUNT_FILE = path.join(os.tmpdir(), "claude-code-reference-count.txt");
+
+// Claude projects directory
+export const CLAUDE_PROJECTS_DIR = path.join(os.homedir(), ".claude", "projects");
+
+
+export const DEFAULT_CONFIG = {
+  LOG: false,
+  OPENAI_API_KEY: "",
+  OPENAI_BASE_URL: "",
+  OPENAI_MODEL: "",
+};

packages/shared/src/index.ts

@@ -0,0 +1 @@
+export * from "./constants";

packages/shared/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/ui/PROJECT.md

@@ -0,0 +1,23 @@
+# 项目指南
+
+> 这是一个用于设置配置的前端项目，配置格式参考config.example.json
+
+## 技术栈
+1. 使用pnpm作为包管理工具
+2. 使用vite.js作为构建工具
+3. 使用react.js + tailwindcss + shadcn-ui构建前端界面
+
+## UI设计
+采用现代化的UI风格，让界面整体体现出呼吸感。整体配置应该简洁和通俗易懂，需要有必要的校验，易用的交互体验。
+
+## 接口设计
+不需要实现任何接口，但你需要根据config.example.json文件的内容mock数据
+
+## 代码指引
+在使用任何库之前你都需要使用websearch工具查找最新的文档，不要使用你知识库的内容，即使是显而易见的你以为的确定性的知识。
+
+## 多语言设计
+项目需要同时支持中文和英文
+
+## 构建发布
+最后需要构建出一个HTML文件，其中所有的js和css采用内联的方式，构建产物应该只包含一个html文件。

packages/ui/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

packages/ui/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

packages/ui/config.example.json

@@ -0,0 +1,179 @@
+{
+  "LOG": true,
+  "CLAUDE_PATH": "/Users/jinhuilee/.claude/local/claude",
+  "HOST": "127.0.0.1",
+  "PORT": 8080,
+  "APIKEY": "1",
+  "API_TIMEOUT_MS": 600000,
+  "transformers": [
+    {
+      "path": "/Users/abc/.claude-code-router/plugins/gemini-cli.js",
+      "options": {
+        "project": "x"
+      }
+    }
+  ],
+  "Providers": [
+    {
+      "name": "siliconflow",
+      "api_base_url": "https://api.moonshot.cn/v1/chat/completions",
+      "api_key": "sk-",
+      "models": [
+        "kimi-k2-0711-preview"
+      ],
+      "transformer": {
+        "use": [
+          [
+            "maxtoken",
+            {
+              "max_tokens": 130000
+            }
+          ]
+        ]
+      }
+    },
+    {
+      "name": "kimi",
+      "api_base_url": "https://api.moonshot.cn/v1/chat/completions",
+      "api_key": "sk-",
+      "models": [
+        "kimi-k2-0711-preview"
+      ]
+    },
+    {
+      "name": "groq",
+      "api_base_url": "https://api.groq.com/openai/v1/chat/completions",
+      "api_key": "",
+      "models": [
+        "moonshotai/kimi-k2-instruct"
+      ],
+      "transformer": {
+        "use": [
+          [
+            "maxtoken",
+            {
+              "max_tokens": 16384
+            }
+          ],
+          "groq"
+        ]
+      }
+    },
+    {
+      "name": "openrouter",
+      "api_base_url": "https://openrouter.ai/api/v1/chat/completions",
+      "api_key": "sk-or-v1-",
+      "models": [
+        "google/gemini-2.5-pro-preview",
+        "anthropic/claude-sonnet-4",
+        "anthropic/claude-3.5-sonnet",
+        "anthropic/claude-3.7-sonnet:thinking",
+        "deepseek/deepseek-chat-v3-0324",
+        "@preset/kimi"
+      ],
+      "transformer": {
+        "use": [
+          "openrouter"
+        ],
+        "deepseek/deepseek-chat-v3-0324": {
+          "use": [
+            "tooluse"
+          ]
+        }
+      }
+    },
+    {
+      "name": "deepseek",
+      "api_base_url": "https://api.deepseek.com/chat/completions",
+      "api_key": "sk-",
+      "models": [
+        "deepseek-chat",
+        "deepseek-reasoner"
+      ],
+      "transformer": {
+        "use": [
+          "deepseek"
+        ],
+        "deepseek-chat": {
+          "use": [
+            "tooluse"
+          ]
+        }
+      }
+    },
+    {
+      "name": "test",
+      "api_base_url": "https://tbai.xin/v1/chat/completions",
+      "api_key": "sk-",
+      "models": [
+        "gemini-2.5-pro"
+      ]
+    },
+    {
+      "name": "ollama",
+      "api_base_url": "http://localhost:11434/v1/chat/completions",
+      "api_key": "ollama",
+      "models": [
+        "qwen2.5-coder:latest"
+      ]
+    },
+    {
+      "name": "gemini",
+      "api_base_url": "https://generativelanguage.googleapis.com/v1beta/models/",
+      "api_key": "",
+      "models": [
+        "gemini-2.5-flash",
+        "gemini-2.5-pro"
+      ],
+      "transformer": {
+        "use": [
+          "gemini"
+        ]
+      }
+    },
+    {
+      "name": "volcengine",
+      "api_base_url": "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
+      "api_key": "sk-xxx",
+      "models": [
+        "deepseek-v3-250324",
+        "deepseek-r1-250528"
+      ],
+      "transformer": {
+        "use": [
+          "deepseek"
+        ]
+      }
+    },
+    {
+      "name": "gemini-cli",
+      "api_base_url": "https://cloudcode-pa.googleapis.com/v1internal",
+      "api_key": "sk-xxx",
+      "models": [
+        "gemini-2.5-flash",
+        "gemini-2.5-pro"
+      ],
+      "transformer": {
+        "use": [
+          "gemini-cli"
+        ]
+      }
+    },
+    {
+      "name": "azure",
+      "api_base_url": "https://your-resource-name.openai.azure.com/",
+      "api_key": "",
+      "models": [
+        "gpt-4"
+      ]
+    }
+  ],
+  "Router": {
+    "default": "gemini-cli,gemini-2.5-pro",
+    "background": "gemini-cli,gemini-2.5-flash",
+    "think": "gemini-cli,gemini-2.5-pro",
+    "longContext": "gemini-cli,gemini-2.5-pro",
+    "webSearch": "gemini-cli,gemini-2.5-flash"
+  },
+  "NON_INTERACTIVE_MODE": false
+}

packages/ui/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

packages/ui/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CCR UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/ui/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@musistudio/claude-code-router-ui",
+  "private": true,
+  "version": "1.0.73",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tailwindcss/vite": "^4.1.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "i18next": "^25.3.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lucide-react": "^0.525.0",
+    "react": "^19.1.0",
+    "react-colorful": "^5.6.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^15.6.1",
+    "react-router-dom": "^7.7.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}

packages/ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/ui/src/App.tsx

@@ -0,0 +1,414 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { SettingsDialog } from "@/components/SettingsDialog";
+import { Transformers } from "@/components/Transformers";
+import { Providers } from "@/components/Providers";
+import { Router } from "@/components/Router";
+import { JsonEditor } from "@/components/JsonEditor";
+import { LogViewer } from "@/components/LogViewer";
+import { Button } from "@/components/ui/button";
+import { useConfig } from "@/components/ConfigProvider";
+import { api } from "@/lib/api";
+import { Settings, Languages, Save, RefreshCw, FileJson, CircleArrowUp, FileText } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Toast } from "@/components/ui/toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import "@/styles/animations.css";
+
+function App() {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { config, error } = useConfig();
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isJsonEditorOpen, setIsJsonEditorOpen] = useState(false);
+  const [isLogViewerOpen, setIsLogViewerOpen] = useState(false);
+  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);
+  // 版本检查状态
+  const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
+  const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false);
+  const [newVersionInfo, setNewVersionInfo] = useState<{ version: string; changelog: string } | null>(null);
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
+  const [hasCheckedUpdate, setHasCheckedUpdate] = useState(false);
+  const hasAutoCheckedUpdate = useRef(false);
+
+  const saveConfig = async () => {
+    // Handle case where config might be null or undefined
+    if (!config) {
+      setToast({ message: t('app.config_missing'), type: 'error' });
+      return;
+    }
+    
+    try {
+      // Save to API
+      const response = await api.updateConfig(config);
+      // Show success message or handle as needed
+      console.log('Config saved successfully');
+      
+      // 根据响应信息进行提示
+      if (response && typeof response === 'object' && 'success' in response) {
+        const apiResponse = response as { success: boolean; message?: string };
+        if (apiResponse.success) {
+          setToast({ message: apiResponse.message || t('app.config_saved_success'), type: 'success' });
+        } else {
+          setToast({ message: apiResponse.message || t('app.config_saved_failed'), type: 'error' });
+        }
+      } else {
+        // 默认成功提示
+        setToast({ message: t('app.config_saved_success'), type: 'success' });
+      }
+    } catch (error) {
+      console.error('Failed to save config:', error);
+      // Handle error appropriately
+      setToast({ message: t('app.config_saved_failed') + ': ' + (error as Error).message, type: 'error' });
+    }
+  };
+
+  const saveConfigAndRestart = async () => {
+    // Handle case where config might be null or undefined
+    if (!config) {
+      setToast({ message: t('app.config_missing'), type: 'error' });
+      return;
+    }
+    
+    try {
+      // Save to API
+      const response = await api.updateConfig(config);
+      
+      // Check if save was successful before restarting
+      let saveSuccessful = true;
+      if (response && typeof response === 'object' && 'success' in response) {
+        const apiResponse = response as { success: boolean; message?: string };
+        if (!apiResponse.success) {
+          saveSuccessful = false;
+          setToast({ message: apiResponse.message || t('app.config_saved_failed'), type: 'error' });
+        }
+      }
+      
+      // Only restart if save was successful
+      if (saveSuccessful) {
+        // Restart service
+        const response = await api.restartService();
+        
+        // Show success message or handle as needed
+        console.log('Config saved and service restarted successfully');
+        
+        // 根据响应信息进行提示
+        if (response && typeof response === 'object' && 'success' in response) {
+          const apiResponse = response as { success: boolean; message?: string };
+          if (apiResponse.success) {
+            setToast({ message: apiResponse.message || t('app.config_saved_restart_success'), type: 'success' });
+          }
+        } else {
+          // 默认成功提示
+          setToast({ message: t('app.config_saved_restart_success'), type: 'success' });
+        }
+      }
+    } catch (error) {
+      console.error('Failed to save config and restart:', error);
+      // Handle error appropriately
+      setToast({ message: t('app.config_saved_restart_failed') + ': ' + (error as Error).message, type: 'error' });
+    }
+  };
+  
+  // 检查更新函数
+  const checkForUpdates = useCallback(async (showDialog: boolean = true) => {
+    // 如果已经检查过且有新版本，根据参数决定是否显示对话框
+    if (hasCheckedUpdate && isNewVersionAvailable) {
+      if (showDialog) {
+        setIsUpdateDialogOpen(true);
+      }
+      return;
+    }
+    
+    setIsCheckingUpdate(true);
+    try {
+      const updateInfo = await api.checkForUpdates();
+      
+      if (updateInfo.hasUpdate && updateInfo.latestVersion && updateInfo.changelog) {
+        setIsNewVersionAvailable(true);
+        setNewVersionInfo({
+          version: updateInfo.latestVersion,
+          changelog: updateInfo.changelog
+        });
+        // 只有在showDialog为true时才显示对话框
+        if (showDialog) {
+          setIsUpdateDialogOpen(true);
+        }
+      } else if (showDialog) {
+        // 只有在showDialog为true时才显示没有更新的提示
+        setToast({ message: t('app.no_updates_available'), type: 'success' });
+      }
+      
+      setHasCheckedUpdate(true);
+    } catch (error) {
+      console.error('Failed to check for updates:', error);
+      if (showDialog) {
+        setToast({ message: t('app.update_check_failed') + ': ' + (error as Error).message, type: 'error' });
+      }
+    } finally {
+      setIsCheckingUpdate(false);
+    }
+  }, [hasCheckedUpdate, isNewVersionAvailable, t]);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      // If we already have a config, we're authenticated
+      if (config) {
+        setIsCheckingAuth(false);
+        // 自动检查更新，但不显示对话框
+        if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
+          hasAutoCheckedUpdate.current = true;
+          checkForUpdates(false);
+        }
+        return;
+      }
+      
+      // For empty API key, allow access without checking config
+      const apiKey = localStorage.getItem('apiKey');
+      if (!apiKey) {
+        setIsCheckingAuth(false);
+        return;
+      }
+      
+      // If we don't have a config, try to fetch it
+      try {
+        await api.getConfig();
+        // If successful, we don't need to do anything special
+        // The ConfigProvider will handle setting the config
+      } catch (err) {
+        // If it's a 401, the API client will redirect to login
+        // For other errors, we still show the app to display the error
+        console.error('Error checking auth:', err);
+        // Redirect to login on authentication error
+        if ((err as Error).message === 'Unauthorized') {
+          navigate('/login');
+        }
+      } finally {
+        setIsCheckingAuth(false);
+        // 在获取配置完成后检查更新，但不显示对话框
+        if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
+          hasAutoCheckedUpdate.current = true;
+          checkForUpdates(false);
+        }
+      }
+    };
+
+    checkAuth();
+    
+    // Listen for unauthorized events
+    const handleUnauthorized = () => {
+      navigate('/login');
+    };
+    
+    window.addEventListener('unauthorized', handleUnauthorized);
+    
+    return () => {
+      window.removeEventListener('unauthorized', handleUnauthorized);
+    };
+  }, [config, navigate, hasCheckedUpdate, checkForUpdates]);
+  
+  // 执行更新函数
+  const performUpdate = async () => {
+    if (!newVersionInfo) return;
+    
+    try {
+      const result = await api.performUpdate();
+      
+      if (result.success) {
+        setToast({ message: t('app.update_successful'), type: 'success' });
+        setIsNewVersionAvailable(false);
+        setIsUpdateDialogOpen(false);
+        setHasCheckedUpdate(false); // 重置检查状态，以便下次重新检查
+      } else {
+        setToast({ message: t('app.update_failed') + ': ' + result.message, type: 'error' });
+      }
+    } catch (error) {
+      console.error('Failed to perform update:', error);
+      setToast({ message: t('app.update_failed') + ': ' + (error as Error).message, type: 'error' });
+    }
+  };
+
+  
+  if (isCheckingAuth) {
+    return (
+      <div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
+        <div className="text-gray-500">Loading application...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
+        <div className="text-red-500">Error: {error.message}</div>
+      </div>
+    );
+  }
+
+  // Handle case where config is null or undefined
+  if (!config) {
+    return (
+      <div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
+        <div className="text-gray-500">Loading configuration...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-gray-50 font-sans">
+      <header className="flex h-16 items-center justify-between border-b bg-white px-6">
+        <h1 className="text-xl font-semibold text-gray-800">{t('app.title')}</h1>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)} className="transition-all-ease hover:scale-110">
+            <Settings className="h-5 w-5" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={() => setIsJsonEditorOpen(true)} className="transition-all-ease hover:scale-110">
+            <FileJson className="h-5 w-5" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={() => setIsLogViewerOpen(true)} className="transition-all-ease hover:scale-110">
+            <FileText className="h-5 w-5" />
+          </Button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon" className="transition-all-ease hover:scale-110">
+                <Languages className="h-5 w-5" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-32 p-2">
+              <div className="space-y-1">
+                <Button
+                  variant={i18n.language.startsWith('en') ? 'default' : 'ghost'}
+                  className="w-full justify-start transition-all-ease hover:scale-[1.02]"
+                  onClick={() => i18n.changeLanguage('en')}
+                >
+                  English
+                </Button>
+                <Button
+                  variant={i18n.language.startsWith('zh') ? 'default' : 'ghost'}
+                  className="w-full justify-start transition-all-ease hover:scale-[1.02]"
+                  onClick={() => i18n.changeLanguage('zh')}
+                >
+                  中文
+                </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+          {/* 更新版本按钮 */}
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            onClick={() => checkForUpdates(true)}
+            disabled={isCheckingUpdate}
+            className="transition-all-ease hover:scale-110 relative"
+          >
+            <div className="relative">
+              <CircleArrowUp className="h-5 w-5" />
+              {isNewVersionAvailable && !isCheckingUpdate && (
+                <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>
+              )}
+            </div>
+            {isCheckingUpdate && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
+              </div>
+            )}
+          </Button>
+          <Button onClick={saveConfig} variant="outline" className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]">
+            <Save className="mr-2 h-4 w-4" />
+            {t('app.save')}
+          </Button>
+          <Button onClick={saveConfigAndRestart} className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            {t('app.save_and_restart')}
+          </Button>
+        </div>
+      </header>
+      <main className="flex h-[calc(100vh-4rem)] gap-4 p-4 overflow-hidden">
+        <div className="w-3/5">
+          <Providers />
+        </div>
+        <div className="flex w-2/5 flex-col gap-4">
+          <div className="h-3/5">
+            <Router />
+          </div>
+          <div className="flex-1 overflow-hidden">
+            <Transformers />
+          </div>
+        </div>
+      </main>
+      <SettingsDialog isOpen={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+      <JsonEditor 
+        open={isJsonEditorOpen} 
+        onOpenChange={setIsJsonEditorOpen} 
+        showToast={(message, type) => setToast({ message, type })} 
+      />
+      <LogViewer 
+        open={isLogViewerOpen} 
+        onOpenChange={setIsLogViewerOpen} 
+        showToast={(message, type) => setToast({ message, type })} 
+      />
+      {/* 版本更新对话框 */}
+      <Dialog open={isUpdateDialogOpen} onOpenChange={setIsUpdateDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t('app.new_version_available')}
+              {newVersionInfo && (
+                <span className="ml-2 text-sm font-normal text-muted-foreground">
+                  v{newVersionInfo.version}
+                </span>
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {t('app.update_description')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="max-h-96 overflow-y-auto py-4">
+            {newVersionInfo?.changelog ? (
+              <div className="whitespace-pre-wrap text-sm">
+                {newVersionInfo.changelog}
+              </div>
+            ) : (
+              <div className="text-muted-foreground">
+                {t('app.no_changelog_available')}
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsUpdateDialogOpen(false)}
+            >
+              {t('app.later')}
+            </Button>
+            <Button onClick={performUpdate}>
+              {t('app.update_now')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {toast && (
+        <Toast 
+          message={toast.message} 
+          type={toast.type} 
+          onClose={() => setToast(null)} 
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;

packages/ui/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

packages/ui/src/components/ConfigProvider.tsx

@@ -0,0 +1,155 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode, Dispatch, SetStateAction } from 'react';
+import { api } from '@/lib/api';
+import type { Config, StatusLineConfig } from '@/types';
+
+interface ConfigContextType {
+  config: Config | null;
+  setConfig: Dispatch<SetStateAction<Config | null>>;
+  error: Error | null;
+}
+
+const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useConfig() {
+  const context = useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+  return context;
+}
+
+interface ConfigProviderProps {
+  children: ReactNode;
+}
+
+export function ConfigProvider({ children }: ConfigProviderProps) {
+  const [config, setConfig] = useState<Config | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [hasFetched, setHasFetched] = useState<boolean>(false);
+  const [apiKey, setApiKey] = useState<string | null>(localStorage.getItem('apiKey'));
+
+  // Listen for localStorage changes
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setApiKey(localStorage.getItem('apiKey'));
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      // Reset fetch state when API key changes
+      setHasFetched(false);
+      setConfig(null);
+      setError(null);
+    };
+
+    fetchConfig();
+  }, [apiKey]);
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      // Prevent duplicate API calls in React StrictMode
+      // Skip if we've already fetched
+      if (hasFetched) {
+        return;
+      }
+      setHasFetched(true);
+      
+      try {
+        // Try to fetch config regardless of API key presence
+        const data = await api.getConfig();
+        
+        // Validate the received data to ensure it has the expected structure
+        const validConfig = {
+          LOG: typeof data.LOG === 'boolean' ? data.LOG : false,
+          LOG_LEVEL: typeof data.LOG_LEVEL === 'string' ? data.LOG_LEVEL : 'debug',
+          CLAUDE_PATH: typeof data.CLAUDE_PATH === 'string' ? data.CLAUDE_PATH : '',
+          HOST: typeof data.HOST === 'string' ? data.HOST : '127.0.0.1',
+          PORT: typeof data.PORT === 'number' ? data.PORT : 3456,
+          APIKEY: typeof data.APIKEY === 'string' ? data.APIKEY : '',
+          API_TIMEOUT_MS: typeof data.API_TIMEOUT_MS === 'string' ? data.API_TIMEOUT_MS : '600000',
+          PROXY_URL: typeof data.PROXY_URL === 'string' ? data.PROXY_URL : '',
+          transformers: Array.isArray(data.transformers) ? data.transformers : [],
+          Providers: Array.isArray(data.Providers) ? data.Providers : [],
+          StatusLine: data.StatusLine && typeof data.StatusLine === 'object' ? {
+            enabled: typeof data.StatusLine.enabled === 'boolean' ? data.StatusLine.enabled : false,
+            currentStyle: typeof data.StatusLine.currentStyle === 'string' ? data.StatusLine.currentStyle : 'default',
+            default: data.StatusLine.default && typeof data.StatusLine.default === 'object' && Array.isArray(data.StatusLine.default.modules) ? data.StatusLine.default : { modules: [] },
+            powerline: data.StatusLine.powerline && typeof data.StatusLine.powerline === 'object' && Array.isArray(data.StatusLine.powerline.modules) ? data.StatusLine.powerline : { modules: [] }
+          } : { 
+            enabled: false,
+            currentStyle: 'default',
+            default: { modules: [] },
+            powerline: { modules: [] }
+          },
+          Router: data.Router && typeof data.Router === 'object' ? {
+            default: typeof data.Router.default === 'string' ? data.Router.default : '',
+            background: typeof data.Router.background === 'string' ? data.Router.background : '',
+            think: typeof data.Router.think === 'string' ? data.Router.think : '',
+            longContext: typeof data.Router.longContext === 'string' ? data.Router.longContext : '',
+            longContextThreshold: typeof data.Router.longContextThreshold === 'number' ? data.Router.longContextThreshold : 60000,
+            webSearch: typeof data.Router.webSearch === 'string' ? data.Router.webSearch : '',
+            image: typeof data.Router.image === 'string' ? data.Router.image : ''
+          } : {
+            default: '',
+            background: '',
+            think: '',
+            longContext: '',
+            longContextThreshold: 60000,
+            webSearch: '',
+            image: ''
+          },
+          CUSTOM_ROUTER_PATH: typeof data.CUSTOM_ROUTER_PATH === 'string' ? data.CUSTOM_ROUTER_PATH : ''
+        };
+        
+        setConfig(validConfig);
+      } catch (err) {
+        console.error('Failed to fetch config:', err);
+        // If we get a 401, the API client will redirect to login
+        // Otherwise, set an empty config or error
+        if ((err as Error).message !== 'Unauthorized') {
+          // Set default empty config when fetch fails
+          setConfig({
+            LOG: false,
+            LOG_LEVEL: 'debug',
+            CLAUDE_PATH: '',
+            HOST: '127.0.0.1',
+            PORT: 3456,
+            APIKEY: '',
+            API_TIMEOUT_MS: '600000',
+            PROXY_URL: '',
+            transformers: [],
+            Providers: [],
+            StatusLine: undefined,
+            Router: {
+              default: '',
+              background: '',
+              think: '',
+              longContext: '',
+              longContextThreshold: 60000,
+              webSearch: '',
+              image: ''
+            },
+            CUSTOM_ROUTER_PATH: ''
+          });
+          setError(err as Error);
+        }
+      }
+    };
+
+    fetchConfig();
+  }, [hasFetched, apiKey]);
+
+  return (
+    <ConfigContext.Provider value={{ config, setConfig, error }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}

packages/ui/src/components/DebugPage.tsx

@@ -0,0 +1,496 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, Send, Copy, Square, History, Maximize } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import MonacoEditor from '@monaco-editor/react';
+import { RequestHistoryDrawer } from './RequestHistoryDrawer';
+import { requestHistoryDB } from '@/lib/db';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export function DebugPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [requestData, setRequestData] = useState({
+    url: '',
+    method: 'POST',
+    headers: '{}',
+    body: '{}'
+  });
+  const [responseData, setResponseData] = useState({
+    status: 0,
+    responseTime: 0,
+    body: '',
+    headers: '{}'
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isHistoryDrawerOpen, setIsHistoryDrawerOpen] = useState(false);
+  const [fullscreenEditor, setFullscreenEditor] = useState<'headers' | 'body' | null>(null);
+  const headersEditorRef = useRef<any>(null);
+  const bodyEditorRef = useRef<any>(null);
+
+  // 切换全屏模式
+  const toggleFullscreen = (editorType: 'headers' | 'body') => {
+    const isEnteringFullscreen = fullscreenEditor !== editorType;
+    setFullscreenEditor(isEnteringFullscreen ? editorType : null);
+
+    // 延迟触发Monaco编辑器的重新布局，等待DOM更新完成
+    setTimeout(() => {
+      if (headersEditorRef.current) {
+        headersEditorRef.current.layout();
+      }
+      if (bodyEditorRef.current) {
+        bodyEditorRef.current.layout();
+      }
+    }, 300);
+  };
+
+  // 从URL参数中解析日志数据
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const logDataParam = params.get('logData');
+
+    if (logDataParam) {
+      try {
+        const parsedData = JSON.parse(decodeURIComponent(logDataParam));
+
+        // 解析URL - 支持多种字段名
+        const url = parsedData.url || parsedData.requestUrl || parsedData.endpoint || '';
+
+        // 解析Method - 支持多种字段名和大小写
+        const method = (parsedData.method || parsedData.requestMethod || 'POST').toUpperCase();
+
+        // 解析Headers - 支持多种格式
+        let headers: Record<string, string> = {};
+        if (parsedData.headers) {
+          if (typeof parsedData.headers === 'string') {
+            try {
+              headers = JSON.parse(parsedData.headers);
+            } catch {
+              // 如果是字符串格式，尝试解析为键值对
+              const headerLines = parsedData.headers.split('\n');
+              headerLines.forEach((line: string) => {
+                const [key, ...values] = line.split(':');
+                if (key && values.length > 0) {
+                  headers[key.trim()] = values.join(':').trim();
+                }
+              });
+            }
+          } else {
+            headers = parsedData.headers;
+          }
+        }
+
+        // 解析Body - 支持多种格式和嵌套结构
+        let body: Record<string, unknown> = {};
+        let bodyData = null;
+
+        // 支持多种字段名和嵌套结构
+        if (parsedData.body) {
+          bodyData = parsedData.body;
+        } else if (parsedData.request && parsedData.request.body) {
+          bodyData = parsedData.request.body;
+        }
+
+        if (bodyData) {
+          if (typeof bodyData === 'string') {
+            try {
+              // 尝试解析为JSON对象
+              const parsed = JSON.parse(bodyData);
+              body = parsed;
+            } catch {
+              // 如果不是JSON，检查是否是纯文本
+              const trimmed = bodyData.trim();
+              if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+                // 看起来像JSON但解析失败，作为字符串保存
+                body = { raw: bodyData };
+              } else {
+                // 普通文本，直接保存
+                body = { content: bodyData };
+              }
+            }
+          } else if (typeof bodyData === 'object') {
+            // 已经是对象，直接使用
+            body = bodyData;
+          } else {
+            // 其他类型，转换为字符串
+            body = { content: String(bodyData) };
+          }
+        }
+
+        // 预填充请求表单
+        setRequestData({
+          url,
+          method,
+          headers: JSON.stringify(headers, null, 2),
+          body: JSON.stringify(body, null, 2)
+        });
+
+        console.log('Log data parsed successfully:', { url, method, headers, body });
+      } catch (error) {
+        console.error('Failed to parse log data:', error);
+        console.error('Raw log data:', logDataParam);
+      }
+    }
+  }, [location.search]);
+
+  // 发送请求
+  const sendRequest = async () => {
+    try {
+      setIsLoading(true);
+
+      const headers = JSON.parse(requestData.headers);
+      const body = JSON.parse(requestData.body);
+
+      const startTime = Date.now();
+
+      const response = await fetch(requestData.url, {
+        method: requestData.method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...headers
+        },
+        body: requestData.method !== 'GET' ? JSON.stringify(body) : undefined
+      });
+
+      const endTime = Date.now();
+      const responseTime = endTime - startTime;
+
+      const responseHeaders: Record<string, string> = {};
+      response.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+
+      const responseText = await response.text();
+      let responseBody = responseText;
+
+      // 尝试解析JSON响应
+      try {
+        const jsonResponse = JSON.parse(responseText);
+        responseBody = JSON.stringify(jsonResponse, null, 2);
+      } catch {
+        // 如果不是JSON，保持原样
+      }
+
+      const responseHeadersString = JSON.stringify(responseHeaders, null, 2);
+
+      setResponseData({
+        status: response.status,
+        responseTime,
+        body: responseBody,
+        headers: responseHeadersString
+      });
+
+      // 保存到IndexedDB
+      await requestHistoryDB.saveRequest({
+        url: requestData.url,
+        method: requestData.method,
+        headers: requestData.headers,
+        body: requestData.body,
+        status: response.status,
+        responseTime,
+        responseBody,
+        responseHeaders: responseHeadersString
+      });
+
+    } catch (error) {
+      console.error('Request failed:', error);
+      setResponseData({
+        status: 0,
+        responseTime: 0,
+        body: `请求失败: ${error instanceof Error ? error.message : '未知错误'}`,
+        headers: '{}'
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 从历史记录中选择请求
+  const handleSelectRequest = (request: import('@/lib/db').RequestHistoryItem) => {
+    setRequestData({
+      url: request.url,
+      method: request.method,
+      headers: request.headers,
+      body: request.body
+    });
+
+    setResponseData({
+      status: request.status,
+      responseTime: request.responseTime,
+      body: request.responseBody,
+      headers: request.responseHeaders
+    });
+  };
+
+  // 复制cURL命令
+  const copyCurl = () => {
+    try {
+      const headers = JSON.parse(requestData.headers);
+      const body = JSON.parse(requestData.body);
+
+      let curlCommand = `curl -X ${requestData.method} "${requestData.url}"`;
+
+      // 添加headers
+      Object.entries(headers).forEach(([key, value]) => {
+        curlCommand += ` \\\n  -H "${key}: ${value}"`;
+      });
+
+      // 添加body
+      if (requestData.method !== 'GET' && Object.keys(body).length > 0) {
+        curlCommand += ` \\\n  -d '${JSON.stringify(body)}'`;
+      }
+
+      navigator.clipboard.writeText(curlCommand);
+      alert('cURL命令已复制到剪贴板');
+    } catch (error) {
+      console.error('Failed to copy cURL:', error);
+      alert('复制cURL命令失败');
+    }
+  };
+
+
+  return (
+    <div className="h-screen bg-gray-50 font-sans">
+      {/* 头部 */}
+      <header className="flex h-16 items-center justify-between border-b bg-white px-6">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" onClick={() => navigate('/dashboard')}>
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            返回
+          </Button>
+          <h1 className="text-xl font-semibold text-gray-800">HTTP 调试器</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={() => setIsHistoryDrawerOpen(true)}>
+            <History className="h-4 w-4 mr-2" />
+            历史记录
+          </Button>
+          <Button variant="outline" onClick={copyCurl}>
+            <Copy className="h-4 w-4 mr-2" />
+            复制 cURL
+          </Button>
+        </div>
+      </header>
+
+      {/* 主要内容 */}
+      <main className="flex h-[calc(100vh-4rem)] flex-col gap-4 p-4 overflow-hidden">
+        {/* 上部分：请求参数配置 - 上中下布局 */}
+        <div className="h-1/2 flex flex-col gap-4">
+          <div className="bg-white rounded-lg border p-4 flex-1 flex flex-col">
+            <h3 className="font-medium mb-4">请求参数配置</h3>
+            <div className="flex flex-col gap-4 flex-1">
+              {/* 上：Method、URL和发送请求按钮配置 */}
+              <div className="flex gap-4 items-end">
+                <div className="w-32">
+                  <label className="block text-sm font-medium mb-1">Method</label>
+                  <select
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+                    value={requestData.method}
+                    onChange={(e) => setRequestData(prev => ({ ...prev, method: e.target.value }))}
+                  >
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                    <option value="PUT">PUT</option>
+                    <option value="DELETE">DELETE</option>
+                    <option value="PATCH">PATCH</option>
+                  </select>
+                </div>
+                <div className="flex-1">
+                  <label className="block text-sm font-medium mb-1">URL</label>
+                  <input
+                    type="text"
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+                    value={requestData.url}
+                    onChange={(e) => setRequestData(prev => ({ ...prev, url: e.target.value }))}
+                    placeholder="https://api.example.com/endpoint"
+                  />
+                </div>
+                <Button
+                  variant={isLoading ? "destructive" : "default"}
+                  onClick={isLoading ? () => {} : sendRequest}
+                  disabled={isLoading || !requestData.url.trim()}
+                >
+                  {isLoading ? (
+                    <>
+                      <Square className="h-4 w-4 mr-2" />
+                      请求中...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="h-4 w-4 mr-2" />
+                      发送请求
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Headers和Body配置 - 使用tab布局 */}
+              <div className="flex-1">
+                <Tabs defaultValue="headers" className="h-full flex flex-col">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="headers">Headers</TabsTrigger>
+                    <TabsTrigger value="body">Body</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="headers" className="flex-1 mt-2">
+                    <div
+                      className={`${fullscreenEditor === 'headers' ? '' : 'h-full'} flex flex-col ${
+                        fullscreenEditor === 'headers' ? 'fixed bg-white w-[100vw] h-[100vh] z-[9999] top-0 left-0 p-4' : ''
+                      }`}
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <label className="block text-sm font-medium">Headers (JSON)</label>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => toggleFullscreen('headers')}
+                        >
+                          <Maximize className="h-4 w-4 mr-1" />
+                          {fullscreenEditor === 'headers' ? '退出全屏' : '全屏'}
+                        </Button>
+                      </div>
+                      <div
+                        id="fullscreen-headers"
+                        className={`${fullscreenEditor === 'headers' ? 'h-full' : 'flex-1'} border border-gray-300 rounded-md overflow-hidden relative`}
+                      >
+                        <MonacoEditor
+                          height="100%"
+                          language="json"
+                          value={requestData.headers}
+                          onChange={(value) => setRequestData(prev => ({ ...prev, headers: value || '{}' }))}
+                          onMount={(editor) => {
+                            headersEditorRef.current = editor;
+                          }}
+                          options={{
+                            minimap: { enabled: fullscreenEditor === 'headers' },
+                            scrollBeyondLastLine: false,
+                            fontSize: 14,
+                            lineNumbers: 'on',
+                            wordWrap: 'on',
+                            automaticLayout: true,
+                            formatOnPaste: true,
+                            formatOnType: true,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="body" className="flex-1 mt-2">
+                    <div
+                      className={`${fullscreenEditor === 'body' ? '' : 'h-full'} flex flex-col ${
+                        fullscreenEditor === 'body' ? 'fixed bg-white w-[100vw] h-[100vh] z-[9999] top-0 left-0 p-4' : ''
+                      }`}
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <label className="block text-sm font-medium">Body (JSON)</label>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => toggleFullscreen('body')}
+                        >
+                          <Maximize className="h-4 w-4 mr-1" />
+                          {fullscreenEditor === 'body' ? '退出全屏' : '全屏'}
+                        </Button>
+                      </div>
+                      <div
+                        id="fullscreen-body"
+                        className={`${fullscreenEditor === 'body' ? 'h-full' : 'flex-1'} border border-gray-300 rounded-md overflow-hidden relative`}
+                      >
+                        <MonacoEditor
+                          height="100%"
+                          language="json"
+                          value={requestData.body}
+                          onChange={(value) => setRequestData(prev => ({ ...prev, body: value || '{}' }))}
+                          onMount={(editor) => {
+                            bodyEditorRef.current = editor;
+                          }}
+                          options={{
+                            minimap: { enabled: fullscreenEditor === 'body' },
+                            scrollBeyondLastLine: false,
+                            fontSize: 14,
+                            lineNumbers: 'on',
+                            wordWrap: 'on',
+                            automaticLayout: true,
+                            formatOnPaste: true,
+                            formatOnType: true,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 下部分：响应信息查看 */}
+        <div className="h-1/2 flex flex-col gap-4">
+          <div className="flex-1 bg-white rounded-lg border p-4 flex flex-col">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-medium">响应信息</h3>
+              {responseData.status > 0 && (
+                <div className="flex items-center gap-4 text-sm">
+                  <span className="flex items-center gap-1">
+                    状态码: <span className={`font-mono px-2 py-1 rounded ${
+                      responseData.status >= 200 && responseData.status < 300 
+                        ? 'bg-green-100 text-green-800' 
+                        : responseData.status >= 400 
+                        ? 'bg-red-100 text-red-800' 
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}>
+                      {responseData.status}
+                    </span>
+                  </span>
+                  <span>
+                    响应时间: <span className="font-mono">{responseData.responseTime}ms</span>
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {responseData.body ? (
+              <div className="flex-1">
+                <Tabs defaultValue="body" className="h-full flex flex-col">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="body">响应体</TabsTrigger>
+                    <TabsTrigger value="headers">响应头</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="body" className="flex-1 mt-2">
+                    <div className="bg-gray-50 border rounded-md p-3 h-full overflow-auto">
+                      <pre className="text-sm whitespace-pre-wrap">
+                        {responseData.body}
+                      </pre>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="headers" className="flex-1 mt-2">
+                    <div className="bg-gray-50 border rounded-md p-3 h-full overflow-auto">
+                      <pre className="text-sm">
+                        {responseData.headers}
+                      </pre>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-gray-500">
+                {isLoading ? '发送请求中...' : '发送请求后将在此显示响应'}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+
+      {/* 请求历史抽屉 */}
+      <RequestHistoryDrawer
+        isOpen={isHistoryDrawerOpen}
+        onClose={() => setIsHistoryDrawerOpen(false)}
+        onSelectRequest={handleSelectRequest}
+      />
+    </div>
+  );
+}

packages/ui/src/components/JsonEditor.tsx

@@ -0,0 +1,220 @@
+import { useState, useEffect, useRef } from 'react';
+import Editor from '@monaco-editor/react';
+import { Button } from '@/components/ui/button';
+import { useConfig } from '@/components/ConfigProvider';
+import { api } from '@/lib/api';
+import { useTranslation } from 'react-i18next';
+import { Save, X, RefreshCw } from 'lucide-react';
+
+interface JsonEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  showToast?: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+export function JsonEditor({ open, onOpenChange, showToast }: JsonEditorProps) {
+  const { t } = useTranslation();
+  const { config } = useConfig();
+  const [jsonValue, setJsonValue] = useState<string>('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (config && open) {
+      setJsonValue(JSON.stringify(config, null, 2));
+    }
+  }, [config, open]);
+
+  // Handle open/close animations
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+      // Trigger the animation after a small delay to ensure the element is rendered
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for the animation to complete before hiding
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  const handleSaveResponse = (response: unknown, successMessage: string, errorMessage: string) => {
+    // 根据响应信息进行提示
+    if (response && typeof response === 'object' && 'success' in response) {
+      const apiResponse = response as { success: boolean; message?: string };
+      if (apiResponse.success) {
+        if (showToast) {
+          showToast(apiResponse.message || successMessage, 'success');
+        }
+        return true;
+      } else {
+        if (showToast) {
+          showToast(apiResponse.message || errorMessage, 'error');
+        }
+        return false;
+      }
+    } else {
+      // 默认成功提示
+      if (showToast) {
+        showToast(successMessage, 'success');
+      }
+      return true;
+    }
+  };
+
+  const handleSave = async () => {
+    if (!jsonValue) return;
+    
+    try {
+      setIsSaving(true);
+      const parsedConfig = JSON.parse(jsonValue);
+      const response = await api.updateConfig(parsedConfig);
+      
+      const success = handleSaveResponse(
+        response,
+        t('app.config_saved_success'),
+        t('app.config_saved_failed')
+      );
+      
+      if (success) {
+        onOpenChange(false);
+      }
+    } catch (error) {
+      console.error('Failed to save config:', error);
+      if (showToast) {
+        showToast(t('app.config_saved_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleSaveAndRestart = async () => {
+    if (!jsonValue) return;
+    
+    try {
+      setIsSaving(true);
+      const parsedConfig = JSON.parse(jsonValue);
+      
+      // Save config first
+      const saveResponse = await api.updateConfig(parsedConfig);
+      const saveSuccessful = handleSaveResponse(
+        saveResponse,
+        t('app.config_saved_success'),
+        t('app.config_saved_failed')
+      );
+      
+      // Only restart if save was successful
+      if (saveSuccessful) {
+        // Restart service
+        const restartResponse = await api.restartService();
+        
+        handleSaveResponse(
+          restartResponse,
+          t('app.config_saved_restart_success'),
+          t('app.config_saved_restart_failed')
+        );
+        
+        onOpenChange(false);
+      }
+    } catch (error) {
+      console.error('Failed to save config and restart:', error);
+      if (showToast) {
+        showToast(t('app.config_saved_restart_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!isVisible && !open) {
+    return null;
+  }
+
+  return (
+    <>
+      {(isVisible || open) && (
+        <div 
+          className={`fixed inset-0 z-50 transition-all duration-300 ease-out ${
+            isAnimating && open ? 'bg-black/50 opacity-100' : 'bg-black/0 opacity-0 pointer-events-none'
+          }`}
+          onClick={() => onOpenChange(false)}
+        />
+      )}
+      
+      <div 
+        ref={containerRef}
+        className={`fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-white shadow-2xl transition-all duration-300 ease-out transform ${
+          isAnimating && open ? 'translate-y-0' : 'translate-y-full'
+        }`}
+        style={{ 
+          height: '100vh',
+          maxHeight: '100vh'
+        }}
+      >
+        <div className="flex items-center justify-between border-b p-4">
+          <h2 className="text-lg font-semibold">{t('json_editor.title')}</h2>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              <X className="h-4 w-4 mr-2" />
+              {t('json_editor.cancel')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSave}
+              disabled={isSaving}
+            >
+              <Save className="h-4 w-4 mr-2" />
+              {isSaving ? t('json_editor.saving') : t('json_editor.save')}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleSaveAndRestart}
+              disabled={isSaving}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              {isSaving ? t('json_editor.saving') : t('json_editor.save_and_restart')}
+            </Button>
+          </div>
+        </div>
+        
+        <div className="flex-1 min-h-0 bg-gray-50">
+          <Editor
+            height="100%"
+            defaultLanguage="json"
+            value={jsonValue}
+            onChange={(value) => setJsonValue(value || '')}
+            theme="vs"
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              wordWrap: 'on',
+              formatOnPaste: true,
+              formatOnType: true,
+              suggest: {
+                showKeywords: true,
+                showSnippets: true,
+              },
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

packages/ui/src/components/LogViewer.tsx

@@ -0,0 +1,910 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Editor from '@monaco-editor/react';
+import { Button } from '@/components/ui/button';
+import { api } from '@/lib/api';
+import { useTranslation } from 'react-i18next';
+import { X, RefreshCw, Download, Trash2, ArrowLeft, File, Layers, Bug } from 'lucide-react';
+
+interface LogViewerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  showToast?: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+interface LogEntry {
+  timestamp: string;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  message: string; // 现在这个字段直接包含原始JSON字符串
+  source?: string;
+  reqId?: string;
+  [key: string]: any; // 允许动态属性，如msg、url、body等
+}
+
+interface LogFile {
+  name: string;
+  path: string;
+  size: number;
+  lastModified: string;
+}
+
+interface GroupedLogs {
+  [reqId: string]: LogEntry[];
+}
+
+interface LogGroupSummary {
+  reqId: string;
+  logCount: number;
+  firstLog: string;
+  lastLog: string;
+  model?: string;
+}
+
+interface GroupedLogsResponse {
+  grouped: boolean;
+  groups: { [reqId: string]: LogEntry[] };
+  summary: {
+    totalRequests: number;
+    totalLogs: number;
+    requests: LogGroupSummary[];
+  };
+}
+
+export function LogViewer({ open, onOpenChange, showToast }: LogViewerProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [logs, setLogs] = useState<string[]>([]);
+  const [logFiles, setLogFiles] = useState<LogFile[]>([]);
+  const [selectedFile, setSelectedFile] = useState<LogFile | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [groupByReqId, setGroupByReqId] = useState(false);
+  const [groupedLogs, setGroupedLogs] = useState<GroupedLogsResponse | null>(null);
+  const [selectedReqId, setSelectedReqId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const refreshInterval = useRef<NodeJS.Timeout | null>(null);
+  const workerRef = useRef<Worker | null>(null);
+  const editorRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (open) {
+      loadLogFiles();
+    }
+  }, [open]);
+
+  // 创建内联 Web Worker
+  const createInlineWorker = (): Worker => {
+    const workerCode = `
+      // 日志聚合Web Worker
+      self.onmessage = function(event) {
+        const { type, data } = event.data;
+        
+        if (type === 'groupLogsByReqId') {
+          try {
+            const { logs } = data;
+            
+            // 按reqId聚合日志
+            const groupedLogs = {};
+            
+            logs.forEach((log, index) => {
+              log = JSON.parse(log);
+              let reqId = log.reqId || 'no-req-id';
+              
+              if (!groupedLogs[reqId]) {
+                groupedLogs[reqId] = [];
+              }
+              groupedLogs[reqId].push(log);
+            });
+
+            // 按时间戳排序每个组的日志
+            Object.keys(groupedLogs).forEach(reqId => {
+              groupedLogs[reqId].sort((a, b) => a.time - b.time);
+            });
+
+            // 提取model信息
+            const extractModelInfo = (reqId) => {
+              const logGroup = groupedLogs[reqId];
+              for (const log of logGroup) {
+                try {
+                  // 尝试从message字段解析JSON
+                  if (log.type === 'request body' && log.data && log.data.model) {
+                    return log.data.model;
+                  }
+                } catch (e) {
+                  // 解析失败，继续尝试下一条日志
+                }
+              }
+              return undefined;
+            };
+
+            // 生成摘要信息
+            const summary = {
+              totalRequests: Object.keys(groupedLogs).length,
+              totalLogs: logs.length,
+              requests: Object.keys(groupedLogs).map(reqId => ({
+                reqId,
+                logCount: groupedLogs[reqId].length,
+                firstLog: groupedLogs[reqId][0]?.time,
+                lastLog: groupedLogs[reqId][groupedLogs[reqId].length - 1]?.time,
+                model: extractModelInfo(reqId)
+              }))
+            };
+
+            const response = {
+              grouped: true,
+              groups: groupedLogs,
+              summary
+            };
+
+            // 发送结果回主线程
+            self.postMessage({
+              type: 'groupLogsResult',
+              data: response
+            });
+          } catch (error) {
+            // 发送错误回主线程
+            self.postMessage({
+              type: 'error',
+              error: error instanceof Error ? error.message : 'Unknown error occurred'
+            });
+          }
+        }
+      };
+    `;
+
+    const blob = new Blob([workerCode], { type: 'application/javascript' });
+    const workerUrl = URL.createObjectURL(blob);
+    return new Worker(workerUrl);
+  };
+
+  // 初始化Web Worker
+  useEffect(() => {
+    if (typeof Worker !== 'undefined') {
+      try {
+        // 创建内联Web Worker
+        workerRef.current = createInlineWorker();
+
+        // 监听Worker消息
+        workerRef.current.onmessage = (event) => {
+          const { type, data, error } = event.data;
+
+          if (type === 'groupLogsResult') {
+            setGroupedLogs(data);
+          } else if (type === 'error') {
+            console.error('Worker error:', error);
+            if (showToast) {
+              showToast(t('log_viewer.worker_error') + ': ' + error, 'error');
+            }
+          }
+        };
+
+        // 监听Worker错误
+        workerRef.current.onerror = (error) => {
+          console.error('Worker error:', error);
+          if (showToast) {
+            showToast(t('log_viewer.worker_init_failed'), 'error');
+          }
+        };
+      } catch (error) {
+        console.error('Failed to create worker:', error);
+        if (showToast) {
+          showToast(t('log_viewer.worker_init_failed'), 'error');
+        }
+      }
+    }
+
+    // 清理Worker
+    return () => {
+      if (workerRef.current) {
+        workerRef.current.terminate();
+        workerRef.current = null;
+      }
+    };
+  }, [showToast, t]);
+
+  useEffect(() => {
+    if (autoRefresh && open && selectedFile) {
+      refreshInterval.current = setInterval(() => {
+        loadLogs();
+      }, 5000); // Refresh every 5 seconds
+    } else if (refreshInterval.current) {
+      clearInterval(refreshInterval.current);
+    }
+
+    return () => {
+      if (refreshInterval.current) {
+        clearInterval(refreshInterval.current);
+      }
+    };
+  }, [autoRefresh, open, selectedFile]);
+
+  // Load logs when selected file changes
+  useEffect(() => {
+    if (selectedFile && open) {
+      setLogs([]); // Clear existing logs
+      loadLogs();
+    }
+  }, [selectedFile, open]);
+
+  // Handle open/close animations
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+      // Trigger the animation after a small delay to ensure the element is rendered
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for the animation to complete before hiding
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  const loadLogFiles = async () => {
+    try {
+      setIsLoading(true);
+      const response = await api.getLogFiles();
+
+      if (response && Array.isArray(response)) {
+        setLogFiles(response);
+        setSelectedFile(null);
+        setLogs([]);
+      } else {
+        setLogFiles([]);
+        if (showToast) {
+          showToast(t('log_viewer.no_log_files_available'), 'warning');
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load log files:', error);
+      if (showToast) {
+        showToast(t('log_viewer.load_files_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadLogs = async () => {
+    if (!selectedFile) return;
+
+    try {
+      setIsLoading(true);
+      setGroupedLogs(null);
+      setSelectedReqId(null);
+
+      // 始终加载原始日志数据
+      const response = await api.getLogs(selectedFile.path);
+
+      if (response && Array.isArray(response)) {
+        // 现在接口返回的是原始日志字符串数组，直接存储
+        setLogs(response);
+
+        // 如果启用了分组，使用Web Worker进行聚合（需要转换为LogEntry格式供Worker使用）
+        if (groupByReqId && workerRef.current) {
+          // const workerLogs: LogEntry[] = response.map((logLine, index) => ({
+          //   timestamp: new Date().toISOString(),
+          //   level: 'info',
+          //   message: logLine,
+          //   source: undefined,
+          //   reqId: undefined
+          // }));
+
+          workerRef.current.postMessage({
+            type: 'groupLogsByReqId',
+            data: { logs: response }
+          });
+        } else {
+          setGroupedLogs(null);
+        }
+      } else {
+        setLogs([]);
+        setGroupedLogs(null);
+        if (showToast) {
+          showToast(t('log_viewer.no_logs_available'), 'warning');
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load logs:', error);
+      if (showToast) {
+        showToast(t('log_viewer.load_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const clearLogs = async () => {
+    if (!selectedFile) return;
+
+    try {
+      await api.clearLogs(selectedFile.path);
+      setLogs([]);
+      if (showToast) {
+        showToast(t('log_viewer.logs_cleared'), 'success');
+      }
+    } catch (error) {
+      console.error('Failed to clear logs:', error);
+      if (showToast) {
+        showToast(t('log_viewer.clear_failed') + ': ' + (error as Error).message, 'error');
+      }
+    }
+  };
+
+  const selectFile = (file: LogFile) => {
+    setSelectedFile(file);
+    setAutoRefresh(false); // Reset auto refresh when changing files
+  };
+
+
+  const toggleGroupByReqId = () => {
+    const newValue = !groupByReqId;
+    setGroupByReqId(newValue);
+
+    if (newValue && selectedFile && logs.length > 0) {
+      // 启用聚合时，如果已有日志，则使用Worker进行聚合
+      if (workerRef.current) {
+        workerRef.current.postMessage({
+          type: 'groupLogsByReqId',
+          data: { logs }
+        });
+      }
+    } else if (!newValue) {
+      // 禁用聚合时，清除聚合结果
+      setGroupedLogs(null);
+      setSelectedReqId(null);
+    }
+  };
+
+  const selectReqId = (reqId: string) => {
+    setSelectedReqId(reqId);
+  };
+
+
+  const getDisplayLogs = () => {
+    if (groupByReqId && groupedLogs) {
+      if (selectedReqId && groupedLogs.groups[selectedReqId]) {
+        return groupedLogs.groups[selectedReqId];
+      }
+      // 当在分组模式但没有选中具体请求时，显示原始日志字符串数组
+      return logs.map(logLine => ({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        message: logLine,
+        source: undefined,
+        reqId: undefined
+      }));
+    }
+    // 当不在分组模式时，显示原始日志字符串数组
+    return logs.map(logLine => ({
+      timestamp: new Date().toISOString(),
+      level: 'info',
+      message: logLine,
+      source: undefined,
+      reqId: undefined
+    }));
+  };
+
+  const downloadLogs = () => {
+    if (!selectedFile || logs.length === 0) return;
+
+    // 直接下载原始日志字符串，每行一个日志
+    const logText = logs.join('\n');
+
+    const blob = new Blob([logText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${selectedFile.name}-${new Date().toISOString().split('T')[0]}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    if (showToast) {
+      showToast(t('log_viewer.logs_downloaded'), 'success');
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  // 面包屑导航项类型
+  interface BreadcrumbItem {
+    id: string;
+    label: string;
+    onClick: () => void;
+  }
+
+  // 获取面包屑导航项
+  const getBreadcrumbs = (): BreadcrumbItem[] => {
+    const breadcrumbs: BreadcrumbItem[] = [
+      {
+        id: 'root',
+        label: t('log_viewer.title'),
+        onClick: () => {
+          setSelectedFile(null);
+          setAutoRefresh(false);
+          setLogs([]);
+          setGroupedLogs(null);
+          setSelectedReqId(null);
+          setGroupByReqId(false);
+        }
+      }
+    ];
+
+    if (selectedFile) {
+      breadcrumbs.push({
+        id: 'file',
+        label: selectedFile.name,
+        onClick: () => {
+          if (groupByReqId) {
+            // 如果在分组模式下，点击文件层级应该返回到分组列表
+            setSelectedReqId(null);
+          } else {
+            // 如果不在分组模式下，点击文件层级关闭分组功能
+            setSelectedReqId(null);
+            setGroupedLogs(null);
+            setGroupByReqId(false);
+          }
+        }
+      });
+    }
+
+    if (selectedReqId) {
+      breadcrumbs.push({
+        id: 'req',
+        label: `${t('log_viewer.request')} ${selectedReqId}`,
+        onClick: () => {
+          // 点击当前层级时不做任何操作
+        }
+      });
+    }
+
+    return breadcrumbs;
+  };
+
+  // 获取返回按钮的处理函数
+  const getBackAction = (): (() => void) | null => {
+    if (selectedReqId) {
+      return () => {
+        setSelectedReqId(null);
+      };
+    } else if (selectedFile) {
+      return () => {
+        setSelectedFile(null);
+        setAutoRefresh(false);
+        setLogs([]);
+        setGroupedLogs(null);
+        setSelectedReqId(null);
+        setGroupByReqId(false);
+      };
+    }
+    return null;
+  };
+
+  const formatLogsForEditor = () => {
+    // 如果在分组模式且选中了具体请求，显示该请求的日志
+    if (groupByReqId && groupedLogs && selectedReqId && groupedLogs.groups[selectedReqId]) {
+      const requestLogs = groupedLogs.groups[selectedReqId];
+      // 提取原始JSON字符串并每行一个
+      return requestLogs.map(log => JSON.stringify(log)).join('\n');
+    }
+
+    // 其他情况，直接显示原始日志字符串数组，每行一个
+    return logs.join('\n');
+  };
+
+  // 解析日志行，获取final request的行号
+  const getFinalRequestLines = () => {
+    const lines: number[] = [];
+
+    if (groupByReqId && groupedLogs && selectedReqId && groupedLogs.groups[selectedReqId]) {
+      // 分组模式下，检查选中的请求日志
+      const requestLogs = groupedLogs.groups[selectedReqId];
+      requestLogs.forEach((log, index) => {
+        try {
+          // @ts-ignore
+          log = JSON.parse(log)
+          // 检查日志的msg字段是否等于"final request"
+          if (log.msg === "final request") {
+            lines.push(index + 1); // 行号从1开始
+          }
+        } catch (e) {
+          // 解析失败，跳过
+        }
+      });
+    } else {
+      // 非分组模式下，检查原始日志
+      logs.forEach((logLine, index) => {
+        try {
+          const log = JSON.parse(logLine);
+          // 检查日志的msg字段是否等于"final request"
+          if (log.msg === "final request") {
+            lines.push(index + 1); // 行号从1开始
+          }
+        } catch (e) {
+          // 解析失败，跳过
+        }
+      });
+    }
+
+    return lines;
+  };
+
+  // 处理调试按钮点击
+  const handleDebugClick = (lineNumber: number) => {
+    console.log('handleDebugClick called with lineNumber:', lineNumber);
+    console.log('Current state:', { groupByReqId, selectedReqId, logsLength: logs.length });
+
+    let logData = null;
+
+    if (groupByReqId && groupedLogs && selectedReqId && groupedLogs.groups[selectedReqId]) {
+      // 分组模式下获取日志数据
+      const requestLogs = groupedLogs.groups[selectedReqId];
+      console.log('Group mode - requestLogs length:', requestLogs.length);
+      logData = requestLogs[lineNumber - 1]; // 行号转换为数组索引
+      console.log('Group mode - logData:', logData);
+    } else {
+      // 非分组模式下获取日志数据
+      console.log('Non-group mode - logs length:', logs.length);
+      try {
+        const logLine = logs[lineNumber - 1];
+        console.log('Log line:', logLine);
+        logData = JSON.parse(logLine);
+        console.log('Parsed logData:', logData);
+      } catch (e) {
+        console.error('Failed to parse log data:', e);
+      }
+    }
+
+    if (logData) {
+      console.log('Navigating to debug page with logData:', logData);
+      // 导航到调试页面，并传递日志数据作为URL参数
+      const logDataParam = encodeURIComponent(JSON.stringify(logData));
+      console.log('Encoded logDataParam length:', logDataParam.length);
+      navigate(`/debug?logData=${logDataParam}`);
+    } else {
+      console.error('No log data found for line:', lineNumber);
+    }
+  };
+
+  // 配置Monaco Editor
+  const configureEditor = (editor: any) => {
+    editorRef.current = editor;
+
+    // 启用glyph margin
+    editor.updateOptions({
+      glyphMargin: true,
+    });
+
+    // 存储当前的装饰ID
+    let currentDecorations: string[] = [];
+
+    // 添加glyph margin装饰
+    const updateDecorations = () => {
+      const finalRequestLines = getFinalRequestLines();
+      const decorations = finalRequestLines.map(lineNumber => ({
+        range: {
+          startLineNumber: lineNumber,
+          startColumn: 1,
+          endLineNumber: lineNumber,
+          endColumn: 1
+        },
+        options: {
+          glyphMarginClassName: 'debug-button-glyph',
+          glyphMarginHoverMessage: { value: '点击调试此请求' }
+        }
+      }));
+
+      // 使用deltaDecorations正确更新装饰，清理旧的装饰
+      currentDecorations = editor.deltaDecorations(currentDecorations, decorations);
+    };
+
+    // 初始更新装饰
+    updateDecorations();
+
+    // 监听glyph margin点击 - 使用正确的事件监听方式
+    editor.onMouseDown((e: any) => {
+      console.log('Mouse down event:', e.target);
+      console.log('Event details:', {
+        type: e.target.type,
+        hasDetail: !!e.target.detail,
+        glyphMarginLane: e.target.detail?.glyphMarginLane,
+        offsetX: e.target.detail?.offsetX,
+        glyphMarginLeft: e.target.detail?.glyphMarginLeft,
+        glyphMarginWidth: e.target.detail?.glyphMarginWidth
+      });
+
+      // 检查是否点击在glyph margin区域
+      const isGlyphMarginClick = e.target.detail &&
+        e.target.detail.glyphMarginLane !== undefined &&
+        e.target.detail.offsetX !== undefined &&
+        e.target.detail.offsetX <= e.target.detail.glyphMarginLeft + e.target.detail.glyphMarginWidth;
+
+      console.log('Is glyph margin click:', isGlyphMarginClick);
+
+      if (e.target.position && isGlyphMarginClick) {
+        const finalRequestLines = getFinalRequestLines();
+        console.log('Final request lines:', finalRequestLines);
+        console.log('Clicked line number:', e.target.position.lineNumber);
+        if (finalRequestLines.includes(e.target.position.lineNumber)) {
+          console.log('Opening debug page for line:', e.target.position.lineNumber);
+          handleDebugClick(e.target.position.lineNumber);
+        }
+      }
+    });
+
+    // 尝试使用 onGlyphMarginClick 如果可用
+    if (typeof editor.onGlyphMarginClick === 'function') {
+      editor.onGlyphMarginClick((e: any) => {
+        console.log('Glyph margin click event:', e);
+        const finalRequestLines = getFinalRequestLines();
+        if (finalRequestLines.includes(e.target.position.lineNumber)) {
+          console.log('Opening debug page for line (glyph):', e.target.position.lineNumber);
+          handleDebugClick(e.target.position.lineNumber);
+        }
+      });
+    }
+
+    // 添加鼠标移动事件来检测悬停在调试按钮上
+    editor.onMouseMove((e: any) => {
+      if (e.target.position && (e.target.type === 4 || e.target.type === 'glyph-margin')) {
+        const finalRequestLines = getFinalRequestLines();
+        if (finalRequestLines.includes(e.target.position.lineNumber)) {
+          // 可以在这里添加悬停效果
+          editor.updateOptions({
+            glyphMargin: true,
+          });
+        }
+      }
+    });
+
+    // 当日志变化时更新装饰
+    const interval = setInterval(updateDecorations, 1000);
+
+    return () => {
+      clearInterval(interval);
+      // 清理装饰
+      if (editorRef.current) {
+        editorRef.current.deltaDecorations(currentDecorations, []);
+      }
+    };
+  };
+
+  if (!isVisible && !open) {
+    return null;
+  }
+
+  return (
+    <>
+      {(isVisible || open) && (
+        <div
+          className={`fixed inset-0 z-50 transition-all duration-300 ease-out ${
+            isAnimating && open ? 'bg-black/50 opacity-100' : 'bg-black/0 opacity-0 pointer-events-none'
+          }`}
+          onClick={() => onOpenChange(false)}
+        />
+      )}
+
+      <div
+        ref={containerRef}
+        className={`fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-white shadow-2xl transition-all duration-300 ease-out transform ${
+          isAnimating && open ? 'translate-y-0' : 'translate-y-full'
+        }`}
+        style={{
+          height: '100vh',
+          maxHeight: '100vh'
+        }}
+      >
+        <div className="flex items-center justify-between border-b p-4">
+          <div className="flex items-center gap-2">
+            {getBackAction() && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={getBackAction()!}
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                {t('log_viewer.back')}
+              </Button>
+            )}
+
+            {/* 面包屑导航 */}
+            <nav className="flex items-center space-x-1 text-sm">
+              {getBreadcrumbs().map((breadcrumb, index) => (
+                <React.Fragment key={breadcrumb.id}>
+                  {index > 0 && (
+                    <span className="text-gray-400 mx-1">/</span>
+                  )}
+                  {index === getBreadcrumbs().length - 1 ? (
+                    <span className="text-gray-900 font-medium">
+                      {breadcrumb.label}
+                    </span>
+                  ) : (
+                    <button
+                      onClick={breadcrumb.onClick}
+                      className="text-blue-600 hover:text-blue-800 transition-colors"
+                    >
+                      {breadcrumb.label}
+                    </button>
+                  )}
+                </React.Fragment>
+              ))}
+            </nav>
+          </div>
+          <div className="flex gap-2">
+            {selectedFile && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={toggleGroupByReqId}
+                  className={groupByReqId ? 'bg-blue-100 text-blue-700' : ''}
+                >
+                  <Layers className="h-4 w-4 mr-2" />
+                  {groupByReqId ? t('log_viewer.grouped_on') : t('log_viewer.group_by_req_id')}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setAutoRefresh(!autoRefresh)}
+                  className={autoRefresh ? 'bg-blue-100 text-blue-700' : ''}
+                >
+                  <RefreshCw className={`h-4 w-4 mr-2 ${autoRefresh ? 'animate-spin' : ''}`} />
+                  {autoRefresh ? t('log_viewer.auto_refresh_on') : t('log_viewer.auto_refresh_off')}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={downloadLogs}
+                  disabled={logs.length === 0}
+                >
+                  <Download className="h-4 w-4 mr-2" />
+                  {t('log_viewer.download')}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={clearLogs}
+                  disabled={logs.length === 0}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  {t('log_viewer.clear')}
+                </Button>
+              </>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+            >
+              <X className="h-4 w-4 mr-2" />
+              {t('log_viewer.close')}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 bg-gray-50">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            </div>
+          ) : selectedFile ? (
+            <>
+              {groupByReqId && groupedLogs && !selectedReqId ? (
+                // 显示日志组列表
+                <div className="flex flex-col h-full p-6">
+                  <div className="mb-4 flex-shrink-0">
+                    <h3 className="text-lg font-medium mb-2">{t('log_viewer.request_groups')}</h3>
+                    <p className="text-sm text-gray-600">
+                      {t('log_viewer.total_requests')}: {groupedLogs.summary.totalRequests} |
+                      {t('log_viewer.total_logs')}: {groupedLogs.summary.totalLogs}
+                    </p>
+                  </div>
+                  <div className="flex-1 min-h-0 overflow-y-auto space-y-3">
+                    {groupedLogs.summary.requests.map((request) => (
+                      <div
+                        key={request.reqId}
+                        className="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors"
+                        onClick={() => selectReqId(request.reqId)}
+                      >
+                        <div className="flex items-center justify-between mb-2">
+                          <div className="flex items-center gap-2">
+                            <File className="h-5 w-5 text-blue-600" />
+                            <span className="font-medium text-sm">{request.reqId}</span>
+                            {request.model && (
+                              <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                                {request.model}
+                              </span>
+                            )}
+                          </div>
+                          <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                            {request.logCount} {t('log_viewer.logs')}
+                          </span>
+                        </div>
+                        <div className="text-xs text-gray-500 space-y-1">
+                          <div>{t('log_viewer.first_log')}: {formatDate(request.firstLog)}</div>
+                          <div>{t('log_viewer.last_log')}: {formatDate(request.lastLog)}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                // 显示日志内容
+                <div className="relative h-full">
+                  <Editor
+                    height="100%"
+                    defaultLanguage="json"
+                    value={formatLogsForEditor()}
+                    theme="vs"
+                    options={{
+                      minimap: { enabled: true },
+                      fontSize: 14,
+                      scrollBeyondLastLine: false,
+                      automaticLayout: true,
+                      wordWrap: 'on',
+                      readOnly: true,
+                      lineNumbers: 'on',
+                      folding: true,
+                      renderWhitespace: 'all',
+                      glyphMargin: true,
+                    }}
+                    onMount={configureEditor}
+                  />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="p-6">
+              <h3 className="text-lg font-medium mb-4">{t('log_viewer.select_file')}</h3>
+              {logFiles.length === 0 ? (
+                <div className="text-gray-500 text-center py-8">
+                  <File className="h-12 w-12 mx-auto mb-4 text-gray-400" />
+                  <p>{t('log_viewer.no_log_files_available')}</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {logFiles.map((file) => (
+                    <div
+                      key={file.path}
+                      className="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors"
+                      onClick={() => selectFile(file)}
+                    >
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-center gap-2">
+                          <File className="h-5 w-5 text-blue-600" />
+                          <span className="font-medium text-sm">{file.name}</span>
+                        </div>
+                      </div>
+                      <div className="text-xs text-gray-500 space-y-1">
+                        <div>{formatFileSize(file.size)}</div>
+                        <div>{formatDate(file.lastModified)}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

packages/ui/src/components/Login.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { api } from '@/lib/api';
+
+export function Login() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [apiKey, setApiKey] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Check if user is already authenticated
+  useEffect(() => {
+    const checkAuth = async () => {
+      const apiKey = localStorage.getItem('apiKey');
+      if (apiKey) {
+        setIsLoading(true);
+        // Verify the API key is still valid
+        try {
+          await api.getConfig();
+          navigate('/dashboard');
+        } catch {
+          // If verification fails, remove the API key
+          localStorage.removeItem('apiKey');
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    checkAuth();
+    
+    // Listen for unauthorized events
+    const handleUnauthorized = () => {
+      navigate('/login');
+    };
+    
+    window.addEventListener('unauthorized', handleUnauthorized);
+    
+    return () => {
+      window.removeEventListener('unauthorized', handleUnauthorized);
+    };
+  }, [navigate]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      // Set the API key
+      api.setApiKey(apiKey);
+      
+      // Dispatch storage event to notify other components of the change
+      window.dispatchEvent(new StorageEvent('storage', {
+        key: 'apiKey',
+        newValue: apiKey,
+        url: window.location.href
+      }));
+      
+      // Test the API key by fetching config
+      await api.getConfig();
+      
+      // Navigate to dashboard
+      // The ConfigProvider will handle fetching the config
+      navigate('/dashboard');
+    } catch (error: any) {
+      // Clear the API key on failure
+      api.setApiKey('');
+      
+      // Check if it's an unauthorized error
+      if (error.message && error.message.includes('401')) {
+        setError(t('login.invalidApiKey'));
+      } else {
+        // For other errors, still allow access (restricted mode)
+        navigate('/dashboard');
+      }
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl">{t('login.title')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex justify-center py-8">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+            </div>
+            <p className="text-center text-sm text-gray-500">{t('login.validating')}</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl">{t('login.title')}</CardTitle>
+          <CardDescription>
+            {t('login.description')}
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleLogin}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="apiKey">{t('login.apiKey')}</Label>
+              <Input
+                id="apiKey"
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder={t('login.apiKeyPlaceholder')}
+              />
+            </div>
+            {error && <div className="text-sm text-red-500">{error}</div>}
+          </CardContent>
+          <CardFooter>
+            <Button className="w-full" type="submit">
+              {t('login.signIn')}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

packages/ui/src/components/ProtectedRoute.tsx

@@ -0,0 +1,7 @@
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  // For this application, we allow access without an API key
+  // The App component will handle loading and error states
+  return children;
+};
+
+export default ProtectedRoute;

packages/ui/src/components/ProviderList.tsx

@@ -0,0 +1,83 @@
+import { Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { Provider } from "@/types";
+
+interface ProviderListProps {
+  providers: Provider[];
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+}
+
+export function ProviderList({ providers, onEdit, onRemove }: ProviderListProps) {
+  // Handle case where providers might be null or undefined
+  if (!providers || !Array.isArray(providers)) {
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center justify-center rounded-md border bg-white p-8 text-gray-500">
+          No providers configured
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {providers.map((provider, index) => {
+        // Handle case where individual provider might be null or undefined
+        if (!provider) {
+          return (
+            <div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
+              <div className="flex-1 space-y-1.5">
+                <p className="text-md font-semibold text-gray-800">Invalid Provider</p>
+                <p className="text-sm text-gray-500">Provider data is missing</p>
+              </div>
+              <div className="ml-4 flex flex-shrink-0 items-center gap-2">
+                <Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110" disabled>
+                  <Pencil className="h-4 w-4" />
+                </Button>
+                <Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
+                  <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
+                </Button>
+              </div>
+            </div>
+          );
+        }
+
+        // Handle case where provider.name might be null or undefined
+        const providerName = provider.name || "Unnamed Provider";
+        
+        // Handle case where provider.api_base_url might be null or undefined
+        const apiBaseUrl = provider.api_base_url || "No API URL";
+        
+        // Handle case where provider.models might be null or undefined
+        const models = Array.isArray(provider.models) ? provider.models : [];
+
+        return (
+          <div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
+            <div className="flex-1 space-y-1.5">
+              <p className="text-md font-semibold text-gray-800">{providerName}</p>
+              <p className="text-sm text-gray-500">{apiBaseUrl}</p>
+              <div className="flex flex-wrap gap-2 pt-2">
+                {models.map((model, modelIndex) => (
+                  // Handle case where model might be null or undefined
+                  <Badge key={modelIndex} variant="outline" className="font-normal transition-all-ease hover:scale-105">
+                    {model || "Unnamed Model"}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+            <div className="ml-4 flex flex-shrink-0 items-center gap-2">
+              <Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110">
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
+                <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/ui/src/components/PublicRoute.tsx

@@ -0,0 +1,7 @@
+const PublicRoute = ({ children }: { children: React.ReactNode }) => {
+  // Always show login page
+  // The login page will handle empty API keys appropriately
+  return children;
+};
+
+export default PublicRoute;

packages/ui/src/components/RequestHistoryDrawer.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { History, Trash2, Clock, X } from 'lucide-react';
+import { requestHistoryDB, type RequestHistoryItem } from '@/lib/db';
+
+interface RequestHistoryDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectRequest: (request: RequestHistoryItem) => void;
+}
+
+export function RequestHistoryDrawer({ isOpen, onClose, onSelectRequest }: RequestHistoryDrawerProps) {
+  const [requests, setRequests] = useState<RequestHistoryItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadRequests();
+    }
+  }, [isOpen]);
+
+  const loadRequests = async () => {
+    try {
+      setLoading(true);
+      const history = await requestHistoryDB.getRequests();
+      setRequests(history);
+    } catch (error) {
+      console.error('Failed to load request history:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    try {
+      await requestHistoryDB.deleteRequest(id);
+      setRequests(prev => prev.filter(req => req.id !== id));
+    } catch (error) {
+      console.error('Failed to delete request:', error);
+    }
+  };
+
+  const handleClearAll = async () => {
+    if (window.confirm('确定要清空所有请求历史吗？')) {
+      try {
+        await requestHistoryDB.clearAllRequests();
+        setRequests([]);
+      } catch (error) {
+        console.error('Failed to clear request history:', error);
+      }
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    
+    if (minutes < 1) return '刚刚';
+    if (minutes < 60) return `${minutes}分钟前`;
+    if (minutes < 1440) return `${Math.floor(minutes / 60)}小时前`;
+    return date.toLocaleDateString();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* 遮罩层 */}
+      <div 
+        className="absolute inset-0 bg-black bg-opacity-50"
+        onClick={onClose}
+      />
+      
+      {/* 抽屉 */}
+      <div className="absolute right-0 top-0 h-full w-96 bg-white shadow-xl flex flex-col">
+        {/* 头部 */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <div className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">请求历史</h2>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={handleClearAll}
+              disabled={requests.length === 0}
+            >
+              <Trash2 className="h-4 w-4 mr-1" />
+              清空
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* 内容 */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="flex items-center justify-center h-32 text-gray-500">
+              加载中...
+            </div>
+          ) : requests.length > 0 ? (
+            <div className="space-y-2">
+              {requests.map((item) => (
+                <div
+                  key={item.id}
+                  className="p-3 bg-gray-50 rounded-lg border cursor-pointer hover:bg-gray-100 transition-colors"
+                  onClick={() => {
+                    onSelectRequest(item);
+                    onClose();
+                  }}
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-xs bg-gray-200 px-2 py-1 rounded">
+                        {item.method}
+                      </span>
+                      <span className="text-sm font-medium truncate flex-1">
+                        {item.url}
+                      </span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => handleDelete(item.id, e)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                  
+                  <div className="flex items-center justify-between text-xs text-gray-500">
+                    <div className="flex items-center gap-2">
+                      <span className={`font-mono px-1 rounded ${
+                        item.status >= 200 && item.status < 300 
+                          ? 'bg-green-100 text-green-800' 
+                          : item.status >= 400 
+                          ? 'bg-red-100 text-red-800' 
+                          : 'bg-yellow-100 text-yellow-800'
+                      }`}>
+                        {item.status}
+                      </span>
+                      <span>{item.responseTime}ms</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      <span>{formatTime(item.timestamp)}</span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 py-8">
+              <History className="h-12 w-12 mx-auto mb-4 text-gray-300" />
+              <p>暂无请求历史</p>
+              <p className="text-sm mt-2">发送请求后会在此显示历史记录</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/Router.tsx

@@ -0,0 +1,171 @@
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { useConfig } from "./ConfigProvider";
+import { Combobox } from "./ui/combobox";
+
+export function Router() {
+  const { t } = useTranslation();
+  const { config, setConfig } = useConfig();
+
+  // Handle case where config is null or undefined
+  if (!config) {
+    return (
+      <Card className="flex h-full flex-col rounded-lg border shadow-sm">
+        <CardHeader className="border-b p-4">
+          <CardTitle className="text-lg">{t("router.title")}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex-grow flex items-center justify-center p-4">
+          <div className="text-gray-500">Loading router configuration...</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Handle case where config.Router is null or undefined
+  const routerConfig = config.Router || {
+    default: "",
+    background: "",
+    think: "",
+    longContext: "",
+    longContextThreshold: 60000,
+    webSearch: "",
+    image: ""
+  };
+
+  const handleRouterChange = (field: string, value: string | number) => {
+    // Handle case where config.Router might be null or undefined
+    const currentRouter = config.Router || {};
+    const newRouter = { ...currentRouter, [field]: value };
+    setConfig({ ...config, Router: newRouter });
+  };
+
+  const handleForceUseImageAgentChange = (value: boolean) => {
+    setConfig({ ...config, forceUseImageAgent: value });
+  };
+
+  // Handle case where config.Providers might be null or undefined
+  const providers = Array.isArray(config.Providers) ? config.Providers : [];
+  
+  const modelOptions = providers.flatMap((provider) => {
+    // Handle case where individual provider might be null or undefined
+    if (!provider) return [];
+    
+    // Handle case where provider.models might be null or undefined
+    const models = Array.isArray(provider.models) ? provider.models : [];
+    
+    // Handle case where provider.name might be null or undefined
+    const providerName = provider.name || "Unknown Provider";
+    
+    return models.map((model) => ({
+      value: `${providerName},${model || "Unknown Model"}`,
+      label: `${providerName}, ${model || "Unknown Model"}`,
+    }));
+  });
+
+  return (
+    <Card className="flex h-full flex-col rounded-lg border shadow-sm">
+      <CardHeader className="border-b p-4">
+        <CardTitle className="text-lg">{t("router.title")}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex-grow space-y-5 overflow-y-auto p-4">
+        <div className="space-y-2">
+          <Label>{t("router.default")}</Label>
+          <Combobox
+            options={modelOptions}
+            value={routerConfig.default || ""}
+            onChange={(value) => handleRouterChange("default", value)}
+            placeholder={t("router.selectModel")}
+            searchPlaceholder={t("router.searchModel")}
+            emptyPlaceholder={t("router.noModelFound")}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t("router.background")}</Label>
+          <Combobox
+            options={modelOptions}
+            value={routerConfig.background || ""}
+            onChange={(value) => handleRouterChange("background", value)}
+            placeholder={t("router.selectModel")}
+            searchPlaceholder={t("router.searchModel")}
+            emptyPlaceholder={t("router.noModelFound")}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t("router.think")}</Label>
+          <Combobox
+            options={modelOptions}
+            value={routerConfig.think || ""}
+            onChange={(value) => handleRouterChange("think", value)}
+            placeholder={t("router.selectModel")}
+            searchPlaceholder={t("router.searchModel")}
+            emptyPlaceholder={t("router.noModelFound")}
+          />
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Label>{t("router.longContext")}</Label>
+              <Combobox
+                options={modelOptions}
+                value={routerConfig.longContext || ""}
+                onChange={(value) => handleRouterChange("longContext", value)}
+                placeholder={t("router.selectModel")}
+                searchPlaceholder={t("router.searchModel")}
+                emptyPlaceholder={t("router.noModelFound")}
+              />
+            </div>
+            <div className="w-48">
+              <Label>{t("router.longContextThreshold")}</Label>
+              <Input
+                type="number"
+                value={routerConfig.longContextThreshold || 60000}
+                onChange={(e) => handleRouterChange("longContextThreshold", parseInt(e.target.value) || 60000)}
+                placeholder="60000"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Label>{t("router.webSearch")}</Label>
+          <Combobox
+            options={modelOptions}
+            value={routerConfig.webSearch || ""}
+            onChange={(value) => handleRouterChange("webSearch", value)}
+            placeholder={t("router.selectModel")}
+            searchPlaceholder={t("router.searchModel")}
+            emptyPlaceholder={t("router.noModelFound")}
+          />
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Label>{t("router.image")} (beta)</Label>
+              <Combobox
+                options={modelOptions}
+                value={routerConfig.image || ""}
+                onChange={(value) => handleRouterChange("image", value)}
+                placeholder={t("router.selectModel")}
+                searchPlaceholder={t("router.searchModel")}
+                emptyPlaceholder={t("router.noModelFound")}
+              />
+            </div>
+            <div className="w-48">
+              <Label htmlFor="forceUseImageAgent">{t("router.forceUseImageAgent")}</Label>
+              <select
+                id="forceUseImageAgent"
+                value={config.forceUseImageAgent ? "true" : "false"}
+                onChange={(e) => handleForceUseImageAgentChange(e.target.value === "true")}
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <option value="false">{t("common.no")}</option>
+                <option value="true">{t("common.yes")}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

packages/ui/src/components/SettingsDialog.tsx

@@ -0,0 +1,248 @@
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Combobox } from "@/components/ui/combobox";
+import { useConfig } from "./ConfigProvider";
+import { StatusLineConfigDialog } from "./StatusLineConfigDialog";
+import { useState } from "react";
+import type { StatusLineConfig } from "@/types";
+
+interface SettingsDialogProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+}
+
+export function SettingsDialog({ isOpen, onOpenChange }: SettingsDialogProps) {
+  const { t } = useTranslation();
+  const { config, setConfig } = useConfig();
+  const [isStatusLineConfigOpen, setIsStatusLineConfigOpen] = useState(false);
+
+  if (!config) {
+    return null;
+  }
+
+  const handleLogChange = (checked: boolean) => {
+    setConfig({ ...config, LOG: checked });
+  };
+
+  const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setConfig({ ...config, CLAUDE_PATH: e.target.value });
+  };
+
+  const handleStatusLineEnabledChange = (checked: boolean) => {
+    // Ensure we have a complete StatusLineConfig object
+    const newStatusLineConfig: StatusLineConfig = {
+      enabled: checked,
+      currentStyle: config.StatusLine?.currentStyle || "default",
+      default: config.StatusLine?.default || { modules: [] },
+      powerline: config.StatusLine?.powerline || { modules: [] },
+    };
+
+    setConfig({
+      ...config,
+      StatusLine: newStatusLineConfig,
+    });
+  };
+
+  const openStatusLineConfig = () => {
+    setIsStatusLineConfigOpen(true);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange} >
+      <DialogContent data-testid="settings-dialog" className="max-h-[80vh] flex flex-col p-0">
+        <DialogHeader className="p-4 pb-0">
+          <DialogTitle>{t("toplevel.title")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 p-4 px-8 overflow-y-auto flex-1">
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="log"
+              checked={config.LOG}
+              onCheckedChange={handleLogChange}
+            />
+            <Label
+              htmlFor="log"
+              className="transition-all-ease hover:scale-[1.02] cursor-pointer"
+            >
+              {t("toplevel.log")}
+            </Label>
+          </div>
+          {/* StatusLine Configuration */}
+          <div className="space-y-2 border-t pt-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="statusline"
+                  checked={config.StatusLine?.enabled || false}
+                  onCheckedChange={handleStatusLineEnabledChange}
+                />
+                <Label
+                  htmlFor="statusline"
+                  className="transition-all-ease hover:scale-[1.02] cursor-pointer"
+                >
+                  {t("statusline.title")}
+                </Label>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={openStatusLineConfig}
+                className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]"
+                data-testid="statusline-config-button"
+              >
+                {t("app.settings")}
+              </Button>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="log-level" className="transition-all-ease hover:scale-[1.01] cursor-pointer">{t("toplevel.log_level")}</Label>
+            <Combobox
+              options={[
+                { label: "fatal", value: "fatal" },
+                { label: "error", value: "error" },
+                { label: "warn", value: "warn" },
+                { label: "info", value: "info" },
+                { label: "debug", value: "debug" },
+                { label: "trace", value: "trace" },
+              ]}
+              value={config.LOG_LEVEL}
+              onChange={(value) => setConfig({ ...config, LOG_LEVEL: value })}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="claude-path"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.claude_path")}
+            </Label>
+            <Input
+              id="claude-path"
+              value={config.CLAUDE_PATH}
+              onChange={handlePathChange}
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="host"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.host")}
+            </Label>
+            <Input
+              id="host"
+              value={config.HOST}
+              onChange={(e) => setConfig({ ...config, HOST: e.target.value })}
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="port"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.port")}
+            </Label>
+            <Input
+              id="port"
+              type="number"
+              value={config.PORT}
+              onChange={(e) =>
+                setConfig({ ...config, PORT: parseInt(e.target.value, 10) })
+              }
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="timeout"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.timeout")}
+            </Label>
+            <Input
+              id="timeout"
+              value={config.API_TIMEOUT_MS}
+              onChange={(e) =>
+                setConfig({ ...config, API_TIMEOUT_MS: e.target.value })
+              }
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="proxy-url"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.proxy_url")}
+            </Label>
+            <Input
+              id="proxy-url"
+              value={config.PROXY_URL}
+              onChange={(e) =>
+                setConfig({ ...config, PROXY_URL: e.target.value })
+              }
+              placeholder="http://127.0.0.1:7890"
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="apikey"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.apikey")}
+            </Label>
+            <Input
+              id="apikey"
+              type="password"
+              value={config.APIKEY}
+              onChange={(e) => setConfig({ ...config, APIKEY: e.target.value })}
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="custom-router-path"
+              className="transition-all-ease hover:scale-[1.01] cursor-pointer"
+            >
+              {t("toplevel.custom_router_path")}
+            </Label>
+            <Input
+              id="custom-router-path"
+              value={config.CUSTOM_ROUTER_PATH || ""}
+              onChange={(e) => setConfig({ ...config, CUSTOM_ROUTER_PATH: e.target.value })}
+              placeholder={t("toplevel.custom_router_path_placeholder")}
+              className="transition-all-ease focus:scale-[1.01]"
+            />
+          </div>
+        </div>
+        <DialogFooter className="p-4 pt-0">
+          <Button
+            onClick={() => onOpenChange(false)}
+            className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]"
+          >
+            {t("app.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+
+      <StatusLineConfigDialog
+        isOpen={isStatusLineConfigOpen}
+        onOpenChange={setIsStatusLineConfigOpen}
+        data-testid="statusline-config-dialog"
+      />
+    </Dialog>
+  );
+}

packages/ui/src/components/StatusLineImportExport.tsx

@@ -0,0 +1,309 @@
+import { useTranslation } from "react-i18next";
+import React, { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { validateStatusLineConfig, backupConfig, restoreConfig, createDefaultStatusLineConfig } from "@/utils/statusline";
+import type { StatusLineConfig } from "@/types";
+
+interface StatusLineImportExportProps {
+  config: StatusLineConfig;
+  onImport: (config: StatusLineConfig) => void;
+  onShowToast: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+export function StatusLineImportExport({ config, onImport, onShowToast }: StatusLineImportExportProps) {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isImporting, setIsImporting] = useState(false);
+
+  // 导出配置为JSON文件
+  const handleExport = () => {
+    try {
+      // 在导出前验证配置
+      const validationResult = validateStatusLineConfig(config);
+      
+      if (!validationResult.isValid) {
+        onShowToast(t("statusline.export_validation_failed"), 'error');
+        return;
+      }
+      
+      const dataStr = JSON.stringify(config, null, 2);
+      const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`;
+      
+      const exportFileDefaultName = `statusline-config-${new Date().toISOString().slice(0, 10)}.json`;
+      
+      const linkElement = document.createElement('a');
+      linkElement.setAttribute('href', dataUri);
+      linkElement.setAttribute('download', exportFileDefaultName);
+      linkElement.click();
+      
+      onShowToast(t("statusline.export_success"), 'success');
+    } catch (error) {
+      console.error("Export failed:", error);
+      onShowToast(t("statusline.export_failed"), 'error');
+    }
+  };
+
+  // 导入配置从JSON文件
+  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setIsImporting(true);
+    
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const importedConfig = JSON.parse(content) as StatusLineConfig;
+        
+        // 验证导入的配置
+        const validationResult = validateStatusLineConfig(importedConfig);
+        
+        if (!validationResult.isValid) {
+          // 格式化错误信息
+          const errorMessages = validationResult.errors.map(error => 
+            error.message
+          ).join('; ');
+          throw new Error(`${t("statusline.invalid_config")}: ${errorMessages}`);
+        }
+        
+        onImport(importedConfig);
+        onShowToast(t("statusline.import_success"), 'success');
+      } catch (error) {
+        console.error("Import failed:", error);
+        onShowToast(t("statusline.import_failed") + (error instanceof Error ? `: ${error.message}` : ""), 'error');
+      } finally {
+        setIsImporting(false);
+        // 重置文件输入，以便可以再次选择同一个文件
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      }
+    };
+    
+    reader.onerror = () => {
+      onShowToast(t("statusline.import_failed"), 'error');
+      setIsImporting(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    };
+    
+    reader.readAsText(file);
+  };
+
+  // 下载配置模板
+  const handleDownloadTemplate = () => {
+    try {
+      // 使用新的默认配置函数
+      const templateConfig = createDefaultStatusLineConfig();
+      
+      const dataStr = JSON.stringify(templateConfig, null, 2);
+      const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`;
+      
+      const templateFileName = "statusline-config-template.json";
+      
+      const linkElement = document.createElement('a');
+      linkElement.setAttribute('href', dataUri);
+      linkElement.setAttribute('download', templateFileName);
+      linkElement.click();
+      
+      onShowToast(t("statusline.template_download_success"), 'success');
+    } catch (error) {
+      console.error("Template download failed:", error);
+      onShowToast(t("statusline.template_download_failed"), 'error');
+    }
+  };
+
+  // 配置备份功能
+  const handleBackup = () => {
+    try {
+      const backupStr = backupConfig(config);
+      const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(backupStr)}`;
+      
+      const backupFileName = `statusline-backup-${new Date().toISOString().slice(0, 10)}.json`;
+      
+      const linkElement = document.createElement('a');
+      linkElement.setAttribute('href', dataUri);
+      linkElement.setAttribute('download', backupFileName);
+      linkElement.click();
+      
+      onShowToast(t("statusline.backup_success"), 'success');
+    } catch (error) {
+      console.error("Backup failed:", error);
+      onShowToast(t("statusline.backup_failed"), 'error');
+    }
+  };
+
+  // 配置恢复功能
+  const handleRestore = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const restoredConfig = restoreConfig(content);
+        
+        if (!restoredConfig) {
+          throw new Error(t("statusline.invalid_backup_file"));
+        }
+        
+        // 验证恢复的配置
+        const validationResult = validateStatusLineConfig(restoredConfig);
+        
+        if (!validationResult.isValid) {
+          // 格式化错误信息
+          const errorMessages = validationResult.errors.map(error => 
+            error.message
+          ).join('; ');
+          throw new Error(`${t("statusline.invalid_config")}: ${errorMessages}`);
+        }
+        
+        onImport(restoredConfig);
+        onShowToast(t("statusline.restore_success"), 'success');
+      } catch (error) {
+        console.error("Restore failed:", error);
+        onShowToast(t("statusline.restore_failed") + (error instanceof Error ? `: ${error.message}` : ""), 'error');
+      } finally {
+        // 重置文件输入
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      }
+    };
+    
+    reader.onerror = () => {
+      onShowToast(t("statusline.restore_failed"), 'error');
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    };
+    
+    reader.readAsText(file);
+  };
+
+  // 移除本地验证函数，因为我们现在使用utils中的验证函数
+
+  return (
+    <Card className="transition-all hover:shadow-md">
+      <CardHeader className="p-4">
+        <CardTitle className="text-lg flex items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="17 8 12 3 7 8"/>
+            <line x1="12" y1="3" x2="12" y2="15"/>
+          </svg>
+          {t("statusline.import_export")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 px-4 pb-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div className="grid grid-cols-2 gap-3">
+            <Button 
+              onClick={handleExport} 
+              variant="outline" 
+              className="transition-all hover:scale-105"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="7 10 12 15 17 10"/>
+                <line x1="12" y1="15" x2="12" y2="3"/>
+              </svg>
+              {t("statusline.export")}
+            </Button>
+            
+            <Button 
+              onClick={() => fileInputRef.current?.click()} 
+              variant="outline" 
+              disabled={isImporting}
+              className="transition-all hover:scale-105"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="17 8 12 3 7 8"/>
+                <line x1="12" y1="3" x2="12" y2="15"/>
+              </svg>
+              {t("statusline.import")}
+            </Button>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-3">
+            <Button 
+              onClick={handleBackup} 
+              variant="outline" 
+              className="transition-all hover:scale-105"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+                <line x1="16" y1="13" x2="8" y2="13"/>
+                <line x1="16" y1="17" x2="8" y2="17"/>
+                <polyline points="10 9 9 9 8 9"/>
+              </svg>
+              {t("statusline.backup")}
+            </Button>
+            
+            <Button 
+              onClick={() => {
+                // 创建一个隐藏的文件输入用于恢复
+                const restoreInput = document.createElement('input');
+                restoreInput.type = 'file';
+                restoreInput.accept = '.json';
+                restoreInput.onchange = (e) => handleRestore(e as any);
+                restoreInput.click();
+              }} 
+              variant="outline" 
+              className="transition-all hover:scale-105"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+                <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>
+              </svg>
+              {t("statusline.restore")}
+            </Button>
+          </div>
+          
+          <Button 
+            onClick={handleDownloadTemplate} 
+            variant="outline" 
+            className="transition-all hover:scale-105 sm:col-span-2"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14 2 14 8 20 8"/>
+              <line x1="16" y1="13" x2="8" y2="13"/>
+              <line x1="16" y1="17" x2="8" y2="17"/>
+              <polyline points="10 9 9 9 8 9"/>
+            </svg>
+            {t("statusline.download_template")}
+          </Button>
+        </div>
+        
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleImport}
+          accept=".json"
+          className="hidden"
+        />
+        
+        <div className="p-3 bg-secondary/50 rounded-md">
+          <div className="flex items-start gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground mt-0.5 flex-shrink-0">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="16" x2="12" y2="12"/>
+              <line x1="12" y1="8" x2="12.01" y2="8"/>
+            </svg>
+            <div>
+              <p className="text-xs text-muted-foreground">
+                {t("statusline.import_export_help")}
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

packages/ui/src/components/TransformerList.tsx

@@ -0,0 +1,92 @@
+import { Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Transformer } from "@/types";
+
+interface TransformerListProps {
+  transformers: Transformer[];
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+}
+
+export function TransformerList({ transformers, onEdit, onRemove }: TransformerListProps) {
+  // Handle case where transformers might be null or undefined
+  if (!transformers || !Array.isArray(transformers)) {
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center justify-center rounded-md border bg-white p-8 text-gray-500">
+          No transformers configured
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {transformers.map((transformer, index) => {
+        // Handle case where individual transformer might be null or undefined
+        if (!transformer) {
+          return (
+            <div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
+              <div className="flex-1 space-y-1.5">
+                <p className="text-md font-semibold text-gray-800">Invalid Transformer</p>
+                <p className="text-sm text-gray-500">Transformer data is missing</p>
+              </div>
+              <div className="ml-4 flex flex-shrink-0 items-center gap-2">
+                <Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110" disabled>
+                  <Pencil className="h-4 w-4" />
+                </Button>
+                <Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
+                  <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
+                </Button>
+              </div>
+            </div>
+          );
+        }
+
+        // Handle case where transformer.path might be null or undefined
+        const transformerPath = transformer.path || "Unnamed Transformer";
+        
+        // Handle case where transformer.parameters might be null or undefined
+        const options = transformer.options || {};
+        
+        // Render parameters as tags in a single line
+        const renderParameters = () => {
+          if (!options || Object.keys(options).length === 0) {
+            return <p className="text-sm text-gray-500">No parameters configured</p>;
+          }
+          
+          return (
+            <div className="flex flex-wrap gap-2 max-h-8 overflow-hidden">
+              {Object.entries(options).map(([key, value]) => (
+                <span 
+                  key={key} 
+                  className="inline-flex items-center px-2 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-700 border"
+                >
+                  <span className="text-gray-600">{key}:</span>
+                  <span className="ml-1 text-gray-800">{String(value)}</span>
+                </span>
+              ))}
+            </div>
+          );
+        };
+
+        return (
+          <div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
+            <div className="flex-1 space-y-1.5">
+              <p className="text-md font-semibold text-gray-800">{transformerPath}</p>
+              {renderParameters()}
+            </div>
+            <div className="ml-4 flex flex-shrink-0 items-center gap-2">
+              <Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110">
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
+                <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/ui/src/components/Transformers.tsx

@@ -0,0 +1,236 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Plus, Trash2 } from "lucide-react";
+import { useConfig } from "./ConfigProvider";
+import { TransformerList } from "./TransformerList";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export function Transformers() {
+  const { t } = useTranslation();
+  const { config, setConfig } = useConfig();
+  const [editingTransformerIndex, setEditingTransformerIndex] = useState<number | null>(null);
+  const [deletingTransformerIndex, setDeletingTransformerIndex] = useState<number | null>(null);
+  const [newTransformer, setNewTransformer] = useState<{ name?: string; path: string; options: { [key: string]: string } } | null>(null);
+
+  // Handle case where config is null or undefined
+  if (!config) {
+    return (
+      <Card className="flex h-full flex-col rounded-lg border shadow-sm">
+        <CardHeader className="flex flex-row items-center justify-between border-b p-4">
+          <CardTitle className="text-lg">{t("transformers.title")}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex-grow flex items-center justify-center p-4">
+          <div className="text-gray-500">Loading transformers configuration...</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Validate config.Transformers to ensure it's an array
+  const validTransformers = Array.isArray(config.transformers) ? config.transformers : [];
+
+  const handleAddTransformer = () => {
+    const newTransformer = { name: "", path: "",  options: {} };
+    setNewTransformer(newTransformer);
+    setEditingTransformerIndex(validTransformers.length); // Use the length as index for the new item
+  };
+
+  const handleRemoveTransformer = (index: number) => {
+    const newTransformers = [...validTransformers];
+    newTransformers.splice(index, 1);
+    setConfig({ ...config, transformers: newTransformers });
+    setDeletingTransformerIndex(null);
+  };
+
+  const handleTransformerChange = (index: number, field: string, value: string, parameterKey?: string) => {
+    if (index < validTransformers.length) {
+      // Editing an existing transformer
+      const newTransformers = [...validTransformers];
+      if (parameterKey !== undefined) {
+        newTransformers[index].options![parameterKey] = value;
+      } else {
+        (newTransformers[index] as unknown as Record<string, unknown>)[field] = value;
+      }
+      setConfig({ ...config, transformers: newTransformers });
+    } else {
+      // Editing the new transformer
+      if (newTransformer) {
+        const updatedTransformer = { ...newTransformer };
+        if (parameterKey !== undefined) {
+          updatedTransformer.options![parameterKey] = value;
+        } else {
+          (updatedTransformer as Record<string, unknown>)[field] = value;
+        }
+        setNewTransformer(updatedTransformer);
+      }
+    }
+  };
+
+  const editingTransformer = editingTransformerIndex !== null ? 
+    (editingTransformerIndex < validTransformers.length ? 
+      validTransformers[editingTransformerIndex] : 
+      newTransformer) : 
+    null;
+
+  const handleSaveTransformer = () => {
+    if (newTransformer && editingTransformerIndex === validTransformers.length) {
+      // Saving a new transformer
+      const newTransformers = [...validTransformers, newTransformer];
+      setConfig({ ...config, transformers: newTransformers });
+    }
+    // Close the dialog
+    setEditingTransformerIndex(null);
+    setNewTransformer(null);
+  };
+
+  const handleCancelTransformer = () => {
+    // Close the dialog without saving
+    setEditingTransformerIndex(null);
+    setNewTransformer(null);
+  };
+
+  return (
+    <Card className="flex h-full flex-col rounded-lg border shadow-sm">
+      <CardHeader className="flex flex-row items-center justify-between border-b p-4">
+        <CardTitle className="text-lg">{t("transformers.title")} <span className="text-sm font-normal text-gray-500">({validTransformers.length})</span></CardTitle>
+        <Button onClick={handleAddTransformer}>{t("transformers.add")}</Button>
+      </CardHeader>
+      <CardContent className="flex-grow overflow-y-auto p-4">
+        <TransformerList
+          transformers={validTransformers}
+          onEdit={setEditingTransformerIndex}
+          onRemove={setDeletingTransformerIndex}
+        />
+      </CardContent>
+
+      {/* Edit Dialog */}
+      <Dialog open={editingTransformerIndex !== null} onOpenChange={handleCancelTransformer}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("transformers.edit")}</DialogTitle>
+          </DialogHeader>
+          {editingTransformer && editingTransformerIndex !== null && (
+            <div className="space-y-4 py-4 px-6 max-h-96 overflow-y-auto">
+              <div className="space-y-2">
+                <Label htmlFor="transformer-path">{t("transformers.path")}</Label>
+                <Input 
+                  id="transformer-path" 
+                  value={editingTransformer.path || ''} 
+                  onChange={(e) => handleTransformerChange(editingTransformerIndex, "path", e.target.value)} 
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>{t("transformers.parameters")}</Label>
+                  <Button 
+                    variant="outline" 
+                    size="sm"
+                    onClick={() => {
+                      const parameters = editingTransformer.options || {};
+                      const newKey = `param${Object.keys(parameters).length + 1}`;
+                      if (editingTransformerIndex !== null) {
+                        const newParameters = { ...parameters, [newKey]: "" };
+                        if (editingTransformerIndex < validTransformers.length) {
+                          const newTransformers = [...validTransformers];
+                          newTransformers[editingTransformerIndex].options = newParameters;
+                          setConfig({ ...config, transformers: newTransformers });
+                        } else if (newTransformer) {
+                          setNewTransformer({ ...newTransformer, options: newParameters });
+                        }
+                      }
+                    }}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+                {Object.entries(editingTransformer.options || {}).map(([key, value]) => (
+                  <div key={key} className="flex items-center gap-2">
+                    <Input 
+                      value={key} 
+                      onChange={(e) => {
+                        const parameters = editingTransformer.options || {};
+                        const newParameters = { ...parameters };
+                        delete newParameters[key];
+                        newParameters[e.target.value] = value;
+                        if (editingTransformerIndex !== null) {
+                          if (editingTransformerIndex < validTransformers.length) {
+                            const newTransformers = [...validTransformers];
+                            newTransformers[editingTransformerIndex].options = newParameters;
+                            setConfig({ ...config, transformers: newTransformers });
+                          } else if (newTransformer) {
+                            setNewTransformer({ ...newTransformer, options: newParameters });
+                          }
+                        }
+                      }}
+                      className="flex-1"
+                    />
+                    <Input 
+                      value={value} 
+                      onChange={(e) => {
+                        if (editingTransformerIndex !== null) {
+                          handleTransformerChange(editingTransformerIndex, "parameters", e.target.value, key);
+                        }
+                      }}
+                      className="flex-1"
+                    />
+                    <Button 
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        if (editingTransformerIndex !== null) {
+                          const parameters = editingTransformer.options || {};
+                          const newParameters = { ...parameters };
+                          delete newParameters[key];
+                          if (editingTransformerIndex < validTransformers.length) {
+                            const newTransformers = [...validTransformers];
+                            newTransformers[editingTransformerIndex].options = newParameters;
+                            setConfig({ ...config, transformers: newTransformers });
+                          } else if (newTransformer) {
+                            setNewTransformer({ ...newTransformer, options: newParameters });
+                          }
+                        }
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancelTransformer}>{t("app.cancel")}</Button>
+            <Button onClick={handleSaveTransformer}>{t("app.save")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deletingTransformerIndex !== null} onOpenChange={() => setDeletingTransformerIndex(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("transformers.delete")}</DialogTitle>
+            <DialogDescription>
+              {t("transformers.delete_transformer_confirm")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeletingTransformerIndex(null)}>{t("app.cancel")}</Button>
+            <Button variant="destructive" onClick={() => deletingTransformerIndex !== null && handleRemoveTransformer(deletingTransformerIndex)}>{t("app.delete")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}

packages/ui/src/components/ui/badge.tsx

@@ -0,0 +1,38 @@
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Badge, badgeVariants }

packages/ui/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "border border-destructive/50 text-destructive hover:bg-destructive hover:text-destructive-foreground",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants }

packages/ui/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

packages/ui/src/components/ui/color-picker.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { useTranslation } from "react-i18next"
+import { HexColorPicker } from "react-colorful"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+
+interface ColorPickerProps {
+  value?: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  showPreview?: boolean;
+}
+
+// 获取颜色值的函数
+const getColorValue = (color: string): string => {
+  // 如果是十六进制颜色
+  if (color.startsWith("#")) {
+    return color
+  }
+  
+  // 默认返回黑色
+  return "#000000"
+}
+
+export function ColorPicker({
+  value = "",
+  onChange,
+  placeholder,
+  showPreview = true
+}: ColorPickerProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = React.useState(false)
+  const [customColor, setCustomColor] = React.useState("")
+  
+  // 当value变化时更新customColor
+  React.useEffect(() => {
+    if (value.startsWith("#")) {
+      setCustomColor(value)
+    } else {
+      setCustomColor("")
+    }
+  }, [value])
+
+  const handleColorChange = (color: string) => {
+    onChange(color)
+  }
+
+  const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const color = e.target.value
+    setCustomColor(color)
+    // 验证十六进制颜色格式
+    if (/^#[0-9A-F]{6}$/i.test(color)) {
+      handleColorChange(color)
+    }
+  }
+
+  
+  const selectedColorValue = getColorValue(value)
+
+  return (
+    <div className="space-y-2">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "w-full justify-start text-left font-normal h-10 transition-all hover:scale-[1.02] active:scale-[0.98]",
+              !value && "text-muted-foreground"
+            )}
+          >
+            <div className="flex items-center gap-2 w-full">
+              {showPreview && (
+                <div 
+                  className="h-5 w-5 rounded border shadow-sm" 
+                  style={{ backgroundColor: selectedColorValue }}
+                />
+              )}
+              <span className="truncate flex-1">
+                {value || placeholder || t('color_picker.placeholder')}
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="m7 15 5 5 5-5"/>
+                <path d="m7 9 5-5 5 5"/>
+              </svg>
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-72 p-3" align="start">
+          <div className="space-y-4">
+            {/* 颜色选择器标题 */}
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-semibold">{t('color_picker.title')}</h4>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() => handleColorChange("")}
+              >
+                {t('color_picker.clear')}
+              </Button>
+            </div>
+            
+            {/* 颜色预览 */}
+            <div className="flex items-center gap-2 p-2 rounded-md bg-secondary">
+              <div 
+                className="h-8 w-8 rounded border shadow-sm" 
+                style={{ backgroundColor: selectedColorValue }}
+              />
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium truncate">
+                  {value || t('color_picker.no_color_selected')}
+                </div>
+                {value && value.startsWith("#") && (
+                  <div className="text-xs text-muted-foreground font-mono">
+                    {value.toUpperCase()}
+                  </div>
+                )}
+              </div>
+            </div>
+            
+            {/* 颜色选择器 */}
+            <div className="rounded-md overflow-hidden border">
+              <HexColorPicker 
+                color={selectedColorValue} 
+                onChange={handleColorChange} 
+                className="w-full" 
+              />
+            </div>
+            
+            {/* 自定义颜色输入 */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('color_picker.custom_color')}</label>
+              <div className="flex gap-2">
+                <Input
+                  type="text"
+                  value={customColor}
+                  onChange={handleCustomColorChange}
+                  placeholder="#RRGGBB"
+                  className="font-mono flex-1"
+                />
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    if (customColor && /^#[0-9A-F]{6}$/i.test(customColor)) {
+                      handleColorChange(customColor)
+                      setOpen(false)
+                    }
+                  }}
+                  disabled={!customColor || !/^#[0-9A-F]{6}$/i.test(customColor)}
+                >
+                  {t('color_picker.apply')}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t('color_picker.hex_input_help')}
+              </p>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

packages/ui/src/components/ui/combo-input.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface ComboInputProps {
+  options: { label: string; value: string }[];
+  value?: string;
+  onChange: (value: string) => void;
+  onEnter?: (value: string) => void;
+  searchPlaceholder?: string;
+  emptyPlaceholder?: string;
+  inputPlaceholder?: string;
+}
+
+export const ComboInput = React.forwardRef<HTMLInputElement, ComboInputProps>(({
+  options,
+  value,
+  onChange,
+  onEnter,
+  searchPlaceholder = "Search...",
+  emptyPlaceholder = "No options found.",
+  inputPlaceholder = "Type or select...",
+}, ref) => {
+  const [open, setOpen] = React.useState(false)
+  const [inputValue, setInputValue] = React.useState(value || "")
+  const internalInputRef = React.useRef<HTMLInputElement>(null)
+
+  // Forward ref to the internal input
+  React.useImperativeHandle(ref, () => internalInputRef.current as HTMLInputElement)
+
+  React.useEffect(() => {
+    setInputValue(value || "")
+  }, [value])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setInputValue(newValue)
+    onChange(newValue)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && inputValue.trim() && onEnter) {
+      onEnter(inputValue.trim())
+      setInputValue("")
+    }
+  }
+
+  const handleSelect = (selectedValue: string) => {
+    setInputValue(selectedValue)
+    onChange(selectedValue)
+    if (onEnter) {
+      onEnter(selectedValue)
+      setInputValue("")
+    }
+    setOpen(false)
+  }
+
+  // Function to get current value for external access
+  const getCurrentValue = () => inputValue
+
+  // Expose methods through the ref
+  React.useImperativeHandle(ref, () => ({
+    ...internalInputRef.current!,
+    value: inputValue,
+    getCurrentValue,
+    clearInput: () => {
+      setInputValue("")
+      onChange("")
+    }
+  }))
+
+  return (
+    <div className="relative">
+      <Input
+        ref={internalInputRef}
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder={inputPlaceholder}
+        className="pr-10"
+      />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          >
+            <ChevronsUpDown className="h-4 w-4 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0 animate-fade-in">
+          <Command>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => handleSelect(option.value)}
+                    className="transition-all-ease hover:bg-accent hover:text-accent-foreground"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4 transition-opacity",
+                        value === option.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {option.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+})

packages/ui/src/components/ui/combobox.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface ComboboxProps {
+  options: { label: string; value: string }[];
+  value?: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyPlaceholder?: string;
+}
+
+export function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyPlaceholder = "No options found.",
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const selectedOption = options.find((option) => option.value === value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between transition-all-ease hover:scale-[1.02] active:scale-[0.98]"
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0 animate-fade-in">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                  className="transition-all-ease hover:bg-accent hover:text-accent-foreground"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4 transition-opacity",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

packages/ui/src/components/ui/command.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

packages/ui/src/components/ui/dialog.tsx

@@ -0,0 +1,125 @@
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<(
+  React.ElementRef<typeof DialogPrimitive.Overlay>
+), (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+)>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<(
+  React.ElementRef<typeof DialogPrimitive.Content>
+), (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+)>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg animate-scale-in",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground transition-all-ease hover:scale-110">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<(
+  React.ElementRef<typeof DialogPrimitive.Title>
+), (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+)>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<(
+  React.ElementRef<typeof DialogPrimitive.Description>
+), (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+)>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

packages/ui/src/components/ui/input.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    const isNumeric = type === "number";
+    const [tempValue, setTempValue] = React.useState(props.value?.toString() || '');
+    
+    React.useEffect(() => {
+      if (props.value !== undefined) {
+        setTempValue(props.value.toString());
+      }
+    }, [props.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      
+      if (isNumeric) {
+        // Only allow empty string or numbers for numeric input
+        if (newValue === '' || /^\d+$/.test(newValue)) {
+          setTempValue(newValue);
+          // Only call onChange if the value is not empty
+          if (props.onChange && newValue !== '') {
+            props.onChange(e);
+          }
+        }
+      } else {
+        setTempValue(newValue);
+        if (props.onChange) {
+          props.onChange(e);
+        }
+      }
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      if (isNumeric && tempValue === '') {
+        const defaultValue = props.placeholder || "1";
+        setTempValue(defaultValue);
+        
+        // Create a synthetic event for the corrected value
+        if (props.onChange) {
+          const syntheticEvent = {
+            ...e,
+            target: { ...e.target, value: defaultValue }
+          } as React.ChangeEvent<HTMLInputElement>;
+          
+          props.onChange(syntheticEvent);
+        }
+      }
+      
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    };
+
+    // For numeric inputs, use text type and manage value internally
+    const inputType = isNumeric ? "text" : type;
+    const inputValue = isNumeric ? tempValue : props.value;
+
+    return (
+      <input
+        {...props}
+        type={inputType}
+        value={inputValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

packages/ui/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

packages/ui/src/components/ui/multi-combobox.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Badge } from "@/components/ui/badge"
+
+interface MultiComboboxProps {
+  options: { label: string; value: string }[];
+  value?: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyPlaceholder?: string;
+}
+
+export function MultiCombobox({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyPlaceholder = "No options found.",
+}: MultiComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  
+  const handleSelect = (currentValue: string) => {
+    if (value.includes(currentValue)) {
+      onChange(value.filter(v => v !== currentValue))
+    } else {
+      onChange([...value, currentValue])
+    }
+  }
+  
+  const removeValue = (val: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange(value.filter(v => v !== val))
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1">
+        {value.map((val) => {
+          const option = options.find(opt => opt.value === val)
+          return (
+            <Badge key={val} variant="outline" className="font-normal">
+              {option?.label || val}
+              <button
+                onClick={(e) => removeValue(val, e)}
+                className="ml-1 rounded-full hover:bg-gray-200"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          )
+        })}
+      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between transition-all-ease hover:scale-[1.02] active:scale-[0.98]"
+          >
+            {value.length > 0 ? `${value.length} selected` : placeholder}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0 animate-fade-in">
+          <Command>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => handleSelect(option.value)}
+                    className="transition-all-ease hover:bg-accent hover:text-accent-foreground"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4 transition-opacity",
+                        value.includes(option.value) ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {option.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

packages/ui/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden animate-fade-in",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

packages/ui/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all-ease focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 transition-all-ease"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

packages/ui/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

packages/ui/src/components/ui/toast.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import { CheckCircle, XCircle, AlertCircle, X } from 'lucide-react';
+
+interface ToastProps {
+  message: string;
+  type: 'success' | 'error' | 'warning';
+  onClose: () => void;
+}
+
+export function Toast({ message, type, onClose }: ToastProps) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  const getIcon = () => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle className="h-5 w-5 text-green-500" />;
+      case 'error':
+        return <XCircle className="h-5 w-5 text-red-500" />;
+      case 'warning':
+        return <AlertCircle className="h-5 w-5 text-yellow-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const getBackgroundColor = () => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-100 border-green-200';
+      case 'error':
+        return 'bg-red-100 border-red-200';
+      case 'warning':
+        return 'bg-yellow-100 border-yellow-200';
+      default:
+        return 'bg-gray-100 border-gray-200';
+    }
+  };
+
+  return (
+    <div className={`fixed top-4 right-4 z-50 flex items-center justify-between p-4 rounded-lg border shadow-lg ${getBackgroundColor()} transition-all duration-300 ease-in-out`}>
+      <div className="flex items-center space-x-2">
+        {getIcon()}
+        <span className="text-sm font-medium">{message}</span>
+      </div>
+      <button 
+        onClick={onClose}
+        className="ml-4 text-gray-500 hover:text-gray-700 focus:outline-none"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}

packages/ui/src/i18n.ts

@@ -0,0 +1,28 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import en from "./locales/en.json";
+import zh from "./locales/zh.json";
+
+const resources = {
+  en: {
+    translation: en,
+  },
+  zh: {
+    translation: zh,
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

packages/ui/src/index.css

@@ -0,0 +1,177 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* 美化滚动条 - WebKit浏览器 (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-muted-foreground/30;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+
+  ::-webkit-scrollbar-corner {
+    @apply bg-transparent;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.556 0 0) oklch(0.97 0 0);
+  }
+
+  .dark * {
+    scrollbar-color: oklch(0.708 0 0) oklch(0.269 0 0);
+  }
+}
+
+/* Monaco Editor 调试按钮样式 */
+.debug-button-glyph {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23056bfe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/></svg>') center center no-repeat;
+  background-size: 14px 14px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.debug-button-glyph:hover {
+  opacity: 1;
+}
+
+/* 确保调试按钮在glyph margin中可见 */
+.monaco-editor .margin-view-overlays .debug-button-glyph {
+  display: block !important;
+  width: 16px !important;
+  height: 16px !important;
+  margin: 2px 0;
+}

packages/ui/src/lib/api.ts

@@ -0,0 +1,244 @@
+import type { Config, Provider, Transformer } from '@/types';
+
+// 日志聚合响应类型
+interface GroupedLogsResponse {
+  grouped: boolean;
+  groups: { [reqId: string]: Array<{ timestamp: string; level: string; message: string; source?: string; reqId?: string }> };
+  summary: {
+    totalRequests: number;
+    totalLogs: number;
+    requests: Array<{
+      reqId: string;
+      logCount: number;
+      firstLog: string;
+      lastLog: string;
+    }>;
+  };
+}
+
+// API Client Class for handling requests with baseUrl and apikey authentication
+class ApiClient {
+  private baseUrl: string;
+  private apiKey: string;
+  private tempApiKey: string | null;
+
+  constructor(baseUrl: string = '/api', apiKey: string = '') {
+    this.baseUrl = baseUrl;
+    // Load API key from localStorage if available
+    this.apiKey = apiKey || localStorage.getItem('apiKey') || '';
+    // Load temp API key from URL if available
+    this.tempApiKey = new URLSearchParams(window.location.search).get('tempApiKey');
+  }
+
+  // Update base URL
+  setBaseUrl(url: string) {
+    this.baseUrl = url;
+  }
+
+  // Update API key
+  setApiKey(apiKey: string) {
+    this.apiKey = apiKey;
+    // Save API key to localStorage
+    if (apiKey) {
+      localStorage.setItem('apiKey', apiKey);
+    } else {
+      localStorage.removeItem('apiKey');
+    }
+  }
+  
+  // Update temp API key
+  setTempApiKey(tempApiKey: string | null) {
+    this.tempApiKey = tempApiKey;
+  }
+
+  // Create headers with API key authentication
+  private createHeaders(contentType: string = 'application/json'): HeadersInit {
+    const headers: Record<string, string> = {
+      'Accept': 'application/json',
+    };
+    
+    // Use temp API key if available, otherwise use regular API key
+    if (this.tempApiKey) {
+      headers['X-Temp-API-Key'] = this.tempApiKey;
+    } else if (this.apiKey) {
+      headers['X-API-Key'] = this.apiKey;
+    }
+    
+    if (contentType) {
+      headers['Content-Type'] = contentType;
+    }
+    
+    return headers;
+  }
+
+  // Generic fetch wrapper with base URL and authentication
+  private async apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const url = `${this.baseUrl}${endpoint}`;
+    
+    const config: RequestInit = {
+      ...options,
+      headers: {
+        ...this.createHeaders(),
+        ...options.headers,
+      },
+    };
+    
+    try {
+      const response = await fetch(url, config);
+      
+      // Handle 401 Unauthorized responses
+      if (response.status === 401) {
+        // Remove API key when it's invalid
+        localStorage.removeItem('apiKey');
+        // Redirect to login page if not already there
+        // For memory router, we need to use the router instance
+        // We'll dispatch a custom event that the app can listen to
+        window.dispatchEvent(new CustomEvent('unauthorized'));
+        // Return a promise that never resolves to prevent further execution
+        return new Promise(() => {}) as Promise<T>;
+      }
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+      }
+      
+      if (response.status === 204) {
+        return {} as T;
+      }
+      
+      const text = await response.text();
+      return text ? JSON.parse(text) : ({} as T);
+
+    } catch (error) {
+      console.error('API request error:', error);
+      throw error;
+    }
+  }
+
+  // GET request
+  async get<T>(endpoint: string): Promise<T> {
+    return this.apiFetch<T>(endpoint, {
+      method: 'GET',
+    });
+  }
+
+  // POST request
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.apiFetch<T>(endpoint, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  // PUT request
+  async put<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.apiFetch<T>(endpoint, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  // DELETE request
+  async delete<T>(endpoint: string): Promise<T> {
+    return this.apiFetch<T>(endpoint, {
+      method: 'DELETE',
+    });
+  }
+
+  // API methods for configuration
+  // Get current configuration
+  async getConfig(): Promise<Config> {
+    return this.get<Config>('/config');
+  }
+  
+  // Update entire configuration
+  async updateConfig(config: Config): Promise<Config> {
+    return this.post<Config>('/config', config);
+  }
+  
+  // Get providers
+  async getProviders(): Promise<Provider[]> {
+    return this.get<Provider[]>('/api/providers');
+  }
+  
+  // Add a new provider
+  async addProvider(provider: Provider): Promise<Provider> {
+    return this.post<Provider>('/api/providers', provider);
+  }
+  
+  // Update a provider
+  async updateProvider(index: number, provider: Provider): Promise<Provider> {
+    return this.post<Provider>(`/api/providers/${index}`, provider);
+  }
+  
+  // Delete a provider
+  async deleteProvider(index: number): Promise<void> {
+    return this.delete<void>(`/api/providers/${index}`);
+  }
+  
+  // Get transformers
+  async getTransformers(): Promise<Transformer[]> {
+    return this.get<Transformer[]>('/api/transformers');
+  }
+  
+  // Add a new transformer
+  async addTransformer(transformer: Transformer): Promise<Transformer> {
+    return this.post<Transformer>('/api/transformers', transformer);
+  }
+  
+  // Update a transformer
+  async updateTransformer(index: number, transformer: Transformer): Promise<Transformer> {
+    return this.post<Transformer>(`/api/transformers/${index}`, transformer);
+  }
+  
+  // Delete a transformer
+  async deleteTransformer(index: number): Promise<void> {
+    return this.delete<void>(`/api/transformers/${index}`);
+  }
+  
+  // Get configuration (new endpoint)
+  async getConfigNew(): Promise<Config> {
+    return this.get<Config>('/config');
+  }
+  
+  // Save configuration (new endpoint)
+  async saveConfig(config: Config): Promise<unknown> {
+    return this.post<Config>('/config', config);
+  }
+  
+  // Restart service
+  async restartService(): Promise<unknown> {
+    return this.post<void>('/restart', {});
+  }
+  
+  // Check for updates
+  async checkForUpdates(): Promise<{ hasUpdate: boolean; latestVersion?: string; changelog?: string }> {
+    return this.get<{ hasUpdate: boolean; latestVersion?: string; changelog?: string }>('/update/check');
+  }
+  
+  // Perform update
+  async performUpdate(): Promise<{ success: boolean; message: string }> {
+    return this.post<{ success: boolean; message: string }>('/api/update/perform', {});
+  }
+  
+  // Get log files list
+  async getLogFiles(): Promise<Array<{ name: string; path: string; size: number; lastModified: string }>> {
+    return this.get<Array<{ name: string; path: string; size: number; lastModified: string }>>('/logs/files');
+  }
+  
+  // Get logs from specific file
+  async getLogs(filePath: string): Promise<string[]> {
+    return this.get<string[]>(`/logs?file=${encodeURIComponent(filePath)}`);
+  }
+  
+  // Clear logs from specific file
+  async clearLogs(filePath: string): Promise<void> {
+    return this.delete<void>(`/logs?file=${encodeURIComponent(filePath)}`);
+  }
+}
+
+// Create a default instance of the API client
+export const api = new ApiClient();
+
+// Export the class for creating custom instances
+export default ApiClient;

packages/ui/src/lib/db.ts

@@ -0,0 +1,106 @@
+export interface RequestHistoryItem {
+  id: string;
+  url: string;
+  method: string;
+  headers: string;
+  body: string;
+  timestamp: string;
+  status: number;
+  responseTime: number;
+  responseBody: string;
+  responseHeaders: string;
+}
+
+class RequestHistoryDB {
+  private readonly DB_NAME = 'RequestHistoryDB';
+  private readonly STORE_NAME = 'requests';
+  private readonly VERSION = 1;
+
+  async openDB(): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.DB_NAME, this.VERSION);
+      
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result);
+      
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+        
+        if (!db.objectStoreNames.contains(this.STORE_NAME)) {
+          const store = db.createObjectStore(this.STORE_NAME, { keyPath: 'id' });
+          store.createIndex('timestamp', 'timestamp', { unique: false });
+          store.createIndex('url', 'url', { unique: false });
+          store.createIndex('method', 'method', { unique: false });
+        }
+      };
+    });
+  }
+
+  async saveRequest(request: Omit<RequestHistoryItem, 'id' | 'timestamp'>): Promise<void> {
+    const db = await this.openDB();
+    const item: RequestHistoryItem = {
+      ...request,
+      id: Date.now().toString(),
+      timestamp: new Date().toISOString(),
+    };
+    
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(this.STORE_NAME);
+      const request = store.add(item);
+      
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getRequests(limit: number = 50): Promise<RequestHistoryItem[]> {
+    const db = await this.openDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.STORE_NAME], 'readonly');
+      const store = transaction.objectStore(this.STORE_NAME);
+      const index = store.index('timestamp');
+      const request = index.openCursor(null, 'prev');
+      
+      const results: RequestHistoryItem[] = [];
+      
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest).result;
+        if (cursor && results.length < limit) {
+          results.push(cursor.value);
+          cursor.continue();
+        } else {
+          resolve(results);
+        }
+      };
+      
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async deleteRequest(id: string): Promise<void> {
+    const db = await this.openDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(this.STORE_NAME);
+      const request = store.delete(id);
+      
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async clearAllRequests(): Promise<void> {
+    const db = await this.openDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(this.STORE_NAME);
+      const request = store.clear();
+      
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+}
+
+export const requestHistoryDB = new RequestHistoryDB();

packages/ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/ui/src/locales/en.json

@@ -0,0 +1,237 @@
+{
+  "common": {
+    "yes": "Yes",
+    "no": "No"
+  },
+  "app": {
+    "title": "Claude Code Router",
+    "save": "Save",
+    "save_and_restart": "Save and Restart",
+    "cancel": "Cancel",
+    "edit": "Edit",
+    "remove": "Remove",
+    "delete": "Delete",
+    "settings": "Settings",
+    "selectFile": "Select File",
+    "config_saved_success": "Config saved successfully",
+    "config_saved_failed": "Failed to save config",
+    "config_saved_restart_success": "Config saved and service restarted successfully",
+    "config_saved_restart_failed": "Failed to save config and restart service",
+    "new_version_available": "New Version Available",
+    "update_description": "A new version is available. Please review the changelog and update to get the latest features and improvements.",
+    "no_changelog_available": "No changelog available",
+    "later": "Later",
+    "update_now": "Update Now",
+    "no_updates_available": "No updates available",
+    "update_check_failed": "Failed to check for updates",
+    "update_successful": "Update successful",
+    "update_failed": "Update failed"
+  },
+  "login": {
+    "title": "Sign in to your account",
+    "description": "Enter your API key to access the configuration panel",
+    "apiKey": "API Key",
+    "apiKeyPlaceholder": "Enter your API key",
+    "signIn": "Sign In",
+    "invalidApiKey": "Invalid API key",
+    "configError": "Configuration not loaded",
+    "validating": "Validating API key..."
+  },
+  "toplevel": {
+    "title": "General Settings",
+    "log": "Enable Logging",
+    "log_level": "Log Level",
+    "claude_path": "Claude Path",
+    "host": "Host",
+    "port": "Port",
+    "apikey": "API Key",
+    "timeout": "API Timeout (ms)",
+    "proxy_url": "Proxy URL",
+    "custom_router_path": "Custom Router Script Path",
+    "custom_router_path_placeholder": "Enter absolute path to custom router script file"
+  },
+  "transformers": {
+    "title": "Custom Transformers",
+    "path": "Path",
+    "project": "Project",
+    "remove": "Remove",
+    "add": "Add Custom Transformer",
+    "edit": "Edit Custom Transformer",
+    "delete": "Delete Custom Transformer",
+    "delete_transformer_confirm": "Are you sure you want to delete this custom transformer?",
+    "parameters": "Parameters"
+  },
+  "providers": {
+    "title": "Providers",
+    "name": "Name",
+    "api_base_url": "API Full URL",
+    "api_key": "API Key",
+    "models": "Models",
+    "models_placeholder": "Enter model name and press Enter to add",
+    "add_model": "Add Model",
+    "select_models": "Select Models",
+    "remove": "Remove",
+    "add": "Add Provider",
+    "edit": "Edit Provider",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "delete_provider_confirm": "Are you sure you want to delete this provider?",
+    "test_connectivity": "Test Connectivity",
+    "testing": "Testing...",
+    "connection_successful": "Connection successful!",
+    "connection_failed": "Connection failed!",
+    "missing_credentials": "Missing API base URL or API key",
+    "fetch_available_models": "Fetch available models",
+    "fetching_models": "Fetching models...",
+    "fetch_models_failed": "Failed to fetch models",
+    "transformers": "Transformers",
+    "select_transformer": "Select Transformer",
+    "no_transformers": "No transformers available",
+    "provider_transformer": "Provider Transformer",
+    "model_transformers": "Model Transformers",
+    "transformer_parameters": "Transformer Parameters",
+    "add_parameter": "Add Parameter",
+    "parameter_name": "Parameter Name",
+    "parameter_value": "Parameter Value",
+    "selected_transformers": "Selected Transformers",
+    "import_from_template": "Import from template",
+    "no_templates_found": "No templates found",
+    "select_template": "Select a template...",
+    "api_key_required": "API Key is required",
+    "name_required": "Name is required",
+    "name_duplicate": "A provider with this name already exists",
+    "search": "Search providers..."
+
+  },
+  "router": {
+    "title": "Router",
+    "default": "Default",
+    "background": "Background",
+    "think": "Think",
+    "longContext": "Long Context",
+    "longContextThreshold": "Context Threshold",
+    "webSearch": "Web Search",
+    "image": "Image",
+    "forceUseImageAgent": "Force Use Image Agent",
+    "selectModel": "Select a model...",
+    "searchModel": "Search model...",
+    "noModelFound": "No model found."
+  },
+  "json_editor": {
+    "title": "JSON Editor",
+    "save": "Save",
+    "saving": "Saving...",
+    "cancel": "Cancel",
+    "save_failed": "Failed to save config",
+    "save_and_restart": "Save & Restart"
+  },
+  "statusline": {
+    "title": "Status Line Configuration",
+    "enable": "Enable Status Line",
+    "theme": "Theme Style",
+    "theme_default": "Default",
+    "theme_powerline": "Powerline",
+    "modules": "Modules",
+    "module_type": "Type",
+    "module_icon": "Icon",
+    "module_text": "Text",
+    "module_color": "Color",
+    "module_background": "Background",
+    "module_text_description": "Enter display text, variables can be used:",
+    "module_color_description": "Select text color",
+    "module_background_description": "Select background color (optional)",
+    "module_script_path": "Script Path",
+    "module_script_path_description": "Enter the absolute path of the Node.js script file",
+    "add_module": "Add Module",
+    "remove_module": "Remove Module",
+    "delete_module": "Delete Module",
+    "preview": "Preview",
+    "components": "Components",
+    "properties": "Properties",
+    "workDir": "Working Directory",
+    "gitBranch": "Git Branch",
+    "model": "Model",
+    "usage": "Usage",
+    "script": "Script",
+    "background_none": "None",
+    "color_black": "Black",
+    "color_red": "Red",
+    "color_green": "Green",
+    "color_yellow": "Yellow",
+    "color_blue": "Blue",
+    "color_magenta": "Magenta",
+    "color_cyan": "Cyan",
+    "color_white": "White",
+    "color_bright_black": "Bright Black",
+    "color_bright_red": "Bright Red",
+    "color_bright_green": "Bright Green",
+    "color_bright_yellow": "Bright Yellow",
+    "color_bright_blue": "Bright Blue",
+    "color_bright_magenta": "Bright Magenta",
+    "color_bright_cyan": "Bright Cyan",
+    "color_bright_white": "Bright White",
+    "font_placeholder": "Select Font",
+    "theme_placeholder": "Select Theme Style",
+    "icon_placeholder": "Paste icon or search by name...",
+    "icon_description": "Enter icon character, paste icon, or search icons (optional)",
+    "text_placeholder": "e.g.: {{workDirName}}",
+    "script_placeholder": "e.g.: /path/to/your/script.js",
+    "drag_hint": "Drag components here to configure",
+    "select_hint": "Select a component to configure",
+    "no_icons_found": "No icons found",
+    "no_icons_available": "No icons available",
+    "import_export": "Import/Export",
+    "import": "Import Config",
+    "export": "Export Config",
+    "download_template": "Download Template",
+    "import_export_help": "Export current configuration as a JSON file, or import configuration from a JSON file. You can also download a configuration template for reference.",
+    "export_success": "Configuration exported successfully",
+    "export_failed": "Failed to export configuration",
+    "import_success": "Configuration imported successfully",
+    "import_failed": "Failed to import configuration",
+    "invalid_config": "Invalid configuration file",
+    "template_download_success": "Template downloaded successfully",
+    "template_download_success_desc": "Configuration template has been downloaded to your device",
+    "template_download_failed": "Failed to download template"
+  },
+  "color_picker": {
+    "placeholder": "Select color...",
+    "title": "Color Picker",
+    "clear": "Clear",
+    "no_color_selected": "No color selected",
+    "custom_color": "Custom Color",
+    "apply": "Apply",
+    "hex_input_help": "Enter hex color value (e.g.: #FF0000)"
+  },
+  "log_viewer": {
+    "title": "Log Viewer",
+    "close": "Close",
+    "download": "Download",
+    "clear": "Clear",
+    "auto_refresh_on": "Auto Refresh On",
+    "auto_refresh_off": "Auto Refresh Off",
+    "load_failed": "Failed to load logs",
+    "no_logs_available": "No logs available",
+    "logs_cleared": "Logs cleared successfully",
+    "clear_failed": "Failed to clear logs",
+    "logs_downloaded": "Logs downloaded successfully",
+    "back_to_files": "Back to Files",
+    "select_file": "Select a log file to view",
+    "no_log_files_available": "No log files available",
+    "load_files_failed": "Failed to load log files",
+    "group_by_req_id": "Group by Request ID",
+    "grouped_on": "Grouped",
+    "request_groups": "Request Groups",
+    "total_requests": "Total Requests",
+    "total_logs": "Total Logs",
+    "request": "Request",
+    "logs": "logs",
+    "first_log": "First Log",
+    "last_log": "Last Log",
+    "back_to_all_logs": "Back to All Logs",
+    "worker_error": "Worker error",
+    "worker_init_failed": "Failed to initialize worker",
+    "grouping_not_supported": "Log grouping not supported by server",
+    "back": "Back"
+  }
+}

packages/ui/src/locales/zh.json

@@ -0,0 +1,237 @@
+{
+  "common": {
+    "yes": "是",
+    "no": "否"
+  },
+  "app": {
+    "title": "Claude Code Router",
+    "save": "保存",
+    "save_and_restart": "保存并重启",
+    "cancel": "取消",
+    "edit": "编辑",
+    "remove": "移除",
+    "delete": "删除",
+    "settings": "设置",
+    "selectFile": "选择文件",
+    "config_saved_success": "配置保存成功",
+    "config_saved_failed": "配置保存失败",
+    "config_saved_restart_success": "配置保存并服务重启成功",
+    "config_saved_restart_failed": "配置保存并服务重启失败",
+    "new_version_available": "有新版本可用",
+    "update_description": "发现新版本。请查看更新日志并更新以获取最新功能和改进。",
+    "no_changelog_available": "暂无更新日志",
+    "later": "稍后再说",
+    "update_now": "立即更新",
+    "no_updates_available": "当前已是最新版本",
+    "update_check_failed": "检查更新失败",
+    "update_successful": "更新成功",
+    "update_failed": "更新失败"
+  },
+  "login": {
+    "title": "登录到您的账户",
+    "description": "请输入您的API密钥以访问配置面板",
+    "apiKey": "API密钥",
+    "apiKeyPlaceholder": "请输入您的API密钥",
+    "signIn": "登录",
+    "invalidApiKey": "API密钥无效",
+    "configError": "配置未加载",
+    "validating": "正在验证API密钥..."
+  },
+  "toplevel": {
+    "title": "通用设置",
+    "log": "启用日志",
+    "log_level": "日志级别",
+    "claude_path": "Claude 路径",
+    "host": "主机",
+    "port": "端口",
+    "apikey": "API 密钥",
+    "timeout": "API 超时时间 (毫秒)",
+    "proxy_url": "代理地址",
+    "custom_router_path": "自定义路由脚本路径",
+    "custom_router_path_placeholder": "输入自定义路由脚本文件的绝对路径"
+  },
+  "transformers": {
+    "title": "自定义转换器",
+    "path": "路径",
+    "project": "项目",
+    "remove": "移除",
+    "add": "添加自定义转换器",
+    "edit": "编辑自定义转换器",
+    "delete": "删除自定义转换器",
+    "delete_transformer_confirm": "您确定要删除此自定义转换器吗？",
+    "parameters": "参数"
+  },
+  "providers": {
+    "title": "供应商",
+    "name": "名称",
+    "api_base_url": "API 完整地址",
+    "api_key": "API 密钥",
+    "models": "模型",
+    "models_placeholder": "输入模型名称并按回车键添加",
+    "add_model": "添加模型",
+    "select_models": "选择模型",
+    "remove": "移除",
+    "add": "添加供应商",
+    "edit": "编辑供应商",
+    "delete": "删除",
+    "cancel": "取消",
+    "delete_provider_confirm": "您确定要删除此供应商吗？",
+    "test_connectivity": "测试连通性",
+    "testing": "测试中...",
+    "connection_successful": "连接成功！",
+    "connection_failed": "连接失败！",
+    "missing_credentials": "缺少 API 基础地址或 API 密钥",
+    "fetch_available_models": "获取可用模型",
+    "fetching_models": "获取模型中...",
+    "fetch_models_failed": "获取模型失败",
+    "transformers": "转换器",
+    "select_transformer": "选择转换器",
+    "no_transformers": "无可用转换器",
+    "provider_transformer": "供应商转换器",
+    "model_transformers": "模型转换器",
+    "transformer_parameters": "转换器参数",
+    "add_parameter": "添加参数",
+    "parameter_name": "参数名称",
+    "parameter_value": "参数值",
+    "selected_transformers": "已选转换器",
+    "import_from_template": "从模板导入",
+    "no_templates_found": "未找到模板",
+    "select_template": "选择一个模板...",
+    "api_key_required": "API 密钥为必填项",
+    "name_required": "名称为必填项",
+    "name_duplicate": "已存在同名供应商",
+    "search": "搜索供应商..."
+
+  },
+  "router": {
+    "title": "路由",
+    "default": "默认",
+    "background": "后台",
+    "think": "思考",
+    "longContext": "长上下文",
+    "longContextThreshold": "上下文阈值",
+    "webSearch": "网络搜索",
+    "image": "图像",
+    "forceUseImageAgent": "强制使用图像代理",
+    "selectModel": "选择一个模型...",
+    "searchModel": "搜索模型...",
+    "noModelFound": "未找到模型."
+  },
+  "json_editor": {
+    "title": "JSON 编辑器",
+    "save": "保存",
+    "saving": "保存中...",
+    "cancel": "取消",
+    "save_failed": "配置保存失败",
+    "save_and_restart": "保存并重启"
+  },
+  "statusline": {
+    "title": "状态栏配置",
+    "enable": "启用状态栏",
+    "theme": "主题样式",
+    "theme_default": "默认",
+    "theme_powerline": "Powerline",
+    "modules": "模块",
+    "module_type": "类型",
+    "module_icon": "图标",
+    "module_text": "文本",
+    "module_color": "颜色",
+    "module_background": "背景",
+    "module_text_description": "输入显示文本，可使用变量:",
+    "module_color_description": "选择文字颜色",
+    "module_background_description": "选择背景颜色（可选）",
+    "module_script_path": "脚本路径",
+    "module_script_path_description": "输入Node.js脚本文件的绝对路径",
+    "add_module": "添加模块",
+    "remove_module": "移除模块",
+    "delete_module": "删除组件",
+    "preview": "预览",
+    "components": "组件",
+    "properties": "属性",
+    "workDir": "工作目录",
+    "gitBranch": "Git分支",
+    "model": "模型",
+    "usage": "使用情况",
+    "script": "脚本",
+    "background_none": "无",
+    "color_black": "黑色",
+    "color_red": "红色",
+    "color_green": "绿色",
+    "color_yellow": "黄色",
+    "color_blue": "蓝色",
+    "color_magenta": "品红",
+    "color_cyan": "青色",
+    "color_white": "白色",
+    "color_bright_black": "亮黑色",
+    "color_bright_red": "亮红色",
+    "color_bright_green": "亮绿色",
+    "color_bright_yellow": "亮黄色",
+    "color_bright_blue": "亮蓝色",
+    "color_bright_magenta": "亮品红",
+    "color_bright_cyan": "亮青色",
+    "color_bright_white": "亮白色",
+    "font_placeholder": "选择字体",
+    "theme_placeholder": "选择主题样式",
+    "icon_placeholder": "粘贴图标或输入名称搜索...",
+    "icon_description": "输入图标字符、粘贴图标或搜索图标（可选）",
+    "text_placeholder": "例如: {{workDirName}}",
+    "script_placeholder": "例如: /path/to/your/script.js",
+    "drag_hint": "拖拽组件到此处进行配置",
+    "select_hint": "选择一个组件进行配置",
+    "no_icons_found": "未找到图标",
+    "no_icons_available": "暂无可用图标",
+    "import_export": "导入/导出",
+    "import": "导入配置",
+    "export": "导出配置",
+    "download_template": "下载模板",
+    "import_export_help": "导出当前配置为JSON文件，或从JSON文件导入配置。您也可以下载配置模板作为参考。",
+    "export_success": "配置导出成功",
+    "export_failed": "配置导出失败",
+    "import_success": "配置导入成功",
+    "import_failed": "配置导入失败",
+    "invalid_config": "无效的配置文件",
+    "template_download_success": "模板下载成功",
+    "template_download_success_desc": "配置模板已下载到您的设备",
+    "template_download_failed": "模板下载失败"
+  },
+  "color_picker": {
+    "placeholder": "选择颜色...",
+    "title": "颜色选择器",
+    "clear": "清除",
+    "no_color_selected": "未选择颜色",
+    "custom_color": "自定义颜色",
+    "apply": "应用",
+    "hex_input_help": "输入十六进制颜色值 (例如: #FF0000)"
+  },
+  "log_viewer": {
+    "title": "日志查看器",
+    "close": "关闭",
+    "download": "下载",
+    "clear": "清除",
+    "auto_refresh_on": "自动刷新开启",
+    "auto_refresh_off": "自动刷新关闭",
+    "load_failed": "加载日志失败",
+    "no_logs_available": "暂无日志",
+    "logs_cleared": "日志清除成功",
+    "clear_failed": "清除日志失败",
+    "logs_downloaded": "日志下载成功",
+    "back_to_files": "返回文件列表",
+    "select_file": "选择要查看的日志文件",
+    "no_log_files_available": "暂无日志文件",
+    "load_files_failed": "加载日志文件失败",
+    "group_by_req_id": "按请求ID分组",
+    "grouped_on": "已分组",
+    "request_groups": "请求组",
+    "total_requests": "总请求数",
+    "total_logs": "总日志数",
+    "request": "请求",
+    "logs": "条日志",
+    "first_log": "首条日志",
+    "last_log": "末条日志",
+    "back_to_all_logs": "返回所有日志",
+    "worker_error": "Worker错误",
+    "worker_init_failed": "Worker初始化失败",
+    "grouping_not_supported": "服务器不支持日志分组",
+    "back": "返回"
+  }
+}

packages/ui/src/main.tsx

@@ -0,0 +1,15 @@
+import './i18n';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes';
+import { ConfigProvider } from '@/components/ConfigProvider';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ConfigProvider>
+      <RouterProvider router={router} />
+    </ConfigProvider>
+  </StrictMode>,
+)

packages/ui/src/routes.tsx

@@ -0,0 +1,27 @@
+import { createMemoryRouter, Navigate } from 'react-router-dom';
+import App from './App';
+import { Login } from '@/components/Login';
+import { DebugPage } from '@/components/DebugPage';
+import ProtectedRoute from '@/components/ProtectedRoute';
+import PublicRoute from '@/components/PublicRoute';
+
+export const router = createMemoryRouter([
+  {
+    path: '/',
+    element: <Navigate to="/dashboard" replace />,
+  },
+  {
+    path: '/login',
+    element: <PublicRoute><Login /></PublicRoute>,
+  },
+  {
+    path: '/dashboard',
+    element: <ProtectedRoute><App /></ProtectedRoute>,
+  },
+  {
+    path: '/debug',
+    element: <ProtectedRoute><DebugPage /></ProtectedRoute>,
+  },
+], {
+  initialEntries: ['/dashboard']
+});

packages/ui/src/styles/animations.css

@@ -0,0 +1,48 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.2s ease-out forwards;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.transition-all-ease {
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}

packages/ui/src/types.ts

@@ -0,0 +1,70 @@
+export interface ProviderTransformer {
+  use: (string | (string | Record<string, unknown> | { max_tokens: number })[])[];
+  [key: string]: any; // Allow for model-specific transformers
+}
+
+export interface Provider {
+  name: string;
+  api_base_url: string;
+  api_key: string;
+  models: string[];
+  transformer?: ProviderTransformer;
+}
+
+export interface RouterConfig {
+    default: string;
+    background: string;
+    think: string;
+    longContext: string;
+    longContextThreshold: number;
+    webSearch: string;
+    image: string;
+    custom?: any;
+}
+
+export interface Transformer {
+    name?: string;
+    path: string;
+    options?: Record<string, any>;
+}
+
+export interface StatusLineModuleConfig {
+  type: string;
+  icon?: string;
+  text: string;
+  color?: string;
+  background?: string;
+  scriptPath?: string; // 用于script类型的模块，指定要执行的Node.js脚本文件路径
+}
+
+export interface StatusLineThemeConfig {
+  modules: StatusLineModuleConfig[];
+}
+
+export interface StatusLineConfig {
+  enabled: boolean;
+  currentStyle: string;
+  default: StatusLineThemeConfig;
+  powerline: StatusLineThemeConfig;
+  fontFamily?: string;
+}
+
+export interface Config {
+  Providers: Provider[];
+  Router: RouterConfig;
+  transformers: Transformer[];
+  StatusLine?: StatusLineConfig;
+  forceUseImageAgent?: boolean;
+  // Top-level settings
+  LOG: boolean;
+  LOG_LEVEL: string;
+  CLAUDE_PATH: string;
+  HOST: string;
+  PORT: number;
+  APIKEY: string;
+  API_TIMEOUT_MS: string;
+  PROXY_URL: string;
+  CUSTOM_ROUTER_PATH?: string;
+}
+
+export type AccessLevel = 'restricted' | 'full';

packages/ui/src/utils/statusline.ts

@@ -0,0 +1,146 @@
+import type { StatusLineConfig, StatusLineModuleConfig } from "@/types";
+
+// 验证结果（保留接口但不使用）
+export interface ValidationResult {
+  isValid: boolean;
+  errors: any[];
+}
+
+/**
+ * 验证StatusLine配置 - 已移除所有验证
+ * @param config 要验证的配置对象
+ * @returns 始终返回验证通过
+ */
+export function validateStatusLineConfig(config: unknown): ValidationResult {
+  // 不再执行任何验证
+  return { isValid: true, errors: [] };
+}
+
+
+/**
+ * 格式化错误信息（支持国际化）- 不再使用
+ */
+export function formatValidationError(error: unknown, t: (key: string, options?: Record<string, unknown>) => string): string {
+  return t("statusline.validation.unknown_error");
+}
+
+/**
+ * 解析颜色值，支持十六进制和内置颜色名称
+ * @param color 颜色值（可以是颜色名称或十六进制值）
+ * @param defaultColor 默认颜色（十六进制）
+ * @returns 十六进制颜色值
+ */
+export function parseColorValue(color: string | undefined, defaultColor: string = "#ffffff"): string {
+  if (!color) {
+    return defaultColor;
+  }
+  
+  // 如果是十六进制颜色值（以#开头）
+  if (color.startsWith('#')) {
+    return color;
+  }
+  
+  // 如果是已知的颜色名称，返回对应的十六进制值
+  return COLOR_HEX_MAP[color] || defaultColor;
+}
+
+/**
+ * 判断是否为有效的十六进制颜色值
+ * @param color 要检查的颜色值
+ * @returns 是否为有效的十六进制颜色值
+ */
+export function isHexColor(color: string): boolean {
+  return /^#([0-9A-F]{3}){1,2}$/i.test(color);
+}
+
+// 颜色枚举到十六进制的映射
+export const COLOR_HEX_MAP: Record<string, string> = {
+  black: "#000000",
+  red: "#cd0000",
+  green: "#00cd00",
+  yellow: "#cdcd00",
+  blue: "#0000ee",
+  magenta: "#cd00cd",
+  cyan: "#00cdcd",
+  white: "#e5e5e5",
+  bright_black: "#7f7f7f",
+  bright_red: "#ff0000",
+  bright_green: "#00ff00",
+  bright_yellow: "#ffff00",
+  bright_blue: "#5c5cff",
+  bright_magenta: "#ff00ff",
+  bright_cyan: "#00ffff",
+  bright_white: "#ffffff",
+  bg_black: "#000000",
+  bg_red: "#cd0000",
+  bg_green: "#00cd00",
+  bg_yellow: "#cdcd00",
+  bg_blue: "#0000ee",
+  bg_magenta: "#cd00cd",
+  bg_cyan: "#00cdcd",
+  bg_white: "#e5e5e5",
+  bg_bright_black: "#7f7f7f",
+  bg_bright_red: "#ff0000",
+  bg_bright_green: "#00ff00",
+  bg_bright_yellow: "#ffff00",
+  bg_bright_blue: "#5c5cff",
+  bg_bright_magenta: "#ff00ff",
+  bg_bright_cyan: "#00ffff",
+  bg_bright_white: "#ffffff"
+};
+
+/**
+ * 创建默认的StatusLine配置
+ */
+export function createDefaultStatusLineConfig(): StatusLineConfig {
+  return {
+    enabled: false,
+    currentStyle: "default",
+    default: { 
+      modules: [
+        { type: "workDir", icon: "󰉋", text: "{{workDirName}}", color: "bright_blue" },
+        { type: "gitBranch", icon: "", text: "{{gitBranch}}", color: "bright_magenta" },
+        { type: "model", icon: "󰚩", text: "{{model}}", color: "bright_cyan" },
+        { type: "usage", icon: "↑", text: "{{inputTokens}}", color: "bright_green" },
+        { type: "usage", icon: "↓", text: "{{outputTokens}}", color: "bright_yellow" }
+      ] 
+    },
+    powerline: { 
+      modules: [
+        { type: "workDir", icon: "󰉋", text: "{{workDirName}}", color: "white", background: "bg_bright_blue" },
+        { type: "gitBranch", icon: "", text: "{{gitBranch}}", color: "white", background: "bg_bright_magenta" },
+        { type: "model", icon: "󰚩", text: "{{model}}", color: "white", background: "bg_bright_cyan" },
+        { type: "usage", icon: "↑", text: "{{inputTokens}}", color: "white", background: "bg_bright_green" },
+        { type: "usage", icon: "↓", text: "{{outputTokens}}", color: "white", background: "bg_bright_yellow" }
+      ] 
+    }
+  };
+}
+
+/**
+ * 创建配置备份
+ */
+export function backupConfig(config: StatusLineConfig): string {
+  const backup = {
+    config,
+    timestamp: new Date().toISOString(),
+    version: "1.0"
+  };
+  return JSON.stringify(backup, null, 2);
+}
+
+/**
+ * 从备份恢复配置
+ */
+export function restoreConfig(backupStr: string): StatusLineConfig | null {
+  try {
+    const backup = JSON.parse(backupStr);
+    if (backup && backup.config && backup.timestamp) {
+      return backup.config as StatusLineConfig;
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to restore config from backup:", error);
+    return null;
+  }
+}

packages/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/ui/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": ["src"]
+}

packages/ui/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": ["src"]
+}

packages/ui/vite.config.ts

@@ -0,0 +1,16 @@
+import path from "path"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+import { viteSingleFile } from "vite-plugin-singlefile"
+import tailwindcss from "@tailwindcss/vite"
+
+ 
+export default defineConfig({
+  base: './',
+  plugins: [react(), tailwindcss(), viteSingleFile()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})