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 +97 -6
- package/package.json +1 -1
- package/schemas/changelog.v1.json +83 -0
- package/schemas/run.v1.json +19 -0
- package/schemas/scenario.v1.json +6 -1
- package/skills/kaloko/SKILL.md +35 -13
- package/skills/kaloko/reference/design.md +55 -0
- package/skills/kaloko/reference/docs.md +130 -4
- package/skills/kaloko/reference/integrations.md +67 -0
- package/skills/kaloko/reference/mcp.md +8 -1
- package/src/cli.mjs +241 -11
- package/src/lib/changelog.mjs +144 -8
- package/src/lib/ci.mjs +71 -0
- package/src/lib/design-cli.mjs +22 -2
- package/src/lib/design-notes.mjs +191 -0
- package/src/lib/docs-core.mjs +450 -0
- package/src/lib/docs-export.mjs +271 -0
- package/src/lib/docs.mjs +221 -0
- package/src/lib/figma.mjs +584 -0
- package/src/lib/git.mjs +23 -3
- package/src/lib/integrations-cli.mjs +211 -0
- package/src/lib/keyboard.mjs +42 -12
- package/src/lib/onboarding.mjs +3 -1
- package/src/lib/screens-cli.mjs +36 -0
- package/src/lib/service.mjs +20 -1
- package/viewer/index.html +580 -90
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
|
|
12
|
-
-
|
|
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).
|
|
248
|
-
|
|
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
|
@@ -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
|
+
}
|
package/schemas/run.v1.json
CHANGED
|
@@ -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."
|
package/schemas/scenario.v1.json
CHANGED
|
@@ -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
|
},
|
package/skills/kaloko/SKILL.md
CHANGED
|
@@ -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
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
135
|
-
|
|
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
|
+

|
|
114
|
+
2. Choose **Checkout** and pay with a test card.
|
|
115
|
+

|
|
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`)
|
|
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).
|