@swarmclawai/swarmclaw 0.2.0

package/src/components/schedules/schedule-sheet.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import { useEffect, useState, useMemo } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { createSchedule, updateSchedule, deleteSchedule } from '@/lib/schedules'
+import { api } from '@/lib/api-client'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AiGenBlock } from '@/components/shared/ai-gen-block'
+import type { ScheduleType, ScheduleStatus } from '@/types'
+import cronstrue from 'cronstrue'
+
+const CRON_PRESETS = [
+  { label: 'Every hour', cron: '0 * * * *' },
+  { label: 'Every 6 hours', cron: '0 */6 * * *' },
+  { label: 'Daily at 9am', cron: '0 9 * * *' },
+  { label: 'Weekly Mon 9am', cron: '0 9 * * 1' },
+]
+
+function getNextRuns(cron: string, count: number = 3): Date[] {
+  try {
+    // Simple cron parser for next N runs
+    const { parseExpression } = require('cron-parser')
+    const interval = parseExpression(cron)
+    const runs: Date[] = []
+    for (let i = 0; i < count; i++) {
+      runs.push(interval.next().toDate())
+    }
+    return runs
+  } catch {
+    return []
+  }
+}
+
+function formatCronHuman(cron: string): string {
+  try {
+    return cronstrue.toString(cron, { use24HourTimeFormat: false })
+  } catch {
+    return 'Invalid cron expression'
+  }
+}
+
+function formatDate(d: Date): string {
+  return d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' }) +
+    ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+export function ScheduleSheet() {
+  const open = useAppStore((s) => s.scheduleSheetOpen)
+  const setOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const editingId = useAppStore((s) => s.editingScheduleId)
+  const setEditingId = useAppStore((s) => s.setEditingScheduleId)
+  const schedules = useAppStore((s) => s.schedules)
+  const loadSchedules = useAppStore((s) => s.loadSchedules)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+
+  const [name, setName] = useState('')
+  const [agentId, setAgentId] = useState('')
+  const [taskPrompt, setTaskPrompt] = useState('')
+  const [scheduleType, setScheduleType] = useState<ScheduleType>('cron')
+  const [cron, setCron] = useState('0 * * * *')
+  const [intervalMs, setIntervalMs] = useState(3600000)
+  const [status, setStatus] = useState<ScheduleStatus>('active')
+  const [customCron, setCustomCron] = useState(false)
+
+  // AI generation state
+  const [aiPrompt, setAiPrompt] = useState('')
+  const [generating, setGenerating] = useState(false)
+  const [generated, setGenerated] = useState(false)
+  const [genError, setGenError] = useState('')
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+
+  const editing = editingId ? schedules[editingId] : null
+  const agentList = Object.values(agents)
+
+  const handleGenerate = async () => {
+    if (!aiPrompt.trim()) return
+    setGenerating(true)
+    setGenError('')
+    try {
+      const result = await api<{ name?: string; taskPrompt?: string; scheduleType?: ScheduleType; cron?: string; intervalMs?: number; error?: string }>('POST', '/generate', { type: 'schedule', prompt: aiPrompt })
+      if (result.error) {
+        setGenError(result.error)
+      } else if (result.name || result.taskPrompt) {
+        if (result.name) setName(result.name)
+        if (result.taskPrompt) setTaskPrompt(result.taskPrompt)
+        if (result.scheduleType) setScheduleType(result.scheduleType)
+        if (result.cron) { setCron(result.cron); setCustomCron(true) }
+        if (result.intervalMs) setIntervalMs(result.intervalMs)
+        setGenerated(true)
+      } else {
+        setGenError('AI returned empty response — try again')
+      }
+    } catch (err: unknown) {
+      setGenError(err instanceof Error ? err.message : 'Generation failed')
+    }
+    setGenerating(false)
+  }
+
+  useEffect(() => {
+    if (open) {
+      loadAgents()
+      loadSettings()
+      setAiPrompt('')
+      setGenerating(false)
+      setGenerated(false)
+      setGenError('')
+      if (editing) {
+        setName(editing.name || '')
+        setAgentId(editing.agentId)
+        setTaskPrompt(editing.taskPrompt)
+        setScheduleType(editing.scheduleType)
+        setCron(editing.cron || '0 * * * *')
+        setIntervalMs(editing.intervalMs || 3600000)
+        setStatus(editing.status)
+        setCustomCron(!CRON_PRESETS.some((p) => p.cron === editing.cron))
+      } else {
+        setName('')
+        setAgentId('')
+        setTaskPrompt('')
+        setScheduleType('cron')
+        setCron('0 * * * *')
+        setIntervalMs(3600000)
+        setStatus('active')
+        setCustomCron(false)
+      }
+    }
+  }, [open, editingId])
+
+  const cronHuman = useMemo(() => formatCronHuman(cron), [cron])
+  const nextRuns = useMemo(() => getNextRuns(cron), [cron])
+
+  const onClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    const data = {
+      name: name.trim(),
+      agentId,
+      taskPrompt,
+      scheduleType,
+      cron: scheduleType === 'cron' ? cron : undefined,
+      intervalMs: scheduleType === 'interval' ? intervalMs : undefined,
+      runAt: scheduleType === 'once' ? Date.now() + intervalMs : undefined,
+      status,
+    }
+    if (editing) {
+      await updateSchedule(editing.id, data)
+    } else {
+      await createSchedule(data)
+    }
+    await loadSchedules()
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    if (editing) {
+      await deleteSchedule(editing.id)
+      await loadSchedules()
+      onClose()
+    }
+  }
+
+  const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+
+  return (
+    <BottomSheet open={open} onClose={onClose} wide>
+      <div className="mb-10">
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
+          {editing ? 'Edit Schedule' : 'New Schedule'}
+        </h2>
+        <p className="text-[14px] text-text-3">Automate agent tasks on a schedule</p>
+      </div>
+
+      {/* AI Generation */}
+      {!editing && <AiGenBlock
+        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
+        generating={generating} generated={generated} genError={genError}
+        onGenerate={handleGenerate} appSettings={appSettings}
+        placeholder='Describe the schedule, e.g. "Run keyword research every Monday at 9am"'
+      />}
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily keyword research" className={inputClass} style={{ fontFamily: 'inherit' }} />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Agent</label>
+        <select value={agentId || ''} onChange={(e) => setAgentId(e.target.value)} className={`${inputClass} appearance-none cursor-pointer`} style={{ fontFamily: 'inherit' }}>
+          <option value="">Select agent...</option>
+          {agentList.map((p) => (
+            <option key={p.id} value={p.id}>{p.name}{p.isOrchestrator ? ' (Orchestrator)' : ''}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Task Prompt</label>
+        <textarea
+          value={taskPrompt}
+          onChange={(e) => setTaskPrompt(e.target.value)}
+          placeholder="What should the agent do when triggered?"
+          rows={4}
+          className={`${inputClass} resize-y min-h-[100px]`}
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Schedule Type</label>
+        <div className="grid grid-cols-3 gap-3">
+          {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
+            <button
+              key={t}
+              onClick={() => setScheduleType(t)}
+              className={`py-3.5 px-4 rounded-[14px] text-center cursor-pointer transition-all duration-200
+                active:scale-[0.97] text-[14px] font-600 capitalize border
+                ${scheduleType === t
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {scheduleType === 'cron' && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Schedule</label>
+
+          {/* Preset buttons */}
+          <div className="flex flex-wrap gap-2 mb-4">
+            {CRON_PRESETS.map((p) => (
+              <button
+                key={p.cron}
+                onClick={() => { setCron(p.cron); setCustomCron(false) }}
+                className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                  ${cron === p.cron && !customCron
+                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {p.label}
+              </button>
+            ))}
+            <button
+              onClick={() => setCustomCron(true)}
+              className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                ${customCron
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              Custom
+            </button>
+          </div>
+
+          {/* Custom cron input */}
+          {customCron && (
+            <input type="text" value={cron} onChange={(e) => setCron(e.target.value)} placeholder="0 * * * *" className={`${inputClass} font-mono text-[14px] mb-3`} />
+          )}
+
+          {/* Human-readable preview */}
+          <div className="p-4 rounded-[14px] bg-surface border border-white/[0.06]">
+            <div className="text-[14px] text-text-2 font-600 mb-2">{cronHuman}</div>
+            {cron && (
+              <div className="font-mono text-[12px] text-text-3/50 mb-3">{cron}</div>
+            )}
+            {nextRuns.length > 0 && (
+              <div className="space-y-1.5">
+                <div className="text-[11px] text-text-3/60 uppercase tracking-wider font-600">Next runs</div>
+                {nextRuns.map((d, i) => (
+                  <div key={i} className="text-[12px] text-text-3 font-mono">{formatDate(d)}</div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {scheduleType === 'interval' && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Interval (minutes)</label>
+          <input
+            type="number"
+            value={Math.round(intervalMs / 60000)}
+            onChange={(e) => setIntervalMs(Math.max(1, parseInt(e.target.value) || 1) * 60000)}
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      )}
+
+      {editing && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Status</label>
+          <div className="flex gap-2">
+            {(['active', 'paused'] as ScheduleStatus[]).map((s) => (
+              <button
+                key={s}
+                onClick={() => setStatus(s)}
+                className={`px-4 py-2 rounded-[10px] text-[13px] font-600 capitalize cursor-pointer transition-all border
+                  ${status === s
+                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                    : 'bg-surface border-white/[0.06] text-text-3'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+        {editing && (
+          <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
+            Delete
+          </button>
+        )}
+        <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
+          Cancel
+        </button>
+        <button onClick={handleSave} disabled={!name.trim() || !agentId} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110" style={{ fontFamily: 'inherit' }}>
+          {editing ? 'Save' : 'Create'}
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/secrets/secret-sheet.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { api } from '@/lib/api-client'
+
+const inputClass = 'w-full px-4 py-3 rounded-[14px] bg-bg border border-white/[0.06] text-text text-[14px] outline-none focus:border-accent-bright/40 transition-colors placeholder:text-text-3/70'
+
+export function SecretSheet() {
+  const open = useAppStore((s) => s.secretSheetOpen)
+  const setOpen = useAppStore((s) => s.setSecretSheetOpen)
+  const editingId = useAppStore((s) => s.editingSecretId)
+  const setEditingId = useAppStore((s) => s.setEditingSecretId)
+  const secrets = useAppStore((s) => s.secrets)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+
+  const [name, setName] = useState('')
+  const [service, setService] = useState('')
+  const [value, setValue] = useState('')
+  const [scope, setScope] = useState<'global' | 'agent'>('global')
+  const [agentIds, setAgentIds] = useState<string[]>([])
+  const [saving, setSaving] = useState(false)
+
+  const editing = editingId ? secrets[editingId] : null
+  const orchestrators = Object.values(agents).filter((p) => p.isOrchestrator)
+
+  useEffect(() => {
+    if (open) loadAgents()
+  }, [open])
+
+  useEffect(() => {
+    if (editing) {
+      setName(editing.name)
+      setService(editing.service)
+      setValue('')
+      setScope(editing.scope)
+      setAgentIds(editing.agentIds || [])
+    } else {
+      setName('')
+      setService('')
+      setValue('')
+      setScope('global')
+      setAgentIds([])
+    }
+  }, [editing, open])
+
+  const handleClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    if (!name.trim() || (!editing && !value.trim())) return
+    setSaving(true)
+    try {
+      if (editing) {
+        await api('PUT', `/secrets/${editing.id}`, {
+          name: name.trim(),
+          service: service.trim(),
+          scope,
+          agentIds: scope === 'agent' ? agentIds : [],
+        })
+      } else {
+        await api('POST', '/secrets', {
+          name: name.trim(),
+          service: service.trim(),
+          value: value.trim(),
+          scope,
+          agentIds: scope === 'agent' ? agentIds : [],
+        })
+      }
+      await loadSecrets()
+      handleClose()
+    } catch (err: any) {
+      console.error('Failed to save secret:', err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!editing) return
+    try {
+      await api('DELETE', `/secrets/${editing.id}`)
+      await loadSecrets()
+      handleClose()
+    } catch (err: any) {
+      console.error('Failed to delete secret:', err.message)
+    }
+  }
+
+  return (
+    <BottomSheet open={open} onClose={handleClose}>
+      <div className="space-y-5">
+        <h2 className="font-display text-[20px] font-700 tracking-[-0.02em]">{editing ? 'Edit Secret' : 'New Secret'}</h2>
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Name</label>
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. My Gmail API Key" className={inputClass} style={{ fontFamily: 'inherit' }} />
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Service</label>
+          <input type="text" value={service} onChange={(e) => setService(e.target.value)} placeholder="e.g. gmail, ahrefs, custom" className={inputClass} style={{ fontFamily: 'inherit' }} />
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+            {editing ? 'Value (leave blank to keep current)' : 'Value'}
+          </label>
+          <input type="password" value={value} onChange={(e) => setValue(e.target.value)} placeholder="API key, password, token..." className={inputClass} style={{ fontFamily: 'inherit' }} />
+        </div>
+
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Scope</label>
+          <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+            {(['global', 'agent'] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => setScope(s)}
+                className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
+                  scope === s ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+                }`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {s === 'global' ? 'All Orchestrators' : 'Specific'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {scope === 'agent' && orchestrators.length > 0 && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Orchestrators</label>
+            <div className="flex flex-wrap gap-2">
+              {orchestrators.map((p) => (
+                <button
+                  key={p.id}
+                  onClick={() => setAgentIds((prev) => prev.includes(p.id) ? prev.filter((x) => x !== p.id) : [...prev, p.id])}
+                  className={`px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border ${
+                    agentIds.includes(p.id)
+                      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                      : 'bg-bg border-white/[0.06] text-text-3 hover:text-text-2'
+                  }`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {p.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-3 pt-3">
+          {editing && (
+            <button
+              onClick={handleDelete}
+              className="px-5 py-3 rounded-[14px] border border-danger/30 bg-transparent text-danger text-[14px] font-600 cursor-pointer hover:bg-danger/10 transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Delete
+            </button>
+          )}
+          <div className="flex-1" />
+          <button onClick={handleClose} className="px-5 py-3 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-colors" style={{ fontFamily: 'inherit' }}>Cancel</button>
+          <button
+            onClick={handleSave}
+            disabled={saving || !name.trim() || (!editing && !value.trim())}
+            className="px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {saving ? 'Saving...' : editing ? 'Update' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/secrets/secrets-list.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface Props {
+  inSidebar?: boolean
+}
+
+export function SecretsList({ inSidebar }: Props) {
+  const secrets = useAppStore((s) => s.secrets)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const agents = useAppStore((s) => s.agents)
+  const setSecretSheetOpen = useAppStore((s) => s.setSecretSheetOpen)
+  const setEditingSecretId = useAppStore((s) => s.setEditingSecretId)
+
+  useEffect(() => {
+    loadSecrets()
+  }, [])
+
+  const secretList = Object.values(secrets)
+
+  if (!secretList.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-12 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-white/[0.03] border border-white/[0.06] flex items-center justify-center mb-4">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </div>
+        <p className="text-[13px] text-text-3 mb-1 font-600">No secrets yet</p>
+        <p className="text-[12px] text-text-3/60">Add API keys & credentials for orchestrators</p>
+        <button
+          onClick={() => { setEditingSecretId(null); setSecretSheetOpen(true) }}
+          className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
+          style={{ fontFamily: 'inherit' }}
+        >
+          + Add Secret
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      <div className="space-y-2">
+        {secretList.map((secret) => {
+          const scopeLabel = secret.scope === 'global'
+            ? 'All orchestrators'
+            : `${secret.agentIds.length} orchestrator(s)`
+          const scopedNames = secret.scope === 'agent'
+            ? secret.agentIds.map((id) => agents[id]?.name).filter(Boolean).join(', ')
+            : null
+          return (
+            <button
+              key={secret.id}
+              onClick={() => {
+                setEditingSecretId(secret.id)
+                setSecretSheetOpen(true)
+              }}
+              className="w-full text-left p-4 rounded-[14px] bg-surface border border-white/[0.06]
+                hover:border-white/[0.1] cursor-pointer transition-all group"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <div className="flex items-center gap-2.5 mb-1">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+                <span className="text-[14px] font-600 text-text truncate">{secret.name}</span>
+              </div>
+              <div className="flex items-center gap-2 pl-[22px]">
+                <span className="text-[11px] font-mono text-text-3">{secret.service}</span>
+                <span className="text-[11px] text-text-3/60">·</span>
+                <span className={`text-[10px] font-600 ${
+                  secret.scope === 'global' ? 'text-emerald-400' : 'text-amber-400'
+                }`}>
+                  {scopeLabel}
+                </span>
+              </div>
+              {scopedNames && (
+                <div className="text-[10px] text-text-3/50 mt-1 pl-[22px] truncate">{scopedNames}</div>
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}