Skip to content

Mobile: Complete mockup, UI/UX, action, and business-logic coverage #195

Description

@TheDarkSkyXD

Parent

Part of #122, Build StreamFusion Mobile for Android.

What to deliver

Continuously review mobile UI and UX against the approved Android mockups and interaction model. Every feature issue implements its own complete UI, interactions and behavior before it closes. Audit every screen, nested route, tab, Settings panel, shared component, feature component, overlay, and user-visible state. Fix mismatches and missing interactions, then prove the result in the real Android app. A populated route or a static screenshot alone is not completion.

This is one app-wide coverage and consistency issue, starting during development. Existing feature tickets own their complete UI, UX, behavior, integration and proof. Coordinate corrections with those owners before their feature closes. Do not accumulate unfinished pages here for release-stage implementation.

Design authority

Use the approved prototype B and all subsequent approved amendments from #104, the current Android navigation and interaction model, the implementation specification, and the StreamFusion design system. Inventory all approved mockups and review scenarios, including later additions. Rejected prototype A/C designs and superseded mockups are comparison history, not requirements to implement.

Record each source revision. Where an approved mockup is missing, document the gap and resolve the design using the existing system before marking the corresponding screen covered. Escalate genuine product-design conflicts rather than silently changing navigation or dropping outcomes.

Coverage checklist

  • Create a reviewable coverage matrix with stable entries for every approved mockup/scenario, route, screen, tab, panel, component, and applicable state. Each entry identifies its design reference, implementation owner, feature issue, expected interaction, device configuration, evidence, and unresolved findings. Reconcile the matrix with actual route/component inventories so unmocked implementation and unimplemented mockups cannot disappear.
  • Cover Search, Following, Watch, Activity, and More; app headers, account shortcut, independent navigation histories, Android Back, deep links, restoration, and primary navigation visibility. Preserve the user's portrait main-navigation requirement. Test supported wider-window adaptations separately and restore the emulator to portrait afterward.
  • Cover Home, Categories and selected Category Detail, Channel Detail, all Search result types and local history, Following and Guest Follows, filters, sorting, refresh, pagination, and local search fields. Category Videos show VODs, not currently live streams.
  • Cover live Watch, Video and Clip playback, controls, seeking, Chat/Info/Related supporting sheets, captions, movable mini-player, Android PiP, Multistream configuration and retained slots, focused audio, degradation notices, and Watch History.
  • Cover Twitch and Kick chat, emotes, badges, cosmetics, replay, managed-channel selection, moderation rooms, contextual actions, role restrictions, and unavailable-provider states.
  • Cover Activity filters, badges, item detail and routing, guest notifications, permission prompts, foreground/background notification entry, job progress and recovery, and duplicate ingestion that preserves read state. Verify contextual download, recording, export, and cancellation controls. Do not invent a separate Media or Downloads destination.
  • Cover account connection, disconnected/expired/denied states, all 17 currently specified Settings panels, all 42 currently specified tab states, all six Diagnostics tabs, update/install prompts, reports, maintenance, and destructive confirmations. Reconcile these counts against the current approved inventory rather than treating them as a cap.
  • Inventory and review shared and feature-owned buttons, icon buttons, navigation items, tabs, inputs and floating search fields, toggles, sliders, selectors, chips, cards, lists, avatars, thumbnails, category art, badges, tooltips, menus, sheets, dialogs, toasts, skeletons, progress indicators, and empty/error/retry panels wherever present or required by the mockups. Verify their actual screen usages, not only isolated examples.
  • Review applicable default, pressed, selected, focused, disabled, busy, empty, loading, refreshing, partial, stale, offline, failed/retry, permission-denied, signed-out, signed-in, unsupported, and constrained states. Include long text, missing art, large lists, keyboard-open states, and destructive-action cancellation. Explain genuinely inapplicable combinations in the matrix.

Requirements, actions, and logic traceability

Audit the complete product contract, not only visual consistency. Reconcile the original grilling questions and their approved answers, subsequent decision amendments, the PRD/implementation specification, approved mockups, current Desktop outcomes, and Android implementation tickets. A closed grilling issue or an approved PRD does not prove that every action or logic path is covered.

  • Create a source register with the exact issue comment or document section and revision for each decision. Identify superseded answers and unresolved questions. Follow the specification's conflict order and record later explicit user decisions. Never infer approval from an unanswered question.
  • Build a bidirectional requirements matrix. Trace each requirement to its component or non-UI entry point, action/event, business rule, success/failure states, implementation owner and issue, automated tests, and observed evidence. Trace actual components, handlers, workflows, native commands, and background events back to requirements too. Detect both requirements without implementations and behavior without an approved requirement.
  • For every action, record its actor, trigger, inputs, validation, permissions/scopes, preconditions, allowed state transitions, side effects, persistence authority, visible result, cancellation behavior, failure containment, and recovery. Include buttons, gestures, keyboard actions, menus, dialogs, deep links, Android notifications, timers, lifecycle callbacks, native callbacks, and relay events. Noninteractive components link to the display and accessibility rules they render.
  • Inventory business rules independently of screens. Include discovery filtering/sorting/pagination, content identity, VOD-versus-live separation, Guest Follows and account follow restrictions, OAuth/token lifecycle, chat/moderation eligibility, focused playback/audio ownership, captions, measured device admission, degradation/hysteresis, and media-job transitions. Include notification deduplication/read-state preservation, registration/fanout, cache and Product Store boundaries, retention, migration, offline behavior, export, update verification, and destructive-action safeguards.
  • Cover concurrency and lifecycle edges for each applicable workflow. Exercise repeated taps, duplicate/out-of-order events, stale async responses, simultaneous commands, timeout, retry, cancellation, partial failure, permission revocation, account switching, foreground/background changes, process death, reboot, and restoration. Verify idempotency and artifact preservation where required. A happy-path screenshot is not logic evidence.
  • Maintain a gap register for missing requirements, ambiguous rules, contradictions, missing actions, unsupported assumptions, unowned behavior, missing implementation, and missing evidence. Each gap has a stable ID, source references, user impact, owner, blocking relationship, and resolution. Amend the PRD or supporting decision record when a requirement is missing. Obtain an explicit decision for genuine product choices instead of inventing one or rewriting historical approvals.
  • Track specification, implementation, and verification separately. Use explicit missing, blocked, or not-applicable states with reasons. Define exhaustive coverage against a pinned inventory and declared scenarios, not a claim to have tested every possible input. Aggregate code coverage percentages and the existing capability/panel/tab counts cannot substitute for this mapping.
  • Add a repeatable reconciliation check that flags new or removed routes, components, actions, and requirements without corresponding matrix updates. Pin source revisions and invalidate affected evidence when the implementation or approved requirements change.

Completion gate

  • Publish the reviewed traceability matrix and gap register alongside the UI coverage report. Every required component, action, and business rule has a source decision, an implementation owner, and current verification evidence for its applicable outcomes and failure paths.
  • Resolve all missing or contradictory required behavior and all missing required evidence before closing this issue. A linked follow-up alone does not make a gap complete. Approved exclusions require a cited decision and must respect the parity contract.
  • Review the amended PRD and supporting decisions against the matrix. Report separate totals for specified, implemented, verified, blocked, and explicitly inapplicable entries, including remaining human decisions. Feed the complete report into P01: Close every Android parity record #179 and P02: Pass the complete Candidate Gate twice #180. Do not describe the grilling session, PRD, or product as exhaustively covered until this gate passes.

Acceptance criteria

  • Every applicable matrix entry has an implemented outcome and current observed evidence. Every UI/UX, action, and business-logic finding is resolved and re-tested before closure. Link prerequisite feature work explicitly; placeholders, unavailable required features, and deferred findings do not count as passing coverage.
  • The real app matches the approved visual hierarchy and interactions. Verify Dark Theater colors, Inter typography, spacing, density, alignment, icon consistency, radii, Platform accents, circular channel avatars, 16:9 media thumbnails, and 3:4 Category art. Document necessary Android-native adaptations with their design rationale.
  • Primary controls remain reachable and visible without overlap, clipping, unintended horizontal scrolling, or lost content. Verify safe areas, system bars, keyboard avoidance, bottom-search insets, sheets, mini-player placement, and long-content scrolling.
  • Verify at least 48dp touch targets, accessible labels/roles/states, logical TalkBack and keyboard focus, contrast, Android font scaling, and reduced motion. Report dimensions in density-independent units, not raw screenshot pixels.
  • Exercise compact portrait phone, supported tablet/foldable layouts and resizing, API 30 and the current supported Android test target. Use the approved device verification policy for physical-device evidence. A missing device or unrun scenario remains an explicit blocker, not an inferred pass.
  • Start the app through literal root npm start, select option 3 interactively, and record cold/warm launcher timings and startup failures. Use Mobile MCP for real navigation and interaction checks. Expo Go evidence covers only its supported behavior; exercise custom native modules and encrypted storage in the matching development client. Record the tested APK hash and source revision.
  • Capture readable reference-versus-app screenshots at matching viewport/configuration for every approved screen scenario, plus interaction evidence for overlays, components, state transitions, navigation, and recovery. Automated snapshots can supplement, but cannot replace, observed functional checks.
  • Add or update repeatable regression tests for fixed defects and coverage omissions. The normal Change Gate and applicable UI, accessibility, and lifecycle checks pass on the final candidate. Re-run affected evidence after a source or design change.
  • Publish a final coverage report linked to the current Android candidate and Desktop Baseline. No open required UI/UX or logic finding, unanswered product decision, or missing required mockup, screen, component, action, rule, state, or evidence remains. Feed the report into P01: Close every Android parity record #179 parity records and P02: Pass the complete Candidate Gate twice #180 Candidate Gate acceptance.

Sequencing and ownership

No prerequisite blocks starting the inventory and approved-mockup audit. Final verification waits for the relevant feature implementations: #139, #141, #143, #145-#146, #148-#160, #164-#172, and #176. Logic traceability also covers the non-UI foundation, relay, media-engine, and notification delivery work under #122, including #144, #147, #163, #173, and #174. Track exact missing evidence per matrix entry instead of claiming unfinished features are verified.

This issue blocks #178 production artifact promotion and retains its block on #180 final candidate acceptance. Complete each feature's UI/UX inside that feature issue, review each milestone continuously, and finish integrated development-candidate UI/UX review before promotion begins. #179/#180 revalidate completed work against release evidence; they are not prerequisites for starting or completing this development review. Publisher identity setup and verification tooling remain independent. Do not create reverse blockers from feature tickets to this review. Do not skip #143 or silently waive its recorded qualification sequencing question.

Use one owner for this GitHub issue, at most two subagents across the program, and no overlapping file ownership with feature agents. Implementation belongs under apps/mobile with feature-owned responsibility boundaries. Root launch orchestration remains supported. No desktop release, release publication, new paid test service, or production signing change is authorized by this issue.

PRD amendment and per-feature closure

The user's 2026-09-07 direction requires complete UI/UX in every feature issue, before release work. The expanded PRD and normative screen and control contract bind each screen, tab, control, action and approved grilling decision to feature acceptance. No placeholder or backend-only outcome closes a user-facing feature. Pure infrastructure documents its consumer and justified no-new-UI scope.

Specification, implementation and verification remain separate. The completed audit is not completed product UI. Numeric defaults/thresholds that lack an approved source remain explicitly unresolved, not silently copied from prototype data.

Sources

Published PRD amendment: part 1, including feature-owned UI/UX acceptance, part 2, including grilling decisions and remaining explicit questions, and normative screen/control contract. Repository documents are updated locally; these comments retain the amendment independently of the pending documentation commit.

Development placement and release stop

This issue is ordered after #143 in the parent list and starts review during M2. Its M6 milestone is the final completion checkpoint, not permission to wait until M6 to design or implement screens. Every feature owns its complete UI/UX before closure. #195 cannot close while required feature implementation, design decisions or verification findings remain.

#178, #179, #180 and #181 are all directly blocked by this issue. Artifact promotion is now in M7. No reverse blocker prevents early review or feature development, and this ordering does not skip #143. Final release checks revalidate finished UI/UX rather than implement it.

Full qualification completion prerequisite

#196 must complete before this issue closes. Continuous review still starts during development without a start blocker. The user requires all full-workload qualification, integrated behavior and UI/UX before release. #196 directly blocks #178 through #181. Feature owners must still finish their own UI/UX before closure; this split does not defer unfinished feature UI to qualification or release.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

ready-for-agentTriaged and ready for an agent to implement

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions