aimeat 2.4.0 → 2.6.0

package/dist/public/views/landing.js

@@ -787,6 +787,10 @@ export default function Landing({ navigate }) {
         <a href="/v1/pricing#own-node" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('landing.footOwnNode', 'Run your own node')}</a>
         <a class="ld-gh" href="https://github.com/miikkij/aimeat-protocol" target="_blank" rel="noopener">${GhMark}GitHub</a>
         <a href="/v1/portal?view=dev">${tr('landing.footDev', 'For developers')}</a>
+        ${/* The transparency page in the footer as well as the one line above it. A page a
+              visitor cannot find is close to not having one, and the footer is where someone
+              looks for this kind of statement. Header nav stays out of it. */''}
+        <a href="/v1/transparency" onClick=${(e) => { e.preventDefault(); navigate('/v1/transparency'); }}>${tr('landing.footTransparency', 'AI transparency')}</a>
       </footer>
     </div>
   `;

package/dist/public/views/profile/access-tab/connections.js

@@ -0,0 +1,264 @@
+/**
+ * @file views/profile/access-tab/connections.js
+ * @description Connected Accounts section (TARGET-057) — the accounts the owner holds at external
+ *   services, and the one place they can all be seen and taken away.
+ *
+ *   IT LIVES HERE AND NOT IN AN APP because a person must be able to find everything they have
+ *   given a third party in ONE place. An app-by-app panel means that revoking an account requires
+ *   remembering which app created it, which is the same as not being able to revoke it.
+ *
+ *   `needs_reauth` is rendered as a BUTTON THAT FIXES IT, not as an error. It is the expected end of
+ *   a token's life, it happens to every long-lived connection eventually, and showing it in red
+ *   turns a two-click repair into a support question.
+ * @structure ConnectionsSection — GET /v1/connections + /providers, connect via a pop-up, revoke.
+ * @version-history
+ *   v1.0.0 — 2026-08-02 — Initial (TARGET-057 phase 3).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { useConfirm } from '/components/Modal.js';
+import { apiGet, apiPost, apiDelete } from '/js/api.js';
+import { swallowed } from '/js/swallowed.js';
+
+/** Things a user must be told BEFORE they try, because the failure they prevent is unreadable. */
+const NOTES = {
+  mastodon: ['cxNoteMastodonNeeds', 'cxNoteMastodonBefore'],
+  youtube: ['cxNoteYoutubeBefore'],
+  bluesky: ['cxNoteBlueskyNeeds', 'cxNoteBlueskyWhere', 'cxNoteBlueskyBefore'],
+};
+
+export function ConnectionsSection({ showToast }) {
+  const [connections, setConnections] = useState([]);
+  const [providers, setProviders] = useState([]);
+  const [instances, setInstances] = useState({});
+  // Supplied credentials, per provider per field. Held only until the POST; nothing here is
+  // persisted client-side, and the server never sends any of it back.
+  const [fields, setFields] = useState({});
+  const [busy, setBusy] = useState('');
+  const [unavailable, setUnavailable] = useState(false);
+  const { confirm, ConfirmUI } = useConfirm();
+
+  const load = useCallback(async () => {
+    try {
+      const [list, provs] = await Promise.all([
+        apiGet('/v1/connections'),
+        apiGet('/v1/connections/providers'),
+      ]);
+      // apiGet returns the WHOLE envelope, so the payload is under .data. Reading it a level
+      // too high yields undefined -> [], which renders as a believable empty state rather than an
+      // error, and that is exactly how this stayed wrong through a typecheck and a lint.
+      setConnections(list?.data?.connections || []);
+      setProviders(provs?.data?.providers || []);
+      setUnavailable(false);
+    } catch (err) {
+      // A node with the capability switched off answers 503. Saying so beats an empty list that
+      // reads as "you have no accounts".
+      swallowed('connections-load', err);
+      setUnavailable(true);
+    }
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+  // Every tab showing server data re-reads on a live update.
+  useEffect(() => {
+    const handler = () => void load();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+/**
+ * Wait for the round to finish, WITHOUT touching the pop-up window.
+ *
+ * This node sets a Cross-Origin-Opener-Policy, which severs the opener relationship as soon as the
+ * pop-up navigates to the provider. `win.closed` is then unreadable — the first version of this
+ * polled it and logged ten "COOP would block the window.closed call" errors per connection while
+ * appearing to work, because the flow completed for other reasons.
+ *
+ * Two signals instead, and neither goes near the window:
+ *   - the done page announces on a same-origin BroadcastChannel, which COOP does not affect
+ *   - the connection list is polled, which is what ACTUALLY decides success and also covers the
+ *     user who closes the pop-up before it ever reaches the done page
+ *
+ * Resolves either way; gives up after the timeout rather than waiting forever on a cancelled round.
+ */
+  const waitForConnection = useCallback(async (countBefore) => {
+    const DEADLINE = Date.now() + 180_000;
+    let channel = null;
+    let announced = false;
+    try {
+      channel = new BroadcastChannel('aimeat-connect');
+      channel.onmessage = () => { announced = true; };
+    } catch (err) {
+      // Not fatal: the poll below is the one that decides. Logged so the two paths stay
+      // distinguishable when someone is looking at why a connection took four seconds.
+      swallowed('connections-broadcast', err);
+    }
+    try {
+      while (Date.now() < DEADLINE) {
+        await new Promise(r => setTimeout(r, 1200));
+        if (announced) return true;
+        const now = (await apiGet('/v1/connections'))?.data?.connections?.length ?? 0;
+        // A re-authorisation repairs a row rather than adding one, so a count that did not grow is
+        // not proof of failure -- but it is the cheap signal, and the announce covers the rest.
+        if (now > countBefore) return true;
+      }
+      return false;
+    } finally {
+      if (channel) channel.close();
+    }
+  }, []);
+
+  /**
+   * Consent happens at the provider, in a pop-up. Completion is detected by that window closing and
+   * a re-read of the list, because a cross-origin child window cannot be asked what happened to it
+   * — and treating "the window opened" as success would report a cancelled connection as connected.
+   */
+  const connect = useCallback(async (provider) => {
+    setBusy(provider.id);
+    try {
+      const res = await apiPost('/v1/connections/start', {
+        provider: provider.id,
+        instance: instances[provider.id] || undefined,
+        mode: 'personal',
+        return_url: '/connection-done.html',
+      });
+      const url = res?.data?.authorize_url;
+      if (!url) throw new Error('no authorize url');
+      const before = (await apiGet('/v1/connections'))?.data?.connections?.length ?? 0;
+      const win = window.open(url, 'aimeat-connect', 'width=620,height=760');
+      if (!win) throw new Error('popup blocked');
+      await waitForConnection(before);
+      await load();
+    } catch (err) {
+      swallowed('connections-start', err);
+      showToast(t('profile.access.cxConnectFailed') || 'Could not start connecting that account');
+    }
+    setBusy('');
+  }, [instances, load, showToast, waitForConnection]);
+
+  /**
+   * The other way to connect: the user supplies a credential and there is no round trip to the
+   * provider's consent screen. Kept separate from connect() because the two must never overlap —
+   * attaching an OAuth provider would be a way to skip its consent screen, and the server refuses
+   * that in both directions.
+   */
+  const attach = useCallback(async (provider) => {
+    setBusy(provider.id);
+    try {
+      await apiPost('/v1/connections/attach', {
+        provider: provider.id,
+        mode: 'personal',
+        fields: fields[provider.id] || {},
+      });
+      // Cleared on success so a secret does not sit in a form field after it has been stored.
+      setFields(f => ({ ...f, [provider.id]: {} }));
+      await load();
+    } catch (err) {
+      swallowed('connections-attach', err);
+      // The server's reason is the useful half here: "that is your account password, not an app
+      // password" is actionable in a way that "could not connect" is not.
+      showToast(err?.message || t('profile.access.cxConnectFailed') || 'Could not connect that account');
+    }
+    setBusy('');
+  }, [fields, load, showToast]);
+
+  // useConfirm is (message, onConfirm, opts) — positional, with a callback. Passing it an options
+  // object and awaiting the result renders an EMPTY dialog and never runs the action: the owner is
+  // asked to confirm losing an account without being told which one, and pressing Confirm does
+  // nothing. Both halves of that were live until the browser pass caught them.
+  const revoke = useCallback((conn) => {
+    const message = (t('profile.access.cxConfirm')
+      || 'Disconnect {account}? Apps that publish to it will stop being able to.')
+      .replace('{account}', conn.accountLabel);
+    confirm(message, async () => {
+      try {
+        const res = await apiDelete('/v1/connections/' + encodeURIComponent(conn.id));
+        // Honest about which half happened: a token still live at the provider is something the
+        // owner may want to go and remove there themselves.
+        showToast(res?.data?.told_provider
+          ? (t('profile.access.cxRevokedTold') || 'Disconnected, and the service was told.')
+          : (t('profile.access.cxRevokedLocal') || 'Disconnected here. The service could not be reached, so check it there too.'));
+        await load();
+      } catch (err) {
+        swallowed('connections-revoke', err);
+        showToast(t('profile.access.cxRevokeFailed') || 'Could not disconnect that account');
+      }
+    }, {
+      title: t('profile.access.cxDisconnect') || 'Disconnect',
+      confirmLabel: t('profile.access.cxDisconnect') || 'Disconnect',
+      danger: true,
+    });
+  }, [confirm, load, showToast]);
+
+  if (unavailable) return null;
+
+  return html`
+    <div class="access-section">
+      <${ConfirmUI} />
+      <h3 class="access-h3">${t('profile.access.cxTitle') || 'Connected accounts'}</h3>
+      <p class="text-meta-sm">${t('profile.access.cxIntro')
+        || 'Accounts you have connected at other services. The credential stays on this node — an app is only ever told which account it may use, never the account itself.'}</p>
+
+      ${connections.length === 0 && html`
+        <div class="mem-item"><span class="adm-text-dim">${t('profile.access.cxEmpty') || 'No connected accounts yet.'}</span></div>
+      `}
+
+      ${connections.map(c => html`
+        <div class="mem-item" key=${c.id}>
+          <span class="mem-key">${escHtml(c.accountLabel)}</span>
+          <span class="text-meta-sm">
+            ${escHtml(c.provider)}${c.status === 'needs_reauth'
+              ? ' · ' + (t('profile.access.cxNeedsReauth') || 'needs reconnecting')
+              : ''}
+          </span>
+          ${c.status === 'needs_reauth' && html`
+            <button class="btn-outline" onClick=${() => connect({ id: c.provider })}>
+              ${t('profile.access.cxReconnect') || 'Reconnect'}
+            </button>
+          `}
+          <button class="btn-ghost btn-danger" onClick=${() => revoke(c)}>
+            ${t('profile.access.cxDisconnect') || 'Disconnect'}
+          </button>
+        </div>
+      `)}
+
+      ${providers.map(p => html`
+        <div class="access-cx-add" key=${p.id}>
+          <div class="mem-item access-fed-add">
+            ${p.instanceScoped && html`
+              <input type="text" class="input-field input-sm"
+                placeholder=${t('profile.access.cxInstance') || 'instance address, e.g. mastodon.social'}
+                value=${instances[p.id] || ''}
+                onInput=${e => setInstances({ ...instances, [p.id]: e.target.value })} />
+            `}
+            ${(p.attachFields || []).map(f => html`
+              <input key=${f.name}
+                type=${f.secret ? 'password' : 'text'}
+                class="input-field input-sm"
+                autocomplete=${f.secret ? 'new-password' : 'off'}
+                placeholder=${f.placeholder || f.label}
+                aria-label=${f.label}
+                value=${(fields[p.id] || {})[f.name] || ''}
+                onInput=${e => setFields(prev => ({
+                  ...prev, [p.id]: { ...(prev[p.id] || {}), [f.name]: e.target.value },
+                }))} />
+            `)}
+            <button class="btn-outline" disabled=${busy === p.id}
+              onClick=${() => (p.attachFields ? attach(p) : connect(p))}>
+              ${busy === p.id
+                ? (t('profile.access.cxConnecting') || 'Connecting…')
+                : `${t('profile.access.cxConnect') || 'Connect'} ${escHtml(p.label)}`}
+            </button>
+          </div>
+          ${(NOTES[p.id] || []).map(key => html`
+            <p class="text-meta-sm" key=${key}>${t('profile.access.' + key)}</p>
+          `)}
+        </div>
+      `)}
+    </div>
+  `;
+}

package/dist/public/views/profile/access-tab.js

@@ -40,6 +40,7 @@ import { SharingGroupsSection } from './access-tab/sharing-groups.js';
 import { AgentDefaultsSection } from './access-tab/agent-defaults.js';
 import { ConnectedAppsSection } from './access-tab/connected-apps.js';
 import { AccessTokensSection } from './access-tab/access-tokens.js';
+import { ConnectionsSection } from './access-tab/connections.js';
 import { swallowed } from '/js/swallowed.js';
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -252,6 +253,7 @@ export default function AccessTab({ session, showToast }) {
     ${overview !== undefined ? html`
       <${ConnectedAppsSection} showToast=${showToast} initial=${overview?.appGrants} />
       <${AccessTokensSection} session=${session} showToast=${showToast} initial=${overview?.accessTokens} />
+      <${ConnectionsSection} showToast=${showToast} />
       <${SharingGroupsSection} showToast=${showToast} initial=${overview?.groups} />
       <${AgentDefaultsSection} showToast=${showToast} initial=${overview?.agentDefaults} />
     ` : null}

package/dist/public/views/profile/ai-transparency-card.js

@@ -21,6 +21,11 @@
  *   import { AiTransparencyCard } from './ai-transparency-card.js';
  *   html`<${AiTransparencyCard} />`
  * @version-history
+ *   v1.1.0 — 2026-08-01 — i18n namespace renamed `aiTransparency.*` → `aiTransparencyMine.*`
+ *     (TARGET-058 Phase 10b). It sat one character away from `transparency.*`, the PUBLIC page's
+ *     namespace, with `title` and `loading` meaning different things in each — a pair an
+ *     autocomplete picks wrong and nothing catches, because a missing key renders as itself.
+ *     Strings and behaviour unchanged.
  *   v1.0.0 — 2026-08-01 — TARGET-058 Phase 8.
  */
 import { h } from 'preact';
@@ -59,7 +64,7 @@ export function AiTransparencyCard() {
       setReport(prev => (JSON.stringify(prev) === JSON.stringify(mine?.data ?? null) ? prev : (mine?.data ?? null)));
       setPolicy(prev => (JSON.stringify(prev) === JSON.stringify(pol?.data ?? null) ? prev : (pol?.data ?? null)));
     } catch (err) {
-      setError(err?.message || t('aiTransparency.loadFailed'));
+      setError(err?.message || t('aiTransparencyMine.loadFailed'));
     } finally {
       if (!opts.quiet) setLoading(false);
     }
@@ -85,55 +90,55 @@ export function AiTransparencyCard() {
     <div class="pf-card pf-aitr">
       <button type="button" class="pf-aitr-head" onClick=${() => setCollapsed(c => !c)}
               aria-expanded=${!collapsed}>
-        <span class="section-title">${t('aiTransparency.title')}</span>
+        <span class="section-title">${t('aiTransparencyMine.title')}</span>
         <span class="pf-aitr-chevron">${collapsed ? '+' : '−'}</span>
       </button>
-      <p class="section-desc">${t('aiTransparency.desc')}</p>
+      <p class="section-desc">${t('aiTransparencyMine.desc')}</p>
 
       ${!collapsed && html`
         <div class="pf-aitr-body">
-          ${loading && html`<p class="pf-aitr-muted">${t('aiTransparency.loading')}</p>`}
+          ${loading && html`<p class="pf-aitr-muted">${t('aiTransparencyMine.loading')}</p>`}
           ${error && html`<p class="pf-aitr-error">${error}</p>`}
 
           ${report && html`
             <div class="pf-aitr-stats">
               <div class=${'pf-aitr-stat' + (unlabelled > 0 ? ' pf-aitr-stat-warn' : '')}>
                 <span class="pf-aitr-num">${unlabelled}</span>
-                <span class="pf-aitr-lbl">${t('aiTransparency.unlabelled')}</span>
+                <span class="pf-aitr-lbl">${t('aiTransparencyMine.unlabelled')}</span>
               </div>
               <div class="pf-aitr-stat">
                 <span class="pf-aitr-num">${report.labelled ?? 0}</span>
-                <span class="pf-aitr-lbl">${t('aiTransparency.labelled')}</span>
+                <span class="pf-aitr-lbl">${t('aiTransparencyMine.labelled')}</span>
               </div>
               <div class="pf-aitr-stat">
                 <span class="pf-aitr-num">${report.public_total ?? 0}</span>
-                <span class="pf-aitr-lbl">${t('aiTransparency.publicTotal')}</span>
+                <span class="pf-aitr-lbl">${t('aiTransparencyMine.publicTotal')}</span>
               </div>
               <div class="pf-aitr-stat">
                 <span class="pf-aitr-num">${report.total ?? 0}</span>
-                <span class="pf-aitr-lbl">${t('aiTransparency.total')}</span>
+                <span class="pf-aitr-lbl">${t('aiTransparencyMine.total')}</span>
               </div>
             </div>
 
-            <p class="pf-aitr-note">${t('aiTransparency.scopeNote')}</p>
+            <p class="pf-aitr-note">${t('aiTransparencyMine.scopeNote')}</p>
 
             ${unlabelled > 0 && html`
-              <p class="pf-aitr-warn-line">${t('aiTransparency.unlabelledHelp')}</p>
+              <p class="pf-aitr-warn-line">${t('aiTransparencyMine.unlabelledHelp')}</p>
               <ul class="pf-aitr-list">
                 ${(report.unlabelled_detail?.items ?? []).map(item => html`
                   <li key=${item.id} class="pf-aitr-row">
-                    <span class="pf-aitr-row-main">${item.pipeline || t('aiTransparency.unknownSource')}</span>
+                    <span class="pf-aitr-row-main">${item.pipeline || t('aiTransparencyMine.unknownSource')}</span>
                     <span class="pf-aitr-row-meta">${shortTime(item.generated_at)}</span>
                     ${item.record_url && html`
                       <a class="pf-aitr-row-link" href=${item.record_url} target="_blank" rel="noopener noreferrer">
-                        ${t('aiTransparency.openRecord')}
+                        ${t('aiTransparencyMine.openRecord')}
                       </a>`}
                   </li>`)}
               </ul>
               ${report.unlabelled_detail
                 && report.unlabelled_detail.shown < report.unlabelled_detail.total
                 && html`<p class="pf-aitr-muted">
-                  ${t('aiTransparency.showingOf', {
+                  ${t('aiTransparencyMine.showingOf', {
                     shown: String(report.unlabelled_detail.shown),
                     total: String(report.unlabelled_detail.total),
                   })}
@@ -141,7 +146,7 @@ export function AiTransparencyCard() {
             `}
 
             ${(report.apps_declaring_generation_with_gap ?? []).length > 0 && html`
-              <h4 class="pf-aitr-sub">${t('aiTransparency.appsWithGap')}</h4>
+              <h4 class="pf-aitr-sub">${t('aiTransparencyMine.appsWithGap')}</h4>
               <ul class="pf-aitr-list">
                 ${report.apps_declaring_generation_with_gap.map(a => html`
                   <li key=${a.owner + '/' + a.filename} class="pf-aitr-row">
@@ -152,14 +157,14 @@ export function AiTransparencyCard() {
           `}
 
           ${policy && html`
-            <h4 class="pf-aitr-sub">${t('aiTransparency.policyTitle')}</h4>
+            <h4 class="pf-aitr-sub">${t('aiTransparencyMine.policyTitle')}</h4>
             <p class="pf-aitr-note">${policy.why}</p>
             <ul class="pf-aitr-list">
               ${(policy.records ?? []).map(r => html`
                 <li key=${r.what} class="pf-aitr-policy">
                   <span class="pf-aitr-row-main">${r.what}</span>
-                  <span class="pf-aitr-row-meta">${t('aiTransparency.retention')}: ${r.retention}</span>
-                  <span class="pf-aitr-row-meta">${t('aiTransparency.neverContains')}: ${r.never_contains}</span>
+                  <span class="pf-aitr-row-meta">${t('aiTransparencyMine.retention')}: ${r.retention}</span>
+                  <span class="pf-aitr-row-meta">${t('aiTransparencyMine.neverContains')}: ${r.never_contains}</span>
                 </li>`)}
             </ul>
             <p class="pf-aitr-note">${policy.note}</p>`}

package/dist/public/views/profile/inbox-tab/components.js

@@ -6,6 +6,11 @@
  *   chat.commands), SchedulePanel (own-agent scheduler), and ReplyWithAiPopover (TARGET-031). Each is
  *   self-contained (owns its own hooks). Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.11.0 — 2026-08-01 — Voice messages. AttachmentItem hands an audio attachment to AudioAttachment
+ *     (./voice-parts.js) so it plays in the bubble instead of opening in a browser tab, which is a
+ *     download and not a conversation. The Composer gains a 🎤 recorder feeding the SAME attachment
+ *     queue as 📎 (one upload path), and a recording's chip carries a player + its length so a bad
+ *     take is caught here rather than in the other person's mailbox.
  *   v1.10.0 — 2026-07-31 — MessageBubble gets a 🔊 read-aloud action (BubbleSpeakButton from
  *     ./read-aloud.js): speaks that one message via the Web Speech API, like the Sanomat app's per-article
  *     "Puhu". Hidden when the browser can't speak or the message has no speakable body.
@@ -51,6 +56,8 @@ import * as schedules from '/js/services/schedules.js';
 import { MODES } from '/js/services/messages-ai-prompts.js';
 import { loadToastUI, prepareBody, quoteSnippet, statusTick, timeShort, trackStateLabel, ATTACH_ICO, attachKind, IFORM_OTHER } from './helpers.js';
 import { BubbleSpeakButton } from './read-aloud.js';
+import { AudioAttachment, fmtClock, stopOtherAudio } from './voice-parts.js';
+import { VoiceRecorder } from '/components/VoiceRecorder.js';
 import { swallowed } from '/js/swallowed.js';
 
 export function Avatar({ seed, size = 36 }) {
@@ -59,10 +66,12 @@ export function Avatar({ seed, size = 36 }) {
     dangerouslySetInnerHTML=${{ __html: svg }}></span>`;
 }
 
+
 /** One received/sent attachment. Images render as a thumbnail (click → full-size in a new tab);
- *  PDF/audio/video/file open natively in a new tab; markdown opens the in-app rendered viewer. Every
- *  ready attachment gets a download button. Not-yet-duplicated / expired attachments show their state. */
-export function AttachmentItem({ a, url, onOpenMarkdown }) {
+ *  audio plays in place; PDF/video/file open natively in a new tab; markdown opens the in-app
+ *  rendered viewer. Every ready attachment gets a download button. Not-yet-duplicated / expired
+ *  attachments show their state. */
+export function AttachmentItem({ a, url, onOpenMarkdown, msgId, onTranscribe, canTranscribe }) {
   const kind = attachKind(a);
   const name = a.name || a.storageKey;
   const ready = !!url && !a.expired;
@@ -93,7 +102,11 @@ export function AttachmentItem({ a, url, onOpenMarkdown }) {
       </button>${download}
     </div>`;
   }
-  // pdf / audio / video / file — let the browser open it in a new tab.
+  if (kind === 'audio') {
+    return html`<${AudioAttachment} a=${a} url=${url} name=${name} download=${download}
+      msgId=${msgId} onTranscribe=${onTranscribe} canTranscribe=${canTranscribe} />`;
+  }
+  // pdf / video / file — let the browser open it in a new tab.
   return html`<div class="inbox-attach-chip">
     <a class="inbox-attach-open" href=${url} target="_blank" rel="noopener" title=${t('inbox.attachmentOpen')}>
       <span class="inbox-attach-ico">${ATTACH_ICO[kind]}</span><span class="inbox-attach-name">${escHtml(name)}</span>
@@ -261,7 +274,7 @@ export function PollBuilder({ questions, setQuestions }) {
     </div>`;
 }
 
-export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onPark, onReplyAi, onQuote, quoted, quotedName, onJumpTo, domId, tracked, onOpenMarkdown, answeredWith, onAnswer, submitting, showLinkPreviews }) {
+export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onPark, onReplyAi, onQuote, quoted, quotedName, onJumpTo, domId, tracked, onOpenMarkdown, answeredWith, onAnswer, submitting, showLinkPreviews, onTranscribe, canTranscribe }) {
   // Copy the message text to the clipboard (the raw markdown the sender wrote — that's what pastes
   // usefully into an AI chat or a document; the rendered body's presigned image URLs are transient).
   const [copied, setCopied] = useState(false);
@@ -319,7 +332,9 @@ export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onP
         ) : null}
         ${nonInline.length > 0 && html`
           <div class="inbox-attach-row">
-            ${nonInline.map(a => html`<${AttachmentItem} key=${a.id} a=${a} url=${urls[a.id]} onOpenMarkdown=${onOpenMarkdown} />`)}
+            ${nonInline.map(a => html`<${AttachmentItem} key=${a.id} a=${a} url=${urls[a.id]}
+              onOpenMarkdown=${onOpenMarkdown} msgId=${msg.id}
+              onTranscribe=${onTranscribe} canTranscribe=${canTranscribe} />`)}
           </div>`}
         <div class="inbox-bubble-meta">
           ${trk ? html`<span class=${`inbox-track-badge inbox-track-badge--${trk.tone}`} title=${t('inbox.trackResponse')}>🔗 ${trk.text}</span>` : null}
@@ -334,7 +349,10 @@ export function MessageBubble({ msg, mine, urlMap, starred, onStar, onTrack, onP
  * markdown-textarea + live-preview fallback if the editor can't load. Owns its own draft + file
  * state; calls onSend(recipient, markdown, files, reset). Remount it (via key) per conversation so
  * the draft doesn't leak between threads. */
-export function Composer({ recipient, sendLabel, sending, onSend, initialText = '', draftKey = '', focusNonce = 0 }) {
+export function Composer({
+  recipient, sendLabel, sending, onSend, initialText = '', draftKey = '', focusNonce = 0,
+  voiceMaxSeconds = 300,
+}) {
   // Restore an in-progress draft for this conversation/compose (localStorage), or the passed initialText.
   const readDraft = () => { try { return draftKey ? (localStorage.getItem(draftKey) || '') : ''; } catch { return ''; } };   // eslint-disable-line aimeat/no-silent-catch -- a browser API refusing here IS the answer
   const seeded = initialText || readDraft();   // an explicit suggested reply wins; else restore a draft
@@ -379,6 +397,21 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
     const file = (blob instanceof File && !generic) ? blob : new File([blob], name, { type: blob.type || 'image/png' });
     setFiles((prev) => [...prev, file]);
   };
+  // A finished recording joins the same attachment queue as a picked file, so it travels the one
+  // upload path (presigned PUT) everything else uses. The measured length rides ON the File: the
+  // send path reads it back as `duration_seconds`, which lets the recipient's thread show "0:14"
+  // before a single byte of audio has been fetched.
+  const addRecording = (file, durationSeconds) => {
+    file.durationSeconds = durationSeconds;
+    // Minted ONCE here, not in render: createObjectURL in a render body allocates a new blob URL on
+    // every re-render and never releases the old ones.
+    file.previewUrl = URL.createObjectURL(file);
+    setFiles((prev) => [...prev, file]);
+  };
+  const releasePreview = (file) => {
+    if (file?.previewUrl) { URL.revokeObjectURL(file.previewUrl); file.previewUrl = null; }
+  };
+
   // Pull image files out of a clipboard/drop event; returns true if any were handled (caller preventDefaults).
   const handleImagePaste = (e) => {
     const items = Array.from(e.clipboardData?.items || e.dataTransfer?.items || []);
@@ -479,7 +512,9 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
   const getText = () => (mode === 'rich' && editorRef.current) ? editorRef.current.getMarkdown() : md;
   const reset = () => {
     try { editorRef.current?.setMarkdown(''); } catch (err) { swallowed('components: reset', err); }
-    setMd(''); setFiles([]); if (fileRef.current) fileRef.current.value = '';
+    setMd('');
+    setFiles((prev) => { prev.forEach(releasePreview); return []; });
+    if (fileRef.current) fileRef.current.value = '';
     if (mode === 'simple' && taRef.current) taRef.current.style.height = 'auto';
     clearDraft();   // a sent message is no longer a draft
   };
@@ -487,6 +522,7 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
   // Remove one queued attachment before sending (a mis-paste shouldn't force starting the message over).
   // Also clear the hidden file input when the last chip goes, so re-picking the same file fires onChange.
   const removeFile = (idx) => setFiles((prev) => {
+    releasePreview(prev[idx]);
     const next = prev.filter((_, j) => j !== idx);
     if (next.length === 0 && fileRef.current) fileRef.current.value = '';
     return next;
@@ -495,8 +531,20 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
   return html`
     <div class="inbox-composer ${expanded ? 'inbox-composer--tall' : ''}">
       ${files.length > 0 ? html`<div class="inbox-file-chips">
-        ${files.map((f, i) => html`<span class="inbox-file-chip" key=${f.name + i}>📎 ${escHtml(f.name)}
-          <button class="inbox-bc-chip-x" title=${t('inbox.attachmentRemove')} onClick=${() => removeFile(i)}>✕</button></span>`)}
+        ${files.map((f, i) => {
+          // A recording gets its own chip with a player: a bad take should be caught here, not in
+          // the other person's mailbox.
+          const isVoice = (f.type || '').startsWith('audio/') && f.durationSeconds;
+          return html`<span class=${`inbox-file-chip${isVoice ? ' inbox-file-chip--voice' : ''}`} key=${f.name + i}>
+            ${isVoice
+              ? html`<span class="inbox-chip-voice">🎤 ${fmtClock(f.durationSeconds)}
+                  <audio class="inbox-audio inbox-audio--chip" controls preload="metadata"
+                         src=${f.previewUrl}
+                         onPlay=${(e) => stopOtherAudio(e.currentTarget)}></audio></span>`
+              : html`<span>📎 ${escHtml(f.name)}</span>`}
+            <button class="inbox-bc-chip-x" title=${t('inbox.attachmentRemove')} onClick=${() => removeFile(i)}>✕</button>
+          </span>`;
+        })}
       </div>` : null}
       ${mode === 'rich'
         ? html`<div class="inbox-editor" ref=${containerRef}></div>`
@@ -515,6 +563,8 @@ export function Composer({ recipient, sendLabel, sending, onSend, initialText =
           <label class="inbox-attach-btn" title=${t('inbox.attach')}>
             📎<input ref=${fileRef} type="file" multiple hidden onChange=${(e) => setFiles(Array.from(e.target.files || []))} />
           </label>
+          <${VoiceRecorder} maxSeconds=${voiceMaxSeconds} className="inbox-attach-btn"
+            onRecorded=${addRecording} />
           <button type="button" class="inbox-attach-btn" title=${expanded ? t('inbox.collapse') : t('inbox.expand')}
             aria-pressed=${expanded} onClick=${() => setExpanded((v) => !v)}>${expanded ? '⤡' : '⤢'}</button>
         </div>

package/dist/public/views/profile/inbox-tab/helpers.js

@@ -5,6 +5,9 @@
  *   pixel defense), tracked-state labels, attachment classification, the interactive-answer summary +
  *   poll tally, and the lazy Toast UI editor loader. Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.4.0 — 2026-08-01 — parkMessage() + openTrackedRecord() moved here from inbox-tab.js: two
+ *     self-contained actions that needed nothing from the tab's state beyond a toast, pulled out to
+ *     keep the tab under max-file-lines while voice messages were added to it.
  *   v1.3.0 — 2026-07-27 — sendFailure(): pick the toast text for a failed send, preferring the thrown
  *     reason (attachment too large, out of quota) over the generic "could not send".
  *   v1.2.0 — 2026-07-21 — resolveThreadAttachmentUrls(): resolve non-inline attachment URLs for a loaded
@@ -14,6 +17,36 @@
  */
 import { t, getLocale } from '/js/i18n.js';
 import { swallowed } from '/js/swallowed.js';
+import { parkMessageToNotebook } from '/js/services/notebook.js';
+import { firstLine } from '../notebook-helpers.js';
+
+/** 📓 on a message: copy it straight into the notebook for later processing (no AI step), keeping the
+ *  source link + reply intent so it can be replied to or filed from there. */
+export async function parkMessage(msg, showToast) {
+  try {
+    await parkMessageToNotebook(msg, { title: firstLine(msg.body) });
+    showToast?.(t('inbox.parkedToNotebook'));
+  } catch (e) {
+    showToast?.(e?.message || t('inbox.trackFailed'), true);
+  }
+}
+
+/** Open the workspace record a tracked response watches. Sets BOTH the saved tab (so the profile
+ *  loads onto Organisms) and the workspace deep-link (so that exact workspace opens), then navigates. */
+export function openTrackedRecord(tr, showToast) {
+  const r = tr.references || {};
+  if (!r.organismId || !r.workspaceId) { showToast?.(t('inbox.trackNoRecord'), true); return; }
+  try {
+    sessionStorage.setItem('aimeat-profile-tab', 'organisms');
+    sessionStorage.setItem('aimeat.ws.openId', r.organismId);
+    sessionStorage.setItem('aimeat.ws.openWs', r.workspaceId);
+  } catch (err) {
+    // Storage refused (private mode, quota): the navigation below still happens, it just lands on
+    // the Organisms tab without pre-opening the workspace.
+    swallowed('inbox helpers: openTrackedRecord deep-link', err);
+  }
+  window.location.assign('/v1/profile?tab=organisms');
+}
 
 /**
  * Toast text for a failed send. An attachment upload throws for reasons the sender can act on: the file

package/dist/public/views/profile/inbox-tab/panels.js

@@ -6,6 +6,9 @@
  *   (broadcast/poll results). Each is a presentational component driven entirely by props from InboxTab;
  *   the stateful container keeps all hooks. Extracted from inbox-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.6.0 — 2026-08-01 — Voice messages threaded through: ThreadPanel passes onTranscribe /
+ *     canTranscribe to each bubble and voiceMaxSeconds to the Composer. An agent-owned ("via
+ *     <agent>") thread is read-only for the owner, so it gets no transcribe action.
  *   v1.5.0 — 2026-07-31 — ThreadPanel head hosts ThreadReadAloud (./read-aloud.js): reads the whole open
  *     conversation aloud (Listen / Pause / Continue + ✕), the thread-level twin of the per-bubble 🔊.
  *   v1.4.0 — 2026-07-21 — ThreadPanel head: "Show all messages / Last 50" toggle (threadAll/
@@ -109,7 +112,7 @@ export function ThreadPanel({
   peerDisplay, showToast, toggleImportant, onTrackMsg, onParkMsg, openMessageAi, submitInteractiveAnswers,
   setMdViewer, openConversationAi, openConversationNotebook, insertCommand, setCmdFill, cancelTracked, openRecord, startSuggestedReply, doSend,
   replyQuote, setReplyQuote, onQuoteReply, composerFocus, showLinkPreviews, toggleLinkPreviews,
-  threadAll, toggleThreadAll,
+  threadAll, toggleThreadAll, onTranscribe, canTranscribe, voiceMaxSeconds,
 }) {
   let lastDay = '';
   // Reply-to quotes: resolve a message's `replyToId` to the original within the loaded page (a parent
@@ -179,6 +182,7 @@ export function ThreadPanel({
               starred=${important.has(m.id)} onStar=${toggleImportant} onTrack=${onTrackMsg} onPark=${onParkMsg} onReplyAi=${openMessageAi} tracked=${trackedByMsg[m.id]}
               answeredWith=${m.interactive?.role === 'questions' ? answersByQ[m.id] : null}
               onAnswer=${submitInteractiveAnswers} submitting=${sending} showLinkPreviews=${showLinkPreviews}
+              onTranscribe=${activeConv.viaAgent ? null : onTranscribe} canTranscribe=${canTranscribe}
               onOpenMarkdown=${(url, name) => setMdViewer({ url, name })} />`;
         })}
       </div>
@@ -214,6 +218,7 @@ export function ThreadPanel({
           </div>` : null}
           <${Composer} key=${'c-' + activeConv.conversationId + (draftPrefill ? '-d' + prefillNonce : '')} recipient=${activeConv.peerGhii}
             sendLabel=${t('inbox.reply')} sending=${sending} onSend=${doSend} initialText=${draftPrefill}
+            voiceMaxSeconds=${voiceMaxSeconds}
             focusNonce=${composerFocus} draftKey=${'aimeat.inbox.draft.' + activeConv.conversationId} />`}
     </div>`;
 }