@dxos/plugin-debug 0.10.0 → 0.11.1

package/src/capabilities/stats-panel.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { meta } from '#meta';
+
+type StatsPanelOptions = {
+  /** Persist the store to localStorage (hydrate on load, save on write). */
+  persist?: boolean;
+};
+
+const STORAGE_KEY = `${meta.profile.key}.statsPanel`;
+
+/**
+ * Contributes the {@link AppCapabilities.StatsPanel} store: a single reactive atom holding one
+ * compartment per plugin, keyed by plugin key. Read access spans the whole store; writes are scoped
+ * to a compartment via `compartment(pluginKey)`. Kept alive with `Atom.keepAlive` so a background
+ * writer (e.g. a sync operation) can populate it before any surface subscribes. When `persist` is set
+ * the store hydrates from and saves to localStorage so stats survive a reload.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* ({ persist = true }: StatsPanelOptions = {}) {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const canPersist = persist && typeof localStorage !== 'undefined';
+
+    const hydrate = (): Record<string, unknown> => {
+      if (!canPersist) {
+        return {};
+      }
+      try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        return raw ? JSON.parse(raw) : {};
+      } catch {
+        // Best-effort: a malformed/unavailable value just starts empty.
+        return {};
+      }
+    };
+
+    const statsAtom = Atom.make<Record<string, unknown>>(hydrate()).pipe(Atom.keepAlive);
+
+    const save = () => {
+      if (!canPersist) {
+        return;
+      }
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(registry.get(statsAtom)));
+      } catch {
+        // Best-effort: localStorage may be disabled or over quota; the in-memory atom is authoritative.
+      }
+    };
+
+    return Capability.contributes(AppCapabilities.StatsPanel, {
+      statsAtom,
+      get: (pluginKey) => registry.get(statsAtom)[pluginKey],
+      compartment: (pluginKey) => ({
+        set: (stats) => {
+          registry.set(statsAtom, { ...registry.get(statsAtom), [pluginKey]: stats });
+          save();
+        },
+        clear: () => {
+          const { [pluginKey]: _removed, ...rest } = registry.get(statsAtom);
+          registry.set(statsAtom, rest);
+          save();
+        },
+      }),
+    });
+  }),
+);

package/src/components/SchemaTable/SchemaTable.tsx

@@ -4,18 +4,19 @@
 
 import React from 'react';
 
-import { IconButton } from '@dxos/react-ui';
+import { IconButton, ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
-export type SchemaTableProps = {
+export type SchemaTableProps = ThemedClassName<{
   types: any[];
   objects?: Record<string, number | undefined>;
   label: string;
   onClick: (typename: string) => void;
-};
+}>;
 
-export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTableProps) => {
+export const SchemaTable = ({ classNames, types, objects = {}, label, onClick }: SchemaTableProps) => {
   return (
-    <div className='grid grid-cols-[1fr_80px_40px] gap-1 overflow-none'>
+    <div className={mx('grid grid-cols-[1fr_80px_40px] gap-1 overflow-none', classNames)}>
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -6,10 +6,11 @@ import { addressToA1Notation } from '@dxos/compute-hyperformula';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { EID, Filter, Key, Type, View } from '@dxos/echo';
 import { OperationInvoker } from '@dxos/operation';
+import { Drawing } from '@dxos/plugin-illustrator';
 import { Markdown } from '@dxos/plugin-markdown';
 import { Sheet } from '@dxos/plugin-sheet';
-import { Sketch } from '@dxos/plugin-sketch';
 import { SpaceOperation } from '@dxos/plugin-space';
+import { Tldraw } from '@dxos/plugin-tldraw';
 import { random } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
@@ -70,10 +71,15 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    Type.getTypename(Sketch.Sketch),
+    Type.getTypename(Drawing.Drawing),
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const obj = space.db.add(Sketch.make({ name: random.commerce.productName() }));
+        const obj = space.db.add(
+          Drawing.make({
+            name: random.commerce.productName(),
+            canvas: Drawing.makeCanvas({ schema: Tldraw.TLDRAW_SCHEMA }),
+          }),
+        );
         return obj;
       });
 

package/src/components/SpaceGenerator/presets.ts

@@ -121,8 +121,8 @@ export const generator = () => ({
         invariant(mailbox, 'Mailbox not found');
         const mailboxFeed = await mailbox.feed?.tryLoad();
         invariant(mailboxFeed, 'Mailbox missing feed reference');
-        const queueDxn = Feed.getQueueUri(mailboxFeed);
-        invariant(queueDxn, 'Mailbox feed missing queue DXN key');
+        const feedUri = Feed.getFeedUri(mailboxFeed);
+        invariant(feedUri, 'Mailbox feed missing feed URI');
         const tag = await space.db.query(Filter.type(Tag.Tag, { label: 'Investor' })).first();
         const tagUri = Obj.getURI(tag);
 

package/src/components/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 export * from './SchemaTable';

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -7,9 +7,9 @@ import React, { useMemo, useState } from 'react';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
 import { type Entity, Filter, Json, Obj, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import type { EntityId } from '@dxos/keys';
-import { useQuery } from '@dxos/react-client/echo';
-import { Clipboard, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Clipboard, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
@@ -24,12 +24,17 @@ export type DebugObjectPanelProps = Pick<
 export const DebugObjectPanel = ({ role, companionTo, onOpen, canOpen }: DebugObjectPanelProps) => {
   const db = Obj.getDatabase(companionTo);
   const [selectedId, setSelectedId] = useState<EntityId | null>(null);
-  const [depth, setDepth] = useState(0);
-  const [selectedObject] = useQuery(
-    db,
-    Query.select(Filter.id(selectedId ?? companionTo.id)).options({ deleted: 'include' }),
+  // Include feeds so that feed-backed objects (e.g. synced games) resolve in the selection query.
+  const selectionQuery = useMemo(
+    () =>
+      db
+        ? Query.select(Filter.id(selectedId ?? companionTo.id))
+            .options({ deleted: 'include' })
+            .from(db, { includeFeeds: true })
+        : Query.select(Filter.nothing()),
+    [db, selectedId, companionTo.id],
   );
-  const refReplacer = useMemo(() => (db ? Json.createRefReplacer({ db, depth }) : undefined), [db, depth]);
+  const [selectedObject] = useQuery(db, selectionQuery);
 
   return (
     <Clipboard.Provider>
@@ -38,7 +43,7 @@ export const DebugObjectPanel = ({ role, companionTo, onOpen, canOpen }: DebugOb
           <Toolbar.Root />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <div className={mx('grid divide-y divide-separator', db && 'grid-rows-[1fr_2fr]')}>
+          <div className={mx('grid divide-y divide-subdued-separator', db && 'grid-rows-[1fr_2fr]')}>
             {db && (
               <ScrollArea.Root>
                 <ScrollArea.Viewport>
@@ -52,22 +57,15 @@ export const DebugObjectPanel = ({ role, companionTo, onOpen, canOpen }: DebugOb
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             )}
-            <Syntax.Root data={selectedObject} replacer={refReplacer}>
+            <Syntax.Root
+              data={selectedObject}
+              getReplacer={(depth) => (db ? Json.createRefReplacer({ db, depth }) : undefined)}
+            >
               <Panel.Root>
                 <Panel.Toolbar asChild>
                   <Toolbar.Root classNames='grid grid-cols-[1fr_3rem]'>
                     <Syntax.Filter />
-                    <Input.Root>
-                      <Input.TextInput
-                        variant='subdued'
-                        type='number'
-                        min={0}
-                        step={1}
-                        aria-label='Ref depth'
-                        value={depth}
-                        onChange={(event) => setDepth(Math.max(0, Number(event.target.value) || 0))}
-                      />
-                    </Input.Root>
+                    <Syntax.Depth />
                   </Toolbar.Root>
                 </Panel.Toolbar>
                 <Panel.Content asChild>
@@ -83,3 +81,5 @@ export const DebugObjectPanel = ({ role, companionTo, onOpen, canOpen }: DebugOb
     </Clipboard.Provider>
   );
 };
+
+DebugObjectPanel.displayName = 'DebugObjectPanel';

package/src/containers/DebugSettings/DebugSettings.tsx

@@ -8,7 +8,7 @@ import { AppCapabilities, AppSpace } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
-import { type IdbLogStore } from '@dxos/log-store-idb';
+import { type IdbLogStore, MANUAL_LOG_EXPORT_MAX_BYTES } from '@dxos/log-store-idb';
 import { useClient } from '@dxos/react-client';
 import { IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
@@ -92,8 +92,7 @@ export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }
   }, [client, download, handleToast, onUpload, t]);
 
   const handleDownloadLogs = useCallback(async () => {
-    const ndjson = await logStore.export();
-    const file = new Blob([ndjson], { type: 'application/x-ndjson' });
+    const file = await logStore.exportBlob({ maxSize: MANUAL_LOG_EXPORT_MAX_BYTES });
     const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson`;
     download(file, fileName);
   }, [download, logStore]);
@@ -259,3 +258,5 @@ const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) =
     await SaveConfig(storageConfigCopy);
   });
 };
+
+DebugSettings.displayName = 'DebugSettings';

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -7,8 +7,8 @@ import React, { useState } from 'react';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
 import { type Entity, Filter, Obj, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { type EntityId } from '@dxos/keys';
-import { useQuery } from '@dxos/react-client/echo';
 import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
@@ -35,7 +35,7 @@ export const DebugSpaceObjectsPanel = ({ space, onOpen, canOpen }: DebugSpaceObj
           </Toolbar.Root>
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <Grid rows={2} classNames='divide-y divide-separator'>
+          <Grid rows={2} classNames='divide-y divide-subdued-separator'>
             <ScrollArea.Root>
               <ScrollArea.Viewport>
                 <ObjectsTree
@@ -53,3 +53,5 @@ export const DebugSpaceObjectsPanel = ({ space, onOpen, canOpen }: DebugSpaceObj
     </Clipboard.Provider>
   );
 };
+
+DebugSpaceObjectsPanel.displayName = 'DebugSpaceObjectsPanel';

package/src/containers/DebugStatus/DebugStatus.tsx

@@ -210,3 +210,5 @@ export const DebugStatus = () => {
     </>
   );
 };
+
+DebugStatus.displayName = 'DebugStatus';

package/src/containers/LogStatus/LogStatus.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { StatusBar } from '@dxos/plugin-status-bar/components';
+import { IconButton, Panel, Popover, useTranslation } from '@dxos/react-ui';
+import { Logger } from '@dxos/react-ui-debug';
+
+import { meta } from '#meta';
+
+/** Status-bar button that opens the log panel in a popover for a quick glance. */
+export const LogStatus = () => {
+  const { t } = useTranslation(meta.profile.key);
+
+  return (
+    <Popover.Root>
+      {/* IconButton is the direct trigger child so the trigger ref/handlers/ARIA attach to the button, not the container. */}
+      <StatusBar.Item>
+        <Popover.Trigger asChild>
+          <IconButton variant='ghost' icon='ph--list-magnifying-glass--regular' iconOnly label={t('open-logs.label')} />
+        </Popover.Trigger>
+      </StatusBar.Item>
+      <Popover.Portal>
+        <Popover.Content side='top'>
+          <Popover.Viewport classNames='w-[40rem] h-[24rem]'>
+            <Logger.Root>
+              <Panel.Root>
+                <Panel.Toolbar asChild>
+                  <Logger.Toolbar />
+                </Panel.Toolbar>
+                <Panel.Content asChild>
+                  <Logger.Content>
+                    <Logger.List />
+                  </Logger.Content>
+                </Panel.Content>
+                <Panel.Statusbar asChild>
+                  <Logger.Filter />
+                </Panel.Statusbar>
+              </Panel.Root>
+            </Logger.Root>
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+LogStatus.displayName = 'LogStatus';

package/src/containers/LogStatus/index.ts

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

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -2,25 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { useOperationInvoker, useOptionalCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { useProgress } from '@dxos/app-toolkit/ui';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, Obj, Type } from '@dxos/echo';
+import { Drawing } from '@dxos/plugin-illustrator';
 import { Markdown } from '@dxos/plugin-markdown';
 import { Sheet } from '@dxos/plugin-sheet';
-import { Sketch } from '@dxos/plugin-sketch';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, Panel, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
+import { IconButton, Input, Panel, ScrollArea, ThemedClassName, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { Organization, Person, Task } from '@dxos/types';
+import { mx } from '@dxos/ui-theme';
 import { sortKeys } from '@dxos/util';
 
 import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';
+import { meta } from '#meta';
 
 // TODO(burdon): Make extensible.
-const staticTypes = [Markdown.Document, Sketch.Sketch, Sheet.Sheet, ComputeGraph];
+const staticTypes = [Markdown.Document, Drawing.Drawing, Sheet.Sheet, ComputeGraph];
 const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
 
 export type SpaceGeneratorProps = {
@@ -94,8 +98,8 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
 
     return (
       <Panel.Root {...composableProps(props)} ref={forwardedRef}>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
+        <Panel.Toolbar>
+          <Toolbar.Root classNames='dx-document'>
             <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
             <Toolbar.Separator />
             <Input.Root>
@@ -115,9 +119,28 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
         <Panel.Content asChild>
           <ScrollArea.Root thin orientation='vertical'>
             <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>
-              <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-              <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
-              <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
+              <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}
+              />
+              <ProgressGenerator classNames='py-1' />
             </ScrollArea.Viewport>
           </ScrollArea.Root>
         </Panel.Content>
@@ -125,3 +148,78 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
     );
   },
 );
+
+SpaceGenerator.displayName = 'SpaceGenerator';
+
+// Stable key for the test progress monitor within the shared registry.
+const TEST_PROGRESS_NAME = `${meta.profile.key}.test-progress`;
+
+type ProgressGeneratorProps = ThemedClassName;
+
+// Drives a synthetic progress monitor (10s over 10 steps) so the R0 rail meter can be exercised.
+const ProgressGenerator = ({ classNames }: ProgressGeneratorProps) => {
+  const registry = useOptionalCapability(AppCapabilities.ProgressRegistry);
+  const monitor = useProgress(TEST_PROGRESS_NAME);
+  const running = monitor?.status === 'running';
+  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  }, []);
+
+  const handleStart = useCallback(() => {
+    // Guard on the timer ref too: `running` (derived from the registry) can lag a fast second click.
+    if (!registry || running || intervalRef.current) {
+      return;
+    }
+
+    const steps = 10;
+    let current = 0;
+    const handle = registry.register(TEST_PROGRESS_NAME, {
+      label: 'Test Progress',
+      total: steps,
+      // Invoked by the meter's cancel control (R0 rail) or the local button.
+      onCancel: () => {
+        clearTimer();
+        handle.remove();
+      },
+    });
+
+    intervalRef.current = setInterval(() => {
+      current += 1;
+      handle.set(current);
+      if (current >= steps) {
+        clearTimer();
+        handle.done();
+        handle.remove();
+      }
+    }, 1_000);
+  }, [registry, running, clearTimer]);
+
+  // Tear down the timer and the registry entry if unmounted mid-run.
+  useEffect(
+    () => () => {
+      clearTimer();
+      registry?.cancel(TEST_PROGRESS_NAME);
+    },
+    [clearTimer, registry],
+  );
+
+  return (
+    <div className={mx('flex items-center gap-2 py-1', classNames)}>
+      <span className='grow'>Progress Monitor</span>
+      {running ? (
+        <IconButton
+          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} />
+      )}
+    </div>
+  );
+};

package/src/containers/StatsPanel/StatsPanel.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { Fragment } from 'react';
+
+import { useOptionalCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { ScrollArea } from '@dxos/react-ui';
+
+// Fallback so the atom hook is called unconditionally when no store is contributed (host plugin not
+// loaded); the panel then renders its empty state.
+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. */
+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.
+ */
+const flatten = (stats: unknown): [string, unknown][] => {
+  if (!isRecord(stats)) {
+    return [['value', stats]];
+  }
+
+  return Object.entries(stats).flatMap(([key, value]) =>
+    isRecord(value)
+      ? Object.entries(value).map(([subKey, subValue]): [string, unknown] => [`${key}.${subKey}`, subValue])
+      : [[key, value] as [string, unknown]],
+  );
+};
+
+/**
+ * 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.
+ */
+export const StatsPanel = () => {
+  const store = 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 (
+    <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 pbe-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 pbe-1 pbs-1 pie-2 text-description self-start'>{key}</dt>
+                  <dd className='border-be border-separator pbe-1 pbs-1 truncate font-mono text-end'>
+                    {formatValue(cell)}
+                  </dd>
+                </Fragment>
+              ))}
+            </dl>
+          </section>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+StatsPanel.displayName = 'StatsPanel';

package/src/containers/StatsPanel/index.ts

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

package/src/containers/Wireframe/Wireframe.tsx

@@ -39,3 +39,5 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
     </div>
   );
 };
+
+Wireframe.displayName = 'Wireframe';

package/src/containers/index.ts

@@ -1,16 +1,18 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 import { type ComponentType, lazy } from 'react';
 
-export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
-export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
 export const DebugObjectPanel: ComponentType<any> = lazy(() => import('./DebugObjectPanel'));
+export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
+export const DebugSpaceObjectsPanel: ComponentType<any> = lazy(() => import('./DebugSpaceObjectsPanel'));
 export const DebugStatus: ComponentType<any> = lazy(() => import('./DebugStatus'));
-export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
+export const LogStatus: ComponentType<any> = lazy(() =>
+  import('./LogStatus').then((module) => ({ default: module.LogStatus })),
+);
 export const SpaceGenerator: ComponentType<any> = lazy(() => import('./SpaceGenerator'));
 export const Wireframe: ComponentType<any> = lazy(() => import('./Wireframe'));
-export const DebugSpaceObjectsPanel: ComponentType<any> = lazy(() => import('./DebugSpaceObjectsPanel'));
-export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel'));
-export const RegistryPanel: ComponentType<any> = lazy(() => import('./RegistryPanel'));
+export const StatsPanel: ComponentType<any> = lazy(() =>
+  import('./StatsPanel').then((module) => ({ default: module.StatsPanel })),
+);

package/src/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 export * from './meta';

package/src/meta.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 import { Plugin } from '@dxos/app-framework';

package/src/plugin.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 import { Plugin } from '@dxos/app-framework';