@dxos/plugin-debug 0.6.13 → 0.6.14-main.1366248

package/src/components/DebugPanel.tsx

@@ -3,29 +3,24 @@
 //
 
 import { formatDistance } from 'date-fns';
-import React, { type FC, type PropsWithChildren, type ReactNode } from 'react';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
 
 import { useConfig } from '@dxos/react-client';
-import { DensityProvider } from '@dxos/react-ui';
 
-export const DebugPanel: FC<PropsWithChildren<{ menu: ReactNode }>> = ({ menu, children }) => {
+export const DebugPanel = ({ menu, children }: PropsWithChildren<{ menu: ReactNode }>) => {
   const config = useConfig();
   return (
     <>
-      <div className='flex shrink-0 p-2 space-x-2'>
-        <DensityProvider density='fine'>{menu}</DensityProvider>
-      </div>
+      <div className='flex shrink-0 p-2 space-x-2'>{menu}</div>
       <div className='flex flex-col grow px-2 overflow-hidden'>
         <div className='flex flex-col grow overflow-auto'>{children}</div>
-
         {config.values?.runtime?.app?.build?.timestamp && (
           <div className='p-2 text-sm font-mono'>
-            {config.values?.runtime?.app?.build?.version} (
+            {config.values?.runtime?.app?.build?.version}
             {formatDistance(new Date(config.values?.runtime?.app?.build?.timestamp), new Date(), {
               addSuffix: true,
               includeSeconds: true,
             })}
-            )
           </div>
         )}
       </div>

package/src/components/DebugSettings.tsx

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { parseFileManagerPlugin, useResolvePlugin } from '@dxos/app-framework';
 import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
 import { log } from '@dxos/log';
-import { SettingsValue } from '@dxos/plugin-settings';
 import { useClient } from '@dxos/react-client';
 import { useTranslation, Button, Toast, Input, useFileDownload, Select } from '@dxos/react-ui';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { setDeep } from '@dxos/util';
 
@@ -80,25 +80,25 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   return (
     <>
-      <SettingsValue label={t('settings show debug panel')}>
+      <DeprecatedFormInput label={t('settings show debug panel')}>
         <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings show devtools panel')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings show devtools panel')}>
         <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings wireframe')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings wireframe')}>
         <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings download diagnostics')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings download diagnostics')}>
         <Button onClick={handleDownload}>
           <DownloadSimple className={getSize(5)} />
         </Button>
-      </SettingsValue>
-      <SettingsValue label={t('settings repair')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings repair')}>
         <Button onClick={handleRepair}>
           <FirstAidKit className={getSize(5)} />
         </Button>
-      </SettingsValue>
+      </DeprecatedFormInput>
 
       {/* TODO(burdon): Move to layout? */}
       {toast && (
@@ -113,7 +113,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
         </Toast.Root>
       )}
 
-      <SettingsValue label={t('settings choose storage adaptor')}>
+      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
         <Select.Root
           value={
             Object.entries(StorageAdapters).find(
@@ -144,7 +144,7 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/DebugSpace.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
@@ -28,8 +29,10 @@ const Story = () => {
   return <DebugSpace space={space} />;
 };
 
-export default {
-  title: 'plugin-debug/DebugSpace',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/DebugSpace',
   component: DebugSpace,
   render: () => <ClientRepeater component={Story} createSpace />,
   parameters: {
@@ -37,4 +40,4 @@ export default {
   },
 };
 
-export const Default = {};
+export default meta;

package/src/components/DebugStatus.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ChartBar, Circle, Lightning, LightningSlash } from '@phosphor-icons/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { firstIdInPart, parseGraphPlugin, parseNavigationPlugin, useResolvePlugin } from '@dxos/app-framework';
@@ -13,7 +12,8 @@ import { getActiveSpace } from '@dxos/plugin-space';
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -97,13 +97,13 @@ const ErrorIndicator = () => {
   if (errorRef.current) {
     return (
       <StatusBar.Button title={errorRef.current.message} onClick={handleReset}>
-        <Circle weight='fill' className={mx(styles.error, getSize(3))} />
+        <Icon icon='ph--warning-circle--duotone' size={4} classNames={styles.error} />
       </StatusBar.Button>
     );
   } else {
     return (
       <StatusBar.Item title='No errors.'>
-        <Circle weight='fill' className={getSize(3)} />
+        <Icon icon='ph--check--regular' size={4} />
       </StatusBar.Item>
     );
   }
@@ -122,21 +122,22 @@ const SwarmIndicator = () => {
   if (state === 0) {
     return (
       <StatusBar.Item title='Connected to swarm.'>
-        <Lightning className={getSize(4)} />
+        <Icon icon='ph--lightning--regular' size={4} />
       </StatusBar.Item>
     );
   } else {
     return (
       <StatusBar.Item title='Disconnected from swarm.'>
-        <LightningSlash className={mx(styles.warning, getSize(4))} />
+        <Icon icon='ph--lightning-slash--regular' size={4} classNames={styles.warning} />
       </StatusBar.Item>
     );
   }
 };
 
 /**
- * Space saving indicator.
+ * Data saving indicator.
  */
+// TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
@@ -167,20 +168,20 @@ const SavingIndicator = () => {
     case 2:
       return (
         <StatusBar.Item title='Edit not saved.'>
-          <Circle weight='fill' className={mx(styles.warning, getSize(3))} />
+          <Icon icon='ph--circle--duotone' size={4} classNames={styles.warning} />
         </StatusBar.Item>
       );
     case 1:
       return (
         <StatusBar.Item title='Saving...'>
-          <Circle weight='fill' className={mx(styles.success, getSize(3))} />
+          <Icon icon='ph--circle--duotone' size={4} classNames={styles.success} />
         </StatusBar.Item>
       );
     case 0:
     default:
       return (
         <StatusBar.Item title='Modified indicator.'>
-          <Circle weight='fill' className={getSize(3)} />
+          <Icon icon='ph--circle--duotone' size={4} />
         </StatusBar.Item>
       );
   }
@@ -193,10 +194,16 @@ const PerformanceIndicator = () => {
   return (
     <>
       <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-        <ChartBar />
+        <Icon icon='ph--chart-bar--regular' size={4} />
       </StatusBar.Button>
       {visible && (
-        <div className='z-20 absolute bottom-[24px] w-[450px] border-l border-y border-separator'>
+        <div
+          className={mx(
+            'z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]',
+            'overflow-x-hidden overflow-y-auto scrollbar-thin',
+            'border-x border-y border-separator',
+          )}
+        >
           <StatsPanel stats={stats} onRefresh={refreshStats} />
         </div>
       )}
@@ -204,7 +211,7 @@ const PerformanceIndicator = () => {
   );
 };
 
-const indicators = [PerformanceIndicator, SavingIndicator, ErrorIndicator, SwarmIndicator];
+const indicators = [SavingIndicator, SwarmIndicator, PerformanceIndicator, ErrorIndicator];
 
 export const DebugStatus = () => {
   return (

package/src/components/ObjectCreator.stories.tsx

@@ -4,15 +4,16 @@
 
 import '@dxos-theme';
 
-import React, { type FC, useEffect } from 'react';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
 import { type ReactiveObject, useSpaces } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 
-import { ObjectCreator } from './ObjectCreator';
+import { ObjectCreator, type ObjectCreatorProps } from './ObjectCreator';
 
-const Story: FC = () => {
+const Story = () => {
   const [space] = useSpaces();
   useEffect(() => {
     if (space) {
@@ -21,19 +22,21 @@ const Story: FC = () => {
     }
   }, [space]);
 
-  const handleCreate = (objects: ReactiveObject<any>[]) => {
-    console.log('Created:', objects);
-  };
-
   if (!space) {
     return null;
   }
 
+  const handleCreate: ObjectCreatorProps['onAddObjects'] = (objects: ReactiveObject<any>[]) => {
+    console.log('Created:', objects);
+  };
+
   return <ObjectCreator space={space} onAddObjects={handleCreate} />;
 };
 
-export default {
-  title: 'plugin-debug/SchemaList',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/SchemaList',
   component: ObjectCreator,
   render: () => <ClientRepeater component={Story} createSpace />,
   parameters: {
@@ -41,4 +44,4 @@ export default {
   },
 };
 
-export const Default = {};
+export default meta;

package/src/components/ObjectCreator.tsx

@@ -2,11 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { type EchoReactiveObject, type ReactiveObject } from '@dxos/echo-schema';
-import { type Space } from '@dxos/react-client/echo';
-import { Button, DensityProvider } from '@dxos/react-ui';
+import { type EchoReactiveObject, type ReactiveObject, type Space } from '@dxos/react-client/echo';
+import { Button } from '@dxos/react-ui';
 import { createColumnBuilder, type TableColumnDef, Table } from '@dxos/react-ui-table';
 
 import { SchemasNames, createSpaceObjectGenerator } from '../scaffolding';
@@ -22,10 +21,12 @@ export type CreateObjectsParams = {
 
 const CREATE_OBJECTS_IN_ONE_CHUNK = 10;
 
-export const ObjectCreator: FC<{
+export type ObjectCreatorProps = {
   space: Space;
   onAddObjects?: (objects: ReactiveObject<any>[]) => void;
-}> = ({ space, onAddObjects }) => {
+};
+
+export const ObjectCreator = ({ space, onAddObjects }: ObjectCreatorProps) => {
   const generator = useMemo(() => createSpaceObjectGenerator(space), [space]);
 
   const [objectsToCreate, setObjectsToCreate] = useState<CreateObjectsParams[]>([
@@ -45,14 +46,6 @@ export const ObjectCreator: FC<{
       mutationSize: 10,
       maxContentLength: 1000,
     },
-    {
-      enabled: true,
-      schema: SchemasNames.sheet,
-      objectsCount: 10,
-      mutationsCount: 10,
-      mutationSize: 10,
-      maxContentLength: 1000,
-    },
   ]);
 
   const handleCreate = async () => {
@@ -95,13 +88,11 @@ export const ObjectCreator: FC<{
 
   return (
     <>
-      <DensityProvider density={'fine'}>
-        <Table.Root>
-          <Table.Viewport>
-            <Table.Main<CreateObjectsParams> columns={columns} data={objectsToCreate} />
-          </Table.Viewport>
-        </Table.Root>
-      </DensityProvider>
+      <Table.Root>
+        <Table.Viewport>
+          <Table.Main<CreateObjectsParams> columns={columns} data={objectsToCreate} />
+        </Table.Viewport>
+      </Table.Root>
       <Button onClick={handleCreate}>Create</Button>
     </>
   );

package/src/components/SurfaceDebug.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { type DebugInfo, useSurfaceRoot } from '@dxos/app-framework';
+import { Button, Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Move to debug panel.
+
+export type SurfaceDebugProps = ThemedClassName<{}>;
+
+/**
+ * Show surface info.
+ * NOTE: Remove from @dxos/app-framework if removing this.
+ */
+export const SurfaceDebug = ({ classNames }: SurfaceDebugProps) => {
+  const context = useSurfaceRoot();
+  const [surfaces, setSurfaces] = useState<DebugInfo[]>([]);
+  const renderMap = useMemo(() => new Map<string, { last: number; delta: number }>(), []);
+  const handleRefresh = () => {
+    if (context.debugInfo) {
+      setSurfaces(
+        Array.from(context.debugInfo.values())
+          .sort(({ created: a }, { created: b }) => a - b)
+          .map((surface) => {
+            const state = renderMap.get(surface.id) ?? { last: 0, delta: 0 };
+            renderMap.set(surface.id, { last: surface.renderCount, delta: surface.renderCount - state.last });
+            return surface;
+          }),
+      );
+    }
+  };
+
+  return (
+    <div className={mx('flex flex-col border border-separator overflow-hidden bg-modalSurface', classNames)}>
+      <div className='flex flex-col h-full w-full p-2'>
+        {surfaces.map(({ id, name, renderCount }) => (
+          <div key={id} className='grid grid-cols-[1fr_3rem_3rem] items-center text-xs font-mono whitespace-nowrap'>
+            <span className='px-1 truncate'>{name}</span>
+            <span className='px-1 text-right'>{renderCount}</span>
+            <span className='px-1 text-right'>{renderMap.get(id)?.delta}</span>
+          </div>
+        ))}
+      </div>
+      <div className='flex justify-center text-sm items-center'>
+        <Button onClick={handleRefresh}>
+          <Icon icon='ph--arrow-clockwise--regular' size={4} />
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/Wireframe.tsx

@@ -5,27 +5,36 @@
 import React from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
+// TODO(burdon): Create generic container with wireframe mode.
+export type WireframeProps = ThemedClassName<{
+  label?: string;
+  object?: any;
+}>;
+
 // TODO(burdon): Make focusable and attendable with input.
-export const Wireframe = ({ label, data, className }: { label?: string; data?: any; className?: string }) => {
-  const attendableAttrs = createAttendableAttributes(data);
+export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
+  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(object));
   const { width, height, ref } = useResizeDetector();
   return (
-    <div ref={ref} className={mx('relative grow min-bs-96', className)} {...attendableAttrs}>
-      <div className='absolute inset-2 flex flex-col overflow-hidden font-mono'>
+    <div ref={ref} className={mx('relative grow min-bs-96', classNames)} {...attendableAttrs}>
+      <div className='absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono'>
         <div className='flex justify-between'>
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
         </div>
-        <div className='flex grow overflow-auto'>
-          {data && (
-            <pre className='text-neutral-500 text-sm whitespace-pre-line'>{JSON.stringify(data, undefined, 1)}</pre>
-          )}
-        </div>
+        {object && (
+          <SyntaxHighlighter language='json' classNames='flex w-full text-xs opacity-75 rounded'>
+            {JSON.stringify(object, undefined, 2)}
+          </SyntaxHighlighter>
+        )}
       </div>
-      <svg width={width} height={height} className='bg-transparent [&>*]:stroke-neutral-500'>
+      <svg width={width} height={height} className='bg-transparent [&>*]:text-subdued'>
         <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />
         <line x1={0} y1={0} x2={width} y2={height} strokeWidth={1} />
         <line x1={0} y1={height} x2={width} y2={0} strokeWidth={1} />

package/src/components/index.ts

@@ -2,13 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
-// Lazily load components for content surfaces.
-export const DebugGlobal = React.lazy(() => import('./DebugGlobal'));
-export const DebugSpace = React.lazy(() => import('./DebugSpace'));
-export const DevtoolsMain = React.lazy(() => import('./DevtoolsMain'));
+export const DebugGlobal = lazy(() => import('./DebugGlobal'));
+export const DebugSpace = lazy(() => import('./DebugSpace'));
 
+export * from './DebugObjectPanel';
 export * from './DebugSettings';
 export * from './DebugStatus';
 export * from './Wireframe';

package/src/meta.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const DEBUG_PLUGIN = 'dxos.org/plugin/debug';
+
+export default {
+  id: DEBUG_PLUGIN,
+  name: 'Debug',
+  description: 'DXOS debugging tools.',
+  icon: 'ph--bug--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
+  tags: ['experimental'],
+} satisfies PluginMeta;

package/src/scaffolding/generator.ts

@@ -22,24 +22,22 @@ import {
 import { create } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
-import { createTestSheet } from '@dxos/plugin-sheet/testing';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { TLDrawStoreAdapter } from '@dxos/plugin-sketch';
+import { TLDrawStoreAdapter } from '@dxos/plugin-sketch/sdk';
 import { CanvasType, DiagramType, TLDRAW_SCHEMA } from '@dxos/plugin-sketch/types';
 import { faker } from '@dxos/random';
 import { createDocAccessor, type Space } from '@dxos/react-client/echo';
 
-// TODO(wittjosiah): Remove? Just use typenames.
+// TODO(burdon): Move to echo-generator.
+
+// TODO(wittjosiah): Remove? Just use DXNs.
 export enum SchemasNames {
   document = 'dxos.org/type/Document',
   diagram = 'dxos.org/type/Diagram',
-  sheet = 'dxos.org/type/SheetType',
 }
 
 export const SchemasMap: TestSchemaMap<SchemasNames> = {
   [SchemasNames.document]: DocumentType,
   [SchemasNames.diagram]: DiagramType,
-  [SchemasNames.sheet]: SheetType,
 };
 
 export const ObjectGenerators: TestGeneratorMap<SchemasNames> = {
@@ -55,11 +53,6 @@ export const ObjectGenerators: TestGeneratorMap<SchemasNames> = {
       canvas: create(CanvasType, { schema: TLDRAW_SCHEMA, content: {} }),
     };
   },
-
-  [SchemasNames.sheet]: () => {
-    const name = faker.lorem.sentence({ min: 2, max: 3 });
-    return createTestSheet({ name });
-  },
 };
 
 export const MutationsGenerators: TestMutationsMap<SchemasNames> = {
@@ -147,10 +140,6 @@ export const MutationsGenerators: TestMutationsMap<SchemasNames> = {
       }
     }
   },
-
-  [SchemasNames.sheet]: async (object, params) => {
-    // TODO: Implement.
-  },
 };
 
 export const createSpaceObjectGenerator = (space: Space) =>

package/src/translations.ts

@@ -30,6 +30,7 @@ export default [
         'settings storage adapter changed alert':
           'Warning: Swapping the storage adapter will make your data unavailable.',
         'settings space fragmentation': 'Enable AM space fragmentation',
+        'open debug panel label': 'Show Debug',
       },
     },
   },

package/src/types.ts

@@ -12,6 +12,8 @@ import type {
   TranslationsProvides,
 } from '@dxos/app-framework';
 import type { TimerCallback, TimerOptions } from '@dxos/async';
+import { S } from '@dxos/echo-schema';
+import { type PanelProvides } from '@dxos/plugin-deck/types';
 
 import { DEBUG_PLUGIN } from './meta';
 
@@ -32,14 +34,19 @@ export const DebugContext: Context<DebugContextType> = createContext<DebugContex
   stop: () => {},
 });
 
-export type DebugSettingsProps = {
-  devtools?: boolean;
-  debug?: boolean;
-  wireframe?: boolean;
-};
+export const DebugSettingsSchema = S.mutable(
+  S.Struct({
+    devtools: S.optional(S.Boolean),
+    debug: S.optional(S.Boolean),
+    wireframe: S.optional(S.Boolean),
+  }),
+);
+
+export interface DebugSettingsProps extends S.Schema.Type<typeof DebugSettingsSchema> {}
 
 export type DebugPluginProvides = SurfaceProvides &
   IntentResolverProvides &
   GraphBuilderProvides &
   SettingsProvides<DebugSettingsProps> &
-  TranslationsProvides;
+  TranslationsProvides &
+  PanelProvides;