Root cause: viewport was hardcoded to width=3840 and body to
3840x2160px. If TV browser has different viewport, content
overflows and can't be zoomed to fit.
Changes:
- viewport meta: width=device-width instead of width=3840
- body: 100vw/100vh instead of fixed pixels
- App container: w-screen h-screen
- font-size: clamp(14px, 1.15vw, 24px) scales with viewport
- Topology: horizontal chain (Modem → FW → Switch) saves
vertical space, VM pills in 3-col grid, all sizes relative
- Kanban: 3-col grid, compact project cards
- All padding/gaps use rem (scale with base font)
- Removed all hardcoded pixel max-widths
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace grid layout with tree diagram:
Modem → Firewall → Switch → 3 Proxmox servers → VMs/CTs
- Services.yaml restructured with parent/type fields
from real Proxmox API data (TYAN CAS, Cisco1, DellT430-2)
- NetworkGraph renders vertical hierarchy with branch lines
- ProxmoxColumn shows server card + VM pills grid
- Compact VmPill for VMs/CTs (status dot + name + last octet)
- InfraCard for physical infrastructure nodes
- Other devices section at bottom (AP, printer, iDRACs, PCs)
- Added type/parent fields to NetworkNode TypeScript interface
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
NodeCard:
- Icon 4xl, name text-xl bold, IP text-lg mono
- Show credentials and URL always (no hidden sections)
- Password hidden with click-to-reveal (dots → text)
- Status dot 4x4, rounded-2xl cards, more padding
- Grid columns min 520px (was 320px)
KanbanBoard:
- Grid 2 columns (was 3) for bigger project cards
- Name text-2xl, progress bar h-5 (was h-3)
- Stage chips text-base with larger count (was text-xs)
- More padding and gaps throughout
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace D3 force graph with categorized grid layout for topology
(54 nodes organized by type: infrastructure, servers, PCs, etc.)
- Replace individual task cards with project summary cards
(progress bars and stage chips instead of 1700+ task cards)
- Compact node cards with status-colored backgrounds
- Better calendar empty state with centered icon
- Refined dark theme with more color depth
- Remove D3 dependency (no longer needed)
- Fix text sizes for 4K TV readability at distance
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add complete network topology with all discovered hosts organized
by category: infrastructure, services, multimedia, projects, PCs.
Also add firewall, printer, phone, camera icons to NodeCard.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Vite + React 18 + TypeScript scaffolding
- Tailwind CSS configured for 4K dark theme (24px base)
- Three full-screen rotating views: Network Topology (D3.js),
Kanban Board (Odoo tasks), Calendar (Odoo events)
- Hooks for data fetching, WebSocket, and view rotation
- Header with live clock and connection status
- Framer Motion fade transitions between views
- Docker Compose with backend (host network for nmap) and
frontend (nginx proxy to backend API/WS)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
