@wopr-network/platform-ui-core 1.0.0

package/src/components/capability/CapabilityResolver.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { useCapabilityMeta } from "@/hooks/use-capability-meta";
+import { brandName } from "@/lib/brand-config";
+
+/**
+ * Renders a capability label from the registry. Falls back to auto-formatted name.
+ */
+export function CapabilityLabel({ capability }: { capability: string }) {
+  const { getMeta } = useCapabilityMeta();
+  const meta = getMeta(capability);
+  return <span>{meta.label}</span>;
+}
+
+/**
+ * Renders the pricing badge for a capability. Returns null if no pricing info.
+ */
+export function CapabilityPricing({ capability }: { capability: string }) {
+  const { getMeta } = useCapabilityMeta();
+  const meta = getMeta(capability);
+  if (!meta.pricing) return null;
+  return <Badge variant="outline">{meta.pricing}</Badge>;
+}
+
+/**
+ * Renders the description for a capability. Returns null if no description.
+ */
+export function CapabilityDescription({ capability }: { capability: string }) {
+  const { getMeta } = useCapabilityMeta();
+  const meta = getMeta(capability);
+  if (!meta.description) return null;
+  return <p className="text-sm text-muted-foreground">{meta.description}</p>;
+}
+
+/**
+ * Generic provider picker for capabilities. Given a list of capability strings,
+ * renders hosted-vs-BYOK choice cards for each capability that has a hostedProvider
+ * in the capability registry. Capabilities without a hostedProvider are omitted
+ * (they are BYOK-only, no choice needed).
+ *
+ * Drop-in replacement for the old hardcoded ProviderSelector in install-wizard.
+ */
+export function CapabilityProviderPicker({
+  capabilities,
+  choices,
+  onChoose,
+}: {
+  capabilities: string[];
+  choices: Record<string, "byok" | "hosted">;
+  onChoose: (capability: string, choice: "byok" | "hosted") => void;
+}) {
+  const { meta } = useCapabilityMeta();
+
+  const hostedCapabilities = capabilities
+    .map((cap) => meta.find((m) => m.capability === cap))
+    .filter((m): m is NonNullable<typeof m> => !!m && !!m.hostedProvider);
+
+  if (hostedCapabilities.length === 0) {
+    return (
+      <div className="py-4 text-center">
+        <p className="text-sm text-muted-foreground">
+          No hosted provider options available for this plugin's capabilities.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Some capabilities can be provided by {brandName()} Hosted services. Choose for each:
+      </p>
+      {hostedCapabilities.map((capMeta) => {
+        const choice = choices[capMeta.capability] ?? "hosted";
+        return (
+          <div key={capMeta.capability} className="rounded-sm border p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">{capMeta.label}</p>
+                <p className="text-xs text-muted-foreground">{capMeta.description}</p>
+              </div>
+              {capMeta.pricing && (
+                <Badge variant="outline" className="text-[10px]">
+                  {capMeta.pricing}
+                </Badge>
+              )}
+            </div>
+            <div className="mt-3 flex gap-2">
+              <Button
+                data-onboarding-id={`marketplace.wizard.provider.hosted.${capMeta.capability}`}
+                variant={choice === "hosted" ? "default" : "outline"}
+                size="sm"
+                onClick={() => onChoose(capMeta.capability, "hosted")}
+              >
+                {brandName()} Hosted
+              </Button>
+              <Button
+                data-onboarding-id={`marketplace.wizard.provider.byok.${capMeta.capability}`}
+                variant={choice === "byok" ? "default" : "outline"}
+                size="sm"
+                onClick={() => onChoose(capMeta.capability, "byok")}
+              >
+                Use your key
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/channel-wizard/field-interactive.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import type { ConfigField } from "@/lib/channel-manifests";
+import { cn } from "@/lib/utils";
+
+interface FieldInteractiveProps {
+  field: ConfigField;
+  value: string;
+  onChange: (key: string, value: string) => void;
+  error?: string;
+}
+
+export function FieldInteractive({ field, value, onChange, error }: FieldInteractiveProps) {
+  if (field.type === "select" && field.options) {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={field.key}>{field.label}</Label>
+        {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+        <div className="space-y-2">
+          {field.options.map((option) => (
+            <Button
+              key={option.value}
+              type="button"
+              variant="ghost"
+              onClick={() => onChange(field.key, option.value)}
+              className={cn(
+                "flex w-full items-center rounded-sm border px-4 py-3 text-left text-sm h-auto transition-colors hover:bg-transparent",
+                value === option.value
+                  ? "border-primary bg-primary/10 text-foreground"
+                  : "border-border hover:border-primary/50 hover:bg-accent",
+              )}
+            >
+              <span className="flex-1">{option.label}</span>
+              {value === option.value && (
+                <span className="text-primary text-xs font-medium">Selected</span>
+              )}
+            </Button>
+          ))}
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/components/channel-wizard/field-oauth.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { initiateChannelOAuth, pollChannelOAuth } from "@/lib/api";
+import { eventName } from "@/lib/brand-config";
+import type { ConfigField } from "@/lib/channel-manifests";
+
+interface FieldOAuthProps {
+  field: ConfigField;
+  value: string;
+  onChange: (key: string, value: string) => void;
+  error?: string;
+}
+
+type OAuthStatus = "idle" | "authorizing" | "exchanging" | "authorized" | "error";
+
+export function FieldOAuth({ field, value, onChange, error }: FieldOAuthProps) {
+  const [status, setStatus] = useState<OAuthStatus>(value ? "authorized" : "idle");
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const popupRef = useRef<Window | null>(null);
+  const stateRef = useRef<string | null>(null);
+  const statusRef = useRef<OAuthStatus>(value ? "authorized" : "idle");
+
+  // Keep statusRef in sync so the popup close monitor can read current status
+  useEffect(() => {
+    statusRef.current = status;
+  }, [status]);
+
+  const pollForToken = useCallback(
+    async (state: string) => {
+      const maxAttempts = 30; // 30 seconds at 1s interval
+      for (let i = 0; i < maxAttempts; i++) {
+        try {
+          const data = await pollChannelOAuth(state);
+
+          if (data.status === "completed" && data.token) {
+            onChange(field.key, data.token);
+            setStatus("authorized");
+            setErrorMsg(null);
+            return;
+          }
+          if (data.status === "expired") {
+            setStatus("error");
+            setErrorMsg("OAuth session expired. Please try again.");
+            return;
+          }
+          // Still pending — wait and retry
+          await new Promise((r) => setTimeout(r, 1000));
+        } catch {
+          setStatus("error");
+          setErrorMsg("Network error while checking authorization status");
+          return;
+        }
+      }
+      setStatus("error");
+      setErrorMsg("Authorization timed out. Please try again.");
+    },
+    [field.key, onChange],
+  );
+
+  // Listen for postMessage from the OAuth popup
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      // Validate origin
+      if (event.origin !== window.location.origin) return;
+      const data = event.data as Record<string, unknown>;
+      if (!data || data.type !== eventName("oauth-callback")) return;
+
+      if (data.status === "error") {
+        setStatus("error");
+        setErrorMsg((data.error as string) || "OAuth authorization failed");
+        return;
+      }
+
+      if (data.status === "success" && data.state) {
+        // Poll for the token
+        setStatus("exchanging");
+        pollForToken(data.state as string);
+      }
+    },
+    [pollForToken],
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  async function handleAuthorize() {
+    setStatus("authorizing");
+    setErrorMsg(null);
+
+    const provider = field.oauthProvider;
+    if (!provider) {
+      setStatus("error");
+      setErrorMsg("No OAuth provider configured for this field");
+      return;
+    }
+
+    // Open a blank popup synchronously (before the async fetch) to avoid
+    // popup blockers, which only allow window.open() in synchronous event handlers.
+    const width = 600;
+    const height = 700;
+    const left = window.screenX + (window.outerWidth - width) / 2;
+    const top = window.screenY + (window.outerHeight - height) / 2;
+    const popup = window.open(
+      "about:blank",
+      eventName("oauth-popup"),
+      `width=${width},height=${height},left=${left},top=${top},popup=yes`,
+    );
+
+    if (!popup) {
+      setStatus("error");
+      setErrorMsg("Popup blocked. Please allow popups for this site and try again.");
+      return;
+    }
+
+    popupRef.current = popup;
+
+    try {
+      const res = await initiateChannelOAuth(provider);
+
+      if (!res.ok) {
+        popup.close();
+        const data = (await res.json()) as { error?: string };
+        setStatus("error");
+        setErrorMsg(data.error || "Failed to start OAuth flow");
+        return;
+      }
+
+      const { authorizeUrl, state } = (await res.json()) as {
+        authorizeUrl: string;
+        state: string;
+      };
+      stateRef.current = state;
+
+      // Navigate the already-open popup to the authorization URL
+      popup.location.href = authorizeUrl;
+
+      // Monitor popup close (user might close it manually)
+      const interval = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(interval);
+          // If we haven't received a success/error message yet, return to idle
+          if (statusRef.current === "authorizing") {
+            setStatus("idle");
+          }
+        }
+      }, 500);
+    } catch {
+      popup.close();
+      setStatus("error");
+      setErrorMsg("Network error. Please check your connection and try again.");
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label>{field.label}</Label>
+      {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+      <div className="flex items-center gap-3">
+        <Button
+          type="button"
+          variant={status === "authorized" ? "secondary" : "default"}
+          onClick={handleAuthorize}
+          disabled={status === "authorizing" || status === "exchanging"}
+        >
+          {status === "idle" && "Authorize"}
+          {status === "authorizing" && "Authorizing..."}
+          {status === "exchanging" && "Completing..."}
+          {status === "authorized" && "Re-authorize"}
+          {status === "error" && "Retry"}
+        </Button>
+        {status === "authorized" && <span className="text-sm text-emerald-500">Connected</span>}
+      </div>
+      {(errorMsg || error) && <p className="text-sm text-destructive">{errorMsg || error}</p>}
+    </div>
+  );
+}

package/src/components/channel-wizard/field-paste.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConfigField } from "@/lib/channel-manifests";
+
+interface FieldPasteProps {
+  field: ConfigField;
+  value: string;
+  onChange: (key: string, value: string) => void;
+  error?: string;
+}
+
+export function FieldPaste({ field, value, onChange, error }: FieldPasteProps) {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={field.key}>{field.label}</Label>
+      {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+      <div className="relative">
+        <Input
+          id={field.key}
+          type={field.secret && !revealed ? "password" : "text"}
+          placeholder={field.placeholder}
+          value={value}
+          onChange={(e) => onChange(field.key, e.target.value)}
+          className={error ? "border-destructive" : ""}
+        />
+        {field.secret && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={() => setRevealed(!revealed)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground hover:text-foreground hover:bg-transparent h-auto px-1"
+          >
+            {revealed ? "Hide" : "Show"}
+          </Button>
+        )}
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/components/channel-wizard/field-qr.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { AlertTriangle, Check, RefreshCw, WifiOff } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { pollChannelQr } from "@/lib/api";
+import type { ConfigField } from "@/lib/channel-manifests";
+
+interface FieldQRProps {
+  field: ConfigField;
+  value: string;
+  onChange: (key: string, value: string) => void;
+  error?: string;
+  botId?: string;
+}
+
+type QrState = "loading" | "qr" | "expired" | "connected" | "error" | "offline";
+
+const POLL_INTERVAL = 2000;
+const QR_TTL_SECONDS = 90;
+
+export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQRProps) {
+  const [state, setState] = useState<QrState>("loading");
+  const [qrPng, setQrPng] = useState<string | null>(null);
+  const [secondsLeft, setSecondsLeft] = useState(QR_TTL_SECONDS);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const expiresAtRef = useRef<number | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const stateRef = useRef<QrState>("loading");
+
+  // Keep stateRef in sync so poll callback can read current state
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
+  const cleanup = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (countdownRef.current) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = null;
+    }
+  }, []);
+
+  const startCountdown = useCallback(() => {
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    countdownRef.current = setInterval(() => {
+      if (expiresAtRef.current === null) return;
+      const remaining = Math.max(0, Math.ceil((expiresAtRef.current - Date.now()) / 1000));
+      setSecondsLeft(remaining);
+      if (remaining <= 0) {
+        setState("expired");
+        if (countdownRef.current) clearInterval(countdownRef.current);
+      }
+    }, 1000);
+  }, []);
+
+  const poll = useCallback(async () => {
+    if (!botId) {
+      setState("offline");
+      return;
+    }
+    try {
+      const res = await pollChannelQr(botId);
+      const currentState = stateRef.current;
+
+      switch (res.status) {
+        case "pending":
+          if (res.qrPng) {
+            setQrPng(res.qrPng);
+            if (currentState === "loading" || currentState === "expired") {
+              expiresAtRef.current = Date.now() + QR_TTL_SECONDS * 1000;
+              setSecondsLeft(QR_TTL_SECONDS);
+              startCountdown();
+            }
+            setState("qr");
+          } else {
+            setState("loading");
+          }
+          break;
+        case "connected":
+          setState("connected");
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          if (countdownRef.current) {
+            clearInterval(countdownRef.current);
+            countdownRef.current = null;
+          }
+          onChange(field.key, "connected");
+          break;
+        case "expired":
+          setState("expired");
+          if (countdownRef.current) clearInterval(countdownRef.current);
+          break;
+        case "no-session":
+          setState("offline");
+          break;
+      }
+    } catch {
+      cleanup();
+      setState("error");
+      setErrorMsg("Could not reach the server. Check that your bot is running and try again.");
+    }
+  }, [botId, field.key, onChange, startCountdown, cleanup]);
+
+  const startPolling = useCallback(() => {
+    cleanup();
+    setState("loading");
+    setErrorMsg(null);
+    poll();
+    intervalRef.current = setInterval(poll, POLL_INTERVAL);
+  }, [cleanup, poll]);
+
+  useEffect(() => {
+    startPolling();
+    return cleanup;
+  }, [startPolling, cleanup]);
+
+  function handleRefresh() {
+    expiresAtRef.current = null;
+    startPolling();
+  }
+
+  function countdownColor(): string {
+    if (secondsLeft <= 5) return "text-destructive motion-safe:animate-pulse";
+    if (secondsLeft <= 15) return "text-amber-500";
+    return "text-terminal-dim";
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label>{field.label}</Label>
+      {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+
+      <div className="flex flex-col items-center gap-5 rounded-sm border border-dashed p-8 animate-in fade-in duration-300">
+        {/* --- Loading State --- */}
+        {state === "loading" && (
+          <div className="flex flex-col items-center gap-4">
+            <Skeleton className="h-40 w-40 rounded-sm min-[375px]:h-48 min-[375px]:w-48" />
+            <p className="text-sm text-muted-foreground">
+              Generating secure QR code
+              <span className="animate-ellipsis" />
+            </p>
+          </div>
+        )}
+
+        {/* --- QR Displayed State --- */}
+        {state === "qr" && qrPng && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="relative rounded-sm transition-shadow duration-1000 shadow-[0_0_24px_rgba(0,255,65,0.15)]">
+              {/* Corner accents */}
+              <div className="absolute top-0 left-0 h-3 w-3 border-t-2 border-l-2 border-terminal" />
+              <div className="absolute top-0 right-0 h-3 w-3 border-t-2 border-r-2 border-terminal" />
+              <div className="absolute bottom-0 left-0 h-3 w-3 border-b-2 border-l-2 border-terminal" />
+              <div className="absolute bottom-0 right-0 h-3 w-3 border-b-2 border-r-2 border-terminal" />
+
+              {/* bg-white is intentional -- QR codes require white background for scanability */}
+              <div className="h-40 w-40 rounded-sm bg-white p-3 min-[375px]:h-48 min-[375px]:w-48">
+                {/* biome-ignore lint/performance/noImgElement: QR code is a base64 data URL, not optimizable by next/image */}
+                <img
+                  src={qrPng}
+                  alt="Scan this QR code with your phone"
+                  className="h-full w-full"
+                />
+              </div>
+            </div>
+
+            {/* Scanning indicator */}
+            <div className="flex items-center gap-2">
+              <div className="h-1.5 w-1.5 rounded-full bg-terminal motion-safe:animate-[pulse-dot_2s_ease-in-out_infinite]" />
+              <span className="text-xs font-medium uppercase tracking-wider text-terminal">
+                WAITING FOR SCAN
+              </span>
+            </div>
+
+            {/* Instructions */}
+            <p className="max-w-[280px] text-center text-sm text-muted-foreground">
+              {field.description ?? "Scan this QR code with your mobile app to link your account"}
+            </p>
+
+            {/* Countdown */}
+            <span className={`text-xs tabular-nums ${countdownColor()}`}>
+              Expires in {secondsLeft}s
+            </span>
+          </div>
+        )}
+
+        {/* --- Expired State --- */}
+        {state === "expired" && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="relative rounded-sm">
+              {/* Corner accents (dimmed) */}
+              <div className="absolute top-0 left-0 h-3 w-3 border-t-2 border-l-2 border-terminal/30" />
+              <div className="absolute top-0 right-0 h-3 w-3 border-t-2 border-r-2 border-terminal/30" />
+              <div className="absolute bottom-0 left-0 h-3 w-3 border-b-2 border-l-2 border-terminal/30" />
+              <div className="absolute bottom-0 right-0 h-3 w-3 border-b-2 border-r-2 border-terminal/30" />
+
+              {/* bg-white is intentional -- QR codes require white background for scanability */}
+              <div className="relative h-40 w-40 rounded-sm bg-white p-3 min-[375px]:h-48 min-[375px]:w-48">
+                {qrPng && (
+                  // biome-ignore lint/performance/noImgElement: QR code is a base64 data URL
+                  <img src={qrPng} alt="Expired QR code" className="h-full w-full opacity-40" />
+                )}
+                {/* Dark overlay */}
+                <div className="absolute inset-0 flex items-center justify-center rounded-sm bg-black/60 animate-in fade-in duration-300">
+                  <RefreshCw className="size-8 text-white" />
+                </div>
+              </div>
+            </div>
+
+            <span className="text-xs font-medium uppercase tracking-wider text-amber-500">
+              QR CODE EXPIRED
+            </span>
+
+            <p className="text-center text-sm text-muted-foreground">
+              The code expired. Tap below to generate a fresh one.
+            </p>
+
+            <Button
+              type="button"
+              variant="terminal"
+              size="sm"
+              className="h-10 px-4"
+              onClick={handleRefresh}
+            >
+              <RefreshCw className="size-3.5" />
+              Generate New Code
+            </Button>
+          </div>
+        )}
+
+        {/* --- Connected / Success State --- */}
+        {state === "connected" && (
+          <div className="flex flex-col items-center gap-4 animate-in fade-in duration-300">
+            <div className="flex h-40 w-40 items-center justify-center rounded-full border border-emerald-500/30 bg-emerald-500/10 min-[375px]:h-48 min-[375px]:w-48 animate-in zoom-in-90 duration-300">
+              <Check className="size-16 text-emerald-500" />
+            </div>
+
+            <span className="text-xs font-medium uppercase tracking-wider text-emerald-500">
+              LINKED SUCCESSFULLY
+            </span>
+
+            <p className="text-center text-sm text-muted-foreground">
+              {field.label ? `${field.label} connected` : "Connected"}. You can continue setup.
+            </p>
+          </div>
+        )}
+
+        {/* --- Error State --- */}
+        {state === "error" && (
+          <div className="flex flex-col items-center gap-4">
+            <AlertTriangle className="size-10 text-destructive" />
+
+            <span className="text-xs font-medium uppercase tracking-wider text-destructive">
+              CONNECTION ERROR
+            </span>
+
+            <p className="max-w-[280px] text-center text-sm text-muted-foreground">
+              {errorMsg ||
+                "Could not reach the server. Check that your bot is running and try again."}
+            </p>
+
+            <Button
+              type="button"
+              variant="terminal"
+              size="sm"
+              className="h-10 px-4"
+              onClick={handleRefresh}
+            >
+              <RefreshCw className="size-3.5" />
+              Try Again
+            </Button>
+          </div>
+        )}
+
+        {/* --- Bot Offline State --- */}
+        {state === "offline" && (
+          <div className="flex flex-col items-center gap-4">
+            <WifiOff className="size-10 text-muted-foreground" />
+
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              BOT OFFLINE
+            </span>
+
+            <p className="max-w-[280px] text-center text-sm text-muted-foreground">
+              Your bot is currently offline. Start it from the fleet dashboard to link your account.
+            </p>
+          </div>
+        )}
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}