feat: diagnostic logging + recovery banner on Monaco worker construction failure (#42)

When Monaco's web workers fail to construct, the renderer's worker
subsystem is poisoned for the whole session — every diff editor renders
without highlighting until reload. Today the failure is invisible to
users and silent in logs.

Wrap each worker construction in `safeCreateWorker` that captures the
failure (label, phase, message, stack, userAgent, resolved Vite URL)
to console.error (which already lands in debug.log via renderer log
forwarding) and dispatches a `monaco:worker-failed` window event. Also
hooks the worker's runtime `error` event so workers that die on first
message are captured the same way.

Add a `MonacoWorkerFailedBanner` mounted at the top of DesktopApp that
listens for the event and offers a one-click `window.location.reload()`
plus a dismiss-for-now button.

No mitigations or retries — the point is to capture data so the root
cause can be diagnosed; masking the symptom would rob us of that.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: frenchie4111

src/renderer/App.tsx

@@ -38,6 +38,7 @@ import { ResolveRepoModal } from './components/ResolveRepoModal'
 import { RepoAddErrorModal } from './components/RepoAddErrorModal'
 import { ReportIssueScreen, onOpenReportIssue, type OpenReportIssueDetail } from './components/ReportIssueScreen'
 import { AddBackendModal } from './components/AddBackendModal'
+import { MonacoWorkerFailedBanner } from './components/MonacoWorkerFailedBanner'
 import iconUrl from '../../resources/icon.png'
 import { PerfMonitorHUD } from './components/PerfMonitorHUD'
 import { focusTerminalById } from './components/XTerminal'
@@ -1025,6 +1026,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
   return (
     <HotkeysProvider bindings={resolvedHotkeys}>
     <div className="flex h-full flex-col">
+      <MonacoWorkerFailedBanner />
       {/* Update-ready banner */}
       {updaterStatus?.state === 'downloaded' && !updateBannerDismissed && (
         <div className="bg-success/15 border-b border-success/30 pl-20 pr-4 py-2.5 drag-region flex items-center gap-3 shrink-0">

src/renderer/components/MonacoWorkerFailedBanner.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+import { AlertTriangle, X } from 'lucide-react'
+
+export function MonacoWorkerFailedBanner(): JSX.Element | null {
+  const [failed, setFailed] = useState<string[]>([])
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<{ label: string }>).detail
+      if (!detail?.label) return
+      setFailed((prev) => (prev.includes(detail.label) ? prev : [...prev, detail.label]))
+    }
+    window.addEventListener('monaco:worker-failed', handler)
+    return () => window.removeEventListener('monaco:worker-failed', handler)
+  }, [])
+
+  if (failed.length === 0 || dismissed) return null
+
+  return (
+    <div className="bg-warning/15 border-b border-warning/40 text-warning px-3 py-1.5 text-xs flex items-center gap-3 drag-region shrink-0">
+      <AlertTriangle size={12} className="shrink-0" />
+      <span className="flex-1">
+        Diff highlighting and syntax tools are temporarily unavailable (Monaco workers failed to
+        load: {failed.join(', ')}). Reload this window to restore.
+      </span>
+      <button
+        onClick={() => window.location.reload()}
+        className="px-2 py-0.5 rounded bg-warning/30 hover:bg-warning/50 text-warning transition-colors cursor-pointer no-drag"
+      >
+        Reload window
+      </button>
+      <button
+        onClick={() => setDismissed(true)}
+        title="Hide this banner (problem will persist until reload)"
+        className="text-warning/70 hover:text-warning cursor-pointer no-drag"
+      >
+        <X size={12} />
+      </button>
+    </div>
+  )
+}

src/renderer/monaco-setup.ts

@@ -7,14 +7,76 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import EditorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker?worker&url'
+import JsonWorkerUrl from 'monaco-editor/esm/vs/language/json/json.worker?worker&url'
+import CssWorkerUrl from 'monaco-editor/esm/vs/language/css/css.worker?worker&url'
+import HtmlWorkerUrl from 'monaco-editor/esm/vs/language/html/html.worker?worker&url'
+import TsWorkerUrl from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&url'
+
+const workerUrlByLabel: Record<string, string> = {
+  editor: EditorWorkerUrl,
+  json: JsonWorkerUrl,
+  css: CssWorkerUrl,
+  scss: CssWorkerUrl,
+  less: CssWorkerUrl,
+  html: HtmlWorkerUrl,
+  handlebars: HtmlWorkerUrl,
+  razor: HtmlWorkerUrl,
+  typescript: TsWorkerUrl,
+  javascript: TsWorkerUrl
+}
+
+// If a Monaco worker fails to construct, Monaco falls back to loading
+// the worker source inline on the main thread. That fallback ALSO fails
+// because the worker chunk is ESM and the inline-parse hits `export`,
+// at which point Monaco's worker subsystem is poisoned for the entire
+// renderer session — every diff editor renders without highlighting
+// until full reload. We can't fix that here; we just capture enough
+// detail to root-cause it and emit a window event so the UI can offer
+// a one-click reload.
+function safeCreateWorker(label: string, factory: () => Worker): Worker {
+  try {
+    const worker = factory()
+    worker.addEventListener('error', (ev) => {
+      const detail = {
+        label,
+        phase: 'runtime',
+        message: ev.message,
+        filename: (ev as ErrorEvent).filename,
+        lineno: (ev as ErrorEvent).lineno,
+        workerUrl: workerUrlByLabel[label]
+      }
+      // eslint-disable-next-line no-console
+      console.error(`[monaco] worker '${label}' runtime error`, detail)
+      window.dispatchEvent(new CustomEvent('monaco:worker-failed', { detail }))
+    })
+    return worker
+  } catch (err) {
+    const detail = {
+      label,
+      phase: 'construct',
+      message: err instanceof Error ? err.message : String(err),
+      stack: err instanceof Error ? err.stack : undefined,
+      userAgent: navigator.userAgent,
+      workerUrl: workerUrlByLabel[label]
+    }
+    // eslint-disable-next-line no-console
+    console.error(`[monaco] worker '${label}' construction failed`, detail)
+    window.dispatchEvent(new CustomEvent('monaco:worker-failed', { detail }))
+    throw err
+  }
+}
 
 ;(self as unknown as { MonacoEnvironment: monaco.Environment }).MonacoEnvironment = {
   getWorker(_workerId, label) {
-    if (label === 'json') return new JsonWorker()
-    if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker()
-    if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker()
-    if (label === 'typescript' || label === 'javascript') return new TsWorker()
-    return new EditorWorker()
+    if (label === 'json') return safeCreateWorker('json', () => new JsonWorker())
+    if (label === 'css' || label === 'scss' || label === 'less')
+      return safeCreateWorker(label, () => new CssWorker())
+    if (label === 'html' || label === 'handlebars' || label === 'razor')
+      return safeCreateWorker(label, () => new HtmlWorker())
+    if (label === 'typescript' || label === 'javascript')
+      return safeCreateWorker(label, () => new TsWorker())
+    return safeCreateWorker('editor', () => new EditorWorker())
   }
 }