feat(space): migrate Hugging Face Space to keet SolidJS app

Replace the CRA template with the keet SolidJS/Vite app, workers, and pipeline modules for browser ASR.

Update Space metadata for static dist deployment with COOP/COEP/CORP headers and keep repository content HF-compatible by excluding rejected binary assets.

.env.example

@@ -0,0 +1 @@
+VITE_GEMINI_API_KEY="YOUR_API_KEY_HERE"

.gitignore

@@ -1,23 +1,64 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Dependencies
+bower_components/
+node_modules/
+package-lock.json
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Build and Distribution
+build/
+dist/
+dist-ssr/
+*.js.map
+*.map
+*.tsbuildinfo
 
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
+# Environment and Local Config
+.env
 .env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*.local
+*.local
+*.pem
 
+# Logs
+*.log
+lerna-debug.log*
+logs/
 npm-debug.log*
+pnpm-debug.log*
+tsd-debug.log
 yarn-debug.log*
 yarn-error.log*
+
+# Editor and OS
+.DS_Store
+.idea/
+.vscode/
+!.vscode/extensions.json
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
+
+# Testing and Coverage
+.nyc_output/
+.pytest_cache/
+coverage/
+lib-cov/
+
+# Runtime and Temporary Files
+*.pid
+*.pid.lock
+*.seed
+pids/
+
+# Large trace files (Chrome performance traces)
+metrics/*.json
+!metrics/trace_analysis_summary.json
+
+# Misc
+.grunt/
+*.wim
+docs/
+legacy/
+public/models/
+performance-trace.json.gz

README.md

@@ -1,81 +1,49 @@
 ---
 title: Keet Streaming
-emoji: 🐠
+emoji: 🎙️
 colorFrom: indigo
-colorTo: red
+colorTo: blue
 sdk: static
 pinned: false
+license: mit
+short_description: Real-time browser ASR with parakeet.js + WebGPU
 app_build_command: npm run build
-app_file: build/index.html
+app_file: dist/index.html
+models:
+- istupakov/parakeet-tdt-0.6b-v2-onnx
+tags:
+- asr
+- speech-to-text
+- parakeet
+- parakeet-js
+- onnx
+- webgpu
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
 ---
 
-# Getting Started with Create React App
+# Keet Streaming
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Keet is a real-time, privacy-first transcription app built with SolidJS + Vite and powered by `parakeet.js`.
+Inference runs in the browser (WebGPU/WASM) with no backend transcription service.
 
-## Available Scripts
+## Run locally
 
-In the project directory, you can run:
+```bash
+npm install
+npm run dev
+```
 
-### `npm start`
+## Hugging Face Spaces
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+This Space uses the **static** SDK and builds directly from source:
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+- Build command: `npm run build`
+- Output: `dist/index.html`
 
-### `npm test`
+## Notes
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- The app requires microphone access in the browser.
+- COEP/COOP headers are configured in this README front matter for worker/wasm isolation.

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; connect-src 'self' blob: https://huggingface.co https://*.huggingface.co https://*.hf.co https://fonts.googleapis.com https://fonts.gstatic.com; font-src 'self' https://fonts.gstatic.com; frame-src 'self'; img-src 'self' data:; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; worker-src 'self' blob:;" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Keet - Privacy-first real-time transcription. Your audio stays on your device." />
+  <meta name="theme-color" content="#6B705C" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <title>Keet - Real-time Transcription</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+    rel="stylesheet" />
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="./manifest.json" />
+  <link rel="icon" type="image/x-icon" href="./favicon.ico" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+
+  <script>
+    if ('serviceWorker' in navigator && location.hostname !== 'localhost') {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./sw.js')
+          .then((reg) => console.log('[App] SW registered:', reg.scope))
+          .catch((err) => console.warn('[App] SW registration failed:', err));
+      });
+    }
+  </script>
+</body>
+
+</html>

package.json

@@ -1,39 +1,43 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "name": "keet",
+  "version": "1.0.0",
+  "description": "Keet real-time transcription with parakeet.js",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "dev": "vite",
+    "dev:local": "cross-env USE_LOCAL_PARAKEET=true vite",
+    "build": "vite build",
+    "build:local": "cross-env USE_LOCAL_PARAKEET=true vite build",
+    "serve": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "license": "MIT",
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/vite": "^4.1.18",
+    "@vitest/web-worker": "^4.0.18",
+    "cross-env": "^7.0.3",
+    "happy-dom": "^20.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.6",
+    "vitest": "^4.0.18"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "@google/generative-ai": "^0.24.1",
+    "@huggingface/transformers": "^3.6.1",
+    "@solid-primitives/transition-group": "^1.1.2",
+    "@thisbeyond/solid-dnd": "^0.7.5",
+    "material-icons": "^1.13.14",
+    "onnxruntime-web": "1.24.1",
+    "parakeet.js": "1.2.1",
+    "solid-js": "^1.9.5",
+    "uuid": "^11.1.0",
+    "wink-eng-lite-web-model": "^1.8.1",
+    "wink-nlp": "^2.4.0"
   }
 }

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Keet",
+  "name": "Keet - Real-time Transcription",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#6B705C",
+  "background_color": "#F9F7F2",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

public/sw.js

@@ -0,0 +1,172 @@
+/**
+ * Keet Service Worker
+ * Story 3.1: Offline-first caching strategy
+ * 
+ * Strategy:
+ * - App shell (HTML, CSS, JS): Cache-first, update in background
+ * - Model files: Cache-first (large files, rarely change)
+ * - API/Dynamic: Network-first with fallback
+ * - Cross-origin isolation headers injected for SharedArrayBuffer / WebGPU support
+ */
+
+const CACHE_NAME = 'keet-v2';
+const MODEL_CACHE = 'keet-models-v1';
+
+// Base path from SW script URL (works at / and /keet/ on GitHub Pages)
+const BASE = (() => {
+    const path = self.location.pathname;
+    const i = path.lastIndexOf('/');
+    return i >= 0 ? path.slice(0, i + 1) : '/';
+})();
+
+// App shell files to pre-cache (base-relative)
+const APP_SHELL = [
+    BASE,
+    BASE + 'index.html',
+    BASE + 'manifest.json',
+];
+
+// Model file patterns (cached on-demand)
+const MODEL_PATTERNS = [
+    /\.onnx\.data$/,
+    /\.onnx$/,
+    /\.bin$/,
+    /vocab\.txt$/,
+    /tokenizer\.json$/,
+];
+
+/**
+ * Add Cross-Origin Isolation headers to a response.
+ * This enables SharedArrayBuffer and WebGPU on static hosts (e.g. GitHub Pages)
+ * that don't allow custom response headers.
+ * Equivalent to what coi-serviceworker.js does in the parakeet.js demo.
+ */
+function addCOIHeaders(response) {
+    if (response.status === 0) {
+        return response;
+    }
+    const newHeaders = new Headers(response.headers);
+    newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
+    newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin");
+    newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
+    return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: newHeaders,
+    });
+}
+
+// Install event - pre-cache app shell
+self.addEventListener('install', (event) => {
+    console.log('[SW] Installing...');
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('[SW] Pre-caching app shell');
+                return cache.addAll(APP_SHELL);
+            })
+            .then(() => self.skipWaiting())
+    );
+});
+
+// Activate event - clean old caches
+self.addEventListener('activate', (event) => {
+    console.log('[SW] Activating...');
+    event.waitUntil(
+        caches.keys()
+            .then((cacheNames) => {
+                return Promise.all(
+                    cacheNames
+                        .filter((name) => name !== CACHE_NAME && name !== MODEL_CACHE)
+                        .map((name) => {
+                            console.log('[SW] Deleting old cache:', name);
+                            return caches.delete(name);
+                        })
+                );
+            })
+            .then(() => self.clients.claim())
+    );
+});
+
+// Fetch event - serve from cache or network, inject COI headers
+self.addEventListener('fetch', (event) => {
+    const url = new URL(event.request.url);
+
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') return;
+
+    // Skip chrome-extension and other non-http(s) requests
+    if (!url.protocol.startsWith('http')) return;
+
+    // Check if this is a model file
+    const isModelFile = MODEL_PATTERNS.some((pattern) => pattern.test(url.pathname));
+
+    if (isModelFile) {
+        // Model files: Cache-first (they're large and rarely change)
+        event.respondWith(
+            caches.open(MODEL_CACHE)
+                .then((cache) => {
+                    return cache.match(event.request)
+                        .then((cached) => {
+                            if (cached) {
+                                console.log('[SW] Model from cache:', url.pathname);
+                                return cached;
+                            }
+                            console.log('[SW] Fetching model:', url.pathname);
+                            return fetch(event.request)
+                                .then((response) => {
+                                    if (response.ok) {
+                                        cache.put(event.request, response.clone());
+                                    }
+                                    return response;
+                                });
+                        });
+                })
+        );
+        return;
+    }
+
+    // App shell: Cache-first with network fallback + COI headers
+    if (url.origin === self.location.origin) {
+        event.respondWith(
+            caches.match(event.request)
+                .then((cached) => {
+                    const fetchPromise = fetch(event.request)
+                        .then((response) => {
+                            if (response.ok) {
+                                const responseClone = response.clone();
+                                caches.open(CACHE_NAME)
+                                    .then((cache) => cache.put(event.request, responseClone));
+                            }
+                            return addCOIHeaders(response);
+                        })
+                        .catch(() => cached);
+
+                    return cached ? addCOIHeaders(cached) : fetchPromise;
+                })
+        );
+        return;
+    }
+
+    // External resources: Network-first + COI headers
+    event.respondWith(
+        fetch(event.request)
+            .then((response) => addCOIHeaders(response))
+            .catch(() => caches.match(event.request))
+    );
+});
+
+// Message handler for cache management
+self.addEventListener('message', (event) => {
+    if (event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting();
+    }
+
+    if (event.data.type === 'CLEAR_MODEL_CACHE') {
+        caches.delete(MODEL_CACHE)
+            .then(() => {
+                console.log('[SW] Model cache cleared');
+                event.ports[0].postMessage({ success: true });
+            });
+    }
+});

public/wasm/ten_vad.js

@@ -0,0 +1,30 @@
+
+var createVADModule = (() => {
+  var _scriptDir = import.meta.url;
+  
+  return (
+function(createVADModule) {
+  createVADModule = createVADModule || {};
+
+
+var a;a||(a=typeof createVADModule !== 'undefined' ? createVADModule : {});var k,l;a.ready=new Promise(function(b,c){k=b;l=c});var p=Object.assign({},a),r="object"==typeof window,u="function"==typeof importScripts,v="",w;
+if(r||u)u?v=self.location.href:"undefined"!=typeof document&&document.currentScript&&(v=document.currentScript.src),_scriptDir&&(v=_scriptDir),0!==v.indexOf("blob:")?v=v.substr(0,v.replace(/[?#].*/,"").lastIndexOf("/")+1):v="",u&&(w=b=>{var c=new XMLHttpRequest;c.open("GET",b,!1);c.responseType="arraybuffer";c.send(null);return new Uint8Array(c.response)});var aa=a.print||console.log.bind(console),x=a.printErr||console.warn.bind(console);Object.assign(a,p);p=null;var y;a.wasmBinary&&(y=a.wasmBinary);
+var noExitRuntime=a.noExitRuntime||!0;"object"!=typeof WebAssembly&&z("no native wasm support detected");var A,B=!1,C="undefined"!=typeof TextDecoder?new TextDecoder("utf8"):void 0,D,E,F;function J(){var b=A.buffer;D=b;a.HEAP8=new Int8Array(b);a.HEAP16=new Int16Array(b);a.HEAP32=new Int32Array(b);a.HEAPU8=E=new Uint8Array(b);a.HEAPU16=new Uint16Array(b);a.HEAPU32=F=new Uint32Array(b);a.HEAPF32=new Float32Array(b);a.HEAPF64=new Float64Array(b)}var K=[],L=[],M=[];
+function ba(){var b=a.preRun.shift();K.unshift(b)}var N=0,O=null,P=null;function z(b){if(a.onAbort)a.onAbort(b);b="Aborted("+b+")";x(b);B=!0;b=new WebAssembly.RuntimeError(b+". Build with -sASSERTIONS for more info.");l(b);throw b;}function Q(){return R.startsWith("data:application/octet-stream;base64,")}var R;if(a.locateFile){if(R="ten_vad.wasm",!Q()){var S=R;R=a.locateFile?a.locateFile(S,v):v+S}}else R=(new URL("ten_vad.wasm",import.meta.url)).href;
+function T(){var b=R;try{if(b==R&&y)return new Uint8Array(y);if(w)return w(b);throw"both async and sync fetching of the wasm failed";}catch(c){z(c)}}function ca(){return y||!r&&!u||"function"!=typeof fetch?Promise.resolve().then(function(){return T()}):fetch(R,{credentials:"same-origin"}).then(function(b){if(!b.ok)throw"failed to load wasm binary file at '"+R+"'";return b.arrayBuffer()}).catch(function(){return T()})}function U(b){for(;0<b.length;)b.shift()(a)}
+var da=[null,[],[]],ea={a:function(){z("")},f:function(b,c,m){E.copyWithin(b,c,c+m)},c:function(b){var c=E.length;b>>>=0;if(2147483648<b)return!1;for(var m=1;4>=m;m*=2){var h=c*(1+.2/m);h=Math.min(h,b+100663296);var d=Math;h=Math.max(b,h);d=d.min.call(d,2147483648,h+(65536-h%65536)%65536);a:{try{A.grow(d-D.byteLength+65535>>>16);J();var e=1;break a}catch(W){}e=void 0}if(e)return!0}return!1},e:function(){return 52},b:function(){return 70},d:function(b,c,m,h){for(var d=0,e=0;e<m;e++){var W=F[c>>2],
+X=F[c+4>>2];c+=8;for(var G=0;G<X;G++){var f=E[W+G],H=da[b];if(0===f||10===f){f=H;for(var n=0,q=n+NaN,t=n;f[t]&&!(t>=q);)++t;if(16<t-n&&f.buffer&&C)f=C.decode(f.subarray(n,t));else{for(q="";n<t;){var g=f[n++];if(g&128){var I=f[n++]&63;if(192==(g&224))q+=String.fromCharCode((g&31)<<6|I);else{var Y=f[n++]&63;g=224==(g&240)?(g&15)<<12|I<<6|Y:(g&7)<<18|I<<12|Y<<6|f[n++]&63;65536>g?q+=String.fromCharCode(g):(g-=65536,q+=String.fromCharCode(55296|g>>10,56320|g&1023))}}else q+=String.fromCharCode(g)}f=q}(1===
+b?aa:x)(f);H.length=0}else H.push(f)}d+=X}F[h>>2]=d;return 0}};
+(function(){function b(d){a.asm=d.exports;A=a.asm.g;J();L.unshift(a.asm.h);N--;a.monitorRunDependencies&&a.monitorRunDependencies(N);0==N&&(null!==O&&(clearInterval(O),O=null),P&&(d=P,P=null,d()))}function c(d){b(d.instance)}function m(d){return ca().then(function(e){return WebAssembly.instantiate(e,h)}).then(function(e){return e}).then(d,function(e){x("failed to asynchronously prepare wasm: "+e);z(e)})}var h={a:ea};N++;a.monitorRunDependencies&&a.monitorRunDependencies(N);if(a.instantiateWasm)try{return a.instantiateWasm(h,
+b)}catch(d){x("Module.instantiateWasm callback failed with error: "+d),l(d)}(function(){return y||"function"!=typeof WebAssembly.instantiateStreaming||Q()||"function"!=typeof fetch?m(c):fetch(R,{credentials:"same-origin"}).then(function(d){return WebAssembly.instantiateStreaming(d,h).then(c,function(e){x("wasm streaming compile failed: "+e);x("falling back to ArrayBuffer instantiation");return m(c)})})})().catch(l);return{}})();
+a.___wasm_call_ctors=function(){return(a.___wasm_call_ctors=a.asm.h).apply(null,arguments)};a._malloc=function(){return(a._malloc=a.asm.i).apply(null,arguments)};a._free=function(){return(a._free=a.asm.j).apply(null,arguments)};a._ten_vad_create=function(){return(a._ten_vad_create=a.asm.k).apply(null,arguments)};a._ten_vad_process=function(){return(a._ten_vad_process=a.asm.l).apply(null,arguments)};a._ten_vad_destroy=function(){return(a._ten_vad_destroy=a.asm.m).apply(null,arguments)};
+a._ten_vad_get_version=function(){return(a._ten_vad_get_version=a.asm.n).apply(null,arguments)};var V;P=function fa(){V||Z();V||(P=fa)};
+function Z(){function b(){if(!V&&(V=!0,a.calledRun=!0,!B)){U(L);k(a);if(a.onRuntimeInitialized)a.onRuntimeInitialized();if(a.postRun)for("function"==typeof a.postRun&&(a.postRun=[a.postRun]);a.postRun.length;){var c=a.postRun.shift();M.unshift(c)}U(M)}}if(!(0<N)){if(a.preRun)for("function"==typeof a.preRun&&(a.preRun=[a.preRun]);a.preRun.length;)ba();U(K);0<N||(a.setStatus?(a.setStatus("Running..."),setTimeout(function(){setTimeout(function(){a.setStatus("")},1);b()},1)):b())}}
+if(a.preInit)for("function"==typeof a.preInit&&(a.preInit=[a.preInit]);0<a.preInit.length;)a.preInit.pop()();Z();
+
+
+  return createVADModule.ready
+}
+);
+})();
+export default createVADModule;

public/wasm/ten_vad.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ec0b9640683987e15a4e54e4ce5642b2447c6e5d82b1be889b5099c75434fc3
+size 283349

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -0,0 +1,1037 @@
+import { Component, Show, For, createSignal, createEffect, onMount, onCleanup } from 'solid-js';
+import { appStore } from './stores/appStore';
+import { CompactWaveform, ModelLoadingOverlay, DebugPanel, TranscriptionDisplay, SettingsContent } from './components';
+import { getModelDisplayName, MODELS } from './components/ModelLoadingOverlay';
+import { AudioEngine } from './lib/audio';
+import { MelWorkerClient } from './lib/audio/MelWorkerClient';
+import { TranscriptionWorkerClient } from './lib/transcription';
+import { HybridVAD } from './lib/vad';
+import { WindowBuilder } from './lib/transcription/WindowBuilder';
+import { BufferWorkerClient } from './lib/buffer';
+import { TenVADWorkerClient } from './lib/vad/TenVADWorkerClient';
+import type { V4ProcessResult } from './lib/transcription/TranscriptionWorkerClient';
+import type { BufferWorkerConfig, TenVADResult } from './lib/buffer/types';
+import { formatDuration } from './utils/time';
+
+// Singleton instances
+let audioEngine: AudioEngine | null = null;
+export const [audioEngineSignal, setAudioEngineSignal] = createSignal<AudioEngine | null>(null);
+
+let workerClient: TranscriptionWorkerClient | null = null;
+let melClient: MelWorkerClient | null = null;
+export const [melClientSignal, setMelClientSignal] = createSignal<MelWorkerClient | null>(null);
+let segmentUnsubscribe: (() => void) | null = null;
+let windowUnsubscribe: (() => void) | null = null;
+let melChunkUnsubscribe: (() => void) | null = null;
+let visualizationUnsubscribe: (() => void) | undefined;
+// v4 pipeline instances
+let hybridVAD: HybridVAD | null = null;
+let bufferClient: BufferWorkerClient | null = null;
+let tenVADClient: TenVADWorkerClient | null = null;
+let windowBuilder: WindowBuilder | null = null;
+let v4TickTimeout: number | undefined;
+let v4TickRunning = false;
+let v4AudioChunkUnsubscribe: (() => void) | null = null;
+let v4MelChunkUnsubscribe: (() => void) | null = null;
+let v4InferenceBusy = false;
+let v4LastInferenceTime = 0;
+// Global sample counter for audio chunks (tracks total samples written to BufferWorker)
+let v4GlobalSampleOffset = 0;
+// Throttle UI updates from TEN-VAD to at most once per frame
+let pendingSileroProb: number | null = null;
+let sileroUpdateScheduled = false;
+let pendingVadState: {
+  isSpeech: boolean;
+  energy: number;
+  snr: number;
+  hybridState: string;
+  sileroProbability?: number;
+} | null = null;
+let vadUpdateScheduled = false;
+
+const scheduleSileroUpdate = (prob: number) => {
+  pendingSileroProb = prob;
+  if (sileroUpdateScheduled) return;
+  sileroUpdateScheduled = true;
+  requestAnimationFrame(() => {
+    sileroUpdateScheduled = false;
+    if (pendingSileroProb === null) return;
+    const currentState = appStore.vadState();
+    appStore.setVadState({
+      ...currentState,
+      sileroProbability: pendingSileroProb,
+    });
+  });
+};
+
+const scheduleVadStateUpdate = (next: {
+  isSpeech: boolean;
+  energy: number;
+  snr: number;
+  hybridState: string;
+  sileroProbability?: number;
+}) => {
+  pendingVadState = next;
+  if (vadUpdateScheduled) return;
+  vadUpdateScheduled = true;
+  requestAnimationFrame(() => {
+    vadUpdateScheduled = false;
+    if (!pendingVadState) return;
+    const currentState = appStore.vadState();
+    const sileroProbability =
+      pendingVadState.sileroProbability !== undefined
+        ? pendingVadState.sileroProbability
+        : currentState.sileroProbability;
+    appStore.setVadState({
+      ...currentState,
+      ...pendingVadState,
+      sileroProbability,
+    });
+    appStore.setIsSpeechDetected(pendingVadState.isSpeech);
+    pendingVadState = null;
+  });
+};
+
+const Header: Component<{
+  onToggleDebug: () => void;
+}> = (props) => {
+  const sessionLabel = () =>
+    appStore.modelState() === 'ready' ? getModelDisplayName(appStore.selectedModelId()) : 'Session';
+  return (
+    <header class="h-20 flex items-center justify-between px-8 bg-[var(--color-earthy-bg)]/80 backdrop-blur-sm z-30 shrink-0">
+      <div class="flex items-center gap-6">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-[var(--color-earthy-muted-green)] flex items-center justify-center text-white">
+            <span class="material-symbols-outlined text-xl">auto_awesome</span>
+          </div>
+          <div>
+            <h1 class="text-lg font-semibold tracking-tight text-[var(--color-earthy-dark-brown)]">keet</h1>
+            <p class="text-[10px] uppercase tracking-[0.2em] text-[var(--color-earthy-soft-brown)] font-medium">{sessionLabel()}</p>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-4">
+        <button
+          type="button"
+          onClick={props.onToggleDebug}
+          class={`p-2 rounded-full transition-colors ${appStore.showDebugPanel() ? 'bg-[var(--color-earthy-muted-green)] text-white' : 'text-[var(--color-earthy-muted-green)] hover:bg-[var(--color-earthy-sage)]/30'}`}
+          title={appStore.showDebugPanel() ? 'Hide debug panel' : 'Show debug panel'}
+          aria-label="Toggle debug panel"
+        >
+          <span class="material-symbols-outlined">bug_report</span>
+        </button>
+        <button
+          type="button"
+          class="p-2 text-[var(--color-earthy-muted-green)] hover:scale-110 transition-transform"
+          aria-label="More options"
+        >
+          <span class="material-symbols-outlined">more_vert</span>
+        </button>
+      </div>
+    </header>
+  );
+};
+
+const WIDGET_STORAGE_KEY = 'boncukjs-control-widget-pos';
+const WIDGET_MAX_W = 672;
+const WIDGET_MIN_H = 80;
+
+const App: Component = () => {
+  const [showModelOverlay, setShowModelOverlay] = createSignal(false);
+  const [showContextPanel, setShowContextPanel] = createSignal(false);
+  type SettingsPanelSection = 'full' | 'audio' | 'model';
+  const [settingsPanelSection, setSettingsPanelSection] = createSignal<SettingsPanelSection>('full');
+  let panelHoverCloseTimeout: number | undefined;
+  const [workerReady, setWorkerReady] = createSignal(false);
+  const [widgetPos, setWidgetPos] = createSignal<{ x: number; y: number } | null>(null);
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  const isRecording = () => appStore.recordingState() === 'recording';
+  const isModelReady = () => appStore.modelState() === 'ready';
+
+  let dragStart = { x: 0, y: 0 };
+  let posStart = { x: 0, y: 0 };
+
+  const [windowHeight, setWindowHeight] = createSignal(typeof window !== 'undefined' ? window.innerHeight : 600);
+  const settingsExpandUp = () => {
+    const pos = widgetPos();
+    if (!pos) return true;
+    return pos.y >= windowHeight() / 2;
+  };
+
+  const handleWidgetDragStart = (e: MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button, select, input')) return;
+    e.preventDefault();
+    const pos = widgetPos();
+    if (!pos) return;
+    setIsDragging(true);
+    dragStart = { x: e.clientX, y: e.clientY };
+    posStart = { ...pos };
+    const onMove = (e2: MouseEvent) => {
+      const dx = e2.clientX - dragStart.x;
+      const dy = e2.clientY - dragStart.y;
+      const w = typeof window !== 'undefined' ? window.innerWidth : 800;
+      const h = typeof window !== 'undefined' ? window.innerHeight : 600;
+      const newX = Math.max(0, Math.min(w - WIDGET_MAX_W, posStart.x + dx));
+      const newY = Math.max(0, Math.min(h - WIDGET_MIN_H, posStart.y + dy));
+      setWidgetPos({ x: newX, y: newY });
+    };
+    const onUp = () => {
+      setIsDragging(false);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      const p = widgetPos();
+      if (p && typeof localStorage !== 'undefined') {
+        try {
+          localStorage.setItem(WIDGET_STORAGE_KEY, JSON.stringify(p));
+        } catch (_) {}
+      }
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  createEffect(() => {
+    if (!showContextPanel()) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setShowContextPanel(false);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  });
+
+  createEffect(() => {
+    if (appStore.modelState() === 'ready' && showContextPanel() && settingsPanelSection() === 'model') {
+      setShowContextPanel(false);
+    }
+  });
+
+  onMount(() => {
+    const onResize = () => setWindowHeight(window.innerHeight);
+    window.addEventListener('resize', onResize);
+
+    const stored =
+      typeof localStorage !== 'undefined' ? localStorage.getItem(WIDGET_STORAGE_KEY) : null;
+    let posRestored = false;
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored) as { x: number; y: number };
+        if (Number.isFinite(parsed.x) && Number.isFinite(parsed.y)) {
+          setWidgetPos({ x: parsed.x, y: parsed.y });
+          posRestored = true;
+        }
+      } catch (_) {}
+    }
+    if (!posRestored) {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      setWidgetPos({
+        x: Math.max(0, (w - WIDGET_MAX_W) / 2),
+        y: h - 140,
+      });
+    }
+
+    workerClient = new TranscriptionWorkerClient();
+
+    workerClient.onModelProgress = (p) => {
+      appStore.setModelProgress(p.progress);
+      appStore.setModelMessage(p.message || '');
+      if (p.file) appStore.setModelFile(p.file);
+    };
+
+    workerClient.onModelStateChange = (s) => {
+      appStore.setModelState(s);
+    };
+
+    workerClient.onV3Confirmed = (text) => {
+      appStore.setTranscript(text);
+    };
+
+    workerClient.onV3Pending = (text) => {
+      appStore.setPendingText(text);
+    };
+
+    workerClient.onError = (msg) => {
+      appStore.setErrorMessage(msg);
+    };
+
+    appStore.refreshDevices();
+    setWorkerReady(true);
+
+    return () => window.removeEventListener('resize', onResize);
+  });
+
+  // No longer auto-show blocking model overlay; model selection is in the settings panel.
+  // createEffect(() => { ... setShowModelOverlay(true); });
+
+  onCleanup(() => {
+    clearTimeout(panelHoverCloseTimeout);
+    visualizationUnsubscribe?.();
+    cleanupV4Pipeline();
+    melClient?.dispose();
+    workerClient?.dispose();
+  });
+
+  // ---- v4 pipeline tick: periodic window building + inference ----
+  let v4TickCount = 0;
+  let v4ModelNotReadyLogged = false;
+  const v4Tick = async () => {
+    if (!workerClient || !windowBuilder || !audioEngine || !bufferClient || v4InferenceBusy) return;
+
+    // Skip inference if model is not ready (but still allow audio/mel/VAD to process)
+    if (appStore.modelState() !== 'ready') {
+      if (!v4ModelNotReadyLogged) {
+        console.log('[v4Tick] Model not ready yet - audio is being captured and preprocessed');
+        v4ModelNotReadyLogged = true;
+      }
+      return;
+    }
+    // Reset the flag once model becomes ready
+    if (v4ModelNotReadyLogged) {
+      console.log('[v4Tick] Model is now ready - starting inference');
+      v4ModelNotReadyLogged = false;
+      // Initialize the v4 service now that model is ready
+      await workerClient.initV4Service({ debug: false });
+    }
+
+    v4TickCount++;
+    const now = performance.now();
+    // Use the store's configurable inference interval (minus a small margin for the tick jitter)
+    const minInterval = Math.max(200, appStore.v4InferenceIntervalMs() - 100);
+    if (now - v4LastInferenceTime < minInterval) return;
+
+    // Check if there is speech via the BufferWorker (async query).
+    // We check both energy and inference VAD layers; either one detecting speech triggers inference.
+    const cursorSample = windowBuilder.getMatureCursorFrame(); // frame === sample in our pipeline
+    const currentSample = v4GlobalSampleOffset;
+    const startSample = cursorSample > 0 ? cursorSample : 0;
+
+    let hasSpeech = false;
+    if (currentSample > startSample) {
+      // Check energy VAD first (always available, low latency)
+      const energyResult = await bufferClient.hasSpeech('energyVad', startSample, currentSample, 0.3);
+
+      // When inference VAD is ready, require BOTH energy AND inference to agree
+      // This prevents false positives from music/noise that has high energy but no speech
+      if (tenVADClient?.isReady()) {
+        const inferenceResult = await bufferClient.hasSpeech('inferenceVad', startSample, currentSample, 0.5);
+        // Require both energy and inference VAD to agree (AND logic)
+        hasSpeech = energyResult.hasSpeech && inferenceResult.hasSpeech;
+      } else {
+        // Fall back to energy-only if inference VAD is not available
+        hasSpeech = energyResult.hasSpeech;
+      }
+    }
+
+    if (v4TickCount <= 5 || v4TickCount % 20 === 0) {
+      const vadState = appStore.vadState();
+      const rb = audioEngine.getRingBuffer();
+      const rbFrame = rb.getCurrentFrame();
+      const rbBase = rb.getBaseFrameOffset();
+      console.log(
+        `[v4Tick #${v4TickCount}] hasSpeech=${hasSpeech}, vadState=${vadState.hybridState}, ` +
+        `energy=${vadState.energy.toFixed(4)}, inferenceVAD=${(vadState.sileroProbability || 0).toFixed(2)}, ` +
+        `samples=[${startSample}:${currentSample}], ` +
+        `ringBuf=[base=${rbBase}, head=${rbFrame}, avail=${rbFrame - rbBase}]`
+      );
+    }
+
+    // Periodic buffer worker state dump (every 40 ticks)
+    if (v4TickCount % 40 === 0 && bufferClient) {
+      try {
+        const state = await bufferClient.getState();
+        const layerSummary = Object.entries(state.layers)
+          .map(([id, l]) => `${id}:${l.fillCount}/${l.maxEntries}@${l.currentSample}`)
+          .join(', ');
+        console.log(`[v4Tick #${v4TickCount}] BufferState: ${layerSummary}`);
+      } catch (_) { /* ignore state query errors */ }
+    }
+
+    if (!hasSpeech) {
+      // Check for silence-based flush using BufferWorker
+      const silenceDuration = await bufferClient.getSilenceTailDuration('energyVad', 0.3);
+      if (silenceDuration >= appStore.v4SilenceFlushSec()) {
+        // Flush pending sentence via timeout finalization
+        try {
+          const flushResult = await workerClient.v4FinalizeTimeout();
+          if (flushResult) {
+            appStore.setMatureText(flushResult.matureText);
+            appStore.setImmatureText(flushResult.immatureText);
+            appStore.setMatureCursorTime(flushResult.matureCursorTime);
+            appStore.setTranscript(flushResult.fullText);
+            appStore.appendV4SentenceEntries(flushResult.matureSentences);
+            appStore.setV4MergerStats({
+              sentencesFinalized: flushResult.matureSentenceCount,
+              cursorUpdates: flushResult.stats?.matureCursorUpdates || 0,
+              utterancesProcessed: flushResult.stats?.utterancesProcessed || 0,
+            });
+            // Advance window builder cursor
+            windowBuilder.advanceMatureCursorByTime(flushResult.matureCursorTime);
+          }
+        } catch (err) {
+          console.error('[v4Tick] Flush error:', err);
+        }
+      }
+      return;
+    }
+
+    // Build window from cursor to current position
+    const window = windowBuilder.buildWindow();
+    if (!window) {
+      if (v4TickCount <= 10 || v4TickCount % 20 === 0) {
+        const rb = audioEngine.getRingBuffer();
+        const rbHead = rb.getCurrentFrame();
+        const rbBase = rb.getBaseFrameOffset();
+        console.log(
+          `[v4Tick #${v4TickCount}] buildWindow=null, ` +
+          `ringBuf=[base=${rbBase}, head=${rbHead}, avail=${rbHead - rbBase}], ` +
+          `cursor=${windowBuilder.getMatureCursorFrame()}`
+        );
+      }
+      return;
+    }
+
+    console.log(`[v4Tick #${v4TickCount}] Window [${window.startFrame}:${window.endFrame}] ${window.durationSeconds.toFixed(2)}s (initial=${window.isInitial})`);
+
+    v4InferenceBusy = true;
+    v4LastInferenceTime = now;
+
+    try {
+      const inferenceStart = performance.now();
+
+      // Get mel features for the window
+      let features: { features: Float32Array; T: number; melBins: number } | null = null;
+      if (melClient) {
+        features = await melClient.getFeatures(window.startFrame, window.endFrame);
+      }
+
+      if (!features) {
+        v4InferenceBusy = false;
+        return;
+      }
+
+      // Calculate time offset for absolute timestamps
+      const timeOffset = window.startFrame / 16000;
+
+      // Calculate incremental cache parameters
+      const cursorFrame = windowBuilder.getMatureCursorFrame();
+      const prefixSeconds = cursorFrame > 0 ? (window.startFrame - cursorFrame) / 16000 : 0;
+
+      const result: V4ProcessResult = await workerClient.processV4ChunkWithFeatures({
+        features: features.features,
+        T: features.T,
+        melBins: features.melBins,
+        timeOffset,
+        endTime: window.endFrame / 16000,
+        segmentId: `v4_${Date.now()}`,
+        incrementalCache: prefixSeconds > 0 ? {
+          cacheKey: 'v4-stream',
+          prefixSeconds,
+        } : undefined,
+      });
+
+      const inferenceMs = performance.now() - inferenceStart;
+
+      // Update UI state
+      appStore.setMatureText(result.matureText);
+      appStore.setImmatureText(result.immatureText);
+      appStore.setTranscript(result.fullText);
+      appStore.setPendingText(result.immatureText);
+      appStore.appendV4SentenceEntries(result.matureSentences);
+      appStore.setInferenceLatency(inferenceMs);
+
+      // Update RTF
+      const audioDurationMs = window.durationSeconds * 1000;
+      appStore.setRtf(inferenceMs / audioDurationMs);
+
+      // Advance cursor if merger advanced it
+      if (result.matureCursorTime > windowBuilder.getMatureCursorTime()) {
+        appStore.setMatureCursorTime(result.matureCursorTime);
+        windowBuilder.advanceMatureCursorByTime(result.matureCursorTime);
+        windowBuilder.markSentenceEnd(Math.round(result.matureCursorTime * 16000));
+      }
+
+      // Update stats
+      appStore.setV4MergerStats({
+        sentencesFinalized: result.matureSentenceCount,
+        cursorUpdates: result.stats?.matureCursorUpdates || 0,
+        utterancesProcessed: result.stats?.utterancesProcessed || 0,
+      });
+
+      // Update buffer metrics
+      const ring = audioEngine.getRingBuffer();
+      appStore.setBufferMetrics({
+        fillRatio: ring.getFillCount() / ring.getSize(),
+        latencyMs: (ring.getFillCount() / 16000) * 1000,
+      });
+
+      // Update metrics
+      if (result.metrics) {
+        appStore.setSystemMetrics({
+          throughput: 0,
+          modelConfidence: 0,
+        });
+      }
+    } catch (err: any) {
+      console.error('[v4Tick] Inference error:', err);
+    } finally {
+      v4InferenceBusy = false;
+    }
+  };
+
+  // ---- Cleanup v4 pipeline resources ----
+  const cleanupV4Pipeline = () => {
+    v4TickRunning = false;
+    if (v4TickTimeout) {
+      clearTimeout(v4TickTimeout);
+      v4TickTimeout = undefined;
+    }
+    if (v4AudioChunkUnsubscribe) {
+      v4AudioChunkUnsubscribe();
+      v4AudioChunkUnsubscribe = null;
+    }
+    if (v4MelChunkUnsubscribe) {
+      v4MelChunkUnsubscribe();
+      v4MelChunkUnsubscribe = null;
+    }
+    hybridVAD = null;
+    if (tenVADClient) {
+      tenVADClient.dispose();
+      tenVADClient = null;
+    }
+    if (bufferClient) {
+      bufferClient.dispose();
+      bufferClient = null;
+    }
+    windowBuilder = null;
+    v4InferenceBusy = false;
+    v4LastInferenceTime = 0;
+    v4GlobalSampleOffset = 0;
+  };
+
+  const toggleRecording = async () => {
+    if (isRecording()) {
+      // Update UI immediately so the stop button always takes effect even if cleanup throws
+      visualizationUnsubscribe?.();
+      visualizationUnsubscribe = undefined;
+      appStore.stopRecording();
+      appStore.setAudioLevel(0);
+      appStore.setBarLevels(new Float32Array(0));
+
+      try {
+        audioEngine?.stop();
+
+        if (segmentUnsubscribe) segmentUnsubscribe();
+        if (windowUnsubscribe) windowUnsubscribe();
+        if (melChunkUnsubscribe) melChunkUnsubscribe();
+        cleanupV4Pipeline();
+
+        if (workerClient) {
+          const final = await workerClient.finalize();
+          let text = '';
+          if ('text' in final && typeof final.text === 'string') {
+            text = final.text;
+          } else if ('fullText' in final && typeof final.fullText === 'string') {
+            text = final.fullText;
+          }
+          appStore.setTranscript(text);
+          appStore.setPendingText('');
+        }
+
+        melClient?.reset();
+        audioEngine?.reset();
+      } catch (err) {
+        console.warn('[App] Error during stop recording cleanup:', err);
+      }
+    } else {
+      try {
+        if (!audioEngine) {
+          audioEngine = new AudioEngine({
+            sampleRate: 16000,
+            deviceId: appStore.selectedDeviceId(),
+          });
+          setAudioEngineSignal(audioEngine);
+        } else {
+          audioEngine.updateConfig({ deviceId: appStore.selectedDeviceId() });
+          audioEngine.reset();
+        }
+
+        const mode = appStore.transcriptionMode();
+
+        // v4 mode: Always start audio capture, mel preprocessing, and VAD
+        // Inference only runs when model is ready (checked in v4Tick)
+        if (mode === 'v4-utterance') {
+          // ---- v4: Utterance-based pipeline with BufferWorker + TEN-VAD ----
+
+          // Initialize merger in worker only if model is ready
+          if (isModelReady() && workerClient) {
+            await workerClient.initV4Service({ debug: false });
+          }
+
+          // Initialize mel worker (always needed for preprocessing)
+          if (!melClient) {
+            melClient = new MelWorkerClient();
+            setMelClientSignal(melClient);
+          }
+          try {
+            await melClient.init({ nMels: 128 });
+          } catch (e) {
+            melClient.dispose();
+            melClient = null;
+            setMelClientSignal(null);
+          }
+
+          // Initialize BufferWorker (centralized multi-layer data store)
+          bufferClient = new BufferWorkerClient();
+          const bufferConfig: BufferWorkerConfig = {
+            sampleRate: 16000,
+            layers: {
+              audio: { hopSamples: 1, entryDimension: 1, maxDurationSec: 120 },
+              mel: { hopSamples: 160, entryDimension: 128, maxDurationSec: 120 },
+              energyVad: { hopSamples: 1280, entryDimension: 1, maxDurationSec: 120 },
+              inferenceVad: { hopSamples: 256, entryDimension: 1, maxDurationSec: 120 },
+            },
+          };
+          await bufferClient.init(bufferConfig);
+
+          // Initialize TEN-VAD worker (inference-based VAD)
+          tenVADClient = new TenVADWorkerClient();
+          tenVADClient.onResult((result: TenVADResult) => {
+            if (!bufferClient) return;
+            // Batch-write hop probabilities to inferenceVad (single worker message)
+            if (result.hopCount > 0) {
+              const lastProb = result.probabilities[result.hopCount - 1];
+              if (bufferClient.writeBatchTransfer) {
+                bufferClient.writeBatchTransfer('inferenceVad', result.probabilities, result.globalSampleOffset);
+              } else {
+                bufferClient.writeBatch('inferenceVad', result.probabilities, result.globalSampleOffset);
+              }
+
+              // Update UI at most once per frame with the latest probability
+              scheduleSileroUpdate(lastProb);
+            }
+          });
+          // TEN-VAD init is non-blocking; falls back gracefully if WASM fails
+          const wasmPath = `${import.meta.env.BASE_URL}wasm/`;
+          tenVADClient.init({ hopSize: 256, threshold: 0.5, wasmPath }).catch((err) => {
+            console.warn('[v4] TEN-VAD init failed, using energy-only:', err);
+          });
+
+          // Initialize hybrid VAD for energy-based detection (always runs, fast)
+          hybridVAD = new HybridVAD({
+            sileroThreshold: 0.5,
+            onsetConfirmations: 2,
+            offsetConfirmations: 3,
+            sampleRate: 16000,
+          });
+          // Do NOT init Silero in HybridVAD (TEN-VAD replaces it)
+
+          // NOTE: WindowBuilder is created AFTER audioEngine.start() below,
+          // because start() may re-create the internal RingBuffer.
+
+          // Reset global sample counter
+          v4GlobalSampleOffset = 0;
+
+          // Feed audio chunks to mel worker from the main v4 audio handler below
+          v4MelChunkUnsubscribe = null;
+
+          // Process each audio chunk: energy VAD + write to BufferWorker + forward to TEN-VAD
+          v4AudioChunkUnsubscribe = audioEngine.onAudioChunk((chunk) => {
+            if (!hybridVAD || !bufferClient) return;
+
+            const chunkOffset = v4GlobalSampleOffset;
+            v4GlobalSampleOffset += chunk.length;
+
+            // 1. Run energy VAD (synchronous, fast) and write to BufferWorker
+            const vadResult = hybridVAD.processEnergyOnly(chunk);
+            const energyProb = vadResult.isSpeech ? 0.9 : 0.1;
+            bufferClient.writeScalar('energyVad', energyProb);
+
+            // 2. Forward audio to mel worker (copy, keep chunk for TEN-VAD transfer)
+            melClient?.pushAudioCopy(chunk);
+
+            // 3. Forward audio to TEN-VAD worker for inference-based VAD (transfer, no copy)
+            if (tenVADClient?.isReady()) {
+              tenVADClient.processTransfer(chunk, chunkOffset);
+            }
+
+            // 4. Update VAD state for UI
+            const sileroProbability = tenVADClient?.isReady()
+              ? undefined
+              : (vadResult.sileroProbability || 0);
+            scheduleVadStateUpdate({
+              isSpeech: vadResult.isSpeech,
+              energy: vadResult.energy,
+              snr: vadResult.snr || 0,
+              hybridState: vadResult.state,
+              ...(sileroProbability !== undefined ? { sileroProbability } : {}),
+            });
+          });
+
+          // Start adaptive inference tick loop (reads interval from appStore)
+          // Note: v4Tick internally checks if model is ready before running inference
+          v4TickRunning = true;
+          const scheduleNextTick = () => {
+            if (!v4TickRunning) return;
+            v4TickTimeout = window.setTimeout(async () => {
+              if (!v4TickRunning) return;
+              await v4Tick();
+              scheduleNextTick();
+            }, appStore.v4InferenceIntervalMs());
+          };
+          scheduleNextTick();
+
+        } else if (isModelReady() && workerClient) {
+          // v3 and v2 modes still require model to be ready
+          if (mode === 'v3-streaming') {
+            // ---- v3: Fixed-window token streaming (existing) ----
+            const windowDur = appStore.streamingWindow();
+            const triggerInt = appStore.triggerInterval();
+            const overlapDur = Math.max(1.0, windowDur - triggerInt);
+
+            await workerClient.initV3Service({
+              windowDuration: windowDur,
+              overlapDuration: overlapDur,
+              sampleRate: 16000,
+              frameStride: appStore.frameStride(),
+            });
+
+            if (!melClient) {
+              melClient = new MelWorkerClient();
+              setMelClientSignal(melClient);
+            }
+            try {
+              await melClient.init({ nMels: 128 });
+            } catch (e) {
+              melClient.dispose();
+              melClient = null;
+              setMelClientSignal(null);
+            }
+
+            melChunkUnsubscribe = audioEngine.onAudioChunk((chunk) => {
+              melClient?.pushAudioCopy(chunk);
+            });
+
+            windowUnsubscribe = audioEngine.onWindowChunk(
+              windowDur,
+              overlapDur,
+              triggerInt,
+              async (audio, startTime) => {
+                if (!workerClient) return;
+                const start = performance.now();
+
+                let result;
+                if (melClient) {
+                  const startSample = Math.round(startTime * 16000);
+                  const endSample = startSample + audio.length;
+                  const melFeatures = await melClient.getFeatures(startSample, endSample);
+
+                  if (melFeatures) {
+                    result = await workerClient.processV3ChunkWithFeatures(
+                      melFeatures.features,
+                      melFeatures.T,
+                      melFeatures.melBins,
+                      startTime,
+                      overlapDur,
+                    );
+                  } else {
+                    result = await workerClient.processV3Chunk(audio, startTime);
+                  }
+                } else {
+                  result = await workerClient.processV3Chunk(audio, startTime);
+                }
+
+                const duration = performance.now() - start;
+                const stride = appStore.triggerInterval();
+                appStore.setRtf(duration / (stride * 1000));
+                appStore.setInferenceLatency(duration);
+
+                if (audioEngine) {
+                  const ring = audioEngine.getRingBuffer();
+                  appStore.setBufferMetrics({
+                    fillRatio: ring.getFillCount() / ring.getSize(),
+                    latencyMs: (ring.getFillCount() / 16000) * 1000,
+                  });
+                }
+
+                appStore.setMergeInfo({
+                  lcsLength: result.lcsLength,
+                  anchorValid: result.anchorValid,
+                  chunkCount: result.chunkCount,
+                  anchorTokens: result.anchorTokens
+                });
+              }
+            );
+          } else {
+            // ---- v2: Per-utterance (existing) ----
+            await workerClient.initService({ sampleRate: 16000 });
+            segmentUnsubscribe = audioEngine.onSpeechSegment(async (segment) => {
+              if (workerClient) {
+                const start = Date.now();
+                const samples = audioEngine!.getRingBuffer().read(segment.startFrame, segment.endFrame);
+                const result = await workerClient.transcribeSegment(samples);
+                if (result.text) appStore.appendTranscript(result.text + ' ');
+                appStore.setInferenceLatency(Date.now() - start);
+              }
+            });
+          }
+        }
+
+        await audioEngine.start();
+
+        // Create WindowBuilder AFTER start() so we get the final RingBuffer reference
+        // (AudioEngine.init() re-creates the RingBuffer internally)
+        if (mode === 'v4-utterance') {
+          windowBuilder = new WindowBuilder(
+            audioEngine.getRingBuffer(),
+            null, // No VADRingBuffer; hasSpeech now goes through BufferWorker
+            {
+              sampleRate: 16000,
+              minDurationSec: 3.0,
+              maxDurationSec: 30.0,
+              minInitialDurationSec: 1.5,
+              useVadBoundaries: false, // VAD boundaries now managed by BufferWorker
+              vadSilenceThreshold: 0.3,
+              debug: true, // Enable debug logging for diagnostics
+            }
+          );
+        }
+
+        appStore.startRecording();
+
+        // Use same 30fps tick (onVisualizationUpdate throttled to 33ms).
+        // Bar levels from AnalyserNode (native FFT, low CPU) instead of mel worker.
+        visualizationUnsubscribe = audioEngine.onVisualizationUpdate((_data, metrics) => {
+          appStore.setAudioLevel(metrics.currentEnergy);
+          if (appStore.transcriptionMode() !== 'v4-utterance') {
+            appStore.setIsSpeechDetected(audioEngine?.isSpeechActive() ?? false);
+          }
+          appStore.setBarLevels(audioEngine!.getBarLevels());
+        });
+      } catch (err: any) {
+        appStore.setErrorMessage(err.message);
+      }
+    }
+  };
+
+  const loadSelectedModel = async () => {
+    if (!workerClient) return;
+    if (appStore.modelState() === 'ready') return;
+    if (appStore.modelState() === 'loading') return;
+    setShowContextPanel(true);
+    try {
+      await workerClient.initModel(appStore.selectedModelId());
+    } catch (e) {
+      console.error('Failed to load model:', e);
+      appStore.setModelState('error');
+      appStore.setErrorMessage(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const openPanelForAudio = () => {
+    clearTimeout(panelHoverCloseTimeout);
+    setSettingsPanelSection('audio');
+    setShowContextPanel(true);
+  };
+  const openPanelForModel = () => {
+    clearTimeout(panelHoverCloseTimeout);
+    setSettingsPanelSection('model');
+    setShowContextPanel(true);
+  };
+  const schedulePanelCloseIfHover = () => {
+    panelHoverCloseTimeout = window.setTimeout(() => {
+      if (settingsPanelSection() !== 'full' && appStore.modelState() !== 'loading') {
+        setShowContextPanel(false);
+      }
+    }, 250);
+  };
+  const cancelPanelClose = () => clearTimeout(panelHoverCloseTimeout);
+  const panelMouseLeave = () => {
+    if (settingsPanelSection() !== 'full') schedulePanelCloseIfHover();
+  };
+
+  const handleLocalLoad = async (files: FileList) => {
+    if (!workerClient) return;
+    setShowContextPanel(true);
+    try {
+      await workerClient.initLocalModel(files);
+    } catch (e) {
+      console.error('Failed to load local model:', e);
+    }
+  };
+
+  return (
+    <div class="h-screen flex flex-col overflow-hidden bg-[var(--color-earthy-bg)] selection:bg-[var(--color-earthy-coral)] selection:text-white">
+      <ModelLoadingOverlay
+        isVisible={showModelOverlay()}
+        state={appStore.modelState()}
+        progress={appStore.modelProgress()}
+        message={appStore.modelMessage()}
+        file={appStore.modelFile()}
+        backend={appStore.backend()}
+        selectedModelId={appStore.selectedModelId()}
+        onModelSelect={(id: string) => appStore.setSelectedModelId(id)}
+        onStart={() => loadSelectedModel()}
+        onLocalLoad={handleLocalLoad}
+        onClose={() => setShowModelOverlay(false)}
+      />
+
+      <Header
+        onToggleDebug={() => appStore.setShowDebugPanel(!appStore.showDebugPanel())}
+      />
+
+      <div class="flex-1 flex overflow-hidden relative">
+        <main class="flex-1 overflow-y-auto custom-scrollbar px-4 sm:px-6 lg:px-10 xl:px-14 2xl:px-20 flex flex-col items-center">
+          <div class="w-full max-w-[1680px] py-8 md:py-10 lg:py-12">
+            <TranscriptionDisplay
+              confirmedText={appStore.transcriptionMode() === 'v4-utterance' ? appStore.matureText() : appStore.transcript()}
+              pendingText={appStore.transcriptionMode() === 'v4-utterance' ? appStore.immatureText() : appStore.pendingText()}
+              sentenceEntries={appStore.v4SentenceEntries()}
+              isV4Mode={appStore.transcriptionMode() === 'v4-utterance'}
+              isRecording={isRecording()}
+              lcsLength={appStore.mergeInfo().lcsLength}
+              anchorValid={appStore.mergeInfo().anchorValid}
+              showConfidence={appStore.transcriptionMode() === 'v3-streaming'}
+              class="min-h-[56vh]"
+            />
+          </div>
+        </main>
+      </div>
+
+      {/* Draggable floating control widget */}
+      <div
+        class={widgetPos() !== null ? 'fixed z-30 w-full max-w-2xl px-6 select-none' : 'absolute bottom-8 left-1/2 -translate-x-1/2 z-30 w-full max-w-2xl px-6'}
+        style={widgetPos() ? { left: `${widgetPos()!.x}px`, top: `${widgetPos()!.y}px` } : {}}
+      >
+        <div class="relative">
+          {/* Settings panel: expands up or down depending on bar position vs half screen height */}
+          <div
+            class="absolute left-0 right-0 overflow-hidden transition-[max-height] duration-300 ease-out border border-[var(--color-earthy-sage)]/30 bg-[var(--color-earthy-bg)]/95 backdrop-blur-sm shadow-lg"
+            classList={{
+              'max-h-0': !showContextPanel(),
+              'max-h-[70vh]': showContextPanel(),
+              'bottom-full rounded-t-2xl border-b-0': settingsExpandUp(),
+              'top-full rounded-b-2xl border-t-0': !settingsExpandUp(),
+            }}
+            onMouseEnter={cancelPanelClose}
+            onMouseLeave={panelMouseLeave}
+          >
+            <div class="max-h-[70vh] min-h-0 flex flex-col overflow-y-auto custom-scrollbar">
+              <SettingsContent
+                section={settingsPanelSection()}
+                onClose={() => setShowContextPanel(false)}
+                onLoadModel={() => loadSelectedModel()}
+                onLocalLoad={handleLocalLoad}
+                onOpenDebug={() => appStore.setShowDebugPanel(true)}
+                onDeviceSelect={(id) => {
+                  if (audioEngine) audioEngine.updateConfig({ deviceId: id });
+                }}
+                audioEngine={audioEngineSignal() ?? undefined}
+                expandUp={settingsExpandUp}
+              />
+            </div>
+          </div>
+
+          {/* Control bar: steady, fixed position; never moves when settings open */}
+          <div
+            class="bg-white/90 backdrop-blur-md shadow-lg border border-[var(--color-earthy-sage)]/30 rounded-2xl overflow-hidden"
+            onMouseDown={handleWidgetDragStart}
+            role="presentation"
+          >
+            <div class="p-4 flex items-center justify-between gap-6 cursor-grab active:cursor-grabbing">
+            <div class="flex items-center gap-2 flex-shrink-0">
+              <span class="material-symbols-outlined text-[var(--color-earthy-soft-brown)] text-lg opacity-60" aria-hidden="true">drag_indicator</span>
+              <div class="flex flex-col min-w-[60px]">
+                <span class="text-[10px] uppercase tracking-wider text-[var(--color-earthy-soft-brown)] font-bold">Rec</span>
+                <span class="font-mono text-sm text-[var(--color-earthy-dark-brown)]">{formatDuration(appStore.sessionDuration())}</span>
+              </div>
+            </div>
+            <div class="flex-1 min-w-0 flex flex-col justify-center gap-1">
+              <div class="h-8 flex items-center justify-center gap-1 overflow-hidden opacity-80 abstract-wave">
+                <CompactWaveform audioLevel={appStore.audioLevel()} barLevels={appStore.barLevels()} isRecording={isRecording()} />
+              </div>
+              <Show when={appStore.modelState() === 'loading'}>
+                <div class="flex items-center gap-2 px-1">
+                  <div class="flex-1 h-1.5 rounded-full overflow-hidden bg-[var(--color-earthy-sage)]/20">
+                    <div
+                      class="h-full bg-[var(--color-earthy-muted-green)] rounded-full transition-all duration-300"
+                      style={{ width: `${Math.max(0, Math.min(100, appStore.modelProgress()))}%` }}
+                    />
+                  </div>
+                  <span class="text-[10px] font-mono text-[var(--color-earthy-soft-brown)] tabular-nums">{Math.round(appStore.modelProgress())}%</span>
+                </div>
+              </Show>
+            </div>
+            <div class="flex items-center gap-2 flex-shrink-0">
+              <button
+                type="button"
+                onClick={toggleRecording}
+                onMouseEnter={openPanelForAudio}
+                onMouseLeave={schedulePanelCloseIfHover}
+                class={`w-10 h-10 rounded-full flex items-center justify-center transition-colors border ${isRecording() ? 'bg-[var(--color-earthy-coral)] text-white border-[var(--color-earthy-coral)]' : 'text-[var(--color-earthy-dark-brown)] hover:bg-[var(--color-earthy-bg)] border-transparent hover:border-[var(--color-earthy-sage)]/30'}`}
+                title={isRecording() ? 'Stop recording' : 'Start recording'}
+              >
+                <span class="material-symbols-outlined">mic</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => loadSelectedModel()}
+                onMouseEnter={openPanelForModel}
+                onMouseLeave={schedulePanelCloseIfHover}
+                disabled={appStore.modelState() === 'loading' || appStore.modelState() === 'ready'}
+                class="w-10 h-10 rounded-full flex items-center justify-center text-[var(--color-earthy-dark-brown)] hover:bg-[var(--color-earthy-bg)] transition-colors border border-transparent hover:border-[var(--color-earthy-sage)]/30 disabled:opacity-40 disabled:cursor-not-allowed relative"
+                title={appStore.modelState() === 'ready' ? 'Model loaded' : appStore.modelState() === 'loading' ? 'Loading...' : 'Load model'}
+              >
+                <Show when={appStore.modelState() === 'loading'} fallback={<span class="material-symbols-outlined">power_settings_new</span>}>
+                  <span class="material-symbols-outlined load-btn-spin">progress_activity</span>
+                </Show>
+              </button>
+              <button
+                type="button"
+                onClick={() => { setSettingsPanelSection('full'); setShowContextPanel((v) => !v); }}
+                class={`w-10 h-10 rounded-full flex items-center justify-center transition-colors border ${showContextPanel() ? 'bg-[var(--color-earthy-sage)]/30 text-[var(--color-earthy-muted-green)] border-[var(--color-earthy-sage)]/50' : 'text-[var(--color-earthy-dark-brown)] hover:bg-[var(--color-earthy-bg)] border-transparent hover:border-[var(--color-earthy-sage)]/30'}`}
+                title="Settings"
+              >
+                <span class="material-symbols-outlined">tune</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => isRecording() && toggleRecording()}
+                disabled={!isRecording()}
+                class="w-10 h-10 rounded-full flex items-center justify-center text-[var(--color-earthy-dark-brown)] hover:bg-[var(--color-earthy-bg)] transition-colors border border-transparent hover:border-[var(--color-earthy-sage)]/30 disabled:opacity-40 disabled:cursor-not-allowed"
+                title="Pause"
+              >
+                <span class="material-symbols-outlined">pause</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => appStore.copyTranscript()}
+                class="w-10 h-10 rounded-full flex items-center justify-center text-[var(--color-earthy-dark-brown)] hover:bg-[var(--color-earthy-bg)] transition-colors border border-transparent hover:border-[var(--color-earthy-sage)]/30"
+                title="Copy transcript"
+              >
+                <span class="material-symbols-outlined">content_copy</span>
+              </button>
+            </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Foldable debug panel (bottom drawer) */}
+      <Show when={appStore.showDebugPanel()}>
+        <div class="absolute bottom-0 left-0 right-0 z-20 flex flex-col bg-[var(--color-earthy-bg)] border-t border-[var(--color-earthy-sage)]/30 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] max-h-[70vh] overflow-hidden transition-all">
+          <DebugPanel
+            audioEngine={audioEngineSignal() ?? undefined}
+            melClient={melClientSignal() ?? undefined}
+          />
+        </div>
+      </Show>
+    </div>
+  );
+};
+
+export default App;
+

src/assets/css/material-icons.css

@@ -0,0 +1,34 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url('/fonts/material-icons/material-icons.woff2') format('woff2'),
+       url('/fonts/material-icons/material-icons.woff') format('woff');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+} 

src/components/BufferVisualizer.tsx

@@ -0,0 +1,511 @@
+/**
+"""""""""" * Keet - Buffer Visualizer Component
+ * Canvas-based real-time audio waveform visualization.
+ * Ported from legacy UI project (Svelte) to SolidJS.
+ */
+
+import { Component, createSignal, onMount, onCleanup, createEffect } from 'solid-js';
+import type { AudioEngine, AudioMetrics } from '../lib/audio';
+
+interface BufferVisualizerProps {
+  /** AudioEngine instance for subscribing to visualization updates */
+  audioEngine?: AudioEngine;
+  /** Height of the canvas in pixels (default: 80) */
+  height?: number;
+  /** Whether to show SNR threshold line (default: true) */
+  showThreshold?: boolean;
+  /** SNR threshold in dB for visualization (default: 6.0) */
+  snrThreshold?: number;
+  /** Whether to show time markers (default: true) */
+  showTimeMarkers?: boolean;
+  /** Whether the visualizer is visible (optimization - reduces frame rate when hidden) */
+  visible?: boolean;
+}
+
+export const BufferVisualizer: Component<BufferVisualizerProps> = (props) => {
+  // Canvas element ref
+  let canvasRef: HTMLCanvasElement | undefined;
+  let ctx: CanvasRenderingContext2D | null = null;
+  let parentRef: HTMLDivElement | undefined;
+
+  // State
+  const [isDarkSignal, setIsDarkSignal] = createSignal(false);
+  const [canvasWidth, setCanvasWidth] = createSignal(0);
+  const [waveformData, setWaveformData] = createSignal<Float32Array>(new Float32Array(0));
+  const [metrics, setMetrics] = createSignal<AudioMetrics>({
+    currentEnergy: 0,
+    averageEnergy: 0,
+    peakEnergy: 0,
+    noiseFloor: 0.01,
+    currentSNR: 0,
+    isSpeaking: false,
+  });
+  const [segments, setSegments] = createSignal<Array<{ startTime: number; endTime: number; isProcessed: boolean }>>([]);
+  // Track the end time of the current waveform snapshot for strict synchronization
+  const [bufferEndTime, setBufferEndTime] = createSignal(0);
+
+  const height = () => props.height ?? 80;
+  const showThreshold = () => props.showThreshold ?? true;
+  const snrThreshold = () => props.snrThreshold ?? 6.0;
+  const showTimeMarkers = () => props.showTimeMarkers ?? true;
+  const visible = () => props.visible ?? true;
+
+  let animationFrameId: number | undefined;
+  let resizeObserver: ResizeObserver | null = null;
+  let needsRedraw = true;
+  let lastDrawTime = 0;
+  const DRAW_INTERVAL_MS = 33;
+
+  // Draw function
+  const draw = () => {
+    if (!ctx || !canvasRef) return;
+
+    const width = canvasRef.width;
+    const canvasHeight = canvasRef.height;
+    const centerY = canvasHeight / 2;
+    const data = waveformData();
+    const currentMetrics = metrics();
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, canvasHeight);
+
+    // Optimized theme detection (using signal instead of DOM access)
+    const isDarkMode = isDarkSignal();
+
+    // Colors (Mechanical Etched Palette) - Cached values
+    const bgColor = isDarkMode ? '#1e293b' : '#f1f5f9';
+    const highlightColor = isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(255, 255, 255, 0.8)';
+    const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.1)';
+    const etchColor = isDarkMode ? '#334155' : '#cbd5e1';
+    const signalActiveColor = '#3b82f6';
+
+    // Background
+    if (ctx) {
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, canvasHeight);
+
+      // Baseline (Etched indent)
+      ctx.beginPath();
+      ctx.strokeStyle = shadowColor;
+      ctx.lineWidth = 0.5;
+      ctx.moveTo(0, centerY);
+      ctx.lineTo(width, centerY);
+      ctx.stroke();
+
+      // Draw time markers at the top
+      if (showTimeMarkers() && props.audioEngine) {
+        // Use the new textColor and tickColor based on the etched palette
+        const textColor = isDarkMode ? '#94a3b8' : '#94a3b8';
+        const tickColor = isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)';
+        drawTimeMarkers(width, canvasHeight, textColor, tickColor);
+      }
+
+      // Draw segment boundaries (before waveform so they appear behind)
+      if (props.audioEngine) {
+        drawSegments(width, canvasHeight, isDarkMode);
+      }
+
+      // Draw waveform using legacy UI project logic (Etched Mercury Style)
+      if (data.length >= 2) {
+        // Data is already subsampled to ~400 points (min, max pairs)
+        const numPoints = data.length / 2;
+        const step = width / numPoints; // Use simple step as points ~ width/2
+
+        // Helper to draw the full waveform path
+        // Optimized Waveform Path (Consolidated passes)
+        ctx.lineCap = 'round';
+
+        // Helper to draw the full waveform path
+        const drawPath = (offsetX: number, offsetY: number) => {
+          if (!ctx) return;
+          ctx.beginPath();
+          for (let i = 0; i < numPoints; i++) {
+            const x = i * step + offsetX;
+            // Ensure min/max have at least 1px difference for visibility even when silent
+            let minVal = data[i * 2];
+            let maxVal = data[i * 2 + 1];
+
+            // Scaled values
+            let yMin = centerY - (minVal * centerY * 0.9) + offsetY;
+            let yMax = centerY - (maxVal * centerY * 0.9) + offsetY;
+
+            // Ensure tiny signals are visible (min 1px height)
+            if (Math.abs(yMax - yMin) < 1) {
+              yMin = centerY - 0.5 + offsetY;
+              yMax = centerY + 0.5 + offsetY;
+            }
+
+            ctx.moveTo(x, yMin);
+            ctx.lineTo(x, yMax);
+          }
+          ctx.stroke();
+        };
+
+        // 1. Highlight Pass (Sharp top-left edge)
+        ctx.strokeStyle = highlightColor;
+        ctx.lineWidth = 1.0;
+        drawPath(-0.5, -0.5);
+
+        // 2. Shadow Pass (Depressed groove)
+        ctx.strokeStyle = shadowColor;
+        ctx.lineWidth = 1.2;
+        drawPath(0.5, 0.5);
+
+        // 3. Main Etch Pass (Base material) - Slate color for contrast
+        ctx.strokeStyle = etchColor;
+        ctx.lineWidth = 1.0;
+        drawPath(0, 0);
+
+        // 4. Active signal glow
+        if (currentMetrics.isSpeaking) {
+          ctx.globalAlpha = 0.5;
+          ctx.shadowBlur = 4;
+          ctx.shadowColor = signalActiveColor;
+          ctx.strokeStyle = signalActiveColor;
+          ctx.lineWidth = 1.0;
+          drawPath(0, 0);
+          ctx.shadowBlur = 0;
+          ctx.globalAlpha = 1.0;
+        }
+      }
+
+      // Draw adaptive threshold (Etched dashes)
+      if (showThreshold() && currentMetrics.noiseFloor > 0) {
+        const snrRatio = Math.pow(10, snrThreshold() / 10);
+        const adaptiveThreshold = currentMetrics.noiseFloor * snrRatio;
+
+        const drawThresholdLine = (offsetY: number, color: string) => {
+          if (!ctx) return;
+          ctx.beginPath();
+          ctx.strokeStyle = color;
+          ctx.lineWidth = 1;
+          ctx.setLineDash([2, 4]);
+          const adaptiveYPos = centerY - adaptiveThreshold * centerY + offsetY;
+          ctx.moveTo(0, adaptiveYPos); ctx.lineTo(width, adaptiveYPos);
+          const adaptiveYNeg = centerY + adaptiveThreshold * centerY + offsetY;
+          ctx.moveTo(0, adaptiveYNeg); ctx.lineTo(width, adaptiveYNeg);
+          ctx.stroke();
+        };
+
+        drawThresholdLine(1, highlightColor);
+        drawThresholdLine(0, shadowColor);
+        ctx.setLineDash([]);
+
+        // Label (Etched text)
+        ctx.fillStyle = isDarkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.2)';
+        ctx.font = '900 9px "JetBrains Mono", monospace';
+        const labelY = centerY - adaptiveThreshold * centerY - 8;
+        ctx.fillText(`THRSH: ${snrThreshold().toFixed(1)}dB`, 10, labelY);
+      }
+
+      // Draw noise floor level (retained original style for clarity)
+      if (currentMetrics.noiseFloor > 0) {
+        const nfColor = isDarkMode ? 'rgba(74, 222, 128, 0.1)' : 'rgba(34, 197, 94, 0.1)';
+        const noiseFloorY = centerY - currentMetrics.noiseFloor * centerY;
+        const noiseFloorYNeg = centerY + currentMetrics.noiseFloor * centerY;
+
+        ctx.beginPath();
+        ctx.strokeStyle = nfColor;
+        ctx.lineWidth = 1;
+        ctx.moveTo(0, noiseFloorY);
+        ctx.lineTo(width, noiseFloorY);
+        ctx.moveTo(0, noiseFloorYNeg);
+        ctx.lineTo(width, noiseFloorYNeg);
+        ctx.stroke();
+      }
+
+      // Draw speaking indicator (Neumorphic dot)
+      if (currentMetrics.isSpeaking) {
+        const speakingColor = '#22c55e';
+        const indicatorX = width - 60;
+        const indicatorY = 25;
+        const radius = 6;
+
+        // Glow effect
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = speakingColor;
+
+        ctx.beginPath();
+        ctx.arc(indicatorX, indicatorY, radius, 0, Math.PI * 2);
+        ctx.fillStyle = speakingColor;
+        ctx.fill();
+
+        ctx.shadowBlur = 0;
+
+        // Pulse ring
+        const time = performance.now() / 1000;
+        const rippleRadius = radius + (time % 1) * 10;
+        const rippleOpacity = 1 - (time % 1);
+
+        ctx.beginPath();
+        ctx.arc(indicatorX, indicatorY, rippleRadius, 0, Math.PI * 2);
+        ctx.strokeStyle = `rgba(34, 197, 94, ${rippleOpacity})`;
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      }
+
+      // SNR meter on the right side - Etched mechanical gauge
+      if (currentMetrics.currentSNR > 0) {
+        const meterPadding = 15;
+        const meterWidth = 6;
+        const meterX = width - 20;
+        const meterHeight = canvasHeight - (meterPadding * 2);
+
+        // Meter Housing (Inset)
+        ctx.fillStyle = shadowColor;
+        ctx.beginPath();
+        ctx.roundRect(meterX, meterPadding, meterWidth, meterHeight, 3);
+        ctx.fill();
+
+        ctx.strokeStyle = highlightColor;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+
+        // Gauge Level
+        const maxSNR = 60;
+        const cappedSNR = Math.min(maxSNR, currentMetrics.currentSNR);
+        const fillHeight = (cappedSNR / maxSNR) * meterHeight;
+        const fillY = (meterPadding + meterHeight) - fillHeight;
+
+        // Glow for the active portion
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = currentMetrics.currentSNR >= snrThreshold() ? 'rgba(34, 197, 94, 0.4)' : 'rgba(96, 165, 250, 0.4)';
+
+        ctx.fillStyle = currentMetrics.currentSNR >= snrThreshold() ? '#22c55e' : signalActiveColor;
+        ctx.beginPath();
+        ctx.roundRect(meterX, fillY, meterWidth, fillHeight, 3);
+        ctx.fill();
+
+        ctx.shadowBlur = 0;
+
+        // Threshold marker notched in
+        const thresholdMarkerY = (meterPadding + meterHeight) - (Math.min(maxSNR, snrThreshold()) / maxSNR * meterHeight);
+        ctx.beginPath();
+        ctx.strokeStyle = '#ef4444';
+        ctx.lineWidth = 2;
+        ctx.moveTo(meterX - 4, thresholdMarkerY);
+        ctx.lineTo(meterX + meterWidth + 4, thresholdMarkerY);
+        ctx.stroke();
+
+        // Digital Readout
+        ctx.fillStyle = isDarkMode ? '#f8fafc' : '#1e293b';
+        ctx.font = '900 10px "JetBrains Mono", monospace';
+        ctx.textAlign = 'right';
+        ctx.fillText(`${currentMetrics.currentSNR.toFixed(0)}`, meterX - 8, thresholdMarkerY + 4);
+        ctx.textAlign = 'left';
+      }
+    }
+  };
+
+  // Draw time markers
+  const drawTimeMarkers = (width: number, canvasHeight: number, textColor: string, tickColor: string) => {
+    if (!ctx || !props.audioEngine) return;
+
+    const bufferDuration = props.audioEngine.getVisualizationDuration();
+    const currentTime = bufferEndTime(); // Use synchronized end time of buffer
+    const windowStart = currentTime - bufferDuration;
+
+    ctx.fillStyle = textColor;
+    ctx.font = '10px system-ui, sans-serif';
+
+    const markerInterval = 5; // Every 5 seconds
+    const firstMarkerTime = Math.ceil(windowStart / markerInterval) * markerInterval;
+
+    for (let time = firstMarkerTime; time <= currentTime; time += markerInterval) {
+      const x = ((time - windowStart) / bufferDuration) * width;
+
+      // Draw tick mark
+      ctx.beginPath();
+      ctx.strokeStyle = tickColor;
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, 15);
+      ctx.stroke();
+
+      // Draw time label
+      ctx.fillText(`${time}s`, x + 2, 12);
+    }
+  };
+
+  // Draw segment boundaries
+  const drawSegments = (width: number, canvasHeight: number, isDarkMode: boolean) => {
+    const context = ctx;
+    if (!context || !props.audioEngine) return;
+
+    const bufferDuration = props.audioEngine.getVisualizationDuration();
+    const currentTime = bufferEndTime(); // Use synchronized end time of buffer
+    const windowStart = currentTime - bufferDuration;
+    const segmentList = segments();
+
+    // Colors for segments
+    const pendingColor = isDarkMode ? 'rgba(250, 204, 21, 0.15)' : 'rgba(234, 179, 8, 0.15)';
+    const processedColor = isDarkMode ? 'rgba(34, 197, 94, 0.15)' : 'rgba(22, 163, 74, 0.15)';
+    const pendingBorderColor = isDarkMode ? 'rgba(250, 204, 21, 0.5)' : 'rgba(234, 179, 8, 0.5)';
+    const processedBorderColor = isDarkMode ? 'rgba(34, 197, 94, 0.5)' : 'rgba(22, 163, 74, 0.5)';
+
+    // Log segment count for debugging
+    // console.log('Drawing segments:', segmentList.length);
+
+    segmentList.forEach(segment => {
+      // Calculate relative position in visualization window
+      const relativeStart = segment.startTime - windowStart;
+      const relativeEnd = segment.endTime - windowStart;
+
+      // Only draw if segment is within visible window
+      if (relativeEnd > 0 && relativeStart < bufferDuration) {
+        // Pixel-snap boundaries to prevent anti-aliasing jitter/widening
+        const startX = Math.floor(Math.max(0, (relativeStart / bufferDuration)) * width);
+        const endX = Math.ceil(Math.min(1, (relativeEnd / bufferDuration)) * width);
+
+        // Fill segment area - increased opacity for visibility
+        context.fillStyle = segment.isProcessed ?
+          (isDarkMode ? 'rgba(34, 197, 94, 0.3)' : 'rgba(22, 163, 74, 0.3)') :
+          (isDarkMode ? 'rgba(250, 204, 21, 0.3)' : 'rgba(234, 179, 8, 0.3)');
+
+        context.fillRect(startX, 0, endX - startX, canvasHeight);
+
+        // Draw segment boundaries (snap to pixel + 0.5 for sharp 1px lines)
+        context.strokeStyle = segment.isProcessed ? processedBorderColor : pendingBorderColor;
+        context.lineWidth = 1;
+        context.beginPath();
+        context.moveTo(startX + 0.5, 0);
+        context.lineTo(startX + 0.5, canvasHeight);
+        context.moveTo(endX - 0.5, 0);
+        context.lineTo(endX - 0.5, canvasHeight);
+        context.stroke();
+      }
+    });
+  };
+
+  // Animation loop
+  const drawLoop = () => {
+    if (!ctx || !canvasRef || canvasRef.width === 0) {
+      if (visible()) {
+        animationFrameId = requestAnimationFrame(drawLoop);
+      } else {
+        animationFrameId = window.setTimeout(drawLoop, 100) as unknown as number;
+      }
+      return;
+    }
+
+    if (visible()) {
+      const now = performance.now();
+      if (needsRedraw && now - lastDrawTime >= DRAW_INTERVAL_MS) {
+        lastDrawTime = now;
+        needsRedraw = false;
+        draw();
+      }
+      animationFrameId = requestAnimationFrame(drawLoop);
+    } else {
+      // When not visible, check less frequently to save CPU
+      animationFrameId = window.setTimeout(drawLoop, 100) as unknown as number;
+    }
+  };
+
+  // Resize handler
+  const handleResize = () => {
+    if (canvasRef && parentRef) {
+      const newWidth = parentRef.clientWidth;
+      if (newWidth > 0 && newWidth !== canvasWidth()) {
+        canvasRef.width = newWidth;
+        canvasRef.height = height();
+        setCanvasWidth(newWidth);
+
+        // Refetch visualization data for new width
+        if (props.audioEngine && visible()) {
+          setWaveformData(props.audioEngine.getVisualizationData(newWidth));
+          needsRedraw = true;
+          // Note: can't update bufferEndTime here easily without calling another method on engine,
+          // but next update loop will catch it.
+        }
+      }
+    }
+  };
+
+  // Subscribe to audio engine updates
+  createEffect(() => {
+    const engine = props.audioEngine;
+    if (engine && visible()) {
+      // Initial data fetch
+      if (canvasWidth() > 0) {
+        setWaveformData(engine.getVisualizationData(canvasWidth()));
+        setBufferEndTime(engine.getCurrentTime());
+      }
+
+      // Subscribe to updates
+      const sub = engine.onVisualizationUpdate((data, newMetrics, endTime) => {
+        if (visible()) {
+          setWaveformData(data);
+          setMetrics(newMetrics);
+          setBufferEndTime(endTime);
+
+          // Fetch segments for visualization
+          setSegments(engine.getSegmentsForVisualization());
+          needsRedraw = true;
+        } else {
+          // Still update metrics even when not visible
+          setMetrics(newMetrics);
+        }
+      });
+
+      onCleanup(() => sub());
+    }
+  });
+
+  // Mark for redraw when visibility toggles
+  createEffect(() => {
+    if (visible()) {
+      needsRedraw = true;
+    }
+  });
+
+  onMount(() => {
+    if (canvasRef) {
+      ctx = canvasRef.getContext('2d');
+    }
+
+    // Setup dark mode observer
+    setIsDarkSignal(document.documentElement.classList.contains('dark'));
+    const themeObserver = new MutationObserver(() => {
+      setIsDarkSignal(document.documentElement.classList.contains('dark'));
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    onCleanup(() => themeObserver.disconnect());
+
+    // Setup resize observer
+    handleResize();
+    resizeObserver = new ResizeObserver(handleResize);
+    if (parentRef) {
+      resizeObserver.observe(parentRef);
+    }
+
+    // Start animation loop
+    animationFrameId = requestAnimationFrame(drawLoop);
+  });
+
+  onCleanup(() => {
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+      clearTimeout(animationFrameId);
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+  });
+
+  return (
+    <div ref={parentRef} class="w-full relative" style={{ height: `${height()}px` }}>
+      <canvas
+        ref={canvasRef}
+        class="w-full h-full block"
+        style={{ 'image-rendering': 'auto' }}
+        aria-label="Audio waveform visualization"
+      />
+    </div>
+  );
+};
+
+export default BufferVisualizer;

src/components/ContextPanel.tsx

@@ -0,0 +1,125 @@
+import { Component, For, Show, createEffect, onCleanup } from 'solid-js';
+import { appStore } from '../stores/appStore';
+import { getModelDisplayName, MODELS } from './ModelLoadingOverlay';
+
+interface ContextPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoadModel: () => void;
+  onOpenDebug: () => void;
+  onDeviceSelect?: (id: string) => void;
+}
+
+export const ContextPanel: Component<ContextPanelProps> = (props) => {
+  createEffect(() => {
+    if (!props.isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        props.onClose();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    onCleanup(() => document.removeEventListener('keydown', handler));
+  });
+
+  return (
+    <Show when={props.isOpen}>
+      <div
+        class="fixed inset-0 z-40 flex items-center justify-center bg-[var(--color-earthy-dark-brown)]/30 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Context and settings"
+        onClick={(e) => e.target === e.currentTarget && props.onClose()}
+      >
+        <div
+          class="w-full max-w-md mx-4 bg-[var(--color-earthy-bg)] rounded-2xl border border-[var(--color-earthy-sage)] shadow-xl overflow-hidden"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div class="px-6 py-4 border-b border-[var(--color-earthy-sage)]/30 flex items-center justify-between">
+            <h2 class="text-lg font-semibold tracking-tight text-[var(--color-earthy-dark-brown)]">Context</h2>
+            <button
+              type="button"
+              onClick={props.onClose}
+              class="p-2 rounded-full text-[var(--color-earthy-muted-green)] hover:bg-[var(--color-earthy-sage)]/30 transition-colors"
+              aria-label="Close"
+            >
+              <span class="material-symbols-outlined text-xl">close</span>
+            </button>
+          </div>
+
+          <div class="p-6 space-y-6">
+            <section>
+              <h3 class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-3">Model</h3>
+              <div class="flex flex-col gap-2">
+                <select
+                  class="w-full text-sm bg-white border border-[var(--color-earthy-sage)] rounded-xl px-3 py-2 text-[var(--color-earthy-dark-brown)] focus:outline-none focus:ring-2 focus:ring-[var(--color-earthy-coral)]/30"
+                  value={appStore.selectedModelId()}
+                  onInput={(e) => appStore.setSelectedModelId((e.target as HTMLSelectElement).value)}
+                  disabled={appStore.modelState() === 'loading'}
+                >
+                  <For each={MODELS}>
+                    {(m) => <option value={m.id}>{m.name}</option>}
+                  </For>
+                </select>
+                <p class="text-xs text-[var(--color-earthy-soft-brown)]">
+                  {appStore.modelState() === 'ready' ? getModelDisplayName(appStore.selectedModelId()) : appStore.modelState()}
+                </p>
+                <button
+                  type="button"
+                  onClick={props.onLoadModel}
+                  disabled={appStore.modelState() === 'ready' || appStore.modelState() === 'loading'}
+                  class="flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-earthy-sage)] text-[var(--color-earthy-muted-green)] hover:bg-[var(--color-earthy-muted-green)] hover:text-white transition-all text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <span class="material-symbols-outlined text-lg">power_settings_new</span>
+                  {appStore.modelState() === 'ready' ? 'Model loaded' : appStore.modelState() === 'loading' ? 'Loading...' : 'Load model'}
+                </button>
+              </div>
+            </section>
+
+            <section>
+              <h3 class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-3">Audio input</h3>
+              <select
+                class="w-full text-sm bg-white border border-[var(--color-earthy-sage)] rounded-xl px-3 py-2 text-[var(--color-earthy-dark-brown)] focus:outline-none focus:ring-2 focus:ring-[var(--color-earthy-coral)]/30"
+                value={appStore.selectedDeviceId()}
+                onInput={(e) => {
+                  const id = (e.target as HTMLSelectElement).value;
+                  appStore.setSelectedDeviceId(id);
+                  props.onDeviceSelect?.(id);
+                }}
+              >
+                <For each={appStore.availableDevices()}>
+                  {(device) => (
+                    <option value={device.deviceId}>
+                      {device.label || `Device ${device.deviceId.slice(0, 8)}`}
+                    </option>
+                  )}
+                </For>
+              </select>
+            </section>
+
+            <section>
+              <h3 class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-2">Backend</h3>
+              <p class="text-sm text-[var(--color-earthy-dark-brown)] font-medium">{appStore.backend().toUpperCase()}</p>
+            </section>
+
+            <div class="pt-2 border-t border-[var(--color-earthy-sage)]/30 flex items-center justify-between">
+              <span class="text-xs text-[var(--color-earthy-soft-brown)]">Developer</span>
+              <button
+                type="button"
+                onClick={() => {
+                  props.onOpenDebug();
+                  props.onClose();
+                }}
+                class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[var(--color-earthy-muted-green)] hover:bg-[var(--color-earthy-sage)]/30 transition-colors"
+              >
+                <span class="material-symbols-outlined text-base">bug_report</span>
+                Open Debug panel
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+};

src/components/DebugPanel.tsx

@@ -0,0 +1,397 @@
+import { Component, createMemo, For, Show, createSignal, onCleanup, createEffect } from 'solid-js';
+import { appStore, type TranscriptionMode } from '../stores/appStore';
+import type { AudioEngine } from '../lib/audio/types';
+import type { MelWorkerClient } from '../lib/audio/MelWorkerClient';
+import { LayeredBufferVisualizer } from './LayeredBufferVisualizer';
+
+interface DebugPanelProps {
+  audioEngine?: AudioEngine;
+  melClient?: MelWorkerClient;
+}
+
+const MODES: { id: TranscriptionMode; label: string; short: string }[] = [
+  { id: 'v4-utterance', label: 'Utterance (v4)', short: 'v4' },
+  { id: 'v3-streaming', label: 'Streaming (v3)', short: 'v3' },
+  { id: 'v2-utterance', label: 'Legacy (v2)', short: 'v2' },
+];
+
+export const DebugPanel: Component<DebugPanelProps> = (props) => {
+  const isRecording = () => appStore.recordingState() === 'recording';
+  const isV4 = () => appStore.transcriptionMode() === 'v4-utterance';
+  const isV3 = () => appStore.transcriptionMode() === 'v3-streaming';
+
+  const [height, setHeight] = createSignal(260);
+  const [isResizing, setIsResizing] = createSignal(false);
+
+  let startY = 0;
+  let startHeight = 0;
+  let scrollContainer: HTMLDivElement | undefined;
+
+  // Auto-scroll to bottom of finalized sentences
+  createEffect(() => {
+    appStore.matureText(); // Track dependency
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  });
+
+  const handleMouseDown = (e: MouseEvent) => {
+    setIsResizing(true);
+    startY = e.clientY;
+    startHeight = height();
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isResizing()) return;
+    const delta = startY - e.clientY;
+    const newHeight = Math.min(Math.max(startHeight + delta, 150), 600);
+    setHeight(newHeight);
+  };
+
+  const handleMouseUp = () => {
+    setIsResizing(false);
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  onCleanup(() => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  });
+
+  const rtfColor = createMemo(() => {
+    const rtfx = appStore.rtfxAverage();
+    if (rtfx === 0) return 'text-[var(--color-earthy-soft-brown)]';
+    if (rtfx >= 2) return 'text-[var(--color-earthy-muted-green)] font-bold';
+    if (rtfx >= 1) return 'text-[var(--color-earthy-coral)] font-bold';
+    return 'text-[var(--color-earthy-coral)] font-bold';
+  });
+
+  return (
+    <div
+      class="bg-[var(--color-earthy-bg)] border-t border-[var(--color-earthy-sage)] text-[10px] font-mono text-[var(--color-earthy-dark-brown)] flex overflow-hidden shrink-0 transition-colors duration-300 selection:bg-[var(--color-earthy-coral)]/20 selection:text-[var(--color-earthy-coral)] z-20 relative"
+      style={{ height: `${height()}px` }}
+    >
+      {/* Resize Handle */}
+      <div
+        class="absolute top-0 left-0 w-full h-1 cursor-ns-resize z-50 hover:bg-[var(--color-earthy-muted-green)]/50 transition-colors bg-transparent"
+        onMouseDown={handleMouseDown}
+      />
+
+      {/* ---- Column 1: System & Signal (merged indicators) ---- */}
+      <div class="w-60 flex flex-col p-3 gap-2.5 border-r border-[var(--color-earthy-sage)] bg-[var(--color-earthy-sage)]/10 overflow-y-auto">
+        <div class="flex items-center justify-between pb-2 border-b border-[var(--color-earthy-sage)]">
+          <span class="font-bold tracking-wider uppercase text-[var(--color-earthy-soft-brown)]">System & Signal</span>
+          <div class="flex items-center gap-2">
+            <span class="font-bold text-[var(--color-earthy-soft-brown)] uppercase text-[9px]">{appStore.backend()}</span>
+            <div class={`w-2 h-2 rounded-full border border-[var(--color-earthy-bg)] shadow-sm transition-all duration-300 ${isRecording() ? 'bg-[var(--color-earthy-coral)] animate-pulse' : 'bg-[var(--color-earthy-sage)]'}`} />
+            <span class={`font-bold text-white bg-[var(--color-earthy-coral)] px-1.5 py-px rounded text-[9px] transition-opacity duration-100 ${appStore.isSpeechDetected() ? 'opacity-100 animate-pulse' : 'opacity-0'}`}>VAD</span>
+          </div>
+        </div>
+
+        <div class="space-y-1.5">
+          <span class="font-bold text-[9px] text-[var(--color-earthy-soft-brown)] uppercase tracking-wider">Mode</span>
+          <div class="flex gap-1">
+            <For each={MODES}>
+              {(mode) => (
+                <button
+                  class={`flex-1 px-1 py-1 rounded text-[9px] font-bold uppercase tracking-wide border transition-all ${appStore.transcriptionMode() === mode.id
+                    ? 'bg-[var(--color-earthy-muted-green)] text-white border-[var(--color-earthy-muted-green)] shadow-sm'
+                    : 'bg-[var(--color-earthy-bg)] text-[var(--color-earthy-soft-brown)] border-[var(--color-earthy-sage)] hover:border-[var(--color-earthy-soft-brown)] hover:bg-[var(--color-earthy-sage)]/20'
+                    } ${isRecording() ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                  onClick={() => {
+                    if (!isRecording()) {
+                      appStore.setTranscriptionMode(mode.id);
+                    }
+                  }}
+                  disabled={isRecording()}
+                  title={isRecording() ? 'Stop recording to change mode' : mode.label}
+                >
+                  {mode.short}
+                </button>
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-1.5">
+          <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 flex flex-col items-center justify-center">
+            <span class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-tight text-[8px] mb-0.5">RTFx</span>
+            <span class={`text-xs ${rtfColor()}`}>
+              {appStore.rtfxAverage() > 0 ? Math.round(appStore.rtfxAverage()) : '–'}
+            </span>
+          </div>
+          <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 flex flex-col items-center justify-center">
+            <span class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-tight text-[8px] mb-0.5">Latency</span>
+            <span class="text-xs font-bold text-[var(--color-earthy-dark-brown)]">{Math.round(appStore.inferenceLatencyAverage())}ms</span>
+          </div>
+        </div>
+
+        <div class="space-y-1">
+          <div class="flex justify-between font-bold text-[var(--color-earthy-soft-brown)] uppercase px-0.5 text-[9px]">
+            <span>Buffer</span>
+            <span>{(appStore.bufferMetrics().fillRatio * 100).toFixed(0)}%</span>
+          </div>
+          <div class="h-1.5 w-full bg-[var(--color-earthy-sage)] rounded-full overflow-hidden">
+            <div
+              class="h-full bg-[var(--color-earthy-muted-green)] transition-all duration-300 ease-out rounded-full"
+              style={{ width: `${(appStore.bufferMetrics().fillRatio * 100).toFixed(0)}%` }}
+            />
+          </div>
+        </div>
+
+        <Show when={isV4()}>
+          <div class="space-y-1 pt-1 border-t border-[var(--color-earthy-sage)]">
+            <span class="font-bold text-[8px] text-[var(--color-earthy-soft-brown)] uppercase tracking-wider">Merger</span>
+            <div class="grid grid-cols-3 gap-1">
+              <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded px-1 py-0.5 text-center">
+                <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase">Sent</div>
+                <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.v4MergerStats().sentencesFinalized}</div>
+              </div>
+              <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded px-1 py-0.5 text-center">
+                <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase">Cursor</div>
+                <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.matureCursorTime().toFixed(1)}s</div>
+              </div>
+              <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded px-1 py-0.5 text-center">
+                <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase">Uttr</div>
+                <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.v4MergerStats().utterancesProcessed}</div>
+              </div>
+            </div>
+          </div>
+        </Show>
+
+        <div class="space-y-1">
+          <div class="flex justify-between font-bold text-[var(--color-earthy-soft-brown)] uppercase text-[9px]">
+            <span>RMS Energy</span>
+            <span class={appStore.audioLevel() > appStore.energyThreshold() ? 'text-[var(--color-earthy-muted-green)]' : 'text-[var(--color-earthy-soft-brown)]'}>
+              {(appStore.audioLevel() * 100).toFixed(1)}%
+            </span>
+          </div>
+          <div class="h-2 w-full bg-[var(--color-earthy-sage)] rounded overflow-hidden relative">
+            <div class="absolute top-0 bottom-0 w-px bg-[var(--color-earthy-coral)] z-10" style={{ left: `${appStore.energyThreshold() * 100}%` }} title="Energy threshold"></div>
+            <div
+              class={`h-full transition-all duration-75 ${appStore.isSpeechDetected() ? 'bg-[var(--color-earthy-coral)]' : 'bg-[var(--color-earthy-muted-green)]'}`}
+              style={{ width: `${Math.min(100, appStore.audioLevel() * 100)}%` }}
+            />
+          </div>
+        </div>
+
+        <Show when={isV4()}>
+          <div class={`space-y-1 transition-opacity duration-300 ${appStore.vadState().sileroProbability > 0 ? 'opacity-100' : 'opacity-40'}`}>
+            <div class="flex justify-between font-bold text-[var(--color-earthy-soft-brown)] uppercase text-[9px]">
+              <span>VAD Prob</span>
+              <span class={appStore.vadState().sileroProbability > appStore.sileroThreshold() ? 'text-[var(--color-earthy-coral)] font-bold' : 'text-[var(--color-earthy-soft-brown)]'}>
+                {(appStore.vadState().sileroProbability * 100).toFixed(0)}%
+              </span>
+            </div>
+            <div class="h-2 w-full bg-[var(--color-earthy-sage)] rounded overflow-hidden relative">
+              <div class="absolute top-0 bottom-0 w-px bg-[var(--color-earthy-coral)] z-10" style={{ left: `${appStore.sileroThreshold() * 100}%` }} title="VAD threshold"></div>
+              <div
+                class={`h-full transition-all duration-75 ${appStore.vadState().sileroProbability > appStore.sileroThreshold() ? 'bg-[var(--color-earthy-coral)]' : 'bg-[var(--color-earthy-soft-brown)]'}`}
+                style={{ width: `${Math.min(100, appStore.vadState().sileroProbability * 100)}%` }}
+              />
+            </div>
+          </div>
+          <div class={`flex justify-between items-center bg-[var(--color-earthy-bg)] p-1.5 rounded border border-[var(--color-earthy-sage)] transition-opacity duration-300 ${appStore.vadState().snr !== 0 ? 'opacity-100' : 'opacity-40'}`}>
+            <span class="font-bold text-[9px] text-[var(--color-earthy-soft-brown)] uppercase">SNR</span>
+            <span class={`font-bold text-[10px] ${appStore.vadState().snr > 3 ? 'text-[var(--color-earthy-muted-green)]' : 'text-[var(--color-earthy-soft-brown)]'}`}>
+              {appStore.vadState().snr.toFixed(1)} dB
+            </span>
+          </div>
+        </Show>
+
+        <div class="grid grid-cols-2 gap-1.5 pt-1 border-t border-[var(--color-earthy-sage)]">
+          <Show when={isV3()}>
+            <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 text-center">
+              <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase mb-px">Overlap</div>
+              <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.streamingOverlap().toFixed(1)}s</div>
+            </div>
+            <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 text-center">
+              <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase mb-px">Chunks</div>
+              <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.mergeInfo().chunkCount}</div>
+            </div>
+          </Show>
+          <Show when={isV4()}>
+            <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 text-center">
+              <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase mb-px">State</div>
+              <div class={`text-[10px] font-bold whitespace-nowrap w-24 overflow-hidden text-ellipsis mx-auto ${appStore.vadState().isSpeech ? 'text-[var(--color-earthy-coral)]' : 'text-[var(--color-earthy-soft-brown)]'}`}>
+                {appStore.vadState().hybridState}
+              </div>
+            </div>
+            <div class="bg-[var(--color-earthy-bg)] border border-[var(--color-earthy-sage)] rounded p-1.5 text-center">
+              <div class="text-[7px] font-bold text-[var(--color-earthy-soft-brown)] uppercase mb-px">Windows</div>
+              <div class="text-[10px] font-bold text-[var(--color-earthy-dark-brown)]">{appStore.v4MergerStats().utterancesProcessed}</div>
+            </div>
+          </Show>
+        </div>
+      </div>
+
+      {/* ---- Column 2: Live Context (mode-dependent) ---- */}
+      <div class="flex-1 flex flex-col min-w-0 bg-[var(--color-earthy-bg)]">
+        <div class="px-3 py-2 border-b border-[var(--color-earthy-sage)] bg-[var(--color-earthy-sage)]/10 flex items-center justify-between">
+          <span class="font-bold tracking-wider uppercase text-[var(--color-earthy-soft-brown)]">
+            {isV4() ? 'Transcript State' : isV3() ? 'Stream Sync' : 'Segments'}
+          </span>
+
+          {/* v3: LCS indicators */}
+          <Show when={isV3()}>
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-1.5 px-2 py-0.5 bg-[var(--color-earthy-bg)] rounded border border-[var(--color-earthy-sage)]">
+                <div class={`w-1.5 h-1.5 rounded-full transition-colors duration-300 ${appStore.mergeInfo().anchorValid ? 'bg-[var(--color-earthy-muted-green)]' : 'bg-[var(--color-earthy-coral)]'}`} />
+                <span class="font-bold uppercase text-[var(--color-earthy-soft-brown)] tracking-wide">Lock</span>
+              </div>
+              <div class="flex items-center gap-1.5 px-2 py-0.5 bg-[var(--color-earthy-bg)] rounded border border-[var(--color-earthy-sage)]">
+                <span class="material-symbols-outlined text-[14px] text-[var(--color-earthy-soft-brown)]">join_inner</span>
+                <span class="font-bold uppercase text-[var(--color-earthy-dark-brown)]">Match: <span class="text-[var(--color-earthy-muted-green)]">{appStore.mergeInfo().lcsLength}</span></span>
+              </div>
+            </div>
+          </Show>
+
+          {/* v4: VAD state indicator */}
+          <Show when={isV4()}>
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-1.5 px-2 py-0.5 bg-[var(--color-earthy-bg)] rounded border border-[var(--color-earthy-sage)]">
+                <div class={`w-1.5 h-1.5 rounded-full transition-colors duration-300 ${appStore.vadState().isSpeech ? 'bg-[var(--color-earthy-coral)] animate-pulse' : 'bg-[var(--color-earthy-sage)]'}`} />
+                <div class="w-24 overflow-hidden text-ellipsis whitespace-nowrap">
+                  <span class="font-bold uppercase text-[var(--color-earthy-soft-brown)] tracking-wide">{appStore.vadState().hybridState}</span>
+                </div>
+              </div>
+              <div class={`flex items-center gap-1.5 px-2 py-0.5 bg-[var(--color-earthy-bg)] rounded border border-[var(--color-earthy-sage)] transition-opacity duration-300 ${appStore.vadState().sileroProbability > 0 ? 'opacity-100' : 'opacity-0'}`}>
+                <span class="font-bold uppercase text-[var(--color-earthy-soft-brown)] text-[9px]">VAD</span>
+                <span class={`font-bold ${appStore.vadState().sileroProbability > 0.5 ? 'text-[var(--color-earthy-coral)]' : 'text-[var(--color-earthy-soft-brown)]'}`}>
+                  {(appStore.vadState().sileroProbability * 100).toFixed(0)}%
+                </span>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        <div class="flex-1 overflow-y-auto p-3 space-y-4 custom-scrollbar">
+          {/* v4: Mature + Immature text display */}
+          <Show when={isV4()}>
+            <div class="space-y-3">
+              {/* Mature (finalized) sentences */}
+              <div class="space-y-1.5">
+                <h4 class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-widest flex items-center gap-2 text-[9px]">
+                  <span class="w-1.5 h-1.5 bg-[var(--color-earthy-muted-green)] rounded-full"></span>
+                  Finalized Sentences
+                </h4>
+                <div
+                  ref={scrollContainer}
+                  class="p-2 border border-[var(--color-earthy-sage)] bg-[var(--color-earthy-muted-green)]/10 rounded h-32 overflow-y-auto resize-y"
+                >
+                  <Show when={appStore.matureText()} fallback={
+                    <span class="text-[var(--color-earthy-soft-brown)] italic text-[10px] opacity-50">No finalized sentences yet...</span>
+                  }>
+                    <span class="text-[11px] text-[var(--color-earthy-dark-brown)] leading-relaxed">{appStore.matureText()}</span>
+                  </Show>
+                </div>
+              </div>
+
+              {/* Immature (active) sentence */}
+              <div class="space-y-1.5">
+                <h4 class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-widest flex items-center gap-2 text-[9px]">
+                  <span class="w-1.5 h-1.5 bg-[var(--color-earthy-coral)] rounded-full animate-pulse"></span>
+                  Active Sentence
+                </h4>
+                <div class="p-2 border border-[var(--color-earthy-coral)]/30 bg-[var(--color-earthy-coral)]/10 rounded min-h-[36px]">
+                  <Show when={appStore.immatureText()} fallback={
+                    <span class="text-[var(--color-earthy-soft-brown)] italic text-[10px] opacity-50">Waiting for speech...</span>
+                  }>
+                    <span class="text-[11px] text-[var(--color-earthy-coral)] italic leading-relaxed">{appStore.immatureText()}</span>
+                    <span class="inline-block w-0.5 h-3 bg-[var(--color-earthy-coral)] animate-pulse ml-0.5 align-middle"></span>
+                  </Show>
+                </div>
+              </div>
+
+              {/* Pending sentence info */}
+              <Show when={appStore.v4MergerStats().sentencesFinalized > 0}>
+                <div class="text-[9px] text-[var(--color-earthy-soft-brown)] flex items-center gap-3 pt-1">
+                  <span>{appStore.v4MergerStats().sentencesFinalized} sentences finalized</span>
+                  <span class="text-[var(--color-earthy-sage)]">|</span>
+                  <span>Cursor at {appStore.matureCursorTime().toFixed(2)}s</span>
+                  <span class="text-[var(--color-earthy-sage)]">|</span>
+                  <span>{appStore.v4MergerStats().utterancesProcessed} windows processed</span>
+                </div>
+              </Show>
+            </div>
+          </Show>
+
+          {/* v3: Transition cache + anchors */}
+          <Show when={isV3()}>
+            <div class="space-y-2">
+              <h4 class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-widest flex items-center gap-2 text-[9px]">
+                <span class="w-1 h-1 bg-[var(--color-earthy-sage)] rounded-full"></span>
+                Transition Cache
+              </h4>
+              <div class="p-2 border border-[var(--color-earthy-sage)] bg-[var(--color-earthy-sage)]/10 rounded min-h-[48px] flex flex-wrap gap-1.5 content-start">
+                <For each={appStore.debugTokens().slice(-24)}>
+                  {(token) => (
+                    <div
+                      class="px-1.5 py-0.5 rounded text-[10px] font-medium border transition-colors"
+                      style={{
+                        "background-color": token.confidence > 0.8 ? '#F9F7F2' : 'rgba(249,247,242,0.6)',
+                        "border-color": `rgba(107, 112, 92, ${Math.max(0.2, token.confidence * 0.4)})`,
+                        "color": token.confidence > 0.8 ? '#3D405B' : '#A5A58D',
+                        "opacity": Math.max(0.5, token.confidence)
+                      }}
+                      title={`Confidence: ${(token.confidence * 100).toFixed(0)}%`}
+                    >
+                      {token.text}
+                    </div>
+                  )}
+                </For>
+                <Show when={appStore.pendingText()}>
+                  <span class="px-1.5 py-0.5 text-[var(--color-earthy-coral)] font-medium italic border border-dashed border-[var(--color-earthy-coral)]/30 rounded bg-[var(--color-earthy-coral)]/10">
+                    {appStore.pendingText()}...
+                  </span>
+                </Show>
+                <Show when={!appStore.debugTokens().length && !appStore.pendingText()}>
+                  <span class="text-[var(--color-earthy-soft-brown)] italic text-[10px] w-full text-center py-2 op-50">Waiting for speech input...</span>
+                </Show>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <h4 class="font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-widest flex items-center gap-2 text-[9px]">
+                <span class="w-1 h-1 bg-[var(--color-earthy-muted-green)] rounded-full"></span>
+                Stable Anchors
+              </h4>
+              <div class="flex flex-wrap gap-1">
+                <For each={appStore.mergeInfo().anchorTokens || []}>
+                  {(token) => (
+                    <span class="px-1.5 py-0.5 bg-[var(--color-earthy-muted-green)]/20 text-[var(--color-earthy-muted-green)] border border-[var(--color-earthy-sage)] rounded font-medium">
+                      {token}
+                    </span>
+                  )}
+                </For>
+                <Show when={!appStore.mergeInfo().anchorTokens?.length}>
+                  <span class="text-[var(--color-earthy-soft-brown)] text-[10px] italic px-1 opacity-50">No stable anchors locked yet.</span>
+                </Show>
+              </div>
+            </div>
+          </Show>
+
+          {/* v2: basic info */}
+          <Show when={!isV3() && !isV4()}>
+            <div class="text-[var(--color-earthy-soft-brown)] italic text-center py-4">
+              Legacy per-utterance mode. Segments are transcribed individually.
+            </div>
+          </Show>
+
+          {/* New Layered Buffer Visualizer */}
+          <div class="pt-2 border-t border-[var(--color-earthy-sage)]">
+            <LayeredBufferVisualizer
+              audioEngine={props.audioEngine}
+              melClient={props.melClient}
+              height={120} // Compact height
+              windowDuration={8.0}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/EnergyMeter.tsx

@@ -0,0 +1,103 @@
+import { Component, createSignal, createEffect, onCleanup } from 'solid-js';
+import { AudioEngine } from '../lib/audio/types';
+import { appStore } from '../stores/appStore';
+
+interface EnergyMeterProps {
+    audioEngine?: AudioEngine;
+}
+
+export const EnergyMeter: Component<EnergyMeterProps> = (props) => {
+    const [energy, setEnergy] = createSignal(0);
+    const [metrics, setMetrics] = createSignal({ noiseFloor: 0, snr: 0, threshold: 0.02, snrThreshold: 3.0 });
+    const [isSpeaking, setIsSpeaking] = createSignal(false);
+
+    const updateFromEngine = (engine: AudioEngine) => {
+        const currentE = engine.getCurrentEnergy();
+        const currentM = engine.getSignalMetrics();
+
+        setEnergy(currentE);
+        setMetrics(currentM);
+        // Check if speaking based on SNR threshold (matching VAD logic)
+        setIsSpeaking(currentM.snr > currentM.snrThreshold || currentE > currentM.threshold);
+    };
+
+    createEffect(() => {
+        const engine = props.audioEngine;
+        if (!engine) return;
+
+        updateFromEngine(engine);
+        const unsubscribe = engine.onVisualizationUpdate(() => {
+            updateFromEngine(engine);
+        });
+
+        onCleanup(() => unsubscribe());
+    });
+
+    // Logarithmic scaling for better visualization
+    const toPercent = (val: number) => {
+        // e.g. mapping 0.0001 -> 1.0 to 0% -> 100% log scale
+        // log10(0.0001) = -4, log10(1) = 0
+        const minLog = -4;
+        const maxLog = 0;
+        const v = Math.max(0.0001, val);
+        const log = Math.log10(v);
+        return Math.max(0, Math.min(100, ((log - minLog) / (maxLog - minLog)) * 100));
+    };
+
+    return (
+        <div class="flex flex-col gap-4 p-5 nm-inset rounded-3xl bg-slate-500/5 transition-all">
+            <div class="flex items-center justify-between px-1">
+                <h3 class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none">Signal_Analysis</h3>
+                {/* Speaking indicator - Neumorphic LED style */}
+                <div class={`flex items-center gap-2 px-3 py-1 rounded-full nm-flat transition-all ${isSpeaking()
+                        ? 'text-emerald-500'
+                        : 'text-slate-500 opacity-60'
+                    }`}>
+                    <div class={`w-1.5 h-1.5 rounded-full ${isSpeaking() ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]' : 'bg-slate-400'}`} />
+                    <span class="text-[9px] font-black tracking-widest">
+                        {isSpeaking() ? 'SPEECH' : 'SILENCE'}
+                    </span>
+                </div>
+            </div>
+
+            {/* Energy Bar */}
+            <div class="relative w-full h-3 nm-inset bg-slate-900/10 rounded-full overflow-hidden p-0.5">
+                {/* Energy Fill - color based on speech state */}
+                <div
+                    class={`h-full rounded-full transition-all duration-75 ${isSpeaking() ? 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]' : 'bg-blue-500 shadow-[0_0_12px_rgba(59,130,246,0.5)]'
+                        }`}
+                    style={{ width: `${toPercent(energy())}%` }}
+                />
+
+                {/* Noise Floor Marker */}
+                <div
+                    class="absolute top-0 bottom-0 w-0.5 bg-amber-500 opacity-50 z-20"
+                    style={{ left: `${toPercent(metrics().noiseFloor)}%` }}
+                />
+
+                {/* Energy Threshold Marker */}
+                <div
+                    class="absolute top-0 bottom-0 w-px bg-red-500 z-30"
+                    style={{ left: `${toPercent(metrics().threshold)}%` }}
+                />
+            </div>
+
+            <div class="grid grid-cols-3 items-center px-1">
+                <div class="flex flex-col">
+                    <span class="text-[8px] font-black text-slate-500 uppercase tracking-tighter">Noise</span>
+                    <span class="text-[10px] font-bold text-slate-400">{metrics().noiseFloor.toFixed(5)}</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <span class="text-[8px] font-black text-slate-500 uppercase tracking-tighter">Energy</span>
+                    <span class="text-[10px] font-bold text-slate-400">{energy().toFixed(4)}</span>
+                </div>
+                <div class="flex flex-col items-end">
+                    <span class="text-[8px] font-black text-slate-500 uppercase tracking-tighter">SNR_Ratio</span>
+                    <span class={`text-[10px] font-black ${metrics().snr > metrics().snrThreshold ? 'text-emerald-500' : 'text-amber-500'}`}>
+                        {metrics().snr.toFixed(1)} dB
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/LayeredBufferVisualizer.tsx

@@ -0,0 +1,442 @@
+import { Component, onMount, onCleanup, createSignal } from 'solid-js';
+import type { AudioEngine } from '../lib/audio/types';
+import type { MelWorkerClient } from '../lib/audio/MelWorkerClient';
+import { normalizeMelForDisplay } from '../lib/audio/mel-display';
+import { appStore } from '../stores/appStore';
+
+interface LayeredBufferVisualizerProps {
+    audioEngine?: AudioEngine;
+    melClient?: MelWorkerClient;
+    height?: number; // Total height
+    windowDuration?: number; // default 8.0s
+}
+
+const MEL_BINS = 128; // Standard for this app
+
+// dB scaling is in mel-display.ts (shared with bar visualizer)
+
+// Pre-computed 256-entry RGB lookup table for mel heatmap (black to red).
+// Built once at module load; indexed by Math.round(intensity * 255).
+// Colormap: black -> blue -> purple -> green -> yellow -> orange -> red.
+const COLORMAP_LUT = (() => {
+    const stops: [number, number, number, number][] = [
+        [0, 0, 0, 0],       // black
+        [0.12, 0, 0, 180],  // blue
+        [0.30, 120, 0, 160], // purple
+        [0.48, 0, 180, 80],  // green
+        [0.65, 220, 220, 0], // yellow
+        [0.82, 255, 140, 0], // orange
+        [1, 255, 0, 0],      // red
+    ];
+    // 256 entries * 3 channels (R, G, B) packed into a Uint8Array
+    const lut = new Uint8Array(256 * 3);
+    for (let i = 0; i < 256; i++) {
+        const intensity = i / 255;
+        let r = 0, g = 0, b = 0;
+        for (let s = 0; s < stops.length - 1; s++) {
+            const [t0, r0, g0, b0] = stops[s];
+            const [t1, r1, g1, b1] = stops[s + 1];
+            if (intensity >= t0 && intensity <= t1) {
+                const t = (intensity - t0) / (t1 - t0);
+                r = Math.round(r0 + t * (r1 - r0));
+                g = Math.round(g0 + t * (g1 - g0));
+                b = Math.round(b0 + t * (b1 - b0));
+                break;
+            }
+        }
+        if (intensity >= stops[stops.length - 1][0]) {
+            const last = stops[stops.length - 1];
+            r = last[1]; g = last[2]; b = last[3];
+        }
+        const base = i * 3;
+        lut[base] = r;
+        lut[base + 1] = g;
+        lut[base + 2] = b;
+    }
+    return lut;
+})();
+
+export const LayeredBufferVisualizer: Component<LayeredBufferVisualizerProps> = (props) => {
+    let canvasRef: HTMLCanvasElement | undefined;
+    let ctx: CanvasRenderingContext2D | null = null;
+    let animationFrameId: number;
+
+    const getWindowDuration = () => props.windowDuration || 8.0;
+
+    // Offscreen canvas for spectrogram caching (scrolling)
+    let specCanvas: HTMLCanvasElement | undefined;
+    let specCtx: CanvasRenderingContext2D | null = null;
+
+    // State for last fetch to throttle spectrogram updates
+    let lastSpecFetchTime = 0;
+    const SPEC_FETCH_INTERVAL = 100; // Update spectrogram every 100ms (10fps)
+    const DRAW_INTERVAL_MS = 33; // Throttle full redraw to ~30fps
+    let lastDrawTime = 0;
+
+    // --- Cached layout dimensions (updated via ResizeObserver, NOT per-frame) ---
+    // Avoids getBoundingClientRect() every animation frame which forces synchronous
+    // layout reflow and was the #1 perf bottleneck (1.5s layout-shift clusters).
+    let cachedPhysicalWidth = 0;
+    let cachedPhysicalHeight = 0;
+    let cachedDpr = window.devicePixelRatio || 1;
+    let resizeObserver: ResizeObserver | null = null;
+    let dprMediaQuery: MediaQueryList | null = null;
+
+    /** Recompute physical canvas dimensions from cached logical size + DPR. */
+    const updateCanvasDimensions = (logicalW: number, logicalH: number) => {
+        cachedDpr = window.devicePixelRatio || 1;
+        cachedPhysicalWidth = Math.floor(logicalW * cachedDpr);
+        cachedPhysicalHeight = Math.floor(logicalH * cachedDpr);
+
+        // Resize canvases immediately so next frame uses correct size
+        if (canvasRef && (canvasRef.width !== cachedPhysicalWidth || canvasRef.height !== cachedPhysicalHeight)) {
+            canvasRef.width = cachedPhysicalWidth;
+            canvasRef.height = cachedPhysicalHeight;
+        }
+        if (specCanvas && (specCanvas.width !== cachedPhysicalWidth || specCanvas.height !== cachedPhysicalHeight)) {
+            specCanvas.width = cachedPhysicalWidth;
+            specCanvas.height = cachedPhysicalHeight;
+        }
+    };
+
+    // --- Pre-allocated ImageData for spectrogram rendering ---
+    // Avoids creating a new ImageData object every spectrogram draw (~10fps),
+    // which caused GC pressure from large short-lived allocations.
+    let cachedSpecImgData: ImageData | null = null;
+    let cachedSpecImgWidth = 0;
+    let cachedSpecImgHeight = 0;
+
+    // --- Pre-allocated waveform read buffer ---
+    // Avoids allocating a new Float32Array(~128000) every animation frame.
+    // Grows only when the required size exceeds current capacity.
+    let waveformReadBuf: Float32Array | null = null;
+
+    // Store spectrogram data with its time alignment
+    let cachedSpecData: {
+        features: Float32Array;
+        melBins: number;
+        timeSteps: number;
+        startTime: number;
+        endTime: number;
+    } | null = null;
+
+    onMount(() => {
+        if (canvasRef) {
+            ctx = canvasRef.getContext('2d', { alpha: false });
+
+            // Use ResizeObserver to cache dimensions instead of per-frame getBoundingClientRect
+            resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    // contentRect gives CSS-pixel (logical) dimensions without forcing layout
+                    const cr = entry.contentRect;
+                    updateCanvasDimensions(cr.width, cr.height);
+                }
+            });
+            resizeObserver.observe(canvasRef);
+
+            // Watch for DPR changes (browser zoom, display change)
+            const setupDprWatch = () => {
+                dprMediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+                const onDprChange = () => {
+                    if (canvasRef) {
+                        const rect = canvasRef.getBoundingClientRect(); // one-time on zoom change only
+                        updateCanvasDimensions(rect.width, rect.height);
+                    }
+                    // Re-register for the next change at the new DPR
+                    setupDprWatch();
+                };
+                dprMediaQuery.addEventListener('change', onDprChange, { once: true });
+            };
+            setupDprWatch();
+
+            // Initial dimensions (one-time)
+            const rect = canvasRef.getBoundingClientRect();
+            updateCanvasDimensions(rect.width, rect.height);
+        }
+
+        // Create offscreen canvas
+        specCanvas = document.createElement('canvas');
+        specCtx = specCanvas.getContext('2d', { alpha: false });
+
+        loop();
+    });
+
+    onCleanup(() => {
+        cancelAnimationFrame(animationFrameId);
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
+    });
+
+    const loop = (now: number = performance.now()) => {
+        if (!ctx || !canvasRef || !props.audioEngine) {
+            animationFrameId = requestAnimationFrame(loop);
+            return;
+        }
+
+        if (now - lastDrawTime < DRAW_INTERVAL_MS) {
+            animationFrameId = requestAnimationFrame(loop);
+            return;
+        }
+        lastDrawTime = now;
+
+        // Use cached dimensions (updated by ResizeObserver / DPR watcher)
+        const dpr = cachedDpr;
+        const width = cachedPhysicalWidth;
+        const height = cachedPhysicalHeight;
+
+        if (width === 0 || height === 0) {
+            animationFrameId = requestAnimationFrame(loop);
+            return;
+        }
+
+        // Colors
+        const bgColor = '#0f172a';
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, width, height);
+
+        const ringBuffer = props.audioEngine.getRingBuffer();
+        const currentTime = ringBuffer.getCurrentTime();
+        const duration = getWindowDuration();
+        const startTime = currentTime - duration;
+        const sampleRate = ringBuffer.sampleRate;
+
+        // Layout: 
+        // Top 55%: Spectrogram
+        // Middle 35%: Waveform
+        // Bottom 10%: VAD signal
+        const specHeight = Math.floor(height * 0.55);
+        const waveHeight = Math.floor(height * 0.35);
+        const vadHeight = height - specHeight - waveHeight;
+        const waveY = specHeight;
+        const vadY = specHeight + waveHeight;
+
+        // 1. Spectrogram (async fetch with stored alignment)
+        if (props.melClient && specCtx && specCanvas) {
+            if (now - lastSpecFetchTime > SPEC_FETCH_INTERVAL) {
+                lastSpecFetchTime = now;
+
+                const fetchStartSample = Math.round(startTime * sampleRate);
+                const fetchEndSample = Math.round(currentTime * sampleRate);
+
+                // Request RAW (unnormalized) features for fixed dB scaling.
+                // ASR transcription still uses normalized features (default).
+                props.melClient.getFeatures(fetchStartSample, fetchEndSample, false).then(features => {
+                    if (features && specCtx && specCanvas) {
+                        // Store with time alignment info
+                        cachedSpecData = {
+                            features: features.features,
+                            melBins: features.melBins,
+                            timeSteps: features.T,
+                            startTime: startTime,
+                            endTime: currentTime
+                        };
+                        drawSpectrogramToCanvas(specCtx, features.features, features.melBins, features.T, width, specHeight);
+                    }
+                }).catch(() => { });
+            }
+
+            // Draw cached spectrogram aligned to current view
+            if (cachedSpecData && cachedSpecData.timeSteps > 0) {
+                // Calculate offset to align cached data with current time window
+                const cachedDuration = cachedSpecData.endTime - cachedSpecData.startTime;
+                const timeOffset = startTime - cachedSpecData.startTime;
+                const offsetX = Math.floor((timeOffset / cachedDuration) * width);
+
+                // Draw the portion of cached spectrogram that's still visible
+                ctx.drawImage(specCanvas, offsetX, 0, width - offsetX, specHeight, 0, 0, width - offsetX, specHeight);
+            }
+        }
+
+        // 2. Waveform (sync with current time window, zero-allocation read)
+        try {
+            const startSample = Math.floor(startTime * sampleRate);
+            const endSample = Math.floor(currentTime * sampleRate);
+            const neededLen = endSample - startSample;
+
+            const baseFrame = ringBuffer.getBaseFrameOffset();
+            if (startSample >= baseFrame && neededLen > 0) {
+                // Use readInto if available (zero-alloc), fall back to read()
+                if (ringBuffer.readInto) {
+                    // Grow the pre-allocated buffer only when capacity is insufficient
+                    if (!waveformReadBuf || waveformReadBuf.length < neededLen) {
+                        waveformReadBuf = new Float32Array(neededLen);
+                    }
+                    const written = ringBuffer.readInto(startSample, endSample, waveformReadBuf);
+                    // Pass a subarray view (no copy) of the exact length
+                    drawWaveform(ctx, waveformReadBuf.subarray(0, written), width, waveHeight, waveY);
+                } else {
+                    const audioData = ringBuffer.read(startSample, endSample);
+                    drawWaveform(ctx, audioData, width, waveHeight, waveY);
+                }
+            }
+        } catch (e) {
+            // Data likely overwritten or not available
+        }
+
+        // 3. VAD Signal Layer
+        drawVadLayer(ctx, width, vadHeight, vadY, startTime, duration, dpr);
+
+        // 4. Overlay (time labels, trigger line)
+        drawOverlay(ctx, width, height, startTime, duration, dpr);
+
+        animationFrameId = requestAnimationFrame(loop);
+    };
+
+    const drawSpectrogramToCanvas = (
+        ctx: CanvasRenderingContext2D,
+        features: Float32Array,
+        melBins: number,
+        timeSteps: number,
+        width: number,
+        height: number
+    ) => {
+        // features layout: [melBins, T] (mel-major, flattened from [mel, time])
+        // So features[m * timeSteps + t].
+
+        if (timeSteps === 0) return;
+
+        // Reuse cached ImageData if dimensions match; allocate only on size change
+        if (!cachedSpecImgData || cachedSpecImgWidth !== width || cachedSpecImgHeight !== height) {
+            cachedSpecImgData = ctx.createImageData(width, height);
+            cachedSpecImgWidth = width;
+            cachedSpecImgHeight = height;
+        }
+        const imgData = cachedSpecImgData;
+        const data = imgData.data;
+
+        // Scaling factors
+        const timeScale = timeSteps / width;
+        const freqScale = melBins / height;
+
+        for (let x = 0; x < width; x++) {
+            const t = Math.floor(x * timeScale);
+            if (t >= timeSteps) break;
+
+            for (let y = 0; y < height; y++) {
+                // y=0 is top (high freq), y=height is bottom (low freq).
+                const m = Math.floor((height - 1 - y) * freqScale);
+                if (m >= melBins) continue;
+
+                const val = features[m * timeSteps + t];
+                const clamped = normalizeMelForDisplay(val);
+                const lutIdx = (clamped * 255) | 0;
+                const lutBase = lutIdx * 3;
+
+                const idx = (y * width + x) * 4;
+                data[idx] = COLORMAP_LUT[lutBase];
+                data[idx + 1] = COLORMAP_LUT[lutBase + 1];
+                data[idx + 2] = COLORMAP_LUT[lutBase + 2];
+                data[idx + 3] = 255;
+            }
+        }
+        ctx.putImageData(imgData, 0, 0);
+    };
+
+    // Use gain 1 so waveform shows true amplitude (float32 in [-1,1] fills half-height).
+    // No display amplification; ASR pipeline is unchanged.
+    const WAVEFORM_GAIN = 1;
+
+    const drawWaveform = (ctx: CanvasRenderingContext2D, data: Float32Array, width: number, height: number, offsetY: number) => {
+        if (data.length === 0) return;
+
+        const step = Math.ceil(data.length / width);
+        const amp = (height / 2) * WAVEFORM_GAIN;
+        const centerY = offsetY + height / 2;
+
+        ctx.strokeStyle = '#4ade80'; // Green
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+
+        for (let x = 0; x < width; x++) {
+            const startIdx = x * step;
+            const endIdx = Math.min((x + 1) * step, data.length);
+
+            let min = 1;
+            let max = -1;
+            let hasData = false;
+
+            for (let i = startIdx; i < endIdx; i += Math.max(1, Math.floor((endIdx - startIdx) / 10))) {
+                const s = data[i];
+                if (s < min) min = s;
+                if (s > max) max = s;
+                hasData = true;
+            }
+
+            if (hasData) {
+                const yMin = centerY - min * amp;
+                const yMax = centerY - max * amp;
+                ctx.moveTo(x, Math.max(offsetY, Math.min(offsetY + height, yMin)));
+                ctx.lineTo(x, Math.max(offsetY, Math.min(offsetY + height, yMax)));
+            }
+        }
+        ctx.stroke();
+    };
+
+    const drawVadLayer = (ctx: CanvasRenderingContext2D, width: number, height: number, offsetY: number, startTime: number, duration: number, dpr: number) => {
+        // Draw VAD state as a colored bar
+        // For now, just show current VAD state as a solid bar (could be enhanced with historical data)
+        const vadState = appStore.vadState();
+        const isSpeech = vadState.isSpeech;
+
+        // Background
+        ctx.fillStyle = isSpeech ? 'rgba(249, 115, 22, 0.4)' : 'rgba(100, 116, 139, 0.2)'; // Orange when speech, slate when silence
+        ctx.fillRect(0, offsetY, width, height);
+
+        // If energy-based detection is active, show energy level as a bar
+        const energyLevel = appStore.audioLevel();
+        const energyThreshold = appStore.energyThreshold();
+
+        if (energyLevel > 0) {
+            const barWidth = Math.min(width, width * (energyLevel / 0.3)); // Scale to max 30% energy
+            ctx.fillStyle = energyLevel > energyThreshold ? 'rgba(249, 115, 22, 0.8)' : 'rgba(74, 222, 128, 0.6)';
+            ctx.fillRect(width - barWidth, offsetY, barWidth, height);
+        }
+
+        // Draw a thin separator line at top
+        ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
+        ctx.lineWidth = 1 * dpr;
+        ctx.beginPath();
+        ctx.moveTo(0, offsetY);
+        ctx.lineTo(width, offsetY);
+        ctx.stroke();
+
+        // Label
+        ctx.fillStyle = isSpeech ? '#fb923c' : '#64748b';
+        ctx.font = `${8 * dpr}px monospace`;
+        ctx.fillText(isSpeech ? 'SPEECH' : 'SILENCE', 4 * dpr, offsetY + height - 2 * dpr);
+    };
+
+    const drawOverlay = (ctx: CanvasRenderingContext2D, width: number, height: number, startTime: number, duration: number, dpr: number) => {
+        // Draw Trigger line (1.5s from right) if in V3 mode
+        const triggerX = width - (1.5 / duration) * width;
+        ctx.strokeStyle = 'rgba(255, 255, 0, 0.5)';
+        ctx.lineWidth = 1 * dpr;
+        ctx.beginPath();
+        ctx.moveTo(triggerX, 0);
+        ctx.lineTo(triggerX, height);
+        ctx.stroke();
+
+        // Time labels
+        ctx.fillStyle = '#94a3b8';
+        ctx.font = `${10 * dpr}px monospace`;
+        for (let i = 0; i <= 8; i += 2) {
+            const t = i;
+            const x = width - (t / duration) * width;
+            ctx.fillText(`-${t}s`, x + 3 * dpr, height - 6 * dpr);
+        }
+    };
+
+    return (
+        <div
+            class="relative w-full bg-slate-900 rounded border border-slate-700 overflow-hidden shadow-inner"
+            style={{ height: `${props.height || 200}px` }}
+        >
+            <canvas ref={canvasRef} class="w-full h-full block" />
+            <div class="absolute top-2 left-2 text-[10px] text-slate-400 pointer-events-none">
+                SPECTROGRAM + WAVEFORM ({getWindowDuration()}s)
+            </div>
+        </div>
+    );
+};

src/components/ModelLoadingOverlay.tsx

@@ -0,0 +1,212 @@
+import { Component, Show, For, createEffect } from 'solid-js';
+
+interface ModelLoadingOverlayProps {
+    isVisible: boolean;
+    progress: number;
+    message: string;
+    file?: string;
+    backend: 'webgpu' | 'wasm';
+    state: 'unloaded' | 'loading' | 'ready' | 'error';
+    selectedModelId: string;
+    onModelSelect: (id: string) => void;
+    onStart: () => void;
+    onLocalLoad: (files: FileList) => void;
+    onClose?: () => void;
+}
+
+export const MODELS = [
+    { id: 'parakeet-tdt-0.6b-v2', name: 'Parakeet v2', desc: 'English optimized' },
+    { id: 'parakeet-tdt-0.6b-v3', name: 'Parakeet v3', desc: 'Multilingual Streaming' },
+];
+
+export function getModelDisplayName(id: string): string {
+    return (MODELS.find((m) => m.id === id)?.name ?? id) || 'Unknown model';
+}
+
+export const ModelLoadingOverlay: Component<ModelLoadingOverlayProps> = (props) => {
+    const progressWidth = () => `${Math.max(0, Math.min(100, props.progress))}%`;
+    let fileInput: HTMLInputElement | undefined;
+
+    const handleFileChange = (e: Event) => {
+        const files = (e.target as HTMLInputElement).files;
+        if (files && files.length > 0) {
+            props.onLocalLoad(files);
+        }
+    };
+
+    const handleClose = () => props.onClose?.();
+
+    createEffect(() => {
+        if (!props.isVisible || !props.onClose) return;
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                props.onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    });
+
+    return (
+        <Show when={props.isVisible}>
+            <div
+                class="fixed inset-0 z-50 flex items-center justify-center bg-[var(--color-earthy-dark-brown)]/30 backdrop-blur-sm"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="model-overlay-title"
+                onClick={(e) => e.target === e.currentTarget && handleClose()}
+            >
+                <input
+                    type="file"
+                    multiple
+                    ref={fileInput}
+                    class="hidden"
+                    onChange={handleFileChange}
+                />
+
+                <div class="w-full max-w-lg mx-4">
+                    <div class="relative nm-flat rounded-[40px] overflow-hidden transition-all duration-300 animate-in fade-in slide-in-from-bottom-4">
+                        {/* Close Button - show whenever onClose is provided so user can dismiss in any state */}
+                        <Show when={props.onClose}>
+                            <button
+                                type="button"
+                                onClick={handleClose}
+                                class="absolute top-8 right-8 neu-square-btn text-[var(--color-earthy-soft-brown)] hover:text-[var(--color-earthy-coral)] transition-all z-10"
+                                aria-label="Close"
+                            >
+                                <span class="material-symbols-outlined text-xl">close</span>
+                            </button>
+                        </Show>
+
+                        {/* Header */}
+                        <div class="p-10 pb-6 text-center">
+                            <div class="w-20 h-20 mx-auto mb-8 rounded-[32px] nm-inset flex items-center justify-center">
+                                <Show
+                                    when={props.state !== 'error'}
+                                    fallback={<span class="material-symbols-outlined text-[var(--color-earthy-coral)] text-4xl">warning</span>}
+                                >
+                                    <span class={`material-symbols-outlined text-[var(--color-earthy-muted-green)] text-4xl ${props.state === 'loading' ? 'animate-pulse' : ''}`}>
+                                        {props.state === 'loading' ? 'downloading' : 'neurology'}
+                                    </span>
+                                </Show>
+                            </div>
+
+                            <h2 id="model-overlay-title" class="text-3xl font-extrabold text-[var(--color-earthy-dark-brown)] tracking-tight">
+                                {props.state === 'unloaded' ? 'Engine Selection' :
+                                    props.state === 'error' ? 'Loading Failed' : 'Model Installation'}
+                            </h2>
+
+                            <p class="text-sm text-[var(--color-earthy-soft-brown)] font-medium mt-3 px-10">
+                                {props.state === 'unloaded' ? 'Select the AI engine for this transcription session.' : props.message}
+                            </p>
+                        </div>
+
+                        {/* Content */}
+                        <div class="px-10 pb-10">
+                            <Show when={props.state === 'unloaded'}>
+                                <div class="space-y-4">
+                                    <div class="grid gap-4">
+                                        <For each={MODELS}>
+                                            {(model) => (
+                                                <button
+                                                    onClick={() => props.onModelSelect(model.id)}
+                                                    class={`flex items-center text-left p-6 rounded-3xl transition-all ${props.selectedModelId === model.id
+                                                        ? 'nm-inset text-[var(--color-earthy-muted-green)] ring-2 ring-[var(--color-earthy-muted-green)]/20'
+                                                        : 'nm-flat text-[var(--color-earthy-dark-brown)] hover:shadow-neu-btn-hover'
+                                                        }`}
+                                                >
+                                                    <div class={`w-6 h-6 rounded-full nm-inset mr-5 flex flex-none items-center justify-center ${props.selectedModelId === model.id ? 'text-[var(--color-earthy-muted-green)]' : 'text-[var(--color-earthy-sage)]'
+                                                        }`}>
+                                                        <Show when={props.selectedModelId === model.id}>
+                                                            <div class="w-2.5 h-2.5 bg-[var(--color-earthy-muted-green)] rounded-full shadow-[0_0_8px_var(--color-earthy-muted-green)]" />
+                                                        </Show>
+                                                    </div>
+                                                    <div>
+                                                        <div class="font-bold text-lg leading-tight">{model.name}</div>
+                                                        <div class="text-[10px] font-black opacity-40 uppercase tracking-widest mt-1">{model.desc}</div>
+                                                    </div>
+                                                </button>
+                                            )}
+                                        </For>
+
+                                        <button
+                                            onClick={() => fileInput?.click()}
+                                            class="flex items-center text-left p-6 rounded-3xl nm-flat opacity-70 hover:opacity-100 transition-all hover:shadow-neu-btn-hover"
+                                        >
+                                            <div class="w-10 h-10 rounded-2xl nm-inset flex items-center justify-center mr-5">
+                                                <span class="material-symbols-outlined text-[var(--color-earthy-soft-brown)] text-xl">file_open</span>
+                                            </div>
+                                            <div>
+                                                <div class="font-bold text-lg leading-tight">Local Model</div>
+                                                <div class="text-[10px] font-black opacity-40 uppercase tracking-widest mt-1">Load from disk</div>
+                                            </div>
+                                        </button>
+                                    </div>
+
+                                    <button
+                                        onClick={() => props.onStart()}
+                                        class="w-full mt-6 py-5 bg-[var(--color-earthy-muted-green)] text-white font-extrabold rounded-3xl shadow-xl active:scale-[0.98] transition-all uppercase tracking-widest text-xs"
+                                    >
+                                        Initialize AI Engine
+                                    </button>
+                                </div>
+                            </Show>
+
+                            {/* Progress */}
+                            <Show when={props.state === 'loading'}>
+                                <div class="mt-4">
+                                    <div class="h-4 nm-inset rounded-full overflow-hidden p-1">
+                                        <div
+                                            class="h-full bg-[var(--color-earthy-muted-green)] rounded-full transition-all duration-300 ease-out shadow-[0_0_12px_var(--color-earthy-muted-green)]"
+                                            style={{ width: progressWidth() }}
+                                        />
+                                    </div>
+
+                                    <div class="flex justify-between items-center mt-6 px-1">
+                                        <div class="flex flex-col">
+                                            <span class="text-[10px] font-black text-[var(--color-earthy-soft-brown)] uppercase tracking-widest leading-none mb-1">Downloaded</span>
+                                            <span class="text-[var(--color-earthy-muted-green)] font-black text-2xl">{props.progress}%</span>
+                                        </div>
+                                        <div class="flex flex-col text-right">
+                                            <span class="text-[10px] font-black text-[var(--color-earthy-soft-brown)] uppercase tracking-widest leading-none mb-1">Active File</span>
+                                            <span class="text-[var(--color-earthy-soft-brown)] font-bold text-[11px] truncate max-w-[200px]">
+                                                {props.file || 'Preparing assets...'}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </Show>
+
+                            <Show when={props.state === 'error'}>
+                                <div>
+                                    <button
+                                        onClick={() => props.onStart()}
+                                        class="w-full py-5 nm-flat text-[var(--color-earthy-coral)] font-black rounded-3xl shadow-none hover:opacity-90 transition-all"
+                                    >
+                                        Retry Connection
+                                    </button>
+                                </div>
+                            </Show>
+                        </div>
+
+                        {/* Footer */}
+                        <div class="px-10 py-6 border-t border-[var(--color-earthy-sage)]/30 flex items-center justify-between opacity-80">
+                            <div class="flex items-center gap-2">
+                                <span class="material-symbols-outlined text-base text-[var(--color-earthy-soft-brown)]">offline_bolt</span>
+                                <span class="text-[10px] font-black text-[var(--color-earthy-soft-brown)] uppercase tracking-widest">
+                                    {props.backend === 'webgpu' ? 'GPU Accelerated' : 'WASM Native'}
+                                </span>
+                            </div>
+                            <span class="text-[10px] text-[var(--color-earthy-sage)] font-black tracking-widest">
+                                PRIVACY SECURED
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Show>
+    );
+};
+
+

src/components/PrivacyBadge.tsx

@@ -0,0 +1,19 @@
+import { Component } from 'solid-js';
+
+export const PrivacyBadge: Component = () => {
+    return (
+        <div class="fixed bottom-16 right-8 z-30 group">
+            <div class="nm-flat rounded-full px-5 py-2.5 flex items-center gap-2 cursor-help transition-all hover:scale-105 active:scale-95 group-hover:bg-green-500/5">
+                <span class="material-icons-round text-green-500 text-sm shadow-[0_0_8px_rgba(34,197,94,0.4)]">shield</span>
+                <span class="text-[10px] font-black text-green-600 dark:text-green-400 tracking-widest uppercase">Private_Secure</span>
+            </div>
+
+            <div class="absolute bottom-full right-0 mb-6 w-64 p-5 nm-flat rounded-[28px] opacity-0 group-hover:opacity-100 pointer-events-none transition-all transform translate-y-4 group-hover:translate-y-0">
+                <h4 class="font-black text-xs mb-2 tracking-tight uppercase text-slate-700 dark:text-slate-200">Local_Vault_Secure</h4>
+                <p class="text-[11px] text-slate-500 leading-relaxed font-medium">
+                    Your audio never leaves this device. All transcription and AI processing happens locally in your browser's WebGPU sandbox.
+                </p>
+            </div>
+        </div>
+    );
+};

src/components/SettingsPanel.tsx

@@ -0,0 +1,225 @@
+import { Component, For, Show } from 'solid-js';
+import { appStore } from '../stores/appStore';
+import { getModelDisplayName, MODELS } from './ModelLoadingOverlay';
+import type { AudioEngine } from '../lib/audio/types';
+
+const formatInterval = (ms: number) => {
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${ms}ms`;
+};
+
+export type SettingsPanelSection = 'full' | 'audio' | 'model';
+
+export interface SettingsContentProps {
+  /** When 'audio' or 'model', only that section is shown (e.g. hover on mic or load button). */
+  section?: SettingsPanelSection;
+  onClose: () => void;
+  onLoadModel: () => void;
+  onLocalLoad?: (files: FileList) => void;
+  onOpenDebug: () => void;
+  onDeviceSelect?: (id: string) => void;
+  audioEngine?: AudioEngine | null;
+  /** When true, panel expands upward (bar in lower half); content order is reversed so ASR model stays adjacent to the bar. */
+  expandUp?: () => boolean;
+}
+
+/** Embeddable settings form (e.g. inside floating bar expansion). */
+export const SettingsContent: Component<SettingsContentProps> = (props) => {
+  const isV4 = () => appStore.transcriptionMode() === 'v4-utterance';
+  const isV3 = () => appStore.transcriptionMode() === 'v3-streaming';
+
+  const expandUp = () => props.expandUp?.() ?? false;
+  const section = () => props.section ?? 'full';
+  const showAsr = () => section() === 'full' || section() === 'model';
+  const showAudio = () => section() === 'full' || section() === 'audio';
+  const showSliders = () => section() === 'full';
+  const showDebug = () => section() === 'full';
+
+  return (
+    <div class="flex flex-col min-h-0">
+      <div
+        class="flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-4 custom-scrollbar"
+        classList={{ 'flex-col-reverse': expandUp() }}
+      >
+        <Show when={showAsr()}>
+          <section class="space-y-2">
+            <h3 class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">ASR model</h3>
+            <div class="flex items-center gap-2 flex-wrap">
+            <select
+              class="flex-1 min-w-0 text-sm bg-transparent border-b border-[var(--color-earthy-sage)]/40 px-0 py-1.5 text-[var(--color-earthy-dark-brown)] focus:outline-none focus:border-[var(--color-earthy-muted-green)]"
+              value={appStore.selectedModelId()}
+              onInput={(e) => appStore.setSelectedModelId((e.target as HTMLSelectElement).value)}
+              disabled={appStore.modelState() === 'loading'}
+            >
+              <For each={MODELS}>
+                {(m) => <option value={m.id}>{m.name}</option>}
+              </For>
+            </select>
+            <button
+              type="button"
+              onClick={props.onLoadModel}
+              disabled={appStore.modelState() === 'ready' || appStore.modelState() === 'loading'}
+              class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[var(--color-earthy-muted-green)] hover:bg-[var(--color-earthy-sage)]/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+            >
+              <span class="material-symbols-outlined text-lg">power_settings_new</span>
+              {appStore.modelState() === 'ready' ? 'Loaded' : appStore.modelState() === 'loading' ? '...' : 'Load'}
+            </button>
+            <Show when={props.onLocalLoad}>
+              <label class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[var(--color-earthy-soft-brown)] hover:bg-[var(--color-earthy-sage)]/20 transition-colors cursor-pointer shrink-0">
+                <span class="material-symbols-outlined text-lg">folder_open</span>
+                Load from file
+                <input
+                  type="file"
+                  multiple
+                  class="hidden"
+                  accept=".onnx,.bin"
+                  onChange={(e) => {
+                    const files = e.currentTarget.files;
+                    if (files && files.length > 0) props.onLocalLoad?.(files);
+                    e.currentTarget.value = '';
+                  }}
+                />
+              </label>
+            </Show>
+          </div>
+          <p class="text-xs text-[var(--color-earthy-soft-brown)]">
+            {appStore.modelState() === 'ready' ? getModelDisplayName(appStore.selectedModelId()) : appStore.modelState()}
+          </p>
+          <Show when={appStore.modelState() === 'loading'}>
+            <div class="space-y-1">
+              <div class="flex justify-between text-xs">
+                <span>{appStore.modelMessage()}</span>
+                <span class="font-mono text-[var(--color-earthy-muted-green)]">{Math.round(appStore.modelProgress())}%</span>
+              </div>
+              <div class="h-1.5 rounded-full overflow-hidden bg-[var(--color-earthy-sage)]/20">
+                <div
+                  class="h-full bg-[var(--color-earthy-muted-green)] rounded-full transition-all duration-300"
+                  style={{ width: `${Math.max(0, Math.min(100, appStore.modelProgress()))}%` }}
+                />
+              </div>
+            </div>
+          </Show>
+          </section>
+        </Show>
+
+        <Show when={showAudio()}>
+          <section class="space-y-2">
+          <h3 class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Audio input</h3>
+          <select
+            class="w-full text-sm bg-transparent border-b border-[var(--color-earthy-sage)]/40 px-0 py-1.5 text-[var(--color-earthy-dark-brown)] focus:outline-none focus:border-[var(--color-earthy-muted-green)]"
+            value={appStore.selectedDeviceId()}
+            onInput={(e) => {
+              const id = (e.target as HTMLSelectElement).value;
+              appStore.setSelectedDeviceId(id);
+              props.onDeviceSelect?.(id);
+            }}
+          >
+            <For each={appStore.availableDevices()}>
+              {(device) => (
+                <option value={device.deviceId}>
+                  {device.label || `Device ${device.deviceId.slice(0, 8)}`}
+                </option>
+              )}
+            </For>
+          </select>
+          </section>
+        </Show>
+
+        <Show when={showSliders()}>
+          <section class="grid grid-cols-2 gap-x-4 gap-y-3">
+          <div class="space-y-1.5 min-w-0">
+            <div class="flex justify-between items-center gap-2">
+              <span class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Energy threshold</span>
+              <span class="text-sm text-[var(--color-earthy-dark-brown)] tabular-nums shrink-0">{(appStore.energyThreshold() * 100).toFixed(1)}%</span>
+            </div>
+            <input
+              type="range" min="0.005" max="0.3" step="0.005"
+              value={appStore.energyThreshold()}
+              onInput={(e) => {
+                const val = parseFloat(e.currentTarget.value);
+                appStore.setEnergyThreshold(val);
+                props.audioEngine?.updateConfig({ energyThreshold: val });
+              }}
+              class="debug-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-[var(--color-earthy-sage)]/30"
+            />
+          </div>
+
+          <Show when={isV4()}>
+            <div class="space-y-1.5 min-w-0">
+              <div class="flex justify-between items-center gap-2">
+                <span class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">VAD threshold</span>
+                <span class="text-sm text-[var(--color-earthy-dark-brown)] tabular-nums shrink-0">{(appStore.sileroThreshold() * 100).toFixed(0)}%</span>
+              </div>
+              <input
+                type="range" min="0.1" max="0.9" step="0.05"
+                value={appStore.sileroThreshold()}
+                onInput={(e) => appStore.setSileroThreshold(parseFloat(e.currentTarget.value))}
+                class="debug-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-[var(--color-earthy-sage)]/30"
+              />
+            </div>
+            <div class="space-y-1.5 min-w-0">
+              <div class="flex justify-between items-center gap-2">
+                <span class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Tick interval</span>
+                <span class="text-sm text-[var(--color-earthy-dark-brown)] tabular-nums shrink-0">{formatInterval(appStore.v4InferenceIntervalMs())}</span>
+              </div>
+              <input
+                type="range" min="160" max="8000" step="80"
+                value={appStore.v4InferenceIntervalMs()}
+                onInput={(e) => appStore.setV4InferenceIntervalMs(parseInt(e.currentTarget.value))}
+                class="debug-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-[var(--color-earthy-sage)]/30"
+              />
+              <div class="flex justify-between text-[9px] text-[var(--color-earthy-soft-brown)]">
+                <span>320ms</span>
+                <span>8.0s</span>
+              </div>
+            </div>
+            <div class="space-y-1.5 min-w-0">
+              <div class="flex justify-between items-center gap-2">
+                <span class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Silence flush</span>
+                <span class="text-sm text-[var(--color-earthy-dark-brown)] tabular-nums shrink-0">{appStore.v4SilenceFlushSec().toFixed(1)}s</span>
+              </div>
+              <input
+                type="range" min="0.3" max="5.0" step="0.1"
+                value={appStore.v4SilenceFlushSec()}
+                onInput={(e) => appStore.setV4SilenceFlushSec(parseFloat(e.currentTarget.value))}
+                class="debug-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-[var(--color-earthy-sage)]/30"
+              />
+            </div>
+          </Show>
+
+          <Show when={isV3()}>
+            <div class="space-y-1.5 min-w-0">
+              <div class="flex justify-between items-center gap-2">
+                <span class="text-[10px] font-bold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Window</span>
+                <span class="text-sm text-[var(--color-earthy-dark-brown)] tabular-nums shrink-0">{appStore.streamingWindow().toFixed(1)}s</span>
+              </div>
+              <input
+                type="range" min="2.0" max="15.0" step="0.5"
+                value={appStore.streamingWindow()}
+                onInput={(e) => appStore.setStreamingWindow(parseFloat(e.currentTarget.value))}
+                class="debug-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-[var(--color-earthy-sage)]/30"
+              />
+            </div>
+          </Show>
+          </section>
+        </Show>
+
+        <Show when={showDebug()}>
+          <div class="pt-2">
+            <button
+              type="button"
+              onClick={() => {
+                props.onOpenDebug();
+                props.onClose();
+              }}
+              class="flex items-center gap-2 px-0 py-2 text-sm font-medium text-[var(--color-earthy-muted-green)] hover:opacity-80 transition-opacity w-full"
+            >
+              <span class="material-symbols-outlined text-lg">bug_report</span>
+              Open Debug panel
+            </button>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+};

src/components/Sidebar.tsx

@@ -0,0 +1,142 @@
+import { Component, For, Show, createEffect, createSignal, onCleanup } from 'solid-js';
+
+interface SidebarProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  // Recording controls
+  isRecording: boolean;
+  onToggleRecording: () => void;
+  // Model state
+  isModelReady: boolean;
+  onLoadModel: () => void;
+  modelState: string;
+  // Device selection
+  availableDevices: MediaDeviceInfo[];
+  selectedDeviceId: string;
+  onDeviceSelect: (id: string) => void;
+  // Audio feedback
+  audioLevel: number;
+}
+
+export const Sidebar: Component<SidebarProps> = (props) => {
+  const [showDevices, setShowDevices] = createSignal(false);
+  let triggerContainerRef: HTMLDivElement | undefined;
+  let popoverRef: HTMLDivElement | undefined;
+
+  createEffect(() => {
+    if (!showDevices()) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerContainerRef?.contains(target) || popoverRef?.contains(target)) return;
+      setShowDevices(false);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowDevices(false);
+    };
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('keydown', onKeyDown);
+    onCleanup(() => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('keydown', onKeyDown);
+    });
+  });
+
+  return (
+    <aside class="w-20 min-w-[80px] bg-neu-bg flex flex-col items-center py-6 h-full border-r border-sidebar-border/30">
+      {/* Power Button - Reflects System Readiness; disabled when model already loaded or loading */}
+      <div class="mb-8 relative">
+        <button
+          onClick={() => !props.isModelReady && props.modelState !== 'loading' && props.onLoadModel()}
+          disabled={props.isModelReady || props.modelState === 'loading'}
+          class="neu-circle-btn text-slate-600 transition-all active:scale-95 disabled:opacity-70 disabled:cursor-not-allowed disabled:active:scale-100"
+          title={props.modelState === 'loading' ? "Loading..." : props.isModelReady ? "Model Loaded" : "Load Model"}
+        >
+          <span class="material-symbols-outlined text-xl">power_settings_new</span>
+          <span class={`status-led ${props.isModelReady ? 'bg-green-500 shadow-[0_0_8px_#22c55e]' : 'bg-slate-300'}`}></span>
+        </button>
+      </div>
+
+      <nav class="flex flex-col gap-6 items-center w-full px-2">
+        {/* Record Button - Always enabled, recording works even before model is loaded */}
+        <button
+          onClick={() => props.onToggleRecording()}
+          class={`neu-circle-btn transition-all active:scale-95 ${props.isRecording ? 'text-red-500 active' : 'text-slate-500'}`}
+          title={props.isRecording ? "Stop Recording" : "Start Recording"}
+        >
+          <span class="material-symbols-outlined text-xl">mic</span>
+        </button>
+
+        <div class="w-8 h-[1px] bg-slate-300/60 my-2"></div>
+
+        {/* Model Selection Icon */}
+        <button
+          onClick={() => props.onLoadModel()}
+          class={`neu-square-btn transition-all active:scale-95 ${props.activeTab === 'ai' ? 'active' : 'text-slate-500'}`}
+          title="AI Model Selection"
+        >
+          <span class="material-symbols-outlined text-xl">psychology</span>
+        </button>
+
+        {/* Device Selection Popover Trigger */}
+        <div class="relative" ref={(el) => { triggerContainerRef = el; }}>
+          <button
+            class={`neu-square-btn transition-all active:scale-95 ${showDevices() ? 'active' : 'text-slate-500'}`}
+            onClick={() => setShowDevices(!showDevices())}
+            title="Audio Input Selection"
+          >
+            <span class="material-symbols-outlined text-xl">settings_input_composite</span>
+          </button>
+
+          {/* Device Selection Popover */}
+          <Show when={showDevices()}>
+            <div ref={(el) => { popoverRef = el; }} class="absolute left-full bottom-0 ml-6 w-64 nm-flat rounded-[32px] p-4 z-50 animate-in fade-in slide-in-from-left-2 duration-200">
+              <div class="text-[9px] font-black text-slate-400 p-2 uppercase tracking-widest mb-2 border-b border-slate-200">Mechanical_Input</div>
+              <div class="flex flex-col gap-1 max-h-64 overflow-y-auto pr-1">
+                <For each={props.availableDevices}>
+                  {(device) => (
+                    <button
+                      class={`w-full text-left px-4 py-3 rounded-2xl text-xs transition-all flex items-center gap-3 ${props.selectedDeviceId === device.deviceId
+                        ? 'nm-inset text-primary font-bold'
+                        : 'text-slate-600 hover:nm-flat'
+                        }`}
+                      onClick={() => {
+                        props.onDeviceSelect(device.deviceId);
+                        setShowDevices(false);
+                      }}
+                    >
+                      <span class="material-symbols-outlined text-lg opacity-40">mic</span>
+                      <span class="truncate font-medium">{device.label || `Channel ${device.deviceId.slice(0, 4)}`}</span>
+                    </button>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        {/* Placeholder Items matching design */}
+        <button class="neu-square-btn text-slate-300 cursor-not-allowed" title="Translation (Pro)">
+          <span class="material-symbols-outlined text-xl">translate</span>
+        </button>
+
+        <button class="neu-square-btn text-slate-500" title="Export Transcript" onClick={() => (window as any).appStore?.copyTranscript()}>
+          <span class="material-symbols-outlined text-xl">download</span>
+        </button>
+      </nav>
+
+      <div class="mt-auto">
+        <button
+          class={`neu-square-btn transition-all active:scale-95 ${props.activeTab === 'settings' ? 'active' : 'text-slate-500'}`}
+          onClick={() => props.onTabChange('settings')}
+          title="Settings"
+        >
+          <span class="material-symbols-outlined text-xl">settings</span>
+        </button>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
+
+

src/components/StatusBar.tsx

@@ -0,0 +1,55 @@
+import { Component, Show } from 'solid-js';
+import { appStore } from '../stores/appStore';
+
+export const StatusBar: Component = () => {
+    const modelStatusText = () => {
+        switch (appStore.modelState()) {
+            case 'unloaded': return 'Model not loaded';
+            case 'loading': return appStore.modelMessage() || `Loading... ${appStore.modelProgress()}%`;
+            case 'ready': return 'Ready';
+            case 'error': return 'Error';
+            default: return '';
+        }
+    };
+
+    const statusDotClass = () => {
+        switch (appStore.modelState()) {
+            case 'ready': return 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]';
+            case 'loading': return 'bg-yellow-500 animate-pulse';
+            case 'error': return 'bg-red-500';
+            default: return 'bg-gray-400';
+        }
+    };
+
+    return (
+        <div class="flex-none h-10 nm-inset mx-4 mb-4 rounded-2xl px-6 flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300">
+            <div class="flex items-center gap-8">
+                <div class="flex items-center gap-2">
+                    <div class={`w-2 h-2 rounded-full ${statusDotClass()}`}></div>
+                    <span class="text-slate-600 dark:text-slate-300">{modelStatusText()}</span>
+                </div>
+
+                <div class="flex items-center gap-2 opacity-60">
+                    <span class="material-icons-round text-sm">memory</span>
+                    <span>BACKEND: <span class="text-blue-500 font-black">{appStore.backend().toUpperCase()}</span></span>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-8">
+                <div class="flex items-center gap-2 opacity-40 hover:opacity-100 transition-opacity cursor-default">
+                    <span class="text-[8px] font-black tracking-[0.2em]">BUILD: 20250828.VAD_REFIX</span>
+                </div>
+                <Show when={appStore.isOfflineReady()}>
+                    <div class="flex items-center gap-1.5 text-indigo-500 font-black">
+                        <span class="material-icons-round text-sm">offline_bolt</span>
+                        <span>100% On-Device</span>
+                    </div>
+                </Show>
+                <div class="flex items-center gap-1.5 opacity-80">
+                    <div class={`w-2 h-2 rounded-full ${appStore.isOnline() ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'}`}></div>
+                    <span>{appStore.isOnline() ? 'SYNC: CONNECTED' : 'SYNC: OFFLINE'}</span>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/TranscriptionDisplay.tsx

@@ -0,0 +1,425 @@
+import { Component, For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+import type { V4SentenceEntry } from '../lib/transcription/TranscriptionWorkerClient';
+
+export interface TranscriptionDisplayProps {
+    confirmedText: string;
+    pendingText: string;
+    sentenceEntries?: V4SentenceEntry[];
+    isV4Mode?: boolean;
+    isRecording: boolean;
+    lcsLength?: number;
+    anchorValid?: boolean;
+    showConfidence?: boolean;
+    placeholder?: string;
+    class?: string;
+}
+
+const formatClockTime = (timestamp: number): string => {
+    if (!Number.isFinite(timestamp)) return '--:--:--';
+    return new Date(timestamp).toLocaleTimeString([], {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+};
+
+const formatAudioTime = (seconds: number): string => {
+    if (!Number.isFinite(seconds)) return '0:00.00';
+    const totalSeconds = Math.max(0, seconds);
+    const minutes = Math.floor(totalSeconds / 60);
+    const secondPart = (totalSeconds % 60).toFixed(2).padStart(5, '0');
+    return `${minutes}:${secondPart}`;
+};
+
+const formatAudioRange = (startTime: number, endTime: number): string =>
+    `${formatAudioTime(startTime)} -> ${formatAudioTime(endTime)}`;
+
+const MERGED_SPLIT_STORAGE_KEY = 'keet-merged-split-ratio';
+const MIN_MERGED_SPLIT_RATIO = 0.3;
+const MAX_MERGED_SPLIT_RATIO = 0.7;
+
+const clampMergedSplitRatio = (ratio: number): number =>
+    Math.min(MAX_MERGED_SPLIT_RATIO, Math.max(MIN_MERGED_SPLIT_RATIO, ratio));
+
+const getInitialMergedSplitRatio = (): number => {
+    if (typeof localStorage === 'undefined') return 0.5;
+    try {
+        const raw = Number(localStorage.getItem(MERGED_SPLIT_STORAGE_KEY));
+        if (Number.isFinite(raw)) return clampMergedSplitRatio(raw);
+    } catch (_) {}
+    return 0.5;
+};
+
+export const TranscriptionDisplay: Component<TranscriptionDisplayProps> = (props) => {
+    let liveContainerRef: HTMLDivElement | undefined;
+    let mergedContainerRef: HTMLDivElement | undefined;
+    let mergedSplitContainerRef: HTMLDivElement | undefined;
+    let sentenceListDesktopRef: HTMLDivElement | undefined;
+    let sentenceListMobileRef: HTMLDivElement | undefined;
+    let scrollScheduled = false;
+    const [activeTab, setActiveTab] = createSignal<'live' | 'merged'>('live');
+    const [mergedSplitRatio, setMergedSplitRatio] = createSignal(getInitialMergedSplitRatio());
+    const [isSplitResizing, setIsSplitResizing] = createSignal(false);
+    let splitMouseMoveHandler: ((event: MouseEvent) => void) | null = null;
+    let splitMouseUpHandler: (() => void) | null = null;
+
+    const scrollToBottom = () => {
+        if (scrollScheduled) return;
+        scrollScheduled = true;
+        requestAnimationFrame(() => {
+            scrollScheduled = false;
+            const activeContainer = activeTab() === 'merged' ? mergedContainerRef : liveContainerRef;
+            if (activeContainer) {
+                activeContainer.scrollTop = activeContainer.scrollHeight;
+            }
+        });
+    };
+
+    const getVisibleSentenceListContainer = (): HTMLDivElement | undefined => {
+        if (sentenceListDesktopRef && sentenceListDesktopRef.offsetParent !== null) {
+            return sentenceListDesktopRef;
+        }
+        if (sentenceListMobileRef && sentenceListMobileRef.offsetParent !== null) {
+            return sentenceListMobileRef;
+        }
+        return sentenceListDesktopRef ?? sentenceListMobileRef;
+    };
+
+    const scrollSentenceListToBottom = () => {
+        requestAnimationFrame(() => {
+            const container = getVisibleSentenceListContainer();
+            if (!container) return;
+            container.scrollTop = container.scrollHeight;
+        });
+    };
+
+    const persistMergedSplitRatio = (ratio: number) => {
+        if (typeof localStorage === 'undefined') return;
+        try {
+            localStorage.setItem(MERGED_SPLIT_STORAGE_KEY, String(ratio));
+        } catch (_) {}
+    };
+
+    const startSplitResize = (event: MouseEvent) => {
+        if (!mergedSplitContainerRef) return;
+        event.preventDefault();
+
+        const rect = mergedSplitContainerRef.getBoundingClientRect();
+        if (rect.width <= 0) return;
+
+        setIsSplitResizing(true);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+
+        const applyRatioFromClientX = (clientX: number) => {
+            const nextRatio = clampMergedSplitRatio((clientX - rect.left) / rect.width);
+            setMergedSplitRatio(nextRatio);
+        };
+
+        const onMouseMove = (moveEvent: MouseEvent) => {
+            applyRatioFromClientX(moveEvent.clientX);
+        };
+
+        const onMouseUp = () => {
+            setIsSplitResizing(false);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            persistMergedSplitRatio(mergedSplitRatio());
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+            splitMouseMoveHandler = null;
+            splitMouseUpHandler = null;
+        };
+
+        splitMouseMoveHandler = onMouseMove;
+        splitMouseUpHandler = onMouseUp;
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    };
+
+    createEffect(() => {
+        if (!props.isV4Mode && activeTab() !== 'live') {
+            setActiveTab('live');
+        }
+    });
+
+    const hasContent = createMemo(() =>
+        (props.confirmedText?.length ?? 0) > 0 || (props.pendingText?.length ?? 0) > 0
+    );
+
+    const finalizedEntries = createMemo(() => props.sentenceEntries ?? []);
+    const mergedCount = createMemo(() => finalizedEntries().length + (props.pendingText?.trim() ? 1 : 0));
+    const fullTextBody = createMemo(() => {
+        const finalized = finalizedEntries()
+            .map((entry) => entry.text.trim())
+            .filter((text) => text.length > 0)
+            .join(' ')
+            .trim();
+        const live = props.pendingText.trim();
+        if (finalized && live) return `${finalized} ${live}`.trim();
+        return finalized || live || '';
+    });
+
+    createEffect(() => {
+        activeTab();
+        props.confirmedText;
+        props.pendingText;
+        finalizedEntries().length;
+        scrollToBottom();
+    });
+
+    createEffect(() => {
+        if (!props.isV4Mode || activeTab() !== 'merged') return;
+        finalizedEntries().length;
+        props.pendingText;
+        scrollSentenceListToBottom();
+    });
+
+    onCleanup(() => {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        if (splitMouseMoveHandler) {
+            window.removeEventListener('mousemove', splitMouseMoveHandler);
+        }
+        if (splitMouseUpHandler) {
+            window.removeEventListener('mouseup', splitMouseUpHandler);
+        }
+    });
+
+    const renderFullTextContent = () => (
+        <Show when={fullTextBody().length > 0} fallback={
+            <p class="text-sm text-[var(--color-earthy-soft-brown)] italic opacity-70">
+                Waiting for transcript text...
+            </p>
+        }>
+            <p class="text-sm md:text-base lg:text-[1.05rem] text-[var(--color-earthy-dark-brown)] leading-7">
+                {fullTextBody()}
+            </p>
+        </Show>
+    );
+
+    const renderSentenceListContent = () => (
+        <Show when={finalizedEntries().length > 0 || !!props.pendingText.trim()} fallback={
+            <div class="flex flex-col items-center justify-center h-full opacity-50 py-6">
+                <span class="material-symbols-outlined text-3xl mb-2 text-[var(--color-earthy-soft-brown)]">view_list</span>
+                <p class="text-sm text-[var(--color-earthy-soft-brown)] italic">
+                    No merged conversation entries yet...
+                </p>
+            </div>
+        }>
+            <div class="space-y-2">
+                <For each={finalizedEntries()}>
+                    {(entry) => (
+                        <div class="grid grid-cols-1 sm:grid-cols-[86px_138px_1fr] xl:grid-cols-[94px_150px_1fr] gap-1.5 sm:gap-3 items-baseline px-2 py-2 rounded-lg hover:bg-[var(--color-earthy-sage)]/10 transition-colors">
+                            <span class="font-mono text-xs text-[var(--color-earthy-soft-brown)]">
+                                {formatClockTime(entry.emittedAt)}
+                            </span>
+                            <span class="font-mono text-xs text-[var(--color-earthy-soft-brown)]">
+                                [{formatAudioRange(entry.startTime, entry.endTime)}]
+                            </span>
+                            <span class="text-sm md:text-base text-[var(--color-earthy-dark-brown)]">
+                                {entry.text}
+                            </span>
+                        </div>
+                    )}
+                </For>
+
+                <Show when={props.pendingText.trim()}>
+                    <div class="grid grid-cols-1 sm:grid-cols-[86px_138px_1fr] xl:grid-cols-[94px_150px_1fr] gap-1.5 sm:gap-3 items-baseline px-2 py-2 rounded-lg bg-[var(--color-earthy-muted-green)]/10 border border-[var(--color-earthy-sage)]/40">
+                        <span class="font-mono text-xs text-[var(--color-earthy-soft-brown)]">
+                            {formatClockTime(Date.now())}
+                        </span>
+                        <span class="text-[10px] font-semibold uppercase tracking-wide text-[var(--color-earthy-coral)]">
+                            LIVE
+                        </span>
+                        <span class="text-sm md:text-base text-[var(--color-earthy-coral)] italic">
+                            {props.pendingText}
+                        </span>
+                    </div>
+                </Show>
+            </div>
+        </Show>
+    );
+
+    return (
+        <div class={`flex flex-col h-full bg-transparent ${props.class ?? ''}`}>
+            <Show when={props.isV4Mode}>
+                <div class="mb-4 flex items-center gap-2">
+                    <button
+                        type="button"
+                        class={`px-3 py-1.5 rounded-lg text-xs font-semibold uppercase tracking-wide border transition-colors ${
+                            activeTab() === 'live'
+                                ? 'bg-[var(--color-earthy-muted-green)] text-white border-[var(--color-earthy-muted-green)]'
+                                : 'bg-[var(--color-earthy-bg)] text-[var(--color-earthy-soft-brown)] border-[var(--color-earthy-sage)]/50 hover:border-[var(--color-earthy-soft-brown)]'
+                        }`}
+                        onClick={() => setActiveTab('live')}
+                    >
+                        Live
+                    </button>
+                    <button
+                        type="button"
+                        class={`px-3 py-1.5 rounded-lg text-xs font-semibold uppercase tracking-wide border transition-colors flex items-center gap-2 ${
+                            activeTab() === 'merged'
+                                ? 'bg-[var(--color-earthy-muted-green)] text-white border-[var(--color-earthy-muted-green)]'
+                                : 'bg-[var(--color-earthy-bg)] text-[var(--color-earthy-soft-brown)] border-[var(--color-earthy-sage)]/50 hover:border-[var(--color-earthy-soft-brown)]'
+                        }`}
+                        onClick={() => setActiveTab('merged')}
+                    >
+                        <span>Merged</span>
+                        <span class={`px-1.5 py-0.5 rounded text-[10px] leading-none ${
+                            activeTab() === 'merged'
+                                ? 'bg-white/20'
+                                : 'bg-[var(--color-earthy-sage)]/30'
+                        }`}>
+                            {mergedCount()}
+                        </span>
+                    </button>
+                </div>
+            </Show>
+
+            <Show when={props.isV4Mode && activeTab() === 'merged'} fallback={
+                <div
+                    ref={liveContainerRef}
+                    class="flex-1 overflow-y-auto scroll-smooth"
+                >
+                    <Show
+                        when={hasContent()}
+                        fallback={
+                            <div class="flex flex-col items-center justify-center h-full opacity-50 story-font">
+                                <span class="material-symbols-outlined text-5xl mb-4 text-[var(--color-earthy-soft-brown)]">graphic_eq</span>
+                                <p class="text-2xl md:text-3xl leading-[1.6] text-[var(--color-earthy-muted-green)] italic">
+                                    {props.placeholder ?? 'Ready to transcribe...'}
+                                </p>
+                            </div>
+                        }
+                    >
+                        <div class="story-font space-y-12 py-4">
+                            <div class="group">
+                                <div class="pl-4 border-l-2 border-[var(--color-earthy-coral)]/30 group-hover:border-[var(--color-earthy-coral)]/50 transition-colors duration-300">
+                                    {/* Confirmed text */}
+                                    <p class="text-2xl md:text-3xl leading-[1.6] text-[var(--color-earthy-dark-brown)] font-normal inline">
+                                        {props.confirmedText}
+                                    </p>
+
+                                    {/* Pending text */}
+                                    <Show when={props.pendingText}>
+                                        <span class="text-2xl md:text-3xl leading-[1.6] text-[var(--color-earthy-coral)] font-medium italic ml-1 transition-all duration-300">
+                                            {props.pendingText}
+                                            <span class="inline-block w-[3px] h-8 bg-[var(--color-earthy-coral)] align-middle ml-1 opacity-60 animate-pulse" />
+                                        </span>
+                                    </Show>
+                                </div>
+                            </div>
+
+                            {/* Listening indicator when idle but recording */}
+                            <Show when={props.isRecording && !props.pendingText && !props.confirmedText}>
+                                <div class="flex items-center gap-3">
+                                    <div class="w-2 h-2 rounded-full bg-[var(--color-earthy-coral)] animate-pulse" />
+                                    <span class="text-[10px] font-semibold uppercase tracking-widest text-[var(--color-earthy-soft-brown)]">Listening...</span>
+                                    <div class="flex gap-1">
+                                        <div class="w-1.5 h-1.5 bg-[var(--color-earthy-muted-green)] rounded-full animate-bounce opacity-60" />
+                                        <div class="w-1.5 h-1.5 bg-[var(--color-earthy-muted-green)] rounded-full animate-bounce opacity-80 [animation-delay:0.2s]" />
+                                        <div class="w-1.5 h-1.5 bg-[var(--color-earthy-muted-green)] rounded-full animate-bounce [animation-delay:0.4s]" />
+                                    </div>
+                                </div>
+                            </Show>
+                        </div>
+                    </Show>
+                </div>
+            }>
+                <div
+                    ref={mergedContainerRef}
+                    class="flex-1 overflow-y-auto scroll-smooth"
+                >
+                    <div class="story-font py-2 space-y-4">
+                        {/* Mobile / tablet stacked layout */}
+                        <div class="flex flex-col gap-4 lg:hidden">
+                            <div class="px-3 py-3 rounded-lg border border-[var(--color-earthy-sage)]/40 bg-[var(--color-earthy-sage)]/10 flex flex-col">
+                                <div class="text-[10px] font-semibold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-2 shrink-0">
+                                    Full Text Body
+                                </div>
+                                <div class="max-h-[38vh] overflow-y-auto custom-scrollbar pr-1">
+                                    {renderFullTextContent()}
+                                </div>
+                            </div>
+
+                            <div class="px-3 py-3 rounded-lg border border-[var(--color-earthy-sage)]/40 bg-[var(--color-earthy-bg)]/60 flex flex-col">
+                                <div class="text-[10px] font-semibold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-2 shrink-0">
+                                    Sentence List
+                                </div>
+                                <div ref={sentenceListMobileRef} class="max-h-[46vh] overflow-y-auto custom-scrollbar pr-1">
+                                    {renderSentenceListContent()}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Desktop adjustable split layout (defaults to 50/50) */}
+                        <div
+                            ref={mergedSplitContainerRef}
+                            class="hidden lg:flex items-stretch h-[min(70vh,760px)]"
+                        >
+                            <div
+                                class="min-w-0 px-3 py-3 rounded-l-lg border border-[var(--color-earthy-sage)]/40 bg-[var(--color-earthy-sage)]/10 flex flex-col"
+                                style={{ width: `calc(${(mergedSplitRatio() * 100).toFixed(3)}% - 6px)` }}
+                            >
+                                <div class="text-[10px] font-semibold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-2 shrink-0">
+                                    Full Text Body
+                                </div>
+                                <div class="flex-1 overflow-y-auto custom-scrollbar pr-1">
+                                    {renderFullTextContent()}
+                                </div>
+                            </div>
+
+                            <div
+                                class="w-3 shrink-0 relative cursor-col-resize group touch-none"
+                                onMouseDown={startSplitResize}
+                                role="separator"
+                                aria-orientation="vertical"
+                                aria-label="Adjust merged split"
+                            >
+                                <div class={`absolute inset-y-0 left-1/2 -translate-x-1/2 w-px transition-colors ${
+                                    isSplitResizing()
+                                        ? 'bg-[var(--color-earthy-muted-green)]'
+                                        : 'bg-[var(--color-earthy-sage)]/70 group-hover:bg-[var(--color-earthy-soft-brown)]/80'
+                                }`} />
+                                <div class={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2.5 h-10 rounded-full border transition-colors ${
+                                    isSplitResizing()
+                                        ? 'bg-[var(--color-earthy-sage)] border-[var(--color-earthy-muted-green)]/80'
+                                        : 'bg-[var(--color-earthy-bg)] border-[var(--color-earthy-sage)]/60 group-hover:border-[var(--color-earthy-soft-brown)]/80'
+                                }`} />
+                            </div>
+
+                            <div
+                                class="min-w-0 px-3 py-3 rounded-r-lg border border-[var(--color-earthy-sage)]/40 bg-[var(--color-earthy-bg)]/60 flex flex-col"
+                                style={{ width: `calc(${((1 - mergedSplitRatio()) * 100).toFixed(3)}% - 6px)` }}
+                            >
+                                <div class="text-[10px] font-semibold uppercase tracking-widest text-[var(--color-earthy-soft-brown)] mb-2 shrink-0">
+                                    Sentence List
+                                </div>
+                                <div ref={sentenceListDesktopRef} class="flex-1 overflow-y-auto custom-scrollbar pr-1">
+                                    {renderSentenceListContent()}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Show>
+
+            {/* Merge Stats / Legend (Floating style inside container) */}
+            <Show when={props.showConfidence && props.isRecording && (props.lcsLength !== undefined)}>
+                <div class="mt-4 flex items-center gap-4 text-[10px] font-bold text-[var(--color-earthy-soft-brown)] uppercase tracking-widest bg-[var(--color-earthy-bg)]/80 backdrop-blur-sm self-start px-4 py-2 rounded-full border border-[var(--color-earthy-sage)]/50">
+                    <div class="flex items-center gap-1.5">
+                        <span class={`w-2 h-2 rounded-full ${props.anchorValid ? 'bg-[var(--color-earthy-muted-green)]' : 'bg-[var(--color-earthy-coral)]'}`} />
+                        <span>LCS: {props.lcsLength}</span>
+                    </div>
+                    <div class="w-px h-3 bg-[var(--color-earthy-sage)]" />
+                    <span class="opacity-60">PTFA Merged</span>
+                </div>
+            </Show>
+        </div>
+    );
+};
+
+export default TranscriptionDisplay;
+

src/components/Waveform.tsx

@@ -0,0 +1,95 @@
+import { Component, onCleanup, onMount } from 'solid-js';
+
+interface WaveformProps {
+  audioLevel: number;
+  /** Oscilloscope samples: Float32Array -1..1 from getByteTimeDomainData */
+  barLevels?: Float32Array;
+  isRecording: boolean;
+  barCount?: number;
+}
+
+/**
+ * Oscilloscope-style waveform using AnalyserNode.getByteTimeDomainData (native, fast).
+ */
+export const Waveform: Component<WaveformProps> = (props) => {
+  let canvasRef: HTMLCanvasElement | undefined;
+  let ctx: CanvasRenderingContext2D | null = null;
+  let animationId: number | undefined;
+  let resizeObserver: ResizeObserver | null = null;
+
+  const updateCanvasSize = () => {
+    if (!canvasRef?.parentElement) return;
+    const rect = canvasRef.parentElement.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = Math.floor(rect.width * dpr);
+    const h = Math.floor(rect.height * dpr);
+    if (canvasRef.width !== w || canvasRef.height !== h) {
+      canvasRef.width = w;
+      canvasRef.height = h;
+    }
+  };
+
+  const animate = () => {
+    animationId = requestAnimationFrame(animate);
+    if (!ctx || !canvasRef) return;
+
+    const w = canvasRef.width;
+    const h = canvasRef.height;
+    if (w === 0 || h === 0) return;
+
+    const samples = props.barLevels;
+    const n = samples && samples.length > 0 ? samples.length : 0;
+
+    const bg = getComputedStyle(canvasRef).getPropertyValue('--color-earthy-bg').trim() || '#faf8f5';
+    const color = getComputedStyle(canvasRef).getPropertyValue('--color-primary').trim() || '#14b8a6';
+
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, w, h);
+
+    if (props.isRecording && samples && n > 0) {
+      const centerY = h / 2;
+      const amp = (h / 2) * 0.9;
+
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(0, centerY - Math.max(-1, Math.min(1, samples[0])) * amp);
+      for (let i = 1; i < n; i++) {
+        const x = (i / (n - 1)) * w;
+        const y = centerY - Math.max(-1, Math.min(1, samples[i])) * amp;
+        ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+    }
+  };
+
+  onMount(() => {
+    if (canvasRef) {
+      updateCanvasSize();
+      ctx = canvasRef.getContext('2d', { alpha: false });
+      if (resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateCanvasSize) : null) {
+        resizeObserver.observe(canvasRef.parentElement ?? canvasRef);
+      }
+    }
+    animationId = requestAnimationFrame(animate);
+  });
+
+  onCleanup(() => {
+    cancelAnimationFrame(animationId!);
+    resizeObserver?.disconnect();
+  });
+
+  return (
+    <div class="h-12 w-full overflow-hidden rounded-md bg-[var(--color-earthy-bg)]">
+      <canvas ref={canvasRef} class="w-full h-full block" />
+    </div>
+  );
+};
+
+export const SPECTRUM_BAR_COUNT = 128;
+
+export const CompactWaveform: Component<WaveformProps> = (props) => (
+  <Waveform {...props} barCount={props.barLevels?.length} />
+);
+
+export default Waveform;

src/components/index.ts

@@ -0,0 +1,12 @@
+export * from './LayeredBufferVisualizer';
+export * from './Sidebar';
+export * from './StatusBar';
+export * from './TranscriptionDisplay';
+export * from './Waveform';
+export * from './ModelLoadingOverlay';
+export * from './DebugPanel';
+export * from './BufferVisualizer';
+export * from './EnergyMeter';
+export * from './PrivacyBadge';
+export * from './ContextPanel';
+export * from './SettingsPanel';

src/csp.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { Window } from 'happy-dom';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+describe('Content Security Policy', () => {
+  it('should be present in index.html', () => {
+    const htmlPath = path.resolve(__dirname, '../index.html');
+    const html = fs.readFileSync(htmlPath, 'utf-8');
+    const window = new Window();
+    const document = window.document;
+    document.write(html);
+
+    const meta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
+    expect(meta).not.toBeNull();
+
+    const content = meta?.getAttribute('content') || '';
+
+    // Check for critical directives
+    expect(content).toContain("default-src 'self'");
+    expect(content).toContain("script-src 'self'");
+    expect(content).toContain("object-src 'none'");
+
+    // Check specific allowances
+    expect(content).toContain('https://huggingface.co');
+    expect(content).toContain('https://*.hf.co');
+    expect(content).toContain('blob:'); // For workers
+    expect(content).toContain("worker-src 'self' blob:");
+  });
+});

src/index.css

@@ -1,13 +1,255 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import "tailwindcss";
+
+@theme {
+  /* Earthy palette from reference */
+  --color-earthy-bg: #F9F7F2;
+  --color-earthy-muted-green: #6B705C;
+  --color-earthy-soft-brown: #A5A58D;
+  --color-earthy-dark-brown: #3D405B;
+  --color-earthy-coral: #E07A5F;
+  --color-earthy-sage: #B7B7A4;
+
+  /* Semantic aliases (accent = coral for focus/selection) */
+  --color-primary: #6B705C;
+  --color-accent: #E07A5F;
+  --color-neu-bg: #F9F7F2;
+  --color-workspace-bg: #F9F7F2;
+  --color-sidebar-border: #B7B7A4;
+
+  --font-display: "Plus Jakarta Sans", sans-serif;
+  --font-sans: "Plus Jakarta Sans", sans-serif;
+  --font-story: "Crimson Pro", serif;
+
+  /* Softer shadows for earthy theme */
+  --shadow-neu-flat: 4px 4px 10px rgba(183, 183, 164, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.8);
+  --shadow-neu-pressed: inset 3px 3px 6px rgba(183, 183, 164, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.6);
+  --shadow-neu-btn: 3px 3px 8px rgba(183, 183, 164, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.7);
+  --shadow-neu-btn-hover: 2px 2px 5px rgba(183, 183, 164, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.6);
+}
+
+/* Material Symbols - ensure they load and look sharp. */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined' !important;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* Story/content font class */
+.story-font {
+  font-family: var(--font-story);
+}
+
+/* Custom Utilities (earthy) */
+@utility neu-icon-btn {
+  background-color: var(--color-neu-bg);
+  box-shadow: var(--shadow-neu-btn);
+  transition: all 0.2s;
+  border: 1px solid var(--color-earthy-sage);
+
+  &:hover {
+    box-shadow: var(--shadow-neu-btn-hover);
+    transform: translateY(0.5px);
+  }
+
+  &:active,
+  &.active {
+    box-shadow: var(--shadow-neu-pressed);
+    color: var(--color-earthy-coral);
+  }
+}
+
+@utility neu-circle-btn {
+  @apply w-12 h-12 rounded-full flex items-center justify-center neu-icon-btn;
+}
+
+@utility neu-square-btn {
+  @apply w-12 h-12 rounded-xl flex items-center justify-center neu-icon-btn;
+}
+
+@utility nm-flat {
+  background-color: var(--color-neu-bg);
+  box-shadow: var(--shadow-neu-flat);
+}
+
+@utility nm-inset {
+  background-color: var(--color-neu-bg);
+  box-shadow: var(--shadow-neu-pressed);
+}
+
+@utility status-led {
+  @apply absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2;
+  border-color: var(--color-earthy-bg);
+}
+
+/* Load model button: spinning indicator while model is loading */
+@keyframes load-btn-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.load-btn-spin {
+  animation: load-btn-spin 1s linear infinite;
+}
+
+/* Custom scrollbar (earthy-sage) */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-earthy-sage);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-earthy-soft-brown);
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-earthy-sage);
+  border-radius: 10px;
+}
+
+.abstract-wave {
+  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
+}
+
+/* Global resets for the theme */
+body {
+  background-color: var(--color-earthy-bg);
+  font-family: var(--font-sans);
+  color: var(--color-earthy-dark-brown);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  padding: 0;
+}
+
+code,
+pre,
+.font-mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* Waveform animation */
+@keyframes wave {
+
+  0%,
+  100% {
+    height: 10%;
+    opacity: 0.5;
+  }
+
+  50% {
+    height: 100%;
+    opacity: 1;
+  }
+}
+
+.waveform-bar-anim {
+  animation: wave 1.2s ease-in-out infinite;
+}
+
+::selection {
+  background-color: var(--color-earthy-coral);
+  color: white;
+}
+
+.transition-glass {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes pulse-gentle {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-pulse-gentle {
+  animation: pulse-gentle 2s ease-in-out infinite;
+}
+
+/* Debug panel adjustable settings: earthy track + dark handle */
+.debug-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.debug-slider::-webkit-slider-runnable-track {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--color-earthy-sage);
+  opacity: 0.4;
+}
+
+.debug-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-earthy-muted-green);
+  border: 1px solid var(--color-earthy-dark-brown);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  margin-top: -5px;
+  cursor: pointer;
+}
+
+.debug-slider::-moz-range-track {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--color-earthy-sage);
+  opacity: 0.4;
+}
+
+.debug-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-earthy-muted-green);
+  border: 1px solid var(--color-earthy-dark-brown);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+/* Settings panel: slide in from the right, no full-screen block */
+.settings-panel-slide {
+  transform: translateX(100%);
+  transition: transform 0.3s ease-out;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
+}
+.settings-panel-slide--open {
+  transform: translateX(0);
 }

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * Keet v2.0 - Entry Point
+ * 
+ * Privacy-first, offline-capable real-time transcription.
+ */
+
+/* @refresh reload */
+import { render } from 'solid-js/web';
+import App from './App';
+import './index.css';
+
+const root = document.getElementById('root');
+
+if (!root) {
+  throw new Error('Root element not found');
+}
+
+render(() => <App />, root);

src/lib/audio/AudioEngine.ts

@@ -0,0 +1,1014 @@
+import { AudioEngine as IAudioEngine, AudioEngineConfig, AudioSegment, IRingBuffer, AudioMetrics } from './types';
+import { RingBuffer } from './RingBuffer';
+import { AudioSegmentProcessor, ProcessedSegment } from './AudioSegmentProcessor';
+import { resampleLinear } from './utils';
+
+/** Duration of the visualization buffer in seconds */
+const VISUALIZATION_BUFFER_DURATION = 30;
+
+/**
+ * AudioEngine implementation for capturing audio, buffering it, and performing VAD.
+ * Uses AudioSegmentProcessor for robust speech detection (incl. lookback).
+ */
+export class AudioEngine implements IAudioEngine {
+    private config: AudioEngineConfig;
+    private ringBuffer: IRingBuffer;
+    private audioProcessor: AudioSegmentProcessor; // Replaces EnergyVAD
+    private deviceId: string | null = null;
+
+    private audioContext: AudioContext | null = null;
+    private mediaStream: MediaStream | null = null;
+    private workletNode: AudioWorkletNode | null = null;
+    private sourceNode: MediaStreamAudioSourceNode | null = null;
+
+    // AnalyserNode for oscilloscope waveform (native getByteTimeDomainData)
+    private analyserNode: AnalyserNode | null = null;
+    private analyserSourceNode: MediaStreamAudioSourceNode | null = null;
+    private analyserGainNode: GainNode | null = null;
+    private analyserTimeBuffer: Uint8Array | null = null;
+    private waveformOut: Float32Array | null = null;
+    private readonly ANALYSER_FFT_SIZE = 256;
+    private readonly ANALYSER_SMOOTHING = 0.3; // Low = fast oscilloscope response
+
+    // Track device vs target sample rates
+    private deviceSampleRate: number = 48000;
+    private targetSampleRate: number = 16000;
+
+    private currentEnergy: number = 0;
+
+    private segmentCallbacks: Array<(segment: AudioSegment) => void> = [];
+
+    // Fixed-window streaming state (v3 token streaming mode)
+    private windowCallbacks: Array<{
+        windowDuration: number;
+        overlapDuration: number;
+        triggerInterval: number;
+        callback: (audio: Float32Array, startTime: number) => void;
+        lastWindowEnd: number; // Frame offset of last window end
+    }> = [];
+
+    // Resampled audio chunk callbacks (for mel worker, etc.)
+    private audioChunkCallbacks: Array<(chunk: Float32Array) => void> = [];
+
+    // SMA buffer for energy calculation
+    private energyHistory: number[] = [];
+
+    // Last N energy values for bar visualizer (oldest first when read)
+    private energyBarHistory: number[] = [];
+    private readonly BAR_LEVELS_SIZE = 64;
+
+    // Visualization Summary Buffer (Low-Res Min/Max pairs)
+    private visualizationSummary: Float32Array | null = null;
+    private visualizationSummaryPosition: number = 0;
+    private readonly VIS_SUMMARY_SIZE = 2000; // 2000 min/max pairs for 30 seconds = 15ms resolution
+
+    // Raw visualization buffer (still kept for higher-res requests if needed, but summary is preferred)
+    private visualizationBuffer: Float32Array | null = null;
+    private visualizationBufferPosition: number = 0;
+    private visualizationBufferSize: number = 0;
+
+    // Metrics for UI components
+    private metrics: AudioMetrics = {
+        currentEnergy: 0,
+        averageEnergy: 0,
+        peakEnergy: 0,
+        noiseFloor: 0.01,
+        currentSNR: 0,
+        isSpeaking: false,
+    };
+
+    // Subscribers for visualization updates
+    private visualizationCallbacks: Array<(data: Float32Array, metrics: AudioMetrics, bufferEndTime: number) => void> = [];
+    private lastVisualizationNotifyTime: number = 0;
+    private readonly VISUALIZATION_NOTIFY_INTERVAL_MS = 16; // ~60fps for responsive oscilloscope
+
+    // Recent segments for visualization (stores timing info only)
+    private recentSegments: Array<{ startTime: number; endTime: number; isProcessed: boolean }> = [];
+    private readonly MAX_SEGMENTS_FOR_VISUALIZATION = 50;
+
+    constructor(config: Partial<AudioEngineConfig> = {}) {
+        this.config = {
+            sampleRate: 16000,
+            bufferDuration: 120,
+            energyThreshold: 0.08, // Match legacy UI project 'medium'
+            minSpeechDuration: 240, // Match legacy UI project
+            minSilenceDuration: 400, // Match legacy UI project
+            maxSegmentDuration: 4.8, // Match legacy UI project
+
+            // Advanced VAD defaults
+            lookbackDuration: 0.120,
+            speechHangover: 0.16,
+            minEnergyIntegral: 22,
+            minEnergyPerSecond: 5,
+            useAdaptiveEnergyThresholds: true,
+            adaptiveEnergyIntegralFactor: 25.0,
+            adaptiveEnergyPerSecondFactor: 10.0,
+            minAdaptiveEnergyIntegral: 3,
+            minAdaptiveEnergyPerSecond: 1,
+            maxSilenceWithinSpeech: 0.160,
+            endingSpeechTolerance: 0.240,
+            ...config,
+        };
+
+        this.deviceId = this.config.deviceId || null;
+        this.targetSampleRate = this.config.sampleRate;
+
+        // RingBuffer operates at TARGET sample rate (16kHz)
+        this.ringBuffer = new RingBuffer(this.targetSampleRate, this.config.bufferDuration);
+
+        // Initialize AudioSegmentProcessor
+        this.audioProcessor = new AudioSegmentProcessor({
+            sampleRate: this.targetSampleRate,
+            energyThreshold: this.config.energyThreshold,
+            minSpeechDuration: this.config.minSpeechDuration,
+            silenceThreshold: this.config.minSilenceDuration,
+            maxSegmentDuration: this.config.maxSegmentDuration,
+            lookbackDuration: this.config.lookbackDuration,
+            maxSilenceWithinSpeech: this.config.maxSilenceWithinSpeech,
+            endingSpeechTolerance: this.config.endingSpeechTolerance,
+            snrThreshold: 3.0,
+            minSnrThreshold: 1.0,
+            noiseFloorAdaptationRate: 0.05,
+            fastAdaptationRate: 0.15,
+            minBackgroundDuration: 1.0,
+            energyRiseThreshold: 0.08
+        });
+
+        // Initialize visualization buffer (30 seconds at target sample rate)
+        this.visualizationBufferSize = Math.round(this.targetSampleRate * VISUALIZATION_BUFFER_DURATION);
+        this.visualizationBuffer = new Float32Array(this.visualizationBufferSize);
+        this.visualizationBufferPosition = 0;
+
+        // Initialize visualization summary (2000 points for 30s)
+        this.visualizationSummary = new Float32Array(this.VIS_SUMMARY_SIZE * 2);
+        this.visualizationSummaryPosition = 0;
+
+        console.log('[AudioEngine] Initialized with config:', this.config);
+    }
+
+    private isWorkletInitialized = false;
+
+    async init(): Promise<void> {
+        // Request microphone permission with optional deviceId
+        try {
+            if (this.mediaStream) {
+                this.mediaStream.getTracks().forEach(t => t.stop());
+            }
+
+            const constraints: MediaStreamConstraints = {
+                audio: {
+                    deviceId: this.deviceId ? { exact: this.deviceId } : undefined,
+                    channelCount: 1,
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    autoGainControl: false,
+                },
+            };
+
+            console.log('[AudioEngine] Requesting microphone:', constraints);
+            this.mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+            console.log('[AudioEngine] Microphone stream acquired:', this.mediaStream.id);
+        } catch (err) {
+            console.error('[AudioEngine] Failed to get media stream:', err);
+            throw err;
+        }
+
+        const track = this.mediaStream!.getAudioTracks()[0];
+        const trackSettings = track?.getSettings?.();
+        // Device sample rate (what the mic gives us)
+        this.deviceSampleRate = trackSettings?.sampleRate ?? 48000;
+        console.log('[AudioEngine] Device sample rate:', this.deviceSampleRate, '-> Target:', this.targetSampleRate);
+
+        if (this.audioContext && this.audioContext.sampleRate !== this.deviceSampleRate) {
+            await this.audioContext.close();
+            this.audioContext = null;
+        }
+        if (!this.audioContext) {
+            this.audioContext = new AudioContext({
+                sampleRate: this.deviceSampleRate,
+                latencyHint: 'interactive',
+            });
+            console.log('[AudioEngine] Created AudioContext:', this.audioContext.state, 'sampleRate:', this.audioContext.sampleRate);
+        }
+
+        // Re-initialize components with correct rates
+        this.ringBuffer = new RingBuffer(this.targetSampleRate, this.config.bufferDuration);
+
+        // Update processor config
+        this.audioProcessor = new AudioSegmentProcessor({
+            sampleRate: this.targetSampleRate,
+            energyThreshold: this.config.energyThreshold,
+            minSpeechDuration: this.config.minSpeechDuration,
+            silenceThreshold: this.config.minSilenceDuration,
+            maxSegmentDuration: this.config.maxSegmentDuration,
+        });
+
+        if (!this.isWorkletInitialized) {
+            const windowDuration = 0.080;
+            const processorCode = `
+                class CaptureProcessor extends AudioWorkletProcessor {
+                    constructor(options) {
+                        super(options);
+                        const opts = options?.processorOptions || {};
+                        this.inputSampleRate = opts.inputSampleRate || 16000;
+                        this.targetSampleRate = opts.targetSampleRate || this.inputSampleRate;
+                        this.ratio = this.inputSampleRate / this.targetSampleRate;
+                        this.bufferSize = Math.round(${windowDuration} * this.inputSampleRate);
+                        this.buffer = new Float32Array(this.bufferSize);
+                        this.index = 0;
+                        this._lastLog = 0;
+                    }
+
+                    _emitChunk() {
+                        let out;
+                        let maxAbs = 0;
+
+                        if (this.targetSampleRate === this.inputSampleRate) {
+                            out = new Float32Array(this.bufferSize);
+                            for (let i = 0; i < this.bufferSize; i++) {
+                                const v = this.buffer[i];
+                                out[i] = v;
+                                const a = v < 0 ? -v : v;
+                                if (a > maxAbs) maxAbs = a;
+                            }
+                        } else {
+                            const outLength = Math.floor(this.bufferSize / this.ratio);
+                            out = new Float32Array(outLength);
+                            for (let i = 0; i < outLength; i++) {
+                                const srcIndex = i * this.ratio;
+                                const srcIndexFloor = Math.floor(srcIndex);
+                                const srcIndexCeil = Math.min(srcIndexFloor + 1, this.bufferSize - 1);
+                                const t = srcIndex - srcIndexFloor;
+                                const v = this.buffer[srcIndexFloor] * (1 - t) + this.buffer[srcIndexCeil] * t;
+                                out[i] = v;
+                                const a = v < 0 ? -v : v;
+                                if (a > maxAbs) maxAbs = a;
+                            }
+                        }
+
+                        this.port.postMessage(
+                            { type: 'audio', samples: out, sampleRate: this.targetSampleRate, maxAbs },
+                            [out.buffer]
+                        );
+                    }
+
+                    process(inputs) {
+                        const input = inputs[0];
+                        if (!input || !input[0]) return true;
+                        
+                        const channelData = input[0];
+                        
+                        // Buffer the data
+                        for (let i = 0; i < channelData.length; i++) {
+                            this.buffer[this.index++] = channelData[i];
+                            
+                            if (this.index >= this.bufferSize) {
+                                this._emitChunk();
+                                this.index = 0;
+                                
+                                // Debug log every ~5 seconds
+                                const now = Date.now();
+                                if (now - this._lastLog > 5000) {
+                                    this.port.postMessage({ type: 'log', message: '[AudioWorklet] Active' });
+                                    this._lastLog = now;
+                                }
+                            }
+                        }
+                        
+                        return true;
+                    }
+                }
+                registerProcessor('capture-processor', CaptureProcessor);
+            `;
+            const blob = new Blob([processorCode], { type: 'application/javascript' });
+            const url = URL.createObjectURL(blob);
+            try {
+                await this.audioContext.audioWorklet.addModule(url);
+                this.isWorkletInitialized = true;
+                console.log('[AudioEngine] AudioWorklet module loaded');
+            } catch (err) {
+                console.error('[AudioEngine] Failed to load worklet:', err);
+                if (err instanceof Error && err.name === 'InvalidStateError') {
+                    // Ignore if already registered
+                    this.isWorkletInitialized = true;
+                }
+            }
+        }
+
+        // Re-create worklet node if needed (it might handle dispose differently, but safe to new)
+        if (this.workletNode) this.workletNode.disconnect();
+
+        this.workletNode = new AudioWorkletNode(this.audioContext, 'capture-processor', {
+            processorOptions: { inputSampleRate: this.deviceSampleRate, targetSampleRate: this.targetSampleRate },
+        });
+        this.workletNode.port.onmessage = (event: MessageEvent<any>) => {
+            if (event.data?.type === 'audio' && event.data.samples instanceof Float32Array) {
+                this.handleAudioChunk(event.data.samples, event.data.maxAbs, event.data.sampleRate);
+            } else if (event.data instanceof Float32Array) {
+                this.handleAudioChunk(event.data, undefined, this.deviceSampleRate);
+            } else if (event.data?.type === 'log') {
+                console.log(event.data.message);
+            }
+        };
+        this.workletNode.onprocessorerror = (e) => {
+            console.error('[AudioEngine] Worklet processor error:', e);
+        };
+
+        // Reconnect source node
+        this.sourceNode?.disconnect();
+        this.sourceNode = this.audioContext.createMediaStreamSource(this.mediaStream);
+        this.sourceNode.connect(this.workletNode);
+
+        // AnalyserNode branch for lightweight preview bars (native FFT, no mel worker)
+        this.disposeAnalyser();
+        this.analyserSourceNode = this.audioContext.createMediaStreamSource(this.mediaStream);
+        this.analyserNode = this.audioContext.createAnalyser();
+        this.analyserNode.fftSize = this.ANALYSER_FFT_SIZE;
+        this.analyserNode.smoothingTimeConstant = this.ANALYSER_SMOOTHING;
+        this.analyserTimeBuffer = new Uint8Array(this.analyserNode.fftSize);
+        this.waveformOut = new Float32Array(this.analyserNode.fftSize);
+
+        this.analyserGainNode = this.audioContext.createGain();
+        this.analyserGainNode.gain.value = 0;
+
+        this.analyserSourceNode.connect(this.analyserNode);
+        this.analyserNode.connect(this.analyserGainNode);
+        this.analyserGainNode.connect(this.audioContext.destination);
+
+        // Keep graph alive
+        this.workletNode.connect(this.audioContext.destination);
+        console.log('[AudioEngine] Graph connected: Source -> Worklet, AnalyserNode for oscilloscope');
+    }
+
+    async start(): Promise<void> {
+        if (!this.mediaStream || !this.audioContext || !this.workletNode) {
+            await this.init();
+        }
+
+        if (this.audioContext?.state === 'suspended') {
+            await this.audioContext.resume();
+        }
+    }
+
+    stop(): void {
+        if (this.audioContext?.state === 'running') {
+            this.audioContext.suspend();
+        }
+    }
+
+    /**
+     * Reset buffers and VAD state for a new session while keeping the audio graph.
+     * Aligns visualization + segment timebase to 0, matching legacy UI project behavior.
+     */
+    reset(): void {
+        // Reset audio/VAD state
+        this.ringBuffer.reset();
+        this.audioProcessor.reset();
+        this.currentEnergy = 0;
+
+        // Reset metrics
+        this.metrics = {
+            currentEnergy: 0,
+            averageEnergy: 0,
+            peakEnergy: 0,
+            noiseFloor: 0.01,
+            currentSNR: 0,
+            isSpeaking: false,
+        };
+
+        // Clear segment history used by the visualizer
+        this.recentSegments = [];
+        this.energyBarHistory = [];
+
+        // Reset visualization buffer
+        if (this.visualizationBuffer) {
+            this.visualizationBuffer.fill(0);
+        }
+        this.visualizationBufferPosition = 0;
+
+        // Reset windowed streaming cursors
+        for (const entry of this.windowCallbacks) {
+            entry.lastWindowEnd = 0;
+        }
+
+        // Push a blank update so UI clears stale waveform/segments
+        this.notifyVisualizationUpdate();
+    }
+
+    getCurrentEnergy(): number {
+        return this.currentEnergy;
+    }
+
+    /** Oscilloscope waveform from AnalyserNode.getByteTimeDomainData (native, fast). Values -1..1. */
+    getBarLevels(): Float32Array {
+        if (this.analyserNode && this.analyserTimeBuffer && this.waveformOut) {
+            (this.analyserNode as { getByteTimeDomainData(array: Uint8Array): void }).getByteTimeDomainData(this.analyserTimeBuffer);
+            for (let i = 0; i < this.analyserTimeBuffer.length; i++) {
+                this.waveformOut[i] = (this.analyserTimeBuffer[i] - 128) / 128; // 0..255 -> -1..1
+            }
+            return this.waveformOut;
+        }
+        const out = new Float32Array(this.BAR_LEVELS_SIZE);
+        const h = this.energyBarHistory;
+        const start = h.length <= this.BAR_LEVELS_SIZE ? 0 : h.length - this.BAR_LEVELS_SIZE;
+        for (let i = 0; i < this.BAR_LEVELS_SIZE; i++) {
+            const idx = start + i;
+            out[i] = idx < h.length ? Math.min(1, Math.max(0, h[idx])) : 0;
+        }
+        return out;
+    }
+
+    getSignalMetrics(): { noiseFloor: number; snr: number; threshold: number; snrThreshold: number } {
+        const stats = this.audioProcessor.getStats();
+        return {
+            noiseFloor: stats.noiseFloor ?? 0.0001,
+            snr: stats.snr ?? 0,
+            threshold: this.config.energyThreshold,
+            snrThreshold: stats.snrThreshold ?? 3.0
+        };
+    }
+
+    isSpeechActive(): boolean {
+        return this.audioProcessor.getStateInfo().inSpeech;
+    }
+
+    getRingBuffer(): IRingBuffer {
+        return this.ringBuffer;
+    }
+
+    onSpeechSegment(callback: (segment: AudioSegment) => void): () => void {
+        this.segmentCallbacks.push(callback);
+        return () => {
+            this.segmentCallbacks = this.segmentCallbacks.filter((cb) => cb !== callback);
+        };
+    }
+
+    /**
+     * Subscribe to fixed-window chunks for token streaming mode.
+     * Fires every triggerInterval seconds with windowDuration of audio.
+     */
+    onWindowChunk(
+        windowDuration: number,
+        overlapDuration: number,
+        triggerInterval: number,
+        callback: (audio: Float32Array, startTime: number) => void
+    ): () => void {
+        const entry = {
+            windowDuration,
+            overlapDuration,
+            triggerInterval,
+            callback,
+            lastWindowEnd: 0, // Will be set on first chunk
+        };
+        this.windowCallbacks.push(entry);
+
+        return () => {
+            this.windowCallbacks = this.windowCallbacks.filter((e) => e !== entry);
+        };
+    }
+
+    /**
+     * Subscribe to every resampled audio chunk (16kHz).
+     * Used to feed the continuous mel producer worker.
+     * Returns an unsubscribe function.
+     */
+    onAudioChunk(callback: (chunk: Float32Array) => void): () => void {
+        this.audioChunkCallbacks.push(callback);
+        return () => {
+            this.audioChunkCallbacks = this.audioChunkCallbacks.filter((cb) => cb !== callback);
+        };
+    }
+
+    updateConfig(config: Partial<AudioEngineConfig>): void {
+        this.config = { ...this.config, ...config };
+
+        // Update processor config
+        if (config.energyThreshold !== undefined) this.audioProcessor.setThreshold(config.energyThreshold);
+        if (config.minSpeechDuration !== undefined) this.audioProcessor.setMinSpeechDuration(config.minSpeechDuration);
+        if (config.minSilenceDuration !== undefined) this.audioProcessor.setSilenceLength(config.minSilenceDuration);
+        if (config.maxSegmentDuration !== undefined) this.audioProcessor.setMaxSegmentDuration(config.maxSegmentDuration);
+
+        // Advanced VAD updates
+        if (config.lookbackDuration !== undefined) this.audioProcessor.setLookbackDuration(config.lookbackDuration);
+        if (config.overlapDuration !== undefined) this.audioProcessor.setOverlapDuration(config.overlapDuration);
+        if (config.maxSilenceWithinSpeech !== undefined) this.audioProcessor.setMaxSilenceWithinSpeech(config.maxSilenceWithinSpeech);
+        if (config.endingSpeechTolerance !== undefined) this.audioProcessor.setEndingSpeechTolerance(config.endingSpeechTolerance);
+
+        if (config.snrThreshold !== undefined) this.audioProcessor.setSnrThreshold(config.snrThreshold);
+        if (config.minSnrThreshold !== undefined) this.audioProcessor.setMinSnrThreshold(config.minSnrThreshold);
+    }
+
+    async setDevice(deviceId: string): Promise<void> {
+        this.deviceId = deviceId;
+        await this.init();
+
+        // Reconnect if running
+        if (this.audioContext && this.workletNode) {
+            this.sourceNode?.disconnect();
+            this.sourceNode = this.audioContext.createMediaStreamSource(this.mediaStream!);
+            this.sourceNode.connect(this.workletNode);
+        }
+    }
+
+    private disposeAnalyser(): void {
+        this.analyserSourceNode?.disconnect();
+        this.analyserNode?.disconnect();
+        this.analyserGainNode?.disconnect();
+        this.analyserSourceNode = null;
+        this.analyserNode = null;
+        this.analyserGainNode = null;
+        this.analyserTimeBuffer = null;
+        this.waveformOut = null;
+    }
+
+    dispose(): void {
+        this.stop();
+        this.disposeAnalyser();
+        this.mediaStream?.getTracks().forEach(track => track.stop());
+        this.audioContext?.close();
+        this.audioContext = null;
+        this.mediaStream = null;
+        this.workletNode = null;
+        this.sourceNode = null;
+    }
+
+    private handleAudioChunk(rawChunk: Float32Array, precomputedMaxAbs?: number, chunkSampleRate?: number): void {
+        // 0. Ensure chunk is at target sample rate (resample only if needed)
+        const sampleRate = chunkSampleRate ?? this.targetSampleRate;
+        const needsResample = sampleRate !== this.targetSampleRate;
+        const chunk = needsResample
+            ? resampleLinear(rawChunk, sampleRate, this.targetSampleRate)
+            : rawChunk;
+
+        // Calculate chunk energy (Peak Amplitude) + SMA for VAD compatibility
+        let maxAbs = (!needsResample && precomputedMaxAbs !== undefined) ? precomputedMaxAbs : 0;
+        if (precomputedMaxAbs === undefined || needsResample) {
+            for (let i = 0; i < chunk.length; i++) {
+                const abs = Math.abs(chunk[i]);
+                if (abs > maxAbs) maxAbs = abs;
+            }
+        }
+
+        // SMA Smoothing (matching legacy UI project logic)
+        this.energyHistory.push(maxAbs);
+        if (this.energyHistory.length > 6) {
+            this.energyHistory.shift();
+        }
+        const energy = this.energyHistory.reduce((a: number, b: number) => a + b, 0) / this.energyHistory.length;
+
+        this.currentEnergy = energy;
+        this.energyBarHistory.push(energy);
+        if (this.energyBarHistory.length > this.BAR_LEVELS_SIZE) {
+            this.energyBarHistory.shift();
+        }
+
+        // Log when energy crosses threshold if state is close to changing
+        const isSpeech = energy > this.config.energyThreshold;
+        const wasSpeaking = this.metrics.isSpeaking;
+        if (isSpeech !== wasSpeaking) {
+            console.debug(`[AudioEngine] Energy threshold crossed: ${energy.toFixed(6)} > ${this.config.energyThreshold} = ${isSpeech}`);
+        }
+
+        // 1. Write to ring buffer before any callbacks can transfer the chunk.
+        this.ringBuffer.write(chunk);
+
+        const endFrame = this.ringBuffer.getCurrentFrame();
+
+        // 2. Process VAD on resampled audio
+        // The processor uses its own internal history for lookback, but we pull full audio from ring buffer later.
+        const currentTime = this.ringBuffer.getCurrentTime();
+        const segments = this.audioProcessor.processAudioData(chunk, currentTime, energy);
+
+        // 2.5 Update visualization buffer
+        this.updateVisualizationBuffer(chunk);
+
+        // 2.6 Update metrics
+        const stats = this.audioProcessor.getStats();
+        const stateInfo = this.audioProcessor.getStateInfo();
+
+        this.metrics.currentEnergy = energy;
+        this.metrics.averageEnergy = this.metrics.averageEnergy * 0.95 + energy * 0.05;
+        this.metrics.peakEnergy = Math.max(this.metrics.peakEnergy * 0.99, energy);
+        this.metrics.noiseFloor = stats.noiseFloor ?? 0.01;
+        this.metrics.currentSNR = stats.snr ?? 0;
+        this.metrics.isSpeaking = stateInfo.inSpeech;
+
+        // Periodic debug log
+        if (Math.random() < 0.05) {
+            console.debug(`[AudioEngine] Metrics: E=${energy.toFixed(6)}, NF=${this.metrics.noiseFloor.toFixed(6)}, SNR=${this.metrics.currentSNR.toFixed(2)}, Speaking=${this.metrics.isSpeaking}`);
+        }
+
+        // 3. Handle segments
+        if (segments.length > 0) {
+            for (const seg of segments) {
+                // Apply lookback and overlap adjustments matching legacy UI project
+                const lookbackDuration = this.config.lookbackDuration ?? 0.120;
+                const startTime = Math.max(0, seg.startTime - lookbackDuration);
+
+                // Calculate the sample positions for audio extraction
+                const startFrame = Math.round(startTime * this.targetSampleRate);
+                const endFrame = Math.round(seg.endTime * this.targetSampleRate);
+
+                // Retrieval with padding (hangover)
+                const speechHangover = this.config.speechHangover ?? 0.16;
+                const paddedEndFrame = Math.min(
+                    this.ringBuffer.getCurrentFrame(),
+                    endFrame + Math.round(speechHangover * this.targetSampleRate)
+                );
+
+                try {
+                    const audioData = this.ringBuffer.read(startFrame, paddedEndFrame);
+
+                    // Calculate precise energy metrics for filtering
+                    const metrics = this.calculateSegmentEnergyMetrics(audioData, this.targetSampleRate);
+
+                    // Normalize power to 16kHz equivalent
+                    const normalizedPowerAt16k = metrics.averagePower * 16000;
+                    const normalizedEnergyIntegralAt16k = normalizedPowerAt16k * metrics.duration;
+
+                    // Adaptive threshold calculation
+                    let minEnergyIntegralThreshold = this.config.minEnergyIntegral ?? 22;
+                    let minEnergyPerSecondThreshold = this.config.minEnergyPerSecond ?? 5;
+
+                    if (this.config.useAdaptiveEnergyThresholds) {
+                        const windowSize = this.config.windowSize ?? Math.round(0.080 * this.targetSampleRate);
+                        const normalizedNoiseFloor = windowSize > 0 ? this.metrics.noiseFloor / windowSize : 0;
+                        const noiseFloorAt16k = normalizedNoiseFloor * 16000;
+
+                        const adaptiveMinEnergyIntegral = noiseFloorAt16k * (this.config.adaptiveEnergyIntegralFactor ?? 25.0);
+                        minEnergyIntegralThreshold = Math.max(this.config.minAdaptiveEnergyIntegral ?? 3, adaptiveMinEnergyIntegral);
+
+                        const adaptiveMinEnergyPerSecond = noiseFloorAt16k * (this.config.adaptiveEnergyPerSecondFactor ?? 10.0);
+                        minEnergyPerSecondThreshold = Math.max(this.config.minAdaptiveEnergyPerSecond ?? 1, adaptiveMinEnergyPerSecond);
+                    }
+
+                    const isValidSpeech =
+                        metrics.duration >= (this.config.minSpeechDuration / 1000) &&
+                        normalizedPowerAt16k >= minEnergyPerSecondThreshold &&
+                        normalizedEnergyIntegralAt16k >= minEnergyIntegralThreshold;
+
+                    if (isValidSpeech) {
+                        const audioSegment: AudioSegment = {
+                            startFrame: startFrame,
+                            endFrame: paddedEndFrame,
+                            duration: metrics.duration,
+                            averageEnergy: metrics.averagePower,
+                            timestamp: Date.now(),
+                        };
+                        this.notifySegment(audioSegment);
+                    } else {
+                        console.log('[AudioEngine] Filtered out noise segment:', {
+                            duration: metrics.duration,
+                            power: normalizedPowerAt16k,
+                            integral: normalizedEnergyIntegralAt16k
+                        });
+                    }
+                } catch (err) {
+                    console.warn('[AudioEngine] Failed to extract audio for validation:', err);
+                }
+            }
+        }
+
+        // 6. Fixed-window streaming (v3 token streaming mode)
+        this.processWindowCallbacks(endFrame);
+
+        // 7. Notify audio chunk subscribers AFTER internal processing.
+        // Callbacks may transfer the chunk's buffer; do not use `chunk` after this.
+        for (const cb of this.audioChunkCallbacks) {
+            cb(chunk);
+        }
+
+        // 8. Notify visualization subscribers
+        this.notifyVisualizationUpdate();
+    }
+
+    /**
+     * Helper to read audio from ring buffer and calculate energy metrics for a detected segment.
+     */
+    private calculateSegmentEnergyMetrics(audioData: Float32Array, sampleRate: number): { averagePower: number; duration: number; numSamples: number } {
+        if (!audioData || audioData.length === 0) {
+            return { averagePower: 0, duration: 0, numSamples: 0 };
+        }
+
+        const numSamples = audioData.length;
+        let sumOfSquares = 0;
+
+        for (let i = 0; i < numSamples; i++) {
+            sumOfSquares += audioData[i] * audioData[i];
+        }
+
+        const duration = numSamples / sampleRate;
+        const averagePower = numSamples > 0 ? sumOfSquares / numSamples : 0;
+
+        return {
+            averagePower,
+            duration,
+            numSamples
+        };
+    }
+
+    /**
+     * Process fixed-window callbacks for token streaming mode.
+     * Fires when enough audio has accumulated for a new window.
+     */
+    private processWindowCallbacks(currentFrame: number): void {
+        for (const entry of this.windowCallbacks) {
+            const windowFrames = Math.floor(entry.windowDuration * this.targetSampleRate);
+            const stepFrames = Math.floor(entry.triggerInterval * this.targetSampleRate);
+
+            // Initialize lastWindowEnd on first call
+            if (entry.lastWindowEnd === 0) {
+                entry.lastWindowEnd = currentFrame;
+                continue;
+            }
+
+            // Check if we have enough new audio for the next window
+            const framesSinceLastWindow = currentFrame - entry.lastWindowEnd;
+            if (framesSinceLastWindow >= stepFrames) {
+                // Calculate window boundaries
+                const windowEnd = currentFrame;
+                const windowStart = windowEnd - windowFrames;
+
+                // Ensure we have enough data in the ring buffer
+                const baseOffset = this.ringBuffer.getBaseFrameOffset();
+                if (windowStart >= baseOffset) {
+                    try {
+                        const audio = this.ringBuffer.read(windowStart, windowEnd);
+                        const startTime = windowStart / this.targetSampleRate;
+
+                        entry.callback(audio, startTime);
+                        entry.lastWindowEnd = windowEnd;
+                    } catch (e) {
+                        console.warn('[AudioEngine] Window read failed:', e);
+                    }
+                }
+            }
+        }
+    }
+
+    private notifySegment(segment: AudioSegment): void {
+        // Track segment for visualization
+        this.recentSegments.push({
+            startTime: segment.startFrame / this.targetSampleRate,
+            endTime: segment.endFrame / this.targetSampleRate,
+            isProcessed: false
+        });
+
+        // Limit segments count
+        if (this.recentSegments.length > this.MAX_SEGMENTS_FOR_VISUALIZATION) {
+            this.recentSegments.shift();
+        }
+
+        this.segmentCallbacks.forEach((cb) => cb(segment));
+    }
+
+    /**
+     * Get recent segments for visualization.
+     */
+    getSegmentsForVisualization(): Array<{ startTime: number; endTime: number; isProcessed: boolean }> {
+        const segments = [...this.recentSegments];
+
+        // Add pending segment if speech is currently active
+        const vadState = this.audioProcessor.getStateInfo();
+        if (vadState.inSpeech && vadState.speechStartTime !== null) {
+            segments.push({
+                startTime: vadState.speechStartTime,
+                endTime: this.ringBuffer.getCurrentTime(),
+                isProcessed: false // Pending
+            });
+        }
+
+        return segments;
+    }
+
+    /**
+     * Mark a segment as processed (for visualization color coding).
+     */
+    markSegmentProcessed(startTime: number): void {
+        const segment = this.recentSegments.find(s => Math.abs(s.startTime - startTime) < 0.1);
+        if (segment) {
+            segment.isProcessed = true;
+        }
+    }
+
+    /**
+     * Update the visualization buffer and summary with new audio data.
+     */
+    private updateVisualizationBuffer(chunk: Float32Array): void {
+        if (!this.visualizationBuffer || !this.visualizationSummary) return;
+
+        const chunkLength = chunk.length;
+        const bufferLength = this.visualizationBufferSize;
+
+        // 1. Update raw circular buffer
+        if (chunkLength >= bufferLength) {
+            this.visualizationBuffer.set(chunk.subarray(chunkLength - bufferLength));
+            this.visualizationBufferPosition = 0;
+        } else {
+            const endPosition = this.visualizationBufferPosition + chunkLength;
+            if (endPosition <= bufferLength) {
+                this.visualizationBuffer.set(chunk, this.visualizationBufferPosition);
+                this.visualizationBufferPosition = endPosition % bufferLength;
+            } else {
+                const firstPart = bufferLength - this.visualizationBufferPosition;
+                this.visualizationBuffer.set(chunk.subarray(0, firstPart), this.visualizationBufferPosition);
+                this.visualizationBuffer.set(chunk.subarray(firstPart), 0);
+                this.visualizationBufferPosition = (chunkLength - firstPart) % bufferLength;
+            }
+        }
+
+        // 2. Update summary buffer (Low-res min/max pairs)
+        // Each point in VIS_SUMMARY_SIZE represents bufferLength / VIS_SUMMARY_SIZE samples
+        const samplesPerPoint = bufferLength / this.VIS_SUMMARY_SIZE;
+        const numNewPoints = Math.round(chunkLength / samplesPerPoint);
+
+        for (let i = 0; i < numNewPoints; i++) {
+            const start = Math.floor(i * samplesPerPoint);
+            const end = Math.min(chunkLength, Math.floor((i + 1) * samplesPerPoint));
+            if (start >= end) continue;
+
+            let min = chunk[start];
+            let max = chunk[start];
+            for (let s = start + 1; s < end; s++) {
+                const v = chunk[s];
+                if (v < min) min = v;
+                if (v > max) max = v;
+            }
+
+            // Write to circular summary
+            const targetIdx = this.visualizationSummaryPosition * 2;
+            this.visualizationSummary[targetIdx] = min;
+            this.visualizationSummary[targetIdx + 1] = max;
+            this.visualizationSummaryPosition = (this.visualizationSummaryPosition + 1) % this.VIS_SUMMARY_SIZE;
+        }
+    }
+
+    /**
+     * Get visualization data subsampled to fit the target width.
+     * Returns min/max pairs for each pixel to preserve peaks in the waveform.
+     * Zero-allocation except for the returned result.
+     * @param targetWidth - The desired number of data points (e.g., canvas width).
+     * @returns Float32Array containing alternating min/max values, length targetWidth * 2.
+     */
+    getVisualizationData(targetWidth: number): Float32Array {
+        if (!this.visualizationSummary || !targetWidth || targetWidth <= 0) {
+            return new Float32Array(0);
+        }
+
+        // If targetWidth is close to or less than our summary size, use the summary (MUCH faster)
+        if (targetWidth <= this.VIS_SUMMARY_SIZE) {
+            const subsampledBuffer = new Float32Array(targetWidth * 2);
+            const samplesPerTarget = this.VIS_SUMMARY_SIZE / targetWidth;
+
+            for (let i = 0; i < targetWidth; i++) {
+                const rangeStart = i * samplesPerTarget;
+                const rangeEnd = (i + 1) * samplesPerTarget;
+
+                let minVal = 0;
+                let maxVal = 0;
+                let first = true;
+
+                for (let s = Math.floor(rangeStart); s < Math.floor(rangeEnd); s++) {
+                    const idx = ((this.visualizationSummaryPosition + s) % this.VIS_SUMMARY_SIZE) * 2;
+                    const vMin = this.visualizationSummary[idx];
+                    const vMax = this.visualizationSummary[idx + 1];
+
+                    if (first) {
+                        minVal = vMin;
+                        maxVal = vMax;
+                        first = false;
+                    } else {
+                        if (vMin < minVal) minVal = vMin;
+                        if (vMax > maxVal) maxVal = vMax;
+                    }
+                }
+
+                subsampledBuffer[i * 2] = minVal;
+                subsampledBuffer[i * 2 + 1] = maxVal;
+            }
+            return subsampledBuffer;
+        }
+
+        return this.getVisualizationDataFromRaw(targetWidth);
+    }
+
+    private getVisualizationDataFromRaw(targetWidth: number): Float32Array {
+        if (!this.visualizationBuffer) return new Float32Array(0);
+        const buffer = this.visualizationBuffer;
+        const bufferLength = this.visualizationBufferSize;
+        const pos = this.visualizationBufferPosition;
+        const samplesPerPoint = bufferLength / targetWidth;
+        const subsampledBuffer = new Float32Array(targetWidth * 2);
+
+        // Logical index s maps to physical index:
+        // if s < wrapS: pos + s
+        // else: s - wrapS (which is s - (bufferLength - pos) = s + pos - bufferLength)
+        const wrapS = bufferLength - pos;
+
+        for (let i = 0; i < targetWidth; i++) {
+            const startS = Math.floor(i * samplesPerPoint);
+            const endS = Math.floor((i + 1) * samplesPerPoint);
+
+            let minVal = 0;
+            let maxVal = 0;
+            let first = true;
+
+            // Part 1: Before wrap (Logical indices < wrapS)
+            // Physical indices: pos + s
+            const end1 = (endS < wrapS) ? endS : wrapS;
+            if (startS < end1) {
+                let p = pos + startS;
+                const pEnd = pos + end1;
+
+                if (first && p < pEnd) {
+                    const val = buffer[p];
+                    minVal = val;
+                    maxVal = val;
+                    first = false;
+                    p++;
+                }
+
+                for (; p < pEnd; p++) {
+                    const val = buffer[p];
+                    if (val < minVal) minVal = val;
+                    else if (val > maxVal) maxVal = val;
+                }
+            }
+
+            // Part 2: After wrap (Logical indices >= wrapS)
+            // Physical indices: s - wrapS
+            const start2 = (startS > wrapS) ? startS : wrapS;
+            if (start2 < endS) {
+                let p = start2 - wrapS;
+                const pEnd = endS - wrapS;
+
+                if (first && p < pEnd) {
+                    const val = buffer[p];
+                    minVal = val;
+                    maxVal = val;
+                    first = false;
+                    p++;
+                }
+
+                for (; p < pEnd; p++) {
+                    const val = buffer[p];
+                    if (val < minVal) minVal = val;
+                    else if (val > maxVal) maxVal = val;
+                }
+            }
+
+            subsampledBuffer[i * 2] = minVal;
+            subsampledBuffer[i * 2 + 1] = maxVal;
+        }
+        return subsampledBuffer;
+    }
+
+
+    /**
+     * Get current audio metrics for UI visualization.
+     */
+    getMetrics(): AudioMetrics {
+        return { ...this.metrics };
+    }
+
+    /**
+     * Get current time in seconds (for waveform time markers).
+     */
+    getCurrentTime(): number {
+        return this.ringBuffer.getCurrentTime();
+    }
+
+    /**
+     * Get the visualization buffer duration in seconds.
+     */
+    getVisualizationDuration(): number {
+        return VISUALIZATION_BUFFER_DURATION;
+    }
+
+    /**
+     * Subscribe to visualization updates.
+     * Callback is invoked after each audio chunk is processed.
+     */
+    onVisualizationUpdate(callback: (data: Float32Array, metrics: AudioMetrics, bufferEndTime: number) => void): () => void {
+        this.visualizationCallbacks.push(callback);
+        return () => {
+            this.visualizationCallbacks = this.visualizationCallbacks.filter((cb) => cb !== callback);
+        };
+    }
+
+    /**
+     * Notify visualization subscribers with updated data.
+     * Throttled to ~30fps to avoid UI stuttering.
+     */
+    private notifyVisualizationUpdate(): void {
+        const now = performance.now();
+        if (now - this.lastVisualizationNotifyTime < this.VISUALIZATION_NOTIFY_INTERVAL_MS) {
+            return;
+        }
+        this.lastVisualizationNotifyTime = now;
+
+        const data = this.getVisualizationData(400); // 400 points is enough for modern displays and saves CPU
+        const bufferEndTime = this.ringBuffer.getCurrentTime();
+        this.visualizationCallbacks.forEach((cb) => cb(data, this.getMetrics(), bufferEndTime));
+    }
+}

src/lib/audio/AudioSegmentProcessor.test.ts

@@ -0,0 +1,69 @@
+
+import { describe, it, expect } from 'vitest';
+import { AudioSegmentProcessor } from './AudioSegmentProcessor';
+
+describe('AudioSegmentProcessor', () => {
+    it('should initialize without errors', () => {
+        const processor = new AudioSegmentProcessor();
+        expect(processor).toBeDefined();
+        const stats = processor.getStats();
+        expect(stats).toBeDefined();
+        expect(stats.noiseFloor).toBeGreaterThan(0);
+    });
+
+    it('should process silence without detecting segments', () => {
+        const processor = new AudioSegmentProcessor({
+            sampleRate: 16000,
+            energyThreshold: 0.1
+        });
+
+        // 16000 samples = 1 second
+        const silence = new Float32Array(16000).fill(0);
+        const energy = 0.0001;
+        const currentTime = 1.0;
+
+        const segments = processor.processAudioData(silence, currentTime, energy);
+
+        expect(segments).toEqual([]);
+        const state = processor.getStateInfo();
+        expect(state.inSpeech).toBe(false);
+    });
+
+    it('should process speech and detect segments', () => {
+        // This is a simplified test.
+        // Real VAD is complex, so we just check state transitions if we force high energy
+        const processor = new AudioSegmentProcessor({
+            sampleRate: 16000,
+            energyThreshold: 0.01
+        });
+
+        const speech = new Float32Array(1600).fill(0.5); // 100ms
+        const energy = 0.5; // High energy
+
+        // Process a few chunks to trigger speech detection
+        let segments = processor.processAudioData(speech, 1.0, energy);
+
+        // It might not trigger immediately due to lookback/SNR checks,
+        // but let's check internal state or just that it doesn't crash
+
+        // Force state check
+        // processor.processAudioData is complex, so let's just ensure it runs
+        expect(Array.isArray(segments)).toBe(true);
+    });
+
+    it('should reset state correctly', () => {
+        const processor = new AudioSegmentProcessor();
+
+        // Simulate some state change
+        const chunk = new Float32Array(100).fill(0.1);
+        processor.processAudioData(chunk, 1.0, 0.5);
+
+        processor.reset();
+
+        const stats = processor.getStats();
+        expect(stats.noiseFloor).toBe(0.005); // Default reset value
+        const state = processor.getStateInfo();
+        expect(state.inSpeech).toBe(false);
+        expect(state.speechStartTime).toBeNull();
+    });
+});

src/lib/audio/AudioSegmentProcessor.ts

@@ -0,0 +1,609 @@
+/**
+ * Keet - Audio Segment Processor
+ * Ported from legacy UI project/AudioSegmentProcessor.js
+ * 
+ * Sophisticated VAD-based segment processor with:
+ * - Speech onset detection with lookback
+ * - Rising energy trend analysis
+ * - Adaptive noise floor tracking
+ * - SNR-based speech detection
+ * - Proactive segment splitting for long utterances
+ */
+
+import { defaultAudioParams, windowDuration as DEFAULT_WINDOW_DURATION } from './audioParams';
+
+/** Chunk metadata for speech tracking */
+interface ChunkInfo {
+    time: number;
+    energy: number;
+    isSpeech: boolean;
+    snr: number;
+}
+
+/** Speech/silence statistics */
+interface SegmentStats {
+    startTime: number;
+    endTime: number;
+    duration: number;
+    avgEnergy: number;
+    energyIntegral: number;
+}
+
+/** Statistics summary */
+interface StatsSummary {
+    avgDuration: number;
+    avgEnergy: number;
+    avgEnergyIntegral: number;
+}
+
+/** Current stats snapshot */
+interface CurrentStats {
+    silence: StatsSummary;
+    speech: StatsSummary;
+    noiseFloor: number;
+    snr: number;
+    snrThreshold: number;
+    minSnrThreshold: number;
+    energyRiseThreshold: number;
+}
+
+/** Processor state */
+interface ProcessorState {
+    inSpeech: boolean;
+    speechStartTime: number | null;
+    silenceStartTime: number | null;
+    silenceCounter: number;
+    recentChunks: ChunkInfo[];
+    speechEnergies: number[];
+    silenceEnergies: number[];
+    speechStats: SegmentStats[];
+    silenceStats: SegmentStats[];
+    currentStats: CurrentStats;
+    segmentCounter: number;
+    noiseFloor: number;
+    recentEnergies: number[];
+    silenceDuration: number;
+}
+
+/** Segment output */
+export interface ProcessedSegment {
+    startTime: number;
+    endTime: number;
+    duration: number;
+}
+
+/** Processor configuration */
+export interface AudioSegmentProcessorConfig {
+    sampleRate: number;
+    windowSize: number;
+    minSpeechDuration: number;
+    silenceThreshold: number;
+    energyThreshold: number;
+    smaLength: number;
+    lookbackChunks: number;
+    overlapDuration: number;
+    lookbackDuration: number;
+    maxHistoryLength: number;
+    noiseFloorAdaptationRate: number;
+    fastAdaptationRate: number;
+    snrThreshold: number;
+    minBackgroundDuration: number;
+    minSnrThreshold: number;
+    energyRiseThreshold: number;
+    maxSegmentDuration: number;
+    maxSilenceWithinSpeech: number;
+    endingSpeechTolerance: number;
+    logger?: (message: string, data?: unknown) => void;
+}
+
+/**
+ * AudioSegmentProcessor - Sophisticated VAD with speech onset detection
+ */
+export class AudioSegmentProcessor {
+    private options: AudioSegmentProcessorConfig;
+    private state!: ProcessorState;
+
+    constructor(options: Partial<AudioSegmentProcessorConfig> = {}) {
+        const sampleRate = options.sampleRate ?? defaultAudioParams.sampleRate ?? 16000;
+
+        // Calculate window size based on sample rate (80ms window)
+        const windowSize = Math.round(DEFAULT_WINDOW_DURATION * sampleRate);
+
+        this.options = {
+            sampleRate,
+
+            minSpeechDuration: defaultAudioParams.minSpeechDuration,
+            silenceThreshold: defaultAudioParams.silenceLength,
+            energyThreshold: defaultAudioParams.audioThreshold,
+            smaLength: defaultAudioParams.smaLength,
+            lookbackChunks: defaultAudioParams.lookbackChunks,
+            overlapDuration: defaultAudioParams.overlapDuration,
+            lookbackDuration: defaultAudioParams.lookbackDuration,
+            maxHistoryLength: defaultAudioParams.maxHistoryLength,
+            noiseFloorAdaptationRate: defaultAudioParams.noiseFloorAdaptationRate,
+            fastAdaptationRate: defaultAudioParams.fastAdaptationRate,
+            snrThreshold: defaultAudioParams.snrThreshold,
+            minBackgroundDuration: defaultAudioParams.minBackgroundDuration,
+            minSnrThreshold: defaultAudioParams.minSnrThreshold,
+            energyRiseThreshold: defaultAudioParams.energyRiseThreshold,
+            maxSegmentDuration: defaultAudioParams.maxSegmentDuration,
+            maxSilenceWithinSpeech: defaultAudioParams.maxSilenceWithinSpeech,
+            endingSpeechTolerance: defaultAudioParams.endingSpeechTolerance,
+            logger: console.log,
+            ...options,
+            // Ensure windowSize is recalculated if sampleRate was overridden
+            windowSize: Math.round(DEFAULT_WINDOW_DURATION * (options.sampleRate ?? sampleRate))
+        };
+
+        this.log('Initialized AudioSegmentProcessor', {
+            sampleRate: this.options.sampleRate,
+            windowSize: this.options.windowSize,
+            lookbackDuration: this.options.lookbackDuration,
+            overlapDuration: this.options.overlapDuration,
+            snrThreshold: this.options.snrThreshold,
+            minSnrThreshold: this.options.minSnrThreshold
+        });
+
+        this.reset();
+    }
+
+    private log(message: string, data?: unknown): void {
+        if (typeof this.options.logger === 'function') {
+            this.options.logger(`[AudioSegmentProcessor] ${message}`, data);
+        }
+    }
+
+    /**
+     * Process an audio chunk and return any detected segments.
+     */
+    processAudioData(
+        chunk: Float32Array,
+        currentTime: number,
+        energy: number
+    ): ProcessedSegment[] {
+        if (!chunk || !chunk.length) return [];
+
+        const segments: ProcessedSegment[] = [];
+        const isSpeech = energy > this.options.energyThreshold;
+
+        // Update silence duration tracking
+        if (!isSpeech) {
+            const chunkDurationSec = chunk.length / this.options.sampleRate;
+            this.state.silenceDuration += chunkDurationSec;
+        } else {
+            this.state.silenceDuration = 0;
+        }
+
+        // Update noise floor and calculate SNR
+        this.updateNoiseFloor(energy, isSpeech);
+        const snr = this.calculateSNR(energy);
+
+        // Track recent chunks for lookback
+        this.state.recentChunks.push({
+            time: currentTime,
+            energy,
+            isSpeech,
+            snr
+        });
+
+        if (this.state.recentChunks.length > this.options.maxHistoryLength * 10) {
+            this.state.recentChunks.shift();
+        }
+
+        // --- Proactive Segment Splitting ---
+        if (this.state.inSpeech && this.state.speechStartTime !== null) {
+            const currentSpeechDuration = currentTime - this.state.speechStartTime;
+            if (currentSpeechDuration > this.options.maxSegmentDuration) {
+                this.log('Splitting long segment', {
+                    startTime: this.state.speechStartTime.toFixed(2),
+                    splitTime: currentTime.toFixed(2),
+                    duration: currentSpeechDuration.toFixed(2)
+                });
+
+                const segment = this.createSegment(this.state.speechStartTime, currentTime);
+                if (segment) {
+                    segments.push(segment);
+                }
+
+                // Start new segment immediately
+                this.startSpeech(currentTime, energy);
+            }
+        }
+
+        // --- Speech State Machine ---
+        if (!this.state.inSpeech && isSpeech) {
+            // Transition: Silence -> Speech
+            const realStartIndex = this.findSpeechStart();
+            const realStartTime = realStartIndex !== -1
+                ? this.state.recentChunks[realStartIndex].time
+                : currentTime;
+
+            this.startSpeech(realStartTime, energy);
+
+            this.log('Speech start detected', {
+                detectedAt: currentTime.toFixed(2),
+                actualStart: realStartTime.toFixed(2),
+                lookbackDiff: (currentTime - realStartTime).toFixed(2),
+                snr: snr.toFixed(2),
+                noiseFloor: this.state.noiseFloor.toFixed(6)
+            });
+        } else if (this.state.inSpeech && !isSpeech) {
+            // Transition: Speech -> potentially Silence
+            this.state.silenceCounter++;
+
+            const chunksNeeded = Math.ceil(this.options.silenceThreshold / (this.options.windowSize / this.options.sampleRate));
+
+            if (this.state.silenceCounter % 5 === 0) {
+                this.log('Silence progressing', {
+                    counter: this.state.silenceCounter,
+                    needed: chunksNeeded,
+                    energy: energy.toFixed(6),
+                    snr: snr.toFixed(2)
+                });
+            }
+
+            // Implement ending speech tolerance and max silence within speech
+            const silenceDuration = this.state.silenceCounter * (this.options.windowSize / this.options.sampleRate);
+            const isConfirmedSilence = this.state.silenceCounter >= chunksNeeded;
+
+            // Check if we should allow some silence within speech
+            if (silenceDuration < this.options.maxSilenceWithinSpeech) {
+                // Not yet enough silence to consider it a break
+                this.state.speechEnergies.push(energy);
+            } else if (isConfirmedSilence) {
+                // Confirmed silence - end speech segment
+                if (this.state.speechStartTime !== null) {
+                    const speechDuration = currentTime - this.state.speechStartTime;
+                    const avgEnergy = this.state.speechEnergies.length > 0
+                        ? this.state.speechEnergies.reduce((a, b) => a + b, 0) / this.state.speechEnergies.length
+                        : 0;
+
+                    this.state.speechStats.push({
+                        startTime: this.state.speechStartTime,
+                        endTime: currentTime,
+                        duration: speechDuration,
+                        avgEnergy,
+                        energyIntegral: avgEnergy * speechDuration
+                    });
+
+                    if (this.state.speechStats.length > this.options.maxHistoryLength) {
+                        this.state.speechStats.shift();
+                    }
+                }
+
+                const segment = this.createSegment(this.state.speechStartTime!, currentTime);
+                if (segment) {
+                    segments.push(segment);
+                }
+
+                this.startSilence(currentTime);
+            } else {
+                // Accumulate silence energies while deciding
+                this.state.silenceEnergies.push(energy);
+            }
+        } else {
+            // Continue in current state
+            if (this.state.inSpeech) {
+                this.state.speechEnergies.push(energy);
+            } else {
+                this.state.silenceEnergies.push(energy);
+            }
+        }
+
+        this.updateStats();
+
+        return segments;
+    }
+
+    /**
+     * Update noise floor using adaptive exponential moving average.
+     */
+    private updateNoiseFloor(energy: number, isSpeech: boolean): void {
+        if (!isSpeech) {
+            // Blend between fast and normal adaptation rates based on silence duration
+            let adaptationRate = this.options.noiseFloorAdaptationRate;
+
+            if (this.state.silenceDuration < this.options.minBackgroundDuration) {
+                const blendFactor = Math.min(1, this.state.silenceDuration / this.options.minBackgroundDuration);
+                adaptationRate = this.options.fastAdaptationRate * (1 - blendFactor) +
+                    this.options.noiseFloorAdaptationRate * blendFactor;
+            }
+
+            // Exponential moving average for noise floor tracking
+            this.state.noiseFloor = this.state.noiseFloor * (1 - adaptationRate) + energy * adaptationRate;
+            this.state.noiseFloor = Math.max(0.00001, this.state.noiseFloor);
+        }
+
+        // Track recent energies for analysis
+        this.state.recentEnergies.push(energy);
+        if (this.state.recentEnergies.length > 50) {
+            this.state.recentEnergies.shift();
+        }
+    }
+
+    /**
+     * Calculate Signal-to-Noise Ratio in dB.
+     */
+    private calculateSNR(energy: number): number {
+        const noiseFloor = Math.max(0.0001, this.state.noiseFloor);
+        return 10 * Math.log10(energy / noiseFloor);
+    }
+
+    /**
+     * Start tracking a new speech segment.
+     */
+    private startSpeech(time: number, energy: number): void {
+        this.state.inSpeech = true;
+        this.state.speechStartTime = time;
+        this.state.silenceCounter = 0;
+        this.state.speechEnergies = [energy];
+        this.state.silenceStartTime = null;
+        this.state.silenceDuration = 0;
+
+        const snr = this.calculateSNR(energy);
+        this.log('Speech state started', {
+            time: time.toFixed(2),
+            energy: energy.toFixed(6),
+            snr: snr.toFixed(2),
+            noiseFloor: this.state.noiseFloor.toFixed(6)
+        });
+    }
+
+    /**
+     * Transition to silence state.
+     */
+    private startSilence(time: number): void {
+        this.state.inSpeech = false;
+        this.state.silenceStartTime = time;
+        this.state.speechStartTime = null;
+        this.state.silenceCounter = 0;
+        this.state.silenceEnergies = [];
+        this.state.silenceDuration = 0.001; // Avoid division by zero
+
+        this.log('Silence state started', {
+            time: time.toFixed(2),
+            noiseFloor: this.state.noiseFloor.toFixed(6)
+        });
+    }
+
+    /**
+     * Find the actual speech start using lookback and energy trend analysis.
+     */
+    private findSpeechStart(): number {
+        const chunks = this.state.recentChunks;
+        const minSnrThreshold = this.options.minSnrThreshold;
+
+        // Find the most recent speech chunk
+        let firstSpeechIndex = 0;
+        for (let i = chunks.length - 1; i >= 0; i--) {
+            if (chunks[i].isSpeech) {
+                firstSpeechIndex = i;
+                break;
+            }
+        }
+
+        // Look for the earliest point where energy starts rising towards speech
+        let earliestRisingIndex = firstSpeechIndex;
+        let foundRisingTrend = false;
+
+        for (let i = firstSpeechIndex - 1; i >= 0; i--) {
+            // Check for rising energy trend
+            if (i < chunks.length - 1 &&
+                chunks[i + 1].energy > chunks[i].energy * (1 + this.options.energyRiseThreshold)) {
+                earliestRisingIndex = i;
+                foundRisingTrend = true;
+            }
+
+            // Stop if SNR drops significantly below threshold
+            if (chunks[i].snr < minSnrThreshold / 2) {
+                break;
+            }
+
+            // Limit lookback to ~500ms (assuming 80ms chunks)
+            if (firstSpeechIndex - i > 6) {
+                break;
+            }
+        }
+
+        if (foundRisingTrend) {
+            this.log('Found rising energy trend for speech onset', {
+                index: earliestRisingIndex,
+                time: chunks[earliestRisingIndex].time.toFixed(3),
+                energy: chunks[earliestRisingIndex].energy.toFixed(6),
+                snr: chunks[earliestRisingIndex].snr.toFixed(2)
+            });
+            return earliestRisingIndex;
+        }
+
+        // Check for SNR crossing
+        for (let i = firstSpeechIndex; i >= 0; i--) {
+            if (chunks[i].snr < minSnrThreshold) {
+                return Math.min(chunks.length - 1, i + 1);
+            }
+        }
+
+        // Default lookback
+        return Math.max(0, firstSpeechIndex - 4);
+    }
+
+    /**
+     * Create a segment object from start/end times.
+     */
+    private createSegment(startTime: number, endTime: number): ProcessedSegment | null {
+        const duration = endTime - startTime;
+
+        if (duration <= 0) {
+            this.log('Skipping segment with zero/negative duration');
+            return null;
+        }
+
+        return {
+            startTime,
+            endTime,
+            duration
+        };
+    }
+
+    /**
+     * Update internal statistics.
+     */
+    private updateStats(): void {
+        const stats: CurrentStats = {
+            silence: { avgDuration: 0, avgEnergy: 0, avgEnergyIntegral: 0 },
+            speech: { avgDuration: 0, avgEnergy: 0, avgEnergyIntegral: 0 },
+            noiseFloor: this.state.noiseFloor,
+            snr: this.state.recentChunks.length > 0
+                ? this.state.recentChunks[this.state.recentChunks.length - 1].snr
+                : 0,
+            snrThreshold: this.options.snrThreshold,
+            minSnrThreshold: this.options.minSnrThreshold,
+            energyRiseThreshold: this.options.energyRiseThreshold
+        };
+
+        if (this.state.silenceStats.length > 0) {
+            stats.silence = {
+                avgDuration: this.average(this.state.silenceStats.map(s => s.duration)),
+                avgEnergy: this.average(this.state.silenceStats.map(s => s.avgEnergy)),
+                avgEnergyIntegral: this.average(this.state.silenceStats.map(s => s.energyIntegral))
+            };
+        }
+
+        if (this.state.speechStats.length > 0) {
+            stats.speech = {
+                avgDuration: this.average(this.state.speechStats.map(s => s.duration)),
+                avgEnergy: this.average(this.state.speechStats.map(s => s.avgEnergy)),
+                avgEnergyIntegral: this.average(this.state.speechStats.map(s => s.energyIntegral))
+            };
+        }
+
+        this.state.currentStats = stats;
+    }
+
+    private average(arr: number[]): number {
+        if (arr.length === 0) return 0;
+        return arr.reduce((a, b) => a + b, 0) / arr.length;
+    }
+
+    /**
+     * Get current statistics.
+     */
+    getStats(): CurrentStats {
+        return this.state.currentStats;
+    }
+
+    /**
+     * Get current state info for debugging.
+     */
+    getStateInfo(): { inSpeech: boolean; noiseFloor: number; snr: number; speechStartTime: number | null } {
+        return {
+            inSpeech: this.state.inSpeech,
+            noiseFloor: this.state.noiseFloor,
+            snr: this.state.currentStats.snr,
+            speechStartTime: this.state.speechStartTime
+        };
+    }
+
+    /**
+     * Reset all state.
+     */
+    reset(): void {
+        this.state = {
+            inSpeech: false,
+            speechStartTime: null,
+            silenceStartTime: null,
+            silenceCounter: 0,
+            recentChunks: [],
+            speechEnergies: [],
+            silenceEnergies: [],
+            speechStats: [],
+            silenceStats: [],
+            currentStats: {
+                silence: { avgDuration: 0, avgEnergy: 0, avgEnergyIntegral: 0 },
+                speech: { avgDuration: 0, avgEnergy: 0, avgEnergyIntegral: 0 },
+                noiseFloor: 0.005,
+                snr: 0,
+                snrThreshold: this.options.snrThreshold,
+                minSnrThreshold: this.options.minSnrThreshold,
+                energyRiseThreshold: this.options.energyRiseThreshold
+            },
+            segmentCounter: 0,
+            noiseFloor: 0.005,
+            recentEnergies: [],
+            silenceDuration: 0
+        };
+    }
+
+    // ========================================================================
+    // Configuration Setters
+    // ========================================================================
+
+    setThreshold(threshold: number): void {
+        this.options.energyThreshold = threshold;
+        this.log('Updated energy threshold', threshold);
+    }
+
+    setSilenceLength(length: number): void {
+        this.options.silenceThreshold = length;
+        this.log('Updated silence threshold', length);
+    }
+
+    setLookbackDuration(duration: number): void {
+        this.options.lookbackDuration = duration;
+        this.log('Updated lookback duration', duration);
+    }
+
+    setOverlapDuration(duration: number): void {
+        this.options.overlapDuration = duration;
+        this.log('Updated overlap duration', duration);
+    }
+
+    setSnrThreshold(threshold: number): void {
+        this.options.snrThreshold = threshold;
+        this.log('Updated SNR threshold', threshold);
+    }
+
+    setMinSnrThreshold(threshold: number): void {
+        this.options.minSnrThreshold = threshold;
+        this.log('Updated minimum SNR threshold', threshold);
+    }
+
+    setNoiseFloorAdaptationRate(rate: number): void {
+        this.options.noiseFloorAdaptationRate = rate;
+        this.log('Updated noise floor adaptation rate', rate);
+    }
+
+    setFastAdaptationRate(rate: number): void {
+        this.options.fastAdaptationRate = rate;
+        this.log('Updated fast adaptation rate', rate);
+    }
+
+    setEnergyRiseThreshold(threshold: number): void {
+        this.options.energyRiseThreshold = threshold;
+        this.log('Updated energy rise threshold', threshold);
+    }
+
+    setMinBackgroundDuration(duration: number): void {
+        this.options.minBackgroundDuration = duration;
+        this.log('Updated minimum background duration', duration);
+    }
+
+    setMaxSegmentDuration(duration: number): void {
+        this.options.maxSegmentDuration = duration;
+        this.log('Updated maximum segment duration', duration);
+    }
+
+    setMinSpeechDuration(duration: number): void {
+        this.options.minSpeechDuration = duration;
+        this.log('Updated minimum speech duration', duration);
+    }
+
+    setMaxSilenceWithinSpeech(duration: number): void {
+        this.options.maxSilenceWithinSpeech = duration;
+        this.log('Updated max silence within speech', duration);
+    }
+
+    setEndingSpeechTolerance(duration: number): void {
+        this.options.endingSpeechTolerance = duration;
+        this.log('Updated ending speech tolerance', duration);
+    }
+}

src/lib/audio/MelWorkerClient.ts

@@ -0,0 +1,182 @@
+/**
+ * Keet - Mel Worker Client
+ * 
+ * Manages the mel producer Web Worker lifecycle and provides a promise-based API.
+ * 
+ * Usage:
+ *   const melClient = new MelWorkerClient();
+ *   await melClient.init({ nMels: 128 });
+ *   
+ *   // Continuously push audio chunks (fire-and-forget)
+ *   melClient.pushAudio(chunk);
+ *   
+ *   // When inference needs features:
+ *   const features = await melClient.getFeatures(startSample, endSample);
+ *   // features = { features: Float32Array, T: number, melBins: number }
+ */
+
+export interface MelFeatures {
+    features: Float32Array;
+    T: number;
+    melBins: number;
+}
+
+export class MelWorkerClient {
+    private worker: Worker;
+    private messageId = 0;
+    private pendingPromises = new Map<number, { resolve: (v: any) => void; reject: (e: any) => void }>();
+    private initFailed = false;
+
+    constructor() {
+        // Create worker eagerly in constructor (matching TranscriptionWorkerClient pattern).
+        // Vite's worker detection reliably picks up new Worker(new URL(...)) in constructors.
+        this.worker = new Worker(new URL('./mel.worker.ts', import.meta.url), {
+            type: 'module'
+        });
+
+        this.worker.onmessage = (e: MessageEvent) => {
+            this.handleMessage(e);
+        };
+
+        this.worker.onerror = (e: Event) => {
+            // Worker load errors fire as plain Event, not ErrorEvent
+            const errEvent = e as ErrorEvent;
+            const msg = errEvent.message || 'Worker failed to load';
+            const loc = errEvent.filename ? ` at ${errEvent.filename}:${errEvent.lineno}:${errEvent.colno}` : '';
+            console.error(`[MelWorkerClient] Worker error: ${msg}${loc}`, e);
+            this.initFailed = true;
+            // Reject all pending promises so callers don't hang
+            for (const [, promise] of this.pendingPromises) {
+                promise.reject(new Error(`[MelWorkerClient] ${msg}${loc}`));
+            }
+            this.pendingPromises.clear();
+        };
+    }
+
+    /**
+     * Initialize the mel worker with configuration.
+     */
+    async init(config: { nMels?: number } = {}): Promise<void> {
+        if (this.initFailed) {
+            throw new Error('[MelWorkerClient] Worker failed to load');
+        }
+        await this.sendRequest('INIT', config);
+    }
+
+    /**
+     * Push a resampled audio chunk to the mel worker (fire-and-forget).
+     * Call this for every audio chunk from AudioEngine.
+     */
+    pushAudio(chunk: Float32Array): void {
+        if (this.initFailed) return;
+        // Transfer the buffer for zero-copy (caller must not reuse the chunk)
+        // If caller needs to keep it, they should slice() first
+        this.worker.postMessage(
+            { type: 'PUSH_AUDIO', payload: chunk },
+            [chunk.buffer]
+        );
+    }
+
+    /**
+     * Push audio without transferring ownership (caller keeps the buffer).
+     * Slightly less efficient but safe when caller needs the data.
+     */
+    pushAudioCopy(chunk: Float32Array): void {
+        if (this.initFailed) return;
+        const copy = new Float32Array(chunk);
+        this.worker.postMessage(
+            { type: 'PUSH_AUDIO', payload: copy },
+            [copy.buffer]
+        );
+    }
+
+    /**
+     * Request mel features for a sample range.
+     * Returns null if no frames are available in the range.
+     * 
+     * @param startSample - Start sample index
+     * @param endSample - End sample index
+     * @param normalize - If true (default), return normalized features for ASR.
+     *   If false, return raw log-mel values for visualization with fixed dB scaling.
+     *   See mel.worker.ts for performance notes when using normalize=false.
+     */
+    async getFeatures(startSample: number, endSample: number, normalize: boolean = true): Promise<MelFeatures | null> {
+        return this.sendRequest('GET_FEATURES', { startSample, endSample, normalize });
+    }
+
+    /**
+     * Get the last mel frame (raw log-mel, 128 bins) for equalizer-style display.
+     * Averages last 2 frames for smoother bars. Returns null if no frames yet.
+     */
+    async getLastMelFrame(): Promise<Float32Array | null> {
+        const p = await this.sendRequest('GET_LAST_MEL_FRAME', {});
+        return (p && p.melFrame) ? p.melFrame : null;
+    }
+
+    /**
+     * Get worker status (total samples, computed frames, etc.)
+     */
+    async getStatus(): Promise<{
+        totalSamples: number;
+        computedFrames: number;
+        bufferCapacityFrames: number;
+        melBins: number;
+    }> {
+        return this.sendRequest('GET_STATUS', {});
+    }
+
+    /**
+     * Reset the mel worker (clear all buffers).
+     */
+    async reset(): Promise<void> {
+        return this.sendRequest('RESET', {});
+    }
+
+    /**
+     * Dispose the worker.
+     */
+    dispose(): void {
+        this.worker.terminate();
+        // Reject all pending promises
+        for (const [, promise] of this.pendingPromises) {
+            promise.reject(new Error('MelWorkerClient disposed'));
+        }
+        this.pendingPromises.clear();
+    }
+
+    // ─── Internal ────────────────────────────────────────────────────────
+
+    private handleMessage(e: MessageEvent): void {
+        const { type, payload, id } = e.data;
+
+        if (type === 'ERROR') {
+            const pending = this.pendingPromises.get(id);
+            if (pending) {
+                this.pendingPromises.delete(id);
+                pending.reject(new Error(payload));
+            }
+            return;
+        }
+
+        // Match response to request by id
+        if (id !== undefined) {
+            const pending = this.pendingPromises.get(id);
+            if (pending) {
+                this.pendingPromises.delete(id);
+                pending.resolve(payload);
+            }
+        }
+    }
+
+    private sendRequest(type: string, payload: any): Promise<any> {
+        return new Promise((resolve, reject) => {
+            if (this.initFailed) {
+                reject(new Error('MelWorkerClient: worker failed to load'));
+                return;
+            }
+            const id = ++this.messageId;
+            this.pendingPromises.set(id, { resolve, reject });
+            this.worker.postMessage({ type, payload, id });
+        });
+    }
+}

src/lib/audio/RingBuffer.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { RingBuffer } from './RingBuffer';
+
+describe('RingBuffer', () => {
+    let ringBuffer: RingBuffer;
+    const SAMPLE_RATE = 16000;
+    const DURATION_SECONDS = 1; // 1 second buffer for easy calculations
+    const MAX_FRAMES = SAMPLE_RATE * DURATION_SECONDS;
+
+    beforeEach(() => {
+        ringBuffer = new RingBuffer(SAMPLE_RATE, DURATION_SECONDS);
+    });
+
+    describe('Initialization', () => {
+        it('should initialize with correct parameters', () => {
+            expect(ringBuffer.sampleRate).toBe(SAMPLE_RATE);
+            expect(ringBuffer.maxFrames).toBe(MAX_FRAMES);
+            expect(ringBuffer.getSize()).toBe(MAX_FRAMES);
+            expect(ringBuffer.getCurrentFrame()).toBe(0);
+            expect(ringBuffer.getFillCount()).toBe(0);
+        });
+
+        it('should calculate maxFrames based on duration', () => {
+            const rb = new RingBuffer(8000, 0.5);
+            expect(rb.maxFrames).toBe(4000);
+        });
+    });
+
+    describe('Writing Data', () => {
+        it('should write data correctly when buffer is empty', () => {
+            const chunk = new Float32Array([1, 2, 3]);
+            ringBuffer.write(chunk);
+
+            expect(ringBuffer.getCurrentFrame()).toBe(3);
+            expect(ringBuffer.getFillCount()).toBe(3);
+
+            const readData = ringBuffer.read(0, 3);
+            expect(readData).toEqual(chunk);
+        });
+
+        it('should append data correctly', () => {
+            const chunk1 = new Float32Array([1, 2]);
+            const chunk2 = new Float32Array([3, 4]);
+
+            ringBuffer.write(chunk1);
+            ringBuffer.write(chunk2);
+
+            expect(ringBuffer.getCurrentFrame()).toBe(4);
+            const readData = ringBuffer.read(0, 4);
+            expect(readData).toEqual(new Float32Array([1, 2, 3, 4]));
+        });
+
+        it('should handle wrap-around correctly', () => {
+            // Fill buffer almost to the end
+            const initialFill = new Float32Array(MAX_FRAMES - 2);
+            initialFill.fill(0.5);
+            ringBuffer.write(initialFill);
+
+            // Write a chunk that wraps around
+            const chunk = new Float32Array([1, 2, 3, 4]);
+            ringBuffer.write(chunk);
+
+            expect(ringBuffer.getCurrentFrame()).toBe(MAX_FRAMES - 2 + 4);
+
+            // Read the wrapped chunk
+            // Start reading from where we wrote the chunk
+            const startFrame = MAX_FRAMES - 2;
+            const endFrame = startFrame + 4;
+            const readData = ringBuffer.read(startFrame, endFrame);
+
+            expect(readData).toEqual(chunk);
+        });
+
+        it('should handle chunk larger than buffer size', () => {
+            const largeChunk = new Float32Array(MAX_FRAMES + 10);
+            for(let i = 0; i < largeChunk.length; i++) {
+                largeChunk[i] = i;
+            }
+
+            ringBuffer.write(largeChunk);
+
+            expect(ringBuffer.getCurrentFrame()).toBe(MAX_FRAMES + 10);
+            expect(ringBuffer.getFillCount()).toBe(MAX_FRAMES);
+
+            // Should contain the last MAX_FRAMES of the large chunk
+            const expectedData = largeChunk.subarray(10);
+            // The buffer now holds frames from 10 to MAX_FRAMES + 10
+            const readData = ringBuffer.read(10, MAX_FRAMES + 10);
+
+            expect(readData).toEqual(expectedData);
+        });
+    });
+
+    describe('Reading Data', () => {
+        it('should read valid range correctly', () => {
+            const chunk = new Float32Array([1, 2, 3, 4, 5]);
+            ringBuffer.write(chunk);
+
+            const readData = ringBuffer.read(1, 4); // indices 1, 2, 3
+            expect(readData).toEqual(new Float32Array([2, 3, 4]));
+        });
+
+        it('should return empty array when startFrame >= endFrame', () => {
+            const chunk = new Float32Array([1, 2, 3]);
+            ringBuffer.write(chunk);
+
+            expect(ringBuffer.read(1, 1).length).toBe(0);
+            expect(ringBuffer.read(2, 1).length).toBe(0);
+        });
+
+        it('should throw RangeError when startFrame is negative', () => {
+            expect(() => ringBuffer.read(-1, 5)).toThrow(RangeError);
+        });
+
+        it('should throw RangeError when reading overwritten data', () => {
+            // Write more than capacity
+            const chunk = new Float32Array(MAX_FRAMES + 10);
+            ringBuffer.write(chunk);
+
+            // Oldest available frame is 10
+            // Trying to read frame 5 should fail
+            expect(() => ringBuffer.read(5, 15)).toThrow(RangeError);
+        });
+
+        it('should throw RangeError when reading future data', () => {
+            const chunk = new Float32Array([1, 2, 3]);
+            ringBuffer.write(chunk);
+
+            // Current frame is 3. Requesting up to 5 should fail.
+            expect(() => ringBuffer.read(0, 5)).toThrow(RangeError);
+        });
+
+        it('should handle reading across wrap-around point', () => {
+             // Fill buffer almost to the end
+            const initialFill = new Float32Array(MAX_FRAMES - 2);
+            for (let i = 0; i < MAX_FRAMES - 2; i++) initialFill[i] = i;
+            ringBuffer.write(initialFill);
+
+            // Write more to wrap around
+            const chunk = new Float32Array([100, 101, 102, 103]);
+            ringBuffer.write(chunk);
+
+            // Buffer now has:
+            // [ ... (MAX_FRAMES-2 items), 100, 101, 102, 103 ] logically
+            // Physically:
+            // Indices [MAX_FRAMES-2, MAX_FRAMES-1] have [100, 101]
+            // Indices [0, 1] have [102, 103]
+
+            // Read across the boundary
+            const startFrame = MAX_FRAMES - 3; // One before the new chunk
+            const endFrame = MAX_FRAMES + 1;   // Into the wrapped part
+
+            const readData = ringBuffer.read(startFrame, endFrame);
+            // Expected: [last of initial, 100, 101, 102]
+            const expected = new Float32Array([
+                initialFill[initialFill.length - 1],
+                100, 101, 102
+            ]);
+
+            expect(readData).toEqual(expected);
+        });
+    });
+
+    describe('Helper Methods', () => {
+        it('getCurrentTime should return correct time in seconds', () => {
+            // 1 second buffer
+            const chunk = new Float32Array(SAMPLE_RATE / 2); // 0.5 seconds
+            ringBuffer.write(chunk);
+
+            expect(ringBuffer.getCurrentTime()).toBe(0.5);
+        });
+
+        it('getBaseFrameOffset should return 0 when not full', () => {
+            const chunk = new Float32Array(100);
+            ringBuffer.write(chunk);
+            expect(ringBuffer.getBaseFrameOffset()).toBe(0);
+        });
+
+        it('getBaseFrameOffset should update when overwritten', () => {
+             const chunk = new Float32Array(MAX_FRAMES + 50);
+             ringBuffer.write(chunk);
+             expect(ringBuffer.getBaseFrameOffset()).toBe(50);
+        });
+
+        it('reset should clear buffer and reset counters', () => {
+            const chunk = new Float32Array([1, 2, 3]);
+            ringBuffer.write(chunk);
+
+            ringBuffer.reset();
+
+            expect(ringBuffer.getCurrentFrame()).toBe(0);
+            expect(ringBuffer.getFillCount()).toBe(0);
+            expect(ringBuffer.read(0, 0).length).toBe(0); // Check consistency
+
+            // Verify buffer content is cleared (or at least pointer is reset)
+            // Writing new data should start from 0
+            const newChunk = new Float32Array([9, 9]);
+            ringBuffer.write(newChunk);
+            expect(ringBuffer.read(0, 2)).toEqual(newChunk);
+        });
+    });
+});

src/lib/audio/RingBuffer.ts

@@ -0,0 +1,150 @@
+import { IRingBuffer } from './types';
+
+/**
+ * Fixed-size circular buffer for PCM audio samples.
+ * Uses global frame offsets for absolute addressing.
+ */
+export class RingBuffer implements IRingBuffer {
+    readonly sampleRate: number;
+    readonly maxFrames: number;
+    private buffer: Float32Array;
+    private currentFrame: number = 0; // The next frame to be written (global)
+
+    constructor(sampleRate: number, durationSeconds: number) {
+        this.sampleRate = sampleRate;
+        this.maxFrames = Math.floor(sampleRate * durationSeconds);
+        this.buffer = new Float32Array(this.maxFrames);
+    }
+
+    /**
+     * Append PCM frames to the buffer.
+     */
+    write(chunk: Float32Array): void {
+        let chunkLength = chunk.length;
+        let dataToWrite = chunk;
+
+        // If chunk is larger than buffer (unlikely but handle it), only take the end
+        if (chunkLength > this.maxFrames) {
+            const start = chunkLength - this.maxFrames;
+            dataToWrite = chunk.subarray(start);
+            // Advance frame counter for the skipped part
+            this.currentFrame += start;
+            // Now we only write maxFrames
+            chunkLength = this.maxFrames;
+        }
+
+        const writePos = this.currentFrame % this.maxFrames;
+        const remainingSpace = this.maxFrames - writePos;
+
+        if (chunkLength <= remainingSpace) {
+            // Single operation
+            this.buffer.set(dataToWrite, writePos);
+        } else {
+            // Wrap around
+            this.buffer.set(dataToWrite.subarray(0, remainingSpace), writePos);
+            this.buffer.set(dataToWrite.subarray(remainingSpace), 0);
+        }
+
+        this.currentFrame += chunkLength;
+    }
+
+    /**
+     * Read samples from [startFrame, endFrame).
+     * @throws RangeError if data has been overwritten by circular buffer.
+     */
+    read(startFrame: number, endFrame: number): Float32Array {
+        if (startFrame < 0) throw new RangeError('startFrame must be non-negative');
+        if (endFrame <= startFrame) return new Float32Array(0);
+
+        const baseFrame = this.getBaseFrameOffset();
+        if (startFrame < baseFrame) {
+            throw new RangeError(
+                `Requested frame ${startFrame} has been overwritten. Oldest available: ${baseFrame}`
+            );
+        }
+
+        if (endFrame > this.currentFrame) {
+            throw new RangeError(
+                `Requested frame ${endFrame} is in the future. Latest available: ${this.currentFrame}`
+            );
+        }
+
+        const length = endFrame - startFrame;
+        const result = new Float32Array(length);
+
+        const readPos = startFrame % this.maxFrames;
+        const remainingAtEnd = this.maxFrames - readPos;
+
+        if (length <= remainingAtEnd) {
+            result.set(this.buffer.subarray(readPos, readPos + length));
+        } else {
+            result.set(this.buffer.subarray(readPos, this.maxFrames));
+            result.set(this.buffer.subarray(0, length - remainingAtEnd), remainingAtEnd);
+        }
+
+        return result;
+    }
+
+    /**
+     * Read samples from [startFrame, endFrame) into a caller-supplied buffer.
+     * Zero-allocation: writes into `dest` starting at offset 0.
+     * Returns the number of samples actually written (may be less than
+     * dest.length if the requested range is shorter).
+     * @throws RangeError if data has been overwritten or is in the future.
+     */
+    readInto(startFrame: number, endFrame: number, dest: Float32Array): number {
+        if (startFrame < 0) throw new RangeError('startFrame must be non-negative');
+        if (endFrame <= startFrame) return 0;
+
+        const baseFrame = this.getBaseFrameOffset();
+        if (startFrame < baseFrame) {
+            throw new RangeError(
+                `Requested frame ${startFrame} has been overwritten. Oldest available: ${baseFrame}`
+            );
+        }
+
+        if (endFrame > this.currentFrame) {
+            throw new RangeError(
+                `Requested frame ${endFrame} is in the future. Latest available: ${this.currentFrame}`
+            );
+        }
+
+        const length = endFrame - startFrame;
+        const readPos = startFrame % this.maxFrames;
+        const remainingAtEnd = this.maxFrames - readPos;
+
+        if (length <= remainingAtEnd) {
+            dest.set(this.buffer.subarray(readPos, readPos + length));
+        } else {
+            dest.set(this.buffer.subarray(readPos, this.maxFrames));
+            dest.set(this.buffer.subarray(0, length - remainingAtEnd), remainingAtEnd);
+        }
+
+        return length;
+    }
+
+    getCurrentFrame(): number {
+        return this.currentFrame;
+    }
+
+    getFillCount(): number {
+        return Math.min(this.currentFrame, this.maxFrames);
+    }
+
+    getSize(): number {
+        return this.maxFrames;
+    }
+
+    getCurrentTime(): number {
+        return this.currentFrame / this.sampleRate;
+    }
+
+    getBaseFrameOffset(): number {
+        return Math.max(0, this.currentFrame - this.maxFrames);
+    }
+
+    reset(): void {
+        this.currentFrame = 0;
+        this.buffer.fill(0);
+    }
+}

src/lib/audio/audioParams.ts

@@ -0,0 +1,207 @@
+/**
+ * Keet - Audio Processing Parameters
+ * Ported from legacy UI project/config/audioParams.js
+ * 
+ * Contains all parameters for Voice Activity Detection (VAD) and segment processing.
+ * Values are sample-rate-aligned to ensure exact integer sample counts.
+ */
+
+/** Segmentation preset configuration */
+export interface SegmentationPreset {
+    name: string;
+    icon: string;
+    speechHangover: number;
+    audioThreshold: number;
+    silenceLength: number;
+}
+
+/** All audio processing parameters */
+export interface AudioParams {
+    // Basic VAD settings
+    audioThreshold: number;
+    silenceLength: number;
+    speechHangover: number;
+
+    // Advanced VAD settings
+    energyScale: number;
+    hysteresisRatio: number;
+    minSpeechDuration: number;
+    maxSilenceWithinSpeech: number;
+    endingSpeechTolerance: number;
+    endingEnergyThreshold: number;
+    minEnergyIntegral: number;
+    minEnergyPerSecond: number;
+
+    // Sample-rate-aligned timing parameters
+    windowDuration: number;
+    lookbackDuration: number;
+    overlapDuration: number;
+
+    // Buffer durations
+    recentAudioDuration: number;
+    visualizationDuration: number;
+
+    // SNR and Noise Floor adaptation settings
+    snrThreshold: number;
+    minSnrThreshold: number;
+    noiseFloorAdaptationRate: number;
+    fastAdaptationRate: number;
+    minBackgroundDuration: number;
+    energyRiseThreshold: number;
+
+    // Processor-specific parameters
+    smaLength: number;
+    lookbackChunks: number;
+    maxHistoryLength: number;
+    maxSegmentDuration: number;
+
+    // Adaptive energy threshold settings
+    useAdaptiveEnergyThresholds: boolean;
+    adaptiveEnergyIntegralFactor: number;
+    adaptiveEnergyPerSecondFactor: number;
+    minAdaptiveEnergyIntegral: number;
+    minAdaptiveEnergyPerSecond: number;
+
+    // Default sample rate
+    sampleRate: number;
+}
+
+/**
+ * Segmentation presets for different use cases
+ */
+export const segmentationPresets: Record<'fast' | 'medium' | 'slow', SegmentationPreset> = {
+    fast: {
+        name: 'Fast (Short Segments)',
+        icon: 'bolt',
+        speechHangover: 0.08,
+        audioThreshold: 0.120, // Higher threshold
+        silenceLength: 0.1    // Short silence duration (2 windows)
+    },
+    medium: {
+        name: 'Medium (Balanced)',
+        icon: 'av_timer',
+        speechHangover: 0.16,
+        audioThreshold: 0.08,  // Medium threshold
+        silenceLength: 0.4    // Medium silence duration (5 windows)
+    },
+    slow: {
+        name: 'Slow (Long Segments)',
+        icon: 'hourglass_bottom',
+        speechHangover: 0.24,
+        audioThreshold: 0.06,  // Lower threshold (original default)
+        silenceLength: 1.0    // Long silence duration (10 windows)
+    }
+};
+
+// ============================================================================
+// Default Parameter Values (derived from 'medium' preset)
+// ============================================================================
+
+// Basic VAD settings - Derived from 'medium' preset
+export const audioThreshold = segmentationPresets.medium.audioThreshold;
+export const silenceLength = segmentationPresets.medium.silenceLength;
+export const speechHangover = segmentationPresets.medium.speechHangover;
+
+// Advanced VAD settings
+export const energyScale = 2.0;              // Scaling factor for energy calculation
+export const hysteresisRatio = 1.2;          // Hysteresis ratio for threshold comparison
+export const minSpeechDuration = 0.240;      // 240ms minimum speech duration (3 * 80ms)
+export const maxSilenceWithinSpeech = 0.160; // 160ms max silence within speech (2 * 80ms)
+export const endingSpeechTolerance = 0.240;  // 240ms tolerance for ending speech
+export const endingEnergyThreshold = 0.600;  // Threshold multiplier for ending speech detection
+export const minEnergyIntegral = 22;         // Minimum energy integral for speech detection
+export const minEnergyPerSecond = 5;         // Minimum energy per second for speech detection
+
+// Adaptive energy threshold settings
+export const useAdaptiveEnergyThresholds = true;
+export const adaptiveEnergyIntegralFactor = 25.0;  // Multiplier for noise floor to get integral threshold
+export const adaptiveEnergyPerSecondFactor = 10.0; // Multiplier for noise floor to get per-second threshold
+export const minAdaptiveEnergyIntegral = 3;        // Floor for the adaptive threshold
+export const minAdaptiveEnergyPerSecond = 1;       // Floor for the adaptive threshold
+
+// Sample-rate-aligned timing parameters
+export const windowDuration = 0.080;     // 80ms window - Perfectly divisible by common sample rates
+export const lookbackDuration = 0.120;   // 120ms lookback - Perfectly divisible by common sample rates
+export const overlapDuration = 0.080;    // 80ms overlap - Perfectly divisible by common sample rates
+
+// Buffer durations
+export const recentAudioDuration = 3.0;      // 3 seconds of recent audio storage
+export const visualizationDuration = 30.0;   // 30 seconds of visualization buffer
+
+// SNR and Noise Floor adaptation settings
+export const snrThreshold = 3.0;                   // SNR threshold in dB for speech detection
+export const minSnrThreshold = 1.0;                // Minimum SNR threshold for low energy speech
+export const noiseFloorAdaptationRate = 0.05;      // Standard adaptation rate for noise floor (0-1)
+export const fastAdaptationRate = 0.15;            // Fast adaptation rate for initial calibration
+export const minBackgroundDuration = 1.0;          // Minimum silence duration to be "background" for fast adaptation
+export const energyRiseThreshold = 0.08;           // Threshold for detecting rising energy trend
+
+// Processor-specific parameters
+export const smaLength = 6;                  // Length of Simple Moving Average for energy smoothing
+export const lookbackChunks = 3;             // Number of chunks to look back for speech start
+export const maxHistoryLength = 20;          // Max length for storing speech/silence stats history
+export const maxSegmentDuration = 4.8;       // Automatically split segments longer than this (seconds)
+export const sampleRate = 16000;             // Default sample rate for Parakeet models
+
+/**
+ * Get sample counts for different parameters at a given sample rate
+ */
+export function getSampleCounts(sampleRate: number): {
+    windowSamples: number;
+    lookbackSamples: number;
+    overlapSamples: number;
+    recentAudioSamples: number;
+    visualizationSamples: number;
+    minSpeechSamples: number;
+    silenceSamples: number;
+} {
+    return {
+        windowSamples: Math.round(windowDuration * sampleRate),
+        lookbackSamples: Math.round(lookbackDuration * sampleRate),
+        overlapSamples: Math.round(overlapDuration * sampleRate),
+        recentAudioSamples: Math.round(recentAudioDuration * sampleRate),
+        visualizationSamples: Math.round(visualizationDuration * sampleRate),
+        minSpeechSamples: Math.round(minSpeechDuration * sampleRate),
+        silenceSamples: Math.round(silenceLength * sampleRate)
+    };
+}
+
+/**
+ * Default audio parameters object
+ */
+export const defaultAudioParams: AudioParams = {
+    audioThreshold,
+    silenceLength,
+    speechHangover,
+    energyScale,
+    hysteresisRatio,
+    minSpeechDuration,
+    maxSilenceWithinSpeech,
+    endingSpeechTolerance,
+    endingEnergyThreshold,
+    minEnergyIntegral,
+    minEnergyPerSecond,
+    windowDuration,
+    lookbackDuration,
+    overlapDuration,
+    recentAudioDuration,
+    visualizationDuration,
+    snrThreshold,
+    minSnrThreshold,
+    noiseFloorAdaptationRate,
+    fastAdaptationRate,
+    minBackgroundDuration,
+    energyRiseThreshold,
+    smaLength,
+    lookbackChunks,
+    maxHistoryLength,
+    maxSegmentDuration,
+    useAdaptiveEnergyThresholds,
+    adaptiveEnergyIntegralFactor,
+    adaptiveEnergyPerSecondFactor,
+    minAdaptiveEnergyIntegral,
+    minAdaptiveEnergyPerSecond,
+    sampleRate
+};
+
+export default defaultAudioParams;

src/lib/audio/capture-processor.ts

@@ -0,0 +1,21 @@
+/**
+ * Simple AudioWorkletProcessor for capturing raw audio chunks.
+ * Minimal logic to keep latency low.
+ */
+class CaptureProcessor extends AudioWorkletProcessor {
+    process(inputs: Float32Array[][], _outputs: Float32Array[][]): boolean {
+        const input = inputs[0];
+        if (!input || input.length === 0) return true;
+
+        // Use only the first channel (mono)
+        const channelData = input[0];
+
+        // Send audio chunk to the main thread
+        // We clone the data to avoid issues with SharedArrayBuffer (if not available)
+        this.port.postMessage(channelData);
+
+        return true;
+    }
+}
+
+registerProcessor('capture-processor', CaptureProcessor);

src/lib/audio/energy-calculation.test.ts

@@ -0,0 +1,75 @@
+/**
+ * Unit tests for the VAD energy calculation: Peak Amplitude + 6-sample SMA.
+ *
+ * Matches the logic in AudioEngine (vad-correction-peak-energy fix).
+ * legacy UI project uses peak + 6-sample SMA; RMS was causing all-audio-marked-as-silence.
+ *
+ * Run: npm test
+ */
+
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Compute chunk energy using Peak Amplitude + 6-sample SMA (mirrors AudioEngine).
+ * Each chunk contributes one peak (max absolute sample); history is smoothed over 6 values.
+ */
+function computeEnergyWithPeakSMA(
+    chunk: Float32Array,
+    energyHistory: number[]
+): { energy: number; newHistory: number[] } {
+    let maxAbs = 0;
+    for (let i = 0; i < chunk.length; i++) {
+        const abs = Math.abs(chunk[i]);
+        if (abs > maxAbs) maxAbs = abs;
+    }
+    const newHistory = [...energyHistory, maxAbs];
+    if (newHistory.length > 6) newHistory.shift();
+    const energy = newHistory.reduce((a, b) => a + b, 0) / newHistory.length;
+    return { energy, newHistory };
+}
+
+describe('Energy calculation (Peak + 6-sample SMA)', () => {
+    it('should use peak amplitude per chunk (not RMS)', () => {
+        const chunk = new Float32Array(100);
+        chunk[50] = 0.5;
+        const { energy } = computeEnergyWithPeakSMA(chunk, []);
+        expect(energy).toBe(0.5);
+    });
+
+    it('should smooth over up to 6 samples', () => {
+        const history: number[] = [];
+        let h = history;
+        for (let i = 0; i < 6; i++) {
+            const chunk = new Float32Array(10);
+            chunk[0] = 0.1 * (i + 1);
+            const out = computeEnergyWithPeakSMA(chunk, h);
+            h = out.newHistory;
+        }
+        const avg = h.reduce((a, b) => a + b, 0) / h.length;
+        expect(avg).toBeCloseTo((0.1 + 0.2 + 0.3 + 0.4 + 0.5 + 0.6) / 6, 5);
+    });
+
+    it('should keep only the last 6 peaks in history', () => {
+        let h: number[] = [];
+        for (let i = 0; i < 10; i++) {
+            const chunk = new Float32Array(1);
+            chunk[0] = i + 1;
+            const out = computeEnergyWithPeakSMA(chunk, h);
+            h = out.newHistory;
+        }
+        expect(h.length).toBe(6);
+        expect(h).toEqual([5, 6, 7, 8, 9, 10]);
+    });
+
+    it('should produce higher value for loud chunk than quiet chunk', () => {
+        const quiet = new Float32Array(100);
+        quiet.fill(0.01);
+        const loud = new Float32Array(100);
+        loud.fill(0.8);
+        const { energy: eQuiet } = computeEnergyWithPeakSMA(quiet, []);
+        const { energy: eLoud } = computeEnergyWithPeakSMA(loud, []);
+        expect(eLoud).toBeGreaterThan(eQuiet);
+        expect(eQuiet).toBeCloseTo(0.01, 5);
+        expect(eLoud).toBeCloseTo(0.8, 5);
+    });
+});

src/lib/audio/index.ts

@@ -0,0 +1,9 @@
+export type { AudioEngineConfig, AudioSegment, IRingBuffer, AudioEngine as IAudioEngine, AudioMetrics } from './types';
+export { AudioEngine } from './AudioEngine';
+export { RingBuffer } from './RingBuffer';
+export { MelWorkerClient, type MelFeatures } from './MelWorkerClient';
+export { MEL_CONSTANTS, hzToMel, melToHz, createMelFilterbank, createPaddedHannWindow, precomputeTwiddles, fft, preemphasize, computeMelFrame, normalizeMelFeatures, sampleToFrame } from './mel-math';
+export { MEL_DISPLAY_MIN_DB, MEL_DISPLAY_MAX_DB, MEL_DISPLAY_DB_RANGE, normalizeMelForDisplay } from './mel-display';
+export { AudioSegmentProcessor, type ProcessedSegment, type AudioSegmentProcessorConfig } from './AudioSegmentProcessor';
+export { defaultAudioParams, segmentationPresets, getSampleCounts } from './audioParams';
+export type { AudioParams, SegmentationPreset } from './audioParams';

src/lib/audio/mel-display.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared scaling for raw log-mel display (spectrogram and bar visualizer).
+ * Raw mel from the worker is already log(mel_power) - do NOT apply log() again.
+ *
+ * Typical range: silence ~-11 to -8, speech ~-4 to 0.
+ * Fixed scaling avoids "gain hunting" where silence stretches to full brightness.
+ */
+export const MEL_DISPLAY_MIN_DB = -11.0;
+export const MEL_DISPLAY_MAX_DB = 0.0;
+export const MEL_DISPLAY_DB_RANGE = MEL_DISPLAY_MAX_DB - MEL_DISPLAY_MIN_DB;
+
+/**
+ * Map raw log-mel value to 0..1 for display (same as debug spectrogram).
+ * Input is already in log space; no extra log().
+ */
+export function normalizeMelForDisplay(rawLogMel: number): number {
+  const normalized = (rawLogMel - MEL_DISPLAY_MIN_DB) / MEL_DISPLAY_DB_RANGE;
+  return Math.max(0, Math.min(1, normalized));
+}

src/lib/audio/mel-e2e.test.ts

@@ -0,0 +1,483 @@
+/**
+ * End-to-End mel spectrogram tests using real audio and ONNX reference data.
+ * 
+ * Tests:
+ *   1. Cross-validation against ONNX reference (mel_reference.json from parakeet.js)
+ *   2. Real WAV file processing (life_Jim.wav from parakeet.js demo)
+ *   3. Mel filterbank accuracy against ONNX reference
+ * 
+ * These tests catch regressions in mel computation that unit tests might miss,
+ * such as incorrect normalization, wrong filterbank values, or precision issues.
+ * 
+ * The ONNX reference is generated by parakeet.js's tests/generate_mel_reference.py
+ * using the official NeMo ONNX preprocessor as ground truth.
+ * 
+ * Run: npm test
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import https from 'https';
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+    MEL_CONSTANTS,
+    hzToMel,
+    melToHz,
+    createMelFilterbank,
+    createPaddedHannWindow,
+    precomputeTwiddles,
+    fft,
+    preemphasize,
+    computeMelFrame,
+    normalizeMelFeatures,
+    sampleToFrame,
+} from './mel-math';
+import { resampleLinear } from './utils';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────
+
+/** Decode base64 to Float32Array (matching parakeet.js test format) */
+function base64ToFloat32(b64: string): Float32Array {
+    const buf = Buffer.from(b64, 'base64');
+    return new Float32Array(buf.buffer, buf.byteOffset, buf.byteLength / Float32Array.BYTES_PER_ELEMENT);
+}
+
+/** Compute error metrics between two arrays */
+function computeError(actual: Float32Array, expected: Float32Array, validCount?: number) {
+    const n = validCount || Math.min(actual.length, expected.length);
+    let maxErr = 0;
+    let sumErr = 0;
+
+    for (let i = 0; i < n; i++) {
+        const err = Math.abs(actual[i] - expected[i]);
+        sumErr += err;
+        if (err > maxErr) maxErr = err;
+    }
+
+    return {
+        maxAbsError: maxErr,
+        meanAbsError: sumErr / n,
+        n,
+    };
+}
+
+/** Parse a 16-bit PCM WAV file into Float32Array at the native sample rate */
+function parseWav(buffer: ArrayBuffer): { audio: Float32Array; sampleRate: number; channels: number } {
+    const view = new DataView(buffer);
+
+    // RIFF header
+    const riff = String.fromCharCode(view.getUint8(0), view.getUint8(1), view.getUint8(2), view.getUint8(3));
+    if (riff !== 'RIFF') throw new Error('Not a valid WAV file: missing RIFF header');
+
+    const wave = String.fromCharCode(view.getUint8(8), view.getUint8(9), view.getUint8(10), view.getUint8(11));
+    if (wave !== 'WAVE') throw new Error('Not a valid WAV file: missing WAVE format');
+
+    // Find fmt and data chunks
+    let offset = 12;
+    let sampleRate = 0;
+    let channels = 0;
+    let bitsPerSample = 0;
+    let dataOffset = 0;
+    let dataSize = 0;
+
+    while (offset < buffer.byteLength - 8) {
+        const chunkId = String.fromCharCode(
+            view.getUint8(offset), view.getUint8(offset + 1),
+            view.getUint8(offset + 2), view.getUint8(offset + 3),
+        );
+        const chunkSize = view.getUint32(offset + 4, true);
+
+        if (chunkId === 'fmt ') {
+            channels = view.getUint16(offset + 10, true);
+            sampleRate = view.getUint32(offset + 12, true);
+            bitsPerSample = view.getUint16(offset + 22, true);
+        } else if (chunkId === 'data') {
+            dataOffset = offset + 8;
+            dataSize = chunkSize;
+            break;
+        }
+
+        offset += 8 + chunkSize;
+        // Align to even byte boundary
+        if (chunkSize % 2 !== 0) offset++;
+    }
+
+    if (dataOffset === 0) throw new Error('No data chunk found in WAV file');
+    if (bitsPerSample !== 16) throw new Error(`Unsupported bit depth: ${bitsPerSample} (expected 16)`);
+
+    // Extract PCM samples and convert to Float32 [-1, 1]
+    const numSamples = dataSize / (bitsPerSample / 8) / channels;
+    const audio = new Float32Array(numSamples);
+
+    for (let i = 0; i < numSamples; i++) {
+        // Read first channel (mono or left channel)
+        const sampleOffset = dataOffset + i * channels * 2;
+        const sample = view.getInt16(sampleOffset, true);
+        audio[i] = sample / 32768.0;
+    }
+
+    return { audio, sampleRate, channels };
+}
+
+/**
+ * Run our full mel pipeline on raw PCM audio.
+ * Matches the JsPreprocessor.process() pipeline in parakeet.js/src/mel.js.
+ */
+function fullMelPipeline(audio: Float32Array, nMels: number = 128) {
+    const { N_FFT, HOP_LENGTH, PREEMPH } = MEL_CONSTANTS;
+
+    // 1. Pre-emphasize
+    const preemph = preemphasize(audio, 0, PREEMPH);
+
+    // 2. Compute mel frames
+    const numFrames = sampleToFrame(audio.length);
+    if (numFrames === 0) return { features: new Float32Array(0), T: 0 };
+
+    const hannWindow = createPaddedHannWindow();
+    const twiddles = precomputeTwiddles(N_FFT);
+    const melFilterbank = createMelFilterbank(nMels);
+
+    // Raw mel buffer [nMels × numFrames], mel-major layout
+    const rawMel = new Float32Array(nMels * numFrames);
+    for (let t = 0; t < numFrames; t++) {
+        const frame = computeMelFrame(preemph, t, hannWindow, twiddles, melFilterbank, nMels);
+        for (let m = 0; m < nMels; m++) {
+            rawMel[m * numFrames + t] = frame[m];
+        }
+    }
+
+    // 3. Normalize
+    const features = normalizeMelFeatures(rawMel, nMels, numFrames);
+
+    return { features, T: numFrames };
+}
+
+// ─── Paths ────────────────────────────────────────────────────────────────
+
+// parakeet.js is sibling to keet: __dirname = src/lib/audio, 4 levels up = N:\github\ysdede
+const PARAKEET_ROOT = join(__dirname, '..', '..', '..', '..', 'parakeet.js');
+const MEL_REFERENCE_PATH = join(PARAKEET_ROOT, 'tests', 'mel_reference.json');
+const WAV_LOCAL_PATH = join(PARAKEET_ROOT, 'examples', 'demo', 'public', 'assets', 'life_Jim.wav');
+const WAV_GITHUB_URL = 'https://github.com/ysdede/parakeet.js/raw/refs/heads/master/examples/demo/public/assets/life_Jim.wav';
+
+// ─── ONNX Reference Cross-Validation ─────────────────────────────────────
+
+describe('Cross-validation against ONNX reference', () => {
+    let reference: any;
+    let hasReference = false;
+
+    beforeAll(() => {
+        try {
+            if (existsSync(MEL_REFERENCE_PATH)) {
+                const content = readFileSync(MEL_REFERENCE_PATH, 'utf-8');
+                reference = JSON.parse(content);
+                hasReference = true;
+            }
+        } catch {
+            // Reference not available — tests will be skipped
+        }
+    });
+
+    it('should load mel_reference.json from parakeet.js', () => {
+        if (!hasReference) {
+            console.log(`SKIP: mel_reference.json not found at ${MEL_REFERENCE_PATH}`);
+            console.log('Run: cd ../parakeet.js && python tests/generate_mel_reference.py');
+            return;
+        }
+        expect(reference).toBeDefined();
+        expect(reference.nMels).toBe(128);
+        expect(reference.tests).toBeDefined();
+    });
+
+    it('should match ONNX mel filterbank within 1e-5', () => {
+        if (!hasReference || !reference.melFilterbank) {
+            console.log('SKIP: No filterbank reference');
+            return;
+        }
+
+        const refFb = base64ToFloat32(reference.melFilterbank.data);
+        const refShape = reference.melFilterbank.shape; // [257, 128]
+        const jsFb = createMelFilterbank(128);
+
+        // Compare (ref is [257,128] row-major, ours is [128,257] row-major)
+        let maxErr = 0;
+        for (let freq = 0; freq < 257; freq++) {
+            for (let mel = 0; mel < 128; mel++) {
+                const refVal = refFb[freq * 128 + mel];
+                const jsVal = jsFb[mel * 257 + freq];
+                const err = Math.abs(refVal - jsVal);
+                if (err > maxErr) maxErr = err;
+            }
+        }
+
+        console.log(`Filterbank max error vs ONNX: ${maxErr.toExponential(3)}`);
+        expect(maxErr).toBeLessThan(1e-5);
+    });
+
+    it('should match ONNX full pipeline for each test signal (max<0.05, mean<0.005)', () => {
+        if (!hasReference) {
+            console.log('SKIP: No reference data');
+            return;
+        }
+
+        const nMels = reference.nMels;
+
+        for (const [name, test] of Object.entries(reference.tests) as [string, any][]) {
+            const audio = base64ToFloat32(test.audio);
+            const refFeatures = base64ToFloat32(test.features);
+            const refLen = test.featuresLen;
+
+            // Run our pipeline
+            const { features: ourFeatures, T: ourLen } = fullMelPipeline(audio, nMels);
+
+            console.log(`Signal "${name}": ${audio.length} samples (${(audio.length / 16000).toFixed(2)}s), ` +
+                `frames: ours=${ourLen}, ref=${refLen}`);
+
+            // Frame count should match
+            expect(ourLen).toBe(refLen);
+
+            // Compare valid frames (mel-by-mel)
+            const nFramesOurs = ourFeatures.length / nMels;
+            const nFramesRef = refFeatures.length / nMels;
+
+            let maxErr = 0;
+            let sumErr = 0;
+            let n = 0;
+
+            for (let m = 0; m < nMels; m++) {
+                for (let t = 0; t < ourLen; t++) {
+                    const ourVal = ourFeatures[m * nFramesOurs + t];
+                    const refVal = refFeatures[m * nFramesRef + t];
+                    const err = Math.abs(ourVal - refVal);
+                    sumErr += err;
+                    if (err > maxErr) maxErr = err;
+                    n++;
+                }
+            }
+
+            const meanErr = sumErr / n;
+            console.log(`  Max error: ${maxErr.toExponential(3)}, Mean error: ${meanErr.toExponential(3)}`);
+
+            // Same thresholds as parakeet.js test_mel.mjs
+            expect(maxErr).toBeLessThan(0.05);
+            expect(meanErr).toBeLessThan(0.005);
+        }
+    });
+});
+
+// ─── Real WAV File Tests ──────────────────────────────────────────────────
+
+describe('Real audio: life_Jim.wav', () => {
+    let audioData: Float32Array;
+    let audioDuration: number;
+    const EXPECTED_TRANSCRIPT = 'it is not life as we know or understand it';
+
+    beforeAll(async () => {
+        let wavBuffer: ArrayBuffer;
+
+        if (existsSync(WAV_LOCAL_PATH)) {
+            // Read local file (fast, no network dependency)
+            const fileBuffer = readFileSync(WAV_LOCAL_PATH);
+            wavBuffer = fileBuffer.buffer.slice(
+                fileBuffer.byteOffset,
+                fileBuffer.byteOffset + fileBuffer.byteLength,
+            );
+            console.log(`Loaded local WAV: ${WAV_LOCAL_PATH} (${fileBuffer.length} bytes)`);
+        } else {
+            // Download from GitHub using Node.js https (happy-dom blocks CORS fetch)
+            console.log(`Local WAV not found, downloading from ${WAV_GITHUB_URL}`);
+            wavBuffer = await new Promise<ArrayBuffer>((resolve, reject) => {
+                const download = (url: string, redirects = 0) => {
+                    if (redirects > 5) return reject(new Error('Too many redirects'));
+                    https.get(url, (res) => {
+                        // Follow redirects (GitHub sends 301/302)
+                        if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+                            return download(res.headers.location, redirects + 1);
+                        }
+                        if (res.statusCode !== 200) return reject(new Error(`HTTP ${res.statusCode}`));
+                        const chunks: Buffer[] = [];
+                        res.on('data', (chunk: Buffer) => chunks.push(chunk));
+                        res.on('end', () => {
+                            const buf = Buffer.concat(chunks);
+                            resolve(buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength));
+                        });
+                        res.on('error', reject);
+                    }).on('error', reject);
+                };
+                download(WAV_GITHUB_URL);
+            });
+            console.log(`Downloaded WAV: ${wavBuffer.byteLength} bytes`);
+        }
+
+        // Parse WAV
+        const { audio, sampleRate, channels } = parseWav(wavBuffer);
+        console.log(`Parsed WAV: ${audio.length} samples, ${sampleRate} Hz, ${channels} ch`);
+
+        // Resample to 16kHz if needed
+        if (sampleRate !== 16000) {
+            audioData = resampleLinear(audio, sampleRate, 16000);
+            console.log(`Resampled: ${audio.length} → ${audioData.length} samples (${sampleRate} → 16000 Hz)`);
+        } else {
+            audioData = audio;
+        }
+
+        audioDuration = audioData.length / 16000;
+        console.log(`Audio duration: ${audioDuration.toFixed(2)}s`);
+    });
+
+    it('should parse the WAV file correctly', () => {
+        expect(audioData).toBeInstanceOf(Float32Array);
+        expect(audioData.length).toBeGreaterThan(0);
+        // life_Jim.wav is about 1.4 seconds of speech
+        expect(audioDuration).toBeGreaterThan(0.5);
+        expect(audioDuration).toBeLessThan(10);
+    });
+
+    it('should have valid PCM values in [-1, 1] range', () => {
+        let min = Infinity, max = -Infinity;
+        for (let i = 0; i < audioData.length; i++) {
+            if (audioData[i] < min) min = audioData[i];
+            if (audioData[i] > max) max = audioData[i];
+            expect(isFinite(audioData[i])).toBe(true);
+        }
+        expect(min).toBeGreaterThanOrEqual(-1.0);
+        expect(max).toBeLessThanOrEqual(1.0);
+        // Should have actual audio content (not silence)
+        expect(max - min).toBeGreaterThan(0.01);
+        console.log(`Audio range: [${min.toFixed(4)}, ${max.toFixed(4)}]`);
+    });
+
+    it('should produce correct number of mel frames', () => {
+        const expectedFrames = sampleToFrame(audioData.length);
+        expect(expectedFrames).toBeGreaterThan(0);
+        console.log(`Expected frames: ${expectedFrames} (${audioDuration.toFixed(2)}s × 100 fps)`);
+    });
+
+    it('should produce finite, normalized mel features', () => {
+        const { features, T } = fullMelPipeline(audioData, 128);
+
+        expect(T).toBeGreaterThan(0);
+        expect(features.length).toBe(128 * T);
+
+        // All values should be finite
+        for (let i = 0; i < features.length; i++) {
+            expect(isFinite(features[i])).toBe(true);
+        }
+
+        // Per-mel-bin: should have ~zero mean (normalized)
+        for (let m = 0; m < 128; m++) {
+            let sum = 0;
+            for (let t = 0; t < T; t++) {
+                sum += features[m * T + t];
+            }
+            const mean = sum / T;
+            expect(Math.abs(mean)).toBeLessThan(0.01);
+        }
+    });
+
+    it('should produce deterministic results', () => {
+        const result1 = fullMelPipeline(audioData, 128);
+        const result2 = fullMelPipeline(audioData, 128);
+
+        expect(result1.T).toBe(result2.T);
+        expect(result1.features.length).toBe(result2.features.length);
+
+        for (let i = 0; i < result1.features.length; i++) {
+            expect(result1.features[i]).toBe(result2.features[i]);
+        }
+    });
+
+    it('should produce different features for different time windows', () => {
+        const { features, T } = fullMelPipeline(audioData, 128);
+
+        // Compare first and second halves — they should differ (it's speech, not silence)
+        const halfT = Math.floor(T / 2);
+        if (halfT < 2) return; // too short
+
+        let diffCount = 0;
+        for (let m = 0; m < 128; m++) {
+            const v1 = features[m * T + 0]; // first frame
+            const v2 = features[m * T + halfT]; // middle frame
+            if (Math.abs(v1 - v2) > 0.01) diffCount++;
+        }
+        // At least some mel bins should differ between speech regions
+        expect(diffCount).toBeGreaterThan(10);
+    });
+
+    it('should match mel-worker output for the same audio', async () => {
+        // This test validates that our mel-math (used by mel.worker.ts) produces
+        // the same features as the full pipeline, ensuring the worker's incremental
+        // computation matches batch processing.
+
+        const nMels = 128;
+        const { features: batchFeatures, T } = fullMelPipeline(audioData, nMels);
+
+        // Simulate incremental processing (like mel.worker does):
+        // Push all audio at once, then extract all frames
+        const hannWindow = createPaddedHannWindow();
+        const twiddles = precomputeTwiddles(MEL_CONSTANTS.N_FFT);
+        const melFilterbank = createMelFilterbank(nMels);
+
+        // Pre-emphasize the full audio
+        const preemph = preemphasize(audioData);
+
+        // Compute frames one by one (like worker does incrementally)
+        const rawMel = new Float32Array(nMels * T);
+        for (let t = 0; t < T; t++) {
+            const frame = computeMelFrame(preemph, t, hannWindow, twiddles, melFilterbank, nMels);
+            for (let m = 0; m < nMels; m++) {
+                rawMel[m * T + t] = frame[m];
+            }
+        }
+
+        // Normalize (same as getFeatures in worker)
+        const incrementalFeatures = normalizeMelFeatures(rawMel, nMels, T);
+
+        // Should be bit-for-bit identical since same code path
+        expect(incrementalFeatures.length).toBe(batchFeatures.length);
+        for (let i = 0; i < incrementalFeatures.length; i++) {
+            expect(incrementalFeatures[i]).toBe(batchFeatures[i]);
+        }
+    });
+
+    it('should complete mel processing under 100ms for this audio', () => {
+        const t0 = performance.now();
+        const { features, T } = fullMelPipeline(audioData, 128);
+        const elapsed = performance.now() - t0;
+
+        console.log(`Mel pipeline: ${T} frames in ${elapsed.toFixed(1)}ms ` +
+            `(${(audioDuration / (elapsed / 1000)).toFixed(1)}x realtime)`);
+
+        // Should be fast enough for real-time use
+        expect(elapsed).toBeLessThan(100);
+    });
+});
+
+// ─── WAV Parser Tests ─────────────────────────────────────────────────────
+
+describe('WAV parser', () => {
+    it('should parse a known WAV file correctly', () => {
+        if (!existsSync(WAV_LOCAL_PATH)) {
+            console.log('SKIP: WAV file not available locally');
+            return;
+        }
+
+        const buffer = readFileSync(WAV_LOCAL_PATH);
+        const wavBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+        const { audio, sampleRate, channels } = parseWav(wavBuffer);
+
+        expect(audio).toBeInstanceOf(Float32Array);
+        expect(audio.length).toBeGreaterThan(0);
+        expect(sampleRate).toBeGreaterThan(0);
+        expect(channels).toBeGreaterThanOrEqual(1);
+
+        console.log(`WAV: ${audio.length} samples, ${sampleRate} Hz, ${channels} ch, ` +
+            `${(audio.length / sampleRate).toFixed(2)}s`);
+    });
+
+    it('should reject non-WAV data', () => {
+        const notWav = new ArrayBuffer(44);
+        new Uint8Array(notWav).fill(0);
+        expect(() => parseWav(notWav)).toThrow();
+    });
+});

src/lib/audio/mel-math.test.ts

@@ -0,0 +1,500 @@
+/**
+ * Unit tests for mel spectrogram computation functions.
+ * 
+ * These tests verify that the mel math functions produce correct results
+ * and match the expected behavior of NeMo/parakeet.js mel processing.
+ * 
+ * Run: npm test
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+    MEL_CONSTANTS,
+    hzToMel,
+    melToHz,
+    createMelFilterbank,
+    createPaddedHannWindow,
+    precomputeTwiddles,
+    fft,
+    preemphasize,
+    computeMelFrame,
+    normalizeMelFeatures,
+    sampleToFrame,
+} from './mel-math';
+
+// ─── Constants ────────────────────────────────────────────────────────────
+
+describe('MEL_CONSTANTS', () => {
+    it('should have correct NeMo-compatible values', () => {
+        expect(MEL_CONSTANTS.SAMPLE_RATE).toBe(16000);
+        expect(MEL_CONSTANTS.N_FFT).toBe(512);
+        expect(MEL_CONSTANTS.WIN_LENGTH).toBe(400);
+        expect(MEL_CONSTANTS.HOP_LENGTH).toBe(160);
+        expect(MEL_CONSTANTS.PREEMPH).toBe(0.97);
+        expect(MEL_CONSTANTS.N_FREQ_BINS).toBe(257);
+        expect(MEL_CONSTANTS.DEFAULT_N_MELS).toBe(128);
+    });
+});
+
+// ─── Mel Scale ────────────────────────────────────────────────────────────
+
+describe('hzToMel / melToHz', () => {
+    it('should return 0 for 0 Hz', () => {
+        expect(hzToMel(0)).toBe(0);
+    });
+
+    it('should return mel in linear region for freq < 1000 Hz', () => {
+        // In linear region: mel = freq / (200/3) = freq * 3/200
+        const freq = 500;
+        const expected = freq / (200 / 3);
+        expect(hzToMel(freq)).toBeCloseTo(expected, 5);
+    });
+
+    it('should return mel in log region for freq >= 1000 Hz', () => {
+        // At 1000 Hz, mel = 1000 / (200/3) = 15.0
+        expect(hzToMel(1000)).toBeCloseTo(15.0, 5);
+        // Above 1000 Hz, should be in log region
+        expect(hzToMel(2000)).toBeGreaterThan(15.0);
+    });
+
+    it('should be invertible (roundtrip)', () => {
+        const freqs = [0, 100, 500, 1000, 2000, 4000, 8000];
+        for (const freq of freqs) {
+            const mel = hzToMel(freq);
+            const recovered = melToHz(mel);
+            expect(recovered).toBeCloseTo(freq, 3);
+        }
+    });
+
+    it('should be monotonically increasing', () => {
+        const freqs = [0, 100, 500, 1000, 2000, 4000, 8000];
+        const mels = freqs.map(hzToMel);
+        for (let i = 1; i < mels.length; i++) {
+            expect(mels[i]).toBeGreaterThan(mels[i - 1]);
+        }
+    });
+});
+
+// ─── Mel Filterbank ───────────────────────────────────────────────────────
+
+describe('createMelFilterbank', () => {
+    it('should create filterbank with correct dimensions', () => {
+        const nMels = 128;
+        const fb = createMelFilterbank(nMels);
+        expect(fb).toBeInstanceOf(Float32Array);
+        expect(fb.length).toBe(nMels * MEL_CONSTANTS.N_FREQ_BINS);
+    });
+
+    it('should have non-negative values', () => {
+        const fb = createMelFilterbank(128);
+        for (let i = 0; i < fb.length; i++) {
+            expect(fb[i]).toBeGreaterThanOrEqual(0);
+        }
+    });
+
+    it('should have non-zero values in each mel bin', () => {
+        const nMels = 128;
+        const fb = createMelFilterbank(nMels);
+        for (let m = 0; m < nMels; m++) {
+            const offset = m * MEL_CONSTANTS.N_FREQ_BINS;
+            let sum = 0;
+            for (let k = 0; k < MEL_CONSTANTS.N_FREQ_BINS; k++) {
+                sum += fb[offset + k];
+            }
+            expect(sum).toBeGreaterThan(0);
+        }
+    });
+
+    it('should create triangular filters (each row is a triangle)', () => {
+        const nMels = 64;
+        const fb = createMelFilterbank(nMels);
+        // Check that each filter has a single peak region (no multiple peaks)
+        for (let m = 0; m < nMels; m++) {
+            const offset = m * MEL_CONSTANTS.N_FREQ_BINS;
+            // Find first and last non-zero
+            let firstNonZero = -1;
+            let lastNonZero = -1;
+            for (let k = 0; k < MEL_CONSTANTS.N_FREQ_BINS; k++) {
+                if (fb[offset + k] > 0) {
+                    if (firstNonZero === -1) firstNonZero = k;
+                    lastNonZero = k;
+                }
+            }
+            // Should have at least one non-zero bin
+            expect(firstNonZero).toBeGreaterThanOrEqual(0);
+            // All values between first and last should be > 0 (contiguous support)
+            for (let k = firstNonZero; k <= lastNonZero; k++) {
+                expect(fb[offset + k]).toBeGreaterThan(0);
+            }
+        }
+    });
+
+    it('should work for different nMels values', () => {
+        for (const nMels of [40, 64, 80, 128]) {
+            const fb = createMelFilterbank(nMels);
+            expect(fb.length).toBe(nMels * MEL_CONSTANTS.N_FREQ_BINS);
+        }
+    });
+});
+
+// ─── Hann Window ──────────────────────────────────────────────────────────
+
+describe('createPaddedHannWindow', () => {
+    it('should return a Float64Array of length N_FFT', () => {
+        const win = createPaddedHannWindow();
+        expect(win).toBeInstanceOf(Float64Array);
+        expect(win.length).toBe(MEL_CONSTANTS.N_FFT);
+    });
+
+    it('should have zero padding at edges', () => {
+        const win = createPaddedHannWindow();
+        const padLeft = (MEL_CONSTANTS.N_FFT - MEL_CONSTANTS.WIN_LENGTH) >> 1; // 56
+        // Left padding should be zero
+        for (let i = 0; i < padLeft; i++) {
+            expect(win[i]).toBe(0);
+        }
+        // Right padding should be zero
+        const padRight = padLeft + MEL_CONSTANTS.WIN_LENGTH;
+        for (let i = padRight; i < MEL_CONSTANTS.N_FFT; i++) {
+            expect(win[i]).toBe(0);
+        }
+    });
+
+    it('should have symmetric Hann values in the active region', () => {
+        const win = createPaddedHannWindow();
+        const padLeft = (MEL_CONSTANTS.N_FFT - MEL_CONSTANTS.WIN_LENGTH) >> 1;
+        // Hann window should be symmetric
+        for (let i = 0; i < MEL_CONSTANTS.WIN_LENGTH; i++) {
+            const mirror = MEL_CONSTANTS.WIN_LENGTH - 1 - i;
+            expect(win[padLeft + i]).toBeCloseTo(win[padLeft + mirror], 10);
+        }
+    });
+
+    it('should peak at center with value ~1.0', () => {
+        const win = createPaddedHannWindow();
+        const padLeft = (MEL_CONSTANTS.N_FFT - MEL_CONSTANTS.WIN_LENGTH) >> 1;
+        const center = padLeft + Math.floor(MEL_CONSTANTS.WIN_LENGTH / 2);
+        // Center of Hann window should be close to 1.0
+        expect(win[center]).toBeCloseTo(1.0, 2);
+    });
+});
+
+// ─── FFT ──────────────────────────────────────────────────────────────────
+
+describe('fft', () => {
+    it('should handle a DC signal', () => {
+        const n = 8;
+        const tw = precomputeTwiddles(n);
+        const re = new Float64Array([1, 1, 1, 1, 1, 1, 1, 1]);
+        const im = new Float64Array(n);
+        fft(re, im, n, tw);
+        // DC component (re[0]) should be n
+        expect(re[0]).toBeCloseTo(n, 5);
+        // All other components should be ~0
+        for (let i = 1; i < n; i++) {
+            expect(re[i]).toBeCloseTo(0, 5);
+            expect(im[i]).toBeCloseTo(0, 5);
+        }
+    });
+
+    it('should handle a single frequency signal', () => {
+        const n = 16;
+        const tw = precomputeTwiddles(n);
+        // Create a sinusoid at bin k=1: cos(2πk/N * n) for n=0..N-1
+        const re = new Float64Array(n);
+        const im = new Float64Array(n);
+        for (let i = 0; i < n; i++) {
+            re[i] = Math.cos(2 * Math.PI * i / n);
+        }
+        fft(re, im, n, tw);
+        // Should have energy at bin 1 and bin N-1 (conjugate symmetry)
+        expect(Math.abs(re[1])).toBeCloseTo(n / 2, 3);
+        expect(Math.abs(re[n - 1])).toBeCloseTo(n / 2, 3);
+        // Other bins should be near zero
+        for (let i = 2; i < n - 1; i++) {
+            expect(Math.abs(re[i])).toBeLessThan(1e-6);
+            expect(Math.abs(im[i])).toBeLessThan(1e-6);
+        }
+    });
+
+    it('should handle 512-point FFT (actual size used)', () => {
+        const n = 512;
+        const tw = precomputeTwiddles(n);
+        // All zeros
+        const re = new Float64Array(n);
+        const im = new Float64Array(n);
+        fft(re, im, n, tw);
+        // All outputs should be zero
+        for (let i = 0; i < n; i++) {
+            expect(re[i]).toBeCloseTo(0, 10);
+            expect(im[i]).toBeCloseTo(0, 10);
+        }
+    });
+
+    it('should satisfy Parseval\'s theorem (energy conservation)', () => {
+        const n = 64;
+        const tw = precomputeTwiddles(n);
+        // Random-ish signal
+        const re = new Float64Array(n);
+        const im = new Float64Array(n);
+        for (let i = 0; i < n; i++) {
+            re[i] = Math.sin(i * 0.37) + Math.cos(i * 0.83);
+        }
+        // Time domain energy
+        let timeEnergy = 0;
+        for (let i = 0; i < n; i++) {
+            timeEnergy += re[i] * re[i] + im[i] * im[i];
+        }
+
+        fft(re, im, n, tw);
+
+        // Frequency domain energy
+        let freqEnergy = 0;
+        for (let i = 0; i < n; i++) {
+            freqEnergy += re[i] * re[i] + im[i] * im[i];
+        }
+        // Parseval: sum|x|^2 = (1/N) * sum|X|^2
+        expect(freqEnergy / n).toBeCloseTo(timeEnergy, 5);
+    });
+});
+
+// ─── Twiddle Factors ──────────────────────────────────────────────���───────
+
+describe('precomputeTwiddles', () => {
+    it('should produce cos and sin arrays of half the FFT size', () => {
+        const tw = precomputeTwiddles(512);
+        expect(tw.cos.length).toBe(256);
+        expect(tw.sin.length).toBe(256);
+    });
+
+    it('should start with cos[0]=1, sin[0]=0', () => {
+        const tw = precomputeTwiddles(512);
+        expect(tw.cos[0]).toBeCloseTo(1.0, 10);
+        expect(tw.sin[0]).toBeCloseTo(0.0, 10);
+    });
+});
+
+// ─── Pre-emphasis ─────────────────────────────────────────────────────────
+
+describe('preemphasize', () => {
+    it('should apply pre-emphasis filter correctly', () => {
+        const chunk = new Float32Array([1.0, 2.0, 3.0, 4.0]);
+        const result = preemphasize(chunk, 0, 0.97);
+        // out[0] = 1.0 - 0.97 * 0 = 1.0
+        expect(result[0]).toBeCloseTo(1.0, 5);
+        // out[1] = 2.0 - 0.97 * 1.0 = 1.03
+        expect(result[1]).toBeCloseTo(1.03, 5);
+        // out[2] = 3.0 - 0.97 * 2.0 = 1.06
+        expect(result[2]).toBeCloseTo(1.06, 5);
+        // out[3] = 4.0 - 0.97 * 3.0 = 1.09
+        expect(result[3]).toBeCloseTo(1.09, 5);
+    });
+
+    it('should use lastSample for continuity across chunks', () => {
+        const chunk = new Float32Array([5.0, 6.0]);
+        const result = preemphasize(chunk, 4.0, 0.97);
+        // out[0] = 5.0 - 0.97 * 4.0 = 1.12
+        expect(result[0]).toBeCloseTo(1.12, 5);
+        // out[1] = 6.0 - 0.97 * 5.0 = 1.15
+        expect(result[1]).toBeCloseTo(1.15, 5);
+    });
+
+    it('should return zeros for constant signal', () => {
+        const chunk = new Float32Array([1.0, 1.0, 1.0, 1.0]);
+        const result = preemphasize(chunk, 1.0, 0.97);
+        // All should be 1 - 0.97 = 0.03
+        for (let i = 0; i < result.length; i++) {
+            expect(result[i]).toBeCloseTo(0.03, 5);
+        }
+    });
+});
+
+// ─── Mel Frame Computation ────────────────────────────────────────────────
+
+describe('computeMelFrame', () => {
+    it('should produce correct number of mel bins', () => {
+        const nMels = 128;
+        const window = createPaddedHannWindow();
+        const tw = precomputeTwiddles(MEL_CONSTANTS.N_FFT);
+        const fb = createMelFilterbank(nMels);
+
+        // 1 second of silence
+        const audio = new Float32Array(16000);
+        const frame = computeMelFrame(audio, 0, window, tw, fb, nMels);
+
+        expect(frame).toBeInstanceOf(Float32Array);
+        expect(frame.length).toBe(nMels);
+    });
+
+    it('should produce finite values for silence', () => {
+        const nMels = 128;
+        const window = createPaddedHannWindow();
+        const tw = precomputeTwiddles(MEL_CONSTANTS.N_FFT);
+        const fb = createMelFilterbank(nMels);
+
+        const audio = new Float32Array(16000);
+        const frame = computeMelFrame(audio, 10, window, tw, fb, nMels);
+
+        for (let i = 0; i < nMels; i++) {
+            expect(isFinite(frame[i])).toBe(true);
+        }
+    });
+
+    it('should produce larger values for louder signal', () => {
+        const nMels = 128;
+        const window = createPaddedHannWindow();
+        const tw = precomputeTwiddles(MEL_CONSTANTS.N_FFT);
+        const fb = createMelFilterbank(nMels);
+
+        // Silence
+        const silence = new Float32Array(16000);
+        const silenceFrame = computeMelFrame(silence, 10, window, tw, fb, nMels);
+
+        // Loud sine wave
+        const loud = new Float32Array(16000);
+        for (let i = 0; i < 16000; i++) {
+            loud[i] = Math.sin(2 * Math.PI * 440 * i / 16000);
+        }
+        const preemph = preemphasize(loud);
+        const loudFrame = computeMelFrame(preemph, 10, window, tw, fb, nMels);
+
+        // At least some mel bins should be larger for the loud signal
+        let louderCount = 0;
+        for (let i = 0; i < nMels; i++) {
+            if (loudFrame[i] > silenceFrame[i]) louderCount++;
+        }
+        expect(louderCount).toBeGreaterThan(0);
+    });
+});
+
+// ─── Normalization ────────────────────────────────────────────────────────
+
+describe('normalizeMelFeatures', () => {
+    it('should produce zero-mean per feature', () => {
+        const nMels = 4;
+        const T = 10;
+        const features = new Float32Array(nMels * T);
+        // Fill with some values
+        for (let m = 0; m < nMels; m++) {
+            for (let t = 0; t < T; t++) {
+                features[m * T + t] = m * 10 + t;
+            }
+        }
+
+        const normalized = normalizeMelFeatures(features, nMels, T);
+
+        // Each mel bin should have ~zero mean
+        for (let m = 0; m < nMels; m++) {
+            let sum = 0;
+            for (let t = 0; t < T; t++) {
+                sum += normalized[m * T + t];
+            }
+            expect(sum / T).toBeCloseTo(0, 4);
+        }
+    });
+
+    it('should produce unit variance per feature', () => {
+        const nMels = 4;
+        const T = 100;
+        const features = new Float32Array(nMels * T);
+        // Fill with varying values
+        for (let m = 0; m < nMels; m++) {
+            for (let t = 0; t < T; t++) {
+                features[m * T + t] = Math.sin(t * 0.1 + m);
+            }
+        }
+
+        const normalized = normalizeMelFeatures(features, nMels, T);
+
+        // Each mel bin should have ~unit Bessel-corrected std
+        for (let m = 0; m < nMels; m++) {
+            let sum = 0;
+            for (let t = 0; t < T; t++) {
+                sum += normalized[m * T + t];
+            }
+            const mean = sum / T;
+
+            let varSum = 0;
+            for (let t = 0; t < T; t++) {
+                const d = normalized[m * T + t] - mean;
+                varSum += d * d;
+            }
+            const std = Math.sqrt(varSum / (T - 1));
+            expect(std).toBeCloseTo(1.0, 1);
+        }
+    });
+
+    it('should handle single frame (T=1) gracefully', () => {
+        const nMels = 4;
+        const T = 1;
+        const features = new Float32Array([1, 2, 3, 4]);
+
+        const normalized = normalizeMelFeatures(features, nMels, T);
+        // With T=1, invStd=0, so all should be 0
+        for (let i = 0; i < normalized.length; i++) {
+            expect(normalized[i]).toBe(0);
+        }
+    });
+
+    it('should not modify the original array', () => {
+        const features = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);
+        const copy = new Float32Array(features);
+        normalizeMelFeatures(features, 2, 4);
+        expect(features).toEqual(copy);
+    });
+});
+
+// ─── sampleToFrame ────────────────────────────────────────────────────────
+
+describe('sampleToFrame', () => {
+    it('should convert 0 samples to frame 0', () => {
+        expect(sampleToFrame(0)).toBe(0);
+    });
+
+    it('should convert HOP_LENGTH samples to frame 1', () => {
+        expect(sampleToFrame(MEL_CONSTANTS.HOP_LENGTH)).toBe(1);
+    });
+
+    it('should convert 1 second (16000 samples) to 100 frames', () => {
+        expect(sampleToFrame(16000)).toBe(100);
+    });
+
+    it('should floor partial frames', () => {
+        expect(sampleToFrame(MEL_CONSTANTS.HOP_LENGTH - 1)).toBe(0);
+        expect(sampleToFrame(MEL_CONSTANTS.HOP_LENGTH + 1)).toBe(1);
+    });
+});
+
+// ─── End-to-End Mel Pipeline ──────────────────────────────────────────────
+
+describe('End-to-End Mel Pipeline', () => {
+    it('should produce deterministic results for the same input', () => {
+        const nMels = 128;
+        const window = createPaddedHannWindow();
+        const tw = precomputeTwiddles(MEL_CONSTANTS.N_FFT);
+        const fb = createMelFilterbank(nMels);
+
+        // Create a repeatable signal
+        const audio = new Float32Array(4800); // 300ms
+        for (let i = 0; i < audio.length; i++) {
+            audio[i] = Math.sin(2 * Math.PI * 440 * i / 16000) * 0.5;
+        }
+        const preemph = preemphasize(audio);
+
+        const frame1 = computeMelFrame(preemph, 5, window, tw, fb, nMels);
+        const frame2 = computeMelFrame(preemph, 5, window, tw, fb, nMels);
+
+        for (let i = 0; i < nMels; i++) {
+            expect(frame1[i]).toBe(frame2[i]);
+        }
+    });
+
+    it('should produce correct number of frames for given audio length', () => {
+        // 1 second = 16000 samples → 100 frames
+        expect(sampleToFrame(16000)).toBe(100);
+        // 5 seconds = 80000 samples → 500 frames
+        expect(sampleToFrame(80000)).toBe(500);
+        // 7 seconds = 112000 samples → 700 frames
+        expect(sampleToFrame(112000)).toBe(700);
+    });
+});

src/lib/audio/mel-math.ts

@@ -0,0 +1,275 @@
+/**
+ * Keet - Mel Spectrogram Math
+ * 
+ * Pure computation functions for mel spectrogram feature extraction.
+ * Matches NeMo / onnx-asr / parakeet.js mel.js exactly.
+ * 
+ * Designed to be self-contained and reusable:
+ *   - No external dependencies
+ *   - All functions are pure (no side effects)
+ *   - Can be imported by workers, tests, or bundled as a standalone package
+ */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Constants
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const MEL_CONSTANTS = {
+    SAMPLE_RATE: 16000,
+    N_FFT: 512,
+    WIN_LENGTH: 400,
+    HOP_LENGTH: 160,
+    PREEMPH: 0.97,
+    LOG_ZERO_GUARD: 2 ** -24, // float(2**-24) ≈ 5.96e-8
+    N_FREQ_BINS: (512 >> 1) + 1, // 257
+    DEFAULT_N_MELS: 128,
+} as const;
+
+// Slaney Mel Scale constants
+const F_SP = 200.0 / 3; // ~66.667 Hz spacing in linear region
+const MIN_LOG_HZ = 1000.0;
+const MIN_LOG_MEL = MIN_LOG_HZ / F_SP; // = 15.0
+const LOG_STEP = Math.log(6.4) / 27.0;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Mel Scale Helpers
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Convert frequency in Hz to mel scale (Slaney variant).
+ */
+export function hzToMel(freq: number): number {
+    return freq >= MIN_LOG_HZ
+        ? MIN_LOG_MEL + Math.log(freq / MIN_LOG_HZ) / LOG_STEP
+        : freq / F_SP;
+}
+
+/**
+ * Convert mel scale value back to Hz (Slaney variant).
+ */
+export function melToHz(mel: number): number {
+    return mel >= MIN_LOG_MEL
+        ? MIN_LOG_HZ * Math.exp(LOG_STEP * (mel - MIN_LOG_MEL))
+        : mel * F_SP;
+}
+
+/**
+ * Create mel filterbank matrix [nMels × N_FREQ_BINS] with Slaney normalization.
+ * Returns a flat Float32Array in row-major order.
+ */
+export function createMelFilterbank(nMels: number): Float32Array {
+    const { SAMPLE_RATE, N_FREQ_BINS } = MEL_CONSTANTS;
+    const fMax = SAMPLE_RATE / 2; // 8000
+
+    const allFreqs = new Float64Array(N_FREQ_BINS);
+    for (let i = 0; i < N_FREQ_BINS; i++) {
+        allFreqs[i] = (fMax * i) / (N_FREQ_BINS - 1);
+    }
+
+    const melMin = hzToMel(0);
+    const melMax = hzToMel(fMax);
+    const nPoints = nMels + 2;
+    const fPts = new Float64Array(nPoints);
+    for (let i = 0; i < nPoints; i++) {
+        fPts[i] = melToHz(melMin + ((melMax - melMin) * i) / (nPoints - 1));
+    }
+
+    const fDiff = new Float64Array(nPoints - 1);
+    for (let i = 0; i < nPoints - 1; i++) {
+        fDiff[i] = fPts[i + 1] - fPts[i];
+    }
+
+    const fb = new Float32Array(nMels * N_FREQ_BINS);
+    for (let m = 0; m < nMels; m++) {
+        const enorm = 2.0 / (fPts[m + 2] - fPts[m]); // slaney normalization
+        const fbOffset = m * N_FREQ_BINS;
+        for (let k = 0; k < N_FREQ_BINS; k++) {
+            const downSlope = (allFreqs[k] - fPts[m]) / fDiff[m];
+            const upSlope = (fPts[m + 2] - allFreqs[k]) / fDiff[m + 1];
+            fb[fbOffset + k] = Math.max(0, Math.min(downSlope, upSlope)) * enorm;
+        }
+    }
+    return fb;
+}
+
+/**
+ * Create a Hann window of length WIN_LENGTH, zero-padded to N_FFT.
+ */
+export function createPaddedHannWindow(): Float64Array {
+    const { N_FFT, WIN_LENGTH } = MEL_CONSTANTS;
+    const window = new Float64Array(N_FFT);
+    const padLeft = (N_FFT - WIN_LENGTH) >> 1; // 56
+    for (let n = 0; n < WIN_LENGTH; n++) {
+        window[padLeft + n] = 0.5 * (1 - Math.cos((2 * Math.PI * n) / (WIN_LENGTH - 1)));
+    }
+    return window;
+}
+
+/**
+ * Precompute FFT twiddle factors for a given size N.
+ */
+export function precomputeTwiddles(N: number): { cos: Float64Array; sin: Float64Array } {
+    const half = N >> 1;
+    const cos = new Float64Array(half);
+    const sin = new Float64Array(half);
+    for (let i = 0; i < half; i++) {
+        const angle = (-2 * Math.PI * i) / N;
+        cos[i] = Math.cos(angle);
+        sin[i] = Math.sin(angle);
+    }
+    return { cos, sin };
+}
+
+/**
+ * In-place radix-2 Cooley-Tukey FFT.
+ * @param re Real part (modified in-place)
+ * @param im Imaginary part (modified in-place)
+ * @param n FFT size (must be power of 2)
+ * @param tw Precomputed twiddle factors
+ */
+export function fft(re: Float64Array, im: Float64Array, n: number, tw: { cos: Float64Array; sin: Float64Array }): void {
+    // Bit-reversal permutation
+    for (let i = 1, j = 0; i < n; i++) {
+        let bit = n >> 1;
+        while (j & bit) { j ^= bit; bit >>= 1; }
+        j ^= bit;
+        if (i < j) {
+            let tmp = re[i]; re[i] = re[j]; re[j] = tmp;
+            tmp = im[i]; im[i] = im[j]; im[j] = tmp;
+        }
+    }
+    // Cooley-Tukey butterfly
+    for (let size = 2; size <= n; size <<= 1) {
+        const half = size >> 1;
+        const step = n / size;
+        for (let i = 0; i < n; i += size) {
+            for (let j = 0; j < half; j++) {
+                const idx = j * step;
+                const tRe = re[i + j + half] * tw.cos[idx] - im[i + j + half] * tw.sin[idx];
+                const tIm = re[i + j + half] * tw.sin[idx] + im[i + j + half] * tw.cos[idx];
+                re[i + j + half] = re[i + j] - tRe;
+                im[i + j + half] = im[i + j] - tIm;
+                re[i + j] += tRe;
+                im[i + j] += tIm;
+            }
+        }
+    }
+}
+
+/**
+ * Apply pre-emphasis filter to audio samples.
+ * @param chunk Raw audio chunk
+ * @param lastSample Last sample from previous chunk (for continuity)
+ * @param coeff Pre-emphasis coefficient (default 0.97)
+ * @returns Pre-emphasized samples
+ */
+export function preemphasize(chunk: Float32Array, lastSample: number = 0, coeff: number = MEL_CONSTANTS.PREEMPH): Float32Array {
+    const out = new Float32Array(chunk.length);
+    out[0] = chunk[0] - coeff * lastSample;
+    for (let i = 1; i < chunk.length; i++) {
+        out[i] = chunk[i] - coeff * chunk[i - 1];
+    }
+    return out;
+}
+
+/**
+ * Compute a single mel spectrogram frame from pre-emphasized audio.
+ * @param preemphAudio Full pre-emphasized audio buffer
+ * @param frameIdx Frame index
+ * @param hannWindow Pre-computed Hann window
+ * @param twiddles Pre-computed FFT twiddle factors
+ * @param melFilterbank Pre-computed mel filterbank
+ * @param nMels Number of mel bins
+ * @returns Raw (un-normalized) log-mel values for this frame
+ */
+export function computeMelFrame(
+    preemphAudio: Float32Array,
+    frameIdx: number,
+    hannWindow: Float64Array,
+    twiddles: { cos: Float64Array; sin: Float64Array },
+    melFilterbank: Float32Array,
+    nMels: number,
+): Float32Array {
+    const { N_FFT, HOP_LENGTH, N_FREQ_BINS, LOG_ZERO_GUARD } = MEL_CONSTANTS;
+    const pad = N_FFT >> 1; // 256
+    const frameStart = frameIdx * HOP_LENGTH - pad;
+    const preemphLen = preemphAudio.length;
+
+    // Window the frame
+    const fftRe = new Float64Array(N_FFT);
+    const fftIm = new Float64Array(N_FFT);
+    for (let k = 0; k < N_FFT; k++) {
+        const idx = frameStart + k;
+        const sample = (idx >= 0 && idx < preemphLen) ? preemphAudio[idx] : 0;
+        fftRe[k] = sample * hannWindow[k];
+        fftIm[k] = 0;
+    }
+
+    // FFT
+    fft(fftRe, fftIm, N_FFT, twiddles);
+
+    // Power spectrum
+    const power = new Float32Array(N_FREQ_BINS);
+    for (let k = 0; k < N_FREQ_BINS; k++) {
+        power[k] = fftRe[k] * fftRe[k] + fftIm[k] * fftIm[k];
+    }
+
+    // Mel filterbank multiply + log
+    const melFrame = new Float32Array(nMels);
+    for (let m = 0; m < nMels; m++) {
+        let melVal = 0;
+        const fbOff = m * N_FREQ_BINS;
+        for (let k = 0; k < N_FREQ_BINS; k++) {
+            melVal += power[k] * melFilterbank[fbOff + k];
+        }
+        melFrame[m] = Math.log(melVal + LOG_ZERO_GUARD);
+    }
+    return melFrame;
+}
+
+/**
+ * Normalize mel features per-feature with Bessel-corrected variance.
+ * @param features Flat array [nMels × T], mel-major layout
+ * @param nMels Number of mel bins
+ * @param T Number of time frames
+ * @returns Normalized features (new array)
+ */
+export function normalizeMelFeatures(features: Float32Array, nMels: number, T: number): Float32Array {
+    const out = new Float32Array(features.length);
+
+    for (let m = 0; m < nMels; m++) {
+        const base = m * T;
+
+        // Copy and compute mean
+        let sum = 0;
+        for (let t = 0; t < T; t++) {
+            out[base + t] = features[base + t];
+            sum += features[base + t];
+        }
+        const mean = sum / T;
+
+        // Variance
+        let varSum = 0;
+        for (let t = 0; t < T; t++) {
+            const d = out[base + t] - mean;
+            varSum += d * d;
+        }
+        const invStd = T > 1
+            ? 1.0 / (Math.sqrt(varSum / (T - 1)) + 1e-5)
+            : 0;
+
+        // Normalize
+        for (let t = 0; t < T; t++) {
+            out[base + t] = (out[base + t] - mean) * invStd;
+        }
+    }
+
+    return out;
+}
+
+/**
+ * Convert sample offset to frame index.
+ */
+export function sampleToFrame(sampleOffset: number): number {
+    return Math.floor(sampleOffset / MEL_CONSTANTS.HOP_LENGTH);
+}