@cdoing/opentuicli 0.1.21 → 0.1.26

package/src/components/dialog-command.tsx

@@ -1,207 +0,0 @@
-/**
- * DialogCommand — command palette (Ctrl+P)
- *
- * Full command palette with categories, fuzzy search, shortcuts,
- * and keyboard navigation. Inspired by OpenCode's command palette.
- */
-
-import { TextAttributes } from "@opentui/core";
-import type { SelectOption } from "@opentui/core";
-import { useState, useMemo } from "react";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme } from "../context/theme";
-
-// ── Command Definition ───────────────────────────────────
-
-export interface Command {
-  id: string;
-  label: string;
-  shortcut?: string;
-  category: string;
-  icon?: string;
-}
-
-const COMMANDS: Command[] = [
-  // Session
-  { id: "session:new", label: "New Session", shortcut: "Ctrl+N", category: "Session", icon: "+" },
-  { id: "session:browse", label: "Browse Sessions", shortcut: "Ctrl+S", category: "Session", icon: "◦" },
-  { id: "session:clear", label: "Clear History", shortcut: "", category: "Session", icon: "✕" },
-
-  // Model & Provider
-  { id: "model:switch", label: "Switch Model", shortcut: "Ctrl+O", category: "Model", icon: "◆" },
-  { id: "model:provider", label: "Switch Provider", shortcut: "", category: "Model", icon: "◆" },
-
-  // Theme & Appearance
-  { id: "theme:picker", label: "Browse Themes", shortcut: "Ctrl+T", category: "Appearance", icon: "◈" },
-  { id: "theme:dark", label: "Dark Mode", shortcut: "", category: "Appearance", icon: "●" },
-  { id: "theme:light", label: "Light Mode", shortcut: "", category: "Appearance", icon: "○" },
-  { id: "display:sidebar", label: "Toggle Sidebar", shortcut: "Ctrl+B", category: "Appearance", icon: "▐" },
-
-  // Tools
-  { id: "tool:shell", label: "Run Shell Command", shortcut: "", category: "Tools", icon: "$" },
-  { id: "tool:search", label: "Search Codebase", shortcut: "", category: "Tools", icon: "?" },
-  { id: "tool:tree", label: "File Tree", shortcut: "", category: "Tools", icon: "├" },
-
-  // System
-  { id: "system:status", label: "System Status", shortcut: "", category: "System", icon: "i" },
-  { id: "system:help", label: "Help", shortcut: "F1", category: "System", icon: "?" },
-  { id: "system:doctor", label: "Doctor (Diagnostics)", shortcut: "", category: "System", icon: "+" },
-  { id: "system:setup", label: "Setup Wizard (Connect Provider)", shortcut: "", category: "System", icon: "⚙" },
-  { id: "system:exit", label: "Exit", shortcut: "Ctrl+C", category: "System", icon: "⏻" },
-];
-
-// ── Fuzzy Match ──────────────────────────────────────────
-
-function fuzzyMatch(query: string, text: string): boolean {
-  if (!query) return true;
-  const lower = text.toLowerCase();
-  const q = query.toLowerCase();
-  let qi = 0;
-  for (let i = 0; i < lower.length && qi < q.length; i++) {
-    if (lower[i] === q[qi]) qi++;
-  }
-  return qi === q.length;
-}
-
-// ── Component ────────────────────────────────────────────
-
-export function DialogCommand(props: {
-  onSelect: (commandId: string) => void;
-  onClose: () => void;
-}) {
-  const { theme, customBg } = useTheme();
-  const t = theme;
-  const dims = useTerminalDimensions();
-  const [query, setQuery] = useState("");
-
-  const dialogWidth = Math.min(64, (dims.width || 80) - 4);
-  const maxVisible = Math.max(8, Math.floor((dims.height || 24) * 0.6));
-
-  // Filter commands by fuzzy search across label, category, and id
-  const filtered = useMemo(() => {
-    return COMMANDS.filter(
-      (cmd) =>
-        fuzzyMatch(query, cmd.label) ||
-        fuzzyMatch(query, cmd.category) ||
-        fuzzyMatch(query, cmd.id)
-    );
-  }, [query]);
-
-  // Group by category for display (with separators)
-  const selectOptions: SelectOption[] = useMemo(() => {
-    const opts: SelectOption[] = [];
-    let lastCategory = "";
-    for (const cmd of filtered) {
-      if (cmd.category !== lastCategory) {
-        lastCategory = cmd.category;
-      }
-      const shortcutStr = cmd.shortcut || "";
-      opts.push({
-        name: `${cmd.icon || " "} ${cmd.label}`,
-        description: [cmd.category, shortcutStr].filter(Boolean).join("  "),
-        value: cmd.id,
-      });
-    }
-    return opts;
-  }, [filtered]);
-
-  useKeyboard((key: any) => {
-    if (key.name === "escape" || (key.ctrl && key.name === "p")) {
-      props.onClose();
-      return;
-    }
-
-    // Let <select> handle up/down/return
-    if (key.name === "up" || key.name === "down" || key.name === "return") return;
-
-    // Backspace — search
-    if (key.name === "backspace") {
-      setQuery((q) => q.slice(0, -1));
-      return;
-    }
-
-    // Ctrl+U — clear search
-    if (key.ctrl && key.name === "u") {
-      setQuery("");
-      return;
-    }
-
-    // Printable character — append to query
-    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-      setQuery((q) => q + key.sequence);
-    }
-  });
-
-  return (
-    <box
-      borderStyle="double"
-      borderColor={t.primary}
-      backgroundColor={customBg || t.bg}
-      paddingX={1}
-      paddingY={0}
-      flexDirection="column"
-      position="absolute"
-      top={Math.max(1, Math.floor((dims.height || 24) * 0.1))}
-      left={Math.max(1, Math.floor(((dims.width || 80) - dialogWidth) / 2))}
-      width={dialogWidth}
-    >
-      {/* Title bar */}
-      <box flexDirection="row" flexShrink={0} height={1}>
-        <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
-          {" Commands"}
-        </text>
-        <text fg={t.textDim}>{"Ctrl+P "}</text>
-      </box>
-
-      {/* Search input */}
-      <box height={1} flexShrink={0}>
-        <text fg={t.border}>{"─".repeat(dialogWidth - 4)}</text>
-      </box>
-      <box flexDirection="row" flexShrink={0} height={1}>
-        <text fg={t.textMuted}>{" > "}</text>
-        <text fg={t.text}>{query || ""}</text>
-        <text fg={t.primary} attributes={TextAttributes.BOLD}>{"█"}</text>
-      </box>
-      <box height={1} flexShrink={0}>
-        <text fg={t.border}>{"─".repeat(dialogWidth - 4)}</text>
-      </box>
-
-      {/* Command list */}
-      {selectOptions.length > 0 ? (
-        <select
-          options={selectOptions}
-          focused={true}
-          height={Math.min(maxVisible, selectOptions.length)}
-          showDescription={true}
-          backgroundColor={customBg || undefined}
-          focusedBackgroundColor={customBg || undefined}
-          textColor={t.text}
-          focusedTextColor={t.text}
-          selectedBackgroundColor={t.primary}
-          selectedTextColor={t.bg}
-          descriptionColor={t.textDim}
-          selectedDescriptionColor={t.bg}
-          showScrollIndicator={selectOptions.length > maxVisible}
-          onSelect={(_index: number, option: SelectOption | null) => {
-            if (option?.value) props.onSelect(option.value);
-          }}
-        />
-      ) : (
-        <box height={1}>
-          <text fg={t.textDim}>{"  No matching commands"}</text>
-        </box>
-      )}
-
-      {/* Footer */}
-      <box height={1} flexShrink={0}>
-        <text fg={t.border}>{"─".repeat(dialogWidth - 4)}</text>
-      </box>
-      <box flexDirection="row" height={1} flexShrink={0}>
-        <text fg={t.textDim}>{" ↑↓ navigate  "}</text>
-        <text fg={t.textDim}>{"enter select  "}</text>
-        <text fg={t.textDim}>{"type to filter  "}</text>
-        <text fg={t.textDim}>{"esc close"}</text>
-      </box>
-    </box>
-  );
-}

package/src/components/dialog-help.tsx

@@ -1,151 +0,0 @@
-/**
- * DialogHelp — help dialog showing keyboard shortcuts, slash commands, and @mentions
- *
- * Uses native <scrollbox> for smooth scrolling. Close with Esc or q.
- */
-
-import { TextAttributes } from "@opentui/core";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme } from "../context/theme";
-
-// ── Content Sections ────────────────────────────────────
-
-interface HelpEntry {
-  key: string;
-  description: string;
-}
-
-const KEYBOARD_SHORTCUTS: HelpEntry[] = [
-  { key: "Ctrl+P", description: "Command palette" },
-  { key: "Ctrl+O", description: "Switch model" },
-  { key: "Ctrl+N", description: "New session" },
-  { key: "Ctrl+S", description: "Browse sessions" },
-  { key: "F1", description: "Show this help" },
-  { key: "Ctrl+V", description: "Paste text or image" },
-  { key: "Ctrl+U", description: "Clear input line" },
-  { key: "Ctrl+W", description: "Delete last word" },
-  { key: "Tab", description: "Switch mode (Build / Plan)" },
-  { key: "→ (Right)", description: "Accept autocomplete" },
-  { key: "Up / Down", description: "Navigate suggestions" },
-  { key: "Escape", description: "Close dialog / dropdown" },
-  { key: "Ctrl+C", description: "Quit" },
-];
-
-const SLASH_COMMANDS: HelpEntry[] = [
-  { key: "/help", description: "Show help" },
-  { key: "/clear", description: "Clear chat history" },
-  { key: "/new", description: "Start new conversation" },
-  { key: "/compact", description: "Compress context window" },
-  { key: "/btw <question>", description: "Ask without adding to history" },
-  { key: "/model [name]", description: "Show/change model" },
-  { key: "/provider [name]", description: "Show/change provider" },
-  { key: "/mode", description: "Show permission mode" },
-  { key: "/dir [path]", description: "Show/change working directory" },
-  { key: "/config", description: "Show configuration" },
-  { key: "/config set k v", description: "Set a config value" },
-  { key: "/theme <mode>", description: "Switch theme (dark/light/auto)" },
-  { key: "/effort <level>", description: "Set effort level" },
-  { key: "/plan <on|off>", description: "Toggle plan mode" },
-  { key: "/history", description: "List saved conversations" },
-  { key: "/resume <id>", description: "Resume conversation" },
-  { key: "/view <id>", description: "View conversation messages" },
-  { key: "/fork [id]", description: "Fork conversation" },
-  { key: "/delete <id>", description: "Delete conversation" },
-  { key: "/bg <prompt>", description: "Run prompt in background" },
-  { key: "/jobs [id]", description: "List/inspect background jobs" },
-  { key: "/permissions", description: "Show permission rules" },
-  { key: "/hooks", description: "Show configured hooks" },
-  { key: "/rules", description: "Show project rules" },
-  { key: "/context", description: "Show context providers" },
-  { key: "/mcp", description: "MCP server management" },
-  { key: "/doctor", description: "System health check" },
-  { key: "/usage", description: "Show token usage" },
-  { key: "/auth-status", description: "Show authentication status" },
-  { key: "/setup", description: "Run setup wizard" },
-  { key: "/login", description: "Open setup wizard" },
-  { key: "/logout", description: "Clear OAuth tokens" },
-  { key: "/init", description: "Initialize project config" },
-  { key: "/exit", description: "Quit" },
-];
-
-const AT_MENTIONS: HelpEntry[] = [
-  { key: "@terminal", description: "Recent terminal output" },
-  { key: "@url", description: "Fetch URL content" },
-  { key: "@tree", description: "Directory tree" },
-  { key: "@codebase", description: "Search codebase" },
-  { key: "@clip", description: "Clipboard contents" },
-  { key: "@file", description: "Include file" },
-];
-
-const keyColWidth = 20;
-
-function Section(props: { title: string; entries: HelpEntry[]; theme: any }) {
-  const t = props.theme;
-  return (
-    <box flexDirection="column" flexShrink={0}>
-      <text fg={t.primary} attributes={TextAttributes.BOLD}>
-        {`  ${props.title}`}
-      </text>
-      <text>{""}</text>
-      {props.entries.map((entry) => (
-        <box key={entry.key} flexDirection="row">
-          <text fg={t.secondary}>{`    ${entry.key.padEnd(keyColWidth)}`}</text>
-          <text fg={t.textMuted}>{entry.description}</text>
-        </box>
-      ))}
-      <text>{""}</text>
-    </box>
-  );
-}
-
-// ── Component ───────────────────────────────────────────
-
-export function DialogHelp(props: {
-  onClose: () => void;
-}) {
-  const { theme, customBg } = useTheme();
-  const t = theme;
-  const dims = useTerminalDimensions();
-  const dialogWidth = Math.min(70, (dims.width || 80) - 4);
-  const dialogHeight = Math.max(10, (dims.height || 24) - 6);
-
-  useKeyboard((key: any) => {
-    if (key.name === "escape" || key.name === "q") {
-      props.onClose();
-    }
-  });
-
-  return (
-    <box
-      borderStyle="double"
-      borderColor={t.primary}
-      backgroundColor={customBg || t.bg}
-      paddingX={2}
-      paddingY={1}
-      flexDirection="column"
-      position="absolute"
-      top={Math.max(1, Math.floor((dims.height || 24) * 0.05))}
-      left={Math.max(1, Math.floor(((dims.width || 80) - dialogWidth) / 2))}
-      width={dialogWidth}
-      height={dialogHeight}
-    >
-      {/* Title bar */}
-      <box flexDirection="row" flexShrink={0}>
-        <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
-          {"  Help"}
-        </text>
-        <text fg={t.textDim}>{"esc"}</text>
-      </box>
-      <text flexShrink={0}>{""}</text>
-
-      {/* Scrollable content */}
-      <scrollbox flexGrow={1}>
-        <box flexShrink={0}>
-          <Section title="Keyboard Shortcuts" entries={KEYBOARD_SHORTCUTS} theme={t} />
-          <Section title="Slash Commands" entries={SLASH_COMMANDS} theme={t} />
-          <Section title="@Mentions" entries={AT_MENTIONS} theme={t} />
-        </box>
-      </scrollbox>
-    </box>
-  );
-}

package/src/components/dialog-model.tsx

@@ -1,142 +0,0 @@
-/**
- * DialogModel — model picker dialog (Ctrl+O)
- *
- * Uses OpenTUI <select> for the model list with proper
- * highlight styling and keyboard navigation.
- */
-
-import { TextAttributes } from "@opentui/core";
-import type { SelectOption } from "@opentui/core";
-import { useState, useMemo } from "react";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme } from "../context/theme";
-import { getProviders } from "@cdoing/ai";
-
-export interface ModelOption {
-  id: string;
-  name: string;
-  hint?: string;
-}
-
-// Build model map from centralized catalog
-const MODELS: Record<string, ModelOption[]> = {};
-for (const p of getProviders() as Array<{ id: string; models: Array<{ id: string; label: string; hint?: string }> }>) {
-  MODELS[p.id] = p.models.map((m) => ({ id: m.id, name: m.label, hint: m.hint }));
-}
-
-export function DialogModel(props: {
-  provider: string;
-  currentModel: string;
-  onSelect: (model: string) => void;
-  onClose: () => void;
-}) {
-  const { theme, customBg } = useTheme();
-  const t = theme;
-  const dims = useTerminalDimensions();
-  const models = MODELS[props.provider] || [];
-  const [isCustom, setIsCustom] = useState(false);
-  const [customInput, setCustomInput] = useState("");
-
-  // Build SelectOption list: models + "Custom model..." at the end
-  const selectOptions: SelectOption[] = useMemo(() => {
-    const opts: SelectOption[] = models.map((m) => ({
-      name: m.name,
-      description: [
-        m.hint || "",
-        m.id === props.currentModel ? "● current" : "",
-      ].filter(Boolean).join("  "),
-      value: m.id,
-    }));
-    opts.push({
-      name: "Custom model...",
-      description: "type any model name",
-      value: "__custom__",
-    });
-    return opts;
-  }, [models, props.currentModel]);
-
-  const initialIndex = Math.max(0, models.findIndex((m) => m.id === props.currentModel));
-
-  useKeyboard((key: any) => {
-    if (key.name === "escape" || (key.ctrl && key.name === "c")) {
-      if (isCustom) { setIsCustom(false); return; }
-      props.onClose();
-      return;
-    }
-    if (!isCustom) return; // Let <select> handle navigation
-    // Custom model text input mode
-    if (key.name === "return") {
-      const m = customInput.trim();
-      if (m) props.onSelect(m);
-    } else if (key.name === "backspace") {
-      setCustomInput((s) => s.slice(0, -1));
-    } else if (key.ctrl && key.name === "u") {
-      setCustomInput("");
-    } else if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-      setCustomInput((s) => s + key.sequence);
-    }
-  });
-
-  return (
-    <box
-      borderStyle="double"
-      borderColor={t.primary}
-      backgroundColor={customBg || t.bg}
-      paddingX={1}
-      paddingY={1}
-      flexDirection="column"
-      position="absolute"
-      top={Math.max(2, Math.floor((dims.height || 24) * 0.25))}
-      left={Math.max(1, Math.floor(((dims.width || 80) - Math.min(60, (dims.width || 80) - 4)) / 2))}
-      width={Math.min(60, (dims.width || 80) - 4)}
-    >
-      <text fg={t.primary} attributes={TextAttributes.BOLD}>
-        {"  Select Model"}
-      </text>
-      <text fg={t.textDim}>{`  Provider: ${props.provider}`}</text>
-      <text>{""}</text>
-      {isCustom ? (
-        <>
-          <text fg={t.text}>{"  Enter custom model ID:"}</text>
-          <box flexDirection="row">
-            <text fg={t.primary}>{"  > "}</text>
-            <text fg={t.text}>{customInput}</text>
-            <text fg={t.primary} attributes={TextAttributes.BOLD}>{"_"}</text>
-          </box>
-          <text>{""}</text>
-          <text fg={t.textDim}>{"  Enter Confirm  Ctrl+U Clear  Esc Back"}</text>
-        </>
-      ) : (
-        <>
-          <select
-            options={selectOptions}
-            focused={!isCustom}
-            selectedIndex={initialIndex}
-            height={Math.min(selectOptions.length, 10)}
-            showDescription={true}
-            backgroundColor={customBg || undefined}
-            focusedBackgroundColor={customBg || undefined}
-            textColor={t.text}
-            focusedTextColor={t.text}
-            selectedBackgroundColor={t.primary}
-            selectedTextColor={t.bg}
-            descriptionColor={t.textDim}
-            selectedDescriptionColor={t.bg}
-            showScrollIndicator={selectOptions.length > 10}
-            onSelect={(_index: number, option: SelectOption | null) => {
-              if (!option) return;
-              if (option.value === "__custom__") {
-                setIsCustom(true);
-                setCustomInput("");
-              } else {
-                props.onSelect(option.value);
-              }
-            }}
-          />
-          <text>{""}</text>
-          <text fg={t.textDim}>{"  ↑↓ Navigate  Enter Select  Esc Close"}</text>
-        </>
-      )}
-    </box>
-  );
-}

package/src/components/dialog-status.tsx

@@ -1,84 +0,0 @@
-/**
- * DialogStatus — system status dialog showing provider, tools, config info.
- * Uses native <scrollbox> for smooth scrolling through sections.
- */
-
-import { TextAttributes } from "@opentui/core";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme } from "../context/theme";
-import { useSDK } from "../context/sdk";
-
-export function DialogStatus(props: { onClose: () => void }) {
-  const { theme, customBg } = useTheme();
-  const t = theme;
-  const sdk = useSDK();
-  const dims = useTerminalDimensions();
-
-  const dialogWidth = Math.min(60, (dims.width || 80) - 4);
-  const dialogHeight = Math.max(10, (dims.height || 24) - 6);
-
-  // Gather status info
-  const allTools = sdk.registry.getAll ? sdk.registry.getAll() : [];
-  const toolNames = Array.isArray(allTools)
-    ? allTools.map((tool: any) =>
-        tool.definition?.name || tool.name || "unknown"
-      )
-    : [];
-
-  useKeyboard((key: any) => {
-    if (key.name === "escape" || key.name === "q") props.onClose();
-  });
-
-  return (
-    <box
-      borderStyle="double"
-      borderColor={t.primary}
-      backgroundColor={customBg || t.bg}
-      paddingX={1}
-      paddingY={1}
-      flexDirection="column"
-      position="absolute"
-      top={Math.max(1, Math.floor((dims.height || 24) * 0.1))}
-      left={Math.max(1, Math.floor(((dims.width || 80) - dialogWidth) / 2))}
-      width={dialogWidth}
-      height={dialogHeight}
-    >
-      {/* Title bar */}
-      <box flexDirection="row" flexShrink={0}>
-        <text fg={t.primary} attributes={TextAttributes.BOLD} flexGrow={1}>
-          {"  System Status"}
-        </text>
-        <text fg={t.textDim}>{"esc"}</text>
-      </box>
-      <text flexShrink={0}>{""}</text>
-
-      <scrollbox flexGrow={1}>
-        <box flexShrink={0}>
-          {/* Provider */}
-          <text fg={t.secondary} attributes={TextAttributes.BOLD}>{"  Provider"}</text>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Provider  "}</text><text fg={t.text}>{sdk.provider}</text></box>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Model     "}</text><text fg={t.text}>{sdk.model}</text></box>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Directory "}</text><text fg={t.text}>{sdk.workingDir}</text></box>
-          <text>{""}</text>
-
-          {/* System */}
-          <text fg={t.secondary} attributes={TextAttributes.BOLD}>{"  System"}</text>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Node      "}</text><text fg={t.text}>{process.version}</text></box>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Platform  "}</text><text fg={t.text}>{`${process.platform} ${process.arch}`}</text></box>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Terminal  "}</text><text fg={t.text}>{process.env.TERM_PROGRAM || process.env.TERM || "unknown"}</text></box>
-          <box flexDirection="row"><text fg={t.textMuted}>{"    Shell     "}</text><text fg={t.text}>{process.env.SHELL || "unknown"}</text></box>
-          <text>{""}</text>
-
-          {/* Tools */}
-          <text fg={t.secondary} attributes={TextAttributes.BOLD}>{`  Tools (${toolNames.length})`}</text>
-          {toolNames.map((name: string) => (
-            <box key={name} flexDirection="row">
-              <text fg={t.textMuted}>{"    • "}</text>
-              <text fg={t.text}>{name}</text>
-            </box>
-          ))}
-        </box>
-      </scrollbox>
-    </box>
-  );
-}