- 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

  - You must import the vendor deps into app.js and app.css to use them

  - **Never write inline `<script>` tags within templates.** The only exception is the synchronous, content-free theme bootstrap in `root.html.heex`, which must run before the first stylesheet paint. Put every other client behavior in `app.js` or a colocated LiveView hook

  - **Never write inline `<script>` tags within templates.** The only exception is the synchronous, content-free theme bootstrap in `root.html.heex`, which must run before the first stylesheet paint and carry the response-scoped CSP nonce. Put every other client behavior in `app.js` or a colocated LiveView hook

### UI and UX design guidelines

`docs/component-library.md` change and an explicit per-component import. The

application exposes one system, light, and dark preference control. A

synchronous, content-free bootstrap applies the stored choice before first

paint and synchronizes changes across tabs. Apps SDK UI glyphs are preferred;

the pinned Heroicons fallback has an explicit inventory and no current product

call sites.

paint and synchronizes changes across tabs. A unique response-scoped CSP nonce

admits only that bootstrap; `script-src` does not allow arbitrary inline code.

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.ComponentCatalog`,

`OpenAgentsWeb.UITest`, `OpenAgentsWeb.UIGalleryLiveTest`,

`test/openagents_web/component_catalog_test.exs`,

`test/openagents_web/icon_affordances_test.exs`,

`test/openagents_web/live/components_live_test.exs`, and

`test/openagents_web/live/components_live_test.exs`,

`test/openagents_web/home_controller_test.exs`, and

`assets/test/css_contract_test.mjs`.

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

  palette. The documentation check now refuses the superseded dark-only claims

  in active contracts, and the component test enumerates the system, light, and

  dark controls without treating the system preference as a third palette.

- Bound the synchronous prepaint theme bootstrap to a unique response-scoped

  CSP nonce. The browser policy test proves that the header and script nonce

  match, changes between responses, and never enables arbitrary inline scripts.

- Migrated current glyph uses to the preferred vendored Apps SDK set. Retained

  Heroicons only as the owner-approved second tier, pinned it to immutable

  revision `0435d4ca364a608cc75e2f8683d374e55abbae26`, and recorded an empty

retired palette alias survives, both owned themes compile, the operating-system

fallback compiles, and no third theme selector enters the bundle.

The root theme bootstrap is the only inline script. The browser pipeline creates

a unique CSP nonce for each response, places it in `script-src`, and binds it to

that bootstrap. Do not admit another inline script with the nonce.

See [the UI roadmap](issues-projects-ui-roadmap.md),

[ADR 0005](decisions/0005-use-basecoat-and-one-component-system.md), and the

[hardening plan](2026-08-20-integration-hardening-and-staging-readiness-recommendations.md).

    "system" stores nothing and leaves data-theme unset so the CSS

    prefers-color-scheme fallback governs; an explicit choice sets the

    attribute, which always wins. --%>

    <script phx-no-curly-interpolation>

    <script nonce={assigns[:csp_nonce]} phx-no-curly-interpolation>

      (() => {

        const stored = localStorage.getItem("phx:theme");

        const apply = (choice) => {

defmodule OpenAgentsWeb.Plugs.ContentSecurityPolicy do

  @moduledoc """

  Adds the browser content security policy and one response-scoped script nonce.

  The root layout uses the nonce only for the synchronous theme bootstrap. All

  other JavaScript remains in the same-origin application bundle.

  """

  import Plug.Conn

  @behaviour Plug

  @impl true

  def init(opts), do: opts

  @impl true

  def call(conn, _opts) do

    nonce = :crypto.strong_rand_bytes(18) |> Base.url_encode64(padding: false)

    conn

    |> assign(:csp_nonce, nonce)

    |> put_resp_header("content-security-policy", policy(nonce))

  end

  defp policy(nonce) do

    Enum.join(

      [

        "default-src 'self'",

        "base-uri 'self'",

        "connect-src 'self' ws: wss:",

        "frame-ancestors 'none'",

        "img-src 'self' data: https://avatars.githubusercontent.com",

        "object-src 'none'",

        "script-src 'self' 'nonce-#{nonce}'",

        "style-src 'self' 'unsafe-inline'"

      ],

      "; "

    )

  end

end

    plug :protect_from_forgery

    plug :put_secure_browser_headers, %{

      "content-security-policy" =>

        "default-src 'self'; base-uri 'self'; connect-src 'self' ws: wss:; frame-ancestors 'none'; img-src 'self' data: https://avatars.githubusercontent.com; object-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'",

      "permissions-policy" => "microphone=(self)"

    }

    plug OpenAgentsWeb.Plugs.ContentSecurityPolicy

    plug :fetch_current_user

  end

    refute policy =~ ~r/img-src[^;]*\shttps:(?:\s|;)/

  end

  test "the browser policy admits only the response-scoped theme bootstrap", %{conn: conn} do

    first = get(conn, ~p"/")

    second = conn |> recycle() |> get(~p"/")

    [first_policy] = get_resp_header(first, "content-security-policy")

    [second_policy] = get_resp_header(second, "content-security-policy")

    [first_nonce] =

      Regex.run(~r/script-src 'self' 'nonce-([A-Za-z0-9_-]{24})'/, first_policy,

        capture: :all_but_first

      )

    [second_nonce] =

      Regex.run(~r/script-src 'self' 'nonce-([A-Za-z0-9_-]{24})'/, second_policy,

        capture: :all_but_first

      )

    refute first_nonce == second_nonce

    refute first_policy =~ ~r/script-src[^;]*'unsafe-inline'/

    document = first |> html_response(200) |> LazyHTML.from_document()

    assert document

           |> LazyHTML.query(~s{script[nonce="#{first_nonce}"]})

           |> LazyHTML.to_tree()

           |> length() == 1

  end

  test "the landing styles do not use Sarah's cycling verb" do

    css = File.read!("assets/css/app.css")