thatgfsj-code 0.6.0 → 0.7.1

package/src/tui/components/ToolCall.tsx

@@ -11,58 +11,60 @@ interface ToolCallData {
 
 interface Props {
   tool: ToolCallData;
+  width?: number;
 }
 
-function formatArgs(args: string): string {
+function formatToolParams(name: string, 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(' ');
+    switch (name) {
+      case 'file': {
+        const action = obj.action || '';
+        const path = (obj.path || '').replace(/.*[/\\]/, '');
+        return `${action} ${path || obj.path || ''}`;
+      }
+      case 'shell': return obj.command || '';
+      case 'git': return obj.command || '';
+      case 'search': return obj.query || obj.pattern || '';
+      case 'nwt': return obj.action || '';
+      default: {
+        const first = Object.entries(obj)[0];
+        if (!first) return '';
+        const val = typeof first[1] === 'string' && first[1].length > 40
+          ? first[1].slice(0, 40) + '...'
+          : JSON.stringify(first[1]);
+        return `${first[0]}=${val}`;
+      }
+    }
   } catch {
-    return args.length > 80 ? args.slice(0, 80) + '...' : args;
+    return args.length > 50 ? args.slice(0, 50) + '...' : args;
   }
 }
 
-function formatResult(output: string, maxLines = 15): { text: string; truncated: boolean } {
+function formatResult(output: string, maxLines = 10): { 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,
-  };
+  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);
+export function ToolCall({ tool, width }: Props) {
+  const params = formatToolParams(tool.name, tool.args);
   const result = tool.result ? formatResult(tool.result) : null;
 
   return (
-    <Box flexDirection="column" marginY={0}>
+    <Box borderStyle="round" borderLeft borderColor="#06B6D4" paddingLeft={1} flexDirection="column" marginBottom={0}>
       <Box>
-        <Text color="yellow"> ⚙ </Text>
-        <Text bold color="yellow">{tool.name}</Text>
-        {argsStr && <Text dimColor> {argsStr}</Text>}
+        <Text color="#06B6D4" bold>⚙ {tool.name}: </Text>
+        <Text color="#94A3B8">{params}</Text>
       </Box>
       {result && (
-        <Box paddingLeft={4} flexDirection="column">
+        <Box paddingLeft={1} flexDirection="column">
           {result.text.split('\n').map((line, i) => (
-            <Text key={i} dimColor={tool.isError} color={tool.isError ? 'red' : undefined}>
-              {tool.isError ? '✖ ' : '│ '}{line}
+            <Text key={i} color={tool.isError ? '#EF4444' : '#64748B'}>
+              {line}
             </Text>
           ))}
-          {result.truncated && (
-            <Text dimColor>│ ... (truncated)</Text>
-          )}
+          {result.truncated && <Text dimColor>...</Text>}
         </Box>
       )}
     </Box>

package/src/tui/components/UserInput.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import React, { useState, useCallback } from 'react';
+import React, { useState, memo } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 
 interface Props {
@@ -7,9 +7,8 @@ interface Props {
   disabled?: boolean;
 }
 
-export function UserInput({ onSubmit, disabled }: Props) {
+export const UserInput = memo(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();
@@ -20,82 +19,49 @@ export function UserInput({ onSubmit, disabled }: Props) {
     if (key.return) {
       const trimmed = value.trim();
       if (trimmed) {
-        if (trimmed === 'exit' || trimmed === 'quit') {
-          exit();
-          return;
-        }
+        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);
-      }
+    if (key.upArrow && history.length > 0) {
+      const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+      setHistoryIdx(newIdx);
+      setValue(history[newIdx]);
       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);
-        }
+    if (key.downArrow && historyIdx >= 0) {
+      const newIdx = historyIdx + 1;
+      if (newIdx >= history.length) {
+        setHistoryIdx(-1); setValue('');
+      } else {
+        setHistoryIdx(newIdx); setValue(history[newIdx]);
       }
       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));
+      setValue(v => v.slice(0, -1));
       return;
     }
 
-    if (key.ctrl && input === 'c') {
-      exit();
-      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);
+      setValue(v => v + input);
     }
   });
 
-  const prefix = disabled ? '  ' : '❯ ';
-
   return (
-    <Box>
-      <Text bold color="cyan">{prefix}</Text>
+    <Box paddingY={0}>
+      <Text color="#06B6D4" bold>{disabled ? '  ' : '❯ '}</Text>
       <Text>{value}</Text>
-      {!disabled && <Text color="cyan">█</Text>}
+      {!disabled && <Text color="#06B6D4">█</Text>}
     </Box>
   );
-}
+});

package/src/tui/hooks/useCommands.ts

@@ -51,10 +51,38 @@ export function useCommands(app: App) {
       }
 
       case 'clear':
-        // Handled separately in the App component
         return { handled: true };
 
       default:
+        // Handle /skill commands
+        if (cmd.startsWith('skill') || cmd.startsWith('/skill')) {
+          const parts = input.trim().split(/\s+/);
+          const sub = parts[1] || 'list';
+
+          if (sub === 'list') {
+            const all = app.skills.list();
+            const lines = all.map(s => {
+              const active = app.skills.isActive(s.id) ? '✓' : ' ';
+              return `  [${active}] ${s.name.padEnd(28)} ${s.description}`;
+            });
+            return {
+              handled: true,
+              output: ['Skills ([✓] = active):', ...lines, '', 'Usage: skill <id> to toggle'].join('\n'),
+            };
+          }
+
+          // Toggle skill
+          const skillId = sub;
+          if (app.skills.isActive(skillId)) {
+            app.skills.deactivate(skillId);
+            return { handled: true, output: `  Deactivated: ${skillId}` };
+          } else if (app.skills.activate(skillId)) {
+            return { handled: true, output: `  Activated: ${skillId}` };
+          } else {
+            return { handled: true, output: `  Unknown skill: ${skillId}` };
+          }
+        }
+
         return { handled: false };
     }
   }, [app]);