Consolidate the governed presentation stack

e340d7287380 · Christopher David · 11d ago · parent cee36e1a321f

Consolidate the governed presentation stack

Deploy story

What this commit did to the running system — joined from the forge receipt chain, the part a commit page elsewhere cannot show.

Not deployed through the forge lane

No push, promotion, build, or deploy receipt references this commit (receipts are scanned over a bounded recent window). Changes shipped by full node replacement carry their proof in the release gate receipt instead.

Changed files

modified AGENTS.md
modified INVARIANTS.md
modified README.md
modified assets/css/app.css
added assets/test/css_contract_test.mjs
modified docs/2026-08-20-integration-hardening-and-staging-readiness-recommendations.md
added docs/ICONS.md
modified docs/architecture.md
modified docs/component-library.md
added docs/dependencies-and-licenses.md
modified lib/openagents/markdown.ex
modified lib/openagents_web.ex
modified lib/openagents_web/component_catalog.ex
deleted lib/openagents_web/components/core_components.ex
modified lib/openagents_web/components/layouts.ex
modified lib/openagents_web/components/layouts/root.html.heex
modified lib/openagents_web/components/ui.ex
modified lib/openagents_web/icons.ex
modified lib/openagents_web/live/admin_forge_live.ex
modified lib/openagents_web/live/admin_live.ex
modified lib/openagents_web/live/assignee_index_live.ex
modified lib/openagents_web/live/changelog_live.ex
modified lib/openagents_web/live/chat_live.ex
modified lib/openagents_web/live/code_blob_live.ex
modified lib/openagents_web/live/code_commit_live.ex
modified lib/openagents_web/live/code_repo_live.ex
modified lib/openagents_web/live/components_live.ex
modified lib/openagents_web/live/computers_live.ex
modified lib/openagents_web/live/docs_live.ex
modified lib/openagents_web/live/home_live.ex
modified lib/openagents_web/live/issue_index_live.ex
modified lib/openagents_web/live/issue_new_live.ex
modified lib/openagents_web/live/issue_show_live.ex
modified lib/openagents_web/live/label_index_live.ex
modified lib/openagents_web/live/leaderboard_live.ex
modified lib/openagents_web/live/milestone_index_live.ex
modified lib/openagents_web/live/network_status_live.ex
modified lib/openagents_web/live/project_index_live.ex
modified lib/openagents_web/live/project_show_live.ex
modified lib/openagents_web/live/ui_gallery_live.ex
modified lib/openagents_web/live/voice_spike_live.ex
modified mix.exs
modified mix.lock
added ops/staging/generate-sbom.sh
modified priv/brand/README.md
modified priv/icons/README.md
added priv/licenses/HEROICONS-LICENSE
added priv/licenses/THIRD_PARTY_NOTICES.md
modified test/openagents/markdown_test.exs
modified test/openagents_web/icon_affordances_test.exs
modified test/openagents_web/live/components_live_test.exs
modified test/openagents_web/live/issue_index_live_test.exs

Diff

52 files changed, +1074 -1127

  - You failed to follow the Authenticated Routes guidelines, or you failed to pass `current_scope` to `<Layouts.app>`
  - **Always** fix the `current_scope` error by moving your routes to the proper `live_session` and ensure you pass `current_scope` as needed
- Phoenix v1.8 moved the `<.flash_group>` component to the `Layouts` module. You are **forbidden** from calling `<.flash_group>` outside of the `layouts.ex` module
- Out of the box, `core_components.ex` imports an `<.icon name="hero-x-mark" class="w-5 h-5"/>` component for hero icons. **Always** use the `<.icon>` component for icons, **never** use `Heroicons` modules or similar
- **Always** use the imported `<.input>` component for form inputs from `core_components.ex` when available. `<.input>` is imported and using it will save steps and prevent errors
- Render icons only through `OpenAgentsWeb.UI.icon/1`. Prefer the vendored Apps SDK set. Use a `hero-*` fallback only when `docs/ICONS.md` records why the preferred set has no suitable glyph
- **Always** use the imported `OpenAgentsWeb.UI.input/1` component for form inputs. It accepts `Phoenix.HTML.FormField` values and unwrapped raw controls
- If you override the default input classes (`<.input class="myclass px-2 py-1 rounded-lg">)`) class with your own values, no default classes are inherited, so your
custom classes must fully style the input


- **Always use and maintain this import syntax** in the app.css file for projects generated with `phx.new`
- **Never** use `@apply` when writing raw css
- **There is exactly one component system: vendored Basecoat plus OpenAgents style pack.** Basecoat lives in `assets/vendor/basecoat/components/` and carries structure (display, padding, min-height); `assets/css/openagents.css` carries OpenAgents' identity (motion tokens, radius scale, colour, the notched variant, corner frames) and must stay the last import so its declarations win.
  - **Reach for `OpenAgentsWeb.UI` first.** It wraps that CSS in nineteen ready primitives — `button/1`, `card/1`, `badge/1`, `alert/1`, `input/1`, `textarea/1`, `label/1`, `field/1`, `avatar/1`, `menu/1`, `empty/1`, `kbd/1`, and the rest. Fall back to hand-written classes only when no primitive covers the shape.
  - **Reach for `OpenAgentsWeb.UI` first.** It wraps that CSS in 22 ready primitives — `button/1`, `card/1`, `badge/1`, `alert/1`, `input/1`, `textarea/1`, `label/1`, `field/1`, `header/1`, `table/1`, `list/1`, `avatar/1`, `menu/1`, `empty/1`, `kbd/1`, and the rest. Fall back to hand-written classes only when no primitive covers the shape.
  - **Variants are data attributes, not classes.** A control is `class="btn"` plus `data-variant="primary"` / `data-size="sm"` / `data-tone="danger"`. Never invent `btn-primary`-style variant classes; they defeat the whole point of the split.
  - **Never add a second component library — DaisyUI above all.** DaisyUI was removed deliberately. It emitted flat `.btn` rules (setting background, colour, border) from a cascade layer that outranked every `.btn[data-variant=…]` in `openagents.css`, so all eight UI button variants rendered identically on staging. Any library with the same shape will do the same thing again.
  - **Import Basecoat components individually**, one `@import "../vendor/basecoat/components/<name>.css"` per component a surface actually uses. Component CSS lands in `@layer components` and ships whether or not the class appears in markup, so the list is a budget. **Never** import `basecoat.css`, `basecoat-base.css`, or `basecoat-components.css` — each pulls in all 39 components at once.
  - The palette is the token ladder at the top of `app.css` (`--ink-void` / `--ink-surface` / `--ink-raised`, the text and line tiers, and the four semantic colours). It is dark-only. Prefer the Basecoat utility names built on it — `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, `border-border` — over the older `base-100`/`base-content` aliases, which are kept only so unconverted surfaces keep resolving.
  - The palette is the token ladder at the top of `app.css` (`--ink-void` / `--ink-surface` / `--ink-raised`, the text and line tiers, and the four semantic colours). It is dark-only. Use the Basecoat utility names built on it — `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, and `border-border`. The retired compatibility aliases no longer exist
- Add custom Tailwind only when the design is unique to OpenAgents and no primitive fits.
- Out of the box **only the app.js and app.css bundles are supported**
  - You cannot reference an external vendor'd script `src` or link `href` in the layouts

510	510		- Run a failed set: `mix test --failed`
511	511		- Before a final commit: run `mix precommit` and fix all compile warnings, formatting, and test failures.
512	512
513		-	`<!-- usage-rules-end -->`
			`\ No newline at end of file`
	513	+	`<!-- usage-rules-end -->`


### UI-003 — Product surfaces render only through the sanctioned component library

Status: Proposed
Status: Current

OpenAgents's interface is built from `OpenAgentsWeb.UI` components over Basecoat
primitives vendored at a pinned tag and styled by the OpenAgents pack. Product
surfaces do not author component-level CSS classes; hand-authored CSS is
confined to app-shell layout and the one sanctioned brand animation. No
primitives vendored at a pinned tag and styled by the OpenAgents pack. Every
web import exposes that one module; product surfaces compose its primitives
with surface-specific layout classes from the sanctioned style pack. No
component accepts provider identifiers or private recall content as an
attribute; tool activity reaches `event_header` only as the bounded projection
UI-002 sanctions, so UI-002 cannot be violated through a primitive.

The shared corner radius, the self-hosted Geist faces, the single dark theme,
and the reserved semantic color meanings hold across every component. Depth is
limited to the sanctioned lift, halo, and state-ring tokens.
Adopting an additional Basecoat component requires a `docs/component-library.md` change and an
explicit per-component import.

This is the Gate 4 target. `OpenAgentsWeb.UI` and the OpenAgents style pack are
implemented, but generated `OpenAgentsWeb.CoreComponents`, its legacy icon
entry point, and a nonfunctional theme control still have catalogued callers.
Until those callers are migrated or narrowly justified, this invariant cannot
be used as proof that the product has one fully enforced component path.
Adopting an additional Basecoat component requires a
`docs/component-library.md` change and an explicit per-component import. The
application exposes no light/system theme control while the palette is
dark-only. Apps SDK UI glyphs are preferred; the pinned Heroicons fallback has
an explicit inventory and no current product call sites.

Evidence: `assets/vendor/basecoat/README.md`, `assets/css/openagents.css`,
`priv/static/fonts`, `OpenAgentsWeb.UI`, `OpenAgentsWeb.UITest`,
`OpenAgentsWeb.UIGalleryLiveTest`, and `test/openagents_web/ui_test.exs`.
`priv/static/fonts`, `OpenAgentsWeb.UI`, `OpenAgentsWeb.ComponentCatalog`,
`OpenAgentsWeb.UITest`, `OpenAgentsWeb.UIGalleryLiveTest`,
`test/openagents_web/component_catalog_test.exs`,
`test/openagents_web/icon_affordances_test.exs`, and
`assets/test/css_contract_test.mjs`.

### LEADERBOARD-001 — The public board publishes one bounded projection


OpenAgents style pack in `assets/css/openagents.css`, and reusable HEEx
components in `OpenAgentsWeb.UI`. The live component inventory is available at
`/components`; [docs/component-library.md](docs/component-library.md) records
the current transition and extension rules.
the supported primitives and extension rules. Follow the
[icon policy](docs/ICONS.md) for the governed glyph tiers.

Fonts and icons are self-hosted. Do not add a remote font, icon font, second
component library, or unreviewed browser script.

110	111		`Vendored third-party material keeps its own license and notices. In particular,`
111	112		Basecoat is under `assets/vendor/basecoat/`, the Apps SDK icon set is under
112	113		`priv/icons/`, and self-hosted font notices are under `priv/static/fonts/`.
113		-	`Review those notices when redistributing the application.`
	114	+	`Review [the dependency and license inventory](docs/dependencies-and-licenses.md)`
	115	+	and `priv/licenses/THIRD_PARTY_NOTICES.md` when redistributing the application.

 * These carry the structure (display, padding, min-height, background) that
 * openagents.css deliberately does not set — its .btn only adds gap, border,
 * radius, colour, font, and transition on top. With DaisyUI gone they are the
 * only source of that geometry, so nothing here is optional. This list is
 * OpenAgents, plus `table` for `CoreComponents.table/1`. */
 * only source of that geometry, so nothing here is optional. This list is the
 * exact structure consumed by `OpenAgentsWeb.UI`. */
@import "../vendor/basecoat/base/base.css";
@import "../vendor/basecoat/components/button.css";
@import "../vendor/basecoat/components/input.css";

/* Required for Tailwind to automatically pick up changes in colocated CSS files in dev */
@source "../../_build/dev/phoenix-colocated/openagents/*/";

/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
   The heroicons installation itself is managed by your mix.exs */
/* Deliberate second-tier icon fallback. Product call sites prefer the vendored
 * Apps SDK set; docs/ICONS.md inventories every exceptional Heroicons use. */
@plugin "../vendor/heroicons";

/* ── Token ladder ───────────────────────────────────────────────────────────

 * (--ink-surface), elevated components another step up (--ink-raised). New
 * surfaces take a rung; they do not invent a fourth.
 *
 * The palette is dark-only, as OpenAgents is (`color-scheme: dark`). The
 * `data-theme` plumbing in root.html.heex still runs, but there is no second
 * light palette behind it any more — DaisyUI's was the only one, and OpenAgents
 * ships no light variant to replace it with.
 * The palette is dark-only, as OpenAgents is (`color-scheme: dark`). A light
 * palette requires a separate owner-approved design project.
 */
:root {
  color-scheme: dark;

  --line-strong: oklch(36.455% 0.0696 264.888); /* exception; best fit 20% */
}

/* Utility namespaces on top of the ladder.
 *
 * `base-100/200/300` and `base-content` were DaisyUI's surface vocabulary and
 * are still spoken by surfaces this change did not restyle (the component
 * catalog, the marketing home template, and the sidebar/docs/chat CSS at the
 * foot of this file). They are kept as aliases onto the three surface rungs so
 * that vocabulary keeps resolving; they are now names for OpenAgents tokens, not a
 * second palette. Prefer Basecoat's own `background` / `card` / `foreground` /
 * `border` names in new markup.
 *
 * The semantic four are OpenAgents, not DaisyUI's, and have no Basecoat
/* The semantic four are OpenAgents, not DaisyUI's, and have no Basecoat
 * equivalent — `--color-destructive` covers danger, but there is no success,
 * warning, or info in the Basecoat base. */
@theme {
  --color-base-100: var(--ink-void);
  --color-base-200: var(--ink-surface);
  --color-base-300: var(--ink-raised);
  --color-base-content: var(--text-primary);

  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);

@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Use the data attribute for dark mode  */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }


  width: 280px;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  border-right: 1px solid var(--ink-raised);
  background: var(--ink-surface);
}

.sidebar-header {

  flex: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-base-content);
  color: var(--text-primary);
}

.sidebar-nav {

  padding-inline: 14px;
  padding-block: 6px;
  border-radius: 10px;
  color: var(--color-base-content);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;


@media (hover: hover) {
  .sidebar-row:hover {
    background: var(--color-base-300);
    background: var(--ink-raised);
    color: #fff;
  }
}

.sidebar-row:has(.sidebar-row__hit:active) {
  background: var(--color-base-300);
  background: var(--ink-raised);
}

.sidebar-row[data-selected] {
  background: var(--color-base-300);
  background: var(--ink-raised);
}

.sidebar-row--static,

.sidebar-row--static:hover,
  .sidebar-row--empty:hover {
  background: transparent;
  color: var(--color-base-content);
  color: var(--text-primary);
}

.sidebar-row__hit {

  align-items: center;
  min-height: 32px;
  padding-inline: 16px;
  background: var(--color-base-200);
  background: var(--ink-surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;

  gap: 10px;
  min-height: 52px;
  padding: 8px;
  border-top: 1px solid var(--color-base-300);
  border-top: 1px solid var(--ink-raised);
}

/* Docs layout */

  flex: none;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  border-right: 1px solid var(--ink-raised);
  background: var(--ink-surface);
  padding: 16px 0;
}


.docs-sidebar__link {
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--color-base-content);
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;


@media (hover: hover) {
  .docs-sidebar__link:hover {
    background: var(--color-base-300);
    background: var(--ink-raised);
    color: #fff;
  }
}

}

.message-content {
  color: var(--color-base-content);
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  white-space: pre-wrap;


.composer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  border-top: 1px solid var(--ink-raised);
  background: var(--ink-void);
}

.composer-card {

  max-width: 720px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--color-base-300);
  border: 1px solid var(--ink-raised);
  border-radius: 24px;
  background: var(--color-base-200);
  background: var(--ink-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--color-base-content);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5rem;

1	+	`import assert from "node:assert/strict"`
2	+	`import {execFileSync} from "node:child_process"`
3	+	`import {readFileSync, rmSync} from "node:fs"`
4	+	`import {tmpdir} from "node:os"`
5	+	`import {resolve} from "node:path"`
6	+	`import test from "node:test"`
7	+	`import {fileURLToPath} from "node:url"`
8	+
9	+	`const assetsDir = resolve(fileURLToPath(new URL("..", import.meta.url)))`
10	+	`const projectDir = resolve(assetsDir, "..")`
11	+
12	+	`test("the compiled cascade preserves every governed button variant", () => {`
13	+	const output = resolve(tmpdir(), `openagents-css-contract-${process.pid}.css`)
14	+
15	+	`try {`
16	+	`execFileSync(`
17	+	`"mix",`
18	+	["tailwind", "openagents", "--minify", `--output=${output}`],
19	+	`{cwd: projectDir, encoding: "utf8", stdio: "pipe"},`
20	+	`)`
21	+
22	+	`const css = readFileSync(output, "utf8")`
23	+	`const basecoatGeometry = css.indexOf(".btn{")`
24	+	`const governedBase = css.indexOf("border-radius:var(--radius-md)")`
25	+	`const variants = [`
26	+	`"primary",`
27	+	`"secondary",`
28	+	`"outline",`
29	+	`"ghost",`
30	+	`"chip",`
31	+	`"destructive",`
32	+	`"notched",`
33	+	`"link",`
34	+	`]`
35	+
36	+	`assert.ok(basecoatGeometry >= 0, "compiled CSS is missing Basecoat button geometry")`
37	+	`assert.ok(governedBase > basecoatGeometry, "the OpenAgents style pack must follow Basecoat")`
38	+
39	+	`for (const variant of variants) {`
40	+	const selector = `.btn[data-variant=${variant}]`
41	+	assert.ok(css.indexOf(selector) > governedBase, `${selector} must follow the shared button rule`)
42	+	`}`
43	+
44	+	`assert.doesNotMatch(css, /\.btn-(primary\|secondary\|ghost\|error\|success\|warning\|info)\b/)`
45	+	`assert.doesNotMatch(css, /--color-base-(100\|200\|300\|content)\b/)`
46	+	`assert.doesNotMatch(css, /data-theme\|prefers-color-scheme/)`
47	+	`} finally {`
48	+	`rmSync(output, {force: true})`
49	+	`}`
50	+	`})`
51	+
52	+	`test("the source imports only the owned component stack", () => {`
53	+	`const source = readFileSync(resolve(assetsDir, "css/app.css"), "utf8")`
54	+	`const stylePack = source.indexOf('@import "./openagents.css"')`
55	+
56	+	`assert.ok(stylePack >= 0)`
57	+	`assert.ok(source.indexOf("components/button.css") < stylePack)`
58	+	`assert.doesNotMatch(source, /@import[^;]*(basecoat\.css\|basecoat-base\.css\|basecoat-components\.css)/)`
59	+	`assert.doesNotMatch(source, /basecoat.*\.js\|initAll\|MutationObserver/)`
60	+	`})`


### Complete the Markdown parser migration

The integration plan says MDEx replaced Earmark, while the application still
depends on and calls Earmark. Hex marks Earmark as retired and no longer
maintained. Migrate to MDEx or another maintained parser before staging, then
verify sanitization, security history, and output compatibility.
At the initial audit, the integration plan said MDEx replaced Earmark while the
application still depended on and called the retired parser. Gate 4 replaces
that implementation with MDEx and verifies sanitization, maintained status,
and output compatibility.

Whichever parser remains must pass tests for:


- Choose the final generic module name: preferably `OpenAgentsWeb.UI` once the
  source-project migration is complete.
- Move all product surfaces onto that component system.
- Keep `CoreComponents` only as a temporary compatibility layer with an explicit
  removal list.
- Remove the generated compatibility component module after migrating every
  caller. Do not recreate a parallel component surface.
- Remove DaisyUI aliases and compatibility tokens after every surface has
  migrated.
- Use one documented icon policy: Apps SDK icons are preferred, and Heroicons

424	424		`system, one documented two-tier icon policy, no nonfunctional theme control, no`
425	425		`unexplained dependency, and complete license records.`
426	426
	427	+	`**Gate 4 implementation status (2026-08-20): complete; exact-image SBOM`
	428	+	`evidence pending.**`
	429	+
	430	+	`- Replaced the retired parser with MDEx and removed its stale lock entry.`
	431	+	`OpenAgents.Markdown` disables dangerous rendering, applies an exact Ammonia
	432	+	`allowlist, normalizes links, and independently bounds input, syntax-tree`
	433	+	`nesting, output, and escaped fallback size. The focused suite covers raw`
	434	+	`HTML, scripts and handlers, unsafe schemes, supported structures, malformed`
	435	+	`input, streaming stability, and every limit.`
	436	+	- Consolidated all web imports and product surfaces on `OpenAgentsWeb.UI`.
	437	+	`Added form-aware input, heading, table, and list primitives; removed the`
	438	+	generated compatibility module; and made `/components` an executable
	439	+	`inventory of every public component.`
	440	+	`- Removed the browser theme script, theme control, theme selectors, and retired`
	441	+	`palette aliases. The palette remains deliberately dark-only. The Node suite`
	442	+	`now compiles Tailwind and proves that Basecoat geometry precedes the`
	443	+	`OpenAgents style pack and that all eight governed button variants survive the`
	444	+	`cascade.`
	445	+	`- Migrated current glyph uses to the preferred vendored Apps SDK set. Retained`
	446	+	`Heroicons only as the owner-approved second tier, pinned it to immutable`
	447	+	revision `0435d4ca364a608cc75e2f8683d374e55abbae26`, and recorded an empty
	448	+	fallback-use inventory in `docs/ICONS.md`.
	449	+	`- Added a direct-dependency purpose and license ledger, release notices for`
	450	+	`Basecoat, icons, fonts, and the brand mark, and digest-pinned Syft SBOM`
	451	+	tooling. `mix precommit` now runs Hex retirement, MixAudit vulnerability, and
	452	+	`unused-lock checks. All three checks pass locally.`
	453	+	`- The remaining evidence item is the CycloneDX SBOM for the exact staging image`
	454	+	digest. `ops/staging/generate-sbom.sh` is ready, but Gate 4 does not claim the
	455	+	`artifact until an exact committed candidate is built and scanned. Retain its`
	456	+	`JSON and receipt with staging evidence before advancing this gate.`
	457	+
427	458		`## Gate 5: Make runtime configuration explicit and fail closed`
428	459
429	460		`Create one typed runtime configuration boundary. Do not scatter environment`

- [x] The repository has one accurate architecture narrative.
- [x] Every remaining Sarah reference is intentional and specific.
- [x] All documentation links and invariant evidence resolve.
- [ ] The application has one Markdown parser, component system, and documented
- [x] The application has one Markdown parser, component system, and documented
      two-tier icon policy.
- [ ] The dark-only palette has no nonfunctional theme control.
- [x] The dark-only palette has no nonfunctional theme control.
- [ ] Runtime configuration is typed, redacted, and staging-specific.
- [ ] Every route has an explicit authority class.
- [ ] GitHub token behavior matches code, UI disclosure, and data rights.

deliberately dark-only without a nonfunctional toggle, control the palette-file
rename as a visual migration, and reject conflicting cascade-layer behavior.

**Heroicons.** Gate 4 says "Remove Heroicons and its dependency after the
remaining issue and layout surfaces use vendored icons." The owner's ruling on
2026-08-19 was Apps SDK icons **preferred, heroicons as backup** — i.e. retained
deliberately. `{:heroicons, ...}` is still in `mix.exs`. One of the two should
move; the plan should not quietly overwrite a stated decision.

**The palette is dark-only, today.** Gate 4's UI consolidation does not mention
it, but removing DaisyUI removed the only light theme in the application. Sarah's
palette has no light variant. `data-theme` still runs and the toggle still
switches, but it no longer repaints anything. This is a live user-visible state,
not a pending task, and `theme_toggle/1`'s docstring now says so. Inventing a
light Sarah palette is a design decision that needs an owner.

**Basecoat is load-bearing for the palette, not just components.** Gate 4 says to
"rename the style pack after generic application components no longer depend on
the Sarah name." Worth knowing before that rename: `sarah.css` now defines the
palette *primitives* (`--accent`, `--ink-void`, `--text-primary`, `--line-strong`,
…), not merely aliases. Prior to the DaisyUI removal it only aliased them and
nothing defined them — the entire Sarah palette silently resolved to nothing and
DaisyUI's theme was carrying every colour. Renaming that file is therefore a
palette migration, not a cosmetic rename.
**Heroicons, resolved.** Product surfaces now use Apps SDK glyphs. Heroicons
remains the deliberate fallback, is pinned to an immutable revision, and has no
current product call sites. `docs/ICONS.md` governs and inventories exceptions.

**The palette is dark-only, resolved.** The application removed its theme
control, browser theme state, and theme selectors. A light palette remains a
separate owner-approved design project.

**The palette file, resolved.** `assets/css/openagents.css` owns the palette
contract and loads after individually imported Basecoat structure. The retired
compatibility aliases are gone. Future renames remain controlled palette
migrations, not cosmetic changes.

**Why DaisyUI had to be removed rather than layered under.** Recording this so a
similar library is not reintroduced under a different name: DaisyUI emits

acceptance test for Gate 4's "one component system", not merely counting the
libraries in `mix.exs`.

**Cascade behavior, resolved.** `assets/test/css_contract_test.mjs` compiles the
actual bundle and checks selector order, variant survival, retired aliases, and
theme absence. The gate now verifies behavior rather than dependency names.

## A5. Evidence for Gate 5, from failures already observed

Gate 5's "fail closed" requirement is correct and this is what its absence

1	+	`# Icon policy`
2	+
3	+	`Date: 2026-08-20`
4	+
5	+	`Status: Current`
6	+
7	+	`OpenAgents uses one component entry point and two governed glyph tiers. Render`
8	+	every glyph with `OpenAgentsWeb.UI.icon/1`. Never paste an SVG into a template,
9	+	`call an icon library module, add an icon font, or introduce a third source.`
10	+
11	+	`## Tier 1: Apps SDK UI`
12	+
13	+	Use the vendored Apps SDK UI set in `priv/icons` first. These files are pinned,
14	+	same-origin, and covered by `priv/icons/LICENSE`. `OpenAgentsWeb.Icons` embeds
15	+	`them and fails on unknown names.`
16	+
17	+	`To add or upgrade a glyph:`
18	+
19	+	1. Check out `openai/apps-sdk-ui` at the reviewed commit.
20	+	2. Run `mix openagents.icons.vendor <path-to-apps-sdk-ui>`.
21	+	3. Update the commit, date, and count in `priv/icons/README.md`.
22	+	4. Run `mix precommit`.
23	+
24	+	`## Tier 2: Heroicons`
25	+
26	+	Use a `hero-*` name only when the Apps SDK set has no suitable glyph. Heroicons
27	+	is pinned to revision `0435d4ca364a608cc75e2f8683d374e55abbae26` and enters
28	+	the CSS bundle through `assets/vendor/heroicons.js`. The same `icon/1` component
29	+	`renders the fallback, so accessibility and sizing stay governed.`
30	+
31	+	`Before you add a fallback use:`
32	+
33	+	`1. Record the call site, glyph, and missing Apps SDK concept in the inventory`
34	+	`below.`
35	+	`2. Confirm that no existing Apps SDK glyph communicates the action.`
36	+	`3. Add a test for the control's accessible name or adjacent visible label.`
37	+	4. Run `mix precommit`.
38	+
39	+	`### Fallback inventory`
40	+
41	+	`No product surface currently uses a Heroicons fallback. The dependency remains`
42	+	`available as the documented second tier, and the CSS contract test prevents it`
43	+	`from becoming a separate component system.`
44	+
45	+	`## Brand marks`
46	+
47	+	Brand marks live in `priv/brand`, outside both generic tiers. Use one only to
48	+	identify the service reached by an action. Render it through `icon/1` with a
49	+	`brand-*` name, and follow the attribution and trademark rules in
50	+	`priv/brand/README.md`.
51	+
52	+	`## Accessibility`
53	+
54	+	`A glyph beside visible words is decorative and needs no label. Put`
55	+	`aria-label` on an icon-only control. Pass `label` to `icon/1` only when the
56	+	`glyph itself is the complete, noninteractive message.`

produce a bounded durable failure outcome instead of abandoning an in-flight
turn, work item, or voice session.

## Untrusted Markdown boundary

Assistant and repository Markdown enters HTML through
`OpenAgents.Markdown.to_html/2` only. MDEx parses CommonMark with dangerous
rendering disabled, Ammonia applies exact tag, attribute, and URL-scheme
allowlists, and the application normalizes links before Phoenix marks the
result safe. Independent input, syntax-tree nesting, and output limits produce
a bounded escaped fallback instead of partial markup. The same function handles
streaming completion and persisted text, so a completed message does not change
when its durable projection replaces the stream.

## Forge planes

The forge contains two separate planes within the `OpenAgents.Forge`


Date: 2026-08-20

Status: Current inventory; consolidation continues in hardening Gate 4
Status: Current

The public catalog at `/components` is the executable inventory of reusable
HEEx components. `OpenAgentsWeb.ComponentCatalog` supplies its navigation,

| Component | Purpose |
| --- | --- |
| `button/1`, `text_button/1` | Boxed, link, chip, destructive, and primary actions |
| `input/1`, `textarea/1`, `label/1`, `field/1` | Form controls and labelled groups |
| `input/1`, `textarea/1`, `label/1`, `field/1` | Form-aware controls and labelled groups |
| `header/1`, `table/1`, `list/1` | Page headings and structured data |
| `alert/1`, `badge/1`, `status_indicator/1` | Explicit feedback and semantic state |
| `card/1`, `frame/1` | Bounded content and decorative framing |
| `avatar/1`, `item/1`, `event_header/1` | Identity and activity rows |
| `empty/1`, `kbd/1`, `menu/1` | Empty states, key hints, and native-popover menus |
| `audio_player/1` | Accessible native audio control in the product frame |
| `icon/1` | Glyphs from the vendored Apps SDK icon set |
| `icon/1` | Governed Apps SDK glyphs and documented Heroicons fallbacks |

`OpenAgentsWeb.Layouts` owns `app/1`, `flash_group/1`, `command_bar/1`,
`account_control/1`, and the currently catalogued theme control. Product
templates begin with `Layouts.app` and never render `flash_group/1` directly.
and `account_control/1`. Product templates begin with `Layouts.app` and never
render `flash_group/1` directly. The staging palette is deliberately dark-only,
so the application exposes no theme control or browser theme state.

## Transitional components
## Specialized components

`OpenAgentsWeb.CoreComponents` still contains the Phoenix-generated `button`,
`input`, `header`, `table`, `list`, `icon`, and `flash` components. The catalog
shows these separately because their names overlap the OpenAgents primitives.
They are compatibility surface, not a second design system. Gate 4 must either
migrate each remaining caller to `OpenAgentsWeb.UI` or document a narrow reason
to retain the generated helper.

`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the one catalogued
`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the only catalogued
forge-specific component. Surface-specific components can live in a focused
module when they encode real domain composition rather than a generic control.


   component needs it. Never import the aggregate Basecoat bundles.
4. Put OpenAgents-owned component styles in `assets/css/openagents.css`; do not
   patch `assets/vendor/basecoat/`.
5. Use `OpenAgentsWeb.UI.icon/1` and the vendored icon set. Do not add an icon
   font, another glyph library, or handwritten SVG in a template.
5. Use `OpenAgentsWeb.UI.icon/1` and follow the two-tier policy in `ICONS.md`.
   Do not add an icon font, a third glyph library, or handwritten SVG in a
   template.
6. Give every icon-only action an accessible name. Decorative icons beside text
   remain hidden from accessibility APIs.
7. Add the component to `OpenAgentsWeb.ComponentCatalog`, add its demo to

8. Keep forms on `Phoenix.Component.to_form/2`; use LiveView streams for
   collections and stable DOM IDs for testable controls.

## Current catalog gaps
## Domain composition candidates

Issue, project, and code surfaces currently compose generic controls directly.
Create new domain components only when repeated behavior justifies them. Likely
candidates are issue rows, comment threads, label controls, project columns,
repository breadcrumbs, file rows, commit rows, and bounded diff panels.

The Gate 4 consolidation also owns these known transitional issues:

- Remove the generated component/icon path after its callers are migrated.
- Enforce the repository's final two-tier icon policy in code and tests.
- Remove the nonfunctional light/system theme choice if the shipped palette
  remains dark-only.
- Prove component variants and semantic colors in compiled CSS rather than by
  class-name assertions alone.
The compiled CSS contract test proves that Basecoat geometry precedes the
OpenAgents style pack, every supported button variant survives compilation, no
retired palette alias survives, and no theme selector enters the bundle.

See [the UI roadmap](issues-projects-ui-roadmap.md),
[ADR 0005](decisions/0005-use-basecoat-and-one-component-system.md), and the

1	+	`# Dependencies and licenses`
2	+
3	+	`Date: 2026-08-20`
4	+
5	+	`Status: Current`
6	+
7	+	`mix.lock` is the authoritative resolved dependency set. The release keeps
8	+	`only production dependencies; development and test tools do not enter the`
9	+	runtime image. `mix precommit` rejects retired Hex packages, known Elixir
10	+	`advisories, and unused lock entries.`
11	+
12	+	`## Direct dependency inventory`
13	+
14	+	`\| Dependency \| Scope \| Purpose \| License \|`
15	+	`\| --- \| --- \| --- \| --- \|`
16	+	\| `phoenix`, `phoenix_html`, `phoenix_live_view` \| Runtime \| HTTP, HEEx, and LiveView product surfaces \| MIT \|
17	+	\| `phoenix_ecto`, `ecto_sql`, `postgrex` \| Runtime \| PostgreSQL persistence and migrations \| MIT; Apache-2.0 \|
18	+	\| `bandit` \| Runtime \| Phoenix HTTP server \| MIT \|
19	+	\| `req` \| Runtime \| Governed outbound HTTP client \| Apache-2.0 \|
20	+	\| `jason` \| Runtime \| JSON encoding and decoding \| Apache-2.0 \|
21	+	\| `gettext` \| Runtime \| User-facing translation boundary \| Apache-2.0 \|
22	+	\| `swoosh` \| Runtime \| Phoenix mail boundary and local mailbox \| MIT \|
23	+	\| `mdex` \| Runtime \| Sanitized CommonMark rendering \| MIT \|
24	+	\| `horde` \| Runtime \| Distributed registries and supervisors \| MIT \|
25	+	\| `ra` \| Runtime \| Raft-backed cluster authority \| Apache-2.0 or MPL-2.0 \|
26	+	\| `websockex` \| Runtime \| Outbound Realtime WebSocket adapter \| MIT \|
27	+	\| `dns_cluster` \| Runtime \| DNS-based BEAM node discovery \| MIT \|
28	+	\| `castle` \| Runtime and build \| OTP hot-upgrade release assembly \| MIT \|
29	+	\| `telemetry_metrics`, `telemetry_poller` \| Runtime \| Metrics definitions and periodic VM measurements \| Apache-2.0 \|
30	+	\| `phoenix_live_dashboard` \| Runtime \| Operator-only runtime inspection \| MIT \|
31	+	\| `esbuild`, `tailwind` \| Build and development \| Owned JavaScript and CSS bundles \| MIT \|
32	+	\| `heroicons` \| Build \| Documented second-tier icon fallback \| MIT \|
33	+	\| `phoenix_live_reload` \| Development \| Local asset and template reload \| MIT \|
34	+	\| `lazy_html` \| Test \| Structural HTML assertions \| Apache-2.0 \|
35	+	\| `mix_audit` \| Development and test \| Elixir advisory database check \| BSD-3-Clause \|
36	+
37	+	`Transitive packages and operating-system packages are recorded in the`
38	+	`CycloneDX SBOM for each image. Do not copy this table into a deployment receipt;`
39	+	`generate the SBOM from the exact image digest instead.`
40	+
41	+	`## Required checks`
42	+
43	+	`Run these checks on owned infrastructure:`
44	+
45	+	```console
46	+	`MIX_ENV=test mix hex.audit`
47	+	`MIX_ENV=test mix deps.audit`
48	+	`MIX_ENV=test mix deps.unlock --check-unused`
49	+	```
50	+
51	+	`mix precommit` runs all three. Update dependencies in a dedicated change when
52	+	`mix hex.outdated --all` reports an available version; an available major
53	+	`version is review input, not an automatic upgrade.`
54	+
55	+	`## Release inventory`
56	+
57	+	`Generate an SBOM from the exact local or registry image reference:`
58	+
59	+	```console
60	+	`ops/staging/generate-sbom.sh <image-reference> <evidence-directory>/sbom.cdx.json`
61	+	```
62	+
63	+	The script uses digest-pinned Syft `v1.51.0`, resolves the scanned image digest,
64	+	`writes CycloneDX JSON atomically, and writes a receipt with the source commit and`
65	+	`SBOM checksum. Retain both files with the staging evidence.`
66	+
67	+	`## Vendored asset notices`
68	+
69	+	`The release includes the notice index at`
70	+	`priv/licenses/THIRD_PARTY_NOTICES.md`. Its source licenses remain at these
71	+	`paths:`
72	+
73	+	- Basecoat: `assets/vendor/basecoat/LICENSE.md`.
74	+	- Apps SDK UI icons: `priv/icons/LICENSE`.
75	+	- Heroicons fallback: `priv/licenses/HEROICONS-LICENSE`.
76	+	- Geist Sans and Geist Mono: `priv/static/fonts/LICENSE`.
77	+	- Titillium Web: `priv/static/fonts/LICENSE-titillium-web`.
78	+	- GitHub mark source and trademark limits: `priv/brand/README.md`.


  ## Untrusted input

  Model output is not trusted. Earmark passes raw HTML straight through and will
  happily emit a `javascript:` href, so neither its HTML output nor its
  transformer is used. Instead the parsed AST is walked against an allowlist of
  tags and attributes, and this module writes the HTML itself so every text node
  is escaped here rather than somewhere further down. Anything not on the
  allowlist is dropped, and its text is kept.
  Model output is not trusted. MDEx parses CommonMark with dangerous rendering
  disabled, then Ammonia applies a second exact allowlist for tags, attributes,
  and URL schemes. Raw HTML is refused, dangerous links lose their `href`, and
  external links receive fixed isolation attributes. Input size, AST nesting,
  and rendered output are independently bounded before the result is marked
  safe.

  ## Partial input


  Rendering that literally is what produces the raw asterisks a reader sees
  today; rendering it naively makes the layout jump as each delimiter lands.

  `complete/1` closes the open constructs before parsing, so the parser always
  `complete/1` closes the open constructs before parsing, so MDEx always
  sees a well-formed document. The approach is taken from Streamdown's `remend`
  package: scan once, track what is open, and close it — while respecting
  escapes, refusing to close inside an open code fence, and refusing to close a

  matter more than the completeness.
  """

  @block_tags ~w(p ul ol li blockquote pre h1 h2 h3 h4 h5 h6 hr table thead tbody tr th td)
  @inline_tags ~w(strong em del code a br)
  @allowed_tags @block_tags ++ @inline_tags

  @void_tags ~w(br hr)

  # `code` carries Earmark's own `inline` marker; everything else is dropped.
  @allowed_attributes %{"a" => ["href"], "code" => ["class"], "pre" => ["class"]}

  @allowed_tags ~w(a blockquote br code del em h1 h2 h3 h4 h5 h6 hr li ol p pre strong table tbody td th thead tr ul)
  @safe_schemes ~w(http https mailto)

  @maximum_input_bytes 1_000_000
  @maximum_output_bytes 2_000_000
  @maximum_nesting_depth 32
  @maximum_fallback_bytes 64_000

  @mdex_options [
    extension: [strikethrough: true, table: true],
    parse: [relaxed_autolinks: false],
    render: [hardbreaks: true, unsafe: false, escape: false],
    sanitize: [
      tags: @allowed_tags,
      clean_content_tags: ~w(script style),
      tag_attributes: %{
        "a" => ~w(href target),
        "code" => ~w(class),
        "pre" => ~w(class)
      },
      generic_attributes: [],
      url_schemes: @safe_schemes,
      url_relative: :passthrough,
      link_rel: "noopener noreferrer nofollow",
      set_tag_attribute_values: %{"a" => %{"target" => "_blank"}}
    ]
  ]

  @empty_link ~s(<a href="" target="_blank" rel="noopener noreferrer nofollow">)

  @emphasis_markers ~w(*** ___ ** __ ~~ * _)

  @doc """

  """
  @spec to_html(String.t(), keyword()) :: {:safe, iodata()}
  def to_html(text, options \\ []) when is_binary(text) do
    text
    |> then(fn raw -> if options[:streaming], do: complete(raw), else: raw end)
    |> parse()
    |> Enum.map(&render_node/1)
    |> then(&{:safe, &1})
  end
    cond do
      byte_size(text) > @maximum_input_bytes ->
        limited(text, "input exceeds #{@maximum_input_bytes} bytes")

  defp parse(text) do
    case Earmark.Parser.as_ast(text, gfm: true, breaks: true) do
      {:ok, ast, _messages} -> ast
      {:error, ast, _messages} -> ast
      true ->
        source = if options[:streaming], do: complete(text), else: text
        render(source)
    end
  end

  # ── Rendering ──────────────────────────────────────────────────────────────

  defp render_node(text) when is_binary(text), do: escape(text)
  defp render(text) do
    with {:ok, document} <- MDEx.parse_document(text, @mdex_options),
         :ok <- validate_nesting(document),
         document <- normalize_links(document),
         {:ok, rendered} <- MDEx.to_html(document),
         rendered <- String.replace(rendered, @empty_link, "<a>"),
         :ok <- validate_output(rendered) do
      {:safe, rendered}
    else
      {:error, :nesting_limit} ->
        limited(text, "nesting exceeds #{@maximum_nesting_depth} levels")

  defp render_node({tag, attributes, children, _meta}) when tag in @allowed_tags do
    rendered = Enum.map(children, &render_node/1)
      {:error, :output_limit} ->
        limited(text, "rendered output exceeds #{@maximum_output_bytes} bytes")

    cond do
      tag in @void_tags -> ["<", tag, attributes(tag, attributes), " />"]
      true -> ["<", tag, attributes(tag, attributes), ">", rendered, "</", tag, ">"]
      {:error, _parse_or_render_error} ->
        limited(text, "input could not be rendered safely")
    end
  end

  # An unknown tag keeps its text and loses its markup, which is the safe
  # direction: a reader still sees the words.
  defp render_node({_tag, _attributes, children, _meta}), do: Enum.map(children, &render_node/1)

  defp render_node(_other), do: []

  defp attributes(tag, attributes) do
    allowed = Map.get(@allowed_attributes, tag, [])
  defp validate_nesting(document) do
    if nesting_depth(document) <= @maximum_nesting_depth,
      do: :ok,
      else: {:error, :nesting_limit}
  end

    attributes
    |> Enum.filter(fn {name, _value} -> name in allowed end)
    |> Enum.flat_map(&attribute(tag, &1))
  defp nesting_depth(%{nodes: nodes}) when is_list(nodes) do
    1 + Enum.reduce(nodes, 0, fn node, depth -> max(depth, nesting_depth(node)) end)
  end

  defp attribute("a", {"href", value}) do
    case safe_url(value) do
      nil ->
        []
  defp nesting_depth(_leaf), do: 1

      url ->
        # Model output can link anywhere, so a link leaves without carrying the
        # referrer or a handle on this window.
        [~s( href="), escape(url), ~s(" rel="noopener noreferrer nofollow" target="_blank")]
    end
  defp normalize_links(document) do
    MDEx.Document.update_nodes(document, MDEx.Link, fn link ->
      %{link | url: safe_url(link.url)}
    end)
  end

  defp attribute(_tag, {name, value}), do: [" ", name, ~s(="), escape(value), ~s(")]

  defp safe_url(value) do
    trimmed = value |> to_string() |> String.trim()

    cond do
      trimmed == "" -> nil
      trimmed == "" -> ""
      String.starts_with?(trimmed, "//") -> "https:" <> trimmed
      String.starts_with?(trimmed, ["/", "#"]) -> trimmed
      scheme_of(trimmed) in @safe_schemes -> trimmed
      # No scheme at all is a bare domain; treat it as https rather than
      # letting the browser resolve it relative to OpenAgents.
      scheme_of(trimmed) == nil -> "https://" <> trimmed
      true -> nil
      true -> ""
    end
  end

  defp validate_output(rendered) do
    if byte_size(rendered) <= @maximum_output_bytes,
      do: :ok,
      else: {:error, :output_limit}
  end

  defp scheme_of(url) do
    case Regex.run(~r/\A([a-zA-Z][a-zA-Z0-9+.-]*):/, url) do
      [_, scheme] -> String.downcase(scheme)

125	142		`end`
126	143		`end`
127	144
	145	+	`defp limited(text, reason) do`
	146	+	`excerpt = truncate_utf8(text, @maximum_fallback_bytes)`
	147	+
	148	+	`html = [`
	149	+	`"<p><strong>Markdown rendering limited.</strong> ",`
	150	+	`escape(reason),`
	151	+	`".</p><pre>",`
	152	+	`escape(excerpt),`
	153	+	`if(byte_size(text) > byte_size(excerpt), do: "\n…", else: ""),`
	154	+	`"</pre>"`
	155	+	`]`
	156	+
	157	+	`{:safe, html}`
	158	+	`end`
	159	+
	160	+	`defp truncate_utf8(value, maximum_bytes) when byte_size(value) <= maximum_bytes, do: value`
	161	+
	162	+	`defp truncate_utf8(value, maximum_bytes) do`
	163	+	`value`
	164	+	`\|> binary_part(0, maximum_bytes)`
	165	+	`\|> trim_to_valid_utf8(4)`
	166	+	`end`
	167	+
	168	+	`defp trim_to_valid_utf8(value, attempts) do`
	169	+	`cond do`
	170	+	`String.valid?(value) -> value`
	171	+	`attempts == 0 or byte_size(value) == 0 -> ""`
	172	+	`true -> trim_to_valid_utf8(binary_part(value, 0, byte_size(value) - 1), attempts - 1)`
	173	+	`end`
	174	+	`end`
	175	+
128	176		`defp escape(value), do: value \|> to_string() \|> Phoenix.HTML.html_escape() \|> elem(1)`
129	177
130	178		`# ── Completion of partial Markdown ─────────────────────────────────────────`

    end
  end

  def openagents_live_view do
    quote do
      use Phoenix.LiveView

      unquote(openagents_html_helpers())

      import OpenAgentsWeb.Components.RepoHeader
    end
  end

  def openagents_html do
    quote do
      use Phoenix.Component

      unquote(openagents_html_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      # Translation
      use Gettext, backend: OpenAgentsWeb.Gettext

      # HTML escaping functionality
      import Phoenix.HTML
      # Core UI components
      import OpenAgentsWeb.CoreComponents

      # Common modules used in templates
      alias Phoenix.LiveView.JS
      alias OpenAgentsWeb.Layouts

      # Routes generation with the ~p sigil
      unquote(verified_routes())
    end
  end

  defp openagents_html_helpers do
    quote do
      # HTML escaping functionality
      import Phoenix.HTML
      # OpenAgents interface primitives

defmodule OpenAgentsWeb.ComponentCatalog do
  @moduledoc """
  The component catalog's table of contents.
  The executable inventory for the OpenAgents component system.

  Both the sidebar in `layouts/components.html.heex` and the pages rendered by
  `OpenAgentsWeb.ComponentsLive` are generated from this list, so a component
  cannot appear in one and be missing from the other. Adding a component means
  adding an entry here and a matching `component_demo/1` clause in
  `ComponentsLive`; `ComponentsLive` has a test that asserts every slug here
  resolves to a page, and `ComponentCatalogTest` asserts the catalog covers
  every public function component in the modules it claims to document.
  The sidebar and demo pages both read this list. Tests require every public
  function component in `OpenAgentsWeb.UI` and the documented layout modules to
  appear here, so the catalog cannot drift behind the supported API.

  Two component sets ship in this repo and they are catalogued separately:

    * `OpenAgentsWeb.CoreComponents` — the Phoenix-generated set, restyled onto
      basecoat. Imported by `use OpenAgentsWeb, :live_view`.
    * `OpenAgentsWeb.UI` — the OpenAgents interface primitives, imported
      separately via `openagents_html_helpers`. `button`, `input`, and `icon` exist
      in both sets, which is why the UI slugs are prefixed `openagents-`.

  Icon names are drawn from the vendored Apps SDK set (`OpenAgentsWeb.Icons`).
  `OpenAgentsWeb.UI` is the only product component module. It combines the
  vendored Basecoat structure with the OpenAgents style pack. Icon demos use the
  preferred vendored Apps SDK set; see `docs/ICONS.md` for the exceptional
  Heroicons fallback policy and current fallback inventory.
  """

  @sections [
    %{
      title: "Core components",
      items: [
        %{
          slug: "button",
          title: "Button",
          icon: "cube",
          source: "OpenAgentsWeb.CoreComponents.button/1",
          summary: "Default, primary, navigation, and disabled variants."
        },
        %{
          slug: "input",
          title: "Input",
          icon: "square-text",
          source: "OpenAgentsWeb.CoreComponents.input/1",
          summary: "Text, select, textarea, and checkbox fields inside a form."
        },
        %{
          slug: "header",
          title: "Header",
          icon: "book",
          source: "OpenAgentsWeb.CoreComponents.header/1",
          summary: "Page title with an optional subtitle and action slot."
        },
        %{
          slug: "table",
          title: "Table",
          icon: "table-cells-filled",
          source: "OpenAgentsWeb.CoreComponents.table/1",
          summary: "Row listing with column and action slots."
        },
        %{
          slug: "list",
          title: "List",
          icon: "file-document",
          source: "OpenAgentsWeb.CoreComponents.list/1",
          summary: "Title and description pairs in a definition list."
        },
        %{
          slug: "icon",
          title: "Icon",
          icon: "grid",
          source: "OpenAgentsWeb.CoreComponents.icon/1",
          summary: "Inline glyphs from the vendored icon set."
        },
        %{
          slug: "flash",
          title: "Flash",
          icon: "bell",
          source: "OpenAgentsWeb.CoreComponents.flash/1",
          summary: "Info and error toasts rendered by the layout's flash group."
        }
      ]
    },
    %{
      title: "OpenAgents UI",
      items: [

          title: "Button",
          icon: "cube",
          source: "OpenAgentsWeb.UI.button/1",
          summary: "Eight variants, four sizes, and a danger tone."
          summary: "Eight variants, four sizes, navigation, and a danger tone."
        },
        %{
          slug: "openagents-text-button",

          title: "Input",
          icon: "square-text",
          source: "OpenAgentsWeb.UI.input/1",
          summary: "Bare text input primitive, unwrapped by a form field."
          summary: "Form-aware text, select, textarea, checkbox, and raw inputs."
        },
        %{
          slug: "openagents-textarea",
          title: "Textarea",
          icon: "text",
          source: "OpenAgentsWeb.UI.textarea/1",
          summary: "Multi-line text primitive."
          summary: "Unwrapped multiline text primitive."
        },
        %{
          slug: "openagents-label",
          title: "Label",
          icon: "tag",
          source: "OpenAgentsWeb.UI.label/1",
          summary: "Form label bound to a control by id."
          summary: "Form label bound to a control by ID."
        },
        %{
          slug: "openagents-field",
          title: "Field",
          icon: "file-document",
          source: "OpenAgentsWeb.UI.field/1",
          summary: "Wrapper that stacks a label and its control."
          summary: "Wrapper that stacks a label, control, and validation message."
        },
        %{
          slug: "openagents-header",
          title: "Header",
          icon: "book",
          source: "OpenAgentsWeb.UI.header/1",
          summary: "Page heading with supporting text and an action slot."
        },
        %{
          slug: "openagents-table",
          title: "Table",
          icon: "table-cells-filled",
          source: "OpenAgentsWeb.UI.table/1",
          summary: "Responsive rows with regular-list and LiveView stream support."
        },
        %{
          slug: "openagents-list",
          title: "List",
          icon: "file-document",
          source: "OpenAgentsWeb.UI.list/1",
          summary: "Title and description pairs."
        },
        %{
          slug: "openagents-alert",

          title: "Menu",
          icon: "menu",
          source: "OpenAgentsWeb.UI.menu/1",
          summary: "Popover menu surface used by the account control."
          summary: "Native popover menu surface used by the account control."
        },
        %{
          slug: "openagents-frame",

          title: "Status indicator",
          icon: "check-circle",
          source: "OpenAgentsWeb.UI.status_indicator/1",
          summary: "Labelled state dot, optionally decorative."
          summary: "Labeled state dot, optionally decorative."
        },
        %{
          slug: "openagents-audio-player",
          title: "Audio player",
          icon: "play",
          source: "OpenAgentsWeb.UI.audio_player/1",
          summary: "Labelled audio element for recordings."
          summary: "Labeled audio element for recordings."
        },
        %{
          slug: "openagents-icon",

    %{
      title: "Layout",
      items: [
        %{
          slug: "theme-toggle",
          title: "Theme toggle",
          icon: "moon",
          source: "OpenAgentsWeb.Layouts.theme_toggle/1",
          summary: "System, light, and dark. The same control sits in the site header."
        },
        %{
          slug: "command-bar",
          title: "Command bar",

          title: "Account control",
          icon: "user",
          source: "OpenAgentsWeb.Layouts.account_control/1",
          summary: "Avatar trigger and popover menu for the signed-in user."
          summary: "Avatar trigger and native popover menu for the signed-in user."
        }
      ]
    },

  @doc "Every slug in the catalog."
  def slugs, do: Enum.map(items(), & &1.slug)

  @doc "Look up one item by slug. Returns nil when the slug is unknown."
  @doc "Looks up one item by slug. Returns `nil` when the slug is unknown."
  def fetch(slug), do: Enum.find(items(), &(&1.slug == slug))

  @doc """
  The modules this catalog claims to document, and the components in each that
  are deliberately not given a page.

  `OpenAgentsWeb.Layouts.app/1` and `flash_group/1` wrap the catalog page
  itself, so they cannot be demoed inside it.
  """
  @doc "Modules covered by the executable catalog and deliberate exclusions."
  def documented_modules do
    %{
      OpenAgentsWeb.CoreComponents => [],
      OpenAgentsWeb.UI => [],
      OpenAgentsWeb.Layouts => [:app, :flash_group]
      OpenAgentsWeb.Layouts => [:app, :flash_group],
      OpenAgentsWeb.Components.RepoHeader => []
    }
  end
end

defmodule OpenAgentsWeb.CoreComponents do
  @moduledoc """
  Provides core UI components.

  At first glance, this module may seem daunting, but its goal is to provide
  core building blocks for your application, such as tables, forms, and
  inputs. The components consist mostly of markup and are well-documented
  with doc strings and declarative assigns. You may customize and style
  them in any way you want, based on your application growth and needs.

  The foundation for styling is Tailwind CSS, a utility-first CSS framework,
  on top of the vendored Basecoat component structure in
  `assets/vendor/basecoat/components/` and OpenAgents style pack in
  `assets/css/openagents.css`. Basecoat expresses variants as data attributes
  (`data-variant`, `data-size`), so a control is `class="btn"` plus a data
  attribute rather than a stack of variant classes. There is no second
  component library — DaisyUI was removed, and reintroducing it would put flat
  `.btn`-style rules back above `.btn[data-variant=…]`. Here are useful
  references:

    * `OpenAgentsWeb.UI` - nineteen ready primitives over that CSS
      (`button/1`, `card/1`, `badge/1`, `alert/1`, `input/1`, …). Prefer them
      to hand-written component classes.

    * [Tailwind CSS](https://tailwindcss.com) - the foundational framework
      we build on. You will use it for layout, sizing, flexbox, grid, and
      spacing.

    * [Heroicons](https://heroicons.com) - see `icon/1` for usage.

    * [Phoenix.Component](https://phoenix-live-view.hexdocs.pm/Phoenix.Component.html) -
      the component system used by Phoenix. Some components, such as `<.link>`
      and `<.form>`, are defined there.

  """
  use Phoenix.Component
  use Gettext, backend: OpenAgentsWeb.Gettext

  alias Phoenix.LiveView.JS

  @doc """
  Renders flash notices.

  ## Examples

      <.flash kind={:info} flash={@flash} />
      <.flash
        id="welcome-back"
        kind={:info}
        phx-mounted={show("#welcome-back") |> JS.remove_attribute("hidden")}
        hidden
      >
        Welcome Back!
      </.flash>
  """
  attr :id, :string, doc: "the optional id of flash container"
  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
  attr :title, :string, default: nil
  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"

  slot :inner_block, doc: "the optional inner block that renders the flash message"

  def flash(assigns) do
    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)

    ~H"""
    <div
      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
      id={@id}
      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
      role="alert"
      class="fixed top-4 right-4 z-50 flex flex-col items-end gap-2"
      {@rest}
    >
      <%!-- Basecoat/OpenAgents `.alert` is a three-column grid: leading marker,
      body `<section>`, trailing action. Keeping exactly three children is what
      lets the close control sit in the third column instead of wrapping. --%>
      <div
        class="alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap"
        data-variant={if @kind == :error, do: "danger", else: "info"}
      >
        <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
        <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
        <section>
          <p :if={@title} class="font-semibold">{@title}</p>
          <p>{msg}</p>
        </section>
        <%!-- The control is icon-only, so its accessible name is the only name it
        has. "close" describes the gesture; "Dismiss notice" describes what the
        user is acting on, which is what a screen reader needs when the button
        is announced out of context. IconAffordancesTest guards this. --%>
        <button
          type="button"
          class="group self-start cursor-pointer"
          aria-label={gettext("Dismiss notice")}
        >
          <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
        </button>
      </div>
    </div>
    """
  end

  @doc """
  Renders a button with navigation support.

  A thin wrapper over the Basecoat/OpenAgents `.btn` recipe: the class is always
  `btn` and the look comes from `data-variant`, never from a stack of variant
  classes. `class` adds layout utilities alongside it rather than replacing it,
  so a caller cannot accidentally drop the component styling.

  `OpenAgentsWeb.UI.button/1` is the fuller control (eight variants, three
  sizes, a danger tone). This one exists so surfaces on `CoreComponents` alone
  still get the same two shapes.

  ## Examples

      <.button>Send!</.button>
      <.button phx-click="go" variant="primary">Send!</.button>
      <.button navigate={~p"/"}>Home</.button>
  """
  attr :rest, :global,
    include: ~w(href navigate patch method download name value disabled type id phx-click)

  attr :class, :any, default: nil
  attr :variant, :string, values: ~w(primary secondary ghost outline), default: "secondary"
  attr :size, :string, values: [nil | ~w(xs sm lg)], default: nil
  slot :inner_block, required: true

  def button(%{rest: rest} = assigns) do
    if rest[:href] || rest[:navigate] || rest[:patch] do
      ~H"""
      <.link class={["btn", @class]} data-variant={@variant} data-size={@size} {@rest}>
        {render_slot(@inner_block)}
      </.link>
      """
    else
      ~H"""
      <button class={["btn", @class]} data-variant={@variant} data-size={@size} {@rest}>
        {render_slot(@inner_block)}
      </button>
      """
    end
  end

  @doc """
  Renders an input with label and error messages.

  A `Phoenix.HTML.FormField` may be passed as argument,
  which is used to retrieve the input name, id, and values.
  Otherwise all attributes may be passed explicitly.

  ## Types

  This function accepts all HTML input types, considering that:

    * You may also set `type="select"` to render a `<select>` tag

    * `type="checkbox"` is used exclusively to render boolean values

    * For live file uploads, see `Phoenix.Component.live_file_input/1`

  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  for more information. Unsupported types, such as radio, are best
  written directly in your templates.

  ## Examples

  ```heex
  <.input field={@form[:email]} type="email" />
  <.input name="my-input" errors={["oh no!"]} />
  ```

  ## Select type

  When using `type="select"`, you must pass the `options` and optionally
  a `value` to mark which option should be preselected.

  ```heex
  <.input field={@form[:user_type]} type="select" options={["Admin": "admin", "User": "user"]} />
  ```

  For more information on what kind of data can be passed to `options` see
  [`options_for_select`](https://phoenix-html.hexdocs.pm/Phoenix.HTML.Form.html#options_for_select/2).
  """
  attr :id, :any, default: nil
  attr :name, :any
  attr :label, :string, default: nil
  attr :value, :any

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file month number password
               search select tel text textarea time url week hidden)

  attr :field, Phoenix.HTML.FormField,
    doc: "a form field struct retrieved from the form, for example: @form[:email]"

  attr :errors, :list, default: []
  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
  attr :class, :any, default: nil, doc: "the input class to use over defaults"
  attr :error_class, :any, default: nil, doc: "the input error class to use over defaults"

  attr :rest, :global,
    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
                multiple pattern placeholder readonly required rows size step)

  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, Enum.map(errors, &translate_error(&1)))
    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
    |> assign_new(:value, fn -> field.value end)
    |> input()
  end

  def input(%{type: "hidden"} = assigns) do
    ~H"""
    <input type="hidden" id={@id} name={@name} value={@value} {@rest} />
    """
  end

  def input(%{type: "checkbox"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    ~H"""
    <div class="field mb-2">
      <label for={@id}>
        <input
          type="hidden"
          name={@name}
          value="false"
          disabled={@rest[:disabled]}
          form={@rest[:form]}
        />
        <span class="label inline-flex items-center gap-2">
          <%!-- The one native control the style pack does not restyle. Letting
          the browser draw it and tinting it with accent-color keeps it
          keyboard- and platform-correct for free. --%>
          <input
            type="checkbox"
            id={@id}
            name={@name}
            value="true"
            checked={@checked}
            class={@class || "size-4 shrink-0 accent-primary"}
            {@rest}
          />{@label}
        </span>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end

  def input(%{type: "select"} = assigns) do
    ~H"""
    <div class="field mb-2">
      <label for={@id}>
        <span :if={@label} class="label mb-1">{@label}</span>
        <select
          id={@id}
          name={@name}
          class={[@class || "w-full input", "aria-invalid:border-destructive", @error_class]}
          aria-invalid={@errors != [] && "true"}
          multiple={@multiple}
          {@rest}
        >
          <option :if={@prompt} value="">{@prompt}</option>
          {Phoenix.HTML.Form.options_for_select(@options, @value)}
        </select>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end

  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div class="field mb-2">
      <label for={@id}>
        <span :if={@label} class="label mb-1">{@label}</span>
        <textarea
          id={@id}
          name={@name}
          class={[@class || "w-full textarea", "aria-invalid:border-destructive", @error_class]}
          aria-invalid={@errors != [] && "true"}
          {@rest}
        >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end

  # All other inputs text, datetime-local, url, password, etc. are handled here...
  def input(assigns) do
    ~H"""
    <div class="field mb-2">
      <label for={@id}>
        <span :if={@label} class="label mb-1">{@label}</span>
        <input
          type={@type}
          name={@name}
          id={@id}
          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
          class={[@class || "w-full input", "aria-invalid:border-destructive", @error_class]}
          aria-invalid={@errors != [] && "true"}
          {@rest}
        />
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end

  # Helper used by inputs to generate form errors
  defp error(assigns) do
    ~H"""
    <p class="mt-1.5 flex gap-2 items-center text-sm text-destructive">
      <.icon name="hero-exclamation-circle" class="size-5" />
      {render_slot(@inner_block)}
    </p>
    """
  end

  @doc """
  Renders a header with title.
  """
  slot :inner_block, required: true
  slot :subtitle
  slot :actions

  def header(assigns) do
    ~H"""
    <header class={[@actions != [] && "flex items-center justify-between gap-6", "pb-4"]}>
      <div>
        <h1 class="text-lg font-semibold leading-8">
          {render_slot(@inner_block)}
        </h1>
        <p :if={@subtitle != []} class="text-sm text-muted-foreground">
          {render_slot(@subtitle)}
        </p>
      </div>
      <div class="flex-none">{render_slot(@actions)}</div>
    </header>
    """
  end

  @doc """
  Renders a table with generic styling.

  ## Examples

      <.table id="users" rows={@users}>
        <:col :let={user} label="id">{user.id}</:col>
        <:col :let={user} label="username">{user.username}</:col>
      </.table>
  """
  attr :id, :string, required: true
  attr :rows, :list, required: true
  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"

  attr :row_item, :any,
    default: &Function.identity/1,
    doc: "the function for mapping each row before calling the :col and :action slots"

  slot :col, required: true do
    attr :label, :string
  end

  slot :action, doc: "the slot for showing user actions in the last table column"

  def table(assigns) do
    assigns =
      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
      end

    ~H"""
    <%!-- Basecoat's `.table` carries structure only — widths, alignment, and
    the row rule. Rhythm and colour are utilities here rather than a zebra
    variant: OpenAgents separates rows with the hairline, not with alternating
    fills. --%>
    <div class="table-container">
      <table class="table text-sm">
        <thead>
          <tr>
            <th :for={col <- @col} class="px-3 py-2 text-left text-muted-foreground">
              {col[:label]}
            </th>
            <th :if={@action != []} class="px-3 py-2">
              <span class="sr-only">{gettext("Actions")}</span>
            </th>
          </tr>
        </thead>
        <tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}>
          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="hover:bg-muted/40">
            <td
              :for={col <- @col}
              phx-click={@row_click && @row_click.(row)}
              class={["px-3 py-2", @row_click && "hover:cursor-pointer"]}
            >
              {render_slot(col, @row_item.(row))}
            </td>
            <td :if={@action != []} class="w-0 px-3 py-2 font-semibold">
              <div class="flex gap-4">
                <%= for action <- @action do %>
                  {render_slot(action, @row_item.(row))}
                <% end %>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    """
  end

  @doc """
  Renders a data list.

  ## Examples

      <.list>
        <:item title="Title">{@post.title}</:item>
        <:item title="Views">{@post.views}</:item>
      </.list>
  """
  slot :item, required: true do
    attr :title, :string, required: true
  end

  def list(assigns) do
    ~H"""
    <ul class="divide-y divide-border">
      <li :for={item <- @item} class="flex items-start gap-4 py-3">
        <div class="min-w-0 grow">
          <div class="font-semibold">{item.title}</div>
          <div class="text-muted-foreground">{render_slot(item)}</div>
        </div>
      </li>
    </ul>
    """
  end

  @doc """
  Renders a [Heroicon](https://heroicons.com).

  Heroicons come in three styles – outline, solid, and mini.
  By default, the outline style is used, but solid and mini may
  be applied by using the `-solid` and `-mini` suffix.

  You can customize the size and colors of the icons by setting
  width, height, and background color classes.

  Icons are extracted from the `deps/heroicons` directory and bundled within
  your compiled app.css by the plugin in `assets/vendor/heroicons.js`.

  ## Examples

      <.icon name="hero-x-mark" />
      <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
  """
  attr :name, :string, required: true
  attr :class, :any, default: "size-4"

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @class]} />
    """
  end

  def icon(assigns) do
    {view_box, inner} = OpenAgentsWeb.Icons.fetch!(assigns.name)
    assigns = assign(assigns, :view_box, view_box) |> assign(:inner, inner)

    ~H"""
    <svg
      class={["icon", @class]}
      viewBox={@view_box}
      width="1em"
      height="1em"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
    >{Phoenix.HTML.raw(@inner)}</svg>
    """
  end

  ## JS Commands

  def show(js \\ %JS{}, selector) do
    JS.show(js,
      to: selector,
      time: 300,
      transition:
        {"transition-all ease-out duration-300",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
         "opacity-100 translate-y-0 sm:scale-100"}
    )
  end

  def hide(js \\ %JS{}, selector) do
    JS.hide(js,
      to: selector,
      time: 200,
      transition:
        {"transition-all ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
    )
  end

  @doc """
  Translates an error message using gettext.
  """
  def translate_error({msg, opts}) do
    # When using gettext, we typically pass the strings we want
    # to translate as a static argument:
    #
    #     # Translate the number of files with plural rules
    #     dngettext("errors", "1 file", "%{count} files", count)
    #
    # However the error messages in our forms and APIs are generated
    # dynamically, so we need to translate them by calling Gettext
    # with our gettext backend as first argument. Translations are
    # available in the errors.po file (as we use the "errors" domain).
    if count = opts[:count] do
      Gettext.dngettext(OpenAgentsWeb.Gettext, "errors", msg, msg, count, opts)
    else
      Gettext.dgettext(OpenAgentsWeb.Gettext, "errors", msg, opts)
    end
  end

  @doc """
  Translates the errors for a field from a keyword list of errors.
  """
  def translate_errors(errors, field) when is_list(errors) do
    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
  end
end

          <.account_dropdown current_scope={@current_scope} />
        <% else %>
          <.form for={%{}} as={:auth} action={~p"/auth/github"} method="post" class="m-0">
            <.button type="submit" variant="primary" size="sm">Sign in with GitHub</.button>
            <.button type="submit" variant={:primary} size={:sm}>Sign in with GitHub</.button>
          </.form>
        <% end %>
      </div>

              type="submit"
              class="w-full rounded-md px-2 py-1.5 text-left flex items-center gap-2 hover:bg-muted"
            >
              <.icon name="hero-arrow-right-start-on-rectangle" class="size-4" /> Log out
              <.icon name="logout" class="size-4" /> Log out
            </button>
          </.form>
        </li>

        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
        <.icon name="arrow-rotate-cw" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>

      <.flash

        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
        <.icon name="arrow-rotate-cw" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>
    </div>
    """
  end

  @doc """
  The `data-theme` segmented control.

  The attribute plumbing in `root.html.heex` still runs, but since DaisyUI was
  removed there is only one palette behind it: OpenAgents token ladder is
  dark-only (`color-scheme: dark` in app.css) and ships no light variant. The
  control therefore moves its indicator without repainting the page. Keep it or
  remove it deliberately — do not reintroduce a second theme to make it work.
  """
  def theme_toggle(assigns) do
    ~H"""
    <%!-- w-24 is load-bearing: the three buttons are w-1/3, so without an explicit
    width this stretches to fill any block-level parent and the segments stretch
    with it. 24 (6rem) is the natural content width: 3 buttons x (p-2 + size-4). --%>
    <div class="relative flex flex-row items-center w-24 shrink-0 border-2 border-muted bg-muted rounded-full">
      <div class="absolute w-1/3 h-full rounded-full border-1 border-card bg-background brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 [[data-theme-source=system]_&]:!left-0 transition-[left]" />

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="system"
      >
        <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>
  attr :id, :string, default: nil
  attr :flash, :map, default: %{}
  attr :title, :string, default: nil
  attr :kind, :atom, values: [:info, :error], required: true
  attr :rest, :global
  slot :inner_block

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="light"
      >
        <.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>
  defp flash(assigns) do
    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="dark"
    ~H"""
    <div
      :if={message = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
      id={@id}
      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
      role="alert"
      class="fixed top-4 right-4 z-50 flex flex-col items-end gap-2"
      {@rest}
    >
      <UI.alert
        class="w-80 max-w-80 text-wrap sm:w-96 sm:max-w-96"
        variant={if(@kind == :error, do: :danger, else: :info)}
        label={@title}
      >
        <.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>
        {message}
        <:action>
          <UI.button
            type="button"
            variant={:ghost}
            size={:xs}
            aria-label={gettext("Dismiss notice")}
          >
            <UI.icon name="x" />
          </UI.button>
        </:action>
      </UI.alert>
    </div>
    """
  end

  defp show(js \\ %JS{}, selector) do
    JS.show(js,
      to: selector,
      time: 300,
      transition:
        {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4",
         "opacity-100 translate-y-0"}
    )
  end

  defp hide(js \\ %JS{}, selector) do
    JS.hide(js,
      to: selector,
      time: 200,
      transition:
        {"transition-all transform ease-in duration-200", "opacity-100 translate-y-0",
         "opacity-0 translate-y-4"}
    )
  end
end

    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
    </script>
    <script>
      (() => {
        const systemTheme = () => matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

        const setTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("phx:theme");
            document.documentElement.setAttribute("data-theme", systemTheme());
            document.documentElement.setAttribute("data-theme-source", "system");
          } else {
            localStorage.setItem("phx:theme", theme);
            document.documentElement.setAttribute("data-theme", theme);
            document.documentElement.setAttribute("data-theme-source", "user");
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          setTheme(localStorage.getItem("phx:theme") || "dark");
        }
        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));

        matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
          if (document.documentElement.getAttribute("data-theme-source") === "system") {
            document.documentElement.setAttribute("data-theme", systemTheme());
          }
        });
      })();
    </script>
  </head>
  <body class="h-screen overflow-hidden overscroll-none">
    {@inner_content}

  attr :class, :any, default: nil

  attr :rest, :global,
    include: ~w(disabled form name value popovertarget popovertargetaction download href)
    include:
      ~w(disabled form name value popovertarget popovertargetaction download href navigate patch)

  slot :inner_block, required: true

  def button(assigns) do
    ~H"""
    <.link
      :if={@rest[:href]}
      :if={@rest[:href] || @rest[:navigate] || @rest[:patch]}
      class={["btn", @class]}
      data-variant={@variant}
      data-size={@size != :default && @size}

      {render_slot(@inner_block)}
    </.link>
    <button
      :if={!@rest[:href]}
      :if={!(@rest[:href] || @rest[:navigate] || @rest[:patch])}
      type={@type}
      class={["btn", @class]}
      data-variant={@variant}

    """
  end

  @doc "A single-line text control."
  attr :id, :string, default: nil
  attr :name, :string, default: nil
  attr :value, :string, default: nil
  attr :type, :string, default: "text"
  @doc "A form-aware input or an unwrapped single-line text control."
  attr :id, :any, default: nil
  attr :name, :any, default: nil
  attr :label, :string, default: nil
  attr :value, :any, default: nil

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file month number password
               search select tel text textarea time url week hidden)

  attr :field, Phoenix.HTML.FormField,
    default: nil,
    doc: "a form field struct retrieved from the form, for example: @form[:email]"

  attr :errors, :list, default: []
  attr :checked, :boolean, default: nil
  attr :prompt, :string, default: nil
  attr :options, :list, default: []
  attr :multiple, :boolean, default: false
  attr :class, :any, default: nil
  attr :error_class, :any, default: nil

  attr :rest, :global,
    include: ~w(autocomplete disabled maxlength minlength pattern placeholder readonly required)
    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
                multiple pattern placeholder readonly required rows size step)

  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, Enum.map(errors, &translate_error/1))
    |> assign(
      :name,
      assigns.name || if(assigns.multiple, do: field.name <> "[]", else: field.name)
    )
    |> assign(:value, if(is_nil(assigns.value), do: field.value, else: assigns.value))
    |> input()
  end

  def input(%{type: "hidden"} = assigns) do
    ~H"""
    <input type="hidden" id={@id} name={@name} value={@value} {@rest} />
    """
  end

  def input(%{type: "checkbox"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    ~H"""
    <.field class="mb-2">
      <input
        type="hidden"
        name={@name}
        value="false"
        disabled={@rest[:disabled]}
        form={@rest[:form]}
      />
      <.label for={@id} class="inline-flex items-center gap-2">
        <input
          type="checkbox"
          id={@id}
          name={@name}
          value="true"
          checked={@checked}
          class={@class || "size-4 shrink-0 accent-primary"}
          {@rest}
        />
        {@label}
      </.label>
      <.error :for={message <- @errors}>{message}</.error>
    </.field>
    """
  end

  def input(%{type: "select"} = assigns) do
    ~H"""
    <.field class="mb-2">
      <.label :if={@label} for={@id}>{@label}</.label>
      <select
        id={@id}
        name={@name}
        class={[@class || "input w-full", "aria-invalid:border-destructive", @error_class]}
        aria-invalid={@errors != [] && "true"}
        multiple={@multiple}
        {@rest}
      >
        <option :if={@prompt} value="">{@prompt}</option>
        {Phoenix.HTML.Form.options_for_select(@options, @value)}
      </select>
      <.error :for={message <- @errors}>{message}</.error>
    </.field>
    """
  end

  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <.field class="mb-2">
      <.label :if={@label} for={@id}>{@label}</.label>
      <.textarea
        id={@id}
        name={@name}
        value={Phoenix.HTML.Form.normalize_value("textarea", @value)}
        class={[@class || "w-full", "aria-invalid:border-destructive", @error_class]}
        aria-invalid={@errors != [] && "true"}
        {@rest}
      />
      <.error :for={message <- @errors}>{message}</.error>
    </.field>
    """
  end

  def input(%{label: nil, errors: []} = assigns) do
    ~H"""
    <input
      type={@type}
      id={@id}
      name={@name}
      value={Phoenix.HTML.Form.normalize_value(@type, @value)}
      class={["input", @class]}
      {@rest}
    />
    """
  end

  def input(assigns) do
    ~H"""
    <input type={@type} id={@id} name={@name} value={@value} class={["input", @class]} {@rest} />
    <.field class="mb-2">
      <.label :if={@label} for={@id}>{@label}</.label>
      <input
        type={@type}
        id={@id}
        name={@name}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        class={[@class || "input w-full", "aria-invalid:border-destructive", @error_class]}
        aria-invalid={@errors != [] && "true"}
        {@rest}
      />
      <.error :for={message <- @errors}>{message}</.error>
    </.field>
    """
  end


181	313		`"""`
182	314		`end`
183	315
	316	+	`@doc "A page heading with optional supporting text and actions."`
	317	+	`slot :inner_block, required: true`
	318	+	`slot :subtitle`
	319	+	`slot :actions`
	320	+
	321	+	`def header(assigns) do`
	322	+	`~H"""`
	323	+	`<header class={[@actions != [] && "flex items-center justify-between gap-6", "pb-4"]}>`
	324	+	`<div>`
	325	+	`<h1 class="text-lg font-semibold leading-8">{render_slot(@inner_block)}</h1>`
	326	+	`<p :if={@subtitle != []} class="text-sm text-muted-foreground">`
	327	+	`{render_slot(@subtitle)}`
	328	+	`</p>`
	329	+	`</div>`
	330	+	`<div class="flex-none">{render_slot(@actions)}</div>`
	331	+	`</header>`
	332	+	`"""`
	333	+	`end`
	334	+
	335	+	`@doc "A responsive table for regular lists or LiveView streams."`
	336	+	`attr :id, :string, required: true`
	337	+	`attr :rows, :list, required: true`
	338	+	`attr :row_id, :any, default: nil`
	339	+	`attr :row_click, :any, default: nil`
	340	+	`attr :row_item, :any, default: &Function.identity/1`
	341	+
	342	+	`slot :col, required: true do`
	343	+	`attr :label, :string`
	344	+	`end`
	345	+
	346	+	`slot :action`
	347	+
	348	+	`def table(assigns) do`
	349	+	`assigns =`
	350	+	`with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do`
	351	+	`assign(assigns, row_id: assigns.row_id \|\| fn {id, _item} -> id end)`
	352	+	`end`
	353	+
	354	+	`~H"""`
	355	+	`<div class="table-container">`
	356	+	`<table class="table text-sm">`
	357	+	`<thead>`
	358	+	`<tr>`
	359	+	`<th :for={column <- @col} class="px-3 py-2 text-left text-muted-foreground">`
	360	+	`{column[:label]}`
	361	+	`</th>`
	362	+	`<th :if={@action != []} class="px-3 py-2"><span class="sr-only">Actions</span></th>`
	363	+	`</tr>`
	364	+	`</thead>`
	365	+	`<tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}>`
	366	+	`<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="hover:bg-muted/40">`
	367	+	`<td`
	368	+	`:for={column <- @col}`
	369	+	`phx-click={@row_click && @row_click.(row)}`
	370	+	`class={["px-3 py-2", @row_click && "hover:cursor-pointer"]}`
	371	+	`>`
	372	+	`{render_slot(column, @row_item.(row))}`
	373	+	`</td>`
	374	+	`<td :if={@action != []} class="w-0 px-3 py-2 font-semibold">`
	375	+	`<div class="flex gap-4">`
	376	+	`<%= for action <- @action do %>`
	377	+	`{render_slot(action, @row_item.(row))}`
	378	+	`<% end %>`
	379	+	`</div>`
	380	+	`</td>`
	381	+	`</tr>`
	382	+	`</tbody>`
	383	+	`</table>`
	384	+	`</div>`
	385	+	`"""`
	386	+	`end`
	387	+
	388	+	`@doc "A title and description list."`
	389	+	`slot :item, required: true do`
	390	+	`attr :title, :string, required: true`
	391	+	`end`
	392	+
	393	+	`def list(assigns) do`
	394	+	`~H"""`
	395	+	`<ul class="divide-y divide-border">`
	396	+	`<li :for={item <- @item} class="flex items-start gap-4 py-3">`
	397	+	`<div class="min-w-0 grow">`
	398	+	`<div class="font-semibold">{item.title}</div>`
	399	+	`<div class="text-muted-foreground">{render_slot(item)}</div>`
	400	+	`</div>`
	401	+	`</li>`
	402	+	`</ul>`
	403	+	`"""`
	404	+	`end`
	405	+
	406	+	`defp error(assigns) do`
	407	+	`~H"""`
	408	+	`<p class="mt-1.5 flex items-center gap-2 text-sm text-destructive">`
	409	+	`<.icon name="warning" class="size-5" />`
	410	+	`{render_slot(@inner_block)}`
	411	+	`</p>`
	412	+	`"""`
	413	+	`end`
	414	+
184	415		`@doc """`
185	416		`An inline notice.`
186	417

  end

  @doc """
  One glyph from the vendored Apps SDK UI set.
  One glyph from the governed two-tier icon set.

  Renders inline SVG at `1em` in `currentColor`, so a glyph takes the size and
  color of the text around it. Icons come only from `priv/icons`; adding one is
  a re-vendor, never inline SVG in a surface. See `docs/ICONS.md`.
  color of the text around it. Apps SDK UI glyphs come from `priv/icons`.
  `hero-*` names are the documented fallback when that set has no suitable
  concept. Adding a preferred glyph is a re-vendor, never inline SVG in a
  surface. See `docs/ICONS.md`.

  Decorative by default. Most glyphs sit beside a word that already names the
  control, and announcing both is noise, so an icon with no `label` is hidden

  attr :class, :any, default: nil
  attr :rest, :global

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span
      class={[@name, "icon", @class]}
      role={@label && "img"}
      aria-label={@label}
      aria-hidden={is_nil(@label) && "true"}
      data-icon={@name}
      {@rest}
    />
    """
  end

  def icon(assigns) do
    {view_box, inner} = OpenAgentsWeb.Icons.fetch!(assigns.name)


      aria-label={@label}
      aria-hidden={is_nil(@label) && "true"}
      focusable="false"
      data-icon={@name}
      {@rest}
    >{Phoenix.HTML.raw(@inner)}</svg>
    """
  end

  defp translate_error({message, options}) do
    if count = options[:count] do
      Gettext.dngettext(OpenAgentsWeb.Gettext, "errors", message, message, count, options)
    else
      Gettext.dgettext(OpenAgentsWeb.Gettext, "errors", message, options)
    end
  end
end


  Each glyph is stored as a complete standalone SVG so the file stays viewable
  and diffable on its own. This module splits it into the viewBox and the inner
  markup so `OpenAgentsWeb.CoreComponents.icon/1` can render a fresh root element
  markup so `OpenAgentsWeb.UI.icon/1` can render a fresh root element
  with the accessibility and sizing attributes the call site needs.
  """


  live off the forge PubSub topics.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Accounts
  alias OpenAgents.Forge

      access requires a separate decision and implementation.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Accounts
  alias OpenAgents.Admin


      <%= if @assignees == [] do %>
        <div class="alert" data-variant="info" role="status">
          <.icon name="hero-information-circle" class="size-5" />
          <.icon name="info-circle" class="size-5" />
          <section>No assignees have been assigned to issues yet.</section>
        </div>
      <% else %>

  off the forge PubSub — a hot-load appears here seconds after it lands.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Changelog


defmodule OpenAgentsWeb.ChatLive do
  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.{
    Accounts,

  Served straight from the bare repo through `OpenAgents.Forge.Browse` (bounded
  git plumbing, WAL-fresh), gated by the repo's disclosure level
  (`OpenAgents.Forge.Visibility`, TRANSPARENCY-001 — files need :l3). Markdown
  renders through `OpenAgents.Markdown`'s allowlist walk; everything else is an
  renders through `OpenAgents.Markdown`'s bounded MDEx sanitizer; everything else is an
  escaped code block; binaries are named, never rendered. Public posture as
  the leaderboard: read-only, no session required, cannot invoke OpenAgents.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Forge.{Browse, Visibility}


  the other projections: read-only, sessionless, cannot invoke OpenAgents.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Forge
  alias OpenAgents.Forge.{Browse, Visibility}

  projections; data comes from `OpenAgents.Forge.Browse`'s bounded plumbing.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Forge
  alias OpenAgents.Forge.{Browse, Visibility}

    %{id: 3, owner: "OpenAgentsInc", repo: "arcade", state: "closed"}
  ]

  @icons ~w(
    hero-information-circle hero-exclamation-circle hero-x-mark
    hero-arrow-path hero-sun-micro hero-moon-micro hero-computer-desktop-micro
  )

  # UI.icon/1 renders the vendored Apps SDK set, not heroicons.
  # The catalog demonstrates the preferred vendored Apps SDK tier. Heroicons
  # remains an exceptional fallback with an empty product-use inventory.
  @openagents_icons ~w(sparkle compass folder document user bell play star)

  # account_control/1 and command_bar/1 read three fields off the current user.

     socket
     |> assign(:form, form)
     |> assign(:rows, @sample_rows)
     |> assign(:icons, @icons)
     |> assign(:openagents_icons, @openagents_icons)
     |> assign(:demo_user, @demo_user)}
  end

    {:noreply, put_flash(socket, :info, "Demo form submitted. Nothing was saved.")}
  end

  def handle_event("flash-info", _params, socket) do
    {:noreply, put_flash(socket, :info, "This is the info flash from CoreComponents.")}
  end

  def handle_event("flash-error", _params, socket) do
    {:noreply, put_flash(socket, :error, "This is the error flash from CoreComponents.")}
  end

  @impl true
  def render(%{live_action: :index} = assigns) do
    ~H"""
    <div id="components-index" class="max-w-3xl">
      <h1 class="text-3xl font-semibold mb-4">Component library</h1>
      <p class="text-base-content/70 mb-8 text-pretty max-w-[68ch]">
        Live examples of every reusable function component in this repository, drawn from
        <code>OpenAgentsWeb.CoreComponents</code>
        (the Phoenix set, restyled onto basecoat), <code>OpenAgentsWeb.UI</code>
        (the OpenAgents interface primitives), and <code>OpenAgentsWeb.Layouts</code>. <code>button</code>, <code>input</code>, and
        <code>icon</code>
        exist in both component sets, so the UI entries are listed separately.
        A test asserts this page covers every public component in those modules.
      <p class="text-muted-foreground mb-8 text-pretty max-w-[68ch]">
        Live examples of every supported function component in <code>OpenAgentsWeb.UI</code>, <code>OpenAgentsWeb.Layouts</code>, and the
        repository header. A test asserts this page covers every public component
        in those modules.
        Planned GitHub-shaped components are listed in <code>docs/component-library.md</code>.
      </p>

      <section :for={section <- ComponentCatalog.sections()} class="mb-10">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/50 mb-3">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3">
          {section.title}
        </h2>
        <div class="grid gap-4 sm:grid-cols-2">
          <.link
            :for={item <- section.items}
            navigate={~p"/components/#{item.slug}"}
            class="card bg-base-200 border border-base-300 p-4 hover:border-base-content/30"
            class="card bg-card border border-border p-4 hover:border-foreground/30"
          >
            <h3 class="text-lg font-medium mb-1">{item.title}</h3>
            <p class="text-sm text-base-content/70">{item.summary}</p>
            <p class="text-sm text-muted-foreground">{item.summary}</p>
          </.link>
        </div>
      </section>

    <div id={"component-#{@item.slug}"} class="max-w-3xl space-y-6">
      <header class="space-y-1">
        <h1 class="text-3xl font-semibold">{@item.title}</h1>
        <p class="text-sm text-base-content/70"><code>{@item.source}</code></p>
        <p class="text-base text-base-content/70 text-pretty max-w-[68ch]">{@item.summary}</p>
        <p class="text-sm text-muted-foreground"><code>{@item.source}</code></p>
        <p class="text-base text-muted-foreground text-pretty max-w-[68ch]">{@item.summary}</p>
      </header>

      <div class="rounded-box border border-base-300 bg-base-100 p-6">
      <div class="rounded-lg border border-border bg-background p-6">
        <.component_demo {assigns} />
      </div>
    </div>

  attr :item, :map, required: true
  attr :form, :any, default: nil
  attr :rows, :list, default: []
  attr :icons, :list, default: []
  attr :openagents_icons, :list, default: []
  attr :demo_user, :map, default: nil

  defp component_demo(%{item: %{slug: "button"}} = assigns) do
    ~H"""
    <div class="flex flex-wrap items-center gap-3">
      <.button id="demo-button-default">Default</.button>
      <.button id="demo-button-primary" variant="primary">Primary</.button>
      <.button id="demo-button-navigate" navigate={~p"/"}>Navigate home</.button>
      <.button id="demo-button-disabled" disabled>Disabled</.button>
    </div>
    """
  end

  defp component_demo(%{item: %{slug: "input"}} = assigns) do
  defp component_demo(%{item: %{slug: "openagents-input"}} = assigns) do
    ~H"""
    <.form
      for={@form}

        <.input field={@form[:public]} type="checkbox" label="Public repository" />
      </div>
      <div class="flex items-end">
        <.button type="submit" variant="primary">Save demo</.button>
        <.button type="submit" variant={:primary}>Save demo</.button>
      </div>
    </.form>
    """
  end

  defp component_demo(%{item: %{slug: "header"}} = assigns) do
  defp component_demo(%{item: %{slug: "openagents-header"}} = assigns) do
    ~H"""
    <.header>
      Repository issues
      <:subtitle>Open and closed issues for this repository.</:subtitle>
      <:actions>
        <.button variant="primary">New issue</.button>
        <.button variant={:primary}>New issue</.button>
      </:actions>
    </.header>
    """
  end

  defp component_demo(%{item: %{slug: "table"}} = assigns) do
  defp component_demo(%{item: %{slug: "openagents-table"}} = assigns) do
    ~H"""
    <.table id="demo-table" rows={@rows}>
      <:col :let={row} label="Owner">{row.owner}</:col>

    """
  end

  defp component_demo(%{item: %{slug: "list"}} = assigns) do
  defp component_demo(%{item: %{slug: "openagents-list"}} = assigns) do
    ~H"""
    <.list>
      <:item title="Flash">Toast alerts for info and error.</:item>

    """
  end

  defp component_demo(%{item: %{slug: "icon"}} = assigns) do
    ~H"""
    <ul id="demo-icons" role="list" class="flex flex-wrap gap-4">
      <li :for={name <- @icons} class="flex flex-col items-center gap-2 w-28">
        <.icon name={name} class="size-6" />
        <p class="text-center text-sm text-base-content/70">{name}</p>
      </li>
    </ul>
    """
  end

  defp component_demo(%{item: %{slug: "flash"}} = assigns) do
    ~H"""
    <p class="text-pretty text-base text-base-content/70 max-w-[68ch] mb-4">
      Flash renders through <code>Layouts.flash_group/1</code>
      at the corner of the page. Trigger a sample message:
    </p>
    <div class="flex flex-wrap gap-3">
      <.button id="demo-flash-info" phx-click="flash-info">Show info flash</.button>
      <.button id="demo-flash-error" phx-click="flash-error">Show error flash</.button>
    </div>
    """
  end

  defp component_demo(%{item: %{slug: "theme-toggle"}} = assigns) do
    ~H"""
    <div id="demo-theme-toggle">
      <Layouts.theme_toggle />
    </div>
    """
  end

  defp component_demo(%{item: %{slug: "repo-header"}} = assigns) do
    ~H"""
    <OpenAgentsWeb.Components.RepoHeader.repo_header

  end

  # --- OpenAgents UI -------------------------------------------------------------
  # UI is imported by `openagents_html_helpers`, not by `:live_view`, so these
  # are called with the full module prefix. That also documents provenance on a
  # page whose whole job is showing where a component comes from.

  defp component_demo(%{item: %{slug: "openagents-button"}} = assigns) do
    ~H"""

      <div class="flex flex-wrap items-center gap-3">
        <UI.button
          :for={v <- ~w(primary secondary outline ghost destructive chip notched link)a}
          id={"demo-button-#{v}"}
          variant={v}
        >
          {v |> Atom.to_string() |> String.capitalize()}

      </div>
      <div class="flex flex-wrap items-center gap-3">
        <UI.button tone={:danger}>Danger tone</UI.button>
        <UI.button disabled>Disabled</UI.button>
        <UI.button id="demo-button-disabled" disabled>Disabled</UI.button>
      </div>
    </div>
    """

    """
  end

  defp component_demo(%{item: %{slug: "openagents-input"}} = assigns) do
    ~H"""
    <div class="space-y-3 max-w-sm">
      <UI.input id="openagents-input-demo" name="demo" value="Ship the catalog" />
      <UI.input id="openagents-input-demo-empty" name="demo_empty" placeholder="Placeholder text" />
      <UI.input id="openagents-input-demo-disabled" name="demo_disabled" value="Disabled" disabled />
    </div>
    """
  end

  defp component_demo(%{item: %{slug: "openagents-textarea"}} = assigns) do
    ~H"""
    <div class="max-w-sm">

    ~H"""
    <div class="space-y-6">
      <div class="space-y-3">
        <p class="text-sm text-base-content/60">Variants (box appearance)</p>
        <p class="text-sm text-muted-foreground">Variants (box appearance)</p>
        <UI.alert :for={v <- ~w(info success warning danger)a} variant={v} label={Atom.to_string(v)}>
          A {v} alert in the default box appearance.
        </UI.alert>
      </div>
      <div class="space-y-3">
        <p class="text-sm text-base-content/60">Appearances</p>
        <p class="text-sm text-muted-foreground">Appearances</p>
        <UI.alert
          :for={a <- ~w(box row notice)a}
          appearance={a}

    <div class="grid gap-4 sm:grid-cols-2">
      <UI.card id="openagents-card-default">
        <p class="font-medium">Default</p>
        <p class="text-sm text-base-content/70">A plain content container.</p>
        <p class="text-sm text-muted-foreground">A plain content container.</p>
      </UI.card>
      <UI.card id="openagents-card-corners" frame={:corners}>
        <p class="font-medium">Corner frame</p>
        <p class="text-sm text-base-content/70">With bracket decoration.</p>
        <p class="text-sm text-muted-foreground">With bracket decoration.</p>
      </UI.card>
      <UI.card id="openagents-card-danger" variant={:danger}>
        <p class="font-medium">Danger</p>
        <p class="text-sm text-base-content/70">For destructive context.</p>
        <p class="text-sm text-muted-foreground">For destructive context.</p>
      </UI.card>
    </div>
    """

      <:chips>
        <UI.badge variant={:dim}>tool</UI.badge>
      </:chips>
      <p class="text-sm text-base-content/70">Pushed 3 files to the forge.</p>
      <p class="text-sm text-muted-foreground">Pushed 3 files to the forge.</p>
    </UI.event_header>
    """
  end

    <UI.frame>
      <div class="p-6">
        <p class="font-medium">Framed content</p>
        <p class="text-sm text-base-content/70">Corner brackets wrap arbitrary children.</p>
        <p class="text-sm text-muted-foreground">Corner brackets wrap arbitrary children.</p>
      </div>
    </UI.frame>
    """

        src="/audio/does-not-exist.wav"
        label="Voice recording (demo source, nothing to play)"
      />
      <p class="text-sm text-base-content/60">
      <p class="text-sm text-muted-foreground">
        The src is intentionally a dead path; this page has no recording to serve.
      </p>
    </div>

    <ul id="openagents-demo-icons" role="list" class="flex flex-wrap gap-4">
      <li :for={name <- @openagents_icons} class="flex flex-col items-center gap-2 w-28">
        <UI.icon name={name} class="size-6" />
        <p class="text-center text-sm text-base-content/70">{name}</p>
        <p class="text-center text-sm text-muted-foreground">{name}</p>
      </li>
    </ul>
    """

    ~H"""
    <div class="space-y-4">
      <div class="space-y-2">
        <p class="text-sm text-base-content/60">Bar context</p>
        <p class="text-sm text-muted-foreground">Bar context</p>
        <Layouts.account_control current_user={@demo_user} context={:bar} />
      </div>
      <p class="text-sm text-base-content/60 max-w-[68ch]">
      <p class="text-sm text-muted-foreground max-w-[68ch]">
        Only one instance is shown. <code>account_control/1</code>
        hard-codes the ids <code>account-menu</code>, <code>account-menu-trigger</code>, <code>logout-form</code>, and <code>logout</code>, so it can be rendered at most
        once per page — rendering the <code>:row</code>

  Approve controller pairing codes and manage this account's paired computers.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Computer
  alias OpenAgents.Machines

      </p>

      <div class="grid gap-4 sm:grid-cols-2">
        <.card title="Get started" description="Install, configure, and run your first agent." />
        <.card title="Guides" description="Authentication, agents, and the forge pipeline." />
        <.card title="API reference" description="HTTP endpoints and schemas." />
        <.card title="CLI reference" description="Mix tasks and release commands." />
        <.docs_card title="Get started" description="Install, configure, and run your first agent." />
        <.docs_card title="Guides" description="Authentication, agents, and the forge pipeline." />
        <.docs_card title="API reference" description="HTTP endpoints and schemas." />
        <.docs_card title="CLI reference" description="Mix tasks and release commands." />
      </div>
    </div>
    """
  end

  defp card(assigns) do
  defp docs_card(assigns) do
    ~H"""
    <%!-- `.card` brings its own padding and lift; the surrounding grid supplies
    the gaps, so the panel margin is dropped here. --%>

                <.button
                  id="home-cta-create"
                  navigate={~p"/OpenAgents/openagents/issues/new"}
                  variant="primary"
                  variant={:primary}
                >
                  Create new issue
                </.button>

                </.button>
              <% else %>
                <.form for={%{}} as={:auth} action={~p"/auth/github"} method="post" class="m-0">
                  <.button type="submit" variant="primary" id="home-cta-signin">
                  <.button type="submit" variant={:primary} id="home-cta-signin">
                    Sign in with GitHub
                  </.button>
                </.form>

              data-size="sm"
              aria-current={@state == "open" && "page"}
            >
              <.icon name="hero-exclamation-circle" class="size-4 text-success" />
              <.icon name="warning" class="size-4 text-success" />
              <span class="font-semibold">{@open_count}</span> Open
            </.link>
            <.link

              data-size="sm"
              aria-current={@state == "closed" && "page"}
            >
              <.icon name="hero-check-circle" class="size-4 text-muted-foreground" />
              <.icon name="check-circle" class="size-4 text-muted-foreground" />
              <span class="font-semibold">{@closed_count}</span> Closed
            </.link>
          </div>

          <div class="flex-1 min-w-[12rem]">
            <label class="input w-full max-w-xs flex items-center gap-2">
              <.icon name="hero-magnifying-glass" class="size-4 text-muted-foreground" />
              <.icon name="search" class="size-4 text-muted-foreground" />
              <input
                type="text"
                placeholder="Search or filter results..."


          <div class="flex items-center gap-1">
            <button class="btn gap-1" data-variant="ghost" data-size="sm">
              <.icon name="hero-tag" class="size-4" /> Labels
              <.icon name="tag" class="size-4" /> Labels
            </button>
            <button class="btn gap-1" data-variant="ghost" data-size="sm">
              <.icon name="hero-flag" class="size-4" /> Milestones
              <.icon name="flag" class="size-4" /> Milestones
            </button>
            <button class="btn gap-1" data-variant="ghost" data-size="sm">
              <.icon name="hero-user" class="size-4" /> Assignees
              <.icon name="user" class="size-4" /> Assignees
            </button>
            <button class="btn gap-1" data-variant="ghost" data-size="sm">
              <.icon name="hero-bars-arrow-down" class="size-4" /> Sort
              <.icon name="filter" class="size-4" /> Sort
            </button>
          </div>


        <%= if @issues_count == 0 do %>
          <div class="p-8 text-center">
            <.icon
              name="hero-clipboard-document-list"
              name="clipboard"
              class="size-12 mx-auto mb-3 text-muted-foreground/50"
            />
            <h3 class="text-lg font-medium mb-1">

                <.icon
                  name={
                    if(issue.state == "open",
                      do: "hero-exclamation-circle",
                      else: "hero-check-circle"
                      do: "warning",
                      else: "check-circle"
                    )
                  }
                  class={[

                      "anonymous"}
                    <%= if issue.comments > 0 do %>
                      <span class="inline-flex items-center gap-1 ml-2">
                        <.icon name="hero-chat-bubble-left" class="size-4" />
                        <.icon name="comment" class="size-4" />
                        {issue.comments}
                      </span>
                    <% end %>

          <.link navigate={~p"/#{@owner}/#{@repo}/issues"} class="btn" data-variant="ghost">
            Cancel
          </.link>
          <.button variant="primary">Create issue</.button>
          <.button variant={:primary}>Create issue</.button>
        </footer>
      </.form>
    </Layouts.app>

            <button type="button" class="btn" data-variant="ghost" phx-click="toggle_edit">
              Cancel
            </button>
            <.button variant="primary">Save</.button>
            <.button variant={:primary}>Save</.button>
          </footer>
        </.form>
      <% else %>

          >
            <.input field={@comment_form[:body]} type="textarea" label="Write a comment" />
            <footer class="flex justify-end mt-2">
              <.button variant="primary">Comment</.button>
              <.button variant={:primary}>Comment</.button>
            </footer>
          </.form>
        </div>

          <.input field={@form[:description]} label="Description" />
        </div>
        <footer class="flex justify-end mt-2">
          <.button variant="primary">Add label</.button>
          <.button variant={:primary}>Add label</.button>
        </footer>
      </.form>

      <%= if @labels == [] do %>
        <div class="alert" data-variant="info" role="status">
          <.icon name="hero-information-circle" class="size-5" />
          <.icon name="info-circle" class="size-5" />
          <section>No labels yet.</section>
        </div>
      <% else %>

  be rendered here by accident.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.Leaderboard
  alias OpenAgents.Leaderboard.Entry

          <.input field={@form[:description]} label="Description" />
        </div>
        <footer class="flex justify-end mt-2">
          <.button variant="primary">Add milestone</.button>
          <.button variant={:primary}>Add milestone</.button>
        </footer>
      </.form>

      <%= if @milestones == [] do %>
        <div class="alert" data-variant="info" role="status">
          <.icon name="hero-information-circle" class="size-5" />
          <.icon name="info-circle" class="size-5" />
          <section>No milestones yet.</section>
        </div>
      <% else %>

  full fleet to render — it is most useful precisely when something is down.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  alias OpenAgents.NetworkStatus


      >
        <.input field={@form[:title]} label="Title" required />
        <footer class="flex justify-end mt-2">
          <.button variant="primary">Add project</.button>
          <.button variant={:primary}>Add project</.button>
        </footer>
      </.form>

      <%= if @projects == [] do %>
        <div class="alert" data-variant="info" role="status">
          <.icon name="hero-information-circle" class="size-5" />
          <.icon name="info-circle" class="size-5" />
          <section>No projects yet.</section>
        </div>
      <% else %>

          />
        </div>
        <footer class="flex justify-end mt-2">
          <.button variant="primary">Add to board</.button>
          <.button variant={:primary}>Add to board</.button>
        </footer>
      </.form>


  fallback, and a visible focus ring on every control.
  """

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  @statuses ~w(idle connected requested running succeeded failed cancelled interrupted refused unavailable)
  @voice_states ~w(idle requesting connecting listening speaking interrupted reconnecting muted blocked failed ending)

defmodule OpenAgentsWeb.VoiceSpikeLive do
  @moduledoc false

  use OpenAgentsWeb, :openagents_live_view
  use OpenAgentsWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do

      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 1.2.0"},
      {:lazy_html, ">= 0.1.0", only: :test},
      {:mix_audit, "~> 2.1", only: [:dev, :test], runtime: false},
      {:phoenix_live_dashboard, "~> 0.8.3"},
      {:esbuild, "~> 0.10", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.5", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.2.0",
       ref: "0435d4ca364a608cc75e2f8683d374e55abbae26",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      {:swoosh, "~> 1.16"},
      {:req, "~> 0.5"},
      {:earmark, "~> 1.4"},
      {:mdex, "~> 0.13.5"},
      {:horde, "~> 0.9.0"},
      {:ra, "~> 2.16"},
      {:websockex, "~> 0.5.1"},

        "phx.digest"
      ],
      precommit: [
        "hex.audit",
        "deps.audit",
        "compile --warnings-as-errors",
        "deps.unlock --unused",
        "deps.unlock --check-unused",
        "format",
        "cmd ops/ci/reference-check.sh",
        "cmd elixir ops/ci/docs-check.exs",

  "decimal": {:hex, :decimal, "3.1.1", "430d87b04011ce6cbd4fd205be758311a81f87d552d40904abd00f015935b1d0", [:mix], [], "hexpm", "c5f25f2ced74a0587d03e6023f595db8e924c9d3922c8c8ffd9edfc4498cf1f6"},
  "delta_crdt": {:hex, :delta_crdt, "0.6.5", "c7bb8c2c7e60f59e46557ab4e0224f67ba22f04c02826e273738f3dcc4767adc", [:mix], [{:merkle_map, "~> 0.2.0", [hex: :merkle_map, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "c6ae23a525d30f96494186dd11bf19ed9ae21d9fe2c1f1b217d492a7cc7294ae"},
  "dns_cluster": {:hex, :dns_cluster, "0.2.0", "aa8eb46e3bd0326bd67b84790c561733b25c5ba2fe3c7e36f28e88f384ebcb33", [:mix], [], "hexpm", "ba6f1893411c69c01b9e8e8f772062535a4cf70f3f35bcc964a324078d8c8240"},
  "earmark": {:hex, :earmark, "1.4.49", "024521298c2308f0193ba7a5df742a5e901dad03cd44ba57f861d3f0fada5d1b", [:mix], [], "hexpm", "ffad0257b92ac342b236d1744f7f19793da77bbd7281f32ccdfb44c047a05bf2"},
  "ecto": {:hex, :ecto, "3.14.2", "99db28a864293a789c970651de711e3cae184291e0e7ea1166c54055ac41c1f3", [:mix], [{:decimal, "~> 3.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "25d60b8c816a07d19d85b80bdf60978bd8b102209dda198d768cd7c6745339a6"},
  "ecto_sql": {:hex, :ecto_sql, "3.14.0", "06446ab8410d2f85bfbb80857ee224ab3b693700cbb38f6535d507449a627b2e", [:mix], [{:db_connection, "~> 2.9", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 3.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:ecto, "~> 3.14.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.8", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f4d8d36faf294c9417b5a37ec7ac8217ee2abdef5fcf197ba690f361548d3949"},
  "elixir_make": {:hex, :elixir_make, "0.10.0", "16577e2583a79bb79237bbff349619ef5d80afffc07eac6e4faf0d00e2ddaf7d", [:mix], [], "hexpm", "dc1f09fb7fa68866b886abd5f0f3c83553b1a19a52359a899e92af1bb3b31982"},

  "forecastle": {:hex, :forecastle, "0.1.3", "b07d217ef10799e6d6cc7e47407858e77b1a8cb248f15185534de3403de3aa42", [:mix], [], "hexpm", "07e1ffa79c56f3e0ead59f17c0163a747dafc210ca8f244a7e65a4bfa98dc96d"},
  "gen_batch_server": {:hex, :gen_batch_server, "0.8.9", "1c6bc0f530bf8c17e8b4acc20c2cc369ffa5bee2b46de01e21410745f24b1bc9", [:rebar3], [], "hexpm", "c8581fe4a4b6bccf91e53ce6a8c7e6c27c8c591bab5408b160166463f5579c22"},
  "gettext": {:hex, :gettext, "1.0.2", "5457e1fd3f4abe47b0e13ff85086aabae760497a3497909b8473e0acee57673b", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "eab805501886802071ad290714515c8c4a17196ea76e5afc9d06ca85fb1bfeb3"},
  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "0435d4ca364a608cc75e2f8683d374e55abbae26", [tag: "v2.2.0", sparse: "optimized", depth: 1]},
  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "0435d4ca364a608cc75e2f8683d374e55abbae26", [ref: "0435d4ca364a608cc75e2f8683d374e55abbae26", sparse: "optimized", depth: 1]},
  "horde": {:hex, :horde, "0.9.1", "547507dfe1228471d9a31cece7653be81df2cf8f210816f672ce507dc9606128", [:mix], [{:delta_crdt, "~> 0.6.2", [hex: :delta_crdt, repo: "hexpm", optional: false]}, {:libring, "~> 1.7", [hex: :libring, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:telemetry_poller, "~> 0.5.0 or ~> 1.0", [hex: :telemetry_poller, repo: "hexpm", optional: false]}], "hexpm", "14e1be4d6a84b066101641628a64f849d6df4f0311e93b7a9c39709e9c0bf4ba"},
  "hpax": {:hex, :hpax, "1.0.4", "777de5d433b0fbdc7c418159c8055910faa8047ffdb3d6b31098d2a46cd7685c", [:mix], [], "hexpm", "afc7cb142ebcc2d01ce7816190b98ce5dd49e799111b24249f3443d730f377ca"},
  "idna": {:hex, :idna, "7.1.0", "1067a13043538129602d2f2ce6899d8713125c7d19734aa557ce2e3ea55bd4f1", [:rebar3], [], "hexpm", "6ae959a025bf36df61a8cab8508d9654891b5426a84c44d82deaffd6ddf8c71f"},
  "jason": {:hex, :jason, "1.4.5", "2e3a008590b0b8d7388c20293e9dcc9cf3e5d642fd2a114e4cbbb52e595d940a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0 or ~> 3.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b0c823996102bcd0239b3c2444eb00409b72f6a140c1950bc8b457d836b30684"},
  "lazy_html": {:hex, :lazy_html, "0.1.12", "31a55ee622918fce988c94b06232227b42daa64e4eab14ac32081d0f3fd8db6f", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "8a0da594776caee58782c6f93b2abaa5bdb809daf8d43351a561f7de9dc2e2a8"},
  "libring": {:hex, :libring, "1.7.0", "4f245d2f1476cd7ed8f03740f6431acba815401e40299208c7f5c640e1883bda", [:mix], [], "hexpm", "070e3593cb572e04f2c8470dd0c119bc1817a7a0a7f88229f43cf0345268ec42"},
  "mdex": {:hex, :mdex, "0.13.5", "c1c94d230ccaab01ad0c68090d3b31613c10ece1844f32b55895da4ce0c63029", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:lumis, "~> 0.1", [hex: :lumis, repo: "hexpm", optional: true]}, {:mdex_native, ">= 0.2.6", [hex: :mdex_native, repo: "hexpm", optional: false]}, {:nimble_options, "~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.20.0 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "c57409fb6b34fbc58fbce0a6da670c9a4b5a2e94f86abdc56e9e213ed74620f2"},
  "mdex_native": {:hex, :mdex_native, "0.2.8", "20b7cbf330c1ca81b8da4132b8d01952cded11f6dfc2abe8fef25c13681b15e4", [:mix], [{:rustler, "~> 0.32", [hex: :rustler, repo: "hexpm", optional: true]}, {:rustler_precompiled, "~> 0.8", [hex: :rustler_precompiled, repo: "hexpm", optional: false]}], "hexpm", "004a5565b6c96a06400901eb1e4e603585e00b23262d3f595c3f4aa38b83ef66"},
  "merkle_map": {:hex, :merkle_map, "0.2.2", "f36ff730cca1f2658e317a3c73406f50bbf5ac8aff54cf837d7ca2069a6e251c", [:mix], [], "hexpm", "383107f0503f230ac9175e0631647c424efd027e89ea65ab5ea12eeb54257aaf"},
  "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
  "mint": {:hex, :mint, "1.9.3", "3337184d69179695c7a9f1714d92c11e629d36c8c037a21cf490131d3d150554", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "5f7c9342480c069dbbc4eeac3490303c9e01870ff01a7f1d29b6107054fc1e74"},
  "mix_audit": {:hex, :mix_audit, "2.1.5", "c0f77cee6b4ef9d97e37772359a187a166c7a1e0e08b50edf5bf6959dfe5a016", [:make, :mix], [{:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:yaml_elixir, "~> 2.11", [hex: :yaml_elixir, repo: "hexpm", optional: false]}], "hexpm", "87f9298e21da32f697af535475860dc1d3617a010e0b418d2ec6142bc8b42d69"},
  "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
  "nimble_parsec": {:hex, :nimble_parsec, "1.4.2", "8efba0122db06df95bfaa78f791344a89352ba04baedd3849593bfce4d0dc1c6", [:mix], [], "hexpm", "4b21398942dda052b403bbe1da991ccd03a053668d147d53fb8c4e0efe09c973"},
  "nimble_pool": {:hex, :nimble_pool, "1.1.0", "bf9c29fbdcba3564a8b800d1eeb5a3c58f36e1e11d7b7fb2e084a643f645f06b", [:mix], [], "hexpm", "af2e4e6b34197db81f7aad230c1118eac993acc0dae6bc83bac0126d4ae0813a"},
  "phoenix": {:hex, :phoenix, "1.8.11", "9bb8f0c4e9f0b9eaf7f34cf8cb0bd25bd8599763a5587d64918a9ebb04027823", [:mix], [{:bandit, "~> 1.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 2.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "44f028f4129e5a29487e868f84903373e3d032da151ad0c789c3849f464e7351"},
  "phoenix_ecto": {:hex, :phoenix_ecto, "4.7.0", "75c4b9dfb3efdc42aec2bd5f8bccd978aca0651dbcbc7a3f362ea5d9d43153c6", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "1d75011e4254cb4ddf823e81823a9629559a1be93b4321a6a5f11a5306fbf4cc"},

  "postgrex": {:hex, :postgrex, "0.22.4", "d271f595dfd25230b6398354e19d17bb5e2d20130fd2d9bdca7e15f125d43552", [:mix], [{:db_connection, "~> 2.9", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0 or ~> 3.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "4aae45a2d60e35b04eea2602440be152fae332901f1fc7a60fc7cb7f0f9a9c5a"},
  "ra": {:hex, :ra, "2.17.3", "a72a4b4d1517fdf4168bfbd49a2fa9c2e77dcd17434dd3aa0da9daf6cad49329", [:rebar3], [{:aten, "0.6.0", [hex: :aten, repo: "hexpm", optional: false]}, {:gen_batch_server, "0.8.9", [hex: :gen_batch_server, repo: "hexpm", optional: false]}, {:seshat, "1.0.1", [hex: :seshat, repo: "hexpm", optional: false]}], "hexpm", "f4de530341bf416e43768fea56c72f08a074dd87c80d116f84a6e2e8277cc06a"},
  "req": {:hex, :req, "0.7.3", "b141f1b465dabc5fb8ce67bd2f15a85fc80f6c75719910699560e32ce49f62ef", [:mix], [{:brotli, "~> 0.3.1", [hex: :brotli, repo: "hexpm", optional: true]}, {:finch, "~> 0.21", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mime, "~> 2.0.6 or ~> 2.1", [hex: :mime, repo: "hexpm", optional: false]}, {:nimble_csv, "~> 1.0", [hex: :nimble_csv, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "73b303030dccc2b6d023ee5ada380825ab3a7cd3863aead493db09ec420ffdf2"},
  "rustler_precompiled": {:hex, :rustler_precompiled, "0.9.0", "3a052eda09f3d2436364645cc1f13279cf95db310eb0c17b0d8f25484b233aa0", [:mix], [{:rustler, "~> 0.23", [hex: :rustler, repo: "hexpm", optional: true]}], "hexpm", "471d97315bd3bf7b64623418b3693eedd8e47de3d1cb79a0ac8f9da7d770d94c"},
  "seshat": {:hex, :seshat, "1.0.1", "fa7a8e89218d19394f7ddc47ba6725471103d654cd0bd0a98e5fdd922a943eac", [:rebar3], [], "hexpm", "38324fe8c5782c69d73b334dd00b20e16c0d99eef3e7b4005c519fe9bc0e34fc"},
  "swoosh": {:hex, :swoosh, "1.27.1", "ca5c1e4a4914c6d1d73d17aaefc3ed53e96edf6b84e0cca03620652ef689cf9d", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, ">= 1.9.0 and < 5.0.0", [hex: :hackney, repo: "hexpm", optional: true]}, {:idna, ">= 6.0.0 and < 8.0.0", [hex: :idna, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9e732f469259e5e84364967b6e0b5d5562adf35bd77576b92a6f3753de6ae9e1"},
  "tailwind": {:hex, :tailwind, "0.5.1", "35435b13158c90d37da11e1cfc808755fca1d7b6c5ab87b1b19c5de87e2f0a10", [:mix], [], "hexpm", "c4e26302a59fec72abc5610ecb6ad2116d9aa31f31aab2d4b8eb6e95d25a689c"},

54	58		`"websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},`
55	59		`"websock_adapter": {:hex, :websock_adapter, "0.6.0", "73db5ab8aaefd1a876a97ce3e6afc96562625de69ef17a4e04426e034849d0b8", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "50021a85bce8f203b086705d9e0c5415e2c7eb05d319111b0428fe71f9934617"},`
56	60		`"websockex": {:hex, :websockex, "0.5.1", "9de28d37bbe34f371eb46e29b79c94c94fff79f93c960d842fbf447253558eb4", [:mix], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "8ef39576ed56bc3804c9cd8626f8b5d6b5721848d2726c0ccd4f05385a3c9f14"},`
	61	+	`"yamerl": {:hex, :yamerl, "0.10.0", "4ff81fee2f1f6a46f1700c0d880b24d193ddb74bd14ef42cb0bcf46e81ef2f8e", [:rebar3], [], "hexpm", "346adb2963f1051dc837a2364e4acf6eb7d80097c0f53cbdc3046ec8ec4b4e6e"},`
	62	+	`"yaml_elixir": {:hex, :yaml_elixir, "2.12.2", "9dd1330fb4cd9a36a7b0f502e5b12486eff632792ee4a5f0eba52a4d4ec32c9c", [:mix], [{:yamerl, "~> 0.10", [hex: :yamerl, repo: "hexpm", optional: false]}], "hexpm", "e7c1b10122f973e6558462d51c39026ba0e14afbc6745318e990ea82cfe9e159"},`
57	63		`}`

1	+	`#!/usr/bin/env bash`
2	+	`set -euo pipefail`
3	+
4	+	`readonly SYFT_IMAGE="anchore/syft@sha256:678bfa565b60f747aac0f8e964fe5588a24445b8d0a480e91f6efd70020dfbb0"`
5	+
6	+	`if [[ $# -ne 2 ]]; then`
7	+	`echo "usage: $0 <image-reference> <output.cdx.json>" >&2`
8	+	`exit 64`
9	+	`fi`
10	+
11	+	`readonly image_reference="$1"`
12	+	`readonly output_path="$2"`
13	+	`readonly output_directory="$(dirname -- "$output_path")"`
14	+
15	+	`mkdir -p -- "$output_directory"`
16	+
17	+	`readonly temporary_sbom="$(mktemp "${output_path}.tmp.XXXXXX")"`
18	+	`readonly temporary_receipt="$(mktemp "${output_path}.receipt.tmp.XXXXXX")"`
19	+
20	+	`cleanup() {`
21	+	`unlink "$temporary_sbom" 2>/dev/null \|\| true`
22	+	`unlink "$temporary_receipt" 2>/dev/null \|\| true`
23	+	`}`
24	+	`trap cleanup EXIT`
25	+
26	+	`readonly image_digest="$(`
27	+	`docker image inspect "$image_reference" \`
28	+	`--format '{{index .RepoDigests 0}}' 2>/dev/null`
29	+	`)"`
30	+
31	+	`if [[ -z "$image_digest" \|\| "$image_digest" == "<no value>" ]]; then`
32	+	`echo "image must be present locally with a resolved repository digest: $image_reference" >&2`
33	+	`exit 65`
34	+	`fi`
35	+
36	+	`docker run --rm \`
37	+	`--volume /var/run/docker.sock:/var/run/docker.sock \`
38	+	`"$SYFT_IMAGE" \`
39	+	`"docker:$image_digest" \`
40	+	`--quiet \`
41	+	`--output cyclonedx-json >"$temporary_sbom"`
42	+
43	+	`jq -e '`
44	+	`.bomFormat == "CycloneDX" and`
45	+	`(.specVersion \| type == "string") and`
46	+	`(.components \| type == "array" and length > 0)`
47	+	`' "$temporary_sbom" >/dev/null`
48	+
49	+	`readonly source_commit="$(git rev-parse HEAD)"`
50	+	`readonly sbom_sha256="$(sha256sum "$temporary_sbom" \| cut -d ' ' -f 1)"`
51	+
52	+	`{`
53	+	`echo "source_commit=$source_commit"`
54	+	`echo "image_digest=$image_digest"`
55	+	`echo "syft_image=$SYFT_IMAGE"`
56	+	`echo "format=cyclonedx-json"`
57	+	`echo "generated_at=$(date -u +%Y-%m-%dT%H:%M:%SZ)"`
58	+	`echo "sbom_sha256=$sbom_sha256"`
59	+	`} >"$temporary_receipt"`
60	+
61	+	`mv -- "$temporary_sbom" "$output_path"`
62	+	`mv -- "$temporary_receipt" "${output_path}.receipt"`
63	+	`trap - EXIT`
64	+
65	+	`echo "wrote $output_path"`
66	+	`echo "wrote ${output_path}.receipt"`

Third-party marks. **Do not edit these files.**

Separate from `priv/icons` for two reasons: a brand mark can never come from a
generic icon set, and `mix sarah.icons.vendor` clears `priv/icons` on every
generic icon set, and `mix openagents.icons.vendor` clears `priv/icons` on every
re-vendor, which would delete anything hand-added there.

- Source: [simple-icons](https://github.com/simple-icons/simple-icons), CC0-1.0.

signs in with GitHub — which is what the marks are for. Do not use one
decoratively, and do not imply endorsement.

Rendered through `SarahWeb.UI.icon/1` as `brand-<name>`, e.g.
Rendered through `OpenAgentsWeb.UI.icon/1` as `brand-<name>`, e.g.
`<.icon name="brand-github" />`. See `docs/ICONS.md`.


Upstream ships one React component per glyph under
`src/components/Icon/svg/`, each drawing a `currentColor` SVG sized at `1em`.
Sarah has no React and no `node_modules`, so the components cannot be consumed
OpenAgents does not ship React in its Phoenix bundle, so the components cannot be consumed
as published. `mix openagents.icons.vendor <path-to-apps-sdk-ui>` converts them:

- JSX attribute names become their SVG spelling (`fillRule` → `fill-rule`, and

1	+	`MIT License`
2	+
3	+	`Copyright (c) Tailwind Labs, Inc.`
4	+
5	+	`Permission is hereby granted, free of charge, to any person obtaining a copy`
6	+	`of this software and associated documentation files (the "Software"), to deal`
7	+	`in the Software without restriction, including without limitation the rights`
8	+	`to use, copy, modify, merge, publish, distribute, sublicense, and/or sell`
9	+	`copies of the Software, and to permit persons to whom the Software is`
10	+	`furnished to do so, subject to the following conditions:`
11	+
12	+	`The above copyright notice and this permission notice shall be included in all`
13	+	`copies or substantial portions of the Software.`
14	+
15	+	`THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR`
16	+	`IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,`
17	+	`FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE`
18	+	`AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER`
19	+	`LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,`
20	+	`OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE`
21	+	`SOFTWARE.`

1	+	`# Third-party notices`
2	+
3	+	`OpenAgents is licensed under AGPL-3.0-or-later. The release also contains the`
4	+	`following third-party assets. Their licenses apply to those assets only.`
5	+
6	+	- Basecoat `1.0.2` at commit `6953a4a`: MIT, copyright 2025 Ronan Berder. See
7	+	`assets/vendor/basecoat/LICENSE.md` in the source distribution.
8	+	- OpenAI Apps SDK UI icons at commit `0f00143`: MIT, copyright 2025 OpenAI. See
9	+	`priv/icons/LICENSE`.
10	+	- Heroicons `2.2.0` at revision
11	+	`0435d4ca364a608cc75e2f8683d374e55abbae26`: MIT, copyright Tailwind Labs,
12	+	Inc. See `priv/licenses/HEROICONS-LICENSE`.
13	+	`- Geist Sans and Geist Mono: SIL Open Font License 1.1, copyright 2023 Vercel`
14	+	in collaboration with basement.studio. See `priv/static/fonts/LICENSE`.
15	+	`- Titillium Web: SIL Open Font License 1.1, copyright 2009–2011 Accademia di`
16	+	`Belle Arti di Urbino and contributors. See`
17	+	`priv/static/fonts/LICENSE-titillium-web`.
18	+	`- The GitHub brand mark comes from Simple Icons under CC0-1.0. GitHub retains`
19	+	its trademarks. See `priv/brand/README.md` for the permitted product use.
20	+
21	+	`The image SBOM records Elixir and operating-system packages for each exact`
22	+	`release artifact.`

      assert html("> quoted") =~ "<blockquote>"
      assert html("~~gone~~") =~ "<del>"
    end

    test "renders tables and malformed Markdown without crashing" do
      table = html("| A | B |\n|---|---|\n| 1 | 2 |")

      assert table =~ "<table>"
      assert table =~ "<th>A</th>"
      assert table =~ "<td>2</td>"

      malformed = html("[unfinished **link](https://example.com and `code")

      assert is_binary(malformed)
      refute malformed =~ "<script"
    end

    test "complete persisted content is stable through the streaming path" do
      persisted = """
      ## Result

      - **Safe** [link](https://example.com)
      - `mix precommit`
      """

      assert html(persisted, streaming: true) == html(persisted)
    end
  end

  describe "untrusted input" do
    test "raw HTML is escaped, never emitted" do
    test "raw HTML is refused while its harmless text remains" do
      rendered = html("before <script>alert(1)</script> after")

      refute rendered =~ "<script>"
      assert rendered =~ "&lt;script&gt;"
      refute rendered =~ "&lt;script&gt;"
      assert rendered =~ "alert(1)"
    end

    test "an event-handler attribute cannot survive" do

      assert rendered =~ ~s(target="_blank")
    end

    test "relative, fragment, mail, and protocol-relative links are normalized safely" do
      assert html("[path](/docs)") =~ ~s(href="/docs")
      assert html("[section](#part)") =~ ~s(href="#part")
      assert html("[mail](mailto:team@example.com)") =~ ~s(href="mailto:team@example.com")
      assert html("[cdn](//example.com/x)") =~ ~s(href="https://example.com/x")
    end

    test "a bare domain is resolved as https rather than relative to Sarah" do
      assert html("[site](example.com)") =~ ~s(href="https://example.com")
    end

86	118
87	119		`refute rendered =~ ~s(onmouseover=")`
88	120		`end`
	121	+
	122	+	`test "oversized input returns a bounded escaped fallback" do`
	123	+	`rendered = html(String.duplicate("<", 1_000_001))`
	124	+
	125	+	`assert rendered =~ "Markdown rendering limited."`
	126	+	`assert rendered =~ "input exceeds 1000000 bytes"`
	127	+	`assert byte_size(rendered) < 400_000`
	128	+	`refute rendered =~ "<script"`
	129	+	`end`
	130	+
	131	+	`test "excessive nesting returns a bounded fallback" do`
	132	+	`# Blockquotes produce real nested AST nodes and exercise the structural`
	133	+	`# limit independently of raw input size.`
	134	+	`rendered = html(String.duplicate("> ", 40) <> "deep")`
	135	+
	136	+	`assert rendered =~ "Markdown rendering limited."`
	137	+	`assert rendered =~ "nesting exceeds 32 levels"`
	138	+	`assert rendered =~ "deep"`
	139	+	`end`
	140	+
	141	+	`test "render expansion is bounded independently of input size" do`
	142	+	`rendered = html(String.duplicate("&", 500_000))`
	143	+
	144	+	`assert rendered =~ "Markdown rendering limited."`
	145	+	`assert rendered =~ "rendered output exceeds 2000000 bytes"`
	146	+	`assert byte_size(rendered) < 400_000`
	147	+	`end`
89	148		`end`
90	149
91	150		`describe "complete/1 for partial streams" do`

    test "no surface hand-writes an svg outside the vendored set" do
      # Every glyph must come from `priv/icons` through `icon/1`. A pasted
      # `<svg>` in a template is how a second, unmanaged icon set starts.
      # The exempt files implement the vendored set. `icons.ex` holds the
      # embedded SVG markup, while `ui.ex` and `core_components.ex` render it.
      # The assertions below fail if an exemption stops being icon plumbing.
      renderers = ["lib/openagents_web/components/core_components.ex"]

      for renderer <- renderers do
        assert File.read!(renderer) =~ "OpenAgentsWeb.Icons.fetch!",
               "the inline-SVG exemption for #{renderer} is stale; it no longer renders the vendored set"
      end
      # The exempt files implement the vendored set. `icons.ex` holds embedded
      # markup and `ui.ex` renders the one governed root element.

      offenders =
        "lib/openagents_web/**/*.{ex,heex}"
        |> Path.wildcard()
        |> Enum.reject(&String.ends_with?(&1, ["ui.ex", "icons.ex"]))
        |> Enum.reject(&(&1 in renderers))
        |> Enum.filter(fn path -> path |> File.read!() |> String.contains?("<svg") end)

      assert offenders == [],

  end

  test "the sidebar is present on component pages", %{conn: conn} do
    {:ok, view, _html} = live(conn, ~p"/components/button")
    {:ok, view, _html} = live(conn, ~p"/components/openagents-button")

    assert has_element?(view, ~s{nav[aria-label="Component library"]})
    assert has_element?(view, ~s{a[href="/components/icons"]})

  end

  test "the button page renders the button variants", %{conn: conn} do
    {:ok, view, _html} = live(conn, ~p"/components/button")
    {:ok, view, _html} = live(conn, ~p"/components/openagents-button")

    assert has_element?(view, "#demo-button-primary", "Primary")
    assert has_element?(view, "#demo-button-disabled")
  end

  test "the input page renders the demo form", %{conn: conn} do
    {:ok, view, _html} = live(conn, ~p"/components/input")
    {:ok, view, _html} = live(conn, ~p"/components/openagents-input")

    assert has_element?(view, "#component-form")
  end

  test "info flash action shows the flash", %{conn: conn} do
    {:ok, view, _html} = live(conn, ~p"/components/flash")
  test "the catalog exposes no nonfunctional theme control", %{conn: conn} do
    {:ok, view, _html} = live(conn, ~p"/components")

    view
    |> element("#demo-flash-info")
    |> render_click()

    assert render(view) =~ "This is the info flash from CoreComponents."
    refute has_element?(view, ~s{a[href="/components/theme-toggle"]})
  end
end

  test "the comment count only renders once an issue has comments", %{conn: conn} do
    {:ok, issue} = Issues.create_issue(%{"title" => "Chatty"})

    {:ok, _view, html} = live(conn, ~p"/OpenAgentsInc/openagents.com/issues")
    refute html =~ "hero-chat-bubble-left"
    {:ok, view, _html} = live(conn, ~p"/OpenAgentsInc/openagents.com/issues")
    refute has_element?(view, ~s{svg[data-icon="comment"]})

    {:ok, _} =
      Issues.create_comment(%{

        user: %{"login" => "ada"}
      })

    {:ok, _view, html} = live(conn, ~p"/OpenAgentsInc/openagents.com/issues")
    assert html =~ "hero-chat-bubble-left"
    {:ok, view, _html} = live(conn, ~p"/OpenAgentsInc/openagents.com/issues")
    assert has_element?(view, ~s{svg[data-icon="comment"]})
  end

  test "patching to the closed filter swaps the stream and the current marker", %{conn: conn} do

1482	1482
1483	1483		`### UI-003 — Product surfaces render only through the sanctioned component library`
1484	1484
1485		-	`Status: Proposed`
	1485	+	`Status: Current`
1486	1486
1487	1487		OpenAgents's interface is built from `OpenAgentsWeb.UI` components over Basecoat
1488		-	`primitives vendored at a pinned tag and styled by the OpenAgents pack. Product`
1489		-	`surfaces do not author component-level CSS classes; hand-authored CSS is`
1490		-	`confined to app-shell layout and the one sanctioned brand animation. No`
	1488	+	`primitives vendored at a pinned tag and styled by the OpenAgents pack. Every`
	1489	+	`web import exposes that one module; product surfaces compose its primitives`
	1490	+	`with surface-specific layout classes from the sanctioned style pack. No`
1491	1491		`component accepts provider identifiers or private recall content as an`
1492	1492		attribute; tool activity reaches `event_header` only as the bounded projection
1493	1493		`UI-002 sanctions, so UI-002 cannot be violated through a primitive.`

1501	1501		`The shared corner radius, the self-hosted Geist faces, the single dark theme,`
1502	1502		`and the reserved semantic color meanings hold across every component. Depth is`
1503	1503		`limited to the sanctioned lift, halo, and state-ring tokens.`
1504		-	Adopting an additional Basecoat component requires a `docs/component-library.md` change and an
1505		-	`explicit per-component import.`
1506		-
1507		-	This is the Gate 4 target. `OpenAgentsWeb.UI` and the OpenAgents style pack are
1508		-	implemented, but generated `OpenAgentsWeb.CoreComponents`, its legacy icon
1509		-	`entry point, and a nonfunctional theme control still have catalogued callers.`
1510		-	`Until those callers are migrated or narrowly justified, this invariant cannot`
1511		-	`be used as proof that the product has one fully enforced component path.`
	1504	+	`Adopting an additional Basecoat component requires a`
	1505	+	`docs/component-library.md` change and an explicit per-component import. The
	1506	+	`application exposes no light/system theme control while the palette is`
	1507	+	`dark-only. Apps SDK UI glyphs are preferred; the pinned Heroicons fallback has`
	1508	+	`an explicit inventory and no current product call sites.`
1512	1509
1513	1510		Evidence: `assets/vendor/basecoat/README.md`, `assets/css/openagents.css`,
1514		-	`priv/static/fonts`, `OpenAgentsWeb.UI`, `OpenAgentsWeb.UITest`,
1515		-	`OpenAgentsWeb.UIGalleryLiveTest`, and `test/openagents_web/ui_test.exs`.
	1511	+	`priv/static/fonts`, `OpenAgentsWeb.UI`, `OpenAgentsWeb.ComponentCatalog`,
	1512	+	`OpenAgentsWeb.UITest`, `OpenAgentsWeb.UIGalleryLiveTest`,
	1513	+	`test/openagents_web/component_catalog_test.exs`,
	1514	+	`test/openagents_web/icon_affordances_test.exs`, and
	1515	+	`assets/test/css_contract_test.mjs`.
1516	1516
1517	1517		`### LEADERBOARD-001 — The public board publishes one bounded projection`
1518	1518

305	285		`align-items: center;`
306	286		`min-height: 32px;`
307	287		`padding-inline: 16px;`
308		-	`background: var(--color-base-200);`
	288	+	`background: var(--ink-surface);`
309	289		`color: var(--text-muted);`
310	290		`font-size: 0.75rem;`
311	291		`font-weight: 600;`

1116	1147		`- [x] The repository has one accurate architecture narrative.`
1117	1148		`- [x] Every remaining Sarah reference is intentional and specific.`
1118	1149		`- [x] All documentation links and invariant evidence resolve.`
1119		-	`- [ ] The application has one Markdown parser, component system, and documented`
	1150	+	`- [x] The application has one Markdown parser, component system, and documented`
1120	1151		`two-tier icon policy.`
1121		-	`- [ ] The dark-only palette has no nonfunctional theme control.`
	1152	+	`- [x] The dark-only palette has no nonfunctional theme control.`
1122	1153		`- [ ] Runtime configuration is typed, redacted, and staging-specific.`
1123	1154		`- [ ] Every route has an explicit authority class.`
1124	1155		`- [ ] GitHub token behavior matches code, UI disclosure, and data rights.`

1271	1302		`deliberately dark-only without a nonfunctional toggle, control the palette-file`
1272	1303		`rename as a visual migration, and reject conflicting cascade-layer behavior.`
1273	1304
1274		-	`Heroicons. Gate 4 says "Remove Heroicons and its dependency after the`
1275		-	`remaining issue and layout surfaces use vendored icons." The owner's ruling on`
1276		-	`2026-08-19 was Apps SDK icons preferred, heroicons as backup — i.e. retained`
1277		-	deliberately. `{:heroicons, ...}` is still in `mix.exs`. One of the two should
1278		-	`move; the plan should not quietly overwrite a stated decision.`
1279		-
1280		-	`The palette is dark-only, today. Gate 4's UI consolidation does not mention`
1281		-	`it, but removing DaisyUI removed the only light theme in the application. Sarah's`
1282		-	palette has no light variant. `data-theme` still runs and the toggle still
1283		-	`switches, but it no longer repaints anything. This is a live user-visible state,`
1284		-	not a pending task, and `theme_toggle/1`'s docstring now says so. Inventing a
1285		-	`light Sarah palette is a design decision that needs an owner.`
1286		-
1287		-	`Basecoat is load-bearing for the palette, not just components. Gate 4 says to`
1288		-	`"rename the style pack after generic application components no longer depend on`
1289		-	the Sarah name." Worth knowing before that rename: `sarah.css` now defines the
1290		-	palette primitives (`--accent`, `--ink-void`, `--text-primary`, `--line-strong`,
1291		-	`…), not merely aliases. Prior to the DaisyUI removal it only aliased them and`
1292		-	`nothing defined them — the entire Sarah palette silently resolved to nothing and`
1293		-	`DaisyUI's theme was carrying every colour. Renaming that file is therefore a`
1294		-	`palette migration, not a cosmetic rename.`
	1305	+	`Heroicons, resolved. Product surfaces now use Apps SDK glyphs. Heroicons`
	1306	+	`remains the deliberate fallback, is pinned to an immutable revision, and has no`
	1307	+	current product call sites. `docs/ICONS.md` governs and inventories exceptions.
	1308	+
	1309	+	`The palette is dark-only, resolved. The application removed its theme`
	1310	+	`control, browser theme state, and theme selectors. A light palette remains a`
	1311	+	`separate owner-approved design project.`
	1312	+
	1313	+	The palette file, resolved. `assets/css/openagents.css` owns the palette
	1314	+	`contract and loads after individually imported Basecoat structure. The retired`
	1315	+	`compatibility aliases are gone. Future renames remain controlled palette`
	1316	+	`migrations, not cosmetic changes.`
1295	1317
1296	1318		`Why DaisyUI had to be removed rather than layered under. Recording this so a`
1297	1319		`similar library is not reintroduced under a different name: DaisyUI emits`

25	25		- You failed to follow the Authenticated Routes guidelines, or you failed to pass `current_scope` to `<Layouts.app>`
26	26		- Always fix the `current_scope` error by moving your routes to the proper `live_session` and ensure you pass `current_scope` as needed
27	27		- Phoenix v1.8 moved the `<.flash_group>` component to the `Layouts` module. You are forbidden from calling `<.flash_group>` outside of the `layouts.ex` module
28		-	- Out of the box, `core_components.ex` imports an `<.icon name="hero-x-mark" class="w-5 h-5"/>` component for hero icons. Always use the `<.icon>` component for icons, never use `Heroicons` modules or similar
29		-	- Always use the imported `<.input>` component for form inputs from `core_components.ex` when available. `<.input>` is imported and using it will save steps and prevent errors
	28	+	- Render icons only through `OpenAgentsWeb.UI.icon/1`. Prefer the vendored Apps SDK set. Use a `hero-*` fallback only when `docs/ICONS.md` records why the preferred set has no suitable glyph
	29	+	- Always use the imported `OpenAgentsWeb.UI.input/1` component for form inputs. It accepts `Phoenix.HTML.FormField` values and unwrapped raw controls
30	30		- If you override the default input classes (`<.input class="myclass px-2 py-1 rounded-lg">)`) class with your own values, no default classes are inherited, so your
31	31		`custom classes must fully style the input`
32	32

43	43		- Always use and maintain this import syntax in the app.css file for projects generated with `phx.new`
44	44		- Never use `@apply` when writing raw css
45	45		- There is exactly one component system: vendored Basecoat plus OpenAgents style pack. Basecoat lives in `assets/vendor/basecoat/components/` and carries structure (display, padding, min-height); `assets/css/openagents.css` carries OpenAgents' identity (motion tokens, radius scale, colour, the notched variant, corner frames) and must stay the last import so its declarations win.
46		-	- Reach for `OpenAgentsWeb.UI` first. It wraps that CSS in nineteen ready primitives — `button/1`, `card/1`, `badge/1`, `alert/1`, `input/1`, `textarea/1`, `label/1`, `field/1`, `avatar/1`, `menu/1`, `empty/1`, `kbd/1`, and the rest. Fall back to hand-written classes only when no primitive covers the shape.
	46	+	- Reach for `OpenAgentsWeb.UI` first. It wraps that CSS in 22 ready primitives — `button/1`, `card/1`, `badge/1`, `alert/1`, `input/1`, `textarea/1`, `label/1`, `field/1`, `header/1`, `table/1`, `list/1`, `avatar/1`, `menu/1`, `empty/1`, `kbd/1`, and the rest. Fall back to hand-written classes only when no primitive covers the shape.
47	47		- Variants are data attributes, not classes. A control is `class="btn"` plus `data-variant="primary"` / `data-size="sm"` / `data-tone="danger"`. Never invent `btn-primary`-style variant classes; they defeat the whole point of the split.
48	48		- Never add a second component library — DaisyUI above all. DaisyUI was removed deliberately. It emitted flat `.btn` rules (setting background, colour, border) from a cascade layer that outranked every `.btn[data-variant=…]` in `openagents.css`, so all eight UI button variants rendered identically on staging. Any library with the same shape will do the same thing again.
49	49		- Import Basecoat components individually, one `@import "../vendor/basecoat/components/<name>.css"` per component a surface actually uses. Component CSS lands in `@layer components` and ships whether or not the class appears in markup, so the list is a budget. Never import `basecoat.css`, `basecoat-base.css`, or `basecoat-components.css` — each pulls in all 39 components at once.
50		-	- The palette is the token ladder at the top of `app.css` (`--ink-void` / `--ink-surface` / `--ink-raised`, the text and line tiers, and the four semantic colours). It is dark-only. Prefer the Basecoat utility names built on it — `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, `border-border` — over the older `base-100`/`base-content` aliases, which are kept only so unconverted surfaces keep resolving.
	50	+	- The palette is the token ladder at the top of `app.css` (`--ink-void` / `--ink-surface` / `--ink-raised`, the text and line tiers, and the four semantic colours). It is dark-only. Use the Basecoat utility names built on it — `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, and `border-border`. The retired compatibility aliases no longer exist
51	51		`- Add custom Tailwind only when the design is unique to OpenAgents and no primitive fits.`
52	52		`- Out of the box only the app.js and app.css bundles are supported`
53	53		- You cannot reference an external vendor'd script `src` or link `href` in the layouts

71	71		OpenAgents style pack in `assets/css/openagents.css`, and reusable HEEx
72	72		components in `OpenAgentsWeb.UI`. The live component inventory is available at
73	73		`/components`; [docs/component-library.md](docs/component-library.md) records
74		-	`the current transition and extension rules.`
	74	+	`the supported primitives and extension rules. Follow the`
	75	+	`[icon policy](docs/ICONS.md) for the governed glyph tiers.`
75	76
76	77		`Fonts and icons are self-hosted. Do not add a remote font, icon font, second`
77	78		`component library, or unreviewed browser script.`

22	22		`* These carry the structure (display, padding, min-height, background) that`
23	23		`* openagents.css deliberately does not set — its .btn only adds gap, border,`
24	24		`* radius, colour, font, and transition on top. With DaisyUI gone they are the`
25		-	`* only source of that geometry, so nothing here is optional. This list is`
26		-	* OpenAgents, plus `table` for `CoreComponents.table/1`. */
	25	+	`* only source of that geometry, so nothing here is optional. This list is the`
	26	+	* exact structure consumed by `OpenAgentsWeb.UI`. */
27	27		`@import "../vendor/basecoat/base/base.css";`
28	28		`@import "../vendor/basecoat/components/button.css";`
29	29		`@import "../vendor/basecoat/components/input.css";`

48	48		`/* Required for Tailwind to automatically pick up changes in colocated CSS files in dev */`
49	49		`@source "../../_build/dev/phoenix-colocated/openagents/*/";`
50	50
51		-	`/* A Tailwind plugin that makes "hero-#{ICON}" classes available.`
52		-	`The heroicons installation itself is managed by your mix.exs */`
	51	+	`/* Deliberate second-tier icon fallback. Product call sites prefer the vendored`
	52	+	`* Apps SDK set; docs/ICONS.md inventories every exceptional Heroicons use. */`
53	53		`@plugin "../vendor/heroicons";`
54	54
55	55		`/* ── Token ladder ───────────────────────────────────────────────────────────`

69	69		`* (--ink-surface), elevated components another step up (--ink-raised). New`
70	70		`* surfaces take a rung; they do not invent a fourth.`
71	71		`*`
72		-	* The palette is dark-only, as OpenAgents is (`color-scheme: dark`). The
73		-	* `data-theme` plumbing in root.html.heex still runs, but there is no second
74		-	`* light palette behind it any more — DaisyUI's was the only one, and OpenAgents`
75		-	`* ships no light variant to replace it with.`
	72	+	* The palette is dark-only, as OpenAgents is (`color-scheme: dark`). A light
	73	+	`* palette requires a separate owner-approved design project.`
76	74		`*/`
77	75		`:root {`
78	76		`color-scheme: dark;`

129	127		`--line-strong: oklch(36.455% 0.0696 264.888); /* exception; best fit 20% */`
130	128		`}`
131	129
132		-	`/* Utility namespaces on top of the ladder.`
133		-	`*`
134		-	* `base-100/200/300` and `base-content` were DaisyUI's surface vocabulary and
135		-	`* are still spoken by surfaces this change did not restyle (the component`
136		-	`* catalog, the marketing home template, and the sidebar/docs/chat CSS at the`
137		-	`* foot of this file). They are kept as aliases onto the three surface rungs so`
138		-	`* that vocabulary keeps resolving; they are now names for OpenAgents tokens, not a`
139		-	* second palette. Prefer Basecoat's own `background` / `card` / `foreground` /
140		-	* `border` names in new markup.
141		-	`*`
142		-	`* The semantic four are OpenAgents, not DaisyUI's, and have no Basecoat`
	130	+	`/* The semantic four are OpenAgents, not DaisyUI's, and have no Basecoat`
143	131		* equivalent — `--color-destructive` covers danger, but there is no success,
144	132		`* warning, or info in the Basecoat base. */`
145	133		`@theme {`
146		-	`--color-base-100: var(--ink-void);`
147		-	`--color-base-200: var(--ink-surface);`
148		-	`--color-base-300: var(--ink-raised);`
149		-	`--color-base-content: var(--text-primary);`
150		-
151	134		`--color-success: var(--success);`
152	135		`--color-warning: var(--warning);`
153	136		`--color-info: var(--info);`

159	142		`@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);`
160	143		`@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);`
161	144
162		-	`/* Use the data attribute for dark mode */`
163		-	`@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`
164		-
165	145		`/* Make LiveView wrapper divs transparent for layout */`
166	146		`[data-phx-session], [data-phx-teleported-src] { display: contents }`
167	147

175	155		`width: 280px;`
176	156		`height: 100%;`
177	157		`overflow: hidden;`
178		-	`border-right: 1px solid var(--color-base-300);`
179		-	`background: var(--color-base-200);`
	158	+	`border-right: 1px solid var(--ink-raised);`
	159	+	`background: var(--ink-surface);`
180	160		`}`
181	161
182	162		`.sidebar-header {`

192	172		`flex: none;`
193	173		`font-size: 1rem;`
194	174		`font-weight: 700;`
195		-	`color: var(--color-base-content);`
	175	+	`color: var(--text-primary);`
196	176		`}`
197	177
198	178		`.sidebar-nav {`

217	197		`padding-inline: 14px;`
218	198		`padding-block: 6px;`
219	199		`border-radius: 10px;`
220		-	`color: var(--color-base-content);`
	200	+	`color: var(--text-primary);`
221	201		`font-size: 0.875rem;`
222	202		`font-weight: 400;`
223	203		`line-height: 1.25rem;`

226	206
227	207		`@media (hover: hover) {`
228	208		`.sidebar-row:hover {`
229		-	`background: var(--color-base-300);`
	209	+	`background: var(--ink-raised);`
230	210		`color: #fff;`
231	211		`}`
232	212		`}`
233	213
234	214		`.sidebar-row:has(.sidebar-row__hit:active) {`
235		-	`background: var(--color-base-300);`
	215	+	`background: var(--ink-raised);`
236	216		`}`
237	217
238	218		`.sidebar-row[data-selected] {`
239		-	`background: var(--color-base-300);`
	219	+	`background: var(--ink-raised);`
240	220		`}`
241	221
242	222		`.sidebar-row--static,`

247	227		`.sidebar-row--static:hover,`
248	228		`.sidebar-row--empty:hover {`
249	229		`background: transparent;`
250		-	`color: var(--color-base-content);`
	230	+	`color: var(--text-primary);`
251	231		`}`
252	232
253	233		`.sidebar-row__hit {`

490	470		`border: 0;`
491	471		`border-radius: 18px;`
492	472		`background: transparent;`
493		-	`color: var(--color-base-content);`
	473	+	`color: var(--text-primary);`
494	474		`font-family: inherit;`
495	475		`font-size: 0.9375rem;`
496	476		`line-height: 1.5rem;`

320	300		`gap: 10px;`
321	301		`min-height: 52px;`
322	302		`padding: 8px;`
323		-	`border-top: 1px solid var(--color-base-300);`
	303	+	`border-top: 1px solid var(--ink-raised);`
324	304		`}`
325	305
326	306		`/* Docs layout */`

337	317		`flex: none;`
338	318		`flex-direction: column;`
339	319		`gap: 12px;`
340		-	`border-right: 1px solid var(--color-base-300);`
341		-	`background: var(--color-base-200);`
	320	+	`border-right: 1px solid var(--ink-raised);`
	321	+	`background: var(--ink-surface);`
342	322		`padding: 16px 0;`
343	323		`}`
344	324

376	356		`.docs-sidebar__link {`
377	357		`padding: 6px 8px;`
378	358		`border-radius: 8px;`
379		-	`color: var(--color-base-content);`
	359	+	`color: var(--text-primary);`
380	360		`font-size: 0.875rem;`
381	361		`line-height: 1.25rem;`
382	362		`text-decoration: none;`

384	364
385	365		`@media (hover: hover) {`
386	366		`.docs-sidebar__link:hover {`
387		-	`background: var(--color-base-300);`
	367	+	`background: var(--ink-raised);`
388	368		`color: #fff;`
389	369		`}`
390	370		`}`

436	416		`}`
437	417
438	418		`.message-content {`
439		-	`color: var(--color-base-content);`
	419	+	`color: var(--text-primary);`
440	420		`font-size: 0.9375rem;`
441	421		`line-height: 1.5rem;`
442	422		`white-space: pre-wrap;`

454	434
455	435		`.composer {`
456	436		`padding: 12px 16px;`
457		-	`border-top: 1px solid var(--color-base-300);`
458		-	`background: var(--color-base-100);`
	437	+	`border-top: 1px solid var(--ink-raised);`
	438	+	`background: var(--ink-void);`
459	439		`}`
460	440
461	441		`.composer-card {`

463	443		`max-width: 720px;`
464	444		`margin: 0 auto;`
465	445		`padding: 6px;`
466		-	`border: 1px solid var(--color-base-300);`
	446	+	`border: 1px solid var(--ink-raised);`
467	447		`border-radius: 24px;`
468		-	`background: var(--color-base-200);`
	448	+	`background: var(--ink-surface);`
469	449		`box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);`
470	450		`}`
471	451

370	370
371	371		`### Complete the Markdown parser migration`
372	372
373		-	`The integration plan says MDEx replaced Earmark, while the application still`
374		-	`depends on and calls Earmark. Hex marks Earmark as retired and no longer`
375		-	`maintained. Migrate to MDEx or another maintained parser before staging, then`
376		-	`verify sanitization, security history, and output compatibility.`
	373	+	`At the initial audit, the integration plan said MDEx replaced Earmark while the`
	374	+	`application still depended on and called the retired parser. Gate 4 replaces`
	375	+	`that implementation with MDEx and verifies sanitization, maintained status,`
	376	+	`and output compatibility.`
377	377
378	378		`Whichever parser remains must pass tests for:`
379	379

391	391		- Choose the final generic module name: preferably `OpenAgentsWeb.UI` once the
392	392		`source-project migration is complete.`
393	393		`- Move all product surfaces onto that component system.`
394		-	- Keep `CoreComponents` only as a temporary compatibility layer with an explicit
395		-	`removal list.`
	394	+	`- Remove the generated compatibility component module after migrating every`
	395	+	`caller. Do not recreate a parallel component surface.`
396	396		`- Remove DaisyUI aliases and compatibility tokens after every surface has`
397	397		`migrated.`
398	398		`- Use one documented icon policy: Apps SDK icons are preferred, and Heroicons`

1305	1327		`acceptance test for Gate 4's "one component system", not merely counting the`
1306	1328		libraries in `mix.exs`.
1307	1329
	1330	+	Cascade behavior, resolved. `assets/test/css_contract_test.mjs` compiles the
	1331	+	`actual bundle and checks selector order, variant survival, retired aliases, and`
	1332	+	`theme absence. The gate now verifies behavior rather than dependency names.`
	1333	+
1308	1334		`## A5. Evidence for Gate 5, from failures already observed`
1309	1335
1310	1336		`Gate 5's "fail closed" requirement is correct and this is what its absence`

117	117		`produce a bounded durable failure outcome instead of abandoning an in-flight`
118	118		`turn, work item, or voice session.`
119	119
	120	+	`## Untrusted Markdown boundary`
	121	+
	122	+	`Assistant and repository Markdown enters HTML through`
	123	+	`OpenAgents.Markdown.to_html/2` only. MDEx parses CommonMark with dangerous
	124	+	`rendering disabled, Ammonia applies exact tag, attribute, and URL-scheme`
	125	+	`allowlists, and the application normalizes links before Phoenix marks the`
	126	+	`result safe. Independent input, syntax-tree nesting, and output limits produce`
	127	+	`a bounded escaped fallback instead of partial markup. The same function handles`
	128	+	`streaming completion and persisted text, so a completed message does not change`
	129	+	`when its durable projection replaces the stream.`
	130	+
120	131		`## Forge planes`
121	132
122	133		The forge contains two separate planes within the `OpenAgents.Forge`

2	2
3	3		`Date: 2026-08-20`
4	4
5		-	`Status: Current inventory; consolidation continues in hardening Gate 4`
	5	+	`Status: Current`
6	6
7	7		The public catalog at `/components` is the executable inventory of reusable
8	8		HEEx components. `OpenAgentsWeb.ComponentCatalog` supplies its navigation,

21	21		`\| Component \| Purpose \|`
22	22		`\| --- \| --- \|`
23	23		\| `button/1`, `text_button/1` \| Boxed, link, chip, destructive, and primary actions \|
24		-	\| `input/1`, `textarea/1`, `label/1`, `field/1` \| Form controls and labelled groups \|
	24	+	\| `input/1`, `textarea/1`, `label/1`, `field/1` \| Form-aware controls and labelled groups \|
	25	+	\| `header/1`, `table/1`, `list/1` \| Page headings and structured data \|
25	26		\| `alert/1`, `badge/1`, `status_indicator/1` \| Explicit feedback and semantic state \|
26	27		\| `card/1`, `frame/1` \| Bounded content and decorative framing \|
27	28		\| `avatar/1`, `item/1`, `event_header/1` \| Identity and activity rows \|
28	29		\| `empty/1`, `kbd/1`, `menu/1` \| Empty states, key hints, and native-popover menus \|
29	30		\| `audio_player/1` \| Accessible native audio control in the product frame \|
30		-	\| `icon/1` \| Glyphs from the vendored Apps SDK icon set \|
	31	+	\| `icon/1` \| Governed Apps SDK glyphs and documented Heroicons fallbacks \|
31	32
32	33		`OpenAgentsWeb.Layouts` owns `app/1`, `flash_group/1`, `command_bar/1`,
33		-	`account_control/1`, and the currently catalogued theme control. Product
34		-	templates begin with `Layouts.app` and never render `flash_group/1` directly.
	34	+	and `account_control/1`. Product templates begin with `Layouts.app` and never
	35	+	render `flash_group/1` directly. The staging palette is deliberately dark-only,
	36	+	`so the application exposes no theme control or browser theme state.`
35	37
36		-	`## Transitional components`
	38	+	`## Specialized components`
37	39
38		-	`OpenAgentsWeb.CoreComponents` still contains the Phoenix-generated `button`,
39		-	`input`, `header`, `table`, `list`, `icon`, and `flash` components. The catalog
40		-	`shows these separately because their names overlap the OpenAgents primitives.`
41		-	`They are compatibility surface, not a second design system. Gate 4 must either`
42		-	migrate each remaining caller to `OpenAgentsWeb.UI` or document a narrow reason
43		-	`to retain the generated helper.`
44		-
45		-	`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the one catalogued
	40	+	`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the only catalogued
46	41		`forge-specific component. Surface-specific components can live in a focused`
47	42		`module when they encode real domain composition rather than a generic control.`
48	43

55	50		`component needs it. Never import the aggregate Basecoat bundles.`
56	51		4. Put OpenAgents-owned component styles in `assets/css/openagents.css`; do not
57	52		patch `assets/vendor/basecoat/`.
58		-	5. Use `OpenAgentsWeb.UI.icon/1` and the vendored icon set. Do not add an icon
59		-	`font, another glyph library, or handwritten SVG in a template.`
	53	+	5. Use `OpenAgentsWeb.UI.icon/1` and follow the two-tier policy in `ICONS.md`.
	54	+	`Do not add an icon font, a third glyph library, or handwritten SVG in a`
	55	+	`template.`
60	56		`6. Give every icon-only action an accessible name. Decorative icons beside text`
61	57		`remain hidden from accessibility APIs.`
62	58		7. Add the component to `OpenAgentsWeb.ComponentCatalog`, add its demo to

65	61		8. Keep forms on `Phoenix.Component.to_form/2`; use LiveView streams for
66	62		`collections and stable DOM IDs for testable controls.`
67	63
68		-	`## Current catalog gaps`
	64	+	`## Domain composition candidates`
69	65
70	66		`Issue, project, and code surfaces currently compose generic controls directly.`
71	67		`Create new domain components only when repeated behavior justifies them. Likely`
72	68		`candidates are issue rows, comment threads, label controls, project columns,`
73	69		`repository breadcrumbs, file rows, commit rows, and bounded diff panels.`
74	70
75		-	`The Gate 4 consolidation also owns these known transitional issues:`
76		-
77		-	`- Remove the generated component/icon path after its callers are migrated.`
78		-	`- Enforce the repository's final two-tier icon policy in code and tests.`
79		-	`- Remove the nonfunctional light/system theme choice if the shipped palette`
80		-	`remains dark-only.`
81		-	`- Prove component variants and semantic colors in compiled CSS rather than by`
82		-	`class-name assertions alone.`
	71	+	`The compiled CSS contract test proves that Basecoat geometry precedes the`
	72	+	`OpenAgents style pack, every supported button variant survives compilation, no`
	73	+	`retired palette alias survives, and no theme selector enters the bundle.`
83	74
84	75		`See [the UI roadmap](issues-projects-ui-roadmap.md),`
85	76		`[ADR 0005](decisions/0005-use-basecoat-and-one-component-system.md), and the`

6	6
7	7		`## Untrusted input`
8	8
9		-	`Model output is not trusted. Earmark passes raw HTML straight through and will`
10		-	happily emit a `javascript:` href, so neither its HTML output nor its
11		-	`transformer is used. Instead the parsed AST is walked against an allowlist of`
12		-	`tags and attributes, and this module writes the HTML itself so every text node`
13		-	`is escaped here rather than somewhere further down. Anything not on the`
14		-	`allowlist is dropped, and its text is kept.`
	9	+	`Model output is not trusted. MDEx parses CommonMark with dangerous rendering`
	10	+	`disabled, then Ammonia applies a second exact allowlist for tags, attributes,`
	11	+	and URL schemes. Raw HTML is refused, dangerous links lose their `href`, and
	12	+	`external links receive fixed isolation attributes. Input size, AST nesting,`
	13	+	`and rendered output are independently bounded before the result is marked`
	14	+	`safe.`
15	15
16	16		`## Partial input`
17	17

20	20		`Rendering that literally is what produces the raw asterisks a reader sees`
21	21		`today; rendering it naively makes the layout jump as each delimiter lands.`
22	22
23		-	`complete/1` closes the open constructs before parsing, so the parser always
	23	+	`complete/1` closes the open constructs before parsing, so MDEx always
24	24		sees a well-formed document. The approach is taken from Streamdown's `remend`
25	25		`package: scan once, track what is open, and close it — while respecting`
26	26		`escapes, refusing to close inside an open code fence, and refusing to close a`

28	28		`matter more than the completeness.`
29	29		`"""`
30	30
31		-	`@block_tags ~w(p ul ol li blockquote pre h1 h2 h3 h4 h5 h6 hr table thead tbody tr th td)`
32		-	`@inline_tags ~w(strong em del code a br)`
33		-	`@allowed_tags @block_tags ++ @inline_tags`
34		-
35		-	`@void_tags ~w(br hr)`
36		-
37		-	# `code` carries Earmark's own `inline` marker; everything else is dropped.
38		-	`@allowed_attributes %{"a" => ["href"], "code" => ["class"], "pre" => ["class"]}`
39		-
	31	+	`@allowed_tags ~w(a blockquote br code del em h1 h2 h3 h4 h5 h6 hr li ol p pre strong table tbody td th thead tr ul)`
40	32		`@safe_schemes ~w(http https mailto)`
41	33
	34	+	`@maximum_input_bytes 1_000_000`
	35	+	`@maximum_output_bytes 2_000_000`
	36	+	`@maximum_nesting_depth 32`
	37	+	`@maximum_fallback_bytes 64_000`
	38	+
	39	+	`@mdex_options [`
	40	+	`extension: [strikethrough: true, table: true],`
	41	+	`parse: [relaxed_autolinks: false],`
	42	+	`render: [hardbreaks: true, unsafe: false, escape: false],`
	43	+	`sanitize: [`
	44	+	`tags: @allowed_tags,`
	45	+	`clean_content_tags: ~w(script style),`
	46	+	`tag_attributes: %{`
	47	+	`"a" => ~w(href target),`
	48	+	`"code" => ~w(class),`
	49	+	`"pre" => ~w(class)`
	50	+	`},`
	51	+	`generic_attributes: [],`
	52	+	`url_schemes: @safe_schemes,`
	53	+	`url_relative: :passthrough,`
	54	+	`link_rel: "noopener noreferrer nofollow",`
	55	+	`set_tag_attribute_values: %{"a" => %{"target" => "_blank"}}`
	56	+	`]`
	57	+	`]`
	58	+
	59	+	`@empty_link ~s(<a href="" target="_blank" rel="noopener noreferrer nofollow">)`
	60	+
42	61		`@emphasis_markers ~w(* ___ __ ~~ * _)`
43	62
44	63		`@doc """`

49	68		`"""`
50	69		`@spec to_html(String.t(), keyword()) :: {:safe, iodata()}`
51	70		`def to_html(text, options \\ []) when is_binary(text) do`
52		-	`text`
53		-	`\|> then(fn raw -> if options[:streaming], do: complete(raw), else: raw end)`
54		-	`\|> parse()`
55		-	`\|> Enum.map(&render_node/1)`
56		-	`\|> then(&{:safe, &1})`
57		-	`end`
	71	+	`cond do`
	72	+	`byte_size(text) > @maximum_input_bytes ->`
	73	+	`limited(text, "input exceeds #{@maximum_input_bytes} bytes")`
58	74
59		-	`defp parse(text) do`
60		-	`case Earmark.Parser.as_ast(text, gfm: true, breaks: true) do`
61		-	`{:ok, ast, _messages} -> ast`
62		-	`{:error, ast, _messages} -> ast`
	75	+	`true ->`
	76	+	`source = if options[:streaming], do: complete(text), else: text`
	77	+	`render(source)`
63	78		`end`
64	79		`end`
65	80
66		-	`# ── Rendering ──────────────────────────────────────────────────────────────`
67		-
68		-	`defp render_node(text) when is_binary(text), do: escape(text)`
	81	+	`defp render(text) do`
	82	+	`with {:ok, document} <- MDEx.parse_document(text, @mdex_options),`
	83	+	`:ok <- validate_nesting(document),`
	84	+	`document <- normalize_links(document),`
	85	+	`{:ok, rendered} <- MDEx.to_html(document),`
	86	+	`rendered <- String.replace(rendered, @empty_link, "<a>"),`
	87	+	`:ok <- validate_output(rendered) do`
	88	+	`{:safe, rendered}`
	89	+	`else`
	90	+	`{:error, :nesting_limit} ->`
	91	+	`limited(text, "nesting exceeds #{@maximum_nesting_depth} levels")`
69	92
70		-	`defp render_node({tag, attributes, children, _meta}) when tag in @allowed_tags do`
71		-	`rendered = Enum.map(children, &render_node/1)`
	93	+	`{:error, :output_limit} ->`
	94	+	`limited(text, "rendered output exceeds #{@maximum_output_bytes} bytes")`
72	95
73		-	`cond do`
74		-	`tag in @void_tags -> ["<", tag, attributes(tag, attributes), " />"]`
75		-	`true -> ["<", tag, attributes(tag, attributes), ">", rendered, "</", tag, ">"]`
	96	+	`{:error, _parse_or_render_error} ->`
	97	+	`limited(text, "input could not be rendered safely")`
76	98		`end`
77	99		`end`
78	100
79		-	`# An unknown tag keeps its text and loses its markup, which is the safe`
80		-	`# direction: a reader still sees the words.`
81		-	`defp render_node({_tag, _attributes, children, _meta}), do: Enum.map(children, &render_node/1)`
82		-
83		-	`defp render_node(_other), do: []`
84		-
85		-	`defp attributes(tag, attributes) do`
86		-	`allowed = Map.get(@allowed_attributes, tag, [])`
	101	+	`defp validate_nesting(document) do`
	102	+	`if nesting_depth(document) <= @maximum_nesting_depth,`
	103	+	`do: :ok,`
	104	+	`else: {:error, :nesting_limit}`
	105	+	`end`
87	106
88		-	`attributes`
89		-	`\|> Enum.filter(fn {name, _value} -> name in allowed end)`
90		-	`\|> Enum.flat_map(&attribute(tag, &1))`
	107	+	`defp nesting_depth(%{nodes: nodes}) when is_list(nodes) do`
	108	+	`1 + Enum.reduce(nodes, 0, fn node, depth -> max(depth, nesting_depth(node)) end)`
91	109		`end`
92	110
93		-	`defp attribute("a", {"href", value}) do`
94		-	`case safe_url(value) do`
95		-	`nil ->`
96		-	`[]`
	111	+	`defp nesting_depth(_leaf), do: 1`
97	112
98		-	`url ->`
99		-	`# Model output can link anywhere, so a link leaves without carrying the`
100		-	`# referrer or a handle on this window.`
101		-	`[~s( href="), escape(url), ~s(" rel="noopener noreferrer nofollow" target="_blank")]`
102		-	`end`
	113	+	`defp normalize_links(document) do`
	114	+	`MDEx.Document.update_nodes(document, MDEx.Link, fn link ->`
	115	+	`%{link \| url: safe_url(link.url)}`
	116	+	`end)`
103	117		`end`
104	118
105		-	`defp attribute(_tag, {name, value}), do: [" ", name, ~s(="), escape(value), ~s(")]`
106		-
107	119		`defp safe_url(value) do`
108	120		`trimmed = value \|> to_string() \|> String.trim()`
109	121
110	122		`cond do`
111		-	`trimmed == "" -> nil`
	123	+	`trimmed == "" -> ""`
	124	+	`String.starts_with?(trimmed, "//") -> "https:" <> trimmed`
112	125		`String.starts_with?(trimmed, ["/", "#"]) -> trimmed`
113	126		`scheme_of(trimmed) in @safe_schemes -> trimmed`
114		-	`# No scheme at all is a bare domain; treat it as https rather than`
115		-	`# letting the browser resolve it relative to OpenAgents.`
116	127		`scheme_of(trimmed) == nil -> "https://" <> trimmed`
117		-	`true -> nil`
	128	+	`true -> ""`
118	129		`end`
119	130		`end`
120	131
	132	+	`defp validate_output(rendered) do`
	133	+	`if byte_size(rendered) <= @maximum_output_bytes,`
	134	+	`do: :ok,`
	135	+	`else: {:error, :output_limit}`
	136	+	`end`
	137	+
121	138		`defp scheme_of(url) do`
122	139		`case Regex.run(~r/\A([a-zA-Z][a-zA-Z0-9+.-]*):/, url) do`
123	140		`[_, scheme] -> String.downcase(scheme)`

60	60		`end`
61	61		`end`
62	62
63		-	`def openagents_live_view do`
64		-	`quote do`
65		-	`use Phoenix.LiveView`
66		-
67		-	`unquote(openagents_html_helpers())`
68		-
69		-	`import OpenAgentsWeb.Components.RepoHeader`
70		-	`end`
71		-	`end`
72		-
73		-	`def openagents_html do`
74		-	`quote do`
75		-	`use Phoenix.Component`
76		-
77		-	`unquote(openagents_html_helpers())`
78		-	`end`
79		-	`end`
80		-
81	63		`def live_component do`
82	64		`quote do`
83	65		`use Phoenix.LiveComponent`