# Slice 7 — Frontend: backups Jobs tab (worker output)

## Files changed

| File | Status | Lines |
|------|--------|-------|
| `frontend/src/pages/service-tabs/JobsTab.tsx` | new | 87 |
| `frontend/src/pages/service-tabs/__tests__/JobsTab.test.tsx` | new | 64 |
| `frontend/src/pages/service-tabs/index.ts` | modified | +2/-1 (import JobsTab from new file, remove from stubs import) |
| `frontend/src/pages/service-tabs/stubs.tsx` | modified | -4 (removed JobsTab stub) |

**Total: ~155 changed lines** (151 new files + 6 modified diff). Well under the 400-line budget.

## What was implemented

### 7.1 — JobsTab

New file `frontend/src/pages/service-tabs/JobsTab.tsx`:

- Accepts `{ instance }: { instance: ServiceInstance }` props.
- Lifts the operational content from `components/BackupsPage.tsx`: the Jobs / Runs / Alerts tab structure with the three sub-tables (BackupJobsTable, BackupRunsTable, BackupAlertsTable).
- The page heading ("Backups") is dropped since the service page header already renders the instance name + binding name.
- All hooks (useBackupJobs, useBackupRuns, useBackupAlerts, useAcknowledgeAlert) are called exactly as in BackupsPage — **globally** (no service_id filtering). The `instance` prop is accepted but currently only referenced via `void instance` since per-instance scoping requires hook changes that are out of scope for this slice.

### 7.2 — Tests + cleanup

- New test file `JobsTab.test.tsx`: 2 tests covering sub-tab presence (Jobs, Runs, Alerts via regex match since the label includes the count) and job-name rendering with mocked hooks.
- Removed `JobsTabStub` from `stubs.tsx`.
- `index.ts` updated to import the real `JobsTab` from `./JobsobsTab` instead of the stub.
- `BackupsPage.tsx` and its tests are left intact (Slice 11 cleanup).

## Hooks: instance-scoped or global?

**Global.** The backup hooks (`useBackupJobs`, `useBackupRuns`, `useBackupAlerts`) query without a service_id filter. The backend gained `service_id` attribution in Slice 3 (column on `backup_jobs`, `?service_id=` param on report endpoints), but the hooks don't yet accept a serviceId parameter. This tab shows ALL backups data for now. Per-instance scoping by `instance.id` is a documented follow-up (the `void instance` reference and the file docstring both call this out).

## Validation

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

## Deviations from design

1. **Hooks not scoped by instance.id.** The design said "scope queries by `instance.id`" but the hooks (`useBackups.ts`) don't accept a serviceId param. Rewriting the hooks is out of scope for this slice (would touch `api/backups.ts`, `hooks/useBackups.ts`, and the widget source). A comment in the file docstring documents this as a follow-up.

2. **Page heading dropped.** BackupsPage.tsx rendered `<h1>Backups</h1>`. The service page header already renders the instance name + "Backups" binding name, so the heading is redundant. The rest of the content (tabs, tables, loading states) is identical.

## 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 reference files.

## Residual risks

- **Hooks query globally.** The JobsTab shows all backup data across all instances. When the hooks gain a serviceId param, this tab should be updated to pass `instance.id`.
- **Old BackupsPage.tsx still in repo.** Deleted in Slice 11 cleanup. Its tests still pass (render the component directly, not via routing).

```acceptance-report
{
  "criteriaSatisfied": [
    {
      "id": "criterion-1",
      "status": "satisfied",
      "evidence": "Slice 7 implements JobsTab (lift from BackupsPage.tsx, global hooks with documented follow-up for instance scoping), wires it in index.ts, removes the stub, and adds 2 tests. No scope widening: only 4 files touched (2 new + 2 modified). Old BackupsPage.tsx preserved for Slice 11. 96 tests pass; lint/build green."
    }
  ],
  "changedFiles": [
    "frontend/src/pages/service-tabs/JobsTab.tsx",
    "frontend/src/pages/service-tabs/__tests__/JobsTab.test.tsx",
    "frontend/src/pages/service-tabs/index.ts",
    "frontend/src/pages/service-tabs/stubs.tsx"
  ],
  "testsAddedOrUpdated": [
    "frontend/src/pages/service-tabs/__tests__/JobsTab.test.tsx"
  ],
  "commandsRun": [
    {
      "command": "cd frontend && npm run lint",
      "result": "passed",
      "summary": "0 errors; 2 pre-existing 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": "30 files / 96 tests passed (was 94; +2 new)"
    },
    {
      "command": "git diff --cached --stat",
      "result": "passed",
      "summary": "Empty — no staged files"
    }
  ],
  "validationOutput": [
    "lint: 0 errors",
    "build: success (tsc + vite)",
    "test: 96/96 passed (+2 new JobsTab tests)",
    "no staged files"
  ],
  "residualRisks": [
    "Backup hooks query globally (no service_id filter); per-instance scoping by instance.id is a documented follow-up once the hooks gain the parameter.",
    "Old BackupsPage.tsx still in repo (Slice 11 cleanup); its tests still pass."
  ],
  "noStagedFiles": true,
  "diffSummary": "~155 lines: JobsTab.tsx (87, lift from BackupsPage.tsx with instance prop + global hooks), JobsTab.test.tsx (64, 2 tests with mocked hooks), index.ts wiring (+1/-1), stubs.tsx cleanup (-4). Well under 400-line budget.",
  "reviewFindings": [
    "no blockers"
  ],
  "manualNotes": "git status confirms nothing is staged; all changes are unstaged/untracked, ready for the parent to review and commit."
}
```