@wopr-network/platform-ui-core 1.0.0

package/src/components/billing/transaction-history.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CoinsIcon,
+  GiftIcon,
+  RotateCcwIcon,
+  SlidersHorizontalIcon,
+  SparklesIcon,
+  WrenchIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { CreditTransaction, CreditTransactionType } from "@/lib/api";
+import { getCreditHistory } from "@/lib/api";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+
+const TYPE_CONFIG: Record<CreditTransactionType, { icon: typeof ArrowUpIcon; label: string }> = {
+  purchase: { icon: ArrowUpIcon, label: "Purchase" },
+  signup_credit: { icon: GiftIcon, label: "Signup credit" },
+  bot_runtime: { icon: WrenchIcon, label: "Bot runtime" },
+  refund: { icon: RotateCcwIcon, label: "Refund" },
+  bonus: { icon: SparklesIcon, label: "Bonus" },
+  adjustment: { icon: SlidersHorizontalIcon, label: "Adjustment" },
+  community_dividend: { icon: CoinsIcon, label: "Dividend" },
+};
+
+const staggerItem = {
+  hidden: { opacity: 0, x: -12 },
+  visible: (i: number) => ({
+    opacity: 1,
+    x: 0,
+    transition: { delay: Math.min(i, 20) * 0.05, duration: 0.3, ease: "easeOut" as const },
+  }),
+};
+
+export function TransactionHistory() {
+  const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const loadInitial = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await getCreditHistory();
+      setTransactions(res.transactions);
+      setCursor(res.nextCursor);
+    } catch {
+      setError("Failed to load transactions.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadInitial();
+  }, [loadInitial]);
+
+  async function loadMore() {
+    if (!cursor) return;
+    setLoadingMore(true);
+    try {
+      const res = await getCreditHistory(cursor);
+      setTransactions((prev) => [...prev, ...res.transactions]);
+      setCursor(res.nextCursor);
+    } catch {
+      setError("Failed to load more transactions.");
+    } finally {
+      setLoadingMore(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Transaction History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {Array.from({ length: 4 }, (_, n) => `sk-${n}`).map((skId) => (
+              <div key={skId} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Skeleton className="size-8 rounded-full" />
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-20" />
+                  </div>
+                </div>
+                <Skeleton className="h-4 w-16" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error && transactions.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Transaction History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-20 flex-col items-center justify-center gap-2 text-muted-foreground">
+            <p>{error}</p>
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={loadInitial}
+              className="h-auto p-0"
+            >
+              Retry
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Transaction History</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {transactions.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No transactions yet.</p>
+        ) : (
+          <>
+            <div className="space-y-1">
+              {transactions.map((tx, index) => {
+                const config = TYPE_CONFIG[tx.type] ?? {
+                  icon: ArrowDownIcon,
+                  label: tx.type,
+                };
+                const Icon = config.icon;
+                const isPositive = tx.amount > 0;
+                const isHovered = hoveredId === tx.id;
+
+                return (
+                  <motion.div
+                    key={tx.id}
+                    variants={staggerItem}
+                    initial="hidden"
+                    animate="visible"
+                    custom={index}
+                    onMouseEnter={() => setHoveredId(tx.id)}
+                    onMouseLeave={() => setHoveredId(null)}
+                    className={cn(
+                      "rounded-md px-3 py-2 text-sm hover:bg-accent/50",
+                      tx.type === "community_dividend" && "bg-terminal/5 border border-terminal/10",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <Icon className="size-4 shrink-0 text-muted-foreground" />
+                        <div>
+                          <span className="font-medium">{tx.description}</span>
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant={tx.type === "community_dividend" ? "terminal" : "outline"}
+                              className="text-xs"
+                            >
+                              {config.label}
+                            </Badge>
+                            <span className="text-xs text-muted-foreground">
+                              {new Date(tx.createdAt).toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                              })}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <span
+                        className={cn(
+                          "font-mono font-medium",
+                          isPositive ? "text-emerald-500" : "text-red-500",
+                        )}
+                      >
+                        {isPositive ? "+" : "-"}
+                        {formatCreditStandard(Math.abs(tx.amount))}
+                      </span>
+                    </div>
+                    <AnimatePresence>
+                      {isHovered && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{ duration: 0.2, ease: "easeOut" }}
+                          className="overflow-hidden"
+                        >
+                          <div className="pt-2 pl-7 text-xs text-muted-foreground space-y-0.5">
+                            <p>{tx.description}</p>
+                            <p>
+                              {new Date(tx.createdAt).toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                                hour: "numeric",
+                                minute: "2-digit",
+                              })}
+                            </p>
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </motion.div>
+                );
+              })}
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            {cursor && (
+              <div className="pt-2">
+                <Button variant="outline" size="sm" onClick={loadMore} disabled={loadingMore}>
+                  {loadingMore ? "Loading more..." : "Load more"}
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/bot-settings/__tests__/bot-settings-client.test.tsx

@@ -0,0 +1,205 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BotSettingsClient } from "../bot-settings-client";
+
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn().mockReturnValue({ push: vi.fn() }),
+}));
+
+vi.mock("@/lib/bot-settings-data", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/bot-settings-data")>();
+  return {
+    ...actual,
+    getBotSettings: vi.fn().mockResolvedValue({
+      id: "bot-001",
+      identity: {
+        name: "TestBot",
+        avatar: "",
+        personality: "Helpful assistant",
+      },
+      brain: {
+        provider: "anthropic",
+        model: "claude-sonnet-4-6",
+        mode: "hosted",
+        costPerMessage: "$0.001",
+        description: "Claude Sonnet",
+      },
+      channels: [],
+      availableChannels: [],
+      activeSuperpowers: [],
+      availableSuperpowers: [],
+      installedPlugins: [],
+      discoverPlugins: [],
+      usage: {
+        totalSpend: 0,
+        creditBalance: 100,
+        capabilities: [],
+        trend: [],
+      },
+      status: "running",
+    }),
+    updateBotIdentity: vi.fn().mockResolvedValue({
+      name: "TestBot",
+      avatar: "",
+      personality: "Helpful assistant",
+    }),
+    updateBotBrain: vi.fn().mockResolvedValue(undefined),
+    togglePlugin: vi.fn().mockResolvedValue(undefined),
+    installPlugin: vi.fn().mockResolvedValue(undefined),
+    activateSuperpower: vi.fn().mockResolvedValue({ success: true }),
+    controlBot: vi.fn().mockResolvedValue(undefined),
+    disconnectChannel: vi.fn().mockResolvedValue(undefined),
+    getChannelConfig: vi.fn().mockResolvedValue({}),
+    getPluginConfig: vi.fn().mockResolvedValue({}),
+    getSuperpowerConfig: vi.fn().mockResolvedValue({}),
+    updateChannelConfig: vi.fn().mockResolvedValue(undefined),
+    updatePluginConfig: vi.fn().mockResolvedValue(undefined),
+    updateSuperpowerConfig: vi.fn().mockResolvedValue(undefined),
+  };
+});
+
+describe("BotSettingsClient — loading and error states", () => {
+  it("renders skeleton while loading", async () => {
+    const { getBotSettings } = await import("@/lib/bot-settings-data");
+    vi.mocked(getBotSettings).mockReturnValueOnce(
+      new Promise(() => {
+        /* never resolves — keep loading state for test */
+      }),
+    );
+
+    const { container } = render(<BotSettingsClient botId="bot-001" />);
+    // No bot name rendered yet
+    expect(screen.queryByDisplayValue("TestBot")).not.toBeInTheDocument();
+    // Skeleton elements present
+    expect(container.querySelectorAll("[class*='animate-pulse']").length).toBeGreaterThan(0);
+  });
+
+  it("renders error state when getBotSettings fails", async () => {
+    const { getBotSettings } = await import("@/lib/bot-settings-data");
+    vi.mocked(getBotSettings).mockRejectedValueOnce(new Error("Server error"));
+
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Server error/i)).toBeInTheDocument();
+    });
+    expect(screen.getByRole("link", { name: /Back to Dashboard/i })).toBeInTheDocument();
+  });
+});
+
+describe("BotSettingsClient — IdentityTab save flow", () => {
+  it("renders identity tab with bot name after loading", async () => {
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+  });
+
+  it("calls updateBotIdentity with updated name on save", async () => {
+    const user = userEvent.setup();
+    const { updateBotIdentity } = await import("@/lib/bot-settings-data");
+
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    const nameInput = screen.getByDisplayValue("TestBot");
+    await user.clear(nameInput);
+    await user.type(nameInput, "UpdatedBot");
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => {
+      expect(updateBotIdentity).toHaveBeenCalledWith("bot-001", {
+        name: "UpdatedBot",
+        avatar: "",
+        personality: "Helpful assistant",
+      });
+    });
+  });
+
+  it("shows Saved! confirmation after successful save", async () => {
+    const user = userEvent.setup();
+
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Saved!")).toBeInTheDocument();
+    });
+  });
+
+  it("shows error message when save fails", async () => {
+    const { updateBotIdentity } = await import("@/lib/bot-settings-data");
+    vi.mocked(updateBotIdentity).mockRejectedValueOnce(new Error("Server error"));
+
+    const user = userEvent.setup();
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Failed to save \u2014 please try again.")).toBeInTheDocument();
+    });
+  });
+
+  it("disables save button while saving", async () => {
+    const { updateBotIdentity } = await import("@/lib/bot-settings-data");
+    let resolveUpdate!: (v: { name: string; avatar: string; personality: string }) => void;
+    vi.mocked(updateBotIdentity).mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveUpdate = resolve;
+      }),
+    );
+
+    const user = userEvent.setup();
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    const saveBtn = screen.getByRole("button", { name: "Save changes" });
+    await user.click(saveBtn);
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Saving..." })).toBeDisabled();
+    });
+
+    resolveUpdate({ name: "TestBot", avatar: "", personality: "Helpful assistant" });
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    });
+  });
+
+  it("disables save button when name is empty", async () => {
+    const user = userEvent.setup();
+
+    render(<BotSettingsClient botId="bot-001" />);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("TestBot")).toBeInTheDocument();
+    });
+
+    const nameInput = screen.getByDisplayValue("TestBot");
+    await user.clear(nameInput);
+
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeDisabled();
+  });
+});