feat(profile): add KiloClaw banner/CTA to profile page (#1382)

## Summary

- Add a contextual KiloClaw banner to the `/profile` page that adapts
based on the user's KiloClaw instance state
- Users without a KiloClaw instance see a blue "Get started with
KiloClaw" CTA with a brief description and a "Get Started" button
linking to `/claw`
- Users with an existing instance see a green "KiloClaw is running"
banner with an "Go to KiloClaw" button linking to `/claw`
- The banner is a client component that queries
`trpc.kiloclaw.getBillingStatus` to detect instance state, consistent
with the existing pattern in `src/app/(app)/claw/page.tsx`

## Verification

- [x] `pnpm typecheck` — passes with no errors in root project
- [x] `oxfmt --list-different .` — passes (code is formatted)
- [x] `oxlint` — passes with 0 warnings and 0 errors

## Visual Changes

- **No instance**: 
<img width="1136" height="579" alt="image"
src="https://github.com/user-attachments/assets/53698d51-1928-44d1-a64d-1c93e75a6ebb"
/>


- **Has instance**: 
<img width="1202" height="546" alt="image"
src="https://github.com/user-attachments/assets/72505b56-f678-4f2c-b056-665c7d78df97"
/>


## Reviewer Notes

- Positioned between the Kilo Pass section and the Organizations section
for visibility without disrupting the existing credit/billing flow
- Uses the same `trpc.kiloclaw.getBillingStatus` query that the `/claw`
page uses, so no new API surface is introduced
- Shows a subtle loading spinner while billing status loads; silently
hides on error to avoid blocking the profile page
- Design follows the existing banner pattern (e.g.,
`InsufficientBalanceBanner`, `BillingBanner`) using color-coded
border/bg with icon, text, and action button

Author: evanjacobson

src/app/(app)/profile/page.tsx

@@ -23,6 +23,7 @@ import { ProfileKiloPassSection } from '@/components/profile/ProfileKiloPassSect
 import { CreateKilocodeOrgButton } from '@/components/dev/CreateKilocodeOrgButton';
 import { isFeatureFlagEnabled } from '@/lib/posthog-feature-flags';
 import { UserProfileCard } from '@/components/profile/UserProfileCard';
+import { ProfileKiloClawBanner } from '@/components/profile/ProfileKiloClawBanner';
 
 export default async function ProfilePage({ searchParams }: AppPageProps) {
   const user = await getUserFromAuthOrRedirect('/users/sign_in');
@@ -42,6 +43,8 @@ export default async function ProfilePage({ searchParams }: AppPageProps) {
   return (
     // NOTE: When making changes to this structure, make sure to also update the structure in the loading.tsx file
     <PageLayout title="Profile">
+      <ProfileKiloClawBanner />
+
       <div className="flex w-full flex-col gap-4 lg:flex-row">
         <Card className="flex-1 rounded-xl shadow-sm">
           <CardContent className="p-6">

src/components/profile/ProfileKiloClawBanner.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { ArrowRight, Loader2, AlertTriangle } from 'lucide-react';
+import Link from 'next/link';
+import { useTRPC } from '@/lib/trpc/utils';
+import { Button } from '@/components/ui/button';
+import KiloCrabIcon from '@/components/KiloCrabIcon';
+
+export function ProfileKiloClawBanner() {
+  const trpc = useTRPC();
+  const billingQuery = useQuery(trpc.kiloclaw.getBillingStatus.queryOptions());
+
+  if (billingQuery.isLoading) {
+    return (
+      <div className="flex w-full items-center justify-center rounded-lg border border-blue-500/20 bg-blue-500/5 p-6">
+        <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+      </div>
+    );
+  }
+
+  const billing = billingQuery.data;
+  if (billingQuery.isError || !billing) {
+    return null;
+  }
+
+  const hasInstance = billing.instance !== null && billing.instance.exists;
+
+  if (hasInstance && billing.hasAccess) {
+    return (
+      <div className="flex w-full items-center gap-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-5">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-500/20">
+          <KiloCrabIcon className="h-5 w-5 text-emerald-400" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold text-emerald-100">Your KiloClaw instance is active</p>
+          <p className="text-sm text-emerald-300/80">
+            Manage your instance, configure integrations, and monitor your Claw.
+          </p>
+        </div>
+        <Button
+          asChild
+          variant="outline"
+          className="shrink-0 border-emerald-500/40 text-emerald-200 hover:bg-emerald-500/20 hover:text-emerald-100"
+        >
+          <Link href="/claw">
+            Go to KiloClaw
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  if (hasInstance && !billing.hasAccess) {
+    return (
+      <div className="flex w-full items-center gap-4 rounded-lg border border-amber-500/30 bg-amber-500/10 p-5">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-amber-500/20">
+          <AlertTriangle className="h-5 w-5 text-amber-400" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold text-amber-100">
+            Your KiloClaw instance needs attention
+          </p>
+          <p className="text-sm text-amber-300/80">
+            Your access has lapsed. Visit the dashboard to resolve billing and restore your
+            instance.
+          </p>
+        </div>
+        <Button
+          asChild
+          variant="outline"
+          className="shrink-0 border-amber-500/40 text-amber-200 hover:bg-amber-500/20 hover:text-amber-100"
+        >
+          <Link href="/claw">
+            Resolve
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full items-center gap-4 rounded-lg border border-blue-500/30 bg-blue-500/10 p-5">
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-500/20">
+        <KiloCrabIcon className="h-5 w-5 text-blue-400" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-semibold text-blue-100">Get started with KiloClaw</p>
+        <p className="text-sm text-blue-300/80">
+          Fully-managed OpenClaw, always online. Set up in minutes.
+        </p>
+      </div>
+      <Button
+        asChild
+        variant="outline"
+        className="shrink-0 border-blue-500/40 text-blue-200 hover:bg-blue-500/20 hover:text-blue-100"
+      >
+        <Link href="/claw">
+          Get Started
+          <ArrowRight className="h-4 w-4" />
+        </Link>
+      </Button>
+    </div>
+  );
+}