char-slop/berry

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

Charlotte Somtweak the mechanics of extension configuration a little6ae9dd32026-10-11

import type { JsonValue } from "@berry/api";
import { type ConfigurationContext, defineRenderers } from "@berry/api/web.ts";

type Control = HTMLInputElement | HTMLSelectElement;

export default defineRenderers({
  event(event) {
    if (
      typeof event === "object" && event !== null && !Array.isArray(event) &&
      event.type === "configured"
    ) return null;
  },
  configuration() {
    let context: ConfigurationContext | null = null;
    let shown: Readonly<Record<string, JsonValue>> = {};
    const controls = new Map<string, Control>();
    const labels = new Map<string, HTMLElement>();
    const wide = { gridColumn: "1 / -1" };

    const field = (
      key: string,
      label: string,
      input: Control,
      span = false,
    ) => {
      controls.set(key, input);
      const element = (
        <label
          class="field"
          style={span ? { ...wide, minWidth: "0" } : { minWidth: "0" }}
        >
          <span>{label}</span>
          {input}
        </label>
      ) as HTMLElement;
      labels.set(key, element);
      return element;
    };
    const select = (choices: string[]) =>
      (
        <select style={{ minWidth: "0" }}>
          {choices.map((choice) => <option value={choice}>{choice}</option>)}
        </select>
      ) as HTMLSelectElement;
    const text = (placeholder: string, decimal = false) =>
      (
        <input
          type="text"
          placeholder={placeholder}
          inputMode={decimal ? "decimal" : "text"}
          style={{ minWidth: "0" }}
        />
      ) as HTMLInputElement;

    const routing = (
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "0.35rem 0.6rem",
          minWidth: "0",
        }}
      >
        {field(
          "sort",
          "Sort providers",
          select(["default", "throughput", "latency", "price"]),
          true,
        )}
        {field("only", "Allowed providers", text("any"))}
        {field("ignore", "Excluded providers", text("none"))}
        {field("maxPromptPrice", "Max input $/M", text("no cap", true))}
        {field("maxCompletionPrice", "Max output $/M", text("no cap", true))}
        {field("allowFallbacks", "Fallbacks", select(["default", "yes", "no"]), true)}
      </div>
    ) as HTMLElement;
    const status = <p class="configuration-status" role="status" aria-live="polite" />;
    const form = (
      <fieldset
        class="configuration"
        style={{
          border: "1px solid var(--line)",
          borderRadius: "0.35rem",
          padding: "0.5rem 0.6rem 0.6rem",
        }}
        disabled
      >
        <legend style={{ padding: "0 0.35rem", marginBottom: "-0.2rem" }}>openrouter</legend>
        {routing}
        {status}
      </fieldset>
    ) as HTMLFieldSetElement;
    const element = <div hidden>{form}</div> as HTMLElement;

    const read = (input: Control): JsonValue =>
      input instanceof HTMLInputElement && input.type === "checkbox" ? input.checked : input.value;
    const commit = (event: Event) => {
      const key = [...controls].find(([, input]) => input === event.target)
        ?.[0];
      if (!context?.values || key === undefined) return;
      const value = read(controls.get(key)!);
      if (value === context.values[key]) return;
      // the error is shown from the context, and the field keeps what was entered until it is fixed
      void context.save({ [key]: value }).catch(() => {});
    };
    form.addEventListener("input", commit);
    form.addEventListener("change", commit);
    form.addEventListener("keydown", (event) => {
      if (event.key !== "Enter" || context?.tid === null) return;
      event.preventDefault();
      (event.target as HTMLElement).blur();
    });

    return {
      element,
      update(next) {
        context = next;
        element.hidden = next.model?.provider !== "openrouter";
        for (const [key, label] of labels) {
          label.title = next.schema.properties[key]?.description ?? "";
        }
        const values = next.values;
        form.disabled = values === null;
        if (values) {
          for (const [key, input] of controls) {
            if (
              Object.is(values[key], shown[key]) ||
              input === document.activeElement
            ) continue;
            const value = values[key] ?? next.schema.properties[key]?.default ??
              null;
            if (
              input instanceof HTMLInputElement && input.type === "checkbox"
            ) {
              input.checked = value === true;
            } else input.value = value === null ? "" : String(value);
          }
          shown = values;
        }
        status.classList.toggle("error", next.error !== null);
        status.textContent = next.error ??
          (next.saveStatus === "saving" && next.tid !== null
            ? "applying configuration (pending if agent is busy)"
            : "");
      },
    };
  },
});