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

package/src/containers/DebugStatus/DebugStatus.tsx

@@ -5,10 +5,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimeoutError } from '@dxos/async';
-import { StatusBar } from '@dxos/plugin-status-bar/components';
-import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
+import * as StatusBar from '@dxos/plugin-status-bar/StatusBar';
+import { ConnectionState } from '@dxos/protocols/buf/dxos/client/services_pb';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { IconButton } from '@dxos/react-ui';
+import * as Button from '@dxos/react-ui/Button';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -89,7 +89,7 @@ const ErrorIndicator = () => {
   if (errorRef.current) {
     return (
       <StatusBar.Item>
-        <IconButton
+        <Button.Root
           variant='ghost'
           icon='ph--warning-circle--duotone'
           iconOnly
@@ -102,7 +102,7 @@ const ErrorIndicator = () => {
   } else {
     return (
       <StatusBar.Item>
-        <IconButton variant='ghost' icon='ph--check--regular' iconOnly label='No errors.' />
+        <Button.Root variant='ghost' icon='ph--check--regular' iconOnly label='No errors.' />
       </StatusBar.Item>
     );
   }
@@ -121,13 +121,13 @@ const SwarmIndicator = () => {
   if (state === 0) {
     return (
       <StatusBar.Item>
-        <IconButton variant='ghost' icon='ph--lightning--regular' iconOnly label='Connected to swarm.' />
+        <Button.Root variant='ghost' icon='ph--lightning--regular' iconOnly label='Connected to swarm.' />
       </StatusBar.Item>
     );
   } else {
     return (
       <StatusBar.Item>
-        <IconButton
+        <Button.Root
           variant='ghost'
           icon='ph--lightning-slash--regular'
           iconOnly
@@ -168,7 +168,7 @@ const SavingIndicator = () => {
     case 2:
       return (
         <StatusBar.Item>
-          <IconButton
+          <Button.Root
             variant='ghost'
             icon='ph--circle--duotone'
             iconOnly
@@ -180,7 +180,7 @@ const SavingIndicator = () => {
     case 1:
       return (
         <StatusBar.Item>
-          <IconButton
+          <Button.Root
             variant='ghost'
             icon='ph--circle--duotone'
             iconOnly
@@ -193,7 +193,7 @@ const SavingIndicator = () => {
     default:
       return (
         <StatusBar.Item>
-          <IconButton variant='ghost' icon='ph--circle--duotone' iconOnly label='Modified indicator.' />
+          <Button.Root variant='ghost' icon='ph--circle--duotone' iconOnly label='Modified indicator.' />
         </StatusBar.Item>
       );
   }

package/src/containers/DebugStatus/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { DebugStatus as default } from './DebugStatus';
+export { DebugStatus as default } from './DebugStatus.tsx';

package/src/containers/LoggerPanel/LoggerPanel.stories.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { type CallMetadata, log } from '@dxos/log';
+import { random } from '@dxos/random';
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import * as Button from '@dxos/react-ui/Button';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
+
+import { translations } from '#translations';
+
+import { LoggerPanel } from './LoggerPanel.tsx';
+
+random.seed(123);
+
+// Workspace-relative paths so rows and the Levels popover show a derived package name.
+const FILES = [
+  'packages/plugins/plugin-debug/src/alpha.ts',
+  'packages/ui/react-ui-debug/src/beta.ts',
+  'packages/core/echo/echo/src/gamma.ts',
+];
+
+let seq = 0;
+
+const emit = (file: string, level: 'info' | 'warn' | 'error') => {
+  // Hand-written meta so entries appear to originate from distinct files, populating the Levels list.
+  const callMeta: CallMetadata = { F: file, L: 1, S: undefined };
+  const context =
+    level === 'error' ? { seq: ++seq, file, error: new Error('Simulated failure') } : { seq: ++seq, file };
+  log[level](random.lorem.sentences(), context, callMeta);
+};
+
+/** The panel reads the process-wide log buffer, so the story emits into it rather than passing rows. */
+const Render = () => (
+  <div className='grid grid-rows-[min-content_1fr] h-[24rem] w-[48rem] max-w-full'>
+    <Toolbar.Root>
+      <Button.Root onClick={() => emit(FILES[0], 'info')}>Info</Button.Root>
+      <Button.Root onClick={() => emit(FILES[1], 'warn')}>Warn</Button.Root>
+      <Button.Root onClick={() => emit(FILES[2], 'error')}>Error</Button.Root>
+    </Toolbar.Root>
+    <LoggerPanel />
+  </div>
+);
+
+const meta = {
+  title: 'plugins/plugin-debug/containers/LoggerPanel',
+  component: LoggerPanel,
+  render: Render,
+  decorators: [withAttention(), withTheme(), withLayout({ layout: 'centered' })],
+  parameters: { translations },
+} satisfies Meta<typeof LoggerPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/LoggerPanel/LoggerPanel.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Logger } from '@dxos/react-ui-debug';
+import * as Panel from '@dxos/react-ui/Panel';
+
+export const LoggerPanel = () => (
+  <Logger.Root>
+    <Panel.Root>
+      <Panel.Header>
+        <Logger.Toolbar />
+      </Panel.Header>
+      <Panel.Body asChild>
+        <Logger.Content>
+          <Logger.List />
+        </Logger.Content>
+      </Panel.Body>
+      <Panel.Footer>
+        <Logger.Filter />
+      </Panel.Footer>
+    </Panel.Root>
+  </Logger.Root>
+);
+
+LoggerPanel.displayName = 'LoggerPanel';

package/src/containers/LoggerPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './LoggerPanel.tsx';

package/src/containers/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -13,31 +13,31 @@ import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
 import * as ProgressPlugin from '@dxos/plugin-progress/ProgressPlugin';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
 import { useSpaces } from '@dxos/react-client/echo';
-import { ScrollArea } from '@dxos/react-ui';
 import { Listbox } from '@dxos/react-ui-list';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 import { withLayout } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { SpaceGenerator } from './SpaceGenerator';
+import { SpaceGenerator } from './SpaceGenerator.tsx';
 
 /** Live list of every object in the space — updates as the generator creates objects. */
 const ObjectList = ({ space }: { space: Parameters<typeof SpaceGenerator>[0]['space'] }) => {
   const objects = useQuery(space.db, Query.select(Filter.everything()));
 
   return (
-    <ScrollArea.Root thin orientation='vertical'>
+    <ScrollArea.Root orientation='vertical'>
       <ScrollArea.Viewport>
-        <Listbox.Root>
+        <Listbox.Root items={objects.map((object) => ({ value: object.id, label: object.id }))}>
           <Listbox.Content>
             {objects.map((object) => (
               <Listbox.Item key={object.id} id={object.id} classNames='px-2 gap-2'>
                 <div className='flex flex-col grow truncate'>
                   <span className='truncate'>{Obj.getLabel(object) ?? object.id}</span>
-                  <span className='text-description text-sm truncate'>{Obj.getTypename(object)}</span>
+                  <span className='text-fg-muted text-sm truncate'>{Obj.getTypename(object)}</span>
                 </div>
               </Listbox.Item>
             ))}
@@ -55,7 +55,7 @@ const DefaultStory = () => {
   }
 
   return (
-    <div className='dx-container grid grid-cols-2 divide-x divide-separator'>
+    <div className='dx-expand grid grid-cols-2 divide-x divide-separator'>
       <SpaceGenerator space={space} />
       <ObjectList space={space} />
     </div>
@@ -69,7 +69,7 @@ const meta = {
     withLayout({ layout: 'fullscreen' }),
     withPluginManager(() => ({
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         StorybookPlugin.make({}),
         // Hosts the ProgressRegistry the Progress Monitor row registers into (and its meter reads).
         ProgressPlugin.make(),

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -4,31 +4,31 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { useOperationInvoker, useOptionalCapability } from '@dxos/app-framework/ui';
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Hooks from '@dxos/app-framework/Hooks';
+import * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as ToolkitHooks from '@dxos/app-toolkit/Hooks';
 import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
-import { useProgressMonitor } from '@dxos/app-toolkit/ui';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, Obj, Type } from '@dxos/echo';
+import * as EffectEx from '@dxos/effect/EffectEx';
 import * as Drawing from '@dxos/plugin-illustrator/Drawing';
 import * as Markdown from '@dxos/plugin-markdown/Markdown';
 import * as Sheet from '@dxos/plugin-sheet/Sheet';
 import * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import {
-  Flex,
-  IconButton,
-  Input,
-  Panel,
-  ScrollArea,
-  ThemedClassName,
-  useAsyncEffect,
-  useTranslation,
-} from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
 import { ProgressMeter } from '@dxos/react-ui-components';
-import { type ActionGraphProps, Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';
+import { type ActionGraphProps, ActionToolbar, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';
+import * as Button from '@dxos/react-ui/Button';
+import * as Field from '@dxos/react-ui/Field';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Input from '@dxos/react-ui/Input';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as Util from '@dxos/react-ui/Util';
 import { Organization, Person, Task } from '@dxos/types';
 import { mx } from '@dxos/ui-theme';
 import { sortKeys } from '@dxos/util';
@@ -47,28 +47,45 @@ export type SpaceGeneratorProps = {
   onCreateObjects?: (objects: Obj.Unknown[]) => void;
 };
 
-export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
+export const SpaceGenerator = Util.composable<HTMLDivElement, SpaceGeneratorProps>(
   ({ children, space, onCreateObjects, ...props }, forwardedRef) => {
-    const { invokePromise } = useOperationInvoker();
-    const { t } = useTranslation(meta.profile.key);
+    const invoker = Hooks.useOperationInvoker();
+    const { invokePromise } = invoker;
+    const { t } = UiHooks.useTranslation(meta.profile.key);
     const client = useClient();
     const [count, setCount] = useState(1);
     const [info, setInfo] = useState<any>({});
     const presets = useMemo(() => generator(), []);
+    const manager = PluginManagerProvider.usePluginManager();
+    const allTemplates = Hooks.useCapabilities(AppCapabilities.SpaceTemplate);
+
+    useEffect(() => {
+      EffectEx.runDetached(manager.activate(ActivationEvents.SpaceTemplatesRequested));
+    }, [manager]);
 
     // Register types.
-    useAsyncEffect(async () => {
+    UiHooks.useAsyncEffect(async () => {
       await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
     }, [client, presets]);
 
     // Create type generators.
     const typeMap = useMemo(() => {
       const recordGenerators = new Map<string, ObjectGenerator<any>>(
-        recordTypes.map((type) => [Type.getTypename(type), createGenerator(client, invokePromise, type)]),
+        recordTypes.map((type) => [Type.getTypename(type), createGenerator(client, invoker, manager, type)]),
+      );
+
+      const allTemplateGenerators = new Map<string, ObjectGenerator<any>>(
+        allTemplates.map((template) => [
+          template.id,
+          async (space) => {
+            await template.apply({ client, space });
+            return [];
+          },
+        ]),
       );
 
-      return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
-    }, [client, invokePromise, presets]);
+      return new Map([...staticGenerators, ...presets.items, ...recordGenerators, ...allTemplateGenerators]);
+    }, [client, invoker, invokePromise, manager, presets, allTemplates]);
 
     // Query space to get info.
     const updateInfo = useCallback(async () => {
@@ -98,7 +115,7 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
       });
     }, [space]);
 
-    useAsyncEffect(updateInfo, [updateInfo]);
+    UiHooks.useAsyncEffect(updateInfo, [updateInfo]);
 
     // TODO(wittjosiah): Custom toast required — `notify` labels are fixed at invocation, so a
     //  result-dependent count cannot be reported through it. Drop these once operation notify
@@ -163,55 +180,62 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
     return (
       // `alwaysActive`: the toolbar gates itself on the menu scope's attention, and this debug panel
       // is not an attendable surface, so without it every action renders disabled.
-      <Menu.Root {...menuActions} alwaysActive>
-        <Panel.Root {...composableProps(props)} ref={forwardedRef}>
-          <Panel.Toolbar>
-            <Menu.Toolbar classNames='dx-document'>
-              <Menu.Items />
-              <Input.Root>
-                <Input.TextInput
-                  type='number'
-                  placeholder='Count'
-                  classNames='w-[4rem] text-right'
-                  min={1}
-                  max={100}
-                  size={8}
-                  value={count}
-                  onChange={(event) => setCount(parseInt(event.target.value))}
-                />
-              </Input.Root>
-            </Menu.Toolbar>
-          </Panel.Toolbar>
-          <Panel.Content asChild>
-            <ScrollArea.Root thin orientation='vertical'>
-              <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>
-                <SchemaTable
-                  classNames='py-1'
-                  types={staticTypes}
-                  objects={info.objects}
-                  label='Static Types'
-                  onClick={handleCreateData}
-                />
-                <SchemaTable
-                  classNames='py-1'
-                  types={recordTypes}
-                  objects={info.objects}
-                  label='Record Types'
-                  onClick={handleCreateData}
-                />
+
+      <Panel.Root {...Util.composableProps(props)} ref={forwardedRef}>
+        <Panel.Header>
+          <ActionToolbar {...menuActions} alwaysActive classNames='dx-document'>
+            <Field.Root>
+              <Input.Root
+                placeholder='Count'
+                classNames='w-[4rem] text-right'
+                min={1}
+                max={100}
+                size={8}
+                value={count}
+                onChange={(event) => setCount(parseInt(event.target.value))}
+                type='number'
+              />
+            </Field.Root>
+          </ActionToolbar>
+        </Panel.Header>
+        <Panel.Body asChild>
+          <ScrollArea.Root orientation='vertical'>
+            <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-separator-subtle'>
+              <SchemaTable
+                classNames='py-1'
+                types={staticTypes}
+                objects={info.objects}
+                label='Static Types'
+                onClick={handleCreateData}
+              />
+              <SchemaTable
+                classNames='py-1'
+                types={recordTypes}
+                objects={info.objects}
+                label='Record Types'
+                onClick={handleCreateData}
+              />
+              <SchemaTable
+                classNames='py-1'
+                types={presets.types}
+                objects={info.objects}
+                label='Presets'
+                onClick={handleCreateData}
+              />
+              {allTemplates.length > 0 && (
                 <SchemaTable
                   classNames='py-1'
-                  types={presets.types}
+                  types={allTemplates.map(({ id, label }) => ({ typename: id, presetLabel: label }))}
                   objects={info.objects}
-                  label='Presets'
+                  label='Space Templates'
                   onClick={handleCreateData}
                 />
-                <ProgressGenerator classNames='py-1' />
-              </ScrollArea.Viewport>
-            </ScrollArea.Root>
-          </Panel.Content>
-        </Panel.Root>
-      </Menu.Root>
+              )}
+              <ProgressGenerator classNames='py-1' />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Body>
+      </Panel.Root>
     );
   },
 );
@@ -259,14 +283,14 @@ const useSpaceGeneratorMenu = ({
 // Stable key for the test progress monitor within the shared registry.
 const TEST_PROGRESS_NAME = `${meta.profile.key}.test-progress`;
 
-type ProgressGeneratorProps = ThemedClassName;
+type ProgressGeneratorProps = Util.ThemedClassName;
 
 // Drives a synthetic progress monitor (10s over 10 steps) so the R0 rail meter can be exercised —
 // and renders the meter here too, since the rail's only lives inside a popover the user must open,
 // which made a working monitor look like a broken one.
 const ProgressGenerator = ({ classNames }: ProgressGeneratorProps) => {
-  const registry = useOptionalCapability(AppCapabilities.ProgressRegistry);
-  const monitor = useProgressMonitor(TEST_PROGRESS_NAME);
+  const registry = Hooks.useOptionalCapability(AppCapabilities.ProgressRegistry);
+  const monitor = ToolkitHooks.useProgressMonitor(TEST_PROGRESS_NAME);
   const running = monitor?.status === 'running';
   const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
 
@@ -317,18 +341,23 @@ const ProgressGenerator = ({ classNames }: ProgressGeneratorProps) => {
 
   return (
     <div className={mx('flex flex-col gap-1 py-1', classNames)}>
-      <Flex gap='sm' align='center'>
+      <Layout.Flex gap='sm' align='center'>
         <span className='grow'>Progress Monitor</span>
         {running ? (
-          <IconButton
+          <Button.Root
             icon='ph--x--regular'
             label='Cancel test progress'
             onClick={() => registry?.cancel(TEST_PROGRESS_NAME)}
           />
         ) : (
-          <IconButton icon='ph--play--regular' label='Start test progress' disabled={!registry} onClick={handleStart} />
+          <Button.Root
+            icon='ph--play--regular'
+            label='Start test progress'
+            disabled={!registry}
+            onClick={handleStart}
+          />
         )}
-      </Flex>
+      </Layout.Flex>
       {monitor && (monitor.status === 'running' || monitor.status === 'error') && (
         <ProgressMeter state={monitor} onCancel={() => registry?.cancel(TEST_PROGRESS_NAME)} />
       )}

package/src/containers/SpaceGenerator/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export { SpaceGenerator as default } from './SpaceGenerator';
+export { SpaceGenerator as default } from './SpaceGenerator.tsx';

package/src/containers/StatsPanel/StatsPanel.tsx

@@ -3,12 +3,13 @@
 //
 
 import { useAtomValue } from '@effect/atom-react/Hooks';
-import * as Atom from 'effect/unstable/reactivity/Atom';
-import React, { Fragment } from 'react';
+import * as Atom from 'effect/reactivity/Atom';
+import React from 'react';
 
-import { useOptionalCapability } from '@dxos/app-framework/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { ScrollArea } from '@dxos/react-ui';
+import { STAT_CARD_HUES, StatCard } from '@dxos/devtools';
+import * as Layout from '@dxos/react-ui/Layout';
 
 // Fallback so the atom hook is called unconditionally when no store is contributed (host plugin not
 // loaded); the panel then renders its empty state.
@@ -17,12 +18,12 @@ const EMPTY = Atom.make<Record<string, unknown>>({});
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   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. */
 const formatValue = (value: unknown): string => (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.
  */
 const flatten = (stats: unknown): [string, unknown][] => {
   if (!isRecord(stats)) {
@@ -36,39 +37,39 @@ const flatten = (stats: unknown): [string, unknown][] => {
   );
 };
 
+export type StatsPanelProps = {
+  /** Renders the empty state as a card too, so a stack shows the store exists. */
+  showEmpty?: boolean;
+};
+
 /**
- * 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.
  */
-export const StatsPanel = () => {
-  const store = useOptionalCapability(AppCapabilities.StatsPanel);
+export const StatsPanel = ({ showEmpty = true }: StatsPanelProps) => {
+  const store = Hooks.useOptionalCapability(AppCapabilities.StatsPanel);
   const stats = useAtomValue(store?.statsAtom ?? EMPTY);
   const compartments = Object.entries(stats);
   if (compartments.length === 0) {
-    return <div className='p-2 text-sm text-description'>No stats yet.</div>;
+    return showEmpty ? (
+      <StatCard.Root>
+        <StatCard.Header icon='ph--chart-bar--regular' hue={STAT_CARD_HUES.system} title='Plugin stats' />
+        <StatCard.Row label='No stats yet.' />
+      </StatCard.Root>
+    ) : null;
   }
 
   return (
-    <ScrollArea.Root thin centered padding>
-      <ScrollArea.Viewport>
-        {compartments.map(([pluginKey, value]) => (
-          <section key={pluginKey} className='w-full'>
-            <h3 className='text-start font-mono text-xs text-description pb-1'>{pluginKey}</h3>
-            <dl className='grid grid-cols-[auto_minmax(0,1fr)] w-full'>
-              {flatten(value).map(([key, cell]) => (
-                <Fragment key={key}>
-                  <dt className='border-be border-separator pb-1 pt-1 pe-2 text-description self-start'>{key}</dt>
-                  <dd className='border-be border-separator pb-1 pt-1 truncate font-mono text-end'>
-                    {formatValue(cell)}
-                  </dd>
-                </Fragment>
-              ))}
-            </dl>
-          </section>
-        ))}
-      </ScrollArea.Viewport>
-    </ScrollArea.Root>
+    <Layout.Container gap='md' gutter='none'>
+      {compartments.map(([pluginKey, value]) => (
+        <StatCard.Root key={pluginKey}>
+          <StatCard.Header icon='ph--chart-bar--regular' hue={STAT_CARD_HUES.system} title={pluginKey} />
+          {flatten(value).map(([key, cell]) => (
+            <StatCard.Row key={key} label={key} tooltip={key} value={formatValue(cell)} />
+          ))}
+        </StatCard.Root>
+      ))}
+    </Layout.Container>
   );
 };
 

package/src/containers/StatsPanel/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './StatsPanel';
+export * from './StatsPanel.tsx';

package/src/containers/Wireframe/Wireframe.tsx

@@ -6,13 +6,14 @@ import React from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { Obj } from '@dxos/echo';
-import { Flex, type ThemedClassName } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import * as Layout from '@dxos/react-ui/Layout';
+import type * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Create generic container with wireframe mode.
-export type WireframeProps = ThemedClassName<{
+export type WireframeProps = Util.ThemedClassName<{
   object: Obj.Unknown;
   label?: string;
 }>;
@@ -24,14 +25,14 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
 
   return (
     <div ref={ref} className={mx('relative grow min-h-96', classNames)} {...attentionAttrs}>
-      <Flex column gap='sm' classNames='absolute inset-2 overflow-hidden font-mono'>
-        <Flex justify='between'>
+      <Layout.Flex column gap='sm' classNames='absolute inset-2 overflow-hidden font-mono'>
+        <Layout.Flex justify='between'>
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
-        </Flex>
+        </Layout.Flex>
         {object && <JsonHighlighter data={object} classNames='text-xs opacity-75 rounded-sm' />}
-      </Flex>
-      <svg width={width} height={height} className='bg-transparent *:text-subdued'>
+      </Layout.Flex>
+      <svg width={width} height={height} className='bg-transparent *:text-fg-subtle'>
         <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />
         <line x1={0} y1={0} x2={width} y2={height} strokeWidth={1} />
         <line x1={0} y1={height} x2={width} y2={0} strokeWidth={1} />

package/src/containers/Wireframe/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export { Wireframe as default } from './Wireframe';
+export { Wireframe as default } from './Wireframe.tsx';