From 37a56dc6b676ba4db645cf29500cf99db83f1f1a Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Tue, 15 Sep 2026 21:03:07 +0200 Subject: [PATCH] Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards - Token swap to near-black grays + lime accent + yellow secondary across index.css, all shared chart/card components, and every feature page - PlatformShell: 62px icon rail, 46px telemetry ticker topbar, containr wordmark, env pill; mobile header preserved - ProjectsPage rebuilt: cursor heading, host stat row (CPU sparkline, MEM/DISK meters, DEPLOYS), Railway-style mini-canvas project cards, mono deployment feed table - All layout-level max-w-[1400px] caps removed -> w-full px-8 - New lime containr.svg synced to public/, root, and dist - Auth glow, chart series colors, service-type colors retuned to palette - Demo mode now seeds representative host telemetry - Smoke test updated for new heading/copy Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- app/frontend/public/containr.svg | 6 +- app/frontend/src/app/App.smoke.test.tsx | 6 +- app/frontend/src/app/layout/PlatformShell.tsx | 107 ++--- app/frontend/src/features/auth/pages.tsx | 10 +- .../src/features/builds/pages/BuildsPage.tsx | 14 +- .../features/projects/pages/ProjectsPage.tsx | 445 +++++++++--------- app/frontend/src/features/secondary/pages.tsx | 38 +- .../secondary/pages/ComponentShowcase.tsx | 40 +- .../service/pages/ServiceDetailPage.tsx | 20 +- .../service/pages/ServiceMetricsDashboard.tsx | 16 +- .../templates/pages/TemplatesPage.tsx | 14 +- .../workspace/canvas/ProjectCanvas.tsx | 6 +- .../src/features/workspace/canvas/nodes.tsx | 8 +- .../workspace/components/MetricsDashboard.tsx | 18 +- .../workspace/pages/ProjectWorkspacePage.tsx | 16 +- app/frontend/src/index.css | 348 ++++++++++---- app/frontend/src/shared/components/Button.tsx | 4 +- app/frontend/src/shared/components/Charts.tsx | 12 +- .../src/shared/components/DonutChart.tsx | 2 +- .../shared/components/EnhancedMetricCard.tsx | 14 +- .../src/shared/components/MetricCard.tsx | 6 +- containr.svg | 6 +- docs/design/explorations/01-midnight-ops.html | 78 +++ docs/design/explorations/02-terminal.html | 72 +++ docs/design/explorations/03-aurora-glass.html | 81 ++++ docs/design/explorations/04-paper-ops.html | 78 +++ docs/design/explorations/05-orbit-slate.html | 78 +++ docs/design/explorations/06-midnight-v2.html | 97 ++++ docs/design/explorations/07-terminal-v2.html | 95 ++++ .../explorations/08-midnight-terminal.html | 98 ++++ docs/design/explorations/09-ledger.html | 86 ++++ docs/design/explorations/10-softcell.html | 99 ++++ docs/design/explorations/11-flightdeck.html | 108 +++++ docs/design/explorations/12-vector.html | 104 ++++ docs/design/explorations/13-meridian.html | 104 ++++ .../explorations/14-midnight-violet.html | 109 +++++ .../design/explorations/15-midnight-cyan.html | 109 +++++ .../explorations/16-midnight-sunset.html | 109 +++++ docs/design/explorations/17-vertice.html | 195 ++++++++ docs/design/explorations/18-vertice2.html | 215 +++++++++ docs/design/explorations/19-vertice3.html | 201 ++++++++ docs/design/explorations/20-vertice4.html | 223 +++++++++ docs/design/explorations/d06.png | Bin 0 -> 129519 bytes docs/design/explorations/d07.png | Bin 0 -> 78499 bytes docs/design/explorations/d08.png | Bin 0 -> 124820 bytes docs/design/explorations/d09.png | Bin 0 -> 89166 bytes docs/design/explorations/d10.png | Bin 0 -> 117145 bytes docs/design/explorations/d11.png | Bin 0 -> 89195 bytes docs/design/explorations/d12.png | Bin 0 -> 92271 bytes docs/design/explorations/d13.png | Bin 0 -> 85371 bytes docs/design/explorations/d14.png | Bin 0 -> 132345 bytes docs/design/explorations/d15.png | Bin 0 -> 135807 bytes docs/design/explorations/d16.png | Bin 0 -> 132400 bytes docs/design/explorations/d17.png | Bin 0 -> 96256 bytes docs/design/explorations/d18.png | Bin 0 -> 97299 bytes docs/design/explorations/d19.png | Bin 0 -> 77355 bytes docs/design/explorations/d20-app.png | Bin 0 -> 79978 bytes docs/design/explorations/d20-app2.png | Bin 0 -> 82765 bytes docs/design/explorations/d20.png | Bin 0 -> 84693 bytes docs/design/explorations/final-projects.png | Bin 0 -> 84009 bytes docs/design/explorations/s02.png | Bin 0 -> 72961 bytes docs/design/explorations/s03.png | Bin 0 -> 379444 bytes docs/design/explorations/s04.png | Bin 0 -> 97870 bytes docs/design/explorations/s05.png | Bin 0 -> 128134 bytes docs/design/explorations/s1.png | Bin 0 -> 102851 bytes docs/design/explorations/sw2-set.png | Bin 0 -> 89118 bytes docs/design/explorations/sw2-svc2.png | Bin 0 -> 94786 bytes docs/design/explorations/sw2-usage.png | Bin 0 -> 45172 bytes docs/design/explorations/sweep-auth.png | Bin 0 -> 109928 bytes docs/design/explorations/sweep-builds.png | Bin 0 -> 81413 bytes docs/design/explorations/sweep-svc.png | Bin 0 -> 94776 bytes docs/design/explorations/sweep-tpl.png | Bin 0 -> 143990 bytes docs/design/explorations/sweep-ws.png | Bin 0 -> 111791 bytes 73 files changed, 3008 insertions(+), 487 deletions(-) create mode 100644 docs/design/explorations/01-midnight-ops.html create mode 100644 docs/design/explorations/02-terminal.html create mode 100644 docs/design/explorations/03-aurora-glass.html create mode 100644 docs/design/explorations/04-paper-ops.html create mode 100644 docs/design/explorations/05-orbit-slate.html create mode 100644 docs/design/explorations/06-midnight-v2.html create mode 100644 docs/design/explorations/07-terminal-v2.html create mode 100644 docs/design/explorations/08-midnight-terminal.html create mode 100644 docs/design/explorations/09-ledger.html create mode 100644 docs/design/explorations/10-softcell.html create mode 100644 docs/design/explorations/11-flightdeck.html create mode 100644 docs/design/explorations/12-vector.html create mode 100644 docs/design/explorations/13-meridian.html create mode 100644 docs/design/explorations/14-midnight-violet.html create mode 100644 docs/design/explorations/15-midnight-cyan.html create mode 100644 docs/design/explorations/16-midnight-sunset.html create mode 100644 docs/design/explorations/17-vertice.html create mode 100644 docs/design/explorations/18-vertice2.html create mode 100644 docs/design/explorations/19-vertice3.html create mode 100644 docs/design/explorations/20-vertice4.html create mode 100644 docs/design/explorations/d06.png create mode 100644 docs/design/explorations/d07.png create mode 100644 docs/design/explorations/d08.png create mode 100644 docs/design/explorations/d09.png create mode 100644 docs/design/explorations/d10.png create mode 100644 docs/design/explorations/d11.png create mode 100644 docs/design/explorations/d12.png create mode 100644 docs/design/explorations/d13.png create mode 100644 docs/design/explorations/d14.png create mode 100644 docs/design/explorations/d15.png create mode 100644 docs/design/explorations/d16.png create mode 100644 docs/design/explorations/d17.png create mode 100644 docs/design/explorations/d18.png create mode 100644 docs/design/explorations/d19.png create mode 100644 docs/design/explorations/d20-app.png create mode 100644 docs/design/explorations/d20-app2.png create mode 100644 docs/design/explorations/d20.png create mode 100644 docs/design/explorations/final-projects.png create mode 100644 docs/design/explorations/s02.png create mode 100644 docs/design/explorations/s03.png create mode 100644 docs/design/explorations/s04.png create mode 100644 docs/design/explorations/s05.png create mode 100644 docs/design/explorations/s1.png create mode 100644 docs/design/explorations/sw2-set.png create mode 100644 docs/design/explorations/sw2-svc2.png create mode 100644 docs/design/explorations/sw2-usage.png create mode 100644 docs/design/explorations/sweep-auth.png create mode 100644 docs/design/explorations/sweep-builds.png create mode 100644 docs/design/explorations/sweep-svc.png create mode 100644 docs/design/explorations/sweep-tpl.png create mode 100644 docs/design/explorations/sweep-ws.png diff --git a/app/frontend/public/containr.svg b/app/frontend/public/containr.svg index e872de2..256a12a 100644 --- a/app/frontend/public/containr.svg +++ b/app/frontend/public/containr.svg @@ -1,12 +1,12 @@ - - + + - + diff --git a/app/frontend/src/app/App.smoke.test.tsx b/app/frontend/src/app/App.smoke.test.tsx index 7c0a9db..2af983d 100644 --- a/app/frontend/src/app/App.smoke.test.tsx +++ b/app/frontend/src/app/App.smoke.test.tsx @@ -30,9 +30,9 @@ describe('App smoke routes', () => { it('renders projects page in demo mode', async () => { renderApp('/projects?demo=1'); - expect(await screen.findByRole('heading', { name: /^projects$/i })).toBeInTheDocument(); - expect(screen.getByText(/demo mode active/i)).toBeInTheDocument(); - expect(screen.getByText(/deploy, manage, and monitor containerized services/i)).toBeInTheDocument(); + expect(await screen.findByRole('heading', { name: /^projects\s*_?$/i })).toBeInTheDocument(); + expect(screen.getByText(/recent deployments/i)).toBeInTheDocument(); + expect(screen.getAllByText(/core-services/i).length).toBeGreaterThan(0); }); it('renders builds page in demo mode', async () => { diff --git a/app/frontend/src/app/layout/PlatformShell.tsx b/app/frontend/src/app/layout/PlatformShell.tsx index 40c4f60..e03ecd6 100644 --- a/app/frontend/src/app/layout/PlatformShell.tsx +++ b/app/frontend/src/app/layout/PlatformShell.tsx @@ -130,26 +130,18 @@ export function PlatformShell() {
- -
- -
- Containr + + containr -
- - +
+ {isDemoMode ? 'demo' : 'nominal'} + node local
-
+
+ + +
+ +
+ env:production
-
- {/* Main Content */} -
- {/* Toolbar */} -
-
- - setSearch(e.target.value)} - placeholder="Search projects by name or description..." - className="w-full h-11 pl-11 pr-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all" - /> -
- -
- - {/* Demo Mode Banner */} - {isDemoMode && ( -
-
- - Demo mode active — using sample data for preview + {/* Host stat row */} +
+
+
HOST.CPU
+
{cpuPct ?? '—'}%
+ {isDemoMode ? ( +
+ {[28, 44, 36, 58, 42, 66, 50, 34, 56, 40, 30, 20].map((h, i) => ( + + ))} +
+ ) : null} +
+ {isDemoMode || host ? ( + <>healthy · {host?.cpu.cores ?? 16} cores + ) : 'no telemetry'}
- )} +
+
HOST.MEM
+
{memPct ?? '—'}%
+
85 ? 'r' : 'y'} style={{ width: `${memPct ?? 0}%` }} />
+
{isDemoMode ? '9.8G / 13G' : host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)}` : 'no telemetry'}
+
+
+
HOST.DISK
+
{diskPct ?? '—'}%
+
+
{isDemoMode ? '338G of 465G · high' : host ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}` : 'no telemetry'}
+
+
+
DEPLOYS
+
{isDemoMode ? 18 : deployCount}
+
+
{isDemoMode ? '17 ok' : `${builds.filter((b) => (b.status ?? '').toLowerCase() !== 'failed').length} recent`}
+
+
+ + {/* Projects grid */} +

PROJECTS {filteredProjects.length} records

- {/* Loading State */} {!isDemoMode && projectsQuery.isLoading && ( -
+
{Array.from({ length: 6 }).map((_, i) => ( -
+
))}
)} - {/* Error State */} {!isDemoMode && projectsQuery.isError && (
-
+

Failed to load projects

@@ -307,34 +303,49 @@ export function ProjectsPage() {
)} - {/* Empty State */} - {((isDemoMode && filteredProjects.length === 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length === 0)) && ( + {filteredProjects.length === 0 && !projectsQuery.isLoading && !projectsQuery.isError ? (
-
+

No projects yet

-

+

Create your first project to start deploying services with visual topology management.

-
- )} + ) : null} - {/* Project Grid */} - {((isDemoMode && filteredProjects.length > 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length > 0)) && ( -
+ {filteredProjects.length > 0 && ( +
{filteredProjects.map((project) => ( ))}
)} + + {/* Deploy feed */} +

RECENT DEPLOYMENTS latest

+
+ + + + + + {feed.length === 0 ? ( + + ) : feed.map((d) => ( + + + + + + ))} + +
SERVICESTATUSWHEN
no deployments yet
{d.name}{d.project ? {d.project} : null}{d.status}{d.when}
+
{/* Create Modal */} @@ -349,18 +360,18 @@ export function ProjectsPage() {
-
-