mizcausevic-dev/kinetic-gain-visualizer

The Kinetic Gain Protocol Suite Visualizer is a browser-based React app for inspecting JSON documents from eleven protocol specs, with additional architecture, tool-catalog, and audit-chain views. The main workflow starts when a user opens the app and pastes or edits a document: the app detects its spec from a top-level version field, selects a spec-aware renderer, and displays the result; unrecognized documents fall back to raw JSON. The README documents deep links for the main views and an example gallery.

Components

Browser app and document visualization

• Browser bootstrap — src/main.tsx: mounts the React app into the page’s root element and loads the app stylesheet.

• Visualizer and view coordinator — src/App.tsx: maintains the app’s view and document interaction, calls spec detection, and dispatches recognized documents to their renderer or unknown documents to raw JSON.

• Spec detection contract — src/detect.ts: identifies document types using the version-field contract documented in the README; the app imports detectSpec, SPECS, and specInfo from this module.

• Examples gallery data — src/examples.ts: supplies the examples used by the app; App imports EXAMPLES and AEO_EXAMPLE.

• Spec-aware document renderers — src/renderers/AeoRenderer.tsx: anchors the renderer subsystem; App imports separate renderers for the supported specs, while the README documents eleven spec-specific renderers plus a raw-JSON fallback. These render documents for display rather than validating them against external schemas.

• Shared renderer presentation primitives — src/renderers/common.tsx: shared card, field, and pill components are imported by sampled renderers, including the decision-card, classroom-AUP, and clinical-AI renderers.

Protocol reference views

• Protocol and tool catalog data — src/protocol-data.ts: provides protocol and tool metadata, including tool descriptions and inputs; its file comments say this catalog mirrors data from the MCP server repository.

• Interactive tools catalog — src/views/Tools.tsx: filters and displays tools using protocol and tool data imported from the catalog.

• Protocol architecture view — src/views/Architecture.tsx: presents protocol metadata and describes the external mcp-kinetic-gain server; it imports protocol definitions and counts from the catalog.

Browser-side audit demonstration

• Audit-chain implementation — src/lib/audit-chain.ts: builds a sample governance-event chain and verifies event IDs, hashes, and chain links using browser cryptographic APIs; its comments describe it as a browser-side mirror of another project’s verification logic.

• Audit stream view — src/views/AuditStream.tsx: builds and verifies sample chains, displays verification results, and supports a tampering demonstration and JSON download.

Relationships

• App user -> Browser bootstrap: opens the browser app; the repository documents the app’s deployed URL and local development entry.

• Browser bootstrap -> Visualizer and view coordinator: mounts the React App component.

• App user -> Visualizer and view coordinator: supplies or edits a document in the visualizer; the README describes pasting documents and the editor/gallery workflow.

• Visualizer and view coordinator -> Spec detection contract: calls detection and spec-info functions for the parsed document; the app excerpt shows these imports and the detection call.

• Visualizer and view coordinator -> Examples gallery data: reads examples for the gallery; the app excerpt shows the imports and example-loading function.

• Visualizer and view coordinator -> Spec-aware document renderers: renders the selected spec-specific renderer or raw JSON fallback; the app excerpt shows the dispatch branches.

• Spec-aware document renderers -> Shared renderer presentation primitives: sampled renderers import shared card, field, and pill components.

• Visualizer and view coordinator -> Interactive tools catalog: renders this view when the selected view is tools.

• Interactive tools catalog -> Protocol and tool catalog data: reads protocol and tool definitions for filtering and display.

• Visualizer and view coordinator -> Protocol architecture view: renders this view when the selected view is architecture.

• Protocol architecture view -> Protocol and tool catalog data: reads protocol definitions and tool counts.

• Visualizer and view coordinator -> Audit stream view: renders this view when the selected view is audit-stream.

• Audit stream view -> Audit-chain implementation: calls the chain builder and verifier on initial load, reset, and tampered-chain actions.

• Browser cryptographic APIs -> Audit-chain implementation: supplies the Web Crypto SHA-256 operation used for canonical hashes; this is a browser API, not a repository component.

Coverage limits

The source excerpts are partial. They do not show the full app’s JSON parsing and input-error handling, the complete detection table, or every renderer’s fields. The audit view demonstrates a locally generated sample chain; the sampled code does not establish a connection to a live audit service or to the external MCP server.