diff --git a/.env.example b/.env.example
index f4b299a..e10ac81 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,10 @@
 NUXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
 
+# Real-time chat streaming (Laravel Reverb). Leave REVERB_KEY empty to run on
+# polling only. Host/port are where the browser reaches the Reverb server (the
+# published docker port, default 6001).
+NUXT_PUBLIC_REVERB_KEY=your-reverb-app-key
+NUXT_PUBLIC_REVERB_HOST=localhost
+NUXT_PUBLIC_REVERB_PORT=6001
+NUXT_PUBLIC_REVERB_SCHEME=http
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76a02f1..90249a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-beta.1] - 2026-07-11
+
+### Added
+
+- Unified AI chat experience with a side canvas; chat can be the landing surface via a landing-mode setting, backed by a dashboard assistant hub
+- Live assistant progress streamed over websockets with a polling fallback, and an enriched chat landing with live insights and suggested prompts
+- Settings panel to connect AI clients over MCP
+- Financial position, holdings, and intent-tagging UI
+- Admin console UI with outreach and onboarding
+- Plugin-described UI rendered through extension slots
+- Recent-imports list with delete and a live link into chat
+- Section-by-section progressive dashboard stats and a streamed transactions spreadsheet with faster reports
+- Navigation and top-bar icons unified; the assistant moved to `/assistant`
+
+### Changed
+
+- Renamed the country preference configuration key to `country`
+- Removed duplicate dashboard stats requests and cache bypass
+- Added assistant, import, and canvas translation strings
+
+### Fixed
+
+- Canvas report now prints with correct styling and margins
+- Pie and donut charts render as intended instead of downgrading to bar
+
 ## [1.1.2] - 2026-05-18
 
 ### Changed
diff --git a/assets/scss/_onboarding.scss b/assets/scss/_onboarding.scss
index 9553a08..c386dc1 100644
--- a/assets/scss/_onboarding.scss
+++ b/assets/scss/_onboarding.scss
@@ -96,18 +96,25 @@
 }
 
 .step-icon {
-  width: 60px;
-  height: 60px;
-  background: $primary-light;
-  border-radius: 50%;
+  width: 88px;
+  height: 88px;
+  border-radius: 26px;
+  background:
+    radial-gradient(120% 120% at 30% 18%, $primary-light, transparent 72%),
+    linear-gradient(
+      135deg,
+      rgba(var(--color-primary-rgb), 0.16),
+      rgba(var(--color-primary-rgb), 0.04)
+    );
+  box-shadow: $elevation-1;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
 
   svg {
-    width: 28px;
-    height: 28px;
+    width: 46px;
+    height: 46px;
     color: $primary;
   }
 }
@@ -178,10 +185,12 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  box-shadow: 0 6px 16px -6px rgba(var(--color-primary-rgb), 0.55);
 
   &:hover:not(:disabled) {
     background: $primary-hover;
     transform: translateY(-1px);
+    box-shadow: 0 10px 22px -8px rgba(var(--color-primary-rgb), 0.6);
   }
 
   &:disabled {
@@ -218,18 +227,21 @@
 }
 
 .completion-icon {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, $success 0%, $primary-dark 100%);
-  border-radius: 50%;
+  width: 96px;
+  height: 96px;
+  background:
+    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.28), transparent 60%),
+    linear-gradient(135deg, $success 0%, $primary-dark 100%);
+  border-radius: 30px;
+  box-shadow: $elevation-2;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem auto;
 
   svg {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     color: $text-inverse;
   }
 }
diff --git a/assets/scss/_surfaces.scss b/assets/scss/_surfaces.scss
index ba23dd2..68bf92e 100644
--- a/assets/scss/_surfaces.scss
+++ b/assets/scss/_surfaces.scss
@@ -34,6 +34,24 @@
     --surface-accent: var(--color-border-medium);
     --surface-deep: var(--color-text-secondary);
   }
+  &--investment {
+    --surface-bg: rgba(14, 165, 233, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(14, 165, 233, 0.5);
+    --surface-deep: #0284c7;
+  }
+  &--loan {
+    --surface-bg: rgba(217, 119, 6, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(217, 119, 6, 0.5);
+    --surface-deep: #b45309;
+  }
+  &--gift {
+    --surface-bg: rgba(124, 58, 237, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(124, 58, 237, 0.5);
+    --surface-deep: #6d28d9;
+  }
 }
 
 // In dark mode the surface bg becomes a subtle tint so it sits on the page
@@ -65,6 +83,21 @@
     --surface-accent: var(--color-border-medium);
     --surface-deep: var(--color-text-secondary);
   }
+  .surface--investment {
+    --surface-bg: rgba(14, 165, 233, 0.16);
+    --surface-accent: rgba(56, 189, 248, 0.5);
+    --surface-deep: #38bdf8;
+  }
+  .surface--loan {
+    --surface-bg: rgba(217, 119, 6, 0.16);
+    --surface-accent: rgba(251, 191, 36, 0.5);
+    --surface-deep: #fbbf24;
+  }
+  .surface--gift {
+    --surface-bg: rgba(124, 58, 237, 0.16);
+    --surface-accent: rgba(167, 139, 250, 0.5);
+    --surface-deep: #a78bfa;
+  }
 }
 
 .display-1 {
diff --git a/assets/scss/_transaction-form.scss b/assets/scss/_transaction-form.scss
index 54a2161..340a117 100644
--- a/assets/scss/_transaction-form.scss
+++ b/assets/scss/_transaction-form.scss
@@ -675,6 +675,50 @@
   font-size: $font-size-sm;
 }
 
+.intent-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.intent-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: $primary;
+    color: $text-primary;
+  }
+
+  .intent-pill-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.intent-pill--active {
+  background: $primary;
+  border-color: $primary;
+  color: white;
+
+  &:hover {
+    color: white;
+  }
+}
+
 .wallet-field-wrapper,
 .group-field-wrapper {
   position: relative;
diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss
index 4c37667..8c96ba5 100644
--- a/assets/scss/_utilities.scss
+++ b/assets/scss/_utilities.scss
@@ -133,9 +133,9 @@
   justify-content: center;
   align-items: center;
   padding: 0;
-  width: 36px;
-  height: $navbar-icon-button-height;
-  border-radius: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
   background-color: transparent;
   border: 1px solid transparent;
   color: $text-secondary;
@@ -164,8 +164,8 @@
   }
 
   .icon {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     color: currentColor;
   }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 106de2f..a0b4f65 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -252,7 +252,7 @@ $font-semibold: 600;
 $font-bold: 700;
 
 // Navbar
-$navbar-height: 65px;
+$navbar-height: 52px;
 $navbar-icon-button-height: 36px;
 
 // Sidebar
diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index 5ee6c9b..4f36f50 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -160,8 +160,59 @@ button {
 }
 
 /* Print styles */
+// The canvas report is printed in place: a cloned copy is appended to <body>
+// and everything else is hidden, so the print uses the app's real, already
+// loaded styles. Hidden on screen; shown only when printing.
+.print-canvas-portal {
+  display: none;
+}
+
 @media print {
+  // Zero the page margin so the browser stops drawing its title/URL/date
+  // header and footer; the portal supplies its own inner padding instead.
+  @page {
+    margin: 0;
+  }
+
   body {
     background: none;
   }
+
+  body.printing-canvas > *:not(.print-canvas-portal) {
+    display: none !important;
+  }
+
+  body.printing-canvas .print-canvas-portal {
+    display: block !important;
+    position: static;
+    padding: 16mm;
+    max-width: 100%;
+  }
+
+  body.printing-canvas .print-canvas-portal * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  // The report is cloned from an on-screen scroll container with a fixed
+  // height; reset that so it flows to its content instead of reserving a whole
+  // empty page.
+  body.printing-canvas .print-canvas-portal,
+  body.printing-canvas .print-canvas-portal > * {
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  body.printing-canvas .print-canvas-portal * {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  body.printing-canvas .print-canvas-portal svg,
+  body.printing-canvas .print-canvas-portal .apexcharts-canvas {
+    max-width: 100% !important;
+    height: auto !important;
+  }
 }
diff --git a/components/EmptyState.vue b/components/EmptyState.vue
index 1ec39fc..4e33b43 100644
--- a/components/EmptyState.vue
+++ b/components/EmptyState.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="empty-state">
-    <img class="empty-icon" src="/box.svg" :alt="t('Empty Icon')" />
+    <div class="empty-art">
+      <component :is="resolvedIcon" class="empty-illustration" />
+    </div>
     <h2 class="empty-title">
       {{
         t("You don't have any {item} at the moment.", {
@@ -23,18 +25,27 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import { PlusIcon } from '@heroicons/vue/24/outline';
+import IconBox from '~icons/solar/box-minimalistic-bold-duotone';
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
   pageName: {
     type: String,
     required: true
+  },
+  // A Solar (or any) icon component to theme the empty state for its content.
+  icon: {
+    type: [Object, Function],
+    default: null
   }
 });
 
 defineEmits(['create']);
+
+const resolvedIcon = computed(() => props.icon || IconBox);
 </script>
 
 <style scoped lang="scss">
@@ -46,133 +57,91 @@ defineEmits(['create']);
   align-items: center;
   justify-content: center;
   text-align: center;
-  margin-top: 3rem;
-  margin-bottom: 0;
-  padding: 2rem 1rem;
+  padding: 3rem 1rem;
   min-height: 50vh;
 
-  @media (max-width: $breakpoint-md) {
-    margin-top: 2rem;
-    padding: 1.5rem 1rem;
+  @media (max-width: $breakpoint-sm) {
+    padding: 2rem 0.5rem;
     min-height: 40vh;
   }
+}
+
+.empty-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  margin-bottom: 1.5rem;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 25%, $primary-light, $bg-light 70%);
 
   @media (max-width: $breakpoint-sm) {
-    margin-top: 1rem;
-    padding: 1rem 0.5rem;
-    min-height: 35vh;
+    width: 112px;
+    height: 112px;
+    margin-bottom: 1rem;
   }
 }
 
-.empty-icon {
-  width: 220px;
-  height: 220px;
-  margin-bottom: 1rem;
-
-  @media (max-width: $breakpoint-md) {
-    width: 180px;
-    height: 180px;
-    margin-bottom: 0.75rem;
-  }
+.empty-illustration {
+  width: 72px;
+  height: 72px;
+  color: $primary;
 
   @media (max-width: $breakpoint-sm) {
-    width: 140px;
-    height: 140px;
-    margin-bottom: 0.5rem;
+    width: 58px;
+    height: 58px;
   }
 }
 
 .empty-title {
   color: $text-primary;
-  font-size: 2.2rem;
-  font-weight: 700;
-  margin: 1rem 2rem;
-  line-height: 1.2;
-
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.8rem;
-    margin: 0.75rem 1.5rem;
-  }
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  margin: 0 1rem 0.5rem;
+  line-height: 1.25;
+  max-width: 28ch;
 
   @media (max-width: $breakpoint-sm) {
-    font-size: 1.4rem;
-    margin: 0.5rem 1rem;
-    line-height: 1.3;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 1.2rem;
-    margin: 0.5rem 0.5rem;
+    font-size: 1.3rem;
   }
 }
 
 .empty-subtitle {
-  color: $text-secondary;
-  font-size: 1.2rem;
-  margin-bottom: 2.5rem;
-  line-height: 1.4;
-  max-width: 90%;
-
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.1rem;
-    margin-bottom: 2rem;
-  }
+  color: $text-muted;
+  font-size: 1rem;
+  margin: 0 0 2rem;
+  line-height: 1.5;
+  max-width: 42ch;
 
   @media (max-width: $breakpoint-sm) {
-    font-size: 1rem;
+    font-size: 0.95rem;
     margin-bottom: 1.5rem;
-    max-width: 95%;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 0.9rem;
-    margin-bottom: 1.25rem;
   }
 }
 
 .add-entity-btn {
   background: $primary;
-  color: $bg-white;
-  font-size: 1.3rem;
-  font-weight: 600;
+  color: $text-inverse;
+  font-size: 1rem;
+  font-weight: $font-semibold;
   border: none;
   border-radius: $radius-xl;
-  padding: 1rem 2.5rem;
+  padding: 0.8rem 1.75rem;
   cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
+  transition: background $duration-fast $easing-standard;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  min-width: 160px;
 
   .button-icon {
-    width: 1.2rem;
-    height: 1.2rem;
+    width: 1.1rem;
+    height: 1.1rem;
     flex-shrink: 0;
     stroke-width: 2;
   }
 
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.1rem;
-    padding: 0.875rem 2rem;
-    border-radius: $radius-lg;
-    min-width: 140px;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    font-size: 1rem;
-    padding: 0.75rem 1.5rem;
-    border-radius: $radius-lg;
-    min-width: 120px;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 0.9rem;
-    padding: 0.625rem 1.25rem;
-    min-width: 110px;
-  }
-
   &:hover {
     background: $primary-hover;
   }
diff --git a/components/NotificationBell.vue b/components/NotificationBell.vue
index 89b241c..518543e 100644
--- a/components/NotificationBell.vue
+++ b/components/NotificationBell.vue
@@ -205,9 +205,9 @@ onUnmounted(() => {
 }
 
 .bell-icon {
-  width: 20px;
-  height: 20px;
-  color: $text-secondary;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
 }
 
 .badge {
diff --git a/components/TAvatar.vue b/components/TAvatar.vue
index d2387cd..1a8789f 100644
--- a/components/TAvatar.vue
+++ b/components/TAvatar.vue
@@ -21,6 +21,10 @@
             <Settings class="menu-icon" />
             <span>{{ t('Settings') }}</span>
           </button>
+          <button v-if="user?.is_admin" class="menu-item" @click="goToAdmin">
+            <ShieldCheck class="menu-icon" />
+            <span>{{ t('Admin') }}</span>
+          </button>
           <button class="menu-item menu-item--danger" @click="handleLogout">
             <LogOut class="menu-icon" />
             <span>{{ t('Logout') }}</span>
@@ -33,7 +37,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { Settings, LogOut } from 'lucide-vue-next';
+import { Settings, LogOut, ShieldCheck } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import { useDropdown } from '@/composables/useDropdown';
 
@@ -67,6 +71,11 @@ const goToSettings = () => {
   router.push('/settings');
 };
 
+const goToAdmin = () => {
+  close();
+  router.push('/admin');
+};
+
 const handleLogout = async () => {
   close();
   await logout();
@@ -97,8 +106,8 @@ const handleLogout = async () => {
   }
 
   .avatar-image {
-    width: 36px;
-    height: 36px;
+    width: 28px;
+    height: 28px;
     border-radius: 50%;
     object-fit: cover;
     border: 1px solid $border-medium;
diff --git a/components/TDashboardTopCard.vue b/components/TDashboardTopCard.vue
index 6a918dd..d04c6d1 100644
--- a/components/TDashboardTopCard.vue
+++ b/components/TDashboardTopCard.vue
@@ -1,57 +1,42 @@
 <template>
   <section class="hero surface surface--brand">
-    <svg
-      class="hero-decor"
-      viewBox="0 0 1200 360"
-      preserveAspectRatio="xMaxYMid slice"
-      aria-hidden="true"
-    >
-      <defs>
-        <radialGradient id="hero-glow" cx="80%" cy="40%" r="55%">
-          <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.55" />
-          <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
-        </radialGradient>
-        <pattern id="hero-dots" width="22" height="22" patternUnits="userSpaceOnUse">
-          <circle cx="2" cy="2" r="1.2" fill="var(--surface-deep)" opacity="0.12" />
-        </pattern>
-      </defs>
-      <rect x="0" y="0" width="1200" height="360" fill="url(#hero-dots)" />
-      <circle cx="1020" cy="160" r="220" fill="url(#hero-glow)" />
-      <circle cx="980" cy="60" r="44" fill="var(--surface-accent)" opacity="0.55" />
-      <circle cx="1100" cy="280" r="28" fill="var(--surface-deep)" opacity="0.55" />
-      <circle cx="880" cy="300" r="14" fill="var(--surface-deep)" opacity="0.4" />
-      <circle cx="1150" cy="120" r="10" fill="var(--surface-accent)" opacity="0.8" />
-    </svg>
+    <div class="hero-ambient" aria-hidden="true">
+      <BarChart3 class="amb a1" :size="72" :stroke-width="1" />
+      <Wallet class="amb a2" :size="64" :stroke-width="1" />
+      <Coins class="amb a3" :size="56" :stroke-width="1" />
+      <TrendingUp class="amb a4" :size="60" :stroke-width="1" />
+      <PieChart class="amb a5" :size="52" :stroke-width="1" />
+    </div>
 
     <div class="hero-body">
       <div class="hero-greeting">
-        <h1 v-if="user" class="hero-title">
-          {{ t('Welcome,') }}
-          <span class="hero-name">{{ user.first_name }} {{ user.last_name }}</span>
-        </h1>
+        <h2 class="hero-title">{{ t('Overview') }}</h2>
         <p class="hero-sub">
-          {{ t("Here's your financial overview for {period}.", { period: currentPeriodLabel }) }}
+          {{ t('Showing {period}.', { period: currentPeriodLabel }) }}
         </p>
       </div>
 
-      <div v-if="showFilters" class="hero-chips">
-        <button
-          v-for="period in availablePeriods.slice(0, 3)"
-          :key="period.value"
-          class="chip"
-          :class="{ 'chip--active': currentPeriod === period.value && !isCustomActive }"
-          @click="handlePresetClick(period.value)"
-        >
-          {{ t(period.label) }}
-        </button>
-        <button
-          class="chip chip--custom"
-          :class="{ 'chip--active': isCustomActive }"
-          @click="toggleCustomPeriod"
-        >
-          <span>{{ t('Custom') }}</span>
-          <ChevronDown class="chip-icon" :class="{ 'chip-icon--rotated': showFilterModal }" />
-        </button>
+      <div v-if="showFilters" class="hero-controls">
+        <DashboardWalletSelector />
+        <div class="hero-chips">
+          <button
+            v-for="period in availablePeriods.slice(0, 3)"
+            :key="period.value"
+            class="chip"
+            :class="{ 'chip--active': currentPeriod === period.value && !isCustomActive }"
+            @click="handlePresetClick(period.value)"
+          >
+            {{ t(period.label) }}
+          </button>
+          <button
+            class="chip chip--custom"
+            :class="{ 'chip--active': isCustomActive }"
+            @click="toggleCustomPeriod"
+          >
+            <span>{{ t('Custom') }}</span>
+            <ChevronDown class="chip-icon" :class="{ 'chip-icon--rotated': showFilterModal }" />
+          </button>
+        </div>
       </div>
     </div>
 
@@ -66,10 +51,10 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { ChevronDown } from 'lucide-vue-next';
-import { useAuth } from '@/composables/useAuth';
+import { ChevronDown, BarChart3, Wallet, Coins, TrendingUp, PieChart } from 'lucide-vue-next';
 import { useStatistics } from '@/composables/useStatistics';
 import StatsFilterModal from '@/components/StatsFilterModal.vue';
+import DashboardWalletSelector from '@/components/dashboard/DashboardWalletSelector.vue';
 
 const { t, locale } = useI18n();
 
@@ -80,7 +65,6 @@ const _props = defineProps({
   }
 });
 
-const { user } = useAuth();
 const {
   currentPeriod,
   customFilters,
@@ -156,13 +140,43 @@ const handleFiltersApply = (filters) => {
   box-shadow: $elevation-1;
 }
 
-.hero-decor {
+.hero-ambient {
   position: absolute;
   inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
   z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .amb {
+    position: absolute;
+    color: var(--surface-deep);
+    opacity: 0.07;
+  }
+  .a1 {
+    top: -10px;
+    right: 6%;
+    transform: rotate(-10deg);
+  }
+  .a2 {
+    bottom: -14px;
+    right: 22%;
+    transform: rotate(8deg);
+  }
+  .a3 {
+    top: 20%;
+    right: 38%;
+    transform: rotate(10deg);
+  }
+  .a4 {
+    bottom: -8px;
+    left: 6%;
+    transform: rotate(-8deg);
+  }
+  .a5 {
+    top: -8px;
+    left: 30%;
+    transform: rotate(12deg);
+  }
 }
 
 .hero-body {
@@ -200,10 +214,6 @@ const handleFiltersApply = (filters) => {
   }
 }
 
-.hero-name {
-  color: var(--surface-deep);
-}
-
 .hero-sub {
   margin: 0;
   color: var(--surface-ink);
@@ -215,6 +225,17 @@ const handleFiltersApply = (filters) => {
   }
 }
 
+.hero-controls {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+
+  @media (min-width: $breakpoint-sm) {
+    justify-content: flex-end;
+  }
+}
+
 .hero-chips {
   display: inline-flex;
   align-items: center;
diff --git a/components/TNavbar.vue b/components/TNavbar.vue
index 43282a9..d72ac32 100644
--- a/components/TNavbar.vue
+++ b/components/TNavbar.vue
@@ -5,18 +5,14 @@
     </div>
     <div class="navbar-right">
       <div class="navbar-actions">
-        <TButton
-          class="add-transaction-btn"
-          size="small"
-          variant="outline"
-          :full-width="false"
-          :text="t('Add transaction')"
+        <NuxtLink
+          class="icon-button add-transaction-btn"
           to="/transactions/new"
+          :aria-label="t('Add transaction')"
+          :title="t('Add transaction')"
         >
-          <template #left-icon>
-            <PlusIcon />
-          </template>
-        </TButton>
+          <Plus class="icon" />
+        </NuxtLink>
         <LanguageSelector />
         <ThemeSelector />
         <NotificationBell />
@@ -28,7 +24,7 @@
           @keydown.enter="openLearningModal"
           @keydown.space.prevent="openLearningModal"
         >
-          <InformationCircleIcon class="icon" />
+          <Info class="icon" />
         </button>
       </div>
       <div class="avatar-container">
@@ -40,12 +36,11 @@
 
 <script setup>
 import TAvatar from './TAvatar.vue';
-import TButton from './TButton.vue';
 import LanguageSelector from './LanguageSelector.vue';
 import ThemeSelector from './ThemeSelector.vue';
 import HamburgerMenu from './HamburgerMenu.vue';
 import NotificationBell from './NotificationBell.vue';
-import { PlusIcon, InformationCircleIcon } from '@heroicons/vue/24/outline';
+import { Plus, Info } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import { useAvatar } from '@/composables/useAvatar';
 import { useSidebar } from '@/composables/useSidebar';
@@ -127,12 +122,6 @@ const openLearningModal = () => {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-
-    @media (max-width: $breakpoint-sm) {
-      .add-transaction-btn {
-        display: none;
-      }
-    }
   }
 
   .avatar-container {
@@ -142,6 +131,7 @@ const openLearningModal = () => {
     flex-shrink: 0;
   }
 
+  // All top-right glyphs are neutral and share the base `.icon-button` hover.
   .add-transaction-btn {
     text-decoration: none !important;
 
@@ -164,12 +154,6 @@ const openLearningModal = () => {
       border-radius: 50%;
       border: 2px solid $bg-gray;
     }
-
-    &:hover {
-      .icon {
-        color: $primary;
-      }
-    }
   }
 }
 </style>
diff --git a/components/TSidebar.vue b/components/TSidebar.vue
index 7166218..abca7d1 100644
--- a/components/TSidebar.vue
+++ b/components/TSidebar.vue
@@ -33,10 +33,11 @@
             class="nav-button"
             :class="{
               'nav-button--with-subtext': !isCompact && item.hint,
-              'nav-button--compact': isCompact
+              'nav-button--compact': isCompact,
+              selected: subPathActive(item)
             }"
             active-class="selected"
-            :title="isCompact ? `${t(item.label)} — ${t(item.hint ?? '')}` : undefined"
+            :title="isCompact ? `${t(item.label)}: ${t(item.hint ?? '')}` : undefined"
             @click="handleNavClick"
           >
             <component :is="item.icon" class="icon" />
@@ -48,10 +49,13 @@
             <span v-else class="compact-label">{{ t(item.label) }}</span>
           </NuxtLink>
 
-          <ul v-if="!isCompact && item.subItems && isActive(item.to)" class="sub-list">
+          <ul
+            v-if="!isCompact && item.subItems && (isActive(item.to) || subPathActive(item))"
+            class="sub-list"
+          >
             <li v-for="sub in item.subItems" :key="sub.label">
               <NuxtLink
-                :to="sub.query ? { path: item.to, query: sub.query } : item.to"
+                :to="sub.to ? sub.to : sub.query ? { path: item.to, query: sub.query } : item.to"
                 class="sub-link"
                 :class="{ selected: isSubActive(item.to, sub) }"
                 @click="handleNavClick"
@@ -63,6 +67,10 @@
           </ul>
         </li>
       </ul>
+
+      <div v-if="!isCompact" class="sidebar-ext">
+        <ExtensionSlot name="sidebar.nav" />
+      </div>
     </nav>
 
     <hr v-if="!isCompact" class="divider" />
@@ -81,7 +89,7 @@
           >
             <component :is="item.icon" class="icon" />
             <span v-if="!isCompact" class="text">{{ t(item.label) }}</span>
-            <span v-else class="compact-label">{{ t(item.shortLabel ?? item.label) }}</span>
+            <span v-else class="compact-label">{{ t(item.label) }}</span>
           </button>
         </li>
       </ul>
@@ -108,20 +116,21 @@ import {
   BellIcon,
   ChartBarIcon,
   ChartPieIcon,
-  ChatBubbleLeftRightIcon,
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
   Cog8ToothIcon,
-  HomeIcon,
   RectangleGroupIcon,
+  Squares2X2Icon,
   TagIcon,
   UserGroupIcon,
   UsersIcon,
   WalletIcon,
   XMarkIcon
 } from '@heroicons/vue/24/outline';
+import { Sparkles, Scale, Coins } from 'lucide-vue-next';
 import { computed } from 'vue';
 import Logo from './Logo.vue';
+import ExtensionSlot from '@/components/extensions/ExtensionSlot.vue';
 import { useSidebar } from '@/composables/useSidebar';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -141,7 +150,19 @@ const route = useRoute();
 const isCompact = computed(() => desktopCollapsed.value && !isMobile.value);
 
 const primary = [
-  { to: '/dashboard', label: 'Home', icon: HomeIcon },
+  {
+    to: '/dashboard',
+    label: 'Dashboard',
+    hint: 'Overview of your finances',
+    icon: Squares2X2Icon
+  },
+  {
+    to: '/home',
+    label: 'Assistant',
+    hint: 'Chat and ask about your finances',
+    icon: Sparkles,
+    subItems: [{ label: 'Discussions', to: '/assistant', tone: 'info' }]
+  },
   {
     to: '/transactions',
     label: 'Transactions',
@@ -149,28 +170,28 @@ const primary = [
     icon: RectangleGroupIcon
   },
   {
-    to: '/categories',
-    label: 'Categories',
-    hint: 'Organize transactions by type',
-    icon: TagIcon
+    to: '/wallets',
+    label: 'Wallets',
+    hint: 'Accounts money moves through',
+    icon: WalletIcon
   },
   {
-    to: '/groups',
-    label: 'Groups',
-    hint: 'Bundle related transactions',
-    icon: UserGroupIcon
+    to: '/financial-position',
+    label: 'Financial position',
+    hint: 'Net worth, grouped by intent',
+    icon: Scale
   },
   {
-    to: '/parties',
-    label: 'Parties',
-    hint: 'People and organizations you transact with',
-    icon: UsersIcon
+    to: '/holdings',
+    label: 'Holdings',
+    hint: 'Assets you own: crypto, stocks, property',
+    icon: Coins
   },
   {
-    to: '/wallets',
-    label: 'Wallets',
-    hint: 'Accounts money moves through',
-    icon: WalletIcon
+    to: '/reports',
+    label: 'Reports',
+    hint: 'Charts and insights',
+    icon: ChartBarIcon
   },
   {
     to: '/budgets',
@@ -184,28 +205,40 @@ const primary = [
     ]
   },
   {
-    to: '/reminders',
-    label: 'Reminders',
-    hint: 'Track upcoming or expected transactions',
-    icon: BellIcon
+    to: '/categories',
+    label: 'Categories',
+    hint: 'Organize transactions by type',
+    icon: TagIcon
+  },
+  {
+    to: '/parties',
+    label: 'Parties',
+    hint: 'People and organizations you transact with',
+    icon: UsersIcon
   },
   {
-    to: '/imports',
-    label: 'Import',
-    hint: 'Import transactions from documents',
-    icon: ArrowUpTrayIcon
+    to: '/groups',
+    label: 'Groups',
+    hint: 'Bundle related transactions',
+    icon: UserGroupIcon
   }
 ];
 
 const footer = [
-  { to: '/reports', label: 'Reports & Stats', shortLabel: 'Reports', icon: ChartBarIcon },
-  { to: '/ai-insights', label: 'AI Insights', shortLabel: 'AI', icon: ChatBubbleLeftRightIcon },
+  { to: '/reminders', label: 'Reminders', icon: BellIcon },
+  { to: '/imports', label: 'Import', icon: ArrowUpTrayIcon },
   { to: '/settings', label: 'Settings', icon: Cog8ToothIcon }
 ];
 
 const isActive = (path) => route.path === path || route.path.startsWith(path + '/');
 
+// True when one of the item's sub-items navigates to its own route (e.g. the
+// Assistant "Discussions" sub points at /assistant), so the parent stays lit
+// and its sub-list stays open while on that route.
+const subPathActive = (item) => (item.subItems ?? []).some((sub) => sub.to && isActive(sub.to));
+
 const isSubActive = (parentTo, sub) => {
+  if (sub.to) return isActive(sub.to);
   if (route.path !== parentTo) return false;
   if (!sub.query) return !route.query.scope;
   const key = Object.keys(sub.query)[0];
@@ -451,8 +484,8 @@ const handleButtonNavClick = (path) => {
 
   .nav-footer {
     display: flex;
-    width: calc(100% - 16px);
-    padding: 8px;
+    width: 100%;
+    padding: 8px 0;
     gap: 8px;
     flex-direction: column;
     flex-shrink: 0;
@@ -468,9 +501,9 @@ const handleButtonNavClick = (path) => {
     display: flex;
     align-items: center;
     width: calc(100% - 20px);
-    min-height: 40px;
+    min-height: 44px;
     border-radius: $radius-xl;
-    padding: 8px 14px;
+    padding: 8px 10px;
     gap: 12px;
     background-color: transparent;
     border: none;
diff --git a/components/TTopCard.vue b/components/TTopCard.vue
index 8a9179f..9d7271d 100644
--- a/components/TTopCard.vue
+++ b/components/TTopCard.vue
@@ -25,9 +25,7 @@
           </div>
           <div class="title-text">
             <span class="breadcrumb-current">
-              <span class="breadcrumb-home" @click="$router.push('/dashboard')">{{
-                t('Home')
-              }}</span>
+              <span class="breadcrumb-home" @click="$router.push('/home')">{{ t('Home') }}</span>
               <ChevronRight :size="11" class="breadcrumb-arrow" />
               <span>{{ t(pageNamePlural) }}</span>
             </span>
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
index 0a78d48..33a8769 100644
--- a/components/ThemeSelector.vue
+++ b/components/ThemeSelector.vue
@@ -65,9 +65,9 @@ const selectTheme = (value: ThemeMode) => {
 }
 
 .icon {
-  width: 20px;
-  height: 20px;
-  color: $text-primary;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
 }
 
 .theme-dropdown {
diff --git a/components/TransactionForm.vue b/components/TransactionForm.vue
index 89416c9..9812cf2 100644
--- a/components/TransactionForm.vue
+++ b/components/TransactionForm.vue
@@ -34,6 +34,27 @@
         <textarea v-model="formDescription" :placeholder="t('Type here...')" />
       </div>
 
+      <div class="transaction-date">
+        <span
+          >{{ t('Intent') }} <span class="optional-label">({{ t('optional') }})</span></span
+        >
+        <div class="intent-pills" role="radiogroup" :aria-label="t('Intent')">
+          <button
+            v-for="opt in intentOptions"
+            :key="opt.value"
+            type="button"
+            class="intent-pill"
+            :class="{ 'intent-pill--active': formIntent === opt.value }"
+            role="radio"
+            :aria-checked="formIntent === opt.value"
+            @click="formIntent = opt.value"
+          >
+            <component :is="intentIcons[opt.value]" class="intent-pill-icon" />
+            <span>{{ t(opt.label) }}</span>
+          </button>
+        </div>
+      </div>
+
       <div class="form-transaction">
         <div class="transaction-date">
           <span>{{ t('Transaction date') }}</span>
@@ -258,10 +279,21 @@ import { toRefs, ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import TButton from './TButton.vue';
 import SearchableDropdown from './SearchableDropdown.vue';
 import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import {
+  Circle,
+  HandCoins,
+  Banknote,
+  Scale,
+  Handshake,
+  TrendingUp,
+  PiggyBank,
+  Gift
+} from 'lucide-vue-next';
 import { useSharedData } from '~/composables/useSharedData';
 import { fetchAllPages } from '~/services/api/apiHelpers';
 import { api } from '@/services/api';
-import type { TransactionFile } from '~/types/transaction';
+import type { TransactionFile, TransactionIntent } from '~/types/transaction';
+import { TRANSACTION_INTENT_OPTIONS } from '~/types/transaction';
 
 const { t } = useI18n();
 
@@ -291,6 +323,23 @@ const formAmount = ref('');
 const formParty = ref('');
 const formCategory = ref('');
 const formDescription = ref('');
+const formIntent = ref<TransactionIntent>('regular');
+
+const intentIcons: Record<TransactionIntent, unknown> = {
+  regular: Circle,
+  loan_received: HandCoins,
+  loan_repayment: Banknote,
+  debt_owed: Scale,
+  debt_settled: Handshake,
+  investment_buy: TrendingUp,
+  investment_return: PiggyBank,
+  gift: Gift
+};
+
+const intentOptions = computed(() => {
+  const side = isOutcomeSelected.value ? 'expense' : 'income';
+  return TRANSACTION_INTENT_OPTIONS.filter((o) => o.side === 'both' || o.side === side);
+});
 
 const selectedPartyId = ref<number | null>(null);
 const selectedWalletId = ref<number | null>(null);
@@ -371,6 +420,7 @@ function onSubmit() {
     date,
     time,
     type: isOutcomeSelected.value ? 'EXPENSE' : 'INCOME',
+    intent: formIntent.value,
     party: formParty.value,
     partyId: selectedPartyId.value,
     amount: `${amountNum} ${selectedCurrency.value}`,
@@ -550,6 +600,11 @@ watch(isOutcomeSelected, (isExpense) => {
     formIsRefund.value = false;
     formRefundOfTransactionId.value = null;
   }
+  // Drop an intent that no longer applies to the selected side (e.g. an
+  // income-only intent after switching to expense).
+  if (!intentOptions.value.some((o) => o.value === formIntent.value)) {
+    formIntent.value = 'regular';
+  }
 });
 
 onMounted(async () => {
@@ -722,6 +777,8 @@ watch(
       formDescription.value = item.description;
     }
 
+    formIntent.value = item.intent || 'regular';
+
     if (item.amount) {
       const num = parseFloat(String(item.amount).replace(/[^\d.]/g, ''));
       formAmount.value = Number.isFinite(num) ? String(num) : '';
diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
new file mode 100644
index 0000000..78e36d3
--- /dev/null
+++ b/components/admin/OutreachComposer.vue
@@ -0,0 +1,690 @@
+<template>
+  <div class="composer">
+    <form class="composer__form" @submit.prevent="onSend">
+      <label class="field">
+        <span class="field__label">{{ t('Subject') }}</span>
+        <input v-model="form.subject" class="field__input" :placeholder="t('Subject')" required />
+      </label>
+
+      <div class="field">
+        <span class="field__label">{{ t('Message') }}</span>
+        <div class="md-toolbar">
+          <button
+            v-for="f in formats"
+            :key="f.label"
+            type="button"
+            class="md-btn"
+            :title="t(f.label)"
+            @click="f.action()"
+          >
+            <component :is="f.icon" class="md-btn__icon" />
+          </button>
+        </div>
+        <textarea
+          ref="bodyRef"
+          v-model="form.body"
+          class="field__textarea"
+          rows="8"
+          :placeholder="t('Write your message. Markdown is supported.')"
+          required
+        />
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Header image') }}</span>
+        <div v-if="form.image_url" class="media">
+          <img :src="form.image_url" class="media__thumb" alt="" />
+          <button type="button" class="media__remove" @click="form.image_url = ''">
+            {{ t('Remove') }}
+          </button>
+        </div>
+        <label v-else class="upload">
+          <ImageIcon class="upload__icon" />
+          <span>{{ imageUploading ? t('Uploading...') : t('Add a campaign image') }}</span>
+          <input type="file" accept="image/*" class="upload__input" @change="onImage" />
+        </label>
+      </div>
+
+      <div class="tokens">
+        <span class="tokens__hint">{{ t('Personalize with:') }}</span>
+        <button
+          v-for="token in tokens"
+          :key="token"
+          type="button"
+          class="token"
+          @click="insertToken(token)"
+        >
+          {{ token }}
+        </button>
+      </div>
+
+      <div class="cta-row">
+        <label class="field">
+          <span class="field__label">{{ t('Button label') }}</span>
+          <input
+            v-model="form.cta_label"
+            class="field__input"
+            :placeholder="t('e.g. Open Trakli')"
+          />
+        </label>
+        <label class="field">
+          <span class="field__label">{{ t('Button link') }}</span>
+          <input v-model="form.cta_url" class="field__input" placeholder="https://" />
+        </label>
+      </div>
+
+      <label class="field">
+        <span class="field__label">{{ t('Audience') }}</span>
+        <select v-model="form.audience" class="field__input">
+          <option v-for="opt in audiences" :key="opt.value" :value="opt.value">
+            {{ opt.label }}
+          </option>
+        </select>
+      </label>
+
+      <div v-if="form.audience === 'specific'" class="field">
+        <span class="field__label">{{ t('Choose recipients') }}</span>
+        <input v-model="userQuery" class="field__input" :placeholder="t('Search users')" />
+        <div class="recipients">
+          <label v-for="u in filteredUsers" :key="u.id" class="recipient">
+            <input v-model="form.user_ids" type="checkbox" :value="u.id" />
+            <span class="recipient__text"
+              >{{ u.first_name }} {{ u.last_name }} · {{ u.email }}</span
+            >
+          </label>
+          <p v-if="!filteredUsers.length" class="recipients__empty">{{ t('No matches') }}</p>
+        </div>
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Attachments') }}</span>
+        <label class="upload upload--slim">
+          <PaperclipIcon class="upload__icon" />
+          <span>{{ t('Attach files') }}</span>
+          <input type="file" multiple class="upload__input" @change="onFiles" />
+        </label>
+        <ul v-if="form.files.length" class="attach-list">
+          <li v-for="(file, i) in form.files" :key="i" class="attach-item">
+            <span class="attach-item__name">{{ file.name }}</span>
+            <button type="button" class="attach-item__remove" @click="removeFile(i)">×</button>
+          </li>
+        </ul>
+      </div>
+
+      <div v-if="confirming" class="confirm">
+        <p class="confirm__text">{{ confirmText }}</p>
+        <div class="confirm__actions">
+          <TButton
+            :text="t('Cancel')"
+            variant="outline"
+            size="small"
+            :full-width="false"
+            @click="confirming = false"
+          />
+          <TButton
+            :text="t('Send now')"
+            size="small"
+            :full-width="false"
+            :loading="sending"
+            @click="send"
+          />
+        </div>
+      </div>
+      <div v-else class="composer__actions">
+        <TButton
+          type="submit"
+          :text="form.audience === 'test' ? t('Send test to me') : t('Send')"
+          :full-width="false"
+          :loading="sending"
+        />
+      </div>
+    </form>
+
+    <aside class="preview">
+      <span class="preview__tag">{{ t('Live preview') }}</span>
+      <div class="preview__frame">
+        <iframe
+          v-if="previewHtml"
+          :srcdoc="previewHtml"
+          class="preview__iframe"
+          sandbox=""
+          :title="t('Live preview')"
+        />
+        <p v-else class="preview__empty">{{ t('Start typing to preview the email.') }}</p>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+  Image as ImageIcon,
+  Paperclip as PaperclipIcon,
+  Bold as BoldIcon,
+  Italic as ItalicIcon,
+  Heading2 as HeadingIcon,
+  List as ListIcon,
+  ListOrdered as ListOrderedIcon,
+  Link2 as LinkIcon
+} from 'lucide-vue-next';
+import TButton from '@/components/TButton.vue';
+import { adminApi, type OutreachAudience, type AdminUser } from '@/services/api/adminApi';
+
+const { t } = useI18n();
+const { showSuccess, showError } = useNotifications();
+
+const emit = defineEmits(['sent']);
+
+const tokens = ['{{first_name}}', '{{last_name}}', '{{name}}', '{{email}}'];
+
+const form = reactive({
+  subject: '',
+  body: '',
+  cta_label: '',
+  cta_url: '',
+  image_url: '',
+  audience: 'all' as OutreachAudience,
+  user_ids: [] as number[],
+  files: [] as File[]
+});
+
+const audiences = [
+  { value: 'all', label: t('All users') },
+  { value: 'active', label: t('Active users') },
+  { value: 'inactive', label: t('Inactive users') },
+  { value: 'specific', label: t('Specific users') },
+  { value: 'test', label: t('Send test to me') }
+];
+
+const sending = ref(false);
+const confirming = ref(false);
+const imageUploading = ref(false);
+
+const users = ref<AdminUser[]>([]);
+const userQuery = ref('');
+const filteredUsers = computed(() => {
+  const q = userQuery.value.trim().toLowerCase();
+  const list = users.value;
+  if (!q) return list.slice(0, 50);
+  return list
+    .filter((u) => `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q))
+    .slice(0, 50);
+});
+
+onMounted(async () => {
+  try {
+    users.value = await adminApi.users();
+  } catch {
+    users.value = [];
+  }
+});
+
+const onImage = async (event: Event) => {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  imageUploading.value = true;
+  try {
+    const { url } = await adminApi.uploadOutreachMedia(file);
+    form.image_url = url;
+  } catch {
+    showError(t('Could not upload the image.'));
+  } finally {
+    imageUploading.value = false;
+  }
+};
+
+const onFiles = (event: Event) => {
+  const picked = Array.from((event.target as HTMLInputElement).files ?? []);
+  form.files = [...form.files, ...picked];
+};
+
+const removeFile = (index: number) => {
+  form.files.splice(index, 1);
+};
+
+const previewHtml = ref('');
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+const fetchPreview = async () => {
+  if (!form.subject && !form.body && !form.image_url) {
+    previewHtml.value = '';
+    return;
+  }
+  try {
+    previewHtml.value = await adminApi.previewOutreach({
+      subject: form.subject,
+      body: form.body,
+      cta_label: form.cta_label || undefined,
+      cta_url: form.cta_url || undefined,
+      image_url: form.image_url || undefined
+    });
+  } catch {
+    // Keep the last good preview rather than blanking on a transient error.
+  }
+};
+
+watch(
+  () => [form.subject, form.body, form.cta_label, form.cta_url, form.image_url],
+  () => {
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(fetchPreview, 500);
+  }
+);
+
+onBeforeUnmount(() => {
+  if (previewTimer) clearTimeout(previewTimer);
+});
+
+const confirmText = computed(() => {
+  const label = audiences.find((a) => a.value === form.audience)?.label ?? '';
+  return t('This will email {audience}. Personalized per recipient.', { audience: label });
+});
+
+const insertToken = (token: string) => {
+  form.body = `${form.body}${form.body.endsWith(' ') || !form.body ? '' : ' '}${token} `;
+};
+
+const bodyRef = ref<HTMLTextAreaElement | null>(null);
+
+const surround = (before: string, after: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const start = el.selectionStart;
+  const end = el.selectionEnd;
+  const selected = form.body.slice(start, end);
+  form.body = form.body.slice(0, start) + before + selected + after + form.body.slice(end);
+  nextTick(() => {
+    el.focus();
+    el.selectionStart = start + before.length;
+    el.selectionEnd = end + before.length;
+  });
+};
+
+const prefixLines = (prefix: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const lineStart = form.body.lastIndexOf('\n', el.selectionStart - 1) + 1;
+  const block = form.body.slice(lineStart, el.selectionEnd);
+  const replaced = block
+    .split('\n')
+    .map((line, i) => (prefix === '1. ' ? `${i + 1}. ${line}` : `${prefix}${line}`))
+    .join('\n');
+  form.body = form.body.slice(0, lineStart) + replaced + form.body.slice(el.selectionEnd);
+  nextTick(() => el.focus());
+};
+
+const formats = [
+  { label: 'Bold', icon: BoldIcon, action: () => surround('**', '**') },
+  { label: 'Italic', icon: ItalicIcon, action: () => surround('*', '*') },
+  { label: 'Heading', icon: HeadingIcon, action: () => prefixLines('## ') },
+  { label: 'Bullet list', icon: ListIcon, action: () => prefixLines('- ') },
+  { label: 'Numbered list', icon: ListOrderedIcon, action: () => prefixLines('1. ') },
+  { label: 'Link', icon: LinkIcon, action: () => surround('[', '](https://)') }
+];
+
+const onSend = () => {
+  if (form.audience === 'specific' && !form.user_ids.length) {
+    showError(t('Pick at least one recipient.'));
+    return;
+  }
+  if (form.audience === 'test') {
+    send();
+  } else {
+    confirming.value = true;
+  }
+};
+
+const normalizeUrl = (url: string): string => (/^https?:\/\//i.test(url) ? url : `https://${url}`);
+
+const send = async () => {
+  sending.value = true;
+  try {
+    const { sent } = await adminApi.sendOutreach({
+      subject: form.subject,
+      body: form.body,
+      cta_label: form.cta_label || undefined,
+      cta_url: form.cta_url ? normalizeUrl(form.cta_url) : undefined,
+      image_url: form.image_url || undefined,
+      audience: form.audience,
+      user_ids: form.user_ids,
+      files: form.files
+    });
+    showSuccess(t('Sent to {count} recipients', { count: sent }));
+    confirming.value = false;
+    emit('sent');
+  } catch (e: unknown) {
+    const message = (e as { data?: { message?: string } })?.data?.message;
+    showError(message || t('Could not send the outreach.'));
+    confirming.value = false;
+  } finally {
+    sending.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.composer {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 1.5rem;
+  align-items: start;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.field__label {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+}
+
+.field__input,
+.field__textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.6rem 0.75rem;
+  font-size: $font-size-sm;
+  font-family: inherit;
+  color: $text-primary;
+  background: $bg-white;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.field__textarea {
+  resize: vertical;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.md-toolbar {
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.3rem 0.4rem;
+  border: 1px solid $border-color;
+  border-bottom: none;
+  border-radius: $radius-lg $radius-lg 0 0;
+  background: $bg-light;
+}
+
+.md-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: $radius-md;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+
+  &:hover {
+    background: $bg-white;
+    color: $primary;
+  }
+}
+
+.md-btn__icon {
+  width: 15px;
+  height: 15px;
+}
+
+.tokens {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tokens__hint {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.token {
+  border: 1px solid $border-color;
+  background: $bg-light;
+  border-radius: $radius-md;
+  padding: 0.2rem 0.5rem;
+  font-size: $font-size-xs;
+  font-family: monospace;
+  color: $primary-dark;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $primary;
+  }
+}
+
+.cta-row {
+  display: grid;
+  grid-template-columns: 1fr 1.3fr;
+  gap: 0.75rem;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__actions {
+  display: flex;
+}
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.9rem 1rem;
+  background: $warning-bg;
+  border-radius: $radius-lg;
+}
+
+.confirm__text {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $warning-text;
+}
+
+.confirm__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: sticky;
+  top: 1rem;
+}
+
+.preview__tag {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.preview__frame {
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  background: $bg-white;
+  overflow: hidden;
+  box-shadow: $elevation-1;
+  min-height: 320px;
+}
+
+.preview__iframe {
+  display: block;
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview__empty {
+  margin: 0;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.upload {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border: 1px dashed $border-color;
+  border-radius: $radius-lg;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+
+  &--slim {
+    padding: 0.6rem 0.85rem;
+  }
+}
+
+.upload__icon {
+  width: 17px;
+  height: 17px;
+}
+
+.upload__input {
+  display: none;
+}
+
+.media {
+  position: relative;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  border: 1px solid $border-color;
+}
+
+.media__thumb {
+  display: block;
+  width: 100%;
+  max-height: 180px;
+  object-fit: cover;
+}
+
+.media__remove {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  border-radius: $radius-md;
+  padding: 0.3rem 0.6rem;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+}
+
+.recipients {
+  margin-top: 0.4rem;
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.4rem;
+}
+
+.recipient {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.4rem;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  cursor: pointer;
+  border-radius: $radius-md;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.recipient__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recipients__empty {
+  margin: 0;
+  padding: 0.6rem;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.attach-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.attach-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.6rem;
+  background: $bg-light;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+}
+
+.attach-item__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attach-item__remove {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/admin/UserDetail.vue b/components/admin/UserDetail.vue
new file mode 100644
index 0000000..252d862
--- /dev/null
+++ b/components/admin/UserDetail.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="detail">
+    <button class="link-back" @click="$emit('back')">
+      <ArrowLeft class="link-back__icon" />{{ t('Back to users') }}
+    </button>
+
+    <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+    <p v-else-if="error" class="state">{{ error }}</p>
+
+    <template v-else-if="detail">
+      <header class="detail__head">
+        <span class="avatar">{{ initials }}</span>
+        <div class="detail__id">
+          <h1 class="detail__name">{{ detail.user.first_name }} {{ detail.user.last_name }}</h1>
+          <p class="detail__email">{{ detail.user.email }}</p>
+        </div>
+        <span v-if="detail.user.is_admin" class="admin-tag">{{ t('Admin') }}</span>
+      </header>
+
+      <TCard>
+        <template #header>{{ t('Profile') }}</template>
+        <dl class="facts">
+          <div class="fact">
+            <dt>{{ t('Joined') }}</dt>
+            <dd>{{ fmtDate(detail.user.created_at) }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Country') }}</dt>
+            <dd>{{ detail.preferences.country || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Language') }}</dt>
+            <dd>{{ detail.preferences.language || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Currency') }}</dt>
+            <dd>{{ detail.preferences.currency || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Last transaction') }}</dt>
+            <dd>{{ detail.last_transaction_at ? fmtDate(detail.last_transaction_at) : '-' }}</dd>
+          </div>
+        </dl>
+      </TCard>
+
+      <div class="counts">
+        <div v-for="item in countItems" :key="item.key" class="count">
+          <span class="count__value">{{ item.value }}</span>
+          <span class="count__label">{{ t(item.label) }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { ArrowLeft } from 'lucide-vue-next';
+import TCard from '@/components/TCard.vue';
+import { adminApi, type UserDetail } from '@/services/api/adminApi';
+
+const { t } = useI18n();
+
+const props = defineProps<{ userId: number }>();
+defineEmits(['back']);
+
+const detail = ref<UserDetail | null>(null);
+const loading = ref(true);
+const error = ref('');
+
+const labels: Record<string, string> = {
+  transactions: 'Transactions',
+  wallets: 'Wallets',
+  categories: 'Categories',
+  parties: 'Parties',
+  groups: 'Groups',
+  budgets: 'Budgets'
+};
+
+const countItems = computed(() =>
+  Object.entries(detail.value?.counts ?? {}).map(([key, value]) => ({
+    key,
+    value,
+    label: labels[key] ?? key
+  }))
+);
+
+const initials = computed(() => {
+  const u = detail.value?.user;
+  return `${u?.first_name?.[0] ?? ''}${u?.last_name?.[0] ?? ''}`.toUpperCase() || '?';
+});
+
+const fmtDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
+
+const load = async () => {
+  loading.value = true;
+  error.value = '';
+  try {
+    detail.value = await adminApi.userDetail(props.userId);
+  } catch {
+    error.value = t('Could not load this user.');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(load);
+watch(() => props.userId, load);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.link-back {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: none;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.link-back__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.detail__head {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: $primary-light;
+  color: $primary-dark;
+  font-weight: $font-bold;
+  font-size: 1.2rem;
+}
+
+.detail__name {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.detail__email {
+  margin: 0.1rem 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.admin-tag {
+  margin-left: auto;
+  padding: 0.2rem 0.6rem;
+  border-radius: $radius-md;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+}
+
+.facts {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.fact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+
+  dt {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  dd {
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.counts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.count {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  box-shadow: $elevation-1;
+}
+
+.count__value {
+  font-size: 1.5rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.count__label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.state {
+  padding: 2rem;
+  text-align: center;
+  color: $text-muted;
+}
+</style>
diff --git a/components/ai/AIChat.vue b/components/ai/AIChat.vue
deleted file mode 100644
index b1dcc7d..0000000
--- a/components/ai/AIChat.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div class="ai-chat">
-    <ChatSidebar
-      :sessions="sessions"
-      :current-session-id="currentSession?.id ?? null"
-      :is-loading="isLoadingSessions"
-      @new-chat="handleNew"
-      @open-session="handleOpen"
-      @delete-session="handleDelete"
-    />
-
-    <section class="chat-pane">
-      <header class="chat-header">
-        <Bot :size="18" class="chat-header-icon" />
-        <h2 class="chat-title">
-          {{ currentSession?.title || t('AI Insights') }}
-        </h2>
-      </header>
-
-      <div ref="chatWindow" class="chat-window">
-        <ChatMessageList
-          v-if="currentSession?.messages?.length"
-          :messages="currentSession.messages"
-        />
-        <ChatEmptyState v-else @pick="handleSuggestion" />
-      </div>
-
-      <ChatComposer ref="composerEl" v-model="input" :disabled="isSending" @submit="handleSubmit" />
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, nextTick, watch, onMounted } from 'vue';
-import { Bot } from 'lucide-vue-next';
-import { useAiChats } from '@/composables/useAiChats';
-import ChatSidebar from '@/components/ai/ChatSidebar.vue';
-import ChatMessageList from '@/components/ai/ChatMessageList.vue';
-import ChatEmptyState from '@/components/ai/ChatEmptyState.vue';
-import ChatComposer from '@/components/ai/ChatComposer.vue';
-
-const { t } = useI18n();
-
-const {
-  sessions,
-  currentSession,
-  isLoadingSessions,
-  isSending,
-  loadSessions,
-  openSession,
-  newSession,
-  send,
-  remove
-} = useAiChats();
-
-const input = ref('');
-const chatWindow = ref<HTMLElement | null>(null);
-const composerEl = ref<InstanceType<typeof ChatComposer> | null>(null);
-
-onMounted(() => {
-  loadSessions();
-});
-
-watch(
-  () => currentSession.value?.messages?.length,
-  () => scrollToBottom()
-);
-watch(
-  () => currentSession.value?.messages?.map((m) => m.status).join(','),
-  () => scrollToBottom()
-);
-
-const scrollToBottom = () => {
-  nextTick(() => {
-    if (chatWindow.value) {
-      chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
-    }
-  });
-};
-
-const handleSubmit = async () => {
-  const message = input.value.trim();
-  if (!message) return;
-  input.value = '';
-  await send(message);
-  scrollToBottom();
-};
-
-const handleSuggestion = async (prompt: string) => {
-  input.value = prompt;
-  await handleSubmit();
-};
-
-const handleOpen = async (id: number) => {
-  await openSession(id);
-  scrollToBottom();
-};
-
-const handleNew = () => {
-  newSession();
-  input.value = '';
-  composerEl.value?.focus();
-};
-
-const handleDelete = async (id: number) => {
-  await remove(id);
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/_variables.scss' as *;
-
-.ai-chat {
-  background: $bg-white;
-  border: 1px solid $border-light;
-  border-radius: $radius-xl;
-  box-shadow: $shadow-md;
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  height: calc(100vh - 120px);
-  min-height: 560px;
-  overflow: hidden;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-    height: calc(100vh - 100px);
-  }
-}
-
-.chat-pane {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  gap: $spacing-2;
-  padding: $spacing-3 $spacing-4;
-  border-bottom: 1px solid $border-light;
-}
-
-.chat-header-icon {
-  color: $primary;
-}
-
-.chat-title {
-  margin: 0;
-  font-size: $font-size-base;
-  font-weight: $font-semibold;
-  color: $text-primary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chat-window {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: $spacing-4;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-3;
-}
-</style>
diff --git a/components/ai/CanvasPanel.vue b/components/ai/CanvasPanel.vue
new file mode 100644
index 0000000..7d96798
--- /dev/null
+++ b/components/ai/CanvasPanel.vue
@@ -0,0 +1,177 @@
+<template>
+  <aside v-if="canvas" class="canvas">
+    <header class="canvas-header">
+      <div class="canvas-titles">
+        <span class="canvas-eyebrow">{{ t('Canvas') }}</span>
+        <h2 class="canvas-title">{{ canvas.title || t('Document') }}</h2>
+      </div>
+      <div class="canvas-tools">
+        <button
+          v-if="messageId"
+          type="button"
+          class="canvas-tool"
+          :title="t('Download as Markdown')"
+          @click="onDownload"
+        >
+          <Download :size="16" />
+        </button>
+        <button
+          type="button"
+          class="canvas-tool"
+          :title="t('Print / Save as PDF')"
+          @click="onPrint"
+        >
+          <Printer :size="16" />
+        </button>
+        <button type="button" class="canvas-close" :title="t('Close')" @click="$emit('close')">
+          <X :size="18" />
+        </button>
+      </div>
+    </header>
+    <div ref="bodyEl" class="canvas-body">
+      <ChatResultRenderer :result="canvasResult" :session-id="sessionId" />
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { X, Printer, Download } from 'lucide-vue-next';
+import ChatResultRenderer from '@/components/ai/ChatResultRenderer.vue';
+import { useCanvasExport } from '@/composables/useCanvasExport';
+import type { ChatBlock, ChatMessageResult } from '@/services/api/aiApi';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  canvas: (ChatBlock & { title?: string; blocks?: ChatBlock[] }) | null;
+  sessionId?: number;
+  messageId?: number;
+}>();
+
+defineEmits<{ (e: 'close'): void }>();
+
+const bodyEl = ref<HTMLElement | null>(null);
+const { printCanvas, downloadExport } = useCanvasExport();
+
+const onPrint = () => printCanvas(bodyEl.value, props.canvas?.title || 'Document');
+const onDownload = () => {
+  if (props.sessionId && props.messageId) {
+    downloadExport(props.sessionId, props.messageId, props.canvas?.title || 'Document', 'md');
+  }
+};
+
+// Reuse the block dispatcher to render the document's sections.
+const canvasResult = computed<ChatMessageResult>(() => ({
+  source: 'agent',
+  blocks: props.canvas?.blocks ?? []
+}));
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+// An in-content panel (not an overlay): it sits inside the page's content area
+// beside the chat, matching the rest of the app's surfaces.
+.canvas {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-xl;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+  align-self: stretch;
+}
+
+.canvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+  padding: 0 $spacing-4;
+  min-height: 60px;
+  border-bottom: 1px solid $border-light;
+  flex-shrink: 0;
+}
+
+.canvas-titles {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.canvas-eyebrow {
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: $font-semibold;
+  color: $primary;
+}
+
+.canvas-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.canvas-tools {
+  display: flex;
+  align-items: center;
+  gap: $spacing-1;
+  flex-shrink: 0;
+}
+
+.canvas-tool {
+  border: none;
+  background: transparent;
+  color: $text-secondary;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+.canvas-close {
+  border: none;
+  background: $bg-gray;
+  color: $text-secondary;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+.canvas-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $spacing-5 $spacing-5 $spacing-6;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+}
+</style>
diff --git a/components/ai/ChatComposer.vue b/components/ai/ChatComposer.vue
index 57173d5..706683a 100644
--- a/components/ai/ChatComposer.vue
+++ b/components/ai/ChatComposer.vue
@@ -1,29 +1,143 @@
 <template>
-  <form class="composer" @submit.prevent="handleSubmit">
-    <textarea
-      ref="textareaEl"
-      :value="modelValue"
-      rows="1"
-      class="chat-input"
-      :placeholder="t('Ask me anything about your finances...')"
-      :disabled="disabled"
-      @input="handleInput"
-      @keydown="handleKeydown"
-    />
-    <button
-      type="submit"
-      class="send-btn"
-      :title="t('Send')"
-      :disabled="disabled || !modelValue.trim()"
-    >
-      <Send :size="16" />
-    </button>
-  </form>
+  <div class="composer-shell">
+    <div v-if="files.length" class="attachments">
+      <span v-for="(file, i) in files" :key="i" class="attachment-chip">
+        <component :is="activeType?.icon || Paperclip" :size="12" />
+        <span class="chip-name">{{ file.name }}</span>
+        <span v-if="activeType" class="chip-type">{{ t(activeType.label) }}</span>
+        <button type="button" class="chip-remove" :title="t('Remove')" @click="removeFile(i)">
+          <X :size="12" />
+        </button>
+      </span>
+    </div>
+
+    <form class="composer" @submit.prevent="handleSubmit">
+      <button
+        ref="attachBtnRef"
+        type="button"
+        class="attach-btn"
+        :class="{ 'attach-btn--active': sheetOpen }"
+        :title="t('Attach a file')"
+        :disabled="disabled"
+        @click="toggleSheet"
+      >
+        <Plus :size="18" />
+      </button>
+      <input
+        ref="fileInput"
+        type="file"
+        class="file-input"
+        multiple
+        :accept="acceptFilter"
+        @change="onFilesPicked"
+      />
+      <textarea
+        ref="textareaEl"
+        :value="modelValue"
+        rows="1"
+        class="chat-input"
+        :placeholder="t('Ask me anything about your finances...')"
+        :disabled="disabled"
+        @input="handleInput"
+        @keydown="handleKeydown"
+      />
+      <button
+        type="submit"
+        class="send-btn"
+        :title="t('Send')"
+        :disabled="disabled || (!modelValue.trim() && files.length === 0)"
+      >
+        <Send :size="16" />
+      </button>
+    </form>
+
+    <!-- Popover anchored to the + button (teleported so it isn't clipped by the
+         composer's rounded overflow). A transparent backdrop catches outside clicks. -->
+    <Teleport to="body">
+      <div v-if="sheetOpen" class="attach-backdrop" @click="closeSheet" />
+      <Transition name="attach-pop">
+        <div v-if="sheetOpen" class="attach-pop" :style="popoverStyle">
+          <button
+            v-for="type in fileTypes"
+            :key="type.key"
+            type="button"
+            class="pop-option"
+            @click="chooseType(type)"
+          >
+            <span class="option-icon"><component :is="type.icon" :size="18" /></span>
+            <span class="option-text">
+              <span class="option-label">{{ t(type.label) }}</span>
+              <span class="option-hint">{{ t(type.hint) }}</span>
+            </span>
+          </button>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue';
-import { Send } from 'lucide-vue-next';
+import { ref, computed, nextTick, watch } from 'vue';
+import {
+  Send,
+  Plus,
+  Paperclip,
+  X,
+  Landmark,
+  Receipt,
+  FileText,
+  Image as ImageIcon
+} from 'lucide-vue-next';
+
+interface FileTypeOption {
+  key: string;
+  label: string;
+  hint: string;
+  accept: string;
+  documentType?: string;
+  icon: unknown;
+}
+
+const fileTypes: FileTypeOption[] = [
+  {
+    key: 'bank_statement',
+    label: 'Bank statement',
+    hint: 'Import transactions from a CSV or PDF',
+    accept: '.csv,.pdf',
+    documentType: 'bank_statement',
+    icon: Landmark
+  },
+  {
+    key: 'receipt',
+    label: 'Receipt',
+    hint: 'A photo or scan of a receipt',
+    accept: 'image/*,.pdf',
+    documentType: 'receipt',
+    icon: Receipt
+  },
+  {
+    key: 'invoice',
+    label: 'Invoice',
+    hint: 'A bill or invoice document',
+    accept: '.pdf,image/*',
+    documentType: 'invoice',
+    icon: FileText
+  },
+  {
+    key: 'photo',
+    label: 'Photo',
+    hint: 'Any image from your device',
+    accept: 'image/*',
+    icon: ImageIcon
+  },
+  {
+    key: 'document',
+    label: 'Document',
+    hint: 'CSV, PDF, spreadsheet or text file',
+    accept: '.csv,.pdf,.txt,.xls,.xlsx,.doc,.docx',
+    icon: Paperclip
+  }
+];
 
 const { t } = useI18n();
 
@@ -35,9 +149,76 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
   (e: 'submit'): void;
+  (e: 'attach', files: File[]): void;
 }>();
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const attachBtnRef = ref<HTMLButtonElement | null>(null);
+const files = ref<File[]>([]);
+
+const sheetOpen = ref(false);
+const popoverStyle = ref<Record<string, string>>({});
+
+const activeType = ref<FileTypeOption | null>(null);
+const acceptFilter = computed(
+  () =>
+    activeType.value?.accept || '.csv,.pdf,.png,.jpg,.jpeg,.webp,.gif,.txt,.xls,.xlsx,.doc,.docx'
+);
+
+// Anchor the popover just above the + button (fixed-positioned so the composer's
+// rounded overflow can't clip it).
+const openSheet = () => {
+  const r = attachBtnRef.value?.getBoundingClientRect();
+  if (r && typeof window !== 'undefined') {
+    const width = 300;
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8));
+    popoverStyle.value = {
+      position: 'fixed',
+      left: `${left}px`,
+      bottom: `${window.innerHeight - r.top + 8}px`,
+      width: `${width}px`
+    };
+  }
+  sheetOpen.value = true;
+};
+const closeSheet = () => {
+  sheetOpen.value = false;
+};
+const toggleSheet = () => {
+  if (sheetOpen.value) closeSheet();
+  else openSheet();
+};
+
+const chooseType = (type: FileTypeOption) => {
+  activeType.value = type;
+  closeSheet();
+  // Wait for the dynamic accept to bind before opening the picker.
+  nextTick(() => fileInput.value?.click());
+};
+
+const documentType = computed(() => activeType.value?.documentType ?? null);
+
+const onFilesPicked = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const picked = Array.from(target.files ?? []);
+  if (picked.length) {
+    files.value = [...files.value, ...picked];
+    emit('attach', files.value);
+  }
+  target.value = '';
+};
+
+const removeFile = (index: number) => {
+  files.value.splice(index, 1);
+  if (files.value.length === 0) activeType.value = null;
+  emit('attach', files.value);
+};
+
+const clearFiles = () => {
+  files.value = [];
+  activeType.value = null;
+};
 
 const autoResize = () => {
   const el = textareaEl.value;
@@ -61,7 +242,8 @@ const handleKeydown = (event: KeyboardEvent) => {
 };
 
 const handleSubmit = () => {
-  if (!props.modelValue.trim() || props.disabled) return;
+  if (props.disabled) return;
+  if (!props.modelValue.trim() && files.value.length === 0) return;
   emit('submit');
 };
 
@@ -76,27 +258,192 @@ watch(
 );
 
 defineExpose({
-  focus: () => textareaEl.value?.focus()
+  focus: () => textareaEl.value?.focus(),
+  clearFiles,
+  files,
+  documentType
 });
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/_variables.scss' as *;
 
-.composer {
+.composer-shell {
+  position: relative;
   flex-shrink: 0;
+  border-top: 1px solid $border-light;
+  background: $bg-white;
+}
+
+.composer {
   display: flex;
   align-items: flex-end;
   gap: $spacing-2;
   padding: $spacing-3 $spacing-4;
-  border-top: 1px solid $border-light;
+}
+
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-4 0;
+}
+
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px 2px 8px;
+  background: $primary-light;
+  color: $primary;
+  border-radius: 9999px;
+  font-size: $font-size-xs;
+
+  .chip-remove {
+    display: inline-flex;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+  }
+}
+
+.file-input {
+  display: none;
+}
+
+.attach-btn {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: $bg-gray;
+  color: $text-secondary;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: $transition-base;
+
+  &:hover:not(:disabled),
+  &--active {
+    background: $primary-light;
+    color: $primary;
+  }
+
+  &--active {
+    transform: rotate(45deg);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.chip-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-type {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.6rem;
+  font-weight: $font-semibold;
+  background: $primary;
+  color: $text-inverse;
+  border-radius: 9999px;
+  padding: 1px 6px;
+}
+
+.attach-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1049;
+  background: transparent;
+}
+
+.attach-pop {
+  /* position/left/bottom/width set inline (anchored to the button) */
+  z-index: 1050;
   background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $elevation-3;
+  padding: $spacing-1;
+  transform-origin: bottom left;
+}
+
+.pop-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2;
+  border: none;
+  background: none;
+  border-radius: $radius-md;
+  cursor: pointer;
+  text-align: left;
+  transition: $transition-base;
+
+  &:hover {
+    background: $primary-light;
+  }
+
+  .option-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: $radius-md;
+    background: $bg-gray;
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  .option-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .option-label {
+    font-weight: $font-semibold;
+    color: $text-primary;
+    font-size: $font-size-sm;
+  }
+
+  .option-hint {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+}
+
+.attach-pop-enter-active,
+.attach-pop-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.attach-pop-enter-from,
+.attach-pop-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(6px);
 }
 
 .chat-input {
   flex: 1;
   resize: none;
-  padding: $spacing-2 $spacing-3;
+  padding: $spacing-3 $spacing-3;
+  min-height: 52px;
   border: 1px solid $border-light;
   border-radius: $radius-lg;
   outline: none;
@@ -104,8 +451,8 @@ defineExpose({
   font-family: inherit;
   background: $bg-gray;
   color: $text-primary;
-  line-height: 1.4;
-  max-height: 160px;
+  line-height: 1.5;
+  max-height: 200px;
   overflow-y: auto;
   transition: $transition-base;
 
diff --git a/components/ai/ChatExperience.vue b/components/ai/ChatExperience.vue
new file mode 100644
index 0000000..3fab969
--- /dev/null
+++ b/components/ai/ChatExperience.vue
@@ -0,0 +1,601 @@
+<template>
+  <div
+    class="chat-experience"
+    :class="{
+      'is-fullscreen': isFullscreen,
+      'mode-full': mode === 'full',
+      'mode-landing': mode === 'landing'
+    }"
+  >
+    <!-- Full mode: collapsible history sidebar -->
+    <ChatSidebar
+      v-if="mode === 'full' && !sidebarCollapsed"
+      class="experience-sidebar"
+      :sessions="sessions"
+      :current-session-id="currentSession?.id ?? null"
+      :is-loading="isLoadingSessions"
+      @new-chat="handleNew"
+      @open-session="handleOpen"
+      @delete-session="remove"
+    />
+
+    <section class="chat-main">
+      <!-- Hero: a centered chatbox in both modes until the first message. -->
+      <div v-if="!hasConversation" class="hero">
+        <div class="hero-mark"><Bot :size="30" /></div>
+        <h1 class="hero-title">{{ t('What can I help with?') }}</h1>
+        <p class="hero-subtitle">
+          {{ t('Ask about your money, log a transaction, or import a statement.') }}
+        </p>
+        <div class="hero-composer">
+          <ChatComposer
+            ref="composerEl"
+            v-model="input"
+            :disabled="isSending"
+            @submit="handleSubmit"
+            @attach="handleAttach"
+          />
+        </div>
+        <ChatLandingInsights @pick="handleSuggestion" />
+        <div class="hero-suggestions">
+          <button
+            v-for="s in sessionSuggestions"
+            :key="s.text"
+            type="button"
+            class="suggestion"
+            @click="handleSuggestion(s.text)"
+          >
+            <component
+              :is="iconFor(s.icon)"
+              v-if="iconFor(s.icon)"
+              class="suggestion-icon"
+              :size="15"
+            />
+            <span>{{ s.text }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Work area: conversation, optionally split with the canvas. -->
+      <div v-else class="work" :class="{ 'with-canvas': !!openCanvas }">
+        <section class="conversation">
+          <div class="chat-ambient" aria-hidden="true">
+            <Wallet class="amb a1" :size="150" :stroke-width="1" />
+            <PieChart class="amb a2" :size="120" :stroke-width="1" />
+            <Coins class="amb a3" :size="104" :stroke-width="1" />
+            <Receipt class="amb a4" :size="132" :stroke-width="1" />
+            <PiggyBank class="amb a5" :size="116" :stroke-width="1" />
+            <TrendingUp class="amb a6" :size="110" :stroke-width="1" />
+          </div>
+          <header class="chat-header">
+            <div class="header-left">
+              <button
+                v-if="mode === 'full'"
+                type="button"
+                class="header-icon-btn"
+                :title="t('Toggle history')"
+                @click="sidebarCollapsed = !sidebarCollapsed"
+              >
+                <component :is="sidebarCollapsed ? PanelLeft : PanelLeftClose" :size="16" />
+              </button>
+
+              <DiscussionDropdown
+                v-if="mode === 'landing'"
+                :sessions="sessions"
+                :current-id="currentSession?.id ?? null"
+                :current-title="currentSession?.title || t('New chat')"
+                @open="handleOpen"
+                @new="handleNew"
+              />
+              <h2 v-else class="chat-title">{{ currentSession?.title || t('Assistant') }}</h2>
+            </div>
+
+            <div class="header-actions">
+              <button
+                type="button"
+                class="header-icon-btn"
+                :title="t('New chat')"
+                @click="handleNew"
+              >
+                <Plus :size="16" />
+              </button>
+              <button
+                type="button"
+                class="header-icon-btn"
+                :title="isFullscreen ? t('Exit full screen') : t('Full screen')"
+                @click="toggleFullscreen"
+              >
+                <component :is="isFullscreen ? Minimize2 : Maximize2" :size="16" />
+              </button>
+            </div>
+          </header>
+
+          <div ref="chatWindow" class="chat-window">
+            <ChatMessageList
+              v-if="currentSession?.messages?.length"
+              :messages="currentSession.messages"
+              :session-id="currentSession.id"
+              @reload="reloadCurrent"
+              @open-canvas="onOpenCanvas"
+              @send-message="handleSuggestion"
+            />
+            <ChatEmptyState v-else @pick="handleSuggestion" />
+          </div>
+
+          <div class="composer-dock">
+            <ChatComposer
+              ref="composerEl"
+              v-model="input"
+              :disabled="isSending"
+              @submit="handleSubmit"
+              @attach="handleAttach"
+            />
+          </div>
+        </section>
+
+        <CanvasPanel
+          v-if="openCanvas"
+          class="work-canvas"
+          :canvas="openCanvas"
+          :session-id="currentSession?.id"
+          :message-id="canvasMessageId ?? undefined"
+          @close="closeCanvas"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, type Component } from 'vue';
+import {
+  Bot,
+  Plus,
+  Maximize2,
+  Minimize2,
+  PanelLeft,
+  PanelLeftClose,
+  Wallet,
+  PieChart,
+  Coins,
+  Receipt,
+  PiggyBank,
+  TrendingUp
+} from 'lucide-vue-next';
+import * as lucideIcons from 'lucide-vue-next';
+import { useChatSurface } from '@/composables/useChatSurface';
+import { usePendingAsk } from '@/composables/usePendingAsk';
+import { pickSuggestions, type Suggestion } from '@/utils/landingSuggestions';
+import ChatSidebar from '@/components/ai/ChatSidebar.vue';
+import ChatComposer from '@/components/ai/ChatComposer.vue';
+import ChatMessageList from '@/components/ai/ChatMessageList.vue';
+import ChatEmptyState from '@/components/ai/ChatEmptyState.vue';
+import CanvasPanel from '@/components/ai/CanvasPanel.vue';
+import DiscussionDropdown from '@/components/ai/DiscussionDropdown.vue';
+import ChatLandingInsights from '@/components/ai/ChatLandingInsights.vue';
+
+withDefaults(defineProps<{ mode?: 'landing' | 'full' }>(), { mode: 'landing' });
+
+const { t } = useI18n();
+
+const {
+  sessions,
+  currentSession,
+  isLoadingSessions,
+  isSending,
+  loadSessions,
+  openSession,
+  newSession,
+  remove,
+  input,
+  openCanvas,
+  canvasMessageId,
+  isFullscreen,
+  chatWindow,
+  composerEl,
+  scrollToBottom,
+  handleAttach,
+  handleSubmit,
+  reloadCurrent,
+  onOpenCanvas,
+  closeCanvas,
+  toggleFullscreen
+} = useChatSurface();
+
+const sidebarCollapsed = ref(false);
+
+const hasConversation = computed(() => (currentSession.value?.messages?.length ?? 0) > 0);
+
+const sessionSuggestions = ref<Suggestion[]>([]);
+const lucideMap = lucideIcons as unknown as Record<string, Component>;
+const iconFor = (name: string): Component | null => lucideMap[name] ?? null;
+
+const route = useRoute();
+const router = useRouter();
+const { consumePendingAsk } = usePendingAsk();
+
+onMounted(() => {
+  loadSessions();
+  sessionSuggestions.value = pickSuggestions(8);
+
+  // A dashboard quick action can hand off a fully-formed prompt (and files) to
+  // run immediately, instead of an empty round-trip.
+  const pending = consumePendingAsk();
+  if (pending && (pending.text?.trim() || pending.files?.length)) {
+    if (pending.files?.length) handleAttach(pending.files);
+    input.value = pending.text ?? '';
+    handleSubmit();
+    return;
+  }
+
+  // A plain deep link (?ask=) can also carry a prompt.
+  const ask = route.query.ask;
+  if (typeof ask === 'string' && ask.trim()) {
+    handleSuggestion(ask);
+    router.replace({ query: {} });
+  }
+});
+
+const handleSuggestion = async (prompt: string) => {
+  input.value = prompt;
+  await handleSubmit();
+};
+
+const handleOpen = async (id: number) => {
+  await openSession(id);
+  scrollToBottom();
+};
+
+const handleNew = () => {
+  newSession();
+  input.value = '';
+  closeCanvas();
+  composerEl.value?.focus?.();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-experience {
+  width: 100%;
+  display: flex;
+  min-width: 0;
+}
+
+/* Full mode: a bordered card with the history sidebar beside the work area. */
+.mode-full {
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  height: calc(100vh - 110px);
+  min-height: 560px;
+  overflow: hidden;
+
+  .experience-sidebar {
+    flex: 0 0 260px;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    .experience-sidebar {
+      display: none;
+    }
+  }
+}
+
+.mode-landing {
+  height: 100%;
+  min-height: 0;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.chat-main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: $bg-white;
+  border-radius: 0;
+  height: 100vh;
+  padding: $spacing-2 $spacing-4;
+}
+
+.chat-main:has(.hero) {
+  background:
+    radial-gradient(62% 56% at 50% 44%, $bg-white, transparent 72%),
+    radial-gradient(46% 42% at 3% 2%, rgba(var(--color-primary-rgb), 0.24), transparent 56%),
+    radial-gradient(44% 40% at 98% 2%, rgba(var(--color-info-rgb), 0.22), transparent 56%),
+    radial-gradient(44% 40% at 98% 99%, rgba(var(--color-warning-rgb), 0.22), transparent 56%),
+    radial-gradient(46% 42% at 2% 99%, rgba(var(--color-error-rgb), 0.18), transparent 56%),
+    $bg-light;
+}
+
+/* Hero (landing, empty) */
+.hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  gap: $spacing-3;
+  padding: $spacing-5 $spacing-4 $spacing-4;
+  max-width: 720px;
+  margin: 0 auto;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.hero-mark {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $primary-light;
+  color: $primary;
+}
+
+.hero-title {
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.hero-subtitle {
+  color: $text-muted;
+  margin: 0;
+}
+
+.hero-composer,
+.composer-dock {
+  border: 1px solid $border-light;
+  border-radius: 16px;
+  overflow: hidden;
+  background: $bg-white;
+  box-shadow: $elevation-2;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus-within {
+    border-color: $primary;
+    box-shadow:
+      0 0 0 3px rgba(var(--color-primary-rgb), 0.1),
+      $elevation-2;
+  }
+
+  :deep(.composer-shell) {
+    border-top: none;
+    background: transparent;
+  }
+
+  :deep(.chat-input) {
+    border: none;
+    background: transparent;
+    min-height: 46px;
+
+    &:focus {
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+}
+
+.hero-composer {
+  width: 100%;
+  margin-top: $spacing-2;
+}
+
+.hero-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+  justify-content: center;
+}
+
+.suggestion {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid $border-light;
+  background: $bg-white;
+  color: $text-secondary;
+  border-radius: 9999px;
+  padding: $spacing-2 $spacing-3;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  transition: $transition-base;
+
+  .suggestion-icon {
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+    border-color: $primary-muted;
+    transform: translateY(-1px);
+  }
+}
+
+/* Work area */
+.work {
+  flex: 1;
+  display: flex;
+  gap: $spacing-4;
+  min-height: 0;
+}
+
+.conversation {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  background:
+    radial-gradient(120% 60% at 50% 0%, rgba(var(--color-primary-rgb), 0.04), transparent 60%),
+    $bg-light;
+
+  > .chat-header,
+  > .chat-window,
+  > .composer-dock {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.chat-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .amb {
+    position: absolute;
+    color: $primary;
+    opacity: 0.05;
+  }
+  .a1 {
+    top: 8%;
+    left: 4%;
+    transform: rotate(-12deg);
+  }
+  .a2 {
+    top: 22%;
+    right: 6%;
+    color: $info;
+    transform: rotate(10deg);
+  }
+  .a3 {
+    top: 52%;
+    left: 8%;
+    color: $warning;
+    transform: rotate(8deg);
+  }
+  .a4 {
+    bottom: 16%;
+    right: 9%;
+    transform: rotate(-8deg);
+  }
+  .a5 {
+    bottom: 6%;
+    left: 14%;
+    color: $warning;
+    transform: rotate(6deg);
+  }
+  .a6 {
+    top: 40%;
+    left: 46%;
+    color: $info;
+    transform: rotate(-6deg);
+  }
+}
+
+.work.with-canvas {
+  .conversation {
+    max-width: none;
+    margin: 0;
+    flex: 1 1 60%;
+  }
+
+  .work-canvas {
+    flex: 1 1 40%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 960px) {
+  .work.with-canvas {
+    flex-direction: column;
+  }
+}
+
+/* One header rule for both modes, matching CanvasPanel's header so the chat and
+   canvas titles always line up. */
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+  min-height: 52px;
+  padding: 0 $spacing-4;
+  border-bottom: 1px solid $border-light;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  min-width: 0;
+}
+
+.chat-title {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-medium;
+  color: $text-secondary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-1;
+  flex-shrink: 0;
+}
+
+/* Ghost buttons: they recede until hovered so they don't compete with the chat. */
+.header-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+/* Full-width scroll area, but the messages stay centered/readable via responsive
+   side padding, so the header divider reads as one clean full-width rule. */
+.chat-window {
+  flex: 1;
+  overflow-y: auto;
+  padding: $spacing-4 max(#{$spacing-3}, calc((100% - 768px) / 2));
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  min-height: 0;
+}
+
+.composer-dock {
+  width: min(768px, calc(100% - #{$spacing-3} * 2));
+  margin: 0 auto $spacing-3;
+}
+</style>
diff --git a/components/ai/ChatLandingInsights.vue b/components/ai/ChatLandingInsights.vue
new file mode 100644
index 0000000..2595925
--- /dev/null
+++ b/components/ai/ChatLandingInsights.vue
@@ -0,0 +1,786 @@
+<template>
+  <div v-if="loading" class="landing-insights" aria-hidden="true">
+    <div class="skeleton spotlight-skeleton" />
+    <div class="skeleton panel-skeleton" />
+  </div>
+
+  <div v-else-if="!hasData" class="landing-insights">
+    <p class="empty-hint">
+      <Lightbulb :size="16" />
+      <span>{{ t("Add a few transactions and I'll start spotting trends for you.") }}</span>
+    </p>
+  </div>
+
+  <div v-else class="landing-insights">
+    <button
+      v-if="currentSpotlight"
+      type="button"
+      class="spotlight"
+      :title="t('Ask about this')"
+      @click="pickSpotlight"
+    >
+      <span class="spotlight-spark"><Lightbulb :size="16" /></span>
+      <Transition name="fade" mode="out-in">
+        <span :key="spotlightIndex" class="spotlight-text">
+          {{ t(currentSpotlight.key, currentSpotlight.params || {}) }}
+        </span>
+      </Transition>
+    </button>
+
+    <div
+      ref="track"
+      class="carousel"
+      :style="{ height: panelHeight }"
+      @scroll.passive="onScroll"
+      @mouseenter="pause"
+      @mouseleave="resume"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+    >
+      <!-- Panel 1: three warm cards on one row -->
+      <section class="panel">
+        <div class="stat-row">
+          <article class="stat green" style="--i: 0">
+            <ArtNetFlow class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconNetFlow /></span>
+              <span class="stat-label">{{ t('Net flow') }}</span>
+            </header>
+            <span class="stat-value" :class="net >= 0 ? 'pos' : 'neg'">{{ money(net) }}</span>
+            <span class="stat-viz">
+              <SparkLine
+                v-if="trend.length >= 2"
+                :values="trend"
+                color="var(--color-primary)"
+                :width="150"
+                :height="34"
+              />
+            </span>
+            <span class="stat-sub">
+              {{ t('In') }} {{ money(income) }} &middot; {{ t('Out') }} {{ money(expenses) }}
+            </span>
+          </article>
+
+          <article class="stat amber" style="--i: 1">
+            <ArtSaved class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconSaved /></span>
+              <span class="stat-label">{{ t('Saved') }}</span>
+            </header>
+            <span class="stat-value">{{ savingsRate }}<i>%</i></span>
+            <span class="stat-viz">
+              <span class="ring" :style="{ '--p': savingsRate }"><span class="ring-hole" /></span>
+            </span>
+            <span class="stat-sub">{{ t('of income kept') }}</span>
+          </article>
+
+          <article class="stat blue" style="--i: 2">
+            <ArtCategory class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconCategory /></span>
+              <span class="stat-label">{{ t('Top category') }}</span>
+            </header>
+            <span class="stat-value cat-name">{{ topCategory.name }}</span>
+            <span class="stat-viz bars">
+              <span v-for="c in topCategories" :key="c.name" class="vbar" :title="c.name">
+                <span class="vbar-fill" :style="{ height: c.height }" />
+              </span>
+            </span>
+            <span class="stat-sub">{{ topCategory.pct }}% {{ t('of spend') }}</span>
+          </article>
+        </div>
+      </section>
+
+      <!-- Panel 2: same warm pattern, cashflow hero + three cards -->
+      <section class="panel">
+        <article class="stat green wide" style="--i: 0">
+          <ArtTrend class="stat-art stat-art--wide" />
+          <header class="stat-head spread">
+            <span class="stat-head-left">
+              <span class="stat-coin"><IconTrend /></span>
+              <span class="stat-label">{{ t('Cashflow trend') }}</span>
+            </span>
+            <span class="stat-value sm" :class="net >= 0 ? 'pos' : 'neg'">{{ money(net) }}</span>
+          </header>
+          <span class="stat-viz wide-viz">
+            <SparkLine
+              v-if="trend.length >= 2"
+              :values="trend"
+              color="var(--color-primary)"
+              :width="560"
+              :height="58"
+            />
+            <span v-else class="stat-sub">{{ t('Not enough history yet') }}</span>
+          </span>
+        </article>
+
+        <div class="stat-row">
+          <article class="stat blue" style="--i: 1">
+            <ArtTransactions class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconTransactions /></span>
+              <span class="stat-label">{{ t('Transactions') }}</span>
+            </header>
+            <span class="stat-value">{{ txCount }}</span>
+            <span class="stat-sub">{{ t('this month') }}</span>
+          </article>
+
+          <article class="stat amber" style="--i: 2">
+            <ArtAvg class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconAvg /></span>
+              <span class="stat-label">{{ t('Avg expense') }}</span>
+            </header>
+            <span class="stat-value">{{ money(avgExpense) }}</span>
+            <span class="stat-sub">{{ t('per transaction') }}</span>
+          </article>
+
+          <article class="stat rose" style="--i: 3">
+            <ArtBiggest class="stat-art" />
+            <header class="stat-head">
+              <span class="stat-coin"><IconBiggest /></span>
+              <span class="stat-label">{{ t('Biggest expense') }}</span>
+            </header>
+            <span class="stat-value cat-name">{{ biggestExpense }}</span>
+            <span class="stat-sub">{{ t('top destination') }}</span>
+          </article>
+        </div>
+      </section>
+    </div>
+
+    <div class="dots" role="tablist">
+      <button
+        v-for="(label, i) in panelLabels"
+        :key="i"
+        type="button"
+        class="dot"
+        :class="{ active: activeIndex === i }"
+        :aria-label="label"
+        @click="goTo(i, true)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { Lightbulb } from 'lucide-vue-next';
+// Solid (-bold) glyphs for the small chips, duotone (-bold-duotone) for the
+// large watermarks.
+import IconNetFlow from '~icons/solar/transfer-vertical-bold';
+import IconSaved from '~icons/solar/safe-2-bold';
+import IconCategory from '~icons/solar/pie-chart-2-bold';
+import IconTrend from '~icons/solar/graph-new-bold';
+import IconTransactions from '~icons/solar/bill-list-bold';
+import IconAvg from '~icons/solar/wad-of-money-bold';
+import IconBiggest from '~icons/solar/shop-2-bold';
+import ArtNetFlow from '~icons/solar/transfer-vertical-bold-duotone';
+import ArtSaved from '~icons/solar/safe-2-bold-duotone';
+import ArtCategory from '~icons/solar/pie-chart-2-bold-duotone';
+import ArtTrend from '~icons/solar/graph-new-bold-duotone';
+import ArtTransactions from '~icons/solar/bill-list-bold-duotone';
+import ArtAvg from '~icons/solar/wad-of-money-bold-duotone';
+import ArtBiggest from '~icons/solar/shop-2-bold-duotone';
+import SparkLine from '@/components/reports/SparkLine.vue';
+import { useStatistics, type WalletStatistics } from '@/composables/useStatistics';
+import { useSharedData } from '@/composables/useSharedData';
+import { buildSpotlightInsights, type SpotlightInsight } from '@/utils/landingInsights';
+
+const emit = defineEmits<{ (e: 'pick', prompt: string): void }>();
+
+const SPOTLIGHT_ROTATE_MS = 5000;
+const PANEL_ADVANCE_MS = 6000;
+
+const { t } = useI18n();
+const { getStatistics, formatCompactCurrency } = useStatistics();
+const { getDefaultCurrency, loadWallets } = useSharedData();
+
+const stats = ref<WalletStatistics | null>(null);
+const loading = ref(true);
+
+const money = (amount: number): string =>
+  formatCompactCurrency(amount || 0, getDefaultCurrency.value || 'USD');
+const round = (n: number) => Math.round(n);
+
+const hasData = computed(() => {
+  const s = stats.value;
+  if (!s) return false;
+  return (s.transaction_count || 0) > 0 || (s.total_expenses || 0) > 0 || (s.total_income || 0) > 0;
+});
+
+const income = computed(() => stats.value?.total_income || 0);
+const expenses = computed(() => stats.value?.total_expenses || 0);
+const net = computed(() => income.value - expenses.value);
+
+const savingsRate = computed(() =>
+  Math.max(
+    0,
+    Math.min(100, round((stats.value?.expense_insights?.budget_analysis?.savings_rate || 0) * 100))
+  )
+);
+
+const topCategory = computed(() => {
+  const c = stats.value?.expense_insights?.biggest_category;
+  return { name: c?.category || t('N/A'), pct: round(c?.percentage || 0) };
+});
+
+const topCategories = computed(() => {
+  const list = stats.value?.expense_insights?.top_categories || [];
+  const max = Math.max(...list.map((c) => c.percentage), 1);
+  return list.slice(0, 4).map((c) => ({
+    name: c.category,
+    pct: round(c.percentage),
+    height: `${Math.max(14, (c.percentage / max) * 100)}%`
+  }));
+});
+
+const trend = computed(() => (stats.value?.time_analysis?.monthly_trends || []).map((m) => m.net));
+const txCount = computed(() => stats.value?.transaction_count || 0);
+const avgExpense = computed(() => stats.value?.expense_insights?.average_transaction || 0);
+const biggestExpense = computed(
+  () => stats.value?.expense_insights?.biggest_expense?.party || t('N/A')
+);
+
+/* Spotlight */
+const spotlights = computed<SpotlightInsight[]>(() => buildSpotlightInsights(stats.value, money));
+const spotlightIndex = ref(0);
+const currentSpotlight = computed(() => spotlights.value[spotlightIndex.value] || null);
+const pickSpotlight = () => {
+  const s = currentSpotlight.value;
+  if (s) emit('pick', t(s.prompt, s.promptParams || {}));
+};
+
+/* Carousel */
+const track = ref<HTMLElement | null>(null);
+const activeIndex = ref(0);
+const panelLabels = computed(() => [t('Pulse'), t('Trends')]);
+const reducedMotion = () =>
+  typeof window !== 'undefined' &&
+  !!window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+
+const panelHeight = ref<string>('auto');
+const measure = (i = activeIndex.value) => {
+  const panel = track.value?.children[i] as HTMLElement | undefined;
+  if (panel) panelHeight.value = `${panel.offsetHeight}px`;
+};
+
+let scrollRaf = 0;
+const onScroll = () => {
+  if (scrollRaf) return;
+  scrollRaf = requestAnimationFrame(() => {
+    scrollRaf = 0;
+    const el = track.value;
+    if (el) activeIndex.value = Math.round(el.scrollLeft / el.clientWidth);
+  });
+};
+const goTo = (i: number, manual = false) => {
+  const el = track.value;
+  if (el) el.scrollTo({ left: i * el.clientWidth, behavior: reducedMotion() ? 'auto' : 'smooth' });
+  measure(i);
+  if (manual) bumpAuto();
+};
+
+watch(activeIndex, (i) => measure(i));
+
+/* Auto-advance, paused while the user hovers or drags */
+const paused = ref(false);
+let autoTimer: ReturnType<typeof setInterval> | null = null;
+const pause = () => (paused.value = true);
+const resume = () => (paused.value = false);
+const startAuto = () => {
+  if (autoTimer || reducedMotion()) return;
+  autoTimer = setInterval(() => {
+    if (paused.value) return;
+    goTo((activeIndex.value + 1) % panelLabels.value.length);
+  }, PANEL_ADVANCE_MS);
+};
+const bumpAuto = () => {
+  if (!autoTimer || reducedMotion()) return;
+  clearInterval(autoTimer);
+  autoTimer = null;
+  startAuto();
+};
+
+/* Mouse drag-to-swipe (touch/trackpad already work natively) */
+let dragging = false;
+let startX = 0;
+let startScroll = 0;
+const onPointerDown = (e: PointerEvent) => {
+  if (e.pointerType !== 'mouse') return;
+  dragging = true;
+  paused.value = true;
+  startX = e.clientX;
+  startScroll = track.value?.scrollLeft || 0;
+};
+const onPointerMove = (e: PointerEvent) => {
+  if (!dragging || !track.value) return;
+  track.value.scrollLeft = startScroll - (e.clientX - startX);
+};
+const onPointerUp = () => {
+  dragging = false;
+  paused.value = false;
+};
+
+/* Spotlight rotation */
+let rotateTimer: ReturnType<typeof setInterval> | null = null;
+const startRotation = () => {
+  if (rotateTimer || reducedMotion() || spotlights.value.length <= 1) return;
+  rotateTimer = setInterval(() => {
+    spotlightIndex.value = (spotlightIndex.value + 1) % spotlights.value.length;
+  }, SPOTLIGHT_ROTATE_MS);
+};
+
+onMounted(async () => {
+  try {
+    await loadWallets();
+    stats.value = await getStatistics(null, 'current_month');
+  } catch {
+    stats.value = null;
+  } finally {
+    loading.value = false;
+  }
+  if (hasData.value) {
+    await nextTick();
+    measure();
+    window.addEventListener('resize', onResize);
+    startRotation();
+    startAuto();
+  }
+});
+
+const onResize = () => measure();
+
+onBeforeUnmount(() => {
+  if (rotateTimer) clearInterval(rotateTimer);
+  if (autoTimer) clearInterval(autoTimer);
+  if (scrollRaf) cancelAnimationFrame(scrollRaf);
+  window.removeEventListener('resize', onResize);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.landing-insights {
+  width: 100%;
+  max-width: 680px;
+  margin: $spacing-4 auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.empty-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-2;
+  margin: 0;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 14px;
+  background: $bg-gray;
+  color: $text-muted;
+  font-size: $font-size-sm;
+
+  svg {
+    color: $warning;
+  }
+}
+
+/* Spotlight: a quiet insight banner, no saturated fill */
+.spotlight {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  width: 100%;
+  padding: $spacing-2 $spacing-3;
+  border: 1px solid $border-light;
+  border-radius: 12px;
+  background: $bg-light;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    background: $bg-gray;
+    border-color: $border-medium;
+  }
+}
+
+.spotlight-spark {
+  display: inline-flex;
+  color: $warning;
+  flex-shrink: 0;
+}
+
+.spotlight-text {
+  font-weight: $font-medium;
+}
+
+/* Carousel: height is set inline to the active panel and animates between them */
+.carousel {
+  display: flex;
+  align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.panel {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+  min-width: 0;
+  padding: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+/* One row of cards */
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-3;
+
+  @media (max-width: 560px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Shared warm card, used in both swipes */
+.stat {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 18px;
+  border: 1px solid;
+  min-width: 0;
+  min-height: 132px;
+  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  animation-delay: calc(var(--i) * 80ms);
+
+  > *:not(.stat-art) {
+    position: relative;
+    z-index: 1;
+  }
+
+  &.wide {
+    min-height: auto;
+  }
+
+  &.green {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--color-primary-rgb), 0.13),
+      rgba(var(--color-primary-rgb), 0.02)
+    );
+    border-color: rgba(var(--color-primary-rgb), 0.18);
+  }
+  &.amber {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--color-warning-rgb), 0.17),
+      rgba(var(--color-warning-rgb), 0.03)
+    );
+    border-color: rgba(var(--color-warning-rgb), 0.22);
+  }
+  &.blue {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--color-info-rgb), 0.13),
+      rgba(var(--color-info-rgb), 0.02)
+    );
+    border-color: rgba(var(--color-info-rgb), 0.18);
+  }
+  &.rose {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--color-error-rgb), 0.11),
+      rgba(var(--color-error-rgb), 0.02)
+    );
+    border-color: rgba(var(--color-error-rgb), 0.16);
+  }
+}
+
+.stat-art {
+  position: absolute;
+  right: -14px;
+  bottom: -16px;
+  width: 104px;
+  height: 104px;
+  z-index: 0;
+  opacity: 0.16;
+  pointer-events: none;
+  transform: rotate(-6deg);
+
+  &--wide {
+    width: 120px;
+    height: 120px;
+  }
+
+  .green & {
+    color: $primary;
+  }
+  .amber & {
+    color: $warning;
+  }
+  .blue & {
+    color: $info;
+  }
+  .rose & {
+    color: $error-color;
+  }
+}
+
+.stat-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &.spread {
+    justify-content: space-between;
+  }
+}
+
+.stat-head-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+
+  .green & {
+    color: $primary;
+  }
+  .amber & {
+    color: $warning;
+  }
+  .blue & {
+    color: $info;
+  }
+  .rose & {
+    color: $error-color;
+  }
+}
+
+.stat-label {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: $text-muted;
+}
+
+.stat-value {
+  font-size: $font-size-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  i {
+    font-style: normal;
+    font-size: $font-size-base;
+    color: $text-muted;
+  }
+  &.sm {
+    font-size: $font-size-base;
+  }
+  &.pos {
+    color: $primary;
+  }
+  &.neg {
+    color: $error-color;
+  }
+  &.cat-name {
+    text-transform: capitalize;
+    font-size: $font-size-lg;
+  }
+}
+
+.stat-viz {
+  margin-top: auto;
+  display: flex;
+  align-items: flex-end;
+  min-height: 34px;
+
+  :deep(.sparkline) {
+    width: 100%;
+    height: 34px;
+  }
+
+  &.bars {
+    gap: 5px;
+    height: 34px;
+  }
+
+  &.wide-viz :deep(.sparkline) {
+    height: 58px;
+  }
+}
+
+.vbar {
+  width: 13px;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  border-radius: 5px;
+  background: rgba(var(--color-info-rgb), 0.14);
+  overflow: hidden;
+}
+
+.vbar-fill {
+  width: 100%;
+  background: $info;
+  border-radius: 5px;
+  transform-origin: bottom;
+  animation: growY 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  animation-delay: 0.2s;
+}
+
+.ring {
+  --p: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: conic-gradient($warning calc(var(--p) * 1%), rgba(var(--color-warning-rgb), 0.18) 0);
+}
+
+.ring-hole {
+  width: 31px;
+  height: 31px;
+  border-radius: 50%;
+  background: $bg-white;
+}
+
+.stat-sub {
+  font-size: $font-size-xs;
+  color: $text-secondary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dots */
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: 7px;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: $border-medium;
+  cursor: pointer;
+  transition: all 0.25s ease;
+
+  &.active {
+    width: 22px;
+    background: $primary;
+  }
+}
+
+/* Skeleton + motion */
+.skeleton {
+  border-radius: 16px;
+  background: linear-gradient(90deg, $bg-gray 25%, $bg-light 50%, $bg-gray 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+.spotlight-skeleton {
+  height: 42px;
+}
+.panel-skeleton {
+  height: 150px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes growY {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .stat,
+  .vbar-fill {
+    animation: none;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: none;
+  }
+  .carousel {
+    scroll-behavior: auto;
+    transition: none;
+  }
+}
+</style>
diff --git a/components/ai/ChatMessageList.vue b/components/ai/ChatMessageList.vue
index 6326f26..8664abb 100644
--- a/components/ai/ChatMessageList.vue
+++ b/components/ai/ChatMessageList.vue
@@ -7,17 +7,33 @@
 
     <div class="bubble-wrap">
       <div class="bubble" :class="bubbleClass(message)">
-        <TypingDots v-if="isPendingAssistant(message)" />
-        <div v-else-if="message.content" class="message-text">
-          {{ message.content }}
-        </div>
-        <div v-else-if="message.status === 'failed'" class="error-text">
-          {{ message.error || t('Something went wrong.') }}
-        </div>
-        <div v-else-if="isStuckAssistant(message)" class="error-text">
-          {{ t('This response did not finish. Try sending the question again.') }}
-        </div>
-        <ChatResultRenderer :result="message.result" />
+        <ChatProgressSteps
+          v-if="isPendingAssistant(message) && message.progress?.length"
+          :steps="message.progress"
+        />
+        <TypingDots v-else-if="isPendingAssistant(message)" />
+        <template v-else>
+          <!-- When the message has rendered blocks, they own the output (the
+               narration is the first block); otherwise show the text as markdown. -->
+          <ChatMarkdownBlock
+            v-if="message.content && !hasBlocks(message)"
+            :text="message.content"
+          />
+          <div v-else-if="!message.content && message.status === 'failed'" class="error-text">
+            {{ message.error || t('Something went wrong.') }}
+          </div>
+          <div v-else-if="!message.content && isStuckAssistant(message)" class="error-text">
+            {{ t('This response did not finish. Try sending the question again.') }}
+          </div>
+          <ChatResultRenderer
+            v-if="showResult(message)"
+            :result="message.result"
+            :session-id="sessionId"
+            @changed="$emit('reload')"
+            @open-canvas="$emit('open-canvas', { canvas: $event, messageId: message.id })"
+            @send-message="$emit('send-message', $event)"
+          />
+        </template>
       </div>
 
       <div class="bubble-meta">
@@ -33,15 +49,37 @@
 <script setup lang="ts">
 import { Bot, User } from 'lucide-vue-next';
 import TypingDots from '@/components/ai/TypingDots.vue';
+import ChatProgressSteps from '@/components/ai/ChatProgressSteps.vue';
 import ChatResultRenderer from '@/components/ai/ChatResultRenderer.vue';
-import type { ChatMessage } from '@/services/api/aiApi';
+import ChatMarkdownBlock from '@/components/ai/blocks/ChatMarkdownBlock.vue';
+import type { ChatBlock, ChatMessage } from '@/services/api/aiApi';
 
 const { t } = useI18n();
 
 defineProps<{
   messages: ChatMessage[];
+  sessionId?: number;
 }>();
 
+defineEmits<{
+  (e: 'reload'): void;
+  (e: 'open-canvas', payload: { canvas: ChatBlock; messageId: number }): void;
+  (e: 'send-message', message: string): void;
+}>();
+
+const hasBlocks = (message: ChatMessage): boolean => (message.result?.blocks?.length ?? 0) > 0;
+
+// Structured legacy (SmartQL) results worth showing alongside the prose answer.
+// A scalar/pair just restates the prose, so we suppress it to avoid the
+// "$500" + "500" duplicate; a table/list/record carries real content.
+const STRUCTURED_FORMATS = ['table', 'list', 'pair_list', 'record'];
+
+const showResult = (message: ChatMessage): boolean => {
+  if (hasBlocks(message)) return true;
+  if (!message.content) return true;
+  return STRUCTURED_FORMATS.includes(message.result?.format_type ?? '');
+};
+
 const rowClass = (message: ChatMessage) => (message.role === 'user' ? 'user' : 'ai');
 const bubbleClass = (message: ChatMessage) => {
   if (message.role === 'user') return 'user';
@@ -51,9 +89,10 @@ const bubbleClass = (message: ChatMessage) => {
 };
 
 // Assistant responses that never settled get stuck in 'pending' / 'processing'
-// indefinitely (a worker crash, a backend timeout, etc.). Treat anything older
-// than this window as stuck instead of showing the typing dots forever.
-const STUCK_THRESHOLD_MS = 90_000;
+// indefinitely (a worker crash, a backend timeout, etc.). Keep this in step with
+// the polling window in useAiChats: agent runs legitimately take a couple of
+// minutes, so only treat a message older than this as stuck.
+const STUCK_THRESHOLD_MS = 240_000;
 
 const isAssistantAwaiting = (m: ChatMessage) =>
   m.role === 'assistant' && (m.status === 'pending' || m.status === 'processing');
@@ -117,13 +156,13 @@ const formatTime = (iso: string): string => {
   flex-shrink: 0;
 
   &.ai {
-    background: $primary-light;
-    color: $primary;
+    background: $bg-gray;
+    color: $text-secondary;
   }
 
   &.user {
-    background: $bg-gray;
-    color: $text-primary;
+    background: $primary-light;
+    color: $primary;
   }
 }
 
@@ -132,34 +171,36 @@ const formatTime = (iso: string): string => {
   flex-direction: column;
   gap: 4px;
   min-width: 0;
-  max-width: min(80%, 560px);
+  max-width: min(82%, 600px);
 }
 
 .bubble {
-  padding: $spacing-2 $spacing-3;
-  border-radius: $radius-lg;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 18px;
   font-size: $font-size-base;
-  line-height: 1.5;
+  line-height: 1.55;
   word-break: break-word;
 }
 
 .bubble.ai {
-  background: $primary-light;
+  background: $bg-white;
   color: $text-primary;
-  border: 1px solid $primary-muted;
-  border-top-left-radius: 4px;
+  border: 1px solid $border-light;
+  box-shadow: $elevation-1;
+  border-top-left-radius: 6px;
 
   &.error {
-    background: $bg-gray;
+    background: $bg-white;
     color: $error-color;
     border-color: $error-color;
   }
 }
 
 .bubble.user {
-  background: $primary;
-  color: $bg-white;
-  border-top-right-radius: 4px;
+  background: $primary-light;
+  color: $text-primary;
+  border: 1px solid $primary-muted;
+  border-top-right-radius: 6px;
 }
 
 .bubble-meta {
diff --git a/components/ai/ChatProgressSteps.vue b/components/ai/ChatProgressSteps.vue
new file mode 100644
index 0000000..d4b268c
--- /dev/null
+++ b/components/ai/ChatProgressSteps.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chat-progress" aria-label="AI is working">
+    <div
+      v-for="(step, i) in steps"
+      :key="i"
+      class="progress-step"
+      :class="{ done: i < steps.length - 1 }"
+    >
+      <Check v-if="i < steps.length - 1" :size="13" class="step-icon" />
+      <span v-else class="step-spinner" />
+      <span class="step-label">{{ step }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next';
+
+defineProps<{
+  steps: string[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 0;
+}
+
+.progress-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: $primary;
+
+  &.done {
+    color: $text-muted;
+  }
+}
+
+.step-icon {
+  flex-shrink: 0;
+  color: $text-muted;
+}
+
+.step-spinner {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  border: 2px solid $primary-light;
+  border-top-color: $primary;
+  border-radius: 50%;
+  animation: progress-spin 0.7s linear infinite;
+}
+
+.step-label {
+  line-height: 1.3;
+}
+
+@keyframes progress-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/components/ai/ChatResultRenderer.vue b/components/ai/ChatResultRenderer.vue
index 4809ce6..a525d58 100644
--- a/components/ai/ChatResultRenderer.vue
+++ b/components/ai/ChatResultRenderer.vue
@@ -1,5 +1,83 @@
 <template>
-  <div v-if="result?.rows?.length && result.format_type" class="results-container">
+  <!-- New agent path: an ordered stream of widget blocks. -->
+  <div v-if="blocks.length" class="blocks-container">
+    <template v-for="(block, i) in blocks" :key="i">
+      <ChatMarkdownBlock v-if="block.type === 'markdown'" :text="block.text as string" />
+      <ChatTableBlock
+        v-else-if="block.type === 'table'"
+        :title="block.title as string"
+        :columns="block.columns as string[]"
+        :rows="block.rows as Record<string, unknown>[]"
+      />
+      <ChatKpiBlock
+        v-else-if="block.type === 'kpi'"
+        :title="block.title as string"
+        :items="block.items as any[]"
+      />
+      <ChatChartBlock
+        v-else-if="block.type === 'chart'"
+        :title="block.title as string"
+        :chart_hint="block.chart_hint as string"
+        :dataset_ref="block.dataset_ref as string"
+        :data="block.data"
+      />
+      <ChatProposedActionBlock
+        v-else-if="block.type === 'proposed_action'"
+        :block="block as any"
+        :session-id="sessionId"
+        @changed="$emit('changed')"
+      />
+      <ChatComparisonBlock
+        v-else-if="block.type === 'comparison'"
+        :title="block.title as string"
+        :series="block.series as Record<string, unknown>[]"
+      />
+      <ChatListBlock
+        v-else-if="block.type === 'list'"
+        :title="block.title as string"
+        :items="block.items as Record<string, unknown>[]"
+        :variant="block.variant as string"
+      />
+      <ChatCalloutBlock
+        v-else-if="block.type === 'callout'"
+        :text="block.text as string"
+        :title="block.title as string"
+        :variant="block.variant as string"
+      />
+      <ChatTimelineBlock
+        v-else-if="block.type === 'timeline'"
+        :title="block.title as string"
+        :items="block.items as any[]"
+      />
+      <ChatProgressBlock
+        v-else-if="block.type === 'progress'"
+        :title="block.title as string"
+        :items="block.items as any[]"
+      />
+      <ChatQuestionBlock
+        v-else-if="block.type === 'question'"
+        :prompt="block.prompt as string"
+        :options="block.options as any[]"
+        @select="$emit('send-message', $event)"
+      />
+      <ChatQuickActionsBlock
+        v-else-if="block.type === 'quick_actions'"
+        :actions="block.actions as any[]"
+        @select="$emit('send-message', $event)"
+      />
+      <ChatImportReviewBlock v-else-if="block.type === 'import_review'" :block="block as any" />
+      <ChatCanvasBlock
+        v-else-if="block.type === 'canvas'"
+        :block="block as any"
+        @open="$emit('open-canvas', block)"
+      />
+      <!-- Unknown/newer block type: degrade to its text or a compact dump. -->
+      <ChatMarkdownBlock v-else :text="(block.text as string) || (block.summary as string) || ''" />
+    </template>
+  </div>
+
+  <!-- Legacy SmartQL path: a single format_type result. -->
+  <div v-else-if="result?.rows?.length && result.format_type" class="results-container">
     <div v-if="result.format_type === 'scalar' && result.rows?.[0]" class="result-scalar">
       {{ formatValue(Object.values(result.rows[0])[0]) }}
     </div>
@@ -56,12 +134,37 @@
 </template>
 
 <script setup lang="ts">
-import type { ChatMessageResult } from '@/services/api/aiApi';
+import { computed } from 'vue';
+import type { ChatBlock, ChatMessageResult } from '@/services/api/aiApi';
+import ChatMarkdownBlock from '@/components/ai/blocks/ChatMarkdownBlock.vue';
+import ChatTableBlock from '@/components/ai/blocks/ChatTableBlock.vue';
+import ChatKpiBlock from '@/components/ai/blocks/ChatKpiBlock.vue';
+import ChatChartBlock from '@/components/ai/blocks/ChatChartBlock.vue';
+import ChatProposedActionBlock from '@/components/ai/blocks/ChatProposedActionBlock.vue';
+import ChatImportReviewBlock from '@/components/ai/blocks/ChatImportReviewBlock.vue';
+import ChatCanvasBlock from '@/components/ai/blocks/ChatCanvasBlock.vue';
+import ChatComparisonBlock from '@/components/ai/blocks/ChatComparisonBlock.vue';
+import ChatListBlock from '@/components/ai/blocks/ChatListBlock.vue';
+import ChatCalloutBlock from '@/components/ai/blocks/ChatCalloutBlock.vue';
+import ChatTimelineBlock from '@/components/ai/blocks/ChatTimelineBlock.vue';
+import ChatProgressBlock from '@/components/ai/blocks/ChatProgressBlock.vue';
+import ChatQuestionBlock from '@/components/ai/blocks/ChatQuestionBlock.vue';
+import ChatQuickActionsBlock from '@/components/ai/blocks/ChatQuickActionsBlock.vue';
 
-defineProps<{
+const props = defineProps<{
   result: ChatMessageResult | null;
+  sessionId?: number;
 }>();
 
+defineEmits<{
+  (e: 'changed'): void;
+  (e: 'open-canvas', block: ChatBlock): void;
+  (e: 'send-message', message: string): void;
+}>();
+
+const blocks = computed<ChatBlock[]>(() => props.result?.blocks ?? []);
+const sessionId = computed(() => props.sessionId ?? 0);
+
 const formatKey = (key: string | number): string =>
   String(key)
     .replace(/_/g, ' ')
@@ -84,6 +187,12 @@ const formatValue = (value: unknown): string => {
 <style lang="scss" scoped>
 @use '@/assets/scss/_variables.scss' as *;
 
+.blocks-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
 .results-container {
   margin-top: $spacing-2;
   padding-top: $spacing-2;
diff --git a/components/ai/ChatSidebar.vue b/components/ai/ChatSidebar.vue
index e69fa33..f3fb321 100644
--- a/components/ai/ChatSidebar.vue
+++ b/components/ai/ChatSidebar.vue
@@ -95,6 +95,9 @@ const groupedSessions = computed(() => {
   gap: $spacing-3;
   min-height: 0;
   overflow: hidden;
+  background:
+    radial-gradient(120% 40% at 0% 0%, rgba(var(--color-primary-rgb), 0.06), transparent 60%),
+    $bg-light;
 
   @media (max-width: $breakpoint-md) {
     display: none;
diff --git a/components/ai/DiscussionDropdown.vue b/components/ai/DiscussionDropdown.vue
new file mode 100644
index 0000000..a087984
--- /dev/null
+++ b/components/ai/DiscussionDropdown.vue
@@ -0,0 +1,97 @@
+<template>
+  <TDropdown class="discussion-dropdown">
+    <template #trigger>
+      <button type="button" class="dd-trigger">
+        <MessageSquare :size="16" class="dd-icon" />
+        <span class="dd-title">{{ currentTitle }}</span>
+        <ChevronDown :size="14" />
+      </button>
+    </template>
+
+    <TDropdownItem @click="$emit('new')"> <Plus :size="14" /> {{ t('New chat') }} </TDropdownItem>
+
+    <div v-if="sessions.length" class="dd-divider" />
+
+    <TDropdownItem v-for="s in sessions" :key="s.id" @click="$emit('open', s.id)">
+      <span class="dd-item-label" :class="{ active: s.id === currentId }">
+        {{ s.title || t('New chat') }}
+      </span>
+    </TDropdownItem>
+
+    <div v-if="!sessions.length" class="dd-empty">{{ t('No conversations yet') }}</div>
+  </TDropdown>
+</template>
+
+<script setup lang="ts">
+import { MessageSquare, ChevronDown, Plus } from 'lucide-vue-next';
+import TDropdown from '@/components/TDropdown.vue';
+import TDropdownItem from '@/components/TDropdownItem.vue';
+import type { ChatSession } from '@/services/api/aiApi';
+
+defineProps<{
+  sessions: ChatSession[];
+  currentId: number | null;
+  currentTitle: string;
+}>();
+
+defineEmits<{ (e: 'open', id: number): void; (e: 'new'): void }>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.dd-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  max-width: 320px;
+  padding: $spacing-1 $spacing-2;
+  border: 1px solid transparent;
+  border-radius: $radius-md;
+  background: transparent;
+  cursor: pointer;
+  color: $text-primary;
+  font-weight: $font-semibold;
+  font-size: $font-size-base;
+
+  &:hover {
+    background: $bg-gray;
+  }
+
+  .dd-icon {
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  .dd-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.dd-divider {
+  height: 1px;
+  background: $border-light;
+  margin: $spacing-1 0;
+}
+
+.dd-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.active {
+    color: $primary;
+    font-weight: $font-semibold;
+  }
+}
+
+.dd-empty {
+  padding: $spacing-2 $spacing-3;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+</style>
diff --git a/components/ai/blocks/ChatCalloutBlock.vue b/components/ai/blocks/ChatCalloutBlock.vue
new file mode 100644
index 0000000..a1b1df8
--- /dev/null
+++ b/components/ai/blocks/ChatCalloutBlock.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="chat-callout-block" :class="`is-${variant}`">
+    <component :is="icon" :size="18" class="callout-icon" />
+    <div class="callout-body">
+      <p v-if="title" class="callout-title">{{ title }}</p>
+      <p class="callout-text">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Info, CheckCircle2, AlertTriangle, AlertOctagon } from 'lucide-vue-next';
+
+const props = defineProps<{ text?: string; title?: string; variant?: string }>();
+
+const ALLOWED = ['info', 'success', 'warning', 'danger'];
+const variant = computed(() => (ALLOWED.includes(props.variant ?? '') ? props.variant : 'info'));
+const text = computed(() => props.text ?? '');
+const title = computed(() => props.title ?? '');
+
+const icon = computed(() => {
+  switch (variant.value) {
+    case 'success':
+      return CheckCircle2;
+    case 'warning':
+      return AlertTriangle;
+    case 'danger':
+      return AlertOctagon;
+    default:
+      return Info;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-callout-block {
+  display: flex;
+  gap: $spacing-2;
+  align-items: flex-start;
+  padding: $spacing-3;
+  border-radius: $radius-lg;
+  border: 1px solid $primary-muted;
+  border-left-width: 3px;
+  background: $bg-white;
+
+  .callout-icon {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  &.is-info {
+    border-left-color: $info;
+    .callout-icon {
+      color: $info;
+    }
+  }
+
+  &.is-success {
+    border-left-color: $income;
+    .callout-icon {
+      color: $income;
+    }
+  }
+
+  &.is-warning {
+    border-left-color: $warning;
+    .callout-icon {
+      color: $warning;
+    }
+  }
+
+  &.is-danger {
+    border-left-color: $error-color;
+    .callout-icon {
+      color: $error-color;
+    }
+  }
+}
+
+.callout-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.callout-title {
+  margin: 0;
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+}
+
+.callout-text {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+</style>
diff --git a/components/ai/blocks/ChatCanvasBlock.vue b/components/ai/blocks/ChatCanvasBlock.vue
new file mode 100644
index 0000000..bf4f714
--- /dev/null
+++ b/components/ai/blocks/ChatCanvasBlock.vue
@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="canvas-card"
+    role="button"
+    tabindex="0"
+    @click="$emit('open')"
+    @keydown.enter="$emit('open')"
+  >
+    <div class="canvas-head">
+      <span class="canvas-icon"><FileText :size="20" /></span>
+      <span class="canvas-text">
+        <span class="canvas-title">{{ block.title || t('Document') }}</span>
+        <span class="canvas-meta">{{ t('{count} sections', { count: sectionCount }) }}</span>
+      </span>
+      <PanelRight :size="18" class="canvas-open" />
+    </div>
+
+    <!-- Inline preview of the first sections so the report is visible in chat,
+         not just a card. Non-interactive: any click opens the full canvas. -->
+    <div v-if="previewBlocks.length" class="canvas-preview">
+      <template v-for="(b, i) in previewBlocks" :key="i">
+        <ChatMarkdownBlock v-if="b.type === 'markdown'" :text="b.text as string" />
+        <ChatCalloutBlock
+          v-else-if="b.type === 'callout'"
+          :text="b.text as string"
+          :title="b.title as string"
+          :variant="b.variant as string"
+        />
+        <ChatKpiBlock
+          v-else-if="b.type === 'kpi'"
+          :title="b.title as string"
+          :items="b.items as any[]"
+        />
+        <ChatChartBlock
+          v-else-if="b.type === 'chart'"
+          :title="b.title as string"
+          :chart_hint="b.chart_hint as string"
+          :dataset_ref="b.dataset_ref as string"
+          :data="b.data"
+        />
+        <ChatTableBlock
+          v-else-if="b.type === 'table'"
+          :title="b.title as string"
+          :columns="b.columns as string[]"
+          :rows="b.rows as Record<string, unknown>[]"
+        />
+      </template>
+      <div class="canvas-fade" aria-hidden="true" />
+    </div>
+
+    <span class="canvas-cta">{{ t('Open in canvas') }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { FileText, PanelRight } from 'lucide-vue-next';
+import type { ChatBlock } from '@/services/api/aiApi';
+import ChatMarkdownBlock from '@/components/ai/blocks/ChatMarkdownBlock.vue';
+import ChatCalloutBlock from '@/components/ai/blocks/ChatCalloutBlock.vue';
+import ChatKpiBlock from '@/components/ai/blocks/ChatKpiBlock.vue';
+import ChatChartBlock from '@/components/ai/blocks/ChatChartBlock.vue';
+import ChatTableBlock from '@/components/ai/blocks/ChatTableBlock.vue';
+
+const props = defineProps<{ block: ChatBlock & { title?: string; blocks?: ChatBlock[] } }>();
+defineEmits<{ (e: 'open'): void }>();
+
+const { t } = useI18n();
+
+const PREVIEWABLE = ['markdown', 'callout', 'kpi', 'chart', 'table'];
+
+const sectionCount = computed(() => props.block.blocks?.length ?? 0);
+
+// Show the first couple of renderable sections as a teaser.
+const previewBlocks = computed<ChatBlock[]>(() =>
+  (props.block.blocks ?? []).filter((b) => PREVIEWABLE.includes(b.type as string)).slice(0, 2)
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.canvas-card {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  width: 100%;
+  text-align: left;
+  padding: $spacing-3;
+  border: 1px solid $primary-muted;
+  border-radius: $radius-lg;
+  background: $bg-white;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &:hover {
+    border-color: $primary;
+  }
+}
+
+.canvas-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+}
+
+.canvas-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.canvas-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.canvas-title {
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.canvas-meta {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.canvas-open {
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.canvas-preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  max-height: 280px;
+  overflow: hidden;
+  pointer-events: none;
+  border-top: 1px solid $primary-muted;
+  padding-top: $spacing-3;
+}
+
+.canvas-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 56px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), $bg-white);
+}
+
+.canvas-cta {
+  align-self: flex-start;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $primary;
+}
+</style>
diff --git a/components/ai/blocks/ChatChartBlock.vue b/components/ai/blocks/ChatChartBlock.vue
new file mode 100644
index 0000000..13c96b3
--- /dev/null
+++ b/components/ai/blocks/ChatChartBlock.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="chat-chart-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+
+    <ClientOnly>
+      <component
+        :is="ApexChart"
+        v-if="normalized"
+        :type="apexType"
+        height="260"
+        :options="options"
+        :series="series"
+      />
+      <pre v-else class="chart-fallback">{{ pretty }}</pre>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue';
+
+// Loaded client-side only (apexcharts touches the DOM at import).
+const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'));
+
+const props = defineProps<{
+  title?: string;
+  chart_hint?: string;
+  dataset_ref?: string;
+  data?: unknown;
+}>();
+
+const rows = computed<Record<string, unknown>[]>(() =>
+  Array.isArray(props.data)
+    ? (props.data as Record<string, unknown>[]).filter((r) => r && typeof r === 'object')
+    : []
+);
+
+const labelKey = computed<string | null>(() => {
+  const first = rows.value[0];
+  if (!first) return null;
+  return Object.keys(first).find((k) => typeof first[k] === 'string') ?? null;
+});
+
+const numericKeys = computed<string[]>(() => {
+  const first = rows.value[0];
+  if (!first) return [];
+  const numeric = Object.keys(first).filter(
+    (k) => typeof first[k] === 'number' && k !== 'percentage' && !/(^|_)id$/i.test(k)
+  );
+  // Count/metadata columns (transaction_count) sit alongside the real value
+  // (amount) in the built-in datasets. Keeping them made numericKeys > 1, which
+  // silently downgraded pie/donut to bar and could even plot the id. Drop them
+  // when a real value column remains; keep them if that is all there is.
+  const values = numeric.filter((k) => !/(^|_)count$/i.test(k));
+  return values.length > 0 ? values : numeric;
+});
+
+const normalized = computed(
+  () => rows.value.length > 0 && labelKey.value !== null && numericKeys.value.length > 0
+);
+
+const categories = computed(() => rows.value.map((r) => String(r[labelKey.value as string])));
+
+// Shapes that plot one numeric column over its labels (a flat number array plus
+// `labels`), vs the multi-series shapes that plot named series over an x-axis.
+const SINGLE_SERIES = ['pie', 'donut', 'polarArea', 'radialBar', 'treemap'];
+const KNOWN = [
+  'line',
+  'area',
+  'bar',
+  'hbar',
+  'pie',
+  'donut',
+  'polarArea',
+  'radialBar',
+  'scatter',
+  'treemap'
+];
+
+// Honor the requested chart, but fall back when the data shape can't support it
+// (a single-series chart needs exactly one numeric column).
+const kind = computed<string>(() => {
+  const hint = props.chart_hint;
+  if (hint && KNOWN.includes(hint)) {
+    if (SINGLE_SERIES.includes(hint) && numericKeys.value.length > 1) return 'bar';
+    return hint;
+  }
+  return numericKeys.value.length > 1 ? 'bar' : 'donut';
+});
+
+// hbar is a bar with a horizontal plot option; everything else maps 1:1.
+const apexType = computed(() => (kind.value === 'hbar' ? 'bar' : kind.value));
+
+const isSingleSeries = computed(() => SINGLE_SERIES.includes(kind.value));
+
+const series = computed(() => {
+  if (kind.value === 'treemap') {
+    const key = numericKeys.value[0];
+    return [
+      {
+        data: rows.value.map((r) => ({ x: String(r[labelKey.value as string]), y: Number(r[key]) }))
+      }
+    ];
+  }
+  if (isSingleSeries.value) {
+    const key = numericKeys.value[0];
+    return rows.value.map((r) => Number(r[key]));
+  }
+  return numericKeys.value.map((key) => ({
+    name: key.replace(/_/g, ' '),
+    data: rows.value.map((r) => Number(r[key]))
+  }));
+});
+
+const options = computed(() => {
+  const base: Record<string, unknown> = {
+    chart: { toolbar: { show: false } },
+    legend: { position: 'bottom' }
+  };
+  if (kind.value === 'hbar') {
+    base.plotOptions = { bar: { horizontal: true } };
+    base.xaxis = { categories: categories.value };
+  } else if (kind.value === 'treemap') {
+    // treemap carries its own labels inside the series data points.
+  } else if (isSingleSeries.value) {
+    base.labels = categories.value;
+  } else {
+    base.xaxis = { categories: categories.value };
+  }
+  return base;
+});
+
+const pretty = computed(() => JSON.stringify(props.data, null, 2));
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.chart-fallback {
+  background: $bg-gray;
+  padding: $spacing-2;
+  border-radius: $radius-md;
+  overflow-x: auto;
+  font-size: $font-size-xs;
+  margin: 0;
+}
+</style>
diff --git a/components/ai/blocks/ChatComparisonBlock.vue b/components/ai/blocks/ChatComparisonBlock.vue
new file mode 100644
index 0000000..4ba351e
--- /dev/null
+++ b/components/ai/blocks/ChatComparisonBlock.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="chat-comparison-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+    <div class="comparison-grid" :style="{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }">
+      <div v-for="(side, i) in columns" :key="i" class="comparison-col">
+        <p class="comparison-col-title">{{ side.heading }}</p>
+        <dl class="comparison-rows">
+          <div v-for="(row, j) in side.rows" :key="j" class="comparison-row">
+            <dt>{{ row.label }}</dt>
+            <dd>{{ row.value }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type Side = Record<string, unknown>;
+
+const props = defineProps<{ title?: string; series?: Side[] }>();
+
+const HEADING_KEYS = ['heading', 'label', 'title', 'name', 'period'];
+
+const format = (value: unknown): string => {
+  if (value === null || value === undefined) return '-';
+  if (typeof value === 'number')
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  if (typeof value === 'object') return JSON.stringify(value);
+  return String(value);
+};
+
+const prettify = (key: string): string =>
+  key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+const columns = computed(() =>
+  (props.series ?? []).map((side, idx) => {
+    const headingKey = HEADING_KEYS.find((k) => typeof side[k] === 'string');
+    const heading = headingKey ? String(side[headingKey]) : `Series ${idx + 1}`;
+    const rows = Object.entries(side)
+      .filter(([k]) => k !== headingKey)
+      .map(([k, v]) => ({ label: prettify(k), value: format(v) }));
+    return { heading, rows };
+  })
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.comparison-grid {
+  display: grid;
+  gap: $spacing-2;
+}
+
+.comparison-col {
+  border: 1px solid $primary-muted;
+  border-radius: $radius-lg;
+  padding: $spacing-3;
+  background: $bg-white;
+}
+
+.comparison-col-title {
+  margin: 0 0 $spacing-2;
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+  color: $primary;
+}
+
+.comparison-rows {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-1;
+}
+
+.comparison-row {
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-2;
+  font-size: $font-size-sm;
+
+  dt {
+    color: $text-muted;
+  }
+
+  dd {
+    margin: 0;
+    font-weight: $font-semibold;
+    text-align: right;
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatImportReviewBlock.vue b/components/ai/blocks/ChatImportReviewBlock.vue
new file mode 100644
index 0000000..bb7d7fa
--- /dev/null
+++ b/components/ai/blocks/ChatImportReviewBlock.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="import-review">
+    <div class="ir-head">
+      <FileText :size="18" class="ir-icon" />
+      <span class="ir-name">{{ block.file_name || t('Document') }}</span>
+    </div>
+    <div class="ir-status" :class="`is-${tone}`">
+      <Loader2 v-if="spin" :size="15" class="spin" />
+      <component :is="icon" v-else :size="15" />
+      {{ statusLabel }}
+    </div>
+    <NuxtLink
+      v-if="block.import_session_id && tone !== 'unavailable'"
+      :to="`/imports?session=${block.import_session_id}`"
+      class="ir-link"
+    >
+      {{ t('Review import') }}
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { FileText, Loader2, CheckCircle, AlertCircle } from 'lucide-vue-next';
+import type { ChatBlock } from '@/services/api/aiApi';
+import { importsApi } from '@/services/api/importsApi';
+
+const props = defineProps<{
+  block: ChatBlock & { import_session_id?: number; status?: string; file_name?: string };
+}>();
+
+const { t } = useI18n();
+
+const IN_PROGRESS = ['analyzing', 'extracting', 'enriching', 'checking'];
+const POLL_INTERVAL = 3000;
+
+const status = ref<string>(props.block.status || 'analyzing');
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const stop = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+const refresh = async () => {
+  const id = props.block.import_session_id;
+  if (!id) return;
+  try {
+    const session = await importsApi.getSession(id);
+    status.value = session.status;
+    if (!IN_PROGRESS.includes(session.status)) stop();
+  } catch {
+    // 404 (deleted) or network: stop spinning and show an unavailable state.
+    status.value = 'unavailable';
+    stop();
+  }
+};
+
+onMounted(() => {
+  if (!props.block.import_session_id) return;
+  refresh();
+  if (IN_PROGRESS.includes(status.value)) {
+    timer = setInterval(refresh, POLL_INTERVAL);
+  }
+});
+
+onUnmounted(stop);
+
+const spin = computed(() => IN_PROGRESS.includes(status.value));
+
+const tone = computed(() => {
+  if (IN_PROGRESS.includes(status.value)) return 'analyzing';
+  if (status.value === 'ready') return 'ready';
+  if (status.value === 'confirmed') return 'confirmed';
+  if (status.value === 'failed') return 'failed';
+  if (status.value === 'expired') return 'expired';
+  return 'unavailable';
+});
+
+const icon = computed(() =>
+  tone.value === 'failed' || tone.value === 'unavailable' ? AlertCircle : CheckCircle
+);
+
+const statusLabel = computed(() => {
+  switch (tone.value) {
+    case 'analyzing':
+      return t('Analyzing document…');
+    case 'ready':
+      return t('Ready to review');
+    case 'confirmed':
+      return t('Imported');
+    case 'failed':
+      return t('Import failed');
+    case 'expired':
+      return t('Import expired');
+    default:
+      return t('Import unavailable');
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.import-review {
+  border: 1px solid $primary-muted;
+  border-radius: $radius-lg;
+  padding: $spacing-3;
+  background: $bg-white;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.ir-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+
+  .ir-icon {
+    color: $primary;
+  }
+
+  .ir-name {
+    font-weight: $font-semibold;
+    font-size: $font-size-sm;
+  }
+}
+
+.ir-status {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-1;
+  font-size: $font-size-sm;
+  color: $text-muted;
+
+  &.is-failed,
+  &.is-unavailable {
+    color: $error-color;
+  }
+
+  .spin {
+    animation: spin 1s linear infinite;
+  }
+}
+
+.ir-link {
+  color: $primary;
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+  text-decoration: underline;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatKpiBlock.vue b/components/ai/blocks/ChatKpiBlock.vue
new file mode 100644
index 0000000..add1ad8
--- /dev/null
+++ b/components/ai/blocks/ChatKpiBlock.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="chat-kpi-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+    <div class="kpi-grid">
+      <div v-for="(item, i) in items" :key="i" class="kpi-card">
+        <span class="kpi-label">{{ item.label }}</span>
+        <span class="kpi-value">{{ formatValue(item) }}</span>
+        <span
+          v-if="typeof item.delta_percent === 'number'"
+          class="kpi-delta"
+          :class="trendClass(item)"
+        >
+          <component :is="trendIcon(item)" :size="14" />
+          {{ Math.abs(item.delta_percent).toFixed(1) }}%
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-vue-next';
+
+interface KpiItem {
+  label: string;
+  value: number | string;
+  currency?: string | null;
+  unit?: string | null;
+  delta_percent?: number | null;
+  trend?: string | null;
+}
+
+const props = defineProps<{ title?: string; items?: KpiItem[] }>();
+
+const items = computed(() => props.items ?? []);
+
+const formatValue = (item: KpiItem): string => {
+  const v = item.value;
+  const num =
+    typeof v === 'number' ? v.toLocaleString(undefined, { maximumFractionDigits: 2 }) : String(v);
+  if (item.unit) return `${num}${item.unit}`;
+  if (item.currency) return `${num} ${item.currency}`;
+  return num;
+};
+
+const direction = (item: KpiItem): number => {
+  if (item.trend === 'up') return 1;
+  if (item.trend === 'down') return -1;
+  return Math.sign(item.delta_percent ?? 0);
+};
+
+const trendClass = (item: KpiItem) => {
+  const d = direction(item);
+  return d > 0 ? 'is-up' : d < 0 ? 'is-down' : 'is-flat';
+};
+
+const trendIcon = (item: KpiItem) => {
+  const d = direction(item);
+  return d > 0 ? TrendingUp : d < 0 ? TrendingDown : Minus;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: $spacing-2;
+}
+
+.kpi-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: $spacing-3;
+  border: 1px solid $primary-muted;
+  border-radius: $radius-lg;
+  background: $bg-white;
+
+  .kpi-label {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  .kpi-value {
+    font-size: $font-size-lg;
+    font-weight: $font-bold;
+    color: $text-primary;
+  }
+
+  .kpi-delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+
+    &.is-up {
+      color: $income;
+    }
+
+    &.is-down {
+      color: $expense;
+    }
+
+    &.is-flat {
+      color: $text-muted;
+    }
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatListBlock.vue b/components/ai/blocks/ChatListBlock.vue
new file mode 100644
index 0000000..8892157
--- /dev/null
+++ b/components/ai/blocks/ChatListBlock.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="chat-list-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+    <ul class="list">
+      <li v-for="(row, i) in rows" :key="i" class="list-item">
+        <div class="list-main">
+          <span class="list-title">{{ row.primary }}</span>
+          <span v-if="row.secondary" class="list-secondary">{{ row.secondary }}</span>
+        </div>
+        <span v-if="row.trailing" class="list-trailing">{{ row.trailing }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type Item = Record<string, unknown>;
+
+const props = defineProps<{ title?: string; items?: Item[]; variant?: string }>();
+
+const PRIMARY_KEYS = ['title', 'label', 'name', 'description'];
+const SECONDARY_KEYS = ['date', 'datetime', 'subtitle', 'category', 'wallet', 'type'];
+const TRAILING_KEYS = ['amount', 'value', 'total', 'count'];
+
+const format = (value: unknown): string => {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'number')
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return String(value);
+};
+
+const pick = (item: Item, keys: string[]): { key?: string; value: string } => {
+  for (const k of keys) {
+    if (item[k] !== undefined && item[k] !== null && item[k] !== '') {
+      return { key: k, value: format(item[k]) };
+    }
+  }
+  return { value: '' };
+};
+
+const rows = computed(() =>
+  (props.items ?? []).map((item) => {
+    if (typeof item !== 'object' || item === null) {
+      return { primary: format(item), secondary: '', trailing: '' };
+    }
+    const primary = pick(item, PRIMARY_KEYS);
+    const trailing = pick(item, TRAILING_KEYS);
+    const secondary = pick(item, SECONDARY_KEYS);
+    const currency = typeof item.currency === 'string' ? ` ${item.currency}` : '';
+    return {
+      primary: primary.value || '-',
+      secondary: secondary.value,
+      trailing: trailing.value ? `${trailing.value}${currency}` : ''
+    };
+  })
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid $primary-muted;
+  border-radius: $radius-md;
+  overflow: hidden;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-2 $spacing-3;
+  border-bottom: 1px solid $primary-muted;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.list-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.list-title {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+}
+
+.list-secondary {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.list-trailing {
+  font-weight: $font-bold;
+  font-size: $font-size-sm;
+  white-space: nowrap;
+}
+</style>
diff --git a/components/ai/blocks/ChatMarkdownBlock.vue b/components/ai/blocks/ChatMarkdownBlock.vue
new file mode 100644
index 0000000..d513ae7
--- /dev/null
+++ b/components/ai/blocks/ChatMarkdownBlock.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- Sanitized in renderMarkdown; safe to bind as HTML. -->
+  <div class="chat-markdown" v-html="html" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { renderMarkdown } from '@/composables/useMarkdown';
+
+const props = defineProps<{ text?: string }>();
+
+const html = computed(() => renderMarkdown(props.text ?? ''));
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-markdown {
+  font-size: $font-size-sm;
+  line-height: 1.6;
+  color: $text-primary;
+  word-break: break-word;
+
+  :deep(h1),
+  :deep(h2),
+  :deep(h3),
+  :deep(h4) {
+    margin: $spacing-4 0 $spacing-2;
+    font-weight: $font-bold;
+    line-height: 1.25;
+    color: $text-primary;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  :deep(h1) {
+    font-size: $font-size-2xl;
+  }
+
+  :deep(h2) {
+    font-size: $font-size-xl;
+    padding-bottom: $spacing-1;
+    border-bottom: 1px solid $border-light;
+  }
+
+  :deep(h3) {
+    font-size: $font-size-lg;
+  }
+
+  :deep(h4) {
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+  }
+
+  :deep(p) {
+    margin: 0 0 $spacing-2;
+  }
+
+  :deep(strong) {
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+
+  :deep(blockquote) {
+    margin: 0 0 $spacing-2;
+    padding: $spacing-1 $spacing-3;
+    border-left: 3px solid $primary-muted;
+    color: $text-secondary;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    margin: 0 0 $spacing-2;
+    padding-left: $spacing-4;
+  }
+
+  :deep(li) {
+    padding: 2px 0;
+  }
+
+  :deep(a) {
+    color: $primary;
+    text-decoration: underline;
+  }
+
+  :deep(code) {
+    background: $bg-gray;
+    padding: 1px 4px;
+    border-radius: $radius-sm;
+    font-size: 0.9em;
+  }
+
+  :deep(pre) {
+    background: $bg-gray;
+    padding: $spacing-2;
+    border-radius: $radius-md;
+    overflow-x: auto;
+
+    code {
+      background: none;
+      padding: 0;
+    }
+  }
+
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: $spacing-2 0;
+
+    th,
+    td {
+      padding: $spacing-1 $spacing-2;
+      border-bottom: 1px solid $primary-muted;
+      text-align: left;
+    }
+
+    th {
+      font-weight: $font-semibold;
+      background: $primary-light;
+    }
+  }
+
+  :deep(> *:last-child) {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatProgressBlock.vue b/components/ai/blocks/ChatProgressBlock.vue
new file mode 100644
index 0000000..f0af3aa
--- /dev/null
+++ b/components/ai/blocks/ChatProgressBlock.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="chat-progress-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+    <div class="progress-list">
+      <div v-for="(item, i) in items" :key="i" class="progress-row">
+        <div class="progress-head">
+          <span class="progress-label">{{ item.label }}</span>
+          <span class="progress-figures">{{ figures(item) }}</span>
+        </div>
+        <div class="progress-track">
+          <div class="progress-fill" :class="fillClass(item)" :style="{ width: pct(item) + '%' }" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface ProgressItem {
+  label?: string;
+  current?: number;
+  target?: number;
+  currency?: string | null;
+}
+
+const props = defineProps<{ title?: string; items?: ProgressItem[] }>();
+
+const items = computed<ProgressItem[]>(() => props.items ?? []);
+
+const ratio = (item: ProgressItem): number => {
+  const target = Number(item.target ?? 0);
+  if (!target) return 0;
+  return Number(item.current ?? 0) / target;
+};
+
+const pct = (item: ProgressItem): number =>
+  Math.max(0, Math.min(100, Math.round(ratio(item) * 100)));
+
+const fillClass = (item: ProgressItem) => {
+  const r = ratio(item);
+  if (r >= 1) return 'is-over';
+  if (r >= 0.8) return 'is-near';
+  return 'is-ok';
+};
+
+const money = (value: number, currency?: string | null): string => {
+  const num = value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return currency ? `${num} ${currency}` : num;
+};
+
+const figures = (item: ProgressItem): string =>
+  `${money(Number(item.current ?? 0), item.currency)} / ${money(Number(item.target ?? 0), item.currency)}`;
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.progress-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.progress-head {
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-2;
+  margin-bottom: 4px;
+  font-size: $font-size-sm;
+}
+
+.progress-label {
+  color: $text-secondary;
+}
+
+.progress-figures {
+  font-weight: $font-semibold;
+  white-space: nowrap;
+}
+
+.progress-track {
+  height: 8px;
+  border-radius: 9999px;
+  background: $bg-gray;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+
+  &.is-ok {
+    background: $primary;
+  }
+
+  &.is-near {
+    background: $warning;
+  }
+
+  &.is-over {
+    background: $expense;
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatProposedActionBlock.vue b/components/ai/blocks/ChatProposedActionBlock.vue
new file mode 100644
index 0000000..bdd19e8
--- /dev/null
+++ b/components/ai/blocks/ChatProposedActionBlock.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="proposed-action" :class="`risk-${block.risk}`">
+    <div class="pa-head">
+      <component :is="icon" :size="18" class="pa-icon" />
+      <span class="pa-summary">{{ block.summary }}</span>
+    </div>
+
+    <!-- Editable review form while pending: the exact fields that will be saved. -->
+    <div v-if="state === 'pending' && fields.length" class="pa-form">
+      <label v-for="f in fields" :key="f.key" class="pa-field-edit">
+        <span class="pa-field-label">{{ f.label }}</span>
+
+        <select v-if="f.type === 'enum'" v-model="edited[f.key]" class="pa-input">
+          <option v-for="opt in f.options || []" :key="opt" :value="opt">{{ cap(opt) }}</option>
+        </select>
+
+        <select v-else-if="f.type === 'wallet'" v-model="edited[f.key]" class="pa-input">
+          <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
+        </select>
+
+        <select v-else-if="f.type === 'party'" v-model="edited[f.key]" class="pa-input">
+          <option :value="null">{{ t('None') }}</option>
+          <option v-for="p in parties" :key="p.id" :value="p.id">{{ p.name }}</option>
+        </select>
+
+        <select
+          v-else-if="f.type === 'categories'"
+          v-model="edited[f.key]"
+          multiple
+          class="pa-input pa-input--multi"
+        >
+          <option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+        </select>
+
+        <input
+          v-else-if="f.type === 'number'"
+          v-model.number="edited[f.key]"
+          type="number"
+          step="0.01"
+          class="pa-input"
+        />
+        <input
+          v-else-if="f.type === 'datetime'"
+          v-model="edited[f.key]"
+          type="datetime-local"
+          class="pa-input"
+        />
+        <input v-else v-model="edited[f.key]" type="text" class="pa-input" />
+      </label>
+    </div>
+
+    <!-- Read-only summary once acted on. -->
+    <dl v-else-if="fields.length" class="pa-fields">
+      <div v-for="(f, i) in fields" :key="i" class="pa-field">
+        <dt class="pa-field-label">{{ f.label }}</dt>
+        <dd class="pa-field-value">{{ f.display || f.value }}</dd>
+      </div>
+    </dl>
+
+    <div v-if="state === 'pending'" class="pa-actions">
+      <button class="pa-btn pa-confirm" :disabled="busy" @click="confirm">
+        {{ busy ? t('Working…') : t('Confirm') }}
+      </button>
+      <button class="pa-btn pa-reject" :disabled="busy" @click="reject">
+        {{ t('Dismiss') }}
+      </button>
+    </div>
+    <div v-else class="pa-status" :class="`is-${state}`">
+      <component :is="statusIcon" :size="15" />
+      {{ statusLabel }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, onMounted } from 'vue';
+import { Check, X, AlertTriangle, ShoppingCart } from 'lucide-vue-next';
+import { aiApi, type ProposedActionBlock } from '@/services/api/aiApi';
+import { useSharedData } from '@/composables/useSharedData';
+
+interface EditableField {
+  key: string;
+  label: string;
+  type: string;
+  value: unknown;
+  display?: string;
+  options?: string[];
+}
+
+const props = defineProps<{ block: ProposedActionBlock; sessionId: number }>();
+const emit = defineEmits<{ (e: 'changed'): void }>();
+
+const { t } = useI18n();
+const { showError } = useNotifications();
+const sharedData = useSharedData();
+const wallets = sharedData.wallets;
+const categories = sharedData.categories;
+const parties = sharedData.parties;
+
+const nowLocal = () => {
+  const d = new Date();
+  d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
+  return d.toISOString().slice(0, 16);
+};
+
+const fields = computed<EditableField[]>(() => (props.block.fields as EditableField[]) ?? []);
+
+const edited = reactive<Record<string, unknown>>({});
+
+onMounted(() => {
+  fields.value.forEach((f) => {
+    if (f.type === 'datetime') {
+      edited[f.key] = typeof f.value === 'string' && f.value ? f.value.slice(0, 16) : nowLocal();
+      return;
+    }
+    edited[f.key] = f.value;
+  });
+  if (fields.value.some((f) => f.type === 'wallet')) sharedData.loadWallets?.();
+  if (fields.value.some((f) => f.type === 'categories')) sharedData.loadCategories?.();
+  if (fields.value.some((f) => f.type === 'party')) sharedData.loadParties?.();
+});
+
+const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+const state = ref<'pending' | 'executed' | 'rejected'>(
+  props.block.status === 'executed'
+    ? 'executed'
+    : props.block.status === 'rejected'
+      ? 'rejected'
+      : 'pending'
+);
+const busy = ref(false);
+
+const icon = computed(() => (props.block.risk === 'high' ? AlertTriangle : ShoppingCart));
+const statusIcon = computed(() => (state.value === 'executed' ? Check : X));
+const statusLabel = computed(() => (state.value === 'executed' ? t('Done') : t('Dismissed')));
+
+function overrides(): Record<string, unknown> {
+  const o: Record<string, unknown> = {};
+  fields.value.forEach((f) => {
+    const value = edited[f.key];
+    // Skip untouched/blank fields so an empty "When" isn't sent as "" (which the
+    // server would record as 01/01/1970); the backend defaults it to now.
+    if (value === '' || value === null || value === undefined) return;
+    o[f.key] = value;
+  });
+  return o;
+}
+
+async function confirm() {
+  busy.value = true;
+  try {
+    await aiApi.confirmAction(props.sessionId, props.block.id, overrides());
+    state.value = 'executed';
+    emit('changed');
+  } catch {
+    showError(t('Could not complete the action'));
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function reject() {
+  busy.value = true;
+  try {
+    await aiApi.rejectAction(props.sessionId, props.block.id);
+    state.value = 'rejected';
+    emit('changed');
+  } catch {
+    showError(t('Could not dismiss the action'));
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.proposed-action {
+  border: 1px solid $primary-muted;
+  border-left: 3px solid $primary;
+  border-radius: $radius-lg;
+  padding: $spacing-3;
+  background: $bg-white;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+
+  &.risk-high {
+    border-left-color: $warning;
+  }
+}
+
+.pa-form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.pa-field-edit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+
+  .pa-field-label {
+    color: $text-muted;
+    font-size: $font-size-sm;
+    flex-shrink: 0;
+  }
+}
+
+.pa-input {
+  flex: 1;
+  min-width: 0;
+  max-width: 60%;
+  padding: 6px 8px;
+  border: 1px solid $primary-muted;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.pa-input--multi {
+  min-height: 64px;
+}
+
+.pa-fields {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $primary-muted;
+  border-radius: $radius-md;
+  overflow: hidden;
+}
+
+.pa-field {
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-2 $spacing-3;
+  border-bottom: 1px solid $primary-muted;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .pa-field-label {
+    margin: 0;
+    color: $text-muted;
+    font-size: $font-size-sm;
+  }
+
+  .pa-field-value {
+    margin: 0;
+    font-weight: $font-semibold;
+    text-align: right;
+    word-break: break-word;
+  }
+}
+
+.pa-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+
+  .pa-icon {
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  .pa-summary {
+    font-weight: $font-semibold;
+    font-size: $font-size-sm;
+  }
+}
+
+.pa-actions {
+  display: flex;
+  gap: $spacing-2;
+}
+
+.pa-btn {
+  border: none;
+  border-radius: $radius-md;
+  padding: $spacing-2 $spacing-4;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+}
+
+.pa-confirm {
+  background: $primary;
+  color: $text-inverse;
+}
+
+.pa-reject {
+  background: $bg-gray;
+  color: $text-secondary;
+}
+
+.pa-status {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-1;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+
+  &.is-executed {
+    color: $income;
+  }
+
+  &.is-rejected {
+    color: $text-muted;
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatQuestionBlock.vue b/components/ai/blocks/ChatQuestionBlock.vue
new file mode 100644
index 0000000..dcbac53
--- /dev/null
+++ b/components/ai/blocks/ChatQuestionBlock.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="chat-question-block">
+    <p class="question-prompt">{{ prompt }}</p>
+    <div class="question-options">
+      <button
+        v-for="(opt, i) in options"
+        :key="i"
+        type="button"
+        class="question-option"
+        @click="$emit('select', opt.message)"
+      >
+        {{ opt.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface QuestionOption {
+  label: string;
+  message: string;
+}
+
+const props = defineProps<{ prompt?: string; options?: QuestionOption[] }>();
+defineEmits<{ (e: 'select', message: string): void }>();
+
+const prompt = computed(() => props.prompt ?? '');
+const options = computed<QuestionOption[]>(() =>
+  (props.options ?? []).map((o) => ({ label: o.label, message: o.message ?? o.label }))
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-question-block {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.question-prompt {
+  margin: 0;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.question-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+}
+
+.question-option {
+  border: 1px solid $primary-muted;
+  background: $bg-white;
+  color: $primary;
+  border-radius: 9999px;
+  padding: $spacing-2 $spacing-3;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &:hover {
+    background: $primary-light;
+    border-color: $primary;
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatQuickActionsBlock.vue b/components/ai/blocks/ChatQuickActionsBlock.vue
new file mode 100644
index 0000000..0f0bf1d
--- /dev/null
+++ b/components/ai/blocks/ChatQuickActionsBlock.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="chat-quick-actions-block">
+    <button
+      v-for="(action, i) in actions"
+      :key="i"
+      type="button"
+      class="quick-action"
+      @click="$emit('select', action.label)"
+    >
+      {{ action.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface QuickAction {
+  label: string;
+  tool?: string;
+  args?: Record<string, unknown>;
+}
+
+const props = defineProps<{ actions?: QuickAction[] }>();
+defineEmits<{ (e: 'select', message: string): void }>();
+
+const actions = computed<QuickAction[]>(() =>
+  (props.actions ?? []).filter((a) => a && typeof a.label === 'string')
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.chat-quick-actions-block {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+}
+
+.quick-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid $border-light;
+  background: $bg-white;
+  color: $text-secondary;
+  border-radius: 9999px;
+  padding: $spacing-2 $spacing-3;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+    border-color: $primary-muted;
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatTableBlock.vue b/components/ai/blocks/ChatTableBlock.vue
new file mode 100644
index 0000000..2655661
--- /dev/null
+++ b/components/ai/blocks/ChatTableBlock.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="chat-table-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+
+    <!-- One row reads better as a record card than a table. -->
+    <div v-if="rows.length === 1" class="record-card">
+      <div v-for="col in columns" :key="col" class="record-row">
+        <span class="record-key">{{ formatKey(col) }}</span>
+        <span class="record-value">{{ formatValue(rows[0][col]) }}</span>
+      </div>
+    </div>
+
+    <div v-else class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="col in columns" :key="col">{{ formatKey(col) }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, i) in rows" :key="i">
+            <td v-for="col in columns" :key="col">{{ formatValue(row[col]) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  title?: string;
+  columns?: string[];
+  rows?: Record<string, unknown>[];
+}>();
+
+const rows = computed(() => props.rows ?? []);
+const columns = computed(() => {
+  if (props.columns?.length) return props.columns;
+  return rows.value[0] ? Object.keys(rows.value[0]) : [];
+});
+
+const formatKey = (key: string): string =>
+  key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+const formatValue = (value: unknown): string => {
+  if (value === null || value === undefined) return '-';
+  if (typeof value === 'number') {
+    return Number.isInteger(value)
+      ? value.toString()
+      : value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+  return String(value);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.record-card {
+  border: 1px solid $primary-muted;
+  border-radius: $radius-lg;
+  overflow: hidden;
+
+  .record-row {
+    display: flex;
+    justify-content: space-between;
+    gap: $spacing-2;
+    padding: $spacing-2;
+    border-bottom: 1px solid $primary-muted;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .record-key {
+      color: $text-muted;
+    }
+
+    .record-value {
+      font-weight: $font-semibold;
+    }
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  th,
+  td {
+    padding: $spacing-1 $spacing-2;
+    text-align: left;
+    border-bottom: 1px solid $primary-muted;
+  }
+
+  th {
+    font-weight: $font-semibold;
+    background: $primary-light;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+}
+</style>
diff --git a/components/ai/blocks/ChatTimelineBlock.vue b/components/ai/blocks/ChatTimelineBlock.vue
new file mode 100644
index 0000000..fd224bb
--- /dev/null
+++ b/components/ai/blocks/ChatTimelineBlock.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="chat-timeline-block">
+    <p v-if="title" class="block-title">{{ title }}</p>
+    <ol class="timeline">
+      <li v-for="(item, i) in items" :key="i" class="timeline-item">
+        <span class="timeline-dot" aria-hidden="true" />
+        <div class="timeline-content">
+          <div class="timeline-head">
+            <span class="timeline-item-title">{{ item.title }}</span>
+            <span v-if="formatAmount(item)" class="timeline-amount">{{ formatAmount(item) }}</span>
+          </div>
+          <span v-if="item.date" class="timeline-date">{{ formatDate(item.date) }}</span>
+          <p v-if="item.description" class="timeline-desc">{{ item.description }}</p>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface TimelineItem {
+  date?: string;
+  title?: string;
+  description?: string;
+  amount?: number | string;
+  currency?: string | null;
+}
+
+const props = defineProps<{ title?: string; items?: TimelineItem[] }>();
+
+const items = computed<TimelineItem[]>(() => props.items ?? []);
+
+const formatAmount = (item: TimelineItem): string => {
+  if (item.amount === undefined || item.amount === null || item.amount === '') return '';
+  const num =
+    typeof item.amount === 'number'
+      ? item.amount.toLocaleString(undefined, { maximumFractionDigits: 2 })
+      : String(item.amount);
+  return item.currency ? `${num} ${item.currency}` : num;
+};
+
+const formatDate = (iso: string): string => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? iso
+    : d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.block-title {
+  font-weight: $font-semibold;
+  margin-bottom: $spacing-2;
+  font-size: $font-size-sm;
+}
+
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.timeline-item {
+  position: relative;
+  padding: 0 0 $spacing-3 $spacing-4;
+  border-left: 2px solid $primary-muted;
+
+  &:last-child {
+    border-left-color: transparent;
+    padding-bottom: 0;
+  }
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -5px;
+  top: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: $primary;
+}
+
+.timeline-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.timeline-head {
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-2;
+}
+
+.timeline-item-title {
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+}
+
+.timeline-amount {
+  font-weight: $font-bold;
+  font-size: $font-size-sm;
+  white-space: nowrap;
+}
+
+.timeline-date {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.timeline-desc {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+</style>
diff --git a/components/auth/AuthCarousel.vue b/components/auth/AuthCarousel.vue
index 9eebac4..64327f0 100644
--- a/components/auth/AuthCarousel.vue
+++ b/components/auth/AuthCarousel.vue
@@ -2,8 +2,25 @@
   <div class="login-sidebar">
     <div class="sidebar-content">
       <div class="carousel-slide">
-        <div class="slide-image-wrapper">
-          <div class="carousel-image" />
+        <div
+          class="slide-image-wrapper"
+          :class="{ 'slide-image-wrapper--art': slides[currentSlide].image }"
+        >
+          <transition name="fade" mode="out-in">
+            <img
+              v-if="slides[currentSlide].image"
+              :key="`art-${currentSlide}`"
+              :src="slides[currentSlide].image"
+              class="slide-art"
+              alt=""
+            />
+            <component
+              v-else
+              :is="slides[currentSlide].icon"
+              :key="currentSlide"
+              class="slide-icon"
+            />
+          </transition>
         </div>
         <div class="sidebar-text">
           <transition name="fade" mode="out-in">
@@ -28,22 +45,33 @@
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import IconAI from '~icons/solar/magic-stick-3-bold-duotone';
+import IconIntegrations from '~icons/solar/card-transfer-bold-duotone';
+import IconImport from '~icons/solar/import-bold-duotone';
 
 const { t } = useI18n();
 const currentSlide = ref(0);
 
 const slides = computed(() => [
   {
-    title: t('carousel.simple.title'),
-    text: t('carousel.simple.text')
+    title: t('carousel.ai.title'),
+    text: t('carousel.ai.text'),
+    icon: IconAI
+  },
+  {
+    title: t('carousel.integrations.title'),
+    text: t('carousel.integrations.text'),
+    icon: IconIntegrations
   },
   {
-    title: t('carousel.automated.title'),
-    text: t('carousel.automated.text')
+    title: t('carousel.import.title'),
+    text: t('carousel.import.text'),
+    icon: IconImport
   },
   {
-    title: t('carousel.opensource.title'),
-    text: t('carousel.opensource.text')
+    title: t('carousel.welcome.title'),
+    text: t('carousel.welcome.text'),
+    image: '/floating-docs-man.svg'
   }
 ]);
 
@@ -91,39 +119,83 @@ onBeforeUnmount(() => clearInterval(slideInterval));
 }
 
 .slide-image-wrapper {
-  width: 65%;
-  max-width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 220px;
+  height: 220px;
   margin: 0 auto;
-  aspect-ratio: 16/15;
-
-  .carousel-image {
-    width: 100%;
-    height: 100%;
-    background: url('/floating-docs-man.svg') no-repeat center;
-    background-size: contain;
-    opacity: 0.9;
+  border-radius: 40px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.4);
+
+  &--art {
+    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), transparent 65%);
+    border: none;
+    box-shadow: none;
+    width: 280px;
+    height: 240px;
+  }
+}
+
+.slide-icon {
+  width: 120px;
+  height: 120px;
+  color: #fff;
+}
+
+.slide-art {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: 50% 90%;
+  animation: funky-bob 3.6s ease-in-out infinite;
+}
+
+@keyframes funky-bob {
+  0% {
+    transform: translateY(0) rotate(-4deg) scale(1);
+  }
+  30% {
+    transform: translateY(-16px) rotate(3deg) scale(1.03);
+  }
+  55% {
+    transform: translateY(-6px) rotate(-2deg) scale(1);
+  }
+  80% {
+    transform: translateY(-12px) rotate(4deg) scale(1.02);
+  }
+  100% {
+    transform: translateY(0) rotate(-4deg) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-art {
+    animation: none;
   }
 }
 
 .sidebar-text {
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 180px;
-  overflow: hidden;
+  align-items: flex-start;
+  min-height: 200px;
   text-align: center;
 
   .text-content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    max-width: 80%;
+    max-width: 90%;
 
     h2 {
-      font-size: 3.5rem;
+      font-size: 2.75rem;
       font-weight: 700;
       color: $accent-color;
       margin: 0;
+      line-height: 1.1;
     }
 
     p {
diff --git a/components/budgets/BudgetForm.vue b/components/budgets/BudgetForm.vue
index 09824f4..e2ea77e 100644
--- a/components/budgets/BudgetForm.vue
+++ b/components/budgets/BudgetForm.vue
@@ -149,6 +149,7 @@
 import { computed, reactive, ref, watch } from 'vue';
 import type { Budget, BudgetPeriodType, BudgetTargetType } from '~/types/budget';
 import { useSharedData } from '~/composables/useSharedData';
+import { CURRENCIES } from '@/utils/currencies';
 
 const props = defineProps<{
   editingItem?: Budget | null;
@@ -177,19 +178,30 @@ const defaultCurrency = computed(() => props.defaults?.currency ?? 'USD');
 // <input type="date"> needs a bare `YYYY-MM-DD` or it renders empty.
 const toDateInput = (value: string): string => (value ? value.slice(0, 10) : '');
 
-// Pull distinct currency codes from the user's wallets. If the user has
-// no wallets yet, fall back to the configured default so the dropdown
-// is never empty when there's a currency configured globally.
+// Budgets aren't limited to wallet currencies: offer every supported currency,
+// with the user's own wallet currencies (and configured default) surfaced first
+// so the most relevant options sit at the top of the list.
 const currencyOptions = computed<string[]>(() => {
-  const wallets = (shared.wallets?.value ?? []) as Array<{ currency?: string }>;
-  const codes = new Set<string>();
-  for (const w of wallets) {
-    if (w.currency) codes.add(w.currency.toUpperCase());
+  const ordered: string[] = [];
+  const seen = new Set<string>();
+  const add = (code?: string) => {
+    if (!code) return;
+    const upper = code.toUpperCase();
+    if (!seen.has(upper)) {
+      seen.add(upper);
+      ordered.push(upper);
+    }
+  };
+
+  for (const w of (shared.wallets?.value ?? []) as Array<{ currency?: string }>) {
+    add(w.currency);
   }
-  if (codes.size === 0 && defaultCurrency.value) {
-    codes.add(defaultCurrency.value.toUpperCase());
+  add(defaultCurrency.value);
+  for (const c of CURRENCIES) {
+    add(c.code);
   }
-  return Array.from(codes).sort();
+
+  return ordered;
 });
 
 const buildInitial = () => ({
diff --git a/components/dashboard/CategoryBreakdown.vue b/components/dashboard/CategoryBreakdown.vue
index 63e3248..3bfa818 100644
--- a/components/dashboard/CategoryBreakdown.vue
+++ b/components/dashboard/CategoryBreakdown.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="category-breakdown">
+    <PieChart class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
     <div class="header">
       <h3 class="title">{{ t('Spending Overview') }}</h3>
       <div class="chart-tabs">
@@ -245,7 +246,11 @@ const allDataPoints = computed(() => {
 @use '@/assets/scss/_variables.scss' as *;
 
 .category-breakdown {
-  background: $bg-white;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 100% at 100% 0%, rgba(var(--color-primary-rgb), 0.05), transparent 58%),
+    $bg-white;
   border-radius: 16px;
   box-shadow: $elevation-1;
   border: 1px solid $border-light;
@@ -253,6 +258,19 @@ const allDataPoints = computed(() => {
   height: 320px;
   display: flex;
   flex-direction: column;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: $primary;
+  opacity: 0.05;
+  pointer-events: none;
 }
 
 .header {
diff --git a/components/dashboard/DashboardAgentHero.vue b/components/dashboard/DashboardAgentHero.vue
new file mode 100644
index 0000000..36b56da
--- /dev/null
+++ b/components/dashboard/DashboardAgentHero.vue
@@ -0,0 +1,376 @@
+<template>
+  <section v-if="!dismissed" class="agent-hero surface surface--brand">
+    <!-- Scattered finance icon vectors as the backdrop. -->
+    <div class="hero-ambient" aria-hidden="true">
+      <Wallet class="amb a1" :size="108" :stroke-width="1" />
+      <PieChart class="amb a2" :size="88" :stroke-width="1" />
+      <Coins class="amb a3" :size="76" :stroke-width="1" />
+      <Receipt class="amb a4" :size="96" :stroke-width="1" />
+      <PiggyBank class="amb a5" :size="84" :stroke-width="1" />
+      <TrendingUp class="amb a6" :size="80" :stroke-width="1" />
+      <CreditCard class="amb a7" :size="72" :stroke-width="1" />
+    </div>
+
+    <button class="hero-dismiss" :aria-label="t('Dismiss')" @click="dismiss">
+      <X :size="16" />
+    </button>
+
+    <div class="hero-grid">
+      <!-- Left: greeting with the copilot mark -->
+      <div class="hero-greet">
+        <span class="greet-icon"><Bot :size="28" /></span>
+        <div class="greet-text">
+          <h1 class="hero-title">{{ t('Hey {name}', { name: firstName }) }}</h1>
+          <p class="hero-sub">{{ t("Tell me what you want and I'll do it.") }}</p>
+        </div>
+      </div>
+
+      <!-- Right: ask box + quick actions -->
+      <div class="hero-main">
+        <form class="hero-ask" @submit.prevent="askFreeform">
+          <input
+            v-model="askText"
+            type="text"
+            class="hero-input"
+            :placeholder="t('e.g. log 12 for lunch, or build me a report')"
+          />
+          <button
+            type="submit"
+            class="hero-send"
+            :disabled="!askText.trim()"
+            :aria-label="t('Send')"
+          >
+            <ArrowUp :size="18" />
+          </button>
+        </form>
+
+        <div class="hero-actions">
+          <button
+            v-for="a in actions"
+            :key="a.key"
+            type="button"
+            class="agent-chip"
+            @click="openAction(a.key)"
+          >
+            <component :is="a.icon" :size="15" />
+            <span>{{ a.label }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Rendered outside the hero so the hero's overflow/blur context can't clip it. -->
+  <DashboardQuickActionModal
+    v-if="activeAction"
+    :action="activeAction"
+    @close="activeAction = null"
+    @done="activeAction = null"
+    @submit="onActionSubmit"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'nuxt/app';
+import {
+  Bot,
+  ArrowUp,
+  X,
+  PlusCircle,
+  FileBarChart,
+  ArrowLeftRight,
+  FileUp,
+  Wallet,
+  PieChart,
+  Coins,
+  Receipt,
+  PiggyBank,
+  TrendingUp,
+  CreditCard
+} from 'lucide-vue-next';
+import { useAuth } from '@/composables/useAuth';
+import { usePendingAsk } from '@/composables/usePendingAsk';
+import DashboardQuickActionModal from '@/components/dashboard/DashboardQuickActionModal.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const { user } = useAuth();
+const { setPendingAsk } = usePendingAsk();
+
+const askText = ref('');
+const activeAction = ref(null);
+const dismissed = ref(false);
+
+const firstName = computed(() => user.value?.first_name || t('there'));
+
+const actions = computed(() => [
+  { key: 'log', icon: PlusCircle, label: t('Log a transaction') },
+  { key: 'transfer', icon: ArrowLeftRight, label: t('Transfer money') },
+  { key: 'report', icon: FileBarChart, label: t('Build a report') },
+  { key: 'import', icon: FileUp, label: t('Import a document') }
+]);
+
+const handOff = (payload) => {
+  setPendingAsk(payload);
+  router.push('/home');
+};
+
+const askFreeform = () => {
+  const text = askText.value.trim();
+  if (!text) return;
+  handOff({ text });
+};
+
+const openAction = (key) => {
+  activeAction.value = key;
+};
+
+const onActionSubmit = (payload) => {
+  activeAction.value = null;
+  handOff(payload);
+};
+
+// Dismiss is view-scoped only: it hides the assistant until the page is
+// reloaded (or revisited), so a refresh brings it back.
+const dismiss = () => {
+  dismissed.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.agent-hero {
+  position: relative;
+  width: 100%;
+  border-radius: 18px;
+  padding: $spacing-3 $spacing-4;
+  overflow: hidden;
+  border: 1px solid $border-light;
+  box-shadow: $elevation-1;
+}
+
+/* Scattered icon backdrop */
+.hero-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .amb {
+    position: absolute;
+    color: var(--surface-deep);
+    opacity: 0.07;
+  }
+  .a1 {
+    top: 8%;
+    left: 2%;
+    transform: rotate(-12deg);
+  }
+  .a2 {
+    top: 12%;
+    right: 8%;
+    transform: rotate(10deg);
+  }
+  .a3 {
+    bottom: 10%;
+    left: 26%;
+    transform: rotate(8deg);
+  }
+  .a4 {
+    bottom: 6%;
+    right: 4%;
+    transform: rotate(-8deg);
+  }
+  .a5 {
+    top: 40%;
+    left: 40%;
+    transform: rotate(6deg);
+  }
+  .a6 {
+    top: 48%;
+    right: 30%;
+    transform: rotate(-6deg);
+  }
+  .a7 {
+    top: 4%;
+    left: 48%;
+    transform: rotate(12deg);
+  }
+}
+
+.hero-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--surface-deep);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: $transition-base;
+
+  &:hover {
+    opacity: 1;
+    background: var(--hover-overlay);
+  }
+}
+
+.hero-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  gap: $spacing-4;
+  align-items: center;
+  // Keep content clear of the absolute dismiss button in the top-right corner.
+  padding-right: $spacing-6;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Left: greeting with the copilot mark */
+.hero-greet {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  min-width: 0;
+}
+
+.greet-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  flex-shrink: 0;
+  backdrop-filter: blur(8px);
+}
+
+.greet-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hero-title {
+  margin: 0;
+  color: var(--surface-ink);
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-xl;
+  }
+}
+
+.hero-sub {
+  margin: 0;
+  color: var(--surface-ink);
+  opacity: 0.8;
+  font-size: $font-size-base;
+}
+
+/* Right column */
+.hero-main {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  min-width: 0;
+}
+
+.hero-ask {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: 5px 5px 5px $spacing-3;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: 12px;
+  box-shadow: $elevation-1;
+
+  &:focus-within {
+    border-color: $primary;
+    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
+  }
+}
+
+.hero-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: $text-primary;
+  font-size: $font-size-base;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.hero-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 9px;
+  background: $primary;
+  color: $text-inverse;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: $transition-base;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+}
+
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px $spacing-3;
+  border: 1px solid $border-light;
+  background: var(--glass-bg);
+  color: var(--surface-ink);
+  border-radius: 999px;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: $transition-base;
+
+  &:hover {
+    background: var(--hover-overlay);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/components/dashboard/DashboardKPIs.vue b/components/dashboard/DashboardKPIs.vue
index cd4c24e..4e474ee 100644
--- a/components/dashboard/DashboardKPIs.vue
+++ b/components/dashboard/DashboardKPIs.vue
@@ -1,24 +1,7 @@
 <template>
   <div class="kpi-section">
-    <div class="kpi-header">
-      <div class="wallet-selector" @click="toggleDropdown">
-        <span class="wallet-name">{{ selectedWalletName }}</span>
-        <ChevronDown class="chevron" :class="{ rotated: showDropdown }" />
-
-        <div v-if="showDropdown" class="wallet-dropdown">
-          <div
-            v-for="wallet in availableWallets"
-            :key="wallet.id || 'all'"
-            class="wallet-option"
-            :class="{ selected: selectedWalletId === wallet.id }"
-            @click.stop="selectWallet(wallet.id)"
-          >
-            {{ wallet.name }}
-          </div>
-        </div>
-      </div>
-
-      <div v-if="isCustomActive && activeFilterChips.length > 0" class="active-filters">
+    <div v-if="isCustomActive && activeFilterChips.length > 0" class="kpi-header">
+      <div class="active-filters">
         <span v-for="chip in activeFilterChips" :key="chip.key" class="filter-chip">
           <span class="filter-chip__label">{{ chip.label }}</span>
           <button class="filter-chip__remove" @click="removeFilter(chip.key)">
@@ -61,15 +44,8 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from 'vue';
-import {
-  ChevronDown,
-  X as XIcon,
-  Wallet,
-  ArrowDownLeft,
-  ArrowUpRight,
-  PiggyBank
-} from 'lucide-vue-next';
+import { computed } from 'vue';
+import { X as XIcon, Wallet, ArrowDownLeft, ArrowUpRight, PiggyBank } from 'lucide-vue-next';
 import { useStatistics } from '@/composables/useStatistics';
 import { useWallets } from '@/composables/useWallets';
 import { useSharedData } from '@/composables/useSharedData';
@@ -83,21 +59,11 @@ const {
   currentPeriod,
   customFilters,
   formatCompactCurrency,
-  selectedWalletId,
-  availableWallets,
-  setSelectedWallet,
   setCustomFilters,
   clearCustomFilters
 } = useStatistics();
 
 const statistics = currentStatistics;
-const showDropdown = ref(false);
-
-const selectedWalletName = computed(() => {
-  if (selectedWalletId.value === null) return t('All Wallets');
-  const wallet = availableWallets.value.find((w) => w.id === selectedWalletId.value);
-  return wallet ? wallet.name : t('All Wallets');
-});
 
 const netValue = computed(() => {
   const income = statistics.value?.total_income || 0;
@@ -140,21 +106,6 @@ const formatCurrency = (value) => {
   return formatCompactCurrency(value, getDefaultCurrency.value || 'USD');
 };
 
-const toggleDropdown = () => {
-  showDropdown.value = !showDropdown.value;
-};
-
-const selectWallet = (walletId) => {
-  setSelectedWallet(walletId);
-  showDropdown.value = false;
-};
-
-const handleClickOutside = (event) => {
-  if (!event.target.closest('.wallet-selector')) {
-    showDropdown.value = false;
-  }
-};
-
 const isCustomActive = computed(() => {
   return currentPeriod.value === 'custom' && customFilters.value !== null;
 });
@@ -216,14 +167,6 @@ const removeFilter = (key) => {
 const clearAllFilters = () => {
   clearCustomFilters();
 };
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -242,73 +185,6 @@ onUnmounted(() => {
   flex-wrap: wrap;
 }
 
-.wallet-selector {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-2;
-  padding: $spacing-2 $spacing-3;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  box-shadow: $shadow-sm;
-  border: 1px solid $border-color;
-  cursor: pointer;
-  user-select: none;
-  width: fit-content;
-
-  &:hover {
-    background: $bg-light;
-  }
-}
-
-.wallet-name {
-  font-size: $font-size-sm;
-  font-weight: $font-semibold;
-  color: $text-primary;
-}
-
-.chevron {
-  width: 16px;
-  height: 16px;
-  color: $text-muted;
-  transition: transform 0.2s;
-
-  &.rotated {
-    transform: rotate(180deg);
-  }
-}
-
-.wallet-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: $spacing-1;
-  min-width: 180px;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  box-shadow: $shadow-md;
-  z-index: 100;
-  overflow: hidden;
-}
-
-.wallet-option {
-  padding: $spacing-2 $spacing-3;
-  font-size: $font-size-sm;
-  color: $text-primary;
-  cursor: pointer;
-  transition: background-color 0.15s;
-
-  &:hover {
-    background: $bg-light;
-  }
-
-  &.selected {
-    background: rgba(var(--color-primary-rgb), 0.1);
-    color: $primary;
-    font-weight: $font-medium;
-  }
-}
-
 .kpi-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
diff --git a/components/dashboard/DashboardQuickActionModal.vue b/components/dashboard/DashboardQuickActionModal.vue
new file mode 100644
index 0000000..005e0bd
--- /dev/null
+++ b/components/dashboard/DashboardQuickActionModal.vue
@@ -0,0 +1,543 @@
+<template>
+  <Teleport to="body">
+    <div class="qa-overlay" @click.self="$emit('close')">
+      <div class="qa-modal">
+        <header class="qa-head">
+          <span class="qa-icon"><component :is="config.icon" :size="18" /></span>
+          <div class="qa-heading">
+            <h3 class="qa-title">{{ config.title }}</h3>
+            <p class="qa-sub">{{ config.sub }}</p>
+          </div>
+          <button class="qa-close" :aria-label="t('Close')" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </header>
+
+        <div class="qa-body">
+          <!-- Log a transaction (executes directly) -->
+          <template v-if="action === 'log'">
+            <div class="qa-row">
+              <button
+                type="button"
+                class="qa-toggle"
+                :class="{ active: form.type === 'expense' }"
+                @click="form.type = 'expense'"
+              >
+                {{ t('Expense') }}
+              </button>
+              <button
+                type="button"
+                class="qa-toggle"
+                :class="{ active: form.type === 'income' }"
+                @click="form.type = 'income'"
+              >
+                {{ t('Income') }}
+              </button>
+            </div>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Amount') }}</span>
+              <input
+                v-model.number="form.amount"
+                type="number"
+                step="0.01"
+                min="0"
+                class="qa-input"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('What for?') }}</span>
+              <input
+                v-model="form.description"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. coffee')"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Wallet') }} ({{ t('optional') }})</span>
+              <select v-model="form.walletId" class="qa-input">
+                <option :value="null">{{ t('Default') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Party') }} ({{ t('optional') }})</span>
+              <select v-model="form.partyId" class="qa-input">
+                <option :value="null">{{ t('None') }}</option>
+                <option v-for="p in parties" :key="p.id" :value="p.id">{{ p.name }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('When') }} ({{ t('optional') }})</span>
+              <input v-model="form.date" type="date" class="qa-input" />
+            </label>
+          </template>
+
+          <!-- Transfer money (executes directly) -->
+          <template v-else-if="action === 'transfer'">
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Amount') }}</span>
+              <input
+                v-model.number="form.amount"
+                type="number"
+                step="0.01"
+                min="0"
+                class="qa-input"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('From wallet') }}</span>
+              <select v-model="form.fromWalletId" class="qa-input">
+                <option :value="null" disabled>{{ t('Select a wallet') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">
+                  {{ w.name }} ({{ w.currency }})
+                </option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('To wallet') }}</span>
+              <select v-model="form.toWalletId" class="qa-input">
+                <option :value="null" disabled>{{ t('Select a wallet') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">
+                  {{ w.name }} ({{ w.currency }})
+                </option>
+              </select>
+            </label>
+            <label v-if="needsRate" class="qa-field">
+              <span class="qa-label">{{ t('Exchange rate') }}</span>
+              <input
+                v-model.number="form.exchangeRate"
+                type="number"
+                step="0.0001"
+                min="0"
+                class="qa-input"
+              />
+            </label>
+          </template>
+
+          <!-- Build a report (goes to chat) -->
+          <template v-else-if="action === 'report'">
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Period') }}</span>
+              <select v-model="form.period" class="qa-input">
+                <option value="this month">{{ t('This month') }}</option>
+                <option value="last month">{{ t('Last month') }}</option>
+                <option value="this year">{{ t('This year') }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Focus') }} ({{ t('optional') }})</span>
+              <input
+                v-model="form.focus"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. dining, subscriptions')"
+              />
+            </label>
+          </template>
+
+          <!-- Import a document (goes to chat with the file) -->
+          <template v-else-if="action === 'import'">
+            <div class="qa-field">
+              <span class="qa-label">{{ t('Document') }}</span>
+              <button type="button" class="qa-file" @click="fileInput?.click()">
+                <Upload :size="16" />
+                <span>{{ fileName || t('Choose a file') }}</span>
+              </button>
+              <input
+                ref="fileInput"
+                type="file"
+                accept="image/*,.pdf,.csv"
+                class="qa-file-input"
+                @change="onFile"
+              />
+            </div>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Anything to add?') }} ({{ t('optional') }})</span>
+              <input
+                v-model="form.prompt"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. this is a bank statement for June')"
+              />
+            </label>
+          </template>
+        </div>
+
+        <div class="qa-actions">
+          <button class="qa-btn qa-cancel" @click="$emit('close')">{{ t('Cancel') }}</button>
+          <button class="qa-btn qa-submit" :disabled="!canSubmit || busy" @click="submit">
+            {{ busy ? t('Working…') : submitLabel }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { X, PlusCircle, ArrowLeftRight, FileBarChart, FileUp, Upload } from 'lucide-vue-next';
+import { useSharedData } from '@/composables/useSharedData';
+import { useTransactions } from '@/composables/useTransactions';
+import { useNotifications } from '@/composables/useNotifications';
+import transfersApi from '@/services/api/transfersApi';
+import type { FrontendTransaction } from '~/types/transaction';
+
+const props = defineProps<{ action: 'log' | 'transfer' | 'report' | 'import' }>();
+const emit = defineEmits<{
+  (e: 'close' | 'done'): void;
+  (e: 'submit', payload: { text: string; files?: File[] }): void;
+}>();
+
+const { t } = useI18n();
+const sharedData = useSharedData();
+const wallets = sharedData.wallets;
+const parties = sharedData.parties;
+const { addTransaction, refreshTransactions } = useTransactions();
+const { showSuccess, showError } = useNotifications();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const fileName = ref('');
+const file = ref<File | null>(null);
+const busy = ref(false);
+
+const form = reactive({
+  type: 'expense' as 'expense' | 'income',
+  amount: null as number | null,
+  description: '',
+  walletId: null as number | null,
+  partyId: null as number | null,
+  date: '',
+  fromWalletId: null as number | null,
+  toWalletId: null as number | null,
+  exchangeRate: null as number | null,
+  period: 'this month',
+  focus: '',
+  prompt: ''
+});
+
+const CONFIG = {
+  log: {
+    icon: PlusCircle,
+    title: t('Log a transaction'),
+    sub: t("Fill in the details and I'll record it")
+  },
+  transfer: {
+    icon: ArrowLeftRight,
+    title: t('Transfer money'),
+    sub: t('Move money between your wallets')
+  },
+  report: { icon: FileBarChart, title: t('Build a report'), sub: t('Pick what to summarise') },
+  import: {
+    icon: FileUp,
+    title: t('Import a document'),
+    sub: t('Upload a statement, invoice or receipt to extract')
+  }
+} as const;
+
+const config = computed(() => CONFIG[props.action]);
+
+// log and transfer execute directly; report and import go to the chat.
+const isDirect = computed(() => props.action === 'log' || props.action === 'transfer');
+const submitLabel = computed(() => (isDirect.value ? t('Save') : t('Ask Trakli')));
+
+const walletById = (id: number | null) => wallets.value.find((w) => w.id === id);
+
+const needsRate = computed(() => {
+  const from = walletById(form.fromWalletId);
+  const to = walletById(form.toWalletId);
+  return !!from && !!to && from.currency !== to.currency;
+});
+
+const onFile = (e: Event) => {
+  const f = (e.target as HTMLInputElement).files?.[0] ?? null;
+  file.value = f;
+  fileName.value = f?.name ?? '';
+};
+
+const canSubmit = computed(() => {
+  if (props.action === 'log') return typeof form.amount === 'number' && form.amount > 0;
+  if (props.action === 'transfer') {
+    return (
+      typeof form.amount === 'number' &&
+      form.amount > 0 &&
+      !!form.fromWalletId &&
+      !!form.toWalletId &&
+      form.fromWalletId !== form.toWalletId &&
+      (!needsRate.value || (typeof form.exchangeRate === 'number' && form.exchangeRate > 0))
+    );
+  }
+  if (props.action === 'import') return !!file.value;
+  return true;
+});
+
+const buildText = (): string => {
+  if (props.action === 'report') {
+    let text = `Build a financial report for ${form.period} with charts`;
+    if (form.focus.trim()) text += `, focusing on ${form.focus.trim()}`;
+    return text + '.';
+  }
+  // import a document
+  return form.prompt.trim() || 'Import this document and propose the transactions to record.';
+};
+
+const runLog = async () => {
+  busy.value = true;
+  try {
+    const now = new Date();
+    const time = now.toTimeString().slice(0, 5);
+    await addTransaction({
+      id: '',
+      date: form.date || '',
+      time,
+      type: form.type === 'expense' ? 'EXPENSE' : 'INCOME',
+      party: '',
+      partyId: form.partyId ?? undefined,
+      amount: String(form.amount),
+      category: '',
+      categoryIds: [],
+      wallet: '',
+      walletId: form.walletId ?? undefined,
+      description: form.description.trim(),
+      isRefund: false
+    } as FrontendTransaction);
+    await sharedData.loadWallets(true);
+    showSuccess(t('Transaction logged'));
+    emit('done');
+  } catch {
+    showError(t('Could not log the transaction'));
+  } finally {
+    busy.value = false;
+  }
+};
+
+const runTransfer = async () => {
+  busy.value = true;
+  try {
+    await transfersApi.create({
+      amount: Number(form.amount),
+      from_wallet_id: form.fromWalletId as number,
+      to_wallet_id: form.toWalletId as number,
+      exchange_rate: needsRate.value ? Number(form.exchangeRate) : undefined
+    });
+    await sharedData.loadWallets(true);
+    await refreshTransactions();
+    showSuccess(t('Transfer recorded'));
+    emit('done');
+  } catch {
+    showError(t('Could not record the transfer'));
+  } finally {
+    busy.value = false;
+  }
+};
+
+const submit = () => {
+  if (!canSubmit.value || busy.value) return;
+  if (props.action === 'log') return runLog();
+  if (props.action === 'transfer') return runTransfer();
+  emit('submit', { text: buildText(), files: file.value ? [file.value] : undefined });
+};
+
+onMounted(() => {
+  if (props.action === 'log') {
+    sharedData.loadWallets?.();
+    sharedData.loadParties?.();
+  }
+  if (props.action === 'transfer') sharedData.loadWallets?.();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.qa-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  // Scroll the overlay itself so a tall modal's footer is always reachable;
+  // flex-start + auto margins center it vertically only when it fits.
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  padding: $spacing-4;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+
+.qa-modal {
+  width: 100%;
+  max-width: 440px;
+  margin: auto;
+  background: $bg-white;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+}
+
+.qa-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4;
+  border-bottom: 1px solid $border-light;
+}
+
+.qa-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: $primary-light;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.qa-heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.qa-title {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.qa-sub {
+  margin: 0;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.qa-close {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: 8px;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-secondary;
+  }
+}
+
+.qa-body {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  padding: $spacing-4;
+}
+
+.qa-row {
+  display: flex;
+  gap: $spacing-2;
+}
+
+.qa-toggle {
+  flex: 1;
+  padding: $spacing-2;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &.active {
+    background: $primary-light;
+    border-color: $primary;
+    color: $primary;
+  }
+}
+
+.qa-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.qa-label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.qa-input {
+  padding: 8px 10px;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.qa-file {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: 8px 10px;
+  border: 1px dashed $primary-muted;
+  border-radius: $radius-md;
+  background: $bg-light;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  width: 100%;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+}
+
+.qa-file-input {
+  display: none;
+}
+
+.qa-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-2;
+  padding: $spacing-3 $spacing-4;
+  border-top: 1px solid $border-light;
+}
+
+.qa-btn {
+  border: none;
+  border-radius: $radius-md;
+  padding: $spacing-2 $spacing-4;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+.qa-cancel {
+  background: $bg-gray;
+  color: $text-secondary;
+}
+
+.qa-submit {
+  background: $primary;
+  color: $text-inverse;
+}
+</style>
diff --git a/components/dashboard/DashboardWalletSelector.vue b/components/dashboard/DashboardWalletSelector.vue
new file mode 100644
index 0000000..f9e3bab
--- /dev/null
+++ b/components/dashboard/DashboardWalletSelector.vue
@@ -0,0 +1,157 @@
+<template>
+  <div ref="triggerEl" class="wallet-selector" @click="toggleDropdown">
+    <Wallet class="wallet-icon" :size="15" />
+    <span class="wallet-name">{{ selectedWalletName }}</span>
+    <ChevronDown class="chevron" :class="{ rotated: showDropdown }" :size="16" />
+  </div>
+
+  <Teleport to="body">
+    <div v-if="showDropdown" class="wallet-dropdown" :style="menuStyle">
+      <div
+        v-for="wallet in availableWallets"
+        :key="wallet.id || 'all'"
+        class="wallet-option"
+        :class="{ selected: selectedWalletId === wallet.id }"
+        @click.stop="selectWallet(wallet.id)"
+      >
+        {{ wallet.name }}
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { ChevronDown, Wallet } from 'lucide-vue-next';
+import { useStatistics } from '@/composables/useStatistics';
+
+const { t } = useI18n();
+const { selectedWalletId, availableWallets, setSelectedWallet } = useStatistics();
+
+const showDropdown = ref(false);
+const triggerEl = ref(null);
+const menuStyle = ref({});
+
+const selectedWalletName = computed(() => {
+  if (selectedWalletId.value === null) return t('All Wallets');
+  const wallet = availableWallets.value.find((w) => w.id === selectedWalletId.value);
+  return wallet ? wallet.name : t('All Wallets');
+});
+
+const positionMenu = () => {
+  const el = triggerEl.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  menuStyle.value = {
+    position: 'fixed',
+    top: `${rect.bottom + 6}px`,
+    right: `${window.innerWidth - rect.right}px`,
+    minWidth: `${Math.max(rect.width, 180)}px`
+  };
+};
+
+const closeDropdown = () => {
+  showDropdown.value = false;
+};
+
+const toggleDropdown = () => {
+  showDropdown.value = !showDropdown.value;
+  if (showDropdown.value) positionMenu();
+};
+
+const selectWallet = (walletId) => {
+  setSelectedWallet(walletId);
+  closeDropdown();
+};
+
+const handleClickOutside = (event) => {
+  if (!triggerEl.value?.contains(event.target)) {
+    closeDropdown();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  window.addEventListener('scroll', closeDropdown, true);
+  window.addEventListener('resize', closeDropdown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  window.removeEventListener('scroll', closeDropdown, true);
+  window.removeEventListener('resize', closeDropdown);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.wallet-selector {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-3;
+  background: var(--glass-bg);
+  border-radius: 999px;
+  border: 1px solid $border-light;
+  backdrop-filter: blur(10px);
+  box-shadow: $elevation-1;
+  cursor: pointer;
+  user-select: none;
+  width: fit-content;
+
+  &:hover {
+    background: var(--hover-overlay);
+  }
+}
+
+.wallet-icon {
+  color: var(--surface-deep);
+  flex-shrink: 0;
+}
+
+.wallet-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: var(--surface-ink);
+  white-space: nowrap;
+}
+
+.chevron {
+  color: var(--surface-deep);
+  transition: transform 0.2s;
+
+  &.rotated {
+    transform: rotate(180deg);
+  }
+}
+
+.wallet-dropdown {
+  min-width: 180px;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  z-index: 1200;
+  overflow: hidden;
+}
+
+.wallet-option {
+  padding: $spacing-2 $spacing-3;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background: $bg-light;
+  }
+
+  &.selected {
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+    font-weight: $font-medium;
+  }
+}
+</style>
diff --git a/components/dashboard/QuickInsights.vue b/components/dashboard/QuickInsights.vue
index cb00064..e275881 100644
--- a/components/dashboard/QuickInsights.vue
+++ b/components/dashboard/QuickInsights.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="quick-insights">
+    <Lightbulb class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
     <div class="insights-header">
       <h3 class="title">{{ t('Insights') }}</h3>
       <span class="period">{{ t('This Period') }}</span>
@@ -63,7 +64,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { TrendingUp, TrendingDown, Percent, Shield } from 'lucide-vue-next';
+import { TrendingUp, TrendingDown, Percent, Shield, Lightbulb } from 'lucide-vue-next';
 import { useStatistics } from '@/composables/useStatistics';
 import { useSharedData } from '@/composables/useSharedData';
 
@@ -142,11 +143,28 @@ const formatAmount = (value) => {
 @use '@/assets/scss/_variables.scss' as *;
 
 .quick-insights {
-  background: $bg-white;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 120% at 100% 0%, rgba(var(--color-warning-rgb), 0.06), transparent 58%),
+    $bg-white;
   border-radius: 16px;
   box-shadow: $elevation-1;
   border: 1px solid $border-light;
   padding: $spacing-4;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: $warning;
+  opacity: 0.06;
+  pointer-events: none;
 }
 
 .insights-header {
diff --git a/components/dashboard/RecentTransactions.vue b/components/dashboard/RecentTransactions.vue
index 9974c3a..eb466e4 100644
--- a/components/dashboard/RecentTransactions.vue
+++ b/components/dashboard/RecentTransactions.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="recent-transactions">
+    <Receipt class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
     <div class="header">
       <h3 class="title">{{ t('Recent Transactions') }}</h3>
       <NuxtLink to="/transactions" class="view-all">{{ t('View All') }}</NuxtLink>
@@ -38,7 +39,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import { ArrowDownLeft, ArrowUpRight, Receipt } from 'lucide-vue-next';
 import { useTransactions } from '@/composables/useTransactions';
 
 const { t } = useI18n();
@@ -75,7 +76,11 @@ const formatRelativeTime = (dateStr) => {
 @use '@/assets/scss/_variables.scss' as *;
 
 .recent-transactions {
-  background: $bg-white;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 100% at 100% 0%, rgba(var(--color-info-rgb), 0.05), transparent 58%),
+    $bg-white;
   border-radius: $radius-xl;
   box-shadow: $shadow-sm;
   border: 1px solid $border-color;
@@ -83,6 +88,19 @@ const formatRelativeTime = (dateStr) => {
   height: 320px;
   display: flex;
   flex-direction: column;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: $info;
+  opacity: 0.05;
+  pointer-events: none;
 }
 
 .header {
diff --git a/components/extensions/DescriptorRenderer.vue b/components/extensions/DescriptorRenderer.vue
new file mode 100644
index 0000000..ac4aea4
--- /dev/null
+++ b/components/extensions/DescriptorRenderer.vue
@@ -0,0 +1,200 @@
+<template>
+  <!-- Escape hatch: a plugin Nuxt layer registered a real component. -->
+  <component :is="resolved" v-if="resolved" :contribution="contribution" @next="$emit('next')" />
+
+  <!-- Sidebar nav entry -->
+  <NuxtLink v-else-if="variant === 'sidebar.nav'" :to="href || '#'" class="ext-nav-item">
+    <component :is="icon" class="ext-nav-icon" />
+    <span class="ext-nav-label">{{ card?.title || integration.name }}</span>
+  </NuxtLink>
+
+  <!-- Onboarding step -->
+  <div v-else-if="variant === 'onboarding.steps'" class="ext-onboarding">
+    <div class="ext-onboarding-icon">
+      <component :is="icon" />
+    </div>
+    <h2 class="ext-onboarding-title">{{ onboarding?.title || card?.title || integration.name }}</h2>
+    <p v-if="onboarding?.description || card?.description" class="ext-onboarding-desc">
+      {{ onboarding?.description || card?.description }}
+    </p>
+    <div class="ext-onboarding-actions">
+      <TButton
+        v-if="href"
+        :to="href"
+        :text="card?.cta || 'Open'"
+        variant="outline"
+        :full-width="false"
+      />
+      <TButton :text="'Continue'" :full-width="false" @click="$emit('next')" />
+    </div>
+  </div>
+
+  <!-- Default: an integration card (settings.integrations, dashboard.widgets) -->
+  <TCard v-else class="ext-card">
+    <div class="ext-card-head">
+      <span class="ext-card-icon"><component :is="icon" /></span>
+      <h3 class="ext-card-title">{{ card?.title || integration.name }}</h3>
+      <span v-if="!contribution.configured" class="ext-card-badge">{{ 'Needs setup' }}</span>
+    </div>
+    <p v-if="card?.description || integration.description" class="ext-card-desc">
+      {{ card?.description || integration.description }}
+    </p>
+    <TButton
+      v-if="card?.cta"
+      :to="href || undefined"
+      :text="card.cta"
+      variant="outline"
+      size="small"
+      :full-width="false"
+      @click="$emit('action', contribution)"
+    />
+  </TCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import * as LucideIcons from 'lucide-vue-next';
+import TCard from '@/components/TCard.vue';
+import TButton from '@/components/TButton.vue';
+import type { SlotContribution } from '~/types/integration';
+import { useExtensionSlots } from '~/composables/useExtensionSlots';
+
+const props = defineProps<{ contribution: SlotContribution }>();
+defineEmits<{ next: []; action: [SlotContribution] }>();
+
+const { resolveComponent } = useExtensionSlots();
+
+const integration = computed(() => props.contribution.integration);
+const ui = computed(() => props.contribution.ui);
+const card = computed(() => ui.value.card);
+const onboarding = computed(() => ui.value.onboarding);
+const variant = computed(() => props.contribution.slot);
+const href = computed(() => onboarding.value?.href || card.value?.href || null);
+const resolved = computed(() => resolveComponent(ui.value.component));
+
+// Resolve the descriptor's icon name (kebab or PascalCase) to a lucide
+// component, with a generic glyph fallback so every plugin surface carries an
+// icon like its built-in neighbors.
+const lucide = LucideIcons as unknown as Record<string, Component>;
+const icon = computed<Component>(() => {
+  const name = integration.value.icon;
+  if (name) {
+    const pascal = name.replace(/(^\w|[-_ ]\w)/g, (m) => m.replace(/[-_ ]/, '').toUpperCase());
+    return lucide[name] || lucide[pascal] || lucide.Puzzle;
+  }
+  return lucide.Puzzle;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.ext-card-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  margin-bottom: $spacing-2;
+}
+
+.ext-card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+  color: $primary;
+  flex-shrink: 0;
+
+  :deep(svg) {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.ext-card-title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.ext-card-badge {
+  margin-left: auto;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-muted;
+  background: $bg-gray;
+  border-radius: 999px;
+  padding: 2px 8px;
+  flex-shrink: 0;
+}
+
+.ext-card-desc {
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  margin: 0 0 $spacing-4;
+}
+
+.ext-onboarding {
+  text-align: center;
+}
+
+.ext-onboarding-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin: 0 auto $spacing-4;
+  border-radius: 50%;
+  background: $primary-light;
+  color: $primary;
+
+  :deep(svg) {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.ext-onboarding-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.ext-onboarding-desc {
+  font-size: $font-size-base;
+  color: $text-secondary;
+  margin: $spacing-2 0 $spacing-6;
+}
+
+.ext-onboarding-actions {
+  display: flex;
+  gap: $spacing-3;
+  justify-content: center;
+}
+
+.ext-nav-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-3;
+  border-radius: $radius-md;
+  color: $text-secondary;
+  text-decoration: none;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+.ext-nav-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/components/extensions/ExtensionSlot.vue b/components/extensions/ExtensionSlot.vue
new file mode 100644
index 0000000..496977c
--- /dev/null
+++ b/components/extensions/ExtensionSlot.vue
@@ -0,0 +1,20 @@
+<template>
+  <DescriptorRenderer
+    v-for="contribution in contributions"
+    :key="contribution.key"
+    :contribution="contribution"
+    @action="$emit('action', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import DescriptorRenderer from '@/components/extensions/DescriptorRenderer.vue';
+import type { ExtensionSlot, SlotContribution } from '~/types/integration';
+import { useExtensionSlots } from '~/composables/useExtensionSlots';
+
+const props = defineProps<{ name: ExtensionSlot }>();
+defineEmits<{ action: [SlotContribution] }>();
+
+const { contributionsFor } = useExtensionSlots();
+const contributions = contributionsFor(props.name);
+</script>
diff --git a/components/financial-position/FinancialPositionDrill.vue b/components/financial-position/FinancialPositionDrill.vue
new file mode 100644
index 0000000..747f00d
--- /dev/null
+++ b/components/financial-position/FinancialPositionDrill.vue
@@ -0,0 +1,499 @@
+<template>
+  <Transition name="drawer">
+    <div v-if="open" class="drawer-root" @click.self="$emit('close')">
+      <aside
+        class="drawer-panel surface"
+        :class="`surface--${group?.tone || 'neutral'}`"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header class="drawer-head">
+          <button class="icon-btn" :aria-label="t('Close')" @click="$emit('close')">
+            <ArrowLeft :size="18" />
+          </button>
+          <span class="head-chip">
+            <component :is="group?.icon" :size="22" />
+          </span>
+          <div class="head-id">
+            <span class="head-eyebrow">{{ group?.eyebrow }}</span>
+            <h2 class="head-title">{{ group?.label }}</h2>
+          </div>
+          <button class="icon-btn icon-btn--close" :aria-label="t('Close')" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </header>
+
+        <section class="detail-hero">
+          <span class="detail-metric" :class="group?.metricClass">{{ group?.metric }}</span>
+          <p v-if="group?.hint" class="detail-hint">{{ group.hint }}</p>
+        </section>
+
+        <div v-if="isLoading" class="drawer-body">
+          <LoadingSkeleton variant="list" :count="6" />
+        </div>
+
+        <div v-else-if="rows.length === 0" class="drawer-empty">
+          <span class="empty-ico"><Inbox :size="34" /></span>
+          <p>{{ t('No transactions for this in the selected period.') }}</p>
+        </div>
+
+        <div v-else class="drawer-body">
+          <section v-for="bucket in buckets" :key="bucket.intent" class="bucket">
+            <header v-if="buckets.length > 1" class="bucket-head">
+              <span class="bucket-dir" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                <component
+                  :is="bucket.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                  :size="13"
+                />
+              </span>
+              <span class="bucket-label">{{ bucket.label }}</span>
+              <span class="bucket-sub">{{ t('{n} transactions', { n: bucket.rows.length }) }}</span>
+              <span class="bucket-total" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                {{ bucket.total }}
+              </span>
+            </header>
+
+            <ul class="row-list">
+              <li v-for="row in bucket.rows" :key="row.id" class="row">
+                <span class="row-dir" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  <component
+                    :is="row.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                    :size="14"
+                  />
+                </span>
+                <div class="row-main">
+                  <span class="row-title">{{ row.title }}</span>
+                  <span class="row-meta">{{ row.meta }}</span>
+                </div>
+                <span class="row-amount" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  {{ row.type === 'income' ? '+' : '−' }}{{ row.amount }}
+                </span>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </aside>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { X, ArrowLeft, Inbox, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import transactionApi from '@/services/transactionApi';
+import { formatFullAmount } from '@/utils/currency';
+import { TRANSACTION_INTENT_OPTIONS, type ApiTransaction } from '@/types/transaction';
+
+export interface DrillGroup {
+  key: string;
+  label: string;
+  intents: string[];
+  type?: 'income' | 'expense';
+  tone: string;
+  hint?: string;
+  metric?: string;
+  metricClass?: string;
+  eyebrow?: string;
+  icon: unknown;
+}
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  open: boolean;
+  group: DrillGroup | null;
+  range: { date_from?: string; date_to?: string };
+}>();
+
+defineEmits<{ close: [] }>();
+
+interface Row {
+  id: number;
+  title: string;
+  meta: string;
+  amount: string;
+  amountNum: number;
+  currency: string;
+  intent: string;
+  type: 'income' | 'expense';
+}
+
+const rows = ref<Row[]>([]);
+const isLoading = ref(false);
+
+const intentLabel = (value: string) =>
+  TRANSACTION_INTENT_OPTIONS.find((o) => o.value === value)?.label ?? value;
+
+const dateLabel = (iso: string) => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? ''
+    : d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+};
+
+const toRow = (txn: ApiTransaction): Row => {
+  const currency = txn.wallet?.currency || 'XAF';
+  const party = txn.party?.name;
+  const title = txn.description || party || t('Transaction');
+  const metaBits = [dateLabel(txn.datetime), party && party !== title ? party : null].filter(
+    Boolean
+  );
+  return {
+    id: txn.id,
+    title,
+    meta: metaBits.join(' · '),
+    amount: formatFullAmount(`${txn.amount} ${currency}`),
+    amountNum: Number(txn.amount) || 0,
+    currency,
+    intent: txn.intent || 'regular',
+    type: txn.type
+  };
+};
+
+const buckets = computed(() => {
+  const order = props.group?.intents ?? [];
+  return order
+    .map((intent) => {
+      const bucketRows = rows.value.filter((r) => r.intent === intent);
+      if (bucketRows.length === 0) return null;
+      const currency = bucketRows[0].currency;
+      const sum = bucketRows.reduce((acc, r) => acc + r.amountNum, 0);
+      return {
+        intent,
+        label: t(intentLabel(intent)),
+        type: bucketRows[0].type,
+        rows: bucketRows,
+        total: formatFullAmount(`${sum} ${currency}`)
+      };
+    })
+    .filter((b): b is NonNullable<typeof b> => b !== null);
+});
+
+async function load() {
+  if (!props.open || !props.group) return;
+  isLoading.value = true;
+  rows.value = [];
+  try {
+    const res = await transactionApi.fetchAll({
+      intent: props.group.intents.join(','),
+      type: props.group.type,
+      exclude_transfers: true,
+      date_from: props.range.date_from,
+      date_to: props.range.date_to,
+      limit: 100
+    });
+    rows.value = (res.data || []).map(toRow);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => [props.open, props.group?.key], load, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.drawer-root {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: flex-end;
+  z-index: $z-index-modal;
+}
+
+.drawer-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(480px, 100%);
+  height: 100%;
+  background: $bg-white;
+  box-shadow: $elevation-5;
+  overflow: hidden;
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4 $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+}
+
+// The back arrow is the primary affordance on mobile; the X sits on the right
+// for desktop muscle memory. Both close.
+.icon-btn--close {
+  margin-left: auto;
+
+  @media (max-width: $breakpoint-sm) {
+    display: none;
+  }
+}
+
+.head-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 13px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.head-id {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.head-eyebrow {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--surface-deep);
+}
+
+.head-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-hero {
+  padding: $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.detail-metric {
+  font-size: 2rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  color: $text-primary;
+}
+
+.detail-hint {
+  margin: 6px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $spacing-4 $spacing-5 $spacing-6;
+}
+
+.drawer-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+}
+
+.empty-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: $bg-light;
+  color: var(--color-border-medium, #cbd5e1);
+}
+
+.bucket {
+  margin-bottom: $spacing-5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bucket-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-2;
+  margin-bottom: 4px;
+  border-bottom: 1px solid $border-light;
+}
+
+.bucket-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.bucket-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.bucket-sub {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.bucket-total {
+  margin-left: auto;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.row-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.row-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.row-title {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-meta {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.drawer-enter-active .drawer-panel,
+.drawer-leave-active .drawer-panel {
+  transition: transform $duration-base $easing-standard;
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+.drawer-enter-from .drawer-panel,
+.drawer-leave-to .drawer-panel {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-enter-active .drawer-panel,
+  .drawer-leave-active .drawer-panel {
+    transition: none;
+  }
+}
+</style>
diff --git a/components/financial-position/FinancialPositionView.vue b/components/financial-position/FinancialPositionView.vue
new file mode 100644
index 0000000..2e76c4e
--- /dev/null
+++ b/components/financial-position/FinancialPositionView.vue
@@ -0,0 +1,856 @@
+<template>
+  <div class="fp">
+    <header class="fp-head">
+      <div class="fp-head-text">
+        <h2 class="fp-title">{{ t('Financial position') }}</h2>
+        <p class="fp-subtitle">
+          {{ t('Where your money came from and where it went, grouped by what it really was.') }}
+        </p>
+      </div>
+
+      <div v-if="!props.params" class="fp-presets">
+        <button
+          v-for="p in presets"
+          :key="p.value"
+          type="button"
+          class="fp-preset"
+          :class="{ 'fp-preset--active': preset === p.value }"
+          @click="preset = p.value"
+        >
+          {{ t(p.label) }}
+        </button>
+      </div>
+    </header>
+
+    <p v-if="partial" class="fp-note" role="status">
+      {{
+        t(
+          'Some amounts could not be converted to your default currency and were left out, so figures may be understated. Affected: {currencies}.',
+          { currencies: unconvertedCurrencies.join(', ') }
+        )
+      }}
+    </p>
+
+    <LoadingSkeleton v-if="isLoading && !position" variant="card" :count="3" />
+
+    <template v-else-if="position && hasAny">
+      <section class="fp-hero surface" :class="netSurface">
+        <div class="fp-hero-headline">
+          <span class="eyebrow">{{ t('Net worth change') }}</span>
+          <div class="fp-hero-value-row">
+            <p class="fp-hero-value">{{ signedMoney(position.net_worth_delta) }}</p>
+            <span class="fp-hero-pill">
+              <component
+                :is="position.net_worth_delta >= 0 ? TrendingUp : TrendingDown"
+                :size="14"
+              />
+              {{ position.net_worth_delta >= 0 ? t('Building') : t('Shrinking') }}
+            </span>
+          </div>
+          <p class="fp-hero-sub">
+            {{
+              t(
+                'Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.'
+              )
+            }}
+          </p>
+        </div>
+
+        <div class="fp-hero-scales">
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money in') }}</span>
+            <span class="fp-scale-value fp-up">{{ money(totalIn) }}</span>
+          </div>
+          <span class="fp-scale-arrow"><ArrowRight :size="18" /></span>
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money out') }}</span>
+            <span class="fp-scale-value fp-down">{{ money(totalOut) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <NuxtLink to="/holdings" class="fp-worth surface tone-card">
+        <div class="fp-worth-main">
+          <span class="eyebrow">{{ t('Total net worth now') }}</span>
+          <p class="fp-worth-value">{{ money(position.total_net_worth) }}</p>
+        </div>
+        <div class="fp-worth-split">
+          <div class="fp-worth-part">
+            <Wallet :size="15" />
+            <span class="fp-worth-part-label">{{ t('Cash') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.cash_balance) }}</span>
+          </div>
+          <div class="fp-worth-part">
+            <Coins :size="15" />
+            <span class="fp-worth-part-label">{{ t('Holdings') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.holdings_value) }}</span>
+          </div>
+          <ChevronRight :size="16" class="fp-worth-go" />
+        </div>
+      </NuxtLink>
+
+      <div class="fp-ledger">
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--in"><ArrowDownLeft :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money in') }}</h3>
+            <span class="fp-col-total fp-up">{{ money(totalIn) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyIn" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxIn), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--out"><ArrowUpRight :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money out') }}</h3>
+            <span class="fp-col-total fp-down">{{ money(totalOut) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyOut" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxOut), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      <p class="fp-foot">
+        <Info :size="14" />
+        {{
+          t(
+            'Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.'
+          )
+        }}
+      </p>
+    </template>
+
+    <div v-else class="fp-empty">
+      <PiggyBank :size="44" class="fp-empty-ico" />
+      <p>{{ t('No data for this period yet.') }}</p>
+    </div>
+
+    <FinancialPositionDrill
+      :open="drillOpen"
+      :group="activeGroup"
+      :range="drillRange"
+      @close="drillOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {
+  Wallet,
+  ShoppingBag,
+  PiggyBank,
+  Landmark,
+  HandCoins,
+  TrendingUp,
+  TrendingDown,
+  Gift,
+  Coins,
+  ChevronRight,
+  ArrowDownLeft,
+  ArrowUpRight,
+  ArrowRight,
+  Info
+} from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import FinancialPositionDrill, {
+  type DrillGroup
+} from '@/components/financial-position/FinancialPositionDrill.vue';
+import { statsApi, type StatsParams, type PositionData } from '@/services/api/statsApi';
+import { formatShortAmount } from '@/utils/currency';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  params?: StatsParams | null;
+}>();
+
+const presets = [
+  { value: 'current_month', label: 'This month' },
+  { value: 'last_3_months', label: 'Last 3 months' },
+  { value: 'all_time', label: 'All time' }
+] as const;
+
+const preset = ref<StatsParams['preset']>('current_month');
+const position = ref<PositionData | null>(null);
+const currency = ref('');
+const partial = ref(false);
+const unconvertedCurrencies = ref<string[]>([]);
+const isLoading = ref(false);
+
+const drillOpen = ref(false);
+const activeGroup = ref<DrillGroup | null>(null);
+
+const COLOR = {
+  income: 'var(--color-income, #16a34a)',
+  expense: 'var(--color-expense, #dc2626)',
+  returns: '#0ea5e9',
+  gifts: '#7c3aed',
+  loan: '#d97706',
+  principal: '#6366f1'
+};
+
+const effectiveParams = computed<StatsParams>(() =>
+  props.params ? { ...props.params } : { preset: preset.value }
+);
+
+const money = (n: number) =>
+  formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${currency.value}`);
+const signedMoney = (n: number) => (n > 0 ? '+' : '') + money(n);
+
+const netSurface = computed(() =>
+  (position.value?.net_worth_delta ?? 0) >= 0 ? 'surface--income' : 'surface--expense'
+);
+
+interface LedgerRow {
+  key: string;
+  label: string;
+  value: number;
+  color: string;
+  tone: string;
+  icon: unknown;
+  counts: boolean;
+  intents: string[];
+  type?: 'income' | 'expense';
+}
+
+const moneyIn = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'earned',
+        label: t('Earned income'),
+        value: p.earned_income,
+        color: COLOR.income,
+        tone: 'income',
+        icon: Wallet,
+        counts: true,
+        intents: ['regular'],
+        type: 'income'
+      },
+      {
+        key: 'returns',
+        label: t('Investment returns'),
+        value: p.investment_returns,
+        color: COLOR.returns,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: true,
+        intents: ['investment_return'],
+        type: 'income'
+      },
+      {
+        key: 'gift',
+        label: t('Gifts received'),
+        value: p.gifts_received,
+        color: COLOR.gifts,
+        tone: 'gift',
+        icon: Gift,
+        counts: true,
+        intents: ['gift'],
+        type: 'income'
+      },
+      {
+        key: 'loan_in',
+        label: t('Loan received'),
+        value: p.loan_received,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_received'],
+        type: 'income'
+      },
+      {
+        key: 'debt_in',
+        label: t('Debt repaid to you'),
+        value: p.debt_owed,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_owed'],
+        type: 'income'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const moneyOut = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'spend',
+        label: t('Discretionary spend'),
+        value: p.discretionary_spend,
+        color: COLOR.expense,
+        tone: 'expense',
+        icon: ShoppingBag,
+        counts: true,
+        intents: ['regular'],
+        type: 'expense'
+      },
+      {
+        key: 'invested',
+        label: t('Invested'),
+        value: p.investment_principal,
+        color: COLOR.principal,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: false,
+        intents: ['investment_buy'],
+        type: 'expense'
+      },
+      {
+        key: 'loan_out',
+        label: t('Loan repayment'),
+        value: p.loan_repayment,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_repayment'],
+        type: 'expense'
+      },
+      {
+        key: 'debt_out',
+        label: t('Debt settled'),
+        value: p.debt_settled,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_settled'],
+        type: 'expense'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const totalIn = computed(() => moneyIn.value.reduce((sum, r) => sum + r.value, 0));
+const totalOut = computed(() => moneyOut.value.reduce((sum, r) => sum + r.value, 0));
+const maxIn = computed(() => Math.max(1, ...moneyIn.value.map((r) => r.value)));
+const maxOut = computed(() => Math.max(1, ...moneyOut.value.map((r) => r.value)));
+const barPct = (row: LedgerRow, max: number) => `${Math.max(6, (row.value / max) * 100)}%`;
+
+const drillRange = computed<{ date_from?: string; date_to?: string }>(() => {
+  if (props.params?.start_date) {
+    return { date_from: props.params.start_date, date_to: props.params.end_date };
+  }
+  const iso = (d: Date) => d.toISOString().slice(0, 10);
+  const now = new Date();
+  if (preset.value === 'current_month') {
+    return { date_from: iso(new Date(now.getFullYear(), now.getMonth(), 1)), date_to: iso(now) };
+  }
+  if (preset.value === 'last_3_months') {
+    return {
+      date_from: iso(new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())),
+      date_to: iso(now)
+    };
+  }
+  return {};
+});
+
+function openDrill(row: LedgerRow) {
+  activeGroup.value = {
+    key: row.key,
+    label: row.label,
+    eyebrow: row.type === 'income' ? t('Money in') : t('Money out'),
+    intents: row.intents,
+    type: row.type,
+    tone: row.tone,
+    hint: row.counts ? undefined : t('Moves cash, but not your net worth.'),
+    metric: money(row.value),
+    icon: row.icon
+  };
+  drillOpen.value = true;
+}
+
+const hasAny = computed(() => totalIn.value > 0 || totalOut.value > 0);
+
+async function load() {
+  isLoading.value = true;
+  try {
+    const res = await statsApi.fetch({ ...effectiveParams.value, section: 'position' });
+    position.value = res.data?.position ?? null;
+    currency.value = (res.data as { currency?: string })?.currency || currency.value;
+    partial.value = !!res.data?.partial;
+    unconvertedCurrencies.value = res.data?.unconverted_currencies || [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(effectiveParams, load, { deep: true, immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.fp {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-5;
+}
+
+.fp-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+}
+
+.fp-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.fp-subtitle {
+  margin: 4px 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  max-width: 54ch;
+}
+
+.fp-presets {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  background: $bg-light;
+  border-radius: 999px;
+}
+
+.fp-preset {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: all $duration-base $easing-standard;
+
+  &--active {
+    background: $bg-white;
+    color: $text-primary;
+    box-shadow: $elevation-1;
+  }
+}
+
+.fp-note {
+  margin: 0;
+  padding: $spacing-3 $spacing-4;
+  border-radius: $radius-lg;
+  background: rgba(245, 158, 11, 0.12);
+  color: #92400e;
+  font-size: $font-size-sm;
+}
+
+.fp-hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-5;
+  padding: $spacing-5 $spacing-6;
+  background: var(--surface-bg);
+  border: 1px solid var(--color-border-light);
+  border-radius: 20px;
+  box-shadow: $elevation-1;
+}
+
+.fp-hero-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 240px;
+  flex: 1;
+}
+
+.fp-hero-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.fp-hero-value {
+  margin: 0;
+  font-size: 2.4rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.02;
+  color: var(--surface-deep);
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.8rem;
+  }
+}
+
+.fp-hero-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.fp-hero-sub {
+  margin: 2px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  max-width: 46ch;
+}
+
+.fp-hero-scales {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 16px;
+  background: var(--glass-bg-strong);
+}
+
+.fp-scale {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-scale-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $text-muted;
+}
+
+.fp-scale-value {
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-scale-arrow {
+  color: $text-muted;
+}
+
+.fp-worth {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-4;
+  padding: $spacing-4 $spacing-5;
+  text-decoration: none;
+  color: inherit;
+}
+
+.fp-worth-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-worth-value {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-split {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  color: $text-secondary;
+}
+
+.fp-worth-part {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: $font-size-sm;
+}
+
+.fp-worth-part-label {
+  color: $text-muted;
+}
+
+.fp-worth-part-value {
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-go {
+  color: $text-muted;
+}
+
+.fp-ledger {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-4;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.fp-col {
+  padding: $spacing-4 $spacing-5 $spacing-5;
+}
+
+.fp-col-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-3;
+  margin-bottom: $spacing-2;
+  border-bottom: 1px solid $border-light;
+}
+
+.fp-col-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+
+  &--in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &--out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.fp-col-title {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-secondary;
+}
+
+.fp-col-total {
+  margin-left: auto;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.fp-row {
+  display: grid;
+  grid-template-columns: 4px 28px 1fr auto 16px;
+  align-items: center;
+  gap: $spacing-3;
+  width: 100%;
+  padding: $spacing-3 0;
+  border: none;
+  border-bottom: 1px solid $border-light;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background: var(--color-bg-light, #f8fafc);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: 8px;
+  }
+}
+
+.fp-row--neutral {
+  opacity: 0.72;
+}
+
+.fp-row-marker {
+  width: 4px;
+  height: 28px;
+  border-radius: 999px;
+}
+
+.fp-row-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.fp-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.fp-row-label {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.fp-row-tag {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.fp-row-figure {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 96px;
+}
+
+.fp-row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-row-bar {
+  display: block;
+  width: 88px;
+  height: 5px;
+  border-radius: 999px;
+  background: $bg-light;
+  overflow: hidden;
+}
+
+.fp-row-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.fp-row-chevron {
+  color: $text-muted;
+}
+
+.fp-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.fp-up {
+  color: var(--color-income, #16a34a);
+}
+
+.fp-down {
+  color: var(--color-expense, #dc2626);
+}
+
+.fp-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  background: $bg-white;
+  border: 1px dashed $border-color;
+  border-radius: 18px;
+}
+
+.fp-empty-ico {
+  color: var(--color-border-medium, #cbd5e1);
+}
+</style>
diff --git a/components/holdings/HoldingForm.vue b/components/holdings/HoldingForm.vue
new file mode 100644
index 0000000..cfad809
--- /dev/null
+++ b/components/holdings/HoldingForm.vue
@@ -0,0 +1,391 @@
+<template>
+  <Transition name="modal">
+    <div v-if="open" class="modal-root" @click.self="$emit('close')">
+      <div class="modal-panel" role="dialog" aria-modal="true">
+        <header class="modal-head">
+          <h2 class="modal-title">{{ editing ? t('Edit holding') : t('Add holding') }}</h2>
+          <button class="icon-btn" :aria-label="t('Close')" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </header>
+
+        <div class="field">
+          <label>{{ t('Price source') }}</label>
+          <div class="seg">
+            <button
+              type="button"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'auto' }"
+              @click="form.price_source = 'auto'"
+            >
+              <Zap :size="14" /> {{ t('Live') }}
+            </button>
+            <button
+              type="button"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'manual' }"
+              @click="form.price_source = 'manual'"
+            >
+              <Pencil :size="14" /> {{ t('Manual') }}
+            </button>
+          </div>
+        </div>
+
+        <div v-if="form.price_source === 'auto'" class="field">
+          <label>{{ t('Coin') }}</label>
+          <input
+            v-model="coinQuery"
+            type="text"
+            :placeholder="t('Search Bitcoin, Ethereum...')"
+            @input="onSearch"
+          />
+          <ul v-if="results.length" class="coin-results">
+            <li v-for="c in results" :key="c.id">
+              <button type="button" class="coin-option" @click="pickCoin(c)">
+                <span class="coin-symbol">{{ c.symbol }}</span> {{ c.name }}
+              </button>
+            </li>
+          </ul>
+          <p v-if="form.external_ref" class="coin-picked">
+            {{ t('Priced automatically from CoinGecko') }} ({{ form.external_ref }})
+          </p>
+        </div>
+
+        <div class="field">
+          <label>{{ t('Name') }}</label>
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="t('Bitcoin, Apple, Rental flat...')"
+          />
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label
+              >{{ t('Symbol') }} <span class="opt">({{ t('optional') }})</span></label
+            >
+            <input v-model="form.symbol" type="text" placeholder="BTC" />
+          </div>
+          <div class="field">
+            <label>{{ t('Quantity') }}</label>
+            <input v-model.number="form.quantity" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label>{{ t('Currency') }}</label>
+            <select v-model="form.currency">
+              <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
+            </select>
+          </div>
+          <div v-if="form.price_source === 'manual'" class="field">
+            <label>{{ t('Price per unit') }}</label>
+            <input v-model.number="form.unit_price" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <p v-if="error" class="form-error">{{ error }}</p>
+
+        <button type="button" class="submit" :disabled="submitting" @click="submit">
+          {{ editing ? t('Save changes') : t('Add holding') }}
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue';
+import { X, Pencil, Zap } from 'lucide-vue-next';
+import { CURRENCIES } from '@/utils/currencies';
+import holdingsApi from '@/services/api/holdingsApi';
+import { useSharedData } from '~/composables/useSharedData';
+import type { Holding, HoldingPayload, CoinSearchResult } from '~/types/holding';
+
+const { t } = useI18n();
+const sharedData = useSharedData();
+const currencies = CURRENCIES;
+
+const props = defineProps<{ open: boolean; editing: Holding | null; submitting?: boolean }>();
+const emit = defineEmits<{ submit: [HoldingPayload]; close: [] }>();
+
+const blank = (): HoldingPayload => ({
+  name: '',
+  symbol: '',
+  quantity: 0,
+  currency: sharedData.getDefaultCurrency.value || 'USD',
+  unit_price: 0,
+  price_source: 'manual',
+  provider: null,
+  external_ref: null
+});
+
+const form = reactive<HoldingPayload>(blank());
+const coinQuery = ref('');
+const results = ref<CoinSearchResult[]>([]);
+const error = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return;
+    error.value = '';
+    results.value = [];
+    if (props.editing) {
+      Object.assign(form, {
+        name: props.editing.name,
+        symbol: props.editing.symbol ?? '',
+        quantity: props.editing.quantity,
+        currency: props.editing.currency,
+        unit_price: props.editing.unit_price,
+        price_source: props.editing.price_source,
+        provider: props.editing.provider ?? null,
+        external_ref: props.editing.external_ref ?? null
+      });
+      coinQuery.value = props.editing.external_ref ?? '';
+    } else {
+      Object.assign(form, blank());
+      coinQuery.value = '';
+    }
+  }
+);
+
+function onSearch() {
+  form.provider = null;
+  form.external_ref = null;
+  if (searchTimer) clearTimeout(searchTimer);
+  const q = coinQuery.value.trim();
+  if (q.length < 2) {
+    results.value = [];
+    return;
+  }
+  searchTimer = setTimeout(async () => {
+    results.value = await holdingsApi.search(q);
+  }, 300);
+}
+
+function pickCoin(c: CoinSearchResult) {
+  form.provider = 'coingecko';
+  form.external_ref = c.id;
+  form.symbol = c.symbol;
+  if (!form.name) form.name = c.name;
+  coinQuery.value = c.name;
+  results.value = [];
+}
+
+function submit() {
+  error.value = '';
+  if (!form.name.trim()) {
+    error.value = t('Name is required.');
+    return;
+  }
+  if (!form.quantity || form.quantity <= 0) {
+    error.value = t('Enter a quantity greater than 0.');
+    return;
+  }
+  if (form.price_source === 'auto' && !form.external_ref) {
+    error.value = t('Pick a coin to price it automatically.');
+    return;
+  }
+  emit('submit', { ...form });
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  @media (min-width: $breakpoint-md) {
+    align-items: center;
+    padding: $spacing-6;
+  }
+}
+
+.modal-panel {
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: $bg-white;
+  border-radius: 20px 20px 0 0;
+  padding: $spacing-5;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  box-shadow: $elevation-5;
+
+  @media (min-width: $breakpoint-md) {
+    border-radius: 20px;
+  }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 50%;
+  background: $bg-light;
+  color: $text-secondary;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+
+  label {
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+    color: $text-primary;
+  }
+
+  .opt {
+    color: $text-muted;
+    font-weight: $font-normal;
+  }
+
+  input,
+  select {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    height: 46px;
+    padding: 0 12px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    background: $bg-white;
+    color: $text-primary;
+    font-size: 15px;
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+    }
+  }
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-3;
+}
+
+.seg {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: $bg-light;
+  border-radius: 12px;
+}
+
+.seg-btn {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+}
+
+.seg-btn--active {
+  background: $bg-white;
+  color: $text-primary;
+  box-shadow: $elevation-1;
+}
+
+.coin-results {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.coin-option {
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: $text-primary;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.coin-symbol {
+  font-weight: $font-bold;
+  margin-right: 6px;
+}
+
+.coin-picked {
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.form-error {
+  margin: 0;
+  color: var(--color-expense, #dc2626);
+  font-size: $font-size-sm;
+}
+
+.submit {
+  height: 48px;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: #fff;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/components/imports/ImportSessionsList.vue b/components/imports/ImportSessionsList.vue
new file mode 100644
index 0000000..0e832ca
--- /dev/null
+++ b/components/imports/ImportSessionsList.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="sessions-list">
+    <h3 class="sessions-list__title">{{ t('Recent imports') }}</h3>
+    <ul class="sessions-list__items">
+      <li
+        v-for="session in sessions"
+        :key="session.id"
+        class="session-row"
+        role="button"
+        tabindex="0"
+        @click="$emit('open', session.id)"
+        @keydown.enter="$emit('open', session.id)"
+        @keydown.space.prevent="$emit('open', session.id)"
+      >
+        <FileText :size="18" class="session-row__icon" />
+        <div class="session-row__main">
+          <span class="session-row__name">{{ session.file_name }}</span>
+          <span class="session-row__meta">
+            {{ formatDate(session.created_at) }}
+            <template v-if="suggestionCount(session) !== null">
+              &middot; {{ suggestionCount(session) }} {{ t('suggestions') }}
+            </template>
+            <template v-if="duplicateCount(session) > 0">
+              &middot; {{ duplicateCount(session) }} {{ t('duplicates') }}
+            </template>
+          </span>
+        </div>
+        <span class="session-row__badge" :class="`is-${badge(session.status).tone}`">
+          <Loader2 v-if="badge(session.status).spin" :size="13" class="spin" />
+          {{ badge(session.status).label }}
+        </span>
+        <button
+          type="button"
+          class="session-delete"
+          :title="t('Delete import')"
+          :aria-label="t('Delete import')"
+          @click.stop="$emit('delete', session.id)"
+        >
+          <Trash2 :size="16" />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileText, Loader2, Trash2 } from 'lucide-vue-next';
+import type { ImportSession } from '~/types/import';
+
+defineProps<{ sessions: ImportSession[] }>();
+defineEmits<{ (e: 'open' | 'delete', id: number): void }>();
+
+const { t } = useI18n();
+
+const IN_PROGRESS = ['analyzing', 'extracting', 'enriching', 'checking'];
+
+const badge = (status: ImportSession['status']) => {
+  if (status === 'ready') return { label: t('Needs review'), tone: 'review', spin: false };
+  if (IN_PROGRESS.includes(status)) return { label: t('Analyzing'), tone: 'progress', spin: true };
+  if (status === 'confirmed') return { label: t('Imported'), tone: 'done', spin: false };
+  if (status === 'failed') return { label: t('Failed'), tone: 'failed', spin: false };
+  return { label: t('Expired'), tone: 'muted', spin: false };
+};
+
+const suggestionCount = (session: ImportSession): number | null => {
+  const total = session.metadata?.total_suggestions;
+  if (typeof total === 'number') return total;
+  return Array.isArray(session.suggestions) ? session.suggestions.length : null;
+};
+
+const duplicateCount = (session: ImportSession): number => {
+  const found = session.metadata?.duplicates_found;
+  return typeof found === 'number' ? found : 0;
+};
+
+const formatDate = (value: string): string => {
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.sessions-list {
+  margin-top: $spacing-5;
+
+  &__title {
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-secondary;
+    margin: 0 0 $spacing-3;
+  }
+
+  &__items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-2;
+  }
+}
+
+.session-row {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  background: $bg-white;
+  cursor: pointer;
+  text-align: left;
+  transition: $transition-base;
+
+  &:hover {
+    border-color: $primary;
+    background: $primary-light;
+  }
+
+  &:hover .session-delete,
+  &:focus-within .session-delete {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+
+  &__icon {
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__name {
+    font-weight: $font-semibold;
+    font-size: $font-size-sm;
+    color: $text-primary;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__meta {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  &__badge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-1;
+    padding: 2px 10px;
+    border-radius: 9999px;
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+
+    &.is-review {
+      background: $primary-light;
+      color: $primary;
+    }
+
+    &.is-progress {
+      background: $bg-gray;
+      color: $text-secondary;
+    }
+
+    &.is-done {
+      background: rgba(var(--color-success-rgb), 0.12);
+      color: $success;
+    }
+
+    &.is-failed {
+      background: rgba(var(--color-error-rgb), 0.1);
+      color: $error-color;
+    }
+
+    &.is-muted {
+      background: $bg-gray;
+      color: $text-muted;
+    }
+
+    .spin {
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+.session-delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  opacity: 0;
+  transition: $transition-base;
+
+  &:hover {
+    color: $error-color;
+    background: rgba(var(--color-error-rgb), 0.08);
+  }
+
+  @media (hover: none) {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/components/imports/ImportUpload.vue b/components/imports/ImportUpload.vue
index 9cab9e2..a863321 100644
--- a/components/imports/ImportUpload.vue
+++ b/components/imports/ImportUpload.vue
@@ -149,7 +149,11 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowUpTrayIcon, DocumentIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import {
+  Upload as ArrowUpTrayIcon,
+  FileText as DocumentIcon,
+  X as XMarkIcon
+} from 'lucide-vue-next';
 
 const { t } = useI18n();
 
diff --git a/components/modals/LearningModal.vue b/components/modals/LearningModal.vue
index d0089fe..3e7f734 100644
--- a/components/modals/LearningModal.vue
+++ b/components/modals/LearningModal.vue
@@ -8,7 +8,10 @@
       @click.stop
     >
       <div class="modal-header">
-        <h2 id="modal-title" class="modal-title">💡 {{ t('Learn Trakli') }}</h2>
+        <div class="modal-title-wrap">
+          <span class="modal-title-badge"><IconLearn class="modal-title-icon" /></span>
+          <h2 id="modal-title" class="modal-title">{{ t('Learn Trakli') }}</h2>
+        </div>
         <button class="close-btn" :aria-label="t('Close modal')" @click="closeModal">
           <XMarkIcon class="close-icon" />
         </button>
@@ -39,7 +42,9 @@
                 </div>
                 <p class="concept-description">{{ concept.description }}</p>
                 <div class="concept-tips">
-                  <span class="tips-label">💡 {{ t('Tips') }}:</span>
+                  <span class="tips-label"
+                    ><LightBulbIcon class="tips-label-icon" />{{ t('Tips') }}:</span
+                  >
                   <ul class="tips-list">
                     <li v-for="tip in concept.tips" :key="tip">{{ tip }}</li>
                   </ul>
@@ -52,7 +57,7 @@
             <h3 class="section-title">{{ t('Quick Tips') }}</h3>
             <div class="tips-grid">
               <div v-for="tip in quickTips" :key="tip.title" class="tip-card">
-                <div class="tip-emoji">{{ tip.emoji }}</div>
+                <div class="tip-emoji"><component :is="tip.icon" class="tip-icon" /></div>
                 <h4 class="tip-title">{{ tip.title }}</h4>
                 <p class="tip-text">{{ tip.text }}</p>
               </div>
@@ -91,6 +96,16 @@
           </div>
         </div>
       </div>
+
+      <div class="modal-footer">
+        <p class="modal-footer__hint">
+          {{ t('Still stuck? Ask the assistant anything about Trakli.') }}
+        </p>
+        <button class="ask-assistant-btn" @click="askAssistant">
+          <IconSpark class="ask-icon" />
+          {{ t('Ask the assistant') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -107,8 +122,15 @@ import {
   AcademicCapIcon,
   LightBulbIcon,
   CommandLineIcon,
-  QuestionMarkCircleIcon
+  QuestionMarkCircleIcon,
+  BoltIcon,
+  ChartBarIcon,
+  MagnifyingGlassIcon,
+  DevicePhoneMobileIcon,
+  CheckCircleIcon
 } from '@heroicons/vue/24/outline';
+import IconLearn from '~icons/solar/notebook-bold-duotone';
+import IconSpark from '~icons/solar/magic-stick-3-bold-duotone';
 
 const { t } = useI18n();
 
@@ -160,32 +182,32 @@ const concepts = computed(() => [
 
 const quickTips = computed(() => [
   {
-    emoji: '⚡',
+    icon: BoltIcon,
     title: t('Quick Entry'),
     text: t('learn.quicktips.quickentry')
   },
   {
-    emoji: '📊',
+    icon: ChartBarIcon,
     title: t('Dashboard Overview'),
     text: t('learn.quicktips.dashboard')
   },
   {
-    emoji: '🔍',
+    icon: MagnifyingGlassIcon,
     title: t('Search & Filter'),
     text: t('learn.quicktips.search')
   },
   {
-    emoji: '📱',
+    icon: DevicePhoneMobileIcon,
     title: t('Mobile Friendly'),
     text: t('learn.quicktips.mobile')
   },
   {
-    emoji: '🎯',
+    icon: CheckCircleIcon,
     title: t('Be Consistent'),
     text: t('learn.quicktips.consistent')
   },
   {
-    emoji: '💡',
+    icon: LightBulbIcon,
     title: t('Start Simple'),
     text: t('learn.quicktips.simple')
   }
@@ -230,6 +252,11 @@ const closeModal = () => {
   emit('close');
 };
 
+const askAssistant = () => {
+  emit('close');
+  navigateTo('/assistant');
+};
+
 const toggleFaq = (index) => {
   openFaq.value = openFaq.value === index ? null : index;
 };
@@ -275,6 +302,28 @@ const toggleFaq = (index) => {
   }
 }
 
+.modal-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.modal-title-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+}
+
+.modal-title-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
 .modal-title {
   font-size: 1.5rem;
   font-weight: 700;
@@ -286,6 +335,47 @@ const toggleFaq = (index) => {
   }
 }
 
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid $border-color;
+  background: $bg-light;
+}
+
+.modal-footer__hint {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.ask-assistant-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.1rem;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: $text-inverse;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: background $duration-fast $easing-standard;
+
+  &:hover {
+    background: $primary-hover;
+  }
+
+  .ask-icon {
+    width: 17px;
+    height: 17px;
+  }
+}
+
 .close-btn {
   background: none;
   border: none;
@@ -384,7 +474,6 @@ const toggleFaq = (index) => {
   border: 1px solid $border-gray;
   border-radius: $radius-xl;
   padding: 1.5rem;
-  border-left: 4px solid $primary;
 }
 
 .concept-header {
@@ -415,10 +504,18 @@ const toggleFaq = (index) => {
 
 .concept-tips {
   .tips-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
     font-weight: 600;
     color: $primary;
     font-size: 0.875rem;
   }
+
+  .tips-label-icon {
+    width: 15px;
+    height: 15px;
+  }
 }
 
 .tips-list {
@@ -466,10 +563,22 @@ const toggleFaq = (index) => {
 }
 
 .tip-emoji {
-  font-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: $primary-light;
   margin-bottom: 1rem;
 }
 
+.tip-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
 .tip-title {
   font-size: 1rem;
   font-weight: 600;
diff --git a/components/onboarding/OnboardingWizard.vue b/components/onboarding/OnboardingWizard.vue
index 3af09af..52d96e7 100644
--- a/components/onboarding/OnboardingWizard.vue
+++ b/components/onboarding/OnboardingWizard.vue
@@ -28,7 +28,7 @@
                 <h4 class="benefits-title">Why this matters:</h4>
                 <div class="benefits-grid">
                   <div v-for="benefit in step.benefits" :key="benefit.text" class="benefit-item">
-                    <span class="benefit-icon">{{ benefit.icon }}</span>
+                    <CheckCircleIcon class="benefit-icon" />
                     <span class="benefit-text">{{ benefit.text }}</span>
                   </div>
                 </div>
@@ -88,6 +88,7 @@ import {
   UsersIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CheckCircleIcon,
   PlusIcon
 } from '@heroicons/vue/24/outline';
 
@@ -104,9 +105,9 @@ const steps = [
     buttonText: 'Add transaction',
     action: 'add-transaction',
     benefits: [
-      { icon: '💰', text: 'See your balance change in real-time' },
-      { icon: '📊', text: 'Get instant insights into your spending' },
-      { icon: '🎯', text: 'Start building healthy money habits' }
+      { text: 'See your balance change in real-time' },
+      { text: 'Get instant insights into your spending' },
+      { text: 'Start building healthy money habits' }
     ]
   },
   {
@@ -117,9 +118,9 @@ const steps = [
     buttonText: 'Setup wallets',
     action: 'setup-wallets',
     benefits: [
-      { icon: '🏦', text: 'Track all your accounts in one place' },
-      { icon: '💳', text: 'See which payment method you use most' },
-      { icon: '📈', text: 'Monitor your total net worth' }
+      { text: 'Track all your accounts in one place' },
+      { text: 'See which payment method you use most' },
+      { text: 'Monitor your total net worth' }
     ]
   },
   {
@@ -130,9 +131,9 @@ const steps = [
     buttonText: 'Manage categories',
     action: 'manage-categories',
     benefits: [
-      { icon: '🏷️', text: 'Identify your biggest spending areas' },
-      { icon: '📋', text: 'Create budgets for specific categories' },
-      { icon: '🔍', text: 'Find transactions quickly with organized labels' }
+      { text: 'Identify your biggest spending areas' },
+      { text: 'Create budgets for specific categories' },
+      { text: 'Find transactions quickly with organized labels' }
     ]
   },
   {
@@ -143,9 +144,9 @@ const steps = [
     buttonText: 'Add parties',
     action: 'add-parties',
     benefits: [
-      { icon: '🛒', text: 'See how much you spend at each store' },
-      { icon: '👥', text: 'Track money lent to friends and family' },
-      { icon: '📊', text: 'Analyze your vendor relationships' }
+      { text: 'See how much you spend at each store' },
+      { text: 'Track money lent to friends and family' },
+      { text: 'Analyze your vendor relationships' }
     ]
   },
   {
@@ -156,9 +157,9 @@ const steps = [
     buttonText: 'Get started',
     action: 'complete',
     benefits: [
-      { icon: '🎉', text: 'Access your personalized dashboard' },
-      { icon: '📱', text: 'Start tracking on the go' },
-      { icon: '💡', text: 'Discover new insights about your money' }
+      { text: 'Access your personalized dashboard' },
+      { text: 'Start tracking on the go' },
+      { text: 'Discover new insights about your money' }
     ]
   }
 ];
@@ -341,9 +342,9 @@ const previousStep = () => {
 
 .step-benefits {
   background: $bg-slate;
-  border-radius: $radius-lg;
+  border: 1px solid $border-gray;
+  border-radius: $radius-xl;
   padding: 1rem;
-  border-left: 4px solid $primary;
 }
 
 .benefits-title {
@@ -367,7 +368,9 @@ const previousStep = () => {
   gap: 0.75rem;
 
   .benefit-icon {
-    font-size: 1.125rem;
+    width: 18px;
+    height: 18px;
+    color: $primary;
     flex-shrink: 0;
   }
 
diff --git a/components/settings/SettingsConnections.vue b/components/settings/SettingsConnections.vue
new file mode 100644
index 0000000..eea48c3
--- /dev/null
+++ b/components/settings/SettingsConnections.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="mcp-settings">
+    <p class="section-intro">
+      {{
+        t(
+          'Connect an AI client like Claude Desktop or Cursor to your Trakli data over the Model Context Protocol.'
+        )
+      }}
+    </p>
+
+    <div class="form-group form-group--full">
+      <label class="form-label">{{ t('MCP endpoint') }}</label>
+      <div class="copy-row">
+        <input class="form-input" :value="endpoint" readonly />
+        <button
+          type="button"
+          class="icon-btn"
+          :title="t('Copy')"
+          @click="copy(endpoint, 'endpoint')"
+        >
+          <Check v-if="copied === 'endpoint'" class="inline-icon" />
+          <Copy v-else class="inline-icon" />
+        </button>
+      </div>
+      <p class="hint">
+        {{ t('Add this URL to your AI client and authenticate with one of the tokens below.') }}
+      </p>
+    </div>
+
+    <div class="tokens-section">
+      <h3 class="tokens-title">{{ t('Access tokens') }}</h3>
+
+      <div class="create-row">
+        <input
+          v-model="newName"
+          class="form-input"
+          :placeholder="t('Token name, e.g. Claude Desktop')"
+          @keyup.enter="generate"
+        />
+        <TButton variant="primary" :loading="creating" @click="generate">
+          {{ t('Generate token') }}
+        </TButton>
+      </div>
+
+      <ul v-if="tokens.length" class="token-list">
+        <li v-for="tk in tokens" :key="tk.id" class="token-item">
+          <div class="token-info">
+            <span class="token-name">{{ tk.name }}</span>
+            <span class="token-meta">
+              {{
+                tk.last_used_at
+                  ? t('Last used') + ' ' + formatDate(tk.last_used_at)
+                  : t('Never used')
+              }}
+            </span>
+          </div>
+          <button type="button" class="icon-btn danger" :title="t('Revoke')" @click="revoke(tk)">
+            <Trash2 class="inline-icon" />
+          </button>
+        </li>
+      </ul>
+      <p v-else-if="!loading" class="empty">{{ t('No tokens yet.') }}</p>
+    </div>
+
+    <div v-if="createdToken" class="modal-backdrop">
+      <div class="modal">
+        <h3 class="modal-title">{{ t('Copy your token now') }}</h3>
+        <p class="modal-subtitle">
+          {{ t('This token is shown only once. Store it somewhere safe before closing.') }}
+        </p>
+        <div class="copy-row">
+          <input class="form-input token-reveal" :value="createdToken.token" readonly />
+          <button
+            type="button"
+            class="icon-btn"
+            :title="t('Copy')"
+            @click="copy(createdToken.token, 'token')"
+          >
+            <Check v-if="copied === 'token'" class="inline-icon" />
+            <Copy v-else class="inline-icon" />
+          </button>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="submit-btn" @click="createdToken = null">
+            {{ t('Done') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { Copy, Check, Trash2 } from 'lucide-vue-next';
+import TButton from '@/components/TButton.vue';
+import { mcpApi, type McpToken, type McpTokenCreated } from '@/services/api/mcpApi';
+
+const { t } = useI18n();
+const config = useRuntimeConfig();
+
+const endpoint = computed(() => {
+  const base = config.public.apiBase as string;
+  try {
+    return new URL(base).origin + '/mcp';
+  } catch {
+    return base.replace(/\/api\/v1\/?$/, '') + '/mcp';
+  }
+});
+
+const tokens = ref<McpToken[]>([]);
+const loading = ref(false);
+const creating = ref(false);
+const newName = ref('');
+const createdToken = ref<McpTokenCreated | null>(null);
+const copied = ref('');
+
+const load = async () => {
+  loading.value = true;
+  try {
+    tokens.value = await mcpApi.listTokens();
+  } finally {
+    loading.value = false;
+  }
+};
+
+const generate = async () => {
+  const name = newName.value.trim();
+  if (!name || creating.value) return;
+  creating.value = true;
+  try {
+    createdToken.value = await mcpApi.createToken(name);
+    newName.value = '';
+    await load();
+  } finally {
+    creating.value = false;
+  }
+};
+
+const revoke = async (tk: McpToken) => {
+  await mcpApi.revokeToken(tk.id);
+  await load();
+};
+
+const copy = async (text: string, which: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    copied.value = which;
+    setTimeout(() => (copied.value = ''), 1500);
+  } catch {
+    // Clipboard unavailable; the field is selectable so the user can copy manually.
+  }
+};
+
+const formatDate = (iso: string) => new Date(iso).toLocaleDateString();
+
+onMounted(load);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.section-intro {
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin-bottom: 1rem;
+}
+
+.copy-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.icon-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: $radius-lg;
+  border: 1px solid $border-light;
+  color: $text-primary;
+  transition: $transition-base;
+
+  &:hover {
+    background: $bg-gray;
+  }
+
+  &.danger:hover {
+    color: $error-color;
+  }
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.hint {
+  margin-top: 0.5rem;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.tokens-section {
+  margin-top: 1.5rem;
+}
+
+.tokens-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  margin-bottom: 0.75rem;
+}
+
+.create-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.token-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.token-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+}
+
+.token-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.token-name {
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.token-meta {
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.empty {
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.token-reveal {
+  font-family: monospace;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background: $bg-white;
+  width: min(520px, calc(100% - 2rem));
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+}
+
+.modal-title {
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  margin-bottom: 0.5rem;
+}
+
+.modal-subtitle {
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin-bottom: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.submit-btn {
+  padding: 0.5rem 1.25rem;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: $bg-white;
+  font-weight: $font-semibold;
+  transition: $transition-base;
+
+  &:hover {
+    opacity: 0.92;
+  }
+}
+</style>
diff --git a/components/settings/SettingsDisplay.vue b/components/settings/SettingsDisplay.vue
index 5bd474d..f726280 100644
--- a/components/settings/SettingsDisplay.vue
+++ b/components/settings/SettingsDisplay.vue
@@ -9,15 +9,70 @@
         <span class="toggle-circle" />
       </button>
     </div>
+
+    <div class="toggle-row" style="margin-top: 0.75rem">
+      <div class="toggle-label">
+        <MessageSquare class="inline-icon" />
+        <span>{{ t('Chat-first landing') }}</span>
+      </div>
+      <button
+        type="button"
+        class="toggle"
+        :class="{ 'toggle--on': chatFirst }"
+        :disabled="savingLanding"
+        @click="toggleLanding"
+      >
+        <span class="toggle-circle" />
+      </button>
+    </div>
+    <p class="hint">{{ t('Open the AI chat as your home screen instead of the dashboard.') }}</p>
   </div>
 </template>
 
 <script setup>
-import { Sun, Moon } from 'lucide-vue-next';
+import { ref, onMounted } from 'vue';
+import { Sun, Moon, MessageSquare } from 'lucide-vue-next';
 import { useTheme } from '~/composables/useTheme';
+import { useNotifications } from '~/composables/useNotifications';
+import configurationsApi from '@/services/api/configurationsApi';
+import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
 
 const { t } = useI18n();
 const { isDark, toggleTheme } = useTheme();
+const { showError } = useNotifications();
+
+const chatFirst = ref(true);
+const savingLanding = ref(false);
+
+onMounted(async () => {
+  try {
+    const res = await configurationsApi.fetchAll();
+    const items = res?.data || res || [];
+    const item = (Array.isArray(items) ? items : []).find(
+      (i) => i.key === CONFIGURATION_KEYS.LANDING_MODE
+    );
+    chatFirst.value = item ? item.value === 'chat' : false;
+  } catch {
+    chatFirst.value = false;
+  }
+});
+
+const toggleLanding = async () => {
+  savingLanding.value = true;
+  const next = !chatFirst.value;
+  try {
+    await configurationsApi.update(CONFIGURATION_KEYS.LANDING_MODE, {
+      value: next ? 'chat' : 'dashboard',
+      type: 'string'
+    });
+    chatFirst.value = next;
+  } catch {
+    // Leave the toggle on its previous value and tell the user it didn't save.
+    showError(t('Could not save that setting. Please try again.'));
+  } finally {
+    savingLanding.value = false;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -76,6 +131,18 @@ const { isDark, toggleTheme } = useTheme();
   height: 18px;
 }
 
+.hint {
+  margin: 0.5rem 0 0;
+  padding: 0 1rem;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.toggle:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 .actions {
   margin-top: 1rem;
   display: flex;
diff --git a/components/transactions/TransactionsSpreadsheet.vue b/components/transactions/TransactionsSpreadsheet.vue
index 407a961..40b5ea5 100644
--- a/components/transactions/TransactionsSpreadsheet.vue
+++ b/components/transactions/TransactionsSpreadsheet.vue
@@ -7,10 +7,26 @@
           <h2>{{ t('Transactions spreadsheet') }}</h2>
           <span class="count">
             {{ t('{count} rows', { count: filteredRows.length }) }}
+            <span v-if="isStreaming" class="loading-more">· {{ t('loading…') }}</span>
           </span>
         </div>
         <div class="spreadsheet-actions">
-          <input v-model="search" type="search" class="search" :placeholder="t('Search rows...')" />
+          <input
+            v-model="searchInput"
+            type="search"
+            class="search"
+            :placeholder="t('Search rows...')"
+          />
+          <button
+            type="button"
+            class="action-btn"
+            :disabled="!filteredRows.length"
+            :aria-label="t('Export CSV')"
+            :title="t('Export CSV')"
+            @click="exportCsv"
+          >
+            <ArrowDownTrayIcon class="icon" />
+          </button>
           <button type="button" class="close-btn" :aria-label="t('Close')" @click="$emit('close')">
             <XMarkIcon class="icon" />
           </button>
@@ -31,18 +47,31 @@
           <thead>
             <tr>
               <th class="col-idx">#</th>
-              <th class="col-date">{{ t('Date') }}</th>
-              <th class="col-type">{{ t('Type') }}</th>
-              <th class="col-amount">{{ t('Amount') }}</th>
-              <th class="col-currency">{{ t('Currency') }}</th>
-              <th class="col-desc">{{ t('Description') }}</th>
-              <th class="col-cat">{{ t('Categories') }}</th>
-              <th class="col-wallet">{{ t('Wallet') }}</th>
-              <th class="col-party">{{ t('Party') }}</th>
+              <th
+                v-for="col in columns"
+                :key="col.key"
+                :class="[col.cls, 'sortable']"
+                :aria-sort="
+                  sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'
+                "
+                @click="toggleSort(col.key)"
+              >
+                <span class="th-inner">
+                  {{ col.label }}
+                  <ChevronUpIcon
+                    v-if="sortKey === col.key && sortDir === 'asc'"
+                    class="sort-icon"
+                  />
+                  <ChevronDownIcon
+                    v-else-if="sortKey === col.key && sortDir === 'desc'"
+                    class="sort-icon"
+                  />
+                </span>
+              </th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, i) in filteredRows" :key="row.id" :class="`row--${row.type}`">
+            <tr v-for="(row, i) in sortedRows" :key="row.id" :class="`row--${row.type}`">
               <td class="col-idx">{{ i + 1 }}</td>
               <td class="col-date">{{ formatDate(row.datetime) }}</td>
               <td class="col-type">
@@ -85,8 +114,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { TableCellsIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import {
+  TableCellsIcon,
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  ChevronUpIcon,
+  ChevronDownIcon
+} from '@heroicons/vue/24/outline';
 import { api } from '@/services/api';
 
 const { t } = useI18n();
@@ -94,19 +129,52 @@ const emit = defineEmits<{ (e: 'close'): void }>();
 
 const rows = ref<any[]>([]);
 const isLoading = ref(true);
+const isStreaming = ref(false);
 const error = ref('');
+const searchInput = ref('');
 const search = ref('');
 
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+watch(searchInput, (value) => {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    search.value = value;
+  }, 200);
+});
+
+const PAGE_SIZE = 100;
+const MAX_PAGES = 50;
+// Guards against an out-of-order load overwriting a newer one.
+let loadToken = 0;
+
 async function loadAll() {
+  const token = ++loadToken;
   isLoading.value = true;
+  isStreaming.value = true;
   error.value = '';
+  rows.value = [];
   try {
-    const response = await api.transactions.fetchAll({ limit: 500, page: 1 });
-    rows.value = Array.isArray(response?.data) ? response.data : [];
+    let page = 1;
+    while (page <= MAX_PAGES) {
+      const response = await api.transactions.fetchAll({ limit: PAGE_SIZE, page });
+      if (token !== loadToken) return;
+      const chunk = Array.isArray(response?.data) ? response.data : [];
+      // Append per page so the first chunk paints immediately and the totals
+      // climb as later pages stream in, rather than blocking on the full set.
+      rows.value = rows.value.concat(chunk);
+      isLoading.value = false;
+      const lastPage = Number(response?.last_page) || 1;
+      if (chunk.length < PAGE_SIZE || page >= lastPage) break;
+      page += 1;
+    }
   } catch (e) {
+    if (token !== loadToken) return;
     error.value = e instanceof Error ? e.message : t('Failed to load');
   } finally {
-    isLoading.value = false;
+    if (token === loadToken) {
+      isLoading.value = false;
+      isStreaming.value = false;
+    }
   }
 }
 
@@ -138,6 +206,117 @@ const totalExpense = computed(() =>
   filteredRows.value.filter((r) => r.type === 'expense').reduce((s, r) => s + Number(r.amount), 0)
 );
 
+type SortKey =
+  | 'datetime'
+  | 'type'
+  | 'amount'
+  | 'currency'
+  | 'description'
+  | 'categories'
+  | 'wallet'
+  | 'party';
+
+const sortKey = ref<SortKey | null>(null);
+const sortDir = ref<'asc' | 'desc'>('asc');
+
+const sortValue = (row: any, key: SortKey): string | number => {
+  switch (key) {
+    case 'datetime':
+      return row.datetime || '';
+    case 'type':
+      return row.type || '';
+    case 'amount':
+      return Number(row.amount) || 0;
+    case 'currency':
+      return row.wallet?.currency || '';
+    case 'description':
+      return (row.description || '').toLowerCase();
+    case 'categories':
+      return categoriesText(row).toLowerCase();
+    case 'wallet':
+      return (row.wallet?.name || '').toLowerCase();
+    case 'party':
+      return (row.party?.name || '').toLowerCase();
+    default:
+      return '';
+  }
+};
+
+const sortedRows = computed(() => {
+  const key = sortKey.value;
+  if (!key) return filteredRows.value;
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  return [...filteredRows.value].sort((a, b) => {
+    const av = sortValue(a, key);
+    const bv = sortValue(b, key);
+    if (av < bv) return -1 * dir;
+    if (av > bv) return 1 * dir;
+    return 0;
+  });
+});
+
+const columns = computed<{ key: SortKey; label: string; cls: string }[]>(() => [
+  { key: 'datetime', label: t('Date'), cls: 'col-date' },
+  { key: 'type', label: t('Type'), cls: 'col-type' },
+  { key: 'amount', label: t('Amount'), cls: 'col-amount' },
+  { key: 'currency', label: t('Currency'), cls: 'col-currency' },
+  { key: 'description', label: t('Description'), cls: 'col-desc' },
+  { key: 'categories', label: t('Categories'), cls: 'col-cat' },
+  { key: 'wallet', label: t('Wallet'), cls: 'col-wallet' },
+  { key: 'party', label: t('Party'), cls: 'col-party' }
+]);
+
+const toggleSort = (key: SortKey) => {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortKey.value = key;
+    sortDir.value = 'asc';
+  }
+};
+
+const csvEscape = (value: unknown): string => {
+  const s = String(value ?? '');
+  return /["\n,]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+};
+
+const exportCsv = () => {
+  const headers = [
+    t('Date'),
+    t('Type'),
+    t('Amount'),
+    t('Currency'),
+    t('Description'),
+    t('Categories'),
+    t('Wallet'),
+    t('Party')
+  ];
+  const lines = [headers.map(csvEscape).join(',')];
+  for (const r of sortedRows.value) {
+    lines.push(
+      [
+        formatDate(r.datetime),
+        r.type,
+        Number(r.amount) || 0,
+        r.wallet?.currency ?? '',
+        r.description ?? '',
+        categoriesText(r),
+        r.wallet?.name ?? '',
+        r.party?.name ?? ''
+      ]
+        .map(csvEscape)
+        .join(',')
+    );
+  }
+  const blob = new Blob(['' + lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'transactions.csv';
+  link.click();
+  URL.revokeObjectURL(url);
+};
+
 const formatDate = (iso?: string) => {
   if (!iso) return '';
   const d = new Date(iso);
@@ -265,6 +444,36 @@ onUnmounted(() => {
   }
 }
 
+.action-btn {
+  background: transparent;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 6px;
+  cursor: pointer;
+  color: $text-muted;
+  display: inline-flex;
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    color: $primary;
+    border-color: $primary-muted;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.loading-more {
+  color: $primary;
+  font-style: italic;
+}
+
 .state {
   display: flex;
   flex-direction: column;
@@ -319,6 +528,27 @@ onUnmounted(() => {
     letter-spacing: 0.05em;
     border-bottom: 1px solid $border-color;
     z-index: 2;
+
+    &.sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+
+    .th-inner {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .sort-icon {
+      width: 12px;
+      height: 12px;
+      color: $primary;
+    }
   }
 
   tbody td {
diff --git a/composables/useAiChats.ts b/composables/useAiChats.ts
index 1ea789c..595223e 100644
--- a/composables/useAiChats.ts
+++ b/composables/useAiChats.ts
@@ -15,9 +15,54 @@ export function useAiChats() {
   // rapidly switches between chats.
   let openToken = 0;
 
-  // Stop polling after 90s; anything still pending after that is stuck
-  // server-side (worker crash, timeout, etc.), not actively in progress.
-  const POLL_STUCK_THRESHOLD_MS = 90_000;
+  // Real-time transport. When Reverb is configured, chat turns push their
+  // progress and completion over a private channel; polling stays on as the
+  // reconnect fallback.
+  let nuxtApp: ReturnType<typeof useNuxtApp> | null = null;
+  try {
+    nuxtApp = useNuxtApp();
+  } catch {
+    // Outside a Nuxt runtime (e.g. unit tests) sockets are simply unavailable;
+    // the app falls back to polling.
+  }
+  let subscribedId: number | null = null;
+
+  interface TurnEvent {
+    message_id: number;
+    kind: string;
+    label: string | null;
+  }
+
+  function onTurnEvent(e: TurnEvent) {
+    const msg = currentSession.value?.messages?.find((m) => m.id === e.message_id);
+    if (!msg) return;
+    if (e.kind === 'progress' && e.label) {
+      msg.progress = [...(msg.progress ?? []), e.label];
+    } else if (e.kind === 'settled') {
+      refreshCurrent();
+    }
+  }
+
+  function subscribeToSession(id: number) {
+    const echo = nuxtApp?.$echo;
+    if (!echo || subscribedId === id) return;
+    unsubscribe();
+    subscribedId = id;
+    echo.private(`chat-session.${id}`).listen('.turn', onTurnEvent);
+  }
+
+  function unsubscribe() {
+    const echo = nuxtApp?.$echo;
+    if (echo && subscribedId !== null) {
+      echo.leave(`chat-session.${subscribedId}`);
+    }
+    subscribedId = null;
+  }
+
+  // Keep polling well past the backend's worst case (agent runs can take a
+  // couple of minutes: multi-step LLM + SmartQL). Only past this is a message
+  // genuinely stuck server-side (worker crash) rather than still in progress.
+  const POLL_STUCK_THRESHOLD_MS = 240_000;
 
   const isPolling = computed(() => {
     if (!currentSession.value?.messages) return false;
@@ -47,36 +92,64 @@ export function useAiChats() {
     // A newer open / new-chat call has superseded us; drop this response.
     if (token !== openToken) return;
     currentSession.value = session;
+    if (session) subscribeToSession(session.id);
     maybeStartPolling();
   }
 
   function newSession() {
     openToken += 1;
     stopPolling();
+    unsubscribe();
     currentSession.value = null;
   }
 
-  async function send(message: string, formatHint?: FormatType) {
-    if (!message.trim() || isSending.value) return;
+  async function send(
+    message: string,
+    formatHint?: FormatType,
+    files?: File[],
+    documentType?: string | null
+  ) {
+    const hasFiles = !!(files && files.length);
+    if ((!message.trim() && !hasFiles) || isSending.value) return;
     isSending.value = true;
     error.value = null;
 
+    // A file with no caption still needs a non-empty message (the server requires
+    // one). Name what was sent; the agent gets the file context separately.
+    const text = message.trim() || `Attached ${files!.map((f) => f.name).join(', ')}`;
+
     try {
+      let userMessageId: number | null = null;
+
       if (!currentSession.value) {
-        const created = await aiApi.createSession({ message, format_hint: formatHint });
+        const created = await aiApi.createSession({
+          message: text,
+          format_hint: formatHint,
+          defer_processing: hasFiles
+        });
         if (created) {
           currentSession.value = created;
           sessions.value = [created, ...sessions.value];
+          subscribeToSession(created.id);
+          userMessageId = created.messages?.find((m) => m.role === 'user')?.id ?? null;
         }
       } else {
         const pair = await aiApi.addMessage(currentSession.value.id, {
-          message,
-          format_hint: formatHint
+          message: text,
+          format_hint: formatHint,
+          defer_processing: hasFiles
         });
         if (pair && currentSession.value.messages) {
           currentSession.value.messages.push(pair.user, pair.assistant);
+          userMessageId = pair.user.id;
         }
       }
+
+      if (files && files.length && currentSession.value && userMessageId) {
+        await aiApi.uploadFiles(currentSession.value.id, userMessageId, files, documentType);
+        await refreshCurrent();
+      }
+
       maybeStartPolling();
     } catch (e) {
       error.value = (e as Error).message || 'Failed to send message';
@@ -91,6 +164,7 @@ export function useAiChats() {
     if (currentSession.value?.id === id) {
       currentSession.value = null;
       stopPolling();
+      unsubscribe();
     }
   }
 
@@ -142,6 +216,7 @@ export function useAiChats() {
 
   onUnmounted(() => {
     stopPolling();
+    unsubscribe();
     if (typeof document !== 'undefined') {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     }
diff --git a/composables/useCanvasExport.ts b/composables/useCanvasExport.ts
new file mode 100644
index 0000000..31c4ca4
--- /dev/null
+++ b/composables/useCanvasExport.ts
@@ -0,0 +1,81 @@
+import aiApi from '@/services/api/aiApi';
+
+/**
+ * Canvas export. Print/PDF is fully client-side (clones the rendered canvas, incl.
+ * chart SVGs, into a print window), so it needs no backend. Other formats go
+ * through the backend exporter abstraction, so adding them later is a one-liner.
+ */
+export function useCanvasExport() {
+  function slug(title: string): string {
+    return (
+      (title || 'document')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '') || 'document'
+    );
+  }
+
+  function printCanvas(bodyEl: HTMLElement | null | undefined, title: string): void {
+    if (!bodyEl || typeof window === 'undefined' || typeof document === 'undefined') return;
+
+    // Print the live, already-styled report in place rather than in a popup. A
+    // popup has to reload the app's styles asynchronously, so the auto-print
+    // kept snapshotting the page before they applied. Here a clone of the
+    // rendered report is appended as a top-level element (so no scrollable or
+    // positioned ancestor can clip it) and @media print shows only that, using
+    // the app's real styles that are already loaded and painted.
+    const portal = document.createElement('div');
+    portal.className = 'print-canvas-portal';
+
+    const heading = document.createElement('h1');
+    heading.textContent = title;
+    portal.appendChild(heading);
+    portal.appendChild(bodyEl.cloneNode(true));
+    document.body.appendChild(portal);
+
+    // A document should print light regardless of the on-screen theme.
+    const html = document.documentElement;
+    const wasDark = html.classList.contains('dark');
+    if (wasDark) html.classList.remove('dark');
+    document.body.classList.add('printing-canvas');
+
+    let cleaned = false;
+    const cleanup = () => {
+      if (cleaned) return;
+      cleaned = true;
+      document.body.classList.remove('printing-canvas');
+      if (wasDark) html.classList.add('dark');
+      portal.remove();
+      window.removeEventListener('afterprint', cleanup);
+    };
+    window.addEventListener('afterprint', cleanup);
+
+    // A tick lets the print classes apply before the dialog opens; the trailing
+    // timeout is a safety net for browsers that do not fire afterprint.
+    window.setTimeout(() => {
+      window.print();
+      window.setTimeout(cleanup, 1000);
+    }, 50);
+  }
+
+  async function downloadExport(
+    sessionId: number,
+    messageId: number,
+    title: string,
+    format = 'md'
+  ): Promise<void> {
+    const api = useApi();
+    const content = await api<string>(aiApi.exportCanvasUrl(sessionId, messageId, format), {
+      responseType: 'text'
+    });
+    const blob = new Blob([content], { type: 'text/markdown' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${slug(title)}.${format}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return { printCanvas, downloadExport };
+}
diff --git a/composables/useChatSurface.ts b/composables/useChatSurface.ts
new file mode 100644
index 0000000..eb51e17
--- /dev/null
+++ b/composables/useChatSurface.ts
@@ -0,0 +1,80 @@
+import { ref, nextTick } from 'vue';
+import { useAiChats } from '@/composables/useAiChats';
+import type { ChatBlock } from '@/services/api/aiApi';
+
+/**
+ * Shared chat-surface logic used by both the landing and full chat modes of
+ * ChatExperience: composer input, attachments, canvas open state, fullscreen,
+ * scrolling, and the send/reload handlers. Wraps useAiChats so the two modes
+ * differ only in shell (hero + dropdown vs collapsible history sidebar).
+ */
+export function useChatSurface() {
+  const chats = useAiChats();
+
+  const input = ref('');
+  const pendingFiles = ref<File[]>([]);
+  const openCanvas = ref<ChatBlock | null>(null);
+  const canvasMessageId = ref<number | null>(null);
+  const isFullscreen = ref(false);
+  const chatWindow = ref<HTMLElement | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const composerEl = ref<any>(null);
+
+  const scrollToBottom = () => {
+    nextTick(() => {
+      if (chatWindow.value) chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
+    });
+  };
+
+  const handleAttach = (files: File[]) => {
+    pendingFiles.value = files;
+  };
+
+  const handleSubmit = async () => {
+    const message = input.value.trim();
+    const files = pendingFiles.value.slice();
+    if (!message && files.length === 0) return;
+    const documentType = (composerEl.value?.documentType as string | null) ?? null;
+    input.value = '';
+    pendingFiles.value = [];
+    composerEl.value?.clearFiles?.();
+    await chats.send(message, undefined, files, documentType);
+    scrollToBottom();
+  };
+
+  const reloadCurrent = () => {
+    if (chats.currentSession.value?.id) chats.openSession(chats.currentSession.value.id);
+  };
+
+  const onOpenCanvas = (payload: { canvas: ChatBlock; messageId?: number }) => {
+    openCanvas.value = payload.canvas;
+    canvasMessageId.value = payload.messageId ?? null;
+  };
+
+  const closeCanvas = () => {
+    openCanvas.value = null;
+    canvasMessageId.value = null;
+  };
+
+  const toggleFullscreen = () => {
+    isFullscreen.value = !isFullscreen.value;
+  };
+
+  return {
+    ...chats,
+    input,
+    pendingFiles,
+    openCanvas,
+    canvasMessageId,
+    isFullscreen,
+    chatWindow,
+    composerEl,
+    scrollToBottom,
+    handleAttach,
+    handleSubmit,
+    reloadCurrent,
+    onOpenCanvas,
+    closeCanvas,
+    toggleFullscreen
+  };
+}
diff --git a/composables/useDataManager.ts b/composables/useDataManager.ts
index e776355..fa84e47 100644
--- a/composables/useDataManager.ts
+++ b/composables/useDataManager.ts
@@ -29,15 +29,12 @@ export const useDataManager = () => {
     error.value = null;
 
     try {
-      // Clear existing data to ensure loading state shows properly
-      const { clearAllData, loadAllData } = useSharedData();
-      const { clearTransactions, refreshTransactions } = useTransactions();
-      clearAllData();
-      clearTransactions();
+      const { loadAllData } = useSharedData();
+      const { refreshTransactions } = useTransactions();
 
-      // Force reload all data (bypass cache)
-      await loadAllData(true);
-      await refreshTransactions();
+      // Honor the shared-data cache; logout already clears it for a fresh session.
+      // Shared data and transactions load concurrently instead of in series.
+      await Promise.all([loadAllData(false), refreshTransactions()]);
 
       // Apply saved language preference via cookie (avoids useI18n context issues)
       const { configurationsMap } = useSharedData();
@@ -50,6 +47,12 @@ export const useDataManager = () => {
 
       isInitialized.value = true;
       lastInitTime.value = Date.now();
+
+      // Integrations are non-critical and additive. Load them after the token
+      // cookie has settled (fresh login writes it asynchronously) and never let
+      // a failure here disrupt the session.
+      const { load: loadIntegrations } = useIntegrations();
+      loadIntegrations().catch(() => []);
     } catch (err) {
       error.value = extractApiErrors(err);
       isInitialized.value = false;
@@ -69,9 +72,11 @@ export const useDataManager = () => {
     try {
       const { clearAllData } = useSharedData();
       const { clearTransactions } = useTransactions();
+      const { clear: clearIntegrations } = useIntegrations();
 
       clearAllData();
       clearTransactions();
+      clearIntegrations();
     } catch (err) {
       console.warn('[DataManager] Error clearing data:', err);
     }
diff --git a/composables/useExtensionSlots.ts b/composables/useExtensionSlots.ts
new file mode 100644
index 0000000..45e9d13
--- /dev/null
+++ b/composables/useExtensionSlots.ts
@@ -0,0 +1,75 @@
+import { computed, markRaw, ref } from 'vue';
+import type { Component } from 'vue';
+import type { ExtensionSlot, SlotContribution } from '~/types/integration';
+import { useIntegrations } from '~/composables/useIntegrations';
+
+const DEFAULT_ORDER = 100;
+
+// Components a plugin Nuxt layer registers for a slot key (the escape hatch).
+const componentRegistry = ref<Record<string, Component>>({});
+
+/**
+ * Collects what installed integrations contribute to each named slot, ordered
+ * and gated, and resolves the optional custom component a plugin layer can
+ * register. The common cases render with no plugin JS; a registered component
+ * is the escape hatch.
+ */
+export const useExtensionSlots = () => {
+  const { integrations } = useIntegrations();
+
+  const contributionsFor = (slot: ExtensionSlot) =>
+    computed<SlotContribution[]>(() => {
+      const items: SlotContribution[] = [];
+
+      for (const integration of integrations.value) {
+        const ui = integration.ui;
+        if (!ui || !Array.isArray(ui.slots) || !ui.slots.includes(slot)) {
+          continue;
+        }
+
+        // Hard gate: never surface something the user is not entitled to. The
+        // server owns the paid-vs-free decision; the client only honors it.
+        if (!integration.entitled) {
+          continue;
+        }
+
+        // Hide contributions that are not ready to use unless the descriptor
+        // asks to surface an explicit needs-setup state.
+        if (!integration.configured && !ui.show_when_unconfigured) {
+          continue;
+        }
+
+        items.push({
+          key: integration.key,
+          slot,
+          integration: integration as SlotContribution['integration'],
+          ui,
+          order:
+            slot === 'onboarding.steps' ? (ui.onboarding?.order ?? DEFAULT_ORDER) : DEFAULT_ORDER,
+          configured: integration.configured
+        });
+      }
+
+      return items.sort((a, b) => a.order - b.order);
+    });
+
+  /**
+   * Register a real component for a slot key, used when a descriptor sets
+   * `ui.component`. Called from a plugin Nuxt layer.
+   */
+  const registerComponent = (slotKey: string, component: Component): void => {
+    componentRegistry.value = {
+      ...componentRegistry.value,
+      [slotKey]: markRaw(component)
+    };
+  };
+
+  const resolveComponent = (slotKey: string | null | undefined): Component | null =>
+    slotKey ? (componentRegistry.value[slotKey] ?? null) : null;
+
+  return {
+    contributionsFor,
+    registerComponent,
+    resolveComponent
+  };
+};
diff --git a/composables/useImports.ts b/composables/useImports.ts
index 5d0323e..53b7339 100644
--- a/composables/useImports.ts
+++ b/composables/useImports.ts
@@ -10,14 +10,18 @@ import { extractApiErrors } from '~/utils/apiErrors';
 
 const POLL_INTERVAL = 3000;
 
+const IN_PROGRESS_STATUSES = ['analyzing', 'extracting', 'enriching', 'checking'];
+
 export const useImports = () => {
   const currentSession = ref<ImportSession | null>(null);
+  const sessions = ref<ImportSession[]>([]);
   const suggestions = ref<SuggestionWithDuplicate[]>([]);
   const isAnalyzing = ref(false);
   const isConfirming = ref(false);
   const error = ref<string | null>(null);
 
   let pollTimer: ReturnType<typeof setInterval> | null = null;
+  let listTimer: ReturnType<typeof setInterval> | null = null;
 
   const acceptedCount = computed(
     () => suggestions.value.filter((s) => s.status === 'accepted').length
@@ -110,6 +114,66 @@ export const useImports = () => {
     }
   };
 
+  const stopListPolling = () => {
+    if (listTimer) {
+      clearInterval(listTimer);
+      listTimer = null;
+    }
+  };
+
+  const loadSessions = async () => {
+    try {
+      sessions.value = await api.imports.getSessions();
+    } catch {
+      // Non-fatal: leave the list as-is and let the user retry.
+      return;
+    }
+
+    // Keep badges fresh while any import is still analyzing.
+    const anyInProgress = () => sessions.value.some((s) => IN_PROGRESS_STATUSES.includes(s.status));
+    if (anyInProgress() && !listTimer) {
+      listTimer = setInterval(async () => {
+        try {
+          sessions.value = await api.imports.getSessions();
+        } catch {
+          stopListPolling();
+          return;
+        }
+        if (!anyInProgress()) stopListPolling();
+      }, POLL_INTERVAL);
+    } else if (!anyInProgress()) {
+      stopListPolling();
+    }
+  };
+
+  const removeSession = async (id: number) => {
+    await api.imports.deleteSession(id);
+    sessions.value = sessions.value.filter((s) => s.id !== id);
+  };
+
+  const openSession = async (id: number) => {
+    error.value = null;
+    isAnalyzing.value = false;
+
+    try {
+      const session = await api.imports.getSession(id);
+      currentSession.value = session;
+
+      if (session.status === 'ready' || session.status === 'confirmed') {
+        populateSuggestions(session);
+      } else if (session.status === 'failed') {
+        error.value = session.metadata?.error || 'Analysis failed';
+        currentSession.value = null;
+      } else if (IN_PROGRESS_STATUSES.includes(session.status)) {
+        isAnalyzing.value = true;
+        pollSession(id);
+      }
+    } catch (err: unknown) {
+      error.value = extractApiErrors(err);
+      currentSession.value = null;
+    }
+  };
+
   const acceptSuggestion = (index: number) => {
     const s = suggestions.value.find((s) => s.index === index);
     if (s) s.status = 'accepted';
@@ -201,11 +265,15 @@ export const useImports = () => {
   };
 
   if (import.meta.client) {
-    onUnmounted(() => stopPolling());
+    onUnmounted(() => {
+      stopPolling();
+      stopListPolling();
+    });
   }
 
   return {
     currentSession,
+    sessions,
     suggestions,
     isAnalyzing,
     isConfirming,
@@ -222,6 +290,9 @@ export const useImports = () => {
     rejectAll,
     editSuggestion,
     confirmImport,
+    loadSessions,
+    openSession,
+    removeSession,
     reset
   };
 };
diff --git a/composables/useIntegrations.ts b/composables/useIntegrations.ts
new file mode 100644
index 0000000..e841fc2
--- /dev/null
+++ b/composables/useIntegrations.ts
@@ -0,0 +1,46 @@
+import { ref, readonly } from 'vue';
+import type { Integration } from '~/types/integration';
+import integrationsApi from '~/services/api/integrationsApi';
+
+// Module-level shared state (mirrors useSharedData's pattern).
+const integrations = ref<Integration[]>([]);
+const loading = ref(false);
+const loaded = ref(false);
+
+export const useIntegrations = () => {
+  const load = async (force = false): Promise<Integration[]> => {
+    // Never call the authenticated endpoint without a token: a 401 here would
+    // trip the global handler and log the user out over a non-critical fetch.
+    const { token } = useAuth();
+    if (!token.value) return integrations.value;
+
+    if (loading.value) return integrations.value;
+    if (loaded.value && !force) return integrations.value;
+
+    loading.value = true;
+    try {
+      integrations.value = await integrationsApi.fetchAll();
+      loaded.value = true;
+    } catch (error) {
+      console.error('Error loading integrations:', error);
+      integrations.value = [];
+    } finally {
+      loading.value = false;
+    }
+
+    return integrations.value;
+  };
+
+  const clear = () => {
+    integrations.value = [];
+    loaded.value = false;
+  };
+
+  return {
+    integrations: readonly(integrations),
+    loading: readonly(loading),
+    loaded: readonly(loaded),
+    load,
+    clear
+  };
+};
diff --git a/composables/useLanding.ts b/composables/useLanding.ts
new file mode 100644
index 0000000..a2abfb5
--- /dev/null
+++ b/composables/useLanding.ts
@@ -0,0 +1,16 @@
+import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
+
+/**
+ * Where an authenticated, onboarded user should land. The dashboard is the
+ * default; users can opt into the chat-first home (the centered chat at /home)
+ * in settings.
+ */
+export async function resolveLandingPath(): Promise<string> {
+  try {
+    const sharedData = useSharedData();
+    const configs = await sharedData.loadConfigurations();
+    return configs?.[CONFIGURATION_KEYS.LANDING_MODE] === 'chat' ? '/home' : '/dashboard';
+  } catch {
+    return '/dashboard';
+  }
+}
diff --git a/composables/useMarkdown.ts b/composables/useMarkdown.ts
new file mode 100644
index 0000000..4595778
--- /dev/null
+++ b/composables/useMarkdown.ts
@@ -0,0 +1,19 @@
+import MarkdownIt from 'markdown-it';
+
+// `html: false` escapes all raw HTML in the source, so neither the model nor any
+// embedded record text can inject active markup. markdown-it's built-in
+// validateLink also blocks dangerous link protocols (javascript:, vbscript:,
+// non-image data:). This is pure JS and safe to evaluate during SSR (no DOM).
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true
+});
+
+export function renderMarkdown(text: string | null | undefined): string {
+  return md.render(text ?? '');
+}
+
+export function useMarkdown() {
+  return { renderMarkdown };
+}
diff --git a/composables/usePendingAsk.ts b/composables/usePendingAsk.ts
new file mode 100644
index 0000000..b389f3f
--- /dev/null
+++ b/composables/usePendingAsk.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+/**
+ * A one-shot handoff of an assistant request from elsewhere in the app (e.g. a
+ * dashboard quick action) into the chat. The sender stows a prompt and/or files,
+ * navigates to the chat, and ChatExperience consumes it once on mount so the turn
+ * is sent fully-formed instead of as an empty "what do you want" round-trip.
+ */
+export interface PendingAsk {
+  text?: string;
+  files?: File[];
+}
+
+const pending = ref<PendingAsk | null>(null);
+
+export function usePendingAsk() {
+  const setPendingAsk = (value: PendingAsk) => {
+    pending.value = value;
+  };
+
+  const consumePendingAsk = (): PendingAsk | null => {
+    const value = pending.value;
+    pending.value = null;
+    return value;
+  };
+
+  return { setPendingAsk, consumePendingAsk };
+}
diff --git a/composables/useReportData.ts b/composables/useReportData.ts
index 5383e49..282c4f0 100644
--- a/composables/useReportData.ts
+++ b/composables/useReportData.ts
@@ -115,10 +115,12 @@ const compareEnabled = ref(true);
 const apiStats = ref<StatsResponse['data'] | null>(null);
 const apiStatsPrev = ref<StatsResponse['data'] | null>(null);
 const periodTransactions = ref<FrontendTransaction[]>([]);
-const prevPeriodTransactions = ref<FrontendTransaction[]>([]);
 const trailing12Transactions = ref<FrontendTransaction[]>([]);
-const isLoading = ref(false);
+// Starts true: the immediate watcher always kicks off a reload, so the first
+// paint should show loading rather than briefly flashing the empty state.
+const isLoading = ref(true);
 const error = ref<string | null>(null);
+const sweepTruncated = ref(false);
 
 const PALETTE_EXPENSE = [
   '#e11d48',
@@ -204,31 +206,68 @@ async function fetchAllTransactionsInRange(
     groups: readonly any[];
   }
 ): Promise<FrontendTransaction[]> {
-  const out: FrontendTransaction[] = [];
-  let page = 1;
   const limit = 200;
-  // Hard cap so we never spin forever; reports break degrade-gracefully past this.
+  // Hard cap so we never spin forever; reports degrade gracefully past this.
   const maxPages = 30;
-  while (true) {
-    const resp = await api.transactions.fetchAll({
+  // Fetch a bounded number of pages at once so a heavy account doesn't pay one
+  // serial round-trip per page before the report can render.
+  const concurrency = 6;
+
+  const fetchPage = (page: number) =>
+    api.transactions.fetchAll({
       page,
       limit,
       date_from: toISODate(start),
       date_to: toISODate(end)
     });
-    const mapped = (resp.data || []).map((t) =>
-      transactionMapper.toFrontend(
-        t,
-        lookups.parties as any[],
-        lookups.categories as any[],
-        lookups.wallets as any[],
-        lookups.groups as any[]
-      )
+
+  const first = await fetchPage(1);
+  const lastPage = Math.max(1, first.last_page || 1);
+  const targetPages = Math.min(lastPage, maxPages);
+
+  // Index pages by (page - 1) so the final concat preserves server order
+  // regardless of which request resolves first.
+  const pages: any[][] = new Array(targetPages);
+  pages[0] = first.data || [];
+
+  if (targetPages > 1) {
+    const queue: number[] = [];
+    for (let p = 2; p <= targetPages; p++) queue.push(p);
+
+    let cursor = 0;
+    const worker = async () => {
+      while (cursor < queue.length) {
+        const p = queue[cursor++];
+        const resp = await fetchPage(p);
+        pages[p - 1] = resp.data || [];
+      }
+    };
+    await Promise.all(Array.from({ length: Math.min(concurrency, queue.length) }, () => worker()));
+  }
+
+  const out: FrontendTransaction[] = [];
+  for (const data of pages) {
+    if (!data) continue;
+    for (const t of data) {
+      out.push(
+        transactionMapper.toFrontend(
+          t,
+          lookups.parties as any[],
+          lookups.categories as any[],
+          lookups.wallets as any[],
+          lookups.groups as any[]
+        )
+      );
+    }
+  }
+
+  if (lastPage > maxPages) {
+    sweepTruncated.value = true;
+    console.warn(
+      `[reports] transaction sweep truncated at ${maxPages} pages (${out.length} rows); some data omitted`
     );
-    out.push(...mapped);
-    if (!resp.data || resp.data.length < limit || page >= resp.last_page || page >= maxPages) break;
-    page += 1;
   }
+
   return out;
 }
 
@@ -258,35 +297,48 @@ async function reload(lookups: {
   const id = ++lastReloadId;
   isLoading.value = true;
   error.value = null;
+  sweepTruncated.value = false;
 
-  try {
-    const cur = getRange(selectedPeriod.value, customRange.value);
-    const prev = previousRange(cur);
-    const trailingStart = startOfDay(new Date(cur.end.getFullYear(), cur.end.getMonth() - 5, 1));
+  const cur = getRange(selectedPeriod.value, customRange.value);
+  const prev = previousRange(cur);
+  const trailingStart = startOfDay(new Date(cur.end.getFullYear(), cur.end.getMonth() - 5, 1));
 
-    const [statsResp, prevStatsResp, periodTxs, prevTxs, trailingTxs] = await Promise.all([
+  // Load stats first so the stats-driven tabs render without waiting for the
+  // transaction sweeps below.
+  try {
+    const [statsResp, prevStatsResp] = await Promise.all([
       fetchStatsForRange(cur.start, cur.end),
-      fetchStatsForRange(prev.start, prev.end),
-      fetchAllTransactionsInRange(cur.start, cur.end, lookups),
-      fetchAllTransactionsInRange(prev.start, prev.end, lookups),
-      fetchAllTransactionsInRange(trailingStart, cur.end, lookups)
+      fetchStatsForRange(prev.start, prev.end)
     ]);
-
-    // Discard if a newer reload superseded this one
     if (id !== lastReloadId) return;
-
     apiStats.value = statsResp;
     apiStatsPrev.value = prevStatsResp;
-    periodTransactions.value = periodTxs;
-    prevPeriodTransactions.value = prevTxs;
-    trailing12Transactions.value = trailingTxs;
   } catch (e) {
     if (id !== lastReloadId) return;
-    console.error('[reports] reload failed', e);
+    console.error('[reports] stats reload failed', e);
     error.value = e instanceof Error ? e.message : 'Failed to load reports';
   } finally {
     if (id === lastReloadId) isLoading.value = false;
   }
+
+  // Raw transactions only feed daily granularity (calendar, trends, month
+  // review, CSV). When the period already spans the trailing six months, reuse
+  // that fetch as the trailing data instead of running a second sweep.
+  try {
+    const periodCoversTrailing = cur.start.getTime() <= trailingStart.getTime();
+    const [periodTxs, trailingTxs] = await Promise.all([
+      fetchAllTransactionsInRange(cur.start, cur.end, lookups),
+      periodCoversTrailing
+        ? Promise.resolve(null)
+        : fetchAllTransactionsInRange(trailingStart, cur.end, lookups)
+    ]);
+    if (id !== lastReloadId) return;
+    periodTransactions.value = periodTxs;
+    trailing12Transactions.value = trailingTxs ?? periodTxs;
+  } catch (e) {
+    if (id !== lastReloadId) return;
+    console.error('[reports] transaction detail reload failed', e);
+  }
 }
 
 export const useReportData = () => {
@@ -428,17 +480,35 @@ export const useReportData = () => {
     return Array.from(map.values());
   });
 
-  // Per-category 6-month trend computed from trailing transactions (API doesn't provide per-cat history)
-  const trendFor = (categoryName: string, type: 'INCOME' | 'EXPENSE'): number[] => {
+  // Per-category 6-month trend (API doesn't provide per-cat history). Built in a
+  // single pass over the trailing transactions and indexed by category, so the
+  // per-category lookups below stay O(1) instead of rescanning every transaction.
+  const trendIndex = computed(() => {
     const months = trailing6MonthBuckets.value.map((m) => m.month);
-    const acc = new Map(months.map((m) => [m, 0]));
+    const monthIdx = new Map(months.map((m, i) => [m, i]));
+    const income = new Map<string, number[]>();
+    const expense = new Map<string, number[]>();
     trailing12Transactions.value.forEach((t) => {
-      if (t.isTransfer || t.type !== type) return;
-      if ((t.category || 'Uncategorized') !== categoryName) return;
-      const key = t.date.slice(0, 7);
-      if (acc.has(key)) acc.set(key, (acc.get(key) || 0) + parseAmount(t.amount).value);
+      if (t.isTransfer) return;
+      const mi = monthIdx.get(t.date.slice(0, 7));
+      if (mi === undefined) return;
+      const bucket = t.type === 'INCOME' ? income : t.type === 'EXPENSE' ? expense : null;
+      if (!bucket) return;
+      const name = t.category || 'Uncategorized';
+      let series = bucket.get(name);
+      if (!series) {
+        series = new Array(months.length).fill(0);
+        bucket.set(name, series);
+      }
+      series[mi] += parseAmount(t.amount).value;
     });
-    return months.map((m) => acc.get(m) || 0);
+    return { months, income, expense };
+  });
+
+  const trendFor = (categoryName: string, type: 'INCOME' | 'EXPENSE'): number[] => {
+    const idx = trendIndex.value;
+    const series = (type === 'INCOME' ? idx.income : idx.expense).get(categoryName);
+    return series ? series.slice() : idx.months.map(() => 0);
   };
 
   const expenseCategories = computed<CategoryBucket[]>(() => {
@@ -574,8 +644,12 @@ export const useReportData = () => {
       }
     });
 
-    // First-time payees: compare period payees vs prior period payees
-    const prevPayees = new Set(prevPeriodTransactions.value.map((t) => t.party));
+    // First-time payees: compare period payees vs prior-period payees from the
+    // previous-period stats (party charts), avoiding a second raw-transaction fetch.
+    const prevPayees = new Set([
+      ...(apiStatsPrev.value?.charts?.party_spending || []).map((p) => p.name),
+      ...(apiStatsPrev.value?.charts?.party_income || []).map((p) => p.name)
+    ]);
     const firstTimers = Array.from(
       new Set(periodTransactions.value.filter((t) => !prevPayees.has(t.party)).map((t) => t.party))
     );
@@ -681,6 +755,12 @@ export const useReportData = () => {
 
   const primaryCurrency = computed(() => getDefaultCurrency.value || 'USD');
 
+  // The backend excludes amounts it can't convert (no exchange rate for that
+  // currency) and flags the response partial. Surface it so party/category
+  // figures aren't silently understated.
+  const statsPartial = computed(() => apiStats.value?.partial === true);
+  const unconvertedCurrencies = computed(() => apiStats.value?.unconverted_currencies || []);
+
   const setPeriod = (p: ReportPeriodValue) => {
     selectedPeriod.value = p;
     if (p !== 'custom') customRange.value = null;
@@ -714,6 +794,9 @@ export const useReportData = () => {
     compareEnabled,
     isLoading,
     error,
+    sweepTruncated,
+    statsPartial,
+    unconvertedCurrencies,
     periods: REPORT_PERIODS,
     range,
     prevRange,
diff --git a/composables/useStatistics.ts b/composables/useStatistics.ts
index 3b8e9ba..79f6420 100644
--- a/composables/useStatistics.ts
+++ b/composables/useStatistics.ts
@@ -178,6 +178,125 @@ export interface CustomFilters {
 
 const customFilters = ref<CustomFilters | null>(null);
 
+const currentStatistics = ref<WalletStatistics | null>(null);
+
+// Client-side cache + in-flight dedup for the /stats endpoint, keyed by resolved
+// request params. Collapses the many identical requests that fire when several
+// components mount useStatistics() at once. Backend caches /stats for 5 min.
+const STATS_CACHE_DURATION = 60 * 1000;
+
+interface StatsCacheEntry {
+  data: WalletStatistics;
+  fetchedAt: number;
+}
+
+const statsCache = new Map<string, StatsCacheEntry>();
+const statsInFlight = new Map<string, Promise<WalletStatistics>>();
+
+// Section load priority: cheap overview first, then heavier breakdowns.
+const STATS_SECTION_ORDER = [
+  'overview',
+  'categories',
+  'parties',
+  'activity',
+  'comparisons',
+  'cashflow'
+];
+const sectionCache = new Map<string, { data: any; fetchedAt: number }>();
+const sectionInFlight = new Map<string, Promise<any>>();
+const loadedSections = ref<Set<string>>(new Set());
+let statsRunId = 0;
+
+// Share one import: parallel section loads must not race concurrent dynamic imports.
+let apiModulePromise: Promise<any> | null = null;
+const getStatsApi = () => {
+  if (!apiModulePromise) {
+    apiModulePromise = import('~/services/api').then((m) => m.api);
+  }
+  return apiModulePromise;
+};
+
+const clearStatsCache = () => {
+  statsCache.clear();
+  statsInFlight.clear();
+  sectionCache.clear();
+  sectionInFlight.clear();
+  loadedSections.value = new Set();
+};
+
+const fetchSection = async (
+  walletId: number | null,
+  period: string,
+  section: string
+): Promise<any> => {
+  const params = { ...buildStatsParams(walletId, period), section };
+  const key = statsCacheKey(params);
+
+  const cached = sectionCache.get(key);
+  if (cached && Date.now() - cached.fetchedAt < STATS_CACHE_DURATION) {
+    return cached.data;
+  }
+
+  const inFlight = sectionInFlight.get(key);
+  if (inFlight) {
+    return inFlight;
+  }
+
+  const request = (async () => {
+    const api = await getStatsApi();
+    const response = await api.stats.fetch(params);
+    sectionCache.set(key, { data: response.data, fetchedAt: Date.now() });
+    return response.data;
+  })();
+
+  sectionInFlight.set(key, request);
+  try {
+    return await request;
+  } finally {
+    sectionInFlight.delete(key);
+  }
+};
+
+const presetMap: Record<string, string> = {
+  all_time: 'all_time',
+  current_week: 'current_week',
+  current_month: 'current_month',
+  '90d': 'last_3_months'
+};
+
+const buildStatsParams = (walletId: number | null, period: string): Record<string, string> => {
+  const params: Record<string, string> = {};
+
+  if (period === 'custom' && customFilters.value) {
+    if (customFilters.value.startDate) {
+      params.start_date = customFilters.value.startDate;
+    }
+    if (customFilters.value.endDate) {
+      params.end_date = customFilters.value.endDate;
+    }
+    if (customFilters.value.walletIds.length > 0) {
+      params.wallet_ids = customFilters.value.walletIds.join(',');
+    }
+  } else {
+    if (presetMap[period]) {
+      params.preset = presetMap[period];
+    }
+    if (walletId) {
+      params.wallet_ids = String(walletId);
+    }
+  }
+
+  return params;
+};
+
+const statsCacheKey = (params: Record<string, string>): string =>
+  Object.keys(params)
+    .sort()
+    .map((k) => `${k}=${params[k]}`)
+    .join('&');
+
+let statsWatcherRegistered = false;
+
 export const useStatistics = () => {
   const { transactions } = useTransactions();
   const { wallets } = useWallets();
@@ -670,41 +789,40 @@ export const useStatistics = () => {
     walletId: number | null,
     period: string
   ): Promise<WalletStatistics> => {
-    const { api } = await import('~/services/api');
-
-    // Map period to preset
-    const presetMap: Record<string, string> = {
-      all_time: 'all_time',
-      current_week: 'current_week',
-      current_month: 'current_month',
-      '90d': 'last_3_months'
-    };
+    const params = buildStatsParams(walletId, period);
+    const key = statsCacheKey(params);
 
-    const params: Record<string, string> = {};
+    const cached = statsCache.get(key);
+    if (cached && Date.now() - cached.fetchedAt < STATS_CACHE_DURATION) {
+      return cached.data;
+    }
 
-    // Use custom filters if set, otherwise use preset
-    if (period === 'custom' && customFilters.value) {
-      if (customFilters.value.startDate) {
-        params.start_date = customFilters.value.startDate;
-      }
-      if (customFilters.value.endDate) {
-        params.end_date = customFilters.value.endDate;
-      }
-      if (customFilters.value.walletIds.length > 0) {
-        params.wallet_ids = customFilters.value.walletIds.join(',');
-      }
-    } else {
-      if (presetMap[period]) {
-        params.preset = presetMap[period];
-      }
-      if (walletId) {
-        params.wallet_ids = String(walletId);
-      }
+    const inFlight = statsInFlight.get(key);
+    if (inFlight) {
+      return inFlight;
     }
 
-    const response = await api.stats.fetch(params);
-    const data = response.data;
+    const request = (async (): Promise<WalletStatistics> => {
+      const { api } = await import('~/services/api');
+      const response = await api.stats.fetch(params);
+      const result = transformStatsResponse(response.data, walletId, period);
+      statsCache.set(key, { data: result, fetchedAt: Date.now() });
+      return result;
+    })();
+
+    statsInFlight.set(key, request);
+    try {
+      return await request;
+    } finally {
+      statsInFlight.delete(key);
+    }
+  };
 
+  const transformStatsResponse = (
+    data: any,
+    walletId: number | null,
+    period: string
+  ): WalletStatistics => {
     const activity = data.activity || {};
     const frequency = activity.frequency || {};
     const incomeGrowth = data.comparisons?.previous_period?.income_change_percent || 0;
@@ -908,31 +1026,91 @@ export const useStatistics = () => {
     }
   };
 
-  const currentStatistics = ref<WalletStatistics | null>(null);
+  const calculateAllSections = async (walletId: number | null, period: string, runId: number) => {
+    try {
+      const stats = await calculateStatistics(walletId, period);
+      if (runId !== statsRunId) return;
+      currentStatistics.value = stats;
+      loadedSections.value = new Set(STATS_SECTION_ORDER);
+    } catch (err) {
+      console.error('Error loading current statistics:', err);
+      if (runId === statsRunId) error.value = 'Failed to load statistics';
+    }
+  };
 
   const updateCurrentStatistics = async () => {
+    const runId = ++statsRunId;
+    const walletId = selectedWalletId.value;
+    const period = currentPeriod.value;
+
+    isLoading.value = true;
+    error.value = null;
+    loadedSections.value = new Set();
+
+    if (!USE_API_STATISTICS) {
+      await calculateAllSections(walletId, period, runId);
+      if (runId === statsRunId) isLoading.value = false;
+      return;
+    }
+
+    const merged: any = {};
+    const applySection = (section: string, data: any) => {
+      if (runId !== statsRunId || !data) return;
+      if (data.charts) {
+        merged.charts = { ...(merged.charts || {}), ...data.charts };
+      }
+      for (const k of Object.keys(data)) {
+        if (k !== 'charts') merged[k] = data[k];
+      }
+      loadedSections.value = new Set(loadedSections.value).add(section);
+      if (merged.overview) {
+        currentStatistics.value = transformStatsResponse(merged, walletId, period);
+      }
+    };
+
     try {
-      isLoading.value = true;
-      error.value = null;
-      currentStatistics.value = await getStatistics(selectedWalletId.value, currentPeriod.value);
+      applySection('overview', await fetchSection(walletId, period, 'overview'));
+      if (runId !== statsRunId) return;
+      isLoading.value = false;
+
+      await Promise.all(
+        STATS_SECTION_ORDER.filter((s) => s !== 'overview').map((section) =>
+          fetchSection(walletId, period, section)
+            .then((data) => applySection(section, data))
+            .catch((err) => {
+              console.error(`[stats] section "${section}" failed`, err);
+              if (runId === statsRunId) {
+                loadedSections.value = new Set(loadedSections.value).add(section);
+              }
+            })
+        )
+      );
     } catch (err) {
-      console.error('Error loading current statistics:', err);
-      error.value = 'Failed to load statistics';
-      currentStatistics.value = null;
+      if (runId !== statsRunId) return;
+      console.warn('API statistics failed, falling back to client-side calculation:', err);
+      await calculateAllSections(walletId, period, runId);
     } finally {
-      isLoading.value = false;
+      if (runId === statsRunId) isLoading.value = false;
     }
   };
 
-  // Watch for changes in selected wallet, period, custom filters, AND when the underlying data becomes available
-  watch(
-    [selectedWalletId, currentPeriod, customFilters, transactions, wallets],
-    updateCurrentStatistics,
-    {
+  const isSectionLoaded = (section: string): boolean => loadedSections.value.has(section);
+
+  const refreshStatistics = async () => {
+    clearStatsCache();
+    await updateCurrentStatistics();
+  };
+
+  // Statistics come from the /stats endpoint, so the values only change when the
+  // filters change. Watching the transactions/wallets arrays would refire on every
+  // mutation for no benefit. Register a single watcher for the whole app.
+  if (!statsWatcherRegistered) {
+    statsWatcherRegistered = true;
+    watch([selectedWalletId, currentPeriod, customFilters], updateCurrentStatistics, {
       immediate: true,
-      deep: true
-    }
-  );
+      deep: false
+    });
+  }
 
   const formatCurrency = (amount: number, currency: string = 'USD'): string => {
     const rounded = Math.round(amount * 100) / 100;
@@ -983,10 +1161,13 @@ export const useStatistics = () => {
     error,
 
     currentStatistics,
+    loadedSections,
+    isSectionLoaded,
     availableWallets,
     availablePeriods: AVAILABLE_PERIODS,
 
     getStatistics,
+    refreshStatistics,
     setSelectedWallet,
     setPeriod,
     setCustomFilters,
diff --git a/composables/useTransactions.ts b/composables/useTransactions.ts
index 84e6eb1..45a1c60 100644
--- a/composables/useTransactions.ts
+++ b/composables/useTransactions.ts
@@ -56,6 +56,18 @@ async function loadDependencies() {
   }
 }
 
+// Drop cached statistics and refetch after a mutation so the dashboard reflects
+// the change. Dynamic import avoids a circular dependency with useStatistics.
+async function refreshStatsAfterMutation() {
+  if (typeof window === 'undefined') return;
+  try {
+    const { useStatistics } = await import('~/composables/useStatistics');
+    await useStatistics().refreshStatistics();
+  } catch (err) {
+    console.error('Error refreshing statistics after mutation:', err);
+  }
+}
+
 // Monotonic counter used to ensure only the latest fetch's response is
 // applied to state. Prevents race conditions when a user types quickly
 // or changes filters rapidly and older in-flight requests resolve after
@@ -237,6 +249,7 @@ export const useTransactions = () => {
         transactions.value = [frontendTransaction, ...transactions.value];
         totalItems.value += 1;
         console.log('Transaction created and added to local state');
+        void refreshStatsAfterMutation();
       }
     } catch (err: unknown) {
       console.error('Error adding transaction:', err);
@@ -334,6 +347,7 @@ export const useTransactions = () => {
           transactions.value[index] = frontendTransaction;
         }
         console.log('Transaction updated in local state');
+        void refreshStatsAfterMutation();
       }
     } catch (err) {
       console.error('Error updating transaction:', err);
@@ -357,6 +371,7 @@ export const useTransactions = () => {
       // Remove from local state
       transactions.value = transactions.value.filter((t) => t.id !== id);
       totalItems.value = Math.max(0, totalItems.value - 1);
+      void refreshStatsAfterMutation();
     } catch (err) {
       console.error('Error deleting transaction:', err);
       error.value = extractApiErrors(err);
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index e20b47a..3ab73ca 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -1,4 +1,50 @@
 {
+  "Recent imports": "Letzte Importe",
+  "Needs review": "Zu prüfen",
+  "Analyzing": "Wird analysiert",
+  "Imported": "Importiert",
+  "Failed": "Fehlgeschlagen",
+  "Expired": "Abgelaufen",
+  "Delete import": "Import löschen",
+  "this import": "diesen Import",
+  "Import deleted.": "Import gelöscht.",
+  "Could not delete the import.": "Import konnte nicht gelöscht werden.",
+  "Import failed": "Import fehlgeschlagen",
+  "Import expired": "Import abgelaufen",
+  "Import unavailable": "Import nicht verfügbar",
+  "Assistant": "Assistent",
+  "Ask": "Fragen",
+  "What can I help with?": "Wie kann ich helfen?",
+  "How much did I spend last month?": "Wie viel habe ich letzten Monat ausgegeben?",
+  "Ask about your money, log a transaction, or import a statement.": "Frag nach deinen Finanzen, erfasse eine Transaktion oder importiere einen Kontoauszug.",
+  "Log 20 for coffee from Cash": "20 für Kaffee von Bargeld erfassen",
+  "What's my biggest spending category?": "Was ist meine größte Ausgabenkategorie?",
+  "Import my bank statement": "Meinen Kontoauszug importieren",
+  "Attach a file": "Datei anhängen",
+  "Import transactions from a CSV or PDF": "Transaktionen aus einer CSV oder PDF importieren",
+  "A photo or scan of a receipt": "Ein Foto oder Scan eines Belegs",
+  "A bill or invoice document": "Eine Rechnung oder ein Rechnungsdokument",
+  "Any image from your device": "Ein beliebiges Bild von deinem Gerät",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, Tabelle oder Textdatei",
+  "{count} sections": "{count} Abschnitte",
+  "Open in canvas": "Im Canvas öffnen",
+  "Canvas": "Canvas",
+  "Working…": "Wird bearbeitet…",
+  "Could not complete the action": "Aktion konnte nicht abgeschlossen werden",
+  "Could not dismiss the action": "Aktion konnte nicht verworfen werden",
+  "Analyzing document…": "Dokument wird analysiert…",
+  "Ready to review": "Bereit zur Überprüfung",
+  "Review import": "Import überprüfen",
+  "Chat-first landing": "Startseite mit Chat zuerst",
+  "Open the AI chat as your home screen instead of the dashboard.": "Den KI-Chat als Startbildschirm statt des Dashboards öffnen.",
+  "Download as Markdown": "Als Markdown herunterladen",
+  "Print / Save as PDF": "Drucken / Als PDF speichern",
+  "Toggle history": "Verlauf ein-/ausblenden",
+  "Exit full screen": "Vollbild beenden",
+  "Full screen": "Vollbild",
+  "No conversations yet": "Noch keine Unterhaltungen",
+  "Dismiss": "Verwerfen",
+  "Dismissed": "Verworfen",
   "Allow Negative Balances": "Negative Salden zulassen",
   "Permit wallet balances to go below zero when spending or transferring.": "Erlaubt, dass Geldbörsen-Salden bei Ausgaben oder Überweisungen unter null fallen.",
   "App Settings": "App-Einstellungen",
@@ -640,5 +686,39 @@
   "Importing...": "Importiere...",
   "Cancel": "Abbrechen",
   "Import completed successfully.": "Import erfolgreich abgeschlossen.",
-  "{count} transactions imported successfully.": "{count} Transaktionen erfolgreich importiert."
+  "{count} transactions imported successfully.": "{count} Transaktionen erfolgreich importiert.",
+  "Add a few transactions and I'll start spotting trends for you.": "Füge ein paar Transaktionen hinzu und ich erkenne Trends für dich.",
+  "Ask about this": "Mehr erfahren",
+  "Cashflow": "Cashflow",
+  "Last few months": "Letzte Monate",
+  "Spent this month": "Diesen Monat ausgegeben",
+  "What did I spend the most on this month?": "Wofür habe ich diesen Monat am meisten ausgegeben?",
+  "Savings rate": "Sparquote",
+  "How can I save more this month?": "Wie kann ich diesen Monat mehr sparen?",
+  "Top category": "Top-Kategorie",
+  "Break down my {category} spending.": "Schlüssle meine Ausgaben für {category} auf.",
+  "Income vs last month": "Einkommen vs. Vormonat",
+  "Why did my income change versus last month?": "Warum hat sich mein Einkommen gegenüber dem Vormonat verändert?",
+  "How can I improve my savings rate?": "Wie kann ich meine Sparquote verbessern?",
+  "Show my income from {party}.": "Zeige mein Einkommen von {party}.",
+  "Show my transactions with {party}.": "Zeige meine Transaktionen mit {party}.",
+  "You've saved {rate}% of your income this month.": "Du hast diesen Monat {rate}% deines Einkommens gespart.",
+  "{category} is your biggest spending category at {percent}% of the total.": "{category} ist deine größte Ausgabenkategorie mit {percent}% der Gesamtsumme.",
+  "Your income is up {percent}% compared with last month.": "Dein Einkommen ist gegenüber dem Vormonat um {percent}% gestiegen.",
+  "Your income is down {percent}% compared with last month.": "Dein Einkommen ist gegenüber dem Vormonat um {percent}% gesunken.",
+  "{party} is your top income source this month.": "{party} ist diesen Monat deine wichtigste Einnahmequelle.",
+  "You've spent {amount} so far this month.": "Du hast diesen Monat bisher {amount} ausgegeben.",
+  "{amount} of your spending went to {party}.": "{amount} deiner Ausgaben gingen an {party}.",
+  "of income kept": "des Einkommens behalten",
+  "Cashflow trend": "Cashflow-Trend",
+  "Not enough history yet": "Noch nicht genug Verlauf",
+  "Avg expense": "Durchschn. Ausgabe",
+  "Pulse": "Überblick",
+  "Trends": "Trends",
+  "Net flow": "Nettofluss",
+  "Top categories": "Top-Kategorien",
+  "of spend": "der Ausgaben",
+  "this month": "diesen Monat",
+  "per transaction": "pro Transaktion",
+  "top destination": "Top-Empfänger"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index d35a7ba..8af9104 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,46 @@
 {
+  "Recent imports": "Recent imports",
+  "Needs review": "Needs review",
+  "Analyzing": "Analyzing",
+  "Imported": "Imported",
+  "Failed": "Failed",
+  "Expired": "Expired",
+  "Delete import": "Delete import",
+  "this import": "this import",
+  "Import deleted.": "Import deleted.",
+  "Could not delete the import.": "Could not delete the import.",
+  "Import failed": "Import failed",
+  "Import expired": "Import expired",
+  "Import unavailable": "Import unavailable",
+  "Assistant": "Assistant",
+  "Ask": "Ask",
+  "What can I help with?": "What can I help with?",
+  "How much did I spend last month?": "How much did I spend last month?",
+  "Ask about your money, log a transaction, or import a statement.": "Ask about your money, log a transaction, or import a statement.",
+  "Log 20 for coffee from Cash": "Log 20 for coffee from Cash",
+  "What's my biggest spending category?": "What's my biggest spending category?",
+  "Import my bank statement": "Import my bank statement",
+  "New chat": "New chat",
+  "Attach a file": "Attach a file",
+  "Bank statement": "Bank statement",
+  "Import transactions from a CSV or PDF": "Import transactions from a CSV or PDF",
+  "A photo or scan of a receipt": "A photo or scan of a receipt",
+  "A bill or invoice document": "A bill or invoice document",
+  "Any image from your device": "Any image from your device",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, spreadsheet or text file",
+  "{count} sections": "{count} sections",
+  "Open in canvas": "Open in canvas",
+  "Canvas": "Canvas",
+  "Working…": "Working…",
+  "Dismiss": "Dismiss",
+  "Dismissed": "Dismissed",
+  "Could not complete the action": "Could not complete the action",
+  "Could not dismiss the action": "Could not dismiss the action",
+  "Analyzing document…": "Analyzing document…",
+  "Ready to review": "Ready to review",
+  "Review import": "Review import",
+  "Chat-first landing": "Chat-first landing",
+  "Open the AI chat as your home screen instead of the dashboard.": "Open the AI chat as your home screen instead of the dashboard.",
   "Allow Negative Balances": "Allow Negative Balances",
   "Permit wallet balances to go below zero when spending or transferring.": "Permit wallet balances to go below zero when spending or transferring.",
   "App Settings": "App Settings",
@@ -414,12 +456,14 @@
   "Expense Category": "Expense Category",
   "Income Categories": "Income Categories",
   "Expense Categories": "Expense Categories",
-  "carousel.simple.title": "Simple",
-  "carousel.simple.text": "Trakli focuses on the basics and gives just what you need to see where your money is coming from or going to.",
-  "carousel.automated.title": "Automated",
-  "carousel.automated.text": "Get your income and expense report completed automatically using your emails and SMS or other custom workflows you setup.",
-  "carousel.opensource.title": "Open Source",
-  "carousel.opensource.text": "Trakli is open source! You can use all Trakli features at no cost on your self-hosted instance.",
+  "carousel.ai.title": "Just ask",
+  "carousel.ai.text": "Log expenses, build reports and get answers by chatting with your assistant in plain language.",
+  "carousel.integrations.title": "Connect your bank",
+  "carousel.integrations.text": "Link accounts with Plaid and import statements, so your transactions flow in on their own.",
+  "carousel.import.title": "Import anything",
+  "carousel.import.text": "Drop in a statement in any format and the assistant reads it, structured or not, into clean transactions.",
+  "carousel.welcome.title": "Sit back, we've got this",
+  "carousel.welcome.text": "You handle life. Trakli wrangles the receipts, the math and the mess. Welcome aboard!",
   "Empty Icon": "Empty state illustration",
   "You don't have any {item} at the moment.": "You don't have any {item} at the moment.",
   "Please add at least one {item} to be able to view it.": "Please add at least one {item} to be able to view it.",
@@ -1070,5 +1114,228 @@
   "PNG · JPG · TIFF": "PNG · JPG · TIFF",
   "Paper receipt": "Paper receipt",
   "Scanned image": "Scanned image",
-  "Show {name}": "Show {name}"
+  "Show {name}": "Show {name}",
+  "Add a few transactions and I'll start spotting trends for you.": "Add a few transactions and I'll start spotting trends for you.",
+  "Ask about this": "Ask about this",
+  "Cashflow": "Cashflow",
+  "Last few months": "Last few months",
+  "Spent this month": "Spent this month",
+  "What did I spend the most on this month?": "What did I spend the most on this month?",
+  "Savings rate": "Savings rate",
+  "How can I save more this month?": "How can I save more this month?",
+  "Top category": "Top category",
+  "Break down my {category} spending.": "Break down my {category} spending.",
+  "Income vs last month": "Income vs last month",
+  "Why did my income change versus last month?": "Why did my income change versus last month?",
+  "How can I improve my savings rate?": "How can I improve my savings rate?",
+  "Show my income from {party}.": "Show my income from {party}.",
+  "Show my transactions with {party}.": "Show my transactions with {party}.",
+  "You've saved {rate}% of your income this month.": "You've saved {rate}% of your income this month.",
+  "{category} is your biggest spending category at {percent}% of the total.": "{category} is your biggest spending category at {percent}% of the total.",
+  "Your income is up {percent}% compared with last month.": "Your income is up {percent}% compared with last month.",
+  "Your income is down {percent}% compared with last month.": "Your income is down {percent}% compared with last month.",
+  "{party} is your top income source this month.": "{party} is your top income source this month.",
+  "You've spent {amount} so far this month.": "You've spent {amount} so far this month.",
+  "{amount} of your spending went to {party}.": "{amount} of your spending went to {party}.",
+  "of income kept": "of income kept",
+  "Cashflow trend": "Cashflow trend",
+  "Not enough history yet": "Not enough history yet",
+  "Avg expense": "Avg expense",
+  "Pulse": "Pulse",
+  "Trends": "Trends",
+  "Net flow": "Net flow",
+  "Top categories": "Top categories",
+  "of spend": "of spend",
+  "this month": "this month",
+  "per transaction": "per transaction",
+  "top destination": "top destination",
+  "Hey {name}": "Hey {name}",
+  "Showing {period}.": "Showing {period}.",
+  "Intent": "Intent",
+  "Regular": "Regular",
+  "Loan received": "Loan received",
+  "Loan repayment": "Loan repayment",
+  "Debt owed": "Debt owed",
+  "Debt settled": "Debt settled",
+  "Investment purchase": "Investment purchase",
+  "Investment return": "Investment return",
+  "Gift": "Gift",
+  "Financial position": "Financial position",
+  "Earnings and spending, with borrowed money and investments separated out.": "Earnings and spending, with borrowed money and investments separated out.",
+  "Earned income": "Earned income",
+  "Excludes loans, gifts and investment returns": "Excludes loans, gifts and investment returns",
+  "Discretionary spend": "Discretionary spend",
+  "Excludes loan repayments and investment buys": "Excludes loan repayments and investment buys",
+  "Outstanding loans & debt": "Outstanding loans & debt",
+  "Net of what you borrowed and repaid": "Net of what you borrowed and repaid",
+  "Investments": "Investments",
+  "Returns": "Returns",
+  "Principal": "Principal",
+  "Net worth change": "Net worth change",
+  "Earned income minus real spend, plus investment returns and gifts": "Earned income minus real spend, plus investment returns and gifts",
+  "No data for this period yet.": "No data for this period yet.",
+  "Position": "Position",
+  "This month": "This month",
+  "Shrinking": "Shrinking",
+  "Real earnings and returns, minus real spend. Loans and debt are left out.": "Real earnings and returns, minus real spend. Loans and debt are left out.",
+  "Builds": "Builds",
+  "Reduces": "Reduces",
+  "Real money": "Real money",
+  "Real savings": "Real savings",
+  "Earned income minus discretionary spend": "Earned income minus discretionary spend",
+  "Tracked separately": "Tracked separately",
+  "Not counted as earnings": "Not counted as earnings",
+  "Money in that you did not earn": "Money in that you did not earn",
+  "Gifts received": "Gifts received",
+  "{n} transactions": "{n} transactions",
+  "No transactions for this in the selected period.": "No transactions for this in the selected period.",
+  "Invested {invested} · Returns {returns}": "Invested {invested} · Returns {returns}",
+  "Real earnings, returns and gifts, minus real spend. Loans, debt and money moved into investments are left out.": "Real earnings, returns and gifts, minus real spend. Loans, debt and money moved into investments are left out.",
+  "Where your money came from and where it went, grouped by what it really was.": "Where your money came from and where it went, grouped by what it really was.",
+  "Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.": "Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.",
+  "Money in": "Money in",
+  "Money out": "Money out",
+  "cash, not net worth": "cash, not net worth",
+  "Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.": "Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.",
+  "Investment returns": "Investment returns",
+  "Debt repaid to you": "Debt repaid to you",
+  "Invested": "Invested",
+  "Moves cash, but not your net worth.": "Moves cash, but not your net worth.",
+  "Holdings": "Holdings",
+  "Assets you own: crypto, stocks, property and more.": "Assets you own: crypto, stocks, property and more.",
+  "Assets you own: crypto, stocks, property": "Assets you own: crypto, stocks, property",
+  "Net worth, grouped by intent": "Net worth, grouped by intent",
+  "Charts and insights": "Charts and insights",
+  "Refresh prices": "Refresh prices",
+  "Add holding": "Add holding",
+  "Edit holding": "Edit holding",
+  "Total value": "Total value",
+  "Total net worth now": "Total net worth now",
+  "Cash": "Cash",
+  "No holdings yet. Add Bitcoin, a stock, or any asset you own.": "No holdings yet. Add Bitcoin, a stock, or any asset you own.",
+  "Live": "Live",
+  "Price source": "Price source",
+  "Live crypto": "Live crypto",
+  "Coin": "Coin",
+  "Search Bitcoin, Ethereum...": "Search Bitcoin, Ethereum...",
+  "Priced automatically from CoinGecko": "Priced automatically from CoinGecko",
+  "Name": "Name",
+  "Admin": "Admin",
+  "Admin console": "Admin console",
+  "How Trakli is doing": "How Trakli is doing",
+  "Back to app": "Back to app",
+  "Overview": "Overview",
+  "Outreach": "Outreach",
+  "Discounts": "Discounts",
+  "Actions": "Actions",
+  "Reach out": "Reach out",
+  "User outreach": "User outreach",
+  "Send updates, nudges and campaigns to segments of your users. Plugs in as an action provider, so new outreach channels can be added without touching the console.": "Send updates, nudges and campaigns to segments of your users. Plugs in as an action provider, so new outreach channels can be added without touching the console.",
+  "Discounts and offers": "Discounts and offers",
+  "Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.": "Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.",
+  "Coming soon": "Coming soon",
+  "AI usage": "AI usage",
+  "Demographics": "Demographics",
+  "Where your users are and what they prefer.": "Where your users are and what they prefer.",
+  "New users": "New users",
+  "Total users": "Total users",
+  "Registered today": "Registered today",
+  "Registered this month": "Registered this month",
+  "Avg transactions / user": "Avg transactions / user",
+  "AI tokens used": "AI tokens used",
+  "View profile": "View profile",
+  "Grant discount": "Grant discount",
+  "Compose a personalized email with a call to action and send it to an audience.": "Compose a personalized email with a call to action and send it to an audience.",
+  "Message": "Message",
+  "Write your message...": "Write your message...",
+  "Write your message. Markdown is supported.": "Write your message. Markdown is supported.",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Heading": "Heading",
+  "Bullet list": "Bullet list",
+  "Numbered list": "Numbered list",
+  "Link": "Link",
+  "Personalize with:": "Personalize with:",
+  "Button label": "Button label",
+  "e.g. Open Trakli": "e.g. Open Trakli",
+  "Button link": "Button link",
+  "Audience": "Audience",
+  "All users": "All users",
+  "Active users": "Active users",
+  "Inactive users": "Inactive users",
+  "Send test to me": "Send test to me",
+  "Send now": "Send now",
+  "Preview": "Preview",
+  "Header image": "Header image",
+  "Add a campaign image": "Add a campaign image",
+  "Specific users": "Specific users",
+  "Choose recipients": "Choose recipients",
+  "Attach files": "Attach files",
+  "Uploading...": "Uploading...",
+  "Could not upload the image.": "Could not upload the image.",
+  "New outreach": "New outreach",
+  "Back": "Back",
+  "No outreaches yet": "No outreaches yet",
+  "Sent": "Sent",
+  "Emails you have sent to users.": "Emails you have sent to users.",
+  "Compose a new outreach.": "Compose a new outreach.",
+  "Back to users": "Back to users",
+  "Country": "Country",
+  "Last transaction": "Last transaction",
+  "Could not load this user.": "Could not load this user.",
+  "Pick at least one recipient.": "Pick at least one recipient.",
+  "Ask the assistant": "Ask the assistant",
+  "Still stuck? Ask the assistant anything about Trakli.": "Still stuck? Ask the assistant anything about Trakli.",
+  "Live preview": "Live preview",
+  "Start typing to preview the email.": "Start typing to preview the email.",
+  "This will email {audience}. Personalized per recipient.": "This will email {audience}. Personalized per recipient.",
+  "Sent to {count} recipients": "Sent to {count} recipients",
+  "Could not send the outreach.": "Could not send the outreach.",
+  "Search users": "Search users",
+  "No matches": "No matches",
+  "No data yet": "No data yet",
+  "Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.": "Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.",
+  "{users} users · {tx} transactions": "{users} users · {tx} transactions",
+  "Users": "Users",
+  "App metrics and engagement": "App metrics and engagement",
+  "7 days": "7 days",
+  "30 days": "30 days",
+  "90 days": "90 days",
+  "Joined": "Joined",
+  "No users yet": "No users yet",
+  "Metrics are not available yet.": "Metrics are not available yet.",
+  "Bitcoin, Apple, Rental flat...": "Bitcoin, Apple, Rental flat...",
+  "Symbol": "Symbol",
+  "Quantity": "Quantity",
+  "Currency": "Currency",
+  "Price per unit": "Price per unit",
+  "Name is required.": "Name is required.",
+  "Enter a quantity greater than 0.": "Enter a quantity greater than 0.",
+  "Pick a coin to price it automatically.": "Pick a coin to price it automatically.",
+  "Save changes": "Save changes",
+  "Holding updated": "Holding updated",
+  "Holding added": "Holding added",
+  "Holding deleted": "Holding deleted",
+  "Could not save the holding.": "Could not save the holding.",
+  "Could not delete the holding.": "Could not delete the holding.",
+  "Could not refresh prices.": "Could not refresh prices.",
+  "Prices refreshed": "Prices refreshed",
+  "Delete \"{name}\"?": "Delete \"{name}\"?",
+  "Discussions": "Discussions",
+  "Chat and ask about your finances": "Chat and ask about your finances",
+  "Could not save that setting. Please try again.": "Could not save that setting. Please try again.",
+  "Connected AI clients": "Connected AI clients",
+  "Connect an AI client like Claude Desktop or Cursor to your Trakli data over the Model Context Protocol.": "Connect an AI client like Claude Desktop or Cursor to your Trakli data over the Model Context Protocol.",
+  "MCP endpoint": "MCP endpoint",
+  "Copy": "Copy",
+  "Add this URL to your AI client and authenticate with one of the tokens below.": "Add this URL to your AI client and authenticate with one of the tokens below.",
+  "Access tokens": "Access tokens",
+  "Token name, e.g. Claude Desktop": "Token name, e.g. Claude Desktop",
+  "Generate token": "Generate token",
+  "Last used": "Last used",
+  "Never used": "Never used",
+  "Revoke": "Revoke",
+  "No tokens yet.": "No tokens yet.",
+  "Copy your token now": "Copy your token now",
+  "This token is shown only once. Store it somewhere safe before closing.": "This token is shown only once. Store it somewhere safe before closing."
 }
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index ffbc924..0d170d9 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -1,4 +1,50 @@
 {
+  "Recent imports": "Importaciones recientes",
+  "Needs review": "Por revisar",
+  "Analyzing": "Analizando",
+  "Imported": "Importado",
+  "Failed": "Fallido",
+  "Expired": "Caducado",
+  "Delete import": "Eliminar importación",
+  "this import": "esta importación",
+  "Import deleted.": "Importación eliminada.",
+  "Could not delete the import.": "No se pudo eliminar la importación.",
+  "Import failed": "La importación falló",
+  "Import expired": "Importación caducada",
+  "Import unavailable": "Importación no disponible",
+  "Assistant": "Asistente",
+  "Ask": "Preguntar",
+  "What can I help with?": "¿En qué puedo ayudarte?",
+  "How much did I spend last month?": "¿Cuánto gasté el mes pasado?",
+  "Ask about your money, log a transaction, or import a statement.": "Pregunta sobre tu dinero, registra una transacción o importa un extracto.",
+  "Log 20 for coffee from Cash": "Registrar 20 de café desde Efectivo",
+  "What's my biggest spending category?": "¿Cuál es mi mayor categoría de gasto?",
+  "Import my bank statement": "Importar mi extracto bancario",
+  "Attach a file": "Adjuntar un archivo",
+  "Import transactions from a CSV or PDF": "Importar transacciones desde un CSV o PDF",
+  "A photo or scan of a receipt": "Una foto o escaneo de un recibo",
+  "A bill or invoice document": "Una factura o documento de facturación",
+  "Any image from your device": "Cualquier imagen de tu dispositivo",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, hoja de cálculo o archivo de texto",
+  "{count} sections": "{count} secciones",
+  "Open in canvas": "Abrir en el lienzo",
+  "Canvas": "Lienzo",
+  "Working…": "Trabajando…",
+  "Could not complete the action": "No se pudo completar la acción",
+  "Could not dismiss the action": "No se pudo descartar la acción",
+  "Analyzing document…": "Analizando documento…",
+  "Ready to review": "Listo para revisar",
+  "Review import": "Revisar importación",
+  "Chat-first landing": "Inicio con chat primero",
+  "Open the AI chat as your home screen instead of the dashboard.": "Abrir el chat de IA como pantalla de inicio en lugar del panel.",
+  "Download as Markdown": "Descargar como Markdown",
+  "Print / Save as PDF": "Imprimir / Guardar como PDF",
+  "Toggle history": "Mostrar/ocultar historial",
+  "Exit full screen": "Salir de pantalla completa",
+  "Full screen": "Pantalla completa",
+  "No conversations yet": "Aún no hay conversaciones",
+  "Dismiss": "Descartar",
+  "Dismissed": "Descartado",
   "Allow Negative Balances": "Permitir saldos negativos",
   "Permit wallet balances to go below zero when spending or transferring.": "Permitir que los saldos de las billeteras queden por debajo de cero al gastar o transferir.",
   "App Settings": "Configuración de la aplicación",
@@ -640,5 +686,39 @@
   "Importing...": "Importando...",
   "Cancel": "Cancelar",
   "Import completed successfully.": "Importación completada con éxito.",
-  "{count} transactions imported successfully.": "{count} transacciones importadas con éxito."
+  "{count} transactions imported successfully.": "{count} transacciones importadas con éxito.",
+  "Add a few transactions and I'll start spotting trends for you.": "Añade algunas transacciones y empezaré a detectar tendencias para ti.",
+  "Ask about this": "Saber más",
+  "Cashflow": "Flujo de caja",
+  "Last few months": "Últimos meses",
+  "Spent this month": "Gastado este mes",
+  "What did I spend the most on this month?": "¿En qué gasté más este mes?",
+  "Savings rate": "Tasa de ahorro",
+  "How can I save more this month?": "¿Cómo puedo ahorrar más este mes?",
+  "Top category": "Categoría principal",
+  "Break down my {category} spending.": "Desglosa mis gastos de {category}.",
+  "Income vs last month": "Ingresos vs mes pasado",
+  "Why did my income change versus last month?": "¿Por qué cambiaron mis ingresos respecto al mes pasado?",
+  "How can I improve my savings rate?": "¿Cómo puedo mejorar mi tasa de ahorro?",
+  "Show my income from {party}.": "Muestra mis ingresos de {party}.",
+  "Show my transactions with {party}.": "Muestra mis transacciones con {party}.",
+  "You've saved {rate}% of your income this month.": "Has ahorrado el {rate}% de tus ingresos este mes.",
+  "{category} is your biggest spending category at {percent}% of the total.": "{category} es tu mayor categoría de gasto, con el {percent}% del total.",
+  "Your income is up {percent}% compared with last month.": "Tus ingresos subieron un {percent}% respecto al mes pasado.",
+  "Your income is down {percent}% compared with last month.": "Tus ingresos bajaron un {percent}% respecto al mes pasado.",
+  "{party} is your top income source this month.": "{party} es tu principal fuente de ingresos este mes.",
+  "You've spent {amount} so far this month.": "Has gastado {amount} en lo que va del mes.",
+  "{amount} of your spending went to {party}.": "{amount} de tus gastos fueron a {party}.",
+  "of income kept": "de los ingresos conservados",
+  "Cashflow trend": "Tendencia de flujo de caja",
+  "Not enough history yet": "Aún no hay suficiente historial",
+  "Avg expense": "Gasto medio",
+  "Pulse": "Resumen",
+  "Trends": "Tendencias",
+  "Net flow": "Flujo neto",
+  "Top categories": "Top categorías",
+  "of spend": "del gasto",
+  "this month": "este mes",
+  "per transaction": "por transacción",
+  "top destination": "destino principal"
 }
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index b5be124..2431551 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -1,4 +1,50 @@
 {
+  "Recent imports": "Imports récents",
+  "Needs review": "À vérifier",
+  "Analyzing": "Analyse en cours",
+  "Imported": "Importé",
+  "Failed": "Échec",
+  "Expired": "Expiré",
+  "Delete import": "Supprimer l'import",
+  "this import": "cet import",
+  "Import deleted.": "Import supprimé.",
+  "Could not delete the import.": "Impossible de supprimer l'import.",
+  "Import failed": "Échec de l'import",
+  "Import expired": "Import expiré",
+  "Import unavailable": "Import indisponible",
+  "Assistant": "Assistant",
+  "Ask": "Demander",
+  "What can I help with?": "Comment puis-je vous aider ?",
+  "How much did I spend last month?": "Combien ai-je dépensé le mois dernier ?",
+  "Ask about your money, log a transaction, or import a statement.": "Posez une question sur votre argent, enregistrez une transaction ou importez un relevé.",
+  "Log 20 for coffee from Cash": "Enregistrer 20 pour un café depuis Espèces",
+  "What's my biggest spending category?": "Quelle est ma plus grande catégorie de dépenses ?",
+  "Import my bank statement": "Importer mon relevé bancaire",
+  "Attach a file": "Joindre un fichier",
+  "Import transactions from a CSV or PDF": "Importer des transactions depuis un CSV ou un PDF",
+  "A photo or scan of a receipt": "Une photo ou un scan d'un reçu",
+  "A bill or invoice document": "Une facture ou un document de facturation",
+  "Any image from your device": "N'importe quelle image de votre appareil",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, tableur ou fichier texte",
+  "{count} sections": "{count} sections",
+  "Open in canvas": "Ouvrir dans le canevas",
+  "Canvas": "Canevas",
+  "Working…": "En cours…",
+  "Could not complete the action": "Impossible de terminer l'action",
+  "Could not dismiss the action": "Impossible d'annuler l'action",
+  "Analyzing document…": "Analyse du document…",
+  "Ready to review": "Prêt à vérifier",
+  "Review import": "Vérifier l'importation",
+  "Chat-first landing": "Page d'accueil en mode chat",
+  "Open the AI chat as your home screen instead of the dashboard.": "Ouvrir le chat IA comme écran d'accueil au lieu du tableau de bord.",
+  "Download as Markdown": "Télécharger en Markdown",
+  "Print / Save as PDF": "Imprimer / Enregistrer en PDF",
+  "Toggle history": "Afficher/masquer l'historique",
+  "Exit full screen": "Quitter le plein écran",
+  "Full screen": "Plein écran",
+  "No conversations yet": "Aucune conversation pour l'instant",
+  "Dismiss": "Ignorer",
+  "Dismissed": "Ignoré",
   "Allow Negative Balances": "Autoriser les soldes négatifs",
   "Permit wallet balances to go below zero when spending or transferring.": "Permettre aux soldes des portefeuilles de devenir négatifs lors des dépenses ou des transferts.",
   "App Settings": "Paramètres de l'application",
@@ -640,5 +686,39 @@
   "Importing...": "Importation...",
   "Cancel": "Annuler",
   "Import completed successfully.": "Importation terminée avec succès.",
-  "{count} transactions imported successfully.": "{count} transactions importées avec succès."
+  "{count} transactions imported successfully.": "{count} transactions importées avec succès.",
+  "Add a few transactions and I'll start spotting trends for you.": "Ajoutez quelques transactions et je commencerai à repérer des tendances pour vous.",
+  "Ask about this": "En savoir plus",
+  "Cashflow": "Flux de trésorerie",
+  "Last few months": "Ces derniers mois",
+  "Spent this month": "Dépensé ce mois-ci",
+  "What did I spend the most on this month?": "À quoi ai-je le plus dépensé ce mois-ci ?",
+  "Savings rate": "Taux d'épargne",
+  "How can I save more this month?": "Comment puis-je épargner davantage ce mois-ci ?",
+  "Top category": "Catégorie principale",
+  "Break down my {category} spending.": "Détaille mes dépenses de {category}.",
+  "Income vs last month": "Revenus vs mois dernier",
+  "Why did my income change versus last month?": "Pourquoi mes revenus ont-ils changé par rapport au mois dernier ?",
+  "How can I improve my savings rate?": "Comment puis-je améliorer mon taux d'épargne ?",
+  "Show my income from {party}.": "Affiche mes revenus de {party}.",
+  "Show my transactions with {party}.": "Affiche mes transactions avec {party}.",
+  "You've saved {rate}% of your income this month.": "Vous avez épargné {rate}% de vos revenus ce mois-ci.",
+  "{category} is your biggest spending category at {percent}% of the total.": "{category} est votre plus grande catégorie de dépenses, soit {percent}% du total.",
+  "Your income is up {percent}% compared with last month.": "Vos revenus ont augmenté de {percent}% par rapport au mois dernier.",
+  "Your income is down {percent}% compared with last month.": "Vos revenus ont baissé de {percent}% par rapport au mois dernier.",
+  "{party} is your top income source this month.": "{party} est votre première source de revenus ce mois-ci.",
+  "You've spent {amount} so far this month.": "Vous avez dépensé {amount} jusqu'à présent ce mois-ci.",
+  "{amount} of your spending went to {party}.": "{amount} de vos dépenses sont allées à {party}.",
+  "of income kept": "des revenus conservés",
+  "Cashflow trend": "Tendance de trésorerie",
+  "Not enough history yet": "Pas encore assez d'historique",
+  "Avg expense": "Dépense moyenne",
+  "Pulse": "Aperçu",
+  "Trends": "Tendances",
+  "Net flow": "Flux net",
+  "Top categories": "Top catégories",
+  "of spend": "des dépenses",
+  "this month": "ce mois-ci",
+  "per transaction": "par transaction",
+  "top destination": "destination principale"
 }
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
index f0baa39..3fd1ded 100644
--- a/i18n/locales/it.json
+++ b/i18n/locales/it.json
@@ -1,4 +1,50 @@
 {
+  "Recent imports": "Importazioni recenti",
+  "Needs review": "Da rivedere",
+  "Analyzing": "Analisi in corso",
+  "Imported": "Importato",
+  "Failed": "Non riuscito",
+  "Expired": "Scaduto",
+  "Delete import": "Elimina importazione",
+  "this import": "questa importazione",
+  "Import deleted.": "Importazione eliminata.",
+  "Could not delete the import.": "Impossibile eliminare l'importazione.",
+  "Import failed": "Importazione non riuscita",
+  "Import expired": "Importazione scaduta",
+  "Import unavailable": "Importazione non disponibile",
+  "Assistant": "Assistente",
+  "Ask": "Chiedi",
+  "What can I help with?": "Come posso aiutarti?",
+  "How much did I spend last month?": "Quanto ho speso il mese scorso?",
+  "Ask about your money, log a transaction, or import a statement.": "Chiedi informazioni sui tuoi soldi, registra una transazione o importa un estratto conto.",
+  "Log 20 for coffee from Cash": "Registra 20 per il caffè da Contanti",
+  "What's my biggest spending category?": "Qual è la mia categoria di spesa più grande?",
+  "Import my bank statement": "Importa il mio estratto conto",
+  "Attach a file": "Allega un file",
+  "Import transactions from a CSV or PDF": "Importa transazioni da un CSV o PDF",
+  "A photo or scan of a receipt": "Una foto o scansione di una ricevuta",
+  "A bill or invoice document": "Una bolletta o un documento di fattura",
+  "Any image from your device": "Qualsiasi immagine dal tuo dispositivo",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, foglio di calcolo o file di testo",
+  "{count} sections": "{count} sezioni",
+  "Open in canvas": "Apri nel canvas",
+  "Canvas": "Canvas",
+  "Working…": "In corso…",
+  "Could not complete the action": "Impossibile completare l'azione",
+  "Could not dismiss the action": "Impossibile annullare l'azione",
+  "Analyzing document…": "Analisi del documento…",
+  "Ready to review": "Pronto per la revisione",
+  "Review import": "Rivedi importazione",
+  "Chat-first landing": "Pagina iniziale con chat",
+  "Open the AI chat as your home screen instead of the dashboard.": "Apri la chat IA come schermata iniziale invece della dashboard.",
+  "Download as Markdown": "Scarica come Markdown",
+  "Print / Save as PDF": "Stampa / Salva come PDF",
+  "Toggle history": "Mostra/nascondi cronologia",
+  "Exit full screen": "Esci dalla modalità schermo intero",
+  "Full screen": "Schermo intero",
+  "No conversations yet": "Ancora nessuna conversazione",
+  "Dismiss": "Ignora",
+  "Dismissed": "Ignorato",
   "Allow Negative Balances": "Consenti Saldi Negativi",
   "Permit wallet balances to go below zero when spending or transferring.": "Consente ai saldi dei portafogli di scendere sotto zero durante spese o trasferimenti.",
   "App Settings": "Impostazioni App",
diff --git a/i18n/locales/pt.json b/i18n/locales/pt.json
index 42b0d1a..f8b9f5d 100644
--- a/i18n/locales/pt.json
+++ b/i18n/locales/pt.json
@@ -1,4 +1,50 @@
 {
+  "Recent imports": "Importações recentes",
+  "Needs review": "A rever",
+  "Analyzing": "A analisar",
+  "Imported": "Importado",
+  "Failed": "Falhou",
+  "Expired": "Expirado",
+  "Delete import": "Eliminar importação",
+  "this import": "esta importação",
+  "Import deleted.": "Importação eliminada.",
+  "Could not delete the import.": "Não foi possível eliminar a importação.",
+  "Import failed": "A importação falhou",
+  "Import expired": "Importação expirada",
+  "Import unavailable": "Importação indisponível",
+  "Assistant": "Assistente",
+  "Ask": "Perguntar",
+  "What can I help with?": "Como posso ajudar?",
+  "How much did I spend last month?": "Quanto gastei no mês passado?",
+  "Ask about your money, log a transaction, or import a statement.": "Pergunte sobre o seu dinheiro, registre uma transação ou importe um extrato.",
+  "Log 20 for coffee from Cash": "Registrar 20 de café em Dinheiro",
+  "What's my biggest spending category?": "Qual é a minha maior categoria de gastos?",
+  "Import my bank statement": "Importar meu extrato bancário",
+  "Attach a file": "Anexar um arquivo",
+  "Import transactions from a CSV or PDF": "Importar transações de um CSV ou PDF",
+  "A photo or scan of a receipt": "Uma foto ou digitalização de um recibo",
+  "A bill or invoice document": "Uma conta ou documento de fatura",
+  "Any image from your device": "Qualquer imagem do seu dispositivo",
+  "CSV, PDF, spreadsheet or text file": "CSV, PDF, planilha ou arquivo de texto",
+  "{count} sections": "{count} seções",
+  "Open in canvas": "Abrir no canvas",
+  "Canvas": "Canvas",
+  "Working…": "Processando…",
+  "Could not complete the action": "Não foi possível concluir a ação",
+  "Could not dismiss the action": "Não foi possível descartar a ação",
+  "Analyzing document…": "Analisando documento…",
+  "Ready to review": "Pronto para revisar",
+  "Review import": "Revisar importação",
+  "Chat-first landing": "Início com chat primeiro",
+  "Open the AI chat as your home screen instead of the dashboard.": "Abrir o chat de IA como tela inicial em vez do painel.",
+  "Download as Markdown": "Baixar como Markdown",
+  "Print / Save as PDF": "Imprimir / Salvar como PDF",
+  "Toggle history": "Mostrar/ocultar histórico",
+  "Exit full screen": "Sair da tela cheia",
+  "Full screen": "Tela cheia",
+  "No conversations yet": "Ainda não há conversas",
+  "Dismiss": "Descartar",
+  "Dismissed": "Descartado",
   "Allow Negative Balances": "Permitir saldos negativos",
   "Permit wallet balances to go below zero when spending or transferring.": "Permitir que os saldos das carteiras fiquem abaixo de zero ao gastar ou transferir.",
   "App Settings": "Configurações do App",
diff --git a/layouts/admin.vue b/layouts/admin.vue
new file mode 100644
index 0000000..ef90495
--- /dev/null
+++ b/layouts/admin.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="admin-root">
+    <slot />
+    <NotificationsContainer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import NotificationsContainer from '@/components/NotificationsContainer.vue';
+import { useAuth } from '@/composables/useAuth';
+
+const { user, fetchUser } = useAuth();
+
+onMounted(() => {
+  if (!user.value) {
+    fetchUser();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.admin-root {
+  min-height: 100vh;
+  background: $bg-gray;
+}
+</style>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index cf535cf..f8d5695 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -25,7 +25,7 @@ import LearningModal from '@/components/modals/LearningModal.vue';
 import { useAuth } from '@/composables/useAuth';
 import { useSidebar } from '@/composables/useSidebar';
 
-const { fetchUser } = useAuth();
+const { user, fetchUser } = useAuth();
 const { sidebarCollapsed } = useSidebar();
 
 const showLearningModal = ref(false);
@@ -39,7 +39,9 @@ provide('learningModal', {
 });
 
 onMounted(() => {
-  fetchUser();
+  if (!user.value) {
+    fetchUser();
+  }
 });
 </script>
 
diff --git a/layouts/onboarding.vue b/layouts/onboarding.vue
index f88482c..4a2fc72 100644
--- a/layouts/onboarding.vue
+++ b/layouts/onboarding.vue
@@ -24,7 +24,10 @@ import ThemeToggleButton from '@/components/ThemeToggleButton.vue';
 
 .onboarding-layout {
   min-height: 100vh;
-  background: $bg-light;
+  background:
+    radial-gradient(72% 55% at 50% -8%, rgba(var(--color-primary-rgb), 0.13), transparent 72%),
+    radial-gradient(50% 40% at 100% 100%, rgba(var(--color-primary-rgb), 0.07), transparent 70%),
+    $bg-light;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/middleware/admin.ts b/middleware/admin.ts
new file mode 100644
index 0000000..04dae4d
--- /dev/null
+++ b/middleware/admin.ts
@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware(async () => {
+  const { user, isAuthenticated, fetchUser } = useAuth();
+
+  if (!isAuthenticated.value) {
+    return navigateTo('/login');
+  }
+
+  if (user.value && !('is_admin' in user.value)) {
+    await fetchUser();
+  }
+
+  if (!user.value?.is_admin) {
+    return navigateTo('/dashboard');
+  }
+});
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 1ece723..746774b 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,4 +1,5 @@
 import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
+import { resolveLandingPath } from '~/composables/useLanding';
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
   const { isAuthenticated } = useAuth();
@@ -15,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     // Fast path: cookie says complete
     if (isComplete.value) {
       const returnTo = to.query.returnTo as string;
-      return navigateTo(returnTo || '/dashboard');
+      return navigateTo(returnTo || (await resolveLandingPath()));
     }
 
     // Check API to confirm
@@ -27,7 +28,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
       if (isOnboardingComplete) {
         setComplete();
         const returnTo = to.query.returnTo as string;
-        return navigateTo(returnTo || '/dashboard');
+        return navigateTo(returnTo || (await resolveLandingPath()));
       }
     } catch (error) {
       console.error('Failed to check onboarding status:', error);
diff --git a/middleware/guest.ts b/middleware/guest.ts
index 0add070..07c2063 100644
--- a/middleware/guest.ts
+++ b/middleware/guest.ts
@@ -1,7 +1,9 @@
-export default defineNuxtRouteMiddleware((_to, _from) => {
+import { resolveLandingPath } from '~/composables/useLanding';
+
+export default defineNuxtRouteMiddleware(async (_to, _from) => {
   const { isAuthenticated } = useAuth();
 
   if (isAuthenticated.value) {
-    return navigateTo('/dashboard');
+    return navigateTo(await resolveLandingPath());
   }
 });
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d59f5ed..ade232b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,10 +1,24 @@
 import { defineNuxtConfig } from 'nuxt/config';
+import Icons from 'unplugin-icons/vite';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  vite: {
+    plugins: [Icons({ compiler: 'vue3', autoInstall: false })]
+  },
   compatibilityDate: '2024-04-03',
   devtools: { enabled: false },
   ssr: true,
+  // Plugin client UI ships as Nuxt layers consumed the same way as the shared
+  // ui-kit, e.g. extends: ['github:trakli/ui-kit', 'github:trakli/<plugin>-ui'].
+  // A layer registers a component for a slot key via
+  // useExtensionSlots().registerComponent(); DescriptorRenderer resolves it
+  // when a descriptor sets `ui.component`. Host adoption of the layers is
+  // deferred, so the list is empty for now.
+  extends: [],
+  routeRules: {
+    '/ai-insights': { redirect: '/assistant' }
+  },
   modules: ['@nuxtjs/i18n'],
   i18n: {
     locales: [
@@ -27,7 +41,11 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      apiBase: process.env.NUXT_PUBLIC_API_BASE_URL || 'https://api.dev.trakli.app/api/v1'
+      apiBase: process.env.NUXT_PUBLIC_API_BASE_URL || 'https://api.dev.trakli.app/api/v1',
+      reverbKey: process.env.NUXT_PUBLIC_REVERB_KEY || '',
+      reverbHost: process.env.NUXT_PUBLIC_REVERB_HOST || 'localhost',
+      reverbPort: process.env.NUXT_PUBLIC_REVERB_PORT || '6001',
+      reverbScheme: process.env.NUXT_PUBLIC_REVERB_SCHEME || 'http'
     }
   },
   app: {
diff --git a/package-lock.json b/package-lock.json
index 30fd7ba..871eedb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-app",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-app",
-      "version": "1.0.2",
+      "version": "1.1.2",
       "hasInstallScript": true,
       "dependencies": {
         "@dicebear/collection": "^9.2.4",
@@ -15,9 +15,12 @@
         "@nuxtjs/i18n": "^10.2.1",
         "apexcharts": "^5.3.3",
         "country-flag-icons": "^1.5.19",
+        "laravel-echo": "^2.3.7",
         "libphonenumber-js": "^1.12.9",
         "lucide-vue-next": "^0.525.0",
+        "markdown-it": "^14.2.0",
         "nuxt": "^3.12.4",
+        "pusher-js": "^8.5.0",
         "radix-vue": "^1.9.17",
         "vue": "latest",
         "vue3-apexcharts": "^1.8.0"
@@ -25,9 +28,11 @@
       "devDependencies": {
         "@commitlint/cli": "^19.8.1",
         "@commitlint/config-conventional": "^19.8.1",
+        "@iconify-json/solar": "^1.2.5",
         "@nuxt/eslint": "^1.9.0",
         "@nuxt/test-utils": "^3.21.0",
         "@rushstack/eslint-patch": "^1.10.3",
+        "@types/markdown-it": "^14.1.2",
         "@typescript-eslint/eslint-plugin": "^8.45.0",
         "@typescript-eslint/parser": "^8.45.0",
         "@vitejs/plugin-vue": "^6.0.3",
@@ -41,6 +46,7 @@
         "happy-dom": "^20.0.11",
         "prettier": "^3.3.3",
         "sass": "^1.89.0",
+        "unplugin-icons": "^23.0.1",
         "vitest": "^3.2.4"
       }
     },
@@ -1953,6 +1959,35 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/solar": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/solar/-/solar-1.2.5.tgz",
+      "integrity": "sha512-WMAiNwchU8zhfrySww6KQBRIBbsQ6SvgIu2yA+CHGyMima/0KQwT5MXogrZPJGoQF+1Ye3Qj6K+1CiyNn3YkoA==",
+      "dev": true,
+      "license": "CC-BY-4.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.3.tgz",
+      "integrity": "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "import-meta-resolve": "^4.2.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
@@ -3274,6 +3309,7 @@
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
       "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "license": "MIT",
       "optional": true,
       "peer": true,
       "engines": {
@@ -5412,6 +5448,31 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.5.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.0.tgz",
@@ -11407,6 +11468,27 @@
       "integrity": "sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==",
       "license": "MIT"
     },
+    "node_modules/laravel-echo": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.3.7.tgz",
+      "integrity": "sha512-6NoPtOk16PuaykVgcV1MV5665VPtrbyvacBD6AJ8NJdRjTwrOwKrgOYHgq4bz5E1zUbbVi2UJfMN7P7D/yceyQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "pusher-js": "*",
+        "socket.io-client": "*"
+      },
+      "peerDependenciesMeta": {
+        "pusher-js": {
+          "optional": true
+        },
+        "socket.io-client": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/launch-editor": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
@@ -11493,6 +11575,25 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.1.tgz",
+      "integrity": "sha512-wVoTjP4Q6R0NW5hiZkVJaFZPWgtXfoGF+6LucL3/FtiNjmcHhYjEr5f1Kqjirc1nBW07J/ZuRFumqr2oqccEWg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -11710,6 +11811,33 @@
         "source-map-js": "^1.2.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.2.0.tgz",
+      "integrity": "sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.1",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -11724,6 +11852,12 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
       "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/meow": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz",
@@ -12461,6 +12595,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/ofetch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
@@ -13491,6 +13639,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pusher-js": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.5.0.tgz",
+      "integrity": "sha512-V7uzGi9bqOOOyM/6IkJdpFyjGZj7llz1v0oWnYkZKcYLvbz6VcHVLmzKqkvegjuMumpfIEKGLmWHwFb39XFCpw==",
+      "license": "MIT",
+      "dependencies": {
+        "tweetnacl": "^1.0.3"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -15007,6 +15173,12 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
+      "license": "Unlicense"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -15122,6 +15294,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
@@ -15257,6 +15435,43 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/unplugin-icons": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-23.0.1.tgz",
+      "integrity": "sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/utils": "^3.1.0",
+        "local-pkg": "^1.1.2",
+        "obug": "^2.1.1",
+        "unplugin": "^2.3.11"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@svgr/core": ">=7.0.0",
+        "@svgx/core": "^1.0.1",
+        "@vue/compiler-sfc": "^3.0.2",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@svgr/core": {
+          "optional": true
+        },
+        "@svgx/core": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.5.tgz",
diff --git a/package.json b/package.json
index 42b0b8e..51b4323 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-app",
-  "version": "1.1.2",
+  "version": "2.0.0-beta.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -25,9 +25,12 @@
     "@nuxtjs/i18n": "^10.2.1",
     "apexcharts": "^5.3.3",
     "country-flag-icons": "^1.5.19",
+    "laravel-echo": "^2.3.7",
     "libphonenumber-js": "^1.12.9",
     "lucide-vue-next": "^0.525.0",
+    "markdown-it": "^14.2.0",
     "nuxt": "^3.12.4",
+    "pusher-js": "^8.5.0",
     "radix-vue": "^1.9.17",
     "vue": "latest",
     "vue3-apexcharts": "^1.8.0"
@@ -35,9 +38,11 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@iconify-json/solar": "^1.2.5",
     "@nuxt/eslint": "^1.9.0",
     "@nuxt/test-utils": "^3.21.0",
     "@rushstack/eslint-patch": "^1.10.3",
+    "@types/markdown-it": "^14.1.2",
     "@typescript-eslint/eslint-plugin": "^8.45.0",
     "@typescript-eslint/parser": "^8.45.0",
     "@vitejs/plugin-vue": "^6.0.3",
@@ -51,6 +56,7 @@
     "happy-dom": "^20.0.11",
     "prettier": "^3.3.3",
     "sass": "^1.89.0",
+    "unplugin-icons": "^23.0.1",
     "vitest": "^3.2.4"
   }
 }
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 0000000..3bf207c
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,1007 @@
+<template>
+  <div class="console">
+    <aside class="rail">
+      <div class="rail__brand">
+        <Logo size="small" />
+        <span class="rail__badge"><ShieldCheck class="rail__badge-icon" />{{ t('Admin') }}</span>
+      </div>
+
+      <nav class="rail__nav">
+        <button
+          v-for="section in sections"
+          :key="section.id"
+          class="nav-item"
+          :class="{ 'nav-item--active': activeSection === section.id }"
+          @click="activeSection = section.id"
+        >
+          <component :is="section.icon" class="nav-item__icon" />
+          <span>{{ section.label }}</span>
+        </button>
+      </nav>
+
+      <div class="rail__foot">
+        <div v-if="user" class="rail__user">
+          <span class="rail__user-name">{{ user.first_name }} {{ user.last_name }}</span>
+          <span class="rail__user-email">{{ user.email }}</span>
+        </div>
+        <button class="rail__exit" @click="exit">
+          <ArrowLeft class="rail__exit-icon" />
+          <span>{{ t('Back to app') }}</span>
+        </button>
+      </div>
+    </aside>
+
+    <main class="panel">
+      <section v-if="activeSection === 'overview'">
+        <header class="panel__head">
+          <div>
+            <h1 class="panel__title">{{ t('Overview') }}</h1>
+            <p class="panel__sub">{{ heroSummary }}</p>
+          </div>
+          <div class="range">
+            <button
+              v-for="opt in rangeOptions"
+              :key="opt.days"
+              class="range-pill"
+              :class="{ 'range-pill--active': days === opt.days }"
+              @click="setDays(opt.days)"
+            >
+              {{ t(opt.label) }}
+            </button>
+          </div>
+        </header>
+
+        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+        <p v-else-if="metricsError" class="state state--note">{{ metricsError }}</p>
+
+        <template v-else>
+          <div class="kpis">
+            <div v-for="kpi in kpis" :key="kpi.key" class="kpi" :class="`tone-${kpi.tone}`">
+              <span class="kpi__icon"><component :is="kpi.icon" /></span>
+              <span class="kpi__value">{{ kpi.value }}</span>
+              <span class="kpi__label">{{ kpi.label }}</span>
+              <span v-if="kpi.sub" class="kpi__sub">{{ kpi.sub }}</span>
+            </div>
+          </div>
+
+          <div class="grid-2">
+            <TCard>
+              <template #header>{{ t('New users') }}</template>
+              <ClientOnly>
+                <ApexChart
+                  type="area"
+                  height="220"
+                  :options="areaOptions(usersChart.categories, chartColors.primary)"
+                  :series="[{ name: t('New users'), data: usersChart.data }]"
+                />
+              </ClientOnly>
+            </TCard>
+            <TCard>
+              <template #header>{{ t('Transactions') }}</template>
+              <ClientOnly>
+                <ApexChart
+                  type="area"
+                  height="220"
+                  :options="areaOptions(txChart.categories, chartColors.income)"
+                  :series="[{ name: t('Transactions'), data: txChart.data }]"
+                />
+              </ClientOnly>
+            </TCard>
+          </div>
+
+          <div class="grid-2">
+            <TCard v-for="rank in rankings" :key="rank.key">
+              <template #header>{{ rank.label }}</template>
+              <ol v-if="rank.rows.length" class="ranking">
+                <li v-for="(row, k) in rank.rows" :key="k" class="ranking-row">
+                  <span class="ranking-rank">{{ k + 1 }}</span>
+                  <span class="ranking-label">{{ row.label }}</span>
+                  <span class="ranking-bar"
+                    ><span class="ranking-fill" :style="{ width: rowWidth(rank.rows, row.value) }"
+                  /></span>
+                  <span class="ranking-value">{{ row.value }}</span>
+                </li>
+              </ol>
+              <p v-else class="state">{{ t('No data yet') }}</p>
+            </TCard>
+          </div>
+        </template>
+      </section>
+
+      <section v-else-if="activeSection === 'demographics'">
+        <header class="panel__head">
+          <div>
+            <h1 class="panel__title">{{ t('Demographics') }}</h1>
+            <p class="panel__sub">{{ t('Where your users are and what they prefer.') }}</p>
+          </div>
+        </header>
+        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+        <div v-else class="grid-2">
+          <TCard v-for="metric in demographicsMetrics" :key="metric.key">
+            <template #header>{{ metric.label }}</template>
+            <ol v-if="metric.rows.length" class="ranking">
+              <li v-for="(row, k) in metric.rows" :key="k" class="ranking-row">
+                <span class="ranking-rank">{{ k + 1 }}</span>
+                <span class="ranking-label">{{ row.label }}</span>
+                <span class="ranking-bar"
+                  ><span class="ranking-fill" :style="{ width: rowWidth(metric.rows, row.value) }"
+                /></span>
+                <span class="ranking-value">{{ row.value }}</span>
+              </li>
+            </ol>
+            <p v-else class="state">{{ t('No data yet') }}</p>
+          </TCard>
+        </div>
+      </section>
+
+      <section v-else-if="activeSection === 'users'">
+        <UserDetail v-if="selectedUserId" :user-id="selectedUserId" @back="selectedUserId = null" />
+        <template v-else>
+          <header class="panel__head">
+            <h1 class="panel__title">{{ t('Users') }}</h1>
+            <div class="search">
+              <Search class="search__icon" />
+              <input v-model="userQuery" class="search__input" :placeholder="t('Search users')" />
+            </div>
+          </header>
+          <TCard>
+            <table v-if="filteredUsers.length" class="data-table data-table--clickable">
+              <thead>
+                <tr>
+                  <th>{{ t('Name') }}</th>
+                  <th>{{ t('Email') }}</th>
+                  <th>{{ t('Joined') }}</th>
+                  <th class="data-table__actions-col">{{ t('Actions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="u in filteredUsers" :key="u.id" @click="selectedUserId = u.id">
+                  <td class="data-table__name">{{ u.first_name }} {{ u.last_name }}</td>
+                  <td class="data-table__muted">{{ u.email }}</td>
+                  <td class="data-table__muted">{{ formatDate(u.created_at) }}</td>
+                  <td class="data-table__actions" @click.stop>
+                    <TDropdown>
+                      <template #trigger>
+                        <button class="row-action" :aria-label="t('Actions')">
+                          <MoreHorizontal />
+                        </button>
+                      </template>
+                      <TDropdownItem @click="selectedUserId = u.id"
+                        ><Eye class="item-icon" />{{ t('View profile') }}</TDropdownItem
+                      >
+                      <TDropdownItem><Send class="item-icon" />{{ t('Reach out') }}</TDropdownItem>
+                      <TDropdownItem
+                        ><Gift class="item-icon" />{{ t('Grant discount') }}</TDropdownItem
+                      >
+                    </TDropdown>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p v-else class="state">{{ users.length ? t('No matches') : t('No users yet') }}</p>
+          </TCard>
+        </template>
+      </section>
+
+      <section v-else-if="activeSection === 'outreach'">
+        <header class="panel__head">
+          <div>
+            <h1 class="panel__title">{{ t('User outreach') }}</h1>
+            <p class="panel__sub">
+              {{ composing ? t('Compose a new outreach.') : t('Emails you have sent to users.') }}
+            </p>
+          </div>
+          <TButton
+            v-if="!composing"
+            :text="t('New outreach')"
+            :full-width="false"
+            @click="composing = true"
+          />
+          <button v-else class="link-back" @click="composing = false">
+            <ArrowLeft class="link-back__icon" />{{ t('Back') }}
+          </button>
+        </header>
+
+        <TCard v-if="composing">
+          <OutreachComposer @sent="onOutreachSent" />
+        </TCard>
+        <TCard v-else>
+          <table v-if="outreaches.length" class="data-table">
+            <thead>
+              <tr>
+                <th>{{ t('Subject') }}</th>
+                <th>{{ t('Audience') }}</th>
+                <th>{{ t('Sent') }}</th>
+                <th>{{ t('Date') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="o in outreaches" :key="o.id">
+                <td class="data-table__name">{{ o.subject }}</td>
+                <td class="data-table__muted">{{ o.audience }}</td>
+                <td>{{ o.sent }}</td>
+                <td class="data-table__muted">{{ formatDate(o.created_at) }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <p v-else class="state">{{ t('No outreaches yet') }}</p>
+        </TCard>
+      </section>
+
+      <section v-else-if="activeSection === 'discounts'">
+        <SectionPlaceholder
+          :icon="IconDiscount"
+          :title="t('Discounts and offers')"
+          :body="
+            t(
+              'Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.'
+            )
+          "
+        />
+      </section>
+
+      <section v-else>
+        <SectionPlaceholder
+          :icon="IconUsage"
+          :title="t('AI usage')"
+          :body="
+            t(
+              'Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.'
+            )
+          "
+        />
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, h, defineAsyncComponent, type Component } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  LayoutDashboard,
+  Globe,
+  Users,
+  UserPlus,
+  CalendarDays,
+  Activity,
+  Send,
+  Tag,
+  Cpu,
+  Search,
+  ShieldCheck,
+  ArrowLeft,
+  MoreHorizontal,
+  Eye,
+  Gift
+} from 'lucide-vue-next';
+import IconDiscount from '~icons/solar/tag-price-bold-duotone';
+import IconUsage from '~icons/solar/cpu-bold-duotone';
+import Logo from '@/components/Logo.vue';
+import TCard from '@/components/TCard.vue';
+import TButton from '@/components/TButton.vue';
+import TDropdown from '@/components/TDropdown.vue';
+import TDropdownItem from '@/components/TDropdownItem.vue';
+import OutreachComposer from '@/components/admin/OutreachComposer.vue';
+import UserDetail from '@/components/admin/UserDetail.vue';
+import {
+  adminApi,
+  type EngagementReport,
+  type Metric,
+  type AdminUser,
+  type OutreachSummary
+} from '@/services/api/adminApi';
+
+definePageMeta({
+  layout: 'admin',
+  middleware: ['auth', 'admin']
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const { user } = useAuth();
+
+const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'));
+const chartColors = { primary: '#047844', income: '#16a34a' };
+
+const SectionPlaceholder = (props: { icon: Component; title: string; body: string }) =>
+  h('div', { class: 'placeholder' }, [
+    h(props.icon, { class: 'placeholder__icon' }),
+    h('h2', { class: 'placeholder__title' }, props.title),
+    h('p', { class: 'placeholder__body' }, props.body),
+    h('span', { class: 'placeholder__tag' }, t('Coming soon'))
+  ]);
+
+const sections = [
+  { id: 'overview', label: t('Overview'), icon: LayoutDashboard },
+  { id: 'demographics', label: t('Demographics'), icon: Globe },
+  { id: 'users', label: t('Users'), icon: Users },
+  { id: 'outreach', label: t('Outreach'), icon: Send },
+  { id: 'discounts', label: t('Discounts'), icon: Tag },
+  { id: 'usage', label: t('AI usage'), icon: Cpu }
+];
+const activeSection = ref('overview');
+const userQuery = ref('');
+const selectedUserId = ref<number | null>(null);
+const composing = ref(false);
+const outreaches = ref<OutreachSummary[]>([]);
+
+const loading = ref(true);
+const metricsError = ref('');
+const report = ref<EngagementReport | null>(null);
+const users = ref<AdminUser[]>([]);
+const days = ref(30);
+
+const rangeOptions = [
+  { days: 7, label: '7 days' },
+  { days: 30, label: '30 days' },
+  { days: 90, label: '90 days' }
+];
+
+const metricByKey = (key: string): Metric | undefined =>
+  (report.value?.groups || []).flatMap((g) => g.metrics).find((m) => m.key === key);
+
+const fmt = (n: number | null | undefined): string => new Intl.NumberFormat().format(n ?? 0);
+
+const heroSummary = computed(() =>
+  t('{users} users · {tx} transactions', {
+    users: metricByKey('total_users')?.value ?? 0,
+    tx: metricByKey('total_transactions')?.value ?? 0
+  })
+);
+
+const kpis = computed(() => [
+  {
+    key: 'total_users',
+    label: t('Total users'),
+    value: fmt(metricByKey('total_users')?.value),
+    icon: Users,
+    tone: 'primary'
+  },
+  {
+    key: 'today',
+    label: t('Registered today'),
+    value: fmt(metricByKey('registrations_today')?.value),
+    icon: UserPlus,
+    tone: 'income'
+  },
+  {
+    key: 'month',
+    label: t('Registered this month'),
+    value: fmt(metricByKey('registrations_month')?.value),
+    icon: CalendarDays,
+    tone: 'info'
+  },
+  {
+    key: 'avg',
+    label: t('Avg transactions / user'),
+    value: fmt(metricByKey('avg_transactions_per_user')?.value),
+    icon: Activity,
+    tone: 'accent'
+  },
+  {
+    key: 'tokens',
+    label: t('AI tokens used'),
+    value: '-',
+    sub: t('Coming soon'),
+    icon: Cpu,
+    tone: 'primary'
+  }
+]);
+
+const chartFor = (key: string) => {
+  const series = metricByKey(key)?.series || [];
+  return { data: series.map((p) => p.value), categories: series.map((p) => p.date) };
+};
+const usersChart = computed(() => chartFor('new_users_series'));
+const txChart = computed(() => chartFor('transactions_series'));
+
+const rankings = computed(() =>
+  ['most_active_users', 'most_used_features']
+    .map((k) => metricByKey(k))
+    .filter((m): m is Metric => !!m)
+);
+
+const demographicsMetrics = computed(
+  () => (report.value?.groups || []).find((g) => g.key === 'demographics')?.metrics ?? []
+);
+
+const areaOptions = (categories: string[], color: string) => ({
+  chart: { toolbar: { show: false }, zoom: { enabled: false }, fontFamily: 'inherit' },
+  dataLabels: { enabled: false },
+  stroke: { curve: 'smooth', width: 2 },
+  fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.02 } },
+  colors: [color],
+  xaxis: {
+    categories,
+    labels: { show: false },
+    axisTicks: { show: false },
+    axisBorder: { show: false },
+    tooltip: { enabled: false }
+  },
+  yaxis: { labels: { show: false } },
+  grid: { borderColor: 'rgba(15,23,42,0.06)', padding: { left: 8, right: 8 } },
+  tooltip: { x: { show: true } }
+});
+
+const filteredUsers = computed(() => {
+  const q = userQuery.value.trim().toLowerCase();
+  if (!q) return users.value;
+  return users.value.filter((u) =>
+    `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q)
+  );
+});
+
+const exit = () => router.push('/dashboard');
+
+const load = async () => {
+  loading.value = true;
+  metricsError.value = '';
+
+  const [metricsResult, usersResult] = await Promise.allSettled([
+    adminApi.metrics({ days: days.value }),
+    adminApi.users()
+  ]);
+
+  if (metricsResult.status === 'fulfilled') {
+    report.value = metricsResult.value;
+  } else {
+    report.value = null;
+    metricsError.value = t('Metrics are not available yet.');
+  }
+
+  users.value = usersResult.status === 'fulfilled' ? usersResult.value : [];
+  loading.value = false;
+};
+
+const setDays = (value: number) => {
+  if (days.value === value) return;
+  days.value = value;
+  load();
+};
+
+const loadOutreaches = async () => {
+  try {
+    outreaches.value = await adminApi.outreachHistory();
+  } catch {
+    outreaches.value = [];
+  }
+};
+
+const onOutreachSent = () => {
+  composing.value = false;
+  loadOutreaches();
+};
+
+const rowWidth = (rows: { value: number }[], value: number): string => {
+  const max = Math.max(1, ...rows.map((r) => r.value));
+  return `${Math.max(4, Math.round((value / max) * 100))}%`;
+};
+
+const formatDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
+
+onMounted(() => {
+  load();
+  loadOutreaches();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.console {
+  display: grid;
+  grid-template-columns: 256px 1fr;
+  min-height: 100vh;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.25rem 1rem;
+  background: $bg-white;
+  border-right: 1px solid $border-color;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+
+  @media (max-width: $breakpoint-md) {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid $border-color;
+    gap: 1rem;
+  }
+}
+
+.rail__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.rail__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: $radius-md;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+}
+
+.rail__badge-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.rail__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.6rem 0.75rem;
+  border: none;
+  background: transparent;
+  border-radius: $radius-lg;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: $transition-fast;
+
+  &:hover {
+    background: $bg-light;
+  }
+
+  &--active {
+    background: $primary-light;
+    color: $primary-dark;
+    font-weight: $font-semibold;
+  }
+}
+
+.nav-item__icon {
+  width: 18px;
+  height: 18px;
+}
+
+.rail__foot {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  @media (max-width: $breakpoint-md) {
+    margin-top: 0;
+  }
+}
+
+.rail__user {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.5rem;
+}
+
+.rail__user-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.rail__user-email {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rail__exit {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid $border-color;
+  background: $bg-white;
+  border-radius: $radius-lg;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.rail__exit-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.panel {
+  padding: 1.75rem 2rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.25rem;
+  }
+}
+
+.panel__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.25rem;
+}
+
+.panel__title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.panel__sub {
+  margin: 0.25rem 0 0;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.range {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.range-pill {
+  border: 1px solid $border-color;
+  background: $bg-white;
+  border-radius: $radius-lg;
+  padding: 0.4rem 0.8rem;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: $transition-fast;
+
+  &--active {
+    background: $primary;
+    color: $text-inverse;
+    border-color: $primary;
+  }
+}
+
+.state {
+  padding: 2rem;
+  text-align: center;
+  color: $text-muted;
+
+  &--note {
+    background: $bg-light;
+    border-radius: $radius-xl;
+  }
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.kpi {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 0.75rem;
+  align-items: center;
+  padding: 1rem 1.1rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  box-shadow: $elevation-1;
+}
+
+.kpi__icon {
+  grid-row: 1 / 3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: $radius-lg;
+  background: $bg-light;
+  color: var(--tone, #{$primary});
+
+  svg {
+    width: 19px;
+    height: 19px;
+  }
+}
+
+.kpi__value {
+  font-size: 1.45rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+  line-height: 1.1;
+}
+
+.kpi__label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.kpi__sub {
+  grid-column: 2;
+  font-size: 0.65rem;
+  font-weight: $font-semibold;
+  color: var(--tone, #{$primary});
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.kpi.tone-primary {
+  --tone: #{$primary};
+}
+.kpi.tone-income {
+  --tone: #{$income};
+}
+.kpi.tone-info {
+  --tone: #{$info};
+}
+.kpi.tone-accent {
+  --tone: #{$accent-color};
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.ranking {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.ranking-row {
+  display: grid;
+  grid-template-columns: 1.25rem minmax(90px, 1fr) 2fr auto;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: $font-size-sm;
+}
+
+.ranking-rank {
+  color: $text-muted;
+  font-weight: $font-semibold;
+  font-size: $font-size-xs;
+}
+
+.ranking-label {
+  color: $text-primary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ranking-bar {
+  height: 7px;
+  border-radius: 4px;
+  background: $bg-gray;
+  overflow: hidden;
+}
+
+.ranking-fill {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: $primary;
+}
+
+.ranking-value {
+  font-weight: $font-semibold;
+  color: $text-primary;
+  justify-self: end;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.7rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+
+  &:focus-within {
+    border-color: $primary;
+  }
+}
+
+.search__icon {
+  width: 15px;
+  height: 15px;
+  color: $text-muted;
+}
+
+.search__input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  width: 200px;
+  max-width: 100%;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  th {
+    text-align: left;
+    padding: $table-header-padding;
+    color: $text-muted;
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-bottom: 1px solid $border-color;
+  }
+
+  td {
+    padding: $table-cell-padding;
+    border-bottom: 1px solid $border-color;
+    color: $text-primary;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background: $bg-light;
+  }
+}
+
+.data-table__name {
+  font-weight: $font-semibold;
+}
+
+.data-table__muted {
+  color: $text-muted;
+}
+
+.data-table__actions-col,
+.data-table__actions {
+  text-align: right;
+  width: 1%;
+  white-space: nowrap;
+}
+
+.row-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: $radius-md;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+
+  &:hover {
+    background: $bg-light;
+    border-color: $border-color;
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.item-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.data-table--clickable tbody tr {
+  cursor: pointer;
+}
+
+.link-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: none;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.link-back__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.6rem;
+  padding: 3.5rem 1.5rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+}
+
+.placeholder__icon {
+  width: 64px;
+  height: 64px;
+  color: $primary;
+}
+
+.placeholder__title {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.placeholder__body {
+  margin: 0;
+  max-width: 460px;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  line-height: 1.5;
+}
+
+.placeholder__tag {
+  margin-top: 0.5rem;
+  padding: 0.3rem 0.8rem;
+  border-radius: $radius-md;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+}
+</style>
diff --git a/pages/ai-insights.vue b/pages/assistant.vue
similarity index 54%
rename from pages/ai-insights.vue
rename to pages/assistant.vue
index d658936..c30d6ac 100644
--- a/pages/ai-insights.vue
+++ b/pages/assistant.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="ai-insights-page">
-    <AIChat />
+  <div class="assistant-page">
+    <ChatExperience mode="full" />
   </div>
 </template>
 
 <script setup>
-import AIChat from '@/components/ai/AIChat.vue';
+import ChatExperience from '@/components/ai/ChatExperience.vue';
 
 definePageMeta({
   layout: 'dashboard',
@@ -14,7 +14,7 @@ definePageMeta({
 </script>
 
 <style lang="scss" scoped>
-.ai-insights-page {
+.assistant-page {
   width: 100%;
 }
 </style>
diff --git a/pages/dashboard/index.vue b/pages/dashboard/index.vue
index c727bea..577dafc 100644
--- a/pages/dashboard/index.vue
+++ b/pages/dashboard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard">
-    <TDashboardTopCard :show-filters="hasData" />
+    <DashboardAgentHero />
 
     <OnboardingWizard
       v-if="shouldShowWizard"
@@ -10,8 +10,10 @@
     />
 
     <template v-if="!shouldShowWizard">
+      <TDashboardTopCard :show-filters="hasData" />
+
       <ComponentLoader
-        :is-loading="isLoadingOrNotReady"
+        :is-loading="kpiLoading"
         :has-data="hasData"
         :show-empty="false"
         skeleton-variant="card"
@@ -21,7 +23,7 @@
 
       <div class="middle-section">
         <ComponentLoader
-          :is-loading="isLoadingOrNotReady"
+          :is-loading="categoryLoading"
           :has-data="hasData"
           :show-empty="false"
           skeleton-variant="card"
@@ -40,13 +42,17 @@
       </div>
 
       <ComponentLoader
-        :is-loading="isLoadingOrNotReady"
+        :is-loading="insightsLoading"
         :has-data="hasData"
         :show-empty="false"
         skeleton-variant="card"
       >
         <QuickInsights />
       </ComponentLoader>
+
+      <div class="dashboard-widgets">
+        <ExtensionSlot name="dashboard.widgets" />
+      </div>
     </template>
   </div>
 </template>
@@ -59,15 +65,19 @@ import { useNotifications } from '@/composables/useNotifications';
 import { checkAuth } from '~/utils/auth';
 import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
 import TDashboardTopCard from '@/components/TDashboardTopCard.vue';
+import DashboardAgentHero from '@/components/dashboard/DashboardAgentHero.vue';
 import DashboardKPIs from '@/components/dashboard/DashboardKPIs.vue';
 import CategoryBreakdown from '@/components/dashboard/CategoryBreakdown.vue';
 import RecentTransactions from '@/components/dashboard/RecentTransactions.vue';
 import QuickInsights from '@/components/dashboard/QuickInsights.vue';
 import OnboardingWizard from '@/components/onboarding/OnboardingWizard.vue';
 import ComponentLoader from '@/components/ComponentLoader.vue';
+import ExtensionSlot from '@/components/extensions/ExtensionSlot.vue';
+import { useStatistics } from '@/composables/useStatistics';
 
 const router = useRouter();
 
+const { isSectionLoaded } = useStatistics();
 const { transactions } = useTransactions();
 const { configurationsMap } = useSharedData();
 const { setComplete: setOnboardingComplete } = useOnboardingStatus();
@@ -93,6 +103,11 @@ watch(
 );
 
 const isLoadingOrNotReady = computed(() => isLoading.value || !isInitialized.value);
+const kpiLoading = computed(() => isLoadingOrNotReady.value || !isSectionLoaded('overview'));
+const categoryLoading = computed(() => isLoadingOrNotReady.value || !isSectionLoaded('categories'));
+const insightsLoading = computed(
+  () => isLoadingOrNotReady.value || !isSectionLoaded('overview') || !isSectionLoaded('parties')
+);
 const hasDataLoaded = computed(() => isInitialized.value && !isLoading.value);
 const hasTransactions = computed(() => hasDataLoaded.value && transactions.value.length > 0);
 const hasData = computed(() => hasDataLoaded.value);
@@ -148,4 +163,10 @@ definePageMeta({
     grid-template-columns: 1fr;
   }
 }
+
+.dashboard-widgets {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: $spacing-4;
+}
 </style>
diff --git a/pages/financial-position/index.vue b/pages/financial-position/index.vue
new file mode 100644
index 0000000..ceb26b8
--- /dev/null
+++ b/pages/financial-position/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="financial-position-page">
+    <FinancialPositionView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
+
+definePageMeta({ layout: 'dashboard', middleware: 'auth' });
+</script>
+
+<style lang="scss" scoped>
+.financial-position-page {
+  width: 100%;
+}
+</style>
diff --git a/pages/holdings/index.vue b/pages/holdings/index.vue
new file mode 100644
index 0000000..d5dd028
--- /dev/null
+++ b/pages/holdings/index.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="holdings">
+    <header class="hd-head">
+      <div>
+        <h1 class="hd-title">{{ t('Holdings') }}</h1>
+        <p class="hd-sub">{{ t('Assets you own: crypto, stocks, property and more.') }}</p>
+      </div>
+      <div class="hd-actions">
+        <button class="btn btn--ghost" :disabled="refreshing" @click="refresh">
+          <RefreshCw :size="15" :class="{ spin: refreshing }" /> {{ t('Refresh prices') }}
+        </button>
+        <button class="btn btn--primary" @click="openCreate">
+          <Plus :size="16" /> {{ t('Add holding') }}
+        </button>
+      </div>
+    </header>
+
+    <section class="hd-total surface surface--brand tone-card">
+      <span class="eyebrow">{{ t('Total value') }}</span>
+      <p class="hd-total-value">{{ money(totalValue, totalCurrency) }}</p>
+    </section>
+
+    <LoadingSkeleton v-if="loading && !holdings.length" variant="list" :count="4" />
+
+    <div v-else-if="!holdings.length" class="hd-empty">
+      <Coins :size="44" class="hd-empty-ico" />
+      <p>{{ t('No holdings yet. Add Bitcoin, a stock, or any asset you own.') }}</p>
+    </div>
+
+    <ul v-else class="hd-list">
+      <li v-for="h in holdings" :key="h.id" class="hd-card surface tone-card">
+        <span class="hd-ico"
+          ><component :is="h.price_source === 'auto' ? Bitcoin : Landmark" :size="18"
+        /></span>
+        <div class="hd-main">
+          <div class="hd-name-row">
+            <span class="hd-name">{{ h.name }}</span>
+            <span v-if="h.symbol" class="hd-symbol">{{ h.symbol }}</span>
+            <span class="hd-badge" :class="`hd-badge--${h.price_source}`">
+              {{ h.price_source === 'auto' ? t('Live') : t('Manual') }}
+            </span>
+          </div>
+          <span class="hd-meta">
+            {{ formatQty(h.quantity) }} × {{ money(h.unit_price, h.currency) }}
+          </span>
+        </div>
+        <span class="hd-value">{{ money(h.value, h.currency) }}</span>
+        <div class="hd-row-actions">
+          <button class="icon-btn" :aria-label="t('Edit')" @click="openEdit(h)">
+            <Pencil :size="15" />
+          </button>
+          <button class="icon-btn" :aria-label="t('Delete')" @click="remove(h)">
+            <Trash2 :size="15" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <HoldingForm
+      :open="formOpen"
+      :editing="editing"
+      :submitting="submitting"
+      @submit="save"
+      @close="formOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Plus, RefreshCw, Pencil, Trash2, Coins, Bitcoin, Landmark } from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import HoldingForm from '@/components/holdings/HoldingForm.vue';
+import holdingsApi from '@/services/api/holdingsApi';
+import statsApi from '@/services/api/statsApi';
+import { formatShortAmount } from '@/utils/currency';
+import { useNotifications } from '~/composables/useNotifications';
+import { useAuth } from '~/composables/useAuth';
+import type { Holding, HoldingPayload } from '~/types/holding';
+
+definePageMeta({ layout: 'dashboard', middleware: 'auth' });
+
+const { t } = useI18n();
+const { confirmDelete, showSuccess, showError } = useNotifications();
+const { user } = useAuth();
+
+const holdings = ref<Holding[]>([]);
+const totalValue = ref(0);
+const totalCurrency = ref('USD');
+const loading = ref(false);
+const refreshing = ref(false);
+const submitting = ref(false);
+const formOpen = ref(false);
+const editing = ref<Holding | null>(null);
+
+const money = (n: number, currency: string) =>
+  formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${currency}`);
+const formatQty = (n: number) => Number(n).toLocaleString(undefined, { maximumFractionDigits: 8 });
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await holdingsApi.fetchAll();
+    holdings.value = res.data || [];
+    // The package list isn't currency-converted; the converted total comes from
+    // the same place the Financial Position net worth does.
+    try {
+      const stats = await statsApi.fetch({ section: 'position' });
+      totalValue.value = stats.data?.position?.holdings_value ?? 0;
+      totalCurrency.value = (stats.data as { currency?: string })?.currency ?? 'USD';
+    } catch {
+      totalValue.value = 0;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  editing.value = null;
+  formOpen.value = true;
+}
+
+function openEdit(h: Holding) {
+  editing.value = h;
+  formOpen.value = true;
+}
+
+async function save(payload: HoldingPayload) {
+  submitting.value = true;
+  try {
+    if (editing.value) {
+      await holdingsApi.update(editing.value.id, payload);
+      showSuccess(t('Holding updated'));
+    } else {
+      const ownerId = Number((user.value as { id?: number } | null)?.id);
+      if (!ownerId) {
+        showError(t('Could not save the holding.'));
+        return;
+      }
+      await holdingsApi.create(payload, { owner_type: 'App\\Models\\User', owner_id: ownerId });
+      showSuccess(t('Holding added'));
+    }
+    formOpen.value = false;
+    await load();
+  } catch {
+    showError(t('Could not save the holding.'));
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function remove(h: Holding) {
+  const ok = await confirmDelete(t('Delete "{name}"?', { name: h.name }));
+  if (!ok) return;
+  try {
+    await holdingsApi.delete(h.id);
+    showSuccess(t('Holding deleted'));
+    await load();
+  } catch {
+    showError(t('Could not delete the holding.'));
+  }
+}
+
+async function refresh() {
+  refreshing.value = true;
+  try {
+    await holdingsApi.refreshPrices();
+    await load();
+    showSuccess(t('Prices refreshed'));
+  } catch {
+    showError(t('Could not refresh prices.'));
+  } finally {
+    refreshing.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.holdings {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+}
+
+.hd-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+}
+
+.hd-title {
+  margin: 0;
+  font-size: $font-size-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.hd-sub {
+  margin: 4px 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.hd-actions {
+  display: flex;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 999px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  &--primary {
+    background: $primary;
+    color: #fff;
+  }
+  &--ghost {
+    background: $bg-white;
+    border-color: $border-color;
+    color: $text-primary;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hd-total {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: $spacing-4 $spacing-5;
+}
+
+.hd-total-value {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: var(--surface-deep);
+}
+
+.hd-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.hd-card {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3 $spacing-4;
+}
+
+.hd-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.hd-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.hd-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hd-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.hd-symbol {
+  font-size: 11px;
+  font-weight: $font-bold;
+  color: $text-muted;
+}
+
+.hd-badge {
+  font-size: 9px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 7px;
+  border-radius: 999px;
+
+  &--auto {
+    background: rgba(14, 165, 233, 0.14);
+    color: #0284c7;
+  }
+  &--manual {
+    background: $bg-light;
+    color: $text-muted;
+  }
+}
+
+.hd-meta {
+  font-size: 11px;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.hd-value {
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.hd-row-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+  }
+}
+
+.hd-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+  background: $bg-white;
+  border: 1px dashed $border-color;
+  border-radius: 18px;
+}
+
+.hd-empty-ico {
+  color: var(--color-border-medium, #cbd5e1);
+}
+</style>
diff --git a/pages/home.vue b/pages/home.vue
new file mode 100644
index 0000000..d160f40
--- /dev/null
+++ b/pages/home.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="home-landing-page">
+    <ChatExperience mode="landing" />
+  </div>
+</template>
+
+<script setup>
+import ChatExperience from '@/components/ai/ChatExperience.vue';
+
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+});
+</script>
+
+<style lang="scss" scoped>
+.home-landing-page {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style lang="scss">
+.content-wrapper .dashboard-content:has(.home-landing-page) {
+  padding: 0;
+  overflow: hidden;
+}
+
+.content-wrapper .dashboard-content:has(.home-landing-page) .dashboard-content-container {
+  height: 100%;
+}
+</style>
diff --git a/pages/imports.vue b/pages/imports.vue
index 0419812..ff8b2c8 100644
--- a/pages/imports.vue
+++ b/pages/imports.vue
@@ -24,6 +24,13 @@
             {{ t('extraction_help_text') }}
           </p>
         </div>
+
+        <ImportSessionsList
+          v-if="!isAnalyzing && !currentSession && sessions.length"
+          :sessions="sessions"
+          @open="openSession"
+          @delete="handleDeleteSession"
+        />
       </div>
 
       <!-- Review state -->
@@ -71,6 +78,25 @@
           {{ t('Import completed successfully.') }}
         </div>
 
+        <table v-if="currentSession.status === 'confirmed'" class="readonly-table">
+          <thead>
+            <tr>
+              <th>{{ t('Date') }}</th>
+              <th>{{ t('Description') }}</th>
+              <th class="num">{{ t('Amount') }}</th>
+              <th>{{ t('Type') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="s in suggestions" :key="s.index">
+              <td>{{ s.date }}</td>
+              <td>{{ s.description }}</td>
+              <td class="num">{{ s.amount }}</td>
+              <td>{{ s.type ? t(s.type === 'income' ? 'Income' : 'Expense') : '' }}</td>
+            </tr>
+          </tbody>
+        </table>
+
         <SuggestionReviewTable
           v-if="currentSession.status !== 'confirmed'"
           :suggestions="suggestions"
@@ -108,6 +134,7 @@
 import ContentTopCard from '@/components/TTopCard.vue';
 import ImportUpload from '~/components/imports/ImportUpload.vue';
 import ImportAnalyzing from '~/components/imports/ImportAnalyzing.vue';
+import ImportSessionsList from '~/components/imports/ImportSessionsList.vue';
 import SuggestionReviewTable from '~/components/imports/SuggestionReviewTable.vue';
 import ImportConfirmDialog from '~/components/imports/ImportConfirmDialog.vue';
 import type { AutoCreateOptions } from '~/types/import';
@@ -118,11 +145,15 @@ definePageMeta({
 });
 
 const { t } = useI18n();
-const { showSuccess, showError, showWarning } = useNotifications();
+const { showSuccess, showError, showWarning, confirmDelete } = useNotifications();
 const { wallets, categories, parties, loadWallets, loadCategories, loadParties } = useSharedData();
 
+const route = useRoute();
+const router = useRouter();
+
 const {
   currentSession,
+  sessions,
   suggestions,
   isAnalyzing,
   isConfirming,
@@ -137,6 +168,9 @@ const {
   rejectAll,
   editSuggestion,
   confirmImport,
+  loadSessions,
+  openSession,
+  removeSession,
   reset
 } = useImports();
 
@@ -149,6 +183,16 @@ onMounted(() => {
   loadWallets();
   loadCategories();
   loadParties();
+  loadSessions();
+
+  // Deep-link from the chat's import-review card: open that session directly
+  // (showing live progress if it's still analyzing). Drop the query param after
+  // so a manual refresh lands back on the list instead of re-opening.
+  const sessionId = Number(route.query.session);
+  if (sessionId) {
+    openSession(sessionId);
+    router.replace({ query: {} });
+  }
 });
 
 const duplicatesInAccepted = computed(
@@ -271,6 +315,20 @@ const handleConfirm = async (autoCreate: AutoCreateOptions) => {
 
 const handleReset = () => {
   reset();
+  loadSessions();
+};
+
+const handleDeleteSession = async (id: number) => {
+  const session = sessions.value.find((s) => s.id === id);
+  const confirmed = await confirmDelete(session?.file_name || t('this import'));
+  if (!confirmed) return;
+
+  try {
+    await removeSession(id);
+    showSuccess(t('Import deleted.'));
+  } catch {
+    showError(t('Could not delete the import.'));
+  }
 };
 </script>
 
@@ -416,4 +474,33 @@ const handleReset = () => {
   border-radius: $radius-lg;
   font-size: $font-size-sm;
 }
+
+.readonly-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  th,
+  td {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 1px solid $border-light;
+  }
+
+  th {
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+    color: $text-muted;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  td {
+    color: $text-secondary;
+  }
+
+  .num {
+    text-align: right;
+  }
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 615555b..a06cc21 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,21 @@
 <script setup>
-// Redirect to login page
 import { useRouter } from 'vue-router';
 import { onMounted } from 'vue';
 import Logo from '@/components/Logo.vue';
+import { useAuth } from '@/composables/useAuth';
+import { resolveLandingPath } from '@/composables/useLanding';
 
 const router = useRouter();
+const { isAuthenticated } = useAuth();
 
-onMounted(() => {
-  // Add a small delay to show the loading state
-  setTimeout(() => {
-    router.push('/login');
-  }, 1000);
+onMounted(async () => {
+  // Authenticated users go to their chosen landing (chat-first by default);
+  // everyone else goes to login.
+  if (isAuthenticated.value) {
+    router.replace(await resolveLandingPath());
+  } else {
+    router.replace('/login');
+  }
 });
 </script>
 
diff --git a/pages/login.vue b/pages/login.vue
index 8f072f9..800249a 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -52,10 +52,11 @@ const handleSubmit = async () => {
     return;
   }
 
-  // Login succeeded – now check onboarding status (errors here should not affect login error)
+  // Login succeeded; checking onboarding status must not affect the login error.
   let isOnboardingComplete = false;
+  let configs = null;
   try {
-    const configs = await sharedData.loadConfigurations();
+    configs = await sharedData.loadConfigurations();
     isOnboardingComplete = !!configs?.[CONFIGURATION_KEYS.ONBOARDING_COMPLETE];
     if (isOnboardingComplete) {
       setOnboardingComplete();
@@ -64,7 +65,12 @@ const handleSubmit = async () => {
     console.warn('Failed to load onboarding config', e);
   }
 
-  router.push(isOnboardingComplete ? '/dashboard' : '/onboarding');
+  if (!isOnboardingComplete) {
+    router.push('/onboarding');
+  } else {
+    const landingMode = configs?.[CONFIGURATION_KEYS.LANDING_MODE];
+    router.push(landingMode === 'chat' ? '/home' : '/dashboard');
+  }
   loading.value = false;
 };
 
diff --git a/pages/onboarding.vue b/pages/onboarding.vue
index 63a39c2..418088b 100644
--- a/pages/onboarding.vue
+++ b/pages/onboarding.vue
@@ -18,20 +18,10 @@
       </div>
 
       <div class="onboarding-content">
-        <!-- Step 1: Language Selection -->
-        <div v-if="currentStep === 1" class="step-content">
+        <!-- Step: Language Selection -->
+        <div v-if="currentStepId === 'language'" class="step-content">
           <div class="step-icon">
-            <svg
-              class="language-icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
-                fill="currentColor"
-              />
-            </svg>
+            <IconLanguage />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Choose your language') }}</h2>
@@ -58,6 +48,16 @@
                 </button>
               </div>
 
+              <div class="country-field">
+                <label class="country-label">{{ $t('Where are you based?') }}</label>
+                <select v-model="selectedCountry" class="country-select">
+                  <option value="">{{ $t('Select your country') }}</option>
+                  <option v-for="country in countries" :key="country.code" :value="country.name">
+                    {{ country.name }}
+                  </option>
+                </select>
+              </div>
+
               <div class="step-actions">
                 <button
                   class="primary-btn"
@@ -71,10 +71,10 @@
           </div>
         </div>
 
-        <!-- Step 2: Wallet and Currency Setup -->
-        <div v-if="currentStep === 2" class="step-content">
+        <!-- Step: Wallet and Currency Setup -->
+        <div v-if="currentStepId === 'wallet'" class="step-content">
           <div class="step-icon">
-            <CreditCardIcon />
+            <IconWallet />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Set up your wallet') }}</h2>
@@ -203,10 +203,10 @@
           </div>
         </div>
 
-        <!-- Step 3: Categories Setup -->
-        <div v-if="currentStep === 3" class="step-content">
+        <!-- Step: Categories Setup -->
+        <div v-if="currentStepId === 'categories'" class="step-content">
           <div class="step-icon">
-            <TagIcon />
+            <IconCategory />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Set up categories') }}</h2>
@@ -248,8 +248,13 @@
           </div>
         </div>
 
-        <!-- Step 4: All Set -->
-        <div v-if="currentStep === 4" class="step-content completion-step">
+        <!-- Step: plugin-contributed onboarding step (rendered from descriptor) -->
+        <div v-else-if="currentStepContribution" class="step-content">
+          <DescriptorRenderer :contribution="currentStepContribution" @next="nextStep" />
+        </div>
+
+        <!-- Step: All Set -->
+        <div v-if="currentStepId === 'complete'" class="step-content completion-step">
           <div class="completion-icon">
             <CheckCircleIcon />
           </div>
@@ -314,11 +319,17 @@ import {
   CheckCircleIcon,
   TagIcon
 } from '@heroicons/vue/24/outline';
+import IconLanguage from '~icons/solar/translation-bold-duotone';
+import IconWallet from '~icons/solar/wallet-money-bold-duotone';
+import IconCategory from '~icons/solar/widget-5-bold-duotone';
 import { useSharedData } from '@/composables/useSharedData';
 import { useNotifications } from '@/composables/useNotifications';
 import { useWallets } from '@/composables/useWallets';
+import { useExtensionSlots } from '@/composables/useExtensionSlots';
+import DescriptorRenderer from '@/components/extensions/DescriptorRenderer.vue';
 import configurationsApi from '@/services/api/configurationsApi';
 import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
+import { getCountries } from '@/utils/countries';
 import { CURRENCIES } from '@/utils/currencies';
 import { categoriesApi } from '@/services/api/categoriesApi';
 
@@ -337,9 +348,37 @@ const { setComplete: setOnboardingComplete } = useOnboardingStatus();
 const returnTo = computed(() => (route.query.returnTo as string) || '/dashboard');
 
 const currentStep = ref(1);
-const totalSteps = 4;
 
-const progressPercentage = computed(() => (currentStep.value / totalSteps) * 100);
+// Onboarding is a data-driven list: built-in steps plus any plugin
+// contributions to the `onboarding.steps` slot, merged by order. The
+// completion step is pinned last.
+const { contributionsFor } = useExtensionSlots();
+const onboardingContributions = contributionsFor('onboarding.steps');
+
+const builtInSteps = [
+  { id: 'language', order: 10 },
+  { id: 'wallet', order: 20 },
+  { id: 'categories', order: 30 },
+  { id: 'complete', order: 1000 }
+];
+
+const steps = computed(() => {
+  const pluginSteps = onboardingContributions.value.map((contribution) => ({
+    id: contribution.key,
+    order: contribution.order,
+    contribution
+  }));
+
+  return [...builtInSteps, ...pluginSteps].sort((a, b) => a.order - b.order);
+});
+
+const totalSteps = computed(() => steps.value.length);
+const currentStepId = computed(() => steps.value[currentStep.value - 1]?.id);
+const currentStepContribution = computed(
+  () => steps.value[currentStep.value - 1]?.contribution ?? null
+);
+
+const progressPercentage = computed(() => (currentStep.value / totalSteps.value) * 100);
 
 // Data from shared state
 const incomeCategories = computed(() => sharedData.getIncomeCategories?.value || []);
@@ -353,6 +392,8 @@ const transactionCount = computed(() => 0);
 
 // Language setup
 const selectedLanguage = ref('en');
+const selectedCountry = ref('');
+const countries = getCountries();
 const availableLanguages = [
   { code: 'en', name: 'English', flag: '🇺🇸' },
   { code: 'es', name: 'Español', flag: '🇪🇸' },
@@ -387,7 +428,7 @@ const isWalletCurrencySetupValid = computed(() => {
 });
 
 const nextStep = () => {
-  if (currentStep.value < totalSteps) {
+  if (currentStep.value < totalSteps.value) {
     currentStep.value++;
   }
 };
@@ -475,6 +516,14 @@ const completeOnboarding = async () => {
       });
     }
 
+    if (selectedCountry.value) {
+      configurationsToSave.push({
+        key: CONFIGURATION_KEYS.COUNTRY,
+        value: selectedCountry.value,
+        type: 'string'
+      });
+    }
+
     // Ensure a wallet exists and persist default-wallet
     let targetWalletId: string | null = null;
 
@@ -624,4 +673,36 @@ onBeforeRouteLeave(() => {
 
 <style lang="scss" scoped>
 @use '~/assets/scss/_onboarding' as *;
+@use '~/assets/scss/_variables' as *;
+
+.country-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 1.25rem;
+  text-align: left;
+}
+
+.country-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+}
+
+.country-select {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.7rem 0.85rem;
+  font-size: $font-size-base;
+  font-family: inherit;
+  color: $text-primary;
+  background: $bg-white;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
 </style>
diff --git a/pages/reports.vue b/pages/reports.vue
index 7720ccc..684f6d8 100644
--- a/pages/reports.vue
+++ b/pages/reports.vue
@@ -15,7 +15,32 @@
       @open-review="reviewOpen = true"
     />
 
-    <ReportsEmpty v-if="!hasData" />
+    <p v-if="statsPartial" class="reports-truncated" role="status">
+      {{
+        t(
+          'Some amounts could not be converted to your default currency and were left out, so figures may be understated. Affected: {currencies}.',
+          { currencies: unconvertedCurrencies.join(', ') }
+        )
+      }}
+    </p>
+
+    <p v-if="sweepTruncated" class="reports-truncated" role="status">
+      {{
+        t(
+          'This period has more transactions than we chart at once. Daily and trend figures show the most recent {count} and may be partial.',
+          { count: '6,000' }
+        )
+      }}
+    </p>
+
+    <LoadingSkeleton
+      v-if="isLoading && !hasData"
+      variant="card"
+      :count="3"
+      class="reports-loading"
+    />
+
+    <ReportsEmpty v-else-if="!hasData" />
 
     <Transition v-else name="tab" mode="out-in">
       <div :key="activeTab" class="tab-stage">
@@ -67,6 +92,10 @@
             @drill="openDrill"
           />
         </template>
+
+        <template v-else-if="activeTab === 'position'">
+          <FinancialPositionView :params="positionParams" />
+        </template>
       </div>
     </Transition>
 
@@ -92,7 +121,15 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { LayoutDashboard, Calendar as CalIcon, Workflow, Layers, BarChart3 } from 'lucide-vue-next';
+import {
+  LayoutDashboard,
+  Calendar as CalIcon,
+  Workflow,
+  Layers,
+  BarChart3,
+  Scale
+} from 'lucide-vue-next';
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
 import ReportsTabs from '@/components/reports/ReportsTabs.vue';
 import PeriodControl from '@/components/reports/PeriodControl.vue';
 import CashflowHero from '@/components/reports/CashflowHero.vue';
@@ -118,6 +155,10 @@ const {
   compareEnabled,
   periods,
   range,
+  isLoading,
+  sweepTruncated,
+  statsPartial,
+  unconvertedCurrencies,
   totals,
   dailyBuckets,
   monthlyBuckets,
@@ -148,15 +189,32 @@ const tabs = computed(() => [
     label: t('Categories'),
     icon: Layers,
     count: expenseCategories.value.length + incomeCategories.value.length
-  }
+  },
+  { value: 'position', label: t('Position'), icon: Scale }
 ]);
 
 const currency = computed(() => primaryCurrency.value);
 
+const positionParams = computed(() => ({
+  start_date: range.value.start.toISOString().slice(0, 10),
+  end_date: range.value.end.toISOString().slice(0, 10)
+}));
+
 const format = (n, cur) =>
   formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${cur || currency.value}`);
 
-const hasData = computed(() => totals.value.income > 0 || totals.value.expense > 0);
+// "Has data" must not hinge on the overview totals alone: charts read their own
+// buckets/category series, which can be present even when totals derive to zero
+// (e.g. amounts dropped for a missing exchange rate). Gate the empty state on any
+// real signal so charts aren't hidden while data exists. dailyBuckets is scaffolded
+// one-per-day, so check txCount rather than its length.
+const hasData = computed(() => {
+  if (totals.value.income > 0 || totals.value.expense > 0) return true;
+  if (expenseCategories.value.length > 0 || incomeCategories.value.length > 0) return true;
+  if (monthlyBuckets.value.some((m) => m.income || m.expense || m.net)) return true;
+  if (dailyBuckets.value.some((d) => d.txCount > 0)) return true;
+  return false;
+});
 
 const applyCustom = ({ start, end }) => {
   setCustomRange(start, end);
@@ -205,6 +263,15 @@ const reviewData = computed(() => reviewSnapshot.value || prevReviewSnapshot.val
   justify-content: flex-start;
 }
 
+.reports-truncated {
+  margin: 0;
+  padding: $spacing-3 $spacing-4;
+  border-radius: $radius-lg;
+  background: rgba(245, 158, 11, 0.12);
+  color: #92400e;
+  font-size: $font-size-sm;
+}
+
 .tab-stage {
   display: flex;
   flex-direction: column;
diff --git a/pages/settings.vue b/pages/settings.vue
index cca16ad..dc3e3df 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -22,6 +22,17 @@
         <template #notifications>
           <SettingsNotifications :is-edit-mode="true" />
         </template>
+        <template #integrations>
+          <div class="integrations-grid">
+            <ExtensionSlot name="settings.integrations" />
+          </div>
+        </template>
+        <template #connections>
+          <SettingsConnections />
+        </template>
+        <template v-for="contribution in pluginTabs" :key="contribution.key" #[contribution.key]>
+          <DescriptorRenderer :contribution="contribution" />
+        </template>
       </TTabs>
     </div>
 
@@ -30,15 +41,19 @@
 </template>
 
 <script setup>
-import { ref, markRaw } from 'vue';
-import { Settings, Globe, Wallet, Sun, User, Bell } from 'lucide-vue-next';
+import { ref, computed, markRaw } from 'vue';
+import { Settings, Globe, Wallet, Sun, User, Bell, Puzzle, Bot } from 'lucide-vue-next';
 import TTabs from '@/components/TTabs.vue';
 import SettingsAccount from '@/components/settings/SettingsAccount.vue';
+import SettingsConnections from '@/components/settings/SettingsConnections.vue';
 import SettingsGeneral from '@/components/settings/SettingsGeneral.vue';
 import SettingsWallets from '@/components/settings/SettingsWallets.vue';
 import SettingsDisplay from '@/components/settings/SettingsDisplay.vue';
 import SettingsNotifications from '@/components/settings/SettingsNotifications.vue';
 import PasswordModal from '@/components/settings/PasswordModal.vue';
+import ExtensionSlot from '@/components/extensions/ExtensionSlot.vue';
+import DescriptorRenderer from '@/components/extensions/DescriptorRenderer.vue';
+import { useExtensionSlots } from '@/composables/useExtensionSlots';
 
 const { t } = useI18n();
 
@@ -50,13 +65,23 @@ definePageMeta({
 const showPasswordModal = ref(false);
 const activeTab = ref('account');
 
-const tabs = [
+const { contributionsFor } = useExtensionSlots();
+const pluginTabs = contributionsFor('settings.tabs');
+
+const tabs = computed(() => [
   { id: 'account', label: t('Account'), icon: markRaw(User) },
   { id: 'general', label: t('General'), icon: markRaw(Globe) },
   { id: 'wallets', label: t('Wallets'), icon: markRaw(Wallet) },
   { id: 'display', label: t('Display'), icon: markRaw(Sun) },
-  { id: 'notifications', label: t('Notifications'), icon: markRaw(Bell) }
-];
+  { id: 'notifications', label: t('Notifications'), icon: markRaw(Bell) },
+  { id: 'connections', label: t('Connected AI clients'), icon: markRaw(Bot) },
+  { id: 'integrations', label: t('Integrations'), icon: markRaw(Puzzle) },
+  ...pluginTabs.value.map((contribution) => ({
+    id: contribution.key,
+    label: contribution.ui.card?.title || contribution.integration.name,
+    icon: markRaw(Puzzle)
+  }))
+]);
 </script>
 
 <style lang="scss" scoped>
@@ -115,4 +140,11 @@ const tabs = [
     padding: 1rem;
   }
 }
+
+.integrations-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  align-items: start;
+  gap: 1rem;
+}
 </style>
diff --git a/plugins/echo.client.ts b/plugins/echo.client.ts
new file mode 100644
index 0000000..b26826c
--- /dev/null
+++ b/plugins/echo.client.ts
@@ -0,0 +1,34 @@
+import Echo from 'laravel-echo';
+import Pusher from 'pusher-js';
+
+// Real-time transport for chat streaming. Without a configured Reverb key the
+// app runs fine on polling alone, so this is a no-op provider in that case.
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const key = config.public.reverbKey as string;
+
+  if (!key) {
+    return { provide: { echo: null as Echo<'reverb'> | null } };
+  }
+
+  (window as unknown as { Pusher: typeof Pusher }).Pusher = Pusher;
+
+  const apiBase = config.public.apiBase as string;
+  // The broadcasting-auth route sits at the API host root, not under /api/v1.
+  const authEndpoint = apiBase.replace(/\/api\/v1\/?$/, '') + '/broadcasting/auth';
+  const token = useCookie('auth.token').value;
+
+  const echo = new Echo<'reverb'>({
+    broadcaster: 'reverb',
+    key,
+    wsHost: config.public.reverbHost as string,
+    wsPort: Number(config.public.reverbPort),
+    wssPort: Number(config.public.reverbPort),
+    forceTLS: config.public.reverbScheme === 'https',
+    enabledTransports: ['ws', 'wss'],
+    authEndpoint,
+    auth: { headers: token ? { Authorization: `Bearer ${token}` } : {} }
+  });
+
+  return { provide: { echo } };
+});
diff --git a/services/api/adminApi.ts b/services/api/adminApi.ts
new file mode 100644
index 0000000..da5641f
--- /dev/null
+++ b/services/api/adminApi.ts
@@ -0,0 +1,157 @@
+export type MetricType = 'count' | 'sum' | 'ratio' | 'series' | 'ranking';
+
+export interface MetricPoint {
+  date: string;
+  value: number;
+}
+
+export interface MetricRow {
+  label: string;
+  value: number;
+}
+
+export interface Metric {
+  key: string;
+  label: string;
+  type: MetricType;
+  value: number | null;
+  series: MetricPoint[];
+  rows: MetricRow[];
+  unit: string | null;
+}
+
+export interface MetricGroup {
+  key: string;
+  label: string;
+  metrics: Metric[];
+}
+
+export interface EngagementReport {
+  period: { start: string; end: string; granularity: string };
+  groups: MetricGroup[];
+}
+
+export interface AdminUser {
+  id: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  created_at: string;
+  is_admin?: boolean;
+}
+
+export interface OutreachSummary {
+  id: number;
+  subject: string;
+  audience: string;
+  recipients: number;
+  sent: number;
+  created_at: string;
+}
+
+export interface UserDetail {
+  user: AdminUser & { username?: string; phone?: string };
+  counts: Record<string, number>;
+  preferences: { country: string | null; language: string | null; currency: string | null };
+  last_transaction_at: string | null;
+}
+
+export interface MetricsParams {
+  days?: number;
+  granularity?: 'day' | 'week' | 'month';
+}
+
+export type OutreachAudience = 'all' | 'active' | 'inactive' | 'test' | 'specific';
+
+export interface OutreachPayload {
+  subject: string;
+  body: string;
+  cta_label?: string;
+  cta_url?: string;
+  image_url?: string;
+  audience: OutreachAudience;
+  user_ids?: number[];
+  files?: File[];
+}
+
+const adminApi = {
+  async metrics(params: MetricsParams = {}): Promise<EngagementReport> {
+    const api = useApi();
+    const query = new URLSearchParams();
+    if (params.days) {
+      query.append('days', String(params.days));
+    }
+    if (params.granularity) {
+      query.append('granularity', params.granularity);
+    }
+    const qs = query.toString();
+    const response = await api<{ data: EngagementReport }>(`/admin/metrics${qs ? `?${qs}` : ''}`);
+    return response.data;
+  },
+
+  async users(): Promise<AdminUser[]> {
+    const api = useApi();
+    const response = await api<{ data: AdminUser[] | { data: AdminUser[] } }>('/admin/users');
+    const payload = response.data as AdminUser[] | { data: AdminUser[] };
+    return Array.isArray(payload) ? payload : (payload?.data ?? []);
+  },
+
+  async outreachHistory(): Promise<OutreachSummary[]> {
+    const api = useApi();
+    const response = await api<{ data: OutreachSummary[] }>('/admin/outreach');
+    return response.data ?? [];
+  },
+
+  async userDetail(id: number): Promise<UserDetail> {
+    const api = useApi();
+    const response = await api<{ data: UserDetail }>(`/admin/users/${id}`);
+    return response.data;
+  },
+
+  async uploadOutreachMedia(image: File): Promise<{ url: string }> {
+    const api = useApi();
+    const form = new FormData();
+    form.append('image', image);
+    const response = await api<{ data: { url: string } }>('/admin/outreach/media', {
+      method: 'POST',
+      body: form
+    });
+    return response.data;
+  },
+
+  async sendOutreach(payload: OutreachPayload): Promise<{ sent: number }> {
+    const api = useApi();
+    let body: OutreachPayload | FormData = payload;
+
+    if (payload.files && payload.files.length) {
+      const form = new FormData();
+      form.append('subject', payload.subject);
+      form.append('body', payload.body);
+      form.append('audience', payload.audience);
+      if (payload.cta_label) form.append('cta_label', payload.cta_label);
+      if (payload.cta_url) form.append('cta_url', payload.cta_url);
+      if (payload.image_url) form.append('image_url', payload.image_url);
+      (payload.user_ids ?? []).forEach((id) => form.append('user_ids[]', String(id)));
+      payload.files.forEach((file) => form.append('files[]', file));
+      body = form;
+    }
+
+    const response = await api<{ data: { sent: number } }>('/admin/outreach/send', {
+      method: 'POST',
+      body
+    });
+    return response.data;
+  },
+
+  async previewOutreach(payload: Partial<OutreachPayload>): Promise<string> {
+    const api = useApi();
+    const response = await api<{ data: { html: string } }>('/admin/outreach/preview', {
+      method: 'POST',
+      body: payload
+    });
+    return response.data.html;
+  }
+};
+
+export default adminApi;
+export { adminApi };
diff --git a/services/api/aiApi.ts b/services/api/aiApi.ts
index 375a9ae..cf1b7ba 100644
--- a/services/api/aiApi.ts
+++ b/services/api/aiApi.ts
@@ -2,8 +2,51 @@ export type FormatType = 'scalar' | 'pair' | 'record' | 'list' | 'pair_list' | '
 export type ChatRole = 'user' | 'assistant' | 'system';
 export type ChatStatus = 'pending' | 'processing' | 'completed' | 'failed';
 
+export type BlockType =
+  | 'markdown'
+  | 'table'
+  | 'kpi'
+  | 'chart'
+  | 'comparison'
+  | 'list'
+  | 'quick_actions'
+  | 'callout'
+  | 'timeline'
+  | 'progress'
+  | 'question'
+  | 'proposed_action'
+  | 'import_review'
+  | 'canvas';
+
+/**
+ * One rendered widget in an assistant message. The shape is authored by the
+ * backend BlockBuilder; the renderer dispatches on `type` and each component
+ * adapts to its payload. Extra keys per type are intentionally loose.
+ */
+export interface ChatBlock {
+  type: BlockType | string;
+  [key: string]: unknown;
+}
+
+export interface ProposedActionBlock extends ChatBlock {
+  type: 'proposed_action';
+  id: number;
+  action_type: string;
+  summary: string;
+  risk: 'low' | 'medium' | 'high';
+  status: string;
+  confirm_url: string;
+  reject_url: string;
+  payload?: Record<string, unknown>;
+  fields?: { label: string; value: string }[];
+}
+
 export interface ChatMessageResult {
-  source?: 'smartql' | 'prism' | 'prism_fallback';
+  source?: 'smartql' | 'prism' | 'prism_fallback' | 'agent';
+  blocks?: ChatBlock[];
+  tool_calls?: { name: string; arguments: Record<string, unknown> }[];
+  usage?: Record<string, number>;
+  // Legacy SmartQL fields, still emitted by the data route.
   format_type?: FormatType | null;
   rows?: Record<string, unknown>[];
   human_response?: string;
@@ -20,6 +63,7 @@ export interface ChatMessage {
   format_hint: string | null;
   language: string | null;
   result: ChatMessageResult | null;
+  progress: string[] | null;
   error: string | null;
   completed_at: string | null;
   created_at: string;
@@ -55,6 +99,9 @@ interface SendPayload {
   message: string;
   format_hint?: FormatType;
   title?: string;
+  // Hold the agent until attachments finish uploading; the file-upload call
+  // releases the turn so the agent sees the file.
+  defer_processing?: boolean;
 }
 
 const aiApi = {
@@ -96,6 +143,47 @@ const aiApi = {
     await api(`/ai/chats/${id}`, { method: 'DELETE' });
   },
 
+  async confirmAction(
+    sessionId: number,
+    actionId: number,
+    overrides?: Record<string, unknown>
+  ): Promise<{ action: Record<string, unknown>; resource: Record<string, unknown> } | null> {
+    const api = useApi();
+    const response = await api<
+      ApiEnvelope<{ action: Record<string, unknown>; resource: Record<string, unknown> }>
+    >(`/ai/chats/${sessionId}/actions/${actionId}/confirm`, {
+      method: 'POST',
+      body: overrides && Object.keys(overrides).length ? { overrides } : {}
+    });
+    return response?.data || null;
+  },
+
+  exportCanvasUrl(sessionId: number, messageId: number, format = 'md'): string {
+    return `/ai/chats/${sessionId}/messages/${messageId}/export?format=${format}`;
+  },
+
+  async rejectAction(sessionId: number, actionId: number): Promise<void> {
+    const api = useApi();
+    await api(`/ai/chats/${sessionId}/actions/${actionId}/reject`, { method: 'POST' });
+  },
+
+  async uploadFiles(
+    sessionId: number,
+    messageId: number,
+    files: File[],
+    documentType?: string | null
+  ): Promise<ChatMessage | null> {
+    const api = useApi();
+    const form = new FormData();
+    files.forEach((file) => form.append('files[]', file));
+    if (documentType) form.append('document_type', documentType);
+    const response = await api<ApiEnvelope<ChatMessage>>(
+      `/ai/chats/${sessionId}/messages/${messageId}/files`,
+      { method: 'POST', body: form }
+    );
+    return response?.data || null;
+  },
+
   async checkHealth(): Promise<HealthResponse> {
     const api = useApi();
     return await api<HealthResponse>('/ai/health');
diff --git a/services/api/holdingsApi.ts b/services/api/holdingsApi.ts
new file mode 100644
index 0000000..5ea0e48
--- /dev/null
+++ b/services/api/holdingsApi.ts
@@ -0,0 +1,62 @@
+import type {
+  Holding,
+  HoldingPayload,
+  HoldingOwner,
+  HoldingsResponse,
+  CoinSearchResult
+} from '~/types/holding';
+import type { ApiResponse } from '~/types/transaction';
+
+// The package returns a paginated envelope under `data`.
+interface Paginated<T> {
+  data: T[];
+}
+
+const holdingsApi = {
+  async fetchAll(): Promise<HoldingsResponse> {
+    const api = useApi();
+    const response = await api<ApiResponse<Paginated<Holding>>>('/holdings?per_page=200');
+    return { data: response?.data?.data ?? [] };
+  },
+
+  async create(payload: HoldingPayload, owner: HoldingOwner): Promise<Holding | null> {
+    const api = useApi();
+    const response = await api<ApiResponse<Holding>>('/holdings', {
+      method: 'POST',
+      body: { ...payload, ...owner }
+    });
+    return response?.data ?? null;
+  },
+
+  async update(id: number, payload: Partial<HoldingPayload>): Promise<Holding | null> {
+    const api = useApi();
+    const response = await api<ApiResponse<Holding>>(`/holdings/${id}`, {
+      method: 'PUT',
+      body: payload
+    });
+    return response?.data ?? null;
+  },
+
+  async delete(id: number): Promise<boolean> {
+    const api = useApi();
+    await api(`/holdings/${id}`, { method: 'DELETE' });
+    return true;
+  },
+
+  async refreshPrices(): Promise<boolean> {
+    const api = useApi();
+    await api('/holdings/reprice', { method: 'POST' });
+    return true;
+  },
+
+  async search(query: string): Promise<CoinSearchResult[]> {
+    const api = useApi();
+    const response = await api<ApiResponse<CoinSearchResult[]>>(
+      `/asset-prices/search?q=${encodeURIComponent(query)}`
+    );
+    return response?.data ?? [];
+  }
+};
+
+export default holdingsApi;
+export { holdingsApi };
diff --git a/services/api/importsApi.ts b/services/api/importsApi.ts
index cf40e07..9f1cc19 100644
--- a/services/api/importsApi.ts
+++ b/services/api/importsApi.ts
@@ -44,6 +44,12 @@ const importsApi = {
     const response = await api<{ data: ImportSession }>(`/import/sessions/${id}`);
 
     return extractResponseData(response, {} as ImportSession);
+  },
+
+  async deleteSession(id: number): Promise<void> {
+    const api = useApi();
+
+    await api(`/import/sessions/${id}`, { method: 'DELETE' });
   }
 };
 
diff --git a/services/api/index.ts b/services/api/index.ts
index 8ea31ba..ee29840 100644
--- a/services/api/index.ts
+++ b/services/api/index.ts
@@ -9,6 +9,7 @@ import remindersApi from './remindersApi';
 import notificationsApi from './notificationsApi';
 import importsApi from './importsApi';
 import budgetsApi from './budgetsApi';
+import integrationsApi from './integrationsApi';
 import transactionApi from '../transactionApi';
 
 // Re-export individual services
@@ -23,6 +24,7 @@ export {
   notificationsApi,
   importsApi,
   budgetsApi,
+  integrationsApi,
   transactionApi
 };
 
@@ -41,5 +43,6 @@ export const api = {
   notifications: notificationsApi,
   imports: importsApi,
   budgets: budgetsApi,
+  integrations: integrationsApi,
   transactions: transactionApi
 } as const;
diff --git a/services/api/integrationsApi.ts b/services/api/integrationsApi.ts
new file mode 100644
index 0000000..757aecb
--- /dev/null
+++ b/services/api/integrationsApi.ts
@@ -0,0 +1,27 @@
+import type { Integration } from '~/types/integration';
+import { extractResponseData } from './apiHelpers';
+
+interface ApiResponse<T> {
+  success?: boolean;
+  message?: string;
+  data?: T;
+}
+
+/**
+ * Integrations API Service
+ * Lists installed integrations and the UI each one describes.
+ */
+const integrationsApi = {
+  /**
+   * Fetch all installed integrations.
+   * GET /integrations
+   */
+  async fetchAll(): Promise<Integration[]> {
+    const api = useApi();
+    const response = await api<ApiResponse<Integration[]>>('/integrations');
+    return extractResponseData<Integration[]>(response, []);
+  }
+};
+
+export default integrationsApi;
+export { integrationsApi };
diff --git a/services/api/mcpApi.ts b/services/api/mcpApi.ts
new file mode 100644
index 0000000..b4d732b
--- /dev/null
+++ b/services/api/mcpApi.ts
@@ -0,0 +1,62 @@
+import { extractResponseData } from './apiHelpers';
+
+interface ApiResponse<T> {
+  success?: boolean;
+  message?: string;
+  data?: T;
+}
+
+export interface McpToken {
+  id: number;
+  name: string;
+  last_used_at: string | null;
+  created_at: string;
+}
+
+export interface McpTokenCreated {
+  id: number;
+  name: string;
+  token: string;
+}
+
+/**
+ * MCP API Service
+ * Manages the personal access tokens a user issues so an external AI client
+ * (Claude Desktop, Cursor) can connect to the MCP server.
+ */
+const mcpApi = {
+  /**
+   * List the user's MCP tokens (never includes the raw token).
+   * GET /ai/mcp/tokens
+   */
+  async listTokens(): Promise<McpToken[]> {
+    const api = useApi();
+    const response = await api<ApiResponse<McpToken[]>>('/ai/mcp/tokens');
+    return extractResponseData<McpToken[]>(response, []);
+  },
+
+  /**
+   * Create a token. The raw token is returned once, here only.
+   * POST /ai/mcp/tokens
+   */
+  async createToken(name: string): Promise<McpTokenCreated> {
+    const api = useApi();
+    const response = await api<ApiResponse<McpTokenCreated>>('/ai/mcp/tokens', {
+      method: 'POST',
+      body: { name }
+    });
+    return extractResponseData<McpTokenCreated>(response, {} as McpTokenCreated);
+  },
+
+  /**
+   * Revoke a token by id.
+   * DELETE /ai/mcp/tokens/{id}
+   */
+  async revokeToken(id: number): Promise<void> {
+    const api = useApi();
+    await api(`/ai/mcp/tokens/${id}`, { method: 'DELETE' });
+  }
+};
+
+export default mcpApi;
+export { mcpApi };
diff --git a/services/api/statsApi.ts b/services/api/statsApi.ts
index d60601a..d4327ea 100644
--- a/services/api/statsApi.ts
+++ b/services/api/statsApi.ts
@@ -1,8 +1,35 @@
+export type StatsSection =
+  | 'overview'
+  | 'activity'
+  | 'comparisons'
+  | 'categories'
+  | 'parties'
+  | 'cashflow'
+  | 'position';
+
+export interface PositionData {
+  earned_income: number;
+  discretionary_spend: number;
+  cash_balance: number;
+  holdings_value: number;
+  total_net_worth: number;
+  loan_received: number;
+  loan_repayment: number;
+  debt_owed: number;
+  debt_settled: number;
+  loans_debt_net: number;
+  investment_principal: number;
+  investment_returns: number;
+  gifts_received: number;
+  net_worth_delta: number;
+}
+
 export interface StatsParams {
   preset?: 'all_time' | 'current_week' | 'current_month' | 'last_3_months';
   start_date?: string;
   end_date?: string;
   wallet_ids?: string;
+  section?: StatsSection;
 }
 
 export interface StatsOverview {
@@ -65,6 +92,11 @@ export interface StatsResponse {
       monthly_cash_flow: MonthlyCashFlow[];
       expense_by_wallet?: PartyData[];
     };
+    position?: PositionData;
+    // Set when amounts in a currency with no available exchange rate were
+    // excluded from the totals, so figures are understated for those currencies.
+    partial?: boolean;
+    unconverted_currencies?: string[];
   };
 }
 
@@ -85,6 +117,9 @@ const statsApi = {
     if (params.wallet_ids) {
       queryParams.append('wallet_ids', params.wallet_ids);
     }
+    if (params.section) {
+      queryParams.append('section', params.section);
+    }
 
     const queryString = queryParams.toString();
     const url = queryString ? `/stats?${queryString}` : '/stats';
diff --git a/services/transactionApi.ts b/services/transactionApi.ts
index 02bf897..34fd3fd 100644
--- a/services/transactionApi.ts
+++ b/services/transactionApi.ts
@@ -23,6 +23,12 @@ const transactionApi = {
     if (params?.type) {
       queryParams.append('type', params.type);
     }
+    if (params?.intent) {
+      queryParams.append('intent', params.intent);
+    }
+    if (params?.exclude_transfers) {
+      queryParams.append('exclude_transfers', '1');
+    }
     if (params?.limit) {
       queryParams.append('limit', params.limit.toString());
     }
diff --git a/tests/components/AIChat.test.ts b/tests/components/AIChat.test.ts
index 0c8abf1..5888bf6 100644
--- a/tests/components/AIChat.test.ts
+++ b/tests/components/AIChat.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { mount, flushPromises } from '@vue/test-utils';
-import AIChat from '@/components/ai/AIChat.vue';
+import ChatExperience from '@/components/ai/ChatExperience.vue';
 import type { ChatSession } from '@/services/api/aiApi';
 
 const mockListSessions = vi.fn();
@@ -10,6 +10,7 @@ const mockAddMessage = vi.fn();
 const mockDeleteSession = vi.fn();
 
 vi.mock('@/services/api/aiApi', () => ({
+  default: { exportCanvasUrl: vi.fn() },
   aiApi: {
     listSessions: (...args: unknown[]) => mockListSessions(...args),
     getSession: (...args: unknown[]) => mockGetSession(...args),
@@ -19,6 +20,12 @@ vi.mock('@/services/api/aiApi', () => ({
   }
 }));
 
+const mountChat = () =>
+  mount(ChatExperience, {
+    props: { mode: 'full' },
+    global: { stubs: { ChatLandingInsights: true } }
+  });
+
 const emptyPage = { data: [], current_page: 1, last_page: 1, total: 0 };
 
 const session = (overrides: Partial<ChatSession> = {}): ChatSession => ({
@@ -30,17 +37,18 @@ const session = (overrides: Partial<ChatSession> = {}): ChatSession => ({
   ...overrides
 });
 
-describe('AIChat', () => {
+describe('ChatExperience (full mode)', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockListSessions.mockResolvedValue(emptyPage);
   });
 
-  it('renders the empty-state prompt when no session is active', async () => {
-    const wrapper = mount(AIChat);
+  it('renders the centered hero when no session is active', async () => {
+    const wrapper = mountChat();
     await flushPromises();
 
-    expect(wrapper.text()).toContain('Ask about your finances');
+    expect(wrapper.find('.hero').exists()).toBe(true);
+    expect(wrapper.text()).toContain('What can I help with?');
   });
 
   it('creates a new session on first send', async () => {
@@ -78,7 +86,7 @@ describe('AIChat', () => {
     });
     mockCreateSession.mockResolvedValueOnce(created);
 
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
 
     await wrapper.find('.chat-input').setValue('How much on food?');
@@ -87,7 +95,8 @@ describe('AIChat', () => {
 
     expect(mockCreateSession).toHaveBeenCalledWith({
       message: 'How much on food?',
-      format_hint: undefined
+      format_hint: undefined,
+      defer_processing: false
     });
     expect(wrapper.text()).toContain('How much on food?');
     expect(wrapper.findComponent({ name: 'TypingDots' }).exists()).toBe(true);
@@ -139,14 +148,15 @@ describe('AIChat', () => {
     });
     mockGetSession.mockResolvedValueOnce(existing);
 
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
 
     await wrapper.findAll('.session-item')[0].trigger('click');
     await flushPromises();
 
-    expect(wrapper.find('.result-scalar').exists()).toBe(true);
-    expect(wrapper.text()).toContain('500');
+    // The prose answer is shown; the scalar echo is suppressed to avoid the
+    // "$500" + "500" duplicate.
+    expect(wrapper.find('.result-scalar').exists()).toBe(false);
     expect(wrapper.text()).toContain('You spent $500.');
   });
 
@@ -191,7 +201,7 @@ describe('AIChat', () => {
     });
     mockGetSession.mockResolvedValueOnce(existing);
 
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
     await wrapper.findAll('.session-item')[0].trigger('click');
     await flushPromises();
@@ -210,7 +220,7 @@ describe('AIChat', () => {
       total: 2
     });
 
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
 
     expect(wrapper.findAll('.session-item').length).toBe(2);
@@ -219,7 +229,7 @@ describe('AIChat', () => {
   });
 
   it('does not send empty messages', async () => {
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
 
     await wrapper.find('form').trigger('submit');
@@ -238,7 +248,7 @@ describe('AIChat', () => {
     });
     mockDeleteSession.mockResolvedValueOnce(true);
 
-    const wrapper = mount(AIChat);
+    const wrapper = mountChat();
     await flushPromises();
     await wrapper.find('.remove-btn').trigger('click');
     await flushPromises();
diff --git a/tests/components/CanvasPanel.test.ts b/tests/components/CanvasPanel.test.ts
new file mode 100644
index 0000000..a82eff7
--- /dev/null
+++ b/tests/components/CanvasPanel.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CanvasPanel from '@/components/ai/CanvasPanel.vue';
+
+describe('CanvasPanel', () => {
+  it('renders the canvas title and its blocks when a canvas is open', () => {
+    const w = mount(CanvasPanel, {
+      props: {
+        sessionId: 1,
+        canvas: {
+          type: 'canvas',
+          title: 'Spending Habits Report',
+          blocks: [{ type: 'markdown', text: 'You spent **a lot** on coffee.' }]
+        }
+      },
+      global: { stubs: { Teleport: true, ClientOnly: true, NuxtLink: true } }
+    });
+
+    expect(w.text()).toContain('Spending Habits Report');
+    // The composed blocks render via the dispatcher (markdown -> HTML).
+    expect(w.html()).toContain('<strong>a lot</strong>');
+  });
+
+  it('renders nothing when no canvas is open', () => {
+    const w = mount(CanvasPanel, {
+      props: { canvas: null },
+      global: { stubs: { Teleport: true } }
+    });
+    expect(w.text()).toBe('');
+  });
+});
diff --git a/tests/components/ChatChartBlock.test.ts b/tests/components/ChatChartBlock.test.ts
new file mode 100644
index 0000000..2739b13
--- /dev/null
+++ b/tests/components/ChatChartBlock.test.ts
@@ -0,0 +1,99 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { h } from 'vue';
+import ChatChartBlock from '@/components/ai/blocks/ChatChartBlock.vue';
+
+// Record the chart type the component asks ApexCharts to render.
+vi.mock('vue3-apexcharts', () => ({
+  __esModule: true,
+  default: {
+    name: 'apexchart',
+    inheritAttrs: false,
+    setup:
+      (_props: unknown, { attrs }: { attrs: Record<string, unknown> }) =>
+      () =>
+        h('div', { class: 'apexchart-stub', 'data-type': attrs.type })
+  }
+}));
+
+const ClientOnly = {
+  name: 'ClientOnly',
+  setup(_: unknown, { slots }: { slots: { default?: () => unknown } }) {
+    return () => h('div', slots.default ? (slots.default() as never) : []);
+  }
+};
+
+const mountChart = (props: Record<string, unknown>) =>
+  mount(ChatChartBlock, { props, global: { stubs: { ClientOnly } } });
+
+const renderedType = async (props: Record<string, unknown>) => {
+  const w = mountChart(props);
+  await vi.dynamicImportSettled();
+  await flushPromises();
+  return w.find('.apexchart-stub').attributes('data-type');
+};
+
+describe('ChatChartBlock (chart-type mapping)', () => {
+  it('renders a pie hint as a pie, not a donut', async () => {
+    const type = await renderedType({
+      chart_hint: 'pie',
+      data: [
+        { category: 'Food', total: 120 },
+        { category: 'Rent', total: 500 }
+      ]
+    });
+    expect(type).toBe('pie');
+  });
+
+  it('keeps a line hint as a multi-series chart', async () => {
+    const type = await renderedType({
+      chart_hint: 'line',
+      data: [
+        { month: 'Jan', income: 100, expense: 60 },
+        { month: 'Feb', income: 120, expense: 80 }
+      ]
+    });
+    expect(type).toBe('line');
+  });
+
+  it('falls back to bar when a single-series shape is asked of multi-column data', async () => {
+    const type = await renderedType({
+      chart_hint: 'pie',
+      data: [{ month: 'Jan', income: 100, expense: 60 }]
+    });
+    expect(type).toBe('bar');
+  });
+
+  it('keeps a donut for the built-in dataset shape (ignores id/count/percentage columns)', async () => {
+    const type = await renderedType({
+      chart_hint: 'donut',
+      data: [
+        { id: 1, name: 'Food', amount: 120, transaction_count: 8, percentage: 20 },
+        { id: 2, name: 'Rent', amount: 500, transaction_count: 1, percentage: 80 }
+      ]
+    });
+    expect(type).toBe('donut');
+  });
+
+  it('charts a count-only single-series dataset when no value column exists', async () => {
+    const type = await renderedType({
+      chart_hint: 'pie',
+      data: [
+        { category: 'Food', transaction_count: 8 },
+        { category: 'Rent', transaction_count: 1 }
+      ]
+    });
+    expect(type).toBe('pie');
+  });
+
+  it('renders horizontal bar as an apex bar', async () => {
+    const type = await renderedType({
+      chart_hint: 'hbar',
+      data: [
+        { category: 'Food', total: 120 },
+        { category: 'Rent', total: 500 }
+      ]
+    });
+    expect(type).toBe('bar');
+  });
+});
diff --git a/tests/components/ChatExperienceLanding.test.ts b/tests/components/ChatExperienceLanding.test.ts
new file mode 100644
index 0000000..61c0496
--- /dev/null
+++ b/tests/components/ChatExperienceLanding.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import ChatExperience from '@/components/ai/ChatExperience.vue';
+
+// Stub the API so the surface mounts clean.
+vi.mock('@/services/api/aiApi', () => ({
+  default: { exportCanvasUrl: vi.fn() },
+  aiApi: {
+    listSessions: vi.fn().mockResolvedValue({ data: [], current_page: 1, last_page: 1, total: 0 }),
+    getSession: vi.fn(),
+    createSession: vi.fn(),
+    addMessage: vi.fn(),
+    deleteSession: vi.fn(),
+    uploadFiles: vi.fn()
+  }
+}));
+
+describe('ChatExperience (landing mode)', () => {
+  it('renders the centered chat hero with no history sidebar', async () => {
+    const w = mount(ChatExperience, {
+      props: { mode: 'landing' },
+      global: {
+        stubs: { Teleport: true, ClientOnly: true, NuxtLink: true, ChatLandingInsights: true }
+      }
+    });
+    await flushPromises();
+
+    expect(w.find('.hero').exists()).toBe(true);
+    expect(w.text()).toContain('What can I help with?');
+    expect(w.find('.attach-btn').exists()).toBe(true);
+    // Landing has no history sidebar.
+    expect(w.find('.experience-sidebar').exists()).toBe(false);
+  });
+
+  it('shows the centered hero in full mode too until the first message', async () => {
+    const w = mount(ChatExperience, {
+      props: { mode: 'full' },
+      global: {
+        stubs: { Teleport: true, ClientOnly: true, NuxtLink: true, ChatLandingInsights: true }
+      }
+    });
+    await flushPromises();
+
+    // Harmonized empty state: full mode opens on the same centered hero rather
+    // than a bottom-docked composer.
+    expect(w.find('.hero').exists()).toBe(true);
+    expect(w.find('.composer-dock').exists()).toBe(false);
+    // Full mode keeps the history sidebar.
+    expect(w.find('.experience-sidebar').exists()).toBe(true);
+  });
+});
diff --git a/tests/components/ChatImportReviewBlock.test.ts b/tests/components/ChatImportReviewBlock.test.ts
new file mode 100644
index 0000000..b96bc97
--- /dev/null
+++ b/tests/components/ChatImportReviewBlock.test.ts
@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { h } from 'vue';
+import ChatImportReviewBlock from '@/components/ai/blocks/ChatImportReviewBlock.vue';
+
+const mockGetSession = vi.fn();
+vi.mock('@/services/api/importsApi', () => ({
+  importsApi: { getSession: (...a: unknown[]) => mockGetSession(...a) }
+}));
+
+// Render NuxtLink as a plain anchor so we can read the resolved `to`.
+const NuxtLink = {
+  props: ['to'],
+  setup(props: { to: string }, { slots }: { slots: { default?: () => unknown } }) {
+    return () => h('a', { href: props.to }, slots.default ? (slots.default() as never) : []);
+  }
+};
+
+const mountBlock = async (block: Record<string, unknown>) => {
+  const w = mount(ChatImportReviewBlock, { props: { block }, global: { stubs: { NuxtLink } } });
+  await flushPromises();
+  return w;
+};
+
+describe('ChatImportReviewBlock', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('deep-links to the specific import session', async () => {
+    mockGetSession.mockResolvedValue({ status: 'ready' });
+    const w = await mountBlock({
+      type: 'import_review',
+      import_session_id: 42,
+      status: 'analyzing',
+      file_name: 'statement.csv'
+    });
+    expect(w.find('a').attributes('href')).toBe('/imports?session=42');
+    expect(w.text()).toContain('statement.csv');
+  });
+
+  it('reflects the live status: a failed import shows failed, not analyzing', async () => {
+    mockGetSession.mockResolvedValue({ status: 'failed' });
+    const w = await mountBlock({
+      type: 'import_review',
+      import_session_id: 7,
+      status: 'analyzing'
+    });
+    expect(w.text()).toContain('Import failed');
+    expect(w.text()).not.toContain('Analyzing');
+    expect(w.find('.spin').exists()).toBe(false);
+  });
+
+  it('shows the spinner while the import is still in progress', async () => {
+    mockGetSession.mockResolvedValue({ status: 'enriching' });
+    const w = await mountBlock({
+      type: 'import_review',
+      import_session_id: 8,
+      status: 'analyzing'
+    });
+    expect(w.find('.spin').exists()).toBe(true);
+  });
+
+  it('shows unavailable (no link) when the session is gone', async () => {
+    mockGetSession.mockRejectedValue(new Error('404'));
+    const w = await mountBlock({
+      type: 'import_review',
+      import_session_id: 9,
+      status: 'analyzing'
+    });
+    expect(w.text()).toContain('Import unavailable');
+    expect(w.find('a').exists()).toBe(false);
+  });
+
+  it('renders no link when there is no session id', async () => {
+    const w = await mountBlock({ type: 'import_review', status: 'analyzing' });
+    expect(w.find('a').exists()).toBe(false);
+    expect(mockGetSession).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/components/ChatLandingInsights.test.ts b/tests/components/ChatLandingInsights.test.ts
new file mode 100644
index 0000000..9955387
--- /dev/null
+++ b/tests/components/ChatLandingInsights.test.ts
@@ -0,0 +1,121 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { computed } from 'vue';
+import ChatLandingInsights from '@/components/ai/ChatLandingInsights.vue';
+
+// WalletStatistics is app-owned (composables/useStatistics.ts, interfaces at
+// lines 9-46 / 48-140). getStatistics returns it; we substitute the internal
+// data provider so the component renders against the real shape without the
+// /stats API. h.stats lets each test choose what getStatistics resolves to.
+const h = vi.hoisted(() => ({ stats: null as unknown }));
+
+vi.mock('@/composables/useStatistics', () => ({
+  useStatistics: () => ({
+    getStatistics: () => Promise.resolve(h.stats),
+    formatCompactCurrency: (n: number) => `$${Math.round(n)}`
+  })
+}));
+
+vi.mock('@/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    getDefaultCurrency: computed(() => 'USD'),
+    loadWallets: () => Promise.resolve([])
+  })
+}));
+
+const richStats = {
+  total_income: 1800,
+  total_expenses: 1240,
+  transaction_count: 24,
+  income_insights: {
+    biggest_source: { party: 'Acme Corp', amount: 1500, percentage: 80, transaction_count: 2 }
+  },
+  expense_insights: {
+    biggest_category: { category: 'Food', amount: 400, percentage: 32, transaction_count: 9 },
+    biggest_expense: { party: 'Grocers', amount: 320, percentage: 26, transaction_count: 5 },
+    average_transaction: 52,
+    top_categories: [
+      { category: 'Food', amount: 400, percentage: 32, transaction_count: 9, type: 'EXPENSE' },
+      { category: 'Transport', amount: 220, percentage: 18, transaction_count: 4, type: 'EXPENSE' },
+      { category: 'Bills', amount: 150, percentage: 12, transaction_count: 3, type: 'EXPENSE' }
+    ],
+    budget_analysis: { expense_ratio: 0.69, savings_rate: 0.31, risk_level: 'low' }
+  },
+  time_analysis: {
+    monthly_trends: [
+      { month: 'Apr', income: 1700, expenses: 1300, net: 400 },
+      { month: 'May', income: 1750, expenses: 1280, net: 470 },
+      { month: 'Jun', income: 1800, expenses: 1240, net: 560 }
+    ]
+  },
+  performance: { growth_percentage: 12 }
+};
+
+const emptyStats = {
+  total_income: 0,
+  total_expenses: 0,
+  transaction_count: 0,
+  income_insights: { biggest_source: null },
+  expense_insights: {
+    biggest_category: null,
+    biggest_expense: null,
+    average_transaction: 0,
+    top_categories: [],
+    budget_analysis: { expense_ratio: 0, savings_rate: 0, risk_level: 'low' }
+  },
+  time_analysis: { monthly_trends: [] },
+  performance: { growth_percentage: 0 }
+};
+
+const mountLanding = async () => {
+  const w = mount(ChatLandingInsights);
+  await flushPromises();
+  return w;
+};
+
+let wrapper: ReturnType<typeof mount> | null = null;
+afterEach(() => {
+  wrapper?.unmount();
+  wrapper = null;
+});
+
+describe('ChatLandingInsights', () => {
+  it('renders the warm stat cards from the fetched stats', async () => {
+    h.stats = richStats;
+    wrapper = await mountLanding();
+
+    expect(wrapper.findAll('.stat').length).toBeGreaterThanOrEqual(3);
+    expect(wrapper.find('.empty-hint').exists()).toBe(false);
+
+    const text = wrapper.text();
+    expect(text).toContain('$560'); // net flow = 1800 - 1240
+    expect(text).toContain('31'); // savings rate 0.31 -> 31%
+    expect(text).toContain('Food'); // top category
+    expect(text).toContain('24'); // transaction count
+    expect(text).toContain('Grocers'); // biggest expense party
+  });
+
+  it('emits the spotlight prompt when the spotlight is clicked', async () => {
+    h.stats = richStats;
+    wrapper = await mountLanding();
+
+    const spotlight = wrapper.find('.spotlight');
+    expect(spotlight.exists()).toBe(true);
+
+    await spotlight.trigger('click');
+
+    const picks = wrapper.emitted('pick');
+    expect(picks).toBeTruthy();
+    // savings_rate > 0 makes the savings line the first spotlight (landingInsights order).
+    expect(picks?.[0]?.[0]).toBe('How can I improve my savings rate?');
+  });
+
+  it('shows the new-account hint and no cards when there is no data', async () => {
+    h.stats = emptyStats;
+    wrapper = await mountLanding();
+
+    expect(wrapper.find('.empty-hint').exists()).toBe(true);
+    expect(wrapper.findAll('.stat').length).toBe(0);
+    expect(wrapper.find('.spotlight').exists()).toBe(false);
+  });
+});
diff --git a/tests/components/ChatProgressSteps.test.ts b/tests/components/ChatProgressSteps.test.ts
new file mode 100644
index 0000000..1c8d30c
--- /dev/null
+++ b/tests/components/ChatProgressSteps.test.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChatProgressSteps from '@/components/ai/ChatProgressSteps.vue';
+
+const mountSteps = (steps: string[]) => mount(ChatProgressSteps, { props: { steps } });
+
+describe('ChatProgressSteps', () => {
+  it('renders every step label', () => {
+    const w = mountSteps(['Looking through your records', 'Crunching the numbers']);
+    expect(w.text()).toContain('Looking through your records');
+    expect(w.text()).toContain('Crunching the numbers');
+  });
+
+  it('marks all but the last step as done and spins the last', () => {
+    const w = mountSteps(['A', 'B', 'C']);
+    expect(w.findAll('.progress-step.done')).toHaveLength(2);
+    expect(w.findAll('.step-spinner')).toHaveLength(1);
+  });
+
+  it('shows a single active step with no done markers', () => {
+    const w = mountSteps(['Only step']);
+    expect(w.findAll('.progress-step.done')).toHaveLength(0);
+    expect(w.findAll('.step-spinner')).toHaveLength(1);
+  });
+});
diff --git a/tests/components/ChatProposedActionBlock.test.ts b/tests/components/ChatProposedActionBlock.test.ts
new file mode 100644
index 0000000..221ef15
--- /dev/null
+++ b/tests/components/ChatProposedActionBlock.test.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { ref } from 'vue';
+import ChatProposedActionBlock from '@/components/ai/blocks/ChatProposedActionBlock.vue';
+
+vi.stubGlobal('useNotifications', () => ({ showError: vi.fn() }));
+
+vi.mock('@/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    wallets: ref([
+      { id: 4, name: 'Cash' },
+      { id: 5, name: 'Bank' }
+    ]),
+    categories: ref([{ id: 9, name: 'Food' }]),
+    loadWallets: vi.fn(),
+    loadCategories: vi.fn()
+  })
+}));
+
+const mockConfirm = vi.fn().mockResolvedValue({});
+const mockReject = vi.fn().mockResolvedValue(undefined);
+vi.mock('@/services/api/aiApi', () => ({
+  aiApi: {
+    confirmAction: (...args: unknown[]) => mockConfirm(...args),
+    rejectAction: (...args: unknown[]) => mockReject(...args)
+  }
+}));
+
+const block = () => ({
+  type: 'proposed_action',
+  id: 7,
+  action_type: 'transaction.create',
+  summary: 'Log an expense of 20 for coffee.',
+  risk: 'high',
+  status: 'proposed',
+  confirm_url: '',
+  reject_url: '',
+  fields: [
+    {
+      key: 'type',
+      label: 'Type',
+      type: 'enum',
+      value: 'expense',
+      display: 'Expense',
+      options: ['income', 'expense']
+    },
+    { key: 'amount', label: 'Amount', type: 'number', value: 20, display: '20' },
+    { key: 'wallet_id', label: 'Wallet', type: 'wallet', value: 4, display: 'Cash' },
+    { key: 'description', label: 'Description', type: 'text', value: 'coffee', display: 'coffee' }
+  ]
+});
+
+describe('ChatProposedActionBlock (editable review form)', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('renders the fields as editable inputs', () => {
+    const w = mount(ChatProposedActionBlock, { props: { block: block(), sessionId: 1 } });
+    expect(w.findAll('.pa-input').length).toBe(4);
+    // wallet select offers the user's wallets
+    expect(w.html()).toContain('Bank');
+  });
+
+  it('confirms with the edited values as overrides', async () => {
+    const w = mount(ChatProposedActionBlock, { props: { block: block(), sessionId: 1 } });
+    const amount = w.findAll('input[type="number"]')[0];
+    await amount.setValue(35);
+
+    await w.find('.pa-confirm').trigger('click');
+    await flushPromises();
+
+    expect(mockConfirm).toHaveBeenCalledTimes(1);
+    const [sessionId, actionId, overrides] = mockConfirm.mock.calls[0];
+    expect(sessionId).toBe(1);
+    expect(actionId).toBe(7);
+    expect(overrides.amount).toBe(35);
+    expect(overrides.wallet_id).toBe(4);
+  });
+
+  it('prefills a blank datetime with now and sends it', async () => {
+    const b = block();
+    b.fields.push({
+      key: 'datetime',
+      label: 'When',
+      type: 'datetime',
+      value: null,
+      display: 'Now'
+    });
+    const w = mount(ChatProposedActionBlock, { props: { block: b, sessionId: 1 } });
+
+    await w.find('.pa-confirm').trigger('click');
+    await flushPromises();
+
+    const overrides = mockConfirm.mock.calls[0][2];
+    // A blank "When" is prefilled with the current local time (datetime-local
+    // format) so it's visible and editable, not left to the Unix epoch.
+    expect(overrides.datetime).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+    expect(overrides.amount).toBe(20);
+  });
+
+  it('keeps a provided datetime value', async () => {
+    const b = block();
+    b.fields.push({
+      key: 'datetime',
+      label: 'When',
+      type: 'datetime',
+      value: '2026-01-15T09:30:00',
+      display: '2026-01-15T09:30:00'
+    });
+    const w = mount(ChatProposedActionBlock, { props: { block: b, sessionId: 1 } });
+
+    await w.find('.pa-confirm').trigger('click');
+    await flushPromises();
+
+    const overrides = mockConfirm.mock.calls[0][2];
+    expect(overrides.datetime).toBe('2026-01-15T09:30');
+  });
+});
diff --git a/tests/components/ChatResultRenderer.test.ts b/tests/components/ChatResultRenderer.test.ts
new file mode 100644
index 0000000..63c43f6
--- /dev/null
+++ b/tests/components/ChatResultRenderer.test.ts
@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChatResultRenderer from '@/components/ai/ChatResultRenderer.vue';
+import type { ChatMessageResult } from '@/services/api/aiApi';
+
+const render = (result: ChatMessageResult) =>
+  mount(ChatResultRenderer, {
+    props: { result, sessionId: 1 },
+    global: { stubs: { ClientOnly: true, NuxtLink: true } }
+  });
+
+describe('ChatResultRenderer (block dispatcher)', () => {
+  it('renders a markdown block as sanitized HTML', () => {
+    const w = render({
+      source: 'agent',
+      blocks: [{ type: 'markdown', text: 'Spending is **down**.' }]
+    });
+    expect(w.html()).toContain('<strong>down</strong>');
+  });
+
+  it('renders a multi-row table block as a table', () => {
+    const w = render({
+      source: 'agent',
+      blocks: [
+        {
+          type: 'table',
+          columns: ['category', 'total'],
+          rows: [
+            { category: 'Food', total: 120 },
+            { category: 'Rent', total: 500 }
+          ]
+        }
+      ]
+    });
+    expect(w.find('table').exists()).toBe(true);
+    expect(w.text()).toContain('Food');
+    expect(w.text()).toContain('Rent');
+  });
+
+  it('renders a single-row table as a record card, not a table', () => {
+    const w = render({
+      source: 'agent',
+      blocks: [{ type: 'table', columns: ['total'], rows: [{ total: 500 }] }]
+    });
+    expect(w.find('table').exists()).toBe(false);
+    expect(w.find('.record-card').exists()).toBe(true);
+  });
+
+  it('renders KPI cards', () => {
+    const w = render({
+      source: 'agent',
+      blocks: [
+        { type: 'kpi', items: [{ label: 'Income', value: 1000, delta_percent: 12, trend: 'up' }] }
+      ]
+    });
+    expect(w.text()).toContain('Income');
+    expect(w.text()).toContain('12.0%');
+  });
+
+  it('falls back gracefully for an unknown block type', () => {
+    const w = render({
+      source: 'agent',
+      blocks: [{ type: 'some_future_widget', summary: 'A new thing' }]
+    });
+    expect(w.text()).toContain('A new thing');
+  });
+
+  it('still renders a legacy SmartQL scalar result', () => {
+    const w = render({ source: 'smartql', format_type: 'scalar', rows: [{ total: 500 }] });
+    expect(w.find('.result-scalar').text()).toBe('500');
+  });
+});
diff --git a/tests/components/DashboardAgentHero.test.ts b/tests/components/DashboardAgentHero.test.ts
new file mode 100644
index 0000000..9c1694b
--- /dev/null
+++ b/tests/components/DashboardAgentHero.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import DashboardAgentHero from '@/components/dashboard/DashboardAgentHero.vue';
+import { usePendingAsk } from '@/composables/usePendingAsk';
+
+const push = vi.fn();
+
+vi.mock('nuxt/app', () => ({ useRouter: () => ({ push }) }));
+vi.mock('@/composables/useAuth', () => ({
+  useAuth: () => ({ user: ref({ first_name: 'Sam' }) })
+}));
+vi.mock('@/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    wallets: ref([]),
+    parties: ref([]),
+    loadWallets: vi.fn(),
+    loadParties: vi.fn()
+  })
+}));
+vi.mock('@/composables/useTransactions', () => ({
+  useTransactions: () => ({ addTransaction: vi.fn(), refreshTransactions: vi.fn() })
+}));
+vi.mock('@/composables/useNotifications', () => ({
+  useNotifications: () => ({ showSuccess: vi.fn(), showError: vi.fn() })
+}));
+vi.mock('@/services/api/transfersApi', () => ({
+  default: { create: vi.fn() },
+  transfersApi: { create: vi.fn() }
+}));
+
+const stubs = { teleport: true };
+
+describe('DashboardAgentHero', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Drain any leftover pending ask between tests.
+    usePendingAsk().consumePendingAsk();
+  });
+
+  it('greets the user by their real name', () => {
+    const w = mount(DashboardAgentHero, { global: { stubs } });
+    expect(w.find('.hero-title').text()).toContain('Sam');
+  });
+
+  it('hands a freeform ask to the chat and navigates', async () => {
+    const w = mount(DashboardAgentHero, { global: { stubs } });
+
+    await w.find('.hero-input').setValue('show my spending');
+    await w.find('.hero-ask').trigger('submit');
+
+    expect(push).toHaveBeenCalledWith('/home');
+    expect(usePendingAsk().consumePendingAsk()?.text).toBe('show my spending');
+  });
+
+  it('runs the build-report quick action through to navigation', async () => {
+    const w = mount(DashboardAgentHero, { global: { stubs } });
+
+    // Third chip is "Build a report" (after Log and Transfer).
+    await w.findAll('.agent-chip')[2].trigger('click');
+    await w.find('.qa-submit').trigger('click');
+
+    expect(push).toHaveBeenCalledWith('/home');
+    expect(usePendingAsk().consumePendingAsk()?.text).toContain('Build a financial report');
+  });
+});
diff --git a/tests/components/DashboardQuickActionModal.test.ts b/tests/components/DashboardQuickActionModal.test.ts
new file mode 100644
index 0000000..233eaca
--- /dev/null
+++ b/tests/components/DashboardQuickActionModal.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import DashboardQuickActionModal from '@/components/dashboard/DashboardQuickActionModal.vue';
+
+vi.mock('@/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    wallets: ref([
+      { id: 1, name: 'Cash', currency: 'USD' },
+      { id: 2, name: 'Bank', currency: 'USD' }
+    ]),
+    parties: ref([{ id: 5, name: 'Starbucks' }]),
+    loadWallets: vi.fn(),
+    loadParties: vi.fn()
+  })
+}));
+
+const mocks = vi.hoisted(() => ({
+  addTransaction: vi.fn(),
+  refreshTransactions: vi.fn(),
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+  transferCreate: vi.fn()
+}));
+
+vi.mock('@/composables/useTransactions', () => ({
+  useTransactions: () => ({
+    addTransaction: mocks.addTransaction,
+    refreshTransactions: mocks.refreshTransactions
+  })
+}));
+vi.mock('@/composables/useNotifications', () => ({
+  useNotifications: () => ({ showSuccess: mocks.showSuccess, showError: mocks.showError })
+}));
+vi.mock('@/services/api/transfersApi', () => ({
+  default: { create: mocks.transferCreate },
+  transfersApi: { create: mocks.transferCreate }
+}));
+
+const stubs = { teleport: true };
+
+describe('DashboardQuickActionModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.addTransaction.mockResolvedValue({});
+    mocks.refreshTransactions.mockResolvedValue(undefined);
+    mocks.transferCreate.mockResolvedValue({});
+  });
+
+  it('sends a report prompt to the chat on submit', async () => {
+    const w = mount(DashboardQuickActionModal, { props: { action: 'report' }, global: { stubs } });
+
+    await w.find('.qa-submit').trigger('click');
+
+    const events = w.emitted('submit');
+    expect(events).toBeTruthy();
+    expect((events![0][0] as { text: string }).text).toContain(
+      'Build a financial report for this month'
+    );
+  });
+
+  it('logs a transaction directly and emits done', async () => {
+    const w = mount(DashboardQuickActionModal, { props: { action: 'log' }, global: { stubs } });
+
+    await w.find('input[type="number"]').setValue(20);
+    await w.find('.qa-submit').trigger('click');
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(mocks.addTransaction).toHaveBeenCalledTimes(1);
+    expect(mocks.addTransaction.mock.calls[0][0]).toMatchObject({ amount: '20', type: 'EXPENSE' });
+    expect(w.emitted('done')).toBeTruthy();
+    expect(w.emitted('submit')).toBeFalsy();
+  });
+
+  it('creates a transfer directly between two wallets', async () => {
+    const w = mount(DashboardQuickActionModal, {
+      props: { action: 'transfer' },
+      global: { stubs }
+    });
+
+    const selects = w.findAll('select');
+    await w.find('input[type="number"]').setValue(50);
+    await selects[0].setValue('1');
+    await selects[1].setValue('2');
+    await w.find('.qa-submit').trigger('click');
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(mocks.transferCreate).toHaveBeenCalledTimes(1);
+    expect(mocks.transferCreate.mock.calls[0][0]).toMatchObject({
+      amount: 50,
+      from_wallet_id: 1,
+      to_wallet_id: 2
+    });
+    expect(w.emitted('done')).toBeTruthy();
+  });
+
+  it('disables transfer submit until both wallets differ', async () => {
+    const w = mount(DashboardQuickActionModal, {
+      props: { action: 'transfer' },
+      global: { stubs }
+    });
+
+    const selects = w.findAll('select');
+    await w.find('input[type="number"]').setValue(50);
+    await selects[0].setValue('1');
+    await selects[1].setValue('1');
+
+    expect(w.find('.qa-submit').attributes('disabled')).toBeDefined();
+  });
+});
diff --git a/tests/components/DashboardWalletSelector.test.ts b/tests/components/DashboardWalletSelector.test.ts
new file mode 100644
index 0000000..1687ceb
--- /dev/null
+++ b/tests/components/DashboardWalletSelector.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import DashboardWalletSelector from '@/components/dashboard/DashboardWalletSelector.vue';
+
+const mockUseStatistics = {
+  selectedWalletId: ref(null),
+  availableWallets: ref([
+    { id: null, name: 'All Wallets' },
+    { id: 1, name: 'Main Wallet' }
+  ]),
+  setSelectedWallet: vi.fn()
+};
+
+vi.mock('@/composables/useStatistics', () => ({
+  useStatistics: () => mockUseStatistics
+}));
+
+const stubs = {
+  ChevronDown: { template: '<span />' },
+  Wallet: { template: '<span />' },
+  teleport: true
+};
+
+describe('DashboardWalletSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseStatistics.selectedWalletId.value = null;
+  });
+
+  it('renders the wallet selector', () => {
+    const wrapper = mount(DashboardWalletSelector, { global: { stubs } });
+    expect(wrapper.find('.wallet-selector').exists()).toBe(true);
+  });
+
+  it('shows "All Wallets" by default', () => {
+    const wrapper = mount(DashboardWalletSelector, { global: { stubs } });
+    expect(wrapper.find('.wallet-name').text()).toBe('All Wallets');
+  });
+
+  it('toggles dropdown on click', async () => {
+    const wrapper = mount(DashboardWalletSelector, { global: { stubs } });
+
+    expect(wrapper.find('.wallet-dropdown').exists()).toBe(false);
+    await wrapper.find('.wallet-selector').trigger('click');
+    expect(wrapper.find('.wallet-dropdown').exists()).toBe(true);
+  });
+
+  it('shows wallet options in dropdown', async () => {
+    const wrapper = mount(DashboardWalletSelector, { global: { stubs } });
+
+    await wrapper.find('.wallet-selector').trigger('click');
+
+    const options = wrapper.findAll('.wallet-option');
+    expect(options.length).toBe(2);
+    expect(options[0].text()).toBe('All Wallets');
+    expect(options[1].text()).toBe('Main Wallet');
+  });
+
+  it('calls setSelectedWallet when an option is clicked', async () => {
+    const wrapper = mount(DashboardWalletSelector, { global: { stubs } });
+
+    await wrapper.find('.wallet-selector').trigger('click');
+    await wrapper.findAll('.wallet-option')[1].trigger('click');
+
+    expect(mockUseStatistics.setSelectedWallet).toHaveBeenCalledWith(1);
+  });
+});
diff --git a/tests/components/DescriptorRenderer.test.ts b/tests/components/DescriptorRenderer.test.ts
new file mode 100644
index 0000000..808585f
--- /dev/null
+++ b/tests/components/DescriptorRenderer.test.ts
@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, h } from 'vue';
+import DescriptorRenderer from '~/components/extensions/DescriptorRenderer.vue';
+import { useExtensionSlots } from '~/composables/useExtensionSlots';
+import type { SlotContribution } from '~/types/integration';
+
+const stubs = {
+  NuxtLink: { template: '<a><slot /></a>' }
+};
+
+function contribution(overrides: Partial<SlotContribution> = {}): SlotContribution {
+  return {
+    key: 'statement-import',
+    slot: 'settings.integrations',
+    order: 100,
+    configured: true,
+    integration: {
+      key: 'statement-import',
+      name: 'Statement Import',
+      description: 'desc',
+      category: 'import',
+      icon: null,
+      feature_key: null,
+      configured: true,
+      entitled: true,
+      ui: null
+    },
+    ui: {
+      slots: ['settings.integrations'],
+      card: { title: 'Import bank statements', cta: 'Import', description: 'Upload a statement' },
+      component: null
+    },
+    ...overrides
+  };
+}
+
+describe('DescriptorRenderer', () => {
+  it('renders an integration card from the descriptor (no plugin JS)', () => {
+    const wrapper = mount(DescriptorRenderer, {
+      props: { contribution: contribution() },
+      global: { stubs }
+    });
+
+    expect(wrapper.text()).toContain('Import bank statements');
+    expect(wrapper.text()).toContain('Import');
+  });
+
+  it('shows a needs-setup badge when the integration is not configured', () => {
+    const wrapper = mount(DescriptorRenderer, {
+      props: { contribution: contribution({ configured: false }) },
+      global: { stubs }
+    });
+
+    expect(wrapper.text()).toContain('Needs setup');
+  });
+
+  it('renders a registered component when the descriptor sets ui.component (escape hatch)', () => {
+    const Custom = defineComponent({ render: () => h('div', 'CUSTOM-WIDGET') });
+    useExtensionSlots().registerComponent('statement-import.custom', Custom);
+
+    const wrapper = mount(DescriptorRenderer, {
+      props: {
+        contribution: contribution({
+          ui: {
+            slots: ['settings.integrations'],
+            card: { title: 'unused' },
+            component: 'statement-import.custom'
+          }
+        })
+      },
+      global: { stubs }
+    });
+
+    expect(wrapper.text()).toContain('CUSTOM-WIDGET');
+    expect(wrapper.text()).not.toContain('unused');
+  });
+});
diff --git a/tests/components/TAvatar.test.ts b/tests/components/TAvatar.test.ts
new file mode 100644
index 0000000..8bce96e
--- /dev/null
+++ b/tests/components/TAvatar.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import TAvatar from '@/components/TAvatar.vue';
+
+const push = vi.fn();
+vi.mock('vue-router', () => ({ useRouter: () => ({ push }) }));
+
+const mockUser = ref<Record<string, unknown> | null>(null);
+vi.mock('@/composables/useAuth', () => ({
+  useAuth: () => ({ user: mockUser, logout: vi.fn() })
+}));
+
+vi.mock('@/composables/useDropdown', () => ({
+  useDropdown: () => ({ isOpen: ref(true), rootRef: ref(null), toggle: vi.fn(), close: vi.fn() })
+}));
+
+const mountAvatar = () => mount(TAvatar, { props: { imageUrl: '/a.png' } });
+
+describe('TAvatar admin entry', () => {
+  it('hides the admin button for non-admins', () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: false };
+    const w = mountAvatar();
+    expect(w.text()).not.toContain('Admin');
+  });
+
+  it('shows the admin button for admins', () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: true };
+    const w = mountAvatar();
+    expect(w.text()).toContain('Admin');
+  });
+
+  it('navigates to the admin area when clicked', async () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: true };
+    const w = mountAvatar();
+
+    const adminButton = w.findAll('.menu-item').find((b) => b.text().includes('Admin'));
+    await adminButton!.trigger('click');
+
+    expect(push).toHaveBeenCalledWith('/admin');
+  });
+});
diff --git a/tests/components/TransactionForm.test.ts b/tests/components/TransactionForm.test.ts
index 73ed30d..c6956dc 100644
--- a/tests/components/TransactionForm.test.ts
+++ b/tests/components/TransactionForm.test.ts
@@ -170,7 +170,7 @@ describe('TransactionForm', () => {
         global: { stubs }
       });
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -181,7 +181,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('0');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -192,7 +192,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('-50');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -202,7 +202,7 @@ describe('TransactionForm', () => {
         global: { stubs }
       });
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeFalsy();
     });
@@ -217,7 +217,7 @@ describe('TransactionForm', () => {
 
       await wrapper.find('input[type="number"]').setValue('100');
       await wrapper.find('textarea').setValue('Test expense');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -233,7 +233,7 @@ describe('TransactionForm', () => {
 
       await wrapper.find('input[type="number"]').setValue('500');
       await wrapper.find('textarea').setValue('Test income');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -241,6 +241,39 @@ describe('TransactionForm', () => {
       expect(payload.amount).toContain('500');
     });
 
+    it('defaults intent to regular and submits the chosen intent', async () => {
+      const wrapper = mount(TransactionForm, {
+        props: { isOutcomeSelected: false },
+        global: { stubs }
+      });
+
+      await wrapper.find('input[type="number"]').setValue('5000');
+
+      const pills = wrapper.findAll('.intent-pill');
+      expect(pills.length).toBeGreaterThan(1);
+
+      // Pick the "Loan received" intent (income side).
+      const loanPill = pills.find((p) => p.text().includes('Loan received'));
+      expect(loanPill).toBeTruthy();
+      await loanPill!.trigger('click');
+
+      await wrapper.find('.submit-button').trigger('click');
+
+      const payload = wrapper.emitted('submit')?.[0]?.[0];
+      expect(payload.intent).toBe('loan_received');
+    });
+
+    it('only offers income-side intents when recording income', () => {
+      const wrapper = mount(TransactionForm, {
+        props: { isOutcomeSelected: false },
+        global: { stubs }
+      });
+
+      const labels = wrapper.findAll('.intent-pill').map((p) => p.text());
+      expect(labels).toContain('Loan received');
+      expect(labels).not.toContain('Loan repayment');
+    });
+
     it('includes id in payload when editing', async () => {
       const wrapper = mount(TransactionForm, {
         props: {
@@ -251,7 +284,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('150');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       const payload = wrapper.emitted('submit')?.[0]?.[0];
       expect(payload.id).toBe(123);
@@ -433,7 +466,7 @@ describe('TransactionForm', () => {
         capturedSelectHandler([1, 2]);
       }
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -447,7 +480,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('100');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
diff --git a/tests/components/budgetForm.test.ts b/tests/components/budgetForm.test.ts
new file mode 100644
index 0000000..e73cbd6
--- /dev/null
+++ b/tests/components/budgetForm.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import BudgetForm from '@/components/budgets/BudgetForm.vue';
+
+vi.mock('~/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    wallets: ref([{ id: 1, name: 'Cash', currency: 'USD' }]),
+    categories: ref([]),
+    groups: ref([])
+  })
+}));
+
+describe('BudgetForm currency options', () => {
+  it('offers every supported currency, not just wallet currencies', () => {
+    const wrapper = mount(BudgetForm);
+    const codes = wrapper.findAll('select.currency option').map((o) => o.text());
+
+    expect(codes).toContain('USD'); // the user's wallet currency
+    expect(codes).toContain('EUR'); // not a wallet currency
+    expect(codes).toContain('XAF'); // not a wallet currency
+    expect(codes.length).toBeGreaterThan(1);
+  });
+
+  it('surfaces the user wallet currency first', () => {
+    const wrapper = mount(BudgetForm);
+    const codes = wrapper.findAll('select.currency option').map((o) => o.text());
+
+    expect(codes[0]).toBe('USD');
+  });
+});
diff --git a/tests/components/financialPositionView.test.ts b/tests/components/financialPositionView.test.ts
new file mode 100644
index 0000000..f6cdcb8
--- /dev/null
+++ b/tests/components/financialPositionView.test.ts
@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
+import { statsApi } from '@/services/api/statsApi';
+import transactionApi from '@/services/transactionApi';
+
+vi.mock('@/services/api/statsApi', () => ({
+  statsApi: { fetch: vi.fn() }
+}));
+
+vi.mock('@/services/transactionApi', () => ({
+  default: { fetchAll: vi.fn() }
+}));
+
+const position = {
+  earned_income: 5000,
+  discretionary_spend: 500,
+  loan_received: 3000,
+  loan_repayment: 1000,
+  debt_owed: 0,
+  debt_settled: 0,
+  loans_debt_net: 2000,
+  investment_principal: 2000,
+  investment_returns: 400,
+  gifts_received: 100,
+  net_worth_delta: 5000,
+  cash_balance: 8000,
+  holdings_value: 12000,
+  total_net_worth: 20000
+};
+
+const stubs = {
+  LoadingSkeleton: { template: '<div class="skeleton" />' },
+  NuxtLink: { template: '<a><slot /></a>' }
+};
+
+describe('FinancialPositionView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (statsApi.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: { currency: 'USD', position }
+    });
+    (transactionApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({ data: [] });
+  });
+
+  it('requests the position section', async () => {
+    mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    expect(statsApi.fetch).toHaveBeenCalledWith(expect.objectContaining({ section: 'position' }));
+  });
+
+  it('leads with the net worth result', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Net worth change');
+    expect(text).toContain('Building'); // net_worth_delta 5000 > 0
+    expect(text).toContain('+5K');
+  });
+
+  it('shows total net worth as cash plus holdings', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Total net worth now');
+    expect(text).toContain('20K'); // total_net_worth 20000
+    expect(text).toContain('Cash');
+    expect(text).toContain('Holdings');
+  });
+
+  it('organises every intent stream into money in and money out', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Money in');
+    expect(text).toContain('Money out');
+    // in: earned, returns, gifts, loan received (debt_owed 0 is dropped)
+    // out: discretionary spend, invested, loan repayment (debt_settled 0 dropped)
+    expect(text).toContain('Earned income');
+    expect(text).toContain('Invested'); // investing shows as money out
+    expect(text).toContain('Loan received');
+    expect(wrapper.findAll('.fp-row').length).toBe(7);
+  });
+
+  it('marks borrowed and invested cash as not affecting net worth', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    expect(wrapper.findAll('.fp-row--neutral').length).toBe(3); // loan in, invested, loan repayment
+  });
+
+  it('drills into a single intent stream, excluding transfers', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const row = wrapper.findAll('.fp-row').find((node) => node.text().includes('Invested'));
+    expect(row).toBeTruthy();
+    await row!.trigger('click');
+    await flushPromises();
+
+    expect(transactionApi.fetchAll).toHaveBeenCalledWith(
+      expect.objectContaining({
+        intent: 'investment_buy',
+        exclude_transfers: true,
+        type: 'expense'
+      })
+    );
+  });
+
+  it('shows the underlying transactions in the detail drawer', async () => {
+    (transactionApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: [
+        {
+          id: 1,
+          type: 'expense',
+          intent: 'investment_buy',
+          amount: 2000,
+          datetime: '2026-05-10T10:00:00.000Z',
+          wallet: { currency: 'USD' },
+          party: { name: 'Brokerage' },
+          description: 'Index fund'
+        }
+      ]
+    });
+
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const row = wrapper.findAll('.fp-row').find((node) => node.text().includes('Invested'));
+    await row!.trigger('click');
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Index fund');
+    expect(wrapper.findAll('.row').length).toBe(1);
+  });
+
+  it('passes provided params through to the fetch', async () => {
+    mount(FinancialPositionView, {
+      props: { params: { start_date: '2026-01-01', end_date: '2026-01-31' } },
+      global: { stubs }
+    });
+    await flushPromises();
+
+    expect(statsApi.fetch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        section: 'position',
+        start_date: '2026-01-01',
+        end_date: '2026-01-31'
+      })
+    );
+  });
+});
diff --git a/tests/composables/useCanvasExport.test.ts b/tests/composables/useCanvasExport.test.ts
new file mode 100644
index 0000000..3cbc36c
--- /dev/null
+++ b/tests/composables/useCanvasExport.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { useCanvasExport } from '@/composables/useCanvasExport';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  document.querySelectorAll('.print-canvas-portal').forEach((n) => n.remove());
+  document.body.classList.remove('printing-canvas');
+  document.documentElement.classList.remove('dark');
+});
+
+describe('useCanvasExport.printCanvas', () => {
+  it('appends a styled clone of the report and prints in place', () => {
+    vi.useFakeTimers();
+    const printSpy = vi.spyOn(window, 'print').mockImplementation(() => {});
+
+    const body = document.createElement('div');
+    body.innerHTML = '<div class="kpi-card">Balance</div>';
+    useCanvasExport().printCanvas(body, 'June Report');
+
+    const portal = document.querySelector('.print-canvas-portal');
+    expect(portal).not.toBeNull();
+    expect(portal?.querySelector('h1')?.textContent).toBe('June Report');
+    expect(portal?.textContent).toContain('Balance'); // the report body is cloned in
+    expect(document.body.classList.contains('printing-canvas')).toBe(true);
+    expect(printSpy).not.toHaveBeenCalled(); // deferred a tick
+
+    vi.advanceTimersByTime(50);
+    expect(printSpy).toHaveBeenCalledTimes(1);
+
+    // cleanup removes the portal and print mode
+    vi.advanceTimersByTime(1000);
+    expect(document.querySelector('.print-canvas-portal')).toBeNull();
+    expect(document.body.classList.contains('printing-canvas')).toBe(false);
+  });
+
+  it('prints light and restores the dark theme afterwards', () => {
+    vi.useFakeTimers();
+    vi.spyOn(window, 'print').mockImplementation(() => {});
+    document.documentElement.classList.add('dark');
+
+    useCanvasExport().printCanvas(document.createElement('div'), 'x');
+    expect(document.documentElement.classList.contains('dark')).toBe(false); // light for print
+
+    vi.advanceTimersByTime(1050);
+    expect(document.documentElement.classList.contains('dark')).toBe(true); // restored after
+  });
+
+  it('does nothing when there is no body element', () => {
+    useCanvasExport().printCanvas(null, 'x');
+    expect(document.querySelector('.print-canvas-portal')).toBeNull();
+  });
+});
diff --git a/tests/composables/useExtensionSlots.test.ts b/tests/composables/useExtensionSlots.test.ts
new file mode 100644
index 0000000..ecdca0f
--- /dev/null
+++ b/tests/composables/useExtensionSlots.test.ts
@@ -0,0 +1,122 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ref, defineComponent, h } from 'vue';
+import type { Integration } from '~/types/integration';
+import { useExtensionSlots } from '~/composables/useExtensionSlots';
+
+const mockIntegrations = ref<Integration[]>([]);
+
+vi.mock('~/composables/useIntegrations', () => ({
+  useIntegrations: () => ({ integrations: mockIntegrations })
+}));
+
+function makeIntegration(overrides: Partial<Integration>): Integration {
+  return {
+    key: 'k',
+    name: 'Name',
+    description: null,
+    category: 'import',
+    icon: null,
+    feature_key: null,
+    configured: true,
+    entitled: true,
+    ui: null,
+    ...overrides
+  };
+}
+
+describe('useExtensionSlots', () => {
+  beforeEach(() => {
+    mockIntegrations.value = [];
+  });
+
+  it('collects only contributions that declare the slot', () => {
+    mockIntegrations.value = [
+      makeIntegration({ key: 'a', ui: { slots: ['settings.integrations'] } }),
+      makeIntegration({ key: 'b', ui: { slots: ['dashboard.widgets'] } })
+    ];
+
+    const { contributionsFor } = useExtensionSlots();
+    const settings = contributionsFor('settings.integrations');
+
+    expect(settings.value.map((c) => c.key)).toEqual(['a']);
+  });
+
+  it('orders onboarding contributions by their declared order', () => {
+    mockIntegrations.value = [
+      makeIntegration({
+        key: 'late',
+        ui: { slots: ['onboarding.steps'], onboarding: { step: 's', order: 90 } }
+      }),
+      makeIntegration({
+        key: 'early',
+        ui: { slots: ['onboarding.steps'], onboarding: { step: 's', order: 20 } }
+      })
+    ];
+
+    const { contributionsFor } = useExtensionSlots();
+    const steps = contributionsFor('onboarding.steps');
+
+    expect(steps.value.map((c) => c.key)).toEqual(['early', 'late']);
+    expect(steps.value.map((c) => c.order)).toEqual([20, 90]);
+  });
+
+  it('hides contributions the user is not entitled to', () => {
+    mockIntegrations.value = [
+      makeIntegration({ key: 'free', entitled: true, ui: { slots: ['settings.integrations'] } }),
+      makeIntegration({
+        key: 'paid',
+        feature_key: 'paid',
+        entitled: false,
+        ui: { slots: ['settings.integrations'] }
+      })
+    ];
+
+    const { contributionsFor } = useExtensionSlots();
+
+    expect(contributionsFor('settings.integrations').value.map((c) => c.key)).toEqual(['free']);
+  });
+
+  it('hides an unconfigured contribution by default', () => {
+    mockIntegrations.value = [
+      makeIntegration({
+        key: 'ready',
+        configured: true,
+        ui: { slots: ['settings.integrations'] }
+      }),
+      makeIntegration({
+        key: 'unset',
+        configured: false,
+        ui: { slots: ['settings.integrations'] }
+      })
+    ];
+
+    const { contributionsFor } = useExtensionSlots();
+
+    expect(contributionsFor('settings.integrations').value.map((c) => c.key)).toEqual(['ready']);
+  });
+
+  it('shows an unconfigured contribution when the descriptor opts in', () => {
+    mockIntegrations.value = [
+      makeIntegration({
+        key: 'unset',
+        configured: false,
+        ui: { slots: ['settings.integrations'], show_when_unconfigured: true }
+      })
+    ];
+
+    const { contributionsFor } = useExtensionSlots();
+    const items = contributionsFor('settings.integrations').value;
+
+    expect(items.map((c) => c.key)).toEqual(['unset']);
+    expect(items[0].configured).toBe(false);
+  });
+
+  it('resolves a component a plugin layer registered for a slot key', () => {
+    const { registerComponent, resolveComponent } = useExtensionSlots();
+    const Custom = defineComponent({ render: () => h('div', 'custom') });
+
+    expect(resolveComponent('plaid.connect')).toBeNull();
+    registerComponent('plaid.connect', Custom);
+    expect(resolveComponent('plaid.connect')).toBe(Custom);
+  });
+});
diff --git a/tests/composables/useMarkdown.test.ts b/tests/composables/useMarkdown.test.ts
new file mode 100644
index 0000000..8c8927e
--- /dev/null
+++ b/tests/composables/useMarkdown.test.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdown } from '@/composables/useMarkdown';
+
+describe('renderMarkdown', () => {
+  it('renders GitHub-flavored markdown', () => {
+    const html = renderMarkdown('# Title\n\nSome **bold** and a list:\n\n- one\n- two');
+    expect(html).toContain('<strong>bold</strong>');
+    expect(html).toContain('<li>one</li>');
+  });
+
+  it('renders tables', () => {
+    const html = renderMarkdown('| a | b |\n|---|---|\n| 1 | 2 |');
+    expect(html).toContain('<table>');
+    expect(html).toContain('<td>1</td>');
+  });
+
+  it('escapes raw HTML so no active markup survives', () => {
+    const html = renderMarkdown('Hello <script>alert(1)</script> <img src=x onerror=alert(1)>');
+    // Raw HTML is escaped to inert text, not rendered as live elements.
+    expect(html).not.toContain('<script>');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;script&gt;');
+  });
+
+  it('is safe on empty/nullish input', () => {
+    expect(renderMarkdown('')).toBe('');
+    expect(renderMarkdown(null)).toBe('');
+  });
+});
diff --git a/tests/composables/useStatisticsCache.test.ts b/tests/composables/useStatisticsCache.test.ts
new file mode 100644
index 0000000..6265c72
--- /dev/null
+++ b/tests/composables/useStatisticsCache.test.ts
@@ -0,0 +1,109 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ref, computed } from 'vue';
+import type { FrontendTransaction } from '~/types/transaction';
+import { useStatistics } from '~/composables/useStatistics';
+
+const mockTransactions = ref<FrontendTransaction[]>([]);
+const mockWallets = ref<any[]>([]);
+
+vi.mock('~/composables/useTransactions', () => ({
+  useTransactions: () => ({ transactions: mockTransactions })
+}));
+
+vi.mock('~/composables/useWallets', () => ({
+  useWallets: () => ({ wallets: mockWallets })
+}));
+
+vi.mock('~/composables/useSharedData', () => ({
+  useSharedData: () => ({ getDefaultCurrency: computed(() => 'USD') })
+}));
+
+vi.mock('~/utils/auth', () => ({
+  checkAuth: () => true
+}));
+
+const statsData = {
+  overview: {
+    net_cash_flow: 100,
+    total_income: 500,
+    total_expenses: 400,
+    savings_rate: 20,
+    avg_monthly_income: 500,
+    avg_monthly_expenses: 400
+  },
+  activity: {
+    transaction_count: 5,
+    unique_parties: 3,
+    frequency: { per_day: 1, per_week: 7, per_month: 30 },
+    busiest_day: 'Monday'
+  },
+  comparisons: { previous_period: { income_change_percent: 0 } },
+  top_categories: { income: [], expenses: [] },
+  charts: {
+    party_income: [],
+    party_spending: [],
+    income_sources: [],
+    category_spending: [],
+    monthly_cash_flow: []
+  }
+};
+
+const fetchMock = vi.fn();
+
+vi.mock('~/services/api', () => ({
+  api: {
+    stats: {
+      fetch: (...args: any[]) => fetchMock(...args)
+    }
+  }
+}));
+
+const ALL_SECTIONS = ['overview', 'activity', 'comparisons', 'categories', 'parties', 'cashflow'];
+
+const requestedSections = () =>
+  new Set(fetchMock.mock.calls.map((c) => c[0]?.section).filter(Boolean));
+
+describe('useStatistics - progressive sections, dedup & cache', () => {
+  beforeEach(() => {
+    fetchMock.mockReset();
+    fetchMock.mockResolvedValue({ data: statsData });
+  });
+
+  it('fetches each section once across components and marks them loaded', async () => {
+    const stats = useStatistics();
+    useStatistics();
+    useStatistics();
+
+    await vi.waitFor(() => expect(stats.loadedSections.value.size).toBe(ALL_SECTIONS.length));
+
+    expect(stats.isSectionLoaded('overview')).toBe(true);
+    expect(requestedSections()).toEqual(new Set(ALL_SECTIONS));
+    expect(fetchMock).toHaveBeenCalledTimes(ALL_SECTIONS.length);
+  });
+
+  it('deduplicates concurrent getStatistics calls and serves repeats from cache', async () => {
+    const stats = useStatistics();
+    await vi.waitFor(() => expect(stats.loadedSections.value.size).toBe(ALL_SECTIONS.length));
+    fetchMock.mockClear();
+
+    await Promise.all([
+      stats.getStatistics(99, 'current_week'),
+      stats.getStatistics(99, 'current_week'),
+      stats.getStatistics(99, 'current_week')
+    ]);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    fetchMock.mockClear();
+    await stats.getStatistics(99, 'current_week');
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('refreshStatistics clears the cache and refetches every section', async () => {
+    const stats = useStatistics();
+    await vi.waitFor(() => expect(stats.loadedSections.value.size).toBe(ALL_SECTIONS.length));
+    fetchMock.mockClear();
+
+    await stats.refreshStatistics();
+    await vi.waitFor(() => expect(requestedSections()).toEqual(new Set(ALL_SECTIONS)));
+  });
+});
diff --git a/tests/pages/dashboard.test.ts b/tests/pages/dashboard.test.ts
index 003a72f..788ccc5 100644
--- a/tests/pages/dashboard.test.ts
+++ b/tests/pages/dashboard.test.ts
@@ -116,60 +116,6 @@ describe('DashboardKPIs', () => {
     });
   });
 
-  describe('wallet selector', () => {
-    it('renders wallet selector', () => {
-      const wrapper = mount(DashboardKPIs, {
-        global: { stubs }
-      });
-
-      expect(wrapper.find('.wallet-selector').exists()).toBe(true);
-    });
-
-    it('shows "All Wallets" by default', () => {
-      const wrapper = mount(DashboardKPIs, {
-        global: { stubs }
-      });
-
-      expect(wrapper.find('.wallet-name').text()).toBe('All Wallets');
-    });
-
-    it('toggles dropdown on click', async () => {
-      const wrapper = mount(DashboardKPIs, {
-        global: { stubs }
-      });
-
-      expect(wrapper.find('.wallet-dropdown').exists()).toBe(false);
-
-      await wrapper.find('.wallet-selector').trigger('click');
-
-      expect(wrapper.find('.wallet-dropdown').exists()).toBe(true);
-    });
-
-    it('shows wallet options in dropdown', async () => {
-      const wrapper = mount(DashboardKPIs, {
-        global: { stubs }
-      });
-
-      await wrapper.find('.wallet-selector').trigger('click');
-
-      const options = wrapper.findAll('.wallet-option');
-      expect(options.length).toBe(2);
-      expect(options[0].text()).toBe('All Wallets');
-      expect(options[1].text()).toBe('Main Wallet');
-    });
-
-    it('calls setSelectedWallet when option is clicked', async () => {
-      const wrapper = mount(DashboardKPIs, {
-        global: { stubs }
-      });
-
-      await wrapper.find('.wallet-selector').trigger('click');
-      await wrapper.findAll('.wallet-option')[1].trigger('click');
-
-      expect(mockUseStatistics.setSelectedWallet).toHaveBeenCalledWith(1);
-    });
-  });
-
   describe('net value styling', () => {
     it('applies positive surface when net is positive', () => {
       mockUseStatistics.currentStatistics.value = {
diff --git a/tests/pages/holdings.test.ts b/tests/pages/holdings.test.ts
new file mode 100644
index 0000000..38eb02b
--- /dev/null
+++ b/tests/pages/holdings.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import HoldingsPage from '@/pages/holdings/index.vue';
+import holdingsApi from '@/services/api/holdingsApi';
+
+vi.stubGlobal('definePageMeta', vi.fn());
+
+vi.mock('@/services/api/holdingsApi', () => ({
+  default: {
+    fetchAll: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    refreshPrices: vi.fn(),
+    search: vi.fn()
+  }
+}));
+
+vi.mock('~/composables/useNotifications', () => ({
+  useNotifications: () => ({
+    confirmDelete: vi.fn().mockResolvedValue(true),
+    showSuccess: vi.fn(),
+    showError: vi.fn()
+  })
+}));
+
+vi.mock('~/composables/useSharedData', () => ({
+  useSharedData: () => ({ getDefaultCurrency: { value: 'USD' } })
+}));
+
+vi.mock('~/composables/useAuth', () => ({
+  useAuth: () => ({ user: { value: { id: 7 } } })
+}));
+
+vi.mock('@/services/api/statsApi', () => ({
+  default: {
+    fetch: vi.fn().mockResolvedValue({
+      data: { currency: 'USD', position: { holdings_value: 150000 } }
+    })
+  }
+}));
+
+const stubs = {
+  LoadingSkeleton: { template: '<div class="skeleton" />' },
+  HoldingForm: { template: '<div class="holding-form" />' },
+  NuxtLink: { template: '<a><slot /></a>' }
+};
+
+describe('Holdings page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (holdingsApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: [
+        {
+          id: 1,
+          name: 'Bitcoin',
+          symbol: 'BTC',
+          quantity: 0.5,
+          currency: 'USD',
+          unit_price: 60000,
+          price_source: 'auto',
+          provider: 'coingecko',
+          external_ref: 'bitcoin',
+          value: 30000
+        },
+        {
+          id: 2,
+          name: 'Rental flat',
+          quantity: 1,
+          currency: 'USD',
+          unit_price: 120000,
+          price_source: 'manual',
+          value: 120000
+        }
+      ],
+      totals: { holdings_value: 150000, currency: 'USD' }
+    });
+  });
+
+  it('lists holdings with their values and total', async () => {
+    const wrapper = mount(HoldingsPage, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Bitcoin');
+    expect(text).toContain('Rental flat');
+    expect(text).toContain('Live'); // crypto source badge
+    expect(text).toContain('Manual'); // manual source badge
+    expect(wrapper.findAll('.hd-card').length).toBe(2);
+  });
+
+  it('refreshes prices on demand', async () => {
+    (holdingsApi.refreshPrices as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+    const wrapper = mount(HoldingsPage, { global: { stubs } });
+    await flushPromises();
+
+    await wrapper.find('.btn--ghost').trigger('click');
+    await flushPromises();
+
+    expect(holdingsApi.refreshPrices).toHaveBeenCalled();
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
index df07e02..d0e81c4 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -15,3 +15,10 @@ vi.stubGlobal('useI18n', () => ({
   locale: { value: 'en' },
   setLocale: vi.fn()
 }));
+
+// Nuxt auto-import used by checkAuth() at module load in some composables.
+vi.stubGlobal('useCookie', () => ({ value: null }));
+
+// Nuxt routing auto-imports used by components under test.
+vi.stubGlobal('useRoute', () => ({ query: {}, params: {}, path: '/' }));
+vi.stubGlobal('useRouter', () => ({ push: vi.fn(), replace: vi.fn() }));
diff --git a/tests/utils/countries.test.ts b/tests/utils/countries.test.ts
new file mode 100644
index 0000000..dea2408
--- /dev/null
+++ b/tests/utils/countries.test.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { getCountries } from '@/utils/countries';
+
+describe('getCountries', () => {
+  it('returns an array of code/name pairs', () => {
+    const list = getCountries();
+    expect(Array.isArray(list)).toBe(true);
+    expect(list.length).toBeGreaterThan(150);
+    expect(list.every((c) => typeof c.code === 'string' && c.code.length === 2)).toBe(true);
+    expect(list.find((c) => c.code === 'US')).toBeTruthy();
+  });
+
+  it('sorts by name', () => {
+    const names = getCountries().map((c) => c.name);
+    expect(names).toEqual([...names].sort((a, b) => a.localeCompare(b)));
+  });
+});
diff --git a/tests/utils/landingInsights.test.ts b/tests/utils/landingInsights.test.ts
new file mode 100644
index 0000000..fcfeefe
--- /dev/null
+++ b/tests/utils/landingInsights.test.ts
@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import { buildSpotlightInsights } from '@/utils/landingInsights';
+import type { WalletStatistics } from '@/composables/useStatistics';
+
+const money = (n: number) => `$${n.toFixed(2)}`;
+
+const fullStats = {
+  total_expenses: 1240,
+  total_income: 1800,
+  transaction_count: 24,
+  income_insights: {
+    biggest_source: { party: 'Acme Corp', amount: 1500, percentage: 80, transaction_count: 2 }
+  },
+  expense_insights: {
+    biggest_category: { category: 'Food', amount: 400, percentage: 32, transaction_count: 9 },
+    biggest_expense: { party: 'Grocers', amount: 320, percentage: 26, transaction_count: 5 },
+    budget_analysis: { expense_ratio: 0.69, savings_rate: 0.24, risk_level: 'low' }
+  },
+  performance: { growth_percentage: 12, velocity: 0, efficiency: 0.24, consistency: 0 }
+} as unknown as WalletStatistics;
+
+describe('buildSpotlightInsights', () => {
+  it('returns an empty array for null stats', () => {
+    expect(buildSpotlightInsights(null, money)).toEqual([]);
+  });
+
+  it('builds varied, non-empty lines from real stats', () => {
+    const out = buildSpotlightInsights(fullStats, money);
+    expect(out.length).toBeGreaterThanOrEqual(4);
+    // Every line carries a display key and a click-through prompt.
+    for (const item of out) {
+      expect(item.key).toBeTruthy();
+      expect(item.prompt).toBeTruthy();
+    }
+    // Lines are distinct.
+    const keys = out.map((i) => i.key);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  it('interpolates the savings rate and biggest category with rounded params', () => {
+    const out = buildSpotlightInsights(fullStats, money);
+    const savings = out.find((i) => i.key.includes('saved'));
+    expect(savings?.params).toMatchObject({ rate: 24 });
+
+    const category = out.find((i) => i.key.startsWith('{category}'));
+    expect(category?.params).toMatchObject({ category: 'Food', percent: 32 });
+    expect(category?.promptParams).toMatchObject({ category: 'Food' });
+  });
+
+  it('picks the up-phrasing for positive income growth and down for negative', () => {
+    const up = buildSpotlightInsights(fullStats, money).find((i) => i.key.includes('income is'));
+    expect(up?.key).toContain('up');
+
+    const down = buildSpotlightInsights(
+      { ...fullStats, performance: { ...fullStats.performance, growth_percentage: -8 } },
+      money
+    ).find((i) => i.key.includes('income is'));
+    expect(down?.key).toContain('down');
+    expect(down?.params).toMatchObject({ percent: 8 });
+  });
+
+  it('omits lines that have no meaningful data', () => {
+    const sparse = {
+      total_expenses: 0,
+      total_income: 0,
+      transaction_count: 0,
+      income_insights: { biggest_source: null },
+      expense_insights: {
+        biggest_category: null,
+        biggest_expense: null,
+        budget_analysis: { expense_ratio: 0, savings_rate: 0, risk_level: 'low' }
+      },
+      performance: { growth_percentage: 0, velocity: 0, efficiency: 0, consistency: 0 }
+    } as unknown as WalletStatistics;
+    expect(buildSpotlightInsights(sparse, money)).toEqual([]);
+  });
+});
diff --git a/tests/utils/landingSuggestions.test.ts b/tests/utils/landingSuggestions.test.ts
new file mode 100644
index 0000000..13c7f0a
--- /dev/null
+++ b/tests/utils/landingSuggestions.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { SUGGESTIONS, pickSuggestions, type Suggestion } from '@/utils/landingSuggestions';
+
+describe('landing suggestions', () => {
+  it('ships a large pool', () => {
+    expect(SUGGESTIONS.length).toBeGreaterThanOrEqual(90);
+  });
+
+  it('every entry has prompt text and an icon name', () => {
+    for (const s of SUGGESTIONS) {
+      expect(s.text.trim()).toBeTruthy();
+      expect(s.icon.trim()).toBeTruthy();
+    }
+  });
+
+  it('picks the requested number of distinct prompts', () => {
+    const picked = pickSuggestions(6);
+    expect(picked).toHaveLength(6);
+    expect(new Set(picked.map((s) => s.text)).size).toBe(6);
+  });
+
+  it('never returns more than the pool holds', () => {
+    const picked = pickSuggestions(9999);
+    expect(picked).toHaveLength(SUGGESTIONS.length);
+  });
+
+  it('varies the selection with the random source', () => {
+    // A fixed rng makes the shuffle deterministic so we can assert it reorders.
+    const pool: Suggestion[] = [
+      { text: 'a', icon: 'X' },
+      { text: 'b', icon: 'X' },
+      { text: 'c', icon: 'X' }
+    ];
+    const front = pickSuggestions(3, () => 0, pool).map((s) => s.text);
+    const stay = pickSuggestions(3, () => 0.999, pool).map((s) => s.text);
+    expect(front).not.toEqual(stay);
+  });
+});
diff --git a/tests/utils/transactionMapper.test.ts b/tests/utils/transactionMapper.test.ts
index b50e8ef..b6b9c6f 100644
--- a/tests/utils/transactionMapper.test.ts
+++ b/tests/utils/transactionMapper.test.ts
@@ -150,6 +150,33 @@ describe('transactionMapper - recurring fields', () => {
     });
   });
 
+  describe('intent', () => {
+    it('defaults intent to regular when absent from the API', () => {
+      expect(transactionMapper.toFrontend(baseApiTransaction).intent).toBe('regular');
+      expect(transactionMapper.toEditForm(baseApiTransaction).intent).toBe('regular');
+    });
+
+    it('preserves a non-regular intent from the API', () => {
+      const api = { ...baseApiTransaction, intent: 'loan_received' as const };
+      expect(transactionMapper.toFrontend(api).intent).toBe('loan_received');
+      expect(transactionMapper.toEditForm(api).intent).toBe('loan_received');
+    });
+
+    it('round-trips intent through toApi and defaults to regular', () => {
+      const base = {
+        type: 'INCOME' as const,
+        amount: '500 USD',
+        description: 'Salary',
+        date: '2025-06-15',
+        time: '10:30'
+      };
+      expect(transactionMapper.toApi(base).intent).toBe('regular');
+      expect(transactionMapper.toApi({ ...base, intent: 'investment_return' }).intent).toBe(
+        'investment_return'
+      );
+    });
+  });
+
   describe('toFrontendBatch', () => {
     it('maps recurring status for multiple transactions', () => {
       const apiTransactions = [
diff --git a/types/holding.ts b/types/holding.ts
new file mode 100644
index 0000000..18eb504
--- /dev/null
+++ b/types/holding.ts
@@ -0,0 +1,44 @@
+export type PriceSource = 'manual' | 'auto';
+
+export interface Holding {
+  id: number;
+  owner_type?: string;
+  owner_id?: number;
+  name: string;
+  symbol?: string | null;
+  quantity: number;
+  currency: string;
+  unit_price: number;
+  value: number;
+  price_source: PriceSource;
+  provider?: string | null;
+  external_ref?: string | null;
+  last_priced_at?: string | null;
+}
+
+// What the form emits; the owner is attached by the page on create.
+export interface HoldingPayload {
+  name: string;
+  symbol?: string | null;
+  quantity: number;
+  currency: string;
+  unit_price?: number;
+  price_source: PriceSource;
+  provider?: string | null;
+  external_ref?: string | null;
+}
+
+export interface HoldingOwner {
+  owner_type: string;
+  owner_id: number;
+}
+
+export interface HoldingsResponse {
+  data: Holding[];
+}
+
+export interface CoinSearchResult {
+  id: string;
+  name: string;
+  symbol: string;
+}
diff --git a/types/icons.d.ts b/types/icons.d.ts
new file mode 100644
index 0000000..f71a96d
--- /dev/null
+++ b/types/icons.d.ts
@@ -0,0 +1 @@
+/// <reference types="unplugin-icons/types/vue" />
diff --git a/types/integration.ts b/types/integration.ts
new file mode 100644
index 0000000..df89b1f
--- /dev/null
+++ b/types/integration.ts
@@ -0,0 +1,73 @@
+/**
+ * Slots a plugin descriptor can target. These names are the contract shared
+ * with the backend (see trakli/internal#9); a contribution only renders in a
+ * declared slot.
+ */
+export type ExtensionSlot =
+  | 'settings.integrations'
+  | 'settings.tabs'
+  | 'onboarding.steps'
+  | 'dashboard.widgets'
+  | 'sidebar.nav';
+
+export interface IntegrationCardDescriptor {
+  title: string;
+  cta?: string;
+  description?: string;
+  href?: string;
+}
+
+export interface IntegrationConnectDescriptor {
+  type: string;
+  [key: string]: unknown;
+}
+
+export interface IntegrationOnboardingDescriptor {
+  step: string;
+  optional?: boolean;
+  order?: number;
+  title?: string;
+  description?: string;
+  href?: string;
+}
+
+export interface IntegrationUiDescriptor {
+  slots: ExtensionSlot[];
+  card?: IntegrationCardDescriptor | null;
+  connect?: IntegrationConnectDescriptor | null;
+  onboarding?: IntegrationOnboardingDescriptor | null;
+  /** Slot key a plugin Nuxt layer registered a real component for, else null. */
+  component?: string | null;
+  /**
+   * Render this contribution even when the integration is not configured,
+   * surfacing an explicit needs-setup state instead of hiding it. Default is
+   * to hide unconfigured contributions.
+   */
+  show_when_unconfigured?: boolean;
+}
+
+export interface Integration {
+  key: string;
+  name: string;
+  description: string | null;
+  category: string;
+  icon: string | null;
+  feature_key: string | null;
+  configured: boolean;
+  entitled: boolean;
+  ui: IntegrationUiDescriptor | null;
+}
+
+/**
+ * One integration's contribution to a single slot, flattened from its `ui`
+ * descriptor and carrying the gating state the registry resolved.
+ */
+export interface SlotContribution {
+  key: string;
+  slot: ExtensionSlot;
+  integration: Integration;
+  ui: IntegrationUiDescriptor;
+  order: number;
+  /** Operator has supplied what the integration needs to run. */
+  configured: boolean;
+}
diff --git a/types/transaction.ts b/types/transaction.ts
index 9aaf051..bf5b88a 100644
--- a/types/transaction.ts
+++ b/types/transaction.ts
@@ -1,6 +1,35 @@
+// Intent tag distinguishing real earnings/spend from loan, debt and investment movement
+export type TransactionIntent =
+  | 'regular'
+  | 'loan_received'
+  | 'loan_repayment'
+  | 'debt_owed'
+  | 'debt_settled'
+  | 'investment_buy'
+  | 'investment_return'
+  | 'gift';
+
+export interface IntentOption {
+  value: TransactionIntent;
+  label: string; // English text, also used as the i18n key
+  side: 'income' | 'expense' | 'both';
+}
+
+export const TRANSACTION_INTENT_OPTIONS: IntentOption[] = [
+  { value: 'regular', label: 'Regular', side: 'both' },
+  { value: 'loan_received', label: 'Loan received', side: 'income' },
+  { value: 'loan_repayment', label: 'Loan repayment', side: 'expense' },
+  { value: 'debt_owed', label: 'Debt owed', side: 'income' },
+  { value: 'debt_settled', label: 'Debt settled', side: 'expense' },
+  { value: 'investment_buy', label: 'Investment purchase', side: 'expense' },
+  { value: 'investment_return', label: 'Investment return', side: 'income' },
+  { value: 'gift', label: 'Gift', side: 'income' }
+];
+
 export interface ApiTransaction {
   id: number;
   type: 'income' | 'expense';
+  intent?: TransactionIntent;
   amount: number;
   description: string;
   datetime: string;
@@ -42,6 +71,7 @@ export interface FrontendTransaction {
   date: string; // YYYY-MM-DD
   time: string; // HH:mm
   type: 'INCOME' | 'EXPENSE'; // Uppercase for UI
+  intent?: TransactionIntent;
   party: string; // Display name
   partyId?: number; // Numeric ID
   amount: string; // Formatted with currency e.g., "5000 XAF"
@@ -68,6 +98,7 @@ export interface TransactionCreatePayload {
   client_id?: string; // Concatenated UUID pair (optional)
   amount: number;
   type: 'income' | 'expense';
+  intent?: TransactionIntent;
   description: string;
   datetime: string; // ISO 8601 format
   created_at?: string; // ISO 8601 format
@@ -109,6 +140,8 @@ export interface ApiResponse<T> {
 // Query parameters for GET /transactions
 export interface TransactionQueryParams {
   type?: 'income' | 'expense';
+  intent?: string; // single intent or comma-separated list
+  exclude_transfers?: boolean;
   limit?: number;
   page?: number;
   synced_since?: string;
diff --git a/utils/configurationKeys.ts b/utils/configurationKeys.ts
index 65f396c..6cb95f2 100644
--- a/utils/configurationKeys.ts
+++ b/utils/configurationKeys.ts
@@ -6,10 +6,12 @@
 
 export const CONFIGURATION_KEYS = {
   LANGUAGE: 'default-lang',
+  COUNTRY: 'country',
   CURRENCY: 'default-currency',
   WALLET: 'default-wallet',
   GROUP: 'default-group',
   THEME: 'theme',
+  LANDING_MODE: 'landing-experience',
   ONBOARDING_COMPLETE: 'onboarding-complete',
   BUDGET_DEFAULT_THRESHOLD: 'budget-default-threshold-percent',
   BUDGET_DEFAULT_ROLLOVER: 'budget-default-rollover-enabled',
diff --git a/utils/countries.ts b/utils/countries.ts
new file mode 100644
index 0000000..7a9db7c
--- /dev/null
+++ b/utils/countries.ts
@@ -0,0 +1,27 @@
+// ISO 3166-1 alpha-2 codes; names are resolved via Intl.DisplayNames so we
+// don't hard-code a localized name table.
+const COUNTRY_CODES = (
+  'AD AE AF AG AI AL AM AO AR AT AU AW AZ BA BB BD BE BF BG BH BI BJ BN BO BR BS BT BW BY BZ ' +
+  'CA CD CF CG CH CI CL CM CN CO CR CU CV CY CZ DE DJ DK DM DO DZ EC EE EG ER ES ET FI FJ FM ' +
+  'FR GA GB GD GE GH GM GN GQ GR GT GW GY HN HR HT HU ID IE IL IN IQ IR IS IT JM JO JP KE KG ' +
+  'KH KI KM KN KP KR KW KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MG MH MK ML MM MN MR ' +
+  'MT MU MV MW MX MY MZ NA NE NG NI NL NO NP NR NZ OM PA PE PG PH PK PL PT PW PY QA RO RS RU ' +
+  'RW SA SB SC SD SE SG SI SK SL SM SN SO SR SS ST SV SY SZ TD TG TH TJ TL TM TN TO TR TT TV ' +
+  'TZ UA UG US UY UZ VA VC VE VN VU WS YE ZA ZM ZW'
+).split(' ');
+
+let cache: { code: string; name: string }[] | null = null;
+
+export function getCountries(): { code: string; name: string }[] {
+  if (cache) return cache;
+  let display: Intl.DisplayNames | null = null;
+  try {
+    display = new Intl.DisplayNames(['en'], { type: 'region' });
+  } catch {
+    display = null;
+  }
+  cache = COUNTRY_CODES.map((code) => ({ code, name: display?.of(code) || code })).sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+  return cache;
+}
diff --git a/utils/landingInsights.ts b/utils/landingInsights.ts
new file mode 100644
index 0000000..852dba8
--- /dev/null
+++ b/utils/landingInsights.ts
@@ -0,0 +1,85 @@
+import type { WalletStatistics } from '@/composables/useStatistics';
+
+// `key`/`prompt` are i18n keys; `params` feed interpolation.
+export interface SpotlightInsight {
+  key: string;
+  params?: Record<string, string | number>;
+  prompt: string;
+  promptParams?: Record<string, string | number>;
+}
+
+type MoneyFormatter = (amount: number) => string;
+
+const pct = (ratio: number): number => Math.round(ratio);
+
+// Returns [] when there is nothing meaningful to say (caller shows the fallback).
+export function buildSpotlightInsights(
+  stats: Partial<WalletStatistics> | null | undefined,
+  money: MoneyFormatter
+): SpotlightInsight[] {
+  if (!stats) return [];
+
+  const out: SpotlightInsight[] = [];
+
+  const savingsRate = stats.expense_insights?.budget_analysis?.savings_rate;
+  if (typeof savingsRate === 'number' && savingsRate > 0) {
+    out.push({
+      key: "You've saved {rate}% of your income this month.",
+      params: { rate: pct(savingsRate * 100) },
+      prompt: 'How can I improve my savings rate?'
+    });
+  }
+
+  const category = stats.expense_insights?.biggest_category;
+  if (category?.category && category.percentage > 0) {
+    out.push({
+      key: '{category} is your biggest spending category at {percent}% of the total.',
+      params: { category: category.category, percent: pct(category.percentage) },
+      prompt: 'Break down my {category} spending.',
+      promptParams: { category: category.category }
+    });
+  }
+
+  const growth = stats.performance?.growth_percentage;
+  if (typeof growth === 'number' && Math.abs(growth) >= 1) {
+    out.push({
+      key:
+        growth > 0
+          ? 'Your income is up {percent}% compared with last month.'
+          : 'Your income is down {percent}% compared with last month.',
+      params: { percent: Math.abs(Math.round(growth)) },
+      prompt: 'Why did my income change versus last month?'
+    });
+  }
+
+  const source = stats.income_insights?.biggest_source;
+  if (source?.party) {
+    out.push({
+      key: '{party} is your top income source this month.',
+      params: { party: source.party },
+      prompt: 'Show my income from {party}.',
+      promptParams: { party: source.party }
+    });
+  }
+
+  const spent = stats.total_expenses;
+  if (typeof spent === 'number' && spent > 0) {
+    out.push({
+      key: "You've spent {amount} so far this month.",
+      params: { amount: money(spent) },
+      prompt: 'What did I spend the most on this month?'
+    });
+  }
+
+  const topExpense = stats.expense_insights?.biggest_expense;
+  if (topExpense?.party && topExpense.amount > 0) {
+    out.push({
+      key: '{amount} of your spending went to {party}.',
+      params: { amount: money(topExpense.amount), party: topExpense.party },
+      prompt: 'Show my transactions with {party}.',
+      promptParams: { party: topExpense.party }
+    });
+  }
+
+  return out;
+}
diff --git a/utils/landingSuggestions.ts b/utils/landingSuggestions.ts
new file mode 100644
index 0000000..bb7011d
--- /dev/null
+++ b/utils/landingSuggestions.ts
@@ -0,0 +1,152 @@
+// `icon` is a lucide-vue-next component name. Prompts are canonical English
+// (user-message content sent to the assistant), so they are not routed through i18n.
+export interface Suggestion {
+  text: string;
+  icon: string;
+}
+
+export const SUGGESTIONS: Suggestion[] = [
+  // Spending overview
+  { text: 'How much did I spend last month?', icon: 'Wallet' },
+  { text: 'What did I spend the most on this month?', icon: 'TrendingDown' },
+  { text: 'Where is my money actually going?', icon: 'PieChart' },
+  { text: 'Show my spending week by week', icon: 'CalendarDays' },
+  { text: 'How does this month compare to last month?', icon: 'GitCompareArrows' },
+  { text: 'What was my biggest purchase this month?', icon: 'Receipt' },
+  { text: 'Am I spending more than usual lately?', icon: 'TrendingUp' },
+  { text: 'Break down my spending by category', icon: 'ChartColumnBig' },
+  { text: 'What percent of my income did I spend?', icon: 'Percent' },
+  { text: 'Show me every expense over 100 this month', icon: 'Banknote' },
+
+  // Food & dining
+  { text: 'How much do I spend on coffee?', icon: 'Coffee' },
+  { text: 'What did I spend eating out this month?', icon: 'Utensils' },
+  { text: 'How much went to groceries?', icon: 'ShoppingCart' },
+  { text: 'Am I ordering too much takeout?', icon: 'Pizza' },
+
+  // Transport
+  { text: 'What did I spend on transport this month?', icon: 'Car' },
+  { text: 'How much went to fuel?', icon: 'Fuel' },
+  { text: 'Show my ride and taxi spending', icon: 'CarTaxiFront' },
+  { text: 'How much do I spend commuting?', icon: 'TrainFront' },
+
+  // Home & bills
+  { text: 'What are my recurring bills?', icon: 'Repeat' },
+  { text: 'How much goes to rent each month?', icon: 'House' },
+  { text: 'What do my utilities cost me?', icon: 'Plug' },
+  { text: 'Show my phone and internet spending', icon: 'Smartphone' },
+  { text: 'Which bills went up recently?', icon: 'ArrowUpRight' },
+
+  // Subscriptions
+  { text: 'List all my subscriptions', icon: 'CreditCard' },
+  { text: 'Which subscriptions could I cancel?', icon: 'Scissors' },
+  { text: 'How much do subscriptions cost me a year?', icon: 'CalendarClock' },
+  { text: 'Did any subscription charge me twice?', icon: 'CopyCheck' },
+
+  // Shopping & lifestyle
+  { text: 'How much did I spend shopping this month?', icon: 'ShoppingBag' },
+  { text: 'What did I spend on clothes?', icon: 'Shirt' },
+  { text: 'Show my entertainment spending', icon: 'Tv' },
+  { text: 'How much went to gaming?', icon: 'Gamepad2' },
+  { text: 'What do I spend on the gym and fitness?', icon: 'Dumbbell' },
+  { text: 'How much did I spend on gifts?', icon: 'Gift' },
+  { text: 'Show my travel spending this year', icon: 'Plane' },
+  { text: 'What did I spend on health and pharmacy?', icon: 'HeartPulse' },
+  { text: 'How much goes to my pet?', icon: 'Dog' },
+  { text: 'What did I spend on books and learning?', icon: 'BookOpen' },
+
+  // Income
+  { text: 'How much did I earn this month?', icon: 'Banknote' },
+  { text: "What's my main source of income?", icon: 'Briefcase' },
+  { text: 'Is my income growing over time?', icon: 'TrendingUp' },
+  { text: 'When did I last get paid?', icon: 'CalendarCheck' },
+  { text: 'Show my income by source', icon: 'Coins' },
+  { text: 'Did I have any unusual income this month?', icon: 'Sparkle' },
+
+  // Savings & budget
+  { text: "What's my savings rate this month?", icon: 'PiggyBank' },
+  { text: 'How much could I realistically save?', icon: 'Target' },
+  { text: 'Where can I cut back without hurting much?', icon: 'Scissors' },
+  { text: 'Am I on track to save this year?', icon: 'Goal' },
+  { text: 'How much do I have left to spend this month?', icon: 'Gauge' },
+  { text: 'Build me a simple budget from my history', icon: 'NotebookPen' },
+  { text: 'How many months of expenses do I have saved?', icon: 'Shield' },
+
+  // Trends & forecasting
+  { text: 'Predict my spending for next month', icon: 'ChartLine' },
+  { text: 'What is my average daily spend?', icon: 'CalendarDays' },
+  { text: 'Which day of the week do I spend most?', icon: 'CalendarRange' },
+  { text: 'Show my cashflow over the last 6 months', icon: 'Activity' },
+  { text: 'Has my biggest category changed this year?', icon: 'ArrowLeftRight' },
+  { text: 'Flag anything unusual in my spending', icon: 'TriangleAlert' },
+  { text: 'What is my net worth trend?', icon: 'ChartArea' },
+
+  // Wallets & transfers
+  { text: 'Which wallet has the most money?', icon: 'Wallet' },
+  { text: 'Show the balance of all my wallets', icon: 'Wallet' },
+  { text: 'How much did I move between wallets?', icon: 'ArrowRightLeft' },
+  { text: 'Which wallet do I spend from most?', icon: 'WalletCards' },
+  { text: 'Transfer 50 from Cash to Savings', icon: 'ArrowLeftRight' },
+
+  // Parties & merchants
+  { text: 'Who do I pay the most each month?', icon: 'Store' },
+  { text: 'Show everything I paid to my landlord', icon: 'House' },
+  { text: 'List my top 5 merchants this month', icon: 'Tags' },
+  { text: 'How much have I paid this person in total?', icon: 'UserRound' },
+
+  // Logging actions
+  { text: 'Log 20 for coffee from Cash', icon: 'Coffee' },
+  { text: 'Log 12 for lunch from my card', icon: 'Utensils' },
+  { text: 'Add 40 groceries to Main wallet', icon: 'ShoppingCart' },
+  { text: 'Record 1500 salary as income', icon: 'Banknote' },
+  { text: 'Add a 9.99 monthly subscription', icon: 'CreditCard' },
+  { text: 'Log 30 fuel from Cash', icon: 'Fuel' },
+  { text: 'Add a 200 expense for new shoes', icon: 'Shirt' },
+
+  // Categories & cleanup
+  { text: 'Which categories do I never use?', icon: 'FolderMinus' },
+  { text: 'Suggest categories for my recent transactions', icon: 'WandSparkles' },
+  { text: 'How many transactions did I make this month?', icon: 'Hash' },
+  { text: 'Find transactions I might have miscategorised', icon: 'SearchCheck' },
+
+  // Imports & receipts
+  { text: 'Import my bank statement', icon: 'FileUp' },
+  { text: 'Read this receipt and log it', icon: 'ScanLine' },
+  { text: 'Turn this CSV into transactions', icon: 'FileSpreadsheet' },
+  { text: 'Match my imported transactions to wallets', icon: 'GitMerge' },
+
+  // Goals & advice
+  { text: 'How long until I can save 1000?', icon: 'Target' },
+  { text: 'Give me one tip to improve my finances', icon: 'Lightbulb' },
+  { text: 'What habit is costing me the most?', icon: 'Hourglass' },
+  { text: 'Roast my spending this month', icon: 'Flame' },
+  { text: 'Show me a win from this month', icon: 'PartyPopper' },
+  { text: 'What should I look at first?', icon: 'Compass' },
+
+  // Time-bound
+  { text: 'What did I spend today?', icon: 'Sun' },
+  { text: 'Show this week so far', icon: 'CalendarDays' },
+  { text: 'How was my spending this weekend?', icon: 'Coffee' },
+  { text: 'Compare this quarter to last quarter', icon: 'GitCompareArrows' },
+  { text: 'What did I spend on my last trip?', icon: 'Plane' },
+
+  // Reflective
+  { text: 'Did I stick to my usual spending this month?', icon: 'CircleCheck' },
+  { text: 'What surprised me financially this month?', icon: 'Sparkles' },
+  { text: 'Summarise my month in three lines', icon: 'NotebookPen' },
+  { text: 'Am I better off than last month?', icon: 'Scale' }
+];
+
+// Fisher-Yates with an injectable rng so it is testable; landing passes Math.random.
+export function pickSuggestions(
+  count: number,
+  rng: () => number = Math.random,
+  pool: Suggestion[] = SUGGESTIONS
+): Suggestion[] {
+  const items = pool.slice();
+  for (let i = items.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [items[i], items[j]] = [items[j], items[i]];
+  }
+  return items.slice(0, Math.min(count, items.length));
+}
diff --git a/utils/transactionMapper.ts b/utils/transactionMapper.ts
index 5ad8271..13dd251 100644
--- a/utils/transactionMapper.ts
+++ b/utils/transactionMapper.ts
@@ -75,6 +75,7 @@ export const transactionMapper = {
       date,
       time,
       type: api.type.toUpperCase() as 'INCOME' | 'EXPENSE',
+      intent: api.intent || 'regular',
       party: party?.name || '',
       partyId: party?.id,
       amount: formattedAmount,
@@ -135,6 +136,7 @@ export const transactionMapper = {
       date,
       time,
       type: api.type.toUpperCase() as 'INCOME' | 'EXPENSE',
+      intent: api.intent || 'regular',
       party: party?.name || '',
       partyId: party?.id,
       amount: String(api.amount),
@@ -197,6 +199,7 @@ export const transactionMapper = {
     const payload: TransactionCreatePayload = {
       amount,
       type: (frontend.type?.toLowerCase() as 'income' | 'expense') || 'income',
+      intent: frontend.intent || 'regular',
       description: frontend.description || '',
       datetime,
       party_id: partyId ?? undefined,
diff --git a/vitest.config.ts b/vitest.config.ts
index b0be4e7..b7ddf25 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import vue from '@vitejs/plugin-vue';
+import Icons from 'unplugin-icons/vite';
 import { resolve } from 'path';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [Icons({ compiler: 'vue3', autoInstall: false }), vue()],
   test: {
     globals: true,
     environment: 'happy-dom',