@semiont/react-ui 0.5.27 → 0.5.29

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -2,8 +2,9 @@
 
 import React, { useEffect } from 'react';
 import { WizardFooter } from './WizardFooter';
-import type { CollaboratorEntry, GatheredContext } from '@semiont/core';
-import { LOCALES } from '@semiont/core';
+import type { CollaboratorEntry, GatheredContext, SupportedMediaType } from '@semiont/core';
+import type { GenerationOptions } from '@semiont/sdk';
+import { LOCALES, GENERATABLE_MEDIA_TYPES, capabilitiesOf, proposeStoragePath } from '@semiont/core';
 
 /**
  * Bounds for the max-length control when no ceiling is known. These are the
@@ -15,34 +16,103 @@ const DEFAULT_MAX_TOKENS_CEILING = 4000;
 /** The step's form values, owned by the wizard so Back cannot discard them (D3). */
 export interface GenerationDraft {
   title: string;
+  /**
+   * The path FRAGMENT the user types beside the `file://` prefix — not a URI.
+   * (`GenerationConfig.storageUri` is the assembled one; the names differ
+   * because the things differ.)
+   */
   storagePath: string;
   prompt: string;
   language: string;
   temperature: number;
   /** Text, not number: the field is user-editable and may be mid-edit or empty. */
   maxTokensText: string;
+  /** The artifact's media type. Seeded `text/markdown` by both hosts (D2). */
+  outputMediaType: SupportedMediaType;
 }
 
-export interface GenerationConfig {
-  title: string;
-  storagePath: string;
-  prompt?: string;
-  language: string;
-  temperature: number;
-  maxTokens: number;
-  context: GatheredContext;
-}
+/**
+ * What this form fills in. Named here, but TYPED by the SDK (P2b).
+ *
+ * `storageUri` is on this list rather than a local `storagePath: string`
+ * because the two were the same thing under different names — a divergence
+ * that survived precisely because nothing tied them together (D8).
+ */
+type FormFilled =
+  | 'title'
+  | 'storageUri'
+  | 'language'
+  | 'temperature'
+  | 'maxTokens'
+  | 'outputMediaType';
+
+/**
+ * The submitted payload: the SDK's own generation options, DERIVED rather
+ * than restated (P2b), plus the grounding context.
+ *
+ * This was a hand-written interface listing the same fields with independent
+ * types — the shape `## Duplicated Shape` forbids — and it drifted exactly as
+ * predicted: `storagePath: string` held a `storageUri`, so every consumer
+ * re-mapped it by hand and silently dropped whatever the mapping forgot.
+ * Deriving means a rename or retype in `GenerationOptions` is a compile
+ * error here instead of a quiet gap at the wire.
+ *
+ * NARROWED on purpose: the SDK also carries `task`, `structure`, `cite` and
+ * `stallDeadlineMs`, which this form does not collect, and a payload type
+ * that advertised them would promise more than the UI delivers. Surfacing one
+ * later is a one-word edit to `FormFilled` plus its control — the door is
+ * unlocked, not open.
+ *
+ * `Required` because the form always fills these, even where the SDK lets
+ * them be absent; `prompt` stays optional, because a blank instruction field
+ * is omitted rather than sent empty.
+ */
+export type GenerationConfig =
+  & Required<Pick<GenerationOptions, FormFilled>>
+  & Pick<GenerationOptions, 'prompt'>
+  & { context: GatheredContext };
+
+/** The one place a format's required extension is read (D7). */
+const extensionFor = (format: SupportedMediaType): string =>
+  capabilitiesOf(format)?.extension ?? '';
+
+/**
+ * A fresh draft, defined ONCE for both hosts (D8b). The two modals carried
+ * byte-identical literals — magic numbers included — so every new field meant
+ * two edits and an opportunity to seed only one of them.
+ */
+export const freshGenerationDraft = (title: string, locale: string): GenerationDraft => ({
+  title,
+  storagePath: '',
+  prompt: '',
+  language: locale,
+  temperature: 0.7,
+  maxTokensText: '500',
+  // D2: markdown is the DEFAULT, not an assumption — the worker would also
+  // default to it, but a control must send what it shows.
+  outputMediaType: 'text/markdown',
+});
 
 export interface ConfigureGenerationStepProps {
   context: GatheredContext;
+  /** Echo of the gather step's hint — the thing being steered stays visible (GEP D8). */
+  hintEcho?: { label: string; value: string };
   /** Owned by the wizard so Back is lossless (WIZARD-NAVIGATION D3). */
   config: GenerationDraft;
   onConfigChange: (config: GenerationDraft) => void;
-  onBack: () => void;
+  /** Absent in a single-stack host (GATHER-AT-THE-TOP D6) — the footer then renders no retreat. */
+  onBack?: () => void;
   onGenerate: (config: GenerationConfig) => void;
+  /**
+   * Folder of the resource being generated FROM, so the artifact lands beside
+   * its source (D11). The page derives it; this component stays
+   * presentational, exactly as it already receives the default title.
+   */
+  defaultFolder?: string;
   translations: {
     resourceTitle: string;
     resourceTitlePlaceholder: string;
+    saveLocation: string;
     additionalInstructions: string;
     additionalInstructionsPlaceholder: string;
     language: string;
@@ -58,7 +128,16 @@ export interface ConfigureGenerationStepProps {
      * and `{{model}}`.
      */
     maxLengthCeiling: string;
-    back: string;
+    /** Label for the output-format select. */
+    outputFormat: string;
+    /**
+     * Shown when the Save location's extension contradicts the chosen format,
+     * which the form REFUSES to submit (D7 — the worker is faithful and will
+     * write a PDF to a `.md` path, so this is the only gate). Interpolates
+     * `{{extension}}`.
+     */
+    formatExtensionMismatch: string;
+    back?: string;
     generate: string;
   };
   /**
@@ -73,10 +152,12 @@ export interface ConfigureGenerationStepProps {
 
 export function ConfigureGenerationStep({
   context,
+  hintEcho,
   config,
   onConfigChange,
   onBack,
   onGenerate,
+  defaultFolder = '',
   translations: t,
   generationAgent,
 }: ConfigureGenerationStepProps) {
@@ -85,9 +166,28 @@ export function ConfigureGenerationStep({
   // both sliders. `maxTokensText` stays TEXT rather than a number so the field can
   // be cleared mid-edit — `parseInt` on an empty field yields NaN, which React
   // warns about and which used to travel into the job config.
-  const { title, storagePath, prompt, language, temperature, maxTokensText } = config;
+  const { title, storagePath, prompt, language, temperature, maxTokensText, outputMediaType } = config;
   const set = (patch: Partial<GenerationDraft>) => onConfigChange({ ...config, ...patch });
 
+  // D11 — the Save location starts filled and FOLLOWS the title and format
+  // until the user takes it over. `pathTouched` is DERIVED rather than stored:
+  // it is exactly "the field holds the user's own text", which makes clearing
+  // the field un-touch it for free, keeps it reset-on-open and Back-safe
+  // because `storagePath` already is, and leaves no second field to desync.
+  const pathTouched = storagePath !== '';
+  const proposedPath = proposeStoragePath(defaultFolder, title, outputMediaType);
+  const effectivePath = pathTouched ? storagePath : proposedPath;
+
+  // D7 — the GUI is where a format/extension mismatch is caught, because it is
+  // where the person who can fix it is standing. An EMPTY path is not a
+  // mismatch: the field is `required`, so emptiness is already refused, and
+  // telling an untouched form it is wrong is not a welcome. Under D11 a
+  // PROPOSED path always matches, so this now fires only on hand-edits.
+  const requiredExtension = extensionFor(outputMediaType);
+  const extensionMismatch =
+    effectivePath !== '' &&
+    !effectivePath.toLowerCase().endsWith(requiredExtension.toLowerCase());
+
   const ceiling = generationAgent?.limits?.maxOutputTokens ?? DEFAULT_MAX_TOKENS_CEILING;
 
   /**
@@ -114,20 +214,30 @@ export function ConfigureGenerationStep({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (extensionMismatch) return;
     const trimmedPrompt = prompt.trim();
     onGenerate({
       title,
-      storagePath: `file://${storagePath}`,
+      storageUri: `file://${effectivePath}`,
       ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
       language,
       temperature,
       maxTokens: submittedMaxTokens,
+      outputMediaType,
       context,
     });
   };
 
   return (
-    <form onSubmit={handleSubmit} className="semiont-form semiont-form--scrollable">
+    // No --scrollable: this form renders below the evidence display inside the
+    // host's single step-scroll pane — an independent scroll region here is
+    // what squeezed the parameters out of view (the measured failure).
+    <form onSubmit={handleSubmit} className="semiont-form">
+      {hintEcho && (
+        <p className="semiont-wizard__hint-echo">
+          {hintEcho.label}: {hintEcho.value}
+        </p>
+      )}
       {/* Resource Title */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-title" className="semiont-form__label">
@@ -147,20 +257,51 @@ export function ConfigureGenerationStep({
       {/* Storage URI */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-storagePath" className="semiont-form__label">
-          Save location
+          {t.saveLocation}
         </label>
         <div className="semiont-input-addon">
           <span className="semiont-input-addon__prefix">file://</span>
           <input
             id="wizard-storagePath"
             type="text"
-            value={storagePath}
+            value={effectivePath}
             onChange={(e) => set({ storagePath: e.target.value })}
             required
+            aria-invalid={extensionMismatch}
+            {...(extensionMismatch ? { 'aria-describedby': 'wizard-format-mismatch' } : {})}
             className="semiont-input semiont-input--addon"
             placeholder="generated/my-resource.md"
           />
         </div>
+        {/* The reason sits with the field, not on the button: the message
+            belongs where the fix is. */}
+        {extensionMismatch && (
+          <p id="wizard-format-mismatch" className="semiont-form__error" role="alert">
+            {t.formatExtensionMismatch.replace('{{extension}}', requiredExtension)}
+          </p>
+        )}
+      </div>
+
+      {/* Output format — with the artifact's IDENTITY (title, location), not
+          among the model knobs below (D5). The options are DERIVED from the
+          registry (D1): promote a fourth row to `generatable` and it appears
+          here, with no list to forget to update. */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-outputFormat" className="semiont-form__label">
+          {t.outputFormat}
+        </label>
+        <select
+          id="wizard-outputFormat"
+          value={outputMediaType}
+          onChange={(e) => set({ outputMediaType: e.target.value as SupportedMediaType })}
+          className="semiont-select"
+        >
+          {GENERATABLE_MEDIA_TYPES.map((format) => (
+            <option key={format} value={format}>
+              {capabilitiesOf(format)?.label ?? format}
+            </option>
+          ))}
+        </select>
       </div>
 
       {/* Additional Instructions */}
@@ -198,7 +339,7 @@ export function ConfigureGenerationStep({
           </select>
         </div>
 
-        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--grow">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--slider">
           <label htmlFor="wizard-temperature" className="semiont-form__label">
             {t.creativity} ({temperature.toFixed(1)})
           </label>
@@ -218,7 +359,7 @@ export function ConfigureGenerationStep({
           </div>
         </div>
 
-        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow semiont-form__field--end">
           <label htmlFor="wizard-maxTokens" className="semiont-form__label">
             {t.maxLength}
           </label>
@@ -242,24 +383,27 @@ export function ConfigureGenerationStep({
             }}
             className="semiont-input"
           />
-          <p className="semiont-form__help">
-            {generationAgent?.limits
-              ? t.maxLengthCeiling
-                  .replace('{{maxOutputTokens}}', String(ceiling))
-                  .replace(
-                    '{{model}}',
-                    (generationAgent.agent as { model?: string; name?: string }).model
-                      ?? generationAgent.agent.name,
-                  )
-              : t.maxLengthHelp}
-          </p>
         </div>
       </div>
 
+      {/* The bound, as a full sentence — which is why it lives UNDER the row,
+          never inside the 5.5rem Max Length column: a sentence in that box
+          wraps one word per line and its height taxes the whole flex row. */}
+      <p className="semiont-form__help semiont-form__help--row">
+        {generationAgent?.limits
+          ? t.maxLengthCeiling
+              .replace('{{maxOutputTokens}}', String(ceiling))
+              .replace(
+                '{{model}}',
+                (generationAgent.agent as { model?: string; name?: string }).model
+                  ?? generationAgent.agent.name,
+              )
+          : t.maxLengthHelp}
+      </p>
+
       <WizardFooter
-        backLabel={t.back}
-        onBack={onBack}
-        primary={{ label: t.generate, type: 'submit' }}
+        {...(onBack && t.back ? { backLabel: t.back, onBack } : {})}
+        primary={{ label: t.generate, type: 'submit', disabled: extensionMismatch }}
       />
     </form>
   );

package/src/components/modals/ConfigureSearchStep.tsx

@@ -16,8 +16,13 @@ export interface ConfigureSearchStepProps {
    * invites the press. The wizard owns it for the modal's lifetime instead.
    */
   config: SearchConfig;
+  /** Echo of the gather step's hint — the thing being steered stays visible (GEP D8). */
+  hintEcho?: { label: string; value: string };
   onConfigChange: (config: SearchConfig) => void;
   isSearching?: boolean;
+  /** A settled failure (emit refused, matcher error, timeout) — the spinner
+   *  must never outlive the request that fed it. */
+  searchError?: string | null;
   onBack: () => void;
   onSearch: (config: SearchConfig) => void;
   translations: {
@@ -27,13 +32,16 @@ export interface ConfigureSearchStepProps {
     back: string;
     search: string;
     searching: string;
+    searchFailed: string;
   };
 }
 
 export function ConfigureSearchStep({
   config,
+  hintEcho,
   onConfigChange,
   isSearching = false,
+  searchError = null,
   onBack,
   onSearch,
   translations: t,
@@ -45,6 +53,11 @@ export function ConfigureSearchStep({
 
   return (
     <form onSubmit={handleSubmit} className="semiont-form">
+      {hintEcho && (
+        <p className="semiont-wizard__hint-echo">
+          {hintEcho.label}: {hintEcho.value}
+        </p>
+      )}
       {/* Max Results */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-limit" className="semiont-form__label">
@@ -78,6 +91,12 @@ export function ConfigureSearchStep({
         </p>
       </div>
 
+      {searchError && (
+        <div role="alert" style={{ textAlign: 'center', padding: '0.5rem 0', color: 'var(--semiont-color-red-600)' }}>
+          {t.searchFailed}: {searchError}
+        </div>
+      )}
+
       <WizardFooter
         backLabel={t.back}
         onBack={onBack}

package/src/components/modals/ContextSummary.tsx

@@ -1,13 +1,17 @@
 'use client';
 
-import { deriveViews, type GatheredContext } from '@semiont/core';
+import { deriveViews, getBodySource, getExactText, getTargetSelector, type GatheredContext } from '@semiont/core';
 
 export interface ContextSummaryTranslations {
   sourceContextLabel: string;
   connectionsLabel: string;
   citedByLabel: string;
-  userHintLabel: string;
-  userHintPlaceholder: string;
+  /** GEP P2: the graph pane's chrome travels with this component (D10). */
+  graphPaneTitle: string;
+  /** Strategy-relevant empty state — emptiness is evidence (GEP D1). */
+  graphEmpty: string;
+  /** Resource-level linking annotation whose target the graph can't name. */
+  resourceLinkLabel: string;
 }
 
 export interface ContextSummaryProps {
@@ -18,85 +22,194 @@ export interface ContextSummaryProps {
 export function ContextSummary({ context, translations: t }: ContextSummaryProps) {
   // Graph views are focus-agnostic — only the focal resource id (and an optional
   // focal annotation id) differ by kind.
+  // ResourceDescriptor's identifier is `@id` (JSON-LD) — its open index
+  // signature makes a bare `.id` deref compile and silently yield undefined.
   const mainResourceId = context.focus.kind === 'annotation'
-    ? String(context.focus.sourceResource.id)
-    : String(context.focus.resource.id);
+    ? context.focus.sourceResource['@id']
+    : context.focus.resource['@id'];
   const focalAnnotationId = context.focus.kind === 'annotation'
     ? context.focus.annotation.id
     : undefined;
-  const { connections, citedBy, citedByCount } = deriveViews(
+  const { connections, citedBy } = deriveViews(
     context.graph,
     mainResourceId,
     focalAnnotationId,
   );
 
+  // Sibling NODES — the same structural annotation-of walk core uses for its
+  // entity-type set, collected at node granularity because the viz draws them
+  // (GEP P4; core's `siblingEntityTypes` stays the prompt-side view).
+  const annotationOf = new Map<string, string>();
+  for (const edge of context.graph.edges) {
+    if (edge.type === 'annotation-of') annotationOf.set(edge.source, edge.target);
+  }
+  const siblings = context.graph.nodes.filter(
+    (n) => n.type === 'annotation' && n.id !== focalAnnotationId && annotationOf.get(n.id) === mainResourceId,
+  );
+
+  // Rarity-ranked entity types for hover-text — the IDF semantics
+  // `entityTypeFrequencies` was stored for (D3).
+  const freq: Record<string, number> =
+    (context.metadata?.entityTypeFrequencies as Record<string, number> | undefined) ?? {};
+  const rank = (types: string[]) => [...types].sort((a, b) => (freq[a] ?? 0) - (freq[b] ?? 0));
+
+  const firstBodyValue = (body: unknown): string | undefined => {
+    // Tagging-purpose bodies are the entity-type tag — already shown via
+    // entityTypes, so skip them rather than repeat the type in the hover.
+    for (const item of Array.isArray(body) ? body : [body]) {
+      if (item && typeof item === 'object' && 'value' in item
+        && (item as { purpose?: string }).purpose !== 'tagging') {
+        return (item as { value?: string }).value;
+      }
+    }
+    return undefined;
+  };
+
+  // ── Deterministic layered layout (D3): citers | focal + siblings | peers ──
+  // Positions derive from array order alone — no physics, no randomness.
+  // Geometry adapts to what's populated (no-clipping principle): an absent
+  // citer/peer layer frees its column for the sibling band to wrap into, and
+  // the viewBox shrinks to the columns actually used. Everything always draws
+  // — overflow rides the wizard pane's scroll, never a cap.
+  const NODE_W = 180;
+  const NODE_H = 34;
+  const ROW = 52;
+  const TOP = 8;
+  const COL_PITCH = 216;
+  const colX = (col: number) => 8 + col * COL_PITCH;
+
+  type DrawnNode = {
+    id: string; label: string; kind: 'focal' | 'resource' | 'annotation';
+    hover: string; x: number; y: number;
+  };
+  type DrawnEdge = { key: string; kind: 'cites' | 'peer' | 'annotation-of'; hover: string;
+    x1: number; y1: number; x2: number; y2: number };
+
+  const focalNode = context.graph.nodes.find((n) => n.id === mainResourceId);
+  const focalLabel = focalNode?.label
+    ?? (context.focus.kind === 'annotation' ? context.focus.sourceResource.name : context.focus.resource.name)
+    ?? mainResourceId;
+
+  const drawn: DrawnNode[] = [];
+  const drawnEdges: DrawnEdge[] = [];
+
+  // The sibling band wraps across the columns absent layers free (3 total).
+  const hasCiters = citedBy.length > 0;
+  const hasPeers = connections.length > 0;
+  const bandCols = Math.max(1, Math.min(
+    3 - (hasCiters ? 1 : 0) - (hasPeers ? 1 : 0),
+    siblings.length,
+  ));
+  const bandCol0 = hasCiters ? 1 : 0;
+  const numCols = (hasCiters ? 1 : 0) + bandCols + (hasPeers ? 1 : 0);
+
+  const focal: DrawnNode = { id: mainResourceId, label: focalLabel, kind: 'focal', hover: focalLabel, x: colX(bandCol0), y: TOP };
+  drawn.push(focal);
+
+  citedBy.forEach((c, i) => {
+    const node: DrawnNode = { id: c.resourceId, label: c.resourceName, kind: 'resource',
+      hover: `${c.resourceName}\n${t.citedByLabel}`, x: colX(0), y: TOP + i * ROW };
+    drawn.push(node);
+    drawnEdges.push({ key: `cites-${c.resourceId}`, kind: 'cites', hover: 'cites',
+      x1: node.x + NODE_W, y1: node.y + NODE_H / 2, x2: focal.x, y2: focal.y + NODE_H / 2 });
+  });
+
+  connections.forEach((c, i) => {
+    const types = rank(c.entityTypes);
+    const node: DrawnNode = { id: c.resourceId, label: c.resourceName, kind: 'resource',
+      hover: types.length ? `${c.resourceName}\n${types.join(', ')}` : c.resourceName,
+      x: colX(bandCol0 + bandCols), y: TOP + i * ROW };
+    drawn.push(node);
+    // With a multi-column band the line crosses the band's row 0, which only
+    // ever holds the focal node in the band's FIRST column — so it stays clear.
+    drawnEdges.push({ key: `peer-${c.resourceId}`, kind: 'peer',
+      hover: c.bidirectional ? `${t.connectionsLabel} · mutual` : t.connectionsLabel,
+      x1: focal.x + NODE_W, y1: focal.y + NODE_H / 2, x2: node.x, y2: node.y + NODE_H / 2 });
+  });
+
+  siblings.forEach((s, i) => {
+    // Discriminated: type === 'annotation' guarantees the embedded W3C
+    // annotation (P3/D11). The node's identity is the text it wraps — a
+    // column of motivation labels is uninterpretable; motivation shows as
+    // the node's styling and hover instead.
+    const ann = s.type === 'annotation' ? s.annotation : undefined;
+    const quote = ann ? getExactText(getTargetSelector(ann.target)) : '';
+    const motivation = ann?.motivation ?? s.label;
+    const body = ann ? firstBodyValue(ann.body) : undefined;
+    const types = rank(s.entityTypes ?? []);
+    // A resource-level annotation has no selector — nothing to quote — but is
+    // ABOUT a target resource: label it by what it links to. Raw motivation
+    // ("linking") is internal vocabulary and stays hover-only.
+    const linkTarget = !quote && ann ? getBodySource(ann.body) : null;
+    const linkedName = linkTarget
+      ? context.graph.nodes.find((n) => n.id === linkTarget)?.label
+      : undefined;
+    const label = quote
+      || (linkedName ? `→ ${linkedName}` : undefined)
+      || (linkTarget ? t.resourceLinkLabel : undefined)
+      || body
+      || s.label;
+    // Hover leads with the full label — the drawn one truncates (like the
+    // resource nodes, whose hover carries the full name). Deduped: a label
+    // that fell through to the body or motivation must not repeat below it.
+    const hover = Array.from(new Set(
+      [label, motivation, body, types.length ? types.join(', ') : undefined].filter(Boolean),
+    )).join('\n');
+    const node: DrawnNode = { id: s.id, label, kind: 'annotation',
+      hover, x: colX(bandCol0 + (i % bandCols)), y: TOP + (1 + Math.floor(i / bandCols)) * ROW };
+    drawn.push(node);
+    drawnEdges.push({ key: `annof-${s.id}`, kind: 'annotation-of', hover: 'annotation-of',
+      x1: focal.x + NODE_W / 2, y1: focal.y + NODE_H, x2: node.x + NODE_W / 2, y2: node.y });
+  });
+
+  const rows = Math.max(citedBy.length, 1 + Math.ceil(siblings.length / bandCols), connections.length);
+  const width = numCols * COL_PITCH - 20;
+  const height = TOP + rows * ROW + 8;
+  const truncate = (s: string) => (s.length > 22 ? `${s.slice(0, 21)}…` : s);
+  const hasBody = connections.length > 0 || citedBy.length > 0 || siblings.length > 0;
+
+  // GEP P4: this component IS the graph pane, and its body IS a graph — a
+  // hand-rolled deterministic SVG (D3: no physics, no library, no pan-zoom;
+  // a decision surface, not an explorer). Chrome travels with the component,
+  // so every consumer inherits it (D10). Emptiness is evidence (D1).
   return (
-    <>
-      {(connections.length > 0 || citedByCount > 0) && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-
-          {connections.length > 0 && (
-            <div>
-              <div style={{
-                fontSize: 'var(--semiont-text-xs)',
-                fontWeight: 700,
-                textTransform: 'uppercase',
-                letterSpacing: '0.06em',
-                color: 'var(--semiont-text-tertiary)',
-                marginBottom: '0.375rem',
-              }}>
-                {t.connectionsLabel}
-              </div>
-              <ul style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem', listStyle: 'none', padding: 0, margin: 0 }}>
-                {connections.map(conn => (
-                  <li key={conn.resourceId} style={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    alignItems: 'center',
-                    gap: '0.375rem',
-                    fontSize: 'var(--semiont-text-sm)',
-                  }}>
-                    <span style={{ color: 'var(--semiont-text-primary)', fontWeight: 500 }}>{conn.resourceName}</span>
-                    {conn.bidirectional && (
-                      <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem' }}>mutual</span>
-                    )}
-                    {conn.entityTypes && conn.entityTypes.map(et => (
-                      <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem' }}>
-                        {et}
-                      </span>
-                    ))}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {citedByCount > 0 && (
-            <div>
-              <div style={{
-                fontSize: 'var(--semiont-text-xs)',
-                fontWeight: 700,
-                textTransform: 'uppercase',
-                letterSpacing: '0.06em',
-                color: 'var(--semiont-text-tertiary)',
-                marginBottom: '0.375rem',
-              }}>
-                {t.citedByLabel} ({citedByCount})
-              </div>
-              {citedBy.length > 0 && (
-                <ul style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', listStyle: 'none', padding: 0, margin: 0 }}>
-                  {citedBy.map(ref => (
-                    <li key={ref.resourceId} style={{ fontSize: 'var(--semiont-text-sm)', color: 'var(--semiont-text-primary)', fontWeight: 500 }}>
-                      {ref.resourceName}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          )}
-
-        </div>
+    <div className="semiont-gather-pane semiont-gather-pane--graph">
+      <div className="semiont-gather-pane__title">{t.graphPaneTitle}</div>
+      {context.inferredRelationshipSummary && (
+        <p className="semiont-gather-pane__summary">{context.inferredRelationshipSummary}</p>
+      )}
+      {!hasBody && (
+        <p className="semiont-gather-pane__empty">{t.graphEmpty}</p>
+      )}
+      {hasBody && (
+          <svg
+            className="semiont-graph"
+            viewBox={`0 0 ${width} ${height}`}
+            // Natural-size cap: 1 viewBox unit never exceeds 1px, so a compact
+            // graph renders small instead of stretching to fill the pane.
+            style={{ maxWidth: `${width}px` }}
+            role="img"
+            aria-label={t.graphPaneTitle}
+          >
+            {drawnEdges.map((e) => (
+              <g key={e.key} className={`semiont-graph__edge semiont-graph__edge--${e.kind}`}>
+                <line x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} />
+                <title>{e.hover}</title>
+              </g>
+            ))}
+            {drawn.map((n) => (
+              <g
+                key={n.id}
+                className={`semiont-graph__node semiont-graph__node--${n.kind}`}
+                data-node-id={n.id}
+              >
+                <rect x={n.x} y={n.y} width={NODE_W} height={NODE_H} rx={6} />
+                <text x={n.x + 10} y={n.y + 22}>{truncate(n.label)}</text>
+                <title>{n.hover}</title>
+              </g>
+            ))}
+          </svg>
       )}
-    </>
+    </div>
   );
 }