fix(annotate): make Ask AI announcement provider cards clickable (#972) (#975)

The PlanAIAnnouncementDialog rendered provider cards as plain <div>s with
selection styling but no onClick, so clicking a card did nothing despite
the UI implying it switched the active AI provider.

Cards now render as buttons for actually-detected providers and call the
existing AI config change handler (same path as the Settings provider
selector). Providers that aren't installed are shown greyed out as
"not installed" rather than appearing selectable.

The dialog is fed the raw detected provider list (aiProviders) instead of
visibleAIProviders, so the agent-terminal substitution doesn't make every
card read "not installed".

Author: backnotprop

packages/editor/App.tsx

@@ -4655,6 +4655,8 @@ const App: React.FC = () => {
           isOpen={shouldShowPlanAIAnnouncement}
           origin={origin}
           providerName={selectedAIProvider?.name ?? null}
+          providers={aiProviders}
+          onSelectProvider={(providerId) => handleAIConfigChange({ providerId })}
           onOpenAI={handleOpenAIAnnouncement}
           onDismiss={dismissPlanAIAnnouncement}
         />

packages/ui/components/PlanAIAnnouncementDialog.tsx

@@ -5,10 +5,18 @@ import { AGENT_CONFIG, getAgentAIProviderTypes, getAgentName } from '@plannotato
 import { SparklesIcon } from './SparklesIcon';
 import { getProviderMeta } from './ProviderIcons';
 
+interface PlanAIAnnouncementProvider {
+  id: string;
+  name: string;
+}
+
 interface PlanAIAnnouncementDialogProps {
   isOpen: boolean;
   origin?: Origin | null;
   providerName?: string | null;
+  /** Actually-detected providers (installed + authenticated). Cards matching one of these are selectable. */
+  providers?: PlanAIAnnouncementProvider[];
+  onSelectProvider?: (providerId: string) => void;
   onOpenAI: () => void;
   onDismiss: () => void;
 }
@@ -27,6 +35,8 @@ export const PlanAIAnnouncementDialog: React.FC<PlanAIAnnouncementDialogProps> =
   isOpen,
   origin,
   providerName,
+  providers = [],
+  onSelectProvider,
   onOpenAI,
   onDismiss,
 }) => {
@@ -67,25 +77,55 @@ export const PlanAIAnnouncementDialog: React.FC<PlanAIAnnouncementDialogProps> =
                   const meta = getProviderMeta(providerType);
                   const Icon = meta.icon;
                   const isSelected = providerType === providerName;
-                  return (
-                    <div
-                      key={providerType}
-                      className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 ${
-                        isSelected
-                          ? 'border-primary bg-primary/5'
-                          : 'border-border bg-muted/35'
-                      }`}
-                    >
+                  // A card is selectable only if the provider is actually detected on this machine.
+                  const detected = providers.find(p => p.name === providerType) ?? null;
+                  const isSelectable = Boolean(detected && onSelectProvider);
+
+                  const inner = (
+                    <>
                       <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-background/70 text-muted-foreground">
                         <Icon className="h-[18px] w-[18px]" />
                       </div>
                       <div className="min-w-0">
                         <div className="truncate text-sm font-medium">{meta.label}</div>
-                        {isSelected && (
+                        {isSelected ? (
                           <div className="text-[10px] uppercase tracking-wide text-primary">selected</div>
-                        )}
+                        ) : !detected ? (
+                          <div className="text-[10px] text-muted-foreground/60">not installed</div>
+                        ) : null}
                       </div>
-                    </div>
+                    </>
+                  );
+
+                  if (!isSelectable) {
+                    return (
+                      <div
+                        key={providerType}
+                        className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 ${
+                          isSelected
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border bg-muted/35 opacity-60'
+                        }`}
+                      >
+                        {inner}
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={providerType}
+                      type="button"
+                      onClick={() => onSelectProvider?.(detected!.id)}
+                      aria-pressed={isSelected}
+                      className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 text-left transition-colors ${
+                        isSelected
+                          ? 'border-primary bg-primary/5'
+                          : 'border-border bg-muted/35 hover:border-muted-foreground/30 hover:bg-muted/60'
+                      }`}
+                    >
+                      {inner}
+                    </button>
                   );
                 })}
               </div>