@fatagnus/dink-ui-devtools

NATS transport bridge for the Dink semantic tree. Publishes tree snapshots and batched deltas over NATS subjects, enabling CLI inspection and remote action invocation.

Install

npm install @fatagnus/dink-ui-devtools

Peer dependency: @fatagnus/dink-semantic.

Quick Start

import { SemanticTreeManager } from '@fatagnus/dink-semantic/core';
import { SemTreeNATSBridge } from '@fatagnus/dink-ui-devtools';

const manager = new SemanticTreeManager({ app: 'my-app', version: '1.0.0' });
const bridge = new SemTreeNATSBridge(manager, natsConnection, 'my-app');
bridge.start();

// When done:
bridge.destroy();

How It Works

SemTreeNATSBridge subscribes to the SemanticTreeManager's event stream and:

1. Delta batching -- Buffers register/update/unregister events and flushes them as a single SemTreeDelta message every 16ms (one frame).
2. Snapshot requests -- Responds to NATS request/reply on the snapshot subject with the full SemTreeSnapshot.
3. Action invocation -- Listens for SemActRequest messages, invokes the action on the tree manager, and replies with SemActResponse.

NATS Subjects

Defined in SEM_SUBJECTS:

• dink.ui.<appId>.snapshot -- Request/reply for full tree snapshot
• dink.ui.<appId>.deltas -- Publish stream of batched deltas
• dink.ui.<appId>.act -- Request/reply for action invocation

CLI Commands

dink ui tree <appId>       # Print current semantic tree snapshot
dink ui act <appId> <semId> <action> [args...]  # Invoke an action remotely
dink ui watch <appId>      # Stream tree deltas in real-time

Key Exports

| Export | Description | |---|---| | SemTreeNATSBridge | NATS bridge -- start/destroy lifecycle, 16ms delta batching | | SEM_SUBJECTS | NATS subject templates | | NATSConnection | Minimal NATS connection interface (publish, subscribe, request) | | SemSnapshotMessage | Wire type for snapshot responses | | SemDeltaMessage | Wire type for delta publications | | SemActRequest / SemActResponse | Wire types for action invocation |

Design Spec

docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md