manage/.pi-tmp/slice4-worker-out.md

Slice 4 — FileBrowser table mobile layout (worker output)

Files changed

File	Status	Lines
frontend/src/pages/FileBrowser.impl.tsx	modified	+40 / -2
frontend/src/pages/__tests__/FileBrowser.test.tsx	modified	+78 / -2

Total: ~114 changed lines (118 insertions, 4 deletions). Well under the 400-line budget.

What was implemented

4.1 — Mobile fields + card render

Below md (isMobile === true), the file table renders as <MobileCardRow> cards inside the existing <div className="rounded-lg border bg-card"> wrapper (with p-4 padding, matching the Media pattern). Desktop renders the existing <DataTable> byte-for-byte identical.

Mobile card field list (module-level fileCardFields constant):

Field	Key	Rationale
Name (primary)	name	Primary identifier — file or directory name
Type	type	"dir" / "file" / "up" — distinguishes the row kind at a glance
Size	size	Already human-readable via formatSize; "-" for dirs
Modified	modified	Already formatted via formatTime; "-" when empty

4 fields total (1 primary + 3). The ext column was omitted because the extension is already visible in the filename itself — redundant on mobile.

Preserved behaviors:

• Whole-card tap = handleRowClick(row) — the same handler the desktop DataTable uses. Dir/up rows navigate into the directory; file rows select the file for ffprobe preview.
• Directory navigation works on mobile — tapping a folder card navigates into it (status caption updates to show the new cwd).
• Path bar / breadcrumbs (Remote path input + Open/Refresh buttons) render outside the table in the SectionCard, so they are unaffected by the isMobile branch. The existing flex flex-col gap-2 md:flex-row already stacks them on mobile.
• ffprobe and Jobs sections live outside the table and are unchanged.
• No pagination — FileBrowser does not paginate (the task confirmed this).
• Desktop (md+) — byte-for-byte identical: the isMobile === false branch renders the exact same <DataTable> with the same props.

4.2 — Tests

Added a setMatchMedia(matches) helper (mirrors the Media.test.tsx pattern) and called setMatchMedia(false) in beforeEach so the 3 existing desktop tests pass unchanged. Added 4 new tests in a describe("FileBrowser (mobile card layout — slice 4)") block:

1. Cards render with file/dir name as primary below md — asserts card titles render ("movies", "video.mkv", "notes.txt") and no table column headers leak.
2. Tapping a directory card navigates into it — clicks "movies", asserts status shows "Current: /movies" with no "Selected:" segment.
3. Path/breadcrumb controls still render on mobile — asserts "Remote path" input, Open and Refresh buttons are present.
4. DataTable renders at desktop width — asserts column headers (Type/Name/Ext/Size/Modified) present at desktop width.

Validation

npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx, unrelated)
npm run build  → ✓ built (tsc -b + vite)
npm run test   → 25 files / 98 tests passed (was 94; +4 new)

Deviations from design

1. ext field omitted from mobile card. The task said "Fields (3-5): size, modified time, and type/extension (file vs directory)." I interpreted "type/extension" as a single concept (dir vs file vs up) and used the type field to cover it. The ext column is redundant because the filename already contains the extension (e.g. "video.mkv"). Including it would waste card space. This is a per-table field choice, which the design explicitly delegates to the consuming page (§trade-offs).

2. No deviations from the established Media.tsx pattern. Module-level MobileCardField<DisplayRow>[] constant, isMobile from useIsMobile(), getRowId wired to row.id, onRowClick wired to the existing handleRowClick. Same p-4 wrapper inside the bordered container.

skill_resolution

none — no project/user SKILL.md paths were injected by the parent, and no .atl/skill-registry.md was found. The task was self-contained against the OpenSpec design/tasks docs and the Media.tsx reference pattern.

Residual risks

• enableRowSelection on mobile. The mobile card has no selection checkbox — the whole card is the tap target for navigation/selection via handleRowClick. This matches R3.3's "tap target = the whole card where applicable" and the FileBrowser's existing behavior where clicking a file row selects it. The checkbox-based selection is desktop-only, consistent with the Media slice.
• The ".." (up) row renders as a card with name "..", type "up", size "-", modified "-". This is the universal convention for "go to parent directory" and is tappable. Functionally correct.

Review findings

No blockers identified during self-review. All validation commands green. No staged files.