@spunto/design-system 0.31.1 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/tasks/command-terminal.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { TerminalPanel, type TerminalPanelStatus } from "../terminal-panel"
+import type { TerminalHandle } from "../terminal"
+import type { TaskCommand } from "./types"
+
+// Commands run without a TTY: bare `\n`, which xterm reads as "down one row, same column".
+function normalizeLF(s: string): string {
+  return s.replace(/\r\n/g, "\n").replace(/\n/g, "\r\n")
+}
+
+const DIM = "\x1b[2m"
+const RED = "\x1b[31m"
+const RESET = "\x1b[0m"
+
+/**
+ * What the terminal should hold, as keyed segments in display order. Keys are what make the
+ * writes incremental: a segment whose new text still starts with what was written only sends the
+ * difference.
+ */
+function segments(commands: TaskCommand[]): { key: string; text: string; color?: string }[] {
+  return commands.flatMap((c) => [
+    // Several commands behind one step (one branch setup per repository) say which one is which;
+    // a single command needs no heading, whatever opened the terminal already named it.
+    ...(commands.length > 1 ? [{ key: `${c.id}:h`, text: `${DIM}── ${c.label ?? "Command"}${RESET}\r\n` }] : []),
+    { key: `${c.id}:out`, text: normalizeLF(c.stdout ?? "") },
+    // stderr in red, since the two files can't be interleaved after the fact: each update appends
+    // what each stream gained since the last one, which is as close to the real order as a tail
+    // read can get. The colour is applied per write, not baked into the text, so the segment stays
+    // a prefix of its next version.
+    { key: `${c.id}:err`, text: normalizeLF(c.stderr ?? ""), color: RED },
+  ])
+}
+
+/** What has been written so far: each segment's text, and where the last write left the line. */
+export interface CommandTerminalState {
+  written: Map<string, string>
+  last: { key: string; endedLine: boolean } | null
+}
+
+export const emptyCommandTerminalState = (): CommandTerminalState => ({ written: new Map(), last: null })
+
+/**
+ * From what is on screen to what `commands` says should be: the bytes to write, and whether to
+ * clear first. Pure, so the three cases that matter are testable without an xterm:
+ *
+ *  - a segment that grew → only its new bytes;
+ *  - a tail that *slid* (the platform keeps the last 64 KiB per stream) no longer extends what is
+ *    on screen → clear, and write everything again;
+ *  - two streams take turns on one screen, so a stderr warning without its newline would have the
+ *    next stdout line glued onto it → break the line when the stream changes mid-line. The same
+ *    partial line *continuing* on its own stream is left alone.
+ */
+export function planCommandTerminalWrites(
+  state: CommandTerminalState,
+  commands: TaskCommand[],
+): { clear: boolean; writes: string[]; state: CommandTerminalState } {
+  const next = segments(commands)
+  const clear = !next.every(({ key, text }) => text.startsWith(state.written.get(key) ?? ""))
+  const written = clear ? new Map<string, string>() : new Map(state.written)
+  let last = clear ? null : state.last
+  const writes: string[] = []
+  for (const { key, text, color } of next) {
+    const delta = text.slice((written.get(key) ?? "").length)
+    if (delta) {
+      const breakLine = last && last.key !== key && !last.endedLine
+      writes.push((breakLine ? "\r\n" : "") + (color ? `${color}${delta}${RESET}` : delta))
+      last = { key, endedLine: delta.endsWith("\n") }
+    }
+    written.set(key, text)
+  }
+  return { clear, writes, state: { written, last } }
+}
+
+function panelStatus(commands: TaskCommand[]): { status: TerminalPanelStatus; label: string } {
+  if (commands.some((c) => c.status === "running")) return { status: "running", label: "running" }
+  const failed = commands.find((c) => c.status !== "succeeded")
+  if (failed) {
+    return {
+      status: "failed",
+      label: failed.exitCode != null ? `${failed.status} · exit ${failed.exitCode}` : failed.status,
+    }
+  }
+  return { status: "success", label: "done" }
+}
+
+export interface TaskCommandTerminalProps {
+  /** The commands to show, in order — their captured stdout/stderr tails, as the app polls them. */
+  commands: TaskCommand[]
+  /** Bar title — the step or the command the output belongs to. */
+  title: string
+  className?: string
+}
+
+/**
+ * The output of commands the platform ran for a task, as a read-only terminal that follows them
+ * while they run.
+ *
+ * Fed by props only: the app re-reads the task's commands on its own cadence and hands the new
+ * rows down — each still-running command's tail a little longer than last time — and this writes
+ * the difference. A tail that *slid* (the platform keeps the last 64 KiB per stream) no longer
+ * extends what is on screen, and is redrawn from scratch rather than appended to.
+ *
+ * `TaskCommandLog` shows the same rows folded into a list, for after the fact. This is for
+ * watching one happen — a reseed or a reinstall is minutes with nothing else moving.
+ */
+export function TaskCommandTerminal({ commands, title, className }: TaskCommandTerminalProps) {
+  const termRef = useRef<TerminalHandle>(null)
+  const screen = useRef<CommandTerminalState>(emptyCommandTerminalState())
+
+  useEffect(() => {
+    const term = termRef.current
+    if (!term) return
+    const plan = planCommandTerminalWrites(screen.current, commands)
+    if (plan.clear) {
+      // `clear()` keeps the cursor's row; erase it too, or the old tail's last line leads the new one.
+      term.clear()
+      term.write("\x1b[2K\r")
+    }
+    for (const bytes of plan.writes) term.write(bytes)
+    screen.current = plan.state
+  }, [commands])
+
+  const { status, label } = panelStatus(commands)
+  const empty = commands.every((c) => !c.stdout && !c.stderr)
+
+  return (
+    <TerminalPanel
+      ref={termRef}
+      title={title}
+      subtitle={empty ? (status === "running" ? "no output yet" : "no output") : "stdout / stderr"}
+      status={status}
+      statusLabel={label}
+      followTail
+      copy
+      download
+      downloadFileName={`${title.toLowerCase().replace(/\W+/g, "-")}.log`}
+      className={className}
+    />
+  )
+}

package/src/components/tasks/event-stream.tsx

@@ -712,7 +712,10 @@ export function TaskEventStream({
   const empty = protocol === "none" || count === 0
   // Only while there is something to come back to: on a finished session the reader scrolling up
   // is just reading, not falling behind.
-  const showJumpToLatest = streaming && rows.length > 0 && !virtualizer.isAtEnd(SCROLL_END_THRESHOLD)
+  // Never over the empty state either: that is not a transcript (a queued task's boot panel
+  // scrolls once its setup timeline unfolds), and a virtualizer measuring nothing always reads as
+  // "not at the end".
+  const showJumpToLatest = !empty && streaming && rows.length > 0 && !virtualizer.isAtEnd(SCROLL_END_THRESHOLD)
 
   return (
     <div className={cn("flex min-h-0 flex-1 flex-col", className)}>

package/src/components/tasks/index.ts

@@ -83,7 +83,9 @@ export { TaskPullRequest } from "./pull-request"
 export { TaskSessionUsage, formatCost, formatTokens } from "./session-usage"
 export { TaskCommandLog } from "./command-log"
 export { TaskBoot, TaskMachine, bootSteps, workerLabel } from "./machine"
-export type { TaskBootStep, TaskMachineProps, TaskMachineTask } from "./machine"
+export { TaskCommandTerminal, emptyCommandTerminalState, planCommandTerminalWrites } from "./command-terminal"
+export type { CommandTerminalState, TaskCommandTerminalProps } from "./command-terminal"
+export type { TaskBootLogs, TaskBootProps, TaskBootStep, TaskMachineProps, TaskMachineTask } from "./machine"
 
 export type {
   AttachmentUrl,

package/src/components/tasks/machine.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { useState } from "react"
+import { useState, type ReactNode } from "react"
 import {
+  ChevronRightIcon,
   Code2Icon,
   ExternalLinkIcon,
   GitBranchIcon,
@@ -9,10 +10,12 @@ import {
   NetworkIcon,
   ServerIcon,
   SparklesIcon,
+  TerminalIcon,
   WifiOffIcon,
 } from "lucide-react"
 
 import { cn, formatDuration } from "../../utils"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet"
 import { ResourceBars, type WorkerStats } from "../workers/resource-bars"
 import { SetupWaterfall } from "../workers/setup-waterfall"
 import { StepIndicator, phaseLabel, setupTotalMs, type StepState } from "../workers/setup-progress"
@@ -20,6 +23,7 @@ import type { WorkerCardWorker, WorkerSetupStatus } from "../workers/types"
 import type { LinkRender } from "../workers/worker-card"
 import { WorkerSetupTimeline } from "../workers/worker-setup-timeline"
 import { WorkerStatusDot, WorkerStatusPill, resolveWorkerStatus } from "../workers/worker-status"
+import { TaskCommandTerminal } from "./command-terminal"
 import { useElapsed } from "./task-state"
 import type { TaskCommand, TaskItem, TaskMachineNode, TaskMachinePort } from "./types"
 
@@ -231,7 +235,26 @@ export function TaskMachine({ task, worker, node = null, stats = null, ports = [
 
 // ── The boot panel, centre column ────────────────────────────────────────────────────────────
 
-export type TaskBootStep = { key: string; label: string; state: StepState; detail?: string }
+export type TaskBootStep = {
+  /** `machine` | `container` | `setup` | `branch` | `reset` | `session`. */
+  key: string
+  label: string
+  state: StepState
+  detail?: string
+  /** The platform's commands behind the step (Branch, Reset) — what its log is drawn from. */
+  commands?: TaskCommand[]
+}
+
+/**
+ * A log per boot step, keyed by `TaskBootStep.key`, shown in a sheet when its row is clicked.
+ *
+ * Branch and Reset need nothing here: their output is already in `commands`, so `TaskBoot` draws
+ * it itself (`TaskCommandTerminal`). The others live where the package cannot reach — the image
+ * build's log, the container's stdout (where every setup phase prints) — so the app passes them
+ * in, typically its own socket-backed panels. An element is only a description: nothing is
+ * mounted, and no socket opened, until that step's sheet is. `null` turns a built-in log off.
+ */
+export type TaskBootLogs = Partial<Record<string, ReactNode | null>>
 
 /**
  * What the platform is doing before the first token — as steps, each one read from something it
@@ -323,6 +346,7 @@ export function bootSteps({
     label: "Branch",
     state: branchState,
     detail: `${task.branch} from ${task.baseBranch ?? "the project's default"}`,
+    commands: branchCommands.length > 0 ? branchCommands : undefined,
   }
 
   // Only a recycled machine runs the project's reset command, so the step exists if and only if
@@ -335,6 +359,7 @@ export function bootSteps({
         state:
           resetCommand.status === "running" ? "running" : resetCommand.status === "succeeded" ? "done" : "error",
         detail: "putting the reused machine back in shape",
+        commands: [resetCommand],
       }
     : null
 
@@ -361,32 +386,124 @@ export function bootSteps({
   return queued ? [machine, container, setupStep, ...rest] : [machine, ...rest]
 }
 
+/** The log a step opens onto, if any: what the app passed, else the step's own commands. */
+function stepLog(step: TaskBootStep, logs: TaskBootLogs | undefined): ReactNode | null {
+  const passed = logs?.[step.key]
+  if (passed !== undefined) return passed
+  return step.commands?.length ? <TaskCommandTerminal commands={step.commands} title={step.label} /> : null
+}
+
 /**
- * The centre column of a task that has no session yet — which is every `queued` task, and any
- * task that died before one started.
+ * A step's log, in a sheet.
  *
- * The steps are the ones the platform actually goes through, so a failed boot shows *where* it
- * stopped instead of an empty transcript — including the reset, on a machine that needed one.
+ * Folding the log under its row was tried first and lost on both axes: the boot panel is a centred
+ * column that a cockpit next to a conversation list squeezes to a few hundred pixels, and a log
+ * folded into it got a fixed height that was always either too short to read or too tall for the
+ * page. A sheet has the window's full height and all the width a log wants — and its tabs walk
+ * from the build to the setup to the reset without closing it, which is how a slow boot is read.
  */
-export function TaskBoot({
-  task,
-  worker,
-  commands,
+function StepLogSheet({
+  steps,
+  logs,
+  openKey,
+  onOpenKeyChange,
 }: {
+  steps: TaskBootStep[]
+  logs: TaskBootLogs | undefined
+  openKey: string | null
+  onOpenKeyChange: (key: string | null) => void
+}) {
+  const withLogs = steps.filter((s) => stepLog(s, logs) != null)
+  const step = withLogs.find((s) => s.key === openKey) ?? null
+  const log = step ? stepLog(step, logs) : null
+
+  return (
+    <Sheet open={!!step} onOpenChange={(open) => !open && onOpenKeyChange(null)}>
+      <SheetContent
+        side="right"
+        size="xl"
+        // Above `z-[120]`, like the tool stack: on a phone the boot panel sits inside
+        // `TaskCockpitMobile`, itself a layer at that height.
+        className="z-[130] gap-0 p-0"
+        backdropClassName="z-[130]"
+      >
+        {step && (
+          <>
+            <SheetHeader className="shrink-0 gap-2 border-b border-border py-3 pr-12">
+              <SheetTitle className="flex items-center gap-2 text-sm font-medium">
+                <StepIndicator state={step.state} />
+                {step.label}
+              </SheetTitle>
+              {step.detail && (
+                <SheetDescription className="break-words font-mono text-[11px]">{step.detail}</SheetDescription>
+              )}
+              {withLogs.length > 1 && (
+                <div className="flex flex-wrap items-center gap-1 pt-1">
+                  {withLogs.map((s) => (
+                    <button
+                      key={s.key}
+                      type="button"
+                      onClick={() => onOpenKeyChange(s.key)}
+                      aria-pressed={s.key === step.key}
+                      className={cn(
+                        "flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors",
+                        s.key === step.key
+                          ? "bg-muted font-medium text-foreground"
+                          : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                      )}
+                    >
+                      <StepIndicator state={s.state} />
+                      {s.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </SheetHeader>
+            {/* Keyed on the step: each source owns its socket or its write cursor, and switching
+                tabs must start the next one clean rather than append to the previous buffer. */}
+            <div key={step.key} className="min-h-0 flex-1">
+              {log}
+            </div>
+          </>
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export interface TaskBootProps {
   task: TaskMachineTask
   worker: WorkerCardWorker | null | undefined
   commands: TaskCommand[]
-}) {
+  /**
+   * The logs of the steps whose output the package cannot read — see `TaskBootLogs`. A step with
+   * a log gets a "Logs" affordance and opens it in a sheet; Branch and Reset have one on their own.
+   */
+  logs?: TaskBootLogs
+}
+
+/**
+ * The centre column of a task that has no session yet — which is every `queued` task, and any
+ * task that died before one started.
+ *
+ * The steps are the ones the platform actually goes through, so a failed boot shows *where* it
+ * stopped instead of an empty transcript — including the reset, on a machine that needed one. A
+ * step with output opens it in a sheet: nothing opens on its own, the reader decides what is
+ * worth watching.
+ */
+export function TaskBoot({ task, worker, commands, logs }: TaskBootProps) {
   const setup = worker?.setupStatus ?? null
   const steps = bootSteps({ task, worker, setup, commands })
   const elapsed = useElapsed(task.state === "queued" ? task.createdAt : null)
   const queued = task.state === "queued"
+  const [logKey, setLogKey] = useState<string | null>(null)
 
   return (
     // `min-h-full` + `my-auto`, not `h-full items-center`: centred while it fits, and growing (so
     // the parent's scroll takes over) once the setup timeline unfolds — a box that is centred
     // *and* capped overflows at both ends, cutting off the title and the footnote.
     <div className="flex min-h-full flex-col p-4">
+      <StepLogSheet steps={steps} logs={logs} openKey={logKey} onOpenKeyChange={setLogKey} />
       <div className="mx-auto my-auto w-full max-w-md">
         <div className="mb-3 flex items-center gap-2">
           <span className="relative flex h-2 w-2 shrink-0">
@@ -400,37 +517,62 @@ export function TaskBoot({
         </div>
 
         <div className="overflow-hidden rounded-lg border bg-card/60">
-          {steps.map((step) => (
-            <div key={step.key} className="flex items-start gap-2.5 border-b border-border/50 px-3 py-2.5 last:border-b-0">
-              <span className="mt-0.5">
-                <StepIndicator state={step.state} />
-              </span>
-              <div className="min-w-0 flex-1">
-                <p
-                  className={cn(
-                    "text-xs",
-                    step.state === "pending" ? "text-muted-foreground/50" : "font-medium",
-                    step.state === "error" && "text-destructive",
-                  )}
-                >
-                  {step.label}
-                </p>
-                {step.detail && (
-                  <p className="mt-0.5 break-words font-mono text-[11px] leading-relaxed text-muted-foreground">
-                    {step.detail}
+          {steps.map((step) => {
+            const hasLog = stepLog(step, logs) != null
+            const row = (
+              <>
+                <span className="mt-0.5">
+                  <StepIndicator state={step.state} />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={cn(
+                      "text-xs",
+                      step.state === "pending" ? "text-muted-foreground/50" : "font-medium",
+                      step.state === "error" && "text-destructive",
+                    )}
+                  >
+                    {step.label}
                   </p>
+                  {step.detail && (
+                    <p className="mt-0.5 break-words font-mono text-[11px] leading-relaxed text-muted-foreground">
+                      {step.detail}
+                    </p>
+                  )}
+                  {/* The setup is the long one, and the only step with sub-steps worth watching:
+                      which repository is cloning, which lifecycle command is running. Tied to the
+                      step's own state rather than the worker's: a recycled machine carries the
+                      setup status of its previous boot — which is the whole point of recycling —
+                      and unfolding a finished timeline under a ticked step is just noise. */}
+                  {step.key === "setup" && step.state === "running" && (
+                    <WorkerSetupTimeline status={setup} settingUp className="mt-2" />
+                  )}
+                </div>
+                {hasLog && (
+                  <span className="mt-0.5 flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground transition-colors group-hover:text-foreground">
+                    <TerminalIcon className="h-3 w-3" />
+                    Logs
+                    <ChevronRightIcon className="h-3.5 w-3.5" />
+                  </span>
                 )}
-                {/* The setup is the long one, and the only step with sub-steps worth watching:
-                    which repository is cloning, which lifecycle command is running. Tied to the
-                    step's own state rather than the worker's: a recycled machine carries the
-                    setup status of its previous boot — which is the whole point of recycling —
-                    and unfolding a finished timeline under a ticked step is just noise. */}
-                {step.key === "setup" && step.state === "running" && (
-                  <WorkerSetupTimeline status={setup} settingUp className="mt-2" />
-                )}
+              </>
+            )
+            return hasLog ? (
+              <button
+                key={step.key}
+                type="button"
+                onClick={() => setLogKey(step.key)}
+                aria-haspopup="dialog"
+                className="group flex w-full items-start gap-2.5 border-b border-border/50 px-3 py-2.5 text-left transition-colors last:border-b-0 hover:bg-muted/30"
+              >
+                {row}
+              </button>
+            ) : (
+              <div key={step.key} className="flex items-start gap-2.5 border-b border-border/50 px-3 py-2.5 last:border-b-0">
+                {row}
               </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
 
         {/* The reason, where the eye already is. It is in the sidebar too, but a post-mortem whose

package/src/components/tasks/tasks.test.tsx

@@ -9,8 +9,9 @@ import { describe, it, expect, vi } from "vitest"
 import { render, screen, fireEvent } from "@testing-library/react"
 
 import { renderInlineMarkdown } from "./agent-markdown"
+import { emptyCommandTerminalState, planCommandTerminalWrites } from "./command-terminal"
 import { TaskComposer } from "./composer"
-import { bootSteps } from "./machine"
+import { TaskBoot, bootSteps } from "./machine"
 import { formatCost, formatTokens } from "./session-usage"
 import { TaskCockpit } from "./task-cockpit"
 import { TaskList } from "./task-list"
@@ -103,6 +104,78 @@ describe("boot steps", () => {
     expect(steps.find((s) => s.key === "branch")?.state).toBe("done")
     expect(steps.find((s) => s.key === "session")?.state).toBe("running")
   })
+
+  it("hangs its own commands on the branch and reset steps — their log", () => {
+    const reset: TaskCommand = { ...branchSetup("running"), id: "c2", label: "Reset" }
+    const steps = bootSteps({ task: task({ state: "queued" }), worker: null, commands: [branchSetup("succeeded"), reset] })
+    expect(steps.find((s) => s.key === "branch")?.commands?.map((c) => c.id)).toEqual(["c1"])
+    expect(steps.find((s) => s.key === "reset")?.commands?.map((c) => c.id)).toEqual(["c2"])
+    expect(steps.find((s) => s.key === "machine")?.commands).toBeUndefined()
+  })
+})
+
+describe("boot panel logs", () => {
+  const worker = { id: "w1", name: "fresh", state: "setup", dockerState: "running", createdAt: "2026-09-24T10:00:01Z" }
+  const branch: TaskCommand = { id: "c1", command: "git checkout -B …", status: "succeeded", label: "Branch setup", createdAt: "2026-09-24T10:01:00Z" }
+
+  it("offers a log only on a step that has one", () => {
+    render(
+      <TaskBoot task={task({ state: "queued" })} worker={worker} commands={[branch]} logs={{ setup: <p>container stdout</p> }} />,
+    )
+    const openers = screen.getAllByRole("button", { name: /Logs/ }).map((b) => b.textContent)
+    // Setup from the app, Branch from its own command; Machine and Container have none here.
+    expect(openers).toHaveLength(2)
+    expect(openers.some((t) => t?.startsWith("Setup"))).toBe(true)
+    expect(openers.some((t) => t?.startsWith("Branch"))).toBe(true)
+  })
+
+  it("opens a step's log in a sheet, with the other steps' logs one tab away", () => {
+    render(
+      <TaskBoot task={task({ state: "queued" })} worker={worker} commands={[branch]} logs={{ setup: <p>container stdout</p> }} />,
+    )
+    // Nothing is mounted before the click: an app's log is a socket, and it must not open for a
+    // row nobody looked at.
+    expect(screen.queryByText("container stdout")).toBeNull()
+    fireEvent.click(screen.getAllByRole("button", { name: /Logs/ }).find((b) => b.textContent?.startsWith("Setup"))!)
+    const sheet = screen.getByRole("dialog")
+    expect(sheet.textContent).toContain("container stdout")
+    expect(screen.getByRole("button", { name: "Branch", pressed: false })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Setup", pressed: true })).toBeTruthy()
+  })
+
+  it("lets the app turn a built-in log off with null", () => {
+    render(<TaskBoot task={task({ state: "queued" })} worker={worker} commands={[branch]} logs={{ branch: null }} />)
+    expect(screen.queryByRole("button", { name: /Logs/ })).toBeNull()
+  })
+})
+
+describe("command terminal writes", () => {
+  const cmd = (stdout: string, stderr = ""): TaskCommand => ({ id: "r", command: "seed", status: "running", stdout, stderr, createdAt: "2026-09-24T10:00:00Z" })
+  // What the terminal ends up showing, colour codes and all, over successive reads of one command.
+  const replay = (...reads: TaskCommand[][]) => {
+    let state = emptyCommandTerminalState()
+    const log: string[] = []
+    for (const commands of reads) {
+      const plan = planCommandTerminalWrites(state, commands)
+      if (plan.clear) log.push("<clear>")
+      log.push(...plan.writes)
+      state = plan.state
+    }
+    return log
+  }
+
+  it("writes only what a growing tail gained", () => {
+    expect(replay([cmd("a\n")], [cmd("a\nb\n")], [cmd("a\nb\n")])).toEqual(["a\r\n", "b\r\n"])
+  })
+
+  it("starts over when the tail slid past what is on screen", () => {
+    expect(replay([cmd("a\nb\n")], [cmd("b\nc\n")])).toEqual(["a\r\nb\r\n", "<clear>", "b\r\nc\r\n"])
+  })
+
+  it("breaks the line when the other stream takes over mid-line, not when the same one continues", () => {
+    const out = replay([cmd("step 1\n", "warning")], [cmd("step 1\nstep 2\n", "warning")], [cmd("step 1\nstep 2\nhalf", "warning")], [cmd("step 1\nstep 2\nhalf line\n", "warning")])
+    expect(out).toEqual(["step 1\r\n", "\x1b[31mwarning\x1b[0m", "\r\nstep 2\r\n", "half", " line\r\n"])
+  })
 })
 
 describe("worker ↔ task", () => {