vibecarbon 0.1.0

package/carbon/src/client/index.css

@@ -0,0 +1,467 @@
+/* Typography */
+@import "@fontsource-variable/noto-sans";
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/700.css";
+
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* Base font size - increase for larger UI (default is 16px) */
+html {
+  position: relative;
+  font-size: 18px;
+  scroll-padding-top: 5rem;
+  scrollbar-gutter: stable;
+}
+
+body {
+  position: relative;
+  overflow-x: hidden;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/* Theme: Teal with Glassmorphism */
+/* Primary: Bright Teal, Secondary Accent: Magenta */
+/* Typography: Noto Sans, JetBrains Mono (code) */
+
+:root {
+  /* ============================================
+     CUSTOMIZE YOUR BRAND - Edit these values
+     ============================================ */
+  --primary: oklch(0.82 0.14 192);           /* Brand primary (teal) */
+  --primary-dim: oklch(0.55 0.12 192);       /* Dimmed variant */
+  --primary-foreground: oklch(0.98 0.01 181);
+  --secondary-accent: oklch(0.45 0.2 350);   /* Brand accent (magenta) */
+  --secondary-accent-foreground: oklch(0.99 0 0);
+  --destructive: oklch(0.525 0.223 3.958);   /* pink-700 */
+  --info: var(--primary);
+  --warning: oklch(0.769 0.188 70.08);
+  --success: oklch(0.704 0.14 181);
+  --radius: 0.625rem;                        /* Border radius base */
+  --radius-card: var(--radius-xl);           /* Cards, dialogs, panels */
+
+  /* Glow effects (derived from brand colors) */
+  --glow-primary: oklch(0.82 0.14 192 / 0.25);
+  --glow-accent: oklch(0.58 0.24 350 / 0.25);
+
+  /* Light mode gradient (not visible by default) */
+  --gradient-start: oklch(1 0 0);
+  --gradient-end: oklch(0.98 0 0);
+
+  /* ============================================
+     SURFACE COLORS - Rarely need customization
+     ============================================ */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+
+  /* Accent matches primary for bold menu accent */
+  --accent: var(--primary);
+  --accent-foreground: var(--primary-foreground);
+
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+
+  /* Chart colors - vibrant multi-hue palette */
+  --chart-1: var(--primary);
+  --chart-2: var(--warning);
+  --chart-3: var(--destructive);
+  --chart-4: var(--success);
+  --chart-5: oklch(0.65 0.22 290);
+
+  /* Sidebar - Maia defaults with brand primary */
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--primary);
+  --sidebar-accent-foreground: var(--primary-foreground);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  /* Primary - brighter dim variant in dark mode */
+  --primary: oklch(0.82 0.14 192);
+  --primary-dim: oklch(0.65 0.12 192);
+  --primary-foreground: oklch(0.08 0 0);
+
+  /* Secondary accent (magenta) - brighter in dark mode */
+  --secondary-accent: oklch(0.65 0.26 350);
+  --secondary-accent-foreground: oklch(0.99 0 0);
+
+  /* Glow colors */
+  --glow-primary: oklch(0.82 0.14 192 / 0.5);
+  --glow-accent: oklch(0.65 0.26 350 / 0.5);
+
+  /* Body gradient colors */
+  --gradient-start: oklch(0.12 0.02 265);
+  --gradient-end: oklch(0.17 0.03 260);
+
+  /* Transparent background to show gradient */
+  --background: transparent;
+  --foreground: oklch(0.98 0 0);
+
+  /* Card surfaces - with transparency */
+  --card: oklch(0.28 0.04 255 / 0.5);
+  --card-foreground: oklch(0.98 0 0);
+
+  /* Popovers/dropdowns - cool-tinted to match body gradient */
+  --popover: oklch(0.18 0.02 260);
+  --popover-foreground: oklch(0.985 0 0);
+
+  /* Secondary - muted gray */
+  --secondary: oklch(0.18 0 0);
+  --secondary-foreground: oklch(0.9 0 0);
+
+  /* Muted surfaces */
+  --muted: oklch(0.15 0 0);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+
+  /* Accent - subtle primary tint for hover states */
+  --accent: oklch(0.30 0.04 200 / 0.5);
+  --accent-foreground: oklch(0.98 0 0);
+
+  /* Destructive - vibrant red */
+  --destructive: oklch(0.525 0.223 3.958);
+  --info: var(--primary);
+  --warning: oklch(0.769 0.188 70.08);
+  --success: oklch(0.704 0.14 181);
+
+  /* Borders */
+  --border: oklch(0.33 0.025 195);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--primary);
+
+  /* Chart colors - vibrant multi-hue palette */
+  --chart-1: var(--primary);
+  --chart-2: var(--warning);
+  --chart-3: var(--destructive);
+  --chart-4: var(--success);
+  --chart-5: oklch(0.65 0.22 290);
+
+  /* Sidebar */
+  --sidebar: transparent;
+  --sidebar-foreground: oklch(0.98 0 0);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: oklch(0.08 0 0);
+  --sidebar-accent: var(--primary);
+  --sidebar-accent-foreground: oklch(0.08 0 0);
+  --sidebar-border: transparent;
+  --sidebar-ring: var(--primary);
+}
+
+@theme inline {
+  /* Typography */
+  --font-sans: "Noto Sans Variable", "Noto Sans", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Extended primary colors */
+  --color-primary-dim: var(--primary-dim);
+  --color-glow-primary: var(--glow-primary);
+  --color-glow-accent: var(--glow-accent);
+  --color-secondary-accent: var(--secondary-accent);
+  --color-secondary-accent-foreground: var(--secondary-accent-foreground);
+
+  /* Gradient colors for body background */
+  --color-gradient-start: var(--gradient-start);
+  --color-gradient-end: var(--gradient-end);
+
+  /* Standard color mappings */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-info: var(--info);
+  --color-warning: var(--warning);
+  --color-success: var(--success);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground antialiased cursor-default;
+  }
+  .dark body {
+    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+    background-attachment: fixed;
+  }
+  html {
+    @apply font-sans;
+  }
+
+  /* Bold headlines */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: 900;
+    letter-spacing: -0.02em;
+  }
+}
+
+/* Input background with color-mix for maia style */
+@supports (color: color-mix(in lab, red, red)) {
+  input,
+  textarea,
+  select,
+  [data-slot="input"] {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+}
+
+/* ============================================
+   EFFECTS SYSTEM
+   ============================================ */
+
+/* Film Grain Overlay */
+.film-grain::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.03;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+}
+
+/* Glow utilities */
+.glow-teal {
+  box-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+}
+
+.glow-magenta {
+  box-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+}
+
+.glow-teal-subtle {
+  box-shadow: 0 0 15px var(--glow-primary);
+}
+
+.glow-magenta-subtle {
+  box-shadow: 0 0 15px var(--glow-accent);
+}
+
+/* Text glow */
+.text-glow-teal {
+  text-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+}
+
+.text-glow-magenta {
+  text-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+}
+
+/* Border glow on hover */
+.border-glow-teal {
+  transition: box-shadow 0.3s ease;
+}
+
+.border-glow-teal:hover {
+  box-shadow: 0 0 0 1px var(--primary), 0 0 15px var(--glow-primary);
+}
+
+.border-glow-magenta:hover {
+  box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 15px var(--glow-accent);
+}
+
+/* Sparkle shimmer for premium badges */
+@keyframes shimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+.badge-shimmer {
+  background-size: 200% 100%;
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+/* Marquee for LogoStrip */
+@keyframes marquee-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+.marquee-track {
+  animation: marquee-scroll 30s linear infinite;
+  will-change: transform;
+}
+.marquee-track:hover { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
+
+/* Ambient orb pulse for Hero */
+@keyframes orb-pulse {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50%       { opacity: 0.8; transform: scale(1.04); }
+}
+.hero-orb { animation: orb-pulse 6s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } }
+
+/* MetricsStrip value shimmer — reuses existing shimmer keyframe */
+.metric-value {
+  background: linear-gradient(90deg,
+    oklch(0.98 0 0) 0%,
+    oklch(0.82 0.14 192) 40%,
+    oklch(0.98 0 0) 80%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 4s linear infinite;
+}
+
+/* Spotlight particle dots for glass containers */
+.spotlight-particles {
+  background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 1px, transparent 1px);
+  background-size: 24px 24px;
+  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 80%);
+}
+
+/* ============================================
+   PROSE OVERRIDES — dark glassmorphic theme
+   ============================================ */
+
+.dark :where(.prose) {
+  /* Headings */
+  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: oklch(0.98 0 0);
+    font-size: 1.5em;
+    border-bottom: 1px solid oklch(0.33 0.025 195 / 0.5);
+    padding-bottom: 0.4em;
+    margin-top: 2em;
+  }
+
+  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: oklch(0.88 0.06 192);
+  }
+
+  /* Strong */
+  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: oklch(0.98 0 0);
+  }
+
+  /* Links */
+  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
+    color: oklch(0.9 0.14 192);
+  }
+
+  /* Heading autolinks (rehype-autolink-headings) */
+  :where(h1, h2, h3, h4, h5, h6) :where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* Lists */
+  :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    list-style-type: disc;
+    padding-left: 1.5em;
+  }
+
+  :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    list-style-type: decimal;
+    padding-left: 1.5em;
+  }
+
+  /* Code blocks */
+  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    background-color: oklch(0.15 0.015 260 / 0.8);
+    border: 1px solid oklch(0.33 0.025 195 / 0.5);
+    border-radius: var(--radius-lg);
+  }
+
+  /* Inline code */
+  :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) {
+    color: oklch(0.82 0.14 192);
+    background-color: oklch(0.18 0.02 260);
+    padding: 0.15em 0.4em;
+    border-radius: 0.25em;
+    font-size: 0.875em;
+  }
+
+  :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::before,
+  :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::after {
+    content: none;
+  }
+
+  /* Tables */
+  :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: oklch(0.98 0 0);
+    background-color: oklch(0.18 0.02 260 / 0.6);
+    padding: 0.6em 1em;
+    border-bottom: 2px solid oklch(0.33 0.025 195 / 0.6);
+    text-align: left;
+  }
+
+  :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    padding: 0.6em 1em;
+    border-bottom: 1px solid oklch(0.33 0.025 195 / 0.3);
+  }
+
+  :where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
+    background-color: oklch(0.20 0.02 260 / 0.3);
+  }
+}

package/carbon/src/client/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
+
+    <title>%VITE_PROJECT_NAME%</title>
+    <meta name="description" content="%VITE_PROJECT_NAME% — Build, launch, and scale your SaaS product with auth, billing, teams, email, blog, docs, i18n, and production infrastructure included." />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="%VITE_PROJECT_NAME%" />
+    <meta property="og:description" content="Build, launch, and scale your SaaS product with auth, billing, teams, email, blog, docs, i18n, and production infrastructure included." />
+    <meta property="og:url" content="{{SITE_URL}}" />
+    <meta property="og:site_name" content="%VITE_PROJECT_NAME%" />
+    <!-- Replace with your own 1200x630 OG image for social sharing previews -->
+    <meta property="og:image" content="{{SITE_URL}}/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="%VITE_PROJECT_NAME%" />
+    <meta name="twitter:description" content="Build, launch, and scale your SaaS product with auth, billing, teams, email, blog, docs, i18n, and production infrastructure included." />
+    <meta name="twitter:image" content="{{SITE_URL}}/og-image.png" />
+
+    <!-- RSS -->
+    <link rel="alternate" type="application/rss+xml" title="%VITE_PROJECT_NAME% Blog" href="/rss.xml" />
+
+    <!-- Analytics (Plausible - privacy-friendly, no cookies) -->
+    <script>
+      (function() {
+        var d = '%VITE_PLAUSIBLE_DOMAIN%';
+        var s = '%VITE_PLAUSIBLE_SCRIPT_URL%';
+        if (d && d !== '' && !d.startsWith('%')) {
+          var el = document.createElement('script');
+          el.defer = true;
+          el.setAttribute('data-domain', d);
+          el.src = s || 'https://plausible.io/js/script.js';
+          document.head.appendChild(el);
+        }
+      })();
+    </script>
+
+    <!-- Dark theme - prevent any flash -->
+    <style>
+      html, body { background-color: #0d0d0d; color-scheme: dark; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/carbon/src/client/lib/admin-services.ts

@@ -0,0 +1,151 @@
+import { BarChart3, Database, LineChart, type LucideIcon, Network, Workflow } from 'lucide-react';
+
+export interface AdminService {
+  id: string;
+  name: string;
+  description: string;
+  subtitle: string;
+  icon: LucideIcon;
+  subdomain: string;
+  /**
+   * Path-based URL for production k8s routing (e.g., '/admin/studio').
+   * null = service is internal only (no external URL, requires kubectl port-forward).
+   * undefined = fall back to subdomain routing.
+   */
+  adminPath?: string | null;
+  /** Environment flag to check if service is enabled (e.g., 'VITE_N8N_ENABLED') */
+  envFlag?: string;
+  /** If true, service is always shown (core infrastructure) */
+  alwaysEnabled?: boolean;
+}
+
+const adminServices: AdminService[] = [
+  {
+    id: 'database',
+    name: 'Supabase',
+    description: 'Supabase Studio',
+    subtitle: 'Manage tables, run queries, view data',
+    icon: Database,
+    subdomain: 'studio',
+    // K8s: /admin/studio is strip-prefixed to /, then Studio redirects to /project/default.
+    // Compose: subdomain routing (studio.domain) serves Studio at root directly.
+    adminPath: '/admin/studio',
+    alwaysEnabled: true,
+  },
+  {
+    id: 'gateway',
+    name: 'Traefik',
+    description: 'Traefik Dashboard',
+    subtitle: 'View routes, monitor traffic',
+    icon: Network,
+    subdomain: 'traefik',
+    // Dashboard UI at /admin/traefik/dashboard/ (strip-prefix → api@internal /dashboard/)
+    // API calls (/api/version, /api/overview, etc.) routed to api@internal at priority 12.
+    adminPath: '/admin/traefik/dashboard/',
+    alwaysEnabled: true,
+  },
+  {
+    id: 'monitoring',
+    name: 'Grafana',
+    description: 'Grafana',
+    subtitle: 'Metrics, logs, dashboards',
+    icon: BarChart3,
+    subdomain: 'grafana',
+    adminPath: '/admin/grafana',
+    envFlag: 'VITE_OBSERVABILITY_ENABLED',
+  },
+  {
+    id: 'automation',
+    name: 'n8n',
+    description: 'Workflow Automation',
+    subtitle: 'Visual workflows, integrations',
+    icon: Workflow,
+    subdomain: 'n8n',
+    adminPath: '/admin/n8n',
+    envFlag: 'VITE_N8N_ENABLED',
+  },
+  {
+    id: 'analytics',
+    name: 'Metabase',
+    description: 'Business Intelligence',
+    subtitle: 'Business intelligence, reports',
+    icon: LineChart,
+    subdomain: 'metabase',
+    adminPath: '/admin/metabase',
+    envFlag: 'VITE_METABASE_ENABLED',
+  },
+];
+
+/**
+ * Get the full URL for an admin service, or null if the service has no external URL.
+ *
+ * Routing mode is determined by VITE_ROUTING_MODE:
+ * - 'subdomain' (default, compose): subdomain routing (e.g., studio.example.com)
+ * - 'path' (k8s): path-based routing via adminPath (e.g., /project/default)
+ *
+ * Localhost always uses subdomain routing regardless of VITE_ROUTING_MODE.
+ */
+export function getServiceUrl(service: AdminService): string | null {
+  const { protocol, hostname } = window.location;
+  const routingMode = import.meta.env.VITE_ROUTING_MODE || 'subdomain';
+
+  if (hostname.includes('localhost')) {
+    // Dev: subdomain routing via docker-compose (e.g., studio.localhost)
+    return `${protocol}//${service.subdomain}.localhost`;
+  }
+
+  // K8s: use path-based routing via adminPath
+  if (routingMode === 'path') {
+    if (service.adminPath !== undefined) {
+      if (service.adminPath === null) return null; // Internal only
+      return `${window.location.origin}${service.adminPath}`;
+    }
+  }
+
+  // Compose / fallback: subdomain routing (e.g., studio.example.com)
+  const baseDomain = hostname.replace(/^[^.]+\./, '');
+  return `${protocol}//${service.subdomain}.${baseDomain}`;
+}
+
+/**
+ * Get list of enabled admin services.
+ *
+ * Services are enabled if:
+ * 1. They have alwaysEnabled: true (core infrastructure like Supabase, Traefik)
+ * 2. Their VITE_*_ENABLED env var is set to 'true'
+ * 3. In development mode, they can also be enabled via the services status API
+ *
+ * For development, set these in .env.local:
+ *   VITE_N8N_ENABLED=true
+ *   VITE_METABASE_ENABLED=true
+ *   VITE_OBSERVABILITY_ENABLED=true
+ */
+export function getEnabledServices(): AdminService[] {
+  return adminServices.filter((service) => {
+    // Core services are always shown
+    if (service.alwaysEnabled) return true;
+    // Optional services need their env flag set
+    if (!service.envFlag) return true;
+    return import.meta.env[service.envFlag] === 'true';
+  });
+}
+
+/**
+ * Get all available admin services (for displaying status, etc.)
+ */
+export function getAllServices(): AdminService[] {
+  return adminServices;
+}
+
+/**
+ * Check if a specific service is enabled
+ */
+export function isServiceEnabled(serviceId: string): boolean {
+  const service = adminServices.find((s) => s.id === serviceId);
+  if (!service) return false;
+  if (service.alwaysEnabled) return true;
+  if (!service.envFlag) return true;
+  return import.meta.env[service.envFlag] === 'true';
+}
+
+export { adminServices };

package/carbon/src/client/lib/api.ts

@@ -0,0 +1,32 @@
+import { supabase } from './supabase';
+
+/**
+ * Get authorization headers for API requests.
+ * Retrieves the current session and returns headers with the access token.
+ */
+export async function getAuthHeaders(): Promise<HeadersInit> {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  const headers: HeadersInit = { 'Content-Type': 'application/json' };
+  if (session) {
+    headers.Authorization = `Bearer ${session.access_token}`;
+  }
+  return headers;
+}
+
+/**
+ * Extract error message from API response.
+ * Handles both JSON error responses and non-JSON responses.
+ */
+export async function extractApiError(
+  response: Response,
+  fallback = 'Request failed'
+): Promise<string> {
+  try {
+    const data = await response.json();
+    return data.error || fallback;
+  } catch {
+    return fallback;
+  }
+}