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 15:51:26 +00:00 · 2026-10-04 09:01:28 +02:00
1 parent d968eb2315
commit 32b52d121f
@@ -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">