muonroi-cli 1.4.0 → 1.5.0

package/src/ui/modals/connect-modal.tsx

@@ -1,259 +0,0 @@
-import type { KeyBinding, ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
-import type React from "react";
-import { useEffect, useRef } from "react";
-import type { Theme } from "../theme.js";
-import { bottomAlignedModalTop } from "../utils/modal.js";
-
-const TEXTAREA_KEYBINDINGS: KeyBinding[] = [
-  { name: "return", action: "submit" },
-  { name: "return", shift: true, action: "newline" },
-];
-
-export function ConnectModal({
-  t,
-  width,
-  height,
-  selectedIndex,
-  channels,
-}: {
-  t: Theme;
-  width: number;
-  height: number;
-  selectedIndex: number;
-  channels: { id: string; label: string; description: string }[];
-}) {
-  const listRef = useRef<ScrollBoxRenderable>(null);
-  useEffect(() => {
-    const ch = channels[selectedIndex];
-    if (ch) listRef.current?.scrollChildIntoView(`connect-${ch.id}`);
-  }, [selectedIndex, channels]);
-
-  const panelHeight = Math.min(channels.length + 9, Math.floor(height * 0.5));
-  const top = bottomAlignedModalTop(height, panelHeight);
-  const overlayBg = "#000000cc" as string;
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width={width}
-      height={height}
-      alignItems="center"
-      paddingTop={top}
-      backgroundColor={overlayBg}
-    >
-      <box
-        width={Math.min(56, width - 6)}
-        height={panelHeight}
-        backgroundColor={t.backgroundPanel}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="column"
-      >
-        <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-          <text fg={t.primary}>
-            <b>{"Connect"}</b>
-          </text>
-          <text fg={t.textMuted}>{"esc"}</text>
-        </box>
-        <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
-          <text fg={t.textMuted}>{"Choose a channel"}</text>
-        </box>
-        <scrollbox ref={listRef} flexGrow={1} minHeight={0}>
-          {channels.map((ch, idx) => (
-            <box
-              key={ch.id}
-              id={`connect-${ch.id}`}
-              backgroundColor={idx === selectedIndex ? t.selectedBg : undefined}
-              paddingLeft={2}
-              paddingRight={2}
-            >
-              <box flexDirection="row" justifyContent="space-between">
-                <text fg={idx === selectedIndex ? t.selected : t.text}>{ch.label}</text>
-                <text fg={t.textMuted}>{ch.description}</text>
-              </box>
-            </box>
-          ))}
-        </scrollbox>
-        <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={2} paddingBottom={1}>
-          <text>
-            <span style={{ fg: t.primary }}>{"enter "}</span>
-            <span style={{ fg: t.textMuted }}>{"select  ·  "}</span>
-            <span style={{ fg: t.primary }}>{"↑↓ "}</span>
-            <span style={{ fg: t.textMuted }}>{"navigate  ·  "}</span>
-            <span style={{ fg: t.primary }}>{"esc "}</span>
-            <span style={{ fg: t.textMuted }}>{"close"}</span>
-          </text>
-        </box>
-      </box>
-    </box>
-  );
-}
-
-export function TelegramTokenModal({
-  t,
-  width,
-  height,
-  inputRef,
-  error,
-  onSubmit,
-}: {
-  t: Theme;
-  width: number;
-  height: number;
-  inputRef: React.RefObject<TextareaRenderable | null>;
-  error: string | null;
-  onSubmit: () => void;
-}) {
-  const overlayBg = "#000000cc" as string;
-  const panelWidth = Math.min(68, width - 6);
-  const panelHeight = 14;
-  const top = bottomAlignedModalTop(height, panelHeight);
-
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width={width}
-      height={height}
-      alignItems="center"
-      paddingTop={top}
-      backgroundColor={overlayBg}
-    >
-      <box
-        width={panelWidth}
-        height={panelHeight}
-        backgroundColor={t.backgroundPanel}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="column"
-      >
-        <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-          <text fg={t.primary}>
-            <b>{"Telegram bot token"}</b>
-          </text>
-          <text fg={t.textMuted}>{"esc"}</text>
-        </box>
-        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <text fg={t.text}>
-            {"From @BotFather: /newbot, then paste the token here. Stored in ~/.muonroi-cli/user-settings.json."}
-          </text>
-        </box>
-        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <box backgroundColor={t.backgroundElement} paddingLeft={1} paddingRight={1} width="100%">
-            <textarea
-              ref={inputRef}
-              focused={true}
-              placeholder="123456:ABC..."
-              textColor={t.text}
-              backgroundColor={t.backgroundElement}
-              placeholderColor={t.textMuted}
-              minHeight={1}
-              maxHeight={3}
-              wrapMode="word"
-              keyBindings={TEXTAREA_KEYBINDINGS}
-              onSubmit={onSubmit as unknown as () => void}
-            />
-          </box>
-        </box>
-        <box flexGrow={1} minHeight={0} />
-        <box paddingLeft={2} paddingRight={2} paddingTop={2} paddingBottom={1}>
-          {error ? (
-            <text fg={t.diffRemovedFg}>{error}</text>
-          ) : (
-            <text>
-              <span style={{ fg: t.primary }}>{"enter "}</span>
-              <span style={{ fg: t.textMuted }}>{"save token  ·  "}</span>
-              <span style={{ fg: t.primary }}>{"esc "}</span>
-              <span style={{ fg: t.textMuted }}>{"close"}</span>
-            </text>
-          )}
-        </box>
-      </box>
-    </box>
-  );
-}
-
-export function TelegramPairModal({
-  t,
-  width,
-  height,
-  inputRef,
-  error,
-  onSubmit,
-}: {
-  t: Theme;
-  width: number;
-  height: number;
-  inputRef: React.RefObject<TextareaRenderable | null>;
-  error: string | null;
-  onSubmit: () => void;
-}) {
-  const overlayBg = "#000000cc" as string;
-  const panelWidth = Math.min(68, width - 6);
-  const panelHeight = 13;
-  const top = bottomAlignedModalTop(height, panelHeight);
-
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width={width}
-      height={height}
-      alignItems="center"
-      paddingTop={top}
-      backgroundColor={overlayBg}
-    >
-      <box
-        width={panelWidth}
-        height={panelHeight}
-        backgroundColor={t.backgroundPanel}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="column"
-      >
-        <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-          <text fg={t.primary}>
-            <b>{"Pairing code"}</b>
-          </text>
-          <text fg={t.textMuted}>{"esc"}</text>
-        </box>
-        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <text fg={t.text}>{"DM your bot with /pair, then paste the 6-character code."}</text>
-        </box>
-        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <box backgroundColor={t.backgroundElement} paddingLeft={1} paddingRight={1} width="100%">
-            <textarea
-              ref={inputRef}
-              focused={true}
-              placeholder="ABC123"
-              textColor={t.text}
-              backgroundColor={t.backgroundElement}
-              placeholderColor={t.textMuted}
-              minHeight={1}
-              maxHeight={2}
-              wrapMode="word"
-              keyBindings={TEXTAREA_KEYBINDINGS}
-              onSubmit={onSubmit as unknown as () => void}
-            />
-          </box>
-        </box>
-        <box flexGrow={1} minHeight={0} />
-        <box paddingLeft={2} paddingRight={2} paddingTop={2} paddingBottom={1}>
-          {error ? (
-            <text fg={t.diffRemovedFg}>{error}</text>
-          ) : (
-            <text>
-              <span style={{ fg: t.primary }}>{"enter "}</span>
-              <span style={{ fg: t.textMuted }}>{"approve pairing  ·  "}</span>
-              <span style={{ fg: t.primary }}>{"esc "}</span>
-              <span style={{ fg: t.textMuted }}>{"close"}</span>
-            </text>
-          )}
-        </box>
-      </box>
-    </box>
-  );
-}

package/src/ui/modals/model-picker-modal.tsx

@@ -1,347 +0,0 @@
-import { Semantic } from "@muonroi/agent-harness-opentui";
-import type { ProviderId } from "../../providers/types.js";
-import type { ModelInfo, ReasoningEffort } from "../../types/index.js";
-import type { Theme } from "../theme.js";
-import { bottomAlignedModalTop } from "../utils/modal.js";
-
-// Tier helpers retained for backwards-compat consumers (e.g. tests).
-const TIER_ORDER_MAP: Record<string, number> = { premium: 0, balanced: 1, fast: 2 };
-
-export function sortModelsByTier(models: ModelInfo[]): ModelInfo[] {
-  return [...models].sort((a, b) => {
-    const ta = TIER_ORDER_MAP[a.tier ?? ""] ?? 3;
-    const tb = TIER_ORDER_MAP[b.tier ?? ""] ?? 3;
-    return ta - tb;
-  });
-}
-
-export type TierGroup = { tier: string; items: ModelInfo[] };
-
-export function groupModelsByTier(models: ModelInfo[]): TierGroup[] {
-  const map = new Map<string, ModelInfo[]>();
-  for (const m of models) {
-    const tier = m.tier ?? "other";
-    const list = map.get(tier) ?? [];
-    list.push(m);
-    map.set(tier, list);
-  }
-  const order = ["premium", "balanced", "fast", "other"];
-  return order.filter((t) => map.has(t)).map((t) => ({ tier: t, items: map.get(t)! }));
-}
-
-export interface ApiKeyPromptState {
-  provider: ProviderId;
-  value: string;
-  error: string | null;
-  /** When true the field shows the raw key instead of mask dots (Ctrl+R). */
-  reveal?: boolean;
-}
-
-export type BwSyncState =
-  | { phase: "password"; value: string; error: string | null; loading: boolean }
-  | {
-      phase: "picker";
-      session: string;
-      items: Array<{ provider: ProviderId; key: string }>;
-      selected: Set<ProviderId>;
-      focusIndex: number;
-      loading: boolean;
-      error: string | null;
-    };
-
-export function ModelPickerModal({
-  t,
-  width,
-  height,
-  configuredProviders,
-  disabledProviders,
-  defaultProvider,
-  providerChipIndex,
-  providersWithKey,
-  apiKeyPrompt,
-  bwSync,
-}: {
-  t: Theme;
-  currentModel?: string;
-  selectedIndex?: number;
-  width: number;
-  height: number;
-  searchQuery?: string;
-  filteredModels?: ModelInfo[];
-  reasoningEffortByModel?: Record<string, ReasoningEffort>;
-  configuredProviders: ProviderId[];
-  disabledProviders: ProviderId[];
-  disabledModels?: string[];
-  defaultProvider?: ProviderId | null;
-  focus?: "models" | "providers";
-  providerChipIndex: number;
-  providersWithKey?: ReadonlySet<ProviderId>;
-  apiKeyPrompt?: ApiKeyPromptState | null;
-  bwSync?: BwSyncState | null;
-}) {
-  const disabledSet = new Set(disabledProviders);
-  const keyedSet = providersWithKey ?? new Set<ProviderId>();
-  const panelWidth = Math.min(64, width - 6);
-
-  const rowCount = Math.max(configuredProviders.length, 1);
-  const contentHeight = rowCount + 7;
-  const maxH = Math.floor(height * 0.65);
-  const panelHeight = Math.min(contentHeight, maxH);
-  const top = bottomAlignedModalTop(height, panelHeight);
-  const overlayBg = "#000000cc" as string;
-
-  // Sub-modal: API key prompt overlay (rendered on top of the picker).
-  const subModal = apiKeyPrompt ? (
-    <Semantic id="provider-key-prompt" role="dialog" isModal name={`Set ${apiKeyPrompt.provider} key`}>
-      <box
-        position="absolute"
-        left={0}
-        top={0}
-        width={width}
-        height={height}
-        alignItems="center"
-        paddingTop={Math.floor(height / 3)}
-        backgroundColor="#000000dd"
-      >
-        <box
-          width={Math.min(60, width - 8)}
-          backgroundColor={t.backgroundPanel}
-          paddingTop={1}
-          paddingBottom={1}
-          paddingLeft={2}
-          paddingRight={2}
-          flexDirection="column"
-        >
-          <text fg={t.primary}>
-            <b>{`Set API key — ${apiKeyPrompt.provider}`}</b>
-          </text>
-          <box paddingTop={1}>
-            <text fg={t.textMuted}>
-              {"Key is saved to the OS keychain (keytar). Bitwarden sync via `muonroi-cli keys import-bw`."}
-            </text>
-          </box>
-          <Semantic
-            id="provider-key-input"
-            role="textbox"
-            name={`${apiKeyPrompt.provider} API key`}
-            focus
-            value={apiKeyPrompt.value}
-          >
-            <box
-              paddingTop={1}
-              backgroundColor={t.backgroundElement}
-              paddingLeft={1}
-              paddingRight={1}
-              flexDirection="row"
-              justifyContent="space-between"
-            >
-              {apiKeyPrompt.value.length > 0 ? (
-                <text fg={t.text}>
-                  {`${apiKeyPrompt.reveal ? apiKeyPrompt.value.slice(0, 40) : "•".repeat(Math.min(apiKeyPrompt.value.length, 40))}▏`}
-                </text>
-              ) : (
-                <text fg={t.textDim}>{"▏(type or paste key)"}</text>
-              )}
-              {apiKeyPrompt.value.length > 0 ? (
-                <text
-                  fg={t.textMuted}
-                >{`${apiKeyPrompt.reveal ? "shown" : "hidden"} · ${apiKeyPrompt.value.length} chars`}</text>
-              ) : null}
-            </box>
-          </Semantic>
-          {apiKeyPrompt.error ? (
-            <box paddingTop={1}>
-              <text fg={t.initFormError}>{apiKeyPrompt.error}</text>
-            </box>
-          ) : null}
-          <box paddingTop={1}>
-            <text fg={t.textMuted}>{"Enter save · Esc cancel · Ctrl+R reveal · paste works"}</text>
-          </box>
-        </box>
-      </box>
-    </Semantic>
-  ) : null;
-
-  // Sub-modal: Bitwarden sync (Option A) — password phase, then provider picker.
-  const bwModal = bwSync ? (
-    <Semantic id="provider-bw-sync" role="dialog" isModal name="Bitwarden sync">
-      <box
-        position="absolute"
-        left={0}
-        top={0}
-        width={width}
-        height={height}
-        alignItems="center"
-        paddingTop={Math.floor(height / 4)}
-        backgroundColor="#000000dd"
-      >
-        <box
-          width={Math.min(64, width - 8)}
-          backgroundColor={t.backgroundPanel}
-          paddingTop={1}
-          paddingBottom={1}
-          paddingLeft={2}
-          paddingRight={2}
-          flexDirection="column"
-        >
-          {bwSync.phase === "password" ? (
-            <>
-              <text fg={t.primary}>
-                <b>{"Sync from Bitwarden"}</b>
-              </text>
-              <box paddingTop={1}>
-                <text fg={t.textMuted}>
-                  {"Unlocks vault with master password, finds items named 'muonroi-cli/<provider>', imports keys."}
-                </text>
-              </box>
-              <Semantic
-                id="bw-password-input"
-                role="textbox"
-                name="Bitwarden master password"
-                focus
-                value={bwSync.value}
-              >
-                <box
-                  paddingTop={1}
-                  backgroundColor={t.backgroundElement}
-                  paddingLeft={1}
-                  paddingRight={1}
-                  flexDirection="row"
-                  justifyContent="space-between"
-                >
-                  {bwSync.value.length > 0 ? (
-                    <text fg={t.text}>{`${"•".repeat(Math.min(bwSync.value.length, 40))}▏`}</text>
-                  ) : (
-                    <text fg={t.textDim}>{"▏(master password)"}</text>
-                  )}
-                  {bwSync.value.length > 0 ? <text fg={t.textMuted}>{`${bwSync.value.length} chars`}</text> : null}
-                </box>
-              </Semantic>
-              {bwSync.error ? (
-                <box paddingTop={1}>
-                  <text fg={t.initFormError}>{bwSync.error}</text>
-                </box>
-              ) : null}
-              <box paddingTop={1}>
-                <text fg={t.textMuted}>{bwSync.loading ? "unlocking..." : "Enter unlock  Esc cancel"}</text>
-              </box>
-            </>
-          ) : (
-            <>
-              <text fg={t.primary}>
-                <b>{`Import from Bitwarden (${bwSync.items.length} found)`}</b>
-              </text>
-              <box paddingTop={1} flexDirection="column">
-                {bwSync.items.map((item, i) => {
-                  const focused = i === bwSync.focusIndex;
-                  const checked = bwSync.selected.has(item.provider);
-                  return (
-                    <box
-                      key={item.provider}
-                      paddingLeft={1}
-                      paddingRight={1}
-                      backgroundColor={focused ? t.selectedBg : undefined}
-                    >
-                      <text fg={focused ? t.accent : t.text}>
-                        {`${focused ? "›" : " "} [${checked ? "x" : " "}] ${item.provider}`}
-                      </text>
-                    </box>
-                  );
-                })}
-              </box>
-              {bwSync.error ? (
-                <box paddingTop={1}>
-                  <text fg={t.initFormError}>{bwSync.error}</text>
-                </box>
-              ) : null}
-              <box paddingTop={1}>
-                <text fg={t.textMuted}>
-                  {bwSync.loading ? "importing..." : "↑↓ nav  Space toggle  Enter import  Esc cancel"}
-                </text>
-              </box>
-            </>
-          )}
-        </box>
-      </box>
-    </Semantic>
-  ) : null;
-
-  return (
-    <>
-      <Semantic id="model-picker" role="dialog" isModal name="Providers">
-        <box
-          position="absolute"
-          left={0}
-          top={0}
-          width={width}
-          height={height}
-          alignItems="center"
-          paddingTop={top}
-          backgroundColor={overlayBg}
-        >
-          <box
-            width={panelWidth}
-            height={panelHeight}
-            backgroundColor={t.backgroundPanel}
-            paddingTop={1}
-            paddingBottom={1}
-            flexDirection="column"
-          >
-            <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-              <text fg={t.primary}>
-                <b>{"Providers"}</b>
-              </text>
-              <text fg={t.textMuted}>{"esc"}</text>
-            </box>
-            <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={1} flexDirection="column">
-              {configuredProviders.length === 0 ? (
-                <text fg={t.textMuted}>{"No providers configured"}</text>
-              ) : (
-                configuredProviders.map((p, i) => {
-                  const hasKey = keyedSet.has(p);
-                  const enabled = hasKey && !disabledSet.has(p);
-                  const focused = i === providerChipIndex;
-                  const isDefault = defaultProvider === p;
-                  const mark = !hasKey ? "·" : enabled ? "✓" : "✗";
-                  const star = isDefault ? "★" : " ";
-                  const fg = focused ? t.accent : enabled ? t.text : t.textMuted;
-                  const starFg = isDefault ? t.primary : t.textDim;
-                  const suffix = !hasKey ? "  (no key — press K)" : "";
-                  return (
-                    <Semantic
-                      key={p}
-                      id={`provider-chip-${p}`}
-                      role="button"
-                      selected={enabled ? true : undefined}
-                      disabled={!hasKey ? true : undefined}
-                      name={p}
-                    >
-                      <box
-                        paddingLeft={1}
-                        paddingRight={1}
-                        backgroundColor={focused ? t.selectedBg : undefined}
-                        width="100%"
-                        flexDirection="row"
-                      >
-                        <text fg={fg}>{`${focused ? "›" : " "} ${mark} `}</text>
-                        <text fg={starFg}>{`${star} `}</text>
-                        <text fg={fg}>{p}</text>
-                        {suffix ? <text fg={t.textMuted}>{suffix}</text> : null}
-                      </box>
-                    </Semantic>
-                  );
-                })
-              )}
-            </box>
-            <box flexGrow={1} minHeight={0} />
-            <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={1}>
-              <text fg={t.textMuted}>{"↑↓ nav  Space toggle  D default  K set key  B sync BW  Esc close"}</text>
-            </box>
-          </box>
-        </box>
-      </Semantic>
-      {subModal}
-      {bwModal}
-    </>
-  );
-}

package/src/ui/modals/sandbox-picker-modal.tsx

@@ -1,99 +0,0 @@
-import type { SandboxMode, SandboxSettings } from "../../utils/settings.js";
-import { getSandboxVisibleRows } from "../constants.js";
-import type { Theme } from "../theme.js";
-import { bottomAlignedModalTop } from "../utils/modal.js";
-
-export function SandboxPickerModal({
-  t,
-  currentMode,
-  settings,
-  focusIndex,
-  editing,
-  editBuffer,
-  width,
-  height,
-}: {
-  t: Theme;
-  currentMode: SandboxMode;
-  settings: SandboxSettings;
-  focusIndex: number;
-  editing: string | null;
-  editBuffer: string;
-  width: number;
-  height: number;
-}) {
-  const visibleRows = getSandboxVisibleRows(currentMode);
-  const panelHeight = Math.min(visibleRows.length + 6, Math.floor(height * 0.6));
-  const top = bottomAlignedModalTop(height, panelHeight);
-  const overlayBg = "#000000cc" as string;
-
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width={width}
-      height={height}
-      alignItems="center"
-      paddingTop={top}
-      backgroundColor={overlayBg}
-    >
-      <box
-        width={Math.min(64, width - 6)}
-        height={panelHeight}
-        backgroundColor={t.backgroundPanel}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="column"
-      >
-        <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-          <text fg={t.primary}>
-            <b>{"Sandbox settings"}</b>
-          </text>
-          <text fg={t.textMuted}>{"esc"}</text>
-        </box>
-        <scrollbox flexGrow={1} minHeight={0}>
-          {visibleRows.map((row, idx) => {
-            const focused = idx === focusIndex;
-            const isEditing = editing === row.key;
-            const display = row.getDisplay(currentMode, settings);
-            return (
-              <box
-                key={row.key}
-                backgroundColor={focused ? t.selectedBg : undefined}
-                paddingLeft={2}
-                paddingRight={2}
-                width="100%"
-              >
-                <box width="100%" flexDirection="row" justifyContent="space-between">
-                  <text fg={focused ? t.selected : t.text}>{row.label}</text>
-                  {isEditing ? (
-                    <text fg={t.accent}>
-                      {editBuffer || row.placeholder || ""}
-                      {"_"}
-                    </text>
-                  ) : row.type === "toggle" ? (
-                    <text fg={focused ? t.primary : t.textMuted}>
-                      {"< "}
-                      {display}
-                      {" >"}
-                    </text>
-                  ) : (
-                    <text fg={focused ? t.primary : t.textMuted}>{display}</text>
-                  )}
-                </box>
-              </box>
-            );
-          })}
-        </scrollbox>
-        <box flexShrink={0} paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <text fg={t.textMuted}>
-            {editing
-              ? "type value  enter confirm  esc cancel"
-              : "arrows navigate  left/right toggle  enter edit  esc close"}
-          </text>
-        </box>
-      </box>
-    </box>
-  );
-}