@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/components/settings/AgentsTab.jsx

@@ -0,0 +1,381 @@
+import { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight, Pencil } from 'lucide-react';
+import { getAgentList, getCheckList } from '../../lib/api';
+import { AgentEditorPopup } from './AgentEditorPopup';
+import { CheckEditorPopup } from './CheckEditorPopup';
+
+const CEREMONY_STRUCTURE = [
+  {
+    ceremony: 'Sponsor Call',
+    color: 'blue',
+    phases: [
+      { phase: 'Mission & Scope', agents: [
+          { slug: 'mission-scope-generator',   label: 'Mission Scope Generator',    note: 'Generates mission & initial scope' },
+          { slug: 'mission-scope-validator',   label: 'Mission Scope Validator',    note: 'Validates mission quality' },
+      ]},
+      { phase: 'Questionnaire', agents: [
+          { slug: 'suggestion-product-manager',      label: 'Product Manager',           note: 'Fills Initial Scope' },
+          { slug: 'suggestion-ux-researcher',        label: 'UX Researcher',             note: 'Fills Target Users' },
+          { slug: 'suggestion-deployment-architect', label: 'Deployment Architect',      note: 'Fills Deployment Target' },
+          { slug: 'suggestion-technical-architect',  label: 'Technical Architect',       note: 'Fills Technical Considerations' },
+          { slug: 'suggestion-security-specialist',  label: 'Security Specialist',       note: 'Fills Security & Compliance' },
+          { slug: 'architecture-recommender',        label: 'Architecture Recommender',  note: 'Recommends deployment architectures' },
+          { slug: 'database-recommender',            label: 'Database Recommender',      note: 'Recommends database type' },
+          { slug: 'database-deep-dive',              label: 'Database Deep Dive',        note: 'Detailed database analysis' },
+          { slug: 'question-prefiller',              label: 'Question Prefiller',        note: 'Pre-fills answers from architecture' },
+      ]},
+      { phase: 'Documentation', agents: [
+          { slug: 'project-documentation-creator', label: 'Documentation Creator',  note: 'Creates project documentation' },
+          { slug: 'validator-documentation',       label: 'Documentation Validator', note: 'Validates documentation quality' },
+      ]},
+      { phase: 'Context', agents: [
+          { slug: 'migration-guide-generator', label: 'Migration Guide Generator', note: 'Generates cloud migration guide' },
+      ]},
+    ],
+  },
+  {
+    ceremony: 'Sprint Planning',
+    color: 'purple',
+    phases: [
+      { phase: 'Decomposition', agents: [
+          { slug: 'epic-story-decomposer', label: 'Epic Story Decomposer', note: 'Breaks scope into epics & stories' },
+      ]},
+      { phase: 'Contextual Selection', agents: [
+          { slug: 'project-context-extractor', label: 'Project Context Extractor', note: 'Extracts project traits (once per run) to inform validator selection' },
+          { slug: 'validator-selector',        label: 'Validator Selector',        note: 'Selects appropriate domain validators' },
+          { slug: 'agent-selector',            label: 'Agent Selector',            note: 'Selects relevant validators per Epic/Story based on project context' },
+      ]},
+      { phase: 'Context Generation', agents: [
+          { slug: 'context-writer-epic',   label: 'Context Writer (Epic)',   note: 'Writes complete canonical context.md — Purpose, Scope, NFRs, Success Criteria' },
+          { slug: 'context-reviewer-epic', label: 'Context Reviewer (Epic)', note: 'Independent accuracy audit: checks all features present, no hallucinations, sections complete' },
+          { slug: 'context-writer-story',   label: 'Context Writer (Story)',   note: 'Writes complete canonical context.md — User Story framing, Technical Notes, Scope boundaries' },
+          { slug: 'context-reviewer-story', label: 'Context Reviewer (Story)', note: 'Independent accuracy audit: checks all ACs present, no hallucinations, sections complete' },
+      ]},
+      { phase: 'Documentation & Enrichment', agents: [
+          { slug: 'doc-writer-epic',    label: 'Doc Writer (Epic)',    note: 'Generates narrative epic doc.md from canonical context.md' },
+          { slug: 'doc-writer-story',   label: 'Doc Writer (Story)',   note: 'Generates narrative story doc.md from canonical context.md' },
+          { slug: 'story-doc-enricher', label: 'Story Doc Enricher',  note: 'Enriches story docs with API contracts, error tables, DB fields, business rules' },
+      ]},
+      { phase: 'Micro-Check Definitions — Epic', agents: [
+          { slug: 'checks/epic/solution-architect', label: 'Solution Architect', note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/developer',          label: 'Developer',          note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/security',           label: 'Security',           note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/devops',             label: 'DevOps',             note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/cloud',              label: 'Cloud',              note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/backend',            label: 'Backend',            note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/database',           label: 'Database',           note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/api',                label: 'API',                note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/frontend',           label: 'Frontend',           note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/ui',                 label: 'UI',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/ux',                 label: 'UX',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/mobile',             label: 'Mobile',             note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/data',               label: 'Data',               note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/qa',                 label: 'QA',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/epic/test-architect',     label: 'Test Architect',     note: 'JSON', isCheck: true },
+      ]},
+      { phase: 'Micro-Check Definitions — Story', agents: [
+          { slug: 'checks/story/solution-architect', label: 'Solution Architect', note: 'JSON', isCheck: true },
+          { slug: 'checks/story/developer',          label: 'Developer',          note: 'JSON', isCheck: true },
+          { slug: 'checks/story/security',           label: 'Security',           note: 'JSON', isCheck: true },
+          { slug: 'checks/story/devops',             label: 'DevOps',             note: 'JSON', isCheck: true },
+          { slug: 'checks/story/cloud',              label: 'Cloud',              note: 'JSON', isCheck: true },
+          { slug: 'checks/story/backend',            label: 'Backend',            note: 'JSON', isCheck: true },
+          { slug: 'checks/story/database',           label: 'Database',           note: 'JSON', isCheck: true },
+          { slug: 'checks/story/api',                label: 'API',                note: 'JSON', isCheck: true },
+          { slug: 'checks/story/frontend',           label: 'Frontend',           note: 'JSON', isCheck: true },
+          { slug: 'checks/story/ui',                 label: 'UI',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/story/ux',                 label: 'UX',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/story/mobile',             label: 'Mobile',             note: 'JSON', isCheck: true },
+          { slug: 'checks/story/data',               label: 'Data',              note: 'JSON', isCheck: true },
+          { slug: 'checks/story/qa',                 label: 'QA',                 note: 'JSON', isCheck: true },
+          { slug: 'checks/story/test-architect',     label: 'Test Architect',     note: 'JSON', isCheck: true },
+          { slug: 'story-splitter',                    label: 'Story Splitter',     note: 'Splits oversized stories (15+ ACs) into 2-3 focused stories' },
+      ]},
+      { phase: 'Cross-Reference Checks', agents: [
+          { slug: 'checks/cross-refs/epic',  label: 'Epic Cross-Refs',  note: 'JSON', isCheck: true },
+          { slug: 'checks/cross-refs/story', label: 'Story Cross-Refs', note: 'JSON', isCheck: true },
+      ]},
+    ],
+  },
+  {
+    ceremony: 'Seed',
+    color: 'amber',
+    phases: [
+      { phase: 'Decomposition', agents: [
+          { slug: 'task-subtask-decomposer', label: 'Task Decomposer', note: 'Breaks stories into tasks & subtasks' },
+      ]},
+      { phase: 'Documentation', agents: [
+          { slug: 'doc-distributor',            label: 'Doc Distributor',           note: 'Moves content from story doc into task/subtask docs' },
+          { slug: 'feature-context-generator',  label: 'Feature Context Generator', note: 'Generates implementation context.md for each task/subtask' },
+      ]},
+    ],
+  },
+];
+
+const CEREMONY_COLORS = {
+  blue:   { border: 'border-blue-200',   header: 'bg-blue-50',   accent: 'border-l-blue-400',   text: 'text-blue-800'   },
+  purple: { border: 'border-purple-200', header: 'bg-purple-50', accent: 'border-l-purple-400', text: 'text-purple-800' },
+  amber:  { border: 'border-amber-200',  header: 'bg-amber-50',  accent: 'border-l-amber-400',  text: 'text-amber-800'  },
+  green:  { border: 'border-green-200',  header: 'bg-green-50',  accent: 'border-l-green-400',  text: 'text-green-800'  },
+  slate:  { border: 'border-slate-200',  header: 'bg-slate-50',  accent: 'border-l-slate-400',  text: 'text-slate-800'  },
+};
+
+// Flat set of all known slugs for computing "Other" group
+const KNOWN_SLUGS = new Set(
+  CEREMONY_STRUCTURE.flatMap(c => c.phases.flatMap(p => p.agents.map(a => a.slug)))
+);
+
+export function AgentsTab() {
+  const [agentStatus, setAgentStatus] = useState({});  // { slug: isCustomized }
+  const [checkStatus, setCheckStatus] = useState({});  // { 'scope/perspective': { isCustomized, checkCount } }
+  const [openAgent, setOpenAgent] = useState(null);    // slug | null
+  const [openCheck, setOpenCheck] = useState(null);    // { scope, perspective } | null
+  const [search, setSearch] = useState('');
+  const [error, setError] = useState(null);
+  // collapsed state: absence = collapsed (default), true = open
+  const [collapsed, setCollapsed] = useState({});
+
+  useEffect(() => {
+    getAgentList()
+      .then(r => {
+        const status = {};
+        r.agents.forEach(a => {
+          const slug = a.name.replace(/\.md$/, '');
+          status[slug] = a.isCustomized;
+        });
+        setAgentStatus(status);
+      })
+      .catch(err => setError(err.message));
+
+    getCheckList()
+      .then(r => {
+        const status = {};
+        r.checks.forEach(c => {
+          const key = `checks/${c.scope}/${c.perspective}`;
+          status[key] = { isCustomized: c.isCustomized, checkCount: c.checkCount };
+        });
+        setCheckStatus(status);
+      })
+      .catch(() => {}); // silently ignore if check API not available
+  }, []);
+
+  const toggle = (key) => setCollapsed(prev => ({ ...prev, [key]: !prev[key] }));
+  const isOpen = (key) => collapsed[key] === true; // default collapsed when key absent
+
+  // Build "Other" group from agents returned by the API that aren't in any ceremony structure
+  const otherAgents = Object.keys(agentStatus)
+    .filter(slug => !KNOWN_SLUGS.has(slug))
+    .map(slug => ({ slug, label: slug, note: null }));
+
+  const allCeremonies = [
+    ...CEREMONY_STRUCTURE,
+    ...(otherAgents.length > 0
+      ? [{ ceremony: 'Other', color: 'slate', phases: [{ phase: 'Other', agents: otherAgents }] }]
+      : []),
+  ];
+
+  // Filter by search query — when searching, force everything open
+  const q = search.toLowerCase();
+  const filteredCeremonies = q
+    ? allCeremonies
+        .map(c => ({
+          ...c,
+          phases: c.phases
+            .map(p => ({
+              ...p,
+              agents: p.agents.filter(a =>
+                a.label.toLowerCase().includes(q) ||
+                a.slug.toLowerCase().includes(q) ||
+                c.ceremony.toLowerCase().includes(q) ||
+                p.phase.toLowerCase().includes(q)
+              ),
+            }))
+            .filter(p => p.agents.length > 0),
+        }))
+        .filter(c => c.phases.length > 0)
+    : allCeremonies;
+
+  const hasAgentsLoaded = Object.keys(agentStatus).length > 0 || Object.keys(checkStatus).length > 0;
+  const forceOpen = q.length > 0;
+
+  // Count customized agents per ceremony for the badge
+  const countCustomized = (ceremony) =>
+    ceremony.phases
+      .flatMap(p => p.agents)
+      .filter(a => a.isCheck ? checkStatus[a.slug]?.isCustomized : agentStatus[a.slug])
+      .length;
+
+  return (
+    <div>
+      {/* Sticky search bar */}
+      <div className="sticky top-0 bg-white z-10 px-4 py-2.5 border-b border-slate-100 flex items-center justify-between gap-3">
+        <input
+          type="search"
+          placeholder="Search agents…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="w-48 rounded border border-slate-200 px-3 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        />
+        <span className="text-xs text-slate-400 italic flex-shrink-0">Click any agent to edit its prompt</span>
+      </div>
+
+      {/* Agent hierarchy list */}
+      <div className="px-4 py-4 flex flex-col gap-3">
+        {error && (
+          <p className="text-xs text-red-500">{error}</p>
+        )}
+        {filteredCeremonies.length === 0 && (
+          <p className="text-sm text-slate-400 py-4">No agents match your search.</p>
+        )}
+
+        {filteredCeremonies.map(ceremony => {
+          const colors = CEREMONY_COLORS[ceremony.color] || CEREMONY_COLORS.slate;
+          const ceremonyOpen = forceOpen || isOpen(ceremony.ceremony);
+          const customCount = countCustomized(ceremony);
+
+          return (
+            <div
+              key={ceremony.ceremony}
+              className={`rounded-xl border ${colors.border} overflow-hidden`}
+            >
+              {/* Ceremony header — clickable to collapse/expand */}
+              <button
+                type="button"
+                onClick={() => !forceOpen && toggle(ceremony.ceremony)}
+                className={`w-full flex items-center gap-2 px-4 py-2.5 border-l-4 ${colors.header} ${colors.accent} text-left`}
+              >
+                {ceremonyOpen
+                  ? <ChevronDown className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                  : <ChevronRight className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                }
+                <span className={`text-sm font-semibold flex-1 ${colors.text}`}>
+                  {ceremony.ceremony}
+                </span>
+                {customCount > 0 && (
+                  <span className="text-[10px] font-medium px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+                    {customCount} custom
+                  </span>
+                )}
+              </button>
+
+              {/* Ceremony body — collapsible */}
+              {ceremonyOpen && (
+                <div className="divide-y divide-slate-100">
+                  {ceremony.phases.map(phase => {
+                    const phaseKey = `${ceremony.ceremony}::${phase.phase}`;
+                    const phaseOpen = forceOpen || isOpen(phaseKey);
+                    const visibleAgents = phase.agents.filter(
+                      a => !hasAgentsLoaded || a.isCheck || a.slug in agentStatus
+                    );
+                    if (visibleAgents.length === 0) return null;
+
+                    return (
+                      <div key={phase.phase}>
+                        {/* Phase sub-header — indented, highlighted as non-leaf node */}
+                        <button
+                          type="button"
+                          onClick={() => !forceOpen && toggle(phaseKey)}
+                          className="w-full flex items-center gap-2 pl-6 pr-4 py-2 bg-slate-50 hover:bg-slate-100 transition-colors text-left"
+                        >
+                          {phaseOpen
+                            ? <ChevronDown className="w-3 h-3 text-slate-400 flex-shrink-0" />
+                            : <ChevronRight className="w-3 h-3 text-slate-400 flex-shrink-0" />
+                          }
+                          <span className="text-xs font-semibold text-slate-600 uppercase tracking-wide">
+                            {phase.phase}
+                          </span>
+                          <span className="text-xs text-slate-400 ml-1">
+                            {visibleAgents.length}
+                          </span>
+                        </button>
+
+                        {/* Agent rows — further indented */}
+                        {phaseOpen && (
+                          <div className="pb-1">
+                            {visibleAgents.map(agent => {
+                              const isCheck = agent.isCheck;
+                              const isCustomized = isCheck
+                                ? (checkStatus[agent.slug]?.isCustomized ?? false)
+                                : (agentStatus[agent.slug] ?? false);
+                              const checkCount = isCheck ? (checkStatus[agent.slug]?.checkCount ?? 0) : 0;
+                              const handleClick = () => {
+                                if (isCheck) {
+                                  // Parse slug: "checks/scope/perspective"
+                                  const parts = agent.slug.split('/');
+                                  setOpenCheck({ scope: parts[1], perspective: parts[2] });
+                                } else {
+                                  setOpenAgent(agent.slug);
+                                }
+                              };
+                              return (
+                                <button
+                                  key={`${ceremony.ceremony}-${agent.slug}`}
+                                  type="button"
+                                  onClick={handleClick}
+                                  className="w-full text-left pl-10 pr-4 py-1.5 hover:bg-slate-50 transition-colors flex items-center gap-3 group"
+                                >
+                                  <div className="flex-1 min-w-0">
+                                    <span className="text-sm text-slate-700 group-hover:text-slate-900">
+                                      {agent.label}
+                                    </span>
+                                    {isCheck && checkCount > 0 && (
+                                      <span className="text-xs text-blue-500 ml-2">
+                                        {checkCount} checks
+                                      </span>
+                                    )}
+                                    {agent.note && !isCheck && (
+                                      <span className="text-xs text-slate-400 italic ml-2">
+                                        {agent.note}
+                                      </span>
+                                    )}
+                                  </div>
+                                  {isCustomized && (
+                                    <span className="flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+                                      Custom
+                                    </span>
+                                  )}
+                                  <Pencil className="w-3.5 h-3.5 text-slate-300 group-hover:text-slate-500 flex-shrink-0 transition-colors" />
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Agent editor popup */}
+      {openAgent && (
+        <AgentEditorPopup
+          agentName={`${openAgent}.md`}
+          onClose={() => setOpenAgent(null)}
+          onSaved={() => setAgentStatus(prev => ({ ...prev, [openAgent]: true }))}
+          onReset={() => setAgentStatus(prev => ({ ...prev, [openAgent]: false }))}
+        />
+      )}
+
+      {/* Check editor popup */}
+      {openCheck && (
+        <CheckEditorPopup
+          scope={openCheck.scope}
+          perspective={openCheck.perspective}
+          onClose={() => setOpenCheck(null)}
+          onSaved={() => {
+            const key = `checks/${openCheck.scope}/${openCheck.perspective}`;
+            setCheckStatus(prev => ({ ...prev, [key]: { ...prev[key], isCustomized: true } }));
+          }}
+          onReset={() => {
+            const key = `checks/${openCheck.scope}/${openCheck.perspective}`;
+            setCheckStatus(prev => ({ ...prev, [key]: { ...prev[key], isCustomized: false } }));
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/settings/ApiKeysTab.jsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { saveApiKeys } from '../../lib/api';
+import { OpenAIAuthSection } from './OpenAIAuthSection';
+
+const PROVIDERS = [
+  { key: 'anthropic', label: 'Anthropic', envKey: 'ANTHROPIC_API_KEY', placeholder: 'sk-ant-…' },
+  { key: 'gemini',    label: 'Google (Gemini)', envKey: 'GEMINI_API_KEY', placeholder: 'AIza…' },
+  { key: 'xiaomi',    label: 'Xiaomi (MiMo)', envKey: 'XIAOMI_API_KEY', placeholder: 'sk-…' },
+];
+
+function ApiKeyRow({ provider, apiKeyInfo, onSaved }) {
+  const [value, setValue] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [status, setStatus] = useState(null); // null | 'saving' | 'saved' | 'error' | 'clearing'
+
+  const handleSave = async () => {
+    setStatus('saving');
+    try {
+      await saveApiKeys({ [provider.key]: value });
+      setStatus('saved');
+      setValue('');
+      onSaved();
+      setTimeout(() => setStatus(null), 2000);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus(null), 2000);
+    }
+  };
+
+  const handleClear = async () => {
+    setStatus('clearing');
+    try {
+      await saveApiKeys({ [provider.key]: '' });
+      setStatus('saved');
+      onSaved();
+      setTimeout(() => setStatus(null), 2000);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus(null), 2000);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-3 py-3 border-b border-slate-100 last:border-0">
+      {/* Provider name */}
+      <div className="w-36 flex-shrink-0">
+        <p className="text-sm font-medium text-slate-800">{provider.label}</p>
+        <p className="text-xs text-slate-400">{provider.envKey}</p>
+      </div>
+
+      {/* Status badge */}
+      <div className="w-16 flex-shrink-0">
+        {apiKeyInfo.isSet ? (
+          <span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2 py-0.5">
+            ✓ Set
+          </span>
+        ) : (
+          <span className="inline-flex items-center text-xs font-medium text-slate-400 bg-slate-50 border border-slate-200 rounded-full px-2 py-0.5">
+            Not set
+          </span>
+        )}
+      </div>
+
+      {/* Preview */}
+      {apiKeyInfo.isSet && !value && (
+        <p className="text-xs text-slate-400 font-mono flex-shrink-0">{apiKeyInfo.preview}</p>
+      )}
+
+      {/* Key input */}
+      <div className="flex-1 flex items-center gap-2 min-w-0">
+        <div className="relative flex-1">
+          <input
+            type={showKey ? 'text' : 'password'}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={apiKeyInfo.isSet ? 'Enter new key to update…' : provider.placeholder}
+            className="w-full rounded-md border border-slate-300 px-2 py-1.5 pr-8 text-xs text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
+          />
+          <button
+            type="button"
+            onClick={() => setShowKey((v) => !v)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+            tabIndex={-1}
+          >
+            {showKey ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
+          </button>
+        </div>
+
+        {apiKeyInfo.isSet && !value && (
+          <button
+            type="button"
+            onClick={handleClear}
+            disabled={status === 'clearing'}
+            className="px-3 py-1.5 text-xs font-medium border border-red-200 text-red-600 rounded-md hover:bg-red-50 transition-colors disabled:opacity-40 flex-shrink-0"
+          >
+            {status === 'clearing' ? '…' : 'Reset'}
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={!value.trim() || status === 'saving'}
+          className="px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-md hover:bg-slate-700 transition-colors disabled:opacity-40 flex-shrink-0"
+        >
+          {status === 'saving' ? (
+            <span className="inline-flex items-center gap-1">
+              <span className="w-3 h-3 border border-white/40 border-t-white rounded-full animate-spin" />
+              Saving
+            </span>
+          ) : status === 'saved' ? '✓ Saved' : status === 'error' ? '✗ Error' : 'Save'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ApiKeysTab({ settings, onSaved }) {
+  return (
+    <div className="px-5 py-4">
+      <p className="text-xs text-slate-500 mb-4">
+        API keys are stored in your project's <code className="font-mono bg-slate-100 px-1 rounded">.env</code> file.
+        Enter a new key and click Save to update. Clear the field and save to remove a key.
+      </p>
+      <div>
+        {PROVIDERS.map((provider) => (
+          <ApiKeyRow
+            key={provider.key}
+            provider={provider}
+            apiKeyInfo={settings.apiKeys[provider.key]}
+            onSaved={onSaved}
+          />
+        ))}
+        <OpenAIAuthSection
+          apiKeyInfo={settings.apiKeys.openai}
+          onSaved={onSaved}
+        />
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/settings/CeremonyModelsTab.jsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { Workflow } from 'lucide-react';
+import { saveCeremonies } from '../../lib/api';
+import { CeremonyWorkflowModal } from '../ceremony/CeremonyWorkflowModal';
+
+function humanize(str) {
+  return str
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+const CEREMONY_DESCRIPTIONS = {
+  'sponsor-call':    'Generates mission statement and project documentation through a structured AI-guided interview.',
+  'sprint-planning': 'Decomposes project scope into epics and stories with multi-agent validation and context generation.',
+  'seed':            'Decomposes a story into implementable tasks and subtasks with documentation and context files.',
+  'run':             'Implements task code in a git worktree using AI agents with traceability rules validation.',
+};
+
+export function CeremonyModelsTab({ settings, models, onSaved }) {
+  const [ceremonies, setCeremonies] = useState(
+    () => JSON.parse(JSON.stringify(settings.ceremonies || []))
+  );
+  const [missionGenValidation, setMissionGenValidation] = useState(
+    () => JSON.parse(JSON.stringify(
+      settings.missionGenerator?.validation || { maxIterations: 3, acceptanceThreshold: 95 }
+    ))
+  );
+  const [activeWorkflow, setActiveWorkflow] = useState(null);
+
+  const handleCeremonySave = async (updatedCeremony, updatedMG) => {
+    const next = ceremonies.map((c) =>
+      c.name === updatedCeremony.name ? updatedCeremony : c
+    );
+    // Always pass missionGen params; use updated value for sponsor-call, current for others
+    const missionGenArg = updatedCeremony.name === 'sponsor-call'
+      ? { validation: updatedMG || missionGenValidation }
+      : { validation: missionGenValidation };
+    await saveCeremonies(next, missionGenArg);
+    setCeremonies(next);
+    if (updatedCeremony.name === 'sponsor-call' && updatedMG) {
+      setMissionGenValidation(updatedMG);
+    }
+    onSaved();
+  };
+
+  if (!ceremonies.length) {
+    return (
+      <div className="px-5 py-8 text-center">
+        <p className="text-sm text-slate-500">
+          No ceremony configurations found yet. Run your first ceremony from the kanban board
+          to populate settings here.
+        </p>
+      </div>
+    );
+  }
+
+  const activeWorkflowCeremony = ceremonies.find((c) => c.name === activeWorkflow);
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-3">
+      {ceremonies.map((ceremony) => {
+        const description = CEREMONY_DESCRIPTIONS[ceremony.name];
+        return (
+          <div
+            key={ceremony.name}
+            className="border border-slate-200 rounded-lg px-4 py-3 flex items-center justify-between gap-4"
+          >
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-slate-800">
+                {ceremony.displayName || humanize(ceremony.name || '')}
+              </p>
+              {description && (
+                <p className="text-xs text-slate-500 mt-0.5 leading-relaxed">{description}</p>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => setActiveWorkflow(ceremony.name)}
+              className="flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 border border-blue-200 rounded-md px-3 py-1.5 transition-colors flex-shrink-0"
+            >
+              <Workflow className="w-3.5 h-3.5" />
+              Configure Models
+            </button>
+          </div>
+        );
+      })}
+
+      {activeWorkflow && activeWorkflowCeremony && (
+        <CeremonyWorkflowModal
+          ceremony={activeWorkflowCeremony}
+          allCeremonies={ceremonies}
+          apiKeys={settings.apiKeys}
+          models={models}
+          missionGenValidation={activeWorkflow === 'sponsor-call' ? missionGenValidation : null}
+          onClose={() => setActiveWorkflow(null)}
+          onSave={handleCeremonySave}
+          onCeremoniesUpdated={(updated) => {
+            setCeremonies(updated);
+            onSaved();
+          }}
+        />
+      )}
+    </div>
+  );
+}