Upgrade DreamLoop frontend experience

.hallmark/log.json

@@ -0,0 +1,9 @@
+[
+  {
+    "date": "2026-07-25",
+    "macrostructure": "Workbench",
+    "theme": "Lumen",
+    "enrichment": "existing page-specific product imagery",
+    "brief": "DreamLoop local-first dream journal frontend upgrade"
+  }
+]

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 ## Unreleased
 
-- Bump the next release target to v0.2.0.
+## v0.2.0 - 2026-07-25
+
+- Upgrade all six web pages with a shared local design system, page-specific atmospheric art, progressive reveal and count-up effects, native dream-card transitions, responsive navigation, and refreshed English/Chinese screenshots.
+- Reject malformed stored visual accent values before they reach inline CSS custom properties.
 - Add Markdown export with Obsidian-friendly frontmatter via `dreamloop export --format markdown`.
 - Export one `.md` file per dream plus an `_index.md` wikilink index under `.dreamloop/exports/dreamloop-export-markdown-YYYY-MM-DD/`.
 - Add Docker and docker-compose one-command demo.

README.md

@@ -189,7 +189,7 @@ DreamLoop v0.2 adds:
 
 The source-based Docker demo builds locally today. Release images publish as `ghcr.io/saime428/dreamloop` when a GitHub release is published.
 
-Current source verification: 156 automated tests pass. Browser QA covers all six pages in both languages across five desktop, tablet, and mobile viewports.
+Current source verification: 157 automated tests pass. Browser QA covers all six pages in both languages across six desktop, tablet, and mobile viewports.
 
 ### Next
 

README.zh-CN.md

@@ -187,7 +187,7 @@ DreamLoop v0.2 新增：
 
 源码 Docker demo 现在会本地构建。发布 GitHub release 后，会推送 `ghcr.io/saime428/dreamloop` 镜像。
 
-当前源码验证：156 项自动化测试通过；浏览器验收覆盖中英文全部六个页面，以及五组桌面、平板和手机视口。
+当前源码验证：157 项自动化测试通过；浏览器验收覆盖中英文全部六个页面，以及六组桌面、平板和手机视口。
 
 ### 下一步
 

design-qa.md

@@ -1,71 +1,65 @@
 # Frontend Design QA
 
-Run date: 2026-07-14
+Run date: 2026-07-25
 
 ## Scope
 
 - Pages: Dashboard, Log, Detail, Patterns, Gallery, and Settings.
 - Languages: Chinese and English.
-- Viewports: 1440 x 900, 1024 x 768, 760 x 900, 390 x 844, and 360 x 800.
-- Data: the current local Dream #4 record, including its stored Chinese analysis and local visual memory.
+- Viewports: 1440 x 900, 1024 x 768, 768 x 900, 414 x 896, 375 x 812, and 320 x 800.
+- Matrix: 6 pages x 2 languages x 6 viewports = 72 rendered cases.
+- Data: isolated English and Chinese demo records under `D:\CodexScratch\DreamLoop-frontend-qa-20260725`; no project-local dream data or external AI/image provider was used.
 
 ## Result
 
-No actionable P0, P1, or P2 visual or interaction issue remains. The exact Chrome viewport matrix covered 60 page/language/size combinations with zero horizontal overflow, escaped elements, unexpected text clipping, raw framework errors, or titles above four lines. A second in-app-browser pass produced the same zero-failure result.
+Passed. No actionable layout, motion, console, or interaction defect remains in the tested scope.
 
-The adversarial browser pass found and corrected two issues before this result was recorded:
+The browser matrix reported zero failures for:
 
-1. At 1024px, the Patterns symbol row required 288px inside a 266px content track. Its text and meter tracks now shrink safely while the count column remains fixed.
-2. A non-empty draft language switch preserved its content but left the address at the POST-only `/drafts/language` route. The returned page now replaces that history entry with `/log?lang=...`, so refresh is a normal GET instead of a 405.
+- page-level horizontal overflow;
+- visible elements escaping the viewport without a local scroll container;
+- unexpected clipped text;
+- wrapped navigation, language, button, or CTA labels;
+- overlapping sibling text;
+- visible reveal targets left transparent;
+- unintended infinite animation; and
+- application console warnings or errors.
 
-## Visual Review
-
-- Desktop Log keeps capture and analysis at equal prominence without oversized result copy.
-- Desktop Detail limits the local visual-memory title to four lines and keeps the analysis card readable below the hero.
-- Patterns retains a stable two-column hierarchy at 1024px; labels wrap without pushing meters or counts outside their cards.
-- Mobile Log uses one column, a compact top navigation, full-width language controls, and readable analysis rows.
-- Mobile Detail keeps Dream #4, the language control, visual memory, and primary actions in a coherent order at 360px.
-- Chinese navigation and interface labels use the sans face; display headings use the serif face. The hierarchy is consistent across both languages.
+The first matrix found one real defect: symbol-network labels overlapped around the circular graph at 768px. Labels now sit radially outside their nodes, carry full-label SVG titles, and truncate only the visible label when necessary. The final 72-case matrix passed with zero failures.
 
-## Typography And Assets
-
-- Cascadia Mono, Noto Sans SC, and Noto Serif SC are served only from local static files.
-- The page asset inventory reported three local font resources and zero remote resources.
-- Computed styles resolve body copy to `Noto Sans SC` and display headings to `Noto Serif SC` on all 60 cases.
-- Both Noto files preserve the complete cmap from Google Fonts commit `03781cf7a714af8431d14b6f337f923c774429d7` and were converted with timestamp recalculation disabled.
-- Noto Sans SC: 30,890 cmap entries, 7,782,072 bytes, SHA-256 `AEF8C34277AFAD81ECD0227138A830263C0CAEA65B7AEA66D1195395F097B55A`.
-- Noto Serif SC: 30,928 cmap entries, 11,032,420 bytes, SHA-256 `4EE9B0921EC9BD3F8B04587C7BC66C62731045E89D74EEC054F37FC7A2D26383`.
-- Local HTTP HEAD checks returned 200 and the expected byte count for both versioned WOFF2 URLs.
-- An independent cmap scan found zero missing CJK code points across templates, translations, and Dream #4.
-- Both upstream OFL license files are stored in `src/dreamloop/static/fonts/noto/`.
+## Visual Review
 
-The browser automation read-only world exposes `document.fonts.status` but masks the font-face collection and `load()` method. Runtime loading was therefore verified through observed font resource entries, exact HTTP responses, computed families, rendered screenshots, and an empty browser console instead of treating the masked `document.fonts.check()` result as application behavior.
+- All six pages use their existing page-specific local artwork as a restrained fixed atmosphere layer; matte content surfaces preserve legibility.
+- Dashboard has a capture-led editorial heading, asymmetric hero, ruled metrics rail, and clear calendar/recent-dream hierarchy.
+- Log keeps capture and analysis at equal prominence on desktop and a safe one-column order on mobile.
+- Detail keeps the dream narrative and local visual memory above the analysis while the context panel remains secondary.
+- Patterns preserves its information hierarchy and renders the corrected graph without label collisions.
+- Gallery uses each dream's three stored accent colors without masking text or introducing layout movement.
+- Settings retains readable two-column forms on desktop and full-width controls on mobile.
+- English and Chinese screenshots were manually inspected at 1430 x 894 (Gallery: 1440 x 900) and replaced in `docs/assets/`.
+- Core WCAG contrast checks passed: quiet text on surface is 4.67:1, muted text on surface is 6.17:1, and accent ink on the accent fill is 11.69:1.
 
-## Interaction Evidence
+## Motion And Interaction Evidence
 
-- A blank English Log page switches to Chinese through a 303 redirect with no raw 405 or JSON error page.
-- A typed Chinese draft switches to the English interface without saving, keeps the exact textarea content, and finishes at `/log?lang=en`.
-- Refresh after that switch remains on the GET route and does not produce a framework error.
-- Existing Chinese analysis shown in the English interface is labeled as a mismatch and offers explicit English regeneration instead of silently relabeling the content.
-- Analyzer retry, language enforcement, save, feedback, visual generation, and image-language routing are covered with deterministic test doubles; browser QA did not call an external AI or image provider.
-- Browser console inspection returned no warnings or errors.
+- Scroll reveal: the off-screen mobile Log grid began without `is-visible`, then reached `is-visible` and opacity 1 after scrolling into view.
+- Count-up: dashboard totals progressed from `1 / 0` during the first frame to their server values `8 / 3` after the shared duration.
+- View Transitions: the Gallery Dream #3 card exposed `view-transition-name: dream-3`; clicking it reached `/dreams/3?lang=en`, and browser Back returned to Gallery.
+- Browsers without IntersectionObserver/View Transitions keep the complete page and normal navigation. Reduced-motion users receive immediate reveal/final counts through the CSS and JavaScript contracts.
+- Focus rings, 44px targets, form loading states, and route-aware language controls remain intact.
 
 ## Automated Verification
 
-- Full test suite: 156 passed.
-- Focused typography, draft-language, visual-title, and API tests: 116 passed.
-- Source distribution and wheel build: passed; the wheel contains both full WOFF2 files and both OFL licenses at the verified sizes.
-- Exact responsive browser matrix: 60 cases, 0 failures.
-- Independent responsive browser matrix: 60 cases, 0 failures.
-- Temporary screenshots were created under `D:\CodexScratch\DreamLoop-frontend-qa-2026-07-14`, inspected, and removed after verification.
+- Full test suite: 157 passed.
+- Focused frontend/design contract pass: 12 passed.
+- Final responsive browser matrix: 72 cases, 0 failures.
+- Post-review desktop/mobile smoke: 12 cases, 0 failures.
+- Application browser console: 0 warnings/errors.
+- Source distribution and wheel build: passed.
+- Wheel inspection confirmed `app.js`, `tokens.css`, `style.css`, and both updated templates are packaged.
 - The only test warning is the existing Starlette/httpx deprecation warning.
 
-## Residual Coverage Boundary
+## Coverage Boundary
 
-The two browser matrices are recorded execution evidence, not a committed
-end-to-end browser suite. The repository tests verify the server-rendered
-`replaceState` script and CSS contracts, but CI does not replay the URL refresh
-flow or pixel/layout checks. Those behaviors require another browser QA pass
-when the language-switch script or responsive layout changes.
+The responsive matrix and interaction checks are recorded execution evidence, not a committed pixel-diff browser suite. CI covers the server-rendered markup, SVG layout contract, progressive-effect assets, reduced-motion fallback, and static packaging; a browser pass should be repeated when responsive structure or motion code changes.
 
 Final result: passed.

design.md

@@ -0,0 +1,38 @@
+# DreamLoop Frontend Design System
+
+## Product intent
+
+DreamLoop is a private, local-first dream journal. The interface should feel quiet enough for bedside use, clear enough for daily capture, and structured enough to make recurring patterns useful. The primary action is always **Log a dream**; interpretation, patterns, gallery, and settings support that loop.
+
+## Direction
+
+- Hallmark route: catalog, atmospheric genre, Workbench macrostructure, Lumen theme adapted to DreamLoop's existing local CJK fonts and photographic page art.
+- Visual memory point: one restrained, page-specific dream image behind each workspace. Content stays on matte surfaces; there is no glass blur or decorative canvas animation.
+- Display: local Noto Serif SC. Body: local Noto Sans SC. Data and controls: local Cascadia Mono.
+- Palette: violet-black canvas, warm paper surfaces, amber as the single action accent, sage and rust only for semantic status.
+
+## Layout and hierarchy
+
+- Persistent product navigation, then a page heading, then the page's primary work area.
+- Dashboard: capture-led hero, one insight, a single ruled status rail, then calendar and recent dreams.
+- Log: capture and analysis remain the two dominant columns.
+- Detail: dream narrative first, analysis second, context last.
+- Patterns, Gallery, and Settings preserve their existing information architecture and data contracts.
+
+## Motion
+
+Only three effects are used from `web-fx-lab`:
+
+1. One-shot opacity reveal for the page heading and primary regions.
+2. One-shot count-up for numeric dashboard totals.
+3. Native same-origin View Transitions between dream cards and dream detail.
+
+All effects use the shared timing tokens, degrade without JavaScript or browser support, and resolve immediately under `prefers-reduced-motion: reduce`.
+
+## Responsive and accessibility floor
+
+- Required widths: 320, 375, 414, 768, 1024, and 1440 CSS pixels.
+- `html` and `body` use `overflow-x: clip`; no page-level horizontal scroll.
+- Navigation and button labels remain single-line; the compact navigation rail scrolls locally when necessary.
+- All controls keep a visible `:focus-visible` ring and a 44px minimum target.
+- Long dream text, titles, paths, and translated labels may wrap inside their own tracks without forcing the layout wider.