@agile-vibe-coding/avc 0.1.0 → 0.2.3

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

@@ -0,0 +1,353 @@
+import { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { getAgentList } from '../../lib/api';
+import { AgentEditorPopup } from './AgentEditorPopup';
+
+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: 'agent-selector',            label: 'Agent Selector',            note: 'Selects relevant validators per Epic/Story based on project context' },
+      ]},
+      { phase: 'Documentation & Enrichment', agents: [
+          { slug: 'doc-distributor',    label: 'Doc Distributor',     note: 'Moves content from parent doc into child docs (project→epic, epic→story)' },
+          { slug: 'story-doc-enricher', label: 'Story Doc Enricher',  note: 'Enriches story docs with API contracts, error tables, DB fields, business rules' },
+      ]},
+      { phase: 'Validation — Epic', agents: [
+          { slug: 'validator-selector',                label: 'Validator Selector',  note: 'Selects appropriate domain validators' },
+          { slug: 'validator-epic-solution-architect', label: 'Solution Architect' },
+          { slug: 'validator-epic-developer',          label: 'Developer' },
+          { slug: 'validator-epic-security',           label: 'Security' },
+          { slug: 'validator-epic-devops',             label: 'DevOps' },
+          { slug: 'validator-epic-cloud',              label: 'Cloud' },
+          { slug: 'validator-epic-backend',            label: 'Backend' },
+          { slug: 'validator-epic-database',           label: 'Database' },
+          { slug: 'validator-epic-api',                label: 'API' },
+          { slug: 'validator-epic-frontend',           label: 'Frontend' },
+          { slug: 'validator-epic-ui',                 label: 'UI' },
+          { slug: 'validator-epic-ux',                 label: 'UX' },
+          { slug: 'validator-epic-mobile',             label: 'Mobile' },
+          { slug: 'validator-epic-data',               label: 'Data' },
+          { slug: 'validator-epic-qa',                 label: 'QA' },
+          { slug: 'validator-epic-test-architect',     label: 'Test Architect' },
+      ]},
+      { phase: 'Solving — Epic', agents: [
+          { slug: 'solver-epic-solution-architect', label: 'Solution Architect' },
+          { slug: 'solver-epic-developer',          label: 'Developer' },
+          { slug: 'solver-epic-security',           label: 'Security' },
+          { slug: 'solver-epic-devops',             label: 'DevOps' },
+          { slug: 'solver-epic-cloud',              label: 'Cloud' },
+          { slug: 'solver-epic-backend',            label: 'Backend' },
+          { slug: 'solver-epic-database',           label: 'Database' },
+          { slug: 'solver-epic-api',                label: 'API' },
+          { slug: 'solver-epic-frontend',           label: 'Frontend' },
+          { slug: 'solver-epic-ui',                 label: 'UI' },
+          { slug: 'solver-epic-ux',                 label: 'UX' },
+          { slug: 'solver-epic-mobile',             label: 'Mobile' },
+          { slug: 'solver-epic-data',               label: 'Data' },
+          { slug: 'solver-epic-qa',                 label: 'QA' },
+          { slug: 'solver-epic-test-architect',     label: 'Test Architect' },
+      ]},
+      { phase: 'Validation — Story', agents: [
+          { slug: 'validator-story-solution-architect', label: 'Solution Architect' },
+          { slug: 'validator-story-developer',          label: 'Developer' },
+          { slug: 'validator-story-security',           label: 'Security' },
+          { slug: 'validator-story-devops',             label: 'DevOps' },
+          { slug: 'validator-story-cloud',              label: 'Cloud' },
+          { slug: 'validator-story-backend',            label: 'Backend' },
+          { slug: 'validator-story-database',           label: 'Database' },
+          { slug: 'validator-story-api',                label: 'API' },
+          { slug: 'validator-story-frontend',           label: 'Frontend' },
+          { slug: 'validator-story-ui',                 label: 'UI' },
+          { slug: 'validator-story-ux',                 label: 'UX' },
+          { slug: 'validator-story-mobile',             label: 'Mobile' },
+          { slug: 'validator-story-data',               label: 'Data' },
+          { slug: 'validator-story-qa',                 label: 'QA' },
+          { slug: 'validator-story-test-architect',     label: 'Test Architect' },
+      ]},
+      { phase: 'Solving — Story', agents: [
+          { slug: 'solver-story-solution-architect', label: 'Solution Architect' },
+          { slug: 'solver-story-developer',          label: 'Developer' },
+          { slug: 'solver-story-security',           label: 'Security' },
+          { slug: 'solver-story-devops',             label: 'DevOps' },
+          { slug: 'solver-story-cloud',              label: 'Cloud' },
+          { slug: 'solver-story-backend',            label: 'Backend' },
+          { slug: 'solver-story-database',           label: 'Database' },
+          { slug: 'solver-story-api',                label: 'API' },
+          { slug: 'solver-story-frontend',           label: 'Frontend' },
+          { slug: 'solver-story-ui',                 label: 'UI' },
+          { slug: 'solver-story-ux',                 label: 'UX' },
+          { slug: 'solver-story-mobile',             label: 'Mobile' },
+          { slug: 'solver-story-data',               label: 'Data' },
+          { slug: 'solver-story-qa',                 label: 'QA' },
+          { slug: 'solver-story-test-architect',     label: 'Test Architect' },
+      ]},
+    ],
+  },
+  {
+    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 [openAgent, setOpenAgent] = useState(null);    // slug | 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));
+  }, []);
+
+  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;
+  const forceOpen = q.length > 0;
+
+  // Count customized agents per ceremony for the badge
+  const countCustomized = (ceremony) =>
+    ceremony.phases
+      .flatMap(p => p.agents)
+      .filter(a => 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.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 isCustomized = agentStatus[agent.slug] ?? false;
+                              return (
+                                <button
+                                  key={`${ceremony.ceremony}-${agent.slug}`}
+                                  type="button"
+                                  onClick={() => setOpenAgent(agent.slug)}
+                                  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>
+                                    {agent.note && (
+                                      <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>
+                                  )}
+                                </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 }))}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { saveApiKeys } from '../../lib/api';
+
+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: 'openai',    label: 'OpenAI', envKey: 'OPENAI_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'
+
+  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);
+    }
+  };
+
+  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>
+
+        <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}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+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': 'Plans and assigns work items for the upcoming sprint based on team capacity and priorities.',
+  'seed':            'Seeds the initial project work item structure from the project documentation.',
+};
+
+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}
+          models={models}
+          missionGenValidation={activeWorkflow === 'sponsor-call' ? missionGenValidation : null}
+          onClose={() => setActiveWorkflow(null)}
+          onSave={handleCeremonySave}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { saveCostThresholds } from '../../lib/api';
+
+const CEREMONIES = [
+  { key: 'sponsor-call',    label: 'Sponsor Call',    desc: 'Wizard to define project mission, scope, and architecture' },
+  { key: 'sprint-planning', label: 'Sprint Planning',  desc: 'Generates epics, stories, and feature contexts' },
+  { key: 'seed',            label: 'Seed',             desc: 'Populates initial epics and stories from a seed document' },
+];
+
+function initState(costThresholds) {
+  const state = {};
+  for (const { key } of CEREMONIES) {
+    const val = costThresholds?.[key];
+    state[key] = val != null ? String(val) : '';
+  }
+  return state;
+}
+
+export function CostThresholdsTab({ settings, onSaved }) {
+  const [values, setValues] = useState(() => initState(settings.costThresholds));
+  const [status, setStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+
+  const update = (key, val) => {
+    setValues((prev) => ({ ...prev, [key]: val }));
+  };
+
+  const handleSave = async () => {
+    setStatus('saving');
+    try {
+      const payload = {};
+      for (const { key } of CEREMONIES) {
+        const raw = values[key].trim();
+        payload[key] = raw === '' ? null : parseFloat(raw) || null;
+      }
+      await saveCostThresholds(payload);
+      setStatus('saved');
+      onSaved();
+      setTimeout(() => setStatus(null), 2000);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus(null), 2000);
+    }
+  };
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <p className="text-xs text-slate-500">
+        Set a maximum spend (in <strong>USD</strong>) per ceremony run. Leave empty for unlimited.
+        When the running cost exceeds the limit, the ceremony stops automatically.
+      </p>
+
+      <div className="flex flex-col gap-2">
+        {CEREMONIES.map(({ key, label, desc }) => (
+          <div key={key} className="border border-slate-200 rounded-lg p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-slate-800">{label}</div>
+                <div className="text-xs text-slate-500 mt-0.5">{desc}</div>
+              </div>
+              <div className="flex items-center gap-1.5 shrink-0">
+                <span className="text-sm text-slate-500">$</span>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={values[key]}
+                  onChange={(e) => update(key, e.target.value)}
+                  placeholder="Unlimited"
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 w-28 placeholder:text-slate-400"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-end pt-1">
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={status === 'saving'}
+          className="px-4 py-2 text-sm font-medium bg-slate-900 text-white rounded-md hover:bg-slate-700 transition-colors disabled:opacity-40"
+        >
+          {status === 'saving' ? (
+            <span className="inline-flex items-center gap-2">
+              <span className="w-3.5 h-3.5 border border-white/40 border-t-white rounded-full animate-spin" />
+              Saving…
+            </span>
+          ) : status === 'saved' ? '✓ Saved' : status === 'error' ? '✗ Error' : 'Save Cost Limits'}
+        </button>
+      </div>
+    </div>
+  );
+}