Skip to content

feat: study-unit list screen and summary card UI — closes #9, #11 - #25

Merged
mikim merged 1 commit into
mainfrom
feat/web-screens
Jul 14, 2026
Merged

feat: study-unit list screen and summary card UI — closes #9, #11#25
mikim merged 1 commit into
mainfrom
feat/web-screens

Conversation

@mikim

@mikim mikim commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

What

First product screens in apps/web.

Closes #9
Closes #11

Study unit list (#9)

  • StudyUnitList loads the demo user's sources + first source's units from the real API (GET /api/sources, GET /api/sources/:id) with explicit loading / error / empty states.
  • Citation offsets rendered as evidence badges (근거 [start, end)) — the grounding story is visible in the UI from day one.
  • Injectable fetcher for tests; vite dev proxy /api → :3000 (pnpm dev runs web + API together).

Summary card (#11 — mock data, as the issue specifies)

  • SummaryCardView renders the @study-os/summary card shape: summary, key concepts, confusion points, tone-preset badge, and an explicit AI-generated provenance label (provider/model/prompt version — per the repo's AI-labeling gate).
  • mockSummaryCard mirrors the mock provider's output exactly.

Verified

  • vitest + jsdom + Testing Library (globals on for auto-cleanup — caught a duplicate-render issue during development).
  • 6 component tests: render/provenance/empty-confusion for the card; citation badges/empty/error states for the list.
  • Full local pipeline green: lint / typecheck / 76 tests / build / smoke.

🤖 Generated with Claude Code

Implements the first product screens in the web app.

Study unit list (#9):
- StudyUnitList loads the demo user's sources and first source's units
  from the API (GET /api/sources, GET /api/sources/:id) with explicit
  loading / error / empty states
- Citation offsets rendered as evidence badges ([start, end)) so the
  grounding story is visible in the UI from day one
- Injectable fetcher for tests; vite dev proxy /api -> :3000

Summary card (#11, mock data as specified):
- SummaryCardView renders the @study-os/summary card shape: summary,
  key concepts, confusion points, tone-preset badge, and an explicit
  'AI 생성' provenance label (provider/model/prompt version)
- mockSummaryCard mirrors the mock provider's output

Testing: vitest jsdom environment (globals on for Testing Library
auto-cleanup); 6 component tests covering render, provenance label,
empty-confusion omission, citation badges, empty and error states.

Closes #9
Closes #11

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@mikim
mikim merged commit 56671f9 into main Jul 14, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render summary card UI with mock data Add study unit list screen in web app

1 participant