@tiinex/app 0.1.1

package/src/schemas/workspace/workspace.entrypointChoice.views.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from '../../ui/primitives/Button.jsx';
+import { Modal } from '../../ui/primitives/Modal.jsx';
+
+export function WorkspaceEntrypointChoiceDialog({ entries = [], onResolve, onDismiss }) {
+  const first = entries[0]?.title || entries[0]?.path || 'workspace';
+  const more = Math.max(0, entries.length - 1);
+  return (
+    <Modal title="How should Tiinex use this workspace?" onDismiss={onDismiss} className="tx-workspace-entrypoint-choice-modal">
+      <div className="tx-workspace-entrypoint-choice-copy">
+        <p className="tx-kicker">Workspace entrypoint</p>
+        <p>{more ? `${first} + ${more} more` : first}</p>
+        <p>Choose whether this workspace should replace the current replaceable context or join it.</p>
+      </div>
+      <div className="tx-workspace-entrypoint-choice-actions" role="group" aria-label="Workspace entrypoint choices">
+        <div className="tx-workspace-entrypoint-choice-option">
+          <Button variant="primary" icon="workspace" onClick={() => onResolve?.('open')}>Open</Button>
+          <small><strong>Use this workspace set.</strong> Replace current source/non-draft workspace context while keeping durable unpublished local work protected.</small>
+        </div>
+        <div className="tx-workspace-entrypoint-choice-option">
+          <Button icon="continue" onClick={() => onResolve?.('merge')}>Merge</Button>
+          <small><strong>Keep the current workspace context.</strong> Add or update matching incoming workspaces and sources without intentionally duplicating an already-loaded match.</small>
+        </div>
+      </div>
+      <div className="tx-dialog-actions">
+        <Button variant="subtle" onClick={onDismiss}>Cancel</Button>
+      </div>
+    </Modal>
+  );
+}

package/src/schemas/workspace/workspace.exportDialog.controller.jsx

@@ -0,0 +1,40 @@
+import React, { useMemo, useState } from 'react';
+import { buildWorkspaceExportPlan, ExportType } from '../../export/export.plan.js';
+import { buildWorkspaceGithubPublicationPreflight, buildWorkspaceGithubPublicationProduct, confirmWorkspaceGithubPublicationMutation, copyWorkspaceGithubPublicationPayload, GITHUB_PUBLICATION_MODE, openWorkspaceGithubPublicationTarget, publicationProgressFor, verifyWorkspaceGithubPublication } from '../../app/workspaceGithubPublication.js';
+import { WorkspaceExportDialog } from './workspace.exportDialog.views.jsx';
+
+export function WorkspaceExportDialogController({ workspace = {}, onDismiss, onExecute, onPublicationResult }) {
+  const [exportType, setExportType] = useState(ExportType.tree);
+  const [publicationInput, setPublicationInput] = useState({ mode: GITHUB_PUBLICATION_MODE.createIssue, recordId: '', repository: '', targetInput: '', finalTarget: '' });
+  const [publicationProgress, setPublicationProgress] = useState({ copiedPlanSha256: '', openedPlanSha256: '', mutationAttestation: null, verificationPlanSha256: '', result: null, notice: '' });
+  const plan = useMemo(() => buildWorkspaceExportPlan(workspace, { exportType }), [workspace, exportType]);
+  const publicationPreflight = useMemo(() => exportType === ExportType.githubPublish ? buildWorkspaceGithubPublicationPreflight(workspace) : null, [workspace, exportType]);
+  const publication = useMemo(() => exportType === ExportType.githubPublish ? buildWorkspaceGithubPublicationProduct(workspace, publicationInput, { preflight: publicationPreflight }) : null, [workspace, exportType, publicationInput, publicationPreflight]);
+  const currentPlanSha256 = publication?.plan?.planSha256 || '';
+  const progress = publicationProgressFor(publication?.plan || {}, publication?.verificationTarget || publicationInput.finalTarget, publicationProgress);
+  function updatePublicationInput(patch = {}) {
+    const identityBearing = ['mode', 'recordId', 'repository', 'targetInput', 'finalTarget'].some((key) => Object.prototype.hasOwnProperty.call(patch, key));
+    setPublicationInput((current) => ({ ...current, ...patch }));
+    setPublicationProgress((current) => ({ ...current, mutationAttestation: identityBearing ? null : current.mutationAttestation, verificationPlanSha256: '', result: null, notice: '' }));
+  }
+  async function copyPublication() {
+    const result = await copyWorkspaceGithubPublicationPayload(publication?.plan || {}, { clipboard: typeof navigator !== 'undefined' ? navigator.clipboard : null });
+    setPublicationProgress((current) => ({ ...current, copiedPlanSha256: result.ok ? currentPlanSha256 : '', verificationPlanSha256: '', result: null, notice: result.notice || '' }));
+  }
+  function openPublication() {
+    const result = openWorkspaceGithubPublicationTarget(publication?.plan || {}, { window: typeof window !== 'undefined' ? window : null });
+    setPublicationProgress((current) => ({ ...current, openedPlanSha256: result.ok ? currentPlanSha256 : '', verificationPlanSha256: '', result: null, notice: result.notice || '' }));
+  }
+
+  function attestPublication(confirmed = true) {
+    if (!confirmed) return setPublicationProgress((current) => ({ ...current, mutationAttestation: null, verificationPlanSha256: '', result: null, notice: 'Human mutation confirmation cleared.' }));
+    const result = confirmWorkspaceGithubPublicationMutation(publication?.plan || {}, { finalTarget: publication?.verificationTarget || publicationInput.finalTarget });
+    setPublicationProgress((current) => ({ ...current, mutationAttestation: result.ok ? result.mutationAttestation : null, verificationPlanSha256: '', result: null, notice: result.notice || '' }));
+  }
+  async function verifyPublication() {
+    const result = await verifyWorkspaceGithubPublication(publication?.plan || {}, { finalTarget: publication?.verificationTarget || publicationInput.finalTarget, mutationAttestation: publicationProgress.mutationAttestation, fetchImpl: typeof fetch !== 'undefined' ? fetch : null });
+    setPublicationProgress((current) => ({ ...current, verificationPlanSha256: result.ok ? currentPlanSha256 : '', result: result.result || null, notice: result.notice || '' }));
+    if (result.ok) onPublicationResult?.(result.result, publication?.plan || {}, result.executionAttestation || null);
+  }
+  return <WorkspaceExportDialog workspace={workspace} plan={plan} publication={publication} publicationInput={publicationInput} publicationProgress={progress} onPublicationInput={updatePublicationInput} onPublicationCopy={copyPublication} onPublicationOpen={openPublication} onPublicationAttest={attestPublication} onPublicationVerify={verifyPublication} onDismiss={onDismiss} onExecute={onExecute} onSelectExportType={setExportType} />;
+}

package/src/schemas/workspace/workspace.exportDialog.views.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Modal } from '../../ui/primitives/Modal.jsx';
+import { Button } from '../../ui/primitives/Button.jsx';
+import { Icon } from '../../ui/primitives/Icon.jsx';
+
+export function WorkspaceExportDialog({ workspace = {}, plan = null, publication = null, publicationInput = {}, publicationProgress = {}, onPublicationInput, onPublicationCopy, onPublicationOpen, onPublicationAttest, onPublicationVerify, onDismiss, onExecute, onSelectExportType }) {
+  const exportPlan = plan || {};
+  const title = workspace.title || workspace.name || 'Workspace';
+  const selectedAdapter = (exportPlan.adapters || []).find((adapter) => adapter.selected) || (exportPlan.adapters || [])[0] || null;
+  const selectedType = (exportPlan.exportTypes || []).find((type) => type.selected) || (exportPlan.exportTypes || [])[0] || null;
+  const selectedScope = (exportPlan.scopes || []).find((scope) => scope.selected) || (exportPlan.scopes || [])[0] || null;
+  const executeDisabled = !exportPlan.execution?.available;
+  return (
+    <Modal title="Prepare workspace export" className="tx-dialog-export-adapter" onDismiss={onDismiss} initialFocus="tx-export-execute">
+      <div className="tx-export-flow" data-export-plan-schema={exportPlan.schema || ''}>
+        <p className="tx-export-intro">Configure adapter, scope, export type and transport before executing export for <strong>{title}</strong>.</p>
+        <div className="tx-export-steps" aria-label="Export steps">
+          <span className="tx-export-step tx-export-step-active">1 · Configure</span>
+          <span className="tx-export-step">2 · Execute</span>
+        </div>
+
+        <ExportSection title="Adapter">
+          <div className="tx-export-card-grid tx-export-card-grid-adapters">
+            {(exportPlan.adapters || []).map((adapter) => <ExportCard key={adapter.id} item={adapter} />)}
+          </div>
+        </ExportSection>
+
+        <ExportSection title="Scope">
+          <div className="tx-export-card-grid tx-export-card-grid-scopes">
+            {(exportPlan.scopes || []).map((scope) => <ExportCard key={scope.id} item={scope} compact />)}
+          </div>
+        </ExportSection>
+
+        <ExportSection title="Export type">
+          <div className="tx-export-card-grid tx-export-card-grid-types">
+            {(exportPlan.exportTypes || []).map((type) => <ExportCard key={type.id} item={type} compact onSelect={type.status === 'ready' || type.status === 'degraded' || type.status === 'available' ? () => onSelectExportType?.(type.id) : null} />)}
+          </div>
+        </ExportSection>
+
+        <div className="tx-export-summary-grid" aria-label="Export summary">
+          <SummaryTile label="Adapter" value={selectedAdapter?.label || 'Download'} meta={selectedAdapter?.status || 'ready'} />
+          <SummaryTile label="Scope" value={selectedScope?.label || 'All'} meta={`${exportPlan.counts?.records || 0} records`} />
+          <SummaryTile label="Export" value={selectedType?.label || 'Tree export'} meta={selectedType?.packageEnvelope ? 'package envelope' : 'no package envelope'} />
+          <SummaryTile label="Transport" value={exportPlan.transportLevel || 'TL0'} meta={exportPlan.operation || 'local-download'} />
+        </div>
+
+        <p className="tx-export-boundary">{exportPlan.execution?.boundary || exportPlan.boundary || 'Export plan does not mutate sources.'}</p>
+        {exportPlan.selectedExportType === 'github-publish' ? <GithubPublicationRoutine publication={publication} input={publicationInput} progress={publicationProgress} onInput={onPublicationInput} onCopy={onPublicationCopy} onOpen={onPublicationOpen} onAttest={onPublicationAttest} onVerify={onPublicationVerify} /> : null}
+        {selectedAdapter?.status === 'future' ? <p className="tx-export-note">This adapter is intentionally visible as a future option but cannot execute in this slice.</p> : null}
+        {selectedAdapter?.status === 'blocked' ? <p className="tx-export-note">This export mode is blocked by current shared package qualification and will not download.</p> : null}
+        <div className="tx-dialog-actions tx-export-dialog-actions">
+          <Button variant="ghost" onClick={onDismiss}>Cancel</Button>
+          {exportPlan.selectedExportType === 'github-publish' ? null : <Button id="tx-export-execute" variant="primary" icon="download" disabled={executeDisabled} onClick={() => onExecute?.(exportPlan)}>{exportPlan.execution?.label || 'Execute tree export'}</Button>}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+function ExportSection({ title, children }) {
+  return (
+    <section className="tx-export-section">
+      <h3>{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function ExportCard({ item = {}, compact = false, onSelect = null }) {
+  const selectable = item.status === 'ready' || item.status === 'degraded' || item.status === 'available';
+  const classes = [
+    'tx-export-card',
+    compact ? 'tx-export-card-compact' : '',
+    item.selected ? 'tx-export-card-selected' : '',
+    item.status === 'future' || item.status === 'disabled' || item.status === 'blocked' ? 'tx-export-card-disabled' : ''
+  ].filter(Boolean).join(' ');
+  const content = <>
+    <div className="tx-export-card-icon"><Icon name={item.icon || iconForItem(item)} /></div>
+    <div className="tx-export-card-copy">
+      <div className="tx-export-card-title"><strong>{item.label || item.id}</strong><span>{item.status || 'ready'}</span></div>
+      <p>{item.description || item.capability || ''}</p>
+      {item.capability ? <small>{item.capability}</small> : null}
+    </div>
+  </>;
+  return onSelect ? (
+    <button type="button" className={`${classes} tx-export-card-button`} data-export-status={item.status || 'ready'} aria-pressed={Boolean(item.selected)} onClick={onSelect}>{content}</button>
+  ) : (
+    <article className={classes} data-export-status={item.status || 'ready'} aria-disabled={!selectable}>{content}</article>
+  );
+}
+
+function SummaryTile({ label, value, meta }) {
+  return (
+    <div className="tx-export-summary-tile">
+      <span>{label}</span>
+      <strong>{value}</strong>
+      <small>{meta}</small>
+    </div>
+  );
+}
+
+function iconForItem(item = {}) {
+  if (item.id === 'github') return 'github';
+  if (item.id === 'handoff-package') return 'archive';
+  if (item.id === 'local') return 'local';
+  if (item.id === 'source') return 'source';
+  if (item.id === 'tree') return 'tree';
+  return 'download';
+}
+
+
+function GithubPublicationRoutine({ publication = null, input = {}, progress = {}, onInput, onCopy, onOpen, onAttest, onVerify }) {
+  const product = publication || {};
+  const plan = product.plan || {};
+  const ready = plan.status === 'ready';
+  const records = product.eligibleRecords || [];
+  return (
+    <section className="tx-export-section tx-github-publication" aria-label="Guided GitHub publication">
+      <h3>Guided GitHub publication</h3>
+      <p className="tx-export-note">Human-performed GitHub mutation: choose the local artifact and exact intent, Copy → Open GitHub → post/update the exact payload → explicitly confirm that exact action at the exact final target → Verify the exact remote body. Copy/Open alone never count as publication success.</p>
+      <label className="tx-field"><span>Local artifact</span><select value={input.recordId || ''} onChange={(event) => onInput?.({ recordId: event.target.value })}><option value="">Choose owned-local artifact…</option>{records.map((record) => <option key={record.id} value={record.id}>{record.title || record.path || record.id}</option>)}</select></label>
+      <label className="tx-field"><span>Target mode</span><select value={input.mode || ''} onChange={(event) => onInput?.({ mode: event.target.value, targetInput: '', finalTarget: '' })}>{(product.modes || []).map((mode) => <option key={mode.id} value={mode.id}>{mode.label}</option>)}</select></label>
+      <label className="tx-field"><span>Repository</span><input value={input.repository || ''} placeholder="owner/repo" onChange={(event) => onInput?.({ repository: event.target.value })} /></label>
+      {product.targetRequired ? <label className="tx-field"><span>{product.targetLabel}</span><input value={input.targetInput || ''} placeholder={product.targetPlaceholder || ''} onChange={(event) => onInput?.({ targetInput: event.target.value })} /></label> : null}
+      <div className="tx-export-summary-grid">
+        <SummaryTile label="Plan" value={plan.status || 'blocked'} meta={plan.planId || 'No qualified plan'} />
+        <SummaryTile label="Payload" value={plan.outboundPayload?.sha256 ? plan.outboundPayload.sha256.slice(0, 12) : '—'} meta={plan.outboundPayload?.representation || 'exact local Markdown'} />
+      </div>
+      {plan.findings?.length ? <div className="tx-export-note" role="status">{plan.findings.filter((item) => item.severity === 'error').slice(0, 3).map((item) => <div key={item.code}>{item.message}</div>)}</div> : null}
+      <div className="tx-dialog-actions tx-export-dialog-actions tx-github-publication-actions">
+        <Button variant="secondary" icon="share" disabled={!ready} onClick={() => onCopy?.()}>{progress.copied ? 'Copied' : 'Copy exact payload'}</Button>
+        <Button variant="secondary" icon="github" disabled={!ready || !product.openUrl} onClick={() => onOpen?.()}>{progress.opened ? 'GitHub opened' : 'Open GitHub'}</Button>
+      </div>
+      <label className="tx-field"><span>Final exact GitHub URL</span><input value={input.finalTarget || ''} placeholder={product.finalTargetRequired ? 'Required after posting: exact issue URL or comment permalink' : 'Known target is reused unless you supply another exact final URL'} onChange={(event) => onInput?.({ finalTarget: event.target.value })} /></label>
+      <label className="tx-field tx-publication-attestation"><span>Human mutation confirmation</span><span><input type="checkbox" checked={Boolean(progress.attested)} disabled={!ready || !product.mutationTargetQualified} onChange={(event) => onAttest?.(event.target.checked)} /> I posted/updated this exact payload at this exact GitHub target for the current plan.</span><small>Tiinex does not infer a write from Copy, Open, or a matching pre-existing target.</small></label>
+      <div className="tx-dialog-actions tx-export-dialog-actions"><Button variant="primary" icon="check" disabled={!ready || !product.mutationTargetQualified || !progress.attested} onClick={() => onVerify?.()}>{progress.verified ? 'Verified' : 'Verify exact publication'}</Button></div>
+      {product.latestReceipt ? <p className="tx-export-note">Previous verified receipt: <strong>{product.latestReceipt.receipt?.receiptId || 'recorded'}</strong> · {product.latestReceipt.sourceBinding?.remoteTarget?.inputTarget || ''}</p> : null}
+      {progress.notice ? <p className="tx-export-note" role="status">{progress.notice}</p> : null}
+      {progress.result ? <p className="tx-export-note"><strong>{progress.result.status === 'success' ? 'Verified publication receipt recorded.' : 'Not source-qualified.'}</strong> {progress.result.remoteTarget?.inputTarget || ''}</p> : null}
+    </section>
+  );
+}

package/src/schemas/workspace/workspace.governance.views.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Badge } from '../../ui/primitives/Badge.jsx';
+import { Button } from '../../ui/primitives/Button.jsx';
+import { Modal } from '../../ui/primitives/Modal.jsx';
+
+export function GovernanceBoundaryDialog({ source, boundary, documents = [], onDismiss }) {
+  const status = boundary?.status || 'unknown';
+  const repo = boundary?.scope?.repo || source?.repo || source?.config?.repo || source?.label || 'source';
+  const docs = Array.isArray(documents) ? documents : [];
+  return (
+    <Modal title={`Governance · ${source?.label || repo || 'source'}`} onDismiss={onDismiss} className="tx-dialog-governance-boundary">
+      <div className="tx-record-detail tx-governance-detail">
+        <div className="tx-card-badges">
+          <Badge>{status}</Badge>
+          {boundary?.policy?.kind ? <Badge>{boundary.policy.kind}</Badge> : null}
+          {boundary?.notice?.status === 'found' ? <Badge>{boundary.notice.kind || 'NOTICE'}</Badge> : null}
+          <Badge>{repo}</Badge>
+        </div>
+        <p className="tx-muted">Governance is read from explicit source-root files only. README and validation notes are not license/policy fallback material.</p>
+        {boundary?.note ? <p>{boundary.note}</p> : null}
+        <dl className="tx-record-meta">
+          <div><dt>Scope</dt><dd>{boundary?.scope?.kind || 'source'} · {repo}{boundary?.scope?.ref ? ` @ ${boundary.scope.ref}` : ''}</dd></div>
+          {boundary?.policy?.path ? <div><dt>Policy/license</dt><dd>{boundary.policy.path}</dd></div> : null}
+          {boundary?.notice?.path ? <div><dt>Notice</dt><dd>{boundary.notice.path}</dd></div> : null}
+          <div><dt>Root checked</dt><dd>{boundary?.rootChecked ? 'yes' : 'not in this bounded materialization'}</dd></div>
+        </dl>
+        {docs.length ? docs.map((doc) => <GovernanceDocument key={doc.kind || doc.path || doc.url} doc={doc} />) : <p className="tx-muted">No readable governance file content is available in this session cache.</p>}
+        <div className="tx-dialog-actions"><Button variant="ghost" onClick={onDismiss}>Close</Button></div>
+      </div>
+    </Modal>
+  );
+}
+
+function GovernanceDocument({ doc }) {
+  return (
+    <section className="tx-governance-document">
+      <div className="tx-card-badges">
+        <Badge>{doc.kind || doc.path || 'governance'}</Badge>
+        <Badge>{doc.cacheState || (doc.markdown ? 'cache' : 'metadata-only')}</Badge>
+      </div>
+      {doc.url ? <p className="tx-muted"><a href={doc.url} target="_blank" rel="noopener noreferrer">Open source file</a></p> : null}
+      {doc.markdown ? <pre className="tx-record-markdown-preview tx-full-markdown-preview">{doc.markdown}</pre> : <p className="tx-muted">Content is not available in this route/session cache. Source path and boundary are preserved.</p>}
+    </section>
+  );
+}

package/src/schemas/workspace/workspace.graph.views.jsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ArtifactGraphScope, graphNodeId } from '../../graph/artifactGraph.model.js';
+import { scheduleArtifactGraphProjection } from '../../graph/artifactGraph.project.js';
+
+const LOD_LEVELS = [80, 200, 400];
+
+export function WorkspaceGraphState({ workspace, graphWorkspaces = [], query = '', selectedRecordId = '', onOpenRecord, readOnly = false }) {
+  const [scope, setScope] = useState(() => selectedRecordId ? ArtifactGraphScope.focus : ArtifactGraphScope.workspace);
+  const [lodIndex, setLodIndex] = useState(1);
+  const [projection, setProjection] = useState(null);
+  const [error, setError] = useState('');
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 20, y: 20 });
+  const [hovered, setHovered] = useState('');
+  const dragRef = useRef(null);
+  const workspaceId = String(workspace?.id || '');
+  const focusNodeId = selectedRecordId ? graphNodeId(workspaceId, selectedRecordId) : '';
+  const effectiveScope = scope === ArtifactGraphScope.focus && !focusNodeId ? ArtifactGraphScope.workspace : scope;
+  const workspaces = useMemo(() => {
+    if (readOnly) return workspace ? [workspace] : [];
+    const rows = (Array.isArray(graphWorkspaces) ? graphWorkspaces : []).filter((item) => item?.id && item.id !== workspaceId);
+    return workspace ? [workspace, ...rows] : rows;
+  }, [workspace, graphWorkspaces, workspaceId, readOnly]);
+  const maxNodes = LOD_LEVELS[lodIndex];
+
+  useEffect(() => {
+    setProjection(null);
+    setError('');
+    return scheduleArtifactGraphProjection({ workspaces, workspaceId, scope: effectiveScope, focusNodeId, query, maxNodes }, {
+      win: typeof window !== 'undefined' ? window : globalThis,
+      onReady: setProjection,
+      onError: (cause) => setError(String(cause?.message || cause || 'Graph projection failed.'))
+    });
+  }, [workspaces, workspaceId, effectiveScope, focusNodeId, query, maxNodes]);
+
+  const graph = projection?.graph;
+  const layout = projection?.layout;
+  const visibleIds = useMemo(() => new Set((graph?.nodes || []).map((node) => node.id)), [graph]);
+  const hoveredNeighbors = useMemo(() => {
+    if (!hovered || !graph) return new Set();
+    const out = new Set([hovered]);
+    for (const edge of graph.edges || []) if (edge.from === hovered) out.add(edge.to); else if (edge.to === hovered && edge.from) out.add(edge.from);
+    return out;
+  }, [hovered, graph]);
+  const canMulti = !readOnly && workspaces.length > 1;
+
+  function resetView() { setZoom(1); setPan({ x: 20, y: 20 }); }
+  function onWheel(event) {
+    event.preventDefault();
+    const next = Math.max(0.38, Math.min(2.4, zoom * (event.deltaY > 0 ? 0.9 : 1.1)));
+    setZoom(next);
+  }
+  function beginPan(event) {
+    if (event.button !== 0 || event.target.closest?.('[data-graph-node="true"]')) return;
+    dragRef.current = { x: event.clientX, y: event.clientY, pan };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  }
+  function movePan(event) {
+    const drag = dragRef.current;
+    if (!drag) return;
+    setPan({ x: drag.pan.x + event.clientX - drag.x, y: drag.pan.y + event.clientY - drag.y });
+  }
+  function endPan() { dragRef.current = null; }
+
+  return (
+    <div className="tx-graph-verse" aria-label="Node Graph Verse">
+      <div className="tx-graph-controls" aria-label="Graph projection controls">
+        <div className="tx-segment" aria-label="Graph scope">
+          <button type="button" className={effectiveScope === ArtifactGraphScope.workspace ? 'tx-active' : ''} onClick={() => setScope(ArtifactGraphScope.workspace)}>Workspace</button>
+          <button type="button" disabled={!focusNodeId} className={effectiveScope === ArtifactGraphScope.focus ? 'tx-active' : ''} onClick={() => setScope(ArtifactGraphScope.focus)}>Focus</button>
+          <button type="button" className={effectiveScope === ArtifactGraphScope.frontier ? 'tx-active' : ''} onClick={() => setScope(ArtifactGraphScope.frontier)}>Frontier</button>
+          <button type="button" disabled={!canMulti} className={effectiveScope === ArtifactGraphScope.multi ? 'tx-active' : ''} onClick={() => setScope(ArtifactGraphScope.multi)}>Multi-Verse</button>
+        </div>
+        <div className="tx-graph-lod" aria-label="Graph detail level">
+          <button type="button" onClick={() => setLodIndex((value) => Math.max(0, value - 1))} disabled={lodIndex === 0} aria-label="Reduce graph detail">−</button>
+          <span>LOD {maxNodes}</span>
+          <button type="button" onClick={() => setLodIndex((value) => Math.min(LOD_LEVELS.length - 1, value + 1))} disabled={lodIndex === LOD_LEVELS.length - 1} aria-label="Increase graph detail">+</button>
+        </div>
+        <button type="button" className="tx-graph-reset" onClick={resetView}>Reset view</button>
+      </div>
+      <div className="tx-graph-receipt" role="status">
+        <span>Derived projection only</span>
+        {graph ? <span>{graph.nodes.length} nodes · {graph.edges.length} edges</span> : null}
+        {graph?.counts?.crossWorkspaceEdges ? <span>{graph.counts.crossWorkspaceEdges} cross-workspace</span> : null}
+        {graph?.counts?.unresolvedEdges ? <span>{graph.counts.unresolvedEdges} unresolved</span> : null}
+        {graph?.lod?.truncated ? <strong>Truncated · {graph.lod.omittedNodes} nodes / {graph.lod.omittedEdges} edges omitted</strong> : null}
+      </div>
+      {graph?.note ? <p className="tx-graph-note">{graph.note}</p> : null}
+      {error ? <div className="tx-empty-node-state" role="alert"><p>{error}</p></div> : null}
+      {!projection && !error ? <div className="tx-graph-loading" role="status">Preparing deterministic graph projection…</div> : null}
+      {projection && !graph?.nodes?.length ? <div className="tx-empty-node-state" role="status"><p>No graph nodes match this scope.</p></div> : null}
+      {projection && graph?.nodes?.length ? (
+        <div className="tx-graph-canvas-shell" onWheel={onWheel} onPointerDown={beginPan} onPointerMove={movePan} onPointerUp={endPan} onPointerCancel={endPan}>
+          <svg className="tx-graph-canvas" viewBox={`0 0 ${Math.max(720, layout.width)} ${Math.max(360, layout.height)}`} role="img" aria-label={`${effectiveScope === ArtifactGraphScope.multi ? 'Multi-Verse' : 'Node Graph Verse'} projection`}>
+            <g transform={`translate(${pan.x} ${pan.y}) scale(${zoom})`}>
+              {(layout.bands || []).map((band) => <g key={band.workspaceId} className="tx-graph-band"><rect x="16" y={band.y - 22} width={Math.max(680, layout.width - 32)} height={band.height} rx="14" /><text x="34" y={band.y + 6}>{band.title} · {band.nodeCount}</text></g>)}
+              <g className="tx-graph-edges">
+                {(graph.edges || []).filter((edge) => edge.from && visibleIds.has(edge.from) && visibleIds.has(edge.to)).map((edge) => {
+                  const a = layout.positions[edge.from]; const b = layout.positions[edge.to];
+                  if (!a || !b) return null;
+                  const dim = hovered && !(hoveredNeighbors.has(edge.from) && hoveredNeighbors.has(edge.to));
+                  return <line key={edge.id} x1={a.x + 72} y1={a.y} x2={b.x - 72} y2={b.y} className={`${edge.kind === 'origin' ? 'tx-graph-edge-origin' : 'tx-graph-edge-parent'} ${edge.crossWorkspace ? 'tx-graph-edge-cross' : ''} ${dim ? 'tx-graph-dim' : ''}`}><title>{edge.label} · {edge.status}</title></line>;
+                })}
+              </g>
+              <g className="tx-graph-nodes">
+                {(graph.nodes || []).map((node) => {
+                  const pos = layout.positions[node.id]; if (!pos) return null;
+                  const dim = hovered && !hoveredNeighbors.has(node.id);
+                  const selected = node.id === focusNodeId;
+                  return (
+                    <g key={node.id} data-graph-node="true" tabIndex="0" role="button" aria-label={`Open ${node.title}`} transform={`translate(${pos.x - 72} ${pos.y - 25})`} className={`tx-graph-node tx-graph-node-${node.temporalState} tx-graph-node-${node.sourceState} ${node.reductionBoundary ? 'tx-graph-node-reduction' : ''} ${node.resolutionState === 'unresolved' ? 'tx-graph-node-unresolved' : ''} ${selected ? 'tx-graph-node-selected' : ''} ${dim ? 'tx-graph-dim' : ''}`} onMouseEnter={() => setHovered(node.id)} onMouseLeave={() => setHovered('')} onFocus={() => setHovered(node.id)} onBlur={() => setHovered('')} onClick={() => onOpenRecord?.(node.workspaceId, node.recordId)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); onOpenRecord?.(node.workspaceId, node.recordId); } }}>
+                      <rect width="144" height="50" rx="10" />
+                      <text x="10" y="19" className="tx-graph-node-title">{truncate(node.title, 21)}</text>
+                      <text x="10" y="37" className="tx-graph-node-meta">{truncate(node.schemaId || node.path || node.recordId, 23)}</text>
+                      <title>{node.title}\n{node.path}\n{node.workspaceId} · {node.temporalState} · {node.sourceState}{node.reductionBoundary ? ' · reduction boundary' : ''}{node.resolutionState === 'unresolved' ? ' · unresolved lineage context' : ''}</title>
+                    </g>
+                  );
+                })}
+              </g>
+            </g>
+          </svg>
+        </div>
+      ) : null}
+      <div className="tx-graph-legend" aria-label="Graph legend">
+        <span>Parent = solid</span><span>Origin = dashed</span><span>Cross-workspace = emphasized</span><span>Reduced history = double border</span><span>Unresolved = warning border</span><span>Hover = relation neighborhood</span>
+      </div>
+    </div>
+  );
+}
+
+function truncate(value = '', max = 24) {
+  const raw = String(value || '');
+  return raw.length > max ? `${raw.slice(0, Math.max(1, max - 1))}…` : raw;
+}