mockpit 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +60 -212
  2. package/bin/demoData.js +2 -2
  3. package/bin/initDesign.js +6 -6
  4. package/bin/mockpit.js +407 -187
  5. package/bin/poster.js +377 -0
  6. package/dist/mcp/server.js +80 -24
  7. package/dist/server/answerAdditions.d.ts +7 -0
  8. package/dist/server/answerAdditions.js +76 -0
  9. package/dist/server/apiViews.d.ts +289 -52
  10. package/dist/server/apiViews.js +189 -81
  11. package/dist/server/app.d.ts +7 -2
  12. package/dist/server/app.js +2845 -832
  13. package/dist/server/appIcon.js +15 -5
  14. package/dist/server/appIconPng.js +3 -3
  15. package/dist/server/askNudges.js +1 -1
  16. package/dist/server/cdnInline.d.ts +8 -0
  17. package/dist/server/cdnInline.js +638 -0
  18. package/dist/server/codeWorker.js +1 -1
  19. package/dist/server/decisionList.d.ts +45 -0
  20. package/dist/server/decisionList.js +302 -0
  21. package/dist/server/decisions.d.ts +4 -4
  22. package/dist/server/decisions.js +9 -9
  23. package/dist/server/designGuide.d.ts +5 -5
  24. package/dist/server/designGuide.js +128 -67
  25. package/dist/server/embeds.d.ts +3 -1
  26. package/dist/server/embeds.js +31 -6
  27. package/dist/server/eventLog.d.ts +2 -2
  28. package/dist/server/eventLog.js +11 -11
  29. package/dist/server/events.d.ts +9 -6
  30. package/dist/server/feedbackBatch.d.ts +35 -13
  31. package/dist/server/feedbackBatch.js +111 -47
  32. package/dist/server/fills.d.ts +4 -0
  33. package/dist/server/fills.js +55 -1
  34. package/dist/server/handoff.d.ts +4 -1
  35. package/dist/server/handoff.js +8 -2
  36. package/dist/server/icons.js +1 -1
  37. package/dist/server/index.js +39 -10
  38. package/dist/server/jump.d.ts +21 -0
  39. package/dist/server/jump.js +175 -0
  40. package/dist/server/knobs.d.ts +3 -3
  41. package/dist/server/knobs.js +6 -6
  42. package/dist/server/mcpHttp.d.ts +5 -1
  43. package/dist/server/mcpHttp.js +16 -11
  44. package/dist/server/mcpSpec.js +118 -46
  45. package/dist/server/parts.js +9 -1
  46. package/dist/server/run.d.ts +1 -1
  47. package/dist/server/run.js +25 -16
  48. package/dist/server/runApi.d.ts +3 -3
  49. package/dist/server/runApi.js +25 -19
  50. package/dist/server/sqlStore.d.ts +112 -96
  51. package/dist/server/sqlStore.js +906 -172
  52. package/dist/server/standings.d.ts +25 -0
  53. package/dist/server/standings.js +113 -0
  54. package/dist/server/surfacePage.d.ts +6 -9
  55. package/dist/server/surfacePage.js +361 -86
  56. package/dist/server/types.d.ts +226 -72
  57. package/dist/server/types.js +73 -78
  58. package/extensions/mockpit.js +89 -72
  59. package/guide/AGENT_SETUP.md +13 -1
  60. package/guide/packs/design-craft.md +2 -3
  61. package/guide/topics/asks.md +106 -62
  62. package/guide/topics/feedback.md +126 -119
  63. package/guide/topics/html.md +17 -24
  64. package/guide/topics/http.md +41 -41
  65. package/guide/topics/knobs.md +7 -10
  66. package/guide/topics/scripts.md +22 -33
  67. package/guide/topics/surfaces.md +39 -48
  68. package/opencode/mockpit.js +120 -0
  69. package/opencode/package.json +8 -0
  70. package/package.json +4 -3
  71. package/skills/launch-video/SKILL.md +11 -11
  72. package/skills/mockpit/SKILL.md +26 -22
  73. package/viewer/dist/index.html +9 -9
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mockpit",
3
- "version": "2.0.0",
4
- "description": "A design-decision loop for terminal coding agents — agents publish mocks with states and variants, ask questions and expose knobs; you answer, tune and comment, then send one reply.",
3
+ "version": "3.0.0",
4
+ "description": "A design-decision loop for terminal coding agents — agents publish designs with states and variants, ask questions and expose knobs; you answer, tune and comment, then send one reply.",
5
5
  "keywords": [
6
6
  "agent-tools",
7
7
  "ai-agents",
@@ -35,7 +35,8 @@
35
35
  "viewer/dist/",
36
36
  "guide/",
37
37
  "skills/",
38
- "extensions/"
38
+ "extensions/",
39
+ "opencode/"
39
40
  ],
40
41
  "type": "module",
41
42
  "exports": {
@@ -11,7 +11,7 @@ Maintainer-only: requires a mockpit source checkout (the pipeline lives in
11
11
  Generates product videos where every app frame is the real mockpit viewer
12
12
  talking to a real server — no screen recording, no mockups. Unlike hunk's
13
13
  keyframe-compositing pipeline (`skills/launch-video` in the hunk repo),
14
- mockpit's product IS live motion — mocks arriving over SSE, sandboxed
14
+ mockpit's product IS live motion — designs arriving over SSE, sandboxed
15
15
  iframes resizing, the comment loop — so this pipeline records **one real-time
16
16
  pass** instead of compositing stills:
17
17
 
@@ -68,7 +68,7 @@ ffmpeg -y -i "$RAW" -vf "fps=30,format=yuv420p" \
68
68
  delete it after.
69
69
  - **Custom:** any scene set works — tutorials, comparisons, announcements.
70
70
  Whatever runs in the viewer can be driven: publish over the API mid-recording
71
- and the mock updates on camera; that's the money shot, use it.
71
+ and the design updates on camera; that's the money shot, use it.
72
72
 
73
73
  ## Storyboard model (record.mjs + stage.html)
74
74
 
@@ -83,15 +83,15 @@ ffmpeg -y -i "$RAW" -vf "fps=30,format=yuv420p" \
83
83
  `sub`, `cmds`/`cmd` (+ `span.p` for the prompt `$`), `foot`.
84
84
  - Interact with the viewer through `page.frameLocator("#app")`. Useful
85
85
  selectors:
86
- `.home-step[data-mock="<slug>"]` (Home's screens), `.frame.on` (the frame on
86
+ `.home-step[data-design="<slug>"]` (Home's screens), `.frame.on` (the frame on
87
87
  stage), `.strip [role="tab"]` (states), `.opt[data-option="<id>"]` (question
88
88
  options), `button.send`, `.themebtn` (dark/light).
89
- - Publish content via the HTTP API while recording: `POST /api/mocks`
90
- (`{project, mock, state, variant, html | surfaces, knobs}`; pass the returned
91
- `sessionId` as `session` afterwards), `POST /api/mocks/:id/asks`,
92
- `POST /api/mocks/:id/revise` to revise (bumps the version live), and
93
- `POST /api/comments` (`{session, mock, text}`) for agent replies.
94
- Seed background mocks _before_ opening the page; save the live publishes
89
+ - Publish content via the HTTP API while recording: `POST /api/designs`
90
+ (`{project, design, state, variant, html | surfaces, knobs}`; pass the returned
91
+ `sessionId` as `session` afterwards), `POST /api/designs/:id/asks`,
92
+ `POST /api/designs/:id/revise` to revise (bumps the version live), and
93
+ `POST /api/comments` (`{session, design, text}`) for agent replies.
94
+ Seed background designs _before_ opening the page; save the live publishes
95
95
  for on-camera.
96
96
  - Target pacing: money shots hold 2.5–4s after content settles, transitions
97
97
  ~1s, typing at `pressSequentially(..., { delay: 34 })`. Intro card ~3s,
@@ -109,7 +109,7 @@ ffmpeg -y -i "$RAW" -vf "fps=30,format=yuv420p" \
109
109
  hit-target check runs in the top frame; an overlay that intercepts clicks
110
110
  aimed into the app iframe times every action out — even actions "behind" an
111
111
  intro card.
112
- - **Wait for iframes after opening a mock.** Every frame renders from
112
+ - **Wait for iframes after opening a design.** Every frame renders from
113
113
  `/s/:id`; cut away too early and the last shot shows an empty stage.
114
114
  `waitFor` a `.frame.on iframe` and hold ~2–3s before the outro (this is also
115
115
  why "publish on camera" shots need their settle time).
@@ -140,7 +140,7 @@ ffmpeg -y -i "$RAW" -vf "fps=30,format=yuv420p" \
140
140
  ("up to 95% lighter" for the 0.13.0 hydrate change, not "95% faster").
141
141
  - The window chrome's URL pill shows the real server host:port — decorative
142
142
  but it must not lie; `record.mjs` fills it from the actual base URL.
143
- - Demo content is `bin/demoData.js` (the Writer mock `mockpit demo` seeds) — label
143
+ - Demo content is `bin/demoData.js` (the Writer design `mockpit demo` seeds) — label
144
144
  anything invented beyond it honestly, and keep agent names real
145
145
  (`claude-code`, `pi`).
146
146
  - The video is silent — never imply audio in the video or announcement copy.
@@ -1,12 +1,11 @@
1
1
  ---
2
2
  name: mockpit
3
- description: Show design and visual work on the user's mockpit surface — UI mocks with states and variants, diagrams, interactive explainers, code reviews — ask structured questions on it, expose knobs to tune, and receive the user's one batched reply. Use when the user asks you to design, illustrate, visualize, sketch, mock up, or review something visually, mentions mockpit, or when a render would explain your work better than text.
3
+ description: Show design and visual work on the user's mockpit surface — UI designs with states and variants, diagrams, interactive explainers, code reviews — ask structured questions on it, expose knobs to tune, and receive the user's one batched reply. Use when the user asks you to design, illustrate, visualize, sketch, design up, or review something visually, mentions mockpit, or when a render would explain your work better than text.
4
4
  ---
5
5
 
6
6
  # mockpit
7
7
 
8
- Read the brief before your first publish. It is short and written for this
9
- project (its palette, kit and icons): `mockpit guide`.
8
+ Read the brief before your first publish: `mockpit guide`.
10
9
 
11
10
  Without the CLI: `curl -s ${MOCKPIT_URL:-http://localhost:8228}/agent-howto`.
12
11
  Over MCP: `guide`. A connector on `/mcp?mode=code` (stdio:
@@ -15,41 +14,46 @@ the question as one script. From a shell, `mockpit run loop.js` does the same.
15
14
 
16
15
  The loop never waits for the user:
17
16
 
18
- 1. `mockpit init` once per repo; read the brief (`mockpit guide`).
19
- 2. `mockpit publish --mock <slug> --state "<user's words>" --variant <v> --html f.html`,
17
+ 1. `mockpit init` once per repo; read the brief (`mockpit guide`). In a new session
18
+ `mockpit read` first: its decisions are settled unless the user says otherwise.
19
+ 2. `mockpit publish --design <slug> --state "<user's words>" --variant <v> --html f.html`,
20
20
  once per variant; declare parts with `data-part`. Name a state by what the
21
21
  user sees ("Home, idle"), never by your process ("Prototype", "v2"); title
22
- a mock by what it is ("Hold menu"), never "Round 2 · …". The html is the UI alone:
23
- say what a variant is in `--note`, never in the design, and name the
22
+ a design by what it is ("Hold menu"), never "Round 2 · …". The html is the UI alone:
23
+ say what a variant is in `--description`, never in the design, and name the
24
24
  widths it ships at once with `--widths 390,1280`.
25
- Declare structure only when designing a product's screens: `--kind page`
25
+ Declare structure only when designing a product's screens: `--kind screen`
26
26
  for a screen, `--flow <name> --step N` for states the user moves between,
27
- and each reusable piece as its own mock embedded with
28
- `<mockpit-embed slug="card">` (that makes it a component). Sketches,
27
+ and each reusable component as its own design embedded with
28
+ `<mockpit-embed slug="card">` (that makes it a component). Ideas,
29
29
  diagrams and reviews stay plain. `--area <name>` groups Home by the
30
- product's parts; `--source <path>` names the code that implements it.
31
- `mockpit edit --mock <slug>` changes slug, title, kind, area or source
30
+ product's areas; `--source <path>` names the code that implements it.
31
+ `mockpit edit --design <slug>` changes slug, title, kind, area or source
32
32
  without a new version; `mockpit edit --project <p> --area-order
33
33
  "Shell,Food"` orders Home's areas. A batch with `edited` is the user moving
34
- a mock from Home (kind, area): build on it.
34
+ a design from Home (kind, area): build on it.
35
35
  3. A choice is several variants plus one question that binds them: `mockpit ask`
36
36
  with options bound to variants. A variant decides everything it differs on;
37
37
  don't re-ask it. Visual options carry a `variant` or knob `set`. One render
38
38
  plus a control: `--knobs`; declare knobs for what is worth fine-tuning
39
39
  even unasked. When a publish result nudges, send its `suggestedAsk`.
40
- 4. Tell the user in one line where to look, then end your turn. The question
41
- itself lives in the mock (`ask`), never in chat. The user answers in the
42
- browser at their own pace. Never poll.
40
+ 4. Tell the user in one line where to look, then end your turn. The question lives in the
41
+ design (`ask`), never in chat. Never poll.
43
42
  5. When the user says they answered (or a `mockpit watch` line wakes you), run
44
- `mockpit feedback`. Every write also returns `feedback`; read it. Empty
45
- `feedback` with a `pending` draft means they are still answering. A batch
46
- with `closed: true` means they closed the mock unanswered: never re-ask
47
- its `dismissed` questions. To the user, they are always questions.
43
+ `mockpit feedback`. Every write also returns `feedback`; read it. Empty `feedback` with a
44
+ `pending` draft means they are still answering.
48
45
  6. `mockpit publish` the revision (`--parts name=file` for one part);
49
46
  `mockpit export` once a variant is in use.
50
47
 
51
- In Claude Code, arm `mockpit watch` under Monitor after asking, then end the
52
- turn, so Send wakes you. Elsewhere the user's next message is the wake-up.
48
+ In Claude Code, arm `mockpit watch` under Monitor after asking, then end the turn:
49
+ `Monitor({ command: "mockpit watch", description: "mockpit replies", timeout_ms: 1800000 })`.
50
+ A monitor expires (30 minutes at most) with one notice: re-arm it while you still expect a
51
+ reply, without telling the user. Arm one per conversation, and never run `mockpit watch` in the
52
+ foreground; it never returns. With the mockpit plugin, skip all this: your first mockpit call
53
+ starts its wait, which wakes you and restarts by itself.
54
+
55
+ With no such tool, the viewer shows the user a line to paste when no watcher is open; treat it
56
+ as them saying they answered.
53
57
 
54
58
  Reference topics, fetched only when needed with `mockpit guide --topic <id>`:
55
59
  knobs, asks, surfaces, html, feedback, http, scripts.