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

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Text, Button, Heading, FactoryEmulatorControls as FactoryEmulatorControls$1 } from "@you-agent-factory/components";
-import { Component, useId, useRef, useState, useEffect, useMemo } from "react";
-import { ReactFlow, Background, Controls } from "@xyflow/react";
-import { safeParseFactoryVisualizationLayout, safeParseFactoryRecording } from "@you-agent-factory/client";
-import { GraphNodeShell, GraphNodeButton } from "@you-agent-factory/components/graphs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FactoryEmulatorControls as FactoryEmulatorControls$1 } from "@you-agent-factory/components/factory-emulator";
+import { Text, Button, Heading } from "@you-agent-factory/components/primitives";
+import { Component, useId, useMemo, useRef, useEffect, useState } from "react";
+import { FactoryGraphReplaySurface, createFactoryGraphSource } from "@you-agent-factory/factory-graph";
+import { safeParseFactoryRecording } from "@you-agent-factory/client";
 import { canonicalizeFactoryEvents, projectFactoryTopologyAtTick, projectFactoryWorkProgressAtTick, projectFactoryLoadAtTick, projectFactoryActivityAtTick } from "@you-agent-factory/factory-replay";
 const ERROR_MESSAGES = {
   endpoint: "The prepared topology contains invalid edge endpoints.",
@@ -248,445 +248,6 @@ function FactoryEmulatorControls({
     }
   );
 }
-const VISIBLE_ACTIVE_WORK_ROWS = 3;
-function projectFactoryTopologyActiveWork(activity) {
-  const durationByWorkId = /* @__PURE__ */ new Map();
-  for (const overlay of activity.activeDispatchOverlays) {
-    const durationTicks = Math.max(
-      0,
-      activity.selectedTick - overlay.startedTick
-    );
-    for (const workId of overlay.workIds ?? []) {
-      const previousDuration = durationByWorkId.get(workId);
-      if (previousDuration === void 0 || durationTicks > previousDuration)
-        durationByWorkId.set(workId, durationTicks);
-    }
-  }
-  const rows = [...durationByWorkId].sort(([left], [right]) => left.localeCompare(right)).map(([id, durationTicks]) => ({ durationTicks, id }));
-  return {
-    overflowCount: Math.max(0, rows.length - VISIBLE_ACTIVE_WORK_ROWS),
-    rows: rows.slice(0, VISIBLE_ACTIVE_WORK_ROWS)
-  };
-}
-const DEFAULT_FACTORY_TOPOLOGY_CHROME_PRESET = "full";
-const FACTORY_TOPOLOGY_CHROME_PRESETS = {
-  full: {
-    background: true,
-    legend: true,
-    viewportControls: true,
-    visibilityControls: true
-  },
-  minimal: {
-    background: true,
-    legend: false,
-    viewportControls: true,
-    visibilityControls: false
-  },
-  none: {
-    background: false,
-    legend: false,
-    viewportControls: false,
-    visibilityControls: false
-  }
-};
-function resolveFactoryTopologyChrome(configuration = {}) {
-  const preset = configuration.preset ?? DEFAULT_FACTORY_TOPOLOGY_CHROME_PRESET;
-  const resolvedPreset = FACTORY_TOPOLOGY_CHROME_PRESETS[preset];
-  return {
-    background: configuration.background ?? resolvedPreset.background,
-    legend: configuration.legend ?? resolvedPreset.legend,
-    viewportControls: configuration.viewportControls ?? resolvedPreset.viewportControls,
-    visibilityControls: configuration.visibilityControls ?? resolvedPreset.visibilityControls
-  };
-}
-const columnByKind = {
-  resource: 0,
-  worker: 1,
-  "work-type": 2,
-  "work-state": 3,
-  workstation: 4
-};
-const DEFAULT_ANNOTATION_WIDTH = 240;
-function projectFactoryTopologyFlow(projection, messages, selectedNodeId, onSelectNode, prefersReducedMotion = false, layout) {
-  try {
-    const { connections, nodes: topologyNodes } = projection.topology;
-    const nodeById = new Map(topologyNodes.map((node) => [node.id, node]));
-    const validEndpoints = connections.every(
-      (connection) => connectionHasRenderedEndpoints(connection, nodeById)
-    );
-    const nodeData = nodePresentationData(projection, connections, layout);
-    return {
-      edges: validEndpoints ? projectEdges(connections, projection.activity, prefersReducedMotion) : [],
-      nodes: [
-        ...projectTopologyNodes(
-          topologyNodes,
-          messages,
-          selectedNodeId,
-          onSelectNode,
-          nodeData
-        ),
-        ...projectAnnotations(layout, messages)
-      ],
-      validEndpoints
-    };
-  } catch (error) {
-    if (error instanceof FactoryVisualizerInternalError) throw error;
-    throw new FactoryVisualizerInternalError("projection", error);
-  }
-}
-function nodePresentationData(projection, connections, layout) {
-  return {
-    activeDetailNodeIds: activityDetailNodeIds(
-      projection.activity,
-      connections,
-      projection.load.resourceOccupancy,
-      projection.load.workStateCounts
-    ),
-    activityCountByNode: activityCounts(projection.activity),
-    emptyStateByNode: new Map(
-      (layout?.nodeEmptyStates ?? []).map((state) => [
-        state.nodeId,
-        state.content
-      ])
-    ),
-    occupancyByNode: new Map(
-      projection.load.resourceOccupancy.map((occupancy) => [
-        occupancy.resourceNodeId,
-        occupancy
-      ])
-    ),
-    workStateCountByNode: new Map(
-      projection.load.workStateCounts.map((count) => [
-        count.workStateNodeId,
-        count
-      ])
-    )
-  };
-}
-function projectTopologyNodes(topologyNodes, messages, selectedNodeId, onSelectNode, data) {
-  const rowByKind = /* @__PURE__ */ new Map();
-  return topologyNodes.map((node) => {
-    const row = rowByKind.get(node.kind) ?? 0;
-    rowByKind.set(node.kind, row + 1);
-    const occupancy = data.occupancyByNode.get(node.id);
-    const workStateCount = data.workStateCountByNode.get(node.id);
-    return {
-      data: {
-        activityCount: data.activityCountByNode.get(node.id) ?? 0,
-        ...data.activeDetailNodeIds.has(node.id) ? {} : { emptyState: data.emptyStateByNode.get(node.id) },
-        messages,
-        node,
-        ...occupancy ? {
-          occupancy: {
-            capacity: occupancy.capacity,
-            evidence: occupancy.evidence,
-            occupied: occupancy.occupiedQuantity
-          }
-        } : {},
-        onSelectNode,
-        selected: selectedNodeId === node.id,
-        ...workStateCount ? {
-          workStateCount: {
-            count: workStateCount.count,
-            evidence: workStateCount.evidence
-          }
-        } : {}
-      },
-      draggable: false,
-      id: node.id,
-      position: layoutNode(node.kind, row),
-      selectable: false,
-      type: "factoryTopologyNode"
-    };
-  });
-}
-function projectAnnotations(layout, messages) {
-  return (layout?.annotations ?? []).map((annotation) => ({
-    data: { annotation, messages },
-    draggable: false,
-    id: `annotation:${annotation.id}`,
-    position: annotation.position,
-    selectable: false,
-    type: "factoryTopologyAnnotation",
-    style: {
-      ...annotation.size ? { height: annotation.size.height } : {},
-      width: annotation.size?.width ?? DEFAULT_ANNOTATION_WIDTH
-    }
-  }));
-}
-function projectEdges(connections, activity, prefersReducedMotion) {
-  return connections.map((connection) => ({
-    animated: !prefersReducedMotion && activity.activeDispatchOverlays.some(
-      (overlay) => overlay.connectionIds.includes(connection.id)
-    ),
-    data: { relationship: connection.kind },
-    id: connection.id,
-    source: connection.source.nodeId,
-    sourceHandle: connection.source.handleId,
-    target: connection.target.nodeId,
-    targetHandle: connection.target.handleId
-  }));
-}
-function connectionHasRenderedEndpoints(connection, nodeById) {
-  const source = nodeById.get(connection.source.nodeId);
-  const target = nodeById.get(connection.target.nodeId);
-  return Boolean(
-    source?.handles.some(
-      (handle) => handle.id === connection.source.handleId && handle.role === "source"
-    ) && target?.handles.some(
-      (handle) => handle.id === connection.target.handleId && handle.role === "target"
-    )
-  );
-}
-function activityCounts(activity) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const overlay of activity.activeDispatchOverlays) {
-    for (const nodeId of /* @__PURE__ */ new Set([
-      overlay.workerNodeId,
-      overlay.workstationNodeId,
-      ...overlay.resourceNodeIds ?? []
-    ])) {
-      if (nodeId) counts.set(nodeId, (counts.get(nodeId) ?? 0) + 1);
-    }
-  }
-  return counts;
-}
-function activityDetailNodeIds(activity, connections, resourceOccupancy, workStateCounts) {
-  const nodeIds = new Set(activity.activeWorkstationNodeIds);
-  const connectionById = new Map(
-    connections.map((connection) => [connection.id, connection])
-  );
-  for (const occupancy of resourceOccupancy)
-    if (occupancy.evidence === "known") nodeIds.add(occupancy.resourceNodeId);
-  for (const state of workStateCounts)
-    if (state.evidence === "known" && typeof state.count === "number" && state.count > 0)
-      nodeIds.add(state.workStateNodeId);
-  for (const overlay of activity.activeDispatchOverlays) {
-    for (const nodeId of [
-      overlay.workerNodeId,
-      overlay.workstationNodeId,
-      ...overlay.resourceNodeIds ?? []
-    ])
-      if (nodeId) nodeIds.add(nodeId);
-    for (const connectionId of overlay.connectionIds) {
-      const connection = connectionById.get(connectionId);
-      if (connection) {
-        nodeIds.add(connection.source.nodeId);
-        nodeIds.add(connection.target.nodeId);
-      }
-    }
-  }
-  return nodeIds;
-}
-function layoutNode(kind, row) {
-  const column = columnByKind[kind];
-  if (column === void 0 || !Number.isSafeInteger(row) || row < 0)
-    throw new FactoryVisualizerInternalError("layout");
-  return { x: column * 260, y: row * 170 };
-}
-const nodeTypes = {
-  factoryTopologyAnnotation: FactoryTopologyAnnotationView,
-  factoryTopologyNode: FactoryTopologyNodeView
-};
-function FactoryTopologyAnnotationView({
-  data
-}) {
-  const { annotation, messages } = data;
-  if (annotation.kind === "image") {
-    return /* @__PURE__ */ jsx(
-      FactoryTopologyAnnotationImage,
-      {
-        annotation,
-        messages
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: "factory-topology-replay__annotation",
-      "data-tone": annotation.tone ?? "neutral",
-      children: [
-        annotation.title ? /* @__PURE__ */ jsx("strong", { className: "factory-topology-replay__annotation-title", children: annotation.title }) : null,
-        /* @__PURE__ */ jsx("span", { className: "factory-topology-replay__annotation-body", children: annotation.body })
-      ]
-    }
-  );
-}
-function FactoryTopologyAnnotationImage({
-  annotation,
-  messages
-}) {
-  const image = useEmbeddedImageUrl(annotation.source);
-  return /* @__PURE__ */ jsx("figure", { className: "factory-topology-replay__annotation factory-topology-replay__annotation--image", children: image.status === "ready" ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      alt: annotation.altText,
-      className: "factory-topology-replay__annotation-image",
-      onError: image.fail,
-      src: image.url
-    }
-  ) : /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "factory-topology-replay__annotation-image-state",
-      role: image.status === "failed" ? "alert" : "status",
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: annotation.altText }),
-        image.status === "failed" ? messages.imageFailed : messages.imageLoading
-      ]
-    }
-  ) });
-}
-function FactoryTopologyNodeView({ data }) {
-  const {
-    activityCount,
-    emptyState,
-    messages,
-    node,
-    occupancy,
-    onSelectNode,
-    selected,
-    workStateCount
-  } = data;
-  const state = selected ? "selected" : "default";
-  const handles = node.handles.map((handle) => ({
-    connectable: false,
-    id: handle.id,
-    label: handle.id,
-    side: handle.role === "target" ? "left" : "right",
-    type: handle.role
-  }));
-  const content = /* @__PURE__ */ jsxs(
-    GraphNodeShell,
-    {
-      className: activityCount > 0 ? "factory-topology-replay__node--active" : "",
-      "data-dispatch-activity": activityCount > 0 ? "active" : "inactive",
-      handles,
-      nodeKind: node.kind,
-      showStateIndicator: false,
-      state,
-      children: [
-        /* @__PURE__ */ jsx("strong", { className: "factory-topology-replay__node-title", children: node.label }),
-        /* @__PURE__ */ jsx("span", { className: "factory-topology-replay__node-kind", children: node.kind }),
-        /* @__PURE__ */ jsx("div", { className: "factory-topology-replay__node-activity-detail", children: emptyState ? /* @__PURE__ */ jsx(
-          FactoryTopologyNodeEmptyStateView,
-          {
-            content: emptyState,
-            messages
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: "factory-topology-replay__node-cue", children: [
-          activityCount > 0 ? "●" : "○",
-          " ",
-          activityCount > 0 ? messages.activeDispatches(activityCount) : messages.inactiveDispatches
-        ] }) }),
-        node.kind === "resource" ? /* @__PURE__ */ jsxs("span", { className: "factory-topology-replay__node-cue", children: [
-          "◫",
-          " ",
-          occupancy?.evidence === "known" && occupancy.occupied !== void 0 && occupancy.capacity !== void 0 ? messages.resourceOccupancy(occupancy.occupied, occupancy.capacity) : messages.resourceOccupancyUnavailable
-        ] }) : null,
-        node.kind === "work-state" ? /* @__PURE__ */ jsxs("span", { className: "factory-topology-replay__node-cue", children: [
-          "∑",
-          " ",
-          workStateCount?.evidence === "known" && workStateCount.count !== void 0 ? messages.workStateCount(workStateCount.count) : messages.workStateCountUnavailable
-        ] }) : null,
-        selected ? /* @__PURE__ */ jsxs("span", { className: "factory-topology-replay__node-cue", children: [
-          "✓ ",
-          messages.selectedNode
-        ] }) : null
-      ]
-    }
-  );
-  return onSelectNode ? /* @__PURE__ */ jsx(
-    GraphNodeButton,
-    {
-      "aria-label": messages.nodeLabel(node.kind, node.label),
-      className: "factory-topology-replay__node-button",
-      graphState: state,
-      onClick: () => onSelectNode(node),
-      children: content
-    }
-  ) : /* @__PURE__ */ jsx(
-    "figure",
-    {
-      "aria-label": messages.nodeLabel(node.kind, node.label),
-      className: "factory-topology-replay__node-static",
-      children: content
-    }
-  );
-}
-function FactoryTopologyNodeEmptyStateView({
-  content,
-  messages
-}) {
-  return content.kind === "image" ? /* @__PURE__ */ jsx(FactoryTopologyEmptyStateImage, { content, messages }) : /* @__PURE__ */ jsx("span", { className: "factory-topology-replay__node-empty-state", children: content.text });
-}
-function FactoryTopologyEmptyStateImage({
-  content,
-  messages
-}) {
-  const image = useEmbeddedImageUrl(content.source);
-  return image.status === "ready" ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      alt: content.altText,
-      className: "factory-topology-replay__node-empty-state-image",
-      onError: image.fail,
-      src: image.url
-    }
-  ) : /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: "factory-topology-replay__node-empty-state",
-      role: image.status === "failed" ? "alert" : "status",
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: content.altText }),
-        image.status === "failed" ? messages.imageFailed : messages.imageLoading
-      ]
-    }
-  );
-}
-function useEmbeddedImageUrl(source) {
-  const urlRef = useRef(void 0);
-  const [state, setState] = useState({ status: "loading" });
-  useEffect(() => {
-    try {
-      const url = URL.createObjectURL(
-        new Blob([decodeEmbeddedImage(source.base64)], {
-          type: source.mediaType
-        })
-      );
-      urlRef.current = url;
-      setState({ status: "ready", url });
-      return () => {
-        if (urlRef.current === url) {
-          URL.revokeObjectURL(url);
-          urlRef.current = void 0;
-        }
-      };
-    } catch {
-      setState({ status: "failed" });
-      return void 0;
-    }
-  }, [source]);
-  return {
-    fail: () => {
-      if (urlRef.current) {
-        URL.revokeObjectURL(urlRef.current);
-        urlRef.current = void 0;
-      }
-      setState({ status: "failed" });
-    },
-    ...state
-  };
-}
-function decodeEmbeddedImage(base64) {
-  const decoded = atob(base64);
-  const bytes = new Uint8Array(decoded.length);
-  for (let index = 0; index < decoded.length; index += 1)
-    bytes[index] = decoded.charCodeAt(index);
-  return bytes.buffer;
-}
 function FactoryTopologyStateRegion({
   messages,
   onRetry,
@@ -771,18 +332,6 @@ class FactoryTopologyErrorBoundary extends Component {
     this.props.onError?.(error);
   }
 }
-function useDistinctTopologyErrorReport(error, onError) {
-  const reportedErrors = useRef(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    if (!error) return;
-    const key = error.kind === "layout-validation" ? error.issues.map(
-      (issue) => `${issue.category}:${issue.code}:${issue.path.join(".")}`
-    ).join("|") : factoryVisualizerErrorKey(error);
-    if (reportedErrors.current.has(key)) return;
-    reportedErrors.current.add(key);
-    onError?.(error);
-  }, [error, onError]);
-}
 function resetKeysChanged(previous, current) {
   return previous.length !== current.length || previous.some((value, index) => value !== current[index]);
 }
@@ -800,10 +349,7 @@ function FactoryTopologyReplay(props) {
   );
 }
 function FactoryTopologyReplayContent({
-  chrome,
   messages,
-  onError,
-  layout,
   onRetry,
   onSelectNode,
   selectedNodeId,
@@ -814,93 +360,8 @@ function FactoryTopologyReplayContent({
       FactoryTopologyStateRegion,
       {
         messages,
-        state: state.status,
-        onRetry
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    PreparedTopology,
-    {
-      chrome,
-      messages,
-      onError,
-      onRetry,
-      onSelectNode,
-      layout,
-      projection: state.projection,
-      selectedNodeId
-    }
-  );
-}
-function PreparedTopology({
-  chrome,
-  messages,
-  onError,
-  layout,
-  onRetry,
-  onSelectNode,
-  projection,
-  selectedNodeId
-}) {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const resolvedChrome = resolveFactoryTopologyChrome(chrome);
-  const prepared = useMemo(() => {
-    try {
-      const parsedLayout = layout === void 0 ? void 0 : safeParseFactoryVisualizationLayout(layout, {
-        canonicalNodeIds: new Set(
-          projection.topology.nodes.map((node) => node.id)
-        )
-      });
-      if (parsedLayout && !parsedLayout.success) {
-        return {
-          error: {
-            issues: parsedLayout.issues.map(({ category, code, path }) => ({
-              category,
-              code,
-              path
-            })),
-            kind: "layout-validation",
-            message: "The topology layout could not be prepared.",
-            recoverable: true
-          },
-          status: "failed"
-        };
-      }
-      const flow = projectFactoryTopologyFlow(
-        projection,
-        messages,
-        selectedNodeId,
-        onSelectNode,
-        prefersReducedMotion,
-        parsedLayout?.data
-      );
-      return flow.validEndpoints ? { flow, status: "ready" } : { error: toFactoryVisualizerError("endpoint"), status: "failed" };
-    } catch (error) {
-      return {
-        error: normalizeFactoryVisualizerError(error, "projection"),
-        status: "failed"
-      };
-    }
-  }, [
-    messages,
-    onSelectNode,
-    prefersReducedMotion,
-    projection,
-    layout,
-    selectedNodeId
-  ]);
-  useDistinctTopologyErrorReport(
-    prepared.status === "failed" ? prepared.error : void 0,
-    onError
-  );
-  if (prepared.status === "failed") {
-    return /* @__PURE__ */ jsx(
-      FactoryTopologyStateRegion,
-      {
-        messages,
-        state: "failed",
-        onRetry
+        onRetry,
+        state: state.status
       }
     );
   }
@@ -909,156 +370,22 @@ function PreparedTopology({
     {
       "aria-label": messages.regionLabel,
       className: "factory-topology-replay",
-      "data-endpoints-valid": "true",
-      "data-reduced-motion": prefersReducedMotion ? "true" : "false",
       children: /* @__PURE__ */ jsx(
-        FactoryTopologyErrorBoundary,
+        FactoryGraphReplaySurface,
         {
-          errorKind: "react-flow",
-          messages,
-          onError,
-          onRetry,
-          resetKeys: [projection, messages, selectedNodeId, onSelectNode, layout],
-          withinRegion: true,
-          children: /* @__PURE__ */ jsx(
-            ReactFlowCanvas,
-            {
-              activity: projection.activity,
-              chrome: resolvedChrome,
-              flow: prepared.flow,
-              messages
-            }
-          )
+          onSelectNode: onSelectNode ? (nodeId) => {
+            const node = state.source.runtime.topology.nodes.find(
+              (entry) => entry.id === nodeId
+            );
+            if (node) onSelectNode(node);
+          } : void 0,
+          selectedNodeId,
+          source: state.source
         }
       )
     }
   );
 }
-function ReactFlowCanvas({
-  activity,
-  chrome,
-  flow,
-  messages
-}) {
-  const chromeMessages = resolveTopologyChromeMessages(messages);
-  const [annotationsVisible, setAnnotationsVisible] = useState(true);
-  const visibleNodes = annotationsVisible ? flow.nodes : flow.nodes.filter((node) => node.type !== "factoryTopologyAnnotation");
-  const hasAnnotations = flow.nodes.some(
-    (node) => node.type === "factoryTopologyAnnotation"
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ActiveWorkSummary, { activity, messages }),
-    chrome.legend ? /* @__PURE__ */ jsx(TopologyLegend, { messages: chromeMessages }) : null,
-    chrome.visibilityControls && hasAnnotations ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-pressed": annotationsVisible,
-        className: "factory-topology-replay__annotation-toggle",
-        onClick: () => setAnnotationsVisible((visible) => !visible),
-        type: "button",
-        children: annotationsVisible ? messages.annotationsVisible : messages.annotationsHidden
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      ReactFlow,
-      {
-        edges: flow.edges,
-        edgesFocusable: false,
-        elementsSelectable: false,
-        fitView: true,
-        fitViewOptions: { includeHiddenNodes: false },
-        nodes: visibleNodes,
-        nodesConnectable: false,
-        nodesDraggable: false,
-        nodeTypes,
-        onNodeClick: preserveNestedNodePointerEvents,
-        panOnDrag: true,
-        proOptions: { hideAttribution: true },
-        children: [
-          chrome.background ? /* @__PURE__ */ jsx(Background, {}) : null,
-          chrome.viewportControls ? /* @__PURE__ */ jsx(
-            Controls,
-            {
-              "aria-label": chromeMessages.viewportControlsLabel,
-              showInteractive: false
-            }
-          ) : null
-        ]
-      },
-      annotationsVisible ? "annotations-visible" : "annotations-hidden"
-    )
-  ] });
-}
-function ActiveWorkSummary({
-  activity,
-  messages
-}) {
-  const activeWork = projectFactoryTopologyActiveWork(activity);
-  if (activeWork.rows.length === 0) return null;
-  return /* @__PURE__ */ jsxs("fieldset", { className: "factory-topology-replay__active-work", children: [
-    /* @__PURE__ */ jsx("legend", { children: messages.activeWorkRegionLabel ?? "Active Work" }),
-    /* @__PURE__ */ jsx("ul", { children: activeWork.rows.map((work) => /* @__PURE__ */ jsxs("li", { children: [
-      /* @__PURE__ */ jsx("span", { children: work.id }),
-      /* @__PURE__ */ jsx("span", { children: messages.activeWorkDuration?.(work.durationTicks) ?? `Active for ${work.durationTicks} ticks` })
-    ] }, work.id)) }),
-    activeWork.overflowCount > 0 ? /* @__PURE__ */ jsx("p", { children: messages.activeWorkOverflow?.(activeWork.overflowCount) ?? `${activeWork.overflowCount} more active Work` }) : null
-  ] });
-}
-function TopologyLegend({ messages }) {
-  return /* @__PURE__ */ jsxs("fieldset", { className: "factory-topology-replay__legend", children: [
-    /* @__PURE__ */ jsx("legend", { children: messages.legendLabel }),
-    /* @__PURE__ */ jsxs("ul", { children: [
-      /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "factory-topology-replay__legend-swatch factory-topology-replay__legend-swatch--active"
-          }
-        ),
-        messages.legendActiveRoute
-      ] }),
-      /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "factory-topology-replay__legend-swatch"
-          }
-        ),
-        messages.legendInactiveRoute
-      ] })
-    ] })
-  ] });
-}
-function resolveTopologyChromeMessages(messages) {
-  return {
-    legendActiveRoute: messages.legendActiveRoute ?? "Active route",
-    legendInactiveRoute: messages.legendInactiveRoute ?? "Inactive route",
-    legendLabel: messages.legendLabel ?? "Topology legend",
-    viewportControlsLabel: messages.viewportControlsLabel ?? "Topology viewport controls"
-  };
-}
-function preserveNestedNodePointerEvents() {
-}
-const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-function usePrefersReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
-    () => reducedMotionMediaQuery()?.matches ?? false
-  );
-  useEffect(() => {
-    const mediaQuery = reducedMotionMediaQuery();
-    if (!mediaQuery) return;
-    const updatePreference = () => setPrefersReducedMotion(mediaQuery.matches);
-    updatePreference();
-    mediaQuery.addEventListener("change", updatePreference);
-    return () => mediaQuery.removeEventListener("change", updatePreference);
-  }, []);
-  return prefersReducedMotion;
-}
-function reducedMotionMediaQuery() {
-  return typeof window === "undefined" || typeof window.matchMedia !== "function" ? void 0 : window.matchMedia(REDUCED_MOTION_QUERY);
-}
 const CATEGORY_PRESENTATION = {
   queued: { cue: "○" },
   active: { cue: "▶" },
@@ -1241,7 +568,6 @@ function createRecordingProjectionCache() {
 function FactoryRecordingTopologyReplay({
   defaultSelectedTick,
   formatNumber,
-  layout,
   messages,
   onError,
   onSelectNode,
@@ -1285,7 +611,6 @@ function FactoryRecordingTopologyReplay({
     {
       defaultSelectedTick,
       formatNumber,
-      layout,
       messages,
       onError,
       onSelectNode,
@@ -1298,7 +623,6 @@ function FactoryRecordingTopologyReplay({
 function ValidatedRecordingReplay({
   defaultSelectedTick,
   formatNumber,
-  layout,
   messages,
   onError,
   onSelectNode,
@@ -1364,20 +688,23 @@ function ValidatedRecordingReplay({
         /* @__PURE__ */ jsx(
           FactoryTopologyReplay,
           {
-            layout,
             messages: messages.topology,
             onError,
             onSelectNode,
             selectedNodeId,
             state: {
-              ...prepared.topology.nodes.length === 0 ? { status: "empty" } : {
-                projection: {
-                  activity: prepared.activity,
-                  load: prepared.load,
-                  topology: prepared.topology
-                },
+              ...prepared.topology.nodes.length === 0 ? { status: "empty" } : recording.factory ? {
+                source: createFactoryGraphSource({
+                  factory: recording.factory,
+                  runtime: {
+                    activity: prepared.activity,
+                    load: prepared.load,
+                    topology: prepared.topology
+                  },
+                  selectedTick
+                }),
                 status: "ready"
-              }
+              } : { status: "failed" }
             }
           }
         ),
@@ -1457,13 +784,10 @@ function useDistinctVisualizerErrorReport(error, onError) {
   }, [error, onError]);
 }
 export {
-  DEFAULT_FACTORY_TOPOLOGY_CHROME_PRESET,
   FactoryEmulatorControls,
   FactoryEmulatorView,
   FactoryRecordingTopologyReplay,
   FactoryTimelineScrubber,
   FactoryTopologyReplay,
-  WorkProgressVisualizer,
-  projectFactoryTopologyFlow,
-  resolveFactoryTopologyChrome
+  WorkProgressVisualizer
 };