kaloko 0.5.2 → 0.6.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 +75 -0
- 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 +28 -7
- package/skills/kaloko/reference/design.md +55 -0
- package/skills/kaloko/reference/docs.md +122 -3
- package/skills/kaloko/reference/integrations.md +67 -0
- package/skills/kaloko/reference/mcp.md +7 -1
- package/src/cli.mjs +213 -10
- package/src/lib/changelog.mjs +74 -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/screens-cli.mjs +36 -0
- package/src/lib/service.mjs +20 -1
- package/viewer/index.html +266 -30
package/README.md
CHANGED
|
@@ -238,6 +238,59 @@ guests, readers from your company's domain, or publish it with a feed.
|
|
|
238
238
|
Repositories with several apps list them under `products:` in
|
|
239
239
|
`kaloko.config.yml`.
|
|
240
240
|
|
|
241
|
+
When release-please, changesets or semantic-release makes your releases,
|
|
242
|
+
`npx kaloko ci github --release` adds a workflow that records each published
|
|
243
|
+
release on Kaloko; your release tool keeps writing `CHANGELOG.md`.
|
|
244
|
+
|
|
245
|
+
## Docs that keep up with the app
|
|
246
|
+
|
|
247
|
+
Guides in your `docs/` folder (tutorials, how-to guides, reference,
|
|
248
|
+
explanation) use the same step references, so their pictures never go stale.
|
|
249
|
+
A Czech translation of `pay.md` is `pay.cs.md` next to it.
|
|
250
|
+
|
|
251
|
+
```bash
|
|
252
|
+
npx kaloko init --docs=full # docs folders with a template in each
|
|
253
|
+
npx kaloko docs check # broken references, stale sections, missing translations; exit 1 in CI
|
|
254
|
+
npx kaloko docs publish # the docs on kaloko.app: versions, languages, screens, search
|
|
255
|
+
npx kaloko export --format docusaurus # or md, vitepress, mkdocs, html, pdf, json: pictures as files
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
When a screen changes after its guide was written, the section on kaloko.app
|
|
259
|
+
says "the screen changed in 2.4 — check the text", and `kaloko docs check`
|
|
260
|
+
lists it. A guide plays as a walkthrough, one step at a time, and readers can
|
|
261
|
+
ask for a "What's new" e-mail with every release.
|
|
262
|
+
|
|
263
|
+
## Jira, Linear, Slack and Teams
|
|
264
|
+
|
|
265
|
+
When a reviewer returns a step, the fix usually gets planned in Jira or
|
|
266
|
+
Linear. Create the issue from the step, on the canvas or from the terminal:
|
|
267
|
+
|
|
268
|
+
```bash
|
|
269
|
+
npx kaloko issue create --step checkout --to jira --criterion AC2
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
The issue gets the screenshot, the criterion, the reviewers' notes and a link
|
|
273
|
+
back to the step. When it is done in the tracker, the comment on the step is
|
|
274
|
+
resolved. A branch or pull request title that names the issue (`WEB-12`, or
|
|
275
|
+
Linear's `eng-42`) links the run to it. Slack and Teams channels are chosen per
|
|
276
|
+
project in Settings → Integrations, with the events each channel wants and
|
|
277
|
+
quiet hours.
|
|
278
|
+
|
|
279
|
+
## Pages checked on a schedule
|
|
280
|
+
|
|
281
|
+
A read-only scenario of public or gated pages can run on Kaloko's own
|
|
282
|
+
browsers every morning, with nobody starting the CLI (Business plan):
|
|
283
|
+
|
|
284
|
+
```bash
|
|
285
|
+
npx kaloko schedule add --scenario qa/flows/public.yml --env production --every day --at 5
|
|
286
|
+
npx kaloko schedule export github --scenario qa/flows/checkout.yml --env staging # the full walk in GitHub Actions
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
Hosted runs open pages (HTTP Basic and saved sessions work), take full-page
|
|
290
|
+
screenshots in every locale and viewport and check selectors and text. Steps
|
|
291
|
+
that click or type, apps and local environments need the full walk, which the
|
|
292
|
+
exported workflow runs on the same schedule.
|
|
293
|
+
|
|
241
294
|
## Design (Kaloko Design)
|
|
242
295
|
|
|
243
296
|
Design the screens of a flow as live HTML with your own agent and skills, in the same scenario that development
|
|
@@ -266,6 +319,28 @@ npx kaloko spec payment # elements, styles → tokens, states
|
|
|
266
319
|
npx kaloko walk && npx kaloko drift # expected token vs actual value per element; exit 1 while it differs
|
|
267
320
|
```
|
|
268
321
|
|
|
322
|
+
Each published version says what changed since the previous one, step by step: the text that moved, the
|
|
323
|
+
viewports that look different, the tokens that changed. Read it before publishing and write your own where the
|
|
324
|
+
reason matters:
|
|
325
|
+
|
|
326
|
+
```bash
|
|
327
|
+
npx kaloko share --notes-preview # what the version notes would say
|
|
328
|
+
npx kaloko share --notes notes.md # a summary, then "step-id: what changed" lines
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
Design in Figma? Import the frames as design steps and make them the design reference without redrawing them.
|
|
332
|
+
Frames match steps by name (`Payment / mobile`); each step gets the frame image, its text layers with their type
|
|
333
|
+
and colors, and the file's variables as `tokens.json`. It goes one way: prototype links and components stay in
|
|
334
|
+
Figma. Without an API token, import a folder of frames exported from Figma.
|
|
335
|
+
|
|
336
|
+
```bash
|
|
337
|
+
FIGMA_TOKEN=figd_… npx kaloko design import figma "https://www.figma.com/design/<key>/Shop" --scenario qa/flows/checkout.yml
|
|
338
|
+
npx kaloko design import figma ./figma-export --scenario qa/flows/checkout.yml
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
Looking for where a pattern is already used? `npx kaloko screens "empty cart"` searches the newest screenshot of
|
|
342
|
+
every step across your flows (also at `/<org>/screens` on kaloko.app and MCP `search_screens`).
|
|
343
|
+
|
|
269
344
|
On the canvas, *Prototype* (or `P`) presents the steps full screen as live pages: click through links between
|
|
270
345
|
steps, switch the device, walk with the arrow keys, and share a link that opens straight into a step. The rules
|
|
271
346
|
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,9 @@ 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. Write, translate and fix
|
|
80
|
+
guides in the docs folder, run `kaloko docs check`, and export them for a docs
|
|
81
|
+
site (`kaloko export --format …`) into a local folder.
|
|
73
82
|
|
|
74
83
|
## Ask first
|
|
75
84
|
|
|
@@ -80,7 +89,10 @@ design reference or baseline, merging a design branch, keeping your version of
|
|
|
80
89
|
a step in a sync conflict (`--mine`), turning on `html_view`, turning on recordings for
|
|
81
90
|
a whole project (`capture.record` in the config: storage), a real clean-up
|
|
82
91
|
(`kaloko prune --yes`), trashing someone else's run, archiving a scenario,
|
|
83
|
-
recording a release (`kaloko release`) or asking to publish a changelog,
|
|
92
|
+
recording a release (`kaloko release`) or asking to publish a changelog,
|
|
93
|
+
publishing docs (`kaloko docs publish`, `--reviewed` above all: it says a
|
|
94
|
+
person checked the text), writing a release workflow (`kaloko ci github
|
|
95
|
+
--release`), and
|
|
84
96
|
anything the environment profile blocks. Never trash an accepted run, a
|
|
85
97
|
baseline, a run with review comments, or a run linked from an open PR or issue
|
|
86
98
|
comment. Never approve a
|
|
@@ -130,9 +142,14 @@ they can do; never write secrets into the config, a scenario or a script.
|
|
|
130
142
|
[reference/collaboration.md](reference/collaboration.md)
|
|
131
143
|
- Reading runs, feedback and the inbox over MCP instead of the CLI:
|
|
132
144
|
[reference/mcp.md](reference/mcp.md)
|
|
145
|
+
- Filing a returned step or a failing criterion in Jira or Linear, issue keys in
|
|
146
|
+
branches, channels per project, and hosted runs of read-only scenarios on a
|
|
147
|
+
schedule (`kaloko issue`, `kaloko schedule`):
|
|
148
|
+
[reference/integrations.md](reference/integrations.md)
|
|
133
149
|
- The visual changelog and guides with step references (`kaloko:<scenario>/<step>`):
|
|
134
|
-
drafting the Unreleased entry, templates
|
|
135
|
-
|
|
150
|
+
drafting the Unreleased entry, Diátaxis templates, translations, stale sections
|
|
151
|
+
and `kaloko docs check`, training guides, exports, release tools in CI,
|
|
152
|
+
products, modules and versions, who reads it:
|
|
136
153
|
[reference/docs.md](reference/docs.md)
|
|
137
154
|
- Refreshing a manual, course or product documentation from the newest
|
|
138
155
|
captures (latest URLs, changed steps, webhooks, export):
|
|
@@ -141,6 +158,10 @@ they can do; never write secrets into the config, a scenario or a script.
|
|
|
141
158
|
references, handoff, tokens, the design pack, canvas edits, branches, HTML
|
|
142
159
|
view, presenting the prototype, exports, bringing your own design skill):
|
|
143
160
|
[reference/design.md](reference/design.md)
|
|
161
|
+
- Bringing Figma frames in as design steps and the design reference
|
|
162
|
+
(`kaloko design import figma`), notes on what changed in a version, and
|
|
163
|
+
finding existing screens across flows (`kaloko screens`):
|
|
164
|
+
[reference/design.md#import-from-figma](reference/design.md#import-from-figma)
|
|
144
165
|
- Implementing a screen from the approved design: read the step spec, build
|
|
145
166
|
with its tokens, walk, check drift, fix:
|
|
146
167
|
[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
|
|
@@ -115,8 +233,8 @@ reads its entry and never rewrites the file; put your draft into the pull reques
|
|
|
115
233
|
|
|
116
234
|
## Readers
|
|
117
235
|
|
|
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
|
|
236
|
+
The changelog page (`/<org>/products/<product>/changelog`, or `/<org>/projects/<project>/changelog`) and the docs
|
|
237
|
+
(`…/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
238
|
readers from the organization's verified domains or publish it (`/p/<org>/<product>/changelog` with an Atom feed;
|
|
121
239
|
not indexed until the organization allows it). `publish:` in the config only asks for it; an admin confirms on the
|
|
122
240
|
page. Never publish without the person asking.
|
|
@@ -124,4 +242,5 @@ page. Never publish without the person asking.
|
|
|
124
242
|
## MCP
|
|
125
243
|
|
|
126
244
|
`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)
|
|
245
|
+
half of a draft: changed screens with before/after references), `resolve_step_image` (one reference),
|
|
246
|
+
`docs_check` (what needs attention in the published docs), `get_docs` (the docs, or one page).
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Jira, Linear, channels and hosted runs
|
|
2
|
+
|
|
3
|
+
What the organization connected on kaloko.app (Settings → Integrations, done by an
|
|
4
|
+
admin) and what you may do with it from the CLI and MCP.
|
|
5
|
+
|
|
6
|
+
## Issues in Jira or Linear
|
|
7
|
+
|
|
8
|
+
When a reviewer returned a step or a criterion fails and the team tracks work in
|
|
9
|
+
Jira or Linear, file it there from the step instead of copying text by hand:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
kaloko issue create --step checkout --to jira --criterion AC2 --note "Total ignores the voucher"
|
|
13
|
+
kaloko issue list --state open
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
- `--run <id>` names the shared run; without it the current run is used once it
|
|
17
|
+
is shared. MCP: `create_issue`, `list_issues`.
|
|
18
|
+
- The issue gets the screenshot, the criterion with its evidence, the reviewers'
|
|
19
|
+
open notes on the step and a link back to the step. The project or team comes
|
|
20
|
+
from the admin's mapping per Kaloko project; `--target WEB` overrides it.
|
|
21
|
+
- The returned note on the step (or a new comment) mirrors the issue: when the
|
|
22
|
+
issue is done or cancelled in the tracker, the thread gets a reply and is
|
|
23
|
+
resolved; reopened, it opens again. Do not resolve that thread yourself.
|
|
24
|
+
- Needs the Developer / Tester role and a token with the comment scope. A 409
|
|
25
|
+
means the tracker is not connected or the project has no mapping: tell the
|
|
26
|
+
person, an admin sets it up.
|
|
27
|
+
- Name the issue key in the branch (`feat/WEB-12-gift-cards`, Linear's
|
|
28
|
+
`anna/eng-42-…`) or the pull request title, or `issue: { key: WEB-12 }` in the
|
|
29
|
+
scenario: the run links to the issue and the issue gets a comment with the run.
|
|
30
|
+
|
|
31
|
+
Ask before filing issues in bulk; one issue per real problem, not per criterion.
|
|
32
|
+
|
|
33
|
+
## Channels per project
|
|
34
|
+
|
|
35
|
+
Slack and Teams channels are chosen per project by an admin, with the events
|
|
36
|
+
each wants (new run, returned, accepted, comment, mention, release recorded) and
|
|
37
|
+
quiet hours. Nothing to do from the CLI: sharing, returning and recording a
|
|
38
|
+
release reach the right channels. Restricted projects reach only channels that
|
|
39
|
+
name them.
|
|
40
|
+
|
|
41
|
+
## Hosted runs
|
|
42
|
+
|
|
43
|
+
Kaloko can open a read-only scenario's pages on its own browsers every day or
|
|
44
|
+
week and share the run like yours (Business plan, a monthly page budget):
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
kaloko schedule add --scenario qa/flows/public.yml --env production --every day --at 5
|
|
48
|
+
kaloko schedule add --scenario qa/flows/account.yml --env staging --every week --weekday mon --account anna
|
|
49
|
+
kaloko schedule list # next and last run, pages used this month
|
|
50
|
+
kaloko schedule run <id> # starts within 15 minutes
|
|
51
|
+
kaloko schedule pause|resume|remove <id>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
- Works for: public pages, pages behind HTTP Basic (the environment's
|
|
55
|
+
`access.basic` variables are sent once and stored encrypted), and signed-in
|
|
56
|
+
pages through a session saved with `kaloko auth save` (`--account`, cookies only).
|
|
57
|
+
- Opens only steps whose script just opens the page (`steps/open.mjs`, or a
|
|
58
|
+
script that only calls `page.goto`). Steps that click or type are left out and
|
|
59
|
+
named in the answer. Criteria decided: `exists`, `absent`, `count`, `text_*`,
|
|
60
|
+
`attr_*`, `title_matches`, `meta_matches`; the rest shows "not evaluated".
|
|
61
|
+
- Does not work for: native apps, local or private addresses (localhost, IPs,
|
|
62
|
+
`.local`), header credentials, base URLs per locale.
|
|
63
|
+
- For those, or for the full walk on a schedule, write a GitHub Actions
|
|
64
|
+
workflow instead: `kaloko schedule export github --scenario <file> --env <name>
|
|
65
|
+
[--every week] [--at 5]`. It names the repository secrets it needs.
|
|
66
|
+
- A 404 from `schedule add` means hosted runs are not enabled on this service:
|
|
67
|
+
use the workflow.
|
|
@@ -39,6 +39,7 @@ file.
|
|
|
39
39
|
| `list_step_changes` | documentation layer: steps whose capture or status changed since the previous accepted run or `since` (`scenario`, `since`, `accepted`); see [documentation.md](documentation.md) |
|
|
40
40
|
| `get_started` | where the organization stands (`empty`, `sample`, `active`), its sample run, the next steps and a prompt; call it in a new project, see [first-run.md](first-run.md) |
|
|
41
41
|
| `add_sample_run` | adds the sample run (or returns the one there is); needs an upload or full token and the Developer / Tester role |
|
|
42
|
+
| `search_screens` | the screen library: newest screenshot of every step across the organization's flows (`q` words matched against titles, ids, paths, URLs, page title and H1; `project`, `product`, `module`, `scenario`, `locale`, `viewport`, `device`, `status`, `environment`; `source: design` or `all` for design versions; `group: none` for every locale and viewport; `cursor` from `next`), each with a signed image and the canvas link |
|
|
42
43
|
| `get_affected_steps` | which steps of a scenario changed files reach, with the reason per step (`scenario`, `changed_files`, `run_id`, `upstream`); route files are matched against the step paths and URLs of the newest run. Imports and `affects:` globs need the repository: `kaloko affected` follows them |
|
|
43
44
|
|
|
44
45
|
## Comment tools
|
|
@@ -52,6 +53,9 @@ file.
|
|
|
52
53
|
| `get_signoff_record` | the signed acceptance record of an accepted run (Business): approvals with provenance, criteria, capture hashes, signature |
|
|
53
54
|
| `resolve_comment` | close a thread with a `note` that says what changed (it becomes the last reply) |
|
|
54
55
|
| `reopen_comment`, `edit_comment`, `delete_comment` | reopen; edit or delete your own comment |
|
|
56
|
+
| `create_issue` | a Jira or Linear issue from a step (`run_id`, `step`, `to`: jira or linear, optional `criterion`, `title`, `note`, `locale`, `viewport`, `target`): screenshot, criterion, notes and a link back; the step's thread resolves when the issue is done. Developer / Tester, scope comment; see [integrations.md](integrations.md) |
|
|
57
|
+
| `list_issues` | issues created from steps with key, URL and state (`run_id`, `scenario`, `state`) |
|
|
58
|
+
| `list_schedules`, `run_schedule` | hosted runs: schedules of read-only scenarios on Kaloko's browsers with the month's page budget; start one now (`id`) |
|
|
55
59
|
|
|
56
60
|
Writes need a token with scope full. Follow *Processing feedback* in
|
|
57
61
|
[collaboration.md](collaboration.md).
|
|
@@ -79,6 +83,8 @@ The same data and permissions as the REST API; each tool is its REST route.
|
|
|
79
83
|
| `list_step_changes` | steps that differ between two references (default design reference → draft) |
|
|
80
84
|
| `get_references`, `get_tokens` | design reference and baseline; the project's token set |
|
|
81
85
|
| `get_draft_feedback` | draft comments, pinned ones with their element |
|
|
82
|
-
| `
|
|
86
|
+
| `get_version_notes` | what changed in a version (`version`: vN or run id) or what publishing the draft now would say (`version: draft`): a summary and one plain sentence per changed step; text by default, `format: json` for the structure |
|
|
87
|
+
| `publish_version`, `set_reference`, `set_step_status`, `add_draft_comment` | writes: need a token with scope full; ask first where the skill says so. `publish_version` takes `notes` (a summary, then `step-id: text` lines, or `{ summary, steps }`) |
|
|
88
|
+
| `set_version_notes` | rewrite the summary or step texts of a published version's notes (design scope) |
|
|
83
89
|
|
|
84
90
|
Files are not uploaded over MCP: the CLI (`kaloko sync`) or the REST blob endpoints carry them.
|