@cdoing/opentuicli 0.1.2

package/src/components/dialog-theme.tsx

@@ -0,0 +1,292 @@
+/**
+ * DialogTheme — theme picker dialog (Ctrl+T)
+ *
+ * Three sections navigable with Tab:
+ *   1. Appearance — Dark / Light mode toggle
+ *   2. Custom Background — type a hex color for terminal bg (or clear to use theme default)
+ *   3. Color Themes — browse / search built-in themes with live preview
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState, useMemo } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useTheme, THEMES, getThemeIds } from "../context/theme";
+
+type Section = "mode" | "custombg" | "themes";
+const SECTIONS: Section[] = ["mode", "custombg", "themes"];
+
+export function DialogTheme(props: {
+  onClose: () => void;
+}) {
+  const { theme, themeId, mode, customBg, setThemeId, setMode, setCustomBg } = useTheme();
+  const t = theme;
+  const dims = useTerminalDimensions();
+
+  const initialThemeId = themeId;
+  const initialMode = mode;
+  const initialCustomBg = customBg;
+  const themeIds = getThemeIds();
+
+  const [section, setSection] = useState<Section>("mode");
+  const [modeSelected, setModeSelected] = useState<number>(mode === "dark" ? 0 : 1);
+  const [bgInput, setBgInput] = useState(customBg || "");
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(
+    Math.max(0, themeIds.indexOf(themeId))
+  );
+
+  const filtered = useMemo(() => {
+    if (!query) return themeIds;
+    const q = query.toLowerCase();
+    return themeIds.filter((id) => {
+      const def = THEMES[id];
+      return id.toLowerCase().includes(q) || def.name.toLowerCase().includes(q);
+    });
+  }, [query, themeIds]);
+
+  const clampedSelected = Math.min(selected, Math.max(0, filtered.length - 1));
+
+  const maxVisible = Math.max(5, Math.min(filtered.length, (dims.height || 24) - 18));
+  const scrollOffset = Math.max(0, clampedSelected - maxVisible + 3);
+  const visibleItems = filtered.slice(scrollOffset, scrollOffset + maxVisible);
+
+  const modeOptions: Array<{ id: "dark" | "light"; label: string }> = [
+    { id: "dark", label: "Dark Mode" },
+    { id: "light", label: "Light Mode" },
+  ];
+
+  const nextSection = () => {
+    setSection((s) => {
+      const idx = SECTIONS.indexOf(s);
+      return SECTIONS[(idx + 1) % SECTIONS.length];
+    });
+  };
+
+  const isValidHex = (s: string): boolean => /^#[0-9a-fA-F]{6}$/.test(s);
+
+  useKeyboard((key: any) => {
+    if (key.name === "escape") {
+      setThemeId(initialThemeId);
+      setMode(initialMode);
+      setCustomBg(initialCustomBg);
+      props.onClose();
+      return;
+    }
+
+    if (key.name === "tab") {
+      nextSection();
+      return;
+    }
+
+    // ── Mode section ──
+    if (section === "mode") {
+      if (key.name === "up" || key.name === "k") {
+        setModeSelected((s) => Math.max(0, s - 1));
+        return;
+      }
+      if (key.name === "down" || key.name === "j") {
+        setModeSelected((s) => Math.min(modeOptions.length - 1, s + 1));
+        return;
+      }
+      if (key.name === "return") {
+        setMode(modeOptions[modeSelected].id);
+        nextSection();
+        return;
+      }
+      return;
+    }
+
+    // ── Custom BG section ──
+    if (section === "custombg") {
+      if (key.name === "return") {
+        if (bgInput === "" || bgInput === "none") {
+          setCustomBg(null);
+        } else if (isValidHex(bgInput)) {
+          setCustomBg(bgInput);
+        }
+        nextSection();
+        return;
+      }
+      if (key.name === "backspace") {
+        setBgInput((s) => s.slice(0, -1));
+        return;
+      }
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+        setBgInput((s) => {
+          const next = s + key.sequence;
+          // Live preview if valid hex
+          if (isValidHex(next)) {
+            setCustomBg(next);
+          }
+          return next;
+        });
+        return;
+      }
+      return;
+    }
+
+    // ── Themes section ──
+    if (key.name === "return") {
+      props.onClose();
+      return;
+    }
+
+    if (key.name === "up" || (key.name === "k" && !query)) {
+      setSelected((s) => {
+        const next = Math.max(0, s - 1);
+        const id = filtered[next];
+        if (id) setThemeId(id);
+        return next;
+      });
+      return;
+    }
+
+    if (key.name === "down" || (key.name === "j" && !query)) {
+      setSelected((s) => {
+        const next = Math.min(filtered.length - 1, s + 1);
+        const id = filtered[next];
+        if (id) setThemeId(id);
+        return next;
+      });
+      return;
+    }
+
+    if (key.name === "backspace") {
+      setQuery((q) => q.slice(0, -1));
+      setSelected(0);
+      return;
+    }
+
+    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+      setQuery((q) => {
+        const newQ = q + key.sequence;
+        const q2 = newQ.toLowerCase();
+        const first = themeIds.find((id) => {
+          const def = THEMES[id];
+          return id.toLowerCase().includes(q2) || def.name.toLowerCase().includes(q2);
+        });
+        if (first) setThemeId(first);
+        return newQ;
+      });
+      setSelected(0);
+    }
+  });
+
+  return (
+    <box
+      borderStyle="double"
+      borderColor={t.primary}
+      paddingX={1}
+      paddingY={1}
+      flexDirection="column"
+      position="absolute"
+      top="10%"
+      left="20%"
+      width="60%"
+    >
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"  Themes"}
+      </text>
+      <text fg={t.textDim}>
+        {`  Mode: ${mode}  •  ${filtered.length} themes${customBg ? `  •  BG: ${customBg}` : ""}`}
+      </text>
+      <text>{""}</text>
+
+      {/* ── Appearance ── */}
+      <text
+        fg={section === "mode" ? t.primary : t.textDim}
+        attributes={section === "mode" ? TextAttributes.BOLD : undefined}
+      >
+        {"  Appearance"}
+      </text>
+      {modeOptions.map((opt, i) => {
+        const isSel = section === "mode" && i === modeSelected;
+        const isActive = opt.id === mode;
+        return (
+          <box key={opt.id} flexDirection="row">
+            <text
+              fg={isSel ? t.primary : t.text}
+              attributes={isSel ? TextAttributes.BOLD : undefined}
+            >
+              {`    ${isSel ? ">" : " "} ${opt.label}`}
+            </text>
+            {isActive && <text fg={t.success}>{" *"}</text>}
+          </box>
+        );
+      })}
+      <text>{""}</text>
+
+      {/* ── Custom Background ── */}
+      <text
+        fg={section === "custombg" ? t.primary : t.textDim}
+        attributes={section === "custombg" ? TextAttributes.BOLD : undefined}
+      >
+        {"  Custom Background"}
+      </text>
+      <box flexDirection="row">
+        <text fg={t.textMuted}>{"    Hex: "}</text>
+        {section === "custombg" ? (
+          <>
+            <text fg={isValidHex(bgInput) ? t.success : t.text}>{bgInput || ""}</text>
+            <text fg={t.primary} attributes={TextAttributes.BOLD}>{"_"}</text>
+          </>
+        ) : (
+          <text fg={customBg ? t.success : t.textDim}>{customBg || "(theme default)"}</text>
+        )}
+      </box>
+      {section === "custombg" && (
+        <text fg={t.textDim}>{"    Type #rrggbb hex, empty to clear. Enter to apply."}</text>
+      )}
+      <text>{""}</text>
+
+      {/* ── Color Themes ── */}
+      <text
+        fg={section === "themes" ? t.primary : t.textDim}
+        attributes={section === "themes" ? TextAttributes.BOLD : undefined}
+      >
+        {"  Color Themes"}
+      </text>
+
+      {section === "themes" && (
+        <box flexDirection="row">
+          <text fg={t.textMuted}>{"    > "}</text>
+          <text fg={t.text}>{query || ""}</text>
+          <text fg={t.primary} attributes={TextAttributes.BOLD}>{"_"}</text>
+        </box>
+      )}
+
+      {visibleItems.length > 0 ? (
+        visibleItems.map((id) => {
+          const def = THEMES[id];
+          const idx = filtered.indexOf(id);
+          const isSel = section === "themes" && idx === clampedSelected;
+          const isCurrent = id === themeId;
+
+          return (
+            <box key={id} flexDirection="row">
+              <text
+                fg={isSel ? t.primary : t.text}
+                attributes={isSel ? TextAttributes.BOLD : undefined}
+              >
+                {`    ${isSel ? ">" : " "} ${def.name}`}
+              </text>
+              <text fg={t.textDim}>{`  ${id}`}</text>
+              {isCurrent && <text fg={t.success}>{" *"}</text>}
+            </box>
+          );
+        })
+      ) : (
+        <text fg={t.textDim}>{"    No matching themes"}</text>
+      )}
+
+      {filtered.length > maxVisible && (
+        <text fg={t.textDim}>
+          {`    ... ${filtered.length - maxVisible} more`}
+        </text>
+      )}
+
+      <text>{""}</text>
+      <text fg={t.textDim}>{"  Tab Switch section  Up/Down Navigate  Enter Select  Esc Cancel"}</text>
+    </box>
+  );
+}

package/src/components/input-area.tsx

@@ -0,0 +1,318 @@
+/**
+ * InputArea — rich input with autocomplete, ghost text, image paste
+ *
+ * Features:
+ *   - Slash command autocomplete dropdown (/ prefix)
+ *   - @mention autocomplete dropdown (@ prefix)
+ *   - Tool subcommand suggestions (npm, git, etc.)
+ *   - Ghost text inline completion (Tab/→ to accept)
+ *   - Ctrl+V paste text or images (macOS clipboard)
+ *   - Ctrl+U clear line, Ctrl+W delete word
+ *   - Up/Down navigate suggestions, Enter to select
+ *   - Escape to close dropdown
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState, useRef, useMemo } from "react";
+import { useKeyboard } from "@opentui/react";
+import { execSync } from "child_process";
+import { useTheme } from "../context/theme";
+import { getCompletions, getGhostText, type Suggestion } from "../lib/autocomplete";
+import type { ImageAttachment } from "@cdoing/ai";
+
+export interface InputAreaProps {
+  onSubmit: (text: string, images?: ImageAttachment[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  workingDir: string;
+}
+
+function readClipboard(): string {
+  try {
+    if (process.platform === "darwin") return execSync("pbpaste", { encoding: "utf-8" });
+    try { return execSync("xclip -selection clipboard -o", { encoding: "utf-8" }); }
+    catch { return execSync("xsel --clipboard --output", { encoding: "utf-8" }); }
+  } catch { return ""; }
+}
+
+function readClipboardImage(): ImageAttachment | null {
+  if (process.platform !== "darwin") return null;
+  try {
+    const hasImage = execSync(
+      `osascript -e 'clipboard info' 2>/dev/null | grep -q "TIFF\\|PNG\\|JPEG" && echo "yes" || echo "no"`,
+      { encoding: "utf-8", timeout: 1000 },
+    ).trim();
+    if (hasImage !== "yes") return null;
+    const base64 = execSync(
+      `osascript -e 'set theImage to the clipboard as «class PNGf»' -e 'return theImage' 2>/dev/null | base64`,
+      { encoding: "utf-8", timeout: 3000, maxBuffer: 20 * 1024 * 1024 },
+    ).trim();
+    if (base64 && base64.length > 100) return { data: base64, mimeType: "image/png" };
+  } catch {}
+  return null;
+}
+
+const MAX_VISIBLE = 6;
+
+export function InputArea(props: InputAreaProps) {
+  const { theme } = useTheme();
+  const t = theme;
+  const [value, setValue] = useState("");
+  const [pendingImages, setPendingImages] = useState<ImageAttachment[]>([]);
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const imageCountRef = useRef(0);
+
+  // Compute suggestions based on current input, with a leading "(none)" option for path completions
+  const suggestions = useMemo(() => {
+    if (!value) return [];
+    const completions = getCompletions(value, props.workingDir);
+    // Add a "none" option at the top for file/subcommand completions so user can submit as-is
+    if (completions.length > 0 && completions[0].type === "file") {
+      return [{ text: value, description: "submit as typed", type: "file" as const }, ...completions];
+    }
+    return completions;
+  }, [value, props.workingDir]);
+
+  // Compute ghost text
+  const ghost = useMemo(() => {
+    if (dropdownOpen && suggestions.length > 0) return "";
+    return getGhostText(value, props.workingDir);
+  }, [value, props.workingDir, dropdownOpen, suggestions.length]);
+
+  // Auto-open dropdown when suggestions exist
+  const showDropdown = dropdownOpen && suggestions.length > 0;
+
+  useKeyboard((key: any) => {
+    // Allow typing even when disabled (streaming) — submit handler decides what to do
+
+    // ── Dropdown navigation ──
+    if (showDropdown) {
+      if (key.name === "up") {
+        setSelectedIdx((i) => (i <= 0 ? suggestions.length - 1 : i - 1));
+        return;
+      }
+      if (key.name === "down") {
+        setSelectedIdx((i) => (i >= suggestions.length - 1 ? 0 : i + 1));
+        return;
+      }
+      if (key.name === "return") {
+        const s = suggestions[selectedIdx];
+        if (s) {
+          const text = s.text.trim();
+          if (text) {
+            // Execute the command directly
+            props.onSubmit(text, pendingImages.length > 0 ? [...pendingImages] : undefined);
+            setValue("");
+            setPendingImages([]);
+          }
+          setDropdownOpen(false);
+          setSelectedIdx(0);
+        }
+        return;
+      }
+      if (key.name === "escape") {
+        setDropdownOpen(false);
+        return;
+      }
+      if (key.name === "tab") {
+        const s = suggestions[selectedIdx];
+        if (s) {
+          setValue(s.text + " ");
+          setDropdownOpen(false);
+          setSelectedIdx(0);
+        }
+        return;
+      }
+    }
+
+    // ── Ghost text accept ──
+    if (ghost && (key.name === "tab" || key.name === "right")) {
+      setValue((v) => v + ghost);
+      return;
+    }
+
+    // Ctrl+V — paste image or text
+    if (key.ctrl && key.name === "v") {
+      const img = readClipboardImage();
+      if (img) {
+        imageCountRef.current += 1;
+        setPendingImages((prev) => [...prev, img]);
+        setValue((v) => v + `[Image #${imageCountRef.current}] `);
+        return;
+      }
+      const clip = readClipboard().trim();
+      if (clip) {
+        const firstLine = clip.split("\n")[0] || "";
+        setValue((v) => v + firstLine);
+      }
+      return;
+    }
+
+    // Ctrl+U — clear line
+    if (key.ctrl && key.name === "u") {
+      setValue("");
+      setPendingImages([]);
+      setDropdownOpen(false);
+      return;
+    }
+
+    // Ctrl+W — delete last word
+    if (key.ctrl && key.name === "w") {
+      setValue((v) => v.replace(/\S+\s*$/, ""));
+      return;
+    }
+
+    // Enter — submit
+    if (key.name === "return" && !key.shift) {
+      const text = valueRef.current.trim();
+      if (text || pendingImages.length > 0) {
+        props.onSubmit(text || "Describe this image.", pendingImages.length > 0 ? [...pendingImages] : undefined);
+        setValue("");
+        setPendingImages([]);
+        setDropdownOpen(false);
+      }
+      return;
+    }
+
+    // Backspace
+    if (key.name === "backspace") {
+      setValue((v) => {
+        const next = v.slice(0, -1);
+        // Re-evaluate dropdown
+        if (next.startsWith("/") || next.includes("@") || getCompletions(next, props.workingDir).length > 0) {
+          setDropdownOpen(true);
+          setSelectedIdx(0);
+        } else {
+          setDropdownOpen(false);
+        }
+        return next;
+      });
+      return;
+    }
+
+    // Escape
+    if (key.name === "escape") {
+      setDropdownOpen(false);
+      return;
+    }
+
+    // Space
+    if (key.name === "space") {
+      setValue((v) => {
+        const next = v + " ";
+        // Close dropdown on space for slash commands, but check for path completions
+        if (v.startsWith("/")) {
+          setDropdownOpen(false);
+        } else if (getCompletions(next, props.workingDir).length > 0) {
+          setDropdownOpen(true);
+          setSelectedIdx(0);
+        }
+        return next;
+      });
+      return;
+    }
+
+    // Regular character
+    if (key.name && key.name.length === 1 && !key.ctrl && !key.meta) {
+      setValue((v) => {
+        const next = v + key.name;
+        // Auto-open dropdown for /, @, and path completions
+        if (next.startsWith("/") || next.includes("@")) {
+          setDropdownOpen(true);
+          setSelectedIdx(0);
+        } else if (getCompletions(next, props.workingDir).length > 0) {
+          setDropdownOpen(true);
+          setSelectedIdx(0);
+        }
+        return next;
+      });
+    }
+  });
+
+  const isSlashCommand = value.startsWith("/");
+
+  // Window the suggestions for display
+  const windowStart = Math.max(0, Math.min(selectedIdx - Math.floor(MAX_VISIBLE / 2), suggestions.length - MAX_VISIBLE));
+  const visibleSuggestions = suggestions.slice(windowStart, windowStart + MAX_VISIBLE);
+  const hasAbove = windowStart > 0;
+  const hasBelow = windowStart + MAX_VISIBLE < suggestions.length;
+
+  return (
+    <box flexDirection="column" flexShrink={0}>
+      {/* Autocomplete dropdown (above input) */}
+      {showDropdown && (
+        <box flexDirection="column" paddingX={1}>
+          {hasAbove && (
+            <box><text fg={t.textDim}>{`  ▲ ${windowStart} more`}</text></box>
+          )}
+          {visibleSuggestions.map((s, i) => {
+            const realIdx = windowStart + i;
+            const isSelected = realIdx === selectedIdx;
+            const color = s.type === "command" ? t.warning
+              : s.type === "mention" ? t.info
+              : s.type === "file" ? t.success
+              : t.textMuted;
+            return (
+              <box key={s.text} flexDirection="row">
+                <text fg={isSelected ? t.primary : color} attributes={isSelected ? TextAttributes.BOLD : undefined}>
+                  {isSelected ? " ❯ " : "   "}
+                </text>
+                <text fg={isSelected ? t.text : color}>{s.text}</text>
+                {s.description ? (
+                  <text fg={t.textDim}>{`  ${s.description}`}</text>
+                ) : null}
+              </box>
+            );
+          })}
+          {hasBelow && (
+            <box><text fg={t.textDim}>{`  ▼ ${suggestions.length - windowStart - MAX_VISIBLE} more`}</text></box>
+          )}
+        </box>
+      )}
+
+      {/* Pending images indicator */}
+      {pendingImages.length > 0 && (
+        <box height={1} paddingX={1}>
+          <text fg={t.primary}>
+            {`  🖼 ${pendingImages.length} image${pendingImages.length > 1 ? "s" : ""} attached`}
+          </text>
+        </box>
+      )}
+
+      {/* Input box */}
+      <box
+        height={3}
+        borderStyle="single"
+        borderColor={t.borderFocused}
+        flexDirection="row"
+        alignItems="center"
+        paddingX={1}
+      >
+        <text
+          fg={isSlashCommand ? t.warning : t.primary}
+          attributes={TextAttributes.BOLD}
+        >
+          {isSlashCommand ? " / " : " > "}
+        </text>
+
+        {value ? (
+          <>
+            <text fg={t.text}>{value}</text>
+            {ghost ? (
+              <text fg={t.textDim}>{ghost}</text>
+            ) : (
+              <text fg={t.primary}>{"▊"}</text>
+            )}
+          </>
+        ) : (
+          <text fg={t.textDim}>
+            {props.placeholder || "Type a message... (^V paste, / commands, @ context, Tab accept)"}
+          </text>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/components/loading-spinner.tsx

@@ -0,0 +1,28 @@
+/**
+ * LoadingSpinner — animated thinking/tool indicator
+ */
+
+import { useState, useEffect } from "react";
+import { useTheme } from "../context/theme";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function LoadingSpinner(props: { label?: string }) {
+  const { theme } = useTheme();
+  const t = theme;
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % FRAMES.length);
+    }, 80);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <box paddingX={1} height={1} flexDirection="row">
+      <text fg={t.primary}>{FRAMES[frame]}</text>
+      <text fg={t.textMuted}>{` ${props.label || "Thinking..."}`}</text>
+    </box>
+  );
+}