Initialize project and ignore local references

src/renderer/components/CompanyOnboarding.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Buildings, CheckCircle, FolderOpen, WarningCircle, XCircle } from "@phosphor-icons/react";
+import type { ProfileSnapshot } from "@shared/types";
+import { unwrap } from "../lib/desktop";
+import { ActionButton, Input } from "./ui";
+
+export function CompanyOnboarding({
+  connectors,
+  onDone,
+}: {
+  connectors: ProfileSnapshot["connectors"];
+  onDone: () => Promise<void>;
+}) {
+  const [companyName, setCompanyName] = useState("");
+  const [workspacePath, setWorkspacePath] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const hasReadyConnector = connectors.some((c) => c.status === "ready" || c.status === "degraded");
+
+  async function pickDirectory() {
+    setError(null);
+    const result = await window.agentCompany.pickDirectory();
+    if (!result.ok) {
+      setError(result.error.message);
+      return;
+    }
+    if (result.data) {
+      setWorkspacePath(result.data);
+    }
+  }
+
+  async function submit() {
+    if (loading) return;
+    if (!companyName.trim()) {
+      setError("Enter a company name.");
+      return;
+    }
+    if (!hasReadyConnector) {
+      setError("At least one connector must be detected before creating a company.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const companyId = unwrap(
+        await window.agentCompany.saveCompany({
+          name: companyName.trim(),
+          description: "",
+          status: "active",
+        }),
+      );
+      if (workspacePath) {
+        unwrap(
+          await window.agentCompany.saveWorkspace({
+            companyId,
+            name: "Default Workspace",
+            localPath: workspacePath,
+            repoUrl: "",
+            repoRef: "",
+            isPrimary: true,
+          }),
+        );
+      }
+      unwrap(await window.agentCompany.setCurrentCompany(companyId));
+      await onDone();
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "Unable to create the company.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="grid min-h-[100dvh] grid-cols-1 bg-[color:var(--bg)] md:grid-cols-[minmax(0,1fr)_440px]">
+      <div className="flex items-center px-8 py-12 md:px-16">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
+          className="max-w-[420px]"
+        >
+          <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">AgentCompany Desktop</div>
+          <h1 className="text-[38px] leading-[0.98] tracking-[-0.03em] text-[color:var(--text)] md:text-[48px]">
+            Welcome.
+          </h1>
+          <p className="mt-4 text-[14px] leading-relaxed text-[color:var(--muted)]">
+            We detected the following coding agents on your system. You'll configure your organization structure, goals, and agents from the dashboard after setup.
+          </p>
+          <div className="mt-8">
+            <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Detected connectors</div>
+            <div className="space-y-2.5">
+              {connectors.map((c) => {
+                const isOk = c.status === "ready" || c.status === "degraded";
+                const isFail = c.status === "not_installed";
+                return (
+                  <div key={c.id} className="flex items-center gap-2.5 text-[13px]">
+                    {isOk ? (
+                      <CheckCircle size={16} weight="fill" className="shrink-0 text-[color:var(--success)]" />
+                    ) : isFail ? (
+                      <XCircle size={16} weight="fill" className="shrink-0 text-[color:var(--muted)]" />
+                    ) : (
+                      <WarningCircle size={16} weight="fill" className="shrink-0 text-[color:var(--warn)]" />
+                    )}
+                    <span className={isOk ? "font-medium text-[color:var(--text)]" : "text-[color:var(--muted)]"}>
+                      {c.label}
+                    </span>
+                    <span className="text-[11px] text-[color:var(--muted)]">
+                      {c.status.replaceAll("_", " ")}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+            {!hasReadyConnector && (
+              <div className="mt-4 rounded-[10px] border border-[color:var(--warn)] bg-[color:var(--warn-soft)] px-4 py-3 text-[12px] text-[color:var(--warn)]">
+                No connector detected. Install at least one supported CLI tool (Claude Code, Codex, Gemini CLI, OpenCode, or Kimi Code) and restart.
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+
+      <div className="flex items-center border-l border-[color:var(--line)] bg-[color:var(--bg-subtle)] px-6 py-10 md:px-10">
+        <motion.div
+          initial={{ opacity: 0, y: 18 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.08, duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+          className="surface w-full rounded-[12px] p-7"
+        >
+          <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Getting started</div>
+          <div className="mb-1 text-[18px] font-semibold tracking-[-0.01em] text-[color:var(--text)]">Create your company</div>
+          <div className="mb-6 h-px bg-[color:var(--line)]" />
+          <div className="space-y-4">
+            <Input label="Company name" value={companyName} onChange={setCompanyName} placeholder="e.g. Acme Engineering" />
+            <div>
+              <label
+                htmlFor="onboarding-workspace-path"
+                className="mb-1.5 block text-[12px] font-medium text-[color:var(--muted-strong)]"
+              >
+                Workspace folder <span className="font-normal text-[color:var(--muted)]">(optional)</span>
+              </label>
+              <div className="flex gap-3">
+                <Input
+                  id="onboarding-workspace-path"
+                  ariaLabel="Workspace folder"
+                  value={workspacePath}
+                  onChange={setWorkspacePath}
+                  placeholder="/Users/you/project"
+                />
+                <ActionButton label="Choose" onClick={() => void pickDirectory()} icon={FolderOpen} />
+              </div>
+              <div className="mt-1.5 text-[11px] text-[color:var(--muted)]">
+                You can add more workspaces later from the dashboard.
+              </div>
+            </div>
+          </div>
+          {error ? (
+            <div className="mt-5 rounded-[10px] border border-[color:var(--danger)] bg-[color:var(--danger-soft)] px-4 py-3 text-[13px] text-[color:var(--danger)]" role="alert">
+              {error}
+            </div>
+          ) : null}
+          <div className="mt-8 flex items-center justify-end gap-4">
+            <ActionButton
+              label={loading ? "Creating..." : "Continue to dashboard"}
+              onClick={() => void submit()}
+              icon={Buildings}
+              tone="accent"
+              loading={loading}
+              disabled={!hasReadyConnector || !companyName.trim()}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/EntityWorkspace.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export function EntityWorkspace({
+  title,
+  eyebrow,
+  primary,
+  secondary,
+}: {
+  title: string;
+  eyebrow?: string;
+  primary: ReactNode;
+  secondary: ReactNode;
+}) {
+  return (
+    <div className="space-y-14">
+      <div>
+        {eyebrow ? <div className="text-[10px] uppercase tracking-[0.08em] text-[color:var(--muted)]">{eyebrow}</div> : null}
+        <h2 className={`${eyebrow ? "mt-2" : ""} text-[18px] font-semibold tracking-[-0.01em] text-[color:var(--text)]`}>{title}</h2>
+      </div>
+      <div className="space-y-14">{primary}{secondary}</div>
+    </div>
+  );
+}

src/renderer/components/connectors.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { CheckCircle } from "@phosphor-icons/react";
+import type { ConnectorRecord } from "@shared/types";
+import { ActionButton, Input, StatusPill, TextArea } from "./ui";
+
+export function ConnectorEditor({ connector, onSaved }: { connector: ConnectorRecord; onSaved: () => Promise<void> }) {
+  const [model, setModel] = useState(connector.model ?? "");
+  const [envBindingText, setEnvBindingText] = useState(connector.envBindingText);
+  const [notes, setNotes] = useState(connector.notes);
+
+  useEffect(() => {
+    setModel(connector.model ?? "");
+    setEnvBindingText(connector.envBindingText);
+    setNotes(connector.notes);
+  }, [connector]);
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
+        <div>
+          <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">Status</div>
+          <div className="flex items-center gap-3">
+            <StatusPill status={connector.status} />
+            <span className="text-[12px] text-[color:var(--muted)]">{connector.version ?? "version unknown"}</span>
+          </div>
+        </div>
+        <div>
+          <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">Capability matrix</div>
+          <div className="grid grid-cols-2 gap-2">
+            {Object.entries(connector.capabilityMatrix).map(([key, value]) => (
+              <div key={key} className={`rounded-[6px] border px-3 py-2 text-[12px] ${value ? "border-[color:var(--accent)] border-opacity-20 bg-[color:var(--accent-soft)] text-[color:var(--accent)]" : "border-[color:var(--line)] bg-[color:var(--panel-soft)] text-[color:var(--muted)]"}`}>
+                {key}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div>
+        <Input label="Command" value={connector.command} onChange={() => undefined} readOnly />
+        <div className="mt-1.5 text-[12px] leading-relaxed text-[color:var(--muted)]">
+          AgentCompany pins connector execution to the audited binary for this runtime. Command overrides are not accepted from the renderer.
+        </div>
+      </div>
+      <Input label="Model" value={model} onChange={setModel} placeholder="Leave empty to use connector default" />
+      <TextArea label="Secret bindings" value={envBindingText} onChange={setEnvBindingText} rows={4} placeholder={"OPENAI_API_KEY=my-vault-key\nANTHROPIC_API_KEY=my-anthropic-key"} />
+      <TextArea label="Operational notes" value={notes} onChange={setNotes} rows={4} />
+      <div className="grid gap-3 md:grid-cols-[auto_1fr]">
+        <ActionButton
+          label="Save connector"
+          tone="accent"
+          onClick={() => void (async () => {
+            await window.agentCompany.saveConnector({
+              id: connector.id,
+              command: connector.command,
+              model: model || null,
+              envBindingText,
+              notes,
+            });
+            await onSaved();
+          })()}
+          icon={CheckCircle}
+        />
+        <div className="rounded-[10px] border border-[color:var(--line)] bg-[color:var(--panel-soft)] px-4 py-4 text-[12px] leading-relaxed text-[color:var(--muted)]">
+          <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Configuration doc</div>
+          <pre className="mono whitespace-pre-wrap">{connector.configurationDoc}</pre>
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/ui.tsx

@@ -0,0 +1,488 @@
+import { Component, useEffect, useRef, type ElementType, type ErrorInfo, type ReactNode } from "react";
+
+export function Badge({ count, tone = "default" }: { count: number; tone?: "default" | "warn" | "danger" }) {
+  if (count <= 0) return null;
+  const toneClass = tone === "danger" ? "bg-[color:var(--danger)] text-white" : tone === "warn" ? "bg-[color:var(--warn)] text-white" : "bg-[color:var(--muted)] text-white";
+  return (
+    <span className={`ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-bold ${toneClass}`}>
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}
+
+export function SectionButton({
+  active,
+  label,
+  icon: Icon,
+  onClick,
+  badge,
+  badgeTone,
+  collapsed = false,
+}: {
+  active: boolean;
+  label: string;
+  icon: ElementType;
+  onClick: () => void;
+  badge?: number;
+  badgeTone?: "default" | "warn" | "danger";
+  collapsed?: boolean;
+}) {
+  if (collapsed) {
+    return (
+      <button
+        aria-current={active ? "page" : undefined}
+        aria-label={label}
+        title={label}
+        className={`focus-ring relative flex w-full items-center justify-center rounded-[6px] p-2 transition duration-150 ${
+          active
+            ? "bg-[color:var(--panel-soft)] text-[color:var(--text)]"
+            : "text-[color:var(--muted-strong)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
+        }`}
+        onClick={onClick}
+      >
+        <Icon size={18} weight={active ? "fill" : "regular"} className={active ? "text-[color:var(--accent)]" : ""} />
+        {badge ? (
+          <span className={`absolute right-1 top-1 h-[6px] w-[6px] rounded-full ${
+            badgeTone === "danger" ? "bg-[color:var(--danger)]" : badgeTone === "warn" ? "bg-[color:var(--warn)]" : "bg-[color:var(--muted)]"
+          }`} />
+        ) : null}
+      </button>
+    );
+  }
+  return (
+    <button
+      aria-current={active ? "page" : undefined}
+      className={`focus-ring flex w-full items-center gap-2.5 rounded-[6px] px-3 py-[7px] text-left transition duration-150 ${
+        active
+          ? "bg-[color:var(--panel-soft)] text-[color:var(--text)]"
+          : "text-[color:var(--muted-strong)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
+      }`}
+      onClick={onClick}
+    >
+      <Icon size={17} weight={active ? "fill" : "regular"} className={active ? "text-[color:var(--accent)]" : ""} />
+      <span className={`text-[13px] tracking-[0.005em] ${active ? "font-semibold" : "font-medium"}`}>{label}</span>
+      {badge ? <Badge count={badge} tone={badgeTone} /> : null}
+    </button>
+  );
+}
+
+export function Panel({
+  title,
+  eyebrow,
+  children,
+  action,
+  className = "",
+  tone = "plain",
+}: {
+  title: string;
+  eyebrow?: string;
+  children: ReactNode;
+  action?: ReactNode;
+  className?: string;
+  tone?: "plain" | "surface";
+}) {
+  return (
+    <section className={`space-y-4 ${className}`}>
+      <div className={`flex items-end justify-between gap-4 ${tone === "surface" ? "border-b border-[color:var(--line)] pb-3" : ""}`}>
+        <div>
+          {eyebrow ? <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">{eyebrow}</div> : null}
+          <h2 className="text-[18px] font-semibold tracking-[-0.01em] text-[color:var(--text)]">{title}</h2>
+        </div>
+        {action}
+      </div>
+      <div>{children}</div>
+    </section>
+  );
+}
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  width = "640px",
+}: {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  width?: string;
+}) {
+  const trapRef = useFocusTrap(open);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[color:var(--text)]/45" onClick={onClose}>
+      <div
+        ref={trapRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className="flex w-full flex-col rounded-[12px] border border-[color:var(--line)] bg-[color:var(--panel)] shadow-xl"
+        style={{ maxWidth: width, maxHeight: "80vh" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex shrink-0 items-center justify-between border-b border-[color:var(--line)] px-6 py-4">
+          <h2 className="text-[16px] font-semibold text-[color:var(--text)]">{title}</h2>
+          <button
+            type="button"
+            className="focus-ring rounded-[6px] p-1 text-[color:var(--muted)] transition hover:text-[color:var(--text)]"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
+          </button>
+        </div>
+        <div className="overflow-y-auto px-6 py-5">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+      {children}
+    </label>
+  );
+}
+
+export function Input({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  readOnly = false,
+  disabled = false,
+  label,
+  id,
+  ariaLabel,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  label?: string;
+  id?: string;
+  ariaLabel?: string;
+}) {
+  const input = (
+    <input
+      id={id}
+      aria-label={ariaLabel}
+      type={type}
+      className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)] disabled:cursor-not-allowed disabled:opacity-60"
+      value={value}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+  if (label) {
+    return (
+      <label className="block">
+        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        {input}
+      </label>
+    );
+  }
+  return input;
+}
+
+export function TextArea({
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  label,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+  label?: string;
+}) {
+  const textarea = (
+    <textarea
+      className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)]"
+      value={value}
+      rows={rows}
+      placeholder={placeholder}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+  if (label) {
+    return (
+      <label className="block">
+        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        {textarea}
+      </label>
+    );
+  }
+  return textarea;
+}
+
+export function Select({
+  value,
+  onChange,
+  options,
+  compact = false,
+  label,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ value: string; label: string }>;
+  compact?: boolean;
+  label?: string;
+}) {
+  const select = (
+    <select
+      className={`focus-ring w-full border bg-[color:var(--panel)] text-[color:var(--text)] ${
+        compact
+          ? "rounded-[6px] border-[color:var(--line)] px-2.5 py-1.5 text-[13px] font-medium"
+          : "rounded-[8px] border-[color:var(--line)] px-3.5 py-2.5 text-[14px]"
+      }`}
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value} className="bg-[color:var(--panel)] text-[color:var(--text)]">
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+  if (label) {
+    return (
+      <label className="block">
+        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        {select}
+      </label>
+    );
+  }
+  return select;
+}
+
+export function ActionButton({
+  label,
+  onClick,
+  icon: Icon,
+  tone = "default",
+  loading = false,
+  disabled = false,
+}: {
+  label: string;
+  onClick: () => void;
+  icon?: ElementType;
+  tone?: "default" | "accent" | "danger";
+  loading?: boolean;
+  disabled?: boolean;
+}) {
+  const isDisabled = loading || disabled;
+  const toneClass =
+    tone === "accent"
+      ? "border-transparent bg-[color:var(--accent)] text-white hover:brightness-90"
+      : tone === "danger"
+        ? "border-transparent bg-[color:var(--danger)] text-white hover:brightness-90"
+        : "border-[color:var(--line)] bg-[color:var(--panel)] text-[color:var(--text)] hover:bg-[color:var(--panel-soft)]";
+
+  return (
+    <button
+      className={`focus-ring inline-flex items-center gap-2 rounded-[7px] border px-3.5 py-2 text-[12px] font-semibold transition duration-150 active:translate-y-px ${toneClass} ${isDisabled ? "pointer-events-none opacity-60" : ""}`}
+      onClick={onClick}
+      disabled={isDisabled}
+      aria-busy={loading}
+    >
+      {loading ? (
+        <svg className="h-4 w-4 animate-spin" viewBox="0 0 16 16" fill="none">
+          <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" opacity="0.3" />
+          <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </svg>
+      ) : Icon ? (
+        <Icon size={16} />
+      ) : null}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+export function StatusPill({ status }: { status: string }) {
+  const positive = ["ready", "active", "running", "succeeded", "approved", "achieved", "done"].includes(status);
+  const negative = ["error", "failed", "cancelled", "blocked", "rejected", "interrupted"].includes(status);
+  const warning = ["auth_required", "degraded", "pending", "in_review", "todo", "queued"].includes(status);
+  const checking = status === "detected" || status === "not_installed";
+  const toneClass = positive
+    ? "text-[color:var(--success)]"
+    : negative
+      ? "text-[color:var(--danger)]"
+      : warning
+        ? "text-[color:var(--warn)]"
+        : "text-[color:var(--muted-strong)]";
+  const dotClass = positive
+    ? "bg-[color:var(--success)]"
+    : negative
+      ? "bg-[color:var(--danger)]"
+      : warning
+        ? "bg-[color:var(--warn)]"
+        : "bg-[color:var(--muted)]";
+
+  const displayLabel = checking ? "checking" : status.replaceAll("_", " ");
+
+  return (
+    <span className={`inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] ${toneClass}`}>
+      {checking ? (
+        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[color:var(--muted)]" aria-hidden="true" />
+      ) : (
+        <span className={`h-1.5 w-1.5 rounded-full ${dotClass}`} aria-hidden="true" />
+      )}
+      {displayLabel}
+    </span>
+  );
+}
+
+export function EmptyState({
+  title,
+  detail,
+  action,
+}: {
+  title: string;
+  detail?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="px-1 py-8 text-center">
+      <div className="mb-2 text-[15px] font-semibold text-[color:var(--text)]">{title}</div>
+      {detail ? <div className="mx-auto max-w-[48ch] text-[13px] leading-relaxed text-[color:var(--muted)]">{detail}</div> : null}
+      {action ? <div className="mt-5">{action}</div> : null}
+    </div>
+  );
+}
+
+export function ListFrame({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <div className={`border-y border-[color:var(--line)] ${className}`}>{children}</div>;
+}
+
+export function ListRow({
+  children,
+  className = "",
+  onClick,
+}: {
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+}) {
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={`focus-ring block w-full border-b border-[color:var(--line)] px-5 py-4 text-left last:border-b-0 ${className}`}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    );
+  }
+  return <div className={`border-b border-[color:var(--line)] px-5 py-4 last:border-b-0 ${className}`}>{children}</div>;
+}
+
+/* ── Focus Trap Hook ────────────────────────────────────────────────── */
+
+export function useFocusTrap(active: boolean) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!active || !ref.current) return;
+
+    const container = ref.current;
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    // Focus first focusable element
+    const focusable = container.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    focusable[0]?.focus();
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== "Tab") return;
+      const focusableNow = container.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusableNow.length === 0) return;
+
+      const first = focusableNow[0];
+      const last = focusableNow[focusableNow.length - 1];
+
+      if (event.shiftKey) {
+        if (document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    }
+
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [active]);
+
+  return ref;
+}
+
+/* ── Reduced Motion Hook ────────────────────────────────────────────── */
+
+export function useReducedMotion() {
+  const query = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+  // Return static value — Electron doesn't change this mid-session
+  return query?.matches ?? false;
+}
+
+export class ErrorBoundary extends Component<{ children: ReactNode; fallback?: ReactNode }, { hasError: boolean; error: Error | null }> {
+  constructor(props: { children: ReactNode; fallback?: ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[ErrorBoundary]", error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? (
+        <div className="p-8 text-center" role="alert">
+          <div className="text-[15px] font-semibold text-[color:var(--danger)] mb-2">Something went wrong</div>
+          <div className="text-[13px] text-[color:var(--muted)] mb-4">{this.state.error?.message}</div>
+          <ActionButton label="Reload page" onClick={() => window.location.reload()} />
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}