@agile-vibe-coding/avc 0.2.3 → 0.3.2

package/kanban/client/src/components/ceremony/ProviderSwitcherButton.jsx

@@ -0,0 +1,290 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+import { saveCeremonies, getLocalModels } from '../../lib/api';
+
+// Map ceremony provider name → apiKeys property name
+const PROVIDER_TO_KEY = { claude: 'anthropic', gemini: 'gemini', openai: 'openai', xiaomi: 'xiaomi', local: 'local' };
+// Display labels (extendable as new providers are added)
+const PROVIDER_LABELS = { claude: 'Claude', gemini: 'Gemini', openai: 'OpenAI', xiaomi: 'Xiaomi MiMo', local: 'Local LLM', custom: 'Custom' };
+
+/**
+ * Inspect all stage and validation provider fields to determine whether a
+ * ceremony is using a single provider or a mix.
+ * Returns the provider name when uniform, or 'custom' when mixed.
+ */
+function detectProvider(ceremony) {
+  const providers = new Set();
+  for (const stage of Object.values(ceremony?.stages || {})) {
+    if (stage?.provider) providers.add(stage.provider);
+  }
+  // Sponsor-call validation sub-models
+  if (ceremony?.validation?.provider) providers.add(ceremony.validation.provider);
+  if (ceremony?.validation?.documentation?.provider) providers.add(ceremony.validation.documentation.provider);
+  if (ceremony?.validation?.refinement?.provider) providers.add(ceremony.validation.refinement.provider);
+
+  if (providers.size === 0) return ceremony?.provider || null;
+  if (providers.size === 1) return [...providers][0];
+  return 'custom';
+}
+
+/**
+ * Apply a provider preset to a ceremony object (immutable).
+ * Merges preset provider/model/stages while preserving non-model keys
+ * (useContextualSelection, maxIterations, etc.) from the existing config.
+ */
+function applyProviderPreset(ceremony, providerKey) {
+  const preset = ceremony.providerPresets?.[providerKey];
+  if (!preset) return ceremony;
+
+  const updated = { ...ceremony, provider: preset.provider, defaultModel: preset.defaultModel };
+
+  // Merge stages: start from current stages to preserve extra keys, overlay preset values
+  const newStages = {};
+  const allStageNames = new Set([
+    ...Object.keys(updated.stages || {}),
+    ...Object.keys(preset.stages || {}),
+  ]);
+  for (const stageName of allStageNames) {
+    const existing = updated.stages?.[stageName] ?? {};
+    const presetStage = preset.stages?.[stageName];
+    if (presetStage) {
+      newStages[stageName] = { ...existing, provider: presetStage.provider, model: presetStage.model };
+    } else {
+      newStages[stageName] = existing;
+    }
+  }
+  updated.stages = newStages;
+
+  // Handle validation (sponsor-call specific)
+  if (preset.validation && updated.validation) {
+    updated.validation = {
+      ...updated.validation,
+      provider: preset.validation.provider,
+      model: preset.validation.model,
+    };
+    if (preset.validation.refinement && updated.validation.refinement) {
+      updated.validation.refinement = {
+        ...updated.validation.refinement,
+        provider: preset.validation.refinement.provider,
+        model: preset.validation.refinement.model,
+      };
+    }
+    if (preset.validation.documentation && updated.validation.documentation) {
+      updated.validation.documentation = {
+        ...updated.validation.documentation,
+        provider: preset.validation.documentation.provider,
+        model: preset.validation.documentation.model,
+      };
+    }
+  }
+
+  return updated;
+}
+
+/**
+ * Apply a local model to all stages of a ceremony (immutable).
+ * Sets every stage + validation area to { provider: 'local', model: modelId }.
+ */
+function applyLocalModel(ceremony, modelId) {
+  const updated = { ...ceremony, provider: 'local', defaultModel: modelId };
+
+  // Set all stages to local
+  const newStages = {};
+  for (const [stageName, existing] of Object.entries(updated.stages || {})) {
+    newStages[stageName] = { ...existing, provider: 'local', model: modelId };
+  }
+  updated.stages = newStages;
+
+  // Set validation (sponsor-call specific)
+  if (updated.validation) {
+    updated.validation = { ...updated.validation, provider: 'local', model: modelId };
+    if (updated.validation.documentation) {
+      updated.validation.documentation = { ...updated.validation.documentation, provider: 'local', model: modelId };
+    }
+    if (updated.validation.refinement) {
+      updated.validation.refinement = { ...updated.validation.refinement, provider: 'local', model: modelId };
+    }
+  }
+
+  return updated;
+}
+
+export function ProviderSwitcherButton({ ceremonyName, ceremonies, apiKeys, onApplied }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [localServers, setLocalServers] = useState(null); // null = not yet probed
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const ceremony = ceremonies?.find((c) => c.name === ceremonyName);
+  const currentProvider = detectProvider(ceremony);
+  const presets = ceremony?.providerPresets;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setLocalExpanded(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen]);
+
+  // Probe local servers when dropdown opens
+  useEffect(() => {
+    if (!isOpen || localServers !== null) return;
+    getLocalModels()
+      .then((data) => setLocalServers(data.servers || []))
+      .catch(() => setLocalServers([]));
+  }, [isOpen, localServers]);
+
+  if (!presets || Object.keys(presets).length === 0) return null;
+
+  const providerKeys = Object.keys(presets);
+  const currentLabel = PROVIDER_LABELS[currentProvider] || currentProvider || '—';
+
+  const handleSelect = async (providerKey) => {
+    if (!ceremony || providerKey === currentProvider) { setIsOpen(false); return; }
+    setIsOpen(false);
+    setLocalExpanded(false);
+    setSaving(true);
+    try {
+      const updated = applyProviderPreset(ceremony, providerKey);
+      const updatedCeremonies = ceremonies.map((c) => c.name === ceremonyName ? updated : c);
+      await saveCeremonies(updatedCeremonies, null);
+      onApplied(updatedCeremonies);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSelectLocalModel = async (modelId) => {
+    if (!ceremony) return;
+    setIsOpen(false);
+    setLocalExpanded(false);
+    setSaving(true);
+    try {
+      const updated = applyLocalModel(ceremony, modelId);
+      const updatedCeremonies = ceremonies.map((c) => c.name === ceremonyName ? updated : c);
+      await saveCeremonies(updatedCeremonies, null);
+      onApplied(updatedCeremonies);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const allLocalModels = (localServers || []).flatMap((srv) =>
+    srv.models.map((m) => ({ id: m.id, server: srv.label }))
+  );
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        disabled={saving}
+        onClick={() => { setIsOpen((o) => !o); setLocalExpanded(false); }}
+        className="flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-800 transition-colors disabled:opacity-60"
+        title="Switch AI provider preset"
+      >
+        {saving ? (
+          <span className="w-3 h-3 border border-slate-400 border-t-slate-700 rounded-full animate-spin" />
+        ) : (
+          <span className="font-medium">⚡ {currentLabel}</span>
+        )}
+        {!saving && <ChevronDown className="w-3 h-3" />}
+      </button>
+      {isOpen && (
+        <div className="absolute right-0 mt-1 w-56 bg-white border border-slate-200 rounded-lg shadow-lg z-50 py-1">
+          {/* Cloud provider presets (local handled separately below) */}
+          {providerKeys.filter((k) => k !== 'local').map((key) => {
+            const label = PROVIDER_LABELS[key] || key;
+            const apiKeyProp = PROVIDER_TO_KEY[key];
+            const hasKey = apiKeys?.[apiKeyProp]?.isSet ?? false;
+            const isCurrent = key === currentProvider;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => handleSelect(key)}
+                className="w-full flex items-center justify-between px-3 py-2 text-sm text-left hover:bg-slate-50 transition-colors"
+              >
+                <span className={isCurrent ? 'font-medium text-slate-900' : 'text-slate-700'}>
+                  {label}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  {isCurrent && <Check className="w-3.5 h-3.5 text-blue-500" />}
+                  <span
+                    className={`text-xs px-1.5 py-0.5 rounded-full ${
+                      hasKey ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-400'
+                    }`}
+                  >
+                    {hasKey ? 'key set' : 'no key'}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+
+          {/* Divider */}
+          <div className="border-t border-slate-100 my-1" />
+
+          {/* Local LLM option */}
+          <button
+            type="button"
+            onClick={() => {
+              if (allLocalModels.length === 1) {
+                handleSelectLocalModel(allLocalModels[0].id);
+              } else {
+                setLocalExpanded((v) => !v);
+              }
+            }}
+            className="w-full flex items-center justify-between px-3 py-2 text-sm text-left hover:bg-slate-50 transition-colors"
+          >
+            <span className={currentProvider === 'local' ? 'font-medium text-slate-900' : 'text-slate-700'}>
+              🖥 Local LLM
+            </span>
+            <div className="flex items-center gap-1.5">
+              {currentProvider === 'local' && <Check className="w-3.5 h-3.5 text-blue-500" />}
+              {localServers === null ? (
+                <span className="w-3 h-3 border border-slate-300 border-t-slate-500 rounded-full animate-spin" />
+              ) : allLocalModels.length > 0 ? (
+                <span className="text-xs px-1.5 py-0.5 rounded-full bg-green-100 text-green-700">
+                  {allLocalModels.length} model{allLocalModels.length !== 1 ? 's' : ''}
+                </span>
+              ) : (
+                <span className="text-xs px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-400">
+                  offline
+                </span>
+              )}
+            </div>
+          </button>
+
+          {/* Expanded local model list */}
+          {localExpanded && allLocalModels.length > 0 && (
+            <div className="border-t border-slate-100 bg-slate-50 py-1 max-h-48 overflow-y-auto">
+              {allLocalModels.map((lm) => (
+                <button
+                  key={`${lm.server}-${lm.id}`}
+                  type="button"
+                  onClick={() => handleSelectLocalModel(lm.id)}
+                  className="w-full px-4 py-1.5 text-xs text-left hover:bg-slate-100 transition-colors flex items-center justify-between gap-2"
+                >
+                  <span className="text-slate-700 truncate">{lm.id}</span>
+                  <span className="text-[10px] text-slate-400 flex-shrink-0">{lm.server}</span>
+                </button>
+              ))}
+            </div>
+          )}
+          {localExpanded && allLocalModels.length === 0 && (
+            <div className="px-4 py-2 text-xs text-slate-400">
+              No local server detected. Start LM Studio, Ollama, or similar.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/SponsorCallModal.jsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { X, Info, AlertTriangle, Settings as SettingsIcon } from 'lucide-react';
+import { useState, useEffect, useCallback } from 'react';
+import { X, AlertTriangle, Settings as SettingsIcon } from 'lucide-react';
 import { useCeremonyStore } from '../../store/ceremonyStore';
 import {
   analyzeDatabase,
@@ -30,6 +30,7 @@ const KEY_LABELS = {
   anthropic: 'Anthropic API Key (ANTHROPIC_API_KEY)',
   gemini: 'Google Gemini API Key (GEMINI_API_KEY)',
   openai: 'OpenAI API Key (OPENAI_API_KEY)',
+  xiaomi: 'Xiaomi MiMo API Key (XIAOMI_API_KEY)',
 };
 
 function normalizeProvider(provider = '') {
@@ -60,7 +61,7 @@ function computeMissingProviders(settings) {
   }
 
   const apiKeys = settings.apiKeys ?? {};
-  return [...needed].filter((p) => !apiKeys[p]?.isSet);
+  return [...needed].filter((p) => p !== 'local' && !apiKeys[p]?.isSet);
 }
 
 // Step definitions for the progress header (shown steps vary based on hasDb)
@@ -151,6 +152,8 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
   } = useCeremonyStore();
 
   const [analyzingMessage, setAnalyzingMessage] = useState('');
+  const [analysisError, setAnalysisError] = useState(null);  // { message, retry? }
+  const setError = (message, retryFn = null) => setAnalysisError(message ? { message, retry: retryFn } : null);
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
   const [transitioning, setTransitioning] = useState(null); // null | 'pausing' | 'cancelling'
   const [workflowOpen, setWorkflowOpen] = useState(false);
@@ -158,16 +161,21 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
   const [workflowModels, setWorkflowModels] = useState([]);
   const [workflowMissionGenValidation, setWorkflowMissionGenValidation] = useState(null);
   const [workflowAllCeremonies, setWorkflowAllCeremonies] = useState([]);
+  const [workflowApiKeys, setWorkflowApiKeys] = useState({});
   const [apiKeyCheck, setApiKeyCheck] = useState({ loading: true, missing: [] });
   const [showResumePrompt, setShowResumePrompt] = useState(false);
   const [draftData, setDraftData] = useState(null);
+  const [settings, setSettings] = useState({ ceremonies: [], apiKeys: {} });
 
   // Check required API keys when the modal opens
   useEffect(() => {
     let cancelled = false;
     getSettings()
       .then((s) => {
-        if (!cancelled) setApiKeyCheck({ loading: false, missing: computeMissingProviders(s) });
+        if (!cancelled) {
+          setApiKeyCheck({ loading: false, missing: computeMissingProviders(s) });
+          setSettings(s);
+        }
       })
       .catch(() => {
         if (!cancelled) setApiKeyCheck({ loading: false, missing: [] }); // fail open
@@ -189,12 +197,18 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
     return () => { cancelled = true; };
   }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const recheckKeys = () => {
+  const recheckKeys = useCallback(() => {
     setApiKeyCheck({ loading: true, missing: [] });
     getSettings()
       .then((s) => setApiKeyCheck({ loading: false, missing: computeMissingProviders(s) }))
       .catch(() => setApiKeyCheck({ loading: false, missing: [] }));
-  };
+  }, []);
+
+  // Auto-recheck whenever settings are saved anywhere in the app (API keys or ceremony models)
+  useEffect(() => {
+    document.addEventListener('avc:settings-saved', recheckKeys);
+    return () => document.removeEventListener('avc:settings-saved', recheckKeys);
+  }, [recheckKeys]);
 
   // Snapshot current wizard state and persist to server
   const saveDraft = (overrides = {}) => {
@@ -290,6 +304,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
 
   // Step 2 → (DB analysis) → Step 3 or 4
   const handleMissionNext = async () => {
+    setError(null);
     setAnalyzing(true);
     setAnalyzingMessage('Checking database needs…');
     try {
@@ -309,7 +324,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
       }
     } catch (err) {
       console.error('Mission analysis error:', err);
-      alert(`Analysis failed: ${err.message}`);
+      setError(err.message, handleMissionNext);
     } finally {
       setAnalyzing(false);
       setAnalyzingMessage('');
@@ -318,6 +333,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
 
   // Step 3 → Architecture analysis → Step 4
   const handleDatabaseNext = async () => {
+    setError(null);
     setAnalyzing(true);
     setAnalyzingMessage('Analysing architecture options…');
     try {
@@ -328,7 +344,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
       saveDraft({ wizardStep: 4, archOptions: archData });
     } catch (err) {
       console.error('Architecture analysis error:', err);
-      alert(`Analysis failed: ${err.message}`);
+      setError(err.message, handleDatabaseNext);
     } finally {
       setAnalyzing(false);
       setAnalyzingMessage('');
@@ -337,6 +353,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
 
   // Step 4 → Prefill → Step 5
   const handleArchitectureNext = async () => {
+    setError(null);
     setAnalyzing(true);
     setAnalyzingMessage('Pre-filling requirements from your selections…');
     try {
@@ -348,7 +365,7 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
       setTimeout(() => saveDraft({ wizardStep: 5, prefillResult: prefill }), 0);
     } catch (err) {
       console.error('Prefill error:', err);
-      alert(`Prefill failed: ${err.message}`);
+      setError(err.message, handleArchitectureNext);
     } finally {
       setAnalyzing(false);
       setAnalyzingMessage('');
@@ -526,14 +543,15 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
                     setWorkflowModels(m);
                     setWorkflowMissionGenValidation(s.missionGenerator?.validation ?? null);
                     setWorkflowAllCeremonies(s.ceremonies || []);
+                    setWorkflowApiKeys(s.apiKeys || {});
                     setWorkflowOpen(true);
                   } catch {}
                 }}
-                className="flex items-center gap-1 text-xs text-slate-400 hover:text-blue-500 transition-colors whitespace-nowrap"
-                title="View ceremony workflow"
+                className="flex items-center gap-1.5 text-xs font-medium text-slate-500 hover:text-blue-600 bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 rounded-md px-2.5 py-1.5 transition-colors whitespace-nowrap"
+                title="Configure ceremony models"
               >
-                <Info className="w-3.5 h-3.5" />
-                How it works
+                <SettingsIcon className="w-3.5 h-3.5" />
+                Select Model(s)
               </button>
             )}
             {ceremonyStatus !== 'running' && (
@@ -593,6 +611,48 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
           )}
         </div>
 
+        {/* Error banner — shown above status bar when an analysis step fails */}
+        {analysisError && (
+          <div className="flex-shrink-0 border-t border-red-200 bg-red-50 px-6 py-3">
+            <div className="flex items-start gap-2">
+              <span className="text-red-500 flex-shrink-0 mt-0.5 text-sm">✕</span>
+              <div className="flex-1 min-w-0">
+                {analysisError.message?.includes('n_keep') || analysisError.message?.includes('n_ctx') || analysisError.message?.includes('context length') || analysisError.message?.includes('context_length') ? (
+                  <>
+                    <p className="text-xs font-medium text-red-700">Context length exceeded</p>
+                    <p className="text-xs text-red-600 mt-0.5">
+                      The prompt is too large for this model's context window. Increase the context length in your local server (e.g. LM Studio → Model Settings → Context Length), then click Retry.
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <p className="text-xs font-medium text-red-700">Analysis failed</p>
+                    <p className="text-xs text-red-600 mt-0.5 break-words">{analysisError.message}</p>
+                  </>
+                )}
+                <div className="flex items-center gap-3 mt-2">
+                  {analysisError.retry && (
+                    <button
+                      type="button"
+                      onClick={() => { const fn = analysisError.retry; setError(null); fn(); }}
+                      className="text-xs font-medium text-white bg-red-600 hover:bg-red-700 px-3 py-1 rounded transition-colors"
+                    >
+                      Retry
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setError(null)}
+                    className="text-xs font-medium text-red-700 hover:text-red-900 underline underline-offset-2"
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Status bar — always rendered to prevent height flicker */}
         <div className="flex-shrink-0 border-t border-slate-100 px-6 h-8 flex items-center gap-2">
           {analyzingMessage && (
@@ -607,11 +667,18 @@ export function SponsorCallModal({ onClose, onOpenSettings, costLimitPending, on
       {workflowOpen && workflowCeremony && (
         <CeremonyWorkflowModal
           ceremony={workflowCeremony}
+          allCeremonies={workflowAllCeremonies}
+          apiKeys={workflowApiKeys}
           models={workflowModels}
           missionGenValidation={workflowMissionGenValidation}
           readOnly={ceremonyStatus === 'running'}
           onSave={ceremonyStatus !== 'running' ? handleWorkflowSave : undefined}
           onClose={handleWorkflowClose}
+          onCeremoniesUpdated={(updated) => {
+            setWorkflowAllCeremonies(updated);
+            const sc = updated.find((c) => c.name === 'sponsor-call');
+            if (sc) setWorkflowCeremony(sc);
+          }}
         />
       )}
     </div>