privateer-agent 0.1.0

package/src/components/Onboarding.tsx

@@ -0,0 +1,203 @@
+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/PlanConfirm.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,109 @@
+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>
+  );
+}