thatgfsj-code 2.2.9 → 3.0.0

package/src/tui/components/ChatList.tsx

@@ -1,41 +1,41 @@
-/** @jsxImportSource react */
-import React, { memo } from 'react';
-import { Box, Static } from 'ink';
-import { ChatMessage, type MessageData } from './ChatMessage.js';
-import type { ToolCallData } from './ToolCall.js';
-
-interface Props {
-  messages: MessageData[];
-  streaming?: string;
-  streamingToolCalls?: ToolCallData[];
-  width?: number;
-}
-
-export const ChatList = memo(function ChatList({ messages, streaming, streamingToolCalls, width }: Props) {
-  const hasStreaming = !!(streaming || (streamingToolCalls && streamingToolCalls.length > 0));
-
-  return (
-    <Box flexDirection="column">
-      {/* Completed messages - Static prevents re-rendering */}
-      {messages.length > 0 && (
-        <Static items={messages}>
-          {(msg: MessageData, index: number) => (
-            <ChatMessage key={`msg-${index}`} message={msg} width={width} />
-          )}
-        </Static>
-      )}
-
-      {/* Streaming content - only this part re-renders */}
-      {hasStreaming && (
-        <ChatMessage
-          message={{
-            role: 'assistant',
-            content: streaming || '',
-            toolCalls: streamingToolCalls && streamingToolCalls.length > 0 ? streamingToolCalls : undefined,
-          }}
-          width={width}
-        />
-      )}
-    </Box>
-  );
-});
+/** @jsxImportSource react */
+import React, { memo } from 'react';
+import { Box, Static } from 'ink';
+import { ChatMessage, type MessageData } from './ChatMessage.js';
+import type { ToolCallData } from './ToolCall.js';
+
+interface Props {
+  messages: MessageData[];
+  streaming?: string;
+  streamingToolCalls?: ToolCallData[];
+  width?: number;
+}
+
+export const ChatList = memo(function ChatList({ messages, streaming, streamingToolCalls, width }: Props) {
+  const hasStreaming = !!(streaming || (streamingToolCalls && streamingToolCalls.length > 0));
+
+  return (
+    <Box flexDirection="column">
+      {/* Completed messages - Static prevents re-rendering */}
+      {messages.length > 0 && (
+        <Static items={messages}>
+          {(msg: MessageData, index: number) => (
+            <ChatMessage key={`msg-${index}`} message={msg} width={width} />
+          )}
+        </Static>
+      )}
+
+      {/* Streaming content - only this part re-renders */}
+      {hasStreaming && (
+        <ChatMessage
+          message={{
+            role: 'assistant',
+            content: streaming || '',
+            toolCalls: streamingToolCalls && streamingToolCalls.length > 0 ? streamingToolCalls : undefined,
+          }}
+          width={width}
+        />
+      )}
+    </Box>
+  );
+});

package/src/tui/components/ChatMessage.tsx

@@ -1,54 +1,54 @@
-/** @jsxImportSource react */
-import React from 'react';
-import { Box, Text } from 'ink';
-import { Markdown } from './Markdown.js';
-import { ToolCall, type ToolCallData } from './ToolCall.js';
-
-interface MessageData {
-  role: 'user' | 'assistant' | 'tool';
-  content: string;
-  toolCalls?: ToolCallData[];
-}
-
-interface Props {
-  message: MessageData;
-  width?: number;
-}
-
-function UserMessage({ content }: { content: string }) {
-  return (
-    <Box flexDirection="column" marginBottom={1} paddingLeft={1}>
-      <Text bold color="#06B6D4">You</Text>
-      <Box paddingLeft={2}>
-        <Text>{content}</Text>
-      </Box>
-    </Box>
-  );
-}
-
-function AssistantMessage({ content, toolCalls }: { content: string; toolCalls?: ToolCallData[] }) {
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      {toolCalls && toolCalls.map((tc, i) => (
-        <ToolCall key={i} tool={tc} />
-      ))}
-      {content && (
-        <Box flexDirection="column" paddingLeft={1}>
-          <Text bold color="#22D3EE">AI</Text>
-          <Box paddingLeft={2}>
-            <Markdown content={content} />
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-export const ChatMessage = React.memo(function ChatMessage({ message }: Props) {
-  if (message.role === 'user') {
-    return <UserMessage content={message.content} />;
-  }
-  return <AssistantMessage content={message.content} toolCalls={message.toolCalls} />;
-});
-
-export type { MessageData };
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Markdown } from './Markdown.js';
+import { ToolCall, type ToolCallData } from './ToolCall.js';
+
+interface MessageData {
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  toolCalls?: ToolCallData[];
+}
+
+interface Props {
+  message: MessageData;
+  width?: number;
+}
+
+function UserMessage({ content }: { content: string }) {
+  return (
+    <Box flexDirection="column" marginBottom={1} paddingLeft={1}>
+      <Text bold color="#06B6D4">You</Text>
+      <Box paddingLeft={2}>
+        <Text>{content}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function AssistantMessage({ content, toolCalls }: { content: string; toolCalls?: ToolCallData[] }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {toolCalls && toolCalls.map((tc, i) => (
+        <ToolCall key={i} tool={tc} />
+      ))}
+      {content && (
+        <Box flexDirection="column" paddingLeft={1}>
+          <Text bold color="#22D3EE">AI</Text>
+          <Box paddingLeft={2}>
+            <Markdown content={content} />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export const ChatMessage = React.memo(function ChatMessage({ message }: Props) {
+  if (message.role === 'user') {
+    return <UserMessage content={message.content} />;
+  }
+  return <AssistantMessage content={message.content} toolCalls={message.toolCalls} />;
+});
+
+export type { MessageData };

package/src/tui/components/Header.tsx

@@ -1,29 +1,56 @@
-/** @jsxImportSource react */
-import React from 'react';
-import { Box, Text } from 'ink';
-import { PRODUCT_VERSION_DISPLAY } from '../../version.js';
-
-interface Props {
-  provider: string;
-  model: string;
-}
-
-export const Header = React.memo(function Header({ provider, model }: Props) {
-  return (
-    <Box flexDirection="column" marginBottom={0}>
-      <Box justifyContent="space-between" width="100%">
-        <Box>
-          <Text color="#06B6D4" bold> ⚡ </Text>
-          <Text color="#22D3EE" bold>THATGFSJ CODE</Text>
-          <Text dimColor> {PRODUCT_VERSION_DISPLAY}</Text>
-        </Box>
-        <Box>
-          <Text color="#06B6D4" bold> {provider} </Text>
-          <Text dimColor>/</Text>
-          <Text color="#22D3EE"> {model} </Text>
-        </Box>
-      </Box>
-      <Text color="#374151">{'─'.repeat(80)}</Text>
-    </Box>
-  );
-});
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface Props {
+  provider: string;
+  model: string;
+  /**
+   * v3.0.0: optional cache hit-rate + estimated savings. When provided,
+   * the header shows `⚡ 命中率 87% · 节省 ¥0.42` on the right side. When
+   * null (no rounds yet, or provider does not surface usage), the right
+   * side just shows provider/model.
+   */
+  cacheHitRate?: number | null;
+  cacheSavingsCNY?: number;
+}
+
+/**
+ * Choose a color for the hit-rate chip based on Reasonix-style thresholds:
+ *   ≥ 80% green   (excellent — most of the prefix is being reused)
+ *   ≥ 50% yellow  (partial hit — system prompt is cached but messages tail is not)
+ *   < 50% gray    (cold — every round re-creates the cache; investigate)
+ */
+function hitRateColor(rate: number): string {
+  if (rate >= 0.8) return '#10B981';
+  if (rate >= 0.5) return '#F59E0B';
+  return '#6B7280';
+}
+
+export const Header = React.memo(function Header({ provider, model, cacheHitRate, cacheSavingsCNY }: Props) {
+  const showCache = typeof cacheHitRate === 'number' && cacheHitRate > 0;
+  return (
+    <Box flexDirection="column" marginBottom={0}>
+      <Box justifyContent="space-between" width="100%">
+        <Box>
+          <Text color="#06B6D4" bold> ⚡ </Text>
+          <Text color="#22D3EE" bold>THATGFSJ CODE</Text>
+          <Text dimColor> v3.0.0</Text>
+        </Box>
+        <Box>
+          {showCache && (
+            <>
+              <Text color={hitRateColor(cacheHitRate!)} bold> ⚡ {(cacheHitRate! * 100).toFixed(1)}% </Text>
+              <Text dimColor> · 节省 ¥{(cacheSavingsCNY ?? 0).toFixed(2)} </Text>
+              <Text dimColor> · </Text>
+            </>
+          )}
+          <Text color="#06B6D4" bold> {provider} </Text>
+          <Text dimColor>/</Text>
+          <Text color="#22D3EE"> {model} </Text>
+        </Box>
+      </Box>
+      <Text color="#374151">{'─'.repeat(80)}</Text>
+    </Box>
+  );
+});

package/src/tui/components/InitWizard.tsx

@@ -1,132 +1,217 @@
-/** @jsxImportSource react */
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import SelectInput from 'ink-select-input';
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
-import { join } from 'path';
-import { homedir } from 'os';
-import { listProviders, getModelsForProvider, isCustomProvider } from '../../config/providers.js';
-import type { ProviderName } from '../../config/types.js';
-
-interface Props {
-  onComplete: (provider: ProviderName, model: string, apiKey: string, baseUrl?: string) => void;
-  onCancel: () => void;
-}
-
-type InitStep = 'provider' | 'api_key' | 'model' | 'custom_model' | 'custom_url';
-
-export function InitWizard({ onComplete, onCancel }: Props) {
-  const [step, setStep] = useState<InitStep>('provider');
-  const [selectedProvider, setSelectedProvider] = useState<ProviderName>('siliconflow');
-  const [apiKey, setApiKey] = useState('');
-  const [selectedModel, setSelectedModel] = useState('');
-  const [customUrl, setCustomUrl] = useState('');
-
-  const providers = listProviders();
-  const models = getModelsForProvider(selectedProvider);
-
-  const saveConfig = (provider: ProviderName, model: string, key: string, url?: string) => {
-    const dir = join(homedir(), '.thatgfsj');
-    const configPath = join(dir, 'config.json');
-    if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
-
-    const config: Record<string, any> = { provider, model, apiKey: key, temperature: 0.7, maxTokens: 4096, contextLength: 50 };
-    if (url) config.baseUrl = url;
-    writeFileSync(configPath, JSON.stringify(config, null, 2));
-
-    // Save to models history
-    const historyPath = join(dir, 'models.json');
-    let history: string[] = [];
-    if (existsSync(historyPath)) {
-      try { history = JSON.parse(readFileSync(historyPath, 'utf-8')); } catch {}
-    }
-    if (!history.includes(model)) {
-      history.push(model);
-      writeFileSync(historyPath, JSON.stringify(history, null, 2));
-    }
-  };
-
-  // Step 1: Provider selection
-  if (step === 'provider') {
-    const items = providers.map(p => ({ label: p.name, value: p.key }));
-    return (
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text color="#06B6D4" bold>选择服务商 (↑↓ 回车):</Text>
-        <SelectInput
-          items={items}
-          onSelect={(item) => {
-            setSelectedProvider(item.value as ProviderName);
-            if (isCustomProvider(item.value as ProviderName)) {
-              setStep('custom_url');
-            } else {
-              setStep('api_key');
-            }
-          }}
-        />
-      </Box>
-    );
-  }
-
-  // Custom URL input
-  if (step === 'custom_url') {
-    return (
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text color="#06B6D4" bold>输入中转站 URL:</Text>
-        <Text dimColor>例如: https://api.example.com/v1</Text>
-        <Text color="#F59E0B">（请直接输入 URL 并回车）</Text>
-      </Box>
-    );
-  }
-
-  // Step 2: API Key
-  if (step === 'api_key') {
-    return (
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text color="#06B6D4" bold>输入 API Key:</Text>
-        <Text dimColor>服务商: {providers.find(p => p.key === selectedProvider)?.name}</Text>
-        <Text color="#F59E0B">（请直接输入 Key 并回车）</Text>
-      </Box>
-    );
-  }
-
-  // Step 3: Model selection
-  if (step === 'model') {
-    const items = [
-      ...models.map(m => ({ label: `${m.name} - ${m.desc}`, value: m.id })),
-      { label: '＋ 输入自定义模型名', value: '__custom__' },
-    ];
-    return (
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text color="#06B6D4" bold>选择模型 (↑↓ 回车):</Text>
-        <SelectInput
-          items={items}
-          onSelect={(item) => {
-            if (item.value === '__custom__') {
-              setStep('custom_model');
-            } else {
-              setSelectedModel(item.value);
-              saveConfig(selectedProvider, item.value, apiKey, customUrl || undefined);
-              onComplete(selectedProvider, item.value, apiKey, customUrl || undefined);
-            }
-          }}
-        />
-      </Box>
-    );
-  }
-
-  // Custom model name
-  if (step === 'custom_model') {
-    return (
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text color="#06B6D4" bold>输入模型名称:</Text>
-        <Text color="#F59E0B">（请直接输入模型名并回车）</Text>
-      </Box>
-    );
-  }
-
-  return null;
-}
-
-// Export steps for external handling
-export type { InitStep };
-export { isCustomProvider };
+/** @jsxImportSource react */
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+import { listProviders, getModelsForProvider, isCustomProvider } from '../../config/providers.js';
+import type { ProviderName } from '../../config/types.js';
+
+interface Props {
+  onComplete: (provider: ProviderName, model: string, apiKey: string, baseUrl?: string) => void;
+  onCancel: () => void;
+}
+
+type InitStep =
+  | 'provider'
+  | 'api_key'
+  | 'model'
+  | 'custom_model'
+  | 'custom_url'
+  | 'cache_strategy'
+  | 'cache_ttl';
+
+interface CacheChoice {
+  enabled: boolean;
+  ttl: '5m' | '1h';
+}
+
+/**
+ * v3.0.0: InitWizard gained two new steps after model selection:
+ *   - cache_strategy: enable / disable prompt caching
+ *   - cache_ttl:      5m vs 1h (only if enabled)
+ *
+ * The defaults mirror ConfigManager.DEFAULT_CONFIG (enabled, 5m). Users on
+ * OpenAI / DeepSeek / Gemini can ignore these — those providers do
+ * automatic caching and the flag is purely advisory there. The flag
+ * matters for Anthropic users who want to opt out of cache_control
+ * markers or pick a longer TTL.
+ */
+export function InitWizard({ onComplete, onCancel }: Props) {
+  const [step, setStep] = useState<InitStep>('provider');
+  const [selectedProvider, setSelectedProvider] = useState<ProviderName>('siliconflow');
+  const [apiKey, setApiKey] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+  const [customUrl, setCustomUrl] = useState('');
+  const [cacheChoice, setCacheChoice] = useState<CacheChoice>({ enabled: true, ttl: '5m' });
+
+  const providers = listProviders();
+  const models = getModelsForProvider(selectedProvider);
+
+  const saveConfig = (provider: ProviderName, model: string, key: string, url?: string) => {
+    const dir = join(homedir(), '.thatgfsj');
+    const configPath = join(dir, 'config.json');
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+
+    const config: Record<string, any> = {
+      provider,
+      model,
+      apiKey: key,
+      temperature: 0.7,
+      maxTokens: 4096,
+      contextLength: 50,
+      // v3.0.0: cache policy from wizard
+      cache: {
+        enabled: cacheChoice.enabled,
+        ttl: cacheChoice.ttl,
+        strategy: 'auto',
+      },
+    };
+    if (url) config.baseUrl = url;
+    writeFileSync(configPath, JSON.stringify(config, null, 2));
+
+    // Save to models history
+    const historyPath = join(dir, 'models.json');
+    let history: string[] = [];
+    if (existsSync(historyPath)) {
+      try { history = JSON.parse(readFileSync(historyPath, 'utf-8')); } catch {}
+    }
+    if (!history.includes(model)) {
+      history.push(model);
+      writeFileSync(historyPath, JSON.stringify(history, null, 2));
+    }
+  };
+
+  // Step 1: Provider selection
+  if (step === 'provider') {
+    const items = providers.map(p => ({ label: p.name, value: p.key }));
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>选择服务商 (↑↓ 回车):</Text>
+        <SelectInput
+          items={items}
+          onSelect={(item) => {
+            setSelectedProvider(item.value as ProviderName);
+            if (isCustomProvider(item.value as ProviderName)) {
+              setStep('custom_url');
+            } else {
+              setStep('api_key');
+            }
+          }}
+        />
+      </Box>
+    );
+  }
+
+  // Custom URL input
+  if (step === 'custom_url') {
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>输入中转站 URL:</Text>
+        <Text dimColor>例如: https://api.example.com/v1</Text>
+        <Text color="#F59E0B">（请直接输入 URL 并回车）</Text>
+      </Box>
+    );
+  }
+
+  // Step 2: API Key
+  if (step === 'api_key') {
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>输入 API Key:</Text>
+        <Text dimColor>服务商: {providers.find(p => p.key === selectedProvider)?.name}</Text>
+        <Text color="#F59E0B">（请直接输入 Key 并回车）</Text>
+      </Box>
+    );
+  }
+
+  // Step 3: Model selection
+  if (step === 'model') {
+    const items = [
+      ...models.map(m => ({ label: `${m.name} - ${m.desc}`, value: m.id })),
+      { label: '＋ 输入自定义模型名', value: '__custom__' },
+    ];
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>选择模型 (↑↓ 回车):</Text>
+        <SelectInput
+          items={items}
+          onSelect={(item) => {
+            if (item.value === '__custom__') {
+              setStep('custom_model');
+            } else {
+              setSelectedModel(item.value);
+              // v3.0.0: prompt the user for cache strategy after model.
+              setStep('cache_strategy');
+            }
+          }}
+        />
+      </Box>
+    );
+  }
+
+  // Custom model name
+  if (step === 'custom_model') {
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>输入模型名称:</Text>
+        <Text color="#F59E0B">（请直接输入模型名并回车）</Text>
+      </Box>
+    );
+  }
+
+  // v3.0.0: prompt-cache strategy step
+  if (step === 'cache_strategy') {
+    const items = [
+      { label: '✓ 开启（推荐，节省 token 成本）', value: 'on' },
+      { label: '✗ 关闭（每次请求都重新计算）', value: 'off' },
+    ];
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>是否开启 Prompt Caching?</Text>
+        <Text dimColor>对 Anthropic / DeepSeek / Gemini 有效，OpenAI 兼容接口默认自动缓存。</Text>
+        <SelectInput
+          items={items}
+          onSelect={(item) => {
+            if (item.value === 'on') {
+              setCacheChoice(c => ({ ...c, enabled: true }));
+              setStep('cache_ttl');
+            } else {
+              setCacheChoice(c => ({ ...c, enabled: false }));
+              saveConfig(selectedProvider, selectedModel, apiKey, customUrl || undefined);
+              onComplete(selectedProvider, selectedModel, apiKey, customUrl || undefined);
+            }
+          }}
+        />
+      </Box>
+    );
+  }
+
+  // v3.0.0: TTL choice
+  if (step === 'cache_ttl') {
+    const items = [
+      { label: '5 分钟（写入成本低，适合短会话）', value: '5m' },
+      { label: '1 小时（写入成本高，适合长会话）', value: '1h' },
+    ];
+    return (
+      <Box flexDirection="column" paddingLeft={1}>
+        <Text color="#06B6D4" bold>Cache TTL:</Text>
+        <SelectInput
+          items={items}
+          onSelect={(item) => {
+            setCacheChoice(c => ({ ...c, ttl: item.value as '5m' | '1h' }));
+            saveConfig(selectedProvider, selectedModel, apiKey, customUrl || undefined);
+            onComplete(selectedProvider, selectedModel, apiKey, customUrl || undefined);
+          }}
+        />
+      </Box>
+    );
+  }
+
+  return null;
+}
+
+// Export steps for external handling
+export type { InitStep };
+export { isCustomProvider };