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

package/src/dashboard.tsx

@@ -1,3 +1,10 @@
+import type { FougereResourceOptions } from './FougereResourceOptions.js';
+import type { FougereDashboardResource } from './FougereDashboardResource.js';
+import type { FougereDashboardMetrics } from './FougereDashboardMetrics.js';
+import type { FougereDashboardContextValue } from './FougereDashboardContextValue.js';
+import type { FougereDashboardZone } from './FougereDashboardZone.js';
+import type { FougereDashboardWidget } from './FougereDashboardWidget.js';
+import type { FougereDashboardExtension } from './FougereDashboardExtension.js';
 'use client';
 
 import {
@@ -12,65 +19,11 @@ import {
   Typography,
   type SvgIconProps,
 } from '@mui/material';
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ComponentType,
-  type ReactElement,
-} from 'react';
-import {
-  useDataProvider,
-  useLocaleState,
-  useRedirect,
-  useResourceDefinitions,
-  useTranslate,
-  Title,
-  type ResourceOptions,
-} from 'react-admin';
-import type { AdminFacets, EditorialFacet, UsersFacet } from './facets.js';
-
-export interface FougereResourceOptions extends ResourceOptions {
-  primary: string;
-  facets: AdminFacets;
-  /** The frond that owns this door — the card groups by it, so the panel can too. */
-  frond?: string;
-  /** What the door answers, with each op's kind. `query` reads, `command` writes. */
-  operations?: readonly { name: string; kind: 'query' | 'command' }[];
-  /** How many columns the shape yields — a rough measure of an entity's width. */
-  fieldCount?: number;
-}
-
-export interface FougereDashboardResource {
-  name: string;
-  label: string;
-  primary: string;
-  facets: AdminFacets;
-  hasCreate: boolean;
-  hasEdit: boolean;
-  hasShow: boolean;
-  total: number;
-  rows: Record<string, unknown>[];
-  states: Record<string, number>;
-}
-
-export interface FougereDashboardMetrics {
-  content: number;
-  drafts: number;
-  published: number;
-  users: number;
-}
+import { createContext, useContext, useEffect, useMemo, useState, type ReactElement } from 'react';
+import { useDataProvider, useLocaleState, useRedirect, useResourceDefinitions, useTranslate, Title } from 'react-admin';
 
-export interface FougereDashboardContextValue {
-  loading: boolean;
-  resources: FougereDashboardResource[];
-  editorial: FougereDashboardResource[];
-  users: FougereDashboardResource[];
-  metrics: FougereDashboardMetrics;
-  navigate(view: 'list' | 'show' | 'edit' | 'create', resource: string, id?: string | number): void;
-}
+import type { EditorialFacet } from './EditorialFacet.js';
+import type { UsersFacet } from './UsersFacet.js';
 
 const DashboardContext = createContext<FougereDashboardContextValue | undefined>(undefined);
 
@@ -81,28 +34,6 @@ export function useFougereDashboard(): FougereDashboardContextValue {
   return context;
 }
 
-export type FougereDashboardZone = 'hero' | 'metrics' | 'main';
-
-export interface FougereDashboardWidget {
-  id: string;
-  zone: FougereDashboardZone;
-  /** Twelve-column width for `main`, four-column width for `metrics`. */
-  span: number;
-  component: ComponentType;
-  hidden?: boolean;
-}
-
-/** A delta over stable widget ids; a component on a new id contributes a new widget. */
-export interface FougereDashboardExtension {
-  widget: string;
-  component?: ComponentType;
-  zone?: FougereDashboardZone;
-  span?: number;
-  hidden?: boolean;
-  before?: string;
-  after?: string;
-}
-
 export function applyDashboardExtensions(
   defaults: readonly FougereDashboardWidget[],
   extensions: readonly FougereDashboardExtension[] = [],
@@ -388,7 +319,7 @@ function UsersWidget(): ReactElement {
  * What the application IS, as opposed to what it holds.
  *
  * Every other widget counts rows; this one counts the shape that produced them —
- * fronds, doors, operations split by kind, and how wide each entity is. All of it comes
+ * fronds, facades, operations split by kind, and how wide each entity is. All of it comes
  * from the same card the menu was built from, so it costs no query at all.
  *
  * **Remotes are not in it, and the card is why.** `identityCardOf` maps `app.fronds`,
@@ -402,7 +333,7 @@ function StructureWidget(): ReactElement {
   const definitions = useResourceDefinitions();
 
   const structure = useMemo(() => {
-    const byFrond = new Map<string, { doors: number; queries: number; commands: number; fields: number }>();
+    const byFrond = new Map<string, { facades: number; queries: number; commands: number; fields: number }>();
     let queries = 0;
     let commands = 0;
     let fields = 0;
@@ -414,9 +345,9 @@ function StructureWidget(): ReactElement {
       const c = ops.length - q;
       const width = options?.fieldCount ?? 0;
       queries += q; commands += c; fields += width;
-      const held = byFrond.get(frond) ?? { doors: 0, queries: 0, commands: 0, fields: 0 };
+      const held = byFrond.get(frond) ?? { facades: 0, queries: 0, commands: 0, fields: 0 };
       byFrond.set(frond, {
-        doors: held.doors + 1,
+        facades: held.facades + 1,
         queries: held.queries + q,
         commands: held.commands + c,
         fields: held.fields + width,
@@ -424,14 +355,14 @@ function StructureWidget(): ReactElement {
     }
     return {
       fronds: [...byFrond.entries()].map(([name, counts]) => ({ name, ...counts })),
-      doors: Object.keys(definitions).length,
+      facades: Object.keys(definitions).length,
       queries, commands, fields,
     };
   }, [definitions]);
 
   const totals: [string, string, number][] = [
     ['structure.fronds', 'Fronds', structure.fronds.length],
-    ['structure.doors', 'Doors', structure.doors],
+    ['structure.facades', 'Facades', structure.facades],
     ['structure.queries', 'Queries', structure.queries],
     ['structure.commands', 'Commands', structure.commands],
   ];
@@ -468,7 +399,7 @@ function StructureWidget(): ReactElement {
             <Box sx={{ minWidth: 0 }}>
               <Typography noWrap sx={{ fontWeight: 640 }}>{frond.name}</Typography>
               <Typography variant="caption" color="text.secondary">
-                {t('structure.frondDoors', `${frond.doors} doors`, { smart_count: frond.doors })}
+                {t('structure.frondDoors', `${frond.facades} facades`, { smart_count: frond.facades })}
                 {' · '}
                 {t('structure.frondFields', `${frond.fields} fields`, { smart_count: frond.fields })}
               </Typography>
@@ -495,7 +426,7 @@ function CollectionsWidget(): ReactElement {
   const { loading, resources, navigate } = useFougereDashboard();
   return (
     <Card><CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
-      <Typography variant="h5">{t('collections.title', 'Collections')}</Typography><Typography variant="body2" color="text.secondary" sx={{ mt: .4, mb: 2 }}>{t('collections.subtitle', 'Every door the card announced')}</Typography>
+      <Typography variant="h5">{t('collections.title', 'Collections')}</Typography><Typography variant="body2" color="text.secondary" sx={{ mt: .4, mb: 2 }}>{t('collections.subtitle', 'Every facade the card announced')}</Typography>
       <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2,minmax(0,1fr))', lg: 'repeat(3,minmax(0,1fr))' }, gap: 1 }}>
         {loading ? [1, 2, 3].map((key) => <Skeleton key={key} height={58} />) : resources.map((resource) => (
           <Box key={resource.name} component="button" onClick={() => navigate('list', resource.name)} sx={{ appearance: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: 1.5, p: 1.25, color: 'text.primary', bgcolor: 'transparent', border: 0, borderRadius: 2, textAlign: 'left', cursor: 'pointer', font: 'inherit', '&:hover': { bgcolor: 'action.hover' } }}>

package/src/index.ts

@@ -1,9 +1,3 @@
-export {
-  defineAdminExtension,
-  type AdminExtension,
-} from './extensions.js';
-export {
-  type TopologyReport,
-  type FrondPlacement,
-  type Edge,
-} from './topology.js';
+export { defineAdminExtension, type AdminExtension } from './AdminExtension.js';
+export { type FrondPlacement } from '@fougere/core';
+export { type Edge, type TopologyReport } from '@fougere/core';

package/src/react.tsx

@@ -1,3 +1,15 @@
+export type { ReactAdminFieldContext } from './ReactAdminFieldContext.js';
+export type { ReactAdminInputContext } from './ReactAdminInputContext.js';
+export type { ReactAdminFieldRenderer } from './ReactAdminFieldRenderer.js';
+export type { ReactAdminInputRenderer } from './ReactAdminInputRenderer.js';
+export type { ReactAdminRenderers } from './ReactAdminRenderers.js';
+export type { ReactAdminResourceComponents } from './ReactAdminResourceComponents.js';
+export type { ResourceRenderOptions } from './ResourceRenderOptions.js';
+export type { FougereAdminProps } from './FougereAdminProps.js';
+import type { ReactAdminRenderers } from './ReactAdminRenderers.js';
+
+import type { ResourceRenderOptions } from './ResourceRenderOptions.js';
+import type { FougereAdminProps } from './FougereAdminProps.js';
 'use client';
 /**
  * The rendering half — a column becomes a field, a form field becomes an input.
@@ -16,24 +28,22 @@ import {
 } from 'react-admin';
 import { Route } from 'react-router-dom';
 import { Box, Button, Card, CardContent, Dialog, DialogActions, DialogContent, DialogTitle, TextField as MuiTextField, Typography } from '@mui/material';
-import { cloneElement, useMemo, useState, type ComponentProps, type ComponentType, type ReactElement } from 'react';
-import { createAdminRuntime } from './runtime.js';
-import type { AdminExtension } from './extensions.js';
-import { actionsOf, type AdminOperation, type AdminResource } from './resources.js';
-import type { EditorialFacet, UsersFacet } from './facets.js';
-import type { Fetcher } from '@fougere/app/client';
+import { cloneElement, useMemo, useState, type ComponentProps, type ReactElement } from 'react';
+import { createAdminRuntime } from './AdminRuntime.js';
+import type { AdminExtension } from './AdminExtension.js';
+import { type AdminOperation } from './AdminOperation.js';
+import { actionsOf, type AdminResource } from './AdminResource.js';
+import type { EditorialFacet } from './EditorialFacet.js';
+import type { UsersFacet } from './UsersFacet.js';
+
 import { formFieldsOf, type FormField, type TableColumn } from '@fougere/app/client';
 import { Card as SchemaCard } from '@fougere/schema';
 import { FougereLayout, fougereDarkTheme, fougereLightTheme } from './theme.js';
 import { FougereTopology } from './topology-page.js';
 export { FougereTopology, type FougereTopologyProps } from './topology-page.js';
-import {
-  FougereContentIcon,
-  FougereDashboard,
-  FougereUsersIcon,
-  type FougereDashboardExtension,
-  type FougereResourceOptions,
-} from './dashboard.js';
+
+import { type FougereResourceOptions } from './FougereResourceOptions.js';
+import { FougereContentIcon, FougereDashboard, FougereUsersIcon } from './dashboard.js';
 
 export {
   FougereAppBar,
@@ -42,21 +52,14 @@ export {
   fougereDarkTheme,
   fougereLightTheme,
 } from './theme.js';
-export {
-  FOUGERE_DASHBOARD_WIDGETS,
-  FougereContentIcon,
-  FougereDashboard,
-  FougereUsersIcon,
-  applyDashboardExtensions,
-  useFougereDashboard,
-  type FougereDashboardContextValue,
-  type FougereDashboardExtension,
-  type FougereDashboardMetrics,
-  type FougereDashboardResource,
-  type FougereDashboardWidget,
-  type FougereDashboardZone,
-  type FougereResourceOptions,
-} from './dashboard.js';
+export { type FougereDashboardContextValue } from './FougereDashboardContextValue.js';
+export { type FougereDashboardExtension } from './FougereDashboardExtension.js';
+export { type FougereDashboardMetrics } from './FougereDashboardMetrics.js';
+export { type FougereDashboardResource } from './FougereDashboardResource.js';
+export { type FougereDashboardWidget } from './FougereDashboardWidget.js';
+export { type FougereDashboardZone } from './FougereDashboardZone.js';
+export { type FougereResourceOptions } from './FougereResourceOptions.js';
+export { FOUGERE_DASHBOARD_WIDGETS, FougereContentIcon, FougereDashboard, FougereUsersIcon, applyDashboardExtensions, useFougereDashboard } from './dashboard.js';
 
 const FIELDS = {
   text: TextField, number: NumberField, boolean: BooleanField, date: DateField,
@@ -143,41 +146,6 @@ function defaultInputFor(field: FormField, t: Translate): ReactElement {
   );
 }
 
-export interface ReactAdminFieldContext {
-  resource: AdminResource;
-  column: TableColumn;
-  /** The maintained Fougere renderer. Call it to wrap rather than replace it. */
-  defaultRender(): ReactElement;
-}
-
-export interface ReactAdminInputContext {
-  resource: AdminResource;
-  field: FormField;
-  defaultRender(): ReactElement;
-}
-
-export type ReactAdminFieldRenderer = (context: ReactAdminFieldContext) => ReactElement;
-export type ReactAdminInputRenderer = (context: ReactAdminInputContext) => ReactElement;
-
-export interface ReactAdminRenderers {
-  /** Exact `resource.field` keys. Unmentioned and future fields keep the default renderer. */
-  fields?: Record<string, ReactAdminFieldRenderer>;
-  inputs?: Record<string, ReactAdminInputRenderer>;
-}
-
-export interface ReactAdminResourceComponents {
-  list?: ComponentType;
-  show?: ComponentType;
-  edit?: ComponentType;
-  create?: ComponentType;
-  icon?: ComponentType;
-}
-
-export interface ResourceRenderOptions {
-  renderers?: ReactAdminRenderers;
-  components?: ReactAdminResourceComponents;
-}
-
 function fieldFor(resource: AdminResource, column: TableColumn, t: Translate, renderers?: ReactAdminRenderers): ReactElement {
   const defaultRender = () => defaultFieldFor(column, t);
   const renderer = renderers?.fields?.[`${resource.name}.${column.name}`];
@@ -202,7 +170,7 @@ function inputFor(resource: AdminResource, field: FormField, t: Translate, rende
  * an article from the back-office.
  *
  * Three things are derived and none is declared per entity: WHICH ops (everything the
- * door serves beyond the five verbs), WHETHER it asks for input (`op.input` — then the
+ * facade serves beyond the five verbs), WHETHER it asks for input (`op.input` — then the
  * dialog's form is `formFieldsOf` over the reconstructed schema, the same projection an
  * ordinary form uses), and WHETHER it confirms (`op.confirm`, from an extension).
  */
@@ -286,7 +254,7 @@ function OperationButton({
   );
 }
 
-/** Row-level actions: the verbs the door serves, then everything else it serves. */
+/** Row-level actions: the verbs the facade serves, then everything else it serves. */
 function RowActions({ resource }: { resource: AdminResource }): ReactElement {
   const actions = useMemo(() => actionsOf(resource.operations), [resource]);
   return (
@@ -304,9 +272,9 @@ const listFor = (r: AdminResource, renderers?: ReactAdminRenderers) => function
   const t = useTranslate();
   return (
     <List>
-      {/* `can.delete` had no reader, so a door serving no `delete` still showed the
+      {/* `can.delete` had no reader, so a facade serving no `delete` still showed the
           selection checkboxes and the bulk Delete button — every one of them a 404. And
-          a door serving `update` but not `findById` had an inert row. */}
+          a facade serving `update` but not `findById` had an inert row. */}
       <Datagrid
         rowClick={r.can.show ? 'show' : r.can.edit ? 'edit' : false}
         bulkActionButtons={r.can.delete ? undefined : false}
@@ -353,7 +321,7 @@ const createFor = (r: AdminResource, renderers?: ReactAdminRenderers) => functio
   return <Create><SimpleForm>{r.fields.map((field) => inputFor(r, field, t, renderers))}</SimpleForm></Create>;
 };
 
-/** One door, as the four pages the card says it serves. */
+/** One facade, as the four pages the card says it serves. */
 export function resourceFor(r: AdminResource, options: ResourceRenderOptions = {}): ReactElement {
   const { renderers, components = {} } = options;
   const resourceOptions: FougereResourceOptions = {
@@ -403,17 +371,6 @@ export function resourceFor(r: AdminResource, options: ResourceRenderOptions = {
  */
 type BaseAdminProps = ComponentProps<typeof Admin>;
 
-export type FougereAdminProps = Omit<BaseAdminProps, 'children' | 'dataProvider'> & {
-  endpoint?: string;
-  fetcher?: Fetcher;
-  extensions?: readonly AdminExtension[];
-  renderers?: ReactAdminRenderers;
-  /** Add, move, resize, replace or hide widgets without snapshotting the dashboard. */
-  dashboardExtensions?: readonly FougereDashboardExtension[];
-  /** Explicit page-level escape hatches, scoped to one resource and one view. */
-  resourceComponents?: Record<string, ReactAdminResourceComponents>;
-};
-
 const EMPTY_EXTENSIONS: readonly AdminExtension[] = [];
 
 /**
@@ -498,7 +455,7 @@ export function FougereAdmin({
               components: resourceComponents?.[resource.name],
             })),
             /*
-             * The one page that renders the APP rather than a door. It is not a resource —
+             * The one page that renders the APP rather than a facade. It is not a resource —
              * there is no row behind it — so it rides a route, and its data comes from
              * `rpc.topology` rather than from the card.
              */

package/src/theme.tsx

@@ -501,7 +501,7 @@ const TopologyIcon = (props: SvgIconProps) => (
 );
 
 /**
- * The derived menu, plus the one entry that is not a door.
+ * The derived menu, plus the one entry that is not a facade.
  *
  * `Menu.ResourceItems` keeps the resources the card produced — the menu stays derived, and
  * this adds beside it rather than replacing it. The topology entry shows even when nothing

package/src/topology-page.tsx

@@ -5,18 +5,22 @@
  *
  * 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 { type Edge, type TopologyReport } from '@fougere/core';
+import { fetchTopology, figureOf, isOpaque, layoutOf, nodesOf } from './Drawing.js';
+import { type TopologyNode } from './TopologyNode.js';
 
 /** What the page is: the report, the refusal that means "not observed", or a real failure. */
 type State =
@@ -60,6 +64,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.facades}`}
+                  </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 +235,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 +247,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.facades', `${node.facades} facades`, { smart_count: node.facades })}`}
         </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 +269,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 +325,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 +363,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.