font-variant-numeric: tabular-nums;

  }

  /* The preview is bounded to exactly three visible lines and scrolls inside

     that budget; the .DelegationLog hook autoscrolls it to the newest row as

     activity arrives. */

  .delegation-log {

    max-height: calc(3 * 1.5em);

    display: flex;

    max-height: 40vh;

    flex-direction: column;

    gap: 6px;

    overflow-y: auto;

    overscroll-behavior: contain;

    color: var(--text-muted);

    line-height: 1.5;

  }

  /* ── Preview rows ────────────────────────────────────────────────────────── */

  /* 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

     one-line rows and mirrors the newest into the activity line. The hook owns

     the DOM; these are the only rules it relies on. One activity is one line,

     so long commands and paths clip instead of spending a second line. */

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

     rules it relies on. */

  .deleg-row {

    min-width: 0;

    max-width: 100%;

    white-space: nowrap;

  .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-row--prose,

  .deleg-row--note {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  .deleg-tool {

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

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

    background: var(--ink-raised);

  }

  .deleg-row--tool {

  .deleg-tool__summary {

    display: flex;

    align-items: center;

    gap: 6px;

    gap: 8px;

    padding: 5px 8px;

    color: var(--text-muted);

    cursor: pointer;

    list-style: none;

  }

  .deleg-row__dot {

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

    display: none;

  }

  .deleg-tool__dot {

    width: 6px;

    height: 6px;

    flex: none;

    background: var(--info);

  }

  .deleg-row[data-status="succeeded"] .deleg-row__dot {

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

    background: var(--success);

  }

  .deleg-row[data-status="failed"] .deleg-row__dot {

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

    background: var(--danger);

  }

  .deleg-row__label {

  .deleg-tool__label {

    flex: none;

    color: var(--text-body);

  }

  .deleg-row__cmd {

  /* 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-row--note[data-tone="warn"] {

    color: var(--warning);

  .deleg-tool__body {

    display: flex;

    flex-direction: column;

    gap: 6px;

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

    padding: 8px;

  }

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

    color: var(--danger);

  .deleg-tool__cmd,

  .deleg-tool__out {

    max-height: 16rem;

    overflow: auto;

    overflow-wrap: anywhere;

    font: inherit;

    white-space: pre-wrap;

  }

  /* The activity the delegation is doing right now, stated directly under the

     delegate line instead of only wherever the preview happens to be scrolled.

     The hook mirrors the newest preview row into it. */

  .delegation-activity {

    overflow: hidden;

  .deleg-tool__cmd {

    color: var(--text-body);

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

    font-size: 0.75rem;

    line-height: 1.5;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

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

        // Record/unit separators frame structured tool events inside the plain

        // text stream (see sarah-computer-controller AcpAgent.renderUpdate).

        // A frame is one line beginning with RS whose fields split on US;

        // everything else is agent prose. This hook renders the stream as the

        // panel's preview -- one row per thing the delegated agent did -- and

        // mirrors the newest row into the sibling activity line, so what is

        // happening right now reads true wherever the preview is scrolled.

        // Rows and the mirror are text, never HTML.

        // everything else is agent prose. This hook renders frames as

        // collapsible tool cards and notes, and prose as text — never HTML.

        const RS = String.fromCharCode(30)

        const US = String.fromCharCode(31)

        // The server caps the stream at 64 KiB; this bounds the element count

        // too, so pathological tiny chunks cannot pile up rows instead.

        const MAX_ROWS = 200

        const decode64 = (value) => {

          try {

            return new TextDecoder().decode(Uint8Array.from(atob(value), (c) => c.charCodeAt(0)))

          mounted() {

            this.buffer = ""

            this.tools = new Map()

            this.proseRow = null

            this.activityLine = this.el.parentElement.querySelector("[data-delegation-status]")

            this.prose = null

            this.handleEvent("delegation:chunk", ({ ref, text }) => {

              if (this.el.dataset.ref !== ref) return

              const follow =

            }

          },

          // Prose arrives in chunks that can split a line: the open row grows

          // until a newline or a frame closes it, and each committed line is

          // one row -- the preview states one thing per line.

          appendProse(text) {

            const lines = text.split("\n")

            for (const [index, piece] of lines.entries()) {

              if (index > 0) this.proseRow = null

              if (piece === "") continue

              if (!this.proseRow || this.proseRow.parentNode !== this.el) {

                this.proseRow = this.addRow("deleg-row deleg-row--prose")

              }

              this.setRow(this.proseRow, this.proseRow.textContent + piece)

            if (text === "") return

            if (!this.prose || this.prose.parentNode !== this.el || this.el.lastChild !== this.prose) {

              this.prose = document.createElement("span")

              this.prose.className = "deleg-prose"

              this.el.appendChild(this.prose)

            }

            this.prose.appendChild(document.createTextNode(text))

          },

          renderFrame(line) {

            this.proseRow = null

            const fields = line.split(US)

            if (fields[0] === "T") {

              this.renderTool(fields)

            } else if (fields[0] === "N") {

              this.renderNote(fields)

            }

            this.prose = null

          },

          // T | id | phase(0 start,1 done,2 failed) | kind | b64 title | b64 detail

          // Start carries the command; completion carries output, which the

          // durable transcript owns -- here a finished step just recolors its

          // dot on the same single line.

          renderTool([, id, phase, kind, b64title, b64detail]) {

            const title = decode64(b64title || "")

            const command = decode64(b64detail || "")

            let row = this.tools.get(id)

            if (!row) {

              row = this.buildToolRow(kind, title, command)

              this.tools.set(id, row)

            const detail = decode64(b64detail || "")

            let card = this.tools.get(id)

            if (!card) {

              card = this.buildTool(id, kind, title, detail)

              this.tools.set(id, card)

              this.el.appendChild(card.root)

            }

            if (phase === "1" || phase === "2") {

              row.dataset.status = phase === "1" ? "succeeded" : "failed"

              card.root.dataset.status = phase === "1" ? "succeeded" : "failed"

              if (detail !== "") {

                card.out.textContent = detail

                card.out.hidden = false

              }

            }

          },

          buildToolRow(kind, title, command) {

            const row = document.createElement("div")

            row.className = "deleg-row deleg-row--tool"

            row.dataset.status = "running"

          buildTool(id, kind, title, command) {

            const root = document.createElement("details")

            root.className = "deleg-tool"

            root.dataset.status = "running"

            root.dataset.kind = kind || "other"

            const summary = document.createElement("summary")

            summary.className = "deleg-tool__summary"

            const dot = document.createElement("span")

            dot.className = "deleg-row__dot"

            dot.className = "deleg-tool__dot"

            const label = document.createElement("span")

            label.className = "deleg-row__label"

            label.className = "deleg-tool__label"

            label.textContent = this.kindLabel(kind) || title || "tool"

            row.appendChild(dot)

            row.appendChild(label)

            summary.appendChild(dot)

            summary.appendChild(label)

            if (command !== "") {

              const cmd = document.createElement("span")

              cmd.className = "deleg-row__cmd"

              cmd.textContent = command

              row.appendChild(cmd)

              const inline = document.createElement("code")

              inline.className = "deleg-tool__inline"

              inline.textContent = command

              summary.appendChild(inline)

            }

            this.appendRow(row)

            this.mirror(label.textContent + (command === "" ? "" : " " + command))

            return row

            const body = document.createElement("div")

            body.className = "deleg-tool__body"

            const cmd = document.createElement("pre")

            cmd.className = "deleg-tool__cmd"

            cmd.textContent = command !== "" ? "$ " + command : title

            const out = document.createElement("pre")

            out.className = "deleg-tool__out"

            out.hidden = true

            body.appendChild(cmd)

            body.appendChild(out)

            root.appendChild(summary)

            root.appendChild(body)

            return { root, out }

          },

          kindLabel(kind) {

          // N | b64 text | tone(info|warn|error)

          renderNote([, b64text, tone]) {

            const text = decode64(b64text || "")

            // An empty note states nothing; spending one of the three visible

            // lines on it would hide real activity.

            if (text === "") return

            const row = this.addRow("deleg-row deleg-row--note")

            row.dataset.tone = tone || "info"

            this.setRow(row, text)

          },

          addRow(className) {

            const row = document.createElement("div")

            row.className = className

            this.el.appendChild(row)

            while (this.el.childElementCount > MAX_ROWS) this.el.firstElementChild.remove()

            return row

          },

          setRow(row, text) {

            row.textContent = text

            this.mirror(text)

          },

          mirror(text) {

            if (!this.activityLine) return

            this.activityLine.textContent = text

            this.activityLine.hidden = text === ""

            const note = document.createElement("div")

            note.className = "deleg-note"

            note.dataset.tone = tone || "info"

            note.textContent = decode64(b64text || "")

            this.el.appendChild(note)

          }

        }

      </script>

  # 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 three-line preview and the activity line under the delegate line

  # are owned by the .DelegationLog hook (phx-update="ignore"), so chunk text

  # never rides an assign.

  # 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

                <.icon name="stop" />

              </.button>

            </div>

            <%!-- The activity the delegation is doing right now, stated directly

                  under the delegate line. The log hook mirrors the newest

                  preview row into it; the server only guarantees the mount

                  point and its placement. --%>

            <p

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

              class="delegation-activity"

              data-delegation-status={@delegation.ref}

              aria-live="polite"

              hidden

            >

            </p>

            <div

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

              class="delegation-log"

        timestamp={@delegation.started_at}

      >

        <div class="delegation-inline__details">

          <p

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

            id={"delegation-activity-inline-#{@delegation.ref}"}

            class="delegation-activity"

            data-delegation-status={@delegation.ref}

            aria-live="polite"

            hidden

          >

          </p>

          <div

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

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

    # The chunk rides a push event to the log hooks, never an assign; once it

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

    assert_push_event(

      view,

      "delegation:chunk",

      %{ref: ref, text: "hello from the machine"},

      1_000

    )

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

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

    # transcript, never a block under the composer.

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

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

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

    assert has_element?(view, "#delegation-live time[data-started-at]")

    # The activity line sits directly under the delegate line and ships hidden;

    # the log hook owns its text client-side, so the server guarantees only the

    # mount point, its placement, and that it is scoped to this delegation's

    # ref alongside the preview box it mirrors.

    assert has_element?(view, "#delegation-activity-rail-#{ref}[hidden]")

    assert has_element?(view, ".delegation-live__header + .delegation-activity")

    assert has_element?(view, ~s(#delegation-log-rail-#{ref}[data-ref="#{ref}"]))

    assert has_element?(view, "#delegation-live div.delegation-log[phx-update='ignore']")

    assert has_element?(view, "#delegation-live time[data-started-at]")

    assert has_element?(

             view,

    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, activity line and live

    # preview inside.

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

    assert has_element?(view, "#delegation-inline #delegation-inline-header.event-header")

    assert has_element?(view, "#delegation-activity-inline-#{ref}[hidden]")

    assert has_element?(

             view,

             ".delegation-inline__details > .delegation-activity:first-child"

           )

    assert has_element?(view, "#delegation-inline div.delegation-log")

    FakeController.exit(caller.pid, caller.request_id, %{

    first = start_delegation(first_machine, "claude")

    FakeController.chunk(first.pid, first.request_id, "first delegation working")

    assert_push_event(view, "delegation:chunk", %{

      ref: first_ref,

      text: "first delegation working"

    })

    assert_push_event(view, "delegation:chunk", %{text: "first delegation working"}, 1_000)

    assert has_element?(view, "#delegation-live .delegation-live__computer", "first-box")

    second = start_delegation(second_machine, "codex")

    FakeController.chunk(second.pid, second.request_id, "second delegation working")

    assert_push_event(view, "delegation:chunk", %{

      ref: second_ref,

      text: "second delegation working"

    })

    assert_push_event(view, "delegation:chunk", %{text: "second delegation working"}, 1_000)

    # One live panel: the newest delegation owns it; the superseded one is a

    # bounded summary line beneath.

    refute has_element?(view, "#delegation-live .delegation-live__computer", "first-box")

    assert has_element?(view, ".delegation-summary--superseded", "first-box")

    # The activity line and preview are scoped to their delegation's ref, so

    # superseding remounts them empty rather than inheriting stale text.

    refute has_element?(view, "#delegation-activity-rail-#{first_ref}")

    assert has_element?(view, "#delegation-activity-rail-#{second_ref}[hidden]")

    refute has_element?(view, "#delegation-log-rail-#{first_ref}")

    assert has_element?(view, "#delegation-log-rail-#{second_ref}")

    for caller <- [first, second] do

      FakeController.exit(caller.pid, caller.request_id, %{

        "status" => "completed",