deploy-felhom-compose/TASK.md

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:

{{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.