@agile-vibe-coding/avc 0.1.1 → 0.3.1

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

@@ -0,0 +1,254 @@
+import { useState } from 'react';
+import { useSprintPlanningStore } from '../../store/sprintPlanningStore';
+import { confirmSprintPlanningSelection, cancelCeremony } from '../../lib/api';
+
+// ── Inner component: only mounted when hierarchy is non-null ──────────────────
+// Using a wrapper+inner pattern so useState can be lazily initialised from
+// a non-null hierarchy prop, avoiding "hooks before conditional return" issues.
+
+function SelectionContent({ hierarchy, onConfirm, onCancel }) {
+  const [epicSel, setEpicSel] = useState(() => {
+    const m = {};
+    for (const e of hierarchy.epics) m[e.id] = true;
+    return m;
+  });
+  const [storySel, setStorySel] = useState(() => {
+    const m = {};
+    for (const e of hierarchy.epics)
+      for (const s of (e.stories || []))
+        m[s.id] = true;
+    return m;
+  });
+
+  const selectedEpicCount  = Object.values(epicSel).filter(Boolean).length;
+  const totalEpicCount     = hierarchy.epics.length;
+  const selectedStoryCount = Object.values(storySel).filter(Boolean).length;
+  const totalStoryCount    = hierarchy.epics.reduce((n, e) => n + (e.stories?.length || 0), 0);
+  const canConfirm         = selectedEpicCount > 0;
+
+  const toggleEpic = (epicId, checked) => {
+    setEpicSel(prev => ({ ...prev, [epicId]: checked }));
+    const epic = hierarchy.epics.find(e => e.id === epicId);
+    if (epic) {
+      const update = {};
+      for (const s of (epic.stories || [])) update[s.id] = checked;
+      setStorySel(prev => ({ ...prev, ...update }));
+    }
+  };
+
+  const toggleStory = (epicId, storyId, checked) => {
+    const next = { ...storySel, [storyId]: checked };
+    setStorySel(next);
+    const epic = hierarchy.epics.find(e => e.id === epicId);
+    if (epic) {
+      const anyChecked = (epic.stories || []).some(s => next[s.id]);
+      setEpicSel(prev => ({ ...prev, [epicId]: anyChecked }));
+    }
+  };
+
+  const selectAll = () => {
+    const em = {}, sm = {};
+    for (const e of hierarchy.epics) {
+      em[e.id] = true;
+      for (const s of (e.stories || [])) sm[s.id] = true;
+    }
+    setEpicSel(em); setStorySel(sm);
+  };
+
+  const deselectAll = () => {
+    const em = {}, sm = {};
+    for (const e of hierarchy.epics) {
+      em[e.id] = false;
+      for (const s of (e.stories || [])) sm[s.id] = false;
+    }
+    setEpicSel(em); setStorySel(sm);
+  };
+
+  const handleConfirm = () => {
+    const selectedEpicIds  = Object.entries(epicSel).filter(([, v]) => v).map(([k]) => k);
+    const selectedStoryIds = Object.entries(storySel).filter(([, v]) => v).map(([k]) => k);
+    onConfirm(selectedEpicIds, selectedStoryIds);
+  };
+
+  return (
+    <>
+      {/* Header */}
+      <div className="px-6 pt-5 pb-4 border-b border-slate-200 flex-shrink-0">
+        <h2 className="text-base font-semibold text-slate-900">Review Decomposed Work</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          The AI has decomposed your scope into epics and stories. Select which items to carry
+          forward into validation — deselected items will be skipped entirely.
+        </p>
+      </div>
+
+      {/* Scrollable checklist */}
+      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4 min-h-0">
+        {/* Counts + select-all controls */}
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-slate-500">
+            <span className="font-medium text-slate-700">{selectedEpicCount}/{totalEpicCount}</span> epics ·{' '}
+            <span className="font-medium text-slate-700">{selectedStoryCount}/{totalStoryCount}</span> stories selected
+          </p>
+          <div className="flex items-center gap-1.5">
+            <button onClick={selectAll} className="text-xs px-2 py-0.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors">
+              Select all
+            </button>
+            <button onClick={deselectAll} className="text-xs px-2 py-0.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors">
+              Deselect all
+            </button>
+          </div>
+        </div>
+
+        {/* Two-level checklist */}
+        <div className="space-y-2">
+          {hierarchy.epics.map(epic => {
+            const epicChecked = epicSel[epic.id] ?? false;
+            const stories = epic.stories || [];
+            return (
+              <div key={epic.id} className="rounded-lg border border-slate-200 overflow-hidden">
+                {/* Epic row */}
+                <label className="flex items-start gap-3 px-4 py-3 bg-slate-50 cursor-pointer hover:bg-slate-100 select-none">
+                  <input
+                    type="checkbox"
+                    checked={epicChecked}
+                    onChange={e => toggleEpic(epic.id, e.target.checked)}
+                    className="mt-0.5 flex-shrink-0 accent-slate-900"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-semibold text-slate-900 leading-snug">{epic.name}</p>
+                    {epic.description && (
+                      <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{epic.description}</p>
+                    )}
+                    <p className="text-xs text-slate-400 mt-0.5">
+                      {stories.length} {stories.length === 1 ? 'story' : 'stories'}
+                      {epic.domain ? <span className="ml-1 text-slate-300">· {epic.domain}</span> : null}
+                    </p>
+                  </div>
+                </label>
+
+                {/* Story rows */}
+                {stories.length > 0 && (
+                  <div className="divide-y divide-slate-100">
+                    {stories.map(story => (
+                      <label
+                        key={story.id}
+                        className="flex items-start gap-3 px-4 py-2 pl-10 cursor-pointer hover:bg-slate-50 select-none"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={storySel[story.id] ?? false}
+                          onChange={e => toggleStory(epic.id, story.id, e.target.checked)}
+                          className="mt-0.5 flex-shrink-0 accent-slate-600"
+                        />
+                        <div className="min-w-0">
+                          <p className="text-xs font-medium text-slate-800">{story.name}</p>
+                          {story.userType && (
+                            <p className="text-xs text-slate-400 mt-0.5">{story.userType}</p>
+                          )}
+                        </div>
+                      </label>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-6 py-4 border-t border-slate-200 flex-shrink-0">
+        <button
+          onClick={onCancel}
+          className="px-4 py-2 text-sm rounded-lg border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+        >
+          ✕ Cancel Run
+        </button>
+        <button
+          onClick={handleConfirm}
+          disabled={!canConfirm}
+          className="px-6 py-2 text-sm font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          Confirm Selection →
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ── Outer wrapper: guards on status + hierarchy ───────────────────────────────
+
+export function EpicStorySelectionModal() {
+  const {
+    status,
+    decomposedHierarchy,
+    setStatus,
+    setStep,
+    setDecomposedHierarchy,
+    setError,
+  } = useSprintPlanningStore();
+
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+
+  // Only render when the worker is waiting for selection
+  if (status !== 'awaiting-selection' || !decomposedHierarchy) return null;
+
+  const handleConfirm = async (selectedEpicIds, selectedStoryIds) => {
+    setDecomposedHierarchy(null);
+    setStatus('running');
+    setStep(2);
+    try {
+      await confirmSprintPlanningSelection(selectedEpicIds, selectedStoryIds);
+    } catch (err) {
+      setStatus('error');
+      setError(err.message);
+    }
+  };
+
+  const handleConfirmCancel = async () => {
+    setShowCancelConfirm(false);
+    try { await cancelCeremony(); } catch (_) {}
+  };
+
+  return (
+    <div className="fixed inset-0 z-[80] flex items-center justify-center">
+      {/* Non-dismissible backdrop — user must make a selection or cancel */}
+      <div className="absolute inset-0 bg-black/60" />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
+        {/* Cancel confirmation overlay */}
+        {showCancelConfirm && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/90 rounded-2xl">
+            <div className="bg-white border border-slate-200 rounded-xl shadow-lg p-6 max-w-sm mx-4 text-center space-y-4">
+              <p className="text-base font-semibold text-slate-900">Cancel sprint planning?</p>
+              <p className="text-sm text-slate-500">
+                Any epics and stories created in this run will be permanently deleted.
+              </p>
+              <div className="flex gap-3 justify-center pt-1">
+                <button
+                  onClick={() => setShowCancelConfirm(false)}
+                  className="px-4 py-2 text-sm rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50"
+                >
+                  Go Back
+                </button>
+                <button
+                  onClick={handleConfirmCancel}
+                  className="px-4 py-2 text-sm rounded-lg bg-red-600 text-white hover:bg-red-700"
+                >
+                  Cancel Run
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <SelectionContent
+          hierarchy={decomposedHierarchy}
+          onConfirm={handleConfirm}
+          onCancel={() => setShowCancelConfirm(true)}
+        />
+      </div>
+    </div>
+  );
+}

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>
+  );
+}