@dxos/plugin-devtools 0.12.0-next-2800d0376abcc62d5544afdd744b16b2b960434e → 0.13.0

package/dist/lib/capabilities.workerd.mjs

@@ -9,11 +9,11 @@ var setupDevtools = () => {
 	globalThis.composer ??= {};
 	globalThis.composer.changeStorageVersionInMetadata = async (version) => {
 		const { changeStorageVersionInMetadata } = await import("@dxos/client-services/testing");
-		const { createStorageObjects } = await import("@dxos/client-services");
+		const { Storage } = await import("@dxos/client-services");
 		const client = window.dxos.client;
 		const config = client.config;
 		await client.destroy();
-		const { storage } = createStorageObjects(config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}));
+		const { storage } = Storage.createStorageObjects(config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}));
 		await changeStorageVersionInMetadata(storage, version);
 		location.pathname = "/";
 	};

package/dist/lib/capabilities.workerd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport { create } from '@bufbuild/protobuf';\nimport * as Effect from 'effect/Effect';\n\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';\nimport { type Client } from '@dxos/react-client';\n\nimport { translations } from '#translations';\n\nconst setupDevtools = () => {\n  (globalThis as any).composer ??= {};\n\n  // Used to test how composer handles breaking protocol changes.\n  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {\n    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');\n    const { createStorageObjects } = await import('@dxos/client-services');\n    const client: Client = (window as any).dxos.client;\n    const config = client.config;\n    await client.destroy();\n    const { storage } = createStorageObjects(\n      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),\n    );\n    await changeStorageVersionInMetadata(storage, version);\n    location.pathname = '/';\n  };\n};\n\nexport const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>\n  Effect.sync(() => setupDevtools()),\n);\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const AppGraphBuilder = undefined;\nexport const PluginAsset = undefined;\nexport const ReactContext = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;;;;AAgBA,IAAM,sBAAsB;CAC1B,WAAoB,aAAa,CAAC;CAGlC,WAAoB,SAAS,iCAAiC,OAAO,YAAoB;EACvF,MAAM,EAAE,mCAAmC,MAAM,OAAO;EACxD,MAAM,EAAE,yBAAyB,MAAM,OAAO;EAC9C,MAAM,SAAkB,OAAe,KAAK;EAC5C,MAAM,SAAS,OAAO;EACtB,MAAM,OAAO,QAAQ;EACrB,MAAM,EAAE,YAAY,qBAClB,OAAO,QAAQ,SAAS,QAAQ,WAAW,OAAO,8BAA8B,CAAC,CAAC,CACpF;EACA,MAAM,+BAA+B,SAAS,OAAO;EACrD,SAAS,WAAW;CACtB;AACF;AAEA,IAAa,gBAAgB,WAAW,aAAa,kBAAkB,EAAE,UAAU,CAAC,EAAE,SACpF,OAAO,WAAW,cAAc,CAAC,CACnC;AAEA,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,kBAAkB,KAAA;AAC/B,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA;AAC5B,IAAa,eAAe,KAAA"}
+{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport { create } from '@bufbuild/protobuf';\nimport * as Effect from 'effect/Effect';\n\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport { Runtime_Client_StorageSchema } from '@dxos/protocols/buf/dxos/config_pb';\nimport { type Client } from '@dxos/react-client';\n\nimport { translations } from '#translations';\n\nconst setupDevtools = () => {\n  (globalThis as any).composer ??= {};\n\n  // Used to test how composer handles breaking protocol changes.\n  (globalThis as any).composer.changeStorageVersionInMetadata = async (version: number) => {\n    const { changeStorageVersionInMetadata } = await import('@dxos/client-services/testing');\n    const { Storage } = await import('@dxos/client-services');\n    const client: Client = (window as any).dxos.client;\n    const config = client.config;\n    await client.destroy();\n    const { storage } = Storage.createStorageObjects(\n      config.values?.runtime?.client?.storage ?? create(Runtime_Client_StorageSchema, {}),\n    );\n    await changeStorageVersionInMetadata(storage, version);\n    location.pathname = '/';\n  };\n};\n\nexport const SetupDevtools = Capability.inlineModule('setup-devtools', { provides: [] }, () =>\n  Effect.sync(() => setupDevtools()),\n);\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const AppGraphBuilder = undefined;\nexport const PluginAsset = undefined;\nexport const ReactContext = undefined;\nexport const ReactSurface = undefined;\n"],"mappings":";;;;;;;AAgBA,IAAM,sBAAsB;CAC1B,WAAoB,aAAa,CAAC;CAGlC,WAAoB,SAAS,iCAAiC,OAAO,YAAoB;EACvF,MAAM,EAAE,mCAAmC,MAAM,OAAO;EACxD,MAAM,EAAE,YAAY,MAAM,OAAO;EACjC,MAAM,SAAkB,OAAe,KAAK;EAC5C,MAAM,SAAS,OAAO;EACtB,MAAM,OAAO,QAAQ;EACrB,MAAM,EAAE,YAAY,QAAQ,qBAC1B,OAAO,QAAQ,SAAS,QAAQ,WAAW,OAAO,8BAA8B,CAAC,CAAC,CACpF;EACA,MAAM,+BAA+B,SAAS,OAAO;EACrD,SAAS,WAAW;CACtB;AACF;AAEA,IAAa,gBAAgB,WAAW,aAAa,kBAAkB,EAAE,UAAU,CAAC,EAAE,SACpF,OAAO,WAAW,cAAc,CAAC,CACnC;AAEA,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,kBAAkB,KAAA;AAC/B,IAAa,cAAc,KAAA;AAC3B,IAAa,eAAe,KAAA;AAC5B,IAAa,eAAe,KAAA"}

package/dist/lib/{chunk-CliPanel.mjs → chunk-CliArticle.mjs}

@@ -3,21 +3,22 @@ import * as Capability from "@dxos/app-framework/Capability";
 import * as Plugin from "@dxos/app-framework/Plugin";
 import { useEffect, useMemo } from "react";
 import * as Capabilities from "@dxos/app-framework/Capabilities";
-import { useCapabilities, usePluginManager } from "@dxos/app-framework/ui";
 import { Placeholder } from "@dxos/devtools";
 import { jsx } from "react/jsx-runtime";
+import * as Hooks from "@dxos/app-framework/Hooks";
 import { useClient } from "@dxos/react-client";
-import { Panel } from "@dxos/react-ui";
 import { Terminal } from "@dxos/react-ui-terminal";
+import * as Panel from "@dxos/react-ui/Panel";
+import * as Command from "effect/cli/Command";
+import * as Options from "effect/cli/Flag";
 import * as Layer from "effect/Layer";
-import * as Command from "effect/unstable/cli/Command";
-import * as Options from "effect/unstable/cli/Flag";
 import * as ActivationEvents from "@dxos/app-framework/ActivationEvents";
+import * as PluginManagerProvider from "@dxos/app-framework/PluginManagerProvider";
 import { CommandConfig } from "@dxos/cli-util";
-import { ClientService, ConfigService } from "@dxos/client";
+import { fromClient, fromConfig } from "@dxos/client";
 import * as Operation from "@dxos/compute/Operation";
-import { EffectEx } from "@dxos/effect";
-//#region src/containers/CliPanel/useCliApp.ts
+import * as EffectEx from "@dxos/effect/EffectEx";
+//#region src/containers/CliArticle/useCliApp.ts
 var OPERATIONS_UNAVAILABLE = "Operations are not available in the devtools terminal.";
 /**
 * Commands that create objects invoke operations, which this surface has no runtime for. Failing
@@ -44,9 +45,9 @@ var operationLayer = Layer.succeed(Operation.Service, {
 * Returns `undefined` until something contributes commands — there is no shell to offer yet.
 */
 var useCliApp = (client) => {
-	const manager = usePluginManager();
-	const commands = useCapabilities(Capabilities.Command);
-	const contributed = useCapabilities(Capabilities.Layer);
+	const manager = PluginManagerProvider.usePluginManager();
+	const commands = Hooks.useCapabilities(Capabilities.Command);
+	const contributed = Hooks.useCapabilities(Capabilities.Layer);
 	useEffect(() => {
 		EffectEx.runDetached(manager.activate(ActivationEvents.CommandsRequested));
 	}, [manager]);
@@ -54,15 +55,15 @@ var useCliApp = (client) => {
 		const [first, ...rest] = commands;
 		if (!first) return;
 		const command = Command.make("dx").pipe(Command.withSharedFlags({
-			json: Options.boolean("json").pipe(Options.withDescription("JSON output.")),
-			verbose: Options.boolean("verbose").pipe(Options.withAlias("v"), Options.withDescription("Verbose output."))
+			json: Options.Boolean("json").pipe(Options.withDefault(false), Options.withDescription("JSON output.")),
+			verbose: Options.Boolean("verbose").pipe(Options.withDefault(false), Options.withAlias("v"), Options.withDescription("Verbose output."))
 		}), Command.withSubcommands([first, ...rest]), Command.provide((input) => Layer.succeed(CommandConfig, {
 			json: "json" in input ? input.json : false,
 			verbose: "verbose" in input ? input.verbose : false,
 			profile: "default",
 			logLevel: "info"
 		})));
-		const hostLayer = Layer.mergeAll(ClientService.fromClient(client), ConfigService.fromConfig(client.config), Layer.succeed(Plugin.Service, manager), Layer.succeed(Capability.Service, manager.capabilities), operationLayer);
+		const hostLayer = Layer.mergeAll(fromClient(client), fromConfig(client.config), Layer.succeed(Plugin.Service, manager), Layer.succeed(Capability.Service, manager.capabilities), operationLayer);
 		return {
 			command,
 			layer: Layer.orDie(Layer.mergeAll(hostLayer, ...contributed))
@@ -75,7 +76,7 @@ var useCliApp = (client) => {
 	]);
 };
 //#endregion
-//#region src/containers/CliPanel/CliPanel.tsx
+//#region src/containers/CliArticle/CliArticle.tsx
 var BOLD = "\x1B[1m";
 var DIM = "\x1B[2m";
 var RESET = "\x1B[0m";
@@ -87,17 +88,20 @@ var BANNER = `${BOLD}DXOS CLI${RESET}\n${DIM}The dx commands, running against th
 * services are built once per client, so state the handlers hold survives between commands the way
 * it does in a long-lived shell.
 */
-var CliPanel = () => {
+var CliArticle = ({ role }) => {
 	const cli = useCliApp(useClient());
-	return /* @__PURE__ */ jsx(Panel.Root, { children: /* @__PURE__ */ jsx(Panel.Content, { children: cli ? /* @__PURE__ */ jsx(Terminal, {
-		command: cli.command,
-		layer: cli.layer,
-		name: "dx",
-		banner: BANNER
-	}) : /* @__PURE__ */ jsx(Placeholder, { label: "No commands" }) }) });
+	return /* @__PURE__ */ jsx(Panel.Root, {
+		role,
+		children: /* @__PURE__ */ jsx(Panel.Body, { children: cli ? /* @__PURE__ */ jsx(Terminal, {
+			command: cli.command,
+			layer: cli.layer,
+			name: "dx",
+			banner: BANNER
+		}) : /* @__PURE__ */ jsx(Placeholder, { label: "No commands" }) })
+	});
 };
-CliPanel.displayName = "CliPanel";
+CliArticle.displayName = "CliArticle";
 //#endregion
-export { CliPanel, CliPanel as default };
+export { CliArticle, CliArticle as default };
 
-//# sourceMappingURL=chunk-CliPanel.mjs.map
+//# sourceMappingURL=chunk-CliArticle.mjs.map

package/dist/lib/chunk-CliArticle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-CliArticle.mjs","names":[],"sources":["../../src/containers/CliArticle/useCliApp.ts","../../src/containers/CliArticle/CliArticle.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Command from 'effect/cli/Command';\nimport * as Options from 'effect/cli/Flag';\nimport * as Effect from 'effect/Effect';\nimport * as Layer from 'effect/Layer';\nimport { useEffect, useMemo } from 'react';\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Capabilities from '@dxos/app-framework/Capabilities';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as Hooks from '@dxos/app-framework/Hooks';\nimport * as Plugin from '@dxos/app-framework/Plugin';\nimport * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';\nimport { CommandConfig, type CommandServices } from '@dxos/cli-util';\nimport { type Client, fromClient, fromConfig } from '@dxos/client';\nimport * as Operation from '@dxos/compute/Operation';\nimport * as EffectEx from '@dxos/effect/EffectEx';\n\nconst OPERATIONS_UNAVAILABLE = 'Operations are not available in the devtools terminal.';\n\n/**\n * Commands that create objects invoke operations, which this surface has no runtime for. Failing\n * with a stated reason beats the bare \"Service not found\" a missing layer would produce.\n */\nconst operationLayer = Layer.succeed(Operation.Service, {\n  invoke: () => Effect.die(OPERATIONS_UNAVAILABLE),\n  schedule: () => Effect.die(OPERATIONS_UNAVAILABLE),\n  invokePromise: async () => ({ error: new Error(OPERATIONS_UNAVAILABLE) }),\n});\n\n/**\n * Builds the `dx` command tree and the services its handlers need.\n *\n * Mounting is the demand signal: command modules are gated on `CommandsRequested`, which nothing\n * else in the app fires, so a plugin's commands stay off the critical path until a terminal opens.\n * The capability is read through its atom, so commands appear as they activate and enabling or\n * disabling a plugin later rebuilds the tree rather than leaving the terminal on the set that\n * existed when it mounted.\n *\n * The root mirrors the binary's, minus the options that only mean something on a filesystem\n * (`--config`, `--profile`); everything else resolves the same way, including `--space-id`\n * defaulting to the first available space.\n *\n * Returns `undefined` until something contributes commands — there is no shell to offer yet.\n */\nexport const useCliApp = (client: Client) => {\n  const manager = PluginManagerProvider.usePluginManager();\n  const commands = Hooks.useCapabilities(Capabilities.Command);\n  const contributed = Hooks.useCapabilities(Capabilities.Layer);\n\n  useEffect(() => {\n    EffectEx.runDetached(manager.activate(ActivationEvents.CommandsRequested));\n  }, [manager]);\n\n  return useMemo(() => {\n    // Destructured rather than passed as an array so the non-empty shape `withSubcommands` requires\n    // is carried by the type instead of asserted.\n    const [first, ...rest] = commands;\n    if (!first) {\n      return undefined;\n    }\n\n    const command = Command.make('dx').pipe(\n      // Shared so they parse anywhere in the line — a plain command config is only read when `dx`\n      // itself is the leaf.\n      Command.withSharedFlags({\n        json: Options.Boolean('json').pipe(Options.withDefault(false), Options.withDescription('JSON output.')),\n        verbose: Options.Boolean('verbose').pipe(\n          Options.withDefault(false),\n          Options.withAlias('v'),\n          Options.withDescription('Verbose output.'),\n        ),\n      }),\n      Command.withSubcommands([first, ...rest]),\n      // After the subcommands so the config reaches them: `provide` wraps the handler it is applied\n      // to, and `withSubcommands` replaces that handler with one that dispatches to the children.\n      // The input widens to a union across the tree, hence the presence checks.\n      Command.provide((input) =>\n        Layer.succeed(CommandConfig, {\n          json: 'json' in input ? input.json : false,\n          verbose: 'verbose' in input ? input.verbose : false,\n          profile: 'default',\n          logLevel: 'info',\n        }),\n      ),\n    );\n\n    // Annotated so a service this host owes is a build error naming it, rather than a\n    // \"Service not found\" the first time someone runs the command that needed it.\n    const hostLayer: Layer.Layer<CommandServices, never, never> = Layer.mergeAll(\n      fromClient(client),\n      fromConfig(client.config),\n      Layer.succeed(Plugin.Service, manager),\n      Layer.succeed(Capability.Service, manager.capabilities),\n      operationLayer,\n    );\n\n    // Plugins carry anything further their own commands need. A contributed layer may fail to\n    // build, and the shell runs on a fiber with nowhere to report that, so it dies here instead\n    // of being smuggled into the terminal as an unhandled error channel.\n    const layer = Layer.orDie(Layer.mergeAll(hostLayer, ...contributed));\n\n    return { command, layer };\n  }, [client, manager, commands, contributed]);\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Placeholder } from '@dxos/devtools';\nimport { useClient } from '@dxos/react-client';\nimport { Terminal } from '@dxos/react-ui-terminal';\nimport * as Panel from '@dxos/react-ui/Panel';\n\nimport { useCliApp } from './useCliApp.ts';\n\nconst BOLD = '\\x1b[1m';\nconst DIM = '\\x1b[2m';\nconst RESET = '\\x1b[0m';\n\nconst BANNER = `${BOLD}DXOS CLI${RESET}\\n${DIM}The dx commands, running against this client. Type \"help\" for the list.${RESET}`;\n\n/**\n * Runs the `dx` CLI against the client backing this app.\n *\n * The command tree is assembled from the commands the installed plugins contribute, and it and its\n * services are built once per client, so state the handlers hold survives between commands the way\n * it does in a long-lived shell.\n */\nexport const CliArticle = ({ role }: { role?: string }) => {\n  const client = useClient();\n  const cli = useCliApp(client);\n\n  // No ScrollArea: xterm owns its own viewport and scrollback.\n  return (\n    <Panel.Root role={role}>\n      <Panel.Body>\n        {cli ? (\n          <Terminal command={cli.command} layer={cli.layer} name='dx' banner={BANNER} />\n        ) : (\n          <Placeholder label='No commands' />\n        )}\n      </Panel.Body>\n    </Panel.Root>\n  );\n};\n\nCliArticle.displayName = 'CliArticle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,yBAAyB;;;;;AAM/B,IAAM,iBAAiB,MAAM,QAAQ,UAAU,SAAS;CACtD,cAAc,OAAO,IAAI,sBAAsB;CAC/C,gBAAgB,OAAO,IAAI,sBAAsB;CACjD,eAAe,aAAa,EAAE,uBAAO,IAAI,MAAM,sBAAsB,EAAE;AACzE,CAAC;;;;;;;;;;;;;;;;AAiBD,IAAa,aAAa,WAAmB;CAC3C,MAAM,UAAU,sBAAsB,iBAAiB;CACvD,MAAM,WAAW,MAAM,gBAAgB,aAAa,OAAO;CAC3D,MAAM,cAAc,MAAM,gBAAgB,aAAa,KAAK;CAE5D,gBAAgB;EACd,SAAS,YAAY,QAAQ,SAAS,iBAAiB,iBAAiB,CAAC;CAC3E,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,cAAc;EAGnB,MAAM,CAAC,OAAO,GAAG,QAAQ;EACzB,IAAI,CAAC,OACH;EAGF,MAAM,UAAU,QAAQ,KAAK,IAAI,CAAC,CAAC,KAGjC,QAAQ,gBAAgB;GACtB,MAAM,QAAQ,QAAQ,MAAM,CAAC,CAAC,KAAK,QAAQ,YAAY,KAAK,GAAG,QAAQ,gBAAgB,cAAc,CAAC;GACtG,SAAS,QAAQ,QAAQ,SAAS,CAAC,CAAC,KAClC,QAAQ,YAAY,KAAK,GACzB,QAAQ,UAAU,GAAG,GACrB,QAAQ,gBAAgB,iBAAiB,CAC3C;EACF,CAAC,GACD,QAAQ,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,GAIxC,QAAQ,SAAS,UACf,MAAM,QAAQ,eAAe;GAC3B,MAAM,UAAU,QAAQ,MAAM,OAAO;GACrC,SAAS,aAAa,QAAQ,MAAM,UAAU;GAC9C,SAAS;GACT,UAAU;EACZ,CAAC,CACH,CACF;EAIA,MAAM,YAAwD,MAAM,SAClE,WAAW,MAAM,GACjB,WAAW,OAAO,MAAM,GACxB,MAAM,QAAQ,OAAO,SAAS,OAAO,GACrC,MAAM,QAAQ,WAAW,SAAS,QAAQ,YAAY,GACtD,cACF;EAOA,OAAO;GAAE;GAAS,OAFJ,MAAM,MAAM,MAAM,SAAS,WAAW,GAAG,WAAW,CAEhD;EAAM;CAC1B,GAAG;EAAC;EAAQ;EAAS;EAAU;CAAW,CAAC;AAC7C;;;AC9FA,IAAM,OAAO;AACb,IAAM,MAAM;AACZ,IAAM,QAAQ;AAEd,IAAM,SAAS,GAAG,KAAK,UAAU,MAAM,IAAI,IAAI,yEAAyE;;;;;;;;AASxH,IAAa,cAAc,EAAE,WAA8B;CAEzD,MAAM,MAAM,UADG,UACO,CAAM;CAG5B,OACE,oBAAC,MAAM,MAAP;EAAkB;EAChB,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,MACC,oBAAC,UAAD;GAAU,SAAS,IAAI;GAAS,OAAO,IAAI;GAAO,MAAK;GAAK,QAAQ;EAAS,CAAA,IAE7E,oBAAC,aAAD,EAAa,OAAM,cAAe,CAAA,EAE1B,CAAA;CACF,CAAA;AAEhB;AAEA,WAAW,cAAc"}

package/dist/lib/chunk-DebugGraph.mjs

@@ -1,17 +1,21 @@
 import "react";
 import { Tree } from "@dxos/devtools";
 import { jsx } from "react/jsx-runtime";
-import { Panel, ScrollArea } from "@dxos/react-ui";
+import * as Panel from "@dxos/react-ui/Panel";
 import * as AppGraph from "@dxos/app-graph/AppGraph";
+import * as ScrollArea from "@dxos/react-ui/ScrollArea";
 //#region src/containers/DebugGraph/DebugGraph.tsx
-var DebugGraph = ({ graph, root }) => {
-	return /* @__PURE__ */ jsx(Panel.Root, { children: /* @__PURE__ */ jsx(Panel.Content, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
-			orientation: "all",
-			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Tree, { data: AppGraph.toJSON(graph, root) }) })
+var DebugGraph = ({ role, graph, root }) => {
+	return /* @__PURE__ */ jsx(Panel.Root, {
+		role,
+		children: /* @__PURE__ */ jsx(Panel.Body, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+				orientation: "all",
+				children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Tree, { data: AppGraph.toJSON(graph, root) }) })
+			})
 		})
-	}) });
+	});
 };
 DebugGraph.displayName = "DebugGraph";
 //#endregion

package/dist/lib/chunk-DebugGraph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-DebugGraph.mjs","names":[],"sources":["../../src/containers/DebugGraph/DebugGraph.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport * as AppGraph from '@dxos/app-graph/AppGraph';\nimport { Tree } from '@dxos/devtools';\nimport { Panel, ScrollArea } from '@dxos/react-ui';\n\nexport type DebugGraphProps = { graph: AppGraph.Graph; root: string };\n\nexport const DebugGraph = ({ graph, root }: DebugGraphProps) => {\n  return (\n    <Panel.Root>\n      <Panel.Content asChild>\n        <ScrollArea.Root orientation='all'>\n          <ScrollArea.Viewport>\n            <Tree data={AppGraph.toJSON(graph, root)} />\n          </ScrollArea.Viewport>\n        </ScrollArea.Root>\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n\nDebugGraph.displayName = 'DebugGraph';\n"],"mappings":";;;;;;AAYA,IAAa,cAAc,EAAE,OAAO,WAA4B;CAC9D,OACE,oBAAC,MAAM,MAAP,EAAA,UACE,oBAAC,MAAM,SAAP;EAAe,SAAA;EACb,UAAA,oBAAC,WAAW,MAAZ;GAAiB,aAAY;GAC3B,UAAA,oBAAC,WAAW,UAAZ,EAAA,UACE,oBAAC,MAAD,EAAM,MAAM,SAAS,OAAO,OAAO,IAAI,EAAI,CAAA,EACxB,CAAA;EACN,CAAA;CACJ,CAAA,EACL,CAAA;AAEhB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"chunk-DebugGraph.mjs","names":[],"sources":["../../src/containers/DebugGraph/DebugGraph.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport * as AppGraph from '@dxos/app-graph/AppGraph';\nimport { Tree } from '@dxos/devtools';\nimport * as Panel from '@dxos/react-ui/Panel';\nimport * as ScrollArea from '@dxos/react-ui/ScrollArea';\n\nexport type DebugGraphProps = { role?: string; graph: AppGraph.Graph; root: string };\n\nexport const DebugGraph = ({ role, graph, root }: DebugGraphProps) => {\n  return (\n    <Panel.Root role={role}>\n      <Panel.Body asChild>\n        <ScrollArea.Root orientation='all'>\n          <ScrollArea.Viewport>\n            <Tree data={AppGraph.toJSON(graph, root)} />\n          </ScrollArea.Viewport>\n        </ScrollArea.Root>\n      </Panel.Body>\n    </Panel.Root>\n  );\n};\n\nDebugGraph.displayName = 'DebugGraph';\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EAAE,MAAM,OAAO,WAA4B;CACpE,OACE,oBAAC,MAAM,MAAP;EAAkB;EAChB,UAAA,oBAAC,MAAM,MAAP;GAAY,SAAA;GACV,UAAA,oBAAC,WAAW,MAAZ;IAAiB,aAAY;IAC3B,UAAA,oBAAC,WAAW,UAAZ,EAAA,UACE,oBAAC,MAAD,EAAM,MAAM,SAAS,OAAO,OAAO,IAAI,EAAI,CAAA,EACxB,CAAA;GACN,CAAA;EACP,CAAA;CACF,CAAA;AAEhB;AAEA,WAAW,cAAc"}

package/dist/lib/chunk-DevtoolsCards.mjs

@@ -0,0 +1,108 @@
+import { Devtools } from "#types";
+import { useCallback, useMemo, useState } from "react";
+import * as Surface from "@dxos/app-framework/Surface";
+import { EdgeCard, IndexerCard, QueriesCard, SurfaceProfilerCard, SwarmTraceCard, SyncCard, useEdgeStatus, useIndexerRows, useQueryMetrics, useSwarmTrace, useSyncRows } from "@dxos/devtools";
+import { jsx } from "react/jsx-runtime";
+import * as AppSurface from "@dxos/app-toolkit/AppSurface";
+import * as Hooks from "@dxos/app-framework/Hooks";
+import * as DebugOperation from "@dxos/plugin-debug/DebugOperation";
+import { SpaceState, useSpaces } from "@dxos/react-client/echo";
+//#region src/capabilities/DevtoolsCards.tsx
+/** Surfaces hosting the debug tooling; they and everything rendered inside them are not listed. */
+var DEBUG_HOSTS = /* @__PURE__ */ new Set(["devtoolsOverview", "debugDrawer"]);
+/** Whether a mounted surface is part of the debug tooling rather than the app being inspected. */
+var isDebugSurface = ({ id, role, ancestors }) => role.endsWith(".devtoolsOverview") || id !== void 0 && DEBUG_HOSTS.has(id) || ancestors.some((ancestor) => DEBUG_HOSTS.has(ancestor));
+var isDevtoolsCardData = (data) => typeof data === "object" && data !== null && "stats" in data && "surfaceProfilerStats" in data;
+/**
+* The card role narrowed to the stack's data. `Surface.makeFilter` types its data by the token, so
+* the binding is built directly, as `AppSurface.subject` does.
+*/
+var devtoolsCard = { bindings: [{
+	role: AppSurface.DevtoolsOverview.role,
+	guard: isDevtoolsCardData
+}] };
+var EdgeCardSurface = ({ stats }) => {
+	const { status, refresh, copy } = useEdgeStatus();
+	const spaces = useSpaces({ all: true });
+	const spaceNames = useMemo(() => {
+		const names = {};
+		for (const space of spaces) {
+			const name = space.state.get() === SpaceState.SPACE_READY ? space.properties.name : void 0;
+			if (typeof name === "string") names[space.id] = name;
+		}
+		return names;
+	}, [spaces]);
+	return /* @__PURE__ */ jsx(EdgeCard, {
+		edge: stats.edge,
+		status,
+		spaceNames,
+		onRefresh: refresh,
+		onCopy: copy
+	});
+};
+/** The profiler card with the surface highlight overlay's flag, which lives on `window`, mirrored in state. */
+var SurfaceProfilerCardSurface = ({ surfaceProfilerStats, onClearSurfaceProfiler }) => {
+	const [debug, setDebug] = useState(() => Surface.isDebugEnabled());
+	const handleDebugChange = useCallback((enabled) => {
+		Surface.setDebug(enabled);
+		setDebug(enabled);
+	}, []);
+	const selected = Surface.useSelected();
+	const mounted = Surface.useMounted();
+	const detail = useMemo(() => {
+		if (!selected) return;
+		const metrics = new Map(Surface.getMetrics().map((metric) => [metric.id, metric]));
+		return mounted.filter((surface) => surface.role === selected && !isDebugSurface(surface)).map(({ id, role, data }) => ({
+			id,
+			data,
+			metric: metrics.get(`surface/${id}/${role}`)
+		}));
+	}, [selected, mounted]);
+	return /* @__PURE__ */ jsx(SurfaceProfilerCard, {
+		stats: surfaceProfilerStats,
+		debug,
+		onDebugChange: handleDebugChange,
+		onClear: onClearSurfaceProfiler,
+		selected,
+		onSelect: Surface.select,
+		detail
+	});
+};
+var SwarmTraceCardSurface = () => {
+	const { messages, spaceCount, available, clear } = useSwarmTrace();
+	return /* @__PURE__ */ jsx(SwarmTraceCard, {
+		messages,
+		spaceCount,
+		available,
+		onClear: clear
+	});
+};
+var SyncCardSurface = () => {
+	const { spaces, copy } = useSyncRows();
+	return /* @__PURE__ */ jsx(SyncCard, {
+		spaces,
+		onCopy: copy
+	});
+};
+var IndexerCardSurface = () => {
+	const { spaces, refresh, copy } = useIndexerRows();
+	return /* @__PURE__ */ jsx(IndexerCard, {
+		spaces,
+		onRefresh: refresh,
+		onCopy: copy
+	});
+};
+/** The slowest queries; the header button shows every query on the devtools Queries page. */
+var QueriesCardSurface = () => {
+	const { queries } = useQueryMetrics();
+	const { invokePromise } = Hooks.useOperationInvoker();
+	const handleOpen = useCallback(() => void invokePromise(DebugOperation.OpenPage, { nodeId: Devtools.getNodePath(Devtools.Echo.Queries) }), [invokePromise]);
+	return /* @__PURE__ */ jsx(QueriesCard, {
+		queries,
+		onOpen: handleOpen
+	});
+};
+//#endregion
+export { SwarmTraceCardSurface as a, isDebugSurface as c, SurfaceProfilerCardSurface as i, IndexerCardSurface as n, SyncCardSurface as o, QueriesCardSurface as r, devtoolsCard as s, EdgeCardSurface as t };
+
+//# sourceMappingURL=chunk-DevtoolsCards.mjs.map

package/dist/lib/chunk-DevtoolsCards.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-DevtoolsCards.mjs","names":[],"sources":["../../src/capabilities/DevtoolsCards.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// Card surfaces whose data comes from a hook rather than the stack's `DevtoolsCardData`.\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport * as Hooks from '@dxos/app-framework/Hooks';\nimport * as Surface from '@dxos/app-framework/Surface';\nimport * as AppSurface from '@dxos/app-toolkit/AppSurface';\nimport {\n  EdgeCard,\n  IndexerCard,\n  QueriesCard,\n  type Stats,\n  SurfaceProfilerCard,\n  type SurfaceProfilerStats,\n  SwarmTraceCard,\n  SyncCard,\n  useEdgeStatus,\n  useIndexerRows,\n  useQueryMetrics,\n  useSwarmTrace,\n  useSyncRows,\n} from '@dxos/devtools';\nimport * as DebugOperation from '@dxos/plugin-debug/DebugOperation';\nimport { SpaceState, useSpaces } from '@dxos/react-client/echo';\n\nimport { Devtools } from '#types';\n\n/** Surfaces hosting the debug tooling; they and everything rendered inside them are not listed. */\nconst DEBUG_HOSTS = new Set(['devtoolsOverview', 'debugDrawer']);\n\n/** Whether a mounted surface is part of the debug tooling rather than the app being inspected. */\nexport const isDebugSurface = ({ id, role, ancestors }: Surface.Mounted): boolean =>\n  role.endsWith('.devtoolsOverview') ||\n  (id !== undefined && DEBUG_HOSTS.has(id)) ||\n  ancestors.some((ancestor) => DEBUG_HOSTS.has(ancestor));\n\n/** Data the stats stack passes to every `AppSurface.DevtoolsOverview` card. */\nexport type DevtoolsCardData = {\n  stats: Stats;\n  surfaceProfilerStats: SurfaceProfilerStats[];\n  onClearSurfaceProfiler?: () => void;\n};\n\nexport const isDevtoolsCardData = (data: unknown): data is DevtoolsCardData =>\n  typeof data === 'object' && data !== null && 'stats' in data && 'surfaceProfilerStats' in data;\n\n/**\n * The card role narrowed to the stack's data. `Surface.makeFilter` types its data by the token, so\n * the binding is built directly, as `AppSurface.subject` does.\n */\nexport const devtoolsCard: Surface.Filter<DevtoolsCardData> = {\n  bindings: [{ role: AppSurface.DevtoolsOverview.role, guard: isDevtoolsCardData }],\n};\n\nexport type EdgeCardSurfaceProps = Pick<DevtoolsCardData, 'stats'>;\n\nexport const EdgeCardSurface = ({ stats }: EdgeCardSurfaceProps) => {\n  const { status, refresh, copy } = useEdgeStatus();\n  const spaces = useSpaces({ all: true });\n  const spaceNames = useMemo(() => {\n    const names: Record<string, string> = {};\n    for (const space of spaces) {\n      const name = space.state.get() === SpaceState.SPACE_READY ? space.properties.name : undefined;\n      if (typeof name === 'string') {\n        names[space.id] = name;\n      }\n    }\n    return names;\n  }, [spaces]);\n  return <EdgeCard edge={stats.edge} status={status} spaceNames={spaceNames} onRefresh={refresh} onCopy={copy} />;\n};\n\nexport type SurfaceProfilerCardSurfaceProps = Pick<DevtoolsCardData, 'surfaceProfilerStats' | 'onClearSurfaceProfiler'>;\n\n/** The profiler card with the surface highlight overlay's flag, which lives on `window`, mirrored in state. */\nexport const SurfaceProfilerCardSurface = ({\n  surfaceProfilerStats,\n  onClearSurfaceProfiler,\n}: SurfaceProfilerCardSurfaceProps) => {\n  const [debug, setDebug] = useState(() => Surface.isDebugEnabled());\n  const handleDebugChange = useCallback((enabled: boolean) => {\n    Surface.setDebug(enabled);\n    setDebug(enabled);\n  }, []);\n\n  // The selected role's surfaces with their data and dispatch metrics, following mounts and unmounts.\n  const selected = Surface.useSelected();\n  const mounted = Surface.useMounted();\n  const detail = useMemo(() => {\n    if (!selected) {\n      return undefined;\n    }\n    const metrics = new Map(Surface.getMetrics().map((metric) => [metric.id, metric]));\n    return mounted\n      .filter((surface) => surface.role === selected && !isDebugSurface(surface))\n      .map(({ id, role, data }) => ({ id, data, metric: metrics.get(`surface/${id}/${role}`) }));\n  }, [selected, mounted]);\n\n  return (\n    <SurfaceProfilerCard\n      stats={surfaceProfilerStats}\n      debug={debug}\n      onDebugChange={handleDebugChange}\n      onClear={onClearSurfaceProfiler}\n      selected={selected}\n      onSelect={Surface.select}\n      detail={detail}\n    />\n  );\n};\n\nexport const SwarmTraceCardSurface = () => {\n  const { messages, spaceCount, available, clear } = useSwarmTrace();\n  return <SwarmTraceCard messages={messages} spaceCount={spaceCount} available={available} onClear={clear} />;\n};\n\nexport const SyncCardSurface = () => {\n  const { spaces, copy } = useSyncRows();\n  return <SyncCard spaces={spaces} onCopy={copy} />;\n};\n\nexport const IndexerCardSurface = () => {\n  const { spaces, refresh, copy } = useIndexerRows();\n  return <IndexerCard spaces={spaces} onRefresh={refresh} onCopy={copy} />;\n};\n\n/** The slowest queries; the header button shows every query on the devtools Queries page. */\nexport const QueriesCardSurface = () => {\n  const { queries } = useQueryMetrics();\n  const { invokePromise } = Hooks.useOperationInvoker();\n  const handleOpen = useCallback(\n    () => void invokePromise(DebugOperation.OpenPage, { nodeId: Devtools.getNodePath(Devtools.Echo.Queries) }),\n    [invokePromise],\n  );\n  return <QueriesCard queries={queries} onOpen={handleOpen} />;\n};\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,8BAAc,IAAI,IAAI,CAAC,oBAAoB,aAAa,CAAC;;AAG/D,IAAa,kBAAkB,EAAE,IAAI,MAAM,gBACzC,KAAK,SAAS,mBAAmB,KAChC,OAAO,KAAA,KAAa,YAAY,IAAI,EAAE,KACvC,UAAU,MAAM,aAAa,YAAY,IAAI,QAAQ,CAAC;AASxD,IAAa,sBAAsB,SACjC,OAAO,SAAS,YAAY,SAAS,QAAQ,WAAW,QAAQ,0BAA0B;;;;;AAM5F,IAAa,eAAiD,EAC5D,UAAU,CAAC;CAAE,MAAM,WAAW,iBAAiB;CAAM,OAAO;AAAmB,CAAC,EAClF;AAIA,IAAa,mBAAmB,EAAE,YAAkC;CAClE,MAAM,EAAE,QAAQ,SAAS,SAAS,cAAc;CAChD,MAAM,SAAS,UAAU,EAAE,KAAK,KAAK,CAAC;CACtC,MAAM,aAAa,cAAc;EAC/B,MAAM,QAAgC,CAAC;EACvC,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,OAAO,MAAM,MAAM,IAAI,MAAM,WAAW,cAAc,MAAM,WAAW,OAAO,KAAA;GACpF,IAAI,OAAO,SAAS,UAClB,MAAM,MAAM,MAAM;EAEtB;EACA,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CACX,OAAO,oBAAC,UAAD;EAAU,MAAM,MAAM;EAAc;EAAoB;EAAY,WAAW;EAAS,QAAQ;CAAO,CAAA;AAChH;;AAKA,IAAa,8BAA8B,EACzC,sBACA,6BACqC;CACrC,MAAM,CAAC,OAAO,YAAY,eAAe,QAAQ,eAAe,CAAC;CACjE,MAAM,oBAAoB,aAAa,YAAqB;EAC1D,QAAQ,SAAS,OAAO;EACxB,SAAS,OAAO;CAClB,GAAG,CAAC,CAAC;CAGL,MAAM,WAAW,QAAQ,YAAY;CACrC,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,UACH;EAEF,MAAM,UAAU,IAAI,IAAI,QAAQ,WAAW,CAAC,CAAC,KAAK,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;EACjF,OAAO,QACJ,QAAQ,YAAY,QAAQ,SAAS,YAAY,CAAC,eAAe,OAAO,CAAC,CAAA,CACzE,KAAK,EAAE,IAAI,MAAM,YAAY;GAAE;GAAI;GAAM,QAAQ,QAAQ,IAAI,WAAW,GAAG,GAAG,MAAM;EAAE,EAAE;CAC7F,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,OAAO;EACA;EACP,eAAe;EACf,SAAS;EACC;EACV,UAAU,QAAQ;EACV;CACT,CAAA;AAEL;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,cAAc;CACjE,OAAO,oBAAC,gBAAD;EAA0B;EAAsB;EAAuB;EAAW,SAAS;CAAQ,CAAA;AAC5G;AAEA,IAAa,wBAAwB;CACnC,MAAM,EAAE,QAAQ,SAAS,YAAY;CACrC,OAAO,oBAAC,UAAD;EAAkB;EAAQ,QAAQ;CAAO,CAAA;AAClD;AAEA,IAAa,2BAA2B;CACtC,MAAM,EAAE,QAAQ,SAAS,SAAS,eAAe;CACjD,OAAO,oBAAC,aAAD;EAAqB;EAAQ,WAAW;EAAS,QAAQ;CAAO,CAAA;AACzE;;AAGA,IAAa,2BAA2B;CACtC,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EAAE,kBAAkB,MAAM,oBAAoB;CACpD,MAAM,aAAa,kBACX,KAAK,cAAc,eAAe,UAAU,EAAE,QAAQ,SAAS,YAAY,SAAS,KAAK,OAAO,EAAE,CAAC,GACzG,CAAC,aAAa,CAChB;CACA,OAAO,oBAAC,aAAD;EAAsB;EAAS,QAAQ;CAAa,CAAA;AAC7D"}

package/dist/lib/chunk-DevtoolsOverviewContainer.mjs

@@ -1,37 +1,74 @@
-import { useCallback, useMemo } from "react";
-import { Surface } from "@dxos/app-framework/ui";
+import { c as isDebugSurface } from "./chunk-DevtoolsCards.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as Surface from "@dxos/app-framework/Surface";
 import { StatsPanel, useStats } from "@dxos/devtools";
 import { jsx } from "react/jsx-runtime";
-import { AppSurface } from "@dxos/app-toolkit/ui";
+import * as AppSurface from "@dxos/app-toolkit/AppSurface";
 //#region src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx
+/**
+* The stats stack: one poll of the client's stats, fanned out to every card contributed to the role.
+* The profiler and dispatch metrics are sampled on each refresh rather than subscribed to: this
+* container is itself a profiled surface, so a live subscription would record an entry for every
+* re-render the notification caused and loop at frame rate, flushing every other surface out of the
+* profiler's window — which is what made the Surfaces card's count wander with no interaction.
+*/
 var DevtoolsOverviewContainer = () => {
 	const [stats, refreshStats] = useStats();
-	const surfaceProfilerStats = Surface.useProfilerStats();
-	const surfaceMetrics = Surface.useMetrics();
+	const getProfilerStats = Surface.useProfilerSnapshot();
 	const clearSurfaceProfiler = Surface.useProfilerClear();
-	const handleClearSurfaceProfiler = useCallback(() => {
-		clearSurfaceProfiler?.();
-		Surface.clearMetrics();
-	}, [clearSurfaceProfiler]);
-	const enrichedStats = useMemo(() => {
-		const byId = new Map(surfaceMetrics.map((metric) => [metric.id, metric]));
-		return surfaceProfilerStats.map((stat) => {
-			const metric = byId.get(stat.id);
+	const mounted = Surface.useMounted();
+	const [surfaceProfilerStats, setSurfaceProfilerStats] = useState([]);
+	const sampleProfiler = useCallback(() => {
+		const timings = new Map(getProfilerStats().map((stat) => [stat.id, stat]));
+		const metrics = new Map(Surface.getMetrics().map((metric) => [metric.id, metric]));
+		setSurfaceProfilerStats(mounted.filter((surface) => !isDebugSurface(surface)).map(({ id, role }) => {
+			const profilerId = `surface/${id}/${role}`;
+			const timing = timings.get(profilerId) ?? {
+				id: profilerId,
+				mountCount: 0,
+				updateCount: 0,
+				totalRenders: 0,
+				avgActualDuration: 0,
+				maxActualDuration: 0,
+				avgBaseDuration: 0,
+				lastActualDuration: 0,
+				lastCommitTime: 0
+			};
+			const metric = metrics.get(profilerId);
 			return metric ? {
-				...stat,
+				...timing,
 				candidates: metric.candidates,
 				truncated: metric.truncated,
 				errors: metric.errors,
 				dataUnstable: metric.dataUnstable
-			} : stat;
-		});
-	}, [surfaceProfilerStats, surfaceMetrics]);
-	return /* @__PURE__ */ jsx(StatsPanel, {
+			} : timing;
+		}).sort((a, b) => b.maxActualDuration - a.maxActualDuration || a.id.localeCompare(b.id)));
+	}, [getProfilerStats, mounted]);
+	useEffect(sampleProfiler, [sampleProfiler]);
+	const handleRefresh = useCallback(() => {
+		refreshStats();
+		sampleProfiler();
+	}, [refreshStats, sampleProfiler]);
+	const handleClearSurfaceProfiler = useCallback(() => {
+		clearSurfaceProfiler?.();
+		Surface.clearMetrics();
+		sampleProfiler();
+	}, [clearSurfaceProfiler, sampleProfiler]);
+	const data = useMemo(() => ({
 		stats,
-		surfaceProfilerStats: enrichedStats,
-		onRefresh: refreshStats,
-		onClearSurfaceProfiler: handleClearSurfaceProfiler,
-		children: /* @__PURE__ */ jsx(Surface.Surface, { type: AppSurface.DevtoolsOverview })
+		surfaceProfilerStats,
+		onClearSurfaceProfiler: handleClearSurfaceProfiler
+	}), [
+		stats,
+		surfaceProfilerStats,
+		handleClearSurfaceProfiler
+	]);
+	return /* @__PURE__ */ jsx(StatsPanel, {
+		onRefresh: handleRefresh,
+		children: /* @__PURE__ */ jsx(Surface.Surface, {
+			type: AppSurface.DevtoolsOverview,
+			data
+		})
 	});
 };
 DevtoolsOverviewContainer.displayName = "DevtoolsOverviewContainer";

package/dist/lib/chunk-DevtoolsOverviewContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-DevtoolsOverviewContainer.mjs","names":[],"sources":["../../src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback, useMemo } from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { StatsPanel, useStats } from '@dxos/devtools';\n\nexport const DevtoolsOverviewContainer = () => {\n  const [stats, refreshStats] = useStats();\n  const surfaceProfilerStats = Surface.useProfilerStats();\n  const surfaceMetrics = Surface.useMetrics();\n  const clearSurfaceProfiler = Surface.useProfilerClear();\n\n  // The panel joins profiler stats with dispatch metrics, so reset must clear both.\n  const handleClearSurfaceProfiler = useCallback(() => {\n    clearSurfaceProfiler?.();\n    Surface.clearMetrics();\n  }, [clearSurfaceProfiler]);\n\n  // Join dispatch metrics onto the render-timing stats (both keyed by `surface/<id>/<role>`).\n  const enrichedStats = useMemo(() => {\n    const byId = new Map(surfaceMetrics.map((metric) => [metric.id, metric]));\n    return surfaceProfilerStats.map((stat) => {\n      const metric = byId.get(stat.id);\n      return metric\n        ? {\n            ...stat,\n            candidates: metric.candidates,\n            truncated: metric.truncated,\n            errors: metric.errors,\n            dataUnstable: metric.dataUnstable,\n          }\n        : stat;\n    });\n  }, [surfaceProfilerStats, surfaceMetrics]);\n\n  return (\n    <StatsPanel\n      stats={stats}\n      surfaceProfilerStats={enrichedStats}\n      onRefresh={refreshStats}\n      onClearSurfaceProfiler={handleClearSurfaceProfiler}\n    >\n      <Surface.Surface type={AppSurface.DevtoolsOverview} />\n    </StatsPanel>\n  );\n};\n\nDevtoolsOverviewContainer.displayName = 'DevtoolsOverviewContainer';\n"],"mappings":";;;;;;AAUA,IAAa,kCAAkC;CAC7C,MAAM,CAAC,OAAO,gBAAgB,SAAS;CACvC,MAAM,uBAAuB,QAAQ,iBAAiB;CACtD,MAAM,iBAAiB,QAAQ,WAAW;CAC1C,MAAM,uBAAuB,QAAQ,iBAAiB;CAGtD,MAAM,6BAA6B,kBAAkB;EACnD,uBAAuB;EACvB,QAAQ,aAAa;CACvB,GAAG,CAAC,oBAAoB,CAAC;CAGzB,MAAM,gBAAgB,cAAc;EAClC,MAAM,OAAO,IAAI,IAAI,eAAe,KAAK,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;EACxE,OAAO,qBAAqB,KAAK,SAAS;GACxC,MAAM,SAAS,KAAK,IAAI,KAAK,EAAE;GAC/B,OAAO,SACH;IACE,GAAG;IACH,YAAY,OAAO;IACnB,WAAW,OAAO;IAClB,QAAQ,OAAO;IACf,cAAc,OAAO;GACvB,IACA;EACN,CAAC;CACH,GAAG,CAAC,sBAAsB,cAAc,CAAC;CAEzC,OACE,oBAAC,YAAD;EACS;EACP,sBAAsB;EACtB,WAAW;EACX,wBAAwB;EAExB,UAAA,oBAAC,QAAQ,SAAT,EAAiB,MAAM,WAAW,iBAAmB,CAAA;CAC3C,CAAA;AAEhB;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"chunk-DevtoolsOverviewContainer.mjs","names":[],"sources":["../../src/containers/DevtoolsOverviewContainer/DevtoolsOverviewContainer.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport * as Surface from '@dxos/app-framework/Surface';\nimport * as AppSurface from '@dxos/app-toolkit/AppSurface';\nimport { StatsPanel, type SurfaceProfilerStats, useStats } from '@dxos/devtools';\n\nimport { type DevtoolsCardData, isDebugSurface } from '../../capabilities/DevtoolsCards.tsx';\n\n/**\n * The stats stack: one poll of the client's stats, fanned out to every card contributed to the role.\n * The profiler and dispatch metrics are sampled on each refresh rather than subscribed to: this\n * container is itself a profiled surface, so a live subscription would record an entry for every\n * re-render the notification caused and loop at frame rate, flushing every other surface out of the\n * profiler's window — which is what made the Surfaces card's count wander with no interaction.\n */\nexport const DevtoolsOverviewContainer = () => {\n  const [stats, refreshStats] = useStats();\n  const getProfilerStats = Surface.useProfilerSnapshot();\n  const clearSurfaceProfiler = Surface.useProfilerClear();\n  // Resampled as surfaces mount and unmount: with a restored layout this container mounts at boot,\n  // before most of the app, so a single sample on mount would list only what existed then.\n  const mounted = Surface.useMounted();\n  const [surfaceProfilerStats, setSurfaceProfilerStats] = useState<SurfaceProfilerStats[]>([]);\n\n  // One row per surface mounted right now (the profiler records renders, not mounts), with its\n  // cumulative render timings and dispatch metrics joined on `surface/<id>/<role>` where they exist.\n  // The debug tooling's own surfaces are left out so the panel does not measure itself.\n  const sampleProfiler = useCallback(() => {\n    const timings = new Map(getProfilerStats().map((stat) => [stat.id, stat]));\n    const metrics = new Map(Surface.getMetrics().map((metric) => [metric.id, metric]));\n    setSurfaceProfilerStats(\n      mounted\n        .filter((surface) => !isDebugSurface(surface))\n        .map(({ id, role }) => {\n          // Mirrors the profiler's own id, which prints an anonymous surface as `undefined`.\n          const profilerId = `surface/${id}/${role}`;\n          const timing = timings.get(profilerId) ?? {\n            id: profilerId,\n            mountCount: 0,\n            updateCount: 0,\n            totalRenders: 0,\n            avgActualDuration: 0,\n            maxActualDuration: 0,\n            avgBaseDuration: 0,\n            lastActualDuration: 0,\n            lastCommitTime: 0,\n          };\n          const metric = metrics.get(profilerId);\n          return metric\n            ? {\n                ...timing,\n                candidates: metric.candidates,\n                truncated: metric.truncated,\n                errors: metric.errors,\n                dataUnstable: metric.dataUnstable,\n              }\n            : timing;\n        })\n        .sort((a, b) => b.maxActualDuration - a.maxActualDuration || a.id.localeCompare(b.id)),\n    );\n  }, [getProfilerStats, mounted]);\n  useEffect(sampleProfiler, [sampleProfiler]);\n\n  const handleRefresh = useCallback(() => {\n    refreshStats();\n    sampleProfiler();\n  }, [refreshStats, sampleProfiler]);\n\n  // The profiler card joins profiler stats with dispatch metrics, so reset must clear both.\n  const handleClearSurfaceProfiler = useCallback(() => {\n    clearSurfaceProfiler?.();\n    Surface.clearMetrics();\n    sampleProfiler();\n  }, [clearSurfaceProfiler, sampleProfiler]);\n\n  const data = useMemo<DevtoolsCardData>(\n    () => ({ stats, surfaceProfilerStats, onClearSurfaceProfiler: handleClearSurfaceProfiler }),\n    [stats, surfaceProfilerStats, handleClearSurfaceProfiler],\n  );\n\n  return (\n    <StatsPanel onRefresh={handleRefresh}>\n      <Surface.Surface type={AppSurface.DevtoolsOverview} data={data} />\n    </StatsPanel>\n  );\n};\n\nDevtoolsOverviewContainer.displayName = 'DevtoolsOverviewContainer';\n"],"mappings":";;;;;;;;;;;;;;AAmBA,IAAa,kCAAkC;CAC7C,MAAM,CAAC,OAAO,gBAAgB,SAAS;CACvC,MAAM,mBAAmB,QAAQ,oBAAoB;CACrD,MAAM,uBAAuB,QAAQ,iBAAiB;CAGtD,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,CAAC,sBAAsB,2BAA2B,SAAiC,CAAC,CAAC;CAK3F,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,UAAU,IAAI,IAAI,iBAAiB,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;EACzE,MAAM,UAAU,IAAI,IAAI,QAAQ,WAAW,CAAC,CAAC,KAAK,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;EACjF,wBACE,QACG,QAAQ,YAAY,CAAC,eAAe,OAAO,CAAC,CAAA,CAC5C,KAAK,EAAE,IAAI,WAAW;GAErB,MAAM,aAAa,WAAW,GAAG,GAAG;GACpC,MAAM,SAAS,QAAQ,IAAI,UAAU,KAAK;IACxC,IAAI;IACJ,YAAY;IACZ,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,oBAAoB;IACpB,gBAAgB;GAClB;GACA,MAAM,SAAS,QAAQ,IAAI,UAAU;GACrC,OAAO,SACH;IACE,GAAG;IACH,YAAY,OAAO;IACnB,WAAW,OAAO;IAClB,QAAQ,OAAO;IACf,cAAc,OAAO;GACvB,IACA;EACN,CAAC,CAAA,CACA,MAAM,GAAG,MAAM,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC,CACzF;CACF,GAAG,CAAC,kBAAkB,OAAO,CAAC;CAC9B,UAAU,gBAAgB,CAAC,cAAc,CAAC;CAE1C,MAAM,gBAAgB,kBAAkB;EACtC,aAAa;EACb,eAAe;CACjB,GAAG,CAAC,cAAc,cAAc,CAAC;CAGjC,MAAM,6BAA6B,kBAAkB;EACnD,uBAAuB;EACvB,QAAQ,aAAa;EACrB,eAAe;CACjB,GAAG,CAAC,sBAAsB,cAAc,CAAC;CAEzC,MAAM,OAAO,eACJ;EAAE;EAAO;EAAsB,wBAAwB;CAA2B,IACzF;EAAC;EAAO;EAAsB;CAA0B,CAC1D;CAEA,OACE,oBAAC,YAAD;EAAY,WAAW;EACrB,UAAA,oBAAC,QAAQ,SAAT;GAAiB,MAAM,WAAW;GAAwB;EAAO,CAAA;CACvD,CAAA;AAEhB;AAEA,0BAA0B,cAAc"}

package/dist/lib/chunk-GithubPanel.mjs

@@ -1,7 +1,10 @@
 import { meta } from "#meta";
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flex, IconButton, ScrollArea, useTranslation } from "@dxos/react-ui";
+import * as ScrollArea from "@dxos/react-ui/ScrollArea";
+import * as Button from "@dxos/react-ui/Button";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Layout from "@dxos/react-ui/Layout";
 //#region src/containers/GithubPanel/GithubComponent.tsx
 var DEFAULT_REPO = "dxos/dxos";
 var DEFAULT_LIMIT = 20;
@@ -54,10 +57,10 @@ var Root = ({ repo = DEFAULT_REPO, limit = DEFAULT_LIMIT, children }) => {
 	});
 };
 var Header = () => {
-	const { t } = useTranslation(meta.profile.key);
+	const { t } = Hooks.useTranslation(meta.profile.key);
 	const { repo, pulls, unavailable } = useComponentContext();
 	return /* @__PURE__ */ jsxs("header", {
-		className: "flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-subdued-separator",
+		className: "flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-separator-subtle",
 		children: [/* @__PURE__ */ jsxs("a", {
 			href: `https://github.com/${repo}`,
 			target: "_blank",
@@ -65,7 +68,7 @@ var Header = () => {
 			className: "text-sm font-medium truncate",
 			children: ["@", repo]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "text-xs text-description",
+			className: "text-xs text-fg-muted",
 			children: unavailable ? t("github-unavailable.message") : pulls.length > 0 ? t("recent-prs.label", { count: pulls.length }) : t("github-loading.message")
 		})]
 	});
@@ -85,7 +88,7 @@ var formatRelative = (iso) => {
 	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");
 };
-var PullRow = ({ pull }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Flex, {
+var PullRow = ({ pull }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Layout.Flex, {
 	asChild: true,
 	align: "start",
 	gap: "sm",
@@ -98,14 +101,14 @@ var PullRow = ({ pull }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ *
 			src: pull.user.avatar_url,
 			alt: "",
 			className: "size-6 rounded-full shrink-0"
-		}), /* @__PURE__ */ jsxs(Flex, {
+		}), /* @__PURE__ */ jsxs(Layout.Flex, {
 			column: true,
 			classNames: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "text-sm leading-6 truncate",
 				children: pull.title
 			}), /* @__PURE__ */ jsxs("span", {
-				className: "text-xs text-description truncate",
+				className: "text-xs text-fg-muted truncate",
 				children: [
 					"#",
 					pull.number,
@@ -129,9 +132,9 @@ var Content = () => {
 	});
 };
 var StatusBar = () => {
-	const { t } = useTranslation(meta.profile.key);
+	const { t } = Hooks.useTranslation(meta.profile.key);
 	const { repo } = useComponentContext();
-	return /* @__PURE__ */ jsx(IconButton, {
+	return /* @__PURE__ */ jsx(Button.Root, {
 		icon: "ph--github-logo--regular",
 		label: t("view-on-github.button"),
 		variant: "primary",
@@ -150,7 +153,7 @@ var GithubComponent = {
 //#endregion
 //#region src/containers/GithubPanel/GithubPanel.tsx
 var GithubPanel = () => /* @__PURE__ */ jsx(GithubComponent.Root, { children: /* @__PURE__ */ jsxs("div", {
-	className: "h-full grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full w-full",
+	className: "dx-fill grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden",
 	children: [
 		/* @__PURE__ */ jsx(GithubComponent.Header, {}),
 		/* @__PURE__ */ jsx(GithubComponent.Content, {}),

package/dist/lib/chunk-GithubPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chunk-GithubPanel.mjs","names":[],"sources":["../../src/containers/GithubPanel/GithubComponent.tsx","../../src/containers/GithubPanel/GithubPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { type ReactNode, createContext, useContext, useEffect, useState } from 'react';\n\nimport { Flex, IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nconst DEFAULT_REPO = 'dxos/dxos';\nconst DEFAULT_LIMIT = 20;\n\ntype GithubUser = {\n  login: string;\n  avatar_url: string;\n  html_url: string;\n};\n\ntype GithubPullRequest = {\n  number: number;\n  title: string;\n  html_url: string;\n  merged_at: string | null;\n  user: GithubUser;\n};\n\ntype ComponentContextValue = {\n  repo: string;\n  pulls: GithubPullRequest[];\n  unavailable: boolean;\n};\n\nconst ComponentContext = createContext<ComponentContextValue | null>(null);\n\nconst useComponentContext = () => {\n  const ctx = useContext(ComponentContext);\n  if (!ctx) {\n    throw new Error('GithubComponent.* parts must be rendered inside GithubComponent.Root.');\n  }\n  return ctx;\n};\n\nexport type GithubComponentRootProps = {\n  /** `<owner>/<name>`. Defaults to `dxos/dxos`. */\n  repo?: string;\n  /** Maximum number of merged PRs to fetch. */\n  limit?: number;\n  children?: ReactNode;\n};\n\nconst Root = ({ repo = DEFAULT_REPO, limit = DEFAULT_LIMIT, children }: GithubComponentRootProps) => {\n  const [pulls, setPulls] = useState<GithubPullRequest[]>([]);\n  const [unavailable, setUnavailable] = useState(false);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setPulls([]);\n    setUnavailable(false);\n    void (async () => {\n      try {\n        const url = new URL(`https://api.github.com/repos/${repo}/pulls`);\n        url.searchParams.set('state', 'closed');\n        url.searchParams.set('sort', 'updated');\n        url.searchParams.set('direction', 'desc');\n        url.searchParams.set('per_page', String(limit * 2));\n        const response = await fetch(url.toString(), {\n          signal: controller.signal,\n          headers: { Accept: 'application/vnd.github+json' },\n        });\n        if (!response.ok) {\n          setUnavailable(true);\n          return;\n        }\n        const items = (await response.json()) as GithubPullRequest[];\n        setPulls(items.filter((pull) => pull.merged_at !== null).slice(0, limit));\n        setUnavailable(false);\n      } catch {\n        if (controller.signal.aborted) {\n          return;\n        }\n        setPulls([]);\n        setUnavailable(true);\n      }\n    })();\n    return () => controller.abort();\n  }, [repo, limit]);\n\n  return <ComponentContext.Provider value={{ repo, pulls, unavailable }}>{children}</ComponentContext.Provider>;\n};\n\nconst Header = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const { repo, pulls, unavailable } = useComponentContext();\n  return (\n    <header className='flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-subdued-separator'>\n      <a\n        href={`https://github.com/${repo}`}\n        target='_blank'\n        rel='noopener noreferrer'\n        className='text-sm font-medium truncate'\n      >\n        @{repo}\n      </a>\n      <div className='text-xs text-description'>\n        {unavailable\n          ? t('github-unavailable.message')\n          : pulls.length > 0\n            ? t('recent-prs.label', { count: pulls.length })\n            : t('github-loading.message')}\n      </div>\n    </header>\n  );\n};\n\nconst RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [\n  ['year', 60 * 60 * 24 * 365],\n  ['month', 60 * 60 * 24 * 30],\n  ['week', 60 * 60 * 24 * 7],\n  ['day', 60 * 60 * 24],\n  ['hour', 60 * 60],\n  ['minute', 60],\n];\n\nconst formatRelative = (iso: string): string => {\n  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });\n  const diffSeconds = (Date.parse(iso) - Date.now()) / 1000;\n  const absDiff = Math.abs(diffSeconds);\n  for (const [unit, secondsInUnit] of RELATIVE_UNITS) {\n    if (absDiff >= secondsInUnit) {\n      return formatter.format(Math.round(diffSeconds / secondsInUnit), unit);\n    }\n  }\n  return formatter.format(Math.round(diffSeconds), 'second');\n};\n\nconst PullRow = ({ pull }: { pull: GithubPullRequest }) => (\n  <li>\n    <Flex asChild align='start' gap='sm' classNames='px-trim-sm py-trim-xs rounded-sm hover:bg-hover-surface'>\n      <a href={pull.html_url} target='_blank' rel='noopener noreferrer'>\n        <img src={pull.user.avatar_url} alt='' className='size-6 rounded-full shrink-0' />\n        <Flex column classNames='min-w-0 flex-1'>\n          {/* `leading-6` gives the title the avatar's line box, so the two align on their own. */}\n          <span className='text-sm leading-6 truncate'>{pull.title}</span>\n          <span className='text-xs text-description truncate'>\n            #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}\n          </span>\n        </Flex>\n      </a>\n    </Flex>\n  </li>\n);\n\nconst Content = () => {\n  const { pulls } = useComponentContext();\n  return (\n    <ScrollArea.Root orientation='vertical'>\n      <ScrollArea.Viewport>\n        <ul className='flex flex-col p-1'>\n          {pulls.map((pull) => (\n            <PullRow key={pull.number} pull={pull} />\n          ))}\n        </ul>\n      </ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n};\n\nconst StatusBar = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const { repo } = useComponentContext();\n  return (\n    <IconButton\n      icon='ph--github-logo--regular'\n      label={t('view-on-github.button')}\n      variant='primary'\n      classNames='w-full'\n      onClick={() => {\n        window.open(`https://github.com/${repo}`, '_blank', 'noopener,noreferrer');\n      }}\n    />\n  );\n};\n\nexport const GithubComponent = {\n  Root,\n  Header,\n  Content,\n  StatusBar,\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { GithubComponent } from './GithubComponent';\n\nexport const GithubPanel = () => (\n  <GithubComponent.Root>\n    <div className='h-full grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden h-full w-full'>\n      <GithubComponent.Header />\n      <GithubComponent.Content />\n      <GithubComponent.StatusBar />\n    </div>\n  </GithubComponent.Root>\n);\n\nGithubPanel.displayName = 'GithubPanel';\n"],"mappings":"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"}
+{"version":3,"file":"chunk-GithubPanel.mjs","names":[],"sources":["../../src/containers/GithubPanel/GithubComponent.tsx","../../src/containers/GithubPanel/GithubPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { type ReactNode, createContext, useContext, useEffect, useState } from 'react';\n\nimport * as Button from '@dxos/react-ui/Button';\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport * as Layout from '@dxos/react-ui/Layout';\nimport * as ScrollArea from '@dxos/react-ui/ScrollArea';\n\nimport { meta } from '#meta';\n\nconst DEFAULT_REPO = 'dxos/dxos';\nconst DEFAULT_LIMIT = 20;\n\ntype GithubUser = {\n  login: string;\n  avatar_url: string;\n  html_url: string;\n};\n\ntype GithubPullRequest = {\n  number: number;\n  title: string;\n  html_url: string;\n  merged_at: string | null;\n  user: GithubUser;\n};\n\ntype ComponentContextValue = {\n  repo: string;\n  pulls: GithubPullRequest[];\n  unavailable: boolean;\n};\n\nconst ComponentContext = createContext<ComponentContextValue | null>(null);\n\nconst useComponentContext = () => {\n  const ctx = useContext(ComponentContext);\n  if (!ctx) {\n    throw new Error('GithubComponent.* parts must be rendered inside GithubComponent.Root.');\n  }\n  return ctx;\n};\n\nexport type GithubComponentRootProps = {\n  /** `<owner>/<name>`. Defaults to `dxos/dxos`. */\n  repo?: string;\n  /** Maximum number of merged PRs to fetch. */\n  limit?: number;\n  children?: ReactNode;\n};\n\nconst Root = ({ repo = DEFAULT_REPO, limit = DEFAULT_LIMIT, children }: GithubComponentRootProps) => {\n  const [pulls, setPulls] = useState<GithubPullRequest[]>([]);\n  const [unavailable, setUnavailable] = useState(false);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setPulls([]);\n    setUnavailable(false);\n    void (async () => {\n      try {\n        const url = new URL(`https://api.github.com/repos/${repo}/pulls`);\n        url.searchParams.set('state', 'closed');\n        url.searchParams.set('sort', 'updated');\n        url.searchParams.set('direction', 'desc');\n        url.searchParams.set('per_page', String(limit * 2));\n        const response = await fetch(url.toString(), {\n          signal: controller.signal,\n          headers: { Accept: 'application/vnd.github+json' },\n        });\n        if (!response.ok) {\n          setUnavailable(true);\n          return;\n        }\n        const items = (await response.json()) as GithubPullRequest[];\n        setPulls(items.filter((pull) => pull.merged_at !== null).slice(0, limit));\n        setUnavailable(false);\n      } catch {\n        if (controller.signal.aborted) {\n          return;\n        }\n        setPulls([]);\n        setUnavailable(true);\n      }\n    })();\n    return () => controller.abort();\n  }, [repo, limit]);\n\n  return <ComponentContext.Provider value={{ repo, pulls, unavailable }}>{children}</ComponentContext.Provider>;\n};\n\nconst Header = () => {\n  const { t } = Hooks.useTranslation(meta.profile.key);\n  const { repo, pulls, unavailable } = useComponentContext();\n  return (\n    <header className='flex items-center justify-between gap-1 px-4 py-3 dx-modal-surface border-b border-separator-subtle'>\n      <a\n        href={`https://github.com/${repo}`}\n        target='_blank'\n        rel='noopener noreferrer'\n        className='text-sm font-medium truncate'\n      >\n        @{repo}\n      </a>\n      <div className='text-xs text-fg-muted'>\n        {unavailable\n          ? t('github-unavailable.message')\n          : pulls.length > 0\n            ? t('recent-prs.label', { count: pulls.length })\n            : t('github-loading.message')}\n      </div>\n    </header>\n  );\n};\n\nconst RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [\n  ['year', 60 * 60 * 24 * 365],\n  ['month', 60 * 60 * 24 * 30],\n  ['week', 60 * 60 * 24 * 7],\n  ['day', 60 * 60 * 24],\n  ['hour', 60 * 60],\n  ['minute', 60],\n];\n\nconst formatRelative = (iso: string): string => {\n  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });\n  const diffSeconds = (Date.parse(iso) - Date.now()) / 1000;\n  const absDiff = Math.abs(diffSeconds);\n  for (const [unit, secondsInUnit] of RELATIVE_UNITS) {\n    if (absDiff >= secondsInUnit) {\n      return formatter.format(Math.round(diffSeconds / secondsInUnit), unit);\n    }\n  }\n  return formatter.format(Math.round(diffSeconds), 'second');\n};\n\nconst PullRow = ({ pull }: { pull: GithubPullRequest }) => (\n  <li>\n    <Layout.Flex asChild align='start' gap='sm' classNames='px-trim-sm py-trim-xs rounded-sm hover:bg-hover-surface'>\n      <a href={pull.html_url} target='_blank' rel='noopener noreferrer'>\n        <img src={pull.user.avatar_url} alt='' className='size-6 rounded-full shrink-0' />\n        <Layout.Flex column classNames='min-w-0 flex-1'>\n          {/* `leading-6` gives the title the avatar's line box, so the two align on their own. */}\n          <span className='text-sm leading-6 truncate'>{pull.title}</span>\n          <span className='text-xs text-fg-muted truncate'>\n            #{pull.number} · {pull.user.login} · {pull.merged_at ? formatRelative(pull.merged_at) : ''}\n          </span>\n        </Layout.Flex>\n      </a>\n    </Layout.Flex>\n  </li>\n);\n\nconst Content = () => {\n  const { pulls } = useComponentContext();\n  return (\n    <ScrollArea.Root orientation='vertical'>\n      <ScrollArea.Viewport>\n        <ul className='flex flex-col p-1'>\n          {pulls.map((pull) => (\n            <PullRow key={pull.number} pull={pull} />\n          ))}\n        </ul>\n      </ScrollArea.Viewport>\n    </ScrollArea.Root>\n  );\n};\n\nconst StatusBar = () => {\n  const { t } = Hooks.useTranslation(meta.profile.key);\n  const { repo } = useComponentContext();\n  return (\n    <Button.Root\n      icon='ph--github-logo--regular'\n      label={t('view-on-github.button')}\n      variant='primary'\n      classNames='w-full'\n      onClick={() => {\n        window.open(`https://github.com/${repo}`, '_blank', 'noopener,noreferrer');\n      }}\n    />\n  );\n};\n\nexport const GithubComponent = {\n  Root,\n  Header,\n  Content,\n  StatusBar,\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { GithubComponent } from './GithubComponent.tsx';\n\nexport const GithubPanel = () => (\n  <GithubComponent.Root>\n    <div className='dx-fill grid grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden'>\n      <GithubComponent.Header />\n      <GithubComponent.Content />\n      <GithubComponent.StatusBar />\n    </div>\n  </GithubComponent.Root>\n);\n\nGithubPanel.displayName = 'GithubPanel';\n"],"mappings":"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"}