@cdoing/opentuicli 0.1.6 → 0.1.18

package/src/components/dialog-model.tsx

@@ -1,11 +1,16 @@
 /**
- * DialogModel — model picker dialog (Ctrl+P)
+ * 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 { useState } from "react";
-import { useKeyboard } from "@opentui/react";
+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;
@@ -13,22 +18,11 @@ export interface ModelOption {
   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" },
-  ],
-};
+// 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;
@@ -36,23 +30,50 @@ export function DialogModel(props: {
   onSelect: (model: string) => void;
   onClose: () => void;
 }) {
-  const { theme } = useTheme();
+  const { theme, customBg } = useTheme();
   const t = theme;
+  const dims = useTerminalDimensions();
   const models = MODELS[props.provider] || [];
-  const [selected, setSelected] = useState(
-    Math.max(0, models.findIndex((m) => m.id === props.currentModel))
-  );
+  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();
-    } 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;
+    }
+    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);
     }
   });
 
@@ -60,34 +81,62 @@ export function DialogModel(props: {
     <box
       borderStyle="double"
       borderColor={t.primary}
+      backgroundColor={customBg || t.bg}
       paddingX={1}
       paddingY={1}
       flexDirection="column"
       position="absolute"
-      top="30%"
-      left="20%"
-      width="60%"
+      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 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>
+      <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,20 +1,21 @@
 /**
  * DialogStatus — system status dialog showing provider, tools, config info.
- * Scrollable overlay with sections for Provider, System, and Tools.
+ * Uses native <scrollbox> for smooth scrolling through sections.
  */
 
 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 { theme, customBg } = useTheme();
   const t = theme;
   const sdk = useSDK();
   const dims = useTerminalDimensions();
-  const [scrollOffset, setScrollOffset] = useState(0);
+
+  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() : [];
@@ -24,99 +25,60 @@ export function DialogStatus(props: { onClose: () => void }) {
       )
     : [];
 
-  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}
+      backgroundColor={customBg || t.bg}
       paddingX={1}
       paddingY={1}
       flexDirection="column"
       position="absolute"
-      top="10%"
-      left="15%"
-      width="70%"
+      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}
     >
-      <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>
+      {/* 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>
   );
 }