TDvorak/Containr
1
0 Fork 0
mirror of https://github.com/Dvorinka/Containr.git synced 2026-10-28 07:41:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards

Browse Source 
- 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>
This commit is contained in:
Tomas DvorakandDevin committed 2026-09-15 21:03:07 +02:00
1 parent 04d91bd69a
commit 37a56dc6b6
73 files changed
+3008 -487
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/frontend/public/containr.svg
+3 -3
View File
@@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f4497f"/>
<stop offset="1" stop-color="#cf1d5b"/>
<stop offset="0" stop-color="#cdf06f"/>
<stop offset="1" stop-color="#7fb524"/>
</linearGradient>
</defs>
<rect width="64" height="64" rx="15" fill="url(#bg)"/>
<g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
<g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="15" y="18" width="34" height="26" rx="4"/>
<path d="M23 18v26M31 18v26M39 18v26"/>
<path d="M20 51h24"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 582 B

app/frontend/src/app/App.smoke.test.tsx
+3 -3
View File
@@ -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 () => {
app/frontend/src/app/layout/PlatformShell.tsx
+48 -59
View File
@@ -130,26 +130,18 @@ export function PlatformShell() {
<div className="relative flex min-h-screen">
<aside
className="hidden h-screen shrink-0 flex-col border-r md:flex"
className="hidden h-screen shrink-0 flex-col items-center border-r py-4 md:flex"
style={{
width: '232px',
width: '62px',
background: 'var(--bg-base)',
borderRightColor: 'var(--border-subtle)',
}}
>
<NavLink
to={href('/projects')}
className="flex h-[58px] shrink-0 items-center gap-3 border-b px-4"
style={{ borderBottomColor: 'var(--border-subtle)' }}
>
<img src="/containr.svg" alt="Containr" className="h-9 w-9 rounded-[var(--radius-md)]" />
<div className="min-w-0">
<p className="text-sm font-semibold text-[var(--text-primary)]">Containr</p>
<p className="text-[11px] text-[var(--text-tertiary)]">Deploy platform</p>
</div>
<NavLink to={href('/projects')} className="mb-3" title="Containr">
<img src="/containr.svg" alt="Containr" className="h-[38px] w-[38px] rounded-xl" />
</NavLink>
<nav className="flex min-h-0 flex-1 flex-col gap-1 px-3 py-4">
<nav className="flex flex-col items-center gap-1.5">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = isActiveRoute(item.href);
@@ -157,75 +149,72 @@ export function PlatformShell() {
<NavLink
key={item.href}
to={href(item.href)}
className={`flex h-10 items-center gap-3 rounded-[var(--radius-md)] px-3 text-sm font-medium transition-colors ${
title={item.label}
className={`relative flex h-10 w-10 items-center justify-center rounded-[11px] transition-colors ${
isActive
? 'bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
: 'text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]'
: 'text-[var(--text-tertiary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-secondary)]'
}`}
>
{isActive ? (
<span
className="absolute -left-[11px] h-4 w-[2.5px] rounded-full"
style={{ background: 'var(--accent-primary)' }}
/>
) : null}
<Icon size={17} />
{item.label}
</NavLink>
);
})}
</nav>
<div className="shrink-0 border-t p-3" style={{ borderTopColor: 'var(--border-subtle)' }}>
<NavLink
to={href('/settings')}
className="mb-2 flex items-center gap-3 rounded-[var(--radius-md)] p-2 hover:bg-[var(--surface-muted)]"
<div className="flex-1" />
<div className="flex flex-col items-center gap-2">
<button
type="button"
onClick={() => void signOut()}
title={`Sign out (${userName})`}
className="flex h-10 w-10 items-center justify-center rounded-[11px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--error-soft)] hover:text-[var(--error)]"
>
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--surface-card-hover)] text-xs font-semibold text-[var(--text-primary)]">
{initials}
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-[var(--text-primary)]">{userName}</p>
<p className="truncate text-xs text-[var(--text-tertiary)]">{userEmail}</p>
</div>
</NavLink>
<div className="grid grid-cols-2 gap-2">
<NavLink
to={href('/settings')}
className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
style={{ borderColor: 'var(--border-subtle)' }}
>
<Settings size={14} />
Settings
</NavLink>
<button
type="button"
onClick={() => void signOut()}
className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--error)] hover:bg-[var(--error-soft)]"
style={{ borderColor: 'var(--error-soft)' }}
>
<LogOut size={14} />
Sign out
</button>
<LogOut size={16} />
</button>
<div
title={userEmail}
className="flex h-[30px] w-[30px] items-center justify-center rounded-full text-[11px] font-bold"
style={{ background: 'linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))', color: 'var(--accent-on)' }}
>
{initials}
</div>
</div>
</aside>
<div className="relative z-10 flex min-h-screen min-w-0 flex-1 flex-col overflow-hidden">
<header
className="hidden h-[58px] shrink-0 items-center border-b px-5 md:flex"
className="hidden h-[46px] shrink-0 items-center border-b px-5 md:flex"
style={{
background: 'var(--bg-base)',
borderBottomColor: 'var(--border-subtle)',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '11px',
}}
>
<NavLink to={href('/projects')} className="mr-4 flex items-center gap-2 text-[var(--text-primary)]">
<div className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]">
<Container size={15} />
</div>
<span className="text-sm font-semibold">Containr</span>
<NavLink to={href('/projects')} className="mr-5 text-sm font-extrabold tracking-tight text-[var(--text-primary)]" style={{ fontFamily: 'Inter, sans-serif' }}>
contain<span style={{ color: 'var(--accent-primary)' }}>r</span>
</NavLink>
<div className="search-box max-w-[420px]">
<Search size={14} />
<input type="text" placeholder="Search projects, builds, logs..." />
<div className="flex items-center gap-5">
<span className="v-tick"><i className="sig" /><b>{isDemoMode ? 'demo' : 'nominal'}</b></span>
<span className="v-tick"><i className="sig" style={{ background: 'var(--text-tertiary)' }} />node <b>local</b></span>
</div>
<div className="ml-auto flex items-center gap-2">
<div className="search-box ml-6 max-w-[300px]" style={{ height: 30 }}>
<Search size={13} />
<input type="text" placeholder="search…" className="v-mono" style={{ fontSize: 11.5 }} />
</div>
<div className="ml-auto flex items-center gap-4">
<span className="v-env">env:production</span>
<button
type="button"
onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
@@ -240,8 +229,8 @@ export function PlatformShell() {
type="button"
onClick={() => pullMutation.mutate()}
disabled={isDemoMode || pullMutation.isPending || !upgradeQuery.data?.imageRef}
className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
style={{ background: '#e8316a' }}
className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-[var(--accent-on)] disabled:cursor-not-allowed disabled:opacity-50"
style={{ background: 'var(--accent-primary)' }}
title={upgradeQuery.data?.message || 'Pull latest configured image'}
>
{pullMutation.isPending ? <RefreshCw size={14} className="animate-spin" /> : <UploadCloud size={14} />}
@@ -305,7 +294,7 @@ export function PlatformShell() {
<header className="md:hidden sticky top-0 z-50 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/85 backdrop-blur-2xl">
<div className="flex items-center justify-between p-4">
<NavLink to={href('/projects')} className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-white">
<div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)]">
<Container size={16} />
</div>
<span className="font-headline font-semibold text-[var(--text-primary)]">Containr</span>
app/frontend/src/features/auth/pages.tsx
+5 -5
View File
@@ -69,7 +69,7 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
<div className="ambient-glow" />
<div
className="absolute left-1/2 top-0 h-[420px] w-[720px] -translate-x-1/2 -translate-y-1/2 rounded-full"
style={{ background: 'radial-gradient(ellipse at center, rgba(232,49,106,0.16) 0%, transparent 65%)' }}
style={{ background: 'radial-gradient(ellipse at center, rgba(180,227,74,0.10) 0%, transparent 65%)' }}
/>
<div className="relative flex min-h-screen flex-col items-center justify-center px-5 py-10">
<div className="mb-8 flex flex-col items-center">
@@ -203,8 +203,8 @@ export function SignInPage() {
<button
type="submit"
disabled={isSubmitting || sessionQuery.isPending}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: '#e8316a' }}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <Mail size={15} />}
Continue
@@ -336,8 +336,8 @@ export function SignUpPage() {
<button
type="submit"
disabled={isSubmitting || sessionQuery.isPending}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: '#e8316a' }}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
Create Account
app/frontend/src/features/builds/pages/BuildsPage.tsx
+7 -7
View File
@@ -164,10 +164,10 @@ export function BuildsPage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">Build Pipeline</h1>
<h1 className="v-title">Build Pipeline<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">Monitor build progress and manage jobs</p>
</div>
@@ -192,7 +192,7 @@ export function BuildsPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -203,7 +203,7 @@ export function BuildsPage() {
)}
{/* Stats Overview */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="panel p-4">
<div className="flex items-center justify-between mb-3">
@@ -245,7 +245,7 @@ export function BuildsPage() {
</div>
{/* Filters */}
<div className="mx-auto w-full max-w-[1400px] px-6">
<div className="w-full px-8">
<div className="panel p-4">
<div className="flex items-center gap-2 mb-4">
<Filter size={16} className="text-[var(--text-tertiary)]" />
@@ -307,7 +307,7 @@ export function BuildsPage() {
</div>
{/* Build Table */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="panel overflow-hidden">
{!isDemoMode && buildsQuery.isLoading ? (
<div className="p-12 text-center">
@@ -397,7 +397,7 @@ export function BuildsPage() {
<div className="h-2 rounded-full bg-[var(--surface-muted)] overflow-hidden">
<div
className="h-full rounded-full transition-all duration-300"
style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: '#e8316a' }}
style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: 'var(--accent-primary)' }}
/>
</div>
</div>
app/frontend/src/features/projects/pages/ProjectsPage.tsx
+226 -219
View File
@@ -1,39 +1,46 @@
import { useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { createProject, listProjects, type ProjectEntity, type ProjectStats } from '@/lib/api-client';
import {
Plus,
Search,
ArrowRight,
Layers,
Clock,
Sparkles,
import {
createProject,
getHostMonitoring,
listBuilds,
listProjects,
type ProjectEntity,
type ProjectStats,
} from '@/lib/api-client';
import {
Search,
FolderOpen,
X,
Check,
AlertTriangle
} from 'lucide-react';
const demoProjects: ProjectEntity[] = [
{
id: 'project-demo',
name: 'Demo Project',
name: 'core-services',
description: 'Sample project with mock services for UI preview.',
createdAt: new Date(Date.now() - 14 * 86_400_000).toISOString(),
updatedAt: new Date().toISOString(),
stats: { service_count: 3, deployment_count: 12, running_services: 2 },
stats: { service_count: 5, deployment_count: 12, running_services: 5 },
},
{
id: 'project-staging',
name: 'Staging Environment',
name: 'ml-pipeline',
description: 'Pre-production environment for testing new releases.',
createdAt: new Date(Date.now() - 7 * 86_400_000).toISOString(),
updatedAt: new Date(Date.now() - 2 * 86_400_000).toISOString(),
stats: { service_count: 1, deployment_count: 5, running_services: 1 },
stats: { service_count: 2, deployment_count: 5, running_services: 1 },
},
];
const demoDeploys = [
{ id: 'd1', name: 'api-gateway', project: 'core-services', status: 'DEPLOYED', when: '4m' },
{ id: 'd2', name: 'web-frontend', project: 'core-services', status: 'BUILDING', when: '6m' },
{ id: 'd3', name: 'worker', project: 'ml-pipeline', status: 'FAILED', when: '1h' },
{ id: 'd4', name: 'site', project: 'growth-site', status: 'DEPLOYED', when: '2h' },
];
function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
if (stats.service_count === 0) return 'healthy';
if (stats.running_services === stats.service_count) return 'healthy';
@@ -41,145 +48,85 @@ function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critica
return 'critical';
}
function healthConfig(health: ReturnType<typeof getHealthStatus>) {
function healthBadge(health: ReturnType<typeof getHealthStatus>) {
switch (health) {
case 'healthy':
return {
label: 'Operational',
color: 'var(--success)',
bg: 'var(--success-soft)',
Icon: Check
};
return { label: 'RUNNING', cls: 'v-st-ok' };
case 'degraded':
return {
label: 'Degraded',
color: 'var(--warning)',
bg: 'var(--warning-soft)',
Icon: AlertTriangle
};
return { label: 'DEGRADED', cls: 'v-st-warn' };
case 'critical':
return {
label: 'Critical',
color: 'var(--error)',
bg: 'var(--error-soft)',
Icon: X
};
return { label: 'DOWN', cls: 'v-st-fail' };
}
}
function formatRelative(date?: string): string {
if (!date) return '—';
const now = Date.now();
const then = new Date(date).getTime();
const diff = now - then;
const diff = Date.now() - new Date(date).getTime();
if (diff < 60_000) return 'just now';
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
return `${Math.floor(diff / 86_400_000)}d ago`;
}
function MiniCanvas({ project }: { project: ProjectEntity }) {
const count = project.stats.service_count;
const running = project.stats.running_services;
const shown = Math.min(count, 4);
const extra = count - shown;
const positions = [
{ left: 14, top: 22 },
{ left: 96, top: 22 },
{ left: 14, top: 62 },
{ left: 96, top: 62 },
];
return (
<div className="v-mini">
{count >= 2 ? <div className="v-edge" style={{ left: 46, top: 38, width: 50 }} /> : null}
{count >= 4 ? <div className="v-edge" style={{ left: 46, top: 78, width: 50 }} /> : null}
{Array.from({ length: shown }).map((_, i) => (
<div key={i} className="v-node" style={positions[i]}>
<b className={`v-nd ${i < running ? '' : 'r'}`} />
svc{i + 1}
</div>
))}
{extra > 0 ? (
<div className="v-more" style={{ left: 178, top: 22 }}>+{extra}</div>
) : null}
</div>
);
}
function ProjectCard({ project, href }: { project: ProjectEntity; href: string }) {
const navigate = useNavigate();
const health = getHealthStatus(project.stats);
const config = healthConfig(health);
const Icon = config.Icon;
const healthPercent = project.stats.service_count === 0
? 100
: Math.round((project.stats.running_services / project.stats.service_count) * 100);
const badge = healthBadge(health);
const envOk = health === 'healthy';
return (
<article
className="group panel p-0 overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-[var(--shadow-lg)] hover:border-[var(--border-default)]"
<article
className="group panel p-4 cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)]"
onClick={() => navigate(href)}
>
{/* Header with solid accent */}
<div className="relative px-5 pt-5 pb-4">
<div className="absolute inset-0 h-28 bg-[#e8316a]/10" />
<div className="relative flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<h3 className="font-headline text-lg font-semibold tracking-tight text-[var(--text-primary)] truncate group-hover:text-[var(--accent-primary)] transition-colors">
{project.name}
</h3>
<p className="mt-1.5 text-sm text-[var(--text-secondary)] line-clamp-2 leading-relaxed">
{project.description || 'No description provided'}
</p>
</div>
<div
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-xs font-medium ring-1 ring-inset"
style={{ background: config.bg, color: config.color, borderColor: `${config.color}30` }}
>
<Icon size={12} />
{config.label}
</div>
</div>
<div className="mb-3 flex items-center gap-2">
<h3 className="truncate text-[14.5px] font-bold tracking-tight text-[var(--text-primary)]">
{project.name}
</h3>
<span className={`v-st ml-auto ${badge.cls}`}>{badge.label}</span>
</div>
{/* Service Topology Preview */}
<div className="px-5 py-3 border-y border-[var(--border-subtle)] bg-[var(--surface-muted)]/30">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(project.stats.service_count, 5) }).map((_, i) => (
<div
key={i}
className="w-8 h-8 rounded-lg bg-[var(--surface-card)] border border-[var(--border-subtle)] flex items-center justify-center transition-colors group-hover:border-[var(--border-default)]"
>
<Layers size={14} className="text-[var(--text-tertiary)]" />
</div>
))}
{project.stats.service_count > 5 && (
<div className="w-8 h-8 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)] flex items-center justify-center text-xs text-[var(--text-tertiary)] font-medium">
+{project.stats.service_count - 5}
</div>
)}
</div>
<span className="text-xs text-[var(--text-tertiary)] font-medium">
{project.stats.service_count} service{project.stats.service_count !== 1 ? 's' : ''}
</span>
</div>
</div>
{/* Stats Grid */}
<div className="p-5">
<div className="grid grid-cols-3 gap-4">
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Services</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{project.stats.service_count}</p>
</div>
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Running</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--success)]">{project.stats.running_services}</p>
</div>
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Health</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{healthPercent}%</p>
</div>
</div>
{/* Health Progress Bar */}
<div className="mt-4">
<div className="h-1.5 rounded-full bg-[var(--surface-muted)] overflow-hidden">
<div
className="h-full rounded-full transition-all duration-500"
style={{
width: `${healthPercent}%`,
background: config.color
}}
/>
</div>
</div>
{/* Footer */}
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)]">
<Clock size={12} />
<span>Updated {formatRelative(project.updatedAt)}</span>
</div>
<div className="flex items-center gap-1 text-xs font-medium text-[var(--accent-primary)] opacity-0 group-hover:opacity-100 transition-all duration-200 translate-x-2 group-hover:translate-x-0">
<span>Open</span>
<ArrowRight size={12} />
</div>
</div>
<MiniCanvas project={project} />
<div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
<i
className="inline-block h-1.5 w-1.5 rounded-full"
style={{ background: envOk ? 'var(--success)' : 'var(--warning)' }}
/>
<span className="text-[var(--text-secondary)]">
{envOk ? 'production' : 'degraded'}
</span>
<span>·</span>
<span>
{project.stats.running_services}/{project.stats.service_count} online
</span>
<span className="ml-auto">{formatRelative(project.updatedAt)}</span>
</div>
</article>
);
@@ -194,8 +141,8 @@ export function ProjectsPage() {
const [search, setSearch] = useState('');
const [isCreateOpen, setCreateOpen] = useState(false);
const [form, setForm] = useState({ name: '', description: '' });
const projectHref = (projectId: string) =>
const projectHref = (projectId: string) =>
isDemoMode ? `/projects/${projectId}?demo=1` : `/projects/${projectId}`;
const projectsQuery = useQuery({
@@ -203,6 +150,18 @@ export function ProjectsPage() {
enabled: !isDemoMode,
queryFn: listProjects,
});
const hostQuery = useQuery({
queryKey: ['host-monitoring'],
enabled: !isDemoMode,
queryFn: getHostMonitoring,
refetchInterval: 30_000,
});
const buildsQuery = useQuery({
queryKey: ['recent-deploys'],
enabled: !isDemoMode,
queryFn: () => listBuilds({ page: 1, limit: 5 }),
refetchInterval: 30_000,
});
const createProjectMutation = useMutation({
mutationFn: () => createProject({ name: form.name.trim(), description: form.description.trim() || undefined }),
@@ -218,88 +177,125 @@ export function ProjectsPage() {
const source = isDemoMode ? demoProjects : projectsQuery.data ?? [];
if (!search.trim()) return source;
const needle = search.toLowerCase();
return source.filter((project) =>
project.name.toLowerCase().includes(needle) ||
return source.filter((project) =>
project.name.toLowerCase().includes(needle) ||
project.description?.toLowerCase().includes(needle)
);
}, [isDemoMode, projectsQuery.data, search]);
const projects = isDemoMode ? demoProjects : projectsQuery.data ?? [];
const totalServices = projects.reduce((sum, p) => sum + p.stats.service_count, 0);
const runningServices = projects.reduce((sum, p) => sum + p.stats.running_services, 0);
const host = hostQuery.data;
const cpuPct = isDemoMode ? 14 : host && host.cpu.cores > 0
? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
: null;
const memPct = isDemoMode ? 72 : host ? Math.round(host.memory.usagePercent) : null;
const diskPct = isDemoMode ? 73 : host ? Math.round(host.storage.usagePercent) : null;
const fmtGB = (v: number) => `${(v / (1024 * 1024 * 1024)).toFixed(0)}G`;
const builds = isDemoMode ? [] : buildsQuery.data?.builds ?? [];
const deployCount = buildsQuery.data?.total ?? builds.length;
const feed = isDemoMode
? demoDeploys
: builds.map((b) => ({
id: b.id,
name: b.imageName || b.serviceId || b.id,
project: '',
status: (b.status || 'queued').toUpperCase(),
when: formatRelative(b.startedAt ?? b.completedAt),
}));
const statusClass = (status: string) =>
status === 'DEPLOYED' || status === 'SUCCESS' || status === 'SUCCEEDED'
? 'v-st-ok'
: status === 'BUILDING' || status === 'RUNNING' || status === 'QUEUED'
? 'v-st-run'
: status === 'FAILED' || status === 'CANCELLED'
? 'v-st-fail'
: 'v-st-off';
return (
<div className="min-h-screen relative">
{/* Header */}
<div className="border-b border-[var(--border-subtle)]">
<div className="mx-auto w-full max-w-[1400px] px-6 py-5 flex items-center justify-between">
<div className="flex items-center gap-3">
<div
className="flex items-center justify-center rounded-[var(--radius-md)]"
style={{ width: '36px', height: '36px', background: '#e8316a' }}
>
<FolderOpen size={17} className="text-white" />
</div>
<div>
<h1 className="font-headline text-xl font-semibold tracking-tight text-[var(--text-primary)]">
Projects
</h1>
<p className="text-xs text-[var(--text-tertiary)]">
Deploy, manage, and monitor containerized services
</p>
</div>
<div className="min-h-screen">
<div className="w-full px-8 py-6">
{/* Page head */}
<div className="mb-6 flex items-center justify-between gap-5">
<div>
<h1 className="v-title">Projects<span className="v-cursor">_</span></h1>
<p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
<b className="text-[var(--text-secondary)]">{String(projects.length).padStart(2, '0')}</b> projects ·{' '}
<b className="text-[var(--text-secondary)]">{String(totalServices).padStart(2, '0')}</b> services ·{' '}
<b className="text-[var(--text-secondary)]">{runningServices}</b> online
</p>
</div>
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
<div className="w-1.5 h-1.5 rounded-full bg-[var(--success)] live-pulse" />
<span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-tertiary)]">
Workspace
</span>
<div className="flex items-center gap-2.5">
<div className="search-box" style={{ width: 240 }}>
<Search size={13} />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="search projects…"
className="v-mono"
style={{ fontSize: 11.5 }}
/>
</div>
<button onClick={() => setCreateOpen(true)} className="v-btn">
+ new project
</button>
</div>
</div>
</div>
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
{/* Toolbar */}
<div className="flex flex-col sm:flex-row gap-4 mb-8">
<div className="relative flex-1">
<Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]" />
<input
value={search}
onChange={(e) => 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"
/>
</div>
<button
onClick={() => setCreateOpen(true)}
className="flex items-center justify-center gap-2 h-11 px-5 rounded-[var(--radius-md)] text-white font-medium text-sm shadow-lg hover:shadow-xl transition-all duration-300"
style={{ background: '#e8316a' }}
>
<Plus size={16} />
<span>New Project</span>
</button>
</div>
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mb-6 px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
<span>Demo mode active — using sample data for preview</span>
{/* Host stat row */}
<div className="mb-7 grid grid-cols-2 gap-3 lg:grid-cols-4">
<div className="v-stat">
<div className="v-k"><span>HOST.CPU</span><span className="v-live" /></div>
<div className="v-v">{cpuPct ?? '—'}<span>%</span></div>
{isDemoMode ? (
<div className="v-spark">
{[28, 44, 36, 58, 42, 66, 50, 34, 56, 40, 30, 20].map((h, i) => (
<i key={i} style={{ height: `${h}%` }} />
))}
</div>
) : null}
<div className="v-d">
{isDemoMode || host ? (
<><b style={{ color: 'var(--success)' }}>healthy</b> · {host?.cpu.cores ?? 16} cores</>
) : 'no telemetry'}
</div>
</div>
)}
<div className="v-stat">
<div className="v-k"><span>HOST.MEM</span><span className="v-live" /></div>
<div className="v-v">{memPct ?? '—'}<span>%</span></div>
<div className="v-meter"><i className={memPct !== null && memPct > 85 ? 'r' : 'y'} style={{ width: `${memPct ?? 0}%` }} /></div>
<div className="v-d">{isDemoMode ? '9.8G / 13G' : host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)}` : 'no telemetry'}</div>
</div>
<div className="v-stat">
<div className="v-k"><span>HOST.DISK</span><span className="v-live" /></div>
<div className="v-v">{diskPct ?? '—'}<span>%</span></div>
<div className="v-meter"><i className="r" style={{ width: `${diskPct ?? 0}%` }} /></div>
<div className="v-d">{isDemoMode ? '338G of 465G · high' : host ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}` : 'no telemetry'}</div>
</div>
<div className="v-stat">
<div className="v-k"><span>DEPLOYS</span></div>
<div className="v-v">{isDemoMode ? 18 : deployCount}</div>
<div className="v-meter"><i style={{ width: '94%' }} /></div>
<div className="v-d"><b style={{ color: 'var(--success)' }}>{isDemoMode ? '17 ok' : `${builds.filter((b) => (b.status ?? '').toLowerCase() !== 'failed').length} recent`}</b></div>
</div>
</div>
{/* Projects grid */}
<p className="v-sect">PROJECTS <span className="v-sect-r">{filteredProjects.length} records</span></p>
{/* Loading State */}
{!isDemoMode && projectsQuery.isLoading && (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="panel h-[320px] animate-pulse bg-[var(--surface-card)]" />
<div key={i} className="panel h-[210px] animate-pulse" />
))}
</div>
)}
{/* Error State */}
{!isDemoMode && projectsQuery.isError && (
<div className="panel p-8 text-center">
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--error-soft)]">
<X size={24} className="text-[var(--error)]" />
</div>
<p className="text-lg font-medium text-[var(--text-primary)]">Failed to load projects</p>
@@ -307,34 +303,49 @@ export function ProjectsPage() {
</div>
)}
{/* Empty State */}
{((isDemoMode && filteredProjects.length === 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length === 0)) && (
{filteredProjects.length === 0 && !projectsQuery.isLoading && !projectsQuery.isError ? (
<div className="panel p-12 text-center">
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[var(--accent-primary-soft)] flex items-center justify-center">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--accent-primary-soft)]">
<FolderOpen size={28} className="text-[var(--accent-primary)]" />
</div>
<p className="text-xl font-semibold text-[var(--text-primary)]">No projects yet</p>
<p className="mt-2 text-[var(--text-secondary)] max-w-md mx-auto">
<p className="mx-auto mt-2 max-w-md text-[var(--text-secondary)]">
Create your first project to start deploying services with visual topology management.
</p>
<button
onClick={() => setCreateOpen(true)}
className="mt-6 inline-flex items-center gap-2 px-5 py-2.5 rounded-[var(--radius-md)] border border-[var(--accent-primary)] text-[var(--accent-primary)] font-medium text-sm hover:bg-[var(--accent-primary-soft)] transition-colors"
>
<Plus size={16} />
Create Project
<button onClick={() => setCreateOpen(true)} className="v-btn mt-6">
+ create project
</button>
</div>
)}
) : null}
{/* Project Grid */}
{((isDemoMode && filteredProjects.length > 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length > 0)) && (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
{filteredProjects.length > 0 && (
<div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{filteredProjects.map((project) => (
<ProjectCard key={project.id} project={project} href={projectHref(project.id)} />
))}
</div>
)}
{/* Deploy feed */}
<p className="v-sect mt-7">RECENT DEPLOYMENTS <span className="v-sect-r">latest</span></p>
<div className="v-tbl">
<table>
<thead>
<tr><th>SERVICE</th><th>STATUS</th><th style={{ textAlign: 'right' }}>WHEN</th></tr>
</thead>
<tbody>
{feed.length === 0 ? (
<tr><td colSpan={3} className="text-center" style={{ color: 'var(--text-tertiary)' }}>no deployments yet</td></tr>
) : feed.map((d) => (
<tr key={d.id}>
<td className="v-lead">{d.name}{d.project ? <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{d.project}</span> : null}</td>
<td><span className={`v-st ${statusClass(d.status)}`}>{d.status}</span></td>
<td style={{ textAlign: 'right' }}>{d.when}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Create Modal */}
@@ -349,18 +360,18 @@ export function ProjectsPage() {
<div className="mt-6 space-y-4">
<div>
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
<label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
Project Name
</label>
<input
value={form.name}
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
placeholder="my-awesome-project"
className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
className="h-11 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
/>
</div>
<div>
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
<label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
Description <span className="normal-case text-[var(--text-muted)]">(optional)</span>
</label>
<textarea
@@ -368,29 +379,25 @@ export function ProjectsPage() {
onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
placeholder="Describe your project..."
rows={3}
className="w-full px-4 py-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all resize-none"
className="w-full resize-none rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 py-3 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
/>
</div>
</div>
{createProjectMutation.isError && (
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
<div className="mt-4 rounded-[var(--radius-md)] bg-[var(--error-soft)] px-4 py-3 text-sm text-[var(--error)]">
{(createProjectMutation.error as Error).message}
</div>
)}
<div className="mt-6 flex justify-end gap-3">
<button
onClick={() => setCreateOpen(false)}
className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-[var(--text-secondary)] text-sm font-medium hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors"
>
<button onClick={() => setCreateOpen(false)} className="v-btn-ghost">
Cancel
</button>
<button
onClick={() => createProjectMutation.mutate()}
disabled={!form.name.trim() || createProjectMutation.isPending}
className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="v-btn"
>
{createProjectMutation.isPending ? 'Creating...' : 'Create Project'}
</button>
app/frontend/src/features/secondary/pages.tsx
+19 -19
View File
@@ -54,10 +54,10 @@ import {
function SecondaryPageHeader({ title, description }: { title: string; description: string }) {
return (
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<h1 className="text-xl font-semibold text-[var(--text-primary)]">{title}</h1>
<p className="text-sm text-[var(--text-secondary)] mt-1">{description}</p>
<div className="border-b border-[var(--border-subtle)]">
<div className="w-full px-8 py-5">
<h1 className="v-title">{title}<span className="v-cursor">_</span></h1>
<p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">{description}</p>
</div>
</div>
);
@@ -302,7 +302,7 @@ containr-agent`;
title="Usage"
description="Platform usage metrics and operational summaries"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="flex items-center gap-2 mb-6">
<div className={`w-2 h-2 rounded-full ${liveStatus === 'live' ? 'bg-[var(--success)] animate-pulse' : 'bg-[var(--text-muted)]'}`} />
<span className={`text-sm ${liveStatus === 'live' ? 'text-[var(--success)]' : 'text-[var(--text-muted)]'}`}>
@@ -340,7 +340,7 @@ containr-agent`;
statusText={failedBuilds > 0 ? `${failedBuilds} failed` : 'Healthy'}
subtitle={buildActivityBody}
icon={<Activity size={18} />}
chart={<BarChart data={buildsPerDay} color="#e8316a" height={72} gap={3} />}
chart={<BarChart data={buildsPerDay} color="var(--accent-primary)" height={72} gap={3} />}
/>
<EnhancedMetricCard
title="Capacity"
@@ -392,7 +392,7 @@ containr-agent`;
status={hostStatus(hostLoadPercent)}
statusText={host ? { good: 'Good', average: 'Average', warning: 'High' }[hostStatus(hostLoadPercent)] : ''}
subtitle={host ? `${host.cpu.cores} cores · 5m ${host.load.load5m.toFixed(2)} · 15m ${host.load.load15m.toFixed(2)}` : 'Loading CPU telemetry.'}
chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#ff7043" height={72} />}
chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#b4e34a" height={72} />}
/>
<EnhancedMetricCard
title="Memory"
@@ -403,7 +403,7 @@ containr-agent`;
subtitle={host ? `${formatBytes(host.memory.available)} free` : 'Loading memory telemetry.'}
chart={
<div className="relative mx-auto" style={{ width: 150 }}>
<DonutChart percentage={host?.memory.usagePercent ?? 0} color="#9c7ef0" size={150} thickness={14} />
<DonutChart percentage={host?.memory.usagePercent ?? 0} color="#f2c94c" size={150} thickness={14} />
<div className="absolute inset-x-0 bottom-0 text-center">
<div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
<div className="text-sm font-bold text-[#e8e9f0]">
@@ -600,7 +600,7 @@ export function PeoplePage() {
title="People"
description="Team management and access control"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
{profileQuery.isLoading ? (
<div className="py-16 text-center">
<Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
@@ -677,8 +677,8 @@ export function PeoplePage() {
<button
type="submit"
disabled={createUserMutation.isPending}
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-white disabled:opacity-60"
style={{ background: '#e8316a' }}
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-[var(--accent-on)] disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{createUserMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <UserPlus size={14} />}
Create
@@ -764,8 +764,8 @@ function GitProvidersSection() {
</div>
<button
onClick={() => setFormOpen((open) => !open)}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg transition-all"
style={{ background: 'var(--accent-primary)' }}
>
<Link2 size={14} />
{formOpen ? 'Close' : 'Connect'}
@@ -880,8 +880,8 @@ function GitProvidersSection() {
<button
onClick={() => createMutation.mutate()}
disabled={!form.accessToken.trim() || createMutation.isPending}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{createMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
Connect Provider
@@ -964,7 +964,7 @@ export function SettingsPage() {
title="Settings"
description="Manage account profile and local configuration"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
{/* Profile Section */}
<section className="panel p-6">
@@ -1015,8 +1015,8 @@ export function SettingsPage() {
<button
onClick={() => updateProfileMutation.mutate()}
disabled={!hasProfileChanges || updateProfileMutation.isPending}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{updateProfileMutation.isPending ? (
<>
@@ -1185,7 +1185,7 @@ export function DocsPage() {
title="Docs"
description="Operational references and API documentation"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
{/* API Status Grid */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div className="panel p-4">
app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
+20 -20
View File
@@ -37,15 +37,15 @@ export function ComponentShowcase() {
<div className="min-h-screen p-8" style={{ background: '#16171c' }}>
<div className="ambient-glow" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="w-full relative z-10">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<div
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ background: '#e8316a' }}
style={{ background: 'var(--accent-primary)' }}
>
<Activity size={24} className="text-white" />
<Activity size={24} className="text-[var(--accent-on)]" />
</div>
<div>
<h1 className="text-3xl font-bold text-[var(--text-primary)]">
@@ -97,7 +97,7 @@ export function ComponentShowcase() {
</h3>
<LineChart
data={sampleLineData}
color="#ff7043"
color="#b4e34a"
height={120}
showDots={true}
smooth={true}
@@ -109,7 +109,7 @@ export function ComponentShowcase() {
</h3>
<LineChart
data={sampleLineData}
color="#6c8ef0"
color="#7ab8ff"
height={120}
showDots={false}
smooth={true}
@@ -129,7 +129,7 @@ export function ComponentShowcase() {
</h3>
<LineAreaChart
data={sampleAreaData}
color="#e8316a"
color="var(--accent-primary)"
fillOpacity={0.15}
height={150}
/>
@@ -140,7 +140,7 @@ export function ComponentShowcase() {
</h3>
<LineAreaChart
data={sampleAreaData}
color="#3dd68c"
color="#5ee6a0"
fillOpacity={0.2}
height={150}
/>
@@ -159,8 +159,8 @@ export function ComponentShowcase() {
</h3>
<MultiLineChart
datasets={[
{ data: sampleLineData.map(v => v + 10), color: '#6c8ef0', fillOpacity: 0.15 },
{ data: sampleLineData, color: '#9c7ef0', fillOpacity: 0.15 }
{ data: sampleLineData.map(v => v + 10), color: '#7ab8ff', fillOpacity: 0.15 },
{ data: sampleLineData, color: '#f2c94c', fillOpacity: 0.15 }
]}
height={120}
/>
@@ -171,7 +171,7 @@ export function ComponentShowcase() {
</h3>
<BarChart
data={sampleBarData}
color="#3dd68c"
color="#5ee6a0"
height={120}
gap={2}
/>
@@ -188,19 +188,19 @@ export function ComponentShowcase() {
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
RAM Usage (65%)
</h3>
<DonutChart percentage={65} color="#9c7ef0" size={160} />
<DonutChart percentage={65} color="#f2c94c" size={160} />
</div>
<div className="panel p-6 flex flex-col items-center">
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Disk Usage (82%)
</h3>
<DonutChart percentage={82} color="#ff7043" size={160} />
<DonutChart percentage={82} color="#b4e34a" size={160} />
</div>
<div className="panel p-6 flex flex-col items-center">
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Network (45%)
</h3>
<DonutChart percentage={45} color="#6c8ef0" size={160} />
<DonutChart percentage={45} color="#7ab8ff" size={160} />
</div>
</div>
</section>
@@ -222,7 +222,7 @@ export function ComponentShowcase() {
status="good"
statusText="Good"
icon={<Cpu size={16} />}
chart={<LineChart data={sampleLineData} color="#ff7043" height={76} />}
chart={<LineChart data={sampleLineData} color="#b4e34a" height={76} />}
onClick={() => handleCardClick('CPU Usage')}
animationDelay={0.04}
/>
@@ -233,7 +233,7 @@ export function ComponentShowcase() {
status="average"
statusText="Average"
icon={<MemoryStick size={16} />}
chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#9c7ef0" height={76} />}
chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#f2c94c" height={76} />}
onClick={() => handleCardClick('Memory')}
animationDelay={0.09}
/>
@@ -242,7 +242,7 @@ export function ComponentShowcase() {
value="2.4K"
subtitle="Last 60 minutes"
icon={<Zap size={16} />}
chart={<BarChart data={sampleBarData} color="#3dd68c" height={76} gap={2} />}
chart={<BarChart data={sampleBarData} color="#5ee6a0" height={76} gap={2} />}
onClick={() => handleCardClick('Requests')}
animationDelay={0.14}
/>
@@ -259,7 +259,7 @@ export function ComponentShowcase() {
value="475 K"
subtitle="Users active right now"
icon={<Users size={16} />}
chart={<LineAreaChart data={sampleAreaData} color="#e8316a" height={130} />}
chart={<LineAreaChart data={sampleAreaData} color="var(--accent-primary)" height={130} />}
details={
<div className="flex items-center gap-1.5 flex-wrap">
{['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
@@ -276,7 +276,7 @@ export function ComponentShowcase() {
value="12.5K"
subtitle="Queries per minute"
icon={<Database size={16} />}
chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#6c8ef0" height={130} />}
chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#7ab8ff" height={130} />}
details={
<div className="flex items-center gap-3 text-xs">
<div className="flex items-center gap-1.5">
@@ -313,8 +313,8 @@ export function ComponentShowcase() {
upSpeed={10.4}
downSpeed={5.2}
datasets={[
{ data: sampleLineData.map(v => v + 20), color: '#6c8ef0', fillOpacity: 0.15 },
{ data: sampleLineData.map(v => v + 10), color: '#9c7ef0', fillOpacity: 0.15 }
{ data: sampleLineData.map(v => v + 20), color: '#7ab8ff', fillOpacity: 0.15 },
{ data: sampleLineData.map(v => v + 10), color: '#f2c94c', fillOpacity: 0.15 }
]}
onClick={() => handleCardClick('Performance')}
animationDelay={0.09}
app/frontend/src/features/service/pages/ServiceDetailPage.tsx
+10 -10
View File
@@ -302,7 +302,7 @@ export function ServiceDetailPage() {
style={{
width: '46px',
height: '46px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginRight: '14px'
}}
>
@@ -379,7 +379,7 @@ export function ServiceDetailPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -390,7 +390,7 @@ export function ServiceDetailPage() {
)}
{/* Metrics Overview */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<EnhancedMetricCard
title="CPU Usage"
@@ -404,7 +404,7 @@ export function ServiceDetailPage() {
data={isDemoMode
? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:cpu:${i}`, 8, 80))
: metricHistory.cpu.length > 0 ? metricHistory.cpu : [0]}
color="#ff7043"
color="#b4e34a"
height={72}
/>
}
@@ -418,7 +418,7 @@ export function ServiceDetailPage() {
subtitle={isDemoMode ? 'Container footprint' : hasLiveTelemetry ? `${formatBytes(liveMetrics!.memory_usage_bytes)} used` : 'No running containers'}
chart={
<div className="relative mx-auto" style={{ width: 150 }}>
<DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#9c7ef0" size={150} thickness={14} />
<DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#f2c94c" size={150} thickness={14} />
<div className="absolute inset-x-0 bottom-0 text-center">
<div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
<div className="text-sm font-bold text-[#e8e9f0]">
@@ -444,7 +444,7 @@ export function ServiceDetailPage() {
data={isDemoMode
? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:net:${i}`, 15, 70))
: metricHistory.net.length > 0 ? metricHistory.net : [0]}
color="#6c8ef0"
color="#7ab8ff"
height={72}
/>
}
@@ -555,7 +555,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
style={{ height: `${value}%`, background: '#ff7043' }}
style={{ height: `${value}%`, background: '#b4e34a' }}
title={`${value}%`}
/>
);
@@ -564,7 +564,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
style={{ height: `${Math.max(3, value)}%`, background: '#ff7043' }}
style={{ height: `${Math.max(3, value)}%`, background: '#b4e34a' }}
title={`${value.toFixed(1)}%`}
/>
))}
@@ -596,7 +596,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
style={{ height: `${value}%`, background: '#3dd68c' }}
style={{ height: `${value}%`, background: '#5ee6a0' }}
title={`${value}%`}
/>
);
@@ -605,7 +605,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
style={{ height: `${Math.max(3, value)}%`, background: '#3dd68c' }}
style={{ height: `${Math.max(3, value)}%`, background: '#5ee6a0' }}
title={`${value.toFixed(1)}%`}
/>
))}
app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
+8 -8
View File
@@ -78,8 +78,8 @@ export function ServiceMetricsDashboard() {
userData,
perf: perfPercent,
perfData: [
{ data: perfData1, color: '#6c8ef0', fillOpacity: 0.15 },
{ data: perfData2, color: '#9c7ef0', fillOpacity: 0.15 }
{ data: perfData1, color: '#7ab8ff', fillOpacity: 0.15 },
{ data: perfData2, color: '#f2c94c', fillOpacity: 0.15 }
],
upSpeed: seededRandom(`${serviceId}:upspeed`, 8, 13).toFixed(1),
downSpeed: seededRandom(`${serviceId}:downspeed`, 4, 7).toFixed(1),
@@ -129,7 +129,7 @@ export function ServiceMetricsDashboard() {
style={{
width: '38px',
height: '38px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginBottom: '14px'
}}
>
@@ -270,7 +270,7 @@ export function ServiceMetricsDashboard() {
style={{
width: '46px',
height: '46px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginRight: '14px'
}}
>
@@ -408,7 +408,7 @@ export function ServiceMetricsDashboard() {
status="good"
statusText="Good"
icon={<Cpu size={16} />}
chart={<LineChart data={metrics.cpuData} color="#ff7043" height={76} />}
chart={<LineChart data={metrics.cpuData} color="#b4e34a" height={76} />}
animationDelay={0.04}
/>
@@ -424,10 +424,10 @@ export function ServiceMetricsDashboard() {
{metrics.ram}%
</div>
<div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>Average</span> Daily usage
<span style={{ color: '#f2c94c', fontWeight: 700 }}>Average</span> Daily usage
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
<DonutChart percentage={metrics.ram} color="#9c7ef0" />
<DonutChart percentage={metrics.ram} color="#f2c94c" />
<div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
<div style={{ fontSize: 10.5, color: '#6b6e7d', marginBottom: 1 }}>Used</div>
<div style={{ fontSize: 12.5, fontWeight: 700, color: '#e8e9f0' }}>{metrics.ramUsedGB} GB / 8GB</div>
@@ -460,7 +460,7 @@ export function ServiceMetricsDashboard() {
value={`${metrics.users} K`}
subtitle="User active right now"
icon={<Users size={16} />}
chart={<LineAreaChart data={metrics.userData} color="#e8316a" height={130} />}
chart={<LineAreaChart data={metrics.userData} color="var(--accent-primary)" height={130} />}
details={
<div className="flex items-center gap-1.5 flex-wrap">
{['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
app/frontend/src/features/templates/pages/TemplatesPage.tsx
+7 -7
View File
@@ -557,10 +557,10 @@ export function TemplatesPage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">Template Catalog</h1>
<h1 className="v-title">Template Catalog<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">Deploy services from pre-configured templates</p>
</div>
<div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
@@ -573,7 +573,7 @@ export function TemplatesPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -584,7 +584,7 @@ export function TemplatesPage() {
)}
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 xl:grid-cols-[380px_1fr] gap-6">
{/* Template List */}
<section className="panel overflow-hidden">
@@ -657,7 +657,7 @@ export function TemplatesPage() {
{filteredTemplates.map((template) => {
const selected = template.id === selectedTemplateId;
const Icon = categoryIcon(template.category);
const categoryColor = template.category === 'database' ? '#9c7ef0' : template.category === 'frontend' ? '#6c8ef0' : template.category === 'web' ? '#e8316a' : '#9295a4';
const categoryColor = template.category === 'database' ? '#7ab8ff' : template.category === 'frontend' ? '#f2c94c' : template.category === 'web' ? 'var(--accent-primary)' : '#9295a4';
return (
<button
key={template.id}
@@ -935,8 +935,8 @@ export function TemplatesPage() {
<button
onClick={() => deployMutation.mutate()}
disabled={isDeployDisabled}
className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{deployMutation.isPending ? (
<>
app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
+3 -3
View File
@@ -107,7 +107,7 @@ function toFlowEdges(links: ReturnType<typeof inferAutoConnections>): CanvasEdge
height: 14,
},
style: {
stroke: '#e8316a',
stroke: 'var(--accent-primary)',
strokeWidth: 2,
},
className: 'edge-premium',
@@ -362,8 +362,8 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
<button
type="button"
onClick={onAddService}
className="flex items-center gap-2 h-9 px-4 rounded-lg text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
style={{ background: 'var(--accent-primary)' }}
>
<Plus size={15} />
Add Service
app/frontend/src/features/workspace/canvas/nodes.tsx
+4 -4
View File
@@ -33,11 +33,11 @@ function serviceTypeIcon(type: string): typeof Box {
function serviceTypeColor(type: string): string {
switch (type) {
case 'web':
return '#6c8ef0'; // Blue
return '#7ab8ff'; // Blue
case 'database':
return '#9c7ef0'; // Purple
return '#b4e34a'; // Purple
case 'worker':
return '#e8316a'; // Pink
return 'var(--accent-primary)'; // Pink
default:
return '#9295a4'; // Gray
}
@@ -124,7 +124,7 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
onClick={() => onOpen(service.id)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold transition-all duration-200 ${
selected
? 'bg-[var(--accent-primary)] text-white shadow-lg shadow-[var(--accent-primary-glow)]'
? 'bg-[var(--accent-primary)] text-[var(--accent-on)] shadow-lg shadow-[var(--accent-primary-glow)]'
: 'border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)]'
}`}
>
app/frontend/src/features/workspace/components/MetricsDashboard.tsx
+9 -9
View File
@@ -131,13 +131,13 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentCpu}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: currentCpu < 50 ? '#3dd68c' : currentCpu < 75 ? '#f0a040' : '#ff7043', fontWeight: 700 }}>
<span style={{ color: currentCpu < 50 ? '#5ee6a0' : currentCpu < 75 ? '#f2c94c' : '#b4e34a', fontWeight: 700 }}>
{currentCpu < 50 ? 'Good' : currentCpu < 75 ? 'Average' : 'High'}
</span>{' '}
Daily usage
</div>
<div style={{ height: 76, margin: '12px 0 6px' }}>
<LineMetricChart data={data.cpu} color="#ff7043" height={76} />
<LineMetricChart data={data.cpu} color="#b4e34a" height={76} />
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '4px' }}>
<span style={{ fontSize: '13px', color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}>Details</span>
@@ -155,13 +155,13 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.ram}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: data.ram < 60 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
<span style={{ color: data.ram < 60 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
{data.ram < 60 ? 'Good' : 'Average'}
</span>{' '}
Daily usage
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
<DonutChart percent={data.ram} color="#9c7ef0" size={160} thickness={16} />
<DonutChart percent={data.ram} color="#f2c94c" size={160} thickness={16} />
<div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
<div style={{ fontSize: '10.5px', color: '#6b6e7d', marginBottom: 1 }}>Used</div>
<div style={{ fontSize: '12.5px', fontWeight: 700, color: '#e8e9f0' }}>{data.ramUsed} / 8GB</div>
@@ -183,7 +183,7 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.cache} MB</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>220MB Average</span>{' '}
<span style={{ color: '#f2c94c', fontWeight: 700 }}>220MB Average</span>{' '}
cached images and files
</div>
@@ -257,7 +257,7 @@ export function MetricsDashboard({
</div>
</div>
<div style={{ width: '50%', padding: '16px 14px 46px 0', display: 'flex', alignItems: 'flex-end' }}>
<LineMetricChart data={data.users} color="#e8316a" fillOpacity={0.15} showArea height={130} />
<LineMetricChart data={data.users} color="var(--accent-primary)" fillOpacity={0.15} showArea height={130} />
</div>
</div>
@@ -271,7 +271,7 @@ export function MetricsDashboard({
<div style={{ flex: 1 }}>
<div style={{ fontSize: '36px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentPerf}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: currentPerf > 85 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
<span style={{ color: currentPerf > 85 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
{currentPerf > 85 ? 'Good' : 'Average'}
</span>{' '}
Last scan
@@ -282,11 +282,11 @@ export function MetricsDashboard({
<DualLineChart data1={data.performance} data2={data.performanceAlt} height={58} />
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'flex-end' }}>
<div className="speed-row" style={{ color: '#6c8ef0' }}>
<div className="speed-row" style={{ color: '#7ab8ff' }}>
<svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 19 19 12"/></svg>
<span>{data.upSpeed}</span> Mbps
</div>
<div className="speed-row" style={{ color: '#e8316a' }}>
<div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 5 5 12"/></svg>
<span>{data.downSpeed}</span> Mbps
</div>
app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
+8 -8
View File
@@ -367,8 +367,8 @@ function ServiceCreateDialog(props: {
build_path: source === 'git' ? form.build_path?.trim() : '',
})
}
className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="px-5 py-2 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{props.loading ? 'Creating...' : 'Create Service'}
</button>
@@ -526,7 +526,7 @@ export function ProjectWorkspacePage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-4">
<button
@@ -538,7 +538,7 @@ export function ProjectWorkspacePage() {
</button>
<div className="w-px h-5 bg-[var(--border-subtle)]" />
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">{project.name}</h1>
<h1 className="v-title">{project.name}<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">{project.description || 'No description'}</p>
</div>
</div>
@@ -577,8 +577,8 @@ export function ProjectWorkspacePage() {
{!isDemoMode && (
<button
onClick={() => setCreateOpen(true)}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all"
style={{ background: 'var(--accent-primary)' }}
>
<Plus size={16} />
<span className="hidden sm:inline">Add Service</span>
@@ -591,7 +591,7 @@ export function ProjectWorkspacePage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -602,7 +602,7 @@ export function ProjectWorkspacePage() {
)}
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-6">
{/* Sidebar Navigation */}
<aside className="lg:sticky lg:top-6 lg:h-fit">
app/frontend/src/index.css
+267 -81
View File
@@ -2,56 +2,55 @@
/* Inter font - exact match from self.html */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root {
/* Exact colors from self.html */
--bg-void: #16171c;
--bg-base: #111217;
--bg-surface: #0f1017;
--bg-elevated: #1c1d24;
--bg-overlay: #1a1b26;
/* Surface cards - matching self.html card */
--surface-card: #1c1d24;
--surface-card-hover: #22233a;
/* Vertice palette — near-black gray, lime accent */
--bg-void: #0c0d0f;
--bg-base: #0e0f12;
--bg-surface: #101214;
--bg-elevated: #131518;
--bg-overlay: #16181d;
--surface-card: #131518;
--surface-card-hover: #1a1d22;
--surface-muted: rgba(255, 255, 255, 0.05);
--surface-glass: rgba(20, 22, 32, 0.6);
--surface-base: #1c1d24;
/* Text hierarchy - matching self.html */
--text-primary: #e8e9f0;
--text-secondary: #9295a4;
--text-tertiary: #6b6e7d;
--text-muted: #6b6e7d;
/* Accent colors - exact from self.html */
--accent-primary: #e8316a;
--accent-primary-soft: rgba(232, 49, 106, 0.15);
--accent-primary-glow: rgba(232, 49, 106, 0.4);
--accent-secondary: #9c7ef0;
--accent-tertiary: #6c8ef0;
/* Status colors - exact from self.html */
--success: #3dd68c;
--success-soft: rgba(61, 214, 140, 0.15);
--success-glow: rgba(61, 214, 140, 0.3);
--warning: #ff7043;
--warning-soft: rgba(255, 112, 67, 0.15);
--warning-glow: rgba(255, 112, 67, 0.3);
--error: #ff6b5b;
--error-soft: rgba(255, 107, 91, 0.15);
--error-glow: rgba(255, 107, 91, 0.3);
--info: #6c8ef0;
--info-soft: rgba(108, 142, 240, 0.15);
/* Border system - matching self.html */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-default: rgba(255, 255, 255, 0.14);
--border-strong: rgba(232, 49, 106, 0.4);
--border-glow: rgba(232, 49, 106, 0.6);
--surface-glass: rgba(16, 18, 21, 0.7);
--surface-base: #131518;
--text-primary: #ecedf0;
--text-secondary: #8b919e;
--text-tertiary: #575d68;
--text-muted: #575d68;
/* Lime accent + subtle yellow secondary */
--accent-primary: #b4e34a;
--accent-primary-soft: rgba(180, 227, 74, 0.1);
--accent-primary-glow: rgba(180, 227, 74, 0.35);
--accent-on: #131507;
--accent-secondary: #f2c94c;
--accent-tertiary: #7ab8ff;
--success: #5ee6a0;
--success-soft: rgba(94, 230, 160, 0.1);
--success-glow: rgba(94, 230, 160, 0.3);
--warning: #f2c94c;
--warning-soft: rgba(242, 201, 76, 0.1);
--warning-glow: rgba(242, 201, 76, 0.3);
--error: #ff6f5c;
--error-soft: rgba(255, 111, 92, 0.1);
--error-glow: rgba(255, 111, 92, 0.3);
--info: #7ab8ff;
--info-soft: rgba(122, 184, 255, 0.12);
/* Border system */
--border-subtle: rgba(255, 255, 255, 0.065);
--border-default: rgba(255, 255, 255, 0.13);
--border-strong: rgba(180, 227, 74, 0.35);
--border-glow: rgba(180, 227, 74, 0.55);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -105,10 +104,11 @@
--text-tertiary: #7b8498;
--text-muted: #7b8498;
--accent-primary: #d92d64;
--accent-primary-soft: rgba(217, 45, 100, 0.12);
--accent-primary-glow: rgba(217, 45, 100, 0.22);
--accent-secondary: #7357d8;
--accent-primary: #7ba91e;
--accent-primary-soft: rgba(123, 169, 30, 0.14);
--accent-primary-glow: rgba(123, 169, 30, 0.28);
--accent-on: #ffffff;
--accent-secondary: #b8860b;
--accent-tertiary: #2f67d8;
--success: #168a55;
@@ -128,8 +128,8 @@
--border-subtle: rgba(21, 24, 33, 0.1);
--border-default: rgba(21, 24, 33, 0.16);
--border-strong: rgba(217, 45, 100, 0.35);
--border-glow: rgba(217, 45, 100, 0.45);
--border-strong: rgba(123, 169, 30, 0.4);
--border-glow: rgba(123, 169, 30, 0.5);
--shadow-sm: 0 1px 2px rgba(17, 18, 23, 0.08);
--shadow-md: 0 4px 12px rgba(17, 18, 23, 0.1);
@@ -199,10 +199,10 @@ body {
content: '';
position: fixed;
top: -20%;
left: -10%;
width: 50%;
height: 50%;
background: radial-gradient(ellipse at center, rgba(232, 49, 106, 0.08) 0%, transparent 70%);
right: -5%;
width: 45%;
height: 45%;
background: radial-gradient(ellipse at center, rgba(180, 227, 74, 0.05) 0%, transparent 70%);
filter: blur(60px);
}
@@ -210,10 +210,10 @@ body {
content: '';
position: fixed;
bottom: -30%;
right: -10%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse at center, rgba(156, 126, 240, 0.06) 0%, transparent 70%);
left: -10%;
width: 55%;
height: 55%;
background: radial-gradient(ellipse at center, rgba(242, 201, 76, 0.03) 0%, transparent 70%);
filter: blur(80px);
}
@@ -292,9 +292,9 @@ textarea {
/* Card - self.html exact match */
.card {
background: #1c1d24;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 20px;
display: flex;
flex-direction: column;
@@ -314,9 +314,9 @@ textarea {
/* Panel - alias for card for backwards compatibility */
.panel {
background: #1c1d24;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 20px;
transition: border-color 0.2s, box-shadow 0.2s;
}
@@ -645,14 +645,14 @@ textarea {
/* Distinctive headline styles */
.headline-display {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
}
.headline-section {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
@@ -702,9 +702,9 @@ textarea {
/* Gradient mesh background */
.gradient-mesh {
background:
radial-gradient(ellipse at 20% 30%, rgba(232, 49, 106, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(156, 126, 240, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(108, 142, 240, 0.04) 0%, transparent 50%);
radial-gradient(ellipse at 20% 30%, rgba(180, 227, 74, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(122, 184, 255, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(242, 201, 76, 0.03) 0%, transparent 50%);
}
/* Spotlight effect on hover */
@@ -739,9 +739,9 @@ textarea {
============================================ */
/* Service type color coding */
.service-web { --service-color: #6c8ef0; }
.service-database { --service-color: #9c7ef0; }
.service-worker { --service-color: #e8316a; }
.service-web { --service-color: #7ab8ff; }
.service-database { --service-color: #f2c94c; }
.service-worker { --service-color: var(--accent-primary); }
/* Status bar animation */
@keyframes status-pulse {
@@ -909,7 +909,7 @@ textarea {
.tab.active {
color: #e8e9f0;
border-bottom-color: #e8316a;
border-bottom-color: var(--accent-primary);
}
.tab svg {
@@ -972,7 +972,7 @@ textarea {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
color: #3dd68c;
color: #5ee6a0;
text-transform: uppercase;
display: inline-flex;
align-items: center;
@@ -1018,7 +1018,7 @@ textarea {
width: 30px;
height: 30px;
border-radius: 9px;
background: #e8316a;
background: var(--accent-primary);
display: flex;
align-items: center;
justify-content: center;
@@ -1034,7 +1034,7 @@ textarea {
.arrow-btn svg {
width: 13px;
height: 13px;
stroke: white;
stroke: var(--accent-on);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
@@ -1133,7 +1133,7 @@ textarea {
border-radius: 11px;
border: none;
background: var(--accent-primary);
color: white;
color: var(--accent-on);
font-size: 13.5px;
font-weight: 700;
font-family: inherit;
@@ -1145,7 +1145,7 @@ textarea {
}
.btn-restart:hover {
background: #d12960;
background: #cdf06f;
}
.btn-restart.disabled {
@@ -1379,3 +1379,189 @@ textarea {
animation: counter-flip 0.3s ease-out;
transform-origin: bottom;
}
/* ============================================
VERTICE SYSTEM — lime-on-graphite primitives
============================================ */
.v-mono {
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
font-variant-numeric: tabular-nums;
}
/* Section header: `// LABEL` */
.v-sect {
display: flex;
align-items: center;
font: 600 10px 'JetBrains Mono', monospace;
letter-spacing: 0.22em;
color: var(--text-tertiary);
margin-bottom: 13px;
}
.v-sect::before {
content: '//';
color: var(--accent-primary);
font-weight: 700;
margin-right: 8px;
}
.v-sect .v-sect-r {
margin-left: auto;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 500;
text-transform: none;
}
/* Page heading with lime cursor */
.v-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text-primary);
}
.v-title .v-cursor { color: var(--accent-primary); font-weight: 400; }
/* Pulsing live dot (lime) */
.v-live {
width: 5.5px;
height: 5.5px;
border-radius: 50%;
background: var(--accent-primary);
box-shadow: 0 0 7px rgba(180, 227, 74, 0.8);
animation: v-pulse 2.4s infinite;
flex-shrink: 0;
}
@keyframes v-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Stat card: mono label + big tabular value + meter/spark */
.v-stat {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 14px 17px 12px;
transition: border-color 0.15s;
}
.v-stat:hover { border-color: rgba(180, 227, 74, 0.2); }
.v-stat .v-k {
display: flex; align-items: center; justify-content: space-between;
font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em;
color: var(--text-tertiary);
}
.v-stat .v-v {
font: 500 28px/1.1 'JetBrains Mono', monospace;
letter-spacing: -1.2px; margin-top: 8px;
font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.v-stat .v-v span { font-size: 13px; color: var(--text-tertiary); }
.v-stat .v-d { font: 10.5px 'JetBrains Mono', monospace; color: var(--text-tertiary); margin-top: 2px; }
.v-stat .v-d b { font-weight: 600; }
/* Thin meter */
.v-meter {
height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px;
margin: 12px 0 7px; overflow: hidden;
}
.v-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent-primary); }
.v-meter i.y { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.v-meter i.r { background: linear-gradient(90deg, var(--accent-secondary), var(--error)); }
/* Bar sparkline */
.v-spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin: 10px 0 6px; }
.v-spark i {
flex: 1; border-radius: 1.5px;
background: linear-gradient(180deg, var(--accent-primary), rgba(180,227,74,0.1));
opacity: 0.7;
}
/* Project mini-canvas (dot grid + service tiles) */
.v-mini {
position: relative; height: 104px; border-radius: 10px; overflow: hidden;
background: #0e1013; border: 1px solid rgba(255,255,255,0.04);
background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.5px);
background-size: 14px 14px;
}
.v-mini .v-node {
position: absolute; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
background: var(--surface-card-hover); border: 1px solid rgba(255,255,255,0.09);
display: flex; align-items: center; justify-content: center; gap: 5px;
font: 700 9px 'JetBrains Mono', monospace; color: var(--text-secondary);
}
.v-mini .v-node .v-nd {
position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
border-radius: 50%; background: var(--success); border: 2px solid #0e1013;
}
.v-mini .v-node .v-nd.r { background: var(--error); }
.v-mini .v-node .v-nd.y { background: var(--accent-secondary); }
.v-mini .v-node .v-nd.off { background: var(--text-tertiary); }
.v-mini .v-more {
position: absolute; width: 32px; height: 32px; border-radius: 9px;
border: 1px dashed rgba(255,255,255,0.16);
display: flex; align-items: center; justify-content: center;
font: 600 9px 'JetBrains Mono', monospace; color: var(--text-tertiary);
}
.v-mini .v-edge { position: absolute; height: 1px; background: rgba(255,255,255,0.12); }
/* Lime primary button */
.v-btn {
background: var(--accent-primary); color: var(--accent-on);
border: none; border-radius: 8px; padding: 9px 17px;
font: 700 12px 'JetBrains Mono', monospace; cursor: pointer;
transition: background 0.15s, transform 0.15s;
box-shadow: 0 2px 12px rgba(180, 227, 74, 0.22);
}
.v-btn:hover { background: var(--accent-primary); filter: brightness(1.1); transform: translateY(-1px); }
.v-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Ghost button */
.v-btn-ghost {
background: var(--surface-card); color: var(--text-secondary);
border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 16px;
font: 600 12px 'JetBrains Mono', monospace; cursor: pointer; transition: 0.15s;
}
.v-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-default); }
/* Env pill */
.v-env {
font: 10px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
color: var(--accent-primary); display: inline-flex; align-items: center; gap: 8px;
}
.v-env::before { content: ''; width: 5px; height: 5px; background: var(--accent-primary); }
/* Table — mono body, quiet rows */
.v-tbl {
background: var(--surface-card); border: 1px solid var(--border-subtle);
border-radius: 14px; overflow: hidden;
}
.v-tbl table { width: 100%; border-collapse: collapse; }
.v-tbl th {
text-align: left; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: 0.2em;
color: var(--text-tertiary); padding: 11px 18px; border-bottom: 1px solid var(--border-subtle);
}
.v-tbl td {
padding: 11.5px 18px; border-bottom: 1px solid rgba(255,255,255,0.035);
font: 11.5px 'JetBrains Mono', monospace; color: var(--text-secondary);
}
.v-tbl tbody tr:last-child td { border-bottom: none; }
.v-tbl tbody tr { transition: background 0.12s; }
.v-tbl tbody tr:hover td { background: rgba(180,227,74,0.025); }
.v-tbl td.v-lead { color: var(--text-primary); font: 600 12.5px 'Inter', sans-serif; }
/* Status pill */
.v-st {
font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
padding: 3px 9px; border-radius: 5px; display: inline-block;
}
.v-st-ok { background: var(--success-soft); color: var(--success); }
.v-st-run { background: var(--info-soft); color: var(--info); }
.v-st-warn { background: var(--warning-soft); color: var(--warning); }
.v-st-fail { background: var(--error-soft); color: var(--error); }
.v-st-off { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
/* Ticker segments */
.v-tick { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); }
.v-tick b { color: var(--text-secondary); font-weight: 500; }
.v-tick .sig { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.v-tick .sig.y { background: var(--accent-secondary); }
.v-tick .sig.r { background: var(--error); }
/* Rail active indicator handled via .nav-item.active::before */
app/frontend/src/shared/components/Button.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
};
const variantStyles: Record<ButtonVariant, string> = {
primary: 'text-white shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
primary: 'text-[var(--accent-on)] shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
secondary: 'border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] hover:border-[var(--border-default)] hover:bg-[var(--surface-card-hover)] active:scale-[0.98]',
ghost: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)] active:scale-[0.98]',
danger: 'border border-[var(--error-soft)] text-[var(--error)] hover:bg-[var(--error-soft)] hover:shadow-lg hover:shadow-[var(--error-glow)] active:scale-[0.98]',
@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
${sizeStyles[size]}
${className}
`}
style={variant === 'primary' ? { background: '#e8316a' } : undefined}
style={variant === 'primary' ? { background: 'var(--accent-primary)' } : undefined}
{...props}
>
{loading ? (
app/frontend/src/shared/components/Charts.tsx
+6 -6
View File
@@ -68,7 +68,7 @@ function gradientId(prefix: string, color: string, index = 0) {
export function LineChart({
data,
color = '#ff7043',
color = '#b4e34a',
fillColor = 'transparent',
height = 76,
showDots = true,
@@ -96,7 +96,7 @@ export function LineChart({
export function LineAreaChart({
data,
color = '#e8316a',
color = 'var(--accent-primary)',
fillOpacity = 0.15,
height = 130,
}: LineAreaChartProps) {
@@ -181,7 +181,7 @@ export function MultiLineChart({
export function LineMetricChart({
data,
color = '#ff7043',
color = '#b4e34a',
fillOpacity = 0.15,
height = 76,
showArea = false,
@@ -204,8 +204,8 @@ export function DualLineChart({
data1,
data2,
height = 58,
color1 = '#6c8ef0',
color2 = '#9c7ef0',
color1 = '#7ab8ff',
color2 = '#f2c94c',
fillOpacity1 = 0.15,
fillOpacity2 = 0.15,
}: DualLineChartProps) {
@@ -222,7 +222,7 @@ export function DualLineChart({
export function BarChart({
data,
color = '#3dd68c',
color = '#5ee6a0',
height = 128,
gap = 4,
}: BarChartProps) {
app/frontend/src/shared/components/DonutChart.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function DonutChart({
percentage,
size = 160,
thickness = 16,
color = '#9c7ef0',
color = '#b4e34a',
trackColor = 'rgba(255, 255, 255, 0.07)',
segments = 28,
gap = 0.048,
app/frontend/src/shared/components/EnhancedMetricCard.tsx
+7 -7
View File
@@ -30,9 +30,9 @@ export function EnhancedMetricCard({
horizontal = false,
}: EnhancedMetricCardProps) {
const statusColors: Record<string, string> = {
good: '#3dd68c',
average: '#f0a040',
warning: '#ff7043',
good: '#5ee6a0',
average: '#f2c94c',
warning: '#f2c94c',
};
// Horizontal layout for cards like Active User
@@ -216,7 +216,7 @@ export function CacheMetricCard({
</div>
<div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
<span style={{ color: '#f2c94c', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
</div>
{/* Segmented Bar */}
@@ -319,7 +319,7 @@ export function PerformanceMetricCard({
animationDelay = 0,
}: PerformanceMetricCardProps) {
const status = percentage >= 85 ? 'Good' : percentage >= 70 ? 'Average' : 'Warning';
const statusColor = percentage >= 85 ? '#3dd68c' : percentage >= 70 ? '#f0a040' : '#ff7043';
const statusColor = percentage >= 85 ? '#5ee6a0' : percentage >= 70 ? '#f2c94c' : '#ff6f5c';
return (
<div
@@ -363,14 +363,14 @@ export function PerformanceMetricCard({
<div style={{ width: 134, height: 58, background: 'rgba(255,255,255,0.03)', borderRadius: 8 }} />
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
<div className="speed-row" style={{ color: '#6c8ef0' }}>
<div className="speed-row" style={{ color: '#7ab8ff' }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="12" y1="19" x2="12" y2="5"/>
<polyline points="5 12 12 19 19 12"/>
</svg>
<span>{upSpeed}</span> Mbps
</div>
<div className="speed-row" style={{ color: '#e8316a' }}>
<div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="12" y1="5" x2="12" y2="19"/>
<polyline points="19 12 12 5 5 12"/>
app/frontend/src/shared/components/MetricCard.tsx
+3 -3
View File
@@ -50,9 +50,9 @@ export function MetricCard({
}, [animationDelay]);
const statusColors: Record<string, string> = {
good: '#3dd68c',
average: '#f0a040',
warning: '#ff7043',
good: '#5ee6a0',
average: '#f2c94c',
warning: '#f2c94c',
};
// Horizontal layout for cards like Active User