@fougere/admin 0.9.2-alpha.0 → 0.9.3-alpha.0

package/dist/topology-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"topology-page.d.ts","sourceRoot":"","sources":["../src/topology-page.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAA4C,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AA6E7F,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAwB,EAAE,OAAwB,EAAE,GAAE,oBAAyB,GAAG,YAAY,CA6F/H"}
+{"version":3,"file":"topology-page.d.ts","sourceRoot":"","sources":["../src/topology-page.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAgC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAA4C,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAkP7F,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAwB,EAAE,OAAwB,EAAE,GAAE,oBAAyB,GAAG,YAAY,CA8G/H"}

package/dist/topology-page.js

@@ -1,22 +1,24 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The shape of the system, drawn from what the app says about itself.
  *
  * Every other page in this panel renders a DOOR — a list, a form, a row. This one renders
  * the app: which fronds run in the process it is talking to, which answered from somewhere
- * else, and who called whom. Nothing here is configured, and nothing is declared: a frond
- * is remote because it answered a call nobody hosts.
+ * else, who called whom — and which the config names but nothing has ever answered from.
+ * The first three are OBSERVED: a frond is elsewhere because it answered, never because
+ * `remotes:` said so. The fourth is the only declared one, and it is the only one the
+ * observed half cannot hold — a frond that never answered is absent from it.
  *
  * It is served by `@fougere/observability`, so its absence is a legible state and not an
  * error — which is why the entry stays in the menu when nothing answers. Hiding it would
  * hide the one place that can say what is missing.
  */
 import { Box, Card, CardContent, Chip, Skeleton, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Title, useTranslate } from 'react-admin';
 import { CALL_ENDPOINT, fetcher as browserFetcher } from '@fougere/app/client';
-import { fetchTopology, isOpaque, nodesOf } from './topology.js';
+import { fetchTopology, figureOf, isOpaque, layoutOf, nodesOf } from './topology.js';
 /**
  * Every sentence this page draws goes through a key. Nothing under `@fougere/admin` is
  * written in a language — the counts below carry `smart_count`, which is what lets a
@@ -32,17 +34,102 @@ function EdgeLine({ edge, direction }) {
     const label = useLabels();
     return (_jsxs(Row, { children: [_jsx(Typography, { variant: "caption", sx: { fontFamily: 'monospace' }, children: direction === 'out' ? `→ ${edge.to}` : `← ${edge.from}` }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: edge.count }), edge.errors > 0 && (_jsx(Chip, { size: "small", color: "error", label: label('topology.refused', `${edge.errors} refused`, { smart_count: edge.errors }) }))] }));
 }
+/**
+ * A palette path as SVG paint. `sx` resolves `'error.main'` for `color` and `bgcolor` and for
+ * nothing else, so `fill` and `stroke` reach CSS verbatim — an invalid value, and SVG falls back
+ * to BLACK. Every shape on this page is painted through here.
+ */
+function paint(paths) {
+    const read = (theme, path) => path.split('.').reduce((held, key) => held?.[key], theme.palette);
+    return (theme) => ({
+        ...(paths.fill ? { fill: read(theme, paths.fill) } : {}),
+        ...(paths.stroke ? { stroke: read(theme, paths.stroke) } : {}),
+    });
+}
+/** What a node is painted with, by the one thing that separates the three states. */
+function toneOf(node) {
+    if (node.silent)
+        return 'warning';
+    return node.placement === 'local' ? 'primary' : 'grey';
+}
+/**
+ * The system, drawn. Placement is `layoutOf`'s — ranks, order and routing.
+ *
+ * The nodes are HTML over an SVG that draws only the lines, which is how React Flow is built and
+ * why its nodes look like the rest of an app: a card is a `Box` with `sx`, so it reads the theme
+ * like every other element. An SVG `<text>` positioned by hand does not.
+ *
+ * Both layers sit on ONE scale — the container takes the drawing's aspect ratio, and every node is
+ * sized AND placed in per cent of it. A size in pixels does not grow with the viewBox the SVG
+ * scales to its container, and the lines then stop short of the cards they point at.
+ *
+ * What the drawing says beyond who reaches whom: thickness is volume, a broken line is declared
+ * and never travelled, and refusals are a figure rather than a red line — colour alone excludes a
+ * reader who cannot see it, and "how many" is the question a red line raises without answering.
+ */
+function Graph({ nodes, selected, onSelect }) {
+    const label = useLabels();
+    const drawing = useMemo(() => layoutOf(nodes), [nodes]);
+    const per = (value, of) => `${(value / of) * 100}%`;
+    return (_jsxs(Card, { variant: "outlined", children: [_jsxs(Box, { sx: { position: 'relative', bgcolor: 'action.hover', aspectRatio: `${drawing.width} / ${drawing.height}` }, children: [_jsxs(Box, { component: "svg", viewBox: `0 0 ${drawing.width} ${drawing.height}`, sx: { position: 'absolute', inset: 0, width: '100%', height: '100%' }, children: [_jsx("defs", { children: _jsx("marker", { id: "fougere-arrow", viewBox: "0 0 8 8", refX: "6.5", refY: "4", markerWidth: "5", markerHeight: "5", orient: "auto-start-reverse", children: _jsx(Box, { component: "path", d: "M 0 0 L 8 4 L 0 8 z", sx: paint({ fill: 'text.disabled' }) }) }) }), drawing.edges.map((edge) => (_jsx(Box, { component: "path", d: edge.path, fill: "none", strokeLinecap: "round", strokeWidth: edge.weight === undefined ? 1.5 : 1.5 + edge.weight * 3, strokeDasharray: edge.weight === undefined ? '2 5' : undefined, markerEnd: "url(#fougere-arrow)", sx: [paint({ stroke: 'text.disabled' }), { strokeOpacity: 0.5 }] }, `${edge.from}-${edge.to}`)))] }), drawing.edges.map((edge) => edge.at && (_jsx(Box, { sx: {
+                            position: 'absolute',
+                            left: per(edge.at.x, drawing.width),
+                            top: per(edge.at.y, drawing.height),
+                            transform: 'translate(-50%, -50%)',
+                            px: 0.75,
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'background.paper',
+                            fontFamily: 'monospace',
+                            fontSize: 11,
+                            fontWeight: 600,
+                            lineHeight: '17px',
+                            whiteSpace: 'nowrap',
+                            color: edge.errors > 0 ? 'error.main' : 'text.secondary',
+                        }, children: edge.count === undefined ? label('topology.noTraffic', 'no traffic') : figureOf(edge) }, `figure-${edge.from}-${edge.to}`))), drawing.nodes.map(({ node, x, y, width, height }) => {
+                        const tone = toneOf(node);
+                        return (_jsxs(Box, { onClick: () => onSelect(node.frond), sx: {
+                                position: 'absolute',
+                                left: per(x, drawing.width),
+                                top: per(y, drawing.height),
+                                width: per(width, drawing.width),
+                                height: per(height, drawing.height),
+                                transform: 'translate(-50%, -50%)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                                gap: 0.25,
+                                overflow: 'hidden',
+                                px: 1.25,
+                                borderRadius: 1.5,
+                                border: node.frond === selected ? 2 : 1.4,
+                                borderStyle: node.silent ? 'dashed' : 'solid',
+                                borderColor: tone === 'grey' ? 'divider' : `${tone}.main`,
+                                bgcolor: 'background.paper',
+                                cursor: 'pointer',
+                            }, children: [_jsx(Box, { sx: { fontFamily: 'monospace', fontSize: 13.5, fontWeight: 600 }, children: node.frond }), _jsxs(Row, { children: [!node.silent && (_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 }, children: isOpaque(node)
+                                                ? label('topology.elsewhere', 'elsewhere')
+                                                : `${node.entities} · ${node.doors}` })), tone !== 'grey' && (_jsx(Chip, { size: "small", color: tone, variant: "outlined", sx: { height: 16, '& .MuiChip-label': { px: 0.75, fontSize: 9.5, letterSpacing: '0.05em' } }, label: node.silent ? label('topology.unheard', 'unheard') : label('topology.here', 'here') }))] })] }, node.frond));
+                    })] }), _jsx(Box, { sx: { px: 2, py: 1.25 }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: label('topology.legend', 'Thickness is volume. A broken line is declared and never travelled. Click a frond for what it holds.') }) })] }));
+}
 function FrondCard({ node }) {
     const label = useLabels();
     const here = node.placement === 'local';
-    return (_jsx(Card, { variant: "outlined", children: _jsxs(CardContent, { sx: { display: 'grid', gap: 1 }, children: [_jsxs(Row, { children: [_jsx(Typography, { variant: "h6", sx: { fontWeight: 700 }, children: node.frond }), _jsx(Chip, { size: "small", color: here ? 'primary' : 'default', label: here ? label('topology.here', 'here') : label('topology.elsewhere', 'elsewhere') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: isOpaque(node)
-                        ? label('topology.opaque', 'Its shape is published by the process that owns it.')
-                        : `${label('topology.entities', `${node.entities} entities`, { smart_count: node.entities })}`
-                            + ` · ${label('topology.doors', `${node.doors} doors`, { smart_count: node.doors })}` }), node.calls.map((edge) => _jsx(EdgeLine, { edge: edge, direction: "out" }, `out-${edge.to}`)), node.calledBy.map((edge) => _jsx(EdgeLine, { edge: edge, direction: "in" }, `in-${edge.from}`))] }) }));
+    return (_jsx(Card, { variant: "outlined", children: _jsxs(CardContent, { sx: { display: 'grid', gap: 1 }, children: [_jsxs(Row, { children: [_jsx(Typography, { variant: "h6", sx: { fontWeight: 700 }, children: node.frond }), _jsx(Chip, { size: "small", color: node.silent ? 'warning' : here ? 'primary' : 'default', label: node.silent
+                                ? label('topology.unheard', 'declared, unheard')
+                                : here ? label('topology.here', 'here') : label('topology.elsewhere', 'elsewhere') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: node.silent
+                        ? label('topology.silent', `Declared at ${node.at ?? 'no address'} — nothing has answered from it.`, { at: node.at ?? '' })
+                        : isOpaque(node)
+                            ? label('topology.opaque', 'Its shape is published by the process that owns it.')
+                            : `${label('topology.entities', `${node.entities} entities`, { smart_count: node.entities })}`
+                                + ` · ${label('topology.doors', `${node.doors} doors`, { smart_count: node.doors })}` }), node.calls.map((edge) => _jsx(EdgeLine, { edge: edge, direction: "out" }, `out-${edge.to}`)), node.calledBy.map((edge) => _jsx(EdgeLine, { edge: edge, direction: "in" }, `in-${edge.from}`))] }) }));
 }
 export function FougereTopology({ endpoint = CALL_ENDPOINT, fetcher = browserFetcher } = {}) {
     const label = useLabels();
     const [state, setState] = useState({ status: 'loading' });
+    /** Which frond the detail below is about — the drawing answers "where", one card answers "what". */
+    const [selected, setSelected] = useState();
     useEffect(() => {
         let live = true;
         fetchTopology(endpoint, fetcher)
@@ -63,7 +150,14 @@ export function FougereTopology({ endpoint = CALL_ENDPOINT, fetcher = browserFet
         return (_jsxs(Box, { sx: { p: 3, maxWidth: 620 }, children: [title, _jsx(Card, { children: _jsxs(CardContent, { sx: { display: 'grid', gap: 1.5 }, children: [_jsx(Typography, { variant: "h6", children: label('topology.failedTitle', 'The app did not answer') }), _jsx(Typography, { component: "pre", variant: "caption", sx: { p: 1.5, borderRadius: 1.5, bgcolor: 'action.hover', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: state.error?.message ?? String(state.error) })] }) })] }));
     }
     const nodes = nodesOf(state.report);
-    const elsewhere = nodes.filter((node) => node.placement === 'remote').length;
-    return (_jsxs(Box, { sx: { p: 3, display: 'grid', gap: 2 }, children: [title, _jsxs(Row, { children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: [label('topology.here_count', `${nodes.length - elsewhere} here`, { smart_count: nodes.length - elsewhere }), ' · ', label('topology.elsewhere_count', `${elsewhere} elsewhere`, { smart_count: elsewhere }), ' · ', label('topology.paths', `${state.report.edges.length} observed call paths`, { smart_count: state.report.edges.length })] }), state.report.active > 0 && (_jsx(Chip, { size: "small", color: "primary", label: label('topology.inFlight', `${state.report.active} in flight`, { smart_count: state.report.active }) }))] }), _jsx(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }, children: nodes.map((node) => _jsx(FrondCard, { node: node }, node.frond)) }), state.report.edges.length === 0 && (_jsx(Typography, { variant: "caption", color: "text.secondary", children: label('topology.noEdges', 'No call between fronds observed yet — an edge appears the first time one calls another.') }))] }));
+    // Three counts because there are three ways of being known, and `elsewhere` means ANSWERED
+    // from elsewhere: counting a frond that never answered among them makes the summary
+    // contradict the card under it.
+    const unheard = nodes.filter((node) => node.silent).length;
+    const elsewhere = nodes.filter((node) => node.placement === 'remote' && !node.silent).length;
+    const shown = nodes.find((node) => node.frond === selected) ?? nodes[0];
+    const travelled = new Set(state.report.edges.map((edge) => `${edge.from} ${edge.to}`));
+    const quiet = state.report.declared.edges.filter((edge) => !travelled.has(`${edge.from} ${edge.to}`)).length;
+    return (_jsxs(Box, { sx: { p: 3, display: 'grid', gap: 2 }, children: [title, _jsxs(Row, { children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: [label('topology.here_count', `${nodes.length - elsewhere - unheard} here`, { smart_count: nodes.length - elsewhere - unheard }), ' · ', label('topology.elsewhere_count', `${elsewhere} elsewhere`, { smart_count: elsewhere }), unheard > 0 && _jsxs(_Fragment, { children: [' · ', label('topology.unheard_count', `${unheard} unheard`, { smart_count: unheard })] }), ' · ', label('topology.paths', `${state.report.edges.length} observed call paths`, { smart_count: state.report.edges.length }), quiet > 0 && _jsxs(_Fragment, { children: [' · ', label('topology.quiet_count', `${quiet} link without traffic`, { smart_count: quiet })] })] }), state.report.active > 0 && (_jsx(Chip, { size: "small", color: "primary", label: label('topology.inFlight', `${state.report.active} in flight`, { smart_count: state.report.active }) }))] }), _jsx(Graph, { nodes: nodes, selected: shown?.frond, onSelect: setSelected }), shown && _jsx(Box, { sx: { maxWidth: 520 }, children: _jsx(FrondCard, { node: shown }) }), state.report.edges.length === 0 && (_jsx(Typography, { variant: "caption", color: "text.secondary", children: label('topology.noEdges', 'No call between fronds observed yet — an edge appears the first time one calls another.') }))] }));
 }
 //# sourceMappingURL=topology-page.js.map

package/dist/topology-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"topology-page.js","sourceRoot":"","sources":["../src/topology-page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"topology-page.js","sourceRoot":"","sources":["../src/topology-page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAc,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,OAAO,IAAI,cAAc,EAAgB,MAAM,qBAAqB,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAqD,MAAM,eAAe,CAAC;AASxI;;;;GAIG;AACH,SAAS,SAAS;IAChB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO,CAAC,GAAW,EAAE,QAAgB,EAAE,OAAiC,EAAE,EAAE,CAC1E,SAAS,CAAC,iBAAiB,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CAC3D,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,QAAQ,GAAO,CAC/F,CAAC;AAEF,uFAAuF;AACvF,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAA2C;IAC5E,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC;IAC1B,OAAO,CACL,MAAC,GAAG,eACF,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,YAC1D,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,GAC7C,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,YAAE,IAAI,CAAC,KAAK,GAAc,EAC7E,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAClB,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,UAAU,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,GACxF,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,KAAK,CAAC,KAAyC;IACtD,MAAM,IAAI,GAAG,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE,CAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAU,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAE,IAAgC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO,CAAW,CAAC;IAEpH,OAAO,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;QACxB,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACxD,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC/D,CAAC,CAAC;AACL,CAAC;AAED,qFAAqF;AACrF,SAAS,MAAM,CAAC,IAAkB;IAChC,IAAI,IAAI,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IAElC,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;AACzD,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAIzC;IACC,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC;IAC1B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACxD,MAAM,GAAG,GAAG,CAAC,KAAa,EAAE,EAAU,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC;IAEpE,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,UAAU,aACtB,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,MAAM,OAAO,CAAC,MAAM,EAAE,EAAE,aAC7G,MAAC,GAAG,IACF,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,OAAO,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,EACjD,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAErE,yBACE,iBAAQ,EAAE,EAAC,eAAe,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,YAAY,EAAC,GAAG,EAAC,MAAM,EAAC,oBAAoB,YAC3H,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAC,CAAC,EAAC,qBAAqB,EAAC,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,GAAI,GAC/E,GACJ,EAEN,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,GAAG,IACF,SAAS,EAAC,MAAM,EAEhB,CAAC,EAAE,IAAI,CAAC,IAAI,EACZ,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EACpE,eAAe,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC9D,SAAS,EAAC,qBAAqB,EAC/B,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,IAP3D,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EAAE,CAQ9B,CACH,CAAC,IACE,EAEL,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,CACtC,KAAC,GAAG,IAEF,EAAE,EAAE;4BACF,QAAQ,EAAE,UAAU;4BACpB,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC;4BACnC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC;4BACnC,SAAS,EAAE,uBAAuB;4BAClC,EAAE,EAAE,IAAI;4BACR,YAAY,EAAE,CAAC;4BACf,MAAM,EAAE,CAAC;4BACT,WAAW,EAAE,SAAS;4BACtB,OAAO,EAAE,kBAAkB;4BAC3B,UAAU,EAAE,WAAW;4BACvB,QAAQ,EAAE,EAAE;4BACZ,UAAU,EAAE,GAAG;4BACf,UAAU,EAAE,MAAM;4BAClB,UAAU,EAAE,QAAQ;4BACpB,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB;yBACzD,YAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAnBjF,UAAU,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EAAE,CAoBjC,CACP,CAAC,EAED,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;wBACnD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;wBAC1B,OAAO,CACL,MAAC,GAAG,IAEF,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,EAAE,EAAE;gCACF,QAAQ,EAAE,UAAU;gCACpB,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC;gCAC3B,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC;gCAC3B,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC;gCAChC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC;gCACnC,SAAS,EAAE,uBAAuB;gCAClC,OAAO,EAAE,MAAM;gCACf,aAAa,EAAE,QAAQ;gCACvB,cAAc,EAAE,QAAQ;gCACxB,GAAG,EAAE,IAAI;gCACT,QAAQ,EAAE,QAAQ;gCAClB,EAAE,EAAE,IAAI;gCACR,YAAY,EAAE,GAAG;gCACjB,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;gCACzC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;gCAC7C,WAAW,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,OAAO;gCACzD,OAAO,EAAE,kBAAkB;gCAC3B,MAAM,EAAE,SAAS;6BAClB,aAED,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,CAAC,KAAK,GAAO,EACzF,MAAC,GAAG,eAGD,CAAC,IAAI,CAAC,MAAM,IAAI,CACf,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YACxE,QAAQ,CAAC,IAAI,CAAC;gDACb,CAAC,CAAC,KAAK,CAAC,oBAAoB,EAAE,WAAW,CAAC;gDAC1C,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,MAAM,IAAI,CAAC,KAAK,EAAE,GAC3B,CACd,EACA,IAAI,KAAK,MAAM,IAAI,CAClB,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,kBAAkB,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAC5F,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,CAAC,GAC1F,CACH,IACG,KA3CD,IAAI,CAAC,KAAK,CA4CX,CACP,CAAC;oBACJ,CAAC,CAAC,IACE,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,YAC1B,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,YACjD,KAAK,CAAC,iBAAiB,EAAE,sGAAsG,CAAC,GACtH,GACT,IACD,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,IAAI,EAA0B;IACjD,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC;IAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACxC,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,YACtB,MAAC,WAAW,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aAC1C,MAAC,GAAG,eACF,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,CAAC,KAAK,GAAc,EAC3E,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,EAAE,IAAI,CAAC,MAAM;gCAChB,CAAC,CAAC,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;gCAChD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB,EAAE,WAAW,CAAC,GACpF,IACE,EAMN,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,YAC/C,IAAI,CAAC,MAAM;wBACV,CAAC,CAAC,KAAK,CAAC,iBAAiB,EAAE,eAAe,IAAI,CAAC,EAAE,IAAI,YAAY,kCAAkC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;wBAC3H,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;4BACd,CAAC,CAAC,KAAK,CAAC,iBAAiB,EAAE,qDAAqD,CAAC;4BACjF,CAAC,CAAC,GAAG,KAAK,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,QAAQ,WAAW,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;kCAC1F,MAAM,KAAK,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,GAChF,EACZ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,QAAQ,IAAwB,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,KAAK,IAA7C,OAAO,IAAI,CAAC,EAAE,EAAE,CAAgC,CAAC,EACzF,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,QAAQ,IAAyB,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,IAAI,IAA7C,MAAM,IAAI,CAAC,IAAI,EAAE,CAA+B,CAAC,IACjF,GACT,CACR,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,GAAG,aAAa,EAAE,OAAO,GAAG,cAAc,EAAE,GAAyB,EAAE;IAC/G,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IACjE,oGAAoG;IACpG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAU,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC;aAC7B,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,IAAI;YAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;aAC3G,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE,GAAG,IAAI,IAAI;YAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnF,OAAO,GAAG,EAAE,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,KAAK,GAAG,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAI,CAAC;IAEpE,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,aAAG,KAAK,EAAC,KAAC,QAAQ,IAAC,MAAM,EAAE,GAAG,GAAI,EAAA,KAAC,QAAQ,IAAC,MAAM,EAAE,GAAG,GAAI,IAAM,CAAC;IAC5F,CAAC;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,EAAE,CAAC;QAClC,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC7B,KAAK,EACN,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,aAC5C,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,0BAA0B,EAAE,kCAAkC,CAAC,GAAc,EAC7G,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,YAC/C,KAAK,CACJ,yBAAyB,EACzB,6KAA6K,CAC9K,GACU,EACb,KAAC,UAAU,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,YACxH,0FAA0F,GAChF,IACD,GACT,IACH,CACP,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC7B,KAAK,EACN,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,aAC5C,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,sBAAsB,EAAE,wBAAwB,CAAC,GAAc,EAC/F,KAAC,UAAU,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YACtJ,KAAK,CAAC,KAAe,EAAE,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAC5C,IACD,GACT,IACH,CACP,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,2FAA2F;IAC3F,oFAAoF;IACpF,gCAAgC;IAChC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAC7F,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACvF,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7G,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvC,KAAK,EACN,MAAC,GAAG,eACF,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,aAC/C,KAAK,CAAC,qBAAqB,EAAE,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,OAAO,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,CAAC,EAC/H,KAAK,EACL,KAAK,CAAC,0BAA0B,EAAE,GAAG,SAAS,YAAY,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,EACvF,OAAO,GAAG,CAAC,IAAI,8BACb,KAAK,EACL,KAAK,CAAC,wBAAwB,EAAE,GAAG,OAAO,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,IAC/E,EACF,KAAK,EACL,KAAK,CAAC,gBAAgB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,sBAAsB,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAEvH,KAAK,GAAG,CAAC,IAAI,8BACX,KAAK,EACL,KAAK,CAAC,sBAAsB,EAAE,GAAG,KAAK,uBAAuB,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,IACtF,IACQ,EAEZ,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1B,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,KAAK,CAAC,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,YAAY,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,GAC3G,CACH,IACG,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAI,EACrE,KAAK,IAAI,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAE,KAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,GAAM,EAKrE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAClC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,YACjD,KAAK,CAAC,kBAAkB,EAAE,yFAAyF,CAAC,GAC1G,CACd,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/topology.d.ts

@@ -1,7 +1,6 @@
-/** How the system is arranged, as the app itself reports it. */
 import { type Fetcher } from '@fougere/app/client';
-import { type Edge, type FrondPlacement, type TopologyReport } from '@fougere/core/contract';
-export type { TopologyReport, FrondPlacement, Edge };
+import { type DeclaredEdge, type Edge, type FrondPlacement, type TopologyReport } from '@fougere/core/contract';
+export type { TopologyReport, FrondPlacement, Edge, DeclaredEdge };
 /** The report, or `undefined` when the app serves no topology at all. */
 export declare function fetchTopology(endpoint?: string, fetcher?: Fetcher): Promise<TopologyReport | undefined>;
 /** One frond as the page draws it: its placement, and the calls observed around it. */
@@ -10,9 +9,72 @@ export interface TopologyNode extends FrondPlacement {
     calls: Edge[];
     /** Fronds that called this one. */
     calledBy: Edge[];
+    /** Fronds its code reaches, whether or not a call has ever gone down the link. */
+    declaredCalls: DeclaredEdge[];
+    /** Where the config says to reach it, when it says so. */
+    at?: string;
+    /**
+     * Declared in `remotes:` and never heard from. A different absence from an opaque remote,
+     * which answered and keeps its shape to itself: this one may simply be down.
+     */
+    silent: boolean;
 }
-/** The report read as a graph, local fronds first. */
+/** The report read as a graph — what runs here first, then what answered, then what never did. */
 export declare function nodesOf(report: TopologyReport): TopologyNode[];
-/** A frond this process called that publishes nothing of its own shape. */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** A node placed on the drawing. `x`/`y` are its CENTRE, the convention the layout answers in. */
+export interface PlacedNode {
+    node: TopologyNode;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * One link between two nodes. `count` is absent on a link nothing has travelled: the config
+ * declares it and no call has gone down it, which is drawn broken rather than not drawn.
+ */
+export interface PlacedEdge {
+    from: string;
+    to: string;
+    path: string;
+    /** Where this link's figure goes — clear of every node, or absent when the route is a point. */
+    at?: Point;
+    count?: number;
+    errors: number;
+    /** Where this link's volume sits among the others, `0` to `1`. Absent when nothing travelled. */
+    weight?: number;
+}
+export interface Drawing {
+    nodes: PlacedNode[];
+    edges: PlacedEdge[];
+    width: number;
+    height: number;
+}
+/**
+ * Where each frond sits, and the line between two of them.
+ *
+ * The placement is `@dagrejs/dagre`'s — ranks by depth, order within a rank chosen to cross as
+ * little as possible, and a polyline per edge that goes around the nodes between its ends. Two
+ * hand-written columns could not do the second or the third: a chain of three fronds put two of
+ * them in one column, and the curve between them had to bulge around whatever sat in the way.
+ *
+ * Rendering stays ours, which is why only the layout is bought: the drawing reads `error.main`
+ * and the rest of the MUI palette off the theme, and a library that painted its own canvas
+ * would have to be told the theme again on every switch. Kiali left Cytoscape for this in 2.0.0,
+ * and every service map whose source can be read — Grafana, Jaeger, Linkerd — buys the same half.
+ */
+export declare function layoutOf(nodes: readonly TopologyNode[]): Drawing;
+/** A count as an operator reads it at a glance — `2.1k`, never `2140`. */
+export declare function short(count: number): string;
+/** What a link says of itself, and the only figure the drawing carries. */
+export declare function figureOf(link: Pick<PlacedEdge, 'count' | 'errors'>): string;
+/**
+ * A frond this process called that publishes nothing of its own shape. Read AFTER `silent`:
+ * a frond that never answered has the same two zeroes and a different reason for them.
+ */
 export declare function isOpaque(node: FrondPlacement): boolean;
 //# sourceMappingURL=topology.d.ts.map

package/dist/topology.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"topology.d.ts","sourceRoot":"","sources":["../src/topology.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,OAAO,EAIL,KAAK,OAAO,EACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,KAAK,IAAI,EACT,KAAK,cAAc,EACnB,KAAK,cAAc,EAEpB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAErD,yEAAyE;AACzE,wBAAsB,aAAa,CACjC,QAAQ,SAAgB,EACxB,OAAO,GAAE,OAAwB,GAChC,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAYrC;AAED,uFAAuF;AACvF,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sDAAsD;IACtD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,sDAAsD;AACtD,wBAAgB,OAAO,CAAC,MAAM,EAAE,cAAc,GAAG,YAAY,EAAE,CAS9D;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAEtD"}
+{"version":3,"file":"topology.d.ts","sourceRoot":"","sources":["../src/topology.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,OAAO,EACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,KAAK,cAAc,EACnB,KAAK,cAAc,EAEpB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;AAEnE,yEAAyE;AACzE,wBAAsB,aAAa,CACjC,QAAQ,SAAgB,EACxB,OAAO,GAAE,OAAwB,GAChC,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAYrC;AAED,uFAAuF;AACvF,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sDAAsD;IACtD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjB,kFAAkF;IAClF,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,0DAA0D;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,kGAAkG;AAClG,wBAAgB,OAAO,CAAC,MAAM,EAAE,cAAc,GAAG,YAAY,EAAE,CAqC9D;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,kGAAkG;AAClG,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,GAAG,OAAO,CA6ChE;AAED,0EAA0E;AAC1E,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAI3C;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG,MAAM,CAI3E;AAsGD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAEtD"}

package/dist/topology.js

@@ -1,4 +1,5 @@
 /** How the system is arranged, as the app itself reports it. */
+import dagre from '@dagrejs/dagre';
 import { CALL_ENDPOINT, fetcher as browserFetcher, sendCall, } from '@fougere/app/client';
 import { ErrorCode, Invocation, } from '@fougere/core/contract';
 /** The report, or `undefined` when the app serves no topology at all. */
@@ -12,18 +13,200 @@ export async function fetchTopology(endpoint = CALL_ENDPOINT, fetcher = browserF
         throw error;
     }
 }
-/** The report read as a graph, local fronds first. */
+/** The report read as a graph — what runs here first, then what answered, then what never did. */
 export function nodesOf(report) {
     const order = { local: 0, remote: 1 };
-    return [...report.fronds]
+    const stated = new Map(report.declared.fronds.map((one) => [one.frond, one]));
+    const answered = new Set(report.fronds.map((frond) => frond.frond));
+    const around = (frond) => ({
+        calls: report.edges.filter((edge) => edge.from === frond),
+        calledBy: report.edges.filter((edge) => edge.to === frond),
+        declaredCalls: report.declared.edges.filter((edge) => edge.from === frond),
+    });
+    const heard = [...report.fronds]
         .sort((a, b) => order[a.placement] - order[b.placement] || a.frond.localeCompare(b.frond))
         .map((frond) => ({
         ...frond,
-        calls: report.edges.filter((edge) => edge.from === frond.frond),
-        calledBy: report.edges.filter((edge) => edge.to === frond.frond),
+        ...around(frond.frond),
+        ...(stated.get(frond.frond)?.at ? { at: stated.get(frond.frond).at } : {}),
+        silent: false,
     }));
+    // The whole reason the declared half travels: a frond that never answered is absent from
+    // the observed one, so without this the node the operator most needs to see is the one
+    // that disappears.
+    const silent = report.declared.fronds
+        .filter((one) => one.placement === 'remote' && !answered.has(one.frond))
+        .sort((a, b) => a.frond.localeCompare(b.frond))
+        .map((one) => ({
+        frond: one.frond,
+        placement: 'remote',
+        entities: 0,
+        doors: 0,
+        ...around(one.frond),
+        ...(one.at ? { at: one.at } : {}),
+        silent: true,
+    }));
+    return [...heard, ...silent];
+}
+const NODE = { width: 176, height: 54 };
+/**
+ * Where each frond sits, and the line between two of them.
+ *
+ * The placement is `@dagrejs/dagre`'s — ranks by depth, order within a rank chosen to cross as
+ * little as possible, and a polyline per edge that goes around the nodes between its ends. Two
+ * hand-written columns could not do the second or the third: a chain of three fronds put two of
+ * them in one column, and the curve between them had to bulge around whatever sat in the way.
+ *
+ * Rendering stays ours, which is why only the layout is bought: the drawing reads `error.main`
+ * and the rest of the MUI palette off the theme, and a library that painted its own canvas
+ * would have to be told the theme again on every switch. Kiali left Cytoscape for this in 2.0.0,
+ * and every service map whose source can be read — Grafana, Jaeger, Linkerd — buys the same half.
+ */
+export function layoutOf(nodes) {
+    const graph = new dagre.graphlib.Graph();
+    // Left to right: the reader is the process being asked, and what it depends on goes outward.
+    graph.setGraph({ rankdir: 'LR', nodesep: 26, ranksep: 92, marginx: 22, marginy: 22 });
+    graph.setDefaultEdgeLabel(() => ({}));
+    for (const node of nodes)
+        graph.setNode(node.frond, { ...NODE });
+    const links = linksBetween(nodes);
+    for (const link of links) {
+        if (graph.hasNode(link.from) && graph.hasNode(link.to))
+            graph.setEdge(link.from, link.to);
+    }
+    dagre.layout(graph);
+    const travelled = links.map((link) => link.count).filter((count) => count !== undefined);
+    const shape = graph.graph();
+    const placed = nodes
+        .filter((node) => graph.hasNode(node.frond))
+        .map((node) => {
+        const { x, y, width, height } = graph.node(node.frond);
+        return { node, x, y, width, height };
+    });
+    return {
+        nodes: placed,
+        edges: links.flatMap((link) => {
+            const drawn = graph.hasNode(link.from) && graph.hasNode(link.to) ? graph.edge(link.from, link.to) : undefined;
+            if (!drawn)
+                return [];
+            const points = drawn.points;
+            const at = labelAt(points, placed, figureOf(link).length * 3.4 + 8);
+            return [{
+                    ...link,
+                    path: through(points),
+                    ...(at ? { at } : {}),
+                    ...(link.count === undefined ? {} : { weight: weightOf(link.count, travelled) }),
+                }];
+        }),
+        width: shape.width ?? 0,
+        height: shape.height ?? 0,
+    };
+}
+/** A count as an operator reads it at a glance — `2.1k`, never `2140`. */
+export function short(count) {
+    if (count < 1000)
+        return String(count);
+    return `${(count / 1000).toFixed(count < 10_000 ? 1 : 0)}k`;
+}
+/** What a link says of itself, and the only figure the drawing carries. */
+export function figureOf(link) {
+    if (link.count === undefined)
+        return '—';
+    return link.errors > 0 ? `${short(link.count)} · ${short(link.errors)} ✕` : short(link.count);
+}
+/**
+ * Where a volume sits among the others, on a SQUARE ROOT scale. Linear makes every link but the
+ * busiest a hairline; a log flattens them the other way, and flattening is wrong at this spread —
+ * 40 to 2140 is under two orders of magnitude, and the busiest link deserves to look it.
+ */
+function weightOf(count, travelled) {
+    const high = Math.max(...travelled);
+    if (high <= 0)
+        return 1;
+    return Math.sqrt(count / high);
+}
+/** Every link, observed or merely declared, each named once. */
+function linksBetween(nodes) {
+    const observed = nodes.flatMap((one) => one.calls);
+    const travelled = new Set(observed.map((edge) => `${edge.from} ${edge.to}`));
+    return [
+        ...observed.map((edge) => ({ from: edge.from, to: edge.to, count: edge.count, errors: edge.errors })),
+        ...nodes
+            .flatMap((one) => one.declaredCalls)
+            .filter((edge) => !travelled.has(`${edge.from} ${edge.to}`))
+            .map((edge) => ({ from: edge.from, to: edge.to, errors: 0 })),
+    ];
+}
+/**
+ * A B-spline over the waypoints — what dagre-d3 and Grafana draw their edges with.
+ *
+ * It deliberately does NOT pass through them. A curve pinned to the points takes its character
+ * from their COUNT, and a router hands back two for a short hop and five for one that goes around
+ * something — so every edge came out with a bearing of its own and the drawing read as noise.
+ *
+ * The ends are TRIPLED rather than joined by a straight segment: a clamped spline reaches its
+ * endpoint on its own tangent, where an anchor line meets the curve at whatever angle it happens
+ * to, which is a visible corner exactly where the arrow is.
+ */
+function through(points) {
+    const first = points[0];
+    const last = points.at(-1);
+    if (!first || !last)
+        return '';
+    if (points.length === 1)
+        return `M ${first.x} ${first.y}`;
+    const held = [first, first, ...points, last, last];
+    const steps = held.slice(2).map((point, nth) => {
+        const back = held[nth];
+        const near = held[nth + 1];
+        return `C ${(2 * back.x + near.x) / 3} ${(2 * back.y + near.y) / 3},`
+            + ` ${(back.x + 2 * near.x) / 3} ${(back.y + 2 * near.y) / 3},`
+            + ` ${(back.x + 4 * near.x + point.x) / 6} ${(back.y + 4 * near.y + point.y) / 6}`;
+    });
+    return `M ${first.x} ${first.y} ${steps.join(' ')}`;
+}
+/** A point at a fraction of a route's length. */
+function alongOf(points, fraction) {
+    if (fraction <= 0 || fraction >= 1)
+        return undefined;
+    const spans = points.slice(1).map((point, nth) => Math.hypot(point.x - points[nth].x, point.y - points[nth].y));
+    const target = spans.reduce((sum, span) => sum + span, 0) * fraction;
+    let walked = 0;
+    for (let nth = 0; nth < spans.length; nth++) {
+        if (walked + spans[nth] >= target) {
+            const into = spans[nth] === 0 ? 0 : (target - walked) / spans[nth];
+            return {
+                x: points[nth].x + (points[nth + 1].x - points[nth].x) * into,
+                y: points[nth].y + (points[nth + 1].y - points[nth].y) * into,
+            };
+        }
+        walked += spans[nth];
+    }
+    return points.at(-1);
+}
+/**
+ * Where a link's figure sits: halfway ALONG the route, then moved along it until it sits inside no
+ * node. The middle waypoint is not the middle of the line — a routed edge bunches its points near
+ * the ends — and a figure drawn over a card cannot be read at all.
+ */
+function labelAt(points, boxes, half) {
+    const inside = (point) => boxes.some((box) => Math.abs(point.x - box.x) < box.width / 2 + half && Math.abs(point.y - box.y) < box.height / 2 + 13);
+    const middle = alongOf(points, 0.5);
+    if (!middle || !inside(middle))
+        return middle;
+    for (let step = 1; step <= 12; step++) {
+        for (const side of [-1, 1]) {
+            const moved = alongOf(points, 0.5 + side * step * 0.035);
+            if (moved && !inside(moved))
+                return moved;
+        }
+    }
+    return middle;
 }
-/** A frond this process called that publishes nothing of its own shape. */
+/**
+ * A frond this process called that publishes nothing of its own shape. Read AFTER `silent`:
+ * a frond that never answered has the same two zeroes and a different reason for them.
+ */
 export function isOpaque(node) {
     return node.placement === 'remote' && node.entities === 0 && node.doors === 0;
 }

package/dist/topology.js.map

@@ -1 +1 @@
-{"version":3,"file":"topology.js","sourceRoot":"","sources":["../src/topology.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,OAAO,EACL,aAAa,EACb,OAAO,IAAI,cAAc,EACzB,QAAQ,GAET,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,EAIT,UAAU,GACX,MAAM,wBAAwB,CAAC;AAIhC,yEAAyE;AACzE,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,QAAQ,GAAG,aAAa,EACxB,OAAO,GAAY,cAAc;IAEjC,IAAI,CAAC;QACH,OAAO,MAAM,QAAQ,CACnB,OAAO,EACP,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EACjC,UAAU,CAAC,KAAK,EAChB,QAAQ,CACS,CAAC;IACtB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,IAAK,KAA4B,EAAE,IAAI,KAAK,SAAS,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QAClF,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC;AAUD,sDAAsD;AACtD,MAAM,UAAU,OAAO,CAAC,MAAsB;IAC5C,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IACtC,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;SACtB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;SACzF,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACf,GAAG,KAAK;QACR,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,KAAK,CAAC;QAC/D,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC;KACjE,CAAC,CAAC,CAAC;AACR,CAAC;AAED,2EAA2E;AAC3E,MAAM,UAAU,QAAQ,CAAC,IAAoB;IAC3C,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC;AAChF,CAAC"}
+{"version":3,"file":"topology.js","sourceRoot":"","sources":["../src/topology.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fougere/admin",
-  "version": "0.9.2-alpha.0",
+  "version": "0.9.3-alpha.0",
   "description": "A back-office derived from what the app already says it hosts — a react-admin DataProvider over the Fougere wire.",
   "keywords": [
     "fougere",
@@ -34,9 +34,10 @@
     "src"
   ],
   "dependencies": {
-    "@fougere/app": "0.9.2-alpha.0",
-    "@fougere/core": "0.9.2-alpha.0",
-    "@fougere/schema": "0.9.2-alpha.0"
+    "@dagrejs/dagre": "^3.1.1",
+    "@fougere/app": "0.9.3-alpha.0",
+    "@fougere/core": "0.9.3-alpha.0",
+    "@fougere/schema": "0.9.3-alpha.0"
   },
   "devDependencies": {
     "@mui/material": "^9.3.1",

package/src/topology-page.tsx

@@ -5,18 +5,20 @@
  *
  * Every other page in this panel renders a DOOR — a list, a form, a row. This one renders
  * the app: which fronds run in the process it is talking to, which answered from somewhere
- * else, and who called whom. Nothing here is configured, and nothing is declared: a frond
- * is remote because it answered a call nobody hosts.
+ * else, who called whom — and which the config names but nothing has ever answered from.
+ * The first three are OBSERVED: a frond is elsewhere because it answered, never because
+ * `remotes:` said so. The fourth is the only declared one, and it is the only one the
+ * observed half cannot hold — a frond that never answered is absent from it.
  *
  * It is served by `@fougere/observability`, so its absence is a legible state and not an
  * error — which is why the entry stays in the menu when nothing answers. Hiding it would
  * hide the one place that can say what is missing.
  */
-import { Box, Card, CardContent, Chip, Skeleton, Typography } from '@mui/material';
-import { useEffect, useState, type ReactElement } from 'react';
+import { Box, Card, CardContent, Chip, Skeleton, Typography, type Theme } from '@mui/material';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
 import { Title, useTranslate } from 'react-admin';
 import { CALL_ENDPOINT, fetcher as browserFetcher, type Fetcher } from '@fougere/app/client';
-import { fetchTopology, isOpaque, nodesOf, type Edge, type TopologyNode, type TopologyReport } from './topology.js';
+import { fetchTopology, figureOf, isOpaque, layoutOf, nodesOf, type Edge, type TopologyNode, type TopologyReport } from './topology.js';
 
 /** What the page is: the report, the refusal that means "not observed", or a real failure. */
 type State =
@@ -60,6 +62,167 @@ function EdgeLine({ edge, direction }: { edge: Edge; direction: 'out' | 'in' }):
   );
 }
 
+/**
+ * A palette path as SVG paint. `sx` resolves `'error.main'` for `color` and `bgcolor` and for
+ * nothing else, so `fill` and `stroke` reach CSS verbatim — an invalid value, and SVG falls back
+ * to BLACK. Every shape on this page is painted through here.
+ */
+function paint(paths: { fill?: string; stroke?: string }) {
+  const read = (theme: Theme, path: string) =>
+    path.split('.').reduce<unknown>((held, key) => (held as Record<string, unknown>)?.[key], theme.palette) as string;
+
+  return (theme: Theme) => ({
+    ...(paths.fill ? { fill: read(theme, paths.fill) } : {}),
+    ...(paths.stroke ? { stroke: read(theme, paths.stroke) } : {}),
+  });
+}
+
+/** What a node is painted with, by the one thing that separates the three states. */
+function toneOf(node: TopologyNode): 'primary' | 'grey' | 'warning' {
+  if (node.silent) return 'warning';
+
+  return node.placement === 'local' ? 'primary' : 'grey';
+}
+
+/**
+ * The system, drawn. Placement is `layoutOf`'s — ranks, order and routing.
+ *
+ * The nodes are HTML over an SVG that draws only the lines, which is how React Flow is built and
+ * why its nodes look like the rest of an app: a card is a `Box` with `sx`, so it reads the theme
+ * like every other element. An SVG `<text>` positioned by hand does not.
+ *
+ * Both layers sit on ONE scale — the container takes the drawing's aspect ratio, and every node is
+ * sized AND placed in per cent of it. A size in pixels does not grow with the viewBox the SVG
+ * scales to its container, and the lines then stop short of the cards they point at.
+ *
+ * What the drawing says beyond who reaches whom: thickness is volume, a broken line is declared
+ * and never travelled, and refusals are a figure rather than a red line — colour alone excludes a
+ * reader who cannot see it, and "how many" is the question a red line raises without answering.
+ */
+function Graph({ nodes, selected, onSelect }: {
+  nodes: readonly TopologyNode[];
+  selected: string | undefined;
+  onSelect: (frond: string) => void;
+}): ReactElement {
+  const label = useLabels();
+  const drawing = useMemo(() => layoutOf(nodes), [nodes]);
+  const per = (value: number, of: number) => `${(value / of) * 100}%`;
+
+  return (
+    <Card variant="outlined">
+      <Box sx={{ position: 'relative', bgcolor: 'action.hover', aspectRatio: `${drawing.width} / ${drawing.height}` }}>
+        <Box
+          component="svg"
+          viewBox={`0 0 ${drawing.width} ${drawing.height}`}
+          sx={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+        >
+          <defs>
+            <marker id="fougere-arrow" viewBox="0 0 8 8" refX="6.5" refY="4" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+              <Box component="path" d="M 0 0 L 8 4 L 0 8 z" sx={paint({ fill: 'text.disabled' })} />
+            </marker>
+          </defs>
+
+          {drawing.edges.map((edge) => (
+            <Box
+              component="path"
+              key={`${edge.from}-${edge.to}`}
+              d={edge.path}
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth={edge.weight === undefined ? 1.5 : 1.5 + edge.weight * 3}
+              strokeDasharray={edge.weight === undefined ? '2 5' : undefined}
+              markerEnd="url(#fougere-arrow)"
+              sx={[paint({ stroke: 'text.disabled' }), { strokeOpacity: 0.5 }]}
+            />
+          ))}
+        </Box>
+
+        {drawing.edges.map((edge) => edge.at && (
+          <Box
+            key={`figure-${edge.from}-${edge.to}`}
+            sx={{
+              position: 'absolute',
+              left: per(edge.at.x, drawing.width),
+              top: per(edge.at.y, drawing.height),
+              transform: 'translate(-50%, -50%)',
+              px: 0.75,
+              borderRadius: 1,
+              border: 1,
+              borderColor: 'divider',
+              bgcolor: 'background.paper',
+              fontFamily: 'monospace',
+              fontSize: 11,
+              fontWeight: 600,
+              lineHeight: '17px',
+              whiteSpace: 'nowrap',
+              color: edge.errors > 0 ? 'error.main' : 'text.secondary',
+            }}
+          >
+            {edge.count === undefined ? label('topology.noTraffic', 'no traffic') : figureOf(edge)}
+          </Box>
+        ))}
+
+        {drawing.nodes.map(({ node, x, y, width, height }) => {
+          const tone = toneOf(node);
+          return (
+            <Box
+              key={node.frond}
+              onClick={() => onSelect(node.frond)}
+              sx={{
+                position: 'absolute',
+                left: per(x, drawing.width),
+                top: per(y, drawing.height),
+                width: per(width, drawing.width),
+                height: per(height, drawing.height),
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                gap: 0.25,
+                overflow: 'hidden',
+                px: 1.25,
+                borderRadius: 1.5,
+                border: node.frond === selected ? 2 : 1.4,
+                borderStyle: node.silent ? 'dashed' : 'solid',
+                borderColor: tone === 'grey' ? 'divider' : `${tone}.main`,
+                bgcolor: 'background.paper',
+                cursor: 'pointer',
+              }}
+            >
+              <Box sx={{ fontFamily: 'monospace', fontSize: 13.5, fontWeight: 600 }}>{node.frond}</Box>
+              <Row>
+                {/* A remote's two zeroes are not a measurement: its shape is published by the
+                    process that owns it, so the card says WHERE it is instead of counting. */}
+                {!node.silent && (
+                  <Typography variant="caption" color="text.secondary" sx={{ fontSize: 10.5 }}>
+                    {isOpaque(node)
+                      ? label('topology.elsewhere', 'elsewhere')
+                      : `${node.entities} · ${node.doors}`}
+                  </Typography>
+                )}
+                {tone !== 'grey' && (
+                  <Chip
+                    size="small"
+                    color={tone}
+                    variant="outlined"
+                    sx={{ height: 16, '& .MuiChip-label': { px: 0.75, fontSize: 9.5, letterSpacing: '0.05em' } }}
+                    label={node.silent ? label('topology.unheard', 'unheard') : label('topology.here', 'here')}
+                  />
+                )}
+              </Row>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box sx={{ px: 2, py: 1.25 }}>
+        <Typography variant="caption" color="text.secondary">
+          {label('topology.legend', 'Thickness is volume. A broken line is declared and never travelled. Click a frond for what it holds.')}
+        </Typography>
+      </Box>
+    </Card>
+  );
+}
+
 function FrondCard({ node }: { node: TopologyNode }): ReactElement {
   const label = useLabels();
   const here = node.placement === 'local';
@@ -70,8 +233,10 @@ function FrondCard({ node }: { node: TopologyNode }): ReactElement {
           <Typography variant="h6" sx={{ fontWeight: 700 }}>{node.frond}</Typography>
           <Chip
             size="small"
-            color={here ? 'primary' : 'default'}
-            label={here ? label('topology.here', 'here') : label('topology.elsewhere', 'elsewhere')}
+            color={node.silent ? 'warning' : here ? 'primary' : 'default'}
+            label={node.silent
+              ? label('topology.unheard', 'declared, unheard')
+              : here ? label('topology.here', 'here') : label('topology.elsewhere', 'elsewhere')}
           />
         </Row>
         {/*
@@ -80,10 +245,12 @@ function FrondCard({ node }: { node: TopologyNode }): ReactElement {
           empty frond, which reads as a frond with nothing in it.
         */}
         <Typography variant="body2" color="text.secondary">
-          {isOpaque(node)
-            ? label('topology.opaque', 'Its shape is published by the process that owns it.')
-            : `${label('topology.entities', `${node.entities} entities`, { smart_count: node.entities })}`
-              + ` · ${label('topology.doors', `${node.doors} doors`, { smart_count: node.doors })}`}
+          {node.silent
+            ? label('topology.silent', `Declared at ${node.at ?? 'no address'} — nothing has answered from it.`, { at: node.at ?? '' })
+            : isOpaque(node)
+              ? label('topology.opaque', 'Its shape is published by the process that owns it.')
+              : `${label('topology.entities', `${node.entities} entities`, { smart_count: node.entities })}`
+                + ` · ${label('topology.doors', `${node.doors} doors`, { smart_count: node.doors })}`}
         </Typography>
         {node.calls.map((edge) => <EdgeLine key={`out-${edge.to}`} edge={edge} direction="out" />)}
         {node.calledBy.map((edge) => <EdgeLine key={`in-${edge.from}`} edge={edge} direction="in" />)}
@@ -100,6 +267,8 @@ export interface FougereTopologyProps {
 export function FougereTopology({ endpoint = CALL_ENDPOINT, fetcher = browserFetcher }: FougereTopologyProps = {}): ReactElement {
   const label = useLabels();
   const [state, setState] = useState<State>({ status: 'loading' });
+  /** Which frond the detail below is about — the drawing answers "where", one card answers "what". */
+  const [selected, setSelected] = useState<string>();
 
   useEffect(() => {
     let live = true;
@@ -154,18 +323,34 @@ export function FougereTopology({ endpoint = CALL_ENDPOINT, fetcher = browserFet
   }
 
   const nodes = nodesOf(state.report);
-  const elsewhere = nodes.filter((node) => node.placement === 'remote').length;
+  // Three counts because there are three ways of being known, and `elsewhere` means ANSWERED
+  // from elsewhere: counting a frond that never answered among them makes the summary
+  // contradict the card under it.
+  const unheard = nodes.filter((node) => node.silent).length;
+  const elsewhere = nodes.filter((node) => node.placement === 'remote' && !node.silent).length;
+  const shown = nodes.find((node) => node.frond === selected) ?? nodes[0];
+  const travelled = new Set(state.report.edges.map((edge) => `${edge.from} ${edge.to}`));
+  const quiet = state.report.declared.edges.filter((edge) => !travelled.has(`${edge.from} ${edge.to}`)).length;
 
   return (
     <Box sx={{ p: 3, display: 'grid', gap: 2 }}>
       {title}
       <Row>
         <Typography variant="body2" color="text.secondary">
-          {label('topology.here_count', `${nodes.length - elsewhere} here`, { smart_count: nodes.length - elsewhere })}
+          {label('topology.here_count', `${nodes.length - elsewhere - unheard} here`, { smart_count: nodes.length - elsewhere - unheard })}
           {' · '}
           {label('topology.elsewhere_count', `${elsewhere} elsewhere`, { smart_count: elsewhere })}
+          {unheard > 0 && <>
+            {' · '}
+            {label('topology.unheard_count', `${unheard} unheard`, { smart_count: unheard })}
+          </>}
           {' · '}
           {label('topology.paths', `${state.report.edges.length} observed call paths`, { smart_count: state.report.edges.length })}
+          {/* The two anomalies, counted where a reader looks first — not left to be found in the drawing. */}
+          {quiet > 0 && <>
+            {' · '}
+            {label('topology.quiet_count', `${quiet} link without traffic`, { smart_count: quiet })}
+          </>}
         </Typography>
         {/* Saturation: the one signal a static shape cannot carry. */}
         {state.report.active > 0 && (
@@ -176,9 +361,8 @@ export function FougereTopology({ endpoint = CALL_ENDPOINT, fetcher = browserFet
           />
         )}
       </Row>
-      <Box sx={{ display: 'grid', gap: 2, gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
-        {nodes.map((node) => <FrondCard key={node.frond} node={node} />)}
-      </Box>
+      <Graph nodes={nodes} selected={shown?.frond} onSelect={setSelected} />
+      {shown && <Box sx={{ maxWidth: 520 }}><FrondCard node={shown} /></Box>}
       {/*
         An edge is only knowable on the side that made the call, so a process with no
         outgoing call has none — that is ordinary, not a gap in the reading.

package/src/topology.ts

@@ -1,4 +1,5 @@
 /** How the system is arranged, as the app itself reports it. */
+import dagre from '@dagrejs/dagre';
 import {
   CALL_ENDPOINT,
   fetcher as browserFetcher,
@@ -7,13 +8,14 @@ import {
 } from '@fougere/app/client';
 import {
   ErrorCode,
+  type DeclaredEdge,
   type Edge,
   type FrondPlacement,
   type TopologyReport,
   Invocation,
 } from '@fougere/core/contract';
 
-export type { TopologyReport, FrondPlacement, Edge };
+export type { TopologyReport, FrondPlacement, Edge, DeclaredEdge };
 
 /** The report, or `undefined` when the app serves no topology at all. */
 export async function fetchTopology(
@@ -39,21 +41,274 @@ export interface TopologyNode extends FrondPlacement {
   calls: Edge[];
   /** Fronds that called this one. */
   calledBy: Edge[];
+  /** Fronds its code reaches, whether or not a call has ever gone down the link. */
+  declaredCalls: DeclaredEdge[];
+  /** Where the config says to reach it, when it says so. */
+  at?: string;
+  /**
+   * Declared in `remotes:` and never heard from. A different absence from an opaque remote,
+   * which answered and keeps its shape to itself: this one may simply be down.
+   */
+  silent: boolean;
 }
 
-/** The report read as a graph, local fronds first. */
+/** The report read as a graph — what runs here first, then what answered, then what never did. */
 export function nodesOf(report: TopologyReport): TopologyNode[] {
   const order = { local: 0, remote: 1 };
-  return [...report.fronds]
+  const stated = new Map(report.declared.fronds.map((one) => [one.frond, one]));
+  const answered = new Set(report.fronds.map((frond) => frond.frond));
+
+  const around = (frond: string) => ({
+    calls: report.edges.filter((edge) => edge.from === frond),
+    calledBy: report.edges.filter((edge) => edge.to === frond),
+    declaredCalls: report.declared.edges.filter((edge) => edge.from === frond),
+  });
+
+  const heard: TopologyNode[] = [...report.fronds]
     .sort((a, b) => order[a.placement] - order[b.placement] || a.frond.localeCompare(b.frond))
     .map((frond) => ({
       ...frond,
-      calls: report.edges.filter((edge) => edge.from === frond.frond),
-      calledBy: report.edges.filter((edge) => edge.to === frond.frond),
+      ...around(frond.frond),
+      ...(stated.get(frond.frond)?.at ? { at: stated.get(frond.frond)!.at } : {}),
+      silent: false,
+    }));
+
+  // The whole reason the declared half travels: a frond that never answered is absent from
+  // the observed one, so without this the node the operator most needs to see is the one
+  // that disappears.
+  const silent: TopologyNode[] = report.declared.fronds
+    .filter((one) => one.placement === 'remote' && !answered.has(one.frond))
+    .sort((a, b) => a.frond.localeCompare(b.frond))
+    .map((one) => ({
+      frond: one.frond,
+      placement: 'remote' as const,
+      entities: 0,
+      doors: 0,
+      ...around(one.frond),
+      ...(one.at ? { at: one.at } : {}),
+      silent: true,
     }));
+
+  return [...heard, ...silent];
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/** A node placed on the drawing. `x`/`y` are its CENTRE, the convention the layout answers in. */
+export interface PlacedNode {
+  node: TopologyNode;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * One link between two nodes. `count` is absent on a link nothing has travelled: the config
+ * declares it and no call has gone down it, which is drawn broken rather than not drawn.
+ */
+export interface PlacedEdge {
+  from: string;
+  to: string;
+  path: string;
+  /** Where this link's figure goes — clear of every node, or absent when the route is a point. */
+  at?: Point;
+  count?: number;
+  errors: number;
+  /** Where this link's volume sits among the others, `0` to `1`. Absent when nothing travelled. */
+  weight?: number;
+}
+
+export interface Drawing {
+  nodes: PlacedNode[];
+  edges: PlacedEdge[];
+  width: number;
+  height: number;
+}
+
+const NODE = { width: 176, height: 54 };
+
+/**
+ * Where each frond sits, and the line between two of them.
+ *
+ * The placement is `@dagrejs/dagre`'s — ranks by depth, order within a rank chosen to cross as
+ * little as possible, and a polyline per edge that goes around the nodes between its ends. Two
+ * hand-written columns could not do the second or the third: a chain of three fronds put two of
+ * them in one column, and the curve between them had to bulge around whatever sat in the way.
+ *
+ * Rendering stays ours, which is why only the layout is bought: the drawing reads `error.main`
+ * and the rest of the MUI palette off the theme, and a library that painted its own canvas
+ * would have to be told the theme again on every switch. Kiali left Cytoscape for this in 2.0.0,
+ * and every service map whose source can be read — Grafana, Jaeger, Linkerd — buys the same half.
+ */
+export function layoutOf(nodes: readonly TopologyNode[]): Drawing {
+  const graph = new dagre.graphlib.Graph();
+  // Left to right: the reader is the process being asked, and what it depends on goes outward.
+  graph.setGraph({ rankdir: 'LR', nodesep: 26, ranksep: 92, marginx: 22, marginy: 22 });
+  graph.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of nodes) graph.setNode(node.frond, { ...NODE });
+
+  const links = linksBetween(nodes);
+  for (const link of links) {
+    if (graph.hasNode(link.from) && graph.hasNode(link.to)) graph.setEdge(link.from, link.to);
+  }
+
+  dagre.layout(graph);
+
+  const travelled = links.map((link) => link.count).filter((count): count is number => count !== undefined);
+  const shape = graph.graph();
+
+  const placed: PlacedNode[] = nodes
+    .filter((node) => graph.hasNode(node.frond))
+    .map((node) => {
+      const { x, y, width, height } = graph.node(node.frond) as PlacedNode;
+
+      return { node, x, y, width, height };
+    });
+
+  return {
+    nodes: placed,
+    edges: links.flatMap((link) => {
+      const drawn = graph.hasNode(link.from) && graph.hasNode(link.to) ? graph.edge(link.from, link.to) : undefined;
+      if (!drawn) return [];
+
+      const points = drawn.points as Point[];
+      const at = labelAt(points, placed, figureOf(link).length * 3.4 + 8);
+
+      return [{
+        ...link,
+        path: through(points),
+        ...(at ? { at } : {}),
+        ...(link.count === undefined ? {} : { weight: weightOf(link.count, travelled) }),
+      }];
+    }),
+    width: shape.width ?? 0,
+    height: shape.height ?? 0,
+  };
+}
+
+/** A count as an operator reads it at a glance — `2.1k`, never `2140`. */
+export function short(count: number): string {
+  if (count < 1000) return String(count);
+
+  return `${(count / 1000).toFixed(count < 10_000 ? 1 : 0)}k`;
+}
+
+/** What a link says of itself, and the only figure the drawing carries. */
+export function figureOf(link: Pick<PlacedEdge, 'count' | 'errors'>): string {
+  if (link.count === undefined) return '—';
+
+  return link.errors > 0 ? `${short(link.count)} · ${short(link.errors)} ✕` : short(link.count);
+}
+
+/**
+ * Where a volume sits among the others, on a SQUARE ROOT scale. Linear makes every link but the
+ * busiest a hairline; a log flattens them the other way, and flattening is wrong at this spread —
+ * 40 to 2140 is under two orders of magnitude, and the busiest link deserves to look it.
+ */
+function weightOf(count: number, travelled: readonly number[]): number {
+  const high = Math.max(...travelled);
+  if (high <= 0) return 1;
+
+  return Math.sqrt(count / high);
+}
+
+/** Every link, observed or merely declared, each named once. */
+function linksBetween(nodes: readonly TopologyNode[]): Omit<PlacedEdge, 'path'>[] {
+  const observed = nodes.flatMap((one) => one.calls);
+  const travelled = new Set(observed.map((edge) => `${edge.from} ${edge.to}`));
+
+  return [
+    ...observed.map((edge) => ({ from: edge.from, to: edge.to, count: edge.count, errors: edge.errors })),
+    ...nodes
+      .flatMap((one) => one.declaredCalls)
+      .filter((edge) => !travelled.has(`${edge.from} ${edge.to}`))
+      .map((edge) => ({ from: edge.from, to: edge.to, errors: 0 })),
+  ];
+}
+
+/**
+ * A B-spline over the waypoints — what dagre-d3 and Grafana draw their edges with.
+ *
+ * It deliberately does NOT pass through them. A curve pinned to the points takes its character
+ * from their COUNT, and a router hands back two for a short hop and five for one that goes around
+ * something — so every edge came out with a bearing of its own and the drawing read as noise.
+ *
+ * The ends are TRIPLED rather than joined by a straight segment: a clamped spline reaches its
+ * endpoint on its own tangent, where an anchor line meets the curve at whatever angle it happens
+ * to, which is a visible corner exactly where the arrow is.
+ */
+function through(points: readonly Point[]): string {
+  const first = points[0];
+  const last = points.at(-1);
+  if (!first || !last) return '';
+  if (points.length === 1) return `M ${first.x} ${first.y}`;
+
+  const held = [first, first, ...points, last, last];
+  const steps = held.slice(2).map((point, nth) => {
+    const back = held[nth]!;
+    const near = held[nth + 1]!;
+
+    return `C ${(2 * back.x + near.x) / 3} ${(2 * back.y + near.y) / 3},`
+      + ` ${(back.x + 2 * near.x) / 3} ${(back.y + 2 * near.y) / 3},`
+      + ` ${(back.x + 4 * near.x + point.x) / 6} ${(back.y + 4 * near.y + point.y) / 6}`;
+  });
+
+  return `M ${first.x} ${first.y} ${steps.join(' ')}`;
+}
+
+/** A point at a fraction of a route's length. */
+function alongOf(points: readonly Point[], fraction: number): Point | undefined {
+  if (fraction <= 0 || fraction >= 1) return undefined;
+  const spans = points.slice(1).map((point, nth) => Math.hypot(point.x - points[nth]!.x, point.y - points[nth]!.y));
+  const target = spans.reduce((sum, span) => sum + span, 0) * fraction;
+
+  let walked = 0;
+  for (let nth = 0; nth < spans.length; nth++) {
+    if (walked + spans[nth]! >= target) {
+      const into = spans[nth] === 0 ? 0 : (target - walked) / spans[nth]!;
+
+      return {
+        x: points[nth]!.x + (points[nth + 1]!.x - points[nth]!.x) * into,
+        y: points[nth]!.y + (points[nth + 1]!.y - points[nth]!.y) * into,
+      };
+    }
+    walked += spans[nth]!;
+  }
+
+  return points.at(-1);
+}
+
+/**
+ * Where a link's figure sits: halfway ALONG the route, then moved along it until it sits inside no
+ * node. The middle waypoint is not the middle of the line — a routed edge bunches its points near
+ * the ends — and a figure drawn over a card cannot be read at all.
+ */
+function labelAt(points: readonly Point[], boxes: readonly PlacedNode[], half: number): Point | undefined {
+  const inside = (point: Point) => boxes.some((box) =>
+    Math.abs(point.x - box.x) < box.width / 2 + half && Math.abs(point.y - box.y) < box.height / 2 + 13);
+
+  const middle = alongOf(points, 0.5);
+  if (!middle || !inside(middle)) return middle;
+
+  for (let step = 1; step <= 12; step++) {
+    for (const side of [-1, 1]) {
+      const moved = alongOf(points, 0.5 + side * step * 0.035);
+      if (moved && !inside(moved)) return moved;
+    }
+  }
+
+  return middle;
 }
 
-/** A frond this process called that publishes nothing of its own shape. */
+/**
+ * A frond this process called that publishes nothing of its own shape. Read AFTER `silent`:
+ * a frond that never answered has the same two zeroes and a different reason for them.
+ */
 export function isOpaque(node: FrondPlacement): boolean {
   return node.placement === 'remote' && node.entities === 0 && node.doors === 0;
 }