The frequency front end, assessed.
Seventeen renders across two folders were opened in a real browser at 1440 × 900, driven with the D key or their own inject-drift control, and measured frame by frame. The question was not which one looks best. It was which pieces make a workflow's health legible at a glance and still read as an instrument, not decoration. This page gives the verdict, the evidence, the signal model that ties the physics to real harness telemetry, and the composition for the next iteration.
Verdict: yes, with one substitution.
Your instinct is right that the product is the Liquid Spine shell (011 in the sketches folder) with the Resonant Spine waveguide (015 in the liquid mockups) as its instrument. The one place I disagree is the node renderer. The particle-in-a-glass vessels barely move at node size: the measured motion on the Maker vessel went from 0.55 to 3.28 on a 0–255 scale, which a person cannot see from across a room. The Fourier blob from 012, whose spikiness is literally a sum of named harmonics, is both more visible and more honest. Put that blob inside the glass-sphere skin and you keep the look you like with a renderer that carries meaning.
011 · Liquid Spine (shell + state contract)
Goal rail, eight-stage spine, decision packet beneath, right rail with budget, gates, per-agent disturbance and receipts, org strip below. The state contract is the right idea: every visual reads from one object and repaints on tick. This is the Fable Workroom in beta.2.
015 · Resonant Spine (waveguide)
The connector between stages is the instrument: a traveling packet at the active stage, a standing wave between two stages when a handoff is rejected, a beat on an unresolved conflict, jitter that grows with the square of tension, and a damping band that sweeps left to right when governance intervenes. Measured 10.8 to 31.0 on the spine canvas. Replaces 011's static wires.
012 · Frequency Organism (harmonic blob + spectrum)
One closed polar curve whose radius is base plus a sum of sine harmonics. Low orders hold the tune, high orders hold the drift, and the spectrum bars are a real diagnostic once each harmonic is assigned a cause. Its calm state is too busy today (it breathes at 45 on the motion scale before any drift), so the rest state must be nearly still.
014 · Fleet Grid (scale view)
Thirty cells, each a small oscillator with name, Hz and a meter, plus a coherence gauge and filters. The cascade spreads by grid distance and damping sweeps by column. The strongest measured response of the set (cells from 2–5 up to 31). This is the Goals page once a customer has more than six live goals.
010 · Liquid Metaballs (reactor)
The biggest wow: motion 0.06 calm to 12.4 in a storm, with tool calls arriving as satellites that hit the goo and ripple. It is also the only engine that dropped frames (36–40 fps headless at 1440 px). Use it as the Headquarters ambient view at reduced resolution, not as the daily work surface.
009 · Drift Spectrum (detector dictionary)
The waves are CSS-driven and cannot be measured per node, but its detector rules table (conflict wave, loop beat, hot channel, phase clash, standing wave, interference) and the goals-as-waveforms list are the vocabulary the whole product should use. Keep the words, retire the render.
010 sketch · Agent Constellation (vessel skin)
Pure CSS glass spheres, so no per-frame physics and two layout bugs, but the sphere recipe (top-left highlight, bottom-right shade, rim) is the nicest container in the set. Keep the CSS skin, drop the orbit scene.
011 mockup · Orb Constellation, 013 · Tide & Lanterns
Both are handsome and both fail the across-the-room test: motion 0.45 to 1.2 and 0.32 to 0.96. Orbit trails turn to spaghetti under drift; the lanterns' wakes are too subtle. The per-agent Hz sparkline cards from the orb render are worth keeping as a component.
Motion evidence, calm against drift.
Method: each page was loaded headless in Chrome at 1440 × 900 with a 2.5 s warm-up. Every canvas was sampled ten times per second at 48 × 48 and the mean absolute colour change between samples was recorded (0 = frozen, 255 = every pixel flipping). Then the D key and the render's own drift control were fired, the page ran 2 s, and the sample repeated; then the restore control, and two more samples. Numbers below are the busiest canvas on each page. Thumbnails are crops of the actual frames.
011 · Liquid Spine
The layout is right and the state contract is right. The drift is not legible: the vessels are 56 px, the particles are 2 px, and severity shows mostly as colour. The inspector card is visible on load and sits on top of the org strip (bug 1). Customer names appear in the goal rail (bug 5).
015 · Resonant Spine
The best functional metaphor in either folder. Coherence 77 % to 40 %, surface tension HOLDING to BREAKING, stage frequency 0.86 Hz to 2.57 Hz, phase IN PHASE to STROBING, and the receipt feed logs the storm as a row. The handoff-rejected scenario draws a dashed standing wave between the two stages, which is exactly what a bounced audit should look like. Uses unseeded random jitter (bug 4).
012 · Frequency Organism
The only render where the shape is a formula: radius equals base plus the sum of eight sine harmonics. The drift scenarios are distinct and named: a dashed interference ghost for an evidence conflict, an echo trail for an agent repeating a completed stage, two nuclei fighting for two writers on one canon row. The calm state moves more than the drift state on the motion scale because the body breathes hard at rest; that has to be turned down so drift reads as a change (bug 3).
014 · Fleet Grid
Cells show name, Hz and a meter; the drawer shows the stage pipeline, drift drivers and a history sparkline with the 0.65 threshold drawn. Cascade infection spreads by Manhattan distance on the grid, damping sweeps by column with a 320 ms stagger. Thirty-two canvases at 62 fps is a good sign for cost.
010 · Liquid Metaballs
The largest calm-to-drift contrast of anything measured, and the only one with a story a non-technical owner gets in one second: calls fly in and hammer the blobs. The SVG goo filter over a 0.62-scale canvas is what costs the frames. In Electron this belongs on the Headquarters page as the 2D ambient mode, drawn at half resolution and paused when the window is hidden.
009 · Drift Spectrum
Not measurable per canvas (the blob is CSS, the waves are SVG paths rebuilt each frame). What earns its place is the console strip and the three tables: what breaks the frequency, detector rules, resolution. A 404 on load for a missing asset (bug 2).
010 sketch · Agent Constellation, 011 mockup · Orb Constellation, 013 · Tide & Lanterns
The glass-sphere CSS from the sketch is the container to keep. The orbit scenes lose legibility as soon as more than five agents exist, which the Fable roster does (Chief, four PMs, 22 profiles). The per-agent Hz cards at the bottom of the orb render are a good component; the lanterns are a screensaver.
| Render | Canvases | fps | Calm | Drift | Recovering | Settled | Legible from 3 m | Decision |
|---|---|---|---|---|---|---|---|---|
| 015 Resonant Spine | 7 | 62 | 10.8 | 31.0 | 31.9 | 10.6 | yes | take |
| 014 Fleet Grid | 32 | 62 | 2–5 | 31 | 20–30 | 2–6 | yes | take |
| 012 Frequency Organism | 3 | 62 | 45.7 | 37.7 | 40.5 | 40.6 | shape yes, change no | take, quiet the rest state |
| 011 Liquid Spine (sketch) | 14 | 62 | 1.3 | 3.6 | 2.0 | 1.3 | no | take shell, swap renderer |
| 010 Liquid Metaballs | 3 | 36–40 | 0.06 | 28.6 | 1.2 | 0.05 | yes | adapt, ambient only |
| 009 Drift Spectrum (sketch) | 0 | 62 | CSS and SVG, not sampled | readouts yes | adapt, vocabulary | |||
| 010 Agent Constellation (sketch) | 0 | 62 | CSS animations (6) | partly | adapt, skin | |||
| 011 Orb Constellation | 6 | 62 | 2.7 | 6.8 | 2.5 | 2.5 | no | leave, keep Hz cards |
| 013 Tide & Lanterns | 1 | 62 | 0.32 | 0.96 | 2.0 | 0.36 | no | leave |
The eight non-liquid sketches (001–008) were opened and screenshotted too. None animate; they are information-architecture references, and 004 Flow Spine and 008 First Quest are already reflected in the Fable Workroom and onboarding. Raw data: results.json and 51 full-size frames are in the session scratch folder and can be filed on request.
Bugs found while driving them.
Inspector card visible on load
The agent inspector renders as an empty panel at the bottom centre before any vessel is clicked and overlaps the org strip. The open state needs a class gate, and the panel needs `hidden` until selected.
404 on load
One resource fails to load (a font or image path). Harmless in a mockup, fatal under the app's `default-src 'self'` policy.
Rest state louder than drift
The organism breathes at 45 on the motion scale while calm and 38 in drift. Drift must be a change in motion, not just a change in colour. Rest amplitude should be a tenth of that.
Unseeded randomness
Jitter uses `Math.random()`, so two machines never draw the same frame and a snapshot test cannot exist. A seeded hash noise driven by time gives the same look and is testable.
Customer names in mockups
Goal rails carry real customer and project names. Fine in a sketch, but nothing from these files can be pasted into the product repo as is: the CI grep for customer names fails the build.
Metaball frame rate
36–40 fps headless at 1440 × 900 from the SVG goo filter. Acceptable for an ambient page, not for the surface an owner keeps open all day next to a PDF.
The signal model: what the physics means.
Your framing is the design: harmony is a stable fundamental; disruption is drift and deviation from it. The mockups all fake this with one global tension slider. The product cannot. Every visual property has to be derived from something the journal already records, and every readout has to say whether it is measured or inferred. This table is the contract between the engine and the renderer. Nothing on screen may oscillate without a row here.
| Visual | Meaning | Derived from (Fable journal and snapshot) | Label |
|---|---|---|---|
| fundamental f₀ | The expected cadence of a stage: how often a healthy run of this template makes a call at this step. | Median calls-per-minute of completed runs on the same template and step, falling back to the template's step count over its typical duration; fixture runs excluded. | measured |
| actual f | The cadence right now. | Egress rows with purpose model-call or vendor-cli for this run over the last 60 s; Hz shown on the stage. | measured |
| drift index d (0–1) | How far the workflow is from its own harmony. Below 0.35 in tune, 0.35–0.7 drifting, above 0.7 out of tune. | Weighted sum: cadence deviation |log₂(f/f₀)| (0.35), retry ratio from attempts with state outcome_unknown or failed (0.20), open evidence conflicts on the packet (0.15), handoff rejections and needs_attention holds (0.15), spend burn versus the per-run cap (0.10), age of an owner hold (0.05). Eased per frame; never snaps. | inferred |
| trend | Slight drift trending back toward f₀ is good and shows as a damped envelope in green-gold. Drift growing shows as a driven envelope in magenta. | Sign and size of d now minus d five samples ago. Settling if falling, driven if rising, steady otherwise. | inferred |
| harmonics H1–H3 | The tune. Low orders carry the normal loop cadence and give the blob its calm breath. | Constant small amplitudes scaled by 1 − d. | measured |
| H4 · retries | Same step attempted again. | Attempts per step above one, last five minutes. | measured |
| H5 · tool-call storm | Calls far above f₀; the strobe. | Cadence deviation above 2× plus egress rows above the contract's maxCalls rate. | measured |
| H6 · handoff rejected | The wave bounced between two stages: a standing wave on the waveguide, a spike on both nodes. | Auditor verdict fail or owner "request changes" sending the run back a stage; the pair of stages becomes the standing-wave segment. | measured |
| H7 · evidence conflict | Two close frequencies that disagree; the node beats and a dashed ghost outline appears. | Packet assumptions or Veritas findings with two sources for one figure; cleared when the owner picks canon. | measured |
| H8 · budget burn | Spending faster than plan; the hot channel. | Spend meter estimated versus remaining on the run cap; a spend stop turns the node gold and freezes it. | measured |
| particles | Each dot is one call in the last window; speed is latency; colour is the route (local, key, vendor CLI, free lane). A particle escaping the vessel is a call outside the cap or blocked by the offline switch. | Egress rows per run: provider, model, bytes, outcome, egress_blocked events. | measured |
| standing wave · hold | Work waiting on a person: slow gold pulse, no travel. | Runs in held or needs_attention; goal status waiting_approval or waiting_evidence; age drives the pulse depth. | measured |
| echo trail | An agent repeating a completed stage: the loop. | Two attempts with the same purpose after a returned state on the same run. | measured |
| nuclei fight | Two writers on one canon row. | Two corrections or decisions on the same packet field inside the undo window. | measured |
| damping sweep | Governed recovery: an exponential envelope, never a snap. | Events spend_stopped, route_fallback, shadow return, retire, cancel, undo; sweep runs left to right across the spine. | measured |
| coherence % | The one number for the whole workflow, and the fleet average on the grid. | (1 − d) × 100, per goal; fleet coherence is the mean over live goals. | inferred |
| surface tension | HOLDING · STRAINING · BREAKING, the owner's word for it. | The maximum d across the stages of the goal. | inferred |
Two rules protect the honesty of the instrument. The renderer never invents motion: with no runs, every node is a still mirror and the readout says so. And inferred readouts are labelled, the same way the boardroom labels MEASURED, DOCUMENTED, AGENT-REPORTED and INFERRED claims.
Live playground: the model, not a slider.
Every mockup you have runs on one global tension value. This panel runs on the six inputs from the table above and derives everything else: the drift index, the trend, the eight harmonics, the particle count, the waveguide state and the words. Move one input and watch only its harmonic rise. Press a preset to see a whole situation. The rest state is deliberately almost still.
Composition for iteration 2.
The Fable shell keeps its routes and ids; the Workroom and Home get the instrument, Goals gets the grid, Headquarters gets the reactor beside the 3D world. Everything below reads from one FrequencyState object computed in the main process from the journal and pushed on the existing snapshot-changed channel, so the renderer never touches raw events.
Goals page · Fleet Grid (014)
Switches from the list to the grid at seven or more live goals. Cascade rendering is real: when a shared route or channel fails, the goals that depend on it heat by distance. Filters in tune / drifting / out of tune; drawer shows drivers and the history sparkline.
Headquarters · Metaball reactor (010)
The 2D ambient view beside the 3D world, drawn at 0.5 device pixels, satellites are real egress rows arriving. Pauses when the window is hidden. The 3D Headquarters, Boardroom and Floor stay as they are.
Phone companion
Coherence pill and goal mini-waves only, drawn from the projected FrequencyState. No canvases heavier than a sparkline; approvals stay the primary surface.
Performance budget
One requestAnimationFrame for the page, one canvas per region (spine, org strip, rail) rather than one per node, device-pixel ratio capped at 1.5, all motion paused on `document.hidden`, and a static spectrum-bar fallback under prefers-reduced-motion and on the fixture provider. Target: 60 fps on the Windows runner's software GPU with 30 goals.
Determinism and tests
Seeded time-hash noise instead of Math.random. Unit tests on the reducer: a fixture journal with a storm, a rejected handoff, a conflict and a spend stop must produce the expected d, trend and harmonics. A packaged smoke step injects a fixture storm and asserts the chip reads OUT OF TUNE, then reads IN TUNE after damping.
Language
All words in the string tables, EN and ES with key parity: en armonía, a la deriva, fuera de tono; sosteniendo, tensando, rompiendo. The physics vocabulary stays in the glossary drawer with the existing terms.
Iteration 2 plan (beta.2, one run).
You agreed to the counter-analysis recommendations and the added tests in one go, so they ride in the same run as the front end. Order matters: the reducer first, because every visual reads from it and the tests exist before a pixel is drawn.
- FrequencyState reducer in the main process: per goal, per stage, per agent; f₀ from template history; d, trend, harmonics, particles, waveguide segments, damping events; pushed with the snapshot. Unit tests with a fixture journal.
- Instrument renderers in the shared UI: HarmonicBlob (012, quiet rest state, seeded noise), Waveguide (015 packet, standing wave, beat, damping sweep), VesselSkin (010-sketch CSS), MiniWave (015 goal canvases), FleetGrid (014), MetaballField (010, half resolution). One rAF, one canvas per region, hidden-pause, reduced-motion fallback.
- Workroom and Home rebuilt on the 011 layout with the instrument; decision packet, reply-with-edit, Send via, undo unchanged underneath.
- Goals page grid mode at seven or more live goals; Headquarters gains the reactor tab beside the 3D world; companion gets the coherence pill and mini-waves in its projection.
- Counter-analysis items: evidence-mapping stage in setup with missing / supplied / owner-verified states; stale state on decision packets when a source refreshes; send reconciliation by provider message id before any retry; readiness report at the end of setup; opt-in website prefill.
- Tests added: unplug, spend stop before first call, packaged smoke below 1024 px, canon and customer-name guards, empty signing variables treated as absent, plus the storm smoke step above.
- Strings EN/ES for every new word; glossary entries; docs updated (tester guide gets one page: "reading the instrument").
- Release as 0.4.0-beta.2 through the existing workflow; tester folder refreshed; handoff log entry crediting each mockup by number.
Glossary
- Fundamental (f₀)
- The cadence a healthy run of this workflow keeps at this step. Harmony is staying near it.
- Drift index (d)
- One number from 0 to 1 for how far a workflow is from its fundamental. It is inferred from measured signals and always labelled as such.
- Trend
- Whether the drift is shrinking (settling, good even when non-zero), steady, or growing (driven, bad).
- Harmonic
- One sine term in the blob's outline. Low orders are the normal breath; each high order is assigned to one cause, so the spectrum bars read like a diagnosis.
- Waveguide
- The line joining the stages. Work travels along it as a packet; a rejected handoff traps a standing wave between two stages.
- Beat
- Two close frequencies interfering: the visual for two sources that disagree on one figure.
- Standing wave
- A wave that no longer travels. Either a rejected handoff or work waiting on the owner.
- Governed damping
- Recovery the harness is allowed to do on its own (throttle, re-route, stop spend). It only ever decays the oscillation; it never touches canon, budgets or holds.
- Coherence
- (1 − d) as a percentage. Fleet coherence is the mean across live goals.
- Surface tension
- HOLDING, STRAINING or BREAKING: the plain-language state, taken from the worst stage of a goal.
- Particle
- One call leaving the machine in the current window. Its colour is the route it took.