@dxos/plugin-devtools 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-devtools",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "DXOS developer inspector plugin.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,17 +16,17 @@
     "#capabilities": {
       "source": "./src/capabilities/index.ts",
       "types": "./dist/types/src/capabilities/index.d.ts",
-      "default": "./dist/lib/neutral/capabilities/index.mjs"
+      "default": "./dist/lib/capabilities.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
       "types": "./dist/types/src/containers/index.d.ts",
-      "default": "./dist/lib/neutral/containers/index.mjs"
+      "default": "./dist/lib/containers.mjs"
     },
     "#meta": {
       "source": "./src/meta.ts",
       "types": "./dist/types/src/meta.d.ts",
-      "default": "./dist/lib/neutral/meta.mjs"
+      "default": "./dist/lib/meta.mjs"
     },
     "#plugin": {
       "source": {
@@ -35,37 +35,37 @@
         "default": "./src/DevtoolsPlugin.tsx"
       },
       "types": "./dist/types/src/DevtoolsPlugin.d.ts",
-      "workerd": "./dist/lib/neutral/DevtoolsPlugin.workerd.mjs",
-      "node": "./dist/lib/neutral/DevtoolsPlugin.node.mjs",
-      "default": "./dist/lib/neutral/DevtoolsPlugin.mjs"
+      "workerd": "./dist/lib/DevtoolsPlugin.workerd.mjs",
+      "node": "./dist/lib/DevtoolsPlugin.node.mjs",
+      "default": "./dist/lib/DevtoolsPlugin.mjs"
     },
     "#translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "default": "./dist/lib/translations.mjs"
     },
     "#types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -76,78 +76,76 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@antv/graphlib": "catalog:",
-    "@antv/layout": "catalog:",
-    "@dxos/app-framework": "workspace:*",
-    "@dxos/app-toolkit": "workspace:*",
-    "@dxos/assistant-toolkit": "workspace:*",
-    "@dxos/async": "workspace:*",
-    "@dxos/client-services": "workspace:*",
-    "@dxos/compute": "workspace:*",
-    "@dxos/compute-hyperformula": "workspace:*",
-    "@dxos/conductor": "workspace:*",
-    "@dxos/config": "workspace:*",
-    "@dxos/devtools": "workspace:*",
-    "@dxos/echo": "workspace:*",
-    "@dxos/echo-host": "workspace:*",
-    "@dxos/effect": "workspace:*",
-    "@dxos/invariant": "workspace:*",
-    "@dxos/keys": "workspace:*",
-    "@dxos/log": "workspace:*",
-    "@dxos/log-store-idb": "workspace:*",
-    "@dxos/operation": "workspace:*",
-    "@dxos/plugin-client": "workspace:*",
-    "@dxos/plugin-graph": "workspace:*",
-    "@dxos/plugin-inbox": "workspace:*",
-    "@dxos/plugin-markdown": "workspace:*",
-    "@dxos/plugin-script": "workspace:*",
-    "@dxos/plugin-sheet": "workspace:*",
-    "@dxos/plugin-sketch": "workspace:*",
-    "@dxos/plugin-space": "workspace:*",
-    "@dxos/plugin-status-bar": "workspace:*",
-    "@dxos/protocols": "workspace:*",
-    "@dxos/random": "workspace:*",
-    "@dxos/react-client": "workspace:*",
-    "@dxos/react-ui-attention": "workspace:*",
-    "@dxos/react-ui-canvas-compute": "workspace:*",
-    "@dxos/react-ui-canvas-editor": "workspace:*",
-    "@dxos/react-ui-form": "workspace:*",
-    "@dxos/react-ui-introspect": "workspace:*",
-    "@dxos/react-ui-syntax-highlighter": "workspace:*",
-    "@dxos/react-ui-table": "workspace:*",
-    "@dxos/schema": "workspace:*",
-    "@dxos/tracing": "workspace:*",
-    "@dxos/types": "workspace:*",
-    "@dxos/util": "workspace:*",
-    "@effect-atom/atom-react": "catalog:",
-    "@tldraw/tldraw": "catalog:",
-    "react-resize-detector": "catalog:"
+    "@antv/graphlib": "^2.0.4",
+    "@antv/layout": "^1.2.13",
+    "@tldraw/tldraw": "^3.0.0",
+    "react-resize-detector": "^11.0.1",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/assistant-toolkit": "0.11.0",
+    "@dxos/client-services": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/compute-hyperformula": "0.11.0",
+    "@dxos/conductor": "0.11.0",
+    "@dxos/config": "0.11.0",
+    "@dxos/compute": "0.11.0",
+    "@dxos/devtools": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-host": "0.11.0",
+    "@dxos/effect": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/log-store-idb": "0.11.0",
+    "@dxos/plugin-client": "0.11.0",
+    "@dxos/plugin-graph": "0.11.0",
+    "@dxos/operation": "0.11.0",
+    "@dxos/plugin-inbox": "0.11.0",
+    "@dxos/plugin-script": "0.11.0",
+    "@dxos/plugin-markdown": "0.11.0",
+    "@dxos/plugin-space": "0.11.0",
+    "@dxos/plugin-status-bar": "0.11.0",
+    "@dxos/protocols": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-canvas-compute": "0.11.0",
+    "@dxos/react-ui-canvas-editor": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-introspect": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/react-ui-table": "0.11.0",
+    "@dxos/plugin-sheet": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/tracing": "0.11.0",
+    "@dxos/types": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
-    "@dxos/plugin-testing": "workspace:*",
-    "@dxos/react-ui": "workspace:*",
-    "@dxos/storybook-utils": "workspace:*",
-    "@dxos/ui-theme": "workspace:*",
-    "@effect-atom/atom-react": "catalog:",
-    "@effect/platform": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "effect": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "vite": "catalog:"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "vite": "^8.1.4",
+    "@dxos/plugin-testing": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
-    "@dxos/random": "workspace:*",
-    "@dxos/react-ui": "workspace:*",
-    "@dxos/ui-theme": "workspace:*",
-    "@effect-atom/atom-react": "catalog:",
-    "@effect/platform": "catalog:",
-    "effect": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/random": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/react-ui": "0.11.0"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/DevtoolsPlugin.tsx

@@ -40,7 +40,7 @@ const setupDevtools = () => {
 
   // Used to test how composer handles breaking protocol changes.
   (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {
-    const { changeStorageVersionInMetadata } = await import('@dxos/echo-host/testing');
+    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');
     const { createStorageObjects } = await import('@dxos/client-services');
     const client: Client = (window as any).dxos.client;
     const config = client.config;

package/src/capabilities/DevtoolsSurfaces.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// Surface components that cannot be expressed as a `props` mapper, because they call hooks.
+
+import React, { type ComponentType, useCallback } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
+import { useActiveSpace } from '@dxos/app-toolkit/ui';
+import { InvocationTraceContainer, SpaceInfoPanel, SpaceListPanel, TestingPanel } from '@dxos/devtools';
+import { Feed } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { ScriptOperation } from '@dxos/plugin-script';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { type Space } from '@dxos/react-client/echo';
+
+import { Devtools } from '#types';
+
+export type ActiveSpacePanelProps = {
+  /** Stable module-level panel component; the surface passes it through its `props` mapper. */
+  Panel: ComponentType<{ space: Space }>;
+};
+
+/**
+ * Most devtools panels take the active space and render nothing without one. A mapper cannot read
+ * the active space (it is a hook) nor decline to render, so they share this wrapper.
+ */
+export const ActiveSpacePanel = ({ Panel }: ActiveSpacePanelProps) => {
+  const space = useActiveSpace();
+
+  return space ? <Panel space={space} /> : null;
+};
+
+export const SpaceListSurface = () => {
+  const { invokePromise } = useOperationInvoker();
+  const handleSelect = useCallback(
+    () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Space] }),
+    [invokePromise],
+  );
+
+  return <SpaceListPanel onSelect={handleSelect} />;
+};
+
+export const SpaceInfoSurface = () => {
+  const space = useActiveSpace();
+  const { invokePromise } = useOperationInvoker();
+  const handleSelect = useCallback(
+    () => invokePromise(LayoutOperation.Open, { subject: [Devtools.Echo.Feeds] }),
+    [invokePromise],
+  );
+  if (!space) {
+    return null;
+  }
+
+  return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
+};
+
+export const EdgeTracesSurface = () => {
+  const space = useActiveSpace();
+  if (!space) {
+    return null;
+  }
+
+  const feed = space.properties.invocationTraceFeed?.target;
+  const feedDXN = feed ? Feed.getFeedUri(feed) : undefined;
+
+  return <InvocationTraceContainer db={space.db} feedDXN={feedDXN} detailAxis='block' />;
+};
+
+export const EdgeTestingSurface = () => {
+  const { invokePromise } = useOperationInvoker();
+  const onSpaceCreate = useCallback(
+    async (space: Space) => {
+      await space.waitUntilReady();
+      await invokePromise(SpaceOperation.Migrate, { space });
+      await space.db.flush();
+    },
+    [invokePromise],
+  );
+  const onScriptPluginOpen = useCallback(
+    async (space: Space) => {
+      await space.waitUntilReady();
+      const createResult = await invokePromise(ScriptOperation.CreateScript, { db: space.db });
+      if (createResult.data?.object) {
+        await invokePromise(SpaceOperation.AddObject, { target: space.db, object: createResult.data.object });
+      }
+      log.info('script created', { result: createResult });
+      if (createResult.data?.object) {
+        await invokePromise(LayoutOperation.Open, {
+          subject: [GraphPath.getObjectPathFromObject(createResult.data.object)],
+        });
+      }
+    },
+    [invokePromise],
+  );
+
+  return <TestingPanel onSpaceCreate={onSpaceCreate} onScriptPluginOpen={onScriptPluginOpen} />;
+};

package/src/capabilities/app-graph-builder.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import { AppCapabilities, AppNode, AppNodeMatcher, Paths } from '@dxos/app-toolkit';
+import { AppCapabilities, AppNode, AppNodeMatcher, GraphPath } from '@dxos/app-toolkit';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 import { type Space } from '@dxos/react-client/echo';
 import { Position } from '@dxos/util';
@@ -37,7 +37,7 @@ export default Capability.makeModule(
 
       GraphBuilder.createExtension({
         id: 'devtools',
-        match: NodeMatcher.whenAny(NodeMatcher.whenRoot, AppNodeMatcher.whenNavTreeGroup(Paths.GroupTypes.system)),
+        match: NodeMatcher.whenAny(NodeMatcher.whenRoot, AppNodeMatcher.whenNavTreeGroup(GraphPath.GroupTypes.system)),
         connector: (_nodeOrSpace: Node.Node | Space, get) =>
           Effect.gen(function* () {
             const [graph] = get(yield* Capability.atom(AppCapabilities.AppGraph));
@@ -112,7 +112,7 @@ export default Capability.makeModule(
                         data: Devtools.Client.Logs,
                         type: Devtools.id,
                         properties: {
-                          label: ['logs.label', { ns: meta.profile.key }],
+                          label: ['logging.label', { ns: meta.profile.key }],
                           icon: 'ph--file-text--regular',
                         },
                       }),

package/src/capabilities/react-surface.ts

@@ -0,0 +1,236 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { EDGE_SERVICE_DEFAULTS, EdgeServiceName } from '@dxos/config';
+import {
+  AutomergePanel,
+  ConfigPanel,
+  CredentialsPanel,
+  DeviceListPanel,
+  DiagnosticsPanel,
+  EdgeDashboardPanel,
+  FeedsPanel,
+  IdentityPanel,
+  KeyringPanel,
+  LoggingPanel,
+  MembersPanel,
+  MetadataPanel,
+  NetworkPanel,
+  ObjectsPanel,
+  QueuesPanel,
+  SchemaPanel,
+  SignalPanel,
+  SqlitePanel,
+  StoragePanel,
+  SwarmPanel,
+  WorkflowPanel,
+} from '@dxos/devtools';
+import { type Graph } from '@dxos/plugin-graph';
+import { ToolsExplorer } from '@dxos/react-ui-introspect';
+
+import { DebugGraph, DevtoolsOverviewContainer, RegistryPanel } from '#containers';
+import { Devtools } from '#types';
+
+import {
+  ActiveSpacePanel,
+  EdgeTestingSurface,
+  EdgeTracesSurface,
+  SpaceInfoSurface,
+  SpaceListSurface,
+} from './DevtoolsSurfaces';
+
+const MCP_SERVER_URL = EDGE_SERVICE_DEFAULTS[EdgeServiceName.Introspect];
+
+type GraphDebug = {
+  graph: Graph.Graph;
+  root: string;
+};
+
+const isGraphDebug = (data: unknown): data is GraphDebug => {
+  if (typeof data !== 'object' || data === null || !('graph' in data) || !('root' in data)) {
+    return false;
+  }
+
+  const { graph, root } = data;
+  return (
+    typeof graph === 'object' &&
+    graph !== null &&
+    'json' in graph &&
+    typeof graph.json === 'function' &&
+    typeof root === 'string'
+  );
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'appGraph',
+        filter: AppSurface.subject(AppSurface.Article, isGraphDebug),
+        component: DebugGraph,
+        props: ({ data: { subject } }) => ({ graph: subject.graph, root: subject.root }),
+      }),
+      Surface.create({
+        id: 'toolsExplorer',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.ToolsExplorer),
+        component: ToolsExplorer,
+        props: () => ({ serverUrl: MCP_SERVER_URL }),
+      }),
+      Surface.create({
+        id: 'registry',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Registry),
+        component: RegistryPanel,
+      }),
+      Surface.create({
+        id: 'devtoolsOverview',
+        filter: Surface.makeFilter(AppSurface.deckCompanion('devtoolsOverview')),
+        component: DevtoolsOverviewContainer,
+      }),
+
+      //
+      // Devtools
+      //
+
+      Surface.create({
+        id: 'client.config',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Config),
+        component: ConfigPanel,
+        props: () => ({ vaultSelector: false }),
+      }),
+      Surface.create({
+        id: 'client.storage',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Storage),
+        component: StoragePanel,
+      }),
+      Surface.create({
+        id: 'client.sqlite',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Sqlite),
+        component: SqlitePanel,
+      }),
+      Surface.create({
+        id: 'client.logs',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Logs),
+        component: LoggingPanel,
+      }),
+      Surface.create({
+        id: 'client.diagnostics',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Client.Diagnostics),
+        component: DiagnosticsPanel,
+      }),
+      Surface.create({
+        id: 'halo.identity',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Identity),
+        component: IdentityPanel,
+      }),
+      Surface.create({
+        id: 'halo.devices',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Devices),
+        component: DeviceListPanel,
+      }),
+      Surface.create({
+        id: 'halo.keyring',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Keyring),
+        component: KeyringPanel,
+      }),
+      Surface.create({
+        id: 'halo.credentials',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Halo.Credentials),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: CredentialsPanel }),
+      }),
+      Surface.create({
+        id: 'echo.spaces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Spaces),
+        component: SpaceListSurface,
+      }),
+      Surface.create({
+        id: 'echo.space',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Space),
+        component: SpaceInfoSurface,
+      }),
+      Surface.create({
+        id: 'echo.feeds',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Feeds),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: FeedsPanel }),
+      }),
+      Surface.create({
+        id: 'echo.objects',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Objects),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: ObjectsPanel }),
+      }),
+      Surface.create({
+        id: 'echo.schema',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Schema),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: SchemaPanel }),
+      }),
+      Surface.create({
+        id: 'echo.automerge',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Automerge),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: AutomergePanel }),
+      }),
+      Surface.create({
+        id: 'echo.queues',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Queues),
+        component: QueuesPanel,
+      }),
+      Surface.create({
+        id: 'echo.members',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Members),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: MembersPanel }),
+      }),
+      Surface.create({
+        id: 'echo.metadata',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Echo.Metadata),
+        component: MetadataPanel,
+      }),
+      Surface.create({
+        id: 'mesh.signal',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Signal),
+        component: SignalPanel,
+      }),
+      Surface.create({
+        id: 'mesh.swarm',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Swarm),
+        component: SwarmPanel,
+      }),
+      Surface.create({
+        id: 'mesh.network',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Mesh.Network),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: NetworkPanel }),
+      }),
+      Surface.create({
+        id: 'edge.dashboard',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Dashboard),
+        component: EdgeDashboardPanel,
+      }),
+      Surface.create({
+        id: 'edge.workflows',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Workflows),
+        component: ActiveSpacePanel,
+        props: () => ({ Panel: WorkflowPanel }),
+      }),
+      Surface.create({
+        id: 'edge.traces',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Traces),
+        component: EdgeTracesSurface,
+      }),
+      Surface.create({
+        id: 'edge.testing',
+        filter: AppSurface.literal(AppSurface.Article, Devtools.Edge.Testing),
+        component: EdgeTestingSurface,
+      }),
+    ]);
+  }),
+);

package/src/containers/DebugGraph/DebugGraph.tsx

@@ -6,11 +6,22 @@ import React from 'react';
 
 import { Tree } from '@dxos/devtools';
 import { Graph } from '@dxos/plugin-graph';
+import { Panel, ScrollArea } from '@dxos/react-ui';
 
 export type DebugGraphProps = { graph: Graph.Graph; root: string };
 
 export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
-  return <Tree data={Graph.toJSON(graph, root)} />;
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <ScrollArea.Root orientation='all'>
+          <ScrollArea.Viewport>
+            <Tree data={Graph.toJSON(graph, root)} />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+    </Panel.Root>
+  );
 };
 
 DebugGraph.displayName = 'DebugGraph';

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

@@ -13,7 +13,7 @@ import { GithubComponent } from './GithubComponent';
 
 const DefaultStory = () => (
   <GithubComponent.Root>
-    <div className='grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full is-full'>
+    <div className='grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full w-full'>
       <GithubComponent.Header />
       <GithubComponent.Content />
       <GithubComponent.StatusBar />

package/src/containers/GithubPanel/GithubComponent.tsx

@@ -93,7 +93,7 @@ const Header = () => {
   const { t } = useTranslation(meta.profile.key);
   const { repo, pulls, unavailable } = useComponentContext();
   return (
-    <header className='flex items-center justify-between gap-1 px-4 py-3 bg-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-subdued-separator'>
       <a
         href={`https://github.com/${repo}`}
         target='_blank'

package/src/containers/GithubPanel/GithubPanel.tsx

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