@agile-vibe-coding/avc 0.1.1 → 0.3.1

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: 'agents',           label: 'Agents' },
+  { id: 'pricing',          label: 'Model Pricing' },
+  { id: 'cost-thresholds',  label: 'Cost Limits' },
+  { id: 'servers',          label: 'Servers & Ports' },
+];
+
+export function SettingsModal({ settings, models, onClose, onSaved, initialTab }) {
+  const [activeTab, setActiveTab] = useState(initialTab || '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-4xl 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>
+  );
+}

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

@@ -0,0 +1,384 @@
+import { useState, useEffect } from 'react';
+import { X, BarChart2, DollarSign, ChevronDown, ChevronRight } from 'lucide-react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import { getCostHistory, getSettings } from '../../lib/api';
+
+const RANGE_TABS = [
+  { label: 'Today', value: 'today' },
+  { label: '7 days', value: 7 },
+  { label: '30 days', value: 30 },
+  { label: '90 days', value: 90 },
+];
+
+function formatCostLabel(cost) {
+  if (cost === 0) return '$0.00';
+  if (cost < 0.01) return '< $0.01';
+  return `$${cost.toFixed(2)}`;
+}
+
+function formatCostDetail(cost) {
+  if (cost === 0) return '$0.0000';
+  return `$${cost.toFixed(4)}`;
+}
+
+function formatTokens(n) {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function formatDateLabel(dateStr) {
+  const d = new Date(dateStr + 'T00:00:00');
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+function formatCeremonyName(name) {
+  return name
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Strip parent prefix from stage name, e.g. "sponsor-call-validation" → "Validation" */
+function formatStageName(name, parentName) {
+  if (name === parentName) return 'Documentation';
+  const prefix = `${parentName}-`;
+  if (name.startsWith(prefix)) return formatCeremonyName(name.slice(prefix.length));
+  return formatCeremonyName(name);
+}
+
+export function CostModal({ onClose }) {
+  const [rangeMode, setRangeMode] = useState('today');
+  const [customFrom, setCustomFrom] = useState('');
+  const [customTo, setCustomTo] = useState('');
+  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(() => {
+    setLoading(true);
+    setData(null);
+
+    let rangeArg;
+    if (rangeMode === 'today') {
+      const today = new Date().toISOString().split('T')[0];
+      rangeArg = { from: today, to: today };
+    } else if (rangeMode === 'custom') {
+      if (!customFrom || !customTo) {
+        setLoading(false);
+        return;
+      }
+      rangeArg = { from: customFrom, to: customTo };
+    } else {
+      rangeArg = parseInt(rangeMode, 10);
+    }
+
+    getCostHistory(rangeArg)
+      .then((d) => {
+        setData(d);
+        setLoading(false);
+        // Auto-expand parents that have stages
+        const init = {};
+        (d.ceremonies || []).forEach((c) => {
+          if (c.stages && c.stages.length > 0) init[c.name] = true;
+        });
+        setExpanded(init);
+      })
+      .catch(() => { setData({ daily: [], ceremonies: [] }); setLoading(false); });
+  }, [rangeMode, customFrom, customTo]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const toggleExpanded = (name) => setExpanded((prev) => ({ ...prev, [name]: !prev[name] }));
+
+  // Totals come from parent nodes only — stages are already rolled up into them
+  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 (
+    <div className="fixed inset-0 z-[65] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Panel */}
+      <div
+        className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl flex flex-col"
+        style={{ height: '90vh', maxHeight: '900px' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 flex-shrink-0">
+          <div className="flex items-center gap-2">
+            <DollarSign className="w-5 h-5 text-slate-500" />
+            <h2 className="text-lg font-semibold text-slate-900">LLM Cost Tracker</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Scrollable body */}
+        <div className="overflow-y-auto flex-1 px-6 py-4 flex flex-col gap-5">
+          {/* Time range tabs — always 2 rows */}
+          <div className="flex flex-col gap-1.5">
+            {/* Row 1: preset buttons + Custom */}
+            <div className="flex items-center gap-2">
+              {RANGE_TABS.map((tab) => (
+                <button
+                  key={tab.value}
+                  onClick={() => setRangeMode(String(tab.value))}
+                  className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                    rangeMode === String(tab.value)
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+              <button
+                onClick={() => setRangeMode('custom')}
+                className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                  rangeMode === 'custom'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+                }`}
+              >
+                Custom
+              </button>
+            </div>
+
+            {/* Row 2: date inputs — always rendered to keep height constant */}
+            <div className={`flex items-center gap-2 ${rangeMode !== 'custom' ? 'invisible' : ''}`}>
+              <input
+                type="date"
+                value={customFrom}
+                onChange={(e) => setCustomFrom(e.target.value)}
+                className="text-sm border border-slate-300 rounded px-2 py-0.5 text-slate-700"
+              />
+              <span className="text-slate-400 text-sm">to</span>
+              <input
+                type="date"
+                value={customTo}
+                onChange={(e) => setCustomTo(e.target.value)}
+                className="text-sm border border-slate-300 rounded px-2 py-0.5 text-slate-700"
+              />
+            </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">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            </div>
+          )}
+
+          {/* No data */}
+          {!loading && !hasData && (
+            <div className="flex-1 flex flex-col items-center justify-center text-slate-400 gap-3">
+              <BarChart2 className="w-10 h-10" />
+              <p className="text-sm">No usage data for this period.</p>
+              <p className="text-xs text-slate-300">Run a ceremony to start tracking costs.</p>
+            </div>
+          )}
+
+          {/* Content */}
+          {!loading && hasData && (
+            <>
+              {/* Stat chips */}
+              <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>
+                  <p className="text-xs text-slate-400 mt-0.5">this period</p>
+                </div>
+                <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>
+                  {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 */}
+              {data.daily.length > 0 && (
+                <div>
+                  <p className="text-xs font-medium text-slate-500 mb-2 uppercase tracking-wide">Daily Cost</p>
+                  <ResponsiveContainer width="100%" height={180}>
+                    <BarChart data={data.daily} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+                      <XAxis
+                        dataKey="date"
+                        tickFormatter={formatDateLabel}
+                        tick={{ fontSize: 11, fill: '#94a3b8' }}
+                        axisLine={false}
+                        tickLine={false}
+                      />
+                      <YAxis
+                        tickFormatter={(v) => `$${v.toFixed(2)}`}
+                        tick={{ fontSize: 11, fill: '#94a3b8' }}
+                        width={56}
+                        axisLine={false}
+                        tickLine={false}
+                      />
+                      <Tooltip
+                        formatter={(v) => [`$${v.toFixed(4)}`, 'Cost']}
+                        labelFormatter={(label) => formatDateLabel(label)}
+                        contentStyle={{ fontSize: 12 }}
+                      />
+                      <Bar dataKey="cost" fill="#3b82f6" radius={[3, 3, 0, 0]} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              )}
+
+              {/* Ceremony breakdown — hierarchical */}
+              {data.ceremonies.length > 0 && (
+                <div>
+                  <p className="text-xs font-medium text-slate-500 mb-2 uppercase tracking-wide">By Ceremony</p>
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="text-left text-xs text-slate-400 border-b border-slate-100">
+                          <th className="pb-2 font-medium">Ceremony / Stage</th>
+                          <th className="pb-2 font-medium text-right">Calls</th>
+                          <th className="pb-2 font-medium text-right">Tokens</th>
+                          <th className="pb-2 font-medium text-right">Cost</th>
+                          <th className="pb-2 font-medium pl-4">Share</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {data.ceremonies.map((c) => {
+                          const pct = totalCost > 0 ? (c.cost / totalCost) * 100 : 0;
+                          const hasStages = c.stages && c.stages.length > 0;
+                          const isOpen = expanded[c.name];
+
+                          return [
+                            /* Parent row */
+                            <tr
+                              key={c.name}
+                              className={`border-b border-slate-100 ${hasStages ? 'cursor-pointer hover:bg-slate-50' : ''}`}
+                              onClick={hasStages ? () => toggleExpanded(c.name) : undefined}
+                            >
+                              <td className="py-2 text-slate-800 font-semibold">
+                                <div className="flex items-center gap-1.5">
+                                  {hasStages
+                                    ? (isOpen
+                                        ? <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="w-3.5 flex-shrink-0" />
+                                  }
+                                  {formatCeremonyName(c.name)}
+                                </div>
+                              </td>
+                              <td className="py-2 text-right text-slate-500">{c.calls}</td>
+                              <td className="py-2 text-right text-slate-500">{formatTokens(c.tokens)}</td>
+                              <td className="py-2 text-right text-slate-800 font-semibold">{formatCostDetail(c.cost)}</td>
+                              <td className="py-2 pl-4">
+                                <div className="flex items-center gap-2">
+                                  <div className="w-20 bg-slate-100 rounded-full h-1.5 flex-shrink-0">
+                                    <div
+                                      className="bg-blue-500 h-1.5 rounded-full"
+                                      style={{ width: `${pct}%` }}
+                                    />
+                                  </div>
+                                  <span className="text-xs text-slate-400">{Math.round(pct)}%</span>
+                                </div>
+                              </td>
+                            </tr>,
+
+                            /* Stage rows — shown when expanded */
+                            ...(isOpen && hasStages ? c.stages.map((s) => {
+                              const stagePct = c.cost > 0 ? (s.cost / c.cost) * 100 : 0;
+                              return (
+                                <tr key={`${c.name}/${s.name}`} className="border-b border-slate-50 bg-slate-50/50">
+                                  <td className="py-1.5 text-slate-500 pl-7">
+                                    {formatStageName(s.name, c.name)}
+                                  </td>
+                                  <td className="py-1.5 text-right text-slate-400 text-xs">{s.calls}</td>
+                                  <td className="py-1.5 text-right text-slate-400 text-xs">{formatTokens(s.tokens)}</td>
+                                  <td className="py-1.5 text-right text-slate-500 text-xs">{formatCostDetail(s.cost)}</td>
+                                  <td className="py-1.5 pl-4">
+                                    <div className="flex items-center gap-2">
+                                      <div className="w-20 bg-slate-100 rounded-full h-1 flex-shrink-0">
+                                        <div
+                                          className="bg-blue-300 h-1 rounded-full"
+                                          style={{ width: `${stagePct}%` }}
+                                        />
+                                      </div>
+                                      <span className="text-[10px] text-slate-300">{Math.round(stagePct)}%</span>
+                                    </div>
+                                  </td>
+                                </tr>
+                              );
+                            }) : []),
+                          ];
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/ui/badge.jsx

@@ -0,0 +1,27 @@
+import { cn } from '../../lib/utils';
+
+/**
+ * Badge Component (shadcn/ui style)
+ */
+export function Badge({ variant = 'default', className, children }) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold',
+        'transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2',
+        {
+          'border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80':
+            variant === 'default',
+          'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80':
+            variant === 'secondary',
+          'border-transparent bg-red-100 text-red-900 hover:bg-red-100/80':
+            variant === 'destructive',
+          'border-slate-200 text-slate-900': variant === 'outline',
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}