/system reads like btop: per-core history, memory, disk, network and a process table grouped by forge, check, crew and app #2786

/system now reads like btop. I did not capture the before/after looks (desktop and 360px) the issue asks for, because the sandbox has no browser. tsc is clean and the tests I ran pass: system, design, cgroup and TUI, 431 pass and 3 skip. I did not run the full suite.

What it shows now

• CPU: each core has a <meter> bar and its last 30 readings as block characters (▁▂▃…). system/live.ts keeps the history. Memory, swap and load get their own rows, and temperatures are listed under the CPU.
• Disk and network: disk use per mount as meters, plus disk and network rates. Disk rates come from a new /proc/diskstats read that keeps whole block devices only.
• Process table: a <table> grouped forge → check → crew → app → host. Each group has a header row with totals, then its top 8 processes (up from 5), each with pid, command, CPU, memory and age.
• Sorting: press c for CPU or m for memory, or use the two buttons. The sort is done in the browser and is re-applied after every pushed sample, so the stream doesn't undo it. It still works under ?pause.
• Layout: monospace, DESIGN.md tokens only, and the grids collapse to one column at 360px. The process table scrolls sideways if it's too wide.

Tests

• test/system-btop.test.ts seeds one sample with forge, check, crew and app roots and asserts each group, in that order, plus the meters, memory, swap, load, disk and network rates, and the history cap.
• I changed one old assertion in test/system-telemetry.test.ts. It said the page has no <table and uses <li data-kind> rows, which the process table now contradicts. It now checks for <tbody data-kind="check" and that no element carries a style= attribute.
• The new .bt-* and .table-wrap classes are named in docs/DESIGN.md §5d, as the design lint requires. The README line for /system is updated.

Left out

• Crew group: nothing launches a cell labelled crew:<name> yet, so on a real machine that group stays empty until a run is labelled that way. Crew processes currently fall under "forge" or "host". The group appears as soon as something supplies a crew: label.
• Sort tests: the sort logic lives in the browser JS and only has a string-presence test.
• Sort order and temperatures: the sort order is not remembered across reloads. Temperatures are one text line, not per-core.

To try it Sign in as the owner and open /system. Press c or m to re-sort the process table.

Closes #2721

/system now reads like btop. I did not capture the before/after looks (desktop and 360px) the issue asks for, because the sandbox has no browser. tsc is clean and the tests I ran pass: system, design, cgroup and TUI, 431 pass and 3 skip. I did not run the full suite.

What it shows now

• CPU: each core has a <meter> bar and its last 30 readings as block characters (▁▂▃…). system/live.ts keeps the history. Memory, swap and load get their own rows, and temperatures are listed under the CPU.
• Disk and network: disk use per mount as meters, plus disk and network rates. Disk rates come from a new /proc/diskstats read that keeps whole block devices only.
• Process table: a <table> grouped forge → check → crew → app → host. Each group has a header row with totals, then its top 8 processes (up from 5), each with pid, command, CPU, memory and age.
• Sorting: press c for CPU or m for memory, or use the two buttons. The sort is done in the browser and is re-applied after every pushed sample, so the stream doesn't undo it. It still works under ?pause.
• Layout: monospace, DESIGN.md tokens only, and the grids collapse to one column at 360px. The process table scrolls sideways if it's too wide.

Tests

• test/system-btop.test.ts seeds one sample with forge, check, crew and app roots and asserts each group, in that order, plus the meters, memory, swap, load, disk and network rates, and the history cap.
• I changed one old assertion in test/system-telemetry.test.ts. It said the page has no <table and uses <li data-kind> rows, which the process table now contradicts. It now checks for <tbody data-kind="check" and that no element carries a style= attribute.
• The new .bt-* and .table-wrap classes are named in docs/DESIGN.md §5d, as the design lint requires. The README line for /system is updated.

Left out

• Crew group: nothing launches a cell labelled crew:<name> yet, so on a real machine that group stays empty until a run is labelled that way. Crew processes currently fall under "forge" or "host". The group appears as soon as something supplies a crew: label.
• Sort tests: the sort logic lives in the browser JS and only has a string-presence test.
• Sort order and temperatures: the sort order is not remembered across reloads. Temperatures are one text line, not per-core.

To try it Sign in as the owner and open /system. Press c or m to re-sort the process table.

I pushed fixes for all six points. The 360px screenshot (point 6) is the exception: I have no browser here, so the pull still has no before/after looks. tsc is clean, and the system, design and TUI tests pass (424).

1. Terminal. systemLines in src/tui/screens/system.ts now prints:

- the first 8 cores, each with a percentage and a block-character history, plus "… and N more cores"; - swap; - disk and network rates; - each group's top two processes.

The dialog is read-only, so it has no sort. The README says that, and test/system-btop.test.ts covers it.

1. Meters. Every <meter> has aria-label="${name} ${figure}", so a screen reader hears "cpu0 37%". The name span also has a title.
2. Sort controls.

- They sit in a .js-only span, so without a script they are hidden and the server's CPU order stays. - The c and m keys are ignored when focus is on a button or link, except the sort buttons themselves.

1. Crew. I left it out and opened #2793 to track it. Crew runs launch through src/crew/sandbox.ts (bwrap), not apps/contain.ts, so nothing can label a cell crew:<name> without wiring that launcher. I removed the crew kind from the view, the page, the README and the tests. The groups are now forge / check / app / host.
2. Tests.

- The ordering is now a pure rank() function in procSortJs, and the test runs that real code. It checks kind order, descending by CPU or memory, stable ties, and no mutation of the input. - Two more tests cover the hotkey guard (a string check on the script) and the meter aria-label and js-only markup. - Wrong assertion: the not.toContain("<table") check was added in #2691 for a page with no process table. This issue asks for one, so that check was wrong. I replaced it with <tbody data-kind="check" plus a check that no element carries a style= attribute. I did not keep a narrower no-table guard, because there is no table left for it to protect.

1. 360px layout.

- The name column is now 10ch instead of 6ch, so /data/apps fits, and longer names get an ellipsis with the full name in title. - I can't confirm it visually, so please check the preview at 360px, in particular the disk rows, which have the longest figures.