# TrueGrowth Golden Page Migration Audit This audit tracks the migration of navigation-entered pages to the `/image` golden UI standard. A route is not complete until it has browser screenshots, console health, and one primary interaction verified. ## Verification Method - Start from `http://127.0.0.1:7200/`. - Compare against `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`. - Capture desktop screenshot and, when practical, one narrower viewport. - Check light and dark mode for any custom surfaces. - Exercise one primary interaction. - Record remaining UI debt before marking complete. ## Route Inventory | Priority | Route | Component Entry | Surface Type | Golden Standard Target | Required Interaction | Status | Browser Evidence | | --------- | --------------- | ------------------------------------ | ------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Reference | `/image` | `OpenTuGenerationPage(kind="image")` | Generator | Approved golden page | Model/parameter selector, generation batch, media hover actions | Accepted | Current approved reference | | P0 | `/video` | `OpenTuGenerationPage(kind="video")` | Generator | Left config panel + right batch result feed | Model/parameter selector, video batch hover actions, mobile task tab | Migrated and browser verified | 2026-07-04: desktop light/dark, simulated completed/processing/failed batch, hover actions, more menu, model/parameter popovers, mobile task tab | | P0 | `/avatar` | `DigitalHumanPage` | Generator + media manager | Left config panel + right media/result management | Select avatar/model/sound, open creation dialog, hover image/video assets | Migrated and browser verified | 2026-07-04: compose, avatar management, voice, timbre, products, add avatar/timbre dialogs, desktop light/dark, mobile | | P0 | `/assets` | `AssetsPage` | Media library | Full-ratio media grid, hover/compact actions, single-surface search | Search/filter, hover asset actions, open media picker/preview | Migrated and browser verified | 2026-07-04: desktop light/dark, empty state, single-surface search, simulated media cards/hover, mobile | | P1 | `/publish` | `AutoPublishingPage` | Status + composer | Selected media preview + publish form/status list | Select publishable asset, open account/publish dialog, validate target form | Migrated and browser verified | 2026-07-05: desktop light/dark, media grid, search/select/preview interaction, accounts/drafts/history tabs, mobile | | P1 | `/tasks` | `TasksPage` | Status list | Batch/status rows, orange progress, clear failure reasons | Filter/status action, retry/open result, confirm cleanup dialog | Migrated and browser verified | 2026-07-05: desktop light/dark, compact task rows, failure filter/reason, more menu, branded cleanup confirm, mobile | | P1 | `/models` | `ModelsPage` | Settings/status | Grouped setup panel + model/runtime status detail | Open local import/setup controls, model action menu, status refresh | Migrated and browser verified | 2026-07-05: desktop overview/ComfyUI/import/installed, dark mode, mobile, import input interaction | | P1 | `/settings` | `SettingsPage` | Settings | Inline page, grouped controls, tokenized dialogs/popovers | Open provider/model route controls and save/update settings | Migrated and browser verified | 2026-07-05: desktop light/dark, provider/model/platform views, model dropdown, theme toggle scroll lock, mobile | | P1 | `/workflow` | `BusinessOrchestrationPage` | Status + editor entry | Homepage-first status/list surface, editor deferred, dialogs tokenized | Create from template, open editor entry, inspect history/status | Migrated and browser verified | 2026-07-05: desktop light/dark, saved workflow list/internal scroll, template picker, editor shell, workflow settings modal, mobile | | P2 | `/timeline` | `FunClipEditingPage` | Generator/editor support | Compact creation controls + media/task feed, editor-specific areas preserved | Import media, choose task mode, open result/history action | Migrated and browser verified | 2026-07-05: desktop split with large left editing area, compact right guide, service/history dialogs, no overflow/errors | | P2 | `/intelligence` | `OmniIntelligencePage` | Research/workflow | Dense creation/search panel + result feed/cards | Run/search research input, open result/action panel | Migrated and browser verified | 2026-07-05: desktop research console, saved research side rail, composer controls, no overflow/errors | | P2 | `/home` | `DashboardPage` | Exploration | App discovery surface with large visual cards and minimal hover actions | Search/filter apps, hover card, open `/image` or `/video` | Migrated and browser verified | 2026-07-05: app-center/exploration layout, large visual cards, route-open affordances, no overflow/errors | | Scoped | `/canvas` | Drawnix canvas | Complex canvas | Canvas exempt from full layout, but panels/dialogs/toolbar must follow golden controls | Open tool panel/dialog, task center, media insert drawer | Scoped browser verified | 2026-07-05: canvas shell, inspiration panel, toolbar, model/menu styling checked; infinite SVG overflow is expected canvas behavior | ## Dialog And Popover Inventory | Surface | Expected Golden Behavior | Status | | ---------------------- | ------------------------------------------------------------- | ----------------------------------------------------------- | | Model selector | Clickable, compact, orange focus, no extra outer border | Pending | | Generation parameters | Compact popover, graphical ratio choices, count slider max 10 | Partially aligned on `/image`, verify elsewhere | | Knowledge selector | Single-surface search/input, no nested white input | Partially aligned on `/image`, verify elsewhere | | Media picker | Full-ratio thumbnails, hover actions, single-surface search | Pending | | Confirm dialog | Shared branded modal, not browser confirm | Partially aligned, verify all callsites | | Settings dialogs | Rounded controls, no stacked card/input borders, dark mode | Pending | | Publish picker/preview | Preselect incoming asset and show preview in form | Aligned on `/publish`, verify handoff from each source page | ## Browser Audit Notes ### `/video` initial audit - Date: 2026-07-04 - Evidence: browser loaded `http://127.0.0.1:7200/video` with no relevant console errors. - Current structure: `.tg-first-page--video`, `.ai-video-generation-container`, one left form, and one right feed are present. - Gaps versus `/image`: visible top mode tabs remain; left and right areas are still framed as nested cards; right result feed uses an extra white card background; bottom action area feels pinned and heavier than the `/image` generation button. - Next fix: align `/video` with `/image` generator layout first, then verify result media rails, loading/failed placeholders, and video hover actions. ### `/video` migration verification - Date: 2026-07-04 - Evidence: browser verified `http://127.0.0.1:7200/video` against the `/image` golden standard. - Desktop layout: left creation panel `392px` with `#fdfdfd`, right result feed `640px` with `#f9f9fa`, no global topbar, mode switcher hidden, content starts at the navigation boundary. - Empty state: right feed stays unframed and directional, with no nested white card background. - Simulated batch: injected and then removed three temporary `tg-ui-audit-video-golden-*` tasks covering completed, processing, and failed states. Final cleanup removed `3` records and the route returned to zero temporary batches. - Result feed: batch width `600px`; three media items are on one horizontal rail; completed video uses `object-fit: contain` with transparent backing and no shadow; failed reason appears at batch level; loading placeholder keeps `生成视频 / 42% / 生成中` in a centered stack with `10px` gaps and no overlap. - Actions: completed media hover exposes labeled icon actions `预览 / 插入画布 / 去发布 / 下载`; batch row keeps `重试/重新生成` plus `更多`; `更多` opens `插入画布 / 去发布 / 下载 / 删除`. - Popovers: generation parameters open above the trigger without viewport overflow; model selector uses a single-surface search field and rounded orange-selected items. - Dark mode: left `#0f0f12`, right/feed `#111114`, orange progress and primary action preserved, action pills and failure placeholders use dark surfaces. - Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`); `生成设置/生成任务` switcher works; task tab hides the form and shows the feed; media hover overlay/play icon is suppressed on mobile so the batch remains clean while the rail scrolls internally. - Console: no new relevant runtime errors were observed. Historical `TaskQueueService restoreTasks` warnings came from temporary injected tasks and were cleaned up. ### `/avatar` migration verification - Date: 2026-07-04 - Evidence: browser verified `http://127.0.0.1:7200/avatar` compose and `形象管理` states against the `/image` golden standard. - Compose layout: left creation panel is `392px` with `#fdfdfd`; right task feed is `640px` with `#f9f9fa`; right title no longer wraps vertically; task list height expands to the available feed area. - Compose media selector: selected avatar media card was reduced from a giant `508px` card to a compact `142px` row; thumbnail uses `object-fit: contain` with transparent backing. - Media fallback: local avatar templates whose `videoUrl` is actually a `.jpg` thumbnail now render as `` poster thumbnails instead of blank `