foldkit 0.87.0 → 0.88.0

package/dist/command/index.d.ts

@@ -3,41 +3,88 @@ import { Effect, Schema } from 'effect';
 export declare const CommandDefinitionTypeId: unique symbol;
 /** Type-level brand for CommandDefinition values. */
 export type CommandDefinitionTypeId = typeof CommandDefinitionTypeId;
-/** A named Effect that produces a message. */
+/** A named Effect that produces a message, optionally carrying the args used to construct it. */
 export type Command<T, E = never, R = never> = [T] extends [Schema.Top] ? Readonly<{
     name: string;
+    args?: Record<string, unknown>;
     effect: Effect.Effect<Schema.Schema.Type<T>, E, R>;
 }> : Readonly<{
     name: string;
+    args?: Record<string, unknown>;
     effect: Effect.Effect<T, E, R>;
 }>;
-/** A Command identity created with `Command.define`. Call with an Effect to create a Command. */
-export interface CommandDefinition<Name extends string, ResultMessage = any> {
+/** A Command definition for a Command with no declared args. Call as `Definition()` to produce a Command instance. */
+export interface CommandDefinitionNoArgs<Name extends string, Eff extends Effect.Effect<any, any, any>> {
     readonly [CommandDefinitionTypeId]: CommandDefinitionTypeId;
     readonly name: Name;
-    <CommandEffect extends Effect.Effect<ResultMessage, any, any>>(effect: CommandEffect): Readonly<{
+    (): Readonly<{
         name: Name;
-        effect: CommandEffect;
+        effect: Eff;
     }>;
 }
-/** Defines a named Command identity with the Messages it returns. */
-export declare const define: {
-    <const Name extends string, Results extends ReadonlyArray<Schema.Top>>(name: Name, ...results: Results): CommandDefinition<Name, Schema.Schema.Type<Results[number]>>;
-};
-/** Transforms the Effect inside a Command while preserving its name. */
+/** A Command definition for a Command with declared args. Call as `Definition(args)` to produce a Command instance. */
+export interface CommandDefinitionWithArgs<Name extends string, Fields extends Schema.Struct.Fields, Eff extends Effect.Effect<any, any, any>> {
+    readonly [CommandDefinitionTypeId]: CommandDefinitionTypeId;
+    readonly name: Name;
+    (args: Schema.Schema.Type<Schema.Struct<Fields>>): Readonly<{
+        name: Name;
+        args: Schema.Schema.Type<Schema.Struct<Fields>>;
+        effect: Eff;
+    }>;
+}
+/** A Command definition created with `Command.define`. Union over the no-args and with-args shapes; consumers that only need name/identity can accept this. */
+export type CommandDefinition<Name extends string = string, ResultMessage = any> = CommandDefinitionNoArgs<Name, Effect.Effect<ResultMessage, any, any>> | CommandDefinitionWithArgs<Name, any, Effect.Effect<ResultMessage, any, any>>;
+/**
+ * Defines a Command. Two forms, distinguished by whether the second argument
+ * is a Schema (a result message) or a record of Schemas (the args declaration).
+ *
+ * The Effect (or effect builder) is bound at definition time. The returned
+ * Definition is callable: with no args for a Command that doesn't declare any,
+ * or with the declared args record otherwise.
+ *
+ * @example No args
+ * ```ts
+ * const LockScroll = Command.define('LockScroll', CompletedLockScroll)(
+ *   Dom.lockScroll.pipe(Effect.as(CompletedLockScroll())),
+ * )
+ * // Call site:
+ * LockScroll()
+ * ```
+ *
+ * @example With args
+ * ```ts
+ * const FetchWeather = Command.define(
+ *   'FetchWeather',
+ *   { zipCode: S.String },
+ *   SucceededFetchWeather,
+ *   FailedFetchWeather,
+ * )(({ zipCode }) =>
+ *   Effect.gen(function* () { ... }),
+ * )
+ * // Call site:
+ * FetchWeather({ zipCode: '90210' })
+ * ```
+ */
+export declare function define<const Name extends string, Results extends ReadonlyArray<Schema.Top>>(name: Name, ...results: Results): <Eff extends Effect.Effect<Schema.Schema.Type<Results[number]>, any, any>>(effect: Eff) => CommandDefinitionNoArgs<Name, Eff>;
+export declare function define<const Name extends string, Fields extends Schema.Struct.Fields, Results extends ReadonlyArray<Schema.Top>>(name: Name, args: Fields, ...results: Results): <Eff extends Effect.Effect<Schema.Schema.Type<Results[number]>, any, any>>(effectBuilder: (args: Schema.Schema.Type<Schema.Struct<Fields>>) => Eff) => CommandDefinitionWithArgs<Name, Fields, Eff>;
+/** Transforms the Effect inside a Command while preserving its name and args. */
 export declare const mapEffect: {
-    <A, E, R, B>(f: (effect: Effect.Effect<A, E, R>) => Effect.Effect<B, E, R>): (command: Readonly<{
+    <A, E1, R1, B, E2, R2>(f: (effect: Effect.Effect<A, E1, R1>) => Effect.Effect<B, E2, R2>): (command: Readonly<{
         name: string;
-        effect: Effect.Effect<A, E, R>;
+        args?: Record<string, unknown>;
+        effect: Effect.Effect<A, E1, R1>;
     }>) => Readonly<{
         name: string;
-        effect: Effect.Effect<B, E, R>;
+        args?: Record<string, unknown>;
+        effect: Effect.Effect<B, E2, R2>;
     }>;
     <A, E1, R1, B, E2, R2>(command: Readonly<{
         name: string;
+        args?: Record<string, unknown>;
         effect: Effect.Effect<A, E1, R1>;
     }>, f: (effect: Effect.Effect<A, E1, R1>) => Effect.Effect<B, E2, R2>): Readonly<{
         name: string;
+        args?: Record<string, unknown>;
         effect: Effect.Effect<B, E2, R2>;
     }>;
 };

package/dist/command/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/command/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/command/index.ts"],"names":[],"mappings":"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"}

package/dist/command/index.js

@@ -1,23 +1,48 @@
+import { Schema } from 'effect';
 /** Type-level brand for CommandDefinition values. */
 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
 export const CommandDefinitionTypeId = Symbol.for('foldkit/CommandDefinition');
-/** Defines a named Command identity with the Messages it returns. */
-export const define = (name, ..._results) => {
-    const create = (effect) => ({
-        name,
-        effect,
-    });
-    Object.defineProperty(create, 'name', { value: name, configurable: true });
-    Object.defineProperty(create, CommandDefinitionTypeId, {
-        value: CommandDefinitionTypeId,
-    });
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    return create;
-};
-/** Transforms the Effect inside a Command while preserving its name. */
+export function define(name, ...rest) {
+    const [maybeArgs] = rest;
+    const isArgsRecord = maybeArgs !== undefined &&
+        typeof maybeArgs === 'object' &&
+        maybeArgs !== null &&
+        !Schema.isSchema(maybeArgs);
+    if (isArgsRecord) {
+        return (effectBuilder) => {
+            const definition = (args) => ({
+                name,
+                args,
+                effect: effectBuilder(args),
+            });
+            Object.defineProperty(definition, 'name', {
+                value: name,
+                configurable: true,
+            });
+            Object.defineProperty(definition, CommandDefinitionTypeId, {
+                value: CommandDefinitionTypeId,
+            });
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            return definition;
+        };
+    }
+    return (effect) => {
+        const definition = () => ({ name, effect });
+        Object.defineProperty(definition, 'name', {
+            value: name,
+            configurable: true,
+        });
+        Object.defineProperty(definition, CommandDefinitionTypeId, {
+            value: CommandDefinitionTypeId,
+        });
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        return definition;
+    };
+}
+/** Transforms the Effect inside a Command while preserving its name and args. */
 export const mapEffect = ((...args) => args.length === 1
     ? (command) => ({
-        name: command.name,
+        ...command,
         effect: args[0](command.effect),
     })
-    : { name: args[0].name, effect: args[1](args[0].effect) });
+    : { ...args[0], effect: args[1](args[0].effect) });

package/dist/command/public.d.ts

@@ -1,3 +1,3 @@
-export type { Command, CommandDefinition } from './index.js';
+export type { Command, CommandDefinition, CommandDefinitionNoArgs, CommandDefinitionWithArgs, } from './index.js';
 export { CommandDefinitionTypeId, define, mapEffect } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/command/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/command/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/command/public.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,uBAAuB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA"}

package/dist/devTools/overlay.d.ts

@@ -1,38 +1,62 @@
-import { Effect, HashSet, Option } from 'effect';
+import { Context, Effect, HashSet, Option, Schema as S, SubscriptionRef } from 'effect';
 import * as Command from '../command/index.js';
 import type { DevToolsMode, DevToolsPosition } from '../runtime/runtime.js';
-import { type DevToolsStore } from './store.js';
-export declare const JumpTo: Command.CommandDefinition<"JumpTo", {
+import { type CommandRecord, type DevToolsStore, type StoreState } from './store.js';
+declare const StoreService_base: Context.ServiceClass<StoreService, "foldkit/DevToolsStore", Readonly<{
+    recordInit: (model: unknown, commands: ReadonlyArray<CommandRecord>, mountStartNames?: ReadonlyArray<string>) => Effect.Effect<void>;
+    recordMessage: (message: Readonly<{
+        _tag: string;
+    }>, modelBeforeUpdate: unknown, modelAfterUpdate: unknown, commands: ReadonlyArray<CommandRecord>, isModelChanged: boolean) => Effect.Effect<void>;
+    attachRenderedMounts: (mountStartNames: ReadonlyArray<string>, mountEndNames: ReadonlyArray<string>) => Effect.Effect<void>;
+    getModelAtIndex: (index: number) => Effect.Effect<unknown>;
+    getMessageAtIndex: (index: number) => Effect.Effect<Option.Option<unknown>>;
+    getDiffAtIndex: (index: number) => Effect.Effect<import("./store.js").DiffResult>;
+    jumpTo: (index: number) => Effect.Effect<void>;
+    resume: Effect.Effect<void>;
+    clear: Effect.Effect<void>;
+    stateRef: SubscriptionRef.SubscriptionRef<StoreState>;
+}>>;
+declare class StoreService extends StoreService_base {
+}
+declare const ShadowRootService_base: Context.ServiceClass<ShadowRootService, "foldkit/DevToolsShadowRoot", ShadowRoot>;
+declare class ShadowRootService extends ShadowRootService_base {
+}
+export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", Effect.Effect<{
+    readonly _tag: "LockedScroll";
+}, never, never>>;
+export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll", Effect.Effect<{
+    readonly _tag: "UnlockedScroll";
+}, never, never>>;
+export declare const JumpTo: Command.CommandDefinitionWithArgs<"JumpTo", {
+    index: S.Number;
+}, Effect.Effect<{
     readonly _tag: "CompletedJump";
-}>;
-export declare const InspectState: Command.CommandDefinition<"InspectState", {
+}, never, StoreService>>;
+export declare const InspectState: Command.CommandDefinitionWithArgs<"InspectState", {
+    index: S.Number;
+}, Effect.Effect<{
     readonly _tag: "ReceivedInspectedState";
     readonly model: unknown;
     readonly changedPaths: HashSet.HashSet<string>;
     readonly affectedPaths: HashSet.HashSet<string>;
     readonly maybeMessage: Option.Option<unknown>;
-}>;
-export declare const InspectLatest: Command.CommandDefinition<"InspectLatest", {
+}, never, StoreService>>;
+export declare const InspectLatest: Command.CommandDefinitionNoArgs<"InspectLatest", Effect.Effect<{
     readonly _tag: "ReceivedInspectedState";
     readonly model: unknown;
     readonly changedPaths: HashSet.HashSet<string>;
     readonly affectedPaths: HashSet.HashSet<string>;
     readonly maybeMessage: Option.Option<unknown>;
-}>;
-export declare const Resume: Command.CommandDefinition<"Resume", {
+}, never, StoreService>>;
+export declare const Resume: Command.CommandDefinitionNoArgs<"Resume", Effect.Effect<{
     readonly _tag: "CompletedResume";
-}>;
-export declare const Clear: Command.CommandDefinition<"Clear", {
+}, never, StoreService>>;
+export declare const Clear: Command.CommandDefinitionNoArgs<"Clear", Effect.Effect<{
     readonly _tag: "CompletedClear";
-}>;
-export declare const LockScroll: Command.CommandDefinition<"LockScroll", {
-    readonly _tag: "LockedScroll";
-}>;
-export declare const UnlockScroll: Command.CommandDefinition<"UnlockScroll", {
-    readonly _tag: "UnlockedScroll";
-}>;
-export declare const ScrollToTop: Command.CommandDefinition<"ScrollToTop", {
+}, never, StoreService>>;
+export declare const ScrollToTop: Command.CommandDefinitionNoArgs<"ScrollToTop", Effect.Effect<{
     readonly _tag: "ScrolledToTop";
-}>;
+}, never, ShadowRootService>>;
 export declare const createOverlay: (store: DevToolsStore, position: DevToolsPosition, mode: DevToolsMode, maybeBanner: Option.Option<string>) => Effect.Effect<void, never, never>;
+export {};
 //# sourceMappingURL=overlay.d.ts.map

package/dist/devTools/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAGN,OAAO,EAGP,MAAM,EAUP,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAY9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,YAAY,CAAA;AAqO5E,eAAO,MAAM,MAAM;;EAA0C,CAAA;AAC7D,eAAO,MAAM,YAAY;;;;;;EAGxB,CAAA;AACD,eAAO,MAAM,aAAa;;;;;;EAGzB,CAAA;AACD,eAAO,MAAM,MAAM;;EAA4C,CAAA;AAC/D,eAAO,MAAM,KAAK;;EAA0C,CAAA;AAC5D,eAAO,MAAM,UAAU;;EAA6C,CAAA;AACpE,eAAO,MAAM,YAAY;;EAAiD,CAAA;AAC1E,eAAO,MAAM,WAAW;;EAA+C,CAAA;AAs9CvE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devTools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAY9C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAO3E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAElB,KAAK,UAAU,EAChB,MAAM,YAAY,CAAA;;wFAoYT,CAAF;;;;;;;;;;;;;AAnJR,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAWjD,eAAO,MAAM,MAAM;;;;wBAUlB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBAYzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAw9CD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCAoDhC,CAAA"}

package/dist/devTools/overlay.js

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { Array as Array_, 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 { 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 '../command/index.js';
 import { lockScroll, unlockScroll } from '../dom/scrollLock.js';
 import { OptionExt } from '../effectExtensions/index.js';
@@ -12,14 +12,18 @@ import * as Listbox from '../ui/listbox/public.js';
 import * as Tabs from '../ui/tabs/public.js';
 import { overlayStyles } from './overlay-styles.js';
 import { toInspectableValue } from './serialize.js';
-import { INIT_INDEX } from './store.js';
+import { INIT_INDEX, } from './store.js';
 import { GOT_MESSAGE_PATTERN, extractSubmodelInfo, isTagged, } from './submodelPath.js';
 // MODEL
+const DisplayCommand = 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),
-    commandNames: S.Array(S.String),
+    commands: S.Array(DisplayCommand),
     mountStartNames: S.Array(S.String),
     mountEndNames: S.Array(S.String),
     timestamp: S.Number,
@@ -49,7 +53,7 @@ const Model = S.Struct({
     isOpen: S.Boolean,
     isMobile: S.Boolean,
     entries: S.Array(DisplayEntry),
-    initCommandNames: S.Array(S.String),
+    initCommands: S.Array(DisplayCommand),
     initMountStartNames: S.Array(S.String),
     startIndex: S.Number,
     isPaused: S.Boolean,
@@ -69,7 +73,7 @@ const Model = S.Struct({
 const Flags = S.Struct({
     isMobile: S.Boolean,
     entries: S.Array(DisplayEntry),
-    initCommandNames: S.Array(S.String),
+    initCommands: S.Array(DisplayCommand),
     initMountStartNames: S.Array(S.String),
     startIndex: S.Number,
     isPaused: S.Boolean,
@@ -102,7 +106,7 @@ const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
 });
 const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
     entries: S.Array(DisplayEntry),
-    initCommandNames: S.Array(S.String),
+    initCommands: S.Array(DisplayCommand),
     initMountStartNames: S.Array(S.String),
     startIndex: S.Number,
     isPaused: S.Boolean,
@@ -146,13 +150,17 @@ 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';
 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 toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
     const { submodelPath, maybeLeafTag } = extractSubmodelInfo(entry.tag, entry.message);
     return {
         tag: entry.tag,
         submodelPath,
         maybeLeafTag,
-        commandNames: entry.commandNames,
+        commands: Array_.map(entry.commands, toDisplayCommand),
         mountStartNames: entry.mountStartNames,
         mountEndNames: entry.mountEndNames,
         timestamp: entry.timestamp,
@@ -161,7 +169,7 @@ const toDisplayEntries = ({ entries }) => Array_.map(entries, entry => {
 });
 const toDisplayState = (state) => ({
     entries: toDisplayEntries(state),
-    initCommandNames: state.initCommandNames,
+    initCommands: Array_.map(state.initCommands, toDisplayCommand),
     initMountStartNames: state.initMountStartNames,
     startIndex: state.startIndex,
     isPaused: state.isPaused,
@@ -179,50 +187,60 @@ const objectPreview = (value) => pipe(value, Record.keys, Array_.filter(key => k
 }));
 const collapsedPreview = (value) => M.value(value).pipe(M.when(Array.isArray, array => `(${array.length})`), M.when(Predicate.isObject, objectPreview), M.orElse(() => ''));
 // UPDATE
-export const JumpTo = Command.define('JumpTo', CompletedJump);
-export const InspectState = Command.define('InspectState', ReceivedInspectedState);
-export const InspectLatest = Command.define('InspectLatest', ReceivedInspectedState);
-export const Resume = Command.define('Resume', CompletedResume);
-export const Clear = Command.define('Clear', CompletedClear);
-export const LockScroll = Command.define('LockScroll', LockedScroll);
-export const UnlockScroll = Command.define('UnlockScroll', UnlockedScroll);
-export const ScrollToTop = Command.define('ScrollToTop', ScrolledToTop);
+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);
+    const latestIndex = Array_.isReadonlyArrayEmpty(state.entries)
+        ? INIT_INDEX
+        : state.startIndex + state.entries.length - 1;
+    return yield* buildInspectionEffect(latestIndex);
+}));
+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 jumpTo = (index) => JumpTo(Effect.gen(function* () {
-        yield* store.jumpTo(index);
-        return CompletedJump();
-    }));
-    const inspectState = (index) => InspectState(Effect.gen(function* () {
-        const model = yield* store.getModelAtIndex(index);
-        const maybeMessage = yield* store.getMessageAtIndex(index);
-        const diff = yield* store.getDiffAtIndex(index);
-        return ReceivedInspectedState({ model, maybeMessage, ...diff });
-    }));
-    const inspectLatest = InspectLatest(Effect.gen(function* () {
-        const state = yield* SubscriptionRef.get(store.stateRef);
-        const latestIndex = Array_.isReadonlyArrayEmpty(state.entries)
-            ? INIT_INDEX
-            : state.startIndex + state.entries.length - 1;
-        return yield* inspectState(latestIndex).effect;
-    }));
-    const resume = Resume(Effect.gen(function* () {
-        yield* store.resume;
-        return CompletedResume();
-    }));
-    const clear = Clear(Effect.gen(function* () {
-        yield* store.clear;
-        return CompletedClear();
-    }));
-    const toggleScrollLock = (shouldLock) => shouldLock
-        ? LockScroll(lockScroll.pipe(Effect.as(LockedScroll())))
-        : UnlockScroll(unlockScroll.pipe(Effect.as(UnlockedScroll())));
-    const scrollToTop = ScrollToTop(Effect.sync(() => {
-        const messageList = shadow.querySelector(MESSAGE_LIST_SELECTOR);
-        if (messageList instanceof HTMLElement) {
-            messageList.scrollTop = 0;
-        }
-        return ScrolledToTop();
-    }));
+    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;
@@ -308,7 +326,7 @@ const makeUpdate = (store, shadow, mode) => {
             }),
             [],
         ],
-        ReceivedStoreUpdate: ({ entries, initCommandNames, initMountStartNames, startIndex, isPaused, pausedAtIndex, }) => {
+        ReceivedStoreUpdate: ({ entries, initCommands, initMountStartNames, startIndex, isPaused, pausedAtIndex, }) => {
             const shouldFollowLatest = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
             const latestIndex = Array_.match(entries, {
                 onEmpty: () => INIT_INDEX,
@@ -319,7 +337,7 @@ const makeUpdate = (store, shadow, mode) => {
             return [
                 evo(model, {
                     entries: () => entries,
-                    initCommandNames: () => initCommandNames,
+                    initCommands: () => initCommands,
                     initMountStartNames: () => initMountStartNames,
                     startIndex: () => startIndex,
                     isPaused: () => isPaused,
@@ -425,8 +443,8 @@ const makeView = (position, mode, maybeBanner) => {
     const diffDotView = span([Class('diff-dot')], []);
     const inlineDiffDotView = span([Class('diff-dot-inline')], []);
     const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
-        const { expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
-        const isRoot = treePath === 'root';
+        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 : '';
@@ -439,6 +457,7 @@ const makeView = (position, mode, maybeBanner) => {
             isExpanded,
             isChanged: HashSet.has(changedPaths, treePath),
             isAffected: HashSet.has(affectedPaths, treePath),
+            isRoot,
             tag,
         });
         if (!isExpanded) {
@@ -464,7 +483,7 @@ const makeView = (position, mode, maybeBanner) => {
             })));
         }
     };
-    const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, tag) => {
+    const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
         const indent = Style({ paddingLeft: `${depth * TREE_INDENT_PX}px` });
         const hasDiffDot = isChanged || isAffected;
         if (!nodeIsExpandable) {
@@ -480,7 +499,6 @@ const makeView = (position, mode, maybeBanner) => {
                 leafValueView(value),
             ]);
         }
-        const isRoot = treePath === 'root';
         const preview = isExpanded
             ? Array.isArray(value)
                 ? `(${value.length})`
@@ -502,11 +520,24 @@ const makeView = (position, mode, maybeBanner) => {
             span([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,
@@ -517,17 +548,7 @@ const makeView = (position, mode, maybeBanner) => {
         });
         return div([
             Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0 overscroll-none'),
-        ], nodes.map(node => lazyTreeNode(node.treePath, flatNodeView, [
-            node.value,
-            node.treePath,
-            node.depth,
-            node.key,
-            node.isExpandable,
-            node.isExpanded,
-            node.isChanged,
-            node.isAffected,
-            node.tag,
-        ])));
+        ], nodes.map(renderFlatNode));
     };
     const inspectedTimestamp = (model) => {
         const lastIndex = Array_.isReadonlyArrayEmpty(model.entries)
@@ -601,26 +622,45 @@ const makeView = (position, mode, maybeBanner) => {
         },
     });
     const selectedHistoryIndex = (model) => M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : INIT_INDEX), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
-    const selectedCommandNames = (model) => {
+    const selectedCommands = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
         if (selectedIndex === INIT_INDEX) {
-            return model.initCommandNames;
+            return model.initCommands;
         }
         else {
-            return pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.map(entry => entry.commandNames), Option.getOrElse(() => NO_COMMANDS));
+            return pipe(model.entries, Array_.get(selectedIndex - model.startIndex), Option.map(entry => entry.commands), Option.getOrElse(() => NO_COMMANDS));
         }
     };
-    const commandsTabContent = (commandNames) => Array_.match(commandNames, {
+    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: () => div([
             Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
         ], ['No Commands returned']),
-        onNonEmpty: names => div([
+        onNonEmpty: commandList => div([
             Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
-        ], Array_.map(names, (name, index) => div([
-            Class('flex items-center px-2 py-1 text-base font-mono text-dt border-b gap-1.5'),
-        ], [
+        ], Array_.map(commandList, (command, index) => div([Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             span([Class(indexClass)], [String(index + 1)]),
-            span([Class('json-tag')], [name]),
+            div([Class('flex flex-col flex-1 min-w-0')], Array_.map(flattenCommand(command, index, expandedPaths), renderFlatNode)),
         ]))),
     });
     const selectedMountActivity = (model) => {
@@ -679,7 +719,8 @@ const makeView = (position, mode, maybeBanner) => {
         model.expandedPaths,
         inspectedTimestamp(model),
     ])), M.when('Commands', () => lazyTabContent('Commands', commandsTabContent, [
-        selectedCommandNames(model),
+        selectedCommands(model),
+        model.expandedPaths,
     ])), M.when('Mounts', () => {
         const { starts, ends } = selectedMountActivity(model);
         return lazyTabContent('Mounts', mountsTabContent, [starts, ends]);