dev_arc_aws/design-decisions.md

ArchNest — Design Decisions & Page Reference

Living reference for visual/UX conventions and what's actually built on each page. Apply the Global Rules consistently to any new page. The Page Notes section describes the real, deployed implementation — not a mockup. If you change a page's layout or data source, update its section here in the same PR.

This file replaces the old archnest-blueprint.md (original 6-page mockup pitch, since deleted — superseded by the real 11-page app below) and glance.md (original Glance spec with fictional config files like systems.config/infra.config that were never built — also deleted). Anything from those files still true (color palette, typography, card style, dropdown menu shape) has been folded in below.

---

Global Rules (apply to every page)

Sidebar

• Expanded width: 200px. Collapsed width: 64px (icons only).
• User can manually collapse/expand via a toggle button (not just responsive breakpoints).
• Main content margin-left must match the sidebar width exactly.
• Bottom of sidebar: live "System Status" widget — green dot + "All Systems Operational" or "X Issue(s) Detected", driven by polling integration status (not the fictional ping-sweep config described in the old spec).

Page Title (Top Bar)

• Color: gold #C8A434 — not white. Use inline style={{ color: '#C8A434' }} if a Tailwind class doesn't apply.
• Font: 18px, bold, uppercase, tracking-wide.
• No border on the top bar — it blends into the page background.
• Pages with a pageSubtitles entry (currently only BookNest) render a larger 28px title + subtitle line instead, and the top bar grows from 56px → 72px — see TopBar.tsx's pageSubtitles map and App.tsx's topBarHeight lookup, which must be kept in sync or the layout clips/gaps.

Colors

Role	Value
Background (page)	#0D0E10
Background (cards)	#141518
Background (sidebar)	#0A0B0D
Border (cards)	#1E2025
Border/accent (hover/active)	#C8A434 (gold)
Success	#2ECC71
Warning	#E67E22
Danger	#E74C3C
Text (primary)	#E8E6E0
Text (secondary)	#7A7D85

Tailwind v4 @theme custom colors (text-gold, bg-card, etc.) don't always apply reliably — fall back to inline style={{ color: '#C8A434' }} when a color isn't rendering, and verify visually after changes.

Typography

• Card titles: 10-11px, uppercase, tracking-[1.5px], secondary color, font-medium.
• Large numbers: 24-28px, bold, primary color.
• Subtitles/labels: 10-11px, secondary color.
• Body text in lists: 13px, primary color.
• Timestamps: 11px, secondary color.

Card Style

• Border radius: 12px. Background #141518. Border 1px solid #1E2025.
• Padding: 16-24px depending on density. No shadows (flat design).
• Hover: border transitions to gold, 0.2s ease.

Content Alignment

• All rows in a page share the same horizontal padding (px-6 at the parent container level) so the hero banner, status cards, and content rows line up left/right.

Animations

• Card hover: border → gold, 0.2s ease.
• Progress ring / sparkline: animate from 0 on load, ~1s.
• Progress bars: fill animation ~0.8s.

Icons

• Lucide React, 14-18px depending on context. Gold for active/accent, secondary color for inactive. Gold glow on active sidebar items: shadow-[0_0_6px_rgba(200,164,52,0.5)].
• Gotcha: the installed lucide-react version's TypeScript types list some brand/wordmark icons (Github, Gitlab, Linkedin, Youtube) that aren't actually exported at runtime — tsc --noEmit stays clean while the page renders blank with a runtime SyntaxError only visible in the Vite dev log. Verify icon names against the package's actual exports before importing anything brand-flavored.

No Footer

• No page has a fixed footer/status bar. Don't add one unless explicitly requested.

Target Display

• Primary design target: 16-inch / 1920px-wide screen. Don't constrain content width unnecessarily — design should feel spacious.

User Avatar & Dropdown (TopBar, every page)

• 36px circle, gold border + glow, shows uploaded avatar image or initials.
• Adjacent: display name + "Administrator" role label, chevron (rotates on open).
• Dropdown menu: header (name + email) → Profile (/settings?tab=profile) → Appearance (/settings?tab=appearance) → Security (/settings?tab=security) → Help & Support (/help) → divider → Sign Out (red, danger styling). See TopBar.tsx.

---

Page Notes (what's actually built, page by page)

All pages below consume real backend data via src/lib/api.ts — zero mock data anywhere in the app. Where a section says "real backend data," it means an actual SQL-backed or live-polled endpoint, not a config file or static array.

Glance (/)

• Hero banner (image with radial-gradient fade mask) + KPI cards overlapping the bottom edge via negative margin.
• 4 status cards: System Status (% of integrations reachable), Infrastructure (resource count + health breakdown from api.listResources()), Integrations (connected/total from api.listIntegrations()), Bookmarks (total + favorites from api.listBookmarks()).
• Middle row (3 columns): Resource Overview (top 6 resources + status), Recent Activity (5 latest from api.listEvents(5)), problem/critical resources widget.
• Bottom row: Connected Integrations grid + 4 Shortcuts buttons (to Settings, BookNest, Infrastructure).
• No footer. Hides the hero gracefully if the banner image fails to load.
• There is no systems.config/infra.config/ping-sweep/fail2ban machinery — that was speculative spec from before the backend existed. Health figures are derived directly from each integration adapter's testConnection() result, polled by the existing /api/integrations list.

Infrastructure (/infrastructure)

• Hero banner at the App.tsx layout level (showHero includes this route), extending behind the sticky, transparent-on-hero-routes TopBar.
• Sub-tabs: Overview (only enabled tab) and Network (disabled, "Coming soon" — intentional, leave alone unless asked).
• 4 status cards: Total Resources, Healthy, Warnings, Critical — from api.listResources().
• Middle row: Resource Distribution (donut by integration type) + Node Status (4-col tile grid, one tile per resource — replaced an earlier world-map concept since a map doesn't make sense for a small/single-site setup).
• Bottom row: Integration Health list + Recent Activity (api.listEvents(4)).
• Card backgrounds use a cardDim + cardVignette (radial-gradient, closest-side keyword — a fixed % leaves a visible hard edge on straight sides) combo on the middle row only, per explicit visual preference; bottom row stays plain/regular.

BookNest (/booknest)

• Hero banner reused at layout level with page-specific tuning (heroPaddingTop/heroObjectPosition lookup maps in App.tsx).
• Large 28px title + "Your Digital Library" subtitle (the one page using pageSubtitles), header grows to 72px.
• Page stats row (Links / Categories / Favorites) + "Delete All" bulk action.
• Main column: Quick Access (top 5 categories) + bookmark groups grid (4 cols, full CRUD with hover edit/delete/star).
• Right sidebar (spans both grid rows via gridRow: '1 / span 2'): Favorites, Recently Added (5 newest), Link Health donut, Category Breakdown donut.
• Add/edit bookmark modal supports auto-detected favicons via guessServiceIconUrl() or manual icon entry.
• All data from api.listBookmarks() / api.listBookmarkCategories() with real create/update/delete calls — no local-only state.

Terminal (/terminal)

• Left sidebar: SSH hosts (integrations of type ssh), click to connect.
• Tab bar + 1/2/4-pane split layout, each pane an independent xterm instance.
• Preferences panel (theme: ArchNest Dark/Matrix/Solarized/Midnight Blue, font size 11-16px, font family) — stored in localStorage (archnest-terminal-prefs), not synced server-side.
• WebSocket to /api/terminal: connect/input/resize/list_tmux/disconnect messages; supports attaching to an existing tmux session or starting a new one.
• Certificate auth (OPKSSH) shells out to the system ssh binary under a pty rather than using the JS SSH client.
• Session logging to ARCHNEST_SESSION_LOG_DIR is backend-supported but has no dedicated viewer UI yet.

Tunnels (/tunnels)

• List + create form for local/remote/dynamic (SOCKS5) SSH tunnels.
• Create form fields conditionally show/hide based on mode (no endpoint host/port fields for dynamic mode).
• Status color map: stopped #7A7D85, connecting #C8A434, retrying #E0A030, connected #2ECC71, error #E74C3C. Polls every 3s.
• Backed by api.listTunnels()/createTunnel()/connectTunnel()/disconnectTunnel()/deleteTunnel().

Files (/files)

• SSH host selector + breadcrumb-navigable SFTP directory browser.
• File editor modal: plain textarea, files up to 50MB (anything larger is download-only). Heuristic binary detection (null bytes/control chars) decides base64 vs. text encoding.
• Inline directory creation, rename, delete, upload, download.
• Host-to-host transfer modal: pick source file + destination host/path, copy-or-move toggle, live progress bar fed by api.getTransfer(id) polling.

Containers (/containers)

• Docker host selector (integrations of type docker) + container list.
• Per-container state badge (running/paused/exited/dead) with context-aware action buttons (Start/Stop/Restart/Pause/Unpause/Remove) — buttons disable themselves for invalid transitions (e.g. can't pause a stopped container).
• Live CPU/memory stats polled only for running containers.
• Logs modal (configurable tail count) and an exec modal (interactive shell via WebSocket to /api/docker/exec).

Remote Desktop (/remote-desktop)

• Left sidebar: hosts from integrations of type remote_desktop.
• Main area is a Guacamole canvas tunneled over WebSocket to /api/guacamole, proxying to the guacd sidecar container (RDP/VNC/Telnet).
• Requires ARCHNEST_GUAC_CRYPT_KEY — sessions fail without it (the backend warns on startup if it's missing).

Host Metrics (/host-metrics)

• Left sidebar: SSH hosts. Selecting one starts a 5-second polling loop against api.getHostMetrics(integrationId), cleared on deselect.
• Cards: CPU/Memory/Disk gauges (color thresholds: green <75%, yellow 75-90%, red ≥90%) + Uptime, then Network Interfaces, Processes (top 10), Listening Ports, Firewall Rules (UFW/iptables), Login Activity.
• Backed by 10 sequential SSH-exec collectors under backend/src/ssh/metrics/ (cpu, memory, disk, uptime, network, system, processes, ports, firewall, login-stats) — sequential on purpose, to avoid exceeding OpenSSH's MaxSessions limit per host.

Settings (/settings)

• Fixed 200px left nav, 7 sections: Profile, Appearance, Security, Integrations, Notifications, Data & Backup, About. URL-deep-linkable via ?tab= (useSearchParams) — use this pattern for any future section.
• Profile: display name, email, avatar upload (FileReader.readAsDataURL → base64 data URL, persisted via api.updateMe() — this one is a real backend round-trip, unlike the rest of the page below).
• Appearance: accent color swatches — local-state only, doesn't persist or apply anywhere (see Known Stubs in HANDOFF.md).
• Security: password-change form + 2FA toggle — currently placeholder UI pending the Phase 2 auth work in HANDOFF.md.
• Integrations: one card per type (Proxmox/Docker/NetBird/Cloudflare/AWS/ Uptime Kuma/Weather/Remote Desktop/SSH), each with type-specific fields (secrets masked, eye-toggle to reveal, "Test Connection" button). Real CRUD via api.createIntegration()/updateIntegration()/deleteIntegration()/testIntegration().
• Notifications: toggles — placeholder, no delivery mechanism (see Known Stubs in HANDOFF.md).
• Data & Backup: full JSON export/import of integrations + secrets + bookmarks + tunnels via backend/src/routes/data.ts — this is the one endpoint that intentionally round-trips decrypted secrets, by design, for backup portability.
• About: static version/license/links info.

Help (/help)

• Fully static — no backend calls. 11 guide cards (one per real page) with a short description and tips. Update this page whenever a new page ships.

Login (/login) / Enrollment (/enrollment)

• Login.tsx: username/password form → api.login() → AuthContext.
• Enrollment.tsx: two-step first-run flow — (1) create the admin account via api.setup(), gated to only work while the users table is empty; (2) optional "Connect Your Services" integration onboarding grid (skippable, same integration form as Settings). Routed to based on GET /api/system/setup-status.

---

Backend Architecture (current, not aspirational)

• backend/ — Fastify 5 + TypeScript (ESM, tsx dev / tsc -b build), better-sqlite3 for storage, deployed as its own Docker container alongside the frontend and a guacd sidecar.
• Auth: single-user-schema JWT (@fastify/jwt) today — see HANDOFF.md for the multi-user/SSO roadmap (Phases 2-4, not yet built).
• Integration credentials split across integrations (non-secret config) and secrets (AES-256-GCM-encrypted, keyed by ARCHNEST_SECRET_KEY) tables — secrets never appear in a generic "list integrations" response by construction, not by remembering to redact a field.
• Every integration type has an adapter in backend/src/integrations/ implementing testConnection() (required) and listResources() (optional); registry.ts maps IntegrationType → adapter. All 9 types (proxmox/docker/netbird/cloudflare/aws/uptime_kuma/weather/ssh/remote_desktop) are real, working adapters — none are stubs anymore.
• backend/src/ssh/ is the shared SSH transport layer powering Terminal, Files, Tunnels, Transfers, and Host Metrics: connect.ts (jump-host chaining, host-key verification, cert auth), sftp.ts (ephemeral SFTP), transfer.ts (host-to-host streamed copy/move with progress + cancel), and metrics/ (the 10 collectors listed above).
• Vite dev server proxies /api → http://localhost:4000; prod routes /api to the backend container via Nginx Proxy Manager.

Future Integration Notes

• AWS/Cloudflare/NetBird/Proxmox/Uptime Kuma adapters are real but currently surface basic resource inventory + health only — deeper cost/pricing/budget data (mentioned in the old blueprint) is not implemented and not currently planned; revisit only if explicitly requested.