@wopr-network/platform-ui-core 1.0.0

package/src/components/observability/logs-viewer.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { AlertTriangleIcon, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { LogEntry, LogLevel } from "@/lib/api";
+import { getInstanceLogs } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+const levelColors: Record<LogLevel, string> = {
+  debug: "text-zinc-500",
+  info: "text-blue-400",
+  warn: "text-yellow-400",
+  error: "text-red-400",
+};
+
+const levelBgColors: Record<LogLevel, string> = {
+  debug: "bg-zinc-500/10",
+  info: "bg-blue-500/10",
+  warn: "bg-yellow-500/10",
+  error: "bg-red-500/10",
+};
+
+export function LogsViewer({ instanceId }: { instanceId: string }) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [levelFilter, setLevelFilter] = useState<LogLevel | "all">("all");
+  const [sourceFilter, setSourceFilter] = useState<string>("all");
+  const [search, setSearch] = useState("");
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 300);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [search]);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params: { level?: LogLevel; source?: string; search?: string } = {};
+      if (levelFilter !== "all") params.level = levelFilter;
+      if (sourceFilter !== "all") params.source = sourceFilter;
+      if (debouncedSearch) params.search = debouncedSearch;
+
+      const data = await getInstanceLogs(instanceId, params);
+      setLogs(data);
+      requestAnimationFrame(() => {
+        if (autoScroll && scrollRef.current) {
+          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+      });
+    } catch {
+      setError("Failed to load logs — please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId, autoScroll, levelFilter, sourceFilter, debouncedSearch]);
+
+  useEffect(() => {
+    load();
+    const interval = setInterval(load, 5_000);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  const sources = [...new Set(logs.map((l) => l.source))];
+
+  const filtered = logs;
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <Select value={levelFilter} onValueChange={(v) => setLevelFilter(v as LogLevel | "all")}>
+          <SelectTrigger className="w-[130px]">
+            <SelectValue placeholder="Level" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Levels</SelectItem>
+            <SelectItem value="debug">Debug</SelectItem>
+            <SelectItem value="info">Info</SelectItem>
+            <SelectItem value="warn">Warn</SelectItem>
+            <SelectItem value="error">Error</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={sourceFilter} onValueChange={setSourceFilter}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="Source" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Sources</SelectItem>
+            {sources.map((s) => (
+              <SelectItem key={s} value={s}>
+                {s}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="relative max-w-[250px] sm:max-w-full">
+          <Input
+            placeholder="Search logs..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full"
+          />
+          {search !== debouncedSearch && (
+            <span className="absolute right-3 top-1/2 size-2 -translate-y-1/2 rounded-full bg-emerald-500/60 animate-pulse" />
+          )}
+        </div>
+
+        <Button
+          variant={autoScroll ? "terminal" : "outline"}
+          size="sm"
+          onClick={() => setAutoScroll(!autoScroll)}
+        >
+          {autoScroll ? "Auto-scroll ON" : "Auto-scroll OFF"}
+        </Button>
+      </div>
+
+      {/* Error Banner */}
+      {error && logs.length === 0 && (
+        <div className="flex items-center gap-3 rounded-sm border border-destructive/30 bg-destructive/5 px-4 py-3">
+          <AlertTriangleIcon className="size-5 shrink-0 text-destructive" />
+          <p className="flex-1 text-sm text-destructive">{error}</p>
+          <Button variant="outline" size="sm" onClick={load}>
+            <RefreshCw className="size-4" />
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {/* Log Stream */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">
+            Real-time Logs{" "}
+            <span className="font-normal text-muted-foreground">({filtered.length} entries)</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {loading && logs.length === 0 ? (
+            <div className="h-[400px] space-y-2 rounded-md bg-zinc-950 p-4">
+              {Array.from({ length: 12 }, (_, n) => `sk-${n}`).map((skId, i) => (
+                <Skeleton
+                  key={skId}
+                  className="h-4 bg-zinc-800"
+                  style={{ width: `${60 + ((i * 17) % 40)}%` }}
+                />
+              ))}
+            </div>
+          ) : (
+            <div
+              ref={scrollRef}
+              className={cn(
+                "h-[400px] overflow-auto rounded-md bg-zinc-950 p-4 font-mono text-xs",
+                loading && logs.length > 0 && "opacity-50 transition-opacity duration-150",
+              )}
+            >
+              {filtered.length === 0 ? (
+                <div className="flex h-full flex-col items-center justify-center">
+                  <p className="text-zinc-500">No logs match the current filters.</p>
+                  <p className="mt-1 text-zinc-600">
+                    Try broadening your search or changing the level filter.
+                  </p>
+                </div>
+              ) : (
+                filtered.map((log) => (
+                  <div
+                    key={log.id}
+                    className={cn(
+                      "flex gap-3 rounded px-2 py-1 hover:bg-zinc-900",
+                      levelBgColors[log.level],
+                    )}
+                  >
+                    <span className="shrink-0 text-zinc-600">
+                      {new Date(log.timestamp).toLocaleTimeString()}
+                    </span>
+                    <span
+                      className={cn("w-12 shrink-0 text-right uppercase", levelColors[log.level])}
+                    >
+                      {log.level}
+                    </span>
+                    <span className="shrink-0 text-zinc-500">[{log.source}]</span>
+                    <span className="text-zinc-300">{log.message}</span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/observability/metrics-dashboard.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { AlertTriangleIcon, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { InstanceMetrics } from "@/lib/api";
+import { getInstanceMetrics } from "@/lib/api";
+
+function formatTime(timestamp: string): string {
+  return new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+export function MetricsDashboard({ instanceId }: { instanceId: string }) {
+  const [metrics, setMetrics] = useState<InstanceMetrics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getInstanceMetrics(instanceId);
+      setMetrics(data);
+    } catch {
+      setError("Failed to load metrics — please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId]);
+
+  useEffect(() => {
+    load();
+    const interval = setInterval(load, 30_000);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  if (loading && !metrics) {
+    return (
+      <div className="space-y-4">
+        <div className="grid gap-4 sm:grid-cols-2">
+          {Array.from({ length: 4 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="rounded-sm border p-4 space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-32 w-full" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !metrics) {
+    return (
+      <div className="flex items-center gap-3 rounded-sm border border-destructive/30 bg-destructive/5 px-4 py-3">
+        <AlertTriangleIcon className="size-5 shrink-0 text-destructive" />
+        <p className="flex-1 text-sm text-destructive">{error ?? "No metrics data available."}</p>
+        <Button variant="outline" size="sm" onClick={load}>
+          <RefreshCw className="size-4" />
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  const timeseriesData = metrics.timeseries.map((s) => ({
+    ...s,
+    time: formatTime(s.timestamp),
+  }));
+
+  const tokenData = metrics.tokenUsage.map((t) => ({
+    provider: t.provider,
+    input: t.inputTokens,
+    output: t.outputTokens,
+    cost: t.totalCost,
+  }));
+
+  const pluginData = metrics.pluginEvents.map((e) => ({
+    plugin: e.plugin,
+    events: e.count,
+  }));
+
+  return (
+    <div className="space-y-6">
+      {/* Request Count */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">Request Count</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={200}>
+            <LineChart data={timeseriesData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+              <XAxis dataKey="time" tick={{ fontSize: 11, fill: "#888" }} />
+              <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+              <Tooltip
+                contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                labelStyle={{ color: "#888" }}
+              />
+              <Line
+                type="monotone"
+                dataKey="requestCount"
+                stroke="var(--terminal)"
+                strokeWidth={2}
+                dot={false}
+                name="Requests"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* Latency Percentiles */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">Response Latency (ms)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={200}>
+            <LineChart data={timeseriesData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+              <XAxis dataKey="time" tick={{ fontSize: 11, fill: "#888" }} />
+              <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+              <Tooltip
+                contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                labelStyle={{ color: "#888" }}
+              />
+              <Line
+                type="monotone"
+                dataKey="latencyP50"
+                stroke="var(--terminal)"
+                strokeWidth={2}
+                dot={false}
+                name="p50"
+              />
+              <Line
+                type="monotone"
+                dataKey="latencyP95"
+                stroke="color-mix(in srgb, var(--terminal) 65%, transparent)"
+                strokeWidth={2}
+                dot={false}
+                name="p95"
+              />
+              <Line
+                type="monotone"
+                dataKey="latencyP99"
+                stroke="var(--destructive)"
+                strokeWidth={2}
+                dot={false}
+                name="p99"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Token Usage */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Token Usage by Provider</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <BarChart data={tokenData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+                <XAxis dataKey="provider" tick={{ fontSize: 11, fill: "#888" }} />
+                <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+                <Tooltip
+                  contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                  labelStyle={{ color: "#888" }}
+                />
+                <Bar dataKey="input" fill="var(--terminal)" name="Input Tokens" />
+                <Bar
+                  dataKey="output"
+                  fill="color-mix(in srgb, var(--terminal) 45%, transparent)"
+                  name="Output Tokens"
+                />
+              </BarChart>
+            </ResponsiveContainer>
+            <div className="mt-3 space-y-1">
+              {metrics.tokenUsage.map((t) => (
+                <div
+                  key={t.provider}
+                  className="flex justify-between text-xs text-muted-foreground"
+                >
+                  <span className="capitalize">{t.provider}</span>
+                  <span className="font-medium text-foreground">${t.totalCost.toFixed(2)}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Plugin Events */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Plugin Events</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <BarChart data={pluginData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+                <XAxis dataKey="plugin" tick={{ fontSize: 11, fill: "#888" }} />
+                <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+                <Tooltip
+                  contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                  labelStyle={{ color: "#888" }}
+                />
+                <Bar dataKey="events" fill="var(--terminal)" name="Events" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Active Sessions */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Active Sessions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <LineChart data={timeseriesData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+                <XAxis dataKey="time" tick={{ fontSize: 11, fill: "#888" }} />
+                <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+                <Tooltip
+                  contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                  labelStyle={{ color: "#888" }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="activeSessions"
+                  stroke="var(--terminal)"
+                  strokeWidth={2}
+                  dot={false}
+                  name="Sessions"
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Memory Usage */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Memory Usage (MB)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <LineChart data={timeseriesData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+                <XAxis dataKey="time" tick={{ fontSize: 11, fill: "#888" }} />
+                <YAxis tick={{ fontSize: 11, fill: "#888" }} />
+                <Tooltip
+                  contentStyle={{ backgroundColor: "#1a1a1a", border: "1px solid #333" }}
+                  labelStyle={{ color: "#888" }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="memoryMb"
+                  stroke="var(--terminal)"
+                  strokeWidth={2}
+                  dot={false}
+                  name="Memory"
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/components/onboarding/fallback-setup.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { quickSetup } from "@/lib/api";
+import { brandName } from "@/lib/brand-config";
+import { markOnboardingComplete } from "@/lib/onboarding-store";
+
+const CHANNELS = [
+  { id: "discord", name: "Discord" },
+  { id: "slack", name: "Slack" },
+  { id: "telegram", name: "Telegram" },
+  { id: "web-ui", name: "Web UI" },
+] as const;
+
+export function FallbackSetup() {
+  const [apiKey, setApiKey] = useState("");
+  const [channel, setChannel] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);
+
+      if (!apiKey.trim()) {
+        setError("API key is required");
+        return;
+      }
+      if (!channel) {
+        setError("Select a channel");
+        return;
+      }
+
+      setSubmitting(true);
+      try {
+        const res = await quickSetup(apiKey.trim(), channel);
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({ error: "Setup failed" }));
+          setError((data as { error?: string }).error || "Setup failed");
+          return;
+        }
+        markOnboardingComplete();
+        window.location.reload();
+      } catch {
+        setError("Network error. Try again.");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [apiKey, channel],
+  );
+
+  return (
+    <div className="flex items-start justify-center pt-24 px-4">
+      <Card className="w-full max-w-sm border-border bg-card">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-2 mb-1">
+            <AlertTriangle className="h-4 w-4 text-chart-3" />
+            <h2 className="text-sm font-mono uppercase tracking-[0.2em] text-chart-3">
+              MANUAL OVERRIDE
+            </h2>
+          </div>
+          <p className="text-xs text-muted-foreground mb-6">
+            Platform {brandName()} unavailable. Configure manually.
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label
+                htmlFor="fallback-api-key"
+                className="text-xs uppercase tracking-wider text-muted-foreground"
+              >
+                API KEY
+              </Label>
+              <Input
+                id="fallback-api-key"
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder="sk-..."
+                className="bg-secondary border-border font-mono text-sm placeholder:text-muted-foreground/40"
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label
+                htmlFor="fallback-channel"
+                className="text-xs uppercase tracking-wider text-muted-foreground"
+              >
+                CHANNEL
+              </Label>
+              <Select value={channel} onValueChange={setChannel}>
+                <SelectTrigger
+                  id="fallback-channel"
+                  className="bg-secondary border-border font-mono text-sm"
+                >
+                  <SelectValue placeholder="Select channel" />
+                </SelectTrigger>
+                <SelectContent>
+                  {CHANNELS.map((ch) => (
+                    <SelectItem key={ch.id} value={ch.id} className="font-mono text-sm">
+                      {ch.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {error && <p className="text-xs text-destructive">{error}</p>}
+
+            <Button
+              type="submit"
+              disabled={submitting}
+              className="w-full bg-terminal text-primary-foreground font-mono text-sm uppercase tracking-wider hover:bg-terminal-dim transition-all duration-150"
+            >
+              {submitting ? <span className="animate-ellipsis">INITIALIZING</span> : "INITIALIZE"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/onboarding/index.ts

@@ -0,0 +1,3 @@
+export { FallbackSetup } from "./fallback-setup";
+export { SetupChecklist } from "./setup-checklist";
+export { StepSuperpowers } from "./step-superpowers";