vibecarbon 0.1.0

package/carbon/src/client/pages/admin/Infrastructure.tsx

@@ -0,0 +1,257 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  Activity,
+  AlertCircle,
+  CheckCircle2,
+  Cloud,
+  Container,
+  Database,
+  Globe,
+  HardDrive,
+  Loader2,
+  Network,
+  Server,
+  Shield,
+} from 'lucide-react';
+import { ServicesStatus } from '@/components/admin/ServicesStatus';
+import { ContentPanel } from '@/components/ContentPanel';
+import { PageHeader } from '@/components/PageHeader';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { getAuthHeaders } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+interface ServiceStatus {
+  name: string;
+  container: string;
+  status: 'healthy' | 'unhealthy' | 'unknown';
+  latencyMs?: number;
+  error?: string;
+}
+
+interface ServicesStatusResponse {
+  summary: { healthy: number; unhealthy: number; total: number };
+  services: ServiceStatus[];
+  timestamp: string;
+}
+
+async function fetchServicesStatus(): Promise<ServicesStatusResponse> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/_internal/services/status', { headers });
+  if (!response.ok) throw new Error('Failed to fetch');
+  return response.json();
+}
+
+// Service topology: layers from top (user-facing) to bottom (data)
+const TOPOLOGY_LAYERS = [
+  {
+    name: 'Edge',
+    icon: Globe,
+    services: ['traefik'],
+    description: 'Load balancer & reverse proxy',
+  },
+  {
+    name: 'API Gateway',
+    icon: Shield,
+    services: ['kong'],
+    description: 'Authentication & rate limiting',
+  },
+  {
+    name: 'Application',
+    icon: Server,
+    services: ['auth', 'rest', 'realtime', 'storage', 'meta', 'studio'],
+    description: 'Core Supabase services',
+  },
+  {
+    name: 'Data',
+    icon: Database,
+    services: ['db', 'redis'],
+    description: 'PostgreSQL & caching',
+  },
+  {
+    name: 'Observability',
+    icon: Activity,
+    services: ['prometheus', 'grafana', 'loki'],
+    description: 'Monitoring & logging',
+  },
+  {
+    name: 'Tooling',
+    icon: Container,
+    services: ['n8n', 'metabase', 'imgproxy'],
+    description: 'Automation, analytics & media',
+  },
+] as const;
+
+function StatusDot({ status }: { status: 'healthy' | 'unhealthy' | 'unknown' | 'not_running' }) {
+  return (
+    <span
+      className={cn(
+        'inline-block size-2.5 rounded-full',
+        status === 'healthy' && 'bg-success',
+        status === 'unhealthy' && 'bg-destructive',
+        status === 'unknown' && 'bg-warning',
+        status === 'not_running' && 'bg-muted-foreground/30'
+      )}
+    />
+  );
+}
+
+export default function Infrastructure() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['services-status'],
+    queryFn: fetchServicesStatus,
+    refetchInterval: 30000,
+    staleTime: 10000,
+  });
+
+  const serviceMap = new Map(data?.services.map((s) => [s.container, s]) ?? []);
+
+  return (
+    <>
+      <PageHeader title="Infrastructure" description="Service topology and system health" />
+
+      <ContentPanel>
+        {/* Summary badges */}
+        {data && (
+          <div className="flex flex-wrap gap-3">
+            <Badge variant="outline" className="gap-1.5 px-3 py-1.5">
+              <CheckCircle2 className="size-3.5 text-success" />
+              {data.summary.healthy} healthy
+            </Badge>
+            {data.summary.unhealthy > 0 && (
+              <Badge variant="outline" className="gap-1.5 px-3 py-1.5">
+                <AlertCircle className="size-3.5 text-destructive" />
+                {data.summary.unhealthy} unhealthy
+              </Badge>
+            )}
+            <Badge variant="outline" className="gap-1.5 px-3 py-1.5">
+              <HardDrive className="size-3.5" />
+              {data.summary.total} services
+            </Badge>
+          </div>
+        )}
+
+        {/* Topology */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Network className="size-5" />
+              Service Topology
+            </CardTitle>
+            <CardDescription>Visual map of your infrastructure stack</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {TOPOLOGY_LAYERS.map((layer, i) => {
+                  const layerServices = layer.services
+                    .map((name) => ({
+                      name,
+                      status: serviceMap.get(name),
+                    }))
+                    .filter((s) => s.status || layer.services.length <= 3);
+
+                  if (layerServices.length === 0) return null;
+
+                  return (
+                    <div key={layer.name}>
+                      {/* Layer */}
+                      <div className="rounded-lg border p-4">
+                        <div className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
+                          <layer.icon className="size-4" />
+                          <span className="font-medium">{layer.name}</span>
+                          <span className="text-xs">— {layer.description}</span>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {layerServices.map((svc) => (
+                            <div
+                              key={svc.name}
+                              className={cn(
+                                'flex items-center gap-2 rounded-md border px-3 py-2 text-sm',
+                                svc.status?.status === 'healthy' &&
+                                  'border-success/20 bg-success/5',
+                                svc.status?.status === 'unhealthy' &&
+                                  'border-destructive/20 bg-destructive/5',
+                                svc.status?.status === 'unknown' &&
+                                  'border-warning/20 bg-warning/5',
+                                !svc.status && 'border-border/50 opacity-40'
+                              )}
+                            >
+                              <StatusDot status={svc.status?.status ?? 'not_running'} />
+                              <span className="font-medium">{svc.status?.name ?? svc.name}</span>
+                              {svc.status?.latencyMs !== undefined &&
+                                svc.status.status === 'healthy' && (
+                                  <span className="text-xs text-muted-foreground">
+                                    {svc.status.latencyMs}ms
+                                  </span>
+                                )}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* Connector */}
+                      {i < TOPOLOGY_LAYERS.length - 1 && layerServices.length > 0 && (
+                        <div className="flex justify-center py-1">
+                          <div className="h-3 w-px bg-border" />
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Deployment info */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Cloud className="size-5" />
+              Deployment
+            </CardTitle>
+            <CardDescription>Configuration and deployment details</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <InfoRow
+                label="Environment"
+                value={import.meta.env.VITE_ENVIRONMENT || import.meta.env.MODE || 'development'}
+              />
+              <InfoRow label="Version" value={import.meta.env.VITE_APP_VERSION || '0.1.0'} />
+              <InfoRow
+                label="Supabase URL"
+                value={import.meta.env.VITE_SUPABASE_URL || 'Not configured'}
+              />
+              <InfoRow
+                label="HA Mode"
+                value={
+                  data?.services.some((s) => s.container.includes('standby'))
+                    ? 'Multi-region'
+                    : 'Single region'
+                }
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Full services status (existing component) */}
+        <ServicesStatus />
+      </ContentPanel>
+    </>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border p-3">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="mt-0.5 text-sm font-medium truncate">{value}</p>
+    </div>
+  );
+}

package/carbon/src/client/pages/admin/Jobs.tsx

@@ -0,0 +1,225 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CheckCircle, Clock, Loader2, Play, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import { PageHeader } from '@/components/PageHeader';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { getAuthHeaders } from '@/lib/api';
+import { ContentPanel } from '../../components/ContentPanel';
+
+interface JobSummary {
+  name: string;
+  lastRun: string | null;
+  lastStatus: string;
+  lastResult: string | null;
+  lastError: string | null;
+  runCount: number;
+}
+
+interface JobHistory {
+  id: string;
+  job_name: string;
+  status: string;
+  started_at: string;
+  finished_at: string | null;
+  duration_ms: number | null;
+  result: string | null;
+  error: string | null;
+}
+
+const jobsQueryKey = ['admin', 'jobs'];
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function StatusBadge({ status }: { status: string }) {
+  if (status === 'succeeded') {
+    return (
+      <Badge variant="secondary" className="gap-1">
+        <CheckCircle className="size-3" />
+        Success
+      </Badge>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <Badge variant="destructive" className="gap-1">
+        <XCircle className="size-3" />
+        Failed
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="gap-1">
+      <Clock className="size-3" />
+      {status}
+    </Badge>
+  );
+}
+
+export default function AdminJobs() {
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery<{ jobs: JobSummary[]; history: JobHistory[] }>({
+    queryKey: jobsQueryKey,
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/admin/jobs', { headers });
+      if (!response.ok) throw new Error('Failed to fetch jobs');
+      return response.json();
+    },
+  });
+
+  const { data: historyData } = useQuery<{ history: JobHistory[] }>({
+    queryKey: [...jobsQueryKey, 'history'],
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/admin/jobs/history?limit=50', { headers });
+      if (!response.ok) throw new Error('Failed to fetch job history');
+      return response.json();
+    },
+  });
+
+  const triggerMutation = useMutation({
+    mutationFn: async (jobName: string) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/admin/jobs/trigger', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ jobName }),
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || 'Failed to trigger job');
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: jobsQueryKey });
+      toast.success('Job triggered successfully');
+    },
+    onError: (err) => {
+      toast.error(err.message);
+    },
+  });
+
+  const jobs = data?.jobs ?? [];
+  const history = historyData?.history ?? data?.history ?? [];
+
+  return (
+    <>
+      <PageHeader
+        title="Background Jobs"
+        description="Scheduled database jobs powered by pg_cron"
+      />
+
+      <ContentPanel variant="default">
+        <div className="space-y-6">
+          {/* Scheduled Jobs */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock className="size-5" />
+                Scheduled Jobs
+              </CardTitle>
+              <CardDescription>
+                Jobs are managed via pg_cron in PostgreSQL. Edit the migration file to add or modify
+                schedules.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {isLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="size-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : jobs.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No job history yet. Jobs will appear here after their first execution.
+                </p>
+              ) : (
+                <div className="space-y-3">
+                  {jobs.map((job) => (
+                    <div
+                      key={job.name}
+                      className="flex items-center justify-between rounded-lg border p-4"
+                    >
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium font-mono text-sm">{job.name}</span>
+                          <StatusBadge status={job.lastStatus} />
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          {job.lastRun ? `Last run: ${formatDate(job.lastRun)}` : 'Never run'}
+                          {job.runCount > 0 && ` (${job.runCount} total runs)`}
+                        </div>
+                        {job.lastResult && (
+                          <p className="text-xs text-muted-foreground">{job.lastResult}</p>
+                        )}
+                        {job.lastError && (
+                          <p className="text-xs text-destructive">{job.lastError}</p>
+                        )}
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => triggerMutation.mutate(job.name)}
+                        disabled={triggerMutation.isPending}
+                      >
+                        {triggerMutation.isPending && triggerMutation.variables === job.name ? (
+                          <Loader2 className="size-4 mr-1 animate-spin" />
+                        ) : (
+                          <Play className="size-4 mr-1" />
+                        )}
+                        Run Now
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Execution History */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Execution History</CardTitle>
+              <CardDescription>Recent job executions (last 50)</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {history.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No execution history yet.</p>
+              ) : (
+                <div className="space-y-2">
+                  {history.map((entry) => (
+                    <div
+                      key={entry.id}
+                      className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+                    >
+                      <div className="flex items-center gap-3">
+                        <StatusBadge status={entry.status} />
+                        <span className="font-mono text-xs">{entry.job_name}</span>
+                      </div>
+                      <div className="flex items-center gap-3 text-muted-foreground text-xs">
+                        {entry.result && <span className="max-w-48 truncate">{entry.result}</span>}
+                        {entry.error && (
+                          <span className="max-w-48 truncate text-destructive">{entry.error}</span>
+                        )}
+                        <span>{formatDate(entry.started_at)}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </ContentPanel>
+    </>
+  );
+}

package/carbon/src/client/pages/admin/Logs.tsx

@@ -0,0 +1,18 @@
+import { DockerLogs } from '@/components/admin/DockerLogs';
+import { PageHeader } from '@/components/PageHeader';
+import { useEnabledServices } from '@/hooks/useRunningServices';
+
+export default function AdminLogs() {
+  const { services } = useEnabledServices();
+  const observabilityEnabled = services.some((s) => s.id === 'monitoring');
+
+  return (
+    <>
+      <PageHeader title="Logs" description="Application and audit logs" />
+
+      <div className="flex flex-1 flex-col gap-4 overflow-hidden p-6">
+        <DockerLogs showGrafanaLink={observabilityEnabled} />
+      </div>
+    </>
+  );
+}