PrismWorkflowLibraryMicroUI

Platform Prism workflow-library micro-UI. Component id: workflow-library. Published to npm as @zephytiju/prism-workflow-library.

The Workflow Library is the section (collection) axiom component of the Workflows / Audit Chains page (with Fluxboard Canvas — the page's exactly two axiom components, D9). It renders the tabbed library — ⛓ WORKFLOWS / ≋ AUDIT CHAINS tabs with search and sort — indexing IWorkflowDefinition[] and IAuditChain[] through interface-declared list queries, workflow cards carrying status pills (ON CANVAS, ACTIVE, PAUSED, DRAFT — per-item status from the interface data, with the on-canvas board additionally selected), audit rows with VERIFIED/PENDING hash-seal pills and entry sublines, and a create zone whose template drawer CREATE-AND-OPEN flow invokes IWorkflowRuntime.create(template) and opens the new board on the canvas. The panel header carries the title and the computed mono subtitle (LATTICE BACKEND · N CHAINS INDEXED); panel chrome (including dismissal of the ×) is host-side. Composed applications (for example Guanlan) consume it as-is; the component is platform-owned.

One chain at a time

Opening any library item — a workflow card, an audit row, or a freshly created board — publishes exactly ONE bounded chain identifier. Fluxboard renders one workflow or one audit chain at a time, never both together (component doc §2, recorded 2026-09-20). The library never renders canvas content and never references the Fluxboard component: the request is delivered only through the Prism channel below, and the receiver fetches its own chain data (D6/D8).

Channel contract

| Direction | Kind | Id | Payload | | --- | --- | --- | --- | | publishes | state | workflow-library.open-chain-request | OpenChainRequest — { kind: "workflow" \| "audit-chain", chainId: string }, exactly one bounded chain identifier per publication (never a batch, never both kinds) | | emits | event | workflow-library.close-request | null — the panel × asks the host to dismiss the section |

Channel ids are string literals at every call-site so the build-time channel-graph scanner can derive the graph. The single publication is setter-only (usePrismStateSetter), so the component never re-renders from its own publications. The open request uses bounded-context shared state (current-value semantics): the canvas reads the latest request whenever it renders, and a new request replaces — never accumulates — the previous one.

Lattice binding

All data access goes through the host Lattice transport (useLatticeTransport() from @zephytiju/prism-react) — no URLs, credentials, or generic invokes. The generated @zephytiju/lattice-common-interfaces surface (0.1.0 / 0.2.0 — 18 methods across 14 interfaces) predates this page's contract: createWorkflowDefinitionClient lists only { id, name, blocks } with no per-item status, createAuditChainClient exposes an ENTRY query (interfaces/IAuditChain/query) rather than a chain listing, and createWorkflowRuntimeClient exposes invoke/status but no create. This component's doc (§3, recorded 2026-09-20) declares the richer contract — the two interface- declared list queries with per-item status and IWorkflowRuntime.create(template) — so createWorkflowLibraryClients (exported) consumes those per-method routes following the generated factories' exact pattern (transport.call("interfaces/{interfaceId}/{method}")) with bounded local projections, until the bundle regenerates them:

| Interface | Method | Route | Payload | | --- | --- | --- | --- | | IWorkflowDefinition | list | interfaces/IWorkflowDefinition/list | → { definitions: WorkflowDefinitionRecord[] } ({ id, name, status, blocks?, trigger?, owner?, lastRunAt?, meta?, metaTone? }) | | IAuditChain | list | interfaces/IAuditChain/list | → { chains: AuditChainRecord[] } ({ id, name, entries?, lastAt?, verified }) | | IWorkflowRuntime | create | interfaces/IWorkflowRuntime/create | { template, name? } → { chainId } — the created board's identifier, immediately published as an open request |

The tabs variant indexes both lists on mount (tab switches are instant); the workflows-only variant never queries the audit interface. Failed fetches show an inline error panel with a RETRY control (a fetch-sequence guard discards stale responses); a successful create refreshes the index.

Variants and configuration keys

| Prop | Meaning | | --- | --- | | variant | "tabs" (workflows + audit chains, default) or "workflows-only" | | defaultTab | initial tab for the tabs variant: "workflows" \| "audit-chains" (default "workflows"); pinned to workflows in the workflows-only variant | | showCreateZone | whether the create zone renders (default true) | | title | panel header title (defaults to the locale bundle's titleDefault — WORKFLOW LIBRARY / 工作流库) | | subtitle | panel header mono subtitle (defaults to the computed LATTICE BACKEND · {count} CHAINS INDEXED) | | statusTokens | status/seal → semantic color token overrides ({ "on-canvas": "ok", active: "ok", paused: "warn", draft: "muted", verified: "ok", pending: "warn" } curated defaults) | | locale | UI locale for the component-fixed strings: "en" \| "zh-CN" (default "en") — see i18n |

Search matches id, name, trigger and owner text (audit tab: id and name) and updates the section counts (N TOTAL · M SHOWN). The ⚙ control cycles the sort: RECENT (last run / last append, newest first) → NAME A→Z → STATUS (on-canvas first / verified first) → RECENT.

Internationalization (i18n)

The component ships en and zh-CN locale bundles — src/locales/en.json / src/locales/zh-CN.json — and every component-fixed UI string is resolved from them: tab labels, section titles, status pill and seal copy, counts/subtitle patterns, create-zone buttons, drawer title/labels/template chips, search placeholder, sort modes, error/retry copy, the locale-derived default header title (titleDefault), every component-authored aria label (the panel, the search input, the drawer name input, the Sort library: {order} / card / audit-row open patterns), and the fallback copy used when a Lattice rejection carries no Error message (listFailedFallback, createErrorFallback). The component renders no hardcoded copy. Backend-derived text — workflow/audit-chain ids, names, triggers, owners, timestamps and counts — renders verbatim and is never localized; status pills and seals keep their existing status → locale-key mapping untouched.

{
  "workflow-library": {
    "searchPlaceholder": "search workflows, triggers, owners…",
    "tabWorkflows": "WORKFLOWS",
    "tabAuditChains": "AUDIT CHAINS",
    "statusOnCanvas": "ON CANVAS",
    "sealVerified": "VERIFIED",
    "createAndOpen": "CREATE & OPEN ON CANVAS →",
    "subtitlePattern": "LATTICE BACKEND · {count} CHAINS INDEXED"
  }
}

• locale?: "en" | "zh-CN" prop (default "en") selects the string table per instance — it is a per-instance prop, so two instances in one host may render differing languages.
• Composition-authored strings are localized by the composer; component-fixed strings live in the locale JSONs. An explicit title / subtitle overrides the defaults — title falls back to the bundle's titleDefault, subtitle to the computed indexed-chain subtitle — so a host with a fully custom header passes its own strings per locale.
• Locale bundles are namespaced under the component id ("workflow-library") so a composer can deep-merge every component's bundle into ONE UI language bundle without collisions:

import { locales as workflowLibraryLocales } from "@zephytiju/prism-workflow-library";
const uiBundle = deepMerge(hostStrings, workflowLibraryLocales.en, queryBoxLocales.en);

The parsed bundles are exported from the package entry (locales, en, zhCN, stringsForLocale, fillPattern), and the raw JSONs are also served by the ./locales/* exports subpath (e.g. @zephytiju/prism-workflow-library/locales/zh-CN.json); files ships both dist and locales.

Theme

No palette is hardcoded. Every color resolves to SEMANTIC theme tokens (ok, accent, threat, warn, signal, card, card-dark, input, border, line, text, muted, deep, panel) consumed as CSS variables, plus --mantine-font-family-monospace for the mono typography — the palette is supplied entirely by the host's MantineProvider. The local demo ships TWO themes, both defined in src/demo.tsx: geovisionTheme (dark), mapping each semantic token onto the exact :root variables of the Workflows / Audit Chains design (deep bg, panel black, card, mint, blue, amber, purple, muted, border), and the contrasting latticeLightTheme (light), mapping the SAME semantic token keys onto a different palette — the component is skinned purely through the surrounding MantineProvider.

Source layout

src/ is strictly two parts:

• Component source (what the package compiles), one focused module per region of the panel:
  • WorkflowLibrary.tsx — thin composition root: public WorkflowLibraryProps, the fetch lifecycle (with its sequence guard), the one-chain-at-a-time publication, the create flow orchestration, the panel header and the body sections;
  • lattice.ts — createWorkflowLibraryClients, the interface-declared Lattice binding;
  • tokens.ts — semantic token CSS-variable constants, tint(), and the curated DEFAULT_STATUS_TOKENS;
  • LibraryTabs.tsx — the ⛓ WORKFLOWS / ≋ AUDIT CHAINS tab row of the tabs variant;
  • LibrarySearchSort.tsx — the search input and the ⚙ sort cycle control;
  • WorkflowCard.tsx — workflow cards (status pills, meta lines) and the workflows filter/sort derivation;
  • AuditChainRow.tsx — audit rows (VERIFIED/PENDING seals, entry sublines) and the audit filter/sort derivation;
  • CreateZone.tsx — the create buttons, template drawer, and CREATE-AND-OPEN;
  • plus types.ts (bounded projections and channel payloads), index.ts (public entry), src/locales/ (en.json, zh-CN.json, index.ts — the i18n string bundles and their resolver), and src/shims/node-crypto.ts (browser-build shim for the digest import — build infrastructure).
• Demo: exactly ONE file, src/demo.tsx — the two host themes (GeoVision v7 + Lattice Light), the mock host action executor (createDemoExecutor) and all demo test data (the prototype panel's WF-014/011/009/006 cards and AC-0031/0028/0025 rows), a mock Fluxboard consumer rendering the latest open request, and the demo page rendering three WorkflowLibrary instances side by side (tabs × both themes, plus a workflows-only host with the create zone disabled) behind a global EN | 中文 language switcher (plus per-instance switches).

The npm package ships dist (compiled component + type declarations + locale JSONs) and the top-level locales/ directory (the raw JSON bundles, served by the ./locales/* exports subpath); no demo code is published. scripts/copy-locales.mjs copies the JSON bundles into both locations during npm run build.

Local development

npm install
npm run typecheck
npm test
npm run dev
npm run shot-demo

npm install pulls the platform peers (@zephytiju/prism-react, @zephytiju/lattice-common-interfaces) from the npm registry, along with the host-side peer dependencies (react, react-dom, @mantine/core). When consuming the published package, install it directly (npm install @zephytiju/prism-workflow-library) and provide those peer dependencies in the host application.

The demo (npm run dev, entry src/demo.tsx) renders THREE WorkflowLibrary instances side by side — GeoVision v7 dark tabs (left, en), Lattice Light tabs on the audit tab (right, zh-CN), and a GeoVision workflows-only host with the create zone disabled — behind an EN | 中文 segmented control, with a mock Fluxboard consumer that renders exactly the latest bounded open request (one chain at a time, never both kinds together) and an open-request log. Include “fail” in the create name to exercise the create error path. npm run shot-demo boots the vite dev server, drives the demo in headless Chrome (opens the on-canvas card in the first host, opens the create drawer, selects the FROM AUDIT template, sets the LEFT instance to en and the RIGHT instance to zh-CN), and captures the language switcher plus all three instances to /tmp/guanlan-review/demo-workflow-library-i18n.png.

Design record

Page design: https://qcnwge0wy4s0.feishu.cn/wiki/IY77wlrJRi7OqHkeu5cc53cgn4f (D6/D8/D9); component doc: https://qcnwge0wy4s0.feishu.cn/wiki/X5tTwQlWji9oqCkGtLJc5amXnZb. Visual reference: the standalone HTML prototype in the page artifacts (right .panel region — authoritative implementation source).