bingocode 1.0.1 → 1.0.3

package/desktop/src/pages/AdapterSettings.tsx

@@ -0,0 +1,375 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useAdapterStore } from '../stores/adapterStore'
+import { useTranslation } from '../i18n'
+import { Input } from '../components/shared/Input'
+import { Button } from '../components/shared/Button'
+import { DirectoryPicker } from '../components/shared/DirectoryPicker'
+
+type ImTab = 'feishu' | 'telegram'
+
+export function AdapterSettings() {
+  const t = useTranslation()
+  const { config, isLoading, fetchConfig, updateConfig, generatePairingCode, removePairedUser } = useAdapterStore()
+
+  // Active IM tab —— Feishu 默认展示，在前
+  const [activeIm, setActiveIm] = useState<ImTab>('feishu')
+
+  // Server —— serverUrl 不再暴露在 UI 里（见下方 Server URL 注释），
+  // 桌面端用 Tauri env var 注入动态端口。
+  const [defaultProjectDir, setDefaultProjectDir] = useState('')
+
+  // Telegram
+  const [tgBotToken, setTgBotToken] = useState('')
+  const [tgAllowedUsers, setTgAllowedUsers] = useState('')
+
+  // Feishu
+  const [fsAppId, setFsAppId] = useState('')
+  const [fsAppSecret, setFsAppSecret] = useState('')
+  const [fsEncryptKey, setFsEncryptKey] = useState('')
+  const [fsVerificationToken, setFsVerificationToken] = useState('')
+  const [fsAllowedUsers, setFsAllowedUsers] = useState('')
+  const [fsStreamingCard, setFsStreamingCard] = useState(false)
+
+  const [isSaving, setIsSaving] = useState(false)
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saved' | 'error'>('idle')
+  const [saveError, setSaveError] = useState('')
+
+  // Pairing
+  const [pairingCode, setPairingCode] = useState<string | null>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  useEffect(() => {
+    fetchConfig()
+  }, [])
+
+  // Sync form state when config is loaded
+  useEffect(() => {
+    setDefaultProjectDir(config.defaultProjectDir ?? '')
+    setTgBotToken(config.telegram?.botToken ?? '')
+    setTgAllowedUsers(config.telegram?.allowedUsers?.join(', ') ?? '')
+    setFsAppId(config.feishu?.appId ?? '')
+    setFsAppSecret(config.feishu?.appSecret ?? '')
+    setFsEncryptKey(config.feishu?.encryptKey ?? '')
+    setFsVerificationToken(config.feishu?.verificationToken ?? '')
+    setFsAllowedUsers(config.feishu?.allowedUsers?.join(', ') ?? '')
+    setFsStreamingCard(config.feishu?.streamingCard ?? false)
+  }, [config])
+
+  async function handleSave() {
+    setIsSaving(true)
+    setSaveStatus('idle')
+    setSaveError('')
+    try {
+      const patch: Record<string, unknown> = {}
+
+      if (defaultProjectDir) patch.defaultProjectDir = defaultProjectDir
+
+      const tgUsers = tgAllowedUsers
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+        .map(Number)
+        .filter((n) => !isNaN(n))
+
+      patch.telegram = {
+        botToken: tgBotToken || undefined,
+        allowedUsers: tgUsers.length ? tgUsers : [],
+      }
+
+      const fsUsers = fsAllowedUsers
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+
+      patch.feishu = {
+        appId: fsAppId || undefined,
+        appSecret: fsAppSecret || undefined,
+        encryptKey: fsEncryptKey || undefined,
+        verificationToken: fsVerificationToken || undefined,
+        allowedUsers: fsUsers.length ? fsUsers : [],
+        streamingCard: fsStreamingCard,
+      }
+
+      await updateConfig(patch)
+      setSaveStatus('saved')
+      setTimeout(() => setSaveStatus('idle'), 2000)
+    } catch (err) {
+      setSaveStatus('error')
+      setSaveError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleGenerateCode = useCallback(async () => {
+    setIsGenerating(true)
+    try {
+      const code = await generatePairingCode()
+      setPairingCode(code)
+    } catch (err) {
+      console.error('Failed to generate pairing code:', err)
+    } finally {
+      setIsGenerating(false)
+    }
+  }, [generatePairingCode])
+
+  const handleUnbind = useCallback(async (platform: 'telegram' | 'feishu', userId: string | number) => {
+    if (!confirm(t('settings.adapters.unbindConfirm'))) return
+    await removePairedUser(platform, userId)
+    await fetchConfig()
+  }, [removePairedUser, fetchConfig, t])
+
+  // Collect all paired users across platforms
+  const allPairedUsers = [
+    ...(config.telegram?.pairedUsers ?? []).map((u) => ({ ...u, platform: 'telegram' as const })),
+    ...(config.feishu?.pairedUsers ?? []).map((u) => ({ ...u, platform: 'feishu' as const })),
+  ]
+
+  // Check pairing expiry
+  const pairingExpiry = config.pairing?.expiresAt
+  const isPairingActive = pairingExpiry ? Date.now() < pairingExpiry : false
+  const minutesLeft = pairingExpiry ? Math.max(0, Math.ceil((pairingExpiry - Date.now()) / 60000)) : 0
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-[var(--color-text-tertiary)]">
+        <span className="material-symbols-outlined animate-spin text-[20px] mr-2">progress_activity</span>
+        Loading...
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-2xl space-y-8">
+      {/* Description */}
+      <div>
+        <p className="text-sm text-[var(--color-text-secondary)]">{t('settings.adapters.description')}</p>
+      </div>
+
+      {/* Pairing */}
+      <section className="rounded-xl border border-[var(--color-border)] overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-3 bg-[var(--color-surface-hover)] border-b border-[var(--color-border)]">
+          <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">link</span>
+          <span className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.adapters.pairing')}</span>
+        </div>
+        <div className="p-4 space-y-4">
+          <p className="text-sm text-[var(--color-text-secondary)]">{t('settings.adapters.pairingDesc')}</p>
+
+          {/* Generate code */}
+          <div className="flex items-center gap-3">
+            <Button onClick={handleGenerateCode} loading={isGenerating}>
+              {pairingCode || isPairingActive ? t('settings.adapters.regenerateCode') : t('settings.adapters.generateCode')}
+            </Button>
+            {pairingCode && (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-2xl font-bold tracking-[0.3em] text-[var(--color-brand)]">
+                  {pairingCode}
+                </span>
+                <span className="text-xs text-[var(--color-text-tertiary)]">
+                  {t('settings.adapters.codeExpiresIn')} 60 {t('settings.adapters.minutes')}
+                </span>
+              </div>
+            )}
+            {!pairingCode && isPairingActive && (
+              <span className="text-xs text-[var(--color-text-tertiary)]">
+                {t('settings.adapters.codeExpiresIn')} {minutesLeft} {t('settings.adapters.minutes')}
+              </span>
+            )}
+          </div>
+          {pairingCode && (
+            <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.pairingCodeHint')}</p>
+          )}
+
+          {/* Paired users list */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--color-text-primary)] mb-2">{t('settings.adapters.pairedUsers')}</h4>
+            {allPairedUsers.length === 0 ? (
+              <p className="text-sm text-[var(--color-text-tertiary)]">{t('settings.adapters.noPairedUsers')}</p>
+            ) : (
+              <div className="space-y-2">
+                {allPairedUsers.map((user) => (
+                  <div
+                    key={`${user.platform}-${user.userId}`}
+                    className="flex items-center justify-between px-3 py-2 rounded-lg bg-[var(--color-surface-hover)]"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-surface)] text-[var(--color-text-secondary)]">
+                        {t(`settings.adapters.platform.${user.platform}`)}
+                      </span>
+                      <span className="text-sm text-[var(--color-text-primary)]">{user.displayName}</span>
+                      <span className="text-xs text-[var(--color-text-tertiary)]">
+                        {new Date(user.pairedAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                    <button
+                      onClick={() => handleUnbind(user.platform, user.userId)}
+                      className="text-xs text-[var(--color-error)] hover:underline cursor-pointer"
+                    >
+                      {t('settings.adapters.unbind')}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Server URL —— 之前是个手填字段，但桌面端 Tauri 启动 adapter sidecar
+          时已经把 server 的动态端口通过 ADAPTER_SERVER_URL env var 注进去了，
+          loadConfig() 里 env 优先级高于这里的 file value，所以这个字段在桌面
+          运行时完全不会被读到。用户也根本不知道该填什么端口（每次启动随机）。
+          Standalone 模式（直接 bun run adapters/...）保留 file 字段兜底就够了。 */}
+
+      {/* Default Project */}
+      <div className="flex flex-col gap-1">
+        <label className="text-sm font-medium text-[var(--color-text-primary)]">
+          {t('settings.adapters.defaultProject')}
+        </label>
+        <DirectoryPicker value={defaultProjectDir} onChange={setDefaultProjectDir} />
+        <p className="text-xs text-[var(--color-text-tertiary)]">
+          {t('settings.adapters.defaultProjectHint')}
+        </p>
+      </div>
+
+      {/* IM Adapter Tabs —— Feishu 默认在前，Telegram 在后 */}
+      <section className="rounded-xl border border-[var(--color-border)] overflow-hidden">
+        <div role="tablist" aria-label="IM adapter" className="flex items-stretch border-b border-[var(--color-border)] bg-[var(--color-surface-hover)]">
+          <ImTabButton
+            label={t('settings.adapters.feishu')}
+            active={activeIm === 'feishu'}
+            onClick={() => setActiveIm('feishu')}
+          />
+          <ImTabButton
+            label={t('settings.adapters.telegram')}
+            active={activeIm === 'telegram'}
+            onClick={() => setActiveIm('telegram')}
+          />
+        </div>
+
+        {activeIm === 'feishu' && (
+          <div className="p-4 space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label={t('settings.adapters.appId')}
+                value={fsAppId}
+                onChange={(e) => setFsAppId(e.target.value)}
+                placeholder={t('settings.adapters.appIdPlaceholder')}
+              />
+              <Input
+                label={t('settings.adapters.appSecret')}
+                type="password"
+                value={fsAppSecret}
+                onChange={(e) => setFsAppSecret(e.target.value)}
+                placeholder={t('settings.adapters.appSecretPlaceholder')}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label={t('settings.adapters.encryptKey')}
+                type="password"
+                value={fsEncryptKey}
+                onChange={(e) => setFsEncryptKey(e.target.value)}
+                placeholder={t('settings.adapters.encryptKeyPlaceholder')}
+              />
+              <Input
+                label={t('settings.adapters.verificationToken')}
+                type="password"
+                value={fsVerificationToken}
+                onChange={(e) => setFsVerificationToken(e.target.value)}
+                placeholder={t('settings.adapters.verificationTokenPlaceholder')}
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Input
+                label={t('settings.adapters.allowedUsers')}
+                value={fsAllowedUsers}
+                onChange={(e) => setFsAllowedUsers(e.target.value)}
+                placeholder={t('settings.adapters.fsAllowedUsersPlaceholder')}
+              />
+              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
+            </div>
+            <label className="flex items-center gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={fsStreamingCard}
+                onChange={(e) => setFsStreamingCard(e.target.checked)}
+                className="w-4 h-4 rounded border-[var(--color-border)] accent-[var(--color-brand)]"
+              />
+              <div>
+                <span className="text-sm text-[var(--color-text-primary)]">{t('settings.adapters.streamingCard')}</span>
+                <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.streamingCardDesc')}</p>
+              </div>
+            </label>
+          </div>
+        )}
+
+        {activeIm === 'telegram' && (
+          <div className="p-4 space-y-4">
+            <Input
+              label={t('settings.adapters.botToken')}
+              type="password"
+              value={tgBotToken}
+              onChange={(e) => setTgBotToken(e.target.value)}
+              placeholder={t('settings.adapters.botTokenPlaceholder')}
+            />
+            <div className="flex flex-col gap-1">
+              <Input
+                label={t('settings.adapters.allowedUsers')}
+                value={tgAllowedUsers}
+                onChange={(e) => setTgAllowedUsers(e.target.value)}
+                placeholder={t('settings.adapters.tgAllowedUsersPlaceholder')}
+              />
+              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
+            </div>
+          </div>
+        )}
+      </section>
+
+      {/* Save */}
+      <div className="flex items-center gap-3">
+        <Button onClick={handleSave} loading={isSaving}>
+          {saveStatus === 'saved' ? t('settings.adapters.saved') : t('settings.adapters.save')}
+        </Button>
+        {saveStatus === 'saved' && (
+          <span className="text-sm text-[var(--color-success)]">
+            <span className="material-symbols-outlined text-[16px] align-middle mr-1">check_circle</span>
+            {t('settings.adapters.saved')}
+          </span>
+        )}
+        {saveStatus === 'error' && (
+          <span className="text-sm text-[var(--color-error)]">
+            <span className="material-symbols-outlined text-[16px] align-middle mr-1">error</span>
+            {saveError}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ImTabButton({
+  label,
+  active,
+  onClick,
+}: {
+  label: string
+  active: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={`relative px-4 py-2.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-inset ${
+        active
+          ? 'text-[var(--color-text-primary)] font-semibold after:absolute after:left-3 after:right-3 after:bottom-0 after:h-[2px] after:bg-[var(--color-brand)]'
+          : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+      }`}
+    >
+      {label}
+    </button>
+  )
+}

package/desktop/src/pages/AgentTeams.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import { mockTeam, mockTeamMessages } from '../mocks/data'
+
+// ─── Inline keyframes for pulse-subtle animation ─────────────────
+const pulseSubtleStyle = `
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; transform: scale(0.98); }
+}
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+`
+
+export function AgentTeams() {
+  const [inputValue, setInputValue] = useState('')
+
+  return (
+    <>
+      <style>{pulseSubtleStyle}</style>
+
+      <div className="flex-1 flex flex-col relative overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-body)' }}>
+        {/* Code Content Area */}
+        <div className="flex-1 overflow-y-auto p-6 md:p-10 max-w-5xl mx-auto w-full">
+          <div className="space-y-8">
+            {/* ─── Message Thread ─── */}
+            <div className="space-y-6">
+              {/* USER message */}
+              <div className="flex gap-4 group">
+                <div className="w-8 h-8 rounded-full bg-[var(--color-primary-fixed)] flex-shrink-0 flex items-center justify-center text-[var(--color-on-primary)] font-bold text-xs">
+                  U
+                </div>
+                <div className="space-y-2">
+                  <p className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-widest">
+                    User
+                  </p>
+                  <p className="text-[var(--color-text-primary)] leading-relaxed">
+                    {mockTeamMessages.userMessage}
+                  </p>
+                </div>
+              </div>
+
+              {/* CLAUDE COMPANION response */}
+              <div className="flex gap-4 group">
+                <div className="w-8 h-8 rounded-full bg-[var(--color-tertiary-container)] flex-shrink-0 flex items-center justify-center text-[var(--color-tertiary)]">
+                  <span
+                    className="material-symbols-outlined text-sm"
+                    style={{ fontVariationSettings: "'FILL' 1" }}
+                  >
+                    smart_toy
+                  </span>
+                </div>
+                <div className="space-y-4 flex-1">
+                  <p className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-widest">
+                    Claude Companion
+                  </p>
+                  <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-5 shadow-[var(--shadow-dropdown)]">
+                    <p className="mb-4 text-[var(--color-text-primary)]">
+                      {mockTeamMessages.assistantMessage}
+                    </p>
+                    <div className="rounded-lg bg-[var(--color-surface-container-high)] p-4 font-[var(--font-mono)] text-[13px] text-[var(--color-text-secondary)] overflow-x-auto">
+                      <span className="text-[var(--color-brand)]">info:</span> spawning child_processes for parallel development
+                      <br />
+                      <span className="text-[var(--color-secondary)]">active:</span> session-dev cluster initiated
+                      <br />
+                      <span className="text-[var(--color-tertiary)]">ready:</span> 4 agents assigned
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* ─── TEAM STRIP ─── */}
+            <div className="relative py-8">
+              <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-[var(--color-border-separator)]" />
+
+              <div className="relative glass-panel p-4 rounded-2xl flex flex-col md:flex-row md:items-center gap-4 overflow-hidden">
+                {/* Team label */}
+                <div className="flex items-center gap-3 pr-4 md:border-r border-[var(--color-border-separator)]">
+                  <div className="p-2 bg-[var(--color-primary-fixed)]/20 rounded-lg">
+                    <span className="material-symbols-outlined text-[var(--color-brand)] text-xl">
+                      groups
+                    </span>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-bold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+                      Team: {mockTeam.name}
+                    </h3>
+                    <p className="text-[11px] font-medium text-[var(--color-text-tertiary)] uppercase tracking-tighter">
+                      {mockTeam.memberCount} members
+                    </p>
+                  </div>
+                </div>
+
+                {/* Agent Chips */}
+                <div className="flex flex-wrap gap-2 items-center flex-1">
+                  {mockTeam.members.map((member) => {
+                    if (member.status === 'completed') {
+                      return (
+                        <div
+                          key={member.id}
+                          className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-surface-container-high)] rounded-full border border-[var(--color-success)]/20 group hover:border-[var(--color-success)]/50 transition-all cursor-pointer"
+                        >
+                          <div className="w-2 h-2 rounded-full bg-[var(--color-success)] shadow-[0_0_8px_rgba(126,219,139,0.4)]" />
+                          <span className="text-xs font-semibold text-[var(--color-text-primary)]">
+                            {member.role}
+                          </span>
+                          <span
+                            className="material-symbols-outlined text-[14px] text-[var(--color-success)]"
+                            style={{ fontVariationSettings: "'FILL' 1" }}
+                          >
+                            check_circle
+                          </span>
+                        </div>
+                      )
+                    }
+
+                    if (member.status === 'running') {
+                      return (
+                        <div
+                          key={member.id}
+                          className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-surface-container-high)] rounded-full border border-[var(--color-brand)]/20 animate-pulse-subtle group hover:border-[var(--color-brand)]/50 transition-all cursor-pointer"
+                        >
+                          <div className="w-2 h-2 rounded-full bg-[var(--color-warning)] shadow-[0_0_8px_rgba(247,196,108,0.4)]" />
+                          <span className="text-xs font-semibold text-[var(--color-text-primary)]">
+                            {member.role}
+                          </span>
+                          <span
+                            className="material-symbols-outlined text-[14px] text-[var(--color-warning)]"
+                            style={{ fontVariationSettings: "'FILL' 1" }}
+                          >
+                            sync
+                          </span>
+                        </div>
+                      )
+                    }
+
+                    return (
+                      <div
+                        key={member.id}
+                        className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-surface-container-low)] rounded-full border border-[var(--color-border)] grayscale group hover:grayscale-0 hover:border-[var(--color-secondary)]/50 transition-all cursor-pointer"
+                      >
+                        <div className="w-2 h-2 rounded-full bg-[var(--color-text-tertiary)] shadow-[0_0_8px_rgba(135,115,109,0.2)]" />
+                        <span className="text-xs font-semibold text-[var(--color-text-tertiary)] group-hover:text-[var(--color-text-primary)]">
+                          {member.role}
+                        </span>
+                        <span className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)]">
+                          {member.role === 'Tester' ? 'schedule' : 'pause_circle'}
+                        </span>
+                      </div>
+                    )
+                  })}
+                </div>
+
+                {/* Expand button */}
+                <button className="ml-auto p-2 hover:bg-[var(--color-surface-hover)] rounded-full transition-colors text-[var(--color-text-tertiary)]">
+                  <span className="material-symbols-outlined text-sm">expand_more</span>
+                </button>
+              </div>
+            </div>
+
+            {/* ─── Chat Composer ─── */}
+            <div className="max-w-3xl mx-auto w-full mt-auto">
+              <div className="glass-panel relative rounded-xl p-1.5 flex items-center gap-2 transition-all">
+                <div className="p-2 text-[var(--color-text-secondary)]">
+                  <span className="material-symbols-outlined">attach_file</span>
+                </div>
+                <input
+                  className="flex-1 bg-transparent border-none focus:ring-0 focus:outline-none text-sm text-[var(--color-text-primary)] py-2"
+                  placeholder="Type a command or ask Claude..."
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                />
+                <button className="bg-[image:var(--gradient-btn-primary)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] w-9 h-9 rounded-lg flex items-center justify-center transition-all hover:brightness-105 active:scale-95">
+                  <span
+                    className="material-symbols-outlined text-lg"
+                    style={{ fontVariationSettings: "'FILL' 1" }}
+                  >
+                    send
+                  </span>
+                </button>
+              </div>
+              <div className="mt-3 flex justify-center gap-4">
+                <div className="flex items-center gap-1.5 text-[10px] text-[var(--color-text-tertiary)] font-semibold uppercase tracking-widest">
+                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-success)]" />
+                  Auto-run enabled
+                </div>
+                <div className="flex items-center gap-1.5 text-[10px] text-[var(--color-text-tertiary)] font-semibold uppercase tracking-widest">
+                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-secondary)]" />
+                  Local LLM
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}