- **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

- **Use DaisyUI component classes and patterns** where they already cover the needed UI. Add custom Tailwind only when the design is unique to OpenAgents.

- **There is exactly one component system: vendored Basecoat plus Sarah's style pack.** Basecoat lives in `assets/vendor/basecoat/components/` and carries structure (display, padding, min-height); `assets/css/sarah.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.SarahUI` 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.

  - **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 `sarah.css`, so all eight SarahUI 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.

- 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

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

/* See the Tailwind configuration guide for advanced usage

   https://tailwindcss.com/docs/configuration */

/* Cascade-layer order, declared before any @import so it is the FIRST @layer

 * statement in the bundle — only the first one establishes order; later ones

 * can add names but cannot reorder existing layers.

/* There is exactly one component system here: Basecoat structure plus Sarah's

 * style pack. DaisyUI was removed (see AGENTS.md) — it emitted flat component

 * rules from its own cascade layer that outranked every `.btn[data-variant=…]`

 * in sarah.css, so all eight SarahUI button variants rendered identically. Do

 * not reintroduce it, and do not add a second component library beside it.

 *

 * DaisyUI emits into its own `daisyui` layer. Without this line that layer is

 * declared after `components`, and a later-declared layer beats an earlier one

 * regardless of specificity, so DaisyUI's flat `.btn` overrode every

 * `.btn[data-variant=...]` rule in sarah.css and all eight SarahUI button

 * variants rendered identically. Listing `daisyui` before `components` keeps

 * Sarah's component styles authoritative, which is what sarah.css's own

 * "must stay last so its declarations win" note requires. */

@layer theme, base, daisyui, components, utilities;

 * With DaisyUI gone the layer order Tailwind itself declares

 * (`theme, base, components, utilities`) is correct as-is, so this file no

 * longer restates it. */

@import "tailwindcss" source(none);

@import "phoenix-colocated/openagents/colocated.css";

 *

 * These carry the structure (display, padding, min-height, background) that

 * sarah.css deliberately does not set — its .btn only adds gap, border,

 * radius, colour, font, and transition on top. Without them SarahUI controls

 * fall back to DaisyUI's geometry. This list matches Sarah's exactly. */

 * 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

 * Sarah's, plus `table` for `CoreComponents.table/1`. */

@import "../vendor/basecoat/base/base.css";

@import "../vendor/basecoat/components/button.css";

@import "../vendor/basecoat/components/input.css";

@import "../vendor/basecoat/components/item.css";

@import "../vendor/basecoat/components/empty.css";

@import "../vendor/basecoat/components/kbd.css";

@import "../vendor/basecoat/components/table.css";

/* Sarah's identity. Must stay last so its declarations win. */

@import "./sarah.css";

   The heroicons installation itself is managed by your mix.exs */

@plugin "../vendor/heroicons";

/* daisyUI Tailwind Plugin. */

@plugin "daisyui/packages/bundle/daisyui" {

  themes: false;

}

/* daisyUI theme plugin.

  We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired

  on Elixir colors. Build your own at: https://daisyui.com/theme-generator/ */

@plugin "daisyui/packages/bundle/daisyui-theme" {

  name: "dark";

  default: true;

  prefersdark: true;

  color-scheme: "dark";

  --color-base-100: #08090a;

  --color-base-200: #0f1011;

  --color-base-300: #1c1c1f;

  --color-base-content: #f7f8f8;

  --color-primary: #5e6ad2;

  --color-primary-content: #f7f8f8;

  --color-secondary: #1f2023;

  --color-secondary-content: #f7f8f8;

  --color-accent: #5e6ad2;

  --color-accent-content: #f7f8f8;

  --color-neutral: #62666d;

  --color-neutral-content: #f7f8f8;

  --color-info: #5e6ad2;

  --color-info-content: #f7f8f8;

  --color-success: #4cb782;

  --color-success-content: #08090a;

  --color-warning: #f2994a;

  --color-warning-content: #08090a;

  --color-error: #eb5757;

  --color-error-content: #f7f8f8;

  --radius-selector: 0.25rem;

  --radius-field: 0.375rem;

  --radius-box: 0.5rem;

  --size-selector: 0.21875rem;

  --size-field: 0.21875rem;

  --border: 1px;

  --depth: 1;

  --noise: 0;

}

@plugin "daisyui/packages/bundle/daisyui-theme" {

  name: "light";

  default: false;

  prefersdark: false;

  color-scheme: "light";

  --color-base-100: oklch(98% 0 0);

  --color-base-200: oklch(96% 0.001 286.375);

  --color-base-300: oklch(92% 0.004 286.32);

  --color-base-content: oklch(21% 0.006 285.885);

  --color-primary: oklch(70% 0.213 47.604);

  --color-primary-content: oklch(98% 0.016 73.684);

  --color-secondary: oklch(55% 0.027 264.364);

  --color-secondary-content: oklch(98% 0.002 247.839);

  --color-accent: oklch(0% 0 0);

  --color-accent-content: oklch(100% 0 0);

  --color-neutral: oklch(44% 0.017 285.786);

  --color-neutral-content: oklch(98% 0 0);

  --color-info: oklch(62% 0.214 259.815);

  --color-info-content: oklch(97% 0.014 254.604);

  --color-success: oklch(70% 0.14 182.503);

  --color-success-content: oklch(98% 0.014 180.72);

  --color-warning: oklch(66% 0.179 58.318);

  --color-warning-content: oklch(98% 0.022 95.277);

  --color-error: oklch(58% 0.253 17.585);

  --color-error-content: oklch(96% 0.015 12.422);

  --radius-selector: 0.25rem;

  --radius-field: 0.25rem;

  --radius-box: 0.5rem;

  --size-selector: 0.21875rem;

  --size-field: 0.21875rem;

  --border: 1.5px;

  --depth: 1;

  --noise: 0;

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

 * Ported from Sarah, where these are the two tiers of DESIGN.md "Color

 * Tokens": PRIMITIVES are the hand-picked Aiur oklch values; DERIVATIONS are

 * color-mix() steps off one ink, so the hover/focus/border grammar is

 * systematic rather than accumulated.

 *

 * sarah.css consumes these but does not define them — it aliases them onto

 * the Basecoat names (`--background`, `--card`, `--primary`, `--border`, …)

 * in its own `:root`. Before this block existed those aliases resolved to

 * nothing and the DaisyUI theme was carrying the palette instead, which is

 * exactly the collision that made every SarahUI variant render identically.

 *

 * The three surfaces are a fixed relationship, not three loose colors: page

 * and sidebar sit on the darkest (--ink-void), the working canvas one step up

 * (--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 Sarah's 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 Sarah

 * ships no light variant to replace it with.

 */

:root {

  color-scheme: dark;

  /* PRIMITIVES — the Aiur palette, verbatim. */

  --ink-void: oklch(12.901% 0.01498 266.378); /* darkest: page, sidebar */

  --ink-surface: oklch(18.311% 0.03089 263.383); /* +1: canvas, chrome */

  --ink-raised: oklch(24.185% 0.04699 263.85); /* +2: elevated components */

  --text-ink: oklch(96.386% 0.01695 267.792); /* the one text/icon/wash ink */

  --accent: oklch(62.308% 0.18801 259.815);

  --accent-bright: oklch(71.374% 0.14338 254.624);

  --info: oklch(75.351% 0.13899 232.661);

  --success: oklch(72.275% 0.19201 149.579);

  --warning: oklch(76.859% 0.16466 70.08);

  --danger: oklch(71.063% 0.16615 22.216);

  /* DERIVATIONS — text tiers as alpha steps of the ink. The literals are the

     Aiur values; the percentages beside them are the measured best-fit alpha

     steps, recorded so a later theme can choose the ladder deliberately. */

  --text-primary: color-mix(in oklab, var(--text-ink) 100%, transparent); /* 100% */

  --text-body: oklch(90.551% 0.0307 265.325); /* exception; best fit 91% */

  --text-muted: oklch(71.613% 0.04926 262.439); /* exception; best fit 65% */

  --text-dim: oklch(65.775% 0.04389 274.477); /* exception; best fit 57% */

  /* Icon tiers. Glyphs read lighter than text at the same alpha, so they get

     their own ladder rather than borrowing the text one. */

  --icon-primary: color-mix(in oklab, var(--text-ink) 100%, transparent); /* 100% */

  --icon-secondary: color-mix(in oklab, var(--text-ink) 66%, transparent); /* 66% */

  --icon-tertiary: color-mix(in oklab, var(--text-ink) 52%, transparent); /* 52% */

  --icon-faint: color-mix(in oklab, var(--text-ink) 28%, transparent); /* 28% */

  /* Washes — translucent ink laid over whatever surface is beneath, so hover

     and selection read as the same gesture on every rung of the surface

     ladder. Hover < active < selected < strong. */

  --wash-hover: color-mix(in oklab, var(--text-ink) 6%, transparent); /* 6% */

  --wash-active: color-mix(in oklab, var(--text-ink) 8%, transparent); /* 8% */

  --wash-selected: color-mix(in oklab, var(--text-ink) 10%, transparent); /* 10% */

  --wash-strong: color-mix(in oklab, var(--text-ink) 14%, transparent); /* 14% */

  /* The hover surface is the wash resolved opaquely over the raised rung. */

  --ink-hover: color-mix(in oklab, var(--text-ink) 4%, var(--ink-raised)); /* 4% over raised */

  /* The one inverted control: the strongest ink as ground, the darkest rung as

     glyph. State changes ride opacity so the fill never shifts hue. */

  --control-inverse-bg: var(--text-primary);

  --control-inverse-fg: var(--ink-void);

  /* Borders. --line and --line-strong are the 12% and 20% rungs by role but

     keep their literals (same chroma accounting as the text exceptions); the

     soft and faint rungs are true ladder steps. */

  --line: oklch(29.154% 0.0506 264.607); /* exception; best fit 11% */

  --line-soft: color-mix(in oklab, var(--text-ink) 8%, transparent); /* 8% */

  --line-faint: color-mix(in oklab, var(--text-ink) 4%, transparent); /* 4% */

  --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 Sarah tokens, not a

 * second palette. Prefer Basecoat's own `background` / `card` / `foreground` /

 * `border` names in new markup.

 *

 * The semantic four are Sarah's, 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);

  --color-danger: var(--danger);

}

/* Add variants based on LiveView classes */

  min-height: 32px;

  padding-inline: 16px;

  background: var(--color-base-200);

  color: var(--color-neutral);

  color: var(--text-muted);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.06em;

.docs-sidebar__section-title {

  padding-inline: 8px;

  color: var(--color-neutral);

  color: var(--text-muted);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.06em;

}

.message-time {

  color: var(--color-neutral);

  color: var(--text-muted);

  font-size: 0.75rem;

  line-height: 1rem;

}

  padding: 10px 14px;

  border-radius: 16px;

  border-bottom-right-radius: 4px;

  background: var(--color-primary);

  color: var(--color-primary-content);

  background: var(--accent);

  color: var(--text-primary);

}

.composer {

}

.composer-card:focus-within {

  border-color: var(--color-primary);

  box-shadow: 0 0 0 2px var(--color-primary) / 20%;

  border-color: var(--accent-bright);

  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-bright) 22%, transparent);

}

.composer-grid {

}

.composer-input::placeholder {

  color: var(--color-neutral);

  color: var(--text-muted);

}

.composer-trailing {

  justify-content: center;

  border: 0;

  border-radius: 50%;

  background: var(--color-primary);

  color: var(--color-primary-content);

  background: var(--accent);

  color: var(--text-primary);

  cursor: pointer;

  transition: filter 150ms ease, transform 150ms ease;

}

  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,

  augmented with daisyUI, a Tailwind CSS plugin that provides UI components

  and themes. Here are useful references:

    * [daisyUI](https://daisyui.com/docs/intro/) - a good place to get

      started and see the available components.

  on top of the vendored Basecoat component structure in

  `assets/vendor/basecoat/components/` and Sarah's style pack in

  `assets/css/sarah.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.SarahUI` - 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

      id={@id}

      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}

      role="alert"

      class="toast toast-top toast-end z-50"

      class="fixed top-4 right-4 z-50 flex flex-col items-end gap-2"

      {@rest}

    >

      <div class={[

        "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",

        @kind == :info && "alert-info",

        @kind == :error && "alert-error"

      ]}>

      <%!-- Basecoat/Sarah `.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" />

        <div>

        <section>

          <p :if={@title} class="font-semibold">{@title}</p>

          <p>{msg}</p>

        </div>

        <div class="flex-1" />

        </section>

        <button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}>

          <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />

        </button>

  @doc """

  Renders a button with navigation support.

  A thin wrapper over the Basecoat/Sarah `.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.SarahUI.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>

  attr :rest, :global,

    include: ~w(href navigate patch method download name value disabled type id phx-click)

  attr :class, :any

  attr :variant, :string, values: ~w(primary)

  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

    variants = %{

      "primary" => "bg-primary text-primary-content hover:bg-[#4c57b5]",

      nil => "bg-[#1c1c1f] text-base-content border border-[#26262a] hover:bg-[#26262a]"

    }

    assigns =

      assign_new(assigns, :class, fn ->

        [

          "inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed",

          Map.fetch!(variants, assigns[:variant])

        ]

      end)

    if rest[:href] || rest[:navigate] || rest[:patch] do

      ~H"""

      <.link class={@class} {@rest}>

      <.link class={["btn", @class]} data-variant={@variant} data-size={@size} {@rest}>

        {render_slot(@inner_block)}

      </.link>

      """

    else

      ~H"""

      <button class={@class} {@rest}>

      <button class={["btn", @class]} data-variant={@variant} data-size={@size} {@rest}>

        {render_slot(@inner_block)}

      </button>

      """

      end)

    ~H"""

    <div class="fieldset mb-2">

    <div class="field mb-2">

      <label for={@id}>

        <input

          type="hidden"

          disabled={@rest[:disabled]}

          form={@rest[:form]}

        />

        <span class="label">

        <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 || "checkbox checkbox-sm"}

            class={@class || "size-4 shrink-0 accent-primary"}

            {@rest}

          />{@label}

        </span>

  def input(%{type: "select"} = assigns) do

    ~H"""

    <div class="fieldset mb-2">

    <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 select", @errors != [] && (@error_class || "select-error")]}

          class={[@class || "w-full input", "aria-invalid:border-destructive", @error_class]}

          aria-invalid={@errors != [] && "true"}

          multiple={@multiple}

          {@rest}

        >

  def input(%{type: "textarea"} = assigns) do

    ~H"""

    <div class="fieldset mb-2">

    <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",

            @errors != [] && (@error_class || "textarea-error")

          ]}

          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>

  # All other inputs text, datetime-local, url, password, etc. are handled here...

  def input(assigns) do

    ~H"""

    <div class="fieldset mb-2">

    <div class="field mb-2">

      <label for={@id}>

        <span :if={@label} class="label mb-1">{@label}</span>

        <input

          name={@name}

          id={@id}

          value={Phoenix.HTML.Form.normalize_value(@type, @value)}

          class={[

            @class || "w-full input",

            @errors != [] && (@error_class || "input-error")

          ]}

          class={[@class || "w-full input", "aria-invalid:border-destructive", @error_class]}

          aria-invalid={@errors != [] && "true"}

          {@rest}

        />

      </label>

  # 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-error">

    <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>

        <h1 class="text-lg font-semibold leading-8">

          {render_slot(@inner_block)}

        </h1>

        <p :if={@subtitle != []} class="text-sm text-base-content/70">

        <p :if={@subtitle != []} class="text-sm text-muted-foreground">

          {render_slot(@subtitle)}

        </p>

      </div>

      end

    ~H"""

    <table class="table table-zebra">

      <thead>

        <tr>

          <th :for={col <- @col}>{col[:label]}</th>

          <th :if={@action != []}>

            <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)}>

          <td

            :for={col <- @col}

            phx-click={@row_click && @row_click.(row)}

            class={@row_click && "hover:cursor-pointer"}

          >

            {render_slot(col, @row_item.(row))}

          </td>

          <td :if={@action != []} class="w-0 font-semibold">

            <div class="flex gap-4">

              <%= for action <- @action do %>

                {render_slot(action, @row_item.(row))}

              <% end %>

            </div>

          </td>

        </tr>

      </tbody>

    </table>

    <%!-- Basecoat's `.table` carries structure only — widths, alignment, and

    the row rule. Rhythm and colour are utilities here rather than a zebra

    variant: Sarah 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

  def list(assigns) do

    ~H"""

    <ul class="list">

      <li :for={item <- @item} class="list-row">

        <div class="list-col-grow">

          <div class="font-bold">{item.title}</div>

          <div>{render_slot(item)}</div>

    <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>

  def app(assigns) do

    ~H"""

    <div class="h-screen flex overflow-hidden bg-base-100">

    <div class="h-screen flex overflow-hidden bg-background">

      <%= if @current_scope do %>

        <.sidebar current_scope={@current_scope} />

      <% end %>

        <main class={[

          "flex-1 min-w-0 overflow-y-auto overscroll-none p-4",

          @current_scope && "bg-base-100"

          @current_scope && "bg-background"

        ]}>

          <%= if @current_scope do %>

            {render_slot(@inner_block)}

  defp openagents_command_bar(assigns) do

    ~H"""

    <header class="navbar bg-base-100 border-b border-base-300 px-4 h-16 shrink-0">

      <div class="navbar-start">

    <header class="flex items-center gap-2 bg-background border-b border-border px-4 h-16 shrink-0">

      <div class="flex flex-1 min-w-0 items-center gap-2">

        <%= if !@current_scope do %>

          <.link navigate={~p"/"} class="btn btn-ghost text-xl">

          <.link navigate={~p"/"} class="btn text-xl text-foreground" data-variant="ghost">

            OpenAgents

          </.link>

        <% end %>

        <%= if @title do %>

          <div class="flex flex-col justify-center">

            <h1 class="text-base font-semibold leading-tight">{@title}</h1>

          <div class="flex flex-col justify-center min-w-0">

            <h1 class="text-base font-semibold leading-tight truncate">{@title}</h1>

            <%= if @subtitle do %>

              <p class="text-xs text-base-content/60">{@subtitle}</p>

              <p class="text-xs text-muted-foreground truncate">{@subtitle}</p>

            <% end %>

          </div>

        <% end %>

      </div>

      <div class="navbar-end gap-2">

      <div class="flex items-center gap-2">

        <%= if @current_scope do %>

          <.account_dropdown current_scope={@current_scope} />

        <% else %>

          <.form for={%{}} as={:auth} action={~p"/auth/github"} method="post" class="m-0">

            <.button type="submit" class="btn btn-primary btn-sm">Sign in with GitHub</.button>

            <.button type="submit" variant="primary" size="sm">Sign in with GitHub</.button>

          </.form>

        <% end %>

      </div>

  defp account_dropdown(assigns) do

    ~H"""

    <details class="dropdown dropdown-end">

      <summary class="btn btn-ghost btn-circle avatar list-none cursor-pointer">

    <%!-- A native <details> disclosure rather than a JavaScript dropdown, for

    the same reason `SarahUI.menu/1` uses the popover API: the account control

    has to work before any client script has run. --%>

    <details class="relative">

      <summary class="btn list-none cursor-pointer !p-1" data-variant="ghost">

        <img

          src={@current_scope.github_avatar_url}

          alt={"GitHub avatar for @#{@current_scope.github_login}"}

          class="w-8 h-8 rounded-full"

        />

      </summary>

      <ul class="menu dropdown-content bg-base-100 rounded-box z-10 w-56 p-2 shadow border border-base-300">

        <li class="p-2">

      <ul class="absolute end-0 z-10 mt-2 w-56 rounded-lg border border-border bg-popover p-2 shadow-lg">

        <li class="flex flex-col p-2">

          <span class="font-semibold">{account_display_name(@current_scope)}</span>

          <span :if={@current_scope.github_name} class="text-sm text-base-content/70">

          <span :if={@current_scope.github_name} class="text-sm text-muted-foreground">

            @{@current_scope.github_login}

          </span>

        </li>

        <li>

          <.form for={%{}} as={:logout} action={~p"/logout"} method="post" class="m-0 w-full">

            <input type="hidden" name="_method" value="delete" />

            <button type="submit" class="w-full text-left flex items-center gap-2">

            <button

              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

            </button>

          </.form>

  end

  @doc """

  Provides dark vs light theme toggle based on themes defined in app.css.

  The `data-theme` segmented control.

  See <head> in root.html.heex which applies the theme before page load.

  The attribute plumbing in `root.html.heex` still runs, but since DaisyUI was

  removed there is only one palette behind it: Sarah's 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="card relative flex flex-row items-center w-24 shrink-0 border-2 border-base-300 bg-base-300 rounded-full">

      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 [[data-theme-source=system]_&]:!left-0 transition-[left]" />

    <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"

  def repo_header(assigns) do

    ~H"""

    <div class="border-b border-base-300 pb-4 mb-6">

    <div class="border-b border-border pb-4 mb-6">

      <div class="flex flex-wrap items-center gap-3 mb-3">

        <div class="avatar avatar-placeholder">

          <div class="bg-primary text-primary-content w-10 h-10 rounded-full flex items-center justify-center font-semibold">

            {@owner |> String.first() |> String.upcase()}

          </div>

        </div>

        <div class="text-sm breadcrumbs">

          <ul>

        <span class="avatar size-10 bg-primary text-primary-foreground font-semibold">

          <span>{@owner |> String.first() |> String.upcase()}</span>

        </span>

        <nav class="text-sm" aria-label="Breadcrumb">

          <ol class="flex items-center gap-1">

            <li>

              <.link navigate={~p"/"} class="link link-primary">

                {@owner}

              </.link>

              <.link navigate={~p"/"} class="btn px-0" data-variant="link">{@owner}</.link>

            </li>

            <li class="font-semibold">{@repo}</li>

          </ul>

        </div>

        <span class="badge badge-sm badge-ghost">Public</span>

            <li aria-hidden="true" class="text-muted-foreground">/</li>

            <li class="font-semibold" aria-current="page">{@repo}</li>

          </ol>

        </nav>

        <span class="badge" data-variant="dim">Public</span>

      </div>

      <div class="tabs tabs-bordered">

        <.link

      <%!-- Page navigation, not a tab widget: these are links that change the

      URL, so they carry `aria-current` rather than tab roles, and the selected

      state is the accent underline. --%>

      <nav class="flex gap-1 -mb-4 overflow-x-auto" aria-label={"#{@repo} sections"}>

        <.repo_tab

          patch={~p"/#{@owner}/#{@repo}/issues"}

          class={["tab", @active == "issues" && "tab-active"]}

        >

          Issues {if is_integer(@open_count), do: "(#{@open_count})"}

        </.link>

        <.link

          selected={@active == "issues"}

          label={"Issues #{if is_integer(@open_count), do: "(#{@open_count})", else: ""}"}

        />

        <.repo_tab

          patch={~p"/#{@owner}/#{@repo}/labels"}

          class={["tab", @active == "labels" && "tab-active"]}

        >

          Labels

        </.link>

        <.link

          selected={@active == "labels"}

          label="Labels"

        />

        <.repo_tab

          patch={~p"/#{@owner}/#{@repo}/milestones"}

          class={["tab", @active == "milestones" && "tab-active"]}

        >

          Milestones

        </.link>

        <.link

          selected={@active == "milestones"}

          label="Milestones"

        />

        <.repo_tab

          patch={~p"/#{@owner}/#{@repo}/projects"}

          class={["tab", @active == "projects" && "tab-active"]}

        >

          Projects

        </.link>

      </div>

          selected={@active == "projects"}

          label="Projects"

        />

      </nav>

    </div>

    """

  end

  attr :patch, :string, required: true

  attr :selected, :boolean, required: true

  attr :label, :string, required: true

  defp repo_tab(assigns) do

    ~H"""

    <.link

      patch={@patch}

      aria-current={@selected && "page"}

      class={[

        "whitespace-nowrap border-b-2 px-3 pb-3 text-sm transition-colors",

        @selected && "border-primary text-foreground font-semibold",

        !@selected && "border-transparent text-muted-foreground hover:text-foreground"

      ]}

    >

      {@label}

    </.link>

    """

  end

end

      <h1 class="text-2xl font-bold mb-4">Assignees</h1>

      <%= if @assignees == [] do %>

        <div class="alert alert-info">

        <div class="alert" data-variant="info" role="status">

          <.icon name="hero-information-circle" class="size-5" />

          <span>No assignees have been assigned to issues yet.</span>

          <section>No assignees have been assigned to issues yet.</section>

        </div>

      <% else %>

        <.table id="assignees" rows={@assignees}>

          <:col :let={{login, _count}} label="Assignee">

            <div class="flex items-center gap-2">

              <div class="avatar avatar-placeholder">

                <div class="bg-neutral text-neutral-content w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold">

                  {login |> String.first() |> String.upcase()}

                </div>

              </div>

              <span class="avatar size-8 font-semibold">

                <span>{login |> String.first() |> String.upcase()}</span>

              </span>

              <span class="font-semibold">{login}</span>

            </div>

          </:col>

    ~H"""

    <div class="max-w-3xl mx-auto">

      <h1 class="text-3xl font-semibold mb-4">Documentation</h1>

      <p class="text-base-content/70 mb-8">

      <p class="text-muted-foreground mb-8">

        The OpenAgents docs are a work in progress. This placeholder shows the structure we will build out next.

      </p>

  defp card(assigns) do

    ~H"""

    <div class="card bg-base-200 border border-base-300 p-4">

      <h2 class="text-lg font-medium mb-1">{@title}</h2>

      <p class="text-sm text-base-content/70">{@description}</p>

    </div>

    <%!-- `.card` brings its own padding and lift; the surrounding grid supplies

    the gaps, so the panel margin is dropped here. --%>

    <article class="card !m-0">

      <header>

        <h2 class="card-title">{@title}</h2>

        <p>{@description}</p>

      </header>

    </article>

    """

  end

end

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash} current_scope={@current_scope} wide>

      <section class="hero min-h-[60vh]">

        <div class="hero-content text-center">

      <section class="flex min-h-[60vh] items-center justify-center px-4">

        <div class="text-center">

          <div class="max-w-4xl space-y-6">

            <h1 class="text-5xl md:text-7xl font-bold tracking-tight">

              The Agent Forge

            </h1>

            <p class="text-xl md:text-2xl text-base-content/70">

            <p class="text-xl md:text-2xl text-muted-foreground">

              Purpose-built for planning and shipping issues. Designed for the agent era.

            </p>

            <div class="flex flex-wrap justify-center gap-4">

          </div>

        </div>

      </section>

      <%!--

      <div class="flex justify-center -mt-20 mb-20 px-4">

        <div class="mockup-browser border bg-base-200 w-full max-w-4xl">

          <div class="mockup-browser-toolbar">

            <div class="input">openagents.com/OpenAgents/openagents/issues</div>

          </div>

          <div class="p-6">

            <div class="card bg-base-100 border border-base-300 mt-4">

              <div class="card-body">

                <div class="flex items-start gap-4">

                  <.icon name="hero-exclamation-circle" class="size-6 text-success shrink-0" />

                  <div class="flex-1">

                    <h2 class="text-2xl font-bold">

                      Issue preview

                      <span class="text-base-content/50 text-lg font-normal">#1</span>

                    </h2>

                    <p class="text-sm text-base-content/70 mt-1">

                      Opened on Aug 19, 2026 by OpenAgents

                    </p>

                    <div class="flex flex-wrap gap-1 mt-3">

                      <span class="badge badge-sm">preview</span>

                    </div>

                  </div>

                </div>

                <p class="whitespace-pre-wrap mt-4 text-base-content/90">

                  This is a placeholder for the live issue preview.

                </p>

                <div class="card-actions justify-end mt-4">

                  <.button navigate={~p"/OpenAgents/openagents/issues/1"} variant="primary">

                    Open issue

                  </.button>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      --%>

    </Layouts.app>

    """

  end

      <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">

        <%= for name <- @icons do %>

          <div class="flex flex-col items-center gap-2 p-3 border border-base-300 rounded-lg">

          <div class="flex flex-col items-center gap-2 p-3 border border-border rounded-lg">

            <.icon name={name} class="size-8" />

            <span class="text-xs text-center break-all text-base-content/70">{name}</span>

            <span class="text-xs text-center break-all text-muted-foreground">{name}</span>

          </div>

        <% end %>

      </div>

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash} current_scope={@current_scope}>

      <div class="bg-base-100 border border-base-300 rounded-lg overflow-hidden">

        <div class="flex flex-wrap items-center gap-3 p-4 border-b border-base-300">

      <div class="bg-background border border-border rounded-lg overflow-hidden">

        <div class="flex flex-wrap items-center gap-3 p-4 border-b border-border">

          <div class="flex items-center gap-1">

            <%!-- These two are the current filter, so the selected one carries

            `aria-current` and the accent tone rather than a pressed-button

            class; the style pack has no active state for a link. --%>

            <.link

              patch={~p"/#{@owner}/#{@repo}/issues?state=open"}

              class={[

                "btn btn-sm btn-ghost gap-1",