From 223828da6c2c504364e1a6ff6321016680ca11ed Mon Sep 17 00:00:00 2001
From: Aarav Sharma <iamcoder18@gmail.com>
Date: Thu, 20 Aug 2026 21:44:33 -0600
Subject: [PATCH] chore(profile): align dev tools card with shared Card and
 Button primitives

---
 apps/web/src/app/(app)/profile/page.tsx       | 14 +++---
 .../dev/CreateKilocodeOrgButton.tsx           | 45 +++++--------------
 .../dev/DevConsumeCreditsButton.tsx           |  8 ++--
 .../components/dev/DevNukeAccountButton.tsx   | 13 +++---
 4 files changed, 28 insertions(+), 52 deletions(-)

diff --git a/apps/web/src/app/(app)/profile/page.tsx b/apps/web/src/app/(app)/profile/page.tsx
index e0b8b48be8..5970874664 100644
--- a/apps/web/src/app/(app)/profile/page.tsx
+++ b/apps/web/src/app/(app)/profile/page.tsx
@@ -53,7 +53,8 @@ export default async function ProfilePage({ searchParams }: AppPageProps) {
     ? 'Remaining Personal Credits'
     : 'Remaining Credits';
   return (
-    // NOTE: When making changes to this structure, make sure to also update the structure in the loading.tsx file
+    // NOTE: When making changes to this structure, make sure to also update the structure in the loading.tsx file.
+    // The Development Tools card below is intentionally excluded from the loading skeleton because it is dev-only.
     <PageLayout title="Profile">
       <div className="flex w-full flex-col gap-4 lg:flex-row">
         <Card className="flex-1 rounded-xl shadow-sm">
@@ -147,29 +148,30 @@ export default async function ProfilePage({ searchParams }: AppPageProps) {
         </Card> */}
 
       {process.env.NODE_ENV === 'development' && process.env.DEBUG_SHOW_DEV_UI && (
-        <Card className="w-full rounded-xl border-red-800 bg-red-950/50 shadow lg:w-1/2">
+        <Card className="w-full">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-red-200">
+            <CardTitle className="flex items-center gap-2">
               <Wrench className="h-5 w-5" />
               Development Tools
             </CardTitle>
-            <CardDescription className="text-red-300">
+            <CardDescription>
               These tools are only available in development mode.
             </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="flex flex-col gap-4">
               <div className="flex flex-col gap-2">
-                <p className="text-muted-foreground text-sm font-medium">Consume Credits</p>
+                <p className="text-muted-foreground type-label">Consume credits</p>
                 <DevConsumeCreditsButton />
               </div>
               <Separator />
               <div className="flex flex-col gap-2">
+                <p className="text-muted-foreground type-label">Dev organization</p>
                 <CreateKilocodeOrgButton />
               </div>
               <Separator />
               <div className="flex flex-col gap-2">
-                <p className="text-muted-foreground text-sm font-medium">Danger Zone</p>
+                <p className="text-destructive type-label">Danger zone</p>
                 <DevNukeAccountButton kiloUserId={user.id} />
               </div>
             </div>
diff --git a/apps/web/src/components/dev/CreateKilocodeOrgButton.tsx b/apps/web/src/components/dev/CreateKilocodeOrgButton.tsx
index f70517a219..ba4d32de24 100644
--- a/apps/web/src/components/dev/CreateKilocodeOrgButton.tsx
+++ b/apps/web/src/components/dev/CreateKilocodeOrgButton.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
 
 export function CreateKilocodeOrgButton() {
   const [isLoading, setIsLoading] = useState(false);
@@ -44,38 +45,14 @@ export function CreateKilocodeOrgButton() {
   };
 
   return (
-    <div className="relative">
-      {/* Goofy brown tilted banner */}
-      <div
-        className="absolute -top-4 -left-2 z-10"
-        style={{
-          filter: 'drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5))',
-          transform: 'translateZ(0)',
-        }}
-      >
-        <h3
-          className="-rotate-[8deg] bg-amber-900 px-2 text-lg font-bold text-amber-200"
-          style={{
-            fontFamily: "'Marker Felt', 'Comic Sans MS', 'cursive'",
-            clipPath: 'polygon(0% 2%,20% 0%, 55% 7%,65% 0%,70% 4%, 98% 0, 100% 97%, 2% 100%)',
-          }}
-        >
-          <span className="text-2xl">🔧</span> DEV
-        </h3>
-      </div>
-      <button
-        type="button"
-        onClick={handleCreateOrg}
-        disabled={isLoading}
-        className="border-primary bg-primary text-primary-foreground hover:bg-primary-hover focus-visible:ring-ring relative inline-flex h-9 w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-md border px-4 py-2 text-sm font-medium shadow-sm transition-all hover:shadow-md focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-        style={{
-          backgroundImage:
-            'repeating-linear-gradient(-45deg, transparent, transparent 5px, color-mix(in oklab, var(--primary-foreground) 18%, transparent) 5px, color-mix(in oklab, var(--primary-foreground) 18%, transparent) 10px)',
-          fontFamily: "'Comic Sans MS', 'Marker Felt', cursive",
-        }}
-      >
-        {isLoading ? 'Creating...' : 'Force Create and Join Kilocode Org'}
-      </button>
-    </div>
+    <Button
+      type="button"
+      variant="secondary"
+      onClick={handleCreateOrg}
+      disabled={isLoading}
+      className="w-full"
+    >
+      {isLoading ? 'Creating...' : 'Create dev organization'}
+    </Button>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/components/dev/DevConsumeCreditsButton.tsx b/apps/web/src/components/dev/DevConsumeCreditsButton.tsx
index 90173fe49c..53907b0f72 100644
--- a/apps/web/src/components/dev/DevConsumeCreditsButton.tsx
+++ b/apps/web/src/components/dev/DevConsumeCreditsButton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/Button';
+import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DollarSign } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -72,13 +72,11 @@ export function DevConsumeCreditsButton() {
         <Button
           type="button"
           variant="secondary"
-          size="md"
-          className="flex items-center"
           onClick={handleConsume}
           disabled={isLoading || !amount}
         >
-          <DollarSign className="mr-2 h-4 w-4" />
-          {isLoading ? 'Consuming... (very slow, be patient)' : 'Consume'}
+          <DollarSign />
+          {isLoading ? 'Consuming…' : 'Consume'}
         </Button>
       </div>
       {amountError && (
diff --git a/apps/web/src/components/dev/DevNukeAccountButton.tsx b/apps/web/src/components/dev/DevNukeAccountButton.tsx
index daae5d6bf9..5b156ab0fb 100644
--- a/apps/web/src/components/dev/DevNukeAccountButton.tsx
+++ b/apps/web/src/components/dev/DevNukeAccountButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/components/ui/button';
 import { AlertTriangle } from 'lucide-react';
 import { nuke } from './actions';
 
@@ -10,16 +10,15 @@ export function DevNukeAccountButton({ kiloUserId: _kiloUserId }: { kiloUserId?:
   return (
     <Button
       type="button"
-      variant="danger"
-      size="md"
-      className="flex h-12 w-full max-w-[272px] cursor-pointer items-center justify-center"
-      data-test-id="nuke-account-button"
+      variant="destructive"
       onClick={() => {
         void nuke();
       }}
+      data-test-id="nuke-account-button"
+      className="w-full"
     >
-      <AlertTriangle className="mx-2 h-5 w-5" />
-      Nuke Account
+      <AlertTriangle />
+      Reset account
     </Button>
   );
 }