Add recent captures to settings panel — transparency view

components/SettingsPanel.tsx

@@ -16,6 +16,7 @@ export default function SettingsPanel() {
   const [dreamTask, setDreamTask] = useState('');
   const [dreaming, setDreaming] = useState(false);
   const [dreamStarted, setDreamStarted] = useState(false);
+  const [captures, setCaptures] = useState<{name: string}[]>([]);
 
   function formatDreamerTime(raw: string): string {
     if (!raw || raw === 'never' || raw === '—') return raw;
@@ -36,6 +37,7 @@ export default function SettingsPanel() {
     if (!settingsOpen) return;
     api.getStatus().then(setStatus).catch(console.error);
     api.getDreamerStatus().then(setDreamerStatus).catch(console.error);
+    fetch('/api/captures').then(r => r.json()).then(d => setCaptures(d.captures || [])).catch(() => {});
     api.getMemory().then(d => setMemory(d.content)).catch(console.error);
   }, [settingsOpen]);
 
@@ -221,6 +223,28 @@ export default function SettingsPanel() {
             </Row>
           </Section>
 
+          {/* Captures */}
+          <Section title="Recent Captures">
+            {captures.length === 0 ? (
+              <p style={{ fontSize: '12px', color: 'var(--text3)', margin: '4px 0' }}>No captures yet</p>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                {captures.slice(0, 8).map((c, i) => (
+                  <div key={i} style={{
+                    display: 'flex', alignItems: 'center', gap: '8px',
+                    padding: '6px 8px', background: 'var(--bg2)',
+                    borderRadius: '6px', border: '1px solid var(--border)',
+                  }}>
+                    <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
+                    <span style={{ fontSize: '11px', color: 'var(--text2)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'var(--font-mono)' }}>
+                      {c.name}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </Section>
+
           {/* Dreamer */}
           <Section title="Dreamer">
             <div className="grid grid-cols-2 gap-2 mb-3">