fix(frontend): render readable customer display rows and TV page rotation by khaira777 · Pull Request #1164 · FreeOpenSourcePOS/FloCafe

khaira777 · 2026-10-15T02:22:00Z

Intent

Implement approved issue #1148 customer-display readable rows and TV paging for unattended screens. Show the complete current receipt identifier from bill.number with order.number fallback, safely wrap long identifiers, and use readable full-width Preparing/Ready rows with no horizontal overflow at 720p, 1080p and 4K. Measure each column’s actual usable height, wrapped row heights and computed gap for legible multipage layouts. Rotate only columns with multiple pages every 10 seconds, preserve the current page until its interval expires, prioritize newly ready orders next, and interleave older eligible orders to prevent starvation. Remove ineligible orders promptly; preserve the existing latest-100 feed limit and do not expand backend queue pagination (#1159). Keep the scoped pairing-token/API-auth contract, fragment flow, private data boundary, signed-in preview scope, hidden-tab pause/resume and cleanup. Keep last-known rows on network failures with a stale indication, recover after bounded stalled requests, immediately clear revoked 401 pairings, and prevent stale async session/config results from restoring invalid state. Do not add audio, animation, settings, dependencies, auth/API changes, or unrelated refactors. Preserve existing scroll test IDs and cover paging, identifier wrapping, viewport bounds, new-ready priority/fairness, removals, hidden pause, slow/stalled paired and signed-in recovery, revocation, loading/empty/error states, and mobile flow. The pairing-address test must assert visible exact A-42 text inside the Ready column so hidden measurement probes cannot satisfy it. Validate on current main and the same PR; keep the PR open for root review.

What Changed

Render full-width customer display rows that display complete receipt identifiers (bill.number with fallback to order.number) with text wrapping to prevent clipping or overflow across 720p, 1080p, and 4K viewports.
Measure usable column heights and row metrics to paginate orders, rotating columns with multiple pages every 10 seconds while prioritizing newly ready orders, interleaving older pages, and pausing rotation when hidden.
Retain last-known order rows with a stale-data indicator on network failures or 10-second request timeouts, clear pairing state on 401 responses, and expand E2E tests for TV paging, layout integrity, and feed recovery.

Risk Assessment

✅ Low: The change is a well-bounded frontend customer display TV paging and layout implementation adhering to all product invariants, with complete test coverage and no remaining defects.

Testing

Driven 7 live scenarios against the active FloCafe backend server (:3001) and Chromium frontend, covering TV viewports (720p, 1080p, 4K) with long receipt identifier wrapping, 10s independent column rotation, live order addition/removal on 3s feed poll, network failure and stale badge indication with retained rows, 401 token revocation row clearing, scoped LAN pairing URL fragment flow with exact visible A-42 assertion, and mobile flow; all scenarios passed with 12 visual screenshot artifacts captured in the evidence directory.

Live validation: ✅ go - 7 of 7 scenarios driven live against the product

Scenario	Result	Live	Evidence
TV resolution viewports (720p, 1080p, 4K) & safe receipt wrapping without horizontal overflow	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-tv-720p.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-tv-1080p.pn…
TV multipage column rotation with 10-second interval and independent column pagination	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-page-initial.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-page-r…
Real order lifecycle: prompt order addition and removal when ineligible on subsequent poll	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-live-orders-active.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-…
Stalled feed and network failure recovery with stale indication and retained rows	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-stale-network-warning.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-displ…
Immediate clearing of displayed rows and stored credentials on 401 token revocation	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-token-revoked-cleared.png
Scoped LAN pairing fragment flow with visible exact ready-order verification (A-42)	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-paired-ready-row-a42.png
Narrow mobile viewport responsive content flow without horizontal overflow	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-mobile-flow.png

Pipeline

Updates from git push no-mistakes

✅ **intent** - passed

✅ No issues found.

🔧 **Rebase** - 1 issue found → auto-fixed ✅

⚠️ docs/architecture/frontend.md - merge conflict rebasing onto origin/main

🔧 Fix applied.
✅ Re-checked - no issues remain.

✅ **Review** - passed

✅ No issues found.

✅ **Test** - passed

✅ No issues found.

Live validation: ✅ go - 7 of 7 scenarios driven live against the product

Scenario	Result	Live	Evidence
TV resolution viewports (720p, 1080p, 4K) & safe receipt wrapping without horizontal overflow	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-tv-720p.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-tv-1080p.pn…
TV multipage column rotation with 10-second interval and independent column pagination	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-page-initial.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-page-r…
Real order lifecycle: prompt order addition and removal when ineligible on subsequent poll	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-live-orders-active.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-…
Stalled feed and network failure recovery with stale indication and retained rows	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-stale-network-warning.png, ~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-displ…
Immediate clearing of displayed rows and stored credentials on 401 token revocation	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-token-revoked-cleared.png
Scoped LAN pairing fragment flow with visible exact ready-order verification (A-42)	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-paired-ready-row-a42.png
Narrow mobile viewport responsive content flow without horizontal overflow	✅ pass	live	~/.no-mistakes/evidence/01M504PJSSE1X4F342NK5RJT6T/customer-display-mobile-flow.png

cd frontend && npx playwright test e2e/customer-display-pairing-addresses.spec.ts --project=chromium
cd frontend && npx playwright test e2e/layout-integrity.spec.ts -g "customer display" --project=chromium
npm run test:customer-display-config
npm run test:customer-display-settings-route
npm run test:customer-display-pairing
node <scratch>/run_live_scenarios.cjs (7 live end-to-end scenarios against running Express backend :3001 and Next.js static export)

✅ **Document** - passed

✅ No issues found.

✅ **Lint** - passed

✅ No issues found.

✅ **Push** - passed

✅ No issues found.

coderabbitai · 2026-10-15T02:22:10Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository: FreeOpenSourcePOS/FloCafe/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: 50eeeb4b-5e45-48ef-879e-e10d6eed5d6f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

khaira777 · 2026-10-15T04:50:58Z

@greptile review

greptile-apps · 2026-10-15T04:55:31Z

Confidence Score: 4/5

[Medium impact] Customer display page adds pagination and connection-loss handling.

Fix page changes during resize before merging; the pairing-test gap is non-blocking.

Findings

Resizing changes pages too soon ▶
Hidden receipts pass pairing checks ▶

Summary

The PR replaces customer-display tiles with wrapped receipt rows and independent ten-second paging.

Customer displays show wrapped receipt rows and rotate pages on TVs.
Customer displays keep the last orders visible when feeds fail.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Poll[Poll display feed] --> Result{Response}
  Result -->|Success| Rows[Keep current eligible rows]
  Result -->|Failure or timeout| Stale[Keep last rows and show warning]
  Result -->|Paired 401| Clear[Clear token and orders]
  Rows --> Measure[Measure wrapped rows and available height]
  Measure --> Columns[Page each column independently]
  Columns --> Timer[Rotate every ten seconds while visible]

_{Reviews (2) · Last reviewed commit: "no-mistakes(document): Verify customer d..." · Reviewed by Greptile}

khaira777 · 2026-10-15T15:46:58Z

@greptile review

…ority split and page rotation"}

…ayout integrity spec

…ocks

khaira777 requested review from carvalab and itsbkm as code owners October 15, 2026 02:22

greptile-apps Bot reviewed Oct 15, 2026

View reviewed changes

Comment thread frontend/src/app/customer-display/page.tsx

Comment thread frontend/e2e/layout-integrity.spec.ts

Comment thread frontend/e2e/layout-integrity.spec.ts Outdated

khaira777 force-pushed the codex/display-readable-tv-pages branch from 4a71f00 to eec8c26 Compare October 15, 2026 08:23

khaira777 changed the title ~~fix(frontend): paginate customer display columns for TV viewports~~ fix(customer-display): make the TV order board readable with measured pagination Oct 15, 2026

khaira777 changed the title ~~fix(customer-display): make the TV order board readable with measured pagination~~ fix(frontend): paginate customer display and wrap long identifiers Oct 15, 2026

greptile-apps Bot reviewed Oct 15, 2026

View reviewed changes

Comment thread frontend/src/app/customer-display/page.tsx

Comment thread frontend/e2e/customer-display-pairing-addresses.spec.ts Outdated

khaira777 added 8 commits October 15, 2026 12:03

fix: make customer display readable on TVs

09c792b

no-mistakes(review): {"summary":"Fix customer display single-page pri…

fc13066

…ority split and page rotation"}

no-mistakes(document): style(frontend): format customer display and l…

302a17f

…ayout integrity spec

fix: recover stalled customer display feeds

c4ca136

no-mistakes(review): Fix TV display test rotation races by pausing cl…

9265ce5

…ocks

no-mistakes(document): Verified display docs, fixed spec formatting

d615810

no-mistakes(document): Verify customer display documentation and linting

55ef767

test: assert visible customer display pairing rows

8d327a0

khaira777 force-pushed the codex/display-readable-tv-pages branch from 4f048f3 to 8d327a0 Compare October 15, 2026 16:27

khaira777 changed the title ~~fix(frontend): paginate customer display and wrap long identifiers~~ fix(frontend): render readable customer display rows and TV page rotation Oct 15, 2026

Merge branch 'main' into codex/display-readable-tv-pages

b406cfb

khaira777 enabled auto-merge (squash) October 15, 2026 16:29

khaira777 merged commit cf59b5d into main Oct 15, 2026
23 checks passed

khaira777 deleted the codex/display-readable-tv-pages branch October 15, 2026 16:37

Navigation Menu

Repository navigation

fix(frontend): render readable customer display rows and TV page rotation - #1164

fix(frontend): render readable customer display rows and TV page rotation#1164
khaira777 merged 9 commits into
mainfrom
codex/display-readable-tv-pages

khaira777 commented Oct 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 15, 2026 •

edited

Loading

Review skipped

Uh oh!

khaira777 commented Oct 15, 2026

Uh oh!

greptile-apps Bot commented Oct 15, 2026 •

edited

Loading

Summary

Diagram

Uh oh!

Uh oh!

Uh oh!

Uh oh!

khaira777 commented Oct 15, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

khaira777 commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Intent

What Changed

Risk Assessment

Testing

Pipeline

Uh oh!

coderabbitai Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

khaira777 commented Oct 15, 2026

Uh oh!

greptile-apps Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 4/5

Findings

Summary

Diagram

Uh oh!

Uh oh!

Uh oh!

Uh oh!

khaira777 commented Oct 15, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

khaira777 commented Oct 15, 2026 •

edited

Loading

coderabbitai Bot commented Oct 15, 2026 •

edited

Loading

greptile-apps Bot commented Oct 15, 2026 •

edited

Loading