-
- Payment Intelligence Modules · v
- {SUITE_VERSION}
-
-
-
- Browser-only · No data leaves your device
-
+
+
+
+
+ Payment Intelligence Modules · v
+ {SUITE_VERSION}
+
+
+
+ Browser-only · No data leaves your device
+
+
);
diff --git a/src/components/layout/SuiteHeader.tsx b/src/components/layout/SuiteHeader.tsx
index 6d1edc5..939dcea 100644
--- a/src/components/layout/SuiteHeader.tsx
+++ b/src/components/layout/SuiteHeader.tsx
@@ -10,12 +10,14 @@ interface NavItem {
const navItems: NavItem[] = [
{ to: "/", label: "Overview", end: true },
+ { to: "/workbench", label: "Workbench", end: false },
{ to: "/scrubber", label: "Scrubber", end: false },
{ to: "/storyteller", label: "Storyteller", end: false },
{ to: "/iban", label: "IBAN", end: false },
{ to: "/bic", label: "BIC*", end: false },
{ to: "/cbpr", label: "CBPR+", end: false },
{ to: "/insights", label: "Insights", end: false },
+ { to: "/docs", label: "Docs", end: false },
];
export function SuiteHeader() {
diff --git a/src/components/workbench/CapabilityBadge.tsx b/src/components/workbench/CapabilityBadge.tsx
new file mode 100644
index 0000000..959c38d
--- /dev/null
+++ b/src/components/workbench/CapabilityBadge.tsx
@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import { CAPABILITY_LABEL, MATURITY_LABEL } from "@/lib/workbench/taxonomy";
+import type { CapabilityState, MaturityTier } from "@/lib/workbench/types";
+
+const CAPABILITY_CLASS: Record
= {
+ available: "border-brand/25 bg-brand/10 text-primary",
+ demo: "border-amber-300/60 bg-amber-100/70 text-amber-900",
+ local: "border-accent/30 bg-accent/10 text-accent-foreground",
+ prototype: "border-indigo-300/60 bg-indigo-100/70 text-indigo-900",
+ gated: "border-slate-300 bg-slate-100 text-slate-700",
+ planned: "border-border bg-muted text-muted-foreground",
+};
+
+interface CapabilityBadgeProps {
+ capability: CapabilityState;
+ maturity?: MaturityTier;
+ className?: string;
+}
+
+export function CapabilityBadge({ capability, maturity, className }: CapabilityBadgeProps) {
+ return (
+
+
+ {CAPABILITY_LABEL[capability]}
+
+ {maturity ? (
+
+ {MATURITY_LABEL[maturity].split(" · ")[0]}
+
+ ) : null}
+
+ );
+}
diff --git a/src/components/workbench/CaveatPanel.tsx b/src/components/workbench/CaveatPanel.tsx
new file mode 100644
index 0000000..787068d
--- /dev/null
+++ b/src/components/workbench/CaveatPanel.tsx
@@ -0,0 +1,36 @@
+import { AlertTriangle } from "lucide-react";
+
+interface CaveatPanelProps {
+ title?: string;
+ points: string[];
+}
+
+/**
+ * Shared "scope / what this does not do" panel. Used to keep anti-overclaim
+ * caveats visually consistent across modules and platform surfaces.
+ */
+export function CaveatPanel({ title = "Scope & limitations", points }: CaveatPanelProps) {
+ if (points.length === 0) return null;
+ return (
+
+
+
+ {points.map((point) => (
+ -
+
+ {point}
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/workbench/FindingsList.tsx b/src/components/workbench/FindingsList.tsx
new file mode 100644
index 0000000..3e76588
--- /dev/null
+++ b/src/components/workbench/FindingsList.tsx
@@ -0,0 +1,36 @@
+import { cn } from "@/lib/utils";
+import { SEVERITY_LABEL } from "@/lib/workbench/taxonomy";
+import type { Finding, Severity } from "@/lib/workbench/types";
+
+const SEVERITY_CLASS: Record = {
+ pass: "border-emerald-300/60 bg-emerald-50 text-emerald-900",
+ info: "border-sky-300/60 bg-sky-50 text-sky-900",
+ warning: "border-amber-300/60 bg-amber-50 text-amber-900",
+ critical: "border-red-300/60 bg-red-50 text-red-900",
+};
+
+export function FindingsList({ findings }: { findings: Finding[] }) {
+ if (findings.length === 0) {
+ return No findings in this session yet.
;
+ }
+ return (
+
+ );
+}
diff --git a/src/components/workbench/GateChecklist.tsx b/src/components/workbench/GateChecklist.tsx
new file mode 100644
index 0000000..f1bc1f9
--- /dev/null
+++ b/src/components/workbench/GateChecklist.tsx
@@ -0,0 +1,31 @@
+import { Lock } from "lucide-react";
+
+interface GateChecklistProps {
+ requirements: string[];
+ /** When true (the default) every gate renders as locked/unmet. */
+ locked?: boolean;
+}
+
+/**
+ * Renders gate requirements for a disabled connector / gated surface. By
+ * design every item shows as unmet — these gates are not satisfied here.
+ */
+export function GateChecklist({ requirements, locked = true }: GateChecklistProps) {
+ return (
+
+ {requirements.map((requirement) => (
+ -
+
+ {requirement}
+
+ ))}
+
+ );
+}
diff --git a/src/components/workbench/MaturityLegend.tsx b/src/components/workbench/MaturityLegend.tsx
new file mode 100644
index 0000000..b753663
--- /dev/null
+++ b/src/components/workbench/MaturityLegend.tsx
@@ -0,0 +1,19 @@
+import { MATURITY_DESCRIPTION, MATURITY_LABEL } from "@/lib/workbench/taxonomy";
+import type { MaturityTier } from "@/lib/workbench/types";
+
+const TIERS: MaturityTier[] = ["P0", "P1", "P2", "P3"];
+
+export function MaturityLegend() {
+ return (
+
+ {TIERS.map((tier) => (
+
+
- {MATURITY_LABEL[tier]}
+ -
+ {MATURITY_DESCRIPTION[tier]}
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/workbench/ProvenanceCard.tsx b/src/components/workbench/ProvenanceCard.tsx
new file mode 100644
index 0000000..6042335
--- /dev/null
+++ b/src/components/workbench/ProvenanceCard.tsx
@@ -0,0 +1,68 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import type { Provenance } from "@/lib/workbench/types";
+
+export function ProvenanceCard({ provenance }: { provenance: Provenance }) {
+ return (
+
+
+ Provenance
+
+ Live: No
+
+
+
+
+
- Source:
+ - {provenance.source}
+
+
+
- Method:
+ - {provenance.method}
+
+ {provenance.freshness ? (
+
+
- Freshness:
+ - {provenance.freshness}
+
+ ) : null}
+
+
+
+
+ Checked
+
+
+ {provenance.checked.map((item) => (
+ -
+
+ {item}
+
+ ))}
+
+
+
+
+ Not checked
+
+
+ {provenance.notChecked.map((item) => (
+ -
+
+ {item}
+
+ ))}
+
+
+
+
No analyses in this session yet.
+
+ Load a scenario
+
+
+
+ Findings by severity
+
+ {severityList().map((severity) => {
+ const value = analytics.bySeverity[severity];
+ return (
+ -
+
+ {SEVERITY_LABEL[severity]}
+
+
+
+
+
+ {value}
+
+
+ );
+ })}
+
+
+ Pass rate:{" "}
+ {Math.round(analytics.passRate * 100)}%{" "}
+ across {analytics.totalResults} analyses.
+
+
+
+
+ By module
+
+ {analytics.byModule.map((entry) => (
+ -
+ {entry.moduleId}
+
+ {entry.results} analyses · {entry.findings} findings
+
+
+ ))}
+
+
+ Top reason codes
+
+ {analytics.reasonCodes.slice(0, 6).map((reason) => (
+ -
+
{reason.code}
+ {reason.count}
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ConnectorsPage.test.tsx b/src/pages/ConnectorsPage.test.tsx
new file mode 100644
index 0000000..85deaae
--- /dev/null
+++ b/src/pages/ConnectorsPage.test.tsx
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ConnectorsPage } from "./ConnectorsPage";
+
+describe("ConnectorsPage", () => {
+ it("renders all P3 connector tracks as disabled", () => {
+ render();
+ expect(
+ screen.getByRole("heading", { level: 1, name: /connector readiness/i }),
+ ).toBeInTheDocument();
+ expect(screen.getByText(/live_integration = false/i)).toBeInTheDocument();
+ expect(screen.getAllByRole("button", { name: /attempt invoke/i })).toHaveLength(7);
+ });
+
+ it("proves a disabled connector cannot be invoked", async () => {
+ render();
+ const buttons = screen.getAllByRole("button", { name: /attempt invoke/i });
+ const first = buttons[0];
+ if (!first) throw new Error("expected an invoke button");
+ await userEvent.click(first);
+ expect(await screen.findByText(/Blocked:/i)).toBeInTheDocument();
+ });
+});
diff --git a/src/pages/ConnectorsPage.tsx b/src/pages/ConnectorsPage.tsx
new file mode 100644
index 0000000..f0261d4
--- /dev/null
+++ b/src/pages/ConnectorsPage.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { Ban, ShieldAlert } from "lucide-react";
+import { ModuleLayout } from "@/components/layout/ModuleLayout";
+import { CapabilityBadge } from "@/components/workbench/CapabilityBadge";
+import { GateChecklist } from "@/components/workbench/GateChecklist";
+import {
+ CONNECTORS,
+ ConnectorDisabledError,
+ gateMatrix,
+ invokeConnector,
+} from "@/lib/workbench/connectors";
+
+export function ConnectorsPage() {
+ const matrix = gateMatrix();
+ const [attempted, setAttempted] = useState>({});
+
+ const attemptInvoke = (id: string) => {
+ try {
+ invokeConnector(id);
+ // Unreachable: invokeConnector always throws.
+ setAttempted((prev) => ({
+ ...prev,
+ [id]: "Unexpectedly returned — this should never happen.",
+ }));
+ } catch (err) {
+ const message =
+ err instanceof ConnectorDisabledError
+ ? err.message
+ : err instanceof Error
+ ? err.message
+ : "Blocked.";
+ setAttempted((prev) => ({ ...prev, [id]: message }));
+ }
+ };
+
+ return (
+
+
+
+
+
+ {matrix.disabled} of {matrix.total}
+ {" "}
+ connectors disabled · {matrix.liveEnabled} live integrations enabled.
+ Every connector reports live_integration = false. There
+ is no code path that performs a real provider call from this suite.
+
+
+ {CONNECTORS.map((connector) => (
+
+
+
+
{connector.trackLabel}
+
{connector.displayName}
+
+
+
{connector.description}
+
+ Examples: {connector.vendorExamples.join(", ")}
+
+
+
+
+ Gate requirements (unmet)
+
+
+
+
+
+
+ {attempted[connector.id] ? (
+
+ Blocked: {attempted[connector.id]}
+
+ ) : null}
+
+ ))}
+
+ Mirrored server-side by the offline scaffold at{" "}
+ apps/payment-intelligence-pilot, whose registry enforces
+ the same invariant and whose tests prove disabled connectors cannot be called.
+
+
+ );
+}
diff --git a/src/pages/DocsPage.tsx b/src/pages/DocsPage.tsx
new file mode 100644
index 0000000..8bc1e6a
--- /dev/null
+++ b/src/pages/DocsPage.tsx
@@ -0,0 +1,151 @@
+import { Link } from "react-router-dom";
+import { ModuleLayout } from "@/components/layout/ModuleLayout";
+import { MaturityLegend } from "@/components/workbench/MaturityLegend";
+import { CapabilityBadge } from "@/components/workbench/CapabilityBadge";
+import { CaveatPanel } from "@/components/workbench/CaveatPanel";
+import { surfacesByGroup } from "@/lib/workbench/surfaces";
+
+export function DocsPage() {
+ const modules = surfacesByGroup("module");
+ const workbench = surfacesByGroup("workbench");
+ const platform = surfacesByGroup("platform");
+
+ return (
+
+
+
+
+ Methodology
+
+ -
+ Syntax / shape checks — structural and
+ checksum validation (MOD-97, ISO 9362, AppHdr/Document namespaces). These are not
+ certified validation.
+
+ -
+ Registry-snapshot lookups — IBAN/BIC
+ reference data is bundled and can go stale. Provenance and freshness are surfaced.
+
+ -
+ Narrative & lifecycle grouping —
+ derived from the message you provide, in memory, with no live tracking.
+
+ -
+ Shared findings taxonomy — every result
+ carries a severity (pass / info / needs-review / critical) and a provenance block of
+ what was and was not checked.
+
+
+
+
+
+ Module guides
+
+ {modules.map((surface) => (
+
+
+ {surface.name}
+
+ {surface.summary}
+
+
+
+
+ ))}
+
+
+
+
+ Workbench surfaces
+
+ {workbench.map((surface) => (
+
+
+ {surface.name}
+
+ {surface.summary}
+
+
+
+
+ ))}
+
+
+
+
+ Platform & expansion
+
+ {platform.map((surface) => (
+
+
+ {surface.name}
+
+ {surface.summary}
+
+
+
+
+ ))}
+
+
+
+
+ Maturity roadmap
+
+
+
+
+
+
+ Support
+
+ -
+ Pick a bundled scenario from the Scenario Switcher to try a module end-to-end.
+
+ -
+ Run the suite locally with
pnpm dev; quality gate
+ is pnpm verify.
+
+ -
+ The hosted private-pilot scaffold lives at{" "}
+
apps/payment-intelligence-pilot and is run
+ separately.
+
+
+
+
+
+
+
+
+
Public suite status
+
+
+ Operational (static)
+
+
+
+
- Version
+ - {SUITE_VERSION}
+
+
+
- Runtime
+ - Browser SPA
+
+
+
- Live integrations
+ - 0
+
+
+
+
+
Privacy posture
+
+ {POSTURE.map((item) => (
+ -
+
+ {item}
+
+ ))}
+
+
+
What is and is not live
+
+ Every capability below is local or disabled. The suite never presents live or certified
+ status without a real source.
+
+
+
+
+
+ | Capability |
+ Live? |
+ Notes |
+
+
+
+ {SCOPE.map((row) => (
+
+ | {row.capability} |
+
+
+
+ No
+
+ |
+ {row.note} |
+
+ ))}
+
+
+
Maturity tiers
+
+ The hosted pilot exposes its own backed /health{" "}
+ contract (see the Private-Pilot Scaffold). This page reflects the public static suite.
+
+
+
+
+ );
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index ce9e912..d4cea64 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,96 +1,19 @@
import { Link } from "react-router-dom";
-import {
- ArrowRight,
- Building2,
- CheckCircle2,
- Eraser,
- FileCheck2,
- GitBranch,
- FileText,
- Hash,
- Lock,
- ShieldCheck,
- Sparkles,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface ModuleTile {
- to: string;
- name: string;
- summary: string;
- icon: typeof Eraser;
- status: "available" | "demo" | "planned";
-}
-
-const modules: ModuleTile[] = [
- {
- to: "/scrubber",
- name: "Scrubber",
- summary:
- "Strip personally identifying fields from ISO 20022 payment XML before sharing with peers or vendors.",
- icon: Eraser,
- status: "available",
- },
- {
- to: "/storyteller",
- name: "Storyteller",
- summary:
- "Turn pacs.* and camt.* messages into a plain-language narrative with a structured field projection.",
- icon: FileText,
- status: "available",
- },
- {
- to: "/iban",
- name: "IBAN Workbench",
- summary:
- "Validate, build, catalogue, and trace IBAN provenance from the bundled registry snapshot. No live BIC, no VOP.",
- icon: Hash,
- status: "available",
- },
- {
- to: "/bic",
- name: "BIC Validator*",
- summary:
- "ISO 9362 structural checks plus a small bundled snapshot lookup. Demonstration only — data is not accurate/current, with no live lookup or reachability check.",
- icon: Building2,
- status: "demo",
- },
- {
- to: "/cbpr",
- name: "CBPR+ Readiness Checker",
- summary:
- "Inspect AppHdr, Document namespace, bundled CBPR+ schema-profile coverage, UETR, BIC, and IBAN shape locally. Not a certified validator.",
- icon: FileCheck2,
- status: "available",
- },
- {
- to: "/insights",
- name: "Payment Insights Lite",
- summary:
- "Group ACK/NACK, pacs.* and camt.* files you provide into local lifecycle threads. Not live payment tracking.",
- icon: GitBranch,
- status: "available",
- },
- {
- to: "#",
- name: "Vault",
- summary:
- "Planned encrypted local export bundle: user-controlled download/import, no cloud vault, no server storage, and no browser persistence by default.",
- icon: Lock,
- status: "planned",
- },
-];
+import { ArrowRight, CheckCircle2, Lock, ShieldCheck, Sparkles } from "lucide-react";
+import { CapabilityBadge } from "@/components/workbench/CapabilityBadge";
+import { MaturityLegend } from "@/components/workbench/MaturityLegend";
+import { surfacesByGroup, type SuiteSurface } from "@/lib/workbench/surfaces";
const howItWorks = [
"Drop in or paste ISO 20022 XML — Storyteller handles selected pacs./camt. narratives, CBPR+ Readiness checks AppHdr/MX structure, and Payment Insights Lite groups local lifecycle files by identifiers.",
- "Parsing, scrubbing, narrative generation, readiness checks, and local lifecycle grouping all run inside the page using browser APIs and bundled metadata.",
- "Outputs are produced from in-memory data only and stay on your machine until you copy or download them.",
+ "Load a bundled, synthetic scenario into the in-memory workbench, then hand it off to a module — all without uploading anything.",
+ "Outputs are produced from in-memory data only and stay on your machine until you copy, download, or encrypt them into a local vault file.",
];
const whatItDoesNotDo = [
"No upload from the root browser runtime. No root API, telemetry, or remote logging.",
"No persistence — nothing is written to localStorage, sessionStorage, IndexedDB or cookies.",
- "No telemetry, analytics or error reporting beacons.",
+ "No live BIC/VOP/reachability/settlement calls. Live-data connectors exist only as disabled, gated stubs.",
];
const supportedMessageFamilies = [
@@ -103,18 +26,44 @@ const supportedMessageFamilies = [
"camt.054",
];
-const stats = [
- {
- value: String(
- modules.filter((module) => module.status === "available" || module.status === "demo").length,
- ),
- label: "Live browser modules",
- },
- { value: String(supportedMessageFamilies.length), label: "ISO 20022 message families" },
- { value: "0", label: "Uploads, storage, telemetry" },
-];
+function SurfaceCard({ surface }: { surface: SuiteSurface }) {
+ const Icon = surface.icon;
+ return (
+
+
+
+
+
+
+
+ {surface.name}
+ {surface.summary}
+
+ Open
+
+
+
+ );
+}
export function HomePage() {
+ const moduleSurfaces = surfacesByGroup("module");
+ const workbenchSurfaces = surfacesByGroup("workbench");
+ const platformSurfaces = surfacesByGroup("platform");
+
+ const stats = [
+ { value: String(moduleSurfaces.length), label: "Browser modules" },
+ { value: String(supportedMessageFamilies.length), label: "ISO 20022 message families" },
+ { value: "0", label: "Uploads, storage, telemetry" },
+ ];
+
return (
@@ -128,12 +77,16 @@ export function HomePage() {
the reference data underneath payments.
- Practitioner-grade utilities for payment operations and integration teams reviewing ISO
- 20022 XML. Scrub identifying data before sharing a sample, or turn a message into a
- plain-language narrative — without uploading anything.
+ A privacy-first workbench for payment operations and integration teams reviewing ISO
+ 20022 XML. Scrub, explain, validate-shape and group lifecycle fragments — locally — then
+ grow, behind honest gates, toward a hosted pilot and gated live-data tracks.
-
+
+ Open the workbench
+
+
+
Open Scrubber
@@ -141,10 +94,6 @@ export function HomePage() {
Open Storyteller
-
- Open IBAN
-
-
{stats.map((stat) => (
@@ -189,77 +138,47 @@ export function HomePage() {
Choose a review workflow
- Each module is designed as a small, auditable workflow: clear input, transparent
- transformation, and copy/download outputs that stay under your control.
+ Each module is a small, auditable workflow: clear input, transparent transformation,
+ and copy/download outputs that stay under your control.
+
Local operational layer (P1)
+
+ Work across modules in one session
+
+
+ A command center, scenario switcher, review queue, analytics and an encrypted local vault
+ — all in-memory, all on your device.
+
- {modules.map((module) => {
- const Icon = module.icon;
- const isPlanned = module.status === "planned";
- const isDemo = module.status === "demo";
- const tileClass = cn(
- "group relative flex min-h-64 flex-col p-6 transition-all",
- "practice-card",
- isPlanned
- ? "cursor-not-allowed opacity-65"
- : "hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-md hover:shadow-slate-200/80",
- );
- const badgeLabel = isPlanned ? "Planned" : isDemo ? "Demo" : "Available";
- const badgeClass = isPlanned
- ? "border-border bg-muted text-muted-foreground"
- : isDemo
- ? "border-amber-300/60 bg-amber-100/70 text-amber-900"
- : "border-brand/25 bg-brand/10 text-primary";
- const inner = (
- <>
-
-
-
-
-
- {badgeLabel}
-
-
-
- {module.name}
-
-
- {module.summary}
-
- {!isPlanned ? (
-
- Open module
-
-
- ) : (
-
- Coming soon
-
- )}
-
- );
+ {workbenchSurfaces.map((surface) => (
+
+ ))}
+
+
+
Platform & expansion (P0–P3)
+
+ Honest gates, not fake production
+
+
+ Status and docs ship now. The hosted pilot and live-data connectors are present as gated,
+ disabled prototypes — never presented as live or certified.
+
+
+ {platformSurfaces.map((surface) => (
+
+ ))}
+
+
+
+ A prototype, never production — and separate from this static suite.
+
+
+ The scaffold lives at apps/payment-intelligence-pilot
+ . It is a synthetic, offline FastAPI app with a loud demo-stub auth, SQLite persistence,
+ immutable audit, four-eyes approval and a disabled connector registry. The public suite
+ does not couple to it — there is no backend wiring in{" "}
+ src/.
+
+
+