color: var(--text-muted);

}

/* The card is the control, so the card carries the focus state. Basecoat's

   `.textarea:focus` paints a 3px ring, and the composer autofocuses on mount,

   so that ring drew a second rounded rectangle inside the card from the moment

   the page loaded. `.composer-card:focus-within` already states the same

   thing, once, on the right element. */

.composer-input:focus,

.composer-input:focus-visible {

  border: 0;

  box-shadow: none;

  outline: none;

}

.composer-trailing {

  display: flex;

  align-items: center;

    margin-inline: auto;

  }

  /* The prose column needs a basis. Without one it shrinks to fit whatever the

     action row demands, and that row holds four text buttons -- so the heading

     and its paragraph were squeezed into a ten-character ribbon while the

     controls took the width. */

  .memory-header {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    gap: 12px 16px;

  }

  .memory-header > :first-child {

    flex: 1 1 22rem;

    min-width: 0;

  }

  .memory-header h1 {

    color: var(--text-primary);

    font-size: 1.125rem;

    font-weight: 600;

    line-height: 1.4;

  }

  .memory-header p {

    max-width: 60ch;

    padding-block-start: 4px;

    color: var(--text-muted);

    font-size: 0.875rem;

    line-height: 1.5;

  }

  .memory-header__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

  }

    font-size: 0.8125rem;

  }

}

/* ── Login ────────────────────────────────────────────────────────────────── */

/* Signing in leaves the page, so between the click and the redirect there is a

 * window where an idle-looking button invites a second click and a second

 * OAuth attempt. The pending state closes it.

 *

 * Both `[data-pending]` and `:disabled` select it: the hook sets the first, but

 * a browser restoring the page on back-navigation, or one running no script at

 * all, should still not show a spinner-less disabled button. */

@layer components {

  .login-form {

    margin: 0;

  }

  .login-button__spinner {

    display: none;

    animation: login-spin 900ms linear infinite;

  }

  .login-button[data-pending] .login-button__mark,

  .login-button:disabled .login-button__mark {

    display: none;

  }

  .login-button[data-pending] .login-button__spinner,

  .login-button:disabled .login-button__spinner {

    display: inline-flex;

  }

  .login-button:disabled {

    cursor: not-allowed;

    opacity: 0.6;

  }

  @keyframes login-spin {

    to {

      rotate: 360deg;

    }

  }

  /* The spinner is the only thing reporting that the round-trip started, so it

     keeps turning; the disabled state and the swapped glyph already carry the

     meaning without it, which is what a reduced-motion reader gets. */

  @media (prefers-reduced-motion: reduce) {

    .login-button__spinner {

      animation: none;

    }

  }

}

  def admin?(_user), do: false

  @doc "The configured operator GitHub IDs."

  # The owner, by GitHub's immutable numeric id. Operator access is otherwise

  # configured per environment, and `runtime.exs` replaces the list wholesale

  # from `OPENAGENTS_ADMIN_GITHUB_IDS` -- so an environment whose variable is

  # unset, mistyped, or lost in a redeploy would lock the owner out of the very

  # surface used to fix it. Unioned in here rather than defaulted in config so

  # no environment can drop it.

  @owner_github_id 14_167_547

  @doc """

  The operator GitHub IDs: the owner, plus whatever this environment configures.

  """

  @spec admin_github_ids() :: [pos_integer()]

  def admin_github_ids do

    :openagents

    |> Application.get_env(:admin_github_ids, [])

    |> Enum.filter(&(is_integer(&1) and &1 > 0))

    configured =

      :openagents

      |> Application.get_env(:admin_github_ids, [])

      |> Enum.filter(&(is_integer(&1) and &1 > 0))

    Enum.uniq([@owner_github_id | configured])

  end

  @doc false

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

          summary: "Ancestor trail ending in the current page, which is not a link."

        },

        %{

          slug: "openagents-github-login",

          title: "GitHub login",

          icon: "brand-github",

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

          summary: "Sign-in form that goes pending on submit."

        },

        %{

          slug: "openagents-copy-button",

          title: "Copy button",

        <%= if @current_scope do %>

          <.account_dropdown current_scope={@current_scope} />

        <% else %>

          <.button navigate={~p"/#github-tools"} variant={:primary} size={:sm}>

            <UI.icon name="brand-github" /> Log in with GitHub

          </.button>

          <%!-- A real sign-in, not a link to the homepage's anchor: a control

          labelled "log in" that navigates somewhere else instead is lying

          about what it does. --%>

          <UI.github_login id="command-bar-signin" size={:sm} />

        <% end %>

      </div>

    </header>

    """

  end

  @doc """

  The GitHub sign-in control.

  A real form POST, not a link: signing in starts an OAuth round-trip, and a

  control labelled "log in" that navigates somewhere else instead is lying

  about what it does.

  The round-trip leaves the page, so there is a window where the button looks

  idle and clickable while a redirect is already in flight. Submitting swaps

  the mark for a spinner and disables the control, which both reports that

  something is happening and stops a second submission creating a second OAuth

  attempt.

  The pending state is applied by a hook, but it is also expressed for

  `:disabled` alone, so a browser that re-enables the button on back-navigation

  or runs no script still shows the right thing.

  """

  attr :id, :string, required: true

  attr :label, :string, default: "Log in with GitHub"

  attr :variant, :atom, default: :primary

  attr :size, :atom, default: :md

  attr :action, :string,

    default: "/auth/github?github_tools=enabled",

    doc: "where the sign-in posts; the caller owns the route"

  attr :class, :any, default: nil

  attr :rest, :global

  def github_login(assigns) do

    ~H"""

    <.form

      for={%{}}

      as={:auth}

      id={"#{@id}-form"}

      action={@action}

      method="post"

      class="login-form"

      phx-hook=".LoginPending"

      {@rest}

    >

      <.button id={@id} type="submit" variant={@variant} size={@size} class={["login-button", @class]}>

        <.icon name="brand-github" class="login-button__mark" />

        <.icon name="circle-dashed" class="login-button__spinner" />

        {@label}

      </.button>

    </.form>

    <script :type={Phoenix.LiveView.ColocatedHook} name=".LoginPending">

      export default {

        mounted() {

          this.button = this.el.querySelector("button[type=submit]")

          this.onSubmit = () => {

            if (!this.button) return

            this.button.dataset.pending = "true"

            // Disabled after the event, not during it: disabling a submit

            // button inside its own submit handler cancels the submission in

            // some browsers.

            window.setTimeout(() => { this.button.disabled = true }, 0)

          }

          this.el.addEventListener("submit", this.onSubmit)

        },

        destroyed() {

          this.el.removeEventListener("submit", this.onSubmit)

        },

      }

    </script>

    """

  end

  @doc """

  A control that copies text to the clipboard and reports that it did.

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Admin">

      <main id="admin-page" class="app-shell admin-shell">

        <%!-- The same bar every other surface renders, so moving between them

              reads as one application. The lockup carries only the way back:

              nothing in the product links here, and this is not a place to

              navigate onward from. --%>

        <Layouts.command_bar aria_label="OpenAgents operator panel" current_user={@current_user}>

          <:lockup>

            <.button

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="admin" aria-label="Voice call recordings">

          <header class="admin-heading">

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="SCV Codex accounts">

      <main id="admin-scv-accounts-page" class="app-shell admin-shell">

        <Layouts.command_bar aria_label="SCV Codex account settings" current_user={@current_user}>

          <:lockup>

            <.button

              id="return-to-operator"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/admin")}

            >

              <.icon name="arrow-left" /> OPERATOR

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="admin space-y-8" aria-labelledby="scv-codex-heading">

          <header class="admin-heading">

            <h1 id="scv-codex-heading">Codex accounts for SCVs</h1>

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Changelog">

      <main id="changelog-page" class="app-shell changelog-shell">

        <Layouts.command_bar aria_label="OpenAgents changelog" current_user={@current_user}>

          <:lockup>

            <.button

              :if={@current_user}

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="changelog" aria-label="Changelog">

          <header class="changelog-heading">

            <div>

  @impl true

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash}>

    <Layouts.app flash={@flash} current_scope={assigns[:current_scope]} title="Code">

      <main id="code-blob-page" class="app-shell code-shell">

        <Layouts.command_bar aria_label="Sarah code" current_user={@current_user}>

          <:lockup>

            <.button

              id="code-back-to-changelog"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate("/changelog")}

            >

              <.icon name="arrow-left" /> CHANGELOG

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="code" aria-label="File view">

          <header class="code-heading">

            <div>

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Commit">

      <main id="code-commit-page" class="app-shell code-shell">

        <Layouts.command_bar aria_label="Sarah code" current_user={@current_user}>

          <:lockup>

            <.button

              id="code-back-to-repo"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(@base)}

            >

              <.icon name="arrow-left" /> {@repo}

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="code" aria-label="Commit view">

          <header class="code-heading">

            <div>

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Code">

      <main id="code-repo-page" class="app-shell code-shell">

        <Layouts.command_bar aria_label="OpenAgents code" current_user={@current_user}>

          <:lockup>

            <.button

              :if={@current_user}

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="code" aria-label="Repository">

          <header class="code-heading">

            <div>

    """

  end

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

    ~H"""

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

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

        A real form POST, because signing in starts an OAuth round-trip. Submitting

        swaps the mark for a spinner and disables the control: the round-trip leaves

        the page, so without it there is a window where the button looks idle and

        clickable while a redirect is already in flight, and a second click makes a

        second OAuth attempt. The pending state is also expressed for <code>:disabled</code>

        alone, so a browser restoring the page on

        back-navigation still shows the right thing.

      </p>

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

        <UI.github_login id="demo-github-login" />

        <UI.button variant={:primary} class="login-button" disabled>

          <UI.icon name="brand-github" class="login-button__mark" />

          <UI.icon name="circle-dashed" class="login-button__spinner" /> Log in with GitHub

        </UI.button>

      </div>

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

        The second is the pending state, shown by disabling it directly.

      </p>

    </div>

    """

  end

  # ── Landing ───────────────────────────────────────────────────────────────

  #

  # These demo at reduced scale inside the documentation column. A hero is

  @impl true

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash}>

    <Layouts.app flash={@flash} current_scope={assigns[:current_scope]} title="Computers">

      <main id="computers-page" class="app-shell computers-shell">

        <Layouts.command_bar aria_label="Sarah computers" current_user={@current_user}>

          <:lockup>

            <.button

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section id="computers-manager" class="computers" aria-label="Paired computers">

          <div class="computers__inner">

            <header class="computers-heading">

                View issues

              </.button>

            <% else %>

              <.form

                for={%{}}

                as={:auth}

                action={~p"/auth/github?github_tools=enabled"}

                method="post"

                class="m-0"

              >

                <.button type="submit" variant={:primary} size={:lg} id="home-cta-signin">

                  <.icon name="brand-github" /> Log in with GitHub

                </.button>

              </.form>

              <.github_login id="home-cta-signin" size={:lg} />

              <%!-- Quieter than the action beside it. `variant` defaults to

              `:primary`, so two filled buttons sat side by side stating that

              both were the thing to do, which leaves a reader picking rather

  @impl true

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash}>

    <Layouts.app flash={@flash} current_scope={assigns[:current_scope]} title="Leaderboard">

      <main id="leaderboard-page" class="app-shell leaderboard-shell">

        <Layouts.command_bar aria_label="OpenAgents leaderboard" current_user={@current_user}>

          <:lockup>

            <.button

              :if={@current_user}

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="leaderboard" aria-label="Token leaderboard">

          <header class="leaderboard-heading">

            <h1>Leaderboard</h1>

  @impl true

  def render(assigns) do

    ~H"""

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

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Status">

      <main id="network-status-page" class="app-shell status-shell">

        <Layouts.command_bar aria_label="OpenAgents network status" current_user={@current_user}>

          <:lockup>

            <.button

              :if={@current_user}

              id="return-to-conversation"

              variant={:chip}

              size={:xs}

              phx-click={JS.navigate(~p"/chat")}

            >

              <.icon name="arrow-left" /> RETURN TO CONVERSATION

            </.button>

          </:lockup>

        </Layouts.command_bar>

        <section class="status" aria-label="Network status">

          <header class="status-heading">

            <div>

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash}>

    <Layouts.app flash={@flash} current_scope={assigns[:current_scope]}>

      <main

        id="ui-gallery"

        class="mx-auto flex h-dvh w-full max-w-[1040px] flex-col overflow-y-auto border-x border-[var(--line)] bg-[var(--ink-surface)]"

      github_avatar_url: avatar_url || "https://avatars.githubusercontent.com/u/#{id}?v=4"

    }

  end

  describe "operator identity" do

    test "the owner is an operator no matter what the environment configures" do

      original = Application.get_env(:openagents, :admin_github_ids)

      on_exit(fn -> Application.put_env(:openagents, :admin_github_ids, original) end)

      # `runtime.exs` replaces this list wholesale from an environment

      # variable, so an unset or mistyped value must not be able to lock the

      # owner out of the surface used to fix it.

      Application.put_env(:openagents, :admin_github_ids, [])

      assert 14_167_547 in Accounts.admin_github_ids()

      Application.put_env(:openagents, :admin_github_ids, [999_999])

      ids = Accounts.admin_github_ids()

      assert 14_167_547 in ids

      assert 999_999 in ids

    end

    test "the owner is not an operator while banned" do

      {:ok, owner} = Accounts.upsert_github_user(profile(14_167_547, "AtlantisPleb"))

      assert Accounts.admin?(owner)

      {:ok, banned} = Accounts.ban_user(owner, "manual_abuse_review")

      refute Accounts.admin?(banned)

    end

  end

end

      conn = log_in_admin_user(conn, "admin-chrome-operator")

      {:ok, view, _html} = live(conn, ~p"/admin")

      assert has_element?(view, "header.command-bar")

      assert has_element?(view, "#return-to-conversation")

      assert has_element?(view, "#account-menu-trigger")

      refute has_element?(view, "header.command-bar")

      assert has_element?(view, ~s(#sidebar a.sidebar-row__hit[href="/chat"]))

      assert has_element?(view, "#account-bar-trigger")

      # Nothing navigates onward from here, and nothing in the product links in.

      refute has_element?(view, "#open-leaderboard")

    end

  test "carries the shared command bar without account controls for a visitor", %{conn: conn} do

    {:ok, _view, html} = live(conn, ~p"/changelog")

    assert html =~ ~s(class="command-bar")

    refute html =~ ~s(id="account-menu-trigger")

    # The shell supplies the one command bar; the page no longer builds a second.

    refute html =~ ~s(class="command-bar")

    refute html =~ ~s(id="account-bar-trigger")

    refute html =~ ~s(id="return-to-conversation")

  end

  test "offers a way back to the conversation when logged in", %{conn: conn} do

  test "carries the shell sidebar when logged in", %{conn: conn} do

    conn = log_in_github_user(conn, "changelog-header-browser")

    {:ok, _view, html} = live(conn, ~p"/changelog")

    assert html =~ ~s(id="return-to-conversation")

    assert html =~ "RETURN TO CONVERSATION"

    # Chat is a sidebar row, so the page carries no chip back to it.

    refute html =~ ~s(id="return-to-conversation")

    assert html =~ ~s(href="/chat")

  end

  test "publishes no node internals", %{conn: conn} do

    assert has_element?(view, "#computers-page")

    assert has_element?(view, "#computers-manager")

    assert has_element?(view, "header.command-bar")

    assert has_element?(view, "#return-to-conversation")

    assert has_element?(view, "#account-menu-trigger")

    refute has_element?(view, "header.command-bar")

    assert has_element?(view, ~s(#sidebar a.sidebar-row__hit[href="/chat"]))

    assert has_element?(view, "#account-bar-trigger")

  end

  test "the legacy authenticated path redirects to the canonical URL without its query", %{

  test "carries the shared command bar without account controls for a visitor", %{conn: conn} do

    {:ok, _view, html} = live(conn, ~p"/leaderboard")

    assert html =~ ~s(class="command-bar")

    # The shell supplies the one command bar; the page no longer builds a second.

    refute html =~ ~s(class="command-bar")

    assert html =~ "OpenAgents"

    refute html =~ ~s(id="account-menu-trigger")

    refute html =~ ~s(id="account-bar-trigger")

    refute html =~ ~s(id="return-to-conversation")

  end

  test "offers the account menu and a way back to the conversation when logged in", %{conn: conn} do

  test "carries the shell account menu and sidebar when logged in", %{conn: conn} do

    conn = log_in_github_user(conn, "leaderboard-header-browser")

    {:ok, _view, html} = live(conn, ~p"/leaderboard")

    assert html =~ ~s(id="account-menu-trigger")

    assert html =~ ~s(id="return-to-conversation")

    assert html =~ "RETURN TO CONVERSATION"

    assert html =~ ~s(id="account-bar-trigger")

    # Chat is a sidebar row, so the page carries no chip back to it.

    refute html =~ ~s(id="return-to-conversation")

    assert html =~ ~s(href="/chat")

  end

  test "explains itself when no account has spent a token", %{conn: conn} do