@cdoing/opentuicli 0.1.2

package/src/components/dialog-command.tsx

@@ -0,0 +1,204 @@
+/**
+ * DialogCommand — command palette dialog (Ctrl+X)
+ *
+ * A centered modal with all available commands grouped by category,
+ * fuzzy search/filtering, keyboard shortcuts, and vim-style navigation.
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState, useMemo, type ReactNode } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "../context/theme";
+
+// ── Command Definition ───────────────────────────────────
+
+export interface Command {
+  id: string;
+  label: string;
+  shortcut?: string;
+  category: string;
+}
+
+const COMMANDS: Command[] = [
+  // Session
+  { id: "session:new", label: "New Session", shortcut: "Ctrl+N", category: "Session" },
+  { id: "session:browse", label: "Browse Sessions", shortcut: "Ctrl+S", category: "Session" },
+  { id: "session:clear", label: "Clear History", shortcut: "", category: "Session" },
+
+  // Model & Provider
+  { id: "model:switch", label: "Switch Model", shortcut: "Ctrl+P", category: "Model" },
+
+  // Theme & Appearance
+  { id: "theme:picker", label: "Browse Themes", shortcut: "Ctrl+T", category: "Appearance" },
+  { id: "theme:dark", label: "Dark Mode", shortcut: "", category: "Appearance" },
+  { id: "theme:light", label: "Light Mode", shortcut: "", category: "Appearance" },
+  { id: "display:sidebar", label: "Toggle Sidebar", shortcut: "Ctrl+B", category: "Appearance" },
+
+  // System
+  { id: "system:status", label: "System Status", shortcut: "", category: "System" },
+  { id: "system:help", label: "Help", shortcut: "F1", category: "System" },
+  { id: "system:doctor", label: "Doctor", shortcut: "", category: "System" },
+  { id: "system:setup", label: "Setup Wizard", shortcut: "", category: "System" },
+  { id: "system:exit", label: "Exit", shortcut: "Ctrl+C", category: "System" },
+];
+
+// ── 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 } = useTheme();
+  const t = theme;
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(0);
+
+  // Filter commands by fuzzy search across label and category
+  const filtered = useMemo(() => {
+    return COMMANDS.filter(
+      (cmd) => fuzzyMatch(query, cmd.label) || fuzzyMatch(query, cmd.category)
+    );
+  }, [query]);
+
+  // Group filtered commands by category, preserving order
+  const groups = useMemo(() => {
+    const map = new Map<string, Command[]>();
+    for (const cmd of filtered) {
+      const list = map.get(cmd.category);
+      if (list) {
+        list.push(cmd);
+      } else {
+        map.set(cmd.category, [cmd]);
+      }
+    }
+    return map;
+  }, [filtered]);
+
+  // Flat list for index-based navigation
+  const flatList = filtered;
+
+  // Clamp selected when list shrinks
+  const clampedSelected = Math.min(selected, Math.max(0, flatList.length - 1));
+
+  useKeyboard((key: any) => {
+    if (key.name === "escape") {
+      props.onClose();
+      return;
+    }
+
+    if (key.name === "return") {
+      const cmd = flatList[clampedSelected];
+      if (cmd) props.onSelect(cmd.id);
+      return;
+    }
+
+    if (key.name === "up" || (key.name === "k" && !query)) {
+      setSelected((s) => Math.max(0, s - 1));
+      return;
+    }
+
+    if (key.name === "down" || (key.name === "j" && !query)) {
+      setSelected((s) => Math.min(flatList.length - 1, s + 1));
+      return;
+    }
+
+    // Backspace
+    if (key.name === "backspace") {
+      setQuery((q) => q.slice(0, -1));
+      setSelected(0);
+      return;
+    }
+
+    // Printable character — append to query
+    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+      setQuery((q) => q + key.sequence);
+      setSelected(0);
+    }
+  });
+
+  // Build rows: category headers + command items
+  let flatIndex = 0;
+  const rows: ReactNode[] = [];
+
+  for (const [category, cmds] of groups) {
+    // Category header
+    rows.push(
+      <text key={`cat-${category}`} fg={t.secondary} attributes={TextAttributes.BOLD}>
+        {`  ${category}`}
+      </text>
+    );
+
+    for (const cmd of cmds) {
+      const isSel = flatIndex === clampedSelected;
+      const shortcutText = cmd.shortcut ? `  ${cmd.shortcut}` : "";
+      rows.push(
+        <box key={cmd.id} flexDirection="row">
+          <text
+            fg={isSel ? t.primary : t.text}
+            attributes={isSel ? TextAttributes.BOLD : undefined}
+          >
+            {`    ${isSel ? ">" : " "} ${cmd.label}`}
+          </text>
+          <text fg={t.textDim}>{shortcutText}</text>
+        </box>
+      );
+      flatIndex++;
+    }
+
+    // Spacer between groups
+    rows.push(
+      <text key={`spacer-${category}`} fg={t.textDim}>{""}</text>
+    );
+  }
+
+  return (
+    <box
+      borderStyle="double"
+      borderColor={t.primary}
+      paddingX={1}
+      paddingY={1}
+      flexDirection="column"
+      position="absolute"
+      top="15%"
+      left="15%"
+      width="70%"
+    >
+      {/* Title */}
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"  Command Palette"}
+      </text>
+      <text fg={t.textDim}>{""}</text>
+
+      {/* Search input */}
+      <box flexDirection="row">
+        <text fg={t.textMuted}>{"  > "}</text>
+        <text fg={t.text}>{query || ""}</text>
+        <text fg={t.primary} attributes={TextAttributes.BOLD}>{"_"}</text>
+      </box>
+      <text fg={t.textDim}>{""}</text>
+
+      {/* Command list */}
+      {flatList.length > 0 ? (
+        rows
+      ) : (
+        <text fg={t.textDim}>{"  No matching commands"}</text>
+      )}
+
+      {/* Footer */}
+      <text fg={t.textDim}>{"  ↑↓/jk Navigate  Enter Select  Esc Close"}</text>
+    </box>
+  );
+}

package/src/components/dialog-help.tsx

@@ -0,0 +1,227 @@
+/**
+ * DialogHelp — help dialog showing keyboard shortcuts, slash commands, and @mentions
+ *
+ * Opens as a centered scrollable modal. Navigate with Up/Down/PgUp/PgDn,
+ * close with Esc or q.
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "../context/theme";
+
+// ── Content Sections ────────────────────────────────────
+
+interface HelpEntry {
+  key: string;
+  description: string;
+}
+
+const KEYBOARD_SHORTCUTS: HelpEntry[] = [
+  { key: "Ctrl+N", description: "New session" },
+  { key: "Ctrl+P", description: "Switch model" },
+  { key: "Ctrl+S", description: "Browse sessions" },
+  { key: "Ctrl+X", description: "Command palette" },
+  { 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: "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" },
+];
+
+// ── Build Lines ─────────────────────────────────────────
+
+interface HelpLine {
+  type: "header" | "entry" | "blank";
+  text?: string;
+  key?: string;
+  description?: string;
+}
+
+function buildLines(): HelpLine[] {
+  const lines: HelpLine[] = [];
+
+  lines.push({ type: "header", text: "Keyboard Shortcuts" });
+  lines.push({ type: "blank" });
+  for (const entry of KEYBOARD_SHORTCUTS) {
+    lines.push({ type: "entry", key: entry.key, description: entry.description });
+  }
+
+  lines.push({ type: "blank" });
+  lines.push({ type: "header", text: "Slash Commands" });
+  lines.push({ type: "blank" });
+  for (const entry of SLASH_COMMANDS) {
+    lines.push({ type: "entry", key: entry.key, description: entry.description });
+  }
+
+  lines.push({ type: "blank" });
+  lines.push({ type: "header", text: "@Mentions" });
+  lines.push({ type: "blank" });
+  for (const entry of AT_MENTIONS) {
+    lines.push({ type: "entry", key: entry.key, description: entry.description });
+  }
+
+  return lines;
+}
+
+const ALL_LINES = buildLines();
+const PAGE_SIZE = 15;
+
+// ── Component ───────────────────────────────────────────
+
+export function DialogHelp(props: {
+  onClose: () => void;
+}) {
+  const { theme } = useTheme();
+  const t = theme;
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const maxOffset = Math.max(0, ALL_LINES.length - PAGE_SIZE);
+
+  useKeyboard((key: any) => {
+    if (key.name === "escape" || key.name === "q") {
+      props.onClose();
+      return;
+    }
+
+    if (key.name === "up" || key.name === "k") {
+      setScrollOffset((s) => Math.max(0, s - 1));
+      return;
+    }
+
+    if (key.name === "down" || key.name === "j") {
+      setScrollOffset((s) => Math.min(maxOffset, s + 1));
+      return;
+    }
+
+    if (key.name === "pageup") {
+      setScrollOffset((s) => Math.max(0, s - PAGE_SIZE));
+      return;
+    }
+
+    if (key.name === "pagedown") {
+      setScrollOffset((s) => Math.min(maxOffset, s + PAGE_SIZE));
+      return;
+    }
+
+    // Home / End
+    if (key.name === "home") {
+      setScrollOffset(0);
+      return;
+    }
+    if (key.name === "end") {
+      setScrollOffset(maxOffset);
+      return;
+    }
+  });
+
+  const visibleLines = ALL_LINES.slice(scrollOffset, scrollOffset + PAGE_SIZE);
+  const keyColWidth = 20;
+
+  return (
+    <box
+      borderStyle="double"
+      borderColor={t.primary}
+      paddingX={2}
+      paddingY={1}
+      flexDirection="column"
+      position="absolute"
+      top="10%"
+      left="15%"
+      width="70%"
+      height="80%"
+    >
+      {/* Title */}
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"  Help"}
+      </text>
+      <text fg={t.textDim}>{""}</text>
+
+      {/* Scrollable content */}
+      {visibleLines.map((line, i) => {
+        if (line.type === "blank") {
+          return <text key={`line-${scrollOffset + i}`} fg={t.textDim}>{""}</text>;
+        }
+
+        if (line.type === "header") {
+          return (
+            <text
+              key={`line-${scrollOffset + i}`}
+              fg={t.primary}
+              attributes={TextAttributes.BOLD}
+            >
+              {`  ${line.text}`}
+            </text>
+          );
+        }
+
+        // entry
+        const paddedKey = (line.key || "").padEnd(keyColWidth);
+        return (
+          <box key={`line-${scrollOffset + i}`} flexDirection="row">
+            <text fg={t.secondary}>{`    ${paddedKey}`}</text>
+            <text fg={t.textMuted}>{line.description || ""}</text>
+          </box>
+        );
+      })}
+
+      {/* Scroll indicator */}
+      <text fg={t.textDim}>{""}</text>
+      <text fg={t.textDim}>
+        {`  ${scrollOffset > 0 ? "..." : "   "} ${scrollOffset + 1}-${Math.min(scrollOffset + PAGE_SIZE, ALL_LINES.length)} of ${ALL_LINES.length} ${scrollOffset < maxOffset ? "..." : "   "}`}
+      </text>
+
+      {/* Footer */}
+      <text fg={t.textDim}>{"  Up/Down/j/k Scroll  PgUp/PgDn Page  Esc/q Close"}</text>
+    </box>
+  );
+}

package/src/components/dialog-model.tsx

@@ -0,0 +1,93 @@
+/**
+ * DialogModel — model picker dialog (Ctrl+P)
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "../context/theme";
+
+export interface ModelOption {
+  id: string;
+  name: string;
+  hint?: string;
+}
+
+const MODELS: Record<string, ModelOption[]> = {
+  anthropic: [
+    { id: "claude-sonnet-4-6", name: "Claude Sonnet 4.6", hint: "fast & smart" },
+    { id: "claude-opus-4-6", name: "Claude Opus 4.6", hint: "most capable" },
+    { id: "claude-haiku-4-5", name: "Claude Haiku 4.5", hint: "fastest" },
+  ],
+  openai: [
+    { id: "gpt-4o", name: "GPT-4o", hint: "recommended" },
+    { id: "gpt-4o-mini", name: "GPT-4o mini", hint: "fastest" },
+    { id: "o3", name: "o3", hint: "reasoning" },
+  ],
+  google: [
+    { id: "gemini-2.0-flash", name: "Gemini 2.0 Flash", hint: "fast" },
+    { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", hint: "most capable" },
+  ],
+};
+
+export function DialogModel(props: {
+  provider: string;
+  currentModel: string;
+  onSelect: (model: string) => void;
+  onClose: () => void;
+}) {
+  const { theme } = useTheme();
+  const t = theme;
+  const models = MODELS[props.provider] || [];
+  const [selected, setSelected] = useState(
+    Math.max(0, models.findIndex((m) => m.id === props.currentModel))
+  );
+
+  useKeyboard((key: any) => {
+    if (key.name === "escape" || (key.ctrl && key.name === "c")) {
+      props.onClose();
+    } else if (key.name === "up" || key.name === "k") {
+      setSelected((s) => Math.max(0, s - 1));
+    } else if (key.name === "down" || key.name === "j") {
+      setSelected((s) => Math.min(models.length - 1, s + 1));
+    } else if (key.name === "return") {
+      const m = models[selected];
+      if (m) props.onSelect(m.id);
+    }
+  });
+
+  return (
+    <box
+      borderStyle="double"
+      borderColor={t.primary}
+      paddingX={1}
+      paddingY={1}
+      flexDirection="column"
+      position="absolute"
+      top="30%"
+      left="20%"
+      width="60%"
+    >
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"  Select Model"}
+      </text>
+      <text fg={t.textDim}>{`  Provider: ${props.provider}`}</text>
+      <text fg={t.textDim}>{""}</text>
+      {models.map((model, i) => (
+        <box key={model.id}>
+          <text
+            fg={i === selected ? t.primary : t.text}
+            attributes={i === selected ? TextAttributes.BOLD : undefined}
+          >
+            {`  ${i === selected ? "❯" : " "} ${model.name}`}
+          </text>
+          <text fg={t.textDim}>{model.hint ? `  ${model.hint}` : ""}</text>
+          <text fg={model.id === props.currentModel ? t.success : t.textDim}>
+            {model.id === props.currentModel ? " ●" : ""}
+          </text>
+        </box>
+      ))}
+      <text fg={t.textDim}>{"\n  ↑↓ Navigate  Enter Select  Esc Close"}</text>
+    </box>
+  );
+}

package/src/components/dialog-status.tsx

@@ -0,0 +1,122 @@
+/**
+ * DialogStatus — system status dialog showing provider, tools, config info.
+ * Scrollable overlay with sections for Provider, System, and Tools.
+ */
+
+import { TextAttributes } from "@opentui/core";
+import { useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useTheme } from "../context/theme";
+import { useSDK } from "../context/sdk";
+
+export function DialogStatus(props: { onClose: () => void }) {
+  const { theme } = useTheme();
+  const t = theme;
+  const sdk = useSDK();
+  const dims = useTerminalDimensions();
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // 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"
+      )
+    : [];
+
+  const sections: Array<{ title: string; rows: Array<[string, string]> }> = [
+    {
+      title: "Provider",
+      rows: [
+        ["Provider", sdk.provider],
+        ["Model", sdk.model],
+        ["Directory", sdk.workingDir],
+      ],
+    },
+    {
+      title: "System",
+      rows: [
+        ["Node", process.version],
+        ["Platform", `${process.platform} ${process.arch}`],
+        [
+          "Terminal",
+          process.env.TERM_PROGRAM || process.env.TERM || "unknown",
+        ],
+        ["Shell", process.env.SHELL || "unknown"],
+      ],
+    },
+    {
+      title: `Tools (${toolNames.length})`,
+      rows: toolNames.slice(0, 20).map((name: string) => ["\u2022", name]),
+    },
+  ];
+
+  // Build flat lines for scrolling
+  const lines: Array<{
+    type: "header" | "row";
+    text: string;
+    value?: string;
+  }> = [];
+  for (const section of sections) {
+    lines.push({ type: "header", text: section.title });
+    for (const [label, value] of section.rows) {
+      lines.push({ type: "row", text: label, value });
+    }
+    lines.push({ type: "row", text: "", value: "" }); // spacer
+  }
+
+  const maxVisible = Math.max(5, (dims.height || 24) - 10);
+
+  useKeyboard((key: any) => {
+    if (key.name === "escape" || key.name === "q") props.onClose();
+    if (key.name === "up" || key.name === "k")
+      setScrollOffset((s) => Math.max(0, s - 1));
+    if (key.name === "down" || key.name === "j")
+      setScrollOffset((s) => Math.min(lines.length - maxVisible, s + 1));
+  });
+
+  const visible = lines.slice(scrollOffset, scrollOffset + maxVisible);
+
+  return (
+    <box
+      borderStyle="double"
+      borderColor={t.primary}
+      paddingX={1}
+      paddingY={1}
+      flexDirection="column"
+      position="absolute"
+      top="10%"
+      left="15%"
+      width="70%"
+    >
+      <text fg={t.primary} attributes={TextAttributes.BOLD}>
+        {"  System Status"}
+      </text>
+      <text>{""}</text>
+      {visible.map((line, i) => {
+        if (line.type === "header") {
+          return (
+            <text
+              key={`h-${i}`}
+              fg={t.secondary}
+              attributes={TextAttributes.BOLD}
+            >
+              {`  ${line.text}`}
+            </text>
+          );
+        }
+        if (!line.text && !line.value) return <text key={`s-${i}`}>{""}</text>;
+        return (
+          <box key={`r-${i}`} flexDirection="row">
+            <text fg={t.textMuted}>{`    ${line.text}`}</text>
+            {line.value && <text fg={t.text}>{` ${line.value}`}</text>}
+          </box>
+        );
+      })}
+      <text>{""}</text>
+      <text fg={t.textDim}>
+        {"  \u2191\u2193 Scroll  Esc Close"}
+      </text>
+    </box>
+  );
+}