fix: e2e QA hardening — honest runtime state, stable public ports, read-only anon UI (#12)

* fix: e2e QA hardening — honest runtime URLs, health, and read-only anon UI Backend: - managed DB provisioning: attach DB containers to the platform network and probe the container IP, fixing the 127.0.0.1 reachability failure inside the backend container; log provisioning failures - stop fabricating connection URLs when provisioning produced none - template deploys now carry port + health_check into service runtime fields - service health probed over the project network (backend joins it) instead of an in-container wget that fails on shell-less images - runtime/public/connection URLs rewrite loopback to the request Host so links are usable for LAN/remote clients Frontend: - service Networking panel shows real runtime URLs/ports/health instead of hardcoded containr.dev + 8080->443 - anonymous views hide all mutation controls (new project, add service, group, context menu) - project cards: remove decorative svcN labels; badge says DOWN only when zero services run, IDLE when empty, DEGRADED for partial - mobile projects header no longer clips (fluid search width) - unknown routes render a not-found page instead of silently redirecting Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix: telemetry scope label, chunk split, remove stale vite artifacts - /system/host now reports scope=host|docker-desktop-vm and the daemon OS; Projects dashboard labels cards VM.* when the daemon is a Desktop VM so memory/core numbers aren't mistaken for physical host values - manualChunks: split @xyflow/react and recharts out of the main bundle; removes the >1MB chunk warning - drop tracked vite.config.js/.d.ts build artifacts that shadowed the real vite.config.ts Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix: persist service host port; demo-data scope for telemetry Public URLs were ephemeral: every restart/redeploy rebound a random host port, so endpoint links rotted. Persist published_port on the service and prefer it for replica 0 on create. If the port is taken, fall back to ephemeral and repersist the new assignment. Post-start the binding is verified — Docker Desktop accepts a conflicting publish silently, which previously left services running with no endpoint at all. demo-data.ts gains the required scope field for HostMonitoring (CI fix). Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --------- Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-10-28 07:41:27 +00:00 · 2026-10-04 09:01:28 +02:00
1 parent d968eb2315
commit 32b52d121f
@@ -1,6 +1,6 @@
 import { Link, Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
-import { ShieldCheck } from 'lucide-react';
+import { Compass, ShieldCheck } from 'lucide-react';
 import { PlatformShell } from './layout/PlatformShell';
 import { ProjectsPage } from '@/features/projects/pages/ProjectsPage';
 import { ProjectWorkspacePage } from '@/features/workspace/pages/ProjectWorkspacePage';
@@ -103,6 +103,26 @@ function AdminRequired() {
  return <Outlet />;
 }

+function NotFoundPage() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-6 text-center">
+      <Compass size={32} className="text-[var(--text-tertiary)]" />
+      <div>
+        <h1 className="text-lg font-semibold text-[var(--text-primary)]">Page not found</h1>
+        <p className="mt-1 max-w-sm text-sm text-[var(--text-secondary)]">
+          The page you are looking for does not exist or was moved.
+        </p>
+      </div>
+      <Link
+        to="/"
+        className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+      >
+        Back to home
+      </Link>
+    </div>
+  );
+}
+
 export default function App() {
  return (
    <ErrorBoundary>
@@ -138,14 +158,14 @@ export default function App() {
          <Route element={<AdminRequired />}>
            <Route path="/admin" element={<AdminPage />} />
          </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
        </Route>

        {/* Full-bleed design demo — renders its own chrome, no app shell */}
        <Route element={<AuthRequired />}>
          <Route path="/metrics-demo" element={<ServiceMetricsDashboard />} />
        </Route>
-
-        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </ErrorBoundary>
  );
@@ -25,10 +25,10 @@ const demoDeploys = [
  { id: 'd4', name: 'Marketing Site', project: 'Growth Surface', status: 'DEPLOYED', when: '2h' },
 ];

-function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
-  if (stats.service_count === 0) return 'healthy';
+function getHealthStatus(stats: ProjectStats): 'healthy' | 'idle' | 'degraded' | 'critical' {
+  if (stats.service_count === 0) return 'idle';
  if (stats.running_services === stats.service_count) return 'healthy';
-  if (stats.running_services >= stats.service_count / 2) return 'degraded';
+  if (stats.running_services > 0) return 'degraded';
  return 'critical';
 }

@@ -36,6 +36,8 @@ function healthBadge(health: ReturnType<typeof getHealthStatus>) {
  switch (health) {
    case 'healthy':
      return { label: 'RUNNING', cls: 'v-st-ok' };
+    case 'idle':
+      return { label: 'IDLE', cls: '' };
    case 'degraded':
      return { label: 'DEGRADED', cls: 'v-st-warn' };
    case 'critical':
@@ -70,7 +72,6 @@ function MiniCanvas({ project }: { project: ProjectEntity }) {
      {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 ? (
@@ -85,6 +86,7 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
  const health = getHealthStatus(project.stats);
  const badge = healthBadge(health);
  const envOk = health === 'healthy';
+  const envLabel = envOk ? 'production' : health === 'idle' ? 'idle' : health === 'critical' ? 'down' : 'degraded';

  return (
    <article
@@ -101,10 +103,10 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
      <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)' }}
+          style={{ background: envOk ? 'var(--success)' : health === 'idle' ? 'var(--text-tertiary)' : health === 'critical' ? 'var(--error)' : 'var(--warning)' }}
        />
        <span className="text-[var(--text-secondary)]">
-          {envOk ? 'production' : 'degraded'}
+          {envLabel}
        </span>
        <span>·</span>
        <span>
@@ -179,6 +181,7 @@ export function ProjectsPage() {
  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 hostLabel = host?.scope === 'docker-desktop-vm' ? 'VM' : 'HOST';
  const cpuPct = isDemoMode ? 14 : host && host.cpu.cores > 0
    ? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
    : null;
@@ -220,7 +223,7 @@ export function ProjectsPage() {
            </p>
          </div>
          <div className="flex items-center gap-2.5">
-            <div className="search-box" style={{ width: 240 }}>
+            <div className="search-box" style={{ width: 'min(240px, 42vw)' }}>
              <Search size={13} />
              <input
                value={search}
@@ -230,16 +233,18 @@ export function ProjectsPage() {
                style={{ fontSize: 11.5 }}
              />
            </div>
-            <button onClick={openCreate} className="v-btn">
-              + new project
-            </button>
+            {signedIn && (
+              <button onClick={openCreate} className="v-btn">
+                + new project
+              </button>
+            )}
          </div>
        </div>

        {/* 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-k"><span>{hostLabel}.CPU</span><span className="v-live" /></div>
            <div className="v-v">{cpuPct ?? '—'}<span>%</span></div>
            {isDemoMode ? (
              <div className="v-spark">
@@ -255,13 +260,13 @@ export function ProjectsPage() {
            </div>
          </div>
          <div className="v-stat">
-            <div className="v-k"><span>HOST.MEM</span><span className="v-live" /></div>
+            <div className="v-k"><span>{hostLabel}.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-k"><span>{hostLabel}.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>
@@ -972,31 +972,60 @@ export function ServiceDetailPage() {
                    <p className="text-sm font-medium text-[var(--text-primary)]">Networking</p>
                    <p className="text-xs text-[var(--text-tertiary)]">Public endpoints and ports</p>
                  </div>
+                  {runtimeQuery.data?.health === 'healthy' && (
+                    <span className="ml-auto v-st v-st-ok">HEALTHY</span>
+                  )}
+                  {runtimeQuery.data?.health === 'unhealthy' && (
+                    <span className="ml-auto v-st v-st-fail">UNHEALTHY</span>
+                  )}
                </div>
-                
+
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
-                      <span className="text-xs text-[var(--text-secondary)]">HTTPS</span>
+                  {service.domain && (
+                    <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                        <span className="text-xs text-[var(--text-secondary)]">Domain</span>
+                      </div>
+                      <a
+                        href={`https://${service.domain}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {service.domain}
+                      </a>
                    </div>
-                    <a 
-                      href={`https://${service.name}.containr.dev`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="mono text-xs text-[var(--accent-primary)] hover:underline"
-                    >
-                      {service.name}.containr.dev
-                    </a>
-                  </div>
+                  )}
+                  {(runtimeQuery.data?.urls ?? []).map((url) => (
+                    <div key={url} className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                        <span className="text-xs text-[var(--text-secondary)]">HTTP</span>
+                      </div>
+                      <a
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {url.replace(/^https?:\/\//, '')}
+                      </a>
+                    </div>
+                  ))}
                  <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-[var(--accent-secondary)]" />
-                      <span className="text-xs text-[var(--text-secondary)]">Port</span>
+                      <span className="text-xs text-[var(--text-secondary)]">Internal</span>
                    </div>
-                    <span className="mono text-xs text-[var(--text-primary)]">8080 → 443</span>
+                    <span className="mono text-xs text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
                  </div>
                </div>
+                {!service.domain && (runtimeQuery.data?.urls ?? []).length === 0 && (
+                  <p className="mt-3 text-xs text-[var(--text-tertiary)]">
+                    No public endpoint. Publish a port or set a domain in Settings → Networking to expose this service.
+                  </p>
+                )}
              </div>
            )}
          </div>
@@ -1099,15 +1099,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
            ))}
          </div>
        )}
-        <button
-          type="button"
-          onClick={() => addGroup()}
-          className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-          title="Add group"
-        >
-          <Layers size={13} />
-          Group
-        </button>
+        {!readOnly && (
+          <button
+            type="button"
+            onClick={() => addGroup()}
+            className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            title="Add group"
+          >
+            <Layers size={13} />
+            Group
+          </button>
+        )}
      </div>

      {/* Floating: zoom controls (bottom-left) */}
@@ -1170,15 +1172,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
              Add a service from a git repo or Docker image - it runs on a private network with the rest of this
              project.
            </p>
-            <button
-              type="button"
-              onClick={onAddService}
-              className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
-              style={{ background: 'var(--accent-primary)' }}
-            >
-              <Plus size={15} />
-              Add Service
-            </button>
+            {!readOnly && (
+              <button
+                type="button"
+                onClick={onAddService}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
+                style={{ background: 'var(--accent-primary)' }}
+              >
+                <Plus size={15} />
+                Add Service
+              </button>
+            )}
          </div>
        </div>
      )}
@@ -1191,32 +1195,36 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
        >
          {contextMenu.kind === 'pane' && (
            <>
-              <button
-                type="button"
-                onClick={() => {
-                  setContextMenu(null);
-                  onAddService();
-                }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-              >
-                <Plus size={13} />
-                Add service
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  const at =
-                    contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
-                      ? { x: contextMenu.flowX, y: contextMenu.flowY }
-                      : undefined;
-                  setContextMenu(null);
-                  addGroup(at);
-                }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-              >
-                <Layers size={13} />
-                Add group here
-              </button>
+              {!readOnly && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setContextMenu(null);
+                      onAddService();
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                  >
+                    <Plus size={13} />
+                    Add service
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const at =
+                        contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
+                          ? { x: contextMenu.flowX, y: contextMenu.flowY }
+                          : undefined;
+                      setContextMenu(null);
+                      addGroup(at);
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                  >
+                    <Layers size={13} />
+                    Add group here
+                  </button>
+                </>
+              )}
              <div className="border-t border-[var(--border-subtle)] mt-1 pt-1">
                <button
                  type="button"
@@ -719,7 +719,7 @@ export function ProjectWorkspacePage() {
            <Search size={12} />
            <kbd className="px-1 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
          </button>
-          {!isDemoMode && (
+          {!isDemoMode && signedIn && (
            <button
              onClick={openAddService}
              className="flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-[var(--accent-on)] text-xs font-semibold shadow-lg hover:shadow-xl transition-all"
@@ -742,7 +742,7 @@ export function ProjectWorkspacePage() {
            onAddService={openAddService}
            onOpenService={(serviceId) => navigate(serviceHref(serviceId))}
            onOpenSection={(serviceId, section) => navigate(serviceSectionHref(serviceId, section))}
-            readOnly={isDemoMode}
+            readOnly={isDemoMode || !signedIn}
          />
          {isDemoMode && (
            <div className="absolute top-4 left-1/2 -translate-x-1/2 pointer-events-none">
@@ -8299,7 +8299,13 @@ export interface components {
                images?: number;
                driver?: string;
                server?: string;
+                os?: string;
            };
+            /**
+             * @description What the telemetry measures — `host` for a native daemon, `docker-desktop-vm` when Docker runs inside a Desktop VM.
+             * @enum {string}
+             */
+            scope?: "host" | "docker-desktop-vm";
            /** Format: date-time */
            collected_at?: string;
        };
@@ -68,6 +68,8 @@ export type ServiceRuntime = {
  desired: number;
  status: 'running' | 'degraded' | 'stopped';
  urls: string[];
+  ports: number[];
+  health?: 'healthy' | 'unhealthy' | 'unreachable' | '';
  containers: RuntimeContainer[];
 };

@@ -223,7 +225,9 @@ export type HostMonitoring = {
    images?: number;
    driver?: string;
    server?: string;
+    os?: string;
  };
+  scope: 'host' | 'docker-desktop-vm';
  collectedAt: string;
 };

@@ -886,6 +890,7 @@ function normalizeHostMonitoring(payload: RawHostMonitoring): HostMonitoring {
    uptimeSeconds: payload.uptime_seconds ?? 0,
    dockerAvailable: Boolean(payload.docker_available),
    docker: payload.docker,
+    scope: payload.scope === 'docker-desktop-vm' ? 'docker-desktop-vm' : 'host',
    collectedAt: payload.collected_at ?? '',
  };
 }
@@ -1080,16 +1085,15 @@ export async function deleteService(serviceId: string): Promise<void> {
  });
 }

+function normalizeRuntime(runtime?: ServiceRuntime): ServiceRuntime {
+  const state = runtime ?? { desired: 0, status: 'stopped' as const, urls: [], ports: [], containers: [] };
+  // The API emits null (not []) for empty collections — coerce at the boundary.
+  return { ...state, urls: state.urls ?? [], ports: state.ports ?? [], containers: state.containers ?? [] };
+}
+
 export async function getServiceRuntime(serviceId: string): Promise<ServiceRuntime> {
  const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/runtime`);
-  return (
-    payload.runtime ?? {
-      desired: 0,
-      status: 'stopped',
-      urls: [],
-      containers: [],
-    }
-  );
+  return normalizeRuntime(payload.runtime);
 }

 async function serviceAction(serviceId: string, action: 'start' | 'stop' | 'restart'): Promise<void> {
@@ -1104,7 +1108,7 @@ export async function redeployService(serviceId: string): Promise<ServiceRuntime
  const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/redeploy`, {
    method: 'POST',
  });
-  return payload.runtime ?? { desired: 0, status: 'stopped', urls: [], containers: [] };
+  return normalizeRuntime(payload.runtime);
 }

 function normalizeServiceVariables(rows: RawServiceVariable[] | undefined): ServiceVariable[] {
@@ -456,6 +456,7 @@ export const demoHostMonitoring: HostMonitoring = {
  uptimeSeconds: 1_828_800,
  dockerAvailable: true,
  docker: { containers: 11, images: 34, driver: 'overlay2', server: '27.3.1' },
+  scope: 'host',
  collectedAt: new Date().toISOString(),
 };

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;
@@ -1,51 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-// https://vite.dev/config/
-export default defineConfig({
-    plugins: [react()],
-    resolve: {
-        alias: {
-            "@": path.resolve(__dirname, "./src"),
-        },
-    },
-    build: {
-        // Enable code splitting and optimization
-        rollupOptions: {
-            output: {
-                manualChunks: {
-                    // Split vendor libraries
-                    vendor: ['react', 'react-dom', '@tanstack/react-query'],
-                    ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu', 'lucide-react'],
-                    utils: ['date-fns', 'clsx', 'tailwind-merge']
-                },
-                // Optimize chunk naming for better caching
-                chunkFileNames: 'assets/js/[name]-[hash].js',
-                entryFileNames: 'assets/js/[name]-[hash].js',
-                assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
-            }
-        },
-        // Enable source maps for production debugging
-        sourcemap: true,
-        // Optimize bundle size
-        minify: 'terser',
-        // Set appropriate chunk size limit for better caching
-        chunkSizeWarningLimit: 1000
-    },
-    // Optimize dependencies during build
-    optimizeDeps: {
-        include: ['react', 'react-dom', '@tanstack/react-query', 'date-fns']
-    },
-    // Development server optimization
-    server: {
-        fs: {
-            // Allow serving files from project root
-            allow: ['..']
-        }
-    },
-    // Preview server optimization
-    preview: {
-        port: 4173,
-        strictPort: true
-    }
-});
@@ -30,7 +30,9 @@ export default defineConfig({
          // Split vendor libraries
          vendor: ['react', 'react-dom', '@tanstack/react-query'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu', 'lucide-react'],
-          utils: ['date-fns', 'clsx', 'tailwind-merge']
+          utils: ['date-fns', 'clsx', 'tailwind-merge'],
+          canvas: ['@xyflow/react'],
+          charts: ['recharts']
        },
        // Optimize chunk naming for better caching
        chunkFileNames: 'assets/js/[name]-[hash].js',