@vitejs/devtools 0.1.8 → 0.1.10

package/dist/{LogItem-D-AbVX5q.js → LogItem-Ca0SsU39.js}

@@ -1,4 +1,4 @@
-import { o as useTimeAgo } from "./dist-CBtGbo90.js";
+import { s as useTimeAgo } from "./dist-CCdqIez-.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, reactive, renderList, renderSlot, toDisplayString, unref } from "vue";
 //#region src/client/webcomponents/state/toasts.ts
 const toasts = reactive([]);
@@ -154,16 +154,17 @@ const _hoisted_2 = {
 	key: 0,
 	class: "flex-none mt-0.5 border-2 border-current border-t-transparent rounded-full animate-spin op50 w-4 h-4"
 };
-const _hoisted_3 = { class: "flex-1 min-w-0" };
-const _hoisted_4 = {
+const _hoisted_3 = { class: "flex-1 min-w-0 space-y-0.5" };
+const _hoisted_4 = { class: "flex items-center gap-2" };
+const _hoisted_5 = ["title"];
+const _hoisted_6 = {
 	key: 0,
-	class: "text-xs op80 mt-0.5 whitespace-pre-wrap"
+	class: "text-xs op80 whitespace-pre-wrap"
 };
-const _hoisted_5 = {
+const _hoisted_7 = {
 	key: 1,
-	class: "flex items-center gap-2 mt-0.5"
+	class: "flex flex-wrap items-center gap-x-2 gap-y-0.5"
 };
-const _hoisted_6 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "LogItem",
 	props: {
@@ -181,9 +182,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(["flex-none mt-0.5 w-4 h-4", [unref(levels)[__props.entry.level]?.icon, unref(levels)[__props.entry.level]?.color]])
 				}, null, 2)),
 				createElementVNode("div", _hoisted_3, [
-					createElementVNode("div", { class: normalizeClass(["truncate text-sm font-medium", [__props.entry.status === "loading" ? "op60" : ""]]) }, toDisplayString(__props.entry.message), 3),
-					__props.entry.description ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.entry.description), 1)) : createCommentVNode("v-if", true),
-					!__props.compact ? (openBlock(), createElementBlock("div", _hoisted_5, [__props.entry.category ? (openBlock(), createBlock(_sfc_main$1, {
+					createElementVNode("div", _hoisted_4, [
+						createElementVNode("div", { class: normalizeClass(["flex-1 min-w-0 truncate text-sm font-medium", [__props.entry.status === "loading" ? "op60" : ""]]) }, toDisplayString(__props.entry.message), 3),
+						!__props.compact ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: "text-xs op40 flex-none",
+							title: new Date(__props.entry.timestamp).toLocaleString()
+						}, toDisplayString(unref(timeAgo)), 9, _hoisted_5)) : createCommentVNode("v-if", true),
+						renderSlot(_ctx.$slots, "actions")
+					]),
+					__props.entry.description ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.entry.description), 1)) : createCommentVNode("v-if", true),
+					!__props.compact ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.entry.category ? (openBlock(), createBlock(_sfc_main$1, {
 						key: 0,
 						label: __props.entry.category
 					}, null, 8, ["label"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.entry.labels, (label) => {
@@ -192,13 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							label
 						}, null, 8, ["label"]);
 					}), 128))])) : createCommentVNode("v-if", true)
-				]),
-				!__props.compact ? (openBlock(), createElementBlock("span", {
-					key: 2,
-					class: "text-xs op40 flex-none",
-					title: new Date(__props.entry.timestamp).toLocaleString()
-				}, toDisplayString(unref(timeAgo)), 9, _hoisted_6)) : createCommentVNode("v-if", true),
-				renderSlot(_ctx.$slots, "actions")
+				])
 			]);
 		};
 	}

package/dist/{ViewBuiltinLogs-D9GVXA00.js → ViewBuiltinLogs-B_CLlali.js}

@@ -1,5 +1,5 @@
-import { o as useTimeAgo } from "./dist-CBtGbo90.js";
-import { a as levels, i as getHashColorFromString, n as _sfc_main$3, o as markLogsAsRead, r as formEntries, s as useLogs, t as _sfc_main$2 } from "./LogItem-D-AbVX5q.js";
+import { s as useTimeAgo } from "./dist-CCdqIez-.js";
+import { a as levels, i as getHashColorFromString, n as _sfc_main$3, o as markLogsAsRead, r as formEntries, s as useLogs, t as _sfc_main$2 } from "./LogItem-Ca0SsU39.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/client/webcomponents/components/display/FilterToggles.vue
 const _hoisted_1$1 = { class: "text-xs op40" };

package/dist/{ViewBuiltinTerminals-afgLtRQP.js → ViewBuiltinTerminals-ZrMObMte.js}

@@ -1,6 +1,5 @@
-import { r as useEventListener, u as watchImmediate } from "./dist-CBtGbo90.js";
-import { t as _sfc_main$2 } from "./DockIcon-zZkKuxFy.js";
-import "./iconify-JodklND-.js";
+import { d as watchImmediate, i as useEventListener } from "./dist-CCdqIez-.js";
+import { t as _sfc_main$2 } from "./DockIcon-7v-JouW5.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, reactive, ref, renderList, shallowRef, toDisplayString, unref, watch } from "vue";
 //#region src/client/webcomponents/state/terminals.ts
 let _terminalsMap;

package/dist/auth-state-DXCxEqSd.js

@@ -0,0 +1,54 @@
+import { humanId } from "@vitejs/devtools-kit/utils/human-id";
+//#region src/node/auth-state.ts
+let pendingAuth = null;
+let tempAuthToken = generateTempId();
+function generateTempId() {
+	return humanId({
+		separator: "-",
+		capitalize: false
+	});
+}
+function getTempAuthToken() {
+	return tempAuthToken;
+}
+function refreshTempAuthToken() {
+	tempAuthToken = generateTempId();
+	return tempAuthToken;
+}
+function setPendingAuth(request) {
+	pendingAuth = request;
+}
+/**
+* Abort and clean up any existing pending auth request.
+*/
+function abortPendingAuth() {
+	if (pendingAuth) {
+		pendingAuth.abortController.abort();
+		clearTimeout(pendingAuth.timeout);
+		pendingAuth = null;
+	}
+}
+/**
+* Consume the temp auth ID: verify it matches, trust the pending client, and clean up.
+* Returns the client's authToken if successful, null otherwise.
+*/
+function consumeTempAuthToken(id, storage) {
+	if (id !== tempAuthToken || !pendingAuth) return null;
+	const { clientAuthToken, session, ua, origin, resolve } = pendingAuth;
+	storage.mutate((state) => {
+		state.trusted[clientAuthToken] = {
+			authToken: clientAuthToken,
+			ua,
+			origin,
+			timestamp: Date.now()
+		};
+	});
+	session.meta.clientAuthToken = clientAuthToken;
+	session.meta.isTrusted = true;
+	resolve({ isTrusted: true });
+	abortPendingAuth();
+	refreshTempAuthToken();
+	return clientAuthToken;
+}
+//#endregion
+export { setPendingAuth as a, refreshTempAuthToken as i, consumeTempAuthToken as n, getTempAuthToken as r, abortPendingAuth as t };

package/dist/build-static-Cb3vKjJS.js

@@ -0,0 +1,49 @@
+import { n as ansis_default } from "./constants-DfEeYo9W.js";
+import { dirClientStandalone } from "./dirs.js";
+import { DEVTOOLS_CONNECTION_META_FILENAME, DEVTOOLS_DIRNAME, DEVTOOLS_DOCK_IMPORTS_FILENAME, DEVTOOLS_MOUNT_PATH, DEVTOOLS_RPC_DUMP_DIRNAME, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME } from "@vitejs/devtools-kit/constants";
+import { dirname, join, relative, resolve } from "pathe";
+import { existsSync } from "node:fs";
+import fs$1 from "node:fs/promises";
+//#region src/node/build-static.ts
+async function buildStaticDevTools(options) {
+	const { context, outDir } = options;
+	if (existsSync(outDir)) await fs$1.rm(outDir, { recursive: true });
+	const devToolsRoot = join(outDir, DEVTOOLS_DIRNAME);
+	await fs$1.mkdir(devToolsRoot, { recursive: true });
+	await fs$1.cp(dirClientStandalone, devToolsRoot, { recursive: true });
+	for (const { baseUrl, distDir } of context.views.buildStaticDirs) {
+		console.log(ansis_default.cyan`${"⬢"} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`);
+		await fs$1.mkdir(join(outDir, baseUrl), { recursive: true });
+		await fs$1.cp(distDir, join(outDir, baseUrl), { recursive: true });
+	}
+	const { renderDockImportsMap } = await import("./server-BQ4s1VXj.js");
+	await fs$1.mkdir(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_DIRNAME), { recursive: true });
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_CONNECTION_META_FILENAME), JSON.stringify({ backend: "static" }, null, 2), "utf-8");
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_DOCK_IMPORTS_FILENAME), renderDockImportsMap(context.docks.values()), "utf-8");
+	console.log(ansis_default.cyan`${"⬢"} Writing RPC dump to ${resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME)}`);
+	const { collectStaticRpcDump } = await import("./static-dump-BqRb_x-O.js");
+	const dump = await collectStaticRpcDump(context.rpc.definitions.values(), context);
+	for (const [filepath, data] of Object.entries(dump.files)) {
+		const fullpath = resolve(devToolsRoot, filepath);
+		await fs$1.mkdir(dirname(fullpath), { recursive: true });
+		await fs$1.writeFile(fullpath, JSON.stringify(data, null, 2), "utf-8");
+	}
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME), JSON.stringify(dump.manifest, null, 2), "utf-8");
+	await fs$1.writeFile(resolve(outDir, "index.html"), [
+		"<!doctype html>",
+		"<html lang=\"en\">",
+		"<head>",
+		"  <meta charset=\"UTF-8\">",
+		"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
+		"  <title>Vite DevTools</title>",
+		`  <meta http-equiv="refresh" content="0; url=${DEVTOOLS_MOUNT_PATH}">`,
+		"</head>",
+		"<body>",
+		`  <script>location.replace(${JSON.stringify(DEVTOOLS_MOUNT_PATH)})<\/script>`,
+		"</body>",
+		"</html>"
+	].join("\n"), "utf-8");
+	console.log(ansis_default.green`${"⬢"} Built DevTools to ${relative(context.cwd, outDir)}`);
+}
+//#endregion
+export { buildStaticDevTools };

package/dist/cli-commands.js

@@ -1,10 +1,7 @@
 import { n as ansis_default } from "./constants-DfEeYo9W.js";
 import { n as normalizeHttpServerUrl } from "./utils-HWI9S6d-.js";
-import { dirClientStandalone } from "./dirs.js";
-import { DEVTOOLS_CONNECTION_META_FILENAME, DEVTOOLS_DIRNAME, DEVTOOLS_DOCK_IMPORTS_FILENAME, DEVTOOLS_MOUNT_PATH, DEVTOOLS_RPC_DUMP_DIRNAME, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME } from "@vitejs/devtools-kit/constants";
-import { dirname, join, relative, resolve } from "pathe";
-import { existsSync } from "node:fs";
-import fs$1 from "node:fs/promises";
+import { DEVTOOLS_MOUNT_PATH } from "@vitejs/devtools-kit/constants";
+import { resolve } from "pathe";
 //#region src/node/cli-commands.ts
 async function start(options) {
 	const { host } = options;
@@ -14,8 +11,8 @@ async function start(options) {
 		port: options.port == null ? void 0 : +options.port,
 		portRange: [9999, 15e3]
 	});
-	const { startStandaloneDevTools } = await import("./standalone-CAJbdnf4.js");
-	const { createDevToolsMiddleware } = await import("./server-BuWZ1h8p.js").then((n) => n.n);
+	const { startStandaloneDevTools } = await import("./standalone-D_6Gsoqw.js");
+	const { createDevToolsMiddleware } = await import("./server-DSh-GQIq.js").then((n) => n.n);
 	const devtools = await startStandaloneDevTools({ cwd: options.root });
 	const { h3 } = await createDevToolsMiddleware({
 		cwd: devtools.config.root,
@@ -43,49 +40,17 @@ async function start(options) {
 }
 async function build(options) {
 	console.log(ansis_default.cyan`${"⬢"} Building static Vite DevTools...`);
-	const { startStandaloneDevTools } = await import("./standalone-CAJbdnf4.js");
+	const { startStandaloneDevTools } = await import("./standalone-D_6Gsoqw.js");
 	const devtools = await startStandaloneDevTools({
 		cwd: options.root,
 		config: options.config
 	});
 	const outDir = resolve(devtools.config.root, options.outDir);
-	if (existsSync(outDir)) await fs$1.rm(outDir, { recursive: true });
-	const devToolsRoot = join(outDir, DEVTOOLS_DIRNAME);
-	await fs$1.mkdir(devToolsRoot, { recursive: true });
-	await fs$1.cp(dirClientStandalone, devToolsRoot, { recursive: true });
-	for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) {
-		console.log(ansis_default.cyan`${"⬢"} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`);
-		await fs$1.mkdir(join(outDir, baseUrl), { recursive: true });
-		await fs$1.cp(distDir, join(outDir, baseUrl), { recursive: true });
-	}
-	const { renderDockImportsMap } = await import("./server-Ca6LOTxO.js");
-	await fs$1.mkdir(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_DIRNAME), { recursive: true });
-	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_CONNECTION_META_FILENAME), JSON.stringify({ backend: "static" }, null, 2), "utf-8");
-	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_DOCK_IMPORTS_FILENAME), renderDockImportsMap(devtools.context.docks.values()), "utf-8");
-	console.log(ansis_default.cyan`${"⬢"} Writing RPC dump to ${resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME)}`);
-	const { collectStaticRpcDump } = await import("./static-dump-Q0iG9hz3.js");
-	const dump = await collectStaticRpcDump(devtools.context.rpc.definitions.values(), devtools.context);
-	for (const [filepath, data] of Object.entries(dump.files)) {
-		const fullpath = resolve(devToolsRoot, filepath);
-		await fs$1.mkdir(dirname(fullpath), { recursive: true });
-		await fs$1.writeFile(fullpath, JSON.stringify(data, null, 2), "utf-8");
-	}
-	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME), JSON.stringify(dump.manifest, null, 2), "utf-8");
-	await fs$1.writeFile(resolve(outDir, "index.html"), [
-		"<!doctype html>",
-		"<html lang=\"en\">",
-		"<head>",
-		"  <meta charset=\"UTF-8\">",
-		"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
-		"  <title>Vite DevTools</title>",
-		`  <meta http-equiv="refresh" content="0; url=${DEVTOOLS_MOUNT_PATH}">`,
-		"</head>",
-		"<body>",
-		`  <script>location.replace(${JSON.stringify(DEVTOOLS_MOUNT_PATH)})<\/script>`,
-		"</body>",
-		"</html>"
-	].join("\n"), "utf-8");
-	console.log(ansis_default.green`${"⬢"} Built to ${relative(devtools.config.root, outDir)}`);
+	const { buildStaticDevTools } = await import("./build-static-Cb3vKjJS.js");
+	await buildStaticDevTools({
+		context: devtools.context,
+		outDir
+	});
 	console.warn(ansis_default.yellow`${"⬢"} Static build is still experimental and not yet complete.`);
 	console.warn(ansis_default.yellow`${"⬢"} Generated output may be missing features and can change without notice.`);
 }

package/dist/client/inject.js

@@ -1,8 +1,99 @@
-import { i as useLocalStorage } from "../dist-CBtGbo90.js";
-import { _ as sharedStateToRef, a as triggerMainFrameDockAction, g as createDockEntryState, h as DEFAULT_DOCK_PANEL_STORE, r as registerMainFrameDockActionHandler, v as useDocksEntries, x as BUILTIN_ENTRIES, y as docksGroupByCategories } from "../popup-CAT8YohS.js";
+import { a as useLocalStorage } from "../dist-CCdqIez-.js";
+import { C as createDockEntryState, E as BUILTIN_ENTRIES, S as DEFAULT_DOCK_PANEL_STORE, T as useDocksEntries, a as triggerMainFrameDockAction, h as docksGroupByCategories, r as registerMainFrameDockActionHandler, v as collectAllKeybindings, w as sharedStateToRef, x as normalizeKeyEvent } from "../popup-DgYOsFy3.js";
 import { DEFAULT_STATE_USER_SETTINGS, DEVTOOLS_DOCK_IMPORTS_FILENAME, DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID, DEVTOOLS_MOUNT_PATH } from "@vitejs/devtools-kit/constants";
 import { CLIENT_CONTEXT_KEY, getDevToolsRpcClient } from "@vitejs/devtools-kit/client";
 import { computed, markRaw, reactive, ref, toRefs, watchEffect } from "vue";
+import { evaluateWhen } from "@vitejs/devtools-kit/utils/when";
+//#region src/client/webcomponents/state/commands.ts
+const commandsContextByRpc = /* @__PURE__ */ new WeakMap();
+async function createCommandsContext(clientType, rpc, settingsState, whenContextProvider) {
+	if (commandsContextByRpc.has(rpc)) return commandsContextByRpc.get(rpc);
+	const serverCommands = sharedStateToRef(await rpc.sharedState.get("devtoolskit:internal:commands", { initialValue: [] }));
+	const clientCommands = reactive(/* @__PURE__ */ new Map());
+	const settings = sharedStateToRef(settingsState);
+	const shortcutOverrides = computed(() => settings.value.commandShortcuts ?? {});
+	const paletteOpen = ref(false);
+	const getWhenContext = () => {
+		if (whenContextProvider) return whenContextProvider();
+		return {
+			clientType,
+			dockOpen: false,
+			paletteOpen: paletteOpen.value,
+			dockSelectedId: ""
+		};
+	};
+	const commands = computed(() => [...serverCommands.value, ...Array.from(clientCommands.values())]);
+	const paletteCommands = computed(() => {
+		const ctx = getWhenContext();
+		return commands.value.filter((cmd) => {
+			if (cmd.showInPalette === false) return false;
+			if (cmd.when && !evaluateWhen(cmd.when, ctx)) return false;
+			return true;
+		});
+	});
+	function register(cmd) {
+		const cmds = Array.isArray(cmd) ? cmd : [cmd];
+		for (const c of cmds) clientCommands.set(c.id, c);
+		return () => {
+			for (const c of cmds) clientCommands.delete(c.id);
+		};
+	}
+	function findCommand(id) {
+		const topLevel = commands.value.find((c) => c.id === id);
+		if (topLevel) return topLevel;
+		for (const cmd of commands.value) if (cmd.children) {
+			const child = cmd.children.find((c) => c.id === id);
+			if (child) return child;
+		}
+	}
+	async function execute(id, ...args) {
+		const cmd = findCommand(id);
+		if (!cmd) throw new Error(`Command "${id}" not found`);
+		if (cmd.when) {
+			const ctx = getWhenContext();
+			if (!evaluateWhen(cmd.when, ctx)) throw new Error(`Command "${id}" is not available in the current context`);
+		}
+		if (cmd.source === "server") return rpc.call("devtoolskit:internal:commands:execute", id, ...args);
+		if (cmd.action) return cmd.action(...args);
+		throw new Error(`Command "${id}" has no action`);
+	}
+	function getKeybindings(id) {
+		const overrides = shortcutOverrides.value[id];
+		if (overrides !== void 0) return overrides;
+		return findCommand(id)?.keybindings ?? [];
+	}
+	if (typeof window !== "undefined") setupShortcutListener(getWhenContext, commands, getKeybindings, execute);
+	const commandsContext = reactive({
+		commands,
+		paletteCommands,
+		register,
+		execute,
+		getKeybindings,
+		settings: markRaw(settingsState),
+		paletteOpen
+	});
+	commandsContextByRpc.set(rpc, commandsContext);
+	return commandsContext;
+}
+function setupShortcutListener(getWhenContext, commands, getKeybindings, execute) {
+	const handler = (e) => {
+		const pressed = normalizeKeyEvent(e);
+		if (!pressed || pressed === "Mod" || pressed === "Shift" || pressed === "Alt") return;
+		const whenCtx = getWhenContext();
+		const allBindings = collectAllKeybindings(commands, getKeybindings);
+		for (const { id, keybinding } of allBindings) {
+			if (keybinding.key !== pressed) continue;
+			const cmd = commands.value.find((c) => c.id === id) ?? commands.value.flatMap((c) => c.children ?? []).find((c) => c.id === id);
+			if (cmd?.when && !evaluateWhen(cmd.when, whenCtx)) continue;
+			e.preventDefault();
+			e.stopPropagation();
+			execute(id).catch(console.error);
+			return;
+		}
+	};
+	window.addEventListener("keydown", handler, { capture: true });
+}
+//#endregion
 //#region src/client/webcomponents/state/logs-client.ts
 function createClientLogsClient(rpc) {
 	const buffer = [];
@@ -148,8 +239,96 @@ async function createDocksContext(clientType, rpc, panelStore) {
 	};
 	const settingsStore = markRaw(await getSettingsStore());
 	const settings = sharedStateToRef(settingsStore);
+	let commandsContext;
+	const getWhenContext = () => ({
+		clientType,
+		dockOpen: panelStore.value.open,
+		paletteOpen: commandsContext?.paletteOpen ?? false,
+		dockSelectedId: selectedId.value ?? ""
+	});
 	const groupedEntries = computed(() => {
-		return docksGroupByCategories(dockEntries.value, settings.value);
+		return docksGroupByCategories(dockEntries.value, settings.value, { whenContext: getWhenContext() });
+	});
+	commandsContext = await createCommandsContext(clientType, rpc, settingsStore, getWhenContext);
+	commandsContext.register([
+		{
+			id: "devtools:toggle-palette",
+			source: "client",
+			title: "Toggle Command Palette",
+			icon: "ph:magnifying-glass-duotone",
+			showInPalette: false,
+			keybindings: [{ key: "Mod+K" }],
+			action: () => {
+				commandsContext.paletteOpen = !commandsContext.paletteOpen;
+			}
+		},
+		{
+			id: "devtools:close-panel",
+			source: "client",
+			title: "Close Panel",
+			icon: "ph:x-circle-duotone",
+			when: "dockOpen",
+			keybindings: [],
+			action: () => {
+				panelStore.value.open = false;
+				selectedId.value = null;
+			}
+		},
+		{
+			id: "devtools:open-settings",
+			source: "client",
+			title: "Open Settings",
+			icon: "ph:gear-duotone",
+			action: () => {
+				switchEntry("~settings");
+			}
+		},
+		{
+			id: "devtools:dock-mode",
+			source: "client",
+			title: "Dock Mode",
+			icon: "ph:layout-duotone",
+			when: clientType === "embedded" ? "clientType == embedded" : void 0,
+			children: [{
+				id: "devtools:dock-mode:float",
+				source: "client",
+				title: "Float Mode",
+				icon: "ph:cards-three-duotone",
+				action: () => {
+					panelStore.value.mode = "float";
+				}
+			}, {
+				id: "devtools:dock-mode:edge",
+				source: "client",
+				title: "Edge Mode",
+				icon: "ph:square-half-bottom-duotone",
+				action: () => {
+					panelStore.value.mode = "edge";
+				}
+			}]
+		}
+	]);
+	let cleanupDocksCommand;
+	watchEffect(() => {
+		cleanupDocksCommand?.();
+		const dockChildren = dockEntries.value.filter((entry) => entry.type !== "~builtin").map((entry) => {
+			return {
+				id: `devtools:docks:${entry.id}`,
+				source: "client",
+				title: entry.title,
+				icon: typeof entry.icon === "string" ? entry.icon : void 0,
+				action: () => {
+					switchEntry(entry.id);
+				}
+			};
+		});
+		if (dockChildren.length > 0) cleanupDocksCommand = commandsContext.register({
+			id: "devtools:docks",
+			source: "client",
+			title: "Docks",
+			icon: "ph:layout-duotone",
+			children: dockChildren
+		});
 	});
 	docksContext = reactive({
 		panel: {
@@ -169,6 +348,10 @@ async function createDocksContext(clientType, rpc, panelStore) {
 			switchEntry,
 			toggleEntry
 		},
+		commands: commandsContext,
+		when: { get context() {
+			return getWhenContext();
+		} },
 		rpc,
 		clientType
 	});