kaloko 0.21.3 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaloko",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "description": "Your AI agents build; Kaloko walks every screen, puts it on one canvas and records who approved what.",
   "keywords": [
     "qa",

package/schemas/run.v1.json

@@ -442,6 +442,11 @@
       ],
       "description": "Version of the application under test (git tag on HEAD or --app-version); documentation captures carry it."
     },
+    "packs_off": {
+      "type": "object",
+      "description": "Packs the steps list but this run left out, and why: design (a code-only pack on a design environment that the scenario did not keep with health.design_packs).",
+      "additionalProperties": { "enum": ["design"] }
+    },
     "site": {
       "type": "object",
       "description": "Site checks (#152, scenario health.site), once per site and run: robots.txt, sitemaps, llms.txt, http→https and www redirects. Advisory: health shows a finding per failed check (pack site, step site:<host>); they never decide a verdict.",

package/schemas/scenario.v1.json

@@ -95,6 +95,7 @@
       "description": "Health (CS Kondice): the checks of packs are advisory, shown apart from acceptance and never part of a verdict. acceptance lists the packs whose checks still count for acceptance in this scenario, as they did before health was split off (the design pack always does). To make one check count, adopt it: kaloko health adopt <step>:<check> (e.g. home:HC103) adds the criterion AC103 with from: HC103.",
       "properties": {
         "acceptance": { "type": "array", "uniqueItems": true, "items": { "enum": ["seo", "usability", "a11y", "perf", "console", "errors", "app", "design", "aeo", "locale"] } },
+        "design_packs": { "type": "array", "uniqueItems": true, "items": { "enum": ["seo", "aeo", "perf", "console", "errors"] }, "description": "Code-only packs (seo, aeo, perf, console, errors) are off when the scenario is walked on a design environment, because a designer's local HTML has no real meta tags, server or error statuses. List the ones that should still run on design versions. a11y, usability and locale always run." },
         "site": {
           "description": "Site checks (#152), once per site and run: robots.txt, the sitemaps it lists, llms.txt, and http→https and www redirects in one hop. Advisory (health, pack site, HC11xx); off unless set, because they make requests of their own. true for the defaults, or an object.",
           "oneOf": [

package/skills/kaloko/SKILL.md

@@ -107,6 +107,7 @@ design reference or baseline, merging a design branch, keeping your version of
 a step in a sync conflict (`--mine`), turning on `html_view`, turning on recordings for
 a whole project (`capture.record` in the config: storage), a real clean-up
 (`kaloko prune --yes`), trashing someone else's run, archiving a scenario,
+moving a scenario to another project (`kaloko scenario move`),
 renaming a project or restricting it (`kaloko projects rename`, a `kaloko
 projects sync` that would rename), picking one site of a repository that
 holds several (ask which one before `kaloko init` or a walk),

package/skills/kaloko/reference/acceptance.md

@@ -62,6 +62,14 @@ criterion with the same id wins and counts for acceptance (that is what
 `--coverage`; the plan lists only what the brief asks for. Use packs for
 public pages and landings; task flows keep their own criteria.
 
+On a design environment (`kind: design`) the code-only packs `seo`, `aeo`,
+`perf`, `console` and `errors` are off: the designer's HTML has no real server,
+meta tags or error statuses. `health: { design_packs: [console] }` on the
+scenario keeps one on there; `a11y`, `usability` and `locale` always run. The
+run manifest names what was turned off in `packs_off`. Every check of every
+pack, with why it matters and its severity, is in the help page Health checks
+(`reference/health-checks` of Kaloko's docs).
+
 Set `page` on every step (or once on the scenario) so the usability pack
 asks the right questions:
 
@@ -215,7 +223,7 @@ When the work has a repository and an issue number, make them visible:
 
 - scenario `id` carries the ticket (`TASK-1273-club-activation`, `WEB-12-checkout`); the CLI derives the issue number from it or from the branch (`feat/1273-…`) and links it to the repository's origin (`acme/shop#1273`);
 - set `issue: { number, repo?, url? }` explicitly when the id or branch cannot carry it (for example a Plane item);
-- the project is the repository name unless `project:` in `kaloko.config.yml` says otherwise; a single flow may sort itself elsewhere with `project: <slug>` in its scenario (optional). Projects are records of the organization: `kaloko projects` or MCP `list_projects` show the slugs to use; admins create them in Settings → Projects or assign a scenario in the overview, which wins over the scenario file;
+- the project is the repository name unless `project:` in `kaloko.config.yml` says otherwise; a single flow may sort itself elsewhere with `project: <slug>` in its scenario (optional). Projects are records of the organization: `kaloko projects` or MCP `list_projects` show the slugs to use; admins create them in Settings → Projects and move a scenario on its page in the app (Scenario settings), people with the Developer / Tester role with `kaloko scenario move <id> --project <slug>`; a move wins over the scenario file and the config;
 - the canvas header, the organization overview and `kaloko feedback` show `repo#number · title`, so name the scenario `title` for humans, not for the ticket;
 - requirement IDs from the team's tracker or QMS go into `refs:` on the scenario, a step or a criterion (`refs: [URS-12, FS-3.4]`, free text, never invented); they flow into the acceptance record and the trace matrix ([evidence.md](evidence.md)).
 

package/skills/kaloko/reference/collaboration.md

@@ -231,13 +231,16 @@ npx kaloko prune --scenario TASK-1273-cart --keep 3            # dry run: lists
 npx kaloko prune --scenario TASK-1273-cart --keep 3 --yes      # ask first
 npx kaloko keep <run-id>                     # never expires, never pruned (--off to undo)
 npx kaloko archive TASK-1273-klub            # retired scenario, ask first (admin); --undo
+npx kaloko scenario move TASK-1273-klub --project eco-web   # ask first: runs and drafts follow
 ```
 
 - **Without asking:** trash runs you uploaded in this session that were
   superseded before anyone looked at them (debug rounds without comments or a
   verdict), and a dry-run `prune`.
 - **Ask first:** `prune --yes`, trashing someone else's run, archiving a
-  scenario.
+  scenario, moving a scenario to another project (`kaloko scenario move`: its
+  runs and drafts follow, people who see only the old project lose them, and
+  the move wins over `project:` in the config for later shares).
 - **Never:** trash an accepted run, a baseline, a run with review comments, or a
   run linked from an open PR or issue comment. `prune` already keeps kept,
   accepted, baseline, design-reference and commented runs, and without the admin

package/skills/kaloko/reference/design.md

@@ -18,7 +18,12 @@ environments:
 `kaloko start --scenario qa/flows/checkout.yml --env design` starts a run of it. The scenario is the one the
 implementation uses: same step ids, same criteria. Design steps meet the acceptance criteria too (headings,
 labels, semantic questions), so a design is accepted before anyone builds it. Checks against the design
-reference (`design_pixels`, `design_structure`) are left out on a design environment.
+reference (`design_pixels`, `design_structure`) are left out on a design environment, and so are the code-only
+packs `seo`, `aeo`, `perf`, `console` and `errors` (a local folder has no real server, meta tags or error
+statuses). `health: { design_packs: [console] }` on the scenario keeps one on; `a11y`, `usability` and `locale`
+run on designs too. Kaloko writes no code from a design: Live runs the designer's own files, and Dev mode is the
+handoff (measurements, tokens, states, a prompt to copy for an agent) that developers build from in their code.
+Published versions are listed under Design drafts in the app, not among the runs.
 
 ## The bundle
 

package/skills/kaloko/reference/devices.md

@@ -28,6 +28,16 @@ npx kaloko browser install --browsers webkit,firefox   # once per machine or CI
 npx kaloko devices                      # the preset catalogue
 ```
 
+## Default capture setup
+
+When the person names no sizes, a new scenario uses `viewports: { desktop: [1280, 800], mobile: [360, 800] }`
+(what `kaloko init`, `kaloko draft` and the template write) and captures whole pages (`full_page` is on unless a
+step or stack turns it off). Add a tablet only when the task is about one, as `tablet: [744, 1133]`; a width of
+900 or more is a small desktop, not a tablet. Do not pick sizes per step to fit a small element, and leave
+`capture.annotate` off unless the task is about marked areas of the page. Never change the `viewports:` of an
+existing scenario to these defaults: its baselines were taken at its own sizes (a scenario without `viewports:`
+still captures at 1280 × 800 and 390 × 844).
+
 Every combination is one capture: `checkout × 3 viewports × 2 browsers × 2 schemes` is 12 screenshots per step and
 locale. Keep the matrix to what the task is about. A Safari bug report needs `browsers: [chromium, webkit]` on the
 affected steps, not every dimension on every step. A run refuses more than 400 combinations.

package/skills/kaloko/reference/docs.md

@@ -268,6 +268,11 @@ A product shows in the app (Products in the main menu, `/<org>/products`) once i
 their newest version and docs, and names those of the config that are not there yet. After adding or renaming a
 product in the config, run `kaloko products sync` and say so in your summary.
 
+A product that is no longer shipped is archived with `kaloko products remove <product>` (an admin of its projects):
+it leaves Products, its changelog and docs answer 404, its releases and docs are kept. `products sync` then reports
+it as archived instead of creating it again; delete it from `products:` too. Archive only when the person asks;
+`kaloko products restore <product>` undoes it.
+
 ## Readers
 
 The changelog page (`/<org>/products/<product>/changelog`, or `/<org>/projects/<project>/changelog`) and the docs

package/skills/kaloko/reference/environments.md

@@ -78,7 +78,9 @@ Rules:
   Choose names that fit the project; ask the person for the values.
 - The gate is sent only to `access.origins`, never to third parties (analytics,
   CDNs, payment providers). List an API on another host explicitly;
-  `https://*.example.com` covers subdomains.
+  `https://*.example.com` covers subdomains. Every redirect hop is checked on
+  its own: one within the gate keeps it, one to another host (audio on S3, a
+  sign-in at an identity provider) is followed without it.
 - The CLI applies the gate and the readonly policy to every browser context it
   creates: the shared browser, `walk` sessions and one-off captures. A context
   you create yourself over CDP does not get them; work in the shared browser's

package/src/cli.mjs

@@ -14,7 +14,7 @@ import { startBrowser, stopBrowser, connectBrowser, currentPage, launchEphemeral
 import { captureStep, captureCrop, captureOptions, acceptDialogs } from './lib/capture.mjs'
 import { observeConsole, pageTarget } from './lib/console.mjs'
 import { mailClient, waitForMessage, recipient, readMessageFile } from './lib/mail.mjs'
-import { newContext, accountFor, gateHeaders, gateOrigins, originMatcher, gateForRequests } from './lib/access.mjs'
+import { newContext, accountFor, gateForRequests, basicCredentials, gateRouting, continueThroughGate } from './lib/access.mjs'
 import { configureGate, disposeShared } from './lib/linkcheck.mjs'
 import { rememberEnvironment } from './lib/secrets.mjs'
 import { evaluateRun, semanticPrefetch } from './lib/evaluate.mjs'
@@ -33,10 +33,10 @@ import { detectProject, initScenario, skeletonScenario, scenarioHeader, formatDe
 import { checkSlug, checkName, setConfigKeys, createProject, renameProject, syncProject, shareProjectNote } from './lib/projects-cli.mjs'
 import { recheckCaptures } from './lib/recheck.mjs'
 import { runFindings, findingsText } from './lib/findings.mjs'
-import { resolveItems, fieldsOf, DEFAULT_LIMIT, timeLeft, rotationState, rotationCoverage, sourceLocaleOf, stackReader, readsOutside } from './lib/stack.mjs'
+import { resolveItems, fieldsOf, DEFAULT_LIMIT, timeLeft, rotationState, rotationCoverage, rotationDate, sourceLocaleOf, stackReader, readsOutside } from './lib/stack.mjs'
 import { walkSiteChecks, siteChecksOn } from './lib/site.mjs'
 import { DEFAULTS as JEV_DEFAULTS } from './lib/jev.mjs'
-import { expandPacks } from './lib/packs.mjs'
+import { expandPacks, forEnvironment } from './lib/packs.mjs'
 import { upsertPrComment } from './lib/pr.mjs'
 import { formatReviewQueue, shareReviewLine } from './lib/review.mjs'
 import { healthCmd } from './lib/health.mjs'
@@ -304,6 +304,12 @@ Results
   keep <run-id> [--off]             A kept run never expires and is never pruned
   archive <scenario-id> [--off]     Hide a retired scenario from the scenario list (admin); its runs stay reachable;
                                     --off shows it again
+  scenario move <scenario-id> --project <slug> [--json]
+                                    Move a scenario to another project with all its runs, design drafts and screens
+                                    (also on kaloko.app: the scenario’s page, Scenario settings). The move wins over
+                                    project: in the config and the scenario file, so later shares of the scenario land in
+                                    the new project too. Needs the Developer / Tester role in both projects (their
+                                    admin for a restricted one); the project must exist (kaloko projects)
   inbox [--all] [--read] [--json]   Your notifications on kaloko.app (mentions, returned runs, new runs, expiry); --read marks them read
   calibrate [--golden labels.yml] [--scenario id [--limit 30]] [--target 0.95] [--json]
                                     Semantic evaluator vs human labels: precision/recall per criterion at the
@@ -385,6 +391,12 @@ Products (products: in kaloko.config.yml; without it the project is the product)
                                     publish: is applied only for an admin of the product's projects
   products list [--json]            The products on Kaloko you read: newest release, docs, who reads them, and
                                     the products of the config that are not on Kaloko yet
+  products remove <product> [--json]
+                                    Archive a product: it leaves Products, its changelog and docs pages answer 404
+                                    and products sync does not create it again. Releases and docs are kept
+                                    (an admin of the product's projects)
+  products restore <product> [--json]
+                                    Bring an archived product back with its releases and docs
 
 Changelog (Keep a Changelog in CHANGELOG.md; pictures are step references kaloko:<scenario>/<step>)
   changelog draft [--product p] [--since <tag|version>] [--apply] [--json] [--offline]
@@ -579,8 +591,8 @@ async function runContext (args) {
   const run = await resolveRun({ root: ctx.root, output: ctx.config.output, run: args.run })
   const scenario = await loadScenario(resolve(ctx.root, run.meta.scenario_file))
   const env = environment(ctx.config, run.meta.environment.name)
-  // a design is not checked against itself: the design reference checks apply to implementation runs only (#42)
-  if (env.kind === 'design') for (const n of scenario.nodes) if (n.criteria) n.criteria = n.criteria.filter((c) => !['design_pixels', 'design_structure'].includes(c.check.assert))
+  // a design is not checked against itself (#42), and code-only packs are off on a design environment (#205)
+  forEnvironment(scenario, env)
   rememberEnvironment(env)
   return { ...ctx, run, scenario, env }
 }
@@ -749,14 +761,15 @@ async function captureMail ({ config, root, run, env, scenario = null, node, loc
     // context keeps it on; the e-mail's own scripts are stripped and every
     // non-image request is blocked instead. Images hosted behind the environment's
     // gate get its headers, nobody else does.
-    const page = await (await browser.newContext()).newPage()
-    const gate = gateHeaders(env)
-    const toGate = Object.keys(gate).length ? originMatcher(gateOrigins(env)) : () => false
+    const credentials = basicCredentials(env)
+    const page = await (await browser.newContext(credentials ? { httpCredentials: credentials } : {})).newPage()
+    const { headers: gate, toGate } = gateRouting(env)
     await page.route('**/*', (route) => {
       const r = route.request()
       if (r.url().startsWith('data:')) return route.continue()
       if (r.resourceType() !== 'image') return route.abort()
-      return toGate(r.url()) ? route.continue({ headers: { ...r.headers(), ...gate } }) : route.continue()
+      // an image that redirects to a CDN does not take the gate along
+      return toGate(r.url()) ? continueThroughGate(route, gate, toGate) : route.continue()
     })
     const html = (message.html || `<pre>${(message.text || '').replace(/</g, '&lt;')}</pre>`).replace(/<script[\s\S]*?<\/script>/gi, '')
     // Remote images are allowed for the screenshot but must not hold the capture hostage.
@@ -823,7 +836,7 @@ async function walkStack ({ node, locale, page, env, run, scenario, scenarioDir,
   // gate and the walk's cookies on its own origins only
   const reader = readsOutside(node.items) ? await stackReader({ page, gate, origins: envOrigins(env, scenario, locale) }) : null
   let resolved
-  try { resolved = await resolveItems({ node, base: baseUrl(env, locale), sourceBase: baseUrl(env, sourceLocale), page, scenarioDir, env, locale, scenario, limit: Number(args.limit) || undefined, rotation: { run: round }, checked: state?.checked || null, only: list(args.items), cache, readPage: reader?.read || null }) } finally { await reader?.dispose() }
+  try { resolved = await resolveItems({ node, base: baseUrl(env, locale), sourceBase: baseUrl(env, sourceLocale), page, scenarioDir, env, locale, scenario, limit: Number(args.limit) || undefined, rotation: { run: round, now: rotationDate(run.meta.started_at) }, checked: state?.checked || null, only: list(args.items), cache, readPage: reader?.read || null }) } finally { await reader?.dispose() }
   const { items, total, truncated, all, rotation, partial, variants, resolve_failed: unresolved, resolve_error: unresolvedWhy } = resolved
   if (unresolved) say(`! ${node.id} ${locale}${tag}: items.resolve failed for ${unresolved} page(s), walked without an edit link (${unresolvedWhy})`)
   if (variants) {
@@ -1891,7 +1904,7 @@ const commands = {
       await commands.start({ scenario: scenarioFile, env: envName(), locales: args.locales, viewports: args.viewports, executor: args.executor || `import:${source.tool}`, config: args.config, _: [] })
       run = await resolveRun({ root, output: config.output })
     } else say(`Importing into run ${run.meta.id} (${run.meta.scenario.id}); --adhoc or --scenario starts a new one`)
-    const scenario = await loadScenario(resolve(root, run.meta.scenario_file))
+    const scenario = forEnvironment(await loadScenario(resolve(root, run.meta.scenario_file)), run.meta.environment)
     const map = Object.fromEntries((list(args.map) || []).map((p) => p.split('=')).filter((p) => p.length === 2 && p[0] && p[1]).map(([a, b]) => [a.trim(), b.trim()]))
     const locale = typeof args.locale === 'string' && run.meta.scope.locales.includes(args.locale) ? args.locale : run.meta.scope.locales[0]
     const enc = await launchEphemeral(config).catch(() => null)
@@ -2612,6 +2625,27 @@ const commands = {
     say(off ? `✓ ${args._[0]} is active again` : `✓ ${args._[0]} archived: hidden from the scenario list, its runs stay reachable (kaloko archive ${args._[0]} --off)`)
   },
 
+  /** kaloko scenario move: the scenario's project on Kaloko, its runs and drafts follow (POST …/scenarios/<id>/project). */
+  async scenario (args) {
+    const usage = 'Usage: kaloko scenario move <scenario-id> --project <slug> [--json]'
+    const [sub, id, ...rest] = args._
+    if (sub !== 'move') throw new UsageError(sub ? `kaloko scenario ${sub}: there is no such sub-command.\n${usage}` : usage)
+    if (!id || rest.length) throw new UsageError(`kaloko scenario move needs one scenario id.\n${usage}`)
+    if (args.project === undefined) throw new UsageError(`kaloko scenario move needs --project <slug>: the project it goes to (kaloko projects lists them).\n${usage}`)
+    const slug = checkSlug(args.project === true ? '' : String(args.project), '--project slug')
+    const { config } = await context(args)
+    if (!config.org) throw new UserError(NO_ORG)
+    const client = service(config)
+    // only into a project that exists: the service would create a new one from a typo
+    const projects = await client.request('GET', `/orgs/${config.org}/projects`)
+    const target = projects.find((p) => p.slug === slug)
+    if (!target) throw new UserError(`There is no project ${slug} that you see in ${config.org}. kaloko projects lists them; kaloko projects create ${slug} makes one.`)
+    const r = await client.request('POST', `/orgs/${config.org}/scenarios/${encodeURIComponent(id)}/project`, { project: slug })
+    if (args.json) { say(JSON.stringify(r, null, 2)); return }
+    say(`✓ ${r.scenario} is in ${r.project} (${target.name}) now, with all its runs, design drafts and screens. Later shares of it land there too.`)
+    if (config.project && config.project !== r.project) say(`Note: ${CONFIG_FILE} says project: ${config.project}; for ${r.scenario} the move wins. kaloko scenario move ${r.scenario} --project ${config.project} takes it back.`)
+  },
+
   async login (args) {
     // a project is optional: it only names the service URL, the organization and the token variable
     let config = {}
@@ -2881,12 +2915,19 @@ const commands = {
     if (!r.ok || (args.strict && r.warnings)) process.exitCode = 1
   },
 
-  /** `kaloko products sync|list`: the products of the config on Kaloko, without a release; what the service has. */
+  /** `kaloko products sync|list|remove|restore`: the products of the config on Kaloko, without a release; what the service has. */
   async products (args) {
     const sub = args._[0]
-    if (!['sync', 'list'].includes(sub)) throw new UsageError('Usage: kaloko products sync [--product p] [--dry-run] [--json]\n       kaloko products list [--json]')
+    if (!['sync', 'list', 'remove', 'restore'].includes(sub)) throw new UsageError('Usage: kaloko products sync [--product p] [--dry-run] [--json]\n       kaloko products list [--json]\n       kaloko products remove <product> [--json]\n       kaloko products restore <product> [--json]')
     const { config, root } = await context(args)
     const lib = await import('./lib/changelog.mjs')
+    if (sub === 'remove' || sub === 'restore') {
+      if (!args._[1]) throw new UsageError(`Usage: kaloko products ${sub} <product> [--json]`)
+      if (!config.org) throw new UserError(NO_ORG)
+      const r = sub === 'remove' ? await lib.removeProduct({ config, client: service(config), slug: args._[1] }) : await lib.restoreProduct({ config, client: service(config), slug: args._[1] })
+      say(args.json ? JSON.stringify(r, null, 2) : sub === 'remove' ? lib.formatRemove(r) : lib.formatRestore(r))
+      return
+    }
     if (sub === 'list') {
       if (!config.org) throw new UserError(NO_ORG)
       const r = await lib.listProducts({ root, config, client: service(config) })

package/src/lib/access.mjs

@@ -11,6 +11,7 @@ import { join, resolve } from 'node:path'
 import { policyViolation, baseOrigins } from './config.mjs'
 import { secret, remember } from './secrets.mjs'
 import { UserError } from './util.mjs'
+import { gateHeadersPerHop } from './gate-cdp.mjs'
 
 /** The environment's gate: `access`, with the older `http_auth` read as `access.basic`. */
 export function gateOf (env) {
@@ -78,15 +79,107 @@ export function clientCertificates (env, root = process.cwd()) {
   }))
 }
 
+/**
+ * HTTP Basic of the gate as Playwright `httpCredentials`, or null: only for a gate on one exact origin (Playwright
+ * scopes them to a single origin). The browser answers a 401 challenge of that origin with them and nowhere else.
+ */
+export function basicCredentials (env) {
+  const gate = gateOf(env); const origins = gateOrigins(env)
+  if (!gate.basic || origins.length !== 1 || String(origins[0]).includes('*')) return null
+  return { username: secret(gate.basic.user_env, `HTTP Basic user for ${env.name}`), password: secret(gate.basic.password_env, `HTTP Basic password for ${env.name}`), origin: new URL(origins[0]).origin }
+}
+
+/**
+ * How a browser context adds the gate: `headers` for requests to the gate's origins that `toGate` matches. A gate of
+ * HTTP Basic alone on one origin is left to the browser, which answers the challenge with httpCredentials (to that
+ * origin only, across redirects as well), so nothing is added for it; once there are headers to add (or several
+ * origins), Basic goes up front with them.
+ */
+export function gateRouting (env, vars = process.env) {
+  const headers = gateHeaders(env, vars)
+  const own = Object.keys(headers).filter((n) => !(n === 'Authorization' && basicCredentials(env)))
+  return { headers, toGate: own.length ? originMatcher(gateOrigins(env)) : NOTHING }
+}
+const NOTHING = () => false
+
+const REDIRECTS = new Set([301, 302, 303, 307, 308])
+/** Largest piece of a media file one request through the gate asks for: the player asks for the next one itself. */
+export const MEDIA_CHUNK = 4 * 1024 * 1024
+
+/**
+ * The request to the gate's origins with the gate's headers, so that no redirect carries them anywhere else: the
+ * fallback where the headers cannot be added per redirect hop (gate-cdp.mjs, Chromium only). Playwright applies headers given to route.continue() to every redirect that follows (and does not route the
+ * redirected requests), so the request is made here instead, one hop at a time: a redirect that leaves the gate's
+ * origins goes back to the browser, which follows it without the headers. A subresource's redirect within the gate
+ * is followed here with the headers; a navigation's goes back to the browser too, so the address bar stays right
+ * (the next page then gets in with the gate's cookie, as Cloudflare Access sets one and Vercel does with
+ * x-vercel-set-bypass-cookie, or with the Basic challenge). `blocked(method, url)` is the readonly policy for the
+ * hops followed here. Media is asked for in pieces of at most MEDIA_CHUNK bytes, so a long recording never sits in
+ * memory whole. Headers the page set itself win, so an application's own Authorization header is left alone.
+ */
+export async function continueThroughGate (route, gateHeadersToAdd, toGate, blocked = () => null) {
+  const request = route.request()
+  const current = request.headers()
+  const extra = Object.keys(gateHeadersToAdd).filter((n) => !(n.toLowerCase() in current))
+  if (!extra.length) return route.continue()
+  // an event stream never ends, so it cannot be fetched first; it keeps the headers on its (rare) redirects
+  if (request.resourceType() === 'eventsource' || /text\/event-stream/i.test(current.accept || '')) {
+    return route.continue({ headers: { ...current, ...Object.fromEntries(extra.map((n) => [n, gateHeadersToAdd[n]])) } })
+  }
+  let headers = { ...current, ...Object.fromEntries(extra.map((n) => [n, gateHeadersToAdd[n]])) }
+  if (request.resourceType() === 'media') headers = boundedRange(headers)
+  let url = request.url(); let method = request.method(); let postData = request.postDataBuffer() ?? undefined
+  try {
+    for (let hop = 0; hop < 20; hop++) {
+      const response = await route.fetch({ url, method, headers, postData, maxRedirects: 0, timeout: 0 })
+      const location = REDIRECTS.has(response.status()) ? response.headers().location : null
+      if (!location) return await route.fulfill({ response })
+      const next = new URL(location, url).href
+      if (request.isNavigationRequest() || !toGate(next) || new URL(next).protocol !== new URL(request.url()).protocol) {
+        return await route.fulfill({ response, headers: { ...response.headers(), location: next } })
+      }
+      if (response.status() === 303 || (method === 'POST' && response.status() !== 307 && response.status() !== 308)) {
+        method = 'GET'; postData = undefined
+        headers = Object.fromEntries(Object.entries(headers).filter(([n]) => !/^content-(type|length|encoding|language|location)$/i.test(n)))
+      }
+      url = next
+      if (blocked(method, url)) return await route.abort('blockedbyclient')
+    }
+    return await route.abort('failed') // a redirect loop, as the browser would end it
+  } catch (error) {
+    if (/closed|disposed/i.test(String(error?.message))) return
+    return route.abort('failed').catch(() => {})
+  }
+}
+
+/** A media Range header with an open end (`bytes=N-`, what players send) limited to MEDIA_CHUNK bytes. */
+export function boundedRange (headers) {
+  const name = Object.keys(headers).find((n) => n.toLowerCase() === 'range')
+  const m = name && String(headers[name]).match(/^bytes=(\d+)-$/)
+  if (!m) return headers
+  const start = Number(m[1])
+  return { ...headers, [name]: `bytes=${start}-${start + MEDIA_CHUNK - 1}` }
+}
+
 /**
  * Enforces the environment on a browser context: the readonly policy for every request and the
- * gate headers for the gate's origins only (third parties never see them). Headers the page set
- * itself win, so an application's own Authorization header is left alone.
+ * gate headers for the gate's origins only (third parties never see them, not even through a redirect).
+ * The context is expected to carry contextOptions' httpCredentials, which answer HTTP Basic.
+ *
+ * On Chromium the headers are added per request and per redirect hop below Playwright's routing (gate-cdp.mjs), so
+ * a redirect within the gate keeps them and one that leaves it never gets them. Elsewhere, or when that cannot be
+ * set up (or with `perHop: false`), continueThroughGate makes the requests itself.
  */
-export async function prepareContext (context, env, { log } = {}) {
-  const headers = gateHeaders(env)
-  const names = Object.keys(headers)
-  const toGate = names.length ? originMatcher(gateOrigins(env)) : () => false
+export async function prepareContext (context, env, { log, perHop: allowPerHop = true } = {}) {
+  const { headers, toGate } = gateRouting(env)
+  const perHop = toGate !== NOTHING && allowPerHop && await gateHeadersPerHop(context, { headers, origins: gateOrigins(env), toGate })
+  if (toGate !== NOTHING && !perHop) {
+    // a page answered through the gate (continueThroughGate) counts as public to Chrome, which then blocks its
+    // requests to local and private addresses (an intranet API, a staging host on a VPN); the gate's own origins
+    // may reach them, as the page could when it came straight from the network
+    const exact = [...new Set([...gateOrigins(env), ...baseOrigins(env)].filter((o) => !String(o).includes('*') && toGate(o)).map((o) => new URL(o).origin))]
+    for (const origin of exact) await context.grantPermissions(['local-network-access'], { origin }).catch(() => {})
+  }
   await context.route('**/*', (route) => {
     const request = route.request()
     const reason = policyViolation(env, { method: request.method(), url: request.url() })
@@ -94,10 +187,12 @@ export async function prepareContext (context, env, { log } = {}) {
       log?.({ type: 'blocked', url: request.url(), text: reason }, request)
       return route.abort('blockedbyclient')
     }
-    if (toGate(request.url())) {
-      const current = request.headers()
-      const extra = names.filter((n) => !(n.toLowerCase() in current))
-      if (extra.length) return route.continue({ headers: { ...current, ...Object.fromEntries(extra.map((n) => [n, headers[n]])) } })
+    if (toGate(request.url()) && !perHop) {
+      return continueThroughGate(route, headers, toGate, (method, url) => {
+        const hop = policyViolation(env, { method, url })
+        if (hop) log?.({ type: 'blocked', url, text: hop }, request)
+        return hop
+      })
     }
     return route.continue()
   })
@@ -109,12 +204,10 @@ export async function contextOptions (env, { root, config, account } = {}) {
   const options = {}
   const certs = clientCertificates(env, root)
   if (certs.length) options.clientCertificates = certs
-  // Basic auth also for navigations that arrive through a redirect (#56): route headers do not apply to redirected
-  // requests, so answer the 401 challenge with httpCredentials — only for one exact gate origin, never elsewhere
-  const gate = gateOf(env); const origins = gateOrigins(env)
-  if (gate.basic && origins.length === 1 && !String(origins[0]).includes('*')) {
-    options.httpCredentials = { username: secret(gate.basic.user_env, `HTTP Basic user for ${env.name}`), password: secret(gate.basic.password_env, `HTTP Basic password for ${env.name}`), origin: new URL(origins[0]).origin }
-  }
+  // Basic auth through the browser's own 401 challenge, for the one exact gate origin only (#56, #224): it reaches
+  // navigations that arrive through a redirect, and a redirect to another host never carries it
+  const credentials = basicCredentials(env)
+  if (credentials) options.httpCredentials = credentials
   if (account?.storage_state && await exists(account.storage_state).then(() => true, () => false)) options.storageState = account.storage_state
   return options
 }

package/src/lib/browser-daemon.mjs

@@ -4,18 +4,21 @@
 // Secrets are resolved here from the inherited environment, never passed in argv.
 import { chromium } from 'playwright'
 import { writeJson } from './util.mjs'
-import { prepareContext, clientCertificates } from './access.mjs'
+import { prepareContext, clientCertificates, basicCredentials } from './access.mjs'
 import { launchPersistentWithRetry } from './browser.mjs'
 import { consoleWriter, pageTarget } from './console.mjs'
 
 const opts = JSON.parse(process.argv[2])
 const certs = opts.env ? clientCertificates(opts.env, opts.root) : []
+// HTTP Basic of a one-origin gate answers the 401 challenge of that origin only (#224)
+const credentials = opts.env ? basicCredentials(opts.env) : null
 // a time limit and one more try (KALOKO_LAUNCH_TIMEOUT): a start that stalls on a busy machine does not hang here
 const context = await launchPersistentWithRetry(chromium, opts.profile, {
   headless: !opts.headed,
   channel: opts.channel || undefined,
   viewport: { width: 1280, height: 800 },
   ...(certs.length ? { clientCertificates: certs } : {}),
+  ...(credentials ? { httpCredentials: credentials } : {}),
   args: [`--remote-debugging-port=${opts.port}`]
 })
 

package/src/lib/build.mjs

@@ -98,6 +98,8 @@ export async function buildManifest ({ run, scenario, config, root, catalog = []
     // "personal data hidden" (#64): the canvas says so, so a blank is not taken for a bug
     ...(runPii(meta, nodes) ? { pii: runPii(meta, nodes) } : {}),
     ...(site ? { site } : {}),
+    // packs a design environment turned off (#205; packs.mjs forEnvironment): the app says why they are missing
+    ...(scenario.packs_off ? { packs_off: scenario.packs_off } : {}),
     coverage: cov,
     history,
     catalog,

package/src/lib/changelog.mjs

@@ -279,7 +279,8 @@ export async function productPayload (root, product, src) {
  * `kaloko products sync`: every product of the config (or the one asked for) on Kaloko with its name, projects,
  * modules, version source, reference environment, default scenario and who should read it (publish:, which the
  * service applies only for someone who manages the product), without recording a release. A product the service
- * refuses (a project it does not know or the person may not map) is reported and the others still go.
+ * refuses (a project it does not know or the person may not map) is reported and the others still go. An archived
+ * product (kaloko products remove) is not created again: it is reported with the way back (kaloko products restore).
  */
 export async function syncProducts ({ root, config, client = null, only = null, dryRun = false }) {
   const all = productsOf(config, root)
@@ -293,7 +294,10 @@ export async function syncProducts ({ root, config, client = null, only = null,
     try {
       const saved = await client.request('POST', `/orgs/${config.org}/products`, payload)
       out.push({ ...item, ok: true, created: saved.created ?? null, publish: saved.product?.publish || null, url: saved.page || saved.url || null, changelog: saved.url || null, notes: saved.notes || [] })
-    } catch (e) { out.push({ ...item, ok: false, error: String(e.message || e).split('\n')[0] }) }
+    } catch (e) {
+      if (e.code === 'product_archived') { out.push({ ...item, ok: null, archived: true, restore: `kaloko products restore ${product.slug}` }); continue }
+      out.push({ ...item, ok: false, error: String(e.message || e).split('\n')[0] })
+    }
   }
   return { dry_run: dryRun, from_config: !!Object.keys(config.products || {}).length, products: out }
 }
@@ -303,15 +307,18 @@ export function formatSync (r) {
   const lines = []
   const n = r.products.length
   lines.push(r.dry_run ? `${n} product(s) would go to Kaloko; dry run, nothing sent.` : `${r.products.filter((p) => p.ok).length} of ${n} product(s) on Kaloko; no release recorded.`)
+  const archived = r.products.filter((p) => p.archived)
   if (!r.from_config) lines.push('  No products: in kaloko.config.yml, so the project is the product (its own changelog and docs).')
   for (const p of r.products) {
     const what = [`${p.projects.length ? `projects ${p.projects.join(', ')}` : 'the whole organization'}`, p.modules.length ? `modules ${p.modules.join(', ')}` : null, `version from ${p.version_source.source}${p.version ? ` (${p.version})` : ''}`].filter(Boolean).join(' · ')
     const name = typeof p.name === 'object' && p.name ? Object.values(p.name)[0] : p.name
+    if (p.archived) { lines.push(`  − ${p.slug}${name && name !== p.slug ? ` (${name})` : ''}: archived on Kaloko, left as it is`); continue }
     lines.push(`  ${p.ok === false ? '✗' : r.dry_run ? '·' : p.created ? '+' : '✓'} ${p.slug}${name && name !== p.slug ? ` (${name})` : ''}: ${what}`)
     if (p.url) lines.push(`    ${p.url}`)
     if (p.error) lines.push(`    ! ${p.error}`)
     for (const x of p.notes || []) lines.push(`    ! ${x}`)
   }
+  if (archived.length) lines.push(`Archived products stay archived. To bring one back with its releases and docs: ${archived.map((p) => p.restore).join('; ')}. Or delete it from products: in kaloko.config.yml.`)
   return lines.join('\n')
 }
 
@@ -321,9 +328,43 @@ export function formatSync (r) {
  */
 export async function listProducts ({ root, config, client }) {
   const service = await client.request('GET', `/orgs/${config.org}/products`)
+  // archived products the person reads (kaloko products remove); an older service answers the plain list: none
+  const archived = (await client.request('GET', `/orgs/${config.org}/products?archived=1`).catch(() => [])).filter((p) => p?.archived_at)
   const local = Object.keys(config.products || {}).length ? productsOf(config, root) : []
-  const known = new Set(service.map((p) => p.slug))
-  return { products: service, missing: local.filter((p) => !known.has(p.slug)).map((p) => p.slug) }
+  const known = new Set([...service, ...archived].map((p) => p.slug))
+  return { products: service, archived, missing: local.filter((p) => !known.has(p.slug)).map((p) => p.slug) }
+}
+
+const productArg = (slug) => {
+  const s = String(slug || '').trim().toLowerCase()
+  if (!/^[a-z0-9][a-z0-9._-]{0,79}$/.test(s)) throw new UserError('Name the product: kaloko products remove <product> (its slug, as kaloko products list shows it).')
+  return s
+}
+
+/**
+ * `kaloko products remove <product>`: archives it on Kaloko (#211). It leaves the lists, its changelog and docs pages
+ * answer 404, kaloko products sync does not create it again; its releases and docs stay for kaloko products restore.
+ */
+export async function removeProduct ({ config, client, slug }) {
+  const s = productArg(slug)
+  const r = await client.request('DELETE', `/orgs/${config.org}/products/${encodeURIComponent(s)}`)
+  return { slug: s, archived: true, releases: r.releases ?? null, restore: `kaloko products restore ${s}` }
+}
+
+/** `kaloko products restore <product>`: an archived product back as it was, with its releases and docs. */
+export async function restoreProduct ({ config, client, slug }) {
+  const s = productArg(slug)
+  const r = await client.request('POST', `/orgs/${config.org}/products/${encodeURIComponent(s)}/restore`, {})
+  return { slug: s, restored: !!r.restored, url: r.url || null }
+}
+
+export function formatRemove (r) {
+  const kept = r.releases ? ` Its ${r.releases} release(s) and its docs are kept.` : ' Its releases and docs are kept.'
+  return `${r.slug} is archived: it is gone from Products, and its changelog and docs pages answer 404.${kept}\n  Undo: ${r.restore}\n  kaloko products sync will not create it again; delete it from products: in kaloko.config.yml too.`
+}
+
+export function formatRestore (r) {
+  return r.restored ? `${r.slug} is back, with its releases and docs.${r.url ? `\n  ${r.url}` : ''}` : `${r.slug} was not archived; nothing changed.${r.url ? `\n  ${r.url}` : ''}`
 }
 
 /** The list for people. */
@@ -339,6 +380,7 @@ export function formatList (r) {
     if (p.projects?.length) lines.push(`  projects: ${p.projects.join(', ')}`)
     if (p.url) lines.push(`  ${p.url}`)
   }
+  if (r.archived?.length) lines.push(`Archived: ${r.archived.map((p) => p.slug).join(', ')}. kaloko products restore <product> brings one back.`)
   if (r.missing.length) lines.push(`In kaloko.config.yml but not on Kaloko yet: ${r.missing.join(', ')}. Run kaloko products sync.`)
   return lines.join('\n')
 }

package/src/lib/cli-args.mjs

@@ -48,7 +48,7 @@ export const HIDDEN = {
  * Commands whose unknown options stop the command instead of a warning: they delete, publish or change access. A
  * "command sub" entry makes only that sub-command strict (kaloko projects lists, kaloko projects create writes).
  */
-export const STRICT = new Set(['prune', 'trash', 'restore', 'keep', 'archive', 'public', 'release', 'comment', 'projects create', 'projects rename', 'projects sync'])
+export const STRICT = new Set(['prune', 'trash', 'restore', 'keep', 'archive', 'public', 'release', 'comment', 'projects create', 'projects rename', 'projects sync', 'scenario move'])
 
 /**
  * Options a command takes more than once (kaloko start --ref A --ref B): their value is the list of every value given.

package/src/lib/design-cli.mjs

@@ -181,7 +181,7 @@ export function syncScope (scope, locales) {
 /** Scenario snapshot the service keeps with the draft (so it can compose versions without the CLI). */
 export function snapshotOf (scenario, run) {
   const pos = Object.fromEntries(layout(scenario).map((p) => [p.id, { col: p.col, lane: p.lane }]))
-  return { title: scenario.title, kind: scenario.kind || 'task', source: scenario.source || null, file: run.meta.scenario_file, project: run.meta.project || null, nodes: scenario.nodes, edges: scenario.edges, lanes: scenario.lanes || [], sessions: scenario.sessions || null, layout: pos }
+  return { title: scenario.title, kind: scenario.kind || 'task', source: scenario.source || null, file: run.meta.scenario_file, project: run.meta.project || null, nodes: scenario.nodes, edges: scenario.edges, lanes: scenario.lanes || [], sessions: scenario.sessions || null, layout: pos, ...(scenario.packs_off ? { packs_off: scenario.packs_off } : {}) }
 }
 
 export async function uploadBlobs ({ client, org, files, say }) {