@qwik.dev/devtools 0.2.0 → 0.2.1

package/dist/plugin/index.js

@@ -7210,6 +7210,44 @@ function getRouteFunctions({ config }) {
 
 //#endregion
 //#region src/npm/index.ts
+const packageCache = new Map();
+const CACHE_TTL = 1e3 * 60 * 30;
+let preloadedDependencies = null;
+let isPreloading = false;
+let preloadPromise = null;
+function getCachedPackage(name) {
+	const cached = packageCache.get(name);
+	if (cached && Date.now() - cached.timestamp < CACHE_TTL) return cached.data;
+	packageCache.delete(name);
+	return null;
+}
+function setCachedPackage(name, data) {
+	packageCache.set(name, {
+		data,
+		timestamp: Date.now()
+	});
+}
+async function findNearestFileUp(startDir, fileName) {
+	try {
+		let currentDir = path.resolve(startDir);
+		for (let i = 0; i < 100; i++) {
+			const candidate = path.join(currentDir, fileName);
+			const exists = await fsp.access(candidate).then(() => true).catch(() => false);
+			if (exists) return candidate;
+			const parent = path.dirname(currentDir);
+			if (parent === currentDir) break;
+			currentDir = parent;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+function getProjectStartDirFromConfig(config) {
+	if (config?.root) return config.root;
+	if (config?.configFile) return path.dirname(config.configFile);
+	return process.cwd();
+}
 async function detectPackageManager(projectRoot) {
 	try {
 		if (await fsp.access(path.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) return "pnpm";
@@ -7220,10 +7258,139 @@ async function detectPackageManager(projectRoot) {
 		return "pnpm";
 	}
 }
+const preloadDependencies = async (config) => {
+	if (preloadedDependencies) {
+		console.log("[Qwik DevTools] Dependencies already preloaded");
+		return preloadedDependencies;
+	}
+	if (isPreloading && preloadPromise) {
+		console.log("[Qwik DevTools] Preloading already in progress...");
+		return preloadPromise;
+	}
+	isPreloading = true;
+	console.log("[Qwik DevTools] Starting to preload dependencies...");
+	preloadPromise = (async () => {
+		const startDir = getProjectStartDirFromConfig(config);
+		const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
+		if (!pathToPackageJson) {
+			preloadedDependencies = [];
+			isPreloading = false;
+			console.log("[Qwik DevTools] No package.json found");
+			return [];
+		}
+		try {
+			const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
+			const pkg = JSON.parse(pkgJson);
+			const allDeps = {
+				...pkg.dependencies || {},
+				...pkg.devDependencies || {},
+				...pkg.peerDependencies || {}
+			};
+			const dependencies = Object.entries(allDeps);
+			const cachedPackages = [];
+			const uncachedDependencies = [];
+			for (const [name, version] of dependencies) {
+				const cached = getCachedPackage(name);
+				if (cached) cachedPackages.push({
+					...cached,
+					version
+				});
+				else uncachedDependencies.push([name, version]);
+			}
+			if (uncachedDependencies.length === 0) {
+				preloadedDependencies = cachedPackages;
+				isPreloading = false;
+				return cachedPackages;
+			}
+			const batchSize = 100;
+			const batches = [];
+			for (let i = 0; i < uncachedDependencies.length; i += batchSize) batches.push(uncachedDependencies.slice(i, i + batchSize));
+			const fetchedPackages = [];
+			console.log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`);
+			const allBatchPromises = batches.map(async (batch) => {
+				const batchPromises = batch.map(async ([name, version]) => {
+					try {
+						const controller = new AbortController();
+						const timeoutId = setTimeout(() => controller.abort(), 5e3);
+						const response = await fetch(`https://registry.npmjs.org/${name}`, {
+							headers: { "Accept": "application/json" },
+							signal: controller.signal
+						});
+						clearTimeout(timeoutId);
+						if (!response.ok) throw new Error(`HTTP ${response.status}`);
+						const packageData = await response.json();
+						const latestVersion = packageData["dist-tags"]?.latest || version;
+						const versionData = packageData.versions?.[latestVersion] || packageData.versions?.[version];
+						let repositoryUrl = versionData?.repository?.url || packageData.repository?.url;
+						if (repositoryUrl) repositoryUrl = repositoryUrl.replace(/^git\+/, "").replace(/^ssh:\/\/git@/, "https://").replace(/\.git$/, "");
+						let iconUrl = null;
+						if (packageData.logo) iconUrl = packageData.logo;
+						else if (name.startsWith("@")) {
+							const scope = name.split("/")[0].substring(1);
+							iconUrl = `https://avatars.githubusercontent.com/${scope}?size=64`;
+						} else if (repositoryUrl?.includes("github.com")) {
+							const repoMatch = repositoryUrl.match(/github\.com\/([^\/]+)/);
+							if (repoMatch) iconUrl = `https://avatars.githubusercontent.com/${repoMatch[1]}?size=64`;
+						}
+						const packageInfo = {
+							name,
+							version,
+							description: versionData?.description || packageData.description || "No description available",
+							author: versionData?.author || packageData.author,
+							homepage: versionData?.homepage || packageData.homepage,
+							repository: repositoryUrl,
+							npmUrl: `https://www.npmjs.com/package/${name}`,
+							iconUrl
+						};
+						setCachedPackage(name, packageInfo);
+						return packageInfo;
+					} catch (error) {
+						const basicInfo = {
+							name,
+							version,
+							description: "No description available",
+							npmUrl: `https://www.npmjs.com/package/${name}`,
+							iconUrl: null
+						};
+						setCachedPackage(name, basicInfo);
+						return basicInfo;
+					}
+				});
+				const batchResults = await Promise.allSettled(batchPromises);
+				return batchResults.filter((result) => result.status === "fulfilled").map((result) => result.value);
+			});
+			const allBatchResults = await Promise.all(allBatchPromises);
+			for (const batchResult of allBatchResults) fetchedPackages.push(...batchResult);
+			const allPackages = [...cachedPackages, ...fetchedPackages];
+			preloadedDependencies = allPackages;
+			isPreloading = false;
+			console.log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
+			return allPackages;
+		} catch (error) {
+			console.error("[Qwik DevTools] ✗ Failed to preload dependencies:", error);
+			preloadedDependencies = [];
+			isPreloading = false;
+			return [];
+		}
+	})();
+	return preloadPromise;
+};
+async function startPreloading({ config }) {
+	const startTime = Date.now();
+	console.log("[Qwik DevTools] 🚀 Initiating dependency preload (background)...");
+	preloadDependencies(config).then(() => {
+		const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+		console.log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`);
+	}).catch((err) => {
+		console.error("[Qwik DevTools] ✗ Preload failed:", err);
+	});
+	return Promise.resolve();
+}
 function getNpmFunctions({ config }) {
 	return {
 		async getQwikPackages() {
-			const pathToPackageJson = config.configFileDependencies.find((file) => file.endsWith("package.json"));
+			const startDir = getProjectStartDirFromConfig(config);
+			const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
 			if (!pathToPackageJson) return [];
 			try {
 				const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
@@ -7233,9 +7400,23 @@ function getNpmFunctions({ config }) {
 				return [];
 			}
 		},
+		async getAllDependencies() {
+			if (preloadedDependencies) {
+				console.log("[Qwik DevTools] Returning preloaded dependencies");
+				return preloadedDependencies;
+			}
+			if (isPreloading && preloadPromise) {
+				console.log("[Qwik DevTools] Waiting for preload to complete...");
+				return preloadPromise;
+			}
+			console.log("[Qwik DevTools] Warning: Preload not started, starting now...");
+			return preloadDependencies(config);
+		},
 		async installPackage(packageName, isDev = true) {
 			try {
-				const projectRoot = path.dirname(config.configFileDependencies[0]);
+				const startDir = getProjectStartDirFromConfig(config);
+				const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
+				const projectRoot = pathToPackageJson ? path.dirname(pathToPackageJson) : startDir;
 				const pm = await detectPackageManager(projectRoot);
 				const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
 				const command = {
@@ -7964,7 +8145,7 @@ function defaultSerialize(i) {
 	return i;
 }
 const defaultDeserialize = defaultSerialize;
-const { clearTimeout, setTimeout: setTimeout$1 } = globalThis;
+const { clearTimeout: clearTimeout$1, setTimeout: setTimeout$1 } = globalThis;
 const random = Math.random.bind(Math);
 function createBirpc(functions, options) {
 	const { post, on, off = () => {}, eventNames = [], serialize: serialize$1 = defaultSerialize, deserialize: deserialize$1 = defaultDeserialize, resolver, bind = "rpc", timeout = DEFAULT_TIMEOUT } = options;
@@ -8058,7 +8239,7 @@ function createBirpc(functions, options) {
 			const { i: ack, r: result, e: error } = msg;
 			const promise$1 = rpcPromiseMap.get(ack);
 			if (promise$1) {
-				clearTimeout(promise$1.timeoutId);
+				clearTimeout$1(promise$1.timeoutId);
 				if (error) promise$1.reject(error);
 				else promise$1.resolve(result);
 			}
@@ -8590,11 +8771,36 @@ export const useCollectHooks = (src) => {
 `;
 var useCollectHooks_default = useCollectHooks;
 
+//#endregion
+//#region src/utils/updateConf.ts
+function updateConf(conf) {
+	const pkg = "@qwik.dev/devtools";
+	conf.ssr = conf.ssr ?? {};
+	const current = conf.ssr?.noExternal;
+	if (!current) {
+		conf.ssr.noExternal = [pkg];
+		return conf;
+	}
+	if (current === true) return conf;
+	if (Array.isArray(current)) {
+		if (!current.includes(pkg)) current.push(pkg);
+		return conf;
+	}
+	if (typeof current === "string") {
+		conf.ssr.noExternal = current === pkg ? [pkg] : [current, pkg];
+		return conf;
+	}
+	conf.ssr.noExternal = [current, pkg];
+	return conf;
+}
+var updateConf_default = updateConf;
+
 //#endregion
 //#region src/index.ts
 function qwikDevtools() {
 	let _config;
 	const qwikData = new Map();
+	let preloadStarted = false;
 	const qwikDevtoolsPlugin = {
 		name: "vite-plugin-qwik-devtools",
 		apply: "serve",
@@ -8605,11 +8811,18 @@ function qwikDevtools() {
 		load(id) {
 			if (id === `/${VIRTUAL_QWIK_DEVTOOLS_KEY}` || id === VIRTUAL_QWIK_DEVTOOLS_KEY || id === `\u0000${VIRTUAL_QWIK_DEVTOOLS_KEY}` || id === `/@id/${VIRTUAL_QWIK_DEVTOOLS_KEY}`) return {
 				code: useCollectHooks_default,
-				map: null
+				map: { mappings: "" }
 			};
 		},
 		configResolved(viteConfig) {
 			_config = viteConfig;
+			updateConf_default(_config);
+			if (!preloadStarted) {
+				preloadStarted = true;
+				startPreloading({ config: _config }).catch((err) => {
+					console.error("[Qwik DevTools] Failed to start preloading:", err);
+				});
+			}
 		},
 		transform: {
 			order: "pre",
@@ -8619,7 +8832,7 @@ function qwikDevtools() {
 					if (!code.includes(VIRTUAL_QWIK_DEVTOOLS_KEY)) {
 						const importLine = `import { ${INNER_USE_HOOK} } from '${VIRTUAL_QWIK_DEVTOOLS_KEY}';\n`;
 						code = importLine + code;
-					}
+					} else console.log("importing virtual qwik devtools", VIRTUAL_QWIK_DEVTOOLS_KEY, code);
 					code = parseQwikCode(code, { path: id });
 				}
 				if (id.endsWith("root.tsx")) {
@@ -8638,7 +8851,7 @@ function qwikDevtools() {
 				}
 				return {
 					code,
-					map: null
+					map: { mappings: "" }
 				};
 			}
 		},

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.mjs

@@ -2,9 +2,12 @@ import { jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, Slot } from "@qwik.dev/core";
 const DevtoolsContainer = component$(() => {
   return /* @__PURE__ */ jsx("div", {
-    class: "fixed bottom-0 right-0 z-[9999] font-sans",
-    "q:slot": "content",
-    children: /* @__PURE__ */ jsx(Slot, {})
+    class: "qwik-devtools",
+    children: /* @__PURE__ */ jsx("div", {
+      class: "fixed bottom-0 right-0 z-[9999] font-sans",
+      "q:slot": "content",
+      children: /* @__PURE__ */ jsx(Slot, {})
+    })
   });
 });
 export {

package/dist/ui/components/Tab/Tab.qwik.mjs

@@ -6,7 +6,7 @@ const Tab = component$(({ state, id, title }) => {
     title,
     class: {
       "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:bg-primary-hover hover:text-foreground": state.activeTab !== id,
+      "bg-transparent hover:bg-foreground/5 text-muted-foreground hover:text-foreground": state.activeTab !== id,
       "shadow-accent/35 bg-accent text-white shadow-lg": state.activeTab === id
     },
     children: /* @__PURE__ */ jsx(Slot, {})

package/dist/ui/components/TabContent/TabContent.qwik.mjs

@@ -10,8 +10,11 @@ const TabContent = component$(() => {
           name: "title"
         })
       }),
-      /* @__PURE__ */ jsx(Slot, {
-        name: "content"
+      /* @__PURE__ */ jsx("div", {
+        class: "flex-1 overflow-y-auto pb-6",
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "content"
+        })
       })
     ]
   });

package/dist/ui/components/ThemeToggle/{ThemeToggle.qwik.mjs → QwikThemeToggle.qwik.mjs}

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from "@qwik.dev/core/jsx-runtime";
 import { component$, useStyles$, event$, isServer } from "@qwik.dev/core";
 import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
-import { HiSunOutline, HiMoonOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { BsBrilliance } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
+import { HiSunOutline, HiMoonOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { BsBrilliance } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
 import themeTogglecss from "./themToggle.css.qwik.mjs";
 const getTheme = () => {
   if (isServer) {
@@ -23,7 +23,7 @@ const setTheme = (theme) => {
   }
   localStorage.setItem(themeStorageKey, theme);
 };
-const ThemeToggle = component$(() => {
+const QwikThemeToggle = component$(() => {
   useStyles$(themeTogglecss);
   const onClick$ = event$(() => {
     let currentTheme = getTheme();
@@ -31,8 +31,8 @@ const ThemeToggle = component$(() => {
       currentTheme = "light";
     } else if (currentTheme === "light") {
       currentTheme = "auto";
-    } else {
-      currentTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark";
+    } else if (currentTheme === "auto") {
+      currentTheme = "dark";
     }
     setTheme(currentTheme);
   });
@@ -58,7 +58,7 @@ const ThemeToggle = component$(() => {
   });
 });
 export {
-  ThemeToggle,
+  QwikThemeToggle,
   getTheme,
   setTheme
 };

package/dist/ui/components/Tree/Tree.qwik.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
 import { component$, useSignal, $ } from "@qwik.dev/core";
-import { HiChevronUpMini } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { HiChevronUpMini } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
 const TreeNodeComponent = component$((props) => {
   const isExpanded = useSignal(props.expandLevel <= props.level);
   const hasChildren = props.node.children && props.node.children.length > 0;
@@ -44,7 +44,7 @@ const TreeNodeComponent = component$((props) => {
         style: {
           paddingLeft: `${props.level * props.gap}px`
         },
-        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-700/40 font-semibold" : ""}`,
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "border border-emerald-300 bg-emerald-100 font-semibold text-emerald-700 dark:border-emerald-700/40 dark:bg-emerald-900/30 dark:text-emerald-300" : ""}`,
         onClick$: handleNodeClick,
         children: /* @__PURE__ */ jsxs("div", {
           class: `inline-flex items-center rounded-md  px-2 py-1`,

package/dist/ui/components/Tree/filterVnode.qwik.mjs

@@ -1,4 +1,4 @@
-import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getProps, _vnode_getAttr, _vnode_getFirstChild, _vnode_isMaterialized, _vnode_getNextSibling } from "@qwik.dev/core/internal";
+import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getFirstChild, _vnode_isMaterialized } from "@qwik.dev/core/internal";
 import { normalizeName } from "./vnode.qwik.mjs";
 import { htmlContainer } from "../../utils/location.qwik.mjs";
 import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
@@ -38,8 +38,8 @@ function buildTreeRecursive(vnode, materialize) {
       _vnode_getAttrKeys(currentVNode).forEach((key) => {
         if (key === QTYPE) return;
         const value = container.getHostProp(currentVNode, key);
-        _vnode_getProps(currentVNode)[_vnode_getProps(currentVNode).indexOf(key) + 1] = value;
-        vnodeObject.props[key] = _vnode_getAttr(currentVNode, key);
+        currentVNode?.setProp(key, value);
+        vnodeObject.props[key] = currentVNode?.getAttr(key);
         if (key === QRENDERFN) {
           vnodeObject.label = normalizeName(value.getSymbol());
           vnodeObject.name = normalizeName(value.getSymbol());
@@ -57,7 +57,7 @@ function buildTreeRecursive(vnode, materialize) {
         result.push(...buildTreeRecursive(firstChild));
       }
     }
-    currentVNode = _vnode_getNextSibling(currentVNode);
+    currentVNode = currentVNode.nextSibling;
   }
   return result;
 }

package/dist/ui/devtools.qwik.mjs

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, useStyles$, useStore, useSignal, useVisibleTask$, noSerialize } from "@qwik.dev/core";
-import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0_/node_modules/vite-hot-client/dist/index.qwik.mjs";
-import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiMegaphoneMini } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { BsDiagram3 } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
-import { LuFolderTree } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.6.1_lightningcss@1.30.1_tsx@4.19.2_yaml@2.8.1_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiMegaphoneMini, HiCodeBracketSolid } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { BsDiagram3 } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
+import { LuFolderTree } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 import { createClientRpc } from "./packages/kit/src/client.qwik.mjs";
 import "./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
 import { setViteClientContext, getViteClientRpc } from "./packages/kit/src/context.qwik.mjs";
@@ -21,8 +21,9 @@ import { DevtoolsContainer } from "./components/DevtoolsContainer/DevtoolsContai
 import { DevtoolsPanel } from "./components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
 import { Packages } from "./features/Packages/Packages.qwik.mjs";
 import { Inspect } from "./features/inspect/Inspect.qwik.mjs";
-import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.qwik.mjs";
+import { QwikThemeToggle } from "./components/ThemeToggle/QwikThemeToggle.qwik.mjs";
 import { ThemeScript } from "./components/ThemeToggle/theme-script.qwik.mjs";
+import { CodeBreack } from "./features/CodeBreack/CodeBreack.qwik.mjs";
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true
@@ -36,9 +37,12 @@ const QwikDevtools = component$(() => {
     npmPackages: [],
     assets: [],
     components: [],
-    routes: void 0
+    routes: void 0,
+    allDependencies: [],
+    isLoadingDependencies: false
   });
-  useVisibleTask$(async ({ track }) => {
+  const clientReady = useSignal(false);
+  useVisibleTask$(async () => {
     const hot = await tryCreateHotContext(void 0, [
       "/"
     ]);
@@ -47,36 +51,78 @@ const QwikDevtools = component$(() => {
     }
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
-    track(() => {
-      if (state.isOpen.value) {
-        const rpc = getViteClientRpc();
-        rpc.getAssetsFromPublicDir().then((data) => {
-          state.assets = data;
-        });
-        rpc.getComponents().then((data) => {
-          state.components = data;
-        });
-        rpc.getRoutes().then((data) => {
-          const children = data?.children || [];
-          const directories = children.filter((child) => child.type === "directory");
-          const values = [
-            {
-              relativePath: "",
-              name: "index",
-              type: re.DIRECTORY,
-              path: "",
-              isSymbolicLink: false,
-              children: void 0
-            },
-            ...directories
-          ];
-          state.routes = noSerialize(values);
-        });
-        rpc.getQwikPackages().then((data) => {
-          state.npmPackages = data;
-        });
-      }
-    });
+    clientReady.value = true;
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const assets = await rpc.getAssetsFromPublicDir();
+      state.assets = assets;
+    } catch (error) {
+      console.error("Failed to load assets:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const components = await rpc.getComponents();
+      state.components = components;
+    } catch (error) {
+      console.error("Failed to load components:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const routes = await rpc.getRoutes();
+      const children = routes?.children || [];
+      const directories = children.filter((child) => child.type === "directory");
+      const values = [
+        {
+          relativePath: "",
+          name: "index",
+          type: re.DIRECTORY,
+          path: "",
+          isSymbolicLink: false,
+          children: void 0
+        },
+        ...directories
+      ];
+      state.routes = noSerialize(values);
+    } catch (error) {
+      console.error("Failed to load routes:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const qwikPackages = await rpc.getQwikPackages();
+      state.npmPackages = qwikPackages;
+    } catch (error) {
+      console.error("Failed to load Qwik packages:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    state.isLoadingDependencies = true;
+    try {
+      const allDeps = await rpc.getAllDependencies();
+      state.allDependencies = allDeps;
+    } catch (error) {
+      console.error("Failed to load all dependencies:", error);
+    } finally {
+      state.isLoadingDependencies = false;
+    }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -140,9 +186,17 @@ const QwikDevtools = component$(() => {
                       class: "h-5 w-5"
                     })
                   }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "codeBreack",
+                    title: "codeBreack",
+                    children: /* @__PURE__ */ jsx(HiCodeBracketSolid, {
+                      class: "h-5 w-5"
+                    })
+                  }),
                   /* @__PURE__ */ jsx("div", {
                     class: "mt-auto",
-                    children: /* @__PURE__ */ jsx(ThemeToggle, {})
+                    children: /* @__PURE__ */ jsx(QwikThemeToggle, {})
                   })
                 ]
               }),
@@ -209,10 +263,11 @@ const QwikDevtools = component$(() => {
                   state.activeTab === "packages" && /* @__PURE__ */ jsxs(TabContent, {
                     children: [
                       /* @__PURE__ */ jsx(TabTitle, {
-                        title: "Install an npm package",
+                        title: "Project Dependencies",
                         "q:slot": "title"
                       }),
                       /* @__PURE__ */ jsx(Packages, {
+                        state,
                         "q:slot": "content"
                       })
                     ]
@@ -244,6 +299,17 @@ const QwikDevtools = component$(() => {
                         "q:slot": "content"
                       })
                     ]
+                  }),
+                  state.activeTab === "codeBreack" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "codeBreack",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(CodeBreack, {
+                        "q:slot": "content"
+                      })
+                    ]
                   })
                 ]
               })