fix(extensions): keep provider placeholders during bootstrap

src/renderer/components/extensions/ExtensionStoreView.tsx

@@ -48,6 +48,8 @@ import { PluginsPanel } from './plugins/PluginsPanel';
 import { SkillsPanel } from './skills/SkillsPanel';
 import { ExtensionsSubTabTrigger } from './ExtensionsSubTabTrigger';
 
+import type { CliProviderStatus } from '@shared/types';
+
 const ProviderCapabilityCardSkeleton = ({
   providerId,
   displayName,
@@ -82,6 +84,19 @@ const ProviderCapabilityCardSkeleton = ({
   </div>
 );
 
+function isProviderCapabilityCardLoading(
+  provider: CliProviderStatus,
+  providerLoading: boolean
+): boolean {
+  return (
+    providerLoading ||
+    (!provider.authenticated &&
+      provider.statusMessage === 'Checking...' &&
+      provider.models.length === 0 &&
+      provider.backend == null)
+  );
+}
+
 export const ExtensionStoreView = (): React.JSX.Element => {
   const tabId = useTabIdOptional();
   const {
@@ -317,7 +332,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
             <div className="mt-3 grid gap-2 md:grid-cols-2">
               {visibleProviders.map((provider) => {
                 const providerLoading = cliProviderStatusLoading[provider.providerId] === true;
-                if (providerLoading) {
+                if (isProviderCapabilityCardLoading(provider, providerLoading)) {
                   return (
                     <ProviderCapabilityCardSkeleton
                       key={provider.providerId}
@@ -365,7 +380,14 @@ export const ExtensionStoreView = (): React.JSX.Element => {
                       </Badge>
                     </div>
                     <div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
-                      <Badge variant="secondary">
+                      <Badge
+                        variant={pluginStatus === 'unsupported' ? 'outline' : 'secondary'}
+                        className={
+                          pluginStatus === 'unsupported'
+                            ? 'border-amber-500/30 bg-amber-500/10 text-amber-300'
+                            : undefined
+                        }
+                      >
                         Plugins: {formatCliExtensionCapabilityStatus(pluginStatus)}
                       </Badge>
                       <Badge variant="secondary">

test/renderer/components/extensions/ExtensionStoreView.test.ts

@@ -302,4 +302,28 @@ describe('ExtensionStoreView provider loading placeholders', () => {
       await Promise.resolve();
     });
   });
+
+  it('keeps provider placeholders visible when bootstrap data still says Checking...', async () => {
+    storeState.cliStatusLoading = false;
+    storeState.cliProviderStatusLoading = {};
+
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    await act(async () => {
+      root.render(React.createElement(ExtensionStoreView));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(host.textContent).toContain('Checking provider status...');
+    expect(host.textContent).toContain('Loading...');
+    expect(host.textContent).not.toContain('Plugins: unsupported');
+
+    await act(async () => {
+      root.unmount();
+      await Promise.resolve();
+    });
+  });
 });