@wopr-network/platform-ui-core 1.0.0

package/src/components/channel-wizard/index.ts

@@ -0,0 +1,6 @@
+export { FieldInteractive } from "./field-interactive";
+export { FieldOAuth } from "./field-oauth";
+export { FieldPaste } from "./field-paste";
+export { FieldQR } from "./field-qr";
+export { StepRenderer } from "./step-renderer";
+export { Wizard } from "./wizard";

package/src/components/channel-wizard/step-renderer.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Banner } from "@/components/ui/banner";
+import type { ConfigField, SetupStep } from "@/lib/channel-manifests";
+import { FieldInteractive } from "./field-interactive";
+import { FieldOAuth } from "./field-oauth";
+import { FieldPaste } from "./field-paste";
+import { FieldQR } from "./field-qr";
+
+interface StepRendererProps {
+  step: SetupStep;
+  values: Record<string, string>;
+  errors: Record<string, string>;
+  onChange: (key: string, value: string) => void;
+  botId?: string;
+}
+
+function renderField(
+  field: ConfigField,
+  value: string,
+  onChange: (key: string, value: string) => void,
+  error?: string,
+  botId?: string,
+) {
+  switch (field.setupFlow) {
+    case "oauth":
+      return (
+        <FieldOAuth key={field.key} field={field} value={value} onChange={onChange} error={error} />
+      );
+    case "qr":
+      return (
+        <FieldQR
+          key={field.key}
+          field={field}
+          value={value}
+          onChange={onChange}
+          error={error}
+          botId={botId}
+        />
+      );
+    case "interactive":
+      return (
+        <FieldInteractive
+          key={field.key}
+          field={field}
+          value={value}
+          onChange={onChange}
+          error={error}
+        />
+      );
+    default:
+      return (
+        <FieldPaste key={field.key} field={field} value={value} onChange={onChange} error={error} />
+      );
+  }
+}
+
+export function StepRenderer({ step, values, errors, onChange, botId }: StepRendererProps) {
+  const hasFields = step.fields.length > 0;
+
+  return (
+    <div className="space-y-6">
+      {step.instruction && (
+        <Banner variant="info" className="flex-col items-start gap-1">
+          <span>{step.instruction}</span>
+          {step.externalUrl && (
+            <a
+              href={step.externalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-4 hover:text-blue-300"
+            >
+              Open {(() => {
+                try {
+                  return new URL(step.externalUrl).hostname;
+                } catch {
+                  return step.externalUrl;
+                }
+              })()}
+            </a>
+          )}
+        </Banner>
+      )}
+
+      {!hasFields && !step.instruction && (
+        <div className="flex flex-col items-center gap-3 py-8 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/10">
+            <span className="text-lg text-emerald-500">&#10003;</span>
+          </div>
+          <p className="text-sm text-muted-foreground">{step.description}</p>
+        </div>
+      )}
+
+      {hasFields && (
+        <div className="space-y-4">
+          {step.fields.map((field) =>
+            renderField(field, values[field.key] || "", onChange, errors[field.key], botId),
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,200 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { testChannelConnection } from "@/lib/api";
+import type { ChannelManifest } from "@/lib/channel-manifests";
+import { StepRenderer } from "./step-renderer";
+
+interface WizardProps {
+  manifest: ChannelManifest;
+  onComplete: (values: Record<string, string>) => void;
+  onCancel: () => void;
+  submitting?: boolean;
+  botId?: string;
+}
+
+export function Wizard({ manifest, onComplete, onCancel, submitting, botId }: WizardProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<"success" | "failure" | null>(null);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  const step = manifest.setup[currentStep];
+  const totalSteps = manifest.setup.length;
+  const isLastStep = currentStep === totalSteps - 1;
+  const isFirstStep = currentStep === 0;
+  const progress = ((currentStep + 1) / totalSteps) * 100;
+
+  const handleChange = useCallback((key: string, value: string) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  function validateStep(): boolean {
+    const shape: Record<string, z.ZodTypeAny> = {};
+    for (const field of step.fields) {
+      let strSchema = z.string();
+      if (field.required) {
+        strSchema = strSchema.min(1, `${field.label} is required`);
+      }
+      if (field.validation?.pattern) {
+        strSchema = strSchema.regex(
+          new RegExp(field.validation.pattern),
+          field.validation.message || "Invalid format",
+        );
+      }
+      shape[field.key] = field.required ? strSchema : strSchema.optional().or(z.literal(""));
+    }
+    const schema = z.object(shape);
+    const fieldValues: Record<string, string> = {};
+    for (const field of step.fields) {
+      fieldValues[field.key] = values[field.key] ?? "";
+    }
+    const result = schema.safeParse(fieldValues);
+    if (result.success) {
+      setErrors({});
+      return true;
+    }
+    const stepErrors: Record<string, string> = {};
+    for (const issue of result.error.issues) {
+      const key = issue.path[0] as string;
+      if (!(key in stepErrors)) {
+        stepErrors[key] = issue.message;
+      }
+    }
+    setErrors(stepErrors);
+    return false;
+  }
+
+  function handleNext() {
+    if (!validateStep()) return;
+
+    if (isLastStep) {
+      onComplete(values);
+    } else {
+      setCurrentStep((s) => s + 1);
+      setTestResult(null);
+      setTestError(null);
+    }
+  }
+
+  function handleBack() {
+    if (!isFirstStep) {
+      setCurrentStep((s) => s - 1);
+      setErrors({});
+      setTestResult(null);
+      setTestError(null);
+    }
+  }
+
+  async function handleTestConnection() {
+    setTesting(true);
+    setTestResult(null);
+    setTestError(null);
+    try {
+      const result = await testChannelConnection(manifest.id, values);
+      setTestResult(result.success ? "success" : "failure");
+      if (!result.success && result.error) {
+        setTestError(result.error);
+      }
+    } catch {
+      setTestResult("failure");
+      setTestError("Could not reach the server. Check your connection.");
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  return (
+    <Card className="mx-auto w-full max-w-xl">
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white"
+            style={{ backgroundColor: manifest.color }}
+          >
+            {manifest.name[0]}
+          </div>
+          <div>
+            <CardTitle>{step.title}</CardTitle>
+            <CardDescription>{step.description}</CardDescription>
+          </div>
+        </div>
+        <div className="mt-4 space-y-1">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>
+              Step {currentStep + 1} of {totalSteps}
+            </span>
+            <span>{Math.round(progress)}%</span>
+          </div>
+          <Progress value={progress} />
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <StepRenderer
+          step={step}
+          values={values}
+          errors={errors}
+          onChange={handleChange}
+          botId={botId}
+        />
+
+        {manifest.connectionTest && isLastStep && (
+          <div className="mt-6 flex flex-col items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleTestConnection}
+              disabled={testing}
+            >
+              {testing ? "Testing..." : manifest.connectionTest.label}
+            </Button>
+            {testResult === "success" && (
+              <p className="text-sm text-emerald-500">Connection successful</p>
+            )}
+            {testResult === "failure" && (
+              <p className="text-sm text-destructive">
+                {testError || "Connection failed. Check your settings."}
+              </p>
+            )}
+          </div>
+        )}
+      </CardContent>
+
+      <CardFooter className="flex justify-between">
+        <div>
+          {isFirstStep ? (
+            <Button variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+          ) : (
+            <Button variant="ghost" onClick={handleBack}>
+              Back
+            </Button>
+          )}
+        </div>
+        <Button onClick={handleNext} disabled={isLastStep && submitting}>
+          {isLastStep && submitting ? "Connecting..." : isLastStep ? "Finish" : "Continue"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/components/chat/ambient-dot.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { brandName } from "@/lib/brand-config";
+
+interface AmbientDotProps {
+  hasUnread: boolean;
+  onClick: () => void;
+}
+
+export function AmbientDot({ hasUnread, onClick }: AmbientDotProps) {
+  return (
+    <motion.button
+      onClick={onClick}
+      className="fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full border border-primary/30 bg-primary/20 backdrop-blur-sm"
+      whileHover={{ scale: 1.1, backgroundColor: "rgba(0, 255, 65, 0.3)" }}
+      whileTap={{ scale: 0.95 }}
+      aria-label={`Open ${brandName()} chat`}
+      data-testid="chat-ambient-dot"
+    >
+      <div className="h-3 w-3 rounded-full bg-terminal" />
+      {hasUnread && (
+        <motion.div
+          data-testid="chat-unread-pulse"
+          className="absolute inset-0 rounded-full border-2 border-terminal"
+          animate={{ scale: [1, 1.4, 1], opacity: [0.8, 0, 0.8] }}
+          transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
+        />
+      )}
+    </motion.button>
+  );
+}

package/src/components/chat/chat-input.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { type KeyboardEvent, useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+}
+
+export function ChatInput({ onSend, disabled }: ChatInputProps) {
+  const [value, setValue] = useState("");
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSend(trimmed);
+    setValue("");
+  }, [value, onSend]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  return (
+    <div className="flex gap-2 border-t border-border p-3" data-testid="chat-input">
+      <textarea
+        rows={1}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Type a message..."
+        disabled={disabled}
+        className="flex-1 resize-none bg-transparent font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+        aria-label="Chat message input"
+      />
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={handleSend}
+        disabled={!value.trim() || disabled}
+        className="px-3 py-1 text-xs font-mono text-terminal hover:text-terminal/80 hover:bg-transparent"
+        aria-label="Send message"
+      >
+        SEND
+      </Button>
+    </div>
+  );
+}

package/src/components/chat/chat-message.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { ChatMessage as ChatMessageType } from "@/lib/chat/types";
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+}
+
+export function ChatMessage({ message }: ChatMessageProps) {
+  if (message.role === "event") {
+    return (
+      <div className="flex justify-center py-1" data-testid="chat-event-marker">
+        <span className="text-xs font-mono text-muted-foreground/50">-&gt; {message.content}</span>
+      </div>
+    );
+  }
+
+  const isUser = message.role === "user";
+
+  return (
+    <div
+      className={`flex ${isUser ? "justify-end" : "justify-start"}`}
+      data-testid={`chat-message-${message.role}`}
+    >
+      <div
+        className={`max-w-[80%] rounded-lg px-3 py-2 ${
+          isUser
+            ? "bg-primary/20 text-sm font-mono text-foreground"
+            : "bg-muted/30 text-sm font-mono text-muted-foreground"
+        }`}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/chat-panel.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Maximize2, X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { brandName } from "@/lib/brand-config";
+import type { ChatMessage as ChatMessageType, ChatMode } from "@/lib/chat/types";
+import { ChatInput } from "./chat-input";
+import { ChatMessage } from "./chat-message";
+
+interface ChatPanelProps {
+  messages: ChatMessageType[];
+  mode: ChatMode;
+  isConnected: boolean;
+  isTyping: boolean;
+  onSend: (text: string) => void;
+  onClose: () => void;
+  onFullscreen: () => void;
+}
+
+const panelVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: "spring", damping: 25, stiffness: 300 },
+  },
+  exit: { opacity: 0, y: 20, scale: 0.95, transition: { duration: 0.15 } },
+};
+
+const fullscreenVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.2 } },
+  exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+
+export function ChatPanel({
+  messages,
+  mode,
+  isConnected,
+  isTyping,
+  onSend,
+  onClose,
+  onFullscreen,
+}: ChatPanelProps) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const isFullscreen = mode === "fullscreen";
+
+  // Auto-scroll on new messages — messageCount and isTyping are intentional triggers
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire when message count or typing state changes
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length, isTyping]);
+
+  const variants = isFullscreen ? fullscreenVariants : panelVariants;
+
+  return (
+    <motion.div
+      variants={variants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      className={
+        isFullscreen
+          ? "fixed inset-0 z-50 flex flex-col bg-background"
+          : "fixed bottom-0 right-0 z-50 flex h-[60vh] w-full flex-col rounded-t-lg border border-border bg-background shadow-2xl lg:bottom-6 lg:right-6 lg:h-[500px] lg:w-[400px] lg:rounded-lg"
+      }
+      data-testid={isFullscreen ? "chat-fullscreen" : "chat-panel"}
+      style={
+        !isFullscreen
+          ? { boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 255, 65, 0.05)" }
+          : undefined
+      }
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <div className="flex items-center gap-2">
+          <output
+            className={`h-2 w-2 rounded-full inline-block ${isConnected ? "bg-terminal" : "bg-destructive"}`}
+            aria-label={isConnected ? "Connected" : "Disconnected"}
+          />
+          <span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
+            {brandName()}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {!isFullscreen && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={onFullscreen}
+              className="text-muted-foreground hover:text-foreground"
+              aria-label="Full screen"
+            >
+              <Maximize2 className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            onClick={onClose}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label="Close chat"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div
+        className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 ${isFullscreen ? "max-w-2xl mx-auto w-full" : ""}`}
+      >
+        {messages.length === 0 && !isConnected && (
+          <p className="text-center text-xs text-muted-foreground animate-ellipsis">
+            Connecting to {brandName()}
+          </p>
+        )}
+        {messages.map((msg) => (
+          <ChatMessage key={msg.id} message={msg} />
+        ))}
+        {isTyping && (
+          <div className="flex justify-start" data-testid="chat-typing-indicator">
+            <span className="text-xs font-mono text-terminal animate-ellipsis">...</span>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <ChatInput onSend={onSend} disabled={!isConnected} />
+    </motion.div>
+  );
+}

package/src/components/chat/chat-widget.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { AnimatePresence } from "framer-motion";
+import { useChatContext } from "@/lib/chat/chat-context";
+import { AmbientDot } from "./ambient-dot";
+import { ChatPanel } from "./chat-panel";
+
+export function ChatWidget() {
+  const {
+    messages,
+    mode,
+    isConnected,
+    isTyping,
+    hasUnread,
+    expand,
+    collapse,
+    fullscreen,
+    sendMessage,
+  } = useChatContext();
+
+  return (
+    <>
+      <AnimatePresence>
+        {mode === "collapsed" && <AmbientDot hasUnread={hasUnread} onClick={expand} />}
+      </AnimatePresence>
+      <AnimatePresence>
+        {(mode === "expanded" || mode === "fullscreen") && (
+          <ChatPanel
+            messages={messages}
+            mode={mode}
+            isConnected={isConnected}
+            isTyping={isTyping}
+            onSend={sendMessage}
+            onClose={collapse}
+            onFullscreen={fullscreen}
+          />
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/src/components/chat/index.ts

@@ -0,0 +1,5 @@
+export { AmbientDot } from "./ambient-dot";
+export { ChatInput } from "./chat-input";
+export { ChatMessage } from "./chat-message";
+export { ChatPanel } from "./chat-panel";
+export { ChatWidget } from "./chat-widget";