This answer was assembled from your documents without the AI model, so it may be less complete.
diff --git a/src/components/clinical-dashboard/answer-follow-up-suggestions.tsx b/src/components/clinical-dashboard/answer-follow-up-suggestions.tsx
index 5dcddb997..baff597f8 100644
--- a/src/components/clinical-dashboard/answer-follow-up-suggestions.tsx
+++ b/src/components/clinical-dashboard/answer-follow-up-suggestions.tsx
@@ -23,6 +23,7 @@ export function AnswerFollowUpSuggestions({
onPick={onPick}
disabled={disabled}
label="Try next"
+ labelPlacement={layout === "wrap" ? "above" : "inline"}
testId={testId}
layout={layout}
className={className}
diff --git a/src/components/clinical-dashboard/answer-result-surface.tsx b/src/components/clinical-dashboard/answer-result-surface.tsx
index 32a73c7b4..ee4d865ff 100644
--- a/src/components/clinical-dashboard/answer-result-surface.tsx
+++ b/src/components/clinical-dashboard/answer-result-surface.tsx
@@ -213,8 +213,6 @@ function StagedAnswerResultSurfaceImpl({
void;
disabled?: boolean;
label?: string;
+ // "above" stacks the label as an eyebrow over the chips (answer-thread
+ // follow-ups); "inline" keeps it beside them (composer rows, empty state).
+ labelPlacement?: "inline" | "above";
testId?: string;
layout?: "wrap" | "scroll";
className?: string;
@@ -29,13 +33,23 @@ export function AnswerSuggestionChips({
icon?: LucideIcon;
}) {
if (!suggestions.length) return null;
+ const stacked = Boolean(label) && labelPlacement === "above";
return (
- {label ?
{label} : null}
+ {label ? (
+
+ {label}
+
+ ) : null}
void;
};
-function CrossModeLinkBadges({ badges }: { badges: CrossModeLinkBadge[] }) {
- if (badges.length === 0) return null;
-
- return (
-
- {badges.map((badge) => (
-
- {badge.label}
-
- ))}
-
- );
-}
+function CrossModeLinkCard({ link, Icon, query, onModeSearch }: CrossModeLinkCardProps) {
+ const extraBadge = link.badges[0] ?? null;
-function CrossModeLinkActions({
- link,
- query,
- onModeSearch,
-}: {
- link: CrossModeLink;
- query: string;
- onModeSearch: (mode: AppModeId, query: string) => void;
-}) {
return (
-
+
+
+
+
logCrossModeLinkOpen(query, link)}
- className="inline-flex min-h-11 items-center text-xs font-semibold text-[color:var(--clinical-accent)] underline-offset-2 transition hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+ className="inline-flex min-h-11 min-w-0 items-center text-sm font-semibold leading-5 text-[color:var(--text-heading)] transition hover:text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
>
- Open reference
+ {link.title}
-
- ·
+
+ {link.modeLabel}
+ {extraBadge ? (
+ // Decorative on narrow screens — hidden below sm so the title keeps room.
+
+ {extraBadge.label}
+
+ ) : null}
-
- );
-}
-
-function CrossModeLinkCard({ link, Icon, query, onModeSearch }: CrossModeLinkCardProps) {
- return (
-
-
-
-
-
-
-
- logCrossModeLinkOpen(query, link)}
- className="inline-flex min-h-11 items-center text-sm font-semibold leading-5 text-[color:var(--text-heading)] transition hover:text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] md:min-h-9"
- >
- {link.title}
-
- {link.modeLabel}
-
- {link.subtitle ? (
-
{link.subtitle}
- ) : null}
-
-
-
);
}
@@ -205,10 +149,10 @@ export function CrossModeLinksStrip({
return (
-
+
Also in your library
{links.length > 1 ? (
@@ -220,9 +164,7 @@ export function CrossModeLinksStrip({
1 ? 0 : undefined}
- aria-label={links.length > 1 ? "Related library matches; scroll horizontally for more" : undefined}
- className="cross-mode-links-rail polished-scroll grid gap-2 overflow-x-auto overscroll-x-contain pb-1 md:flex md:w-max md:max-w-full md:gap-2.5"
+ className="grid min-w-0 gap-1.5 md:flex md:max-w-full md:flex-wrap md:gap-2"
data-testid="cross-mode-links-rail"
>
{links.map((link) => {
diff --git a/src/components/clinical-dashboard/evidence-panels.tsx b/src/components/clinical-dashboard/evidence-panels.tsx
index 60581db88..ab5737dc9 100644
--- a/src/components/clinical-dashboard/evidence-panels.tsx
+++ b/src/components/clinical-dashboard/evidence-panels.tsx
@@ -175,7 +175,7 @@ export function AnswerSupportSummaryCard({
}) {
const supportRowCount = Number(clinicalAvailable) + Number(evidenceAvailable);
const supportButtonClass =
- "grid min-h-[60px] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2.5 px-3 py-2.5 text-left transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)]";
+ "grid min-h-[56px] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2.5 px-3 py-2 text-left transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)]";
const safetyInteractive = Boolean(onOpenSafetyFindings && safetyFindingsCount > 0);
return (
@@ -221,7 +221,7 @@ export function AnswerSupportSummaryCard({
>
{priority.detail}
)
diff --git a/src/components/ui-primitives.tsx b/src/components/ui-primitives.tsx
index 707e766c3..93b0f8390 100644
--- a/src/components/ui-primitives.tsx
+++ b/src/components/ui-primitives.tsx
@@ -75,9 +75,9 @@ export const chatActionRow =
export const chatMicroAction =
"inline-flex min-h-tap min-w-tap items-center justify-center gap-1.5 rounded-md px-2 text-xs font-semibold text-[color:var(--text-muted)] transition hover:bg-[color:var(--clinical-accent-soft)] hover:text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-50";
export const sourceCapsule =
- "source-capsule-hover focus-ring-premium inline-flex min-h-tap items-center gap-1 rounded-md border border-[color:var(--border)] bg-[color-mix(in_srgb,var(--clinical-accent-soft)_55%,var(--surface))] px-2 text-2xs font-medium text-[color:var(--clinical-accent)] transition hover:border-[color:var(--clinical-accent-border)] sm:px-2.5";
+ "source-capsule-hover focus-ring-premium inline-flex min-h-tap items-center gap-1.5 rounded-full border border-[color:var(--border)] bg-[color-mix(in_srgb,var(--clinical-accent-soft)_55%,var(--surface))] px-3 text-xs font-medium text-[color:var(--clinical-accent)] transition hover:border-[color:var(--clinical-accent-border)]";
export const sourceCapsuleCountBadge =
- "nums inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-[color:var(--surface-raised)] px-1.5 text-2xs font-semibold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]";
+ "nums inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full bg-[color:var(--surface-raised)] px-1.5 text-2xs font-semibold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]";
export const evidenceRow =
"flex min-h-12 w-full items-center justify-between gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-2 text-left shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
export const clinicalNotesRow =
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index c6d52fac3..e3e1dd7f3 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -1531,7 +1531,7 @@ test.describe("Clinical KB UI smoke coverage", () => {
await expect(answerSurface.getByTestId("cross-mode-links")).toHaveCount(1);
const rail = strip.getByTestId("cross-mode-links-rail");
await expect(rail).toBeVisible();
- await expect(rail).toHaveClass(/overflow-x-auto/);
+ await expect(rail).toHaveClass(/md:flex-wrap/);
await page.keyboard.press("Escape");
await expect(strip.getByText("Medication", { exact: true })).toBeVisible();
await expect(strip.getByRole("button", { name: "Search Clozapine in Medication" })).toBeVisible();
@@ -1554,11 +1554,16 @@ test.describe("Clinical KB UI smoke coverage", () => {
test("answer mode keeps prior turns visible for follow-up questions", async ({ page }) => {
await page.setViewportSize({ width: 390, height: 820 });
- await mockDemoApi(page);
+ const firstQuestion = "lithium dosing";
+ await mockDemoApi(page, {
+ answerOverride: (query, documentId, documentIds) => {
+ const answer = demoAnswer(query, documentId, documentIds);
+ return query === firstQuestion ? { ...answer, grounded: false, confidence: "unsupported" as const } : answer;
+ },
+ });
await gotoApp(page, "/");
await waitForDemoDashboardReady(page);
- const firstQuestion = "lithium dosing";
await fillVisibleQuestionInput(page, firstQuestion);
await visibleAnswerSubmitButton(page).click();
@@ -1582,6 +1587,8 @@ test.describe("Clinical KB UI smoke coverage", () => {
await expect(page.locator('[data-dashboard-stage="answer-thread-turn"][data-collapsed="true"]')).toHaveCount(1);
await expect(composer).toHaveValue("");
await expect(page).toHaveURL(/\?mode=answer&q=what\+about\+renal\+impairment\%3F&run=1/);
+ await page.getByRole("button", { name: "Show previous answer" }).click();
+ await expect(page.getByTestId("prior-answer-source-review")).toContainText("Review source match");
await expectNoPageHorizontalOverflow(page);
await waitForPersistedAnswerThread(page, 1);