Skip to content

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

Open
kilo-code-bot[bot] wants to merge 2 commits intomainfrom
feat/profile-kiloclaw-banner
Open

feat(profile): add KiloClaw banner/CTA to profile page#1382
kilo-code-bot[bot] wants to merge 2 commits intomainfrom
feat/profile-kiloclaw-banner

Conversation

@kilo-code-bot
Copy link
Contributor

@kilo-code-bot kilo-code-bot bot commented Mar 23, 2026

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 "Open Dashboard" 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

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

Visual Changes

N/A — no screenshots available in this environment. The banner renders:

  • No instance: Blue-tinted banner with Server icon, "Get started with KiloClaw" heading, description text, and "Get Started" outlined button
  • Has instance: Green-tinted banner with Server icon, "KiloClaw is running" heading, description text, and "Open Dashboard" outlined button

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

Add a contextual KiloClaw banner to the /profile page that adapts based
on whether the user has an existing KiloClaw instance. New users see a
'Get Started' CTA linking to /claw, while existing users see an
'Open Dashboard' CTA to manage their instance.
return null;
}

const hasInstance = billing.instance !== null && billing.instance.exists;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WARNING: This treats any non-destroyed instance as "running"

getBillingStatus() sets instance.exists based only on whether the row is destroyed, not whether the user still has access or the worker is actually running. Users with an expired trial, canceled subscription, or past-due suspension can still have exists === true, so this branch will show the green success banner even though the /claw page immediately locks them out. Please gate the success state on billing/access state (and only use "running" copy when we know the instance is actually active).

@kilo-code-bot
Copy link
Contributor Author

kilo-code-bot bot commented Mar 23, 2026

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 files)
  • src/components/profile/ProfileKiloClawBanner.tsx

Reviewed by gpt-5.4-20260305 · 163,433 tokens

…ce existence

The green 'active' banner now only shows when the user has both an
existing instance AND valid billing access (hasAccess). Users with an
instance but lapsed access (expired trial, canceled subscription,
past-due suspension) see an amber warning banner directing them to
resolve billing on /claw.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant