flex-direction: column;

  }

  /* Wide screens get two columns: the conversation, and the work rail beside

     it. Stacking them was the bug -- the rail is a fixed 360px block, so in a

     column it landed under the composer as a ribbon of monospace text and

     pushed the composer into the middle of the page. */

  @media (min-width: 1280px) {

    .chat-shell {

      flex-direction: row;

    }

  }

  .app-main {

    display: flex;

    /* Both axes: `min-height` for the column it is, `min-width` for the row it

       joins on wide screens, so a long unbroken line in the transcript cannot

       widen the column and squeeze the rail. */

    min-width: 0;

    min-height: 0;

    flex: 1;

    flex-direction: column;

  }

}

/* ── Delegation projection ────────────────────────────────────────────────── */

/* ── Chat work rail ───────────────────────────────────────────────────────── */

/* One projection with two placements: a rail beside the transcript on wide

 * screens, the same content inline at the transcript tail below that. Both are

 * ephemeral -- present only while a delegation is live or recently finished. */

/* The chat surface's right-hand column, on the same idiom as `.docs-toc`: a

 * fixed-width panel held off the content by a hairline, gone once it would

 * crowd what it sits beside. It scrolls on its own, so nothing inside it can

 * move the transcript or the composer.

 *

 * Its two projections each have a second, narrow-viewport placement -- work in

 * the navigation sidebar, the delegation inline at the transcript tail -- and

 * the rules below make sure exactly one of each pair is ever shown. */

@layer components {

  .delegation-rail {

  .chat-rail {

    display: none;

  }

  @media (min-width: 1280px) {

    .delegation-rail {

    .chat-rail {

      display: flex;

      width: 300px;

      /* Wide enough for the streamed log to wrap as prose rather than as a

         ribbon: roughly 60 characters at the log's 12px monospace. */

      width: 360px;

      flex: none;

      flex-direction: column;

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

      background: var(--ink-void);

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

    }

    /* Below this width the same content renders inline instead, so showing

       both would state the delegation twice. */

    /* Collapsed, the rail keeps only the width of its toggle: the reader can

       always get it back, and the conversation takes the space meanwhile. */

    .chat-rail[data-collapsed="true"] {

      width: 48px;

    }

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

      .chat-rail {

        transition: none;

      }

    }

    /* Below this width each projection has its own placement, so showing these

       too would state the same thing twice. */

    .chat-sidebar-work,

    .delegation-inline {

      display: none;

    }

  }

  .delegation-rail__header {

  .chat-rail__header {

    display: flex;

    flex: none;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

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

    padding: 8px 12px 8px 16px;

    padding: 8px 8px 8px 16px;

  }

  .delegation-rail__label {

  .chat-rail__label {

    overflow: hidden;

    color: var(--text-muted);

    font-size: 0.6875rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    white-space: nowrap;

  }

  .delegation-rail__body {

  .chat-rail[data-collapsed="true"] .chat-rail__label {

    display: none;

  }

  .chat-rail[data-collapsed="true"] .chat-rail__header {

    justify-content: center;

    padding-inline: 8px;

  }

  .chat-rail__body {

    display: flex;

    min-height: 0;

    flex: 1;

    flex-direction: column;

    gap: 12px;

    gap: 20px;

    overflow-y: auto;

    padding: 12px 16px;

    overscroll-behavior: contain;

    padding: 12px 0;

  }

  .delegation-rail[data-collapsed="true"] .delegation-rail__body {

  .chat-rail[data-collapsed="true"] .chat-rail__body {

    display: none;

  }

  .delegation-rail__glyph-collapse,

  .delegation-rail[data-collapsed="true"] .delegation-rail__glyph-expand {

  .chat-rail__glyph-collapse,

  .chat-rail[data-collapsed="true"] .chat-rail__glyph-expand {

    display: inline-flex;

  }

  .delegation-rail__glyph-expand,

  .delegation-rail[data-collapsed="true"] .delegation-rail__glyph-collapse {

  .chat-rail__glyph-expand,

  .chat-rail[data-collapsed="true"] .chat-rail__glyph-collapse {

    display: none;

  }

  .rail-section {

    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 8px;

  }

  /* 20px is where a sidebar row's text starts (12px margin plus 8px padding),

     so the heading, the work rows and the delegation below them all sit on one

     left edge while the rows keep the wider hit area their wash draws. */

  .rail-section__label {

    margin-inline: 20px;

    color: var(--text-dim);

    font-size: 0.6875rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

  }

  .delegation-rail > :not(.rail-section__label) {

    margin-inline: 20px;

  }

}

/* ── Delegation projection ────────────────────────────────────────────────── */

/* One projection with two placements: the rail beside the transcript on wide

 * screens, the same content inline at the transcript tail below that. Both are

 * ephemeral -- present only while a delegation is live or recently finished. */

@layer components {

  .delegation-inline {

    width: 100%;

    max-width: 46rem;

    display: flex;

    max-height: 40vh;

    flex-direction: column;

    gap: 2px;

    gap: 6px;

    overflow-y: auto;

    overscroll-behavior: contain;

    color: var(--text-muted);

    font-family: var(--font-mono, ui-monospace, monospace);

    font-size: 0.75rem;

    line-height: 1.4;

    line-height: 1.5;

  }

  /* The log only ever scrolls vertically. Its rows are flex items, which are

     `min-width: auto` by default, so one long command or path made the whole

     column as wide as itself and the panel scrolled sideways instead. */

  .delegation-log > * {

    min-width: 0;

    max-width: 100%;

  }

  /* ── Streamed log rows ───────────────────────────────────────────────────── */

  /* Built by the .DelegationLog hook, which frames the plain text stream into

     prose, tool cards and notes. The hook owns the DOM; these are the only

     rules it relies on. */

  .deleg-prose {

    overflow-wrap: anywhere;

    /* The stream carries its own line breaks, and they are the shape of what

       the agent said; the rest wraps to the rail's width. */

    white-space: pre-wrap;

  }

  .deleg-tool {

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

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

    background: var(--ink-raised);

  }

  .deleg-tool__summary {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 5px 8px;

    color: var(--text-muted);

    cursor: pointer;

    list-style: none;

  }

  .deleg-tool__summary::-webkit-details-marker {

    display: none;

  }

  .deleg-tool__dot {

    width: 6px;

    height: 6px;

    flex: none;

    border-radius: 9999px;

    background: var(--info);

  }

  .deleg-tool[data-status="succeeded"] .deleg-tool__dot {

    background: var(--success);

  }

  .deleg-tool[data-status="failed"] .deleg-tool__dot {

    background: var(--danger);

  }

  .deleg-tool__label {

    flex: none;

    color: var(--text-body);

  }

  /* The command as a one-line preview beside its label. It is the detail that

     tells two `Terminal` steps apart, so it is stated on the closed card and

     truncated rather than wrapped. */

  .deleg-tool__inline {

    min-width: 0;

    flex: 1;

    overflow: hidden;

    color: var(--text-dim);

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .deleg-tool__body {

    display: flex;

    flex-direction: column;

    gap: 6px;

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

    padding: 8px;

  }

  .deleg-tool__cmd,

  .deleg-tool__out {

    max-height: 16rem;

    overflow: auto;

    overflow-wrap: anywhere;

    font: inherit;

    white-space: pre-wrap;

  }

  .deleg-tool__cmd {

    color: var(--text-body);

  }

  .deleg-tool__out {

    color: var(--text-muted);

  }

  .deleg-note {

    overflow-wrap: anywhere;

    color: var(--text-dim);

  }

  .deleg-note[data-tone="warn"] {

    color: var(--warning);

  }

  .deleg-note[data-tone="error"] {

    color: var(--danger);

  }

  .delegation-truncated {

    font-size: 0.6875rem;

  }

  /* Dot, two lines, and an optional trailing control on one row -- the same

     shape as the work rows above it, so the rail reads as one list. */

  .delegation-summary {

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

  }

  .delegation-summary__lines {

    display: flex;

    min-width: 0;

      |> assign(:paced_voice_items, MapSet.new())

      |> assign(:delegation, nil)

      |> assign(:delegation_summaries, [])

      |> assign(:delegation_collapsed, false)

      |> assign(:rail_collapsed, false)

      |> stream(:messages, messages)

    {:ok, socket}

  # Collapse state is a server assign, not a client attribute toggle: the rail

  # re-renders on every streamed chunk, so a DOM-only `data-collapsed` snapped

  # back open on the next patch. Holding it here keeps the rail collapsed until

  # the reader expands it again.

  def handle_event("toggle_delegation_rail", _params, socket) do

    {:noreply, assign(socket, :delegation_collapsed, !socket.assigns.delegation_collapsed)}

  # the reader expands it again. It is deliberately not persisted: the rail is

  # a view of what is happening now, so every visit starts open.

  def handle_event("toggle_rail", _params, socket) do

    {:noreply, assign(socket, :rail_collapsed, !socket.assigns.rail_collapsed)}

  end

  @impl true

          </footer>

        </main>

        <%!-- Desktop only (≥1280px): the slim live delegation rail, the shell's

              third grid column. Ephemeral chrome — rendered only while a

              delegation is in flight or recently finished, never permanent. --%>

        <.delegation_rail

          :if={@delegation != nil or @delegation_summaries != []}

        <%!-- Desktop only (≥1280px): the work rail, the shell's second column.

              The chat column keeps one job — transcript above, composer pinned

              under it — and everything about running work moves out here, where

              a streamed log has the width to be read. Below the breakpoint the

              rail is gone and the same two projections render in the navigation

              sidebar and at the transcript tail. --%>

        <.chat_rail

          :if={@recent_jobs != [] or @delegation != nil or @delegation_summaries != []}

          recent_jobs={@recent_jobs}

          delegation={@delegation}

          summaries={@delegation_summaries}

          collapsed={@delegation_collapsed}

          collapsed={@rail_collapsed}

        />

      </div>

            a stretched anchor to it; a row with no target is stated, not

            linked. Empty sections keep their labels and say so honestly. --%>

    <div id="sidebar-sections" class="sidebar-sections">

      <section :if={@recent_jobs != []} id="sidebar-work" class="sidebar-section" aria-label="Work">

      <%!-- The narrow-viewport placement of the work projection. Above 1280px

      the work rail beside the transcript states it instead, so the stylesheet

      hides this one; one projection, two placements, exactly one shown. --%>

      <section

        :if={@recent_jobs != []}

        id="sidebar-work"

        class="sidebar-section chat-sidebar-work"

        aria-label="Work"

      >

        <h2 class="sidebar-section-label scroll-edge-hairline">WORK</h2>

        <.sidebar_status_row

          :for={job <- @recent_jobs}

          id={"sidebar-job-#{job.id}"}

          target_message_id={job.report_message_id}

          dot_state={job_dot_state(job)}

          title={job_title(job)}

          meta={job_meta(job)}

          data-status={job.status}

        />

        <.work_rows id_prefix="sidebar-job" recent_jobs={@recent_jobs} />

      </section>

    </div>

    """

  end

  attr :id_prefix, :string, required: true

  attr :recent_jobs, :list, required: true

  # The work projection's rows, shared by its two placements. Only the DOM id

  # prefix differs, because both placements are in the document at once and the

  # stylesheet — not the server — decides which one the viewport shows.

  defp work_rows(assigns) do

    ~H"""

    <.sidebar_status_row

      :for={job <- @recent_jobs}

      id={"#{@id_prefix}-#{job.id}"}

      target_message_id={job.report_message_id}

      dot_state={job_dot_state(job)}

      title={job_title(job)}

      meta={job_meta(job)}

      data-status={job.status}

    />

    """

  end

  attr :id, :string, required: true

  attr :target_message_id, :any, default: nil

  attr :dot_state, :string, required: true

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

  attr :recent_jobs, :list, required: true

  attr :delegation, :map, default: nil

  attr :summaries, :list, required: true

  attr :collapsed, :boolean, default: false

  # The live delegation rail (issue #85): a slim ephemeral right rail shown

  # only while a computer delegation is in flight or recently finished. It is

  # a projection of the PubSub stream, never chrome and never authority — the

  # transcript's durable event header remains the record. One live panel at a

  # time; superseded and finished delegations collapse to summary lines. The

  # rolling log is owned by the .DelegationLog hook (phx-update="ignore"), so

  # chunk text never rides an assign.

  defp delegation_rail(assigns) do

  # The work rail: the chat surface's right-hand column on wide screens, and

  # the only place running work is stated there. It carries two projections —

  # the bounded work list, and the live delegation (issue #85) — and neither is

  # chrome or authority: the transcript's durable event headers remain the

  # record. The rail scrolls on its own so the transcript never moves for it,

  # and the rolling log is owned by the .DelegationLog hook

  # (phx-update="ignore"), so chunk text never rides an assign.

  defp chat_rail(assigns) do

    ~H"""

    <aside

      id="delegation-rail"

      class="delegation-rail"

      id="chat-rail"

      class="chat-rail"

      data-collapsed={to_string(@collapsed)}

      aria-label="Live delegation"

      aria-label="Work"

    >

      <header class="delegation-rail__header">

        <h2 class="delegation-rail__label">LIVE DELEGATION</h2>

      <header class="chat-rail__header">

        <h2 class="chat-rail__label">WORK</h2>

        <.button

          id="delegation-rail-toggle"

          id="chat-rail-toggle"

          variant={:ghost}

          size={:sm}

          class="delegation-rail__toggle"

          aria-label="Toggle delegation panel"

          class="chat-rail__toggle"

          aria-label="Toggle work panel"

          aria-expanded={to_string(!@collapsed)}

          aria-controls="delegation-rail"

          phx-click="toggle_delegation_rail"

          aria-controls="chat-rail-body"

          phx-click="toggle_rail"

        >

          <.icon name="sidebar-collapse-right" class="delegation-rail__glyph-collapse" />

          <.icon name="sidebar-open-right" class="delegation-rail__glyph-expand" />

          <.icon name="sidebar-collapse-right" class="chat-rail__glyph-collapse" />

          <.icon name="sidebar-open-right" class="chat-rail__glyph-expand" />

        </.button>

      </header>

      <div class="delegation-rail__body">

        <div

          :if={@delegation && @delegation.state == :running}

          id="delegation-live"

          class="delegation-live"

          data-status="running"

      <div id="chat-rail-body" class="chat-rail__body">

        <%!-- The wide-viewport placement of the work projection; the navigation

              sidebar states it below the breakpoint. --%>

        <%!-- No accessible name of its own: the rail's own heading already

              names it, and a second "Work" landmark inside a "Work" one only

              adds a level for a screen reader to walk through. --%>

        <section :if={@recent_jobs != []} id="rail-work" class="rail-section">

          <.work_rows id_prefix="rail-job" recent_jobs={@recent_jobs} />

        </section>

        <section

          :if={@delegation != nil or @summaries != []}

          id="delegation-rail"

          class="rail-section delegation-rail"

          aria-label="Live delegation"

        >

          <div class="delegation-live__header">

            <.status_indicator state="running" label="RUNNING" />

            <span class="delegation-live__machine">{@delegation.machine_name}</span>

            <span class="delegation-live__subject">{delegation_subject(@delegation)}</span>

            <time

              id={"delegation-elapsed-#{@delegation.ref}"}

              class="delegation-live__elapsed"

              datetime={DateTime.to_iso8601(@delegation.started_at)}

              data-started-at={DateTime.to_iso8601(@delegation.started_at)}

              phx-hook=".DelegationClock"

          <h3 class="rail-section__label">LIVE DELEGATION</h3>

          <div

            :if={@delegation && @delegation.state == :running}

            id="delegation-live"

            class="delegation-live"

            data-status="running"

          >

            <div class="delegation-live__header">

              <.status_indicator state="running" label="RUNNING" />

              <span class="delegation-live__machine">{@delegation.machine_name}</span>

              <span class="delegation-live__subject">{delegation_subject(@delegation)}</span>

              <time

                id={"delegation-elapsed-#{@delegation.ref}"}

                class="delegation-live__elapsed"

                datetime={DateTime.to_iso8601(@delegation.started_at)}

                data-started-at={DateTime.to_iso8601(@delegation.started_at)}

                phx-hook=".DelegationClock"

                phx-update="ignore"

              ></time>

              <.button

                id="cancel-delegation"

                variant={:ghost}

                size={:xs}

                class="delegation-live__cancel"

                aria-label="Cancel delegation"

                phx-click="cancel_delegation"

              >

                <.icon name="stop" />

              </.button>

            </div>

            <div

              id={"delegation-log-rail-#{@delegation.ref}"}

              class="delegation-log"

              data-ref={@delegation.ref}

              phx-hook=".DelegationLog"

              phx-update="ignore"

            ></time>

            >

            </div>

            <.badge :if={@delegation.truncated?} variant={:dim} class="delegation-truncated">

              TRUNCATED

            </.badge>

          </div>

          <.delegation_summary_row

            :if={@delegation && @delegation.state == :terminal}

            id="delegation-terminal"

            delegation={@delegation}

          >

            <.button

              id="cancel-delegation"

              id="delegation-dismiss"

              variant={:ghost}

              size={:xs}

              class="delegation-live__cancel"

              aria-label="Cancel delegation"

              phx-click="cancel_delegation"

              class="delegation-summary__dismiss"

              aria-label="Dismiss"

              phx-click="dismiss_delegation"

            >

              <.icon name="stop" />

              <.icon name="x" />

            </.button>

          </div>

          <div

            id={"delegation-log-rail-#{@delegation.ref}"}

            class="delegation-log"

            data-ref={@delegation.ref}

            phx-hook=".DelegationLog"

            phx-update="ignore"

          >

          </div>

          <.badge :if={@delegation.truncated?} variant={:dim} class="delegation-truncated">

            TRUNCATED

          </.badge>

        </div>

        <.delegation_summary_row

          :if={@delegation && @delegation.state == :terminal}

          id="delegation-terminal"

          delegation={@delegation}

        >

          <.button

            id="delegation-dismiss"

            variant={:ghost}

            size={:xs}

            class="delegation-summary__dismiss"

            aria-label="Dismiss"

            phx-click="dismiss_delegation"

          >

            <.icon name="x" />

          </.button>

        </.delegation_summary_row>

          </.delegation_summary_row>

        <.delegation_summary_row

          :for={summary <- @summaries}

          id={"delegation-summary-#{summary.ref}"}

          delegation={summary}

          class="delegation-summary--superseded"

        />

          <.delegation_summary_row

            :for={summary <- @summaries}

            id={"delegation-summary-#{summary.ref}"}

            delegation={summary}

            class="delegation-summary--superseded"

          />

        </section>

      </div>

    </aside>

    """

  # 65,536-byte cumulative cap.

  @maximum_event_bytes 16_384

  test "no delegation means no rail and no inline panel", %{conn: conn} do

  test "no work and no delegation means no rail at all", %{conn: conn} do

    conn = log_in_github_user(conn, "delegation-idle-browser")

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

    refute has_element?(view, "#chat-rail")

    refute has_element?(view, "#delegation-rail")

    refute has_element?(view, "#delegation-inline")

  end

    # arrives, the start event has necessarily been applied too.

    assert_push_event(view, "delegation:chunk", %{text: "hello from the machine"}, 1_000)

    # Desktop rail: header facts, running state, the hook-owned log and clock.

    # Desktop rail: the delegation is a section of the work rail beside the

    # transcript, never a block under the composer.

    assert has_element?(view, "#chat-rail #chat-rail-body #delegation-rail")

    assert has_element?(view, "#delegation-rail #delegation-live[data-status='running']")

    assert has_element?(view, "#delegation-live .delegation-live__machine", "rail-box")

    assert has_element?(view, "#delegation-live .delegation-live__subject", "claude")

    assert has_element?(

             view,

             ~s(#delegation-rail-toggle[aria-label="Toggle delegation panel"])

             ~s(#chat-rail-toggle[aria-label="Toggle work panel"][aria-controls="chat-rail-body"])

           )

    # Collapse is a server assign so it survives the rail re-rendering on every

    # streamed chunk: the toggle flips it and it stays flipped.

    assert has_element?(view, ~s(#delegation-rail[data-collapsed="false"]))

    view |> element("#delegation-rail-toggle") |> render_click()

    assert has_element?(view, ~s(#delegation-rail[data-collapsed="true"]))

    assert has_element?(view, ~s(#delegation-rail-toggle[aria-expanded="false"]))

    view |> element("#delegation-rail-toggle") |> render_click()

    assert has_element?(view, ~s(#delegation-rail[data-collapsed="false"]))

    assert has_element?(view, ~s(#chat-rail[data-collapsed="false"]))

    view |> element("#chat-rail-toggle") |> render_click()

    assert has_element?(view, ~s(#chat-rail[data-collapsed="true"]))

    assert has_element?(view, ~s(#chat-rail-toggle[aria-expanded="false"]))

    view |> element("#chat-rail-toggle") |> render_click()

    assert has_element?(view, ~s(#chat-rail[data-collapsed="false"]))

    # Narrow-viewport variant: the same projection as an expandable

    # event-header section at the transcript tail, live log inside.

    assert has_element?(view, ~s(#delegation-dismiss[aria-label="Dismiss"]))

    # Dismissing clears the whole ephemeral projection; the durable event

    # header in the transcript remains the record.

    # header in the transcript remains the record. With no work either, the

    # rail has nothing left to state and goes with it.

    view |> element("#delegation-dismiss") |> render_click()

    refute has_element?(view, "#delegation-rail")

    refute has_element?(view, "#delegation-inline")

    refute has_element?(view, "#chat-rail")

  end

  test "the capped stream renders an explicit truncation marker", %{conn: conn} do

           )

  end

  test "work has two placements: the navigation sidebar and the wide-screen rail",

       %{conn: conn} do

    user = github_user("sidebar-sections-rail-browser")

    conn = log_in_github_user(conn, "sidebar-sections-rail-browser")

    {:ok, conversation} = Conversations.ensure_conversation(user)

    owner = Conversations.get_conversation_owner!(conversation)

    {:ok, job} =

      Work.create_job(%{

        conversation_id: conversation.id,

        owner_visitor_id: owner.id,

        surface: "text",

        goal: "Rebuild the staging index"

      })

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

    # Both placements are in the document and the stylesheet shows exactly one:

    # the sidebar section below 1280px, the rail above it.

    assert has_element?(view, "#sidebar-work.chat-sidebar-work #sidebar-job-#{job.id}")

    assert has_element?(view, "#chat-rail #chat-rail-body #rail-work #rail-job-#{job.id}")

    # The rail is the conversation column's sibling, not something stacked

    # under the composer, so the transcript keeps the height it is given.

    assert has_element?(view, ".chat-shell > .app-main")

    assert has_element?(view, ".chat-shell > #chat-rail")

  end

  test "job lifecycle broadcasts refresh the work section without polling", %{conn: conn} do

    user = github_user("sidebar-sections-job-broadcast-browser")

    conn = log_in_github_user(conn, "sidebar-sections-job-broadcast-browser")