agentlytics 0.1.15 → 0.1.16

package/ui/src/pages/Subscriptions.jsx

@@ -0,0 +1,413 @@
+import { useState, useEffect } from 'react'
+import { CreditCard, RefreshCw, Clock, Zap, Shield, ChevronDown, ChevronUp } from 'lucide-react'
+import { fetchUsage } from '../lib/api'
+import { editorLabel, editorColor } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+
+function UsageBar({ value, max = 100, color, label }) {
+  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0
+  return (
+    <div>
+      {label && <div className="flex items-center justify-between mb-1">
+        <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{label}</span>
+        <span className="text-[10px] font-mono" style={{ color: 'var(--c-white)' }}>{typeof value === 'number' ? value.toFixed(1) : value}%</span>
+      </div>}
+      <div className="h-1.5 w-full" style={{ background: 'var(--c-bg3)' }}>
+        <div className="h-full transition-all duration-500" style={{ width: `${pct}%`, background: color || '#6366f1' }} />
+      </div>
+    </div>
+  )
+}
+
+function TimeUntil({ date }) {
+  if (!date) return null
+  const d = new Date(date)
+  const now = new Date()
+  const diff = d - now
+  if (diff <= 0) return <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>expired</span>
+  const hours = Math.floor(diff / 3600000)
+  const mins = Math.floor((diff % 3600000) / 60000)
+  if (hours > 24) {
+    const days = Math.floor(hours / 24)
+    return <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>resets in {days}d {hours % 24}h</span>
+  }
+  return <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>resets in {hours}h {mins}m</span>
+}
+
+function PlanBadge({ name }) {
+  if (!name) return null
+  const n = (name || '').toLowerCase()
+  let bg = 'rgba(99,102,241,0.12)'
+  let fg = '#818cf8'
+  if (n.includes('pro')) { bg = 'rgba(168,85,247,0.12)'; fg = '#a855f7' }
+  if (n.includes('max') || n.includes('ultra')) { bg = 'rgba(234,179,8,0.12)'; fg = '#eab308' }
+  if (n.includes('plus')) { bg = 'rgba(34,197,94,0.12)'; fg = '#22c55e' }
+  if (n.includes('free')) { bg = 'rgba(107,114,128,0.12)'; fg = '#6b7280' }
+  return (
+    <span className="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5" style={{ background: bg, color: fg }}>
+      {name}
+    </span>
+  )
+}
+
+function FeaturePill({ label, enabled }) {
+  return (
+    <span
+      className="text-[10px] px-1.5 py-0.5"
+      style={{
+        background: enabled ? 'rgba(34,197,94,0.08)' : 'rgba(107,114,128,0.06)',
+        color: enabled ? '#22c55e' : 'var(--c-text3)',
+        border: `1px solid ${enabled ? 'rgba(34,197,94,0.15)' : 'var(--c-border)'}`,
+      }}
+    >
+      {label}
+    </span>
+  )
+}
+
+// ── Card renderers per source type ──
+
+function CursorCard({ data }) {
+  const usage = data.usage || {}
+  const models = Object.keys(usage)
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <PlanBadge name={data.plan?.name} />
+        {data.plan?.status && <span className="text-[10px]" style={{ color: data.plan.status === 'active' ? '#22c55e' : 'var(--c-text3)' }}>● {data.plan.status}</span>}
+        {data.plan?.isYearlyPlan && <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>yearly</span>}
+      </div>
+      {data.startOfMonth && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          <Clock size={9} className="inline mr-1" />
+          billing started {new Date(data.startOfMonth).toLocaleDateString()}
+        </div>
+      )}
+      {models.length > 0 && (
+        <div className="space-y-1.5">
+          <div className="text-[10px] font-medium" style={{ color: 'var(--c-text2)' }}>model usage</div>
+          {models.map(m => {
+            const u = usage[m]
+            const pct = u.maxRequestUsage ? Math.round((u.numRequests / u.maxRequestUsage) * 100) : null
+            return (
+              <div key={m} className="flex items-center justify-between text-[11px]">
+                <span className="font-mono" style={{ color: 'var(--c-white)' }}>{m}</span>
+                <span style={{ color: 'var(--c-text2)' }}>
+                  {u.numRequests}{u.maxRequestUsage ? ` / ${u.maxRequestUsage}` : ''} requests
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function WindsurfCard({ data }) {
+  const u = data.usage || {}
+  const billing = data.billingCycle || {}
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <PlanBadge name={data.plan?.name} />
+        {data.user?.name && <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>{data.user.name}</span>}
+      </div>
+
+      {/* Credits */}
+      <div className="space-y-2">
+        {u.promptCredits && (
+          <div>
+            <div className="flex justify-between text-[10px] mb-0.5">
+              <span style={{ color: 'var(--c-text2)' }}>prompt credits</span>
+              <span className="font-mono" style={{ color: 'var(--c-white)' }}>{u.promptCredits.remaining} / {u.promptCredits.allocated}</span>
+            </div>
+            <UsageBar value={u.promptCredits.allocated > 0 ? ((u.promptCredits.remaining / u.promptCredits.allocated) * 100) : 0} color="#06b6d4" />
+          </div>
+        )}
+        {u.flexCredits && u.flexCredits.allocated > 0 && (
+          <div>
+            <div className="flex justify-between text-[10px] mb-0.5">
+              <span style={{ color: 'var(--c-text2)' }}>flex credits</span>
+              <span className="font-mono" style={{ color: 'var(--c-white)' }}>{u.flexCredits.remaining} / {u.flexCredits.allocated}</span>
+            </div>
+            <UsageBar value={u.flexCredits.allocated > 0 ? ((u.flexCredits.remaining / u.flexCredits.allocated) * 100) : 0} color="#a78bfa" />
+          </div>
+        )}
+        {u.totalRemainingCredits != null && (
+          <div className="flex items-center justify-between pt-1" style={{ borderTop: '1px solid var(--c-border)' }}>
+            <span className="text-[10px] font-medium" style={{ color: 'var(--c-text2)' }}>total remaining</span>
+            <span className="text-[13px] font-bold font-mono" style={{ color: 'var(--c-white)' }}>{u.totalRemainingCredits}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Billing */}
+      {(billing.start || billing.end) && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          <Clock size={9} className="inline mr-1" />
+          {billing.start && new Date(billing.start).toLocaleDateString()} → {billing.end && new Date(billing.end).toLocaleDateString()}
+        </div>
+      )}
+
+      {/* Features */}
+      {data.features && (
+        <div className="flex flex-wrap gap-1">
+          {Object.entries(data.features).map(([k, v]) => (
+            <FeaturePill key={k} label={k.replace(/([A-Z])/g, ' $1').trim()} enabled={v} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ClaudeCodeCard({ data }) {
+  const u = data.usage || {}
+  return (
+    <div className="space-y-3">
+      <PlanBadge name={data.plan?.name} />
+
+      <div className="space-y-2">
+        {u.fiveHour && (
+          <div>
+            <UsageBar value={u.fiveHour.utilization} color={u.fiveHour.utilization > 80 ? '#ef4444' : '#f97316'} label="5-hour limit" />
+            <TimeUntil date={u.fiveHour.resetsAt} />
+          </div>
+        )}
+        {u.sevenDay && (
+          <div>
+            <UsageBar value={u.sevenDay.utilization} color={u.sevenDay.utilization > 80 ? '#ef4444' : '#f97316'} label="7-day limit" />
+            <TimeUntil date={u.sevenDay.resetsAt} />
+          </div>
+        )}
+        {u.sevenDaySonnet && (
+          <div>
+            <UsageBar value={u.sevenDaySonnet.utilization} color="#a78bfa" label="7-day Sonnet" />
+            <TimeUntil date={u.sevenDaySonnet.resetsAt} />
+          </div>
+        )}
+        {u.sevenDayOpus && (
+          <div>
+            <UsageBar value={u.sevenDayOpus.utilization} color="#c084fc" label="7-day Opus" />
+            <TimeUntil date={u.sevenDayOpus.resetsAt} />
+          </div>
+        )}
+      </div>
+
+      {data.extraUsage && (
+        <div className="text-[10px] flex items-center gap-1.5" style={{ color: 'var(--c-text3)' }}>
+          <Zap size={9} />
+          extra usage: {data.extraUsage.isEnabled ? (
+            <span style={{ color: '#22c55e' }}>enabled{data.extraUsage.utilization != null ? ` (${data.extraUsage.utilization}% used)` : ''}</span>
+          ) : (
+            <span>disabled</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CopilotCard({ data }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <PlanBadge name={data.plan?.name} />
+        {data.plan?.individual && <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>individual</span>}
+      </div>
+
+      {data.user?.login && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          @{data.user.login}
+        </div>
+      )}
+
+      {data.features && (
+        <div className="flex flex-wrap gap-1">
+          {Object.entries(data.features).map(([k, v]) => (
+            <FeaturePill key={k} label={k.replace(/([A-Z])/g, ' $1').trim()} enabled={v} />
+          ))}
+        </div>
+      )}
+
+      {data.limits?.quotas && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+          <Shield size={9} className="inline mr-1" />
+          quotas: {JSON.stringify(data.limits.quotas)}
+          {data.limits.resetDate && <span> (resets {new Date(data.limits.resetDate).toLocaleDateString()})</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CodexCard({ data }) {
+  const sub = data.plan || {}
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <PlanBadge name={sub.name} />
+        {data.authMode && <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>via {data.authMode}</span>}
+      </div>
+
+      {data.user?.email && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          {data.user.email}
+        </div>
+      )}
+
+      {(sub.subscriptionStart || sub.subscriptionEnd) && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          <Clock size={9} className="inline mr-1" />
+          {sub.subscriptionStart && new Date(sub.subscriptionStart).toLocaleDateString()} → {sub.subscriptionEnd && new Date(sub.subscriptionEnd).toLocaleDateString()}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function GenericCard({ data }) {
+  return (
+    <div className="space-y-2">
+      {data.plan?.name && <PlanBadge name={data.plan.name} />}
+      {data.user && (
+        <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          {data.user.email || data.user.login || data.user.name || data.user.id || ''}
+        </div>
+      )}
+      <pre className="text-[10px] overflow-auto p-2" style={{ background: 'var(--c-bg3)', color: 'var(--c-text2)', maxHeight: 120 }}>
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </div>
+  )
+}
+
+function EditorCard({ data }) {
+  const [expanded, setExpanded] = useState(false)
+  const source = data.source
+  const color = editorColor(source)
+  const label = editorLabel(source)
+
+  const cardRenderer = () => {
+    switch (source) {
+      case 'cursor': return <CursorCard data={data} />
+      case 'windsurf': case 'windsurf-next': case 'antigravity': return <WindsurfCard data={data} />
+      case 'claude-code': return <ClaudeCodeCard data={data} />
+      case 'vscode': case 'vscode-insiders': return <CopilotCard data={data} />
+      case 'copilot-cli': return <CopilotCard data={data} />
+      case 'codex': return <CodexCard data={data} />
+      default: return <GenericCard data={data} />
+    }
+  }
+
+  // Models list (Windsurf variants)
+  const models = data.models || []
+
+  return (
+    <div className="card p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <EditorIcon source={source} size={20} />
+          <span className="text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>{label}</span>
+        </div>
+        <div className="w-1.5 h-1.5 rounded-full" style={{ background: color }} />
+      </div>
+
+      {cardRenderer()}
+
+      {/* Expandable models list */}
+      {models.length > 0 && (
+        <div>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 text-[10px] transition hover:opacity-80"
+            style={{ color: 'var(--c-text2)' }}
+          >
+            {expanded ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+            {models.length} models
+          </button>
+          {expanded && (
+            <div className="mt-2 space-y-1">
+              {models.map((m, i) => (
+                <div key={i} className="flex items-center justify-between text-[10px] py-0.5" style={{ borderBottom: '1px solid var(--c-border)' }}>
+                  <span style={{ color: 'var(--c-white)' }}>{m.label || m.model}</span>
+                  {m.remainingFraction != null && (
+                    <span className="font-mono" style={{ color: m.remainingFraction > 0.5 ? '#22c55e' : m.remainingFraction > 0.2 ? '#eab308' : '#ef4444' }}>
+                      {(m.remainingFraction * 100).toFixed(0)}%
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function Subscriptions() {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const load = () => {
+    setLoading(true)
+    setError(null)
+    fetchUsage()
+      .then(d => { setData(d); setLoading(false) })
+      .catch(e => { setError(e.message); setLoading(false) })
+  }
+
+  useEffect(() => { load() }, [])
+
+  return (
+    <div className="fade-in space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+          <CreditCard size={14} style={{ color: '#6366f1' }} />
+          Subscriptions
+        </div>
+        <button
+          onClick={load}
+          disabled={loading}
+          className="flex items-center gap-1 px-2 py-0.5 text-[11px] transition hover:bg-[var(--c-card)]"
+          style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+        >
+          <RefreshCw size={10} className={loading ? 'animate-spin' : ''} />
+          Refresh
+        </button>
+        {data && (
+          <span className="text-[11px] ml-auto" style={{ color: 'var(--c-text3)' }}>
+            {data.length} subscription{data.length !== 1 ? 's' : ''} detected
+          </span>
+        )}
+      </div>
+
+      {loading && !data && (
+        <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading subscriptions...</div>
+      )}
+
+      {error && (
+        <div className="text-[12px] px-3 py-2" style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.15)', color: '#ef4444' }}>
+          {error}
+        </div>
+      )}
+
+      {data && data.length === 0 && (
+        <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+          No subscriptions detected. Make sure your editors are installed and logged in.
+        </div>
+      )}
+
+      {data && data.length > 0 && (
+        <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))' }}>
+          {data.map((item, i) => (
+            <EditorCard key={item.source + '-' + i} data={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}