flex-direction: column;

  }

  /* A status line, not a header: it carries the socket's truth and nothing

     else, because the page's name is already in the command bar above it. */

  .chat-status {

    display: flex;

    flex: none;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    padding: 8px 24px;

  }

  .connection-state {

    display: inline-flex;

    align-items: center;

    gap: 6px;

  }

  .connection-label {

    color: var(--text-muted);

    font-size: 0.6875rem;

    font-weight: 500;

    letter-spacing: 0.06em;

    line-height: 1rem;

    text-transform: uppercase;

  }

  /* ── Transcript ─────────────────────────────────────────────────────────── */

      <div id="openagents-app" class="chat-shell">

        <main class="app-main">

          <header class="chat-status">

            <.connection_state id_prefix="chat-connection" />

          </header>

          <section

            id="transcript"

            class="transcript"

  defp duration_label(seconds), do: "#{div(seconds, 3600)}h #{seconds |> rem(3600) |> div(60)}m"

  # Below 768px the sidebar hides behind this slim row: wordmark, connection

  # state, and the menu button that reveals the sidebar as an overlay.

  attr :id_prefix, :string, required: true

  # Connection state is driven by the LiveView socket through element-level

  # connect/disconnect bindings, not by a stylesheet class, so RECONNECTING is

  # real rather than decorative (DESIGN.md, Sarah shell). Rendered twice —

  # sidebar header and mobile header — so the ids take a prefix.

  defp connection_state(assigns) do

    ~H"""

    <span class="connection-state">

      <.status_indicator

        id={"#{@id_prefix}-indicator"}

        state="connected"

        label="Connection to Sarah"

        decorative

        phx-connected={JS.set_attribute({"data-state", "connected"})}

        phx-disconnected={JS.set_attribute({"data-state", "reconnecting"})}

      />

      <span

        id={"#{@id_prefix}-connected"}

        class="connection-label"

        phx-connected={JS.show()}

        phx-disconnected={JS.hide()}

      >

        CONNECTED

      </span>

      <span

        id={"#{@id_prefix}-reconnecting"}

        class="connection-label"

        hidden

        phx-connected={JS.hide()}

        phx-disconnected={JS.show()}

      >

        RECONNECTING

      </span>

    </span>

    """

  end

  attr :delegation, :map, default: nil

  attr :summaries, :list, required: true

  attr :collapsed, :boolean, default: false

  end

  describe "connection chrome" do

    test "the chat status line states the socket's truth through element-level bindings", %{

      conn: conn

    } do

    test "the conversation states no connection status at all", %{conn: conn} do

      conn = log_in_github_user(conn, "connection-user")

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

      # Chat's status line carries the socket's truth under its own ids. It

      # replaced a mobile header whose other job -- a menu button and a second

      # brand mark -- belonged to a rail chat no longer renders.

      assert has_element?(view, "#chat-connection-indicator[phx-connected][phx-disconnected]")

      assert has_element?(view, "#chat-connection-connected", "CONNECTED")

      assert has_element?(view, "#chat-connection-reconnecting[hidden]", "RECONNECTING")

      {:ok, view, html} = live(conn, ~p"/chat")

      # Removed at the owner's direction. A bar that reads CONNECTED whenever

      # the page is working spends permanent space to say nothing: the only

      # state worth reporting is the one where it is not, and LiveView already

      # shows that through the disconnect overlay.

      refute has_element?(view, ".chat-status")

      refute html =~ "CONNECTED"

      refute html =~ "chat-connection"

    end

  end