pi-fabric 0.28.13 → 0.29.0

package/dist/ui/dashboard-fabric-graph.js

@@ -2,15 +2,17 @@ import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { colorStatus, entityTail, statusGlyph } from "./dashboard-presentation.js";
 import { padToWidth, safeText } from "./format.js";
 import { isActiveStatus } from "./types.js";
+import { loadStateFilePreview, renderStateFilePreview } from "./state-file-preview.js";
 const kindRank = {
     agent: 0,
     actor: 1,
     participant: 2,
     peer: 3,
-    topic: 4,
-    state: 5,
-    route: 6,
-    main: 7,
+    group: 4,
+    topic: 5,
+    state: 6,
+    route: 7,
+    main: 8,
 };
 const activeRank = (status) => isActiveStatus(status) && status !== "blocked" ? 0 : status === "blocked" ? 1 : 2;
 const nodeKind = (entity) => {
@@ -59,30 +61,124 @@ const graphLabel = (value, maxWidth) => {
     }
     return output;
 };
-const graphGlyph = (kind) => {
-    if (kind === "main")
-        return "◆";
-    if (kind === "actor")
+const graphGlyph = (node, animation) => {
+    if (node.stale)
+        return animation.reducedMotion ? "·" : ["▧", "▫", "·", " "][Math.floor(animation.now / 240) % 4];
+    const frame = Math.floor(animation.now / 160);
+    const active = isActiveStatus(node.status);
+    if (node.kind === "main")
+        return active && !animation.reducedMotion ? ["◇", "◈", "◆", "◈"][frame % 4] : "◆";
+    if (node.kind === "actor") {
+        if ((node.queued ?? 0) > 0 && !animation.reducedMotion)
+            return ["◇", "◈", "◆", "◈"][frame % 4];
         return "◇";
-    if (kind === "peer")
+    }
+    if (node.kind === "peer")
         return "◈";
-    if (kind === "topic")
-        return "◎";
-    if (kind === "state")
+    if (node.kind === "group")
+        return "▱";
+    if (node.kind === "topic") {
+        const hot = node.activityAt !== undefined && animation.now - node.activityAt <= 10_000;
+        return hot && !animation.reducedMotion ? ["◎", "◉", "⦿", "◉"][frame % 4] : "◎";
+    }
+    if (node.kind === "state") {
+        if (/certified|committed|complete/.test(node.status) && !animation.reducedMotion) {
+            return ["◫", "▣", "✦", "▣"][Math.floor(animation.now / 280) % 4];
+        }
         return "◫";
-    if (kind === "route")
-        return "↝";
-    if (kind === "participant")
+    }
+    if (node.kind === "participant")
         return "▧";
+    if (node.kind === "agent" && !animation.reducedMotion) {
+        const spawnAge = node.startedAt === undefined ? Number.POSITIVE_INFINITY : animation.now - node.startedAt;
+        if (spawnAge >= 0 && spawnAge <= 1_600) {
+            return ["·", "▪", "▫", "▣", "■"][Math.min(4, Math.floor(spawnAge / 320))];
+        }
+        if (active)
+            return ["■", "▣", "▪", "▣"][frame % 4];
+    }
     return "■";
 };
+const PARTICIPANTS_GROUP_ID = "group:participants";
+const MESH_GROUP_ID = "group:mesh";
+const TOPICS_GROUP_ID = "group:mesh:topics";
+const STATE_GROUP_ID = "group:mesh:state";
+export const topologyParticipantGroup = (kind) => {
+    if (kind === "actor")
+        return { id: "actors", label: "Actors", order: 2 };
+    if (kind === "agent")
+        return { id: "agents", label: "Agents", order: 1 };
+    return { id: "sessions", label: "Sessions", order: 0 };
+};
+const titleSegment = (value) => value.length === 0 ? value : value[0].toUpperCase() + value.slice(1);
+const namespaceParts = (value) => value.split(/[.:/]+/).map((part) => part.trim()).filter(Boolean);
+export const topologyTopicGroupPath = (name) => {
+    const parts = namespaceParts(name);
+    if (parts[0] === "fabric") {
+        return [
+            { id: "fabric", label: "Fabric" },
+            ...(parts.length > 2 && parts[1]
+                ? [{ id: `fabric:${parts[1]}`, label: titleSegment(parts[1]) }]
+                : []),
+        ];
+    }
+    return [
+        { id: "project", label: "Project topics" },
+        ...(parts.length > 1 && parts[0]
+            ? [{ id: `project:${parts[0]}`, label: parts[0] }]
+            : []),
+    ];
+};
+export const topologyStateGroupPath = (key) => {
+    const parts = key.split("/").map((part) => part.trim()).filter(Boolean);
+    if (parts[0] === "state") {
+        const path = [{ id: "world", label: "World state" }];
+        if (parts[1] === "complexity") {
+            let prefix = "world:complexity";
+            path.push({ id: prefix, label: "Complexity" });
+            for (const directory of parts.slice(2, -1)) {
+                prefix += `:${directory}`;
+                path.push({ id: prefix, label: directory });
+            }
+        }
+        else {
+            let prefix = "world";
+            for (const directory of parts.slice(1, -1)) {
+                prefix += `:${directory}`;
+                path.push({ id: prefix, label: titleSegment(directory) });
+            }
+        }
+        return path;
+    }
+    if (parts[0] === "schema") {
+        const path = [{ id: "schema", label: "Schema" }];
+        const family = parts[1];
+        if (family === "hypothesis")
+            path.push({ id: "schema:hypotheses", label: "Hypotheses" });
+        else if (family === "certificate")
+            path.push({ id: "schema:certificates", label: "Certificates" });
+        else {
+            let prefix = "schema";
+            for (const directory of parts.slice(1, -1)) {
+                prefix += `:${directory}`;
+                path.push({ id: prefix, label: titleSegment(directory) });
+            }
+        }
+        return path;
+    }
+    const path = [{ id: "project", label: "Project state" }];
+    let prefix = "project";
+    for (const directory of parts.slice(0, -1)) {
+        prefix += `:${directory}`;
+        path.push({ id: prefix, label: directory });
+    }
+    return path;
+};
 const parentReference = (entity) => {
     if (entity.kind === "agent")
         return entity.value.parentId ?? entity.value.actorId;
     if (entity.kind === "meshParticipant")
         return entity.value.participant?.parentId;
-    if (entity.kind === "state")
-        return entity.value.owner;
     if (entity.kind === "meshRoute")
         return entity.value.fromId;
     return undefined;
@@ -100,19 +196,94 @@ const buildLayout = (snapshot, entities, selectedRun, mesh) => {
     aliases.set(snapshot.main.id, mainId);
     aliases.set(snapshot.main.name, mainId);
     aliases.set("main", mainId);
-    const nodes = entities.map((entity) => {
+    const groups = new Map();
+    const ensureGroup = (id, label, parentId, order) => {
+        if (!groups.has(id)) {
+            groups.set(id, {
+                id,
+                label,
+                status: "idle",
+                kind: "group",
+                parentId,
+                order,
+                x: 0,
+                y: 0,
+            });
+        }
+        return id;
+    };
+    const ensurePath = (rootId, path) => {
+        let parentId = rootId;
+        for (let index = 0; index < path.length; index++) {
+            const segment = path[index];
+            const id = `${rootId}:${segment.id}`;
+            parentId = ensureGroup(id, segment.label, parentId, index);
+        }
+        return parentId;
+    };
+    const participantCategory = (entity) => {
+        if (entity.kind === "actor")
+            return topologyParticipantGroup("actor");
+        if (entity.kind === "agent")
+            return topologyParticipantGroup("agent");
+        if (entity.kind === "peer")
+            return topologyParticipantGroup("peer");
+        return topologyParticipantGroup(entity.kind === "meshParticipant" ? entity.value.participant?.kind ?? "root" : "root");
+    };
+    const nodes = entities
+        .filter((entity) => entity.kind !== "meshRoute")
+        .map((entity) => {
         const parentRef = parentReference(entity);
-        const parentId = parentRef ? aliases.get(parentRef) : undefined;
+        const explicitParentId = parentRef ? aliases.get(parentRef) : undefined;
+        let parentId = explicitParentId;
+        if (entity.kind !== "main") {
+            if (["agent", "actor", "peer", "meshParticipant"].includes(entity.kind) &&
+                (!parentId || parentId === mainId)) {
+                ensureGroup(PARTICIPANTS_GROUP_ID, "Participants", mainId, 0);
+                const category = participantCategory(entity);
+                parentId = ensureGroup(`${PARTICIPANTS_GROUP_ID}:${category.id}`, category.label, PARTICIPANTS_GROUP_ID, category.order);
+            }
+            else if (entity.kind === "meshTopic") {
+                ensureGroup(MESH_GROUP_ID, "Mesh", mainId, 1);
+                ensureGroup(TOPICS_GROUP_ID, "Topics", MESH_GROUP_ID, 0);
+                parentId = ensurePath(TOPICS_GROUP_ID, topologyTopicGroupPath(entity.value.name));
+            }
+            else if (entity.kind === "state") {
+                ensureGroup(MESH_GROUP_ID, "Mesh", mainId, 1);
+                ensureGroup(STATE_GROUP_ID, "State", MESH_GROUP_ID, 1);
+                parentId = ensurePath(STATE_GROUP_ID, topologyStateGroupPath(entity.value.key));
+            }
+            else if (!parentId) {
+                parentId = mainId;
+            }
+        }
+        const activityAt = entity.kind === "meshTopic" ? entity.value.lastEventAt : undefined;
+        const startedAt = entity.kind === "agent" ? entity.value.startedAt : undefined;
+        const queued = entity.kind === "actor" ? entity.value.queued : undefined;
+        const stale = entity.kind === "meshParticipant"
+            ? entity.value.participant?.stale
+            : entity.kind === "agent"
+                ? entity.value.stale
+                : undefined;
         return {
             id: entity.id,
-            label: entity.kind === "main" ? "Main" : entity.label,
+            label: entity.kind === "main"
+                ? "Main"
+                : entity.kind === "state" && entity.value.label === entity.value.key
+                    ? entity.value.key.split("/").at(-1) ?? entity.value.label
+                    : entity.label,
             status: entity.status,
             kind: nodeKind(entity),
-            ...(entity.kind !== "main" ? { parentId: parentId ?? mainId } : {}),
+            ...(parentId ? { parentId } : {}),
+            ...(activityAt !== undefined ? { activityAt } : {}),
+            ...(startedAt !== undefined ? { startedAt } : {}),
+            ...(queued !== undefined ? { queued } : {}),
+            ...(stale !== undefined ? { stale } : {}),
             x: 0,
             y: 0,
         };
     });
+    nodes.push(...groups.values());
     const nodeById = new Map(nodes.map((node) => [node.id, node]));
     const children = new Map();
     for (const node of nodes) {
@@ -129,6 +300,7 @@ const buildLayout = (snapshot, entities, selectedRun, mesh) => {
     for (const bucket of children.values()) {
         bucket.sort((left, right) => activeRank(left.status) - activeRank(right.status) ||
             Number(inSelectedRun(right)) - Number(inSelectedRun(left)) ||
+            (left.order ?? 0) - (right.order ?? 0) ||
             kindRank[left.kind] - kindRank[right.kind] ||
             left.label.localeCompare(right.label));
     }
@@ -142,7 +314,7 @@ const buildLayout = (snapshot, entities, selectedRun, mesh) => {
         const descendants = (children.get(node.id) ?? []).filter((child) => !visited.has(child.id));
         if (descendants.length === 0) {
             node.y = nextLeafY;
-            nextLeafY += 3;
+            nextLeafY += 2;
             return node.y;
         }
         const childRows = descendants.map((child) => place(child, depth + 1));
@@ -175,17 +347,36 @@ const buildLayout = (snapshot, entities, selectedRun, mesh) => {
                 edges.push({ from: source, to: target, kind: "subscription" });
         }
     }
+    for (const entity of entities) {
+        if (entity.kind !== "state" || !entity.value.owner)
+            continue;
+        const owner = aliases.get(entity.value.owner);
+        const target = aliases.get(entity.value.key) ?? aliases.get(entity.value.label);
+        if (owner && target && owner !== target) {
+            edges.push({ from: owner, to: target, kind: "subscription" });
+        }
+    }
     for (const route of mesh.routes) {
         const source = aliases.get(route.fromId) ?? aliases.get(route.fromName);
         const target = aliases.get(route.targetId) ?? aliases.get(route.targetName) ?? aliases.get(route.topic);
-        if (source && target && source !== target)
-            edges.push({ from: source, to: target, kind: "route" });
+        if (source && target && source !== target) {
+            edges.push({ from: source, to: target, kind: "route", route });
+        }
     }
-    return {
-        nodes,
-        edges,
-        positions: new Map(nodes.map((node) => [node.id, { x: node.x, y: node.y }])),
-    };
+    const positions = new Map(nodes.map((node) => [node.id, { x: node.x, y: node.y }]));
+    for (const edge of edges) {
+        if (!edge.route)
+            continue;
+        const from = nodeById.get(edge.from);
+        const to = nodeById.get(edge.to);
+        if (!from || !to)
+            continue;
+        positions.set(edge.route.id, {
+            x: Math.round((from.x + to.x) / 2),
+            y: Math.round((from.y + to.y) / 2),
+        });
+    }
+    return { nodes, edges, positions };
 };
 const lineChar = (mask) => {
     const chars = {
@@ -203,12 +394,66 @@ const styleForStatus = (status) => {
         return "success";
     return "dim";
 };
-const renderCanvas = (theme, layout, selectedEntityId, width, height, camera) => {
+export const topologyTreeRouteNodeIds = (nodes, fromId, toId) => {
+    if (fromId === toId)
+        return [fromId];
+    const ancestry = (start) => {
+        const path = [];
+        const seen = new Set();
+        let current = start;
+        while (current && !seen.has(current)) {
+            path.push(current);
+            seen.add(current);
+            current = nodes.get(current)?.parentId;
+        }
+        return path;
+    };
+    const fromAncestors = ancestry(fromId);
+    const fromSet = new Set(fromAncestors);
+    const toAncestors = ancestry(toId);
+    const common = toAncestors.find((id) => fromSet.has(id));
+    if (!common)
+        return [fromId, toId];
+    return [
+        ...fromAncestors.slice(0, fromAncestors.indexOf(common) + 1),
+        ...toAncestors.slice(0, toAncestors.indexOf(common)).reverse(),
+    ];
+};
+const routeGlyph = (route) => {
+    if (route.status === "failed")
+        return "!";
+    const kind = route.kind.toLowerCase();
+    if (kind.includes("certif"))
+        return "✦";
+    if (kind.includes("commit"))
+        return "◆";
+    if (kind.includes("control") || kind.includes("steer"))
+        return "↯";
+    if (kind.includes("message") || kind.includes("directive"))
+        return "✉";
+    return "•";
+};
+const routeStyle = (route) => route.status === "failed"
+    ? "error"
+    : route.kind.toLowerCase().includes("certif")
+        ? "warning"
+        : "accent";
+const renderCanvas = (theme, layout, selectedEntityId, width, height, camera, animation) => {
     const originX = Math.round(camera.x - width / 2);
     const originY = Math.round(camera.y - height / 2);
     const cells = Array.from({ length: height }, () => Array.from({ length: width }, () => ({ char: " ", style: "plain" })));
     const masks = Array.from({ length: height }, () => Array(width).fill(0));
     const nodeById = new Map(layout.nodes.map((node) => [node.id, node]));
+    const selectedRoute = layout.edges.find((edge) => edge.route?.id === selectedEntityId)?.route;
+    const related = new Set(selectedEntityId ? [selectedEntityId] : []);
+    for (const edge of layout.edges) {
+        if (edge.from === selectedEntityId || edge.to === selectedEntityId || edge.route?.id === selectedEntityId) {
+            related.add(edge.from);
+            related.add(edge.to);
+            if (edge.route)
+                related.add(edge.route.id);
+        }
+    }
     const setCell = (x, y, char, style) => {
         const sx = x - originX;
         const sy = y - originY;
@@ -245,18 +490,52 @@ const renderCanvas = (theme, layout, selectedEntityId, width, height, camera) =>
             addMask(x, y, (y > worldStart ? 1 : 0) | (y < worldEnd ? 4 : 0));
         }
     };
-    const meshPaths = [];
+    const edgePathPoints = (from, to) => {
+        const fromEnd = from.x + Math.min(16, visibleWidth(safeText(from.label)) + 3);
+        const toStart = to.x - 2;
+        const bend = Math.max(fromEnd + 1, Math.floor((fromEnd + toStart) / 2));
+        const points = [];
+        const appendLine = (x1, y1, x2, y2) => {
+            const dx = Math.sign(x2 - x1);
+            const dy = Math.sign(y2 - y1);
+            const steps = Math.max(Math.abs(x2 - x1), Math.abs(y2 - y1));
+            for (let step = points.length === 0 ? 0 : 1; step <= steps; step++) {
+                points.push({ x: x1 + dx * step, y: y1 + dy * step });
+            }
+        };
+        appendLine(fromEnd, from.y, bend, from.y);
+        appendLine(bend, from.y, bend, to.y);
+        appendLine(bend, to.y, toStart, to.y);
+        return points;
+    };
+    const treePathPoints = (from, to) => {
+        const ids = topologyTreeRouteNodeIds(nodeById, from.id, to.id);
+        const points = [];
+        for (let index = 0; index < ids.length - 1; index++) {
+            const left = nodeById.get(ids[index]);
+            const right = nodeById.get(ids[index + 1]);
+            if (!left || !right)
+                continue;
+            const segment = right.parentId === left.id
+                ? edgePathPoints(left, right)
+                : left.parentId === right.id
+                    ? edgePathPoints(right, left).reverse()
+                    : edgePathPoints(left, right);
+            const previous = points.at(-1);
+            const first = segment[0];
+            if (previous && first && previous.x === first.x && previous.y === first.y)
+                segment.shift();
+            points.push(...segment);
+        }
+        return points;
+    };
     for (const edge of layout.edges) {
-        if (edge.kind !== "structure" && edge.from !== selectedEntityId && edge.to !== selectedEntityId)
+        if (edge.kind !== "structure")
             continue;
         const from = nodeById.get(edge.from);
         const to = nodeById.get(edge.to);
         if (!from || !to)
             continue;
-        if (edge.kind !== "structure") {
-            meshPaths.push({ from, to });
-            continue;
-        }
         const fromEnd = from.x + Math.min(16, visibleWidth(safeText(from.label)) + 3);
         const toStart = to.x - 2;
         const bend = Math.max(fromEnd + 1, Math.floor((fromEnd + toStart) / 2));
@@ -271,44 +550,104 @@ const renderCanvas = (theme, layout, selectedEntityId, width, height, camera) =>
                 cells[y][x] = { char: lineChar(mask), style: "edge" };
         }
     }
-    for (const { from, to } of meshPaths) {
-        const fromEnd = from.x + Math.min(16, visibleWidth(safeText(from.label)) + 3);
-        const toStart = to.x - 2;
-        const bend = Math.max(fromEnd + 1, Math.floor((fromEnd + toStart) / 2));
-        const drawDots = (x1, y1, x2, y2) => {
-            if (y1 === y2) {
-                if (y1 < originY || y1 >= originY + height)
-                    return;
-                const worldStart = Math.min(x1, x2);
-                const start = Math.max(worldStart, originX);
-                const end = Math.min(Math.max(x1, x2), originX + width - 1);
-                const alignedStart = start + ((start - worldStart) % 2);
-                for (let x = alignedStart; x <= end; x += 2)
-                    setCell(x, y1, "·", "accent");
-                return;
+    const traffic = new Map();
+    for (const edge of layout.edges) {
+        if (edge.kind === "structure")
+            continue;
+        const from = nodeById.get(edge.from);
+        const to = nodeById.get(edge.to);
+        if (!from || !to)
+            continue;
+        if (!edge.route) {
+            if (edge.from !== selectedEntityId && edge.to !== selectedEntityId)
+                continue;
+            const points = treePathPoints(from, to);
+            for (let index = 0; index < points.length; index += 2) {
+                const point = points[index];
+                setCell(point.x, point.y, "·", "accent");
             }
-            if (x1 < originX || x1 >= originX + width)
-                return;
-            const worldStart = Math.min(y1, y2);
-            const start = Math.max(worldStart, originY);
-            const end = Math.min(Math.max(y1, y2), originY + height - 1);
-            const alignedStart = start + ((start - worldStart) % 2);
-            for (let y = alignedStart; y <= end; y += 2)
-                setCell(x1, y, "·", "accent");
-        };
-        drawDots(fromEnd, from.y, bend, from.y);
-        drawDots(bend, from.y, bend, to.y);
-        drawDots(bend, to.y, toStart, to.y);
+            continue;
+        }
+        const key = `${edge.from}\u0000${edge.to}`;
+        const group = traffic.get(key) ?? { from, to, routes: [] };
+        group.routes.push(edge.route);
+        traffic.set(key, group);
+    }
+    for (const group of traffic.values()) {
+        const points = treePathPoints(group.from, group.to);
+        if (points.length === 0)
+            continue;
+        const selected = group.routes.find((route) => route.id === selectedEntityId);
+        const replay = group.routes.find((route) => route.id === animation.replayRouteId);
+        const newest = group.routes.reduce((latest, route) => route.lastAt > latest.lastAt ? route : latest);
+        const route = replay ?? selected ?? newest;
+        const age = Math.max(0, animation.now - route.lastAt);
+        const connected = group.from.id === selectedEntityId || group.to.id === selectedEntityId;
+        const visible = Boolean(replay || selected || connected || animation.showHistory || age <= 60_000);
+        if (!visible)
+            continue;
+        const fresh = Boolean(replay || age <= 10_000);
+        const style = selected || replay
+            ? routeStyle(route)
+            : fresh
+                ? "accent"
+                : "dim";
+        const stride = fresh ? 1 : 2;
+        for (let index = 0; index < points.length; index += stride) {
+            const point = points[index];
+            const trail = fresh && !animation.reducedMotion && index % 3 === 0 ? "━" : fresh ? "·" : "╌";
+            setCell(point.x, point.y, trail, style);
+        }
+        const packetActive = !animation.reducedMotion && Boolean(replay || age <= 2_000);
+        if (packetActive) {
+            const duration = 1_200;
+            const phase = replay
+                ? (animation.now % duration) / duration
+                : Math.min(0.999, age / 2_000);
+            const packetIndex = Math.min(points.length - 1, Math.floor(phase * points.length));
+            const point = points[packetIndex];
+            setCell(point.x, point.y, routeGlyph(route), routeStyle(route));
+            if (route.kind.toLowerCase().includes("certif")) {
+                const ripple = points[Math.max(0, points.length - 1 - packetIndex)];
+                setCell(ripple.x, ripple.y, "✦", "warning");
+            }
+            else if (route.status === "failed") {
+                const impact = points.at(-1);
+                setCell(impact.x, impact.y, Math.floor(animation.now / 120) % 2 === 0 ? "╳" : "!", "error");
+            }
+            const label = graphLabel(animation.replayLabel ?? route.kind, 18);
+            let offset = 2;
+            for (const char of label) {
+                setCell(point.x + offset, point.y, char, routeStyle(route));
+                offset += visibleWidth(char);
+            }
+        }
+        else {
+            const count = group.routes.reduce((total, candidate) => total + candidate.count, 0);
+            if (count > 1) {
+                const point = points[Math.floor(points.length / 2)];
+                const label = `×${count}`;
+                for (let index = 0; index < label.length; index++) {
+                    setCell(point.x + index, point.y, label[index], style);
+                }
+            }
+        }
     }
     for (const node of layout.nodes) {
         const selected = node.id === selectedEntityId;
-        const glyph = selected ? "▣" : graphGlyph(node.kind);
+        const spotlighted = !selectedRoute || related.has(node.id);
+        const glyph = selected ? "▣" : graphGlyph(node, animation);
         const label = graphLabel(safeText(node.label), 14);
-        setCell(node.x, node.y, glyph, selected ? "accent" : styleForStatus(node.status));
+        const nodeStyle = selected
+            ? "accent"
+            : !spotlighted
+                ? "dim"
+                : styleForStatus(node.status);
+        setCell(node.x, node.y, glyph, nodeStyle);
         setCell(node.x + 1, node.y, " ", "plain");
         let offset = 0;
         for (const char of label) {
-            setCell(node.x + 2 + offset, node.y, char, selected ? "accent" : "plain");
+            setCell(node.x + 2 + offset, node.y, char, selected ? "accent" : spotlighted ? "plain" : "dim");
             offset += visibleWidth(char);
         }
     }
@@ -348,7 +687,7 @@ const wrapInspector = (theme, label, value, width) => {
     const first = truncateToWidth(clean, Math.max(1, width - label.length - 1), "…");
     return [`${label} ${theme.fg("dim", first)}`];
 };
-const inspectorLines = (theme, entity, snapshot, run, width, height) => {
+const inspectorLines = (theme, entity, snapshot, run, width, height, invalidate) => {
     const inner = Math.max(1, width - 2);
     const border = (value) => theme.fg("borderMuted", value);
     const content = [];
@@ -383,12 +722,20 @@ const inspectorLines = (theme, entity, snapshot, run, width, height) => {
         }
         else if (entity.kind === "meshRoute") {
             content.push(`${safeText(entity.value.fromName)} → ${safeText(entity.value.targetName)}`);
-            content.push(theme.fg("dim", safeText(entity.value.topic)));
+            content.push(`kind  ${safeText(entity.value.kind)}`);
+            content.push(`topic ${theme.fg("dim", safeText(entity.value.topic))}`);
+            content.push(`count ${entity.value.count}`);
         }
         else if (entity.kind === "state") {
             content.push(`version ${entity.value.version}`);
             if (entity.value.owner)
                 content.push(`owner   ${safeText(entity.value.owner)}`);
+            const filePreview = loadStateFilePreview(entity.value, snapshot.main.cwd ?? process.cwd());
+            if (filePreview) {
+                content.push("");
+                content.push(`file ${safeText(filePreview.path)}`);
+                content.push(...renderStateFilePreview(filePreview, theme, Math.max(1, inner - 2), Math.max(0, height - content.length - 3), invalidate));
+            }
         }
     }
     else {
@@ -425,16 +772,16 @@ const graphContextEntities = (allEntities, entities) => {
     }
     return allEntities.filter((entity) => visible.has(entity.id));
 };
-export const renderFabricTopologyPanel = ({ theme, filter, selectedEntityId, snapshot, run, mesh, allEntities, entities, width, height, camera, }) => {
+export const renderFabricTopologyPanel = ({ theme, filter, selectedEntityId, snapshot, run, mesh, allEntities, entities, width, height, camera, animation, invalidate, }) => {
     const graphEntities = graphContextEntities(allEntities, entities);
     const layout = buildLayout(snapshot, graphEntities, run, mesh);
     const selectableIds = new Set(entities.map((entity) => entity.id));
     const selected = entities.find((entity) => entity.id === selectedEntityId) ?? entities[0];
     const inspectorWidth = width >= 92 ? Math.min(36, Math.max(30, Math.floor(width * 0.3))) : 0;
     const graphWidth = Math.max(1, width - inspectorWidth);
-    const graph = renderCanvas(theme, layout, selected?.id, graphWidth, height, camera);
+    const graph = renderCanvas(theme, layout, selected?.id, graphWidth, height, camera, animation);
     const inspector = inspectorWidth > 0
-        ? inspectorLines(theme, selected, snapshot, run, inspectorWidth, height)
+        ? inspectorLines(theme, selected, snapshot, run, inspectorWidth, height, invalidate)
         : [];
     const lines = inspectorWidth > 0
         ? graph.map((line, index) => `${padToWidth(line, graphWidth)}${inspector[index] ?? ""}`)
@@ -464,6 +811,9 @@ export const renderFabricTopologyPanel = ({ theme, filter, selectedEntityId, sna
             "■ agent",
             "◇ actor",
             "◎ topic",
+            "▱ group",
+            animation.replayRouteId ? "▶ replay" : animation.showHistory ? "history" : "live decay",
+            animation.reducedMotion ? "reduced motion" : undefined,
             filter !== "all" ? `${entities.length}/${allEntities.length} ${filter}` : undefined,
         ].filter((value) => Boolean(value)).join(" · ");
         const graphLegend = padToWidth(theme.fg("dim", truncateToWidth(legend, graphWidth, "")), graphWidth);