@dxos/plugin-debug 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/src/capabilities/react-surface/react-surface.tsx

@@ -1,409 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React, { useCallback } from 'react';
-
-import { Capability, Common } from '@dxos/app-framework';
-import { useCapability, useLayout, useOperationInvoker, useSettingsState } from '@dxos/app-framework/react';
-import {
-  AutomergePanel,
-  ConfigPanel,
-  CredentialsPanel,
-  DeviceListPanel,
-  DiagnosticsPanel,
-  EdgeDashboardPanel,
-  FeedsPanel,
-  IdentityPanel,
-  InvocationTraceContainer,
-  KeyringPanel,
-  LoggingPanel,
-  MembersPanel,
-  MetadataPanel,
-  NetworkPanel,
-  ObjectsPanel,
-  QueuesPanel,
-  SchemaPanel,
-  SignalPanel,
-  SpaceInfoPanel,
-  SpaceListPanel,
-  StoragePanel,
-  SwarmPanel,
-  TestingPanel,
-  TracingPanel,
-  WorkflowPanel,
-} from '@dxos/devtools';
-import { Obj } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { type Graph } from '@dxos/plugin-graph';
-import { ScriptOperation } from '@dxos/plugin-script/types';
-import { SpaceOperation } from '@dxos/plugin-space/types';
-import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
-import { Layout } from '@dxos/react-ui-mosaic';
-import { Collection } from '@dxos/schema';
-
-import {
-  DebugGraph,
-  DebugObjectPanel,
-  DebugSettings,
-  DebugStatus,
-  DevtoolsOverviewContainer,
-  SpaceGenerator,
-  Wireframe,
-} from '../../components';
-import { meta } from '../../meta';
-import { DebugCapabilities, type DebugSettingsProps, Devtools } from '../../types';
-
-type SpaceDebug = {
-  type: string;
-  space: Space;
-};
-
-type GraphDebug = {
-  graph: Graph.Graph;
-  root: string;
-};
-
-const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}/space` && isSpace(data.space);
-const isGraphDebug = (data: any): data is GraphDebug => {
-  const graph = data?.graph;
-  return (
-    graph != null && typeof graph === 'object' && typeof graph.json === 'function' && typeof data?.root === 'string'
-  );
-};
-
-// TODO(wittjosiah): Factor out?
-const useCurrentSpace = () => {
-  const layout = useLayout();
-  const client = useCapability(ClientCapabilities.Client);
-  const { spaceId } = parseId(layout.workspace);
-  const space = spaceId ? client.spaces.get(spaceId) : undefined;
-  return space;
-};
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const capabilities = yield* Capability.Service;
-    const registry = capabilities.get(Common.Capability.AtomRegistry);
-    const settingsAtom = capabilities.get(DebugCapabilities.Settings);
-
-    return Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
-        id: `${meta.id}/plugin-settings`,
-        role: 'article',
-        filter: (data): data is { subject: Common.Capability.Settings } =>
-          Common.Capability.isSettings(data.subject) && data.subject.prefix === meta.id,
-        component: ({ data: { subject } }) => {
-          const { settings, updateSettings } = useSettingsState<DebugSettingsProps>(subject.atom);
-          return <DebugSettings settings={settings} onSettingsChange={updateSettings} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/space`,
-        role: 'article',
-        filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
-        component: ({ role, data }) => {
-          const { invokePromise } = useOperationInvoker();
-
-          const handleCreateObject = useCallback(
-            (objects: Obj.Unknown[]) => {
-              if (!isSpace(data.subject.space)) {
-                return;
-              }
-
-              const collection =
-                data.subject.space.state.get() === SpaceState.SPACE_READY &&
-                data.subject.space.properties[Collection.Collection.typename]?.target;
-              if (!Obj.instanceOf(Collection.Collection, collection)) {
-                return;
-              }
-
-              objects.forEach((object) => {
-                void invokePromise(SpaceOperation.AddObject, {
-                  target: collection,
-                  object,
-                });
-              });
-            },
-            [data.subject.space, invokePromise],
-          );
-
-          return (
-            <Layout.Main role={role}>
-              <SpaceGenerator space={data.subject.space} onCreateObjects={handleCreateObject} />
-            </Layout.Main>
-          );
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/app-graph`,
-        role: 'article',
-        filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
-        component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/wireframe`,
-        role: ['article', 'section'],
-        position: 'hoist',
-        filter: (data): data is { subject: Obj.Unknown } => {
-          const settings = registry.get(settingsAtom);
-          return Obj.isObject(data.subject) && !!settings.wireframe;
-        },
-        component: ({ data, role }) => (
-          <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
-        ),
-      }),
-      Common.createSurface({
-        id: `${meta.id}/object-debug`,
-        role: 'article',
-        filter: (data): data is { companionTo: Obj.Unknown } =>
-          data.subject === 'debug' && Obj.isObject(data.companionTo),
-        component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/devtools-overview`,
-        role: 'deck-companion--devtools',
-        component: () => <DevtoolsOverviewContainer />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/status`,
-        role: 'status',
-        component: () => <DebugStatus />,
-      }),
-
-      //
-      // Devtools
-      //
-
-      Common.createSurface({
-        id: `${meta.id}/client/config`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Config,
-        component: () => <ConfigPanel vaultSelector={false} />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/client/storage`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Storage,
-        component: () => <StoragePanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/client/logs`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Logs,
-        component: () => <LoggingPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/client/diagnostics`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
-        component: () => <DiagnosticsPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/client/tracing`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Client.Tracing,
-        component: () => <TracingPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/halo/identity`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Identity,
-        component: () => <IdentityPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/halo/devices`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Devices,
-        component: () => <DeviceListPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/halo/keyring`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
-        component: () => <KeyringPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/halo/credentials`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
-        component: () => {
-          const space = useCurrentSpace();
-          return <CredentialsPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/spaces`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
-        component: () => {
-          const { invokePromise } = useOperationInvoker();
-          const handleSelect = useCallback(
-            () => invokePromise(Common.LayoutOperation.Open, { subject: [Devtools.Echo.Space] }),
-            [invokePromise],
-          );
-          return <SpaceListPanel onSelect={handleSelect} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/space`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Space,
-        component: () => {
-          const space = useCurrentSpace();
-          const { invokePromise } = useOperationInvoker();
-          const handleSelect = useCallback(
-            () => invokePromise(Common.LayoutOperation.Open, { subject: [Devtools.Echo.Feeds] }),
-            [invokePromise],
-          );
-          return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/feeds`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
-        component: () => {
-          const space = useCurrentSpace();
-          return <FeedsPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/objects`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Objects,
-        component: () => {
-          const space = useCurrentSpace();
-          return <ObjectsPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/schema`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Schema,
-        component: () => {
-          const space = useCurrentSpace();
-          return <SchemaPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/automerge`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
-        component: () => {
-          const space = useCurrentSpace();
-          return <AutomergePanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/queues`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Queues,
-        component: () => <QueuesPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/members`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Members,
-        component: () => {
-          const space = useCurrentSpace();
-          return <MembersPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/echo/metadata`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
-        component: () => <MetadataPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/mesh/signal`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
-        component: () => <SignalPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/mesh/swarm`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
-        component: () => <SwarmPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/mesh/network`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Mesh.Network,
-        component: () => {
-          const space = useCurrentSpace();
-          return <NetworkPanel space={space} />;
-        },
-      }),
-      // TODO(wittjosiah): Remove?
-      // createSurface({
-      //   id: `${meta.id}/agent/dashboard`,
-      //   role: 'article',
-      //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
-      //   component: () => <DashboardPanel />,
-      // }),
-      Common.createSurface({
-        id: `${meta.id}/edge/dashboard`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
-        component: () => <EdgeDashboardPanel />,
-      }),
-      Common.createSurface({
-        id: `${meta.id}/edge/workflows`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
-        component: () => {
-          const space = useCurrentSpace();
-          return <WorkflowPanel space={space} />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/edge/traces`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Traces,
-        component: () => {
-          const space = useCurrentSpace();
-          const queueDxn = space?.properties.invocationTraceQueue?.dxn;
-          return <InvocationTraceContainer db={space?.db} queueDxn={queueDxn} detailAxis='block' />;
-        },
-      }),
-      Common.createSurface({
-        id: `${meta.id}/edge/testing`,
-        role: 'article',
-        filter: (data): data is any => data.subject === Devtools.Edge.Testing,
-        component: () => {
-          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?.id) {
-                await invokePromise(Common.LayoutOperation.Open, {
-                  subject: [`${space.id}:${createResult.data.object.id}`],
-                });
-              }
-            },
-            [invokePromise],
-          );
-          return <TestingPanel onSpaceCreate={onSpaceCreate} onScriptPluginOpen={onScriptPluginOpen} />;
-        },
-      }),
-    ]);
-  }),
-);

package/src/capabilities/settings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const DebugSettings = Capability.lazy('DebugSettings', () => import('./settings'));

package/src/components/Container.tsx

@@ -1,15 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type PropsWithChildren, type ReactNode } from 'react';
-
-// TODO(burdon): Convert to grid.
-export const Container = ({ toolbar, children }: PropsWithChildren<{ toolbar: ReactNode }>) => {
-  return (
-    <div role='none' className='flex flex-col grow overflow-hidden divide-y divide-separator'>
-      {toolbar}
-      <div className='flex flex-col grow overflow-auto'>{children}</div>
-    </div>
-  );
-};

package/src/components/DebugObjectPanel.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { type Obj } from '@dxos/echo';
-import { Clipboard, Input, Toolbar } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui-mosaic';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-
-export type DebugObjectPanelProps = {
-  object: Obj.Unknown;
-};
-
-// TODO(burdon): Get schema and traverse references.
-export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
-  const dxn = `dxn:echo:@:${object.id}`;
-
-  return (
-    <Clipboard.Provider>
-      <Layout.Main toolbar>
-        <Toolbar.Root>
-          <Input.Root>
-            <Input.TextInput disabled value={dxn} />
-            <Clipboard.IconButton value={dxn} />
-          </Input.Root>
-        </Toolbar.Root>
-        <Json data={object} />
-      </Layout.Main>
-    </Clipboard.Provider>
-  );
-};

package/src/components/DebugSettings.tsx

@@ -1,185 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { useCapabilities } from '@dxos/app-framework/react';
-import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { setDeep } from '@dxos/util';
-
-import { meta } from '../meta';
-import { type DebugSettingsProps } from '../types';
-
-type Toast = {
-  title: string;
-  description?: string;
-};
-
-const StorageAdapters = {
-  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
-  idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
-} as const;
-
-export type DebugSettingsComponentProps = {
-  settings: DebugSettingsProps;
-  onSettingsChange: (fn: (current: DebugSettingsProps) => DebugSettingsProps) => void;
-};
-
-export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsComponentProps) => {
-  const { t } = useTranslation(meta.id);
-  const [toast, setToast] = useState<Toast>();
-  const client = useClient();
-  const download = useFileDownload();
-  // TODO(mykola): Get updates from other places that change Config.
-  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const [upload] = useCapabilities(Common.Capability.FileUploader);
-
-  useEffect(() => {
-    void Storage().then((config) => setStorageConfig(config));
-  }, []);
-
-  const handleToast = (toast: Toast) => {
-    setToast(toast);
-    const t = setTimeout(() => setToast(undefined), 5_000);
-    return () => clearTimeout(t);
-  };
-
-  const handleDownload = async () => {
-    const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], {
-      type: 'text/plain',
-    });
-    const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
-    download(file, fileName);
-
-    if (upload) {
-      const info = await upload(client.spaces.default.db, new File([file], fileName));
-      if (!info) {
-        log.error('diagnostics failed to upload to IPFS');
-        return;
-      }
-      handleToast({
-        title: t('settings uploaded'),
-        description: t('settings uploaded to clipboard'),
-      });
-
-      // TODO(nf): move to IpfsPlugin?
-      const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
-      void navigator.clipboard.writeText(url);
-      handleToast({
-        title: t('settings uploaded'),
-        description: t('settings uploaded to clipboard'),
-      });
-      log.info('diagnostics', { url });
-    }
-  };
-
-  const handleRepair = async () => {
-    try {
-      const info = await client.repair();
-      setStorageConfig(await Storage());
-      handleToast({
-        title: t('settings repair success'),
-        description: JSON.stringify(info, undefined, 2),
-      });
-    } catch (err: any) {
-      handleToast({
-        title: t('settings repair failed'),
-        description: err.message,
-      });
-    }
-  };
-
-  return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings wireframe')}>
-            <Input.Switch
-              checked={settings.wireframe}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, wireframe: !!checked }))}
-            />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings download diagnostics')}>
-            <IconButton
-              icon='ph--download-simple--regular'
-              iconOnly
-              label={t('settings download diagnostics')}
-              onClick={handleDownload}
-            />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings repair')}>
-            <IconButton
-              icon='ph--first-aid-kit--regular'
-              iconOnly
-              label={t('settings repair')}
-              onClick={handleRepair}
-            />
-          </ControlItemInput>
-
-          {/* TODO(burdon): Move to layout? */}
-          {toast && (
-            <Toast.Root>
-              <Toast.Body>
-                <Toast.Title>
-                  <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
-                  <span>{toast.title}</span>
-                </Toast.Title>
-                {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-              </Toast.Body>
-            </Toast.Root>
-          )}
-
-          <ControlItemInput title={t('settings choose storage adaptor')}>
-            <Select.Root
-              value={
-                Object.entries(StorageAdapters).find(
-                  ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-                )?.[0]
-              }
-              onValueChange={(value) => {
-                if (confirm(t('settings storage adapter changed alert'))) {
-                  updateConfig(
-                    storageConfig,
-                    setStorageConfig,
-                    ['runtime', 'client', 'storage', 'dataStore'],
-                    StorageAdapters[value as keyof typeof StorageAdapters],
-                  );
-                }
-              }}
-            >
-              <Select.TriggerButton placeholder={t('settings data store label')} />
-              <Select.Portal>
-                <Select.Content>
-                  <Select.Viewport>
-                    {Object.keys(StorageAdapters).map((key) => (
-                      <Select.Option key={key} value={key}>
-                        {t(`settings storage adaptor ${key} label`)}
-                      </Select.Option>
-                    ))}
-                  </Select.Viewport>
-                  <Select.Arrow />
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
-  );
-};
-
-const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) => void, path: string[], value: any) => {
-  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
-  setDeep(storageConfigCopy, path, value);
-  setConfig(storageConfigCopy);
-  queueMicrotask(async () => {
-    await SaveConfig(storageConfigCopy);
-  });
-};

package/src/components/DevtoolsOverviewContainer.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Surface } from '@dxos/app-framework/react';
-import { StatsPanel, useStats } from '@dxos/devtools';
-
-export const DevtoolsOverviewContainer = () => {
-  const [stats, refreshStats] = useStats();
-
-  return (
-    <StatsPanel stats={stats} onRefresh={refreshStats}>
-      <Surface role='devtools-overview' />
-    </StatsPanel>
-  );
-};
-
-export default DevtoolsOverviewContainer;