fix design workspace browser runtime errors

  Avoid TypeScript type-root resolution that depends on the Node process
  global during stored-node transpilation.

  Keep evaluated design results unproxied so they can be cloned across the
  visualization MessagePort.

  Add browser and end-to-end regression coverage for loading, rendering,
  and rerunning the local AI workstation example.

Author: yeus

packages/comp-dag/dagNodeLoader.ts

@@ -68,15 +68,7 @@ export const parseStoredGraphNodeHashFromPath = (path: string): Hash | null => {
   return match?.[1] ? hashFromFilePart(match[1]) : null
 }
 
-const loadTypescript = async (): Promise<typeof ts> => {
-  const browserProcess = (
-    globalThis as unknown as {
-      process?: { versions?: Record<string, string | undefined> }
-    }
-  ).process
-  if (browserProcess && !browserProcess.versions) browserProcess.versions = {}
-  return await import('typescript')
-}
+const loadTypescript = async (): Promise<typeof ts> => await import('typescript')
 
 const formatTypeScript = async (source: string): Promise<string> => {
   const prettier = (await import('prettier/standalone')) as PrettierStandaloneModule
@@ -336,6 +328,7 @@ const transpileRunSource = (tsModule: typeof ts, runSource: string): string => {
       target: tsModule.ScriptTarget.ES2022,
       module: tsModule.ModuleKind.ESNext,
       removeComments: false,
+      typeRoots: [],
     },
     fileName: 'stored-graph-node-run.ts',
   })

packages/comp-dag/test_dag_node_loader.ts

@@ -47,3 +47,33 @@ export default ${nodeBody} satisfies StoredDagNodeModule
 
 testStoredDagNodeNormalizationEmitsStandaloneSource.description =
   'Normalizes stored design-graph nodes into standalone source without application imports.'
+
+export const testStoredDagNodeNormalizationRunsWithoutBrowserProcess = async () => {
+  if (typeof window === 'undefined') {
+    return {
+      skipped: true,
+      reason: 'The missing process global is a browser runtime boundary.',
+    }
+  }
+
+  const processDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'process')
+  const removed = Reflect.deleteProperty(globalThis, 'process')
+  assert(
+    removed || processDescriptor === undefined,
+    'Expected the browser process shim to be removable',
+  )
+
+  try {
+    const normalized = await normalizeStoredGraphNodeSource(`export default ${nodeBody}\n`)
+    assert(
+      normalized.source.startsWith('export default {'),
+      'Expected stored-node normalization to work without a browser process global',
+    )
+    return { source: normalized.source }
+  } finally {
+    if (processDescriptor) Object.defineProperty(globalThis, 'process', processDescriptor)
+  }
+}
+
+testStoredDagNodeNormalizationRunsWithoutBrowserProcess.description =
+  'Normalizes a stored design-graph node when the browser has no Node process global.'

src/pages/taskyon/DesignWorkspacePage.vue

@@ -497,7 +497,7 @@ import {
   designRendererBootstrapSource,
   type DesignRendererHostConnection,
 } from 'src/modules/designRendererProtocol'
-import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { RouteLocationRaw } from 'vue-router'
 import type { JSONSchema7 } from 'json-schema'
@@ -515,7 +515,7 @@ const selectedRoot = ref('')
 const refOptions = ref<string[]>([])
 const project = ref<DesignWorkspaceProject | null>(null)
 const params = ref<Record<string, unknown>>({})
-const result = ref<unknown>(null)
+const result = shallowRef<unknown>(null)
 const evaluation = ref<Awaited<ReturnType<typeof evaluateDesign>>['evaluation'] | null>(null)
 const visualizationHtml = ref('')
 const visualizationFrame = ref<HTMLIFrameElement | null>(null)

test/playwright/e2e/design-workspace.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('design workspace', () => {
+  test('opens, renders, and reruns the local AI workstation example', async ({ page }) => {
+    const pageErrors: string[] = []
+    const relevantConsoleErrors: string[] = []
+    page.on('pageerror', (error) => pageErrors.push(error.message))
+    page.on('console', (message) => {
+      if (
+        message.type() === 'error' &&
+        /process is not defined|could not be cloned/i.test(message.text())
+      ) {
+        relevantConsoleErrors.push(message.text())
+      }
+    })
+
+    await page.goto('/')
+    await page.getByRole('button', { name: 'Local AI workstation', exact: true }).click()
+    await expect(page).toHaveURL(/\/design\/ai-workstation\/revision\//)
+    await expect(page.getByText('Building the design workspace…', { exact: true })).toBeHidden()
+
+    const resultCard = page.locator('.result-card')
+    const evaluationStatus = resultCard.locator('.panel-summary')
+    await expect(evaluationStatus).toHaveText(/^Artifact /)
+
+    await page.getByRole('tab', { name: 'Result', exact: true }).click()
+    await expect(resultCard.locator('.q-banner.bg-negative')).toHaveCount(0)
+
+    await page.getByRole('tab', { name: 'Visual', exact: true }).click()
+    const visualization = page.frameLocator('iframe[title="Design result visualization"]')
+    await expect(visualization.getByText('Waiting for the evaluated design…')).toBeHidden()
+    await expect(visualization.getByLabel('Generated AI workstation')).toBeVisible()
+
+    const nextArtifact = evaluationStatus.evaluate(
+      (element) =>
+        new Promise<void>((resolve) => {
+          const observer = new MutationObserver(() => {
+            if (!element.textContent?.startsWith('Artifact ')) return
+            observer.disconnect()
+            resolve()
+          })
+          observer.observe(element, { childList: true, subtree: true, characterData: true })
+        }),
+    )
+    await page.getByRole('button', { name: 'Run', exact: true }).click()
+    await nextArtifact
+    await expect(visualization.getByLabel('Generated AI workstation')).toBeVisible()
+
+    await page.getByRole('tab', { name: 'Result', exact: true }).click()
+    await expect(resultCard.locator('.q-banner.bg-negative')).toHaveCount(0)
+    expect(pageErrors).toEqual([])
+    expect(relevantConsoleErrors).toEqual([])
+  })
+})