pricing/phase-1: Rill Slots UI on project status overview (#9087)

* Add Rill Slots UI to project status overview

- Add ManageSlotsModal for viewing and adjusting project slot allocation
- Add slots-utils with pricing constants and slot calculation helpers
- Update DeploymentSection to show current slot count with link to details
- Add olapInfo utility for OLAP engine display info
- Update status layout with Deployments nav tab
- Add display-utils for deployment status labels and styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* View only; remove CTA

* code qual

* fix: migrate `ManageSlotsModal` to Svelte 5 runes and event attributes

- Replace `export let` with `$props()` and `$bindable()` for the `open` prop
- Replace `$:` reactive declarations with `$derived`, `$derived.by`, `$state`, and `$effect`
- Replace `on:click` event directives with native `onclick` attributes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve `state_referenced_locally` warning in `ManageSlotsModal`

Initialize selectedSlots with 0 instead of capturing the initial prop value;
the $effect already syncs it from currentSlots when the dialog opens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* tied to 9166, only show for Free Plan and Growth

* Update DeploymentSection.svelte

* Update DeploymentSection.svelte

* Update DeploymentSection.svelte

* remove dead code and plan logic

* free trial too

* slots

* Update utils.ts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add Upgrade to Pro in Team Plan UI too

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Delete ManageSlotsModal.svelte

* fix Plan plan in email due to appending of plan in mail template

* asreq

* doesn support commented out variables

* prettier

* apparently doesnt like any commented out code

* Update DeploymentSection.svelte

* export to function

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: royendo

admin/billing/orb.go

@@ -669,9 +669,9 @@ func getPlanDisplayName(externalID string) string {
 	case "managed":
 		return "Managed"
 	case "free_plan":
-		return "Free Plan"
+		return "Free"
 	case "pro_plan":
-		return "Pro Plan"
+		return "Pro"
 	default:
 		return "Enterprise"
 	}

web-admin/src/features/billing/plans/ProPlan.svelte

@@ -19,7 +19,7 @@
   } = $props();
 </script>
 
-<SettingsContainer title={plan?.displayName ?? "Pro Plan"}>
+<SettingsContainer title={plan?.displayName ?? "Pro"}>
   <div slot="body">
     Next billing cycle will start on
     <b>{getNextBillingCycleDate(subscription.currentBillingCycleEndDate)}</b>.

web-admin/src/features/projects/status/overview/ClusterSize.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let slots: number;
+</script>
+
+<span>
+  {slots * 4} GiB RAM, {slots} vCPU
+  <span class="text-fg-tertiary text-xs ml-1">
+    ({slots}
+    {slots === 1 ? "Compute unit" : "Compute units"})
+  </span>
+</span>

web-admin/src/features/projects/status/overview/DeploymentSection.svelte

@@ -2,8 +2,14 @@
   import { page } from "$app/stores";
   import {
     createAdminServiceGetProject,
+    createAdminServiceGetBillingSubscription,
     V1DeploymentStatus,
   } from "@rilldata/web-admin/client";
+  import {
+    isFreePlan,
+    isProPlan,
+    isTrialPlan,
+  } from "@rilldata/web-admin/features/billing/plans/utils";
   import { extractBranchFromPath } from "@rilldata/web-admin/features/branches/branch-utils";
   import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors";
   import { useGithubLastSynced } from "@rilldata/web-admin/features/projects/selectors";
@@ -30,6 +36,7 @@
   import { getGitUrlFromRemote } from "@rilldata/web-common/features/project/deploy/github-utils";
   import ProjectClone from "./ProjectClone.svelte";
   import OverviewCard from "@rilldata/web-common/features/projects/status/overview/OverviewCard.svelte";
+  import ClusterSize from "./ClusterSize.svelte";
 
   export let organization: string;
   export let project: string;
@@ -105,17 +112,30 @@
   $: aiConnector = instance?.projectConnectors?.find(
     (c) => c.name === instance?.aiConnector,
   );
+
+  // Slots
+  $: currentSlots = Number(projectData?.prodSlots) || 0;
+
+  // Billing plan detection
+  $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization);
+  $: planName = $subscriptionQuery?.data?.subscription?.plan?.name ?? "";
+  $: showSlots =
+    isTrialPlan(planName) || isFreePlan(planName) || isProPlan(planName);
 </script>
 
 <OverviewCard title="Deployment">
-  <ProjectClone
-    slot="header-right"
-    {organization}
-    {project}
-    gitRemote={projectData?.gitRemote}
-    managedGitId={projectData?.managedGitId}
-    disabled={!!parserReconcileError}
-  />
+  <div slot="header-right" class="flex items-center gap-3">
+    <!-- TODO: re-add "Upgrade to Pro" link when ready.
+         Gate on: canManage && (isTrialPlan || isFreePlan || isTeamPlan) && !subscriptionQuery.isLoading
+    -->
+    <ProjectClone
+      {organization}
+      {project}
+      gitRemote={projectData?.gitRemote}
+      managedGitId={projectData?.managedGitId}
+      disabled={!!parserReconcileError}
+    />
+  </div>
 
   <div class="info-grid">
     <div class="info-row">
@@ -137,6 +157,15 @@
       </span>
     </div>
 
+    {#if !$subscriptionQuery?.isLoading && showSlots}
+      <div class="info-row">
+        <span class="info-label">Cluster Size</span>
+        <span class="info-value">
+          <ClusterSize slots={currentSlots} />
+        </span>
+      </div>
+    {/if}
+
     {#if isGithubConnected}
       <div class="info-row">
         <span class="info-label">Repo</span>

web-admin/src/features/projects/status/overview/slots-utils.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import {
+  SLOT_TIERS,
+  POPULAR_SLOTS,
+  ALL_SLOTS,
+  DEFAULT_MANAGED_SLOTS,
+  DEFAULT_SELF_MANAGED_SLOTS,
+} from "./slots-utils";
+
+describe("slots-utils", () => {
+  it("all tiers list has expected entries", () => {
+    expect(SLOT_TIERS).toHaveLength(ALL_SLOTS.length);
+  });
+
+  it("popular slots list has expected entries", () => {
+    expect(POPULAR_SLOTS).toHaveLength(6);
+  });
+
+  it("managed default is 2 slots", () => {
+    expect(DEFAULT_MANAGED_SLOTS).toBe(2);
+  });
+
+  it("self-managed default is 4 slots", () => {
+    expect(DEFAULT_SELF_MANAGED_SLOTS).toBe(4);
+  });
+
+  it("all slot values are at least managed minimum", () => {
+    for (const s of ALL_SLOTS) {
+      expect(s).toBeGreaterThanOrEqual(DEFAULT_MANAGED_SLOTS);
+    }
+  });
+
+  it("tiers have correct bill calculations", () => {
+    const tier = SLOT_TIERS[0]; // 2 slots
+    expect(tier.slots).toBe(2);
+    expect(tier.rillBill).toBe(Math.round(2 * 0.15 * 730));
+  });
+});

web-admin/src/features/projects/status/overview/slots-utils.ts

@@ -0,0 +1,28 @@
+export const SLOT_RATE_PER_HR = 0.15;
+export const HOURS_PER_MONTH = 730;
+
+// Default slots by deployment type
+export const DEFAULT_MANAGED_SLOTS = 2; // Rill-managed (DuckDB)
+export const DEFAULT_SELF_MANAGED_SLOTS = 4; // Self-managed (MotherDuck, ClickHouse, Druid, Pinot, StarRocks)
+
+export interface SlotTier {
+  slots: number;
+  instance: string;
+  rillBill: number;
+}
+
+function tier(slots: number, rate = SLOT_RATE_PER_HR): SlotTier {
+  return {
+    slots,
+    instance: `${slots * 4}GiB / ${slots}vCPU`,
+    rillBill: Math.round(slots * rate * HOURS_PER_MONTH),
+  };
+}
+
+// Popular slot values shown by default
+export const POPULAR_SLOTS = [2, 3, 4, 8, 16, 30];
+
+// All available slot values including intermediate sizes
+export const ALL_SLOTS = [2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 20, 24, 28, 30];
+
+export const SLOT_TIERS: SlotTier[] = ALL_SLOTS.map((s) => tier(s));