tinker-agent 1.0.65

package/src/tui/components/model-picker.tsx

@@ -0,0 +1,142 @@
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+import type { ModelProfile } from "../../cli/model-profiles";
+
+export type ModelPickerProps = {
+  profiles: readonly ModelProfile[];
+  currentProfileName?: string;
+  isSwitching?: boolean;
+  error?: string;
+  onCancel: () => void;
+  onSelect: (profile: ModelProfile) => void;
+};
+
+export function ModelPicker(props: ModelPickerProps) {
+  if (props.profiles.length === 0) {
+    throw new Error("ModelPicker requires at least one profile.");
+  }
+
+  return <ModelPickerContent {...props} />;
+}
+
+function ModelPickerContent(props: ModelPickerProps) {
+  const [selectedIndex, setSelectedIndex] = useState(() =>
+    initialSelectedIndex(props.profiles, props.currentProfileName),
+  );
+
+  useInput(
+    (input, key) => {
+      if (props.isSwitching === true) {
+        return;
+      }
+
+      if (key.escape) {
+        props.onCancel();
+        return;
+      }
+
+      if (key.return) {
+        const selected = props.profiles[selectedIndex];
+        if (selected !== undefined) {
+          props.onSelect(selected);
+        }
+        return;
+      }
+
+      const direction =
+        key.upArrow || (input === "k" && !key.ctrl && !key.meta)
+          ? -1
+          : key.downArrow || (input === "j" && !key.ctrl && !key.meta)
+            ? 1
+            : 0;
+      if (direction === 0) {
+        return;
+      }
+
+      setSelectedIndex((current) =>
+        clamp(current + direction, 0, props.profiles.length - 1),
+      );
+    },
+    { isActive: props.isSwitching !== true },
+  );
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>Switch model profile</Text>
+      <Text dimColor>
+        {props.isSwitching === true
+          ? "Switching…"
+          : "↑/↓ or j/k to move · Enter to select · Esc to cancel"}
+      </Text>
+      {props.profiles.map((profile, index) => (
+        <ProfileOption
+          key={profile.name}
+          profile={profile}
+          isSelected={index === selectedIndex}
+          isCurrent={profile.name === props.currentProfileName}
+        />
+      ))}
+      {props.error === undefined ? null : (
+        <Text color="red" wrap="truncate-end">
+          Switch failed: {props.error}
+        </Text>
+      )}
+      <Text dimColor>
+        Switching creates a new session; the current session is preserved.
+      </Text>
+    </Box>
+  );
+}
+
+function ProfileOption(props: {
+  profile: ModelProfile;
+  isSelected: boolean;
+  isCurrent: boolean;
+}) {
+  const marker = props.isSelected ? "❯ " : "  ";
+
+  return (
+    <Box flexDirection="column">
+      <Text
+        color={props.isSelected ? "cyan" : undefined}
+        bold={props.isSelected}
+        wrap="truncate-end"
+      >
+        {marker}
+        {props.profile.name}
+        {props.isCurrent ? " (current)" : ""}
+      </Text>
+      <Box marginLeft={2} overflow="hidden">
+        <Text dimColor wrap="truncate-end">
+          {props.profile.model} · {formatTokenCount(props.profile.contextWindowTokens)}{" "}
+          context · {formatTokenCount(props.profile.maxSupportedOutputTokens)} output
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function initialSelectedIndex(
+  profiles: readonly ModelProfile[],
+  currentProfileName?: string,
+): number {
+  if (currentProfileName === undefined) {
+    return 0;
+  }
+  const index = profiles.findIndex((p) => p.name === currentProfileName);
+  return index === -1 ? 0 : index;
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.min(Math.max(value, minimum), maximum);
+}
+
+function formatTokenCount(tokens: number): string {
+  if (tokens >= 1_048_576) {
+    return `${(tokens / 1_048_576).toFixed(0)}M`;
+  }
+  if (tokens >= 1_024) {
+    return `${(tokens / 1_024).toFixed(0)}K`;
+  }
+  return String(tokens);
+}

package/src/tui/components/prompt-input.tsx

@@ -0,0 +1,432 @@
+import os from "node:os";
+import path from "node:path";
+import { Box, Text, useInput, usePaste } from "ink";
+import { useState } from "react";
+import type { ContextUsageSnapshot } from "../../agent/context-meter";
+import { formatContextUsageLine } from "../context-format";
+import {
+  backspace,
+  createLineEditorState,
+  deleteForward,
+  deleteToLineStart,
+  insert,
+  type LineEditorState,
+  moveDown,
+  moveLeft,
+  moveRight,
+  moveToLineEnd,
+  moveToLineStart,
+  moveUp,
+  splitAtCursor,
+} from "../line-editor";
+import { matchSlashCommands, type SlashCommand } from "../slash-commands";
+
+export type PromptInputProps = {
+  modelName: string;
+  workspaceRoot: string;
+  gitBranch?: string;
+  contextUsage?: ContextUsageSnapshot;
+  isDisabled?: boolean;
+  placeholder?: string;
+  history?: { entries: readonly string[] };
+  commands?: readonly SlashCommand[];
+  onSubmit: (value: string) => void;
+};
+
+type HistoryNavigation = {
+  index: number;
+  originalDraft: LineEditorState;
+  browsing: boolean;
+};
+
+type PromptInputState = {
+  editor: LineEditorState;
+  navigation?: HistoryNavigation;
+  suggestionIndex: number;
+  suggestionsDismissed: boolean;
+};
+
+function createPromptInputState(value = ""): PromptInputState {
+  return {
+    editor: createLineEditorState(value),
+    suggestionIndex: 0,
+    suggestionsDismissed: false,
+  };
+}
+
+export function PromptInput(props: PromptInputProps) {
+  const [state, setState] = useState<PromptInputState>(createPromptInputState);
+
+  const suggestions = state.suggestionsDismissed
+    ? []
+    : matchSlashCommands(state.editor.value, props.commands);
+  const selectedIndex =
+    suggestions.length === 0
+      ? 0
+      : Math.min(state.suggestionIndex, suggestions.length - 1);
+
+  const submit = (value: string) => {
+    props.onSubmit(value);
+    setState(createPromptInputState());
+  };
+
+  const updateEditor = (update: (editor: LineEditorState) => LineEditorState) => {
+    setState((current) => {
+      const editor = update(current.editor);
+
+      if (!editorChanged(current.editor, editor)) {
+        return current;
+      }
+
+      return applyEditorChange(current, editor);
+    });
+  };
+
+  const navigateUp = () => {
+    setState((current) => {
+      const entries = props.history?.entries ?? [];
+
+      if (current.navigation?.browsing === true) {
+        return navigateHistoryUp(current, entries);
+      }
+
+      const editor = moveUp(current.editor);
+      if (editorChanged(current.editor, editor)) {
+        return applyEditorChange(current, editor);
+      }
+
+      return navigateHistoryUp(current, entries);
+    });
+  };
+
+  const navigateDown = () => {
+    setState((current) => {
+      const entries = props.history?.entries ?? [];
+
+      if (current.navigation?.browsing === true) {
+        return navigateHistoryDown(current, entries);
+      }
+
+      const editor = moveDown(current.editor);
+      return editorChanged(current.editor, editor)
+        ? applyEditorChange(current, editor)
+        : navigateHistoryDown(current, entries);
+    });
+  };
+
+  useInput(
+    (input, key) => {
+      const selected = suggestions[selectedIndex];
+
+      if (key.return) {
+        if (selected !== undefined) {
+          submit(`/${selected.name}`);
+          return;
+        }
+
+        submit(state.editor.value);
+        return;
+      }
+
+      if (key.tab) {
+        if (selected !== undefined) {
+          setState(createPromptInputState(`/${selected.name} `));
+        }
+        return;
+      }
+
+      if (key.escape) {
+        if (suggestions.length > 0) {
+          setState((current) => ({ ...current, suggestionsDismissed: true }));
+        }
+        return;
+      }
+
+      if (key.upArrow) {
+        if (suggestions.length > 0) {
+          setState((current) => ({
+            ...current,
+            suggestionIndex:
+              (selectedIndex + suggestions.length - 1) % suggestions.length,
+          }));
+          return;
+        }
+
+        navigateUp();
+        return;
+      }
+
+      if (key.downArrow) {
+        if (suggestions.length > 0) {
+          setState((current) => ({
+            ...current,
+            suggestionIndex: (selectedIndex + 1) % suggestions.length,
+          }));
+          return;
+        }
+
+        navigateDown();
+        return;
+      }
+
+      if (key.leftArrow) {
+        updateEditor(moveLeft);
+        return;
+      }
+
+      if (key.rightArrow) {
+        updateEditor(moveRight);
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        updateEditor(backspace);
+        return;
+      }
+
+      if (key.ctrl) {
+        if (input === "a") {
+          updateEditor(moveToLineStart);
+        } else if (input === "e") {
+          updateEditor(moveToLineEnd);
+        } else if (input === "d") {
+          updateEditor(deleteForward);
+        } else if (input === "u") {
+          updateEditor(deleteToLineStart);
+        }
+        return;
+      }
+
+      if (key.meta || key.pageUp || key.pageDown) {
+        return;
+      }
+
+      if (input !== "") {
+        updateEditor((editor) => insert(editor, normalizeLineBreaks(input)));
+      }
+    },
+    { isActive: props.isDisabled !== true },
+  );
+
+  usePaste(
+    (text) => {
+      updateEditor((editor) => insert(editor, normalizeLineBreaks(text)));
+    },
+    { isActive: props.isDisabled !== true },
+  );
+
+  const showSuggestions = suggestions.length > 0 && props.isDisabled !== true;
+
+  return (
+    <Box flexDirection="column">
+      <Box width="100%" borderStyle="single" borderLeft={false} borderRight={false}>
+        {renderEditor(state.editor, props)}
+      </Box>
+      {showSuggestions ? null : (
+        <Box>
+          <Text dimColor>
+            {props.modelName} · {formatWorkspacePath(props.workspaceRoot)}
+            {props.gitBranch === undefined ? null : ` · ${props.gitBranch}`}
+          </Text>
+          {props.contextUsage === undefined ? null : (
+            <>
+              <Text dimColor> · </Text>
+              <Text
+                color={contextColor(props.contextUsage.pressure)}
+                dimColor={props.contextUsage.pressure === "normal"}
+              >
+                {formatContextUsageLine(props.contextUsage)}
+              </Text>
+            </>
+          )}
+        </Box>
+      )}
+      {showSuggestions ? (
+        <Box flexDirection="column">
+          {suggestions.map((command, index) => (
+            <Text key={command.name}>
+              {index === selectedIndex ? "❯ " : "  "}/{command.name}
+              <Text dimColor> {command.description}</Text>
+            </Text>
+          ))}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+function contextColor(
+  pressure: ContextUsageSnapshot["pressure"],
+): "yellow" | "red" | undefined {
+  if (pressure === "blocked") {
+    return "red";
+  }
+  return pressure === "triggered" ? "yellow" : undefined;
+}
+
+function formatWorkspacePath(workspaceRoot: string): string {
+  const home = os.homedir();
+  const relative = path.relative(home, workspaceRoot);
+
+  if (relative === "") {
+    return home;
+  }
+
+  const isInsideHome =
+    relative !== ".." &&
+    !relative.startsWith(`..${path.sep}`) &&
+    !path.isAbsolute(relative);
+
+  return isInsideHome ? `~${path.sep}${relative}` : workspaceRoot;
+}
+
+function renderEditor(editor: LineEditorState, props: PromptInputProps) {
+  if (editor.value === "") {
+    const placeholder = props.placeholder ?? "";
+
+    if (props.isDisabled === true) {
+      return <Text dimColor>{placeholder}</Text>;
+    }
+
+    if (placeholder === "") {
+      return <Text inverse> </Text>;
+    }
+
+    return (
+      <Text>
+        <Text inverse>{placeholder.slice(0, 1)}</Text>
+        <Text dimColor>{placeholder.slice(1)}</Text>
+      </Text>
+    );
+  }
+
+  if (props.isDisabled === true) {
+    return <Text>{editor.value}</Text>;
+  }
+
+  const { before, at, after } = splitAtCursor(editor);
+  if (at === "\n") {
+    return (
+      <Text>
+        {before}
+        <Text inverse> </Text>
+        {"\n"}
+        {after}
+      </Text>
+    );
+  }
+
+  return (
+    <Text>
+      {before}
+      <Text inverse>{at}</Text>
+      {after}
+    </Text>
+  );
+}
+
+function normalizeLineBreaks(value: string): string {
+  return value.replace(/\r\n?/g, "\n");
+}
+
+function editorChanged(before: LineEditorState, after: LineEditorState): boolean {
+  return before.value !== after.value || before.cursor !== after.cursor;
+}
+
+function applyEditorChange(
+  state: PromptInputState,
+  editor: LineEditorState,
+): PromptInputState {
+  const valueChanged = state.editor.value !== editor.value;
+  let navigation = state.navigation;
+
+  if (valueChanged) {
+    navigation = undefined;
+  } else if (navigation !== undefined) {
+    navigation = { ...navigation, browsing: false };
+  }
+
+  return {
+    ...state,
+    editor,
+    navigation,
+    suggestionIndex: valueChanged ? 0 : state.suggestionIndex,
+    suggestionsDismissed: valueChanged ? false : state.suggestionsDismissed,
+  };
+}
+
+function navigateHistoryUp(
+  state: PromptInputState,
+  entries: readonly string[],
+): PromptInputState {
+  if (entries.length === 0) {
+    return state;
+  }
+
+  if (state.navigation === undefined) {
+    const index = entries.length - 1;
+    return showHistoryEntry(state, entries, {
+      index,
+      originalDraft: state.editor,
+      browsing: true,
+    });
+  }
+
+  if (state.navigation.index === 0) {
+    return {
+      ...state,
+      navigation: { ...state.navigation, browsing: true },
+    };
+  }
+
+  const navigation = {
+    ...state.navigation,
+    index: state.navigation.index - 1,
+    browsing: true,
+  };
+  return showHistoryEntry(state, entries, navigation);
+}
+
+function navigateHistoryDown(
+  state: PromptInputState,
+  entries: readonly string[],
+): PromptInputState {
+  const navigation = state.navigation;
+  if (navigation === undefined) {
+    return state;
+  }
+
+  if (navigation.index >= entries.length - 1) {
+    return {
+      editor: navigation.originalDraft,
+      suggestionIndex: 0,
+      suggestionsDismissed: false,
+    };
+  }
+
+  const nextNavigation = {
+    ...navigation,
+    index: navigation.index + 1,
+    browsing: true,
+  };
+  return showHistoryEntry(state, entries, nextNavigation);
+}
+
+function showHistoryEntry(
+  state: PromptInputState,
+  entries: readonly string[],
+  navigation: HistoryNavigation,
+): PromptInputState {
+  const entry = entries[navigation.index];
+  if (entry === undefined) {
+    throw new Error(`History entry ${navigation.index} does not exist`);
+  }
+
+  return {
+    ...state,
+    editor: createLineEditorState(entry),
+    navigation,
+    suggestionIndex: 0,
+    suggestionsDismissed: true,
+  };
+}