use-agentz 0.1.0

package/dist/ui/web/main.tsx

@@ -0,0 +1,2406 @@
+/**
+ * AgentZ UI — React SPA (single file, no router/state lib per the brief).
+ *
+ * Screens: (1) setup picker (preset cards + pack selector), (2) review as an
+ * app shell: main column of section cards (targets/agents/skills/tools/
+ * plugins/commands/MCPs) + a sticky right rail with the setup summary, config
+ * preview buttons (right-side sheet) and the Install CTA, (3) install
+ * (confirm -> progress -> result). If a lockfile/config exists we first show
+ * the current-install summary with a "Modify" path preloading /api/state.
+ *
+ * Inputs are Base UI primitives (@base-ui-components/react): Switch for every
+ * item toggle, Combobox for the model picker, ToggleGroup for segmented
+ * controls, Popover for the per-section "+ Add" pickers, Dialog (styled as a
+ * right drawer) for config previews, Collapsible for the experimental-targets
+ * group, Tooltip on the reset-to-default control. All unstyled, themed via
+ * the --as-* tokens in styles.css.
+ *
+ * strict TS throughout (tsx). No snapshot logic — plain fetch + useReducer.
+ */
+import { Fragment, StrictMode, useEffect, useMemo, useReducer, useRef, useState } from "react"
+import type * as React from "react"
+import { createRoot } from "react-dom/client"
+import { Collapsible } from "@base-ui-components/react/collapsible"
+import { Combobox } from "@base-ui-components/react/combobox"
+import { Dialog } from "@base-ui-components/react/dialog"
+import { Popover } from "@base-ui-components/react/popover"
+import { Switch } from "@base-ui-components/react/switch"
+import { Toggle } from "@base-ui-components/react/toggle"
+import { ToggleGroup } from "@base-ui-components/react/toggle-group"
+import { Tooltip } from "@base-ui-components/react/tooltip"
+import type {
+  CatalogPackTier,
+  CatalogResponse,
+  GraphResponse,
+  InstallResponse,
+  ModelsResponse,
+  PreviewFiles,
+  PreviewModel,
+  PreviewResponse,
+  ProjectInfo,
+  ProjectsResponse,
+  SessionStateResponse,
+  StateResponse,
+  ShutdownResponse,
+  WizardState,
+} from "../api.ts"
+import { SHUTDOWN_TOKEN_HEADER } from "../api.ts"
+
+/* ================================================================== */
+/* API client (project-scoped)                                         */
+/* ================================================================== */
+
+/**
+ * The currently selected project (root-relative path; "" = root). Every API
+ * call appends it as `?project=` so state/preview/install are scoped. Kept as a
+ * module singleton so the debounced preview hook and one-off fetches agree
+ * without prop-drilling it into the API layer.
+ */
+let currentProject = ""
+let shutdownToken: string | null = null
+function setCurrentProject(p: string): void {
+  currentProject = p
+}
+
+/** Append the active `?project=` scope (and merge any existing query). */
+function scoped(path: string): string {
+  if (!currentProject) return path
+  const sep = path.includes("?") ? "&" : "?"
+  return `${path}${sep}project=${encodeURIComponent(currentProject)}`
+}
+
+async function apiGet<T>(path: string): Promise<T> {
+  const res = await fetch(scoped(path))
+  if (!res.ok) {
+    const data = (await res.json().catch(() => ({}))) as { error?: string }
+    throw new Error(data.error ?? `GET ${path} failed`)
+  }
+  return res.json() as Promise<T>
+}
+
+async function apiPost<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(scoped(path), {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error((data as { error?: string }).error ?? `POST ${path} failed`)
+  return data as T
+}
+
+/** Load current state and retain the launch-only shutdown token in memory. */
+async function loadState(): Promise<StateResponse> {
+  const { shutdownToken: token, ...state } = await apiGet<SessionStateResponse>("/api/state")
+  shutdownToken = token
+  return state
+}
+
+/** Close requires a non-simple token header; never include it in other requests. */
+async function shutdown(): Promise<ShutdownResponse> {
+  if (!shutdownToken) throw new Error("shutdown unavailable")
+  const res = await fetch("/api/shutdown", {
+    method: "POST",
+    headers: { [SHUTDOWN_TOKEN_HEADER]: shutdownToken },
+  })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error((data as { error?: string }).error ?? "shutdown failed")
+  return data as ShutdownResponse
+}
+
+/* ================================================================== */
+/* model badges (deterministic rainbow hue per model id)               */
+/* ================================================================== */
+
+/**
+ * Deterministic hue (0–359) for a model id. The hue is derived from the model
+ * NAME AFTER the last '/' (`github-copilot/claude-fable-5` → `claude-fable-5`),
+ * so the SAME model shares a hue across providers, and a plain FNV-1a hash of a
+ * fixed string makes it stable across reloads (no index/iteration-order/random
+ * salt involved). `>>> 0` keeps the 32-bit accumulator unsigned so `% 360` is
+ * always the same non-negative value.
+ */
+export function modelHue(id: string): number {
+  const name = id.split("/").pop() ?? id
+  let h = 0x811c9dc5
+  for (let i = 0; i < name.length; i++) {
+    h ^= name.charCodeAt(i)
+    h = Math.imul(h, 0x01000193)
+  }
+  return (h >>> 0) % 360
+}
+
+/**
+ * A colored model chip: hue derived from the model name, via --model-hue.
+ * Optionally renders the reasoning effort as a `: effort` suffix so an agent
+ * row reads `provider/model : high` in one mono badge.
+ */
+function ModelBadge(props: { model: string; effort?: string | undefined }): React.JSX.Element {
+  const hue = modelHue(props.model)
+  return (
+    <span
+      className="as-model-badge"
+      style={{ ["--model-hue" as string]: String(hue) }}
+      title={props.effort ? `${props.model} : ${props.effort}` : props.model}
+    >
+      {props.model}
+      {props.effort ? ` : ${props.effort}` : ""}
+    </span>
+  )
+}
+
+/* ================================================================== */
+/* catalog dependency graph (read-only hints, degrade silently)        */
+/* ================================================================== */
+
+/** Lookup maps derived once from GET /api/graph. All UI hints built on top of
+ * these degrade to nothing when the fetch fails (GraphInfo stays null). */
+interface GraphInfo {
+  /** node id -> human label */
+  labels: Map<string, string>
+  /** node id -> dependency target ids (manifest `dependencies` edges) */
+  requires: Map<string, string[]>
+  /** node id -> number of dependency edges pointing AT it */
+  requiredBy: Map<string, number>
+  /** preset/pack id -> member ids (includes + extra edges, groups expanded) */
+  members: Map<string, string[]>
+  /** group node id (`group:x`) -> its member skill ids (`skill:y`), raw. */
+  groups: Map<string, string[]>
+}
+
+function buildGraphInfo(g: GraphResponse): GraphInfo {
+  const labels = new Map<string, string>()
+  for (const n of g.nodes) labels.set(n.id, n.label)
+  const requires = new Map<string, string[]>()
+  const requiredBy = new Map<string, number>()
+  const direct = new Map<string, string[]>()
+  const groups = new Map<string, string[]>()
+  for (const e of g.edges) {
+    if (e.kind === "dependency") {
+      requires.set(e.from, [...(requires.get(e.from) ?? []), e.to])
+      requiredBy.set(e.to, (requiredBy.get(e.to) ?? 0) + 1)
+    } else if (e.kind === "group") {
+      groups.set(e.from, [...(groups.get(e.from) ?? []), e.to])
+    } else {
+      // includes (preset -> items) and extra (pack -> bundled items)
+      direct.set(e.from, [...(direct.get(e.from) ?? []), e.to])
+    }
+  }
+  // Expand group members into the owning preset's member list (group node
+  // itself dropped from counts; its skills are what actually gets installed).
+  const members = new Map<string, string[]>()
+  for (const [owner, ids] of direct) {
+    const out: string[] = []
+    for (const id of ids) {
+      if (id.startsWith("group:")) out.push(...(groups.get(id) ?? []))
+      else out.push(id)
+    }
+    members.set(owner, [...new Set(out)])
+  }
+  return { labels, requires, requiredBy, members, groups }
+}
+
+/** "3 agents · 4 skills" style composition summary for a preset/pack card. */
+function memberCounts(info: GraphInfo, ownerId: string): string | null {
+  const ids = info.members.get(ownerId)
+  if (!ids || ids.length === 0) return null
+  const counts = new Map<string, number>()
+  for (const id of ids) {
+    const type = id.split(":")[0] ?? "item"
+    counts.set(type, (counts.get(type) ?? 0) + 1)
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+    .map(([type, n]) => `${n} ${REF_TYPE_LABELS[type] ?? `${type}s`}`.replace(/s$/, n === 1 ? "" : "s"))
+    .join(" · ")
+}
+
+/**
+ * Dependency-lock map for the review screen: every item id that is required
+ * (directly or transitively) by a currently-enabled item, mapped to the human
+ * labels of its DIRECT enabled requirers. Locked items render a locked-ON
+ * Switch with an inline "required by X, Y" note; graph==null -> empty map ->
+ * nothing locks and the UI behaves like before.
+ */
+function computeLocks(info: GraphInfo | null, enabled: Set<string>): Map<string, string[]> {
+  const locked = new Map<string, string[]>()
+  if (!info) return locked
+  const queue = [...enabled]
+  const seen = new Set(queue)
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    const fromLabel = info.labels.get(id) ?? id.split(":").pop() ?? id
+    for (const dep of info.requires.get(id) ?? []) {
+      const list = locked.get(dep) ?? []
+      if (!list.includes(fromLabel)) list.push(fromLabel)
+      locked.set(dep, list)
+      if (!seen.has(dep)) {
+        seen.add(dep)
+        queue.push(dep) // transitive: a locked dep drags in ITS deps too
+      }
+    }
+  }
+  return locked
+}
+
+/**
+ * Compact dependency hint under an item row: up to 3 "requires" chips with a
+ * "+n more" expander, plus a "needed by N" chip. Renders nothing without graph
+ * data, so a failed /api/graph fetch leaves rows untouched.
+ */
+function DepChips(props: { info: GraphInfo | null; kind: string; name: string }): React.JSX.Element | null {
+  const [expanded, setExpanded] = useState(false)
+  if (!props.info) return null
+  const id = `${props.kind}:${props.name}`
+  const req = props.info.requires.get(id) ?? []
+  const by = props.info.requiredBy.get(id) ?? 0
+  if (req.length === 0 && by === 0) return null
+  const shown = expanded ? req : req.slice(0, 3)
+  const hidden = req.length - shown.length
+  return (
+    <span className="as-dep-chips">
+      {req.length > 0 && <span className="as-dep-label">requires</span>}
+      {shown.map((dep) => (
+        <span className="as-dep-chip" key={dep} title={dep}>
+          {props.info!.labels.get(dep) ?? dep.split(":").pop()}
+        </span>
+      ))}
+      {hidden > 0 && (
+        <button type="button" className="as-dep-more" onClick={() => setExpanded(true)}>
+          +{hidden} more
+        </button>
+      )}
+      {by > 0 && (
+        <span className="as-dep-chip" title={`${by} other item(s) depend on this`}>
+          needed by {by}
+        </span>
+      )}
+    </span>
+  )
+}
+
+/* ================================================================== */
+/* wizard state (mirrors src/wizard/shared.ts WizardState)             */
+/* ================================================================== */
+
+type Screen = "loading" | "current" | "setup" | "review" | "installing" | "done" | "error"
+
+function defaultState(catalog: CatalogResponse): WizardState {
+  return {
+    presetNames: [catalog.defaultPreset],
+    modelPack: catalog.defaultPack,
+    targets: (catalog.targets.filter((t) => t.detected).map((t) => t.id) as WizardState["targets"]) ?? [],
+    scope: "project",
+    vars: { scratchpad: true },
+    agents: {},
+    tierThinking: {},
+    excluded: { skill: [], tool: [], plugin: [], mcp: [], rule: [], lsp: [] },
+    mcps: {},
+  }
+}
+
+type Action =
+  | { t: "preset"; name: string }
+  | { t: "pack"; pack: string }
+  | { t: "targets"; targets: string[] }
+  | { t: "scope"; scope: "project" | "user" }
+  | { t: "agentsMd"; mode: string }
+  | { t: "agentModel"; agentId: string; model: string }
+  | { t: "agentEffort"; agentId: string; effort: string }
+  | { t: "tierModel"; tier: "cheap" | "normal" | "expert"; model: string }
+  | { t: "tierEffort"; tier: "cheap" | "normal" | "expert"; effort: string }
+  | { t: "toggle"; kind: keyof WizardState["excluded"]; name: string; on: boolean }
+  | { t: "mcpOption"; mcp: string; option: string; on: boolean }
+  | { t: "extra"; kind: ExtraKind; name: string; on: boolean }
+  | { t: "replace"; state: WizardState }
+
+/** Catalog kinds bulk-addable via the review "+ Add" popovers. */
+type ExtraKind = "agent" | "skill" | "tool" | "plugin" | "mcp" | "command" | "rule" | "lsp"
+
+function reducer(state: WizardState, a: Action): WizardState {
+  switch (a.t) {
+    case "replace":
+      return a.state
+    case "preset": {
+      // Multi-select: toggle membership (keep ≥0; Review button guards ≥1).
+      const has = state.presetNames.includes(a.name)
+      const presetNames = has
+        ? state.presetNames.filter((n) => n !== a.name)
+        : [...state.presetNames, a.name]
+      return { ...state, presetNames }
+    }
+    case "pack":
+      return { ...state, modelPack: a.pack }
+    case "targets":
+      return { ...state, targets: a.targets as WizardState["targets"] }
+    case "scope":
+      return { ...state, scope: a.scope }
+    case "agentsMd":
+      return { ...state, agentsMd: a.mode === "off" ? false : (a.mode as "lean" | "full") }
+    case "agentModel": {
+      const agents = { ...state.agents }
+      const cur = { ...(agents[a.agentId] ?? {}) }
+      if (a.model) cur.model = a.model
+      else delete cur.model
+      if (Object.keys(cur).length) agents[a.agentId] = cur
+      else delete agents[a.agentId]
+      return { ...state, agents }
+    }
+    case "tierModel": {
+      // Per-tier model override, stored as vars["model.<tier>"] — the same key
+      // the planner reads at the top of the tier-default precedence. Empty =
+      // clear (fall back to the selected pack's tier model).
+      const key = `model.${a.tier}`
+      const vars = { ...state.vars }
+      if (a.model) vars[key] = a.model
+      else delete vars[key]
+      return { ...state, vars }
+    }
+    case "tierEffort": {
+      // Per-tier reasoning-effort default, stored under tierThinking[tier].
+      // Empty = clear the tier entry (fall back to the pack's tier effort); the
+      // reducer never writes an empty block.
+      const tierThinking = { ...state.tierThinking }
+      const cur = { ...(tierThinking[a.tier] ?? {}) }
+      if (a.effort) cur.reasoningEffort = a.effort as never
+      else delete cur.reasoningEffort
+      if (Object.keys(cur).length) tierThinking[a.tier] = cur
+      else delete tierThinking[a.tier]
+      return { ...state, tierThinking }
+    }
+    case "agentEffort": {
+      const agents = { ...state.agents }
+      const cur = { ...(agents[a.agentId] ?? {}) }
+      if (a.effort) cur.thinking = { ...(cur.thinking ?? {}), reasoningEffort: a.effort as never }
+      else if (cur.thinking) {
+        const { reasoningEffort: _drop, ...rest } = cur.thinking
+        if (Object.keys(rest).length) cur.thinking = rest
+        else delete cur.thinking
+      }
+      if (Object.keys(cur).length) agents[a.agentId] = cur
+      else delete agents[a.agentId]
+      return { ...state, agents }
+    }
+    case "toggle": {
+      const list = state.excluded[a.kind]
+      const has = list.includes(a.name)
+      const next = a.on
+        ? has
+          ? list.filter((n) => n !== a.name)
+          : list
+        : has
+          ? list
+          : [...list, a.name]
+      return { ...state, excluded: { ...state.excluded, [a.kind]: next } }
+    }
+    case "mcpOption": {
+      const mcps = { ...state.mcps }
+      const bucket = { ...(mcps[a.mcp] ?? {}) }
+      const options = { ...(bucket.options ?? {}) }
+      options[a.option] = a.on
+      bucket.options = options
+      mcps[a.mcp] = bucket
+      return { ...state, mcps }
+    }
+    case "extra": {
+      const extra = { ...(state.extra ?? {}) }
+      const list = extra[a.kind] ?? []
+      const has = list.includes(a.name)
+      const next = a.on ? (has ? list : [...list, a.name]) : list.filter((n) => n !== a.name)
+      if (next.length) extra[a.kind] = next
+      else delete extra[a.kind]
+      // An extra item is never simultaneously "excluded": adding or removing an
+      // extra clears any stale exclusion for the same name so it can never fall
+      // into the excluded∧extra limbo (dropped from the preview by filterExcluded
+      // → no row, yet still in `extra` → filtered out of the Add popover). Only
+      // exclusion buckets exist (agent/command have none) so guard the lookup.
+      const exKind = a.kind as keyof WizardState["excluded"]
+      const exList = state.excluded[exKind]
+      const excluded =
+        exList && exList.includes(a.name)
+          ? { ...state.excluded, [exKind]: exList.filter((n) => n !== a.name) }
+          : state.excluded
+      return {
+        ...state,
+        excluded,
+        extra: Object.keys(extra).length ? extra : undefined,
+      }
+    }
+  }
+}
+
+/* ================================================================== */
+/* preview hook (debounced refetch on every state change)              */
+/* ================================================================== */
+
+function usePreview(state: WizardState, active: boolean): {
+  preview: PreviewModel | null
+  files: PreviewFiles | null
+  deletions: PreviewResponse["deletions"]
+  loading: boolean
+  error: string | null
+} {
+  const [preview, setPreview] = useState<PreviewModel | null>(null)
+  const [files, setFiles] = useState<PreviewFiles | null>(null)
+  const [deletions, setDeletions] = useState<PreviewResponse["deletions"]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const seq = useRef(0)
+
+  useEffect(() => {
+    if (!active) return
+    const id = ++seq.current
+    setLoading(true)
+    const timer = setTimeout(() => {
+      apiPost<PreviewResponse>("/api/preview", { state })
+        .then((r) => {
+          if (seq.current === id) {
+            setPreview(r.preview)
+            setFiles(r.files)
+            setDeletions(r.deletions ?? [])
+            setError(null)
+          }
+        })
+        .catch((e: Error) => {
+          if (seq.current === id) setError(e.message)
+        })
+        .finally(() => {
+          if (seq.current === id) setLoading(false)
+        })
+    }, 180)
+    return () => clearTimeout(timer)
+  }, [state, active])
+
+  return { preview, files, deletions, loading, error }
+}
+
+/* ================================================================== */
+/* Base UI wrappers (styled with --as-* tokens)                        */
+/* ================================================================== */
+
+/**
+ * Item toggle: Base UI Switch (zinc track, cobalt when checked). `locked`
+ * renders it ON, read-only and dimmed, with a lock glyph; the inline
+ * "required by ..." note is rendered by the caller so clicking never toggles
+ * a dependency another enabled item still needs.
+ */
+function ItemSwitch(props: {
+  checked: boolean
+  onChange?: (on: boolean) => void
+  label: string
+  locked?: boolean
+  disabled?: boolean
+  describedById?: string
+}): React.JSX.Element {
+  return (
+    <span className="as-switch-wrap">
+      {props.locked && <LockGlyph />}
+      <Switch.Root
+        className="as-switch"
+        checked={props.locked ? true : props.checked}
+        readOnly={props.locked === true}
+        disabled={props.disabled === true}
+        aria-label={props.label}
+        aria-describedby={props.locked && props.describedById ? props.describedById : undefined}
+        onCheckedChange={(on) => {
+          if (!props.locked && props.onChange) props.onChange(on)
+        }}
+      >
+        <Switch.Thumb className="as-switch-thumb" />
+      </Switch.Root>
+    </span>
+  )
+}
+
+/** Small lock glyph shown next to a dependency-locked switch. */
+function LockGlyph(): React.JSX.Element {
+  return (
+    <svg className="as-lock" width="11" height="11" viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+      <rect x="2" y="5" width="8" height="6" rx="1.5" fill="currentColor" />
+      <path d="M4 5V3.5a2 2 0 0 1 4 0V5" stroke="currentColor" strokeWidth="1.4" fill="none" />
+    </svg>
+  )
+}
+
+/** Inline "required by X, Y" note under a locked row. */
+function LockNote(props: { requirers: string[]; id?: string }): React.JSX.Element {
+  return (
+    <span className="as-lock-note" id={props.id}>
+      required by {props.requirers.slice(0, 3).join(", ")}
+      {props.requirers.length > 3 ? ` +${props.requirers.length - 3} more` : ""}
+    </span>
+  )
+}
+
+/**
+ * Segmented control (Base UI ToggleGroup, single-select). Empty selections
+ * are ignored so one segment is always active.
+ */
+function Seg(props: {
+  value: string
+  options: { value: string; label: string }[]
+  onChange: (v: string) => void
+  ariaLabel: string
+}): React.JSX.Element {
+  return (
+    <ToggleGroup
+      className="as-seg"
+      value={[props.value]}
+      aria-label={props.ariaLabel}
+      onValueChange={(vals) => {
+        const v = vals[0]
+        if (typeof v === "string" && v !== props.value) props.onChange(v)
+      }}
+    >
+      {props.options.map((o) => (
+        <Toggle key={o.value} value={o.value} className="as-seg-item">
+          {o.label}
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  )
+}
+
+/**
+ * Compact accessible dropdown (native `<select>`, styled to match `.as-input`).
+ * Used where a full segmented control would not fit — e.g. the three tier
+ * columns of reasoning-effort defaults at 1024px. `value === ""` selects the
+ * first (placeholder) option. Native semantics give full keyboard + screen
+ * reader support for free.
+ */
+function NativeSelect(props: {
+  id: string
+  value: string
+  options: { value: string; label: string }[]
+  onChange: (v: string) => void
+  ariaLabel: string
+}): React.JSX.Element {
+  return (
+    <select
+      id={props.id}
+      className="as-select"
+      aria-label={props.ariaLabel}
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+    >
+      {props.options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+/**
+ * Model override picker. With a model list: a searchable Base UI Combobox
+ * grouped by provider (mono, keyboard navigable, clearable). Without one:
+ * a plain free-text input committing on blur (same as the wizard).
+ */
+function ModelPicker(props: {
+  id: string
+  models: ModelsResponse | null
+  placeholder: string
+  value: string
+  onChange: (v: string) => void
+}): React.JSX.Element {
+  const available = props.models?.available ?? false
+  const hasModels = (props.models?.models.length ?? 0) > 0
+  // Local draft for the free-text fallback so typing is smooth; synced back to
+  // props.value whenever it changes (reset / state replace), so it never goes
+  // stale after the parent swaps state under it.
+  const [draft, setDraft] = useState(props.value)
+  useEffect(() => {
+    setDraft(props.value)
+  }, [props.value])
+  const groups = useMemo(() => {
+    if (!props.models) return []
+    const by = new Map<string, string[]>()
+    for (const m of props.models.models) {
+      const provider = m.id.includes("/") ? m.id.split("/")[0]! : "other"
+      by.set(provider, [...(by.get(provider) ?? []), m.id])
+    }
+    return [...by.entries()]
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([value, items]) => ({ value, items: items.sort() }))
+  }, [props.models])
+
+  if (!available || !hasModels) {
+    return (
+      <input
+        id={props.id}
+        className="as-input"
+        placeholder={props.placeholder}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={(e) => props.onChange(e.target.value.trim())}
+      />
+    )
+  }
+  return (
+    <Combobox.Root
+      items={groups}
+      value={props.value || null}
+      onValueChange={(v) => props.onChange(typeof v === "string" ? v : "")}
+    >
+      <div className="as-combo">
+        <Combobox.Input id={props.id} className="as-input" placeholder={props.placeholder} />
+        {props.value && (
+          <Combobox.Clear className="as-combo-clear" aria-label="clear model override">
+            ×
+          </Combobox.Clear>
+        )}
+      </div>
+      <Combobox.Portal>
+        <Combobox.Positioner className="as-positioner" sideOffset={4}>
+          <Combobox.Popup className="as-popover as-combo-popup">
+            <Combobox.Empty className="as-combo-empty">no matching models</Combobox.Empty>
+            <Combobox.List className="as-combo-list">
+              {(group: { value: string; items: string[] }) => (
+                <Combobox.Group key={group.value} items={group.items} className="as-combo-group">
+                  <Combobox.GroupLabel className="as-combo-group-label">{group.value}</Combobox.GroupLabel>
+                  <Combobox.Collection>
+                    {(item: string) => (
+                      <Combobox.Item key={item} value={item} className="as-combo-item">
+                        <Combobox.ItemIndicator className="as-combo-indicator">
+                          <CheckIcon />
+                        </Combobox.ItemIndicator>
+                        <span className="as-combo-item-text">{item}</span>
+                      </Combobox.Item>
+                    )}
+                  </Combobox.Collection>
+                </Combobox.Group>
+              )}
+            </Combobox.List>
+          </Combobox.Popup>
+        </Combobox.Positioner>
+      </Combobox.Portal>
+    </Combobox.Root>
+  )
+}
+
+const TIER_ORDER = ["cheap", "normal", "expert"] as const
+type Tier = (typeof TIER_ORDER)[number]
+
+/**
+ * Per-tier model overrides — the PRIMARY override path. One compact ModelPicker
+ * per tier (cheap/normal/expert) writing `state.vars['model.<tier>']` (the same
+ * key the planner reads at the top of the tier-default precedence), so a value
+ * here applies to every agent resolved to that tier, plus a compact reasoning
+ * effort dropdown writing `state.tierThinking[tier]`. Per-agent overrides (the
+ * Agents section, behind the "Override" switch) take priority over
+ * both. Each picker's placeholder is the selected pack's tier model, or a
+ * plain "keep pack default" fallback when the pack does not define that tier.
+ * The effort dropdown defaults to "pack default" (shows the pack's tier effort
+ * as its label); clearing it deletes the tier entry (reducer drops the block).
+ *
+ * The "Model overrides" title is owned by the parent nested-collapsible trigger,
+ * so this renders only the description + the three tier fields.
+ */
+function TierOverrides(props: {
+  catalog: CatalogResponse
+  models: ModelsResponse | null
+  state: WizardState
+  dispatch: React.Dispatch<Action>
+}): React.JSX.Element {
+  const { catalog, models, state, dispatch } = props
+  const pack = catalog.packs.find((p) => p.id === state.modelPack)
+  const packTier = (tier: Tier): CatalogPackTier | undefined =>
+    pack?.tiers.find((t) => t.tier === tier)
+  const tierModel = (tier: Tier): string | undefined => packTier(tier)?.model
+  return (
+    <div className="as-row as-tier-overrides">
+      <div className="as-row-main">
+        <div className="as-row-desc">
+          Applies to every agent in a tier. Per-agent overrides take priority.
+        </div>
+      </div>
+      <div className="as-tier-fields">
+        {TIER_ORDER.map((tier) => {
+          const id = `as-tier-${tier}`
+          const effortId = `as-tier-effort-${tier}`
+          const raw = state.vars[`model.${tier}`]
+          const value = typeof raw === "string" ? raw : ""
+          const fallback = tierModel(tier)
+          const packEffort = packTier(tier)?.effort
+          const effort = state.tierThinking[tier]?.reasoningEffort ?? ""
+          const packLabel = packEffort ? `pack default (${packEffort})` : "pack default"
+          return (
+            <div className="as-tier-field" key={tier}>
+              <label className="as-label" htmlFor={id}>
+                {tier} <span className="as-tier-hint">tier</span>
+              </label>
+              <ModelPicker
+                id={id}
+                models={models}
+                placeholder={fallback ?? "keep pack default"}
+                value={value}
+                onChange={(v) => dispatch({ t: "tierModel", tier, model: v })}
+              />
+              <label className="as-tier-sublabel" htmlFor={effortId}>
+                Reasoning effort
+              </label>
+              <NativeSelect
+                id={effortId}
+                ariaLabel={`${tier} tier reasoning effort`}
+                value={effort}
+                onChange={(v) => dispatch({ t: "tierEffort", tier, effort: v })}
+                options={[
+                  { value: "", label: packLabel },
+                  ...catalog.reasoningEfforts.map((r) => ({ value: r, label: r })),
+                ]}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function CheckIcon(): React.JSX.Element {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false">
+      <path
+        d="M1.5 5.5 L4 8 L8.5 2.5"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+type AddItem = { name: string; label: string; description: string }
+
+/** One selectable row inside the add popover. */
+function AddRow(props: {
+  item: AddItem
+  on: boolean
+  onToggle: () => void
+}): React.JSX.Element {
+  return (
+    <button type="button" className="as-add-item" aria-pressed={props.on} onClick={props.onToggle} title={props.item.description || undefined}>
+      <span className="as-add-check" data-on={props.on}>
+        {props.on && <CheckIcon />}
+      </span>
+      <span className="as-add-main">
+        <span className="as-row-name">{props.item.label}</span>
+        {props.item.description && <span className="as-row-desc">{props.item.description}</span>}
+      </span>
+    </button>
+  )
+}
+
+/**
+ * Per-section "+ Add" popover: search input on top, keyboard-navigable
+ * multiselect checklist below. Items already shown in the section (present in
+ * the preview list, or already added as extras) are filtered out — you can
+ * only add things not there yet; when nothing remains a note says so. Stays
+ * open across picks so several items can be added in one visit.
+ *
+ * For skills WITH graph data the list is grouped: each skills group renders a
+ * header (label + member count badge + "Add all" that adds every not-yet-shown
+ * member), its members underneath, and any ungrouped skills follow under an
+ * "other" header. Without graph data (or for other kinds) it is a flat list.
+ */
+function AddPopover(props: {
+  kind: ExtraKind
+  label: string
+  items: AddItem[]
+  /** Names already added as extras (rendered as rows, toggle off on re-click). */
+  added: string[]
+  /** Names already present in the section (preview list) — filtered out. */
+  present?: string[]
+  graph: GraphInfo | null
+  dispatch: React.Dispatch<Action>
+}): React.JSX.Element | null {
+  const [query, setQuery] = useState("")
+  const listRef = useRef<HTMLDivElement | null>(null)
+  if (props.items.length === 0) return null
+
+  // Hide anything already visible in the section: present in the preview list,
+  // or already added as an extra. What remains is genuinely addable.
+  const shown = new Set([...(props.present ?? []), ...props.added])
+  const available = props.items.filter((i) => !shown.has(i.name))
+  const nothingLeft = available.length === 0
+
+  const q = query.trim().toLowerCase()
+  const matches = (i: AddItem): boolean =>
+    !q ||
+    i.name.toLowerCase().includes(q) ||
+    i.label.toLowerCase().includes(q) ||
+    i.description.toLowerCase().includes(q)
+  const filtered = available.filter(matches)
+
+  // Group-aware layout for skills when graph data exists: group headers with an
+  // "Add all", members under each, ungrouped skills under an "other" header.
+  const grouped = props.kind === "skill" && props.graph !== null
+  const byName = new Map(filtered.map((i) => [i.name, i]))
+  const sections: { key: string; label: string; members: AddItem[] }[] = []
+  if (grouped) {
+    const claimed = new Set<string>()
+    for (const [gid, memberIds] of props.graph!.groups) {
+      const members: AddItem[] = []
+      for (const mid of memberIds) {
+        const name = mid.startsWith("skill:") ? mid.slice("skill:".length) : mid
+        const item = byName.get(name)
+        if (item) {
+          members.push(item)
+          claimed.add(name)
+        }
+      }
+      if (members.length > 0) {
+        sections.push({ key: gid, label: props.graph!.labels.get(gid) ?? gid.split(":").pop() ?? gid, members })
+      }
+    }
+    sections.sort((a, b) => a.label.localeCompare(b.label))
+    const other = filtered.filter((i) => !claimed.has(i.name))
+    if (other.length > 0) sections.push({ key: "__other", label: "other", members: other })
+  }
+
+  function onListKeyDown(e: React.KeyboardEvent): void {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
+    e.preventDefault()
+    const options = [...(listRef.current?.querySelectorAll<HTMLButtonElement>(".as-add-item") ?? [])]
+    if (options.length === 0) return
+    const idx = options.indexOf(document.activeElement as HTMLButtonElement)
+    // From the search input (idx === -1): ArrowDown → first, ArrowUp → last.
+    // Within the list: step and wrap at both ends.
+    let next: number
+    if (idx === -1) {
+      next = e.key === "ArrowDown" ? 0 : options.length - 1
+    } else if (e.key === "ArrowDown") {
+      next = (idx + 1) % options.length
+    } else {
+      next = (idx - 1 + options.length) % options.length
+    }
+    options[next]?.focus()
+  }
+
+  const toggle = (name: string, on: boolean): void =>
+    props.dispatch({ t: "extra", kind: props.kind, name, on })
+  const addAll = (members: AddItem[]): void => {
+    // Respect the present/added filter: `members` already excludes shown items.
+    for (const m of members) toggle(m.name, true)
+  }
+
+  return (
+    <Popover.Root onOpenChange={(open) => !open && setQuery("")}>
+      <Popover.Trigger className="as-btn" data-size="sm" aria-label={`Add ${props.label}`}>
+        + Add
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner className="as-positioner" sideOffset={6} align="end">
+          <Popover.Popup className="as-popover as-add-popup" aria-label={`add ${props.label}`}>
+            {nothingLeft ? (
+              <p className="as-combo-empty">everything already added</p>
+            ) : (
+              <>
+                <input
+                  className="as-input as-add-search"
+                  placeholder={`search ${props.label.toLowerCase()}`}
+                  value={query}
+                  aria-label={`search ${props.label}`}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={onListKeyDown}
+                />
+                <div className="as-add-list" ref={listRef} onKeyDown={onListKeyDown}>
+                  {grouped
+                    ? sections.map((sec) => (
+                        <div className="as-add-group" key={sec.key}>
+                          <div className="as-add-group-head">
+                            <span className="as-add-group-label">{sec.label}</span>
+                            <span className="as-count as-add-group-count">{sec.members.length}</span>
+                            {sec.key !== "__other" && (
+                              <button
+                                type="button"
+                                className="as-btn"
+                                data-size="sm"
+                                onClick={() => addAll(sec.members)}
+                              >
+                                Add all
+                              </button>
+                            )}
+                          </div>
+                          {sec.members.map((item) => (
+                            <AddRow
+                              key={item.name}
+                              item={item}
+                              on={props.added.includes(item.name)}
+                              onToggle={() => toggle(item.name, !props.added.includes(item.name))}
+                            />
+                          ))}
+                        </div>
+                      ))
+                    : filtered.map((item) => (
+                        <AddRow
+                          key={item.name}
+                          item={item}
+                          on={props.added.includes(item.name)}
+                          onToggle={() => toggle(item.name, !props.added.includes(item.name))}
+                        />
+                      ))}
+                  {filtered.length === 0 && <p className="as-combo-empty">no matches</p>}
+                </div>
+              </>
+            )}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+/**
+ * Config preview sheet: Base UI Dialog styled as a right-side drawer with an
+ * opencode.json / AGENTS.md tab switch. The debounced preview keeps its
+ * fixed-width "updating…" slot and the content dims while stale — zero
+ * layout shift.
+ */
+function PreviewSheet(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  tab: "opencode" | "agentsmd"
+  onTab: (tab: "opencode" | "agentsmd") => void
+  files: PreviewFiles | null
+  loading: boolean
+}): React.JSX.Element {
+  return (
+    <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="as-sheet-backdrop" />
+        <Dialog.Popup className="as-sheet" data-loading={props.loading}>
+          <div className="as-sheet-head">
+            <Dialog.Title className="as-sheet-title">
+              Generated files
+              <span className="as-preview-status" role="status">
+                {props.loading ? "updating…" : ""}
+              </span>
+            </Dialog.Title>
+            <Dialog.Close className="as-banner-close" aria-label="close preview">
+              ×
+            </Dialog.Close>
+          </div>
+          <Seg
+            ariaLabel="preview file"
+            value={props.tab}
+            onChange={(v) => props.onTab(v as "opencode" | "agentsmd")}
+            options={[
+              { value: "opencode", label: "opencode.json" },
+              { value: "agentsmd", label: "AGENTS.md" },
+            ]}
+          />
+          <pre className="as-code as-sheet-code">
+            {props.tab === "opencode"
+              ? props.files?.opencodeJson || "(nothing to write)"
+              : props.files?.agentsMd ?? "(AGENTS.md block disabled)"}
+          </pre>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+/* ================================================================== */
+/* app                                                                 */
+/* ================================================================== */
+
+function App(): React.JSX.Element {
+  const [catalog, setCatalog] = useState<CatalogResponse | null>(null)
+  const [existing, setExisting] = useState<StateResponse | null>(null)
+  const [screen, setScreen] = useState<Screen>("loading")
+  const [bootError, setBootError] = useState<string | null>(null)
+  const [state, dispatch] = useReducer(reducer, null as unknown as WizardState)
+  const [result, setResult] = useState<InstallResponse | null>(null)
+  const [installError, setInstallError] = useState<string | null>(null)
+  const [setupNotice, setSetupNotice] = useState<string | null>(null)
+  const [projects, setProjects] = useState<ProjectInfo[]>([])
+  const [project, setProject] = useState("")
+  const [models, setModels] = useState<ModelsResponse | null>(null)
+  const [banner, setBanner] = useState<string | null>(null)
+  const [graph, setGraph] = useState<GraphInfo | null>(null)
+  // True once the user asked to close: we POST /api/shutdown, try window.close(),
+  // and (since browsers usually block script-close of a user-opened tab) swap to
+  // a terminal "you can close this tab" panel.
+  const [stopped, setStopped] = useState(false)
+
+  // Boot: load catalog + projects + models once (catalog/models are project-
+  // independent). State is (re)loaded per selected project below.
+  useEffect(() => {
+    Promise.all([
+      apiGet<CatalogResponse>("/api/catalog"),
+      apiGet<ProjectsResponse>("/api/projects"),
+      apiGet<ModelsResponse>("/api/models"),
+    ])
+      .then(([cat, proj, mods]) => {
+        setCatalog(cat)
+        setProjects(proj.projects)
+        setModels(mods)
+      })
+      .catch((e: Error) => {
+        setBootError(e.message)
+        setScreen("error")
+      })
+  }, [])
+
+  // (Re)load the selected project's on-disk state whenever project or catalog
+  // changes. Also runs on first load once catalog is ready.
+  useEffect(() => {
+    if (!catalog) return
+    let alive = true
+    const forProject = project
+    setCurrentProject(project)
+    loadState()
+      .then((st) => {
+        // Ignore a stale resolution: the project changed (or unmounted) while
+        // this request was in flight, so a newer effect owns the state now.
+        if (!alive || forProject !== currentProject) return
+        setExisting(st)
+        dispatch({ t: "replace", state: preloadState(catalog, st) })
+        setScreen(st.installed ? "current" : "setup")
+      })
+      .catch((e: Error) => {
+        if (!alive || forProject !== currentProject) return
+        setBootError(e.message)
+        setScreen("error")
+      })
+    return () => {
+      alive = false
+    }
+  }, [catalog, project])
+
+  // Dependency graph, once per project. Purely additive hints: any failure
+  // leaves graph=null and the UI renders without dependency chips/locks.
+  useEffect(() => {
+    if (!catalog) return
+    let alive = true
+    const forProject = project
+    setCurrentProject(project)
+    apiGet<GraphResponse>("/api/graph")
+      .then((g) => {
+        if (!alive || forProject !== currentProject) return
+        setGraph(buildGraphInfo(g))
+      })
+      .catch(() => {
+        if (!alive || forProject !== currentProject) return
+        setGraph(null)
+      })
+    return () => {
+      alive = false
+    }
+  }, [catalog, project])
+
+  const previewActive = screen === "review"
+  const { preview, files, deletions, loading, error } = usePreview(state, previewActive)
+
+  if (screen === "loading") return <Shell><p className="as-spinner">loading…</p></Shell>
+  if (screen === "error")
+    return (
+      <Shell>
+        <p className="as-error">could not load: {bootError}</p>
+      </Shell>
+    )
+  if (!catalog) return <Shell><p className="as-spinner">loading…</p></Shell>
+
+  async function doInstall(): Promise<void> {
+    setScreen("installing")
+    setInstallError(null)
+    try {
+      const r = await apiPost<InstallResponse>("/api/install", { state })
+      setResult(r)
+      // No dead-end: re-fetch state and return to the current/setup screen with
+      // a dismissible success banner (result files/notes stay reachable).
+      const st = await loadState()
+      setExisting(st)
+      dispatch({ t: "replace", state: preloadState(catalog!, st) })
+      setBanner(`Installed ${r.installed} item(s) → ${r.configPath}`)
+      setScreen(st.installed ? "current" : "setup")
+    } catch (e) {
+      setInstallError((e as Error).message)
+      setScreen("review")
+    }
+  }
+
+  async function onModify(): Promise<void> {
+    // Refetch on-disk state first: the config/lock may have changed externally
+    // since the initial load, and a sync-install replaces the lock with the
+    // selection closure — planning against a stale snapshot could delete or
+    // resurrect items. Preload fresh state BEFORE showing the setup screen.
+    try {
+      const st = await loadState()
+      setExisting(st)
+      dispatch({ t: "replace", state: preloadState(catalog!, st) })
+      if (st.presetBased) {
+        setSetupNotice(null)
+      } else {
+        setSetupNotice(
+          "This existing install was not preset-based: choose one or more presets to (re)plan on top of it; unrelated installed items stay.",
+        )
+      }
+    } catch {
+      // Fall back to the last-known `existing` snapshot on a fetch failure so
+      // Modify still works offline; the notice mirrors that snapshot.
+      setSetupNotice(
+        existing?.presetBased
+          ? null
+          : "This existing install was not preset-based: choose one or more presets to (re)plan on top of it; unrelated installed items stay.",
+      )
+    }
+    setScreen("setup")
+  }
+
+  function onSwitchProject(p: string): void {
+    setBanner(null)
+    setResult(null)
+    setProject(p) // triggers the state-reload effect + screen reset.
+  }
+
+  async function onClose(): Promise<void> {
+    // Ask the server to stop, then try to close the tab. window.close() only
+    // works for script-opened windows, so we always fall back to the terminal
+    // panel telling the user they can close it themselves.
+    try {
+      await shutdown()
+    } catch {
+      // Server may drop the socket as it exits — that's still a successful stop.
+    }
+    setStopped(true)
+    window.close()
+  }
+
+  if (stopped) {
+    return (
+      <Shell>
+        <section className="as-section as-stopped" role="status">
+          <h2 className="as-section-title">Server stopped</h2>
+           <p className="as-section-hint">You can close this tab. AgentZ server stopped.</p>
+        </section>
+      </Shell>
+    )
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Shell
+        screen={screen}
+        projects={projects}
+        project={project}
+        onProject={onSwitchProject}
+      >
+        {banner && (
+          <div className="as-banner" role="status">
+            <span className="as-ok">{banner}</span>
+            {result && result.files.length > 0 && (
+              <span className="as-banner-detail"> · {result.files.length} file(s) changed</span>
+            )}
+            <button className="as-btn" data-size="sm" onClick={onClose}>
+              Close
+            </button>
+            <button className="as-banner-close" aria-label="dismiss" onClick={() => setBanner(null)}>
+              ×
+            </button>
+          </div>
+        )}
+        {result && banner && <ResultDetails result={result} />}
+        {screen === "current" && existing && (
+          <CurrentInstall state={existing} onModify={onModify} />
+        )}
+        {screen === "setup" && (
+          <Setup
+            catalog={catalog}
+            graph={graph}
+            state={state}
+            dispatch={dispatch}
+            notice={setupNotice}
+            onNext={() => setScreen("review")}
+          />
+        )}
+        {screen === "review" && (
+          <Review
+            catalog={catalog}
+            graph={graph}
+            models={models}
+            state={state}
+            dispatch={dispatch}
+            preview={preview}
+            files={files}
+            deletions={deletions}
+            loading={loading}
+            error={error ?? installError}
+            onBack={() => setScreen(existing?.installed ? "current" : "setup")}
+            onInstall={doInstall}
+          />
+        )}
+        {screen === "installing" && <p className="as-spinner">installing…</p>}
+      </Shell>
+    </Tooltip.Provider>
+  )
+}
+
+function agentsMdValue(
+  chosen: WizardState["agentsMd"],
+  fallback: PreviewModel["agentsMd"] | undefined,
+): string {
+  const v = chosen ?? fallback ?? "lean"
+  return v === false ? "off" : v
+}
+
+function preloadState(catalog: CatalogResponse, st: StateResponse): WizardState {
+  const base = defaultState(catalog)
+  if (!st.installed) return base
+  // Preset-based installs recover ALL their presets (multi-select preserved) so
+  // the setup screen preselects every one and the user can toggle any of them.
+  // Non-preset installs keep the default preset as a starting point; Modify
+  // routes to setup with a notice, and the user picks presets from scratch.
+  const presetNames =
+    st.presetBased && st.presets && st.presets.length > 0
+      ? st.presets
+      : st.presetBased && st.preset
+        ? [st.preset]
+        : [base.presetNames[0]!]
+  return {
+    ...base,
+    presetNames,
+    modelPack: st.modelPack ?? base.modelPack,
+    targets: (st.targets as WizardState["targets"] | undefined) ?? base.targets,
+    scope: st.scope ?? base.scope,
+    // Restore template vars from the on-disk config so per-tier model overrides
+    // (model.cheap|normal|expert) and any flags survive a Modify/reinstall
+    // instead of being reset to defaults. Defaults seed first, config wins.
+    vars: st.vars && Object.keys(st.vars).length > 0 ? { ...base.vars, ...st.vars } : base.vars,
+    // Restore existing per-agent overrides from the on-disk config so the
+    // edge-case per-agent path (model/effort) survives a Modify/reinstall
+    // round-trip instead of being dropped. Config wins over the empty default.
+    agents: st.agents && Object.keys(st.agents).length > 0 ? st.agents : base.agents,
+    // Restore per-tier thinking defaults from the on-disk config so the tier
+    // reasoning-effort controls survive a Modify/reinstall round-trip.
+    tierThinking:
+      st.tierThinking && Object.keys(st.tierThinking).length > 0
+        ? st.tierThinking
+        : base.tierThinking,
+    // Restore USER-ADDED extras from the lock so a subsequent sync-install does
+    // not delete them (each `type:name` ref → its `extra` bucket). Without this
+    // the wizard would resolve to preset closure only and prune every extra.
+    extra: restoreExtras(st.extras),
+  }
+}
+
+/** Map lock `type:name` extra refs back into WizardState `extra` buckets. */
+function restoreExtras(refs: string[] | undefined): WizardState["extra"] {
+  if (!refs || refs.length === 0) return undefined
+  const buckets: Partial<Record<ExtraKind, string[]>> = {}
+  const kinds: ReadonlySet<string> = new Set([
+    "agent",
+    "skill",
+    "tool",
+    "plugin",
+    "mcp",
+    "command",
+    "rule",
+    "lsp",
+  ])
+  for (const ref of refs) {
+    const sep = ref.indexOf(":")
+    if (sep < 0) continue
+    const kind = ref.slice(0, sep)
+    const name = ref.slice(sep + 1)
+    if (!name || !kinds.has(kind)) continue
+    ;(buckets[kind as ExtraKind] ??= []).push(name)
+  }
+  return Object.keys(buckets).length > 0 ? buckets : undefined
+}
+
+/* ================================================================== */
+/* shell + step header                                                 */
+/* ================================================================== */
+
+const STEP_LABELS: { id: Screen; label: string }[] = [
+  { id: "setup", label: "Setup" },
+  { id: "review", label: "Review" },
+  { id: "done", label: "Install" },
+]
+
+function Shell(props: {
+  children: React.ReactNode
+  screen?: Screen
+  projects?: ProjectInfo[]
+  project?: string
+  onProject?: (p: string) => void
+}): React.JSX.Element {
+  const showSwitcher = (props.projects?.length ?? 0) > 1
+  return (
+    <div className="as-app">
+      <header className="as-header">
+        <h1 className="as-title">
+          <img className="as-logo" src="/logo.png" alt="" />
+          AgentZ
+        </h1>
+        {showSwitcher && props.onProject && (
+          <label className="as-project-switch">
+            <span className="as-label">project</span>
+            <select
+              className="as-select"
+              value={props.project ?? ""}
+              onChange={(e) => props.onProject!(e.target.value)}
+            >
+              {props.projects!.map((p) => (
+                <option key={p.path} value={p.path}>
+                  {p.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+        <ol className="as-steps">
+          {STEP_LABELS.map((s) => (
+            <li
+              key={s.id}
+              className="as-step"
+              data-active={props.screen === s.id || (s.id === "done" && props.screen === "installing")}
+            >
+              {s.label}
+            </li>
+          ))}
+        </ol>
+      </header>
+      {props.children}
+    </div>
+  )
+}
+
+/* ================================================================== */
+/* current install summary                                             */
+/* ================================================================== */
+
+function CurrentInstall(props: { state: StateResponse; onModify: () => void }): React.JSX.Element {
+  const s = props.state
+  const groups = groupLockedRefs(s.lockedRefs ?? [])
+  return (
+    <section className="as-section">
+      <h2 className="as-section-title">Current install</h2>
+       <p className="as-section-hint">This project already has AgentZ configured.</p>
+      <div className="as-panel">
+        <dl className="as-summary-grid">
+          {s.preset && (<><dt>preset</dt><dd>{s.preset}</dd></>)}
+          {s.modelPack && (<><dt>model pack</dt><dd>{s.modelPack}</dd></>)}
+          {s.targets && (<><dt>targets</dt><dd>{s.targets.join(", ")}</dd></>)}
+          {s.scope && (<><dt>scope</dt><dd>{s.scope}</dd></>)}
+          <dt>locked items</dt>
+          <dd>{s.lockedItems ?? 0}</dd>
+        </dl>
+      </div>
+      {groups.length > 0 && (
+        <div className="as-panel">
+          <div className="as-row-name">Installed items</div>
+          <dl className="as-summary-grid">
+            {groups.map((g) => (
+              <Fragment key={g.type}>
+                <dt>{g.type}</dt>
+                <dd>{g.names.join(", ")}</dd>
+              </Fragment>
+            ))}
+          </dl>
+        </div>
+      )}
+      <div className="as-actions">
+        <button className="as-btn" data-variant="primary" onClick={props.onModify}>
+          Modify
+        </button>
+      </div>
+    </section>
+  )
+}
+
+/** Plural, human-readable bucket label per lock ref `type`. */
+const REF_TYPE_LABELS: Record<string, string> = {
+  agent: "agents",
+  skill: "skills",
+  tool: "tools",
+  plugin: "plugins",
+  command: "commands",
+  mcp: "mcps",
+  lsp: "language servers",
+  preset: "presets",
+  pack: "packs",
+}
+
+/**
+ * Group lock refs (`[@ns/]type:name`) by type into readable name lists, sorted
+ * by a stable type order then name. So the current-install screen shows WHAT is
+ * installed, not just a count.
+ */
+function groupLockedRefs(refs: string[]): { type: string; names: string[] }[] {
+  const buckets = new Map<string, Set<string>>()
+  for (const ref of refs) {
+    const m = /(?:^|\/)([a-z]+):(.+)$/.exec(ref)
+    const rawType = m?.[1] ?? "other"
+    const name = m?.[2] ?? ref
+    const label = REF_TYPE_LABELS[rawType] ?? rawType
+    if (!buckets.has(label)) buckets.set(label, new Set())
+    buckets.get(label)!.add(name)
+  }
+  const order = Object.values(REF_TYPE_LABELS)
+  return [...buckets.entries()]
+    .map(([type, set]) => ({ type, names: [...set].sort() }))
+    .sort((a, b) => {
+      const ia = order.indexOf(a.type)
+      const ib = order.indexOf(b.type)
+      return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib) || a.type.localeCompare(b.type)
+    })
+}
+
+/* ================================================================== */
+/* setup picker                                                        */
+/* ================================================================== */
+
+function Setup(props: {
+  catalog: CatalogResponse
+  graph: GraphInfo | null
+  state: WizardState
+  dispatch: React.Dispatch<Action>
+  notice?: string | null
+  onNext: () => void
+}): React.JSX.Element {
+  const { catalog, graph, state, dispatch } = props
+  return (
+    <>
+      {props.notice && <p className="as-notice">{props.notice}</p>}
+      <section className="as-section">
+        <h2 className="as-section-title">Choose presets</h2>
+        <p className="as-section-hint">
+          A preset is a curated set of agents, skills and tools. Select one or more.
+        </p>
+        <div className="as-grid">
+          {catalog.presets.map((p) => (
+            <SelectCard
+              key={p.name}
+              title={p.label}
+              description={p.description}
+              selected={state.presetNames.includes(p.name)}
+              graph={graph}
+              graphId={`preset:${p.name}`}
+              onToggle={() => dispatch({ t: "preset", name: p.name })}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="as-section">
+        <h2 className="as-section-title">Model pack</h2>
+        <p className="as-section-hint">Controls which models each agent tier uses.</p>
+        <div className="as-grid">
+          {catalog.packs.map((p) => (
+            <SelectCard
+              key={p.id}
+              title={p.label}
+              description={p.description}
+              tiers={p.tiers}
+              selected={state.modelPack === p.id}
+              graph={graph}
+              graphId={`pack:${p.id}`}
+              onToggle={() => dispatch({ t: "pack", pack: p.id })}
+            />
+          ))}
+        </div>
+      </section>
+
+      <div className="as-actions">
+        <button
+          className="as-btn"
+          data-variant="primary"
+          disabled={state.presetNames.length === 0}
+          onClick={props.onNext}
+        >
+          Review plan
+        </button>
+      </div>
+    </>
+  )
+}
+
+/**
+ * Selectable preset/pack card. Outer element is a plain container so the
+ * graph-driven composition <details> can live inside as a sibling without
+ * nested-interactive markup. Selection is a real full-width <button> (native
+ * Enter/Space, no key-handler hacks); the <details> composition sits beside it.
+ * Check indicator space is always reserved -> zero shift on select.
+ */
+function SelectCard(props: {
+  title: string
+  description: string
+  tiers?: CatalogPackTier[]
+  selected: boolean
+  graph: GraphInfo | null
+  graphId: string
+  onToggle: () => void
+}): React.JSX.Element {
+  const counts = props.graph ? memberCounts(props.graph, props.graphId) : null
+  const members = props.graph?.members.get(props.graphId) ?? []
+  return (
+    <div className="as-card" data-selected={props.selected}>
+      <button
+        type="button"
+        className="as-card-select"
+        aria-pressed={props.selected}
+        onClick={props.onToggle}
+      >
+        <span className="as-card-check" aria-hidden="true">
+          <CheckIcon />
+        </span>
+        <span className="as-card-title">{props.title}</span>
+        <span className="as-card-desc">{props.description}</span>
+        {props.tiers && props.tiers.length > 0 && (
+          <span className="as-card-tiers">
+            {props.tiers.map((t) => (
+              <span key={t.tier} className="as-tier-chip">
+                <span className="as-tier-name">{t.tier}</span>
+                <span className="as-tier-model">{t.model}</span>
+                {t.effort && <span className="as-tier-effort">@{t.effort}</span>}
+              </span>
+            ))}
+          </span>
+        )}
+        {counts && <span className="as-card-meta">{counts}</span>}
+      </button>
+      {members.length > 0 && (
+        <details className="as-card-comp">
+          <summary>what this pulls in</summary>
+          <ul>
+            {members.map((id) => (
+              <li key={id}>
+                <span className="as-dep-kind">{id.split(":")[0]}</span>
+                {props.graph?.labels.get(id) ?? id.split(":").pop()}
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+    </div>
+  )
+}
+
+/* ================================================================== */
+/* review screen (app shell: main column + sticky rail)                */
+/* ================================================================== */
+
+function Review(props: {
+  catalog: CatalogResponse
+  graph: GraphInfo | null
+  models: ModelsResponse | null
+  state: WizardState
+  dispatch: React.Dispatch<Action>
+  preview: PreviewModel | null
+  files: PreviewFiles | null
+  deletions: PreviewResponse["deletions"]
+  loading: boolean
+  error: string | null
+  onBack: () => void
+  onInstall: () => void
+}): React.JSX.Element {
+  const { catalog, graph, models, state, dispatch, preview, files, deletions } = props
+  const primary = catalog.targets.find((t) => t.id === "opencode")
+  const others = catalog.targets.filter((t) => t.id !== "opencode")
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [sheetTab, setSheetTab] = useState<"opencode" | "agentsmd">("opencode")
+  const [delOpen, setDelOpen] = useState(false)
+  // The "Override" switch controls VISIBILITY only of every agent
+  // row's per-agent model/effort controls (the EDGE-CASE override path; the
+  // primary path is the per-tier ModelPickers in "Targets & options"). It never
+  // mutates overrides: toggling OFF hides default rows' controls but rows that
+  // already carry an override keep showing theirs (AgentRow OR-s `custom` in) so
+  // no active override becomes hidden. Clearing an override is the per-row reset
+  // control's explicit job. Seeded OFF always: even a pre-existing per-agent
+  // override must not auto-open anything (rows with an override still show their
+  // own controls via AgentRow's `custom` OR, so no active override is hidden).
+  const [showOverride, setShowOverride] = useState(false)
+
+  // Enabled item set (plan items minus exclusions) -> dependency-locked set.
+  // Locked items keep their Switch ON and read-only until every enabled
+  // dependent is disabled; graph==null keeps this map empty (no locks).
+  const locks = useMemo(() => {
+    const enabled = new Set<string>()
+    for (const a of preview?.agents ?? []) enabled.add(`agent:${a.id}`)
+    for (const s of preview?.skills ?? []) if (!state.excluded.skill.includes(s.id)) enabled.add(`skill:${s.id}`)
+    for (const t of preview?.tools ?? []) if (!state.excluded.tool.includes(t.id)) enabled.add(`tool:${t.id}`)
+    for (const p of preview?.plugins ?? []) if (!state.excluded.plugin.includes(p.id)) enabled.add(`plugin:${p.id}`)
+    for (const c of preview?.commands ?? []) enabled.add(`command:${c.id}`)
+    for (const r of preview?.rules ?? []) if (!state.excluded.rule.includes(r.id)) enabled.add(`rule:${r.id}`)
+    for (const m of preview?.mcps ?? []) if (!state.excluded.mcp.includes(m.id)) enabled.add(`mcp:${m.id}`)
+    for (const l of preview?.lsps ?? []) if (!state.excluded.lsp.includes(l.id)) enabled.add(`lsp:${l.id}`)
+    return computeLocks(graph, enabled)
+  }, [graph, preview, state.excluded])
+
+  // Reconcile: a dependency-locked item may still sit in state.excluded (it was
+  // toggled off before something started requiring it). ItemSwitch renders it
+  // forced-ON, but the install/preview payload would still exclude it. Re-enable
+  // any locked id whose name is in state.excluded so UI and state agree. Guarded:
+  // only dispatch when actually excluded, so no toggle→re-render→dispatch loop.
+  useEffect(() => {
+    for (const id of locks.keys()) {
+      const sep = id.indexOf(":")
+      const kind = id.slice(0, sep) as keyof WizardState["excluded"]
+      const name = id.slice(sep + 1)
+      if (state.excluded[kind]?.includes(name)) {
+        dispatch({ t: "toggle", kind, name, on: true })
+      }
+    }
+  }, [locks, state.excluded, dispatch])
+
+  function openSheet(tab: "opencode" | "agentsmd"): void {
+    setSheetTab(tab)
+    setSheetOpen(true)
+  }
+
+  const itemCounts = preview
+    ? [
+        { label: "agents", n: preview.agents.length },
+        { label: "skills", n: preview.skills.filter((s) => !state.excluded.skill.includes(s.id)).length },
+        { label: "tools", n: preview.tools.filter((t) => !state.excluded.tool.includes(t.id)).length },
+        { label: "plugins", n: preview.plugins.filter((p) => !state.excluded.plugin.includes(p.id)).length },
+        { label: "commands", n: preview.commands.length },
+        { label: "rules", n: preview.rules.filter((r) => !state.excluded.rule.includes(r.id)).length },
+        { label: "mcps", n: preview.mcps.filter((m) => !state.excluded.mcp.includes(m.id)).length },
+        { label: "language servers", n: preview.lsps.filter((l) => !state.excluded.lsp.includes(l.id)).length },
+      ].filter((c) => c.n > 0)
+    : []
+
+  return (
+    <div className="as-review">
+      <div className="as-review-main">
+        {props.error && <p className="as-error">{props.error}</p>}
+
+        {/* targets + scope + AGENTS.md */}
+        <section className="as-section">
+          <div className="as-section-head">
+            <h2 className="as-section-title">Targets & options</h2>
+          </div>
+          <div className="as-panel">
+            <div className="as-row">
+              <div className="as-row-main">
+                <div className="as-row-name">Frameworks</div>
+                <div className="as-row-desc">Install into these agent frameworks.</div>
+              </div>
+            </div>
+            {primary && <TargetRow target={primary} state={state} dispatch={dispatch} />}
+            {others.length > 0 && (
+              <Collapsible.Root className="as-collapse" data-variant="warn">
+                <Collapsible.Trigger className="as-collapse-trigger">
+                  Other harnesses (experimental)
+                </Collapsible.Trigger>
+                <Collapsible.Panel className="as-collapse-panel">
+                  <p className="as-warn">
+                    Reduced support: thinking/reasoning effort, plugins and commands are dropped for
+                    these targets. Enable only as a deliberate experimental choice.
+                  </p>
+                  {others.map((t) => (
+                    <TargetRow key={t.id} target={t} state={state} dispatch={dispatch} />
+                  ))}
+                </Collapsible.Panel>
+              </Collapsible.Root>
+            )}
+            <div className="as-row as-row-controls">
+              <div className="as-field">
+                <span className="as-label" id="as-scope-label">Scope</span>
+                <Seg
+                  ariaLabel="scope"
+                  value={state.scope}
+                  onChange={(v) => dispatch({ t: "scope", scope: v as "project" | "user" })}
+                  options={[
+                    { value: "project", label: "project" },
+                    { value: "user", label: "user" },
+                  ]}
+                />
+              </div>
+              <div className="as-field">
+                <span className="as-label" id="as-agentsmd-label">AGENTS.md</span>
+                <Seg
+                  ariaLabel="AGENTS.md mode"
+                  value={agentsMdValue(state.agentsMd, preview?.agentsMd)}
+                  onChange={(v) => dispatch({ t: "agentsMd", mode: v })}
+                  options={catalog.agentsModes.map((m) => ({ value: m.value, label: m.label }))}
+                />
+              </div>
+            </div>
+            {/* Model tier overrides: compact nested collapsible, collapsed by
+                default. The full trigger row owns the "Model overrides" title;
+                TierOverrides renders only description + fields inside the panel.
+                State (any set tier model/effort) survives collapse untouched. */}
+            <Collapsible.Root className="as-collapse as-tier-collapse">
+              <Collapsible.Trigger className="as-collapse-trigger as-tier-collapse-trigger">
+                <span className="as-tier-collapse-title">Model overrides</span>
+                <Chevron />
+              </Collapsible.Trigger>
+              <Collapsible.Panel className="as-collapse-panel as-section-panel">
+                <TierOverrides catalog={catalog} models={models} state={state} dispatch={dispatch} />
+              </Collapsible.Panel>
+            </Collapsible.Root>
+          </div>
+        </section>
+
+        {/* agents: per-agent model/effort overrides (edge-case path; the
+            primary override path is the tier ModelPickers above). Collapsible
+            like its sibling sections, collapsed by default. */}
+        <CollapsibleSection
+          title="Agents"
+          enabled={(preview?.agents ?? []).length}
+          total={(preview?.agents ?? []).length}
+          addSlot={
+            <div className="as-section-head-actions">
+              <div className="as-field as-override-toggle">
+                <span className="as-label" id="as-override-label">Override</span>
+                <ItemSwitch
+                  checked={showOverride}
+                  label="Show per-agent model override controls"
+                  onChange={setShowOverride}
+                />
+              </div>
+              <AddPopover
+                kind="agent"
+                label="Agents"
+                items={catalog.agents}
+                added={state.extra?.agent ?? []}
+                present={(preview?.agents ?? []).map((a) => a.id)}
+                graph={graph}
+                dispatch={dispatch}
+              />
+            </div>
+          }
+        >
+          {models && models.available && !models.connected && (
+            <p className="as-warn">Showing full models.dev catalog: no opencode providers detected.</p>
+          )}
+          <div className="as-panel">
+            {(preview?.agents ?? []).map((agent) => (
+              <AgentRow
+                key={agent.id}
+                agent={agent}
+                catalog={catalog}
+                models={models}
+                state={state}
+                graph={graph}
+                showOverride={showOverride}
+                dispatch={dispatch}
+              />
+            ))}
+            {!preview && <p className="as-spinner">resolving plan…</p>}
+          </div>
+        </CollapsibleSection>
+
+        <ToggleSection
+          title="Skills"
+          kind="skill"
+          items={preview?.skills ?? []}
+          excluded={state.excluded.skill}
+          catalogItems={catalog.skills}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+        />
+        <ToggleSection
+          title="Tools"
+          kind="tool"
+          items={preview?.tools ?? []}
+          excluded={state.excluded.tool}
+          catalogItems={catalog.tools}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+        />
+        <ToggleSection
+          title="Plugins"
+          kind="plugin"
+          items={preview?.plugins ?? []}
+          excluded={state.excluded.plugin}
+          catalogItems={catalog.plugins}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+        />
+        <ToggleSection
+          title="Commands"
+          kind="command"
+          items={(preview?.commands ?? []).map((c) => ({ id: c.id, label: c.label }))}
+          excluded={[]}
+          catalogItems={catalog.commands}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+          readOnly
+        />
+        <ToggleSection
+          title="Rules"
+          kind="rule"
+          items={preview?.rules ?? []}
+          excluded={state.excluded.rule}
+          catalogItems={catalog.rules}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+        />
+
+        {/* MCPs + their options */}
+        <CollapsibleSection
+          title="MCP servers"
+          total={(preview?.mcps ?? []).length}
+          enabled={(preview?.mcps ?? []).filter((m) => !state.excluded.mcp.includes(m.id)).length}
+          addSlot={
+            <AddPopover
+              kind="mcp"
+              label="MCP servers"
+              items={catalog.mcps.map((m) => ({ name: m.name, label: m.label, description: m.description }))}
+              added={state.extra?.mcp ?? []}
+              present={(preview?.mcps ?? []).map((m) => m.id)}
+              graph={graph}
+              dispatch={dispatch}
+            />
+          }
+        >
+          <div className="as-panel">
+            {(preview?.mcps ?? []).map((mcp) => {
+              const catMcp = catalog.mcps.find((m) => m.name === mcp.id)
+              const excluded = state.excluded.mcp.includes(mcp.id)
+              const lockedBy = locks.get(`mcp:${mcp.id}`)
+              const isExtra = (state.extra?.mcp ?? []).includes(mcp.id)
+              const lockNoteId = `lock-mcp-${mcp.id}`
+              return (
+                <div key={mcp.id}>
+                  <div className="as-row">
+                    <ItemSwitch
+                      checked={!excluded}
+                      locked={Boolean(lockedBy)}
+                      label={mcp.label}
+                      describedById={lockNoteId}
+                      onChange={(on) => {
+                        // Same extra/switch parity as ToggleSection: an added
+                        // MCP's switch OFF removes the extra (recoverable via
+                        // "+ Add") rather than orphaning it in `excluded`.
+                        if (!on && isExtra) {
+                          dispatch({ t: "extra", kind: "mcp", name: mcp.id, on: false })
+                          return
+                        }
+                        dispatch({ t: "toggle", kind: "mcp", name: mcp.id, on })
+                      }}
+                    />
+                    <div className="as-row-main">
+                      <span className="as-row-name" title={catMcp?.description || undefined}>
+                        {mcp.label}
+                        {isExtra && <span className="as-tag">added</span>}
+                      </span>
+                      <div className="as-row-detail">{mcp.detail}</div>
+                      {lockedBy && <LockNote requirers={lockedBy} id={lockNoteId} />}
+                    </div>
+                    {isExtra && (
+                      <button
+                        type="button"
+                        className="as-remove"
+                        aria-label={`remove ${mcp.label}`}
+                        onClick={() => dispatch({ t: "extra", kind: "mcp", name: mcp.id, on: false })}
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
+                  {!excluded &&
+                    catMcp?.options.map((opt) => (
+                      <div className="as-row as-row-nested" key={opt.id}>
+                        <ItemSwitch
+                          checked={state.mcps[mcp.id]?.options?.[opt.id] ?? opt.default}
+                          label={`${mcp.label}: ${opt.label}`}
+                          onChange={(on) => dispatch({ t: "mcpOption", mcp: mcp.id, option: opt.id, on })}
+                        />
+                        <div className="as-row-main">
+                          <span className="as-row-name">{opt.label}</span>
+                          {opt.description && <span className="as-row-desc"> · {opt.description}</span>}
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              )
+            })}
+            {(preview?.mcps ?? []).length === 0 && <p className="as-row-desc">none</p>}
+          </div>
+        </CollapsibleSection>
+
+        <ToggleSection
+          title="Language servers"
+          kind="lsp"
+          items={preview?.lsps ?? []}
+          excluded={state.excluded.lsp}
+          catalogItems={catalog.lsps}
+          graph={graph}
+          locks={locks}
+          state={state}
+          dispatch={dispatch}
+        />
+      </div>
+
+      {/* sticky right rail: summary + previews + install */}
+      <aside className="as-rail" aria-label="setup summary">
+        <div className="as-panel as-rail-panel">
+          <h2 className="as-section-title">Summary</h2>
+          <dl className="as-summary-grid as-rail-grid">
+            <dt>presets</dt>
+            <dd>{state.presetNames.join(", ") || "-"}</dd>
+            <dt>pack</dt>
+            <dd>{state.modelPack}</dd>
+            <dt>targets</dt>
+            <dd>{state.targets.join(", ") || "-"}</dd>
+            <dt>scope</dt>
+            <dd>{state.scope}</dd>
+          </dl>
+          {itemCounts.length > 0 && (
+            <p className="as-rail-counts">
+              {itemCounts.map((c) => `${c.n} ${c.label}`).join(" · ")}
+            </p>
+          )}
+          {deletions.length > 0 && (
+            <p className="as-rail-counts as-rail-deletions">
+              {deletions.length} file(s) to delete
+            </p>
+          )}
+          <div className="as-rail-previews">
+            <span className="as-label">Preview files</span>
+            <button type="button" className="as-btn" data-size="sm" onClick={() => openSheet("opencode")}>
+              opencode.json
+            </button>
+            <button type="button" className="as-btn" data-size="sm" onClick={() => openSheet("agentsmd")}>
+              AGENTS.md
+            </button>
+            {deletions.length > 0 && (
+              <button
+                type="button"
+                className="as-btn"
+                data-size="sm"
+                data-variant="danger"
+                onClick={() => setDelOpen(true)}
+              >
+                Deleted files ({deletions.length})
+              </button>
+            )}
+          </div>
+          <div className="as-rail-actions">
+            {props.error && <p className="as-error as-rail-error">{props.error}</p>}
+            <button className="as-btn" onClick={props.onBack}>Back</button>
+            <button
+              className="as-btn"
+              data-variant="primary"
+              disabled={!preview || props.loading || props.error != null || state.targets.length === 0}
+              onClick={props.onInstall}
+            >
+              {props.loading ? "updating…" : "Install"}
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <PreviewSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        tab={sheetTab}
+        onTab={setSheetTab}
+        files={files}
+        loading={props.loading}
+      />
+
+      <DeletionsSheet open={delOpen} onOpenChange={setDelOpen} deletions={deletions} />
+    </div>
+  )
+}
+
+/**
+ * Deletion preview sheet: lists the project-relative paths a sync-install would
+ * remove (deselected items whose lock refs left the resolution closure). Only
+ * opened when the preview reported a non-empty `deletions` set.
+ */
+function DeletionsSheet(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  deletions: PreviewResponse["deletions"]
+}): React.JSX.Element {
+  return (
+    <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="as-sheet-backdrop" />
+        <Dialog.Popup className="as-sheet">
+          <div className="as-sheet-head">
+            <Dialog.Title className="as-sheet-title">
+              Files to delete
+              <span className="as-preview-status">{props.deletions.length} file(s)</span>
+            </Dialog.Title>
+            <Dialog.Close className="as-banner-close" aria-label="close deletions">
+              ×
+            </Dialog.Close>
+          </div>
+          <p className="as-section-hint">
+            Installing this selection removes the following files (deselected items no longer in
+            the resolution closure).
+          </p>
+          <ul className="as-filelist">
+            {props.deletions.map((d, i) => (
+              <li key={i}>
+                <span className="as-file-status as-file-removed">removed</span>
+                {d.path}
+              </li>
+            ))}
+          </ul>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+/** A single framework target switch row. */
+function TargetRow(props: {
+  target: { id: string; label: string; detected: boolean }
+  state: WizardState
+  dispatch: React.Dispatch<Action>
+}): React.JSX.Element {
+  const { target: t, state, dispatch } = props
+  return (
+    <div className="as-row">
+      <ItemSwitch
+        checked={(state.targets as string[]).includes(t.id)}
+        label={t.label}
+        onChange={(on) =>
+          dispatch({
+            t: "targets",
+            targets: on ? [...state.targets, t.id] : state.targets.filter((x) => x !== t.id),
+          })
+        }
+      />
+      <div className="as-row-main">
+        <span className="as-row-name">{t.label}</span>
+        {t.detected && <span className="as-row-desc"> · detected</span>}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * One agent row: resolved model as a hue badge (`provider/model : effort`)
+ * tagged "default" (the resolved tier model) or "custom" (user override, with a
+ * tooltip'd reset control). When the section's global "Override defaults"
+ * switch is ON the searchable model combobox and the reasoning-effort segmented
+ * control are shown; clearing the fields resets to the resolved tier model
+ * (which may itself be a user tier override), the reducer drops the per-agent
+ * override, and the badge flips back to DEFAULT.
+ */
+function AgentRow(props: {
+  agent: { id: string; label: string; model: string; reasoningEffort?: string }
+  catalog: CatalogResponse
+  models: ModelsResponse | null
+  state: WizardState
+  graph: GraphInfo | null
+  showOverride: boolean
+  dispatch: React.Dispatch<Action>
+}): React.JSX.Element {
+  const { agent, catalog, models, state, graph, showOverride, dispatch } = props
+  const override = typeof state.agents[agent.id]?.model === "string" ? (state.agents[agent.id]!.model as string) : ""
+  const effort = state.agents[agent.id]?.thinking?.reasoningEffort
+  const custom = override !== "" || effort !== undefined
+  // Show the model/effort controls when the global toggle is ON, OR when this
+  // row already carries an override — so turning the toggle OFF never hides an
+  // active override (it only collapses default rows). Per-row reset stays the
+  // explicit clearing path.
+  const controlsVisible = showOverride || custom
+  // Badge effort: the user's override effort when set, otherwise the resolved
+  // effort the preview reports for the tier model (may be absent → no suffix,
+  // never invented).
+  const badgeEffort = effort ?? agent.reasoningEffort
+  const isExtra = (state.extra?.agent ?? []).includes(agent.id)
+  const agentDesc = catalog.agents.find((a) => a.name === agent.id)?.description
+  function reset(): void {
+    dispatch({ t: "agentModel", agentId: agent.id, model: "" })
+    dispatch({ t: "agentEffort", agentId: agent.id, effort: "" })
+  }
+  return (
+    <div className="as-row as-agent-row">
+      <div className="as-row-main">
+        <span className="as-row-name" title={agentDesc || undefined}>
+          {agent.label}
+          {isExtra && <span className="as-tag">added</span>}
+        </span>
+        <div className="as-row-detail as-agent-model">
+          <ModelBadge model={agent.model} effort={badgeEffort} />
+          <span className="as-tag" data-variant={custom ? "custom" : "default"}>
+            {custom ? "custom" : "default"}
+          </span>
+          {custom && (
+            <Tooltip.Root>
+              <Tooltip.Trigger
+                render={
+                  <button type="button" className="as-remove" aria-label={`reset ${agent.label} to tier model`} onClick={reset} />
+                }
+              >
+                ↺
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Positioner className="as-positioner" sideOffset={6}>
+                  <Tooltip.Popup className="as-tooltip">Reset to tier model</Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+        </div>
+        <DepChips info={graph} kind="agent" name={agent.id} />
+      </div>
+      {controlsVisible && (
+        <div className="as-agent-controls">
+          <div className="as-field">
+            <label className="as-label" htmlFor={`model-${agent.id}`}>model override</label>
+            <ModelPicker
+              id={`model-${agent.id}`}
+              models={models}
+              placeholder={agent.model}
+              value={override}
+              onChange={(v) => dispatch({ t: "agentModel", agentId: agent.id, model: v })}
+            />
+          </div>
+          <div className="as-field">
+            <span className="as-label">effort</span>
+            <Seg
+              ariaLabel={`${agent.label} reasoning effort`}
+              value={effort ?? ""}
+              onChange={(v) => dispatch({ t: "agentEffort", agentId: agent.id, effort: v })}
+              options={[
+                { value: "", label: "auto" },
+                ...catalog.reasoningEfforts.map((r) => ({ value: r, label: r })),
+              ]}
+            />
+          </div>
+        </div>
+      )}
+      {isExtra && (
+        <button
+          type="button"
+          className="as-remove"
+          aria-label={`remove ${agent.label}`}
+          onClick={() => dispatch({ t: "extra", kind: "agent", name: agent.id, on: false })}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  )
+}
+
+/** Chevron that rotates with the collapsible open state (CSS drives rotation). */
+function Chevron(): React.JSX.Element {
+  return (
+    <svg className="as-chevron" width="14" height="14" viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+      <path d="M3 4.5 L6 7.5 L9 4.5" stroke="currentColor" strokeWidth="1.9" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/**
+ * A review section that starts COLLAPSED: the header row (title + "enabled/
+ * total" count badge + optional "+ Add" slot + chevron) is always visible and
+ * the body animates open/closed via Base UI Collapsible (140ms height/opacity).
+ * The "+ Add" slot lives OUTSIDE the trigger so it stays clickable while the
+ * section is collapsed (its popover is a portal overlay, so it does not expand
+ * the section — the count still reflects any additions live).
+ */
+function CollapsibleSection(props: {
+  title: string
+  enabled: number
+  total: number
+  defaultOpen?: boolean
+  addSlot?: React.ReactNode
+  children: React.ReactNode
+}): React.JSX.Element {
+  return (
+    <Collapsible.Root className="as-section as-section-collapsible" defaultOpen={props.defaultOpen ?? false}>
+      <div className="as-section-head as-collapse-head">
+        <Collapsible.Trigger className="as-collapse-head-trigger">
+          <h2 className="as-section-title">{props.title}</h2>
+          <span className="as-count as-section-count">
+            {props.enabled}/{props.total}
+          </span>
+          <Chevron />
+        </Collapsible.Trigger>
+        {props.addSlot}
+      </div>
+      <Collapsible.Panel className="as-collapse-panel as-section-panel">
+        {props.children}
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  )
+}
+
+/**
+ * A toggle section card (Skills/Tools/Plugins/Commands): switch rows with
+ * dependency locks, an "+ Add" popover in the header, and remove affordances
+ * on rows the user added beyond the presets.
+ */
+function ToggleSection(props: {
+  title: string
+  kind: keyof WizardState["excluded"] | "command"
+  items: { id: string; label: string; contradicts?: string[] }[]
+  excluded: string[]
+  catalogItems: { name: string; label: string; description: string }[]
+  graph: GraphInfo | null
+  locks: Map<string, string[]>
+  state: WizardState
+  dispatch: React.Dispatch<Action>
+  readOnly?: boolean
+}): React.JSX.Element {
+  const extras = props.state.extra?.[props.kind as ExtraKind] ?? []
+  // Bare item name -> catalog description, for the hover title on each row.
+  const descOf = new Map(props.catalogItems.map((c) => [c.name, c.description]))
+  const total = props.items.length
+  const enabled = props.readOnly
+    ? total
+    : props.items.filter((i) => !props.excluded.includes(i.id)).length
+  // Active contradictions: an item's declared conflict only "fires" when BOTH
+  // it and the named peer are currently selected (not excluded). Advisory —
+  // selection stays allowed; we just surface the conflict in amber.
+  const isSelected = (id: string) => props.readOnly || !props.excluded.includes(id)
+  const activeConflicts = (item: { id: string; contradicts?: string[] }): string[] =>
+    isSelected(item.id) ? (item.contradicts ?? []).filter(isSelected) : []
+  const conflictPairs = new Set<string>()
+  for (const it of props.items)
+    for (const other of activeConflicts(it)) conflictPairs.add([it.id, other].sort().join(" ↔ "))
+  return (
+    <CollapsibleSection
+      title={props.title}
+      enabled={enabled}
+      total={total}
+      addSlot={
+        <AddPopover
+          kind={props.kind as ExtraKind}
+          label={props.title}
+          items={props.catalogItems}
+          added={extras}
+          present={props.items.map((i) => i.id)}
+          graph={props.graph}
+          dispatch={props.dispatch}
+        />
+      }
+    >
+      <div className="as-panel">
+        {conflictPairs.size > 0 && (
+          <p className="as-warn as-contradict-summary">
+            Conflicting rules selected: {[...conflictPairs].join(", ")}. Both stay installable — consider keeping one.
+          </p>
+        )}
+        {props.items.map((item) => {
+          const lockedBy = props.locks.get(`${props.kind}:${item.id}`)
+          const isExtra = extras.includes(item.id)
+          const lockNoteId = `lock-${props.kind}-${item.id}`
+          const conflicts = activeConflicts(item)
+          return (
+            <div className="as-row" key={item.id}>
+              <ItemSwitch
+                checked={!props.excluded.includes(item.id)}
+                locked={Boolean(lockedBy) && !props.readOnly}
+                disabled={props.readOnly}
+                label={item.label}
+                describedById={lockNoteId}
+                onChange={(on) => {
+                  if (props.readOnly) return
+                  // An extra item's switch mirrors its × remove: turning it OFF
+                  // deletes the extra (recoverable via "+ Add") instead of
+                  // pushing it into `excluded`, which would drop its preview row
+                  // AND keep it in `extra` — leaving it invisible everywhere.
+                  if (!on && isExtra) {
+                    props.dispatch({ t: "extra", kind: props.kind as ExtraKind, name: item.id, on: false })
+                    return
+                  }
+                  props.dispatch({
+                    t: "toggle",
+                    kind: props.kind as keyof WizardState["excluded"],
+                    name: item.id,
+                    on,
+                  })
+                }}
+              />
+              <div className="as-row-main">
+                <span className="as-row-name" title={descOf.get(item.id) || undefined}>
+                  {item.label}
+                  {isExtra && <span className="as-tag">added</span>}
+                  {conflicts.map((name) => (
+                    <span className="as-tag as-tag-warn" key={name}>
+                      contradicts {name}
+                    </span>
+                  ))}
+                </span>
+                {lockedBy && !props.readOnly && <LockNote requirers={lockedBy} id={lockNoteId} />}
+                <DepChips info={props.graph} kind={props.kind} name={item.id} />
+              </div>
+              {isExtra && (
+                <button
+                  type="button"
+                  className="as-remove"
+                  aria-label={`remove ${item.label}`}
+                  onClick={() => props.dispatch({ t: "extra", kind: props.kind as ExtraKind, name: item.id, on: false })}
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          )
+        })}
+        {props.items.length === 0 && <p className="as-row-desc">none</p>}
+      </div>
+    </CollapsibleSection>
+  )
+}
+
+/* ================================================================== */
+/* post-install result details (shown under the success banner)        */
+/* ================================================================== */
+
+function ResultDetails(props: { result: InstallResponse }): React.JSX.Element {
+  const r = props.result
+  return (
+    <details className="as-details">
+      <summary className="as-summary">
+        Last install: {r.installed} item(s), {r.files.length} file(s)
+        {r.files.some((f) => f.status === "removed") &&
+          ` (${r.files.filter((f) => f.status === "removed").length} removed)`}
+      </summary>
+      {r.notes.length > 0 && (
+        <ul className="as-notes">
+          {r.notes.map((n, i) => (
+            <li key={i}>{n}</li>
+          ))}
+        </ul>
+      )}
+      <ul className="as-filelist">
+        {r.files.map((f, i) => (
+          <li key={i}>
+            <span
+              className="as-file-status"
+              data-status={f.status}
+              {...(f.status === "removed" ? { "data-removed": "" } : {})}
+            >
+              {f.status}
+            </span>
+            {f.path}
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+/* ================================================================== */
+/* mount                                                               */
+/* ================================================================== */
+
+const root = document.getElementById("root")
+if (root) {
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+}