thatgfsj-code 0.4.1 → 0.6.0

package/src/cmd/{index.ts → index.tsx}

@@ -2,10 +2,9 @@
 
 /**
  * Thatgfsj Code - CLI Entry Point
- * Simplified from old src/index.ts (655 lines → ~60 lines)
  *
  * Two modes:
- *   gfcode              → Interactive REPL
+ *   gfcode              → Interactive TUI (Ink)
  *   gfcode "prompt"     → Single prompt mode
  *   gfcode init         → Setup wizard
  */
@@ -20,18 +19,18 @@ if (process.platform === 'win32') {
 import { program } from 'commander';
 import chalk from 'chalk';
 import { App } from '../app/index.js';
-import { REPL } from '../tui/repl.js';
 import { WelcomeScreen } from '../tui/welcome.js';
+import { REPLOutput } from '../tui/output.js';
 
 // ==================== Error Handling ====================
 
 process.on('uncaughtException', (error) => {
-  console.error(chalk.red('\n❌ Error:'), error.message);
+  console.error(chalk.red('\n  Error:'), error.message);
   process.exit(1);
 });
 
 process.on('unhandledRejection', (reason) => {
-  console.error(chalk.red('\n❌ Error:'), reason);
+  console.error(chalk.red('\n  Error:'), reason);
   process.exit(1);
 });
 
@@ -39,15 +38,13 @@ process.on('unhandledRejection', (reason) => {
 
 program
   .name('gfcode')
-  .description('🤖 Thatgfsj Code - AI Coding Assistant')
-  .version('0.4.1')
+  .description('Thatgfsj Code - AI Coding Assistant')
+  .version('0.6.0')
   .argument('[prompt]', 'Task to execute (omit to start interactive mode)')
   .option('-m, --model <model>', 'Specify model')
   .option('-i, --interactive', 'Force interactive mode')
-  .option('--hooks', 'Enable audit logging hooks')
-  .action(async (prompt: string | undefined, options: { model?: string; interactive?: boolean; hooks?: boolean }) => {
+  .action(async (prompt: string | undefined, options: { model?: string; interactive?: boolean }) => {
     try {
-      // Initialize app
       const app = await App.create();
 
       // Show welcome if no API key
@@ -58,21 +55,27 @@ program
         await app.config.save({ model: options.model });
       }
 
-      // Enable hooks if requested
-      if (options.hooks) {
-        const { auditLogHook } = await import('../hooks/index.js');
-        app.hooks.register('afterToolCall', auditLogHook);
-      }
-
       if (!prompt || options.interactive) {
-        // Interactive REPL mode
-        const repl = new REPL(app);
-        await repl.start();
+        // Interactive mode - use Ink TUI
+        const { render } = await import('ink');
+        const { TuiApp } = await import('../tui/app.js');
+
+        const { unmount } = render(<TuiApp app={app} />);
+
+        // Wait for the app to exit
+        await new Promise<void>((resolve) => {
+          const check = setInterval(() => {
+            // Ink will call process.exit or we detect it
+          }, 1000);
+          process.on('exit', () => {
+            clearInterval(check);
+            unmount();
+            resolve();
+          });
+        });
       } else {
-        // Single prompt mode - use same UI as REPL
-        const { REPLOutput } = await import('../tui/output.js');
+        // Single prompt mode - use simple output
         const out = new REPLOutput();
-
         out.printBanner();
         out.printUserInput(prompt);
         out.startThinking();
@@ -82,31 +85,34 @@ program
         let hasStarted = false;
 
         try {
-          const stream = app.getAgent().run(app.session.getMessages());
+          const stream = app.streamResponse();
           for await (const chunk of stream) {
             out.stopThinking();
 
-            const parts = chunk.split('\n');
-            for (const part of parts) {
-              if (part.startsWith('@@TOOL@@')) {
-                try {
-                  const data = JSON.parse(part.slice(8));
-                  if (data.action === 'call') {
-                    if (hasStarted) { out.endAssistant(); hasStarted = false; }
-                    out.printToolCall(data.name, data.args || '');
-                    out.startExecuting(data.name);
-                  } else if (data.action === 'result') {
-                    out.stopThinking();
-                    out.printToolResult(data.output || data.error || '', !!data.error);
-                    out.printToolEnd();
-                  }
-                } catch {}
-                continue;
-              }
-              if (part) {
-                if (!hasStarted) { out.beginAssistant(); hasStarted = true; }
-                out.writeChunk(part + '\n');
+            if (chunk.includes('@@TOOL@@')) {
+              const parts = chunk.split('\n');
+              for (const part of parts) {
+                if (part.startsWith('@@TOOL@@')) {
+                  try {
+                    const data = JSON.parse(part.slice(8));
+                    if (data.action === 'call') {
+                      if (hasStarted) { out.endAssistant(); hasStarted = false; }
+                      out.printToolCall(data.name, data.args || '');
+                      out.startExecuting(data.name);
+                    } else if (data.action === 'result') {
+                      out.stopThinking();
+                      out.printToolResult(data.output || data.error || '', !!data.error);
+                      out.printToolEnd();
+                    }
+                  } catch {}
+                } else if (part) {
+                  if (!hasStarted) { out.beginAssistant(); hasStarted = true; }
+                  out.writeChunk(part + '\n');
+                }
               }
+            } else {
+              if (!hasStarted) { out.beginAssistant(); hasStarted = true; }
+              out.writeChunk(chunk);
             }
             fullResponse += chunk;
           }
@@ -120,18 +126,17 @@ program
         app.session.addMessage('assistant', fullResponse);
       }
     } catch (error: any) {
-      console.error(chalk.red(`\n❌ ${error.message}`));
+      console.error(chalk.red(`\n  ${error.message}`));
       process.exit(1);
     }
   });
 
-// Init command - setup wizard
+// Init command
 program
   .command('init')
-  .description('配置 API Key 和模型')
+  .description('Configure API key and model')
   .action(async () => {
     await WelcomeScreen.interactiveSetup();
   });
 
-// Parse and run
 program.parse(process.argv);

package/src/config/index.ts

@@ -14,6 +14,7 @@ const DEFAULT_CONFIG: Config = {
   apiKey: '',
   temperature: 0.7,
   maxTokens: 4096,
+  contextLength: 50,
   provider: 'siliconflow',
 };
 

package/src/config/types.ts

@@ -32,6 +32,7 @@ export interface Config {
   apiKey: string;
   temperature: number;
   maxTokens: number;
+  contextLength: number;
   provider: ProviderName;
   baseUrl?: string;
 }

package/src/llm/index.ts

@@ -91,7 +91,6 @@ export class LLMService {
       let fullContent = '';
       let detectedToolCalls: ToolCall[] | undefined;
 
-      // Stream the response, passing tools so the API knows about them
       const stream = this.provider.chatStream(currentMessages, options, hasTools ? toolsArray : undefined);
 
       for await (const chunk of stream) {

package/src/tui/app.tsx

@@ -0,0 +1,60 @@
+/** @jsxImportSource react */
+import React, { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useApp, useStdout } from 'ink';
+import { Header } from './components/Header.js';
+import { ChatList } from './components/ChatList.js';
+import { Thinking } from './components/Thinking.js';
+import { UserInput } from './components/UserInput.js';
+import { useChat } from './hooks/useChat.js';
+import { useCommands } from './hooks/useCommands.js';
+import type { App } from '../app/index.js';
+import type { MessageData } from './components/ChatMessage.js';
+
+interface Props {
+  app: App;
+}
+
+export function TuiApp({ app }: Props) {
+  const config = app.config.get();
+  const { messages, isThinking, streaming, streamingToolCalls, sendMessage } = useChat(app);
+  const { handleCommand } = useCommands(app);
+  const [systemMessages, setSystemMessages] = useState<MessageData[]>([]);
+  const { exit } = useApp();
+
+  const onSubmit = useCallback(async (input: string) => {
+    // Check for built-in commands first
+    const result = handleCommand(input);
+    if (result.handled) {
+      if (result.output) {
+        setSystemMessages(prev => [
+          ...prev,
+          { role: 'user', content: input },
+          { role: 'assistant', content: result.output! },
+        ]);
+      }
+      // Handle clear
+      if (input.toLowerCase().trim() === 'clear') {
+        setSystemMessages([]);
+      }
+      return;
+    }
+
+    // Send to AI
+    await sendMessage(input);
+  }, [handleCommand, sendMessage]);
+
+  const allMessages = [...systemMessages, ...messages];
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Header provider={config.provider} model={config.model} />
+      <ChatList
+        messages={allMessages}
+        streaming={streaming}
+        streamingToolCalls={streamingToolCalls}
+      />
+      {isThinking && <Thinking />}
+      <UserInput onSubmit={onSubmit} disabled={isThinking} />
+    </Box>
+  );
+}

package/src/tui/components/ChatList.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box } from 'ink';
+import { ChatMessage, type MessageData } from './ChatMessage.js';
+
+interface Props {
+  messages: MessageData[];
+  streaming?: string;
+  streamingToolCalls?: Array<{ name: string; args: string }>;
+}
+
+export function ChatList({ messages, streaming, streamingToolCalls }: Props) {
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {messages.map((msg, i) => (
+        <ChatMessage key={i} message={msg} />
+      ))}
+      {(streaming || streamingToolCalls) && (
+        <ChatMessage
+          message={{
+            role: 'assistant',
+            content: streaming || '',
+            toolCalls: streamingToolCalls,
+          }}
+        />
+      )}
+    </Box>
+  );
+}

package/src/tui/components/ChatMessage.tsx

@@ -0,0 +1,51 @@
+/** @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;
+}
+
+function UserMessage({ content }: { content: string }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold>You</Text>
+      <Box paddingLeft={2}>
+        <Text>{content}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function AssistantMessage({ content, toolCalls }: { content: string; toolCalls?: ToolCallData[] }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="cyan">AI</Text>
+      {toolCalls && toolCalls.map((tc, i) => (
+        <ToolCall key={i} tool={tc} />
+      ))}
+      {content && (
+        <Box paddingLeft={2} flexDirection="column">
+          <Markdown content={content} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export 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

@@ -0,0 +1,22 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface Props {
+  provider: string;
+  model: string;
+}
+
+export function Header({ provider, model }: Props) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text bold color="cyan"> ⚡ Thatgfsj Code </Text>
+        <Text dimColor> v0.6.0</Text>
+        <Text dimColor> │ </Text>
+        <Text dimColor>{provider} / {model}</Text>
+      </Box>
+      <Text dimColor>{'─'.repeat(60)}</Text>
+    </Box>
+  );
+}

package/src/tui/components/Markdown.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource react */
+import React, { useMemo } from 'react';
+import { Text } from 'ink';
+import { marked } from 'marked';
+import TerminalRenderer from 'marked-terminal';
+
+// Configure marked to use terminal renderer
+marked.setOptions({
+  // @ts-ignore - marked-terminal types are incomplete
+  renderer: new TerminalRenderer({
+    showSectionPrefix: false,
+    tab: 2,
+  }),
+});
+
+interface Props {
+  content: string;
+}
+
+export function Markdown({ content }: Props) {
+  const rendered = useMemo(() => {
+    try {
+      const result = marked.parse(content);
+      // marked.parse returns string | Promise<string> depending on async option
+      if (typeof result === 'string') {
+        return result.trimEnd();
+      }
+      return content;
+    } catch {
+      return content;
+    }
+  }, [content]);
+
+  return <Text>{rendered}</Text>;
+}

package/src/tui/components/Thinking.tsx

@@ -0,0 +1,19 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+
+interface Props {
+  message?: string;
+}
+
+export function Thinking({ message = 'Thinking' }: Props) {
+  return (
+    <Box>
+      <Text color="cyan">
+        <Spinner type="dots" />
+      </Text>
+      <Text dimColor> {message}</Text>
+    </Box>
+  );
+}

package/src/tui/components/ToolCall.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface ToolCallData {
+  name: string;
+  args: string;
+  result?: string;
+  isError?: boolean;
+}
+
+interface Props {
+  tool: ToolCallData;
+}
+
+function formatArgs(args: string): string {
+  try {
+    const obj = JSON.parse(args);
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return '';
+    return entries
+      .map(([k, v]) => {
+        const val = typeof v === 'string' && v.length > 60
+          ? v.slice(0, 60) + '...'
+          : JSON.stringify(v);
+        return `${k}=${val}`;
+      })
+      .join(' ');
+  } catch {
+    return args.length > 80 ? args.slice(0, 80) + '...' : args;
+  }
+}
+
+function formatResult(output: string, maxLines = 15): { text: string; truncated: boolean } {
+  const lines = output.split('\n');
+  if (lines.length <= maxLines) {
+    return { text: output, truncated: false };
+  }
+  return {
+    text: lines.slice(0, maxLines).join('\n'),
+    truncated: true,
+  };
+}
+
+export function ToolCall({ tool }: Props) {
+  const argsStr = formatArgs(tool.args);
+  const result = tool.result ? formatResult(tool.result) : null;
+
+  return (
+    <Box flexDirection="column" marginY={0}>
+      <Box>
+        <Text color="yellow"> ⚙ </Text>
+        <Text bold color="yellow">{tool.name}</Text>
+        {argsStr && <Text dimColor> {argsStr}</Text>}
+      </Box>
+      {result && (
+        <Box paddingLeft={4} flexDirection="column">
+          {result.text.split('\n').map((line, i) => (
+            <Text key={i} dimColor={tool.isError} color={tool.isError ? 'red' : undefined}>
+              {tool.isError ? '✖ ' : '│ '}{line}
+            </Text>
+          ))}
+          {result.truncated && (
+            <Text dimColor>│ ... (truncated)</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export type { ToolCallData };

package/src/tui/components/UserInput.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource react */
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+
+interface Props {
+  onSubmit: (input: string) => void;
+  disabled?: boolean;
+}
+
+export function UserInput({ onSubmit, disabled }: Props) {
+  const [value, setValue] = useState('');
+  const [cursorPos, setCursorPos] = useState(0);
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (disabled) return;
+
+    if (key.return) {
+      const trimmed = value.trim();
+      if (trimmed) {
+        if (trimmed === 'exit' || trimmed === 'quit') {
+          exit();
+          return;
+        }
+        setHistory(prev => [...prev, trimmed]);
+        setHistoryIdx(-1);
+        onSubmit(trimmed);
+        setValue('');
+        setCursorPos(0);
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      if (history.length > 0) {
+        const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+        setHistoryIdx(newIdx);
+        setValue(history[newIdx]);
+        setCursorPos(history[newIdx].length);
+      }
+      return;
+    }
+
+    if (key.downArrow) {
+      if (historyIdx >= 0) {
+        const newIdx = historyIdx + 1;
+        if (newIdx >= history.length) {
+          setHistoryIdx(-1);
+          setValue('');
+          setCursorPos(0);
+        } else {
+          setHistoryIdx(newIdx);
+          setValue(history[newIdx]);
+          setCursorPos(history[newIdx].length);
+        }
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      if (cursorPos > 0) {
+        setValue(v => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
+        setCursorPos(p => p - 1);
+      }
+      return;
+    }
+
+    if (key.leftArrow) {
+      setCursorPos(p => Math.max(0, p - 1));
+      return;
+    }
+
+    if (key.rightArrow) {
+      setCursorPos(p => Math.min(value.length, p + 1));
+      return;
+    }
+
+    if (key.ctrl && input === 'c') {
+      exit();
+      return;
+    }
+
+    // Regular character input
+    if (input && !key.ctrl && !key.meta) {
+      setValue(v => v.slice(0, cursorPos) + input + v.slice(cursorPos));
+      setCursorPos(p => p + input.length);
+    }
+  });
+
+  const prefix = disabled ? '  ' : '❯ ';
+
+  return (
+    <Box>
+      <Text bold color="cyan">{prefix}</Text>
+      <Text>{value}</Text>
+      {!disabled && <Text color="cyan">█</Text>}
+    </Box>
+  );
+}