@shapeshift-labs/frontier-lang-compiler 0.2.65 → 0.2.67

package/examples/js-frontier-rust-workbench-client.mjs

@@ -2,8 +2,8 @@ export function workbenchClientScript() {
   return `
 const initial = JSON.parse(document.getElementById('initial-state').textContent);
 const state = {
-  sources: { ...initial.sources },
-  sourceLanguage: initial.sourceLanguage || 'typescript',
+  sources: { typescript: initial.sources?.typescript || '' },
+  sourceLanguage: 'typescript',
   result: initial.result,
   activeTab: 'graph',
   pending: false
@@ -11,69 +11,65 @@ const state = {
 
 window.frontierLangWorkbench = {
   kind: 'frontier.framework.demo.langWorkbench',
-  version: 1,
+  version: 2,
   state,
   feature: {
-    id: 'frontier-lang-ts-rust-workbench',
+    id: 'frontier-lang-ts-rust-python-workbench',
     package: '@shapeshift-labs/frontier-lang-compiler',
     route: '/examples/js-frontier-rust-workbench',
-    panels: ['source', 'frontier', 'rust']
+    panels: ['typescript', 'frontier', 'rust', 'python'],
+    conversions: ['typescript->rust', 'typescript->python']
   },
   evidence: []
 };
 
 const typescriptInput = document.getElementById('typescriptInput');
-const rustInput = document.getElementById('rustInput');
+const rustOutput = document.getElementById('rustOutput');
+const pythonOutput = document.getElementById('pythonOutput');
 const frontierJson = document.getElementById('frontierJson');
 const graphView = document.getElementById('graphView');
 const readinessValue = document.getElementById('readinessValue');
 const symbolValue = document.getElementById('symbolValue');
 const mappingValue = document.getElementById('mappingValue');
-const modeValue = document.getElementById('modeValue');
+const rustValue = document.getElementById('rustValue');
+const pythonValue = document.getElementById('pythonValue');
 const typescriptStatus = document.getElementById('typescriptStatus');
 const rustStatus = document.getElementById('rustStatus');
+const pythonStatus = document.getElementById('pythonStatus');
 
-let updatingEditors = false;
 typescriptInput.value = state.sources.typescript;
-rustInput.value = state.sources.rust;
 render();
 
 typescriptInput.addEventListener('input', () => {
-  if (updatingEditors) return;
   state.sources.typescript = typescriptInput.value;
-  state.sourceLanguage = 'typescript';
-  renderEditorModes();
-});
-
-rustInput.addEventListener('input', () => {
-  if (updatingEditors) return;
-  state.sources.rust = rustInput.value;
-  state.sourceLanguage = 'rust';
-  renderEditorModes();
 });
 
-document.getElementById('runButton').addEventListener('click', async () => {
-  await convertFrom(state.sourceLanguage);
+document.getElementById('convertForm').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  await convertFromTypescript();
 });
 
-document.getElementById('resetButton').addEventListener('click', async () => {
-  state.sources = { ...initial.sources };
+document.getElementById('resetButton').addEventListener('click', () => {
+  state.sources = { typescript: initial.sources?.typescript || '' };
   state.sourceLanguage = 'typescript';
   state.result = initial.result;
   render();
 });
 
 document.getElementById('copyButton').addEventListener('click', async () => {
-  await navigator.clipboard.writeText(projectedSourceText());
+  try {
+    if (!navigator.clipboard) throw new Error('clipboard unavailable');
+    await navigator.clipboard.writeText(projectedSourceText());
+  } catch (error) {
+    window.frontierLangWorkbench.evidence.push({
+      at: Date.now(),
+      kind: 'clipboard',
+      status: 'failed',
+      message: String(error.message || error)
+    });
+  }
 });
 
-for (const button of document.querySelectorAll('[data-source-mode]')) {
-  button.addEventListener('click', () => {
-    state.sourceLanguage = button.dataset.sourceMode;
-    renderEditorModes();
-  });
-}
-
 for (const button of document.querySelectorAll('[data-frontier-tab]')) {
   button.addEventListener('click', () => {
     state.activeTab = button.dataset.frontierTab;
@@ -84,26 +80,37 @@ for (const button of document.querySelectorAll('[data-frontier-tab]')) {
   });
 }
 
-async function convertFrom(sourceLanguage) {
-  state.sourceLanguage = sourceLanguage;
-  state.sources[sourceLanguage] = sourceLanguage === 'rust' ? rustInput.value : typescriptInput.value;
+async function convertFromTypescript() {
+  state.sourceLanguage = 'typescript';
+  state.sources.typescript = typescriptInput.value;
   setPending(true);
   try {
     const response = await fetch('/api/convert', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ source: state.sources[sourceLanguage], sourceLanguage })
+      body: JSON.stringify({ source: state.sources.typescript, sourceLanguage: 'typescript' })
     });
     const payload = await response.json();
     if (!response.ok || !payload.ok) throw new Error(payload.error || 'conversion failed');
     state.result = payload.result;
-    state.sources[payload.result.projection.targetLanguage] = payload.result.projection.output;
+    const projections = projectionSet(payload.result);
     window.frontierLangWorkbench.evidence.push({
       at: Date.now(),
       kind: 'conversion',
       sourceHash: payload.result.sourceHash,
       symbolCount: payload.result.summary.symbols,
-      readiness: payload.result.summary.readiness
+      readiness: payload.result.summary.readiness,
+      projections: Object.keys(projections),
+      semanticMergeReadiness: payload.result.routeExplanation?.semanticMerge?.readiness,
+      missingEvidence: payload.result.routeExplanation?.semanticMerge?.missingEvidence ?? [],
+      routeExplanation: (payload.result.routeExplanation?.routes ?? []).map((route) => ({
+        target: route.target,
+        mode: route.mode,
+        routeAction: route.routeAction,
+        readiness: route.readiness,
+        admissionAction: route.semanticMerge?.admissionAction,
+        missingEvidence: route.missingEvidence
+      }))
     });
   } catch (error) {
     state.result = errorResult(error);
@@ -116,49 +123,63 @@ async function convertFrom(sourceLanguage) {
 function render() {
   const result = state.result || {};
   const summary = result.summary || {};
+  const projections = projectionSet(result);
   readinessValue.textContent = summary.readiness || 'error';
   readinessValue.style.color = readinessColor(summary.readiness);
   symbolValue.textContent = String(summary.symbols ?? 0);
   mappingValue.textContent = String(summary.sourceMapMappings ?? 0);
-  modeValue.textContent = result.projection?.mode || '-';
-  typescriptStatus.textContent = languageStatus('typescript', result);
-  rustStatus.textContent = languageStatus('rust', result);
-  renderEditorModes();
-  frontierJson.textContent = JSON.stringify(result.frontier, null, 2);
+  rustValue.textContent = projectionStatus(projections.rust);
+  pythonValue.textContent = projectionStatus(projections.python);
+  typescriptStatus.textContent = result.sourceHash || 'source';
+  rustStatus.textContent = projectionSummaryText(projections.rust);
+  pythonStatus.textContent = projectionSummaryText(projections.python);
+  typescriptInput.value = state.sources.typescript || '';
+  rustOutput.value = projections.rust?.output || '';
+  pythonOutput.value = projections.python?.output || '';
+  document.querySelector('[data-view-panel="source"]').classList.add('isSource');
+  frontierJson.textContent = JSON.stringify(result.frontier || {}, null, 2);
   frontierJson.hidden = state.activeTab !== 'json';
   graphView.hidden = state.activeTab !== 'graph';
   if (!graphView.hidden) graphView.innerHTML = graphHtml(result);
 }
 
-function renderEditorModes() {
-  updatingEditors = true;
-  typescriptInput.value = state.sources.typescript || '';
-  rustInput.value = state.sources.rust || '';
-  updatingEditors = false;
-  document.querySelector('[data-view-panel="source"]').classList.toggle('isSource', state.sourceLanguage === 'typescript');
-  document.querySelector('[data-view-panel="rust"]').classList.toggle('isSource', state.sourceLanguage === 'rust');
-  for (const button of document.querySelectorAll('[data-source-mode]')) {
-    button.setAttribute('aria-pressed', String(button.dataset.sourceMode === state.sourceLanguage));
+function projectionSet(result) {
+  if (result.projections) return result.projections;
+  const projections = {};
+  if (result.projection) {
+    projections[result.projection.targetLanguage || result.projection.target || 'rust'] = result.projection;
   }
+  return projections;
 }
 
-function languageStatus(language, result) {
-  if (state.sourceLanguage === language) return result.sourceHash || 'source';
-  return (result.projection?.targetLanguage === language ? result.projection.readiness : 'projection') || 'projection';
+function projectionStatus(projection) {
+  if (!projection) return 'missing';
+  return projection.ok ? projection.readiness || 'ready' : 'blocked';
+}
+
+function projectionSummaryText(projection) {
+  if (!projection) return 'missing';
+  return (projection.mode || '-') + ' / ' + String(projection.sourceMapMappings ?? 0) + ' maps';
 }
 
 function graphHtml(result) {
   const summary = result.summary || {};
   const frontier = result.frontier || {};
+  const routeExplanation = result.routeExplanation || {};
+  const semanticMerge = routeExplanation.semanticMerge || {};
   const symbols = frontier.symbols || [];
   const relations = frontier.relations || [];
+  const missingEvidence = semanticMerge.missingEvidence || [];
   return [
     '<div class="chipRow">',
     chip(summary.readiness, readinessClass(summary.readiness)),
+    chip('merge ' + (semanticMerge.readiness || 'unknown'), readinessClass(semanticMerge.readiness)),
+    chip(String(missingEvidence.length) + ' missing evidence', missingEvidence.length ? 'review' : 'ready'),
     chip(String(summary.losses || 0) + ' losses', 'review'),
     chip(String(summary.patchHints || 0) + ' patch hints', 'ready'),
-    chip((result.sourceLanguage || '-') + ' -> ' + (result.projection?.targetLanguage || '-'), 'review'),
+    chip(projectionTargets(result), 'review'),
     '</div>',
+    routeExplanationHtml(routeExplanation),
     '<div class="sectionTitle">Symbols</div>',
     '<div class="graphGrid">',
     ...symbols.map((symbol) => nodeCard(symbol)),
@@ -172,10 +193,56 @@ function graphHtml(result) {
   ].join('');
 }
 
+function projectionTargets(result) {
+  const targets = Object.keys(projectionSet(result));
+  return (result.sourceLanguage || '-') + ' -> ' + (targets.length ? targets.join('/') : '-');
+}
+
+function routeExplanationHtml(explanation) {
+  const routes = explanation.routes || [];
+  if (!routes.length) return '';
+  const semanticMerge = explanation.semanticMerge || {};
+  return [
+    '<div class="sectionTitle">Route Explanation</div>',
+    '<section class="routeSummary">',
+    '<strong>' + escapeHtml('Semantic merge: ' + (semanticMerge.readiness || 'unknown')) + '</strong>',
+    '<span>' + escapeHtml((semanticMerge.admissionAction || 'prioritize') + ' / score ' + String(semanticMerge.score ?? 0)) + '</span>',
+    '</section>',
+    '<div class="routeGrid">',
+    ...routes.map((route) => routeCard(route)),
+    '</div>'
+  ].join('');
+}
+
+function routeCard(route) {
+  const semanticMerge = route.semanticMerge || {};
+  const missing = route.missingEvidenceDetails || [];
+  return '<article class="routeCard">' +
+    '<div class="routeCardHeader">' +
+    '<strong>' + escapeHtml((route.sourceLanguage || '-') + ' -> ' + (route.target || '-')) + '</strong>' +
+    chip(semanticMerge.readiness || route.readiness, readinessClass(semanticMerge.readiness || route.readiness)) +
+    '</div>' +
+    '<p>' + escapeHtml(route.explanation || '') + '</p>' +
+    '<dl class="routeFacts">' +
+    factHtml('Mode', route.mode) +
+    factHtml('Action', route.routeAction) +
+    factHtml('Adapter', route.adapter || 'none') +
+    factHtml('Admission', semanticMerge.admissionAction || 'prioritize') +
+    '</dl>' +
+    '<div class="missingEvidenceList">' +
+    missing.map((gap) => '<span title="' + escapeHtml(gap.summary) + '">' + escapeHtml(gap.label) + '</span>').join('') +
+    '</div>' +
+    '</article>';
+}
+
+function factHtml(label, value) {
+  return '<div><dt>' + escapeHtml(label) + '</dt><dd>' + escapeHtml(value || '-') + '</dd></div>';
+}
+
 function nodeCard(symbol) {
   return '<article class="nodeCard" data-graph-node="' + escapeHtml(symbol.id || symbol.name) + '">' +
     '<strong>' + escapeHtml(symbol.name) + '</strong>' +
-    '<span>' + escapeHtml(symbol.kind || 'symbol') + ' · ' + escapeHtml(symbol.region || 'region') + '</span>' +
+    '<span>' + escapeHtml(symbol.kind || 'symbol') + ' - ' + escapeHtml(symbol.region || 'region') + '</span>' +
     '</article>';
 }
 
@@ -199,13 +266,22 @@ function errorResult(error) {
   return {
     summary: { readiness: 'blocked', symbols: 0, sourceMapMappings: 0, losses: 1, patchHints: 0 },
     frontier: { symbols: [], relations: [], error: String(error.message || error) },
-    projection: { output: String(error.stack || error), readiness: 'blocked', mode: 'error' }
+    projections: {
+      rust: { output: String(error.stack || error), readiness: 'blocked', mode: 'error', ok: false },
+      python: { output: String(error.stack || error), readiness: 'blocked', mode: 'error', ok: false }
+    }
   };
 }
 
 function projectedSourceText() {
-  const target = state.result?.projection?.targetLanguage;
-  return target ? state.sources[target] || '' : '';
+  const projections = projectionSet(state.result || {});
+  return [
+    '// Rust projection',
+    projections.rust?.output || '',
+    '',
+    '# Python projection',
+    projections.python?.output || ''
+  ].join('\\n');
 }
 
 function boundsHtml(bounds) {

package/examples/js-frontier-rust-workbench-convert.mjs

@@ -0,0 +1,161 @@
+import {
+  compileNativeSource,
+  createSemanticImportSidecar,
+  createUniversalConversionPlan,
+  importNativeSource,
+  queryUniversalConversionPlan,
+  writeUniversalAstJson
+} from '../dist/index.js';
+import {
+  createTsToPythonWorkbenchAdapter,
+  createTsToRustWorkbenchAdapter
+} from './js-frontier-rust-workbench-adapters.mjs';
+import { conversionBounds } from './js-frontier-rust-workbench-bounds.mjs';
+import {
+  explainRoute,
+  routeExplanationSummary
+} from './js-frontier-rust-workbench-route.mjs';
+
+export function convertSource(source, options = {}) {
+  const sourceLanguage = normalizeSourceLanguage(options.sourceLanguage);
+  const targets = ['rust', 'python'];
+  const imported = importNativeSource({
+    language: sourceLanguage,
+    sourcePath: `workbench/input.${sourceExtension(sourceLanguage)}`,
+    sourceText: source
+  });
+  const targetAdapters = [createTsToRustWorkbenchAdapter(), createTsToPythonWorkbenchAdapter()];
+  const projections = Object.fromEntries(targets.map((target) => {
+    const projection = compileNativeSource(imported, {
+      target,
+      targetPath: `workbench/output.${targetExtension(target)}`,
+      targetAdapters,
+      emitOnBlocked: true
+    });
+    return [target, projectionSummary(projection, { sourceLanguage, target })];
+  }));
+  const conversionPlan = createUniversalConversionPlan({
+    generatedAt: 0,
+    imports: [imported],
+    targetAdapters,
+    targets
+  });
+  const routes = targets.map((target) => explainRoute(
+    queryUniversalConversionPlan(conversionPlan, { sourceLanguage, target }).bestRoute,
+    { projection: projections[target], sourceLanguage, target }
+  ));
+  const sidecar = createSemanticImportSidecar(imported, { generatedAt: 0, targetPath: projections.rust?.targetPath });
+  return {
+    sourceHash: imported.nativeSource.sourceHash,
+    sourceLanguage,
+    summary: {
+      readiness: sidecar.summary.readiness,
+      symbols: imported.semanticIndex.symbols.length,
+      sourceMapMappings: imported.sourceMaps[0]?.mappings.length ?? 0,
+      losses: imported.losses.length,
+      patchHints: sidecar.patchHints.length
+    },
+    frontier: {
+      universalAst: universalAstSummary(imported),
+      semanticIndexId: imported.semanticIndex.id,
+      sidecarId: sidecar.id,
+      symbols: imported.semanticIndex.symbols.map(symbolSummary),
+      relations: relationSummaries(imported),
+      losses: imported.losses.map(lossSummary),
+      patchHints: sidecar.patchHints.map((hint) => ({
+        id: hint.id,
+        readiness: hint.readiness,
+        operations: hint.supportedOperations,
+        ownershipKey: hint.ownershipKey
+      }))
+    },
+    bounds: conversionBounds(sourceLanguage, targets.join('/')),
+    routeExplanation: routeExplanationSummary(conversionPlan, routes),
+    projection: projections.rust,
+    projections
+  };
+}
+
+function projectionSummary(projection, { sourceLanguage, target }) {
+  return {
+    target,
+    targetLanguage: target,
+    sourceLanguage,
+    targetPath: projection.sourceMap?.targetPath,
+    mode: projection.outputMode,
+    readiness: projection.readiness.readiness,
+    ok: projection.ok,
+    output: projection.output,
+    sourceMapMappings: projection.sourceMap?.mappings.length ?? 0,
+    targetAdapter: projection.metadata?.targetProjectionAdapterId,
+    evidence: (projection.evidence ?? []).map(evidenceSummary)
+  };
+}
+
+function evidenceSummary(record) {
+  return {
+    id: record.id,
+    kind: record.kind,
+    status: record.status,
+    summary: record.summary,
+    adapterId: record.metadata?.adapterId
+  };
+}
+
+function universalAstSummary(imported) {
+  const summary = { valid: true, validationError: undefined };
+  let parsed = imported.universalAst;
+  try {
+    parsed = JSON.parse(writeUniversalAstJson(imported.universalAst));
+  } catch (error) {
+    summary.valid = false;
+    summary.validationError = String(error.message || error);
+  }
+  return {
+    ...summary,
+    kind: parsed.kind,
+    id: parsed.id,
+    nativeSources: parsed.nativeSources?.length ?? 0,
+    semanticSymbols: parsed.semanticIndex?.symbols?.length ?? 0,
+    sourceMaps: parsed.sourceMaps?.length ?? 0,
+    layers: Object.keys(parsed.layers ?? {})
+  };
+}
+
+function symbolSummary(symbol) {
+  return {
+    id: symbol.id,
+    name: symbol.name,
+    kind: symbol.kind,
+    language: symbol.language,
+    region: symbol.metadata?.ownershipRegionKind,
+    ownershipKey: symbol.metadata?.ownershipRegionKey
+  };
+}
+
+function relationSummaries(imported) {
+  const names = new Map(imported.semanticIndex.symbols.map((symbol) => [symbol.id, symbol.name]));
+  return imported.semanticIndex.relations.map((relation) => ({
+    id: relation.id,
+    predicate: relation.predicate,
+    label: `${names.get(relation.sourceId) ?? relation.sourceId} ${relation.predicate} ${names.get(relation.targetId) ?? relation.targetId}`
+  }));
+}
+
+function lossSummary(loss) {
+  return { id: loss.id, kind: loss.kind, severity: loss.severity, message: loss.message };
+}
+
+function normalizeSourceLanguage(language) {
+  return 'typescript';
+}
+
+function targetExtension(target) {
+  if (target === 'rust') return 'rs';
+  if (target === 'python') return 'py';
+  return 'txt';
+}
+
+function sourceExtension(language) {
+  return 'ts';
+}

package/examples/js-frontier-rust-workbench-html.mjs

@@ -4,7 +4,7 @@ export function renderWorkbenchHtml(initialState) {
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Frontier Lang TypeScript to Rust Workbench</title>
+  <title>Frontier Lang TypeScript Projection Workbench</title>
   <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
@@ -14,25 +14,22 @@ export function renderWorkbenchHtml(initialState) {
         <span class="brandMark">F</span>
         <div>
           <h1>Frontier Lang Workbench</h1>
-          <p>TypeScript -> Frontier graph -> Rust</p>
+          <p>TypeScript -> Frontier graph -> Rust + Python</p>
         </div>
       </div>
-      <div class="topActions">
-        <div class="modeGroup" role="group" aria-label="Source language">
-          <button data-source-mode="typescript" aria-pressed="true">TS source</button>
-          <button data-source-mode="rust" aria-pressed="false">Rust source</button>
-        </div>
-        <button class="runButton" id="runButton">Run</button>
-        <button class="iconButton" id="resetButton" title="Reset source" aria-label="Reset source">↺</button>
-        <button class="iconButton" id="copyButton" title="Copy projection" aria-label="Copy projection">⧉</button>
-      </div>
+      <form class="topActions" id="convertForm">
+        <button class="runButton" id="runButton" type="submit">Run</button>
+        <button class="iconButton" id="resetButton" type="button" title="Reset source" aria-label="Reset source">↺</button>
+        <button class="iconButton" id="copyButton" type="button" title="Copy projections" aria-label="Copy projections">⧉</button>
+      </form>
     </header>
 
     <section class="statusStrip" data-view-panel="status">
       <div><span class="label">Readiness</span><strong id="readinessValue">-</strong></div>
       <div><span class="label">Symbols</span><strong id="symbolValue">-</strong></div>
       <div><span class="label">Mappings</span><strong id="mappingValue">-</strong></div>
-      <div><span class="label">Mode</span><strong id="modeValue">-</strong></div>
+      <div><span class="label">Rust</span><strong id="rustValue">-</strong></div>
+      <div><span class="label">Python</span><strong id="pythonValue">-</strong></div>
     </section>
 
     <section class="workspace">
@@ -64,7 +61,17 @@ export function renderWorkbenchHtml(initialState) {
           <span id="rustStatus">target</span>
         </div>
         <div class="paneBody editorBody">
-          <textarea id="rustInput" spellcheck="false" aria-label="Rust source"></textarea>
+          <textarea id="rustOutput" spellcheck="false" aria-label="Rust projection" readonly></textarea>
+        </div>
+      </section>
+
+      <section class="pane outputPane" data-view-panel="python">
+        <div class="paneHeader">
+          <h2>Python</h2>
+          <span id="pythonStatus">target</span>
+        </div>
+        <div class="paneBody editorBody">
+          <textarea id="pythonOutput" spellcheck="false" aria-label="Python projection" readonly></textarea>
         </div>
       </section>
     </section>

package/examples/js-frontier-rust-workbench-route-styles.mjs

@@ -0,0 +1,126 @@
+export function workbenchRouteStyles() {
+  return `
+.routeSummary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #12171a;
+  padding: 10px;
+}
+.routeSummary strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+}
+.routeSummary span {
+  flex: 0 0 auto;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+}
+.routeGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+.routeCard {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #14191d;
+  padding: 10px;
+}
+.routeCardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.routeCardHeader strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+}
+.routeCard p {
+  margin: 8px 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.routeFacts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin: 0 0 8px;
+}
+.routeFacts div {
+  min-width: 0;
+}
+.routeFacts dt {
+  color: var(--faint);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+.routeFacts dd {
+  margin: 2px 0 0;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.missingEvidenceList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.missingEvidenceList span {
+  border: 1px solid rgba(231, 183, 95, .45);
+  border-radius: 999px;
+  padding: 3px 6px;
+  color: var(--amber);
+  font-size: 10px;
+}
+.edgeList {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.edgeList li {
+  border-left: 2px solid var(--blue);
+  background: rgba(109, 180, 232, .08);
+  padding: 6px 8px;
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.boundsGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+.boundCard {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #12171a;
+  padding: 10px;
+}
+.boundCard strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+.boundCard ul {
+  margin: 0;
+  padding-left: 16px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+`;
+}