@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/webmcp-tools.test.ts

@@ -0,0 +1,348 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getWebMCPTools } from "../lib/webmcp/tools";
+
+const mockListInstances = vi.fn();
+const mockCreateInstance = vi.fn();
+const mockControlInstance = vi.fn();
+const mockGetInstanceHealth = vi.fn();
+const mockGetInstanceLogs = vi.fn();
+const mockListMarketplacePlugins = vi.fn();
+const mockInstallPlugin = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  listInstances: (...args: unknown[]) => mockListInstances(...args),
+  createInstance: (...args: unknown[]) => mockCreateInstance(...args),
+  controlInstance: (...args: unknown[]) => mockControlInstance(...args),
+  getInstanceHealth: (...args: unknown[]) => mockGetInstanceHealth(...args),
+  getInstanceLogs: (...args: unknown[]) => mockGetInstanceLogs(...args),
+}));
+
+vi.mock("@/lib/marketplace-data", () => ({
+  listMarketplacePlugins: (...args: unknown[]) => mockListMarketplacePlugins(...args),
+}));
+
+vi.mock("@/lib/bot-settings-data", () => ({
+  installPlugin: (...args: unknown[]) => mockInstallPlugin(...args),
+}));
+
+const mockConfirm = vi.fn<(message: string) => Promise<boolean>>();
+
+function getTool(name: string): ModelContextTool {
+  const tools = getWebMCPTools(mockConfirm);
+  const tool = tools.find((t) => t.name === name);
+  if (!tool) throw new Error(`Tool '${name}' not found`);
+  return tool;
+}
+
+const MOCK_INSTANCES = [
+  {
+    id: "inst-001",
+    name: "Test Bot",
+    template: "General Assistant",
+    status: "running",
+    provider: "anthropic",
+    channels: ["discord"],
+    plugins: [],
+    uptime: 3600,
+    createdAt: "2026-01-01T00:00:00Z",
+  },
+];
+
+const MOCK_PLUGINS = [
+  {
+    id: "discord",
+    name: "Discord",
+    description: "Discord integration",
+    version: "3.2.0",
+    author: "Platform Team",
+    icon: "MessageCircle",
+    color: "#5865F2",
+    category: "channel",
+    tags: ["channel"],
+    capabilities: ["channel"],
+    requires: [],
+    install: [],
+    configSchema: [],
+    setup: [],
+    installCount: 12400,
+    changelog: [],
+  },
+  {
+    id: "semantic-memory",
+    name: "Semantic Memory",
+    description: "Long-term memory",
+    version: "1.4.0",
+    author: "Platform Team",
+    icon: "Database",
+    color: "#8B5CF6",
+    category: "memory",
+    tags: ["memory"],
+    capabilities: ["memory"],
+    requires: [],
+    install: [],
+    configSchema: [],
+    setup: [],
+    installCount: 9800,
+    changelog: [],
+  },
+];
+
+describe("getWebMCPTools", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns 7 tools", () => {
+    const tools = getWebMCPTools(mockConfirm);
+    expect(tools).toHaveLength(7);
+  });
+
+  it("each tool has name, description, inputSchema, handler", () => {
+    const tools = getWebMCPTools(mockConfirm);
+    for (const tool of tools) {
+      expect(tool).toHaveProperty("name");
+      expect(tool).toHaveProperty("description");
+      expect(tool).toHaveProperty("inputSchema");
+      expect(tool).toHaveProperty("handler");
+      expect(typeof tool.name).toBe("string");
+      expect(typeof tool.description).toBe("string");
+      expect(typeof tool.inputSchema).toBe("object");
+      expect(typeof tool.handler).toBe("function");
+    }
+  });
+
+  describe("platform_list_instances handler", () => {
+    it("calls listInstances() and returns the result", async () => {
+      mockListInstances.mockResolvedValue(MOCK_INSTANCES);
+      const tool = getTool("platform_list_instances");
+
+      const result = await tool.handler({});
+
+      expect(mockListInstances).toHaveBeenCalledOnce();
+      expect(result).toEqual({ instances: MOCK_INSTANCES });
+    });
+  });
+
+  describe("platform_control_instance handler", () => {
+    it("calls controlInstance for non-destructive actions without confirmation", async () => {
+      mockControlInstance.mockResolvedValue(undefined);
+      const tool = getTool("platform_control_instance");
+
+      const result = await tool.handler({ instanceId: "inst-001", action: "restart" });
+
+      expect(mockConfirm).not.toHaveBeenCalled();
+      expect(mockControlInstance).toHaveBeenCalledWith("inst-001", "restart");
+      expect(result).toEqual({ ok: true, instanceId: "inst-001", action: "restart" });
+    });
+
+    it("calls confirm callback for destroy action", async () => {
+      mockConfirm.mockResolvedValue(true);
+      mockControlInstance.mockResolvedValue(undefined);
+      const tool = getTool("platform_control_instance");
+
+      await tool.handler({ instanceId: "inst-001", action: "destroy" });
+
+      expect(mockConfirm).toHaveBeenCalledOnce();
+      expect(mockConfirm).toHaveBeenCalledWith(expect.stringContaining("destroy"));
+    });
+
+    it("returns cancelled result when user declines confirmation", async () => {
+      mockConfirm.mockResolvedValue(false);
+      const tool = getTool("platform_control_instance");
+
+      const result = await tool.handler({ instanceId: "inst-001", action: "destroy" });
+
+      expect(mockControlInstance).not.toHaveBeenCalled();
+      expect(result).toEqual({ error: "Action cancelled by user", cancelled: true });
+    });
+
+    it("proceeds with destroy when user confirms", async () => {
+      mockConfirm.mockResolvedValue(true);
+      mockControlInstance.mockResolvedValue(undefined);
+      const tool = getTool("platform_control_instance");
+
+      const result = await tool.handler({ instanceId: "inst-001", action: "destroy" });
+
+      expect(mockControlInstance).toHaveBeenCalledWith("inst-001", "destroy");
+      expect(result).toEqual({ ok: true, instanceId: "inst-001", action: "destroy" });
+    });
+  });
+
+  describe("platform_browse_plugins handler", () => {
+    it("returns all plugins when no category filter", async () => {
+      mockListMarketplacePlugins.mockResolvedValue(MOCK_PLUGINS);
+      const tool = getTool("platform_browse_plugins");
+
+      const result = (await tool.handler({})) as { plugins: unknown[] };
+
+      expect(result.plugins).toHaveLength(2);
+    });
+
+    it("filters plugins by category", async () => {
+      mockListMarketplacePlugins.mockResolvedValue(MOCK_PLUGINS);
+      const tool = getTool("platform_browse_plugins");
+
+      const result = (await tool.handler({ category: "channel" })) as {
+        plugins: { id: string }[];
+      };
+
+      expect(result.plugins).toHaveLength(1);
+      expect(result.plugins[0].id).toBe("discord");
+    });
+  });
+
+  describe("platform_create_instance handler", () => {
+    it("calls createInstance with correct params", async () => {
+      mockCreateInstance.mockResolvedValue(MOCK_INSTANCES[0]);
+      const tool = getTool("platform_create_instance");
+
+      const result = await tool.handler({
+        name: "My Bot",
+        template: "General Assistant",
+        provider: "anthropic",
+        channels: ["discord"],
+        plugins: ["semantic-memory"],
+      });
+
+      expect(mockCreateInstance).toHaveBeenCalledWith({
+        name: "My Bot",
+        template: "General Assistant",
+        provider: "anthropic",
+        channels: ["discord"],
+        plugins: ["semantic-memory"],
+      });
+      expect(result).toEqual({ instance: MOCK_INSTANCES[0] });
+    });
+
+    it("defaults channels and plugins to empty arrays", async () => {
+      mockCreateInstance.mockResolvedValue(MOCK_INSTANCES[0]);
+      const tool = getTool("platform_create_instance");
+
+      await tool.handler({
+        name: "My Bot",
+        template: "General Assistant",
+        provider: "anthropic",
+      });
+
+      expect(mockCreateInstance).toHaveBeenCalledWith({
+        name: "My Bot",
+        template: "General Assistant",
+        provider: "anthropic",
+        channels: [],
+        plugins: [],
+      });
+    });
+  });
+
+  describe("platform_install_plugin handler", () => {
+    it("calls installPlugin and returns success for valid plugin", async () => {
+      mockListMarketplacePlugins.mockResolvedValue(MOCK_PLUGINS);
+      mockInstallPlugin.mockResolvedValue(undefined);
+      const tool = getTool("platform_install_plugin");
+
+      const result = (await tool.handler({
+        instanceId: "inst-001",
+        pluginName: "discord",
+      })) as { ok: boolean; instanceId: string; pluginName: string };
+
+      expect(mockInstallPlugin).toHaveBeenCalledWith("inst-001", "discord");
+      expect(result.ok).toBe(true);
+      expect(result.instanceId).toBe("inst-001");
+      expect(result.pluginName).toBe("discord");
+    });
+
+    it("returns error for unknown plugin name without calling install", async () => {
+      mockListMarketplacePlugins.mockResolvedValue(MOCK_PLUGINS);
+      const tool = getTool("platform_install_plugin");
+
+      const result = (await tool.handler({
+        instanceId: "inst-001",
+        pluginName: "nonexistent-plugin",
+      })) as { error: string };
+
+      expect(result.error).toContain("nonexistent-plugin");
+      expect(mockInstallPlugin).not.toHaveBeenCalled();
+    });
+
+    it("returns error when installPlugin rejects", async () => {
+      mockListMarketplacePlugins.mockResolvedValue(MOCK_PLUGINS);
+      mockInstallPlugin.mockRejectedValue(new Error("Server error"));
+      const tool = getTool("platform_install_plugin");
+
+      const result = (await tool.handler({
+        instanceId: "inst-001",
+        pluginName: "discord",
+      })) as { error: string };
+
+      expect(result.error).toBe("Server error");
+    });
+  });
+
+  describe("platform_get_instance_health handler", () => {
+    it("calls getInstanceHealth and returns { health }", async () => {
+      const mockHealth = {
+        instanceId: "inst-001",
+        uptime: 3600,
+        sessionCount: 42,
+        plugins: [{ id: "discord", status: "ok" }],
+        provider: { name: "anthropic", status: "ok" },
+      };
+      mockGetInstanceHealth.mockResolvedValue(mockHealth);
+      const tool = getTool("platform_get_instance_health");
+
+      const result = await tool.handler({ instanceId: "inst-001" });
+
+      expect(mockGetInstanceHealth).toHaveBeenCalledWith("inst-001");
+      expect(result).toEqual({ health: mockHealth });
+    });
+
+    it("returns { error } when getInstanceHealth throws", async () => {
+      mockGetInstanceHealth.mockRejectedValue(new Error("Health check failed"));
+      const tool = getTool("platform_get_instance_health");
+
+      const result = (await tool.handler({ instanceId: "inst-001" })) as { error: string };
+
+      expect(result.error).toBe("Health check failed");
+    });
+  });
+
+  describe("platform_view_logs handler", () => {
+    const MOCK_LOGS = Array.from({ length: 100 }, (_, i) => ({
+      id: `log-${i}`,
+      timestamp: "2026-01-01T00:00:00Z",
+      level: i % 2 === 0 ? "info" : "error",
+      source: "bot",
+      message: `Log entry ${i}`,
+    }));
+
+    it("calls getInstanceLogs with level filter", async () => {
+      mockGetInstanceLogs.mockResolvedValue(MOCK_LOGS.slice(0, 10));
+      const tool = getTool("platform_view_logs");
+
+      await tool.handler({ instanceId: "inst-001", level: "error" });
+
+      expect(mockGetInstanceLogs).toHaveBeenCalledWith("inst-001", { level: "error" });
+    });
+
+    it("limits results to specified limit", async () => {
+      mockGetInstanceLogs.mockResolvedValue(MOCK_LOGS);
+      const tool = getTool("platform_view_logs");
+
+      const result = (await tool.handler({
+        instanceId: "inst-001",
+        limit: 10,
+      })) as { logs: unknown[] };
+
+      expect(result.logs).toHaveLength(10);
+    });
+
+    it("defaults limit to 50", async () => {
+      mockGetInstanceLogs.mockResolvedValue(MOCK_LOGS);
+      const tool = getTool("platform_view_logs");
+
+      const result = (await tool.handler({ instanceId: "inst-001" })) as { logs: unknown[] };
+
+      expect(result.logs).toHaveLength(50);
+    });
+  });
+});

package/src/app/(auth)/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AlertTriangleIcon, HomeIcon, RefreshCwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:auth");
+
+export default function AuthError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Auth error", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <AlertTriangleIcon className="size-6 text-destructive" />
+            <CardTitle className="text-xl">Authentication Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong during authentication. This may be a temporary issue.
+          </p>
+          {isDev && (
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => setShowDetails((v) => !v)}
+              className="h-auto p-0 text-muted-foreground"
+            >
+              {showDetails ? "Hide" : "Show"} error details
+            </Button>
+          )}
+          {isDev && showDetails && (
+            <pre className="max-h-48 overflow-auto rounded-md border bg-muted p-3 text-xs">
+              {error.message}
+              {error.stack && `\n\n${error.stack}`}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </pre>
+          )}
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button onClick={reset}>
+            <RefreshCwIcon />
+            Try Again
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/login">
+              <HomeIcon />
+              Back to Login
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { type FormEvent, useState } from "react";
+import { AuthError } from "@/components/auth/auth-error";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+import { getBrandConfig } from "@/lib/brand-config";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const { error: fetchError } = await authClient.$fetch("/request-password-reset", {
+        method: "POST",
+        body: { email, redirectTo: "/reset-password" },
+      });
+
+      if (fetchError) {
+        setError(fetchError.message ?? "Failed to send reset email");
+        return;
+      }
+
+      setSent(true);
+    } catch {
+      setError("A network error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <AuthShell>
+        <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+          <CardHeader>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.3 }}
+            >
+              <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+                Transmission sent
+              </CardTitle>
+              <CardDescription>
+                We sent a password reset link to <code className="text-terminal">{email}</code>
+              </CardDescription>
+            </motion.div>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Click the link in the email to reset your password. If you don&apos;t see it, check
+              your spam folder.
+            </p>
+          </CardContent>
+          <CardFooter className="justify-center">
+            <Link
+              href="/login"
+              className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+            >
+              Back to sign in
+            </Link>
+          </CardFooter>
+        </Card>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell>
+      <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+        <CardHeader>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+            Password Recovery
+          </CardTitle>
+          <CardDescription>Enter operator email for recovery code</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4" id="forgot-password-form">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={`operator@${getBrandConfig().domain}`}
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            {error && <AuthError message={error} />}
+            <Button type="submit" variant="terminal" className="w-full" disabled={loading}>
+              {loading ? (
+                <span className="inline-flex items-center gap-1">
+                  TRANSMITTING
+                  <span className="h-4 w-1.5 animate-pulse bg-terminal" />
+                </span>
+              ) : (
+                "Send reset link"
+              )}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter className="justify-center">
+          <Link
+            href="/login"
+            className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+          >
+            Back to sign in
+          </Link>
+        </CardFooter>
+      </Card>
+    </AuthShell>
+  );
+}

package/src/app/(auth)/layout.tsx

@@ -0,0 +1,14 @@
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-background px-4 overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div className="h-[500px] w-[500px] rounded-full bg-terminal/5 blur-[120px]" />
+      </div>
+      <div className="relative z-10 w-full max-w-sm">{children}</div>
+    </div>
+  );
+}

package/src/app/(auth)/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AuthLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="rounded-lg border p-6 space-y-6">
+        <div className="space-y-2 text-center">
+          <Skeleton className="mx-auto h-7 w-24" />
+          <Skeleton className="mx-auto h-4 w-48" />
+        </div>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-9 w-full" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-16" />
+            <Skeleton className="h-9 w-full" />
+          </div>
+          <Skeleton className="h-9 w-full" />
+        </div>
+        <Skeleton className="mx-auto h-4 w-40" />
+      </div>
+    </div>
+  );
+}