From cf383205bfad38751303dfeb19b4c2527b364ba8 Mon Sep 17 00:00:00 2001
From: Aaron Nelson <aaron@aaronnelson.studio>
Date: Sun, 26 Apr 2026 18:50:23 -0400
Subject: [PATCH] =?UTF-8?q?Capture=20=E2=80=94=20progress=20bar=20with=20e?=
 =?UTF-8?q?lapsed/remaining=20time,=2010=20minute=20limit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/capture/page.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/capture/page.tsx b/app/capture/page.tsx
index 0de2128..c2c0fd8 100644
--- a/app/capture/page.tsx
+++ b/app/capture/page.tsx
@@ -204,14 +204,28 @@ export default function CapturePage() {
           )}
           {state === 'recording' && (
             <>
-              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 6px' }}>
+              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
                 recording
               </p>
-              {countdown <= 15 && (
-                <p style={{ fontSize: '20px', color: '#a32d2d', letterSpacing: '0.05em', margin: 0 }}>
-                  {countdown}s
-                </p>
-              )}
+              <div style={{ width: '160px', height: '2px', background: 'var(--border)', borderRadius: '1px', overflow: 'hidden', marginBottom: '8px' }}>
+                <div style={{
+                  height: '100%',
+                  width: `${((MAX_SECONDS - countdown) / MAX_SECONDS) * 100}%`,
+                  background: countdown <= 30 ? '#a32d2d' : 'var(--accent)',
+                  borderRadius: '1px',
+                  transition: 'width 1s linear, background 0.5s ease',
+                }} />
+              </div>
+              <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0, fontFamily: 'var(--font-mono)' }}>
+                {(() => {
+                  const elapsed = MAX_SECONDS - countdown;
+                  const em = Math.floor(elapsed / 60);
+                  const es = elapsed % 60;
+                  const rm = Math.floor(countdown / 60);
+                  const rs = countdown % 60;
+                  return `${em}:${es.toString().padStart(2,'0')} / ${rm}:${rs.toString().padStart(2,'0')} left`;
+                })()}
+              </p>
             </>
           )}
           {state === 'transcribing' && (