@you-agent-factory/factory-visualizers 0.0.2 → 0.0.6

package/dist/styles.css

@@ -1,18 +1,7 @@
 @import "@xyflow/react/dist/style.css";
 
-.factory-recording-topology-replay {
-  display: grid;
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-inline-size: 0;
-  gap: 1rem;
-}
-
-.factory-emulator-controls {
-  display: grid;
-  gap: 1rem;
-}
-
+.factory-recording-topology-replay,
+.factory-emulator-controls,
 .factory-emulator-view {
   display: grid;
   box-sizing: border-box;
@@ -25,18 +14,26 @@
   min-inline-size: 0;
 }
 
-.factory-emulator-failure {
+.factory-emulator-failure,
+.factory-timeline-scrubber,
+.factory-work-progress {
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
   padding: 1rem;
   color: var(--color-on-surface);
   background: var(--color-surface-container-low);
-  border: 1px solid var(--color-error);
+  border: 1px solid var(--color-outline-variant);
   border-radius: 1rem;
 }
 
-.factory-emulator-failure__content {
+.factory-emulator-failure {
+  border-color: var(--color-error);
+}
+
+.factory-emulator-failure__content,
+.factory-topology-replay__state,
+.factory-work-progress__empty {
   display: grid;
   justify-items: center;
   gap: 1rem;
@@ -48,29 +45,23 @@
   border-radius: 0.75rem;
 }
 
-.factory-emulator-failure__content > * {
+.factory-emulator-failure__content > *,
+.factory-topology-replay__state > * {
   margin: 0;
 }
 
-.factory-recording-topology-replay__tick {
+.factory-recording-topology-replay__tick,
+.factory-timeline-scrubber__position,
+.factory-timeline-scrubber__status,
+.factory-timeline-scrubber__action-status,
+.factory-work-progress__total {
   margin: 0;
   color: var(--color-on-surface-variant);
 }
 
-.factory-timeline-scrubber {
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-inline-size: 0;
-  padding: 1rem;
-  color: var(--color-on-surface);
-  background: var(--color-surface-container-low);
-  border: 1px solid var(--color-outline-variant);
-  border-radius: 1rem;
-}
-
 .factory-topology-replay {
-  box-sizing: border-box;
   position: relative;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: clamp(28rem, 68vh, 48rem);
   min-inline-size: 0;
@@ -88,261 +79,16 @@
 }
 
 .factory-topology-replay__state {
-  display: grid;
   max-inline-size: 32rem;
-  justify-items: center;
-  gap: 1rem;
-  padding: 1.5rem;
-  color: var(--color-on-surface-variant);
-  text-align: center;
-  background: var(--color-surface-container);
-  border: 1px dashed var(--color-outline-variant);
-  border-radius: 0.75rem;
 }
 
 .factory-topology-replay__state[role="alert"] {
   border-color: var(--color-error);
 }
 
-.factory-topology-replay__state > * {
-  margin: 0;
-}
-
-.factory-topology-replay .react-flow__node {
-  inline-size: 13.5rem;
-}
-
-.factory-topology-replay
-  .react-flow__node:has(.factory-topology-replay__annotation) {
-  inline-size: auto;
-}
-
-.factory-topology-replay__annotation-toggle {
-  position: absolute;
-  z-index: 5;
-  inset-block-start: 1rem;
-  inset-inline-end: 1rem;
-  padding: 0.5rem 0.75rem;
-  color: var(--color-on-surface);
-  cursor: pointer;
-  background: var(--color-surface-container-high);
-  border: 1px solid var(--color-outline);
-  border-radius: 0.5rem;
-}
-
-.factory-topology-replay__annotation-toggle:focus-visible {
-  outline: 0.1875rem solid var(--color-on-surface);
-  outline-offset: 0.25rem;
-}
-
-.factory-topology-replay__active-work {
-  position: absolute;
-  z-index: 5;
-  inset-block-start: 1rem;
-  inset-inline-start: 1rem;
-  box-sizing: border-box;
-  max-inline-size: calc(100% - 2rem);
-  padding: 0.5rem 0.75rem;
-  color: var(--color-on-surface);
-  background: var(--color-surface-container-high);
-  border: 1px solid var(--color-outline);
-  border-radius: 0.5rem;
-}
-
-.factory-topology-replay__active-work ul {
-  display: grid;
-  gap: 0.25rem;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.factory-topology-replay__active-work li {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.75rem;
-  justify-content: space-between;
-}
-
-.factory-topology-replay__active-work li > * {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-.factory-topology-replay__active-work p {
-  margin: 0.25rem 0 0;
-  color: var(--color-on-surface-variant);
-}
-
-.factory-topology-replay__annotation {
-  box-sizing: border-box;
-  display: grid;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  margin: 0;
-  color: var(--color-on-surface);
-  pointer-events: none;
-  background: var(--color-surface-container);
-  border: 1px solid var(--color-outline);
-  border-radius: 0.75rem;
-}
-
-.factory-topology-replay__annotation[data-tone="accent"] {
-  border-color: var(--color-primary, var(--color-af-foundation-accent));
-}
-
-.factory-topology-replay__annotation[data-tone="info"] {
-  border-color: var(--color-info);
-}
-
-.factory-topology-replay__annotation[data-tone="success"] {
-  border-color: var(--color-success);
-}
-
-.factory-topology-replay__annotation[data-tone="warning"] {
-  border-color: var(--color-warning);
-}
-
-.factory-topology-replay__annotation[data-tone="danger"] {
-  border-color: var(--color-error);
-}
-
-.factory-topology-replay__annotation-title,
-.factory-topology-replay__annotation-body {
-  overflow-wrap: anywhere;
-}
-
-.factory-topology-replay__annotation-body {
-  white-space: pre-wrap;
-}
-
-.factory-topology-replay__annotation--image {
-  display: block;
-  padding: 0;
-  overflow: hidden;
-}
-
-.factory-topology-replay__annotation-image {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: contain;
-}
-
-.factory-topology-replay__annotation-image-state {
-  display: grid;
-  min-block-size: 4rem;
-  place-items: center;
-  padding: 0.75rem;
-  color: var(--color-on-surface-variant);
-  text-align: center;
-}
-
-.factory-topology-replay__annotation-image-state[role="alert"] {
-  color: var(--color-error);
-}
-
-.factory-topology-replay__node-button,
-.factory-topology-replay__node-static {
-  display: block;
-  inline-size: 100%;
-  margin: 0;
-}
-
-.factory-topology-replay__node-button:focus-visible {
-  border-radius: 0.625rem;
-  outline: 0.1875rem solid
-    var(--color-primary, var(--color-af-foundation-accent));
-  outline-offset: 0.25rem;
-}
-
-.factory-topology-replay__legend {
-  display: inline-block;
-  padding: 0.5rem 0.75rem;
-  margin: 0 0 0.75rem;
-  color: var(--color-on-surface);
-  background: var(--color-surface-container-low);
-  border: 1px solid var(--color-outline-variant);
-  border-radius: 0.5rem;
-}
-
-.factory-topology-replay__legend ul {
-  display: grid;
-  gap: 0.25rem;
-  padding: 0;
-  margin: 0.25rem 0 0;
-  list-style: none;
-}
-
-.factory-topology-replay__legend li {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.factory-topology-replay__legend-swatch {
-  inline-size: 1rem;
-  block-size: 0.1875rem;
-  background: var(--color-outline);
-}
-
-.factory-topology-replay__legend-swatch--active {
-  background: var(--color-warning);
-}
-
-.factory-topology-replay__node-title,
-.factory-topology-replay__node-kind,
-.factory-topology-replay__node-cue {
-  display: block;
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-.factory-topology-replay__node-kind,
-.factory-topology-replay__node-cue {
-  color: var(--color-on-surface-variant);
-  font-size: 0.75rem;
-}
-
-.factory-topology-replay__node-kind {
-  text-transform: capitalize;
-}
-
-.factory-topology-replay__node-cue {
-  margin-block-start: 0.25rem;
-}
-
-.factory-topology-replay__node-activity-detail {
-  min-inline-size: 0;
-}
-
-.factory-topology-replay__node-empty-state {
-  display: block;
-  margin-block-start: 0.25rem;
-  color: var(--color-on-surface-variant);
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-.factory-topology-replay__node-empty-state-image {
-  display: block;
-  max-inline-size: 100%;
-  max-block-size: 8rem;
-  margin-block-start: 0.5rem;
-  object-fit: contain;
-}
-
-.factory-topology-replay__node--active {
-  border-block-start: 0.25rem solid var(--color-warning);
-}
-
-.factory-topology-replay .react-flow__edge.animated path {
-  stroke: var(--color-warning);
-  stroke-width: 0.1875rem;
-}
-
 .factory-timeline-scrubber__header,
-.factory-timeline-scrubber__controls {
+.factory-timeline-scrubber__controls,
+.factory-work-progress__header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -352,16 +98,11 @@
 
 .factory-timeline-scrubber__header > *,
 .factory-timeline-scrubber__status,
-.factory-timeline-scrubber__action-status {
+.factory-timeline-scrubber__action-status,
+.factory-work-progress__header > * {
   margin: 0;
 }
 
-.factory-timeline-scrubber__position,
-.factory-timeline-scrubber__status,
-.factory-timeline-scrubber__action-status {
-  color: var(--color-on-surface-variant);
-}
-
 .factory-timeline-scrubber__controls {
   margin-block-start: 1rem;
 }
@@ -392,33 +133,6 @@
   margin-block-start: 0.25rem;
 }
 
-.factory-work-progress {
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-inline-size: 0;
-  padding: 1rem;
-  color: var(--color-on-surface);
-  background: var(--color-surface-container-low);
-  border: 1px solid var(--color-outline-variant);
-  border-radius: 1rem;
-}
-
-.factory-work-progress__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.5rem 1rem;
-}
-
-.factory-work-progress__header > * {
-  margin: 0;
-}
-
-.factory-work-progress__total {
-  color: var(--color-on-surface-variant);
-}
-
 .factory-work-progress__categories {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -474,11 +188,6 @@
 .factory-work-progress__empty {
   padding: 1rem;
   margin: 1rem 0 0;
-  color: var(--color-on-surface-variant);
-  text-align: center;
-  background: var(--color-surface-container);
-  border: 1px dashed var(--color-outline-variant);
-  border-radius: 0.75rem;
 }
 
 @media (min-width: 34rem) {
@@ -504,8 +213,4 @@
     animation-iteration-count: 1;
     transition-duration: 0.01ms;
   }
-
-  .factory-topology-replay .react-flow__edge.animated path {
-    animation: none;
-  }
 }

package/dist/visualizer-error.d.ts

@@ -9,13 +9,7 @@ export interface FactoryVisualizerError {
     message: string;
     recoverable: boolean;
 }
-export interface FactoryVisualizationLayoutDiagnostic {
-    issues: readonly Pick<FactoryVisualizationLayoutIssue, "category" | "code" | "path">[];
-    kind: "layout-validation";
-    message: string;
-    recoverable: true;
-}
-export type FactoryTopologyReplayError = FactoryVisualizerError | FactoryVisualizationLayoutDiagnostic;
+export type FactoryTopologyReplayError = FactoryVisualizerError;
 export declare class FactoryVisualizerInternalError extends Error {
     readonly kind: FactoryVisualizerErrorKind;
     readonly originalCause: unknown;
@@ -24,4 +18,3 @@ export declare class FactoryVisualizerInternalError extends Error {
 export declare function toFactoryVisualizerError(kind: FactoryVisualizerErrorKind, cause?: unknown): FactoryVisualizerError;
 export declare function normalizeFactoryVisualizerError(error: unknown, fallbackKind: FactoryVisualizerErrorKind): FactoryVisualizerError;
 export declare function factoryVisualizerErrorKey(error: FactoryVisualizerError): string;
-import type { FactoryVisualizationLayoutIssue } from "@you-agent-factory/client";

package/dist/work-progress-visualizer.d.ts

@@ -16,4 +16,4 @@ export interface WorkProgressVisualizerProps extends Omit<HTMLAttributes<HTMLEle
     messages: WorkProgressVisualizerMessages;
     projection: FactoryWorkProgressProjection;
 }
-export declare function WorkProgressVisualizer({ className, formatNumber, messages, projection, ...sectionProps }: WorkProgressVisualizerProps): import("react").JSX.Element;
+export declare function WorkProgressVisualizer({ className, formatNumber, messages, projection, ...sectionProps }: WorkProgressVisualizerProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@you-agent-factory/factory-visualizers",
-  "version": "0.0.2",
-  "description": "Controlled React visualizers for caller-prepared Factory replay projections.",
+  "version": "0.0.6",
+  "description": "Controlled React hosts for the canonical Factory semantic graph.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,14 +32,14 @@
     "./examples/support-playback.factory-recording.v1.json": "./examples/support-playback.factory-recording.v1.json"
   },
   "scripts": {
-    "build": "node scripts/build-package.mjs",
+    "build": "bun run prepare:dependencies && bun run build:current",
+    "build:current": "node scripts/build-package.mjs",
     "build-storybook": "storybook build --loglevel warn",
     "check:installed-consumer": "node scripts/verify-installed-consumer.mjs",
     "check:pack": "node scripts/verify-package-pack.mjs",
     "check:package-boundary": "node scripts/check-package-boundary.mjs",
     "lint": "biome check .",
-    "prepack": "bun run build",
-    "prepare:dependencies": "bun run --cwd ../client build && bun run --cwd ../components build && bun run --cwd ../factory-replay build",
+    "prepare:dependencies": "bun run --cwd ../client build && bun run --cwd ../components build && bun run --cwd ../factory-replay build && bun run --cwd ../factory-graph build",
     "storybook": "storybook dev -p 6027",
     "test": "vitest run --config vitest.config.ts",
     "test-storybook": "bun run build-storybook && bun run verify:accessibility-responsive",
@@ -48,12 +48,13 @@
     "verify": "bun run typecheck && bun run lint && bun run test && bun run build && bun run test-storybook && bun run check:package-boundary && bun run check:pack && bun run check:installed-consumer"
   },
   "dependencies": {
-    "@you-agent-factory/components": "0.0.2",
+    "@you-agent-factory/components": "0.0.6",
+    "@you-agent-factory/factory-graph": "0.0.0",
     "@xyflow/react": "^12.10.2"
   },
   "peerDependencies": {
-    "@you-agent-factory/client": "0.0.2",
-    "@you-agent-factory/factory-replay": "0.0.2",
+    "@you-agent-factory/client": "0.0.6",
+    "@you-agent-factory/factory-replay": "0.0.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -66,8 +67,9 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react-swc": "^4.1.0",
-    "@you-agent-factory/client": "file:../client",
-    "@you-agent-factory/factory-replay": "file:../factory-replay",
+    "@you-agent-factory/client": "0.0.6",
+    "@you-agent-factory/factory-graph": "workspace:*",
+    "@you-agent-factory/factory-replay": "0.0.6",
     "axe-core": "^4.10.2",
     "happy-dom": "^20.9.0",
     "jest-axe": "^10.0.0",

package/dist/factory-topology-active-work.d.ts

@@ -1,11 +0,0 @@
-import type { FactoryActivityProjection } from "@you-agent-factory/factory-replay";
-export interface FactoryTopologyActiveWorkRow {
-    durationTicks: number;
-    id: string;
-}
-export interface FactoryTopologyActiveWorkSummary {
-    overflowCount: number;
-    rows: readonly FactoryTopologyActiveWorkRow[];
-}
-/** Derives bounded, read-only Work activity from the prepared projection. */
-export declare function projectFactoryTopologyActiveWork(activity: FactoryActivityProjection): FactoryTopologyActiveWorkSummary;

package/dist/factory-topology-chrome.d.ts

@@ -1,14 +0,0 @@
-/** Optional presentation regions for the public, read-only Factory topology. */
-export type FactoryTopologyChromeRegion = "legend" | "background" | "viewportControls" | "visibilityControls";
-export type FactoryTopologyChromePreset = "full" | "minimal" | "none";
-export interface FactoryTopologyChromeConfiguration {
-    background?: boolean;
-    legend?: boolean;
-    preset?: FactoryTopologyChromePreset;
-    viewportControls?: boolean;
-    visibilityControls?: boolean;
-}
-export type ResolvedFactoryTopologyChrome = Readonly<Record<FactoryTopologyChromeRegion, boolean>>;
-export declare const DEFAULT_FACTORY_TOPOLOGY_CHROME_PRESET: FactoryTopologyChromePreset;
-/** Resolves presentation without receiving or changing replay projection data. */
-export declare function resolveFactoryTopologyChrome(configuration?: FactoryTopologyChromeConfiguration): ResolvedFactoryTopologyChrome;

package/dist/factory-topology-flow-projection.d.ts

@@ -1,12 +0,0 @@
-import type { Edge, Node } from "@xyflow/react";
-import type { FactoryVisualizationLayoutV1 } from "@you-agent-factory/client";
-import type { FactoryTopologyNode } from "@you-agent-factory/factory-replay";
-import type { FactoryTopologyReplayMessages, FactoryTopologyReplayProjection } from "./factory-topology-replay";
-import type { AnnotationNodeData, TopologyNodeData } from "./factory-topology-replay-nodes";
-export interface FactoryTopologyFlowProjection {
-    edges: Edge[];
-    nodes: Node<TopologyNodeData | AnnotationNodeData>[];
-    validEndpoints: boolean;
-}
-/** Convert immutable replay projections into disposable React Flow view data. */
-export declare function projectFactoryTopologyFlow(projection: FactoryTopologyReplayProjection, messages: FactoryTopologyReplayMessages, selectedNodeId: string | undefined, onSelectNode: ((node: FactoryTopologyNode) => void) | undefined, prefersReducedMotion?: boolean, layout?: FactoryVisualizationLayoutV1): FactoryTopologyFlowProjection;

package/dist/factory-topology-replay-nodes.d.ts

@@ -1,32 +0,0 @@
-import type { Node, NodeProps } from "@xyflow/react";
-import type { FactoryVisualizationAnnotation, FactoryVisualizationNodeEmptyState } from "@you-agent-factory/client";
-import type { FactoryTopologyNode } from "@you-agent-factory/factory-replay";
-import type { FactoryTopologyReplayMessages } from "./factory-topology-replay";
-export interface TopologyNodeData extends Record<string, unknown> {
-    activityCount: number;
-    emptyState?: FactoryVisualizationNodeEmptyState["content"];
-    messages: FactoryTopologyReplayMessages;
-    node: FactoryTopologyNode;
-    occupancy?: {
-        capacity?: number;
-        evidence: "known" | "unavailable";
-        occupied?: number;
-    };
-    onSelectNode?: (node: FactoryTopologyNode) => void;
-    selected: boolean;
-    workStateCount?: {
-        count?: number;
-        evidence: "known" | "unavailable";
-    };
-}
-export interface AnnotationNodeData extends Record<string, unknown> {
-    annotation: FactoryVisualizationAnnotation;
-    messages: FactoryTopologyReplayMessages;
-}
-export declare const nodeTypes: {
-    factoryTopologyAnnotation: typeof FactoryTopologyAnnotationView;
-    factoryTopologyNode: typeof FactoryTopologyNodeView;
-};
-declare function FactoryTopologyAnnotationView({ data, }: NodeProps<Node<AnnotationNodeData>>): import("react").JSX.Element;
-declare function FactoryTopologyNodeView({ data }: NodeProps<Node<TopologyNodeData>>): import("react").JSX.Element;
-export {};