privateer-agent 0.1.0

package/src/components/ApprovalPrompt.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import type { PermissionRequest } from "../permissions/gate.ts";
+import type { AskOutcome } from "../permissions/uiGate.ts";
+import { theme } from "./theme.ts";
+
+// Interactive approval shown when a tool needs permission. Keys: y allow once,
+// a allow always, n / esc deny.
+export function ApprovalPrompt({
+  req,
+  onRespond,
+}: {
+  req: PermissionRequest;
+  onRespond: (outcome: AskOutcome) => void;
+}) {
+  useInput((input, key) => {
+    const c = input.toLowerCase();
+    if (c === "y") onRespond("allow");
+    else if (c === "a") onRespond("always");
+    else if (c === "n" || key.escape) onRespond("deny");
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={theme.warning} paddingX={1}>
+      <Text>
+        <Text bold color={theme.warning}>
+          {req.title}
+        </Text>
+        <Text dimColor> ({req.tool})</Text>
+      </Text>
+      <Text>{req.detail}</Text>
+      <Text dimColor>
+        <Text color={theme.success}>y</Text> allow · <Text color={theme.success}>a</Text> always ·{" "}
+        <Text color={theme.error}>n</Text> deny
+      </Text>
+    </Box>
+  );
+}

package/src/components/Banner.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import os from "node:os";
+import { Box, Text } from "ink";
+import { VERSION } from "../version.ts";
+import { theme } from "./theme.ts";
+import { WELCOME } from "./figures.ts";
+
+// Collapse the user's home directory to ~ for a compact path display.
+function shortenPath(cwd: string): string {
+  const home = os.homedir();
+  return cwd === home || cwd.startsWith(home + "/")
+    ? "~" + cwd.slice(home.length)
+    : cwd;
+}
+
+// Anchor motif rendered in ASCII — the Privateer mark (ring, stock, shank, flukes).
+const ANCHOR = [
+  "    .-.    ",
+  "    '_'   ",
+  "   --|--  ",
+  "     |    ",
+  "  \\  |  /  ",
+  "   \\_|_/   ",
+];
+
+export function Banner({ model }: { model: string }) {
+  return (
+    <Box flexDirection="column">
+      <Box
+        borderStyle="round"
+        borderColor={theme.accent}
+        paddingX={1}
+        flexDirection="row"
+        gap={2}
+      >
+        <Box flexDirection="column">
+          {ANCHOR.map((line, i) => (
+            <Text key={i} color={theme.accent}>
+              {line}
+            </Text>
+          ))}
+        </Box>
+        <Box flexDirection="column" justifyContent="center">
+          <Text bold color={theme.accent}>
+            {WELCOME} PRIVATEER
+          </Text>
+          <Text color={theme.dim}>bring your own model · v{VERSION}</Text>
+          <Text> </Text>
+          <Text>
+            model <Text color={theme.accent}>{model}</Text>
+          </Text>
+          <Text color={theme.dim}>type a prompt · /help for commands</Text>
+          <Text color={theme.accent}>{shortenPath(process.cwd())}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/components/Markdown.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { theme } from "./theme.ts";
+
+// A small, dependency-free markdown renderer for the terminal. It exists because
+// assistant output is streamed in incrementally (App.tsx concatenates deltas), so a
+// renderer that emits ANSI strings (marked-terminal et al.) would fight Ink's layout
+// and reflow oddly on partial input. Instead we parse the text into Ink <Box>/<Text>
+// nodes on every frame — the parse is a pure function of the current text, so half-
+// finished markdown simply renders as plain-ish text until the closing marker arrives.
+//
+// Supported: ATX headings, fenced code blocks, blockquotes, unordered/ordered lists,
+// horizontal rules, and inline bold/italic/code/links. Anything unrecognized falls
+// through as a normal paragraph, so we never lose content.
+
+// --- Inline formatting -----------------------------------------------------------
+
+// One regex, alternation tried left-to-right at each position: code spans first so we
+// never reparse markdown inside `code`, then bold before italic so `**x**` wins over
+// `*x*`. Each construct forbids its own delimiter inside, which keeps it simple and
+// means an unterminated marker (mid-stream) just renders literally until it closes.
+const INLINE_RE =
+  /(`[^`]+`)|(\*\*[^*]+\*\*)|(__[^_]+__)|(\*[^*\n]+\*)|(\b_[^_\n]+_\b)|(\[[^\]]+\]\([^)]+\))/g;
+
+function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let i = 0;
+  INLINE_RE.lastIndex = 0;
+  while ((m = INLINE_RE.exec(text)) !== null) {
+    if (m.index > last) nodes.push(text.slice(last, m.index));
+    const tok = m[0];
+    const key = `${keyPrefix}-${i++}`;
+    if (m[1]) {
+      // `inline code`
+      nodes.push(
+        <Text key={key} color={theme.accent}>
+          {tok.slice(1, -1)}
+        </Text>,
+      );
+    } else if (m[2] || m[3]) {
+      // **bold** or __bold__
+      nodes.push(
+        <Text key={key} bold>
+          {tok.slice(2, -2)}
+        </Text>,
+      );
+    } else if (m[4] || m[5]) {
+      // *italic* or _italic_
+      nodes.push(
+        <Text key={key} italic>
+          {tok.slice(1, -1)}
+        </Text>,
+      );
+    } else {
+      // [label](url) — show the label, underlined in the accent hue.
+      const label = tok.slice(1, tok.indexOf("]"));
+      nodes.push(
+        <Text key={key} color={theme.accent} underline>
+          {label}
+        </Text>,
+      );
+    }
+    last = m.index + tok.length;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+// --- Block parsing ---------------------------------------------------------------
+
+const FENCE_RE = /^\s*```/;
+const HEADING_RE = /^(#{1,6})\s+(.*)$/;
+const HR_RE = /^\s*([-*_])(\s*\1){2,}\s*$/;
+const QUOTE_RE = /^>\s?(.*)$/;
+const UL_RE = /^(\s*)[-*+]\s+(.*)$/;
+const OL_RE = /^(\s*)(\d+)\.\s+(.*)$/;
+
+export function Markdown({ text }: { text: string }) {
+  const lines = text.split("\n");
+  const blocks: React.ReactNode[] = [];
+  let para: string[] = [];
+  let bi = 0;
+
+  const flushPara = () => {
+    if (para.length === 0) return;
+    const joined = para.join("\n");
+    blocks.push(
+      <Text key={`p-${bi++}`}>{renderInline(joined, `p-${bi}`)}</Text>,
+    );
+    para = [];
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Fenced code block: accumulate verbatim until the closing fence (or EOF, so a
+    // still-streaming block renders instead of swallowing the rest of the message).
+    if (FENCE_RE.test(line)) {
+      flushPara();
+      const code: string[] = [];
+      i++;
+      for (; i < lines.length && !FENCE_RE.test(lines[i]); i++) code.push(lines[i]);
+      blocks.push(
+        <Box key={`code-${bi++}`} flexDirection="column" paddingLeft={2}>
+          {(code.length ? code : [""]).map((c, j) => (
+            <Text key={j} color={theme.accent} dimColor>
+              {c || " "}
+            </Text>
+          ))}
+        </Box>,
+      );
+      continue;
+    }
+
+    if (line.trim() === "") {
+      flushPara();
+      continue;
+    }
+
+    const hr = HR_RE.test(line);
+    if (hr) {
+      flushPara();
+      blocks.push(
+        <Text key={`hr-${bi++}`} color={theme.dim} dimColor>
+          {"─".repeat(40)}
+        </Text>,
+      );
+      continue;
+    }
+
+    const heading = line.match(HEADING_RE);
+    if (heading) {
+      flushPara();
+      blocks.push(
+        <Text key={`h-${bi++}`} color={theme.accent} bold>
+          {renderInline(heading[2], `h-${bi}`)}
+        </Text>,
+      );
+      continue;
+    }
+
+    const quote = line.match(QUOTE_RE);
+    if (quote) {
+      flushPara();
+      blocks.push(
+        <Box key={`q-${bi++}`}>
+          <Text color={theme.dim}>{"▏ "}</Text>
+          <Box flexGrow={1}>
+            <Text color={theme.dim} dimColor>
+              {renderInline(quote[1], `q-${bi}`)}
+            </Text>
+          </Box>
+        </Box>,
+      );
+      continue;
+    }
+
+    const ul = line.match(UL_RE);
+    const ol = line.match(OL_RE);
+    if (ul || ol) {
+      flushPara();
+      const indent = (ul ? ul[1] : ol![1]).length;
+      const marker = ul ? "•" : `${ol![2]}.`;
+      const content = ul ? ul[2] : ol![3];
+      blocks.push(
+        <Box key={`li-${bi++}`} paddingLeft={indent}>
+          <Text color={theme.accent}>{marker} </Text>
+          <Box flexGrow={1}>
+            <Text>{renderInline(content, `li-${bi}`)}</Text>
+          </Box>
+        </Box>,
+      );
+      continue;
+    }
+
+    para.push(line);
+  }
+  flushPara();
+
+  return <Box flexDirection="column">{blocks}</Box>;
+}

package/src/components/ModeHint.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { PermissionMode } from "../config/schema.ts";
+import { theme, MODE_COLOR } from "./theme.ts";
+import { FAST_FORWARD, PAUSE } from "./figures.ts";
+import { useTerminalWidth } from "./useTerminalWidth.ts";
+
+// The footer rendered directly under the prompt box (Claude Code style): the
+// active permission mode in its accent color on the left, and a shortcuts hint
+// on the right. Default mode is the resting state, so the left side shows
+// nothing — but the shortcuts hint always stays pinned to the bottom right.
+const MODE_LABEL: Record<PermissionMode, { marker: string; text: string } | null> = {
+  default: null,
+  acceptEdits: { marker: FAST_FORWARD, text: "accept edits on" },
+  bypass: { marker: FAST_FORWARD, text: "bypass permissions on" },
+  plan: { marker: PAUSE, text: "plan mode on" },
+};
+
+export function ModeHint({ mode, collapsed }: { mode: PermissionMode; collapsed?: boolean }) {
+  // Match StatusBar: stay a few columns clear of the right edge so the row never
+  // reaches the final column and the terminal never reflows it.
+  const width = Math.max(20, useTerminalWidth() - 4);
+  const label = MODE_LABEL[mode];
+  return (
+    <Box width={width} justifyContent="space-between">
+      <Box flexShrink={1} minWidth={0}>
+        {label && (
+          <Text color={MODE_COLOR[mode]} wrap="truncate-end">
+            {label.marker} {label.text}
+          </Text>
+        )}
+      </Box>
+      <Box flexShrink={0}>
+        <Text color={theme.dim} wrap="truncate-end">
+          {`/help · esc interrupts · Ctrl+O ${collapsed ? "expand" : "collapse"}`}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/ModelPicker.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+import type { Config, ProviderName } from "../config/schema.ts";
+import { configuredProviders, privateerChannel } from "../providers/resolve.ts";
+import { PROVIDER_META } from "../providers/catalog.ts";
+import { listModels, zdrPosture, type ModelInfo } from "../providers/models.ts";
+import { theme, POSTURE_COLOR } from "./theme.ts";
+import { SHIELD } from "./figures.ts";
+import { useZdrAccount, type ZdrAccountState } from "./useZdrShield.ts";
+
+const PAGE = 8; // visible rows in the scrolling model list
+
+// A two-stage picker: choose a configured provider, then choose one of the models it
+// actually offers (fetched live with the user's key). Returns a "provider:model" spec.
+// Reused by the /model command and the onboarding flow. Esc cancels (if onCancel given).
+export function ModelPicker({
+  config,
+  providers,
+  onSelect,
+  onCancel,
+}: {
+  config: Config;
+  // Restrict the provider stage to these names; defaults to all ready providers.
+  providers?: ProviderName[];
+  onSelect: (spec: string) => void;
+  onCancel?: () => void;
+}) {
+  const ready = useMemo(() => {
+    const offered = providers ?? configuredProviders(config).filter((p) => p.ready).map((p) => p.name);
+    return offered as ProviderName[];
+  }, [config, providers]);
+
+  const [provider, setProvider] = useState<ProviderName | null>(ready.length === 1 ? ready[0] : null);
+
+  if (ready.length === 0) {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <Text color={theme.error}>No providers configured. Run /login to add an API key.</Text>
+      </Box>
+    );
+  }
+
+  if (provider === null) {
+    return <ProviderStage providers={ready} onPick={setProvider} onCancel={onCancel} />;
+  }
+
+  return (
+    <ModelStage
+      provider={provider}
+      config={config}
+      onSelect={(id) => onSelect(`${provider}:${id}`)}
+      onBack={ready.length > 1 ? () => setProvider(null) : undefined}
+      onCancel={onCancel}
+    />
+  );
+}
+
+function ProviderStage({
+  providers,
+  onPick,
+  onCancel,
+}: {
+  providers: ProviderName[];
+  onPick: (name: ProviderName) => void;
+  onCancel?: () => void;
+}) {
+  const [cursor, setCursor] = useState(0);
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") setCursor((c) => (c - 1 + providers.length) % providers.length);
+    else if (key.downArrow || input === "j") setCursor((c) => (c + 1) % providers.length);
+    else if (key.return) onPick(providers[cursor]);
+    else if (key.escape) onCancel?.();
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Text color={theme.dim}>
+        Pick a provider — <Text color={theme.accent}>↑↓</Text> move,{" "}
+        <Text color={theme.accent}>enter</Text> select{onCancel ? ", esc cancel" : ""}.
+      </Text>
+      <Box flexDirection="column" marginTop={1}>
+        {providers.map((name, i) => (
+          <Text key={name} color={i === cursor ? theme.accent : undefined}>
+            {i === cursor ? "❯ " : "  "}
+            {PROVIDER_META[name].label}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+function ModelStage({
+  provider,
+  config,
+  onSelect,
+  onBack,
+  onCancel,
+}: {
+  provider: ProviderName;
+  config: Config;
+  onSelect: (id: string) => void;
+  onBack?: () => void;
+  onCancel?: () => void;
+}) {
+  const [models, setModels] = useState<ModelInfo[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState("");
+  const [cursor, setCursor] = useState(0);
+  // OpenRouter only: the account's ZDR snapshot, used to color a per-model badge.
+  const zdrAccount = useZdrAccount(provider, config);
+  const zdrEnforced = Boolean(config.providers.openrouter?.enforceZdr);
+  // Privateer: every model carries a privacy channel (TEE or ZDR) derived from its
+  // id, surfaced as a per-row badge so the channel is visible before you pick.
+  const isPrivateer = provider === "privateer";
+
+  useEffect(() => {
+    let alive = true;
+    setModels(null);
+    setError(null);
+    listModels(provider, config.providers[provider] ?? {})
+      .then((m) => alive && setModels(m))
+      .catch((e) => alive && setError(e instanceof Error ? e.message : String(e)));
+    return () => {
+      alive = false;
+    };
+  }, [provider]);
+
+  const filtered = useMemo(() => {
+    if (!models) return [];
+    const q = filter.trim().toLowerCase();
+    if (!q) return models;
+    return models.filter(
+      (m) => m.id.toLowerCase().includes(q) || (m.label?.toLowerCase().includes(q) ?? false),
+    );
+  }, [models, filter]);
+
+  // Keep the cursor in range as the filter narrows the list.
+  useEffect(() => {
+    setCursor((c) => Math.min(c, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onBack ? onBack() : onCancel?.();
+      return;
+    }
+    if (!filtered.length) return;
+    if (key.upArrow) setCursor((c) => (c - 1 + filtered.length) % filtered.length);
+    else if (key.downArrow) setCursor((c) => (c + 1) % filtered.length);
+    else if (key.return) onSelect(filtered[cursor].id);
+  });
+
+  const label = PROVIDER_META[provider].label;
+
+  if (error !== null) {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <Text color={theme.error}>Couldn't fetch {label} models: {error}</Text>
+        <Text color={theme.dim}>
+          Check the API key with /login, or set a model directly: /model {provider}:&lt;id&gt;.
+          {onBack ? " Esc to go back." : ""}
+        </Text>
+      </Box>
+    );
+  }
+
+  if (models === null) {
+    return (
+      <Box paddingX={1} gap={1}>
+        <Text color={theme.accent}>
+          <Spinner type="dots" />
+        </Text>
+        <Text color={theme.dim}>Fetching {label} models…</Text>
+      </Box>
+    );
+  }
+
+  // Window the list around the cursor so long catalogs (OpenRouter has hundreds) scroll.
+  const start = Math.max(0, Math.min(cursor - Math.floor(PAGE / 2), Math.max(0, filtered.length - PAGE)));
+  const view = filtered.slice(start, start + PAGE);
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Text color={theme.dim}>
+        {label} — <Text color={theme.accent}>{filtered.length}</Text> models. Type to filter,{" "}
+        <Text color={theme.accent}>↑↓</Text> move, <Text color={theme.accent}>enter</Text> select
+        {onBack ? ", esc back" : onCancel ? ", esc cancel" : ""}.
+      </Text>
+      {isPrivateer ? <PrivateerLegend /> : <ZdrLegend state={zdrAccount} enforced={zdrEnforced} />}
+      <Box marginTop={1} borderStyle="round" borderColor={theme.accent} paddingX={1}>
+        <Text color={theme.accent}>{"/ "}</Text>
+        <TextInput value={filter} onChange={setFilter} placeholder="filter models…" />
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {filtered.length === 0 ? (
+          <Text color={theme.dim}>No models match "{filter}".</Text>
+        ) : (
+          view.map((m, i) => {
+            const idx = start + i;
+            const active = idx === cursor;
+            // Privateer: label the privacy channel (TEE/ZDR) from the model id.
+            // OpenRouter: color a bare shield by the account's per-model ZDR posture.
+            const channel = isPrivateer ? privateerChannel(m.id) : null;
+            const posture =
+              !isPrivateer && zdrAccount.kind === "ready"
+                ? zdrPosture(m.id, zdrAccount.account, zdrEnforced)
+                : null;
+            return (
+              <Text key={m.id} color={active ? theme.accent : undefined}>
+                {active ? "❯ " : "  "}
+                {channel ? (
+                  <Text color={theme.success}>{`${SHIELD} ${channel === "tee" ? "TEE" : "ZDR"}  `}</Text>
+                ) : posture ? (
+                  <Text color={POSTURE_COLOR[posture]}>{`${SHIELD} `}</Text>
+                ) : null}
+                {m.id}
+                {m.label && m.label !== m.id ? <Text color={theme.dim}> — {m.label}</Text> : null}
+              </Text>
+            );
+          })
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+// One-line key for the per-model ⛉ badge, shown only for OpenRouter. While the
+// account snapshot loads we say so; if it can't be fetched (no key / error) we stay
+// silent rather than imply a verdict — the rows simply render without a badge.
+// With enforcement off, ZDR-capable models read yellow; /zdr flips it on so they
+// go green (and non-ZDR models become red/unusable).
+// One-line key for the Privateer ⛉ TEE/ZDR badges. Both channels keep your prompts
+// private — TEE runs the model in a confidential enclave (attestable via /verify),
+// ZDR routes through zero-data-retention endpoints — so both render green.
+function PrivateerLegend() {
+  return (
+    <Text color={theme.dim}>
+      <Text color={POSTURE_COLOR.green}>{`${SHIELD} TEE`}</Text> confidential enclave (attestable){"  "}
+      <Text color={POSTURE_COLOR.green}>{`${SHIELD} ZDR`}</Text> zero data retention
+    </Text>
+  );
+}
+
+function ZdrLegend({ state, enforced }: { state: ZdrAccountState; enforced: boolean }) {
+  if (state.kind === "idle" || state.kind === "error") return null;
+  if (state.kind === "loading") {
+    return <Text color={theme.dim}>{`${SHIELD} ZDR — checking your account…`}</Text>;
+  }
+  return (
+    <Text color={theme.dim}>
+      {enforced ? (
+        <>
+          <Text color={POSTURE_COLOR.green}>{SHIELD}</Text> ZDR enforced{"  "}
+          <Text color={POSTURE_COLOR.red}>{SHIELD}</Text> no ZDR endpoint — unusable
+          {"  "}(/zdr to relax)
+        </>
+      ) : (
+        <>
+          <Text color={POSTURE_COLOR.yellow}>{SHIELD}</Text> ZDR available{"  "}
+          <Text color={POSTURE_COLOR.red}>{SHIELD}</Text> data retained{"  "}
+          (/zdr to enforce → green)
+        </>
+      )}
+    </Text>
+  );
+}