@weasel-js/labkit 1.4.4 → 1.5.1

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

@@ -4,10 +4,11 @@
  * `SingletonExperiment` — so `useTrialState()` threw everywhere else, which
  * made the documented hook pattern unreachable from an instrument's `render`.
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
 import { Lab } from '../lab/Lab';
+import { LabContext, type LabContextValue } from '../lab/LabContext';
 import { useTrialState } from '../state/useTrialState';
 
 beforeAll(() => {
@@ -34,3 +35,24 @@ describe('<Trial> trial-scoped hooks', () => {
     expect(screen.getByTestId('probe')).toHaveTextContent('hits:7');
   });
 });
+
+describe('<Trial> root element', () => {
+  it('carries its trial id, so a lab can find a trial from outside', () => {
+    let labRef: LabContextValue | null = null;
+    const { container } = render(
+      <Lab instruments={[reader]} defaultInstrument="Reader">
+        <LabContext.Consumer>
+          {(value) => {
+            if (value) labRef = value;
+            return null;
+          }}
+        </LabContext.Consumer>
+      </Lab>,
+    );
+    act(() => (labRef as LabContextValue | null)?.addTrial('Reader'));
+    const ids = (labRef as LabContextValue | null)?.trials.map((t) => t.id) ?? [];
+    expect(ids).toHaveLength(2);
+    const roots = container.querySelectorAll<HTMLElement>('.lk-trial[data-trial-id]');
+    expect([...roots].map((el) => el.dataset.trialId)).toEqual(ids);
+  });
+});

package/src/trial/Trial.tsx

@@ -2,15 +2,26 @@ import { type ReactNode, useContext, useEffect, useMemo, useRef, useState } from
 import { useStore } from 'zustand/react';
 import { AnnotationsContext } from '../annotations/AnnotationsContext';
 import { AnnotationTargets } from '../annotations/AnnotationTargets';
+import { AnnotationPreloadContext } from '../annotations/preload';
 import { annotationsFromJSON } from '../annotations/store';
-import type { AnnotationTargetInfo } from '../annotations/types';
+import type { AnnotationStorage, AnnotationTargetInfo } from '../annotations/types';
+import { CameraWheelContext, type CameraWheelSlot } from '../canvas/CameraWheelContext';
 import { CanvasStack } from '../canvas/CanvasStack';
+import { fitStage, Stage } from '../canvas/Stage';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
 import { applyCamera, type ViewportSize } from '../canvas/worldSpec';
 import type { TrialContribution } from '../chrome/types';
+import { useConfigSchema } from '../config/useConfigSchema';
+import { useResolvedConfig } from '../config/useResolvedConfig';
 import { DragOverlay, useDragDrop } from '../dragdrop/DragDropRuntime';
 import { Palette } from '../dragdrop/Palette';
-import type { Instrument, LayerDescriptor, PaletteItem, RenderContext } from '../instrument/types';
+import type {
+  Instrument,
+  InstrumentList,
+  LayerDescriptor,
+  PaletteItem,
+  RenderContext,
+} from '../instrument/types';
 import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
 import { LayerList } from '../layers/LayerList';
@@ -19,7 +30,8 @@ import { resolveLoupe } from '../loupe/types';
 import { LabStoreContext, TrialIdProvider } from '../state/context';
 import type { LabStore } from '../state/store';
 import type { TrialRecord } from '../state/types';
-import { as2DView, DEFAULT_VIEW } from '../state/view';
+import { as2DView, DEFAULT_VIEW, withZoom } from '../state/view';
+import { resolveLabTool } from '../tools/labTool';
 import { createEventBus, type EventBus } from '../undo/eventBus';
 import { pushSnapshot, redo as undoRedo, undo as undoUndo } from '../undo/undoStack';
 import type { LoupeBindings, UndoBindings } from './TrialChrome';
@@ -41,20 +53,25 @@ export function Trial({ id, chrome, suppress }: TrialProps) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error('[labkit] <Trial> requires <LabStoreProvider>');
+  const instruments = useStore(storeCtx.store, (s) => s.instruments) ?? lab.instruments;
   const record = useStore(storeCtx.store, (s) => s.trials.find((w) => w.id === id));
+  const instrument = record ? instruments.find((i) => i.name === record.instrumentName) : undefined;
+  const kept = useKeptMarks(instrument?.annotations?.storage, id);
   if (!record) {
     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-trial lk-trial--unknown">Unknown instrument: {record.instrumentName}</div>
     );
   }
+  if (!kept.ready) return <div className="lk-trial lk-trial--loading" />;
   return (
     <TrialRuntime
+      keptMarks={kept.value}
       record={record}
       instrument={instrument}
+      instruments={instruments}
       store={storeCtx.store}
       isLast={lab.trials.length <= 1}
       chrome={chrome}
@@ -63,16 +80,60 @@ export function Trial({ id, chrome, suppress }: TrialProps) {
   );
 }
 
+/** The marks an instrument keeps in its own storage: preloaded by the lab for
+ *  the trials it opened with, loaded here for any added since. */
+function useKeptMarks(
+  storage: AnnotationStorage | undefined,
+  trialId: string,
+): { ready: boolean; value: unknown } {
+  const preload = useContext(AnnotationPreloadContext);
+  const [loaded, setLoaded] = useState<{ value: unknown } | null>(() =>
+    storage && preload?.has(trialId) ? { value: preload.get(trialId) } : null,
+  );
+  useEffect(() => {
+    if (!storage || loaded) return;
+    let live = true;
+    storage.load().then(
+      (value) => {
+        if (live) setLoaded({ value });
+      },
+      (error) => {
+        console.warn(`[labkit] could not load the marks of trial "${trialId}"`, error);
+        if (live) setLoaded({ value: null });
+      },
+    );
+    return () => {
+      live = false;
+    };
+  }, [storage, loaded, trialId]);
+  if (!storage) return { ready: true, value: undefined };
+  return loaded ? { ready: true, value: loaded.value } : { ready: false, value: undefined };
+}
+
 interface TrialRuntimeProps {
+  /** The marks an instrument's own `AnnotationStorage` loaded. */
+  keptMarks: unknown;
   record: TrialRecord;
   instrument: Instrument;
+  /** The lab's instruments as the store holds them now. */
+  instruments: InstrumentList;
   store: LabStore;
   isLast: boolean;
   chrome?: readonly TrialContribution[];
   suppress?: readonly string[];
 }
 
-function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: TrialRuntimeProps) {
+function TrialRuntime({
+  keptMarks,
+  record,
+  instrument,
+  instruments,
+  store,
+  isLast,
+  chrome,
+  suppress,
+}: TrialRuntimeProps) {
+  const wheelSlot = useRef<CameraWheelSlot['current']>(null);
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const loupeHostRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
@@ -84,6 +145,11 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   const setLabTool = useStore(store, (s) => s.setLabTool);
   const setTrialTool = useStore(store, (s) => s.setTrialTool);
 
+  // Everything below reads `config`; `record.config` is the panel's view, and
+  // reaches it through `record` on `TrialChrome`.
+  const schema = useConfigSchema(instrument);
+  const { config } = useResolvedConfig(schema, record.config, record.auto);
+
   const busRef = useRef<EventBus | null>(null);
   if (busRef.current === null) busRef.current = createEventBus();
   const bus = busRef.current;
@@ -117,8 +183,11 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   // A function `initialView` needs the canvas size, so `trialOps` leaves the
   // view null and the first measurement resolves it. Reset nulls it again,
   // which re-frames — so the guard is the null itself, not a "have I run" flag.
+  const stage = instrument.canvas ? undefined : instrument.stage;
   const placeView = (size: ViewportSize): void => {
-    const declared = instrument.canvas?.initialView;
+    const declared =
+      instrument.canvas?.initialView ??
+      (stage ? (stage.initialView ?? ((vp: ViewportSize) => fitStage(stage.size, vp))) : undefined);
     if (typeof declared !== 'function') return;
     if (record.view != null) return;
     setView(declared(size));
@@ -131,24 +200,26 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   const targetsRef = useRef<() => readonly AnnotationTargetInfo[]>(() => []);
   targetsRef.current = () =>
     annotationsCap
-      ? annotationsCap.targets(record.state, record.config, { id: record.id, view: record.view })
+      ? annotationsCap.targets(record.state, config, { id: record.id, view: record.view })
       : [];
 
-  // One store for the trial's lifetime. Marks do not survive a reload yet —
-  // the storage slot is 3d.
+  // One store for the trial's lifetime.
   const annotationsRef = useRef<ReturnType<typeof annotationsFromJSON> | null>(null);
   // Read through refs for the same reason `targets` is: the store is built
   // once, and an export must draw against the config the trial holds now.
-  const configRef = useRef<unknown>(record.config);
-  configRef.current = record.config;
+  const configRef = useRef<unknown>(config);
+  configRef.current = config;
+  // The instrument can be swapped under a live trial, so the capability is read at use too.
+  const capRef = useRef(annotationsCap);
+  capRef.current = annotationsCap;
   if (annotationsRef.current === null) {
     // Seeded from wherever the marks were kept: the instrument's own store if
     // it declared one, else this trial's slot.
-    const kept = annotationsCap?.storage ? annotationsCap.storage.load() : record.annotations;
+    const kept = annotationsCap?.storage ? keptMarks : record.annotations;
     annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
-      meaning: annotationsCap?.meaning,
+      meaning: () => capRef.current?.meaning,
       config: () => configRef.current,
-      onCapture: (result) => annotationsCap?.onCapture?.(result),
+      onCapture: (result) => capRef.current?.onCapture?.(result),
     });
   }
   const annotations = annotationsRef.current;
@@ -203,15 +274,14 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
 
   // A trial gets its own slot when its instrument declares tools; otherwise it
   // reads the lab's. Which slot a change writes follows from the same thing.
-  // Annotation tools are a trial's own for the same reason: two trials
-  // annotating different pictures must not share one active tool.
-  const declaresTools = instrument.tools != null || instrument.annotations != null;
+  // Annotation tools always read the lab's: a tool is what the hand holds, so
+  // picking one arms it in every trial, the way artboards share a tool. They
+  // were once per trial, back when one trial compared several pictures.
+  const declaresTools = instrument.tools != null;
+  const labTool = resolveLabTool(labToolId, instruments);
   const resolvedToolId = declaresTools
-    ? (record.activeToolId ??
-      instrument.tools?.initial ??
-      instrument.tools?.tools[0]?.id ??
-      (instrument.annotations ? 'select' : null))
-    : labToolId;
+    ? (record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null)
+    : labTool;
   const setActiveTool = (id: string): void => {
     if (declaresTools) setTrialTool(record.id, id);
     else setLabTool(id);
@@ -226,14 +296,14 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   // this — with a runner that yields nothing and is never started.
   const job = useJob({
     capability: jobCap ?? { run: async function* () {}, onItem: (_i, st) => st },
-    config: record.config,
+    config,
     state: record.state,
     setState: (next) => updateTrialState(record.id, next as never),
   });
 
   const renderCtx: RenderContext<unknown, unknown> = {
     state: record.state,
-    config: record.config,
+    config,
     setState: (next) => {
       snapshotIfNeeded('state.change');
       updateTrialState(record.id, next);
@@ -254,7 +324,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
       zoom: view2d?.zoom ?? 1,
       setZoom: (z) => {
         if (!view2d) return;
-        updateTrialView(record.id, { ...view2d, zoom: z });
+        updateTrialView(record.id, withZoom(view2d, z));
       },
       activeToolId: resolvedToolId,
       visibleLayers,
@@ -302,8 +372,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   const loupeCap = useMemo(() => {
     const declared = instrument.loupe;
     if (declared == null) return null;
-    return resolveLoupe(typeof declared === 'function' ? declared(record.config) : declared);
-  }, [instrument.loupe, record.config]);
+    return resolveLoupe(typeof declared === 'function' ? declared(config) : declared);
+  }, [instrument.loupe, config]);
   const loupeBindings: LoupeBindings | undefined = loupeCap
     ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) }
     : undefined;
@@ -321,10 +391,10 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
         // Camera applied here, so a layer draws in world coordinates. `zoom`
         // stays in the args for line widths, which must not scale with it.
         applyCamera(ctx, view, frame);
-        layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom });
+        layer.draw(ctx, { state: record.state, config, zoom: view.zoom });
       },
     }));
-  }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
+  }, [instrument.canvas, record.state, config, layerVisibility, layerOrder]);
 
   const layerDescriptors: LayerDescriptor[] = useMemo(() => {
     if (!instrument.layers) return [];
@@ -337,7 +407,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
     view: view2d ?? DEFAULT_VIEW,
     worldSpec: instrument.canvas?.worldSpec,
     state: record.state,
-    config: record.config,
+    config,
     setState: (next) => {
       snapshotIfNeeded('canvas.itemAdded');
       updateTrialState(record.id, next as never);
@@ -351,8 +421,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
   const paletteItems: PaletteItem[] = useMemo(() => {
     if (!instrument.dragDrop) return [];
     const p = instrument.dragDrop.palette;
-    return typeof p === 'function' ? p(record.state, record.config) : p;
-  }, [instrument.dragDrop, record.state, record.config]);
+    return typeof p === 'function' ? p(record.state, config) : p;
+  }, [instrument.dragDrop, record.state, config]);
 
   const layersWithFeedback: CanvasLayerDescriptor[] = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -386,7 +456,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
       capability={loupeCap}
       enabled={loupeOn}
       state={record.state}
-      config={record.config}
+      config={config}
       view={view2d ?? DEFAULT_VIEW}
       worldSpec={instrument.canvas?.worldSpec}
       hostRef={loupeHostRef}
@@ -412,6 +482,21 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
         <DragOverlay drag={dragDropResult.drag} />
       </div>
     );
+  } else if (stage) {
+    body = (
+      <Stage
+        size={stage.size}
+        view={view2d ?? DEFAULT_VIEW}
+        onViewChange={setView}
+        onResize={placeView}
+        minZoom={stage.minZoom}
+        maxZoom={stage.maxZoom}
+        hostRef={loupeHostRef}
+        overlay={lens}
+      >
+        {instrument.render(renderCtx)}
+      </Stage>
+    );
   } else if (lens) {
     body = (
       <div ref={loupeHostRef} className="lk-trial__loupe-host">
@@ -475,33 +560,35 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: T
     <AnnotationTargets
       capability={annotationsCap}
       state={record.state}
-      config={record.config}
+      config={config}
       trial={{ id: record.id, view: record.view }}
       annotations={annotations}
-      activeToolId={resolvedToolId}
+      activeToolId={labTool}
     />
   ) : null;
 
   return (
     <TrialIdProvider trialId={record.id}>
       <AnnotationsContext.Provider value={annotationsCap ? annotations : null}>
-        <TrialChrome
-          job={jobCap ? job : undefined}
-          loupe={loupeBindings}
-          trialId={record.id}
-          record={record}
-          instrument={instrument}
-          isLastTrial={isLast}
-          undoBindings={undoBindings}
-          trialChrome={extraChrome}
-          chrome={chrome}
-          suppress={suppress}
-          activeToolId={resolvedToolId}
-          setActiveTool={setActiveTool}
-        >
-          {body}
-          {annotationOverlays}
-        </TrialChrome>
+        <CameraWheelContext.Provider value={wheelSlot}>
+          <TrialChrome
+            job={jobCap ? job : undefined}
+            loupe={loupeBindings}
+            trialId={record.id}
+            record={record}
+            instrument={instrument}
+            isLastTrial={isLast}
+            undoBindings={undoBindings}
+            trialChrome={extraChrome}
+            chrome={chrome}
+            suppress={suppress}
+            activeToolId={resolvedToolId}
+            setActiveTool={setActiveTool}
+          >
+            {body}
+            {annotationOverlays}
+          </TrialChrome>
+        </CameraWheelContext.Provider>
       </AnnotationsContext.Provider>
     </TrialIdProvider>
   );

package/src/trial/TrialBody.tsx

@@ -1,14 +1,9 @@
-import { type ReactNode, useEffect, useMemo, useRef } from 'react';
-import { asNodeId, createNode, Store, stripStrategy } from 'windease';
-import { type ChromeMap, Container, Provider, StrategyRegistryProvider } from 'windease/react';
-
-const ZONE_ID = asNodeId('lk-trial-body');
-const SIDEBAR_ID = asNodeId('lk-trial-sidebar');
-const CONTENT_ID = asNodeId('lk-trial-content');
-const STRATEGIES = { strip: stripStrategy as never };
+import type { ReactNode } from 'react';
+import { Split, type SplitProps } from '../primitives/Split';
 
 /** Props for `<TrialBody>`. */
-export interface TrialBodyProps {
+export interface TrialBodyProps
+  extends Omit<SplitProps, 'sidebar' | 'children' | 'className' | 'sidebarClassName' | 'label'> {
   /** The sidebar region's sections. */
   sidebar: ReactNode;
   /** The instrument's own output. */
@@ -16,140 +11,21 @@ export interface TrialBodyProps {
   /** Extra class on the content pane — `Trial` marks a canvas instrument's
    *  well flush. */
   contentClassName?: string;
-  /** The sidebar's current extent in pixels. Omit for an unpersisted lab: the
-   *  seam still works, its result just does not outlive the mount. */
-  width?: number;
-  /** Where the sidebar starts before anyone drags it. */
-  defaultWidth?: number;
-  minWidth?: number;
-  maxWidth?: number;
-  /** How little the instrument may be squeezed to. Reported as the seam's
-   *  reachable maximum, so the drag stops there rather than clamping silently. */
-  contentMinWidth?: number;
-  /** Fires through the drag, not on release: the pane is already there. */
-  onWidthChange?: (width: number) => void;
-  /**
-   * Fixed extent. Omit in an app — the strip measures its own box. Supply it
-   * where nothing measures, notably jsdom, or both panes lay out at zero.
-   */
-  viewport?: { w: number; h: number };
 }
 
-/**
- * A trial's sidebar and content as a two-pane strip with a draggable seam.
- *
- * The seam is `stripStrategy`'s own resize affordance, so it arrives as a
- * `role="separator"` carrying the reachable range, operable by pointer and by
- * arrows / Home / End, and clamped against the content pane's floor rather
- * than against the sidebar's alone.
- */
-export function TrialBody({
-  sidebar,
-  children,
-  contentClassName,
-  width,
-  defaultWidth = 320,
-  minWidth = 140,
-  maxWidth = 720,
-  contentMinWidth = 160,
-  onWidthChange,
-  viewport,
-}: TrialBodyProps) {
-  // The cross-axis half of every size hint below is inert: a horizontal strip
-  // stretches its panes to the container's height and never reads `h`.
-  const storeRef = useRef<Store | null>(null);
-  if (storeRef.current === null) {
-    const store = new Store();
-    store.registerNode(
-      createNode({
-        kind: 'zone',
-        id: ZONE_ID,
-        container: { strategyId: 'strip', config: { axis: 'x', resizable: true } },
-      }),
-    );
-    store.registerNode(
-      createNode({
-        kind: 'sidebar',
-        id: SIDEBAR_ID,
-        parentId: ZONE_ID,
-        meta: { title: 'Sidebar' },
-        placement: { size: { w: width ?? defaultWidth } },
-        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } },
-      }),
-    );
-    store.registerNode(
-      createNode({
-        kind: 'content',
-        id: CONTENT_ID,
-        parentId: ZONE_ID,
-        meta: { title: 'Content' },
-        hints: { minSize: { w: contentMinWidth, h: 0 } },
-      }),
-    );
-    store.showNode(SIDEBAR_ID);
-    store.showNode(CONTENT_ID);
-    storeRef.current = store;
-  }
-  const store = storeRef.current;
-
-  // What the store last held, so the placement event can tell a drag from the
-  // echo of our own write and a controlled `width` does not fight the seam.
-  const widthRef = useRef(width ?? defaultWidth);
-
-  useEffect(() => {
-    store.setHints(SIDEBAR_ID, {
-      minSize: { w: minWidth, h: 0 },
-      maxSize: { w: maxWidth, h: 0 },
-    });
-    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
-  }, [store, minWidth, maxWidth, contentMinWidth]);
-
-  useEffect(() => {
-    if (width === undefined || width === widthRef.current) return;
-    widthRef.current = width;
-    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
-  }, [store, width]);
-
-  const onWidthChangeRef = useRef(onWidthChange);
-  onWidthChangeRef.current = onWidthChange;
-  useEffect(
-    () =>
-      store.events.on('node.placementChanged', () => {
-        const next = (store.getPlacement(SIDEBAR_ID)?.size as { w?: number } | undefined)?.w;
-        if (typeof next !== 'number' || next === widthRef.current) return;
-        widthRef.current = next;
-        onWidthChangeRef.current?.(next);
-      }),
-    [store],
-  );
-
-  const chrome = useMemo<ChromeMap>(
-    () => ({
-      sidebar: () => <div className="lk-trial__sidebar">{sidebar}</div>,
-      content: () => (
-        <div
-          className={
-            contentClassName ? `lk-trial__content ${contentClassName}` : 'lk-trial__content'
-          }
-        >
-          {children}
-        </div>
-      ),
-    }),
-    [sidebar, children, contentClassName],
-  );
-
+/** A trial's sidebar and content as a `Split`, wearing the trial's classes. */
+export function TrialBody({ sidebar, children, contentClassName, ...rest }: TrialBodyProps) {
   return (
-    <Provider store={store}>
-      <StrategyRegistryProvider strategies={STRATEGIES}>
-        <Container
-          parentId={ZONE_ID}
-          chrome={chrome}
-          className="lk-trial__panes windease-zone"
-          affordances
-          viewport={viewport}
-        />
-      </StrategyRegistryProvider>
-    </Provider>
+    <Split
+      {...rest}
+      sidebar={sidebar}
+      className="lk-trial__panes"
+      sidebarClassName="lk-trial__sidebar"
+      contentClassName={
+        contentClassName ? `lk-trial__content ${contentClassName}` : 'lk-trial__content'
+      }
+    >
+      {children}
+    </Split>
   );
 }

package/src/trial/TrialChrome.tsx

@@ -9,15 +9,17 @@ import { TitleBarRegion } from '../chrome/regions/TitleBarRegion';
 import { ToolbarRegion } from '../chrome/regions/ToolbarRegion';
 import { ViewportRegion } from '../chrome/regions/ViewportRegion';
 import type { TrialChromeContext, TrialContribution, TrialRegion } from '../chrome/types';
-import { hasConfigPath, schemaNodeAtPath, withValueAtPath } from '../config/path';
+import { applyConfigWrite, resolveAutoConfig } from '../config/autoConfig';
+import { hasConfigPath, schemaNodeAtPath } from '../config/path';
 import { useConfigSchema } from '../config/useConfigSchema';
+import { useResolvedConfig } from '../config/useResolvedConfig';
 import type { Instrument } from '../instrument/types';
 import type { JobHandle } from '../job/types';
 import { useLabContext } from '../lab/LabContext';
 import { JobProgress } from '../primitives/JobProgress';
 import { LabStoreContext } from '../state/context';
 import type { TrialRecord } from '../state/types';
-import { as2DView } from '../state/view';
+import { as2DView, withZoom } from '../state/view';
 import { TrialBody } from './TrialBody';
 import { TrialTitleBar } from './TrialTitleBar';
 import { UndockedSections } from './UndockedSections';
@@ -110,14 +112,21 @@ export function TrialChrome({
   const view2d = as2DView(record.view);
 
   const configSchema = useConfigSchema(instrument);
+  // What the instrument is looking at right now. The panel reads `record.config`
+  // — the pinned values — but anything instrument-facing gets the resolved one.
+  const { config: resolvedConfig, auto } = useResolvedConfig(
+    configSchema,
+    record.config,
+    record.auto,
+  );
 
-  const title = record.title ?? record.instrumentName;
+  const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
 
   const ctx = useMemo<TrialChromeContext>(() => {
     const setZoom = (z: number): void => {
       if (!view2d) return;
-      updateTrialView(trialId, { ...view2d, zoom: z });
+      updateTrialView(trialId, withZoom(view2d, z));
     };
     return {
       trialId,
@@ -136,6 +145,7 @@ export function TrialChrome({
       configSchema,
       configFields: instrument.config ? [] : (instrument.configSchema?.() ?? []),
       config: record.config,
+      auto,
       setConfig: (path, value) => {
         const prevConfig = record.config as Record<string, unknown>;
         if (
@@ -149,8 +159,9 @@ export function TrialChrome({
         }
         updateTrialConfig(trialId, path, value);
         if (instrument.onConfigChange) {
-          const nextConfig = withValueAtPath(prevConfig, path, value);
-          const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
+          const next = applyConfigWrite(prevConfig, record.auto ?? [], path, value);
+          const nextConfig = resolveAutoConfig(configSchema, next.config, new Set(next.autoPaths));
+          const nextState = instrument.onConfigChange(nextConfig, resolvedConfig, record.state);
           updateTrialState(trialId, nextState as never);
         }
       },
@@ -184,6 +195,8 @@ export function TrialChrome({
     activeToolId,
     setActiveTool,
     configSchema,
+    resolvedConfig,
+    auto,
     undockedIds,
     undockPanelAction,
     dockPanelAction,
@@ -225,6 +238,8 @@ export function TrialChrome({
   return (
     <section
       className="lk-trial"
+      data-trial-id={trialId}
+      data-focused={lab.trials.length > 1 && lab.focusedTrialId === trialId ? 'true' : undefined}
       aria-label={`Trial ${title}`}
       tabIndex={-1}
       onKeyDown={handleKeyDown}
@@ -243,7 +258,9 @@ export function TrialChrome({
         <TrialBody
           width={record.sidebarWidth}
           onWidthChange={(w) => updateTrialSidebarWidth(trialId, w)}
-          contentClassName={instrument.canvas ? 'lk-trial__content--flush' : undefined}
+          contentClassName={
+            instrument.canvas || instrument.stage ? 'lk-trial__content--flush' : undefined
+          }
           sidebar={
             <>
               <SidebarRegion contributions={inRegion('sidebar')} ctx={ctx} />