@wopr-network/platform-ui-core 1.24.1 → 1.25.0

package/package.json

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

package/src/app/admin/products/error.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+
+export default function ProductsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Admin products page error:", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-64 flex-col items-center justify-center gap-4 p-6">
+      <p className="text-sm text-destructive">Failed to load product configuration.</p>
+      <p className="text-xs text-muted-foreground">{error.message}</p>
+      <Button variant="outline" size="sm" onClick={reset}>
+        Try Again
+      </Button>
+    </div>
+  );
+}

package/src/app/admin/products/page.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { BillingForm } from "@/components/admin/products/billing-form";
+import { BrandForm } from "@/components/admin/products/brand-form";
+import { FeaturesForm } from "@/components/admin/products/features-form";
+import { FleetForm } from "@/components/admin/products/fleet-form";
+import { NavEditor } from "@/components/admin/products/nav-editor";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PLATFORM_BASE_URL } from "@/lib/api-config";
+import { toUserMessage } from "@/lib/errors";
+import { getActiveTenantId } from "@/lib/tenant-context";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ProductConfig {
+  product: {
+    id: string;
+    slug: string;
+    brandName: string;
+    productName: string;
+    tagline: string;
+    domain: string;
+    appDomain: string;
+    cookieDomain: string;
+    companyLegal: string;
+    priceLabel: string;
+    defaultImage: string;
+    emailSupport: string;
+    emailPrivacy: string;
+    emailLegal: string;
+    fromEmail: string;
+    homePath: string;
+    storagePrefix: string;
+  };
+  navItems: Array<{
+    id: string;
+    label: string;
+    href: string;
+    icon: string | null;
+    sortOrder: number;
+    requiresRole: string | null;
+    enabled: boolean;
+  }>;
+  features: {
+    chatEnabled: boolean;
+    onboardingEnabled: boolean;
+    onboardingDefaultModel: string | null;
+    onboardingMaxCredits: number;
+    onboardingWelcomeMsg: string | null;
+    sharedModuleBilling: boolean;
+    sharedModuleMonitoring: boolean;
+    sharedModuleAnalytics: boolean;
+  } | null;
+  fleet: {
+    containerImage: string;
+    containerPort: number;
+    lifecycle: string;
+    billingModel: string;
+    maxInstances: number;
+    dockerNetwork: string;
+    placementStrategy: string;
+    fleetDataDir: string;
+  } | null;
+  billing: {
+    stripePublishableKey: string | null;
+    creditPrices: Record<string, number>;
+    affiliateBaseUrl: string | null;
+    affiliateMatchRate: string;
+    affiliateMaxCap: number;
+    dividendRate: string;
+  } | null;
+}
+
+// ---------------------------------------------------------------------------
+// API helpers
+// ---------------------------------------------------------------------------
+
+async function adminFetch(path: string, init?: RequestInit): Promise<Response> {
+  const tenantId = getActiveTenantId();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(tenantId ? { "x-tenant-id": tenantId } : {}),
+  };
+  return fetch(`${PLATFORM_BASE_URL}/trpc/${path}`, {
+    credentials: "include",
+    ...init,
+    headers: { ...headers, ...(init?.headers as Record<string, string> | undefined) },
+  });
+}
+
+async function fetchProductConfig(): Promise<ProductConfig> {
+  const res = await adminFetch("product.admin.get");
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const json = (await res.json()) as { result: { data: ProductConfig } };
+  return json.result.data;
+}
+
+async function mutateProductConfig(endpoint: string, input: unknown): Promise<void> {
+  const res = await adminFetch(`product.admin.${endpoint}`, {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "Unknown error");
+    throw new Error(text || `HTTP ${res.status}`);
+  }
+  const json = (await res.json()) as { error?: { message?: string } };
+  if (json.error) {
+    throw new Error(json.error.message ?? "Mutation failed");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Default values for missing optional sections
+// ---------------------------------------------------------------------------
+
+const DEFAULT_FEATURES: NonNullable<ProductConfig["features"]> = {
+  chatEnabled: false,
+  onboardingEnabled: false,
+  onboardingDefaultModel: null,
+  onboardingMaxCredits: 0,
+  onboardingWelcomeMsg: null,
+  sharedModuleBilling: false,
+  sharedModuleMonitoring: false,
+  sharedModuleAnalytics: false,
+};
+
+const DEFAULT_FLEET: NonNullable<ProductConfig["fleet"]> = {
+  containerImage: "",
+  containerPort: 8080,
+  lifecycle: "managed",
+  billingModel: "none",
+  maxInstances: 10,
+  dockerNetwork: "platform",
+  placementStrategy: "round_robin",
+  fleetDataDir: "/data/fleet",
+};
+
+const DEFAULT_BILLING: NonNullable<ProductConfig["billing"]> = {
+  stripePublishableKey: null,
+  creditPrices: {},
+  affiliateBaseUrl: null,
+  affiliateMatchRate: "0.10",
+  affiliateMaxCap: 0,
+  dividendRate: "0.05",
+};
+
+// ---------------------------------------------------------------------------
+// Page component
+// ---------------------------------------------------------------------------
+
+export default function AdminProductsPage() {
+  const [config, setConfig] = useState<ProductConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const data = await fetchProductConfig();
+      setConfig(data);
+    } catch (err) {
+      setLoadError(toUserMessage(err, "Failed to load product configuration"));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full max-w-sm" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (loadError || !config) {
+    return (
+      <div className="p-6 flex flex-col items-center justify-center gap-4 h-64">
+        <p className="text-sm text-destructive">{loadError ?? "No configuration found."}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold tracking-tight">Product Configuration</h1>
+
+      <Tabs defaultValue="brand">
+        <TabsList className="mb-4">
+          <TabsTrigger value="brand">Brand</TabsTrigger>
+          <TabsTrigger value="navigation">Navigation</TabsTrigger>
+          <TabsTrigger value="features">Features</TabsTrigger>
+          <TabsTrigger value="fleet">Fleet</TabsTrigger>
+          <TabsTrigger value="billing">Billing</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="brand">
+          <BrandForm initial={config.product} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="navigation">
+          <NavEditor initial={config.navItems} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="features">
+          <FeaturesForm
+            initial={config.features ?? DEFAULT_FEATURES}
+            onSave={mutateProductConfig}
+          />
+        </TabsContent>
+
+        <TabsContent value="fleet">
+          <FleetForm initial={config.fleet ?? DEFAULT_FLEET} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="billing">
+          <BillingForm initial={config.billing ?? DEFAULT_BILLING} onSave={mutateProductConfig} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/admin/products/billing-form.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface BillingConfig {
+  stripePublishableKey: string | null;
+  creditPrices: Record<string, number>;
+  affiliateBaseUrl: string | null;
+  affiliateMatchRate: string;
+  affiliateMaxCap: number;
+  dividendRate: string;
+}
+
+interface BillingFormProps {
+  initial: BillingConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function BillingForm({ initial, onSave }: BillingFormProps) {
+  const [form, setForm] = useState<BillingConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setStr(key: keyof BillingConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value || null }));
+  }
+
+  function setRate(key: "affiliateMatchRate" | "dividendRate", value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setNum(key: "affiliateMaxCap", value: string) {
+    setForm((prev) => ({ ...prev, [key]: value === "" ? 0 : Number.parseInt(value, 10) }));
+  }
+
+  function setCreditPrice(tier: string, value: string) {
+    const n = Number.parseFloat(value);
+    setForm((prev) => ({
+      ...prev,
+      creditPrices: { ...prev.creditPrices, [tier]: Number.isNaN(n) ? 0 : n },
+    }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateBilling", form);
+      toast.success("Billing settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save billing settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const creditTiers = Object.keys(form.creditPrices);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Billing Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="billing-stripeKey">Stripe Publishable Key</Label>
+          <Input
+            id="billing-stripeKey"
+            value={form.stripePublishableKey ?? ""}
+            onChange={(e) => setStr("stripePublishableKey", e.target.value)}
+            placeholder="pk_live_..."
+          />
+          <p className="text-xs text-muted-foreground">Publishable key only — never the secret.</p>
+        </div>
+
+        {creditTiers.length > 0 && (
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Credit Price Tiers</p>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+              {creditTiers.map((tier) => (
+                <div key={tier} className="space-y-1.5">
+                  <Label htmlFor={`billing-price-${tier}`} className="capitalize">
+                    {tier}
+                  </Label>
+                  <Input
+                    id={`billing-price-${tier}`}
+                    type="number"
+                    step="0.0001"
+                    value={form.creditPrices[tier]}
+                    onChange={(e) => setCreditPrice(tier, e.target.value)}
+                    min={0}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="border-t border-border pt-4 space-y-4">
+          <p className="text-sm font-medium text-muted-foreground">Affiliate &amp; Dividends</p>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="col-span-full space-y-1.5">
+              <Label htmlFor="billing-affiliateUrl">Affiliate Base URL</Label>
+              <Input
+                id="billing-affiliateUrl"
+                value={form.affiliateBaseUrl ?? ""}
+                onChange={(e) => setStr("affiliateBaseUrl", e.target.value)}
+                placeholder="https://wopr.bot/ref"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-matchRate">Affiliate Match Rate</Label>
+              <Input
+                id="billing-matchRate"
+                value={form.affiliateMatchRate}
+                onChange={(e) => setRate("affiliateMatchRate", e.target.value)}
+                placeholder="0.10"
+              />
+              <p className="text-xs text-muted-foreground">Decimal, e.g. 0.10 = 10%</p>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-maxCap">Affiliate Max Cap (credits)</Label>
+              <Input
+                id="billing-maxCap"
+                type="number"
+                value={form.affiliateMaxCap}
+                onChange={(e) => setNum("affiliateMaxCap", e.target.value)}
+                min={0}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-dividendRate">Dividend Rate</Label>
+              <Input
+                id="billing-dividendRate"
+                value={form.dividendRate}
+                onChange={(e) => setRate("dividendRate", e.target.value)}
+                placeholder="0.05"
+              />
+              <p className="text-xs text-muted-foreground">Decimal, e.g. 0.05 = 5%</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Billing"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/brand-form.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface BrandConfig {
+  id: string;
+  slug: string;
+  brandName: string;
+  productName: string;
+  tagline: string;
+  domain: string;
+  appDomain: string;
+  cookieDomain: string;
+  companyLegal: string;
+  priceLabel: string;
+  defaultImage: string;
+  emailSupport: string;
+  emailPrivacy: string;
+  emailLegal: string;
+  fromEmail: string;
+  homePath: string;
+  storagePrefix: string;
+}
+
+interface BrandFormProps {
+  initial: BrandConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function BrandForm({ initial, onSave }: BrandFormProps) {
+  const [form, setForm] = useState<BrandConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function set(key: keyof BrandConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateBrand", form);
+      toast.success("Brand settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save brand settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const fields: Array<{ key: keyof BrandConfig; label: string; placeholder?: string }> = [
+    { key: "brandName", label: "Brand Name", placeholder: "WOPR" },
+    { key: "productName", label: "Product Name", placeholder: "WOPR Platform" },
+    { key: "tagline", label: "Tagline", placeholder: "Your AI platform" },
+    { key: "slug", label: "Slug", placeholder: "wopr" },
+    { key: "domain", label: "Domain", placeholder: "wopr.bot" },
+    { key: "appDomain", label: "App Domain", placeholder: "app.wopr.bot" },
+    { key: "cookieDomain", label: "Cookie Domain", placeholder: ".wopr.bot" },
+    { key: "companyLegal", label: "Company Legal Name", placeholder: "WOPR Inc." },
+    { key: "priceLabel", label: "Price Label", placeholder: "credits" },
+    { key: "defaultImage", label: "Default Image URL", placeholder: "/og-image.png" },
+    { key: "emailSupport", label: "Support Email", placeholder: "support@wopr.bot" },
+    { key: "emailPrivacy", label: "Privacy Email", placeholder: "privacy@wopr.bot" },
+    { key: "emailLegal", label: "Legal Email", placeholder: "legal@wopr.bot" },
+    { key: "fromEmail", label: "From Email", placeholder: "noreply@wopr.bot" },
+    { key: "homePath", label: "Home Path", placeholder: "/dashboard" },
+    { key: "storagePrefix", label: "Storage Prefix", placeholder: "wopr" },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Brand Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {fields.map(({ key, label, placeholder }) => (
+            <div key={key} className="space-y-1.5">
+              <Label htmlFor={`brand-${key}`}>{label}</Label>
+              <Input
+                id={`brand-${key}`}
+                value={form[key]}
+                onChange={(e) => set(key, e.target.value)}
+                placeholder={placeholder}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Brand"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/features-form.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface FeaturesConfig {
+  chatEnabled: boolean;
+  onboardingEnabled: boolean;
+  onboardingDefaultModel: string | null;
+  onboardingMaxCredits: number;
+  onboardingWelcomeMsg: string | null;
+  sharedModuleBilling: boolean;
+  sharedModuleMonitoring: boolean;
+  sharedModuleAnalytics: boolean;
+}
+
+interface FeaturesFormProps {
+  initial: FeaturesConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function FeaturesForm({ initial, onSave }: FeaturesFormProps) {
+  const [form, setForm] = useState<FeaturesConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setBool(key: keyof FeaturesConfig, value: boolean) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setStr(key: keyof FeaturesConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value || null }));
+  }
+
+  function setNum(key: keyof FeaturesConfig, value: string) {
+    const n = Number.parseInt(value, 10);
+    if (!Number.isNaN(n)) setForm((prev) => ({ ...prev, [key]: n }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateFeatures", form);
+      toast.success("Feature settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save feature settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const boolFields: Array<{ key: keyof FeaturesConfig; label: string }> = [
+    { key: "chatEnabled", label: "Chat Enabled" },
+    { key: "onboardingEnabled", label: "Onboarding Enabled" },
+    { key: "sharedModuleBilling", label: "Shared Module: Billing" },
+    { key: "sharedModuleMonitoring", label: "Shared Module: Monitoring" },
+    { key: "sharedModuleAnalytics", label: "Shared Module: Analytics" },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Feature Flags</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-3">
+          {boolFields.map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-3">
+              <Checkbox
+                id={`feature-${key}`}
+                checked={Boolean(form[key])}
+                onCheckedChange={(checked) => setBool(key, Boolean(checked))}
+              />
+              <Label htmlFor={`feature-${key}`}>{label}</Label>
+            </div>
+          ))}
+        </div>
+
+        <div className="border-t border-border pt-4 space-y-4">
+          <p className="text-sm font-medium text-muted-foreground">Onboarding</p>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label htmlFor="feature-defaultModel">Default Model</Label>
+              <Input
+                id="feature-defaultModel"
+                value={form.onboardingDefaultModel ?? ""}
+                onChange={(e) => setStr("onboardingDefaultModel", e.target.value)}
+                placeholder="claude-3-5-sonnet"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="feature-maxCredits">Max Onboarding Credits</Label>
+              <Input
+                id="feature-maxCredits"
+                type="number"
+                value={form.onboardingMaxCredits}
+                onChange={(e) => setNum("onboardingMaxCredits", e.target.value)}
+                min={0}
+              />
+            </div>
+            <div className="col-span-full space-y-1.5">
+              <Label htmlFor="feature-welcomeMsg">Welcome Message</Label>
+              <Input
+                id="feature-welcomeMsg"
+                value={form.onboardingWelcomeMsg ?? ""}
+                onChange={(e) => setStr("onboardingWelcomeMsg", e.target.value)}
+                placeholder="Welcome to the platform!"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Features"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/fleet-form.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toUserMessage } from "@/lib/errors";
+
+interface FleetConfig {
+  containerImage: string;
+  containerPort: number;
+  lifecycle: string;
+  billingModel: string;
+  maxInstances: number;
+  dockerNetwork: string;
+  placementStrategy: string;
+  fleetDataDir: string;
+}
+
+interface FleetFormProps {
+  initial: FleetConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function FleetForm({ initial, onSave }: FleetFormProps) {
+  const [form, setForm] = useState<FleetConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setStr(key: keyof FleetConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setNum(key: keyof FleetConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value === "" ? 0 : Number.parseInt(value, 10) }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateFleet", form);
+      toast.success("Fleet settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save fleet settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Fleet Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="col-span-full space-y-1.5">
+            <Label htmlFor="fleet-image">Container Image</Label>
+            <Input
+              id="fleet-image"
+              value={form.containerImage}
+              onChange={(e) => setStr("containerImage", e.target.value)}
+              placeholder="ghcr.io/wopr-network/agent:latest"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-port">Container Port</Label>
+            <Input
+              id="fleet-port"
+              type="number"
+              value={form.containerPort}
+              onChange={(e) => setNum("containerPort", e.target.value)}
+              min={1}
+              max={65535}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-maxInstances">Max Instances</Label>
+            <Input
+              id="fleet-maxInstances"
+              type="number"
+              value={form.maxInstances}
+              onChange={(e) => setNum("maxInstances", e.target.value)}
+              min={1}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-lifecycle">Lifecycle</Label>
+            <Select value={form.lifecycle} onValueChange={(v) => setStr("lifecycle", v)}>
+              <SelectTrigger id="fleet-lifecycle">
+                <SelectValue placeholder="Select lifecycle" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="managed">Managed</SelectItem>
+                <SelectItem value="ephemeral">Ephemeral</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-billingModel">Billing Model</Label>
+            <Select value={form.billingModel} onValueChange={(v) => setStr("billingModel", v)}>
+              <SelectTrigger id="fleet-billingModel">
+                <SelectValue placeholder="Select billing model" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="monthly">Monthly</SelectItem>
+                <SelectItem value="per_use">Per Use</SelectItem>
+                <SelectItem value="none">None</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-placementStrategy">Placement Strategy</Label>
+            <Select
+              value={form.placementStrategy}
+              onValueChange={(v) => setStr("placementStrategy", v)}
+            >
+              <SelectTrigger id="fleet-placementStrategy">
+                <SelectValue placeholder="Select strategy" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="round_robin">Round Robin</SelectItem>
+                <SelectItem value="least_loaded">Least Loaded</SelectItem>
+                <SelectItem value="random">Random</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-dockerNetwork">Docker Network</Label>
+            <Input
+              id="fleet-dockerNetwork"
+              value={form.dockerNetwork}
+              onChange={(e) => setStr("dockerNetwork", e.target.value)}
+              placeholder="platform"
+            />
+          </div>
+
+          <div className="col-span-full space-y-1.5">
+            <Label htmlFor="fleet-dataDir">Fleet Data Directory</Label>
+            <Input
+              id="fleet-dataDir"
+              value={form.fleetDataDir}
+              onChange={(e) => setStr("fleetDataDir", e.target.value)}
+              placeholder="/data/fleet"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Fleet"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/nav-editor.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: string | null;
+  sortOrder: number;
+  requiresRole: string | null;
+  enabled: boolean;
+}
+
+interface NavEditorProps {
+  initial: NavItem[];
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+function newItem(sortOrder: number): NavItem {
+  return {
+    id: crypto.randomUUID(),
+    label: "",
+    href: "",
+    icon: null,
+    sortOrder,
+    requiresRole: null,
+    enabled: true,
+  };
+}
+
+export function NavEditor({ initial, onSave }: NavEditorProps) {
+  const [items, setItems] = useState<NavItem[]>(
+    [...initial].sort((a, b) => a.sortOrder - b.sortOrder),
+  );
+  const [saving, setSaving] = useState(false);
+
+  function update(id: string, patch: Partial<NavItem>) {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, ...patch } : item)));
+  }
+
+  function remove(id: string) {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  function move(index: number, direction: "up" | "down") {
+    setItems((prev) => {
+      const next = [...prev];
+      const target = direction === "up" ? index - 1 : index + 1;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next.map((item, i) => ({ ...item, sortOrder: i }));
+    });
+  }
+
+  function addItem() {
+    setItems((prev) => [...prev, newItem(prev.length)]);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const normalized = items.map((item, i) => ({ ...item, sortOrder: i }));
+      await onSave("updateNavItems", normalized);
+      toast.success("Navigation saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save navigation"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Navigation Items</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {items.length === 0 && (
+          <p className="text-sm text-muted-foreground">No navigation items. Add one below.</p>
+        )}
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className="flex items-start gap-3 rounded-md border border-border bg-muted/30 p-3"
+          >
+            <div className="flex flex-col gap-1 pt-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => move(index, "up")}
+                disabled={index === 0}
+              >
+                <ArrowUp className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => move(index, "down")}
+                disabled={index === items.length - 1}
+              >
+                <ArrowDown className="h-3 w-3" />
+              </Button>
+            </div>
+            <div className="grid flex-1 grid-cols-2 gap-2 sm:grid-cols-4">
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Label</Label>
+                <Input
+                  value={item.label}
+                  onChange={(e) => update(item.id, { label: e.target.value })}
+                  placeholder="Dashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Href</Label>
+                <Input
+                  value={item.href}
+                  onChange={(e) => update(item.id, { href: e.target.value })}
+                  placeholder="/dashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Icon</Label>
+                <Input
+                  value={item.icon ?? ""}
+                  onChange={(e) => update(item.id, { icon: e.target.value || null })}
+                  placeholder="LayoutDashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Requires Role</Label>
+                <Input
+                  value={item.requiresRole ?? ""}
+                  onChange={(e) => update(item.id, { requiresRole: e.target.value || null })}
+                  placeholder="platform_admin"
+                  className="h-8"
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-2 pt-5">
+              <Checkbox
+                id={`nav-enabled-${item.id}`}
+                checked={item.enabled}
+                onCheckedChange={(checked) => update(item.id, { enabled: Boolean(checked) })}
+              />
+              <Label htmlFor={`nav-enabled-${item.id}`} className="text-xs">
+                Enabled
+              </Label>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mt-4 h-7 w-7 p-0 text-destructive hover:text-destructive"
+              onClick={() => remove(item.id)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        ))}
+        <div className="flex items-center justify-between pt-2">
+          <Button variant="outline" size="sm" onClick={addItem}>
+            <Plus className="mr-1.5 h-4 w-4" />
+            Add Item
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Navigation"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/lib/brand-config.ts

@@ -247,3 +247,33 @@ export function eventName(event: string): string {
 export function envKey(suffix: string): string {
   return `${_config.envVarPrefix}_${suffix}`;
 }
+
+/**
+ * Fetch brand config from the platform API and apply it.
+ * Call once in root layout server component.
+ * Falls back to env var defaults if API unavailable.
+ *
+ * @param apiBaseUrl - The platform API base URL (e.g. from NEXT_PUBLIC_API_URL)
+ */
+export async function initBrandConfig(apiBaseUrl: string): Promise<void> {
+  try {
+    const res = await fetch(`${apiBaseUrl}/trpc/product.getBrandConfig`, {
+      credentials: "include",
+      next: { revalidate: 60 },
+    });
+    if (!res.ok) return;
+    const text = await res.text();
+    let json: unknown;
+    try {
+      json = JSON.parse(text);
+    } catch {
+      return; // Non-JSON response (proxy error, HTML page, etc.)
+    }
+    const data = (json as { result?: { data?: unknown } })?.result?.data;
+    if (data) {
+      setBrandConfig(data as Partial<BrandConfig>);
+    }
+  } catch {
+    // API unavailable — env var defaults remain active
+  }
+}