@dxos/plugin-debug 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/chunk-SpaceGenerator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-SpaceGenerator.mjs","names":[],"sources":["../../src/containers/SpaceGenerator/SpaceGenerator.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useOperationInvoker, useOptionalCapability } from '@dxos/app-framework/ui';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';\nimport { useProgressMonitor } from '@dxos/app-toolkit/ui';\nimport { ComputeGraph } from '@dxos/conductor';\nimport { Filter, Obj, Type } from '@dxos/echo';\nimport * as Drawing from '@dxos/plugin-illustrator/Drawing';\nimport * as Markdown from '@dxos/plugin-markdown/Markdown';\nimport * as Sheet from '@dxos/plugin-sheet/Sheet';\nimport * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';\nimport { useClient } from '@dxos/react-client';\nimport { type Space } from '@dxos/react-client/echo';\nimport {\n  Flex,\n  IconButton,\n  Input,\n  Panel,\n  ScrollArea,\n  ThemedClassName,\n  useAsyncEffect,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { ProgressMeter } from '@dxos/react-ui-components';\nimport { type ActionGraphProps, Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';\nimport { Organization, Person, Task } from '@dxos/types';\nimport { mx } from '@dxos/ui-theme';\nimport { sortKeys } from '@dxos/util';\n\nimport { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';\nimport { meta } from '#meta';\n\n// TODO(burdon): Make extensible.\nconst staticTypes = [Markdown.Document, Drawing.Drawing, Sheet.Sheet, ComputeGraph];\nconst recordTypes = [Organization.Organization, Person.Person, Task.Task];\n\nconst TOAST_DURATION = 5_000;\n\nexport type SpaceGeneratorProps = {\n  space: Space;\n  onCreateObjects?: (objects: Obj.Unknown[]) => void;\n};\n\nexport const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(\n  ({ children, space, onCreateObjects, ...props }, forwardedRef) => {\n    const { invokePromise } = useOperationInvoker();\n    const { t } = useTranslation(meta.profile.key);\n    const client = useClient();\n    const [count, setCount] = useState(1);\n    const [info, setInfo] = useState<any>({});\n    const presets = useMemo(() => generator(), []);\n\n    // Register types.\n    useAsyncEffect(async () => {\n      await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);\n    }, [client, presets]);\n\n    // Create type generators.\n    const typeMap = useMemo(() => {\n      const recordGenerators = new Map<string, ObjectGenerator<any>>(\n        recordTypes.map((type) => [Type.getTypename(type), createGenerator(client, invokePromise, type)]),\n      );\n\n      return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);\n    }, [client, invokePromise, presets]);\n\n    // Query space to get info.\n    const updateInfo = useCallback(async () => {\n      const allSchema = [...space.db.graph.registry.list().filter(Type.isType)];\n      const echoSchema = allSchema.filter((t) => Type.isTypeKind(t));\n      const staticSchema = allSchema.filter((t) => !Type.isTypeKind(t));\n\n      const objects = await space.db.query(Filter.everything()).run();\n      const objectMap = sortKeys(\n        objects.reduce<Record<string, number>>((map, obj) => {\n          const type = Obj.getTypename(obj);\n          if (type) {\n            const count = map[type] ?? 0;\n            map[type] = count + 1;\n          }\n\n          return map;\n        }, {}),\n      );\n\n      setInfo({\n        schema: {\n          static: staticSchema.length,\n          mutable: echoSchema.length,\n        },\n        objects: objectMap,\n      });\n    }, [space]);\n\n    useAsyncEffect(updateInfo, [updateInfo]);\n\n    // TODO(wittjosiah): Custom toast required — `notify` labels are fixed at invocation, so a\n    //  result-dependent count cannot be reported through it. Drop these once operation notify\n    //  supports dynamic labels.\n    const handleReset = useCallback(async () => {\n      if (!window.confirm(t('remove-all-objects.confirm.description'))) {\n        return;\n      }\n      const { data } = await invokePromise(SpaceOperation.RemoveAllObjects, undefined, {\n        spaceId: space.id,\n        notify: { error: ['remove-all-objects.error.title', { ns: meta.profile.key }] },\n      });\n      if (data) {\n        await invokePromise(LayoutOperation.AddToast, {\n          id: `${meta.profile.key}/remove-all-objects`,\n          icon: 'ph--trash--regular',\n          duration: TOAST_DURATION,\n          title: ['remove-all-objects.toast.title', { ns: meta.profile.key }],\n          description: ['remove-all-objects.toast.description', { ns: meta.profile.key, count: data.objectIds.length }],\n        });\n      }\n      await updateInfo();\n    }, [space, invokePromise, updateInfo, t]);\n\n    const handleCollectGarbage = useCallback(async () => {\n      if (!window.confirm(t('collect-garbage.confirm.description'))) {\n        return;\n      }\n      const { data } = await invokePromise(SpaceOperation.CollectGarbage, undefined, {\n        spaceId: space.id,\n        notify: { error: ['collect-garbage.error.title', { ns: meta.profile.key }] },\n      });\n      if (data) {\n        await invokePromise(LayoutOperation.AddToast, {\n          id: `${meta.profile.key}/collect-garbage`,\n          icon: 'ph--recycle--regular',\n          duration: TOAST_DURATION,\n          title: ['collect-garbage.toast.title', { ns: meta.profile.key }],\n          description:\n            data.removedDocuments === 0\n              ? ['collect-garbage.toast.empty.description', { ns: meta.profile.key }]\n              : ['collect-garbage.toast.description', { ns: meta.profile.key, count: data.removedDocuments }],\n        });\n      }\n      await updateInfo();\n    }, [space, invokePromise, updateInfo, t]);\n\n    const menuActions = useSpaceGeneratorMenu({ updateInfo, handleReset, handleCollectGarbage });\n\n    const handleCreateData = useCallback(\n      async (typename: string) => {\n        const constructor = typeMap.get(typename);\n        if (constructor) {\n          // TODO(burdon): Input to specify number of objects.\n          await constructor(space, count, onCreateObjects);\n          await updateInfo();\n        }\n      },\n      [space, typeMap, count, updateInfo, onCreateObjects],\n    );\n\n    return (\n      // `alwaysActive`: the toolbar gates itself on the menu scope's attention, and this debug panel\n      // is not an attendable surface, so without it every action renders disabled.\n      <Menu.Root {...menuActions} alwaysActive>\n        <Panel.Root {...composableProps(props)} ref={forwardedRef}>\n          <Panel.Toolbar>\n            <Menu.Toolbar classNames='dx-document'>\n              <Menu.Items />\n              <Input.Root>\n                <Input.TextInput\n                  type='number'\n                  placeholder='Count'\n                  classNames='w-[4rem] text-right'\n                  min={1}\n                  max={100}\n                  size={8}\n                  value={count}\n                  onChange={(event) => setCount(parseInt(event.target.value))}\n                />\n              </Input.Root>\n            </Menu.Toolbar>\n          </Panel.Toolbar>\n          <Panel.Content asChild>\n            <ScrollArea.Root thin orientation='vertical'>\n              <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>\n                <SchemaTable\n                  classNames='py-1'\n                  types={staticTypes}\n                  objects={info.objects}\n                  label='Static Types'\n                  onClick={handleCreateData}\n                />\n                <SchemaTable\n                  classNames='py-1'\n                  types={recordTypes}\n                  objects={info.objects}\n                  label='Record Types'\n                  onClick={handleCreateData}\n                />\n                <SchemaTable\n                  classNames='py-1'\n                  types={presets.types}\n                  objects={info.objects}\n                  label='Presets'\n                  onClick={handleCreateData}\n                />\n                <ProgressGenerator classNames='py-1' />\n              </ScrollArea.Viewport>\n            </ScrollArea.Root>\n          </Panel.Content>\n        </Panel.Root>\n      </Menu.Root>\n    );\n  },\n);\n\nSpaceGenerator.displayName = 'SpaceGenerator';\n\n/**\n * Toolbar actions for the space generator. The toolbar's own action items hold the pending state —\n * each awaits its invoke, disables only itself while in flight, and guards re-entry — so nothing\n * here tracks that. The trailing gap separator pushes any sibling rendered after `Menu.Items` to the\n * end of the toolbar.\n */\nconst useSpaceGeneratorMenu = ({\n  updateInfo,\n  handleReset,\n  handleCollectGarbage,\n}: {\n  updateInfo: () => Promise<void>;\n  handleReset: () => Promise<void>;\n  handleCollectGarbage: () => Promise<void>;\n}) =>\n  useMenuBuilder(\n    (): ActionGraphProps =>\n      MenuBuilder.make()\n        .action(\n          'refresh',\n          { label: 'Refresh', icon: 'ph--arrow-clockwise--regular', testId: 'spaceGenerator.refresh' },\n          () => void updateInfo(),\n        )\n        .action(\n          'reset',\n          { label: 'Reset space', icon: 'ph--trash--regular', testId: 'spaceGenerator.reset' },\n          handleReset,\n        )\n        .action(\n          'collect',\n          { label: 'Collect garbage', icon: 'ph--recycle--regular', testId: 'spaceGenerator.collectGarbage' },\n          handleCollectGarbage,\n        )\n        .separator('gap')\n        .build(),\n    [updateInfo, handleReset, handleCollectGarbage],\n  );\n\n// Stable key for the test progress monitor within the shared registry.\nconst TEST_PROGRESS_NAME = `${meta.profile.key}.test-progress`;\n\ntype ProgressGeneratorProps = ThemedClassName;\n\n// Drives a synthetic progress monitor (10s over 10 steps) so the R0 rail meter can be exercised —\n// and renders the meter here too, since the rail's only lives inside a popover the user must open,\n// which made a working monitor look like a broken one.\nconst ProgressGenerator = ({ classNames }: ProgressGeneratorProps) => {\n  const registry = useOptionalCapability(AppCapabilities.ProgressRegistry);\n  const monitor = useProgressMonitor(TEST_PROGRESS_NAME);\n  const running = monitor?.status === 'running';\n  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);\n\n  const clearTimer = useCallback(() => {\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n      intervalRef.current = undefined;\n    }\n  }, []);\n\n  const handleStart = useCallback(() => {\n    // Guard on the timer ref too: `running` (derived from the registry) can lag a fast second click.\n    if (!registry || running || intervalRef.current) {\n      return;\n    }\n\n    const steps = 10;\n    let current = 0;\n    const handle = registry.register(TEST_PROGRESS_NAME, {\n      label: 'Test Progress',\n      total: steps,\n      // Invoked by the meter's cancel control (R0 rail) or the local button.\n      onCancel: () => {\n        clearTimer();\n        handle.remove();\n      },\n    });\n\n    intervalRef.current = setInterval(() => {\n      current += 1;\n      handle.set(current);\n      if (current >= steps) {\n        clearTimer();\n        handle.done();\n        handle.remove();\n      }\n    }, 1_000);\n  }, [registry, running, clearTimer]);\n\n  // Tear down the timer and the registry entry if unmounted mid-run.\n  useEffect(\n    () => () => {\n      clearTimer();\n      registry?.cancel(TEST_PROGRESS_NAME);\n    },\n    [clearTimer, registry],\n  );\n\n  return (\n    <div className={mx('flex flex-col gap-1 py-1', classNames)}>\n      <Flex gap='sm' align='center'>\n        <span className='grow'>Progress Monitor</span>\n        {running ? (\n          <IconButton\n            icon='ph--x--regular'\n            label='Cancel test progress'\n            onClick={() => registry?.cancel(TEST_PROGRESS_NAME)}\n          />\n        ) : (\n          <IconButton icon='ph--play--regular' label='Start test progress' disabled={!registry} onClick={handleStart} />\n        )}\n      </Flex>\n      {monitor && (monitor.status === 'running' || monitor.status === 'error') && (\n        <ProgressMeter state={monitor} onCancel={() => registry?.cancel(TEST_PROGRESS_NAME)} />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"chunk-SpaceGenerator.mjs","names":[],"sources":["../../src/containers/SpaceGenerator/SpaceGenerator.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Hooks from '@dxos/app-framework/Hooks';\nimport * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport * as ToolkitHooks from '@dxos/app-toolkit/Hooks';\nimport * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';\nimport { ComputeGraph } from '@dxos/conductor';\nimport { Filter, Obj, Type } from '@dxos/echo';\nimport * as EffectEx from '@dxos/effect/EffectEx';\nimport * as Drawing from '@dxos/plugin-illustrator/Drawing';\nimport * as Markdown from '@dxos/plugin-markdown/Markdown';\nimport * as Sheet from '@dxos/plugin-sheet/Sheet';\nimport * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';\nimport { useClient } from '@dxos/react-client';\nimport { type Space } from '@dxos/react-client/echo';\nimport { ProgressMeter } from '@dxos/react-ui-components';\nimport { type ActionGraphProps, ActionToolbar, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';\nimport * as Button from '@dxos/react-ui/Button';\nimport * as Field from '@dxos/react-ui/Field';\nimport * as UiHooks from '@dxos/react-ui/Hooks';\nimport * as Input from '@dxos/react-ui/Input';\nimport * as Layout from '@dxos/react-ui/Layout';\nimport * as Panel from '@dxos/react-ui/Panel';\nimport * as ScrollArea from '@dxos/react-ui/ScrollArea';\nimport * as Util from '@dxos/react-ui/Util';\nimport { Organization, Person, Task } from '@dxos/types';\nimport { mx } from '@dxos/ui-theme';\nimport { sortKeys } from '@dxos/util';\n\nimport { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';\nimport { meta } from '#meta';\n\n// TODO(burdon): Make extensible.\nconst staticTypes = [Markdown.Document, Drawing.Drawing, Sheet.Sheet, ComputeGraph];\nconst recordTypes = [Organization.Organization, Person.Person, Task.Task];\n\nconst TOAST_DURATION = 5_000;\n\nexport type SpaceGeneratorProps = {\n  space: Space;\n  onCreateObjects?: (objects: Obj.Unknown[]) => void;\n};\n\nexport const SpaceGenerator = Util.composable<HTMLDivElement, SpaceGeneratorProps>(\n  ({ children, space, onCreateObjects, ...props }, forwardedRef) => {\n    const invoker = Hooks.useOperationInvoker();\n    const { invokePromise } = invoker;\n    const { t } = UiHooks.useTranslation(meta.profile.key);\n    const client = useClient();\n    const [count, setCount] = useState(1);\n    const [info, setInfo] = useState<any>({});\n    const presets = useMemo(() => generator(), []);\n    const manager = PluginManagerProvider.usePluginManager();\n    const allTemplates = Hooks.useCapabilities(AppCapabilities.SpaceTemplate);\n\n    useEffect(() => {\n      EffectEx.runDetached(manager.activate(ActivationEvents.SpaceTemplatesRequested));\n    }, [manager]);\n\n    // Register types.\n    UiHooks.useAsyncEffect(async () => {\n      await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);\n    }, [client, presets]);\n\n    // Create type generators.\n    const typeMap = useMemo(() => {\n      const recordGenerators = new Map<string, ObjectGenerator<any>>(\n        recordTypes.map((type) => [Type.getTypename(type), createGenerator(client, invoker, manager, type)]),\n      );\n\n      const allTemplateGenerators = new Map<string, ObjectGenerator<any>>(\n        allTemplates.map((template) => [\n          template.id,\n          async (space) => {\n            await template.apply({ client, space });\n            return [];\n          },\n        ]),\n      );\n\n      return new Map([...staticGenerators, ...presets.items, ...recordGenerators, ...allTemplateGenerators]);\n    }, [client, invoker, invokePromise, manager, presets, allTemplates]);\n\n    // Query space to get info.\n    const updateInfo = useCallback(async () => {\n      const allSchema = [...space.db.graph.registry.list().filter(Type.isType)];\n      const echoSchema = allSchema.filter((t) => Type.isTypeKind(t));\n      const staticSchema = allSchema.filter((t) => !Type.isTypeKind(t));\n\n      const objects = await space.db.query(Filter.everything()).run();\n      const objectMap = sortKeys(\n        objects.reduce<Record<string, number>>((map, obj) => {\n          const type = Obj.getTypename(obj);\n          if (type) {\n            const count = map[type] ?? 0;\n            map[type] = count + 1;\n          }\n\n          return map;\n        }, {}),\n      );\n\n      setInfo({\n        schema: {\n          static: staticSchema.length,\n          mutable: echoSchema.length,\n        },\n        objects: objectMap,\n      });\n    }, [space]);\n\n    UiHooks.useAsyncEffect(updateInfo, [updateInfo]);\n\n    // TODO(wittjosiah): Custom toast required — `notify` labels are fixed at invocation, so a\n    //  result-dependent count cannot be reported through it. Drop these once operation notify\n    //  supports dynamic labels.\n    const handleReset = useCallback(async () => {\n      if (!window.confirm(t('remove-all-objects.confirm.description'))) {\n        return;\n      }\n      const { data } = await invokePromise(SpaceOperation.RemoveAllObjects, undefined, {\n        spaceId: space.id,\n        notify: { error: ['remove-all-objects.error.title', { ns: meta.profile.key }] },\n      });\n      if (data) {\n        await invokePromise(LayoutOperation.AddToast, {\n          id: `${meta.profile.key}/remove-all-objects`,\n          icon: 'ph--trash--regular',\n          duration: TOAST_DURATION,\n          title: ['remove-all-objects.toast.title', { ns: meta.profile.key }],\n          description: ['remove-all-objects.toast.description', { ns: meta.profile.key, count: data.objectIds.length }],\n        });\n      }\n      await updateInfo();\n    }, [space, invokePromise, updateInfo, t]);\n\n    const handleCollectGarbage = useCallback(async () => {\n      if (!window.confirm(t('collect-garbage.confirm.description'))) {\n        return;\n      }\n      const { data } = await invokePromise(SpaceOperation.CollectGarbage, undefined, {\n        spaceId: space.id,\n        notify: { error: ['collect-garbage.error.title', { ns: meta.profile.key }] },\n      });\n      if (data) {\n        await invokePromise(LayoutOperation.AddToast, {\n          id: `${meta.profile.key}/collect-garbage`,\n          icon: 'ph--recycle--regular',\n          duration: TOAST_DURATION,\n          title: ['collect-garbage.toast.title', { ns: meta.profile.key }],\n          description:\n            data.removedDocuments === 0\n              ? ['collect-garbage.toast.empty.description', { ns: meta.profile.key }]\n              : ['collect-garbage.toast.description', { ns: meta.profile.key, count: data.removedDocuments }],\n        });\n      }\n      await updateInfo();\n    }, [space, invokePromise, updateInfo, t]);\n\n    const menuActions = useSpaceGeneratorMenu({ updateInfo, handleReset, handleCollectGarbage });\n\n    const handleCreateData = useCallback(\n      async (typename: string) => {\n        const constructor = typeMap.get(typename);\n        if (constructor) {\n          // TODO(burdon): Input to specify number of objects.\n          await constructor(space, count, onCreateObjects);\n          await updateInfo();\n        }\n      },\n      [space, typeMap, count, updateInfo, onCreateObjects],\n    );\n\n    return (\n      // `alwaysActive`: the toolbar gates itself on the menu scope's attention, and this debug panel\n      // is not an attendable surface, so without it every action renders disabled.\n\n      <Panel.Root {...Util.composableProps(props)} ref={forwardedRef}>\n        <Panel.Header>\n          <ActionToolbar {...menuActions} alwaysActive classNames='dx-document'>\n            <Field.Root>\n              <Input.Root\n                placeholder='Count'\n                classNames='w-[4rem] text-right'\n                min={1}\n                max={100}\n                size={8}\n                value={count}\n                onChange={(event) => setCount(parseInt(event.target.value))}\n                type='number'\n              />\n            </Field.Root>\n          </ActionToolbar>\n        </Panel.Header>\n        <Panel.Body asChild>\n          <ScrollArea.Root orientation='vertical'>\n            <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-separator-subtle'>\n              <SchemaTable\n                classNames='py-1'\n                types={staticTypes}\n                objects={info.objects}\n                label='Static Types'\n                onClick={handleCreateData}\n              />\n              <SchemaTable\n                classNames='py-1'\n                types={recordTypes}\n                objects={info.objects}\n                label='Record Types'\n                onClick={handleCreateData}\n              />\n              <SchemaTable\n                classNames='py-1'\n                types={presets.types}\n                objects={info.objects}\n                label='Presets'\n                onClick={handleCreateData}\n              />\n              {allTemplates.length > 0 && (\n                <SchemaTable\n                  classNames='py-1'\n                  types={allTemplates.map(({ id, label }) => ({ typename: id, presetLabel: label }))}\n                  objects={info.objects}\n                  label='Space Templates'\n                  onClick={handleCreateData}\n                />\n              )}\n              <ProgressGenerator classNames='py-1' />\n            </ScrollArea.Viewport>\n          </ScrollArea.Root>\n        </Panel.Body>\n      </Panel.Root>\n    );\n  },\n);\n\nSpaceGenerator.displayName = 'SpaceGenerator';\n\n/**\n * Toolbar actions for the space generator. The toolbar's own action items hold the pending state —\n * each awaits its invoke, disables only itself while in flight, and guards re-entry — so nothing\n * here tracks that. The trailing gap separator pushes any sibling rendered after `Menu.Items` to the\n * end of the toolbar.\n */\nconst useSpaceGeneratorMenu = ({\n  updateInfo,\n  handleReset,\n  handleCollectGarbage,\n}: {\n  updateInfo: () => Promise<void>;\n  handleReset: () => Promise<void>;\n  handleCollectGarbage: () => Promise<void>;\n}) =>\n  useMenuBuilder(\n    (): ActionGraphProps =>\n      MenuBuilder.make()\n        .action(\n          'refresh',\n          { label: 'Refresh', icon: 'ph--arrow-clockwise--regular', testId: 'spaceGenerator.refresh' },\n          () => void updateInfo(),\n        )\n        .action(\n          'reset',\n          { label: 'Reset space', icon: 'ph--trash--regular', testId: 'spaceGenerator.reset' },\n          handleReset,\n        )\n        .action(\n          'collect',\n          { label: 'Collect garbage', icon: 'ph--recycle--regular', testId: 'spaceGenerator.collectGarbage' },\n          handleCollectGarbage,\n        )\n        .separator('gap')\n        .build(),\n    [updateInfo, handleReset, handleCollectGarbage],\n  );\n\n// Stable key for the test progress monitor within the shared registry.\nconst TEST_PROGRESS_NAME = `${meta.profile.key}.test-progress`;\n\ntype ProgressGeneratorProps = Util.ThemedClassName;\n\n// Drives a synthetic progress monitor (10s over 10 steps) so the R0 rail meter can be exercised —\n// and renders the meter here too, since the rail's only lives inside a popover the user must open,\n// which made a working monitor look like a broken one.\nconst ProgressGenerator = ({ classNames }: ProgressGeneratorProps) => {\n  const registry = Hooks.useOptionalCapability(AppCapabilities.ProgressRegistry);\n  const monitor = ToolkitHooks.useProgressMonitor(TEST_PROGRESS_NAME);\n  const running = monitor?.status === 'running';\n  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);\n\n  const clearTimer = useCallback(() => {\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n      intervalRef.current = undefined;\n    }\n  }, []);\n\n  const handleStart = useCallback(() => {\n    // Guard on the timer ref too: `running` (derived from the registry) can lag a fast second click.\n    if (!registry || running || intervalRef.current) {\n      return;\n    }\n\n    const steps = 10;\n    let current = 0;\n    const handle = registry.register(TEST_PROGRESS_NAME, {\n      label: 'Test Progress',\n      total: steps,\n      // Invoked by the meter's cancel control (R0 rail) or the local button.\n      onCancel: () => {\n        clearTimer();\n        handle.remove();\n      },\n    });\n\n    intervalRef.current = setInterval(() => {\n      current += 1;\n      handle.set(current);\n      if (current >= steps) {\n        clearTimer();\n        handle.done();\n        handle.remove();\n      }\n    }, 1_000);\n  }, [registry, running, clearTimer]);\n\n  // Tear down the timer and the registry entry if unmounted mid-run.\n  useEffect(\n    () => () => {\n      clearTimer();\n      registry?.cancel(TEST_PROGRESS_NAME);\n    },\n    [clearTimer, registry],\n  );\n\n  return (\n    <div className={mx('flex flex-col gap-1 py-1', classNames)}>\n      <Layout.Flex gap='sm' align='center'>\n        <span className='grow'>Progress Monitor</span>\n        {running ? (\n          <Button.Root\n            icon='ph--x--regular'\n            label='Cancel test progress'\n            onClick={() => registry?.cancel(TEST_PROGRESS_NAME)}\n          />\n        ) : (\n          <Button.Root\n            icon='ph--play--regular'\n            label='Start test progress'\n            disabled={!registry}\n            onClick={handleStart}\n          />\n        )}\n      </Layout.Flex>\n      {monitor && (monitor.status === 'running' || monitor.status === 'error') && (\n        <ProgressMeter state={monitor} onCancel={() => registry?.cancel(TEST_PROGRESS_NAME)} />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/lib/chunk-StatsPanel.mjs

@@ -1,56 +1,49 @@
 import * as AppCapabilities from "@dxos/app-toolkit/AppCapabilities";
-import { Fragment } from "react";
-import { ScrollArea } from "@dxos/react-ui";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useOptionalCapability } from "@dxos/app-framework/ui";
+import * as Atom from "effect/reactivity/Atom";
 import { useAtomValue } from "@effect/atom-react/Hooks";
-import * as Atom from "effect/unstable/reactivity/Atom";
+import * as Hooks from "@dxos/app-framework/Hooks";
+import { STAT_CARD_HUES, StatCard } from "@dxos/devtools";
+import * as Layout from "@dxos/react-ui/Layout";
 //#region src/containers/StatsPanel/StatsPanel.tsx
 var EMPTY = Atom.make({});
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-/** Renders a leaf value; numbers are monospace so columns of counts align. */
+/** Renders a leaf value; numbers are localised so columns of counts read alike. */
 var formatValue = (value) => typeof value === "number" ? value.toLocaleString() : String(value);
 /**
 * Flattens a compartment into `key → value` rows, one level deep: nested objects (e.g. `coverage`)
-* become dotted keys (`coverage.plain`) so everything renders in a single flat table.
+* become dotted keys (`coverage.plain`) so everything renders as flat rows.
 */
 var flatten = (stats) => {
 	if (!isRecord(stats)) return [["value", stats]];
 	return Object.entries(stats).flatMap(([key, value]) => isRecord(value) ? Object.entries(value).map(([subKey, subValue]) => [`${key}.${subKey}`, subValue]) : [[key, value]]);
 };
 /**
-* Presentational panel for the {@link AppCapabilities.StatsPanel} store: renders every plugin
-* compartment as a flat key × value table, live (re-renders on each write). Purely generic — it
-* displays whatever each plugin stores, so it works for sync telemetry or any other stats.
+* The {@link AppCapabilities.StatsPanel} store as one card per plugin compartment, live (re-renders
+* on each write). Purely generic — it displays whatever each plugin stores.
 */
-var StatsPanel = () => {
-	const store = useOptionalCapability(AppCapabilities.StatsPanel);
+var StatsPanel = ({ showEmpty = true }) => {
+	const store = Hooks.useOptionalCapability(AppCapabilities.StatsPanel);
 	const stats = useAtomValue(store?.statsAtom ?? EMPTY);
 	const compartments = Object.entries(stats);
-	if (compartments.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "p-2 text-sm text-description",
-		children: "No stats yet."
-	});
-	return /* @__PURE__ */ jsx(ScrollArea.Root, {
-		thin: true,
-		centered: true,
-		padding: true,
-		children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: compartments.map(([pluginKey, value]) => /* @__PURE__ */ jsxs("section", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-start font-mono text-xs text-description pb-1",
-				children: pluginKey
-			}), /* @__PURE__ */ jsx("dl", {
-				className: "grid grid-cols-[auto_minmax(0,1fr)] w-full",
-				children: flatten(value).map(([key, cell]) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
-					className: "border-be border-separator pb-1 pt-1 pe-2 text-description self-start",
-					children: key
-				}), /* @__PURE__ */ jsx("dd", {
-					className: "border-be border-separator pb-1 pt-1 truncate font-mono text-end",
-					children: formatValue(cell)
-				})] }, key))
-			})]
-		}, pluginKey)) })
+	if (compartments.length === 0) return showEmpty ? /* @__PURE__ */ jsxs(StatCard.Root, { children: [/* @__PURE__ */ jsx(StatCard.Header, {
+		icon: "ph--chart-bar--regular",
+		hue: STAT_CARD_HUES.system,
+		title: "Plugin stats"
+	}), /* @__PURE__ */ jsx(StatCard.Row, { label: "No stats yet." })] }) : null;
+	return /* @__PURE__ */ jsx(Layout.Container, {
+		gap: "md",
+		gutter: "none",
+		children: compartments.map(([pluginKey, value]) => /* @__PURE__ */ jsxs(StatCard.Root, { children: [/* @__PURE__ */ jsx(StatCard.Header, {
+			icon: "ph--chart-bar--regular",
+			hue: STAT_CARD_HUES.system,
+			title: pluginKey
+		}), flatten(value).map(([key, cell]) => /* @__PURE__ */ jsx(StatCard.Row, {
+			label: key,
+			tooltip: key,
+			value: formatValue(cell)
+		}, key))] }, pluginKey))
 	});
 };
 StatsPanel.displayName = "StatsPanel";

package/dist/lib/chunk-StatsPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-StatsPanel.mjs","names":[],"sources":["../../src/containers/StatsPanel/StatsPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { useAtomValue } from '@effect/atom-react/Hooks';\nimport * as Atom from 'effect/unstable/reactivity/Atom';\nimport React, { Fragment } from 'react';\n\nimport { useOptionalCapability } from '@dxos/app-framework/ui';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport { ScrollArea } from '@dxos/react-ui';\n\n// Fallback so the atom hook is called unconditionally when no store is contributed (host plugin not\n// loaded); the panel then renders its empty state.\nconst EMPTY = Atom.make<Record<string, unknown>>({});\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** Renders a leaf value; numbers are monospace so columns of counts align. */\nconst formatValue = (value: unknown): string => (typeof value === 'number' ? value.toLocaleString() : String(value));\n\n/**\n * Flattens a compartment into `key → value` rows, one level deep: nested objects (e.g. `coverage`)\n * become dotted keys (`coverage.plain`) so everything renders in a single flat table.\n */\nconst flatten = (stats: unknown): [string, unknown][] => {\n  if (!isRecord(stats)) {\n    return [['value', stats]];\n  }\n\n  return Object.entries(stats).flatMap(([key, value]) =>\n    isRecord(value)\n      ? Object.entries(value).map(([subKey, subValue]): [string, unknown] => [`${key}.${subKey}`, subValue])\n      : [[key, value] as [string, unknown]],\n  );\n};\n\n/**\n * Presentational panel for the {@link AppCapabilities.StatsPanel} store: renders every plugin\n * compartment as a flat key × value table, live (re-renders on each write). Purely generic — it\n * displays whatever each plugin stores, so it works for sync telemetry or any other stats.\n */\nexport const StatsPanel = () => {\n  const store = useOptionalCapability(AppCapabilities.StatsPanel);\n  const stats = useAtomValue(store?.statsAtom ?? EMPTY);\n  const compartments = Object.entries(stats);\n  if (compartments.length === 0) {\n    return <div className='p-2 text-sm text-description'>No stats yet.</div>;\n  }\n\n  return (\n    <ScrollArea.Root thin centered padding>\n      <ScrollArea.Viewport>\n        {compartments.map(([pluginKey, value]) => (\n          <section key={pluginKey} className='w-full'>\n            <h3 className='text-start font-mono text-xs text-description pb-1'>{pluginKey}</h3>\n            <dl className='grid grid-cols-[auto_minmax(0,1fr)] w-full'>\n              {flatten(value).map(([key, cell]) => (\n                <Fragment key={key}>\n                  <dt className='border-be border-separator pb-1 pt-1 pe-2 text-description self-start'>{key}</dt>\n                  <dd className='border-be border-separator pb-1 pt-1 truncate font-mono text-end'>\n                    {formatValue(cell)}\n                  </dd>\n                </Fragment>\n              ))}\n            </dl>\n          </section>\n        ))}\n      </ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n};\n\nStatsPanel.displayName = 'StatsPanel';\n"],"mappings":";;;;;;;;AAcA,IAAM,QAAQ,KAAK,KAA8B,CAAC,CAAC;AAEnD,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;;AAGrE,IAAM,eAAe,UAA4B,OAAO,UAAU,WAAW,MAAM,eAAe,IAAI,OAAO,KAAK;;;;;AAMlH,IAAM,WAAW,UAAwC;CACvD,IAAI,CAAC,SAAS,KAAK,GACjB,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC;CAG1B,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAC1C,SAAS,KAAK,IACV,OAAO,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC,QAAQ,cAAiC,CAAC,GAAG,IAAI,GAAG,UAAU,QAAQ,CAAC,IACnG,CAAC,CAAC,KAAK,KAAK,CAAsB,CACxC;AACF;;;;;;AAOA,IAAa,mBAAmB;CAC9B,MAAM,QAAQ,sBAAsB,gBAAgB,UAAU;CAC9D,MAAM,QAAQ,aAAa,OAAO,aAAa,KAAK;CACpD,MAAM,eAAe,OAAO,QAAQ,KAAK;CACzC,IAAI,aAAa,WAAW,GAC1B,OAAO,oBAAC,OAAD;EAAK,WAAU;EAA+B,UAAA;CAAkB,CAAA;CAGzE,OACE,oBAAC,WAAW,MAAZ;EAAiB,MAAA;EAAK,UAAA;EAAS,SAAA;EAC7B,UAAA,oBAAC,WAAW,UAAZ,EAAA,UACG,aAAa,KAAK,CAAC,WAAW,WAC7B,qBAAC,WAAD;GAAyB,WAAU;GAAnC,UAAA,CACE,oBAAC,MAAD;IAAI,WAAU;IAAsD,UAAA;GAAc,CAAA,GAClF,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,UACzB,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD;KAAI,WAAU;KAAyE,UAAA;IAAQ,CAAA,GAC/F,oBAAC,MAAD;KAAI,WAAU;KACX,UAAA,YAAY,IAAI;IACf,CAAA,CACI,EAAA,GALK,GAKL,CACX;GACC,CAAA,CACG;EAZK,GAAA,SAYL,CACV,EACkB,CAAA;CACN,CAAA;AAErB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"chunk-StatsPanel.mjs","names":[],"sources":["../../src/containers/StatsPanel/StatsPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { useAtomValue } from '@effect/atom-react/Hooks';\nimport * as Atom from 'effect/reactivity/Atom';\nimport React from 'react';\n\nimport * as Hooks from '@dxos/app-framework/Hooks';\nimport * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';\nimport { STAT_CARD_HUES, StatCard } from '@dxos/devtools';\nimport * as Layout from '@dxos/react-ui/Layout';\n\n// Fallback so the atom hook is called unconditionally when no store is contributed (host plugin not\n// loaded); the panel then renders its empty state.\nconst EMPTY = Atom.make<Record<string, unknown>>({});\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** Renders a leaf value; numbers are localised so columns of counts read alike. */\nconst formatValue = (value: unknown): string => (typeof value === 'number' ? value.toLocaleString() : String(value));\n\n/**\n * Flattens a compartment into `key → value` rows, one level deep: nested objects (e.g. `coverage`)\n * become dotted keys (`coverage.plain`) so everything renders as flat rows.\n */\nconst flatten = (stats: unknown): [string, unknown][] => {\n  if (!isRecord(stats)) {\n    return [['value', stats]];\n  }\n\n  return Object.entries(stats).flatMap(([key, value]) =>\n    isRecord(value)\n      ? Object.entries(value).map(([subKey, subValue]): [string, unknown] => [`${key}.${subKey}`, subValue])\n      : [[key, value] as [string, unknown]],\n  );\n};\n\nexport type StatsPanelProps = {\n  /** Renders the empty state as a card too, so a stack shows the store exists. */\n  showEmpty?: boolean;\n};\n\n/**\n * The {@link AppCapabilities.StatsPanel} store as one card per plugin compartment, live (re-renders\n * on each write). Purely generic — it displays whatever each plugin stores.\n */\nexport const StatsPanel = ({ showEmpty = true }: StatsPanelProps) => {\n  const store = Hooks.useOptionalCapability(AppCapabilities.StatsPanel);\n  const stats = useAtomValue(store?.statsAtom ?? EMPTY);\n  const compartments = Object.entries(stats);\n  if (compartments.length === 0) {\n    return showEmpty ? (\n      <StatCard.Root>\n        <StatCard.Header icon='ph--chart-bar--regular' hue={STAT_CARD_HUES.system} title='Plugin stats' />\n        <StatCard.Row label='No stats yet.' />\n      </StatCard.Root>\n    ) : null;\n  }\n\n  return (\n    <Layout.Container gap='md' gutter='none'>\n      {compartments.map(([pluginKey, value]) => (\n        <StatCard.Root key={pluginKey}>\n          <StatCard.Header icon='ph--chart-bar--regular' hue={STAT_CARD_HUES.system} title={pluginKey} />\n          {flatten(value).map(([key, cell]) => (\n            <StatCard.Row key={key} label={key} tooltip={key} value={formatValue(cell)} />\n          ))}\n        </StatCard.Root>\n      ))}\n    </Layout.Container>\n  );\n};\n\nStatsPanel.displayName = 'StatsPanel';\n"],"mappings":";;;;;;;;;AAeA,IAAM,QAAQ,KAAK,KAA8B,CAAC,CAAC;AAEnD,IAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;;AAGrE,IAAM,eAAe,UAA4B,OAAO,UAAU,WAAW,MAAM,eAAe,IAAI,OAAO,KAAK;;;;;AAMlH,IAAM,WAAW,UAAwC;CACvD,IAAI,CAAC,SAAS,KAAK,GACjB,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC;CAG1B,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAC1C,SAAS,KAAK,IACV,OAAO,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC,QAAQ,cAAiC,CAAC,GAAG,IAAI,GAAG,UAAU,QAAQ,CAAC,IACnG,CAAC,CAAC,KAAK,KAAK,CAAsB,CACxC;AACF;;;;;AAWA,IAAa,cAAc,EAAE,YAAY,WAA4B;CACnE,MAAM,QAAQ,MAAM,sBAAsB,gBAAgB,UAAU;CACpE,MAAM,QAAQ,aAAa,OAAO,aAAa,KAAK;CACpD,MAAM,eAAe,OAAO,QAAQ,KAAK;CACzC,IAAI,aAAa,WAAW,GAC1B,OAAO,YACL,qBAAC,SAAS,MAAV,EAAA,UAAA,CACE,oBAAC,SAAS,QAAV;EAAiB,MAAK;EAAyB,KAAK,eAAe;EAAQ,OAAM;CAAgB,CAAA,GACjG,oBAAC,SAAS,KAAV,EAAc,OAAM,gBAAiB,CAAA,CACxB,EAAA,CAAA,IACb;CAGN,OACE,oBAAC,OAAO,WAAR;EAAkB,KAAI;EAAK,QAAO;EAC/B,UAAA,aAAa,KAAK,CAAC,WAAW,WAC7B,qBAAC,SAAS,MAAV,EAAA,UAAA,CACE,oBAAC,SAAS,QAAV;GAAiB,MAAK;GAAyB,KAAK,eAAe;GAAQ,OAAO;EAAY,CAAA,GAC7F,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,UACzB,oBAAC,SAAS,KAAV;GAAwB,OAAO;GAAK,SAAS;GAAK,OAAO,YAAY,IAAI;EAAI,GAA1D,GAA0D,CAC9E,CACY,EAAA,GALK,SAKL,CAChB;CACe,CAAA;AAEtB;AAEA,WAAW,cAAc"}