harness-mix 0.1.0

package/src/native-ui/renderer-extension/src/settings/core.ts

@@ -0,0 +1,158 @@
+import { isRendererSettingsIconName, type RendererSettingsIconName } from "./icons.js";
+
+const SETTINGS_PAGE_ID_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u;
+const MAX_SETTINGS_PAGE_ID_LENGTH = 48;
+const MAX_SETTINGS_PAGE_LABEL_LENGTH = 64;
+
+export interface RendererSettingsAsyncHandlers<T> {
+  success(value: T): void;
+  failure(error: unknown): void;
+}
+
+export interface RendererSettingsPageMountContext {
+  content: HTMLElement;
+  signal: AbortSignal;
+  runLatest<T>(
+    operation: (signal: AbortSignal) => Promise<T>,
+    handlers: RendererSettingsAsyncHandlers<T>,
+  ): Promise<void>;
+}
+
+export interface RendererSettingsPageDefinition {
+  readonly id: string;
+  readonly label: string;
+  readonly icon: RendererSettingsIconName;
+  mount(context: RendererSettingsPageMountContext): (() => void) | undefined;
+}
+
+export interface RendererSettingsPageRegistry {
+  readonly pages: readonly RendererSettingsPageDefinition[];
+  readonly defaultPageId: string;
+  getPage(pageId: string): RendererSettingsPageDefinition | undefined;
+}
+
+function normalizedPage(
+  page: RendererSettingsPageDefinition,
+): Readonly<RendererSettingsPageDefinition> {
+  if (
+    page.id.length === 0 ||
+    page.id.length > MAX_SETTINGS_PAGE_ID_LENGTH ||
+    !SETTINGS_PAGE_ID_PATTERN.test(page.id)
+  ) {
+    throw new Error(`Invalid settings page ID: ${page.id || "(empty)"}`);
+  }
+  const label = page.label.trim();
+  if (label.length === 0 || label.length > MAX_SETTINGS_PAGE_LABEL_LENGTH) {
+    throw new Error(`Invalid settings page label for ${page.id}`);
+  }
+  if (!isRendererSettingsIconName(page.icon)) {
+    throw new Error(`Unknown settings page icon for ${page.id}`);
+  }
+  if (typeof page.mount !== "function") {
+    throw new Error(`Settings page ${page.id} has no mount function`);
+  }
+  return Object.freeze({ ...page, label });
+}
+
+export function createRendererSettingsPageRegistry(
+  definitions: readonly RendererSettingsPageDefinition[],
+  defaultPageId?: string,
+): RendererSettingsPageRegistry {
+  if (definitions.length === 0) throw new Error("Settings page registry cannot be empty");
+  const resolvedDefaultPageId = defaultPageId ?? definitions[0]?.id ?? "";
+  const pages = definitions.map(normalizedPage);
+  const byId = new Map<string, RendererSettingsPageDefinition>();
+  for (const page of pages) {
+    if (byId.has(page.id)) throw new Error(`Duplicate settings page ID: ${page.id}`);
+    byId.set(page.id, page);
+  }
+  if (!byId.has(resolvedDefaultPageId)) {
+    throw new Error(`Default settings page is not registered: ${resolvedDefaultPageId}`);
+  }
+  const frozenPages = Object.freeze([...pages]);
+  return Object.freeze({
+    pages: frozenPages,
+    defaultPageId: resolvedDefaultPageId,
+    getPage(pageId: string) {
+      return byId.get(pageId);
+    },
+  });
+}
+
+export class RendererSettingsNavigationState {
+  #activePageId: string;
+
+  constructor(readonly registry: RendererSettingsPageRegistry) {
+    this.#activePageId = registry.defaultPageId;
+  }
+
+  get activePageId(): string {
+    return this.#activePageId;
+  }
+
+  select(pageId: string): boolean {
+    if (!this.registry.getPage(pageId)) throw new Error(`Unknown settings page: ${pageId}`);
+    if (this.#activePageId === pageId) return false;
+    this.#activePageId = pageId;
+    return true;
+  }
+
+  reset(): boolean {
+    return this.select(this.registry.defaultPageId);
+  }
+}
+
+export class RendererSettingsPageScope {
+  readonly #pageController = new AbortController();
+  #requestController: AbortController | null = null;
+  #requestGeneration = 0;
+  #disposed = false;
+
+  get signal(): AbortSignal {
+    return this.#pageController.signal;
+  }
+
+  get disposed(): boolean {
+    return this.#disposed;
+  }
+
+  async runLatest<T>(
+    operation: (signal: AbortSignal) => Promise<T>,
+    handlers: RendererSettingsAsyncHandlers<T>,
+  ): Promise<void> {
+    if (this.#disposed) throw new Error("Settings page scope is disposed");
+    this.#requestController?.abort();
+    const controller = new AbortController();
+    this.#requestController = controller;
+    const generation = ++this.#requestGeneration;
+    const abortRequest = (): void => controller.abort();
+    this.signal.addEventListener("abort", abortRequest, { once: true });
+    try {
+      const value = await operation(controller.signal);
+      if (this.#isCurrent(controller, generation)) handlers.success(value);
+    } catch (error) {
+      if (this.#isCurrent(controller, generation)) handlers.failure(error);
+    } finally {
+      this.signal.removeEventListener("abort", abortRequest);
+      if (this.#requestController === controller) this.#requestController = null;
+    }
+  }
+
+  dispose(): void {
+    if (this.#disposed) return;
+    this.#disposed = true;
+    this.#requestGeneration += 1;
+    this.#requestController?.abort();
+    this.#requestController = null;
+    this.#pageController.abort();
+  }
+
+  #isCurrent(controller: AbortController, generation: number): boolean {
+    return (
+      !this.#disposed &&
+      !controller.signal.aborted &&
+      this.#requestController === controller &&
+      this.#requestGeneration === generation
+    );
+  }
+}

package/src/native-ui/renderer-extension/src/settings/harness-accounts.ts

@@ -0,0 +1,134 @@
+import type { HarnessAccountListResult } from "@codexhost/shared-contracts";
+import { KNOWN_RENDERER_AGENTS } from "../agent-selection-state.js";
+import { createRendererAgentIcon } from "../renderer-agent-icon.js";
+import { renderAccountUsage, type AccountUsageDisplay } from "./accounts-usage.js";
+import type { RendererSettingsPageMountContext } from "./core.js";
+import type { RendererSettingsMessages } from "./localization.js";
+
+export interface RendererHarnessAccountClient {
+  listHarnessAccounts?(): Promise<HarnessAccountListResult>;
+}
+
+/** Read-only telemetry, deliberately separate from Codex Account IDs and mutations. */
+export function mountHarnessAccounts(
+  context: RendererSettingsPageMountContext,
+  messages: RendererSettingsMessages,
+  getClient: () => RendererHarnessAccountClient | null,
+  onChange: () => void,
+) {
+  const document = context.content.ownerDocument;
+  const section = document.createElement("section");
+  section.className = "settings-harness-accounts";
+  section.hidden = true;
+  const heading = document.createElement("h2");
+  heading.className = "settings-harness-accounts__title";
+  heading.textContent = messages.harnessAccountsTitle;
+  const list = document.createElement("div");
+  list.className = "settings-account-list";
+  section.append(heading, list);
+  context.content.append(section);
+  let accounts: HarnessAccountListResult["accounts"] = [];
+  let refreshing = false;
+  let query = "";
+  let display: AccountUsageDisplay = "remaining";
+
+  const render = (): void => {
+    section.hidden = accounts.length === 0;
+    list.replaceChildren();
+    const visible = accounts.filter((account) =>
+      `${account.harnessName} ${account.email ?? ""} ${account.label ?? ""} ${account.plan ?? ""}`
+        .toLocaleLowerCase()
+        .includes(query),
+    );
+    for (const account of visible) {
+      const row = document.createElement("article");
+      row.className = "settings-harness-account";
+      row.dataset.harnessId = account.harnessId;
+      const identity = document.createElement("div");
+      identity.className = "settings-harness-account__identity";
+      const name = document.createElement("strong");
+      name.className = "settings-account-email";
+      const accountName = account.email ?? account.label;
+      name.textContent = accountName ?? account.harnessName;
+      name.title = name.textContent;
+      identity.append(name);
+      const metadata = document.createElement("div");
+      metadata.className = "settings-account-metadata";
+      if (accountName) {
+        const harness = document.createElement("span");
+        harness.textContent = account.harnessName;
+        metadata.append(harness);
+      }
+      if (account.plan) {
+        if (accountName) {
+          const separator = document.createElement("span");
+          separator.textContent = "·";
+          separator.setAttribute("aria-hidden", "true");
+          metadata.append(separator);
+        }
+        const plan = document.createElement("span");
+        plan.className = "settings-account-plan";
+        plan.textContent = account.plan;
+        metadata.append(plan);
+      }
+      if (metadata.childElementCount) identity.append(metadata);
+      const usage = renderAccountUsage(
+        document,
+        { status: "ready", credits: account.credits },
+        messages,
+        display,
+        () => undefined,
+      );
+      const person = document.createElement("div");
+      person.className = "settings-account-row__person";
+      const agent = KNOWN_RENDERER_AGENTS.find((agent) => agent === account.harnessId);
+      if (agent) {
+        const logo = document.createElement("div");
+        logo.className = "settings-harness-account__logo";
+        logo.setAttribute("aria-hidden", "true");
+        logo.append(createRendererAgentIcon(agent, 28, document));
+        person.append(logo);
+      }
+      person.append(identity);
+      row.append(person);
+      if (usage) row.append(usage);
+      list.append(row);
+    }
+    if (accounts.length && !visible.length) {
+      const empty = document.createElement("p");
+      empty.className = "settings-account-empty";
+      empty.textContent = messages.accountNoMatches;
+      list.append(empty);
+    }
+  };
+  return {
+    get refreshing() {
+      return refreshing;
+    },
+    update(nextQuery: string, nextDisplay: AccountUsageDisplay) {
+      query = nextQuery;
+      display = nextDisplay;
+      render();
+    },
+    async refresh(): Promise<void> {
+      if (refreshing || context.signal.aborted) return;
+      const client = getClient();
+      if (!client?.listHarnessAccounts) return;
+      refreshing = true;
+      onChange();
+      try {
+        const result = await client.listHarnessAccounts();
+        if (!context.signal.aborted) accounts = result.accounts;
+      } catch {
+        // Older Hosts and unavailable authentication have no read-only rows.
+        if (!context.signal.aborted) accounts = [];
+      } finally {
+        refreshing = false;
+        if (!context.signal.aborted) {
+          render();
+          onChange();
+        }
+      }
+    },
+  };
+}

package/src/native-ui/renderer-extension/src/settings/icons.ts

@@ -0,0 +1,141 @@
+import type { IconNode } from "lucide";
+import createElement from "lucide/dist/esm/createElement.mjs";
+import Boxes from "lucide/dist/esm/icons/boxes.mjs";
+import Check from "lucide/dist/esm/icons/circle-check.mjs";
+import ChevronDown from "lucide/dist/esm/icons/chevron-down.mjs";
+import ChevronLeft from "lucide/dist/esm/icons/chevron-left.mjs";
+import ChevronRight from "lucide/dist/esm/icons/chevron-right.mjs";
+import ChevronUp from "lucide/dist/esm/icons/chevron-up.mjs";
+import CircleArrowUp from "lucide/dist/esm/icons/circle-arrow-up.mjs";
+import CircleOff from "lucide/dist/esm/icons/circle-off.mjs";
+import Copy from "lucide/dist/esm/icons/copy.mjs";
+import Download from "lucide/dist/esm/icons/download.mjs";
+import ExternalLink from "lucide/dist/esm/icons/external-link.mjs";
+import FolderInput from "lucide/dist/esm/icons/folder-input.mjs";
+import GripVertical from "lucide/dist/esm/icons/grip-vertical.mjs";
+import Info from "lucide/dist/esm/icons/info.mjs";
+import Languages from "lucide/dist/esm/icons/languages.mjs";
+import Network from "lucide/dist/esm/icons/network.mjs";
+import PlugZap from "lucide/dist/esm/icons/plug-zap.mjs";
+import RefreshCw from "lucide/dist/esm/icons/refresh-cw.mjs";
+import RotateCcw from "lucide/dist/esm/icons/rotate-ccw.mjs";
+import Route from "lucide/dist/esm/icons/route.mjs";
+import Settings from "lucide/dist/esm/icons/settings.mjs";
+import Stethoscope from "lucide/dist/esm/icons/stethoscope.mjs";
+import Star from "lucide/dist/esm/icons/star.mjs";
+import TriangleAlert from "lucide/dist/esm/icons/triangle-alert.mjs";
+import Ticket from "lucide/dist/esm/icons/ticket.mjs";
+import Trash from "lucide/dist/esm/icons/trash-2.mjs";
+import Terminal from "lucide/dist/esm/icons/terminal.mjs";
+import Search from "lucide/dist/esm/icons/search.mjs";
+import CircleHelp from "lucide/dist/esm/icons/circle-question-mark.mjs";
+import X from "lucide/dist/esm/icons/x.mjs";
+import Users from "lucide/dist/esm/icons/users.mjs";
+import Plus from "lucide/dist/esm/icons/plus.mjs";
+import codexLogoUrl from "../assets/codex-logo-bright.png";
+
+export const RENDERER_SETTINGS_ICON_NAMES = [
+  "settings",
+  "close",
+  "star",
+  "language",
+  "connections",
+  "accounts",
+  "session-import",
+  "add",
+  "model-pool",
+  "routes",
+  "gateway",
+  "updates",
+  "about",
+  "info",
+  "external-link",
+  "refresh",
+  "unavailable",
+  "alert",
+  "check",
+  "diagnose",
+  "copy",
+  "download",
+  "chevron-left",
+  "chevron-right",
+  "chevron-down",
+  "chevron-up",
+  "grip-vertical",
+  "undo",
+  "ticket",
+  "trash",
+  "terminal",
+  "search",
+  "help",
+] as const;
+
+export type RendererSettingsIconName = (typeof RENDERER_SETTINGS_ICON_NAMES)[number];
+
+const iconNodes = {
+  settings: Settings,
+  close: X,
+  star: Star,
+  language: Languages,
+  connections: PlugZap,
+  accounts: Users,
+  "session-import": FolderInput,
+  add: Plus,
+  "model-pool": Boxes,
+  routes: Route,
+  gateway: Network,
+  updates: CircleArrowUp,
+  about: Info,
+  info: Info,
+  "external-link": ExternalLink,
+  refresh: RefreshCw,
+  unavailable: CircleOff,
+  alert: TriangleAlert,
+  check: Check,
+  diagnose: Stethoscope,
+  copy: Copy,
+  download: Download,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-down": ChevronDown,
+  "chevron-up": ChevronUp,
+  "grip-vertical": GripVertical,
+  undo: RotateCcw,
+  ticket: Ticket,
+  trash: Trash,
+  terminal: Terminal,
+  search: Search,
+  help: CircleHelp,
+} satisfies Record<RendererSettingsIconName, IconNode>;
+
+export function isRendererSettingsIconName(value: string): value is RendererSettingsIconName {
+  return (RENDERER_SETTINGS_ICON_NAMES as readonly string[]).includes(value);
+}
+
+export function createRendererSettingsIcon(name: RendererSettingsIconName, size = 18): SVGElement {
+  const icon = createElement(iconNodes[name], {
+    width: size,
+    height: size,
+    "aria-hidden": "true",
+    focusable: "false",
+  });
+  icon.classList.add("codexhost-settings-icon");
+  return icon;
+}
+
+export function createRendererSettingsBrandIcon(size = 22, ownerDocument?: Document): HTMLImageElement {
+  const doc = ownerDocument ?? (typeof document !== "undefined" ? document : undefined);
+  if (!doc) throw new Error("Document is required to create icon element");
+  const icon = doc.createElement("img");
+  icon.src = codexLogoUrl;
+  icon.alt = "";
+  icon.width = size;
+  icon.height = size;
+  icon.draggable = false;
+  icon.setAttribute("aria-hidden", "true");
+  icon.style.width = `${size}px`;
+  icon.style.height = `${size}px`;
+  icon.style.objectFit = "contain";
+  icon.classList.add("codexhost-settings-icon");
+  return icon;
+}