@dxos/plugin-devtools 0.10.0

package/src/containers/GithubPanel/index.ts

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

package/src/containers/RegistryPanel/RegistryPanel.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Operation } from '@dxos/compute';
+import { JsonView, PanelContainer, Placeholder, Searchbar } from '@dxos/devtools';
+import { Entity, Format, Obj, Type } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { Toolbar } from '@dxos/react-ui';
+import { DynamicTable, type TableFeatures } from '@dxos/react-ui-table';
+import { mx } from '@dxos/ui-theme';
+
+type RegistryRow = {
+  id: string;
+  kind: string;
+  label: string;
+  _entity: Entity.Unknown;
+};
+
+const textFilter = (text?: string) => {
+  if (!text) {
+    return () => true;
+  }
+
+  const matcher = new RegExp(text, 'i');
+  return (entity: Entity.Unknown) => {
+    const typename = Entity.getTypename(entity) ?? '';
+    const metaKey = Obj.isObject(entity) ? (Obj.getMeta(entity).key ?? '') : '';
+    const uri = Type.isType(entity) ? (Type.getURI(entity)?.toString() ?? '') : '';
+    const operationKey =
+      Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)
+        ? (Operation.getKey(entity) ?? '')
+        : '';
+    const name = Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity) ? entity.name : '';
+    return [typename, metaKey, uri, operationKey, name, getEntityId(entity)].some((value) => value.match(matcher));
+  };
+};
+
+const getEntityId = (entity: Entity.Unknown): string => {
+  if (entity.id) {
+    return entity.id;
+  }
+  if (Type.isType(entity)) {
+    return Type.getURI(entity)?.toString() ?? Type.getTypename(entity) ?? 'unknown-type';
+  }
+  return Entity.getTypename(entity) ?? 'unknown';
+};
+
+const getKind = (entity: Entity.Unknown): string => {
+  if (Type.isType(entity)) {
+    return 'type';
+  }
+  if (Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)) {
+    return 'operation';
+  }
+  return 'other';
+};
+
+const getLabel = (entity: Entity.Unknown): string => {
+  if (Obj.isObject(entity) && Obj.instanceOf(Operation.PersistentOperation, entity)) {
+    return entity.name || Operation.getKey(entity) || getEntityId(entity);
+  }
+  if (Type.isType(entity)) {
+    return Type.getTypename(entity) ?? getEntityId(entity);
+  }
+  return getEntityId(entity);
+};
+
+const toDetailJson = (entity: Entity.Unknown): object => {
+  if (Type.isType(entity)) {
+    return {
+      id: getEntityId(entity),
+      typename: Type.getTypename(entity),
+      uri: Type.getURI(entity)?.toString(),
+      version: Type.getVersion(entity),
+      jsonSchema: entity.jsonSchema,
+    };
+  }
+  if (Obj.isObject(entity)) {
+    return Obj.toJSON(entity);
+  }
+  return { id: getEntityId(entity), typename: Entity.getTypename(entity) };
+};
+
+export const RegistryPanel = () => {
+  const client = useClient();
+  const [entities, setEntities] = useState<Entity.Unknown[]>([]);
+  const [filter, setFilter] = useState('');
+  const [selected, setSelected] = useState<Entity.Unknown>();
+
+  useEffect(() => {
+    const registry = client.graph.registry;
+    const refresh = () => setEntities([...registry.list()]);
+    refresh();
+    return registry.changed.on(refresh);
+  }, [client]);
+
+  const properties = useMemo(
+    () => [
+      { name: 'kind', format: Format.TypeFormat.String, size: 100 },
+      { name: 'label', format: Format.TypeFormat.String },
+      { name: 'id', format: Format.TypeFormat.String, size: 280 },
+    ],
+    [],
+  );
+
+  const rows = useMemo((): RegistryRow[] => {
+    return entities
+      .filter(textFilter(filter))
+      .map((entity) => ({
+        id: getEntityId(entity),
+        kind: getKind(entity),
+        label: getLabel(entity),
+        _entity: entity,
+      }))
+      .toSorted((left, right) => left.label.localeCompare(right.label));
+  }, [entities, filter]);
+
+  const handleRowClicked = useCallback((row: RegistryRow | undefined) => {
+    if (!row?._entity) {
+      return;
+    }
+    setSelected(row._entity);
+  }, []);
+
+  const detailJson = useMemo(() => (selected ? toDetailJson(selected) : undefined), [selected]);
+
+  const features: Partial<TableFeatures> = useMemo(() => ({ selection: { enabled: true, mode: 'single' } }), []);
+
+  return (
+    <PanelContainer
+      toolbar={
+        <Toolbar.Root>
+          <Searchbar placeholder='Filter...' onChange={setFilter} />
+        </Toolbar.Root>
+      }
+    >
+      <div className={mx('h-full grid grid-cols-[2fr_1fr] overflow-hidden')}>
+        <div className={mx('flex flex-col min-h-0 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')}>
+          {detailJson ? <JsonView data={detailJson} /> : <Placeholder label='Details' />}
+        </div>
+      </div>
+    </PanelContainer>
+  );
+};
+
+RegistryPanel.displayName = 'RegistryPanel';

package/src/containers/RegistryPanel/index.ts

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

package/src/containers/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+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'));

package/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './meta';
+export * from './types';

package/src/meta.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import config from '../dx.config';
+
+export const meta = Plugin.getMetaFromConfig(config);

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const DevtoolsPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/translations.ts

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+import { translations as introspectTranslations } from '@dxos/react-ui-introspect/translations';
+
+import { meta } from '#meta';
+
+export const translations = [
+  ...introspectTranslations,
+  {
+    'en-US': {
+      [meta.profile.key]: {
+        'plugin.name': 'Devtools',
+        'open-devtools.label': 'Open DevTools',
+        'devtools.label': 'DevTools',
+        'devtools-overview.label': 'Stats',
+        'debug-app-graph.label': 'App Graph',
+        'debug-tools-explorer.label': 'SDK Explorer',
+
+        'reset-data.label': 'Reset data (ERASES ALL DATA)',
+        'client.label': 'Client',
+        'config.label': 'Config',
+        'storage.label': 'Storage',
+        'sqlite.label': 'SQLite',
+        'logs.label': 'Logs',
+        'diagnostics.label': 'Diagnostics',
+        'tracing.label': 'Tracing',
+        'halo.label': 'HALO',
+        'identity.label': 'Identity',
+        'devices.label': 'Devices',
+        'keyring.label': 'Keyring',
+        'credentials.label': 'Credentials',
+        'echo.label': 'ECHO',
+        'spaces.label': 'Spaces',
+        'space.label': 'Space',
+        'feeds.label': 'Feeds',
+        'objects.label': 'Objects',
+        'schema.label': 'Schema',
+        'registry.label': 'Registry',
+        'automerge.label': 'Automerge',
+        'queues.label': 'Queues',
+        'members.label': 'Members',
+        'metadata.label': 'Metadata',
+        'mesh.label': 'MESH',
+        'signal.label': 'Signal',
+        'swarm.label': 'Swarm',
+        'network.label': 'Network',
+        'agent.label': 'Agent',
+        'dashboard.label': 'Dashboard',
+        'search.label': 'Search',
+        'edge.label': 'EDGE',
+        'workflows.label': 'Workflows',
+        'traces.label': 'Traces',
+        'testing.label': 'Testing',
+        // GitHub (deck-companion--github surface).
+        'github-loading.message': 'Loading…',
+        'github-unavailable.message': 'GitHub feed unavailable.',
+        'recent-prs.label_one': '{{count}} recent PR',
+        'recent-prs.label_other': '{{count}} recent PRs',
+        'view-on-github.button': 'View on GitHub',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/Devtools.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @import-as-namespace
+
+import { meta } from '#meta';
+
+/**
+ * Extracts the last dot-separated segment of a Devtools namespaced ID string.
+ * Use this as the node segment `id` when building app-graph nodes whose `data`
+ * value is one of the other constants in this namespace.
+ */
+export const nodeId = (fullId: string): string => fullId.split('.').at(-1) ?? '';
+
+const devtoolsId = `${meta.profile.key}.devtools`;
+
+export const id = devtoolsId;
+export const AppGraph = `${devtoolsId}.appGraph`;
+export const ToolsExplorer = `${devtoolsId}.toolsExplorer`;
+
+export namespace Client {
+  export const id = `${devtoolsId}.client`;
+  export const Config = `${Client.id}.config`;
+  export const Storage = `${Client.id}.storage`;
+  export const Sqlite = `${Client.id}.sqlite`;
+  export const Logs = `${Client.id}.logs`;
+  export const Diagnostics = `${Client.id}.diagnostics`;
+}
+
+export namespace Halo {
+  export const id = `${devtoolsId}.halo`;
+  export const Identity = `${Halo.id}.identity`;
+  export const Devices = `${Halo.id}.devices`;
+  export const Keyring = `${Halo.id}.keyring`;
+  export const Credentials = `${Halo.id}.credentials`;
+}
+
+export namespace Echo {
+  export const id = `${devtoolsId}.echo`;
+  export const Spaces = `${Echo.id}.spaces`;
+  export const Space = `${Echo.id}.space`;
+  export const Feeds = `${Echo.id}.feeds`;
+  export const Objects = `${Echo.id}.objects`;
+  export const Schema = `${Echo.id}.schema`;
+  export const Registry = `${Echo.id}.registry`;
+  export const Automerge = `${Echo.id}.automerge`;
+  export const Queues = `${Echo.id}.queues`;
+  export const Members = `${Echo.id}.members`;
+  export const Metadata = `${Echo.id}.metadata`;
+}
+
+export namespace Mesh {
+  export const id = `${devtoolsId}.mesh`;
+  export const Signal = `${Mesh.id}.signal`;
+  export const Swarm = `${Mesh.id}.swarm`;
+  export const Network = `${Mesh.id}.network`;
+}
+
+export namespace Agent {
+  export const id = `${devtoolsId}.agent`;
+  export const Dashboard = `${Agent.id}.dashboard`;
+  export const Search = `${Agent.id}.search`;
+}
+
+export namespace Edge {
+  export const id = `${devtoolsId}.edge`;
+  export const Dashboard = `${Edge.id}.dashboard`;
+  export const Workflows = `${Edge.id}.workflows`;
+  export const Traces = `${Edge.id}.traces`;
+  export const Testing = `${Edge.id}.testing`;
+}

package/src/types/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * as Devtools from './Devtools';

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*.mdl?raw' {
+  const content: string;
+  export default content;
+}