@weasel-js/labkit 1.0.3 → 1.1.0

package/src/{workspace → trial}/DefaultSidebar.tsx

@@ -1,13 +1,13 @@
 import { ControlPanel } from '../controls/ControlPanel';
 import { Sidebar } from '../primitives/Sidebar';
-import type { WorkspaceSidebarContext } from './slotTypes';
+import type { TrialSidebarContext } from './slotTypes';
 
 /** Props for `<DefaultSidebar>`. */
 export interface DefaultSidebarProps {
-  ctx: WorkspaceSidebarContext;
+  ctx: TrialSidebarContext;
 }
 
-/** The sidebar a workspace renders when no `sidebar` slot is supplied: a
+/** The sidebar a trial renders when no `sidebar` slot is supplied: a
  *  control panel over the instrument's config schema. */
 export function DefaultSidebar({ ctx }: DefaultSidebarProps) {
   if (ctx.configFields.length === 0) {

package/src/{workspace → trial}/DefaultStatusBar.tsx

@@ -1,18 +1,19 @@
 import { StatusBar } from '../primitives/StatusBar';
-import type { WorkspaceStatusBarContext } from './slotTypes';
+import { formatZoom } from '../ui/format';
+import type { TrialStatusBarContext } from './slotTypes';
 
 /** Props for `<DefaultStatusBar>`. */
 export interface DefaultStatusBarProps {
-  ctx: WorkspaceStatusBarContext;
+  ctx: TrialStatusBarContext;
 }
 
-/** The status bar a workspace renders when no `statusBar` slot is supplied:
+/** The status bar a trial renders when no `statusBar` slot is supplied:
  *  the instrument's name and the current zoom. */
 export function DefaultStatusBar({ ctx }: DefaultStatusBarProps) {
   return (
     <StatusBar>
       <StatusBar.Section>{ctx.instrumentName}</StatusBar.Section>
-      <StatusBar.Section>{Math.round(ctx.zoom * 100)}%</StatusBar.Section>
+      <StatusBar.Section>{formatZoom(ctx.zoom)}</StatusBar.Section>
     </StatusBar>
   );
 }

package/src/{workspace → trial}/DefaultToolbar.tsx

@@ -1,12 +1,13 @@
 import { Toolbar } from '../primitives/Toolbar';
-import type { WorkspaceToolbarContext } from './slotTypes';
+import { formatZoom } from '../ui/format';
+import type { TrialToolbarContext } from './slotTypes';
 
 /** Props for `<DefaultToolbar>`. */
 export interface DefaultToolbarProps {
-  ctx: WorkspaceToolbarContext;
+  ctx: TrialToolbarContext;
 }
 
-/** The toolbar a workspace renders when no `toolbar` slot is supplied. Only
+/** The toolbar a trial renders when no `toolbar` slot is supplied. Only
  *  shows the controls the instrument's declared capabilities support. */
 export function DefaultToolbar({ ctx }: DefaultToolbarProps) {
   return (
@@ -32,7 +33,7 @@ export function DefaultToolbar({ ctx }: DefaultToolbarProps) {
           <Toolbar.Button onClick={ctx.zoomOut} title="Zoom out">
             −
           </Toolbar.Button>
-          <span className="lk-toolbar__zoom-label">{Math.round(ctx.zoom * 100)}%</span>
+          <span className="lk-toolbar__zoom-label">{formatZoom(ctx.zoom)}</span>
           <Toolbar.Button onClick={ctx.zoomIn} title="Zoom in">
             +
           </Toolbar.Button>
@@ -73,16 +74,16 @@ export function DefaultToolbar({ ctx }: DefaultToolbarProps) {
 
       <Toolbar.Spacer />
 
-      <Toolbar.Button onClick={ctx.clone} title="Clone workspace">
+      <Toolbar.Button onClick={ctx.clone} title="Clone trial">
         Clone
       </Toolbar.Button>
-      <Toolbar.Button onClick={ctx.reset} title="Reset workspace">
+      <Toolbar.Button onClick={ctx.reset} title="Reset trial">
         Reset
       </Toolbar.Button>
       <Toolbar.Button
         onClick={ctx.close}
-        disabled={ctx.isLastWorkspace}
-        title={ctx.isLastWorkspace ? 'Cannot close the last workspace' : 'Close workspace'}
+        disabled={ctx.isLastTrial}
+        title={ctx.isLastTrial ? 'Cannot close the last trial' : 'Close trial'}
       >
         Close
       </Toolbar.Button>

package/src/trial/Trial.canvas.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { defineInstrument } from '../instrument/defineInstrument';
+import { Lab } from '../lab/Lab';
+
+interface St {
+  n: number;
+}
+
+const ctxSpies = {
+  save: vi.fn(),
+  restore: vi.fn(),
+  setTransform: vi.fn(),
+  clearRect: vi.fn(),
+  translate: vi.fn(),
+  scale: vi.fn(),
+};
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => ctxSpies,
+  ) as unknown as HTMLCanvasElement['getContext'];
+});
+
+function makeInstrument(draw: (ctx: CanvasRenderingContext2D, args: unknown) => void) {
+  return defineInstrument<St, Record<string, never>>({
+    name: 'Probe',
+    defaultConfig: () => ({}),
+    initialState: () => ({ n: 7 }),
+    render: ({ state }) => <output data-testid="readout">n = {state.n}</output>,
+    canvas: {
+      initialView: { zoom: 2, pan: { x: 30, y: 40 } },
+      layers: [{ id: 'main', draw }],
+    },
+  });
+}
+
+describe('an instrument that draws', () => {
+  it('still renders its own DOM, as an overlay over the canvas', () => {
+    const { container } = render(
+      <Lab instruments={[makeInstrument(() => undefined)]} defaultInstrument="Probe" />,
+    );
+    expect(screen.getByTestId('readout')).toHaveTextContent('n = 7');
+    expect(container.querySelector('.lk-canvas-stack__overlay')).toContainElement(
+      screen.getByTestId('readout'),
+    );
+    expect(container.querySelectorAll('canvas').length).toBeGreaterThan(0);
+  });
+
+  it('draws with the camera applied, so world geometry lands where the view says', async () => {
+    const draw = vi.fn();
+    render(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
+    await new Promise((r) => requestAnimationFrame(() => r(null)));
+
+    expect(draw).toHaveBeenCalled();
+    expect(ctxSpies.translate).toHaveBeenCalledWith(30, 40);
+    expect(ctxSpies.scale).toHaveBeenCalledWith(2, 2);
+  });
+
+  it('passes zoom in the args so a layer can keep line widths unscaled', async () => {
+    const draw = vi.fn();
+    render(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
+    await new Promise((r) => requestAnimationFrame(() => r(null)));
+
+    expect(draw).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ zoom: 2, state: { n: 7 } }),
+    );
+  });
+});
+
+describe('LabProps.instruments', () => {
+  it('accepts a typed instrument with no cast', () => {
+    // The assignment is the assertion: this file fails to compile if
+    // `defineInstrument<St, ...>`'s result stops being assignable.
+    const typed = makeInstrument(() => undefined);
+    render(<Lab instruments={[typed]} defaultInstrument="Probe" />);
+    expect(screen.getByTestId('readout')).toBeInTheDocument();
+  });
+});

package/src/{workspace/Workspace.less → trial/Trial.less}

@@ -1,4 +1,4 @@
-.lk-workspace {
+.lk-trial {
   display: flex;
   flex-direction: column;
   height: 100%;

package/src/{workspace/Workspace.stories.tsx → trial/Trial.stories.tsx}

@@ -4,8 +4,8 @@ import { LabContext, type LabContextValue } from '../lab/LabContext';
 import { noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
 import { createLabStore } from '../state/store';
-import type { WorkspaceRecord } from '../state/types';
-import { WorkspaceChrome } from './WorkspaceChrome';
+import type { TrialRecord } from '../state/types';
+import { TrialChrome } from './TrialChrome';
 
 const noop = () => {};
 
@@ -16,7 +16,7 @@ const stub: Instrument = {
   render: () => <div className="lk-stub-display">stub experiment area</div>,
 };
 
-const record: WorkspaceRecord = {
+const record: TrialRecord = {
   id: 'ws-demo',
   instrumentName: 'Stub',
   config: {},
@@ -29,11 +29,12 @@ function Harness() {
   const store = createLabStore({ storageKey: 'sb', storage: noneAdapter });
   const lab: LabContextValue = {
     instruments: [stub],
-    workspaces: [record],
-    addWorkspace: noop,
-    cloneWorkspace: noop,
-    closeWorkspace: noop,
-    resetWorkspace: noop,
+    trials: [record],
+    addTrial: noop,
+    cloneTrial: noop,
+    closeTrial: noop,
+    resetTrial: noop,
+    reorderTrials: noop,
     savedSnapshots: [],
     saveSnapshot: noop,
     loadSnapshot: noop,
@@ -45,21 +46,16 @@ function Harness() {
     <LabStoreContext.Provider value={{ store }}>
       <LabContext.Provider value={lab}>
         <div style={{ height: '500px' }}>
-          <WorkspaceChrome
-            workspaceId="ws-demo"
-            record={record}
-            instrument={stub}
-            isLastWorkspace={true}
-          >
+          <TrialChrome trialId="ws-demo" record={record} instrument={stub} isLastTrial={true}>
             {stub.render({
               state: {},
               config: {},
               setState: () => {},
               setConfig: () => {},
-              workspace: { id: 'ws-demo', zoom: 1, setZoom: () => {} },
+              trial: { id: 'ws-demo', zoom: 1, setZoom: () => {} },
               emit: () => {},
             })}
-          </WorkspaceChrome>
+          </TrialChrome>
         </div>
       </LabContext.Provider>
     </LabStoreContext.Provider>
@@ -67,7 +63,7 @@ function Harness() {
 }
 
 const meta: Meta<typeof Harness> = {
-  title: 'labkit/Workspace/Workspace',
+  title: 'labkit/Trial/Trial',
   component: Harness,
   parameters: { layout: 'fullscreen' },
 };

package/src/{workspace/Workspace.test.tsx → trial/Trial.test.tsx}

@@ -6,14 +6,14 @@ import { Lab } from '../lab/Lab';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
 import { LabStoreContext } from '../state/context';
 import { createLabStore } from '../state/store';
-import type { WorkspaceRecord } from '../state/types';
+import type { TrialRecord } from '../state/types';
 import { DefaultToolbar } from './DefaultToolbar';
-import type { WorkspaceToolbarContext } from './slotTypes';
-import { WorkspaceChrome } from './WorkspaceChrome';
+import type { TrialToolbarContext } from './slotTypes';
+import { TrialChrome } from './TrialChrome';
 
-function makeCtx(overrides: Partial<WorkspaceToolbarContext> = {}): WorkspaceToolbarContext {
+function makeCtx(overrides: Partial<TrialToolbarContext> = {}): TrialToolbarContext {
   return {
-    workspaceId: 'ws-1',
+    trialId: 'ws-1',
     instrumentName: 'Stub',
     hasUndo: false,
     canUndo: false,
@@ -32,7 +32,7 @@ function makeCtx(overrides: Partial<WorkspaceToolbarContext> = {}): WorkspaceToo
     clone: vi.fn(),
     reset: vi.fn(),
     close: vi.fn(),
-    isLastWorkspace: false,
+    isLastTrial: false,
     ...overrides,
   };
 }
@@ -43,8 +43,8 @@ describe('<DefaultToolbar>', () => {
     expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
   });
 
-  it('disables close when isLastWorkspace is true', () => {
-    render(<DefaultToolbar ctx={makeCtx({ isLastWorkspace: true })} />);
+  it('disables close when isLastTrial is true', () => {
+    render(<DefaultToolbar ctx={makeCtx({ isLastTrial: true })} />);
     expect(screen.getByRole('button', { name: /close/i })).toBeDisabled();
   });
 
@@ -79,7 +79,7 @@ describe('<DefaultToolbar>', () => {
         {
           id: 's1',
           name: 'First',
-          workspaceId: 'ws-1',
+          trialId: 'ws-1',
           instrumentName: 'Stub',
           config: {},
           state: {},
@@ -99,7 +99,7 @@ const stubInstrument: Instrument = {
   render: () => null,
 };
 
-const stubRecord: WorkspaceRecord = {
+const stubRecord: TrialRecord = {
   id: 'ws-1',
   instrumentName: 'Stub',
   config: {},
@@ -108,7 +108,7 @@ const stubRecord: WorkspaceRecord = {
   undoStack: { past: [], future: [] },
 };
 
-type ChromeProps = Parameters<typeof WorkspaceChrome>[0];
+type ChromeProps = Parameters<typeof TrialChrome>[0];
 
 function ChromeHarness({
   children,
@@ -121,11 +121,12 @@ function ChromeHarness({
   });
   const labCtx: LabContextValue = {
     instruments: [stubInstrument],
-    workspaces: [stubRecord],
-    addWorkspace: vi.fn(),
-    cloneWorkspace: vi.fn(),
-    closeWorkspace: vi.fn(),
-    resetWorkspace: vi.fn(),
+    trials: [stubRecord],
+    addTrial: vi.fn(),
+    cloneTrial: vi.fn(),
+    closeTrial: vi.fn(),
+    resetTrial: vi.fn(),
+    reorderTrials: vi.fn(),
     savedSnapshots: [],
     saveSnapshot: vi.fn(),
     loadSnapshot: vi.fn(),
@@ -137,21 +138,21 @@ function ChromeHarness({
   return (
     <LabStoreContext.Provider value={{ store }}>
       <LabContext.Provider value={labCtx}>
-        <WorkspaceChrome
-          workspaceId="ws-1"
+        <TrialChrome
+          trialId="ws-1"
           record={stubRecord}
           instrument={stubInstrument}
-          isLastWorkspace={false}
+          isLastTrial={false}
           {...props}
         >
           {children ?? <div data-testid="content">content</div>}
-        </WorkspaceChrome>
+        </TrialChrome>
       </LabContext.Provider>
     </LabStoreContext.Provider>
   );
 }
 
-describe('<WorkspaceChrome>', () => {
+describe('<TrialChrome>', () => {
   it('renders children in the content area', () => {
     render(<ChromeHarness />);
     expect(screen.getByTestId('content')).toBeInTheDocument();
@@ -171,16 +172,16 @@ describe('<WorkspaceChrome>', () => {
   it('Cmd+S triggers saveSnapshot', () => {
     const saveSnapshot = vi.fn();
     render(<ChromeHarness labOverrides={{ saveSnapshot }} />);
-    const region = screen.getByRole('region', { name: /workspace/i });
+    const region = screen.getByRole('region', { name: /trial/i });
     fireEvent.keyDown(region, { key: 's', metaKey: true });
     expect(saveSnapshot).toHaveBeenCalledWith('ws-1', undefined);
   });
 });
 
-describe('<Lab> + WorkspaceChrome integration', () => {
-  it('Lab provides context for nested WorkspaceChrome', () => {
+describe('<Lab> + TrialChrome integration', () => {
+  it('Lab provides context for nested TrialChrome', () => {
     render(<Lab instruments={[stubInstrument]} defaultInstrument="Stub" />);
-    // Lab seeds a workspace; no chrome rendered without children — sanity check Lab mounts.
+    // Lab seeds a trial; no chrome rendered without children — sanity check Lab mounts.
     expect(document.querySelector('.lk-lab')).toBeTruthy();
   });
 });

package/src/{workspace/Workspace.tsx → trial/Trial.tsx}

@@ -15,58 +15,56 @@ import { useLabContext } from '../lab/LabContext';
 import { LayerList } from '../layers/LayerList';
 import { LabStoreContext } from '../state/context';
 import type { LabStore } from '../state/store';
-import type { WorkspaceRecord } from '../state/types';
+import type { TrialRecord } from '../state/types';
 import { createEventBus, type EventBus } from '../undo/eventBus';
 import { pushSnapshot, redo as undoRedo, undo as undoUndo } from '../undo/undoStack';
-import type { UndoBindings } from './WorkspaceChrome';
-import { WorkspaceChrome } from './WorkspaceChrome';
+import type { UndoBindings } from './TrialChrome';
+import { TrialChrome } from './TrialChrome';
 
-/** Props for `<Workspace>`. */
-export interface WorkspaceProps {
+/** Props for `<Trial>`. */
+export interface TrialProps {
   id: string;
 }
 
-/** Renders one workspace from the lab store: looks up its record and
- *  instrument, and mounts the instrument inside the workspace chrome. */
-export function Workspace({ id }: WorkspaceProps) {
+/** Renders one trial from the lab store: looks up its record and
+ *  instrument, and mounts the instrument inside the trial chrome. */
+export function Trial({ id }: TrialProps) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error('[labkit] <Workspace> requires <LabStoreProvider>');
-  const record = useStore(storeCtx.store, (s) => s.workspaces.find((w) => w.id === id));
+  if (!storeCtx) throw new Error('[labkit] <Trial> requires <LabStoreProvider>');
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w) => w.id === id));
   if (!record) {
-    return <div className="lk-workspace lk-workspace--unknown">Workspace not found: {id}</div>;
+    return <div className="lk-trial lk-trial--unknown">Trial not found: {id}</div>;
   }
   const instrument = lab.instruments.find((i) => i.name === record.instrumentName);
   if (!instrument) {
     return (
-      <div className="lk-workspace lk-workspace--unknown">
-        Unknown instrument: {record.instrumentName}
-      </div>
+      <div className="lk-trial lk-trial--unknown">Unknown instrument: {record.instrumentName}</div>
     );
   }
   return (
-    <WorkspaceRuntime
+    <TrialRuntime
       record={record}
       instrument={instrument}
       store={storeCtx.store}
-      isLast={lab.workspaces.length <= 1}
+      isLast={lab.trials.length <= 1}
     />
   );
 }
 
-interface WorkspaceRuntimeProps {
-  record: WorkspaceRecord;
+interface TrialRuntimeProps {
+  record: TrialRecord;
   instrument: Instrument;
   store: LabStore;
   isLast: boolean;
 }
 
-function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntimeProps) {
+function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps) {
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
-  const updateWorkspaceState = useStore(store, (s) => s.updateWorkspaceState);
-  const updateWorkspaceConfig = useStore(store, (s) => s.updateWorkspaceConfig);
-  const updateWorkspaceView = useStore(store, (s) => s.updateWorkspaceView);
-  const updateWorkspaceUndoStack = useStore(store, (s) => s.updateWorkspaceUndoStack);
+  const updateTrialState = useStore(store, (s) => s.updateTrialState);
+  const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
+  const updateTrialView = useStore(store, (s) => s.updateTrialView);
+  const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
 
   const busRef = useRef<EventBus | null>(null);
   if (busRef.current === null) busRef.current = createEventBus();
@@ -81,34 +79,34 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
 
   const snapshotIfNeeded = (event: string): void => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().workspaces.find((w) => w.id === record.id);
+    const current = store.getState().trials.find((w) => w.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
-    updateWorkspaceUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
+    updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
 
-  const setView = (v: ViewTransform): void => updateWorkspaceView(record.id, v);
+  const setView = (v: ViewTransform): void => updateTrialView(record.id, v);
 
   const renderCtx: RenderContext<unknown, unknown> = {
     state: record.state,
     config: record.config,
     setState: (next) => {
       snapshotIfNeeded('state.change');
-      updateWorkspaceState(record.id, next);
+      updateTrialState(record.id, next);
       bus.emit('state.change');
     },
     setConfig: (key, value) => {
       const evt = `config.change:${String(key)}`;
       snapshotIfNeeded('config.change');
       snapshotIfNeeded(evt);
-      updateWorkspaceConfig(record.id, key as never, value as never);
+      updateTrialConfig(record.id, key as never, value as never);
       bus.emit('config.change');
       bus.emit(evt);
     },
-    workspace: {
+    trial: {
       id: record.id,
       zoom: record.view.zoom,
-      setZoom: (z) => updateWorkspaceView(record.id, { ...record.view, zoom: z }),
+      setZoom: (z) => updateTrialView(record.id, { ...record.view, zoom: z }),
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -123,14 +121,14 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
         undo: () => {
           const result = undoUndo(record.undoStack, structuredClone(record.state));
           if (!result) return;
-          updateWorkspaceState(record.id, result.snapshot as never);
-          updateWorkspaceUndoStack(record.id, result.stack);
+          updateTrialState(record.id, result.snapshot as never);
+          updateTrialUndoStack(record.id, result.stack);
         },
         redo: () => {
           const result = undoRedo(record.undoStack, structuredClone(record.state));
           if (!result) return;
-          updateWorkspaceState(record.id, result.snapshot as never);
-          updateWorkspaceUndoStack(record.id, result.stack);
+          updateTrialState(record.id, result.snapshot as never);
+          updateTrialUndoStack(record.id, result.stack);
         },
       }
     : undefined;
@@ -144,8 +142,13 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
-      render: (ctx, view) =>
-        layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom }),
+      render: (ctx, view) => {
+        // Camera applied here, so a layer draws in world coordinates. `zoom`
+        // stays in the args for line widths, which must not scale with it.
+        ctx.translate(view.pan.x, view.pan.y);
+        ctx.scale(view.zoom, view.zoom);
+        layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom });
+      },
     }));
   }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
 
@@ -162,7 +165,7 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
     config: record.config,
     setState: (next) => {
       snapshotIfNeeded('canvas.itemAdded');
-      updateWorkspaceState(record.id, next as never);
+      updateTrialState(record.id, next as never);
     },
     emit: (evt) => {
       snapshotIfNeeded(evt);
@@ -206,10 +209,12 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
     body = (
       <div
         ref={canvasContainerRef}
-        className="lk-workspace__canvas-host"
+        className="lk-trial__canvas-host"
         style={{ width: '100%', height: '100%', position: 'relative' }}
       >
-        <CanvasStack layers={layersWithFeedback} view={record.view} onViewChange={setView} />
+        <CanvasStack layers={layersWithFeedback} view={record.view} onViewChange={setView}>
+          {instrument.render(renderCtx)}
+        </CanvasStack>
         <DragOverlay drag={dragDropResult.drag} />
       </div>
     );
@@ -239,11 +244,11 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
     ) : null;
 
   return (
-    <WorkspaceChrome
-      workspaceId={record.id}
+    <TrialChrome
+      trialId={record.id}
       record={record}
       instrument={instrument}
-      isLastWorkspace={isLast}
+      isLastTrial={isLast}
       undoBindings={undoBindings}
       sidebarExtras={
         <>
@@ -253,6 +258,6 @@ function WorkspaceRuntime({ record, instrument, store, isLast }: WorkspaceRuntim
       }
     >
       {body}
-    </WorkspaceChrome>
+    </TrialChrome>
   );
 }