What does one unified log look like at phone width? #46

Closed
opened 2026-07-30 13:15:04 +00:00 by aiko · 1 comment
Owner

Question

denpa#34 is v1-blocking: keeping both the phone and the tablet means the log
renders at two very different viewports, and today it renders as two different
designs — the upstream chatscope ChatHistoryPanel in a mobile overlay, and
LogRail's 受信記録 relay rows in tablet landscape. Rotating across the 900px
breakpoint changes what the log is, not just where it sits.

#34 names the mechanism (parameterise LogRail's hard-coded 320px, host it
in the overlay, retire ChatHistoryPanel) but not the design. The undecided part
is what 受信記録 relay rows look like when there is no rail to put them in:

  • What survives compression to phone width — which columns, which affordances?
  • How does the overlay presentation differ from the rail, beyond width?
  • Silence and not-yet-loaded must stay visually distinct at both sizes. What
    distinguishes them when the row is narrow?

Make it concrete before deciding — /prototype the log at phone width, tablet
portrait and tablet landscape, and react to it.

  • denpa#34, denpa#17 (owns the relay-row design), denpa#12, denpa#16

Map: aiko/denpa#41

## Question `denpa#34` is v1-blocking: keeping both the phone and the tablet means the log renders at two very different viewports, and today it renders as two different designs — the upstream chatscope `ChatHistoryPanel` in a mobile overlay, and `LogRail`'s 受信記録 relay rows in tablet landscape. Rotating across the 900px breakpoint changes what the log *is*, not just where it sits. `#34` names the mechanism (parameterise `LogRail`'s hard-coded `320px`, host it in the overlay, retire `ChatHistoryPanel`) but not the design. The undecided part is what 受信記録 relay rows look like when there is no rail to put them in: - What survives compression to phone width — which columns, which affordances? - How does the overlay presentation differ from the rail, beyond width? - Silence and not-yet-loaded must stay visually distinct at both sizes. What distinguishes them when the row is narrow? Make it concrete before deciding — `/prototype` the log at phone width, tablet portrait and tablet landscape, and react to it. ## Related - `denpa#34`, `denpa#17` (owns the relay-row design), `denpa#12`, `denpa#16` --- Map: `aiko/denpa#41`
aiko self-assigned this 2026-07-30 14:12:41 +00:00
Author
Owner

Resolution

The unified log needs no width-specific design. What is already built is the answer.

LogRail was rendered at all three real viewports — Pixel 7 Pro (484 CSS px), OnePlus Pad portrait (800 CSS px), and the 1c rail (320 px) — using the real component rather than a mock, with one fixture carrying a question, a 思考 row, three relays including a failure and a retry, an answer with its chain footer, a capture, and one relay still running. Prototype at .denpa-work/shots/log-prototype.html.

Human verdict: all three read fine. So:

  • The relay row's density is the point at every width. log-rail.tsx:64 designed the one-line row for the 320 px rail — glyph, tool name, preview, duration. A wider viewport lengthens the measure rather than earning extra columns, and that is accepted rather than a compromise. No wide-variant row.
  • The 思考 clamp stays measure-based. log-rows.ts:72's 68-character measure is independent of the actual width, and that is fine at all three.
  • The overlay's own chrome is accepted. LogOverlay adds a 受信記録 header and a close key the rail does not have. That is technically "beyond placement and width" against #34's wording, and it is correct — the rail sits beside the stage and needs no dismissal, the overlay covers it and does.

The finding that reframed this ticket

aiko/denpa#34's premise is stale — most of it is already built. It describes mobile reaching the log through an overlay that renders the upstream chatscope ChatHistoryPanel. That is no longer true: receiver-chrome.tsx:261 passes LogRail into the overlay at width: '100%', and log-rail.tsx:34 states the design directly — "The 1c rail is a 320px column; the 1a overlay is the same log filling the stage. One component." The 320px is a default (LOG_RAIL_WIDTH), not the hard-code #34 describes.

Measured against #34's four acceptance criteria:

Criterion State
Mobile overlay and tablet rail render the same rows from the same component met
Rotating across the breakpoint changes only placement and width likely met, driven by chrome-plan; not yet verified on a device
ChatHistoryPanel is no longer the log anywhere; delete if unreferenced half — no longer the log, still in the tree
Silence and not-yet-loaded stay distinct at both sizes unverified

ChatHistoryPanel is reachable only from components/sidebar/sidebar.tsx, which nothing renders — chrome-is-mounted.test.ts:24 asserts App does not mount <Sidebar>. So it is dead code behind a dead file, and #34's "if it becomes unreferenced, delete it" is now due.

Rescoped on #34 accordingly.

## Resolution **The unified log needs no width-specific design. What is already built is the answer.** `LogRail` was rendered at all three real viewports — Pixel 7 Pro (484 CSS px), OnePlus Pad portrait (800 CSS px), and the 1c rail (320 px) — using the real component rather than a mock, with one fixture carrying a question, a 思考 row, three relays including a failure and a retry, an answer with its chain footer, a capture, and one relay still running. Prototype at `.denpa-work/shots/log-prototype.html`. **Human verdict: all three read fine.** So: - **The relay row's density is the point at every width.** `log-rail.tsx:64` designed the one-line row for the 320 px rail — glyph, tool name, preview, duration. A wider viewport lengthens the measure rather than earning extra columns, and that is accepted rather than a compromise. No wide-variant row. - **The 思考 clamp stays measure-based.** `log-rows.ts:72`'s 68-character measure is independent of the actual width, and that is fine at all three. - **The overlay's own chrome is accepted.** `LogOverlay` adds a 受信記録 header and a close key the rail does not have. That is technically "beyond placement and width" against `#34`'s wording, and it is correct — the rail sits beside the stage and needs no dismissal, the overlay covers it and does. ## The finding that reframed this ticket **`aiko/denpa#34`'s premise is stale — most of it is already built.** It describes mobile reaching the log through an overlay that renders the upstream chatscope `ChatHistoryPanel`. That is no longer true: `receiver-chrome.tsx:261` passes `LogRail` into the overlay at `width: '100%'`, and `log-rail.tsx:34` states the design directly — *"The 1c rail is a 320px column; the 1a overlay is the same log filling the stage. One component."* The `320px` is a default (`LOG_RAIL_WIDTH`), not the hard-code `#34` describes. Measured against `#34`'s four acceptance criteria: | Criterion | State | |---|---| | Mobile overlay and tablet rail render the same rows from the same component | **met** | | Rotating across the breakpoint changes only placement and width | **likely met**, driven by `chrome-plan`; not yet verified on a device | | `ChatHistoryPanel` is no longer the log anywhere; delete if unreferenced | **half** — no longer the log, still in the tree | | Silence and not-yet-loaded stay distinct at both sizes | **unverified** | `ChatHistoryPanel` is reachable only from `components/sidebar/sidebar.tsx`, which nothing renders — `chrome-is-mounted.test.ts:24` asserts `App` does not mount `<Sidebar>`. So it is dead code behind a dead file, and `#34`'s "if it becomes unreferenced, delete it" is now due. Rescoped on `#34` accordingly.
aiko closed this issue 2026-07-30 14:18:35 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
aiko/denpa#46
No description provided.