statechart

# Statechart The chart shows what an app's user sees. A PM reads it to decide whether that behavior is right. Label each state with what is on the screen, such as "Paying". Label each step with what the user does or sees happen, such as "tap Pay" or "the charge goes through". Keep variable and action names out of labels. The scripts call this user the reader, as in `readerActions` and reader steps. Resolve this installed skill's absolute directory, then run `node "<skill dir>/scripts/statechart.mjs" --help` for the commands and for how to read a chart. Keep the working directory at the approved workspace. Copy inputs into an approved session scratch folder outside the target repo, and pass their absolute paths. Do not edit the original spec or chart. Node.js runs the bundled scripts. Model checking also needs Java 11 or later and `tla2tools.jar`. Set `TLA2TOOLS` to the jar's absolute path and, if needed, `JAVA` to the Java executable using the actual host shell. Check that Java runs before starting. Missing tools are a blocker, not permission to download or install them. Ask for the required approval and report the missing prerequisite if it is unavailable. Use a fresh `--out` directory for each run. A rerun replaces the entire generated output folder, including earlier PNGs, so reusing a folder requires approval to replace those artifacts. `summary.json` records the generated-file inventory; unlisted nested files, directories and symlinks block replacement. Older output without that inventory needs a fresh folder. Mapping `.mjs` files execute as code. Read them before running, and do not execute an untrusted mapping. PNG rendering is optional and needs an already available Mermaid CLI and its browser runtime. `--png` uses `npx --no-install` and must not install dependencies. Obtain approval before acquiring missing software. When rendering is unavailable, keep the Mermaid sources and report that PNGs were not inspected. Use the host's actual image-reading capability to inspect rendered PNGs. Do not claim visual verification from Mermaid source alone. The bundled PNG launcher requires a POSIX `npx` executable. On Windows, hand off Mermaid sources or use a separately approved renderer instead of assuming the `.cmd` launcher works. CI covers the dependency-free subset on Windows and the TLC-backed suite on Linux and macOS. ## Pick the direction Use `from-spec` when a TLA+ model exists or the code is concrete enough to model. Use `from-chart` when there is no model and the PM should agree on the behavior before anyone writes or changes the code. If the code already has a TLA+ spec, start from a copy of that spec. Add the variables the user sees, and keep the spec's existing invariants. To audit the code against that spec, make the copy model what the code does, and pass the spec unchanged as `--against`. Check it with the config that its authors say it passes, and pass that config as `--against-config` unless it has the spec's file name. One mapping labels both models, so label states and steps only from variables that both have. In a code model or a new spec, tie every variable and action to code that a reviewer can open, and take its name from that code. Make each action one indivisible step in the code. Put the file and line of the code that checks each condition of an action in a comment on that condition, as in `\* pay.ts:120`. ## Spec to chart 1. Choose the chart's states. When the PM cares about something the screen does not show, such as a second charge while the screen still says "Paying", name the state "Paying, charged twice". Start with few states, and split a state only when the split separates two bugs. 2. Write each rule the PM agrees to as one invariant, with the PM's sentence as its comment. Each rule names what the user sees on a screen or gets from a request, and the code that can change it. Refuse a rule that lacks one of them. For a rule that applies once everything settles, define `Settled == ~ENABLED System`, where `System` is the disjunction of the actions the user does not take. Report each broken rule as a bug. Never weaken a rule to make the chart pass. 3. Run `from-spec`, then fill in the mapping file it writes. Put the labels in `state` and `step`, and list the user's actions in `readerActions` by action name. When two bugs end on the same screen through different code paths, add `cause` and make it name the code path. To color the states by what the PM cares about, such as "Toast shown", return that group from `group`. The legend names the groups, and states that break a rule still get a red border. 4. If there is an open fix, model it from the code and pass that model as `--fixed`. 5. When the renderer and image-reading tools are available, render each chart with `--png` and look at every PNG. Check that each numbered path reads in order. If a label reads like code, fix `state` or `step` and run the command again. Otherwise hand off the Mermaid source with the rendering or inspection blocker. 6. Replay each bug's story against the real code, as a test or a live repro, one step per model action. Drive only entry points that a user or client reaches, and assert only what they see. A test that asserts a flag that it sets, or that searches the source text, proves nothing. When a run proves part of the story and reading the code proves the rest, say which part each proves. When the test copies code that it cannot import, give the commit and line range of the copy, and list what the copy leaves out. If a bug does not reproduce, assume the model is wrong until you show otherwise. Fix the model, not the rule. ## Chart to spec 1. Draw the chart the PM agrees to. Use one region for each thing that changes independently, such as the connection and the sync badge. Add one `%% never` line per rule, with the PM's sentence. Draw "the app closes" as an edge to the state the user sees next. 2. Run `from-chart`. If a rule breaks, the agreed chart has a design bug. Take the bug to the PM. 3. Add the real code's guards and variables to the spec that `from-chart` wrote, and run `from-chart` again. For each difference it prints, ask the PM whether the code is wrong or the chart needs a correction. ## Hand off Give the PM the PNG and the Mermaid source of each chart. Add one line per bug with the rule it breaks, its steps as the chart numbers them, whether it reproduced, and whether the open fix fixes it. With `--against`, also say whether the spec already lists it: in the configs that `stories.md` names, in the spec's notes on what the model leaves out, or not at all. Do not report that a rule holds while the command lists conditions with no file and line. Take every count you quote from `summary.json`. Attach `stories.md` and the command that regenerates everything. Say what the model leaves out. Use available host attachments or local artifact paths. Creating charts does not authorize changing product code, posting comments, opening a PR, or uploading files. If an explicitly requested external post contains agent-authored text, append `- Generated with AI 🤖` once at the payload boundary.