@shapeshift-labs/frontier-lang-compiler 0.2.55 → 0.2.56

package/README.md

@@ -26,6 +26,18 @@ npm run build
 node examples/native-js-to-rust-demo.mjs
 ```
 
+Run the interactive Frontier-style workbench with editable TypeScript and Rust panes:
+
+```sh
+npm run demo:ts-rust -- --port 4177
+```
+
+The workbench converts only when `Run` is pressed. TypeScript edits project through
+the Frontier semantic graph into Rust scaffolding; Rust edits project back through
+the graph into TypeScript scaffolding. The middle pane shows symbols, relations,
+source maps, readiness, losses, patch hints, and the explicit supported/review-only/
+unsupported bounds for the current direction.
+
 The demo prints JavaScript source, the Frontier universal AST/semantic-index summary,
 Rust declaration stubs, a host-adapter Rust projection, and a direct Frontier-source
 to Rust projection. Native JavaScript projection remains loss-aware: without a

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

@@ -0,0 +1,24 @@
+export function conversionBounds(sourceLanguage, targetLanguage) {
+  return {
+    sourceLanguage,
+    targetLanguage,
+    supportedNow: [
+      'Top-level imports, functions, classes, types, constants, and simple ownership regions.',
+      'Frontier universal AST envelopes, semantic indexes, source maps, losses, and sidecar patch hints.',
+      'Deterministic scaffold projection through explicit demo target adapters.',
+      'Manual run submission so every conversion has a source hash and evidence record.'
+    ],
+    reviewRequired: [
+      'Function bodies are preserved as source evidence and emitted as TODO scaffolds.',
+      'Types are declaration evidence, not a full Rust trait/lifetime/ownership proof.',
+      'Runtime APIs such as fetch, timers, storage, DOM, Node, and npm crates need adapters.',
+      'Round trips are useful for review, but not automatic semantic equivalence proofs.'
+    ],
+    unsupportedToday: [
+      'Behavior-preserving transpilation of arbitrary TypeScript or Rust.',
+      'Full generic constraints, overload resolution, conditional types, macros, and borrow checking.',
+      'Async control-flow lowering, exception/error model conversion, and memory ownership synthesis.',
+      'Perfect comments/trivia formatting in projected target code without richer parser evidence.'
+    ]
+  };
+}

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

@@ -0,0 +1,243 @@
+export function workbenchClientScript() {
+  return `
+const initial = JSON.parse(document.getElementById('initial-state').textContent);
+const state = {
+  sources: { ...initial.sources },
+  sourceLanguage: initial.sourceLanguage || 'typescript',
+  result: initial.result,
+  activeTab: 'graph',
+  pending: false
+};
+
+window.frontierLangWorkbench = {
+  kind: 'frontier.framework.demo.langWorkbench',
+  version: 1,
+  state,
+  feature: {
+    id: 'frontier-lang-ts-rust-workbench',
+    package: '@shapeshift-labs/frontier-lang-compiler',
+    route: '/examples/js-frontier-rust-workbench',
+    panels: ['source', 'frontier', 'rust']
+  },
+  evidence: []
+};
+
+const typescriptInput = document.getElementById('typescriptInput');
+const rustInput = document.getElementById('rustInput');
+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 typescriptStatus = document.getElementById('typescriptStatus');
+const rustStatus = document.getElementById('rustStatus');
+
+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('resetButton').addEventListener('click', async () => {
+  state.sources = { ...initial.sources };
+  state.sourceLanguage = 'typescript';
+  state.result = initial.result;
+  render();
+});
+
+document.getElementById('copyButton').addEventListener('click', async () => {
+  await navigator.clipboard.writeText(projectedSourceText());
+});
+
+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;
+    for (const peer of document.querySelectorAll('[data-frontier-tab]')) {
+      peer.setAttribute('aria-pressed', String(peer === button));
+    }
+    render();
+  });
+}
+
+async function convertFrom(sourceLanguage) {
+  state.sourceLanguage = sourceLanguage;
+  state.sources[sourceLanguage] = sourceLanguage === 'rust' ? rustInput.value : 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 })
+    });
+    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;
+    window.frontierLangWorkbench.evidence.push({
+      at: Date.now(),
+      kind: 'conversion',
+      sourceHash: payload.result.sourceHash,
+      symbolCount: payload.result.summary.symbols,
+      readiness: payload.result.summary.readiness
+    });
+  } catch (error) {
+    state.result = errorResult(error);
+  } finally {
+    setPending(false);
+    render();
+  }
+}
+
+function render() {
+  const result = state.result || {};
+  const summary = result.summary || {};
+  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);
+  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 languageStatus(language, result) {
+  if (state.sourceLanguage === language) return result.sourceHash || 'source';
+  return (result.projection?.targetLanguage === language ? result.projection.readiness : 'projection') || 'projection';
+}
+
+function graphHtml(result) {
+  const summary = result.summary || {};
+  const frontier = result.frontier || {};
+  const symbols = frontier.symbols || [];
+  const relations = frontier.relations || [];
+  return [
+    '<div class="chipRow">',
+    chip(summary.readiness, readinessClass(summary.readiness)),
+    chip(String(summary.losses || 0) + ' losses', 'review'),
+    chip(String(summary.patchHints || 0) + ' patch hints', 'ready'),
+    chip((result.sourceLanguage || '-') + ' -> ' + (result.projection?.targetLanguage || '-'), 'review'),
+    '</div>',
+    '<div class="sectionTitle">Symbols</div>',
+    '<div class="graphGrid">',
+    ...symbols.map((symbol) => nodeCard(symbol)),
+    '</div>',
+    '<div class="sectionTitle">Relations</div>',
+    '<ul class="edgeList">',
+    ...relations.slice(0, 18).map((edge) => '<li>' + escapeHtml(edge.label) + '</li>'),
+    relations.length > 18 ? '<li>' + (relations.length - 18) + ' more</li>' : '',
+    '</ul>',
+    boundsHtml(result.bounds || {})
+  ].join('');
+}
+
+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>' +
+    '</article>';
+}
+
+function chip(text, className) {
+  return '<span class="chip ' + className + '">' + escapeHtml(text || '-') + '</span>';
+}
+
+function readinessClass(readiness) {
+  if (readiness === 'ready' || readiness === 'ready-with-losses') return 'ready';
+  if (readiness === 'blocked') return 'blocked';
+  return 'review';
+}
+
+function readinessColor(readiness) {
+  if (readiness === 'ready' || readiness === 'ready-with-losses') return 'var(--green)';
+  if (readiness === 'blocked') return 'var(--red)';
+  return 'var(--amber)';
+}
+
+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' }
+  };
+}
+
+function projectedSourceText() {
+  const target = state.result?.projection?.targetLanguage;
+  return target ? state.sources[target] || '' : '';
+}
+
+function boundsHtml(bounds) {
+  return [
+    '<div class="sectionTitle">Bounds</div>',
+    '<div class="boundsGrid">',
+    boundCard('Supported now', bounds.supportedNow || []),
+    boundCard('Review required', bounds.reviewRequired || []),
+    boundCard('Unsupported today', bounds.unsupportedToday || []),
+    '</div>'
+  ].join('');
+}
+
+function boundCard(title, rows) {
+  return '<section class="boundCard"><strong>' + escapeHtml(title) + '</strong><ul>' +
+    rows.map((row) => '<li>' + escapeHtml(row) + '</li>').join('') +
+    '</ul></section>';
+}
+
+function setPending(pending) {
+  state.pending = pending;
+  document.body.toggleAttribute('data-pending', pending);
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  })[char]);
+}
+`;
+}

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

@@ -0,0 +1,76 @@
+export function renderWorkbenchHtml(initialState) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Frontier Lang TypeScript to Rust Workbench</title>
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <main class="appShell" data-frontier-app="lang-workbench">
+    <header class="topbar">
+      <div class="brand">
+        <span class="brandMark">F</span>
+        <div>
+          <h1>Frontier Lang Workbench</h1>
+          <p>TypeScript -> Frontier graph -> Rust</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>
+    </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>
+    </section>
+
+    <section class="workspace">
+      <section class="pane sourcePane" data-view-panel="source">
+        <div class="paneHeader">
+          <h2>TypeScript</h2>
+          <span id="typescriptStatus">source</span>
+        </div>
+        <textarea id="typescriptInput" spellcheck="false" aria-label="TypeScript source"></textarea>
+      </section>
+
+      <section class="pane graphPane" data-view-panel="frontier">
+        <div class="paneHeader">
+          <h2>Frontier</h2>
+          <div class="segmented" role="tablist" aria-label="Frontier view">
+            <button data-frontier-tab="graph" aria-pressed="true">Graph</button>
+            <button data-frontier-tab="json" aria-pressed="false">JSON</button>
+          </div>
+        </div>
+        <div id="graphView" class="graphView"></div>
+        <pre id="frontierJson" class="codeBlock" hidden></pre>
+      </section>
+
+      <section class="pane outputPane" data-view-panel="rust">
+        <div class="paneHeader">
+          <h2>Rust</h2>
+          <span id="rustStatus">target</span>
+        </div>
+        <textarea id="rustInput" spellcheck="false" aria-label="Rust source"></textarea>
+      </section>
+    </section>
+  </main>
+  <script type="application/json" id="initial-state">${escapeScriptJson(initialState)}</script>
+  <script src="/client.js" type="module"></script>
+</body>
+</html>`;
+}
+
+function escapeScriptJson(value) {
+  return JSON.stringify(value).replace(/</g, '\\u003c');
+}

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

@@ -0,0 +1,243 @@
+export function workbenchStyles() {
+  return `
+:root {
+  color-scheme: dark;
+  --bg: #08090a;
+  --panel: #111417;
+  --panel-2: #171b20;
+  --panel-3: #20262c;
+  --line: #303941;
+  --text: #f4f7f2;
+  --muted: #aab3aa;
+  --faint: #758075;
+  --green: #61d394;
+  --amber: #e7b75f;
+  --red: #e46c69;
+  --blue: #6db4e8;
+  --violet: #a78bfa;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--ui);
+  overflow: hidden;
+}
+
+.appShell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: 58px 46px minmax(0, 1fr);
+}
+
+.topbar, .statusStrip, .paneHeader {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+}
+
+.topbar {
+  justify-content: space-between;
+  padding: 0 14px;
+  background: #0c0e10;
+}
+
+.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.brandMark {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #151b17;
+  color: var(--green);
+  font-weight: 800;
+}
+.brand h1 { margin: 0; font-size: 15px; line-height: 1.1; letter-spacing: 0; }
+.brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
+
+.topActions { display: flex; align-items: center; gap: 8px; }
+.iconButton, .segmented button, .modeGroup button, .runButton {
+  height: 32px;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  color: var(--text);
+  border-radius: 8px;
+}
+.iconButton { width: 34px; font-size: 16px; cursor: pointer; }
+.runButton { min-width: 64px; padding: 0 14px; cursor: pointer; color: var(--green); }
+.modeGroup { display: flex; }
+.modeGroup button {
+  width: 84px;
+  border-radius: 0;
+  font-size: 12px;
+  cursor: pointer;
+}
+.modeGroup button:first-child { border-radius: 7px 0 0 7px; }
+.modeGroup button:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
+.modeGroup button[aria-pressed="true"] { background: #213127; color: var(--green); }
+.iconButton:hover, .segmented button:hover, .modeGroup button:hover, .runButton:hover { background: var(--panel-3); }
+
+.statusStrip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  background: #0f1214;
+}
+.statusStrip div {
+  min-width: 0;
+  padding: 8px 14px;
+  border-right: 1px solid var(--line);
+}
+.label {
+  display: block;
+  color: var(--faint);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+.statusStrip strong { font-size: 13px; font-weight: 650; }
+
+.workspace {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(270px, 0.95fr) minmax(330px, 1.1fr) minmax(300px, 1fr);
+}
+.pane {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: 44px minmax(0, 1fr);
+  border-right: 1px solid var(--line);
+  background: var(--panel);
+}
+.pane:last-child { border-right: 0; }
+.pane.isSource .paneHeader { box-shadow: inset 0 -2px 0 var(--green); }
+.paneHeader {
+  justify-content: space-between;
+  padding: 0 12px;
+  background: var(--panel-2);
+}
+.paneHeader h2 { margin: 0; font-size: 13px; letter-spacing: 0; }
+.paneHeader span { color: var(--muted); font-size: 12px; font-family: var(--mono); }
+
+textarea, .codeBlock {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  border: 0;
+  resize: none;
+  outline: none;
+  background: #0d1012;
+  color: #edf2ea;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.48;
+  padding: 14px;
+  overflow: auto;
+  white-space: pre;
+}
+
+.graphView {
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+}
+.graphGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+.nodeCard {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #14191d;
+  padding: 10px;
+}
+.nodeCard strong {
+  display: block;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+}
+.nodeCard span { color: var(--muted); font-size: 12px; }
+.chipRow { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
+.chip {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 4px 8px;
+  color: var(--muted);
+  font-size: 11px;
+}
+.chip.ready { color: var(--green); border-color: rgba(97, 211, 148, .45); }
+.chip.review { color: var(--amber); border-color: rgba(231, 183, 95, .45); }
+.chip.blocked { color: var(--red); border-color: rgba(228, 108, 105, .45); }
+.sectionTitle {
+  margin: 12px 0 8px;
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+.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;
+}
+.segmented { display: flex; gap: 0; }
+.segmented button {
+  width: 58px;
+  border-radius: 0;
+  font-size: 12px;
+}
+.segmented button:first-child { border-radius: 7px 0 0 7px; }
+.segmented button:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
+.segmented button[aria-pressed="true"] { background: #213127; color: var(--green); }
+
+@media (max-width: 980px) {
+  body { overflow: auto; }
+  .appShell { min-height: 100vh; grid-template-rows: auto auto auto; }
+  .workspace { grid-template-columns: 1fr; }
+  .pane { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
+  .statusStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .topbar { align-items: flex-start; gap: 10px; padding: 10px 14px; }
+  .topActions { flex-wrap: wrap; justify-content: flex-end; }
+  .boundsGrid { grid-template-columns: 1fr; }
+}
+`;
+}

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

@@ -0,0 +1,314 @@
+#!/usr/bin/env node
+import http from 'node:http';
+import { compileNativeSource, createSemanticImportSidecar, importNativeSource, writeUniversalAstJson } from '../dist/index.js';
+import { conversionBounds } from './js-frontier-rust-workbench-bounds.mjs';
+import { renderWorkbenchHtml } from './js-frontier-rust-workbench-html.mjs';
+import { workbenchClientScript } from './js-frontier-rust-workbench-client.mjs';
+import { workbenchStyles } from './js-frontier-rust-workbench-styles.mjs';
+
+const args = readArgs(process.argv.slice(2));
+const port = Number(args.port ?? 4177);
+const sampleSource = `import { nanoid } from "nanoid";
+
+export type TodoInput = {
+  title: string;
+};
+
+export function addTodo(input: TodoInput) {
+  return { id: nanoid(), title: input.title };
+}
+
+export class TodoStore {
+  save(title: string) {
+    return addTodo({ title });
+  }
+}
+`;
+const sampleRustSource = `// Generated from Frontier semantic graph evidence.
+pub fn add_todo() {
+    // port body from preserved TypeScript source
+}
+
+pub struct TodoStore;
+`;
+
+if (args.smoke) {
+  const result = convertSource(sampleSource, { sourceLanguage: 'typescript' });
+  assert(result.summary.symbols >= 2, 'expected semantic symbols');
+  assert(result.projection.output.includes('pub'), 'expected Rust projection');
+  const reverse = convertSource(result.projection.output, { sourceLanguage: 'rust' });
+  assert(reverse.projection.output.includes('export'), 'expected TypeScript projection');
+  console.log(JSON.stringify({ ok: true, summary: result.summary }, null, 2));
+} else {
+  const server = http.createServer(routeRequest);
+  server.listen(port, '127.0.0.1', () => {
+    console.log(`Frontier Lang workbench: http://127.0.0.1:${port}/`);
+  });
+}
+
+async function routeRequest(request, response) {
+  try {
+    if (request.method === 'GET' && request.url === '/') {
+      return send(response, 200, renderWorkbenchHtml({
+        sourceLanguage: 'typescript',
+        sources: { typescript: sampleSource, rust: sampleRustSource },
+        result: convertSource(sampleSource, { sourceLanguage: 'typescript' })
+      }), 'text/html; charset=utf-8');
+    }
+    if (request.method === 'GET' && request.url === '/styles.css') {
+      return send(response, 200, workbenchStyles(), 'text/css; charset=utf-8');
+    }
+    if (request.method === 'GET' && request.url === '/client.js') {
+      return send(response, 200, workbenchClientScript(), 'text/javascript; charset=utf-8');
+    }
+    if (request.method === 'POST' && request.url === '/api/convert') {
+      const body = await readJsonBody(request);
+      return sendJson(response, 200, {
+        ok: true,
+        result: convertSource(String(body.source ?? ''), {
+          sourceLanguage: body.sourceLanguage ?? 'typescript'
+        })
+      });
+    }
+    return send(response, 404, 'not found', 'text/plain; charset=utf-8');
+  } catch (error) {
+    return sendJson(response, 500, { ok: false, error: String(error.message || error) });
+  }
+}
+
+function convertSource(source, options = {}) {
+  const sourceLanguage = normalizeSourceLanguage(options.sourceLanguage);
+  const target = sourceLanguage === 'rust' ? 'typescript' : 'rust';
+  const imported = importNativeSource({
+    language: sourceLanguage,
+    sourcePath: `workbench/input.${sourceExtension(sourceLanguage)}`,
+    sourceText: source
+  });
+  const projection = compileNativeSource(imported, {
+    target,
+    targetPath: `workbench/output.${targetExtension(target)}`,
+    targetAdapters: [createTsToRustWorkbenchAdapter(), createRustToTsWorkbenchAdapter()],
+    emitOnBlocked: true
+  });
+  const sidecar = createSemanticImportSidecar(imported, { generatedAt: 0, targetPath: projection.sourceMap?.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, target),
+    projection: {
+      target,
+      targetLanguage: target,
+      sourceLanguage,
+      mode: projection.outputMode,
+      readiness: projection.readiness.readiness,
+      ok: projection.ok,
+      output: projection.output,
+      sourceMapMappings: projection.sourceMap?.mappings.length ?? 0
+    }
+  };
+}
+
+function createTsToRustWorkbenchAdapter() {
+  return {
+    id: 'frontier-lang-workbench-ts-to-rust',
+    sourceLanguage: 'typescript',
+    target: 'rust',
+    version: '0.0.0-demo',
+    capabilities: ['semantic-symbol-scaffold'],
+    coverage: {
+      readiness: 'ready',
+      handledLossKinds: ['opaqueNative', 'declarationOnlyCoverage', 'partialSemanticIndex', 'sourceMapApproximation', 'sourcePreservation'],
+      notes: ['Workbench adapter lowers TypeScript semantic symbols to Rust scaffolding and leaves bodies explicit.']
+    },
+    project(input) {
+      return {
+        output: rustFromSymbols(input.importResult.semanticIndex?.symbols ?? []),
+        readiness: 'ready',
+        evidence: [{
+          id: 'evidence_workbench_js_to_rust',
+          kind: 'projection',
+          status: 'passed',
+          summary: 'Workbench adapter projected TypeScript semantic symbols to Rust scaffolding.'
+        }]
+      };
+    }
+  };
+}
+
+function createRustToTsWorkbenchAdapter() {
+  return {
+    id: 'frontier-lang-workbench-rust-to-ts',
+    sourceLanguage: 'rust',
+    target: 'typescript',
+    version: '0.0.0-demo',
+    capabilities: ['semantic-symbol-scaffold'],
+    coverage: {
+      readiness: 'ready',
+      handledLossKinds: ['opaqueNative', 'macroExpansion', 'declarationOnlyCoverage', 'partialSemanticIndex', 'sourceMapApproximation', 'sourcePreservation'],
+      notes: ['Workbench adapter lowers Rust semantic symbols to TypeScript scaffolding and leaves bodies explicit.']
+    },
+    project(input) {
+      return {
+        output: tsFromSymbols(input.importResult.semanticIndex?.symbols ?? []),
+        readiness: 'ready',
+        evidence: [{
+          id: 'evidence_workbench_rust_to_ts',
+          kind: 'projection',
+          status: 'passed',
+          summary: 'Workbench adapter projected Rust semantic symbols to TypeScript scaffolding.'
+        }]
+      };
+    }
+  };
+}
+
+function rustFromSymbols(symbols) {
+  const lines = ['// Generated from Frontier semantic graph evidence.'];
+  for (const symbol of symbols) {
+    if (symbol.kind === 'class') lines.push('', `pub struct ${safeTypeName(symbol.name)};`);
+    if (symbol.kind === 'function' || symbol.kind === 'method') {
+      lines.push('', `pub fn ${safeRustName(symbol.name)}() {`, '    // port body from preserved TypeScript source', '}');
+    }
+  }
+  return `${lines.join('\n').trim()}\n`;
+}
+
+function tsFromSymbols(symbols) {
+  const lines = ['// Generated from Frontier semantic graph evidence.'];
+  for (const symbol of symbols) {
+    if (symbol.kind === 'type' || symbol.kind === 'class') lines.push('', `export class ${safeTypeName(symbol.name)} {}`);
+    if (symbol.kind === 'function' || symbol.kind === 'method') {
+      lines.push('', `export function ${safeJsName(symbol.name)}(...args: unknown[]) {`, "  throw new Error('port body from preserved Rust source');", '}');
+    }
+  }
+  return `${lines.join('\n').trim()}\n`;
+}
+
+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 String(language || 'typescript').toLowerCase() === 'rust' ? 'rust' : 'typescript';
+}
+
+function targetExtension(target) {
+  return target === 'rust' ? 'rs' : 'ts';
+}
+
+function sourceExtension(language) {
+  return language === 'rust' ? 'rs' : 'ts';
+}
+
+function safeTypeName(name) {
+  const clean = String(name).replace(/[^A-Za-z0-9_]/g, '');
+  return clean && /^[A-Z]/.test(clean) ? clean : `Frontier${clean || 'Type'}`;
+}
+
+function safeRustName(name) {
+  return String(name).replace(/\./g, '_').replace(/([a-z0-9])([A-Z])/g, '$1_$2').replace(/[^A-Za-z0-9_]/g, '_').toLowerCase();
+}
+
+function safeJsName(name) {
+  const clean = String(name).replace(/[^A-Za-z0-9_$]/g, '_');
+  return /^[A-Za-z_$]/.test(clean) ? clean : `frontier_${clean}`;
+}
+
+function sendJson(response, status, value) {
+  return send(response, status, JSON.stringify(value), 'application/json; charset=utf-8');
+}
+
+function send(response, status, body, type) {
+  response.writeHead(status, { 'content-type': type, 'cache-control': 'no-store' });
+  response.end(body);
+}
+
+function readJsonBody(request) {
+  return new Promise((resolve, reject) => {
+    let text = '';
+    request.setEncoding('utf8');
+    request.on('data', (chunk) => {
+      text += chunk;
+      if (text.length > 200000) reject(new Error('request body too large'));
+    });
+    request.on('end', () => resolve(text ? JSON.parse(text) : {}));
+    request.on('error', reject);
+  });
+}
+
+function readArgs(entries) {
+  const parsed = {};
+  for (let index = 0; index < entries.length; index += 1) {
+    const entry = entries[index];
+    if (entry === '--serve') parsed.serve = true;
+    else if (entry === '--smoke') parsed.smoke = true;
+    else if (entry === '--port') parsed.port = entries[++index];
+    else if (entry.startsWith('--port=')) parsed.port = entry.slice('--port='.length);
+  }
+  return parsed;
+}
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapeshift-labs/frontier-lang-compiler",
-  "version": "0.2.55",
+  "version": "0.2.56",
   "description": "Compiler facade for Frontier Lang source documents and language projection adapters.",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,6 +26,10 @@
     "typecheck": "node ./node_modules/typescript/bin/tsc --noEmit -p test/tsconfig.json",
     "fuzz": "npm run build && node fuzz/smoke.mjs",
     "bench": "npm run build && node bench/smoke.mjs",
+    "demo:ts-rust": "npm run build && node examples/js-frontier-rust-workbench.mjs --serve",
+    "demo:ts-rust:smoke": "npm run build && node examples/js-frontier-rust-workbench.mjs --smoke",
+    "demo:js-rust": "npm run demo:ts-rust",
+    "demo:js-rust:smoke": "npm run demo:ts-rust:smoke",
     "prepare": "npm run build",
     "prepack": "npm run lint && npm test",
     "pack:dry": "npm pack --dry-run",