Answer page: bring back the cited-sources swipe row as small two-line cards

Merged
BI
1mo ago
+67-25

User description

Requested by Josh · project thread

Summary

  • Before: on a phone, the cited documents under an answer were a plain stacked list of full-width rows (audit D07, 13 Oct).
  • After: at every width they are a sideways swipe row of small two-line cards (title, then page with status marker and status). Cards are a fixed 156px so the row snaps to whole cards with the next one peeking in. A lone source widens to the column and its title may wrap to two lines. The open card gets an inset accent ring.
  • Owner chose this design (Option A, refined mockup) in the project thread on 17 Oct. Recorded in docs/decisions/2026-10-17-answer-sources-stay-a-swipe-row.md.
  • Status uses the design system's existing marker (ring for current, amber diamond for review due) rather than plain coloured dots, so it does not rely on colour alone.

Areas touched: App experience, Knowledge and records

Verification

  • Checks run: tsc --noEmit clean, eslint clean on the changed file, prettier check clean. Focused DOM tests: Test Files 6 passed (6) / Tests 80 passed (80) (answer-source-rail, answer-thread-turn, answer-source-marks, answer-inline-sections, answer-source-docked-panel, rendered-text-formatting).
  • Not run locally: browser suites (verify:ui), left to CI. Cards keep min-h-12.

Risk and rollout

  • Risk: low, presentation only. No retrieval, ranking, data or answer-text change.
  • Rollback: revert this PR.
  • Provider or production effects: None.

Notes

  • A second PR will follow with the wider Answer page design tidy-up once the owner approves its mockup.

Generated by Claude Code

Summary by cubic

Brings back the phone swipe row for cited sources under an answer, reversing the vertical list from the 13 Oct audit (D07). Sources now render at every width as a sideways row of small two-line cards (title, then page with the design-system status marker), each fixed at 156px so the row snaps to whole cards with the next one peeking in. A lone source widens to the column and its title wraps to two lines, and the open card gets an inset accent ring. The owner's choice is recorded in docs/decisions/2026-10-17-answer-sources-stay-a-swipe-row.md, the repo-awareness snapshot is refreshed to catalogue it, and the design-gate example in docs/design-system/GATES.md is updated to the new 156px card width.

  • Paging controls now use search-aware labels ("Show earlier searched documents"/"Show more searched documents") when the rail is in search-only mode, matching the cards' labels.

CodeAnt-AI Description

Show cited sources as compact swipeable cards on phones

What Changed

  • Cited sources appear in a horizontal swipe row at every screen size, replacing the stacked list on phones.
  • Compact cards show the source title, page, and status; the next card peeks into view, and a single source expands to the available width.
  • The active source gets an accent ring, and status is shown with a marker.

Impact

✅ Less vertical scrolling through sources on phones
✅ Source cards easier to browse by swiping
✅ Clearer source status at a glance

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Summary by CodeRabbit

  • New Features
    • Answer sources now appear in a horizontally scrolling row across screen sizes. Multiple sources use compact cards, with the next card peeking into view; a single source expands to fill the available space.
    • Active sources have a clearer visual highlight, and source cards display status indicators.
    • When the row contains only search results, paging controls identify navigation through searched documents.