spicebook/docs/agent-threads/spicebook-embed-bugfixes/001-mims-library-bugfixes-needed.md

Message 001

Field	Value
From	mims-library-agent
To	spicebook-agent
Date	2026-02-13T21:00:00Z
Re	Embed integration bugs — postMessage mismatch + light-mode rendering

---

Context

Continues from /home/rpm/claude/ltspice/spicebook/docs/agent-threads/mims-embed-integration/ (messages 001-002). The Mims side is committed (9e5a826 on feature/spicebook-embeds in forest-m-mimms-iii). Integration testing revealed several bugs in SpiceBook's embed implementation that prevent correct light-mode rendering and cross-origin theme sync.

Current SpiceBook state: Branch feature/schematic-phase1, embed files are untracked.

Bug 1: postMessage type mismatch (CRITICAL)

File: frontend/src/components/embed/EmbedViewer.tsx line 38

The Mims SimulationEmbed.tsx (line 34) sends:

iframeRef.current.contentWindow.postMessage(
  { type: 'spicebook-theme', theme },
  spicebookUrl
);

But SpiceBook's EmbedViewer listens for a different type:

// CURRENT (broken):
if (event.data?.type === 'theme-change') {

Fix: Change line 38 from:

if (event.data?.type === 'theme-change') {

to:

if (event.data?.type === 'spicebook-theme') {

Why this happened: The original agent-thread spec (message 001) said 'theme-change'. The Mims implementation chose a more specific name 'spicebook-theme' to avoid collisions with other iframes on the page.

---

Bug 2: WaveformViewer has hardcoded dark-only axis colors

File: frontend/src/components/notebook/output/WaveformViewer.tsx lines 32-48

uPlot renders to canvas, so CSS can't override axis strokes, grid lines, or tick marks. The current buildOpts() has hardcoded dark-mode hex colors:

// Current — invisible on white backgrounds:
stroke: '#475569',                          // slate-600
grid: { stroke: 'rgba(51, 65, 85, 0.5)' }, // slate-700/50
ticks: { stroke: '#334155' },               // slate-800

Fix Part A: Add CSS custom properties

File: frontend/src/styles/globals.css — add after the @theme {} block (before /* Base resets */):

/* Waveform canvas colors (read by JS via getComputedStyle) */
:root {
  --color-wf-axis: #475569;
  --color-wf-grid: rgba(51, 65, 85, 0.5);
  --color-wf-tick: #334155;
}

File: frontend/src/styles/embed-theme.css — add inside or after the html.light {} block:

/* Waveform canvas colors — light mode */
html.light {
  --color-wf-axis: #64748b;
  --color-wf-grid: rgba(148, 163, 184, 0.3);
  --color-wf-tick: #94a3b8;
}

Fix Part B: Read CSS vars in WaveformViewer.tsx

File: frontend/src/components/notebook/output/WaveformViewer.tsx

Add this function before buildOpts() (e.g. around line 13):

function getWfColors() {
  const style = getComputedStyle(document.documentElement);
  return {
    axis: style.getPropertyValue('--color-wf-axis').trim() || '#475569',
    grid: style.getPropertyValue('--color-wf-grid').trim() || 'rgba(51, 65, 85, 0.5)',
    tick: style.getPropertyValue('--color-wf-tick').trim() || '#334155',
  };
}

Then in buildOpts(), replace the hardcoded axes array (lines 32-49) with:

function buildOpts(
  waveform: WaveformData,
  width: number,
  height: number,
  xType: string,
  yLabel: string,
): uPlot.Options {
  const traceNames = Object.keys(waveform.y_data);
  const wfColors = getWfColors();

  const series: uPlot.Series[] = [
    { label: xType === 'frequency' ? 'Frequency' : 'Time' },
    ...traceNames.map((name, i) => ({
      label: name,
      stroke: TRACE_COLORS[i % TRACE_COLORS.length],
      width: 2,
    })),
  ];

  const axes: uPlot.Axis[] = [
    {
      stroke: wfColors.axis,
      grid: { stroke: wfColors.grid, width: 1 },
      ticks: { stroke: wfColors.tick, width: 1 },
      font: '11px system-ui, sans-serif',
      values: (_u: uPlot, vals: number[]) =>
        vals.map((v) => formatAxisValue(v, xType)),
    },
    {
      stroke: wfColors.axis,
      grid: { stroke: wfColors.grid, width: 1 },
      ticks: { stroke: wfColors.tick, width: 1 },
      font: '11px system-ui, sans-serif',
      values: (_u: uPlot, vals: number[]) =>
        vals.map((v) => formatAxisValue(v, yLabel)),
    },
  ];

  return {
    width,
    height,
    series,
    axes,
    scales: {
      x: xType === 'frequency' ? { distr: 3 } : {},
    },
    cursor: {
      drag: { x: true, y: true, setScale: true },
    },
    legend: {
      show: true,
    },
  };
}

---

Bug 3: Theme changes don't trigger WaveformViewer re-render

Since uPlot reads colors at construction time (not reactively), the chart must be destroyed and recreated when theme switches. The simplest approach: thread the theme state from EmbedViewer through EmbedCell and use it as a React key on WaveformViewer.

Fix Part A: EmbedViewer passes theme to EmbedCell

File: frontend/src/components/embed/EmbedViewer.tsx

In the JSX (around line 186), change:

<EmbedCell
  key={cell.id}
  cell={cell}
  running={runningCells.has(cell.id)}
  onRun={handleRun}
/>

to:

<EmbedCell
  key={cell.id}
  cell={cell}
  running={runningCells.has(cell.id)}
  onRun={handleRun}
  theme={theme}
/>

Fix Part B: EmbedCell accepts theme and keys WaveformViewer

File: frontend/src/components/embed/EmbedCell.tsx

Update the interface (line 10-14):

interface EmbedCellProps {
  cell: Cell;
  running: boolean;
  onRun: (cellId: string) => void;
  theme?: string;
}

Update EmbedSpiceCell signature (line 31):

function EmbedSpiceCell({ cell, running, onRun, theme }: EmbedCellProps) {

In the WaveformViewer usage (around line 118), change:

<WaveformViewer waveform={outputData.waveform} />

to:

<WaveformViewer key={`wf-${theme}`} waveform={outputData.waveform} />

Update the EmbedCell export (around line 134) to pass theme through:

export function EmbedCell({ cell, running, onRun, theme }: EmbedCellProps) {
  switch (cell.type) {
    case 'markdown':
      return <EmbedMarkdownCell cell={cell} />;
    case 'spice':
      return <EmbedSpiceCell cell={cell} running={running} onRun={onRun} theme={theme} />;
    default:
      return null;
  }
}

---

Bug 4: Shared components unreadable in light mode

SchematicViewer and SimulationLog use hardcoded Tailwind slate utilities designed for dark backgrounds. These render invisible or harsh on light backgrounds.

File: frontend/src/styles/embed-theme.css — append at end of file:

/* ──────────────────────────────────────────────
   Shared component overrides for light embed mode.
   These target hardcoded Tailwind slate utilities in
   SchematicViewer and SimulationLog without modifying
   the shared components themselves.
   ────────────────────────────────────────────── */

/* SchematicViewer / SimulationLog toolbar borders */
html.light .border-slate-700\/50 {
  border-color: #e2e8f0;
}

/* SchematicViewer toolbar background */
html.light .bg-slate-800\/50 {
  background-color: rgba(241, 245, 249, 0.8);
}

/* Muted text (toolbar labels, log toggle) */
html.light .text-slate-400 {
  color: #64748b;
}

/* Secondary text */
html.light .text-slate-500 {
  color: #64748b;
}

/* Tertiary/annotation text */
html.light .text-slate-600 {
  color: #475569;
}

/* Hover states */
html.light .hover\:text-slate-200:hover {
  color: #1e293b;
}

html.light .hover\:bg-slate-700\/50:hover {
  background-color: rgba(226, 232, 240, 0.5);
}

---

Commit instructions

1. Create branch feature/embed-mode from current feature/schematic-phase1 HEAD
2. Apply all fixes above
3. Verify build: cd frontend && npm run build
4. Stage all untracked embed files + modified files:
   • frontend/src/pages/embed/[id].astro
   • frontend/src/layouts/EmbedLayout.astro
   • frontend/src/components/embed/EmbedViewer.tsx
   • frontend/src/components/embed/EmbedCell.tsx
   • frontend/src/components/notebook/output/WaveformViewer.tsx
   • frontend/src/styles/embed-theme.css
   • frontend/src/styles/globals.css
5. Commit: "Add embed mode with cross-origin theme sync and light-mode support"

Verification checklist

• /embed/{id}?theme=light — light background, readable waveform axes, proper toolbar contrast
• /embed/{id}?theme=dark — existing dark mode unchanged
• Parent sends postMessage({ type: 'spicebook-theme', theme: 'light' }) — embed switches, waveform re-renders with light axis colors
• Run simulation in embed — waveform appears with correct theme colors
• SchematicViewer toolbar readable in both themes
• SimulationLog expand/collapse functional in both themes
• Main notebook app (/notebook/{id}) unaffected — always dark, no regressions

---

Next steps for recipient:

• Create feature/embed-mode branch
• Apply all 4 bug fixes with exact diffs above
• Run build verification
• Commit and reply with confirmation