From d066379b0bb8aa207bfc3b441b878c7c4c660a17 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 20 Mar 2026 10:57:56 -0400
Subject: [PATCH 01/24] tempoarry rmeove usage; was not a great page; move to
 invoice for non-free trial plans

---
 .../billing/plans/CancelledTeamPlan.svelte    | 18 ++++++++++++
 .../billing/plans/EnterprisePlan.svelte       |  1 +
 .../src/features/billing/plans/POCPlan.svelte | 18 ++++++++++++
 .../features/billing/plans/TeamPlan.svelte    | 23 +++++++++++----
 .../[organization]/-/settings/+layout.svelte  | 11 +------
 .../-/settings/billing/+page.svelte           |  2 ++
 .../-/settings/usage/+page.svelte             | 29 -------------------
 .../[organization]/-/settings/usage/+page.ts  | 16 ----------
 8 files changed, 58 insertions(+), 60 deletions(-)
 delete mode 100644 web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
 delete mode 100644 web-admin/src/routes/[organization]/-/settings/usage/+page.ts

diff --git a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
index 27acfbb3b09..9b4f038ec5b 100644
--- a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
@@ -12,6 +12,7 @@
   export let organization: string;
   export let plan: V1BillingPlan;
   export let showUpgradeDialog: boolean;
+  export let billingPortalUrl: string | undefined;
 
   $: categorisedIssues = useCategorisedOrganizationBillingIssues(organization);
   $: cancelledSubIssue = $categorisedIssues.data?.cancelled;
@@ -40,6 +41,14 @@
           and your subscription has ended.
         {/if}
       </div>
+      {#if billingPortalUrl}
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      {/if}
       {#if plan}
         <!-- if there is no plan then quotas will be set to 0. It doesnt make sense to show this then -->
         <PlanQuotas {organization} />
@@ -64,3 +73,12 @@
     endDate={cancelledSubIssue?.metadata.subscriptionCancelled?.endDate}
   />
 {/if}
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/EnterprisePlan.svelte b/web-admin/src/features/billing/plans/EnterprisePlan.svelte
index 2d4fc2378db..48b1962adc2 100644
--- a/web-admin/src/features/billing/plans/EnterprisePlan.svelte
+++ b/web-admin/src/features/billing/plans/EnterprisePlan.svelte
@@ -6,6 +6,7 @@
 
   export let organization: string;
   export let plan: V1BillingPlan;
+
 </script>
 
 <SettingsContainer title={plan?.displayName}>
diff --git a/web-admin/src/features/billing/plans/POCPlan.svelte b/web-admin/src/features/billing/plans/POCPlan.svelte
index 399be5a00de..d838b885584 100644
--- a/web-admin/src/features/billing/plans/POCPlan.svelte
+++ b/web-admin/src/features/billing/plans/POCPlan.svelte
@@ -9,6 +9,7 @@
   export let organization: string;
   export let hasPayment: boolean;
   export let plan: V1BillingPlan;
+  export let billingPortalUrl: string | undefined;
 
   let open = false;
 </script>
@@ -16,6 +17,14 @@
 <SettingsContainer title={plan?.displayName}>
   <div slot="body">
     <div>You're currently on a custom contract.</div>
+    {#if billingPortalUrl}
+      <a
+        href={billingPortalUrl}
+        target="_blank"
+        rel="noreferrer noopener"
+        class="invoice-link">View Invoice</a
+      >
+    {/if}
     <PlanQuotas {organization} />
   </div>
   <svelte:fragment slot="contact">
@@ -32,3 +41,12 @@
 </SettingsContainer>
 
 <StartTeamPlanDialog bind:open {organization} type="base" />
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/TeamPlan.svelte b/web-admin/src/features/billing/plans/TeamPlan.svelte
index c811c717e10..ec68f4fe5bb 100644
--- a/web-admin/src/features/billing/plans/TeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/TeamPlan.svelte
@@ -27,6 +27,7 @@
   export let organization: string;
   export let subscription: V1Subscription;
   export let plan: V1BillingPlan;
+  export let billingPortalUrl: string | undefined;
 
   $: planCanceller = createAdminServiceCancelBillingSubscription();
   async function handleCancelPlan() {
@@ -55,11 +56,14 @@
   <div slot="body">
     Next billing cycle will start on
     <b>{getNextBillingCycleDate(subscription.currentBillingCycleEndDate)}</b>.
-    <a
-      href="https://www.rilldata.com/pricing"
-      target="_blank"
-      rel="noreferrer noopener">See pricing details -></a
-    >
+    {#if billingPortalUrl}
+      <a
+        href={billingPortalUrl}
+        target="_blank"
+        rel="noreferrer noopener"
+        class="invoice-link">View Invoice</a
+      >
+    {/if}
     <PlanQuotas {organization} />
   </div>
   <svelte:fragment slot="contact">
@@ -101,3 +105,12 @@
     </AlertDialogContent>
   </AlertDialog>
 </SettingsContainer>
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index df19f8eef8f..38c5b09a165 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -3,20 +3,16 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
-  import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils";
   import type { PageData } from "./$types";
   import ContentContainer from "@rilldata/web-admin/components/layout/ContentContainer.svelte";
 
   export let data: PageData;
 
-  $: ({ subscription, neverSubscribed, billingPortalUrl } = data);
+  $: ({ subscription, neverSubscribed } = data);
 
   $: organization = $page.params.organization;
   $: basePage = `/${organization}/-/settings`;
-  $: onEnterprisePlan =
-    subscription?.plan?.name && isEnterprisePlan(subscription.plan.name);
   $: hideBillingSettings = neverSubscribed;
-  $: hideUsageSettings = onEnterprisePlan || !billingPortalUrl;
 
   $: navItems = [
     { label: "General", route: "", hasPermission: true },
@@ -25,11 +21,6 @@
       route: "/billing",
       hasPermission: !hideBillingSettings,
     },
-    {
-      label: "Usage",
-      route: "/usage",
-      hasPermission: !hideBillingSettings && !hideUsageSettings,
-    },
   ];
 </script>
 
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 595b023f850..b53bbb46d6b 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -27,6 +27,8 @@
   <Spinner status={EntityStatus.Running} size="16px" />
 {:else}
   <Plan {organization} {showUpgradeDialog} />
+
   <Payment {organization} />
   <BillingContactSetting {organization} />
 {/if}
+
diff --git a/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
deleted file mode 100644
index 04bb3175c23..00000000000
--- a/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
-  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import type { PageData } from "./$types";
-
-  export let data: PageData;
-
-  let iframeLoading = true;
-
-  // credentialless is not standard and throws lint error, but it works on chrome and safari for now.
-  const iframeProps = {
-    credentialless: true,
-  };
-</script>
-
-{#if iframeLoading}
-  <Spinner status={EntityStatus.Running} size="16px" />
-{/if}
-
-<iframe
-  {...iframeProps}
-  src={data.billingPortalUrl}
-  title="Orb Billing Portal"
-  class="w-full h-[1000px]"
-  on:load={() => (iframeLoading = false)}
-/>
-
-<style lang="postcss">
-</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/usage/+page.ts b/web-admin/src/routes/[organization]/-/settings/usage/+page.ts
deleted file mode 100644
index 92aedd23461..00000000000
--- a/web-admin/src/routes/[organization]/-/settings/usage/+page.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils";
-import { error, redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ params: { organization }, parent }) => {
-  const { subscription, billingPortalUrl } = await parent();
-
-  if (!billingPortalUrl) {
-    throw redirect(307, `/${organization}/-/settings`);
-  }
-
-  // Orgs on an Enterprise Plan should not see this page
-  if (subscription?.plan && isEnterprisePlan(subscription.plan.name)) {
-    throw error(404, "Page not found");
-  }
-};

From 704db5291aa771e0b824a90c47980b2c287b0aaa Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:02:35 -0400
Subject: [PATCH 02/24] prettier

---
 .../billing/plans/CancelledTeamPlan.svelte         | 14 ++++++++------
 .../features/billing/plans/EnterprisePlan.svelte   |  1 -
 .../src/features/billing/plans/POCPlan.svelte      | 14 ++++++++------
 web-admin/src/features/billing/plans/Plan.svelte   | 12 +++++++++---
 .../src/features/billing/plans/TeamPlan.svelte     | 14 ++++++++------
 .../[organization]/-/settings/billing/+page.svelte |  5 ++---
 6 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
index 9b4f038ec5b..a91cbd19126 100644
--- a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
@@ -42,12 +42,14 @@
         {/if}
       </div>
       {#if billingPortalUrl}
-        <a
-          href={billingPortalUrl}
-          target="_blank"
-          rel="noreferrer noopener"
-          class="invoice-link">View Invoice</a
-        >
+        <div>
+          <a
+            href={billingPortalUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+            class="invoice-link">View Invoice</a
+          >
+        </div>
       {/if}
       {#if plan}
         <!-- if there is no plan then quotas will be set to 0. It doesnt make sense to show this then -->
diff --git a/web-admin/src/features/billing/plans/EnterprisePlan.svelte b/web-admin/src/features/billing/plans/EnterprisePlan.svelte
index 48b1962adc2..2d4fc2378db 100644
--- a/web-admin/src/features/billing/plans/EnterprisePlan.svelte
+++ b/web-admin/src/features/billing/plans/EnterprisePlan.svelte
@@ -6,7 +6,6 @@
 
   export let organization: string;
   export let plan: V1BillingPlan;
-
 </script>
 
 <SettingsContainer title={plan?.displayName}>
diff --git a/web-admin/src/features/billing/plans/POCPlan.svelte b/web-admin/src/features/billing/plans/POCPlan.svelte
index d838b885584..94c34a5ee3c 100644
--- a/web-admin/src/features/billing/plans/POCPlan.svelte
+++ b/web-admin/src/features/billing/plans/POCPlan.svelte
@@ -18,12 +18,14 @@
   <div slot="body">
     <div>You're currently on a custom contract.</div>
     {#if billingPortalUrl}
-      <a
-        href={billingPortalUrl}
-        target="_blank"
-        rel="noreferrer noopener"
-        class="invoice-link">View Invoice</a
-      >
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
     {/if}
     <PlanQuotas {organization} />
   </div>
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index ce9c2192e3c..2b3f08f0ae3 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -13,6 +13,7 @@
 
   export let organization: string;
   export let showUpgradeDialog: boolean;
+  export let billingPortalUrl: string | undefined;
 
   $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization);
   $: subscription = $subscriptionQuery?.data?.subscription;
@@ -38,11 +39,16 @@
 {:else if isTrial}
   <TrialPlan {organization} {subscription} {showUpgradeDialog} {plan} />
 {:else if subHasEnded}
-  <CancelledTeamPlan {organization} {showUpgradeDialog} {plan} />
+  <CancelledTeamPlan
+    {organization}
+    {showUpgradeDialog}
+    {plan}
+    {billingPortalUrl}
+  />
 {:else if subIsTeamPlan}
-  <TeamPlan {organization} {subscription} {plan} />
+  <TeamPlan {organization} {subscription} {plan} {billingPortalUrl} />
 {:else if subIsManagedPlan}
-  <POCPlan {organization} {hasPayment} {plan} />
+  <POCPlan {organization} {hasPayment} {plan} {billingPortalUrl} />
 {:else if subIsEnterprisePlan}
   <EnterprisePlan {organization} {plan} />
 {/if}
diff --git a/web-admin/src/features/billing/plans/TeamPlan.svelte b/web-admin/src/features/billing/plans/TeamPlan.svelte
index ec68f4fe5bb..27fb7bff096 100644
--- a/web-admin/src/features/billing/plans/TeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/TeamPlan.svelte
@@ -57,12 +57,14 @@
     Next billing cycle will start on
     <b>{getNextBillingCycleDate(subscription.currentBillingCycleEndDate)}</b>.
     {#if billingPortalUrl}
-      <a
-        href={billingPortalUrl}
-        target="_blank"
-        rel="noreferrer noopener"
-        class="invoice-link">View Invoice</a
-      >
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
     {/if}
     <PlanQuotas {organization} />
   </div>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index b53bbb46d6b..df12c9d63cf 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -13,7 +13,7 @@
 
   export let data: PageData;
 
-  $: ({ organization, showUpgradeDialog } = data);
+  $: ({ organization, showUpgradeDialog, billingPortalUrl } = data);
 
   $: allStatus = mergedQueryStatus([
     createAdminServiceGetBillingSubscription(organization),
@@ -26,9 +26,8 @@
 {#if $allStatus.isLoading}
   <Spinner status={EntityStatus.Running} size="16px" />
 {:else}
-  <Plan {organization} {showUpgradeDialog} />
+  <Plan {organization} {showUpgradeDialog} {billingPortalUrl} />
 
   <Payment {organization} />
   <BillingContactSetting {organization} />
 {/if}
-

From 868c5eec6bf51aa5d470dbf8678aef81dc382ccc Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:25:50 -0400
Subject: [PATCH 03/24] Update +layout.svelte

---
 web-admin/src/routes/[organization]/-/settings/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index 38c5b09a165..090106ea876 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -8,7 +8,7 @@
 
   export let data: PageData;
 
-  $: ({ subscription, neverSubscribed } = data);
+  $: ({ neverSubscribed } = data);
 
   $: organization = $page.params.organization;
   $: basePage = `/${organization}/-/settings`;

From 4a7ae2dc29af342812433261b8d6c056acb3b4bd Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 6 Apr 2026 09:42:10 -0400
Subject: [PATCH 04/24] Migrate billing plan components to Svelte 5 runes

Convert `export let` to `$props()`, `$:` reactive declarations to
`$derived`, mutable locals to `$state`, and `<slot />` to
`{@render children()}` across all files changed in this PR.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../billing/plans/CancelledTeamPlan.svelte    | 41 +++++++++++-------
 .../src/features/billing/plans/POCPlan.svelte | 17 +++++---
 .../src/features/billing/plans/Plan.svelte    | 43 ++++++++++++-------
 .../features/billing/plans/TeamPlan.svelte    | 31 ++++++++-----
 .../[organization]/-/settings/+layout.svelte  | 23 ++++++----
 .../-/settings/billing/+page.svelte           | 16 ++++---
 6 files changed, 112 insertions(+), 59 deletions(-)

diff --git a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
index a91cbd19126..39130205380 100644
--- a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
@@ -9,24 +9,35 @@
   import InfoCircleFilled from "@rilldata/web-common/components/icons/InfoCircleFilled.svelte";
   import { DateTime } from "luxon";
 
-  export let organization: string;
-  export let plan: V1BillingPlan;
-  export let showUpgradeDialog: boolean;
-  export let billingPortalUrl: string | undefined;
+  let {
+    organization,
+    plan,
+    showUpgradeDialog,
+    billingPortalUrl,
+  }: {
+    organization: string;
+    plan: V1BillingPlan;
+    showUpgradeDialog: boolean;
+    billingPortalUrl: string | undefined;
+  } = $props();
 
-  $: categorisedIssues = useCategorisedOrganizationBillingIssues(organization);
-  $: cancelledSubIssue = $categorisedIssues.data?.cancelled;
+  let categorisedIssues = $derived(
+    useCategorisedOrganizationBillingIssues(organization),
+  );
+  let cancelledSubIssue = $derived($categorisedIssues.data?.cancelled);
 
-  let willEndOnText = "";
-  $: if (cancelledSubIssue?.metadata.subscriptionCancelled?.endDate) {
-    const endDate = DateTime.fromJSDate(
-      new Date(cancelledSubIssue.metadata.subscriptionCancelled.endDate),
-    );
-    if (endDate.isValid && endDate.toMillis() > Date.now())
-      willEndOnText = endDate.toLocaleString(DateTime.DATE_MED);
-  }
+  let willEndOnText = $derived.by(() => {
+    if (cancelledSubIssue?.metadata.subscriptionCancelled?.endDate) {
+      const endDate = DateTime.fromJSDate(
+        new Date(cancelledSubIssue.metadata.subscriptionCancelled.endDate),
+      );
+      if (endDate.isValid && endDate.toMillis() > Date.now())
+        return endDate.toLocaleString(DateTime.DATE_MED);
+    }
+    return "";
+  });
 
-  let open = showUpgradeDialog;
+  let open = $state(showUpgradeDialog);
 </script>
 
 <SettingsContainer title={plan?.displayName || "Team plan"}>
diff --git a/web-admin/src/features/billing/plans/POCPlan.svelte b/web-admin/src/features/billing/plans/POCPlan.svelte
index 94c34a5ee3c..74e16924611 100644
--- a/web-admin/src/features/billing/plans/POCPlan.svelte
+++ b/web-admin/src/features/billing/plans/POCPlan.svelte
@@ -6,12 +6,19 @@
   import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
   import { Button } from "@rilldata/web-common/components/button";
 
-  export let organization: string;
-  export let hasPayment: boolean;
-  export let plan: V1BillingPlan;
-  export let billingPortalUrl: string | undefined;
+  let {
+    organization,
+    hasPayment,
+    plan,
+    billingPortalUrl,
+  }: {
+    organization: string;
+    hasPayment: boolean;
+    plan: V1BillingPlan;
+    billingPortalUrl: string | undefined;
+  } = $props();
 
-  let open = false;
+  let open = $state(false);
 </script>
 
 <SettingsContainer title={plan?.displayName}>
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 2b3f08f0ae3..bfcde93dfca 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -11,27 +11,40 @@
   } from "@rilldata/web-admin/features/billing/plans/utils";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
 
-  export let organization: string;
-  export let showUpgradeDialog: boolean;
-  export let billingPortalUrl: string | undefined;
+  let {
+    organization,
+    showUpgradeDialog,
+    billingPortalUrl,
+  }: {
+    organization: string;
+    showUpgradeDialog: boolean;
+    billingPortalUrl: string | undefined;
+  } = $props();
 
-  $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization);
-  $: subscription = $subscriptionQuery?.data?.subscription;
-  $: hasPayment = !!$subscriptionQuery?.data?.organization?.paymentCustomerId;
-  $: plan = subscription?.plan;
+  let subscriptionQuery = $derived(
+    createAdminServiceGetBillingSubscription(organization),
+  );
+  let subscription = $derived($subscriptionQuery?.data?.subscription);
+  let hasPayment = $derived(
+    !!$subscriptionQuery?.data?.organization?.paymentCustomerId,
+  );
+  let plan = $derived(subscription?.plan);
 
-  $: categorisedIssues = useCategorisedOrganizationBillingIssues(organization);
+  let categorisedIssues = $derived(
+    useCategorisedOrganizationBillingIssues(organization),
+  );
 
   // fresh orgs will have a never subscribed issue associated with it
-  $: neverSubbed = !!$categorisedIssues.data?.neverSubscribed;
+  let neverSubbed = $derived(!!$categorisedIssues.data?.neverSubscribed);
   // trial plan will have a trial issue associated with it
-  $: isTrial = !!$categorisedIssues.data?.trial;
+  let isTrial = $derived(!!$categorisedIssues.data?.trial);
   // ended subscription will have a cancelled issue associated with it
-  $: subHasEnded = !!$categorisedIssues.data?.cancelled;
-  $: subIsTeamPlan = plan && isTeamPlan(plan.name);
-  $: subIsManagedPlan = plan && isManagedPlan(plan.name);
-  $: subIsEnterprisePlan =
-    plan && !isTrial && !subIsTeamPlan && !subIsManagedPlan;
+  let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
+  let subIsTeamPlan = $derived(plan && isTeamPlan(plan.name));
+  let subIsManagedPlan = $derived(plan && isManagedPlan(plan.name));
+  let subIsEnterprisePlan = $derived(
+    plan && !isTrial && !subIsTeamPlan && !subIsManagedPlan,
+  );
 </script>
 
 {#if neverSubbed}
diff --git a/web-admin/src/features/billing/plans/TeamPlan.svelte b/web-admin/src/features/billing/plans/TeamPlan.svelte
index ac132da3283..963841b615f 100644
--- a/web-admin/src/features/billing/plans/TeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/TeamPlan.svelte
@@ -24,12 +24,21 @@
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { DateTime } from "luxon";
 
-  export let organization: string;
-  export let subscription: V1Subscription;
-  export let plan: V1BillingPlan;
-  export let billingPortalUrl: string | undefined;
+  let {
+    organization,
+    subscription,
+    plan,
+    billingPortalUrl,
+  }: {
+    organization: string;
+    subscription: V1Subscription;
+    plan: V1BillingPlan;
+    billingPortalUrl: string | undefined;
+  } = $props();
 
-  $: planCanceller = createAdminServiceCancelBillingSubscription();
+  let planCanceller = $derived(
+    createAdminServiceCancelBillingSubscription(),
+  );
   async function handleCancelPlan() {
     await $planCanceller.mutateAsync({
       org: organization,
@@ -44,12 +53,14 @@
     open = false;
   }
 
-  let open = false;
+  let open = $state(false);
 
-  $: error = getErrorForMutation($planCanceller);
-  $: currentBillingCycleEndDate = DateTime.fromJSDate(
-    new Date(subscription.currentBillingCycleEndDate),
-  ).toLocaleString(DateTime.DATE_MED);
+  let error = $derived(getErrorForMutation($planCanceller));
+  let currentBillingCycleEndDate = $derived(
+    DateTime.fromJSDate(
+      new Date(subscription.currentBillingCycleEndDate),
+    ).toLocaleString(DateTime.DATE_MED),
+  );
 </script>
 
 <SettingsContainer title={plan?.displayName}>
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index 3bdd9657886..a2f7a3c6d84 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -1,27 +1,34 @@
 <!-- ORG SETTINGS -->
 
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import { page } from "$app/stores";
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
   import type { PageData } from "./$types";
   import ContentContainer from "@rilldata/web-common/components/layout/ContentContainer.svelte";
 
-  export let data: PageData;
+  let {
+    data,
+    children,
+  }: {
+    data: PageData;
+    children: Snippet;
+  } = $props();
 
-  $: ({ neverSubscribed } = data);
+  let neverSubscribed = $derived(data.neverSubscribed);
 
-  $: organization = $page.params.organization;
-  $: basePage = `/${organization}/-/settings`;
-  $: hideBillingSettings = neverSubscribed;
+  let organization = $derived($page.params.organization);
+  let basePage = $derived(`/${organization}/-/settings`);
+  let hideBillingSettings = $derived(neverSubscribed);
 
-  $: navItems = [
+  let navItems = $derived([
     { label: "General", route: "", hasPermission: true },
     {
       label: "Billing",
       route: "/billing",
       hasPermission: !hideBillingSettings,
     },
-  ];
+  ]);
 </script>
 
 <ContentContainer title="Organization settings" maxWidth={1100}>
@@ -33,7 +40,7 @@
       minWidth="180px"
     />
     <div class="flex flex-col gap-y-6 w-full">
-      <slot />
+      {@render children()}
     </div>
   </div>
 </ContentContainer>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index df12c9d63cf..0318bfb8ae4 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -11,14 +11,18 @@
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import type { PageData } from "./$types";
 
-  export let data: PageData;
+  let { data }: { data: PageData } = $props();
 
-  $: ({ organization, showUpgradeDialog, billingPortalUrl } = data);
+  let organization = $derived(data.organization);
+  let showUpgradeDialog = $derived(data.showUpgradeDialog);
+  let billingPortalUrl = $derived(data.billingPortalUrl);
 
-  $: allStatus = mergedQueryStatus([
-    createAdminServiceGetBillingSubscription(organization),
-    createAdminServiceListOrganizationBillingIssues(organization),
-  ]);
+  let allStatus = $derived(
+    mergedQueryStatus([
+      createAdminServiceGetBillingSubscription(organization),
+      createAdminServiceListOrganizationBillingIssues(organization),
+    ]),
+  );
 </script>
 
 <!-- Both the queries are used in both Plan and Payment.

From 10c050c567b35364e0871476189a61f7f159972d Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 6 Apr 2026 10:34:48 -0400
Subject: [PATCH 05/24] chore: format with prettier

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/src/features/billing/plans/TeamPlan.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web-admin/src/features/billing/plans/TeamPlan.svelte b/web-admin/src/features/billing/plans/TeamPlan.svelte
index 963841b615f..3612879ff19 100644
--- a/web-admin/src/features/billing/plans/TeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/TeamPlan.svelte
@@ -36,9 +36,7 @@
     billingPortalUrl: string | undefined;
   } = $props();
 
-  let planCanceller = $derived(
-    createAdminServiceCancelBillingSubscription(),
-  );
+  let planCanceller = $derived(createAdminServiceCancelBillingSubscription());
   async function handleCancelPlan() {
     await $planCanceller.mutateAsync({
       org: organization,

From 5de06249a549fc1bb3daa52ac9bc7d28c64fee1c Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 6 Apr 2026 11:46:25 -0400
Subject: [PATCH 06/24] Update CancelledTeamPlan.svelte

---
 .../src/features/billing/plans/CancelledTeamPlan.svelte      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
index 39130205380..e263190ccbd 100644
--- a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
@@ -37,7 +37,10 @@
     return "";
   });
 
-  let open = $state(showUpgradeDialog);
+  let open = $state(false);
+  $effect(() => {
+    if (showUpgradeDialog) open = true;
+  });
 </script>
 
 <SettingsContainer title={plan?.displayName || "Team plan"}>

From b47204dbbaaf70180f76e1898238674ea49122bf Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:07:51 -0400
Subject: [PATCH 07/24] fisrt pass on new design

---
 web-admin/src/features/billing/Payment.svelte |  98 +++++--
 .../contact/BillingContactSetting.svelte      |  65 +++--
 .../src/features/billing/plans/Plan.svelte    |  65 +++--
 .../features/billing/plans/PlanCards.svelte   | 266 ++++++++++++++++++
 .../[organization]/-/settings/+layout.svelte  |   5 +-
 .../-/settings/billing/+page.svelte           |  20 +-
 6 files changed, 439 insertions(+), 80 deletions(-)
 create mode 100644 web-admin/src/features/billing/plans/PlanCards.svelte

diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index bb936dab020..6aec762c698 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -9,8 +9,6 @@
   } from "@rilldata/web-admin/features/billing/issues/getMessageForPaymentIssues";
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import { isEnterprisePlan, isManagedPlan } from "./plans/utils";
 
@@ -24,44 +22,106 @@
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );
+  let hasPaymentCustomer = $derived(
+    !!$org.data?.organization?.paymentCustomerId,
+  );
   let paymentIssues = $derived($categorisedIssues.data?.payment);
   let neverSubscribed = $derived(!!$categorisedIssues.data?.neverSubscribed);
   let onTrial = $derived(!!$categorisedIssues.data?.trial);
   let onManagedPlan = $derived(plan && isManagedPlan(plan.name));
   let onEnterprisePlan = $derived(plan && isEnterprisePlan(plan.name));
-  // For enterprise and managed orgs, hide when payment details haven't been
-  // entered yet (setup done via CLI). Once set up, show the Manage button.
-  // neverSubscribed orgs are always hidden since the billing page is not shown.
   let pendingSetup = $derived(
     neverSubscribed ||
       ((onManagedPlan || onEnterprisePlan) &&
         needsPaymentSetup(paymentIssues ?? [])),
   );
 
-  async function handleManagePayment() {
+  async function handleManageCards() {
     const setup = paymentIssues?.length
       ? needsPaymentSetup(paymentIssues)
       : false;
     window.open(
       await fetchPaymentsPortalURL(organization, window.location.href, setup),
-      "_self",
+      "_blank",
     );
   }
 </script>
 
-<!-- Presence of paymentCustomerId signifies that the org's payment is managed through stripe -->
-{#if !$categorisedIssues.isLoading && $org.data?.organization?.paymentCustomerId && !onTrial && !pendingSetup}
-  <SettingsContainer title="Payment Method">
-    <div class="flex flex-row items-center gap-x-1">
+<section>
+  <h2 class="section-header">Payment methods</h2>
+  <div class="section-card">
+    <div class="card-content">
       {#if paymentIssues?.length}
-        <CancelCircle className="text-red-600" size="14px" />
-        {getPaymentIssueErrorText(paymentIssues)} Please click Manage below to correct.
+        <div class="flex items-center gap-x-2">
+          <CancelCircle className="text-red-600" size="14px" />
+          <span class="text-sm text-red-600">
+            {getPaymentIssueErrorText(paymentIssues)}
+          </span>
+        </div>
+      {:else if hasPaymentCustomer}
+        <!-- TODO: Show card details (brand, last4, expiry) from Stripe API -->
+        <div class="flex items-center gap-x-3">
+          <div class="card-icon">
+            <svg
+              class="w-5 h-5 text-fg-secondary"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                d="M2.5 4A1.5 1.5 0 001 5.5v1h18v-1A1.5 1.5 0 0017.5 4h-15zM19 8.5H1v6A1.5 1.5 0 002.5 16h15a1.5 1.5 0 001.5-1.5v-6zM3 12a1 1 0 011-1h3a1 1 0 110 2H4a1 1 0 01-1-1z"
+              />
+            </svg>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-fg-primary">
+              Payment method on file
+            </p>
+            <p class="text-xs text-fg-tertiary">Manage your cards via Stripe</p>
+          </div>
+        </div>
       {:else}
-        Your payment method is valid and good to go.
+        <span class="text-sm text-fg-tertiary">No payment method on file.</span>
       {/if}
     </div>
-    {#snippet action()}
-      <Button type="secondary" onClick={handleManagePayment}>Manage</Button>
-    {/snippet}
-  </SettingsContainer>
-{/if}
+    {#if hasPaymentCustomer}
+      <button class="manage-btn" onclick={handleManageCards}>
+        Manage cards
+        <svg
+          class="w-3.5 h-3.5"
+          viewBox="0 0 12 12"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M2.5 9.5l7-7M4 2.5h6v6" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+</section>
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .card-icon {
+    @apply flex items-center justify-center w-8 h-8 bg-surface-subtle rounded;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>
diff --git a/web-admin/src/features/billing/contact/BillingContactSetting.svelte b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
index 83f4149eba0..cf70da7fc5b 100644
--- a/web-admin/src/features/billing/contact/BillingContactSetting.svelte
+++ b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
   import ChangeBillingContactDialog from "@rilldata/web-admin/features/billing/contact/ChangeBillingContactDialog.svelte";
   import { getOrganizationBillingContactUser } from "@rilldata/web-admin/features/billing/contact/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
   import AvatarListItem from "@rilldata/web-common/components/avatar/AvatarListItem.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
 
   let { organization }: { organization: string } = $props();
 
@@ -14,30 +12,55 @@
   let isUpdateBillingContactDialogOpen = $state(false);
 </script>
 
-<SettingsContainer title="Billing Contact">
-  <div class="flex flex-row items-center gap-x-1">
-    {#if $billingContactUser}
-      <AvatarListItem
-        name={$billingContactUser.displayName}
-        email={$billingContactUser.email}
-        photoUrl={$billingContactUser.photoUrl}
-      />
-    {:else}
-      This org has no billing contact.
-    {/if}
-  </div>
-  {#snippet action()}
-    <Button
-      type="secondary"
-      onClick={() => (isUpdateBillingContactDialogOpen = true)}
+<section>
+  <h2 class="section-header">Billing Contact</h2>
+  <div class="section-card">
+    <div class="card-content">
+      {#if $billingContactUser}
+        <AvatarListItem
+          name={$billingContactUser.displayName}
+          email={$billingContactUser.email}
+          photoUrl={$billingContactUser.photoUrl}
+        />
+      {:else}
+        <span class="text-sm text-fg-tertiary"
+          >This org has no billing contact.</span
+        >
+      {/if}
+    </div>
+    <button
+      class="manage-btn"
+      onclick={() => (isUpdateBillingContactDialogOpen = true)}
     >
       Change billing contact
-    </Button>
-  {/snippet}
-</SettingsContainer>
+    </button>
+  </div>
+</section>
 
 <ChangeBillingContactDialog
   bind:open={isUpdateBillingContactDialogOpen}
   {organization}
   currentBillingContact={$billingContactUser?.email}
 />
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index bfcde93dfca..91b3def5d7a 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
   import { createAdminServiceGetBillingSubscription } from "@rilldata/web-admin/client";
-  import CancelledTeamPlan from "@rilldata/web-admin/features/billing/plans/CancelledTeamPlan.svelte";
-  import EnterprisePlan from "@rilldata/web-admin/features/billing/plans/EnterprisePlan.svelte";
-  import POCPlan from "@rilldata/web-admin/features/billing/plans/POCPlan.svelte";
-  import TeamPlan from "@rilldata/web-admin/features/billing/plans/TeamPlan.svelte";
-  import TrialPlan from "@rilldata/web-admin/features/billing/plans/TrialPlan.svelte";
+  import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
+  import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
   import {
     isManagedPlan,
     isTeamPlan,
@@ -14,54 +11,56 @@
   let {
     organization,
     showUpgradeDialog,
-    billingPortalUrl,
   }: {
     organization: string;
     showUpgradeDialog: boolean;
-    billingPortalUrl: string | undefined;
   } = $props();
 
   let subscriptionQuery = $derived(
     createAdminServiceGetBillingSubscription(organization),
   );
   let subscription = $derived($subscriptionQuery?.data?.subscription);
-  let hasPayment = $derived(
-    !!$subscriptionQuery?.data?.organization?.paymentCustomerId,
-  );
   let plan = $derived(subscription?.plan);
 
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );
 
-  // fresh orgs will have a never subscribed issue associated with it
   let neverSubbed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  // trial plan will have a trial issue associated with it
   let isTrial = $derived(!!$categorisedIssues.data?.trial);
-  // ended subscription will have a cancelled issue associated with it
   let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
   let subIsTeamPlan = $derived(plan && isTeamPlan(plan.name));
   let subIsManagedPlan = $derived(plan && isManagedPlan(plan.name));
-  let subIsEnterprisePlan = $derived(
-    plan && !isTrial && !subIsTeamPlan && !subIsManagedPlan,
+
+  type PlanTier = "trial" | "pro" | "enterprise";
+  let currentPlan: PlanTier = $derived.by(() => {
+    if (neverSubbed || isTrial || subHasEnded) return "trial";
+    if (subIsTeamPlan) return "pro";
+    if (subIsManagedPlan) return "enterprise";
+    return "enterprise";
+  });
+
+  let dialogType: TeamPlanDialogTypes = $derived.by(() => {
+    if (subHasEnded) return "renew";
+    if (isTrial) {
+      const trialIssue = $categorisedIssues.data?.trial;
+      if (trialIssue?.type === "BILLING_ISSUE_TYPE_TRIAL_ENDED")
+        return "trial-expired";
+      return "base";
+    }
+    return "base";
+  });
+
+  let renewEndDate = $derived(
+    $categorisedIssues.data?.cancelled?.metadata?.subscriptionCancelled
+      ?.endDate ?? "",
   );
 </script>
 
-{#if neverSubbed}
-  <!-- TODO: once mocks are in. Right now we just disable the routes. -->
-{:else if isTrial}
-  <TrialPlan {organization} {subscription} {showUpgradeDialog} {plan} />
-{:else if subHasEnded}
-  <CancelledTeamPlan
-    {organization}
-    {showUpgradeDialog}
-    {plan}
-    {billingPortalUrl}
-  />
-{:else if subIsTeamPlan}
-  <TeamPlan {organization} {subscription} {plan} {billingPortalUrl} />
-{:else if subIsManagedPlan}
-  <POCPlan {organization} {hasPayment} {plan} {billingPortalUrl} />
-{:else if subIsEnterprisePlan}
-  <EnterprisePlan {organization} {plan} />
-{/if}
+<PlanCards
+  {organization}
+  {currentPlan}
+  {showUpgradeDialog}
+  {dialogType}
+  {renewEndDate}
+/>
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
new file mode 100644
index 00000000000..6501be2737a
--- /dev/null
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -0,0 +1,266 @@
+<script lang="ts">
+  import type { V1Subscription } from "@rilldata/web-admin/client";
+  import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
+  import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
+  import { Button } from "@rilldata/web-common/components/button";
+
+  type PlanTier = "trial" | "pro" | "enterprise";
+
+  let {
+    organization,
+    currentPlan,
+    showUpgradeDialog = false,
+    dialogType = "base",
+    renewEndDate = "",
+  }: {
+    organization: string;
+    currentPlan: PlanTier;
+    showUpgradeDialog?: boolean;
+    dialogType?: TeamPlanDialogTypes;
+    renewEndDate?: string;
+  } = $props();
+
+  const planOrder: PlanTier[] = ["trial", "pro", "enterprise"];
+
+  function isPastPlan(plan: PlanTier): boolean {
+    return planOrder.indexOf(plan) < planOrder.indexOf(currentPlan);
+  }
+
+  let upgradeDialogOpen = $state(false);
+  $effect(() => {
+    if (showUpgradeDialog) upgradeDialogOpen = true;
+  });
+
+  async function handleManagePlan() {
+    window.open(
+      await fetchPaymentsPortalURL(organization, window.location.href),
+      "_self",
+    );
+  }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
+
+  const trialFeatures = [
+    "$250 Orb credit",
+    "Self-serve slots (min enforced)",
+    "$1/GB storage above 1GB",
+    '"Made with Rill" badge',
+  ];
+
+  const proFeatures = [
+    "Pay-as-you-go slot pricing",
+    "Self-serve slots (min enforced)",
+    "$1/GB storage above 1GB",
+    '"Made with Rill" badge',
+  ];
+
+  const enterpriseFeatures = [
+    "Custom contract pricing",
+    "Fully managed slots by Rill",
+    "Custom storage limits",
+    "Custom colors, logo, no badge",
+  ];
+</script>
+
+<section>
+  <h2 class="section-header">Plan</h2>
+  <div class="plan-cards-container">
+    <!-- Free Trial -->
+    <div
+      class="plan-card"
+      class:current={currentPlan === "trial"}
+      class:past={isPastPlan("trial")}
+    >
+      <span class="current-badge" class:invisible={currentPlan !== "trial"}
+        >Current plan</span
+      >
+      <h3 class="plan-name">Free Trial</h3>
+      <p class="plan-subtitle">For individuals and small projects.</p>
+      <div class="plan-pricing">
+        <span class="plan-price">$0</span>
+        <span class="plan-price-unit">/ month</span>
+      </div>
+
+      <!-- TODO: Credit usage bar (API not wired up yet) -->
+      <div class="credit-todo">
+        <p class="text-xs text-fg-disabled italic">
+          Credit usage bar coming soon
+        </p>
+      </div>
+
+      <ul class="feature-list">
+        {#each trialFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+
+    <!-- Pro -->
+    <div
+      class="plan-card"
+      class:current={currentPlan === "pro"}
+      class:past={isPastPlan("pro")}
+    >
+      <span class="current-badge" class:invisible={currentPlan !== "pro"}
+        >Current plan</span
+      >
+      <h3 class="plan-name">Pro</h3>
+      <p class="plan-subtitle">For teams scaling their analytics.</p>
+      <div class="plan-pricing">
+        <span class="plan-price">$0.15</span>
+        <span class="plan-price-unit">per slot / hour</span>
+      </div>
+
+      {#if currentPlan === "pro"}
+        <Button type="secondary" wide onClick={handleManagePlan}
+          >Manage plan</Button
+        >
+      {:else if !isPastPlan("pro")}
+        <Button type="primary" wide onClick={() => (upgradeDialogOpen = true)}
+          >Upgrade</Button
+        >
+      {/if}
+
+      <ul class="feature-list">
+        {#each proFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+
+    <!-- Enterprise -->
+    <div
+      class="plan-card"
+      class:current={currentPlan === "enterprise"}
+      class:past={isPastPlan("enterprise")}
+    >
+      <span class="current-badge" class:invisible={currentPlan !== "enterprise"}
+        >Current plan</span
+      >
+      <h3 class="plan-name">Enterprise</h3>
+      <p class="plan-subtitle">For unique business needs.</p>
+      <div class="plan-pricing">
+        <span class="plan-price">Custom</span>
+      </div>
+
+      <button class="contact-sales-btn" onclick={handleContactSales}
+        >Contact sales &rarr;</button
+      >
+
+      <ul class="feature-list">
+        {#each enterpriseFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+</section>
+
+<StartTeamPlanDialog
+  bind:open={upgradeDialogOpen}
+  {organization}
+  type={dialogType}
+  endDate={renewEndDate}
+/>
+
+<style lang="postcss">
+  .plan-cards-container {
+    @apply grid grid-cols-3 gap-4;
+  }
+
+  .plan-card {
+    @apply relative flex flex-col border rounded-xl bg-surface-background;
+    padding: 32px 26px;
+  }
+
+  .plan-card.current {
+    @apply border-2 border-primary-500;
+  }
+
+  .plan-card.past {
+    @apply opacity-50;
+  }
+
+  .current-badge {
+    @apply inline-block self-start text-xs font-medium text-primary-600 bg-primary-50 border border-primary-500 rounded-full px-2.5 py-0.5 mb-2;
+  }
+
+  .plan-name {
+    @apply text-base font-semibold text-fg-primary leading-6;
+  }
+
+  .plan-subtitle {
+    @apply text-sm text-fg-tertiary mt-1 mb-3;
+  }
+
+  .plan-pricing {
+    @apply flex items-baseline gap-1 mb-3;
+  }
+
+  .plan-price {
+    @apply text-3xl font-bold text-fg-primary;
+  }
+
+  .plan-price-unit {
+    @apply text-sm text-fg-tertiary;
+  }
+
+  .credit-todo {
+    @apply mb-4 p-2 border border-dashed rounded;
+  }
+
+  .feature-list {
+    @apply flex flex-col gap-2 mt-auto pt-4 border-t list-none p-0 m-0;
+  }
+
+  .feature-item {
+    @apply flex items-center gap-2 text-sm text-fg-secondary;
+  }
+
+  .check-icon {
+    @apply w-4 h-4 shrink-0 text-primary-500;
+  }
+
+  .plan-card.past .check-icon {
+    @apply text-fg-disabled;
+  }
+
+  .contact-sales-btn {
+    @apply w-full py-2 px-4 text-sm font-medium text-fg-primary border border-gray-300 rounded-md cursor-pointer bg-transparent;
+  }
+
+  .contact-sales-btn:hover {
+    @apply bg-surface-subtle;
+  }
+
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index a2f7a3c6d84..485ae0887ef 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -15,18 +15,15 @@
     children: Snippet;
   } = $props();
 
-  let neverSubscribed = $derived(data.neverSubscribed);
-
   let organization = $derived($page.params.organization);
   let basePage = $derived(`/${organization}/-/settings`);
-  let hideBillingSettings = $derived(neverSubscribed);
 
   let navItems = $derived([
     { label: "General", route: "", hasPermission: true },
     {
       label: "Billing",
       route: "/billing",
-      hasPermission: !hideBillingSettings,
+      hasPermission: true,
     },
   ]);
 </script>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 0318bfb8ae4..22219055a9b 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -30,8 +30,22 @@
 {#if $allStatus.isLoading}
   <Spinner status={EntityStatus.Running} size="16px" />
 {:else}
-  <Plan {organization} {showUpgradeDialog} {billingPortalUrl} />
+  <div class="flex flex-col gap-8">
+    <Plan {organization} {showUpgradeDialog} />
 
-  <Payment {organization} />
-  <BillingContactSetting {organization} />
+    <!-- TODO: Usage & Slots section -->
+    <section>
+      <h2 class="text-lg font-medium text-fg-primary mb-3">Usage & Slots</h2>
+      <div class="text-sm text-fg-tertiary italic">Coming soon</div>
+    </section>
+
+    <Payment {organization} />
+    <BillingContactSetting {organization} />
+
+    <!-- TODO: Billing History section (needs ListInvoices API from Orb) -->
+    <section>
+      <h2 class="text-lg font-medium text-fg-primary mb-3">Billing History</h2>
+      <div class="text-sm text-fg-tertiary italic">Coming soon</div>
+    </section>
+  </div>
 {/if}

From 2475972117310f154e0283303f5cf28033013ad9 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:44:49 -0400
Subject: [PATCH 08/24] ne wlook

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/src/features/billing/Payment.svelte |   5 +-
 .../contact/BillingContactSetting.svelte      |   3 +
 .../src/features/billing/plans/Plan.svelte    | 257 +++++++++++++++++-
 .../features/billing/plans/PlanCards.svelte   | 191 ++++++-------
 .../-/settings/billing/usage/+page.svelte     |  29 ++
 5 files changed, 359 insertions(+), 126 deletions(-)
 create mode 100644 web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte

diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index 6aec762c698..ffb33f4c661 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -85,7 +85,7 @@
     </div>
     {#if hasPaymentCustomer}
       <button class="manage-btn" onclick={handleManageCards}>
-        Manage cards
+        Manage in Stripe
         <svg
           class="w-3.5 h-3.5"
           viewBox="0 0 12 12"
@@ -107,6 +107,9 @@
 
   .section-card {
     @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   }
 
   .card-content {
diff --git a/web-admin/src/features/billing/contact/BillingContactSetting.svelte b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
index cf70da7fc5b..6b5fb987850 100644
--- a/web-admin/src/features/billing/contact/BillingContactSetting.svelte
+++ b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
@@ -50,6 +50,9 @@
 
   .section-card {
     @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   }
 
   .card-content {
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 91b3def5d7a..6eed51b1558 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -3,8 +3,11 @@
   import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
   import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
   import {
+    isEnterprisePlan,
     isManagedPlan,
     isTeamPlan,
+    isFreePlan,
+    isTrialPlan,
   } from "@rilldata/web-admin/features/billing/plans/utils";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
 
@@ -31,13 +34,16 @@
   let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
   let subIsTeamPlan = $derived(plan && isTeamPlan(plan.name));
   let subIsManagedPlan = $derived(plan && isManagedPlan(plan.name));
+  let subIsEnterprisePlan = $derived(
+    plan && (isEnterprisePlan(plan.name) || isManagedPlan(plan.name)),
+  );
 
-  type PlanTier = "trial" | "pro" | "enterprise";
+  type PlanTier = "trial" | "pro" | "team" | "enterprise";
   let currentPlan: PlanTier = $derived.by(() => {
     if (neverSubbed || isTrial || subHasEnded) return "trial";
-    if (subIsTeamPlan) return "pro";
-    if (subIsManagedPlan) return "enterprise";
-    return "enterprise";
+    if (subIsTeamPlan) return "team";
+    if (subIsManagedPlan || subIsEnterprisePlan) return "enterprise";
+    return "pro";
   });
 
   let dialogType: TeamPlanDialogTypes = $derived.by(() => {
@@ -55,12 +61,241 @@
     $categorisedIssues.data?.cancelled?.metadata?.subscriptionCancelled
       ?.endDate ?? "",
   );
+
+  let comparePlansOpen = $state(false);
+
+  // Enterprise doesn't show compare plans at all
+  let showComparePlans = $derived(currentPlan !== "enterprise");
 </script>
 
-<PlanCards
-  {organization}
-  {currentPlan}
-  {showUpgradeDialog}
-  {dialogType}
-  {renewEndDate}
-/>
+<section>
+  <h2 class="section-header">Plan</h2>
+
+  <!-- Plan summary card -->
+  <div class="plan-summary-card">
+    {#if currentPlan === "enterprise"}
+      <!-- Enterprise summary -->
+      <div class="summary-top">
+        <div class="flex items-center gap-3">
+          <span class="plan-badge enterprise">Enterprise</span>
+          <span class="text-sm text-fg-secondary"
+            >Custom contract · Fully managed</span
+          >
+        </div>
+        <button class="contact-btn" onclick={() => window.Pylon("show")}>
+          Contact us
+        </button>
+      </div>
+      <p class="text-sm text-fg-secondary mt-4">
+        Fully managed slots, dedicated CSM, white-label capabilities, and custom
+        SLAs. Contact your CSM for contract details or changes.
+      </p>
+    {:else if currentPlan === "trial"}
+      <!-- Trial summary -->
+      <div class="summary-top">
+        <div class="flex items-center gap-3">
+          <span class="plan-badge trial">Pro Trial</span>
+          <span class="text-sm text-fg-secondary"
+            >$250 free credit · No time limit</span
+          >
+        </div>
+        <button class="subscribe-btn" onclick={() => (comparePlansOpen = true)}>
+          Subscribe to Pro
+        </button>
+      </div>
+
+      <!-- TODO: Credit usage (needs API) -->
+      <div class="credit-section">
+        <div class="flex justify-between mb-1">
+          <div>
+            <span class="text-xs text-fg-tertiary">Used credit</span>
+            <p class="text-2xl font-light text-fg-secondary">—</p>
+          </div>
+          <div class="text-right">
+            <span class="text-xs text-fg-tertiary">Available credit</span>
+            <p class="text-2xl font-light text-green-600">—</p>
+          </div>
+        </div>
+        <div class="credit-bar-bg">
+          <div class="credit-bar-fill" style:width="0%"></div>
+        </div>
+        <div class="flex justify-between mt-1">
+          <span class="text-xs text-fg-tertiary">Credit usage coming soon</span>
+          <span class="text-xs text-fg-tertiary">$0.15/slot/hr</span>
+        </div>
+      </div>
+    {:else if currentPlan === "pro"}
+      <!-- Pro summary -->
+      <div class="summary-top">
+        <div class="flex items-center gap-3">
+          <span class="plan-badge pro">Pro</span>
+          <span class="text-sm text-fg-secondary"
+            >Usage based pricing · $0.15/slot/hr</span
+          >
+        </div>
+      </div>
+    {:else if currentPlan === "team"}
+      <!-- Team (Legacy) summary -->
+      <div class="summary-top">
+        <div class="flex items-center gap-3">
+          <span class="plan-badge team">Team</span>
+          <span class="text-sm text-fg-secondary">Legacy plan</span>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Slots bar (always shown) -->
+    <div class="slots-bar">
+      <div class="flex items-center gap-4">
+        <span class="slot-item"
+          ><strong>—</strong> <span class="slot-label">Total slots</span></span
+        >
+        <span class="slot-divider"></span>
+        <span class="slot-item"
+          ><strong>—</strong> <span class="slot-label">Prod slots</span></span
+        >
+        <span class="slot-divider"></span>
+        <span class="slot-item"
+          ><strong>—</strong> <span class="slot-label">Dev slots</span></span
+        >
+        <span class="slot-divider"></span>
+        <span class="slot-item"
+          ><strong>—</strong> <span class="slot-label">Storage</span></span
+        >
+      </div>
+      <a
+        href="/{organization}/-/settings/billing/usage"
+        class="view-usage-link"
+      >
+        View usage →
+      </a>
+    </div>
+  </div>
+
+  <!-- Compare plans toggle -->
+  {#if showComparePlans}
+    <button
+      class="compare-toggle"
+      onclick={() => (comparePlansOpen = !comparePlansOpen)}
+    >
+      Compare plans
+      <svg
+        class="w-4 h-4 transition-transform"
+        class:rotate-180={!comparePlansOpen}
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      >
+        <path d="M4 10l4-4 4 4" />
+      </svg>
+    </button>
+
+    {#if comparePlansOpen}
+      <PlanCards
+        {organization}
+        {currentPlan}
+        {showUpgradeDialog}
+        {dialogType}
+        {renewEndDate}
+      />
+    {/if}
+  {/if}
+</section>
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .plan-summary-card {
+    @apply border rounded-xl bg-surface-background p-6;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .summary-top {
+    @apply flex items-center justify-between;
+  }
+
+  .plan-badge {
+    @apply inline-block text-xs font-semibold rounded-full px-3 py-1 border;
+  }
+
+  .plan-badge.trial {
+    @apply text-primary-600 bg-primary-50 border-primary-500;
+  }
+
+  .plan-badge.pro {
+    @apply text-primary-600 bg-primary-50 border-primary-500;
+  }
+
+  .plan-badge.team {
+    @apply text-fg-secondary bg-surface-subtle border-gray-300;
+  }
+
+  .plan-badge.enterprise {
+    @apply text-primary-600 bg-primary-50 border-primary-500;
+  }
+
+  .subscribe-btn {
+    @apply text-sm font-medium text-white bg-green-600 rounded-full px-5 py-2 cursor-pointer border-none;
+  }
+
+  .subscribe-btn:hover {
+    @apply bg-green-700;
+  }
+
+  .contact-btn {
+    @apply text-sm font-medium text-fg-primary border border-gray-300 rounded-full px-5 py-2 cursor-pointer bg-transparent;
+  }
+
+  .contact-btn:hover {
+    @apply bg-surface-subtle;
+  }
+
+  .credit-section {
+    @apply mt-4 pt-4 border-t;
+  }
+
+  .credit-bar-bg {
+    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
+  }
+
+  .credit-bar-fill {
+    @apply h-full bg-primary-500 rounded-full transition-all;
+  }
+
+  .slots-bar {
+    @apply flex items-center justify-between mt-4 pt-4 border-t;
+  }
+
+  .slot-item {
+    @apply text-sm text-fg-primary;
+  }
+
+  .slot-label {
+    @apply text-fg-tertiary;
+  }
+
+  .slot-divider {
+    @apply w-px h-4 bg-gray-200;
+  }
+
+  .view-usage-link {
+    @apply text-sm font-medium text-primary-600 no-underline;
+  }
+
+  .view-usage-link:hover {
+    @apply underline;
+  }
+
+  .compare-toggle {
+    @apply flex items-center gap-1.5 mx-auto mt-4 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-none;
+  }
+
+  .compare-toggle:hover {
+    @apply text-fg-primary;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index 6501be2737a..e7a559943f7 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-  import type { V1Subscription } from "@rilldata/web-admin/client";
   import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
   import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
-  import { Button } from "@rilldata/web-common/components/button";
 
-  type PlanTier = "trial" | "pro" | "enterprise";
+  type PlanTier = "trial" | "pro" | "team" | "enterprise";
 
   let {
     organization,
@@ -21,18 +19,29 @@
     renewEndDate?: string;
   } = $props();
 
-  const planOrder: PlanTier[] = ["trial", "pro", "enterprise"];
+  const planOrder: PlanTier[] = ["trial", "pro", "team", "enterprise"];
 
   function isPastPlan(plan: PlanTier): boolean {
     return planOrder.indexOf(plan) < planOrder.indexOf(currentPlan);
   }
 
+  // Hide plans smaller than current. Team (legacy) shows Pro + Enterprise.
+  let showTrial = $derived(currentPlan === "trial");
+  let showPro = $derived(
+    currentPlan === "trial" || currentPlan === "pro" || currentPlan === "team",
+  );
+  let showEnterprise = $derived(currentPlan !== "enterprise");
+
+  let visibleCount = $derived(
+    (showTrial ? 1 : 0) + (showPro ? 1 : 0) + (showEnterprise ? 1 : 0),
+  );
+
   let upgradeDialogOpen = $state(false);
   $effect(() => {
     if (showUpgradeDialog) upgradeDialogOpen = true;
   });
 
-  async function handleManagePlan() {
+  async function handleEstimateCost() {
     window.open(
       await fetchPaymentsPortalURL(organization, window.location.href),
       "_self",
@@ -44,16 +53,16 @@
   }
 
   const trialFeatures = [
-    "$250 Orb credit",
-    "Self-serve slots (min enforced)",
-    "$1/GB storage above 1GB",
+    "Credit rolls over when you subscribe to Pro",
+    "Self-serve slots (2 prod slot minimum)",
+    "1 GB storage included · $1/GB above",
     '"Made with Rill" badge',
   ];
 
   const proFeatures = [
-    "Pay-as-you-go slot pricing",
-    "Self-serve slots (min enforced)",
-    "$1/GB storage above 1GB",
+    "Unused trial credit applied to first bill",
+    "Cancel anytime, data preserved 30 days",
+    "1 GB storage included · $1/GB above",
     '"Made with Rill" badge',
   ];
 
@@ -65,31 +74,13 @@
   ];
 </script>
 
-<section>
-  <h2 class="section-header">Plan</h2>
-  <div class="plan-cards-container">
-    <!-- Free Trial -->
-    <div
-      class="plan-card"
-      class:current={currentPlan === "trial"}
-      class:past={isPastPlan("trial")}
-    >
-      <span class="current-badge" class:invisible={currentPlan !== "trial"}
-        >Current plan</span
-      >
-      <h3 class="plan-name">Free Trial</h3>
-      <p class="plan-subtitle">For individuals and small projects.</p>
-      <div class="plan-pricing">
-        <span class="plan-price">$0</span>
-        <span class="plan-price-unit">/ month</span>
-      </div>
-
-      <!-- TODO: Credit usage bar (API not wired up yet) -->
-      <div class="credit-todo">
-        <p class="text-xs text-fg-disabled italic">
-          Credit usage bar coming soon
-        </p>
-      </div>
+<div class="plan-cards-container" class:two-col={visibleCount === 2}>
+  {#if showTrial}
+    <!-- Pro Trial -->
+    <div class="plan-card" class:current={currentPlan === "trial"}>
+      <h3 class="plan-name">Pro Trial</h3>
+      <p class="plan-pricing-main">$250 free credit</p>
+      <p class="plan-pricing-sub">No time limit</p>
 
       <ul class="feature-list">
         {#each trialFeatures as feature}
@@ -104,33 +95,17 @@
           </li>
         {/each}
       </ul>
+
+      <button class="card-btn current-plan-btn" disabled>Current plan</button>
     </div>
+  {/if}
 
+  {#if showPro}
     <!-- Pro -->
-    <div
-      class="plan-card"
-      class:current={currentPlan === "pro"}
-      class:past={isPastPlan("pro")}
-    >
-      <span class="current-badge" class:invisible={currentPlan !== "pro"}
-        >Current plan</span
-      >
+    <div class="plan-card" class:current={currentPlan === "pro"}>
       <h3 class="plan-name">Pro</h3>
-      <p class="plan-subtitle">For teams scaling their analytics.</p>
-      <div class="plan-pricing">
-        <span class="plan-price">$0.15</span>
-        <span class="plan-price-unit">per slot / hour</span>
-      </div>
-
-      {#if currentPlan === "pro"}
-        <Button type="secondary" wide onClick={handleManagePlan}
-          >Manage plan</Button
-        >
-      {:else if !isPastPlan("pro")}
-        <Button type="primary" wide onClick={() => (upgradeDialogOpen = true)}
-          >Upgrade</Button
-        >
-      {/if}
+      <p class="plan-pricing-main">Usage based pricing</p>
+      <p class="plan-pricing-sub">$0.15/slot/hr · $1/GB storage/mo</p>
 
       <ul class="feature-list">
         {#each proFeatures as feature}
@@ -145,26 +120,23 @@
           </li>
         {/each}
       </ul>
+
+      {#if currentPlan === "pro"}
+        <button class="card-btn current-plan-btn" disabled>Current plan</button>
+      {:else}
+        <button class="card-btn action-btn" onclick={handleEstimateCost}>
+          Estimate your cost
+        </button>
+      {/if}
     </div>
+  {/if}
 
+  {#if showEnterprise}
     <!-- Enterprise -->
-    <div
-      class="plan-card"
-      class:current={currentPlan === "enterprise"}
-      class:past={isPastPlan("enterprise")}
-    >
-      <span class="current-badge" class:invisible={currentPlan !== "enterprise"}
-        >Current plan</span
-      >
+    <div class="plan-card">
       <h3 class="plan-name">Enterprise</h3>
-      <p class="plan-subtitle">For unique business needs.</p>
-      <div class="plan-pricing">
-        <span class="plan-price">Custom</span>
-      </div>
-
-      <button class="contact-sales-btn" onclick={handleContactSales}
-        >Contact sales &rarr;</button
-      >
+      <p class="plan-pricing-main">Custom pricing</p>
+      <p class="plan-pricing-sub">Annual contract</p>
 
       <ul class="feature-list">
         {#each enterpriseFeatures as feature}
@@ -179,9 +151,13 @@
           </li>
         {/each}
       </ul>
+
+      <button class="card-btn action-btn" onclick={handleContactSales}>
+        Contact sales
+      </button>
     </div>
-  </div>
-</section>
+  {/if}
+</div>
 
 <StartTeamPlanDialog
   bind:open={upgradeDialogOpen}
@@ -192,75 +168,62 @@
 
 <style lang="postcss">
   .plan-cards-container {
-    @apply grid grid-cols-3 gap-4;
+    @apply grid grid-cols-3 gap-4 mt-4;
+  }
+
+  .plan-cards-container.two-col {
+    @apply grid-cols-2;
   }
 
   .plan-card {
     @apply relative flex flex-col border rounded-xl bg-surface-background;
     padding: 32px 26px;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   }
 
   .plan-card.current {
     @apply border-2 border-primary-500;
   }
 
-  .plan-card.past {
-    @apply opacity-50;
-  }
-
-  .current-badge {
-    @apply inline-block self-start text-xs font-medium text-primary-600 bg-primary-50 border border-primary-500 rounded-full px-2.5 py-0.5 mb-2;
-  }
-
   .plan-name {
-    @apply text-base font-semibold text-fg-primary leading-6;
-  }
-
-  .plan-subtitle {
-    @apply text-sm text-fg-tertiary mt-1 mb-3;
+    @apply text-sm font-medium text-fg-secondary mb-1;
   }
 
-  .plan-pricing {
-    @apply flex items-baseline gap-1 mb-3;
+  .plan-pricing-main {
+    @apply text-lg font-bold text-fg-primary;
   }
 
-  .plan-price {
-    @apply text-3xl font-bold text-fg-primary;
-  }
-
-  .plan-price-unit {
-    @apply text-sm text-fg-tertiary;
-  }
-
-  .credit-todo {
-    @apply mb-4 p-2 border border-dashed rounded;
+  .plan-pricing-sub {
+    @apply text-sm text-fg-tertiary mt-0.5 mb-4;
   }
 
   .feature-list {
-    @apply flex flex-col gap-2 mt-auto pt-4 border-t list-none p-0 m-0;
+    @apply flex flex-col gap-2.5 pt-4 border-t list-none p-0 m-0 flex-1;
   }
 
   .feature-item {
-    @apply flex items-center gap-2 text-sm text-fg-secondary;
+    @apply flex items-start gap-2 text-sm text-fg-secondary;
   }
 
   .check-icon {
-    @apply w-4 h-4 shrink-0 text-primary-500;
+    @apply w-4 h-4 shrink-0 text-primary-500 mt-0.5;
   }
 
-  .plan-card.past .check-icon {
-    @apply text-fg-disabled;
+  .card-btn {
+    @apply w-full py-2.5 px-4 text-sm font-medium rounded-md cursor-pointer mt-6;
   }
 
-  .contact-sales-btn {
-    @apply w-full py-2 px-4 text-sm font-medium text-fg-primary border border-gray-300 rounded-md cursor-pointer bg-transparent;
+  .current-plan-btn {
+    @apply text-fg-tertiary bg-surface-subtle border border-gray-200 cursor-default;
   }
 
-  .contact-sales-btn:hover {
-    @apply bg-surface-subtle;
+  .action-btn {
+    @apply text-fg-primary bg-transparent border border-gray-300;
   }
 
-  .section-header {
-    @apply text-lg font-medium text-fg-primary mb-3;
+  .action-btn:hover {
+    @apply bg-surface-subtle;
   }
 </style>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
new file mode 100644
index 00000000000..402142421f4
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  let organization = $derived($page.params.organization);
+</script>
+
+<section class="usage-page">
+  <h1 class="text-xl font-semibold text-fg-primary mb-2">Usage</h1>
+  <p class="text-sm text-fg-secondary mb-6">
+    View slot usage, storage consumption, and billing details for your
+    organization.
+  </p>
+
+  <div class="coming-soon-card">
+    <p class="text-fg-tertiary text-sm">
+      Detailed usage metrics are coming soon.
+    </p>
+  </div>
+</section>
+
+<style lang="postcss">
+  .usage-page {
+    @apply max-w-4xl;
+  }
+
+  .coming-soon-card {
+    @apply flex items-center justify-center border border-dashed rounded-xl p-12 bg-surface-background;
+  }
+</style>

From 6868db65710213532f8285c0807ffb2a677b5085 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:16:14 -0400
Subject: [PATCH 09/24] first pass

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/features/billing/plans/Plan.svelte    | 271 ++++++++++--------
 .../features/billing/plans/PlanCards.svelte   |  59 ++--
 .../[organization]/-/settings/+layout.svelte  |   5 +
 .../-/settings/billing/+page.svelte           |  13 -
 4 files changed, 188 insertions(+), 160 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 6eed51b1558..bfde340523c 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
-  import { createAdminServiceGetBillingSubscription } from "@rilldata/web-admin/client";
-  import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
+  import {
+    createAdminServiceGetBillingSubscription,
+    createAdminServiceGetOrganization,
+    createAdminServiceListProjectsForOrganization,
+  } from "@rilldata/web-admin/client";
+  import { getOrganizationUsageMetrics } from "@rilldata/web-admin/features/billing/plans/selectors";
   import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
   import {
     isEnterprisePlan,
     isManagedPlan,
+    isProPlan,
     isTeamPlan,
-    isFreePlan,
-    isTrialPlan,
   } from "@rilldata/web-admin/features/billing/plans/utils";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
+  import { formatMemorySize } from "@rilldata/web-common/lib/number-formatting/memory-size";
+  import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
+  import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
+  import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
 
   let {
     organization,
@@ -29,9 +36,14 @@
     useCategorisedOrganizationBillingIssues(organization),
   );
 
-  let neverSubbed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  let isTrial = $derived(!!$categorisedIssues.data?.trial);
+  let orgQuery = $derived(createAdminServiceGetOrganization(organization));
+  let hasPaymentCustomer = $derived(
+    !!$orgQuery.data?.organization?.paymentCustomerId,
+  );
+
+  let hasBillingTrialIssue = $derived(!!$categorisedIssues.data?.trial);
   let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
+  let subIsProPlan = $derived(plan && isProPlan(plan.name));
   let subIsTeamPlan = $derived(plan && isTeamPlan(plan.name));
   let subIsManagedPlan = $derived(plan && isManagedPlan(plan.name));
   let subIsEnterprisePlan = $derived(
@@ -40,15 +52,17 @@
 
   type PlanTier = "trial" | "pro" | "team" | "enterprise";
   let currentPlan: PlanTier = $derived.by(() => {
-    if (neverSubbed || isTrial || subHasEnded) return "trial";
     if (subIsTeamPlan) return "team";
     if (subIsManagedPlan || subIsEnterprisePlan) return "enterprise";
-    return "pro";
+    // Pro plan with payment = Pro; Pro plan without payment = Pro Trial
+    if (subIsProPlan && hasPaymentCustomer) return "pro";
+    // Everything else is Pro Trial: pro without payment, free_trial plan, no plan, cancelled
+    return "trial";
   });
 
   let dialogType: TeamPlanDialogTypes = $derived.by(() => {
     if (subHasEnded) return "renew";
-    if (isTrial) {
+    if (hasBillingTrialIssue) {
       const trialIssue = $categorisedIssues.data?.trial;
       if (trialIssue?.type === "BILLING_ISSUE_TYPE_TRIAL_ENDED")
         return "trial-expired";
@@ -62,112 +76,133 @@
       ?.endDate ?? "",
   );
 
-  let comparePlansOpen = $state(false);
+  // Slots + storage data
+  let projectsQuery = $derived(
+    createAdminServiceListProjectsForOrganization(organization),
+  );
+  let projects = $derived($projectsQuery.data?.projects ?? []);
+
+  let prodSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.prodSlots ?? 0), 0),
+  );
+  let devSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.devSlots ?? 0), 0),
+  );
+  let totalSlots = $derived(prodSlots + devSlots);
 
-  // Enterprise doesn't show compare plans at all
+  let usageMetrics = $derived(getOrganizationUsageMetrics(organization));
+  let totalStorage = $derived(
+    $usageMetrics?.data?.reduce((s, m) => s + m.size, 0) ?? 0,
+  );
+
+  // Compare plans
+  let comparePlansOpen = $state(false);
   let showComparePlans = $derived(currentPlan !== "enterprise");
+
+  // Upgrade dialog
+  let upgradeDialogOpen = $state(false);
+  $effect(() => {
+    if (showUpgradeDialog) upgradeDialogOpen = true;
+  });
+
+  async function handleSubscribe() {
+    window.open(
+      await fetchPaymentsPortalURL(organization, window.location.href),
+      "_self",
+    );
+  }
 </script>
 
 <section>
   <h2 class="section-header">Plan</h2>
 
-  <!-- Plan summary card -->
-  <div class="plan-summary-card">
-    {#if currentPlan === "enterprise"}
-      <!-- Enterprise summary -->
-      <div class="summary-top">
-        <div class="flex items-center gap-3">
+  <div class="plan-card">
+    <!-- Top row: badge + description + action -->
+    <div class="plan-top">
+      <div class="flex items-center gap-3">
+        {#if currentPlan === "enterprise"}
           <span class="plan-badge enterprise">Enterprise</span>
           <span class="text-sm text-fg-secondary"
             >Custom contract · Fully managed</span
           >
-        </div>
-        <button class="contact-btn" onclick={() => window.Pylon("show")}>
-          Contact us
-        </button>
-      </div>
-      <p class="text-sm text-fg-secondary mt-4">
-        Fully managed slots, dedicated CSM, white-label capabilities, and custom
-        SLAs. Contact your CSM for contract details or changes.
-      </p>
-    {:else if currentPlan === "trial"}
-      <!-- Trial summary -->
-      <div class="summary-top">
-        <div class="flex items-center gap-3">
+        {:else if currentPlan === "trial"}
           <span class="plan-badge trial">Pro Trial</span>
           <span class="text-sm text-fg-secondary"
             >$250 free credit · No time limit</span
           >
-        </div>
-        <button class="subscribe-btn" onclick={() => (comparePlansOpen = true)}>
-          Subscribe to Pro
-        </button>
-      </div>
-
-      <!-- TODO: Credit usage (needs API) -->
-      <div class="credit-section">
-        <div class="flex justify-between mb-1">
-          <div>
-            <span class="text-xs text-fg-tertiary">Used credit</span>
-            <p class="text-2xl font-light text-fg-secondary">—</p>
-          </div>
-          <div class="text-right">
-            <span class="text-xs text-fg-tertiary">Available credit</span>
-            <p class="text-2xl font-light text-green-600">—</p>
-          </div>
-        </div>
-        <div class="credit-bar-bg">
-          <div class="credit-bar-fill" style:width="0%"></div>
-        </div>
-        <div class="flex justify-between mt-1">
-          <span class="text-xs text-fg-tertiary">Credit usage coming soon</span>
-          <span class="text-xs text-fg-tertiary">$0.15/slot/hr</span>
-        </div>
-      </div>
-    {:else if currentPlan === "pro"}
-      <!-- Pro summary -->
-      <div class="summary-top">
-        <div class="flex items-center gap-3">
+        {:else if currentPlan === "pro"}
           <span class="plan-badge pro">Pro</span>
           <span class="text-sm text-fg-secondary"
             >Usage based pricing · $0.15/slot/hr</span
           >
-        </div>
-      </div>
-    {:else if currentPlan === "team"}
-      <!-- Team (Legacy) summary -->
-      <div class="summary-top">
-        <div class="flex items-center gap-3">
+        {:else if currentPlan === "team"}
           <span class="plan-badge team">Team</span>
           <span class="text-sm text-fg-secondary">Legacy plan</span>
-        </div>
+        {/if}
       </div>
+
+      {#if currentPlan === "enterprise"}
+        <button class="contact-btn" onclick={() => window.Pylon("show")}>
+          Contact us
+        </button>
+      {:else if currentPlan === "trial"}
+        <button class="subscribe-btn" onclick={handleSubscribe}>
+          Subscribe to Pro
+        </button>
+      {/if}
+    </div>
+
+    {#if currentPlan === "enterprise"}
+      <p class="text-sm text-fg-secondary mt-4">
+        Fully managed slots, dedicated CSM, white-label capabilities, and custom
+        SLAs. Contact your CSM for contract details or changes.
+      </p>
     {/if}
 
-    <!-- Slots bar (always shown) -->
-    <div class="slots-bar">
+    <!-- Divider -->
+    <div class="divider"></div>
+
+    <!-- Slots + storage row -->
+    <div class="stats-row">
       <div class="flex items-center gap-4">
-        <span class="slot-item"
-          ><strong>—</strong> <span class="slot-label">Total slots</span></span
-        >
-        <span class="slot-divider"></span>
-        <span class="slot-item"
-          ><strong>—</strong> <span class="slot-label">Prod slots</span></span
-        >
-        <span class="slot-divider"></span>
-        <span class="slot-item"
-          ><strong>—</strong> <span class="slot-label">Dev slots</span></span
-        >
-        <span class="slot-divider"></span>
-        <span class="slot-item"
-          ><strong>—</strong> <span class="slot-label">Storage</span></span
-        >
+        <div class="stat-item">
+          <span class="stat-value">{totalSlots}</span>
+          <span class="stat-label">Total slots</span>
+        </div>
+        <span class="stat-divider"></span>
+        <div class="stat-item">
+          <span class="stat-value">{prodSlots}</span>
+          <span class="stat-label">Prod slots</span>
+        </div>
+        <span class="stat-divider"></span>
+        <div class="stat-item">
+          <span class="stat-value">{devSlots}</span>
+          <span class="stat-label">Dev slots</span>
+        </div>
+        <span class="stat-divider"></span>
+        <div class="stat-item">
+          <span class="stat-value"
+            >{totalStorage > 0
+              ? formatMemorySize(totalStorage)
+              : "0 B"}</span
+          >
+          <span class="stat-label">Storage</span>
+        </div>
       </div>
       <a
         href="/{organization}/-/settings/billing/usage"
         class="view-usage-link"
       >
-        View usage →
+        View usage
+        <svg
+          class="w-3 h-3"
+          viewBox="0 0 12 12"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M4.5 2.5l4 3.5-4 3.5" />
+        </svg>
       </a>
     </div>
   </div>
@@ -203,92 +238,98 @@
   {/if}
 </section>
 
+<StartTeamPlanDialog
+  bind:open={upgradeDialogOpen}
+  {organization}
+  type={dialogType}
+  endDate={renewEndDate}
+/>
+
 <style lang="postcss">
   .section-header {
     @apply text-lg font-medium text-fg-primary mb-3;
   }
 
-  .plan-summary-card {
+  .plan-card {
     @apply border rounded-xl bg-surface-background p-6;
     box-shadow:
       0px 1px 2px 0px rgba(0, 0, 0, 0.06),
       0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   }
 
-  .summary-top {
+  .plan-top {
     @apply flex items-center justify-between;
   }
 
   .plan-badge {
-    @apply inline-block text-xs font-semibold rounded-full px-3 py-1 border;
+    @apply inline-flex items-center justify-center text-xs font-semibold rounded-full border-none;
+    width: 76px;
+    height: 21px;
+    gap: 8px;
   }
 
   .plan-badge.trial {
-    @apply text-primary-600 bg-primary-50 border-primary-500;
+    @apply text-primary-600 bg-primary-50;
   }
 
   .plan-badge.pro {
-    @apply text-primary-600 bg-primary-50 border-primary-500;
+    @apply text-primary-600 bg-primary-50;
   }
 
   .plan-badge.team {
-    @apply text-fg-secondary bg-surface-subtle border-gray-300;
+    @apply text-fg-secondary bg-surface-subtle;
   }
 
   .plan-badge.enterprise {
-    @apply text-primary-600 bg-primary-50 border-primary-500;
+    @apply text-primary-600 bg-primary-50;
   }
 
   .subscribe-btn {
-    @apply text-sm font-medium text-white bg-green-600 rounded-full px-5 py-2 cursor-pointer border-none;
+    @apply text-sm font-medium text-white bg-primary-500 px-5 py-2 cursor-pointer border-none rounded-none;
   }
 
   .subscribe-btn:hover {
-    @apply bg-green-700;
+    @apply bg-primary-600;
   }
 
   .contact-btn {
-    @apply text-sm font-medium text-fg-primary border border-gray-300 rounded-full px-5 py-2 cursor-pointer bg-transparent;
+    @apply text-sm font-medium text-fg-primary border border-gray-300 px-5 py-2 cursor-pointer bg-transparent rounded-sm;
   }
 
   .contact-btn:hover {
     @apply bg-surface-subtle;
   }
 
-  .credit-section {
-    @apply mt-4 pt-4 border-t;
+  .divider {
+    @apply border-t mt-4;
   }
 
-  .credit-bar-bg {
-    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
+  .stats-row {
+    @apply flex items-center justify-between pt-4;
   }
 
-  .credit-bar-fill {
-    @apply h-full bg-primary-500 rounded-full transition-all;
-  }
-
-  .slots-bar {
-    @apply flex items-center justify-between mt-4 pt-4 border-t;
+  .view-usage-link {
+    @apply flex items-center gap-1 text-sm font-medium text-primary-600 no-underline;
   }
 
-  .slot-item {
-    @apply text-sm text-fg-primary;
+  .view-usage-link:hover {
+    @apply underline;
   }
 
-  .slot-label {
-    @apply text-fg-tertiary;
+  .stat-item {
+    @apply flex items-center gap-1.5 text-sm text-fg-primary;
   }
 
-  .slot-divider {
-    @apply w-px h-4 bg-gray-200;
+  .stat-value {
+    @apply font-semibold;
   }
 
-  .view-usage-link {
-    @apply text-sm font-medium text-primary-600 no-underline;
+  .stat-label {
+    @apply text-fg-tertiary;
   }
 
-  .view-usage-link:hover {
-    @apply underline;
+  .stat-divider {
+    @apply w-px h-4 bg-gray-200;
   }
 
   .compare-toggle {
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index e7a559943f7..29365e0ee70 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -19,12 +19,6 @@
     renewEndDate?: string;
   } = $props();
 
-  const planOrder: PlanTier[] = ["trial", "pro", "team", "enterprise"];
-
-  function isPastPlan(plan: PlanTier): boolean {
-    return planOrder.indexOf(plan) < planOrder.indexOf(currentPlan);
-  }
-
   // Hide plans smaller than current. Team (legacy) shows Pro + Enterprise.
   let showTrial = $derived(currentPlan === "trial");
   let showPro = $derived(
@@ -74,10 +68,9 @@
   ];
 </script>
 
-<div class="plan-cards-container" class:two-col={visibleCount === 2}>
+<div class="compare-container">
   {#if showTrial}
-    <!-- Pro Trial -->
-    <div class="plan-card" class:current={currentPlan === "trial"}>
+    <div class="plan-col">
       <h3 class="plan-name">Pro Trial</h3>
       <p class="plan-pricing-main">$250 free credit</p>
       <p class="plan-pricing-sub">No time limit</p>
@@ -96,13 +89,16 @@
         {/each}
       </ul>
 
-      <button class="card-btn current-plan-btn" disabled>Current plan</button>
+      <button class="col-btn current-btn" disabled>Current plan</button>
     </div>
   {/if}
 
+  {#if showTrial && showPro}
+    <span class="col-divider"></span>
+  {/if}
+
   {#if showPro}
-    <!-- Pro -->
-    <div class="plan-card" class:current={currentPlan === "pro"}>
+    <div class="plan-col">
       <h3 class="plan-name">Pro</h3>
       <p class="plan-pricing-main">Usage based pricing</p>
       <p class="plan-pricing-sub">$0.15/slot/hr · $1/GB storage/mo</p>
@@ -122,18 +118,21 @@
       </ul>
 
       {#if currentPlan === "pro"}
-        <button class="card-btn current-plan-btn" disabled>Current plan</button>
+        <button class="col-btn current-btn" disabled>Current plan</button>
       {:else}
-        <button class="card-btn action-btn" onclick={handleEstimateCost}>
+        <button class="col-btn action-btn" onclick={handleEstimateCost}>
           Estimate your cost
         </button>
       {/if}
     </div>
   {/if}
 
+  {#if showPro && showEnterprise}
+    <span class="col-divider"></span>
+  {/if}
+
   {#if showEnterprise}
-    <!-- Enterprise -->
-    <div class="plan-card">
+    <div class="plan-col">
       <h3 class="plan-name">Enterprise</h3>
       <p class="plan-pricing-main">Custom pricing</p>
       <p class="plan-pricing-sub">Annual contract</p>
@@ -152,7 +151,7 @@
         {/each}
       </ul>
 
-      <button class="card-btn action-btn" onclick={handleContactSales}>
+      <button class="col-btn action-btn" onclick={handleContactSales}>
         Contact sales
       </button>
     </div>
@@ -167,24 +166,20 @@
 />
 
 <style lang="postcss">
-  .plan-cards-container {
-    @apply grid grid-cols-3 gap-4 mt-4;
-  }
-
-  .plan-cards-container.two-col {
-    @apply grid-cols-2;
-  }
-
-  .plan-card {
-    @apply relative flex flex-col border rounded-xl bg-surface-background;
-    padding: 32px 26px;
+  .compare-container {
+    @apply flex border rounded-xl bg-surface-background mt-4;
     box-shadow:
       0px 1px 2px 0px rgba(0, 0, 0, 0.06),
       0px 1px 3px 0px rgba(0, 0, 0, 0.1);
   }
 
-  .plan-card.current {
-    @apply border-2 border-primary-500;
+  .plan-col {
+    @apply flex flex-col flex-1;
+    padding: 32px 26px;
+  }
+
+  .col-divider {
+    @apply w-px bg-gray-200 my-6 shrink-0;
   }
 
   .plan-name {
@@ -211,11 +206,11 @@
     @apply w-4 h-4 shrink-0 text-primary-500 mt-0.5;
   }
 
-  .card-btn {
+  .col-btn {
     @apply w-full py-2.5 px-4 text-sm font-medium rounded-md cursor-pointer mt-6;
   }
 
-  .current-plan-btn {
+  .current-btn {
     @apply text-fg-tertiary bg-surface-subtle border border-gray-200 cursor-default;
   }
 
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index 485ae0887ef..743997cfd19 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -25,6 +25,11 @@
       route: "/billing",
       hasPermission: true,
     },
+    {
+      label: "Usage",
+      route: "/billing/usage",
+      hasPermission: true,
+    },
   ]);
 </script>
 
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 22219055a9b..22decb4faf3 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -32,20 +32,7 @@
 {:else}
   <div class="flex flex-col gap-8">
     <Plan {organization} {showUpgradeDialog} />
-
-    <!-- TODO: Usage & Slots section -->
-    <section>
-      <h2 class="text-lg font-medium text-fg-primary mb-3">Usage & Slots</h2>
-      <div class="text-sm text-fg-tertiary italic">Coming soon</div>
-    </section>
-
     <Payment {organization} />
     <BillingContactSetting {organization} />
-
-    <!-- TODO: Billing History section (needs ListInvoices API from Orb) -->
-    <section>
-      <h2 class="text-lg font-medium text-fg-primary mb-3">Billing History</h2>
-      <div class="text-sm text-fg-tertiary italic">Coming soon</div>
-    </section>
   </div>
 {/if}

From ca641e0ec87550c31e79cb3af7c7ce4af9df81f8 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:46:04 -0400
Subject: [PATCH 10/24] second pass

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/features/billing/plans/Plan.svelte    | 235 ++++++++++++------
 .../features/billing/plans/PlanCards.svelte   |  61 ++++-
 2 files changed, 210 insertions(+), 86 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index bfde340523c..21b8474fcda 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import {
     createAdminServiceGetBillingSubscription,
-    createAdminServiceGetOrganization,
     createAdminServiceListProjectsForOrganization,
+    V1BillingPlanType,
   } from "@rilldata/web-admin/client";
   import { getOrganizationUsageMetrics } from "@rilldata/web-admin/features/billing/plans/selectors";
   import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
@@ -36,38 +36,41 @@
     useCategorisedOrganizationBillingIssues(organization),
   );
 
-  let orgQuery = $derived(createAdminServiceGetOrganization(organization));
-  let hasPaymentCustomer = $derived(
-    !!$orgQuery.data?.organization?.paymentCustomerId,
-  );
-
-  let hasBillingTrialIssue = $derived(!!$categorisedIssues.data?.trial);
   let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
-  let subIsProPlan = $derived(plan && isProPlan(plan.name));
-  let subIsTeamPlan = $derived(plan && isTeamPlan(plan.name));
-  let subIsManagedPlan = $derived(plan && isManagedPlan(plan.name));
-  let subIsEnterprisePlan = $derived(
-    plan && (isEnterprisePlan(plan.name) || isManagedPlan(plan.name)),
-  );
+  let planType = $derived(plan?.planType);
+  let planName = $derived(plan?.name ?? "");
 
   type PlanTier = "trial" | "pro" | "team" | "enterprise";
   let currentPlan: PlanTier = $derived.by(() => {
-    if (subIsTeamPlan) return "team";
-    if (subIsManagedPlan || subIsEnterprisePlan) return "enterprise";
-    // Pro plan with payment = Pro; Pro plan without payment = Pro Trial
-    if (subIsProPlan && hasPaymentCustomer) return "pro";
-    // Everything else is Pro Trial: pro without payment, free_trial plan, no plan, cancelled
+    // Prefer planType enum when available; fall back to plan.name string matching
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_TEAM ||
+      isTeamPlan(planName)
+    )
+      return "team";
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName)
+    )
+      return "enterprise";
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_PRO ||
+      isProPlan(planName)
+    )
+      return "pro";
+    // free_trial, free, no plan, cancelled — all trial
     return "trial";
   });
 
+  let isTrialExpired = $derived(
+    $categorisedIssues.data?.trial?.type === "BILLING_ISSUE_TYPE_TRIAL_ENDED",
+  );
+
   let dialogType: TeamPlanDialogTypes = $derived.by(() => {
     if (subHasEnded) return "renew";
-    if (hasBillingTrialIssue) {
-      const trialIssue = $categorisedIssues.data?.trial;
-      if (trialIssue?.type === "BILLING_ISSUE_TYPE_TRIAL_ENDED")
-        return "trial-expired";
-      return "base";
-    }
+    if (isTrialExpired) return "trial-expired";
     return "base";
   });
 
@@ -76,6 +79,22 @@
       ?.endDate ?? "",
   );
 
+  // Trial timer
+  const TRIAL_DAYS = 30;
+  let trialEndDate = $derived(subscription?.trialEndDate);
+  let trialDaysUsed = $derived.by(() => {
+    if (!trialEndDate) return 0;
+    const end = new Date(trialEndDate).getTime();
+    const start = end - TRIAL_DAYS * 24 * 60 * 60 * 1000;
+    const now = Date.now();
+    const elapsed = Math.floor((now - start) / (24 * 60 * 60 * 1000));
+    return Math.max(0, Math.min(TRIAL_DAYS, elapsed));
+  });
+  let trialDaysRemaining = $derived(TRIAL_DAYS - trialDaysUsed);
+  let trialPercent = $derived(
+    Math.round((trialDaysUsed / TRIAL_DAYS) * 100),
+  );
+
   // Slots + storage data
   let projectsQuery = $derived(
     createAdminServiceListProjectsForOrganization(organization),
@@ -111,6 +130,10 @@
       "_self",
     );
   }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
 </script>
 
 <section>
@@ -126,30 +149,45 @@
             >Custom contract · Fully managed</span
           >
         {:else if currentPlan === "trial"}
-          <span class="plan-badge trial">Pro Trial</span>
-          <span class="text-sm text-fg-secondary"
-            >$250 free credit · No time limit</span
-          >
+          <span class="plan-badge trial">Free Trial</span>
+          {#if isTrialExpired}
+            <span class="text-sm text-fg-secondary"
+              >Trial expired · Projects hibernated</span
+            >
+          {:else}
+            <span class="text-sm text-fg-secondary">30 day free trial</span>
+          {/if}
         {:else if currentPlan === "pro"}
           <span class="plan-badge pro">Pro</span>
           <span class="text-sm text-fg-secondary"
             >Usage based pricing · $0.15/slot/hr</span
           >
         {:else if currentPlan === "team"}
-          <span class="plan-badge team">Team</span>
-          <span class="text-sm text-fg-secondary">Legacy plan</span>
+          <span class="plan-badge team">Team (Legacy)</span>
+          <span class="text-sm text-fg-secondary"
+            >$250/mo flat + storage</span
+          >
         {/if}
       </div>
 
-      {#if currentPlan === "enterprise"}
-        <button class="contact-btn" onclick={() => window.Pylon("show")}>
-          Contact us
-        </button>
-      {:else if currentPlan === "trial"}
-        <button class="subscribe-btn" onclick={handleSubscribe}>
-          Subscribe to Pro
-        </button>
-      {/if}
+      <div class="flex items-center gap-2">
+        {#if currentPlan === "enterprise"}
+          <button class="contact-btn" onclick={handleContactSales}>
+            Contact us
+          </button>
+        {:else if currentPlan === "trial"}
+          <button class="subscribe-btn" onclick={handleSubscribe}>
+            Subscribe to Pro
+          </button>
+        {:else if currentPlan === "team"}
+          <button class="subscribe-btn" onclick={handleSubscribe}>
+            Switch to Pro
+          </button>
+          <button class="contact-btn" onclick={handleContactSales}>
+            Upgrade to Enterprise
+          </button>
+        {/if}
+      </div>
     </div>
 
     {#if currentPlan === "enterprise"}
@@ -159,8 +197,33 @@
       </p>
     {/if}
 
-    <!-- Divider -->
-    <div class="divider"></div>
+    {#if currentPlan === "trial" && trialEndDate}
+      <div class="trial-section">
+        <div class="flex justify-between mb-1">
+          <div>
+            <span class="text-xs text-fg-tertiary">Days used</span>
+            <p class="text-2xl font-light text-fg-secondary">
+              {trialDaysUsed}
+            </p>
+          </div>
+          <div class="text-right">
+            <span class="text-xs text-fg-tertiary">Days remaining</span>
+            <p class="text-2xl font-light" class:text-green-600={trialDaysRemaining > 7} class:text-red-600={trialDaysRemaining <= 7}>
+              {trialDaysRemaining}
+            </p>
+          </div>
+        </div>
+        <div class="trial-bar-bg">
+          <div class="trial-bar-fill" style:width="{trialPercent}%"></div>
+        </div>
+        <div class="flex justify-between mt-1">
+          <span class="text-xs text-fg-tertiary">
+            {trialPercent}% of trial used, projects will hibernate when trial ends
+          </span>
+          <span class="text-xs text-fg-tertiary">30 days</span>
+        </div>
+      </div>
+    {/if}
 
     <!-- Slots + storage row -->
     <div class="stats-row">
@@ -205,37 +268,38 @@
         </svg>
       </a>
     </div>
-  </div>
 
-  <!-- Compare plans toggle -->
-  {#if showComparePlans}
-    <button
-      class="compare-toggle"
-      onclick={() => (comparePlansOpen = !comparePlansOpen)}
-    >
-      Compare plans
-      <svg
-        class="w-4 h-4 transition-transform"
-        class:rotate-180={!comparePlansOpen}
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
+    <!-- Compare plans toggle -->
+    {#if showComparePlans}
+      <button
+        class="compare-toggle"
+        class:open={comparePlansOpen}
+        onclick={() => (comparePlansOpen = !comparePlansOpen)}
       >
-        <path d="M4 10l4-4 4 4" />
-      </svg>
-    </button>
-
-    {#if comparePlansOpen}
-      <PlanCards
-        {organization}
-        {currentPlan}
-        {showUpgradeDialog}
-        {dialogType}
-        {renewEndDate}
-      />
+        Compare plans
+        <svg
+          class="w-4 h-4 transition-transform"
+          class:rotate-180={!comparePlansOpen}
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M4 10l4-4 4 4" />
+        </svg>
+      </button>
+
+      {#if comparePlansOpen}
+        <PlanCards
+          {organization}
+          {currentPlan}
+          {showUpgradeDialog}
+          {dialogType}
+          {renewEndDate}
+        />
+      {/if}
     {/if}
-  {/if}
+  </div>
 </section>
 
 <StartTeamPlanDialog
@@ -270,6 +334,8 @@
 
   .plan-badge.trial {
     @apply text-primary-600 bg-primary-50;
+    width: auto;
+    padding: 0 12px;
   }
 
   .plan-badge.pro {
@@ -278,6 +344,8 @@
 
   .plan-badge.team {
     @apply text-fg-secondary bg-surface-subtle;
+    width: auto;
+    padding: 0 12px;
   }
 
   .plan-badge.enterprise {
@@ -293,19 +361,29 @@
   }
 
   .contact-btn {
-    @apply text-sm font-medium text-fg-primary border border-gray-300 px-5 py-2 cursor-pointer bg-transparent rounded-sm;
+    @apply text-sm font-medium text-fg-primary border border-gray-300 px-5 py-2 cursor-pointer bg-transparent rounded-none;
   }
 
   .contact-btn:hover {
     @apply bg-surface-subtle;
   }
 
-  .divider {
-    @apply border-t mt-4;
+  .trial-section {
+    @apply mt-4 pt-4 border-t;
+  }
+
+  .trial-bar-bg {
+    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
+  }
+
+  .trial-bar-fill {
+    @apply h-full bg-primary-500 rounded-full transition-all;
   }
 
   .stats-row {
-    @apply flex items-center justify-between pt-4;
+    @apply flex items-center justify-between bg-surface-subtle border-t;
+    margin: 16px -24px 0;
+    padding: 12px 24px;
   }
 
   .view-usage-link {
@@ -333,7 +411,16 @@
   }
 
   .compare-toggle {
-    @apply flex items-center gap-1.5 mx-auto mt-4 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-none;
+    @apply flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-t border-l-0 border-r-0 border-b-0;
+    margin: 0 -24px -24px;
+    width: calc(100% + 48px);
+    padding: 12px 0;
+    border-radius: 0 0 12px 12px;
+  }
+
+  .compare-toggle.open {
+    margin-bottom: 0;
+    border-radius: 0;
   }
 
   .compare-toggle:hover {
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index 29365e0ee70..a5195853e49 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -27,7 +27,10 @@
   let showEnterprise = $derived(currentPlan !== "enterprise");
 
   let visibleCount = $derived(
-    (showTrial ? 1 : 0) + (showPro ? 1 : 0) + (showEnterprise ? 1 : 0),
+    (showTrial ? 1 : 0) +
+      (showTeam ? 1 : 0) +
+      (showPro ? 1 : 0) +
+      (showEnterprise ? 1 : 0),
   );
 
   let upgradeDialogOpen = $state(false);
@@ -47,33 +50,42 @@
   }
 
   const trialFeatures = [
-    "Credit rolls over when you subscribe to Pro",
+    "30-day free trial period",
     "Self-serve slots (2 prod slot minimum)",
     "1 GB storage included · $1/GB above",
     '"Made with Rill" badge',
   ];
 
   const proFeatures = [
-    "Unused trial credit applied to first bill",
     "Cancel anytime, data preserved 30 days",
+    "Billed on prod slots + GB data overages",
     "1 GB storage included · $1/GB above",
     '"Made with Rill" badge',
   ];
 
+  const teamFeatures = [
+    "$250/mo flat charge",
+    "1 GB storage included · $25/GB above",
+    "Email / Chat support",
+    "10 slot limit",
+  ];
+
   const enterpriseFeatures = [
     "Custom contract pricing",
     "Fully managed slots by Rill",
     "Custom storage limits",
     "Custom colors, logo, no badge",
   ];
+
+  let showTeam = $derived(currentPlan === "team");
 </script>
 
 <div class="compare-container">
   {#if showTrial}
     <div class="plan-col">
-      <h3 class="plan-name">Pro Trial</h3>
-      <p class="plan-pricing-main">$250 free credit</p>
-      <p class="plan-pricing-sub">No time limit</p>
+      <h3 class="plan-name">Free Trial</h3>
+      <p class="plan-pricing-main">30 day free trial</p>
+      <p class="plan-pricing-sub">No credit card required</p>
 
       <ul class="feature-list">
         {#each trialFeatures as feature}
@@ -93,7 +105,32 @@
     </div>
   {/if}
 
-  {#if showTrial && showPro}
+  {#if showTrial && (showTeam || showPro)}
+    <span class="col-divider"></span>
+  {/if}
+
+  {#if showTeam}
+    <div class="plan-col">
+      <h3 class="plan-name">Team plan (legacy)</h3>
+      <p class="plan-pricing-main">$250/mo</p>
+      <p class="plan-pricing-sub">Flat rate + storage</p>
+
+      <ul class="feature-list">
+        {#each teamFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+
+      <button class="col-btn current-btn" disabled>Current plan</button>
+    </div>
     <span class="col-divider"></span>
   {/if}
 
@@ -167,15 +204,15 @@
 
 <style lang="postcss">
   .compare-container {
-    @apply flex border rounded-xl bg-surface-background mt-4;
-    box-shadow:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
-      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    @apply flex bg-surface-background;
+    gap: 24px;
+    margin: 0 -24px -24px;
+    padding: 24px 36px 36px;
+    border-radius: 0 0 12px 12px;
   }
 
   .plan-col {
     @apply flex flex-col flex-1;
-    padding: 32px 26px;
   }
 
   .col-divider {

From 317e597819880111414c0e4e7bb46dff55f2494e Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:57:53 -0400
Subject: [PATCH 11/24] entperirse nite

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/features/billing/plans/Plan.svelte    | 88 +++++++++----------
 .../[organization]/-/settings/+layout.svelte  | 16 +++-
 .../-/settings/billing/+page.svelte           | 27 +++++-
 3 files changed, 83 insertions(+), 48 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 21b8474fcda..b99fffd0f50 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -171,11 +171,7 @@
       </div>
 
       <div class="flex items-center gap-2">
-        {#if currentPlan === "enterprise"}
-          <button class="contact-btn" onclick={handleContactSales}>
-            Contact us
-          </button>
-        {:else if currentPlan === "trial"}
+        {#if currentPlan === "trial"}
           <button class="subscribe-btn" onclick={handleSubscribe}>
             Subscribe to Pro
           </button>
@@ -225,49 +221,51 @@
       </div>
     {/if}
 
-    <!-- Slots + storage row -->
-    <div class="stats-row">
-      <div class="flex items-center gap-4">
-        <div class="stat-item">
-          <span class="stat-value">{totalSlots}</span>
-          <span class="stat-label">Total slots</span>
-        </div>
-        <span class="stat-divider"></span>
-        <div class="stat-item">
-          <span class="stat-value">{prodSlots}</span>
-          <span class="stat-label">Prod slots</span>
-        </div>
-        <span class="stat-divider"></span>
-        <div class="stat-item">
-          <span class="stat-value">{devSlots}</span>
-          <span class="stat-label">Dev slots</span>
+    {#if currentPlan !== "enterprise"}
+      <!-- Slots + storage row -->
+      <div class="stats-row">
+        <div class="flex items-center gap-4">
+          <div class="stat-item">
+            <span class="stat-value">{totalSlots}</span>
+            <span class="stat-label">Total slots</span>
+          </div>
+          <span class="stat-divider"></span>
+          <div class="stat-item">
+            <span class="stat-value">{prodSlots}</span>
+            <span class="stat-label">Prod slots</span>
+          </div>
+          <span class="stat-divider"></span>
+          <div class="stat-item">
+            <span class="stat-value">{devSlots}</span>
+            <span class="stat-label">Dev slots</span>
+          </div>
+          <span class="stat-divider"></span>
+          <div class="stat-item">
+            <span class="stat-value"
+              >{totalStorage > 0
+                ? formatMemorySize(totalStorage)
+                : "0 B"}</span
+            >
+            <span class="stat-label">Storage</span>
+          </div>
         </div>
-        <span class="stat-divider"></span>
-        <div class="stat-item">
-          <span class="stat-value"
-            >{totalStorage > 0
-              ? formatMemorySize(totalStorage)
-              : "0 B"}</span
+        <a
+          href="/{organization}/-/settings/billing/usage"
+          class="view-usage-link"
+        >
+          View usage
+          <svg
+            class="w-3 h-3"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-          <span class="stat-label">Storage</span>
-        </div>
+            <path d="M4.5 2.5l4 3.5-4 3.5" />
+          </svg>
+        </a>
       </div>
-      <a
-        href="/{organization}/-/settings/billing/usage"
-        class="view-usage-link"
-      >
-        View usage
-        <svg
-          class="w-3 h-3"
-          viewBox="0 0 12 12"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-        >
-          <path d="M4.5 2.5l4 3.5-4 3.5" />
-        </svg>
-      </a>
-    </div>
+    {/if}
 
     <!-- Compare plans toggle -->
     {#if showComparePlans}
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index 743997cfd19..8268c41dfdd 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -3,7 +3,12 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { page } from "$app/stores";
+  import { V1BillingPlanType } from "@rilldata/web-admin/client";
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
+  import {
+    isEnterprisePlan,
+    isManagedPlan,
+  } from "@rilldata/web-admin/features/billing/plans/utils";
   import type { PageData } from "./$types";
   import ContentContainer from "@rilldata/web-common/components/layout/ContentContainer.svelte";
 
@@ -18,6 +23,15 @@
   let organization = $derived($page.params.organization);
   let basePage = $derived(`/${organization}/-/settings`);
 
+  let planType = $derived(data.subscription?.plan?.planType);
+  let planName = $derived(data.subscription?.plan?.name ?? "");
+  let isEnterprise = $derived(
+    planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName),
+  );
+
   let navItems = $derived([
     { label: "General", route: "", hasPermission: true },
     {
@@ -28,7 +42,7 @@
     {
       label: "Usage",
       route: "/billing/usage",
-      hasPermission: true,
+      hasPermission: !isEnterprise,
     },
   ]);
 </script>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 22decb4faf3..65a78bdbbe7 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -2,11 +2,16 @@
   import {
     createAdminServiceGetBillingSubscription,
     createAdminServiceListOrganizationBillingIssues,
+    V1BillingPlanType,
   } from "@rilldata/web-admin/client";
   import { mergedQueryStatus } from "@rilldata/web-admin/client/utils";
   import BillingContactSetting from "@rilldata/web-admin/features/billing/contact/BillingContactSetting.svelte";
   import Payment from "@rilldata/web-admin/features/billing/Payment.svelte";
   import Plan from "@rilldata/web-admin/features/billing/plans/Plan.svelte";
+  import {
+    isEnterprisePlan,
+    isManagedPlan,
+  } from "@rilldata/web-admin/features/billing/plans/utils";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import type { PageData } from "./$types";
@@ -17,9 +22,25 @@
   let showUpgradeDialog = $derived(data.showUpgradeDialog);
   let billingPortalUrl = $derived(data.billingPortalUrl);
 
+  let subscriptionQuery = $derived(
+    createAdminServiceGetBillingSubscription(organization),
+  );
+  let planType = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.planType,
+  );
+  let planName = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.name ?? "",
+  );
+  let isEnterprise = $derived(
+    planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName),
+  );
+
   let allStatus = $derived(
     mergedQueryStatus([
-      createAdminServiceGetBillingSubscription(organization),
+      subscriptionQuery,
       createAdminServiceListOrganizationBillingIssues(organization),
     ]),
   );
@@ -32,7 +53,9 @@
 {:else}
   <div class="flex flex-col gap-8">
     <Plan {organization} {showUpgradeDialog} />
-    <Payment {organization} />
+    {#if !isEnterprise}
+      <Payment {organization} />
+    {/if}
     <BillingContactSetting {organization} />
   </div>
 {/if}

From 57bf2a928dbe8f594d576b16c6c546fb3f75b49a Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:00:30 -0400
Subject: [PATCH 12/24] prettier

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/features/billing/plans/Plan.svelte    | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index b99fffd0f50..c59fc61c0fe 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -91,9 +91,7 @@
     return Math.max(0, Math.min(TRIAL_DAYS, elapsed));
   });
   let trialDaysRemaining = $derived(TRIAL_DAYS - trialDaysUsed);
-  let trialPercent = $derived(
-    Math.round((trialDaysUsed / TRIAL_DAYS) * 100),
-  );
+  let trialPercent = $derived(Math.round((trialDaysUsed / TRIAL_DAYS) * 100));
 
   // Slots + storage data
   let projectsQuery = $derived(
@@ -164,9 +162,7 @@
           >
         {:else if currentPlan === "team"}
           <span class="plan-badge team">Team (Legacy)</span>
-          <span class="text-sm text-fg-secondary"
-            >$250/mo flat + storage</span
-          >
+          <span class="text-sm text-fg-secondary">$250/mo flat + storage</span>
         {/if}
       </div>
 
@@ -204,7 +200,11 @@
           </div>
           <div class="text-right">
             <span class="text-xs text-fg-tertiary">Days remaining</span>
-            <p class="text-2xl font-light" class:text-green-600={trialDaysRemaining > 7} class:text-red-600={trialDaysRemaining <= 7}>
+            <p
+              class="text-2xl font-light"
+              class:text-green-600={trialDaysRemaining > 7}
+              class:text-red-600={trialDaysRemaining <= 7}
+            >
               {trialDaysRemaining}
             </p>
           </div>
@@ -214,7 +214,8 @@
         </div>
         <div class="flex justify-between mt-1">
           <span class="text-xs text-fg-tertiary">
-            {trialPercent}% of trial used, projects will hibernate when trial ends
+            {trialPercent}% of trial used, projects will hibernate when trial
+            ends
           </span>
           <span class="text-xs text-fg-tertiary">30 days</span>
         </div>
@@ -242,9 +243,7 @@
           <span class="stat-divider"></span>
           <div class="stat-item">
             <span class="stat-value"
-              >{totalStorage > 0
-                ? formatMemorySize(totalStorage)
-                : "0 B"}</span
+              >{totalStorage > 0 ? formatMemorySize(totalStorage) : "0 B"}</span
             >
             <span class="stat-label">Storage</span>
           </div>

From b2830fc7faafdcac34e075a247a7e43c765e56bf Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:24:00 -0400
Subject: [PATCH 13/24] web code qual

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/src/features/billing/Payment.svelte              | 6 ------
 web-admin/src/features/billing/plans/PlanCards.svelte      | 7 -------
 .../routes/[organization]/-/settings/billing/+page.svelte  | 2 --
 .../[organization]/-/settings/billing/usage/+page.svelte   | 6 ------
 4 files changed, 21 deletions(-)

diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index ffb33f4c661..2f8fd7d3436 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -27,14 +27,8 @@
   );
   let paymentIssues = $derived($categorisedIssues.data?.payment);
   let neverSubscribed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  let onTrial = $derived(!!$categorisedIssues.data?.trial);
   let onManagedPlan = $derived(plan && isManagedPlan(plan.name));
   let onEnterprisePlan = $derived(plan && isEnterprisePlan(plan.name));
-  let pendingSetup = $derived(
-    neverSubscribed ||
-      ((onManagedPlan || onEnterprisePlan) &&
-        needsPaymentSetup(paymentIssues ?? [])),
-  );
 
   async function handleManageCards() {
     const setup = paymentIssues?.length
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index a5195853e49..47ecafdbd4c 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -26,13 +26,6 @@
   );
   let showEnterprise = $derived(currentPlan !== "enterprise");
 
-  let visibleCount = $derived(
-    (showTrial ? 1 : 0) +
-      (showTeam ? 1 : 0) +
-      (showPro ? 1 : 0) +
-      (showEnterprise ? 1 : 0),
-  );
-
   let upgradeDialogOpen = $state(false);
   $effect(() => {
     if (showUpgradeDialog) upgradeDialogOpen = true;
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 65a78bdbbe7..fb148a77af2 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -20,8 +20,6 @@
 
   let organization = $derived(data.organization);
   let showUpgradeDialog = $derived(data.showUpgradeDialog);
-  let billingPortalUrl = $derived(data.billingPortalUrl);
-
   let subscriptionQuery = $derived(
     createAdminServiceGetBillingSubscription(organization),
   );
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
index 402142421f4..c51e5dd5347 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
@@ -1,9 +1,3 @@
-<script lang="ts">
-  import { page } from "$app/stores";
-
-  let organization = $derived($page.params.organization);
-</script>
-
 <section class="usage-page">
   <h1 class="text-xl font-semibold text-fg-primary mb-2">Usage</h1>
   <p class="text-sm text-fg-secondary mb-6">

From 81d8a967a6484923c7ca0a08d368bda4983c3148 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:29:07 -0400
Subject: [PATCH 14/24] code qual

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/src/features/billing/Payment.svelte | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index 2f8fd7d3436..39fed8b5584 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -10,7 +10,6 @@
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
-  import { isEnterprisePlan, isManagedPlan } from "./plans/utils";
 
   let { organization }: { organization: string } = $props();
 
@@ -18,7 +17,6 @@
   let subscriptionQuery = $derived(
     createAdminServiceGetBillingSubscription(organization),
   );
-  let plan = $derived($subscriptionQuery?.data?.subscription?.plan);
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );
@@ -26,10 +24,6 @@
     !!$org.data?.organization?.paymentCustomerId,
   );
   let paymentIssues = $derived($categorisedIssues.data?.payment);
-  let neverSubscribed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  let onManagedPlan = $derived(plan && isManagedPlan(plan.name));
-  let onEnterprisePlan = $derived(plan && isEnterprisePlan(plan.name));
-
   async function handleManageCards() {
     const setup = paymentIssues?.length
       ? needsPaymentSetup(paymentIssues)

From 11a59a7fee790a3dd55ecb5236220d69144cf774 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:03:36 -0400
Subject: [PATCH 15/24] Remove unused `subscriptionQuery` to fix ESLint error

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web-admin/src/features/billing/Payment.svelte | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index 39fed8b5584..b63514af87d 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import {
-    createAdminServiceGetBillingSubscription,
-    createAdminServiceGetOrganization,
-  } from "@rilldata/web-admin/client";
+  import { createAdminServiceGetOrganization } from "@rilldata/web-admin/client";
   import {
     getPaymentIssueErrorText,
     needsPaymentSetup,
@@ -14,9 +11,6 @@
   let { organization }: { organization: string } = $props();
 
   let org = $derived(createAdminServiceGetOrganization(organization));
-  let subscriptionQuery = $derived(
-    createAdminServiceGetBillingSubscription(organization),
-  );
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );

From 1d0af49e563b0a165b2dc34dd1f7fe1fbabeba30 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 14:59:07 -0400
Subject: [PATCH 16/24] fix duplicate OLAP/AI Connector

---
 .../status/overview/DeploymentSection.svelte  | 45 +++++--------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
index 11ce7ddd5bd..727f1b5c504 100644
--- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
+++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
@@ -209,42 +209,17 @@
           {/if}
         </span>
       </div>
-    {/if}
-
-    {#if version}
-      <div class="info-row">
-        <span class="info-label">Runtime</span>
-        <span class="info-value">{version}</span>
-      </div>
-    {/if}
-
-    <div class="info-row">
-      <span class="info-label">OLAP Engine</span>
-      <span class="info-value">{olapEngineLabel}</span>
-    </div>
-
-    <div class="info-row">
-      <span class="info-label">AI Connector</span>
-      <span class="info-value">
-        {#if aiConnector && aiConnector.name !== "admin"}
-          {formatConnectorName(aiConnector.type)}
-          <span class="text-fg-tertiary text-xs ml-1">({aiConnector.name})</span
-          >
-        {:else}
-          Rill Managed
-        {/if}
-      </span>
-    </div>
 
-    {#if dataSizeBytes !== undefined}
-      <div class="info-row">
-        <span class="info-label">{dataLabel}</span>
-        <span class="info-value">
-          <a href="/{organization}/{project}/-/status/tables" class="repo-link">
-            {formatMemorySize(dataSizeBytes)}
-          </a>
-        </span>
-      </div>
+      {#if dataSizeBytes !== undefined}
+        <div class="info-row">
+          <span class="info-label">{dataLabel}</span>
+          <span class="info-value">
+            <a href="/{organization}/{project}/-/status/tables" class="repo-link">
+              {formatMemorySize(dataSizeBytes)}
+            </a>
+          </span>
+        </div>
+      {/if}
     {/if}
   </div>
 </OverviewCard>

From ce5ae8c05fc24763b255177832de8d96fc46c5ef Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 15:30:38 -0400
Subject: [PATCH 17/24] new design update

---
 .../src/features/billing/plans/Plan.svelte    | 171 ++++++++++++++----
 .../features/billing/plans/PlanCards.svelte   |  25 ++-
 .../status/overview/DeploymentSection.svelte  |   5 +-
 3 files changed, 158 insertions(+), 43 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index c59fc61c0fe..19e1f02931a 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -14,6 +14,9 @@
   } from "@rilldata/web-admin/features/billing/plans/utils";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
   import { formatMemorySize } from "@rilldata/web-common/lib/number-formatting/memory-size";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
   import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
   import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
@@ -112,6 +115,46 @@
     $usageMetrics?.data?.reduce((s, m) => s + m.size, 0) ?? 0,
   );
 
+  // Est. monthly cost: $0.15/slot/hr × 730 hrs/mo
+  const fmtCost = (slots: number) =>
+    (slots * 0.15 * 730).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    });
+  let prodCost = $derived(fmtCost(prodSlots));
+  let devCost = $derived(fmtCost(devSlots));
+
+  // Storage cost: $1/GB/mo
+  let storageCost = $derived(
+    (totalStorage / 1e9).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    }),
+  );
+
+  // Total period estimate
+  let totalEstimate = $derived(
+    (totalSlots * 0.15 * 730 + totalStorage / 1e9).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    }),
+  );
+
+  // Billing cycle
+  let cycleStart = $derived(subscription?.currentBillingCycleStartDate);
+  let cycleEnd = $derived(subscription?.currentBillingCycleEndDate);
+  function formatCycleDate(dateStr: string | undefined): string {
+    if (!dateStr) return "";
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+
   // Compare plans
   let comparePlansOpen = $state(false);
   let showComparePlans = $derived(currentPlan !== "enterprise");
@@ -143,26 +186,24 @@
       <div class="flex items-center gap-3">
         {#if currentPlan === "enterprise"}
           <span class="plan-badge enterprise">Enterprise</span>
-          <span class="text-sm text-fg-secondary"
-            >Custom contract · Fully managed</span
-          >
+          <span class="plan-description">Custom contract · Fully managed</span>
         {:else if currentPlan === "trial"}
           <span class="plan-badge trial">Free Trial</span>
           {#if isTrialExpired}
-            <span class="text-sm text-fg-secondary"
+            <span class="plan-description"
               >Trial expired · Projects hibernated</span
             >
           {:else}
-            <span class="text-sm text-fg-secondary">30 day free trial</span>
+            <span class="plan-description">30 day free trial</span>
           {/if}
         {:else if currentPlan === "pro"}
           <span class="plan-badge pro">Pro</span>
-          <span class="text-sm text-fg-secondary"
-            >Usage based pricing · $0.15/slot/hr</span
+          <span class="plan-description"
+            >Usage based pricing. $0.15/unit/hr · $1/GB storage/mo</span
           >
         {:else if currentPlan === "team"}
           <span class="plan-badge team">Team (Legacy)</span>
-          <span class="text-sm text-fg-secondary">$250/mo flat + storage</span>
+          <span class="plan-description">$250/mo flat + storage</span>
         {/if}
       </div>
 
@@ -179,6 +220,14 @@
             Upgrade to Enterprise
           </button>
         {/if}
+        <Tooltip location="left" alignment="middle" distance={8}>
+          <span class="text-fg-muted flex">
+            <InfoCircle size="16px" />
+          </span>
+          <TooltipContent maxWidth="240px" slot="tooltip-content">
+            $0.15/unit/hr · $1/GB storage/mo. Cancel anytime.
+          </TooltipContent>
+        </Tooltip>
       </div>
     </div>
 
@@ -193,15 +242,15 @@
       <div class="trial-section">
         <div class="flex justify-between mb-1">
           <div>
-            <span class="text-xs text-fg-tertiary">Days used</span>
-            <p class="text-2xl font-light text-fg-secondary">
+            <span class="trial-label">Days used</span>
+            <p class="trial-number-used">
               {trialDaysUsed}
             </p>
           </div>
           <div class="text-right">
-            <span class="text-xs text-fg-tertiary">Days remaining</span>
+            <span class="trial-label">Days remaining</span>
             <p
-              class="text-2xl font-light"
+              class="trial-number"
               class:text-green-600={trialDaysRemaining > 7}
               class:text-red-600={trialDaysRemaining <= 7}
             >
@@ -222,30 +271,35 @@
       </div>
     {/if}
 
+    {#if currentPlan !== "enterprise" && currentPlan !== "trial"}
+      <div class="period-estimate">
+        <span class="period-label">Current period estimate</span>
+        <span class="period-value">{totalEstimate}</span>
+        {#if cycleStart || cycleEnd}
+          <span class="period-cycle"
+            >{formatCycleDate(cycleStart)} – {formatCycleDate(cycleEnd)}</span
+          >
+        {/if}
+      </div>
+    {/if}
+
     {#if currentPlan !== "enterprise"}
-      <!-- Slots + storage row -->
+      <!-- Cost + usage row -->
       <div class="stats-row">
         <div class="flex items-center gap-4">
-          <div class="stat-item">
-            <span class="stat-value">{totalSlots}</span>
-            <span class="stat-label">Total slots</span>
+          <div class="stat-column">
+            <span class="stat-value">{prodCost}</span>
+            <span class="stat-label">{prodSlots} Prod Compute Units</span>
           </div>
-          <span class="stat-divider"></span>
-          <div class="stat-item">
-            <span class="stat-value">{prodSlots}</span>
-            <span class="stat-label">Prod slots</span>
+          <div class="stat-column">
+            <span class="stat-value">{devCost}</span>
+            <span class="stat-label">{devSlots} Dev Compute Units</span>
           </div>
-          <span class="stat-divider"></span>
-          <div class="stat-item">
-            <span class="stat-value">{devSlots}</span>
-            <span class="stat-label">Dev slots</span>
-          </div>
-          <span class="stat-divider"></span>
-          <div class="stat-item">
-            <span class="stat-value"
-              >{totalStorage > 0 ? formatMemorySize(totalStorage) : "0 B"}</span
+          <div class="stat-column">
+            <span class="stat-value">{storageCost}</span>
+            <span class="stat-label"
+              >{totalStorage > 0 ? formatMemorySize(totalStorage) : "0 B"} Storage</span
             >
-            <span class="stat-label">Storage</span>
           </div>
         </div>
         <a
@@ -331,8 +385,6 @@
 
   .plan-badge.trial {
     @apply text-primary-600 bg-primary-50;
-    width: auto;
-    padding: 0 12px;
   }
 
   .plan-badge.pro {
@@ -341,14 +393,55 @@
 
   .plan-badge.team {
     @apply text-fg-secondary bg-surface-subtle;
-    width: auto;
-    padding: 0 12px;
   }
 
   .plan-badge.enterprise {
     @apply text-primary-600 bg-primary-50;
   }
 
+  .plan-description {
+    @apply font-sans font-semibold text-lg leading-7 align-middle text-fg-tertiary;
+  }
+
+  .estimate-cost-link {
+    @apply font-sans font-semibold text-lg leading-7 align-middle text-primary-500 no-underline cursor-pointer;
+  }
+  .estimate-cost-link:hover {
+    @apply text-primary-600 underline;
+  }
+
+  .period-estimate {
+    @apply flex flex-col items-center mt-4 pt-6 pb-4;
+    gap: 8px;
+  }
+
+  .period-label {
+    @apply font-sans font-semibold text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .period-value {
+    @apply font-sans font-semibold text-4xl leading-10 text-fg-primary;
+  }
+
+  .period-cycle {
+    @apply font-sans font-medium text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .trial-label {
+    @apply font-sans font-semibold text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .trial-number-used {
+    @apply font-sans font-semibold text-2xl leading-8;
+  }
+
+  .trial-number {
+    @apply font-sans font-semibold text-4xl leading-10;
+  }
+
   .subscribe-btn {
     @apply text-sm font-medium text-white bg-primary-500 px-5 py-2 cursor-pointer border-none rounded-none;
   }
@@ -391,16 +484,18 @@
     @apply underline;
   }
 
-  .stat-item {
-    @apply flex items-center gap-1.5 text-sm text-fg-primary;
+  .stat-column {
+    @apply flex flex-col gap-1;
   }
 
   .stat-value {
-    @apply font-semibold;
+    @apply font-sans font-medium text-sm;
+    line-height: 100%;
   }
 
   .stat-label {
-    @apply text-fg-tertiary;
+    @apply font-sans font-medium text-xs text-fg-tertiary;
+    line-height: 100%;
   }
 
   .stat-divider {
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index 47ecafdbd4c..0bdc3dea09e 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -131,7 +131,9 @@
     <div class="plan-col">
       <h3 class="plan-name">Pro</h3>
       <p class="plan-pricing-main">Usage based pricing</p>
-      <p class="plan-pricing-sub">$0.15/slot/hr · $1/GB storage/mo</p>
+      <button class="estimate-cost-link" onclick={handleEstimateCost}>
+        Estimate your cost →
+      </button>
 
       <ul class="feature-list">
         {#each proFeatures as feature}
@@ -150,8 +152,8 @@
       {#if currentPlan === "pro"}
         <button class="col-btn current-btn" disabled>Current plan</button>
       {:else}
-        <button class="col-btn action-btn" onclick={handleEstimateCost}>
-          Estimate your cost
+        <button class="col-btn primary-btn" onclick={handleEstimateCost}>
+          Subscribe to Pro
         </button>
       {/if}
     </div>
@@ -224,6 +226,13 @@
     @apply text-sm text-fg-tertiary mt-0.5 mb-4;
   }
 
+  .estimate-cost-link {
+    @apply font-sans font-medium text-xs leading-4 align-middle text-primary-500 cursor-pointer mt-0.5 mb-4 block bg-transparent border-none p-0 text-left;
+  }
+  .estimate-cost-link:hover {
+    @apply text-primary-600 underline;
+  }
+
   .feature-list {
     @apply flex flex-col gap-2.5 pt-4 border-t list-none p-0 m-0 flex-1;
   }
@@ -237,7 +246,7 @@
   }
 
   .col-btn {
-    @apply w-full py-2.5 px-4 text-sm font-medium rounded-md cursor-pointer mt-6;
+    @apply w-full py-2.5 px-4 text-sm font-medium rounded-none cursor-pointer mt-6;
   }
 
   .current-btn {
@@ -251,4 +260,12 @@
   .action-btn:hover {
     @apply bg-surface-subtle;
   }
+
+  .primary-btn {
+    @apply text-white bg-primary-500 border-none;
+  }
+
+  .primary-btn:hover {
+    @apply bg-primary-600;
+  }
 </style>
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
index 727f1b5c504..4e91e36312d 100644
--- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
+++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
@@ -214,7 +214,10 @@
         <div class="info-row">
           <span class="info-label">{dataLabel}</span>
           <span class="info-value">
-            <a href="/{organization}/{project}/-/status/tables" class="repo-link">
+            <a
+              href="/{organization}/{project}/-/status/tables"
+              class="repo-link"
+            >
               {formatMemorySize(dataSizeBytes)}
             </a>
           </span>

From 8416791cdbf02a83018e41d4640200dddfdeddc3 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 16:00:38 -0400
Subject: [PATCH 18/24] nit

---
 web-admin/src/features/billing/plans/Plan.svelte           | 4 ++--
 .../projects/status/overview/DeploymentSection.svelte      | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 19e1f02931a..eddac71568d 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -306,7 +306,7 @@
           href="/{organization}/-/settings/billing/usage"
           class="view-usage-link"
         >
-          View usage
+          View Usage
           <svg
             class="w-3 h-3"
             viewBox="0 0 12 12"
@@ -314,7 +314,7 @@
             stroke="currentColor"
             stroke-width="1.5"
           >
-            <path d="M4.5 2.5l4 3.5-4 3.5" />
+            <path d="M1 6h9M7.5 3l3 3-3 3" />
           </svg>
         </a>
       </div>
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
index 4e91e36312d..43677c35aea 100644
--- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
+++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
@@ -216,7 +216,7 @@
           <span class="info-value">
             <a
               href="/{organization}/{project}/-/status/tables"
-              class="repo-link"
+              class="data-size-link"
             >
               {formatMemorySize(dataSizeBytes)}
             </a>
@@ -252,4 +252,9 @@
   .repo-link:hover {
     @apply underline;
   }
+  .data-size-link {
+    @apply no-underline;
+    color: inherit;
+    font: inherit;
+  }
 </style>

From f82cbdec2077d446a3145b39f5bb289c9069bc2a Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 16:34:10 -0400
Subject: [PATCH 19/24] follow up to https://github.com/rilldata/rill/pull/9088

---
 .../src/features/billing/plans/Plan.svelte    |   9 -
 .../features/billing/plans/PlanCards.svelte   |   9 +-
 .../-/settings/billing/estimate/+page.svelte  | 470 ++++++++++++++++++
 .../-/settings/billing/estimate/+page.ts      |   5 +
 4 files changed, 478 insertions(+), 15 deletions(-)
 create mode 100644 web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
 create mode 100644 web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts

diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index eddac71568d..96d5e98df1d 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -403,12 +403,6 @@
     @apply font-sans font-semibold text-lg leading-7 align-middle text-fg-tertiary;
   }
 
-  .estimate-cost-link {
-    @apply font-sans font-semibold text-lg leading-7 align-middle text-primary-500 no-underline cursor-pointer;
-  }
-  .estimate-cost-link:hover {
-    @apply text-primary-600 underline;
-  }
 
   .period-estimate {
     @apply flex flex-col items-center mt-4 pt-6 pb-4;
@@ -498,9 +492,6 @@
     line-height: 100%;
   }
 
-  .stat-divider {
-    @apply w-px h-4 bg-gray-200;
-  }
 
   .compare-toggle {
     @apply flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-t border-l-0 border-r-0 border-b-0;
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
index 0bdc3dea09e..113939e43a1 100644
--- a/web-admin/src/features/billing/plans/PlanCards.svelte
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
-  import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import { goto } from "$app/navigation";
   import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
 
   type PlanTier = "trial" | "pro" | "team" | "enterprise";
@@ -31,11 +31,8 @@
     if (showUpgradeDialog) upgradeDialogOpen = true;
   });
 
-  async function handleEstimateCost() {
-    window.open(
-      await fetchPaymentsPortalURL(organization, window.location.href),
-      "_self",
-    );
+  function handleEstimateCost() {
+    goto(`/${organization}/-/settings/billing/estimate`);
   }
 
   function handleContactSales() {
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
new file mode 100644
index 00000000000..36dd0b91f17
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -0,0 +1,470 @@
+<script lang="ts">
+  import {
+    createAdminServiceListProjectsForOrganization,
+    createAdminServiceGetBillingSubscription,
+  } from "@rilldata/web-admin/client";
+  import {
+    fetchPaymentsPortalURL,
+    getOrganizationUsageMetrics,
+  } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+  let organization = $derived(data.organization);
+
+  // Current deployment data for pre-filling
+  let projectsQuery = $derived(
+    createAdminServiceListProjectsForOrganization(organization),
+  );
+  let projects = $derived($projectsQuery.data?.projects ?? []);
+
+  let currentProdSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.prodSlots ?? 0), 0),
+  );
+  let currentDevSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.devSlots ?? 0), 0),
+  );
+
+  let usageMetrics = $derived(getOrganizationUsageMetrics(organization));
+  let currentStorageBytes = $derived(
+    $usageMetrics?.data?.reduce((s, m) => s + m.size, 0) ?? 0,
+  );
+  let currentStorageGB = $derived(Math.ceil(currentStorageBytes / 1e9) || 1);
+
+  // Editable inputs
+  let prodUnits = $state(2);
+  let devUnits = $state(0);
+  let storageGB = $state(1);
+  let hoursPerDay = $state(24);
+
+  // Pre-fill from current deployment once data loads
+  let prefilled = $state(false);
+  $effect(() => {
+    if (!prefilled && !$projectsQuery.isLoading && projects.length > 0) {
+      prodUnits = Math.max(currentProdSlots, 2);
+      devUnits = currentDevSlots;
+      storageGB = Math.max(currentStorageGB, 1);
+      hoursPerDay = 24;
+      prefilled = true;
+    }
+  });
+
+  function resetToUsage() {
+    prodUnits = Math.max(currentProdSlots, 2);
+    devUnits = currentDevSlots;
+    storageGB = Math.max(currentStorageGB, 1);
+    hoursPerDay = 24;
+  }
+
+  // Pricing constants
+  const RATE_PER_UNIT_HR = 0.15;
+  const STORAGE_RATE_PER_GB = 1;
+  const FREE_STORAGE_GB = 1;
+  const DAYS_PER_MONTH = 30;
+
+  // Cost calculations
+  let prodCost = $derived(prodUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR);
+  let devCost = $derived(devUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR);
+  let billableStorageGB = $derived(Math.max(storageGB - FREE_STORAGE_GB, 0));
+  let storageCost = $derived(billableStorageGB * STORAGE_RATE_PER_GB);
+  let monthlyCost = $derived(prodCost + devCost + storageCost);
+  let dailyCost = $derived(monthlyCost / DAYS_PER_MONTH);
+
+  // TODO: Wire to billing API when available
+  let availableCredit = $derived(100);
+  let firstBill = $derived(Math.max(monthlyCost - availableCredit, 0));
+
+  // Billing plan
+  let subscriptionQuery = $derived(
+    createAdminServiceGetBillingSubscription(organization),
+  );
+  let planName = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.name ?? "",
+  );
+  let isPro = $derived(planName === "pro_plan");
+
+  function fmtUSD(n: number): string {
+    return n.toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    });
+  }
+
+  async function handleSubscribe() {
+    window.open(
+      await fetchPaymentsPortalURL(organization, window.location.href),
+      "_self",
+    );
+  }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
+
+  function clampInput(e: Event, min: number, max: number, setter: (v: number) => void) {
+    const el = e.target as HTMLInputElement;
+    const n = parseInt(el.value, 10);
+    if (isNaN(n) || n < min) setter(min);
+    else if (n > max) setter(max);
+    else setter(n);
+  }
+
+</script>
+
+<div class="estimate-page">
+  <!-- Back link + title -->
+  <a href="/{organization}/-/settings/billing" class="back-link">
+    <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M9 2.5L4.5 7 9 11.5" />
+    </svg>
+    Billing
+  </a>
+  <h1 class="page-title">Estimate your cost</h1>
+
+  <div class="page-header">
+    <span class="prefill-note">Pre-filled from your current deployment</span>
+    <button class="reset-btn" onclick={resetToUsage}>
+      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M1.5 2.5v3.5h3.5" />
+        <path d="M2.1 8.5a5 5 0 1 0 .9-4.5L1.5 6" />
+      </svg>
+      Reset to my usage
+    </button>
+  </div>
+
+  <div class="estimate-grid">
+    <!-- LEFT: Input panel -->
+    <div class="input-panel">
+      <div class="panel-header">
+        <span class="panel-title">Select compute unit</span>
+        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU</span>
+      </div>
+
+      <!-- Production -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Production</span>
+          <span class="input-desc">Minimum 2 units</span>
+        </div>
+        <div class="stepper">
+          <button class="stepper-btn" onclick={() => prodUnits--} disabled={prodUnits <= 2}>−</button>
+          <input class="stepper-input" type="number" bind:value={prodUnits} min="2" onblur={(e) => clampInput(e, 2, 9999, (v) => prodUnits = v)} />
+          <button class="stepper-btn" onclick={() => prodUnits++}>+</button>
+        </div>
+      </div>
+
+      <div class="input-divider"></div>
+
+      <!-- Development -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Development</span>
+          <span class="input-desc">Optional · Same rate as prod unit</span>
+        </div>
+        <div class="stepper">
+          <button class="stepper-btn" onclick={() => devUnits--} disabled={devUnits <= 0}>−</button>
+          <input class="stepper-input" type="number" bind:value={devUnits} min="0" onblur={(e) => clampInput(e, 0, 9999, (v) => devUnits = v)} />
+          <button class="stepper-btn" onclick={() => devUnits++}>+</button>
+        </div>
+      </div>
+
+      <div class="input-divider"></div>
+
+      <!-- Storage -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Storage (GB)</span>
+          <span class="input-desc">1 GB included free · $1/GB/mo above that</span>
+        </div>
+        <div class="stepper">
+          <button class="stepper-btn" onclick={() => storageGB--} disabled={storageGB <= 1}>−</button>
+          <input class="stepper-input" type="number" bind:value={storageGB} min="1" onblur={(e) => clampInput(e, 1, 9999, (v) => storageGB = v)} />
+          <button class="stepper-btn" onclick={() => storageGB++}>+</button>
+        </div>
+      </div>
+
+      <div class="input-divider"></div>
+
+      <!-- Hours per day -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Hours per day</span>
+          <span class="input-desc">24 = always on · Lower if you pause units at night</span>
+        </div>
+        <div class="stepper">
+          <button class="stepper-btn" onclick={() => hoursPerDay--} disabled={hoursPerDay <= 1}>−</button>
+          <input class="stepper-input" type="number" bind:value={hoursPerDay} min="1" max="24" onblur={(e) => clampInput(e, 1, 24, (v) => hoursPerDay = v)} />
+          <button class="stepper-btn" onclick={() => hoursPerDay++} disabled={hoursPerDay >= 24}>+</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- RIGHT: Cost summary -->
+    <div class="cost-panel">
+      <h2 class="cost-title">Estimate monthly cost</h2>
+      <span class="cost-total">{fmtUSD(monthlyCost)}</span>
+      <span class="cost-daily">~{fmtUSD(dailyCost)}/day</span>
+
+      <div class="cost-divider"></div>
+
+      <!-- Production breakdown -->
+      <div class="cost-row">
+        <div class="cost-row-info">
+          <span class="cost-row-label">Production</span>
+          <span class="cost-row-desc">
+            {prodUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(2)}
+          </span>
+        </div>
+        <span class="cost-row-amount">{fmtUSD(prodCost)}</span>
+      </div>
+
+      <!-- Development breakdown -->
+      <div class="cost-row">
+        <div class="cost-row-info">
+          <span class="cost-row-label">Development</span>
+          <span class="cost-row-desc">
+            {devUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(2)}
+          </span>
+        </div>
+        <span class="cost-row-amount">{fmtUSD(devCost)}</span>
+      </div>
+
+      <!-- Storage breakdown -->
+      <div class="cost-row">
+        <div class="cost-row-info">
+          <span class="cost-row-label">Storage (GB)</span>
+          <span class="cost-row-desc">
+            {storageGB} GB − {FREE_STORAGE_GB} GB free = {billableStorageGB} GB × ${STORAGE_RATE_PER_GB}
+          </span>
+        </div>
+        <span class="cost-row-amount">{fmtUSD(storageCost)}</span>
+      </div>
+
+      <div class="cost-divider"></div>
+
+      <!-- Monthly total -->
+      <div class="cost-row">
+        <span class="cost-row-label font-semibold">Monthly cost</span>
+        <span class="cost-row-amount font-semibold">{fmtUSD(monthlyCost)}</span>
+      </div>
+
+      <!-- Available credit -->
+      {#if availableCredit > 0}
+        <div class="cost-row">
+          <div class="cost-row-info">
+            <span class="credit-label">Available credit</span>
+            <span class="cost-row-desc">Applied to your first bill</span>
+          </div>
+          <span class="credit-amount">-{fmtUSD(availableCredit)}</span>
+        </div>
+
+        <!-- First bill highlight -->
+        <div class="first-bill">
+          <span class="first-bill-label">First bill</span>
+          <span class="first-bill-amount">{fmtUSD(firstBill)}</span>
+        </div>
+
+        <span class="recurring-note">
+          Then {fmtUSD(monthlyCost)}/mo based on current usage
+        </span>
+      {/if}
+
+      <!-- Actions -->
+      {#if !isPro}
+        <button class="subscribe-btn" onclick={handleSubscribe}>
+          Subscribe to Pro
+        </button>
+      {/if}
+
+      <button class="contact-link" onclick={handleContactSales}>
+        Contact sales for volume discounts
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .estimate-page {
+    @apply flex flex-col w-full max-w-5xl;
+  }
+
+  .back-link {
+    @apply flex items-center gap-1 text-sm text-fg-secondary no-underline mb-1;
+  }
+  .back-link:hover {
+    @apply text-fg-primary;
+  }
+
+  .page-title {
+    @apply text-2xl font-semibold text-fg-primary mb-2;
+  }
+
+  .page-header {
+    @apply flex items-center justify-between mb-6;
+  }
+
+  .prefill-note {
+    @apply text-sm text-fg-tertiary;
+  }
+
+  .reset-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-500 bg-transparent border-none cursor-pointer p-0;
+  }
+  .reset-btn:hover {
+    @apply text-primary-600;
+  }
+
+  .estimate-grid {
+    @apply grid gap-6;
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+
+  /* Left panel */
+  .input-panel {
+    @apply border border-border rounded-xl bg-white p-6 flex flex-col;
+  }
+
+  .panel-header {
+    @apply flex items-center justify-between mb-4;
+  }
+
+  .panel-title {
+    @apply text-sm font-semibold text-fg-primary;
+  }
+
+  .unit-hint {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .input-row {
+    @apply flex items-center justify-between py-4;
+  }
+
+  .input-info {
+    @apply flex flex-col gap-0.5;
+  }
+
+  .input-label {
+    @apply text-sm font-semibold text-fg-primary;
+  }
+
+  .input-desc {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .input-divider {
+    @apply border-t border-border;
+  }
+
+  /* Stepper */
+  .stepper {
+    @apply flex items-center border border-border rounded-md overflow-hidden shrink-0;
+  }
+
+  .stepper-btn {
+    @apply w-8 h-8 flex items-center justify-center text-fg-secondary bg-transparent border-none cursor-pointer text-base;
+  }
+  .stepper-btn:hover:not(:disabled) {
+    @apply bg-surface-subtle;
+  }
+  .stepper-btn:disabled {
+    @apply text-fg-disabled cursor-default;
+  }
+
+  .stepper-input {
+    @apply w-10 h-8 text-sm font-medium text-fg-primary border-x border-border tabular-nums text-center bg-transparent outline-none;
+    -moz-appearance: textfield;
+  }
+  .stepper-input::-webkit-outer-spin-button,
+  .stepper-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Right panel */
+  .cost-panel {
+    @apply border border-border rounded-xl bg-white p-6 flex flex-col;
+  }
+
+  .cost-title {
+    @apply text-sm font-semibold text-fg-primary mb-1;
+  }
+
+  .cost-total {
+    @apply text-4xl font-bold text-fg-primary tabular-nums tracking-tight;
+  }
+
+  .cost-daily {
+    @apply text-sm text-fg-tertiary mt-1 mb-4;
+  }
+
+  .cost-divider {
+    @apply border-t border-border my-3;
+  }
+
+  .cost-row {
+    @apply flex items-start justify-between py-2;
+  }
+
+  .cost-row-info {
+    @apply flex flex-col gap-0.5;
+  }
+
+  .cost-row-label {
+    @apply text-sm text-fg-primary;
+  }
+
+  .cost-row-desc {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .cost-row-amount {
+    @apply text-sm text-fg-primary tabular-nums text-right;
+  }
+
+  .credit-label {
+    @apply text-sm font-medium;
+    color: #16a34a;
+  }
+
+  .credit-amount {
+    @apply text-sm font-medium tabular-nums text-right;
+    color: #16a34a;
+  }
+
+  .first-bill {
+    @apply flex items-center justify-between rounded-lg px-4 py-3 mt-2;
+    background: var(--rill-colors-theme-primary-50, #ECF0FF);
+  }
+
+  .first-bill-label {
+    @apply text-sm font-medium;
+    color: #6366f1;
+  }
+
+  .first-bill-amount {
+    @apply text-xl font-bold tabular-nums;
+    color: #6366f1;
+  }
+
+  .recurring-note {
+    @apply text-xs text-fg-tertiary mt-2;
+  }
+
+  .subscribe-btn {
+    @apply w-full py-2.5 px-4 text-sm font-medium text-white rounded-none cursor-pointer mt-6 border-none;
+    background: #6366f1;
+  }
+  .subscribe-btn:hover {
+    background: #4f46e5;
+  }
+
+  .contact-link {
+    @apply text-sm text-primary-500 bg-transparent border-none cursor-pointer mt-3 p-0;
+  }
+  .contact-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts
new file mode 100644
index 00000000000..505956c4186
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ params: { organization } }) => {
+  return { organization };
+};

From df0d27c160dd71ef1cd1e040a92777a13870be99 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:12:03 -0400
Subject: [PATCH 20/24] prettier, code qual

---
 scripts/tsc-with-whitelist.sh                 |   1 +
 .../src/features/billing/plans/Plan.svelte    |   2 -
 .../-/settings/billing/estimate/+page.svelte  | 116 ++++++++++++++----
 3 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/scripts/tsc-with-whitelist.sh b/scripts/tsc-with-whitelist.sh
index 5abbe618948..a7da250e2db 100755
--- a/scripts/tsc-with-whitelist.sh
+++ b/scripts/tsc-with-whitelist.sh
@@ -9,6 +9,7 @@ web-admin/src/routes/[organization]/-/settings/+layout.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts: error TS2307
+web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/upgrade/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/usage/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/upgrade-callback/+page.ts: error TS2307
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 96d5e98df1d..09e4a38e813 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -403,7 +403,6 @@
     @apply font-sans font-semibold text-lg leading-7 align-middle text-fg-tertiary;
   }
 
-
   .period-estimate {
     @apply flex flex-col items-center mt-4 pt-6 pb-4;
     gap: 8px;
@@ -492,7 +491,6 @@
     line-height: 100%;
   }
 
-
   .compare-toggle {
     @apply flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-t border-l-0 border-r-0 border-b-0;
     margin: 0 -24px -24px;
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
index 36dd0b91f17..13d4cdced61 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -63,8 +63,12 @@
   const DAYS_PER_MONTH = 30;
 
   // Cost calculations
-  let prodCost = $derived(prodUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR);
-  let devCost = $derived(devUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR);
+  let prodCost = $derived(
+    prodUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+  );
+  let devCost = $derived(
+    devUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+  );
   let billableStorageGB = $derived(Math.max(storageGB - FREE_STORAGE_GB, 0));
   let storageCost = $derived(billableStorageGB * STORAGE_RATE_PER_GB);
   let monthlyCost = $derived(prodCost + devCost + storageCost);
@@ -102,20 +106,30 @@
     window.Pylon("show");
   }
 
-  function clampInput(e: Event, min: number, max: number, setter: (v: number) => void) {
+  function clampInput(
+    e: Event,
+    min: number,
+    max: number,
+    setter: (v: number) => void,
+  ) {
     const el = e.target as HTMLInputElement;
     const n = parseInt(el.value, 10);
     if (isNaN(n) || n < min) setter(min);
     else if (n > max) setter(max);
     else setter(n);
   }
-
 </script>
 
 <div class="estimate-page">
   <!-- Back link + title -->
   <a href="/{organization}/-/settings/billing" class="back-link">
-    <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+    <svg
+      class="w-3.5 h-3.5"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+    >
       <path d="M9 2.5L4.5 7 9 11.5" />
     </svg>
     Billing
@@ -125,7 +139,13 @@
   <div class="page-header">
     <span class="prefill-note">Pre-filled from your current deployment</span>
     <button class="reset-btn" onclick={resetToUsage}>
-      <svg class="w-3.5 h-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+      <svg
+        class="w-3.5 h-3.5"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      >
         <path d="M1.5 2.5v3.5h3.5" />
         <path d="M2.1 8.5a5 5 0 1 0 .9-4.5L1.5 6" />
       </svg>
@@ -148,8 +168,18 @@
           <span class="input-desc">Minimum 2 units</span>
         </div>
         <div class="stepper">
-          <button class="stepper-btn" onclick={() => prodUnits--} disabled={prodUnits <= 2}>−</button>
-          <input class="stepper-input" type="number" bind:value={prodUnits} min="2" onblur={(e) => clampInput(e, 2, 9999, (v) => prodUnits = v)} />
+          <button
+            class="stepper-btn"
+            onclick={() => prodUnits--}
+            disabled={prodUnits <= 2}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={prodUnits}
+            min="2"
+            onblur={(e) => clampInput(e, 2, 9999, (v) => (prodUnits = v))}
+          />
           <button class="stepper-btn" onclick={() => prodUnits++}>+</button>
         </div>
       </div>
@@ -163,8 +193,18 @@
           <span class="input-desc">Optional · Same rate as prod unit</span>
         </div>
         <div class="stepper">
-          <button class="stepper-btn" onclick={() => devUnits--} disabled={devUnits <= 0}>−</button>
-          <input class="stepper-input" type="number" bind:value={devUnits} min="0" onblur={(e) => clampInput(e, 0, 9999, (v) => devUnits = v)} />
+          <button
+            class="stepper-btn"
+            onclick={() => devUnits--}
+            disabled={devUnits <= 0}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={devUnits}
+            min="0"
+            onblur={(e) => clampInput(e, 0, 9999, (v) => (devUnits = v))}
+          />
           <button class="stepper-btn" onclick={() => devUnits++}>+</button>
         </div>
       </div>
@@ -175,11 +215,23 @@
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Storage (GB)</span>
-          <span class="input-desc">1 GB included free · $1/GB/mo above that</span>
+          <span class="input-desc"
+            >1 GB included free · $1/GB/mo above that</span
+          >
         </div>
         <div class="stepper">
-          <button class="stepper-btn" onclick={() => storageGB--} disabled={storageGB <= 1}>−</button>
-          <input class="stepper-input" type="number" bind:value={storageGB} min="1" onblur={(e) => clampInput(e, 1, 9999, (v) => storageGB = v)} />
+          <button
+            class="stepper-btn"
+            onclick={() => storageGB--}
+            disabled={storageGB <= 1}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={storageGB}
+            min="1"
+            onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
+          />
           <button class="stepper-btn" onclick={() => storageGB++}>+</button>
         </div>
       </div>
@@ -190,12 +242,29 @@
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Hours per day</span>
-          <span class="input-desc">24 = always on · Lower if you pause units at night</span>
+          <span class="input-desc"
+            >24 = always on · Lower if you pause units at night</span
+          >
         </div>
         <div class="stepper">
-          <button class="stepper-btn" onclick={() => hoursPerDay--} disabled={hoursPerDay <= 1}>−</button>
-          <input class="stepper-input" type="number" bind:value={hoursPerDay} min="1" max="24" onblur={(e) => clampInput(e, 1, 24, (v) => hoursPerDay = v)} />
-          <button class="stepper-btn" onclick={() => hoursPerDay++} disabled={hoursPerDay >= 24}>+</button>
+          <button
+            class="stepper-btn"
+            onclick={() => hoursPerDay--}
+            disabled={hoursPerDay <= 1}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={hoursPerDay}
+            min="1"
+            max="24"
+            onblur={(e) => clampInput(e, 1, 24, (v) => (hoursPerDay = v))}
+          />
+          <button
+            class="stepper-btn"
+            onclick={() => hoursPerDay++}
+            disabled={hoursPerDay >= 24}>+</button
+          >
         </div>
       </div>
     </div>
@@ -213,7 +282,9 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Production</span>
           <span class="cost-row-desc">
-            {prodUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(2)}
+            {prodUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
+              2,
+            )}
           </span>
         </div>
         <span class="cost-row-amount">{fmtUSD(prodCost)}</span>
@@ -224,7 +295,9 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Development</span>
           <span class="cost-row-desc">
-            {devUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(2)}
+            {devUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
+              2,
+            )}
           </span>
         </div>
         <span class="cost-row-amount">{fmtUSD(devCost)}</span>
@@ -235,7 +308,8 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Storage (GB)</span>
           <span class="cost-row-desc">
-            {storageGB} GB − {FREE_STORAGE_GB} GB free = {billableStorageGB} GB × ${STORAGE_RATE_PER_GB}
+            {storageGB} GB − {FREE_STORAGE_GB} GB free = {billableStorageGB} GB ×
+            ${STORAGE_RATE_PER_GB}
           </span>
         </div>
         <span class="cost-row-amount">{fmtUSD(storageCost)}</span>
@@ -436,7 +510,7 @@
 
   .first-bill {
     @apply flex items-center justify-between rounded-lg px-4 py-3 mt-2;
-    background: var(--rill-colors-theme-primary-50, #ECF0FF);
+    background: var(--rill-colors-theme-primary-50, #ecf0ff);
   }
 
   .first-bill-label {

From 483de69e72eff733622e05f80a366585b545eec3 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 17:10:36 -0400
Subject: [PATCH 21/24] asreq

---
 .../-/settings/billing/estimate/+page.svelte  | 165 +++++++++++++-----
 1 file changed, 119 insertions(+), 46 deletions(-)

diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
index 13d4cdced61..a2a17af5d08 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -5,8 +5,13 @@
   } from "@rilldata/web-admin/client";
   import {
     fetchPaymentsPortalURL,
+    getBillingUpgradeUrl,
     getOrganizationUsageMetrics,
   } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
+  import { page } from "$app/stores";
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
@@ -33,9 +38,10 @@
 
   // Editable inputs
   let prodUnits = $state(2);
+  let prodHoursPerDay = $state(24);
   let devUnits = $state(0);
+  let devHoursPerDay = $state(24);
   let storageGB = $state(1);
-  let hoursPerDay = $state(24);
 
   // Pre-fill from current deployment once data loads
   let prefilled = $state(false);
@@ -44,16 +50,16 @@
       prodUnits = Math.max(currentProdSlots, 2);
       devUnits = currentDevSlots;
       storageGB = Math.max(currentStorageGB, 1);
-      hoursPerDay = 24;
       prefilled = true;
     }
   });
 
   function resetToUsage() {
     prodUnits = Math.max(currentProdSlots, 2);
+    prodHoursPerDay = 24;
     devUnits = currentDevSlots;
+    devHoursPerDay = 24;
     storageGB = Math.max(currentStorageGB, 1);
-    hoursPerDay = 24;
   }
 
   // Pricing constants
@@ -64,10 +70,10 @@
 
   // Cost calculations
   let prodCost = $derived(
-    prodUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+    prodUnits * prodHoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
   );
   let devCost = $derived(
-    devUnits * hoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+    devUnits * devHoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
   );
   let billableStorageGB = $derived(Math.max(storageGB - FREE_STORAGE_GB, 0));
   let storageCost = $derived(billableStorageGB * STORAGE_RATE_PER_GB);
@@ -95,9 +101,21 @@
     });
   }
 
+  let isCurrentConfig = $derived(
+    prodUnits === Math.max(currentProdSlots, 2) &&
+      prodHoursPerDay === 24 &&
+      devUnits === currentDevSlots &&
+      devHoursPerDay === 24 &&
+      storageGB === Math.max(currentStorageGB, 1),
+  );
+
   async function handleSubscribe() {
     window.open(
-      await fetchPaymentsPortalURL(organization, window.location.href),
+      await fetchPaymentsPortalURL(
+        organization,
+        getBillingUpgradeUrl($page, organization),
+        true,
+      ),
       "_self",
     );
   }
@@ -138,7 +156,7 @@
 
   <div class="page-header">
     <span class="prefill-note">Pre-filled from your current deployment</span>
-    <button class="reset-btn" onclick={resetToUsage}>
+    <button class="reset-btn" onclick={resetToUsage} disabled={isCurrentConfig}>
       <svg
         class="w-3.5 h-3.5"
         viewBox="0 0 14 14"
@@ -149,7 +167,7 @@
         <path d="M1.5 2.5v3.5h3.5" />
         <path d="M2.1 8.5a5 5 0 1 0 .9-4.5L1.5 6" />
       </svg>
-      Reset to my usage
+      Reset to current configuration
     </button>
   </div>
 
@@ -158,14 +176,14 @@
     <div class="input-panel">
       <div class="panel-header">
         <span class="panel-title">Select compute unit</span>
-        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU</span>
+        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU · $0.15/unit/hr</span>
       </div>
 
-      <!-- Production -->
+      <!-- Production units -->
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Production</span>
-          <span class="input-desc">Minimum 2 units</span>
+          <span class="input-desc">Minimum 2 units · $0.15/unit/hr</span>
         </div>
         <div class="stepper">
           <button
@@ -184,13 +202,52 @@
         </div>
       </div>
 
+      <!-- Production active hours -->
+      <div class="input-row input-row-sub">
+        <div class="input-info">
+          <span class="input-label-sub inline-flex items-center gap-1">
+            Active hours per day
+            <Tooltip location="right" alignment="middle" distance={8}>
+              <span class="text-fg-muted flex">
+                <InfoCircle size="13px" />
+              </span>
+              <TooltipContent maxWidth="220px" slot="tooltip-content">
+                We hibernate your deployment when it's inactive, saving you on
+                cost.
+              </TooltipContent>
+            </Tooltip>
+          </span>
+        </div>
+        <div class="stepper">
+          <button
+            class="stepper-btn"
+            onclick={() => prodHoursPerDay--}
+            disabled={prodHoursPerDay <= 1}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={prodHoursPerDay}
+            min="1"
+            max="24"
+            onblur={(e) =>
+              clampInput(e, 1, 24, (v) => (prodHoursPerDay = v))}
+          />
+          <button
+            class="stepper-btn"
+            onclick={() => prodHoursPerDay++}
+            disabled={prodHoursPerDay >= 24}>+</button
+          >
+        </div>
+      </div>
+
       <div class="input-divider"></div>
 
-      <!-- Development -->
+      <!-- Development units -->
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Development</span>
-          <span class="input-desc">Optional · Same rate as prod unit</span>
+          <span class="input-desc">Same rate as prod unit</span>
         </div>
         <div class="stepper">
           <button
@@ -209,62 +266,68 @@
         </div>
       </div>
 
-      <div class="input-divider"></div>
-
-      <!-- Storage -->
-      <div class="input-row">
+      <!-- Development active hours -->
+      <div class="input-row input-row-sub">
         <div class="input-info">
-          <span class="input-label">Storage (GB)</span>
-          <span class="input-desc"
-            >1 GB included free · $1/GB/mo above that</span
-          >
+          <span class="input-label-sub inline-flex items-center gap-1">
+            Active hours per day
+            <Tooltip location="right" alignment="middle" distance={8}>
+              <span class="text-fg-muted flex">
+                <InfoCircle size="13px" />
+              </span>
+              <TooltipContent maxWidth="220px" slot="tooltip-content">
+                We hibernate your deployment when it's inactive, saving you on
+                cost.
+              </TooltipContent>
+            </Tooltip>
+          </span>
         </div>
         <div class="stepper">
           <button
             class="stepper-btn"
-            onclick={() => storageGB--}
-            disabled={storageGB <= 1}>−</button
+            onclick={() => devHoursPerDay--}
+            disabled={devHoursPerDay <= 1}>−</button
           >
           <input
             class="stepper-input"
             type="number"
-            bind:value={storageGB}
+            bind:value={devHoursPerDay}
             min="1"
-            onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
+            max="24"
+            onblur={(e) => clampInput(e, 1, 24, (v) => (devHoursPerDay = v))}
           />
-          <button class="stepper-btn" onclick={() => storageGB++}>+</button>
+          <button
+            class="stepper-btn"
+            onclick={() => devHoursPerDay++}
+            disabled={devHoursPerDay >= 24}>+</button
+          >
         </div>
       </div>
 
       <div class="input-divider"></div>
 
-      <!-- Hours per day -->
+      <!-- Storage -->
       <div class="input-row">
         <div class="input-info">
-          <span class="input-label">Hours per day</span>
+          <span class="input-label">Storage (GB)</span>
           <span class="input-desc"
-            >24 = always on · Lower if you pause units at night</span
+            >1 GB included free · $1/GB/mo above that</span
           >
         </div>
         <div class="stepper">
           <button
             class="stepper-btn"
-            onclick={() => hoursPerDay--}
-            disabled={hoursPerDay <= 1}>−</button
+            onclick={() => storageGB--}
+            disabled={storageGB <= 1}>−</button
           >
           <input
             class="stepper-input"
             type="number"
-            bind:value={hoursPerDay}
+            bind:value={storageGB}
             min="1"
-            max="24"
-            onblur={(e) => clampInput(e, 1, 24, (v) => (hoursPerDay = v))}
+            onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
           />
-          <button
-            class="stepper-btn"
-            onclick={() => hoursPerDay++}
-            disabled={hoursPerDay >= 24}>+</button
-          >
+          <button class="stepper-btn" onclick={() => storageGB++}>+</button>
         </div>
       </div>
     </div>
@@ -282,7 +345,7 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Production</span>
           <span class="cost-row-desc">
-            {prodUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
+            {prodUnits} units × {prodHoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
               2,
             )}
           </span>
@@ -295,7 +358,7 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Development</span>
           <span class="cost-row-desc">
-            {devUnits} units × {hoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
+            {devUnits} units × {devHoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
               2,
             )}
           </span>
@@ -323,8 +386,8 @@
         <span class="cost-row-amount font-semibold">{fmtUSD(monthlyCost)}</span>
       </div>
 
-      <!-- Available credit -->
-      {#if availableCredit > 0}
+      <!-- Available credit (trial/team plans only) -->
+      {#if !isPro && availableCredit > 0}
         <div class="cost-row">
           <div class="cost-row-info">
             <span class="credit-label">Available credit</span>
@@ -333,9 +396,8 @@
           <span class="credit-amount">-{fmtUSD(availableCredit)}</span>
         </div>
 
-        <!-- First bill highlight -->
         <div class="first-bill">
-          <span class="first-bill-label">First bill</span>
+          <span class="first-bill-label">Estimated first bill</span>
           <span class="first-bill-amount">{fmtUSD(firstBill)}</span>
         </div>
 
@@ -385,9 +447,12 @@
   .reset-btn {
     @apply flex items-center gap-1.5 text-sm font-medium text-primary-500 bg-transparent border-none cursor-pointer p-0;
   }
-  .reset-btn:hover {
+  .reset-btn:hover:not(:disabled) {
     @apply text-primary-600;
   }
+  .reset-btn:disabled {
+    @apply text-fg-disabled cursor-default;
+  }
 
   .estimate-grid {
     @apply grid gap-6;
@@ -432,6 +497,14 @@
     @apply border-t border-border;
   }
 
+  .input-row-sub {
+    @apply py-2;
+  }
+
+  .input-label-sub {
+    @apply text-xs text-fg-secondary;
+  }
+
   /* Stepper */
   .stepper {
     @apply flex items-center border border-border rounded-md overflow-hidden shrink-0;

From 4b18f9fd861218178837722293c85a647dec3d0d Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 17:11:09 -0400
Subject: [PATCH 22/24] prettier

---
 .../[organization]/-/settings/billing/estimate/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
index a2a17af5d08..ff911af515c 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -176,7 +176,8 @@
     <div class="input-panel">
       <div class="panel-header">
         <span class="panel-title">Select compute unit</span>
-        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU · $0.15/unit/hr</span>
+        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU · $0.15/unit/hr</span
+        >
       </div>
 
       <!-- Production units -->
@@ -230,8 +231,7 @@
             bind:value={prodHoursPerDay}
             min="1"
             max="24"
-            onblur={(e) =>
-              clampInput(e, 1, 24, (v) => (prodHoursPerDay = v))}
+            onblur={(e) => clampInput(e, 1, 24, (v) => (prodHoursPerDay = v))}
           />
           <button
             class="stepper-btn"

From 2c559fcad16edc19a83cee2849ce2ed3beb37ba3 Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 21 Apr 2026 18:39:50 -0400
Subject: [PATCH 23/24] as req

---
 .../-/settings/billing/estimate/+page.svelte  | 91 +++++++++++--------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
index ff911af515c..0f3be82545c 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -174,17 +174,20 @@
   <div class="estimate-grid">
     <!-- LEFT: Input panel -->
     <div class="input-panel">
-      <div class="panel-header">
-        <span class="panel-title">Select compute unit</span>
-        <span class="unit-hint">1 unit = 4 GiB RAM, 1 vCPU · $0.15/unit/hr</span
-        >
+      <!-- Compute subsection -->
+      <div class="subsection-header">
+        <div class="subsection-title-group">
+          <span class="subsection-title">Compute</span>
+          <span class="subsection-sub">1 unit = 4 GiB RAM, 1 vCPU</span>
+        </div>
+        <span class="subsection-rate">$0.15/unit/hr</span>
       </div>
 
       <!-- Production units -->
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Production</span>
-          <span class="input-desc">Minimum 2 units · $0.15/unit/hr</span>
+          <span class="input-desc">Minimum 2 units</span>
         </div>
         <div class="stepper">
           <button
@@ -212,9 +215,9 @@
               <span class="text-fg-muted flex">
                 <InfoCircle size="13px" />
               </span>
-              <TooltipContent maxWidth="220px" slot="tooltip-content">
-                We hibernate your deployment when it's inactive, saving you on
-                cost.
+              <TooltipContent maxWidth="240px" slot="tooltip-content">
+                Deployments hibernate when inactive, so you're only billed for
+                active hours.
               </TooltipContent>
             </Tooltip>
           </span>
@@ -247,7 +250,6 @@
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Development</span>
-          <span class="input-desc">Same rate as prod unit</span>
         </div>
         <div class="stepper">
           <button
@@ -275,9 +277,9 @@
               <span class="text-fg-muted flex">
                 <InfoCircle size="13px" />
               </span>
-              <TooltipContent maxWidth="220px" slot="tooltip-content">
-                We hibernate your deployment when it's inactive, saving you on
-                cost.
+              <TooltipContent maxWidth="240px" slot="tooltip-content">
+                Deployments hibernate when inactive, so you're only billed for
+                active hours.
               </TooltipContent>
             </Tooltip>
           </span>
@@ -304,15 +306,15 @@
         </div>
       </div>
 
-      <div class="input-divider"></div>
+      <!-- Storage subsection -->
+      <div class="subsection-header subsection-header-gap">
+        <span class="subsection-title">Storage</span>
+        <span class="subsection-rate">$1/GB/mo above 1 GB free</span>
+      </div>
 
-      <!-- Storage -->
       <div class="input-row">
         <div class="input-info">
           <span class="input-label">Storage (GB)</span>
-          <span class="input-desc"
-            >1 GB included free · $1/GB/mo above that</span
-          >
         </div>
         <div class="stepper">
           <button
@@ -334,7 +336,7 @@
 
     <!-- RIGHT: Cost summary -->
     <div class="cost-panel">
-      <h2 class="cost-title">Estimate monthly cost</h2>
+      <h2 class="cost-title">Estimated monthly cost</h2>
       <span class="cost-total">{fmtUSD(monthlyCost)}</span>
       <span class="cost-daily">~{fmtUSD(dailyCost)}/day</span>
 
@@ -345,9 +347,8 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Production</span>
           <span class="cost-row-desc">
-            {prodUnits} units × {prodHoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
-              2,
-            )}
+            {prodUnits} units × {prodHoursPerDay} hrs/day × {DAYS_PER_MONTH} days
+            × ${RATE_PER_UNIT_HR.toFixed(2)}/unit/hr
           </span>
         </div>
         <span class="cost-row-amount">{fmtUSD(prodCost)}</span>
@@ -358,25 +359,25 @@
         <div class="cost-row-info">
           <span class="cost-row-label">Development</span>
           <span class="cost-row-desc">
-            {devUnits} units × {devHoursPerDay} hrs × {DAYS_PER_MONTH} days × ${RATE_PER_UNIT_HR.toFixed(
-              2,
-            )}
+            {devUnits} units × {devHoursPerDay} hrs/day × {DAYS_PER_MONTH} days ×
+            ${RATE_PER_UNIT_HR.toFixed(2)}/unit/hr
           </span>
         </div>
         <span class="cost-row-amount">{fmtUSD(devCost)}</span>
       </div>
 
-      <!-- Storage breakdown -->
-      <div class="cost-row">
-        <div class="cost-row-info">
-          <span class="cost-row-label">Storage (GB)</span>
-          <span class="cost-row-desc">
-            {storageGB} GB − {FREE_STORAGE_GB} GB free = {billableStorageGB} GB ×
-            ${STORAGE_RATE_PER_GB}
-          </span>
+      <!-- Storage breakdown (hidden when no billable storage) -->
+      {#if billableStorageGB > 0}
+        <div class="cost-row">
+          <div class="cost-row-info">
+            <span class="cost-row-label">Storage (GB)</span>
+            <span class="cost-row-desc">
+              {billableStorageGB} billable GB × ${STORAGE_RATE_PER_GB}/GB/mo
+            </span>
+          </div>
+          <span class="cost-row-amount">{fmtUSD(storageCost)}</span>
         </div>
-        <span class="cost-row-amount">{fmtUSD(storageCost)}</span>
-      </div>
+      {/if}
 
       <div class="cost-divider"></div>
 
@@ -402,7 +403,7 @@
         </div>
 
         <span class="recurring-note">
-          Then {fmtUSD(monthlyCost)}/mo based on current usage
+          Then {fmtUSD(monthlyCost)}/mo at this configuration
         </span>
       {/if}
 
@@ -465,15 +466,27 @@
     @apply border border-border rounded-xl bg-white p-6 flex flex-col;
   }
 
-  .panel-header {
-    @apply flex items-center justify-between mb-4;
+  .subsection-header {
+    @apply flex items-center justify-between mb-1;
+  }
+
+  .subsection-header-gap {
+    @apply mt-4;
   }
 
-  .panel-title {
+  .subsection-title-group {
+    @apply flex items-baseline gap-2;
+  }
+
+  .subsection-title {
     @apply text-sm font-semibold text-fg-primary;
   }
 
-  .unit-hint {
+  .subsection-sub {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .subsection-rate {
     @apply text-xs text-fg-tertiary;
   }
 

From b970dc005f3c12205b92b364d28525e2ea3a846a Mon Sep 17 00:00:00 2001
From: royendo <67675319+royendo@users.noreply.github.com>
Date: Tue, 21 Apr 2026 18:42:22 -0400
Subject: [PATCH 24/24] separating for visual clarity

---
 .../-/settings/billing/estimate/+page.svelte  | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
index 0f3be82545c..fad648d38ad 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -172,8 +172,10 @@
   </div>
 
   <div class="estimate-grid">
-    <!-- LEFT: Input panel -->
-    <div class="input-panel">
+    <!-- LEFT: Input cards -->
+    <div class="input-column">
+      <!-- Compute card -->
+      <div class="input-panel">
       <!-- Compute subsection -->
       <div class="subsection-header">
         <div class="subsection-title-group">
@@ -306,30 +308,34 @@
         </div>
       </div>
 
-      <!-- Storage subsection -->
-      <div class="subsection-header subsection-header-gap">
-        <span class="subsection-title">Storage</span>
-        <span class="subsection-rate">$1/GB/mo above 1 GB free</span>
       </div>
 
-      <div class="input-row">
-        <div class="input-info">
-          <span class="input-label">Storage (GB)</span>
+      <!-- Storage card -->
+      <div class="input-panel">
+        <div class="subsection-header">
+          <span class="subsection-title">Storage</span>
+          <span class="subsection-rate">$1/GB/mo above 1 GB free</span>
         </div>
-        <div class="stepper">
-          <button
-            class="stepper-btn"
-            onclick={() => storageGB--}
-            disabled={storageGB <= 1}>−</button
-          >
-          <input
-            class="stepper-input"
-            type="number"
-            bind:value={storageGB}
-            min="1"
-            onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
-          />
-          <button class="stepper-btn" onclick={() => storageGB++}>+</button>
+
+        <div class="input-row">
+          <div class="input-info">
+            <span class="input-label">Storage (GB)</span>
+          </div>
+          <div class="stepper">
+            <button
+              class="stepper-btn"
+              onclick={() => storageGB--}
+              disabled={storageGB <= 1}>−</button
+            >
+            <input
+              class="stepper-input"
+              type="number"
+              bind:value={storageGB}
+              min="1"
+              onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
+            />
+            <button class="stepper-btn" onclick={() => storageGB++}>+</button>
+          </div>
         </div>
       </div>
     </div>
@@ -461,7 +467,11 @@
     align-items: start;
   }
 
-  /* Left panel */
+  /* Left column */
+  .input-column {
+    @apply flex flex-col gap-4;
+  }
+
   .input-panel {
     @apply border border-border rounded-xl bg-white p-6 flex flex-col;
   }
@@ -470,10 +480,6 @@
     @apply flex items-center justify-between mb-1;
   }
 
-  .subsection-header-gap {
-    @apply mt-4;
-  }
-
   .subsection-title-group {
     @apply flex items-baseline gap-2;
   }