@dxos/plugin-debug 0.8.3 → 0.8.4-main.1068cf700f

package/dist/lib/browser/react-surface-FMVC5GPV.mjs

@@ -0,0 +1,758 @@
+import {
+  DebugCapabilities,
+  Devtools
+} from "./chunk-4UFQXPP7.mjs";
+import {
+  meta
+} from "./chunk-A5H5GRV6.mjs";
+
+// src/capabilities/react-surface/react-surface.tsx
+import * as Effect from "effect/Effect";
+import React5, { useCallback } from "react";
+import { Capabilities, Capability } from "@dxos/app-framework";
+import { Surface, useCapability, useOperationInvoker, useSettingsState } from "@dxos/app-framework/ui";
+import { AppCapabilities as AppCapabilities2, LayoutOperation } from "@dxos/app-toolkit";
+import { useLayout } from "@dxos/app-toolkit/ui";
+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 as Obj2 } from "@dxos/echo";
+import { log as log2 } from "@dxos/log";
+import { ClientCapabilities } from "@dxos/plugin-client";
+import { ScriptOperation } from "@dxos/plugin-script/types";
+import { SpaceOperation } from "@dxos/plugin-space/types";
+import { SpaceState, isSpace, parseId } from "@dxos/react-client/echo";
+import { Layout as Layout2 } from "@dxos/react-ui";
+import { Collection } from "@dxos/schema";
+
+// src/components/index.ts
+import { lazy } from "react";
+
+// src/components/DebugObjectPanel.tsx
+import React from "react";
+import { Clipboard, Input, Layout, Toolbar } from "@dxos/react-ui";
+import { Json } from "@dxos/react-ui-syntax-highlighter";
+var DebugObjectPanel = ({ object }) => {
+  const dxn = `dxn:echo:@:${object.id}`;
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Layout.Main, {
+    toolbar: true
+  }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.TextInput, {
+    disabled: true,
+    value: dxn
+  }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+    value: dxn
+  }))), /* @__PURE__ */ React.createElement(Json, {
+    data: object
+  })));
+};
+
+// src/components/DebugSettings.tsx
+import React2, { useEffect, useState } from "react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+import { AppCapabilities } from "@dxos/app-toolkit";
+import { SaveConfig, Storage, defs } from "@dxos/config";
+import { log } from "@dxos/log";
+import { useClient } from "@dxos/react-client";
+import { Icon, IconButton, Input as Input2, Select, Toast, useFileDownload, useTranslation } from "@dxos/react-ui";
+import { Settings } from "@dxos/react-ui-form";
+import { setDeep } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-debug/src/components/DebugSettings.tsx";
+var StorageAdapters = {
+  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
+  idb: defs.Runtime.Client.Storage.StorageDriver.IDB
+};
+var DebugSettings = ({ settings, onSettingsChange }) => {
+  const { t } = useTranslation(meta.id);
+  const [toast, setToast] = useState();
+  const client = useClient();
+  const download = useFileDownload();
+  const [storageConfig, setStorageConfig] = useState({});
+  const [upload] = useCapabilities(AppCapabilities.FileUploader);
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+  const handleToast = (toast2) => {
+    setToast(toast2);
+    const t2 = setTimeout(() => setToast(void 0), 5e3);
+    return () => clearTimeout(t2);
+  };
+  const handleDownload = async () => {
+    const data = await client.diagnostics();
+    const file = new Blob([
+      JSON.stringify(data, void 0, 2)
+    ], {
+      type: "text/plain"
+    });
+    const fileName = `composer-${(/* @__PURE__ */ 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", void 0, {
+          F: __dxlog_file,
+          L: 64,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return;
+      }
+      handleToast({
+        title: t("settings uploaded"),
+        description: t("settings uploaded to clipboard")
+      });
+      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
+      }, {
+        F: __dxlog_file,
+        L: 79,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+  const handleRepair = async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({
+        title: t("settings repair success"),
+        description: JSON.stringify(info, void 0, 2)
+      });
+    } catch (err) {
+      handleToast({
+        title: t("settings repair failed"),
+        description: err.message
+      });
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Settings.Root, null, /* @__PURE__ */ React2.createElement(Settings.Section, {
+    title: t("settings title", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React2.createElement(Settings.Group, null, /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("settings wireframe")
+  }, /* @__PURE__ */ React2.createElement(Input2.Switch, {
+    checked: settings.wireframe,
+    onCheckedChange: (checked) => onSettingsChange((s) => ({
+      ...s,
+      wireframe: !!checked
+    }))
+  })), /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("settings download diagnostics")
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--download-simple--regular",
+    iconOnly: true,
+    label: t("settings download diagnostics"),
+    onClick: handleDownload
+  })), /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("settings repair")
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--first-aid-kit--regular",
+    iconOnly: true,
+    label: t("settings repair"),
+    onClick: handleRepair
+  })), toast && /* @__PURE__ */ React2.createElement(Toast.Root, null, /* @__PURE__ */ React2.createElement(Toast.Body, null, /* @__PURE__ */ React2.createElement(Toast.Title, null, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--gift--duotone",
+    size: 5,
+    classNames: "inline mr-1"
+  }), /* @__PURE__ */ React2.createElement("span", null, toast.title)), toast.description && /* @__PURE__ */ React2.createElement(Toast.Description, null, toast.description))), /* @__PURE__ */ React2.createElement(Settings.ItemInput, {
+    title: t("settings choose storage adaptor")
+  }, /* @__PURE__ */ React2.createElement(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]);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+    placeholder: t("settings data store label")
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, Object.keys(StorageAdapters).map((key) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key,
+    value: key
+  }, t(`settings storage adaptor ${key} label`)))), /* @__PURE__ */ React2.createElement(Select.Arrow, null))))))));
+};
+var updateConfig = (config, setConfig, path, value) => {
+  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
+  setDeep(storageConfigCopy, path, value);
+  setConfig(storageConfigCopy);
+  queueMicrotask(async () => {
+    await SaveConfig(storageConfigCopy);
+  });
+};
+
+// src/components/DebugStatus.tsx
+import React3, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { TimeoutError } from "@dxos/async";
+import { useActiveSpace } 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 { Icon as Icon2 } from "@dxos/react-ui";
+var styles = {
+  success: "text-sky-300 dark:text-green-700",
+  warning: "text-orange-300 dark:text-orange-600",
+  error: "text-red-300 dark:text-red-600"
+};
+var ErrorIndicator = () => {
+  const [, forceUpdate] = useState2({});
+  const errorRef = useRef(null);
+  useEffect2(() => {
+    const errorListener = (event) => {
+      const error = event.error ?? event.reason;
+      if (errorRef.current !== error) {
+        errorRef.current = error;
+        forceUpdate({});
+      }
+    };
+    window.addEventListener("error", errorListener);
+    window.addEventListener("unhandledrejection", errorListener);
+    return () => {
+      window.removeEventListener("error", errorListener);
+      window.removeEventListener("unhandledrejection", errorListener);
+    };
+  }, []);
+  const handleReset = () => {
+    errorRef.current = null;
+    forceUpdate({});
+  };
+  if (errorRef.current) {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Button, {
+      title: errorRef.current.message,
+      onClick: handleReset
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: "ph--warning-circle--duotone",
+      size: 4,
+      classNames: styles.error
+    }));
+  } else {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+      title: "No errors."
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: "ph--check--regular",
+      size: 4
+    }));
+  }
+};
+var SwarmIndicator = () => {
+  const [state, setState] = useState2(0);
+  const { swarm } = useNetworkStatus();
+  useEffect2(() => {
+    setState(swarm === ConnectionState.ONLINE ? 0 : 1);
+  }, [
+    swarm
+  ]);
+  if (state === 0) {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+      title: "Connected to swarm."
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: "ph--lightning--regular",
+      size: 4
+    }));
+  } else {
+    return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+      title: "Disconnected from swarm."
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: "ph--lightning-slash--regular",
+      size: 4,
+      classNames: styles.warning
+    }));
+  }
+};
+var SavingIndicator = () => {
+  const [state, _setState] = useState2(0);
+  const _space = useActiveSpace();
+  switch (state) {
+    case 2:
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+        title: "Edit not saved."
+      }, /* @__PURE__ */ React3.createElement(Icon2, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.warning
+      }));
+    case 1:
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+        title: "Saving..."
+      }, /* @__PURE__ */ React3.createElement(Icon2, {
+        icon: "ph--circle--duotone",
+        size: 4,
+        classNames: styles.success
+      }));
+    case 0:
+    default:
+      return /* @__PURE__ */ React3.createElement(StatusBar.Item, {
+        title: "Modified indicator."
+      }, /* @__PURE__ */ React3.createElement(Icon2, {
+        icon: "ph--circle--duotone",
+        size: 4
+      }));
+  }
+};
+var indicators = [
+  SavingIndicator,
+  SwarmIndicator,
+  ErrorIndicator
+];
+var DebugStatus = () => {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, indicators.map((Indicator) => /* @__PURE__ */ React3.createElement(Indicator, {
+    key: Indicator.name
+  })));
+};
+
+// src/components/Wireframe.tsx
+import React4 from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { Obj } from "@dxos/echo";
+import { useAttentionAttributes } from "@dxos/react-ui-attention";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx } from "@dxos/ui-theme";
+var Wireframe = ({ classNames, label, object }) => {
+  const attentionAttrs = useAttentionAttributes(Obj.getDXN(object).toString());
+  const { width, height, ref } = useResizeDetector();
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref,
+    className: mx("relative grow min-bs-96", classNames),
+    ...attentionAttrs
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex justify-between"
+  }, /* @__PURE__ */ React4.createElement("div", null, label), /* @__PURE__ */ React4.createElement("div", null, `[${width}x${height}]`)), object && /* @__PURE__ */ React4.createElement(SyntaxHighlighter, {
+    language: "json",
+    classNames: "text-xs opacity-75 rounded"
+  }, JSON.stringify(object, void 0, 2))), /* @__PURE__ */ React4.createElement("svg", {
+    width,
+    height,
+    className: "bg-transparent *:text-subdued"
+  }, /* @__PURE__ */ React4.createElement("rect", {
+    x: 0,
+    y: 0,
+    width,
+    height,
+    strokeWidth: 1,
+    fill: "none"
+  }), /* @__PURE__ */ React4.createElement("line", {
+    x1: 0,
+    y1: 0,
+    x2: width,
+    y2: height,
+    strokeWidth: 1
+  }), /* @__PURE__ */ React4.createElement("line", {
+    x1: 0,
+    y1: height,
+    x2: width,
+    y2: 0,
+    strokeWidth: 1
+  })));
+};
+
+// src/components/index.ts
+var DebugGraph = lazy(() => import("./DebugGraph-6VMEOKEV.mjs"));
+var DevtoolsOverviewContainer = lazy(() => import("./DevtoolsOverviewContainer-2C6XMJ3L.mjs"));
+var SpaceGenerator = lazy(() => import("./SpaceGenerator-W3LJORYT.mjs"));
+
+// src/capabilities/react-surface/react-surface.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-debug/src/capabilities/react-surface/react-surface.tsx";
+var isSpaceDebug = (data) => data?.type === `${meta.id}/space` && isSpace(data.space);
+var isGraphDebug = (data) => {
+  const graph = data?.graph;
+  return graph != null && typeof graph === "object" && typeof graph.json === "function" && typeof data?.root === "string";
+};
+var useCurrentSpace = () => {
+  const layout = useLayout();
+  const client = useCapability(ClientCapabilities.Client);
+  const { spaceId } = parseId(layout.workspace);
+  const space = spaceId ? client.spaces.get(spaceId) : void 0;
+  return space;
+};
+var react_surface_default = Capability.makeModule(Effect.fnUntraced(function* () {
+  const capabilities = yield* Capability.Service;
+  const registry = capabilities.get(Capabilities.AtomRegistry);
+  const settingsAtom = capabilities.get(DebugCapabilities.Settings);
+  return Capability.contributes(Capabilities.ReactSurface, [
+    Surface.create({
+      id: `${meta.id}/plugin-settings`,
+      role: "article",
+      filter: (data) => AppCapabilities2.isSettings(data.subject) && data.subject.prefix === meta.id,
+      component: ({ data: { subject } }) => {
+        const { settings, updateSettings } = useSettingsState(subject.atom);
+        return /* @__PURE__ */ React5.createElement(DebugSettings, {
+          settings,
+          onSettingsChange: updateSettings
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/space`,
+      role: "article",
+      filter: (data) => isSpaceDebug(data.subject),
+      component: ({ role, data }) => {
+        const { invokePromise } = useOperationInvoker();
+        const handleCreateObject = useCallback((objects) => {
+          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 (!Obj2.instanceOf(Collection.Collection, collection)) {
+            return;
+          }
+          objects.forEach((object) => {
+            void invokePromise(SpaceOperation.AddObject, {
+              target: collection,
+              object
+            });
+          });
+        }, [
+          data.subject.space,
+          invokePromise
+        ]);
+        return /* @__PURE__ */ React5.createElement(Layout2.Main, {
+          role
+        }, /* @__PURE__ */ React5.createElement(SpaceGenerator, {
+          space: data.subject.space,
+          onCreateObjects: handleCreateObject
+        }));
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/app-graph`,
+      role: "article",
+      filter: (data) => isGraphDebug(data.subject),
+      component: ({ data }) => /* @__PURE__ */ React5.createElement(DebugGraph, {
+        graph: data.subject.graph,
+        root: data.subject.root
+      })
+    }),
+    Surface.create({
+      id: `${meta.id}/wireframe`,
+      role: [
+        "article",
+        "section"
+      ],
+      position: "hoist",
+      filter: (data) => {
+        const settings = registry.get(settingsAtom);
+        return Obj2.isObject(data.subject) && !!settings.wireframe;
+      },
+      component: ({ data, role }) => /* @__PURE__ */ React5.createElement(Wireframe, {
+        label: `${role}:${name}`,
+        object: data.subject,
+        classNames: "row-span-2 overflow-hidden"
+      })
+    }),
+    Surface.create({
+      id: `${meta.id}/object-debug`,
+      role: "article",
+      filter: (data) => data.subject === "debug" && Obj2.isObject(data.companionTo),
+      component: ({ data }) => /* @__PURE__ */ React5.createElement(DebugObjectPanel, {
+        object: data.companionTo
+      })
+    }),
+    Surface.create({
+      id: `${meta.id}/devtools-overview`,
+      role: "deck-companion--devtools",
+      component: () => /* @__PURE__ */ React5.createElement(DevtoolsOverviewContainer, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/status`,
+      role: "status",
+      component: () => /* @__PURE__ */ React5.createElement(DebugStatus, null)
+    }),
+    //
+    // Devtools
+    //
+    Surface.create({
+      id: `${meta.id}/client/config`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Client.Config,
+      component: () => /* @__PURE__ */ React5.createElement(ConfigPanel, {
+        vaultSelector: false
+      })
+    }),
+    Surface.create({
+      id: `${meta.id}/client/storage`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Client.Storage,
+      component: () => /* @__PURE__ */ React5.createElement(StoragePanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/client/logs`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Client.Logs,
+      component: () => /* @__PURE__ */ React5.createElement(LoggingPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/client/diagnostics`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Client.Diagnostics,
+      component: () => /* @__PURE__ */ React5.createElement(DiagnosticsPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/client/tracing`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Client.Tracing,
+      component: () => /* @__PURE__ */ React5.createElement(TracingPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/halo/identity`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Halo.Identity,
+      component: () => /* @__PURE__ */ React5.createElement(IdentityPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/halo/devices`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Halo.Devices,
+      component: () => /* @__PURE__ */ React5.createElement(DeviceListPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/halo/keyring`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Halo.Keyring,
+      component: () => /* @__PURE__ */ React5.createElement(KeyringPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/halo/credentials`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Halo.Credentials,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(CredentialsPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/spaces`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Spaces,
+      component: () => {
+        const { invokePromise } = useOperationInvoker();
+        const handleSelect = useCallback(() => invokePromise(LayoutOperation.Open, {
+          subject: [
+            Devtools.Echo.Space
+          ]
+        }), [
+          invokePromise
+        ]);
+        return /* @__PURE__ */ React5.createElement(SpaceListPanel, {
+          onSelect: handleSelect
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/space`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Space,
+      component: () => {
+        const space = useCurrentSpace();
+        const { invokePromise } = useOperationInvoker();
+        const handleSelect = useCallback(() => invokePromise(LayoutOperation.Open, {
+          subject: [
+            Devtools.Echo.Feeds
+          ]
+        }), [
+          invokePromise
+        ]);
+        return /* @__PURE__ */ React5.createElement(SpaceInfoPanel, {
+          space,
+          onSelectFeed: handleSelect,
+          onSelectPipeline: handleSelect
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/feeds`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Feeds,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(FeedsPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/objects`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Objects,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(ObjectsPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/schema`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Schema,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(SchemaPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/automerge`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Automerge,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(AutomergePanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/queues`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Queues,
+      component: () => /* @__PURE__ */ React5.createElement(QueuesPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/members`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Members,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(MembersPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/echo/metadata`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Echo.Metadata,
+      component: () => /* @__PURE__ */ React5.createElement(MetadataPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/mesh/signal`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Mesh.Signal,
+      component: () => /* @__PURE__ */ React5.createElement(SignalPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/mesh/swarm`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Mesh.Swarm,
+      component: () => /* @__PURE__ */ React5.createElement(SwarmPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/mesh/network`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Mesh.Network,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(NetworkPanel, {
+          space
+        });
+      }
+    }),
+    // TODO(wittjosiah): Remove?
+    // createSurface({
+    //   id: `${meta.id}/agent/dashboard`,
+    //   role: 'article',
+    //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
+    //   component: () => <DashboardPanel />,
+    // }),
+    Surface.create({
+      id: `${meta.id}/edge/dashboard`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Edge.Dashboard,
+      component: () => /* @__PURE__ */ React5.createElement(EdgeDashboardPanel, null)
+    }),
+    Surface.create({
+      id: `${meta.id}/edge/workflows`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Edge.Workflows,
+      component: () => {
+        const space = useCurrentSpace();
+        return /* @__PURE__ */ React5.createElement(WorkflowPanel, {
+          space
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/edge/traces`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Edge.Traces,
+      component: () => {
+        const space = useCurrentSpace();
+        const queueDxn = space?.properties.invocationTraceQueue?.dxn;
+        return /* @__PURE__ */ React5.createElement(InvocationTraceContainer, {
+          db: space?.db,
+          queueDxn,
+          detailAxis: "block"
+        });
+      }
+    }),
+    Surface.create({
+      id: `${meta.id}/edge/testing`,
+      role: "article",
+      filter: (data) => data.subject === Devtools.Edge.Testing,
+      component: () => {
+        const { invokePromise } = useOperationInvoker();
+        const onSpaceCreate = useCallback(async (space) => {
+          await space.waitUntilReady();
+          await invokePromise(SpaceOperation.Migrate, {
+            space
+          });
+          await space.db.flush();
+        }, [
+          invokePromise
+        ]);
+        const onScriptPluginOpen = useCallback(async (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
+            });
+          }
+          log2.info("script created", {
+            result: createResult
+          }, {
+            F: __dxlog_file2,
+            L: 397,
+            S: this,
+            C: (f, a) => f(...a)
+          });
+          if (createResult.data?.object?.id) {
+            await invokePromise(LayoutOperation.Open, {
+              subject: [
+                `${space.id}:${createResult.data.object.id}`
+              ]
+            });
+          }
+        }, [
+          invokePromise
+        ]);
+        return /* @__PURE__ */ React5.createElement(TestingPanel, {
+          onSpaceCreate,
+          onScriptPluginOpen
+        });
+      }
+    })
+  ]);
+}));
+export {
+  react_surface_default as default
+};
+//# sourceMappingURL=react-surface-FMVC5GPV.mjs.map