feat: widgets and ai chat

apps/dashboard/src/lib/features/settings/pages/billing.svelte

@@ -1,16 +1,55 @@
 <script lang="ts">
   import { t } from '$lib/utils/functions/translations';
   import { snackbar } from '$features/ui/snackbar/store';
-  import { currentOrgPlan, isFreePlan } from '$lib/utils/store/org';
+  import { currentOrgPlan, isFreePlan, currentOrg } from '$lib/utils/store/org';
   import HourglassIcon from '@lucide/svelte/icons/hourglass';
+  import SparklesIcon from '@lucide/svelte/icons/sparkles';
   import { openUpgradeModal } from '$lib/utils/functions/org';
   import ReceiptIcon from '@lucide/svelte/icons/receipt';
   import { Button } from '@cio/ui/base/button';
   import * as Item from '@cio/ui/base/item';
   import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
 
+  const PUBLIC_API_URL = import.meta.env.VITE_API_URL || '';
+
   let isRedirecting = $state(false);
 
+  interface AiUsageData {
+    used: number;
+    allowance: number;
+    creditBalance: number;
+    remaining: number;
+  }
+
+  let aiUsage: AiUsageData | null = $state(null);
+  let aiUsageLoaded = $state(false);
+
+  $effect(() => {
+    if (!aiUsageLoaded && $currentOrg.id) {
+      aiUsageLoaded = true;
+      fetchAiUsage();
+    }
+  });
+
+  async function fetchAiUsage() {
+    try {
+      const response = await fetch(`${PUBLIC_API_URL}/agent/usage`, {
+        headers: { 'Cio-org-id': $currentOrg.id || '' },
+        credentials: 'include'
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+
+        if (result.success) {
+          aiUsage = result.data;
+        }
+      }
+    } catch {
+      // Silently fail
+    }
+  }
+
   async function onOpenBilling() {
     console.log({
       plan: $currentOrgPlan
@@ -80,4 +119,39 @@
       </Item.Actions>
     </Item.Root>
   {/if}
+
+  {#if aiUsage}
+    <div class="mt-6">
+      <p class="text-md mb-3 font-medium">{$t('settings.billing.ai_credits')}</p>
+
+      <Item.Root variant="outline">
+        <Item.Media variant="icon">
+          <SparklesIcon />
+        </Item.Media>
+        <Item.Content>
+          <Item.Title>
+            {aiUsage.used.toLocaleString()} / {aiUsage.allowance.toLocaleString()}
+            {$t('settings.billing.ai_tokens_used')}
+          </Item.Title>
+          <Item.Description>
+            {aiUsage.creditBalance.toLocaleString()}
+            {$t('settings.billing.ai_bonus_credits')}
+          </Item.Description>
+
+          {@const usagePercent =
+            aiUsage.allowance > 0 ? Math.min(100, Math.round((aiUsage.used / aiUsage.allowance) * 100)) : 0}
+          <div class="ui:bg-muted mt-2 h-1.5 w-full rounded-full">
+            <div
+              class="h-1.5 rounded-full transition-all {usagePercent > 90
+                ? 'bg-red-500'
+                : usagePercent > 70
+                  ? 'bg-amber-500'
+                  : 'ui:bg-primary'}"
+              style="width: {usagePercent}%"
+            ></div>
+          </div>
+        </Item.Content>
+      </Item.Root>
+    </div>
+  {/if}
 </div>

apps/dashboard/src/lib/features/settings/pages/landingpage.svelte

@@ -27,19 +27,19 @@
   const themeCards = [
     {
       value: 'minimal',
-      preview: 'https://assets.cdn.clsrio.com/www/templates/minimal.png',
+      preview: '/templates/minimal.png',
       titleKey: 'settings.landing_page.theme.cards.minimal.title',
       descriptionKey: 'settings.landing_page.theme.cards.minimal.description'
     },
     {
       value: 'bold',
-      preview: 'https://assets.cdn.clsrio.com/www/templates/bold.png',
+      preview: '/templates/bold.png',
       titleKey: 'settings.landing_page.theme.cards.bold.title',
       descriptionKey: 'settings.landing_page.theme.cards.bold.description'
     },
     {
       value: 'classic',
-      preview: 'https://assets.cdn.clsrio.com/www/templates/classic.png',
+      preview: '/templates/classic.png',
       titleKey: 'settings.landing_page.theme.cards.classic.title',
       descriptionKey: 'settings.landing_page.theme.cards.classic.description'
     }
@@ -162,7 +162,7 @@
                 Upgrade
               </div>
             {/if}
-            <div class="bg-background mb-4 overflow-hidden rounded-xl">
+            <div class="bg-background mb-4 overflow-hidden rounded-t-xl">
               <img src={themeCard.preview} alt={$t(themeCard.titleKey)} class="h-50 w-full object-cover object-top" />
             </div>
             <div class="space-y-1 px-2 pb-2">