@habemus-papadum/aiui-viz

@habemus-papadum/aiui-viz

Reactive scientific-visualization utilities for agent-written frontends — the reusable core extracted from the morphogen demo. Built for SolidJS 2.0 (beta) and its async-first graph: every asynchronous value is a cell, long work streams with progress and real cancellation, and the split between durable state and disposable logic is made explicit so hot-module reloading actually works during a tight agent iteration loop.

This is the library layer of the repo's frontend-for-agents methodology. The long-form write-up lives in the three-level guide at docs/guide/frontend-for-agents; the demo's PRINCIPLES.md and the gallery demo itself are the worked example that every utility here was paid for building.

Plumbing and porcelain

The library has two layers (one package for now; the seam is deliberate):

• Plumbing — the dataflow semantics: cell, the worker protocol, durable, the agent toolkit. Framework-adjacent, opinion-light, everything else builds on it.
• Porcelain — the notebook-page conveniences built on the plumbing: the Plot bridge (/plot), the page chrome + math + theming (/site). Each porcelain surface lives on its own subpath so its heavyweight dependency (@observablehq/plot, katex) stays an optional peer that plumbing consumers never pay for. Porcelain grows by extraction: a pattern proves itself in a reference notebook first, then moves here (the repo's style guide tracks which patterns are where).

What's in it

Install

npm install @habemus-papadum/aiui-viz solid-js @solidjs/web
# only if you use the /plot subpath:
npm install @observablehq/plot

solid-js and @solidjs/web are peers (>=2.0.0-beta.0 <2.0.0-experimental.0); @observablehq/plot (^0.6) is an optional peer, needed only for @habemus-papadum/aiui-viz/plot.

A minimal cell + CellView

import { createSignal } from "solid-js";
import { cell, CellView, cellGraph } from "@habemus-papadum/aiui-viz";

// A durable input; the graph built over it is disposable.
const [query, setQuery] = createSignal("gray-scott");

const { graph } = cellGraph(() => {
  // An async cell. A superseded run (query changes) aborts via ctx.signal,
  // and the previous value stays on screen, dimmed, until the new one lands.
  const results = cell(query, async (q, ctx) => {
    const res = await fetch(`/search?q=${encodeURIComponent(q)}`, { signal: ctx.signal });
    return (await res.json()) as string[];
  });
  return { results };
});

function Results() {
  return (
    <CellView of={graph.results} label="searching">
      {(value) => <ul>{value().map((r) => <li>{r}</li>)}</ul>}
    </CellView>
  );
}

CellView emits stable class names (cell-body, cell-body-loading, cell-pending, cell-error, progress-stripe, progress-stripe-fill, and btn/btn-outline on the retry button) — style them in your app. The demo's styles.css is a worked dark-surface example.

See it in use

The gallery demo is a Gray-Scott reaction-diffusion laboratory built entirely on these utilities — a WebGL sim, a cancellable worker analysis pipeline, streaming downloads, Plot charts, and a window.__morpho agent tool surface. Read PRINCIPLES.md for the methodology and the per-principle bugs each utility was designed against.