# TASK.md — v0.13.0 UI Polish Fixes

**Version:** v0.13.0
**Type:** UI polish — 8 independent fixes
**Files likely affected:** `dashboard.html`, `backups.html`, `deploy.html`, `monitoring.html`, `style.css`, `handlers.go`, `alerts.go`

Read `CLAUDE.md`, `controller/README.md`, and `CONTEXT.md` before starting.

---

## Fix 1: Dashboard backup card missing border

**Problem:** The "Biztonsági mentés" card on the Vezérlőpult page has no visible border/box, unlike all other sections on the page (stats-grid, system-info-card, stack-list). It looks out of place.

**Solution:** The `.backup-status-card` in `dashboard.html` needs the same card styling as `.system-info-card` — a border, background, and border-radius consistent with the dark card style used throughout the UI.

**Where:**
- `style.css`: Check if `.backup-status-card` already has card-like styling. If not, add `border: 1px solid var(--border)`, `background: var(--card-bg)`, `border-radius: 12px`, `padding` — match whatever `.system-info-card` or `.monitor-card` uses.

---

## Fix 2: Show auto-generated env values on deploy page

**Problem:** When an app is already deployed, auto-generated values (Domain, DB password, etc.) only show a label + "✓ Automatikusan generálva" green badge. The actual values are hidden. Users need to see what was generated (e.g., to configure DNS, or to log into the app's DB).

**Solution:** Show the actual values in read-only fields. Passwords should be masked by default with a show/hide toggle (eye icon button), like the restic password on the backup page. Non-secret values (like Domain) should be shown in plain text.

**Where:**
- `deploy.html`: In the "Automatikusan generált értékek" section, replace the simple badge-only display with actual field values. For each auto field:
  - If the field type is `password` or the key contains `PASSWORD`/`SECRET`/`KEY`: render a read-only `<input type="password">` with a toggle-visibility button (eye icon). Use the same pattern as the restic password field in `backups.html` ("Megjelenítés" / "Elrejtés" toggle button).
  - Otherwise (domain, non-secret values): render a read-only `<input type="text">` showing the value, plus a "Másolás" (copy) button.
  - Keep the "✓ Automatikusan generálva" badge too, but next to the field, not replacing it.
- `handlers.go` (`deployHandler`): The auto field values need to be passed to the template. Currently `AutoFields` comes from `meta.AutoGeneratedFields()`. Check if the values are already populated from `app.yaml` for deployed apps. If not, read them from the stack's `.env` file or `app.yaml` `env_values` map. The values must be available in the template data.
- `style.css`: Add styling for the auto-field display (read-only input + button group), keeping it consistent with the rest of the deploy form.

**Important:** Only show values for already-deployed apps. For new deployments (not yet deployed), keep the current behavior (just show the badge, since values haven't been generated yet).

---

## Fix 3: Temperature value not visible enough on dashboard

**Problem:** The temperature display in the system info card blends into the heading text. The small colored dot + number isn't prominent enough.

**Solution:** Make the temperature more visually distinct:
- Increase the font size of the temperature value (make it match the other metric values like memory/CPU percentages)
- Add a background pill/badge around the temperature value with a subtle color matching the status (green/yellow/red background with low opacity)
- Keep the colored dot but make it slightly larger

**Where:**
- `dashboard.html`: The temperature is in the `.system-info-item` for "HŐMÉRSÉKLET". Ensure the value part (`{{fmtTemp ...}}°C`) has a dedicated class for styling.
- `style.css`: Add/modify the temperature display class. Consider a colored background pill like: `background: rgba(35,134,54,0.15); padding: 2px 8px; border-radius: 4px;` (with color varying by temp status). The dot should be ~10-12px instead of 8px.

---

## Fix 4: Rework dashboard backup section — remove button, show compact info + warnings

**Problem:** After the backup architecture overhaul, having a "Mentés most" button on the dashboard is unnecessary — backups run automatically on schedule. The dashboard should show a compact status summary with potential warnings, linking to the detailed backup page for settings and manual triggers.

**Solution:** Replace the current backup card content with a compact summary:
- **Status line:** "Utolsó mentés:" + timestamp (colored green if recent, yellow if >24h old, red if >48h or failed) — keep this
- **DB line:** "Adatbázisok:" + count — keep this
- **NEW — Tier 2 status line:** Show count of apps with Tier 2 configured vs total deployed apps. E.g., "2. mentés: 3 / 5 alkalmazás". If zero configured, show a yellow warning: "⚠ Nincs 2. mentés beállítva"
- **NEW — Warnings:** If any cross-drive backup has failed status, show a compact red warning line
- **Remove** the "Mentés most" button entirely
- **Remove** the "Tároló méret" line (that detail belongs on the backup page)
- The card title "Biztonsági mentés" should remain a clickable link to `/backups`

**Where:**
- `dashboard.html`: Modify the `.backup-status-card` content. Remove `triggerBackup()` JS function and the button. Add Tier 2 summary line.
- `handlers.go` (`dashboardHandler`): Add data for Tier 2 summary. You can derive this from the cross-drive configs: count apps with `Enabled: true` in their cross-drive settings, and count those with last status "ok" vs "error". Pass something like `CrossDriveTotal`, `CrossDriveConfigured`, `CrossDriveOK`, `CrossDriveFailed` to the template.
- `style.css`: Minor adjustments if needed for the warning line styling.

---

## Fix 5: HDD warning banner — only on Vezérlőpult and Rendszermonitor

**Problem:** The yellow "Az adattároló nem külön meghajtón van" warning banner appears on ALL pages via `layout.html`. This is overkill for pages like Alkalmazások or Beállítások, and it cannot be dismissed.

**Solution:** Show this specific warning only on the Vezérlőpult (dashboard) and Rendszermonitor (monitoring) pages, positioned under the system drive usage bar rather than at the very top.

**Implementation approach:**

The alert system already supports filtering via `GetAlerts(excludeIDs ...string)`. The disk/HDD-related warnings come from `report.Warnings` and get hashed IDs like `"health-XXXXXXXX"`.

1. In `alerts.go` `Refresh()`: Tag disk-related warnings with a stable, recognizable ID prefix. When generating alerts from `report.Warnings`, check if the warning text contains HDD/disk keywords (like "adattároló", "meghajtó", "nem külön meghajtón") and give those a stable ID like `"disk-not-separate"` instead of the hash-based `"health-XXXXXXXX"`.
2. Also add a `PageOnly []string` field to the `Alert` struct so the layout can conditionally render them.

**Recommended approach:** Add a `PageOnly []string` field to `Alert`. In `Refresh()`, set `PageOnly: []string{"dashboard", "monitoring"}` for disk warnings. In `layout.html`, wrap each alert render with a page check:

```html
{{range .Alerts}}
{{if or (not .PageOnly) (pageMatch .PageOnly $.Page)}}
<div class="alert-banner alert-banner-{{.Level}}">...</div>
{{end}}
{{end}}
```

Add a `pageMatch` template function in `funcmap.go` that checks if a string is in a slice. The `.Page` value is already set by `baseData()`.

**Where:**
- `alerts.go`: Add `PageOnly []string` to `Alert` struct. In `Refresh()`, set `PageOnly: []string{"dashboard", "monitoring"}` for disk-related warnings (detect by checking if the warning message contains "meghajtó" or "adattároló" keywords, or better: use a dedicated health-check category if available).
- `layout.html`: Add the `pageMatch` filter around alert rendering.
- `funcmap.go`: Add `"pageMatch"` template function.

---

## Fix 6: Move Tárhely section higher on Rendszermonitor page

**Problem:** The storage (Tárhely) section is the very last section on the monitoring page, below all CPU/memory/temperature charts. Storage is basic system info that should be visible without scrolling past graphs.

**Solution:** Move the Tárhely section to be right after "Rendszer áttekintés" — before "Távoli monitoring" and before all the charts.

**Where:**
- `monitoring.html`: Cut the entire `<!-- Section 5: Storage -->` block (the `.monitor-card` with `<h3>Tárhely</h3>`) and paste it right after the "Rendszer áttekintés" section (the first `.monitor-card`), before "Távoli monitoring".

---

## Fix 7: Snapshot table — show 0 instead of "-", add clarity to column headers

**Problem:** In the Pillanatképek table on the backup page, all detail columns (Méret, Új fájl, Változott) show "–" (dash) which reads as "not available" or "unknown". If there's genuinely no change, it should show `0`.

Also, "Méret" is ambiguous — is it total snapshot size or incremental size (data added)?

**Solution:**
- Rename column headers for clarity:
  - "MÉRET" → "HOZZÁADOTT" (data added by this snapshot), or keep "MÉRET" but add "(új adat)" subtitle
  - Add a tooltip or subtitle to make meaning clear
- Show `0` instead of `–` for zero values. Show `–` only when the data is truly unavailable (nil/missing from restic output).
- For "Új fájl" and "Változott": show `0` when the count is zero, not `–`.

**Where:**
- `backups.html`: Update the Pillanatképek table headers and cell rendering logic.
- Check the `Snapshot` struct in the backup package and how it's populated — the fields for size/files_new/files_changed may already exist but are zero-valued, or they may be genuinely absent from the restic output.
- If restic's `snapshots` command doesn't provide per-snapshot stats (it doesn't — you need `restic stats` or `restic diff`), document this limitation clearly. At minimum:
  - Change `–` to `0` for fields that have a zero value (not nil/missing)
  - Keep `–` only for genuinely unavailable data
  - Update column header for clarity

**Note on restic data:** `restic snapshots --json` returns hostname, paths, time, tags, tree hash — but NOT size/files stats. Getting per-snapshot size requires `restic stats <snapshot-id>` (expensive per snapshot). Consider:
- Running `restic stats latest` during the nightly backup and caching the result
- Or accepting that individual snapshot sizes aren't available and removing the misleading columns
- At minimum, make the display honest: if data isn't collected, show "n/a" with a tooltip explaining why, rather than `–`

---

## Fix 8: Tároló section — show all backup storage locations

**Problem:** The Tároló section at the bottom of the Biztonsági mentés page only shows a single restic repository path (`/srv/backups/restic-repo`). With the new tiered backup architecture, backups are saved to multiple locations:
- **Tier 1 (restic):** `/srv/backups/restic-repo` (SSD, local)
- **Tier 2 (cross-drive):** rsync/restic to secondary drive (e.g., `/mnt/hdd_1/backups/rsync/`)
- **DB dumps:** `/srv/backups/db-dumps/`

Also, `/srv/` is the Filebrowser root, not the actual host path. If showing the Filebrowser-accessible path, label it clearly.

**Solution:** Restructure the Tároló section into subsections per storage tier:

1. **1. mentés — Helyi mentés (restic):**
   - Path: the restic repo path (current display)
   - Size, snapshot count, integrity (current display)
   - Encryption key (current display)
   - Backed-up paths list (current display)

2. **2. mentés — Másodlagos másolat:** (only shown if any app has Tier 2 configured)
   - Destination path(s) — from cross-drive configs (may be multiple if different apps target different drives)
   - Method per destination (rsync or restic)
   - Total size per destination (if calculable via `du -sh`)

3. **Adatbázis mentések:**
   - Path: DB dump directory
   - File count and total size from `DumpFiles` data already available in the handler

4. **Mentett útvonalak:** Keep the current list but restructure:
   - Group by what's in Tier 1 (restic paths) vs what's additionally in Tier 2
   - Make it clear these are the source paths being backed up, not the backup destinations

**Where:**
- `backups.html`: Restructure the `.repo-card` section. Split into subsections with clear tier headings. Keep the restic key/password display under Tier 1.
- `handlers.go` (`backupsHandler`): Pass additional template data:
  - Cross-drive destination paths and their stats (from `CrossDriveSummary` which is already computed)
  - DB dump directory path and stats (path is in `cfg.Paths.DBDumpDir`, file count/size from `DumpFiles`)
  - Deduplicated list of Tier 2 destinations across all apps

---

## Implementation order (suggested)

These fixes are independent. Suggested grouping by complexity:

**Quick (template/CSS only):**
1. Fix 1 — backup card border
2. Fix 3 — temperature visibility
3. Fix 6 — move Tárhely section

**Medium (template + minor handler):**
4. Fix 7 — snapshot table display
5. Fix 5 — warning banner scope

**Larger (template + handler logic):**
6. Fix 2 — show auto-generated env values
7. Fix 4 — dashboard backup section rework
8. Fix 8 — Tároló section restructure

## Build & deploy

After all fixes, bump version to **v0.13.0**, then follow the standard build workflow in `CLAUDE.md`:
1. `git add -A && git commit && git push`
2. Build on 192.168.0.180
3. Deploy on 192.168.0.162
4. Verify

Update `CHANGELOG.md`, `CONTEXT.md`, and `controller/README.md` at the end.