Merge pull request #2934 from appwrite/chore/usage-update

feat: add realtime connections and messages metrics to usage reports

Author: lohanidamodar

bun.lock

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@83fd10c",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@d223f36",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
@@ -41,7 +41,7 @@
         "flatted": "^3.4.2",
         "ignore": "^6.0.2",
         "nanoid": "^5.1.7",
-        "nanotar": "^0.1.1",
+        "nanotar": "^0.3.0",
         "pretty-bytes": "^6.1.1",
         "remarkable": "^2.0.1",
         "svelte-confetti": "^1.4.0",
@@ -91,8 +91,11 @@
     "overrides": {
         "vite": "npm:rolldown-vite@latest",
         "minimatch": "10.2.3",
+        "brace-expansion": ">=5.0.5",
         "immutable": "^5.1.5",
         "flatted": "^3.4.2",
-        "picomatch": "^2.3.2"
+        "yaml": "^1.10.3",
+        "picomatch": "^2.3.2",
+        "cookie": "^0.7.0"
     }
 }

package.json

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { browser } from '$app/environment';
+    import { HeaderAlert } from '$lib/layout';
+    import { organization, currentPlan } from '$lib/stores/organization';
+    import { Button } from '$lib/elements/forms';
+
+    const DISMISS_KEY = 'realtimePricingDismissed';
+
+    let dismissed = browser && localStorage.getItem(DISMISS_KEY) === 'true';
+
+    function handleDismiss() {
+        dismissed = true;
+        if (browser) {
+            localStorage.setItem(DISMISS_KEY, 'true');
+        }
+    }
+
+    $: href = $currentPlan?.usagePerProject
+        ? `${base}/organization-${$organization.$id}/billing`
+        : `${base}/organization-${$organization.$id}/usage`;
+</script>
+
+{#if $organization?.$id && !dismissed}
+    <HeaderAlert
+        type="info"
+        title="Realtime pricing enforcement starting April 30th"
+        dismissible
+        on:dismiss={handleDismiss}>
+        <svelte:fragment>
+            Starting April 30th, realtime usage (connections, messages, and bandwidth) will be
+            charged based on your plan's rates. Review your usage to avoid unexpected charges.
+        </svelte:fragment>
+        <svelte:fragment slot="buttons">
+            <Button {href} text fullWidthMobile>
+                <span class="text">View usage</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}

src/lib/components/billing/alerts/realtimePricing.svelte

@@ -67,8 +67,7 @@
         {/each}
         {#each Object.entries(org.billingPlanDetails.usage) as [key, usage]}
             {@const limit = getPlanLimit(key)}
-            {@const show = limit !== false}
-            {#if show}
+            {#if limit !== false}
                 <Table.Row.Base {root}>
                     <Table.Cell column="resource" {root}>{usage.name}</Table.Cell>
                     <Table.Cell column="limit" {root}>
@@ -82,6 +81,18 @@
                         </Table.Cell>
                     {/if}
                 </Table.Row.Base>
+            {:else if usage.price > 0}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="resource" {root}>{usage.name}</Table.Cell>
+                    <Table.Cell column="limit" {root}>Pay-as-you-go</Table.Cell>
+                    {#if !isFree}
+                        <Table.Cell column="rate" {root}>
+                            {formatCurrency(usage.price)}/{abbreviateNumber(
+                                usage.value
+                            )}{usage.unit}
+                        </Table.Cell>
+                    {/if}
+                </Table.Row.Base>
             {/if}
         {/each}
     </Table.Root>

src/lib/components/billing/usageRates.svelte

@@ -112,7 +112,7 @@
 
             const iconName =
                 product === 'sites'
-                    ? detection.framework
+                    ? (detection as unknown as Models.DetectionFramework).framework
                     : (detection as unknown as Models.DetectionRuntime).runtime;
             const resolved = resolveIconUrl(iconName);
             iconCache.set(path, resolved);

src/lib/components/git/selectRootModal.svelte

@@ -191,6 +191,7 @@ export type PlanServices =
     | 'platforms'
     | 'realtime'
     | 'realtimeAddon'
+    | 'realtimeMessages'
     | 'storage'
     | 'storageAddon'
     | 'teams'
@@ -274,6 +275,7 @@ export function checkForUsageFees(plan: string, id: PlanServices) {
             case 'users':
             case 'executions':
             case 'realtime':
+            case 'realtimeMessages':
                 return true;
 
             default:

src/lib/stores/billing.ts

@@ -8,6 +8,7 @@ import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 import { headerAlert } from '$lib/stores/headerAlert';
 import ProjectsAtRisk from '$lib/components/billing/alerts/projectsAtRisk.svelte';
+import RealtimePricing from '$lib/components/billing/alerts/realtimePricing.svelte';
 import { get } from 'svelte/store';
 import { preferences } from '$lib/stores/preferences';
 import { defaultRoles, defaultScopes } from '$lib/constants';
@@ -64,6 +65,15 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
             loadAvailableRegions(params.organization)
         ]);
 
+        if (isCloud && new Date() < new Date('2026-04-22')) {
+            headerAlert.add({
+                show: true,
+                component: RealtimePricing,
+                id: 'realtimePricing',
+                importance: 1
+            });
+        }
+
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,

src/routes/(console)/organization-[organization]/+layout.ts

@@ -361,6 +361,27 @@
                         getResource(resources, 'GBHours'),
                         currentPlan?.GBHours
                     ),
+                    createResourceRow(
+                        'realtime',
+                        'Realtime connections',
+                        getResource(resources, 'realtime'),
+                        currentPlan?.realtime
+                    ),
+                    createResourceRow(
+                        'realtime-messages',
+                        'Realtime messages',
+                        getResource(resources, 'realtimeMessages'),
+                        currentPlan?.realtimeMessages
+                    ),
+                    createRow({
+                        id: 'realtime-bandwidth',
+                        label: 'Realtime bandwidth',
+                        resource: getResource(resources, 'realtimeBandwidth'),
+                        usageFormatter: ({ value }) =>
+                            humanFileSize(value).value + humanFileSize(value).unit,
+                        priceFormatter: ({ amount }) => formatCurrency(amount),
+                        includeProgress: false
+                    }),
                     createRow({
                         id: 'sms',
                         label: 'Phone OTP',