@syncular/ui 0.0.0

package/src/charts/outcomes-chart.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Cell, Pie, PieChart } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './chart';
+
+export interface OutcomesChartDataPoint {
+  pushCount: number;
+  pullCount: number;
+  errorCount: number;
+}
+
+export interface OutcomesChartProps {
+  data: OutcomesChartDataPoint[];
+  className?: string;
+}
+
+const chartConfig = {
+  success: {
+    label: 'Success',
+    color: 'var(--color-healthy)',
+  },
+  errors: {
+    label: 'Errors',
+    color: 'var(--color-offline)',
+  },
+} satisfies ChartConfig;
+
+export function OutcomesChart({ data, className }: OutcomesChartProps) {
+  const totalOperations = data.reduce(
+    (sum, bucket) => sum + bucket.pushCount + bucket.pullCount,
+    0
+  );
+  const totalErrors = data.reduce((sum, bucket) => sum + bucket.errorCount, 0);
+  const successCount = totalOperations - totalErrors;
+
+  const chartData = [
+    { name: 'Success', value: successCount, fill: 'var(--color-healthy)' },
+    { name: 'Errors', value: totalErrors, fill: 'var(--color-offline)' },
+  ].filter((item) => item.value > 0);
+
+  if (chartData.length === 0) {
+    chartData.push({
+      name: 'No data',
+      value: 1,
+      fill: 'var(--color-neutral-700)',
+    });
+  }
+
+  const errorRate =
+    totalOperations > 0
+      ? ((totalErrors / totalOperations) * 100).toFixed(1)
+      : '0';
+
+  return (
+    <ChartContainer config={chartConfig} className={className}>
+      <PieChart>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent hideLabel />}
+        />
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={60}
+          outerRadius={80}
+          paddingAngle={2}
+        >
+          {chartData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.fill} />
+          ))}
+        </Pie>
+        <text
+          x="50%"
+          y="50%"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="fill-foreground text-2xl font-bold"
+        >
+          {errorRate}%
+        </text>
+        <text
+          x="50%"
+          y="58%"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="fill-neutral-500 text-xs"
+        >
+          error rate
+        </text>
+      </PieChart>
+    </ChartContainer>
+  );
+}

package/src/console/activity-bars.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export type ActivityBarData = {
+  pushPercent: number;
+  pullPercent: number;
+};
+
+export type ActivityTimeRange = '1h' | '6h' | '24h' | '7d';
+
+export type ActivityBarsProps = ComponentPropsWithoutRef<'div'> & {
+  bars: ActivityBarData[];
+  activeRange?: ActivityTimeRange;
+  onRangeChange?: (range: ActivityTimeRange) => void;
+  startLabel?: string;
+  midLabel?: string;
+  endLabel?: string;
+};
+
+const ranges: ActivityTimeRange[] = ['1h', '6h', '24h', '7d'];
+
+const ActivityBars = forwardRef<HTMLDivElement, ActivityBarsProps>(
+  (
+    {
+      className,
+      bars,
+      activeRange = '1h',
+      onRangeChange,
+      startLabel = '-1h',
+      midLabel = '-30m',
+      endLabel = 'now',
+      ...props
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn('px-5 pt-4 pb-3 border-b border-border', className)}
+      {...props}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          Activity
+        </span>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-sm bg-healthy/70" />
+            <span className="font-mono text-[9px] text-neutral-500">Push</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-sm bg-flow/70" />
+            <span className="font-mono text-[9px] text-neutral-500">Pull</span>
+          </div>
+          <div className="flex gap-0.5 ml-2">
+            {ranges.map((r) => (
+              <button
+                key={r}
+                type="button"
+                onClick={() => onRangeChange?.(r)}
+                className={cn(
+                  'font-mono text-[9px] border rounded-sm px-1.5 py-0.5 cursor-pointer transition-all',
+                  r === activeRange
+                    ? 'text-white border-border-bright bg-white/[0.03]'
+                    : 'text-neutral-500 border-transparent hover:text-neutral-300'
+                )}
+              >
+                {r}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div className="flex items-end gap-[2px] h-16">
+        {bars.map((bar, i) => (
+          <div
+            key={i}
+            className="flex-1 flex flex-col gap-[1px] h-16 justify-end"
+          >
+            <div
+              className="bg-flow/60 rounded-t-sm min-h-[2px]"
+              style={{ height: `${bar.pullPercent}%` }}
+            />
+            <div
+              className="bg-healthy/60 rounded-t-sm min-h-[2px]"
+              style={{ height: `${bar.pushPercent}%` }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Time labels */}
+      <div className="flex justify-between mt-1.5">
+        <span className="font-mono text-[8px] text-neutral-600">
+          {startLabel}
+        </span>
+        <span className="font-mono text-[8px] text-neutral-600">
+          {midLabel}
+        </span>
+        <span className="font-mono text-[8px] text-neutral-600">
+          {endLabel}
+        </span>
+      </div>
+    </div>
+  )
+);
+ActivityBars.displayName = 'ActivityBars';
+
+export { ActivityBars };

package/src/console/alerts-config.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { Input } from '../primitives/input';
+import { Switch } from '../primitives/switch';
+
+export type AlertThresholds = {
+  p90Latency: number;
+  errorRate: number;
+  clientLag: number;
+};
+
+export type AlertsConfigProps = ComponentPropsWithoutRef<'div'> & {
+  enabled?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+  thresholds: AlertThresholds;
+  onThresholdsChange?: (thresholds: AlertThresholds) => void;
+};
+
+const AlertsConfig = forwardRef<HTMLDivElement, AlertsConfigProps>(
+  (
+    {
+      className,
+      enabled = true,
+      onEnabledChange,
+      thresholds,
+      onThresholdsChange,
+      ...props
+    },
+    ref
+  ) => {
+    function handleChange(key: keyof AlertThresholds, value: string) {
+      const num = Number(value);
+      if (Number.isFinite(num)) {
+        onThresholdsChange?.({ ...thresholds, [key]: num });
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+          className
+        )}
+        {...props}
+      >
+        {/* Header */}
+        <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-offline" />
+            <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+              Alerts
+            </span>
+          </div>
+          <Switch
+            checked={enabled}
+            onCheckedChange={(val) => onEnabledChange?.(val)}
+          />
+        </div>
+
+        {/* Fields */}
+        <div className="p-4 space-y-3">
+          <ThresholdRow
+            label="P90 latency threshold"
+            value={thresholds.p90Latency}
+            onChange={(v) => handleChange('p90Latency', v)}
+          />
+          <ThresholdRow
+            label="Error rate threshold"
+            value={thresholds.errorRate}
+            onChange={(v) => handleChange('errorRate', v)}
+          />
+          <ThresholdRow
+            label="Client lag threshold"
+            value={thresholds.clientLag}
+            onChange={(v) => handleChange('clientLag', v)}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+AlertsConfig.displayName = 'AlertsConfig';
+
+function ThresholdRow({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="font-mono text-[10px] text-neutral-500">{label}</span>
+      <Input
+        variant="mono"
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-[100px] text-[11px] px-2 py-1 text-right"
+      />
+    </div>
+  );
+}
+
+export { AlertsConfig };

package/src/console/api-keys-table.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { ApiKeyEntry } from '../lib/types';
+import { Badge, type BadgeProps } from '../primitives/badge';
+import { Button } from '../primitives/button';
+
+export type ApiKeysTableProps = ComponentPropsWithoutRef<'div'> & {
+  keys: ApiKeyEntry[];
+  onCreateKey?: () => void;
+  onRotateKey?: (name: string) => void;
+  onRevokeKey?: (name: string) => void;
+};
+
+const typeBadgeMap: Record<string, BadgeProps['variant']> = {
+  relay: 'relay',
+  admin: 'flow',
+  proxy: 'ghost',
+};
+
+const ApiKeysTable = forwardRef<HTMLDivElement, ApiKeysTableProps>(
+  (
+    { className, keys, onCreateKey, onRotateKey, onRevokeKey, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+        className
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          API Keys
+        </span>
+        {onCreateKey && (
+          <Button variant="primary" size="sm" onClick={onCreateKey}>
+            + Create Key
+          </Button>
+        )}
+      </div>
+
+      {/* Column headers */}
+      <div className="font-mono text-[9px] tracking-wider uppercase text-neutral-600 flex items-center gap-4 px-4 leading-6 border-b border-border">
+        <span className="w-[140px]">Name</span>
+        <span className="w-[70px]">Type</span>
+        <span className="flex-1">Prefix</span>
+        <span className="w-[90px]">Created</span>
+        <span className="w-[80px] text-right">Actions</span>
+      </div>
+
+      {/* Rows */}
+      {keys.map((k, i) => (
+        <div
+          key={k.name}
+          className={cn(
+            'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
+            i < keys.length - 1 && 'border-b border-[#141414]'
+          )}
+        >
+          <span className="w-[140px] text-white truncate">{k.name}</span>
+          <span className="w-[70px]">
+            <Badge variant={typeBadgeMap[k.type] ?? 'ghost'}>{k.type}</Badge>
+          </span>
+          <span className="flex-1 text-neutral-500 truncate">{k.prefix}</span>
+          <span className="w-[90px] text-neutral-600 truncate">
+            {k.created}
+          </span>
+          <span className="w-[80px] flex gap-2 justify-end">
+            {onRotateKey && (
+              <Button
+                variant="default"
+                size="sm"
+                className="text-[9px] px-1.5 py-0.5"
+                onClick={() => onRotateKey(k.name)}
+              >
+                Rotate
+              </Button>
+            )}
+            {onRevokeKey && (
+              <Button
+                variant="destructive"
+                size="sm"
+                className="text-[9px] px-1.5 py-0.5"
+                onClick={() => onRevokeKey(k.name)}
+              >
+                Revoke
+              </Button>
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+);
+ApiKeysTable.displayName = 'ApiKeysTable';
+
+export { ApiKeysTable };

package/src/console/bottom-bar.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export type BottomBarMetric = {
+  label: string;
+  value: string;
+};
+
+export type BottomBarProps = ComponentPropsWithoutRef<'div'> & {
+  metrics?: BottomBarMetric[];
+  uptime?: string;
+  isLive?: boolean;
+};
+
+const BottomBar = forwardRef<HTMLDivElement, BottomBarProps>(
+  ({ className, metrics = [], uptime, isLive = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'fixed bottom-0 left-0 right-0 z-100 h-8 border-t border-border bg-surface/92 backdrop-blur-lg flex items-center justify-between px-5',
+        className
+      )}
+      {...props}
+    >
+      {/* Left: heartbeat + live indicator */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-[2px]">
+          {[0, 0.1, 0.2, 0.3, 0.4].map((delay) => (
+            <div
+              key={delay}
+              className="w-0.5 h-1.5 bg-healthy rounded-sm animate-[heartbeat_1.2s_ease-in-out_infinite]"
+              style={{ animationDelay: `${delay}s` }}
+            />
+          ))}
+        </div>
+        {isLive && (
+          <span className="font-mono text-[9px] text-healthy uppercase tracking-widest">
+            Live
+          </span>
+        )}
+      </div>
+
+      {/* Center: metrics */}
+      <div className="flex items-center gap-6">
+        {metrics.map((m) => (
+          <div key={m.label} className="flex items-center gap-1.5">
+            <span className="font-mono text-[9px] text-neutral-600">
+              {m.label}
+            </span>
+            <span className="font-mono text-[10px] text-neutral-300">
+              {m.value}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Right: uptime */}
+      {uptime != null && (
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-[9px] text-neutral-600">UPTIME</span>
+          <span className="font-mono text-[10px] text-neutral-400">
+            {uptime}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+);
+BottomBar.displayName = 'BottomBar';
+
+export { BottomBar };

package/src/console/commit-table.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { CommitStreamEntry } from '../lib/types';
+
+export type CommitTableProps = ComponentPropsWithoutRef<'div'> & {
+  commits: CommitStreamEntry[];
+  onViewAll?: () => void;
+};
+
+const CommitTable = forwardRef<HTMLDivElement, CommitTableProps>(
+  ({ className, commits, onViewAll, ...props }, ref) => (
+    <div ref={ref} className={cn('px-5 pt-3 pb-2', className)} {...props}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          Recent Commits
+        </span>
+        {onViewAll && (
+          <button
+            type="button"
+            onClick={onViewAll}
+            className="inline-flex items-center gap-1.5 rounded-md font-mono text-[9px] px-2 py-0.5 border border-border-bright bg-transparent text-neutral-400 hover:text-white hover:bg-white/[0.03] cursor-pointer transition-all"
+          >
+            View all &rarr;
+          </button>
+        )}
+      </div>
+
+      {/* Column headers */}
+      <div className="font-mono text-[9px] tracking-wider uppercase text-neutral-600 flex items-center gap-4 px-4 leading-[22px] border-b border-border">
+        <span className="w-[60px] truncate">Seq</span>
+        <span className="w-[100px] truncate">Actor</span>
+        <span className="w-[50px] truncate">Chg</span>
+        <span className="flex-1 truncate">Tables</span>
+        <span className="w-[70px] text-right truncate">Time</span>
+      </div>
+
+      {/* Rows */}
+      {commits.map((c) => (
+        <div
+          key={c.seq}
+          className="font-mono text-[11px] leading-7 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default"
+        >
+          <span className="w-[60px] text-flow font-medium truncate">
+            #{c.seq}
+          </span>
+          <span className="w-[100px] text-neutral-400 truncate">{c.actor}</span>
+          <span className="w-[50px] text-white truncate">{c.changes}</span>
+          <span className="flex-1 truncate">
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] uppercase tracking-wider bg-transparent text-neutral-500 border border-border-bright">
+              {c.tables}
+            </span>
+          </span>
+          <span className="w-[70px] text-right text-neutral-600 truncate">
+            {c.time}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+);
+CommitTable.displayName = 'CommitTable';
+
+export { CommitTable };