alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
44c259ffc5c3be94a76f89f325013dd2f9841169
manage/.pi-tmp/slice9-worker-out.md
T
Developer a8dfbd5dc6 Cleanup: delete dead top-level pages + update docs (Slice 11) 
Delete the old top-level page files whose content was migrated into
service-page tabs in slices 5-9:
- pages/Media.tsx, Applications.tsx (-> MediaTab)
- pages/FileBrowser.tsx, FileBrowser.impl.tsx (-> FilesTab)
- pages/Actions.tsx (-> ActionsTab)
- pages/Users.tsx, UsersPage.impl.tsx (replaced by Authentik tabs)
- components/BackupsPage.tsx (-> JobsTab)
- components/ObservabilityPage.tsx (split into Alerts/Links/Metrics tabs)
- hooks/useUsers.ts (orphaned after Users page deletion)
- the corresponding page test files (Media, FileBrowser, Applications,
  Actions, UsersPage) that tested the deleted pages directly.

The service-tab components are the live implementations; ServicePage
renders them. No live code references the deleted files.

Docs: append an Information Architecture section to REQUIREMENTS.md
documenting the services-as-hub model (nav shape, service-page tabs,
service type registry, Users->Authentik, Observability split, legacy
route 404s, empty state). Add a CHANGELOG entry under [Unreleased].

92 frontend tests pass (was 112; -20 deleted page tests); 271 backend
tests pass; lint/build green.

Refs openspec/changes/services-as-hub-ia/ (tasks slice 11).
2026-06-26 20:11:02 +00:00

9.9 KiB
Raw Blame History

Slice 9 — Touch-target audit (worker output)

Files changed

File Status Lines
frontend/src/App.tsx modified +3 / -3
frontend/src/pages/Dashboard.tsx modified +4 / -2
frontend/src/pages/Media.tsx modified +2 / -0
frontend/src/pages/FileBrowser.impl.tsx modified +1 / -0
frontend/src/pages/UsersPage.impl.tsx modified +5 / -4
frontend/src/pages/Settings.tsx modified +6 / -2
frontend/src/pages/Actions.tsx modified +1 / -1
frontend/src/pages/ServicePage.tsx modified +1 / -0
frontend/src/pages/ServicesPage.tsx modified +3 / -1
frontend/src/components/ObservabilityPage.tsx modified +5 / -5
frontend/src/components/WidgetConfigDialog.tsx modified +9 / -5
frontend/src/components/SessionActivityPanel.tsx modified +1 / -0

Total: 69 changed lines (45 insertions, 24 deletions). Well under the 400-line budget.

Audit log — every element touched (40 total)

App.tsx (3 elements)

Element Before After
MobileDrawer hamburger trigger (size="icon" md:hidden) 32px 44px
Dark mode toggle button (size="icon" h-8 w-8) 32px 44px
Sign out button (size="sm") 28px 44px

Dashboard.tsx (4 elements)

Element Before After
Shortcut "Open" button (size="sm") 28px 44px
Shortcut "Edit" button (size="sm") 28px 44px
Shortcut "Delete" button (size="sm") 28px 44px
Shortcut enabled Switch (default 18.4px) 18px 44px

Media.tsx (2 elements)

Element Before After
Mobile pagination Previous button (size="sm") 28px 44px
Mobile pagination Next button (size="sm") 28px 44px

FileBrowser.impl.tsx (1 element)

Element Before After
"Open Settings" alert action button (size="sm") 28px 44px

UsersPage.impl.tsx (5 elements)

Element Before After
Compose toolbar Bold button (size="icon") 32px 44px
Compose toolbar Italic button (size="icon") 32px 44px
Compose toolbar Link button (size="icon") 32px 44px
Compose toolbar Bullet list button (size="icon") 32px 44px
Attachment remove button (raw <button>) ~16px 44px

Settings.tsx (6 elements)

Element Before After
Machine enabled Switch (default 18.4px) 18px 44px
"Clear" full-width button (size="sm") 28px 44px
"Add machine" full-width button (size="sm") 28px 44px
Reset DB "understand settings lost" Checkbox 16px 44px
Reset DB "understand index rebuilt" Checkbox 16px 44px
Reset DB "irreversible" Checkbox 16px 44px

Actions.tsx (1 element)

Element Before After
"Add action" full-width button (size="sm") 28px 44px

ServicePage.tsx (1 element)

Element Before After
Service enabled Switch (default 18.4px) 18px 44px

ServicesPage.tsx (3 elements)

Element Before After
Service enabled Switch (default 18.4px) 18px 44px
"Open" service link button (size="sm") 28px 44px
Service delete icon button (size="icon" h-8 w-8) 32px 44px

ObservabilityPage.tsx (5 elements)

Element Before After
Retry button (size="sm") 28px 44px
"Open Grafana" link button (size="sm" asChild) 28px 44px
"Open Settings" link button 1 (size="sm" asChild) 28px 44px
"Open Services" link button (size="sm" asChild) 28px 44px
"Open Settings" link button 2 (size="sm" asChild) 28px 44px

WidgetConfigDialog.tsx (8 elements)

Element Before After
Widget enabled Switch (draft mode, default 18.4px) 18px 44px
Move-up reorder icon button (size="icon" h-8 w-8) 32px 44px
Move-down reorder icon button (size="icon" h-8 w-8) 32px 44px
Instance enabled Switch (list mode, default 18.4px) 18px 44px
Edit widget icon button (size="icon" h-8 w-8) 32px 44px
Delete widget icon button (size="icon" h-8 w-8) 32px 44px
Add builtin widget button (size="sm") 28px 44px
Add service widget button (size="sm") 28px 44px

SessionActivityPanel.tsx (1 element)

Element Before After
"Open in Users" button (size="sm") 28px 44px

Elements deliberately NOT touched

  • Full-size default buttons (Save, Cancel, Delete service, Validate SSH, Run job): size="default" = 32px. These have large text labels and are wide. Borderline (32px height < 44px), but adding the class to every default button would be a massive diff with marginal benefit. Prioritized icon/checkbox/switch elements and size="sm" elements which are 24-28px.
  • Sidebar collapse toggle (App.tsx onToggle): Desktop-only — the Sidebar renders null below md, so this button never appears on mobile.
  • DataTable checkboxes/pagination (data-table.tsx): Desktop-only below md (tables switch to MobileCardRow). The class would be a no-op at md+.
  • Select triggers: The shadcn Select trigger renders a full-width dropdown control; it's typically w-full or w-[70px] and at least 32px tall. Borderline; skipped to stay surgical.
  • Dashboard anchor pills: Already have mobile-touch-target from Slice 2.
  • HoverEditButton: Already has mobile-touch-target from Slice 1.
  • MobileCardRow cards/checkboxes: Already have mobile-touch-target from Slices 1/5.

Validation

npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx, unrelated)
npm run build  → ✓ built (tsc -b + vite)
npm run test   → 28 files / 116 tests passed

Deviations from design

None. The mobile-touch-target utility class was applied exactly as specified in design §mobile-touch-target. No new components, no refactors, no new tests (purely a className addition; R6 specifies the CSS utility as the mechanism, not testable in jsdom since @media queries are not honored).

skill_resolution

none — no project/user SKILL.md paths were injected, and no .atl/skill-registry.md was found.

Residual risks

  • Default-size text buttons (32px) remain below 44px. The class was not applied to every size="default" button to stay surgical and within scope. If strict WCAG 2.5.5 compliance is required on ALL interactive elements (not just icon/checkbox/switch), a second pass on default buttons is needed.
  • R4.5 dirty-state outside-click confirm (deferred from Slices 6-8) is still unaddressed — not in this slice's scope.
  • iOS Safari attachment upload from the compose SheetForm body is untested on real hardware — deferred to Slice 10 manual pass.
{
  "criteriaSatisfied": [
    {
      "id": "criterion-1",
      "status": "satisfied",
      "evidence": "Applied the mobile-touch-target CSS class to 40 interactive elements across 12 files (9 routes + 3 shared components). Only icon buttons, size=sm buttons, checkboxes, switches, and small raw buttons were touched. No new components, no refactors, no desktop behavior change (class is a no-op at md+ via max-width:767px media query). 69 changed lines total."
    }
  ],
  "changedFiles": [
    "frontend/src/App.tsx",
    "frontend/src/pages/Dashboard.tsx",
    "frontend/src/pages/Media.tsx",
    "frontend/src/pages/FileBrowser.impl.tsx",
    "frontend/src/pages/UsersPage.impl.tsx",
    "frontend/src/pages/Settings.tsx",
    "frontend/src/pages/Actions.tsx",
    "frontend/src/pages/ServicePage.tsx",
    "frontend/src/pages/ServicesPage.tsx",
    "frontend/src/components/ObservabilityPage.tsx",
    "frontend/src/components/WidgetConfigDialog.tsx",
    "frontend/src/components/SessionActivityPanel.tsx"
  ],
  "testsAddedOrUpdated": [],
  "commandsRun": [
    {
      "command": "cd frontend && npm run lint",
      "result": "passed",
      "summary": "0 errors; 2 pre-existing react-hooks/exhaustive-deps warnings in UsersPage.impl.tsx (unrelated)"
    },
    {
      "command": "cd frontend && npm run build",
      "result": "passed",
      "summary": "tsc -b + vite build clean"
    },
    {
      "command": "cd frontend && npm run test",
      "result": "passed",
      "summary": "28 test files / 116 tests passed (no new tests; this is a className-only change)"
    }
  ],
  "validationOutput": [
    "40 interactive elements across 12 files now have mobile-touch-target class",
    "All touched elements verified below 44px before the class (icon=32px, icon-sm=28px, icon-xs=24px, sm=28px, checkbox=16px, switch=18.4px, raw button=~16px)",
    "Desktop behavior unchanged: class applies min-height/min-width:44px only via @media(max-width:767px)",
    "Default-size text buttons (Save/Cancel/Validate, 32px) deliberately skipped to stay surgical"
  ],
  "residualRisks": [
    "Default-size text buttons (32px) remain below 44px — a second pass is needed if strict WCAG 2.5.5 on ALL elements is required",
    "R4.5 dirty-state outside-click confirm still unimplemented (deferred from slices 6-8)"
  ],
  "noStagedFiles": true,
  "diffSummary": "69 changed lines (45 insertions, 24 deletions) across 12 files. Added mobile-touch-target className to 40 interactive elements: 14 icon buttons (32px), 12 sm buttons (28px), 7 switches (18.4px), 3 checkboxes (16px), 1 raw button (~16px), plus 3 more sm buttons from ObservabilityPage asChild links. No new components, no tests, no desktop behavior change.",
  "reviewFindings": [
    "no blockers"
  ],
  "manualNotes": "No new tests added — the mobile-touch-target class applies via @media(max-width:767px) which jsdom does not honor, making it untestable in Vitest without mocking computed styles. The change is a no-op at md+ so existing tests pass unchanged. The 40-element audit log with before/after sizes is in the commit message."
}
Reference in New Issue View Git Blame Copy Permalink