total-recall-brain 3.4.0 → 3.6.0

package/frontend/src/pages/GraphPage.tsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+import { listMemory, listResearch, fetchChatThreads } from '../api'
+import type { MemoryNode, ResearchItem } from '../types'
+import type { ChatThread } from '../api'
+import Graph3D from '../components/Graph3D'
+
+export default function GraphPage({ activeBrainId }: { activeBrainId?: string }) {
+  const [memoryNodes, setMemoryNodes] = useState<MemoryNode[]>([])
+  const [researchItems, setResearchItems] = useState<ResearchItem[]>([])
+  const [threads, setThreads] = useState<ChatThread[]>([])
+  const [loading, setLoading] = useState(true)
+  const [selectedGroundingNodes, setSelectedGroundingNodes] = useState<string[]>([])
+
+  useEffect(() => {
+    async function loadData() {
+      setLoading(true)
+      try {
+        const [nodes, researchRes, threadsRes] = await Promise.all([
+          listMemory(activeBrainId),
+          listResearch(activeBrainId).catch(() => ({ items: [] })),
+          fetchChatThreads().catch(() => [])
+        ])
+        setMemoryNodes(nodes)
+        setResearchItems(researchRes.items || [])
+        setThreads(threadsRes)
+      } catch (err) {
+        console.error('Failed to load graph data', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [activeBrainId])
+
+  return (
+    <div className="page" style={{ padding: 0, height: 'calc(100vh - 1px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <div style={{ padding: '16px 24px', background: 'rgba(18, 18, 26, 0.45)', backdropFilter: 'blur(16px)', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
+        <h1 style={{ fontSize: '18px', fontWeight: 700 }}>Sovereign Memory Network</h1>
+        <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px' }}>Interactive 3D constellation layout of your knowledge vault, sessions, and active thoughts.</p>
+      </div>
+
+      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+        {loading ? (
+          <div className="skeleton" style={{ width: '100%', height: '100%' }} />
+        ) : (
+          <Graph3D
+            threads={threads}
+            memoryNodes={memoryNodes}
+            researchItems={researchItems}
+            onOpenThread={() => {}}
+            onGroundMemoryNode={(slug) => {
+              setSelectedGroundingNodes(prev =>
+                prev.includes(slug) ? prev.filter(s => s !== slug) : [...prev, slug]
+              )
+            }}
+            selectedGroundingNodes={selectedGroundingNodes}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/frontend/src/pages/HealthPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
-import { fetchHealth } from '../api'
-import type { HealthData } from '../types'
+import { fetchHealth, checkUpdate, runUpdate } from '../api'
+import type { HealthData, UpdateCheckResult } from '../types'
 
 function formatUptime(seconds: number): string {
   const d = Math.floor(seconds / 86400)
@@ -15,6 +15,12 @@ export default function HealthPage() {
   const [health, setHealth] = useState<HealthData | null>(null)
   const [error, setError] = useState('')
   const [lastPoll, setLastPoll] = useState<Date | null>(null)
+  
+  // Auto-Update States
+  const [updateInfo, setUpdateInfo] = useState<UpdateCheckResult | null>(null)
+  const [isUpdating, setIsUpdating] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
+  const [updateError, setUpdateError] = useState('')
 
   useEffect(() => {
     let active = true
@@ -33,17 +39,171 @@ export default function HealthPage() {
 
     poll()
     const interval = setInterval(poll, 5000)
-    return () => { active = false; clearInterval(interval) }
+
+    // Check for updates
+    const checkVersion = async () => {
+      try {
+        const data = await checkUpdate()
+        if (active) setUpdateInfo(data)
+      } catch (e) {
+        console.error('Failed to check updates', e)
+      }
+    }
+    checkVersion()
+    const updateInterval = setInterval(checkVersion, 3600000)
+
+    return () => { 
+      active = false; 
+      clearInterval(interval); 
+      clearInterval(updateInterval); 
+    }
   }, [])
 
+  const handleStartUpdate = async () => {
+    setShowConfirmModal(false)
+    setIsUpdating(true)
+    setUpdateError('')
+    
+    try {
+      await runUpdate()
+      
+      // Keep polling health to check when it goes down and recovers
+      let serverDown = false
+      const pollInterval = setInterval(async () => {
+        try {
+          const res = await fetchHealth()
+          if (serverDown && res.status === 'healthy') {
+            clearInterval(pollInterval)
+            window.location.reload()
+          }
+        } catch {
+          // Connection failed = server is offline / restarting
+          serverDown = true
+        }
+      }, 2000)
+
+    } catch (e) {
+      setUpdateError((e as Error).message)
+      setIsUpdating(false)
+    }
+  }
+
   return (
-    <div className="page">
-      <div className="page-header">
-        <h1>System Health</h1>
-        <p>Live monitoring of your sovereign brain {lastPoll && <span>· Last poll: {lastPoll.toLocaleTimeString()}</span>}</p>
+    <div className="page" style={{ position: 'relative' }}>
+      {isUpdating && (
+        <div style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'rgba(13, 17, 23, 0.9)',
+          zIndex: 1000,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backdropFilter: 'blur(8px)',
+          animation: 'fadeIn 0.3s ease'
+        }}>
+          <div className="spinner" style={{
+            width: 50,
+            height: 50,
+            border: '4px solid var(--border)',
+            borderTopColor: 'var(--accent)',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+            marginBottom: 20
+          }} />
+          <h2 style={{ color: 'var(--text-primary)', marginBottom: 8 }}>Updating Total Recall...</h2>
+          <p style={{ color: 'var(--text-muted)', fontSize: 14 }}>Applying git changes, installing npm modules, and restarting daemon.</p>
+          <p style={{ color: 'var(--accent)', fontSize: 13, marginTop: 10 }}>Please do not close this window.</p>
+        </div>
+      )}
+
+      {showConfirmModal && (
+        <div style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'rgba(0, 0, 0, 0.7)',
+          zIndex: 900,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backdropFilter: 'blur(4px)',
+          padding: 20
+        }}>
+          <div className="card" style={{
+            maxWidth: 450,
+            width: '100%',
+            backgroundColor: 'var(--bg-surface)',
+            border: '1px solid var(--border)',
+            borderRadius: 12,
+            padding: 24,
+            boxShadow: '0 20px 40px rgba(0, 0, 0, 0.5)'
+          }}>
+            <h3 style={{ marginBottom: 12, color: 'var(--text-primary)' }}>Confirm Core Self-Update</h3>
+            <p style={{ color: 'var(--text-muted)', marginBottom: 20, fontSize: 14, lineHeight: 1.5 }}>
+              This will pull the latest version of Total Recall ({updateInfo?.latestVersion}) from the git repository, reinstall dependencies, rebuild frontend bundles, and reboot the system kernel.
+            </p>
+            <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
+              <button 
+                className="btn btn-secondary" 
+                onClick={() => setShowConfirmModal(false)}
+                style={{ padding: '8px 16px', borderRadius: 8 }}
+              >
+                Cancel
+              </button>
+              <button 
+                className="btn btn-primary" 
+                onClick={handleStartUpdate}
+                style={{ padding: '8px 16px', borderRadius: 8, background: 'var(--accent)' }}
+              >
+                Update Now
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <h1>System Health</h1>
+          <p>Live monitoring of your sovereign brain {lastPoll && <span>· Last poll: {lastPoll.toLocaleTimeString()}</span>}</p>
+        </div>
+        {updateInfo?.updateAvailable && (
+          <div className="badge badge-success" style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '12px 18px',
+            borderRadius: 12,
+            background: 'rgba(63, 185, 80, 0.1)',
+            border: '1px solid rgba(63, 185, 80, 0.3)',
+            animation: 'pulse 2s infinite'
+          }}>
+            <span style={{ fontSize: 14, color: 'var(--text-primary)', fontWeight: 600 }}>
+              New version available: {updateInfo.latestVersion}
+            </span>
+            <button 
+              className="btn btn-primary" 
+              onClick={() => setShowConfirmModal(true)}
+              style={{
+                fontSize: 12,
+                padding: '6px 12px',
+                borderRadius: 6,
+                backgroundColor: '#3fb950',
+                color: '#fff',
+                border: 'none',
+                cursor: 'pointer',
+                fontWeight: 600
+              }}
+            >
+              Update Now
+            </button>
+          </div>
+        )}
       </div>
 
       {error && <div className="badge badge-error" style={{ marginBottom: 16 }}>⚠️ {error}</div>}
+      {updateError && <div className="badge badge-error" style={{ marginBottom: 16 }}>⚠️ Update failed: {updateError}</div>}
 
       {health ? (
         <>
@@ -55,7 +215,9 @@ export default function HealthPage() {
               <div className="label">Status</div>
             </div>
             <div className="stat-card">
-              <div className="value" style={{ color: 'var(--accent)' }}>{health.version}</div>
+              <div className="value" style={{ color: 'var(--accent)' }}>
+                {health.version} {updateInfo && !updateInfo.updateAvailable && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>(Latest)</span>}
+              </div>
               <div className="label">Version</div>
             </div>
             <div className="stat-card">
@@ -76,6 +238,10 @@ export default function HealthPage() {
                 <tr><th>Version</th><td>{health.version}</td></tr>
                 <tr><th>Uptime</th><td>{formatUptime(health.uptime_seconds)}</td></tr>
                 <tr><th>Timestamp</th><td>{health.timestamp}</td></tr>
+                <tr><th>Daemon Status</th><td>{health.daemon || 'unknown'}</td></tr>
+                {health.cli_agents && (
+                  <tr><th>CLI Agents</th><td>{health.cli_agents.join(', ')}</td></tr>
+                )}
                 <tr><th>Polling</th><td>Every 5 seconds</td></tr>
               </tbody>
             </table>
@@ -86,6 +252,17 @@ export default function HealthPage() {
           {[1, 2, 3, 4].map(i => <div key={i} className="skeleton" style={{ height: 100 }} />)}
         </div>
       ) : null}
+
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      `}</style>
     </div>
   )
 }

package/frontend/src/pages/HelpPage.tsx

@@ -0,0 +1,141 @@
+import { useState, useEffect } from 'react'
+import { fetchHelpTopics, fetchHelpContent } from '../api'
+import type { HelpTopic } from '../api'
+
+function renderMarkdown(md: string) {
+  if (!md) return ''
+  let html = md
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+
+  // Headings
+  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>')
+  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>')
+  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>')
+
+  // Bold & Italic
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>')
+
+  // Code blocks
+  html = html.replace(
+    /```([\s\S]*?)```/g,
+    '<pre style="background:rgba(0,0,0,0.3);padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);font-family:monospace;overflow-x:auto;margin:12px 0;"><code>$1</code></pre>'
+  )
+  html = html.replace(
+    /`(.*?)`/g,
+    '<code style="background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;font-family:monospace;">$1</code>'
+  )
+
+  // Blockquotes
+  html = html.replace(
+    /^> (.*$)/gim,
+    '<blockquote style="border-left:4px solid var(--purple-primary);padding-left:14px;color:var(--text-secondary);margin:16px 0;font-style:italic;">$1</blockquote>'
+  )
+
+  // Lists
+  html = html.replace(/^- (.*$)/gim, '<li style="margin-left:20px;list-style-type:disc;">$1</li>')
+
+  // Linebreaks
+  html = html.replace(/\n/g, '<br />')
+
+  return <div dangerouslySetInnerHTML={{ __html: html }} className="markdown-preview-block" />
+}
+
+export default function HelpPage() {
+  const [topics, setTopics] = useState<HelpTopic[]>([])
+  const [selectedTopic, setSelectedTopic] = useState<string | null>(null)
+  const [content, setContent] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+
+  useEffect(() => {
+    async function loadTopics() {
+      try {
+        const data = await fetchHelpTopics()
+        setTopics(data.topics)
+        if (data.topics.length > 0) {
+          setSelectedTopic(data.topics[0].id)
+        }
+      } catch (err: unknown) {
+        setError((err as Error).message || 'Failed to load help topics')
+      }
+    }
+    loadTopics()
+  }, [])
+
+  useEffect(() => {
+    if (!selectedTopic) return
+    async function loadContent() {
+      setLoading(true)
+      try {
+        const data = await fetchHelpContent(selectedTopic!)
+        setContent(data.content)
+      } catch (err: unknown) {
+        setError((err as Error).message || 'Failed to load help details')
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadContent()
+  }, [selectedTopic])
+
+  return (
+    <div className="page" style={{ padding: '24px', maxWidth: '1100px', margin: '0 auto' }}>
+      <div className="page-header" style={{ marginBottom: '24px' }}>
+        <h1>Sovereign Help System</h1>
+        <p>Offline interactive documentation, CLI command references, and SSSS VFS specifications.</p>
+      </div>
+
+      {error && <div className="badge badge-error" style={{ marginBottom: '16px' }}>⚠️ {error}</div>}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: '30px', minHeight: '500px' }}>
+        {/* Sidebar */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          {topics.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setSelectedTopic(t.id)}
+              style={{
+                textAlign: 'left',
+                padding: '12px 16px',
+                borderRadius: '8px',
+                background: selectedTopic === t.id ? 'var(--purple-primary)' : 'rgba(255, 255, 255, 0.03)',
+                color: '#fff',
+                border: selectedTopic === t.id ? '1px solid var(--purple-border)' : '1px solid transparent',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+              }}
+            >
+              <div style={{ fontWeight: 'bold', fontSize: '14px' }}>{t.title}</div>
+              <div style={{ fontSize: '11px', color: selectedTopic === t.id ? 'rgba(255, 255, 255, 0.8)' : 'var(--text-secondary)', marginTop: '4px' }}>
+                {t.description}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* Content Pane */}
+        <div
+          style={{
+            background: 'var(--surface-bg)',
+            border: '1px solid var(--border)',
+            borderRadius: '12px',
+            padding: '30px',
+            overflowY: 'auto',
+            maxHeight: '75vh',
+          }}
+        >
+          {loading ? (
+            <div className="skeleton" style={{ height: '400px' }} />
+          ) : (
+            <div className="markdown-body" style={{ color: 'var(--text-primary)', lineHeight: '1.7', fontSize: '14px' }}>
+              {renderMarkdown(content)}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/frontend/src/pages/SettingsPage.tsx

@@ -35,6 +35,7 @@ export default function SettingsPage() {
       if (!data.budget.budget) data.budget.budget = { daily_cap_usd: 5.0, weekly_cap_usd: 25.0, enabled: true };
       if (!data.brain) data.brain = {};
       if (!data.brain.preferred_agent) data.brain.preferred_agent = 'auto';
+      if (!data.secrets) data.secrets = {};
       
       setConfigData(data);
     } catch (err: unknown) {
@@ -152,6 +153,17 @@ export default function SettingsPage() {
     });
   };
 
+  const updateSecretsProp = (prop: string, value: string) => {
+    if (!configData) return;
+    setConfigData({
+      ...configData,
+      secrets: {
+        ...configData.secrets,
+        [prop]: value
+      }
+    });
+  };
+
   return (
     <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
@@ -209,7 +221,7 @@ export default function SettingsPage() {
         </div>
       ) : viewMode === 'visual' && configData ? (
         /* ==================== VISUAL CONTROL PANEL UI ==================== */
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24, flex: 1, minHeight: 0, overflowY: 'auto', paddingBottom: 24 }}>
+        <form onSubmit={(e) => { e.preventDefault(); handleSaveVisual(); }} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24, flex: 1, minHeight: 0, overflowY: 'auto', paddingBottom: 24 }}>
           
           {/* Card 1: AI Reasoning & Autonomy */}
           <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)' }}>
@@ -537,7 +549,190 @@ export default function SettingsPage() {
             </div>
           </div>
 
-        </div>
+          {/* Card 5: API Keys & Integrations */}
+          <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+              <span style={{ fontSize: 20 }}>🔑</span>
+              <div>
+                <h3 style={{ fontSize: 15, fontWeight: 600 }}>API Keys & Integrations</h3>
+                <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Manage access keys and tokens for AI models and search providers</p>
+              </div>
+            </div>
+
+            {/* Google Gemini API Key */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label htmlFor="google_api_key" style={{ fontSize: 13, fontWeight: 500 }}>Google Gemini API Key</label>
+              <input
+                id="google_api_key"
+                type="password"
+                placeholder="AIzaSy..."
+                value={configData.secrets?.google_api_key || ''}
+                onChange={(e) => updateSecretsProp('google_api_key', e.target.value)}
+                style={{
+                  background: 'var(--bg-tertiary)',
+                  color: 'var(--text-primary)',
+                  border: '1px solid var(--border)',
+                  padding: '8px 12px',
+                  borderRadius: 6,
+                  outline: 'none',
+                  fontSize: 13
+                }}
+              />
+            </div>
+
+            {/* Anthropic API Key */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label htmlFor="anthropic_api_key" style={{ fontSize: 13, fontWeight: 500 }}>Anthropic API Key (Claude Code)</label>
+              <input
+                id="anthropic_api_key"
+                type="password"
+                placeholder="sk-ant-..."
+                value={configData.secrets?.anthropic_api_key || ''}
+                onChange={(e) => updateSecretsProp('anthropic_api_key', e.target.value)}
+                style={{
+                  background: 'var(--bg-tertiary)',
+                  color: 'var(--text-primary)',
+                  border: '1px solid var(--border)',
+                  padding: '8px 12px',
+                  borderRadius: 6,
+                  outline: 'none',
+                  fontSize: 13
+                }}
+              />
+              <span style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>Configuring this allows Claude Code CLI to run without prompting for OAuth login.</span>
+            </div>
+
+            {/* OpenAI API Key */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label htmlFor="openai_api_key" style={{ fontSize: 13, fontWeight: 500 }}>OpenAI API Key (Codex)</label>
+              <input
+                id="openai_api_key"
+                type="password"
+                placeholder="sk-proj-..."
+                value={configData.secrets?.openai_api_key || ''}
+                onChange={(e) => updateSecretsProp('openai_api_key', e.target.value)}
+                style={{
+                  background: 'var(--bg-tertiary)',
+                  color: 'var(--text-primary)',
+                  border: '1px solid var(--border)',
+                  padding: '8px 12px',
+                  borderRadius: 6,
+                  outline: 'none',
+                  fontSize: 13
+                }}
+              />
+            </div>
+
+            {/* Tavily API Key */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label htmlFor="tavily_api_key" style={{ fontSize: 13, fontWeight: 500 }}>Tavily Search API Key</label>
+              <input
+                id="tavily_api_key"
+                type="password"
+                placeholder="tvly-..."
+                value={configData.secrets?.tavily_api_key || ''}
+                onChange={(e) => updateSecretsProp('tavily_api_key', e.target.value)}
+                style={{
+                  background: 'var(--bg-tertiary)',
+                  color: 'var(--text-primary)',
+                  border: '1px solid var(--border)',
+                  padding: '8px 12px',
+                  borderRadius: 6,
+                  outline: 'none',
+                  fontSize: 13
+                }}
+              />
+            </div>
+
+            {/* Other Search Keys (Brave, Exa, Serper) */}
+            <details style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+              <summary style={{ cursor: 'pointer', fontWeight: 500, outline: 'none', padding: '4px 0' }}>More Provider Keys (Brave, Exa, Serper, GitHub)</summary>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 12, paddingLeft: 8, borderLeft: '2px solid var(--border)' }}>
+                {/* Brave Search Key */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label htmlFor="brave_api_key" style={{ fontSize: 12, fontWeight: 500 }}>Brave Search API Key</label>
+                  <input
+                    id="brave_api_key"
+                    type="password"
+                    value={configData.secrets?.brave_api_key || ''}
+                    onChange={(e) => updateSecretsProp('brave_api_key', e.target.value)}
+                    style={{
+                      background: 'var(--bg-tertiary)',
+                      color: 'var(--text-primary)',
+                      border: '1px solid var(--border)',
+                      padding: '8px 12px',
+                      borderRadius: 6,
+                      outline: 'none',
+                      fontSize: 13
+                    }}
+                  />
+                </div>
+
+                {/* Exa Search Key */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label htmlFor="exa_api_key" style={{ fontSize: 12, fontWeight: 500 }}>Exa API Key</label>
+                  <input
+                    id="exa_api_key"
+                    type="password"
+                    value={configData.secrets?.exa_api_key || ''}
+                    onChange={(e) => updateSecretsProp('exa_api_key', e.target.value)}
+                    style={{
+                      background: 'var(--bg-tertiary)',
+                      color: 'var(--text-primary)',
+                      border: '1px solid var(--border)',
+                      padding: '8px 12px',
+                      borderRadius: 6,
+                      outline: 'none',
+                      fontSize: 13
+                    }}
+                  />
+                </div>
+
+                {/* Serper API Key */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label htmlFor="serper_api_key" style={{ fontSize: 12, fontWeight: 500 }}>Serper (Google Search API) Key</label>
+                  <input
+                    id="serper_api_key"
+                    type="password"
+                    value={configData.secrets?.serper_api_key || ''}
+                    onChange={(e) => updateSecretsProp('serper_api_key', e.target.value)}
+                    style={{
+                      background: 'var(--bg-tertiary)',
+                      color: 'var(--text-primary)',
+                      border: '1px solid var(--border)',
+                      padding: '8px 12px',
+                      borderRadius: 6,
+                      outline: 'none',
+                      fontSize: 13
+                    }}
+                  />
+                </div>
+
+                {/* GitHub Token */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label htmlFor="github_token" style={{ fontSize: 12, fontWeight: 500 }}>GitHub Personal Access Token</label>
+                  <input
+                    id="github_token"
+                    type="password"
+                    placeholder="ghp_..."
+                    value={configData.secrets?.github_token || ''}
+                    onChange={(e) => updateSecretsProp('github_token', e.target.value)}
+                    style={{
+                      background: 'var(--bg-tertiary)',
+                      color: 'var(--text-primary)',
+                      border: '1px solid var(--border)',
+                      padding: '8px 12px',
+                      borderRadius: 6,
+                      outline: 'none',
+                      fontSize: 13
+                    }}
+                  />
+                </div>
+              </div>
+            </details>
+          </div>
+
+        </form>
       ) : (
         /* ==================== RAW YAML EDITOR UI ==================== */
         <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>