feat(usage): add Active KiloClaws table to organization page (#3579)

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
Co-authored-by: Alex Gold <alex.gold@kilocode.ai>
Co-authored-by: Jean du Plessis <jeandp@gmail.com>

Author: 3 people

apps/web/src/components/organizations/OrgActiveKiloclawsCard.tsx

@@ -0,0 +1,85 @@
+'use client';
+import { AlertTriangle, Users } from 'lucide-react';
+import { useTRPC } from '@/lib/trpc/utils';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+type Props = {
+  organizationId: string;
+};
+
+export function OrgActiveKiloclawsCard({ organizationId }: Props) {
+  const trpc = useTRPC();
+  const { data, isLoading, isError } = useQuery(
+    trpc.organizations.kiloclaw.listActiveInstances.queryOptions({ organizationId })
+  );
+
+  const activeEmails = [...new Set(data?.filter(i => !i.isSuspended).map(i => i.userEmail) ?? [])];
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex min-h-8 items-center gap-2">
+          <Users className="h-4 w-4" />
+          <CardTitle>Active KiloClaws</CardTitle>
+        </div>
+        {!isLoading && !isError && (
+          <CardDescription className="text-xs">
+            You have {activeEmails.length} active KiloClaw
+            {activeEmails.length !== 1 ? 's' : ''} in this organization
+          </CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="pt-0">
+        {isLoading ? (
+          <div className="space-y-2 p-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-4/5" />
+          </div>
+        ) : isError ? (
+          <div className="flex items-start gap-3 px-4 pb-4 pt-2 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+            <p className="text-muted-foreground">
+              Unable to load active KiloClaw instances. Please try again later.
+            </p>
+          </div>
+        ) : activeEmails.length === 0 ? (
+          <p className="text-muted-foreground px-4 pb-4 pt-2 text-sm">
+            No active KiloClaw instances in this organization.
+          </p>
+        ) : (
+          <Table className="table-fixed">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full px-6 text-muted-foreground text-xs font-normal">
+                  Owner
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {activeEmails.map(email => (
+                <TableRow key={email}>
+                  <TableCell className="max-w-0 px-6 text-sm">
+                    <span className="block truncate" title={email}>
+                      {email}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/organizations/OrganizationDashboard.tsx

@@ -18,6 +18,7 @@ import { useOrganizationWithMembers } from '@/app/api/organizations/hooks';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { MessageCircleQuestion, Terminal } from 'lucide-react';
 import { OrganizationProvidersAndModelsConfigurationCard } from '@/components/organizations/OrganizationProvidersAndModelsConfigurationCard';
+import { OrgActiveKiloclawsCard } from '@/components/organizations/OrgActiveKiloclawsCard';
 import { OpenInExtensionButton } from '@/components/auth/OpenInExtensionButton';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -159,6 +160,9 @@ export function OrganizationDashboard({
               <OrganizationAdminMembers organizationId={organizationId} />
             </LockableContainer>
             <SeatUsageCard organizationId={organizationId} />
+            {(currentRole === 'owner' || currentRole === 'billing_manager') && (
+              <OrgActiveKiloclawsCard organizationId={organizationId} />
+            )}
             {organizationData?.plan === 'enterprise' && (
               <LockableContainer>
                 <SSOSignupCard organization={organizationData} role={currentRole} />

apps/web/src/components/usage-analytics/ActiveKiloclawsTable.tsx

@@ -0,0 +1,113 @@
+'use client';
+import { useTRPC } from '@/lib/trpc/utils';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatIsoDateString_UsaDateOnlyFormat } from '@/lib/utils';
+import { AlertTriangle } from 'lucide-react';
+
+type ActiveKiloclawsTableProps = {
+  organizationId: string;
+};
+
+export function ActiveKiloclawsTable({ organizationId }: ActiveKiloclawsTableProps) {
+  const trpc = useTRPC();
+  const { data, isLoading, isError } = useQuery(
+    trpc.organizations.kiloclaw.listActiveInstances.queryOptions({
+      organizationId,
+    })
+  );
+
+  const instanceCount = data?.length ?? 0;
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">
+          Active KiloClaws
+          {!isLoading && !isError && (
+            <span className="text-muted-foreground ml-2 text-sm font-normal">
+              {instanceCount} {instanceCount === 1 ? 'instance' : 'instances'}
+            </span>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        {isLoading ? (
+          <div className="space-y-2 p-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-4/5" />
+          </div>
+        ) : isError ? (
+          <div className="flex items-start gap-3 px-4 pb-4 pt-2 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+            <p className="text-muted-foreground">
+              Unable to load active KiloClaw instances. Please try again later.
+            </p>
+          </div>
+        ) : instanceCount === 0 ? (
+          <p className="text-muted-foreground px-4 pb-4 pt-2 text-sm">
+            No active KiloClaw instances in this organization.
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table className="min-w-[680px] table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[40%]">User</TableHead>
+                  <TableHead className="w-[30%]">Instance Name</TableHead>
+                  <TableHead className="w-[18%]">Created</TableHead>
+                  <TableHead className="w-[12%]">Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data?.map(instance => (
+                  <TableRow key={instance.id}>
+                    <TableCell className="max-w-0 text-sm">
+                      <span className="block truncate" title={instance.userEmail}>
+                        {instance.userEmail}
+                      </span>
+                    </TableCell>
+                    <TableCell className="max-w-0 text-sm">
+                      {instance.name ? (
+                        <span className="block truncate" title={instance.name}>
+                          {instance.name}
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {formatIsoDateString_UsaDateOnlyFormat(instance.createdAt)}
+                    </TableCell>
+                    <TableCell>
+                      {instance.isSuspended ? (
+                        <Badge variant="destructive" className="text-xs">
+                          Suspended
+                        </Badge>
+                      ) : (
+                        <Badge variant="secondary" className="text-xs">
+                          Active
+                        </Badge>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/usage-analytics/UsageAnalyticsDashboard.tsx

@@ -21,6 +21,7 @@ import { PrimaryChart } from './PrimaryChart';
 import { BreakdownPieChart } from './BreakdownPieChart';
 import { BreakdownBarChart } from './BreakdownBarChart';
 import { AIAdoptionScoreCard } from './AIAdoptionScoreCard';
+import { ActiveKiloclawsTable } from './ActiveKiloclawsTable';
 import {
   PERSONAL_VIEW_ALL_USAGE,
   PERSONAL_VIEW_PERSONAL_ONLY,
@@ -606,6 +607,12 @@ export function UsageAnalyticsDashboard({
                 </Button>
               }
             />
+
+            {isOrgContext &&
+              organizationId &&
+              (callerRole === 'owner' || callerRole === 'billing_manager') && (
+                <ActiveKiloclawsTable organizationId={organizationId} />
+              )}
           </div>
         </div>
       </div>

apps/web/src/routers/organizations/organization-kiloclaw-router.test.ts

@@ -6,6 +6,7 @@ import { cleanupDbForTest, db } from '@/lib/drizzle';
 import { insertTestUser } from '@/tests/helpers/user.helper';
 import { createOrganization } from '@/lib/organizations/organizations';
 import type { createCallerForUser as TestUtilsCallerFactory } from '@/routers/test-utils';
+import { LEGACY_KILOCLAW_PRICE_VERSION } from '@kilocode/db';
 import {
   kiloclaw_image_catalog,
   kiloclaw_instances,
@@ -17,6 +18,9 @@ import {
 } from '@kilocode/db/schema';
 import { and, eq } from 'drizzle-orm';
 
+(kiloclaw_subscriptions.kiloclaw_price_version as { defaultFn: () => string }).defaultFn = () =>
+  LEGACY_KILOCLAW_PRICE_VERSION;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyMock = jest.Mock<(...args: any[]) => any>;
 
@@ -165,6 +169,76 @@ async function addOrganizationSeatEntitlement(organizationId: string): Promise<v
   });
 }
 
+describe('organizations.kiloclaw.listActiveInstances', () => {
+  beforeEach(async () => {
+    await cleanupDbForTest();
+  });
+
+  it('excludes orphan and destroyed organization instances', async () => {
+    const user = await insertTestUser({
+      google_user_email: `org-kiloclaw-list-${crypto.randomUUID()}@example.com`,
+    });
+    const organization = await createOrganization('Org KiloClaw List Test', user.id);
+    await createActiveOrgInstance(user.id, organization.id);
+    const activeInstanceId = await createActiveOrgInstance(user.id, organization.id);
+    const suspendedInstanceId = await createActiveOrgInstance(user.id, organization.id);
+    const destroyedInstanceId = await createActiveOrgInstance(user.id, organization.id);
+
+    await db.insert(kiloclaw_subscriptions).values([
+      {
+        user_id: user.id,
+        instance_id: activeInstanceId,
+        plan: 'standard',
+        status: 'active',
+        payment_source: 'credits',
+        cancel_at_period_end: false,
+      },
+      {
+        user_id: user.id,
+        instance_id: suspendedInstanceId,
+        plan: 'standard',
+        status: 'canceled',
+        payment_source: 'credits',
+        cancel_at_period_end: false,
+        suspended_at: '2026-05-28T00:00:00.000Z',
+      },
+      {
+        user_id: user.id,
+        instance_id: destroyedInstanceId,
+        plan: 'standard',
+        status: 'active',
+        payment_source: 'credits',
+        cancel_at_period_end: false,
+      },
+    ]);
+    await db
+      .update(kiloclaw_instances)
+      .set({ destroyed_at: '2026-05-28T00:00:00.000Z' })
+      .where(eq(kiloclaw_instances.id, destroyedInstanceId));
+
+    const caller = await createCallerForUser(user.id);
+    const result = await caller.organizations.kiloclaw.listActiveInstances({
+      organizationId: organization.id,
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: activeInstanceId,
+          userEmail: user.google_user_email,
+          isSuspended: false,
+        }),
+        expect.objectContaining({
+          id: suspendedInstanceId,
+          userEmail: user.google_user_email,
+          isSuspended: true,
+        }),
+      ])
+    );
+  });
+});
+
 describe('organization kiloclaw destroy', () => {
   beforeEach(async () => {
     await cleanupDbForTest();

apps/web/src/routers/organizations/organization-kiloclaw-router.ts

@@ -29,8 +29,11 @@ import {
   kiloclaw_version_pins,
   kiloclaw_image_catalog,
   kiloclaw_cli_runs,
+  kiloclaw_instances,
+  kiloclaw_subscriptions,
+  kilocode_users,
 } from '@kilocode/db/schema';
-import { and, eq, desc, sql } from 'drizzle-orm';
+import { and, eq, desc, sql, isNull } from 'drizzle-orm';
 import type { KiloClawDashboardStatus, KiloCodeConfigResponse } from '@/lib/kiloclaw/types';
 import { cancelCliRun, createCliRun, getCliRunStatus } from '@/lib/kiloclaw/cli-runs';
 import { queryDiskUsage } from '@/lib/kiloclaw/disk-usage';
@@ -54,6 +57,7 @@ import { encryptProvisionSecretsForWorker } from '@/lib/kiloclaw/provision-secre
 import {
   organizationMemberProcedure,
   organizationMemberMutationProcedure,
+  organizationBillingProcedure,
 } from '@/routers/organizations/utils';
 import { requireOrganizationKiloClawComputeEntitlement } from '@/lib/organizations/trial-middleware';
 
@@ -1573,4 +1577,38 @@ export const organizationKiloclawRouter = createTRPCRouter({
         handleFileOperationError(err, 'patch openclaw config');
       }
     }),
+
+  // ── Org-wide instance list (owner / billing_manager only) ─────
+
+  listActiveInstances: organizationBillingProcedure.query(async ({ input }) => {
+    const rows = await db
+      .select({
+        id: kiloclaw_instances.id,
+        name: kiloclaw_instances.name,
+        createdAt: kiloclaw_instances.created_at,
+        userEmail: kilocode_users.google_user_email,
+        suspendedAt: kiloclaw_subscriptions.suspended_at,
+      })
+      .from(kiloclaw_instances)
+      .innerJoin(kilocode_users, eq(kiloclaw_instances.user_id, kilocode_users.id))
+      .innerJoin(
+        kiloclaw_subscriptions,
+        eq(kiloclaw_subscriptions.instance_id, kiloclaw_instances.id)
+      )
+      .where(
+        and(
+          eq(kiloclaw_instances.organization_id, input.organizationId),
+          isNull(kiloclaw_instances.destroyed_at)
+        )
+      )
+      .orderBy(kiloclaw_instances.created_at);
+
+    return rows.map(row => ({
+      id: row.id,
+      name: row.name,
+      createdAt: new Date(row.createdAt).toISOString(),
+      userEmail: row.userEmail,
+      isSuspended: row.suspendedAt !== null,
+    }));
+  }),
 });