2 Commits

Include renames

Author	SHA1	Message	Date
Kpa-clawbotandopenclaw-bot	b2d654bf61	fix(#1415, #1458): packets layout + mobile chrome + semantic-first detail (#1459) ... ## Closes #1415 — packets cross-viewport jank ## Closes #1458 — Tufte mobile-packets P0 findings (folded into same branch) Single PR covers both issues — they touch the same files (`public/packets.js`, `public/style.css`) and a split would invite merge thrash. ### #1415 — column priority + chrome compaction Locked column-priority tiers (operator spec): | Tier | Viewport | Columns | |---|---|---| | 1 | always (mobile through desktop) | expand · time · type · details | | 2 | tablet+ (>768px) | path | | 3 | desktop only (>1024px) | hash · observer · rpt | Enforced via existing `data-priority` system in `TableResponsive.apply` (priorities 3 → hide ≤1024, 5 → hide ≤768). CSS: - `.col-expand` pinned to `width/min-width/max-width: 32px` at every viewport — kills the 50–180px dead column that pushed every data column right. - `.col-details` capped at `max-width: 480px` so wide viewports stop wasting hundreds of px on the last column. - `@media (max-width: 480px)` hides page-header BYOP, shrinks the h2, and tightens row padding → pre-table chrome drops from ~280px to ~140px. ### #1458 — Tufte mobile P0 findings **P0-A: semantic-first detail panel.** Was: `"Packet Byte Breakdown (134 bytes)"` title + giant neon hex grid above the meaningful fields. Now: type badge + decoded summary + hop count + `src → dst` lead the panel, followed by the existing `.detail-meta` dl (reordered: Payload Type → Path → Timestamp → Observer). **P0-B: raw-bytes disclosure.** Hex legend / hex dump / field table wrapped in `<details class="detail-technical">`. Disclosure copy reads "Show raw bytes". Collapsed by default on phones (`window.innerWidth ≤ 480`), expanded on tablet+. **P0-C: mobile filter-zone collapse.** The always-on filter-expression input above `.filter-bar` is now wrapped with `.pkt-filter-expr` and hidden under the `@media (max-width: 480px)` block. Reveals when the existing "Filters ▾" toggle adds `.filters-expanded` to the sibling `.filter-bar` (CSS `:has()` selector — one tap reveals both chrome rows together). ### TDD `test-issue-1415-packets-layout.js` — pure source-grep, no browser: - col-expand class on first `<th>` + `<td>` + CSS 32px pin - locked column-priority tier values per column - `.col-details` max-width ≤ 480px - mobile @media block: hides BYOP, hides `.pkt-filter-expr` (revealed by `.filters-expanded`) - detail-meta order: Payload Type before Observer - `<details class="detail-technical">` wrapper exists with "Show raw bytes" summary - detail-title leads with a type badge; `.detail-srcdst` emitted - old "Packet Byte Breakdown (N bytes)" title literal removed Red commit `d4372d82` (8 assertion failures, no compile errors), green commit `4fab9dbd` (#1415 work), follow-up commit `a5218035` (#1458 work) keeps everything green. 26 assertions, 0 failed. --------- Co-authored-by: openclaw-bot <bot@openclaw>	2026-05-28 05:38:28 -07:00
5 people	52bb07d6c1	feat(#1056): fluid tables + +N hidden pill (packets/nodes/observers) (#1099) ... ## Summary Implements priority-based responsive column hiding for the three primary data tables (Packets, Nodes, Observers) per the parent task #1050 acceptance criteria, with a clickable **+N hidden** pill in the table header to reveal collapsed columns. ## Approach - New `TableResponsive` helper (defined once at the top of `packets.js`, exposed on `window`) classifies `<th data-priority="N">` cells: - `1` = always visible - `2` = hide when viewport ≤ 1280 - `3` = hide ≤ 1080 - `4` = hide ≤ 900 - `5` = hide ≤ 768 - Higher priority numbers drop first. The matching `<td>` cells in `tbody` are tagged via `.col-hidden` (colspan-aware mapping). - A `.col-hidden-pill` `<button>` is appended to the last visible `<th>`. Clicking it sets a per-table reveal flag and clears all hidden classes. Re-runs on `window.resize` (debounced) and a `ResizeObserver` on the wrapping element. - Each of `packets.js` / `nodes.js` / `observers.js` wraps its primary table in `.table-fluid-wrap` and calls `TableResponsive.register` after initial render. - `style.css` removes legacy `min-width: 720px / 480px` floors on the primary tables (which forced horizontal scroll) and lets columns flex via `table-layout: auto` with `.col-time` switched to `clamp(72px, 8vw, 108px)`. Per-column priorities chosen so identifier columns stay visible (Time/Hash/Type/Name/Status) while numeric/secondary columns collapse first. ## Files changed (matches Hard rules — only these) - `public/packets.js` (`#pktTable` + `TableResponsive` helper) - `public/nodes.js` (`#nodesTable`) - `public/observers.js` (`#obsTable`) - `public/style.css` (table sections only) - `test-table-fluid-e2e.js` (new E2E) ## E2E `BASE_URL=http://localhost:13581 node test-table-fluid-e2e.js` — covers all three tables at 768/1080/1440 viewports, asserting: - No horizontal table overflow within `.table-fluid-wrap` - Visible `+N hidden` pill at narrow widths with the count `N` matching the number of `th.col-hidden` cells - Clicking the pill clears all `.col-hidden` classifiers (reveals every column) ## Manual verification in openclaw browser (local fixture server) | Page | Viewport | Hidden | Pill | |-----------|---------:|-------:|--------------| | observers | 768 | 8 | `+8 hidden` | | packets | 768 | 7 | `+7 hidden` | | packets | 1080 | 4 | `+4 hidden` | | nodes | 768 | 3 | `+3 hidden` | | nodes | 1440 | 0 | (no pill) | Pill click verified to reveal all columns. ## TDD - Red commit: `5ad7573` — failing E2E (no `.col-hidden-pill` exists yet) - Green commit: `7780090` — implementation; test passes manually against fixture server. Fixes #1056 --------- Co-authored-by: openclaw-bot <bot@openclaw.dev> Co-authored-by: meshcore-bot <bot@meshcore.local> Co-authored-by: openclaw-bot <bot@openclaw.local> Co-authored-by: corescope-bot <bot@corescope.local>	2026-05-05 08:45:43 -07:00