A research prototype in UI/UX: a mechanical bench for working with complex structures of meaning.
Knowledge tools usually store state and discard process: the reader of a finished document cannot see what was considered, what was refused, or what the conclusion actually stands on. This prototype inverts the arrangement. The operator works at a four-zone bench — a backlog of focuses on the right, an inventory of material on the left, a single focus at the centre, and a ledger beneath — and assembles meaning by closing typed lacunae (declared needs) with fitting pieces (facts and previously folded figures). Each admitted gesture is committed as an immutable tuple; the semantic graph is grown under the glass as a deterministic projection of the log, never edited directly. The result and the record of its assembly are the same artefact.
The bench follows a small set of axioms:
- Append-only. Nothing is deleted and nothing is updated in place. An error is answered by a compensating tuple, which reopens the lacuna but leaves the original bind on the record — dashed, visible, honest.
- Typed gestures. Every lacuna declares a tolerance (the kinds and tags it admits — its keyway); every piece presents a spike profile (its cut). A gesture that does not fit is refused before it can become a tuple. The refusal is shown; no tuple is recorded.
- Access, not copy. Binding a piece does not move or duplicate it. The lacuna receives a gate — a directed edge to the piece — and the piece remains monumental in the inventory, bindable again elsewhere.
- One focus at a time. The station holds a single focus; attention is a pipeline (backlog → station → folded figure), not a battlefield.
- Composition. A folded figure re-enters the inventory as a piece with its own spikes, and may close a lacuna of the next, larger focus.
- Projection, not storage. The visible bench, the flow graph and every
count are derived by
reduce(log). Time-travel isreduce(prefix); gestures are only possible at the head. - Determinism. The same log always yields the same projection and the same picture — layout included. No physics, no randomness, no model.
Requires Node.js ≥ 20.
npm install
npm run dev # → http://localhost:3000npm test # engine test suite (Vitest)
npm run build # production buildOpen the app, choose 01. Decision Brief, pull a focus from the backlog, and try to bind the trade-press column into the evidence lacuna — the bench will refuse it, and will tell you why. Then bind the incident summary, turn the key (press and hold), and watch the tuple land in the ledger and the graph grow under the glass.
src/
├── engine/ The Engine — pure TypeScript, no UI, no framework.
│ ├── contracts.ts Spikes, tolerances, fit() (the typing of meaning)
│ ├── types.ts Pieces, focuses, lacunae, the 8 gesture kinds, Tuple
│ ├── hash.ts FNV-1a 64 chain, canonical JSON, serialise/parse (JSONL)
│ ├── commit.ts validate() + commit() — the only doorway into the log
│ └── reduce.ts reduce(log) → workbench state + flow graph projections
├── scenarios/ A scenario is a *recorded prefix of a log*, replayed
│ through the same commit gate as live gestures.
├── store/ Zustand: the log, the viewing cursor, nothing else.
└── workbench/ The Viewport — React components of the bench.
Three properties are load-bearing:
- The log is physically primary. The UI dispatches gestures; state is
memoised
reduce(log). There is no other state of record. Undo does not exist; compensation does. - The hash chain (
prev→hash, FNV-1a 64) is an integrity and lineage device, deliberately not cryptographic — this is documented rather than implied. - Interchange is the log itself. Export writes JSONL, one tuple per
line. Import verifies the chain (
verifyChain) and replays semantics (replayCheck) before adoption; opening a bundled scenario uses exactly the same mechanism.
An ESLint boundary keeps src/engine free of React, Next.js and store
imports, so the Engine can be read — and cited — as the reference
implementation of the protocol.
The interface borrows the semiotics of the engineering drawing:
| Mark | Meaning |
|---|---|
| Dashed border | An open lacuna — a hypothesis, an absence |
| Solid border | A closed, committed element |
| Orange | The single accent: the live edge of attention (selection, resonance, the turn of the key) |
| Dashed grey edge | A compensated bind — annulled, never erased |
| Hexagon | A folded figure |
| Title block | Sheet, revision (head hash), operator, date |
Two materials only: sage drawing paper for the station, charcoal instrument panels for everything that serves it.
The prototype is fully client-side — no environment variables, no server state — and deploys to Vercel as a standard Next.js application: import the GitHub repository into Vercel and accept the defaults.
No AI is involved. Every node is should be placed by hand; every admitted gesture becomes a tuple in an append-only log; everything you see is a projection of that log. That is the whole experiment.
public/film/index.html is a three-minute WebGL
projection of this bench — an information journey through the Decision Brief
scenario: the refusal, the binds, a compensation, two folds, the three
projections (intent · decision · flow), and the field where personal figures
crystallise into a corporate pattern. One self-contained file — three.js
r128 inlined, a custom bloom pipeline, a fully procedural WebAudio score, no
external requests — so it opens straight from disk and deploys with the app
at /film.
The film obeys the axioms it depicts. Every frame is a pure function of the
clock: scrubbing the path-memory bar is reduce(prefix) for the eye. And
the ledger on screen carries genuine FNV-1a 64 hashes, computed by a
faithful port of src/engine/hash.ts over the same twenty tuples the demo
replay commits — every hash you can pause and read is real.
-
Gemini: Concept formulation
-
Claude Code / Fable 5: Development
MIT. The protocol the bench demonstrates is a cognitive primitive; the code is merely one possible viewport onto it.