ubume 0.1.0

package/src/ui/panels/ProviderSetupPrompt.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { FOCUS_IDS } from "../input/focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ProviderSetupPromptProps {
+  providerLabel: string;
+  executable: string;
+  installCommand: string | null;
+  setupCommand: string;
+  onInstall: () => void;
+  onCancel: () => void;
+}
+
+export function ProviderSetupPrompt({
+  providerLabel,
+  executable,
+  installCommand,
+  setupCommand,
+  onInstall,
+  onCancel,
+}: ProviderSetupPromptProps) {
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box flexDirection="column" paddingX={1} marginBottom={1}>
+        <Text color="yellow" bold>{providerLabel} is not ready</Text>
+        <Text color="gray">Ubume could not find `{executable}` on this computer.</Text>
+        <Text color="gray">
+          {installCommand
+            ? `Install it and open ${providerLabel}'s sign-in/setup flow?`
+            : `Install ${providerLabel} manually, then retry the launch?`}
+        </Text>
+        <Text color="gray">Credentials stay in the provider’s own CLI and are not stored by Ubume.</Text>
+        {installCommand && <Text color="gray">Setup command: {setupCommand}</Text>}
+      </Box>
+      <SelectionPanel
+        focusId={FOCUS_IDS.providerSetup}
+        title={`Set up ${providerLabel}`}
+        subtitle="Enter starts installation and setup · Esc cancels"
+        items={installCommand ? [
+          { label: `Install ${providerLabel} and sign in`, value: "install" },
+          { label: "Cancel", value: "cancel" },
+        ] : [
+          { label: "I installed it — retry launch", value: "retry" },
+          { label: "Cancel", value: "cancel" },
+        ]}
+        onSelect={(value) => value === "install" || value === "retry" ? onInstall() : onCancel()}
+        onCancel={onCancel}
+      />
+    </Box>
+  );
+}

package/src/ui/panels/ReasoningPicker.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { type ReasoningEffortCapability } from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ReasoningPickerProps {
+  currentReasoning: string;
+  currentModel: string;
+  reasoningLevels: readonly ReasoningEffortCapability[];
+  defaultReasoning: string | null;
+  sourceLabel?: string | null;
+  onSelect: (reasoning: string) => void;
+  onCancel: () => void;
+}
+
+export function ReasoningPicker({
+  currentReasoning,
+  currentModel,
+  reasoningLevels,
+  defaultReasoning,
+  sourceLabel,
+  onSelect,
+  onCancel,
+}: ReasoningPickerProps) {
+  const items = reasoningLevels.map((reasoning) => ({
+    label: reasoning.id === currentReasoning ? `${reasoning.label}  ✓` : reasoning.label,
+    value: reasoning.id,
+  }));
+
+  const baseSubtitle = defaultReasoning
+    ? `Suggested for ${currentModel}: ${formatReasoningLabel(defaultReasoning)}`
+    : `Detected levels for ${currentModel}`;
+  const subtitle = sourceLabel ? `${baseSubtitle} · ${sourceLabel}` : baseSubtitle;
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.reasoningPicker}
+      title="Select reasoning level"
+      subtitle={subtitle}
+      items={items}
+      onSelect={onSelect}
+      onCancel={onCancel}
+    />
+  );
+}

package/src/ui/panels/ResumePicker.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { ConversationListEntry } from "../../core/workspace/conversationStore.js";
+import { clampVisualText, usePanelLayout } from "../layout.js";
+import { useTheme } from "../theme.js";
+import { calculateResponsivePickerViewport } from "./responsivePickerViewport.js";
+
+interface ResumePickerProps {
+  conversations: readonly ConversationListEntry[];
+  onSelect: (id: string) => void;
+  onCancel: () => void;
+}
+
+function activityLabel(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "Unknown time";
+  const now = new Date();
+  const sameDay = date.toDateString() === now.toDateString();
+  if (sameDay) return `Today, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) return `Yesterday, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+
+function providerLabel(providerId: string | null): string {
+  switch (providerId) {
+    case "local": return "Local";
+    case "anthropic": return "Anthropic";
+    case "google": return "Google";
+    case "mistral": return "Mistral";
+    case "codexa-native": return "ubume-PyTorch";
+    case "codexa-cupy": return "CuPy";
+    case "antigravity": return "Antigravity";
+    case "openai": return "OpenAI";
+    default: return "Unavailable";
+  }
+}
+
+export function ResumePicker({ conversations, onSelect, onCancel }: ResumePickerProps) {
+  const theme = useTheme();
+  const panelLayout = usePanelLayout();
+  const { isFocused } = useFocus({ id: "resume-picker", autoFocus: true });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const availableRows = Math.max(1, panelLayout?.availableRows ?? 12);
+  const width = Math.max(1, (panelLayout?.availableCols ?? 80) - 2);
+  const viewport = useMemo(() => calculateResponsivePickerViewport({
+    itemCount: conversations.length,
+    selectedIndex,
+    availableRows,
+    chromeRows: availableRows >= 3 ? 2 : 0,
+    scrollOffset,
+  }), [availableRows, conversations.length, scrollOffset, selectedIndex]);
+
+  useEffect(() => setSelectedIndex((index) => Math.max(0, Math.min(index, conversations.length - 1))), [conversations.length]);
+  useEffect(() => setScrollOffset(viewport.start), [viewport.start]);
+
+  const move = (index: number) => setSelectedIndex(Math.max(0, Math.min(index, conversations.length - 1)));
+  useInput((input, key) => {
+    if (key.escape) return onCancel();
+    if (key.return) {
+      const selected = conversations[selectedIndex];
+      if (selected) onSelect(selected.id);
+      return;
+    }
+    if (key.upArrow || input === "k") return move(selectedIndex - 1);
+    if (key.downArrow || input === "j") return move(selectedIndex + 1);
+    if (key.home) return move(0);
+    if (key.end) return move(conversations.length - 1);
+    if (key.pageUp) return move(selectedIndex - Math.max(1, viewport.capacity));
+    if (key.pageDown) return move(selectedIndex + Math.max(1, viewport.capacity));
+  }, { isActive: isFocused });
+
+  return (
+    <Box borderStyle={availableRows >= 3 ? "round" : undefined} borderColor={theme.borderFocused} paddingX={availableRows >= 3 ? 1 : 0} width="100%" flexDirection="column" overflow="hidden">
+      {availableRows >= 3 && <Text color={theme.accent} bold>Resume Conversation{conversations.length > 0 ? ` · ${selectedIndex + 1}/${conversations.length}` : ""}</Text>}
+      {conversations.length === 0 && <Text color={theme.textMuted}>No previous conversations found.</Text>}
+      {conversations.slice(viewport.start, viewport.end).map((conversation, offset) => {
+        const index = viewport.start + offset;
+        const selected = index === selectedIndex;
+        const metadata = `${activityLabel(conversation.updatedAt)} · ${conversation.modelId} · ${providerLabel(conversation.providerId)} · ${conversation.messageCount} messages`;
+        return <Text key={conversation.id} color={selected ? theme.accent : theme.textMuted} bold={selected} wrap="truncate">
+          {selected ? "> " : "  "}{clampVisualText(`${conversation.title} — ${metadata}`, Math.max(1, width - 2))}
+        </Text>;
+      })}
+      {availableRows >= 3 && <Text color={theme.textDim}>↑↓ navigate · Enter resume · Esc cancel</Text>}
+    </Box>
+  );
+}

package/src/ui/panels/SelectionPanel.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { clampVisualText, usePanelLayout } from "../layout.js";
+import { useTheme } from "../theme.js";
+import { calculateResponsivePickerViewport } from "./responsivePickerViewport.js";
+
+interface SelectionPanelProps {
+  focusId: string;
+  title: string;
+  subtitle: string;
+  items: Array<{ label: string; value: string }>;
+  limit?: number;
+  initialValue?: string;
+  onSelect: (value: string) => void;
+  onHighlight?: (value: string) => void;
+  onCancel: () => void;
+}
+
+function clampIndex(index: number, count: number): number {
+  return count <= 0 ? 0 : Math.max(0, Math.min(count - 1, index));
+}
+
+export function SelectionPanel({
+  focusId,
+  title,
+  subtitle,
+  items,
+  initialValue,
+  onSelect,
+  onHighlight,
+  onCancel,
+}: SelectionPanelProps) {
+  const theme = useTheme();
+  const panelLayout = usePanelLayout();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const initialIndex = initialValue ? items.findIndex((item) => item.value === initialValue) : -1;
+    return initialIndex >= 0 ? initialIndex : 0;
+  });
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const availableRows = Math.max(1, panelLayout?.availableRows ?? 12);
+  const innerWidth = Math.max(1, (panelLayout?.availableCols ?? 80) - 2);
+
+  const viewport = useMemo(() => calculateResponsivePickerViewport({
+    itemCount: items.length,
+    selectedIndex,
+    availableRows,
+    chromeRows: availableRows >= 3 ? 2 : 0,
+    scrollOffset,
+  }), [availableRows, items.length, scrollOffset, selectedIndex]);
+
+  useEffect(() => {
+    setSelectedIndex((current) => clampIndex(current, items.length));
+  }, [items.length]);
+
+  useEffect(() => {
+    setScrollOffset(viewport.start);
+  }, [viewport.start]);
+
+  const highlightIndex = (index: number) => {
+    const nextIndex = clampIndex(index, items.length);
+    setSelectedIndex(nextIndex);
+    const item = items[nextIndex];
+    if (item) onHighlight?.(item.value);
+  };
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.return) {
+      const item = items[viewport.selectedIndex];
+      if (item) onSelect(item.value);
+      return;
+    }
+    if (key.home) {
+      highlightIndex(0);
+      return;
+    }
+    if (key.end) {
+      highlightIndex(items.length - 1);
+      return;
+    }
+    if (key.pageUp) {
+      highlightIndex(selectedIndex - Math.max(1, viewport.capacity));
+      return;
+    }
+    if (key.pageDown) {
+      highlightIndex(selectedIndex + Math.max(1, viewport.capacity));
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      highlightIndex(selectedIndex - 1);
+      return;
+    }
+    if (key.downArrow || input === "j") {
+      highlightIndex(selectedIndex + 1);
+    }
+  }, { isActive: isFocused });
+
+  const visibleItems = items.slice(viewport.start, viewport.end);
+  const titleText = viewport.hasOverflow
+    ? `${title} · ${viewport.selectedIndex + 1}/${items.length}`
+    : title;
+  const heading = innerWidth >= 70 ? `${titleText}  ${subtitle}` : titleText;
+
+  return (
+    <Box
+      borderStyle={availableRows >= 3 ? "round" : undefined}
+      borderColor={theme.borderFocused}
+      paddingX={availableRows >= 3 ? 1 : 0}
+      width="100%"
+      flexDirection="column"
+      overflow="hidden"
+    >
+      {availableRows >= 3 && (
+        <Text color={theme.accent} bold wrap="truncate">
+          {clampVisualText(heading, innerWidth)}
+        </Text>
+      )}
+      {visibleItems.map((item, index) => {
+        const actualIndex = viewport.start + index;
+        const selected = actualIndex === viewport.selectedIndex;
+        return (
+          <Box key={item.value} width="100%" overflow="hidden">
+            <Text color={selected ? theme.accent : theme.textMuted} bold={selected} wrap="truncate">
+              {selected ? "> " : "  "}{clampVisualText(item.label, Math.max(1, innerWidth - 2))}
+            </Text>
+          </Box>
+        );
+      })}
+      {availableRows >= 3 && (
+        <Text color={theme.textDim}>↑↓ move · Enter confirm · Esc close</Text>
+      )}
+    </Box>
+  );
+}

package/src/ui/panels/SettingsPanel.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { SettingDefinition } from "../../config/settings.js";
+import type { FocusTargetId } from "../input/focus.js";
+import { useTheme } from "../theme.js";
+
+export interface SettingsPanelProps<TKey extends string> {
+  focusId: FocusTargetId;
+  title?: string;
+  settings: readonly SettingDefinition<TKey, string>[];
+  values: Record<TKey, string>;
+  onSave: (values: Record<TKey, string>) => void;
+  onCancel: () => void;
+}
+
+function cycleOption<TKey extends string>(
+  definition: SettingDefinition<TKey, string>,
+  currentValue: string,
+  direction: -1 | 1,
+): string {
+  const currentIndex = definition.options.findIndex((option) => option.value === currentValue);
+  const safeIndex = currentIndex >= 0 ? currentIndex : 0;
+  const nextIndex = (safeIndex + direction + definition.options.length) % definition.options.length;
+  return definition.options[nextIndex]?.value ?? currentValue;
+}
+
+export function SettingsPanel<TKey extends string>({
+  focusId,
+  title = "Settings",
+  settings,
+  values,
+  onSave,
+  onCancel,
+}: SettingsPanelProps<TKey>) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [draftValues, setDraftValues] = useState<Record<TKey, string>>(() => ({ ...values }));
+
+  const activeSetting = settings[selectedIndex] ?? settings[0];
+  const subtitle = useMemo(() => {
+    const instructions = "↑↓ setting  ←→ option  Esc to close · Enter to confirm";
+    if (!activeSetting?.description) {
+      return instructions;
+    }
+
+    return `${instructions}\n${activeSetting.description}`;
+  }, [activeSetting]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.return) {
+      onSave(draftValues);
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex((current) => Math.min(settings.length - 1, current + 1));
+      return;
+    }
+
+    if (key.leftArrow || key.rightArrow) {
+      const direction: -1 | 1 = key.leftArrow ? -1 : 1;
+      const definition = settings[selectedIndex];
+      if (!definition) {
+        return;
+      }
+
+      setDraftValues((current) => ({
+        ...current,
+        [definition.key]: cycleOption(definition, current[definition.key], direction),
+      }));
+      return;
+    }
+
+    if (!input || key.ctrl || key.meta) {
+      return;
+    }
+  }, { isActive: isFocused });
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.border}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+        flexDirection="column"
+      >
+        <Box>
+          <Text color={theme.accent} bold>{title}  </Text>
+          <Text color={theme.textMuted}>{subtitle.split("\n")[0]}</Text>
+        </Box>
+        {activeSetting?.description && (
+          <Box marginTop={1}>
+            <Text color={theme.textDim}>{activeSetting.description}</Text>
+          </Box>
+        )}
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.borderFocused}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        {settings.map((setting, index) => {
+          const isSelectedRow = index === selectedIndex;
+          const currentValue = draftValues[setting.key];
+
+          return (
+            <Box key={setting.key} flexDirection="row" overflow="hidden">
+              <Box width={3} flexShrink={0}>
+                <Text color={isSelectedRow ? theme.accent : theme.textDim}>{isSelectedRow ? "▸ " : "  "}</Text>
+              </Box>
+              <Box width={20} flexShrink={0} overflow="hidden">
+                <Text color={isSelectedRow ? theme.text : theme.textMuted} bold={isSelectedRow}>
+                  {setting.label}
+                </Text>
+              </Box>
+              <Box flexDirection="row" flexWrap="nowrap" flexGrow={1} flexShrink={1} overflow="hidden">
+                {setting.options.map((option, optionIndex) => {
+                  const isActiveOption = option.value === currentValue;
+                  const optionText = isActiveOption ? `[${option.label}]` : option.label;
+                  return (
+                    <Text
+                      key={option.value}
+                      color={isActiveOption ? (isSelectedRow ? theme.accent : theme.text) : theme.textDim}
+                      bold={isActiveOption}
+                    >
+                      {optionIndex > 0 ? "  " : ""}
+                      {optionText}
+                    </Text>
+                  );
+                })}
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/panels/TextEntryPanel.tsx

@@ -0,0 +1,139 @@
+import React, { useMemo, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import type { FocusTargetId } from "../input/focus.js";
+import { useTheme } from "../theme.js";
+import { stripMouseEscapes } from "../input/inputBuffer.js";
+
+interface TextEntryPanelProps {
+  focusId: FocusTargetId;
+  title: string;
+  subtitle: string;
+  placeholder?: string;
+  initialValue?: string;
+  inputLabel?: string;
+  footerHint?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+function insertAt(value: string, index: number, text: string): string {
+  return value.slice(0, index) + text + value.slice(index);
+}
+
+export function TextEntryPanel({
+  focusId,
+  title,
+  subtitle,
+  placeholder = "",
+  initialValue = "",
+  inputLabel = "Input",
+  footerHint = "Esc to close · Enter to confirm",
+  onSubmit,
+  onCancel,
+}: TextEntryPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+  const [value, setValue] = useState(initialValue);
+  const [cursor, setCursor] = useState(initialValue.length);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.return) {
+      onSubmit(value.trim());
+      return;
+    }
+
+    if (key.leftArrow) {
+      setCursor((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (key.rightArrow) {
+      setCursor((current) => Math.min(value.length, current + 1));
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      if (cursor === 0) return;
+      setValue((current) => current.slice(0, cursor - 1) + current.slice(cursor));
+      setCursor((current) => Math.max(0, current - 1));
+      return;
+    }
+
+    if (!input || key.ctrl || key.meta) {
+      return;
+    }
+
+    const filtered = stripMouseEscapes(input);
+    if (!filtered) return;
+    setValue((current) => insertAt(current, cursor, filtered));
+    setCursor((current) => current + filtered.length);
+  }, { isActive: isFocused });
+
+  const display = useMemo(() => {
+    if (!value) {
+      return {
+        before: "",
+        current: placeholder || " ",
+        after: "",
+        isPlaceholder: true,
+      };
+    }
+
+    const safeCursor = Math.max(0, Math.min(cursor, value.length));
+    return {
+      before: value.slice(0, safeCursor),
+      current: value[safeCursor] ?? " ",
+      after: value.slice(safeCursor + (safeCursor < value.length ? 1 : 0)),
+      isPlaceholder: false,
+    };
+  }, [cursor, placeholder, value]);
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.border}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+      >
+        <Text color={theme.accent} bold>{title}  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.borderFocused}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        <Box>
+          <Text color={theme.text}>{inputLabel}: </Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.before}</Text>
+          <Text
+            backgroundColor={theme.text}
+            color={theme.surface}
+          >
+            {display.current}
+          </Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.after}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.textDim}>{footerHint}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export function measureTextEntryPanelRows(): number {
+  return 13;
+}

package/src/ui/panels/ThemePicker.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { AVAILABLE_THEMES, formatThemeLabel } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { SelectionPanel } from "./SelectionPanel.js";
+
+interface ThemePickerProps {
+  currentTheme: string;
+  onSelect: (themeId: string) => void;
+  onHighlight?: (themeId: string) => void;
+  onCancel: () => void;
+}
+
+export function ThemePicker({ currentTheme, onSelect, onHighlight, onCancel }: ThemePickerProps) {
+  const items = AVAILABLE_THEMES.map((theme) => ({
+    label: theme.id === currentTheme ? `${formatThemeLabel(theme.id)}  ✓` : formatThemeLabel(theme.id),
+    value: theme.id,
+  }));
+
+  return (
+    <SelectionPanel
+      focusId={FOCUS_IDS.themePicker}
+      title="Select visual theme"
+      subtitle="Use arrow keys and Enter to switch. Esc closes the panel."
+      items={items}
+      limit={8}
+      initialValue={currentTheme}
+      onSelect={onSelect}
+      onHighlight={onHighlight}
+      onCancel={onCancel}
+    />
+  );
+}