aimeat 2.4.0 → 2.6.0

package/dist/public/css/views/profile.css

@@ -1114,7 +1114,7 @@
      textareas a comfortable touch height and let the prompt box scroll. */
   .pf-gen-ws-pane .pf-gen-prompt-box { max-height: 220px; }
   .pf-gen-ws-pane .pf-gen-result-area { min-height: 200px; }
-  .pf-gen-or-run-all-bar { flex-direction: column; align-items: stretch; gap: 8px; }
+  .pf-or-run-all-bar { flex-direction: column; align-items: stretch; gap: 8px; }
 }
 
 /* ══ Shared Profile Utilities (2026-03-17) ══════════════ */
@@ -1249,15 +1249,15 @@
 .pf-gen-agent-actions { display: flex; gap: 8px; }
 .pf-gen-stop-btn { margin-left: auto; }
 
-/* ── OpenRouter Settings (pf-gen-or-*) ──────────────── */
-.pf-gen-or-wrapper {
+/* ── OpenRouter Settings (pf-or-*) ──────────────── */
+.pf-or-wrapper {
   margin-bottom: 1.25rem;
   background: var(--card, #FFFFFF);
   border: 1px solid var(--border, #E5E7EB);
   border-radius: 8px;
   overflow: hidden;
 }
-.pf-gen-or-toggle {
+.pf-or-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1271,22 +1271,22 @@
   color: var(--text, #1A1A2E);
   text-align: left;
 }
-.pf-gen-or-toggle:hover { background: var(--bg-dim, #F3F4F6); }
-.pf-gen-or-toggle-icon { font-size: 0.65em; color: var(--text-dim, #6B7280); width: 1rem; flex-shrink: 0; }
-.pf-gen-or-status-dot {
+.pf-or-toggle:hover { background: var(--bg-dim, #F3F4F6); }
+.pf-or-toggle-icon { font-size: 0.65em; color: var(--text-dim, #6B7280); width: 1rem; flex-shrink: 0; }
+.pf-or-status-dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--success, #22c55e);
   box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
   flex-shrink: 0;
   margin-left: auto;
 }
-.pf-gen-or-panel {
+.pf-or-panel {
   padding: 0 14px 14px;
 }
-.pf-gen-or-field {
+.pf-or-field {
   margin-bottom: 12px;
 }
-.pf-gen-or-label {
+.pf-or-label {
   display: block;
   font-size: 0.8em;
   color: var(--text-dim, #6B7280);
@@ -1294,7 +1294,7 @@
   margin-bottom: 4px;
   font-weight: 600;
 }
-.pf-gen-or-input {
+.pf-or-input {
   width: 100%;
   padding: 8px 12px;
   background: var(--surface, #F9FAFB);
@@ -1305,15 +1305,15 @@
   font-family: inherit;
   box-sizing: border-box;
 }
-.pf-gen-or-input:focus { outline: none; border-color: var(--accent, #E8564A); box-shadow: 0 0 0 3px rgba(232, 86, 74, 0.1); }
-.pf-gen-or-input-sm { max-width: 100px; }
-.pf-gen-or-param-row { display: flex; align-items: center; gap: 10px; }
-.pf-gen-or-param-hint { font-size: 0.8em; color: var(--text-dim, #888); white-space: nowrap; }
+.pf-or-input:focus { outline: none; border-color: var(--accent, #E8564A); box-shadow: 0 0 0 3px rgba(232, 86, 74, 0.1); }
+.pf-or-input-sm { max-width: 100px; }
+.pf-or-param-row { display: flex; align-items: center; gap: 10px; }
+.pf-or-param-hint { font-size: 0.8em; color: var(--text-dim, #888); white-space: nowrap; }
 /* Model refresh row: sits below the model <select>; let the hint/error wrap on narrow widths. */
-.pf-gen-or-model-row { margin-top: 8px; flex-wrap: wrap; }
-.pf-gen-or-model-row .pf-gen-or-param-hint { white-space: normal; }
-.pf-gen-or-model-error { color: var(--danger, #ef4444); }
-.pf-gen-or-select {
+.pf-or-model-row { margin-top: 8px; flex-wrap: wrap; }
+.pf-or-model-row .pf-or-param-hint { white-space: normal; }
+.pf-or-model-error { color: var(--danger, #ef4444); }
+.pf-or-select {
   width: 100%;
   padding: 8px 12px;
   background: var(--surface, #F9FAFB);
@@ -1324,9 +1324,9 @@
   font-family: inherit;
   cursor: pointer;
 }
-.pf-gen-or-select:disabled { opacity: 0.5; cursor: not-allowed; }
-.pf-gen-or-select:focus { outline: none; border-color: var(--accent, #E8564A); }
-.pf-gen-or-checkbox {
+.pf-or-select:disabled { opacity: 0.5; cursor: not-allowed; }
+.pf-or-select:focus { outline: none; border-color: var(--accent, #E8564A); }
+.pf-or-checkbox {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1334,13 +1334,13 @@
   color: var(--text, #1A1A2E);
   cursor: pointer;
 }
-.pf-gen-or-checkbox input[type="checkbox"] { accent-color: var(--accent, #E8564A); width: 16px; height: 16px; cursor: pointer; }
-.pf-gen-or-radio-group {
+.pf-or-checkbox input[type="checkbox"] { accent-color: var(--accent, #E8564A); width: 16px; height: 16px; cursor: pointer; }
+.pf-or-radio-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.pf-gen-or-radio-label {
+.pf-or-radio-label {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1348,34 +1348,34 @@
   color: var(--text, #1A1A2E);
   cursor: pointer;
 }
-.pf-gen-or-radio-label input[type="radio"] { accent-color: var(--accent, #E8564A); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
-.pf-gen-or-loading { font-size: 0.85em; color: var(--text-dim, #6B7280); font-style: italic; }
-.pf-gen-or-actions {
+.pf-or-radio-label input[type="radio"] { accent-color: var(--accent, #E8564A); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
+.pf-or-loading { font-size: 0.85em; color: var(--text-dim, #6B7280); font-style: italic; }
+.pf-or-actions {
   display: flex;
   gap: 8px;
   margin-top: 14px;
   flex-wrap: wrap;
 }
-.pf-gen-or-delete {
+.pf-or-delete {
   color: var(--danger, #ef4444);
   border-color: var(--danger, #ef4444);
 }
-.pf-gen-or-delete:hover {
+.pf-or-delete:hover {
   background: var(--danger, #ef4444);
   color: #fff;
 }
-.pf-gen-or-message {
+.pf-or-message {
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 0.85em;
   margin-top: 8px;
 }
-.pf-gen-or-message-success {
+.pf-or-message-success {
   background: rgba(34, 197, 94, 0.1);
   color: var(--success, #22c55e);
   border: 1px solid rgba(34, 197, 94, 0.25);
 }
-.pf-gen-or-message-error {
+.pf-or-message-error {
   background: rgba(239, 68, 68, 0.1);
   color: var(--danger, #ef4444);
   border: 1px solid rgba(239, 68, 68, 0.25);
@@ -1383,57 +1383,133 @@
 
 /* ── AI-apps daily-budget / spend section (generator-settings OpenRouterSettings) ──
    Lifted out of ~28 inline styles + hardcoded hex; all tokenized so it flips in dark mode. */
-.pf-gen-spend-section { border-top: 2px solid var(--border); padding-top: 14px; margin-top: 14px; }
-.pf-gen-spend-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
-.pf-gen-spend-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.pf-gen-spend-bar { flex: 1; min-width: 200px; background: var(--bg-surface); border-radius: 4px; height: 20px; position: relative; overflow: hidden; }
-.pf-gen-spend-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; transition: width .3s; background: var(--success); }
-.pf-gen-spend-bar-fill.warn { background: var(--warn); }
-.pf-gen-spend-bar-fill.crit { background: var(--danger); }
-.pf-gen-spend-bar-label { position: relative; text-align: center; font-size: 11px; line-height: 20px; font-weight: 700; }
-.pf-gen-spend-budget-input { width: 90px; padding: 4px 6px; font-size: 13px; }
-.pf-gen-spend-details { margin-top: 10px; }
-.pf-gen-spend-summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
-.pf-gen-spend-hint { font-size: 11px; color: var(--text-muted); margin: 6px 0; }
-.pf-gen-spend-table { width: 100%; margin-top: 4px; font-size: 12px; border-collapse: collapse; }
-.pf-gen-spend-table th, .pf-gen-spend-table td { padding: 4px; text-align: left; }
-.pf-gen-spend-table th.num, .pf-gen-spend-table td.num { text-align: right; }
-.pf-gen-spend-table thead tr { border-bottom: 1px solid var(--border); }
-.pf-gen-spend-cap-input { width: 74px; padding: 3px 5px; font-size: 12px; text-align: right; }
-.pf-gen-spend-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
-.pf-gen-spend-msg { margin-top: 8px; }
-.pf-gen-spend-chart-wrap { margin-top: 14px; }
-.pf-gen-spend-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
-.pf-gen-spend-chart-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
-.pf-gen-spend-metric-toggle { display: inline-flex; gap: 4px; }
-.pf-gen-spend-footnote { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
-
-/* ── OpenRouter Autopilot (pf-gen-or-*) ──────────────── */
-.pf-gen-or-btn-row {
+.pf-or-spend-section { border-top: 2px solid var(--border); padding-top: 14px; margin-top: 14px; }
+.pf-or-spend-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
+.pf-or-spend-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.pf-or-spend-bar { flex: 1; min-width: 200px; background: var(--bg-surface); border-radius: 4px; height: 20px; position: relative; overflow: hidden; }
+.pf-or-spend-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; transition: width .3s; background: var(--success); }
+.pf-or-spend-bar-fill.warn { background: var(--warn); }
+.pf-or-spend-bar-fill.crit { background: var(--danger); }
+.pf-or-spend-bar-label { position: relative; text-align: center; font-size: 11px; line-height: 20px; font-weight: 700; }
+.pf-or-spend-budget-input { width: 90px; padding: 4px 6px; font-size: 13px; }
+.pf-or-spend-details { margin-top: 10px; }
+.pf-or-spend-summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
+.pf-or-spend-hint { font-size: 11px; color: var(--text-muted); margin: 6px 0; }
+.pf-or-spend-table { width: 100%; margin-top: 4px; font-size: 12px; border-collapse: collapse; }
+.pf-or-spend-table th, .pf-or-spend-table td { padding: 4px; text-align: left; }
+.pf-or-spend-table th.num, .pf-or-spend-table td.num { text-align: right; }
+.pf-or-spend-table thead tr { border-bottom: 1px solid var(--border); }
+.pf-or-spend-cap-input { width: 74px; padding: 3px 5px; font-size: 12px; text-align: right; }
+.pf-or-spend-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.pf-or-spend-msg { margin-top: 8px; }
+.pf-or-spend-chart-wrap { margin-top: 14px; }
+.pf-or-spend-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+.pf-or-spend-chart-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
+.pf-or-spend-metric-toggle { display: inline-flex; gap: 4px; }
+.pf-or-spend-footnote { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
+
+/* ── AI provider settings v3: sections, model picker, STT (2026-08-01) ──
+   The panel is four sections that each save their own fields, so the answer to "did that save?"
+   appears where the question is asked instead of at the bottom of one long form. */
+.pf-or-section { padding: 14px 0; border-top: 1px solid var(--border); }
+.pf-or-section:first-child { border-top: none; padding-top: 4px; }
+.pf-or-section-title { font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
+
+.pf-or-status { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }
+.pf-or-status--on { color: var(--success); }
+
+/* Key row: the save button sits next to the field it saves. */
+.pf-or-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.pf-or-key-input { flex: 1; min-width: 220px; }
+.pf-or-links { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
+
+.pf-or-models-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
+.pf-or-hint { font-size: 11px; color: var(--text-muted); display: block; margin-top: 4px; }
+.pf-or-hint--error { color: var(--danger); }
+.pf-or-loading { font-size: 12px; color: var(--text-dim); padding: 8px 0; }
+.pf-or-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
+
+.pf-or-roles-summary,
+.pf-or-params-summary { cursor: pointer; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
+.pf-or-params-summary { font-size: 13px; font-weight: 700; color: var(--text); }
+
+.pf-or-inline-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
+.pf-or-label--inline { margin: 0; }
+.pf-or-select--sm { width: auto; min-width: 150px; }
+
+/* ── Model picker ──
+   Replaces a <select> holding the provider's whole catalogue (336 options on OpenRouter, unlabelled
+   and unsearchable). Prices are tabular so a column of them can actually be compared. */
+.pf-or-picker { border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 8px; background: var(--bg-surface); }
+.pf-or-picker--off { opacity: .55; }
+.pf-or-picker-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.pf-or-picked-id { font-size: 12px; word-break: break-all; }
+.pf-or-picked-none { font-size: 12px; color: var(--text-muted); }
+.pf-or-picked-warn { font-size: 11px; color: var(--warn); margin-left: 6px; }
+.pf-or-msearch { width: 100%; }
+
+.pf-or-mlist { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
+.pf-or-mgroup { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 4px 2px; }
+.pf-or-mrow { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
+.pf-or-mrow:hover { background: var(--bg-dim); }
+.pf-or-mrow--on { background: var(--bg-dim); box-shadow: inset 2px 0 0 var(--accent); }
+.pf-or-mpick {
+  flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer;
+  padding: 6px 6px; color: var(--text); display: flex; flex-direction: column; gap: 2px;
+}
+.pf-or-mname { font-size: 13px; font-weight: 600; }
+.pf-or-mid { font-size: 11px; color: var(--text-muted); word-break: break-all; }
+.pf-or-mmeta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
+.pf-or-mprice { font-variant-numeric: tabular-nums; }
+.pf-or-mlink { padding: 0 6px; color: var(--text-dim); text-decoration: none; font-size: 13px; }
+.pf-or-mlink:hover { color: var(--accent); }
+.pf-or-mempty { font-size: 12px; color: var(--text-muted); padding: 10px 4px; }
+.pf-or-mall { margin-top: 6px; }
+.pf-or-mcustom { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+.pf-or-mcustom .pf-or-input { flex: 1; min-width: 180px; }
+
+/* ── Speech-to-text ──
+   The measured result is the point of the test: an audio model's listed price carries no unit, so
+   one real transcription says more than any number derived from the catalogue. */
+.pf-or-stt { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 12px; }
+.pf-or-stt-test { margin-top: 10px; }
+.pf-or-stt-test-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.pf-or-stt-result { margin-top: 8px; padding: 8px; border-radius: var(--radius, 8px); background: var(--bg-dim); border: 1px solid var(--border); }
+.pf-or-stt-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
+.pf-or-stt-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
+
+@media (max-width: 520px) {
+  .pf-or-key-row { flex-direction: column; align-items: stretch; }
+  .pf-or-key-input { min-width: 0; }
+  .pf-or-mmeta { flex-direction: column; gap: 2px; }
+}
+
+/* ── OpenRouter Autopilot (pf-or-*) ──────────────── */
+.pf-or-btn-row {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
 }
-.pf-gen-or-run-btn {
+.pf-or-run-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }
-.pf-gen-or-run-btn.pf-gen-or-running {
+.pf-or-run-btn.pf-or-running {
   opacity: 0.8;
   cursor: wait;
 }
-.pf-gen-or-spinner {
+.pf-or-spinner {
   display: inline-block;
   width: 14px;
   height: 14px;
   border: 2px solid var(--border, #E5E7EB);
   border-top-color: var(--accent, #E8564A);
   border-radius: 50%;
-  animation: pf-gen-or-spin 0.7s linear infinite;
+  animation: pf-or-spin 0.7s linear infinite;
 }
-@keyframes pf-gen-or-spin {
+@keyframes pf-or-spin {
   to { transform: rotate(360deg); }
 }
 .pf-gen-data-viewer {
@@ -1458,7 +1534,7 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
-.pf-gen-or-run-all-bar {
+.pf-or-run-all-bar {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1468,7 +1544,7 @@
   border: 1px solid var(--border, #E5E7EB);
   border-radius: 8px;
 }
-.pf-gen-or-run-all-status {
+.pf-or-run-all-status {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2058,8 +2134,8 @@
 .pf-gen-test-scope-compact {
   display: flex; gap: 8px; align-items: center; margin: 0; font-size: 0.85em;
 }
-.pf-gen-test-scope-compact .pf-gen-or-radio-label { margin: 0; white-space: nowrap; }
-.pf-gen-or-run-all-controls {
+.pf-gen-test-scope-compact .pf-or-radio-label { margin: 0; white-space: nowrap; }
+.pf-or-run-all-controls {
   display: flex; align-items: center; gap: 12px; width: 100%;
 }
 
@@ -3449,29 +3525,29 @@
 .pf-adk-sev--warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
 .pf-adk-sev--info { background: var(--bg-dim); color: var(--muted); }
 .pf-adk-empty { color: var(--muted); font-size: 0.9rem; padding: 0.9rem; margin-bottom: 0.7rem; }
-
-/* ── AI transparency card (pf-aitr-*) — TARGET-058 Phase 8 ──
-   The owner's own view of what they published with a model in it. The one visual decision here is
-   that the "public and unlabelled" tile changes colour only when the number is ABOVE zero: a
-   compliance surface that is always red teaches people to stop looking at it. */
-.pf-aitr-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
-.pf-aitr-chevron { color: var(--muted); font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
-.pf-aitr-body { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
-/* auto-fit, so four tiles become two rows on a phone instead of overflowing the card. */
-.pf-aitr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.6rem; }
-.pf-aitr-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-dim); min-width: 0; }
-.pf-aitr-stat-warn { border-color: var(--warn); }
-.pf-aitr-stat-warn .pf-aitr-num { color: var(--warn); }
-.pf-aitr-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
-.pf-aitr-lbl { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
-.pf-aitr-note { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--muted); }
-.pf-aitr-warn-line { margin: 0.9rem 0 0.4rem; font-size: 0.85rem; color: var(--fg); }
-.pf-aitr-error { margin: 0; font-size: 0.85rem; color: var(--danger); }
-.pf-aitr-muted { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
-.pf-aitr-sub { margin: 1.2rem 0 0.4rem; font-size: 0.9rem; font-weight: 600; }
-.pf-aitr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
-.pf-aitr-row, .pf-aitr-policy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-dim); min-width: 0; }
-.pf-aitr-policy { flex-direction: column; }
-.pf-aitr-row-main { font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
-.pf-aitr-row-meta { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
-.pf-aitr-row-link { font-size: 0.78rem; color: var(--accent); }
+
+/* ── AI transparency card (pf-aitr-*) — TARGET-058 Phase 8 ──
+   The owner's own view of what they published with a model in it. The one visual decision here is
+   that the "public and unlabelled" tile changes colour only when the number is ABOVE zero: a
+   compliance surface that is always red teaches people to stop looking at it. */
+.pf-aitr-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
+.pf-aitr-chevron { color: var(--muted); font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
+.pf-aitr-body { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
+/* auto-fit, so four tiles become two rows on a phone instead of overflowing the card. */
+.pf-aitr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.6rem; }
+.pf-aitr-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-dim); min-width: 0; }
+.pf-aitr-stat-warn { border-color: var(--warn); }
+.pf-aitr-stat-warn .pf-aitr-num { color: var(--warn); }
+.pf-aitr-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
+.pf-aitr-lbl { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
+.pf-aitr-note { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--muted); }
+.pf-aitr-warn-line { margin: 0.9rem 0 0.4rem; font-size: 0.85rem; color: var(--fg); }
+.pf-aitr-error { margin: 0; font-size: 0.85rem; color: var(--danger); }
+.pf-aitr-muted { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
+.pf-aitr-sub { margin: 1.2rem 0 0.4rem; font-size: 0.9rem; font-weight: 600; }
+.pf-aitr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.pf-aitr-row, .pf-aitr-policy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-dim); min-width: 0; }
+.pf-aitr-policy { flex-direction: column; }
+.pf-aitr-row-main { font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
+.pf-aitr-row-meta { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
+.pf-aitr-row-link { font-size: 0.78rem; color: var(--accent); }

package/dist/public/css/views/transparency.css

@@ -29,6 +29,11 @@
    centred H1 it sat inset from the headings and looked like a caption. */
 .tp-hero .ld-hero-sub { max-width: 62ch; margin: 0; text-align: left; }
 
+/* "Somewhere to see one" — one sentence under the limits, pointing at something on this node that
+   actually carries a label. Quiet: it is evidence, not a call to action. */
+.tp-seeit { margin: var(--sp-4, 16px) 0 0; max-width: 62ch; line-height: 1.6; color: var(--text-dim); font-size: var(--text-sm); }
+.tp-seeit a { color: var(--accent); font-weight: 600; }
+
 .tp-section { margin: var(--sp-8, 32px) 0; }
 .tp-h2 { font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--sp-3, 12px); color: var(--text); }
 .tp-p { margin: 0 0 var(--sp-3, 12px); max-width: 62ch; line-height: 1.6; color: var(--text); }

package/dist/public/js/services/audio-recorder.js

@@ -0,0 +1,171 @@
+/**
+ * @file audio-recorder.js
+ * @description Microphone capture for voice messages and the transcription test. Plain JS, no
+ *   framework: one function starts a recording and hands back the controls to stop or cancel it.
+ *
+ *   FORMAT: whatever the browser actually produces, negotiated with isTypeSupported — webm/opus in
+ *   Chrome and Firefox, mp4/AAC in Safari. Not WAV. MediaRecorder cannot produce WAV without hand
+ *   muxing PCM, and the result is roughly ten times the bytes for the same speech (a minute of 16 kHz
+ *   mono WAV is ~2 MB against ~180 kB of Opus) with nothing gained: every browser plays these back,
+ *   and OpenRouter's transcription endpoint lists webm, ogg, m4a and aac among its accepted formats.
+ *   The extra megabytes would be paid for in the storage quota, the transfer and the federation copy.
+ *
+ *   The microphone track is stopped on every exit path. A forgotten track leaves the browser's
+ *   recording indicator lit, which reads to a user as an application still listening to them.
+ * @structure isRecordingSupported() · pickMimeType() · startRecording() · fmtDuration()
+ * @usage const rec = await startRecording({ onLevel, maxSeconds }); const file = await rec.stop();
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Initial version for inbox voice messages + the settings STT test.
+ */
+
+/** Preference order: Opus where available (smallest for speech), then whatever the browser offers. */
+const CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/ogg;codecs=opus',
+  'audio/mp4',           // Safari
+  'audio/aac',
+];
+
+export function isRecordingSupported() {
+  return typeof window !== 'undefined'
+    && typeof window.MediaRecorder !== 'undefined'
+    && !!navigator?.mediaDevices?.getUserMedia;
+}
+
+/** The first candidate this browser admits to supporting, or '' to let it choose its own default. */
+export function pickMimeType() {
+  if (typeof window === 'undefined' || !window.MediaRecorder?.isTypeSupported) return '';
+  for (const type of CANDIDATES) {
+    try { if (window.MediaRecorder.isTypeSupported(type)) return type; } catch { /* keep looking */ }  // eslint-disable-line aimeat/no-silent-catch -- a browser refusing to answer about a type IS the answer: try the next one
+  }
+  return '';
+}
+
+/** File extension for a recorded blob, from its mime type. */
+function extFor(mime) {
+  if (!mime) return 'webm';
+  if (mime.includes('mp4')) return 'm4a';
+  if (mime.includes('aac')) return 'aac';
+  if (mime.includes('ogg')) return 'ogg';
+  return 'webm';
+}
+
+/** Seconds → "0:07" / "12:03". */
+export function fmtDuration(seconds) {
+  const s = Math.max(0, Math.round(Number(seconds) || 0));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+/**
+ * Start recording from the default microphone.
+ *
+ * @param {object} [opts]
+ * @param {(level: number) => void} [opts.onLevel]  0..1 input level, ~20/s while recording
+ * @param {(seconds: number) => void} [opts.onTick] elapsed seconds, once a second
+ * @param {number} [opts.maxSeconds]                hard stop; the recording is kept, not discarded
+ * @param {() => void} [opts.onAutoStop]            fired when maxSeconds ended the recording
+ * @returns {Promise<{ stop: () => Promise<{file: File, durationSeconds: number}>, cancel: () => void, mimeType: string }>}
+ */
+export async function startRecording(opts = {}) {
+  if (!isRecordingSupported()) {
+    throw new Error('unsupported');
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({
+    // Speech, not music: the browser's own cleanup is worth more than the fidelity it costs.
+    audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+  });
+
+  const mimeType = pickMimeType();
+  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+  const chunks = [];
+  const startedAt = Date.now();
+  let stopped = false;
+
+  // Level metering. Deliberately minimal: a number, not a waveform. Its whole job is to answer
+  // "is the microphone hearing me", which a silent countdown cannot.
+  let audioCtx = null;
+  let rafId = 0;
+  if (opts.onLevel && typeof window.AudioContext !== 'undefined') {
+    try {
+      audioCtx = new AudioContext();
+      const source = audioCtx.createMediaStreamSource(stream);
+      const analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 512;
+      source.connect(analyser);
+      const buf = new Uint8Array(analyser.frequencyBinCount);
+      const tick = () => {
+        analyser.getByteTimeDomainData(buf);
+        let peak = 0;
+        for (let i = 0; i < buf.length; i++) peak = Math.max(peak, Math.abs(buf[i] - 128) / 128);
+        opts.onLevel(peak);
+        rafId = requestAnimationFrame(tick);
+      };
+      rafId = requestAnimationFrame(tick);
+    } catch (err) {
+      // Metering is decoration; a browser that refuses an AudioContext still records fine.
+      audioCtx = null;
+      if (typeof console !== 'undefined') console.warn('[audio-recorder] level meter unavailable:', err?.message || err);
+    }
+  }
+
+  let tickTimer = 0;
+  if (opts.onTick) {
+    tickTimer = setInterval(() => opts.onTick(Math.floor((Date.now() - startedAt) / 1000)), 1000);
+  }
+
+  let autoStopTimer = 0;
+  if (opts.maxSeconds > 0) {
+    autoStopTimer = setTimeout(() => {
+      if (!stopped && recorder.state === 'recording') {
+        recorder.stop();               // the blob is KEPT — hitting the cap is not losing the take
+        opts.onAutoStop?.();
+      }
+    }, opts.maxSeconds * 1000);
+  }
+
+  recorder.ondataavailable = (e) => { if (e.data && e.data.size > 0) chunks.push(e.data); };
+
+  const teardown = () => {
+    stopped = true;
+    if (tickTimer) clearInterval(tickTimer);
+    if (autoStopTimer) clearTimeout(autoStopTimer);
+    if (rafId) cancelAnimationFrame(rafId);
+    if (audioCtx) audioCtx.close().catch(() => { /* already closing */ });   // eslint-disable-line aimeat/no-silent-catch -- closing a closed context is not an error worth reporting
+    // The one line that must never be skipped: leave this out and the browser keeps showing the
+    // user that something is recording them.
+    stream.getTracks().forEach((tr) => tr.stop());
+  };
+
+  recorder.start();
+
+  return {
+    mimeType: recorder.mimeType || mimeType || 'audio/webm',
+    /** Stop and resolve with the recorded File plus its measured length. */
+    stop() {
+      return new Promise((resolve, reject) => {
+        if (stopped) { reject(new Error('already stopped')); return; }
+        recorder.onstop = () => {
+          const durationSeconds = Math.max(0.1, (Date.now() - startedAt) / 1000);
+          teardown();
+          const type = recorder.mimeType || mimeType || 'audio/webm';
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          const file = new File(chunks, `voice-${stamp}.${extFor(type)}`, { type });
+          resolve({ file, durationSeconds });
+        };
+        recorder.onerror = (e) => { teardown(); reject(e?.error || new Error('recording failed')); };
+        // Already inactive (an auto-stop at maxSeconds got there first): resolve from the chunks we
+        // have instead of waiting for an onstop that will never fire.
+        if (recorder.state === 'recording') recorder.stop();
+        else recorder.onstop?.(new Event('stop'));
+      });
+    },
+    /** Throw the take away and release the microphone. */
+    cancel() {
+      if (stopped) return;
+      recorder.onstop = () => {};
+      try { if (recorder.state === 'recording') recorder.stop(); } catch { /* already stopping */ }   // eslint-disable-line aimeat/no-silent-catch -- the goal is releasing the microphone below, which happens either way
+      teardown();
+    },
+  };
+}

package/dist/public/js/services/messages.js

@@ -5,9 +5,12 @@
  *   block), plus small storage helpers used to upload and resolve message attachments.
  * @structure send / listInbox / listConversations / getConversation / markConversationRead /
  *   markRead / deleteMessage / listRequests / acceptRequest / blockContact / listContacts /
- *   uploadAttachment / attachmentUrl
+ *   uploadAttachment / attachmentUrl / transcribeAttachment
  * @usage import * as messages from '/js/services/messages.js';
  * @version-history
+ *   v1.4.0 -- 2026-08-01 -- Voice messages: uploadAttachment carries a recording's measured
+ *     `duration_seconds` into the descriptor (so a thread can show "0:14" before fetching the audio),
+ *     and transcribeAttachment() turns one voice attachment into text on the caller's own copy.
  *   v1.0.0 -- 2026-06-16 -- Initial creation for user-to-user messaging (layer 5: Inbox tab).
  *   v1.0.1 -- 2026-06-19 -- JSDoc type annotations for frontend type-checking
  *   v1.1.0 -- 2026-06-23 -- send() carries the optional `interactive` payload (federated AskUserQuestion).
@@ -177,7 +180,23 @@ export async function uploadAttachment(file, kindOverride) {
   const kind = kindOverride || (mime.startsWith('image/') ? 'image'
     : mime.startsWith('audio/') ? 'audio'
     : mime.startsWith('video/') ? 'video' : 'file');
-  return { storage_key: key, mime, size: file.size, kind, name: file.name };
+  const desc = { storage_key: key, mime, size: file.size, kind, name: file.name };
+  // A voice recording arrives with its measured length attached (composer addRecording). Carrying it
+  // in the descriptor lets the recipient's thread show "0:14" without downloading the audio first.
+  if (Number(file.durationSeconds) > 0) desc.duration_seconds = Number(file.durationSeconds);
+  return desc;
+}
+
+/** Transcribe a voice attachment on the caller's own copy of a message, with the caller's own AI key.
+ *  Idempotent server-side: a second call returns the stored transcript instead of paying again. */
+export async function transcribeAttachment(messageId, attachmentId, opts = {}) {
+  return api(`/v1/messages/${enc(messageId)}/attachments/${enc(attachmentId)}/transcribe`, {
+    method: 'POST',
+    body: JSON.stringify({ force: !!opts.force, model: opts.model, language: opts.language }),
+    // Speech-to-text is a provider round trip over an audio file; the default 30 s client timeout
+    // cuts a perfectly good transcription off at the knees.
+    timeoutMs: 180_000,
+  });
 }
 
 /** Resolve a presigned, no-auth download URL for one of the caller's own storage keys (for <img>). */

package/dist/public/spa.html

@@ -97,6 +97,7 @@
   <link rel="stylesheet" href="/css/components/markdown.css">
   <link rel="stylesheet" href="/css/components/contact-picker.css">
   <link rel="stylesheet" href="/css/components/app-sandbox.css">
+  <link rel="stylesheet" href="/css/components/voice-recorder.css">
   <link rel="stylesheet" href="/css/views/app-grant.css">
   <link rel="stylesheet" href="/css/views/invite-accept.css">
   <!-- View CSS preloaded so they are ready before any view renders (prevents FOUC) -->
@@ -148,6 +149,7 @@
       "/js/recents.js": "/js/recents.js",
       "/js/services/admin.js": "/js/services/admin.js",
       "/js/services/agents.js": "/js/services/agents.js",
+      "/js/services/audio-recorder.js": "/js/services/audio-recorder.js",
       "/js/services/ecosystem.js": "/js/services/ecosystem.js",
       "/js/services/apps.js": "/js/services/apps.js",
       "/js/services/auth.js": "/js/services/auth.js",
@@ -189,6 +191,7 @@
       "/js/components/tag-cloud.js": "/js/components/tag-cloud.js",
       "/js/components/tag-editor.js": "/js/components/tag-editor.js",
       "/components/Modal.js": "/components/Modal.js",
+      "/components/VoiceRecorder.js": "/components/VoiceRecorder.js",
       "/components/useViewCSS.js": "/components/useViewCSS.js",
       "/components/Markdown.js": "/components/Markdown.js",
       "/components/LinkPreview.js": "/components/LinkPreview.js",