@visual-z/xeno 0.2.0 → 0.3.0

package/src/apps/completions.ts

@@ -1,31 +1,85 @@
-import { COMMANDS } from "./commands.ts";
+/**
+ * What the composer offers for the text at the cursor. Pure given its
+ * sources, so the three cases are tested without a terminal:
+ *   "/mo|"          command names (the palette's own entries)
+ *   "/thinking h|" the command's argument values
+ *   "see @src/ap|"  workspace paths (ranked fuzzy, quoted when they contain spaces)
+ * `@` inside a word (an e-mail) or after a backslash is not a reference.
+ */
 import type { App } from "./startup.ts";
-import { WorkspaceAutocomplete } from "../tui/autocomplete.ts";
 import { SUBSCRIPTION_OPTIONS } from "../runtime/oauth.ts";
-import { modelKey } from "../core/session-position.ts";
 import { supportedThinkingLevels } from "../core/thinking.ts";
 import { SETTINGS_KEYS, DISPLAY_SETTINGS } from "../core/settings.ts";
+import { fuzzyFilter } from "../tui/fuzzy.ts";
+import { COMMANDS } from "./commands.ts";
+import type { Completion } from "../tui/ui/composer.ts";
+import type { ListItem } from "../tui/ui/list-model.ts";
+
+export interface CompletionSources {
+  readonly commands: readonly { name: string; description: string }[];
+  readonly argumentValues: (command: string) => readonly string[];
+  readonly paths: readonly string[];
+}
+
+/** Twelve rows: enough to see siblings of a path without hiding the composer. Assumed. */
+const MAX_ITEMS = 12;
 
-export function interactiveAutocomplete(app: App, paths: (refresh?: boolean) => Promise<readonly string[]>): WorkspaceAutocomplete {
-  const providers = [...new Set([...app.catalog.map((m) => m.provider), ...SUBSCRIPTION_OPTIONS.map((p) => p.id)])];
+export function completionAt(text: string, cursor: number, sources: CompletionSources): Completion | undefined {
+  const before = text.slice(0, cursor);
+  const line = before.slice(before.lastIndexOf("\n") + 1);
+  const lineStart = cursor - line.length;
+  if (line.startsWith("/") && lineStart === 0) {
+    const space = line.indexOf(" ");
+    if (space < 0) {
+      const query = line.slice(1).toLowerCase();
+      const items = sources.commands
+        .filter(command => command.name.toLowerCase().startsWith(query) || (query.length > 1 && command.name.toLowerCase().includes(query)))
+        .map(command => ({ value: `/${command.name} `, label: `/${command.name}`, description: command.description }));
+      return items.length ? { start: 0, end: cursor, items: items.slice(0, MAX_ITEMS) } : undefined;
+    }
+    const command = line.slice(1, space);
+    const arg = line.slice(space + 1);
+    if (arg.includes(" ")) return undefined;
+    const values = sources.argumentValues(command);
+    if (!values.length) return undefined;
+    const items = fuzzyFilter(values, arg).slice(0, MAX_ITEMS).map(value => ({ value, label: value }));
+    return items.length ? { start: space + 1, end: cursor, items } : undefined;
+  }
+  const at = line.lastIndexOf("@");
+  if (at < 0) return undefined;
+  const prev = line[at - 1];
+  if (prev !== undefined && !/\s/.test(prev)) return undefined;
+  const query = line.slice(at + 1);
+  if (/\s/.test(query) && !query.startsWith("\"")) return undefined;
+  const bare = query.replace(/^"/, "");
+  const items: ListItem[] = fuzzyFilter(sources.paths, bare).slice(0, MAX_ITEMS)
+    .map(path => ({ value: `@${/\s/.test(path) ? JSON.stringify(path) : path} `, label: path }));
+  return items.length ? { start: lineStart + at, end: cursor, items } : undefined;
+}
+
+export function completionSources(app: App, paths: readonly string[]): CompletionSources {
+  const providers = [...new Set([...app.catalog.map(m => m.provider), ...SUBSCRIPTION_OPTIONS.map(p => p.id)])];
   const values: Record<string, () => string[]> = {
-    model: () => app.catalog.map(modelKey),
+    // Model identities belong to the searchable picker. The generic completer
+    // still handles arbitrary argument sources; this app supplies only one
+    // model selection surface, rather than a second list with different keys.
     thinking: () => [...supportedThinkingLevels(app.providerConfig.spec)],
-    login: () => providers, logout: () => providers,
+    login: () => providers, connect: () => providers, logout: () => Object.keys(app.auth),
     settings: () => [...new Set([...SETTINGS_KEYS, ...DISPLAY_SETTINGS.map(item => item.id)])],
     models: () => ["refresh"], trust: () => ["once", "here", "parent", "never"],
   };
-  const commands = COMMANDS.map((definition) => ({
-    ...definition,
-    getArgumentCompletions(prefix: string) {
-      return (values[definition.name]?.() ?? []).filter((v) => v.toLowerCase().includes(prefix.toLowerCase()))
-        .map((v) => ({ value: v, label: v }));
-    },
-  }));
-  const registered = [
-    ...[...app.extensions?.commands ?? []].map(([name, command]) => ({ name, ...command })),
-    ...[...(app.slash?.prompts.values() ?? [])].map((p) => ({ name: p.name, description: p.description })),
-    ...(app.slash?.skillCommands === false ? [] : [...(app.slash?.skills.values() ?? [])].map((s) => ({ name: `skill:${s.name}`, description: s.description }))),
+  return {
+    commands: [...COMMANDS.filter(command => command.name !== "exit"), ...commandEntries(app)],
+    argumentValues: command => values[command]?.() ?? [],
+    paths,
+  };
+}
+
+/** Built-ins, then extension commands, prompt templates and skills: the same names the palette lists. */
+export function commandEntries(app: App): { name: string; description: string; section: string }[] {
+  return [
+    ...[...app.extensions?.commands ?? []].map(([name, command]) => ({ name, description: command.description ?? "extension command", section: "Extensions" })),
+    ...[...(app.slash?.prompts.values() ?? [])].map(p => ({ name: p.name, description: p.description ?? "prompt template", section: "Prompts" })),
+    ...(app.slash?.skillCommands === false ? [] : [...(app.slash?.skills.values() ?? [])].map(s => ({ name: `skill:${s.name}`, description: s.description ?? "skill", section: "Skills" }))),
   ];
-  return new WorkspaceAutocomplete([...commands, ...registered], app.workspace, paths);
 }

package/src/apps/image-draft.ts

@@ -0,0 +1,46 @@
+import { draftImageInput, draftImageSpans, focusedDraftImage, imageMarker } from "../core/draft-images.ts";
+import type { ImageRef } from "../core/images.ts";
+
+/** D19: the renderer owns text and undo; the app only binds tokens to D8 blob identities. */
+export interface ImageDraftEditor {
+  readonly text: string;
+  readonly cursor: number;
+  setAtoms(spans: (text: string) => readonly { start: number; end: number }[]): void;
+  insert(text: string): void;
+  removeAtom(label: string): void;
+  resetDraft(project: (text: string) => string): void;
+}
+
+export class ImageDraft {
+  private readonly editor: ImageDraftEditor;
+  private readonly registry = new Map<number, ImageRef>();
+  // Never reuse an ID: undo, kill/yank and local history can restore an earlier tag.
+  private nextId = 1;
+
+  constructor(editor: ImageDraftEditor) {
+    this.editor = editor;
+    editor.setAtoms(text => draftImageSpans(text, this.registry));
+  }
+  get images(): ImageRef[] { return this.input(this.editor.text).images; }
+  get focusedImage() { return focusedDraftImage(this.editor.text, this.editor.cursor, this.registry); }
+  input(text: string) { return draftImageInput(text, this.registry); }
+
+  insertImages(images: readonly ImageRef[]): void {
+    let labels = "";
+    for (const image of images) {
+      while (this.editor.text.includes(imageMarker(this.nextId))) this.nextId++;
+      const id = this.nextId++;
+      this.registry.set(id, image); labels += imageMarker(id);
+    }
+    if (labels) this.editor.insert(labels);
+  }
+  removeImage(index: number): void {
+    const ids = [...new Set(draftImageSpans(this.editor.text, this.registry).map(span => span.id))];
+    const id = ids[index];
+    if (id !== undefined) this.editor.removeAtom(imageMarker(id));
+  }
+  reset(): void {
+    this.editor.resetDraft(text => this.input(text).text);
+    this.registry.clear();
+  }
+}

package/src/apps/project-trust.ts

@@ -1,49 +1,9 @@
+/** Project trust decisions; the picker itself is apps/ui/standalone.ts (startup) and apps/ui/app.ts (/trust). */
 import { dirname } from "node:path";
-import { SelectList } from "../tui/select.ts";
-import { createInteractiveTui } from "../tui/host.ts";
-import { IDENTITY } from "../tui/style.ts";
-import { installBindings } from "../tui/input.ts";
-import { loadUiResources } from "../store/resources.ts";
-import type { Style } from "../tui/style.ts";
-import { projectTrust, saveTrust } from "../store/trust.ts";
-import { truncateToWidth } from "../vendor/pi-tui/utils.ts";
+import { saveTrust } from "../store/trust.ts";
 
 export type TrustChoice = "once" | "here" | "parent" | "never";
 export async function applyTrustChoice(workspace: string, choice: TrustChoice): Promise<boolean> {
   if (choice !== "once") await saveTrust(choice === "parent" ? dirname(workspace) : workspace, choice !== "never");
   return choice !== "never";
 }
-export class TrustSelector extends SelectList {
-  private readonly workspace: string;
-  private readonly decision: Awaited<ReturnType<typeof projectTrust>>;
-  constructor(workspace: string, decision: Awaited<ReturnType<typeof projectTrust>>, style: Style) {
-    super([
-      { value: "once", label: "Trust for this session", description: "Load project resources without saving a decision" },
-      { value: "here", label: "Trust this directory", description: workspace },
-      { value: "parent", label: "Trust parent directory", description: dirname(workspace) },
-      { value: "never", label: "Do not trust this directory", description: "Skip project configuration and executable extensions" },
-    ], { title: "Project trust", search: false, style,
-      ...(decision.saved ? { selectedValue: decision.saved.trusted ? decision.saved.path === workspace ? "here" : "parent" : "never" } : {}) });
-    this.workspace = workspace; this.decision = decision;
-  }
-  override render(width: number): string[] {
-    const saved = this.decision.saved;
-    return ["Project trust", this.workspace, `Saved: ${saved ? `${saved.trusted ? "trusted" : "untrusted"} (${saved.path})` : "none"}`,
-      `Current session: ${this.decision.trusted ? "trusted" : "untrusted"} · Tool permissions are separate`, ...super.render(width).slice(1)]
-      .map(line => truncateToWidth(line, width, ""));
-  }
-}
-export async function pickProjectTrust(workspace: string): Promise<boolean> {
-  const decision = await projectTrust(workspace);
-  installBindings((await loadUiResources({ workspace, trusted: false })).keymap.byAction);
-  const screen = createInteractiveTui();
-  const select = new TrustSelector(workspace, decision, IDENTITY);
-  screen.addChild(select); screen.setFocus(select);
-  try {
-    const choice = await new Promise<string | null>(resolve => {
-      select.onInput = data => { const state = select.acceptInput(data); if (state.cancelled) resolve(null); else if (state.confirmed) resolve(state.confirmed.value); screen.requestRender(); };
-      screen.start();
-    });
-    return choice === null ? false : applyTrustChoice(workspace, choice as TrustChoice);
-  } finally { await screen.terminal.drainInput(); screen.stop(); }
-}

package/src/apps/provider-connect.ts

@@ -0,0 +1,346 @@
+/**
+ * Custom endpoints and connected-provider management, reached from `/login`.
+ *
+ * Flow (magpie's add form + OpenCode's /connect, see
+ * docs/tasks/feat-provider-connect.md): choose a preset or a custom endpoint
+ * → base URL and id (custom only) → API key (masked; `$VAR` keeps it in the
+ * environment) → list the provider's own models with that key → check the
+ * ones to enable → save → offer to switch.
+ *
+ * Every write goes through the files the rest of xeno already reads:
+ * `auth.json` for keys and `models.json` `providers.<id>` for endpoints and
+ * enabled models. After saving, the catalog is reloaded through the same
+ * entry `/reload` uses, so a connected provider behaves exactly like a
+ * hand-configured one.
+ */
+import { modelKey } from "../core/session-position.ts";
+import { loadCatalog } from "../runtime/catalog.ts";
+import type { ModelSpec } from "../runtime/model.ts";
+import { discoverModels, discoveryFamily, likelyChatModel, normalizeBaseUrl, type DiscoveredModel } from "../runtime/model-discovery.ts";
+import { SOURCE_PROVIDERS } from "../runtime/model-data.ts";
+import { applyConnect, applyDisconnect, catalogTwin } from "../runtime/provider-connect.ts";
+import { CUSTOM_PRESETS, presetById, suggestProviderId, validProviderId, type ProviderPreset } from "../runtime/provider-presets.ts";
+import { providerAccess } from "../runtime/provider-access.ts";
+import { writeAuthFile } from "../store/auth-store.ts";
+import { authPath } from "../store/config.ts";
+import { modelsPath, readModelSources, readModelsText, writeModelsFile } from "../store/models.ts";
+import { publishModelCatalog } from "./model-catalog.ts";
+import type { App } from "./startup.ts";
+import type { DialogHost } from "../tui/ui/dialog.ts";
+import type { ListItem } from "../tui/ui/list-model.ts";
+type SelectItem = ListItem;
+
+/** Lists at or below this size are preselected whole; larger ones keep only known models. magpie uses 24. */
+const PRESELECT_ALL = 24;
+
+export interface ConnectHost {
+  app: App;
+  wizard: Pick<DialogHost, "push" | "reset" | "pop" | "top" | "depth">;
+  /** Unmount the wizard. */
+  close(): void;
+  switchTo(spec: ModelSpec): Promise<void>;
+  fetch?: (input: string, init?: RequestInit) => Promise<Response>;
+}
+
+interface Draft {
+  preset: ProviderPreset;
+  id: string;
+  name: string;
+  baseUrl: string;
+  key: string;
+  /** `$VAR` / `{env:VAR}` / `!cmd`: stays in config, never stored. */
+  reference?: string;
+  previous?: readonly string[];
+}
+
+export function providerReady(app: App, provider: string): { ready: number; source?: string } {
+  const models = app.catalog.filter(model => model.provider === provider);
+  const resolved = models.map(model => app.credentialOf(model)).find(got => got.ok);
+  return { ready: resolved ? models.filter(model => app.credentialOf(model).ok).length : 0, ...(resolved?.ok ? { source: resolved.source } : {}) };
+}
+
+function providerName(app: App, id: string): string {
+  return SOURCE_PROVIDERS[id]?.name ?? (app.catalog.find(model => model.provider === id) ? connectedName(id) : id);
+}
+
+function connectedName(id: string): string {
+  return CUSTOM_PRESETS.find(preset => preset.id === id)?.label ?? id;
+}
+
+/**
+ * Entry points from `/login`. API-key and subscription sign-in stay on the
+ * login picker itself (their masked editor and OAuth flows are fixed by
+ * tests); the wizard owns what login never did: custom endpoints and
+ * per-provider model choice.
+ */
+export function startConnect(host: ConnectHost, entry: "custom" | "manage"): void {
+  const { app, wizard } = host;
+  if (entry === "custom") {
+    wizard.push({
+      kind: "list", keep: true,
+      title: "Which protocol does the endpoint speak?",
+      items: CUSTOM_PRESETS.map(preset => ({ value: preset.id, label: preset.label, description: preset.hint ?? "" })),
+      onPick: item => { const preset = presetById(item.value); if (preset) beginPreset(host, preset); },
+    });
+    return;
+  }
+  const connected = [...new Set(app.catalog.map(model => model.provider))].filter(id => providerReady(app, id).ready > 0).sort();
+  if (connected.length === 0) {
+    wizard.push({ kind: "message", title: "No provider is connected yet", lines: ["Choose a subscription, an API-key provider or a custom endpoint from /login first."], onDone: () => host.close() });
+    return;
+  }
+  wizard.push({
+    kind: "list", keep: true,
+    title: `${connected.length} connected · choose one to manage`,
+    items: connected.map(id => {
+      const state = providerReady(app, id);
+      return { value: id, label: providerName(app, id), description: `${state.ready} model${state.ready === 1 ? "" : "s"} · ${state.source ?? "configured"}` };
+    }),
+    onPick: item => manage(host, item.value),
+  });
+}
+
+/** A provider configured by hand (or by an earlier /login) that is not a preset. */
+function customFromCatalog(app: App, id: string): ProviderPreset | undefined {
+  const model = app.catalog.find(candidate => candidate.provider === id);
+  if (!model) return undefined;
+  return { id, label: id, api: model.api, baseUrl: model.baseUrl ?? "", catalog: false, custom: true };
+}
+
+function manage(host: ConnectHost, id: string): void {
+  const { app, wizard } = host;
+  const preset = presetById(id) ?? customFromCatalog(app, id);
+  if (!preset) return;
+  const enabled = app.catalog.filter(model => model.provider === id).map(model => model.id);
+  wizard.push({
+    kind: "list", keep: true,
+    title: providerName(app, id),
+    items: [
+      { value: "models", label: "Choose models", description: "list the provider's models again and pick which appear in /model" },
+      { value: "key", label: "Replace API key", description: app.auth[id] ? `stored in ${authPath()}` : "currently from the environment or config" },
+      { value: "remove", label: "Disconnect", description: "remove the stored key and this provider's endpoint config" },
+    ],
+    onPick: async item => {
+      const sample = app.catalog.find(model => model.provider === id);
+      const baseUrl = sample?.baseUrl ?? preset.baseUrl;
+      const got = sample ? app.credentialOf(sample) : undefined;
+      const draft: Draft = { preset, id, name: preset.custom ? id : preset.label, baseUrl, key: got?.ok ? got.key : "", previous: enabled };
+      if (item.value === "models") { await fetchModels(host, draft); return; }
+      if (item.value === "key") { askKey(host, draft); return; }
+      await disconnect(host, id);
+    },
+  });
+}
+
+function beginPreset(host: ConnectHost, preset: ProviderPreset): void {
+  const { app, wizard } = host;
+  const draft: Draft = { preset, id: preset.id, name: preset.label, baseUrl: preset.baseUrl, key: "" };
+  if (!preset.custom) { askKey(host, draft); return; }
+  wizard.push({
+    kind: "form", keep: true,
+    title: `${preset.label} · base URL`,
+    label: "URL",
+    value: preset.baseUrl,
+    hint: preset.api === "anthropic-messages" ? "the root, e.g. https://gateway.example.com/anthropic · Enter continue · Esc back"
+      : preset.api === "google-generative-ai" ? "e.g. https://generativelanguage.googleapis.com/v1beta · Enter continue · Esc back"
+      : "usually ends in /v1 · a pasted …/chat/completions is trimmed · Enter continue · Esc back",
+    validate: value => /^https?:\/\/[^\s/]+/.test(value) ? undefined : "Enter an http(s) URL",
+    onSubmit: value => {
+      draft.baseUrl = normalizeBaseUrl(value);
+      const taken = new Set(app.catalog.map(model => model.provider).filter(id => !(id in app.auth) && SOURCE_PROVIDERS[id] !== undefined));
+      const suggested = preset.keyless ? preset.id : suggestProviderId(draft.baseUrl, taken);
+      wizard.push({
+        kind: "form", keep: true,
+        title: `${preset.label} · name`,
+        label: "Provider ID",
+        value: suggested,
+        hint: "shown in /model as <id>/<model>; lowercase letters, digits, - and _",
+        validate: id => !validProviderId(id) ? "Use lowercase letters, digits, - and _ (start with a letter or digit)"
+          : SOURCE_PROVIDERS[id] !== undefined ? `"${id}" is a built-in provider; pick another id or choose it from the list` : undefined,
+        onSubmit: id => {
+          draft.id = id;
+          draft.name = id;
+          if (preset.keyless) { void fetchModels(host, draft); return; }
+          askKey(host, draft);
+        },
+      });
+    },
+  });
+}
+
+function askKey(host: ConnectHost, draft: Draft): void {
+  const { app, wizard } = host;
+  const sample = app.catalog.find(model => model.provider === draft.id);
+  const existing = sample ? app.credentialOf(sample) : undefined;
+  const reuse = existing?.ok ? existing.source : undefined;
+  wizard.push({
+    kind: "form", keep: true,
+    title: `${draft.name} · API key`,
+    label: "Key",
+    secret: true,
+    hint: [reuse ? `empty keeps the current key (${reuse})` : draft.preset.keyUrl ? `get one at ${draft.preset.keyUrl}` : "paste the key",
+      "$VAR reads the environment", "Enter continue · Esc back"].join(" · "),
+    validate: value => value.length === 0 && !reuse ? "Paste a key, or $VAR to read one from the environment" : undefined,
+    onSubmit: async value => {
+      if (value.length === 0 && existing?.ok) draft.key = existing.key;
+      else if (/^(\$|\{env:|!)/.test(value)) {
+        draft.reference = value;
+        const name = /^\$\{?([A-Za-z_][A-Za-z0-9_]*)\}?$/.exec(value)?.[1] ?? /^\{env:([A-Za-z_][A-Za-z0-9_]*)\}$/.exec(value)?.[1];
+        draft.key = name ? process.env[name] ?? "" : "";
+      } else draft.key = value;
+      await fetchModels(host, draft);
+    },
+  });
+}
+
+async function fetchModels(host: ConnectHost, draft: Draft): Promise<void> {
+  const { app, wizard } = host;
+  const family = discoveryFamily(draft.preset.api);
+  const known = app.catalog.filter(model => model.provider === draft.id);
+  const builtin = loadCatalog({ userText: null }).models.filter(model => model.provider === draft.id);
+  const catalogModels = [...new Map([...builtin, ...known].map(model => [model.id, model])).values()];
+  if (!family) { chooseModels(host, draft, catalogModels.map(toDiscovered), undefined); return; }
+  const abort = new AbortController();
+  wizard.push({ kind: "busy", title: "models", message: `Listing models from ${draft.baseUrl} …`, onCancel: () => abort.abort() });
+  const headers = Object.fromEntries(Object.entries(providerAccess(known[0] ?? ({} as ModelSpec)).headers ?? {}).filter((entry): entry is [string, string] => typeof entry[1] === "string" && !entry[1].includes("$")));
+  const result = await discoverModels({ family, baseUrl: draft.baseUrl, key: draft.key, headers, fetch: host.fetch ?? ((input, init) => globalThis.fetch(input, init)), signal: abort.signal });
+  if (abort.signal.aborted || wizard.top?.kind !== "busy") return;
+  if (result.ok) {
+    const live = result.models;
+    // Catalog metadata wins for display; the live list decides availability.
+    const merged = live.map(model => {
+      const twin = catalogModels.find(candidate => candidate.id === model.id);
+      return twin ? { ...toDiscovered(twin), ...model, name: model.name ?? twin.name } : model;
+    });
+    chooseModels(host, draft, merged, `${live.length} models from ${result.url}`, true);
+    return;
+  }
+  const options: SelectItem[] = [
+    { value: "retry", label: "Retry", description: result.reason },
+    { value: "key", label: "Change the API key" },
+    ...(draft.preset.custom ? [{ value: "url", label: "Change the base URL", description: draft.baseUrl }] : []),
+    ...(catalogModels.length ? [{ value: "catalog", label: `Use the ${catalogModels.length} built-in models`, description: "skip the live list" }] : []),
+    { value: "manual", label: "Type model IDs", description: "for endpoints without a /models listing" },
+  ];
+  wizard.push({
+    kind: "list", keep: true,
+    title: `Could not list models: ${result.reason}`,
+    items: options,
+    onPick: async item => {
+      if (item.value === "retry") { wizard.pop(); await fetchModels(host, draft); }
+      else if (item.value === "key") { wizard.pop(); wizard.pop(); askKey(host, draft); }
+      else if (item.value === "url") { while (wizard.depth > 1 && wizard.top?.title !== `${draft.preset.label} · base URL`) wizard.pop(); }
+      else if (item.value === "catalog") chooseModels(host, draft, catalogModels.map(toDiscovered), "built-in catalog");
+      else wizard.push({
+        kind: "form", keep: true, title: "Model IDs", label: "IDs", hint: "comma or space separated, exactly as the provider names them · Enter save",
+        validate: value => value.split(/[\s,]+/).filter(Boolean).length ? undefined : "Enter at least one model id",
+        onSubmit: async value => { await save(host, draft, value.split(/[\s,]+/).filter(Boolean).map(id => ({ id }))); },
+      });
+    },
+  }, true);
+}
+
+function toDiscovered(model: ModelSpec): DiscoveredModel {
+  return { id: model.id, ...(model.name !== model.id ? { name: model.name } : {}),
+    ...(model.contextWindow ? { contextWindow: model.contextWindow } : {}), ...(model.maxTokens ? { maxTokens: model.maxTokens } : {}) };
+}
+
+function chooseModels(host: ConnectHost, draft: Draft, models: readonly DiscoveredModel[], source: string | undefined, replace = false): void {
+  const { app, wizard } = host;
+  const chat = models.filter(model => likelyChatModel(model.id));
+  const known = new Set(app.catalog.filter(model => model.provider === draft.id).map(model => model.id));
+  const preselect = (model: DiscoveredModel): boolean => {
+    if (draft.previous) return draft.previous.includes(model.id);
+    if (!likelyChatModel(model.id)) return false;
+    if (chat.length <= PRESELECT_ALL) return true;
+    return known.has(model.id) || catalogTwin(model.id, app.catalog) !== undefined && draft.preset.custom === false;
+  };
+  const ordered = [...chat, ...models.filter(model => !likelyChatModel(model.id))];
+  const items: ListItem[] = ordered.map(model => ({
+    value: model.id,
+    label: model.id,
+    description: [model.name && model.name !== model.id ? model.name : "", model.contextWindow ? `${Math.round(model.contextWindow / 1000)}k ctx` : "", likelyChatModel(model.id) ? "" : "not a chat model?"].filter(Boolean).join(" · "),
+  }));
+  wizard.push({
+    kind: "list", multi: true, keep: true,
+    title: `${draft.name} · models to enable${source ? `  (${source})` : ""}`,
+    items, checked: ordered.filter(preselect).map(model => model.id),
+    hint: "space toggle · ctrl+a all · enter save · esc back",
+    onSubmitChecked: async values => {
+      if (!values.length) { fail(host, "Select at least one model (space toggles, ctrl+a selects all)"); return; }
+      await save(host, draft, ordered.filter(model => values.includes(model.id)));
+    },
+  }, replace);
+}
+
+async function save(host: ConnectHost, draft: Draft, chosen: readonly DiscoveredModel[]): Promise<void> {
+  const { app, wizard } = host;
+  const read = await readModelsText();
+  let json: unknown = {};
+  if (read.error) { fail(host, `${read.error}; nothing was changed`); return; }
+  if (read.text !== null && read.text.trim().length) {
+    try { json = JSON.parse(read.text); }
+    catch { fail(host, `${modelsPath()} is not valid JSON; fix it first — nothing was changed`); return; }
+  }
+  const catalogDefault = SOURCE_PROVIDERS[draft.id]?.baseUrl;
+  const keyless = draft.preset.keyless === true;
+  const next = applyConnect(json, {
+    id: draft.id, name: draft.name, api: draft.preset.api, baseUrl: draft.baseUrl, catalog: !draft.preset.custom,
+    ...(catalogDefault ? { catalogBaseUrl: catalogDefault } : {}), keyless,
+    ...(draft.reference ? { keyReference: draft.reference } : {}), chosen,
+  }, loadCatalog({ userText: null }).models);
+  if (!keyless && !draft.reference && draft.key && (app.auth[draft.id]?.type !== "api_key" || app.auth[draft.id]?.type === "api_key" && (app.auth[draft.id] as { key: string }).key !== draft.key)) {
+    const auth = { ...app.auth, [draft.id]: { type: "api_key" as const, key: draft.key } };
+    await writeAuthFile(auth);
+    app.auth[draft.id] = auth[draft.id];
+  }
+  await writeModelsFile(next);
+  const loaded = loadCatalog(await readModelSources());
+  await publishModelCatalog(app, loaded.models);
+  const ready = app.catalog.filter(model => model.provider === draft.id && app.credentialOf(model).ok);
+  const warnings = loaded.warnings.filter(warning => warning.includes(draft.id));
+  if (ready.length === 0) {
+    fail(host, warnings[0] ?? "saved, but no model of this provider resolves a credential yet — check the key");
+    return;
+  }
+  app.io.say(app.io.palette.green(`  connected ${draft.name}`) + app.io.palette.dim(`  ${ready.length} model${ready.length === 1 ? "" : "s"} · ${modelsPath()}`));
+  wizard.reset({
+    kind: "list",
+    title: `Connected ${draft.name} · ${ready.length} model${ready.length === 1 ? "" : "s"} ready. Switch now?`,
+    items: [
+      ...ready.map(model => ({ value: modelKey(model), label: model.id, description: model.name !== model.id ? model.name : "" })),
+      { value: "stay", label: "Keep the current model", description: modelKey(app.providerConfig.spec) },
+    ],
+    onPick: async item => {
+      host.close();
+      const spec = app.catalog.find(model => modelKey(model) === item.value);
+      if (spec) await host.switchTo(spec);
+    },
+  });
+}
+
+async function disconnect(host: ConnectHost, id: string): Promise<void> {
+  const { app } = host;
+  const read = await readModelsText();
+  if (read.text !== null && read.text.trim().length) {
+    let json: unknown;
+    try { json = JSON.parse(read.text); } catch { fail(host, `${modelsPath()} is not valid JSON; nothing was changed`); return; }
+    await writeModelsFile(applyDisconnect(json, id));
+  }
+  if (app.auth[id] !== undefined) {
+    const auth = { ...app.auth };
+    delete auth[id];
+    await writeAuthFile(auth);
+    delete app.auth[id];
+  }
+  const loaded = loadCatalog(await readModelSources());
+  if (app.providerConfig.spec.provider === id) app.io.say(app.io.palette.yellow("  the current model belonged to this provider; choose another with /model"));
+  await publishModelCatalog(app, loaded.models);
+  const left = providerReady(app, id).ready;
+  app.io.say(app.io.palette.green(`  disconnected ${id}`) + (left ? app.io.palette.dim(`  (${left} models still resolve a key from the environment)`) : ""));
+  host.close();
+}
+
+function fail(host: ConnectHost, reason: string): void {
+  host.wizard.push({ kind: "message", title: "Not saved", lines: [reason] });
+}

package/src/apps/render.ts

@@ -10,9 +10,8 @@
 
 import { assertNever } from "../core/exhaustive.ts";
 import type { LoopEvent } from "../runtime/loop.ts";
-import { renderMarkdown } from "../tui/markdown.ts";
 import { ANSI as ANSI_STYLE, IDENTITY, type Style } from "../tui/style.ts";
-import { renderToolView, type ToolViewEvent } from "../tui/toolview.ts";
+import { toolCard, toolDetail } from "../tui/ui/tool-card.ts";
 
 export interface Palette {
   dim: (s: string) => string;
@@ -123,24 +122,6 @@ export interface FormatFlags {
   readonly thinkingExpanded?: boolean;
 }
 
-export function toToolView(e: LoopEvent): ToolViewEvent | null {
-  switch (e.kind) {
-    case "thinking":
-      return { kind: "thinking", text: e.text ?? "" };
-    case "tool_call":
-      return { kind: "tool_call", tool: e.tool ?? { name: "", input: {} } };
-    case "tool_result":
-      return {
-        kind: "tool_result",
-        text: e.text ?? "",
-        ok: e.ok !== false,
-        ...(e.tool !== undefined ? { tool: e.tool } : {}),
-      };
-    default:
-      return null;
-  }
-}
-
 export function formatEvent(
   e: LoopEvent,
   C: Palette,
@@ -150,34 +131,28 @@ export function formatEvent(
 ): string[] {
   const md = markdownStyle(C, style);
   switch (e.kind) {
-    case "thinking":
-      return renderToolView(
-        { kind: "thinking", text: e.text ?? "" },
-        flags.thinkingExpanded === true,
-        width,
-        md,
-      );
+    case "thinking": {
+      // Print mode sends this to stderr, so 2>&1 can still read the reasoning in full.
+      const text = (e.text ?? "").trim();
+      void flags;
+      return text ? text.split("\n").map(line => C.dim(`  ${line}`)) : [];
+    }
     case "assistant_text":
-      return renderMarkdown(e.text ?? "", width, md);
-    case "tool_call":
-      return renderToolView(
-        { kind: "tool_call", tool: e.tool ?? { name: "", input: {} } },
-        flags.toolsExpanded === true,
-        width,
-        md,
-      );
-    case "tool_result":
-      return renderToolView(
-        {
-          kind: "tool_result",
-          text: e.text ?? "",
-          ok: e.ok !== false,
-          ...(e.tool !== undefined ? { tool: e.tool } : {}),
-        },
-        flags.toolsExpanded === true,
-        width,
-        md,
-      );
+      // Markdown stays source text in a pipe: scripts read it, and terminals render the TUI.
+      return (e.text ?? "").split("\n");
+    case "tool_call": {
+      const tool = e.tool ?? { name: "", input: {} };
+      const card = toolCard({ name: tool.name, input: tool.input, result: null });
+      return [C.cyan(`  → ${tool.name}${card.summary ? ` ${card.summary}` : ""}`)];
+    }
+    case "tool_result": {
+      const tool = e.tool ?? { name: "", input: {} };
+      const call = { name: tool.name, input: tool.input, result: { text: e.text ?? "", ok: e.ok !== false } };
+      const card = toolCard(call);
+      const head = `    ${e.ok === false ? "err" : "ok "}${card.evidence ? `  ${card.evidence}` : ""}`;
+      const body = flags.toolsExpanded === true ? toolDetail({ ...call, input: tool.name === "bash" ? {} : tool.input }, width - 6, md).map(line => `      ${line}`) : [];
+      return [e.ok === false ? C.red(head) : C.dim(head), ...body];
+    }
     case "usage": {
       const u = e.usage!;
       const line =