@wopr-network/platform-ui-core 1.22.4 → 1.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.22.4",
+  "version": "1.23.1",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/__tests__/create-instance.test.tsx

@@ -3,6 +3,18 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { CreateInstanceClient } from "../app/instances/new/create-instance-client";
 
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn().mockReturnValue({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  usePathname: vi.fn().mockReturnValue("/instances/new"),
+  useSearchParams: vi.fn().mockReturnValue(new URLSearchParams()),
+}));
+
 vi.mock("@/lib/marketplace-data", () => ({
   listMarketplacePlugins: vi.fn(),
 }));

package/src/__tests__/org-billing-api.test.tsx

@@ -2,25 +2,19 @@ import { describe, expect, it, vi } from "vitest";
 
 vi.mock("@/lib/trpc", () => ({
   trpcVanilla: {
-    org: {
-      orgBillingBalance: {
-        query: vi.fn().mockResolvedValue({
-          orgId: "org-1",
-          balanceCents: 5000,
-          dailyBurnCents: 100,
-          runwayDays: 50,
-        }),
-      },
-      orgMemberUsage: {
+    billing: {
+      creditsBalance: {
         query: vi.fn().mockResolvedValue({
-          orgId: "org-1",
-          periodStart: "2026-02-01T00:00:00.000Z",
-          members: [],
+          balance_credits: 5000,
+          daily_burn_credits: 100,
+          runway_days: 50,
         }),
       },
-      orgBillingInfo: {
+      billingInfo: {
         query: vi.fn().mockResolvedValue({ paymentMethods: [], invoices: [] }),
       },
+    },
+    org: {
       orgTopupCheckout: {
         mutate: vi.fn().mockResolvedValue({
           url: "https://checkout.stripe.com/test",
@@ -42,7 +36,7 @@ import {
 } from "@/lib/org-billing-api";
 
 describe("org-billing-api", () => {
-  it("getOrgCreditBalance converts cents to dollars", async () => {
+  it("getOrgCreditBalance converts credits to dollars", async () => {
     const result = await getOrgCreditBalance("org-1");
     expect(result.balance).toBe(50);
     expect(result.dailyBurn).toBe(1);

package/src/__tests__/org-billing-null-guards.test.ts

@@ -9,10 +9,11 @@ interface MockMutate {
 }
 
 interface MockTrpcVanilla {
+  billing: {
+    creditsBalance: MockQuery;
+    billingInfo: MockQuery;
+  };
   org: {
-    orgBillingBalance: MockQuery;
-    orgMemberUsage: MockQuery;
-    orgBillingInfo: MockQuery;
     orgTopupCheckout: MockMutate;
     orgRemovePaymentMethod: MockMutate;
   };
@@ -20,10 +21,11 @@ interface MockTrpcVanilla {
 
 vi.mock("@/lib/trpc", () => ({
   trpcVanilla: {
+    billing: {
+      creditsBalance: { query: vi.fn() },
+      billingInfo: { query: vi.fn() },
+    },
     org: {
-      orgBillingBalance: { query: vi.fn() },
-      orgMemberUsage: { query: vi.fn() },
-      orgBillingInfo: { query: vi.fn() },
       orgTopupCheckout: { mutate: vi.fn() },
       orgRemovePaymentMethod: { mutate: vi.fn() },
     },
@@ -33,8 +35,8 @@ vi.mock("@/lib/trpc", () => ({
 describe("org-billing-api null guards", () => {
   it("getOrgCreditBalance handles empty response", async () => {
     const { trpcVanilla } = await import("@/lib/trpc");
-    const { org } = trpcVanilla as unknown as MockTrpcVanilla;
-    org.orgBillingBalance.query.mockResolvedValue({});
+    const { billing } = trpcVanilla as unknown as MockTrpcVanilla;
+    billing.creditsBalance.query.mockResolvedValue({});
 
     const { getOrgCreditBalance } = await import("@/lib/org-billing-api");
     const result = await getOrgCreditBalance("org-1");
@@ -43,11 +45,7 @@ describe("org-billing-api null guards", () => {
     expect(result.runway).toBeNull();
   });
 
-  it("getOrgMemberUsage handles missing members array", async () => {
-    const { trpcVanilla } = await import("@/lib/trpc");
-    const { org } = trpcVanilla as unknown as MockTrpcVanilla;
-    org.orgMemberUsage.query.mockResolvedValue({ orgId: "o", periodStart: "2026-01-01" });
-
+  it("getOrgMemberUsage returns stub with empty members", async () => {
     const { getOrgMemberUsage } = await import("@/lib/org-billing-api");
     const result = await getOrgMemberUsage("org-1");
     expect(result.members).toEqual([]);
@@ -55,8 +53,8 @@ describe("org-billing-api null guards", () => {
 
   it("getOrgBillingInfo handles empty response", async () => {
     const { trpcVanilla } = await import("@/lib/trpc");
-    const { org } = trpcVanilla as unknown as MockTrpcVanilla;
-    org.orgBillingInfo.query.mockResolvedValue({});
+    const { billing } = trpcVanilla as unknown as MockTrpcVanilla;
+    billing.billingInfo.query.mockResolvedValue({});
 
     const { getOrgBillingInfo } = await import("@/lib/org-billing-api");
     const result = await getOrgBillingInfo("org-1");

package/src/components/sidebar.tsx

@@ -1,6 +1,22 @@
 "use client";
 
-import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
+import {
+  CreditCard,
+  GitBranch,
+  LayoutDashboard,
+  LayoutGrid,
+  LogOutIcon,
+  MessageCircle,
+  MessageSquare,
+  Network,
+  Puzzle,
+  Server,
+  SettingsIcon,
+  Shield,
+  Store,
+  UserIcon,
+  Wallet,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -53,6 +69,23 @@ function getInitials(name: string): string {
     .toUpperCase();
 }
 
+function getNavIcon(href: string) {
+  if (href === "/dashboard") return LayoutDashboard;
+  if (href === "/chat") return MessageCircle;
+  if (href === "/marketplace") return Store;
+  if (href.startsWith("/channels")) return MessageSquare;
+  if (href.startsWith("/plugins")) return Puzzle;
+  if (href.startsWith("/instances")) return LayoutGrid;
+  if (href.startsWith("/changesets")) return GitBranch;
+  if (href.startsWith("/fleet")) return Server;
+  if (href.startsWith("/network")) return Network;
+  if (href.startsWith("/billing/credits")) return Wallet;
+  if (href.startsWith("/billing")) return CreditCard;
+  if (href.startsWith("/settings")) return SettingsIcon;
+  if (href.startsWith("/admin")) return Shield;
+  return null;
+}
+
 export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   const router = useRouter();
@@ -86,7 +119,10 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
   return (
     <div className="flex h-full flex-col">
       <div className="flex h-14 items-center border-b border-sidebar-border px-6">
-        <span className="text-lg font-semibold tracking-tight text-terminal [text-shadow:0_0_12px_rgba(0,255,65,0.4)]">
+        <span
+          className="text-lg font-semibold tracking-tight text-terminal"
+          style={{ textShadow: "0 0 12px var(--terminal-glow, rgba(0, 255, 65, 0.4))" }}
+        >
           {productName()}
         </span>
       </div>
@@ -98,27 +134,33 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
               !item.href.startsWith("/admin") ||
               (user as { role?: string } | undefined)?.role === "platform_admin",
           )
-          .map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              prefetch={false}
-              onClick={onNavigate}
-              className={cn(
-                "flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-foreground",
-                isNavActive(item.href, pathname)
-                  ? "bg-terminal/5 border-l-2 border-terminal text-terminal"
-                  : "text-muted-foreground",
-              )}
-            >
-              {item.label}
-              {item.label === "Credits" && creditBalance !== null && (
-                <span className={cn("text-xs font-mono", balanceColorClass(creditBalance))}>
-                  {formatCreditStandard(creditBalance)}
+          .map((item) => {
+            const NavIcon = getNavIcon(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                prefetch={false}
+                onClick={onNavigate}
+                className={cn(
+                  "flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-foreground",
+                  isNavActive(item.href, pathname)
+                    ? "bg-terminal/5 border-l-2 border-terminal text-terminal"
+                    : "text-muted-foreground",
+                )}
+              >
+                <span className="flex items-center gap-2.5">
+                  {NavIcon && <NavIcon className="size-4 shrink-0 opacity-70" />}
+                  {item.label}
                 </span>
-              )}
-            </Link>
-          ))}
+                {item.label === "Credits" && creditBalance !== null && (
+                  <span className={cn("text-xs font-mono", balanceColorClass(creditBalance))}>
+                    {formatCreditStandard(creditBalance)}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
       </nav>
       <div className="border-t border-sidebar-border px-3 py-3">
         {isPending ? (
@@ -138,7 +180,7 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
                   className="size-8 rounded-full object-cover"
                 />
               ) : (
-                <span className="flex size-8 items-center justify-center rounded-full bg-sidebar-accent text-xs font-semibold">
+                <span className="flex size-8 items-center justify-center rounded-full bg-sidebar-accent text-xs font-semibold ring-1 ring-terminal/20">
                   {user.name?.trim() ? getInitials(user.name) : <UserIcon className="size-4" />}
                 </span>
               )}

package/src/lib/__tests__/org-billing-api.test.ts

@@ -1,25 +1,24 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 const {
-  mockOrgBillingBalanceQuery,
-  mockOrgMemberUsageQuery,
-  mockOrgBillingInfoQuery,
+  mockCreditsBalanceQuery,
+  mockBillingInfoQuery,
   mockOrgTopupCheckoutMutate,
   mockOrgSetDefaultPaymentMethodMutate,
 } = vi.hoisted(() => ({
-  mockOrgBillingBalanceQuery: vi.fn(),
-  mockOrgMemberUsageQuery: vi.fn(),
-  mockOrgBillingInfoQuery: vi.fn(),
+  mockCreditsBalanceQuery: vi.fn(),
+  mockBillingInfoQuery: vi.fn(),
   mockOrgTopupCheckoutMutate: vi.fn(),
   mockOrgSetDefaultPaymentMethodMutate: vi.fn(),
 }));
 
 vi.mock("@/lib/trpc", () => ({
   trpcVanilla: {
+    billing: {
+      creditsBalance: { query: mockCreditsBalanceQuery },
+      billingInfo: { query: mockBillingInfoQuery },
+    },
     org: {
-      orgBillingBalance: { query: mockOrgBillingBalanceQuery },
-      orgMemberUsage: { query: mockOrgMemberUsageQuery },
-      orgBillingInfo: { query: mockOrgBillingInfoQuery },
       orgTopupCheckout: { mutate: mockOrgTopupCheckoutMutate },
       orgSetDefaultPaymentMethod: { mutate: mockOrgSetDefaultPaymentMethodMutate },
     },
@@ -38,11 +37,11 @@ import {
 describe("getOrgCreditBalance", () => {
   afterEach(() => vi.clearAllMocks());
 
-  it("converts cents to dollars and returns balance", async () => {
-    mockOrgBillingBalanceQuery.mockResolvedValue({
-      balanceCents: 5000,
-      dailyBurnCents: 200,
-      runwayDays: 25,
+  it("converts credits to dollars and returns balance", async () => {
+    mockCreditsBalanceQuery.mockResolvedValue({
+      balance_credits: 5000,
+      daily_burn_credits: 200,
+      runway_days: 25,
     });
 
     const result = await getOrgCreditBalance("org-1");
@@ -51,14 +50,29 @@ describe("getOrgCreditBalance", () => {
       dailyBurn: 2,
       runway: 25,
     });
-    expect(mockOrgBillingBalanceQuery).toHaveBeenCalledWith({ orgId: "org-1" });
+    expect(mockCreditsBalanceQuery).toHaveBeenCalledWith({});
+  });
+
+  it("falls back to legacy cents fields", async () => {
+    mockCreditsBalanceQuery.mockResolvedValue({
+      balance_cents: 3000,
+      daily_burn_cents: 100,
+      runway_days: 30,
+    });
+
+    const result = await getOrgCreditBalance("org-1");
+    expect(result).toEqual({
+      balance: 30,
+      dailyBurn: 1,
+      runway: 30,
+    });
   });
 
   it("defaults to zero balance when response fields are null", async () => {
-    mockOrgBillingBalanceQuery.mockResolvedValue({
-      balanceCents: null,
-      dailyBurnCents: null,
-      runwayDays: null,
+    mockCreditsBalanceQuery.mockResolvedValue({
+      balance_credits: null,
+      daily_burn_credits: null,
+      runway_days: null,
     });
 
     const result = await getOrgCreditBalance("org-1");
@@ -70,7 +84,7 @@ describe("getOrgCreditBalance", () => {
   });
 
   it("defaults to zero balance when response fields are undefined", async () => {
-    mockOrgBillingBalanceQuery.mockResolvedValue({});
+    mockCreditsBalanceQuery.mockResolvedValue({});
 
     const result = await getOrgCreditBalance("org-1");
     expect(result).toEqual({
@@ -81,101 +95,17 @@ describe("getOrgCreditBalance", () => {
   });
 
   it("propagates tRPC errors", async () => {
-    mockOrgBillingBalanceQuery.mockRejectedValue(new Error("Forbidden"));
+    mockCreditsBalanceQuery.mockRejectedValue(new Error("Forbidden"));
     await expect(getOrgCreditBalance("org-1")).rejects.toThrow("Forbidden");
   });
 });
 
 describe("getOrgMemberUsage", () => {
-  afterEach(() => vi.clearAllMocks());
-
-  it("transforms member usage with cents-to-dollars conversion", async () => {
-    mockOrgMemberUsageQuery.mockResolvedValue({
-      orgId: "org-1",
-      periodStart: "2026-03-01",
-      members: [
-        {
-          memberId: "m-1",
-          name: "Alice",
-          email: "alice@test.com",
-          creditsConsumedCents: 1500,
-          lastActiveAt: "2026-03-02T10:00:00Z",
-        },
-        {
-          memberId: "m-2",
-          name: "Bob",
-          email: "bob@test.com",
-          creditsConsumedCents: 300,
-          lastActiveAt: null,
-        },
-      ],
-    });
-
-    const result = await getOrgMemberUsage("org-1");
-    expect(result).toEqual({
-      orgId: "org-1",
-      periodStart: "2026-03-01",
-      members: [
-        {
-          memberId: "m-1",
-          name: "Alice",
-          email: "alice@test.com",
-          creditsConsumed: 15,
-          lastActiveAt: "2026-03-02T10:00:00Z",
-        },
-        {
-          memberId: "m-2",
-          name: "Bob",
-          email: "bob@test.com",
-          creditsConsumed: 3,
-          lastActiveAt: null,
-        },
-      ],
-    });
-    expect(mockOrgMemberUsageQuery).toHaveBeenCalledWith({ orgId: "org-1" });
-  });
-
-  it("defaults member fields when properties are missing", async () => {
-    mockOrgMemberUsageQuery.mockResolvedValue({
-      orgId: "org-1",
-      periodStart: "2026-03-01",
-      members: [{}],
-    });
-
-    const result = await getOrgMemberUsage("org-1");
-    expect(result.members[0]).toEqual({
-      memberId: "",
-      name: "",
-      email: "",
-      creditsConsumed: 0,
-      lastActiveAt: null,
-    });
-  });
-
-  it("handles null members array", async () => {
-    mockOrgMemberUsageQuery.mockResolvedValue({
-      orgId: "org-1",
-      periodStart: "2026-03-01",
-      members: null,
-    });
-
-    const result = await getOrgMemberUsage("org-1");
-    expect(result.members).toEqual([]);
-  });
-
-  it("falls back orgId and periodStart when missing from response", async () => {
-    mockOrgMemberUsageQuery.mockResolvedValue({
-      members: [],
-    });
-
+  it("returns stub data with empty members array", async () => {
     const result = await getOrgMemberUsage("org-1");
     expect(result.orgId).toBe("org-1");
-    expect(result.periodStart).toBe("");
-  });
-
-  it("propagates tRPC errors", async () => {
-    mockOrgMemberUsageQuery.mockRejectedValue(new Error("Server error"));
-    await expect(getOrgMemberUsage("org-1")).rejects.toThrow("Server error");
+    expect(result.members).toEqual([]);
+    expect(result.periodStart).toBeTruthy();
   });
 });
 
@@ -195,7 +125,7 @@ describe("getOrgBillingInfo", () => {
         hostedLineItems: undefined,
       },
     ];
-    mockOrgBillingInfoQuery.mockResolvedValue({ paymentMethods, invoices });
+    mockBillingInfoQuery.mockResolvedValue({ paymentMethods, invoices });
 
     const result = await getOrgBillingInfo("org-1");
     expect(result).toEqual({
@@ -212,11 +142,11 @@ describe("getOrgBillingInfo", () => {
         },
       ],
     });
-    expect(mockOrgBillingInfoQuery).toHaveBeenCalledWith({ orgId: "org-1" });
+    expect(mockBillingInfoQuery).toHaveBeenCalledWith({});
   });
 
   it("defaults to empty arrays when fields are null", async () => {
-    mockOrgBillingInfoQuery.mockResolvedValue({
+    mockBillingInfoQuery.mockResolvedValue({
       paymentMethods: null,
       invoices: null,
     });
@@ -226,15 +156,16 @@ describe("getOrgBillingInfo", () => {
   });
 
   it("defaults to empty arrays when fields are undefined", async () => {
-    mockOrgBillingInfoQuery.mockResolvedValue({});
+    mockBillingInfoQuery.mockResolvedValue({});
 
     const result = await getOrgBillingInfo("org-1");
     expect(result).toEqual({ paymentMethods: [], invoices: [] });
   });
 
-  it("propagates tRPC errors", async () => {
-    mockOrgBillingInfoQuery.mockRejectedValue(new Error("Not found"));
-    await expect(getOrgBillingInfo("org-1")).rejects.toThrow("Not found");
+  it("returns defaults on tRPC error instead of throwing", async () => {
+    mockBillingInfoQuery.mockRejectedValue(new Error("Not found"));
+    const result = await getOrgBillingInfo("org-1");
+    expect(result).toEqual({ paymentMethods: [], invoices: [] });
   });
 });