@weasel-js/labkit 1.0.4 → 1.2.0

package/src/job/useJob.test.tsx

@@ -0,0 +1,210 @@
+import { act, render, waitFor } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { JobCapability, JobEvent, JobHandle } from './types';
+import { useJob } from './useJob';
+
+interface State {
+  items: number[];
+}
+interface Config {
+  n: number;
+}
+
+/** Yields 0..n-1, pausing between each so a test can cancel mid-run. */
+async function* counter(
+  n: number,
+  signal: AbortSignal,
+  failAt?: number,
+): AsyncGenerator<JobEvent<number>> {
+  yield { kind: 'total', total: n };
+  for (let i = 0; i < n; i++) {
+    await new Promise((r) => setTimeout(r, 2));
+    if (signal.aborted) return;
+    if (i === failAt) {
+      yield { kind: 'failed', index: i, error: 'frame died' };
+      continue;
+    }
+    yield { kind: 'item', item: i };
+  }
+}
+
+const capability = (failAt?: number): JobCapability<State, Config, number> => ({
+  run: ({ config, signal }) => counter(config.n, signal, failAt),
+  onItem: (item, state) => ({ items: [...state.items, item] }),
+});
+
+interface HarnessProps {
+  capability: JobCapability<State, Config, number>;
+  config: Config;
+  onHandle: (h: JobHandle, s: State) => void;
+}
+
+function Harness({ capability: cap, config, onHandle }: HarnessProps) {
+  const [state, setState] = useState<State>({ items: [] });
+  const job = useJob({ capability: cap, config, state, setState });
+  onHandle(job, state);
+  return null;
+}
+
+describe('useJob', () => {
+  it('folds each item into state and counts progress', async () => {
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    render(
+      <Harness
+        capability={capability()}
+        config={{ n: 3 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    act(() => seen.handle?.start());
+    await waitFor(() => expect(seen.handle?.status).toBe('done'));
+    expect(seen.state.items).toEqual([0, 1, 2]);
+    expect(seen.handle?.done).toBe(3);
+    expect(seen.handle?.total).toBe(3);
+  });
+
+  it('counts a failed item without ending the run', async () => {
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    render(
+      <Harness
+        capability={capability(1)}
+        config={{ n: 3 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    act(() => seen.handle?.start());
+    await waitFor(() => expect(seen.handle?.status).toBe('done'));
+    expect(seen.state.items).toEqual([0, 2]);
+    expect(seen.handle?.failures).toEqual([{ index: 1, error: 'frame died' }]);
+    expect(seen.handle?.done).toBe(2);
+  });
+
+  it('stops folding results once cancelled', async () => {
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    render(
+      <Harness
+        capability={capability()}
+        config={{ n: 50 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    act(() => seen.handle?.start());
+    await waitFor(() => expect(seen.handle?.status).toBe('running'));
+    act(() => seen.handle?.cancel());
+    const atCancel = seen.state.items.length;
+    await new Promise((r) => setTimeout(r, 30));
+    expect(seen.state.items.length).toBe(atCancel);
+    expect(seen.handle?.status).toBe('idle');
+  });
+
+  it('discards results from a run its key superseded', async () => {
+    const withKey: JobCapability<State, Config, number> = {
+      ...capability(),
+      key: (config) => [config.n],
+      auto: true,
+    };
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    const { rerender } = render(
+      <Harness
+        capability={withKey}
+        config={{ n: 40 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    await waitFor(() => expect(seen.handle?.status).toBe('running'));
+
+    rerender(
+      <Harness
+        capability={withKey}
+        config={{ n: 2 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    await waitFor(() => expect(seen.handle?.status).toBe('done'));
+
+    // The superseded 40-item run cannot have contributed: the winner yields two.
+    expect(seen.state.items).toEqual([0, 1]);
+  });
+
+  it('aborts on unmount', async () => {
+    const aborted = vi.fn();
+    const watching: JobCapability<State, Config, number> = {
+      run: ({ signal }) => {
+        signal.addEventListener('abort', aborted);
+        return counter(50, signal);
+      },
+      onItem: (item, state) => ({ items: [...state.items, item] }),
+    };
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    const { unmount } = render(
+      <Harness
+        capability={watching}
+        config={{ n: 50 }}
+        onHandle={(h) => {
+          seen.handle = h;
+        }}
+      />,
+    );
+    act(() => seen.handle?.start());
+    await waitFor(() => expect(seen.handle?.status).toBe('running'));
+    unmount();
+    expect(aborted).toHaveBeenCalled();
+  });
+
+  it('reports a thrown error without losing the items already folded', async () => {
+    const throwing: JobCapability<State, Config, number> = {
+      run: async function* () {
+        yield { kind: 'item', item: 7 };
+        await new Promise((r) => setTimeout(r, 1));
+        throw new Error('the baker died');
+      },
+      onItem: (item, state) => ({ items: [...state.items, item] }),
+    };
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    render(
+      <Harness
+        capability={throwing}
+        config={{ n: 1 }}
+        onHandle={(h, s) => {
+          seen.handle = h;
+          seen.state = s;
+        }}
+      />,
+    );
+    act(() => seen.handle?.start());
+    await waitFor(() => expect(seen.handle?.status).toBe('error'));
+    expect(seen.handle?.error).toMatch(/the baker died/);
+    expect(seen.state.items).toEqual([7]);
+  });
+
+  it('does not start on its own without auto', async () => {
+    const seen: { handle: JobHandle | null; state: State } = { handle: null, state: { items: [] } };
+    render(
+      <Harness
+        capability={{ ...capability(), key: (c) => [c.n] }}
+        config={{ n: 3 }}
+        onHandle={(h) => {
+          seen.handle = h;
+        }}
+      />,
+    );
+    await new Promise((r) => setTimeout(r, 20));
+    expect(seen.handle?.status).toBe('idle');
+  });
+});

package/src/job/useJob.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { JobCapability, JobFailure, JobHandle, JobStatus } from './types';
+
+export interface UseJobOptions<TS, TC, TItem> {
+  capability: JobCapability<TS, TC, TItem>;
+  config: TC;
+  state: TS;
+  setState: (next: TS | ((prev: TS) => TS)) => void;
+}
+
+interface Progress {
+  status: JobStatus;
+  done: number;
+  total: number | null;
+  failures: JobFailure[];
+  error: string | null;
+}
+
+const IDLE: Progress = { status: 'idle', done: 0, total: null, failures: [], error: null };
+
+function sameKey(a: readonly unknown[] | null, b: readonly unknown[] | null): boolean {
+  if (a === null || b === null) return a === b;
+  return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
+}
+
+export function useJob<TS, TC, TItem>({
+  capability,
+  config,
+  state,
+  setState,
+}: UseJobOptions<TS, TC, TItem>): JobHandle {
+  const [progress, setProgress] = useState<Progress>(IDLE);
+
+  // A run is identified by a token. Every result checks its token before touching
+  // state, so a superseded run finishes harmlessly instead of racing the winner.
+  const token = useRef(0);
+  const abort = useRef<AbortController | null>(null);
+
+  // Read through refs: `run` is called once per run and must see the values as of
+  // that moment rather than re-subscribing on every render.
+  const capRef = useRef(capability);
+  capRef.current = capability;
+  const configRef = useRef(config);
+  configRef.current = config;
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const setStateRef = useRef(setState);
+  setStateRef.current = setState;
+
+  const cancel = useCallback(() => {
+    token.current += 1;
+    abort.current?.abort();
+    abort.current = null;
+    setProgress(IDLE);
+  }, []);
+
+  const start = useCallback(() => {
+    token.current += 1;
+    const mine = token.current;
+    abort.current?.abort();
+    const controller = new AbortController();
+    abort.current = controller;
+    setProgress({ ...IDLE, status: 'running' });
+
+    void (async () => {
+      try {
+        const iterable = capRef.current.run({
+          config: configRef.current,
+          state: stateRef.current,
+          signal: controller.signal,
+        });
+        for await (const event of iterable) {
+          if (token.current !== mine) return;
+          if (event.kind === 'total') {
+            setProgress((p) => ({ ...p, total: event.total }));
+          } else if (event.kind === 'failed') {
+            setProgress((p) => ({
+              ...p,
+              failures: [...p.failures, { index: event.index, error: event.error }],
+            }));
+          } else {
+            const fold = capRef.current.onItem;
+            const item = event.item;
+            setStateRef.current((prev) => fold(item, prev));
+            setProgress((p) => ({ ...p, done: p.done + 1 }));
+          }
+        }
+        if (token.current !== mine) return;
+        setProgress((p) => ({ ...p, status: 'done' }));
+      } catch (err) {
+        if (token.current !== mine) return;
+        setProgress((p) => ({
+          ...p,
+          status: 'error',
+          error: err instanceof Error ? err.message : String(err),
+        }));
+      }
+    })();
+  }, []);
+
+  // Re-run when the declared key changes. `auto` covers the first mount too.
+  const lastKey = useRef<readonly unknown[] | null>(null);
+  const started = useRef(false);
+  const auto = capability.auto === true;
+  const key = capability.key ? capability.key(config, state) : null;
+  // `key` is compared element-wise inside; depending on the array identity here
+  // would restart the job on every render.
+  useEffect(() => {
+    if (!auto) return;
+    if (started.current && sameKey(lastKey.current, key)) return;
+    lastKey.current = key;
+    started.current = true;
+    start();
+  }, [auto, key, start]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(
+    () => () => {
+      token.current += 1;
+      abort.current?.abort();
+      abort.current = null;
+    },
+    [],
+  );
+
+  return {
+    status: progress.status,
+    done: progress.done,
+    total: progress.total,
+    failures: progress.failures,
+    error: progress.error,
+    start,
+    cancel,
+  };
+}

package/src/lab/Lab.less

@@ -1,3 +1,19 @@
+// `height: 100%` resolves against the containing block, so the lab needs an
+// unbroken chain of sized ancestors — and a host that supplies the height but
+// not the margin reset gets a page 16px taller than the viewport, which reads
+// as a stuck canvas rather than as overflow. Scoped with `:has` so a page that
+// mounts no lab is untouched, and stopping at the lab's own parent so an
+// embedded lab cannot resize its host's layout.
+html:has(.lk-lab),
+body:has(.lk-lab) {
+  margin: 0;
+  height: 100%;
+}
+
+body:has(.lk-lab) > :has(> .lk-lab) {
+  height: 100%;
+}
+
 .lk-lab {
   height: 100%;
 }

package/src/lab/Lab.stories.tsx

@@ -31,21 +31,20 @@ export const Default: Story = {
   },
 };
 
-function AddSecondWorkspace() {
+function AddSecondTrial() {
   const ctx = useLabContext();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: run once on mount
   useEffect(() => {
-    if (ctx.workspaces.length < 2) ctx.addWorkspace('Stub');
-  }, []);
+    if (ctx.trials.length < 2) ctx.addTrial('Stub');
+  }, [ctx]);
   return null;
 }
 
-export const TwoWorkspaces: Story = {
+export const TwoTrials: Story = {
   args: {
     instruments: [StubInstrument],
     defaultInstrument: 'Stub',
-    title: 'Two Workspaces',
+    title: 'Two Trials',
     storage: null,
-    children: <AddSecondWorkspace />,
+    children: <AddSecondTrial />,
   },
 };

package/src/lab/Lab.test.tsx

@@ -41,50 +41,50 @@ function mountLab(props: Partial<Parameters<typeof Lab>[0]> = {}) {
 }
 
 describe('<Lab>', () => {
-  it('renders one workspace by default', () => {
+  it('renders one trial by default', () => {
     mountLab();
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('addWorkspace adds a second workspace', () => {
+  it('addTrial adds a second trial', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('Stub'));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(2);
+    act(() => labRef?.addTrial('Stub'));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(2);
   });
 
-  it('closeWorkspace removes one when more than one exists', () => {
+  it('closeTrial removes one when more than one exists', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('Stub'));
-    const first = labRef?.workspaces[0];
-    act(() => labRef?.closeWorkspace(first?.id ?? ''));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    act(() => labRef?.addTrial('Stub'));
+    const first = labRef?.trials[0];
+    act(() => labRef?.closeTrial(first?.id ?? ''));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('closeWorkspace is a no-op on the last workspace', () => {
+  it('closeTrial is a no-op on the last trial', () => {
     mountLab();
-    const only = labRef?.workspaces[0];
-    act(() => labRef?.closeWorkspace(only?.id ?? ''));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    const only = labRef?.trials[0];
+    act(() => labRef?.closeTrial(only?.id ?? ''));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('cloneWorkspace inserts immediately after source', () => {
+  it('cloneTrial inserts immediately after source', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('StubB'));
-    const ws0 = labRef?.workspaces[0];
-    const ws1 = labRef?.workspaces[1];
-    act(() => labRef?.cloneWorkspace(ws0?.id ?? ''));
-    const ids = labRef?.workspaces.map((w) => w.id) ?? [];
+    act(() => labRef?.addTrial('StubB'));
+    const ws0 = labRef?.trials[0];
+    const ws1 = labRef?.trials[1];
+    act(() => labRef?.cloneTrial(ws0?.id ?? ''));
+    const ids = labRef?.trials.map((w) => w.id) ?? [];
     expect(ids).toHaveLength(3);
     expect(ids[0]).toBe(ws0?.id);
     expect(ids[2]).toBe(ws1?.id);
   });
 
-  it('resetWorkspace restores defaults', () => {
+  it('resetTrial restores defaults', () => {
     mountLab();
-    const ws = labRef?.workspaces[0];
-    if (!ws) throw new Error('no workspace');
-    act(() => labRef?.resetWorkspace(ws.id));
-    const reset = labRef?.workspaces[0];
+    const ws = labRef?.trials[0];
+    if (!ws) throw new Error('no trial');
+    act(() => labRef?.resetTrial(ws.id));
+    const reset = labRef?.trials[0];
     expect(reset?.config).toEqual({ count: 0 });
     expect(reset?.state).toEqual({ value: 0 });
   });

package/src/lab/Lab.tsx

@@ -1,28 +1,28 @@
 import { ThemeProvider } from '@weasel-js/theme/react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useStore } from 'zustand/react';
-import type { Instrument } from '../instrument/types';
+import type { InstrumentList } from '../instrument/types';
 import { noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
 import { createLabStore, type LabStore } from '../state/store';
-import type { LabMode, StorageAdapter, WorkspaceRecord } from '../state/types';
+import type { LabMode, StorageAdapter, TrialRecord } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
-import { Workspace } from '../workspace/Workspace';
+import { Trial } from '../trial/Trial';
 import {
-  addWorkspace as addWorkspaceOp,
-  cloneWorkspace as cloneWorkspaceOp,
-  closeWorkspace as closeWorkspaceOp,
-  reorderWorkspaces as reorderWorkspacesOp,
-  resetWorkspace as resetWorkspaceOp,
-} from '../workspace/workspaceOps';
+  addTrial as addTrialOp,
+  cloneTrial as cloneTrialOp,
+  closeTrial as closeTrialOp,
+  reorderTrials as reorderTrialsOp,
+  resetTrial as resetTrialOp,
+} from '../trial/trialOps';
 import { LabContext, type LabContextValue } from './LabContext';
 import { LabShell } from './LabShell';
 import { useResolvedMode } from './useSystemMode';
-import { WorkspaceGrid, type WorkspaceLayout } from './WorkspaceGrid';
+import { type TrialLayout, Workspace } from './Workspace';
 
 /** Props for `<Lab>`. */
 export interface LabProps {
-  instruments: Instrument[];
+  instruments: InstrumentList;
   defaultInstrument: string;
   storage?: StorageAdapter | null;
   storageKey?: string;
@@ -39,19 +39,19 @@ export interface LabProps {
 }
 
 function buildStore(
-  instruments: Instrument[],
+  instruments: InstrumentList,
   defaultInstrument: string,
   storage: StorageAdapter,
   storageKey: string,
   initialMode: LabMode,
 ): LabStore {
   const store = createLabStore({ storageKey, storage, initialMode });
-  if (store.getState().workspaces.length === 0) {
-    const seeded = addWorkspaceOp([], instruments, defaultInstrument);
+  if (store.getState().trials.length === 0) {
+    const seeded = addTrialOp([], instruments, defaultInstrument);
     const record = seeded[0];
     if (record) {
       const { undoStack: _undoStack, ...rest } = record;
-      store.getState().addWorkspace(rest);
+      store.getState().addTrial(rest);
     }
   }
   return store;
@@ -71,15 +71,15 @@ const NEBULA_SLOTS = [
 
 function buildNebula(colors: readonly string[]): string {
   const blobs = colors.map((c, i) => {
-    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length]!;
+    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
     return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p.stop})`;
   });
   blobs.push('radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)');
   return blobs.join(', ');
 }
 
-/** The lab runtime: creates the store, provides it, and renders one workspace
- *  per record in a grid. Each workspace runs one of `instruments`. */
+/** The lab runtime: creates the store, provides it, and renders one trial
+ *  per record in a grid. Each trial runs one of `instruments`. */
 export function Lab({
   instruments,
   defaultInstrument,
@@ -106,7 +106,7 @@ export function Lab({
   }
   const store = storeRef.current;
 
-  const workspaces = useStore(store, (s) => s.workspaces);
+  const trials = useStore(store, (s) => s.trials);
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
   const layout = useStore(store, (s) => s.layout);
@@ -119,51 +119,51 @@ export function Lab({
   }, [mode, store]);
 
   const contextValue = useMemo<LabContextValue>(() => {
-    const replaceWorkspaces = (next: WorkspaceRecord[]): void => {
-      const currentById = new Map(store.getState().workspaces.map((w) => [w.id, w]));
+    const replaceTrials = (next: TrialRecord[]): void => {
+      const currentById = new Map(store.getState().trials.map((w) => [w.id, w]));
       const merged = next.map((w) => currentById.get(w.id) ?? w);
-      store.setState({ workspaces: merged });
+      store.setState({ trials: merged });
       // Trigger persistence flush via a tracked action.
       store.getState().setMode(store.getState().mode);
     };
 
     return {
       instruments,
-      workspaces,
-      addWorkspace: (instrumentName) => {
-        const next = addWorkspaceOp(store.getState().workspaces, instruments, instrumentName);
-        replaceWorkspaces(next);
+      trials,
+      addTrial: (instrumentName) => {
+        const next = addTrialOp(store.getState().trials, instruments, instrumentName);
+        replaceTrials(next);
       },
-      cloneWorkspace: (id) => {
-        const next = cloneWorkspaceOp(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      cloneTrial: (id) => {
+        const next = cloneTrialOp(store.getState().trials, id);
+        replaceTrials(next);
       },
-      closeWorkspace: (id) => {
-        const next = closeWorkspaceOp(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      closeTrial: (id) => {
+        const next = closeTrialOp(store.getState().trials, id);
+        replaceTrials(next);
       },
-      reorderWorkspaces: (ids) => {
-        replaceWorkspaces(reorderWorkspacesOp(store.getState().workspaces, ids));
+      reorderTrials: (ids) => {
+        replaceTrials(reorderTrialsOp(store.getState().trials, ids));
       },
-      resetWorkspace: (id) => {
-        const next = resetWorkspaceOp(store.getState().workspaces, id, instruments);
+      resetTrial: (id) => {
+        const next = resetTrialOp(store.getState().trials, id, instruments);
         const record = next.find((w) => w.id === id);
         if (!record) return;
         store.setState((s) => ({
-          workspaces: s.workspaces.map((w) =>
+          trials: s.trials.map((w) =>
             w.id === id
               ? { ...w, config: record.config, state: record.state, view: record.view }
               : w,
           ),
         }));
-        store.getState().updateWorkspaceView(id, record.view);
+        store.getState().updateTrialView(id, record.view);
       },
       savedSnapshots,
-      saveSnapshot: (workspaceId, name) => {
-        store.getState().saveSnapshot(workspaceId, name ?? `Save ${new Date().toLocaleString()}`);
+      saveSnapshot: (trialId, name) => {
+        store.getState().saveSnapshot(trialId, name ?? `Save ${new Date().toLocaleString()}`);
       },
-      loadSnapshot: (workspaceId, snapshotId) => {
-        store.getState().loadSnapshot(snapshotId, workspaceId);
+      loadSnapshot: (trialId, snapshotId) => {
+        store.getState().loadSnapshot(snapshotId, trialId);
       },
       deleteSnapshot: (snapshotId) => {
         store.getState().deleteSnapshot(snapshotId);
@@ -173,7 +173,7 @@ export function Lab({
         store.getState().setMode(m);
       },
     };
-  }, [instruments, workspaces, savedSnapshots, modeValue, store]);
+  }, [instruments, trials, savedSnapshots, modeValue, store]);
 
   // Only override the backdrop in dark, where there is one to override.
   // Setting a CSS custom property is the sanctioned use of inline style.
@@ -192,18 +192,18 @@ export function Lab({
           style={backdropStyle}
         >
           <LabShell title={title ?? 'Labkit'} mode={modeValue} header={children}>
-            <WorkspaceGrid
-              ids={workspaces.map((w) => w.id)}
+            <Workspace
+              ids={trials.map((w) => w.id)}
               resizable
               reorderable
-              onReorder={(ids) => contextValue.reorderWorkspaces(ids)}
-              layout={layout as WorkspaceLayout}
+              onReorder={(ids) => contextValue.reorderTrials(ids)}
+              layout={layout as TrialLayout}
               onLayoutChange={(next) => store.getState().setLayout(next)}
             >
-              {workspaces.map((w) => (
-                <Workspace key={w.id} id={w.id} />
+              {trials.map((w) => (
+                <Trial key={w.id} id={w.id} />
               ))}
-            </WorkspaceGrid>
+            </Workspace>
           </LabShell>
         </ThemeProvider>
       </LabContext.Provider>