fix(ui): use state-driven isExtension flag instead of runtime isBrowser check

The isBrowser + window.__QWIK_DEVTOOLS_DATA_PROVIDER__ check inside
component$ was unreliable in Qwik's rendering model, leaving Vite-only
tabs visible in extension mode. Replaced with an isExtension flag set
at state creation time so it is available from the very first render.
Also removed the unused disabled prop from Tab.

Author: Aejkatappaja

packages/ui/src/components/Tab/Tab.tsx

@@ -5,27 +5,24 @@ interface TabProps {
   state: State;
   id: TabName;
   title: string;
-  disabled?: boolean;
 }
 
-export const Tab = component$<TabProps>(({ state, id, title, disabled }) => {
+export const Tab = component$<TabProps>(({ state, id, title }) => {
   const isActive = state.activeTab === id;
 
   return (
     <button
       onClick$={() => {
-        if (!disabled) state.activeTab = id;
+        state.activeTab = id;
       }}
-      title={disabled ? `${title} (overlay only)` : title}
+      title={title}
       class={[
         'relative flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 ease-out select-none',
-        disabled
-          ? 'text-muted-foreground/30 cursor-not-allowed'
-          : isActive
-            ? 'bg-primary/15 text-primary cursor-pointer'
-            : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground cursor-pointer',
+        isActive
+          ? 'bg-primary/15 text-primary cursor-pointer'
+          : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground cursor-pointer',
       ]}
-      style={isActive && !disabled ? { boxShadow: 'inset 3px 0 0 0 var(--color-primary)' } : {}}
+      style={isActive ? { boxShadow: 'inset 3px 0 0 0 var(--color-primary)' } : {}}
     >
       <Slot />
     </button>

packages/ui/src/devtools/DevtoolsContent.tsx

@@ -1,4 +1,4 @@
-import { component$, isBrowser } from '@qwik.dev/core';
+import { component$ } from '@qwik.dev/core';
 import type { AssetInfo } from '@devtools/kit';
 import { IconMonitor } from '../components/Icons/Icons';
 import { TabContent } from '../components/TabContent/TabContent';
@@ -50,8 +50,7 @@ const ViteOnlyPlaceholder = component$<{ feature: string }>(({ feature }) => {
 });
 
 export const DevtoolsContent = component$<DevtoolsContentProps>(({ state }) => {
-  const isExtensionMode =
-    isBrowser && !!window.__QWIK_DEVTOOLS_DATA_PROVIDER__;
+  const isExtensionMode = state.isExtension;
   const assetSummary = formatAssetSummary(state.assets);
 
   switch (state.activeTab) {

packages/ui/src/devtools/DevtoolsSidebar.tsx

@@ -1,4 +1,4 @@
-import { component$, isBrowser } from '@qwik.dev/core';
+import { component$ } from '@qwik.dev/core';
 import { Tab } from '../components/Tab/Tab';
 import { QwikThemeToggle } from '../components/ThemeToggle/QwikThemeToggle';
 import type { DevtoolsState } from './state';
@@ -9,12 +9,10 @@ interface DevtoolsSidebarProps {
 }
 
 export const DevtoolsSidebar = component$<DevtoolsSidebarProps>(({ state }) => {
-  const isExtension = isBrowser && !!window.__QWIK_DEVTOOLS_DATA_PROVIDER__;
-
   return (
     <div class="glass-bg border-r border-glass-border shadow-r flex h-full w-16 flex-col items-center justify-start gap-3 p-3 md:w-20">
       {devtoolsTabs
-        .filter((tab) => !(isExtension && tab.viteOnly))
+        .filter((tab) => !(state.isExtension && tab.viteOnly))
         .map((tab) => (
           <Tab
             key={tab.id}

packages/ui/src/devtools/QwikDevtoolsExtension.tsx

@@ -17,7 +17,7 @@ import { DevtoolsSidebar } from './DevtoolsSidebar';
  * It must be a separate element so descendant selectors match.
  */
 export const QwikDevtoolsExtension = component$(() => {
-  const state = useStore<DevtoolsState>(createDevtoolsState());
+  const state = useStore<DevtoolsState>(createDevtoolsState({ isExtension: true }));
 
   useVisibleTask$(async () => {
     await loadDevtoolsData(state);

packages/ui/src/devtools/state.ts

@@ -34,9 +34,11 @@ export interface DevtoolsState {
   lastPanelBounds: DevtoolsPanelBounds | null;
   /** Whether the Vite devtools plugin overlay is also active on the page. */
   vitePluginDetected?: boolean;
+  /** True when running inside the browser extension panel (no Vite server). */
+  isExtension: boolean;
 }
 
-export function createDevtoolsState(): DevtoolsState {
+export function createDevtoolsState(opts?: { isExtension?: boolean }): DevtoolsState {
   return {
     isOpen: false,
     isPanelFullscreen: false,
@@ -54,5 +56,6 @@ export function createDevtoolsState(): DevtoolsState {
       height: 0,
     },
     lastPanelBounds: null,
+    isExtension: opts?.isExtension ?? false,
   };
 }

packages/ui/src/features/Overview/Overview.tsx

@@ -1,4 +1,4 @@
-import { $, component$, isBrowser, sync$ } from '@qwik.dev/core';
+import { $, component$, sync$ } from '@qwik.dev/core';
 import {
   IconCubeOutline,
   IconFolderTree,
@@ -12,7 +12,7 @@ interface OverviewProps {
 }
 
 export const Overview = component$(({ state }: OverviewProps) => {
-  const isExtension = isBrowser && !!window.__QWIK_DEVTOOLS_DATA_PROVIDER__;
+  const isExtension = state.isExtension;
   const pageJump = $((pageName: TabName) => {
     state.activeTab = pageName;
   });