@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/bot-settings/storage-tab.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StorageTab } from "@/components/bot-settings/storage-tab";
+
+vi.mock("@/lib/bot-settings-data", () => ({
+  getStorageTier: vi.fn().mockResolvedValue({ tier: "standard" }),
+  getStorageUsage: vi.fn().mockResolvedValue({
+    usedBytes: 1_073_741_824,
+    totalBytes: 5_368_709_120,
+    availableBytes: 4_294_967_296,
+  }),
+  setStorageTier: vi.fn().mockResolvedValue({ tier: "plus" }),
+}));
+
+describe("StorageTab", () => {
+  it("shows loading state initially", () => {
+    render(<StorageTab botId="bot-1" />);
+    expect(screen.getByText("Loading storage info...")).toBeInTheDocument();
+  });
+
+  it("renders used/total storage after loading", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/1\.0 GB of 5 GB/)).toBeInTheDocument();
+    });
+  });
+
+  it("renders usage percentage", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("20%")).toBeInTheDocument();
+    });
+  });
+
+  it("renders all four storage tier cards", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Standard")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Plus")).toBeInTheDocument();
+    expect(screen.getByText("Pro")).toBeInTheDocument();
+    expect(screen.getByText("Max")).toBeInTheDocument();
+  });
+
+  it("shows tier descriptions with GB amounts", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/5 GB — included with your bot/)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/20 GB/)).toBeInTheDocument();
+    expect(screen.getByText(/50 GB/)).toBeInTheDocument();
+    expect(screen.getByText(/100 GB/)).toBeInTheDocument();
+  });
+
+  it("marks the current tier with a Current badge", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Current")).toBeInTheDocument();
+    });
+  });
+
+  it("shows Included for standard tier and daily costs for paid tiers", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Included")).toBeInTheDocument();
+    });
+    expect(screen.getByText("+3¢ / day")).toBeInTheDocument();
+    expect(screen.getByText("+8¢ / day")).toBeInTheDocument();
+    expect(screen.getByText("+15¢ / day")).toBeInTheDocument();
+  });
+
+  it("shows billing explanation text", async () => {
+    render(<StorageTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Storage costs are billed daily from your credit balance/),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/bot-settings/vps-info-panel.test.tsx

@@ -0,0 +1,108 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VpsInfoPanel } from "@/components/bot-settings/vps-info-panel";
+
+const mockGetVpsInfo = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  getVpsInfo: (...args: unknown[]) => mockGetVpsInfo(...args),
+}));
+
+describe("VpsInfoPanel", () => {
+  it("renders nothing when VPS info is null (no VPS)", async () => {
+    mockGetVpsInfo.mockResolvedValue(null);
+    const { container } = render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  it("renders VPS details when active", async () => {
+    mockGetVpsInfo.mockResolvedValue({
+      botId: "bot-1",
+      status: "active",
+      hostname: "bot-1.platform.vps",
+      sshConnectionString: "ssh platform@bot-1.platform.vps",
+      diskSizeGb: 20,
+      createdAt: "2026-01-15T00:00:00Z",
+    });
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("VPS")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Active")).toBeInTheDocument();
+    expect(screen.getByText("bot-1.platform.vps")).toBeInTheDocument();
+    expect(screen.getByText("20 GB SSD")).toBeInTheDocument();
+    expect(screen.getByText("2 GB RAM / 2 vCPU")).toBeInTheDocument();
+    expect(screen.getByText("ssh platform@bot-1.platform.vps")).toBeInTheDocument();
+  });
+
+  it("shows Active since date", async () => {
+    mockGetVpsInfo.mockResolvedValue({
+      botId: "bot-1",
+      status: "active",
+      hostname: "bot-1.platform.vps",
+      sshConnectionString: null,
+      diskSizeGb: 20,
+      createdAt: "2026-01-15T00:00:00Z",
+    });
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Active since")).toBeInTheDocument();
+    });
+    expect(screen.getByText(/2026/)).toBeInTheDocument();
+  });
+
+  it("shows SSH provisioning message when no connection string on active VPS", async () => {
+    mockGetVpsInfo.mockResolvedValue({
+      botId: "bot-1",
+      status: "active",
+      hostname: "bot-1.platform.vps",
+      sshConnectionString: null,
+      diskSizeGb: 20,
+      createdAt: "2026-01-15T00:00:00Z",
+    });
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/SSH access is being provisioned/)).toBeInTheDocument();
+    });
+  });
+
+  it("shows Canceling badge for canceling status", async () => {
+    mockGetVpsInfo.mockResolvedValue({
+      botId: "bot-1",
+      status: "canceling",
+      hostname: "bot-1.platform.vps",
+      sshConnectionString: null,
+      diskSizeGb: 20,
+      createdAt: "2026-01-15T00:00:00Z",
+    });
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Canceling")).toBeInTheDocument();
+    });
+  });
+
+  it("renders error message when getVpsInfo rejects", async () => {
+    mockGetVpsInfo.mockRejectedValue(new Error("Network error"));
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/failed to load VPS info/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows Canceled badge for canceled status", async () => {
+    mockGetVpsInfo.mockResolvedValue({
+      botId: "bot-1",
+      status: "canceled",
+      hostname: null,
+      sshConnectionString: null,
+      diskSizeGb: 20,
+      createdAt: "2026-01-15T00:00:00Z",
+    });
+    render(<VpsInfoPanel botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Canceled")).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/bot-settings/vps-upgrade-card.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VpsUpgradeCard } from "@/components/bot-settings/vps-upgrade-card";
+
+vi.mock("@/lib/api", () => ({
+  upgradeToVps: vi.fn(),
+}));
+
+vi.mock("@/lib/validate-redirect-url", () => ({
+  isAllowedRedirectUrl: vi.fn().mockReturnValue(true),
+}));
+
+describe("VpsUpgradeCard", () => {
+  it("renders the upgrade card title", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    expect(screen.getByText("Upgrade to VPS")).toBeInTheDocument();
+  });
+
+  it("shows the $15/mo price badge", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    expect(screen.getByText("$15/mo")).toBeInTheDocument();
+  });
+
+  it("displays the description", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    expect(
+      screen.getByText(/dedicated persistent container with fixed monthly pricing/),
+    ).toBeInTheDocument();
+  });
+
+  it("lists all VPS features", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    expect(screen.getByText("2 GB RAM / 2 vCPU")).toBeInTheDocument();
+    expect(screen.getByText("20 GB SSD")).toBeInTheDocument();
+    expect(screen.getByText("Persistent container")).toBeInTheDocument();
+    expect(screen.getByText("Dedicated hostname")).toBeInTheDocument();
+    expect(screen.getByText("SSH access")).toBeInTheDocument();
+    expect(screen.getByText("Flat monthly price")).toBeInTheDocument();
+  });
+
+  it("renders the upgrade CTA button", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    const button = screen.getByRole("button", { name: /Upgrade to VPS/ });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toBeDisabled();
+  });
+
+  it("shows Stripe checkout redirect notice", () => {
+    render(<VpsUpgradeCard botId="bot-1" />);
+    expect(screen.getByText(/redirected to Stripe Checkout/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/bot-settings-data-control.test.ts

@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const mockFetch = vi.fn().mockResolvedValue({
+  ok: true,
+  status: 200,
+  json: () => Promise.resolve({}),
+});
+vi.stubGlobal("fetch", mockFetch);
+
+vi.mock("@/lib/api-config", () => ({
+  API_BASE_URL: "https://api.test",
+  PLATFORM_BASE_URL: "https://api.test",
+}));
+
+describe("controlBot HTTP behavior", () => {
+  afterEach(() => {
+    mockFetch.mockClear();
+  });
+
+  it("sends DELETE /fleet/bots/:id for delete action", async () => {
+    const { controlBot } = await import("@/lib/bot-settings-data");
+    await controlBot("bot-123", "delete");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test/fleet/bots/bot-123",
+      expect.objectContaining({ method: "DELETE" }),
+    );
+  });
+
+  it("sends POST /fleet/bots/:id/stop for stop action", async () => {
+    const { controlBot } = await import("@/lib/bot-settings-data");
+    await controlBot("bot-123", "stop");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test/fleet/bots/bot-123/stop",
+      expect.objectContaining({ method: "POST" }),
+    );
+  });
+
+  it("sends POST /fleet/bots/:id/archive for archive action", async () => {
+    const { controlBot } = await import("@/lib/bot-settings-data");
+    await controlBot("bot-123", "archive");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test/fleet/bots/bot-123/archive",
+      expect.objectContaining({ method: "POST" }),
+    );
+  });
+});

package/src/__tests__/bot-settings-restart.test.tsx

@@ -0,0 +1,149 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), refresh: vi.fn() }),
+  usePathname: () => "/instances/bot-1",
+}));
+
+// Mock hooks/use-fleet-sse
+vi.mock("@/hooks/use-fleet-sse", () => ({
+  useFleetSSE: () => ({ lastEvent: null }),
+}));
+
+// Mock hooks/use-save-queue
+vi.mock("@/hooks/use-save-queue", () => ({
+  useSaveQueue: () => ({ enqueue: vi.fn(), saving: false }),
+}));
+
+// Mock lib/api
+vi.mock("@/lib/api", () => ({
+  getInstanceHealth: vi.fn().mockResolvedValue(null),
+  apiFetch: vi.fn(),
+}));
+
+// Mock bot-settings-data with controlBot we can spy on
+const mockControlBot = vi
+  .fn()
+  .mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+const mockGetBotSettings = vi.fn().mockResolvedValue({
+  id: "bot-1",
+  identity: { name: "Test Bot", personality: "", avatar: "" },
+  brain: { model: "gpt-4", mode: "chat" },
+  channels: [],
+  availableChannels: [],
+  activeSuperpowers: [],
+  availableSuperpowers: [],
+  installedPlugins: [],
+  discoverPlugins: [],
+  usage: { totalSpend: 0, creditBalance: 0, capabilities: [], trend: [] },
+  status: "running" as const,
+});
+const mockGetBotStatus = vi.fn().mockResolvedValue({ status: "running" });
+
+vi.mock("@/lib/bot-settings-data", () => ({
+  PERSONALITY_TEMPLATES: [
+    { id: "professional", label: "Professional", text: "Professional assistant." },
+    { id: "creative", label: "Creative", text: "Creative companion." },
+    { id: "casual", label: "Casual", text: "Casual assistant." },
+    { id: "custom", label: "Custom", text: "" },
+  ],
+  controlBot: (...args: unknown[]) => mockControlBot(...args),
+  getBotSettings: (...args: unknown[]) => mockGetBotSettings(...args),
+  getBotStatus: (...args: unknown[]) => mockGetBotStatus(...args),
+  updateBotIdentity: vi.fn(),
+  updateBotBrain: vi.fn(),
+  disconnectChannel: vi.fn(),
+  updateChannelConfig: vi.fn(),
+  activateSuperpower: vi.fn(),
+  deactivateSuperpower: vi.fn(),
+  updateSuperpowerConfig: vi.fn(),
+  installPlugin: vi.fn(),
+  uninstallPlugin: vi.fn(),
+  updatePluginConfig: vi.fn(),
+  listInstalledPlugins: vi.fn().mockResolvedValue([]),
+  getStorageTier: vi.fn().mockResolvedValue({ tier: "standard" }),
+  setStorageTier: vi.fn().mockResolvedValue({ tier: "standard" }),
+  getStorageUsage: vi.fn().mockResolvedValue(null),
+  getResourceTier: vi.fn().mockResolvedValue({ tier: "standard" }),
+  setResourceTier: vi.fn().mockResolvedValue({ tier: "standard" }),
+  getChannelConfig: vi.fn().mockResolvedValue({}),
+  getPluginConfig: vi.fn().mockResolvedValue({}),
+  getSuperpowerConfig: vi.fn().mockResolvedValue({}),
+  togglePlugin: vi.fn(),
+}));
+
+// Mock framer-motion
+vi.mock("framer-motion", async () => {
+  const actual = await vi.importActual("framer-motion");
+  return { ...actual };
+});
+
+import { BotSettingsClient } from "@/components/bot-settings/bot-settings-client";
+
+function renderWithQueryClient(ui: React.ReactElement) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>);
+}
+
+describe("BotSettingsClient restart feedback", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockControlBot.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+    mockGetBotSettings.mockResolvedValue({
+      id: "bot-1",
+      identity: { name: "Test Bot", personality: "", avatar: "" },
+      brain: { model: "gpt-4", mode: "chat" },
+      channels: [],
+      availableChannels: [],
+      activeSuperpowers: [],
+      availableSuperpowers: [],
+      installedPlugins: [],
+      discoverPlugins: [],
+      usage: { totalSpend: 0, creditBalance: 0, capabilities: [], trend: [] },
+      status: "running" as const,
+    });
+    mockGetBotStatus.mockResolvedValue({ status: "running" });
+  });
+
+  it("shows restarting indicator in StatusBadge when restart is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithQueryClient(<BotSettingsClient botId="bot-1" />);
+
+    // Wait for the component to load
+    await waitFor(() => {
+      expect(screen.getByText("Restart")).toBeInTheDocument();
+    });
+
+    // Click restart
+    await user.click(screen.getByText("Restart"));
+
+    // Should show "Restarting" in the status badge area
+    await waitFor(() => {
+      expect(screen.getByText("Restarting")).toBeInTheDocument();
+    });
+
+    // controlBot should have been called with restart
+    expect(mockControlBot).toHaveBeenCalledWith("bot-1", "restart");
+  });
+
+  it("hides Stop/Restart buttons while restart is pending", async () => {
+    const user = userEvent.setup();
+    renderWithQueryClient(<BotSettingsClient botId="bot-1" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Restart")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Restart"));
+
+    // Stop and Restart buttons should be hidden during restart
+    await waitFor(() => {
+      expect(screen.queryByText("Restart")).not.toBeInTheDocument();
+      expect(screen.queryByText("Stop")).not.toBeInTheDocument();
+    });
+  });
+});