privateer-agent 0.2.1 → 0.3.0

package/src/components/Onboarding.tsx

@@ -1,203 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-import type { Config, ProviderName, ProviderConfig } from "../config/schema.ts";
-import { PROVIDER_LIST, PROVIDER_META, type ProviderMeta } from "../providers/catalog.ts";
-import { providerRequiresKey } from "../providers/registry.ts";
-import { ModelPicker } from "./ModelPicker.tsx";
-import { theme } from "./theme.ts";
-import { WELCOME } from "./figures.ts";
-
-// Which of the just-entered providers are actually usable (have a key, or are keyless).
-function readyProviders(creds: Partial<Record<ProviderName, ProviderConfig>>): ProviderName[] {
-  return (Object.keys(creds) as ProviderName[]).filter((name) =>
-    providerRequiresKey(name) ? Boolean(creds[name]?.apiKey) : true,
-  );
-}
-
-export interface OnboardingResult {
-  providers: Partial<Record<ProviderName, ProviderConfig>>;
-  defaultModel: string;
-}
-
-// Step 1 — multi-select the providers to configure. Arrows/jk move, space toggles,
-// enter confirms (needs at least one).
-function SelectStep({
-  initial,
-  onConfirm,
-}: {
-  initial: Set<ProviderName>;
-  onConfirm: (selected: ProviderMeta[]) => void;
-}) {
-  const [cursor, setCursor] = useState(0);
-  const [selected, setSelected] = useState<Set<ProviderName>>(new Set(initial));
-
-  useInput((input, key) => {
-    if (key.upArrow || input === "k") setCursor((c) => (c - 1 + PROVIDER_LIST.length) % PROVIDER_LIST.length);
-    else if (key.downArrow || input === "j") setCursor((c) => (c + 1) % PROVIDER_LIST.length);
-    else if (input === " ") {
-      const name = PROVIDER_LIST[cursor].name;
-      setSelected((s) => {
-        const next = new Set(s);
-        next.has(name) ? next.delete(name) : next.add(name);
-        return next;
-      });
-    } else if (key.return && selected.size > 0) {
-      onConfirm(PROVIDER_LIST.filter((p) => selected.has(p.name)));
-    }
-  });
-
-  return (
-    <Box flexDirection="column">
-      <Text color={theme.dim}>
-        Select the providers you want to use — <Text color={theme.accent}>space</Text> to toggle,{" "}
-        <Text color={theme.accent}>enter</Text> to continue.
-      </Text>
-      <Box flexDirection="column" marginTop={1}>
-        {PROVIDER_LIST.map((p, i) => {
-          const on = selected.has(p.name);
-          const active = i === cursor;
-          return (
-            <Text key={p.name} color={active ? theme.accent : undefined}>
-              {active ? "❯ " : "  "}
-              {on ? "◉" : "○"} {p.label.padEnd(16)}
-              <Text color={theme.dim}> {p.requiresKey ? `key: ${p.keyHint}` : p.keyHint}</Text>
-            </Text>
-          );
-        })}
-      </Box>
-      {selected.size === 0 && (
-        <Text color={theme.dim}>{"\n"}Select at least one provider to continue.</Text>
-      )}
-    </Box>
-  );
-}
-
-// Step 2 — walk the chosen providers one at a time, collecting a masked API key (or a
-// base URL for keyless/local providers). Empty key = skip that provider's credential.
-function KeyStep({
-  providers,
-  onDone,
-}: {
-  providers: ProviderMeta[];
-  onDone: (creds: Partial<Record<ProviderName, ProviderConfig>>) => void;
-}) {
-  const [index, setIndex] = useState(0);
-  const [value, setValue] = useState("");
-  const [creds, setCreds] = useState<Partial<Record<ProviderName, ProviderConfig>>>({});
-  const meta = providers[index];
-
-  function submit(raw: string) {
-    const v = raw.trim();
-    const entry: ProviderConfig = meta.requiresKey
-      ? v
-        ? { apiKey: v }
-        : {}
-      : { baseURL: v || meta.baseURLDefault };
-    const nextCreds = { ...creds, [meta.name]: entry };
-    setCreds(nextCreds);
-    setValue("");
-    if (index + 1 < providers.length) setIndex(index + 1);
-    else onDone(nextCreds);
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Text color={theme.dim}>
-        Step {index + 1} of {providers.length} —{" "}
-        <Text color={theme.accent}>{meta.label}</Text>
-      </Text>
-      <Text color={theme.dim}>
-        {meta.requiresKey
-          ? `Paste your API key (${meta.keyHint}). Enter to skip.`
-          : `Base URL for Ollama. Enter to use the default.`}
-      </Text>
-      <Box marginTop={1} borderStyle="round" borderColor={theme.accent} paddingX={1}>
-        <Text color={theme.accent}>{"> "}</Text>
-        <TextInput
-          value={value}
-          onChange={setValue}
-          onSubmit={submit}
-          mask={meta.requiresKey ? "*" : undefined}
-          placeholder={meta.requiresKey ? "sk-…" : meta.baseURLDefault}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-// Step 3 — pick the default model from the providers just configured, with the model
-// list fetched live using the entered keys. Esc (or a fetch failure) falls back to the
-// provider's catalog default, so onboarding always completes.
-function ModelStep({
-  creds,
-  ready,
-  fallback,
-  onDone,
-}: {
-  creds: Partial<Record<ProviderName, ProviderConfig>>;
-  ready: ProviderName[];
-  fallback: string;
-  onDone: (spec: string) => void;
-}) {
-  // ModelPicker only reads config.providers; a synthetic config is enough here.
-  const synthetic = { providers: creds } as Config;
-  return (
-    <Box flexDirection="column">
-      <Text color={theme.dim}>Choose your default model — you can change it later with /model.</Text>
-      <Box marginTop={1}>
-        <ModelPicker
-          config={synthetic}
-          providers={ready}
-          onSelect={onDone}
-          onCancel={() => onDone(fallback)}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-export function Onboarding({
-  initialSelected = [],
-  onComplete,
-}: {
-  initialSelected?: ProviderName[];
-  onComplete: (result: OnboardingResult) => void;
-}) {
-  const [chosen, setChosen] = useState<ProviderMeta[] | null>(null);
-  const [creds, setCreds] = useState<Partial<Record<ProviderName, ProviderConfig>> | null>(null);
-
-  function onKeysDone(entered: Partial<Record<ProviderName, ProviderConfig>>) {
-    const ready = readyProviders(entered);
-    // No usable credentials (every key skipped): nothing to pick from — finish on the
-    // chosen provider's catalog default rather than showing an empty picker.
-    if (ready.length === 0) {
-      onComplete({ providers: entered, defaultModel: chosen![0].defaultModel });
-      return;
-    }
-    setCreds(entered);
-  }
-
-  return (
-    <Box flexDirection="column" paddingX={1} paddingTop={1}>
-      <Text bold color={theme.accent}>
-        {WELCOME} Welcome to Privateer — let's set up your providers
-      </Text>
-      <Text color={theme.dim}>Bring your own keys. They're saved to ~/.privateer/config.json.</Text>
-      <Box marginTop={1}>
-        {chosen === null ? (
-          <SelectStep initial={new Set(initialSelected)} onConfirm={setChosen} />
-        ) : creds === null ? (
-          <KeyStep providers={chosen} onDone={onKeysDone} />
-        ) : (
-          <ModelStep
-            creds={creds}
-            ready={readyProviders(creds)}
-            fallback={PROVIDER_META[readyProviders(creds)[0]].defaultModel}
-            onDone={(spec) => onComplete({ providers: creds, defaultModel: spec })}
-          />
-        )}
-      </Box>
-    </Box>
-  );
-}

package/src/components/OptionPicker.tsx

@@ -1,134 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import type { UserQuestion, UserAnswer } from "../tools/askUser.ts";
-import { theme } from "./theme.ts";
-
-// Interactive picker shown when the agent calls `ask_user` to choose between
-// competing approaches. The turn is blocked on the human (like the approval prompt).
-// Keys: ↑/↓ move, 1–N jump, Enter confirm, e (or the last row) write a custom answer,
-// Esc dismiss. In multiSelect mode, Space/number toggles and Enter confirms the set.
-export function OptionPicker({
-  question,
-  onRespond,
-}: {
-  question: UserQuestion;
-  onRespond: (answer: UserAnswer) => void;
-}) {
-  const { options, multiSelect } = question;
-  const otherIndex = options.length; // the trailing "write your own" row
-  const total = options.length + 1;
-  const [cursor, setCursor] = useState(0);
-  const [checked, setChecked] = useState<Set<number>>(new Set());
-  const [mode, setMode] = useState<"list" | "custom">("list");
-  const [draft, setDraft] = useState("");
-
-  function toggle(i: number) {
-    setChecked((prev) => {
-      const next = new Set(prev);
-      if (next.has(i)) next.delete(i);
-      else next.add(i);
-      return next;
-    });
-  }
-
-  function confirm() {
-    if (cursor === otherIndex) {
-      setMode("custom");
-      return;
-    }
-    if (multiSelect) {
-      const picks = checked.size > 0 ? [...checked] : [cursor];
-      onRespond({ kind: "selected", indices: picks.sort((a, b) => a - b) });
-    } else {
-      onRespond({ kind: "selected", indices: [cursor] });
-    }
-  }
-
-  useInput((input, key) => {
-    if (mode === "custom") {
-      if (key.escape) {
-        setMode("list");
-        setDraft("");
-      } else if (key.return) {
-        const text = draft.trim();
-        if (text) onRespond({ kind: "custom", text });
-      } else if (key.backspace || key.delete) {
-        setDraft((d) => d.slice(0, -1));
-      } else if (input && !key.ctrl && !key.meta) {
-        setDraft((d) => d + input);
-      }
-      return;
-    }
-
-    if (key.upArrow) setCursor((c) => (c - 1 + total) % total);
-    else if (key.downArrow) setCursor((c) => (c + 1) % total);
-    else if (key.escape) onRespond({ kind: "dismissed" });
-    else if (input === "e") setMode("custom");
-    else if (input >= "1" && input <= "9") {
-      const i = Number(input) - 1;
-      if (i < options.length) {
-        if (multiSelect) {
-          setCursor(i);
-          toggle(i);
-        } else {
-          onRespond({ kind: "selected", indices: [i] });
-        }
-      }
-    } else if (input === " " && multiSelect && cursor < options.length) {
-      toggle(cursor);
-    } else if (key.return) {
-      confirm();
-    }
-  });
-
-  if (mode === "custom") {
-    return (
-      <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={theme.accent} paddingX={1}>
-        <Text bold color={theme.accent}>
-          {question.question}
-        </Text>
-        <Text>
-          <Text color={theme.dim}>your answer: </Text>
-          {draft}
-          <Text color={theme.accent}>▏</Text>
-        </Text>
-        <Text dimColor>enter submit · esc back to options</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={theme.accent} paddingX={1}>
-      <Text bold color={theme.accent}>
-        {question.question}
-      </Text>
-      {options.map((o, i) => {
-        const active = i === cursor;
-        const box = multiSelect ? (checked.has(i) ? "[x] " : "[ ] ") : "";
-        return (
-          <Box key={i} flexDirection="column" marginTop={1}>
-            <Text color={active ? theme.accent : undefined}>
-              <Text color={active ? theme.accent : theme.dim}>{active ? "❯ " : "  "}</Text>
-              <Text color={theme.dim}>{i + 1}. </Text>
-              {box}
-              <Text bold={active}>{o.label}</Text>
-            </Text>
-            {o.description ? <Text dimColor>{"     " + o.description}</Text> : null}
-          </Box>
-        );
-      })}
-      <Box marginTop={1}>
-        <Text color={cursor === otherIndex ? theme.accent : undefined}>
-          <Text color={cursor === otherIndex ? theme.accent : theme.dim}>{cursor === otherIndex ? "❯ " : "  "}</Text>
-          <Text color={theme.dim}>e. </Text>
-          <Text bold={cursor === otherIndex}>Something else — write your own answer</Text>
-        </Text>
-      </Box>
-      <Text dimColor>
-        {multiSelect
-          ? "↑/↓ move · space toggle · enter confirm · esc skip"
-          : "↑/↓ move · 1–" + options.length + " pick · enter confirm · esc skip"}
-      </Text>
-    </Box>
-  );
-}

package/src/components/PlanConfirm.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Box, Text, useInput } from "ink";
-import { theme } from "./theme.ts";
-
-// Shown after a turn completes while in plan mode: the agent has presented a plan,
-// and the user chooses to approve (leave plan mode), keep planning, or chat about
-// the plan (return to the prompt, staying in plan mode, to ask questions).
-export function PlanConfirm({
-  onApprove,
-  onKeep,
-  onChat,
-}: {
-  onApprove: () => void;
-  onKeep: () => void;
-  onChat: () => void;
-}) {
-  useInput((input, key) => {
-    if (input === "a" || key.return) onApprove();
-    else if (input === "c") onChat();
-    else if (input === "k" || key.escape) onKeep();
-  });
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor={theme.accent} paddingX={1}>
-      <Text color={theme.accent}>Plan ready — review it above.</Text>
-      <Text>
-        <Text color={theme.accent}>a</Text>
-        <Text color={theme.dim}> approve & exit plan mode</Text>
-        <Text color={theme.dim}>{"   "}</Text>
-        <Text color={theme.accent}>c</Text>
-        <Text color={theme.dim}> chat about the plan</Text>
-        <Text color={theme.dim}>{"   "}</Text>
-        <Text color={theme.accent}>k</Text>
-        <Text color={theme.dim}> keep planning</Text>
-      </Text>
-    </Box>
-  );
-}

package/src/components/PrivateerLogin.tsx

@@ -1,109 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Box, Text, useInput } from "ink";
-import Spinner from "ink-spinner";
-import { theme } from "./theme.ts";
-import { WELCOME } from "./figures.ts";
-import { runDeviceLogin, type DeviceCode, type PrivateerUser } from "../auth/privateer.ts";
-
-// Device-authorization login screen. Shows the user_code to approve in the
-// Privateer app, polls in the background, and resolves once approved. Esc
-// cancels. Works the same for email and wallet accounts — all the signing
-// happens in the app, never here.
-export function PrivateerLogin({
-  onComplete,
-  onCancel,
-}: {
-  onComplete: (user: PrivateerUser) => void;
-  onCancel: () => void;
-}) {
-  const [code, setCode] = useState<DeviceCode | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [slow, setSlow] = useState(false);
-  const abortRef = useRef<AbortController | null>(null);
-
-  useEffect(() => {
-    const ac = new AbortController();
-    abortRef.current = ac;
-    let cancelled = false;
-
-    runDeviceLogin({
-      onCode: (c) => !cancelled && setCode(c),
-      onPoll: (state) => !cancelled && setSlow(state === "slow_down"),
-      signal: ac.signal,
-    })
-      .then((user) => {
-        if (!cancelled) onComplete(user);
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        if (ac.signal.aborted) return; // user cancelled — handled by useInput
-        setError(err instanceof Error ? err.message : String(err));
-      });
-
-    return () => {
-      cancelled = true;
-      ac.abort();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useInput((_input, key) => {
-    if (key.escape || (key.return && error)) {
-      abortRef.current?.abort();
-      onCancel();
-    }
-  });
-
-  return (
-    <Box flexDirection="column" paddingX={1} paddingTop={1}>
-      <Text bold color={theme.accent}>
-        {WELCOME} Sign in to your Privateer account
-      </Text>
-      <Text color={theme.dim}>
-        Inference runs on your account and is billed to your subscription — no API key needed.
-      </Text>
-
-      {error ? (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={theme.error ?? "red"}>{error}</Text>
-          <Text color={theme.dim}>Press Esc or Enter to go back.</Text>
-        </Box>
-      ) : !code ? (
-        <Box marginTop={1}>
-          <Text color={theme.accent}>
-            <Spinner type="dots" />
-          </Text>
-          <Text color={theme.dim}> Starting secure login…</Text>
-        </Box>
-      ) : (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={theme.dim}>1. Open the Privateer app (or web) where you're signed in.</Text>
-          <Text color={theme.dim}>
-            2. Go to <Text color={theme.accent}>Settings → Link a terminal</Text>
-            {code.verification_uri ? (
-              <Text color={theme.dim}>
-                {" "}
-                ({code.verification_uri})
-              </Text>
-            ) : null}
-          </Text>
-          <Text color={theme.dim}>3. Enter this code (or just open the link above):</Text>
-          <Box marginY={1} borderStyle="round" borderColor={theme.accent} paddingX={2}>
-            <Text bold color={theme.accent}>
-              {code.user_code}
-            </Text>
-          </Box>
-          {/* Deliberately NOT an animated spinner here: ink-spinner re-renders the
-              whole frame ~12×/s, which wipes any text selection on the code above
-              and makes it almost impossible to copy. A static line keeps the code
-              selectable; this view only re-renders on a real state change. */}
-          <Box>
-            <Text color={theme.dim}>
-              Waiting for approval…{slow ? " (slowing down)" : ""}  ·  Esc to cancel
-            </Text>
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-}