@zhongqian97-code/ecode 0.1.1 → 0.2.0

package/dist/index.js

@@ -95,8 +95,8 @@ function loadConfig() {
 }
 
 // src/ui/App.tsx
-import { useState as useState3, useCallback, useRef, useEffect as useEffect3 } from "react";
-import { Box as Box4, useInput as useInput2 } from "ink";
+import { useState as useState3, useCallback, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { Box as Box5, useInput as useInput2 } from "ink";
 
 // src/llm.ts
 import OpenAI from "openai";
@@ -631,14 +631,23 @@ function ConversationHistory({
 }
 
 // src/ui/Input.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2, useRef, forwardRef, useImperativeHandle } from "react";
 import { Box as Box3, Text as Text3, useInput } from "ink";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var CURSOR_CHAR = "\u258C";
 var BLINK_INTERVAL_MS = 530;
-function Input({ isActive, onSubmit, placeholder }) {
+var Input = forwardRef(function Input2({ isActive, onSubmit, onChange, placeholder }, ref) {
   const [lines, setLines] = useState2([""]);
   const [cursorVisible, setCursorVisible] = useState2(true);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useImperativeHandle(ref, () => ({
+    fill(text) {
+      const newLines = text ? text.split("\n") : [""];
+      setLines(newLines);
+      onChangeRef.current?.(text);
+    }
+  }));
   useEffect2(() => {
     if (!isActive) {
       setCursorVisible(true);
@@ -654,43 +663,42 @@ function Input({ isActive, onSubmit, placeholder }) {
   useInput(
     (input, key) => {
       if (key.return && key.shift) {
-        setLines((prev) => [...prev, ""]);
+        const newLines = [...lines, ""];
+        setLines(newLines);
+        onChange?.(newLines.join("\n"));
         return;
       }
       if (key.return) {
         const text = lines.join("\n");
         onSubmit(text);
         setLines([""]);
+        onChange?.("");
         return;
       }
       if (key.backspace || key.delete) {
-        setLines((prev) => {
-          const next = [...prev];
-          const lastIdx = next.length - 1;
-          const lastLine = next[lastIdx];
-          if (lastLine.length > 0) {
-            next[lastIdx] = lastLine.slice(0, -1);
-            return next;
-          }
-          if (next.length > 1) {
-            return next.slice(0, -1);
-          }
-          return next;
-        });
+        const lastIdx = lines.length - 1;
+        const lastLine = lines[lastIdx];
+        let newLines;
+        if (lastLine.length > 0) {
+          newLines = [...lines.slice(0, lastIdx), lastLine.slice(0, -1)];
+        } else if (lines.length > 1) {
+          newLines = lines.slice(0, -1);
+        } else {
+          return;
+        }
+        setLines(newLines);
+        onChange?.(newLines.join("\n"));
         return;
       }
       if (key.ctrl || key.escape || key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.tab || key.pageUp || key.pageDown) {
         return;
       }
       if (input.length > 0) {
-        setLines((prev) => {
-          const next = [...prev];
-          next[next.length - 1] = next[next.length - 1] + input;
-          return next;
-        });
+        const newLines = [...lines.slice(0, -1), lines[lines.length - 1] + input];
+        setLines(newLines);
+        onChange?.(newLines.join("\n"));
       }
     },
-    // 第二个参数：仅在 isActive=true 时注册键盘监听
     { isActive }
   );
   const isEmpty = lines.every((line) => line === "");
@@ -712,20 +720,69 @@ function Input({ isActive, onSubmit, placeholder }) {
       ] }, idx);
     }) });
   };
-  return /* @__PURE__ */ jsx3(Box3, { children: isActive ? (
-    // 激活状态：调用完整的多行渲染逻辑
-    renderLines()
-  ) : (
-    // 禁用状态：暗色单行显示，不响应键盘
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "> " }),
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: isEmpty ? placeholder ?? "" : lines.join(" ") })
-    ] })
-  ) });
+  return /* @__PURE__ */ jsx3(Box3, { children: isActive ? renderLines() : /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "> " }),
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: isEmpty ? placeholder ?? "" : lines.join(" ") })
+  ] }) });
+});
+var Input_default = Input;
+
+// src/ui/SkillAutocomplete.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SkillAutocomplete({
+  suggestions,
+  selectedIndex,
+  isOpen: isOpen2
+}) {
+  if (!isOpen2 || suggestions.length === 0) {
+    return /* @__PURE__ */ jsx4(Fragment2, {});
+  }
+  return /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", children: suggestions.map((skill, idx) => {
+    const selected = idx === selectedIndex;
+    return /* @__PURE__ */ jsxs4(Box4, { children: [
+      /* @__PURE__ */ jsx4(Text4, { color: selected ? "cyan" : void 0, bold: selected, children: selected ? "> " : "  " }),
+      /* @__PURE__ */ jsxs4(Text4, { color: selected ? "cyan" : void 0, bold: selected, children: [
+        "/",
+        skill.name
+      ] }),
+      /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        " \u2014 ",
+        skill.description
+      ] })
+    ] }, skill.name);
+  }) });
+}
+
+// src/ui/autocompleteLogic.ts
+function getInitialState() {
+  return { query: "", selectedIndex: 0, dismissed: false };
+}
+function computeSuggestions(skills, state, maxSuggestions = 5) {
+  const { query } = state;
+  if (!query.startsWith("/")) return [];
+  const term = query.slice(1).toLowerCase();
+  if (term.includes(" ")) return [];
+  return skills.filter((s) => s.name.toLowerCase().startsWith(term)).slice(0, maxSuggestions);
+}
+function isOpen(state, suggestions) {
+  return state.query.startsWith("/") && suggestions.length > 0 && !state.dismissed;
+}
+function handleInputChange(_state, newQuery) {
+  return { query: newQuery, selectedIndex: 0, dismissed: false };
+}
+function moveUp(state, count) {
+  return { ...state, selectedIndex: (state.selectedIndex - 1 + count) % count };
+}
+function moveDown(state, count) {
+  return { ...state, selectedIndex: (state.selectedIndex + 1) % count };
+}
+function dismiss(state) {
+  return { ...state, dismissed: true };
 }
 
 // src/ui/App.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function App({ config: config2, version: version2, autoMode: autoMode2 = false, registry: registry2 }) {
   const [messages, setMessages] = useState3([]);
   const [status, setStatus] = useState3("idle");
@@ -738,10 +795,12 @@ function App({ config: config2, version: version2, autoMode: autoMode2 = false,
   const [toolName, setToolName] = useState3(void 0);
   const [confirmPrompt, setConfirmPrompt] = useState3(void 0);
   const [expandTools, setExpandTools] = useState3(false);
-  const pendingConfirmRef = useRef(null);
-  const llmRef = useRef(createLLMClient(config2));
-  const loggerRef = useRef(null);
-  const loggedCountRef = useRef(0);
+  const pendingConfirmRef = useRef2(null);
+  const llmRef = useRef2(createLLMClient(config2));
+  const inputRef = useRef2(null);
+  const [acState, setAcState] = useState3(getInitialState());
+  const loggerRef = useRef2(null);
+  const loggedCountRef = useRef2(0);
   useEffect3(() => {
     if (config2.logDir) {
       loggerRef.current = createLogger(config2.logDir, /* @__PURE__ */ new Date());
@@ -765,6 +824,30 @@ function App({ config: config2, version: version2, autoMode: autoMode2 = false,
     loggedCountRef.current = messages.length;
   }, [messages]);
   useInput2((_input, key) => {
+    const skillList = registry2?.list() ?? [];
+    const suggestions = computeSuggestions(skillList, acState);
+    const open = isOpen(acState, suggestions);
+    if (open) {
+      if (key.upArrow) {
+        setAcState((prev) => moveUp(prev, suggestions.length));
+        return;
+      }
+      if (key.downArrow) {
+        setAcState((prev) => moveDown(prev, suggestions.length));
+        return;
+      }
+      if (key.escape) {
+        setAcState((prev) => dismiss(prev));
+        return;
+      }
+      if (key.tab) {
+        const selected = suggestions[acState.selectedIndex];
+        if (selected) {
+          inputRef.current?.fill(`/${selected.name} `);
+        }
+        return;
+      }
+    }
     if (key.tab) {
       setExpandTools((prev) => !prev);
     }
@@ -950,30 +1033,44 @@ function App({ config: config2, version: version2, autoMode: autoMode2 = false,
     [status, messages, runLlmLoop]
   );
   const isInputActive = status === "idle" || status === "awaiting_confirm";
-  return (
-    // 顶层容器：纵向堆叠，撑满终端高度（height="100%"）
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", height: "100%", children: [
-      /* @__PURE__ */ jsx4(ConversationHistory, { messages, expandTools }),
-      /* @__PURE__ */ jsx4(
-        StatusBar,
-        {
-          status,
-          toolName,
-          confirmPrompt,
-          version: version2,
-          tokenUsage
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        Input,
-        {
-          isActive: isInputActive,
-          onSubmit: handleSubmit,
-          placeholder: status === "awaiting_confirm" ? "y / n" : void 0
-        }
-      )
-    ] })
-  );
+  const handleInputTextChange = useCallback((text) => {
+    if (status !== "awaiting_confirm") {
+      setAcState((prev) => handleInputChange(prev, text));
+    }
+  }, [status]);
+  const skillSuggestions = registry2 ? computeSuggestions(registry2.list(), acState) : [];
+  const acOpen = isOpen(acState, skillSuggestions);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", height: "100%", children: [
+    /* @__PURE__ */ jsx5(ConversationHistory, { messages, expandTools }),
+    /* @__PURE__ */ jsx5(
+      StatusBar,
+      {
+        status,
+        toolName,
+        confirmPrompt,
+        version: version2,
+        tokenUsage
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SkillAutocomplete,
+      {
+        suggestions: skillSuggestions,
+        selectedIndex: acState.selectedIndex,
+        isOpen: acOpen
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      Input_default,
+      {
+        ref: inputRef,
+        isActive: isInputActive,
+        onSubmit: handleSubmit,
+        onChange: handleInputTextChange,
+        placeholder: status === "awaiting_confirm" ? "y / n" : void 0
+      }
+    )
+  ] });
 }
 
 // src/skills/registry.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhongqian97-code/ecode",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A minimal Claude Code clone with REPL interface and bash tool calling",
   "type": "module",
   "author": "zhongqian97-code",