Files
TrueGrowth/docs/TRUEGROWTH_GOLDEN_PAGE_MIGRATION_AUDIT.md

32 KiB
Raw Blame History

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/<route>.
  • 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 <img> poster thumbnails instead of blank <video> elements; real video URLs remain playable.
  • Avatar management: 形象管理 now uses a full-width gray media grid with 39 media cards, 5 visible columns at desktop width, full-content thumbnails, transparent card backing, bottom gradient title, and compact hover action buttons.
  • Add avatar dialog: 添加数字人形象 opens in a viewport-contained resource dialog; panel stays within 1280x720, actions are visible at the bottom, controls are 42px single-surface inputs, and the backdrop is a full-screen rectangular overlay instead of a distorted button shape.
  • Dark mode: avatar management custom surfaces were checked by temporarily applying data-tg-theme="dark"; page, tabs, grid, cards, and text use dark tokens and orange selection.
  • Voice synthesis: 声音合成 now follows the /image split generator pattern. Browser metrics showed 392px left operation panel with #fdfdfd, 640px right feed with #f9f9fa, full-height 720px sections, transparent empty state, and no page-level horizontal overflow.
  • Timbre management: 音色管理 uses the full gray management-grid pattern. Cards are compact 176px cards with no text clipping, transparent grid background, orange current state, and vertical grid scrolling only inside the content area.
  • Products management: 成品管理 uses a full gray result-management surface. Empty state is transparent in both light and dark mode; no stray white/gray block remains behind media/result placeholders.
  • Add timbre dialog: 添加音色 was opened and verified. The dialog panel is viewport-contained at 1040px desktop width, the form body no longer has a nested white card/background, inputs remain single-surface 42px controls, the recorder panel uses the same 16px radius system, and the device select is visually distinct inside the recorder surface.
  • Dark mode: 声音合成, 音色管理, and 成品管理 were checked with data-tg-theme="dark". Left voice panel uses #0f0f12, right/full surfaces use #111114, cards and controls use low-contrast dark surfaces, and orange selection/action states remain visible.
  • Mobile 390x780: 声音合成 stacks cleanly under the mobile navigation; page scrollWidth=390, task section scrollWidth=390, and no hidden horizontal overflow remains after clearing desktop-only right-header padding.
  • Console: no new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Remaining /avatar debt: edit/delete confirmation flows should still be sampled during the global confirm-dialog sweep, but the route-level first pages and add dialogs now meet the golden-page migration bar.

/assets migration verification

  • Date: 2026-07-04
  • Evidence: browser verified http://127.0.0.1:7200/assets against the /image golden standard for media-library pages.
  • Desktop light layout: page now uses a full soft-gray #f9f9fa workbench surface; the heading is shortened to 素材库; the old marketing-size title, radial orange wash, white summary card, white grid card, and dashed empty card were removed.
  • Search: the media search field is single-surface. Browser metrics showed the wrapper owns the 40px border/focus ring while the inner TDesign .t-input has border: 0, transparent background, and no shadow.
  • Empty state: the empty library state is transparent and centered in the media area; no nested white card or dashed frame remains. The icon is a quiet orange-accent tile.
  • Simulated asset-grid QA: browser temporarily injected and then removed three #tg-assets-card-qa cards covering 9:16, 16:9, and 1:1 media. Images used object-fit: contain, transparent backing, no white/gray decorative card, and hover revealed title/preview actions without changing media fit.
  • Dark mode: data-tg-theme="dark" was checked. The page uses #111114, search/chips/buttons use low-contrast dark surfaces, active chips use orange translucent selection, and the empty state remains transparent.
  • Mobile 390x780: no page-level horizontal overflow (scrollWidth=390); heading copy wraps correctly; summary and filter rows scroll horizontally inside their own rails instead of widening the page.
  • Interaction proof: typed 海报 into the search field and verified focus state, value, single border, and orange focus ring.
  • 2026-07-05 containment pass: desktop root width was rechecked after tightening non-generator immersive sizing. Browser metrics showed .tg-first-page--assets at 1000x688, document width 1280, client width 1280, and no page-level overflow. Mobile 390x780 kept document width equal to client width; only the intended local filter/action rail scrolls horizontally.
  • Console: no new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.

/publish migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/publish against the /image golden standard for media/status/composer pages.
  • Desktop assets tab: page uses soft gray #f9f9fa, compact stats chips, pill tabs, a single-surface search field, transparent media grid, and full-ratio media thumbnails. Browser metrics showed 63 real publishable assets, no page horizontal overflow (scrollWidth=1280), grid display:flex before mobile override, overlapCount=0, media object-fit: contain, transparent thumb/media backgrounds, and no card shadow.
  • Filter/upload row: search, upload, and filter rail stay on one desktop row. The upload file input is absolute inside the 156px upload pill and no longer expands the row.
  • Interaction proof: searched ComfyUI, which reduced visible assets from 63 to 4; selected the first card, which updated selected count to 1 and enabled 加入当前草稿; opened the card preview modal.
  • Preview modal: the publish preview now shows media at natural ratio with object-fit: contain, transparent media backing, no black/white decorative fill, and a viewport-contained panel (860px desktop panel, image 284x504 for a 432x768 asset).
  • Accounts tab: account rows were reduced from old white 8px shadow cards to compact 74px low-contrast rows inside a scrollable list; the search field remains single-surface; action buttons are compact and do not wrap.
  • Drafts tab: draft form now uses natural vertical flow instead of the old fixed grid row rules. Browser metrics showed all labels have nonzero heights, no label overlap, 42px inputs, and the left panel scrolls internally for long fields and tag rows.
  • Account picker: publish target account choices are compact 64px two-column cards with low-contrast surfaces, no oversized rounded-pill blocks, and a clean empty target list state.
  • History tab: campaign and target rows use the same low-contrast 14px radius system, no old white card/shadow style, and the campaigns area scrolls internally.
  • Dark mode: temporarily applied data-tg-theme="dark" and verified the publish page background #111114, dark search surface, orange selected chips, transparent media thumbnails, and orange primary button.
  • Mobile 390x780: no page-level horizontal overflow (scrollWidth=390); stats/tabs remain horizontally usable; assets filter stacks into search/upload/filter rail; media grid becomes two stable columns with 159px cards.
  • Console: no new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Remaining /publish debt: source-to-publish handoff should be sampled from each generation/media page during the cross-page publish-flow sweep; destructive account/campaign confirmations should be sampled during the global confirm-dialog sweep.

/tasks migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/tasks against the /image golden standard for task/status pages.
  • Desktop light layout: route uses a soft gray #f9f9fa workbench surface, compact 任务中心 header, pill summary chips, status filter rail, and a single-column task feed. Browser metrics showed 5 task rows, 4 filter chips, task list overflow-y: auto, no page-level horizontal overflow (scrollWidth=1280), and rows sized 942x104.
  • Task rows: old large media cards were replaced with compact status rows. Each row has a small 92x72 full-content preview/fallback, concise title, provider/source metadata, one status hint, orange progress, primary open/result action, and a compact 更多 menu for secondary cleanup/publish actions.
  • Failure state: clicking 失败 1 filtered the feed to one failed row. The failed row preserved the concrete reason ComfyUI 缺少模型文件flux1-schnell.safetensors。请先在模型中心下载到 models/diffusion_models 后重启或刷新 ComfyUI。 in the row status area.
  • Interaction proof: opened the failed row 更多 menu; the menu stayed inside the viewport and showed 清理. Clicking 清理 opened the shared branded .tg-confirm-dialog with 保留 / 清理, not a native browser confirm. Clicking 保留 closed the dialog and the failed row remained.
  • Dark mode: temporarily applied data-tg-theme="dark" and verified page background #111114, transparent list, row background rgba(255,255,255,0.043), row border rgba(255,255,255,0.09), orange progress, and dark menu/action surfaces.
  • Mobile 390x780: no page-level horizontal overflow (scrollWidth=390); task list scrolls internally; rows stack into a readable single-column shape; action buttons keep readable text (查看结果, 回到功能, 打开功能, 更多) and action rails scroll internally when needed.
  • Console: no new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Remaining /tasks debt: the global mobile workbench navigation still consumes a tall top band before content; this belongs to the shared shell sweep rather than the task page body.

/models migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/models against the /image golden standard for settings/status pages.
  • Desktop overview: route renders .tg-first-page--models with the left grouped model-center panel and right soft-gray status/detail area. Browser metrics showed 1000x688 page area, right surface #f9f9fa, no page-level horizontal overflow (scrollWidth=1280, clientWidth=1280), and overview family/status cards with sibling overlap count 0.
  • ComfyUI tab: ComfyUI view uses the same grouped setup/detail rhythm. The flow cards and compact model cards had sibling overlap count 0; the right section scrolls internally (scrollHeight=1628, clientHeight=688) while the workbench itself stays locked.
  • Import/install tab: 导入安装 keeps the import flow in compact rows and single-surface controls. The scanned model package rows had sibling overlap count 0; the model path input is the only matching placeholder, 42px tall, 12px radius, and filling /tmp/truegrowth-test-model.zip updated the input without page overflow.
  • Installed tab: 已安装 model cards render in a wrapping card grid with no sibling overlap; browser metrics showed the bridge grid using flex wrapping, three installed cards, and per-card action rows scrolling internally when actions exceed the card width instead of overlapping.
  • Dark mode: toggled through the real navigation theme control. The models page stayed at scrollTop=0; left panel used near-black #101012, right/detail section used near-black dark surfaces, cards/inputs used low-contrast dark borders, and orange remains the active/focus/action accent.
  • Mobile 390x780: no page-level horizontal overflow (scrollWidth=390, clientWidth=390); the model center stacks under the shared mobile navigation, tabs become a horizontal rail, and the page scrolls vertically inside the route. The remaining tall mobile navigation band is shared-shell debt rather than /models body debt.
  • Console: no new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Notes: /models was already visually migrated in code, so this pass only added missing browser evidence and audit status; no /image code or styling was modified.

/settings migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/settings against the /image golden standard for inline settings pages.
  • Desktop light layout: route renders as inline .settings-dialog--embedded, not a modal. Browser metrics showed one settings dialog with no modal backdrop, no page-level horizontal overflow (scrollWidth=1280, clientWidth=1280), left settings nav 120px, middle provider/preset list about 277px, and right content panel about 603px.
  • Provider view: provider rows, switches, inputs, and content sections use the /image token rhythm: white/soft-gray surfaces in light mode, 42px controls, 12-16px radius, orange active states, no native browser/system dialog shell.
  • Model presets view: opened 模型预设 and the first model picker. The trigger is single-surface (42px, 12px, transparent inner input with border: 0), and the dropdown stays within the viewport (520x282, no offscreen edges). The dropdown was tightened to a 16px menu with 12px vendor/model items and orange hover/selected states in both light and dark mode.
  • Platform config view: preference rows and switches render as compact dark/light tokenized rows; action buttons now stay as a right-aligned compact group instead of stretching across the whole card.
  • Theme toggle interaction: fixed the shared settings-route shell so the left nav item rail scrolls internally while the bottom task status/theme controls remain visible. Browser proof after clicking theme: .tg-workbench.scrollTop stayed 0, sidebar/main/page y=0, settings content y=16, and the theme button remained inside the viewport.
  • 2026-07-05 sidebar containment pass: route changes now scroll the active left-nav item into the sidebar rail instead of letting the last item overlap the footer. Browser metrics on /settings showed nav scrollTop=70, active item bottom 621, footer top 647, no overlap, and document width 1280.
  • Dark mode: browser checked provider/model/platform states. Settings surfaces use near-black #111114/#0f0f12 tones, low-contrast dark cards/inputs, orange active chips/switches, and transparent inner model picker input.
  • Mobile 390x780: no page-level horizontal overflow (scrollWidth=390, clientWidth=390). The shared sidebar becomes the mobile top band, settings nav becomes a horizontal rail, and the content panel scrolls internally.
  • Console: no framework overlay or new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Remaining /settings debt: global shared-shell mobile navigation still consumes a tall top band before content; that belongs to the all-page shell sweep. Additional destructive/reset flows should be sampled later during the global confirm-dialog sweep.

/workflow migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/workflow against the /image golden standard for workflow/status/editor-entry pages.
  • Desktop library: route now uses a flat /image-derived workbench surface with a compact 130px header, soft result area, white/near-black side surface, and no old hero-style card or heavy shadow. Browser metrics showed 15 saved workflows, 1 active schedule, 6 recent runs, no page-level horizontal overflow (docW=1280, clientW=1280), and .tg-workbench.scrollTop=0.
  • Scroll behavior: saved workflows and recent runs scroll inside their own lists. Browser metrics showed workflow list clientH=472, scrollH=1220, overflow-y:auto; recent run list clientH=309, scrollH=386, overflow-y:auto.
  • Template picker: clicking 新建流程 opened 选择流程模板; browser metrics showed 5 template cards, no card overlap, and the template grid scrolls internally inside the route.
  • Editor entry: clicking 空白流程 kept React Flow/editor deferred until entry, then rendered the editor shell with stable height. Browser metrics showed shell 558px, canvas 448px, sidebar and inspector visible, no page horizontal overflow, and the top action rail horizontally scrolls instead of pushing the canvas to zero height.
  • Dialog: opened 流程设置; modal stayed within the viewport (860x615), controls were 42px high with 12px radius, and the form used a single flat modal surface with no nested card shell.
  • Theme switching: fixed the shared sidebar theme toggle so focusing/clicking it no longer scrolls the workbench. Browser proof after theme toggle: .tg-workbench, .tg-main, .tg-content, and .tg-page all stayed at scrollTop=0; route pageY=16.
  • Dark mode: verified near-black workflow surfaces, low-contrast borders, orange primary action/progress accents, and no displaced content after toggling.
  • Mobile 390x780: no page-level horizontal overflow (docW=390, clientW=390); header actions remain in a horizontal rail, workflow panels stack cleanly, and empty/list states stay centered without text overlap.
  • Console: no framework overlay or new relevant runtime errors were observed. Existing TaskQueueService restoreTasks warnings remain historical/local task restoration noise.
  • Remaining /workflow debt: the complex React Flow canvas itself is intentionally scoped; future canvas-specific work should keep the editor chunk deferred and retain explicit node handles.

/timeline migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/timeline against the /image standard with the user's flexible layout note applied.
  • Desktop layout: the page uses a large left editing/selection area and compact right 当前流程 guide. It intentionally does not force the /image one-third/two-thirds split because the clip workflow needs a denser left capability list and only lightweight right status.
  • Interaction proof: opened 检查服务; the service modal stayed inside the viewport, used a single branded overlay/panel, and showed friendly initialization copy instead of raw browser errors. Opened 任务历史; the modal used the same quiet dialog surface and empty-state style.
  • Console and overflow: no relevant errors or page-level overflow were observed. Buttons did not clip or wrap.

/intelligence migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/intelligence against the /image standard for research/workflow pages.
  • Desktop layout: the research console uses a large result panel, compact saved-research side rail, and bottom composer. Saved research card text is constrained inside the side rail with ellipsis instead of overflowing.
  • Interaction proof: the page loaded with an existing saved research item, mode tabs, model selector surface, and send action visible. The layout had no button clipping, no page-level overflow, and no console errors.

/home migration verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/home as the App Center / exploration surface.
  • Desktop layout: the page uses a large visual entry area, compact quick-entry cards, and repeated app cards instead of a generic admin list. It keeps TrueGrowth branding, orange primary action, and route-open affordances.
  • Console and overflow: no relevant errors or page-level overflow were observed. The large discovery cards remain a deliberate exploration-page treatment rather than a generator split.

/canvas scoped verification

  • Date: 2026-07-05
  • Evidence: browser verified http://127.0.0.1:7200/canvas for the complex Drawnix canvas shell.
  • Scoped result: the infinite canvas itself keeps its own interaction model. The visible toolbar, inspiration panel, model/agent controls, and floating surfaces were checked for the TrueGrowth light surface, orange states, soft borders, and rounded control rhythm.
  • Overflow note: the large board-host-svg extends beyond the viewport by design for the infinite canvas and is not treated as page-level UI overflow.

Done Definition

A page is complete only when:

  • Layout matches the closest /image-derived pattern.
  • All visible controls use the shared TrueGrowth visual system.
  • No new TDesign or tdesign icon usage exists outside legacy boundaries.
  • Media is not cropped or backed by stray white/gray decorative shapes.
  • Loading, empty, failed, and hover states are checked.
  • Dialogs/popovers opened from the page are checked.
  • Browser screenshots and interaction notes are recorded.