@cdoing/opentuicli 0.1.21 → 0.1.26

package/src/components/dialog-theme.tsx

@@ -1,318 +0,0 @@
-/**
- * DialogTheme — theme picker dialog (Ctrl+T)
- *
- * Three sections navigable with Tab:
- *   1. Appearance — Dark / Light mode toggle
- *   2. Color Themes — search + browse built-in themes
- *   3. Custom Background — optional hex override (cleared when a theme is selected)
- */
-
-import { TextAttributes } from "@opentui/core";
-import type { SelectOption } from "@opentui/core";
-import { useState, useMemo } from "react";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme, THEMES, getThemeIds } from "../context/theme";
-
-type Section = "mode" | "themes" | "custombg";
-const SECTIONS: Section[] = ["mode", "themes", "custombg"];
-
-/** Preset background colors with names for autocomplete */
-const BG_PRESETS: Array<{ hex: string; name: string }> = [
-  { hex: "#000000", name: "Black" },
-  { hex: "#0a0a0a", name: "AMOLED Black" },
-  { hex: "#0d1117", name: "GitHub Dark" },
-  { hex: "#1a1b26", name: "Tokyo Night" },
-  { hex: "#1e1e2e", name: "Catppuccin" },
-  { hex: "#191724", name: "Rosé Pine" },
-  { hex: "#282828", name: "Gruvbox" },
-  { hex: "#282a36", name: "Dracula" },
-  { hex: "#263238", name: "Material" },
-  { hex: "#262335", name: "Synthwave" },
-  { hex: "#272822", name: "Monokai" },
-  { hex: "#2d353b", name: "Everforest" },
-  { hex: "#2e3440", name: "Nord" },
-  { hex: "#002b36", name: "Solarized Dark" },
-  { hex: "#193549", name: "Cobalt2" },
-  { hex: "#032424", name: "Dark Teal" },
-  { hex: "#1a1a2e", name: "Midnight Blue" },
-  { hex: "#0f0f23", name: "Deep Space" },
-  { hex: "#1b2838", name: "Steam" },
-  { hex: "#2b2b2b", name: "VS Code Dark" },
-  { hex: "#fdf6e3", name: "Solarized Light" },
-  { hex: "#ffffff", name: "White" },
-  { hex: "#f5f5f5", name: "Light Gray" },
-  { hex: "#eff1f5", name: "Catppuccin Latte" },
-];
-
-/** Convert BG_PRESETS to SelectOption format */
-const BG_SELECT_OPTIONS: SelectOption[] = BG_PRESETS.map((p) => ({
-  name: `${p.hex}  ${p.name}`,
-  description: "",
-  value: p.hex,
-}));
-
-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 [bgInput, setBgInput] = useState(customBg || "");
-  const [query, setQuery] = useState("");
-
-  // Mode select options
-  const modeOptions: SelectOption[] = useMemo(() => [
-    { name: "Dark Mode", description: mode === "dark" ? "active" : "", value: "dark" },
-    { name: "Light Mode", description: mode === "light" ? "active" : "", value: "light" },
-  ], [mode]);
-
-  // Filtered BG presets based on input
-  const filteredBgOptions: SelectOption[] = useMemo(() => {
-    if (!bgInput) return BG_SELECT_OPTIONS;
-    const q = bgInput.toLowerCase();
-    return BG_SELECT_OPTIONS.filter((o) =>
-      o.value.toLowerCase().startsWith(q) ||
-      o.name.toLowerCase().includes(q)
-    );
-  }, [bgInput]);
-
-  // Filtered theme options
-  const filteredThemeOptions: SelectOption[] = useMemo(() => {
-    const ids = query
-      ? themeIds.filter((id) => {
-          const def = THEMES[id];
-          const q = query.toLowerCase();
-          return id.toLowerCase().includes(q) || def.name.toLowerCase().includes(q);
-        })
-      : themeIds;
-    return ids.map((id) => {
-      const def = THEMES[id];
-      return {
-        name: def.name,
-        description: id === themeId ? "* current" : id,
-        value: id,
-      };
-    });
-  }, [query, themeIds, themeId]);
-
-  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;
-    }
-
-    // ── Custom BG text input ──
-    if (section === "custombg") {
-      // Don't capture up/down/return (let <select> handle those)
-      if (key.name === "up" || key.name === "down" || key.name === "return") return;
-      if (key.name === "backspace") {
-        setBgInput((s) => s.slice(0, -1));
-        return;
-      }
-      if (key.ctrl && key.name === "u") {
-        setBgInput("");
-        setCustomBg(null);
-        return;
-      }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-        setBgInput((s) => {
-          const next = s + key.sequence;
-          if (isValidHex(next)) setCustomBg(next);
-          return next;
-        });
-        return;
-      }
-      return;
-    }
-
-    // ── Themes search input ──
-    if (section === "themes") {
-      // Don't capture up/down/return (let <select> handle those)
-      if (key.name === "up" || key.name === "down" || key.name === "return") return;
-      if (key.name === "backspace") {
-        setQuery((q) => q.slice(0, -1));
-        return;
-      }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-        setQuery((q) => q + key.sequence);
-        return;
-      }
-      return;
-    }
-
-    // Mode section: let <select> handle everything
-  });
-
-  const dialogWidth = Math.min(60, (dims.width || 80) - 4);
-  const selectHeight = Math.max(3, Math.floor((dims.height || 24) * 0.2));
-
-  return (
-    <box
-      borderStyle="double"
-      borderColor={t.primary}
-      backgroundColor={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}
-    >
-      <text fg={t.primary} attributes={TextAttributes.BOLD}>
-        {"  Themes"}
-      </text>
-      <text fg={t.textDim}>
-        {`  Mode: ${mode}  •  ${filteredThemeOptions.length} themes${customBg ? `  •  BG: ${customBg}` : ""}`}
-      </text>
-      <text>{""}</text>
-
-      {/* ── 1. Appearance ── */}
-      <text
-        fg={section === "mode" ? t.primary : t.textDim}
-        attributes={section === "mode" ? TextAttributes.BOLD : undefined}
-      >
-        {"  Appearance"}
-      </text>
-      <select
-        options={modeOptions}
-        focused={section === "mode"}
-        selectedIndex={mode === "dark" ? 0 : 1}
-        height={2}
-        showDescription={false}
-        backgroundColor={customBg || undefined}
-        focusedBackgroundColor={customBg || undefined}
-        textColor={t.textMuted}
-        focusedTextColor={t.text}
-        selectedBackgroundColor={t.primary}
-        selectedTextColor={t.bg}
-        onSelect={(_index: number, option: SelectOption | null) => {
-          if (option?.value) {
-            setMode(option.value as "dark" | "light");
-            nextSection();
-          }
-        }}
-      />
-      <text>{""}</text>
-
-      {/* ── 2. 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}>{"    Search: "}</text>
-          <text fg={t.text}>{query || ""}</text>
-          <text fg={t.primary} attributes={TextAttributes.BOLD}>{"_"}</text>
-        </box>
-      )}
-      <select
-        options={filteredThemeOptions}
-        focused={section === "themes"}
-        height={selectHeight}
-        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={filteredThemeOptions.length > selectHeight}
-        onChange={(_index: number, option: SelectOption | null) => {
-          if (option?.value) {
-            setThemeId(option.value);
-            // Clear custom bg so the theme's own bg applies
-            setCustomBg(null);
-            setBgInput("");
-          }
-        }}
-        onSelect={(_index: number, _option: SelectOption | null) => {
-          props.onClose();
-        }}
-      />
-      <text>{""}</text>
-
-      {/* ── 3. Custom Background (override) ── */}
-      <text
-        fg={section === "custombg" ? t.primary : t.textDim}
-        attributes={section === "custombg" ? TextAttributes.BOLD : undefined}
-      >
-        {"  Custom Background Override"}
-      </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 || "(using theme default)"}</text>
-        )}
-      </box>
-      {section === "custombg" && (
-        <>
-          <text fg={t.textDim}>{"    Type #hex, Ctrl+U clear, ↑↓ presets, Enter apply"}</text>
-          <select
-            options={filteredBgOptions}
-            focused={section === "custombg"}
-            height={Math.min(6, filteredBgOptions.length)}
-            showDescription={false}
-            backgroundColor={customBg || undefined}
-            focusedBackgroundColor={customBg || undefined}
-            textColor={t.textMuted}
-            focusedTextColor={t.text}
-            selectedBackgroundColor={t.primary}
-            selectedTextColor={t.bg}
-            showScrollIndicator={filteredBgOptions.length > 6}
-            onChange={(_index: number, option: SelectOption | null) => {
-              if (option?.value) {
-                setBgInput(option.value);
-                setCustomBg(option.value);
-              }
-            }}
-            onSelect={(_index: number, option: SelectOption | null) => {
-              if (option?.value) {
-                setBgInput(option.value);
-                setCustomBg(option.value);
-              }
-              props.onClose();
-            }}
-          />
-        </>
-      )}
-
-      <text>{""}</text>
-      <text fg={t.textDim}>{"  Tab Section  ↑↓ Navigate  Enter Select  Esc Cancel"}</text>
-    </box>
-  );
-}

package/src/components/input-area.tsx

@@ -1,380 +0,0 @@
-/**
- * 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, RGBA } 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 } from "../lib/autocomplete";
-import type { ImageAttachment } from "@cdoing/ai";
-
-export type AgentMode = "build" | "plan";
-
-export interface InputAreaProps {
-  onSubmit: (text: string, images?: ImageAttachment[]) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  /** When true, all keyboard input is suppressed (e.g. dialog is open) */
-  suppressInput?: boolean;
-  workingDir: string;
-  /** Current agent mode (build/plan). If provided, shows mode tabs. */
-  mode?: AgentMode;
-  /** Callback when mode changes via Tab key */
-  onModeChange?: (mode: AgentMode) => void;
-  /** Model name to display in the tab bar */
-  modelLabel?: 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, customBg } = 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) => {
-    // Suppress all input when a dialog overlay is open
-    if (props.suppressInput) return;
-
-    // Allow typing even when disabled (streaming) — submit handler decides what to do
-
-    // ── Tab — always switch mode (build ↔ plan) ──
-    if (key.name === "tab" && props.onModeChange && props.mode) {
-      props.onModeChange(props.mode === "build" ? "plan" : "build");
-      return;
-    }
-
-    // ── 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) {
-            props.onSubmit(text, pendingImages.length > 0 ? [...pendingImages] : undefined);
-            setValue("");
-            setPendingImages([]);
-          }
-          setDropdownOpen(false);
-          setSelectedIdx(0);
-        }
-        return;
-      }
-      if (key.name === "escape") {
-        setDropdownOpen(false);
-        return;
-      }
-      // Arrow right — accept selected autocomplete suggestion
-      if (key.name === "right") {
-        const s = suggestions[selectedIdx];
-        if (s) {
-          setValue(s.text + " ");
-          setDropdownOpen(false);
-          setSelectedIdx(0);
-        }
-        return;
-      }
-    }
-
-    // ── Ghost text accept (arrow right) ──
-    if (ghost && 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 — only consume if dropdown is open
-    if (key.name === "escape" && dropdownOpen) {
-      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;
-
-  const bgColor = customBg ? RGBA.fromHex(customBg) : t.bg;
-
-  return (
-    <box flexDirection="column" flexShrink={0} backgroundColor={bgColor}>
-      {/* Autocomplete dropdown (above input) */}
-      {showDropdown && (
-        <box flexDirection="column" paddingX={1} backgroundColor={bgColor}>
-          {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}
-        backgroundColor={bgColor}
-        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, → accept)"}
-          </text>
-        )}
-      </box>
-
-      {/* Mode tab bar (Build / Plan) + model label + shortcuts */}
-      {props.mode && (
-        <box height={1} flexDirection="row" backgroundColor={bgColor} paddingX={1}>
-          {/* Build tab */}
-          <box backgroundColor={props.mode === "build" ? t.primary : undefined}>
-            <text
-              fg={props.mode === "build" ? t.bg : t.textMuted}
-              attributes={props.mode === "build" ? TextAttributes.BOLD : undefined}
-            >
-              {" Build "}
-            </text>
-          </box>
-          <text fg={t.textDim}>{" "}</text>
-          {/* Plan tab */}
-          <box backgroundColor={props.mode === "plan" ? t.secondary : undefined}>
-            <text
-              fg={props.mode === "plan" ? t.bg : t.textMuted}
-              attributes={props.mode === "plan" ? TextAttributes.BOLD : undefined}
-            >
-              {" Plan "}
-            </text>
-          </box>
-
-          {/* Model label */}
-          {props.modelLabel && (
-            <>
-              <text fg={t.textDim}>{" "}</text>
-              <text fg={t.textMuted} attributes={TextAttributes.ITALIC}>
-                {props.modelLabel}
-              </text>
-            </>
-          )}
-
-          {/* Right-aligned shortcut hints */}
-          <box flexGrow={1} />
-          <text fg={t.textDim}>{"tab mode  "}</text>
-          <text fg={t.textDim}>{"ctrl+p commands"}</text>
-        </box>
-      )}
-    </box>
-  );
-}