From 3d6927ce73e8b5e111090bd10cc1e14969441483 Mon Sep 17 00:00:00 2001 From: datadunia Date: Wed, 3 Jun 2026 14:50:23 +0700 Subject: [PATCH] chore: update submodule refs (server-core, dashboard-ui) --- .../plans/firewall-and-legacy-cleanup.md | 1360 +++++++++++++++++ apps/dashboard-ui | 2 +- apps/server-core | 2 +- 3 files changed, 1362 insertions(+), 2 deletions(-) create mode 100644 .sisyphus/plans/firewall-and-legacy-cleanup.md diff --git a/.sisyphus/plans/firewall-and-legacy-cleanup.md b/.sisyphus/plans/firewall-and-legacy-cleanup.md new file mode 100644 index 0000000..ee62cac --- /dev/null +++ b/.sisyphus/plans/firewall-and-legacy-cleanup.md @@ -0,0 +1,1360 @@ +# Firewall System Fix + Legacy Styling Cleanup + +## TL;DR + +> **Quick Summary**: Fix broken nftables firewall rule system (rules from UI never actually filter traffic), remove dead LinkedDevices component, and modernize ALL remaining legacy-styled views/components to use the Ng* design system with proper @theme tokens. +> +> **Deliverables**: +> - Working nftables firewall rules (UI rules actually filter kernel traffic) +> - fwd_estab duplicate bug fixed +> - RemoveForwardRule multi-CIDR fix +> - @theme design tokens defined in main.css +> - 11 files restyled with Ng* components + design tokens +> - All 19 alert() → useToast(), all 6 confirm() → useConfirm() +> - LinkedDevices.vue deleted +> - Backend go tests for firewall rule CRUD +> +> **Estimated Effort**: Large +> **Parallel Execution**: YES - 3 waves +> **Critical Path**: Task 1 (@theme) → Wave 2 frontend tasks → Final verification + +--- + +## Context + +### Original Request +User identified LinkedDevices.vue ("Perangkat Tertaut") as broken/redundant and asked: +1. What is it for? → Answered: legacy component showing device's own data, not actual linked devices +2. Firewall needs fixing — conflicts with AllowedIPs and nftables → Investigated: found critical backend bugs +3. Fix with recommendations + check all legacy styling across all menus + +### Interview Summary +**Key Discussions**: +- LinkedDevices.vue: DELETE — broken, redundant, uses emoji/alert/confirm +- FirewallEditor.vue: Redesign with Ng* design system +- Backend bugs: fwd_estab 3x duplicate, syncRuleToFirewall completely broken (rules never actually filter), RemoveForwardRule single-handle bug +- AllowedIPs vs nftables: Separate concerns (routing vs filtering) — UI already separates them correctly +- Styling: ALL 7 views + 4 components need cleanup (19 alert, 6 confirm, hardcoded colors, emoji) + +**Research Findings**: +- Ng* components use @theme tokens (`bg-bg-surface`, `text-text-primary`, etc.) but main.css has NO @theme block — tokens undefined +- `syncRuleToFirewall()` calls `AddRangeRule()` which creates orphaned nftables SETs with no chain RULE referencing them — UI firewall rules are 100% non-functional +- `AddRangeRule` interface inadequate: no protocol, no action, CIDR parsing wrong +- 3 callers of AddRangeRule: rules.go:133, devices.go:144, peers.go:128 +- useToast() and useConfirm() composables already exist and ready to use +- All 16 Ng* components created during redesign, ready to use + +### Metis Review +**Identified Gaps** (addressed): +- @theme tokens missing — added as Wave 0 prerequisite task +- NetManager interface needs new method for proper firewall rules — planned +- devices.go:144 and peers.go:128 SSH auto-provisioning also use broken AddRangeRule — included in scope +- RemoveForwardRule multi-CIDR awk bug — included in scope +- Existing orphaned nftables sets in production — noted, InitNetwork will clean +- alert/confirm count correction: 21/7 raw → 19/6 after LinkedDevices deletion — confirmed + +--- + +## Work Objectives + +### Core Objective +Fix the completely non-functional firewall rule system so UI-created rules actually filter traffic in the Linux kernel, and modernize all remaining legacy UI to the Ng* design system. + +### Concrete Deliverables +- `apps/server-core/internal/firewall/manager.go` — new `AddFirewallRule`/`RemoveFirewallRule` methods +- `apps/server-core/internal/firewall/nftables_linux.go` — fwd_estab fix, new methods, RemoveForwardRule fix +- `apps/server-core/internal/firewall/nftables_stub.go` — matching stub methods +- `apps/server-core/api/rules.go` — rewritten `syncRuleToFirewall` + delete cleanup +- `apps/server-core/api/devices.go` + `peers.go` — updated SSH auto-provisioning callers +- `apps/dashboard-ui/src/assets/main.css` — @theme design tokens +- `apps/dashboard-ui/src/components/LinkedDevices.vue` — DELETED +- `apps/dashboard-ui/src/components/FirewallEditor.vue` — redesigned with Ng* +- 9 more .vue files restyled (see TODOs) + +### Definition of Done +- [x] `cd apps/server-core && go build ./...` passes +- [x] `cd apps/server-core && go test ./... -tags dev -count=1` all pass +- [x] `cd apps/dashboard-ui && npm run build` passes with 0 errors +- [x] `grep -r "alert(" --include="*.vue" src/` returns 0 matches +- [x] `grep -r "LinkedDevices" --include="*.vue" --include="*.ts" src/` returns 0 matches +- [x] `grep -r "confirm(" --include="*.vue" src/ | grep -v useConfirm | grep -v handleConfirm | grep -v ConfirmModal | grep -v "\/\/"` returns 0 matches + +### Must Have +- Firewall rules created via UI must produce actual nft rules in FORWARD chain +- All alert()/confirm() replaced with useToast()/useConfirm() +- LinkedDevices.vue deleted with all references +- @theme tokens defined so Ng* components render correctly +- Port range support (e.g., 80-443) +- Protocol selection (tcp/udp/both) honored in nft rules +- Action (accept/drop) honored in nft rules + +### Must NOT Have (Guardrails) +- NEVER use `nft flush table` — destroys all peer isolation +- NEVER touch `AddForwardRule`, `AddInputRule`, `RemoveInputRule`, `AddUserIsolation` — they work correctly +- NEVER introduce new Ng* components — use existing 16 only +- NEVER touch Login.vue — already redesigned +- NEVER touch style.css — dead scaffold code +- NEVER add logging/audit trails to firewall backend +- NEVER refactor admin-only checks (known debt, out of scope) +- NEVER add sorting/filtering/pagination to FirewallEditor rule table +- Port format: single port or dash-range ONLY (e.g., `80` or `8000-9000`). No comma-separated. + +--- + +## Verification Strategy + +> **ZERO HUMAN INTERVENTION** - ALL verification is agent-executed. No exceptions. + +### Test Decision +- **Infrastructure exists**: YES (Go: `go test`, Frontend: `npm run build` / vue-tsc) +- **Automated tests**: YES (backend tests after implementation) +- **Framework**: Go `testing` package for backend; no frontend unit tests +- **Test approach**: Tests-after for backend; agent QA for frontend + +### QA Policy +Every task MUST include agent-executed QA scenarios. +Evidence saved to `.sisyphus/evidence/task-{N}-{scenario-slug}.{ext}`. + +- **Backend**: Use Bash (`go test`, `go build`) — compile, run tests, verify output +- **Frontend/UI**: Use Bash (`npm run build`, `grep`) — type-check, verify no legacy patterns remain + +--- + +## Execution Strategy + +### Parallel Execution Waves + +``` +Wave 0 (Prerequisite — must complete first): +└── Task 1: Define @theme design tokens in main.css [quick] + +Wave 1 (Backend firewall — all parallel): +├── Task 2: Fix InitNetwork fwd_estab duplicates [quick] +├── Task 3: Add AddFirewallRule/RemoveFirewallRule to NetManager interface [quick] +├── Task 4: Rewrite syncRuleToFirewall + fix rule delete cleanup [quick] +├── Task 5: Fix RemoveForwardRule multi-CIDR handling [quick] +├── Task 6: Update SSH auto-provisioning callers [quick] +└── Task 7: Add backend tests for firewall rule CRUD [quick] + +Wave 2 (Frontend — all parallel, depends on Task 1): +├── Task 8: Delete LinkedDevices.vue + clean references [quick] +├── Task 9: Redesign FirewallEditor.vue with Ng* design system [quick] +├── Task 10: Restyle DeviceDetail.vue [quick] +├── Task 11: Restyle Devices.vue [quick] +├── Task 12: Restyle Dashboard.vue [quick] +├── Task 13: Restyle Servers.vue modals/forms [quick] +├── Task 14: Restyle Users.vue [quick] +├── Task 15: Restyle AddPeerModal.vue + PeerConfigModal.vue [quick] +├── Task 16: Restyle ShareConfig.vue [quick] +└── Task 17: Restyle TrafficChart.vue SVG colors [quick] + +Wave FINAL (After ALL tasks — 4 parallel reviews): +├── Task F1: Plan compliance audit (oracle) +├── Task F2: Code quality review (unspecified-high) +├── Task F3: Real manual QA (unspecified-high) +└── Task F4: Scope fidelity check (deep) +-> Present results -> Get explicit user okay +``` + +### Dependency Matrix + +| Task | Depends On | Blocks | Wave | +|------|-----------|--------|------| +| 1 | - | 8-17 | 0 | +| 2 | - | 7 | 1 | +| 3 | - | 4, 5, 6, 7 | 1 | +| 4 | 3 | 7 | 1 | +| 5 | - | 7 | 1 | +| 6 | 3 | 7 | 1 | +| 7 | 2, 3, 4, 5, 6 | FINAL | 1 | +| 8 | 1 | FINAL | 2 | +| 9 | 1 | FINAL | 2 | +| 10 | 1, 8 | FINAL | 2 | +| 11-17 | 1 | FINAL | 2 | +| F1-F4 | ALL | - | FINAL | + +### Agent Dispatch Summary + +- **Wave 0**: **1** — T1 → `quick` +- **Wave 1**: **6** — T2-T6 → `quick`, T7 → `quick` +- **Wave 2**: **10** — T8-T17 → `quick` +- **FINAL**: **4** — F1 → `oracle`, F2 → `unspecified-high`, F3 → `unspecified-high`, F4 → `deep` + +--- + +## TODOs + +- [x] 1. Define @theme design tokens in main.css + + **What to do**: + - Add `@theme` block to `apps/dashboard-ui/src/assets/main.css` after `@import "tailwindcss";` + - Define ALL color tokens used by existing Ng* components (found by grepping `src/components/ui/*.vue`): + - Background: `--color-bg-base`, `--color-bg-surface`, `--color-bg-elevated`, `--color-bg-overlay` + - Text: `--color-text-primary`, `--color-text-secondary`, `--color-text-muted` + - Border: `--color-border-subtle`, `--color-border-default`, `--color-border-strong` + - Accent: `--color-accent`, `--color-accent-hover` + - Semantic: `--color-danger`, `--color-success`, `--color-warning` + - Shadow: `--shadow-glow` + - Color palette: dark glassmorphism theme — `bg-base` ~`#0a0a14`, `bg-surface` ~`#12121e`, `bg-elevated` ~`#1a1a2e`, accent = cyan (#06b6d4), danger = red (#ef4444) + - Verify existing Ng* components render correctly after tokens are defined + + **Must NOT do**: + - Do NOT modify any Ng* component files + - Do NOT touch `style.css` (dead code) + - Do NOT add custom utility classes beyond what @theme provides + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: NO (prerequisite for all frontend tasks) + - **Parallel Group**: Wave 0 + - **Blocks**: Tasks 8-17 + - **Blocked By**: None + + **References**: + - `apps/dashboard-ui/src/assets/main.css` — Current file (17 lines: @import + fadeInUp animation only) + - `apps/dashboard-ui/src/components/ui/NgCard.vue:14-17` — Uses `bg-bg-surface`, `bg-bg-elevated`, `border-border-subtle`, `border-border-default`, `shadow-glow` + - `apps/dashboard-ui/src/components/ui/NgButton.vue:18-22` — Uses `bg-accent`, `bg-accent-hover`, `bg-bg-elevated`, `bg-bg-surface`, `text-text-primary`, `text-text-secondary`, `bg-danger`, `ring-accent`, `ring-offset-bg-base` + - `apps/dashboard-ui/src/components/ui/NgInput.vue:49-51` — Uses `bg-bg-base`, `text-text-primary`, `placeholder-text-muted`, `border-border-default`, `border-border-strong`, `ring-accent`, `border-danger`, `ring-danger` + - `apps/dashboard-ui/src/components/ui/NgModal.vue:46,63,70,77` — Uses `bg-bg-overlay`, `from-bg-surface`, `to-bg-elevated`, `border-border-subtle`, `text-text-primary`, `text-text-muted`, `text-text-secondary` + - `apps/dashboard-ui/vite.config.ts` — Vite 8 + `@tailwindcss/vite` plugin (TailwindCSS v4 syntax, `@theme` directive) + - TailwindCSS v4 docs: `@theme` defines custom design tokens as CSS custom properties that generate utility classes + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: @theme tokens compile and generate utilities + Tool: Bash + Preconditions: apps/dashboard-ui has node_modules installed + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + 2. Check exit code is 0 + 3. Run: grep -c "@theme" src/assets/main.css + Expected Result: Build succeeds. grep returns 1 (one @theme block exists) + Evidence: .sisyphus/evidence/task-1-theme-build.txt + + Scenario: All required token names defined + Tool: Bash + Steps: + 1. Run: grep -E "bg-base|bg-surface|bg-elevated|bg-overlay|text-primary|text-secondary|text-muted|border-subtle|border-default|border-strong|accent|accent-hover|danger|success|warning|shadow-glow" apps/dashboard-ui/src/assets/main.css | wc -l + Expected Result: At least 15 matches (all tokens present) + Evidence: .sisyphus/evidence/task-1-token-audit.txt + ``` + + **Commit**: YES (Commit A) + - Message: `feat(dashboard): add @theme design tokens to main.css` + - Files: `src/assets/main.css` + - Pre-commit: `npm run build` + +- [x] 2. Fix InitNetwork fwd_estab duplicates in nftables_linux.go + + **What to do**: + - DELETE lines 67, 75, 83 in `nftables_linux.go` — these are copy-paste duplicates that insert `fwd_estab` into FORWARD chain from inside the INPUT chain section + - Keep ONLY line 43 (the correct one inside the FORWARD `wg_isolation` guard) + - Verify the idempotency guard: line 43 is inside `if exec.Command("sh", "-c", checkWgDrop).Run() != nil` — this means `fwd_estab` is only added when `wg_isolation` doesn't exist yet. This is correct behavior. + + **Must NOT do**: + - Do NOT touch the INPUT chain rules (lines 48-84 excluding the fwd_estab duplicates) + - Do NOT change `wg_isolation` rule + - Do NOT use `nft flush table` + - Do NOT modify `AddForwardRule`, `AddInputRule`, or any method outside `InitNetwork` + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 1 (with Tasks 3, 4, 5, 6) + - **Blocks**: Task 7 + - **Blocked By**: None + + **References**: + - `apps/server-core/internal/firewall/nftables_linux.go:25-87` — Full `InitNetwork()` function + - Line 43: Correct `fwd_estab` insert (inside FORWARD wg_isolation guard) + - Line 67: DUPLICATE — inside INPUT section, inserts into FORWARD + - Line 75: DUPLICATE — inside INPUT section, inserts into FORWARD + - Line 83: DUPLICATE — inside INPUT section, inserts into FORWARD + - All 3 duplicates lack idempotency guards (no grep check), so every `InitNetwork()` call creates new handles + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: fwd_estab appears exactly once in InitNetwork + Tool: Bash + Steps: + 1. Run: grep -c "fwd_estab" apps/server-core/internal/firewall/nftables_linux.go + Expected Result: Exactly 1 match (line 43 area only) + Evidence: .sisyphus/evidence/task-2-fwd-estab-count.txt + + Scenario: Build compiles successfully + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go build ./... + Expected Result: Exit code 0, no errors + Evidence: .sisyphus/evidence/task-2-go-build.txt + ``` + + **Commit**: NO (groups with Commit B) + +- [x] 3. Add AddFirewallRule/RemoveFirewallRule to NetManager interface + + **What to do**: + - Add new method to `manager.go` interface: + ```go + AddFirewallRule(ruleName string, sourceIP net.IP, destCIDR string, portRange string, protocol string, action string) error + RemoveFirewallRule(ruleName string) error + ``` + - Implement in `nftables_linux.go`: + - `AddFirewallRule`: Generate proper `nft insert rule ip nexusguard forward ip saddr {sourceIP} ip daddr {destCIDR} {protocol} dport {portRange} {action} comment "fwrule_{ruleName}"` + - Handle protocol: `tcp`, `udp`, or omit for `both` + - Handle portRange: empty = all ports (no dport match), single port `80`, range `80-443` + - Handle action: `accept` or `drop` + - Handle destCIDR: single IP auto-appended `/32`, CIDR passed as-is + - `RemoveFirewallRule`: Find and delete ALL handles matching `comment "fwrule_{ruleName}"` (loop over awk output) + - Implement stubs in `nftables_stub.go` (return nil) + - Do NOT remove old `AddRangeRule`/`RemoveRangeRule` yet — keep for backward compatibility until callers are updated + + **Must NOT do**: + - Do NOT remove `AddRangeRule`/`RemoveRangeRule` from interface (callers still reference them until Task 4/6) + - Do NOT touch `AddForwardRule`, `AddInputRule`, or any other existing methods + - Do NOT use `nft flush table` + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 1 (with Tasks 2, 5) + - **Blocks**: Tasks 4, 6, 7 + - **Blocked By**: None + + **References**: + - `apps/server-core/internal/firewall/manager.go` — Full interface (17 lines). New methods follow existing pattern. + - `apps/server-core/internal/firewall/nftables_linux.go:181-200` — `AddForwardRule` as PATTERN to follow: uses `nft insert rule`, handles comma-separated CIDRs, uses comment for identification, uses `exec.Command` + - `apps/server-core/internal/firewall/nftables_linux.go:202-211` — `RemoveForwardRule` as PATTERN but with KNOWN BUG (single handle). New `RemoveFirewallRule` must loop ALL handles. + - `apps/server-core/internal/firewall/nftables_stub.go` — All methods return nil, one-liner pattern + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: Interface compiles with new methods + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go build ./... + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-3-go-build.txt + + Scenario: New methods exist in all 3 files + Tool: Bash + Steps: + 1. Run: grep -c "AddFirewallRule" apps/server-core/internal/firewall/manager.go apps/server-core/internal/firewall/nftables_linux.go apps/server-core/internal/firewall/nftables_stub.go + Expected Result: 1 match per file (3 total) + Evidence: .sisyphus/evidence/task-3-method-check.txt + ``` + + **Commit**: NO (groups with Commit B) + +- [x] 4. Rewrite syncRuleToFirewall + fix rule delete in rules.go + + **What to do**: + - Rewrite `syncRuleToFirewall()` in `rules.go` to use new `AddFirewallRule()`: + ```go + func (h *RulesHandler) syncRuleToFirewall(rule models.FirewallRule, deviceName string) { + // Get device's internal IP for source matching + var device models.Device + if err := h.db.Where("id = ?", rule.DeviceID).First(&device).Error; err != nil { + return + } + sourceIP := net.ParseIP(device.InternalIP) + if sourceIP == nil { + return + } + + destCIDR := rule.DestIPRange + // Single IP → append /32 + if !strings.Contains(destCIDR, "/") { + destCIDR += "/32" + } + + h.fw.AddFirewallRule( + rule.ID.String(), + sourceIP, + destCIDR, + rule.DestPortRange, // "" = all ports, "80" = single, "80-443" = range + rule.Protocol, // "tcp", "udp", "both" + rule.Action, // "accept", "drop" + ) + } + ``` + - Update `Delete()` handler to use `RemoveFirewallRule()` instead of `RemoveRangeRule()`: + ```go + h.fw.RemoveFirewallRule(rule.ID.String()) + ``` + - Add input validation in `Create()`: validate `DestPortRange` format (empty, single number, or `N-N` range) + - Add input validation: validate `Action` is `accept` or `drop` only + - Add input validation: validate `Protocol` is `tcp`, `udp`, or `both` only + + **Must NOT do**: + - Do NOT change the API request/response shape (keep `CreateRuleRequest` struct) + - Do NOT add new fields to the model + - Do NOT add logging or audit trails + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES (after Task 3) + - **Parallel Group**: Wave 1 + - **Blocks**: Task 7 + - **Blocked By**: Task 3 + + **References**: + - `apps/server-core/api/rules.go` — Full file (135 lines). `syncRuleToFirewall` at line 114-135, `Delete` at line 83-112, `Create` at line 49-81 + - `apps/server-core/api/helpers.go` — Has `validateAllowedIPs()` pattern to follow for validation + - `apps/server-core/internal/models/models.go:95-112` — `FirewallRule` model: ID, DeviceID, DestIPRange, DestPortRange, Protocol, Action + - `apps/server-core/api/rules.go:109` — Current delete uses `RemoveRangeRule("rule_" + rule.ID.String())` → change to `RemoveFirewallRule(rule.ID.String())` + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: syncRuleToFirewall uses new AddFirewallRule + Tool: Bash + Steps: + 1. Run: grep "AddFirewallRule" apps/server-core/api/rules.go + 2. Run: grep "AddRangeRule" apps/server-core/api/rules.go + Expected Result: AddFirewallRule found, AddRangeRule NOT found + Evidence: .sisyphus/evidence/task-4-sync-rewrite.txt + + Scenario: Delete uses RemoveFirewallRule + Tool: Bash + Steps: + 1. Run: grep "RemoveFirewallRule" apps/server-core/api/rules.go + 2. Run: grep "RemoveRangeRule" apps/server-core/api/rules.go + Expected Result: RemoveFirewallRule found, RemoveRangeRule NOT found + Evidence: .sisyphus/evidence/task-4-delete-fix.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go build ./... + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-4-build.txt + ``` + + **Commit**: NO (groups with Commit B) + +- [x] 5. Fix RemoveForwardRule multi-CIDR handling + + **What to do**: + - Fix `RemoveForwardRule()` in `nftables_linux.go` to handle multiple handles (multi-CIDR peers) + - Current bug: `awk '/comment \\"peer_xxx\\"/ {print $NF}'` returns only the LAST match when piped to a single string. Only one handle is deleted. + - Fix: Loop over ALL matching handles. Use approach: + ```go + func (m *LinuxManager) RemoveForwardRule(peerName string) error { + // Match both exact "peer_xxx" and suffixed "peer_xxx_0", "peer_xxx_1" patterns + cmdStr := fmt.Sprintf(`nft -a list chain ip nexusguard forward | grep -E 'comment "peer_%s(_[0-9]+)?"' | awk '{print $NF}'`, peerName) + out, err := exec.Command("sh", "-c", cmdStr).Output() + if err != nil || len(out) == 0 { + return nil + } + for _, handle := range strings.Split(strings.TrimSpace(string(out)), "\n") { + handle = strings.TrimSpace(handle) + if handle == "" { + continue + } + exec.Command("sh", "-c", fmt.Sprintf("nft delete rule ip nexusguard forward handle %s", handle)).Run() + } + return nil + } + ``` + - Note: `AddForwardRule` creates rules with comments `peer_xxx` (single CIDR) or `peer_xxx_0`, `peer_xxx_1` (multi-CIDR). The grep pattern must match all variants. + + **Must NOT do**: + - Do NOT modify `AddForwardRule` — it works correctly + - Do NOT use `nft flush table` + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 1 (with Tasks 2, 3) + - **Blocks**: Task 7 + - **Blocked By**: None + + **References**: + - `apps/server-core/internal/firewall/nftables_linux.go:202-211` — Current buggy `RemoveForwardRule` (single handle) + - `apps/server-core/internal/firewall/nftables_linux.go:181-200` — `AddForwardRule` creates comments `peer_{name}` and `peer_{name}_{i}` for multi-CIDR + - Line 190-192: Suffix logic — `suffix = fmt.Sprintf("_%d", i)` for multi-CIDR, empty string for single CIDR + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: RemoveForwardRule loops over all handles + Tool: Bash + Steps: + 1. Run: grep -A 15 "func.*RemoveForwardRule" apps/server-core/internal/firewall/nftables_linux.go + 2. Verify the output contains a loop (for/range or while) over handles + 3. Verify grep pattern matches both "peer_xxx" and "peer_xxx_N" suffixes + Expected Result: Function contains loop + regex pattern for suffixed comments + Evidence: .sisyphus/evidence/task-5-remove-forward.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go build ./... + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-5-build.txt + ``` + + **Commit**: NO (groups with Commit B) + +- [x] 6. Update SSH auto-provisioning callers (devices.go + peers.go) + + **What to do**: + - Update `apps/server-core/api/devices.go:144` — replace `AddRangeRule` call with `AddFirewallRule`: + ```go + // Before: _ = h.fw.AddRangeRule("rule_"+rule.ID.String(), ip, ip, 22, 22) + // After: + _ = h.fw.AddFirewallRule(rule.ID.String(), sourceIP, rule.DestIPRange, "22", "tcp", "accept") + ``` + Where `sourceIP` is the device's InternalIP (already available in the handler context) + - Update `apps/server-core/api/peers.go:128` — same pattern as devices.go + - Read surrounding code context to get the correct `sourceIP` variable name (the device's internal IP is available in the handler) + - After updating both callers, `AddRangeRule` and `RemoveRangeRule` can be removed from the interface + all implementations (cleanup) + + **Must NOT do**: + - Do NOT change the SSH auto-provisioning logic (still creates port 22 TCP accept rule) + - Do NOT change the FirewallRule model or DB operations + - Do NOT remove `AddRangeRule`/`RemoveRangeRule` until AFTER both callers are updated + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES (after Task 3) + - **Parallel Group**: Wave 1 + - **Blocks**: Task 7 + - **Blocked By**: Task 3 + + **References**: + - `apps/server-core/api/devices.go:144` — Current: `_ = h.fw.AddRangeRule("rule_"+rule.ID.String(), ip, ip, 22, 22)`. Read lines 130-150 for full context to find the sourceIP variable. + - `apps/server-core/api/peers.go:128` — Current: `_ = h.fw.AddRangeRule("rule_"+rule.ID.String(), ip, ip, 22, 22)`. Read lines 115-135 for full context. + - `apps/server-core/internal/firewall/manager.go` — After cleanup, remove `AddRangeRule`/`RemoveRangeRule` from interface + - `apps/server-core/internal/firewall/nftables_linux.go:154-177` — Remove `AddRangeRule`/`RemoveRangeRule` implementations + - `apps/server-core/internal/firewall/nftables_stub.go:22-23` — Remove stub methods + - `apps/server-core/internal/firewall/nftables_test.go:40-52` — Remove or update `TestRangeRule` + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No more AddRangeRule callers in API + Tool: Bash + Steps: + 1. Run: grep -r "AddRangeRule" apps/server-core/ + Expected Result: 0 matches (removed from interface, impls, callers, and tests) + Evidence: .sisyphus/evidence/task-6-no-rangerule.txt + + Scenario: AddFirewallRule used in devices.go and peers.go + Tool: Bash + Steps: + 1. Run: grep "AddFirewallRule" apps/server-core/api/devices.go apps/server-core/api/peers.go + Expected Result: 1 match per file (2 total) + Evidence: .sisyphus/evidence/task-6-new-callers.txt + + Scenario: Build succeeds after cleanup + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go build ./... + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-6-build.txt + ``` + + **Commit**: NO (groups with Commit B) + +- [x] 7. Add backend tests for firewall rule CRUD + + **What to do**: + - Add/update tests in `apps/server-core/api/rules_test.go` (if exists) or create it: + - Test `Create` handler: valid rule with IP/CIDR, port range, protocol, action → 201 Created + - Test `Create` handler: invalid port format → 400 + - Test `Create` handler: invalid action → 400 + - Test `Create` handler: invalid protocol → 400 + - Test `Delete` handler: existing rule → 200, verify rule removed from DB + - Test `List` handler: returns rules for a device + - Update `apps/server-core/internal/firewall/nftables_test.go`: + - Replace `TestRangeRule` with `TestFirewallRule` testing new `AddFirewallRule`/`RemoveFirewallRule` via stub + - Run all tests: `go test ./... -tags dev -count=1` + + **Must NOT do**: + - Do NOT write tests that require a running Linux nftables kernel — use stub manager + - Do NOT mock the database — use GORM in-memory SQLite (pattern from existing tests) + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: NO (depends on all Wave 1 tasks) + - **Parallel Group**: Wave 1 (sequential after Tasks 2-6) + - **Blocks**: Final verification + - **Blocked By**: Tasks 2, 3, 4, 5, 6 + + **References**: + - `apps/server-core/internal/firewall/nftables_test.go` — Existing test file (52 lines), has `TestRangeRule` to replace + - `apps/server-core/internal/models/models_test.go` — Pattern for GORM in-memory SQLite test setup (lines 1-30) + - `apps/server-core/api/rules.go` — Handler code to test + - Check if `apps/server-core/api/rules_test.go` exists — if so, read it for existing patterns + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: All tests pass + Tool: Bash + Steps: + 1. Run: cd apps/server-core && go test ./... -tags dev -count=1 -v 2>&1 | tail -30 + Expected Result: All tests PASS, exit code 0 + Evidence: .sisyphus/evidence/task-7-test-results.txt + + Scenario: New firewall tests exist + Tool: Bash + Steps: + 1. Run: grep -c "TestFirewallRule\|TestCreate.*Rule\|TestDelete.*Rule\|TestList.*Rule" apps/server-core/internal/firewall/nftables_test.go apps/server-core/api/rules_test.go 2>/dev/null || echo "no test files" + Expected Result: At least 3 test functions found + Evidence: .sisyphus/evidence/task-7-test-count.txt + ``` + + **Commit**: YES (Commit B) + - Message: `fix(firewall): rewrite nftables rule system + fix fwd_estab duplicates` + - Files: `internal/firewall/manager.go`, `internal/firewall/nftables_linux.go`, `internal/firewall/nftables_stub.go`, `internal/firewall/nftables_test.go`, `api/rules.go`, `api/rules_test.go`, `api/devices.go`, `api/peers.go` + - Pre-commit: `go test ./... -tags dev -count=1` + +- [x] 8. Delete LinkedDevices.vue + clean all references + + **What to do**: + - Delete `apps/dashboard-ui/src/components/LinkedDevices.vue` + - Remove import and template usage from `DeviceDetail.vue`: + - Line 175: `` → DELETE + - Line 220: `import LinkedDevices from '../components/LinkedDevices.vue'` → DELETE + - Remove `src/components/LinkedDevices.vue` from any tsconfig references if applicable + - Verify no other files reference LinkedDevices + + **Must NOT do**: + - Do NOT modify any other component files + - Do NOT remove the FirewallEditor section from DeviceDetail.vue (it stays) + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 9-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/components/LinkedDevices.vue` — 84 lines, DELETE entirely + - `apps/dashboard-ui/src/views/DeviceDetail.vue:175` — Template reference: `` + - `apps/dashboard-ui/src/views/DeviceDetail.vue:220` — Import: `import LinkedDevices from '../components/LinkedDevices.vue'` + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: LinkedDevices.vue deleted + Tool: Bash + Steps: + 1. Run: test -f apps/dashboard-ui/src/components/LinkedDevices.vue && echo "EXISTS" || echo "DELETED" + Expected Result: DELETED + Evidence: .sisyphus/evidence/task-8-deleted.txt + + Scenario: No references to LinkedDevices remain + Tool: Bash + Steps: + 1. Run: grep -r "LinkedDevices" --include="*.vue" --include="*.ts" apps/dashboard-ui/src/ + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-8-no-refs.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-8-build.txt + ``` + + **Commit**: YES (Commit C — group with Task 9) + - Message: `refactor(dashboard): delete LinkedDevices + redesign FirewallEditor` + - Files: `src/components/LinkedDevices.vue` (delete), `src/views/DeviceDetail.vue` + +- [x] 9. Redesign FirewallEditor.vue with Ng* design system + + **What to do**: + - Complete rewrite of `apps/dashboard-ui/src/components/FirewallEditor.vue`: + - Replace raw `` with NgTable or keep structured table but use NgCard wrapper + - Replace all hardcoded `text-cyan-400`, `bg-gray-900/50`, `border-white/10` etc. with design tokens + - Replace `alert()` (if any) with `useToast()` + - Use NgButton for Add Rule button + - Use NgInput for form fields + - Add NgBadge for Action (accept=success, drop=danger) + - Keep the component functional — same CRUD operations, same API calls + - Add success toast after rule creation/deletion + - Add proper error display (NgBadge or inline error, not `alert()`) + - Validate port format: empty, single number, or `N-N` range + + **Must NOT do**: + - Do NOT change the API contract (same fetchRules/createRule/deleteRule calls) + - Do NOT add sorting/filtering/pagination to the rule table + - Do NOT introduce new Ng* components beyond what already exists + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8, 10-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/components/FirewallEditor.vue` — Current file (127 lines). Has raw table, hardcoded colors, no error toasts. + - `apps/dashboard-ui/src/components/ui/NgCard.vue` — Use as wrapper + - `apps/dashboard-ui/src/components/ui/NgInput.vue` — Use for IP, port inputs + - `apps/dashboard-ui/src/components/ui/NgSelect.vue` — Use for protocol, action dropdowns + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for Add Rule button + - `apps/dashboard-ui/src/components/ui/NgBadge.vue` — Use for Action badges (accept/drop) + - `apps/dashboard-ui/src/components/ui/NgEmptyState.vue` — Use for empty rule list + - `apps/dashboard-ui/src/composables/useToast.ts` — For success/error toasts + - `apps/dashboard-ui/src/api/rules.ts` — API contract (unchanged): fetchRules, createRule, deleteRule + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: FirewallEditor uses Ng* components + Tool: Bash + Steps: + 1. Run: grep -c "NgCard\|NgInput\|NgSelect\|NgButton\|NgBadge\|NgEmptyState\|useToast" apps/dashboard-ui/src/components/FirewallEditor.vue + Expected Result: At least 3 matches (NgCard + useToast + at least one other) + Evidence: .sisyphus/evidence/task-9-ng-components.txt + + Scenario: No hardcoded colors remain in FirewallEditor + Tool: Bash + Steps: + 1. Run: grep -E "text-cyan-|text-green-|text-red-|bg-gray-|bg-black/|border-white/" apps/dashboard-ui/src/components/FirewallEditor.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-9-no-hardcoded.txt + + Scenario: No alert() in FirewallEditor + Tool: Bash + Steps: + 1. Run: grep "alert(" apps/dashboard-ui/src/components/FirewallEditor.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-9-no-alert.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-9-build.txt + ``` + + **Commit**: YES (Commit C — group with Task 8) + - Message: `refactor(dashboard): delete LinkedDevices + redesign FirewallEditor` + - Files: `src/components/FirewallEditor.vue` + - Pre-commit: `npm run build` + +- [x] 10. Restyle DeviceDetail.vue + + **What to do**: + - Replace ALL `alert()` calls with `useToast()`: + - `alert('Failed to regenerate token')` → `toast.error('Failed to regenerate token')` + - `alert('Failed to save advanced settings')` → `toast.error('Failed to save advanced settings')` + - `alert('Failed to regenerate keys')` → `toast.error('Failed to regenerate keys')` + - `alert('Failed to delete device')` → `toast.error('Failed to delete device')` + - `alert('Failed to toggle suspension')` → `toast.error('Failed to toggle suspension')` + - `alert('Token copied to clipboard!')` → `toast.success('Token copied to clipboard!')` + - Replace ALL `confirm()` with `useConfirm()`: + - `confirm('This will invalidate...')` → `await confirm('This will invalidate...')` + - `confirm('Are you absolutely sure...')` → `await confirm('Are you absolutely sure...')` + - `confirm('This will regenerate...')` → `await confirm('This will regenerate...')` + - Replace emoji `⚙️` (line 66) with `@iconify/vue` icon (e.g., `heroicons:cog-6-tooth`) + - Replace all hardcoded Tailwind colors with design tokens (`text-cyan-400` → `text-accent`, `bg-gray-900/90` → `bg-surface`, etc.) + - Use NgCard for sections (keys display, advanced settings, connection status) + - Use NgInput for advanced settings form fields + - Use NgToggle for Allow Internet, Suspend, Disable PSK toggles (if NgToggle exists, else keep custom toggle with token colors) + + **Must NOT do**: + - Do NOT change the API calls or data flow + - Do NOT change the component's functionality + - Do NOT remove the FirewallEditor or PeerConfigModal sections + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8, 9, 11-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1, Task 8 (must delete LinkedDevices first since it was in DeviceDetail) + + **References**: + - `apps/dashboard-ui/src/views/DeviceDetail.vue` — Full file (392 lines). 6 alert(), 3 confirm(), emoji ⚙️, extensive hardcoded colors. + - `apps/dashboard-ui/src/composables/useToast.ts` — `toast.success(msg)`, `toast.error(msg)` + - `apps/dashboard-ui/src/composables/useConfirm.ts` — `const confirmed = await confirm('message')` returns boolean + - `apps/dashboard-ui/src/components/ui/NgCard.vue` — Use for sections + - `apps/dashboard-ui/src/components/ui/NgInput.vue` — Use for form fields + - `apps/dashboard-ui/src/components/ui/NgToggle.vue` — Use for toggle switches + - `@iconify/vue` — Use `` instead of ⚙️ emoji + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert() in DeviceDetail + Tool: Bash + Steps: + 1. Run: grep "alert(" apps/dashboard-ui/src/views/DeviceDetail.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-10-no-alert.txt + + Scenario: No confirm() in DeviceDetail + Tool: Bash + Steps: + 1. Run: grep "confirm(" apps/dashboard-ui/src/views/DeviceDetail.vue + Expected Result: 0 matches (excluding useConfirm import) + Evidence: .sisyphus/evidence/task-10-no-confirm.txt + + Scenario: No emoji in DeviceDetail + Tool: Bash + Steps: + 1. Run: grep -P "[\x{1F300}-\x{1F9FF}]|⚙️" apps/dashboard-ui/src/views/DeviceDetail.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-10-no-emoji.txt + + Scenario: No hardcoded colors + Tool: Bash + Steps: + 1. Run: grep -cE "text-cyan-|text-green-|text-red-|bg-gray-|bg-black/|border-white/|text-amber-" apps/dashboard-ui/src/views/DeviceDetail.vue + Expected Result: 0 or minimal (allow some if unavoidable) + Evidence: .sisyphus/evidence/task-10-hardcoded-count.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-10-build.txt + ``` + + **Commit**: YES (Commit D — batch with Tasks 11-17) + - Message: `refactor(dashboard): replace alert/confirm + restyle all views` + - Files: `src/views/DeviceDetail.vue` + +- [x] 11. Restyle Devices.vue + + **What to do**: + - Replace `confirm()` (line 111) with `useConfirm()`: + ```ts + const confirmed = await confirm(`Delete device "${name}"? This will destroy its tunnel and all firewall rules.`) + if (!confirmed) return + ``` + - Replace `alert()` (line 116) with `toast.error(err.response?.data?.error || 'Failed to delete device')` + - Replace hardcoded colors in table rows with design tokens + - Replace raw firewall modal with NgModal: + - Current: manual `
` + - Replace with: `` + - Use NgButton for "+ Add Peer" button + - Use NgBadge for Online/Offline status + + **Must NOT do**: + - Do NOT change the API calls or data flow + - Do NOT add sorting/filtering to the device table + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-10, 12-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/views/Devices.vue` — Full file (138 lines). 1 confirm, 1 alert, raw table, raw modal. + - `apps/dashboard-ui/src/components/ui/NgModal.vue` — Use for firewall modal wrapper + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for action buttons + - `apps/dashboard-ui/src/components/ui/NgBadge.vue` — Use for status badges + - `apps/dashboard-ui/src/composables/useToast.ts` — For error toasts + - `apps/dashboard-ui/src/composables/useConfirm.ts` — For delete confirmation + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert()/confirm() in Devices + Tool: Bash + Steps: + 1. Run: grep -E "alert\(|confirm\(" apps/dashboard-ui/src/views/Devices.vue + Expected Result: 0 matches (excluding useConfirm import) + Evidence: .sisyphus/evidence/task-11-no-dialogs.txt + + Scenario: Firewall modal uses NgModal + Tool: Bash + Steps: + 1. Run: grep "NgModal" apps/dashboard-ui/src/views/Devices.vue + Expected Result: 1+ match + Evidence: .sisyphus/evidence/task-11-ngmodal.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-11-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/views/Devices.vue` + +- [x] 12. Restyle Dashboard.vue + + **What to do**: + - Replace stat cards with NgCard (variant="stat"): + ```vue + +

Total Devices

+

{{ store.devices.length }}

+ + ``` + - Replace hardcoded `text-green-400`/`text-red-400` with `text-success`/`text-danger` + - Replace hardcoded `bg-gray-900/50` with `bg-surface` or use NgCard + - Replace hardcoded `text-cyan-400` with `text-accent` + - Replace hardcoded `border-white/10` with `border-border-subtle` + - Keep the device grid but use design tokens for card backgrounds + + **Must NOT do**: + - Do NOT change the API calls or polling logic + - Do NOT add new dashboard features + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-11, 13-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/views/Dashboard.vue` — Full file (99 lines). Hardcoded stat cards, no NgCard usage. + - `apps/dashboard-ui/src/components/ui/NgCard.vue` — Use variant="stat" for stat cards + - `apps/dashboard-ui/src/assets/main.css` — @theme tokens (from Task 1) + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: Dashboard uses NgCard + Tool: Bash + Steps: + 1. Run: grep "NgCard" apps/dashboard-ui/src/views/Dashboard.vue + Expected Result: 1+ match (stat cards) + Evidence: .sisyphus/evidence/task-12-ngcard.txt + + Scenario: No hardcoded stat card colors + Tool: Bash + Steps: + 1. Run: grep -c "bg-gradient-to-br from-gray-900" apps/dashboard-ui/src/views/Dashboard.vue + Expected Result: 0 matches (all replaced with NgCard) + Evidence: .sisyphus/evidence/task-12-no-hardcoded.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-12-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/views/Dashboard.vue` + +- [x] 13. Restyle Servers.vue modals/forms + + **What to do**: + - Replace `confirm()` (line 576) with `useConfirm()` + - Replace `alert('Delete failed')` (line 582) with `toast.error('Delete failed')` + - Replace hardcoded colors in add/edit modals with design tokens + - Use NgInput for form fields in Register Node and Edit Node modals + - Use NgButton for Register/Save/Cancel buttons + - Use NgSelect for Table dropdown (auto/off) + - Replace hardcoded `text-cyan-400` with `text-accent`, `bg-gray-900/90` with `bg-surface` + - Servers list already uses NgCard — no change needed there + + **Must NOT do**: + - Do NOT change the IP parsing logic or form data structure + - Do NOT change the API calls + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-12, 14-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/views/Servers.vue` — Full file (599 lines). 1 confirm, 1 alert, modals with hardcoded colors. + - `apps/dashboard-ui/src/components/ui/NgInput.vue` — Use for form fields + - `apps/dashboard-ui/src/components/ui/NgSelect.vue` — Use for dropdowns + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for action buttons + - `apps/dashboard-ui/src/composables/useConfirm.ts` — For delete confirmation + - `apps/dashboard-ui/src/composables/useToast.ts` — For error toasts + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert()/confirm() in Servers + Tool: Bash + Steps: + 1. Run: grep -E "alert\(|confirm\(" apps/dashboard-ui/src/views/Servers.vue + Expected Result: 0 matches (excluding useConfirm import) + Evidence: .sisyphus/evidence/task-13-no-dialogs.txt + + Scenario: Modals use NgInput/NgButton + Tool: Bash + Steps: + 1. Run: grep -c "NgInput\|NgButton\|NgSelect" apps/dashboard-ui/src/views/Servers.vue + Expected Result: 3+ matches + Evidence: .sisyphus/evidence/task-13-ng-components.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-13-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/views/Servers.vue` + +- [x] 14. Restyle Users.vue + + **What to do**: + - Replace `confirm()` (line 110) with `useConfirm()` + - Replace `alert('Delete failed')` (line 117) with `toast.error('Delete failed')` + - Replace hardcoded colors with design tokens + - Use NgInput for username/password fields + - Use NgButton for Add User button + - Use NgBadge for username display + - Keep raw table but use design tokens for styling + + **Must NOT do**: + - Do NOT change the API calls or user management logic + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-13, 15-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/views/Users.vue` — Full file (124 lines). 1 confirm, 1 alert, hardcoded colors. + - `apps/dashboard-ui/src/components/ui/NgInput.vue` — Use for form fields + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for action buttons + - `apps/dashboard-ui/src/composables/useConfirm.ts` — For delete confirmation + - `apps/dashboard-ui/src/composables/useToast.ts` — For error toasts + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert()/confirm() in Users + Tool: Bash + Steps: + 1. Run: grep -E "alert\(|confirm\(" apps/dashboard-ui/src/views/Users.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-14-no-dialogs.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-14-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/views/Users.vue` + +- [x] 15. Restyle AddPeerModal.vue + PeerConfigModal.vue + + **What to do**: + - **AddPeerModal.vue**: + - Replace 3x `alert()` with `toast.success()`/`toast.error()` + - Replace hardcoded colors with design tokens + - Use NgModal for the modal wrapper (currently manual `
`) + - Use NgInput for peer name field + - Use NgSelect for target node dropdown + - Use NgToggle for "Allow Internet" and "Disable PSK" toggles + - Use NgButton for Create/Download/Copy/Cancel buttons + - **PeerConfigModal.vue**: + - Replace 5x `alert()` with `toast.success()`/`toast.error()` + - Replace hardcoded colors with design tokens + - Use NgModal for the modal wrapper + - Use NgButton for Save/Cancel/Copy/Download buttons + - Keep QR code and config textarea (textarea is specific, no Ng equivalent) + + **Must NOT do**: + - Do NOT change the API calls or provisioning logic + - Do NOT change the QR code generation + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-14, 16-17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/components/AddPeerModal.vue` — Full file (171 lines). 3 alert(), hardcoded colors, manual modal. + - `apps/dashboard-ui/src/components/PeerConfigModal.vue` — Full file (186 lines). 5 alert(), hardcoded colors, manual modal. + - `apps/dashboard-ui/src/components/ui/NgModal.vue` — Use for modal wrapper + - `apps/dashboard-ui/src/components/ui/NgInput.vue` — Use for form fields + - `apps/dashboard-ui/src/components/ui/NgSelect.vue` — Use for dropdowns + - `apps/dashboard-ui/src/components/ui/NgToggle.vue` — Use for toggles + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for action buttons + - `apps/dashboard-ui/src/composables/useToast.ts` — For success/error toasts + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert() in AddPeerModal + Tool: Bash + Steps: + 1. Run: grep "alert(" apps/dashboard-ui/src/components/AddPeerModal.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-15-addpeer-no-alert.txt + + Scenario: No alert() in PeerConfigModal + Tool: Bash + Steps: + 1. Run: grep "alert(" apps/dashboard-ui/src/components/PeerConfigModal.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-15-peerconfig-no-alert.txt + + Scenario: Both use NgModal + Tool: Bash + Steps: + 1. Run: grep -c "NgModal" apps/dashboard-ui/src/components/AddPeerModal.vue apps/dashboard-ui/src/components/PeerConfigModal.vue + Expected Result: 1 match per file + Evidence: .sisyphus/evidence/task-15-ngmodal.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-15-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/components/AddPeerModal.vue`, `src/components/PeerConfigModal.vue` + +- [x] 16. Restyle ShareConfig.vue + + **What to do**: + - Replace 2x `alert()` with `toast.success()`/`toast.error()` + - Replace hardcoded colors with design tokens (`text-cyan-400` → `text-accent`, `bg-gradient-to-br from-gray-900 to-gray-800` → `bg-gradient-to-br from-bg-surface to-bg-elevated`) + - Use NgButton for Download/Copy buttons + - Use NgCard for the config container + + **Must NOT do**: + - Do NOT change the fetch logic or config display + - Do NOT add new features + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-15, 17) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/views/ShareConfig.vue` — Full file (80 lines). 2 alert(), hardcoded colors. + - `apps/dashboard-ui/src/components/ui/NgButton.vue` — Use for action buttons + - `apps/dashboard-ui/src/components/ui/NgCard.vue` — Use for config container + - `apps/dashboard-ui/src/composables/useToast.ts` — For success/error toasts + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No alert() in ShareConfig + Tool: Bash + Steps: + 1. Run: grep "alert(" apps/dashboard-ui/src/views/ShareConfig.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-16-no-alert.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-16-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/views/ShareConfig.vue` + +- [x] 17. Restyle TrafficChart.vue SVG colors + + **What to do**: + - Replace hardcoded SVG hex colors with CSS custom properties: + - `stroke="#00ffff"` → `stroke="var(--color-accent)"` or use `currentColor` where appropriate + - `fill="#00ffff"` → `fill="var(--color-accent)"` + - `fill="#3b82f6"` → `fill="var(--color-info)"` (define --color-info in @theme if needed, or use existing blue token) + - Replace hardcoded gradient stop colors with CSS variables + - Replace inline SVG spinner with NgSkeleton or keep as-is (spinner is functional) + - Replace hardcoded `text-gray-400`, `text-gray-500` with `text-text-secondary`, `text-text-muted` + + **Must NOT do**: + - Do NOT change the chart rendering logic + - Do NOT change the data transformation or formatting functions + + **Recommended Agent Profile**: + - **Category**: `quick` + - **Skills**: [] + + **Parallelization**: + - **Can Run In Parallel**: YES + - **Parallel Group**: Wave 2 (with Tasks 8-16) + - **Blocks**: Final verification + - **Blocked By**: Task 1 + + **References**: + - `apps/dashboard-ui/src/components/TrafficChart.vue` — Full file (299 lines). Hardcoded SVG colors (#00ffff, #3b82f6), inline spinner. + - `apps/dashboard-ui/src/assets/main.css` — @theme tokens (from Task 1) + + **Acceptance Criteria**: + + **QA Scenarios (MANDATORY):** + + ``` + Scenario: No hardcoded hex colors in TrafficChart + Tool: Bash + Steps: + 1. Run: grep -E "#[0-9a-fA-F]{3,8}" apps/dashboard-ui/src/components/TrafficChart.vue + Expected Result: 0 matches + Evidence: .sisyphus/evidence/task-17-no-hex.txt + + Scenario: Build succeeds + Tool: Bash + Steps: + 1. Run: cd apps/dashboard-ui && npm run build + Expected Result: Exit code 0 + Evidence: .sisyphus/evidence/task-17-build.txt + ``` + + **Commit**: YES (Commit D) + - Files: `src/components/TrafficChart.vue` + - Pre-commit: `npm run build` + +--- + +## Final Verification Wave + +- [x] F1. **Plan Compliance Audit** — `oracle` +- [x] F2. **Code Quality Review** — `unspecified-high` +- [x] F3. **Real Manual QA** — `unspecified-high` +- [x] F4. **Scope Fidelity Check** — `deep` + For each task: read "What to do", read actual diff. Verify 1:1 — everything in spec was built, nothing beyond spec was built. Check "Must NOT do" compliance. Detect cross-task contamination. Flag unaccounted changes. Specifically verify: Login.vue untouched, style.css untouched, AddForwardRule untouched, no nft flush table. + Output: `Tasks [N/N compliant] | Contamination [CLEAN/N issues] | VERDICT` + +--- + +## Commit Strategy + +- **Commit A** (Wave 0): `feat(dashboard): add @theme design tokens to main.css` — main.css +- **Commit B** (Wave 1): `fix(firewall): rewrite nftables rule system + fix fwd_estab duplicates` — all backend firewall files +- **Commit C** (Wave 2 batch 1): `refactor(dashboard): delete LinkedDevices + redesign FirewallEditor` — LinkedDevices.vue (delete), FirewallEditor.vue, DeviceDetail.vue +- **Commit D** (Wave 2 batch 2): `refactor(dashboard): replace alert/confirm + restyle all views` — remaining 8 .vue files + +--- + +## Success Criteria + +### Verification Commands +```bash +# Backend +cd apps/server-core && go build ./... # Expected: no errors +cd apps/server-core && go test ./... -tags dev # Expected: all PASS + +# Frontend +cd apps/dashboard-ui && npm run build # Expected: no errors + +# Legacy pattern audit +grep -r "alert(" --include="*.vue" apps/dashboard-ui/src/ # Expected: 0 matches +grep -r "LinkedDevices" --include="*.vue" --include="*.ts" apps/dashboard-ui/src/ # Expected: 0 matches +``` + +### Final Checklist +- [x] All "Must Have" present +- [x] All "Must NOT Have" absent +- [x] All go tests pass +- [x] Frontend builds without errors +- [x] Zero alert()/confirm() in .vue files +- [x] Zero LinkedDevices references diff --git a/apps/dashboard-ui b/apps/dashboard-ui index 60b3f07..ec0e162 160000 --- a/apps/dashboard-ui +++ b/apps/dashboard-ui @@ -1 +1 @@ -Subproject commit 60b3f07b17971d21aaefc4924496c33d05935526 +Subproject commit ec0e1629a33973b592e021853fb8937ad925523a diff --git a/apps/server-core b/apps/server-core index 19f57be..4af7fbb 160000 --- a/apps/server-core +++ b/apps/server-core @@ -1 +1 @@ -Subproject commit 19f57be33a98acb950d638746dee41bfcaf7c3a1 +Subproject commit 4af7fbbf0ae6be873d866a94f1a0552f25248bb9