shcizo/package-updater
1
0
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: master UI enligt Ledger-designen (Services och Agents) #18

New Issue
Closed
opened 2026-10-12 13:24:40 +00:00 by shcizo · 0 comments
shcizo commented 2026-10-12 13:24:40 +00:00
Owner
Copy Link
Copy Source

Beskrivning

Master-UI:t från fas 1 (#6) byggdes efter planens minimala templates, inte efter designen. Den här issuen bygger om sidorna Services (overview) och Agents enligt designen "Ledger" i Claude Design:

https://claude.ai/artifact/8ARU9MzvDVxWC3VPmdgix8 — artboards Ledger — Services (Main) och Ledger — Agents.

Översikten är det man tittar på dagligen, och designen visar saker som dagens UI saknar, framför allt att en maskins agent är offline.

Design

Fas 1-delarna av designen:

  • Skal: sidomeny med varumärke, navigering (Services, Agents med antal online/totalt) och en "Live"-indikator som visar tid sedan senaste SSE-event. Mörkt och ljust tema (tokens på .app och .app.t-light, som i designen). Mobillayout under 760 px, som i designen.
  • Services:
    • Grupper per maskin. Swarm grupperas per kluster med managers under, som i designens maskinlista. Det ersätter dagens enda "Swarm"-grupp, som står som en avvikelse i fas 1-planen.
    • Varje rad visar namn, stack, image/tag/digest (förkortad, med full referens i title) och status.
    • Grupper vars agent är offline visar "Agent offline since HH:MM · showing last known state".
    • Sökfält och "Machines"-filter i sidomenyn.
    • Växel mellan Icon / Icon + text / Text.
  • Agents:
    • Lista med namn, hostname, online/offline, agentversion, Swarm-roll och last seen.
    • Revoke med en bekräftelseruta i popover i stället för confirm().
    • "Add agent" som en panel i tre steg: Name → Deploy (snippet, token och master key med Copy-knappar, varning om att token bara visas en gång) → Connect ("Waiting for …", som blir klar när agenten skickar sin hello, via SSE-topic agents).

Tekniska noteringar

  • Nuvarande kod finns i internal/master/web/:
    • Templates: templates/layout.html, overview.html, agents.html, agent_created.html.
    • CSS: static/app.css.
    • Grupperingen görs i views.go (groupServices).
    • Handlers ligger i server.go.
    • htmx 2.0.4 och htmx-ext-sse 2.2.2 finns redan i static/ och bäddas in med go:embed.
  • Fonterna Schibsted Grotesk och JetBrains Mono bäddas in som woff2 i static/, inte via Google Fonts. sha256 skrivs i commit-meddelandet, som för htmx. Båda har OFL-licens, och licensfilerna ska med.
  • Snippeten följer koden, inte designen. Designens mock använder AGENT_NAME, MASTER_KEY_FINGERPRINT och imagen package-updater-agent. Koden läser MASTER_URL, MASTER_KEY och AGENT_TOKEN, och agenten körs från imagen package-updater med updater-agent som entrypoint (se agentSnippet i server.go och internal/agent/config).
  • Data som behövs:
    • Online/offline per agent: hub.Online finns redan.
    • "Offline since": agents.last_seen_at finns redan.
    • Gruppering per kluster: services.swarm_cluster_id finns redan.
    • Live-indikatorn räknas ut i klienten från senaste SSE-event.
  • Ändras inte:
    • CSRF-token på alla POST.
    • Cache-Control: no-store på svaret med token.
    • 401 och HX-Redirect för htmx-anrop och EventSource utan session (webauth.Require).
    • Inget template.HTML på värden som användare eller agenter styr.
  • Behåll htmx med SSE som "refetch"-signal och server-renderade fragment. Inget byggsteg med Node.

Scope

Ingår: sidorna Services och Agents enligt ovan, tema, mobillayout, inbäddade fonter, gruppering per kluster, offline-markering.

Ingår inte, eftersom data saknas i fas 1:

  • Jobs-länk och Jobs-sida (fas 2).
  • Service detail (fas 2/4).
  • Badges för update, drift och follows-no-tag, statistiken i rubriken, mode-toggle, Update och "Update all", och telefonvyn "Confirm update". Allt detta hör till fas 2–5.

Klart när: sidorna matchar designens artboards för de delar som ingår. Det verifieras i webbläsare i båda teman, på desktop och vid 390 px bredd. Samtidigt ska go test ./... och testerna i web-paketet passera.

## Beskrivning Master-UI:t från fas 1 (#6) byggdes efter planens minimala templates, inte efter designen. Den här issuen bygger om sidorna **Services** (overview) och **Agents** enligt designen "Ledger" i Claude Design: https://claude.ai/artifact/8ARU9MzvDVxWC3VPmdgix8 — artboards `Ledger — Services` (Main) och `Ledger — Agents`. Översikten är det man tittar på dagligen, och designen visar saker som dagens UI saknar, framför allt att en maskins agent är offline. ## Design Fas 1-delarna av designen: - **Skal:** sidomeny med varumärke, navigering (Services, Agents med antal online/totalt) och en "Live"-indikator som visar tid sedan senaste SSE-event. Mörkt och ljust tema (tokens på `.app` och `.app.t-light`, som i designen). Mobillayout under 760 px, som i designen. - **Services:** - Grupper per maskin. Swarm grupperas **per kluster** med managers under, som i designens maskinlista. Det ersätter dagens enda "Swarm"-grupp, som står som en avvikelse i fas 1-planen. - Varje rad visar namn, stack, image/tag/digest (förkortad, med full referens i `title`) och status. - Grupper vars agent är offline visar "Agent offline since HH:MM · showing last known state". - Sökfält och "Machines"-filter i sidomenyn. - Växel mellan Icon / Icon + text / Text. - **Agents:** - Lista med namn, hostname, online/offline, agentversion, Swarm-roll och last seen. - Revoke med en bekräftelseruta i popover i stället för `confirm()`. - "Add agent" som en panel i tre steg: Name → Deploy (snippet, token och master key med Copy-knappar, varning om att token bara visas en gång) → Connect ("Waiting for <name>…", som blir klar när agenten skickar sin hello, via SSE-topic `agents`). ## Tekniska noteringar - Nuvarande kod finns i `internal/master/web/`: - Templates: `templates/layout.html`, `overview.html`, `agents.html`, `agent_created.html`. - CSS: `static/app.css`. - Grupperingen görs i `views.go` (`groupServices`). - Handlers ligger i `server.go`. - htmx 2.0.4 och htmx-ext-sse 2.2.2 finns redan i `static/` och bäddas in med `go:embed`. - **Fonterna Schibsted Grotesk och JetBrains Mono bäddas in som woff2 i `static/`**, inte via Google Fonts. sha256 skrivs i commit-meddelandet, som för htmx. Båda har OFL-licens, och licensfilerna ska med. - **Snippeten följer koden, inte designen.** Designens mock använder `AGENT_NAME`, `MASTER_KEY_FINGERPRINT` och imagen `package-updater-agent`. Koden läser `MASTER_URL`, `MASTER_KEY` och `AGENT_TOKEN`, och agenten körs från imagen `package-updater` med `updater-agent` som entrypoint (se `agentSnippet` i `server.go` och `internal/agent/config`). - **Data som behövs:** - Online/offline per agent: `hub.Online` finns redan. - "Offline since": `agents.last_seen_at` finns redan. - Gruppering per kluster: `services.swarm_cluster_id` finns redan. - Live-indikatorn räknas ut i klienten från senaste SSE-event. - **Ändras inte:** - CSRF-token på alla POST. - `Cache-Control: no-store` på svaret med token. - 401 och `HX-Redirect` för htmx-anrop och EventSource utan session (`webauth.Require`). - Inget `template.HTML` på värden som användare eller agenter styr. - Behåll htmx med SSE som "refetch"-signal och server-renderade fragment. Inget byggsteg med Node. ## Scope **Ingår:** sidorna Services och Agents enligt ovan, tema, mobillayout, inbäddade fonter, gruppering per kluster, offline-markering. **Ingår inte**, eftersom data saknas i fas 1: - Jobs-länk och Jobs-sida (fas 2). - Service detail (fas 2/4). - Badges för update, drift och follows-no-tag, statistiken i rubriken, mode-toggle, Update och "Update all", och telefonvyn "Confirm update". Allt detta hör till fas 2–5. **Klart när:** sidorna matchar designens artboards för de delar som ingår. Det verifieras i webbläsare i båda teman, på desktop och vid 390 px bredd. Samtidigt ska `go test ./...` och testerna i web-paketet passera.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
later
Deliberately deferred; not planned yet
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
shcizo (Samuel Enocsson)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: shcizo/package-updater#18