@actuate-media/cms-admin 0.32.0 → 0.34.0

package/src/views/settings/ModelSelector.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { AlertTriangle, Loader2, RefreshCw } from 'lucide-react'
+import { useId } from 'react'
+import { CapabilityBadges } from './CapabilityBadges.js'
+import type { AiModelView } from './useAiSettings.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'
+
+function priceLabel(model: AiModelView): string | null {
+  const p = model.pricing
+  if (!p) return null
+  if (typeof p.inputPerMillion === 'number' && typeof p.outputPerMillion === 'number') {
+    return `$${p.inputPerMillion}/$${p.outputPerMillion} per 1M tokens`
+  }
+  if (typeof p.inputPerMillion === 'number') return `$${p.inputPerMillion} per 1M tokens`
+  if (typeof p.image === 'number') return `$${p.image} per image`
+  return null
+}
+
+export function ModelSelector({
+  models,
+  value,
+  onChange,
+  onRefresh,
+  refreshing,
+  disabled,
+  noModelsHint,
+}: {
+  models: AiModelView[]
+  value: string
+  onChange: (id: string) => void
+  onRefresh: () => void
+  refreshing: boolean
+  disabled: boolean
+  /** Shown when there are no models to choose from. */
+  noModelsHint?: string
+}) {
+  const selectId = useId()
+  const selected = models.find((m) => m.id === value || m.providerModelId === value)
+  // The configured model is no longer in the catalog — keep the choice, warn.
+  const selectedUnavailable = Boolean(value) && !selected
+  const price = selected ? priceLabel(selected) : null
+
+  return (
+    <div>
+      <label htmlFor={selectId} className={LABEL_CLASS}>
+        Default model
+      </label>
+      <div className="flex items-center gap-2">
+        <select
+          id={selectId}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+          className={INPUT_CLASS}
+        >
+          <option value="">Select a model…</option>
+          {selectedUnavailable && <option value={value}>{value} (unavailable)</option>}
+          {models.map((m) => (
+            <option key={m.id} value={m.id} disabled={m.status === 'unavailable'}>
+              {m.displayName}
+              {m.status === 'deprecated' ? ' (deprecated)' : ''}
+              {m.status === 'unavailable' ? ' (unavailable)' : ''}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={disabled || refreshing}
+          aria-label="Refresh models"
+          className="border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {refreshing ? (
+            <Loader2 size={16} className="animate-spin" aria-hidden="true" />
+          ) : (
+            <RefreshCw size={16} aria-hidden="true" />
+          )}
+          <span className="sr-only sm:not-sr-only">Refresh models</span>
+        </button>
+      </div>
+
+      {models.length === 0 && (
+        <p className="text-muted-foreground mt-1 text-sm">
+          {noModelsHint ?? 'No models available yet. Connect a provider and refresh.'}
+        </p>
+      )}
+
+      {selectedUnavailable && (
+        <p className="text-warning mt-2 flex items-start gap-1.5 text-sm" role="status">
+          <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" />
+          The selected model is no longer offered by the provider. Pick another or refresh the list.
+        </p>
+      )}
+
+      {selected && (
+        <div className="mt-2 space-y-1.5">
+          <CapabilityBadges capabilities={selected.capabilities} />
+          <div className="text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm">
+            {typeof selected.contextWindow === 'number' && (
+              <span>{selected.contextWindow.toLocaleString()} token context</span>
+            )}
+            {price && <span>{price}</span>}
+            {selected.status === 'deprecated' && (
+              <span className="text-warning">Deprecated by provider</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/settings/MonthlyUsageCard.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useId } from 'react'
+import type { AiUsageView } from './useAiSettings.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`
+  return String(n)
+}
+
+/**
+ * Monthly token usage meter + budget limit input. Usage is REAL (aggregated
+ * from audit-log token totals) — it shows 0 until AI features have run, never a
+ * fabricated number.
+ */
+export function MonthlyUsageCard({
+  usage,
+  monthlyTokenLimit,
+  onChangeLimit,
+  budgetError,
+  canEdit,
+}: {
+  usage: AiUsageView | null
+  monthlyTokenLimit: string
+  onChangeLimit: (value: string) => void
+  budgetError: string | null
+  canEdit: boolean
+}) {
+  const headingId = useId()
+  const limitId = useId()
+
+  const used = usage?.totalTokens ?? 0
+  const limit = monthlyTokenLimit === '' ? undefined : Number(monthlyTokenLimit)
+  const pct = limit && limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : null
+  const over = pct !== null && used > (limit ?? 0)
+
+  const periodLabel = usage?.periodStart
+    ? new Date(usage.periodStart).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+    : 'This month'
+
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
+        Monthly Usage
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">
+        Token usage for {periodLabel}. Aggregated from completed AI runs.
+      </p>
+
+      <div className="space-y-4">
+        <div>
+          <div className="mb-1 flex items-center justify-between text-sm">
+            <span className="text-foreground font-medium">{formatTokens(used)} tokens used</span>
+            {limit && limit > 0 && (
+              <span className="text-muted-foreground">of {formatTokens(limit)}</span>
+            )}
+          </div>
+          {pct !== null ? (
+            <div
+              className="bg-muted h-2 w-full overflow-hidden rounded-full"
+              role="progressbar"
+              aria-valuenow={pct}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuetext={`${pct}% of monthly token budget used`}
+            >
+              <div
+                className={`h-full rounded-full transition-all ${over ? 'bg-destructive' : 'bg-brand'}`}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          ) : (
+            <p className="text-muted-foreground text-sm">
+              No monthly limit set. Usage is tracked but not capped.
+            </p>
+          )}
+          {over && (
+            <p className="text-destructive mt-1 text-sm" role="status">
+              Usage has exceeded the monthly limit.
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor={limitId} className={LABEL_CLASS}>
+            Monthly token limit
+          </label>
+          <input
+            id={limitId}
+            type="text"
+            inputMode="numeric"
+            value={monthlyTokenLimit}
+            disabled={!canEdit}
+            placeholder="No limit"
+            aria-invalid={Boolean(budgetError)}
+            aria-describedby={budgetError ? `${limitId}-error` : undefined}
+            onChange={(e) => onChangeLimit(e.target.value)}
+            className={INPUT_CLASS}
+          />
+          {budgetError ? (
+            <p id={`${limitId}-error`} className="text-destructive mt-1 text-sm">
+              {budgetError}
+            </p>
+          ) : (
+            <p className="text-muted-foreground mt-1 text-sm">
+              Leave blank for no limit. Enforcement and alerts arrive with usage metering.
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/views/settings/ProviderConnectionCard.tsx

@@ -0,0 +1,245 @@
+'use client'
+
+import {
+  AlertTriangle,
+  CheckCircle2,
+  KeyRound,
+  Loader2,
+  Lock,
+  Plug,
+  RefreshCw,
+  Trash2,
+} from 'lucide-react'
+import { useId, useState } from 'react'
+import { ConfirmDangerousSettingDialog } from './components.js'
+import type { AiConnectionStatus, AiProviderView } from './useAiSettings.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'
+
+const STATUS_META: Record<
+  AiConnectionStatus,
+  { label: string; tone: 'ok' | 'warn' | 'error' | 'idle' }
+> = {
+  connected: { label: 'Connected', tone: 'ok' },
+  invalid_key: { label: 'Invalid key', tone: 'error' },
+  rate_limited: { label: 'Rate limited', tone: 'warn' },
+  provider_down: { label: 'Provider unavailable', tone: 'warn' },
+  needs_setup: { label: 'Needs API key', tone: 'idle' },
+  unknown: { label: 'Not tested', tone: 'idle' },
+}
+
+function StatusPill({ status }: { status: AiConnectionStatus }) {
+  const meta = STATUS_META[status]
+  const toneClass =
+    meta.tone === 'ok'
+      ? 'border-success/30 bg-success/10 text-success'
+      : meta.tone === 'error'
+        ? 'border-destructive/30 bg-destructive/10 text-destructive'
+        : meta.tone === 'warn'
+          ? 'border-warning/30 bg-warning/10 text-warning'
+          : 'border-border bg-muted text-muted-foreground'
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${toneClass}`}
+    >
+      {meta.tone === 'ok' ? (
+        <CheckCircle2 size={12} aria-hidden="true" />
+      ) : meta.tone === 'error' ? (
+        <AlertTriangle size={12} aria-hidden="true" />
+      ) : (
+        <Plug size={12} aria-hidden="true" />
+      )}
+      {meta.label}
+    </span>
+  )
+}
+
+export interface ProviderConnectionCardProps {
+  provider: AiProviderView
+  canEdit: boolean
+  busy: boolean
+  onTest: () => void
+  onSyncModels: () => void
+  onUpdateKey: (apiKey: string | null) => Promise<void>
+  onUpdateBaseUrl: (baseUrl: string) => Promise<void>
+  onDisconnect: () => void
+}
+
+export function ProviderConnectionCard({
+  provider,
+  canEdit,
+  busy,
+  onTest,
+  onSyncModels,
+  onUpdateKey,
+  onUpdateBaseUrl,
+  onDisconnect,
+}: ProviderConnectionCardProps) {
+  const keyId = useId()
+  const baseUrlId = useId()
+  const [keyInput, setKeyInput] = useState('')
+  const [baseUrlInput, setBaseUrlInput] = useState(provider.baseUrl ?? '')
+  const [confirmKey, setConfirmKey] = useState(false)
+  const [confirmDisconnect, setConfirmDisconnect] = useState(false)
+
+  const envManaged = provider.keyManagedExternally
+  const keyEditable = canEdit && !envManaged
+
+  async function applyKey() {
+    setConfirmKey(false)
+    await onUpdateKey(keyInput.trim() === '' ? null : keyInput.trim())
+    setKeyInput('')
+  }
+
+  return (
+    <div className="border-border bg-card rounded-lg border p-4">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-foreground text-base font-medium">{provider.displayName}</span>
+            <StatusPill status={provider.status} />
+          </div>
+          <p className="text-muted-foreground mt-0.5 text-sm capitalize">{provider.provider}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onTest}
+            disabled={!canEdit || busy}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busy ? (
+              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
+            ) : (
+              <Plug size={14} aria-hidden="true" />
+            )}
+            Test connection
+          </button>
+          <button
+            type="button"
+            onClick={onSyncModels}
+            disabled={!canEdit || busy}
+            aria-label={`Refresh models for ${provider.displayName}`}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <RefreshCw size={14} aria-hidden="true" />
+            Refresh models
+          </button>
+          <button
+            type="button"
+            onClick={() => setConfirmDisconnect(true)}
+            disabled={!canEdit || busy}
+            aria-label={`Disconnect ${provider.displayName}`}
+            className="text-muted-foreground hover:text-destructive inline-flex items-center rounded-md p-1.5 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <Trash2 size={16} aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {/* API key */}
+        <div>
+          <label htmlFor={keyId} className={LABEL_CLASS}>
+            <KeyRound size={13} aria-hidden="true" />
+            API key
+            {envManaged && (
+              <span className="text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs">
+                <Lock size={11} aria-hidden="true" />
+                Managed by environment
+              </span>
+            )}
+          </label>
+          {envManaged ? (
+            <p className="text-muted-foreground text-sm">
+              This key is set via an environment variable and can&apos;t be edited here.
+              {provider.apiKeyLast4 ? ` Ends in ••••${provider.apiKeyLast4}.` : ''}
+            </p>
+          ) : (
+            <div className="flex items-center gap-2">
+              <input
+                id={keyId}
+                type="password"
+                autoComplete="off"
+                spellCheck={false}
+                value={keyInput}
+                disabled={!keyEditable || busy}
+                placeholder={
+                  provider.hasKey
+                    ? `Key set ••••${provider.apiKeyLast4 ?? ''} — enter a new key to replace`
+                    : 'Paste API key'
+                }
+                onChange={(e) => setKeyInput(e.target.value)}
+                className={INPUT_CLASS}
+              />
+              <button
+                type="button"
+                onClick={() => setConfirmKey(true)}
+                disabled={!keyEditable || busy || keyInput.trim() === ''}
+                className="bg-brand text-brand-foreground inline-flex shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                Save key
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Custom base URL */}
+        {provider.provider === 'custom' && (
+          <div>
+            <label htmlFor={baseUrlId} className={LABEL_CLASS}>
+              Base URL
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                id={baseUrlId}
+                type="url"
+                value={baseUrlInput}
+                disabled={!canEdit || busy}
+                placeholder="https://api.example.com/v1"
+                onChange={(e) => setBaseUrlInput(e.target.value)}
+                className={INPUT_CLASS}
+              />
+              <button
+                type="button"
+                onClick={() => onUpdateBaseUrl(baseUrlInput.trim())}
+                disabled={!canEdit || busy || baseUrlInput.trim() === (provider.baseUrl ?? '')}
+                className="border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center rounded-md border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        )}
+
+        {provider.lastTestedAt && (
+          <p className="text-muted-foreground text-sm">
+            Last tested {new Date(provider.lastTestedAt).toLocaleString()}.
+          </p>
+        )}
+      </div>
+
+      <ConfirmDangerousSettingDialog
+        open={confirmKey}
+        title="Replace the stored API key?"
+        description="The new key is encrypted and replaces the existing one. Existing AI features will use it immediately."
+        confirmLabel="Save key"
+        onConfirm={applyKey}
+        onCancel={() => setConfirmKey(false)}
+      />
+      <ConfirmDangerousSettingDialog
+        open={confirmDisconnect}
+        title={`Disconnect ${provider.displayName}?`}
+        description="This removes the stored key and model catalog for this provider. AI features that rely on it will stop working until you reconnect."
+        confirmLabel="Disconnect"
+        onConfirm={() => {
+          setConfirmDisconnect(false)
+          onDisconnect()
+        }}
+        onCancel={() => setConfirmDisconnect(false)}
+      />
+    </div>
+  )
+}