vibecarbon 0.1.0

package/carbon/src/client/components/admin/DockerLogs.tsx

@@ -0,0 +1,276 @@
+import { useQuery } from '@tanstack/react-query';
+import { AlertCircle, ChevronDown, ExternalLink, Loader2, RefreshCw, Terminal } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { getAuthHeaders } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+interface LogsResponse {
+  success: boolean;
+  logs: string[];
+  error?: string;
+  meta?: {
+    tail: number;
+    since: string;
+    container: string;
+    lineCount: number;
+    timestamp: string;
+  };
+}
+
+interface ContainersResponse {
+  containers: Array<{
+    name: string;
+    container: string;
+  }>;
+}
+
+const TIME_OPTIONS = [
+  { label: 'Last 5 minutes', value: '5m' },
+  { label: 'Last 10 minutes', value: '10m' },
+  { label: 'Last 30 minutes', value: '30m' },
+  { label: 'Last 1 hour', value: '1h' },
+  { label: 'Last 6 hours', value: '6h' },
+  { label: 'Last 24 hours', value: '24h' },
+];
+
+const TAIL_OPTIONS = [
+  { label: '100 lines', value: 100 },
+  { label: '200 lines', value: 200 },
+  { label: '500 lines', value: 500 },
+  { label: '1000 lines', value: 1000 },
+];
+
+async function fetchLogs(container: string, since: string, tail: number): Promise<LogsResponse> {
+  const params = new URLSearchParams({
+    since,
+    tail: String(tail),
+  });
+  if (container !== 'all') {
+    params.set('container', container);
+  }
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/_internal/services/status/logs?${params}`, { headers });
+  return response.json();
+}
+
+async function fetchContainers(): Promise<ContainersResponse> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/_internal/services/status/logs/containers', { headers });
+  return response.json();
+}
+
+// Color code log lines based on content
+function getLogLineClass(line: string): string {
+  const lowerLine = line.toLowerCase();
+  if (lowerLine.includes('error') || lowerLine.includes('fatal') || lowerLine.includes('panic')) {
+    return 'text-destructive';
+  }
+  if (lowerLine.includes('warn')) {
+    return 'text-warning';
+  }
+  if (lowerLine.includes('debug') || lowerLine.includes('trace')) {
+    return 'text-gray-500';
+  }
+  return '';
+}
+
+// Extract container name from log line (format: "container-name  | timestamp log...")
+function parseLogLine(line: string): { container?: string; content: string } {
+  const match = line.match(/^([a-z0-9_-]+)\s+\|\s+(.*)$/i);
+  if (match) {
+    return { container: match[1], content: match[2] };
+  }
+  return { content: line };
+}
+
+const projectName = import.meta.env.VITE_PROJECT_NAME ?? '{{PROJECT_NAME}}';
+
+function getGrafanaLogsUrl(): string {
+  const { protocol, hostname } = window.location;
+  const baseDomain = hostname.includes('localhost')
+    ? 'localhost'
+    : hostname.replace(/^[^.]+\./, '');
+  return `${protocol}//grafana.${baseDomain}/d/${projectName}-logs/logs`;
+}
+
+interface DockerLogsProps {
+  showGrafanaLink?: boolean;
+}
+
+export function DockerLogs({ showGrafanaLink = false }: DockerLogsProps) {
+  const [selectedContainer, setSelectedContainer] = useState('all');
+  const [since, setSince] = useState('10m');
+  const [tail, setTail] = useState(200);
+  const [autoScroll, setAutoScroll] = useState(false);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+
+  const { data: containersData } = useQuery({
+    queryKey: ['docker-containers'],
+    queryFn: fetchContainers,
+  });
+
+  const {
+    data: logsData,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['docker-logs', selectedContainer, since, tail],
+    queryFn: () => fetchLogs(selectedContainer, since, tail),
+    refetchInterval: 10000, // Auto-refresh every 10 seconds
+    staleTime: 5000,
+  });
+
+  // Auto-scroll to bottom when new logs arrive
+  useEffect(() => {
+    if (autoScroll && logsEndRef.current && logsData?.logs) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logsData?.logs, autoScroll]);
+
+  const containers = containersData?.containers || [];
+  const logs = logsData?.logs || [];
+  const selectedTimeOption = TIME_OPTIONS.find((o) => o.value === since);
+  const selectedTailOption = TAIL_OPTIONS.find((o) => o.value === tail);
+  const selectedContainerName =
+    selectedContainer === 'all'
+      ? 'All Containers'
+      : containers.find((c) => c.container === selectedContainer)?.name || selectedContainer;
+
+  const handleOpenGrafana = () => {
+    window.open(getGrafanaLogsUrl(), '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <>
+      {/* Header with filters and actions */}
+      <div className="flex flex-wrap items-center justify-between gap-2 shrink-0">
+        {/* Filters */}
+        <div className="flex flex-wrap items-center gap-2">
+          {/* Container filter */}
+          <DropdownMenu>
+            <DropdownMenuTrigger className="inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-w-[140px]">
+              {selectedContainerName}
+              <ChevronDown className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem onClick={() => setSelectedContainer('all')}>
+                All Containers
+              </DropdownMenuItem>
+              {containers.map((c) => (
+                <DropdownMenuItem
+                  key={c.container}
+                  onClick={() => setSelectedContainer(c.container)}
+                >
+                  {c.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Time filter */}
+          <DropdownMenu>
+            <DropdownMenuTrigger className="inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-w-[140px]">
+              {selectedTimeOption?.label}
+              <ChevronDown className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {TIME_OPTIONS.map((option) => (
+                <DropdownMenuItem key={option.value} onClick={() => setSince(option.value)}>
+                  {option.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Tail filter */}
+          <DropdownMenu>
+            <DropdownMenuTrigger className="inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-w-[120px]">
+              {selectedTailOption?.label}
+              <ChevronDown className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {TAIL_OPTIONS.map((option) => (
+                <DropdownMenuItem key={option.value} onClick={() => setTail(option.value)}>
+                  {option.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Auto-scroll toggle */}
+          <Button
+            variant={autoScroll ? 'secondary' : 'outline'}
+            size="sm"
+            onClick={() => setAutoScroll(!autoScroll)}
+          >
+            Auto-scroll {autoScroll ? 'ON' : 'OFF'}
+          </Button>
+
+          {/* Refresh button */}
+          <Button variant="outline" size="sm" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('size-4', isFetching && 'animate-spin')} />
+          </Button>
+        </div>
+
+        {/* Grafana link */}
+        {showGrafanaLink && (
+          <Button onClick={handleOpenGrafana} size="sm">
+            <ExternalLink className="mr-2 size-4" />
+            Open Grafana Logs
+          </Button>
+        )}
+      </div>
+
+      {/* Terminal section - fills remaining space */}
+      {isLoading ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center rounded-lg border bg-zinc-950">
+          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : error || (logsData && !logsData.success) ? (
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border bg-zinc-950 text-center">
+          <AlertCircle className="size-8 text-destructive" />
+          <div>
+            <p className="font-medium text-zinc-200">Failed to load logs</p>
+            <p className="text-sm text-zinc-400">
+              {logsData?.error || 'Could not connect to Docker'}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
+            <RefreshCw className="mr-2 size-4" />
+            Retry
+          </Button>
+        </div>
+      ) : logs.length === 0 ? (
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 rounded-lg border bg-zinc-950 text-center">
+          <Terminal className="size-8 text-zinc-500" />
+          <p className="text-zinc-400">No logs found for the selected filters</p>
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1 overflow-y-auto overflow-x-auto rounded-lg border bg-zinc-950 p-4 font-mono text-xs">
+          <div>
+            {logs.map((line, index) => {
+              const { container, content } = parseLogLine(line);
+              const lineKey = `${index}-${line.slice(0, 50)}`;
+              return (
+                <div key={lineKey} className={cn('whitespace-pre', getLogLineClass(line))}>
+                  {container && <span className="mr-2 text-info">[{container}]</span>}
+                  <span className="text-zinc-300">{content}</span>
+                </div>
+              );
+            })}
+            <div ref={logsEndRef} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/carbon/src/client/components/admin/PerformanceMetrics.tsx

@@ -0,0 +1,230 @@
+import { useQuery } from '@tanstack/react-query';
+import { Activity, Clock, Cpu, HeartPulse } from 'lucide-react';
+import { Area, AreaChart, Bar, BarChart, Cell, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { Skeleton } from '@/components/ui/skeleton';
+import { getAuthHeaders } from '@/lib/api';
+
+interface PerformanceData {
+  server: {
+    uptimeSeconds: number;
+    memoryMB: { rss: number; heapUsed: number; heapTotal: number };
+    nodeVersion: string;
+    platform: string;
+  };
+  services: {
+    healthy: number;
+    total: number;
+    avgLatencyMs: number;
+    items: Array<{
+      name: string;
+      latencyMs: number;
+      status: 'healthy' | 'unhealthy' | 'unknown';
+    }>;
+  };
+}
+
+interface StatsResponse {
+  users: {
+    weeklySignups: Array<{ week: string; count: number }>;
+  };
+}
+
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  return `${days}d ${hours}h ${minutes}m`;
+}
+
+function getLatencyColor(ms: number): string {
+  if (ms < 50) return 'var(--chart-4)';
+  if (ms < 200) return 'var(--chart-2)';
+  return 'var(--chart-5)';
+}
+
+const latencyConfig = {
+  latencyMs: { label: 'Latency', color: 'var(--chart-1)' },
+} satisfies ChartConfig;
+
+const signupsConfig = {
+  count: { label: 'Signups', color: 'var(--chart-1)' },
+} satisfies ChartConfig;
+
+export function PerformanceMetrics() {
+  const { data: perfData, isLoading: perfLoading } = useQuery<PerformanceData>({
+    queryKey: ['admin', 'performance'],
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const res = await fetch('/api/v1/admin/performance', { headers });
+      if (!res.ok) throw new Error('Failed to fetch performance data');
+      return res.json();
+    },
+    refetchInterval: 30_000,
+  });
+
+  const { data: statsData, isLoading: statsLoading } = useQuery<StatsResponse>({
+    queryKey: ['admin', 'stats'],
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const res = await fetch('/api/v1/admin/stats', { headers });
+      if (!res.ok) throw new Error('Failed to fetch stats');
+      return res.json();
+    },
+    refetchInterval: 30_000,
+  });
+
+  const sortedServices = perfData
+    ? [...perfData.services.items].sort((a, b) => b.latencyMs - a.latencyMs)
+    : [];
+
+  const weeklySignups = statsData?.users?.weeklySignups ?? [];
+
+  return (
+    <div className="space-y-6">
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+              <Clock className="size-4" />
+              Uptime
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {perfLoading ? (
+              <Skeleton className="h-7 w-24" />
+            ) : (
+              <p className="text-2xl font-bold">
+                {perfData ? formatUptime(perfData.server.uptimeSeconds) : '--'}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+              <Activity className="size-4" />
+              Avg API Latency
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {perfLoading ? (
+              <Skeleton className="h-7 w-16" />
+            ) : (
+              <p className="text-2xl font-bold">
+                {perfData ? `${Math.round(perfData.services.avgLatencyMs)}ms` : '--'}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+              <Cpu className="size-4" />
+              Memory Used
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {perfLoading ? (
+              <Skeleton className="h-7 w-20" />
+            ) : (
+              <p className="text-2xl font-bold">
+                {perfData ? `${Math.round(perfData.server.memoryMB.heapUsed)} MB` : '--'}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+              <HeartPulse className="size-4" />
+              Healthy Services
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {perfLoading ? (
+              <Skeleton className="h-7 w-16" />
+            ) : (
+              <p className="text-2xl font-bold">
+                {perfData ? `${perfData.services.healthy} / ${perfData.services.total}` : '--'}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Service Latency Chart */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Service Latency</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {perfLoading ? (
+            <Skeleton className="h-[200px] w-full" />
+          ) : sortedServices.length > 0 ? (
+            <ChartContainer config={latencyConfig} className="h-[200px] w-full">
+              <BarChart data={sortedServices} layout="vertical">
+                <XAxis type="number" tickLine={false} axisLine={false} unit="ms" />
+                <YAxis
+                  type="category"
+                  dataKey="name"
+                  tickLine={false}
+                  axisLine={false}
+                  width={80}
+                  tick={{ fontSize: 12 }}
+                />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="latencyMs" radius={4}>
+                  {sortedServices.map((entry) => (
+                    <Cell key={entry.name} fill={getLatencyColor(entry.latencyMs)} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+          ) : (
+            <p className="text-sm text-muted-foreground">No service data available.</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* User Growth Chart */}
+      <Card>
+        <CardHeader>
+          <CardTitle>User Growth</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {statsLoading ? (
+            <Skeleton className="h-[200px] w-full" />
+          ) : weeklySignups.length > 0 ? (
+            <ChartContainer config={signupsConfig} className="h-[200px] w-full">
+              <AreaChart data={weeklySignups}>
+                <XAxis dataKey="week" tickLine={false} axisLine={false} />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Area
+                  dataKey="count"
+                  stroke="var(--color-count)"
+                  fill="var(--color-count)"
+                  fillOpacity={0.15}
+                  strokeWidth={2}
+                />
+              </AreaChart>
+            </ChartContainer>
+          ) : (
+            <p className="text-sm text-muted-foreground">No signup data available.</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/carbon/src/client/components/admin/ServiceCard.tsx

@@ -0,0 +1,45 @@
+import { ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { type AdminService, getServiceUrl } from '@/lib/admin-services';
+
+interface ServiceCardProps {
+  service: AdminService;
+}
+
+export function ServiceCard({ service }: ServiceCardProps) {
+  const url = getServiceUrl(service);
+
+  const handleOpen = () => {
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
+            <service.icon className="size-5 text-muted-foreground" />
+          </div>
+          <div>
+            <CardTitle>{service.name}</CardTitle>
+            <CardDescription>{service.description}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col justify-between gap-4">
+        <p className="text-sm text-muted-foreground">{service.subtitle}</p>
+        {url ? (
+          <Button variant="outline" onClick={handleOpen} className="w-full">
+            Open
+            <ExternalLink className="ml-2 size-4" data-icon="inline-end" />
+          </Button>
+        ) : (
+          <Button variant="outline" disabled className="w-full">
+            Internal only
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}