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

package/src/containers/{CliPanel/CliPanel.stories.tsx → CliArticle/CliArticle.stories.tsx}

@@ -9,18 +9,18 @@ import { userEvent } from 'storybook/test';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
 import * as SpacePlugin from '@dxos/plugin-space/SpacePlugin';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
 import { runCommand, waitForTerminal } from '@dxos/react-ui-terminal/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { CliPanel } from './CliPanel';
+import { CliArticle } from './CliArticle.tsx';
 
 const meta = {
-  title: 'plugins/plugin-devtools/containers/CliPanel',
-  component: CliPanel,
+  title: 'plugins/plugin-devtools/containers/CliArticle',
+  component: CliArticle,
   decorators: [
     withLayout({ layout: 'fullscreen' }),
     withTheme(),
@@ -28,7 +28,7 @@ const meta = {
       // No setup event: the panel fires `CommandsRequested` itself, which is what pulls the
       // plugins' command modules in — the same path the app takes.
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         // The identity brings a default space, which is what the commands resolve against.
         ClientPlugin.make({ onClientInitialized: ({ client }) => Effect.asVoid(initializeIdentity(client)) }),
         StorybookPlugin.make({}),
@@ -42,7 +42,7 @@ const meta = {
     controls: { disable: true },
     translations,
   },
-} satisfies Meta<typeof CliPanel>;
+} satisfies Meta<typeof CliArticle>;
 
 export default meta;
 
@@ -56,20 +56,19 @@ export const Default: Story = {};
  */
 export const Spec: Story = {
   play: async ({ canvasElement }) => {
-    const keyboard = (text: string) => userEvent.keyboard(text);
     await waitForTerminal(canvasElement, 'dx>');
 
     // `space list` reaches the client and reports its space.
-    await runCommand(canvasElement, 'space list', keyboard);
+    await runCommand(canvasElement, 'space list', userEvent.keyboard);
     await waitForTerminal(canvasElement, 'SPACE_READY');
 
     // `database query` reaches ECHO through the layer the command provides for itself.
-    await runCommand(canvasElement, 'database query', keyboard);
+    await runCommand(canvasElement, 'database query', userEvent.keyboard);
     await waitForTerminal(canvasElement, 'org.dxos.type.spaceProperties');
 
     // A command from another plugin, whose service arrives via that plugin's contributed layer
     // rather than anything this panel names.
-    await runCommand(canvasElement, 'config view', keyboard);
+    await runCommand(canvasElement, 'config view', userEvent.keyboard);
     await waitForTerminal(canvasElement, 'runtime');
   },
 };

package/src/containers/{CliPanel/CliPanel.tsx → CliArticle/CliArticle.tsx}

@@ -6,10 +6,10 @@ import React from 'react';
 
 import { Placeholder } from '@dxos/devtools';
 import { useClient } from '@dxos/react-client';
-import { Panel } from '@dxos/react-ui';
 import { Terminal } from '@dxos/react-ui-terminal';
+import * as Panel from '@dxos/react-ui/Panel';
 
-import { useCliApp } from './useCliApp';
+import { useCliApp } from './useCliApp.ts';
 
 const BOLD = '\x1b[1m';
 const DIM = '\x1b[2m';
@@ -24,22 +24,22 @@ const BANNER = `${BOLD}DXOS CLI${RESET}\n${DIM}The dx commands, running against
  * services are built once per client, so state the handlers hold survives between commands the way
  * it does in a long-lived shell.
  */
-export const CliPanel = () => {
+export const CliArticle = ({ role }: { role?: string }) => {
   const client = useClient();
   const cli = useCliApp(client);
 
   // No ScrollArea: xterm owns its own viewport and scrollback.
   return (
-    <Panel.Root>
-      <Panel.Content>
+    <Panel.Root role={role}>
+      <Panel.Body>
         {cli ? (
           <Terminal command={cli.command} layer={cli.layer} name='dx' banner={BANNER} />
         ) : (
           <Placeholder label='No commands' />
         )}
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };
 
-CliPanel.displayName = 'CliPanel';
+CliArticle.displayName = 'CliArticle';

package/src/containers/CliArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { CliArticle, CliArticle as default } from './CliArticle.tsx';

package/src/containers/{CliPanel → CliArticle}/useCliApp.ts

@@ -2,21 +2,22 @@
 // Copyright 2026 DXOS.org
 //
 
+import * as Command from 'effect/cli/Command';
+import * as Options from 'effect/cli/Flag';
 import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
-import * as Command from 'effect/unstable/cli/Command';
-import * as Options from 'effect/unstable/cli/Flag';
 import { useEffect, useMemo } from 'react';
 
 import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
+import * as Hooks from '@dxos/app-framework/Hooks';
 import * as Plugin from '@dxos/app-framework/Plugin';
-import { useCapabilities, usePluginManager } from '@dxos/app-framework/ui';
+import * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';
 import { CommandConfig, type CommandServices } from '@dxos/cli-util';
-import { type Client, ClientService, ConfigService } from '@dxos/client';
+import { type Client, fromClient, fromConfig } from '@dxos/client';
 import * as Operation from '@dxos/compute/Operation';
-import { EffectEx } from '@dxos/effect';
+import * as EffectEx from '@dxos/effect/EffectEx';
 
 const OPERATIONS_UNAVAILABLE = 'Operations are not available in the devtools terminal.';
 
@@ -46,9 +47,9 @@ const operationLayer = Layer.succeed(Operation.Service, {
  * Returns `undefined` until something contributes commands — there is no shell to offer yet.
  */
 export const useCliApp = (client: Client) => {
-  const manager = usePluginManager();
-  const commands = useCapabilities(Capabilities.Command);
-  const contributed = useCapabilities(Capabilities.Layer);
+  const manager = PluginManagerProvider.usePluginManager();
+  const commands = Hooks.useCapabilities(Capabilities.Command);
+  const contributed = Hooks.useCapabilities(Capabilities.Layer);
 
   useEffect(() => {
     EffectEx.runDetached(manager.activate(ActivationEvents.CommandsRequested));
@@ -66,8 +67,12 @@ export const useCliApp = (client: Client) => {
       // Shared so they parse anywhere in the line — a plain command config is only read when `dx`
       // itself is the leaf.
       Command.withSharedFlags({
-        json: Options.boolean('json').pipe(Options.withDescription('JSON output.')),
-        verbose: Options.boolean('verbose').pipe(Options.withAlias('v'), Options.withDescription('Verbose output.')),
+        json: Options.Boolean('json').pipe(Options.withDefault(false), Options.withDescription('JSON output.')),
+        verbose: Options.Boolean('verbose').pipe(
+          Options.withDefault(false),
+          Options.withAlias('v'),
+          Options.withDescription('Verbose output.'),
+        ),
       }),
       Command.withSubcommands([first, ...rest]),
       // After the subcommands so the config reaches them: `provide` wraps the handler it is applied
@@ -86,8 +91,8 @@ export const useCliApp = (client: Client) => {
     // Annotated so a service this host owes is a build error naming it, rather than a
     // "Service not found" the first time someone runs the command that needed it.
     const hostLayer: Layer.Layer<CommandServices, never, never> = Layer.mergeAll(
-      ClientService.fromClient(client),
-      ConfigService.fromConfig(client.config),
+      fromClient(client),
+      fromConfig(client.config),
       Layer.succeed(Plugin.Service, manager),
       Layer.succeed(Capability.Service, manager.capabilities),
       operationLayer,

package/src/containers/DebugGraph/DebugGraph.tsx

@@ -6,20 +6,21 @@ import React from 'react';
 
 import * as AppGraph from '@dxos/app-graph/AppGraph';
 import { Tree } from '@dxos/devtools';
-import { Panel, ScrollArea } from '@dxos/react-ui';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 
-export type DebugGraphProps = { graph: AppGraph.Graph; root: string };
+export type DebugGraphProps = { role?: string; graph: AppGraph.Graph; root: string };
 
-export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
+export const DebugGraph = ({ role, graph, root }: DebugGraphProps) => {
   return (
-    <Panel.Root>
-      <Panel.Content asChild>
+    <Panel.Root role={role}>
+      <Panel.Body asChild>
         <ScrollArea.Root orientation='all'>
           <ScrollArea.Viewport>
             <Tree data={AppGraph.toJSON(graph, root)} />
           </ScrollArea.Viewport>
         </ScrollArea.Root>
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };

package/src/containers/DebugGraph/index.ts

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

package/src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx

@@ -2,49 +2,89 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { StatsPanel, useStats } from '@dxos/devtools';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import { StatsPanel, type SurfaceProfilerStats, useStats } from '@dxos/devtools';
 
+import { type DevtoolsCardData, isDebugSurface } from '../../capabilities/DevtoolsCards.tsx';
+
+/**
+ * The stats stack: one poll of the client's stats, fanned out to every card contributed to the role.
+ * The profiler and dispatch metrics are sampled on each refresh rather than subscribed to: this
+ * container is itself a profiled surface, so a live subscription would record an entry for every
+ * re-render the notification caused and loop at frame rate, flushing every other surface out of the
+ * profiler's window — which is what made the Surfaces card's count wander with no interaction.
+ */
 export const DevtoolsOverviewContainer = () => {
   const [stats, refreshStats] = useStats();
-  const surfaceProfilerStats = Surface.useProfilerStats();
-  const surfaceMetrics = Surface.useMetrics();
+  const getProfilerStats = Surface.useProfilerSnapshot();
   const clearSurfaceProfiler = Surface.useProfilerClear();
+  // Resampled as surfaces mount and unmount: with a restored layout this container mounts at boot,
+  // before most of the app, so a single sample on mount would list only what existed then.
+  const mounted = Surface.useMounted();
+  const [surfaceProfilerStats, setSurfaceProfilerStats] = useState<SurfaceProfilerStats[]>([]);
+
+  // One row per surface mounted right now (the profiler records renders, not mounts), with its
+  // cumulative render timings and dispatch metrics joined on `surface/<id>/<role>` where they exist.
+  // The debug tooling's own surfaces are left out so the panel does not measure itself.
+  const sampleProfiler = useCallback(() => {
+    const timings = new Map(getProfilerStats().map((stat) => [stat.id, stat]));
+    const metrics = new Map(Surface.getMetrics().map((metric) => [metric.id, metric]));
+    setSurfaceProfilerStats(
+      mounted
+        .filter((surface) => !isDebugSurface(surface))
+        .map(({ id, role }) => {
+          // Mirrors the profiler's own id, which prints an anonymous surface as `undefined`.
+          const profilerId = `surface/${id}/${role}`;
+          const timing = timings.get(profilerId) ?? {
+            id: profilerId,
+            mountCount: 0,
+            updateCount: 0,
+            totalRenders: 0,
+            avgActualDuration: 0,
+            maxActualDuration: 0,
+            avgBaseDuration: 0,
+            lastActualDuration: 0,
+            lastCommitTime: 0,
+          };
+          const metric = metrics.get(profilerId);
+          return metric
+            ? {
+                ...timing,
+                candidates: metric.candidates,
+                truncated: metric.truncated,
+                errors: metric.errors,
+                dataUnstable: metric.dataUnstable,
+              }
+            : timing;
+        })
+        .sort((a, b) => b.maxActualDuration - a.maxActualDuration || a.id.localeCompare(b.id)),
+    );
+  }, [getProfilerStats, mounted]);
+  useEffect(sampleProfiler, [sampleProfiler]);
+
+  const handleRefresh = useCallback(() => {
+    refreshStats();
+    sampleProfiler();
+  }, [refreshStats, sampleProfiler]);
 
-  // The panel joins profiler stats with dispatch metrics, so reset must clear both.
+  // The profiler card joins profiler stats with dispatch metrics, so reset must clear both.
   const handleClearSurfaceProfiler = useCallback(() => {
     clearSurfaceProfiler?.();
     Surface.clearMetrics();
-  }, [clearSurfaceProfiler]);
-
-  // Join dispatch metrics onto the render-timing stats (both keyed by `surface/<id>/<role>`).
-  const enrichedStats = useMemo(() => {
-    const byId = new Map(surfaceMetrics.map((metric) => [metric.id, metric]));
-    return surfaceProfilerStats.map((stat) => {
-      const metric = byId.get(stat.id);
-      return metric
-        ? {
-            ...stat,
-            candidates: metric.candidates,
-            truncated: metric.truncated,
-            errors: metric.errors,
-            dataUnstable: metric.dataUnstable,
-          }
-        : stat;
-    });
-  }, [surfaceProfilerStats, surfaceMetrics]);
+    sampleProfiler();
+  }, [clearSurfaceProfiler, sampleProfiler]);
+
+  const data = useMemo<DevtoolsCardData>(
+    () => ({ stats, surfaceProfilerStats, onClearSurfaceProfiler: handleClearSurfaceProfiler }),
+    [stats, surfaceProfilerStats, handleClearSurfaceProfiler],
+  );
 
   return (
-    <StatsPanel
-      stats={stats}
-      surfaceProfilerStats={enrichedStats}
-      onRefresh={refreshStats}
-      onClearSurfaceProfiler={handleClearSurfaceProfiler}
-    >
-      <Surface.Surface type={AppSurface.DevtoolsOverview} />
+    <StatsPanel onRefresh={handleRefresh}>
+      <Surface.Surface type={AppSurface.DevtoolsOverview} data={data} />
     </StatsPanel>
   );
 };

package/src/containers/DevtoolsOverviewContainer/index.ts

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

package/src/containers/GithubPanel/GithubComponent.stories.tsx

@@ -9,11 +9,11 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { GithubComponent } from './GithubComponent';
+import { GithubComponent } from './GithubComponent.tsx';
 
 const DefaultStory = () => (
   <GithubComponent.Root>
-    <div className='grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full w-full'>
+    <div className='grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden dx-fill'>
       <GithubComponent.Header />
       <GithubComponent.Content />
       <GithubComponent.StatusBar />

package/src/containers/GithubPanel/GithubComponent.tsx

@@ -4,7 +4,10 @@
 
 import React, { type ReactNode, createContext, useContext, useEffect, useState } from 'react';
 
-import { Flex, IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
 
 import { meta } from '#meta';
 
@@ -90,10 +93,10 @@ const Root = ({ repo = DEFAULT_REPO, limit = DEFAULT_LIMIT, children }: GithubCo
 };
 
 const Header = () => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const { repo, pulls, unavailable } = useComponentContext();
   return (
-    <header className='flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-subdued-separator'>
+    <header className='flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-separator-subtle'>
       <a
         href={`https://github.com/${repo}`}
         target='_blank'
@@ -102,7 +105,7 @@ const Header = () => {
       >
         @{repo}
       </a>
-      <div className='text-xs text-description'>
+      <div className='text-xs text-fg-muted'>
         {unavailable
           ? t('github-unavailable.message')
           : pulls.length > 0
@@ -136,18 +139,18 @@ const formatRelative = (iso: string): string => {
 
 const PullRow = ({ pull }: { pull: GithubPullRequest }) => (
   <li>
-    <Flex asChild align='start' gap='sm' classNames='px-trim-sm py-trim-xs rounded-sm hover:bg-hover-surface'>
+    <Layout.Flex asChild align='start' gap='sm' classNames='px-trim-sm py-trim-xs rounded-sm hover:bg-hover-surface'>
       <a href={pull.html_url} target='_blank' rel='noopener noreferrer'>
         <img src={pull.user.avatar_url} alt='' className='size-6 rounded-full shrink-0' />
-        <Flex column classNames='min-w-0 flex-1'>
+        <Layout.Flex column classNames='min-w-0 flex-1'>
           {/* `leading-6` gives the title the avatar's line box, so the two align on their own. */}
           <span className='text-sm leading-6 truncate'>{pull.title}</span>
-          <span className='text-xs text-description truncate'>
+          <span className='text-xs text-fg-muted truncate'>
             #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}
           </span>
-        </Flex>
+        </Layout.Flex>
       </a>
-    </Flex>
+    </Layout.Flex>
   </li>
 );
 
@@ -167,10 +170,10 @@ const Content = () => {
 };
 
 const StatusBar = () => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const { repo } = useComponentContext();
   return (
-    <IconButton
+    <Button.Root
       icon='ph--github-logo--regular'
       label={t('view-on-github.button')}
       variant='primary'

package/src/containers/GithubPanel/GithubPanel.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 
-import { GithubComponent } from './GithubComponent';
+import { GithubComponent } from './GithubComponent.tsx';
 
 export const GithubPanel = () => (
   <GithubComponent.Root>
-    <div className='h-full grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full w-full'>
+    <div className='dx-fill grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden'>
       <GithubComponent.Header />
       <GithubComponent.Content />
       <GithubComponent.StatusBar />

package/src/containers/GithubPanel/index.ts

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

package/src/containers/{RegistryPanel/RegistryPanel.tsx → RegistryArticle/RegistryArticle.tsx}

@@ -8,8 +8,9 @@ import * as Operation from '@dxos/compute/Operation';
 import { JsonView, Placeholder, Searchbar } from '@dxos/devtools';
 import { Entity, Format, Obj, Type } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
-import { Panel, Toolbar } from '@dxos/react-ui';
 import { DynamicTable, type TableFeatures } from '@dxos/react-ui-table';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { mx } from '@dxos/ui-theme';
 
 type RegistryRow = {
@@ -84,7 +85,7 @@ const toDetailJson = (entity: Entity.Unknown): object => {
   return { id: getEntityId(entity), typename: Entity.getTypename(entity) };
 };
 
-export const RegistryPanel = () => {
+export const RegistryArticle = ({ role }: { role?: string }) => {
   const client = useClient();
   const [entities, setEntities] = useState<Entity.Unknown[]>([]);
   const [filter, setFilter] = useState('');
@@ -130,24 +131,24 @@ export const RegistryPanel = () => {
   const features: Partial<TableFeatures> = useMemo(() => ({ selection: { enabled: true, mode: 'single' } }), []);
 
   return (
-    <Panel.Root>
-      <Panel.Toolbar asChild>
+    <Panel.Root role={role}>
+      <Panel.Header>
         <Toolbar.Root>
           <Searchbar placeholder='Filter...' onChange={setFilter} />
         </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content>
+      </Panel.Header>
+      <Panel.Body>
         <div className={mx('h-full grid grid-cols-[2fr_1fr] overflow-hidden')}>
-          <div className={mx('flex flex-col min-h-0 overflow-hidden')}>
+          <div className={mx('flex flex-col dx-grow overflow-hidden')}>
             <DynamicTable properties={properties} rows={rows} features={features} onRowClick={handleRowClicked} />
           </div>
-          <div className={mx('min-h-0 h-full overflow-auto border-s border-separator text-sm')}>
+          <div className={mx('h-full overflow-auto border-s border-separator text-sm')}>
             {detailJson ? <JsonView data={detailJson} /> : <Placeholder label='Details' />}
           </div>
         </div>
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };
 
-RegistryPanel.displayName = 'RegistryPanel';
+RegistryArticle.displayName = 'RegistryArticle';

package/src/containers/RegistryArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { RegistryArticle, RegistryArticle as default } from './RegistryArticle.tsx';

package/src/containers/ToolsExplorerContainer/ToolsExplorerContainer.tsx

@@ -7,13 +7,20 @@ import React from 'react';
 import { EdgeServiceName } from '@dxos/config';
 import { useEdgeServiceEndpoint } from '@dxos/react-client';
 import { ToolsExplorer } from '@dxos/react-ui-introspect';
+import * as Panel from '@dxos/react-ui/Panel';
 
 /**
  * Binds the tools explorer to the introspect endpoint from config; the explorer renders its
- * unconfigured state when `runtime.services.edgeServices` has no `introspect` entry.
+ * unconfigured state when neither `runtime.services.edge.url` nor an `introspect` override is set.
  */
-export const ToolsExplorerContainer = () => {
-  return <ToolsExplorer serverUrl={useEdgeServiceEndpoint(EdgeServiceName.Introspect)} />;
+export const ToolsExplorerContainer = ({ role }: { role?: string }) => {
+  return (
+    <Panel.Root role={role}>
+      <Panel.Body>
+        <ToolsExplorer serverUrl={useEdgeServiceEndpoint(EdgeServiceName.Introspect)} />
+      </Panel.Body>
+    </Panel.Root>
+  );
 };
 
 ToolsExplorerContainer.displayName = 'ToolsExplorerContainer';

package/src/containers/ToolsExplorerContainer/index.ts

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

package/src/containers/index.ts

@@ -4,9 +4,9 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const CliPanel: ComponentType<any> = lazy(() => import('./CliPanel'));
-export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
-export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
-export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel'));
-export const RegistryPanel: ComponentType<any> = lazy(() => import('./RegistryPanel'));
-export const ToolsExplorerContainer: ComponentType<any> = lazy(() => import('./ToolsExplorerContainer'));
+export const CliArticle: ComponentType<any> = lazy(() => import('./CliArticle/index.ts'));
+export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph/index.ts'));
+export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer/index.ts'));
+export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel/index.ts'));
+export const RegistryArticle: ComponentType<any> = lazy(() => import('./RegistryArticle/index.ts'));
+export const ToolsExplorerContainer: ComponentType<any> = lazy(() => import('./ToolsExplorerContainer/index.ts'));

package/src/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * as DevtoolsPlugin from './DevtoolsPlugin';
-export * from '#meta';
+export * as DevtoolsPlugin from './DevtoolsPlugin.ts';
 export * from '#types';

package/src/meta.ts

@@ -4,6 +4,6 @@
 
 import * as Plugin from '@dxos/app-framework/Plugin';
 
-import config from '../dx.config';
+import config from '../dx.config.ts';
 
 export const meta = Plugin.getMetaFromConfig(config);

package/src/plugin.test.ts

@@ -4,7 +4,7 @@
 
 import { describe, test } from 'vitest';
 
-import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+import * as Harness from '@dxos/plugin-testing/Harness';
 
 import { meta } from '#meta';
 import { DevtoolsPlugin } from '#plugin';
@@ -15,7 +15,7 @@ describe('DevtoolsPlugin', () => {
   // Boot imports the app-graph-builder body (the harness fires the plugin's start event), which
   // can exceed the default 15s under vite-node transform load.
   test('modules activate on the expected events', { timeout: 60_000 }, async ({ expect }) => {
-    await using harness = await createComposerTestApp({
+    await using harness = await Harness.createComposerTestApp({
       plugins: [DevtoolsPlugin()],
     });
 

package/src/translations.ts

@@ -2,13 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
 import { translations as introspectTranslations } from '@dxos/react-ui-introspect/translations';
+import { translations as tableTranslations } from '@dxos/react-ui-table/translations';
+import type * as Theme from '@dxos/react-ui/Theme';
 
 import { meta } from '#meta';
 
 export const translations = [
   ...introspectTranslations,
+  // The panels' tables (credentials, feeds, …) read their column menus from react-ui-table.
+  ...tableTranslations,
   {
     'en-US': {
       [meta.profile.key]: {
@@ -25,7 +28,7 @@ export const translations = [
         'config.label': 'Config',
         'storage.label': 'Storage',
         'sqlite.label': 'SQLite',
-        'logging.label': 'Logging',
+        'logging.label': 'Logs',
         'diagnostics.label': 'Diagnostics',
         'tracing.label': 'Tracing',
         'halo.label': 'HALO',
@@ -38,6 +41,7 @@ export const translations = [
         'space.label': 'Space',
         'feeds.label': 'Feeds',
         'objects.label': 'Objects',
+        'queries.label': 'Queries',
         'schema.label': 'Schema',
         'registry.label': 'Registry',
         'automerge.label': 'Automerge',
@@ -64,4 +68,4 @@ export const translations = [
       },
     },
   },
-] as const satisfies Resource[];
+] as const satisfies Theme.Resource[];