background: transparent;

  }

  /* Menu rows are sidebar rows. Both are a 32px line with an icon, muted until

     hovered, and there is no reason for the account menu to invent a second

     set of metrics for the same shape. */

  .menu__identity {

    display: flex;

    align-items: center;

    gap: 10px;

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

    padding: 12px;

  }

  .menu__identity span {

    display: flex;

    min-width: 0;

    flex-direction: column;

  }

  .menu__identity strong {

    color: var(--text-primary);

    font-size: 0.8125rem;

    font-weight: 600;

    line-height: 1.25rem;

  }

  .menu__identity small {

    color: var(--text-muted);

    font-size: 0.75rem;

    line-height: 1rem;

  }

  .menu__form {

    margin: 0;

  }

  .menu__item {

    display: flex;

    width: 100%;

    align-items: center;

    gap: 8px;

    min-height: 32px;

    margin: 4px;

    padding-inline: 8px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    font-size: 0.8125rem;

    font-weight: 500;

    line-height: 1.25rem;

    text-align: start;

    text-decoration: none;

    transition: color 150ms var(--ease), background 150ms var(--ease);

  }

  /* The margin above would double between adjacent rows. */

  .menu__form + .menu__form .menu__item,

  .menu__item + .menu__item {

    margin-block-start: 0;

  }

  .menu__item .icon {

    width: 16px;

    height: 16px;

    flex: none;

    font-size: 16px;

  }

  @media (hover: hover) {

    .menu__item:hover {

      background: var(--wash-hover);

      color: var(--text-primary);

    }

  }

  .menu__item:focus-visible {

    outline: 2px solid var(--ring);

    outline-offset: -2px;

  }

  /* Menus ride the quick token (100ms), not the fast one: a picker should feel

     closer to instant than a state change. Progressive enhancement — guarded

     so a browser without :popover-open never inherits a stranded opacity: 0,

    height: 12px;

    flex: none;

    font-size: 12px;

  }

  /* The caret animates only when a reader turned it. Navigation re-renders

     `open` from the server, and an unconditional transition made every move

     between pages play a rotation nobody asked for. The hook sets this

     attribute for the length of one click and no longer. */

  .sidebar-section[data-animate] .sidebar-section__caret {

    transition: transform 150ms var(--ease);

  }

            state[this.el.id] = this.el.open

            write(state)

          }

          // The caret rotates only for a turn the reader made. Navigation

          // re-renders `open`, so an always-on transition played an animation

          // on every move between pages. The attribute lives for one click.

          this.onClick = () => {

            this.el.dataset.animate = "true"

            clearTimeout(this.animateTimer)

            this.animateTimer = setTimeout(() => delete this.el.dataset.animate, 200)

          }

          this.summary = this.el.querySelector("summary")

          this.el.addEventListener("toggle", this.onToggle)

          if (this.summary) this.summary.addEventListener("click", this.onClick)

          this.restore()

        },

        updated() {

          this.restore()

        },

        destroyed() {

          clearTimeout(this.animateTimer)

          this.el.removeEventListener("toggle", this.onToggle)

          if (this.summary) this.summary.removeEventListener("click", this.onClick)

        },

        restore() {

          // A section holding the active page opens regardless of what the

    </UI.button>

    <UI.menu id="account-menu" class="account-menu">

      <div class="account-menu__identity">

      <div class="menu__identity">

        <UI.avatar

          src={@current_user.github_avatar_url}

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

          <small :if={@current_user.github_name}>@{@current_user.github_login}</small>

        </span>

      </div>

      <.form for={%{}} id="logout-form" action={~p"/logout"} method="delete">

        <UI.button

          id="logout"

          variant={:ghost}

          type="submit"

          role="menuitem"

          class="account-menu__logout"

        >

          <UI.icon name="logout" /> Log out

        </UI.button>

      </.form>

      <.link navigate={~p"/settings/api-tokens"} role="menuitem" class="account-menu__logout">

        API tokens

      <.link navigate={~p"/settings/api-tokens"} role="menuitem" class="menu__item">

        <UI.icon name="key" /> API tokens

      </.link>

      <.form

        :if={github_tools_connected?(@current_user)}

        for={%{}}

        id="github-disconnect-form"

        action={~p"/github/connection"}

        method="delete"

      >

        <UI.button

          id="github-disconnect"

          variant={:ghost}

          type="submit"

          role="menuitem"

          class="account-menu__logout"

        >

          Disconnect GitHub tools

        </UI.button>

      <.form for={%{}} id="logout-form" action={~p"/logout"} method="delete" class="menu__form">

        <button id="logout" type="submit" role="menuitem" class="menu__item">

          <UI.icon name="logout" /> Log out

        </button>

      </.form>

    </UI.menu>

    """

  end

  # The command bar's identity control. Renders the same panel and the same

  # rows as `account_control/1`. There were two account menus with two

  # different sets of markup -- one on Tailwind utilities against

  # `bg-popover`, one on the design system -- so the menu the chat surface

  # showed and the menu the command bar showed did not look like the same

  # application. There is one now.

  attr :current_scope, :map, required: true

  defp account_dropdown(assigns) do

    ~H"""

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

    the same reason `UI.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

    <UI.button

      id="account-bar-trigger"

      variant={:ghost}

      size={:sm}

      class="account-menu-trigger"

      popovertarget="account-bar-menu"

      popovertargetaction="toggle"

      aria-label={"Account menu for @#{@current_scope.github_login}"}

    >

      <UI.avatar

        src={@current_scope.github_avatar_url}

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

        size={:sm}

      />

    </UI.button>

    <UI.menu id="account-bar-menu" class="account-menu">

      <div class="menu__identity">

        <UI.avatar

          src={@current_scope.github_avatar_url}

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

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

          size={:lg}

        />

      </summary>

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

            @{@current_scope.github_login}

          </span>

        </li>

        <li>

          <.link

            navigate={~p"/settings/api-tokens"}

            class="btn w-full justify-start"

            data-variant="ghost"

          >

            API tokens

          </.link>

        </li>

        <li>

          <.form

            :if={github_tools_connected?(@current_scope)}

            for={%{}}

            action={~p"/github/connection"}

            method="delete"

            class="m-0 w-full"

          >

            <.button type="submit" variant={:ghost} class="w-full justify-start">

              Disconnect GitHub tools

            </.button>

          </.form>

        </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 rounded-md px-2 py-1.5 text-left flex items-center gap-2 hover:bg-muted"

            >

              <.icon name="logout" class="size-4" /> Log out

            </button>

          </.form>

        </li>

      </ul>

    </details>

        <span>

          <strong>{account_display_name(@current_scope)}</strong>

          <small :if={@current_scope.github_name}>@{@current_scope.github_login}</small>

        </span>

      </div>

      <.link navigate={~p"/settings/api-tokens"} role="menuitem" class="menu__item">

        <UI.icon name="key" /> API tokens

      </.link>

      <.form for={%{}} as={:logout} action={~p"/logout"} method="delete" class="menu__form">

        <button type="submit" role="menuitem" class="menu__item">

          <UI.icon name="logout" /> Log out

        </button>

      </.form>

    </UI.menu>

    """

  end

    )

  end

  defp github_tools_connected?(user) when is_map(user),

    do: is_binary(Map.get(user, :github_token_ciphertext))

  defp github_tools_connected?(_user), do: false

  defp hide(js \\ %JS{}, selector) do

    JS.hide(js,

      to: selector,

                  as={:auth}

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

                  method="post"

                  class="m-0 max-w-xl space-y-3"

                  class="m-0"

                >

                  <p id="github-tools-disclosure" class="text-sm text-muted-foreground">

                    OpenAgents will retain an encrypted GitHub grant with the <code>repo</code>

                    scope. GitHub makes that scope read/write even though OpenAgents currently

                    exposes it only to bounded repository-reading tools. You can revoke the

                    grant from the account menu at any time.

                  </p>

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

                    Sign in and enable GitHub tools

                  </.button>

      refute html =~ "<strong></strong>"

      identity =

        Regex.run(~r|account-menu__identity.{0,900}|s, html)

        Regex.run(~r|menu__identity.{0,900}|s, html)

        |> List.first()

      assert identity =~ "@#{user.github_login}"

    assert html =~ "The Agent Forge"

    assert html =~ ~s(action="/auth/github?github_tools=enabled")

    assert html =~ "Sign in and enable GitHub tools"

    assert html =~ ~s(id="github-tools-disclosure")

    assert html =~ "retain an encrypted GitHub grant"

    assert html =~ "read/write"

    # The scope disclosure was removed from the hero at the owner's direction.

    # GitHub's own consent screen still states the scope before the grant is

    # made, so this asserts the paragraph is gone rather than that it is there.

    refute html =~ ~s(id="github-tools-disclosure")

    refute html =~ "retain an encrypted GitHub grant"

    refute html =~ "One continuing conversation"

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