@agile-vibe-coding/avc 0.2.3 → 0.3.2

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

@@ -0,0 +1,507 @@
+import { useState, useEffect } from 'react';
+import { X, RotateCcw, ChevronDown, ChevronRight, Plus, Trash2, Info } from 'lucide-react';
+import { getCheckContent, saveCheckContent, resetCheck } from '../../lib/api';
+
+// ── Severity config ──────────────────────────────────────────────────────────
+
+const SEVERITY_OPTIONS = ['critical', 'major', 'minor'];
+const SEVERITY_STYLE = {
+  critical: 'bg-red-100 text-red-800 border-red-200',
+  major:    'bg-amber-100 text-amber-800 border-amber-200',
+  minor:    'bg-slate-100 text-slate-600 border-slate-200',
+};
+
+// ── Intro / help panel ───────────────────────────────────────────────────────
+
+function HelpPanel({ isCrossRef }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="mb-2">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 text-[11px] text-blue-600 hover:text-blue-800 transition-colors"
+      >
+        <Info className="w-3.5 h-3.5" />
+        {open ? 'Hide guide' : 'How micro-checks work & field reference'}
+      </button>
+      {open && (
+        <div className="mt-2 text-[11px] leading-relaxed text-slate-600 bg-blue-50/60 border border-blue-100 rounded-lg px-4 py-3 space-y-3">
+          <div>
+            <p className="font-semibold text-slate-700 mb-1">How micro-checks are used in ceremonies</p>
+            <p>
+              During Sprint Planning validation, each epic and story is evaluated by
+              hundreds of small, independent checks instead of a single monolithic LLM call.
+              {isCrossRef
+                ? ' Cross-reference checks (Tier 2) run after all domain checks complete. They verify consistency across perspectives — for example, that security requirements match API endpoint access controls, or that database PII fields align with privacy policies.'
+                : ' Domain checks (Tier 1) run first, in parallel. Each check makes 1–2 short LLM calls: an optional applicability gate, then a YES/NO quality question. Failed checks are scored deterministically and critical/major failures trigger atomic auto-fixes (Tier 3).'}
+            </p>
+          </div>
+
+          <div>
+            <p className="font-semibold text-slate-700 mb-1">Severity levels</p>
+            <ul className="list-none space-y-0.5 ml-1">
+              <li><span className="font-mono font-semibold text-red-700">critical</span> — Failure blocks the score below 70. A single critical failure caps the score at 60; each additional one drops it by 10. Auto-fix is always attempted.</li>
+              <li><span className="font-mono font-semibold text-amber-700">major</span> — Failure caps the score between 70–89. Each major failure reduces the cap by 5. Auto-fix is attempted.</li>
+              <li><span className="font-mono font-semibold text-slate-500">minor</span> — Only minor failures allow scores of 95–100. Minor failures are reported but not auto-fixed.</li>
+            </ul>
+          </div>
+
+          <div>
+            <p className="font-semibold text-slate-700 mb-1">Field reference</p>
+            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 ml-1">
+              <dt className="font-mono text-slate-700">severity</dt>
+              <dd>How much a failure impacts the score (see above).</dd>
+              <dt className="font-mono text-slate-700">category</dt>
+              <dd>Grouping label for reporting (e.g. "security", "data-modeling"). Helps cluster related failures.</dd>
+              {!isCrossRef && <>
+                <dt className="font-mono text-slate-700">applicabilityQuestion</dt>
+                <dd>Optional gate question asked before the main check. If the LLM answers NO, the check is skipped as not applicable. Leave empty to always run. Example: "Does this epic involve user authentication?"</dd>
+                <dt className="font-mono text-slate-700">universal</dt>
+                <dd>If true, the applicability gate is skipped and the check always runs. Useful for checks that apply to every epic/story regardless of domain.</dd>
+              </>}
+              <dt className="font-mono text-slate-700">question</dt>
+              <dd>The YES/NO quality question sent to the LLM. A YES answer means the check passes. Write it so that YES = good quality. Example: "Does this story include acceptance criteria that cover error scenarios?"</dd>
+              <dt className="font-mono text-slate-700">failDescription</dt>
+              <dd>Human-readable explanation shown when the check fails. Describes what quality gap was detected.</dd>
+              <dt className="font-mono text-slate-700">failSuggestion</dt>
+              <dd>Actionable guidance for the auto-fixer (or a human) on how to address the failure. Be specific — this drives the Tier 3 atomic fix prompt.</dd>
+              {isCrossRef && <>
+                <dt className="font-mono text-slate-700">perspectives</dt>
+                <dd>Which domain perspectives this cross-reference check bridges (e.g. ["security", "api"]). Read-only — set in the JSON directly.</dd>
+                <dt className="font-mono text-slate-700">dependsOn</dt>
+                <dd>Tier 1 check IDs whose evidence this check needs. The cross-ref check only runs if all dependencies have results. Read-only — set in the JSON directly.</dd>
+              </>}
+            </dl>
+          </div>
+
+          <p className="text-[10px] text-slate-400 italic">
+            Customized checks are saved to <span className="font-mono">.avc/customized-agents/checks/</span> and
+            override the built-in defaults. Use "Reset to default" to revert.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Field editor components ──────────────────────────────────────────────────
+
+function TextField({ label, value, onChange, placeholder, rows = 2 }) {
+  return (
+    <label className="block">
+      <span className="text-[11px] font-medium text-slate-500 uppercase tracking-wide">{label}</span>
+      <textarea
+        value={value || ''}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        className="mt-0.5 w-full text-xs text-slate-800 border border-slate-200 rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400 resize-none leading-relaxed"
+      />
+    </label>
+  );
+}
+
+function SeveritySelect({ value, onChange }) {
+  return (
+    <label className="block">
+      <span className="text-[11px] font-medium text-slate-500 uppercase tracking-wide">Severity</span>
+      <select
+        value={value || 'major'}
+        onChange={e => onChange(e.target.value)}
+        className="mt-0.5 w-full text-xs border border-slate-200 rounded-md px-2 py-1.5 bg-white text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400"
+      >
+        {SEVERITY_OPTIONS.map(s => (
+          <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function InlineField({ label, value }) {
+  return (
+    <span className="text-[10px] text-slate-400">
+      <span className="font-medium">{label}:</span> <span className="font-mono text-slate-500">{value}</span>
+    </span>
+  );
+}
+
+// ── Single check card ────────────────────────────────────────────────────────
+
+function CheckCard({ check, index, isCrossRef, expanded, onToggle, onChange, onDelete }) {
+  const sev = SEVERITY_STYLE[check.severity] || SEVERITY_STYLE.minor;
+
+  const update = (field, value) => {
+    onChange(index, { ...check, [field]: value });
+  };
+
+  // Truncate question for collapsed header
+  const shortQuestion = (check.question || '').length > 90
+    ? check.question.slice(0, 90) + '…'
+    : (check.question || '(no question)');
+
+  return (
+    <div className={`border rounded-lg overflow-hidden ${expanded ? 'border-blue-200 shadow-sm' : 'border-slate-200'}`}>
+      {/* Header — always visible */}
+      <button
+        type="button"
+        onClick={onToggle}
+        className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${expanded ? 'bg-blue-50/50' : 'bg-white hover:bg-slate-50'}`}
+      >
+        {expanded
+          ? <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={`flex-shrink-0 text-[10px] font-semibold px-1.5 py-0.5 rounded border ${sev}`}>
+          {check.severity || 'major'}
+        </span>
+        <span className="flex-shrink-0 text-[10px] font-mono text-slate-400">{check.id}</span>
+        <span className="flex-1 text-xs text-slate-600 truncate min-w-0">{shortQuestion}</span>
+      </button>
+
+      {/* Expanded form */}
+      {expanded && (
+        <div className="px-3 pb-3 pt-1 bg-white border-t border-slate-100">
+          {/* Read-only metadata row */}
+          <div className="flex items-center gap-3 mb-2 flex-wrap">
+            <InlineField label="id" value={check.id} />
+            {check.category && <InlineField label="category" value={check.category} />}
+            {isCrossRef && check.perspectives && (
+              <InlineField label="perspectives" value={check.perspectives.join(', ')} />
+            )}
+            {isCrossRef && check.dependsOn && (
+              <InlineField label="dependsOn" value={check.dependsOn.join(', ')} />
+            )}
+            {!isCrossRef && check.universal !== undefined && (
+              <InlineField label="universal" value={check.universal ? 'yes' : 'no'} />
+            )}
+          </div>
+
+          <div className="grid grid-cols-[1fr_auto] gap-x-3 gap-y-2">
+            <div className="col-span-2 sm:col-span-1">
+              <SeveritySelect value={check.severity} onChange={v => update('severity', v)} />
+            </div>
+            <div className="col-span-2 sm:col-span-1">
+              <label className="block">
+                <span className="text-[11px] font-medium text-slate-500 uppercase tracking-wide">Category</span>
+                <input
+                  type="text"
+                  value={check.category || ''}
+                  onChange={e => update('category', e.target.value)}
+                  className="mt-0.5 w-full text-xs border border-slate-200 rounded-md px-2.5 py-1.5 text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                />
+              </label>
+            </div>
+          </div>
+
+          <div className="mt-2 flex flex-col gap-2">
+            {!isCrossRef && !check.universal && (
+              <TextField
+                label="Applicability Question"
+                value={check.applicabilityQuestion}
+                onChange={v => update('applicabilityQuestion', v)}
+                placeholder="When should this check run? (leave empty = always)"
+                rows={2}
+              />
+            )}
+            <TextField
+              label="Question"
+              value={check.question}
+              onChange={v => update('question', v)}
+              placeholder="The YES/NO quality question asked to the LLM"
+              rows={3}
+            />
+            <TextField
+              label="Fail Description"
+              value={check.failDescription}
+              onChange={v => update('failDescription', v)}
+              placeholder="What's wrong when this check fails"
+              rows={2}
+            />
+            <TextField
+              label="Fail Suggestion"
+              value={check.failSuggestion}
+              onChange={v => update('failSuggestion', v)}
+              placeholder="How to fix the failure"
+              rows={2}
+            />
+          </div>
+
+          {/* Delete button */}
+          <div className="mt-3 flex justify-end">
+            <button
+              type="button"
+              onClick={() => onDelete(index)}
+              className="flex items-center gap-1 text-[11px] text-red-500 hover:text-red-700 transition-colors"
+            >
+              <Trash2 className="w-3 h-3" />
+              Remove check
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Main popup ───────────────────────────────────────────────────────────────
+
+export function CheckEditorPopup({ scope, perspective, onClose, onSaved, onReset }) {
+  const [fileData, setFileData] = useState(null);         // raw API response
+  const [parsed, setParsed] = useState(null);              // full parsed object
+  const [checks, setChecks] = useState([]);                // the checks array being edited
+  const [expandedIdx, setExpandedIdx] = useState(null);    // which card is expanded
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  const [pendingReset, setPendingReset] = useState(false);
+
+  const isCrossRef = scope === 'cross-refs';
+  const displayName = isCrossRef
+    ? `cross-refs/${perspective}.json`
+    : `${scope}/${perspective}.json`;
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setPendingReset(false);
+    setExpandedIdx(null);
+    getCheckContent(scope, perspective)
+      .then(d => {
+        setFileData(d);
+        try {
+          const obj = JSON.parse(d.content);
+          setParsed(obj);
+          setChecks(JSON.parse(JSON.stringify(obj.checks || [])));
+        } catch {
+          setError('Failed to parse check file');
+        }
+      })
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [scope, perspective]);
+
+  // Dirty detection: compare current checks to original
+  const isDirty = (() => {
+    if (!fileData) return false;
+    try {
+      const original = JSON.parse(fileData.content);
+      return JSON.stringify(checks) !== JSON.stringify(original.checks || []);
+    } catch {
+      return false;
+    }
+  })();
+
+  const handleCheckChange = (index, updatedCheck) => {
+    setChecks(prev => prev.map((c, i) => i === index ? updatedCheck : c));
+    setPendingReset(false);
+  };
+
+  const handleDelete = (index) => {
+    setChecks(prev => prev.filter((_, i) => i !== index));
+    if (expandedIdx === index) setExpandedIdx(null);
+    else if (expandedIdx > index) setExpandedIdx(expandedIdx - 1);
+    setPendingReset(false);
+  };
+
+  const handleAdd = () => {
+    const prefix = isCrossRef ? 'xref' : (scope === 'epic' ? perspective.slice(0, 3) + '-epic' : perspective.slice(0, 3) + '-story');
+    const newId = `${prefix}-${String(checks.length + 1).padStart(2, '0')}`;
+    const newCheck = isCrossRef
+      ? { id: newId, tier: 2, perspectives: [], severity: 'major', category: 'consistency', dependsOn: [], question: '', failDescription: '', failSuggestion: '' }
+      : { id: newId, tier: 1, perspective, severity: 'major', category: '', universal: false, applicabilityQuestion: '', question: '', failDescription: '', failSuggestion: '' };
+    setChecks(prev => [...prev, newCheck]);
+    setExpandedIdx(checks.length);
+    setPendingReset(false);
+  };
+
+  const handleSave = async () => {
+    if (!fileData) return;
+    setSaving(true);
+    setError(null);
+    try {
+      if (pendingReset) {
+        await resetCheck(scope, perspective);
+        const obj = JSON.parse(fileData.defaultContent);
+        setParsed(obj);
+        setChecks(JSON.parse(JSON.stringify(obj.checks || [])));
+        setFileData(prev => ({ ...prev, content: prev.defaultContent, isCustomized: false }));
+        setPendingReset(false);
+        onReset?.();
+      } else {
+        // Rebuild full JSON preserving top-level fields
+        const output = { ...parsed, checks };
+        const content = JSON.stringify(output, null, 2);
+        await saveCheckContent(scope, perspective, content);
+        setFileData(prev => ({ ...prev, content, isCustomized: true }));
+        onSaved?.();
+      }
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    if (!fileData?.defaultContent) return;
+    try {
+      const obj = JSON.parse(fileData.defaultContent);
+      setChecks(JSON.parse(JSON.stringify(obj.checks || [])));
+    } catch {}
+    setPendingReset(true);
+    setExpandedIdx(null);
+  };
+
+  const canReset = fileData?.isCustomized && !pendingReset;
+
+  // Severity summary
+  const counts = { critical: 0, major: 0, minor: 0 };
+  checks.forEach(c => { if (counts[c.severity] !== undefined) counts[c.severity]++; });
+
+  return (
+    <div
+      className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div
+        className="w-full max-w-3xl bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+        style={{ height: '85vh' }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-slate-100 flex-shrink-0">
+          <div className="flex items-center gap-2 min-w-0 flex-wrap">
+            <span className="text-sm font-mono font-medium text-slate-700 truncate">
+              {displayName}
+            </span>
+            <span className="flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-blue-50 text-blue-600">
+              {checks.length} checks
+            </span>
+            {counts.critical > 0 && (
+              <span className={`flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded border ${SEVERITY_STYLE.critical}`}>
+                {counts.critical} critical
+              </span>
+            )}
+            {counts.major > 0 && (
+              <span className={`flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded border ${SEVERITY_STYLE.major}`}>
+                {counts.major} major
+              </span>
+            )}
+            {counts.minor > 0 && (
+              <span className={`flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded border ${SEVERITY_STYLE.minor}`}>
+                {counts.minor} minor
+              </span>
+            )}
+            {fileData?.isCustomized && !pendingReset && (
+              <span className="flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+                Custom
+              </span>
+            )}
+            {pendingReset && (
+              <span className="flex-shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
+                Reset pending — save to apply
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors ml-4 flex-shrink-0"
+            aria-label="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center text-sm text-slate-400">
+            <span className="w-4 h-4 border border-slate-300 border-t-slate-600 rounded-full animate-spin mr-2" />
+            Loading…
+          </div>
+        ) : error && !fileData ? (
+          <div className="flex-1 flex items-center justify-center text-sm text-red-500 px-6 text-center">
+            {error}
+          </div>
+        ) : (
+          <div className="flex-1 overflow-y-auto min-h-0 px-4 py-3">
+            <div className="flex flex-col gap-1.5">
+              <HelpPanel isCrossRef={isCrossRef} />
+              {checks.map((check, i) => (
+                <CheckCard
+                  key={check.id || i}
+                  check={check}
+                  index={i}
+                  isCrossRef={isCrossRef}
+                  expanded={expandedIdx === i}
+                  onToggle={() => setExpandedIdx(expandedIdx === i ? null : i)}
+                  onChange={handleCheckChange}
+                  onDelete={handleDelete}
+                />
+              ))}
+
+              {/* Add check button */}
+              <button
+                type="button"
+                onClick={handleAdd}
+                className="flex items-center justify-center gap-1.5 py-2 border-2 border-dashed border-slate-200 rounded-lg text-xs text-slate-400 hover:text-blue-600 hover:border-blue-300 transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                Add check
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-5 py-3 border-t border-slate-100 flex-shrink-0">
+          <div>
+            {error && !loading && (
+              <p className="text-xs text-red-600">{error}</p>
+            )}
+            {saved && (
+              <p className="text-xs text-green-600 font-medium">Saved</p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={!canReset}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-slate-500 hover:text-amber-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              title={canReset ? 'Revert to built-in defaults' : 'Only available for customized checks'}
+            >
+              <RotateCcw className="w-3 h-3" />
+              Reset to default
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-slate-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={(!isDirty && !pendingReset) || 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"
+            >
+              {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>
+              ) : pendingReset ? 'Save & Reset' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -3,8 +3,9 @@ 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' },
+  { key: 'sprint-planning', label: 'Sprint Planning',  desc: 'Decomposes project scope into epics, stories, and contexts' },
+  { key: 'seed',            label: 'Seed',             desc: 'Decomposes stories into implementable tasks and subtasks' },
+  { key: 'run',             label: 'Run',              desc: 'Implements task code in worktree with AI-powered generation and validation' },
 ];
 
 function initState(costThresholds) {

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

@@ -2,10 +2,20 @@ import { useState } from 'react';
 import { ExternalLink } from 'lucide-react';
 import { saveModelPricing } from '../../lib/api';
 
+const PROVIDERS = ['claude', 'gemini', 'openai', 'xiaomi'];
+const PROVIDER_LABELS = { claude: 'Claude', gemini: 'Gemini', openai: 'OpenAI', xiaomi: 'Xiaomi MiMo' };
+const PROVIDER_TAB_COLORS = {
+  claude: { active: 'border-orange-500 text-orange-700', badge: 'bg-orange-50 text-orange-700 border-orange-200' },
+  gemini: { active: 'border-blue-500 text-blue-700',   badge: 'bg-blue-50 text-blue-700 border-blue-200'     },
+  openai: { active: 'border-green-500 text-green-700', badge: 'bg-green-50 text-green-700 border-green-200'  },
+  xiaomi: { active: 'border-purple-500 text-purple-700', badge: 'bg-purple-50 text-purple-700 border-purple-200' },
+};
+
 const PROVIDER_COLORS = {
   claude:  'bg-orange-50 text-orange-700 border-orange-200',
   gemini:  'bg-blue-50 text-blue-700 border-blue-200',
   openai:  'bg-green-50 text-green-700 border-green-200',
+  xiaomi:  'bg-purple-50 text-purple-700 border-purple-200',
 };
 
 const UNIT_OPTIONS = [
@@ -17,8 +27,9 @@ function initState(models) {
   const state = {};
   for (const [modelId, info] of Object.entries(models)) {
     state[modelId] = {
-      input:       String(info.pricing?.input  ?? ''),
-      output:      String(info.pricing?.output ?? ''),
+      input:       String(info.pricing?.input       ?? ''),
+      inputCached: String(info.pricing?.inputCached ?? ''),
+      output:      String(info.pricing?.output      ?? ''),
       unit:        info.pricing?.unit        ?? 'million',
       source:      info.pricing?.source      ?? '',
       lastUpdated: info.pricing?.lastUpdated ?? '',
@@ -38,7 +49,15 @@ export function ModelPricingTab({ settings, onSaved }) {
   const [pricing, setPricing] = useState(() => initState(models));
   const [status, setStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
 
-  const modelEntries = Object.entries(models);
+  // Determine which providers actually have models, preserve stable order
+  const availableProviders = PROVIDERS.filter(p =>
+    Object.values(models).some(m => m.provider === p)
+  );
+  const [activeProvider, setActiveProvider] = useState(() => availableProviders[0] || 'claude');
+
+  const modelEntries = Object.entries(models).filter(
+    ([, info]) => info.provider === activeProvider
+  );
 
   const update = (modelId, field, value) => {
     setPricing((prev) => ({
@@ -55,10 +74,11 @@ export function ModelPricingTab({ settings, onSaved }) {
       for (const [modelId, p] of Object.entries(pricing)) {
         payload[modelId] = {
           pricing: {
-            input:  parseFloat(p.input)  || 0,
-            output: parseFloat(p.output) || 0,
-            unit:   p.unit,
-            source: p.source,
+            input:       parseFloat(p.input)       || 0,
+            inputCached: parseFloat(p.inputCached) || 0,
+            output:      parseFloat(p.output)      || 0,
+            unit:        p.unit,
+            source:      p.source,
           },
         };
       }
@@ -89,6 +109,36 @@ export function ModelPricingTab({ settings, onSaved }) {
         to estimate LLM spend. Prices are in <strong>USD</strong>.
       </p>
 
+      {/* Provider tabs */}
+      {availableProviders.length > 1 && (
+        <div className="flex border-b border-slate-200 -mx-5 px-5">
+          {availableProviders.map((p) => {
+            const colors = PROVIDER_TAB_COLORS[p] || { active: 'border-slate-900 text-slate-900' };
+            const isActive = p === activeProvider;
+            const count = Object.values(models).filter(m => m.provider === p).length;
+            return (
+              <button
+                key={p}
+                type="button"
+                onClick={() => setActiveProvider(p)}
+                className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                  isActive
+                    ? colors.active
+                    : 'border-transparent text-slate-500 hover:text-slate-700'
+                }`}
+              >
+                {PROVIDER_LABELS[p] || p}
+                <span className={`ml-1.5 text-xs px-1.5 py-0.5 rounded-full border ${
+                  isActive ? colors.badge : 'bg-slate-100 text-slate-400 border-slate-200'
+                }`}>
+                  {count}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
       <div className="flex flex-col gap-2">
         {modelEntries.map(([modelId, info]) => {
           const p = pricing[modelId] ?? { input: '', output: '', unit: 'million' };
@@ -140,6 +190,21 @@ export function ModelPricingTab({ settings, onSaved }) {
                   ))}
                 </select>
 
+                {/* Cache Read row */}
+                <label className="text-slate-600 font-medium">Cache Read</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.inputCached}
+                  onChange={(e) => update(modelId, 'inputCached', e.target.value)}
+                  placeholder="0.00"
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-[120px]"
+                />
+                <span className="text-slate-400 text-xs">
+                  {UNIT_OPTIONS.find((o) => o.value === p.unit)?.label} · discounted
+                </span>
+
                 {/* Output row */}
                 <label className="text-slate-600 font-medium">Output</label>
                 <input