@agile-vibe-coding/avc 0.1.1 → 0.2.3

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

@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import { ExternalLink } from 'lucide-react';
+import { saveModelPricing } from '../../lib/api';
+
+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',
+};
+
+const UNIT_OPTIONS = [
+  { value: 'million',  label: 'per 1M tokens' },
+  { value: 'thousand', label: 'per 1K tokens' },
+];
+
+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 ?? ''),
+      unit:        info.pricing?.unit        ?? 'million',
+      source:      info.pricing?.source      ?? '',
+      lastUpdated: info.pricing?.lastUpdated ?? '',
+    };
+  }
+  return state;
+}
+
+function formatDate(iso) {
+  if (!iso) return null;
+  const d = new Date(iso + 'T00:00:00');
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+export function ModelPricingTab({ settings, onSaved }) {
+  const models = settings.models || {};
+  const [pricing, setPricing] = useState(() => initState(models));
+  const [status, setStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+
+  const modelEntries = Object.entries(models);
+
+  const update = (modelId, field, value) => {
+    setPricing((prev) => ({
+      ...prev,
+      [modelId]: { ...prev[modelId], [field]: value },
+    }));
+  };
+
+  const handleSave = async () => {
+    setStatus('saving');
+    try {
+      // Build payload: { modelId: { pricing: { input, output, unit } } }
+      const payload = {};
+      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,
+          },
+        };
+      }
+      await saveModelPricing(payload);
+      setStatus('saved');
+      onSaved();
+      setTimeout(() => setStatus(null), 2000);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus(null), 2000);
+    }
+  };
+
+  if (modelEntries.length === 0) {
+    return (
+      <div className="px-5 py-8 text-center">
+        <p className="text-sm text-slate-500">
+          No models configured yet. Run your first ceremony to populate model settings.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <p className="text-xs text-slate-500">
+        Set the cost per token for each model. These rates are used by the cost tracker
+        to estimate LLM spend. Prices are in <strong>USD</strong>.
+      </p>
+
+      <div className="flex flex-col gap-2">
+        {modelEntries.map(([modelId, info]) => {
+          const p = pricing[modelId] ?? { input: '', output: '', unit: 'million' };
+          const providerColor = PROVIDER_COLORS[info.provider] || 'bg-slate-50 text-slate-600 border-slate-200';
+
+          return (
+            <div key={modelId} className="border border-slate-200 rounded-lg p-4">
+              {/* Model header */}
+              <div className="flex items-center gap-2 mb-3">
+                <span className="text-sm font-semibold text-slate-800">
+                  {info.displayName || modelId}
+                </span>
+                <span className={`text-xs font-medium border rounded-full px-2 py-0.5 ${providerColor}`}>
+                  {info.provider}
+                </span>
+                <span className="text-xs text-slate-400 font-mono ml-auto">{modelId}</span>
+                {p.lastUpdated && (
+                  <span className="text-xs text-slate-400 whitespace-nowrap">
+                    verified {formatDate(p.lastUpdated)}
+                  </span>
+                )}
+              </div>
+
+              {/* Pricing rows */}
+              <div className="grid grid-cols-[80px_1fr_1fr] gap-x-3 gap-y-2 items-center text-xs">
+                {/* Column headers */}
+                <div />
+                <div className="text-slate-400 font-medium">Price (USD $)</div>
+                <div className="text-slate-400 font-medium">Unit</div>
+
+                {/* Input row */}
+                <label className="text-slate-600 font-medium">Input</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.input}
+                  onChange={(e) => update(modelId, 'input', 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]"
+                />
+                <select
+                  value={p.unit}
+                  onChange={(e) => update(modelId, 'unit', e.target.value)}
+                  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 bg-white w-full max-w-[160px]"
+                >
+                  {UNIT_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+
+                {/* Output row */}
+                <label className="text-slate-600 font-medium">Output</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.output}
+                  onChange={(e) => update(modelId, 'output', 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]"
+                />
+                {/* Unit selector is shared — show a static label for output to keep layout consistent */}
+                <span className="text-slate-400">
+                  {UNIT_OPTIONS.find((o) => o.value === p.unit)?.label}
+                </span>
+
+                {/* Source URL row — aligned with price inputs */}
+                <label className="text-slate-600 font-medium">Source</label>
+                <div className="col-span-2 flex items-center gap-1.5">
+                  <input
+                    type="url"
+                    value={p.source}
+                    readOnly
+                    placeholder="https://provider.com/pricing"
+                    className="flex-1 rounded-md border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs text-slate-500 cursor-default focus:outline-none min-w-0"
+                  />
+                  {p.source && (
+                    <a
+                      href={p.source}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-500 hover:text-blue-700 shrink-0"
+                      title="Open pricing page"
+                    >
+                      <ExternalLink className="w-3.5 h-3.5" />
+                    </a>
+                  )}
+                </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 Pricing'}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { saveGeneralSettings } from '../../lib/api';
+
+export function ServersTab({ settings, onSaved }) {
+  const [kanbanPort, setKanbanPort] = useState(String(settings.kanbanPort || 4174));
+  const [docsPort, setDocsPort] = useState(String(settings.docsPort || 4173));
+  const [boardTitle, setBoardTitle] = useState(settings.boardTitle || 'AVC Kanban Board');
+  const [portsStatus, setPortsStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+  const [titleStatus, setTitleStatus] = useState(null);
+
+  const handleSavePorts = async () => {
+    setPortsStatus('saving');
+    try {
+      await saveGeneralSettings({
+        kanbanPort: Number(kanbanPort),
+        docsPort: Number(docsPort),
+      });
+      setPortsStatus('saved');
+      onSaved();
+      setTimeout(() => setPortsStatus(null), 2000);
+    } catch {
+      setPortsStatus('error');
+      setTimeout(() => setPortsStatus(null), 2000);
+    }
+  };
+
+  const handleSaveTitle = async () => {
+    const trimmed = boardTitle.trim();
+    if (!trimmed) return;
+    setTitleStatus('saving');
+    try {
+      await saveGeneralSettings({ boardTitle: trimmed });
+      setTitleStatus('saved');
+      onSaved();
+      setTimeout(() => setTitleStatus(null), 2000);
+    } catch {
+      setTitleStatus('error');
+      setTimeout(() => setTitleStatus(null), 2000);
+    }
+  };
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-6">
+      {/* General section */}
+      <div>
+        <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">General</h3>
+        <div className="flex items-center gap-3">
+          <label className="text-sm text-slate-700 w-28 flex-shrink-0">Board title</label>
+          <input
+            type="text"
+            value={boardTitle}
+            onChange={(e) => setBoardTitle(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') handleSaveTitle(); }}
+            className="flex-1 max-w-xs 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"
+          />
+          <button
+            type="button"
+            onClick={handleSaveTitle}
+            disabled={!boardTitle.trim() || titleStatus === '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"
+          >
+            {titleStatus === '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>
+            ) : titleStatus === 'saved' ? '✓ Saved' : titleStatus === 'error' ? '✗ Error' : 'Save'}
+          </button>
+        </div>
+      </div>
+
+      {/* Ports section */}
+      <div>
+        <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">Server Ports</h3>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-3">
+            <label className="text-sm text-slate-700 w-28 flex-shrink-0">Kanban board</label>
+            <input
+              type="number"
+              min="1024"
+              max="65535"
+              value={kanbanPort}
+              onChange={(e) => setKanbanPort(e.target.value)}
+              className="w-24 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"
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <label className="text-sm text-slate-700 w-28 flex-shrink-0">Documentation</label>
+            <input
+              type="number"
+              min="1024"
+              max="65535"
+              value={docsPort}
+              onChange={(e) => setDocsPort(e.target.value)}
+              className="w-24 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"
+            />
+          </div>
+          <div className="flex items-center gap-3 pt-1">
+            <div className="w-28 flex-shrink-0" />
+            <button
+              type="button"
+              onClick={handleSavePorts}
+              disabled={portsStatus === '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"
+            >
+              {portsStatus === '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>
+              ) : portsStatus === 'saved' ? '✓ Saved' : portsStatus === 'error' ? '✗ Error' : 'Save'}
+            </button>
+          </div>
+        </div>
+        <p className="text-xs text-slate-400 mt-3">
+          Changing ports requires restarting the servers (run <code className="font-mono bg-slate-100 px-1 rounded">/kanban</code> and <code className="font-mono bg-slate-100 px-1 rounded">/documentation</code>).
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { ApiKeysTab } from './ApiKeysTab';
+import { CeremonyModelsTab } from './CeremonyModelsTab';
+import { ServersTab } from './ServersTab';
+import { ModelPricingTab } from './ModelPricingTab';
+import { AgentsTab } from './AgentsTab';
+import { CostThresholdsTab } from './CostThresholdsTab';
+
+const TABS = [
+  { id: 'api-keys',         label: 'API Keys' },
+  { id: 'ceremonies',       label: 'Ceremony Models' },
+  { 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');
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] 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-2xl 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-4 border-b border-slate-100 flex-shrink-0">
+          <h2 className="text-base font-semibold text-slate-900">⚙ Project Settings</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors ml-4"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Tab bar */}
+        <div className="flex border-b border-slate-100 flex-shrink-0 px-5">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-3 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === tab.id
+                  ? 'border-slate-900 text-slate-900'
+                  : 'border-transparent text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Tab content — scrollable */}
+        <div className="flex-1 overflow-y-auto">
+          {activeTab === 'api-keys' && (
+            <ApiKeysTab settings={settings} onSaved={onSaved} />
+          )}
+          {activeTab === 'ceremonies' && (
+            <CeremonyModelsTab settings={settings} models={models} onSaved={onSaved} />
+          )}
+          {activeTab === 'pricing' && (
+            <ModelPricingTab settings={settings} onSaved={onSaved} />
+          )}
+          {activeTab === 'cost-thresholds' && (
+            <CostThresholdsTab settings={settings} onSaved={onSaved} />
+          )}
+          {activeTab === 'servers' && (
+            <ServersTab settings={settings} onSaved={onSaved} />
+          )}
+          {activeTab === 'agents' && <AgentsTab />}
+        </div>
+      </div>
+    </div>
+  );
+}