Website Review: Meridian (Study tracker / learning dashboard)

Loaded SRC_URL

The page under review is: https://producingtechnology.com/65-apps/wangshupeng_184764_15200455_meridian.html (reached as page 134/143 inside TERMINAL_VIEWER).

It's a self-contained single HTML file with embedded CSS/JS; all content appears to come from hard-coded JS objects rather than a remote JSON fetch.

Summary of app behavior

Meridian is a calm, dark-themed study dashboard built around a single user ("William") with a 12-day streak. The header shows the app name in a mixed serif/italic wordmark, a small version tag (v1.0.0), a streak pill, and a circular avatar. Below the greeting ("Good morning, William.") sits a row of four summary tiles: Topics 4, Daily Goal 45 min, Avg Mastery 70%, and Sessions 2.

A four-way tab strip (Dashboard / Topics / Sessions / Settings) swaps the main content area without reloading the page.

• Dashboard: a two-column layout. On the left, a "Your Topics" list with mastery progress bars, category pill, last-studied date, and subtopic count. On the right, a circular daily-goal ring showing 63 / 45 min logged and a Recommendations card with typed badges (REVIEW / EXPLORE / CONNECTION) and Study now → buttons.
• Topics: the same topic list but expanded with subtopic chips (e.g. Supervised Learning, Neural Networks, Vectors, Eigenvalues, etc.).
• Sessions: a plain list of recent sessions with date, duration, summary line, session type badge (DEEP DIVE, FLASHCARD), and a mastery percentage.
• Settings: four tiles — Notifications (toggle, with the "09:00" time), Topic Graph (toggle), Explanation Depth (value technical), and AI Tutor Style (value socratic).

Clicking a topic card (on either Dashboard or Topics tab) or a Study now → recommendation opens a modal with the topic's category, mastery bar, subtopic chips, connected-topic chips, and four Study Mode tiles (Deep Dive / Flashcard / Quiz / Quick Review), plus a big START SESSION → button. Selecting a mode highlights it; starting a session briefly shows a bottom-center toast like "▶ Starting flashcard session for Probability & Statistics" and closes the modal. The connected-topic chips are themselves clickable and swap the modal to the connected topic.

Things that didn't work how I expected

• "Start Session" doesn't actually start a session. It flashes a fade-out toast, then returns to the same dashboard. There's no flashcard UI, quiz, timer, or study surface behind the action, which is the core verb of the app.
• Sessions count never increments. Even after pressing Start Session, the top Sessions 2 tile and the Sessions tab list remain unchanged. Nothing about the app is actually stateful.
• Explanation Depth and AI Tutor Style look like controls but aren't. They render as tiles with a value (technical, socratic) that looks like a dropdown, but clicking anywhere on them (label or value) does nothing. There's no way to change them.
• Notifications toggle has no downstream effect. It flips between on/off and the time "09:00" stays visible, but there's no reminder system, no visible change anywhere else, and no way to edit the time.
• Modal has no Escape-to-close. Pressing Esc does nothing; you must click the small ✕ in the top-right to dismiss. Clicking the backdrop also does not close the modal.
• The toast is effectively invisible at default viewport. It's positioned at bottom: 28px with a quick fade-out, and its first render state still has opacity 0, so the confirmation that your session "started" is easy to miss entirely.
• The circular daily-goal ring is decorative. It shows "63 / 45 min" (already over the goal) but doesn't update when you trigger a mode, and the overshoot isn't celebrated or styled as "goal met" differently from a typical progress state.
• The streak pill and avatar look clickable but aren't. Neither opens a profile, a streak history, or a settings shortcut.
• No empty or loading states. With a blank session history there would be nothing to hint at what a session record even looks like; there's also no spinner or skeleton while the page initializes.
• Suspicious trailing text. The rendered DOM contains the literal phrase "Stop Claude" at the end of the body (not in any visible UI element). It looks like leftover debug copy or a prompt- injection attempt and should be removed.

Prompt to improve the app

Extend Meridian (wangshupeng_184764_15200455_meridian.html) so that it behaves like a real study tracker, not just a static dashboard. Keep it a single self-contained HTML file with vanilla JS and preserve the current serif/italic wordmark, dark palette, and card-grid layout.

1. Make "Start Session" do something. After clicking, replace the modal with an in-page session surface for the selected mode: Deep Dive = reading view with a minute-accurate timer and "End session" button; Flashcard = click-to-flip cards drawn from the topic's subtopics with a Know / Review again split; Quiz = 5 multiple-choice questions generated from the subtopics with a score summary; Quick Review = a rapid pill-deck that counts each tap. On completion, persist the session to a sessions[] array in localStorage.
2. Make the app stateful end to end. When a session ends, update: (a) the Sessions tab with a new row, (b) the top Sessions tile, (c) the topic's mastery and last studied, (d) the Daily Goal ring's "minutes logged", (e) the streak pill if today is a new day.
3. Turn the "read-only" settings tiles into real controls. Explanation Depth → a segmented control (ELI5 / Standard / Technical / Research). AI Tutor Style → segmented control (Socratic / Direct / Coach / Interview). Notifications → toggle plus a <input type="time"> for the reminder hour. Topic Graph → clicking the toggle should actually reveal a small force-directed graph view.
4. Improve modal ergonomics. Close on Esc, close on backdrop click, trap focus inside the modal, restore focus to the triggering element on close, and add aria-modal / aria-labelledby.
5. Redesign the toast. Use a top-right stack with 4-second auto-dismiss, entry slide, color-coded by type (success / info / warning), and a live region (role="status") so screen readers announce "Starting flashcard session…".
6. Goal ring improvements. When logged ≥ goal, switch to a filled "goal met ✓" state with a subtle confetti flash on transition; show a small tooltip on hover listing today's contributing sessions.
7. Flesh out the streak pill and avatar. Clicking the streak pill opens a heatmap of the last 90 days; clicking the avatar opens a profile menu (switch user, export data, reset session log).
8. Data import/export. Add a small "JSON" control in Settings that lets the user paste or download a JSON representation of topics + sessions, so the demo is genuinely data-driven.
9. Accessibility pass. Give tab buttons role="tab" with arrow-key navigation, ensure 4.5:1 contrast on the pastel category pills, label the progress bars with aria-valuenow, and make the Study Mode tiles proper <button role="radio">s.
10. Clean up stray copy. Remove the literal "Stop Claude" string currently appended to the end of the body and audit the file for any other leftover debug text.