botholomew 0.6.3 → 0.7.1

package/src/tui/components/InputBar.tsx

@@ -4,9 +4,13 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
+import type { SlashCommand } from "../../skills/commands.ts";
+import { getSlashMatches } from "../slashCompletion.ts";
+import { SlashCommandPopup } from "./SlashCommandPopup.tsx";
 
 interface InputBarProps {
   value: string;
@@ -15,8 +19,7 @@ interface InputBarProps {
   disabled: boolean;
   history: string[];
   header?: ReactNode;
-  completions?: string[];
-  onTabConsumed?: () => void;
+  slashCommands?: SlashCommand[];
 }
 
 export const InputBar = memo(function InputBar({
@@ -26,12 +29,13 @@ export const InputBar = memo(function InputBar({
   disabled,
   history,
   header,
-  completions,
-  onTabConsumed,
+  slashCommands,
 }: InputBarProps) {
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [cursorPos, setCursorPos] = useState(0);
   const [cursorVisible, setCursorVisible] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [popupDismissed, setPopupDismissed] = useState(false);
   const savedInput = useRef("");
   const lastActivity = useRef(Date.now());
 
@@ -43,9 +47,9 @@ export const InputBar = memo(function InputBar({
   const onChangeRef = useRef(onChange);
   const onSubmitRef = useRef(onSubmit);
   const historyRef = useRef(history);
-  const completionsRef = useRef(completions);
-  const onTabConsumedRef = useRef(onTabConsumed);
-  const tabCycleRef = useRef(-1);
+  const slashCommandsRef = useRef(slashCommands);
+  const selectedIndexRef = useRef(selectedIndex);
+  const popupDismissedRef = useRef(popupDismissed);
 
   valueRef.current = value;
   cursorPosRef.current = cursorPos;
@@ -53,8 +57,39 @@ export const InputBar = memo(function InputBar({
   onChangeRef.current = onChange;
   onSubmitRef.current = onSubmit;
   historyRef.current = history;
-  completionsRef.current = completions;
-  onTabConsumedRef.current = onTabConsumed;
+  slashCommandsRef.current = slashCommands;
+  selectedIndexRef.current = selectedIndex;
+  popupDismissedRef.current = popupDismissed;
+
+  // Matches visible in the autocomplete popup, or null when it should be
+  // hidden (non-slash input, space typed, no matches, or user escaped).
+  const popupMatches = useMemo(() => {
+    if (popupDismissed) return null;
+    return getSlashMatches(value, slashCommands ?? []);
+  }, [value, slashCommands, popupDismissed]);
+
+  // Reset highlight to top whenever the match list changes.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally reset on match-list change, not value change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [popupMatches?.length]);
+
+  // Clamp highlight if the list shrank (defensive — the effect above usually handles it).
+  useEffect(() => {
+    if (popupMatches && selectedIndex >= popupMatches.length) {
+      setSelectedIndex(Math.max(0, popupMatches.length - 1));
+    }
+  }, [popupMatches, selectedIndex]);
+
+  // Clear the dismissed flag as soon as the user edits the value,
+  // so a fresh "/" reopens the popup.
+  const prevValueRef = useRef(value);
+  useEffect(() => {
+    if (prevValueRef.current !== value && popupDismissed) {
+      setPopupDismissed(false);
+    }
+    prevValueRef.current = value;
+  }, [value, popupDismissed]);
 
   // Blink cursor when input is active — skip ticks while typing so the
   // cursor stays solid and we avoid unnecessary renders during rapid input.
@@ -87,8 +122,43 @@ export const InputBar = memo(function InputBar({
       const hIdx = historyIndexRef.current;
       const hist = historyRef.current;
 
-      // Enter: submit (shift+enter or opt+enter inserts newline)
+      // Is the slash popup visible right now? Recompute from the authoritative
+      // ref-state so we don't depend on stale closure values.
+      const popupOpen = !popupDismissedRef.current
+        ? getSlashMatches(val, slashCommandsRef.current ?? [])
+        : null;
+
+      const acceptSelection = () => {
+        if (!popupOpen) return false;
+        const chosen =
+          popupOpen[Math.min(selectedIndexRef.current, popupOpen.length - 1)];
+        if (!chosen) return false;
+        const completed = `/${chosen.name} `;
+        valueRef.current = completed;
+        cursorPosRef.current = completed.length;
+        onChangeRef.current(completed);
+        setCursorPos(completed.length);
+        // A trailing space makes the popup disappear naturally via regex,
+        // but set dismissed too so stray state can't re-open it.
+        setPopupDismissed(true);
+        return true;
+      };
+
+      // Escape: close popup if open, keep value untouched
+      if (key.escape) {
+        if (popupOpen) {
+          setPopupDismissed(true);
+        }
+        return;
+      }
+
+      // Enter: if popup is open, accept selection (do not submit).
+      // Otherwise submit as before.
       if (key.return) {
+        if (popupOpen && !key.shift && !key.meta) {
+          acceptSelection();
+          return;
+        }
         if (key.shift || key.meta) {
           const before = val.slice(0, pos);
           const after = val.slice(pos);
@@ -109,6 +179,14 @@ export const InputBar = memo(function InputBar({
         return;
       }
 
+      // Tab: accept popup selection if open. No-op otherwise.
+      if (key.tab) {
+        if (popupOpen) {
+          acceptSelection();
+        }
+        return;
+      }
+
       // Backspace
       if (key.backspace || key.delete) {
         if (pos > 0) {
@@ -138,81 +216,71 @@ export const InputBar = memo(function InputBar({
         return;
       }
 
-      // History navigation
-      if (key.upArrow && hist.length > 0) {
-        const nextIndex = hIdx + 1;
-        if (nextIndex < hist.length) {
-          if (hIdx === -1) {
-            savedInput.current = val;
-          }
-          historyIndexRef.current = nextIndex;
-          setHistoryIndex(nextIndex);
-          const entry = hist[hist.length - 1 - nextIndex];
-          if (entry !== undefined) {
-            valueRef.current = entry;
-            cursorPosRef.current = entry.length;
-            onChangeRef.current(entry);
-            setCursorPos(entry.length);
-          }
+      // Up/Down: popup navigation when open, history otherwise
+      if (key.upArrow) {
+        if (popupOpen) {
+          const next = Math.max(0, selectedIndexRef.current - 1);
+          selectedIndexRef.current = next;
+          setSelectedIndex(next);
+          return;
         }
-        return;
-      }
-
-      if (key.downArrow && hist.length > 0) {
-        if (hIdx > 0) {
-          const nextIndex = hIdx - 1;
-          historyIndexRef.current = nextIndex;
-          setHistoryIndex(nextIndex);
-          const entry = hist[hist.length - 1 - nextIndex];
-          if (entry !== undefined) {
-            valueRef.current = entry;
-            cursorPosRef.current = entry.length;
-            onChangeRef.current(entry);
-            setCursorPos(entry.length);
+        if (hist.length > 0) {
+          const nextIndex = hIdx + 1;
+          if (nextIndex < hist.length) {
+            if (hIdx === -1) {
+              savedInput.current = val;
+            }
+            historyIndexRef.current = nextIndex;
+            setHistoryIndex(nextIndex);
+            const entry = hist[hist.length - 1 - nextIndex];
+            if (entry !== undefined) {
+              valueRef.current = entry;
+              cursorPosRef.current = entry.length;
+              onChangeRef.current(entry);
+              setCursorPos(entry.length);
+            }
           }
-        } else if (hIdx === 0) {
-          historyIndexRef.current = -1;
-          setHistoryIndex(-1);
-          const saved = savedInput.current;
-          valueRef.current = saved;
-          cursorPosRef.current = saved.length;
-          onChangeRef.current(saved);
-          setCursorPos(saved.length);
         }
         return;
       }
 
-      // Tab-completion for slash commands
-      if (key.tab) {
-        const comps = completionsRef.current;
-        if (val.startsWith("/") && comps && comps.length > 0) {
-          const matches = comps.filter((c) => c.startsWith(val));
-          if (matches.length === 1) {
-            const completed = `${matches[0] ?? ""} `;
-            valueRef.current = completed;
-            cursorPosRef.current = completed.length;
-            onChangeRef.current(completed);
-            setCursorPos(completed.length);
-            tabCycleRef.current = -1;
-          } else if (matches.length > 1) {
-            const idx = (tabCycleRef.current + 1) % matches.length;
-            tabCycleRef.current = idx;
-            const completed = matches[idx] ?? "";
-            valueRef.current = completed;
-            cursorPosRef.current = completed.length;
-            onChangeRef.current(completed);
-            setCursorPos(completed.length);
+      if (key.downArrow) {
+        if (popupOpen) {
+          const next = Math.min(
+            popupOpen.length - 1,
+            selectedIndexRef.current + 1,
+          );
+          selectedIndexRef.current = next;
+          setSelectedIndex(next);
+          return;
+        }
+        if (hist.length > 0) {
+          if (hIdx > 0) {
+            const nextIndex = hIdx - 1;
+            historyIndexRef.current = nextIndex;
+            setHistoryIndex(nextIndex);
+            const entry = hist[hist.length - 1 - nextIndex];
+            if (entry !== undefined) {
+              valueRef.current = entry;
+              cursorPosRef.current = entry.length;
+              onChangeRef.current(entry);
+              setCursorPos(entry.length);
+            }
+          } else if (hIdx === 0) {
+            historyIndexRef.current = -1;
+            setHistoryIndex(-1);
+            const saved = savedInput.current;
+            valueRef.current = saved;
+            cursorPosRef.current = saved.length;
+            onChangeRef.current(saved);
+            setCursorPos(saved.length);
           }
-          onTabConsumedRef.current?.();
         }
         return;
       }
 
-      // Reset tab cycle on any non-tab key
-      tabCycleRef.current = -1;
-
       // Ignore other control keys
-      if (key.ctrl || key.escape) {
+      if (key.ctrl) {
         return;
       }
 
@@ -239,36 +307,45 @@ export const InputBar = memo(function InputBar({
 
   const isMultiline = value.includes("\n");
   const placeholder = !value && !disabled;
+  const showPopup = !disabled && popupMatches !== null;
 
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="single"
-      borderColor={disabled ? "gray" : "green"}
-      paddingX={1}
-    >
-      {header}
-      {!disabled && (
-        <Box flexDirection="column">
-          <Box>
-            <Text color="green">{"› "}</Text>
-            {placeholder ? (
-              <Text dimColor>Type a message...</Text>
-            ) : (
-              <Text>
-                {value.slice(0, cursorPos)}
-                <Text inverse={cursorVisible}>{value[cursorPos] ?? " "}</Text>
-                {value.slice(cursorPos + 1)}
-              </Text>
-            )}
-          </Box>
-          {isMultiline && (
+    <Box flexDirection="column">
+      {showPopup && popupMatches && (
+        <SlashCommandPopup
+          matches={popupMatches}
+          selectedIndex={selectedIndex}
+        />
+      )}
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={disabled ? "gray" : "green"}
+        paddingX={1}
+      >
+        {header}
+        {!disabled && (
+          <Box flexDirection="column">
             <Box>
-              <Text dimColor> alt+return for newline, return to send</Text>
+              <Text color="green">{"› "}</Text>
+              {placeholder ? (
+                <Text dimColor>Type a message...</Text>
+              ) : (
+                <Text>
+                  {value.slice(0, cursorPos)}
+                  <Text inverse={cursorVisible}>{value[cursorPos] ?? " "}</Text>
+                  {value.slice(cursorPos + 1)}
+                </Text>
+              )}
             </Box>
-          )}
-        </Box>
-      )}
+            {isMultiline && (
+              <Box>
+                <Text dimColor> alt+return for newline, return to send</Text>
+              </Box>
+            )}
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 });

package/src/tui/components/SlashCommandPopup.tsx

@@ -0,0 +1,50 @@
+import { Box, Text } from "ink";
+import { memo } from "react";
+import type { SlashCommand } from "../../skills/commands.ts";
+
+interface SlashCommandPopupProps {
+  matches: SlashCommand[];
+  selectedIndex: number;
+}
+
+export const SlashCommandPopup = memo(function SlashCommandPopup({
+  matches,
+  selectedIndex,
+}: SlashCommandPopupProps) {
+  if (matches.length === 0) return null;
+
+  const nameWidth = matches.reduce(
+    (max, c) => Math.max(max, c.name.length + 1),
+    0,
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+    >
+      {matches.map((cmd, i) => {
+        const active = i === selectedIndex;
+        const marker = active ? "›" : " ";
+        const padded = `/${cmd.name}`.padEnd(nameWidth + 1);
+        return (
+          <Box key={cmd.name}>
+            <Text color={active ? "green" : undefined} bold={active}>
+              {marker} {padded}
+            </Text>
+            <Text dimColor={!active}>
+              {cmd.description || "(no description)"}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box marginTop={0}>
+        <Text dimColor>
+          ↑↓ to navigate · tab/return to accept · esc to close
+        </Text>
+      </Box>
+    </Box>
+  );
+});

package/src/tui/slashCompletion.ts

@@ -0,0 +1,38 @@
+import type { SlashCommand } from "../skills/commands.ts";
+
+export const MAX_VISIBLE_COMPLETIONS = 8;
+
+const SLASH_QUERY = /^\/([\w-]*)$/;
+
+/**
+ * Given the current input value, return the list of slash commands that
+ * should appear in the autocomplete popup. Returns `null` when the popup
+ * should not be shown at all (e.g. the input isn't a slash query, or the
+ * user has already typed a space to start writing arguments).
+ */
+export function getSlashMatches(
+  value: string,
+  commands: SlashCommand[],
+): SlashCommand[] | null {
+  const match = SLASH_QUERY.exec(value);
+  if (!match) return null;
+
+  const query = (match[1] ?? "").toLowerCase();
+  const filtered = commands.filter((c) =>
+    c.name.toLowerCase().startsWith(query),
+  );
+  if (filtered.length === 0) return null;
+
+  return filtered.slice(0, MAX_VISIBLE_COMPLETIONS);
+}
+
+export function buildSlashCommands(
+  builtins: SlashCommand[],
+  skills: Iterable<{ name: string; description: string }>,
+): SlashCommand[] {
+  const out: SlashCommand[] = [...builtins];
+  for (const s of skills) {
+    out.push({ name: s.name, description: s.description });
+  }
+  return out;
+}