@agile-vibe-coding/avc 0.2.3 → 0.3.2

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

@@ -0,0 +1,412 @@
+import { useState, useEffect, useRef } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { saveApiKeys, connectOpenAIOAuth, disconnectOpenAIOAuth, getOpenAIOAuthStatus, testOpenAIOAuth, setOpenAIOAuthFallback } from '../../lib/api';
+
+function formatExpiresIn(seconds) {
+  if (seconds <= 0) return 'expired';
+  if (seconds < 60) return `${seconds}s`;
+  const mins = Math.floor(seconds / 60);
+  if (mins < 60) return `${mins} min`;
+  return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+}
+
+export function OpenAIAuthSection({ apiKeyInfo, onSaved }) {
+  const [authMode, setAuthMode] = useState(apiKeyInfo?.authMode || 'api-key');
+
+  // API-key sub-state
+  const [keyValue, setKeyValue] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [saveStatus, setSaveStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+
+  // OAuth sub-state
+  const [oauthPhase, setOauthPhase] = useState(
+    apiKeyInfo?.oauth?.connected ? 'connected' : 'idle'
+  );
+  const [oauthInfo, setOauthInfo] = useState(apiKeyInfo?.oauth || { connected: false });
+  const [authorizeUrl, setAuthorizeUrl] = useState(null);
+  const pollRef = useRef(null);
+  const pollTimeoutRef = useRef(null);
+
+  // Test sub-state
+  const [testStatus, setTestStatus] = useState(null); // null | 'running' | { ok, response, model, elapsed } | { error }
+
+  // Fallback sub-state
+  const [fallbackEnabled, setFallbackEnabled] = useState(apiKeyInfo?.oauth?.fallback ?? false);
+  const [fallbackStatus, setFallbackStatus] = useState(null); // null | 'saving' | { error }
+
+
+  // Sync from parent settings refresh
+  useEffect(() => {
+    setAuthMode(apiKeyInfo?.authMode || 'api-key');
+    setOauthInfo(apiKeyInfo?.oauth || { connected: false });
+    setFallbackEnabled(apiKeyInfo?.oauth?.fallback ?? false);
+    if (apiKeyInfo?.oauth?.connected) {
+      setOauthPhase('connected');
+    }
+  }, [apiKeyInfo]);
+
+  // Stop polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+      if (pollTimeoutRef.current) clearTimeout(pollTimeoutRef.current);
+    };
+  }, []);
+
+  const startPolling = () => {
+    pollRef.current = setInterval(async () => {
+      try {
+        const status = await getOpenAIOAuthStatus();
+        if (status.connected) {
+          setOauthInfo(status);
+          setOauthPhase('connected');
+          setAuthorizeUrl(null);
+          stopPolling();
+          onSaved();
+        }
+      } catch { /* ignore */ }
+    }, 2000);
+
+    // Auto-stop after 5 minutes
+    pollTimeoutRef.current = setTimeout(() => {
+      stopPolling();
+      setOauthPhase('idle');
+    }, 300_000);
+  };
+
+  const stopPolling = () => {
+    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+    if (pollTimeoutRef.current) { clearTimeout(pollTimeoutRef.current); pollTimeoutRef.current = null; }
+  };
+
+  const handleModeToggle = (mode) => {
+    if (mode === authMode) return;
+    if (authMode === 'oauth' && oauthPhase === 'connecting') {
+      // Cancel an in-progress connection attempt when switching away
+      stopPolling();
+      setOauthPhase('idle');
+      setAuthorizeUrl(null);
+    }
+    if (mode === 'oauth') {
+      // Restore the correct phase when switching back to Subscription tab
+      setOauthPhase(oauthInfo.connected ? 'connected' : 'idle');
+    }
+    setAuthMode(mode);
+  };
+
+  const handleConnect = async () => {
+    setOauthPhase('connecting');
+    setAuthorizeUrl(null);
+    try {
+      const result = await connectOpenAIOAuth();
+      setAuthorizeUrl(result.authorizeUrl || null);
+      startPolling();
+    } catch (err) {
+      setOauthPhase('idle');
+      console.error('OAuth connect error:', err);
+    }
+  };
+
+  const handleCancel = () => {
+    stopPolling();
+    setOauthPhase('idle');
+    setAuthorizeUrl(null);
+  };
+
+  const handleDisconnect = async () => {
+    try { await disconnectOpenAIOAuth(); } catch { /* ignore */ }
+    setOauthPhase('idle');
+    setOauthInfo({ connected: false });
+    setTestStatus(null);
+    setAuthMode('api-key');
+    onSaved();
+  };
+
+  const handleFallbackToggle = async (enabled) => {
+    setFallbackStatus('saving');
+    try {
+      await setOpenAIOAuthFallback(enabled);
+      setFallbackEnabled(enabled);
+      setFallbackStatus(null);
+    } catch (err) {
+      setFallbackStatus({ error: err.message });
+      setTimeout(() => setFallbackStatus(null), 4000);
+    }
+  };
+
+  const handleTest = async () => {
+    setTestStatus('running');
+    try {
+      const result = await testOpenAIOAuth();
+      setTestStatus(result);
+    } catch (err) {
+      setTestStatus({ error: err.message });
+    }
+  };
+
+  const handleSaveKey = async () => {
+    setSaveStatus('saving');
+    try {
+      await saveApiKeys({ openai: keyValue });
+      setSaveStatus('saved');
+      setKeyValue('');
+      onSaved();
+      setTimeout(() => setSaveStatus(null), 2000);
+    } catch {
+      setSaveStatus('error');
+      setTimeout(() => setSaveStatus(null), 2000);
+    }
+  };
+
+  const handleClearKey = async () => {
+    setSaveStatus('clearing');
+    try {
+      await saveApiKeys({ openai: '' });
+      setSaveStatus('saved');
+      onSaved();
+      setTimeout(() => setSaveStatus(null), 2000);
+    } catch {
+      setSaveStatus('error');
+      setTimeout(() => setSaveStatus(null), 2000);
+    }
+  };
+
+  return (
+    <div className="py-3 border-b border-slate-100 last:border-0">
+      {/* Header row */}
+      <div className="flex items-center gap-3 mb-2">
+        <div className="w-36 flex-shrink-0">
+          <p className="text-sm font-medium text-slate-800">OpenAI</p>
+          <p className="text-xs text-slate-400">Auth mode</p>
+        </div>
+
+        {/* Mode toggle */}
+        <div className="flex items-center gap-1 bg-slate-100 rounded-lg p-1">
+          <button
+            type="button"
+            onClick={() => handleModeToggle('api-key')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              authMode === 'api-key'
+                ? 'bg-white text-slate-800 shadow-sm'
+                : 'text-slate-500 hover:text-slate-700'
+            }`}
+          >
+            API Key
+          </button>
+          <button
+            type="button"
+            onClick={() => handleModeToggle('oauth')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              authMode === 'oauth'
+                ? 'bg-white text-slate-800 shadow-sm'
+                : 'text-slate-500 hover:text-slate-700'
+            }`}
+          >
+            Subscription
+          </button>
+        </div>
+      </div>
+
+      {/* API Key mode */}
+      {authMode === 'api-key' && (
+        <div className="flex items-center gap-3 pl-0 pt-1">
+          <div className="w-36 flex-shrink-0">
+            <p className="text-xs text-slate-400">OPENAI_API_KEY</p>
+          </div>
+
+          <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>
+
+          {apiKeyInfo?.isSet && !keyValue && (
+            <p className="text-xs text-slate-400 font-mono flex-shrink-0">{apiKeyInfo.preview}</p>
+          )}
+
+          <div className="flex-1 flex items-center gap-2 min-w-0">
+            <div className="relative flex-1">
+              <input
+                type={showKey ? 'text' : 'password'}
+                value={keyValue}
+                onChange={(e) => setKeyValue(e.target.value)}
+                placeholder={apiKeyInfo?.isSet ? 'Enter new key to update…' : 'sk-…'}
+                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 && !keyValue && (
+              <button
+                type="button"
+                onClick={handleClearKey}
+                disabled={saveStatus === '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"
+              >
+                {saveStatus === 'clearing' ? '…' : 'Reset'}
+              </button>
+            )}
+
+            <button
+              type="button"
+              onClick={handleSaveKey}
+              disabled={!keyValue.trim() || saveStatus === '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"
+            >
+              {saveStatus === '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>
+              ) : saveStatus === 'saved' ? '✓ Saved' : saveStatus === 'error' ? '✗ Error' : 'Save'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* OAuth mode */}
+      {authMode === 'oauth' && (
+        <div className="pl-0 pt-1">
+          {/* Idle — not yet connecting */}
+          {oauthPhase === 'idle' && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs text-slate-500">
+                <span className="font-medium text-amber-700">ℹ</span>{' '}
+                Requires a <strong>ChatGPT Pro</strong> subscription ($200/mo).
+                Only Codex-endpoint models work (<code className="font-mono bg-slate-100 px-1 rounded">gpt-5.2-codex</code>,{' '}
+                <code className="font-mono bg-slate-100 px-1 rounded">gpt-5.3-codex</code>).
+                This endpoint is unofficial and may change without notice.
+              </p>
+              <div>
+                <button
+                  type="button"
+                  onClick={handleConnect}
+                  className="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
+                >
+                  Connect with ChatGPT ↗
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Connecting — waiting for browser callback */}
+          {oauthPhase === 'connecting' && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs text-slate-600 flex items-center gap-2">
+                <span className="w-3 h-3 border border-slate-400 border-t-slate-700 rounded-full animate-spin inline-block" />
+                Waiting for browser login…
+              </p>
+              {authorizeUrl && (
+                <p className="text-xs text-slate-500">
+                  If your browser did not open,{' '}
+                  <a
+                    href={authorizeUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-600 underline break-all"
+                  >
+                    click here to authenticate
+                  </a>
+                  .
+                </p>
+              )}
+              <div>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className="px-3 py-1 text-xs font-medium border border-slate-300 rounded-md text-slate-600 hover:bg-slate-50 transition-colors"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Connected */}
+          {oauthPhase === 'connected' && (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">
+                  ✓ Connected
+                </span>
+                {oauthInfo.accountId && (
+                  <span className="text-xs text-slate-500 font-mono">{oauthInfo.accountId}</span>
+                )}
+                {oauthInfo.expiresIn != null && (
+                  <span className="text-xs text-slate-400">
+                    · expires in {formatExpiresIn(oauthInfo.expiresIn)}
+                  </span>
+                )}
+                <div className="ml-auto flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handleTest}
+                    disabled={testStatus === 'running'}
+                    className="w-14 flex items-center justify-center py-1 text-xs font-medium border border-emerald-300 rounded-md text-emerald-700 hover:bg-emerald-50 transition-colors disabled:opacity-40"
+                  >
+                    {testStatus === 'running'
+                      ? <span className="w-3 h-3 border border-emerald-400 border-t-emerald-700 rounded-full animate-spin" />
+                      : 'Test'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleDisconnect}
+                    className="px-3 py-1 text-xs font-medium border border-slate-300 rounded-md text-slate-600 hover:bg-slate-50 transition-colors"
+                  >
+                    Disconnect
+                  </button>
+                </div>
+              </div>
+              {testStatus && testStatus !== 'running' && (
+                <div className={`text-xs rounded-md px-3 py-2 font-mono ${testStatus.error ? 'bg-red-50 text-red-700 border border-red-200' : 'bg-slate-50 text-slate-700 border border-slate-200'}`}>
+                  {testStatus.error
+                    ? `✗ ${testStatus.error}`
+                    : `✓ ${testStatus.response || 'Connected'}  [${testStatus.model} · ${testStatus.elapsed}ms]`}
+                </div>
+              )}
+              {/* Fallback toggle — only shown when an API key is also configured */}
+              {apiKeyInfo?.isSet && (
+                <div className="flex items-center gap-3 pt-1 border-t border-slate-100">
+                  <label className="flex items-center gap-2 cursor-pointer select-none">
+                    <div className="relative">
+                      <input
+                        type="checkbox"
+                        checked={fallbackEnabled}
+                        disabled={fallbackStatus === 'saving'}
+                        onChange={(e) => handleFallbackToggle(e.target.checked)}
+                        className="sr-only"
+                      />
+                      <div
+                        onClick={() => fallbackStatus !== 'saving' && handleFallbackToggle(!fallbackEnabled)}
+                        className={`w-8 h-4 rounded-full transition-colors cursor-pointer ${fallbackEnabled ? 'bg-blue-500' : 'bg-slate-300'} ${fallbackStatus === 'saving' ? 'opacity-40' : ''}`}
+                      >
+                        <div className={`absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${fallbackEnabled ? 'translate-x-4' : ''}`} />
+                      </div>
+                    </div>
+                    <span className="text-xs text-slate-600">Fallback to API Key on failure</span>
+                  </label>
+                  {fallbackStatus?.error && (
+                    <span className="text-xs text-red-600">{fallbackStatus.error}</span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -10,14 +10,14 @@ import { CostThresholdsTab } from './CostThresholdsTab';
 const TABS = [
   { id: 'api-keys',         label: 'API Keys' },
   { id: 'ceremonies',       label: 'Ceremony Models' },
+  { id: 'agents',           label: 'Agents' },
   { id: 'pricing',          label: 'Model Pricing' },
   { id: 'cost-thresholds',  label: 'Cost Limits' },
   { id: 'servers',          label: 'Servers & Ports' },
-  { id: 'agents',           label: 'Agents' },
 ];
 
-export function SettingsModal({ settings, models, onClose, onSaved }) {
-  const [activeTab, setActiveTab] = useState('api-keys');
+export function SettingsModal({ settings, models, onClose, onSaved, initialTab }) {
+  const [activeTab, setActiveTab] = useState(initialTab || 'api-keys');
 
   return (
     <div
@@ -25,7 +25,7 @@ export function SettingsModal({ settings, models, onClose, onSaved }) {
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
       <div
-        className="w-full max-w-2xl bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+        className="w-full max-w-4xl bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
         style={{ height: '85vh' }}
       >
         {/* Header */}

package/kanban/client/src/components/stats/CostModal.jsx

@@ -8,7 +8,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from 'recharts';
-import { getCostHistory } from '../../lib/api';
+import { getCostHistory, getSettings } from '../../lib/api';
 
 const RANGE_TABS = [
   { label: 'Today', value: 'today' },
@@ -60,6 +60,15 @@ export function CostModal({ onClose }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [expanded, setExpanded] = useState({});
+  const [oauthActive, setOauthActive] = useState(false);
+
+  // Check if OpenAI OAuth is active — if so, costs are not tracked for OpenAI calls
+  useEffect(() => {
+    getSettings().then((s) => {
+      const openai = s?.apiKeys?.openai;
+      setOauthActive(openai?.authMode === 'oauth' && openai?.oauth?.connected === true);
+    }).catch(() => {});
+  }, []);
 
   // Fetch data when range changes
   useEffect(() => {
@@ -107,6 +116,8 @@ export function CostModal({ onClose }) {
   const totalCost   = data?.ceremonies.reduce((s, c) => s + c.cost,   0) ?? 0;
   const totalTokens = data?.ceremonies.reduce((s, c) => s + c.tokens, 0) ?? 0;
   const totalCalls  = data?.ceremonies.reduce((s, c) => s + c.calls,  0) ?? 0;
+  const totalSaved  = data?.ceremonies.reduce((s, c) => s + (c.saved ?? 0), 0) ?? 0;
+  const totalCached = data?.ceremonies.reduce((s, c) => s + (c.cached ?? 0), 0) ?? 0;
   const hasData = data && (data.daily.length > 0 || data.ceremonies.length > 0);
 
   return (
@@ -188,6 +199,17 @@ export function CostModal({ onClose }) {
             </div>
           </div>
 
+          {/* OAuth notice */}
+          {oauthActive && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 text-xs text-blue-700 flex items-start gap-2">
+              <span className="flex-shrink-0 mt-0.5">ℹ️</span>
+              <span>
+                <strong>OpenAI OAuth active</strong> — API calls made via OAuth (ChatGPT subscription) are not billed per token.
+                No cost is recorded for OpenAI usage in this mode; token counts are still tracked for informational purposes.
+              </span>
+            </div>
+          )}
+
           {/* Loading */}
           {loading && (
             <div className="flex-1 flex items-center justify-center">
@@ -208,7 +230,7 @@ export function CostModal({ onClose }) {
           {!loading && hasData && (
             <>
               {/* Stat chips */}
-              <div className="grid grid-cols-3 gap-3">
+              <div className={`grid gap-3 ${totalSaved > 0 ? 'grid-cols-2' : 'grid-cols-3'}`}>
                 <div className="bg-slate-50 rounded-lg p-3">
                   <p className="text-xs text-slate-500 mb-1">Total Cost</p>
                   <p className="text-xl font-bold text-slate-900">{formatCostLabel(totalCost)}</p>
@@ -217,13 +239,22 @@ export function CostModal({ onClose }) {
                 <div className="bg-slate-50 rounded-lg p-3">
                   <p className="text-xs text-slate-500 mb-1">Total Tokens</p>
                   <p className="text-xl font-bold text-slate-900">{formatTokens(totalTokens)}</p>
-                  <p className="text-xs text-slate-400 mt-0.5">this period</p>
+                  {totalCached > 0 && (
+                    <p className="text-xs text-blue-500 mt-0.5">{formatTokens(totalCached)} cached</p>
+                  )}
                 </div>
                 <div className="bg-slate-50 rounded-lg p-3">
                   <p className="text-xs text-slate-500 mb-1">API Calls</p>
                   <p className="text-xl font-bold text-slate-900">{totalCalls.toLocaleString()}</p>
                   <p className="text-xs text-slate-400 mt-0.5">this period</p>
                 </div>
+                {totalSaved > 0 && (
+                  <div className="bg-green-50 rounded-lg p-3">
+                    <p className="text-xs text-green-600 mb-1">Cache Saved</p>
+                    <p className="text-xl font-bold text-green-700">{formatCostLabel(totalSaved)}</p>
+                    <p className="text-xs text-green-500 mt-0.5">vs. no cache</p>
+                  </div>
+                )}
               </div>
 
               {/* Bar chart */}

package/kanban/client/src/hooks/useGrouping.js

@@ -14,6 +14,8 @@ export function useGrouping(workItems, groupBy) {
         return groupByEpic(workItems);
       case 'type':
         return groupByType(workItems);
+      case 'phase':
+        return groupByPhase(workItems);
       default:
         return groupByStatus(workItems);
     }
@@ -116,3 +118,60 @@ function groupByType(workItems) {
     groups: groups.filter((group) => group.items.length > 0),
   };
 }
+
+/**
+ * Group by implementation phase (coding order)
+ */
+function groupByPhase(workItems) {
+  // Collect all phases from metadata
+  const phaseMap = new Map(); // phase number → items
+  const unphased = [];
+
+  for (const item of workItems) {
+    const phase = item.metadata?.codingPhase;
+    if (phase != null) {
+      if (!phaseMap.has(phase)) phaseMap.set(phase, []);
+      phaseMap.get(phase).push(item);
+    } else {
+      unphased.push(item);
+    }
+  }
+
+  // Sort phases numerically
+  const sortedPhases = [...phaseMap.entries()].sort((a, b) => a[0] - b[0]);
+
+  const groups = sortedPhases.map(([phase, items]) => {
+    // Sort items within phase by codingOrder
+    items.sort((a, b) => (a.metadata?.codingOrder ?? 0) - (b.metadata?.codingOrder ?? 0));
+    const columns = groupItemsByColumn(items);
+
+    // Find epic names in this phase for the label
+    const epicNames = [...new Set(items.filter(i => i.type === 'epic').map(i => i.name))];
+    const label = epicNames.length > 0
+      ? `Phase ${phase}: ${epicNames.join(', ')}`
+      : `Phase ${phase}`;
+
+    return {
+      id: `phase-${phase}`,
+      name: label,
+      items,
+      columns,
+      type: 'phase',
+    };
+  });
+
+  if (unphased.length > 0) {
+    groups.push({
+      id: 'unphased',
+      name: 'No Phase',
+      items: unphased,
+      columns: groupItemsByColumn(unphased),
+      type: 'ungrouped',
+    });
+  }
+
+  return {
+    mode: 'sections',
+    groups,
+  };
+}