char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Somnotify on complete message2cf0e3c2026-10-18

import { Signal } from "@char/aftercare";
import { api, watch } from "./client.ts";
import type { ExtensionInfo, Shared } from "./conversation.tsx";
import { computed, keyed, Scope, swap } from "./ui.ts";
import { notificationsAvailable, notificationsOn, setNotifications } from "./notifications.ts";

export type ModelRef = { provider: string; modelId: string };
export type ModelInfo = {
  provider: string;
  id: string;
  name: string;
  input: ("text" | "image")[];
  reasoning: boolean;
  thinkingLevels: string[];
  contextWindow: number;
  cost: { input: number; output: number };
};

export const modelKey = (model: ModelRef | ModelInfo) =>
  `${model.provider}/${"modelId" in model ? model.modelId : model.id}`;

const tokens = (n: number) => (n >= 1_000_000 ? `${n / 1_000_000}M` : `${Math.round(n / 1000)}k`);
const price = (n: number) => `$${Number(n.toFixed(2))}`;

/** A choice among the enabled models, by provider. A model since disabled stays, marked, while it is chosen. */
export function modelSelect(
  scope: Scope,
  models: Signal<readonly ModelInfo[]>,
  enabled: Signal<readonly ModelRef[]>,
  current: Signal<string>,
  choose: (model: ModelRef) => void,
): HTMLSelectElement {
  const select = <select class="model" aria-label="Model" /> as HTMLSelectElement;
  const render = () => {
    const known = new Map(models.get().map((model) => [modelKey(model), model]));
    const keys = enabled.get().map(modelKey);
    const chosen = current.get();
    if (chosen !== "" && !keys.includes(chosen)) keys.unshift(chosen);
    const names = keys.map((key) => known.get(key)?.name ?? key.slice(key.indexOf("/") + 1));
    // in the order settings give them; a provider shows only where it tells two of the same name apart
    select.replaceChildren(
      ...(chosen === "" ? [<option value="" disabled selected>pick a model</option>] : []),
      ...keys.map((key, index) => {
        const name = names[index];
        const shared = names.indexOf(name) !== names.lastIndexOf(name);
        const marks = [
          !enabled.get().some((m) => modelKey(m) === key) && "not enabled",
          !known.has(key) && "logged out",
        ].filter(Boolean);
        return (
          <option value={key}>
            {shared ? `${name} · ${key.slice(0, key.indexOf("/"))}` : name}
            {marks.length > 0 ? ` (${marks.join(", ")})` : ""}
          </option>
        );
      }),
    );
    select.value = chosen;
  };
  for (const source of [models, enabled, current]) scope.add(source.subscribe(render).unsubscribe);
  render();
  select.addEventListener("change", () => {
    const slash = select.value.indexOf("/");
    choose({ provider: select.value.slice(0, slash), modelId: select.value.slice(slash + 1) });
  });
  return select;
}

const save = (models: readonly ModelRef[]) =>
  void api("PATCH", "/api/settings", {
    models: models.map(({ provider, modelId }) => ({ provider, modelId })),
  })
    .catch(console.error);

const refOf = (model: ModelInfo): ModelRef => ({ provider: model.provider, modelId: model.id });

/** A model row's name, id, and what it offers; a logged-out model has only its key. */
function describe(model: ModelInfo | undefined, key: string): Node[] {
  if (model === undefined) {
    return [
      <span class="model-name">{key.slice(key.indexOf("/") + 1)}</span>,
      <code>{key}</code>,
      <span class="model-meta">
        <span>logged out</span>
      </span>,
    ];
  }
  return [
    <span class="model-name">{model.name}</span>,
    <code>{model.id}</code>,
    <span class="model-meta">
      <span>{tokens(model.contextWindow)}</span>
      <span>{price(model.cost.input)} / {price(model.cost.output)}</span>
    </span>,
  ];
}

/** The enabled models in the order conversations offer them; dragged, or moved with alt+↑/↓, to reorder. */
function enabledList(
  scope: Scope,
  models: Signal<readonly ModelInfo[]>,
  enabled: Signal<readonly ModelRef[]>,
) {
  const list = <ol class="enabled-list" />;
  // the row a keyboard move should keep focus on once the new order comes back
  let refocus: string | null = null;
  const move = (from: number, to: number) => {
    const order = [...enabled.get()];
    if (to < 0 || to >= order.length || to === from) return;
    const [moved] = order.splice(from, 1);
    order.splice(to, 0, moved);
    save(order);
  };
  const changed = new Signal(0);
  for (const source of [models, enabled]) {
    scope.add(source.subscribe(() => changed.set(changed.get() + 1)).unsubscribe);
  }
  swap(scope, list, changed, () => {
    const known = new Map(models.get().map((model) => [modelKey(model), model]));
    const rows = enabled.get().map((ref, index) => {
      const key = modelKey(ref);
      const row = (
        <li class="model-row" tabIndex={0} dataset={{ key }}>
          <span class="grip" title="drag to reorder" />
          <input
            type="checkbox"
            checked
            _onchange={() => save(enabled.get().filter((m) => modelKey(m) !== key))}
          />
          {describe(known.get(key), key)}
        </li>
      ) as HTMLLIElement;
      // pointer-driven, as chordpad's track reordering: any pointer, one line where the row will land
      row.addEventListener("pointerdown", (event) => {
        if (event.button !== 0 || (event.target as Element).closest("input")) return;
        // no text selection while dragging; the row still takes focus, for alt+↑/↓
        event.preventDefault();
        row.focus();
        row.setPointerCapture(event.pointerId);
        const all = [...list.children] as HTMLElement[];
        let slot = index;
        const mark = () =>
          all.forEach((other, i) => {
            const lands = slot !== index && slot !== index + 1;
            other.classList.toggle("drop-before", lands && i === slot);
            other.classList.toggle(
              "drop-after",
              lands && slot === all.length && i === all.length - 1,
            );
          });
        const moved = (e: PointerEvent) => {
          // the slot is how many rows have their middle above the pointer
          slot = all.filter((other) => {
            const box = other.getBoundingClientRect();
            return box.top + box.height / 2 < e.clientY;
          }).length;
          mark();
        };
        const done = (e: PointerEvent) => {
          row.removeEventListener("pointermove", moved);
          row.removeEventListener("pointerup", done);
          row.removeEventListener("pointercancel", done);
          row.classList.remove("dragging");
          document.body.classList.remove("reordering");
          slot = e.type === "pointercancel" ? index : slot;
          mark();
          move(index, slot > index ? slot - 1 : slot);
        };
        row.classList.add("dragging");
        document.body.classList.add("reordering");
        row.addEventListener("pointermove", moved);
        row.addEventListener("pointerup", done);
        row.addEventListener("pointercancel", done);
      });
      row.addEventListener("keydown", (event) => {
        if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
        event.preventDefault();
        refocus = key;
        move(index, index + (event.key === "ArrowUp" ? -1 : 1));
      });
      return row;
    });
    queueMicrotask(() => {
      if (refocus === null) return;
      rows.find((row) => row.dataset.key === refocus)?.focus();
      refocus = null;
    });
    return rows;
  });
  return list;
}

type ProviderInfo = {
  id: string;
  name: string;
  apiKey: { name: string } | null;
  oauth: { name: string; label: string | null; subscription: boolean } | null;
  /** How it is configured, if it is. */
  auth: { type: "api_key" | "oauth"; source?: string } | null;
  /** Whether berry holds its login, and so can log it out. */
  stored: boolean;
};

type LoginState = {
  status: "running" | "done" | "failed" | "cancelled";
  events: (
    | { type: "info"; message: string; links?: { url: string; label?: string }[] }
    | { type: "auth_url"; url: string; instructions?: string }
    | { type: "device_code"; userCode: string; verificationUri: string }
    | { type: "progress"; message: string }
  )[];
  prompt:
    | { id: number; type: "text" | "secret" | "manual_code"; message: string; placeholder?: string }
    | {
      id: number;
      type: "select";
      message: string;
      options: { id: string; label: string; description?: string }[];
    }
    | null;
  error: string | null;
};

const link = (url: string, label?: string) => (
  <a href={url} target="_blank" rel="noopener noreferrer">{label ?? url}</a>
);

/** A login as it runs on the server: what it says, what it asks, and how it ended. */
function loginDialog(provider: ProviderInfo, type: "api_key" | "oauth", settled: () => void) {
  const scope = new Scope();
  const dialog = <dialog class="dialog" /> as HTMLDialogElement;
  const state = new Signal<LoginState | null>(null);
  let id: string | null = null;
  const running = () => state.get()?.status === "running" || state.get() === null;
  const cancel = () => id && api("POST", `/api/logins/${id}/cancel`).catch(console.error);
  const close = () => {
    scope.dispose();
    dialog.close();
    dialog.remove();
    settled();
  };
  // escape cancels a running login, and closes one that has ended
  dialog.addEventListener("cancel", (event) => {
    event.preventDefault();
    if (running()) void cancel();
    else close();
  });

  // each part follows its own slice, so an event arriving mid-answer leaves the question as typed
  const events = <div class="login-events" />;
  swap(
    scope,
    events,
    state.derive((login) => login?.events ?? null),
    (list) =>
      list === null ? <p class="desc">starting…</p> : list.map((event) => {
        if (event.type === "auth_url") {
          return (
            <p>
              {event.instructions ?? "sign in on this page:"}{" "}
              {link(event.url, "open the sign-in page")}
            </p>
          );
        }
        if (event.type === "device_code") {
          return (
            <p>
              enter <code class="user-code">{event.userCode}</code> at {link(event.verificationUri)}
            </p>
          );
        }
        if (event.type === "progress") return <p class="desc">{event.message}</p>;
        return <p>{event.message} {(event.links ?? []).map((l) => link(l.url, l.label))}</p>;
      }),
  );

  const question = <div />;
  swap(scope, question, state.derive((login) => login?.prompt ?? null), (prompt) => {
    if (prompt === null) return null;
    if (prompt.type === "select") {
      return (
        <div class="question">
          <p>{prompt.message}</p>
          {prompt.options.map((option) => (
            <button
              type="button"
              class="option"
              _onclick={() => answer(prompt.id, option.id)}
            >
              <b>{option.label}</b>
              {option.description ? <span>{option.description}</span> : undefined}
            </button>
          ))}
        </div>
      );
    }
    const input = (
      // masked by css rather than type="password": a provider's key is not this site's password, and a
      // password field's form would have the browser offer to save it
      <input
        type="text"
        class={prompt.type === "secret" ? "secret" : ""}
        placeholder={prompt.placeholder ?? ""}
        autocomplete="off"
        spellcheck={false}
      />
    ) as HTMLInputElement;
    queueMicrotask(() => input.focus());
    return (
      <form
        class="question"
        _onsubmit={(event) => {
          event.preventDefault();
          answer(prompt.id, input.value);
        }}
      >
        <label>{prompt.message}</label>
        {input}
        <button type="submit" class="primary">continue</button>
      </form>
    );
  });

  const outcome = <div />;
  swap(
    scope,
    outcome,
    state.derive((login) => login ?? null),
    (login) =>
      login?.status === "done"
        ? <p class="ok">logged in</p>
        : login?.status === "failed"
        ? <p class="error">{login.error ?? "the login failed"}</p>
        : login?.status === "cancelled"
        ? <p class="desc">cancelled</p>
        : null,
  );

  const answer = (prompt: number, value: string) =>
    void api("POST", `/api/logins/${id}/answer`, { prompt, value }).catch(console.error);

  const actions = <div class="dialog-actions" />;
  swap(
    scope,
    actions,
    state.derive(() => running()),
    (busy) =>
      busy
        ? <button type="button" _onclick={() => void cancel()}>cancel</button>
        : <button type="button" class="primary" _onclick={close}>close</button>,
  );

  dialog.append(
    <h2>log in to {provider.name}</h2>,
    <p class="desc">{type === "oauth" ? provider.oauth!.name : provider.apiKey!.name}</p>,
    events,
    question,
    outcome,
    actions,
  );
  document.body.append(dialog);
  dialog.showModal();

  api<{ login: string }>("POST", `/api/providers/${provider.id}/login`, { type })
    .then(({ login }) => {
      id = login;
      scope.add(watch<LoginState>(`login:${login}`, (value) => state.set(value)));
    })
    .catch((error) =>
      state.set({
        status: "failed",
        events: [],
        prompt: null,
        error: error instanceof Error ? error.message : String(error),
      })
    );
}

/** The providers: those configured first, with how; the rest folded away, with their logins. */
function providerList(scope: Scope, shared: Shared): Element {
  const providers = new Signal<readonly ProviderInfo[]>([]);
  const refresh = () => {
    api<ProviderInfo[]>("GET", "/api/providers").then((list) => providers.set(list)).catch(
      console.error,
    );
    shared.refreshModels();
  };
  refresh();

  const how = (provider: ProviderInfo) =>
    provider.auth?.type === "oauth"
      ? "signed in"
      : provider.stored
      ? "api key"
      : provider.auth?.source ?? "configured";
  const logins = (provider: ProviderInfo) => [
    ...(provider.oauth
      ? [
        <button
          type="button"
          title={provider.oauth.name}
          _onclick={() => loginDialog(provider, "oauth", refresh)}
        >
          {provider.oauth.label ?? (provider.oauth.subscription ? "subscription" : "sign in")}
        </button>,
      ]
      : []),
    ...(provider.apiKey
      ? [
        <button
          type="button"
          title={provider.apiKey.name}
          _onclick={() => loginDialog(provider, "api_key", refresh)}
        >
          api key
        </button>,
      ]
      : []),
  ];
  const row = (provider: ProviderInfo) => (
    <div class="provider-row">
      <span class="model-name">{provider.name}</span>
      <code>{provider.id}</code>
      <span class="model-meta">
        {provider.auth ? <span class="ok">{how(provider)}</span> : undefined}
      </span>
      <span class="actions">
        {provider.stored
          ? (
            <button
              type="button"
              class="danger"
              _onclick={() =>
                api("POST", `/api/providers/${provider.id}/logout`).then(refresh).catch(
                  console.error,
                )}
            >
              log out
            </button>
          )
          : provider.auth
          ? undefined
          : logins(provider)}
      </span>
    </div>
  );

  const list = <div class="provider-list" />;
  swap(scope, list, providers, (all) => {
    const configured = all.filter((provider) => provider.auth !== null);
    const others = all.filter((provider) => provider.auth === null);
    return [
      ...configured.map(row),
      <details class="provider">
        <summary>
          <span class="provider-name">other providers</span>
          <span class="count">{String(others.length)}</span>
        </summary>
        {others.map(row)}
      </details>,
    ];
  });
  return list;
}

/** The extensions on disk and how each one's last load went, with a reload. */
function extensionList(scope: Scope, shared: Shared): Element {
  const busy = (button: HTMLButtonElement, work: Promise<unknown>) => {
    button.disabled = true;
    return work.finally(() => (button.disabled = false));
  };
  const duration = (ms: number) =>
    ms < 1000 ? `${ms.toFixed(1)} ms` : `${(ms / 1000).toFixed(2)} s`;
  type ProseState = {
    details: HTMLDetailsElement;
    fieldset: HTMLFieldSetElement;
    textarea: HTMLTextAreaElement;
    status: HTMLElement;
    dirty: boolean;
    defaultText: string;
  };
  const editors = new Map<string, ProseState>();
  let overrides: Record<string, string> | null = null;
  let saving = Promise.resolve();
  const draw = (name: string) => {
    const state = editors.get(name);
    if (!state) return;
    if (overrides === null) {
      state.fieldset.disabled = true;
      return;
    }
    state.fieldset.disabled = false;
    const effective = overrides[name] ?? state.defaultText;
    if (!state.dirty && state.textarea !== document.activeElement) {
      state.textarea.value = effective;
    }
  };
  scope.add(
    watch<{ systemPrompt?: { promptProse?: Record<string, string> } }>("settings", (value) => {
      overrides = value.systemPrompt?.promptProse ?? {};
      for (const name of editors.keys()) draw(name);
    }),
  );
  const proseEditor = (name: string, prose: { default: string } | null): Element | undefined => {
    if (!prose) return undefined;
    const cached = editors.get(name);
    if (cached) {
      if (cached.defaultText !== prose.default) {
        cached.defaultText = prose.default;
        draw(name);
      }
      return cached.details;
    }
    const textarea = <textarea rows={6} /> as HTMLTextAreaElement;
    const status = (
      <p
        class="configuration-status"
        role="status"
        aria-live="polite"
      />
    ) as HTMLElement;
    const fieldset = (
      <fieldset class="system-prompt" disabled>
        <label class="field">
          <span>prompt prose</span>
          {textarea}
          {status}
        </label>
      </fieldset>
    ) as HTMLFieldSetElement;
    const details = (
      <details>
        <summary>system prompt</summary>
        {fieldset}
      </details>
    ) as HTMLDetailsElement;
    const state: ProseState = {
      details,
      fieldset,
      textarea,
      status,
      dirty: false,
      defaultText: prose.default,
    };
    editors.set(name, state);
    textarea.setAttribute("aria-label", `${name} prompt prose`);
    textarea.addEventListener("input", () => {
      state.dirty = true;
      status.textContent = "";
    });
    textarea.addEventListener("blur", () => {
      if (!state.dirty) {
        draw(name);
        return;
      }
      const value = textarea.value;
      saving = saving.then(async () => {
        const effective = overrides?.[name] ?? state.defaultText;
        if (value !== effective) {
          status.classList.remove("error");
          status.textContent = "saving…";
          try {
            const saved = await api<{ systemPrompt: { promptProse?: Record<string, string> } }>(
              "PATCH",
              "/api/settings",
              { systemPrompt: { promptProse: { [name]: value } } },
            );
            overrides = saved.systemPrompt.promptProse ?? {};
            status.textContent = "saved";
          } catch (cause) {
            status.classList.add("error");
            status.textContent = cause instanceof Error ? cause.message : String(cause);
            return;
          }
        }
        if (textarea.value === value) state.dirty = false;
        draw(name);
      });
    });
    draw(name);
    return details;
  };
  const list = <div class="provider-list extension-list" />;
  const listed = shared.extensions.derive((all) =>
    all.filter((extension) => !extension.builtin || extension.promptProse)
  );
  const rows = keyed<ExtensionInfo, string>(
    list,
    (extension) => extension.name,
    (initial) => {
      const node = <div class="extension" /> as HTMLDivElement;
      const head = <div class="provider-row" /> as HTMLDivElement;
      node.append(head);
      let shown: Element | undefined;
      const update = (extension: ExtensionInfo) => {
        head.replaceChildren(
          <span class="model-name">{extension.name}</span>,
          <span class="description">{extension.description ?? ""}</span>,
          ...(extension.startup
            ? [
              <details class="extension-startup">
                <summary>
                  {extension.startup.status === "failed" ? "startup failed" : "startup"}{" "}
                  {duration(extension.startup.totalMs)}
                </summary>
                <dl>
                  {extension.startup.phases.map((phase) => (
                    <>
                      <dt>
                        {phase.name === "import"
                          ? "module import"
                          : phase.name === "frontend"
                          ? phase.source === "cache"
                            ? "frontend cache restore"
                            : phase.source === "build"
                            ? "frontend build"
                            : "frontend"
                          : "installation"}
                      </dt>
                      <dd>{duration(phase.durationMs)}</dd>
                    </>
                  ))}
                </dl>
              </details>,
            ]
            : []),
          <span class={extension.status === "loaded" ? "ok" : "error"}>
            {extension.status === "loaded"
              ? "loaded"
              : extension.running
              ? "reload failed"
              : "failed"}
          </span>,
          ...(extension.builtin ? [] : [
            <span class="actions">
              <button
                type="button"
                _onclick={function () {
                  void busy(this, api("POST", `/api/extensions/${extension.name}/reload`)).catch(
                    console.error,
                  );
                }}
              >
                reload
              </button>
            </span>,
          ]),
          ...(extension.directory
            ? [<code title={extension.directory}>{extension.directory}</code>]
            : []),
        );
        const failed = node.querySelector("pre.error");
        if (extension.error) {
          if (failed) failed.textContent = extension.error;
          else node.append(<pre class="error">{extension.error}</pre>);
        } else failed?.remove();
        // the same editor node while its registration persists, so a focused draft keeps focus
        const editor = proseEditor(extension.name, extension.promptProse);
        if (editor !== shown) {
          shown?.remove();
          shown = editor;
          if (editor) node.insertBefore(editor, node.querySelector("pre.error") ?? null);
        }
      };
      update(initial);
      return { node, update };
    },
  );
  const sync = () => rows.sync(listed.get());
  sync();
  scope.add(listed.subscribe(sync).unsubscribe);
  scope.add(rows.dispose);
  return list;
}

type EnvironmentSettings = { ssh: string; deno?: string };

/** The machines conversations may work on besides this one, and a form for another. */
function environmentList(scope: Scope): Element {
  const configured = new Signal<Readonly<Record<string, EnvironmentSettings>>>({});
  const error = <p class="error" /> as HTMLParagraphElement;
  let allowed = true;
  const local = (
    <input
      type="checkbox"
      checked
      _onchange={async function () {
        this.disabled = true;
        try {
          const saved = await api<{ allowLocalEnvironment?: boolean }>("PATCH", "/api/settings", {
            allowLocalEnvironment: this.checked,
          });
          allowed = saved.allowLocalEnvironment !== false;
          error.textContent = "";
        } catch (cause) {
          error.textContent = (cause as Error).message;
        } finally {
          this.checked = allowed;
          this.disabled = false;
        }
      }}
    />
  ) as HTMLInputElement;
  scope.add(
    watch<{ environments?: Record<string, EnvironmentSettings>; allowLocalEnvironment?: boolean }>(
      "settings",
      (value) => {
        configured.set(value.environments ?? {});
        allowed = value.allowLocalEnvironment !== false;
        local.checked = allowed;
      },
    ),
  );
  const change = (next: Record<string, EnvironmentSettings>) =>
    api("PATCH", "/api/settings", { environments: next }).then(
      () => (error.textContent = "", true),
      (cause) => (error.textContent = cause.message, false),
    );
  const list = <div class="provider-list environment-list" />;
  swap(
    scope,
    list,
    configured,
    (all) =>
      Object.entries(all).map(([name, { ssh, deno }]) => (
        <div class="environment-row">
          <span class="model-name" title={name}>{name}</span>
          <code title={ssh}>{ssh}</code>
          <code title={deno ?? "deno"}>{deno ?? "deno"}</code>
          <button
            type="button"
            class="danger"
            _onclick={() => {
              const { [name]: _, ...rest } = configured.get();
              void change(rest);
            }}
          >
            remove
          </button>
        </div>
      )),
  );
  const name = <input placeholder="name" required /> as HTMLInputElement;
  const ssh = <input placeholder="ssh destination" required /> as HTMLInputElement;
  const deno = <input placeholder="remote deno path (default: deno on PATH)" /> as HTMLInputElement;
  return (
    <div class="environments">
      <label class="local-environment">{local} allow conversations to work on this machine</label>
      <p class="desc">when off, they can only use the ssh environments below</p>
      {list}
      <form
        class="environment-form"
        _onsubmit={async (event) => {
          event.preventDefault();
          const added = await change({
            ...configured.get(),
            [name.value.trim()]: {
              ssh: ssh.value.trim(),
              ...(deno.value.trim() ? { deno: deno.value.trim() } : {}),
            },
          });
          if (added) name.value = ssh.value = deno.value = "";
        }}
      >
        {name}
        {ssh}
        {deno}
        <button type="submit" class="primary">add</button>
      </form>
      {error}
    </div>
  );
}

type SystemPromptSettings = {
  userName: string;
  generalGuidelines: string;
  promptProse?: Record<string, string>;
};

/** The switch for finished-turn announcements, whose permission the browser grants only from a click like it. */
function notificationSettings(): Element {
  const available = notificationsAvailable();
  const input = (
    <input
      type="checkbox"
      checked={available && notificationsOn()}
      disabled={!available}
    />
  ) as HTMLInputElement;
  const status = <p class="desc" role="status" /> as HTMLElement;
  status.textContent = available ? "" : "needs a secure context (https / localhost)";
  input.addEventListener("change", async () => {
    const wanted = input.checked;
    const on = await setNotifications(wanted);
    input.checked = on;
    status.textContent = wanted && !on ? "the browser blocked notifications for this page" : "";
  });
  return (
    <div class="notify">
      <label class="notify-row">
        {input}
        <span>notify when a conversation finishes a turn</span>
      </label>
      {status}
    </div>
  ) as HTMLElement;
}

function systemPromptEditor(scope: Scope): Element {
  let current: SystemPromptSettings | null = null;
  let saving = Promise.resolve();
  const dirty = new Set<keyof SystemPromptSettings>();
  const status = <p class="configuration-status" role="status" aria-live="polite" /> as HTMLElement;
  const fields = ([
    ["userName", "user's name"],
    ["generalGuidelines", "general guidelines"],
  ] as const).map(([key, label]) => {
    const input = (key === "userName" ? <input /> : <textarea rows={8} />) as
      | HTMLInputElement
      | HTMLTextAreaElement;
    input.addEventListener("input", () => {
      dirty.add(key);
      status.textContent = "";
    });
    input.addEventListener("blur", () => {
      if (!current || !dirty.has(key)) {
        draw();
        return;
      }
      const value = input.value;
      saving = saving.then(async () => {
        if (!current) return;
        if (value !== current[key]) {
          status.classList.remove("error");
          status.textContent = "saving…";
          try {
            const saved = await api<{ systemPrompt: SystemPromptSettings }>(
              "PATCH",
              "/api/settings",
              { systemPrompt: { [key]: value } },
            );
            current = saved.systemPrompt;
            status.textContent = "saved";
          } catch (cause) {
            status.classList.add("error");
            status.textContent = cause instanceof Error ? cause.message : String(cause);
            return;
          }
        }
        if (input.value === value) dirty.delete(key);
        draw();
      });
    });
    return {
      key,
      input,
      element: (
        <label class="field">
          <span>{label}</span>
          {input}
        </label>
      ),
    };
  });
  const draw = () => {
    if (!current) return;
    for (const { key, input } of fields) {
      if (!dirty.has(key) && input !== document.activeElement) input.value = current[key];
    }
  };
  const fieldset = (
    <fieldset class="system-prompt" disabled>
      {fields.map(({ element }) => element)}
      {status}
    </fieldset>
  ) as HTMLFieldSetElement;
  scope.add(watch<{ systemPrompt?: SystemPromptSettings }>("settings", (value) => {
    current = value.systemPrompt ?? null;
    fieldset.disabled = current === null;
    draw();
  }));
  return fieldset;
}

/** Which of the logged-in providers' models conversations may use, and in what order they are offered. */
export function settings(scope: Scope, shared: Shared): Element[] {
  const { models, enabled } = shared;
  const filter = new Signal("");
  const providers = <div class="model-list" />;
  const expanded = new Set<string>();
  const changed = new Signal(0);
  for (const source of [models, enabled, filter]) {
    scope.add(source.subscribe(() => changed.set(changed.get() + 1)).unsubscribe);
  }
  swap(scope, providers, changed, () => {
    const query = filter.get().trim().toLowerCase();
    const on = new Set(enabled.get().map(modelKey));
    const matches = models.get().filter((model) =>
      query === "" || `${model.provider}/${model.id} ${model.name}`.toLowerCase().includes(query)
    );
    return [...Map.groupBy(matches, (model) => model.provider)].map(([provider, all]) => {
      const count = all.filter((model) => on.has(modelKey(model))).length;
      return (
        <details
          class="provider"
          open={query !== "" || expanded.has(provider)}
          _ontoggle={function () {
            if (query !== "" || !this.isConnected) return;
            if (this.open) expanded.add(provider);
            else expanded.delete(provider);
          }}
        >
          <summary>
            <span class="provider-name">{provider}</span>
            <span class="count">{`${count} of ${all.length} enabled`}</span>
          </summary>
          {all.map((model) => (
            <label class="model-row">
              <input
                type="checkbox"
                checked={on.has(modelKey(model))}
                _onchange={function () {
                  const rest = enabled.get().filter((m) => modelKey(m) !== modelKey(model));
                  save(this.checked ? [...rest, refOf(model)] : rest);
                }}
              />
              {describe(model, modelKey(model))}
            </label>
          ))}
        </details>
      );
    });
  });

  return [
    <header class="bar">
      <span class="bar-title">settings</span>
    </header>,
    <div class="pane settings">
      <h2>enabled models</h2>
      <p class="desc">
        drag to reorder, uncheck to remove
      </p>
      <section
        class="enabled"
        hidden={computed(scope, [enabled], () => enabled.get().length === 0)}
      >
        {enabledList(scope, models, enabled)}
      </section>
      <h2>environments</h2>
      <p class="desc">
        remote machines for conversations
      </p>
      {environmentList(scope)}
      <h2>system prompt</h2>
      <p class="desc">
        <code>$USER</code> will be interpolated in guidelines to the configured name
      </p>
      {systemPromptEditor(scope)}
      <h2>extensions</h2>
      <p class="desc">
        from <code>…/berry/extensions/</code> and <code>~/.config/berry/extensions/</code>;{" "}
        extensions auto-reload on file change
      </p>
      {extensionList(scope, shared)}
      <h2>notifications</h2>
      <p class="desc">
        (only while open in a tab)
      </p>
      {notificationSettings()}
      <h2>available models</h2>
      <p class="desc">all models from logged-in providers</p>
      <input
        type="search"
        class="filter"
        placeholder="filter models"
        _oninput={function () {
          filter.set(this.value);
        }}
      />
      {providers}
      <h2>provider logins</h2>
      <p class="desc">
        logins shared with pi: <code>~/.pi/agent/auth.json</code>
      </p>
      {providerList(scope, shared)}
    </div>,
  ];
}