From 2adf76825121e1ab02d0b0f750de15e216e7cbea Mon Sep 17 00:00:00 2001
From: Aarav Sharma <iamcoder18@gmail.com>
Date: Tue, 2 Jun 2026 17:27:12 -0600
Subject: [PATCH 1/2] feat(gastown): simplify town overview header cards

---
 .../app/(app)/gastown/TownListPageClient.tsx  | 65 ++++++++-----------
 1 file changed, 26 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/app/(app)/gastown/TownListPageClient.tsx b/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
index 57e709890b..ec891c7d34 100644
--- a/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
+++ b/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
@@ -75,48 +75,35 @@ export function TownListPageClient() {
   return (
     <PageContainer>
       <GastownBackdrop contentClassName="p-5 md:p-7">
-        <div className="flex flex-col gap-3">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <SetPageTitle title="Gas Town" />
-              <p className="mt-2 max-w-2xl text-sm leading-relaxed text-white/60">
-                A chat-first orchestration console for towns, rigs, beads, and agents. Built for
-                radical transparency: every object is clickable; every outcome is attributable.
-              </p>
-            </div>
-
-            <Button
-              variant="primary"
-              size="md"
-              onClick={() => router.push('/gastown/onboarding')}
-              className="gap-2 bg-[color:oklch(95%_0.15_108_/_0.90)] text-black hover:bg-[color:oklch(95%_0.15_108_/_0.95)]"
-            >
-              <Plus className="size-5" />
-              New Town
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
+        <div className="flex flex-col gap-4">
+          <SetPageTitle title="Gas Town" />
+          <p className="max-w-2xl text-sm leading-relaxed text-white/60">
+            A chat-first orchestration console for towns, rigs, beads, and agents. Built for radical
+            transparency: every object is clickable; every outcome is attributable.
+          </p>
+
+          <div className="flex items-end gap-3">
+            <div className="min-w-[120px] rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
               <div className="text-[11px] tracking-wider text-white/40 uppercase">Towns</div>
-              <div className="mt-0.5 text-lg font-semibold text-white/85">
-                {townsQuery.isLoading ? '…' : (townsQuery.data ?? []).length}
+              <div className="mt-1 text-2xl font-semibold text-white/90">
+                {townsQuery.isLoading ? (
+                  <span className="inline-block h-5 w-6 animate-pulse rounded bg-white/20" />
+                ) : (
+                  (townsQuery.data ?? []).length
+                )}
               </div>
             </div>
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Mode</div>
-              <div className="mt-1 inline-flex items-center gap-2 text-sm text-white/70">
-                <span className="size-2 rounded-full bg-emerald-400" />
-                Live
-              </div>
-            </div>
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Core</div>
-              <div className="mt-1 text-sm text-white/70">MEOW · GUPP · NDI</div>
-            </div>
-            <div className="hidden rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 sm:block">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Promise</div>
-              <div className="mt-1 text-sm text-white/70">Discover, don’t track</div>
+
+            <div className="ml-auto">
+              <Button
+                variant="primary"
+                size="md"
+                onClick={() => router.push('/gastown/onboarding')}
+                className="gap-2 bg-[color:oklch(95%_0.15_108_/_0.90)] text-black hover:bg-[color:oklch(95%_0.15_108_/_0.95)]"
+              >
+                <Plus className="size-5" />
+                New Town
+              </Button>
             </div>
           </div>
         </div>

From ef9248a3ecbfc71c60c99f7aa930995362dcc721 Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:38:59 +0200
Subject: [PATCH 2/2] feat(gastown): align overview headers across scopes

---
 .../app/(app)/gastown/TownListPageClient.tsx  |  4 +-
 .../[id]/gastown/OrgTownListPageClient.tsx    | 61 ++++++++-----------
 2 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/app/(app)/gastown/TownListPageClient.tsx b/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
index ec891c7d34..bb2cb7ee2f 100644
--- a/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
+++ b/apps/web/src/app/(app)/gastown/TownListPageClient.tsx
@@ -82,12 +82,12 @@ export function TownListPageClient() {
             transparency: every object is clickable; every outcome is attributable.
           </p>
 
-          <div className="flex items-end gap-3">
+          <div className="flex flex-wrap items-end gap-3">
             <div className="min-w-[120px] rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
               <div className="text-[11px] tracking-wider text-white/40 uppercase">Towns</div>
               <div className="mt-1 text-2xl font-semibold text-white/90">
                 {townsQuery.isLoading ? (
-                  <span className="inline-block h-5 w-6 animate-pulse rounded bg-white/20" />
+                  <Skeleton className="h-8 w-6 bg-white/20" />
                 ) : (
                   (townsQuery.data ?? []).length
                 )}
diff --git a/apps/web/src/app/(app)/organizations/[id]/gastown/OrgTownListPageClient.tsx b/apps/web/src/app/(app)/organizations/[id]/gastown/OrgTownListPageClient.tsx
index 62fad78641..71fe8ac207 100644
--- a/apps/web/src/app/(app)/organizations/[id]/gastown/OrgTownListPageClient.tsx
+++ b/apps/web/src/app/(app)/organizations/[id]/gastown/OrgTownListPageClient.tsx
@@ -44,48 +44,35 @@ export function OrgTownListPageClient({ organizationId, role }: OrgTownListPageC
   return (
     <PageContainer>
       <GastownBackdrop contentClassName="p-5 md:p-7">
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-4">
           <SetPageTitle title="Gas Town" />
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <p className="max-w-2xl text-sm leading-relaxed text-white/60">
-                A chat-first orchestration console for towns, rigs, beads, and agents. Built for
-                radical transparency: every object is clickable; every outcome is attributable.
-              </p>
-            </div>
+          <p className="max-w-2xl text-sm leading-relaxed text-white/60">
+            A chat-first orchestration console for towns, rigs, beads, and agents. Built for radical
+            transparency: every object is clickable; every outcome is attributable.
+          </p>
 
-            <Button
-              variant="primary"
-              size="md"
-              onClick={() => router.push(onboardingUrl)}
-              className="gap-2 bg-[color:oklch(95%_0.15_108_/_0.90)] text-black hover:bg-[color:oklch(95%_0.15_108_/_0.95)]"
-            >
-              <Plus className="size-5" />
-              New Town
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
+          <div className="flex flex-wrap items-end gap-3">
+            <div className="min-w-[120px] rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
               <div className="text-[11px] tracking-wider text-white/40 uppercase">Towns</div>
-              <div className="mt-0.5 text-lg font-semibold text-white/85">
-                {townsQuery.isLoading ? '…' : (townsQuery.data ?? []).length}
-              </div>
-            </div>
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Mode</div>
-              <div className="mt-1 inline-flex items-center gap-2 text-sm text-white/70">
-                <span className="size-2 rounded-full bg-emerald-400" />
-                Live
+              <div className="mt-1 text-2xl font-semibold text-white/90">
+                {townsQuery.isLoading ? (
+                  <Skeleton className="h-8 w-6 bg-white/20" />
+                ) : (
+                  (townsQuery.data ?? []).length
+                )}
               </div>
             </div>
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Core</div>
-              <div className="mt-1 text-sm text-white/70">MEOW · GUPP · NDI</div>
-            </div>
-            <div className="hidden rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 sm:block">
-              <div className="text-[11px] tracking-wider text-white/40 uppercase">Promise</div>
-              <div className="mt-1 text-sm text-white/70">Discover, don't track</div>
+
+            <div className="ml-auto">
+              <Button
+                variant="primary"
+                size="md"
+                onClick={() => router.push(onboardingUrl)}
+                className="gap-2 bg-[color:oklch(95%_0.15_108_/_0.90)] text-black hover:bg-[color:oklch(95%_0.15_108_/_0.95)]"
+              >
+                <Plus className="size-5" />
+                New Town
+              </Button>
             </div>
           </div>
         </div>