|
| 1 | +# Mock Transcript: Cmux End-to-End Demo |
| 2 | + |
| 3 | +This scripted flow is tailored for automated Playwright captures. It walks through the highest-impact UI affordances so reviewers can skim a single recording and understand the app’s behavior. |
| 4 | + |
| 5 | +## Goals |
| 6 | + |
| 7 | +- Exercise key surfaces: project sidebar, workspace modal, chat surface (streaming + reasoning + tool call), chat meta sidebar, plan/exec toggle, thinking slider, error banner, edit flow, and history truncation. |
| 8 | +- Keep every interaction deterministic so the mock AI backend can replay the same transcript on every run. |
| 9 | +- Ensure videos remain under ~90 seconds by limiting idle time while still letting animations complete. |
| 10 | + |
| 11 | +## Environment Prep |
| 12 | + |
| 13 | +1. Launch Cmux with `CMUX_MOCK_AI=1` so the main process swaps in the scripted responder. |
| 14 | +2. Pre-seed `~/.cmux/config.json` with a single project `demo-repo` and worktree `feature/login`. (The Playwright harness will handle this setup.) |
| 15 | +3. Start the app with the project pre-selected so the chat surface is immediately visible. |
| 16 | +4. Install Playwright’s bundled ffmpeg runtime via `bunx playwright install ffmpeg` to ensure Electron video capture works reliably. |
| 17 | + |
| 18 | +## High-Level Timeline |
| 19 | + |
| 20 | +| Step | UI Action | Transcript Snippet | Feature Coverage | |
| 21 | +| ---- | ---------------------------------------------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------- | |
| 22 | +| 0 | Hover "Tips" carousel briefly before interacting | — | Carousel animation baseline | |
| 23 | +| 1 | Open project sidebar menu → click `+` to add workspace | — | Project sidebar controls, modal launch | |
| 24 | +| 2 | Use `NewWorkspaceModal` to create branch `demo-review` | — | Modal form + validation | |
| 25 | +| 3 | Select `demo-review` workspace | — | Workspace selection, metadata refresh | |
| 26 | +| 4 | Adjust plan/exec toggle to `plan` and drag thinking slider to `3` | — | Input controls, tooltips | |
| 27 | +| 5 | Send message `Let's summarize the current branches.` | `User#1` | Chat input send, persisted state | |
| 28 | +| 6 | Mock assistant streams plan-style response with reasoning preamble and tool call to `git.branchList` | `Assistant#1` | Streaming text, reasoning block, tool message, message metadata | |
| 29 | +| 7 | Switch toggle to `exec`, thinking level `1`, send follow-up `Open the onboarding doc.` | `User#2` | Mode swap effect, second send | |
| 30 | +| 8 | Mock assistant attempts `filesystem.open` tool, emits `StreamError` (simulated ENOENT) | `Assistant#2` (error) | Error rendering, cancel streaming state | |
| 31 | +| 9 | Click edit on `User#2`, modify text to `Show the onboarding doc contents instead.` and submit | `User#2-edit` | Edit barrier, resend flow | |
| 32 | +| 10 | Assistant retries, succeeds with streamed content and closes tool call | `Assistant#3` | Stream restart after edit, reasoning end, tool output | |
| 33 | +| 11 | Invoke `/truncate 50` command from command palette to trim history | `System` message (backend) | Slash command handling, delete message event | |
| 34 | +| 12 | Chat auto-scroll hint appears and is dismissed via tooltip/button | — | Jump-to-bottom affordance | |
| 35 | +| 13 | Use chat meta sidebar to collapse/expand (`ChatMetaSidebar`), ensure recording captures state change | — | Sidebar interactions | |
| 36 | + |
| 37 | +## Detailed Transcript |
| 38 | + |
| 39 | +The mock backend will replay the following payloads (history sequences are strictly increasing): |
| 40 | + |
| 41 | +1. **User#1** (`historySequence: 1`) |
| 42 | + - Text: "Let's summarize the current branches." |
| 43 | + - Metadata: plan mode, thinking level 3. |
| 44 | +2. **Assistant#1** (streamed) |
| 45 | + - `stream-start` for `msg-plan-1` (`historySequence: 2`). |
| 46 | + - `reasoning-delta`: "Looking at demo-repo/workspaces…" → "Found three branches." (two chunks). |
| 47 | + - `tool-call-start`: id `tool-branches`, name `git.branchList`, args `{ project: "demo-repo" }`. |
| 48 | + - `tool-call-end`: same id, result `[{ name: "main" }, { name: "feature/login" }, { name: "demo-review" }]`. |
| 49 | + - `stream-delta` chunks forming assistant text: |
| 50 | + 1. "Here’s the current branch roster:" |
| 51 | + 2. "• `main` – release baseline" |
| 52 | + 3. "• `feature/login` – authentication refresh" |
| 53 | + 4. "• `demo-review` – sandbox you just created" |
| 54 | + - `stream-end` with metadata `{ model: "mock:planner", usage: { inputTokens: 128, outputTokens: 85 } }`. |
| 55 | +3. **User#2** (`historySequence: 3`) |
| 56 | + - Text: "Open the onboarding doc." |
| 57 | + - Metadata: exec mode, thinking level 1. |
| 58 | +4. **Assistant#2 error run** |
| 59 | + - `stream-start` for `msg-exec-1` (`historySequence: 4`). |
| 60 | + - `tool-call-start`: id `tool-open`, name `filesystem.open`, args `{ path: "docs/onboarding.md" }`. |
| 61 | + - `stream-error`: `{ messageId: "msg-exec-1", error: "ENOENT: docs/onboarding.md not found", errorType: "tool_failed" }`. |
| 62 | +5. **User#2 edit** (`historySequence: 4` replacement) |
| 63 | + - Edited text: "Show the onboarding doc contents instead." (same history slot replaces prior message; backend replays truncated history before new message). |
| 64 | +6. **Assistant#3 success run** |
| 65 | + - `stream-start` for `msg-exec-2` (`historySequence: 5`). |
| 66 | + - `tool-call-start`: id `tool-open`, name `filesystem.open`, args `{ path: "docs/onboarding.md" }`. |
| 67 | + - `tool-call-end`: result `{ excerpt: "1. Clone the repo…" }`. |
| 68 | + - `stream-delta` chunks narrating successful retrieval. |
| 69 | + - `stream-end` metadata `{ model: "mock:executor", usage: { inputTokens: 96, outputTokens: 142 } }`. |
| 70 | +7. **System truncate acknowledgement** |
| 71 | + - After `/truncate 50`, backend emits `DeleteMessage` for sequences `[1, 2]` followed by informational assistant message `historySequence: 6` summarizing remaining context. |
| 72 | + |
| 73 | +## Notes for Automation |
| 74 | + |
| 75 | +- Every event is timestamped deterministically (e.g., add 1s per history sequence) so recordings align across runs. |
| 76 | +- Tool outputs should stay compact to avoid long scrolls; prefer bullet lists under 5 items. |
| 77 | +- When the error fires, keep stream duration short (<2s) so reviewers see the red banner without waiting. |
| 78 | +- After truncation, ensure the jump-to-bottom hint becomes visible by temporarily scrolling up before the delete event. |
| 79 | + |
| 80 | +This transcript can be encoded as a JSON/TypeScript fixture and consumed by the mock AI service during tests. |
0 commit comments