From 37dbe16c03dc0504e2654eb801a46a647abbabe9 Mon Sep 17 00:00:00 2001
From: Aaron Nelson <aaron@aaronnelson.studio>
Date: Sun, 26 Apr 2026 22:44:11 -0400
Subject: [PATCH] =?UTF-8?q?Add=20recent=20captures=20to=20settings=20panel?=
 =?UTF-8?q?=20=E2=80=94=20transparency=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SettingsPanel.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/SettingsPanel.tsx b/components/SettingsPanel.tsx
index 5f90213..f6e366f 100644
--- a/components/SettingsPanel.tsx
+++ b/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">