Upload folder using huggingface_hub

Dockerfile

@@ -13,7 +13,7 @@ COPY app.py ./
 COPY src/ ./src/
 COPY frontend/ ./frontend/
 
-RUN mkdir -p /app/data/receipts
+RUN mkdir -p /app/data/receipts /app/data/artifacts /app/data/audio
 
 ENV PORT=7860
 ENV PROVIDER=groq

app.py

@@ -11,9 +11,10 @@ import json
 import hashlib
 import subprocess
 import tempfile
+import base64
 from datetime import datetime, timezone
 
-from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, UploadFile, File
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
 from pathlib import Path
@@ -29,6 +30,11 @@ from src.code_receipts import save_receipt, list_receipts, get_receipt
 
 APP_ROOT = Path(__file__).resolve().parent
 FRONTEND_INDEX = APP_ROOT / "frontend" / "index.html"
+DATA_DIR = APP_ROOT / "data"
+ARTIFACT_DIR = DATA_DIR / "artifacts"
+AUDIO_DIR = DATA_DIR / "audio"
+ARTIFACT_DIR.mkdir(parents=True, exist_ok=True)
+AUDIO_DIR.mkdir(parents=True, exist_ok=True)
 
 app = FastAPI(
     title="CSC Engine — Continuity Sensory Code Engine",
@@ -53,6 +59,35 @@ def index():
     return FileResponse(str(FRONTEND_INDEX))
 
 
+@app.get("/diary")
+def diary():
+    """Lab diary page — notebook-style view of all artifacts."""
+    return FileResponse(str(APP_ROOT / "frontend" / "diary.html"))
+
+
+def save_artifact_disk(patch_hash: str, data: dict):
+    """Persist artifact to disk."""
+    path = ARTIFACT_DIR / f"{patch_hash}.json"
+    path.write_text(json.dumps(data, indent=2, default=str))
+
+
+def load_artifact_disk(patch_hash: str) -> dict:
+    """Load artifact from disk."""
+    path = ARTIFACT_DIR / f"{patch_hash}.json"
+    if not path.exists():
+        return {}
+    return json.loads(path.read_text())
+
+
+def list_artifacts_disk(limit: int = 50) -> list:
+    """List recent artifacts from disk."""
+    files = sorted(ARTIFACT_DIR.glob("*.json"), key=lambda f: f.stat().st_mtime, reverse=True)
+    artifacts = []
+    for f in files[:limit]:
+        artifacts.append(json.loads(f.read_text()))
+    return artifacts
+
+
 @app.get("/health")
 def health():
     return {
@@ -128,9 +163,13 @@ artifact_store: dict[str, dict] = {}
 
 @app.post("/run")
 async def run_code(code: str = "", patch_hash: str = ""):
-    """Execute Python code in a subprocess and return stdout/stderr."""
+    """Execute Python code in a subprocess and return stdout/stderr.
+    Saves result to disk for the lab diary."""
     if patch_hash and not code and patch_hash in artifact_store:
         code = artifact_store[patch_hash].get("code", "")
+    elif patch_hash and not code:
+        disk = load_artifact_disk(patch_hash)
+        code = disk.get("code", "")
 
     if not code.strip():
         return JSONResponse({"error": "No code provided"}, 400)
@@ -168,10 +207,16 @@ async def run_code(code: str = "", patch_hash: str = ""):
         "timestamp": time.time(),
     }
 
+    # Store in memory + disk
     if patch_hash:
         if patch_hash not in artifact_store:
             artifact_store[patch_hash] = {"code": code}
         artifact_store[patch_hash].update(result)
+        # Persist to disk for diary
+        disk_data = load_artifact_disk(patch_hash)
+        disk_data.update({"code": code, "patch_hash": patch_hash})
+        disk_data.update(result)
+        save_artifact_disk(patch_hash, disk_data)
 
     return result
 
@@ -179,7 +224,7 @@ async def run_code(code: str = "", patch_hash: str = ""):
 @app.get("/artifact/{patch_hash}", response_class=HTMLResponse)
 async def view_artifact(patch_hash: str):
     """Return an HTML page showing code + output, embeddable as iframe."""
-    info = artifact_store.get(patch_hash, {})
+    info = artifact_store.get(patch_hash) or load_artifact_disk(patch_hash)
     code = info.get("code", "")
     stdout = info.get("stdout", "")
     stderr = info.get("stderr", "")
@@ -212,14 +257,63 @@ async def view_artifact(patch_hash: str):
 
 
 @app.post("/store-artifact")
-async def store_artifact(patch_hash: str = "", code: str = ""):
-    """Store generated code for later viewing/running via /artifact/{hash}."""
+async def store_artifact(patch_hash: str = "", code: str = "", reasoning: str = "", evidence: str = "", observer_output: str = ""):
+    """Store generated code + metadata for later viewing/running."""
     if not patch_hash:
         return JSONResponse({"error": "patch_hash required"}, 400)
-    artifact_store[patch_hash] = {"code": code, "timestamp": time.time()}
+    data = {"code": code, "reasoning": reasoning, "evidence": evidence, "observer_output": observer_output, "timestamp": time.time(), "patch_hash": patch_hash}
+    artifact_store[patch_hash] = data
+    save_artifact_disk(patch_hash, data)
     return {"stored": True, "patch_hash": patch_hash}
 
 
+@app.get("/api/artifacts")
+async def list_artifacts(limit: int = 50):
+    """List all artifacts for the lab diary."""
+    return {"artifacts": list_artifacts_disk(limit=limit)}
+
+
+@app.get("/api/artifacts/{patch_hash}")
+async def get_artifact_api(patch_hash: str):
+    """Get a single artifact by hash."""
+    data = artifact_store.get(patch_hash) or load_artifact_disk(patch_hash)
+    if not data:
+        return JSONResponse({"error": "not found"}, 404)
+    return data
+
+
+@app.post("/audio/upload")
+async def upload_audio(patch_hash: str = ""):
+    """Receive audio recording and save to disk."""
+    from fastapi import Request
+    # This is called with raw body
+    pass
+
+
+@app.post("/audio/store")
+async def store_audio(patch_hash: str = "", audio_b64: str = ""):
+    """Store base64-encoded audio recording alongside an artifact."""
+    if not patch_hash or not audio_b64:
+        return JSONResponse({"error": "patch_hash and audio_b64 required"}, 400)
+    audio_path = AUDIO_DIR / f"{patch_hash}.webm"
+    audio_bytes = base64.b64decode(audio_b64)
+    audio_path.write_bytes(audio_bytes)
+    # Update artifact with audio reference
+    data = load_artifact_disk(patch_hash)
+    data["audio_path"] = str(audio_path.name)
+    save_artifact_disk(patch_hash, data)
+    return {"stored": True, "audio_file": audio_path.name}
+
+
+@app.get("/audio/{filename}")
+async def get_audio(filename: str):
+    """Serve an audio file."""
+    path = AUDIO_DIR / filename
+    if not path.exists():
+        return JSONResponse({"error": "not found"}, 404)
+    return FileResponse(str(path), media_type="audio/webm")
+
+
 @app.websocket("/ws/stream")
 async def ws_stream(ws: WebSocket):
     """Main WebSocket — receives frames + transcripts, runs the five loops."""

frontend/diary.html

@@ -0,0 +1,311 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>CSC Engine — Lab Diary</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      font-family: 'SF Pro Display', system-ui, -apple-system, sans-serif;
+      --bg: #06080f; --panel: #0b0e18; --panel2: #0f1320;
+      --border: #1a1f2e; --border2: #232a3d;
+      --accent: #00d4ff; --accent2: #6c5ce7;
+      --green: #34d399; --amber: #fbbf24; --red: #f87171;
+      --gray: #6b7280; --text: #e2e8f0; --text2: #94a3b8;
+      --mono: 'SF Mono', 'JetBrains Mono', monospace;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: var(--bg); color: var(--text); }
+    body::before {
+      content: ''; position: fixed; inset: 0; z-index: -1;
+      background: radial-gradient(ellipse at 20% 0%, rgba(0,212,255,.04), transparent 50%),
+                  radial-gradient(ellipse at 80% 100%, rgba(108,92,231,.04), transparent 50%);
+    }
+    main { max-width: 1200px; margin: 0 auto; padding: 24px; }
+    header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 24px; }
+    .logo { display: flex; align-items: center; gap: 10px; }
+    .logo-mark {
+      width: 36px; height: 36px; border-radius: 8px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      display: flex; align-items: center; justify-content: center;
+      font-size: 18px; font-weight: 800; color: #000;
+    }
+    header h1 { font-size: 24px; font-weight: 700; }
+    header h1 span { color: var(--accent); }
+    .sub { color: var(--text2); font-size: 13px; margin-top: 2px; }
+    .back-link {
+      padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
+      background: var(--panel2); color: var(--text2); border: 1px solid var(--border2);
+      text-decoration: none; transition: .15s;
+    }
+    .back-link:hover { background: #161b2d; color: var(--text); }
+
+    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
+    .stat {
+      background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
+      padding: 16px; text-align: center;
+    }
+    .stat strong { display: block; font-size: 28px; color: var(--accent); font-family: var(--mono); }
+    .stat small { color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
+
+    .entries { display: flex; flex-direction: column; gap: 16px; }
+    .entry {
+      background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
+      overflow: hidden; transition: .15s;
+    }
+    .entry:hover { border-color: var(--border2); }
+    .entry-header {
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 18px; border-bottom: 1px solid var(--border);
+      background: linear-gradient(180deg, var(--panel2), transparent);
+    }
+    .entry-num {
+      width: 28px; height: 28px; border-radius: 6px;
+      background: rgba(0,212,255,.1); color: var(--accent);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 12px; font-weight: 700; font-family: var(--mono);
+    }
+    .entry-title { font-size: 14px; font-weight: 600; flex: 1; }
+    .entry-hash { font-size: 11px; color: var(--text2); font-family: var(--mono); }
+    .entry-time { font-size: 11px; color: var(--gray); font-family: var(--mono); }
+    .entry-body { padding: 18px; }
+
+    .entry-section { margin-bottom: 14px; }
+    .entry-section:last-child { margin-bottom: 0; }
+    .entry-label {
+      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
+      margin-bottom: 6px;
+    }
+    .label-evidence { color: var(--accent); }
+    .label-reasoning { color: var(--amber); }
+    .label-code { color: var(--green); }
+    .label-output { color: #a78bfa; }
+    .label-audio { color: #f472b6; }
+
+    .entry-evidence { font-family: var(--mono); font-size: 12px; color: var(--text2); line-height: 1.6; }
+    .entry-evidence li { list-style: none; padding-left: 16px; position: relative; margin: 2px 0; }
+    .entry-evidence li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent); }
+
+    .entry-reasoning { font-family: var(--mono); font-size: 12px; color: var(--text2); line-height: 1.7; white-space: pre-wrap; }
+
+    .entry-code {
+      background: #060810; border: 1px solid var(--border); border-radius: 8px;
+      padding: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
+      color: #c8d3f5; overflow-x: auto;
+    }
+    .entry-output {
+      background: #04060c; border: 1px solid var(--border); border-radius: 8px;
+      padding: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
+      color: var(--green); overflow-x: auto;
+    }
+    .entry-output.err { color: var(--red); }
+
+    .entry-actions { display: flex; gap: 8px; margin-top: 12px; }
+    .entry-btn {
+      padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
+      font-size: 11px; font-weight: 600; transition: .15s; text-decoration: none;
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .btn-run { background: rgba(52,211,153,.15); color: var(--green); border: 1px solid rgba(52,211,153,.3); }
+    .btn-run:hover { background: rgba(52,211,153,.25); }
+    .btn-view { background: rgba(0,212,255,.1); color: var(--accent); border: 1px solid rgba(0,212,255,.2); }
+    .btn-view:hover { background: rgba(0,212,255,.2); }
+
+    .entry-audio { margin-top: 10px; }
+    .entry-audio audio { width: 100%; height: 36px; }
+
+    .empty { text-align: center; padding: 60px; color: var(--text2); font-family: var(--mono); }
+    .empty h2 { font-size: 18px; margin-bottom: 8px; color: var(--text); }
+  </style>
+</head>
+<body>
+<main>
+  <header>
+    <div class="logo">
+      <div class="logo-mark">C</div>
+      <div>
+        <h1>Lab <span>Diary</span></h1>
+        <div class="sub">AI Notebook &mdash; computed artifacts with evidence, reasoning &amp; audio</div>
+      </div>
+    </div>
+    <a href="/" class="back-link">&larr; Back to Engine</a>
+  </header>
+
+  <div class="stats">
+    <div class="stat"><strong id="totalCount">0</strong><small>Artifacts</small></div>
+    <div class="stat"><strong id="runCount">0</strong><small>Executed</small></div>
+    <div class="stat"><strong id="audioCount">0</strong><small>With Audio</small></div>
+    <div class="stat"><strong id="successCount">0</strong><small>Exit 0</small></div>
+  </div>
+
+  <div class="entries" id="entries">
+    <div class="empty">
+      <h2>Loading artifacts...</h2>
+      <p>Fetching from /api/artifacts</p>
+    </div>
+  </div>
+</main>
+
+<script>
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text || "";
+  return div.innerHTML;
+}
+
+function formatTime(ts) {
+  if (!ts) return "unknown";
+  const d = new Date(ts * 1000);
+  return d.toLocaleString();
+}
+
+function parseSections(text) {
+  const sections = {};
+  const patterns = ['REASONING','SCENE','INFERRED_INTENT','INTENT','SIGNALS','CANDIDATE_TASK','UNCERTAINTY','EVIDENCE','CODE','RUN','TEST','ATTRIBUTION'];
+  const patStr = patterns.join('|');
+  for (const pat of patterns) {
+    const regex = new RegExp(pat + ":?\\s*([\\s\\S]*?)(?=\\n\\s*(?:" + patStr + "):|\\n\\s*(?:INSUFFICIENT)|$)", 'i');
+    const m = text.match(regex);
+    if (m && m[1].trim()) sections[pat] = m[1].trim();
+  }
+  return sections;
+}
+
+async function loadDiary() {
+  try {
+    const resp = await fetch('/api/artifacts?limit=50');
+    const data = await resp.json();
+    const artifacts = data.artifacts || [];
+    renderEntries(artifacts);
+  } catch(e) {
+    document.getElementById('entries').innerHTML = '<div class="empty"><h2>Error</h2><p>' + escapeHtml(e.message) + '</p></div>';
+  }
+}
+
+function renderEntries(artifacts) {
+  const container = document.getElementById('entries');
+  let runCount = 0, audioCount = 0, successCount = 0;
+
+  if (artifacts.length === 0) {
+    container.innerHTML = '<div class="empty"><h2>No artifacts yet</h2><p>Start the engine and generate code to populate the diary.</p></div>';
+    document.getElementById('totalCount').textContent = '0';
+    document.getElementById('runCount').textContent = '0';
+    document.getElementById('audioCount').textContent = '0';
+    document.getElementById('successCount').textContent = '0';
+    return;
+  }
+
+  let html = '';
+  artifacts.forEach((art, i) => {
+    const num = artifacts.length - i;
+    const hash = art.patch_hash || 'unknown';
+    const hasRun = art.exit_code !== undefined;
+    const hasAudio = !!art.audio_path;
+    const success = art.exit_code === 0;
+    if (hasRun) runCount++;
+    if (hasAudio) audioCount++;
+    if (success) successCount++;
+
+    // Parse sections from observer_output if available
+    const sections = parseSections(art.observer_output || '');
+    const evidence = art.evidence || sections.EVIDENCE || '';
+    const reasoning = art.reasoning || sections.REASONING || '';
+    const code = art.code || sections.CODE || '';
+    const stdout = art.stdout || '';
+    const stderr = art.stderr || '';
+
+    html += '<div class="entry">';
+    html += '<div class="entry-header">';
+    html += '<div class="entry-num">' + num + '</div>';
+    html += '<div class="entry-title">Artifact ' + hash.slice(0, 12) + '</div>';
+    html += '<div class="entry-hash">' + hash.slice(0, 16) + '</div>';
+    html += '<div class="entry-time">' + formatTime(art.timestamp) + '</div>';
+    html += '</div>';
+    html += '<div class="entry-body">';
+
+    if (evidence) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-evidence">\u258C Evidence</div>';
+      html += '<ul class="entry-evidence">';
+      for (const line of evidence.split('\n').filter(l => l.trim())) {
+        html += '<li>' + escapeHtml(line.replace(/^[-\u2022*]\s*/, '')) + '</li>';
+      }
+      html += '</ul></div>';
+    }
+
+    if (reasoning) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-reasoning">\u258C Reasoning</div>';
+      html += '<div class="entry-reasoning">' + escapeHtml(reasoning) + '</div>';
+      html += '</div>';
+    }
+
+    if (code) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-code">\u258C Code</div>';
+      html += '<pre class="entry-code">' + escapeHtml(code) + '</pre>';
+      html += '</div>';
+    }
+
+    if (stdout) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-output">\u258C Output (exit ' + art.exit_code + ')</div>';
+      html += '<pre class="entry-output">' + escapeHtml(stdout) + '</pre>';
+      html += '</div>';
+    }
+    if (stderr) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-output" style="color:var(--red)">\u258C Errors</div>';
+      html += '<pre class="entry-output err">' + escapeHtml(stderr) + '</pre>';
+      html += '</div>';
+    }
+
+    if (hasAudio) {
+      html += '<div class="entry-section">';
+      html += '<div class="entry-label label-audio">\u258C Audio Recording</div>';
+      html += '<div class="entry-audio"><audio controls src="/audio/' + art.audio_path + '"></audio></div>';
+      html += '</div>';
+    }
+
+    html += '<div class="entry-actions">';
+    html += '<button class="entry-btn btn-run" onclick="runFromDiary(\'' + hash + '\', this)">\u25B6 Run</button>';
+    html += '<a class="entry-btn btn-view" href="/artifact/' + hash + '" target="_blank">View Artifact</a>';
+    html += '</div>';
+
+    html += '</div></div>';
+  });
+
+  container.innerHTML = html;
+  document.getElementById('totalCount').textContent = artifacts.length;
+  document.getElementById('runCount').textContent = runCount;
+  document.getElementById('audioCount').textContent = audioCount;
+  document.getElementById('successCount').textContent = successCount;
+}
+
+async function runFromDiary(patchHash, btn) {
+  if (btn) { btn.disabled = true; btn.textContent = 'Running...'; }
+  try {
+    const resp = await fetch('/run?patch_hash=' + patchHash, { method: 'POST' });
+    const data = await resp.json();
+    if (data.exit_code === 0) {
+      btn.style.background = 'rgba(52,211,153,.3)';
+      btn.textContent = '\u2713 Success';
+    } else {
+      btn.style.background = 'rgba(248,113,113,.2)';
+      btn.style.color = 'var(--red)';
+      btn.textContent = '\u2717 Exit ' + data.exit_code;
+    }
+    // Reload diary after a moment
+    setTimeout(() => loadDiary(), 500);
+  } catch(e) {
+    btn.textContent = 'Error';
+  }
+  setTimeout(() => {
+    if (btn) { btn.disabled = false; btn.textContent = '\u25B6 Run'; btn.style.background = ''; btn.style.color = ''; }
+  }, 3000);
+}
+
+loadDiary();
+</script>
+</body>
+</html>

frontend/index.html

@@ -739,6 +739,20 @@
         </svg>
         Force Generate
       </button>
+      <button id="recBtn" class="btn btn-ghost"
+        style="background:rgba(248,113,113,.1);color:var(--red);border-color:rgba(248,113,113,.2)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5" />
+        </svg>
+        Record Audio
+      </button>
+      <a href="/diary" class="btn btn-ghost" style="text-decoration:none">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+        </svg>
+        Lab Diary
+      </a>
       <div class="ctrl-group">
         <label>Mode</label>
         <select id="mode">
@@ -819,6 +833,7 @@
 
     let stream = null, ws = null, frameTimer = null, recognition = null, sessionId = null;
     let patchCount = 0;
+    let mediaRecorder = null, audioChunks = [], currentAudioHash = null, audioStream = null;
 
     function setStatus(msg, dotClass) {
       statusEl.innerHTML = '<span class="status-dot ' + (dotClass || 'dot-idle') + '"></span>' + msg;
@@ -874,11 +889,18 @@
             patchCount++;
             document.getElementById("patchCount").textContent = patchCount + " patch" + (patchCount !== 1 ? "es" : "");
             setStatus("Code patch generated", "dot-active");
-            // Store code on server for /artifact/{hash} and /run
+            // Store code + reasoning + evidence on server for diary
             const sections = parseSections(msg.output);
             const codeText = (sections.CODE || "").replace(/^```python\s*/i, "").replace(/^```\s*/, "").replace(/```$/, "").trim();
             if (codeText && msg.patch_hash) {
-              fetch("/store-artifact?patch_hash=" + msg.patch_hash + "&code=" + encodeURIComponent(codeText), { method: "POST" }).catch(() => { });
+              const reasoningText = sections.REASONING || "";
+              const evidenceText = sections.EVIDENCE || "";
+              fetch("/store-artifact?patch_hash=" + msg.patch_hash + "&code=" + encodeURIComponent(codeText) + "&reasoning=" + encodeURIComponent(reasoningText) + "&evidence=" + encodeURIComponent(evidenceText) + "&observer_output=" + encodeURIComponent(msg.output), { method: "POST" }).catch(() => { });
+              // If we have a pending audio recording, attach it
+              if (currentAudioHash === null && audioChunks.length > 0) {
+                currentAudioHash = msg.patch_hash;
+                finishAudioUpload(msg.patch_hash);
+              }
             }
             break;
           case "error":
@@ -1171,6 +1193,65 @@
     document.getElementById("stopBtn").onclick = stopLive;
     document.getElementById("speechBtn").onclick = startSpeech;
     document.getElementById("forceBtn").onclick = () => sendFrame(true);
+
+    // Audio Recording with MediaRecorder
+    document.getElementById("recBtn").onclick = toggleRecording;
+
+    function toggleRecording() {
+      if (mediaRecorder && mediaRecorder.state === "recording") {
+        mediaRecorder.stop();
+        document.getElementById("recBtn").style.background = "rgba(248,113,113,.1)";
+        document.getElementById("recBtn").innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/></svg>Record Audio';
+        document.getElementById("audioStatus").textContent = "processing";
+      } else {
+        startAudioRecording();
+      }
+    }
+
+    async function startAudioRecording() {
+      try {
+        audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        audioChunks = [];
+        currentAudioHash = null;
+        mediaRecorder = new MediaRecorder(audioStream);
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) audioChunks.push(e.data);
+        };
+        mediaRecorder.onstop = () => {
+          if (audioStream) { audioStream.getTracks().forEach(t => t.stop()); audioStream = null; }
+          // If we already have a patch hash, upload now
+          if (currentAudioHash) {
+            finishAudioUpload(currentAudioHash);
+          }
+        };
+        mediaRecorder.start();
+        const btn = document.getElementById("recBtn");
+        btn.style.background = "rgba(248,113,113,.25)";
+        btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"/></svg>Stop Recording';
+        document.getElementById("audioStatus").textContent = "recording";
+        setStatus("Audio recording started", "dot-active");
+      } catch (e) {
+        setStatus("Audio recording error: " + e.message, "dot-error");
+      }
+    }
+
+    function finishAudioUpload(patchHash) {
+      if (audioChunks.length === 0) return;
+      const blob = new Blob(audioChunks, { type: "audio/webm" });
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const b64 = reader.result.split(",")[1];
+        if (b64) {
+          fetch("/audio/store?patch_hash=" + patchHash + "&audio_b64=" + encodeURIComponent(b64), { method: "POST" })
+            .then(() => {
+              audioChunks = [];
+              document.getElementById("audioStatus").textContent = "stored";
+            })
+            .catch(() => { });
+        }
+      };
+      reader.readAsDataURL(blob);
+    }
   </script>
 </body>