font-weight: 500;

  }

  /* ── Stack map ──────────────────────────────────────────────────────────── */

  /* One pull request stack as an ordered rail: layers top-first, the trunk at

     the bottom, and a hairline connector threading through the state glyphs so

     the chain reads as one object. The current layer is washed rather than

     underlined -- the reader is inside it, not travelling to it. */

  .stack-map {

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: var(--radius-lg);

    background: var(--ink-surface);

  }

  .stack-map__header {

    display: flex;

    align-items: center;

    gap: 10px;

    border-block-end: 1px solid var(--line);

    padding: 12px 16px;

  }

  .stack-map__title {

    color: var(--text-primary);

    font-weight: 600;

    font-size: 0.9375rem;

  }

  .stack-map__count {

    color: var(--text-muted);

    font-size: 0.75rem;

    font-variant-numeric: tabular-nums;

  }

  .stack-map__actions {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-inline-start: auto;

  }

  .stack-map__layers {

    position: relative;

    margin: 0;

    padding: 8px 0;

    list-style: none;

  }

  /* The connector rail. It threads behind the state glyphs, which sit on the

     surface colour so the line appears to pass through them. */

  .stack-map__layers::before {

    position: absolute;

    inset-block: 14px;

    inset-inline-start: 23px;

    border-inline-start: 1px solid var(--line-strong);

    content: "";

  }

  .stack-map__add,

  .stack-map__trunk {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

  }

  .stack-map__add-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--text-muted);

    font-size: 0.875rem;

    text-decoration: none;

    transition: color var(--motion-fast) var(--ease);

  }

  @media (hover: hover) {

    .stack-map__add-link:hover {

      color: var(--text-primary);

    }

  }

  .stack-map__add-icon {

    z-index: 1;

    box-sizing: content-box;

    width: 16px;

    height: 16px;

    flex: none;

    padding: 0;

    background: var(--ink-surface);

    color: var(--icon-tertiary);

    font-size: 16px;

  }

  .stack-map__layer {

    position: relative;

    display: grid;

    grid-template-columns: 16px 1fr;

    align-items: center;

    gap: 4px 10px;

    padding: 8px 16px;

  }

  .stack-map__layer[aria-current="page"] {

    background: var(--wash-selected);

  }

  .stack-map__layer[aria-current="page"]::before {

    position: absolute;

    inset-block: 0;

    inset-inline-start: 0;

    border-inline-start: 2px solid var(--accent-bright);

    content: "";

  }

  .stack-map__state {

    z-index: 1;

    grid-row: span 2;

    align-self: start;

    box-sizing: content-box;

    width: 16px;

    height: 16px;

    flex: none;

    padding-block: 2px;

    background: var(--ink-surface);

    color: var(--icon-tertiary);

    font-size: 16px;

  }

  .stack-map__layer[aria-current="page"] .stack-map__state {

    background: transparent;

  }

  .stack-map__layer[data-state="open"] .stack-map__state {

    color: var(--success);

  }

  .stack-map__layer[data-state="merged"] .stack-map__state {

    color: var(--accent-bright);

  }

  .stack-map__layer[data-state="closed"] .stack-map__state {

    color: var(--danger);

  }

  .stack-map__layer-link {

    color: var(--text-primary);

    font-weight: 600;

    font-size: 0.875rem;

    text-decoration: none;

  }

  @media (hover: hover) {

    a.stack-map__layer-link:hover {

      color: var(--accent-bright);

    }

  }

  .stack-map__layer-meta {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    grid-column: 2;

    min-width: 0;

  }

  .stack-map__layer-number {

    color: var(--text-muted);

    font-size: 0.8125rem;

    font-variant-numeric: tabular-nums;

  }

  .stack-map__branch {

    overflow: hidden;

    border-radius: 6px;

    background: var(--wash-selected);

    padding: 2px 8px;

    color: var(--text-body);

    font-family: var(--font-mono);

    font-size: 0.75rem;

    text-decoration: none;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  @media (hover: hover) {

    a.stack-map__branch:hover {

      color: var(--accent-bright);

    }

  }

  .stack-map__trunk .stack-map__state {

    grid-row: auto;

    padding-block: 0;

  }

  /* ── File table ─────────────────────────────────────────────────────────── */

  .file-table {

          source: "OpenAgentsWeb.UI.repo_view/1",

          summary: "The whole repository home: identity, sections, tree, and rail in one frame."

        },

        %{

          slug: "openagents-stack-map",

          title: "Stack map",

          icon: "stack",

          source: "OpenAgentsWeb.UI.stack_map/1",

          summary: "One pull request stack, layers top-first, down to the trunk it targets."

        },

        %{

          slug: "openagents-status-indicator",

          title: "Status indicator",

    """

  end

  @doc """

  The map of one pull request stack: every layer in order, top of the stack

  first, ending at the trunk the whole stack targets.

  Layers arrive top-first because that is how a stack reads — the newest work

  sits on top and the trunk anchors the bottom, the way the branches actually

  chain. Each layer carries its pull request state as a glyph beside the

  title, so a reader sees at a glance which layers are merged, open, draft,

  or closed.

  The layer for the page the reader is on renders as text with

  `aria-current="page"` rather than as a link, for the same reason

  `breadcrumb/1` does: a page linking to itself is a dead control that still

  looks live. Every other layer is a link to its pull request.

  The trunk row is a destination too when `trunk_navigate` or `trunk_href` is

  given — the branch the stack lands on is a real place — and plain text when

  it is not, as in the catalog where there is nowhere to send the reader.

  """

  attr :id, :string, required: true

  attr :number, :integer, required: true, doc: "the stack number, scoped to the repository"

  attr :trunk, :string, required: true, doc: "the branch the whole stack targets"

  attr :trunk_navigate, :string, default: nil

  attr :trunk_href, :string, default: nil

  attr :add_navigate, :string, default: nil, doc: "where a new layer on top of the stack begins"

  attr :add_href, :string, default: nil

  attr :class, :any, default: nil

  attr :layers, :list,

    required: true,

    doc:

      "`[%{title, number, branch, state}]` from top of the stack to bottom, " <>

        "each optionally carrying `navigate` or `href` for its destination and " <>

        "`current: true` for the layer being viewed; `state` is `open`, " <>

        "`merged`, `closed`, or `draft`"

  attr :rest, :global

  slot :action, doc: "controls at the trailing edge of the header, such as unstack"

  def stack_map(assigns) do

    ~H"""

    <section id={@id} class={["stack-map", @class]} aria-label={"Stack ##{@number}"} {@rest}>

      <header class="stack-map__header">

        <span class="stack-map__title">Stack #{@number}</span>

        <span class="stack-map__count">{layer_count_label(length(@layers))}</span>

        <span :if={@action != []} class="stack-map__actions">{render_slot(@action)}</span>

      </header>

      <ol class="stack-map__layers">

        <li :if={@add_navigate || @add_href} class="stack-map__add">

          <.link navigate={@add_navigate} href={@add_href} class="stack-map__add-link">

            <.icon name="plus" class="stack-map__add-icon" /> Add to stack

          </.link>

        </li>

        <li

          :for={layer <- @layers}

          class="stack-map__layer"

          data-state={layer.state}

          aria-current={layer[:current] && "page"}

        >

          <.icon name={pull_request_state_icon(layer.state)} class="stack-map__state" />

          <.link

            :if={!layer[:current]}

            navigate={layer[:navigate]}

            href={layer[:href]}

            class="stack-map__layer-link"

          >

            {layer.title}

          </.link>

          <span :if={layer[:current]} class="stack-map__layer-link">{layer.title}</span>

          <span class="stack-map__layer-meta">

            <span class="stack-map__layer-number">#{layer.number}</span>

            <span class="stack-map__branch">{layer.branch}</span>

          </span>

        </li>

        <li class="stack-map__trunk">

          <.icon name="branch" class="stack-map__state" />

          <.link

            :if={@trunk_navigate || @trunk_href}

            navigate={@trunk_navigate}

            href={@trunk_href}

            class="stack-map__branch"

          >

            {@trunk}

          </.link>

          <span :if={!(@trunk_navigate || @trunk_href)} class="stack-map__branch">{@trunk}</span>

        </li>

      </ol>

    </section>

    """

  end

  defp layer_count_label(1), do: "1 layer"

  defp layer_count_label(count), do: "#{count} layers"

  defp pull_request_state_icon("merged"), do: "pull-request-merged"

  defp pull_request_state_icon("closed"), do: "pull-request-closed"

  defp pull_request_state_icon("draft"), do: "pull-request-draft"

  defp pull_request_state_icon(_open), do: "pull-request-open"

  @doc """

  A repository's file table: the ref bar, the latest commit, and the entries.

    """

  end

  defp component_demo(%{item: %{slug: "openagents-stack-map"}} = assigns) do

    assigns =

      assign(assigns, :layers, [

        %{

          title: "Add frontend",

          number: 32,

          branch: "frontend",

          state: "draft",

          href: "#pr-32"

        },

        %{

          title: "Add API endpoints",

          number: 30,

          branch: "api-endpoints",

          state: "open",

          href: "#pr-30"

        },

        %{

          title: "Add authentication layer",

          number: 24,

          branch: "auth-layer",

          state: "open",

          current: true

        }

      ])

    ~H"""

    <div class="space-y-3">

      <p class="text-sm text-base-content/60">

        A stacked pull request's place in its stack, at a glance. Layers arrive

        top-first and the trunk anchors the bottom, the way the branches actually

        chain. Each layer wears its pull request state as a coloured glyph, and the

        one the reader is viewing is washed and marked <code>aria-current="page"</code>

        rather than linked — a page linking to itself is a dead control that still

        looks live.

      </p>

      <div class="max-w-md">

        <UI.stack_map

          id="demo-stack-map"

          number={31}

          trunk="main"

          trunk_href="#main"

          add_href="#add"

          layers={@layers}

        >

          <:action>

            <UI.button variant={:ghost} size={:sm}>Unstack</UI.button>

          </:action>

        </UI.stack_map>

      </div>

      <p class="text-sm text-base-content/60">

        The connector rail threads through the state glyphs so the chain reads as one

        object, and the <strong>Add to stack</strong>

        row sits above the top layer because that is where the next layer would go. The

        header's action slot holds stack-level controls — here an unstack affordance.

      </p>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "openagents-diff-file"}} = assigns) do

    assigns =

      assign(

                </.badge>

              </div>

              <.stack_map

                id="stack-map"

                number={@stack_context.stack.number}

                trunk={@stack_context.stack.trunk_ref}

                layers={stack_map_layers(@stack_context, @owner, @repo)}

                class="mt-4 max-w-md"

              />

              <nav class="mt-4 flex gap-2" aria-label="Stack diff views">

                <.button

                  id="stack-view-layer"

  defp short(sha), do: String.slice(sha, 0, 12)

  defp stack_map_layers(context, owner, repo) do

    context.stack.entries

    |> Enum.sort_by(& &1.position, :desc)

    |> Enum.map(fn entry ->

      pull_request = entry.pull_request

      %{

        title: pull_request.issue.title,

        number: pull_request.issue.number,

        branch: pull_request.head_ref,

        state: layer_state(pull_request),

        navigate: ~p"/#{owner}/#{repo}/pulls/#{pull_request.issue.number}",

        current: entry.id == context.entry.id

      }

    end)

  end

  defp layer_state(pull_request) do

    cond do

      pull_request.merged_at -> "merged"

      pull_request.state == "closed" -> "closed"

      pull_request.draft -> "draft"

      true -> "open"

    end

  end

  defp visible_repository!(owner, repo, user) do

    Repositories.get_visible_by_path!(owner, repo, user)

  rescue

    end

  end

  describe "stack_map/1" do

    defp demo_layers do

      [

        %{title: "Add frontend", number: 32, branch: "frontend", state: "draft", href: "#pr-32"},

        %{title: "Add API", number: 30, branch: "api", state: "merged", href: "#pr-30"},

        %{title: "Add auth", number: 24, branch: "auth-layer", state: "open", current: true}

      ]

    end

    test "renders layers top-first with the trunk anchoring the bottom" do

      assigns = %{layers: demo_layers()}

      html =

        rendered_to_string(

          ~H|<.stack_map id="stack-map" number={31} trunk="main" layers={@layers} />|

        )

      assert html =~ "Stack #31"

      assert html =~ "3 layers"

      frontend = :binary.match(html, "Add frontend") |> elem(0)

      api = :binary.match(html, "Add API") |> elem(0)

      auth = :binary.match(html, "Add auth") |> elem(0)

      trunk = :binary.match(html, ">main<") |> elem(0)

      assert frontend < api

      assert api < auth

      assert auth < trunk

    end

    test "marks the viewed layer aria-current and does not link it to itself" do

      assigns = %{layers: demo_layers()}

      html =

        rendered_to_string(

          ~H|<.stack_map id="stack-map" number={31} trunk="main" layers={@layers} />|

        )

      assert html =~ ~s(aria-current="page")

      assert html =~ ~s(href="#pr-32")

      refute html =~ ~r|<a[^>]*>\s*Add auth|

    end

    test "carries each layer's pull request state as a data attribute and glyph" do

      assigns = %{layers: demo_layers()}

      html =

        rendered_to_string(

          ~H|<.stack_map id="stack-map" number={31} trunk="main" layers={@layers} />|

        )

      assert html =~ ~s(data-state="draft")

      assert html =~ ~s(data-state="merged")

      assert html =~ ~s(data-state="open")

      assert html =~ ~s(data-icon="pull-request-draft")

      assert html =~ ~s(data-icon="pull-request-merged")

      assert html =~ ~s(data-icon="pull-request-open")

      assert html =~ ~s(data-icon="branch")

    end

    test "shows the add row and links the trunk only when given a destination" do

      assigns = %{layers: demo_layers()}

      bare =

        rendered_to_string(

          ~H|<.stack_map id="stack-map" number={31} trunk="main" layers={@layers} />|

        )

      refute bare =~ "Add to stack"

      refute bare =~ ~r|<a[^>]*>\s*main<|

      linked =

        rendered_to_string(~H"""

        <.stack_map

          id="stack-map"

          number={31}

          trunk="main"

          trunk_href="#main"

          add_href="#add"

          layers={@layers}

        />

        """)

      assert linked =~ "Add to stack"

      assert linked =~ ~s(href="#add")

      assert linked =~ ~s(href="#main")

    end

    test "names the stack for assistive technology and renders the action slot" do

      assigns = %{layers: demo_layers()}

      html =

        rendered_to_string(~H"""

        <.stack_map id="stack-map" number={31} trunk="main" layers={@layers}>

          <:action><button type="button">Unstack</button></:action>

        </.stack_map>

        """)

      assert html =~ ~s(aria-label="Stack #31")

      assert html =~ "Unstack"

    end

  end

  defp purge(module) do

    :code.purge(module)

    :code.delete(module)