diff --git a/README.md b/README.md
index 1d4d129..6eac9be 100644
--- a/README.md
+++ b/README.md
@@ -33,8 +33,10 @@ quota preservation and Code-owned upstream fallback repair are not planned.
 ## Native workflows
 
 - **Code workbench:** one main view under a top bar of tabs (Generator, Accounts,
-  Sessions) and one **More** menu (Models, Setup, Options, Shortcuts); the panel
-  reads its inputs again on its own. The **generator** is five rows of plain
+  Sessions) and one **More** menu (Models, Setup, Options, Shortcuts, Tutorial); the panel
+  reads its inputs again on its own. A person's first open offers a short tutorial
+  that points at the real controls one at a time, once per person and replayable
+  from More. The **generator** is five rows of plain
   words (lane, model, thinking, advisor, fallbacks) changed in place by pointer, keys
   or wheel, each model shown by its short alias per tier, with **Defaults** and
   **Revert** in its head and a readout line that says what a pointed word does,
diff --git a/docs/configuration.md b/docs/configuration.md
index 1e0ce0d..61273f8 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -50,6 +50,7 @@ All Code actions are `atyrode.code.<name>`:
 | Configuration         | `readConfiguration`, `initializeConfiguration`, `select`, `changeAccounts`   |
 | Catalog authoring     | `stageCatalog`, `reviewCatalog`, `promoteCatalog`, `discardCatalog`           |
 | A person's checks     | `readChecks`, `approveChecks`, `adoptCheck`                                   |
+| A person's tutorial   | `readTutorial`, `seeTutorial`                                                |
 | Pure OMP input policy | `composeProbe`, `draftInventory`, `deriveCatalog`, `composeSession`           |
 | External classifier   | `readServiceConfiguration`, `reviewServices`, `configureServices`, `suggest` |
 
@@ -94,6 +95,15 @@ provider the pool does not include, and `code_check_current` when the workspace
 holds a list of that pool whose benchmark completed no earlier. It saves `selection`
 (else the saved one) narrowed to the check's list, and leaves a staged list as it is.
 
+Whether a person has seen the panel's tutorial is their own record too, kept the same
+way at `tutorial/<person>`. `readTutorial({})` answers `{ keeps, seenAt }`: whether the
+caller keeps the record at all, and when they first finished, skipped or answered the
+tutorial's offer (null before). `seeTutorial({})` records it once and answers the same:
+a record already there stands as it is, so two tabs or devices marking it agree. Neither
+refuses a caller that keeps none: an agent, a service or a confined sign-in reads and
+marks `keeps: false`, and the panel then keeps it in the browser instead. Both ask no
+container capability and are container-graded, as the checks' doors are.
+
 `CatalogDocumentSchema` is `{ schemaVersion: 1, models: [...] }`. Each model has
 an explicit key, provider/id/API identity, tier, quota bucket, costs,
 performance, context, thinking levels and image support. Capabilities are 1–4. Tier 0
@@ -287,7 +297,7 @@ empty prompt. Headless callers still pass a prompt.
 ## Workbench presentation
 
 The main view is one panel. A **top bar** carries the views as tabs (Generator,
-Accounts, Sessions) and one **More** menu (Models, Setup, Options, Shortcuts). The
+Accounts, Sessions) and one **More** menu (Models, Setup, Options, Shortcuts, Tutorial). The
 panel reads its inputs again on its own, so it has no Refresh button. The **generator**
 holds five rows of plain words, a readout line, the cost and speed meters and the
 launch row; **routing** stands beside it and
@@ -325,8 +335,9 @@ one, More reads **More · staged** and its item **Models · staged**, since noth
 until it is reviewed there. When session options are set, More and its **Options** item
 carry their summary ("· restricted", "· skills off", "· 2 skills"). **Shortcuts** opens a
 native modal dialog that lists every key under the view it acts in (Generator, Views,
-Accounts, Sessions, Anywhere), with `m`, `u` and `o` under Generator, where they act;
-`Esc` or its Close button closes it and it owns its keys while open.
+Accounts, Sessions, Tutorial, Anywhere), with `m`, `u` and `o` under Generator, where they act;
+`Esc` or its Close button closes it and it owns its keys while open. **Tutorial** walks the
+tutorial again (below).
 
 The workbench reads its inputs again on its own: the workspace profile, OMP's setup,
 defaults, bundled model list, skills and accounts, and the machine list, once a minute
@@ -346,6 +357,35 @@ cadence (below). Both cadences are one schedule: reads that come due together sh
 pass that reads each observation once, and **Refresh now** (`r`) or opening or closing a
 sheet reads everything in one pass and restarts both.
 
+### The tutorial
+
+On a person's first open of the panel, wherever they open it, a question asks "Welcome
+to Code" with **Take the tour** and **Skip** (`Esc` and the backdrop skip), once the
+generator shows its profile in the main view with no sheet open, nothing running, no
+charge waiting and no other question open. It is offered to people only: an agent or a
+service is never asked. Either answer marks the tutorial seen for that person
+(`seeTutorial`, or the browser for a sign-in that keeps no record), so it is never offered
+again; **Tutorial** in More walks it whenever they like. The walk starts on the generator
+(a sheet closes and the view goes back to it) and keeps to the steps the panel shows
+there, so its count holds when a step opens another view: the profile's rows, the
+readout, Defaults and Revert, routing, usage, the machine, the launch, the Accounts and
+Sessions tabs, and More. Each step draws a thin ring in the accent around its control and
+a card beside it (under it where the panel shows room, else over it), both laid over the
+panel so nothing in it moves, and both kept to the part of the panel the window shows: the
+step's name, where the walk stands ("3 of 10"), one sentence, and **Next** (**Done** at
+the last), **Back** and **Skip**; `→` and `←` step, `Esc` skips, and a held key steps once.
+Each step's card is its own, so moving to it moves focus to its Next and it is read out,
+and its control is scrolled into view. Routing and usage are pointed at where the layout
+puts them: beside the generator, else their tab or Show control. A step may be tried:
+choosing a word in the rows, or opening Accounts, goes on by itself once done since the
+step began, and Next always works too; Back onto a step another view hides brings the
+generator back. The walk launches nothing and spends nothing; a word tried changes the
+rows as any choice does, which Revert puts back. A step whose control is not shown (another
+view or a sheet has the panel), or any step while a popover of the panel is open (More's
+menu, the machine list), hides its card until that changes. The walk's end, finished or
+skipped, puts focus on More, where it is replayed, so a second `↵` of a double press opens
+a menu rather than launching.
+
 ### The generator
 
 Rows run top to bottom: **lead**, **model**, **thinking**, **advisor** and
diff --git a/plugins/code/checks.ts b/plugins/code/checks.ts
index 2463a97..d6bc928 100644
--- a/plugins/code/checks.ts
+++ b/plugins/code/checks.ts
@@ -6,7 +6,8 @@ import { CatalogDocumentSchema, DomainError, SelectionSchema, type CatalogDocume
 import { clampSelection } from "../domain/routing.ts";
 import { ChecksSchema, MAX_CHECKS, VerificationProvenanceSchema, digest, id, revision, type ActionInput, type Checks,
   type Configuration, type ModelCheck, type VerificationProvenance } from "./contract.ts";
-import { CodeRefusal, digestOf, type CodeContext } from "./context.ts";
+import { CodeRefusal, type CodeContext } from "./context.ts";
+import { bound, keeperOf, personOf } from "./person.ts";
 import { commitConfiguration, expectRevision, poolIdentity, readConfiguration, requireConfiguration } from "./state.ts";
 
 /*
@@ -15,7 +16,7 @@ import { commitConfiguration, expectRevision, poolIdentity, readConfiguration, r
   also kept for the person who checked it, under the exact pool it was verified with and the budget
   it was derived under, and any workspace whose saved choices select that pool adopts it instead of
   spending another check. The person's standing approval of what checks spend lives beside them.
-  Both are keyed by the caller's own principal: nobody reads or writes another person's, and an
+  Both are the person's own records (person.ts): nobody reads or writes another person's, and an
   agent, a service or a token confined to one container keeps none. Workspaces keep their own
   copies, so a `runSession` caller still reads a workspace.
 */
@@ -33,33 +34,9 @@ const StoredApprovalSchema = z.strictObject({
 /** Plugin storage holds at most this many bytes per value (plugin-kit `MAX_STORAGE_VALUE_BYTES`). */
 const MAX_VALUE_BYTES = 64 << 10;
 
-/** Why a caller keeps no checks: not a person, or a person whose sign-in reaches less than the whole workspace tree. */
-type Keeper = { person: string } | { refused: "person_required" | "checks_confined" };
-/**
- * The caller's records are filed under a digest of their principal, cut to 40 hex characters so a
- * check's key (`checks/<person>/<budget>/<pool>`) stays within the 128 characters plugin storage
- * keys may have; every record also names its principal, which every read compares. Only a person
- * whose sign-in reaches the workspace root keeps checks, asked where an unconfined credential is
- * anchored: a token confined to one container, or by an authority ceiling, keeps none, since a
- * check and the approval to spend on checks are the person's own, never one container's.
- */
-async function keeperOf(ctx: CodeContext): Promise<Keeper> {
-  if (ctx.auth.principal.kind !== "human") return { refused: "person_required" };
-  if (ctx.auth.containerScope !== null || !(await ctx.auth.allows("containers:read"))) return { refused: "checks_confined" };
-  return { person: digestOf({ principalId: ctx.auth.principal.id }).slice(0, 40) };
-}
-async function personOf(ctx: CodeContext): Promise<string | null> {
-  const keeper = await keeperOf(ctx);
-  return "person" in keeper ? keeper.person : null;
-}
 const checkKey = (person: string, budget: Budget, pool: string) => `checks/${person}/${budget}/${pool}`;
 const approvalKey = (person: string) => `approvals/${person}`;
 
-/** A stored record that names another principal, or another key than its own, is corruption, never someone's data. */
-function bound<T extends { principalId: string }>(ctx: CodeContext, record: T): T {
-  if (record.principalId !== ctx.auth.principal.id) throw new CodeRefusal("invalid_configuration");
-  return record;
-}
 async function readApproval(ctx: CodeContext, person: string) {
   const raw = await ctx.storage.get(approvalKey(person));
   return raw === null ? null : { raw, approval: bound(ctx, StoredApprovalSchema.parse(JSON.parse(raw))) };
diff --git a/plugins/code/contract.ts b/plugins/code/contract.ts
index ce3487f..a5d98b6 100644
--- a/plugins/code/contract.ts
+++ b/plugins/code/contract.ts
@@ -114,6 +114,13 @@ export const ChecksSchema = z.strictObject({
   checks: z.array(ModelCheckSchema).max(MAX_CHECKS),
 });
 export type Checks = z.infer<typeof ChecksSchema>;
+/**
+ * WHETHER A PERSON HAS SEEN THE PANEL'S TUTORIAL. `keeps` says whether the caller keeps the record
+ * at all (false for an agent, a service or a confined sign-in, whose browser keeps it instead);
+ * `seenAt` is when they first answered its offer or ended a walk, null before.
+ */
+export const TutorialSchema = z.strictObject({ keeps: z.boolean(), seenAt: epochMilliseconds.nullable() });
+export type Tutorial = z.infer<typeof TutorialSchema>;
 /** The prompt bound is OMP's, in bytes, because the prompt reaches the machine as one entry
  * of the job input map the hub bounds (`PROMPT_MAX_BYTES`, 44 KiB). Code takes the schema
  * itself rather than the number, so the two can never disagree. */
@@ -254,6 +261,9 @@ export const rootActionSchemas = {
   readChecks: { input: z.strictObject({}), result: ChecksSchema },
   // `requests: 0` withdraws the approval, so every later check asks again.
   approveChecks: { input: z.strictObject({ expectedRevision: revision, requests: ChecksSchema.shape.approvedRequests }), result: ChecksSchema },
+  // The caller's own tutorial record: read it, or record that they have seen it (idempotent).
+  readTutorial: { input: z.strictObject({}), result: TutorialSchema },
+  seeTutorial: { input: z.strictObject({}), result: TutorialSchema },
   // Puts the caller's check of the workspace's present pool, derived under `budget`, in use, with `selection` (else the saved
   // one) narrowed to it. `poolIdentityDigest` is the pool the caller found a check for; Code recomputes the pool and refuses any other.
   adoptCheck: { input: RevisionWorkspaceSchema.extend({ accounts: AccountsObservationSchema, poolIdentityDigest: digest,
diff --git a/plugins/code/generator/decision-model.ts b/plugins/code/generator/decision-model.ts
index c115a96..e1fdd96 100644
--- a/plugins/code/generator/decision-model.ts
+++ b/plugins/code/generator/decision-model.ts
@@ -3,23 +3,25 @@ import type { RefusalView, StatusAction, Vocabulary } from "./statement-model.ts
 import type { VerificationMode } from "./verification.ts";
 
 /*
- * WHAT A PRESS WAITS ON THE PERSON FOR, as one question: a model check's charge to approve, a
- * reviewed session that differs from what the panel showed, a check that changed the profile, or a
- * refused Launch and its fixes. Pure, so which question is asked, which choices it offers, which is
- * the way out and what answering does are tested apart from the dialog that asks it
- * (decision-dialog.tsx). Only a press the person made asks: a check the panel runs on its own never does.
+ * WHAT THE PANEL WAITS ON THE PERSON FOR, as one question: a model check's charge to approve, a
+ * reviewed session that differs from what the panel showed, a check that changed the profile, a
+ * refused Launch and its fixes, or, on a person's first open, whether to take the tutorial. Pure, so
+ * which question is asked, which choices it offers, which is the way out and what answering does are
+ * tested apart from the dialog that asks it (decision-dialog.tsx). Only a press the person made asks
+ * about a check: a check the panel runs on its own never does.
  */
 
-/** What a choice does: approve or cancel the waiting charge, take the launch's own press, leave the question, or run a fix. */
+/** What a choice does: approve or cancel the waiting charge, take the launch's own press, start the tutorial, leave the question, or run a fix. */
 export type DecisionDo =
   | { readonly kind: "approve" }
   | { readonly kind: "cancel" }
   | { readonly kind: "launch" }
+  | { readonly kind: "tour" }
   | { readonly kind: "dismiss" }
   | { readonly kind: "fix"; readonly action: Extract<StatusAction, { kind: "fix" }> };
 export type DecisionChoice = { readonly label: string; readonly does: DecisionDo };
 export type Decision = {
-  readonly kind: "charge" | "differs" | "narrowed" | "refused";
+  readonly kind: "charge" | "differs" | "narrowed" | "refused" | "tutorial";
   readonly title: string;
   /** What is asked and why, a plain sentence each. */
   readonly text: readonly string[];
@@ -28,6 +30,8 @@ export type Decision = {
   /** The choices in reading order. The first is the next action; the last is the way out, which Esc and the backdrop take, and which never spends or launches. */
   readonly choices: readonly DecisionChoice[];
 };
+/** The questions a press waits on, which `decisionFor` asks and `answer` answers; the tutorial's offer is the workbench's own. */
+export type PressDecision = Decision & { readonly kind: Exclude<Decision["kind"], "tutorial"> };
 /** A check's charge as it waits: the requests in all and per provider. */
 export type ChargeFacts = { readonly requests: number; readonly providers: readonly { readonly provider: string; readonly requests: number }[] };
 
@@ -53,7 +57,7 @@ export type DecisionFacts = {
  * struck lane, never from a check the panel runs on its own), a review that differs, a check that
  * changed the profile, then a refused press; null when nothing waits on the person.
  */
-export function decisionFor(facts: DecisionFacts, vocab: Vocabulary): Decision | null {
+export function decisionFor(facts: DecisionFacts, vocab: Vocabulary): PressDecision | null {
   if (facts.charge && facts.mode !== null && facts.mode !== "background") return chargeDecision(facts.charge, facts.mode, facts.keepsChecks, vocab);
   if (facts.differs && facts.ready) return differsDecision(facts.differs);
   if (facts.narrowed && facts.ready) return narrowedDecision(facts.narrowed);
@@ -75,7 +79,7 @@ export type DecisionEffect =
  * only with the launch's press, and Not now drops it, so the next press reviews again. A narrowed
  * stop and a refused press end their question, then run what was chosen.
  */
-export function answer(decision: Decision, choice: DecisionChoice): DecisionEffect[] {
+export function answer(decision: PressDecision, choice: DecisionChoice): DecisionEffect[] {
   const does = choice.does;
   const then: DecisionEffect[] = does.kind === "launch" ? [{ kind: "launch" }] : does.kind === "fix" ? [{ kind: "fix", action: does.action }] : [];
   switch (decision.kind) {
@@ -93,7 +97,7 @@ const plural = (count: number, word: string) => `${count} ${word}${count === 1 ?
  * once lets later checks run without asking (only for a person who keeps checks). A charge of nothing
  * asks nothing: it says so, offers the accounts, and its way out cancels the check.
  */
-function chargeDecision(charge: ChargeFacts, mode: Exclude<VerificationMode, "background">, keepsChecks: boolean, vocab: Vocabulary): Decision {
+function chargeDecision(charge: ChargeFacts, mode: Exclude<VerificationMode, "background">, keepsChecks: boolean, vocab: Vocabulary): PressDecision {
   if (charge.requests === 0) {
     return { kind: "charge", title: "Nothing to check", text: ["None of the models your included accounts offer can be checked."], items: [],
       choices: [{ label: "Show accounts", does: { kind: "fix", action: { kind: "fix", key: "accounts", label: "Show accounts", fix: { kind: "open", place: "accounts" } } } },
@@ -118,19 +122,25 @@ function chargeDecision(charge: ChargeFacts, mode: Exclude<VerificationMode, "ba
 }
 
 /** A Launch press whose session review differs from what the panel showed: what differs, and both ways on. */
-function differsDecision(differs: readonly string[]): Decision {
+function differsDecision(differs: readonly string[]): PressDecision {
   return { kind: "differs", title: "What will run differs", text: ["The session Code is about to start is not quite what the panel shows."], items: differs,
     choices: [{ label: "Launch it", does: { kind: "launch" } }, { label: "Not now", does: { kind: "dismiss" } }] };
 }
 
 /** A Launch press whose model check narrowed the profile to what answered: the settings it moved, and both ways on. */
-function narrowedDecision(settings: readonly string[]): Decision {
+function narrowedDecision(settings: readonly string[]): PressDecision {
   return { kind: "narrowed", title: "The model check changed your profile", text: ["Some models didn't answer, so the check changed these settings."], items: settings,
     choices: [{ label: "Launch", does: { kind: "launch" } }, { label: "Not now", does: { kind: "dismiss" } }] };
 }
 
 /** A refused Launch press: what stops it, why, the fixes the launch line offers for that refusal, and Close. */
-function refusedDecision(view: RefusalView): Decision {
+function refusedDecision(view: RefusalView): PressDecision {
   return { kind: "refused", title: view.title, text: view.why ? [view.why] : [], items: [],
     choices: [...view.fixes.map(action => ({ label: action.label, does: { kind: "fix", action } }) as const), { label: "Close", does: { kind: "dismiss" } }] };
 }
+
+/** A person's first open: what Code is, and whether to take the short tutorial now. Skip is the way out; More replays it. */
+export function tutorialOffer(): Decision {
+  return { kind: "tutorial", title: "Welcome to Code", text: ["Code starts OMP coding sessions with the models you choose. A short tour shows where everything is."],
+    items: [], choices: [{ label: "Take the tour", does: { kind: "tour" } }, { label: "Skip", does: { kind: "dismiss" } }] };
+}
diff --git a/plugins/code/generator/more-menu.tsx b/plugins/code/generator/more-menu.tsx
index cd4a264..ec729f5 100644
--- a/plugins/code/generator/more-menu.tsx
+++ b/plugins/code/generator/more-menu.tsx
@@ -21,8 +21,8 @@ export type MenuCommand = {
 };
 
 /**
- * The bar's one menu: a button, More, that opens a short menu of the panel's sheets and the
- * shortcuts, the WAI-ARIA menu button. A press, ↓, ↵ or Space opens it on its first item, ↑ on its
+ * The bar's one menu: a button, More, that opens a short menu of the panel's sheets, the shortcuts
+ * and the tutorial, the WAI-ARIA menu button. A press, ↓, ↵ or Space opens it on its first item, ↑ on its
  * last; ↑↓, Home and End move, ↵ or Space chooses, and an item's own key chooses it too. Esc closes
  * it and returns focus to More; Tab, a press outside or focus leaving closes it. While it is open
  * it owns its keys (`data-popover`), so the panel's keys leave them alone. Choosing returns focus to
diff --git a/plugins/code/generator/styles.css b/plugins/code/generator/styles.css
index 54c2f91..871d075 100644
--- a/plugins/code/generator/styles.css
+++ b/plugins/code/generator/styles.css
@@ -754,6 +754,29 @@
 @media (max-width: 300px) {
   .plugin-atyrode_code_generator .plugin-atyrode_code_generator__decision-body { padding: 14px 12px 12px; }
 }
+/*
+ * The tutorial (tutorial.tsx): a thin ring in the accent around the real control, and a card beside
+ * it in the dialog's grammar, a rule in the accent around it so it reads as part of the walk. Both
+ * are laid over the panel (absolute in its root), so nothing in the panel moves; the ring takes no
+ * pointer. The card waits unseen until it is placed, so it never shows where it does not belong.
+ */
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-ring { position: absolute; z-index: 30; box-sizing: border-box; border: 1px solid var(--tui-acc); pointer-events: none; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial { position: absolute; z-index: 31; box-sizing: border-box; max-height: calc(100% - 16px); overflow-y: auto; padding: 12px 14px 10px; border: 1px solid var(--tui-acc); color: var(--tui-fg); background: var(--code-panel); font: 14px/20px var(--code-sans); }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial:not([data-placed]) { top: 0; left: 0; visibility: hidden; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial h2 { margin: 0; color: var(--tui-acc); font-size: 15px; font-weight: 650; line-height: 22px; overflow-wrap: anywhere; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-count { color: var(--tui-dim); font-size: 13px; white-space: nowrap; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial p { margin: 4px 0 0; color: var(--tui-mid); overflow-wrap: anywhere; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-choices button { white-space: normal; overflow-wrap: anywhere; }
+.plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-skip { margin-left: auto; color: var(--tui-dim); }
+@media (pointer: coarse) {
+  .plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-choices button { min-width: 44px; min-height: 44px; }
+}
+/* The card stands outside the stage and the sheets, whose reduced-motion rules stop their fades, so it stops its own. */
+@media (prefers-reduced-motion: reduce) {
+  .plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial *, .plugin-atyrode_code_generator .plugin-atyrode_code_generator__tutorial-ring { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
+}
 
 /* Models: the list as the ladders it is, wide as a matrix (tiers down, providers across), else one ladder per provider. */
 .plugin-atyrode_code_generator .plugin-atyrode_code_generator__models-matrix { display: grid; grid-template-columns: max-content repeat(var(--cols), minmax(0, 1fr)); column-gap: 22px; min-width: 0; }
diff --git a/plugins/code/generator/tutorial-model.ts b/plugins/code/generator/tutorial-model.ts
new file mode 100644
index 0000000..0ddfe2f
--- /dev/null
+++ b/plugins/code/generator/tutorial-model.ts
@@ -0,0 +1,57 @@
+/*
+ * THE TUTORIAL: a short walk through the panel, one real control at a time, offered once per person
+ * and replayed from More. Each step names what it points at with its own selectors, in the order the
+ * layout may show it (a pane beside the generator, else its tab, else its Show control), so the same
+ * walk serves every width. A step whose control is not shown is passed over, and the count says how
+ * many the walk has now. Pure, so the walk's order and bounds are tested apart from the card that
+ * draws it (tutorial.tsx).
+ */
+
+/** Generator-panel class prefix; the selectors below name parts of the panel by it. */
+const G = "plugin-atyrode_code_generator__";
+
+/** Something the person may try at a step, which takes the walk on once done: choosing a word, or opening the accounts. */
+export type TutorialTry = "word" | "accounts";
+export type TutorialStep = {
+  readonly id: string;
+  readonly title: string;
+  readonly text: string;
+  /** Where the step points: the first of these the panel shows. */
+  readonly targets: readonly string[];
+  readonly tries?: TutorialTry;
+};
+
+export const TUTORIAL_STEPS: readonly TutorialStep[] = [
+  { id: "rows", title: "Your profile", text: "These words choose which models do the work and how hard they think. Click one to try it.",
+    targets: [`[data-pane="generator"] .${G}dials`], tries: "word" },
+  { id: "readout", title: "What it would do", text: "This line says what anything you point at would change, quota included.",
+    targets: [`[data-pane="generator"] .${G}readout`] },
+  { id: "defaults", title: "Defaults and Revert", text: "Defaults gives the standard profile. After a change, Revert brings back the saved one.",
+    targets: [`[data-pane="generator"] [data-defaults]`] },
+  { id: "routing", title: "Routing", text: "Each role in a session and the model it gets.",
+    targets: [`[data-pane="routing"]`, `[data-view-tab="routing"]`, `[data-reveal][aria-keyshortcuts="p"]`] },
+  { id: "usage", title: "Usage", text: "How much of each account's quota is left, over 5 hours and over a week.",
+    targets: [`[data-pane="usage"]`, `[data-view-tab="usage"]`, `[data-reveal][aria-keyshortcuts="s"]`] },
+  { id: "machine", title: "Machine", text: "Where the session runs.", targets: ["[data-machine-picker]"] },
+  { id: "launch", title: "Launch", text: "Opens a terminal on that machine with OMP running; you type your task there. The first launch checks your models once, after asking you.",
+    targets: [`[data-pane="generator"] button.${G}launch`] },
+  { id: "accounts", title: "Accounts", text: "Which of your accounts this workspace may use. Open it to see.", targets: [`[data-view-tab="accounts"]`], tries: "accounts" },
+  { id: "sessions", title: "Sessions", text: "What is running, with live dials, and saved sessions to reopen.", targets: [`[data-view-tab="sessions"]`] },
+  { id: "more", title: "More", text: "Models, Setup, Options and Shortcuts. Replay this tutorial here any time.", targets: ["[data-more]"] },
+];
+
+/** Where the walk stands among the steps shown now: 1-based, and how many there are; null when the step is not shown. */
+export function tutorialPlace(shown: readonly boolean[], step: number): { readonly position: number; readonly count: number } | null {
+  if (!shown[step]) return null;
+  return { position: shown.slice(0, step + 1).filter(Boolean).length, count: shown.filter(Boolean).length };
+}
+/** The next step shown after `step` (from the start for -1); null past the last, which ends the walk. */
+export function nextTutorialStep(shown: readonly boolean[], step: number): number | null {
+  for (let next = step + 1; next < shown.length; next++) if (shown[next]) return next;
+  return null;
+}
+/** The step shown before `step`; null at the first. */
+export function previousTutorialStep(shown: readonly boolean[], step: number): number | null {
+  for (let previous = step - 1; previous >= 0; previous--) if (shown[previous]) return previous;
+  return null;
+}
diff --git a/plugins/code/generator/tutorial.tsx b/plugins/code/generator/tutorial.tsx
new file mode 100644
index 0000000..abd497b
--- /dev/null
+++ b/plugins/code/generator/tutorial.tsx
@@ -0,0 +1,203 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
+import { createPortal } from "react-dom";
+import type { HostServices } from "@manifold/plugin";
+import { codeWorkflow } from "../machine-web.ts";
+import { nextTutorialStep, previousTutorialStep, TUTORIAL_STEPS, tutorialPlace, type TutorialStep } from "./tutorial-model.ts";
+
+/** Generator-panel class prefix; every part hangs from the generator root (styles.css). */
+const G = "plugin-atyrode_code_generator__";
+/** The card's room: its widest, its distance from what it points at and from the panel's edges, and the ring's margin around the control. */
+const CARD_MAX_PX = 320, GAP_PX = 10, EDGE_PX = 8, RING_PX = 4;
+
+/**
+ * Whether the person has seen the tutorial: their own record, read once, else, for a sign-in that
+ * keeps none (tutorial.ts), this browser's; null until read, and while it cannot be read, when the
+ * tutorial is not offered. `see` records it, at once on screen; a record that fails to write only
+ * means the tutorial is offered again next time, so nothing waits on it. Seen before the record is
+ * read (a walk replayed from More and ended at once), it is written once the read says where.
+ */
+export function useTutorialSeen(host: HostServices): { readonly seen: boolean | null; readonly see: () => void } {
+  const [seen, setSeen] = useState<boolean | null>(null);
+  const keeps = useRef<boolean | null>(null);
+  const early = useRef(false);
+  const local = `atyrode.code.tutorial:${host.principal.id}`;
+  function write(kept: boolean) {
+    if (!kept) { rememberInBrowser(local); return; }
+    codeWorkflow(host).seeTutorial().catch(() => { /* Offered again next time, as above. */ });
+  }
+  useEffect(() => {
+    let live = true;
+    setSeen(null);
+    keeps.current = null;
+    early.current = false;
+    codeWorkflow(host).readTutorial().then(record => {
+      if (!live) return;
+      keeps.current = record.keeps;
+      if (early.current) { write(record.keeps); setSeen(true); return; }
+      setSeen(record.keeps ? record.seenAt !== null : browserSeen(local));
+    }, () => { /* Unread: not offered, as above. */ });
+    return () => { live = false; };
+  }, [host.principal.id]);
+  function see() {
+    setSeen(true);
+    if (keeps.current === null) early.current = true;
+    else write(keeps.current);
+  }
+  return { seen, see };
+}
+/** A browser that cannot keep anything has not seen it; one that throws on access neither. */
+function browserSeen(key: string): boolean {
+  try {
+    const store = globalThis.localStorage;
+    return store ? store.getItem(key) !== null : false;
+  } catch { return false; }
+}
+function rememberInBrowser(key: string) {
+  try { globalThis.localStorage?.setItem(key, String(Date.now())); } catch { /* A browser that keeps nothing offers it again. */ }
+}
+
+/** The control a step points at in the panel: the first of its targets that is shown, or null. */
+export function tutorialTarget(panel: HTMLElement, step: TutorialStep): HTMLElement | null {
+  for (const selector of step.targets) {
+    const found = panel.querySelector<HTMLElement>(selector);
+    if (found && found.getClientRects().length > 0) return found;
+  }
+  return null;
+}
+/** Which steps the panel shows a control for now. */
+export function tutorialShown(panel: HTMLElement): boolean[] {
+  return TUTORIAL_STEPS.map(step => tutorialTarget(panel, step) !== null);
+}
+
+type Box = { readonly top: number; readonly left: number; readonly width: number; readonly height: number };
+type Layout = { readonly card: Box | null; readonly ring: Box | null };
+const HIDDEN: Layout = { card: null, ring: null };
+
+/**
+ * One step of the tutorial: a thin ring in the accent around the real control and a card beside it,
+ * under it where the panel shows room, else over it, both laid over the panel without moving anything
+ * in it and both kept to the part of the panel the window shows. The card says what the control is,
+ * where the walk stands among the steps it keeps to (`shown`, "3 of 10"), and offers Next (Done at
+ * the last), Back and Skip; `→` and `←` step too, and `Esc` skips; a held key steps once. Each step's
+ * card is a card of its own, so moving to it moves focus to its Next and it is read out, and its
+ * control is scrolled into view. A step whose control is not shown now (another view or a sheet has
+ * the panel), and any step while a popover of the panel is open (More's menu, the machine list), hides
+ * the card and the ring until that changes. Placed in the panel's own coordinates, so a panel in a
+ * translated canvas places it as well as one that is not.
+ */
+export function TutorialCard({ panel, step, shown, accent, onNext, onBack, onEnd }: {
+  panel: HTMLElement; step: number; shown: readonly boolean[]; accent: string; onNext: () => void; onBack: () => void; onEnd: () => void;
+}) {
+  const id = useId();
+  const card = useRef<HTMLElement>(null);
+  const next = useRef<HTMLButtonElement>(null);
+  const [layout, setLayout] = useState<Layout>(HIDDEN);
+  const current = TUTORIAL_STEPS[step]!;
+
+  function measure() {
+    const target = tutorialTarget(panel, current);
+    let placed = HIDDEN;
+    if (target && !panel.querySelector("[data-popover]")) {
+      const room = panel.getBoundingClientRect(), at = target.getBoundingClientRect();
+      // The part of the panel the window shows, in the panel's coordinates.
+      const view = { top: Math.max(0, -room.top), bottom: Math.min(room.height, innerHeight - room.top) };
+      const width = Math.max(0, Math.min(CARD_MAX_PX, room.width - 2 * EDGE_PX));
+      const height = card.current?.offsetHeight ?? 0;
+      const top = at.top - room.top, bottom = at.bottom - room.top;
+      const under = bottom + GAP_PX, over = top - GAP_PX - height;
+      const highest = view.top + EDGE_PX, lowest = Math.max(highest, view.bottom - EDGE_PX - height);
+      const cardTop = Math.min(Math.max(under + height <= view.bottom - EDGE_PX ? under : over >= highest ? over : lowest, highest), lowest);
+      const left = Math.min(Math.max(at.left - room.left, EDGE_PX), room.width - EDGE_PX - width);
+      // The ring around the control, within what the panel shows of it; none when nothing of it shows.
+      const ringTop = Math.max(view.top + 1, top - RING_PX), ringBottom = Math.min(view.bottom - 1, bottom + RING_PX);
+      const ringLeft = Math.max(1, at.left - room.left - RING_PX), ringRight = Math.min(room.width - 1, at.right - room.left + RING_PX);
+      placed = { card: { top: cardTop, left, width, height },
+        ring: ringBottom > ringTop && ringRight > ringLeft ? { top: ringTop, left: ringLeft, width: ringRight - ringLeft, height: ringBottom - ringTop } : null };
+    }
+    setLayout(previous => JSON.stringify(previous) === JSON.stringify(placed) ? previous : placed);
+  }
+  // Every render may have moved the control (a read landing, a pane growing); the card follows it before paint.
+  useLayoutEffect(measure);
+  const latest = useRef(measure);
+  latest.current = measure;
+  // Between renders it follows what moves on its own: a resize of the panel, the stage or the control, a scroll, a popover
+  // opening or closing, a view or pane shown or hidden, and the end of any motion under way in the panel (a pane sliding in
+  // moves its control without resizing or changing anything an observer sees); at most once a frame.
+  useEffect(() => {
+    const view = panel.ownerDocument.defaultView;
+    const watched = new WeakSet<Animation>();
+    let frame = 0, live = true;
+    const follow = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        latest.current();
+        for (const motion of panel.getAnimations({ subtree: true })) {
+          if (watched.has(motion)) continue;
+          watched.add(motion);
+          motion.finished.then(() => { if (live) follow(); }, () => {});
+        }
+      });
+    };
+    const sizes = new ResizeObserver(follow), changes = new MutationObserver(follow);
+    sizes.observe(panel);
+    const stage = panel.querySelector("[data-tui]"), target = tutorialTarget(panel, current);
+    if (stage) sizes.observe(stage);
+    if (target) sizes.observe(target);
+    changes.observe(panel, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-popover", "hidden"] });
+    panel.addEventListener("scroll", follow, true);
+    view?.addEventListener("resize", follow);
+    follow();
+    return () => {
+      live = false;
+      cancelAnimationFrame(frame);
+      sizes.disconnect(); changes.disconnect();
+      panel.removeEventListener("scroll", follow, true);
+      view?.removeEventListener("resize", follow);
+    };
+  }, [panel, step]);
+  // A step brings its control into view and takes focus on Next once its card shows, once per step: a card hidden while
+  // another view has the panel and shown again takes nothing from what the person is doing.
+  const showing = layout.card !== null;
+  const focused = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    if (!showing || focused.current === step) return;
+    focused.current = step;
+    tutorialTarget(panel, current)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    measure();
+    next.current?.focus({ preventScroll: true });
+    // A card taller than a short panel scrolls within itself: its choices are brought into its view with the focus.
+    const box = card.current;
+    if (box && box.scrollHeight > box.clientHeight) box.scrollTop = box.scrollHeight;
+  }, [step, showing]);
+
+  const place = tutorialPlace(shown, step);
+  const last = nextTutorialStep(shown, step) === null, first = previousTutorialStep(shown, step) === null;
+  function keys(event: KeyboardEvent<HTMLElement>) {
+    if (event.repeat && event.key !== "Escape") { event.preventDefault(); return; }
+    if (event.key === "Escape") onEnd();
+    else if (event.key === "ArrowRight") onNext();
+    else if (event.key === "ArrowLeft" && !first) onBack();
+    else return;
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  const box = (value: Box | null): CSSProperties => value ? { top: value.top, left: value.left, width: value.width } : {};
+  return createPortal(<>
+    {layout.ring && <div className={`${G}tutorial-ring`} aria-hidden="true"
+      style={{ ...box(layout.ring), height: layout.ring.height, "--tui-acc": accent } as CSSProperties} />}
+    <section key={step} ref={card} className={`${G}tutorial`} role="dialog" aria-modal="false" aria-labelledby={`${id}-title`} aria-describedby={`${id}-text`}
+      data-tutorial={current.id} data-placed={showing || undefined} style={{ ...box(layout.card), "--tui-acc": accent } as CSSProperties} onKeyDown={keys}>
+      <div className={`${G}tutorial-head`}>
+        <h2 id={`${id}-title`}>{current.title}</h2>
+        {place && <span className={`${G}tutorial-count`}>{place.position} of {place.count}</span>}
+      </div>
+      <p id={`${id}-text`}>{current.text}</p>
+      <div className={`${G}tutorial-choices`}>
+        <button ref={next} type="button" className={`${G}decision-go`} data-tutorial-choice="next" onClick={onNext}>{last ? "Done" : "Next"}</button>
+        {!first && <button type="button" className={`${G}go-fix`} data-tutorial-choice="back" onClick={onBack}>Back</button>}
+        {!last && <button type="button" className={`${G}go-fix ${G}tutorial-skip`} data-tutorial-choice="skip" onClick={onEnd}>Skip</button>}
+      </div>
+    </section>
+  </>, panel);
+}
diff --git a/plugins/code/generator/web.tsx b/plugins/code/generator/web.tsx
index 67e8202..efa3d66 100644
--- a/plugins/code/generator/web.tsx
+++ b/plugins/code/generator/web.tsx
@@ -24,10 +24,14 @@ import { SetupSheet } from "./setup-sheet.tsx";
 import { teamWords, type SlotOption } from "./statement-model.ts";
 import { UsagePane, useUsageCadence } from "./usage-pane.tsx";
 import { readHeld } from "./auto-read.ts";
+import { DecisionDialog } from "./decision-dialog.tsx";
+import { tutorialOffer } from "./decision-model.ts";
 import { MoreMenu, type MenuCommand } from "./more-menu.tsx";
 import { usePanelReads, usePanelShown } from "./read-clock.ts";
 import { useWorkbench } from "./workbench-model.ts";
 import { tabMark } from "./runs-model.ts";
+import { TutorialCard, tutorialShown, tutorialTarget, useTutorialSeen } from "./tutorial.tsx";
+import { nextTutorialStep, previousTutorialStep, TUTORIAL_STEPS } from "./tutorial-model.ts";
 
 /** Generator-panel class prefix; every part hangs from the generator root (styles.css). */
 const G = "plugin-atyrode_code_generator__";
@@ -230,6 +234,7 @@ const SHORTCUTS: readonly { readonly title: string; readonly keys: readonly (rea
     ["Esc", "Back to the generator; from Manage accounts, back to the accounts"]] },
   { title: "Accounts", keys: [["↑ ↓", "Move between the accounts"], ["Space", "Include or exclude the account"], ["m", "Manage accounts: pools, sign-in, credentials"]] },
   { title: "Sessions", keys: [["1–9", "Recall the recent profile with that number"]] },
+  { title: "Tutorial", keys: [["→ ←", "Next or back a step"], ["Esc", "End the tutorial"]] },
   { title: "Anywhere", keys: [["r", "Refresh now: read everything again at once, as the panel also does on its own"], ["?", "These shortcuts"]] },
 ];
 
@@ -296,6 +301,14 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
   const stageScroll = useRef(0);
   // Where the question a press waits on mounts (decision-dialog.tsx): beside the stage and the sheets, so it shows over either.
   const [decisionHost, setDecisionHost] = useState<HTMLDivElement | null>(null);
+  // The panel's root, which the tutorial's card is laid over (tutorial.tsx), once mounted.
+  const [panelRoot, setPanelRoot] = useState<HTMLElement | null>(null);
+  useLayoutEffect(() => { setPanelRoot(app.current?.closest<HTMLElement>(PANEL_ROOT) ?? null); }, []);
+  // The tutorial: whether the person has seen it, the walk (the step it stands at and the steps it keeps to; null when it is
+  // not walked), and a start waiting for the generator to show.
+  const tutorial = useTutorialSeen(host);
+  const [walk, setWalk] = useState<{ readonly step: number; readonly shown: readonly boolean[] } | null>(null);
+  const [starting, setStarting] = useState(false);
   const currentSheet = useRef(sheet);
   currentSheet.current = sheet;
   // The roster is polled; what reads it is recomputed only when it really changes.
@@ -458,7 +471,8 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
    * A key or a key-line word that changes what shows keeps focus in the panel: a view that took no
    * focus of its own on arrival (the accounts view focuses its first switch) is focused itself, and
    * the main view hands focus to the row the keyboard was last on. Focus left on a hidden control
-   * would drop to the page, where the panel's keys no longer reach.
+   * would drop to the page, where the panel's keys no longer reach. The tutorial's card keeps the
+   * focus it took: a view its step opened is the walk's to go on from.
    */
   function keepFocus() {
     requestAnimationFrame(() => {
@@ -466,6 +480,7 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
       // A sheet opened within the frame (Esc, then a sheet's key) owns focus and gives it back itself.
       if (!node || currentSheet.current) return;
       const active = node.ownerDocument.activeElement;
+      if (active?.closest(`.${G}tutorial`)) return;
       const pane = node.querySelector<HTMLElement>(`[data-pane="${shown === "main" ? "generator" : shown}"]`);
       if (active && pane?.contains(active) && (active as HTMLElement).offsetParent !== null) return;
       if (shown === "main") generator.current?.focusRows();
@@ -532,6 +547,62 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
     };
   }, []);
 
+  // ------------------------------------------------------------ the tutorial: offered once per person, walked over the real controls
+  /**
+   * A walk starts on the generator: a sheet closes and the view goes back to it, then the steps the
+   * panel shows there are taken once that has rendered, and the walk keeps to them, so its count
+   * holds while a step it walks to (the accounts) shows another view, and a walk replayed from
+   * another view never begins past the generator's steps.
+   */
+  function startWalk() {
+    if (currentSheet.current) closeSheet();
+    changeView("main");
+    setStarting(true);
+  }
+  useLayoutEffect(() => {
+    if (!starting || !panelRoot || view !== "main" || sheet !== null) return;
+    setStarting(false);
+    const shown = tutorialShown(panelRoot), first = nextTutorialStep(shown, -1);
+    setWalk(first === null ? null : { step: first, shown });
+  });
+  /**
+   * The walk ends, finished or skipped: it counts as seen, and focus comes back into the panel on More, where the tutorial is
+   * replayed, rather than on the rows, where a second `↵` of a double press would launch.
+   */
+  function endWalk() {
+    setWalk(null);
+    tutorial.see();
+    requestAnimationFrame(() => app.current?.querySelector<HTMLElement>("[data-more]")?.focus({ preventScroll: true }));
+  }
+  /** A step whose control another view hides (the generator's, from the accounts) brings the generator back with it. */
+  function stepWalk(forward: boolean) {
+    if (walk === null || !panelRoot) return;
+    const to = forward ? nextTutorialStep(walk.shown, walk.step) : previousTutorialStep(walk.shown, walk.step);
+    if (to === null) { if (forward) endWalk(); return; }
+    if (view !== "main" && !tutorialTarget(panelRoot, TUTORIAL_STEPS[to]!)) changeView("main");
+    setWalk({ step: to, shown: walk.shown });
+  }
+  // A step the person can try goes on by itself once they did: a profile word chosen since it began, or the accounts opened
+  // since it began, so a step come back to with the accounts already open waits for Next.
+  const selectionKey = JSON.stringify(selection);
+  const walkBegan = useRef<{ readonly step: number; readonly selection: string; readonly view: PanelView } | null>(null);
+  useEffect(() => {
+    if (walk === null) { walkBegan.current = null; return; }
+    if (walkBegan.current?.step !== walk.step) { walkBegan.current = { step: walk.step, selection: selectionKey, view }; return; }
+    const tries = TUTORIAL_STEPS[walk.step]?.tries;
+    if ((tries === "word" && selectionKey !== walkBegan.current.selection) || (tries === "accounts" && view === "accounts" && walkBegan.current.view !== "accounts")) {
+      stepWalk(true);
+    }
+  });
+  // The offer: once per person, to a person and not an agent or a service, opened on the generator at rest with its profile
+  // shown, nothing running, no charge waiting and no other question open; once open it stands until it is answered either
+  // way, since nothing behind it can be pressed meanwhile, so a check writing on its own never closes and reopens it.
+  const offerDue = tutorial.seen === false && host.principal.kind === "human" && walk === null && !starting && view === "main" && sheet === null
+    && selection !== null && teamGate.open && !busy && decisionHost?.querySelector('dialog[open]:not([data-decision="tutorial"])') == null;
+  const [offering, setOffering] = useState(false);
+  useEffect(() => { if (offerDue) setOffering(true); }, [offerDue]);
+  const offer = offering && tutorial.seen === false && walk === null && !starting ? tutorialOffer() : null;
+
   // ------------------------------------------------------------ the bar, the pane heads and the key line: every action a control, keys its accelerators
   // A control names its key only where the panel's key rules give that key its action in the shown view (panel-keys.ts).
   const keyed = (title: string, keys: readonly string[], does: (action: PanelAction) => boolean) => {
@@ -568,6 +639,7 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
       onSelect: () => run({ kind: "sheet", sheet: "options" }) },
     { id: "shortcuts", label: "Shortcuts", aside: null, accelerator: menuKey(["?"], action => action.kind === "shortcuts"), title: "Keyboard shortcuts", dialog: true,
       onSelect: () => run({ kind: "shortcuts" }) },
+    { id: "tutorial", label: "Tutorial", aside: null, accelerator: null, title: "Tutorial: a short tour of Code", onSelect: startWalk },
   ];
   const bar = <nav className={`${G}bar`} aria-label="Code">
     <div className={`${G}tabs`} role="tablist" aria-label="views" onKeyDown={tabKeys}>
@@ -651,7 +723,11 @@ function Workbench({ host, target, machine, machines, rosterError, available, se
   return <>
     {region}
     {tui}
-    <div ref={setDecisionHost} className={`${G}decision-host`} style={{ "--tui-acc": accent } as CSSProperties} />
+    <div ref={setDecisionHost} className={`${G}decision-host`} style={{ "--tui-acc": accent } as CSSProperties}>
+      <DecisionDialog decision={offer} onChoose={choice => { tutorial.see(); if (choice.does.kind === "tour") startWalk(); }} />
+    </div>
+    {walk !== null && panelRoot && <TutorialCard panel={panelRoot} step={walk.step} shown={walk.shown} accent={accent}
+      onNext={() => stepWalk(true)} onBack={() => stepWalk(false)} onEnd={endWalk} />}
     {sheetHost("models", <ModelsSheet host={host} model={model} machine={machine} onBack={closeSheet} backRef={backRef("models")} onPlace={open} />)}
     {sheetHost("setup", <SetupSheet host={host} model={model} target={target} machine={machine} machines={roster} rosterError={rosterError} presence={presence}
       select={select} refreshMachines={refreshMachines} onBack={closeSheet} backRef={backRef("setup")} onPlace={open} open={sheet === "setup"} />)}
diff --git a/plugins/code/person.ts b/plugins/code/person.ts
new file mode 100644
index 0000000..193f311
--- /dev/null
+++ b/plugins/code/person.ts
@@ -0,0 +1,33 @@
+import { CodeRefusal, digestOf, type CodeContext } from "./context.ts";
+
+/*
+  A PERSON'S OWN RECORDS: their model checks and standing approval (checks.ts) and whether they have
+  seen the panel's tutorial (tutorial.ts). They are keyed by the caller's own principal, so nobody
+  reads or writes another person's, and only a person whose sign-in reaches the whole workspace tree
+  keeps any: an agent, a service, or a token confined to one container or by an authority ceiling
+  keeps none, since these records are the person's, never one container's.
+*/
+
+/** Why a caller keeps no records: not a person, or a person whose sign-in reaches less than the whole workspace tree. */
+export type Keeper = { person: string } | { refused: "person_required" | "checks_confined" };
+/**
+ * The caller's records are filed under a digest of their principal, cut to 40 hex characters so a
+ * record's key (`checks/<person>/<budget>/<pool>` the longest) stays within the 128 characters plugin
+ * storage keys may have; every record also names its principal, which every read compares. Whether
+ * the sign-in reaches the workspace root is asked where an unconfined credential is anchored.
+ */
+export async function keeperOf(ctx: CodeContext): Promise<Keeper> {
+  if (ctx.auth.principal.kind !== "human") return { refused: "person_required" };
+  if (ctx.auth.containerScope !== null || !(await ctx.auth.allows("containers:read"))) return { refused: "checks_confined" };
+  return { person: digestOf({ principalId: ctx.auth.principal.id }).slice(0, 40) };
+}
+/** The caller's person digest, or null when they keep no records. */
+export async function personOf(ctx: CodeContext): Promise<string | null> {
+  const keeper = await keeperOf(ctx);
+  return "person" in keeper ? keeper.person : null;
+}
+/** A stored record that names another principal is corruption, never someone's data. */
+export function bound<T extends { principalId: string }>(ctx: CodeContext, record: T): T {
+  if (record.principalId !== ctx.auth.principal.id) throw new CodeRefusal("invalid_configuration");
+  return record;
+}
diff --git a/plugins/code/server.ts b/plugins/code/server.ts
index 856307a..d4139c8 100644
--- a/plugins/code/server.ts
+++ b/plugins/code/server.ts
@@ -16,16 +16,18 @@ import { catalogReview, commitConfiguration, configurationMigration, expectRevis
 import { cancelSession, composeSession, followSession, listProfiles, readSession, runSession } from "./session.ts";
 import { configureServices, currentSuggestionService, readServiceConfiguration, reviewServices } from "./service-setup.ts";
 import { adoptCheck, approveChecks, readChecks, recordCheck } from "./checks.ts";
+import { readTutorial, seeTutorial } from "./tutorial.ts";
 
 const mutating: Partial<Record<RootAction, true>> = {
   initializeConfiguration: true, stageCatalog: true, promoteCatalog: true, discardCatalog: true, select: true, adoptCheck: true, changeAccounts: true,
   configureServices: true, runSession: true, cancelSession: true,
 };
 const pure: Partial<Record<RootAction, true>> = { draftInventory: true, deriveCatalog: true };
-// A person's own checks and approval: no container is involved, so no container capability is
-// asked. They are container-graded so that a token confined to one container reaches them and is
-// answered as keeping none, rather than refused in a way a caller could not tell from a failure.
-const personal: Partial<Record<RootAction, true>> = { readChecks: true, approveChecks: true };
+// A person's own records, their checks, approval and tutorial: no container is involved, so no
+// container capability is asked. They are container-graded so that a token confined to one container
+// reaches them and is answered as keeping none, rather than refused in a way a caller could not tell
+// from a failure.
+const personal: Partial<Record<RootAction, true>> = { readChecks: true, approveChecks: true, readTutorial: true, seeTutorial: true };
 // Only Code's external suggestion policy needs native authority. Policy
 // composition never delegates OMP execution, jobs, accounts or terminals.
 const actionDelegates: Partial<Record<RootAction, readonly Cap[]>> = {
@@ -92,6 +94,8 @@ const productHandlers: ProductHandlers = {
   },
   readChecks,
   approveChecks,
+  readTutorial,
+  seeTutorial,
   adoptCheck,
   async changeAccounts(ctx, args) {
     const previous = await readConfiguration(ctx, args, true); expectRevision(previous, args.expectedRevision);
diff --git a/plugins/code/tutorial.ts b/plugins/code/tutorial.ts
new file mode 100644
index 0000000..f8bd01b
--- /dev/null
+++ b/plugins/code/tutorial.ts
@@ -0,0 +1,34 @@
+import { z } from "zod";
+import { epochMilliseconds } from "@atyrode/manifold-omp";
+import { id, type Tutorial } from "./contract.ts";
+import type { CodeContext } from "./context.ts";
+import { bound, personOf } from "./person.ts";
+
+/*
+  WHETHER A PERSON HAS SEEN THE TUTORIAL. The panel offers its tutorial once per person, on whichever
+  device and in whichever workspace they first open it; answering the offer either way, or ending a
+  walk, marks it seen, and More replays it whenever they like. It is a person's own record
+  (person.ts): nobody reads or writes another person's, and a caller that keeps none is answered as
+  keeping none rather than refused, so the panel keeps it in the browser instead.
+*/
+
+const StoredTutorialSchema = z.strictObject({ schemaVersion: z.literal(1), principalId: id, seenAt: epochMilliseconds });
+const tutorialKey = (person: string) => `tutorial/${person}`;
+
+async function readRecord(ctx: CodeContext, person: string): Promise<Tutorial> {
+  const raw = await ctx.storage.get(tutorialKey(person));
+  return { keeps: true, seenAt: raw === null ? null : bound(ctx, StoredTutorialSchema.parse(JSON.parse(raw))).seenAt };
+}
+
+export async function readTutorial(ctx: CodeContext): Promise<Tutorial> {
+  const person = await personOf(ctx);
+  return person === null ? { keeps: false, seenAt: null } : readRecord(ctx, person);
+}
+
+/** Records that the caller has seen the tutorial, once: a record already there, from another tab or device, stands as it is. */
+export async function seeTutorial(ctx: CodeContext): Promise<Tutorial> {
+  const person = await personOf(ctx);
+  if (person === null) return { keeps: false, seenAt: null };
+  const record = StoredTutorialSchema.parse({ schemaVersion: 1, principalId: ctx.auth.principal.id, seenAt: ctx.now() });
+  return await ctx.storage.compareAndSet(tutorialKey(person), null, JSON.stringify(record)) ? { keeps: true, seenAt: record.seenAt } : readRecord(ctx, person);
+}
diff --git a/plugins/code/workflow.ts b/plugins/code/workflow.ts
index 593b750..d9f3638 100644
--- a/plugins/code/workflow.ts
+++ b/plugins/code/workflow.ts
@@ -823,6 +823,8 @@ export function createCodeWorkflowClient(transport: Dispatch) {
     readStarterCatalog, verifyModels, observeVerification,
     readChecks: () => code("readChecks", {}),
     approveChecks: (expectedRevision: number, requests: number) => code("approveChecks", { expectedRevision, requests }),
+    readTutorial: () => code("readTutorial", {}),
+    seeTutorial: () => code("seeTutorial", {}),
     readSkillCatalog: (target: Target) => omp("readSkillCatalog", target),
     listSessions, runningSession,
     async resumeSession(ref: OmpSessionRef, options: ResumeSessionOptions = {}, isCurrent: () => boolean = () => true): Promise<ResumeSessionResult> {
diff --git a/plugins/scripts/verify-browser.ts b/plugins/scripts/verify-browser.ts
index 3a10e09..438e733 100755
--- a/plugins/scripts/verify-browser.ts
+++ b/plugins/scripts/verify-browser.ts
@@ -55,7 +55,9 @@ view and sheet, zero hover/focus layout shift, panel-local keys that never act f
 open popover, More as a menu button by pointer and keyboard, arrival keys, the wheel only on a focused
 or rested row, 44px targets on a coarse pointer, focus kept through the gate and reduced motion that
 animates nothing; and the modal question a press waits on (a refused press, a check's charge, a
-review that differs, a check that changed the profile), answered only by a deliberate press.
+review that differs, a check that changed the profile), answered only by a deliberate press; and the
+tutorial a person's first open offers once, recorded on the server, whose walk over the real controls
+lies over the panel at every width and moves nothing in it.
 Also: an unsaved edit kept across a reload, own account edits that never conflict with it while a
 foreign profile write does, a save refused for a lead no account serves, a writer without a canvas
 who saves but is told why launching waits, account switches saved through the real changeAccounts
@@ -320,12 +322,15 @@ const failureLine = `!!document.querySelector(${JSON.stringify(`${generator} .${
 /** The facts beside the launch, part by part, each with its tone; the line's asides are said in the readout instead. */
 const launchParts = `[...document.querySelectorAll(${JSON.stringify(`${generator} .${G}launch-line .${G}launch-part`)})].map(el => [el.textContent, el.dataset.tone ?? null])`;
 /**
- * The question a press waits on the person for (decision-dialog.tsx): one native dialog, mounted beside the stage and the
- * sheets and opened modal over the whole page, whose `data-decision` names what it asks: a check's charge, a review that
- * differs from what the panel showed, a check that changed the profile, or a refused press.
+ * The question the panel waits on the person for (decision-dialog.tsx), opened modal over the whole page, whose
+ * `data-decision` names what it asks: a check's charge, a review that differs from what the panel showed, a check that
+ * changed the profile, a refused press, or, on a person's first open, whether to take the tutorial. A press's questions
+ * and the tutorial's offer are two native dialogs, both mounted beside the stage and the sheets (`decisionHost`); the
+ * question is the one open.
  */
-const decision = element(`${generator} dialog.${G}decision`);
-type Question = "charge" | "differs" | "narrowed" | "refused";
+const decisionHost = element(`${generator} .${G}decision-host`);
+const decision = element(`${generator} dialog.${G}decision[open]`);
+type Question = "charge" | "differs" | "narrowed" | "refused" | "tutorial";
 /** The open question asks `kind`, modal over the page. */
 function asks(kind: Question): string {
   return `(!!${decision}?.open && ${decision}.matches(':modal') && ${decision}.dataset.decision === '${kind}')`;
@@ -407,8 +412,8 @@ const more = element(`${generator} [data-more]`);
 const menu = element(`${generator} [role="menu"]`);
 /** The open menu's items, top to bottom. */
 const menuItems = `[...document.querySelectorAll(${JSON.stringify(`${generator} [role="menu"] [role="menuitem"]`)})]`;
-type MenuItem = "models" | "setup" | "options" | "shortcuts";
-const MENU: readonly MenuItem[] = ["models", "setup", "options", "shortcuts"];
+type MenuItem = "models" | "setup" | "options" | "shortcuts" | "tutorial";
+const MENU: readonly MenuItem[] = ["models", "setup", "options", "shortcuts", "tutorial"];
 function menuItem(id: MenuItem): string {
   return element(`${generator} [role="menu"] [role="menuitem"][data-menu-item="${id}"]`);
 }
@@ -745,18 +750,39 @@ async function readChecks(server: TestServer, grant: TokenGrant): Promise<Action
   assert(outcome.ok, "A person reads their own model checks");
   return outcome.result as ActionResult<"readChecks">;
 }
+/** A person's own tutorial record, as the real server keeps it (tutorial.ts): whether they keep one, and when they first saw the tutorial. */
+async function readTutorial(server: TestServer, grant: TokenGrant): Promise<ActionResult<"readTutorial">> {
+  const outcome = await callAction(server, grant.token, "atyrode.code.readTutorial", {});
+  assert(outcome.ok, "A person reads their own tutorial record");
+  return outcome.result as ActionResult<"readTutorial">;
+}
+/**
+ * Marks `grant` as a person who has seen the tutorial, through the real door, before their browser opens the panel. A
+ * person's first open offers the tutorial in a modal question that nothing behind it can be pressed through, so every
+ * scenario but the tutorial's own starts from a person past it, as anyone who has opened the panel once is. Every
+ * principal here is a person whose sign-in reaches the whole workspace tree, so each keeps the record on the server and
+ * none needs the browser's key that a sign-in keeping none would.
+ */
+async function seenTutorial(server: TestServer, grant: TokenGrant): Promise<void> {
+  const outcome = await callAction(server, grant.token, "atyrode.code.seeTutorial", {});
+  assert(outcome.ok, "A person marks their own tutorial seen");
+  const record = outcome.result as ActionResult<"seeTutorial">;
+  assert(record.keeps && record.seenAt !== null, `${grant.principal.name} keeps their tutorial record on the server, now seen`);
+}
 /** What a workspace writer may do: the writer's capabilities, and those of each person a check scenario signs in as. */
 const WRITER_CAPS: Parameters<typeof TestkitModule.mintToken>[1]["caps"] = ["containers:read", "containers:write", "machines:read", "machines:run", "jobs:read", "services:read"];
 /**
  * Runs `scenario` signed in as a writer of its own, who has approved nothing and keeps no model check. The approval and
  * the kept checks belong to the person (checks.ts) and reach every workspace they open, so a scenario whose first check
- * must ask, or must find nothing to adopt, never inherits another scenario's. The browser is the writer's again after.
+ * must ask, or must find nothing to adopt, never inherits another scenario's. The person has seen the tutorial
+ * (`seenTutorial`). The browser is the writer's again after.
  */
 async function asNewPerson(browser: BrowserInstance, server: TestServer, writer: TokenGrant, name: string,
   scenario: (person: TokenGrant) => Promise<void>): Promise<void> {
   const person = await mintToken(server, { principal: { kind: "human", name, color: "#6a5acd" }, caps: WRITER_CAPS });
   assert.deepEqual(await readChecks(server, person), { revision: 0, approvedRequests: 0, approvedAt: null, checks: [], keeps: true },
     "A new person keeps their own checks, has approved nothing and keeps no model check yet");
+  await seenTutorial(server, person);
   await browser.evaluate(identity(person));
   try {
     await scenario(person);
@@ -1578,7 +1604,7 @@ async function sheetStill(browser: BrowserInstance, what: string): Promise<void>
 // ---------------------------------------------------------------- the question a press waits on: geometry, shift, touch, motion
 
 /** The open question as painted, its text judged inside the viewport: it stands over the whole page, not the panel. */
-const QUESTION_PAINT = paintOf(`dialog.${G}decision`, "button", "({ left: 0, right: innerWidth })");
+const QUESTION_PAINT = paintOf(`dialog.${G}decision[open]`, "button", "({ left: 0, right: innerWidth })");
 /** The open question's entrance: its own short rise with motion allowed (styles.css `decision-in`), none under reduced motion. */
 const questionAnimation = `getComputedStyle(${decision}).animationName`;
 /**
@@ -1765,8 +1791,9 @@ async function acceptanceScenario(browser: BrowserInstance, label: string, recen
   await until(browser, "the shortcuts close onto the row", `!${shortcuts}.open && !!${row("thinking")}.contains(document.activeElement)`);
 
   // More, the bar's one menu, is a WAI-ARIA menu button. A press opens it with focus on its first item, which names the
-  // key that does the same from the main view; ↑/↓ walk its items round from end to end, Home and End reach its ends,
-  // and pointing at an item focuses it. Opening the menu, walking it and pointing at it move nothing on the stage.
+  // key that does the same from the main view (the tutorial, last, has none); ↑/↓ walk its items round from end to end,
+  // Home and End reach its ends, and pointing at an item focuses it. Opening the menu, walking it and pointing at it move
+  // nothing on the stage.
   await pointAway(browser);
   await still(browser);
   await browser.evaluate(BOXES);
@@ -1774,10 +1801,11 @@ async function acceptanceScenario(browser: BrowserInstance, label: string, recen
   assert.equal(await browser.evaluate(`${more}.getAttribute('aria-haspopup') === 'menu' && ${more}.getAttribute('aria-controls') === ${menu}.id &&
     ${menu}.getAttribute('aria-labelledby') === ${more}.id && ${menu}.getAttribute('role') === 'menu'`), true, "More is a menu button that controls the menu it labels");
   assert.deepEqual(await browser.evaluate(`${menuItems}.map(item => [item.dataset.menuItem, item.getAttribute('aria-keyshortcuts')])`),
-    [["models", "m"], ["setup", "u"], ["options", "o"], ["shortcuts", "?"]], "More holds Models, Setup, Options and Shortcuts, each naming its key from the main view");
+    [["models", "m"], ["setup", "u"], ["options", "o"], ["shortcuts", "?"], ["tutorial", null]],
+    "More holds Models, Setup, Options, Shortcuts and Tutorial, each naming its key from the main view where it has one");
   assert.deepEqual(await browser.evaluate<string[]>(SHIFTED), [], "Opening More shifts nothing on the stage");
-  for (const [name, code, at] of [["ArrowDown", 40, 1], ["ArrowDown", 40, 2], ["ArrowDown", 40, 3], ["ArrowDown", 40, 0], ["ArrowUp", 38, 3],
-    ["Home", 36, 0], ["End", 35, 3], ["ArrowUp", 38, 2]] as const) {
+  for (const [name, code, at] of [["ArrowDown", 40, 1], ["ArrowDown", 40, 2], ["ArrowDown", 40, 3], ["ArrowDown", 40, 4], ["ArrowDown", 40, 0],
+    ["ArrowUp", 38, 4], ["Home", 36, 0], ["End", 35, 4], ["ArrowUp", 38, 3]] as const) {
     await key(browser, name, code);
     await until(browser, `${name} moves to More's ${MENU[at]} item`, `document.activeElement === ${menuItem(MENU[at]!)}`);
     await settle(browser);
@@ -1817,7 +1845,9 @@ async function acceptanceScenario(browser: BrowserInstance, label: string, recen
   await key(browser, "Escape", 27);
   await until(browser, "Esc closes the session options onto More", `${element(stage)}.hidden === false && document.activeElement === ${more}`);
   await key(browser, "ArrowUp", 38);
-  await until(browser, "↑ on More opens its menu on its last item", `document.activeElement === ${menuItem("shortcuts")}`);
+  await until(browser, "↑ on More opens its menu on its last item, Tutorial", `document.activeElement === ${menuItem("tutorial")}`);
+  await key(browser, "ArrowUp", 38);
+  await until(browser, "↑ moves to More's Shortcuts item", `document.activeElement === ${menuItem("shortcuts")}`);
   await key(browser, "Enter", 13);
   await until(browser, "↵ on More's Shortcuts item opens the shortcuts", `!!${shortcuts}?.open && ${shortcuts}.matches(':modal') && ${shortcuts}.contains(document.activeElement)`);
   await key(browser, "Escape", 27);
@@ -1833,7 +1863,7 @@ async function acceptanceScenario(browser: BrowserInstance, label: string, recen
   await key(browser, "a", 65);
   await until(browser, "a opens the accounts", shownView("accounts"));
   await openMenu(browser);
-  assert.deepEqual(await browser.evaluate(`${menuItems}.map(item => item.getAttribute('aria-keyshortcuts'))`), [null, null, null, "?"],
+  assert.deepEqual(await browser.evaluate(`${menuItems}.map(item => item.getAttribute('aria-keyshortcuts'))`), [null, null, null, "?", null],
     "From the accounts More names only ? as a key");
   // A press outside closes the menu.
   await click(browser, element(`${generator} [data-pane="accounts"] .${G}title`));
@@ -2049,10 +2079,13 @@ async function acceptanceScenario(browser: BrowserInstance, label: string, recen
   // own border answers it: only a single press that starts and ends on the backdrop is its way out, as Esc is, onto the
   // launch. Every click the dialog itself hears is kept with where it landed, so each press is known to be what it claims.
   await browser.evaluate(`(() => {
-    const dialog = ${decision}, presses = { opened: null, clicks: [] };
-    new MutationObserver(() => { if (dialog.open && presses.opened === null) presses.opened = performance.now(); }).observe(dialog, { attributes: true, attributeFilter: ['open'] });
-    dialog.addEventListener('click', event => {
-      const box = dialog.getBoundingClientRect(), off = event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+    // Either dialog in the host may be the one that opens, so the host is watched rather than one dialog.
+    const host = ${decisionHost}, presses = { opened: null, clicks: [] };
+    new MutationObserver(() => { if (host.querySelector('dialog[open]') && presses.opened === null) presses.opened = performance.now(); })
+      .observe(host, { subtree: true, attributes: true, attributeFilter: ['open'] });
+    host.addEventListener('click', event => {
+      const dialog = event.target.closest('dialog'), box = dialog.getBoundingClientRect();
+      const off = event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
       presses.clicks.push({ on: event.target !== dialog ? 'inside' : off ? 'backdrop' : 'border', detail: event.detail, settled: event.timeStamp - presses.opened >= ${DECISION_SETTLE_MS} });
     });
     globalThis.__codeBackdrop = presses;
@@ -3921,6 +3954,486 @@ async function leadStruckScenario(browser: BrowserInstance, server: TestServer,
   }
 }
 
+// ---------------------------------------------------------------- the tutorial
+
+/**
+ * The tutorial's walk (tutorial.tsx): its card, laid over the panel beside the control a step points at, the ring it draws
+ * around that control, and the card's Next (Done at the last); its other choices are Back and Skip, each by its
+ * `data-tutorial-choice`. No walk is on while neither card nor ring is in the panel.
+ */
+const tutorialCard = element(`${generator} section.${G}tutorial`);
+const tutorialRing = element(`${generator} .${G}tutorial-ring`);
+const tutorialNext = element(`${generator} section.${G}tutorial [data-tutorial-choice="next"]`);
+const unwalked = `${tutorialCard} === null && ${tutorialRing} === null`;
+type TourStep = "rows" | "readout" | "defaults" | "routing" | "usage" | "machine" | "launch" | "accounts" | "sessions" | "more";
+const TOUR: readonly TourStep[] = ["rows", "readout", "defaults", "routing", "usage", "machine", "launch", "accounts", "sessions", "more"];
+/**
+ * What each step's ring must go around, as this verifier finds it in the panel: the generator's five rows, its readout,
+ * Defaults, routing and usage where the layout puts them (their pane beside or under the generator, else their tab), the
+ * machine, the launch, the Accounts and Sessions tabs and More. None where the panel shows no such control.
+ */
+const TOUR_CONTROLS = `(() => {
+  const root = ${element(generator)}, shown = el => !!el && el.getClientRects().length > 0, first = (...found) => found.filter(shown).slice(0, 1);
+  return {
+    rows: () => [...root.querySelectorAll('[data-pane="generator"] [data-row]')].filter(shown),
+    readout: () => first(root.querySelector('[data-pane="generator"] .${G}readout')),
+    defaults: () => first(root.querySelector('[data-pane="generator"] [data-defaults]')),
+    routing: () => first(root.querySelector('[data-pane="routing"]'), root.querySelector('[data-view-tab="routing"]')),
+    usage: () => first(root.querySelector('[data-pane="usage"]'), root.querySelector('[data-view-tab="usage"]')),
+    machine: () => first(${machinePicker}),
+    launch: () => first(${launchButton}),
+    accounts: () => first(root.querySelector('[data-view-tab="accounts"]')),
+    sessions: () => first(root.querySelector('[data-view-tab="sessions"]')),
+    more: () => first(${more}),
+  };
+})()`;
+/** The steps whose control the panel shows now, in order: those a walk started now keeps to. */
+const TOUR_SHOWN = `(() => { const controls = ${TOUR_CONTROLS}; return ${JSON.stringify(TOUR)}.filter(step => controls[step]().length > 0); })()`;
+/**
+ * Where the walk stands, as painted: the card's step, its count and its choices, whether focus is on its Next, whether a
+ * question is open, the view shown, whether the card is placed with its ring, and what is wrong with its place: the card or
+ * the ring leaving the part of the panel the window shows, the ring not around what the window shows of its control, the
+ * control not scrolled into view (inside every box that clips it, wholly where it fits), and the card over its control
+ * though the panel has room for it above or below. Null while no walk is on.
+ */
+type TourPlace = { step: string; count: string | null; choices: string[][]; focused: boolean; asked: boolean; view: string; placed: boolean; problems: string[] };
+const TOUR_PLACE = `(() => {
+  const card = ${tutorialCard}, ring = ${tutorialRing};
+  if (!card) return null;
+  const controls = ${TOUR_CONTROLS}[card.dataset.tutorial]?.() ?? [];
+  const edges = box => [box.left, box.right, box.top, box.bottom].map(Math.round).join(',');
+  const within = (box, room, slack) => box.left >= room.left - slack && box.right <= room.right + slack && box.top >= room.top - slack && box.bottom <= room.bottom + slack;
+  const panel = ${element(generator)}.getBoundingClientRect();
+  const shown = { left: panel.left, right: panel.right, top: Math.max(panel.top, 0), bottom: Math.min(panel.bottom, innerHeight) };
+  const clipOf = el => {
+    let clip = { left: 0, top: 0, right: innerWidth, bottom: innerHeight };
+    for (let node = el.parentElement; node; node = node.parentElement) {
+      const style = getComputedStyle(node);
+      if (style.overflowX === 'visible' && style.overflowY === 'visible') continue;
+      const edge = node.getBoundingClientRect();
+      clip = { left: Math.max(clip.left, edge.left), top: Math.max(clip.top, edge.top), right: Math.min(clip.right, edge.right), bottom: Math.min(clip.bottom, edge.bottom) };
+    }
+    return clip;
+  };
+  const placed = card.hasAttribute('data-placed') && ring !== null, problems = [];
+  if (placed) {
+    const box = card.getBoundingClientRect(), around = ring.getBoundingClientRect();
+    if (!within(box, shown, 0.5)) problems.push('the card ' + edges(box) + ' leaves the panel ' + edges(shown));
+    if (!within(around, shown, 0.5)) problems.push('the ring ' + edges(around) + ' leaves the panel ' + edges(shown));
+    if (controls.length === 0) problems.push('the panel shows no control for ' + card.dataset.tutorial);
+    for (const control of controls) {
+      const at = control.getBoundingClientRect(), clip = clipOf(control);
+      const name = control.dataset.row ?? control.dataset.pane ?? control.dataset.viewTab ?? String(control.className);
+      const visible = { left: Math.max(at.left, shown.left), right: Math.min(at.right, shown.right), top: Math.max(at.top, shown.top), bottom: Math.min(at.bottom, shown.bottom) };
+      if (!within(visible, around, 1)) problems.push('the ring ' + edges(around) + ' is not around ' + name + ' ' + edges(visible));
+      const fits = at.width <= clip.right - clip.left + 1 && at.height <= clip.bottom - clip.top + 1;
+      const seen = fits ? within(at, clip, 1) : Math.min(at.right, clip.right) > Math.max(at.left, clip.left) && Math.min(at.bottom, clip.bottom) > Math.max(at.top, clip.top);
+      if (!seen) problems.push(name + ' ' + edges(at) + ' is not scrolled into view ' + edges(clip));
+    }
+    if (controls.length) {
+      const boxes = controls.map(control => control.getBoundingClientRect());
+      const all = { left: Math.min(...boxes.map(b => b.left)), right: Math.max(...boxes.map(b => b.right)), top: Math.min(...boxes.map(b => b.top)), bottom: Math.max(...boxes.map(b => b.bottom)) };
+      // The card keeps a little distance from its control and from the panel's edges (tutorial.tsx), so there is room for
+      // it beside the control where its height and 24px more fit above or below.
+      const room = Math.max(all.top - shown.top, shown.bottom - all.bottom) - 24;
+      const covers = Math.min(box.right, all.right) - Math.max(box.left, all.left) > 1 && Math.min(box.bottom, all.bottom) - Math.max(box.top, all.top) > 1;
+      if (covers && room >= box.height) problems.push('the card ' + edges(box) + ' covers its control ' + edges(all) + ' though the panel has room for it above or below');
+    }
+  }
+  return { step: card.dataset.tutorial, count: card.querySelector('.${G}tutorial-count')?.textContent ?? null,
+    choices: [...card.querySelectorAll('[data-tutorial-choice]')].map(el => [el.dataset.tutorialChoice, el.textContent]),
+    focused: document.activeElement === card.querySelector('[data-tutorial-choice="next"]'), asked: !!${decision}?.open,
+    view: ${element(stage)}.dataset.view, placed, problems };
+})()`;
+/** The walk shows `step`, its card placed. */
+function tourShows(step: TourStep): string {
+  return `(() => { const place = ${TOUR_PLACE}; return place?.step === '${step}' && place.placed; })()`;
+}
+/**
+ * The walk shows `step`, `position` of `count`, with `view` on show: its card placed with the step's choices (Next, or Done
+ * at the last; Back past the first; Skip before the last), focus on its Next, no question open, and, once the panel is at
+ * rest (a pane the step brought back slides in), its place sound (`TOUR_PLACE`).
+ */
+async function tourStep(browser: BrowserInstance, step: TourStep, position: number, count: number, description: string, view: View = "main"): Promise<void> {
+  await until(browser, description, tourShows(step));
+  await still(browser);
+  await settle(browser);
+  const choices = [["next", position === count ? "Done" : "Next"], ...(position > 1 ? [["back", "Back"]] : []), ...(position < count ? [["skip", "Skip"]] : [])];
+  assert.deepEqual(await browser.evaluate<TourPlace>(TOUR_PLACE), { step, count: `${position} of ${count}`, choices, focused: true, asked: false, view, placed: true, problems: [] },
+    `${description}: ${position} of ${count}, its card inside the panel beside the control, the ring around it, focus on Next and nothing asked`);
+}
+/** The whole panel's layout boxes, but for the walk's own card and ring, which lie over it, and the words that change by design. */
+const TOUR_BOXES = boxesOf(generator, `${SAID_WORDS} || element.closest('.${G}tutorial, .${G}tutorial-ring')`);
+/** The walk's card as painted, its text judged inside the panel it stands in. */
+const TOUR_PAINT = paintOf(`section.${G}tutorial`, "button");
+/** What of the walk would still move under reduced motion: the card, what it holds or the ring, or a pseudo-element of one, whose transition or animation lasts. */
+const TOUR_MOTION = `[...document.querySelectorAll('${generator} :is(.${G}tutorial, .${G}tutorial *, .${G}tutorial-ring)')].flatMap(el => [null, '::before', '::after'].flatMap(pseudo => {
+  const style = getComputedStyle(el, pseudo);
+  return [...style.transitionDuration.split(','), ...style.animationDuration.split(',')].some(value => parseFloat(value) > 0) ? [(el.getAttribute('class') ?? el.tagName) + (pseudo ?? '')] : [];
+})).slice(0, 6)`;
+
+/**
+ * From 170 to 1440px of panel width, and narrow but tall with routing and usage under the generator, a walk replayed from
+ * More keeps to the steps whose control the panel shows, every one of them, and takes them in order by →, "1 of 10" to "10
+ * of 10", each with focus on its Next: its card paints whole inside the panel (`TOUR_PAINT`: no text cut, outside the
+ * panel or over other text, and no squeezed choice), its ring goes around the step's control, scrolled into view, and the
+ * card covers that control only where the panel has no room beside it (`TOUR_PLACE`). Nothing in the panel moves
+ * (`TOUR_BOXES`) as the card appears, moves from step to step and goes, and → at the last step ends the walk with focus
+ * on More. Every width is measured before the verdict, so one run names every place that fails.
+ */
+async function tourAcrossWidths(browser: BrowserInstance): Promise<void> {
+  const problems: string[] = [];
+  try {
+    for (const [width, height] of [...WIDTHS.map(width => [width, 900] as const), [620, 2400], [320, 2400], [170, 2400]] as const) {
+      await panelWidth(browser, width, height);
+      await showView(browser, "main");
+      await pointAway(browser);
+      await still(browser);
+      const where = height === 900 ? `${width}px` : `${width}px and ${height}px tall`;
+      const steps = await browser.evaluate<TourStep[]>(TOUR_SHOWN);
+      if (steps.length !== TOUR.length) problems.push(`${where}: the panel shows a control for ${steps.join(", ")} only`);
+      await browser.evaluate(TOUR_BOXES);
+      await openMenu(browser);
+      await click(browser, menuItem("tutorial"));
+      for (const [index, step] of steps.entries()) {
+        if (index > 0) await key(browser, "ArrowRight", 39);
+        await until(browser, `at ${where} the walk shows ${step}`, tourShows(step));
+        await settle(browser);
+        const at = `${where}, ${step}`;
+        const place = await browser.evaluate<TourPlace>(TOUR_PLACE);
+        if (place.count !== `${index + 1} of ${steps.length}`) problems.push(`${at}: the count says ${place.count}`);
+        if (!place.focused) problems.push(`${at}: focus is not on Next`);
+        const paint = await browser.evaluate<Paint>(TOUR_PAINT);
+        problems.push(...place.problems.map(entry => `${at}: ${entry}`), ...paint.cut.map(entry => `${at}: ${entry}`),
+          ...paint.outside.map(entry => `${at}: ${entry} paints outside the panel`), ...paint.overlaps.map(entry => `${at}: ${entry}`),
+          ...paint.small.map(entry => `${at}: choice ${entry} wide`), ...(await browser.evaluate<string[]>(SHIFTED)).map(entry => `${at}: ${entry}`));
+      }
+      await key(browser, "ArrowRight", 39);
+      await until(browser, `at ${where} → at the last step ends the walk, focus on More`, `${unwalked} && document.activeElement === ${more}`);
+      await settle(browser);
+      problems.push(...(await browser.evaluate<string[]>(SHIFTED)).map(entry => `${where}, once the walk ended: ${entry}`));
+    }
+  } finally {
+    await browser.send("Emulation.clearDeviceMetricsOverride", {});
+  }
+  assert.deepEqual(problems, [], "From 170 to 1440px the walk takes every step, its card paints whole inside the panel beside its control, the ring goes around it, and nothing in the panel moves as the card appears, moves and goes");
+}
+
+/**
+ * Under reduced motion a walk replayed from More animates nothing as its card appears, moves from step to step and goes:
+ * no animation runs in the panel, and neither the card, what it holds nor the ring has a transition or animation that lasts.
+ */
+async function tourStill(browser: BrowserInstance): Promise<void> {
+  await browser.send("Emulation.setEmulatedMedia", { features: [{ name: "prefers-reduced-motion", value: "reduce" }] });
+  try {
+    await showView(browser, "main");
+    // A transition already under way when motion is reduced runs out its own duration; the walk starts from rest.
+    await still(browser);
+    const steps = await browser.evaluate<TourStep[]>(TOUR_SHOWN);
+    await openMenu(browser);
+    await click(browser, menuItem("tutorial"));
+    for (const [index, step] of steps.entries()) {
+      if (index > 0) await key(browser, "ArrowRight", 39);
+      await until(browser, `under reduced motion the walk shows ${step}`, tourShows(step));
+      await settle(browser);
+      assert.deepEqual(await browser.evaluate(`[${running}, ${TOUR_MOTION}]`), [0, []], `Reduced motion: the walk's ${step} step animates nothing`);
+    }
+    await key(browser, "ArrowRight", 39);
+    await until(browser, "under reduced motion → at the last step ends the walk", `${unwalked} && document.activeElement === ${more}`);
+    await settle(browser);
+    assert.equal(await browser.evaluate(running), 0, "Reduced motion: the walk's end animates nothing");
+  } finally {
+    await browser.send("Emulation.setEmulatedMedia", { features: [] });
+  }
+}
+
+/** On a coarse pointer every choice of the walk's card is at least 44px both ways, at each width the main view's targets are measured at. */
+async function tourCoarseTargets(browser: BrowserInstance): Promise<void> {
+  const problems: string[] = [];
+  await browser.send("Emulation.setTouchEmulationEnabled", { enabled: true, maxTouchPoints: 1 });
+  try {
+    assert.equal(await browser.evaluate("matchMedia('(pointer: coarse)').matches"), true);
+    for (const width of [1280, 860, 390, 240]) {
+      await panelWidth(browser, width);
+      await showView(browser, "main");
+      await tap(browser, more);
+      await until(browser, "a tap on More opens its menu", `${menu} !== null`);
+      await tap(browser, menuItem("tutorial"));
+      await until(browser, "a tap on More's Tutorial item starts the walk", tourShows("rows"));
+      // The second step offers all three choices: Next, Back and Skip.
+      await key(browser, "ArrowRight", 39);
+      await until(browser, "→ goes on to the readout", tourShows("readout"));
+      // Fractional layout may leave a 44px target a fraction of a pixel short; half a pixel is the tolerance.
+      problems.push(...(await browser.evaluate<string[]>(`[...${tutorialCard}.querySelectorAll('[data-tutorial-choice]')]
+        .filter(el => { const rect = el.getBoundingClientRect(); return rect.height < 43.5 || rect.width < 43.5; })
+        .map(el => el.textContent + ' ' + el.getBoundingClientRect().width.toFixed(1) + 'x' + el.getBoundingClientRect().height.toFixed(1))`))
+        .map(entry => `the walk's card at ${width}px: ${entry}`));
+      await key(browser, "Escape", 27);
+      await until(browser, "Esc ends the walk", `${unwalked} && document.activeElement === ${more}`);
+    }
+  } finally {
+    await browser.send("Emulation.clearDeviceMetricsOverride", {});
+    await browser.send("Emulation.setTouchEmulationEnabled", { enabled: false });
+  }
+  assert.deepEqual(problems, [], "Every choice of the walk's card is at least 44px on a coarse pointer");
+}
+
+/**
+ * The tutorial a person's first open offers (docs/configuration.md "The tutorial"), for four people new to Code signed in to
+ * this browser in turn, on a workspace with a checked list in use and another only set up. The offer opens once the
+ * generator shows the profile, modal over the page with focus on its title; Skip, Esc and a settled press on its backdrop
+ * each mark the tutorial seen in the person's own record on the real server, never the browser, and neither a reload nor
+ * another workspace offers it again. Take the tour, by the keyboard, walks the real controls one at a time by ↵ on Next, →,
+ * ← and a press, the count, the ring, the card's place and focus on Next checked at every step; a held key steps once. A
+ * word tried in the rows and the accounts opened go on by themselves, a step waits unseen while More's menu is open or
+ * another view hides its control, Back onto the launch from the accounts brings the generator back, and Done ends it with
+ * focus on More, where a second ↵ opens the menu. More replays it from the sessions and Esc ends that; the shortcuts name
+ * its keys; it is then walked at every width with nothing in the panel moving, under reduced motion with nothing
+ * animating, and on a coarse pointer with 44px choices. The offer and the walk launch, spend and save nothing: the word
+ * tried is the rows' ordinary unsaved edit, which Revert puts back. The accounts and their usage are synthetic.
+ */
+async function tutorialScenario(browser: BrowserInstance, server: TestServer, writer: TokenGrant): Promise<void> {
+  // A Claude slot beside a Codex one, so the Mixed profile's words are there to try.
+  const codex = { reference: { kind: "credential" as const, scope: fixtureScope, provider: "openai-codex", credentialId: 3 }, credentialId: 3,
+    type: "api_key" as const, identityKey: null, email: null, disabled: false, blocks: [] };
+  const observation = (): OmpResult<"accounts"> => {
+    const claude = fixtureAccounts([1]);
+    return { ...claude, accounts: [...claude.accounts, codex] };
+  };
+  // The walk's workspace has a list in use, checked for that pool as the workflow records a check, so the rows show its saved
+  // profile and an edit of them offers Revert; the other is only set up, and shows the bundled preview.
+  const first = { containerId: (await createContainer(server, "Tutorial", "canvas")).id };
+  const elsewhere = { containerId: (await createContainer(server, "Tutorial elsewhere", "canvas")).id };
+  for (const workspace of [first, elsewhere]) {
+    const created = await callAction(server, writer.token, "atyrode.code.initializeConfiguration", { ...workspace, expectedRevision: 0 });
+    assert(created.ok, "The tutorial's workspaces have a profile to show");
+  }
+  const bundled = await callAction(server, writer.token, "atyrode.omp.readModelCatalog", { providers: ["anthropic", "openai-codex"] });
+  assert(bundled.ok);
+  const metadata = ModelCatalogSnapshotSchema.parse(bundled.result);
+  const set = await readConfiguration(server, writer, first);
+  const probe = await callAction(server, writer.token, "atyrode.code.composeProbe", { ...first, expectedRevision: set.revision, accounts: observation() });
+  assert(probe.ok);
+  const staged = await callAction(server, writer.token, "atyrode.code.stageCatalog", { ...first, expectedRevision: set.revision,
+    document: catalogFromMetadata(metadata, "any"), verification: { ompVersion: OMP_VERSION, inventoryArtifactSha256: pinnedOmpArtifact(),
+      catalogRevision: metadata.revision, inventoryObservedAt: Date.now() - 3_000, benchmarkCompletedAt: Date.now() - 2_000, accounts: observation(),
+      poolIdentityDigest: (probe.result as ActionResult<"composeProbe">).poolIdentityDigest, budget: "any" } });
+  assert(staged.ok, staged.ok ? "" : `The walk's workspace stages a checked list: ${staged.denial.message}`);
+  const reviewInput = { ...first, expectedRevision: (staged.result as Configuration).revision, source: "draft" };
+  const reviewed = await callAction(server, writer.token, "atyrode.code.reviewCatalog", reviewInput);
+  assert(reviewed.ok);
+  const promoted = await callAction(server, writer.token, "atyrode.code.promoteCatalog", { ...reviewInput, reviewDigest: (reviewed.result as ActionResult<"reviewCatalog">).reviewDigest });
+  assert(promoted.ok, "The walk's workspace has the checked list in use");
+  const base = await readConfiguration(server, writer, first);
+  const fixture = await intercept(browser, server, name => name === "atyrode.omp.accounts.accounts" ? { ok: true, result: observation() }
+    : name === "atyrode.omp.accounts.usage" ? { ok: true, result: fixtureUsage(observation()) } : undefined);
+  const answers = await watchAnswers(browser, server, ["atyrode.code.readTutorial"]);
+  const trace = await watchActions(browser, server);
+  /** A person new to Code, who has not seen the tutorial, signed in to this browser with the canvas and the panel side by side. */
+  const newcomer = async (name: string): Promise<TokenGrant> => {
+    const person = await mintToken(server, { principal: { kind: "human", name, color: "#2e8b57" }, caps: WRITER_CAPS });
+    assert.deepEqual(await readTutorial(server, person), { keeps: true, seenAt: null }, `${name} keeps their own tutorial record and has not seen the tutorial`);
+    await arrangeWorkbench(server, person);
+    await browser.evaluate(identity(person));
+    return person;
+  };
+  /** Opens a workspace; once the generator shows the profile and the panel has read the person's record, an offer due is open. */
+  const arrive = async (workspace: { containerId: string }) => {
+    await openGenerator(browser, server, workspace.containerId);
+    await until(browser, "the generator shows the profile", `${chosenKey("lane")} !== undefined`);
+    await waitFor(() => answers.answered("atyrode.code.readTutorial") > 0, timeout, 50);
+  };
+  /** No offer opens, nor a walk, on the generator at rest whose panel has read the person's record. */
+  const unoffered = async (description: string) => {
+    await Bun.sleep(DECISION_SETTLE_MS);
+    assert.equal(await browser.evaluate(`${unasked} && ${unwalked} && ${shownView("main")}`), true, description);
+  };
+  /** The person's own record on the server says when they saw the tutorial; the browser keeps no key for them, as it would for a sign-in that keeps none. */
+  const seenAt = async (person: TokenGrant, description: string): Promise<number> => {
+    const record = await waitFor(async () => { const read = await readTutorial(server, person); return read.seenAt === null ? undefined : read; }, timeout, 50);
+    assert.equal(record.keeps, true, description);
+    assert.equal(await browser.evaluate(`localStorage.getItem(${JSON.stringify(`atyrode.code.tutorial:${person.principal.id}`)})`), null,
+      `${description} in the person's own record, not the browser's`);
+    return record.seenAt!;
+  };
+  try {
+    // A person's first open asks whether to take the tour once the generator shows their profile: modal over the page, with
+    // focus on its title. Skip marks the tutorial seen in their own record, so neither a reload nor another workspace offers
+    // it again, and the record keeps the moment Skip made it.
+    const skipper = await newcomer("Code tutorial skipper");
+    await arrive(first);
+    const welcome = await questionOpens(browser, "tutorial", "a person's first open offers the tutorial once the generator shows the profile");
+    assert.deepEqual(welcome, { title: "Welcome to Code", text: ["Code starts OMP coding sessions with the models you choose. A short tour shows where everything is."],
+      items: [], choices: [["tour", "Take the tour"], ["dismiss", "Skip"]] }, "The offer welcomes the person and asks whether to take the tour, Skip its way out");
+    await answer(browser, "dismiss");
+    await until(browser, "Skip closes the offer onto the panel and walks nothing", `${unasked} && ${unwalked} && !!document.activeElement?.closest('${generator}')`);
+    const skipped = await seenAt(skipper, "Skip marks the tutorial seen");
+    await arrive(first);
+    await unoffered("A reload never offers the tutorial again");
+    await arrive(elsewhere);
+    await unoffered("Another workspace never offers the tutorial again");
+    assert.equal((await readTutorial(server, skipper)).seenAt, skipped, "The record stands as Skip made it");
+
+    // Until it is answered the offer is modal: a panel key behind it opens nothing. Esc is its way out at any moment, as Skip
+    // is, and marks the tutorial seen too; so does a press on its backdrop once it has settled.
+    const leaver = await newcomer("Code tutorial leaver");
+    await arrive(first);
+    await questionOpens(browser, "tutorial", "the offer opens for another new person");
+    await key(browser, "a", 65);
+    await Bun.sleep(300);
+    assert.equal(await browser.evaluate(`${asks("tutorial")} && ${shownView("main")}`), true, "Behind the offer a panel key opens nothing");
+    await key(browser, "Escape", 27);
+    await until(browser, "Esc closes the offer and walks nothing", `${unasked} && ${unwalked}`);
+    const left = await seenAt(leaver, "Esc marks the tutorial seen");
+    await arrive(first);
+    await unoffered("Left by Esc, the tutorial is never offered again");
+    const passer = await newcomer("Code tutorial passer-by");
+    await arrive(first);
+    await questionOpens(browser, "tutorial", "the offer opens for a third new person");
+    await Bun.sleep(DECISION_SETTLE_MS);
+    await press(browser, backdrop);
+    await until(browser, "a press on the settled offer's backdrop closes it and walks nothing", `${unasked} && ${unwalked}`);
+    const passed = await seenAt(passer, "A press on the backdrop marks the tutorial seen");
+
+    // Take the tour, by the keyboard: Tab from the title reaches it, and ↵ once it has held focus starts the walk on the
+    // generator at its rows, which marks the tutorial seen at once.
+    const walker = await newcomer("Code tutorial walker");
+    await arrive(first);
+    await questionOpens(browser, "tutorial", "the offer opens for the person who takes the tour");
+    await panelWidth(browser, 1280);
+    await until(browser, "the launch names the machine the panel picked", `!!${machinePicker}?.textContent && ${machinePicker}.getAttribute('aria-label') !== 'Machine: none'`);
+    const saved = await browser.evaluate<string>(profileValues);
+    await firstChoiceByTab(browser, "tutorial");
+    await Bun.sleep(DELIBERATE_MS);
+    await key(browser, "Enter", 13);
+    await tourStep(browser, "rows", 1, 10, "↵ on Take the tour starts the walk at the generator's rows");
+    const toured = await seenAt(walker, "Taking the tour marks the tutorial seen at once");
+
+    // ← at the first step goes nowhere. A word chosen in the rows, as the card asks, is the rows' ordinary edit, and the walk
+    // goes on to the readout by itself; ← and → step back and on, and the word tried before the step began takes it on no more.
+    await key(browser, "ArrowLeft", 37);
+    await Bun.sleep(300);
+    await tourStep(browser, "rows", 1, 10, "← at the first step goes nowhere");
+    const tried = await browser.evaluate<string | undefined>(`[...${row("thinking")}.querySelectorAll('.${G}word:not([data-selected]):not([data-off])')][0]?.dataset.key`);
+    assert(tried, "The thinking row offers another word to try");
+    await click(browser, word("thinking", tried));
+    await tourStep(browser, "readout", 2, 10, "a word chosen in the rows goes on to the readout by itself");
+    assert.equal(await browser.evaluate(chosenKey("thinking")), tried, "The tried word is chosen, as any choice is");
+    await key(browser, "ArrowLeft", 37);
+    await tourStep(browser, "rows", 1, 10, "← goes back to the rows");
+    await key(browser, "ArrowRight", 39);
+    await tourStep(browser, "readout", 2, 10, "→ goes on to the readout");
+    await key(browser, "ArrowRight", 39);
+    await tourStep(browser, "defaults", 3, 10, "→ goes on to Defaults");
+    // A held key steps once: the repeats of a held →, ↵ or ← take the walk nowhere.
+    for (const [name, code] of [["ArrowRight", 39], ["Enter", 13], ["ArrowLeft", 37]] as const) await key(browser, name, code, { autoRepeat: true });
+    await Bun.sleep(300);
+    await tourStep(browser, "defaults", 3, 10, "the repeats of a held →, ↵ or ← take the walk nowhere");
+    for (const [index, step] of (["routing", "usage", "machine"] as const).entries()) {
+      await key(browser, "Enter", 13);
+      await tourStep(browser, step, index + 4, 10, `↵ on Next goes on to the ${step}`);
+    }
+
+    // Any step waits unseen while a popover of the panel is open: More's menu, opened at the machine's step, hides its card
+    // and ring; Esc closes the menu onto More and they show again, taking no focus from More. A press on Next goes on.
+    await click(browser, more);
+    await until(browser, "with More's menu open the machine's card waits unseen, without its ring",
+      `${menu} !== null && ${tutorialCard}?.dataset.tutorial === 'machine' && !${tutorialCard}.hasAttribute('data-placed') && ${tutorialRing} === null`);
+    await key(browser, "Escape", 27);
+    await until(browser, "Esc closes More's menu onto More, and the machine's card shows again with its ring", `${menu} === null && ${tourShows("machine")}`);
+    await settle(browser);
+    assert.equal(await browser.evaluate(`document.activeElement === ${more}`), true, "Shown again, the card takes no focus from More");
+    await click(browser, tutorialNext);
+    await tourStep(browser, "launch", 7, 10, "a press on Next goes on to the launch");
+
+    // A step whose control another view hides waits unseen: opening the accounts by their tab hides the launch's card and its
+    // ring, and the walk stays where it was; back on the generator the card shows again, taking no focus from where the
+    // person's press left it. A press on Next goes on.
+    await click(browser, element(`${generator} [data-view-tab="accounts"]`));
+    await until(browser, "with the accounts on show the launch's card waits unseen, without its ring",
+      `${shownView("accounts")} && ${tutorialCard}?.dataset.tutorial === 'launch' && !${tutorialCard}.hasAttribute('data-placed') && ${tutorialRing} === null`);
+    await click(browser, element(`${generator} [data-view-tab="main"]`));
+    await until(browser, "back on the generator the launch's card shows again with its ring", tourShows("launch"));
+    await settle(browser);
+    assert.equal(await browser.evaluate(`document.activeElement !== ${tutorialNext} && !!document.activeElement?.closest('${generator}')`), true,
+      "Shown again, the card takes no focus: it stays in the panel where the person's press left it");
+    await click(browser, tutorialNext);
+    await tourStep(browser, "accounts", 8, 10, "a press on Next goes on to the Accounts tab");
+
+    // Opening the accounts during their step goes on to the Sessions tab by itself; the accounts stay on show and focus stays
+    // on the card's Next, even once the accounts have settled. ← goes back to the Accounts tab, the accounts still on show,
+    // and stays there as the panel renders again (the person looks at another tab and back); ← again, onto the launch the
+    // accounts hide, brings the generator back.
+    await click(browser, element(`${generator} [data-view-tab="accounts"]`));
+    await tourStep(browser, "sessions", 9, 10, "opening the accounts goes on to the Sessions tab by itself", "accounts");
+    await Bun.sleep(500);
+    await tourStep(browser, "sessions", 9, 10, "settled, the accounts take no focus from the card", "accounts");
+    await key(browser, "ArrowLeft", 37);
+    await tourStep(browser, "accounts", 8, 10, "← goes back to the Accounts tab, the accounts still on show", "accounts");
+    await lookAway(browser);
+    await settle(browser);
+    await tourStep(browser, "accounts", 8, 10, "the walk stays on the Accounts tab as the panel renders again", "accounts");
+    await key(browser, "ArrowLeft", 37);
+    await tourStep(browser, "launch", 7, 10, "← onto the launch, which the accounts hide, brings the generator back");
+
+    // Next goes on where a step can be tried too: ↵ on the Accounts tab's step goes on without opening them. Done, at the
+    // last step, ends the walk with focus on More, where it is replayed, and the record keeps the moment the tour was taken;
+    // ↵ again, as the second of a double press on Done, opens More's menu rather than launching.
+    for (const [index, step] of (["accounts", "sessions", "more"] as const).entries()) {
+      await key(browser, "Enter", 13);
+      await tourStep(browser, step, index + 8, 10, `↵ on Next goes on to ${step === "more" ? "More" : `the ${step === "accounts" ? "Accounts" : "Sessions"} tab`}`);
+    }
+    await key(browser, "Enter", 13);
+    await until(browser, "Done ends the walk with focus on More", `${unwalked} && document.activeElement === ${more} && ${shownView("main")}`);
+    assert.equal((await readTutorial(server, walker)).seenAt, toured, "Ending the walk leaves the record as taking the tour made it");
+    await key(browser, "Enter", 13);
+    await until(browser, "↵ again opens More's menu on its first item", `${menu} !== null && document.activeElement === ${menuItems}[0]`);
+    await key(browser, "Escape", 27);
+    await until(browser, "Esc closes More's menu onto More", `${menu} === null && document.activeElement === ${more}`);
+
+    // More replays the walk from another view: from the sessions it starts on the generator again, at its rows, counting the
+    // same ten steps; Esc ends it with focus on More. The shortcuts name the walk's keys.
+    await showView(browser, "sessions");
+    await openMenu(browser);
+    await click(browser, menuItem("tutorial"));
+    await tourStep(browser, "rows", 1, 10, "More's Tutorial, chosen from the sessions, replays the walk on the generator at its rows");
+    await key(browser, "Escape", 27);
+    await until(browser, "Esc ends the walk with focus on More", `${unwalked} && document.activeElement === ${more} && ${shownView("main")}`);
+    await click(browser, generatorTitle);
+    await key(browser, "?", 191);
+    await until(browser, "? opens the shortcuts", `!!${shortcuts}?.open && ${shortcuts}.contains(document.activeElement)`);
+    assert.deepEqual(await browser.evaluate(`[...${shortcuts}.querySelectorAll('section[aria-label="Tutorial"] dt')].map(dt => [dt.textContent, dt.nextElementSibling?.textContent])`),
+      [["→ ←", "Next or back a step"], ["Esc", "End the tutorial"]], "The shortcuts name the walk's keys: → and ← step, Esc ends it");
+    await key(browser, "Escape", 27);
+    await until(browser, "Esc closes the shortcuts", `!${shortcuts}.open`);
+
+    // The word tried is the rows' unsaved edit, which Revert puts back.
+    assert.notEqual(await browser.evaluate(profileValues), saved, "The word tried stays the rows' edit once the walk has ended");
+    await click(browser, revertButton);
+    await until(browser, "Revert puts the saved profile back", `${profileValues} === ${JSON.stringify(saved)} && !${revertButton}`);
+
+    await tourAcrossWidths(browser);
+    await tourStill(browser);
+    await tourCoarseTargets(browser);
+
+    // Nothing was launched, spent or saved: no review, preparation, terminal, check or approval was asked for, and the
+    // workspace profile is as it was.
+    noNativeEffects(trace.requests);
+    assert.deepEqual(trace.requests.filter(request => /^atyrode\.code\.(initializeConfiguration|stageCatalog|promoteCatalog|discardCatalog|select|changeAccounts|approveChecks|adoptCheck|recordCheck)$/.test(request.name)), [],
+      "The offer and the walk save, check, approve and adopt nothing");
+    assert.deepEqual(await readConfiguration(server, writer, first), base, "The offer and the walk leave the workspace profile as it was");
+    assert.deepEqual(await Promise.all([skipper, leaver, passer, walker].map(async person => (await readTutorial(server, person)).seenAt)), [skipped, left, passed, toured],
+      "Every record stands as the person's first answer made it");
+    fixture.check();
+  } finally {
+    trace.stop();
+    answers.stop();
+    await fixture.stop();
+    await browser.send("Emulation.clearDeviceMetricsOverride", {});
+    await browser.evaluate(identity(writer));
+  }
+}
+
 // ---------------------------------------------------------------- shared drafts across destinations
 
 /**
@@ -3999,14 +4512,15 @@ async function sharedWorkbenchScenario(browser: BrowserInstance, viewerBrowser:
     // opens, answers nothing, as any press in its first moments; the second, once the question has settled, on Close while
     // focus is still on the title, takes the way out, onto the launch.
     await viewerBrowser.evaluate(`(() => {
-      const dialog = ${decision};
+      // The host holds the tutorial's offer and the press's question; the click goes to the refused question the moment it opens.
       globalThis.__codeAssisted = false;
       new MutationObserver((records, observer) => {
-        if (!dialog.open) return;
+        const dialog = records.map(record => record.target).find(node => node.open && node.dataset.decision === 'refused');
+        if (!dialog) return;
         observer.disconnect();
         dialog.querySelector('button[data-choice="dismiss"]').click();
         globalThis.__codeAssisted = true;
-      }).observe(dialog, { attributes: true, attributeFilter: ['open'] });
+      }).observe(${decisionHost}, { subtree: true, attributes: true, attributeFilter: ['open'] });
       return true;
     })()`);
     await click(viewerBrowser, launchButton);
@@ -4995,6 +5509,7 @@ async function setupSheetScenario(browser: BrowserInstance, server: TestServer,
     // The classifier, as the instance owner: off, then an Ollama origin and model, reviewed at the real server, then applied,
     // which the fixture refuses. Only the applying press would configure anything.
     owner = await mintToken(server, { principal: { kind: "human", name: "Code owner", color: "#669933" }, caps: ["*"] });
+    await seenTutorial(server, owner);
     await arrangeWorkbench(server, owner);
     await browser.evaluate(identity(owner));
     try {
@@ -5309,10 +5824,12 @@ async function syntheticPreviewScenario(browser: BrowserInstance, server: TestSe
     gptJoins = true;
     const reviewsBeforeHold = reviews.length, preparedBeforeHold = prepareRequests, heldAt = trace.requests.length;
     await browser.evaluate(`(() => {
-      const dialog = ${decision}, early = { opened: null, open: dialog.open, clicks: [] };
-      new MutationObserver(() => { if (dialog.open && !early.open) early.opened = performance.now(); early.open = dialog.open; })
-        .observe(dialog, { attributes: true, attributeFilter: ['open'] });
-      dialog.addEventListener('click', event => early.clicks.push({ choice: event.target.closest('button[data-choice]')?.dataset.choice ?? null,
+      // The host holds the tutorial's offer and the press's question: the recorder follows whichever of them opens.
+      const host = ${decisionHost}, early = { opened: null, clicks: [] };
+      new MutationObserver(records => {
+        if (early.opened === null && records.some(record => record.target.open)) early.opened = performance.now();
+      }).observe(host, { subtree: true, attributes: true, attributeFilter: ['open'] });
+      host.addEventListener('click', event => early.clicks.push({ choice: event.target.closest('button[data-choice]')?.dataset.choice ?? null,
         detail: event.detail, settled: event.timeStamp - early.opened >= ${DECISION_SETTLE_MS} }), true);
       globalThis.__codeEarly = early;
       return true;
@@ -5680,6 +6197,7 @@ async function agentLaunchScenario(browser: BrowserInstance, server: TestServer,
   const target: Target = { containerId: workspace.id, machineId: destination.machineId };
   const sponsor = await mintToken(server, { principal: { kind: "human", name: "Code sponsor", color: "#339966" },
     caps: ["containers:read", "containers:write", "machines:read", "machines:run", "jobs:read", "services:read", "agents:delegate"] });
+  await seenTutorial(server, sponsor);
   // The sponsor's profile: four published anthropic models without minimal thinking, checked as the workflow records a check.
   const created = await callAction(server, sponsor.token, "atyrode.code.initializeConfiguration", { containerId: workspace.id, expectedRevision: 0 });
   assert(created.ok, "A sponsor initializes its workspace's Code profile");
@@ -6339,6 +6857,8 @@ async function run(): Promise<void> {
     const viewer = await mintToken(server, { principal: { kind: "human", name: "Code viewer", color: "#996633" },
       caps: ["containers:read", "machines:read", "machines:run", "jobs:read", "services:read"] });
     assert.notEqual(writer.principal.id, viewer.principal.id, "Writer and viewer must be different native identities");
+    await seenTutorial(server, writer);
+    await seenTutorial(server, viewer);
     phase = "opening two independent workspaces";
     const viewerActions: string[] = [];
     const watchViewerActions = async () => {
@@ -6537,6 +7057,8 @@ async function run(): Promise<void> {
     await tieredUsageScenario(writerBrowser, server, writer);
     phase = "struck leads and the only box say why";
     await leadStruckScenario(writerBrowser, server, writer);
+    phase = "the tutorial: offered once per person and seen by Skip, Esc or the backdrop, walked over the real controls by key and pointer, tried, stepped back across views, replayed from More, and laid over the panel at every width without moving it";
+    await tutorialScenario(writerBrowser, server, writer);
     phase = "an imported first list, a refused competing first import, a refused first stage and the exact review a staged list is used by";
     await importedCatalogScenario(writerBrowser, server, writer);
     phase = "deferred first-use and standalone Usage configuration recovery";
@@ -6563,7 +7085,7 @@ async function run(): Promise<void> {
   const cleanupFailures = await stopEverything();
   if (cleanupFailures.length) throw new Error(`Cleanup failed: ${cleanupFailures.join(", ")}${failure ? `; proof failed during ${phase}` : ""}`);
   if (failure) throw failure;
-  console.log(`PASS (${Math.round((Date.now() - started) / 1000)}s): packed Code in two real browsers and two permitted destinations; shared choices converge with viewer authority intact, and a viewer's main view and accounts refuse every write. Genuine pinned OMP metadata yields an editable render-only starter whose routing and Models list are exactly the policy derivation; a conflicted local profile stays on show without revision-zero rebasing; configuration/metadata failures are not absence, and a failed model list is named with its retry and Models whatever the launch says. A press waits on the person only in a modal question that opens with focus on its title, moves nothing in the panel, keeps every panel key out, and answers only a deliberate press: never ↵ on its title, Tab then ↵ in one burst once it has settled, key repeat, a second click, a press in its first moments on a choice or the backdrop, a drag onto the backdrop or a press on its border; an assistive activation counts once it has settled, with no focus on the choice; Esc and a settled press on the backdrop are its way out, onto what had focus. A refused press asks the line's reason, why and the line's own fixes, then Close, 44px each on a coarse pointer, never shaking or speaking, and a fix runs from it; a refusal that changes closes it. A first Launch checks the models itself: its charge asks what it spends, by family, with every row and the machine locked behind it, and a double-click on Launch never approves it; the question stands inside the viewport and paints whole from 170 to 1440px, shifts nothing under pointer or focus, has 44px choices on a coarse pointer and does not animate under reduced motion; Cancel, Esc and the backdrop spend nothing and cancel no job; one Approve records the person's approval and spends once, and its refused spend saves nothing, stays said beside the launch, is said aloud and posted to the notice stack and is never retried on its own; Setup says how far the approval reaches, and ask first withdraws it so the next charge asks again; an account switch saves through the real changeAccounts CAS and keeps focus. A checked list recorded against the pinned OMP's artifact and the real catalog revision holds; an OMP upgrade alone, with the same accounts and Code, keeps the launch the step while Models says OMP was updated since, and a republished list that drops a routed model makes Launch check the models first. The panel reads its inputs again on its own when shown again, never while an edit is unsaved (a changed row, a named pool, until saved or discarded), a step runs, a sheet or a question is open, and once that ends. Tiered usage windows are rows of their own that leave Claude neither tight nor maxed, and no reset is clipped where the usage grid turns to two columns. The lead row's only box toggles by a press and Space with focus kept on it, survives a lead change, is disabled under Mixed and moves no word of the row; a struck lead or box says why, and a lead whose lane on the box's side cannot run lands on its other. Models, from More with focus on its way back, shows the list as ladders whose rungs say their ids and prices only in the readout, walks them as one roving Tab stop, and offers one next action that follows the step: check models, the checking hold a double-click cannot pass, a charge asked over the sheet with Approve, the sheet still waiting behind it and painting whole from 170 to 1440px, approved only by one deliberate press, which records the approval, measuring per provider, checked with what it left out (Spark, by OMP's spark quota class, retired) and posted to the notice stack, back to code and, after ask first, check again, whose question Esc cancels; a pasted list is refused until it is one, staged by one press (initializing an absent workspace once, never over a competing first save), discarded at its revision, or used by promoting exactly its review. A person's checks reach every workspace they open: after their first Approve and launch records the approval and the press goes on to review and launch, a first check elsewhere spends within it without asking, and one that narrows the profile stops the press on a question naming what it changed, before any review, whose Launch reviews and launches it; a workspace with the same account pool adopts their kept check with no inventory or spend, on a first Save & launch press that goes on to the launch and, once set up, on its own, Models saying it is checked and nothing reviewing the launch until it is pressed; a workspace never set up is never checked on its own; once the accounts change under a list that passed a check, Launch stays ready and launches while the check renewing it runs in the background within the approval; a renewal whose benchmark is refused is said in Models only, never posted or announced, beside a launch still ready, and is never retried on its own; and Setup's ask first cancels a renewal spending under the approval at its owner, which writes nothing and starts nothing again. Setup is one checklist whose rows say what they need, pointing at the first unready one: another machine where OMP is absent, then each native review (Esc back onto the next action, nothing approved; sessions request both OMP's launch and its harness), OMP's folder job by either route, refused, and the owner's classifier reviewed by the real server before its configuration, refused; its facts say every check asks before it spends while nothing is approved. More and its Models item mark a staged list exactly when it waits beside the active one, and a staged-only workspace's launch opens Models on it. Profile and account drafts survive destinations, sheets, the accounts' management and a reload; own account edits never conflict with an unsaved edit while a foreign profile write does; a save is refused for a lead no account serves; a writer without a canvas saves, posting that to the notice stack, never reading launching…, and is told why launching waits, never read-only. From 170 to 1440px no view or sheet overflows, cuts or collides text, no route runs past the routing pane and More's menu stays inside the panel; pointing and focus shift nothing in a view or a sheet; More is a menu button by pointer and keyboard; keys stay panel-local and never act from a sheet, a question or an open machine list, More menu or session drum; arrival keys reach the rows or take the launch's step; a refused keyboard step says why; the wheel steps only focused or rested rows; coarse targets are 44px in views and sheets, which hide their key line; reduced motion animates nothing and leaves no sheet duration. Nothing reviews a launch while the panel sits idle and its observations refresh: one press reviews the session and goes on to launch it, reading launching… throughout (saving… first for Save & launch) and Launch again after a refusal, which is said aloud and posted to the notice stack, the next one in its place; a press whose own review shows an account pool the panel did not show asks whether to launch what will run, a press on its Launch it in its first moments launching nothing, its Not now launching nothing so the next press reviews again, and its Launch it launching that review without another; locked during a launch, the machine stays the Tab stop after it; skills, automation, refused launch, resume and session correlations (one row per folder with its drum, re-read on refresh) stay gated at their native owners, native permission and folder readiness stay review-only, and no native approval, terminal or provider request is made. A sponsor's one press has OMP review the session, then registers Code's Agent and creates its Run at the real doors; the machine's refused launchRun cancels the Run and the same press goes on to the reviewed session, as every later press there does and as a press does where OMP's harness is not enabled. Fixture Runs say their activity, a lease to 24 of 24, renewal due and detached, and one square on the Sessions tab; their dials go pending, queued as next, confirmed, clamped, not served, unanswered then sent again, and forbidden, and a starting or detached Run's dials send nothing; ←→ settle before one send and a press within that settle sends only itself, ↵ and Space send at once, ↑↓ cross Runs; send again keeps the said line whole on a coarse pointer; a pointed word, lease or activity moves nothing, reduced motion stills every mark, and from 170 to 1440px nothing overflows. Every preparation and resume is refused here, so a successful launch or resume, and its "Launched on" or "Resumed on" notice and announcement, is never reached.`);
+  console.log(`PASS (${Math.round((Date.now() - started) / 1000)}s): packed Code in two real browsers and two permitted destinations; shared choices converge with viewer authority intact, and a viewer's main view and accounts refuse every write. Genuine pinned OMP metadata yields an editable render-only starter whose routing and Models list are exactly the policy derivation; a conflicted local profile stays on show without revision-zero rebasing; configuration/metadata failures are not absence, and a failed model list is named with its retry and Models whatever the launch says. A press waits on the person only in a modal question that opens with focus on its title, moves nothing in the panel, keeps every panel key out, and answers only a deliberate press: never ↵ on its title, Tab then ↵ in one burst once it has settled, key repeat, a second click, a press in its first moments on a choice or the backdrop, a drag onto the backdrop or a press on its border; an assistive activation counts once it has settled, with no focus on the choice; Esc and a settled press on the backdrop are its way out, onto what had focus. A refused press asks the line's reason, why and the line's own fixes, then Close, 44px each on a coarse pointer, never shaking or speaking, and a fix runs from it; a refusal that changes closes it. A first Launch checks the models itself: its charge asks what it spends, by family, with every row and the machine locked behind it, and a double-click on Launch never approves it; the question stands inside the viewport and paints whole from 170 to 1440px, shifts nothing under pointer or focus, has 44px choices on a coarse pointer and does not animate under reduced motion; Cancel, Esc and the backdrop spend nothing and cancel no job; one Approve records the person's approval and spends once, and its refused spend saves nothing, stays said beside the launch, is said aloud and posted to the notice stack and is never retried on its own; Setup says how far the approval reaches, and ask first withdraws it so the next charge asks again; an account switch saves through the real changeAccounts CAS and keeps focus. A checked list recorded against the pinned OMP's artifact and the real catalog revision holds; an OMP upgrade alone, with the same accounts and Code, keeps the launch the step while Models says OMP was updated since, and a republished list that drops a routed model makes Launch check the models first. The panel reads its inputs again on its own when shown again, never while an edit is unsaved (a changed row, a named pool, until saved or discarded), a step runs, a sheet or a question is open, and once that ends. Tiered usage windows are rows of their own that leave Claude neither tight nor maxed, and no reset is clipped where the usage grid turns to two columns. The lead row's only box toggles by a press and Space with focus kept on it, survives a lead change, is disabled under Mixed and moves no word of the row; a struck lead or box says why, and a lead whose lane on the box's side cannot run lands on its other. Models, from More with focus on its way back, shows the list as ladders whose rungs say their ids and prices only in the readout, walks them as one roving Tab stop, and offers one next action that follows the step: check models, the checking hold a double-click cannot pass, a charge asked over the sheet with Approve, the sheet still waiting behind it and painting whole from 170 to 1440px, approved only by one deliberate press, which records the approval, measuring per provider, checked with what it left out (Spark, by OMP's spark quota class, retired) and posted to the notice stack, back to code and, after ask first, check again, whose question Esc cancels; a pasted list is refused until it is one, staged by one press (initializing an absent workspace once, never over a competing first save), discarded at its revision, or used by promoting exactly its review. A person's checks reach every workspace they open: after their first Approve and launch records the approval and the press goes on to review and launch, a first check elsewhere spends within it without asking, and one that narrows the profile stops the press on a question naming what it changed, before any review, whose Launch reviews and launches it; a workspace with the same account pool adopts their kept check with no inventory or spend, on a first Save & launch press that goes on to the launch and, once set up, on its own, Models saying it is checked and nothing reviewing the launch until it is pressed; a workspace never set up is never checked on its own; once the accounts change under a list that passed a check, Launch stays ready and launches while the check renewing it runs in the background within the approval; a renewal whose benchmark is refused is said in Models only, never posted or announced, beside a launch still ready, and is never retried on its own; and Setup's ask first cancels a renewal spending under the approval at its owner, which writes nothing and starts nothing again. Setup is one checklist whose rows say what they need, pointing at the first unready one: another machine where OMP is absent, then each native review (Esc back onto the next action, nothing approved; sessions request both OMP's launch and its harness), OMP's folder job by either route, refused, and the owner's classifier reviewed by the real server before its configuration, refused; its facts say every check asks before it spends while nothing is approved. More and its Models item mark a staged list exactly when it waits beside the active one, and a staged-only workspace's launch opens Models on it. Profile and account drafts survive destinations, sheets, the accounts' management and a reload; own account edits never conflict with an unsaved edit while a foreign profile write does; a save is refused for a lead no account serves; a writer without a canvas saves, posting that to the notice stack, never reading launching…, and is told why launching waits, never read-only. From 170 to 1440px no view or sheet overflows, cuts or collides text, no route runs past the routing pane and More's menu stays inside the panel; pointing and focus shift nothing in a view or a sheet; More is a menu button by pointer and keyboard; keys stay panel-local and never act from a sheet, a question or an open machine list, More menu or session drum; arrival keys reach the rows or take the launch's step; a refused keyboard step says why; the wheel steps only focused or rested rows; coarse targets are 44px in views and sheets, which hide their key line; reduced motion animates nothing and leaves no sheet duration. Nothing reviews a launch while the panel sits idle and its observations refresh: one press reviews the session and goes on to launch it, reading launching… throughout (saving… first for Save & launch) and Launch again after a refusal, which is said aloud and posted to the notice stack, the next one in its place; a press whose own review shows an account pool the panel did not show asks whether to launch what will run, a press on its Launch it in its first moments launching nothing, its Not now launching nothing so the next press reviews again, and its Launch it launching that review without another; locked during a launch, the machine stays the Tab stop after it; skills, automation, refused launch, resume and session correlations (one row per folder with its drum, re-read on refresh) stay gated at their native owners, native permission and folder readiness stay review-only, and no native approval, terminal or provider request is made. A sponsor's one press has OMP review the session, then registers Code's Agent and creates its Run at the real doors; the machine's refused launchRun cancels the Run and the same press goes on to the reviewed session, as every later press there does and as a press does where OMP's harness is not enabled. Fixture Runs say their activity, a lease to 24 of 24, renewal due and detached, and one square on the Sessions tab; their dials go pending, queued as next, confirmed, clamped, not served, unanswered then sent again, and forbidden, and a starting or detached Run's dials send nothing; ←→ settle before one send and a press within that settle sends only itself, ↵ and Space send at once, ↑↓ cross Runs; send again keeps the said line whole on a coarse pointer; a pointed word, lease or activity moves nothing, reduced motion stills every mark, and from 170 to 1440px nothing overflows. A person's first open offers the tutorial in a modal question with focus on its title once the generator shows the profile, and Skip, Esc or a settled press on its backdrop marks it seen in their own record on the server, never the browser, so neither a reload nor another workspace offers it again; every other scenario's people have seen it. Take the tour walks the rows, readout, Defaults, routing, usage, machine, launch, Accounts, Sessions and More, 1 of 10 to 10 of 10, by ↵, →, ← and a press, with its ring around each control at rest and focus on each step's Next, and a held key steps once; a word tried in the rows and the accounts opened go on by themselves, a step waits unseen while More's menu is open or another view hides its control and takes no focus when shown again, Back onto the launch from the accounts brings the generator back and stays where Back put it, Done and Esc end it with focus on More, where a second ↵ opens the menu, More replays it from the sessions and the shortcuts name its keys; from 170 to 1440px its card paints whole inside the panel beside its control and nothing in the panel moves as it appears, moves or goes, reduced motion leaves nothing in it to animate, its choices are 44px on a coarse pointer, and it launches, spends, asks and saves nothing, the tried word being an unsaved edit Revert puts back. Every preparation and resume is refused here, so a successful launch or resume, and its "Launched on" or "Resumed on" notice and announcement, is never reached.`);
 }
 
 await run();
diff --git a/plugins/test/decision-model.test.ts b/plugins/test/decision-model.test.ts
index 6abed71..42abd20 100644
--- a/plugins/test/decision-model.test.ts
+++ b/plugins/test/decision-model.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { answer, decisionFor, type Decision, type DecisionFacts } from "../code/generator/decision-model.ts";
+import { answer, decisionFor, tutorialOffer, type Decision, type DecisionFacts } from "../code/generator/decision-model.ts";
 import type { GateRefusal } from "../code/generator/launch-step.ts";
 import { refusalView, type StatusFacts, type Vocabulary } from "../code/generator/statement-model.ts";
 
@@ -80,3 +80,9 @@ describe("what answering does", () => {
     }
   });
 });
+
+describe("the tutorial's offer", () => {
+  test("taking the tour is its first choice and never its way out, which Esc and the backdrop take", () => {
+    expect(does(tutorialOffer())).toEqual(["tour", "dismiss"]);
+  });
+});
diff --git a/plugins/test/tutorial-model.test.ts b/plugins/test/tutorial-model.test.ts
new file mode 100644
index 0000000..68a6ca3
--- /dev/null
+++ b/plugins/test/tutorial-model.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import { nextTutorialStep, previousTutorialStep, tutorialPlace } from "../code/generator/tutorial-model.ts";
+
+describe("the tutorial's walk", () => {
+  // Five steps, the second and the fourth not shown now (another layout puts them in tabs the panel does not show).
+  const shown = [true, false, true, false, true];
+
+  test("it walks only the steps the panel shows, and ends past the last", () => {
+    expect(nextTutorialStep(shown, -1)).toBe(0);
+    expect(nextTutorialStep(shown, 0)).toBe(2);
+    expect(nextTutorialStep(shown, 2)).toBe(4);
+    expect(nextTutorialStep(shown, 4)).toBeNull();
+    expect(previousTutorialStep(shown, 4)).toBe(2);
+    expect(previousTutorialStep(shown, 0)).toBeNull();
+  });
+
+  test("where it stands counts only the steps shown, and a step not shown has no place", () => {
+    expect(tutorialPlace(shown, 2)).toEqual({ position: 2, count: 3 });
+    expect(tutorialPlace(shown, 4)).toEqual({ position: 3, count: 3 });
+    expect(tutorialPlace(shown, 1)).toBeNull();
+  });
+});
diff --git a/plugins/test/workflow.test.ts b/plugins/test/workflow.test.ts
index 17a1389..176d33f 100644
--- a/plugins/test/workflow.test.ts
+++ b/plugins/test/workflow.test.ts
@@ -568,6 +568,33 @@ test("stored checks and approvals are bound to their principal: a record naming
   await expect(f.workflow.approveChecks(1, 5)).rejects.toThrow("code_checks_confined");
 });
 
+test("the tutorial is seen once per person: recorded when first seen, kept as it was, and never another person's", async () => {
+  const f = verificationFixture();
+  expect(await f.workflow.readTutorial()).toEqual({ keeps: true, seenAt: null });
+  expect(await f.workflow.seeTutorial()).toEqual({ keeps: true, seenAt: 10_000 });
+  // A second mark, from another tab or device, leaves the first record as it was.
+  const key = [...f.store.keys()].find(entry => entry.startsWith("tutorial/"))!;
+  f.store.set(key, JSON.stringify({ ...JSON.parse(f.store.get(key)!), seenAt: 5_000 }));
+  expect(await f.workflow.seeTutorial()).toEqual({ keeps: true, seenAt: 5_000 });
+  // Another person has not seen it; an agent and a confined sign-in keep no record, so their browser keeps it instead.
+  f.caller.principal = { id: "reader", kind: "human", name: "Reader", color: "#abcdef" };
+  expect(await f.workflow.readTutorial()).toEqual({ keeps: true, seenAt: null });
+  f.caller.principal = { id: "agent-1", kind: "agent", name: "Agent", color: "#654321" };
+  expect(await f.workflow.seeTutorial()).toEqual({ keeps: false, seenAt: null });
+  f.caller.principal = { id: "reader", kind: "human", name: "Reader", color: "#abcdef" };
+  f.caller.containerScope = target.containerId;
+  expect(await f.workflow.seeTutorial()).toEqual({ keeps: false, seenAt: null });
+  f.caller.containerScope = null; f.caller.ceiling = true;
+  expect(await f.workflow.seeTutorial()).toEqual({ keeps: false, seenAt: null });
+  f.caller.ceiling = false;
+  expect(await f.workflow.readTutorial()).toEqual({ keeps: true, seenAt: null });
+  // A record filed under the reader's key that names another principal is corruption, never the reader's.
+  await f.workflow.seeTutorial();
+  const readers = [...f.store.keys()].find(entry => entry.startsWith("tutorial/") && entry !== key)!;
+  f.store.set(readers, f.store.get(key)!);
+  await expect(f.workflow.readTutorial()).rejects.toThrow("code_invalid_configuration");
+});
+
 test("a check derived under another budget is never adopted: the workspace checks for itself", async () => {
   const f = verificationFixture();
   await (await prepared(f, 0)).confirm(preview);