aimeat 2.4.0 → 2.6.0

package/dist/public/components/VoiceRecorder.js

@@ -0,0 +1,116 @@
+/**
+ * @file VoiceRecorder.js
+ * @description Record-a-voice-clip control, shared by the inbox composer and the OpenRouter
+ *   settings' transcription test. Wraps /js/services/audio-recorder.js in a Preact button that
+ *   shows what is happening: elapsed time, a live input level so a dead microphone is obvious
+ *   immediately, and separate stop-and-keep versus cancel-and-discard actions.
+ *
+ *   Press to start, press again to stop. Not press-and-hold: on a touch screen that loses the
+ *   recording to any accidental lift, and it makes a long message physically tiring.
+ * @structure VoiceRecorder (control) · useRecorder (state machine)
+ * @usage <${VoiceRecorder} maxSeconds=${300} onRecorded=${(file, seconds) => …} />
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Initial version (voice messages + STT settings test).
+ */
+import { h } from 'preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { startRecording, isRecordingSupported, fmtDuration } from '/js/services/audio-recorder.js';
+
+/**
+ * @param {object} props
+ * @param {(file: File, durationSeconds: number) => void} props.onRecorded
+ * @param {number} [props.maxSeconds]   hard stop (the node's AIMEAT_VOICE_MSG_MAX_SECONDS)
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.label]        text next to the icon; omitted = icon only
+ * @param {string} [props.className]    extra class on the idle button (host styling)
+ */
+export function VoiceRecorder({ onRecorded, maxSeconds = 300, disabled = false, label, className = '' }) {
+  const [state, setState] = useState('idle');   // idle | starting | recording | finishing
+  const [seconds, setSeconds] = useState(0);
+  const [level, setLevel] = useState(0);
+  const [error, setError] = useState(null);
+  const [capped, setCapped] = useState(false);
+  const recRef = useRef(null);
+
+  // Leaving the view mid-recording must release the microphone. Without this the browser's recording
+  // indicator stays lit after the user has navigated away, which reads as an app still listening.
+  useEffect(() => () => { try { recRef.current?.cancel(); } catch { /* gone already */ } }, []);   // eslint-disable-line aimeat/no-silent-catch -- teardown of an already-torn-down recorder
+
+  if (!isRecordingSupported()) return null;
+
+  async function begin() {
+    setError(null); setCapped(false); setSeconds(0); setLevel(0); setState('starting');
+    try {
+      recRef.current = await startRecording({
+        maxSeconds,
+        onTick: setSeconds,
+        onLevel: setLevel,
+        onAutoStop: () => { setCapped(true); finish(); },
+      });
+      setState('recording');
+    } catch (e) {
+      setState('idle');
+      // Say which of the three it was: a denied permission, no microphone, or a browser that cannot.
+      const name = e?.name || '';
+      setError(
+        name === 'NotAllowedError' || name === 'SecurityError' ? t('voice.errDenied')
+          : name === 'NotFoundError' ? t('voice.errNoMic')
+          : e?.message === 'unsupported' ? t('voice.errUnsupported')
+          : (e?.message || t('voice.errFailed')),
+      );
+    }
+  }
+
+  async function finish() {
+    const rec = recRef.current;
+    if (!rec) return;
+    setState('finishing');
+    try {
+      const { file, durationSeconds } = await rec.stop();
+      recRef.current = null;
+      setState('idle'); setSeconds(0); setLevel(0);
+      onRecorded(file, durationSeconds);
+    } catch (e) {
+      recRef.current = null;
+      setState('idle');
+      setError(e?.message || t('voice.errFailed'));
+    }
+  }
+
+  function discard() {
+    try { recRef.current?.cancel(); } catch { /* already stopped */ }   // eslint-disable-line aimeat/no-silent-catch -- cancel is best-effort; the state reset below is what matters
+    recRef.current = null;
+    setState('idle'); setSeconds(0); setLevel(0); setCapped(false);
+  }
+
+  if (state === 'recording' || state === 'finishing') {
+    const near = maxSeconds > 0 && seconds >= maxSeconds - 10;
+    return html`
+      <span class="vr-active" role="group" aria-label=${t('voice.recording')}>
+        <span class="vr-dot" aria-hidden="true"></span>
+        <span class=${`vr-time${near ? ' vr-time--near' : ''}`}>${fmtDuration(seconds)}</span>
+        <span class="vr-meter" aria-hidden="true">
+          <span class="vr-meter-fill" style=${`width:${Math.round(Math.min(1, level * 1.6) * 100)}%`}></span>
+        </span>
+        <button type="button" class="btn-primary btn-sm vr-stop" disabled=${state === 'finishing'}
+                onClick=${finish} title=${t('voice.stop')} aria-label=${t('voice.stop')}>
+          ${state === 'finishing' ? '…' : t('voice.stop')}
+        </button>
+        <button type="button" class="btn-ghost btn-sm vr-cancel" disabled=${state === 'finishing'}
+                onClick=${discard} title=${t('voice.cancel')} aria-label=${t('voice.cancel')}>✕</button>
+        ${capped ? html`<span class="vr-note">${t('voice.capped', { n: maxSeconds })}</span>` : null}
+      </span>`;
+  }
+
+  return html`
+    <span class="vr-wrap">
+      <button type="button" class=${`vr-btn ${className}`} disabled=${disabled || state === 'starting'}
+              onClick=${begin} title=${t('voice.record')} aria-label=${t('voice.record')}>
+        <span class="vr-ico" aria-hidden="true">🎤</span>${label ? html`<span class="vr-label">${label}</span>` : null}
+      </button>
+      ${error ? html`<span class="vr-error">${error}</span>` : null}
+    </span>`;
+}

package/dist/public/connection-done.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Account connected</title>
+  <!--
+    Where the provider's redirect lands after a connection is finished (TARGET-057).
+
+    It is a STATIC file rather than something the node renders, because the backend is protocol-only
+    and does not build pages.
+
+    IT ANNOUNCES OVER BroadcastChannel, not window.opener. This node sets a Cross-Origin-Opener-Policy,
+    which severs the opener relationship the moment the pop-up navigates to the provider — so
+    window.opener is null here and the page that opened this one cannot read window.closed either.
+    The first version relied on exactly that and produced ten "COOP would block the window.closed
+    call" errors per connection while appearing to work.
+
+    BroadcastChannel is same-origin and unaffected by COOP, so this reaches the opener directly. The
+    opener also polls the server as a fallback, because a user who closes the pop-up early never
+    reaches this page at all.
+  -->
+  <style>
+    html { color-scheme: light dark; }
+    body {
+      margin: 0; min-height: 100vh; display: grid; place-items: center;
+      font: 1rem/1.5 system-ui, sans-serif; padding: 1.5rem; text-align: center;
+    }
+    p { max-width: 28rem; margin: 0; }
+  </style>
+</head>
+<body>
+  <p id="msg">Account connected. You can close this window.</p>
+  <script>
+    try {
+      const ch = new BroadcastChannel('aimeat-connect');
+      ch.postMessage({ type: 'connected' });
+      ch.close();
+    } catch (err) {
+      // Reported rather than swallowed: without this message the opener falls back to polling, which
+      // is slower but still correct, and an operator should be able to tell the two paths apart.
+      console.warn('[aimeat-connect] could not announce over BroadcastChannel', err);
+    }
+    // Attempted, not assumed. A window the script did not open cannot close itself in most
+    // browsers, which is what happens when someone reaches this URL directly — and a blank page
+    // would then read as a failure when the connection has in fact already succeeded.
+    try { window.close(); } catch (err) {
+      document.getElementById('msg').textContent =
+        'Account connected. You can close this window. (' + err.message + ')';
+    }
+  </script>
+</body>
+</html>

package/dist/public/css/components/voice-recorder.css

@@ -0,0 +1,66 @@
+/**
+ * @file voice-recorder.css
+ * @description Styles for /components/VoiceRecorder.js — the record button and its active state
+ *   (pulsing dot, elapsed time, input-level meter, stop and cancel). Shared by the inbox composer and
+ *   the OpenRouter settings transcription test, so it lives with the component rather than inside a
+ *   view stylesheet.
+ * @structure .vr-wrap/.vr-btn (idle) · .vr-active (recording) · .vr-dot · .vr-time · .vr-meter
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Initial version (voice messages).
+ */
+
+.vr-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+.vr-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: none; border: none; cursor: pointer;
+  color: var(--text-dim); font-size: 18px; line-height: 1;
+  padding: 4px 6px; border-radius: var(--radius, 8px);
+}
+.vr-btn:hover:not(:disabled) { background: var(--bg-dim); color: var(--text); }
+.vr-btn:disabled { opacity: .45; cursor: not-allowed; }
+.vr-label { font-size: 13px; }
+
+.vr-active {
+  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  padding: 4px 8px; border-radius: var(--radius, 8px);
+  background: var(--bg-dim); border: 1px solid var(--border);
+}
+
+.vr-dot {
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--danger);
+  animation: vr-pulse 1.4s ease-in-out infinite;
+}
+@keyframes vr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
+/* Someone who has asked for less motion still needs to see that recording is live — the colour and
+   the running timer carry that; only the pulse stops. */
+@media (prefers-reduced-motion: reduce) {
+  .vr-dot { animation: none; }
+}
+
+.vr-time {
+  font-variant-numeric: tabular-nums;
+  font-size: 13px; font-weight: 600; min-width: 3.2em;
+}
+.vr-time--near { color: var(--danger); }
+
+.vr-meter {
+  width: 56px; height: 6px; border-radius: 3px;
+  background: var(--bg-surface); overflow: hidden;
+}
+.vr-meter-fill {
+  display: block; height: 100%; width: 0;
+  background: var(--success);
+  transition: width 80ms linear;
+}
+
+.vr-note, .vr-error { font-size: 11px; color: var(--text-muted); }
+.vr-error { color: var(--danger); }
+
+@media (max-width: 520px) {
+  /* The meter is the first thing to go: on a narrow composer the timer and the two buttons are what
+     the user needs, and a decorative bar must never push the stop button out of reach. */
+  .vr-meter { display: none; }
+  .vr-active { width: 100%; }
+}

package/dist/public/css/views/inbox.css

@@ -801,3 +801,44 @@
 .inbox-speak-btn--on { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent); }
 .inbox-speak-ico { font-size: 13px; line-height: 1; }
 .inbox-speak-stop { flex: none; padding-inline: 8px; }
+
+/* ── Voice messages (2026-08-01) ──
+   A voice message plays where it sits. It used to fall into the generic attachment chip and open in
+   a new browser tab, which is a download, not a conversation. */
+.inbox-attach-audio { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 380px; }
+.inbox-audio { width: 100%; height: 34px; }
+.inbox-audio--chip { max-width: 190px; height: 30px; }
+.inbox-audio-dur { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+
+.inbox-file-chip--voice { align-items: center; gap: 6px; }
+.inbox-chip-voice { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+
+/* Transcript: collapsed by default so a thread of voice messages stays scannable, and the label
+   always says who produced the text — the sender's own transcript and one this reader paid for are
+   not the same claim. */
+.inbox-transcript { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
+.inbox-transcript-toggle {
+  background: none; border: none; cursor: pointer; padding: 2px 0;
+  font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px;
+}
+.inbox-transcript-toggle:hover { color: var(--text); }
+.inbox-transcript-src { color: var(--text-muted); }
+.inbox-transcript-text {
+  flex-basis: 100%; font-size: 13px; white-space: pre-wrap; word-break: break-word;
+  padding: 8px; border-radius: var(--radius, 8px);
+  background: var(--bg-dim); border: 1px solid var(--border);
+}
+.inbox-transcript-btn {
+  background: none; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
+  font-size: 11px; padding: 2px 10px; color: var(--text-dim);
+}
+.inbox-transcript-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.inbox-transcript-btn:disabled { opacity: .6; cursor: progress; }
+.inbox-transcript-hint { font-size: 11px; color: var(--text-muted); }
+.inbox-transcript-err { font-size: 11px; color: var(--danger); }
+
+@media (max-width: 520px) {
+  /* Full width on a phone: a 380px cap would leave the player floating in a narrow column. */
+  .inbox-attach-audio { max-width: 100%; }
+  .inbox-audio--chip { max-width: 100%; }
+}