@dxos/plugin-debug 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -2,44 +2,73 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
-import { Filter, Obj, Query } from '@dxos/echo';
+import { Filter, Json, Obj, Query } from '@dxos/echo';
 import type { ObjectId } from '@dxos/keys';
 import { useQuery } from '@dxos/react-client/echo';
-import { Clipboard, Grid, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Clipboard, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
 
-export type DebugObjectPanelProps = {
-  object: Obj.Unknown;
-};
+export type DebugObjectPanelProps = Pick<
+  AppSurface.ObjectArticleProps<Obj.Unknown, {}, Obj.Unknown>,
+  'role' | 'companionTo'
+>;
 
-export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
-  const db = Obj.getDatabase(object);
+export const DebugObjectPanel = ({ role, companionTo }: DebugObjectPanelProps) => {
+  const db = Obj.getDatabase(companionTo);
   const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
+  const [depth, setDepth] = useState(0);
   const [selectedObject] = useQuery(
     db,
-    Query.select(Filter.id(selectedId ?? object.id)).options({ deleted: 'include' }),
+    Query.select(Filter.id(selectedId ?? companionTo.id)).options({ deleted: 'include' }),
   );
+  const refReplacer = useMemo(() => (db ? Json.createRefReplacer({ db, depth }) : undefined), [db, depth]);
 
   return (
     <Clipboard.Provider>
-      <Panel.Root>
+      <Panel.Root role={role}>
         <Panel.Toolbar asChild>
           <Toolbar.Root />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <Grid rows={db ? 2 : 1} classNames='divide-y divide-separator'>
+          <div className={mx('grid divide-y divide-separator', db && 'grid-rows-[1fr_2fr]')}>
             {db && (
               <ScrollArea.Root>
                 <ScrollArea.Viewport>
-                  <ObjectsTree db={db} root={object} onSelect={(entity) => setSelectedId(entity.id)} />
+                  <ObjectsTree db={db} root={companionTo} onSelect={(entity) => setSelectedId(entity.id)} />
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             )}
-            <Json data={selectedObject} />
-          </Grid>
+            <Syntax.Root data={selectedObject} replacer={refReplacer}>
+              <Panel.Root>
+                <Panel.Toolbar asChild>
+                  <Toolbar.Root classNames='grid grid-cols-[1fr_3rem]'>
+                    <Syntax.Filter />
+                    <Input.Root>
+                      <Input.TextInput
+                        variant='subdued'
+                        type='number'
+                        min={0}
+                        step={1}
+                        aria-label='Ref depth'
+                        value={depth}
+                        onChange={(event) => setDepth(Math.max(0, Number(event.target.value) || 0))}
+                      />
+                    </Input.Root>
+                  </Toolbar.Root>
+                </Panel.Toolbar>
+                <Panel.Content asChild>
+                  <Syntax.Viewport>
+                    <Syntax.Code />
+                  </Syntax.Viewport>
+                </Panel.Content>
+              </Panel.Root>
+            </Syntax.Root>
+          </div>
         </Panel.Content>
       </Panel.Root>
     </Clipboard.Provider>

package/src/containers/DebugObjectPanel/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { DebugObjectPanel } from './DebugObjectPanel';
-
-export default DebugObjectPanel;
+export { DebugObjectPanel as default } from './DebugObjectPanel';

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -4,28 +4,20 @@
 
 import React, { useState } from 'react';
 
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
-import { type Database, Filter, Query } from '@dxos/echo';
-import type { ObjectId } from '@dxos/keys';
-import { useActiveSpace } from '@dxos/plugin-space';
+import { Filter, Query } from '@dxos/echo';
+import { type ObjectId } from '@dxos/keys';
 import { useQuery } from '@dxos/react-client/echo';
 import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
-export const DebugSpaceObjectsPanel = () => {
-  const space = useActiveSpace();
-  if (!space) {
-    return null;
-  }
+export type DebugSpaceObjectsPanelProps = AppSurface.SpaceArticleProps;
 
-  return <DebugSpaceObjectsPanelMain database={space.db} />;
-};
-
-const DebugSpaceObjectsPanelMain = ({ database }: { database: Database.Database }) => {
+export const DebugSpaceObjectsPanel = ({ space }: DebugSpaceObjectsPanelProps) => {
   const [selectedId, setSelectedId] = useState<ObjectId | null>(null);
-
   const [selectedObject] = useQuery(
-    database,
+    space.db,
     selectedId ? Query.select(Filter.id(selectedId)) : Query.select(Filter.nothing()),
   );
 
@@ -43,10 +35,10 @@ const DebugSpaceObjectsPanelMain = ({ database }: { database: Database.Database
           <Grid rows={2} classNames='divide-y divide-separator'>
             <ScrollArea.Root>
               <ScrollArea.Viewport>
-                <ObjectsTree db={database} onSelect={(entity) => setSelectedId(entity.id)} />
+                <ObjectsTree db={space.db} onSelect={(entity) => setSelectedId(entity.id)} />
               </ScrollArea.Viewport>
             </ScrollArea.Root>
-            {selectedObject && <Json classNames='p-1' data={selectedObject} />}
+            {selectedObject && <JsonHighlighter classNames='p-1' data={selectedObject} />}
           </Grid>
         </Panel.Content>
       </Panel.Root>

package/src/containers/DebugSpaceObjectsPanel/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { DebugSpaceObjectsPanel } from './DebugSpaceObjectsPanel';
-
-export default DebugSpaceObjectsPanel;
+export { DebugSpaceObjectsPanel as default } from './DebugSpaceObjectsPanel';

package/src/containers/DebugStatus/DebugStatus.tsx

@@ -5,8 +5,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimeoutError } from '@dxos/async';
-import { useActiveSpace } from '@dxos/plugin-space';
-import { StatusBar } from '@dxos/plugin-status-bar';
+import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { IconButton } from '@dxos/react-ui';
@@ -145,7 +144,6 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const _space = useActiveSpace();
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {

package/src/containers/DebugStatus/index.ts

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

package/src/containers/DevtoolsOverviewContainer/index.ts

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

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

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { GithubComponent } from './GithubComponent';
+
+const DefaultStory = () => (
+  <GithubComponent.Root>
+    <div className='grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden bs-full is-full'>
+      <GithubComponent.Header />
+      <GithubComponent.Content />
+      <GithubComponent.StatusBar />
+    </div>
+  </GithubComponent.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-debug/containers/GithubComponent',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-(--dx-r1-size)' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/GithubPanel/GithubComponent.tsx

@@ -0,0 +1,192 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ReactNode, createContext, useContext, useEffect, useState } from 'react';
+
+import { IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+const DEFAULT_REPO = 'dxos/dxos';
+const DEFAULT_LIMIT = 20;
+
+type GithubUser = {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+};
+
+type GithubPullRequest = {
+  number: number;
+  title: string;
+  html_url: string;
+  merged_at: string | null;
+  user: GithubUser;
+};
+
+type ComponentContextValue = {
+  repo: string;
+  pulls: GithubPullRequest[];
+  unavailable: boolean;
+};
+
+const ComponentContext = createContext<ComponentContextValue | null>(null);
+
+const useComponentContext = () => {
+  const ctx = useContext(ComponentContext);
+  if (!ctx) {
+    throw new Error('GithubComponent.* parts must be rendered inside GithubComponent.Root.');
+  }
+  return ctx;
+};
+
+export type GithubComponentRootProps = {
+  /** `<owner>/<name>`. Defaults to `dxos/dxos`. */
+  repo?: string;
+  /** Maximum number of merged PRs to fetch. */
+  limit?: number;
+  children?: ReactNode;
+};
+
+const Root = ({ repo = DEFAULT_REPO, limit = DEFAULT_LIMIT, children }: GithubComponentRootProps) => {
+  const [pulls, setPulls] = useState<GithubPullRequest[]>([]);
+  const [unavailable, setUnavailable] = useState(false);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setPulls([]);
+    setUnavailable(false);
+    void (async () => {
+      try {
+        const url = new URL(`https://api.github.com/repos/${repo}/pulls`);
+        url.searchParams.set('state', 'closed');
+        url.searchParams.set('sort', 'updated');
+        url.searchParams.set('direction', 'desc');
+        url.searchParams.set('per_page', String(limit * 2));
+        const response = await fetch(url.toString(), {
+          signal: controller.signal,
+          headers: { Accept: 'application/vnd.github+json' },
+        });
+        if (!response.ok) {
+          setUnavailable(true);
+          return;
+        }
+        const items = (await response.json()) as GithubPullRequest[];
+        setPulls(items.filter((pull) => pull.merged_at !== null).slice(0, limit));
+        setUnavailable(false);
+      } catch {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setPulls([]);
+        setUnavailable(true);
+      }
+    })();
+    return () => controller.abort();
+  }, [repo, limit]);
+
+  return <ComponentContext.Provider value={{ repo, pulls, unavailable }}>{children}</ComponentContext.Provider>;
+};
+
+const Header = () => {
+  const { t } = useTranslation(meta.id);
+  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'>
+      <a
+        href={`https://github.com/${repo}`}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='text-sm font-medium truncate'
+      >
+        @{repo}
+      </a>
+      <div className='text-xs text-description'>
+        {unavailable
+          ? t('github-unavailable.message')
+          : pulls.length > 0
+            ? t('recent-prs.label', { count: pulls.length })
+            : t('github-loading.message')}
+      </div>
+    </header>
+  );
+};
+
+const RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+  ['year', 60 * 60 * 24 * 365],
+  ['month', 60 * 60 * 24 * 30],
+  ['week', 60 * 60 * 24 * 7],
+  ['day', 60 * 60 * 24],
+  ['hour', 60 * 60],
+  ['minute', 60],
+];
+
+const formatRelative = (iso: string): string => {
+  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+  const diffSeconds = (Date.parse(iso) - Date.now()) / 1000;
+  const absDiff = Math.abs(diffSeconds);
+  for (const [unit, secondsInUnit] of RELATIVE_UNITS) {
+    if (absDiff >= secondsInUnit) {
+      return formatter.format(Math.round(diffSeconds / secondsInUnit), unit);
+    }
+  }
+  return formatter.format(Math.round(diffSeconds), 'second');
+};
+
+const PullRow = ({ pull }: { pull: GithubPullRequest }) => (
+  <li>
+    <a
+      href={pull.html_url}
+      target='_blank'
+      rel='noopener noreferrer'
+      className='flex items-start gap-2 px-2 py-1 rounded-sm hover:bg-hover-surface'
+    >
+      <img src={pull.user.avatar_url} alt='' className='w-6 h-6 rounded-full shrink-0 mt-0.5' />
+      <div className='flex flex-col min-w-0 flex-1'>
+        <span className='text-sm truncate'>{pull.title}</span>
+        <span className='text-xs text-description truncate'>
+          #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}
+        </span>
+      </div>
+    </a>
+  </li>
+);
+
+const Content = () => {
+  const { pulls } = useComponentContext();
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <ul className='flex flex-col p-1'>
+          {pulls.map((pull) => (
+            <PullRow key={pull.number} pull={pull} />
+          ))}
+        </ul>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const StatusBar = () => {
+  const { t } = useTranslation(meta.id);
+  const { repo } = useComponentContext();
+  return (
+    <IconButton
+      icon='ph--github-logo--regular'
+      label={t('view-on-github.button')}
+      variant='primary'
+      classNames='w-full'
+      onClick={() => {
+        window.open(`https://github.com/${repo}`, '_blank', 'noopener,noreferrer');
+      }}
+    />
+  );
+};
+
+export const GithubComponent = {
+  Root,
+  Header,
+  Content,
+  StatusBar,
+};

package/src/containers/GithubPanel/GithubPanel.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { GithubComponent } from './GithubComponent';
+
+export const GithubPanel = () => (
+  <GithubComponent.Root>
+    <div className='h-full grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden bs-full is-full'>
+      <GithubComponent.Header />
+      <GithubComponent.Content />
+      <GithubComponent.StatusBar />
+    </div>
+  </GithubComponent.Root>
+);

package/src/containers/GithubPanel/index.ts

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

package/src/containers/SpaceGenerator/SpaceGenerator.tsx

@@ -7,18 +7,21 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ComputeGraph } from '@dxos/conductor';
 import { Filter, Obj, type Type } from '@dxos/echo';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { Sheet } from '@dxos/plugin-sheet/types';
-import { Sketch } from '@dxos/plugin-sketch/types';
+import { Markdown } from '@dxos/plugin-markdown';
+import { Sheet } from '@dxos/plugin-sheet';
+import { Sketch } from '@dxos/plugin-sketch';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Panel, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { Organization, Person, Task } from '@dxos/types';
 import { composable, composableProps } from '@dxos/ui-theme';
-import { jsonKeyReplacer, sortKeys } from '@dxos/util';
+import { sortKeys } from '@dxos/util';
 
-import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '../../components';
+import { type ObjectGenerator, SchemaTable, createGenerator, generator, staticGenerators } from '#components';
+
+// TODO(burdon): Make extensible.
+const staticTypes = [Markdown.Document, Sketch.Sketch, Sheet.Sheet, ComputeGraph];
+const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -29,8 +32,6 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
   ({ space, onCreateObjects, children, ...props }, forwardedRef) => {
     const { invokePromise } = useOperationInvoker();
     const client = useClient();
-    const staticTypes = [Markdown.Document, Sketch.Sketch, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
-    const recordTypes: Type.AnyObj[] = [Organization.Organization, Person.Person, Task.Task];
     const [count, setCount] = useState(1);
     const [info, setInfo] = useState<any>({});
     const presets = useMemo(() => generator(), []);
@@ -38,7 +39,7 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
     // Register types.
     useAsyncEffect(async () => {
       await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
-    }, [client]);
+    }, [client, presets]);
 
     // Create type generators.
     const typeMap = useMemo(() => {
@@ -47,15 +48,13 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
       );
 
       return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
-    }, [client, recordTypes, invokePromise]);
+    }, [client, invokePromise, presets]);
 
     // Query space to get info.
-    const updateInfo = async () => {
-      // Create schema map.
+    const updateInfo = useCallback(async () => {
       const echoSchema = await space.db.schemaRegistry.query().run();
       const staticSchema = await space.db.graph.schemaRegistry.query().run();
 
-      // Create object map.
       const objects = await space.db.query(Filter.everything()).run();
       const objectMap = sortKeys(
         objects.reduce<Record<string, number>>((map, obj) => {
@@ -76,9 +75,9 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
         },
         objects: objectMap,
       });
-    };
+    }, [space]);
 
-    useAsyncEffect(updateInfo, [space]);
+    useAsyncEffect(updateInfo, [updateInfo]);
 
     const handleCreateData = useCallback(
       async (typename: string) => {
@@ -89,7 +88,7 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
           await updateInfo();
         }
       },
-      [typeMap, count],
+      [typeMap, count, space, onCreateObjects, updateInfo],
     );
 
     return (
@@ -114,13 +113,10 @@ export const SpaceGenerator = composable<HTMLDivElement, SpaceGeneratorProps>(
         </Panel.Toolbar>
         <Panel.Content asChild>
           <ScrollArea.Root thin orientation='vertical'>
-            <ScrollArea.Viewport classNames='gap-4 divide-y divide-subdued-separator'>
+            <ScrollArea.Viewport classNames='dx-document gap-4 divide-y divide-subdued-separator'>
               <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
               <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
               <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-              <SyntaxHighlighter language='json' classNames='text-xs'>
-                {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
-              </SyntaxHighlighter>
             </ScrollArea.Viewport>
           </ScrollArea.Root>
         </Panel.Content>

package/src/containers/SpaceGenerator/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export { SpaceGenerator as default } from './SpaceGenerator';

package/src/containers/Wireframe/Wireframe.tsx

@@ -8,7 +8,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { Obj } from '@dxos/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Create generic container with wireframe mode.
@@ -29,11 +29,7 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
           <div>{label}</div>
           <div>{`[${width}x${height}]`}</div>
         </div>
-        {object && (
-          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded-sm'>
-            {JSON.stringify(object, undefined, 2)}
-          </SyntaxHighlighter>
-        )}
+        {object && <JsonHighlighter data={object} classNames='text-xs opacity-75 rounded-sm' />}
       </div>
       <svg width={width} height={height} className='bg-transparent *:text-subdued'>
         <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />

package/src/containers/Wireframe/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Wireframe } from './Wireframe';
-
-export default Wireframe;
+export { Wireframe as default } from './Wireframe';

package/src/containers/index.ts

@@ -6,9 +6,9 @@ import { type ComponentType, lazy } from 'react';
 
 export const DebugGraph: ComponentType<any> = lazy(() => import('./DebugGraph'));
 export const DebugObjectPanel: ComponentType<any> = lazy(() => import('./DebugObjectPanel'));
-export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
 export const DebugStatus: ComponentType<any> = lazy(() => import('./DebugStatus'));
 export const DevtoolsOverviewContainer: ComponentType<any> = lazy(() => import('./DevtoolsOverviewContainer'));
 export const SpaceGenerator: ComponentType<any> = lazy(() => import('./SpaceGenerator'));
 export const Wireframe: ComponentType<any> = lazy(() => import('./Wireframe'));
 export const DebugSpaceObjectsPanel: ComponentType<any> = lazy(() => import('./DebugSpaceObjectsPanel'));
+export const GithubPanel: ComponentType<any> = lazy(() => import('./GithubPanel'));

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DebugPlugin';
 export * from './meta';
+export * from './types';

package/src/meta.ts

@@ -8,6 +8,7 @@ import { trim } from '@dxos/util';
 export const meta: Plugin.Meta = {
   id: 'org.dxos.plugin.debug',
   name: 'Debug',
+  author: 'DXOS',
   description: trim`
     Comprehensive developer toolkit for troubleshooting applications, generating test data, and exploring automation capabilities.
     Inspect objects, monitor events, and debug plugin behavior in real-time.
@@ -15,4 +16,5 @@ export const meta: Plugin.Meta = {
   icon: 'ph--bug--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
   screenshots: ['https://dxos.network/plugin-details-debug-dark.png'],
+  tags: ['labs'],
 };

package/src/plugin.ts

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