fix(merman): remove sequence lifeline fade (#41623)

Co-authored-by: Aiden Cline <aidenpcline@gmail.com>

packages/app/src/pages/session/timeline/observe-element-offset.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test"
 import { type Virtualizer } from "@tanstack/solid-virtual"
-import { Window } from "happy-dom"
+import { Node, Window } from "happy-dom"
 import { mutationNodesContainElement, observeElementOffsetReconnectAware } from "./observe-element-offset"
 
 test("matches only the scroll element or an ancestor containing it", () => {
@@ -18,6 +18,7 @@ test("matches only the scroll element or an ancestor containing it", () => {
 
 test("reports a divergent native offset once and ignores equal offsets and unrelated mutations", async () => {
   const targetWindow = new Window()
+  const mutations = controlledMutations(targetWindow)
   const route = targetWindow.document.createElement("section")
   const viewport = targetWindow.document.createElement("div")
   const unrelated = targetWindow.document.createElement("div")
@@ -40,24 +41,24 @@ test("reports a divergent native offset once and ignores equal offsets and unrel
     instance.scrollOffset = offset
   })
 
-  targetWindow.document.body.append(unrelated)
-  unrelated.remove()
-  await frames(2, targetWindow)
-  expect(calls).toEqual([])
+  try {
+    mutations.append(targetWindow.document.body, unrelated)
+    mutations.remove(unrelated)
+    expect(calls).toEqual([])
 
-  route.remove()
-  targetWindow.document.body.append(route)
-  await waitFor(() => calls.length === 1, targetWindow)
-  expect(calls).toEqual([[0, false]])
+    mutations.remove(route)
+    mutations.append(targetWindow.document.body, route)
+    await frames(2, targetWindow)
+    expect(calls).toEqual([[0, false]])
 
-  route.remove()
-  targetWindow.document.body.append(route)
-  await new Promise((resolve) => setTimeout(resolve, 0))
-  await frames(3, targetWindow)
-  expect(calls).toEqual([[0, false]])
-
-  cleanup?.()
-  await targetWindow.happyDOM.close()
+    mutations.remove(route)
+    mutations.append(targetWindow.document.body, route)
+    await frames(2, targetWindow)
+    expect(calls).toEqual([[0, false]])
+  } finally {
+    cleanup?.()
+    await targetWindow.happyDOM.close()
+  }
 })
 
 test("keeps checking until stale reset-delay callbacks can no longer win", async () => {
@@ -204,7 +205,33 @@ async function frames(count: number, targetWindow: FrameWindow = window) {
   }
 }
 
-async function waitFor(condition: () => boolean, targetWindow: FrameWindow = window) {
-  const deadline = targetWindow.performance.now() + 1_000
-  while (!condition() && targetWindow.performance.now() < deadline) await frames(1, targetWindow)
+function controlledMutations(targetWindow: Window) {
+  let emit: (record: MutationRecord) => void = () => {
+    throw new Error("Mutation observer is not active")
+  }
+  class ControlledMutationObserver {
+    constructor(callback: MutationCallback) {
+      emit = (record) => callback([record], this as unknown as MutationObserver)
+    }
+    observe() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+  Object.defineProperty(targetWindow, "MutationObserver", { value: ControlledMutationObserver })
+  const record = (target: Node, addedNodes: Node[], removedNodes: Node[]) =>
+    ({ type: "childList", target, addedNodes, removedNodes }) as unknown as MutationRecord
+  return {
+    append(parent: Node, node: Node) {
+      parent.appendChild(node)
+      emit(record(parent, [node], []))
+    },
+    remove(node: Node) {
+      const parent = node.parentNode
+      if (!parent) throw new Error("Mutation target has no parent")
+      parent.removeChild(node)
+      emit(record(parent, [], [node]))
+    },
+  }
 }

packages/core/src/database/migration/20260805200742_import_legacy_credentials.ts

@@ -1,3 +1,4 @@
+import { readFile } from "node:fs/promises"
 import path from "node:path"
 import { sql } from "drizzle-orm"
 import { Effect, Option, Schema } from "effect"
@@ -41,9 +42,9 @@ export default migration
 
 export function importLegacyCredentials(tx: Parameters<DatabaseMigration.Migration["up"]>[0], filepath: string) {
   return Effect.gen(function* () {
-    const file = Bun.file(filepath)
-    if (!(yield* Effect.promise(() => file.exists()))) return
-    const input = Option.getOrUndefined(decodeJson(yield* Effect.promise(() => file.text())))
+    const content = yield* Effect.promise(() => readFile(filepath, "utf8").catch(() => undefined))
+    if (content === undefined) return
+    const input = Option.getOrUndefined(decodeJson(content))
     if (typeof input !== "object" || input === null || Array.isArray(input)) {
       return yield* Effect.fail(new Error("Legacy credential file must contain an object"))
     }

packages/core/test/database-migration.test.ts

@@ -164,6 +164,20 @@ describe("DatabaseMigration", () => {
     expect(await Bun.file(source).text()).toBe(content)
   })
 
+  test("skips legacy credential import when the source file is absent", async () => {
+    await using tmp = await tmpdir()
+
+    await run(
+      Effect.gen(function* () {
+        const db = yield* makeDb
+        yield* DatabaseMigration.apply(db)
+        yield* db.transaction((tx) => importLegacyCredentials(tx, path.join(tmp.path, "missing-auth.json")))
+
+        expect(yield* db.all(sql`SELECT id FROM credential`)).toEqual([])
+      }),
+    )
+  })
+
   test("rolls back a failed migration without recording it", async () => {
     await run(
       Effect.gen(function* () {

packages/merman/src/markdown.ts

@@ -44,6 +44,10 @@ export interface MermaidMarkdownRendererOptions {
     muted?: ColorInput
     warning?: ColorInput
     background?: ColorInput
+    request?: ColorInput
+    response?: ColorInput
+    note?: ColorInput
+    noteBackground?: ColorInput
   }
 }
 
@@ -131,12 +135,12 @@ function prepareDiagram(kind: DiagramKind, source: string, options: MermaidMarkd
             participant: color(colors.primary),
             lifeline: color(colors.muted),
             group: color(colors.secondary),
-            request: color(colors.primary),
-            response: color(colors.primary),
+            request: color(colors.request ?? colors.primary),
+            response: color(colors.response ?? colors.primary),
             fragment: color(colors.secondary),
             fragmentLabelBg: color(colors.background),
-            note: color(colors.warning),
-            noteBg: color(colors.background),
+            note: color(colors.note ?? colors.warning),
+            noteBg: color(colors.noteBackground ?? colors.background),
           }),
         ),
         height: size.height,

packages/merman/src/palette.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { RGBA } from "@opentui/core"
+import { blendColor } from "./core/color/style.js"
 import { createOpenCodeDiagramPalette } from "./palette.js"
 
 type Rgb = readonly [number, number, number]
@@ -31,11 +32,15 @@ describe("OpenCode diagram palette", () => {
   }>)("derives a controlled neutral ladder for a $name", ({ text, subdued, secondary, muted }) => {
     const primary = rgb(text)
     const info = RGBA.fromInts(40, 120, 220)
+    const success = RGBA.fromInts(80, 180, 120)
+    const warning = RGBA.fromInts(220, 160, 80)
     const background = RGBA.fromInts(10, 20, 30)
     const palette = createOpenCodeDiagramPalette({
       text: primary,
       subdued: rgb(subdued),
       info,
+      success,
+      warning,
       background,
     })
 
@@ -45,5 +50,9 @@ describe("OpenCode diagram palette", () => {
     expect(palette.muted.equals(rgb(muted))).toBe(true)
     expect(palette.warning).toBe(info)
     expect(palette.background).toBe(background)
+    expect(palette.request).toBe(success)
+    expect(palette.response).toBe(warning)
+    expect(palette.note).toBe(primary)
+    expect(palette.noteBackground.equals(blendColor(background, rgb(subdued), 0.25))).toBe(true)
   })
 })

packages/merman/src/palette.ts

@@ -5,6 +5,8 @@ export interface OpenCodeDiagramPaletteInput {
   readonly text: RGBA
   readonly subdued: RGBA
   readonly info: RGBA
+  readonly success: RGBA
+  readonly warning: RGBA
   readonly background: RGBA
 }
 
@@ -16,5 +18,9 @@ export function createOpenCodeDiagramPalette(input: OpenCodeDiagramPaletteInput)
     muted: blendColor(input.text, input.subdued, 0.7),
     warning: input.info,
     background: input.background,
+    request: input.success,
+    response: input.warning,
+    note: input.text,
+    noteBackground: blendColor(input.background, input.subdued, 0.25),
   }
 }

packages/merman/src/plugin.ts

@@ -12,6 +12,8 @@ export default Plugin.define({
           text: context.theme.text.default,
           subdued: context.theme.text.subdued,
           info: context.theme.text.feedback.info.default,
+          success: context.theme.text.feedback.success.default,
+          warning: context.theme.text.feedback.warning.default,
           background: context.theme.background.default,
         }),
       })),

packages/merman/src/sequence/diagram.test.ts

@@ -51,16 +51,15 @@ sequenceDiagram
 `)
 
     expectDiagram(output).toEqualDiagram(`
-      ╭─────────╮       ╭────────╮
-      │ Browser │       │ Server │
-      ╰────┬────╯       ╰────┬───╯
-           │                 │
-           │     GET /       │
-           ├─────────────────►
-           │                 │
-           │  401 WWW-Auth   │
-           ◄─────────────────┤
-           │                 │
+      Browser           Server
+      ───┬───           ───┬──
+         │                 │
+         │ GET /           │
+         ├─────────────────►
+         │                 │
+         │ 401 WWW-Auth    │
+         ◄─────────────────┤
+         │                 │
     `)
   })
 
@@ -140,13 +139,13 @@ sequenceDiagram
 `)
 
     const lines = output.split("\n")
-    const browserCenter = lines[1]!.indexOf("w")
-    const serverCenter = lines[1]!.indexOf("v")
+    const browserCenter = lines[0]!.indexOf("w")
+    const serverCenter = lines[0]!.indexOf("v")
 
-    expect(lines[2]?.[browserCenter]).toBe("┬")
-    expect(lines[3]?.[browserCenter]).toBe("│")
-    expect(lines[2]?.[serverCenter]).toBe("┬")
-    expect(lines[3]?.[serverCenter]).toBe("│")
+    expect(lines[1]?.[browserCenter]).toBe("┬")
+    expect(lines[2]?.[browserCenter]).toBe("│")
+    expect(lines[1]?.[serverCenter]).toBe("┬")
+    expect(lines[2]?.[serverCenter]).toBe("│")
   })
 
   test("ramps participant frames into neutral lifelines", () => {
@@ -277,8 +276,8 @@ sequenceDiagram
   A->>B: hello`)
 
     expect(output).not.toContain("<br")
-    expect(output).toContain("│ First line  │")
-    expect(output).toContain("│ Second line │")
+    expect(output).toContain("First line")
+    expect(output).toContain("Second line")
   })
 
   test("parses Mermaid arrow head variants", () => {
@@ -314,28 +313,27 @@ sequenceDiagram
 `)
 
     expect(output).toMatchInlineSnapshot(`
-      "╭───╮              ╭───╮
-      │ A │              │ B │
-      ╰─┬─╯              ╰─┬─╯
-        │                  │
-        │   open solid     │
-        ├─────────────────>│
-        │                  │
-        │   open dashed    │
-        │<─────────────────┤
-        │                  │
-        │  failed solid    │
-        ├─────────────────✕│
-        │                  │
-        │  failed dashed   │
-        │✕─────────────────┤
-        │                  │
-        │   async solid    │
-        ├─────────────────)│
-        │                  │
-        │  async dashed    │
-        │(─────────────────┤
-        │                  │"
+      " A                  B
+      ─┬─                ─┬─
+       │                  │
+       │ open solid       │
+       ├─────────────────>│
+       │                  │
+       │ open dashed      │
+       │<─────────────────┤
+       │                  │
+       │ failed solid     │
+       ├─────────────────✕│
+       │                  │
+       │ failed dashed    │
+       │✕─────────────────┤
+       │                  │
+       │ async solid      │
+       ├─────────────────)│
+       │                  │
+       │ async dashed     │
+       │(─────────────────┤
+       │                  │"
     `)
   })
 
@@ -387,7 +385,7 @@ sequenceDiagram
   end
 `)
     const lines = output.split("\n")
-    const participantCenter = lines.find((line) => line.includes("│ A │"))!.indexOf("A")
+    const participantCenter = lines.find((line) => line.includes("  A"))!.indexOf("A")
     const fragmentStart = lines.find((line) => line.includes("alt: ok"))!.indexOf("╭")
 
     expect(fragmentStart).toBeLessThan(participantCenter)
@@ -557,7 +555,7 @@ sequenceDiagram
     const fragmentMessageRow = fragment.split("\n").find((line) => line.includes("this non adjacent message"))!
     expect(groupMessageRow.trimEnd().endsWith("│")).toBe(true)
     expect(fragmentMessageRow).toContain("this non adjacent message is deliberately much wider than the frame")
-    expect(fragmentMessageRow.match(/│/g)?.length).toBe(2)
+    expect(fragmentMessageRow.match(/│/g)?.length).toBe(3)
   })
 
   test("keeps long notes inside groups and nested fragment frames intact", () => {
@@ -600,7 +598,7 @@ sequenceDiagram
     const groupBorderRight = output.split("\n")[0]!.lastIndexOf("╮")
     const lines = output.split("\n")
     const externalLabelRow = lines.findIndex((line) => line.includes("External"))
-    const externalHeaderLeft = lines[externalLabelRow - 1]!.lastIndexOf("╭")
+    const externalHeaderLeft = lines[externalLabelRow + 1]!.lastIndexOf("─")
 
     expect(externalHeaderLeft).toBeGreaterThan(groupBorderRight)
   })
@@ -655,18 +653,17 @@ sequenceDiagram
 `)
 
     expect(output).toMatchInlineSnapshot(`
-      "                   ╭─ Backend ──────────────────────────────────╮
-      ╭─────────╮        │ ╭─────╮          ╭───────╮          ╭────╮ │
-      │ Browser │        │ │ API │          │ Cache │          │ DB │ │
-      ╰────┬────╯        │ ╰──┬──╯          ╰───┬───╯          ╰──┬─╯ │
-           │             │    │                 │                 │   │
-           │  GET /users/42   │                 │                 │   │
-           ├──────────────────►                 │                 │   │
-           │             │    │                 │                 │   │
-           │             │    │  get user:42    │                 │   │
-           │             │    ├─────────────────►                 │   │
-           │             │    │                 │                 │   │
-                         ╰────────────────────────────────────────────╯"
+      "                   ╭─ Backend ───────────────────────────────╮
+      Browser            │ API              Cache              DB  │
+      ───┬───            │ ─┬─              ──┬──              ─┬─ │
+         │               │  │                 │                 │  │
+         │ GET /users/42 │  │                 │                 │  │
+         ├──────────────────►                 │                 │  │
+         │               │  │                 │                 │  │
+         │               │  │ get user:42     │                 │  │
+         │               │  ├─────────────────►                 │  │
+         │               │  │                 │                 │  │
+                         ╰─────────────────────────────────────────╯"
     `)
   })
 
@@ -706,18 +703,17 @@ sequenceDiagram
 `)
 
     expect(output).toMatchInlineSnapshot(`
-      "╭─────────╮
-      │ Service │
-      ╰────┬────╯
-           │
-           ├────────────────────╮
-           │ Check Permissions  │
-           ◄────────────────────╯
-           │"
+      "Service
+      ───┬───
+         │
+         ├────────────────────╮
+         │ Check Permissions  │
+         ◄────────────────────╯
+         │"
     `)
   })
 
-  test("frames notes in their reserved rows", () => {
+  test("renders note badges in their reserved rows", () => {
     const output = renderSequenceDiagram(`
 sequenceDiagram
   Browser->>Server: one
@@ -729,11 +725,9 @@ sequenceDiagram
     const nextMessageRow = lines.findIndex((line) => line.includes("two"))
 
     expect(noteRow).toBeGreaterThan(0)
-    expect(lines[noteRow - 1]).toContain("╭")
-    expect(lines[noteRow - 1]).toContain("╮")
-    expect(lines[noteRow]).toContain("│ phase │")
-    expect(lines[noteRow + 1]).toContain("╰")
-    expect(lines[noteRow + 1]).toContain("╯")
+    expect(lines[noteRow - 1]?.trim()).toBe("│                 │")
+    expect(lines[noteRow]).toContain(" phase ")
+    expect(lines[noteRow + 1]?.trim()).toBe("│                 │")
     expect(nextMessageRow).toBe(noteRow + 2)
   })
 

packages/merman/src/sequence/drawing.ts

@@ -191,29 +191,9 @@ function renderSelfMessage(
 }
 
 function renderNote(grid: SequenceGrid, placement: Extract<SequenceStepPlacement, { type: "note" }>): void {
-  const width = Math.max(...placement.textLines.map(diagramTextWidth))
-  const left = placement.textX
-  const right = left + width - 1
-  const top = placement.textY - 1
-  const bottom = placement.textY + placement.textLines.length
-
-  for (let x = left + 1; x < right; x++) {
-    setCell(grid, x, top, SEQUENCE_BORDER.horizontal, "note")
-    setCell(grid, x, bottom, SEQUENCE_BORDER.horizontal, "note")
-  }
-  for (let y = top + 1; y < bottom; y++) {
-    setCell(grid, left, y, SEQUENCE_BORDER.vertical, "note")
-    setCell(grid, right, y, SEQUENCE_BORDER.vertical, "note")
-  }
-  setCell(grid, left, top, SEQUENCE_BORDER.topLeft, "note")
-  setCell(grid, right, top, SEQUENCE_BORDER.topRight, "note")
-  setCell(grid, left, bottom, SEQUENCE_BORDER.bottomLeft, "note")
-  setCell(grid, right, bottom, SEQUENCE_BORDER.bottomRight, "note")
-  placement.textLines.forEach((line, index) => setText(grid, left, placement.textY + index, line, "noteBadge"))
-  for (let y = placement.textY; y < bottom; y++) {
-    setCell(grid, left, y, SEQUENCE_BORDER.vertical, "note")
-    setCell(grid, right, y, SEQUENCE_BORDER.vertical, "note")
-  }
+  placement.textLines.forEach((line, index) =>
+    setText(grid, placement.textX, placement.textY + index, line, "noteBadge"),
+  )
 }
 
 export function drawSequenceDiagramGrid(
@@ -236,22 +216,12 @@ export function drawSequenceDiagramGrid(
         setText(grid, centeredStart(center, line), participantHeaderY + index, line, "participant"),
       )
     } else {
+      labelLines.forEach((line, index) =>
+        setText(grid, centeredStart(center, line), participantHeaderTopY + index, line, "participant"),
+      )
       for (let x = headerLeftX; x <= headerRightX; x++) {
-        setCell(grid, x, participantHeaderTopY, SEQUENCE_BORDER.horizontal, "participant")
         setCell(grid, x, participantRuleY, SEQUENCE_BORDER.horizontal, "participant")
       }
-
-      setCell(grid, headerLeftX, participantHeaderTopY, SEQUENCE_BORDER.topLeft, "participant")
-      setCell(grid, headerRightX, participantHeaderTopY, SEQUENCE_BORDER.topRight, "participant")
-      for (let y = participantHeaderY; y < participantRuleY; y++) {
-        setCell(grid, headerLeftX, y, SEQUENCE_BORDER.vertical, "participant")
-        setCell(grid, headerRightX, y, SEQUENCE_BORDER.vertical, "participant")
-      }
-      setCell(grid, headerLeftX, participantRuleY, SEQUENCE_BORDER.bottomLeft, "participant")
-      setCell(grid, headerRightX, participantRuleY, SEQUENCE_BORDER.bottomRight, "participant")
-      labelLines.forEach((line, index) =>
-        setText(grid, centeredStart(center, line), participantHeaderY + index, line, "participant"),
-      )
       setCell(grid, center, participantRuleY, SEQUENCE_BORDER.topT, "participant")
     }
 

packages/merman/src/sequence/placement.test.ts

@@ -206,7 +206,7 @@ ${Array.from(
     expect(explicit.activations).toEqual(shorthand.activations)
   })
 
-  test("centers message label blocks over their arrow span", () => {
+  test("left-aligns message label blocks inside their arrow span", () => {
     const plan = createSequencePlacementPlan(
       parseMermaidSequenceDiagram(`sequenceDiagram
   participant A
@@ -214,8 +214,6 @@ ${Array.from(
   A->>B: short<br/>a much longer line`),
     )
     const message = plan.steps.find((step) => step.type === "message")!
-    const labelWidth = Math.max(...message.labelLines.map(diagramTextWidth))
-
-    expect(message.labelX * 2 + labelWidth).toBe(message.leftX + message.rightX)
+    expect(message.labelX).toBe(message.leftX + 2)
   })
 })

packages/merman/src/sequence/placement.ts

@@ -142,7 +142,7 @@ function messageLabelText(message: SequenceMessage): string {
 
 function participantHeaderWidth(label: string, compact: boolean): number {
   const width = labelLinesWidth(mermaidLabelLines(label))
-  return compact ? width : Math.max(5, width + 4)
+  return compact ? width : Math.max(3, width)
 }
 
 function fragmentLabelText(fragment: SequenceFragment): string {
@@ -247,7 +247,7 @@ function getStepContentBounds(
     const leftX = Math.min(fromX, toX)
     const rightX = Math.max(fromX, toX)
     const labelWidth = messageWidth(step.message)
-    const labelLeftX = Math.floor((leftX + rightX - labelWidth) / 2)
+    const labelLeftX = leftX + 2
     return { leftX: Math.min(leftX, labelLeftX), rightX: Math.max(rightX, labelLeftX + labelWidth - 1) }
   }
   if (step.type !== "note") return undefined
@@ -525,8 +525,8 @@ export function createSequencePlacementPlan(
     ...diagram.participants.map((participant) => mermaidLabelLines(participant.label).length),
   )
   const participantHeaderTopY = hasGroups ? 1 : 0
-  const participantHeaderY = participantHeaderTopY + (compact ? 0 : 1)
-  const participantRuleY = participantHeaderTopY + (compact ? participantLabelHeight - 1 : participantLabelHeight + 1)
+  const participantHeaderY = participantHeaderTopY
+  const participantRuleY = participantHeaderTopY + (compact ? participantLabelHeight - 1 : participantLabelHeight)
   const lifelineStartY = participantRuleY + 1
   const stepStartY = lifelineStartY + 1
   const width = Math.max(contentBounds.rightX + 1, ...groups.map((group) => group.rightX + 1), fragments.rightX + 1)
@@ -650,7 +650,7 @@ export function createSequencePlacementPlan(
       const inlineLabel = inlineMessageLabel(step.message, labelLines, fromX, toX, compact)
       const arrowY = inlineLabel ? stepY : stepY + labelLines.length
       const renderedLabelWidth = inlineLabel ? visualLength(inlineLabel) : labelLinesWidth(labelLines)
-      const labelX = Math.floor((leftX + rightX - renderedLabelWidth) / 2)
+      const labelX = inlineLabel ? Math.floor((leftX + rightX - renderedLabelWidth) / 2) : leftX + 2
       steps.push({
         type: "message",
         message: step.message,

scripts/drive-mermaid-visual.ts

@@ -0,0 +1,75 @@
+import { mkdir } from "node:fs/promises"
+import { defineScript, Effect, Llm } from "opencode-drive"
+
+const theme = Bun.env.DRIVE_THEME ?? "opencode"
+const output = Bun.env.DRIVE_SCREENSHOT ?? `artifacts/mermaid-${theme}.png`
+const animate = Bun.env.DRIVE_ANIMATE === "1"
+const cycleThemes = Bun.env.DRIVE_CYCLE_THEMES === "1"
+
+const response = `\`\`\`mermaid
+sequenceDiagram
+  participant B as Browser
+  participant S as Server
+  participant T as Ticket store
+  participant P as PTY
+  B->>S: GET /
+  S-->>B: 401 WWW-Auth
+  Note over B,S: native browser Basic prompt
+  B->>S: GET / · Basic
+  S-->>B: 200 web UI
+  Note over B,S: user opens terminal
+  B->>S: POST connect-token<br/>· Basic (cached by browser)<br/>· X-OpenCode-Ticket: 1
+  S->>T: issue { ptyID, … }
+  S-->>B: { ticket }
+  B->>S: WS …?ticket=…<br/>Upgrade: websocket
+  S->>T: consume(token,scope)
+  T-->>S: ok, delete
+  S->>P: attach
+  P-->>B: WS frames
+\`\`\``
+
+export default defineScript({
+  config: {
+    autoupdate: false,
+  },
+  tuiConfig: {
+    theme: {
+      name: theme,
+      mode: "dark",
+    },
+  },
+  tui: {
+    viewport: { cols: 180, rows: 64 },
+  },
+  run: ({ ui, llm }) =>
+    Effect.gen(function* () {
+      yield* ui.submit("Show the connection flow as a Mermaid sequence diagram")
+      yield* llm.send(
+        Llm.text(response, animate ? { delay: 80, chunkSize: 20 } : { delay: 0, chunkSize: response.length }),
+      )
+      yield* ui.waitFor("WS frames", { timeout: 10_000 })
+      if (cycleThemes) {
+        yield* Effect.sleep(800)
+        yield* Effect.forEach(
+          ["everforest", "synthwave84", "matrix", "opencode"],
+          (next) =>
+            Effect.gen(function* () {
+              yield* ui.press("x", { ctrl: true })
+              yield* ui.press("t")
+              yield* ui.waitFor("Themes")
+              yield* ui.type(next)
+              yield* Effect.sleep(700)
+              yield* ui.enter()
+              yield* Effect.sleep(1_200)
+            }),
+          { discard: true },
+        )
+      }
+      const screenshot = yield* ui.screenshot(`mermaid-${theme}`)
+      yield* Effect.promise(async () => {
+        await mkdir("artifacts", { recursive: true })
+        await Bun.write(output, Bun.file(screenshot))
+      })
+      yield* Effect.log(`Saved ${output}`)
+    }),
+})