@foldkit/devtools 0.112.0

package/dist/overlay.js

@@ -0,0 +1,1242 @@
+import { clsx } from 'clsx';
+import { Array as Array_, Context, Effect, Equal, Function, HashSet, Match as M, Number as Number_, Option, Order, Predicate, Queue, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
+import * as Command from 'foldkit/command';
+import { DEVTOOLS_HOST_ID, GOT_MESSAGE_PATTERN, INIT_INDEX, extractSubmodelInfo, isTagged, latestEntryIndex, toInspectableValue, } from 'foldkit/devtools-host';
+import { lockScroll, unlockScroll } from 'foldkit/dom';
+import { childAttributes, createKeyedLazy, createLazy, html, } from 'foldkit/html';
+import { m } from 'foldkit/message';
+import { makeElement } from 'foldkit/runtime';
+import { evo } from 'foldkit/struct';
+import * as Subscription from 'foldkit/subscription';
+import * as Listbox from '@foldkit/ui/listbox';
+import * as Slider from '@foldkit/ui/slider';
+import * as Tabs from '@foldkit/ui/tabs';
+import * as OptionExt from './internal/optionExtensions.js';
+import { overlayStyles } from './overlay-styles.js';
+const SubmodelFilterListbox = Listbox.create();
+// MODEL
+const DisplayCommand = S.Struct({
+    name: S.String,
+    args: S.Option(S.Record(S.String, S.Unknown)),
+});
+const DisplayMount = S.Struct({
+    name: S.String,
+    args: S.Option(S.Record(S.String, S.Unknown)),
+});
+const DisplayEntry = S.Struct({
+    tag: S.String,
+    submodelPath: S.Array(S.String),
+    maybeLeafTag: S.Option(S.String),
+    commands: S.Array(DisplayCommand),
+    mountStarts: S.Array(DisplayMount),
+    mountEnds: S.Array(DisplayMount),
+    timestamp: S.Number,
+    isModelChanged: S.Boolean,
+});
+const INSPECTOR_TABS_ID = 'dt-inspector';
+const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
+const SCRUBBER_SLIDER_ID = 'dt-scrubber';
+const InspectorTabsModel = S.Struct({
+    id: S.String,
+    activeIndex: S.Number,
+    focusedIndex: S.Number,
+    activationMode: S.Literals(['Automatic', 'Manual']),
+});
+const INSPECTOR_TABS = [
+    'Model',
+    'Message',
+    'Commands',
+    'Mounts',
+];
+const InspectorTabs = Tabs.create();
+/**
+ * `S.Unknown` whose equivalence is reference equality. Effect 4's default
+ * equivalence for `S.Unknown` is `Equal.equals`, which walks the value
+ * structurally (hash + compareRecords) instead of falling back to `===` like
+ * Effect 3. The DevTools overlay holds whole user Model and Message snapshots
+ * in fields typed as `S.Unknown`, so the runtime's per-dispatch
+ * `modelEquivalence` check would otherwise walk the entire payload three
+ * times every time the user dispatches a Message. The snapshots are
+ * through-traffic (different reference per frame iff different content),
+ * which makes reference equality the correct comparison.
+ */
+const UnknownByReference = S.Unknown.pipe(S.overrideToEquivalence(() => (a, b) => a === b));
+const Model = S.Struct({
+    isOpen: S.Boolean,
+    isMobile: S.Boolean,
+    entries: S.Array(DisplayEntry),
+    initCommands: S.Array(DisplayCommand),
+    initMountStarts: S.Array(DisplayMount),
+    startIndex: S.Number,
+    isPaused: S.Boolean,
+    pausedAtIndex: S.Number,
+    selectedIndex: S.Number,
+    isFollowingLatest: S.Boolean,
+    isFollowingTop: S.Boolean,
+    maybeInspectedModel: S.Option(UnknownByReference),
+    maybeInspectedMessage: S.Option(UnknownByReference),
+    submodelTags: S.Array(S.String),
+    maybeSubmodelFilter: S.Option(S.String),
+    submodelFilterListbox: Listbox.Model,
+    expandedPaths: S.HashSet(S.String),
+    changedPaths: S.HashSet(S.String),
+    affectedPaths: S.HashSet(S.String),
+    inspectorTabs: InspectorTabsModel,
+    // NOTE: empirically, inlining `Slider.Model` here throws
+    // "Cannot read properties of undefined (reading 'ast')" when running slider
+    // tests, because slider imports html → runtime → overlay, and overlay
+    // references Slider.Model mid-cycle. S.suspend defers the read until after
+    // the cycle resolves. Inlining Listbox.Model works in practice but goes
+    // through the same import chain; the exact cause of the asymmetry isn't
+    // pinned down. Suspend is the conservative fix until the runtime ↔ overlay
+    // cycle is broken at the source.
+    scrubberSlider: S.suspend(() => Slider.Model),
+});
+const Flags = S.Struct({
+    isMobile: S.Boolean,
+    entries: S.Array(DisplayEntry),
+    initCommands: S.Array(DisplayCommand),
+    initMountStarts: S.Array(DisplayMount),
+    startIndex: S.Number,
+    isPaused: S.Boolean,
+    pausedAtIndex: S.Number,
+});
+// MESSAGE
+const ClickedToggle = m('ClickedToggle');
+const ClickedRow = m('ClickedRow', { index: S.Number });
+const ClickedResume = m('ClickedResume');
+const ClickedClear = m('ClickedClear');
+const CompletedJump = m('CompletedJump');
+const CompletedResume = m('CompletedResume');
+const ClickedFollowLatest = m('ClickedFollowLatest');
+const ClickedScrollToTopPill = m('ClickedScrollToTopPill');
+const ScrolledMessageList = m('ScrolledMessageList', { scrollTop: S.Number });
+const CompletedClear = m('CompletedClear');
+const LockedScroll = m('LockedScroll');
+const UnlockedScroll = m('UnlockedScroll');
+const ScrolledToTop = m('ScrolledToTop');
+const CrossedMobileBreakpoint = m('CrossedMobileBreakpoint', {
+    isMobile: S.Boolean,
+});
+const ReceivedInspectedState = m('ReceivedInspectedState', {
+    model: S.Unknown,
+    maybeMessage: S.Option(S.Unknown),
+    changedPaths: S.HashSet(S.String),
+    affectedPaths: S.HashSet(S.String),
+});
+const ToggledTreeNode = m('ToggledTreeNode', { path: S.String });
+const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
+    message: S.Unknown,
+});
+const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
+    entries: S.Array(DisplayEntry),
+    initCommands: S.Array(DisplayCommand),
+    initMountStarts: S.Array(DisplayMount),
+    startIndex: S.Number,
+    isPaused: S.Boolean,
+    pausedAtIndex: S.Number,
+});
+const GotSubmodelFilterMessage = m('GotSubmodelFilterMessage', {
+    message: Listbox.Message,
+});
+// NOTE: suspend for the same init-order reason as scrubberSlider above.
+const GotScrubberSliderMessage = m('GotScrubberSliderMessage', {
+    message: S.suspend(() => Slider.Message),
+});
+const Message = S.Union([
+    ClickedToggle,
+    ClickedRow,
+    ClickedResume,
+    ClickedClear,
+    ClickedFollowLatest,
+    ClickedScrollToTopPill,
+    ScrolledMessageList,
+    CompletedJump,
+    CompletedResume,
+    CompletedClear,
+    LockedScroll,
+    UnlockedScroll,
+    ScrolledToTop,
+    CrossedMobileBreakpoint,
+    ReceivedInspectedState,
+    ToggledTreeNode,
+    GotInspectorTabsMessage,
+    ReceivedStoreUpdate,
+    GotSubmodelFilterMessage,
+    GotScrubberSliderMessage,
+]);
+// HELPERS
+const MILLIS_PER_SECOND = 1000;
+const MOBILE_BREAKPOINT = 767;
+const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
+const TREE_INDENT_PX = 12;
+const MAX_PREVIEW_KEYS = 3;
+const ALL_MESSAGES_VALUE = '';
+const NO_COMMANDS = [];
+const NO_MOUNTS = [];
+const formatTimeDelta = (deltaMs) => M.value(deltaMs).pipe(M.when(0, () => '0ms'), M.when(Number_.isLessThan(MILLIS_PER_SECOND), ms => `+${Math.round(ms)}ms`), M.orElse(ms => `+${(ms / MILLIS_PER_SECOND).toFixed(1)}s`));
+const MESSAGE_LIST_SELECTOR = '.message-list';
+// NOTE: scrubber slider value space is independent of the store's host
+// indices. Slider value 0 represents init; 1..entries.length represents
+// positions after each buffered message. Passing pausedAtIndex (a host
+// index) straight into setValue, or treating ChangedValue.value as a host
+// index in jumpTo, will silently produce wrong navigation. Translate at
+// the boundaries via the helpers below.
+const hostIndexToSliderValue = (hostIndex, startIndex) => (hostIndex === INIT_INDEX ? 0 : hostIndex - startIndex + 1);
+const sliderValueToHostIndex = (sliderValue, startIndex) => (sliderValue === 0 ? INIT_INDEX : startIndex + sliderValue - 1);
+const SCROLL_FOLLOW_THRESHOLD_PX = 8;
+const computeSubmodelTags = (entries) => pipe(entries, Array_.flatMap(({ submodelPath }) => submodelPath), Array_.dedupe, Array_.sort(Order.String));
+const toDisplayCommand = (command) => ({
+    name: command.name,
+    args: Option.fromNullishOr(command.args),
+});
+const toDisplayMount = (mount) => ({
+    name: mount.name,
+    args: Option.fromNullishOr(mount.args),
+});
+const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
+    const { submodelPath, maybeLeafTag } = extractSubmodelInfo(entry.tag, entry.message);
+    return {
+        tag: entry.tag,
+        submodelPath,
+        maybeLeafTag,
+        commands: Array_.map(entry.commands, toDisplayCommand),
+        mountStarts: Array_.map(entry.mountStarts, toDisplayMount),
+        mountEnds: Array_.map(entry.mountEnds, toDisplayMount),
+        timestamp: entry.timestamp,
+        isModelChanged: entry.isModelChanged,
+    };
+});
+const toDisplayState = (state) => ({
+    entries: toDisplayEntries(state),
+    initCommands: Array_.map(state.initCommands, toDisplayCommand),
+    initMountStarts: Array_.map(state.initMountStarts, toDisplayMount),
+    startIndex: state.startIndex,
+    isPaused: state.isPaused,
+    pausedAtIndex: state.pausedAtIndex,
+});
+const isExpandable = Predicate.isObjectOrArray;
+const objectPreview = (value) => pipe(value, Record.keys, Array_.filter(key => key !== '_tag'), Array_.match({
+    onEmpty: () => '{}',
+    onNonEmpty: keys => {
+        const preview = pipe(keys, Array_.take(MAX_PREVIEW_KEYS), Array_.join(', '));
+        return Array_.length(keys) > MAX_PREVIEW_KEYS
+            ? `{ ${preview}, … }`
+            : `{ ${preview} }`;
+    },
+}));
+const collapsedPreview = (value) => M.value(value).pipe(M.when(Array.isArray, array => `(${array.length})`), M.when(Predicate.isObject, objectPreview), M.orElse(() => ''));
+class StoreService extends Context.Service()('foldkit/DevToolsStore') {
+}
+class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot') {
+}
+export const LockScroll = Command.define('LockScroll', LockedScroll)(lockScroll.pipe(Effect.as(LockedScroll())));
+export const UnlockScroll = Command.define('UnlockScroll', UnlockedScroll)(unlockScroll.pipe(Effect.as(UnlockedScroll())));
+const buildInspectionEffect = (index) => Effect.gen(function* () {
+    const store = yield* StoreService;
+    const model = yield* store.getModelAtIndex(index);
+    const maybeMessage = yield* store.getMessageAtIndex(index);
+    const diff = yield* store.getDiffAtIndex(index);
+    return ReceivedInspectedState({ model, maybeMessage, ...diff });
+});
+export const JumpTo = Command.define('JumpTo', { index: S.Number }, CompletedJump)(({ index }) => Effect.gen(function* () {
+    const store = yield* StoreService;
+    yield* store.jumpTo(index);
+    return CompletedJump();
+}));
+export const InspectState = Command.define('InspectState', { index: S.Number }, ReceivedInspectedState)(({ index }) => buildInspectionEffect(index));
+export const InspectLatest = Command.define('InspectLatest', ReceivedInspectedState)(Effect.gen(function* () {
+    const store = yield* StoreService;
+    const state = yield* SubscriptionRef.get(store.stateRef);
+    return yield* buildInspectionEffect(latestEntryIndex(state));
+}));
+export const Resume = Command.define('Resume', CompletedResume)(Effect.gen(function* () {
+    const store = yield* StoreService;
+    yield* store.resume;
+    return CompletedResume();
+}));
+export const Clear = Command.define('Clear', CompletedClear)(Effect.gen(function* () {
+    const store = yield* StoreService;
+    yield* store.clear;
+    return CompletedClear();
+}));
+export const ScrollToTop = Command.define('ScrollToTop', ScrolledToTop)(Effect.gen(function* () {
+    const shadow = yield* ShadowRootService;
+    const messageList = shadow.querySelector(MESSAGE_LIST_SELECTOR);
+    if (messageList instanceof HTMLElement) {
+        messageList.scrollTop = 0;
+    }
+    return ScrolledToTop();
+}));
+const makeUpdate = (store, shadow, mode) => {
+    const provideContext = (effect) => effect.pipe(Effect.provideService(StoreService, store), Effect.provideService(ShadowRootService, shadow));
+    const inspectLatest = Command.mapEffect(InspectLatest(), provideContext);
+    const resume = Command.mapEffect(Resume(), provideContext);
+    const clear = Command.mapEffect(Clear(), provideContext);
+    const scrollToTop = Command.mapEffect(ScrollToTop(), provideContext);
+    const jumpTo = (index) => Command.mapEffect(JumpTo({ index }), provideContext);
+    const inspectState = (index) => Command.mapEffect(InspectState({ index }), provideContext);
+    const toggleScrollLock = (shouldLock) => shouldLock ? LockScroll() : UnlockScroll();
+    return (model, message) => M.value(message).pipe(M.withReturnType(), M.tags({
+        ClickedToggle: () => {
+            const nextIsOpen = !model.isOpen;
+            return [
+                evo(model, { isOpen: () => nextIsOpen }),
+                OptionExt.when(model.isMobile, toggleScrollLock(nextIsOpen)).pipe(Option.toArray),
+            ];
+        },
+        CrossedMobileBreakpoint: ({ isMobile }) => [
+            evo(model, { isMobile: () => isMobile }),
+            OptionExt.when(model.isOpen, toggleScrollLock(isMobile)).pipe(Option.toArray),
+        ],
+        ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [
+            model,
+            [jumpTo(index), inspectState(index)],
+        ]), M.when('Inspect', () => [
+            evo(model, {
+                selectedIndex: () => index,
+                isFollowingLatest: () => false,
+            }),
+            [inspectState(index)],
+        ]), M.exhaustive),
+        ClickedResume: () => [
+            evo(model, {
+                isFollowingTop: () => true,
+                expandedPaths: () => HashSet.empty(),
+                changedPaths: () => HashSet.empty(),
+                affectedPaths: () => HashSet.empty(),
+            }),
+            [resume, inspectLatest, scrollToTop],
+        ],
+        ClickedClear: () => [
+            evo(model, {
+                selectedIndex: () => INIT_INDEX,
+                isFollowingLatest: () => true,
+                isFollowingTop: () => true,
+                maybeSubmodelFilter: () => Option.none(),
+                expandedPaths: () => HashSet.empty(),
+                changedPaths: () => HashSet.empty(),
+                affectedPaths: () => HashSet.empty(),
+            }),
+            [clear, inspectLatest, scrollToTop],
+        ],
+        ClickedFollowLatest: () => {
+            const latestIndex = Array_.match(model.entries, {
+                onEmpty: () => INIT_INDEX,
+                onNonEmpty: () => model.startIndex + model.entries.length - 1,
+            });
+            return [
+                evo(model, {
+                    selectedIndex: () => latestIndex,
+                    isFollowingLatest: () => true,
+                    isFollowingTop: () => true,
+                    expandedPaths: () => HashSet.empty(),
+                    changedPaths: () => HashSet.empty(),
+                    affectedPaths: () => HashSet.empty(),
+                }),
+                [inspectLatest, scrollToTop],
+            ];
+        },
+        ClickedScrollToTopPill: () => [
+            evo(model, {
+                isFollowingTop: () => true,
+            }),
+            [scrollToTop],
+        ],
+        ScrolledMessageList: ({ scrollTop }) => {
+            const isAtTop = scrollTop <= SCROLL_FOLLOW_THRESHOLD_PX;
+            return isAtTop === model.isFollowingTop
+                ? [model, []]
+                : [evo(model, { isFollowingTop: () => isAtTop }), []];
+        },
+        ReceivedInspectedState: ({ model: inspectedModel, maybeMessage, changedPaths, affectedPaths, }) => [
+            evo(model, {
+                maybeInspectedModel: () => Option.some(inspectedModel),
+                maybeInspectedMessage: () => maybeMessage,
+                changedPaths: () => changedPaths,
+                affectedPaths: () => affectedPaths,
+            }),
+            [],
+        ],
+        GotInspectorTabsMessage: ({ message: tabsMessage }) => {
+            const [nextTabsModel, tabsCommands] = InspectorTabs.update(model.inspectorTabs, 
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            tabsMessage);
+            return [
+                evo(model, {
+                    inspectorTabs: () => nextTabsModel,
+                }),
+                Command.mapMessages(tabsCommands, innerMessage => GotInspectorTabsMessage({ message: innerMessage })),
+            ];
+        },
+        ToggledTreeNode: ({ path }) => [
+            evo(model, {
+                expandedPaths: paths => HashSet.has(paths, path)
+                    ? HashSet.remove(paths, path)
+                    : HashSet.add(paths, path),
+            }),
+            [],
+        ],
+        ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
+            const shouldFollowSelection = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
+            const shouldFollowScroll = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused && model.isFollowingTop), M.when('Inspect', () => model.isFollowingTop), M.exhaustive);
+            const latestIndex = Array_.match(entries, {
+                onEmpty: () => INIT_INDEX,
+                onNonEmpty: () => startIndex + entries.length - 1,
+            });
+            const nextSubmodelTags = computeSubmodelTags(entries);
+            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => !Array_.contains(nextSubmodelTags, filterTag));
+            return [
+                evo(model, {
+                    entries: () => entries,
+                    initCommands: () => initCommands,
+                    initMountStarts: () => initMountStarts,
+                    startIndex: () => startIndex,
+                    isPaused: () => isPaused,
+                    pausedAtIndex: () => pausedAtIndex,
+                    submodelTags: () => nextSubmodelTags,
+                    maybeSubmodelFilter: current => isFilterStale ? Option.none() : current,
+                    submodelFilterListbox: current => isFilterStale
+                        ? evo(current, {
+                            maybeSelectedItem: () => Option.some(ALL_MESSAGES_VALUE),
+                        })
+                        : current,
+                    selectedIndex: current => shouldFollowSelection ? latestIndex : current,
+                    scrubberSlider: current => {
+                        const sliderMax = entries.length;
+                        const targetSliderValue = isPaused
+                            ? hostIndexToSliderValue(pausedAtIndex, startIndex)
+                            : sliderMax;
+                        return Slider.reflectValue(Slider.reflectRange(current, { min: 0, max: sliderMax }), targetSliderValue);
+                    },
+                }),
+                [
+                    ...(shouldFollowSelection ? [inspectLatest] : []),
+                    ...(shouldFollowScroll ? [scrollToTop] : []),
+                ],
+            ];
+        },
+        GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
+            const [nextListboxModel, listboxCommands, maybeOutMessage] = SubmodelFilterListbox.update(model.submodelFilterListbox, listboxMessage);
+            const mappedCommands = Command.mapMessages(listboxCommands, innerMessage => GotSubmodelFilterMessage({ message: innerMessage }));
+            return Option.match(maybeOutMessage, {
+                onNone: () => [
+                    evo(model, { submodelFilterListbox: () => nextListboxModel }),
+                    mappedCommands,
+                ],
+                onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+                    Selected: ({ value }) => [
+                        evo(model, {
+                            maybeSubmodelFilter: () => Option.liftPredicate(value, String_.isNonEmpty),
+                            submodelFilterListbox: () => nextListboxModel,
+                        }),
+                        mappedCommands,
+                    ],
+                })),
+            });
+        },
+        GotScrubberSliderMessage: ({ message: sliderMessage }) => {
+            const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
+            const mappedSliderCommands = Command.mapMessages(sliderCommands, innerMessage => GotScrubberSliderMessage({ message: innerMessage }));
+            const additionalCommands = Option.match(maybeOutMessage, {
+                onNone: () => [],
+                onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
+                    ChangedValue: ({ value }) => {
+                        const hostIndex = sliderValueToHostIndex(value, model.startIndex);
+                        return [jumpTo(hostIndex), inspectState(hostIndex)];
+                    },
+                })),
+            });
+            return [
+                evo(model, { scrubberSlider: () => nextSlider }),
+                [...mappedSliderCommands, ...additionalCommands],
+            ];
+        },
+    }), M.tag('CompletedJump', 'CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
+};
+// SUBSCRIPTION
+const makeOverlaySubscriptions = (store, shadow) => {
+    const sliderSubscriptions = Slider.subscriptionsForRoot(() => shadow);
+    const scrubberSubscriptions = Subscription.lift({
+        scrubberPointer: sliderSubscriptions.dragPointer,
+        scrubberEscape: sliderSubscriptions.dragEscape,
+    })({
+        toChildModel: model => model.scrubberSlider,
+        toParentMessage: message => GotScrubberSliderMessage({ message }),
+    });
+    const ownSubscriptions = Subscription.make()(_entry => ({
+        storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state))))),
+        mobileBreakpoint: Subscription.persistent(Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
+            const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
+            const handler = (event) => {
+                Queue.offerUnsafe(queue, CrossedMobileBreakpoint({ isMobile: event.matches }));
+            };
+            mediaQuery.addEventListener('change', handler);
+            return { mediaQuery, handler };
+        }), ({ mediaQuery, handler }) => Effect.sync(() => mediaQuery.removeEventListener('change', handler))).pipe(Effect.flatMap(() => Effect.never)))),
+    }));
+    return Subscription.aggregate()(ownSubscriptions, scrubberSubscriptions);
+};
+// VIEW
+const indexClass = 'text-2xs text-dt-muted font-mono min-w-5';
+const headerButtonClass = 'dt-header-button bg-transparent border-none text-dt-muted cursor-pointer text-base font-mono transition-colors';
+const ROW_BASE = 'dt-row flex items-center py-1 px-1 cursor-pointer gap-1.5 transition-colors border-b';
+const BADGE_POSITION_CLASS = {
+    BottomRight: 'dt-pos-br',
+    BottomLeft: 'dt-pos-bl',
+    TopRight: 'dt-pos-tr',
+    TopLeft: 'dt-pos-tl',
+};
+const PANEL_POSITION_CLASS = {
+    BottomRight: 'dt-panel-br',
+    BottomLeft: 'dt-panel-bl',
+    TopRight: 'dt-panel-tr',
+    TopLeft: 'dt-panel-tl',
+};
+const makeView = (position, mode, shadow, maybeBanner) => {
+    const h = html();
+    const lazyTreeNode = createKeyedLazy();
+    const lazyMessageRow = createKeyedLazy();
+    const lazyTabContent = createKeyedLazy();
+    const lazyMessageList = createLazy();
+    // JSON TREE
+    const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => h.span([h.Key('value'), h.Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => h.span([h.Key('value'), h.Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => h.span([h.Key('value'), h.Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => h.span([h.Key('value'), h.Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => h.span([h.Key('value'), h.Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => h.span([h.Key('value'), h.Class('json-null')], [String(unknownValue)])));
+    // NOTE: each row-child view declares an explicit key. snabbdom's
+    // `sameVnode` only checks `key + sel`, and foldkit element vnodes carry
+    // `sel = tagName` with classes stored in `data.class`. Without per-role
+    // keys, two unkeyed spans with different classes (e.g. `.json-key` and
+    // `.diff-dot`) are sameVnode to snabbdom, so a single DOM span gets
+    // recycled across roles as rows transition shape \u2014 and the text-node
+    // children from the old role can leak into the new role's element.
+    // Keying by role pins each slot to its own DOM element.
+    const keyView = (key) => h.span([h.Key('key'), h.Class('json-key')], [`${key}:\u00a0`]);
+    const CHEVRON_RIGHT = 'M8.25 4.5l7.5 7.5-7.5 7.5';
+    const CHEVRON_DOWN = 'M19.5 8.25l-7.5 7.5-7.5-7.5';
+    const arrowView = (isExpanded) => h.svg([
+        h.Key('arrow'),
+        h.AriaHidden(true),
+        h.Class('json-arrow shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+            h.D(isExpanded ? CHEVRON_DOWN : CHEVRON_RIGHT),
+        ], []),
+    ]);
+    const tagLabelView = (tag) => h.span([h.Key('tag'), h.Class('json-tag')], [tag]);
+    const diffDotView = h.span([h.Key('diffdot'), h.Class('diff-dot')], []);
+    const inlineDiffDotView = h.span([h.Class('diff-dot-inline')], []);
+    const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
+        const { rootPath, expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
+        const isRoot = treePath === rootPath;
+        const nodeIsExpandable = isExpandable(value);
+        const isExpanded = nodeIsExpandable && (isRoot || HashSet.has(expandedPaths, treePath));
+        const tag = isTagged(value) ? value._tag : '';
+        accumulator.push({
+            value,
+            treePath,
+            depth,
+            key,
+            isExpandable: nodeIsExpandable,
+            isExpanded,
+            isChanged: HashSet.has(changedPaths, treePath),
+            isAffected: HashSet.has(affectedPaths, treePath),
+            isRoot,
+            tag,
+        });
+        if (!isExpanded) {
+            return;
+        }
+        const childDepth = isRoot && !indentRootChildren ? depth : depth + 1;
+        if (Array.isArray(value)) {
+            value.forEach((item, arrayIndex) => flattenTree({
+                ...shared,
+                value: item,
+                treePath: `${treePath}.${arrayIndex}`,
+                depth: childDepth,
+                key: String(arrayIndex),
+            }));
+        }
+        else if (Predicate.isObject(value)) {
+            pipe(value, Record.toEntries, Array_.filter(([entryKey]) => entryKey !== '_tag'), Array_.forEach(([entryKey, childValue]) => flattenTree({
+                ...shared,
+                value: childValue,
+                treePath: `${treePath}.${entryKey}`,
+                depth: childDepth,
+                key: entryKey,
+            })));
+        }
+    };
+    const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
+        const indent = h.Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
+        const hasDiffDot = isChanged || isAffected;
+        if (!nodeIsExpandable) {
+            return h.div([
+                h.Key(treePath),
+                h.Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
+                    'diff-changed': isChanged,
+                })),
+                indent,
+            ], [
+                ...(hasDiffDot ? [diffDotView] : []),
+                ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+                leafValueView(value),
+            ]);
+        }
+        const preview = isExpanded
+            ? Array.isArray(value)
+                ? `(${value.length})`
+                : ''
+            : collapsedPreview(value);
+        return h.div([
+            h.Key(treePath),
+            h.Class(clsx('tree-row flex items-center gap-px font-mono text-2xs', {
+                'tree-row-expandable cursor-pointer': !isRoot,
+                'diff-changed': isChanged,
+            })),
+            indent,
+            ...(isRoot ? [] : [h.OnClick(ToggledTreeNode({ path: treePath }))]),
+        ], [
+            ...(isRoot ? [] : [arrowView(isExpanded)]),
+            ...(!isRoot && hasDiffDot ? [diffDotView] : []),
+            ...(String_.isNonEmpty(key) ? [keyView(key)] : []),
+            ...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
+            h.span([h.Key('value'), h.Class('json-preview')], [preview]),
+        ]);
+    };
+    const renderFlatNode = (node) => lazyTreeNode(node.treePath, flatNodeView, [
+        node.value,
+        node.treePath,
+        node.depth,
+        node.key,
+        node.isExpandable,
+        node.isExpanded,
+        node.isChanged,
+        node.isAffected,
+        node.isRoot,
+        node.tag,
+    ]);
+    const treeView = (value, rootPath, expandedPaths, changedPaths, affectedPaths, maybeRootLabel, indentRootChildren) => {
+        const nodes = [];
+        flattenTree({
+            value: toInspectableValue(value),
+            treePath: rootPath,
+            rootPath,
+            expandedPaths,
+            changedPaths,
+            affectedPaths,
+            depth: 0,
+            key: Option.getOrElse(maybeRootLabel, () => ''),
+            accumulator: nodes,
+            indentRootChildren,
+        });
+        return h.div([
+            h.Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
+        ], nodes.map(renderFlatNode));
+    };
+    const inspectedTimestamp = (model) => {
+        const selectedIndex = selectedHistoryIndex(model);
+        if (selectedIndex === INIT_INDEX) {
+            return '0ms';
+        }
+        const baseTimestamp = pipe(model.entries, Array_.head, Option.match({
+            onNone: () => 0,
+            onSome: ({ timestamp }) => timestamp,
+        }));
+        return pipe(Array_.get(model.entries, selectedIndex - model.startIndex), Option.map(entry => {
+            const delta = entry.timestamp - baseTimestamp;
+            const seconds = Math.floor(delta / MILLIS_PER_SECOND);
+            const remainingMs = delta % MILLIS_PER_SECOND;
+            return seconds > 0
+                ? `+${seconds}s ${remainingMs.toFixed(1)}ms`
+                : `+${remainingMs.toFixed(1)}ms`;
+        }), Option.getOrElse(() => ''));
+    };
+    const emptyInspectorView = h.div([
+        h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+    ], ['Click a message to inspect']);
+    const noMessageView = h.div([
+        h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+    ], ['init: no Message']);
+    const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
+    const unwrapIfFiltered = (message, maybeSubmodelFilter) => {
+        if (Option.isNone(maybeSubmodelFilter)) {
+            return message;
+        }
+        const { value: filterTag } = maybeSubmodelFilter;
+        let current = message;
+        let matched = false;
+        while (isTagged(current) && GOT_MESSAGE_PATTERN.test(current._tag)) {
+            if (current._tag === filterTag) {
+                matched = true;
+            }
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            const inner = current?.['message'];
+            if (inner === undefined) {
+                break;
+            }
+            current = inner;
+            if (matched) {
+                break;
+            }
+        }
+        return current;
+    };
+    const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, expandedPaths, timestamp) => Option.match(maybeInspectedMessage, {
+        onNone: () => noMessageView,
+        onSome: rawMessage => {
+            const message = unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
+            return h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
+                h.div([
+                    h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+                ], [timestamp]),
+                h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
+                    treeView(message, 'root', expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
+                ]),
+            ]);
+        },
+    });
+    const selectedHistoryIndex = (model) => {
+        const lastIndex = Array_.match(model.entries, {
+            onEmpty: () => INIT_INDEX,
+            onNonEmpty: () => model.startIndex + model.entries.length - 1,
+        });
+        return M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
+    };
+    const selectedCommands = (model) => {
+        const selectedIndex = selectedHistoryIndex(model);
+        if (selectedIndex === INIT_INDEX) {
+            return model.initCommands;
+        }
+        else {
+            return pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.map(entry => entry.commands), Option.getOrElse(() => NO_COMMANDS));
+        }
+    };
+    const flattenCommand = (command, index, expandedPaths) => {
+        const taggedValue = Option.match(command.args, {
+            onNone: () => ({ _tag: command.name }),
+            onSome: argsValue => ({ ...argsValue, _tag: command.name }),
+        });
+        const rootPath = `command-${index}`;
+        const nodes = [];
+        flattenTree({
+            value: toInspectableValue(taggedValue),
+            treePath: rootPath,
+            rootPath,
+            expandedPaths,
+            changedPaths: HashSet.empty(),
+            affectedPaths: HashSet.empty(),
+            depth: 0,
+            key: '',
+            accumulator: nodes,
+            indentRootChildren: false,
+        });
+        return nodes;
+    };
+    const commandsTabContent = (commands, expandedPaths) => Array_.match(commands, {
+        onEmpty: () => h.div([
+            h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+        ], ['No Commands returned']),
+        onNonEmpty: commandList => h.div([
+            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+        ], Array_.map(commandList, (command, index) => h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
+            h.span([h.Class(indexClass)], [String(index + 1)]),
+            h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
+        ]))),
+    });
+    const selectedMountActivity = (model) => {
+        const selectedIndex = selectedHistoryIndex(model);
+        if (selectedIndex === INIT_INDEX) {
+            return { starts: model.initMountStarts, ends: NO_MOUNTS };
+        }
+        else {
+            return pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.match({
+                onNone: () => ({ starts: NO_MOUNTS, ends: NO_MOUNTS }),
+                onSome: entry => ({
+                    starts: entry.mountStarts,
+                    ends: entry.mountEnds,
+                }),
+            }));
+        }
+    };
+    const flattenMount = (mount, sectionLabel, index, expandedPaths) => {
+        const taggedValue = Option.match(mount.args, {
+            onNone: () => ({ _tag: mount.name }),
+            onSome: argsValue => ({ ...argsValue, _tag: mount.name }),
+        });
+        const rootPath = `mount-${sectionLabel}-${index}`;
+        const nodes = [];
+        flattenTree({
+            value: toInspectableValue(taggedValue),
+            treePath: rootPath,
+            rootPath,
+            expandedPaths,
+            changedPaths: HashSet.empty(),
+            affectedPaths: HashSet.empty(),
+            depth: 0,
+            key: '',
+            accumulator: nodes,
+            indentRootChildren: false,
+        });
+        return nodes;
+    };
+    const mountListSection = (label, mounts, expandedPaths) => h.div([h.Class('flex flex-col shrink-0')], [
+        h.div([
+            h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+        ], [label]),
+        ...Array_.map(mounts, (mount, index) => h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
+            h.span([h.Class(indexClass)], [String(index + 1)]),
+            h.div([h.Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
+        ])),
+    ]);
+    const mountsTabContent = (starts, ends, expandedPaths) => {
+        const hasAny = Array_.isReadonlyArrayNonEmpty(starts) ||
+            Array_.isReadonlyArrayNonEmpty(ends);
+        if (!hasAny) {
+            return h.div([
+                h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
+            ], ['No Mounts during this render']);
+        }
+        return h.div([
+            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+        ], [
+            ...(Array_.isReadonlyArrayNonEmpty(starts)
+                ? [mountListSection('Started', starts, expandedPaths)]
+                : []),
+            ...(Array_.isReadonlyArrayNonEmpty(ends)
+                ? [mountListSection('Ended', ends, expandedPaths)]
+                : []),
+        ]);
+    };
+    const inspectorTabContent = (model, tab, inspectedModel) => M.value(tab).pipe(M.when('Model', () => lazyTabContent('Model', modelTabContent, [
+        inspectedModel,
+        model.expandedPaths,
+        model.changedPaths,
+        model.affectedPaths,
+    ])), M.when('Message', () => lazyTabContent('Message', messageTabContent, [
+        model.maybeInspectedMessage,
+        model.maybeSubmodelFilter,
+        model.expandedPaths,
+        inspectedTimestamp(model),
+    ])), M.when('Commands', () => lazyTabContent('Commands', commandsTabContent, [
+        selectedCommands(model),
+        model.expandedPaths,
+    ])), M.when('Mounts', () => {
+        const { starts, ends } = selectedMountActivity(model);
+        return lazyTabContent('Mounts', mountsTabContent, [
+            starts,
+            ends,
+            model.expandedPaths,
+        ]);
+    }), M.exhaustive);
+    const inspectorPaneView = (model) => h.div([
+        h.Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
+    ], [
+        h.submodel({
+            slotId: model.inspectorTabs.id,
+            model: model.inspectorTabs,
+            view: InspectorTabs.view,
+            viewInputs: {
+                tabs: INSPECTOR_TABS,
+                ariaLabel: 'Inspector tabs',
+                toView: ({ tablist, tabs, activeIndex }) => h.div([h.Class('flex flex-col flex-1 min-h-0')], [
+                    h.div([...tablist, h.Class('flex border-b shrink-0')], tabs.map(tab => h.button([
+                        ...tab.tab,
+                        h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', tab.isActive
+                            ? 'text-dt dt-tab-active'
+                            : 'text-dt-muted')),
+                    ], [h.span([], [tab.value])]))),
+                    ...tabs.map(tab => h.div([
+                        ...tab.panel,
+                        h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
+                        h.Hidden(tab.index !== activeIndex),
+                        ...(tab.index === activeIndex
+                            ? []
+                            : [h.Style({ display: 'none' })]),
+                    ], [
+                        Option.match(model.maybeInspectedModel, {
+                            onNone: () => emptyInspectorView,
+                            onSome: inspectedModel => inspectorTabContent(model, tab.value, inspectedModel),
+                        }),
+                    ])),
+                ]),
+            },
+            toParentMessage: message => GotInspectorTabsMessage({ message }),
+        }),
+    ]);
+    // MESSAGE LIST
+    const badgeView = (model) => h.button([
+        h.Class(clsx('fixed bg-dt-bg text-dt cursor-pointer flex flex-col items-center justify-center font-mono outline-none dt-badge', BADGE_POSITION_CLASS[position], model.isPaused ? 'dt-badge-paused' : 'dt-badge-accent')),
+        h.Style({ width: '22px', height: '56px', fontSize: '10px' }),
+        h.OnClick(ClickedToggle()),
+    ], [
+        model.isOpen
+            ? h.svg([
+                h.AriaHidden(true),
+                h.Xmlns('http://www.w3.org/2000/svg'),
+                h.Fill('none'),
+                h.ViewBox('0 0 24 24'),
+                h.StrokeWidth('1.5'),
+                h.Stroke('currentColor'),
+                h.Style({ width: '12px', height: '12px' }),
+            ], [
+                h.path([
+                    h.StrokeLinecap('round'),
+                    h.StrokeLinejoin('round'),
+                    h.D('M6 18L18 6M6 6l12 12'),
+                ], []),
+            ])
+            : h.div([
+                h.Class(clsx('flex flex-col items-center gap-0.5 font-semibold tracking-wider leading-none', model.isPaused ? 'text-dt-bg' : 'text-dt-muted')),
+            ], [h.span([], ['D']), h.span([], ['E']), h.span([], ['V'])]),
+    ]);
+    const headerClass = 'flex items-center justify-between px-3 py-1.5 border-b shrink-0';
+    const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
+    const statusClass = 'text-base font-mono';
+    const clearHistoryButton = h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
+    const submodelLabel = (tag) => pipe(tag, String_.replace(/^Got/, ''), String_.replace(/Message$/, ''));
+    const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
+    const checkIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-filter-check shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+    ]);
+    const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
+    const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
+    const arrowUpIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-scroll-pill-icon shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([h.D(ARROW_UP), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+    ]);
+    const scrollToTopPillView = h.button([
+        h.Key('scroll-pill'),
+        h.Class('dt-scroll-pill'),
+        h.OnClick(ClickedScrollToTopPill()),
+    ], [
+        arrowUpIconView,
+        h.span([h.Class('dt-scroll-pill-text')], ['Jump to top']),
+    ]);
+    const submodelFilterView = (model) => {
+        const buttonLabel = Option.match(model.maybeSubmodelFilter, {
+            onNone: () => 'All Messages',
+            onSome: submodelLabel,
+        });
+        return h.submodel({
+            slotId: 'submodel-filter',
+            model: model.submodelFilterListbox,
+            view: SubmodelFilterListbox.view,
+            viewInputs: {
+                items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
+                itemToConfig: item => ({
+                    className: 'dt-filter-item',
+                    content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
+                }),
+                buttonContent: h.span([h.Class('flex flex-1 items-center justify-between')], [
+                    h.span([], [buttonLabel]),
+                    h.svg([
+                        h.AriaHidden(true),
+                        h.Class('json-arrow shrink-0'),
+                        h.Xmlns('http://www.w3.org/2000/svg'),
+                        h.Fill('none'),
+                        h.ViewBox('0 0 24 24'),
+                        h.StrokeWidth('2'),
+                        h.Stroke('currentColor'),
+                    ], [
+                        h.path([
+                            h.D(CHEVRON_DOWN),
+                            h.StrokeLinecap('round'),
+                            h.StrokeLinejoin('round'),
+                        ], []),
+                    ]),
+                ]),
+                buttonClassName: 'dt-filter-button',
+                itemsClassName: 'dt-filter-items',
+                className: 'dt-filter-wrapper',
+                attributes: childAttributes([h.Key('submodel-filter')]),
+                backdropClassName: 'dt-filter-backdrop',
+            },
+            toParentMessage: message => GotSubmodelFilterMessage({ message }),
+        });
+    };
+    const headerView = (model) => {
+        const { status, maybeAction } = M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => model.isPaused
+            ? {
+                status: h.span([h.Class(`${statusClass} text-dt-paused`)], [
+                    model.pausedAtIndex === INIT_INDEX
+                        ? 'Paused (init)'
+                        : `Paused (${model.pausedAtIndex + 1})`,
+                ]),
+                maybeAction: Option.some(h.button([h.Class(actionButtonClass), h.OnClick(ClickedResume())], ['Resume →'])),
+            }
+            : {
+                status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
+                maybeAction: Option.none(),
+            }), M.when('Inspect', () => ({
+            status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
+                model.selectedIndex === INIT_INDEX
+                    ? 'Inspecting (init)'
+                    : `Inspecting (${model.selectedIndex + 1})`,
+            ]),
+            maybeAction: OptionExt.when(!model.isFollowingLatest, h.button([h.Class(actionButtonClass), h.OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
+        })), M.exhaustive);
+        const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton);
+        return h.header([h.Class(headerClass)], [
+            status,
+            ...Option.toArray(maybeAction),
+            ...Option.toArray(maybeClearHistoryButton),
+        ]);
+    };
+    const initRowView = (isSelected, isPausedHere) => h.keyed('li')('init', [
+        h.Class(clsx(ROW_BASE, { selected: isSelected })),
+        h.OnClick(ClickedRow({ index: INIT_INDEX })),
+    ], [
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
+        h.span([h.Class('dot-column')], []),
+        h.span([h.Class(indexClass)], []),
+        h.span([h.Class('text-base text-dt-muted font-mono')], ['init']),
+    ]);
+    const pauseIconView = h.svg([
+        h.AriaHidden(true),
+        h.Class('dt-pause-icon'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2.5'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([
+            h.StrokeLinecap('round'),
+            h.StrokeLinejoin('round'),
+            h.D('M5.75 3v18M18.25 3v18'),
+        ], []),
+    ]);
+    const messageRowView = (tag, absoluteIndex, isSelected, isPausedHere, timeDelta, isModelChanged) => h.keyed('li')(String(absoluteIndex), [
+        h.Class(clsx(ROW_BASE, { selected: isSelected })),
+        h.OnClick(ClickedRow({ index: absoluteIndex })),
+    ], [
+        ...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
+        h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView] : []),
+        h.span([h.Class(indexClass)], [String(absoluteIndex + 1)]),
+        h.span([h.Class('text-base text-dt font-mono flex-1 truncate')], [tag]),
+        h.span([
+            h.Class('text-2xs text-dt-muted font-mono shrink-0 text-right min-w-5'),
+        ], [formatTimeDelta(timeDelta)]),
+    ]);
+    const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag) => {
+        const baseTimestamp = pipe(entries, Array_.head, Option.match({
+            onNone: () => 0,
+            onSome: ({ timestamp }) => timestamp,
+        }));
+        const isInitSelected = selectedIndex === INIT_INDEX;
+        const isFiltered = Option.isSome(maybeFilterTag);
+        const indexedEntries = pipe(entries, Array_.map((entry, arrayIndex) => ({
+            entry,
+            absoluteIndex: startIndex + arrayIndex,
+        })), isFiltered
+            ? Array_.filter(({ entry }) => Array_.contains(entry.submodelPath, maybeFilterTag.value))
+            : Function.identity);
+        const messageRows = pipe(indexedEntries, Array_.map(({ entry, absoluteIndex }) => {
+            const isSelected = selectedIndex === absoluteIndex;
+            const isPausedHere = isPaused && pausedAtIndex === absoluteIndex;
+            const displayTag = isFiltered
+                ? pipe(entry.submodelPath, Array_.findFirstIndex(Equal.equals(maybeFilterTag.value)), Option.flatMap(filterIndex => Array_.get(entry.submodelPath, Number_.increment(filterIndex))), Option.orElse(() => entry.maybeLeafTag), Option.getOrElse(() => entry.tag))
+                : entry.tag;
+            return lazyMessageRow(String(absoluteIndex), messageRowView, [
+                displayTag,
+                absoluteIndex,
+                isSelected,
+                isPausedHere,
+                entry.timestamp - baseTimestamp,
+                entry.isModelChanged,
+            ]);
+        }), Array_.reverse);
+        return h.ul([
+            h.Key('message-list'),
+            h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
+            h.OnScroll(scrollTop => ScrolledMessageList({ scrollTop })),
+        ], isFiltered
+            ? messageRows
+            : [
+                ...messageRows,
+                initRowView(isInitSelected, isPaused && pausedAtIndex === INIT_INDEX),
+            ]);
+    };
+    const messageListView = (model) => {
+        const selectedIndex = selectedHistoryIndex(model);
+        return lazyMessageList(messageListBody, [
+            model.entries,
+            model.startIndex,
+            selectedIndex,
+            model.isPaused,
+            model.pausedAtIndex,
+            model.maybeSubmodelFilter,
+        ]);
+    };
+    // SCRUBBER
+    const scrubberPositionLabel = (model) => {
+        const total = String(model.entries.length).padStart(3, '0');
+        const current = String(model.scrubberSlider.value).padStart(3, '0');
+        return `${current} / ${total}`;
+    };
+    const scrubberView = (model) => h.submodel({
+        slotId: model.scrubberSlider.id,
+        model: model.scrubberSlider,
+        view: Slider.view,
+        viewInputs: {
+            ariaLabel: 'Session scrubber',
+            getTrackRoot: () => shadow,
+            formatValue: value => value === 0 ? 'init' : `Message ${String(value)}`,
+            toView: attributes => h.div([
+                h.Class('dt-scrubber-row flex items-center gap-3 px-3 py-2 border-t shrink-0'),
+            ], [
+                h.div([
+                    ...attributes.root,
+                    h.Class('dt-scrubber-control flex-1 flex items-center'),
+                ], [
+                    h.div([...attributes.track, h.Class('dt-scrubber-track')], [
+                        h.div([
+                            ...attributes.filledTrack,
+                            h.Class('dt-scrubber-fill'),
+                        ], []),
+                        h.div([...attributes.thumb, h.Class('dt-scrubber-thumb')], []),
+                    ]),
+                ]),
+                h.span([
+                    h.Class('dt-scrubber-position text-2xs text-dt-muted font-mono shrink-0 tabular-nums'),
+                ], [scrubberPositionLabel(model)]),
+            ]),
+        },
+        toParentMessage: message => GotScrubberSliderMessage({ message }),
+    });
+    // PANEL
+    const isScrubberVisible = mode === 'TimeTravel';
+    const panelView = (model) => h.keyed('div')('dt-panel', [
+        h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
+    ], [
+        ...Option.map(maybeBanner, banner => h.div([
+            h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
+        ], [banner])).pipe(Option.toArray),
+        headerView(model),
+        h.div([h.Class('flex flex-1 min-h-0 dt-content')], [
+            h.div([h.Class('flex flex-col min-h-0 dt-message-pane')], [
+                ...Array_.match(model.submodelTags, {
+                    onEmpty: () => [],
+                    onNonEmpty: () => [submodelFilterView(model)],
+                }),
+                ...OptionExt.when(!model.isFollowingTop, scrollToTopPillView).pipe(Option.toArray),
+                messageListView(model),
+            ]),
+            inspectorPaneView(model),
+        ]),
+        ...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
+    ]);
+    const interactionBlocker = h.div([h.Class('dt-interaction-blocker')], []);
+    return (model) => h.div([], [
+        ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker).pipe(Option.toArray),
+        ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
+        badgeView(model),
+    ]);
+};
+// CREATE
+const createShadowContainer = () => {
+    const existingHost = document.getElementById(DEVTOOLS_HOST_ID);
+    if (existingHost) {
+        existingHost.remove();
+    }
+    const host = document.createElement('div');
+    host.id = DEVTOOLS_HOST_ID;
+    host.addEventListener('pointerdown', event => {
+        const activeElement = document.activeElement;
+        if (activeElement !== null &&
+            activeElement !== host &&
+            activeElement !== document.body) {
+            event.preventDefault();
+        }
+    }, { capture: true });
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: 'open' });
+    const styleElement = document.createElement('style');
+    styleElement.textContent = overlayStyles;
+    shadow.appendChild(styleElement);
+    const container = document.createElement('div');
+    shadow.appendChild(container);
+    return { container, shadow };
+};
+export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(function* () {
+    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => createShadowContainer()), createdShadowContainer => Effect.sync(() => {
+        createdShadowContainer.shadow.host.remove();
+    }));
+    container.id = '__foldkit_devtools_overlay__';
+    const flags = Effect.gen(function* () {
+        const storeState = yield* SubscriptionRef.get(store.stateRef);
+        return {
+            isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
+            ...toDisplayState(storeState),
+        };
+    });
+    const init = (flags) => {
+        const sliderMax = flags.entries.length;
+        const initialSliderValue = flags.isPaused
+            ? hostIndexToSliderValue(flags.pausedAtIndex, flags.startIndex)
+            : sliderMax;
+        return [
+            {
+                isOpen: false,
+                ...flags,
+                selectedIndex: INIT_INDEX,
+                isFollowingLatest: true,
+                isFollowingTop: true,
+                submodelTags: computeSubmodelTags(flags.entries),
+                maybeSubmodelFilter: Option.none(),
+                submodelFilterListbox: Listbox.init({
+                    id: SUBMODEL_FILTER_ID,
+                    selectedItem: ALL_MESSAGES_VALUE,
+                }),
+                maybeInspectedModel: Option.none(),
+                maybeInspectedMessage: Option.none(),
+                expandedPaths: HashSet.empty(),
+                changedPaths: HashSet.empty(),
+                affectedPaths: HashSet.empty(),
+                inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
+                scrubberSlider: Slider.init({
+                    id: SCRUBBER_SLIDER_ID,
+                    min: 0,
+                    max: sliderMax,
+                    step: 1,
+                    initialValue: initialSliderValue,
+                }),
+            },
+            [],
+        ];
+    };
+    const overlayRuntime = makeElement({
+        Model,
+        Flags,
+        flags,
+        init,
+        update: makeUpdate(store, shadow, mode),
+        view: makeView(position, mode, shadow, maybeBanner),
+        container,
+        subscriptions: makeOverlaySubscriptions(store, shadow),
+        devTools: false,
+        freezeModel: false,
+    });
+    yield* Effect.forkScoped(overlayRuntime.start());
+});