kaloko 0.5.2 → 0.7.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.
package/README.md CHANGED
@@ -8,8 +8,8 @@ e-mail of the flow, checks the criteria and lays the whole flow out on a
8
8
  canvas: screens, branches, locales and evidence. People review and approve it
9
9
  there, and the newest captures double as documentation.
10
10
 
11
- - Product and guides: <https://kaloko.app>
12
- - Service (organizations, shared canvases, reviews): <https://kaloko.app>
11
+ - Product, pricing and the service (organizations, shared canvases, reviews): <https://kaloko.app>
12
+ - Guides: <https://kaloko.app/guides>
13
13
 
14
14
  Pages are walked in Chromium, WebKit and Firefox, on phone, tablet and
15
15
  desktop presets, in light and dark mode. Native apps too: Android, iOS,
@@ -201,6 +201,18 @@ what still waits for a person, so it can pass the link on. Agents never
201
201
  approve for people: their decisions are marked and do not count as a
202
202
  person's.
203
203
 
204
+ To see what moved, compare a step with the accepted run side by side, as a
205
+ pixel diff, with *Swipe* or with *Onion skin*; `G` shows one step in every
206
+ locale and viewport at once. Comments can carry a box, an arrow or a line
207
+ drawn on the screenshot. On Business and Enterprise an accepted run has a
208
+ signed acceptance record (who approved what and when, criteria results,
209
+ screenshot hashes) as PDF and JSON:
210
+
211
+ ```bash
212
+ npx kaloko signoff <run-id> --out handover/ # download and check the record
213
+ npx kaloko signoff --verify record.pdf # check one someone handed you; no token needed
214
+ ```
215
+
204
216
  Every AI verdict comes with one sentence saying why. Criteria marked
205
217
  `vision: true`, and answers the text evaluator is unsure about, get a second
206
218
  look at the screenshot from a vision model (`ANTHROPIC_API_KEY`, or through
@@ -208,7 +220,8 @@ Kaloko); `kaloko build` lists what to act on with the score and the reason.
208
220
  The `a11y` pack walks the page with Tab (order, visible focus, traps, skip
209
221
  link) and reads names from the accessibility tree. Pixel diffs skip the
210
222
  regions a step ignores; `kaloko walk --stability 3` and `kaloko stability`
211
- find the clocks, ads and carousels worth ignoring.
223
+ find the clocks, ads and carousels worth ignoring, and `kaloko stability --pull`
224
+ brings in the regions reviewers marked on kaloko.app.
212
225
 
213
226
  ## A changelog with pictures
214
227
 
@@ -236,7 +249,63 @@ kaloko.app has a slider between before and after, switches language and
236
249
  screen size, and links each picture to its flow on the canvas. Share it with
237
250
  guests, readers from your company's domain, or publish it with a feed.
238
251
  Repositories with several apps list them under `products:` in
239
- `kaloko.config.yml`.
252
+ `kaloko.config.yml`; `npx kaloko products sync` puts them on Kaloko before the
253
+ first release, and Products in the app's menu lists each with its newest
254
+ version, changelog and docs (`npx kaloko products list` in the terminal).
255
+
256
+ When release-please, changesets or semantic-release makes your releases,
257
+ `npx kaloko ci github --release` adds a workflow that records each published
258
+ release on Kaloko; your release tool keeps writing `CHANGELOG.md`.
259
+
260
+ ## Docs that keep up with the app
261
+
262
+ Guides in your `docs/` folder (tutorials, how-to guides, reference,
263
+ explanation) use the same step references, so their pictures never go stale.
264
+ A Czech translation of `pay.md` is `pay.cs.md` next to it.
265
+
266
+ ```bash
267
+ npx kaloko init --docs=full # docs folders with a template in each
268
+ npx kaloko docs check # broken references, stale sections, missing translations; exit 1 in CI
269
+ npx kaloko docs publish # the docs on kaloko.app: versions, languages, screens, search
270
+ npx kaloko export --format docusaurus # or md, vitepress, mkdocs, html, pdf, json: pictures as files
271
+ ```
272
+
273
+ When a screen changes after its guide was written, the section on kaloko.app
274
+ says "the screen changed in 2.4 — check the text", and `kaloko docs check`
275
+ lists it. A guide plays as a walkthrough, one step at a time, and readers can
276
+ ask for a "What's new" e-mail with every release.
277
+
278
+ ## Jira, Linear, Slack and Teams
279
+
280
+ When a reviewer returns a step, the fix usually gets planned in Jira or
281
+ Linear. Create the issue from the step, on the canvas or from the terminal:
282
+
283
+ ```bash
284
+ npx kaloko issue create --step checkout --to jira --criterion AC2
285
+ ```
286
+
287
+ The issue gets the screenshot, the criterion, the reviewers' notes and a link
288
+ back to the step. When it is done in the tracker, the comment on the step is
289
+ resolved. A branch or pull request title that names the issue (`WEB-12`, or
290
+ Linear's `eng-42`) links the run to it. Slack and Teams channels are chosen per
291
+ project in Settings → Integrations, with the events each channel wants and
292
+ quiet hours. Both come with the Team plan and up.
293
+
294
+ ## Pages checked on a schedule
295
+
296
+ A read-only scenario of public or gated pages can run on Kaloko's own
297
+ browsers every morning, with nobody starting the CLI (Business: 2,000 pages a
298
+ month, Enterprise: 10,000):
299
+
300
+ ```bash
301
+ npx kaloko schedule add --scenario qa/flows/public.yml --env production --every day --at 5
302
+ npx kaloko schedule export github --scenario qa/flows/checkout.yml --env staging # the full walk in GitHub Actions
303
+ ```
304
+
305
+ Hosted runs open pages (HTTP Basic and saved sessions work), take full-page
306
+ screenshots in every locale and viewport and check selectors and text. Steps
307
+ that click or type, apps and local environments need the full walk, which the
308
+ exported workflow runs on the same schedule.
240
309
 
241
310
  ## Design (Kaloko Design)
242
311
 
@@ -244,8 +313,8 @@ Design the screens of a flow as live HTML with your own agent and skills, in the
244
313
  and QA use. A design environment (`kind: design`, a folder of steps) is walked and synced into a shared draft the
245
314
  team sees live; `kaloko share` there publishes a version of the flow (unchanged steps are stored once). An
246
315
  accepted version becomes the design reference, and `packs: [design]` checks every implementation run against
247
- it (pixels, structure, tokens, contrast). See `skills/kaloko/reference/design.md`, `docs/GLOSSARY.md` and
248
- `docs/SURFACES.md`.
316
+ it (pixels, structure, tokens, contrast). Details: `skills/kaloko/reference/design.md` in the package and the
317
+ [design guides](https://kaloko.app/guides/design-with-your-agent).
249
318
 
250
319
  ```bash
251
320
  npx kaloko start --scenario qa/flows/checkout.yml --env design
@@ -266,6 +335,28 @@ npx kaloko spec payment # elements, styles → tokens, states
266
335
  npx kaloko walk && npx kaloko drift # expected token vs actual value per element; exit 1 while it differs
267
336
  ```
268
337
 
338
+ Each published version says what changed since the previous one, step by step: the text that moved, the
339
+ viewports that look different, the tokens that changed. Read it before publishing and write your own where the
340
+ reason matters:
341
+
342
+ ```bash
343
+ npx kaloko share --notes-preview # what the version notes would say
344
+ npx kaloko share --notes notes.md # a summary, then "step-id: what changed" lines
345
+ ```
346
+
347
+ Design in Figma? Import the frames as design steps and make them the design reference without redrawing them.
348
+ Frames match steps by name (`Payment / mobile`); each step gets the frame image, its text layers with their type
349
+ and colors, and the file's variables as `tokens.json`. It goes one way: prototype links and components stay in
350
+ Figma. Without an API token, import a folder of frames exported from Figma.
351
+
352
+ ```bash
353
+ FIGMA_TOKEN=figd_… npx kaloko design import figma "https://www.figma.com/design/<key>/Shop" --scenario qa/flows/checkout.yml
354
+ npx kaloko design import figma ./figma-export --scenario qa/flows/checkout.yml
355
+ ```
356
+
357
+ Looking for where a pattern is already used? `npx kaloko screens "empty cart"` searches the newest screenshot of
358
+ every step across your flows (also at `/<org>/screens` on kaloko.app and MCP `search_screens`).
359
+
269
360
  On the canvas, *Prototype* (or `P`) presents the steps full screen as live pages: click through links between
270
361
  steps, switch the device, walk with the arrow keys, and share a link that opens straight into a step. The rules
271
362
  for pages that work everywhere are in `skills/kaloko/reference/portable-html.md`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaloko",
3
- "version": "0.5.2",
3
+ "version": "0.7.0",
4
4
  "description": "See what your AI agents built: every screen, language and device walked, assessed and approved on one canvas.",
5
5
  "keywords": [
6
6
  "qa",
@@ -0,0 +1,83 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://qawalk.com/schemas/changelog.v1.json",
4
+ "title": "qawalk.changelog.v1",
5
+ "description": "The visual changelog as data (docs/DOCS-CHANGELOG.md → Exports): releases newest first with their Keep a Changelog groups and items, each item with the pictures its step references resolve to. Written by src/lib/docs-export.mjs changelogJson; served by GET …/docs/export?format=json and the Download menu of the changelog and docs pages; kaloko export --format json saves it. image is a link for the reader who exported it (signed links expire); canvas opens the step on Kaloko when the reader may see the run.",
6
+ "type": "object",
7
+ "required": ["schema", "product", "releases"],
8
+ "properties": {
9
+ "schema": { "const": "qawalk.changelog.v1" },
10
+ "product": {
11
+ "type": "object",
12
+ "required": ["slug"],
13
+ "properties": {
14
+ "slug": { "type": "string" },
15
+ "name": { "description": "A name, or names per language ({ \"en\": …, \"cs\": … }).", "oneOf": [{ "type": "string" }, { "type": "object", "additionalProperties": { "type": "string" } }, { "type": "null" }] }
16
+ }
17
+ },
18
+ "generated_at": { "type": ["string", "null"], "format": "date-time" },
19
+ "releases": {
20
+ "type": "array",
21
+ "items": {
22
+ "type": "object",
23
+ "required": ["version", "groups"],
24
+ "properties": {
25
+ "version": { "type": "string" },
26
+ "released_on": { "type": ["string", "null"], "description": "YYYY-MM-DD" },
27
+ "tag": { "type": ["string", "null"] },
28
+ "notes": { "type": "string", "description": "Text before the first group." },
29
+ "groups": {
30
+ "type": "array",
31
+ "items": {
32
+ "type": "object",
33
+ "required": ["name", "items"],
34
+ "properties": {
35
+ "name": { "type": "string", "description": "Added, Changed, Deprecated, Removed, Fixed, Security, or the heading as written." },
36
+ "heading": { "type": "string" },
37
+ "items": {
38
+ "type": "array",
39
+ "items": {
40
+ "type": "object",
41
+ "required": ["text", "pictures"],
42
+ "properties": {
43
+ "text": { "type": "string", "description": "The item's words without pictures and comments." },
44
+ "pictures": {
45
+ "type": "array",
46
+ "items": {
47
+ "type": "object",
48
+ "required": ["ref", "ok"],
49
+ "properties": {
50
+ "ref": { "type": "string", "description": "The step reference kaloko:<scenario>/<step>[?…]." },
51
+ "ok": { "type": "boolean", "description": "false: no accepted picture for this reference." },
52
+ "scenario": { "type": "string" },
53
+ "step": { "type": "string" },
54
+ "title": { "type": ["string", "null"] },
55
+ "locale": { "type": "string" },
56
+ "viewport": { "type": "string" },
57
+ "run": { "type": ["string", "null"] },
58
+ "version": { "type": ["string", "null"], "description": "The release the picture belongs to (null: the newest accepted)." },
59
+ "image": { "type": ["string", "null"] },
60
+ "canvas": { "type": ["string", "null"] }
61
+ }
62
+ }
63
+ }
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }
71
+ }
72
+ },
73
+ "docs": {
74
+ "type": "array",
75
+ "description": "The docs pages in the export (one language).",
76
+ "items": {
77
+ "type": "object",
78
+ "required": ["path", "title"],
79
+ "properties": { "path": { "type": "string" }, "lang": { "type": ["string", "null"] }, "title": { "type": "string" }, "kind": { "type": ["string", "null"], "enum": ["tutorials", "how-to", "reference", "explanation", null] } }
80
+ }
81
+ }
82
+ }
83
+ }
@@ -275,6 +275,13 @@
275
275
  "number": {
276
276
  "type": "integer"
277
277
  },
278
+ "key": {
279
+ "type": [
280
+ "string",
281
+ "null"
282
+ ],
283
+ "description": "Jira or Linear issue key (ENG-42) from the scenario, the branch or the pull request title."
284
+ },
278
285
  "url": {
279
286
  "type": [
280
287
  "string",
@@ -329,6 +336,18 @@
329
336
  },
330
337
  "description": "Steps whose revision differs from the parent version."
331
338
  },
339
+ "notes": {
340
+ "type": [
341
+ "object",
342
+ "null"
343
+ ],
344
+ "description": "\"What changed\" notes of a design version (qawalk.version-notes.v1): summary and steps [{ step, title, locales, reason, changes, text }]; generated texts are { en, cs }, edited ones a string.",
345
+ "properties": {
346
+ "schema": { "const": "qawalk.version-notes.v1" },
347
+ "summary": { "type": ["string", "object", "null"] },
348
+ "steps": { "type": "array", "items": { "type": "object", "required": ["step"], "properties": { "step": { "type": "string" }, "reason": { "enum": ["new", "changed", "removed", "note"] }, "text": { "type": ["string", "object"] } } } }
349
+ }
350
+ },
332
351
  "draft": {
333
352
  "type": "object",
334
353
  "description": "Present when the manifest is a live draft, not a run."
@@ -113,7 +113,7 @@
113
113
  "issue": {
114
114
  "type": "object",
115
115
  "additionalProperties": false,
116
- "description": "Ticket the scenario verifies. `number` alone resolves against the repository's remote.",
116
+ "description": "Ticket the scenario verifies. `number` alone resolves against the repository's remote; `key` names a Jira or Linear issue (ENG-42).",
117
117
  "properties": {
118
118
  "repo": {
119
119
  "type": "string",
@@ -123,6 +123,11 @@
123
123
  "type": "integer",
124
124
  "minimum": 1
125
125
  },
126
+ "key": {
127
+ "type": "string",
128
+ "pattern": "^[A-Z][A-Z0-9_]{0,19}-[1-9][0-9]{0,8}$",
129
+ "description": "Jira or Linear issue key, e.g. ENG-42."
130
+ },
126
131
  "url": {
127
132
  "type": "string"
128
133
  },
@@ -13,12 +13,14 @@ description: >
13
13
  reviewer rejected on a canvas, what is waiting in the Kaloko inbox, or how
14
14
  to report a run in an issue, and when designing screens of a flow in a
15
15
  design environment (live HTML steps, drafts, versions, the design
16
- reference, checking implementation against it), and when implementing a
16
+ reference, checking implementation against it, importing Figma frames),
17
+ when looking for existing screens across flows, and when implementing a
17
18
  screen that has an approved design (read the step spec, build with its
18
19
  tokens, check drift), and when a step should be recorded on video or its
19
20
  trace read (actions, requests, console), and when a user-visible change
20
21
  should land in the visual changelog (CHANGELOG.md with step references,
21
- kaloko changelog draft, kaloko release) or a guide should show a step.
22
+ kaloko changelog draft, kaloko release) or a guide should show a step or
23
+ be written, translated or checked (kaloko docs check).
22
24
  ---
23
25
 
24
26
  # Kaloko
@@ -44,6 +46,10 @@ the canvas, storage and collaboration are the service.
44
46
  entry says it for people, with step references for the screens it changed
45
47
  (`kaloko changelog draft`), and new scenarios carry `product:` (and
46
48
  `module:`) when the config has products.
49
+ - When the project keeps docs (`docs.dir`, a `docs/` folder with step
50
+ references) and the change is user-visible: the guides that show the changed
51
+ screens say what people see now, their translations follow, and
52
+ `kaloko docs check` reports no broken references or stale sections.
47
53
  - When you implemented a step from an approved design: you read its spec
48
54
  (`kaloko spec <step>`), walked the implementation with `packs: [design]`,
49
55
  and `kaloko drift` is clean or the PR names each difference left for a
@@ -51,7 +57,8 @@ the canvas, storage and collaboration are the service.
51
57
  - On a design environment: the folder follows the bundle rules and
52
58
  `kaloko design lint` shows no error, `kaloko walk` and `kaloko sync` ran,
53
59
  `kaloko status` shows no conflict, and you read the draft's feedback; a
54
- version is published only when the person asked.
60
+ version is published only when the person asked, with notes that say what
61
+ changed and why (`kaloko share --notes-preview`, then `--notes`).
55
62
 
56
63
  ## You may do without asking
57
64
 
@@ -69,7 +76,11 @@ with `--theirs`). Move to the trash runs you uploaded in this session that
69
76
  were superseded before anyone looked at them (debug rounds: no comments, no
70
77
  verdict), and run `kaloko prune` without `--yes` to see what a clean-up would do.
71
78
  Draft and edit the Unreleased section of the changelog (`kaloko changelog draft
72
- --apply`) and add step references to it and to guides.
79
+ --apply`) and add step references to it and to guides. Put the products of the
80
+ config on Kaloko (`kaloko products sync`: it records no release) and list them
81
+ (`kaloko products list`). Write, translate and fix
82
+ guides in the docs folder, run `kaloko docs check`, and export them for a docs
83
+ site (`kaloko export --format …`) into a local folder.
73
84
 
74
85
  ## Ask first
75
86
 
@@ -80,7 +91,10 @@ design reference or baseline, merging a design branch, keeping your version of
80
91
  a step in a sync conflict (`--mine`), turning on `html_view`, turning on recordings for
81
92
  a whole project (`capture.record` in the config: storage), a real clean-up
82
93
  (`kaloko prune --yes`), trashing someone else's run, archiving a scenario,
83
- recording a release (`kaloko release`) or asking to publish a changelog, and
94
+ recording a release (`kaloko release`) or asking to publish a changelog,
95
+ publishing docs (`kaloko docs publish`, `--reviewed` above all: it says a
96
+ person checked the text), writing a release workflow (`kaloko ci github
97
+ --release`), and
84
98
  anything the environment profile blocks. Never trash an accepted run, a
85
99
  baseline, a run with review comments, or a run linked from an open PR or issue
86
100
  comment. Never approve a
@@ -106,13 +120,12 @@ they can do; never write secrets into the config, a scenario or a script.
106
120
  - Many pages of one template in one step (articles, products, an SEO
107
121
  catalogue from a sitemap or a listing), with an index on the canvas:
108
122
  [reference/stacks.md](reference/stacks.md)
109
- - Choosing playwright, agent or manual per step, and driving the shared
110
- browser with your capabilities: [reference/execution.md](reference/execution.md)
111
- - Evaluation, thresholds, the vision evaluator and its reasons, reading
112
- results: [reference/evaluation.md](reference/evaluation.md)
123
+ - Choosing playwright, agent or manual per step, driving the shared
113
124
  browser with your capabilities, walking only the steps a change reaches
114
125
  (`--affected`), several locales at once, and selectors that moved
115
126
  (`--heal`): [reference/execution.md](reference/execution.md)
127
+ - Evaluation, JEV thresholds, the vision evaluator and its reasons, reading
128
+ results: [reference/evaluation.md](reference/evaluation.md)
116
129
  - Screenshots, walkthroughs, Playwright reports and traces that an agent or a
117
130
  tool already produced, laid out as a run: [reference/import.md](reference/import.md)
118
131
  - Video of a step or a whole flow, traces (actions, requests, console) and the
@@ -120,19 +133,24 @@ they can do; never write secrets into the config, a scenario or a script.
120
133
  [reference/recording.md](reference/recording.md)
121
134
  - CI: a workflow that walks each pull request's preview deployment and
122
135
  comments on it (`kaloko ci github|gitlab`): [reference/ci.md](reference/ci.md)
123
- - Evaluation, JEV thresholds and reading results: [reference/evaluation.md](reference/evaluation.md)
124
136
  - Environments, access (gates, accounts, sign-in), e-mails, readonly and
125
137
  production rules, and what is yours to arrange for the project's stack:
126
138
  [reference/environments.md](reference/environments.md)
127
139
  - Sharing, review mode and approvals carried over unchanged steps, reviewer
128
- feedback, mentions, inbox, verdicts and baselines, and cleaning up runs
140
+ feedback, mentions, inbox, verdicts and baselines, compare views, the
141
+ signed acceptance record (`kaloko signoff`), and cleaning up runs
129
142
  (trash, prune, keep, archive):
130
143
  [reference/collaboration.md](reference/collaboration.md)
131
144
  - Reading runs, feedback and the inbox over MCP instead of the CLI:
132
145
  [reference/mcp.md](reference/mcp.md)
146
+ - Filing a returned step or a failing criterion in Jira or Linear, issue keys in
147
+ branches, channels per project, and hosted runs of read-only scenarios on a
148
+ schedule (`kaloko issue`, `kaloko schedule`):
149
+ [reference/integrations.md](reference/integrations.md)
133
150
  - The visual changelog and guides with step references (`kaloko:<scenario>/<step>`):
134
- drafting the Unreleased entry, templates for entries, client release notes and
135
- how-tos, products, modules and versions, who reads it:
151
+ drafting the Unreleased entry, Diátaxis templates, translations, stale sections
152
+ and `kaloko docs check`, training guides, exports, release tools in CI,
153
+ products, modules and versions (`kaloko products sync|list`), who reads it:
136
154
  [reference/docs.md](reference/docs.md)
137
155
  - Refreshing a manual, course or product documentation from the newest
138
156
  captures (latest URLs, changed steps, webhooks, export):
@@ -141,6 +159,10 @@ they can do; never write secrets into the config, a scenario or a script.
141
159
  references, handoff, tokens, the design pack, canvas edits, branches, HTML
142
160
  view, presenting the prototype, exports, bringing your own design skill):
143
161
  [reference/design.md](reference/design.md)
162
+ - Bringing Figma frames in as design steps and the design reference
163
+ (`kaloko design import figma`), notes on what changed in a version, and
164
+ finding existing screens across flows (`kaloko screens`):
165
+ [reference/design.md#import-from-figma](reference/design.md#import-from-figma)
144
166
  - Implementing a screen from the approved design: read the step spec, build
145
167
  with its tokens, walk, check drift, fix:
146
168
  [reference/design.md#implement-from-the-approved-design](reference/design.md#implement-from-the-approved-design)
@@ -95,6 +95,8 @@ color_schemes: [light, dark]
95
95
  on both sides is a conflict: name it with `--mine <step>` or `--theirs <step>`; never delete to resolve.
96
96
  - `kaloko share` on a design environment publishes a version of the flow (`v4 · 3 changed, 17 unchanged`).
97
97
  A version counts as a shared run. Publish when the person asks, not after every change.
98
+ - Every version gets notes on what changed since the previous one; see
99
+ [What changed in a version](#what-changed-in-a-version).
98
100
  - Step status (`in progress`, `ready for review`, `ready for dev`) is set in the canvas or with MCP
99
101
  `set_step_status`; `ready for dev` notifies followers.
100
102
  - Set `KALOKO_AGENT=<your name>` so people see your writes as yours in presence, history and audit.
@@ -121,6 +123,59 @@ opens straight into the presentation of that step: share it with the person who
121
123
  relative links click through there too.
122
124
  - A link's query and hash travel to the next step (`../payment/index.html?plan=pro#card`): keep prototype state there.
123
125
 
126
+ ## What changed in a version
127
+
128
+ When a version is published, Kaloko writes a short note per changed step against the previous version of the
129
+ branch: a new or removed step, the text that changed (from the step spec), the viewports whose screenshot looks
130
+ different, a new token set, or "looks the same; only the page code changed". Reviewers read it in the version's
131
+ side panel and in the step detail; followers get the summary in their inbox.
132
+
133
+ - Read what it would say before you publish: `kaloko share --notes-preview` (MCP `get_version_notes` with
134
+ `version: draft`).
135
+ - Say why, not only what: write a file with a summary first and then `step-id: what changed and why` lines, and
136
+ publish with `kaloko share --notes notes.md` (or `--notes -` from standard input; MCP `publish_version` takes
137
+ `notes`). Your text replaces the generated one for the steps you name; the other steps keep theirs.
138
+ - Fix them afterwards with MCP `set_version_notes` or `PUT …/scenarios/<id>/versions/v4/notes`. Plain language for
139
+ the people who review the design: what they will notice, not file names.
140
+
141
+ ## Import from Figma
142
+
143
+ Teams whose design lives in Figma can make it the design reference without redrawing it:
144
+
145
+ ```bash
146
+ export FIGMA_TOKEN=figd_… # Figma → Settings → Security → Personal access tokens (file content: read-only)
147
+ kaloko design import figma "https://www.figma.com/design/<key>/Shop?node-id=12-0" --scenario qa/flows/checkout.yml
148
+ ```
149
+
150
+ - Frames match steps by name: a frame named after the step id or title, with a viewport or locale in it
151
+ (`Payment / mobile`, `payment@desktop`, `Košík [cs]`). Several frames of one step without a viewport in the name
152
+ take the viewport of their width. Anything else: `--map frames.json` (`{ "Frame 12": "payment" }`, or
153
+ `{ "step": "payment", "viewport": "mobile", "locale": "cs" }`, or `{ "skip": true }`). `--frames a,b` and
154
+ `--page <name>` narrow the import; `--dry-run` shows the matches without writing.
155
+ - Each step gets `<step>/index.html` with the frame's PNG (1× and 2×) and, under it, the frame's text layers as
156
+ real text with Figma's typography and colors (`var(--token)` where a layer uses a variable or style), so
157
+ `kaloko spec` and `kaloko drift` have elements to compare. `figma.json` says which frame a page came from.
158
+ - Variables become `tokens.json` (W3C DTCG; extra modes such as dark as mode groups); without variables, the color
159
+ and text styles the frames use. A `tokens.json` you wrote yourself stays unless you pass `--tokens write`.
160
+ - Steps written by hand are not replaced without `--force`. Importing again replaces what the last import wrote;
161
+ unchanged frames give the same files, so the next version shows them unchanged.
162
+ - No API token: export the frames from Figma as PNG (1× and 2×) or SVG into a folder and import the folder
163
+ (`kaloko design import figma ./export`); a `*.tokens.json` in it becomes the token set.
164
+ - Then walk and share as usual, or add `--publish` (start, walk and share in one go). Once a person accepts the
165
+ version, set it as the design reference: implementation runs with `packs: [design]` are checked against the
166
+ frames (`design_pixels`) and the text styles and tokens (`kaloko drift`).
167
+ - One way only: prototype links, components, auto layout and interactions do not come over, and nothing goes
168
+ back to Figma. A frame wider or narrower than its viewport is compared as it is; draw a frame per viewport for a
169
+ clean pixel comparison.
170
+
171
+ ## Screen library
172
+
173
+ The newest screenshot of every step across the organization's flows, searchable: `/<org>/screens` on the service,
174
+ `kaloko screens [words]` (`--project`, `--locale`, `--viewport`, `--status fail`, `--designs` for design versions,
175
+ `--json`), MCP `search_screens`. Search matches step and flow titles, ids, paths, URLs, page titles and the H1,
176
+ without caring about diacritics. Use it to find where a pattern is already used before designing a new one, and
177
+ link the screens you reuse in your notes.
178
+
124
179
  ## References
125
180
 
126
181
  - The design reference is an accepted version: `kaloko reference --design --version 4` (a person accepts the
@@ -82,6 +82,124 @@ A how-to guide (`docs/how-to/pay-with-apple-pay.md`):
82
82
  Rules: write for the person using the product; one change per line; before/after pictures for changes people see;
83
83
  no internal names, prices or numbers you cannot show.
84
84
 
85
+ ## Living docs
86
+
87
+ Guides live in the docs folder (`docs.dir`, default `docs/`; per product `products.<p>.docs.dir`), sorted the
88
+ Diátaxis way. Pick the folder by what the reader wants, not by the feature:
89
+
90
+ | Folder | The reader wants | Shape |
91
+ |---|---|---|
92
+ | `tutorials/` | to learn by doing, start to finish | one path that always works, a result at the end |
93
+ | `how-to/` | to get one task done | numbered steps, one picture per step people look for |
94
+ | `reference/` | to look a fact up | tables and lists, no story |
95
+ | `explanation/` | to understand why | prose, few pictures |
96
+
97
+ `index.md` (or `README.md`) is the page of its folder. Front matter is optional: `title` (else the first `# `
98
+ heading), `order` (sidebar position). `kaloko init --docs=full` creates the folders with a template in each
99
+ README (inside a comment, so it never shows).
100
+
101
+ A tutorial:
102
+
103
+ ```markdown
104
+ ---
105
+ title: Your first order
106
+ order: 1
107
+ ---
108
+ # Your first order
109
+
110
+ In ten minutes you will have placed an order and seen it in your account.
111
+
112
+ 1. Open the shop and put a tea in the cart.
113
+ ![Cart](kaloko:checkout/cart)
114
+ 2. Choose **Checkout** and pay with a test card.
115
+ ![Payment](kaloko:checkout/payment)
116
+
117
+ You have placed your first order. Next: [track it](../how-to/track-an-order.md).
118
+ ```
119
+
120
+ A reference page:
121
+
122
+ ```markdown
123
+ # Order states
124
+
125
+ | State | What it means |
126
+ |---|---|
127
+ | Paid | The payment went through; the order waits for packing. |
128
+ | Shipped | The parcel left the warehouse. |
129
+ ```
130
+
131
+ An explanation: plain paragraphs that say why ("Card payments are confirmed the next morning, so a cancelled order
132
+ costs the customer nothing"), with a picture only when it shows the point.
133
+
134
+ Link pages with relative `.md` links (`[track it](../how-to/track-an-order.md)`); Kaloko and every export rewrite
135
+ them. Keep one task per how-to; split a page that needs two "and then" headings.
136
+
137
+ ### Training guides
138
+
139
+ A how-to or tutorial is also a walkthrough: on Kaloko, "Walk through it step by step" shows one step at a time,
140
+ full screen, with the step's words as the caption, and readers tick "I tried it". Each list item (or paragraph)
141
+ with a picture becomes one step; a picture on its own line belongs to the words above it; a before/after pair shows
142
+ the after. So for guides people train with: one action per item, the picture right under it, words that make sense
143
+ without the paragraphs around them.
144
+
145
+ ### Translations
146
+
147
+ Translations sit next to the original: `pay.md` and `pay.cs.md`. `docs.languages: [en, cs]` names the languages;
148
+ the first is the language of the originals. Pictures follow the language of the text (a Czech page shows Czech
149
+ screens) unless a reference names `locale=`.
150
+
151
+ When you change an original, update its translations in the same change. Translate the words, keep the step
152
+ references as they are. To say which version of the original a translation follows, put the first characters of
153
+ the original's SHA-256 in the translation's front matter (`source_hash: 1a2b3c4d`; `shasum -a 256 pay.md`);
154
+ without it, `kaloko docs check` compares git dates. It reports missing and outdated translations as warnings.
155
+
156
+ ### Stale sections and `kaloko docs check`
157
+
158
+ `kaloko docs publish` sends the folder to Kaloko as the docs of `latest` (`--version 2.4.0` for a release;
159
+ `kaloko release` publishes the folder for its version by itself). When a page's text changes, Kaloko remembers the
160
+ screen behind each of its references. When an accepted run later shows a different screen, the section reads
161
+ "the screen changed in 2.4 — check the text" for the people who write the docs.
162
+
163
+ Before a pull request that changes screens, and in CI:
164
+
165
+ 1. `kaloko docs check` (add `--json` to read it as data). Errors: broken references, steps the scenario files do
166
+ not have, references without an accepted picture, stale sections. Warnings: missing or outdated translations,
167
+ user-visible changelog items without a picture (mark one with `<!-- no picture -->` when there is nothing to
168
+ show). Exit code 1 on errors; `--strict` also on warnings.
169
+ 2. For each stale section, open the step (`resolve_step_image` or the link on the page), compare, and rewrite the
170
+ words that no longer fit. Editing the text clears the note at the next `kaloko docs publish`.
171
+ 3. If the text still fits, say so to the person; with their go-ahead `kaloko docs publish --reviewed` clears the
172
+ notes without a text change. Never use `--reviewed` to silence notes you have not read.
173
+
174
+ MCP: `docs_check` (the same report for the published docs), `get_docs` (the sidebar, or a page with its sections,
175
+ stale sections and training steps).
176
+
177
+ ### Exports
178
+
179
+ `kaloko export --format md|docusaurus|vitepress|mkdocs|html|pdf|json [--product p] [--version v] [--lang cs]`
180
+ writes the docs and the changelog with the pictures as files: Markdown with an `assets/` folder (any static site),
181
+ a Docusaurus, VitePress or MkDocs folder with sidebars and front matter, offline HTML, a PDF (printed by the
182
+ browser), or the changelog as JSON (`schemas/changelog.v1.json`). `--local` exports the files in the repository
183
+ instead of what was published; `--what docs|changelog` exports one of them. The docs and changelog pages offer the
184
+ same downloads. An existing docs site keeps its own build: export into its folder and commit the result, or run the
185
+ export in its CI.
186
+
187
+ ### Release tools in CI
188
+
189
+ When release-please, changesets or semantic-release makes the releases, Kaloko follows them:
190
+ `kaloko ci github --release` writes `.github/workflows/kaloko-release.yml`, which runs
191
+ `kaloko release <version> --no-write` whenever a GitHub release is published (all three tools publish one). It
192
+ reads the entry the tool wrote, records the release with its pictures and publishes the docs of that version.
193
+ `kaloko ci github --release --snippet` prints the step to put after the tool's own step instead (release-please:
194
+ `if: steps.release.outputs.release_created`; changesets: `if: steps.changesets.outputs.published == 'true'`;
195
+ semantic-release: right after `npx semantic-release`). On GitLab, call `kaloko release <version> --no-write` in
196
+ the release job. Ask before writing a workflow.
197
+
198
+ ### "What's new" e-mail
199
+
200
+ Readers subscribe per product on its changelog or docs page (Business). When a release is recorded, they get its
201
+ entry with pictures in their language. Nothing to do in the repository beyond writing the entry for people.
202
+
85
203
  ## Products, modules and versions
86
204
 
87
205
  Without `products:` in `kaloko.config.yml` the project is the product and `CHANGELOG.md` in the root is its
@@ -113,15 +231,23 @@ reads its entry and never rewrites the file; put your draft into the pull reques
113
231
 
114
232
  `kaloko doctor` warns when a product's version cannot be read or a scenario names no product while several exist.
115
233
 
234
+ A product shows in the app (Products in the main menu, `/<org>/products`) once it is on Kaloko. `kaloko release` and
235
+ `kaloko docs publish` put it there; to put the products of the config there before their first release, run
236
+ `kaloko products sync` (`--product p` for one, `--dry-run` to see what it would send). It records no release, and
237
+ `publish:` still needs an admin of the product's projects. `kaloko products list` shows the products on Kaloko with
238
+ their newest version and docs, and names those of the config that are not there yet. After adding or renaming a
239
+ product in the config, run `kaloko products sync` and say so in your summary.
240
+
116
241
  ## Readers
117
242
 
118
- The changelog page (`/<org>/products/<product>/changelog`, or `/<org>/projects/<project>/changelog`) is read by
119
- everyone who sees one of the product's projects, guests included. An admin of those projects may open it to
243
+ The changelog page (`/<org>/products/<product>/changelog`, or `/<org>/projects/<project>/changelog`) and the docs
244
+ (`…/docs`) are read by everyone who sees one of the product's projects, guests included. An admin of those projects may open it to
120
245
  readers from the organization's verified domains or publish it (`/p/<org>/<product>/changelog` with an Atom feed;
121
246
  not indexed until the organization allows it). `publish:` in the config only asks for it; an admin confirms on the
122
247
  page. Never publish without the person asking.
123
248
 
124
249
  ## MCP
125
250
 
126
- `get_changelog` (releases with entries; `resolve: true` adds the pictures), `draft_changelog_entry` (the service's
127
- half of a draft: changed screens with before/after references), `resolve_step_image` (one reference).
251
+ `list_products` (the products the caller reads, with the newest release, docs and readers), `get_changelog` (releases with entries; `resolve: true` adds the pictures), `draft_changelog_entry` (the service's
252
+ half of a draft: changed screens with before/after references), `resolve_step_image` (one reference),
253
+ `docs_check` (what needs attention in the published docs), `get_docs` (the docs, or one page).