diff --git a/e2e/coach-answer-layout.spec.ts b/e2e/coach-answer-layout.spec.ts
index b4aec3b52..0bf0979ee 100644
--- a/e2e/coach-answer-layout.spec.ts
+++ b/e2e/coach-answer-layout.spec.ts
@@ -12,11 +12,12 @@ import { aiBlockAvailable, serveAiBlock } from "./setup/ai-capabilities";
*
* Contracts under test:
*
- * 1. Under an answer there is exactly one action row: the icon group and
- * the time on the left, the tokens and model on the right, both halves
- * on one line (their centres within 2 px, the row no taller than one
- * 44 px target), the left group starting on the bubble's left edge and
- * the meta ending inside the answer column.
+ * 1. Under an answer there is exactly one action row, left-aligned on the
+ * bubble's left edge and no taller than one 44 px target: copy, read
+ * aloud, try again, details, then the time. The model and the tokens
+ * are not text on the row; the details icon shows them in a tooltip on
+ * keyboard focus (desktop) and on a tap (phone), and a second tap or
+ * Escape closes it.
* 2. The follow-up chips sit in the answer's column: their left edge is
* the bubble's, their text is the answer's size, and a chip is at most
* 36 px tall beside a pointer and at least 44 px on a phone.
@@ -246,28 +247,58 @@ test.describe("Coach answer layout", () => {
const bubble = last.locator('[data-slot="coach-answer-bubble"]');
const column = last.locator('[data-slot="coach-answer-column"]');
const row = last.locator('[data-slot="coach-answer-actions"]');
- const left = row.locator('[data-slot="coach-answer-actions-left"]');
- const meta = row.locator('[data-slot="coach-answer-meta"]');
+ const info = row.locator('[data-slot="coach-answer-info"]');
+ const time = row.locator('[data-slot="coach-message-time"]');
await expect(row).toHaveCount(1);
- await expect(meta).toContainText("1,234 tokens");
await expect(row).toHaveCSS("opacity", "1");
- const [bubbleBox, columnBox, rowBox, leftBox, metaBox] = await Promise.all(
- [bubble, column, row, left, meta].map(box),
- );
- expect(
- Math.abs(
- leftBox.y + leftBox.height / 2 - (metaBox.y + metaBox.height / 2),
- ),
- "left group and meta share one line",
- ).toBeLessThanOrEqual(2);
+ await expect(row).not.toContainText("tokens");
+ await expect(row.locator('[data-slot="coach-answer-meta"]')).toHaveCount(0);
+ await expect(info).toHaveAttribute("aria-label", "Answer details");
+ const [bubbleBox, columnBox, rowBox, answerCopyBox, infoBox, timeBox] =
+ await Promise.all(
+ [
+ bubble,
+ column,
+ row,
+ row.locator('[data-slot="coach-copy-message"]'),
+ info,
+ time,
+ ].map(box),
+ );
expect(rowBox.height, "the row is one line").toBeLessThanOrEqual(44);
- expect(Math.abs(leftBox.x - bubbleBox.x)).toBeLessThanOrEqual(1);
- expect(metaBox.x + metaBox.width).toBeLessThanOrEqual(
+ expect(Math.abs(answerCopyBox.x - bubbleBox.x)).toBeLessThanOrEqual(1);
+ expect(infoBox.x, "details follows the other icons").toBeGreaterThan(
+ answerCopyBox.x,
+ );
+ expect(timeBox.x, "the time comes last").toBeGreaterThan(infoBox.x);
+ expect(timeBox.x + timeBox.width).toBeLessThanOrEqual(
columnBox.x + columnBox.width + 1,
);
- await expect(left.locator('[data-slot="coach-message-time"]')).toHaveCount(
- 1,
- );
+ for (const [b, name] of [
+ [infoBox, "details"],
+ [timeBox, "time"],
+ ] as const) {
+ expect(
+ Math.abs(
+ b.y + b.height / 2 - (answerCopyBox.y + answerCopyBox.height / 2),
+ ),
+ `${name} shares the row's line`,
+ ).toBeLessThanOrEqual(2);
+ }
+
+ // The details tooltip: focus opens it on a desktop, a tap on a phone.
+ const tip = page.locator('[data-slot="coach-answer-info-content"]');
+ await expect(tip).toHaveCount(0);
+ if (desktop) await info.focus();
+ else await info.tap();
+ await expect(tip).toBeVisible();
+ await expect(tip).toContainText("Model: gpt-4o-mini-2024-07-18");
+ await expect(tip).toContainText("1,234 tokens");
+ await expect(info).toHaveAttribute("aria-describedby", /.+/);
+ await shoot(page, testInfo, `answer-info-${viewport.label}`);
+ if (desktop) await page.keyboard.press("Escape");
+ else await info.tap();
+ await expect(tip).toHaveCount(0);
// 2. The chips in the answer's column, at the answer's size.
const chips = last.locator('[data-slot="coach-follow-up-chips"]');
diff --git a/messages/de.json b/messages/de.json
index c45a8287b..c5947cd3f 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Zeigen, was der Coach berücksichtigt hat",
"thinkingDetail": "Beantwortet aus deinem Gesundheits-Snapshot.",
"tokensUsed": "{count} Tokens",
- "tokensUsedWithModel": "{count} Tokens · {model}",
"askAboutThis": "Den Coach dazu fragen",
"readStrip": {
"label": "Üblicher Bereich",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "1 Bereich angesehen",
"areasDoneFew": "{count} Bereiche angesehen",
- "areasDoneOther": "{count} Bereiche angesehen"
+ "areasDoneOther": "{count} Bereiche angesehen",
+ "info": "Details zur Antwort",
+ "infoModel": "Modell: {model}"
}
},
"relativeJustNow": "gerade eben",
diff --git a/messages/en.json b/messages/en.json
index 6582a631e..ecb67bc15 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Show what the Coach considered",
"thinkingDetail": "Answered from your health snapshot.",
"tokensUsed": "{count} tokens",
- "tokensUsedWithModel": "{count} tokens · {model}",
"askAboutThis": "Ask the coach about this",
"readStrip": {
"label": "Usual range",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "Looked at 1 area",
"areasDoneFew": "Looked at {count} areas",
- "areasDoneOther": "Looked at {count} areas"
+ "areasDoneOther": "Looked at {count} areas",
+ "info": "Answer details",
+ "infoModel": "Model: {model}"
}
},
"relativeJustNow": "just now",
diff --git a/messages/es.json b/messages/es.json
index d4996861e..9f192a8e5 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Mostrar lo que el Coach tuvo en cuenta",
"thinkingDetail": "Respondido a partir de tu resumen de salud.",
"tokensUsed": "{count} tokens",
- "tokensUsedWithModel": "{count} tokens · {model}",
"askAboutThis": "Pregúntale al coach sobre esto",
"readStrip": {
"label": "Rango habitual",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "1 área consultada",
"areasDoneFew": "{count} áreas consultadas",
- "areasDoneOther": "{count} áreas consultadas"
+ "areasDoneOther": "{count} áreas consultadas",
+ "info": "Detalles de la respuesta",
+ "infoModel": "Modelo: {model}"
}
},
"relativeJustNow": "ahora mismo",
diff --git a/messages/fr.json b/messages/fr.json
index 8b11b0e67..8fe0245ee 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Montrer ce que le Coach a pris en compte",
"thinkingDetail": "Réponse établie à partir de ton aperçu santé.",
"tokensUsed": "{count} jetons",
- "tokensUsedWithModel": "{count} jetons · {model}",
"askAboutThis": "Interroger le coach à ce sujet",
"readStrip": {
"label": "Plage habituelle",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "1 domaine consulté",
"areasDoneFew": "{count} domaines consultés",
- "areasDoneOther": "{count} domaines consultés"
+ "areasDoneOther": "{count} domaines consultés",
+ "info": "Détails de la réponse",
+ "infoModel": "Modèle : {model}"
}
},
"relativeJustNow": "à l’instant",
diff --git a/messages/it.json b/messages/it.json
index 03b89d1a8..03989123d 100644
--- a/messages/it.json
+++ b/messages/it.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Mostra cosa ha considerato il Coach",
"thinkingDetail": "Risposta basata sul tuo riepilogo di salute.",
"tokensUsed": "{count} token",
- "tokensUsedWithModel": "{count} token · {model}",
"askAboutThis": "Chiedi al coach",
"readStrip": {
"label": "Intervallo abituale",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "1 area consultata",
"areasDoneFew": "{count} aree consultate",
- "areasDoneOther": "{count} aree consultate"
+ "areasDoneOther": "{count} aree consultate",
+ "info": "Dettagli della risposta",
+ "infoModel": "Modello: {model}"
}
},
"relativeJustNow": "proprio ora",
diff --git a/messages/ko.json b/messages/ko.json
index 9ba7aa1be..f569b77b4 100644
--- a/messages/ko.json
+++ b/messages/ko.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "코치가 참고한 내용 보기",
"thinkingDetail": "건강 스냅샷을 바탕으로 답했어요.",
"tokensUsed": "{count} 토큰",
- "tokensUsedWithModel": "{count} 토큰 · {model}",
"askAboutThis": "코치에게 물어보기",
"readStrip": {
"label": "평소 범위",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date} {time}",
"areasDoneOne": "영역 1개 확인",
"areasDoneFew": "영역 {count}개 확인",
- "areasDoneOther": "영역 {count}개 확인"
+ "areasDoneOther": "영역 {count}개 확인",
+ "info": "답변 정보",
+ "infoModel": "모델: {model}"
}
},
"relativeJustNow": "방금",
diff --git a/messages/pl.json b/messages/pl.json
index 3cca6e11c..0cc83a5e2 100644
--- a/messages/pl.json
+++ b/messages/pl.json
@@ -3023,7 +3023,6 @@
"thinkingExpandAria": "Pokaż, co Coach wziął pod uwagę",
"thinkingDetail": "Odpowiedź na podstawie Twojego podsumowania zdrowia.",
"tokensUsed": "{count} tokenów",
- "tokensUsedWithModel": "{count} tokenów · {model}",
"askAboutThis": "Zapytaj trenera o to",
"readStrip": {
"label": "Typowy zakres",
@@ -3143,7 +3142,9 @@
"timeEarlier": "{date}, {time}",
"areasDoneOne": "Sprawdzono 1 obszar",
"areasDoneFew": "Sprawdzono {count} obszary",
- "areasDoneOther": "Sprawdzono {count} obszarów"
+ "areasDoneOther": "Sprawdzono {count} obszarów",
+ "info": "Szczegóły odpowiedzi",
+ "infoModel": "Model: {model}"
}
},
"relativeJustNow": "przed chwilą",
diff --git a/src/components/insights/coach-panel/__tests__/message-actions.test.tsx b/src/components/insights/coach-panel/__tests__/message-actions.test.tsx
index 0d53a6e70..45c326508 100644
--- a/src/components/insights/coach-panel/__tests__/message-actions.test.tsx
+++ b/src/components/insights/coach-panel/__tests__/message-actions.test.tsx
@@ -2,9 +2,9 @@
* The one action row under a Coach message, and the follow-up chips that
* live in the answer's column.
*
- * - Assistant: copy, read aloud, try again, then the time, in one left
- * group; the tokens and model in the right group of the same row. No
- * feedback thumbs, no evidence disclosure.
+ * - Assistant: copy, read aloud, try again, details, then the time, in one
+ * left-aligned row; the model and tokens live behind the details icon,
+ * not as text on the row. No feedback thumbs, no evidence disclosure.
* - User: copy, remember, time in one row; remember is an icon.
* - The time reads "14:32" today, "yesterday 14:32", or the date further
* back.
@@ -50,7 +50,7 @@ vi.mock("../read-aloud", async (importOriginal) => {
});
import { ChatBubble, areChatBubblePropsEqual } from "../chat-bubble";
-import { answerMetaText, messageTimeText } from "../message-actions";
+import { answerInfoLines, messageTimeText } from "../message-actions";
function render(node: React.ReactNode, locale: "en" | "de" = "en") {
return renderToStaticMarkup(
@@ -100,26 +100,27 @@ const ANSWER = {
describe("assistant action row", () => {
const html = render();
const row = slot(html, "coach-answer-actions");
- const left = slot(row, "coach-answer-actions-left");
- it("lists copy, read aloud, try again and the time on the left, in that order", () => {
+ it("lists copy, read aloud, try again, details and the time, in that order", () => {
const order = [
"coach-copy-message",
"coach-read-aloud",
"coach-try-again",
+ "coach-answer-info",
"coach-message-time",
- ].map((name) => left.indexOf(`data-slot="${name}"`));
+ ].map((name) => row.indexOf(`data-slot="${name}"`));
expect(order.every((at) => at > -1)).toBe(true);
expect([...order].sort((a, b) => a - b)).toEqual(order);
});
- it("puts the tokens and the model on the right of the same row", () => {
- const meta = slot(row, "coach-answer-meta");
- expect(meta).toContain("1,234 tokens · gpt-4o-mini");
- expect(meta).toContain('title="gpt-4o-mini"');
- expect(meta).toContain("truncate");
- expect(left).not.toContain("coach-answer-meta");
- expect(row).toContain("justify-between");
+ it("keeps the model and tokens off the row, behind a named details button", () => {
+ expect(row).not.toContain("1,234");
+ expect(row).not.toContain("gpt-4o-mini");
+ expect(row).not.toContain("justify-between");
+ expect(row).not.toContain("coach-answer-meta");
+ const info = slot(row, "coach-answer-info");
+ expect(info).toMatch(/^