@dxos/plugin-debug 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/src/containers/DebugPanelStatus/DebugPanelStatus.tsx

@@ -0,0 +1,167 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+
+import * as Hooks from '@dxos/app-framework/Hooks';
+import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
+import * as StatusBar from '@dxos/plugin-status-bar/StatusBar';
+import { type DebugPortController, getDebugPortController } from '@dxos/react-client/devtools';
+import { useViewState, useViewStateActions } from '@dxos/react-ui-attention';
+import * as Button from '@dxos/react-ui/Button';
+import * as FloatingPanel from '@dxos/react-ui/FloatingPanel';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+
+import { meta } from '#meta';
+
+import {
+  DEBUG_PANEL_CONTEXT,
+  DebugPanel,
+  DebugPanelHeader,
+  type DebugPanelMode,
+  debugPanelAspect,
+} from '../DebugPanel/index.ts';
+
+/** Room for the log table to breathe; the console fits itself to whatever it is given. */
+const DEFAULT_SIZE: FloatingPanel.Size = { width: 1024, height: 384 };
+
+const MIN_SIZE: FloatingPanel.Size = { width: 480, height: 240 };
+
+/** Clear of the status bar the panel opens from. */
+const MARGIN = 8;
+
+export type DebugPanelStatusProps = {
+  /** Injectable for stories/tests; defaults to the page-wide controller. */
+  controller?: DebugPortController;
+};
+
+/**
+ * Status-bar button showing the debug panel: docked, it toggles the deck's bottom drawer; floating,
+ * it opens the panel as a window over the whole app — dragged, resized, folded to its title bar as
+ * the session needs, and left where it was put across reloads. The red dot marks a live agent debug
+ * port — an agent can evaluate code in this page — so it must be visible without opening settings.
+ */
+export const DebugPanelStatus = ({ controller = getDebugPortController() }: DebugPanelStatusProps) => {
+  const { t } = UiHooks.useTranslation(meta.profile.key);
+  const subscribe = useCallback((listener: () => void) => controller.subscribe(listener), [controller]);
+  const getStatus = useCallback(() => controller.getStatus(), [controller]);
+  const status = useSyncExternalStore(subscribe, getStatus);
+  const { invokePromise } = Hooks.useOperationInvoker();
+
+  const { position, size = DEFAULT_SIZE, mode = 'docked' } = useViewState(debugPanelAspect, DEBUG_PANEL_CONTEXT);
+  const { update } = useViewStateActions(debugPanelAspect, DEBUG_PANEL_CONTEXT);
+  const label = status.running ? t('debug-port-status.running.label') : t('open-debug-panel.label');
+
+  // Owned here rather than by the window so the drawer's float control can open it: the drawer
+  // only flips the persisted mode, and a docked-to-floating flip while mounted is that request.
+  const [floatingOpen, setFloatingOpen] = useState(false);
+  const previousModeRef = useRef(mode);
+  useEffect(() => {
+    if (previousModeRef.current === 'docked' && mode === 'floating') {
+      setFloatingOpen(true);
+    }
+    previousModeRef.current = mode;
+  }, [mode]);
+
+  const handleToggleDrawer = useCallback(
+    () => void invokePromise(LayoutOperation.UpdateDrawer, { state: 'toggle' }),
+    [invokePromise],
+  );
+  // Docking moves the panel: the window closes before the drawer opens so the two never show at once.
+  const handleModeChange = useCallback(
+    (next: DebugPanelMode) => {
+      setFloatingOpen(false);
+      update((prev) => ({ ...prev, mode: next }));
+      if (next === 'docked') {
+        void invokePromise(LayoutOperation.UpdateDrawer, { state: 'open' });
+      }
+    },
+    [update, invokePromise],
+  );
+  const handlePositionChangeEnd = useCallback(
+    ({ position }: { position: FloatingPanel.Point }) => update((prev) => ({ ...prev, position })),
+    [update],
+  );
+
+  const handleSizeChangeEnd = useCallback(
+    ({ size }: { size: FloatingPanel.Size }) => update((prev) => ({ ...prev, size })),
+    [update],
+  );
+  // First opening: centred above the status bar, where the popover it replaces used to sit. A
+  // persisted position wins from then on.
+  const getAnchorPosition = useCallback(
+    ({ triggerRect, boundaryRect }: { triggerRect: DOMRect | null; boundaryRect: DOMRect | null }) => {
+      if (position) {
+        return position;
+      }
+      const bounds = boundaryRect ?? new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+      const bottom = triggerRect?.top ?? bounds.bottom;
+      return {
+        x: Math.max(0, bounds.left + (bounds.width - size.width) / 2),
+        y: Math.max(0, bottom - size.height - MARGIN),
+      };
+    },
+    [position, size],
+  );
+
+  return (
+    <FloatingPanel.Root
+      open={mode === 'floating' && floatingOpen}
+      onOpenChange={({ open }) => setFloatingOpen(open)}
+      defaultSize={size}
+      minSize={MIN_SIZE}
+      getAnchorPosition={getAnchorPosition}
+      persistRect
+      closeOnEscape
+      onPositionChangeEnd={handlePositionChangeEnd}
+      onSizeChangeEnd={handleSizeChangeEnd}
+    >
+      {/* IconButton is the direct trigger child so the trigger ref/handlers/ARIA attach to the button, not the container. */}
+      <StatusBar.Item classNames='relative'>
+        {mode === 'floating' ? (
+          <FloatingPanel.Trigger asChild>
+            <Button.Root variant='ghost' icon='ph--terminal-window--regular' iconOnly label={label} />
+          </FloatingPanel.Trigger>
+        ) : (
+          <Button.Root
+            variant='ghost'
+            icon='ph--terminal-window--regular'
+            iconOnly
+            label={label}
+            onClick={handleToggleDrawer}
+          />
+        )}
+        {status.running && (
+          <span
+            role='status'
+            aria-label={t('debug-port-status.running.label')}
+            data-testid='debugPlugin.portIndicator'
+            className='absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-red-500 pointer-events-none'
+          />
+        )}
+      </StatusBar.Item>
+      <FloatingPanel.Content>
+        <DebugPanel.Root>
+          <FloatingPanel.Header classNames='pl-1'>
+            <FloatingPanel.DragTrigger>
+              <FloatingPanel.Title>{t('debug-panel.title')}</FloatingPanel.Title>
+            </FloatingPanel.DragTrigger>
+            {/* Fold and restore only: a debug panel over the whole app is a window the reader would resize. */}
+            <FloatingPanel.Control>
+              <DebugPanelHeader mode={mode} onModeChange={handleModeChange} size='sm' />
+              <FloatingPanel.StageTrigger stage='minimized' />
+              <FloatingPanel.StageTrigger stage='default' />
+              <FloatingPanel.CloseTrigger />
+            </FloatingPanel.Control>
+          </FloatingPanel.Header>
+          <FloatingPanel.Body classNames='grid'>
+            <DebugPanel.Body />
+          </FloatingPanel.Body>
+        </DebugPanel.Root>
+      </FloatingPanel.Content>
+    </FloatingPanel.Root>
+  );
+};
+
+DebugPanelStatus.displayName = 'DebugPanelStatus';

package/src/containers/DebugPanelStatus/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './DebugPanelStatus.tsx';

package/src/containers/DebugPortSettings/DebugPortSettings.stories.tsx

@@ -18,7 +18,7 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { DebugPortSettings } from './DebugPortSettings';
+import { DebugPortSettings } from './DebugPortSettings.tsx';
 
 const DEBUG_PORT_ORIGIN = 'http://127.0.0.1:9321';
 
@@ -70,7 +70,7 @@ const createFakeController = (initial: Partial<DebugPortStatus> = {}): DebugPort
   };
 };
 
-/** `Form.Row` reads the form context for its variant; the section itself binds no fields. */
+/** `Form.Field` reads the form context for its variant; the section itself binds no fields. */
 const NoFields = Schema.Struct({});
 
 type StoryArgs = {

package/src/containers/DebugPortSettings/DebugPortSettings.tsx

@@ -5,9 +5,12 @@
 import React, { useCallback, useSyncExternalStore } from 'react';
 
 import { type DebugPortController, getDebugPortController } from '@dxos/react-client/devtools';
-import { Flex, IconButton, Input, useTranslation } from '@dxos/react-ui';
 import { Logger, type LogRow } from '@dxos/react-ui-debug';
 import { Form } from '@dxos/react-ui-form';
+import * as Field from '@dxos/react-ui/Field';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Input from '@dxos/react-ui/Input';
+import * as Layout from '@dxos/react-ui/Layout';
 
 import { meta } from '#meta';
 
@@ -35,7 +38,7 @@ export type DebugPortSettingsProps = {
  * flipped, the session id is regenerated on every activation, and nothing survives a reload.
  */
 export const DebugPortSettings = ({ controller = getDebugPortController(), disabled }: DebugPortSettingsProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const subscribe = useCallback((listener: () => void) => controller.subscribe(listener), [controller]);
   const getStatus = useCallback(() => controller.getStatus(), [controller]);
   const status = useSyncExternalStore(subscribe, getStatus);
@@ -47,65 +50,55 @@ export const DebugPortSettings = ({ controller = getDebugPortController(), disab
     [controller],
   );
 
-  const handleCopy = useCallback(() => {
-    if (status.session) {
-      void navigator.clipboard.writeText(status.session);
-    }
-  }, [status.session]);
-
   return (
-    <Form.Section
-      title={t('settings.debug-port.section.label')}
+    <Form.FieldSet
+      label={t('settings.debug-port.section.label')}
       description={t('settings.debug-port.section.description')}
     >
-      <Form.Row label={t('settings.debug-port.label')} description={t('settings.debug-port.description')}>
-        <Flex gap='md' align='center'>
+      <Form.Field standalone label={t('settings.debug-port.label')} description={t('settings.debug-port.description')}>
+        <Layout.Flex gap='md' align='center'>
           {status.running && (
-            <span className='text-sm text-description'>
+            <span className='text-sm text-fg-muted'>
               {t('settings.debug-port.running.label')} <span className='font-mono'>{status.origin}</span>
             </span>
           )}
-          <Input.Root>
-            <Input.Switch checked={status.running} disabled={disabled} onCheckedChange={handleToggle} />
-          </Input.Root>
-        </Flex>
-      </Form.Row>
+          <Field.Root>
+            <Input.Switch
+              checked={status.running}
+              disabled={disabled}
+              onCheckedChange={({ checked }) => handleToggle(checked)}
+            />
+          </Field.Root>
+        </Layout.Flex>
+      </Form.Field>
 
       {status.running && (
         <>
-          <Form.Row
+          <Form.Field
             standalone
             label={t('settings.debug-port.session.label')}
             description={t('settings.debug-port.session.description')}
           >
-            <Flex gap='sm' align='center'>
-              <span className='grow truncate font-mono text-sm'>{status.session}</span>
-              <IconButton
-                icon='ph--copy--regular'
-                iconOnly
-                label={t('settings.debug-port.copy-session.label')}
-                onClick={handleCopy}
-              />
-            </Flex>
-          </Form.Row>
+            <Input.Root
+              value={status.session ?? ''}
+              disabled
+              variant='mono'
+              copyable
+              aria-label={t('settings.debug-port.session.label')}
+            />
+          </Form.Field>
 
-          {/* The settings variant puts the control in a right-hand column; log rows need the full
-              width, so this row collapses to a single column. */}
-          <Form.Row
-            standalone
-            label={t('settings.debug-port.log.label')}
-            classNames='md:grid-cols-1 md:[grid-template-areas:"header""description""control""validation"]'
-          >
-            {/* Only the rows: a settings card has no room for the panel's toolbar, levels or filter. */}
+          <Form.Field standalone label={t('settings.debug-port.log.label')}>
+            {/* Only the rows: a settings card has no room for the panel's toolbar, levels or filter, so nothing to check rows for. */}
             <Logger.Root rowFilter={isDebugPortRow}>
               <Logger.Content classNames='max-h-[16lh]'>
-                <Logger.List />
+                <Logger.List checkable={false} />
               </Logger.Content>
             </Logger.Root>
-          </Form.Row>
+          </Form.Field>
         </>
       )}
-    </Form.Section>
+    </Form.FieldSet>
   );
 };
 

package/src/containers/DebugPortSettings/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './DebugPortSettings';
+export * from './DebugPortSettings.tsx';

package/src/containers/DebugSettings/DebugSettings.stories.tsx

@@ -9,7 +9,7 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { DebugSettings } from './DebugSettings';
+import { DebugSettings } from './DebugSettings.tsx';
 
 const meta = {
   title: 'plugins/plugin-debug/containers/DebugSettings',

package/src/containers/DebugSettings/DebugSettings.tsx

@@ -6,20 +6,24 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
 import * as AppSpace from '@dxos/app-toolkit/AppSpace';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { type ConfigInit, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { type IdbLogStore, MANUAL_LOG_EXPORT_MAX_BYTES } from '@dxos/log-store-idb';
 import { useClient } from '@dxos/react-client';
-import { IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Input from '@dxos/react-ui/Input';
+import * as Select from '@dxos/react-ui/Select';
+import * as UiToast from '@dxos/react-ui/Toast';
 import { TRACE_ALL_KEY } from '@dxos/tracing';
-import { setDeep } from '@dxos/util';
+import { gzip, setDeep } from '@dxos/util';
 
 import { meta } from '#meta';
 import { Settings } from '#types';
 
-import { DebugPortSettings } from '../DebugPortSettings';
+import { DebugPortSettings } from '../DebugPortSettings/index.ts';
 
 type Toast = {
   title: string;
@@ -39,10 +43,10 @@ export type DebugSettingsProps = AppSurface.SettingsProps<
   }
 >;
 
-export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }: DebugSettingsProps) => {
-  const { t } = useTranslation(meta.profile.key);
+export const DebugSettings = ({ settings, onSettingsChange, scope, logStore, onUpload }: DebugSettingsProps) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const [toast, setToast] = useState<Toast>();
-  const download = useFileDownload();
+  const download = Hooks.useFileDownload();
   const [storageConfig, setStorageConfig] = useState<ConfigInit>({});
   const client = useClient();
 
@@ -95,8 +99,8 @@ export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }
   }, [client, download, handleToast, onUpload, t]);
 
   const handleDownloadLogs = useCallback(async () => {
-    const file = await logStore.exportBlob({ maxSize: MANUAL_LOG_EXPORT_MAX_BYTES });
-    const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson`;
+    const file = await gzip(await logStore.exportBlob({ maxSize: MANUAL_LOG_EXPORT_MAX_BYTES }));
+    const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson.gz`;
     download(file, fileName);
   }, [download, logStore]);
 
@@ -157,96 +161,99 @@ export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }
     <Form.Root schema={Settings.Settings} values={settings} variant='settings' readonly={!onSettingsChange}>
       <Form.Viewport scroll>
         <Form.Content>
-          <Form.Section title={meta.profile.name ?? meta.profile.key}>
-            <Form.Row label={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
-              <Input.Root>
-                <Input.Switch
-                  disabled={!onSettingsChange}
-                  checked={settings.wireframe}
-                  onCheckedChange={handleWireframeChange}
-                />
-              </Input.Root>
-            </Form.Row>
-            <Form.Row label={t('settings.trace-all.label')} description={t('settings.trace-all.description')}>
-              <Input.Root>
-                <Input.Switch disabled={!onSettingsChange} checked={traceAll} onCheckedChange={handleTraceAllChange} />
-              </Input.Root>
-            </Form.Row>
-            <Form.Row label={t('settings.tracing-panel.label')} description={t('settings.tracing-panel.description')}>
-              <IconButton
+          <Form.FieldSet label={meta.profile.name ?? meta.profile.key} actions={scope}>
+            <Form.Field label={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
+              <Input.Switch
+                disabled={!onSettingsChange}
+                checked={settings.wireframe}
+                onCheckedChange={({ checked }) => handleWireframeChange(checked)}
+              />
+            </Form.Field>
+            <Form.Field label={t('settings.trace-all.label')} description={t('settings.trace-all.description')}>
+              <Input.Switch
+                disabled={!onSettingsChange}
+                checked={traceAll}
+                onCheckedChange={({ checked }) => handleTraceAllChange(checked)}
+              />
+            </Form.Field>
+            <Form.Field
+              standalone
+              label={t('settings.tracing-panel.label')}
+              description={t('settings.tracing-panel.description')}
+            >
+              <Button.Root
                 icon='ph--arrow-square-out--regular'
                 iconOnly
                 label={t('settings.tracing-panel.label')}
                 onClick={handleOpenTracingPanel}
               />
-            </Form.Row>
-            <Form.Row
+            </Form.Field>
+            <Form.Field
+              standalone
               label={t('settings.download-diagnostics.label')}
               description={t('settings.download-diagnostics.description')}
             >
-              <IconButton
+              <Button.Root
                 icon='ph--download-simple--regular'
                 iconOnly
                 label={t('settings.download-diagnostics.label')}
                 onClick={handleDownload}
               />
-            </Form.Row>
-            <Form.Row label={t('settings.download-logs.label')} description={t('settings.download-logs.description')}>
-              <IconButton
+            </Form.Field>
+            <Form.Field
+              standalone
+              label={t('settings.download-logs.label')}
+              description={t('settings.download-logs.description')}
+            >
+              <Button.Root
                 icon='ph--download-simple--regular'
                 iconOnly
                 label={t('settings.download-logs.label')}
                 onClick={handleDownloadLogs}
               />
-            </Form.Row>
-            <Form.Row label={t('settings.repair.label')} description={t('settings.repair.description')}>
-              <IconButton
+            </Form.Field>
+            <Form.Field standalone label={t('settings.repair.label')} description={t('settings.repair.description')}>
+              <Button.Root
                 icon='ph--first-aid-kit--regular'
                 iconOnly
                 label={t('settings.repair.label')}
                 onClick={handleRepair}
               />
-            </Form.Row>
+            </Form.Field>
 
             {/* TODO(burdon): Move to layout? */}
             {toast && (
-              <Toast.Root>
-                <Toast.Title icon='ph--gift--duotone'>
-                  <span>{toast.title}</span>
-                </Toast.Title>
-                {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-              </Toast.Root>
+              <UiToast.Root defaultOpen duration={5_000} onOpenChange={(open) => !open && setToast(undefined)}>
+                <UiToast.Header icon='ph--gift--duotone'>{toast.title}</UiToast.Header>
+                {toast.description && <UiToast.Description>{toast.description}</UiToast.Description>}
+              </UiToast.Root>
             )}
 
-            <Form.Row
+            <Form.Field
               label={t('settings.choose-storage-adaptor.label')}
               description={t('settings.choose-storage-adaptor.description')}
             >
               <Select.Root
                 disabled={!onSettingsChange}
-                value={
-                  Object.entries(StorageAdapters).find(
-                    ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-                  )?.[0]
-                }
-                onValueChange={handleStorageAdapterChange}
+                value={Object.entries(StorageAdapters)
+                  .filter(([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore)
+                  .map(([name]) => name)
+                  .slice(0, 1)}
+                onValueChange={({ value: [value] }) => value && handleStorageAdapterChange(value)}
+                items={Object.keys(StorageAdapters).map((key) => ({
+                  value: key,
+                  label: t(`settings.storage-adaptor.${key}.label`),
+                }))}
               >
-                <Select.TriggerButton disabled={!onSettingsChange} 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.Trigger disabled={!onSettingsChange} placeholder={t('settings.data-store.label')} />
+                <Select.Content>
+                  {Object.keys(StorageAdapters).map((key) => (
+                    <Select.Item key={key} item={{ value: key, label: t(`settings.storage-adaptor.${key}.label`) }} />
+                  ))}
+                </Select.Content>
               </Select.Root>
-            </Form.Row>
-          </Form.Section>
+            </Form.Field>
+          </Form.FieldSet>
 
           <DebugPortSettings disabled={!onSettingsChange} />
         </Form.Content>

package/src/containers/DebugSettings/index.ts

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

package/src/containers/DebugSpaceObjectsPanel/DebugSpaceObjectsPanel.tsx

@@ -4,13 +4,18 @@
 
 import React, { useState } from 'react';
 
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { ObjectsTree } from '@dxos/devtools';
 import { type Entity, Filter, Obj, Query } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { type EntityId } from '@dxos/keys';
-import { Clipboard, Grid, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Input from '@dxos/react-ui/Input';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 
 export type DebugSpaceObjectsPanelProps = AppSurface.SpaceArticleProps & {
   onOpen?: (object: Obj.Unknown) => void;
@@ -19,38 +24,44 @@ export type DebugSpaceObjectsPanelProps = AppSurface.SpaceArticleProps & {
 
 export const DebugSpaceObjectsPanel = ({ space, onOpen, canOpen }: DebugSpaceObjectsPanelProps) => {
   const [selectedId, setSelectedId] = useState<EntityId | null>(null);
+  const [filter, setFilter] = useState('');
+  // TODO(burdon): Guard.
   const [selectedObject] = useQuery(
     space.db,
     selectedId ? Query.select(Filter.id(selectedId)) : Query.select(Filter.nothing()),
   );
 
   return (
-    <Clipboard.Provider>
-      <Panel.Root>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            <Input.Root>
-              <Input.TextInput disabled placeholder='Search...' />
-            </Input.Root>
-          </Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
-          <Grid rows={2} classNames='divide-y divide-subdued-separator'>
-            <ScrollArea.Root>
-              <ScrollArea.Viewport>
-                <ObjectsTree
-                  db={space.db}
-                  onSelect={(entity) => setSelectedId(entity.id)}
-                  onOpen={onOpen}
-                  canOpen={canOpen}
-                />
-              </ScrollArea.Viewport>
-            </ScrollArea.Root>
-            {selectedObject && <JsonHighlighter classNames='p-1' data={selectedObject} />}
-          </Grid>
-        </Panel.Content>
-      </Panel.Root>
-    </Clipboard.Provider>
+    <Panel.Root>
+      <Panel.Header>
+        <Toolbar.Root>
+          <Input.Root
+            placeholder='Search...'
+            aria-label='Search'
+            noAutoFill
+            value={filter}
+            onChange={(event) => setFilter(event.target.value)}
+            end={<Icon.Icon icon='ph--magnifying-glass--regular' />}
+          />
+        </Toolbar.Root>
+      </Panel.Header>
+      <Panel.Body asChild>
+        <Layout.Grid grow rows={2} classNames='divide-y divide-separator-subtle'>
+          <ScrollArea.Root>
+            <ScrollArea.Viewport>
+              <ObjectsTree
+                db={space.db}
+                filter={filter}
+                onSelect={(entity) => setSelectedId(entity.id)}
+                onOpen={onOpen}
+                canOpen={canOpen}
+              />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+          {selectedObject && <JsonHighlighter classNames='p-1' data={selectedObject} />}
+        </Layout.Grid>
+      </Panel.Body>
+    </Panel.Root>
   );
 };
 

package/src/containers/DebugSpaceObjectsPanel/index.ts

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