Kanshō/Workflow canvas

Workflow canvas

The surface workflow nodes live on. Dotted grid background, mini-map slot, controls slot, and a status strip that can host the braille-loader during compile.

Included in the single kansho full pack. Components are not offered as separate installs.

Interactive canvas with nodes, edges, and overlays

ctrl/cmd-scroll or pinch to zoom, drag the background to pan; focus it for +/- , 0, and arrow keys
triggerSuccess

On schedule

Every hour

Tick — trigger port
sourceRunning

Read mission queue

postgres://ops/missions

Tick — trigger port
Rows — data port
agentRunning

Plan & dispatch

claude-opus-4-7

Rows — data port
Dispatch — control port
logic

Branch on priority

Job — control port
Urgent — control port, not connected
Error — error port
effectFailed

Notify oncall

PagerDuty: ops-primary

Reason — error port
Trigger Data Control Error
Saved · 5 nodes · 4 edges

Compile state

Braille loader sits in the status slot while the canvas rebuilds
trigger

On schedule

Tick — trigger port
source

Read mission queue

Tick — trigger port
Rows — data port, not connected
⠋Compiling workflow · 3 of 5 nodes

Empty canvas

Click the button to create a first node in the centre

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Braille loader

components/loaders/braille-loader.tsx

Supporting sources

These installed helpers belong to components documented on this page. They do not increase the public component count.

components/loaders/braille-spinners.ts

Frame data, generator helpers, and types consumed by BrailleLoader.

Component documentation

Braille loader

components/loaders/braille-loader.tsx

Purpose

Animates a configurable sequence of braille frames as a compact activity indicator.

Appropriate use

Use for lightweight running feedback where a full progress indicator would imply unavailable completion data.

Example

components/loaders/braille-loader.tsx has a representative live example in the "Compile state" section on /components/workflow-canvas.

States

Supports named or custom frame sets, interval, paused state, fixed frame, reduced-motion freeze, and decorative or live announcement modes.

API and props

BrailleLoader accepts name, spinner, interval, paused, frame, respectReducedMotion, live, aria-label, and native span props; it re-exports BrailleSpinnerName and Spinner types.

Dependencies

React and the local braille-spinners frame module.

Accessibility

Decorative instances are aria-hidden; live instances use polite aria-live with a supplied label, and reduced-motion preference freezes animation.

Limitations

It reports indeterminate activity only and should not be repeated as multiple simultaneous live regions.

Source

Source: components/loaders/braille-loader.tsx.

Full pack

components/loaders/braille-loader.tsx is documented at /components/workflow-canvas and installs only through the single Kansho full pack; no individual component install is offered.

Workflow Canvas

components/workflow/workflow-canvas.tsx

Purpose

Provides a grid canvas with overlay slots and optional pan, zoom, fit, and node-navigation context.

Appropriate use

Use around workflow or graph nodes when a bounded interactive viewport is needed.

Example

components/workflow/workflow-canvas.tsx has a representative live example in the "Interactive canvas with nodes, edges, and overlays" section on /components/workflow-canvas.

States

Supports static or interactive canvases, custom or built-in controls, initial fit with bounds, pan/zoom transform, minimap, legend, status, and empty children.

API and props

WorkflowCanvas accepts children, legend, controls, minimap, status, interactive, initialFit, contentBounds, height, and className; it exports CanvasBounds, WorkflowCanvasNav, and WorkflowCanvasNavContext.

Dependencies

Direct imports are React, Lucide icons, IconButton, and cn.

Accessibility

The interactive viewport is named and keyboard-focusable; plus/minus zoom, 0 reset, arrows pan, and named buttons expose zoom, reset, and fit actions.

Limitations

It does not lay out nodes, calculate content bounds, persist viewport state, or provide semantic relationships between arbitrary children.

Source

Source: components/workflow/workflow-canvas.tsx.

Full pack

components/workflow/workflow-canvas.tsx is documented at /components/workflow-canvas and installs only through the single Kansho full pack; no individual component install is offered.