ubume 0.1.0

package/src/ui/panels/ModelReasoningPicker.tsx

@@ -0,0 +1,458 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import {
+  type CodexModelCapability,
+  type ReasoningEffortCapability,
+  normalizeReasoningForModelCapabilities,
+} from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { useTheme } from "../theme.js";
+
+// ─── Types & helpers ─────────────────────────────────────────────────────────
+
+type ModelPickerCloseReason = "escape" | "empty-selection";
+
+interface ModelReasoningPickerProps {
+  models: readonly CodexModelCapability[];
+  currentModel: string;
+  currentReasoning: string;
+  isLoading?: boolean;
+  onSelect: (model: string, reasoning: string) => void;
+  onCancel: (reason?: ModelPickerCloseReason) => void;
+}
+
+function getModelReasoningLevels(model: CodexModelCapability): readonly ReasoningEffortCapability[] {
+  return model.supportedReasoningLevels ?? [];
+}
+
+function getInitialReasoning(model: CodexModelCapability, currentReasoning: string): string {
+  return normalizeReasoningForModelCapabilities(
+    model.model,
+    currentReasoning,
+    {
+      status: "ready",
+      source: model.source,
+      models: [model],
+      discoveredAt: Date.now(),
+      executable: null,
+      error: null,
+    },
+  );
+}
+
+function getInitialCursor(models: readonly CodexModelCapability[], currentModel: string): number {
+  return Math.max(0, models.findIndex((model) => model.model === currentModel || model.id === currentModel));
+}
+
+function buildPendingReasoning(
+  models: readonly CodexModelCapability[],
+  currentReasoning: string,
+): Record<string, string> {
+  const next: Record<string, string> = {};
+  for (const model of models) {
+    next[model.model] = getInitialReasoning(model, currentReasoning);
+  }
+  return next;
+}
+
+function describeInputKey(
+  input: string,
+  key: {
+    escape?: boolean;
+    return?: boolean;
+    upArrow?: boolean;
+    downArrow?: boolean;
+    leftArrow?: boolean;
+    rightArrow?: boolean;
+    ctrl?: boolean;
+    meta?: boolean;
+  },
+) {
+  return {
+    input,
+    escape: Boolean(key.escape),
+    return: Boolean(key.return),
+    upArrow: Boolean(key.upArrow),
+    downArrow: Boolean(key.downArrow),
+    leftArrow: Boolean(key.leftArrow),
+    rightArrow: Boolean(key.rightArrow),
+    ctrl: Boolean(key.ctrl),
+    meta: Boolean(key.meta),
+  };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ModelReasoningPicker({
+  models,
+  currentModel,
+  currentReasoning,
+  isLoading = false,
+  onSelect,
+  onCancel,
+}: ModelReasoningPickerProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: FOCUS_IDS.modelPicker, autoFocus: true });
+  const visibleModels = models;
+  const initializedModelsRef = useRef(false);
+
+  const [cursor, setCursor] = useState(() =>
+    getInitialCursor(visibleModels, currentModel),
+  );
+
+  const [pendingReasoning, setPendingReasoning] = useState<Record<string, string>>(() =>
+    buildPendingReasoning(visibleModels, currentReasoning)
+  );
+
+  useEffect(() => {
+    traceInputDebug("model_picker_mounted", {
+      focusTarget: FOCUS_IDS.modelPicker,
+      modelCount: visibleModels.length,
+      isLoading,
+    });
+    return () => {
+      traceInputDebug("model_picker_unmounted", {
+        focusTarget: FOCUS_IDS.modelPicker,
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    traceInputDebug("model_picker_focus", {
+      isFocused,
+      focusTarget: FOCUS_IDS.modelPicker,
+      modelCount: visibleModels.length,
+      isLoading,
+    });
+  }, [isFocused, isLoading, visibleModels.length]);
+
+  useEffect(() => {
+    traceInputDebug("model_picker_models_state", {
+      isLoading,
+      modelCount: visibleModels.length,
+      currentModel,
+    });
+
+    if (visibleModels.length === 0) {
+      initializedModelsRef.current = false;
+      setCursor(0);
+      setPendingReasoning({});
+      return;
+    }
+
+    setCursor((currentCursor) => {
+      const maxCursor = Math.max(0, visibleModels.length - 1);
+      if (!initializedModelsRef.current) {
+        initializedModelsRef.current = true;
+        return Math.min(getInitialCursor(visibleModels, currentModel), maxCursor);
+      }
+      return Math.min(Math.max(0, currentCursor), maxCursor);
+    });
+
+    setPendingReasoning((prev) => {
+      const next: Record<string, string> = {};
+      let changed = Object.keys(prev).length !== visibleModels.length;
+
+      for (const model of visibleModels) {
+        const value = prev[model.model] ?? getInitialReasoning(model, currentReasoning);
+        next[model.model] = value;
+        if (prev[model.model] !== value) {
+          changed = true;
+        }
+      }
+
+      return changed ? next : prev;
+    });
+  }, [currentModel, currentReasoning, isLoading, visibleModels]);
+
+  const highlightedModel = visibleModels[Math.min(cursor, Math.max(0, visibleModels.length - 1))];
+
+  const moveReasoning = useCallback(
+    (direction: -1 | 1) => {
+      const model = visibleModels[cursor];
+      if (!model) return;
+
+      const available = getModelReasoningLevels(model);
+      if (available.length <= 1) return;
+
+      setPendingReasoning((prev) => {
+        const currentValue = prev[model.model] ?? getInitialReasoning(model, currentReasoning);
+        const currentIdx = Math.max(0, available.findIndex((level) => level.id === currentValue));
+        const nextIdx = Math.max(0, Math.min(available.length - 1, currentIdx + direction));
+        if (nextIdx === currentIdx) return prev;
+        return { ...prev, [model.model]: available[nextIdx]!.id };
+      });
+    },
+    [currentReasoning, cursor, visibleModels],
+  );
+
+  useInput(
+    (input, key) => {
+      traceInputDebug("model_picker_input", {
+        handler: "ModelReasoningPicker.useInput",
+        key: describeInputKey(input, key),
+        isFocused,
+        isLoading,
+        modelCount: visibleModels.length,
+        cursor,
+      });
+
+      if (key.escape) {
+        traceInputDebug("model_picker_close_request", {
+          reason: "escape",
+          handler: "ModelReasoningPicker.useInput",
+          modelCount: visibleModels.length,
+        });
+        onCancel("escape");
+        return;
+      }
+      if (key.return) {
+        const model = visibleModels[cursor];
+        if (!model) {
+          traceInputDebug("model_picker_close_request", {
+            reason: "empty-selection",
+            handler: "ModelReasoningPicker.useInput",
+            modelCount: visibleModels.length,
+          });
+          onCancel("empty-selection");
+          return;
+        }
+        const reasoning = pendingReasoning[model.model] ?? getInitialReasoning(model, currentReasoning);
+        traceInputDebug("model_selection_start", {
+          handler: "ModelReasoningPicker.useInput",
+          model: model.model,
+          reasoning,
+        });
+        onSelect(model.model, reasoning);
+        return;
+      }
+      if (key.upArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setCursor((c) => Math.min(visibleModels.length - 1, c + 1));
+        return;
+      }
+      if (key.leftArrow) {
+        moveReasoning(-1);
+        return;
+      }
+      if (key.rightArrow) {
+        moveReasoning(1);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  const rows = useMemo(
+    () =>
+      visibleModels.map((model) => {
+        const available = getModelReasoningLevels(model);
+        return {
+          model,
+          available,
+          interactive: available.length > 1,
+        };
+      }),
+    [visibleModels],
+  );
+
+  if (visibleModels.length === 0) {
+    return <LoadingPickerView theme={theme} isLoading={isLoading} />;
+  }
+
+  return (
+    <InteractivePickerView
+      rows={rows}
+      cursor={cursor}
+      currentModel={currentModel}
+      currentReasoning={currentReasoning}
+      pendingReasoning={pendingReasoning}
+      highlightedModel={highlightedModel}
+      theme={theme}
+    />
+  );
+}
+
+// ─── Subcomponents ───────────────────────────────────────────────────────────
+
+function LoadingPickerView({
+  theme,
+  isLoading,
+}: {
+  theme: ReturnType<typeof useTheme>;
+  isLoading: boolean;
+}) {
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box
+        borderStyle="round"
+        borderColor={theme.border}
+        paddingX={2}
+        paddingY={0}
+        width="100%"
+      >
+        <Box flexDirection="column" width="100%">
+          <Box>
+            <Text color={theme.accent} bold>Select model  </Text>
+            <Text color={theme.textMuted}>Esc cancel</Text>
+          </Box>
+          <Box marginTop={0}>
+            <Text color={theme.textDim}>
+              {isLoading
+                ? "Discovering models from the Codex runtime…"
+                : "No models available yet."}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+interface InteractivePickerViewProps {
+  rows: Array<{
+    model: CodexModelCapability;
+    available: readonly ReasoningEffortCapability[];
+    interactive: boolean;
+  }>;
+  cursor: number;
+  currentModel: string;
+  currentReasoning: string;
+  pendingReasoning: Record<string, string>;
+  highlightedModel: CodexModelCapability | undefined;
+  theme: ReturnType<typeof useTheme>;
+}
+
+function InteractivePickerView({
+  rows,
+  cursor,
+  currentModel,
+  currentReasoning,
+  pendingReasoning,
+  highlightedModel,
+  theme,
+}: InteractivePickerViewProps) {
+  const subtitleParts: string[] = ["↑↓ model"];
+  if (highlightedModel && getModelReasoningLevels(highlightedModel).length > 1) {
+    subtitleParts.push("←→ reasoning");
+  }
+  subtitleParts.push("Enter select", "Esc cancel");
+  const subtitle = subtitleParts.join("  ·  ");
+
+  const highlightedPending = highlightedModel
+    ? pendingReasoning[highlightedModel.model] ?? getInitialReasoning(highlightedModel, currentReasoning)
+    : currentReasoning;
+  const reasoningHint = highlightedModel?.supportedReasoningLevels
+    ? `Reasoning: ${formatReasoningLabel(highlightedPending)}`
+    : "Reasoning metadata unavailable";
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.borderFocused}
+      paddingX={2}
+      paddingY={0}
+      width="100%"
+      flexDirection="column"
+    >
+      <Box>
+        <Text color={theme.accent} bold>Select model  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
+      </Box>
+      <Box marginTop={0}>
+        <Text color={theme.textDim}>{reasoningHint}</Text>
+      </Box>
+
+      <Box
+        marginTop={0}
+        width="100%"
+        flexDirection="column"
+      >
+        {rows.map((row, idx) => {
+          const isHighlighted = idx === cursor;
+          const isCommitted = row.model.model === currentModel || row.model.id === currentModel;
+          const pending = pendingReasoning[row.model.model] ?? getInitialReasoning(row.model, currentReasoning);
+
+          return (
+            <ModelRow
+              key={row.model.id}
+              model={row.model}
+              availableLevels={row.available}
+              interactive={row.interactive}
+              isHighlighted={isHighlighted}
+              isCommitted={isCommitted}
+              selectedReasoning={pending}
+              theme={theme}
+            />
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+interface ModelRowProps {
+  model: CodexModelCapability;
+  availableLevels: readonly ReasoningEffortCapability[];
+  interactive: boolean;
+  isHighlighted: boolean;
+  isCommitted: boolean;
+  selectedReasoning: string;
+  theme: ReturnType<typeof useTheme>;
+}
+
+function ModelRow({
+  model,
+  availableLevels,
+  interactive,
+  isHighlighted,
+  isCommitted,
+  selectedReasoning,
+  theme,
+}: ModelRowProps) {
+  const cursorGlyph = isHighlighted ? "▸ " : "  ";
+  const nameColor = isHighlighted ? theme.text : theme.textMuted;
+  const commitMark = isCommitted ? "  ✓" : "";
+  const selectedIndex = availableLevels.findIndex((level) => level.id === selectedReasoning);
+  const name = model.label === model.model ? model.model : `${model.label} (${model.model})`;
+
+  const bars = availableLevels.map((level, i) => {
+    const isActive = i === selectedIndex;
+    const color = !interactive
+      ? theme.textDim
+      : isActive
+        ? isHighlighted ? theme.accent : theme.text
+        : theme.textDim;
+
+    return (
+      <Text key={level.id} color={color} bold={isActive && isHighlighted && interactive}>
+        ■
+      </Text>
+    );
+  });
+
+  return (
+    <Box flexDirection="row" width="100%">
+      <Box width={3} flexShrink={0}>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{cursorGlyph}</Text>
+      </Box>
+      <Box flexGrow={1} flexDirection="row" paddingRight={1}>
+        <Box flexShrink={1}>
+          <Text color={nameColor} bold={isHighlighted} wrap="truncate-end">
+            {name}
+          </Text>
+        </Box>
+        <Box flexShrink={0} paddingLeft={1}>
+          <Text color={theme.textDim}>{commitMark}</Text>
+        </Box>
+      </Box>
+      <Box flexDirection="row" gap={1} flexShrink={0}>
+        {isHighlighted && bars}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/panels/Panel.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+
+interface PanelProps {
+  cols: number;
+  title: string;
+  rightTitle?: string;
+  borderColor?: string;
+  titleColor?: string;
+  children: React.ReactNode;
+}
+
+export function Panel({ cols, title, rightTitle, borderColor, titleColor, children }: PanelProps) {
+  const theme = useTheme();
+  const cBorder = borderColor || theme.borderFocused;
+  const cTitle = titleColor || theme.text;
+
+  const leftLabel = ` ${title} `;
+  const rightLabel = rightTitle ? ` ${rightTitle} ` : "";
+
+  // ╭─ TITLE ─── RIGHTTITLE ╮
+  // Calculate remaining dashes
+  // total length = 2 (╭─) + leftLabel + dashes + rightLabel + 1 (╮) = cols
+  // dashes = cols - 3 - leftLabel.length - rightLabel.length
+  const maxDashes = cols - 3 - leftLabel.length - rightLabel.length;
+  const dashCount = Math.max(0, maxDashes);
+
+  return (
+    <Box flexDirection="column" width={cols} overflow="hidden">
+      <Text color={cBorder}>
+        {"╭─"}
+        <Text color={cTitle}>{leftLabel}</Text>
+        {"─".repeat(dashCount)}
+        {rightTitle && <Text color={theme.textDim}>{rightLabel}</Text>}
+        {"╮"}
+      </Text>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderTop={false}
+        borderColor={cBorder}
+        width={cols}
+        paddingX={1}
+        paddingY={0}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/panels/PermissionsPanel.tsx

@@ -0,0 +1,78 @@
+import type { ResolvedRuntimeConfig, RuntimeConfig } from "../../config/runtimeConfig.js";
+import {
+  formatApprovalPolicyLabel,
+  formatNetworkAccessLabel,
+  formatSandboxModeLabel,
+} from "../../config/runtimeConfig.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+export type PermissionsPanelAction =
+  | "approval-policy"
+  | "sandbox"
+  | "network"
+  | "writable-roots-summary"
+  | "writable-roots-add"
+  | "writable-roots-remove"
+  | "writable-roots-clear";
+
+interface PermissionsPanelProps {
+  runtime: RuntimeConfig;
+  resolvedRuntime: ResolvedRuntimeConfig;
+  onSelect: (action: PermissionsPanelAction) => void;
+  onCancel: () => void;
+}
+
+function formatRootsSummary(count: number): string {
+  return count === 1 ? "1 configured" : `${count} configured`;
+}
+
+export function PermissionsPanel({
+  runtime,
+  resolvedRuntime,
+  onSelect,
+  onCancel,
+}: PermissionsPanelProps) {
+  const items = [
+    {
+      label: `Approval policy  ${formatApprovalPolicyLabel(resolvedRuntime.policy.approvalPolicy)} (configured: ${formatApprovalPolicyLabel(runtime.policy.approvalPolicy)})`,
+      value: "approval-policy",
+    },
+    {
+      label: `Sandbox mode  ${formatSandboxModeLabel(resolvedRuntime.policy.sandboxMode)} (configured: ${formatSandboxModeLabel(runtime.policy.sandboxMode)})`,
+      value: "sandbox",
+    },
+    {
+      label: `Network access  ${formatNetworkAccessLabel(resolvedRuntime.policy.networkAccess)} (configured: ${formatNetworkAccessLabel(runtime.policy.networkAccess)})`,
+      value: "network",
+    },
+    {
+      label: `Writable roots  ${formatRootsSummary(runtime.policy.writableRoots.length)}`,
+      value: "writable-roots-summary",
+    },
+    {
+      label: "Add writable root",
+      value: "writable-roots-add",
+    },
+    {
+      label: "Remove writable root",
+      value: "writable-roots-remove",
+    },
+    {
+      label: "Clear writable roots",
+      value: "writable-roots-clear",
+    },
+  ] satisfies Array<{ label: string; value: PermissionsPanelAction }>;
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.permissionsPanel}
+      title="Permissions"
+      subtitle="Ubume policy guards. Recommended for local coding: On request + Workspace write."
+      items={items}
+      limit={items.length}
+      onSelect={(value) => onSelect(value as PermissionsPanelAction)}
+      onCancel={onCancel}
+    />
+  );
+}