## Specialized components

`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the only catalogued

`OpenAgentsWeb.Components.RepoHeader.repo_header/1` is the catalogued

forge-specific component. Surface-specific components can live in a focused

module when they encode real domain composition rather than a generic control.

`OpenAgentsWeb.UI.Graph`, `OpenAgentsWeb.UI.Landing`, and

`OpenAgentsWeb.UI.Circle` are the other surface modules.

## AI Elements

Four modules under `OpenAgentsWeb.AI` are ported from Vercel's AI Elements

(MIT). Each moduledoc names the substitutions the port made, so a later reader

can tell a deliberate swap from a typo:

| Module | What it covers |

| --- | --- |

| `AI.Conversation` | Transcript scroller, turns, suggestions, toolbar, persona |

| `AI.Reasoning` | Reasoning, chain of thought, tool calls, tasks, plans, checkpoints |

| `AI.PromptInput` | Composer, action menu, attachments, speech, model selectors, queue |

| `AI.Evidence` | Code blocks, terminals, sources, citations, artifacts, questions |

These four modules are catalogued **one entry per family**, not one per

function: `reasoning/1` and the trigger and body it wraps are one catalog

entry, because they are one thing a caller reaches for and the parts are only

legible inside the composition. Register the family head and exclude its parts

in `ComponentCatalog.documented_modules/0`, naming the family that demonstrates

each part. Around 110 components across the four modules would otherwise

produce an index rather than a catalog.

## Extension rules

  function component in `OpenAgentsWeb.UI` and the documented layout modules to

  appear here, so the catalog cannot drift behind the supported API.

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

  `OpenAgentsWeb.UI` is the general product component module: it combines the

  vendored Basecoat structure with the OpenAgents style pack, and new reusable

  primitives start there. Surface modules beside it — the SCV graph, the landing

  page, the issue tracker, and the four AI Elements ports under

  `OpenAgentsWeb.AI` — hold composition that is specific to one surface. Icon

  demos use the preferred vendored Apps SDK set; see `docs/ICONS.md` for the

  exceptional Heroicons fallback policy and current fallback inventory.

  The `OpenAgentsWeb.AI` modules are catalogued one entry per family rather than

  one per function. `reasoning/1` and the trigger and body it wraps are one

  entry, because they are one thing a caller reaches for, and the parts are only

  legible inside the composition. The parts are excluded in

  `documented_modules/0` with the family that demonstrates them.

  """

  @sections [

          summary: "Repository breadcrumb and tab bar with issue counts."

        }

      ]

    },

    %{

      title: "AI conversation",

      items: [

        %{

          slug: "ai-conversation",

          title: "Conversation",

          icon: "chat",

          source: "OpenAgentsWeb.AI.Conversation.conversation/1",

          summary:

            "The transcript scroller, pinned to the newest turn until the reader leaves it."

        },

        %{

          slug: "ai-message",

          title: "Message",

          icon: "comment",

          source: "OpenAgentsWeb.AI.Conversation.message/1",

          summary: "One turn: a face, a Markdown body, and the controls under it."

        },

        %{

          slug: "ai-shimmer",

          title: "Shimmer",

          icon: "sparkle",

          source: "OpenAgentsWeb.AI.Conversation.shimmer/1",

          summary: "A highlight travelling through a line, so waiting reads as work."

        },

        %{

          slug: "ai-suggestions",

          title: "Suggestions",

          icon: "lightbulb",

          source: "OpenAgentsWeb.AI.Conversation.suggestions/1",

          summary:

            "Openers the reader can send unedited, on a row that scrolls rather than wraps."

        },

        %{

          slug: "ai-toolbar",

          title: "Conversation toolbar",

          icon: "settings-slider",

          source: "OpenAgentsWeb.AI.Conversation.toolbar/1",

          summary: "The bar that floats over a transcript, named so the keyboard can reach it."

        },

        %{

          slug: "ai-controls",

          title: "Conversation controls",

          icon: "tools",

          source: "OpenAgentsWeb.AI.Conversation.controls/1",

          summary: "Grouped actions that stay legible over whatever they sit on."

        },

        %{

          slug: "ai-persona",

          title: "Persona",

          icon: "agent",

          source: "OpenAgentsWeb.AI.Conversation.persona/1",

          summary: "Who is answering, and what they are doing right now."

        }

      ]

    },

    %{

      title: "AI reasoning",

      items: [

        %{

          slug: "ai-reasoning",

          title: "Reasoning",

          icon: "brain",

          source: "OpenAgentsWeb.AI.Reasoning.reasoning/1",

          summary:

            "Model thinking on native disclosure: open while it streams, closed once it lands."

        },

        %{

          slug: "ai-chain-of-thought",

          title: "Chain of thought",

          icon: "nodes",

          source: "OpenAgentsWeb.AI.Reasoning.chain_of_thought/1",

          summary: "Steps down a rail, each one complete, active, or still pending."

        },

        %{

          slug: "ai-tool",

          title: "Tool call",

          icon: "settings-wrench",

          source: "OpenAgentsWeb.AI.Reasoning.tool/1",

          summary: "One call and its states, from streaming input to a denied result."

        },

        %{

          slug: "ai-task",

          title: "Task",

          icon: "tasks",

          source: "OpenAgentsWeb.AI.Reasoning.task/1",

          summary: "A piece of finished work and the files it touched."

        },

        %{

          slug: "ai-plan",

          title: "Plan",

          icon: "notebook-check",

          source: "OpenAgentsWeb.AI.Reasoning.plan/1",

          summary: "Intended steps on a card whose body collapses while its footer stays."

        },

        %{

          slug: "ai-checkpoint",

          title: "Checkpoint",

          icon: "flag",

          source: "OpenAgentsWeb.AI.Reasoning.checkpoint/1",

          summary: "A point the run can be restored to, marked in the transcript."

        }

      ]

    },

    %{

      title: "AI composer",

      items: [

        %{

          slug: "ai-prompt-input",

          title: "Prompt input",

          icon: "chat-compose",

          source: "OpenAgentsWeb.AI.PromptInput.prompt_input/1",

          summary: "The composer: a Phoenix form, a growing textarea, and a toolbar under it."

        },

        %{

          slug: "ai-prompt-input-action-menu",

          title: "Composer action menu",

          icon: "plus-circle",

          source: "OpenAgentsWeb.AI.PromptInput.prompt_input_action_menu/1",

          summary: "Attach and capture actions on a native popover, with no script."

        },

        %{

          slug: "ai-prompt-input-model-select",

          title: "Composer model select",

          icon: "dropdown",

          source: "OpenAgentsWeb.AI.PromptInput.prompt_input_model_select/1",

          summary: "A real select for the model, so the composer form carries the choice."

        },

        %{

          slug: "ai-attachments",

          title: "Attachments",

          icon: "paperclip",

          source: "OpenAgentsWeb.AI.PromptInput.attachments/1",

          summary: "Staged files as a grid, an inline row, or a list, each with an empty state."

        },

        %{

          slug: "ai-speech-input",

          title: "Speech input",

          icon: "mic",

          source: "OpenAgentsWeb.AI.PromptInput.speech_input/1",

          summary: "Push-to-talk whose whole visual state is CSS keyed off data attributes."

        },

        %{

          slug: "ai-mic-selector",

          title: "Microphone selector",

          icon: "voice",

          source: "OpenAgentsWeb.AI.PromptInput.mic_selector/1",

          summary: "Which device is listening, filled in from the browser after mount."

        },

        %{

          slug: "ai-model-selector",

          title: "Model selector",

          icon: "search",

          source: "OpenAgentsWeb.AI.PromptInput.model_selector/1",

          summary: "A searchable model palette on a popover, filtered in the browser."

        },

        %{

          slug: "ai-queue",

          title: "Queue",

          icon: "stack",

          source: "OpenAgentsWeb.AI.PromptInput.queue/1",

          summary: "Turns waiting to be sent, in sections that collapse."

        }

      ]

    },

    %{

      title: "AI evidence",

      items: [

        %{

          slug: "ai-code-block",

          title: "Code block",

          icon: "square-code",

          source: "OpenAgentsWeb.AI.Evidence.code_block/1",

          summary: "Filename, language, actions, and line numbers that cannot be selected."

        },

        %{

          slug: "ai-snippet",

          title: "Snippet",

          icon: "clipboard-copy",

          source: "OpenAgentsWeb.AI.Evidence.snippet/1",

          summary: "One command in a read-only field, beside the control that copies it."

        },

        %{

          slug: "ai-terminal",

          title: "Terminal",

          icon: "terminal",

          source: "OpenAgentsWeb.AI.Evidence.terminal/1",

          summary: "Command output on a fixed dark ground, with a caret while it runs."

        },

        %{

          slug: "ai-sources",

          title: "Sources",

          icon: "book-open",

          source: "OpenAgentsWeb.AI.Evidence.sources/1",

          summary: "What an answer was drawn from: counted first, listed on request."

        },

        %{

          slug: "ai-inline-citation",

          title: "Inline citation",

          icon: "quote",

          source: "OpenAgentsWeb.AI.Evidence.inline_citation/1",

          summary: "A hostname chip mid-sentence that opens onto the sources behind it."

        },

        %{

          slug: "ai-context",

          title: "Context meter",

          icon: "usage",

          source: "OpenAgentsWeb.AI.Evidence.context/1",

          summary: "How much of the window a turn spent, stated as a number and as an arc."

        },

        %{

          slug: "ai-artifact",

          title: "Artifact",

          icon: "document",

          source: "OpenAgentsWeb.AI.Evidence.artifact/1",

          summary: "Something the model produced, framed with the actions that act on it."

        },

        %{

          slug: "ai-confirmation",

          title: "Confirmation",

          icon: "shield-check",

          source: "OpenAgentsWeb.AI.Evidence.confirmation/1",

          summary: "An ask before an irreversible step, which keeps showing its answer."

        },

        %{

          slug: "ai-question",

          title: "Question",

          icon: "question-mark-circle",

          source: "OpenAgentsWeb.AI.Evidence.question/1",

          summary: "Choices as real radios or checkboxes, plus room to say something else."

        },

        %{

          slug: "ai-image",

          title: "Image",

          icon: "file-image",

          source: "OpenAgentsWeb.AI.Evidence.image/1",

          summary: "A generated image in a frame that cannot push the page around."

        }

      ]

    }

  ]

      OpenAgentsWeb.UI.Graph => [:graph_defs, :graph_surface],

      OpenAgentsWeb.Components.RepoHeader => [],

      OpenAgentsWeb.UI.Landing => [],

      OpenAgentsWeb.UI.Circle => []

      OpenAgentsWeb.UI.Circle => [],

      # The AI Elements ports are catalogued one entry per family, not one per

      # function. A family is a head a caller reaches for and the parts it is

      # composed from; the parts are excluded here and demoed inside the head's

      # page, where the composition is the thing worth reading.

      OpenAgentsWeb.AI.Conversation => [

        # The scroller's own parts: the column of turns, the placeholder it

        # shows when there are none, and the pinned control. All three are

        # demoed through `conversation/1`.

        :conversation_content,

        :conversation_empty_state,

        :conversation_scroll_button,

        # A turn is assembled from these four in the order the caller chooses,

        # so they are demoed through `message/1`.

        :message_content,

        :message_avatar,

        :message_actions,

        :message_action,

        # One opener out of the row; demoed through `suggestions/1`.

        :suggestion

      ],

      OpenAgentsWeb.AI.Reasoning => [

        # The disclosure summary and the streamed body; demoed through

        # `reasoning/1`, which is where the open and closed states read.

        :reasoning_trigger,

        :reasoning_content,

        # The header, body, steps, search results, and figures of a chain;

        # demoed through `chain_of_thought/1`.

        :chain_of_thought_header,

        :chain_of_thought_content,

        :chain_of_thought_step,

        :chain_of_thought_search_results,

        :chain_of_thought_search_result,

        :chain_of_thought_image,

        # A call's header, state badge, body, arguments, and result. The state

        # badge carries the taxonomy, so all seven states are demoed through

        # `tool/1` rather than on a page of their own.

        :tool_header,

        :tool_status_badge,

        :tool_content,

        :tool_input,

        :tool_output,

        # The summary, body, entries, and file chips of one task; demoed

        # through `task/1`.

        :task_trigger,

        :task_content,

        :task_item,

        :task_item_file,

        # A plan's name, prose, actions, and disclosure control. `plan/1` takes

        # slots, so these only make sense inside it and are demoed there.

        :plan_title,

        :plan_description,

        :plan_action,

        :plan_trigger,

        # The glyph and the restore control inside a checkpoint; demoed through

        # `checkpoint/1`.

        :checkpoint_icon,

        :checkpoint_trigger

      ],

      OpenAgentsWeb.AI.PromptInput => [

        # The composer's shell: the input group, the textarea bound to the

        # form field, the two bands around it, and the toolbar that holds the

        # tools and the submit control. All demoed through `prompt_input/1`,

        # which is the only place their geometry is legible.

        :prompt_input_body,

        :prompt_input_textarea,

        :prompt_input_header,

        :prompt_input_footer,

        :prompt_input_toolbar,

        :prompt_input_tools,

        :prompt_input_button,

        :prompt_input_submit,

        # The popover, its list, its rows, and the two actions that ship with

        # it; demoed through `prompt_input_action_menu/1`.

        :prompt_input_action_menu_trigger,

        :prompt_input_action_menu_content,

        :prompt_input_action_menu_item,

        :prompt_input_action_add_attachments,

        :prompt_input_action_add_screenshot,

        # One option in the composer's model select; demoed through

        # `prompt_input_model_select/1`.

        :prompt_input_model_select_item,

        # One staged file and its parts. The three layout variants are what

        # distinguish them, so they are demoed together through

        # `attachments/1`.

        :attachment,

        :attachment_preview,

        :attachment_info,

        :attachment_remove,

        :attachment_empty,

        # One device in the microphone list; demoed through `mic_selector/1`.

        :mic_selector_item,

        # The trigger, the search field, and the list, groups, rows, and

        # trimmings of the model palette; demoed through `model_selector/1`,

        # where the filtering hook is what makes them worth looking at.

        :model_selector_trigger,

        :model_selector_input,

        :model_selector_list,

        :model_selector_empty,

        :model_selector_group,

        :model_selector_item,

        :model_selector_name,

        :model_selector_shortcut,

        :model_selector_separator,

        :model_selector_logo,

        :model_selector_logo_group,

        # A queue's sections, rows, and the attachments hanging off a row; all

        # demoed through `queue/1`.

        :queue_section,

        :queue_section_trigger,

        :queue_section_label,

        :queue_section_content,

        :queue_list,

        :queue_item,

        :queue_item_indicator,

        :queue_item_content,

        :queue_item_description,

        :queue_item_actions,

        :queue_item_action,

        :queue_item_attachment,

        :queue_item_image,

        :queue_item_file,

        :queue_empty

      ],

      OpenAgentsWeb.AI.Evidence => [

        # One line of terminal output; demoed through `terminal/1`, which owns

        # the ground it is legible against.

        :terminal_line,

        # One source in the list; demoed through `sources/1`.

        :source,

        # The contents of a citation's card; demoed through

        # `inline_citation/1`, since the card only exists inside it.

        :inline_citation_source,

        :inline_citation_quote,

        # A control in an artifact's header; demoed through `artifact/1`.

        :artifact_action,

        # The approve and deny controls; demoed through `confirmation/1`,

        # which is what decides whether they are still shown.

        :confirmation_action

      ]

    }

  end

end

              url={source[:url]}

              description={source[:description]}

            >

              {render_slot(source)}

              <%!-- The slot's three attributes already say everything a source

                    has, so `<:source url=... title=... />` is the ordinary call

                    and carries no content. `render_slot/1` on an entry whose

                    `inner_block` is nil raises, so ask before rendering. --%>

              {source[:inner_block] && render_slot(source)}

            </.inline_citation_source>

          </span>

        </span>

  use OpenAgentsWeb, :live_view

  alias OpenAgentsWeb.AI.Conversation

  alias OpenAgentsWeb.AI.Evidence

  alias OpenAgentsWeb.AI.PromptInput

  alias OpenAgentsWeb.AI.Reasoning

  alias OpenAgentsWeb.ComponentCatalog

  alias OpenAgentsWeb.UI.Circle

  alias OpenAgentsWeb.UI.Graph

    }

  ]

  # One call per tool state. `tool_status_badge/1` is the taxonomy, so the page

  # that demonstrates a tool call has to walk all seven; a single successful

  # call would document the one state nobody needs help reading.

  @demo_tool_calls [

    %{

      state: "input-streaming",

      name: "grep",

      input: ~s({"pattern": "capability_manifest", "path": "lib/openage),

      output: nil,

      error: nil

    },

    %{

      state: "input-available",

      name: "read",

      input: ~s({"path": "lib/openagents/cloud/placement.ex", "offset": 1, "limit": 120}),

      output: nil,

      error: nil

    },

    %{

      state: "output-available",

      name: "bash",

      input: ~s({"command": "mix test test/openagents/forge/targets_test.exs --seed 0"}),

      output: "Finished in 2.4 seconds\n1416 tests, 0 failures, 14 excluded",

      error: nil

    },

    %{

      state: "output-error",

      name: "bash",

      input: ~s({"command": "mix precommit"}),

      output: nil,

      error: "** (Mix) Formatter would change lib/openagents_web/live/chat_live.ex"

    },

    %{

      state: "approval-requested",

      name: "write",

      input: ~s({"path": "lib/openagents/forge/targets.ex", "bytes": 4213}),

      output: nil,

      error: nil

    },

    %{

      state: "approval-responded",

      name: "write",

      input: ~s({"path": "lib/openagents/forge/targets.ex", "bytes": 4213}),

      output: "Approved by mason. 3 hunks written.",

      error: nil

    },

    %{

      state: "output-denied",

      name: "bash",

      input: ~s({"command": "git push openagents HEAD:main"}),

      output: nil,

      error: "Denied by mason: this run is not allowed to push."

    }

  ]

  # Real Elixir rather than a fragment, so the line-number gutter and the

  # horizontal overflow are both exercised the way they will be in use.

  @demo_code """

  def admit(%Run{} = run, fleet) do

    with :ok <- Capability.fresh?(run.manifest),

         {:ok, node} <- Placement.choose(fleet, run.requirements) do

      {:ok, %{run | node: node, admitted_at: DateTime.utc_now()}}

    else

      {:error, :manifest_expired} = error -> error

      {:error, reason} -> {:error, {:unplaceable, reason}}

    end

  end

  """

  @demo_terminal_output """

  $ mix test test/openagents/forge/targets_test.exs --seed 0

  Running ExUnit with seed: 0, max_cases: 20

  ....................

  Finished in 2.4 seconds (0.9s async, 1.5s sync)

  20 tests, 0 failures

  $ mix test test/openagents/forge/targets_test.exs --seed 1

  Running ExUnit with seed: 1, max_cases: 20

  ......F.............

  """

  # Everyone `git shortlog -sn` names on this repository, most commits first.

  @demo_repo_contributors [%{name: "AtlantisPleb"}, %{name: "Christopher David"}]

        as: :demo

      )

    # The composer is a real `to_form/2` assign, because that is the only way

    # `prompt_input_textarea/1` can be bound to a field rather than a string.

    composer_form =

      to_form(%{"message" => "Which module decides whether an SCV run is admitted?"},

        as: :composer

      )

    {:ok,

     socket

     |> assign(:form, form)

     |> assign(:composer_form, composer_form)

     |> assign(:rows, @sample_rows)

     |> assign(:openagents_icons, @openagents_icons)

     |> assign(:demo_user, @demo_user)

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

  end

  # `speech_input/1` requires the name of an event to push recognized text to.

  # Without a matching clause the catalog page would crash the first time

  # someone spoke into it, which is a worse demo than no demo.

  def handle_event("demo_transcript", %{"text" => text}, socket) do

    {:noreply, assign(socket, :composer_form, to_form(%{"message" => text}, as: :composer))}

  end

  @impl true

  def render(%{live_action: :index} = assigns) do

    ~H"""

    <div id="components-index">

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

      <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

        Live examples of every supported function component in <code>OpenAgentsWeb.UI</code>, <code>OpenAgentsWeb.Layouts</code>, the surface modules beside them, and the

        repository header. A test asserts this page covers every public component

        in those modules.

        in those modules. The <code>OpenAgentsWeb.AI</code>

        sections are catalogued one entry per family, so a page there shows a

        whole composition rather than one of its parts.

        Planned GitHub-shaped components are listed in <code>docs/component-library.md</code>.

      </p>

  attr :item, :map, required: true

  attr :form, :any, default: nil

  attr :composer_form, :any, default: nil

  attr :rows, :list, default: []

  attr :openagents_icons, :list, default: []

  attr :demo_user, :map, default: nil

    """

  end

  # ── AI conversation ───────────────────────────────────────────────────────

  # Ported from Vercel's AI Elements. Each page composes a whole family the way

  # a caller composes it, and shows the states the family exists to keep apart:

  # a tool call has seven, and a demo of one of them documents nothing.

  defp component_demo(%{item: %{slug: "ai-conversation"}} = assigns) do

    ~H"""

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

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

        Two boxes: the outer one positions and clips, the inner one scrolls. That split is

        what lets the scroll control hold still at the bottom edge while the transcript

        moves behind it. A colocated hook keeps the viewport pinned while the reader is

        already at the bottom, and lets go the moment they scroll up.

      </p>

      <Conversation.conversation

        id="demo-conversation"

        class="h-72 rounded-lg border border-border"

      >

        <Conversation.conversation_content class="space-y-6 p-4">

          <Conversation.message from="system">

            <Conversation.message_content text="Run `scv.13` opened on `OpenAgentsInc/openagents.com`." />

          </Conversation.message>

          <Conversation.message from="user">

            <Conversation.message_content text="Why did scv-13 revert its own patch?" />

          </Conversation.message>

          <Conversation.message from="assistant">

            <Conversation.message_avatar name="Sarah" />

            <Conversation.message_content text="`targets_test.exs` stayed red after the third attempt, so the run hit the revert rule in `SELF-EDIT-001` and put the worktree back where it found it." />

          </Conversation.message>

          <Conversation.message from="user">

            <Conversation.message_content text="Show me the third attempt." />

          </Conversation.message>

          <Conversation.message from="assistant">

            <Conversation.message_avatar name="Sarah" />

            <Conversation.message_content

              text="Reading the transcript for attempt three"

              streaming

            />

          </Conversation.message>

        </Conversation.conversation_content>

      </Conversation.conversation>

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

        With nothing in it the same scroller carries a placeholder rather than an empty

        box, and the scroll control is left off, because there is nowhere to go.

      </p>

      <Conversation.conversation

        id="demo-conversation-empty"

        scroll_button={false}

        class="h-44 rounded-lg border border-border"

      >

        <Conversation.conversation_content class="grid h-full place-items-center p-4">

          <Conversation.conversation_empty_state

            icon="chat"

            title="No messages yet"

            description="Ask about a repository, or start an SCV run."

          />

        </Conversation.conversation_content>

      </Conversation.conversation>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-message"}} = assigns) do

    ~H"""

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

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

        A turn is a row of siblings the caller orders, not one component with a slot per

        position: an assistant turn wants a face, a body, and controls; a user turn wants

        only a body, and dropping a part should not mean passing an empty slot. The <code>from</code>

        attribute lands as the marker class every rule inside the body reads, which is

        what moves a user turn to the right and gives it a bubble.

      </p>

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

        <Conversation.message id="demo-message-user" from="user">

          <Conversation.message_content text="Which module decides whether an SCV run is admitted?" />

        </Conversation.message>

        <Conversation.message id="demo-message-assistant" from="assistant">

          <Conversation.message_avatar name="Sarah" />

          <Conversation.message_content text="`OpenAgents.Forge.Targets` scores the candidates and `Placement` admits one. The refusal path is the interesting half: an expired capability manifest is refused before scoring, so it never reaches the queue." />

          <Conversation.message_actions>

            <Conversation.message_action label="Copy">

              <UI.icon name="copy" class="size-4" />

            </Conversation.message_action>

            <Conversation.message_action label="Regenerate">

              <UI.icon name="regenerate" class="size-4" />

            </Conversation.message_action>

            <Conversation.message_action label="Good answer">

              <UI.icon name="thumb-up" class="size-4" />

            </Conversation.message_action>

            <Conversation.message_action label="Bad answer">

              <UI.icon name="thumb-down" class="size-4" />

            </Conversation.message_action>

          </Conversation.message_actions>

        </Conversation.message>

        <Conversation.message id="demo-message-streaming" from="assistant">

          <Conversation.message_avatar name="Sarah" />

          <Conversation.message_content

            text="Checking whether `Placement.admit/2` is still"

            streaming

          />

        </Conversation.message>

        <Conversation.message id="demo-message-system" from="system">

          <Conversation.message_content text="Budget window exhausted. The run resumes at the next window." />

        </Conversation.message>

      </div>

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

        The streaming turn is the one worth reading twice. Its text ends mid-sentence and

        still renders, because <code>streaming</code>

        tells the Markdown renderer to close what the model has not closed yet.

      </p>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-shimmer"}} = assigns) do

    ~H"""

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

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

        A highlight travelling through the text rather than a spinner beside it: the words

        stay readable the whole time, so waiting says what it is waiting for. <code>spread</code>

        widens the band, which is how a long line and a short one can take the same time

        to sweep.

      </p>

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

        <Conversation.shimmer id="demo-shimmer-short" text="Thinking" />

        <Conversation.shimmer

          id="demo-shimmer-line"

          text="Reading lib/openagents/forge/targets.ex"

        />

        <Conversation.shimmer

          id="demo-shimmer-wide"

          text="Planning the change across four files"

          spread={4}

        />

        <Conversation.shimmer

          id="demo-shimmer-heading"

          text="Working"

          tag="h3"

          class="text-lg font-medium"

        />

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-suggestions"}} = assigns) do

    ~H"""

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

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

        Openers a reader can send unedited. The row scrolls sideways rather than wrapping,

        because a wrapped set changes height as it changes length, and a control that

        moves the composer down the page every time the model finishes is worse than one

        the reader has to scroll.

      </p>

      <Conversation.suggestions id="demo-suggestions">

        <Conversation.suggestion suggestion="What changed in this repository today?" />

        <Conversation.suggestion suggestion="Why did the last SCV run refuse?" />

        <Conversation.suggestion suggestion="Open an issue for the flaky targets test" />

        <Conversation.suggestion suggestion="Summarise the staging deploy" variant={:secondary} />

        <Conversation.suggestion suggestion="Show me the diff" variant={:ghost} size={:xs} />

      </Conversation.suggestions>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-toolbar"}} = assigns) do

    ~H"""

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

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

        The bar that floats over a transcript. It takes a <code>label</code>

        because a bar of icon buttons with no name is a set of unexplained glyphs to

        anyone not looking at it.

      </p>

      <div class="relative h-40 rounded-lg border border-border bg-muted/30">

        <Conversation.toolbar id="demo-toolbar" label="Transcript actions">

          <Conversation.message_action label="Search this run">

            <UI.icon name="search" class="size-4" />

          </Conversation.message_action>

          <Conversation.message_action label="Export transcript">

            <UI.icon name="download" class="size-4" />

          </Conversation.message_action>

          <Conversation.message_action label="Share run">

            <UI.icon name="share" class="size-4" />

          </Conversation.message_action>

        </Conversation.toolbar>

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-controls"}} = assigns) do

    ~H"""

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

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

        The same idea one level down: a group of actions that has to stay legible over

        whatever it sits on. Here it sits over the transcript ground rather than the page

        ground, which is the case the treatment exists for.

      </p>

      <div class="relative h-40 rounded-lg border border-border bg-muted/30 p-4">

        <Conversation.controls id="demo-controls" label="Run controls">

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

            <UI.icon name="pause" class="size-4" /> Pause

          </UI.button>

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

            <UI.icon name="stop" class="size-4" /> Stop

          </UI.button>

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

            <UI.icon name="arrow-rotate-cw" class="size-4" /> Retry

          </UI.button>

        </Conversation.controls>

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-persona"}} = assigns) do

    ~H"""

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

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

        Upstream this is a WebGL canvas playing one of six remote animations. What

        survived the port is the contract: a fixed set of states, one presence marker, and

        a name. Two states borrow a marker rather than introduce a colour — <code>thinking</code>

        reads as running and <code>asleep</code>

        as ended — and the marker is decorative, because the word beside it already says

        it.

      </p>

      <div class="grid gap-4 sm:grid-cols-2">

        <Conversation.persona id="demo-persona-idle" name="Sarah" state="idle" />

        <Conversation.persona id="demo-persona-listening" name="Sarah" state="listening" />

        <Conversation.persona id="demo-persona-thinking" name="Sarah" state="thinking" />

        <Conversation.persona id="demo-persona-speaking" name="Sarah" state="speaking" />

        <Conversation.persona id="demo-persona-asleep" name="Sarah" state="asleep" />

        <Conversation.persona

          id="demo-persona-labelled"

          name="scv-13"

          state="thinking"

          status_label="Reverting the third attempt"

        />

      </div>

    </div>

    """

  end

  # ── AI reasoning ──────────────────────────────────────────────────────────

  defp component_demo(%{item: %{slug: "ai-reasoning"}} = assigns) do

    ~H"""

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

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

        A native <code>details</code>, so the disclosure needs no script and carries its

        own <code>aria-expanded</code>. The server writes the initial state, which keeps

        "open while it streams, closed once it lands" a LiveView decision: pass

        <code phx-no-curly-interpolation>open={@streaming}</code>

        and re-render. A reader who toggles it owns it until the next render of that

        attribute.

      </p>

      <Reasoning.reasoning id="demo-reasoning-open" open>

        <Reasoning.reasoning_trigger streaming />

        <Reasoning.reasoning_content

          text="The question is about admission, not scoring. `Targets` ranks candidates, but the refusal happens earlier"

          streaming

        />

      </Reasoning.reasoning>

      <Reasoning.reasoning id="demo-reasoning-closed">

        <Reasoning.reasoning_trigger duration={12} />

        <Reasoning.reasoning_content text="The question is about admission, not scoring. `Targets` ranks candidates, but the refusal happens earlier, in the capability check, so an expired manifest never reaches the queue." />

      </Reasoning.reasoning>

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

        Open above, closed below. The trigger says the same thing either way, and it is

        the only part that changes when the stream ends: the pulsing "Thinking…" becomes

        a duration.

      </p>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-chain-of-thought"}} = assigns) do

    ~H"""

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

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

        Steps down a rail. <code>status</code>

        is the whole design: the step being worked reads at full strength, the ones behind

        it are muted, and the ones ahead are dimmed further, so the reader's eye lands on

        the present without an animation asking it to.

      </p>

      <Reasoning.chain_of_thought id="demo-cot" open>

        <Reasoning.chain_of_thought_header>

          Answering a question about this repository

        </Reasoning.chain_of_thought_header>

        <Reasoning.chain_of_thought_content>

          <Reasoning.chain_of_thought_step

            icon="search"

            label="Search for the admission path"

            description="Ranked by how often each file names a capability manifest."

            status={:complete}

          >

            <Reasoning.chain_of_thought_search_results>

              <Reasoning.chain_of_thought_search_result>

                lib/openagents/forge/targets.ex

              </Reasoning.chain_of_thought_search_result>

              <Reasoning.chain_of_thought_search_result>

                lib/openagents/cloud/placement.ex

              </Reasoning.chain_of_thought_search_result>

              <Reasoning.chain_of_thought_search_result>

                docs/cloud/INVARIANTS.md

              </Reasoning.chain_of_thought_search_result>

            </Reasoning.chain_of_thought_search_results>

          </Reasoning.chain_of_thought_step>

          <Reasoning.chain_of_thought_step

            icon="document"

            label="Read Placement.admit/2"

            description="The refusal is ahead of the scoring, not inside it."

            status={:complete}

          />

          <Reasoning.chain_of_thought_step

            icon="chart"

            label="Check the last twenty runs for the same refusal"

            status={:active}

          >

            <Reasoning.chain_of_thought_image caption="Refusals by reason, last twenty runs">

              <img src={~p"/images/logo.svg"} alt="" class="h-24 w-auto opacity-60" />

            </Reasoning.chain_of_thought_image>

          </Reasoning.chain_of_thought_step>

          <Reasoning.chain_of_thought_step

            icon="edit-pencil"

            label="Write the answer"

            status={:pending}

          />

        </Reasoning.chain_of_thought_content>

      </Reasoning.chain_of_thought>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "ai-tool"}} = assigns) do

    assigns = assign(assigns, :tool_calls, @demo_tool_calls)

    ~H"""

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

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

        Seven states, all of them here, because the badge is the taxonomy and one happy

        call documents none of it. Four describe a call's own progress — arguments still

        arriving, arguments complete, a result, a failure — and three describe a call that

        needed a person: waiting on approval, answered, and refused.

      </p>

      <Reasoning.tool :for={call <- @tool_calls} id={"demo-tool-#{call.state}"} open>

        <Reasoning.tool_header type={"tool-" <> call.name} tool_name={call.name} state={call.state} />

        <Reasoning.tool_content>

          <Reasoning.tool_input input={call.input} />

          <Reasoning.tool_output

            :if={call.output || call.error}

            output={call.output}

            error_text={call.error}

          />

        </Reasoning.tool_content>

      </Reasoning.tool>

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

        Arguments and results are preformatted text, not highlighted code: the code-block

        port is <.link

          patch={~p"/components/ai-code-block"}

          class="underline underline-offset-2 hover:no-underline"

        >a separate component</.link>, and claiming syntax highlighting that is not

        happening would be worse than plain text.