@actuate-media/cms-admin 0.32.0 → 0.34.0

package/src/views/Settings.tsx

@@ -22,8 +22,9 @@ import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
-import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
+import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
+import { AISettingsTab } from './settings/AISettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { Users as UsersView } from './Users.js'
@@ -314,11 +315,11 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="seo" className="space-y-4">
-          <SEOConfigPanel />
+          <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="ai" className="space-y-4">
-          <AiStatusTab />
+          <AISettingsTab role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="users">
@@ -350,144 +351,6 @@ export function Settings({
   )
 }
 
-// ---------------------------------------------------------------------------
-// AI Status (read-only)
-// ---------------------------------------------------------------------------
-
-interface AiStatus {
-  installed: boolean
-  configured: boolean
-  provider: string | null
-}
-
-const PROVIDER_LABELS: Record<string, string> = {
-  anthropic: 'Anthropic (Claude)',
-  openai: 'OpenAI (GPT)',
-}
-
-/**
- * Honest, read-only view of the AI integration. AI is configured server-side
- * via the `@actuate-media/plugin-ai` plugin reading environment variables —
- * there is intentionally no API-key field here, because the dashboard never
- * stores provider keys. This panel just reports current status.
- */
-function AiStatusTab() {
-  const { data, loading, error, refetch } = useApiData<AiStatus>('/ai/status')
-
-  if (loading) {
-    return (
-      <div className="flex h-40 items-center justify-center">
-        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-        <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-        <span className="flex-1 text-sm text-red-800">{error}</span>
-        <button
-          onClick={refetch}
-          className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-        >
-          Retry
-        </button>
-      </div>
-    )
-  }
-
-  const installed = data?.installed ?? false
-  const configured = data?.configured ?? false
-  const providerLabel = data?.provider ? (PROVIDER_LABELS[data.provider] ?? data.provider) : null
-
-  const status: { tone: 'ok' | 'warn' | 'off'; title: string; detail: string } = !installed
-    ? {
-        tone: 'off',
-        title: 'AI features are not installed',
-        detail:
-          'Add the @actuate-media/plugin-ai plugin to your CMS config to enable AI-powered content features.',
-      }
-    : configured
-      ? {
-          tone: 'ok',
-          title: providerLabel ? `AI is active — ${providerLabel}` : 'AI is active',
-          detail:
-            'A provider is configured and ready. AI-powered features in the editor and media library will use it.',
-        }
-      : {
-          tone: 'warn',
-          title: 'AI plugin installed, but no provider is configured',
-          detail:
-            'Set a provider and API key where you register the plugin, e.g. aiPlugin({ provider: "anthropic", apiKey: process.env.ANTHROPIC_API_KEY }).',
-        }
-
-  const toneStyles: Record<typeof status.tone, string> = {
-    ok: 'border-green-200 bg-green-50',
-    warn: 'border-amber-200 bg-amber-50',
-    off: 'border-gray-200 bg-gray-50',
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className={`flex items-start gap-3 rounded-lg border p-4 ${toneStyles[status.tone]}`}>
-        {status.tone === 'ok' ? (
-          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-green-600" />
-        ) : status.tone === 'warn' ? (
-          <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
-        ) : (
-          <Bot className="mt-0.5 h-5 w-5 shrink-0 text-gray-500" />
-        )}
-        <div className="flex-1">
-          <h3 className="text-sm font-semibold text-gray-900">{status.title}</h3>
-          <p className="mt-0.5 text-xs text-gray-600">{status.detail}</p>
-        </div>
-      </div>
-
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="mb-1 text-sm font-semibold text-gray-900">How AI is configured</h3>
-        <p className="mb-3 text-xs text-gray-500">
-          AI is set up in code, not from this dashboard. Provider credentials live in environment
-          variables and are never entered or stored here.
-        </p>
-        <ul className="space-y-1.5 text-xs text-gray-600">
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              1
-            </span>
-            <span>
-              Install the AI plugin:{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">@actuate-media/plugin-ai</code>.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              2
-            </span>
-            <span>
-              Set <code className="rounded bg-gray-100 px-1 font-mono">ANTHROPIC_API_KEY</code> or{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">OPENAI_API_KEY</code> in your
-              environment.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              3
-            </span>
-            <span>
-              Register it in your CMS config:{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">
-                aiPlugin(&#123; provider, apiKey &#125;)
-              </code>
-              .
-            </span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Updates Panel
 // ---------------------------------------------------------------------------

package/src/views/settings/AISettingsTab.tsx

@@ -0,0 +1,411 @@
+'use client'
+
+import { AlertTriangle, Bot, Info, Loader2, Plus } from 'lucide-react'
+import { useId, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { AiFeaturesCard } from './AiFeaturesCard.js'
+import { ModelSelector } from './ModelSelector.js'
+import { MonthlyUsageCard } from './MonthlyUsageCard.js'
+import { ProviderConnectionCard } from './ProviderConnectionCard.js'
+import { SettingsSaveBar } from './components.js'
+import {
+  useAiSettings,
+  type AiProviderKey,
+  type ProviderInput,
+  type UseAiSettings,
+} 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 PROVIDER_OPTIONS: Array<{ value: AiProviderKey; label: string }> = [
+  { value: 'anthropic', label: 'Anthropic (Claude)' },
+  { value: 'openai', label: 'OpenAI (GPT)' },
+  { value: 'xai', label: 'xAI (Grok)' },
+  { value: 'custom', label: 'Custom (OpenAI-compatible)' },
+]
+
+export interface AISettingsTabProps {
+  /** Current user's role. Only ADMIN can persist changes. */
+  role?: string
+}
+
+export function AISettingsTab({ role }: AISettingsTabProps) {
+  const canEdit = role === 'ADMIN'
+  const ai = useAiSettings(canEdit)
+
+  if (ai.loading) {
+    return (
+      <div className="space-y-4" aria-busy="true" aria-live="polite">
+        <span className="sr-only">Loading AI settings…</span>
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="border-border bg-card rounded-lg border p-4">
+            <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
+            <div className="space-y-3">
+              <div className="bg-muted h-9 w-full animate-pulse rounded" />
+              <div className="bg-muted h-9 w-full animate-pulse rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {ai.loadError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{ai.loadError}</span>
+          <button
+            type="button"
+            onClick={ai.refetch}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {!canEdit && (
+        <div className="border-border bg-muted text-muted-foreground flex items-center gap-2 rounded-lg border p-3 text-sm">
+          <Info size={16} className="shrink-0" aria-hidden="true" />
+          You have read-only access to AI settings. Only administrators can make changes.
+        </div>
+      )}
+
+      <AssistantCard ai={ai} canEdit={canEdit} />
+      <ProviderConnectionsSection ai={ai} canEdit={canEdit} />
+      <AiFeaturesCard features={ai.form.features} canEdit={canEdit} onToggle={ai.toggleFeature} />
+      <MonthlyUsageCard
+        usage={ai.usage}
+        monthlyTokenLimit={ai.form.monthlyTokenLimit}
+        onChangeLimit={ai.setMonthlyTokenLimit}
+        budgetError={ai.budgetError}
+        canEdit={canEdit}
+      />
+
+      {ai.saveState === 'error' && ai.saveError && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{ai.saveError}</span>
+        </div>
+      )}
+
+      <SettingsSaveBar
+        dirty={ai.dirty}
+        canEdit={canEdit}
+        hasErrors={Boolean(ai.budgetError)}
+        saveState={ai.saveState}
+        onSave={ai.save}
+        onReset={ai.reset}
+      />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AI Assistant — default provider + default model
+// ---------------------------------------------------------------------------
+
+function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
+  const headingId = useId()
+  const providerSelectId = useId()
+  const [refreshing, setRefreshing] = useState(false)
+
+  const defaultProvider = ai.providers.find((p) => p.id === ai.form.defaultProviderId)
+  const modelsForDefault = useMemo(() => {
+    if (!defaultProvider) return ai.models
+    return ai.models.filter((m) => m.provider === defaultProvider.provider)
+  }, [ai.models, defaultProvider])
+
+  async function handleRefresh() {
+    if (!defaultProvider) return
+    setRefreshing(true)
+    try {
+      const res = await ai.syncModels(defaultProvider.id)
+      if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
+      else if (res.fromFallback)
+        toast.warning(res.warning ?? 'Showing the curated model list (live listing unavailable).')
+      else toast.success('Model list refreshed.')
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <div className="mb-4 flex items-center gap-2">
+        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
+          <Bot size={18} aria-hidden="true" />
+        </span>
+        <div>
+          <h3 id={headingId} className="text-foreground text-base font-medium">
+            AI Assistant
+          </h3>
+          <p className="text-muted-foreground text-sm">
+            The default provider and model used across AI features.
+          </p>
+        </div>
+      </div>
+
+      {ai.providers.length === 0 ? (
+        <div className="border-border bg-muted/40 text-muted-foreground rounded-md border border-dashed p-4 text-sm">
+          No AI providers are connected yet. Add one below to enable AI features.
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div>
+            <label htmlFor={providerSelectId} className={LABEL_CLASS}>
+              Default provider
+            </label>
+            <select
+              id={providerSelectId}
+              value={ai.form.defaultProviderId}
+              disabled={!canEdit}
+              onChange={(e) => ai.setDefaultProvider(e.target.value)}
+              className={INPUT_CLASS}
+            >
+              <option value="">Select a provider…</option>
+              {ai.providers.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.displayName}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <ModelSelector
+            models={modelsForDefault}
+            value={ai.form.defaultModelId}
+            onChange={ai.setDefaultModel}
+            onRefresh={handleRefresh}
+            refreshing={refreshing}
+            disabled={!canEdit || !defaultProvider}
+            noModelsHint={
+              defaultProvider
+                ? 'No models cached yet. Use “Refresh models” to load them.'
+                : 'Select a default provider to choose a model.'
+            }
+          />
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Provider connections (manage multiple)
+// ---------------------------------------------------------------------------
+
+function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
+  const headingId = useId()
+  const [adding, setAdding] = useState(false)
+
+  return (
+    <section aria-labelledby={headingId} className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 id={headingId} className="text-foreground text-base font-medium">
+          Provider connections
+        </h3>
+        {canEdit && !adding && (
+          <button
+            type="button"
+            onClick={() => setAdding(true)}
+            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"
+          >
+            <Plus size={14} aria-hidden="true" />
+            Add provider
+          </button>
+        )}
+      </div>
+
+      {adding && (
+        <AddProviderForm
+          ai={ai}
+          onDone={() => setAdding(false)}
+          onCancel={() => setAdding(false)}
+        />
+      )}
+
+      {ai.providers.map((p) => (
+        <ProviderConnectionCard
+          key={p.id}
+          provider={p}
+          canEdit={canEdit}
+          busy={ai.busyProviderId === p.id}
+          onTest={async () => {
+            const res = await ai.testProvider(p.id)
+            if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
+            else toast.success(res.message ?? 'Connection successful.')
+          }}
+          onSyncModels={async () => {
+            const res = await ai.syncModels(p.id)
+            if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
+            else if (res.fromFallback)
+              toast.warning(res.warning ?? 'Showing the curated model list.')
+            else toast.success('Model list refreshed.')
+          }}
+          onUpdateKey={async (apiKey) => {
+            const res = await ai.updateProvider(p.id, { apiKey })
+            if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
+            else toast.success('API key updated.')
+          }}
+          onUpdateBaseUrl={async (baseUrl) => {
+            const res = await ai.updateProvider(p.id, { baseUrl })
+            if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
+            else toast.success('Base URL updated.')
+          }}
+          onDisconnect={async () => {
+            const res = await ai.deleteProvider(p.id)
+            if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
+            else toast.success(`${p.displayName} disconnected.`)
+          }}
+        />
+      ))}
+
+      {ai.providers.length === 0 && !adding && (
+        <p className="text-muted-foreground text-sm">No providers connected.</p>
+      )}
+    </section>
+  )
+}
+
+function AddProviderForm({
+  ai,
+  onDone,
+  onCancel,
+}: {
+  ai: UseAiSettings
+  onDone: () => void
+  onCancel: () => void
+}) {
+  const providerId = useId()
+  const nameId = useId()
+  const keyId = useId()
+  const baseUrlId = useId()
+  const [provider, setProvider] = useState<AiProviderKey>('anthropic')
+  const [displayName, setDisplayName] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [baseUrl, setBaseUrl] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const needsBaseUrl = provider === 'custom'
+  const canSubmit = !submitting && (!needsBaseUrl || baseUrl.trim() !== '')
+
+  async function submit() {
+    setSubmitting(true)
+    try {
+      const input: ProviderInput = {
+        provider,
+        displayName: displayName.trim() || undefined,
+        apiKey: apiKey.trim() || undefined,
+        baseUrl: needsBaseUrl ? baseUrl.trim() : undefined,
+        test: true,
+      }
+      const res = await ai.createProvider(input)
+      if (!res.ok) {
+        toast.error(res.error ?? 'Failed to add provider.')
+        return
+      }
+      toast.success('Provider connected.')
+      onDone()
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="border-border bg-card rounded-lg border p-4">
+      <h4 className="text-foreground mb-3 text-base font-medium">Add a provider</h4>
+      <div className="space-y-3">
+        <div>
+          <label htmlFor={providerId} className={LABEL_CLASS}>
+            Provider
+          </label>
+          <select
+            id={providerId}
+            value={provider}
+            onChange={(e) => setProvider(e.target.value as AiProviderKey)}
+            className={INPUT_CLASS}
+          >
+            {PROVIDER_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label htmlFor={nameId} className={LABEL_CLASS}>
+            Display name (optional)
+          </label>
+          <input
+            id={nameId}
+            type="text"
+            value={displayName}
+            placeholder="e.g. Production Anthropic"
+            onChange={(e) => setDisplayName(e.target.value)}
+            className={INPUT_CLASS}
+          />
+        </div>
+        {needsBaseUrl && (
+          <div>
+            <label htmlFor={baseUrlId} className={LABEL_CLASS}>
+              Base URL
+            </label>
+            <input
+              id={baseUrlId}
+              type="url"
+              value={baseUrl}
+              placeholder="https://api.example.com/v1"
+              onChange={(e) => setBaseUrl(e.target.value)}
+              className={INPUT_CLASS}
+            />
+          </div>
+        )}
+        <div>
+          <label htmlFor={keyId} className={LABEL_CLASS}>
+            API key
+          </label>
+          <input
+            id={keyId}
+            type="password"
+            autoComplete="off"
+            spellCheck={false}
+            value={apiKey}
+            placeholder="Paste API key (or leave blank if set via environment)"
+            onChange={(e) => setApiKey(e.target.value)}
+            className={INPUT_CLASS}
+          />
+        </div>
+        <div className="flex items-center justify-end gap-3 pt-1">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={submitting}
+            className="text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-sm transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={!canSubmit}
+            className="bg-brand text-brand-foreground inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {submitting && <Loader2 size={14} className="animate-spin" aria-hidden="true" />}
+            Connect &amp; test
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/settings/AiFeaturesCard.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useId } from 'react'
+import { SettingsToggleRow } from './components.js'
+import type { AiFeatureView } from './useAiSettings.js'
+
+/**
+ * Global AI feature toggles. Each switch persists (via the Save bar) to the
+ * shared `ai.features.*` flags. Enforcement across modules lands in a later
+ * phase; here we surface and store the operator's intent.
+ */
+export function AiFeaturesCard({
+  features,
+  canEdit,
+  onToggle,
+}: {
+  features: AiFeatureView[]
+  canEdit: boolean
+  onToggle: (key: string, enabled: boolean) => void
+}) {
+  const headingId = useId()
+  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">
+        AI Features
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">
+        Turn individual AI-powered features on or off across the CMS.
+      </p>
+
+      {features.length === 0 ? (
+        <p className="text-muted-foreground text-sm">No AI features are available.</p>
+      ) : (
+        <div className="space-y-4">
+          {features.map((f) => (
+            <SettingsToggleRow
+              key={f.key}
+              label={f.label}
+              description={f.description}
+              checked={f.enabled}
+              disabled={!canEdit}
+              onChange={(v) => onToggle(f.key, v)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/views/settings/CapabilityBadges.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import {
+  Binary,
+  Braces,
+  Brain,
+  Eye,
+  Image as ImageIcon,
+  type LucideIcon,
+  Type,
+  Wrench,
+  Zap,
+} from 'lucide-react'
+
+/**
+ * Renders a model's capabilities as labelled badges. Text + icon (never
+ * color-only) so the information is accessible to color-blind users and screen
+ * readers.
+ */
+
+interface CapabilityMeta {
+  label: string
+  icon: LucideIcon
+}
+
+// Ordered for stable rendering. Keys match `AIModelCapabilities`.
+const CAPABILITY_META: Record<string, CapabilityMeta> = {
+  text: { label: 'Text', icon: Type },
+  vision: { label: 'Vision', icon: Eye },
+  imageGeneration: { label: 'Image gen', icon: ImageIcon },
+  embeddings: { label: 'Embeddings', icon: Binary },
+  reasoning: { label: 'Reasoning', icon: Brain },
+  toolCalling: { label: 'Tools', icon: Wrench },
+  structuredOutput: { label: 'Structured', icon: Braces },
+  longContext: { label: 'Long context', icon: Zap },
+}
+
+export function CapabilityBadges({
+  capabilities,
+  className,
+}: {
+  capabilities: Record<string, boolean>
+  className?: string
+}) {
+  const active = Object.keys(CAPABILITY_META).filter((k) => capabilities?.[k])
+  if (active.length === 0) {
+    return <span className="text-muted-foreground text-sm">No capability data</span>
+  }
+  return (
+    <ul className={`flex flex-wrap gap-1.5 ${className ?? ''}`} aria-label="Model capabilities">
+      {active.map((key) => {
+        const meta = CAPABILITY_META[key]!
+        const Icon = meta.icon
+        return (
+          <li
+            key={key}
+            className="border-border bg-muted text-muted-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs"
+          >
+            <Icon size={11} aria-hidden="true" />
+            {meta.label}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}