diff --git a/CLAUDE.md b/CLAUDE.md
index 51664a7..bc7dfc3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -141,6 +141,12 @@ Dashboards are **generated by the embedded DeepSQL Agent acting as a coding agen
 - **Rendering + data access**: `DashboardArtifact.jsx` renders the HTML in a **sandboxed iframe** (`sandbox="allow-scripts"`, opaque origin + a strict CSP — no external network). The artifact fetches data only through an injected `deepsql.query(sql)` bridge that `postMessage`s to the parent; the parent calls **`POST /api/dashboards/query`** (`DashboardQueryController`), which is **read-only twice over** (`McpSqlGuardService.validateReadOnlySql` + `QueryExecutionContext.api` = `READ_ONLY_ONLY`) and access-scoped via `assertCanReadConnectionContent`. So the agent's code has full creative freedom while every query stays guarded and sandboxed. The bridge also auto-sizes the iframe and forwards runtime errors.
 - Generation endpoints unchanged (`POST /api/dashboards/generate` + `/generate/stream`). `DashboardBuilder.js`/`DashboardInputs.js` remain only because `tabs/Core/PreviewTab.js` still uses them — the dashboard *creation* path no longer touches them.
 - **Sharing**: both share types render a standalone read-only `DashboardViewer` (title + `DashboardArtifact` with an injected `queryFn`). Internal link `/dashboard-view/:id` (auth) uses the authed broker; public link `/share/dashboard/:token` (permitAll) uses `PublicDashboardController` (`GET /api/public/dashboards/{token}` + `/query`), which resolves only while `saved_dashboards.is_public` is true (revoke = flip it) and runs read-only + connection-scoped. `share_token`/`is_public` are set only via `POST|DELETE /api/saved-dashboards/{id}/share` (access-checked), never a general update. `ShareMenu.jsx` drives the UI. The public query path has its own nginx `dashq` limiter.
+- **Organization** (search/folders/favorites): `SavedDashboardController`'s search/folder/favorite endpoints existed for a while with no UI consumer. `DashboardsHome.jsx` now wires all of it — a search box (client-side filter over name/description), folder chips derived from `GET /connection/{id}/folders` with a per-card "move to folder" popover (`PUT /saved-dashboards/{id}` with `folder: ""` to clear — `updateDashboard` treats `null` as "field omitted" so blank is the explicit clear signal, same convention as `setSharePassword`), and a favorite star toggle (`POST /{id}/favorite`) with optimistic UI update.
+- **Clone**: `POST /saved-dashboards/{id}/clone` (`SavedDashboardService.cloneDashboard`) duplicates a dashboard's config/chat/tags/folder into a fresh row — not shared, not favorited. Exposed as a copy icon on each `DashboardsHome.jsx` card.
+- **Version history**: every real overwrite of `dashboardConfig` (agent build via `completeBuildTurn`, manual Source-tab edit via `updateDashboard`, or a restore) snapshots the *previous* config into `dashboard_versions` (`V113__create_dashboard_versions.sql`) before overwriting, tagged with a trigger (`AGENT_BUILD`/`MANUAL_EDIT`/`RESTORE`) — capped at 50 snapshots per dashboard, oldest pruned first. `GET /{id}/versions` lists them newest-first; `POST /{id}/versions/{versionId}/restore` swaps a snapshot back in as current (itself snapshotting whatever was live, so a restore is undoable too) and **dedupes**: after a restore, the restored row plus any other row with byte-identical `dashboard_config` are deleted, since that content is now "Current," not history — otherwise a restore-edit-restore cycle piles up an alternating chain of duplicate snapshots. `DashboardWorkspace.jsx`'s History panel shows a lightweight diff summary per entry (title/widget-count/size delta computed client-side, not a real line diff — the agent rewrites large chunks even for small logical changes) plus a Preview modal that renders that version's HTML live via `DashboardArtifact`.
+- **Refresh**: `DashboardArtifact`'s `useImperativeHandle` exposes `reload()`, which bumps an internal `reloadEpoch` state used as the `<iframe>`'s `key` — forcing a genuine remount (and re-running every widget's `deepsql.query()` call) even when `html` is referentially unchanged, which changing `html`/`srcDoc` alone can't guarantee. `DashboardWorkspace.jsx`'s canvas toolbar has a manual Refresh button plus an auto-refresh interval dropdown (Off/30s/5m/1h) that calls it on a timer, paused while a build is in flight (a completing build already replaces the iframe). `DashboardViewer.jsx` (both share surfaces) takes the same `autoRefreshMs` optionally, plus `hideChrome` for kiosk mode.
+- **TV/kiosk mode**: `PublicDashboardPage.jsx` reads `?kiosk=1&refresh=<seconds>` (chrome-less + auto-refresh, floor 10s) and `?tokens=tokA,tokB&advance=<seconds>` (cycles through multiple public share tokens, dwelling `advance` seconds each — the route's own `:token` is always the first slide). A password-protected dashboard mid-cycle is skipped (there's no one there to type a password) rather than parking the whole kiosk on a gate. `ShareMenu.jsx` surfaces a ready-made kiosk link (`?kiosk=1&refresh=60`) once a dashboard is public and unprotected.
+- **Alerts**: `dashboard_alerts` (`V114__create_dashboard_alerts.sql`) holds a natural-language condition per dashboard (e.g. "alert if the error rate exceeds 5% in the last hour"), evaluated on a schedule by `DashboardAlertService.evaluate()` — a **bounded agent session** (fresh `ensureSession`, no tools beyond `execute_sql`/schema lookups, a short task prompt asking for exactly `YES`/`NO` + a one-sentence reason grounded in a real query result) reusing the same agent plumbing as dashboard generation, just for a one-line answer instead of a whole HTML document. `DashboardAlertTaskConfig` registers one db-scheduler recurring task (`dashboard-alert-tick`, every minute) that evaluates whichever alerts are actually due per `DashboardAlertRepository.findDue` (each alert has its own `checkIntervalMinutes`) rather than one scheduled task per alert. A fired alert dispatches through `EmailService.sendDashboardAlert`/`WebhookService.sendDashboardAlert` (new methods, same pattern as the existing growth/slow-query alert methods) gated by a per-alert `cooldownMinutes` so a condition that stays true doesn't re-fire every tick. The alert runs **as whoever created it** (`createdByUsername`, captured at creation time) — there's no ambient "system" identity for a background job, and running every alert as an arbitrary admin would let one user's alert read data through someone else's access grant. `DashboardAlertController` is the CRUD surface (`/saved-dashboards/{id}/alerts`); `DashboardWorkspace.jsx`'s toolbar has an Alerts panel (composer + per-alert enable/disable/delete, last-check verdict shown inline).
 
 ## LLM Providers
 
diff --git a/agent/skills/dashboard-design/SKILL.md b/agent/skills/dashboard-design/SKILL.md
index 8d003a2..7c12226 100644
--- a/agent/skills/dashboard-design/SKILL.md
+++ b/agent/skills/dashboard-design/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: dashboard-design
-description: Design and code a self-contained HTML dashboard for DeepSQL — ground on the schema, verify SQL, then write a beautiful single-file dashboard that loads data via the deepsql.query bridge.
-version: 2.1.0
+description: Design and code a self-contained HTML dashboard for DeepSQL — ground on the schema, verify SQL, then emit it as a shell plus one verified widget block at a time so the canvas builds progressively.
+version: 3.0.0
 platforms: [linux, macos, windows]
 metadata:
   hermes:
@@ -15,7 +15,12 @@ Use when asked to build or edit a dashboard (the task says "build a self-contain
 
 ## The runtime you build against
 
-Your output is ONE self-contained HTML document. It runs inside a sandboxed iframe with a bridge already injected:
+Your output is a **shell block, then one widget block per KPI/chart** — not a single HTML
+document. The parent assembles them (each widget's markup+script drops into its own
+`[data-widget=id]` slot in the shell) and renders each widget into the live canvas the moment
+its block closes, well before your whole turn finishes — so the user watches the dashboard
+build piece by piece instead of staring at a blank screen for the whole generation. Both kinds
+of block run inside the SAME sandboxed iframe with a bridge already injected:
 
 ```js
 deepsql.connectionId                      // this connection's id (string)
@@ -44,28 +49,34 @@ plain-business-language heading) so the expanded overlay has something to show a
 not add your own zoom/expand/fullscreen button, modal, or lightbox; one already exists per chart.
 
 Hard rules:
-- Inline everything — one `<style>`, one or more `<script>`. **No external URLs, CDNs, fonts, or images** (blocked by CSP) and **no `fetch()`/XHR/WebSocket** — data comes only from `deepsql.query`.
+- Inline everything — one `<style>` in the shell, one `<script>` per widget block. **No external URLs, CDNs, fonts, or images** (blocked by CSP) and **no `fetch()`/XHR/WebSocket** — data comes only from `deepsql.query`.
 - Never hardcode result data. Query live on load, and re-query when a control changes.
 - There is **no placeholder convention**. You write normal SQL strings in JS and pass the finished string to `deepsql.query`. Build date filters yourself (see below).
+- A widget's `<script>` touches ONLY elements inside its own block (namespace ids with the widget id, e.g. `revenue-total-val`) — never reach into another widget's slot or assume load order between widgets.
 
 ## Procedure
 
 1. **Ground.** `get_brain_context`, `get_schema`, `list_business_rules`, `get_relationships`. Obey business rules about which table/column/filter/currency a concept uses — quote them; don't guess a similar-looking table.
-2. **Design.** Decide the KPIs, charts, tables, and controls (date range, dropdowns) the request calls for. Sketch the SQL for each — **schema-qualified** (`crm.orders`, not bare `orders` when the DB has multiple schemas), table-qualified columns, read-only.
+2. **Design.** Decide the KPIs, charts, tables, and controls (date range, dropdowns) the request calls for. Give each one a short, stable, kebab-case widget id (e.g. `revenue-trend`) — you'll use the same id in the shell's slot and that widget's own block. Sketch the SQL for each — **schema-qualified** (`crm.orders`, not bare `orders` when the DB has multiple schemas), table-qualified columns, read-only.
 3. **Handle dates correctly.** Check the column's type in the schema. If it's a real DATE/DATETIME, filter with `BETWEEN '2026-07-01' AND '2026-07-08'`. **If it's a Unix-epoch integer** (seconds), filter on the epoch: `col >= UNIX_TIMESTAMP('2026-07-01 00:00:00') AND col < UNIX_TIMESTAMP('2026-07-09 00:00:00')`. Build these strings in JS from the picker's values.
-4. **Verify.** Run every query with `execute_sql` and READ the rows: date windows bounded and inside range (never the future), KPI value types right (name = text, money = currency), totals plausible vs a `COUNT(*)`. Fix and re-run until correct.
-5. **Intent checklist.** Before emitting, list every explicit ask (each chart, each metric, each control like "a date range picker defaulting to today") and confirm the HTML satisfies ALL of them. An unmet ask is a failed dashboard even if the data is perfect.
-6. **Code the document** (see skeleton), using `deepsql.charts.*` for every chart.
-7. **Self-review before emitting** — reread your finished HTML as if you were the user opening it, and fix anything that fails this checklist:
+4. **Verify each widget's query BEFORE emitting that widget's block.** Run it with `execute_sql` and READ the rows: date windows bounded and inside range (never the future), KPI value types right (name = text, money = currency), totals plausible vs a `COUNT(*)`. Fix and re-run until correct — only then emit that widget.
+5. **Intent checklist.** Before emitting the shell, list every explicit ask (each chart, each metric, each control like "a date range picker defaulting to today") and confirm your planned widgets cover ALL of them.
+6. **Emit progressively** (see "The runtime you build against" for the exact block shapes):
+   - One `dashboard-shell` block first — page chrome plus an empty, named `[data-widget=id]` slot per widget. No query logic here.
+   - Then one `dashboard-widget id="..."` block per widget, each only after step 4 has verified it — its own markup AND the `<script>` that queries and renders into its own slot. Use `deepsql.charts.*` for every chart.
+7. **Self-review before your final message ends** — reread everything you emitted as if you were the user opening it, and fix anything that fails this checklist:
    - Every widget has a real data source and a query you actually verified; no placeholder/lorem values.
    - Every chart uses `deepsql.charts.*` (so it has hover tooltips) and passes the correct label/value columns — no chart left blank because the data shape didn't match.
    - No `undefined` / `null` / `NaN` can reach the screen — every injected value is guarded with a fallback. Pay special attention to KPI sub-labels and any computed % (e.g. a "top source share" caption).
    - Every explicit user ask from the intent checklist is present and wired (controls default correctly and re-query on change).
+   - Every widget id referenced in the shell has a matching `dashboard-widget` block, and vice versa.
    - No table/column/SQL/connection-id text is visible anywhere.
    - No AI-slop pattern from the section below is present (gradient background/hero, emoji-as-icon,
      decorative blobs/glassmorphism, uniform shadows, off-scale spacing/type, more than one accented
      "hero" card, hand-rolled chart colors or expand/zoom controls).
-   A dashboard that renders with a blank chart or an "undefined" label is a failed build — catch it here.
+   If self-review finds a problem in a widget you already emitted, emit a CORRECTED `dashboard-widget`
+   block with the SAME id — it replaces what was shown before. A dashboard that renders with a blank
+   chart or an "undefined" label is a failed build — catch it here, don't leave it for the user to find.
 
 ## NEVER expose internals (security + UX — non-negotiable)
 
@@ -134,17 +145,33 @@ patterns above are present, that's your answer.
 
 ## Interaction
 
-- Wire controls to re-run only the affected queries and re-render — never reload the page. A date range picker defaults to what the user asked for (e.g. today) and drives every time-sensitive query.
-- **Load each widget independently and in parallel** — one `deepsql.query` per widget, each with its own `try/catch`. A slow or failing widget must NEVER block or fail the others.
+- Wire controls to re-run only the affected queries and re-render — never reload the page. A date range picker defaults to what the user asked for (e.g. today) and drives every time-sensitive query. A control that affects multiple widgets lives in the shell as a shared value (e.g. `window.__dateRange`); each widget's own script reads it and re-queries when it changes (e.g. listen for a `CustomEvent` the control dispatches on the shell's `document`) — a widget never assumes another widget's DOM exists.
+- **Every widget loads independently** — its own `deepsql.query` call, its own `try/catch`. A slow or failing widget must NEVER block or fail the others; this is automatic once each widget is its own self-contained block.
 - On a failed or timed-out query (`deepsql.query` rejects — the error text is e.g. "Timed out"), show a **quiet inline placeholder in that widget only** ("Timed out" / "Couldn't load this metric"), keep the rest of the dashboard working, and don't retry in a loop.
 
 ## Skeleton to adapt (design freely; uses the injected theme)
 
-```html
+Shell — chrome and empty slots, no query logic:
+
+```dashboard-shell
 <!doctype html><html><head><meta charset="utf-8"><style>
   body{padding:28px}
-  .head h1{font-size:26px;font-weight:700;margin:0 0 6px}
-  .head p{color:var(--ds-ink-2);margin:0}
+  .headerbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
+    background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);
+    padding:20px 24px;box-shadow:var(--ds-shadow);margin-bottom:22px}
+  .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-ink-2);margin:0 0 6px}
+  .headerbar h1{font-size:26px;font-weight:700;margin:0 0 6px}
+  .headerbar p{color:var(--ds-ink-2);margin:0;max-width:520px;font-size:13px;line-height:1.5}
+  .controls{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
+  .control-group label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
+    color:var(--ds-ink-2);margin-bottom:6px}
+  .quick-range{display:flex;gap:6px}
+  .quick-range button{border:1px solid var(--ds-line);background:var(--ds-bg);color:var(--ds-ink);
+    border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
+  .quick-range button.active{background:var(--ds-ink);color:var(--ds-bg);border-color:var(--ds-ink)}
+  .control-group input[type=date]{border:1px solid var(--ds-line);border-radius:8px;padding:7px 10px;font-size:13px}
+  .apply-btn{border:1px solid var(--ds-line);background:var(--ds-bg);color:var(--ds-ink);
+    border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;align-self:flex-end}
   .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:22px 0}
   .card{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:20px;box-shadow:var(--ds-shadow)}
   .card.hero{background:var(--ds-grad)}                 /* highlight the key KPI only */
@@ -152,25 +179,115 @@ patterns above are present, that's your answer.
   .kpi-lab{color:var(--ds-ink-2);font-size:13px;margin-top:4px}
   .err{color:#b91c1c;font-size:13px}
 </style></head><body>
-  <div class="head"><h1>Booking Momentum</h1><p>Daily new properties and booking volume for the selected dates.</p></div>
-  <div class="controls"><!-- date range, defaulting to today --></div>
-  <div class="kpis" id="kpis"></div>
-  <div id="charts"></div>
+  <div class="headerbar">
+    <div>
+      <p class="eyebrow">Daily performance</p>
+      <h1>Booking Momentum</h1>
+      <p>Daily new properties and booking volume across the selected period.</p>
+    </div>
+    <div class="controls">
+      <div class="control-group">
+        <label>Quick range</label>
+        <div class="quick-range" id="quick-range">
+          <button type="button" data-days="7">Last 7 days</button>
+          <button type="button" data-days="30" class="active">Last 30 days</button>
+          <button type="button" data-days="90">Last 90 days</button>
+        </div>
+      </div>
+      <div class="control-group"><label>Start date</label><input type="date" id="date-from"></div>
+      <div class="control-group"><label>End date</label><input type="date" id="date-to"></div>
+      <button type="button" class="apply-btn" id="apply-range">Apply range</button>
+    </div>
+  </div>
+  <div class="kpis">
+    <div class="card hero" data-widget="new-properties"></div>
+    <div class="card" data-widget="bookings-total"></div>
+  </div>
+  <div data-widget="bookings-trend"></div>
   <script>
-    async function loadKpi(el, sql, fmt){ try{ const {rows}=await deepsql.query(sql);
-      const v = rows?.[0]?.[0]; el.querySelector('.kpi-val').textContent = (v==null?'—':fmt(v)); }
-      catch(e){ el.innerHTML='<div class="err">Couldn\\'t load this metric.</div>'; } }
-    async function loadChart(el, sql){ try{ const res=await deepsql.query(sql);
-      deepsql.charts.bar(el, res); }                 // hover tooltips + formatting built in
-      catch(e){ el.innerHTML='<div class="err">'+(e.message==='Timed out'?'Timed out.':'Couldn\\'t load.')+'</div>'; } }
-    deepsql.ready(async () => { /* set date range to today, then load every widget independently */ });
+    // Shared control: lives in the shell (not any one widget). Quick-range buttons
+    // set both date inputs and apply immediately; typing dates directly only
+    // applies on the explicit button, so a widget never re-queries mid-keystroke.
+    // Every date-sensitive widget listens for 'dsql:daterange' to re-query.
+    (function(){
+      const fromEl = document.getElementById('date-from');
+      const toEl = document.getElementById('date-to');
+      const quickRange = document.getElementById('quick-range');
+      const fmt = (d) => d.toISOString().slice(0,10);
+      function setRange(days){
+        const to = new Date();
+        const from = new Date();
+        from.setDate(from.getDate() - (days - 1));
+        fromEl.value = fmt(from);
+        toEl.value = fmt(to);
+      }
+      function apply(){
+        window.__dateRange = { from: fromEl.value, to: toEl.value };
+        document.dispatchEvent(new CustomEvent('dsql:daterange', { detail: window.__dateRange }));
+      }
+      quickRange.addEventListener('click', (e) => {
+        const btn = e.target.closest('button[data-days]');
+        if (!btn) return;
+        quickRange.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        setRange(Number(btn.dataset.days));
+        apply();
+      });
+      document.getElementById('apply-range').addEventListener('click', () => {
+        quickRange.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+        apply();
+      });
+      setRange(30);
+      window.__dateRange = { from: fromEl.value, to: toEl.value };
+    })();
   </script>
 </body></html>
 ```
 
+One block per widget — its own markup AND the script that queries and fills it in. A widget whose data is date-sensitive reads `window.__dateRange` on load and re-queries on the shell's `dsql:daterange` event; a widget that isn't date-sensitive (e.g. a lifetime total) simply ignores the control:
+
+```dashboard-widget id="new-properties"
+<p class="kpi-lab">New properties</p>
+<p class="kpi-val" id="new-properties-val">—</p>
+<script>
+  async function load(){
+    try {
+      const { from, to } = window.__dateRange;
+      const { rows } = await deepsql.query(
+        `SELECT COUNT(*) FROM public.properties p WHERE p.created_at BETWEEN '${from}' AND '${to}'`);
+      document.getElementById('new-properties-val').textContent = deepsql.charts.format(rows?.[0]?.[0] ?? 0);
+    } catch (e) {
+      document.getElementById('new-properties-val').textContent = '—';
+    }
+  }
+  deepsql.ready(load);
+  document.addEventListener('dsql:daterange', load);
+</script>
+```
+
+```dashboard-widget id="bookings-trend"
+<p class="kpi-lab">Bookings over time</p>
+<div id="bookings-trend-chart"></div>
+<script>
+  async function load(){
+    try {
+      const { from, to } = window.__dateRange;
+      const res = await deepsql.query(
+        `SELECT ... FROM public.bookings b WHERE b.created_at BETWEEN '${from}' AND '${to}' ORDER BY 1`);
+      deepsql.charts.line(document.getElementById('bookings-trend-chart'), res, { title: 'Bookings over time' });
+    } catch (e) {
+      document.getElementById('bookings-trend-chart').innerHTML =
+        '<div class="err">' + (e.message === 'Timed out' ? 'Timed out.' : "Couldn't load.") + '</div>';
+    }
+  }
+  deepsql.ready(load);
+  document.addEventListener('dsql:daterange', load);
+</script>
+```
+
 ## Guardrails
 
 - Read-only SELECT/WITH only (the bridge rejects anything else anyway).
 - Self-contained: no external network, no imported fonts, no inline data dumps — query live.
 - No internals visible to the user (see the security section above) — user-facing error text stays generic ("Couldn't load this metric.").
-- Return the FULL document every time (including on edits), inside ONE ```html block, with no prose after it.
+- Emit the shell ONCE, then one `dashboard-widget` block per widget (or a corrected re-emit of one, same id, if self-review catches a problem) — never wrap everything back into a single ```html block. On an EDIT, re-emit the full shell (even for widgets you aren't changing, their slots must still exist) and every widget's block, including unchanged ones — the assembled document is built fresh from what you emit this turn, not merged with the prior one.
diff --git a/backend/src/main/java/com/dbaagent/controller/DashboardAlertController.java b/backend/src/main/java/com/dbaagent/controller/DashboardAlertController.java
new file mode 100644
index 0000000..abec91d
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/controller/DashboardAlertController.java
@@ -0,0 +1,100 @@
+package com.dbaagent.controller;
+
+import com.dbaagent.model.DashboardAlert;
+import com.dbaagent.model.SavedDashboard;
+import com.dbaagent.service.DashboardAlertService;
+import com.dbaagent.service.SavedDashboardService;
+import com.dbaagent.service.security.AccessControlService;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+
+/** CRUD for per-dashboard natural-language alerts — see DashboardAlertService for evaluation. */
+@RestController
+@RequestMapping("/saved-dashboards/{dashboardId}/alerts")
+@RequiredArgsConstructor
+@Slf4j
+public class DashboardAlertController {
+
+    private final DashboardAlertService alertService;
+    private final SavedDashboardService savedDashboardService;
+    private final AccessControlService accessControlService;
+
+    @PostMapping
+    public ResponseEntity<Map<String, Object>> create(@PathVariable UUID dashboardId, @RequestBody DashboardAlert draft) {
+        try {
+            SavedDashboard dashboard = requireDashboard(dashboardId);
+            accessControlService.assertCanManageConnectionContent(dashboard.getConnectionId());
+            String username = accessControlService.requireCurrentUsername();
+            DashboardAlert created = alertService.createAlert(dashboardId, username, draft);
+            return ResponseEntity.status(HttpStatus.CREATED).body(Map.of("success", true, "alert", created));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error creating dashboard alert", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Map.of("success", false, "message", "Failed to create alert"));
+        }
+    }
+
+    @GetMapping
+    public ResponseEntity<Map<String, Object>> list(@PathVariable UUID dashboardId) {
+        try {
+            SavedDashboard dashboard = requireDashboard(dashboardId);
+            accessControlService.assertCanReadConnectionContent(dashboard.getConnectionId());
+            List<DashboardAlert> alerts = alertService.getAlertsForDashboard(dashboardId);
+            return ResponseEntity.ok(Map.of("success", true, "alerts", alerts));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error listing dashboard alerts", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Map.of("success", false, "message", "Failed to fetch alerts"));
+        }
+    }
+
+    @PutMapping("/{alertId}")
+    public ResponseEntity<Map<String, Object>> update(@PathVariable UUID dashboardId, @PathVariable UUID alertId, @RequestBody DashboardAlert updates) {
+        try {
+            SavedDashboard dashboard = requireDashboard(dashboardId);
+            accessControlService.assertCanManageConnectionContent(dashboard.getConnectionId());
+            DashboardAlert updated = alertService.updateAlert(alertId, updates);
+            return ResponseEntity.ok(Map.of("success", true, "alert", updated));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error updating dashboard alert", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Map.of("success", false, "message", "Failed to update alert"));
+        }
+    }
+
+    @DeleteMapping("/{alertId}")
+    public ResponseEntity<Map<String, Object>> delete(@PathVariable UUID dashboardId, @PathVariable UUID alertId) {
+        try {
+            SavedDashboard dashboard = requireDashboard(dashboardId);
+            accessControlService.assertCanManageConnectionContent(dashboard.getConnectionId());
+            alertService.deleteAlert(alertId);
+            return ResponseEntity.ok(Map.of("success", true));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error deleting dashboard alert", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Map.of("success", false, "message", "Failed to delete alert"));
+        }
+    }
+
+    private SavedDashboard requireDashboard(UUID dashboardId) {
+        return savedDashboardService.getDashboardById(dashboardId)
+            .orElseThrow(() -> new IllegalArgumentException("Dashboard not found"));
+    }
+}
diff --git a/backend/src/main/java/com/dbaagent/controller/DashboardGenerationController.java b/backend/src/main/java/com/dbaagent/controller/DashboardGenerationController.java
index 8006730..815faaf 100644
--- a/backend/src/main/java/com/dbaagent/controller/DashboardGenerationController.java
+++ b/backend/src/main/java/com/dbaagent/controller/DashboardGenerationController.java
@@ -140,6 +140,17 @@ public SseEmitter generateStream(@RequestBody GenerateRequest request) {
                         } catch (IOException io) {
                             throw new ClientGoneException(io);
                         }
+                    },
+                    (kind, id, html) -> {
+                        try {
+                            Map<String, Object> data = new java.util.HashMap<>();
+                            data.put("kind", kind);
+                            data.put("id", id);
+                            data.put("html", html);
+                            emitter.send(SseEmitter.event().name("chunk").data(data));
+                        } catch (IOException io) {
+                            throw new ClientGoneException(io);
+                        }
                     });
                 // Chat-only replies (greetings / tool questions) must not share the
                 // `done` event with a real artifact — the FE's done handler always
diff --git a/backend/src/main/java/com/dbaagent/controller/SavedDashboardController.java b/backend/src/main/java/com/dbaagent/controller/SavedDashboardController.java
index 2dde08a..c2e3364 100644
--- a/backend/src/main/java/com/dbaagent/controller/SavedDashboardController.java
+++ b/backend/src/main/java/com/dbaagent/controller/SavedDashboardController.java
@@ -1,5 +1,6 @@
 package com.dbaagent.controller;
 
+import com.dbaagent.model.DashboardVersion;
 import com.dbaagent.model.SavedDashboard;
 import com.dbaagent.service.SavedDashboardService;
 import com.dbaagent.service.security.AccessControlService;
@@ -227,6 +228,83 @@ public ResponseEntity<Map<String, Object>> updateDashboard(@PathVariable UUID id
         }
     }
 
+    /**
+     * Duplicate a dashboard as a new, independent draft.
+     */
+    @PostMapping("/{id}/clone")
+    public ResponseEntity<Map<String, Object>> cloneDashboard(@PathVariable UUID id) {
+        try {
+            SavedDashboard existing = savedDashboardService.getDashboardById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Dashboard not found"));
+            accessControlService.assertCanManageConnectionContent(existing.getConnectionId());
+            SavedDashboard clone = savedDashboardService.cloneDashboard(id);
+            Map<String, Object> response = new HashMap<>();
+            response.put("success", true);
+            response.put("savedDashboard", clone);
+            return ResponseEntity.status(HttpStatus.CREATED).body(response);
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error cloning dashboard", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                .body(Map.of("success", false, "message", "Failed to clone dashboard"));
+        }
+    }
+
+    /**
+     * List version history for a dashboard, most recent first.
+     */
+    @GetMapping("/{id}/versions")
+    public ResponseEntity<Map<String, Object>> getVersionHistory(@PathVariable UUID id) {
+        try {
+            SavedDashboard existing = savedDashboardService.getDashboardById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Dashboard not found"));
+            accessControlService.assertCanReadConnectionContent(existing.getConnectionId());
+            List<DashboardVersion> versions = savedDashboardService.getVersionHistory(id);
+            Map<String, Object> response = new HashMap<>();
+            response.put("success", true);
+            response.put("versions", versions);
+            return ResponseEntity.ok(response);
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (Exception e) {
+            log.error("Error fetching dashboard version history", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                .body(Map.of("success", false, "message", "Failed to fetch version history"));
+        }
+    }
+
+    /**
+     * Restore a prior version as the dashboard's current config.
+     */
+    @PostMapping("/{id}/versions/{versionId}/restore")
+    public ResponseEntity<Map<String, Object>> restoreVersion(@PathVariable UUID id, @PathVariable UUID versionId) {
+        try {
+            SavedDashboard existing = savedDashboardService.getDashboardById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Dashboard not found"));
+            accessControlService.assertCanManageConnectionContent(existing.getConnectionId());
+            SavedDashboard restored = savedDashboardService.restoreVersion(id, versionId);
+            Map<String, Object> response = new HashMap<>();
+            response.put("success", true);
+            response.put("savedDashboard", restored);
+            return ResponseEntity.ok(response);
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Map.of("success", false, "message", e.getMessage()));
+        } catch (org.springframework.web.server.ResponseStatusException e) {
+            throw e;
+        } catch (OptimisticLockingFailureException e) {
+            return conflict(e);
+        } catch (Exception e) {
+            log.error("Error restoring dashboard version", e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                .body(Map.of("success", false, "message", "Failed to restore version"));
+        }
+    }
+
     /**
      * Delete a saved dashboard
      */
diff --git a/backend/src/main/java/com/dbaagent/model/DashboardAlert.java b/backend/src/main/java/com/dbaagent/model/DashboardAlert.java
new file mode 100644
index 0000000..92444db
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/model/DashboardAlert.java
@@ -0,0 +1,96 @@
+package com.dbaagent.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "dashboard_alerts", indexes = {
+    @Index(name = "idx_dashboard_alerts_dashboard_id", columnList = "dashboardId"),
+    @Index(name = "idx_dashboard_alerts_due", columnList = "isEnabled, lastCheckedAt")
+})
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class DashboardAlert {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @Column(nullable = false)
+    private UUID dashboardId;
+
+    @Column(nullable = false)
+    private String connectionId;
+
+    // The alert runs as whoever created it (their agent profile/session) — there is
+    // no ambient "system" identity to fall back to for a background job, and running
+    // it as an arbitrary admin would let anyone's alert read data through someone
+    // else's access grant.
+    @Column(nullable = false)
+    private String createdByUsername;
+
+    // Natural-language threshold, e.g. "alert if error_rate exceeds 5% in the last hour".
+    @Column(nullable = false, columnDefinition = "TEXT")
+    private String conditionText;
+
+    // Comma-separated subset of: in-app, email, webhook.
+    @Column(nullable = false, length = 255)
+    private String channels = "in-app";
+
+    @Column(length = 1000)
+    private String emailRecipients;
+
+    @Column(length = 1000)
+    private String webhookUrl;
+
+    @Column(nullable = false)
+    private Boolean isEnabled = true;
+
+    @Column(nullable = false)
+    private Integer checkIntervalMinutes = 15;
+
+    // Minimum time between two firings, independent of check interval — a condition
+    // that stays true for hours should page once, not every 15 minutes.
+    @Column(nullable = false)
+    private Integer cooldownMinutes = 60;
+
+    @Column
+    private LocalDateTime lastCheckedAt;
+
+    @Column
+    private LocalDateTime lastFiredAt;
+
+    @Column(length = 16)
+    private String lastVerdict;
+
+    @Column(columnDefinition = "TEXT")
+    private String lastReason;
+
+    @Column(columnDefinition = "TEXT")
+    private String lastError;
+
+    @CreationTimestamp
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @UpdateTimestamp
+    @Column(nullable = false)
+    private LocalDateTime updatedAt;
+
+    @PrePersist
+    @PreUpdate
+    void applyDefaults() {
+        if (isEnabled == null) isEnabled = true;
+        if (checkIntervalMinutes == null) checkIntervalMinutes = 15;
+        if (cooldownMinutes == null) cooldownMinutes = 60;
+        if (channels == null || channels.isBlank()) channels = "in-app";
+    }
+}
diff --git a/backend/src/main/java/com/dbaagent/model/DashboardVersion.java b/backend/src/main/java/com/dbaagent/model/DashboardVersion.java
new file mode 100644
index 0000000..41e9a4a
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/model/DashboardVersion.java
@@ -0,0 +1,43 @@
+package com.dbaagent.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "dashboard_versions", indexes = {
+    @Index(name = "idx_dashboard_versions_dashboard_id", columnList = "dashboardId")
+})
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class DashboardVersion {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @Column(nullable = false)
+    private UUID dashboardId;
+
+    @Column(nullable = false, columnDefinition = "TEXT")
+    private String dashboardConfig;
+
+    @Column(length = 255)
+    private String name;
+
+    // What produced this snapshot: AGENT_BUILD (agent finished a turn) or MANUAL_EDIT
+    // (Source tab Apply) — shown in the History list so a restore point reads as
+    // "before this edit" rather than an anonymous timestamp.
+    @Column(nullable = false, length = 32)
+    private String trigger;
+
+    @CreationTimestamp
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+}
diff --git a/backend/src/main/java/com/dbaagent/repository/DashboardAlertRepository.java b/backend/src/main/java/com/dbaagent/repository/DashboardAlertRepository.java
new file mode 100644
index 0000000..b929e7f
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/repository/DashboardAlertRepository.java
@@ -0,0 +1,28 @@
+package com.dbaagent.repository;
+
+import com.dbaagent.model.DashboardAlert;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.stereotype.Repository;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.UUID;
+
+@Repository
+public interface DashboardAlertRepository extends JpaRepository<DashboardAlert, UUID> {
+
+    List<DashboardAlert> findByDashboardIdOrderByCreatedAtDesc(UUID dashboardId);
+
+    // Due = enabled AND (never checked OR its own interval has elapsed since the last
+    // check). Computed in SQL rather than pulled into Java so a growing alert count
+    // never means pulling every row into memory just to filter most of them out.
+    // The now::timestamp cast is required — without it, Postgres can't resolve
+    // whether the parameter or the (timestamp - interval) expression should drive
+    // the comparison's type and rejects the query with "operator does not exist:
+    // timestamp without time zone <= interval".
+    @Query(value = "SELECT * FROM dashboard_alerts WHERE is_enabled = true "
+        + "AND (last_checked_at IS NULL OR last_checked_at <= CAST(:now AS timestamp) - (check_interval_minutes * INTERVAL '1 minute'))",
+        nativeQuery = true)
+    List<DashboardAlert> findDue(LocalDateTime now);
+}
diff --git a/backend/src/main/java/com/dbaagent/repository/DashboardVersionRepository.java b/backend/src/main/java/com/dbaagent/repository/DashboardVersionRepository.java
new file mode 100644
index 0000000..437850d
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/repository/DashboardVersionRepository.java
@@ -0,0 +1,16 @@
+package com.dbaagent.repository;
+
+import com.dbaagent.model.DashboardVersion;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.UUID;
+
+@Repository
+public interface DashboardVersionRepository extends JpaRepository<DashboardVersion, UUID> {
+
+    List<DashboardVersion> findByDashboardIdOrderByCreatedAtDesc(UUID dashboardId);
+
+    void deleteByDashboardId(UUID dashboardId);
+}
diff --git a/backend/src/main/java/com/dbaagent/service/AgentChatClient.java b/backend/src/main/java/com/dbaagent/service/AgentChatClient.java
index 491389e..2f4a216 100644
--- a/backend/src/main/java/com/dbaagent/service/AgentChatClient.java
+++ b/backend/src/main/java/com/dbaagent/service/AgentChatClient.java
@@ -22,6 +22,8 @@
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 
 /**
  * Synchronous client for the DeepSQL Agent webui API, reached over the compose
@@ -144,6 +146,26 @@ private void switchProfile(String profile) throws Exception {
      * assembled assistant text and the tool steps it ran.
      */
     public AgentReply sendAndAwait(String sessionId, String message) {
+        return sendAndAwait(sessionId, message, null);
+    }
+
+    /** Live per-tool-call notifications ("SQL · select …", "skill · …") as they happen. */
+    public interface ToolStepListener {
+        void onToolStep(String label);
+    }
+
+    /** A completed dashboard-shell or dashboard-widget fenced block, as soon as it closes. */
+    public record ArtifactChunk(String kind, String id, String html) { }
+
+    public interface ArtifactChunkListener {
+        void onChunk(ArtifactChunk chunk);
+    }
+
+    public AgentReply sendAndAwait(String sessionId, String message, ToolStepListener toolSteps) {
+        return sendAndAwait(sessionId, message, toolSteps, null);
+    }
+
+    public AgentReply sendAndAwait(String sessionId, String message, ToolStepListener toolSteps, ArtifactChunkListener chunks) {
         String streamId;
         try {
             JsonNode started = postJson("/api/chat/start", Map.of(
@@ -156,10 +178,10 @@ public AgentReply sendAndAwait(String sessionId, String message) {
         } catch (Exception e) {
             return AgentReply.fail("could not start agent turn: " + describe(e));
         }
-        return consumeStream(streamId);
+        return consumeStream(streamId, toolSteps, chunks);
     }
 
-    private AgentReply consumeStream(String streamId) {
+    private AgentReply consumeStream(String streamId, ToolStepListener toolStepListener, ArtifactChunkListener chunkListener) {
         String url = webuiUrl + "/api/chat/stream?stream_id=" + URLEncoder.encode(streamId, StandardCharsets.UTF_8);
         HttpRequest req = HttpRequest.newBuilder(URI.create(url))
             .header("Accept", "text/event-stream")
@@ -171,6 +193,13 @@ private AgentReply consumeStream(String streamId) {
         List<String> toolSteps = new ArrayList<>();
         boolean ended = false;
         String streamError = null;
+        // Scan position into `answer` for chunk detection — advances past each
+        // extracted dashboard-shell/dashboard-widget block so a closed fence is
+        // never re-matched, and resets with the buffer on `tool` (a chunk only
+        // ever appears in the FINAL answer, after the last tool call, per the
+        // skill's "no tool calls after it" contract — so a reset never splits one).
+        int[] chunkScanPos = { 0 };
+        int[] sqlStepCount = { 0 };
         try {
             HttpResponse<InputStream> resp = http.send(req, HttpResponse.BodyHandlers.ofInputStream());
             if (resp.statusCode() / 100 != 2) {
@@ -186,15 +215,25 @@ private AgentReply consumeStream(String streamId) {
                         String data = line.substring(5).trim();
                         if (event == null) continue;
                         switch (event) {
-                            case "token" -> answer.append(textField(data, "text"));
+                            case "token" -> {
+                                answer.append(textField(data, "text"));
+                                if (chunkListener != null) chunkScanPos[0] = scanForChunks(answer, chunkScanPos[0], chunkListener);
+                            }
                             case "tool" -> {
                                 String s = toolStep(data);
-                                if (s != null) toolSteps.add(s);
+                                if (s != null) {
+                                    toolSteps.add(s);
+                                    if (toolStepListener != null) {
+                                        String natural = naturalLanguageStep(data, sqlStepCount);
+                                        if (natural != null) toolStepListener.onToolStep(natural);
+                                    }
+                                }
                                 // Everything streamed before a tool call is interim
                                 // reasoning ("I'm pulling the schema…"). Channel users
                                 // only want the final answer, so drop it — the text
                                 // after the LAST tool is the real reply.
                                 answer.setLength(0);
+                                chunkScanPos[0] = 0;
                             }
                             case "error", "apperror" -> {
                                 String err = textField(data, "message");
@@ -274,6 +313,30 @@ private String text(JsonNode node) {
         return (node == null || node.isMissingNode() || node.isNull()) ? null : node.asText(null);
     }
 
+    // Matches a CLOSED fence only — requires the trailing ``` on its own line, so a
+    // fence still being streamed (no closing marker yet) never matches and is left
+    // for the next token to complete. Group 2 (id="...") is present only on a widget
+    // block. DOTALL so the body can span many token-appended lines.
+    private static final Pattern CHUNK_FENCE = Pattern.compile(
+        "```dashboard-(shell|widget)(?:\\s+id=\"([^\"]+)\")?\\s*\\n(.*?)\\n```",
+        Pattern.DOTALL);
+
+    /** Scans answer[fromPos..] for complete chunks, firing the listener for each. Returns the new scan position. */
+    private int scanForChunks(StringBuilder answer, int fromPos, ArtifactChunkListener listener) {
+        Matcher m = CHUNK_FENCE.matcher(answer).region(fromPos, answer.length());
+        int pos = fromPos;
+        while (m.find()) {
+            String kind = m.group(1);
+            String id = m.group(2);
+            String html = m.group(3);
+            try {
+                listener.onChunk(new ArtifactChunk(kind, id, html));
+            } catch (Exception ignored) { }
+            pos = m.end();
+        }
+        return pos;
+    }
+
     private String textField(String data, String field) {
         try {
             return objectMapper.readTree(data).path(field).asText("");
@@ -297,4 +360,38 @@ private String toolStep(String data) {
             return null;
         }
     }
+
+    // Present-progressive phrase per tool, for a user-facing live trace — never the
+    // raw tool name, query text, or a table/column name (the dashboard artifact
+    // itself is held to the same no-internals-visible bar; the trace shouldn't leak
+    // what the artifact is required to hide).
+    private static final String[] SQL_STEP_PHRASES = {
+        "Checking the numbers…", "Double-checking the data…", "Verifying a query against your data…",
+        "Confirming the figures…", "Running another check…",
+    };
+
+    // sqlStepCount varies the SQL-verification phrase across calls so a multi-widget
+    // build doesn't repeat one line 6 times — passed in per-call via int[] (a single-
+    // element mutable box) rather than an instance field, since this @Service is a
+    // shared singleton and an instance field would race across concurrent turns from
+    // different users/dashboards.
+    private String naturalLanguageStep(String data, int[] sqlStepCount) {
+        try {
+            JsonNode d = objectMapper.readTree(data);
+            String name = d.path("name").asText("");
+            JsonNode args = d.path("args");
+            if (!args.path("query").asText("").isBlank()) {
+                return SQL_STEP_PHRASES[sqlStepCount[0]++ % SQL_STEP_PHRASES.length];
+            }
+            if ("skill_view".equals(name)) return "Loading dashboard-building expertise…";
+            return switch (name.replaceFirst("^mcp_deepsql_", "")) {
+                case "get_brain_context", "list_business_rules" -> "Reviewing your business rules…";
+                case "get_schema", "get_relationships" -> "Understanding your database structure…";
+                case "execute_sql" -> SQL_STEP_PHRASES[sqlStepCount[0]++ % SQL_STEP_PHRASES.length];
+                default -> null; // an unrecognized/future tool stays silent rather than leaking its raw name
+            };
+        } catch (Exception e) {
+            return null;
+        }
+    }
 }
diff --git a/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java b/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
index a361eed..0a85f08 100644
--- a/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
+++ b/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
@@ -25,18 +25,27 @@
  * Dashboard generator — the embedded DeepSQL Agent as a coding agent
  * (customized Hermes runtime; see agent/README.md).
  *
- * <p>The agent doesn't fill in a rigid spec anymore. It <b>writes the whole
- * dashboard as a single self-contained HTML document</b> — any layout, filters,
- * date pickers, chart types, styling it wants, coded directly — after grounding
- * on the brain/schema and verifying every query with {@code execute_sql}. The
- * artifact fetches data at runtime through the injected {@code deepsql.query(sql)}
- * bridge (see DashboardQueryController), so it never holds DB creds and every
- * query stays read-only + access-scoped.
+ * <p>The agent doesn't fill in a rigid spec. It designs a dashboard freely —
+ * any layout, filters, date pickers, chart types, styling it wants — after
+ * grounding on the brain/schema and verifying every widget's query with
+ * {@code execute_sql}. The artifact fetches data at runtime through the
+ * injected {@code deepsql.query(sql)} bridge (see DashboardQueryController), so
+ * it never holds DB creds and every query stays read-only + access-scoped.
+ *
+ * <p>The agent emits progressively: one {@code dashboard-shell} fenced block
+ * (page chrome + named, empty widget slots), then one {@code dashboard-widget}
+ * block per KPI/chart, each only after ITS OWN query is verified. A
+ * {@link ChunkListener} fires per block as it closes — well before the whole
+ * turn ends — so DashboardGenerationController can stream each piece to the
+ * UI as it's ready instead of the canvas staying blank for the whole build.
+ * {@link #assembleFromChunks} substitutes each widget into its shell slot to
+ * produce the final document once the turn completes; {@link #extractHtml}
+ * falls back to the older single-block contract if no shell/widget fences are
+ * present at all, so a reply that predates this contract still works.
  *
  * <p>The old JSON-spec contract (metrics/charts/tables + a {{placeholder}}
  * substitution engine + a fixed renderer) is gone: it couldn't express real SQL
- * (e.g. a Unix-epoch date filter) and boxed the agent in. This broker just runs
- * one agent turn with the artifact contract, extracts the HTML, and returns it.
+ * (e.g. a Unix-epoch date filter) and boxed the agent in.
  */
 @Service
 public class DashboardAgentService {
@@ -48,6 +57,17 @@ public interface StepListener {
         void step(String type, String message);
     }
 
+    /**
+     * Progressive-render sink: fired the instant the agent finishes a
+     * dashboard-shell or dashboard-widget block (before the whole turn ends),
+     * so the canvas can fill in piece by piece. NOOP for callers that only want
+     * the final assembled artifact (the blocking /generate endpoint).
+     */
+    public interface ChunkListener {
+        ChunkListener NOOP = (kind, id, html) -> { };
+        void chunk(String kind, String id, String html);
+    }
+
     /** Artifact spec version stored in saved_dashboards.dashboardConfig. */
     private static final int ARTIFACT_VERSION = 3;
     private static final int MAX_HTML_CHARS = 400_000;
@@ -71,8 +91,14 @@ public DashboardAgentService(ObjectMapper objectMapper,
     }
 
     public Map<String, Object> generate(String connectionId, String prompt, Object currentConfig, StepListener listener) {
+        return generate(connectionId, prompt, currentConfig, listener, null);
+    }
+
+    public Map<String, Object> generate(String connectionId, String prompt, Object currentConfig,
+                                         StepListener listener, ChunkListener chunkListener) {
         List<Map<String, Object>> trace = new ArrayList<>();
         StepListener l = listener == null ? StepListener.NOOP : listener;
+        ChunkListener c = chunkListener == null ? ChunkListener.NOOP : chunkListener;
 
         String username = accessControlService.requireCurrentUsername();
         String profile = agentBridgeService.ensureProfileForUser(username, connectionId);
@@ -107,8 +133,14 @@ public Map<String, Object> generate(String connectionId, String prompt, Object c
 
         emit(l, trace, "grounding", "Handing off to the DeepSQL agent…");
         emit(l, trace, "planning", "Agent is grounding, writing SQL, and coding the dashboard…");
+        // Without this, the UI showed nothing but the "planning" line above for the
+        // whole 3-4 minute build. Each tool call (schema lookup, a verified SQL
+        // query, a skill invocation) now becomes its own step, so the trace keeps
+        // moving instead of looking stuck.
         AgentChatClient.AgentReply reply = agentChatClient.sendAndAwait(
-            sessionId, buildTask(connectionId, prompt, currentConfig));
+            sessionId, buildTask(connectionId, prompt, currentConfig),
+            toolLabel -> emit(l, trace, "sql", truncateStepLabel(toolLabel)),
+            chunk -> c.chunk(chunk.kind(), chunk.id(), chunk.html()));
         if (!reply.ok()) {
             throw new ResponseStatusException(HttpStatus.BAD_GATEWAY,
                 "The agent couldn't build the dashboard: " + (reply.error() == null ? "it ended early" : reply.error()));
@@ -186,9 +218,10 @@ private String buildChatTask(String prompt) {
 
     private String buildTask(String connectionId, String prompt, Object currentConfig) {
         StringBuilder sb = new StringBuilder();
-        sb.append("Build a beautiful, self-contained, read-only BI dashboard as a SINGLE HTML document for ")
-          .append("DeepSQL connection ").append(connectionId)
-          .append(". Load your `dashboard-design` skill and follow it.\n\n");
+        sb.append("Build a beautiful, self-contained, read-only BI dashboard for DeepSQL connection ")
+          .append(connectionId)
+          .append(", emitted progressively as a shell block plus one widget block per KPI/chart. ")
+          .append("Load your `dashboard-design` skill and follow it.\n\n");
         sb.append("User request:\n").append(prompt == null ? "" : prompt.trim()).append("\n\n");
 
         String currentHtml = currentHtml(currentConfig);
@@ -210,24 +243,74 @@ Do NOT hardcode result data, do NOT use fetch()/XHR/WebSockets or any external U
             1. Ground: get_brain_context, get_schema, list_business_rules, get_relationships. Obey business rules
                about which table/column/filter/currency a concept uses — quote them, don't guess a similar table.
             2. Design the dashboard from the request: KPIs, charts, tables, and any filters/date pickers asked for.
-               Write ONE real, correct, read-only SELECT per widget (table-qualified). There is NO placeholder
-               convention — you write normal SQL. For a Unix-epoch date column, filter on the epoch directly
-               (e.g. col BETWEEN UNIX_TIMESTAMP('2026-07-01') AND UNIX_TIMESTAMP('2026-07-08')); build such SQL
-               in JS from the picker's values and pass the finished string to deepsql.query().
-            3. VERIFY every query with execute_sql and READ the rows: date windows bounded and inside range (never
-               future), KPI value types right (a name is text, money is currency), totals plausible vs a COUNT.
-               Fix and re-run until correct.
-            4. INTENT CHECKLIST — before emitting, confirm EVERY explicit ask is satisfied (each chart, each metric,
-               and each UI control like a date range picker with the requested default, e.g. today).
-            5. Write the single HTML document: inline <style> + <script>, load data via deepsql.query() on load,
-               wire your own controls to re-query on change, and show a small inline error near any widget whose
-               query fails (don't blank the page). Use deepsql.charts.bar/line/donut for EVERY chart — they give
-               hover tooltips, number formatting, and empty-state handling; do not hand-write chart SVG. Guard every
-               value against undefined/null/NaN (fall back to a dash) so no "undefined" ever renders.
-            6. SELF-REVIEW before emitting: reread the finished HTML as the end user — every chart is a
-               deepsql.charts.* call with the right label/value columns (none left blank), no undefined/NaN can reach
-               the screen (esp. KPI sub-labels and % captions), every asked-for control is wired, and no internals
-               are visible. A blank chart or an "undefined" label is a failed build — fix it before emitting.
+               A dashboard driven by a time period (daily/recent activity, trends, "momentum") gets a real
+               date-range control in the shell's header — quick-range buttons (e.g. Last 7/30/90 days) PLUS
+               explicit start/end date inputs and an Apply action, not just one of those. See the skeleton's
+               header bar for the exact shape to build on. Write ONE real, correct, read-only SELECT per widget
+               (table-qualified). There is NO placeholder convention — you write normal SQL. For a Unix-epoch
+               date column, filter on the epoch directly (e.g. col BETWEEN UNIX_TIMESTAMP('2026-07-01') AND
+               UNIX_TIMESTAMP('2026-07-08')); build such SQL in JS from the picker's values and pass the
+               finished string to deepsql.query().
+            3. VERIFY each widget's query with execute_sql and READ the rows — date windows bounded and inside
+               range (never future), KPI value types right (a name is text, money is currency), totals plausible
+               vs a COUNT — BEFORE emitting that widget's block (step 5 below). Fix and re-run until correct.
+            4. INTENT CHECKLIST — before emitting the shell, list every explicit ask (each chart, each metric, each
+               UI control like a date range picker with the requested default, e.g. today) and confirm your planned
+               widgets cover ALL of them.
+            5. Emit progressively, as TWO KINDS of fenced blocks, each ONLY after its own SQL is verified (step 3):
+
+               a. FIRST, exactly one shell block — the page chrome and an empty, named slot per widget:
+                  ```dashboard-shell
+                  <!doctype html>...<head><style>...</style></head><body>
+                    <div class="wrap">
+                      <header>...</header>
+                      <section class="kpis">
+                        <div data-widget="revenue-total"></div>
+                        <div data-widget="orders-count"></div>
+                      </section>
+                      <section class="charts">
+                        <div data-widget="revenue-trend"></div>
+                      </section>
+                    </div>
+                  </body></html>
+                  ```
+                  Pick a short, stable, kebab-case id per widget (e.g. "revenue-total") — you will reuse this
+                  EXACT id in that widget's own block below. The shell itself has no <script> that queries
+                  data; each widget brings its own.
+
+               b. THEN, one block per widget, in any order, each independently self-contained (its own markup
+                  AND the <script> that queries and renders into ITS OWN slot only):
+                  ```dashboard-widget id="revenue-total"
+                  <article class="card hero">
+                    <p class="eyebrow">Revenue</p>
+                    <p class="value" id="revenue-total-val">—</p>
+                  </article>
+                  <script>
+                    deepsql.ready(async () => {
+                      try {
+                        const { rows } = await deepsql.query("SELECT SUM(o.total_amount) FROM public.orders o ...");
+                        document.getElementById('revenue-total-val').textContent = deepsql.charts.format(rows?.[0]?.[0] ?? 0);
+                      } catch (e) {
+                        document.getElementById('revenue-total-val').textContent = '—';
+                      }
+                    });
+                  </script>
+                  ```
+                  A widget's <script> must reference ONLY elements inside its own block (by an id namespaced
+                  with the widget id, as above) — never reach into another widget's slot. Use
+                  deepsql.charts.bar/line/donut for every chart — they give hover tooltips, number formatting,
+                  and empty-state handling; do not hand-write chart SVG. Guard every value against
+                  undefined/null/NaN (fall back to a dash) so no "undefined" ever renders. Wire any control
+                  (date range, dropdown) inside the relevant widget's own script, re-querying on change.
+
+            6. SELF-REVIEW before your final message ends: reread everything you emitted as the end user — every
+               chart is a deepsql.charts.* call with the right label/value columns (none left blank), no
+               undefined/NaN can reach the screen (esp. KPI sub-labels and % captions), every asked-for control
+               is wired, every widget id you referenced in the shell has a matching dashboard-widget block, and
+               no internals are visible. If self-review finds a problem in a widget you already emitted, emit a
+               CORRECTED dashboard-widget block with the SAME id as your last action — the same id re-emitted
+               replaces what was shown before. A blank chart or an "undefined" label is a failed build — fix it
+               before your message ends, don't leave it for the user to find.
 
             TWO HARD RULES (from the skill):
             - NEVER show internals to the user. No table/column names, no SQL, no connection id/UUID, no schema or
@@ -238,16 +321,34 @@ database jargon anywhere visible (titles, labels, descriptions, captions, errors
               --ds-shadow). Do NOT import fonts or set font-family. Stay monochrome; use a subtle soft color/gradient
               ONLY to highlight the 1–2 most important KPIs. Clean, minimal, lots of whitespace — not dark or neon.
 
-            Output your FINAL message as ONLY the complete HTML document in one ```html code block — no prose, no
-            tool calls after it.""");
+            Output your FINAL message as ONLY the fenced blocks described in step 5 above (one ```dashboard-shell```
+            first, then one ```dashboard-widget id="..."``` per widget) — no prose, no tool calls after the last one.
+            Do NOT wrap the whole thing in a single ```html block — the shell and each widget are SEPARATE fences.""");
         return sb.toString();
     }
 
     // ── artifact extraction ────────────────────────────────────────────────
 
-    /** Pull the HTML document out of the agent's final message (fenced or bare). */
+    // Matches the same dashboard-shell/dashboard-widget fences AgentChatClient's
+    // live chunk scanner does — kept as a SEPARATE pattern (not shared) because
+    // this one runs once, after the fact, over the complete final message, with
+    // no incremental-scan-position bookkeeping needed.
+    private static final Pattern SHELL_OR_WIDGET_FENCE = Pattern.compile(
+        "```dashboard-(shell|widget)(?:\\s+id=\"([^\"]+)\")?\\s*\\n(.*?)\\n```",
+        Pattern.DOTALL);
+
+    /**
+     * Assembles the final document from the agent's shell + widget chunks (the
+     * progressive-render contract), substituting each widget's HTML+script into
+     * its {@code [data-widget=id]} slot in the shell. Falls back to the older
+     * single ```html block contract if no shell/widget fences are present at
+     * all, so an agent turn that (for whatever reason) still emits one block
+     * — or any reply predating this contract — keeps working unchanged.
+     */
     private String extractHtml(String text) {
         if (text == null || text.isBlank()) return null;
+        String assembled = assembleFromChunks(text);
+        if (assembled != null) return assembled;
         // Prefer the last ```html (or bare ```) fenced block that looks like markup.
         Matcher fence = Pattern.compile("```(?:html)?\\s*(.*?)```", Pattern.DOTALL).matcher(text);
         String candidate = null;
@@ -267,6 +368,58 @@ private String extractHtml(String text) {
         return null;
     }
 
+    private String assembleFromChunks(String text) {
+        Matcher m = SHELL_OR_WIDGET_FENCE.matcher(text);
+        String shell = null;
+        // LinkedHashMap: a widget id emitted twice (a self-review correction re-
+        // emitting the same id) keeps only the LAST occurrence, but a first-seen
+        // id's position in the shell's substitution order is irrelevant — each
+        // is substituted into its own named slot, not appended in sequence.
+        Map<String, String> widgets = new LinkedHashMap<>();
+        while (m.find()) {
+            String kind = m.group(1);
+            String id = m.group(2);
+            String body = m.group(3);
+            if ("shell".equals(kind)) {
+                shell = body;
+            } else if (id != null) {
+                widgets.put(id, body);
+            }
+        }
+        if (shell == null) return null;
+        String html = shell;
+        for (Map.Entry<String, String> e : widgets.entrySet()) {
+            html = substituteWidgetSlot(html, e.getKey(), e.getValue());
+        }
+        return html;
+    }
+
+    // Replaces <div data-widget="id"></div> (or any content already inside it,
+    // e.g. a loading placeholder the shell shipped with) with the widget's
+    // verified markup+script. Matches the OPENING tag separately from its
+    // contents so a self-closing or non-empty placeholder slot both work.
+    private String substituteWidgetSlot(String shellHtml, String widgetId, String widgetHtml) {
+        Pattern slot = Pattern.compile(
+            "(<[a-zA-Z0-9]+[^>]*data-widget=\"" + Pattern.quote(widgetId) + "\"[^>]*>)(.*?)(</[a-zA-Z0-9]+>)",
+            Pattern.DOTALL);
+        Matcher sm = slot.matcher(shellHtml);
+        if (sm.find()) {
+            return sm.replaceFirst(Matcher.quoteReplacement(sm.group(1)) + Matcher.quoteReplacement(widgetHtml) + Matcher.quoteReplacement(sm.group(3)));
+        }
+        // Self-closing slot (<div data-widget="id" />) — replace the whole tag.
+        Pattern selfClosing = Pattern.compile(
+            "<[a-zA-Z0-9]+[^>]*data-widget=\"" + Pattern.quote(widgetId) + "\"[^>]*/>");
+        Matcher scm = selfClosing.matcher(shellHtml);
+        if (scm.find()) {
+            return scm.replaceFirst(Matcher.quoteReplacement("<div data-widget=\"" + widgetId + "\">" + widgetHtml + "</div>"));
+        }
+        // No matching slot in the shell (shouldn't happen if the agent followed
+        // the contract) — leave the shell as-is rather than silently dropping
+        // a verified widget's content.
+        log.warn("No [data-widget=\"{}\"] slot found in dashboard shell; widget content was not inserted", widgetId);
+        return shellHtml;
+    }
+
     private boolean looksLikeHtml(String s) {
         if (s == null || s.length() < 20) return false;
         String lower = s.toLowerCase();
@@ -297,11 +450,23 @@ private String currentHtml(Object currentConfig) {
 
     // ── small helpers ──────────────────────────────────────────────────────
 
+    private static final int MAX_PERSISTED_TRACE_STEPS = 50;
+    private static final int MAX_STEP_LABEL_CHARS = 140;
+
+    private static String truncateStepLabel(String label) {
+        if (label == null) return null;
+        return label.length() > MAX_STEP_LABEL_CHARS ? label.substring(0, MAX_STEP_LABEL_CHARS) + "…" : label;
+    }
+
     private void emit(StepListener l, List<Map<String, Object>> trace, String type, String message) {
         Map<String, Object> e = new LinkedHashMap<>();
         e.put("type", type);
         e.put("message", message);
         trace.add(e);
+        // Only the live SSE step feed matters once the build finishes — nothing
+        // reads the persisted trace afterward — so cap it rather than let a long
+        // build's dozens of SQL steps bloat dashboardConfig.
+        if (trace.size() > MAX_PERSISTED_TRACE_STEPS) trace.remove(0);
         try { l.step(type, message); } catch (Exception ignored) { }
     }
 
diff --git a/backend/src/main/java/com/dbaagent/service/DashboardAlertService.java b/backend/src/main/java/com/dbaagent/service/DashboardAlertService.java
new file mode 100644
index 0000000..fc5a4ec
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/service/DashboardAlertService.java
@@ -0,0 +1,210 @@
+package com.dbaagent.service;
+
+import com.dbaagent.model.DashboardAlert;
+import com.dbaagent.model.SavedDashboard;
+import com.dbaagent.repository.DashboardAlertRepository;
+import com.dbaagent.repository.SavedDashboardRepository;
+import jakarta.mail.MessagingException;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.time.Duration;
+import java.time.LocalDateTime;
+import java.util.Arrays;
+import java.util.List;
+import java.util.UUID;
+
+/**
+ * Evaluates a dashboard's natural-language alert condition on a schedule (see
+ * {@code DashboardAlertScheduler}) by handing the same DeepSQL agent that builds
+ * dashboards a single bounded task: run one read-only check and answer YES/NO.
+ *
+ * <p>No other dashboard tool can bolt an AI-authored condition onto arbitrary
+ * artifact HTML the way this works — the agent already has brain/schema context
+ * and a verified execute_sql tool; evaluating "alert if p95 latency > 2s" is the
+ * same grounded-SQL capability the dashboard-generation flow already exercises,
+ * just with a one-line answer instead of a whole HTML document.
+ */
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class DashboardAlertService {
+
+    private final DashboardAlertRepository alertRepository;
+    private final SavedDashboardRepository savedDashboardRepository;
+    private final AgentBridgeService agentBridgeService;
+    private final AgentChatClient agentChatClient;
+    private final EmailService emailService;
+    private final WebhookService webhookService;
+
+    @Transactional
+    public DashboardAlert createAlert(UUID dashboardId, String createdByUsername, DashboardAlert draft) {
+        requireConditionText(draft.getConditionText());
+        SavedDashboard dashboard = savedDashboardRepository.findById(dashboardId)
+            .orElseThrow(() -> new IllegalArgumentException("Dashboard not found with id: " + dashboardId));
+        DashboardAlert alert = new DashboardAlert();
+        alert.setDashboardId(dashboardId);
+        alert.setConnectionId(dashboard.getConnectionId());
+        alert.setCreatedByUsername(createdByUsername);
+        alert.setConditionText(draft.getConditionText());
+        if (draft.getChannels() != null) alert.setChannels(draft.getChannels());
+        alert.setEmailRecipients(draft.getEmailRecipients());
+        alert.setWebhookUrl(draft.getWebhookUrl());
+        if (draft.getCheckIntervalMinutes() != null) alert.setCheckIntervalMinutes(draft.getCheckIntervalMinutes());
+        if (draft.getCooldownMinutes() != null) alert.setCooldownMinutes(draft.getCooldownMinutes());
+        return alertRepository.save(alert);
+    }
+
+    public List<DashboardAlert> getAlertsForDashboard(UUID dashboardId) {
+        return alertRepository.findByDashboardIdOrderByCreatedAtDesc(dashboardId);
+    }
+
+    @Transactional
+    public DashboardAlert updateAlert(UUID alertId, DashboardAlert updates) {
+        DashboardAlert existing = requireAlert(alertId);
+        if (updates.getConditionText() != null) {
+            requireConditionText(updates.getConditionText());
+            existing.setConditionText(updates.getConditionText());
+        }
+        if (updates.getChannels() != null) existing.setChannels(updates.getChannels());
+        if (updates.getEmailRecipients() != null) existing.setEmailRecipients(updates.getEmailRecipients());
+        if (updates.getWebhookUrl() != null) existing.setWebhookUrl(updates.getWebhookUrl());
+        if (updates.getIsEnabled() != null) existing.setIsEnabled(updates.getIsEnabled());
+        if (updates.getCheckIntervalMinutes() != null) existing.setCheckIntervalMinutes(updates.getCheckIntervalMinutes());
+        if (updates.getCooldownMinutes() != null) existing.setCooldownMinutes(updates.getCooldownMinutes());
+        return alertRepository.save(existing);
+    }
+
+    @Transactional
+    public void deleteAlert(UUID alertId) {
+        alertRepository.deleteById(alertId);
+    }
+
+    private DashboardAlert requireAlert(UUID id) {
+        return alertRepository.findById(id)
+            .orElseThrow(() -> new IllegalArgumentException("Alert not found with id: " + id));
+    }
+
+    private void requireConditionText(String conditionText) {
+        if (conditionText == null || conditionText.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "conditionText is required");
+        }
+    }
+
+    // ── scheduled evaluation ────────────────────────────────────────────────
+
+    public List<DashboardAlert> findDue() {
+        return alertRepository.findDue(LocalDateTime.now());
+    }
+
+    /** Evaluate one alert: run the bounded agent check, record the result, dispatch if it fires. */
+    @Transactional
+    public void evaluate(UUID alertId) {
+        DashboardAlert alert = requireAlert(alertId);
+        alert.setLastCheckedAt(LocalDateTime.now());
+        try {
+            Verdict verdict = runCheck(alert);
+            alert.setLastVerdict(verdict.fired() ? "FIRED" : "OK");
+            alert.setLastReason(verdict.reason());
+            alert.setLastError(null);
+            if (verdict.fired() && canFire(alert)) {
+                dispatch(alert, verdict);
+                alert.setLastFiredAt(LocalDateTime.now());
+            }
+        } catch (Exception e) {
+            log.warn("Alert {} evaluation failed: {}", alertId, e.getMessage());
+            alert.setLastVerdict("ERROR");
+            alert.setLastError(e.getMessage() == null ? "evaluation failed" : e.getMessage());
+        } finally {
+            alertRepository.save(alert);
+        }
+    }
+
+    private boolean canFire(DashboardAlert alert) {
+        if (alert.getLastFiredAt() == null) return true;
+        long minutesSinceFired = Duration.between(alert.getLastFiredAt(), LocalDateTime.now()).toMinutes();
+        return minutesSinceFired >= alert.getCooldownMinutes();
+    }
+
+    private record Verdict(boolean fired, String reason) { }
+
+    private Verdict runCheck(DashboardAlert alert) {
+        String profile = agentBridgeService.ensureProfileForUser(alert.getCreatedByUsername(), alert.getConnectionId());
+        // Fresh, isolated session per check — not the owner's own chat thread, and
+        // never reused across evaluations (a stale multi-turn context is exactly
+        // wrong for "answer this one bounded question right now").
+        String sessionId = agentChatClient.ensureSession(profile, null);
+        if (sessionId == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_GATEWAY, "The DeepSQL agent is unavailable right now.");
+        }
+        AgentChatClient.AgentReply reply = agentChatClient.sendAndAwait(sessionId, buildCheckTask(alert));
+        if (!reply.ok()) {
+            throw new ResponseStatusException(HttpStatus.BAD_GATEWAY,
+                "The agent couldn't evaluate the condition: " + (reply.error() == null ? "it ended early" : reply.error()));
+        }
+        return parseVerdict(reply.text());
+    }
+
+    private String buildCheckTask(DashboardAlert alert) {
+        return """
+            Evaluate ONE alert condition for DeepSQL connection %s. This is a bounded, read-only
+            check — you do not need to build or edit any dashboard.
+
+            Condition: %s
+
+            Do this, in order:
+            1. Ground just enough to run the check: get_brain_context and/or get_schema only if you
+               need to find the right table/column. Obey any business rules about which table/column
+               a concept in the condition refers to.
+            2. Write ONE read-only SELECT (table-qualified columns) that directly answers whether the
+               condition is currently true. Run it with execute_sql and read the actual rows back —
+               do not guess or assume a result.
+            3. Decide: is the condition true right now, based on what the query actually returned?
+
+            Reply with EXACTLY two lines, nothing else — no other tool calls after your last one, no
+            markdown, no code fences:
+            YES or NO (whether the condition is true right now)
+            <one short sentence citing the actual number(s) you found, e.g. "p95 latency is 2.4s">
+            """.formatted(alert.getConnectionId(), alert.getConditionText());
+    }
+
+    private Verdict parseVerdict(String text) {
+        if (text == null || text.isBlank()) return new Verdict(false, "The agent returned no answer.");
+        String[] lines = text.trim().split("\\R", 2);
+        boolean fired = lines[0].trim().equalsIgnoreCase("YES");
+        String reason = lines.length > 1 ? lines[1].trim() : "";
+        return new Verdict(fired, reason.isBlank() ? (fired ? "Condition met." : "Condition not met.") : reason);
+    }
+
+    // ── dispatch ────────────────────────────────────────────────────────────
+
+    private void dispatch(DashboardAlert alert, Verdict verdict) {
+        SavedDashboard dashboard = savedDashboardRepository.findById(alert.getDashboardId()).orElse(null);
+        String dashboardName = dashboard == null ? "Dashboard" : dashboard.getName();
+        List<String> channels = Arrays.stream(alert.getChannels().split(","))
+            .map(String::trim).filter(s -> !s.isEmpty()).toList();
+
+        if (channels.contains("email") && alert.getEmailRecipients() != null && !alert.getEmailRecipients().isBlank()) {
+            List<String> recipients = Arrays.stream(alert.getEmailRecipients().split(","))
+                .map(String::trim).filter(s -> !s.isEmpty()).toList();
+            try {
+                emailService.sendDashboardAlert(dashboardName, alert.getConditionText(), verdict.reason(), recipients);
+            } catch (MessagingException e) {
+                log.error("Failed to email dashboard alert {}: {}", alert.getId(), e.getMessage());
+            }
+        }
+        if (channels.contains("webhook") && alert.getWebhookUrl() != null && !alert.getWebhookUrl().isBlank()) {
+            try {
+                webhookService.sendDashboardAlert(alert.getWebhookUrl(), dashboardName, alert.getConditionText(), verdict.reason());
+            } catch (Exception e) {
+                log.error("Failed to webhook dashboard alert {}: {}", alert.getId(), e.getMessage());
+            }
+        }
+        log.info("Dashboard alert fired: dashboard={} condition=\"{}\" reason=\"{}\"",
+            dashboardName, alert.getConditionText(), verdict.reason());
+    }
+}
diff --git a/backend/src/main/java/com/dbaagent/service/EmailService.java b/backend/src/main/java/com/dbaagent/service/EmailService.java
index cfcdb9f..5544b1b 100644
--- a/backend/src/main/java/com/dbaagent/service/EmailService.java
+++ b/backend/src/main/java/com/dbaagent/service/EmailService.java
@@ -124,6 +124,38 @@ public Map<String, Object> currentSettingsSummary() {
         return summary;
     }
 
+    public void sendDashboardAlert(String dashboardName, String condition, String reason, List<String> recipients) throws MessagingException {
+        JavaMailSenderImpl mailSender = buildMailSender();
+        MimeMessage message = mailSender.createMimeMessage();
+        MimeMessageHelper helper = new MimeMessageHelper(message, true, "UTF-8");
+
+        helper.setFrom(resolveFromEmail());
+        helper.setTo(recipients.toArray(new String[0]));
+        helper.setSubject("🔔 Dashboard alert: " + dashboardName);
+        helper.setText(buildDashboardAlertEmailHtml(dashboardName, condition, reason), true);
+
+        mailSender.send(message);
+        log.info("Dashboard alert email sent to {} recipients for dashboard: {}", recipients.size(), dashboardName);
+    }
+
+    private String buildDashboardAlertEmailHtml(String dashboardName, String condition, String reason) {
+        return "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"></head>"
+            + "<body style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">"
+            + "<div style=\"background-color: #f59e0b; color: white; padding: 20px; border-radius: 8px 8px 0 0;\">"
+            + "<h1 style=\"margin: 0;\">Dashboard alert</h1>"
+            + "<p style=\"margin: 5px 0 0 0; opacity: 0.9;\">" + escapeHtml(dashboardName) + "</p>"
+            + "</div>"
+            + "<div style=\"padding: 20px; background-color: #f9fafb; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px;\">"
+            + "<p style=\"margin: 0 0 8px;\"><strong>Condition:</strong> " + escapeHtml(condition) + "</p>"
+            + "<p style=\"margin: 0;\"><strong>Why it fired:</strong> " + escapeHtml(reason) + "</p>"
+            + "</div></body></html>";
+    }
+
+    private String escapeHtml(String s) {
+        if (s == null) return "";
+        return s.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;");
+    }
+
     public void sendTestEmail(String recipient) throws MessagingException {
         JavaMailSenderImpl mailSender = buildMailSender();
         MimeMessage message = mailSender.createMimeMessage();
diff --git a/backend/src/main/java/com/dbaagent/service/SavedDashboardService.java b/backend/src/main/java/com/dbaagent/service/SavedDashboardService.java
index 83f17d6..beab8bd 100644
--- a/backend/src/main/java/com/dbaagent/service/SavedDashboardService.java
+++ b/backend/src/main/java/com/dbaagent/service/SavedDashboardService.java
@@ -1,6 +1,8 @@
 package com.dbaagent.service;
 
+import com.dbaagent.model.DashboardVersion;
 import com.dbaagent.model.SavedDashboard;
+import com.dbaagent.repository.DashboardVersionRepository;
 import com.dbaagent.repository.SavedDashboardRepository;
 import com.fasterxml.jackson.core.type.TypeReference;
 import com.fasterxml.jackson.databind.ObjectMapper;
@@ -30,9 +32,16 @@ public class SavedDashboardService {
     // a legitimate retry forever — only respected while still fresh.
     private static final Duration STALE_RUNNING_THRESHOLD = Duration.ofMinutes(20);
 
+    // Bound history growth — a dashboard iterated on for months shouldn't carry an
+    // unbounded snapshot table. Oldest beyond this count are pruned on each write.
+    private static final int MAX_VERSIONS_PER_DASHBOARD = 50;
+
     @Autowired
     private SavedDashboardRepository savedDashboardRepository;
 
+    @Autowired
+    private DashboardVersionRepository dashboardVersionRepository;
+
     @Autowired
     private ObjectMapper objectMapper;
 
@@ -121,7 +130,10 @@ public SavedDashboard updateDashboard(UUID id, SavedDashboard updates) {
         if (updates.getDescription() != null) {
             existing.setDescription(updates.getDescription());
         }
-        if (updates.getDashboardConfig() != null) {
+        if (updates.getDashboardConfig() != null && !updates.getDashboardConfig().equals(existing.getDashboardConfig())) {
+            if (hasRealBuild(existing)) {
+                snapshotVersion(existing, "MANUAL_EDIT");
+            }
             existing.setDashboardConfig(updates.getDashboardConfig());
         }
         if (updates.getChatMessages() != null) {
@@ -135,8 +147,10 @@ public SavedDashboard updateDashboard(UUID id, SavedDashboard updates) {
         if (updates.getIsFavorite() != null) {
             existing.setIsFavorite(updates.getIsFavorite());
         }
+        // Blank clears the folder (moves back to "no folder") — distinguished from
+        // null, which means the update omitted this field entirely.
         if (updates.getFolder() != null) {
-            existing.setFolder(updates.getFolder());
+            existing.setFolder(updates.getFolder().isBlank() ? null : updates.getFolder());
         }
 
         return savedDashboardRepository.save(existing);
@@ -224,6 +238,86 @@ public void deleteDashboard(UUID id) {
         savedDashboardRepository.deleteById(id);
     }
 
+    /** Duplicate a dashboard (fresh id, not shared, not a favorite) as a starting point to iterate on. */
+    @Transactional
+    public SavedDashboard cloneDashboard(UUID id) {
+        SavedDashboard source = requireDashboard(id);
+        SavedDashboard copy = new SavedDashboard();
+        copy.setConnectionId(source.getConnectionId());
+        copy.setUserId(source.getUserId());
+        copy.setName(source.getName() == null ? "Untitled copy" : source.getName() + " (copy)");
+        copy.setDescription(source.getDescription());
+        copy.setDashboardConfig(source.getDashboardConfig());
+        copy.setChatMessages(source.getChatMessages());
+        copy.setTags(source.getTags());
+        copy.setFolder(source.getFolder());
+        copy.setIsFavorite(false);
+        copy.setIsPublic(false);
+        return savedDashboardRepository.save(copy);
+    }
+
+    /** True once a dashboard has an actual rendered artifact, not just the initial placeholder. */
+    private boolean hasRealBuild(SavedDashboard dashboard) {
+        String cfg = dashboard.getDashboardConfig();
+        return cfg != null && !cfg.isBlank() && !cfg.equals("{}") && cfg.contains("\"html\"");
+    }
+
+    private void snapshotVersion(SavedDashboard dashboard, String trigger) {
+        DashboardVersion version = new DashboardVersion();
+        version.setDashboardId(dashboard.getId());
+        version.setDashboardConfig(dashboard.getDashboardConfig());
+        version.setName(dashboard.getName());
+        version.setTrigger(trigger);
+        dashboardVersionRepository.save(version);
+        pruneOldVersions(dashboard.getId());
+    }
+
+    private void pruneOldVersions(UUID dashboardId) {
+        List<DashboardVersion> versions = dashboardVersionRepository.findByDashboardIdOrderByCreatedAtDesc(dashboardId);
+        if (versions.size() > MAX_VERSIONS_PER_DASHBOARD) {
+            dashboardVersionRepository.deleteAll(versions.subList(MAX_VERSIONS_PER_DASHBOARD, versions.size()));
+        }
+    }
+
+    /** History for a dashboard, most recent first. */
+    public List<DashboardVersion> getVersionHistory(UUID dashboardId) {
+        return dashboardVersionRepository.findByDashboardIdOrderByCreatedAtDesc(dashboardId);
+    }
+
+    /**
+     * Restore a prior snapshot as the current config — snapshots what's live now first, so
+     * restoring is itself undoable.
+     *
+     * <p>The restored version's own row (and any other row with byte-identical content —
+     * an earlier restore of the same snapshot) is then deleted: that content is now the
+     * live config, not history, so leaving it in the list would show it twice — once as
+     * "Current" and again as a stale history entry a user could re-restore into a no-op.
+     * A flip-flop restore-edit-restore-edit session otherwise piles up an alternating
+     * chain of identical snapshots, one pair per cycle.
+     */
+    @Transactional
+    public SavedDashboard restoreVersion(UUID dashboardId, UUID versionId) {
+        SavedDashboard dashboard = requireDashboard(dashboardId);
+        DashboardVersion version = dashboardVersionRepository.findById(versionId)
+            .orElseThrow(() -> new IllegalArgumentException("Version not found with id: " + versionId));
+        if (!version.getDashboardId().equals(dashboardId)) {
+            throw new IllegalArgumentException("Version does not belong to dashboard: " + dashboardId);
+        }
+        if (hasRealBuild(dashboard)) {
+            snapshotVersion(dashboard, "RESTORE");
+        }
+        String restoredConfig = version.getDashboardConfig();
+        dashboard.setDashboardConfig(restoredConfig);
+        SavedDashboard saved = savedDashboardRepository.save(dashboard);
+        List<DashboardVersion> duplicates = dashboardVersionRepository.findByDashboardIdOrderByCreatedAtDesc(dashboardId).stream()
+            .filter(v -> v.getDashboardConfig().equals(restoredConfig))
+            .toList();
+        if (!duplicates.isEmpty()) {
+            dashboardVersionRepository.deleteAll(duplicates);
+        }
+        return saved;
+    }
+
     /**
      * Delete all dashboards for a connection
      */
@@ -302,6 +396,9 @@ public SavedDashboard appendAgentReply(UUID dashboardId, String replyText) {
     @Transactional
     public SavedDashboard completeBuildTurn(UUID dashboardId, Map<String, Object> config) {
         SavedDashboard dashboard = requireDashboard(dashboardId);
+        if (hasRealBuild(dashboard)) {
+            snapshotVersion(dashboard, "AGENT_BUILD");
+        }
         try {
             dashboard.setDashboardConfig(objectMapper.writeValueAsString(config));
         } catch (Exception e) {
diff --git a/backend/src/main/java/com/dbaagent/service/WebhookService.java b/backend/src/main/java/com/dbaagent/service/WebhookService.java
index 20f2b8e..e9a330c 100644
--- a/backend/src/main/java/com/dbaagent/service/WebhookService.java
+++ b/backend/src/main/java/com/dbaagent/service/WebhookService.java
@@ -131,6 +131,43 @@ private String formatBytes(Long bytes) {
         return String.format("%.2f GB", bytes / (1024.0 * 1024 * 1024));
     }
 
+    /**
+     * Send a fired dashboard alert to a webhook (including Slack incoming-webhook URLs).
+     */
+    public void sendDashboardAlert(String webhookUrl, String dashboardName, String condition, String reason) {
+        Map<String, Object> payload = buildDashboardAlertPayload(dashboardName, condition, reason);
+
+        try {
+            webClient.post()
+                    .uri(webhookUrl)
+                    .bodyValue(payload)
+                    .retrieve()
+                    .bodyToMono(String.class)
+                    .timeout(Duration.ofSeconds(10))
+                    .doOnSuccess(response -> log.info("Webhook dashboard alert sent successfully for: {}", dashboardName))
+                    .doOnError(error -> log.error("Webhook dashboard alert failed for: {}", dashboardName, error))
+                    .subscribe(); // Fire and forget
+        } catch (Exception e) {
+            log.error("Failed to send webhook dashboard alert for: {}", dashboardName, e);
+            throw new RuntimeException("Webhook dashboard alert failed", e);
+        }
+    }
+
+    private Map<String, Object> buildDashboardAlertPayload(String dashboardName, String condition, String reason) {
+        Map<String, Object> payload = new HashMap<>();
+        payload.put("event_type", "dashboard_alert");
+        payload.put("dashboard_name", dashboardName);
+        payload.put("condition", condition);
+        payload.put("reason", reason);
+        payload.put("text", String.format("🔔 Dashboard alert: %s\nCondition: %s\n%s", dashboardName, condition, reason));
+        payload.put("blocks", java.util.List.of(
+            Map.of("type", "header", "text", Map.of("type", "plain_text", "text", "🔔 " + dashboardName, "emoji", true)),
+            Map.of("type", "section", "text", Map.of("type", "mrkdwn",
+                "text", "*Condition:* " + condition + "\n*Why it fired:* " + reason))
+        ));
+        return payload;
+    }
+
     /**
      * Send slow query alert to webhook (including Slack)
      */
diff --git a/backend/src/main/java/com/dbaagent/service/scheduler/DashboardAlertTaskConfig.java b/backend/src/main/java/com/dbaagent/service/scheduler/DashboardAlertTaskConfig.java
new file mode 100644
index 0000000..cefc956
--- /dev/null
+++ b/backend/src/main/java/com/dbaagent/service/scheduler/DashboardAlertTaskConfig.java
@@ -0,0 +1,42 @@
+package com.dbaagent.service.scheduler;
+
+import com.dbaagent.model.DashboardAlert;
+import com.dbaagent.service.DashboardAlertService;
+import com.github.kagkarlsson.scheduler.task.Task;
+import com.github.kagkarlsson.scheduler.task.helper.Tasks;
+import com.github.kagkarlsson.scheduler.task.schedule.Schedules;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Profile;
+
+/**
+ * Ticks every minute and evaluates whichever dashboard alerts are actually due
+ * (each alert carries its own check_interval_minutes — see
+ * DashboardAlertRepository.findDue) rather than registering one scheduled task
+ * per alert, which would mean re-registering db-scheduler tasks on every
+ * create/edit/delete. One alert's agent call failing is caught and logged inside
+ * DashboardAlertService.evaluate — it never aborts the rest of this tick's batch.
+ */
+@Configuration
+@Profile("!test")
+@Slf4j
+public class DashboardAlertTaskConfig {
+
+    @Bean
+    Task<Void> dashboardAlertTickTask(
+            DashboardAlertService alertService,
+            @Value("${dashboard.alert.tick-cron:0 * * * * *}") String cron) {
+        return Tasks.recurring("dashboard-alert-tick", Schedules.cron(cron))
+            .execute((inst, ctx) -> {
+                for (DashboardAlert alert : alertService.findDue()) {
+                    try {
+                        alertService.evaluate(alert.getId());
+                    } catch (Exception e) {
+                        log.warn("Dashboard alert tick failed for alert {}: {}", alert.getId(), e.getMessage());
+                    }
+                }
+            });
+    }
+}
diff --git a/backend/src/main/java/com/dbaagent/service/security/AccessControlService.java b/backend/src/main/java/com/dbaagent/service/security/AccessControlService.java
index d5dcd3e..ecefb6e 100644
--- a/backend/src/main/java/com/dbaagent/service/security/AccessControlService.java
+++ b/backend/src/main/java/com/dbaagent/service/security/AccessControlService.java
@@ -69,7 +69,11 @@ public void assertCanManageConnectionConfig(String connectionId) {
 
     public ConnectionAccessService.ResolvedConnectionAccess resolveCurrentUserAccess(String connectionId) {
         if (!authEnabled) {
-            return connectionAccessService.resolveAccess(connectionId, null, true);
+            try {
+                return connectionAccessService.resolveAccess(connectionId, null, true);
+            } catch (RuntimeException e) {
+                throw new ResponseStatusException(NOT_FOUND, "Connection not found");
+            }
         }
         Authentication authentication = currentAuthentication();
         if (authentication == null || !authentication.isAuthenticated()) {
diff --git a/backend/src/main/resources/db/migration/V113__create_dashboard_versions.sql b/backend/src/main/resources/db/migration/V113__create_dashboard_versions.sql
new file mode 100644
index 0000000..48c2dd7
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V113__create_dashboard_versions.sql
@@ -0,0 +1,10 @@
+CREATE TABLE dashboard_versions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    dashboard_id UUID NOT NULL REFERENCES saved_dashboards(id) ON DELETE CASCADE,
+    dashboard_config TEXT NOT NULL,
+    name VARCHAR(255),
+    trigger VARCHAR(32) NOT NULL,
+    created_at TIMESTAMP NOT NULL DEFAULT now()
+);
+
+CREATE INDEX idx_dashboard_versions_dashboard_id ON dashboard_versions(dashboard_id, created_at DESC);
diff --git a/backend/src/main/resources/db/migration/V114__create_dashboard_alerts.sql b/backend/src/main/resources/db/migration/V114__create_dashboard_alerts.sql
new file mode 100644
index 0000000..232acaa
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V114__create_dashboard_alerts.sql
@@ -0,0 +1,23 @@
+CREATE TABLE dashboard_alerts (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    dashboard_id UUID NOT NULL REFERENCES saved_dashboards(id) ON DELETE CASCADE,
+    connection_id VARCHAR(255) NOT NULL,
+    created_by_username VARCHAR(255) NOT NULL,
+    condition_text TEXT NOT NULL,
+    channels VARCHAR(255) NOT NULL DEFAULT 'in-app',
+    email_recipients VARCHAR(1000),
+    webhook_url VARCHAR(1000),
+    is_enabled BOOLEAN NOT NULL DEFAULT true,
+    check_interval_minutes INT NOT NULL DEFAULT 15,
+    cooldown_minutes INT NOT NULL DEFAULT 60,
+    last_checked_at TIMESTAMP,
+    last_fired_at TIMESTAMP,
+    last_verdict VARCHAR(16),
+    last_reason TEXT,
+    last_error TEXT,
+    created_at TIMESTAMP NOT NULL DEFAULT now(),
+    updated_at TIMESTAMP NOT NULL DEFAULT now()
+);
+
+CREATE INDEX idx_dashboard_alerts_dashboard_id ON dashboard_alerts(dashboard_id);
+CREATE INDEX idx_dashboard_alerts_due ON dashboard_alerts(is_enabled, last_checked_at);
diff --git a/src/components/AgentChat/AgentChatPanel.jsx b/src/components/AgentChat/AgentChatPanel.jsx
index 1a12733..3f80130 100644
--- a/src/components/AgentChat/AgentChatPanel.jsx
+++ b/src/components/AgentChat/AgentChatPanel.jsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { ArrowUp, Plus, Square, Loader2, Database } from 'lucide-react'
+import { ArrowUp, Plus, Square, Loader2, Database, Sparkles, Hash, Table2, Clock, AlertCircle } from 'lucide-react'
 import { agentChatAPI, withConnectionContext } from '@/lib/api/agentClient'
 import { agentConversationAPI } from '@/lib/api/client'
 import AgentMarkdown from './AgentMarkdown'
@@ -35,9 +35,9 @@ function deriveTitle(messages) {
 // a domain-specific table/column name here (see the chat guardrail in
 // AGENTS.md); AgentChatPanel has no idea what tables the active connection has.
 const SUGGESTIONS = [
-  'How many tables are there?',
-  'Show the largest tables',
-  'What are the top slow queries?',
+  { icon: Hash, text: 'How many tables are there?' },
+  { icon: Table2, text: 'Show the largest tables' },
+  { icon: Clock, text: 'What are the top slow queries?' },
 ]
 
 export default function AgentChatPanel({ connectionId, connectionName }) {
@@ -197,15 +197,36 @@ export default function AgentChatPanel({ connectionId, connectionName }) {
       </header>
 
       <div className={styles.messages} ref={listRef}>
-        {booting && <div className={styles.notice}><Loader2 size={14} className={styles.spin} /> Starting your agent…</div>}
-        {bootError && <div className={styles.error}>{bootError} <button onClick={() => boot()} className={styles.retry}>Retry</button></div>}
+        {booting && (
+          <div className={styles.bootState}>
+            <span className={styles.bootIcon}><Loader2 size={18} className={styles.spin} /></span>
+            <span className={styles.bootText}>Starting your agent…</span>
+          </div>
+        )}
+        {bootError && (
+          <div className={styles.errorState}>
+            <span className={styles.errorIcon}><AlertCircle size={18} /></span>
+            <span className={styles.errorText}>{bootError}</span>
+            <button onClick={() => boot()} className={styles.retry}>Retry</button>
+          </div>
+        )}
 
         {!booting && !bootError && messages.length === 0 && (
           <div className={styles.empty}>
-            <div className={styles.emptyTitle}>Ask about your database</div>
+            <span className={styles.emptyIcon}><Sparkles size={22} color="#534AB7" /></span>
+            <h2 className={styles.emptyTitle}>Ask about your database</h2>
+            <p className={styles.emptySub}>Get instant answers grounded on your schema, live data, and query history.</p>
             <div className={styles.suggestions}>
-              {SUGGESTIONS.map((s) => (
-                <button key={s} className={styles.suggestion} onClick={() => send(s)}>{s}</button>
+              {SUGGESTIONS.map(({ icon: Icon, text }, i) => (
+                <button
+                  key={text}
+                  className={styles.suggestion}
+                  style={{ '--stagger': i }}
+                  onClick={() => send(text)}
+                >
+                  <span className={styles.suggestionIcon}><Icon size={14} /></span>
+                  {text}
+                </button>
               ))}
             </div>
           </div>
@@ -234,20 +255,22 @@ export default function AgentChatPanel({ connectionId, connectionName }) {
       </div>
 
       <div className={styles.composer}>
-        <textarea
-          className={styles.textarea}
-          placeholder={authBlocked ? 'Agent unavailable — reconnect above' : sessionId ? 'Message the DeepSQL Agent…' : 'Starting…'}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={onKeyDown}
-          rows={1}
-          disabled={!sessionId || booting || authBlocked}
-        />
-        {sending ? (
-          <button className={styles.stopBtn} onClick={stop} title="Stop"><Square size={15} /></button>
-        ) : (
-          <button className={styles.sendBtn} onClick={() => send()} disabled={!input.trim() || !sessionId || authBlocked} title="Send"><ArrowUp size={16} /></button>
-        )}
+        <div className={styles.composerInner}>
+          <textarea
+            className={styles.textarea}
+            placeholder={authBlocked ? 'Agent unavailable — reconnect above' : sessionId ? 'Message the DeepSQL Agent…' : 'Starting…'}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            rows={1}
+            disabled={!sessionId || booting || authBlocked}
+          />
+          {sending ? (
+            <button className={styles.stopBtn} onClick={stop} title="Stop"><Square size={15} /></button>
+          ) : (
+            <button className={styles.sendBtn} onClick={() => send()} disabled={!input.trim() || !sessionId || authBlocked} title="Send"><ArrowUp size={16} /></button>
+          )}
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/AgentChat/AgentChatPanel.module.css b/src/components/AgentChat/AgentChatPanel.module.css
index 6b56d3d..dd758c4 100644
--- a/src/components/AgentChat/AgentChatPanel.module.css
+++ b/src/components/AgentChat/AgentChatPanel.module.css
@@ -10,59 +10,158 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 20px;
-  border-bottom: 1px solid #eceff3;
+  height: 52px;
   flex-shrink: 0;
+  padding: 0 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  position: relative;
+  z-index: 5;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
-.title { font-size: 14px; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
-.headerRight { display: flex; align-items: center; gap: 12px; }
+
+.title { font-size: 14px; font-weight: 590; color: #111; letter-spacing: -0.006em; }
+.headerRight { display: flex; align-items: center; gap: 10px; }
 .connBadge {
   display: inline-flex; align-items: center; gap: 5px;
-  font-size: 11px; color: #6b7280; background: #f7f7f7;
-  border: 1px solid #eceff3; border-radius: 6px; padding: 3px 8px;
+  font-size: 11.5px; font-weight: 500; color: #555; background: #f7f7f7;
+  border: 1px solid #ececec; border-radius: 999px; padding: 4px 10px;
 }
+.connBadge svg { flex-shrink: 0; color: #534AB7; }
+
 .newChat {
   display: inline-flex; align-items: center; gap: 5px;
-  font-size: 12px; color: #374151; background: #fff;
-  border: 1px solid #e5e7eb; border-radius: 6px; padding: 5px 10px; cursor: pointer;
+  height: 30px;
+  font-size: 12.5px; font-weight: 500; color: #333; background: #fff;
+  border: 1px solid #e2e2e2; border-radius: 7px; padding: 0 11px; cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+.newChat:hover:not(:disabled) { background: #f6f6f6; }
+.newChat:active:not(:disabled) { transform: scale(0.96); }
+.newChat:disabled { opacity: 0.45; cursor: default; }
+@media (prefers-reduced-motion: reduce) {
+  .newChat { transition: background 120ms ease-out; }
+  .newChat:active { transform: none; }
 }
-.newChat:hover { background: #f7f7f7; }
-.newChat:disabled { opacity: 0.4; cursor: default; }
 
 .messages { flex: 1; overflow-y: auto; padding: 24px 0; scroll-behavior: smooth; }
 
-.notice, .error {
-  max-width: 720px; margin: 0 auto; padding: 10px 20px;
-  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280;
+.bootState {
+  max-width: 720px; margin: 96px auto 0; padding: 0 20px;
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+  animation: fadeIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.bootIcon { color: #534AB7; }
+.bootText { font-size: 13.5px; color: #777; }
+
+.errorState {
+  max-width: 560px; margin: 96px auto 0; padding: 18px 20px;
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  text-align: center;
+  background: #fdf2f2; border: 1px solid #f6d5d5; border-radius: 14px;
+  animation: fadeIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.errorIcon { color: #b42318; }
+.errorText { font-size: 13.5px; line-height: 1.5; color: #9c2b2b; }
+.retry {
+  margin-top: 2px; border: 1px solid #f0c2c2; background: #fff; color: #9c2b2b;
+  border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 12.5px; font-weight: 500;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
-.error { color: #b42318; }
-.retry { margin-left: 8px; border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
+.retry:hover { background: #fdf2f2; }
+.retry:active { transform: scale(0.96); }
+@media (prefers-reduced-motion: reduce) { .retry { transition: background 120ms ease-out; } .retry:active { transform: none; } }
+
 .spin { animation: spin 1s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .bootState, .errorState { animation: none; }
+}
 
-.empty { max-width: 720px; margin: 48px auto; text-align: center; padding: 0 20px; }
-.emptyTitle { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 20px; }
-.suggestions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
+.empty {
+  max-width: 640px; margin: 0 auto; padding: 64px 20px 0;
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  animation: fadeIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.emptyIcon {
+  width: 48px; height: 48px; border-radius: 13px;
+  background: #EEEDFE; display: flex; align-items: center; justify-content: center;
+  margin-bottom: 16px; box-shadow: 0 1px 2px rgba(83, 74, 183, 0.08);
+}
+.emptyTitle { font-size: 19px; font-weight: 650; letter-spacing: -0.014em; color: #111; margin: 0 0 8px; }
+.emptySub { font-size: 13.5px; color: #777; line-height: 1.55; max-width: 380px; margin: 0 0 24px; }
+
+.suggestions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; max-width: 440px; }
 .suggestion {
-  text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
-  padding: 12px 14px; font-size: 13px; color: #374151; cursor: pointer; transition: background .12s;
+  display: flex; align-items: center; gap: 10px;
+  text-align: left; background: #fff; border: 1px solid #ececec; border-radius: 12px;
+  padding: 12px 14px; font-size: 13.5px; color: #333; cursor: pointer;
+  transition: border-color 180ms ease-out, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease-out;
+  animation: suggestionIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+  animation-delay: calc(var(--stagger, 0) * 60ms);
+}
+.suggestion:hover {
+  border-color: #cfcaf0;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 14px -8px rgba(83, 74, 183, 0.25), 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+.suggestion:active { transform: translateY(0) scale(0.99); }
+@keyframes suggestionIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .suggestion { transition: border-color 180ms ease-out; animation: none; }
+  .suggestion:hover, .suggestion:active { transform: none; }
 }
-.suggestion:hover { background: #f7f7f7; border-color: #d1d5db; }
 
-.msgUser, .msgAssistant { max-width: 720px; margin: 0 auto 18px; padding: 0 20px; }
+.suggestionIcon {
+  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
+  background: #EEEDFE; color: #534AB7;
+  display: flex; align-items: center; justify-content: center;
+}
+
+.msgUser, .msgAssistant { max-width: 720px; margin: 0 auto 18px; padding: 0 20px; animation: msgIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 .msgUser { display: flex; justify-content: flex-end; }
+@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .msgUser, .msgAssistant { animation: none; }
+}
+
 .userBubble {
-  background: #111827; color: #fff; border-radius: 14px 14px 4px 14px;
+  background: #534AB7; color: #fff; border-radius: 14px 14px 4px 14px;
   padding: 10px 14px; font-size: 13.5px; line-height: 1.5; max-width: 80%; white-space: pre-wrap;
+  box-shadow: 0 1px 2px rgba(83, 74, 183, 0.18);
 }
 .assistantBody { font-size: 13.5px; line-height: 1.6; color: #111827; }
 
-.activity { margin-bottom: 8px; font-size: 12px; color: #6b7280; }
-.activity summary { cursor: pointer; color: #6b7280; user-select: none; }
-.activity ul { margin: 6px 0 4px; padding-left: 16px; list-style: none; }
+.activity {
+  margin-bottom: 10px; font-size: 12px; color: #777;
+  border: 1px solid #ececec; border-radius: 10px; background: #fafafa;
+  padding: 9px 12px;
+}
+.activity summary {
+  cursor: pointer; color: #555; user-select: none; font-weight: 500;
+  display: flex; align-items: center; gap: 7px;
+  list-style: none;
+}
+.activity summary::-webkit-details-marker { display: none; }
+.activity summary::before {
+  content: '';
+  width: 6px; height: 6px; border-radius: 50%;
+  background: #534AB7; flex-shrink: 0;
+}
+.activity[open] summary::before { animation: activityPulse 1.4s ease-in-out infinite; }
+@keyframes activityPulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
+.activity ul { margin: 8px 0 2px; padding-left: 13px; list-style: none; }
 .activity li {
   font-family: var(--font-family-mono, ui-monospace, Menlo, monospace);
-  font-size: 11.5px; color: #6b7280; padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 11.5px; color: #888; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .activity[open] summary::before { animation: none; opacity: 0.9; }
 }
 
 .markdown :global(p) { margin: 0 0 10px; }
@@ -168,27 +267,59 @@
 .msgError { font-size: 12px; color: #b42318; margin-top: 6px; }
 
 .typing { display: inline-flex; gap: 4px; padding: 4px 0; }
-.typing span { width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; animation: blink 1.2s infinite both; }
+.typing span { width: 6px; height: 6px; border-radius: 50%; background: #cfcaf0; animation: blink 1.2s infinite both; }
 .typing span:nth-child(2) { animation-delay: .2s; }
 .typing span:nth-child(3) { animation-delay: .4s; }
-@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
+@keyframes blink { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .typing span { animation: none; opacity: 0.7; }
+}
 
 .composer {
-  flex-shrink: 0; border-top: 1px solid #eceff3; padding: 14px 20px;
-  display: flex; align-items: flex-end; gap: 10px;
-  max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box;
+  flex-shrink: 0; padding: 14px 20px;
+  display: flex; justify-content: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(250, 250, 250, 0.75);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .composer { background: #fafafa; backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+
+.composerInner {
+  display: flex; align-items: flex-end; gap: 8px;
+  max-width: 760px; width: 100%; box-sizing: border-box;
+  padding: 8px;
+  border: 1px solid #e2e2e2; border-radius: 16px; background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
 }
+.composerInner:focus-within {
+  border-color: #534AB7;
+  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12);
+}
+
 .textarea {
-  flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 12px;
-  padding: 11px 14px; font-size: 13.5px; line-height: 1.5; font-family: inherit;
-  max-height: 160px; outline: none; color: #111827;
+  flex: 1; resize: none; border: none; background: transparent;
+  padding: 8px 8px; font-size: 13.5px; line-height: 1.5; font-family: inherit;
+  max-height: 160px; outline: none; color: #111;
 }
-.textarea:focus { border-color: #111827; }
-.textarea:disabled { background: #fafafa; }
+.textarea::placeholder { color: #a3a3a3; }
+.textarea:disabled { color: #999; }
 .sendBtn, .stopBtn {
   width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
   display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
-.sendBtn { background: #111827; }
-.sendBtn:disabled { background: #d1d5db; cursor: default; }
+.sendBtn { background: #534AB7; }
+.sendBtn:hover:not(:disabled) { background: #463c9f; }
+.sendBtn:active:not(:disabled) { transform: scale(0.9); }
+.sendBtn:disabled { background: #d8d5f0; cursor: default; }
 .stopBtn { background: #b42318; }
+.stopBtn:hover { background: #9c1e14; }
+.stopBtn:active { transform: scale(0.9); }
+@media (prefers-reduced-motion: reduce) {
+  .sendBtn, .stopBtn { transition: background 120ms ease-out; }
+  .sendBtn:active, .stopBtn:active { transform: none; }
+}
diff --git a/src/components/DashboardArtifact.jsx b/src/components/DashboardArtifact.jsx
index 206439a..e6a7844 100644
--- a/src/components/DashboardArtifact.jsx
+++ b/src/components/DashboardArtifact.jsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, useState } from 'react'
+import { useRef, useEffect, useCallback, useState, useImperativeHandle, forwardRef } from 'react'
 import { dashboardQueryAPI } from '@/lib/api/client'
 import { THEME_CSS } from './dashboardTheme'
 import { CHART_JS } from './dashboardChartLib'
@@ -52,10 +52,65 @@ const BRIDGE = `
   window.addEventListener('load', function(){
     reportHeight();
     try { new ResizeObserver(reportHeight).observe(document.body); } catch(e){}
+    // Progressive build: an empty [data-widget] slot is otherwise just a static
+    // blank box until its widget chunk arrives. A shimmer says "this is loading,"
+    // not "this is broken" — applied as an injected class so it works regardless
+    // of the agent's own CSS, and self-removes the instant mount-widget fills the
+    // slot (its innerHTML write replaces this shimmer content entirely).
+    try {
+      var style = document.createElement('style');
+      style.textContent = '@keyframes dsqlShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}'
+        + '.dsql-widget-loading{min-height:80px;border-radius:inherit;'
+        + 'background:linear-gradient(90deg,rgba(0,0,0,0.04) 25%,rgba(0,0,0,0.08) 37%,rgba(0,0,0,0.04) 63%);'
+        + 'background-size:200% 100%;animation:dsqlShimmer 1.4s ease-in-out infinite}'
+        + '@media (prefers-reduced-motion: reduce){.dsql-widget-loading{animation:none;background:rgba(0,0,0,0.04)}}';
+      document.head.appendChild(style);
+      document.querySelectorAll('[data-widget]').forEach(function(el){
+        if (!el.innerHTML.trim()) el.classList.add('dsql-widget-loading');
+      });
+    } catch(e){}
   });
   window.addEventListener('error', function(e){
     send({ __deepsql:true, type:'jserror', message: (e && e.message) || 'script error' });
   });
+  // Progressive build: the parent injects one verified widget at a time into its
+  // [data-widget] slot instead of reloading the whole document. innerHTML does not
+  // execute <script> tags, so each one is re-created and appended in place —
+  // that's the only way to run script content assigned via innerHTML. The fade+
+  // rise transition is applied here (inline style, not a class) so it works
+  // regardless of what CSS the agent's own shell defines, and is skipped
+  // entirely under prefers-reduced-motion.
+  var reduceMotion = false;
+  try { reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch(e){}
+  window.addEventListener('message', function(e){
+    var d = e.data;
+    if (!d || d.__deepsql !== true || d.type !== 'mount-widget') return;
+    var slot = document.querySelector('[data-widget="' + d.id + '"]');
+    if (!slot) return;
+    slot.classList.remove('dsql-widget-loading');
+    slot.innerHTML = d.html;
+    var scripts = slot.querySelectorAll('script');
+    for (var i = 0; i < scripts.length; i++) {
+      var old = scripts[i];
+      var fresh = document.createElement('script');
+      for (var j = 0; j < old.attributes.length; j++) {
+        fresh.setAttribute(old.attributes[j].name, old.attributes[j].value);
+      }
+      fresh.textContent = old.textContent;
+      old.parentNode.replaceChild(fresh, old);
+    }
+    if (!reduceMotion) {
+      slot.style.opacity = '0';
+      slot.style.transform = 'translateY(8px)';
+      slot.style.transition = 'opacity 420ms cubic-bezier(0.2,0.8,0.2,1), transform 420ms cubic-bezier(0.2,0.8,0.2,1)';
+      requestAnimationFrame(function(){
+        requestAnimationFrame(function(){
+          slot.style.opacity = '1';
+          slot.style.transform = 'translateY(0)';
+        });
+      });
+    }
+  });
 })();
 `
 
@@ -97,10 +152,11 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
 const REDUCED_MOTION = typeof window !== 'undefined'
   && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
 
-export default function DashboardArtifact({ connectionId, html, onError, queryFn, onQuery }) {
+const DashboardArtifact = forwardRef(function DashboardArtifact({ connectionId, html, onError, queryFn, onQuery }, ref) {
   const iframeRef = useRef(null)
   const [height, setHeight] = useState(600)
   const [loaded, setLoaded] = useState(false)
+  const [reloadEpoch, setReloadEpoch] = useState(0)
   const queueRef = useRef([])
   const inflightRef = useRef(0)
   const totalRef = useRef(0)
@@ -121,6 +177,36 @@ export default function DashboardArtifact({ connectionId, html, onError, queryFn
     iframeRef.current?.contentWindow?.postMessage(msg, '*')
   }
 
+  // Progressive build: DashboardWorkspace calls this as each dashboard-widget
+  // chunk arrives over SSE, well before the whole generation turn finishes.
+  // Mounting is the iframe's own job (see the bridge's 'mount-widget' handler,
+  // which also re-executes the widget's <script>) — this just forwards the call.
+  // A widget can arrive before the shell's onLoad fires (SSE is faster than a
+  // fresh iframe document parse+load); queue it and flush once loaded instead
+  // of posting into a contentWindow whose [data-widget] slots don't exist yet.
+  const pendingWidgetsRef = useRef([])
+  useImperativeHandle(ref, () => ({
+    mountWidget(id, widgetHtml) {
+      if (!loaded) { pendingWidgetsRef.current.push([id, widgetHtml]); return }
+      post({ __deepsql: true, type: 'mount-widget', id, html: widgetHtml })
+    },
+    // Re-run every widget's query from scratch — bumping the srcDoc-driving key
+    // forces a full iframe remount (changing srcDoc's string content alone isn't
+    // enough to guarantee a reload if html happens to be referentially unchanged).
+    reload() {
+      setReloadEpoch((e) => e + 1)
+    },
+  }), [loaded])
+
+  useEffect(() => {
+    if (!loaded || pendingWidgetsRef.current.length === 0) return
+    const queued = pendingWidgetsRef.current
+    pendingWidgetsRef.current = []
+    for (const [id, widgetHtml] of queued) {
+      post({ __deepsql: true, type: 'mount-widget', id, html: widgetHtml })
+    }
+  }, [loaded])
+
   const pump = useCallback(() => {
     while (inflightRef.current < MAX_CONCURRENT && queueRef.current.length > 0) {
       const job = queueRef.current.shift()
@@ -188,18 +274,22 @@ export default function DashboardArtifact({ connectionId, html, onError, queryFn
     return () => window.removeEventListener('message', onMessage)
   }, [onMessage])
 
-  // New artifact (generate/edit) reloads the iframe — reset the throttle so a
-  // fresh dashboard isn't blocked by the prior one's runaway cap, and fade the
-  // new one in rather than popping at whatever height it first reports.
+  // New artifact (generate/edit) or an explicit reload() call remounts the
+  // iframe — reset the throttle so a fresh load isn't blocked by the prior
+  // one's runaway cap, and fade the new one in rather than popping at whatever
+  // height it first reports.
   useEffect(() => {
     queueRef.current = []
     inflightRef.current = 0
     totalRef.current = 0
     setLoaded(false)
-  }, [html])
+  }, [html, reloadEpoch])
 
   return (
     <iframe
+      // key forces a genuine remount on reload() even when html is unchanged —
+      // srcDoc alone won't reliably reload if the string didn't change.
+      key={reloadEpoch}
       ref={iframeRef}
       title="Dashboard"
       sandbox="allow-scripts"
@@ -219,4 +309,6 @@ export default function DashboardArtifact({ connectionId, html, onError, queryFn
       }}
     />
   )
-}
+})
+
+export default DashboardArtifact
diff --git a/src/components/DashboardViewer.jsx b/src/components/DashboardViewer.jsx
index c72c115..e98b1a0 100644
--- a/src/components/DashboardViewer.jsx
+++ b/src/components/DashboardViewer.jsx
@@ -1,13 +1,17 @@
-import { useEffect, useState } from 'react'
-import { Loader2, LineChart } from 'lucide-react'
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { Loader2, LineChart, RefreshCw } from 'lucide-react'
 import DashboardArtifact from './DashboardArtifact'
 
 // A chrome-less, read-only, full-page dashboard view shared by the internal
 // (/dashboard-view/:id, authed) and public (/share/dashboard/:token) routes.
 // `load` returns { title, html } and `queryFn(sql, limit, signal)` runs a query
 // through whichever endpoint (authed broker or public token) the route uses.
-export default function DashboardViewer({ load, queryFn }) {
+// `autoRefreshMs` (optional) re-runs the artifact's queries on a fixed cadence
+// without a full page reload — used by kiosk mode; `hideChrome` additionally
+// strips the header entirely for a wall-mounted display.
+export default function DashboardViewer({ load, queryFn, autoRefreshMs, hideChrome }) {
   const [state, setState] = useState({ loading: true, error: null, title: '', html: '' })
+  const artifactRef = useRef(null)
 
   useEffect(() => {
     let alive = true
@@ -18,21 +22,43 @@ export default function DashboardViewer({ load, queryFn }) {
     return () => { alive = false }
   }, [load])
 
+  const refreshNow = useCallback(() => artifactRef.current?.reload(), [])
+
+  useEffect(() => {
+    if (!autoRefreshMs || state.loading || state.error) return undefined
+    const id = setInterval(refreshNow, autoRefreshMs)
+    return () => clearInterval(id)
+  }, [autoRefreshMs, state.loading, state.error, refreshNow])
+
   return (
     <div style={{ minHeight: '100vh', background: '#f8fafc', fontFamily: "'Maven Pro', system-ui, sans-serif" }}>
-      <header style={{
-        display: 'flex', alignItems: 'center', gap: 10, padding: '14px 22px',
-        borderBottom: '1px solid #e7e9ee', background: '#fff', position: 'sticky', top: 0, zIndex: 10,
-      }}>
-        <span style={{
-          display: 'inline-flex', width: 26, height: 26, borderRadius: 7, background: '#111318',
-          alignItems: 'center', justifyContent: 'center',
-        }}><LineChart size={14} color="#fff" /></span>
-        <span style={{ fontWeight: 700, fontSize: 15, color: '#111318' }}>
-          {state.loading ? 'Loading…' : (state.title || 'Dashboard')}
-        </span>
-        <span style={{ marginLeft: 'auto', fontSize: 12, color: '#8b909b' }}>Powered by DeepSQL</span>
-      </header>
+      {!hideChrome && (
+        <header style={{
+          display: 'flex', alignItems: 'center', gap: 10, padding: '14px 22px',
+          borderBottom: '1px solid #e7e9ee', background: '#fff', position: 'sticky', top: 0, zIndex: 10,
+        }}>
+          <span style={{
+            display: 'inline-flex', width: 26, height: 26, borderRadius: 7, background: '#111318',
+            alignItems: 'center', justifyContent: 'center',
+          }}><LineChart size={14} color="#fff" /></span>
+          <span style={{ fontWeight: 700, fontSize: 15, color: '#111318' }}>
+            {state.loading ? 'Loading…' : (state.title || 'Dashboard')}
+          </span>
+          {!state.loading && !state.error && (
+            <button
+              onClick={refreshNow}
+              title="Refresh"
+              aria-label="Refresh"
+              style={{
+                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                width: 26, height: 26, marginLeft: 8, border: '1px solid #e2e2e2', borderRadius: 7,
+                background: '#fff', color: '#555', cursor: 'pointer',
+              }}
+            ><RefreshCw size={13} style={{ flexShrink: 0 }} /></button>
+          )}
+          <span style={{ marginLeft: 'auto', fontSize: 12, color: '#8b909b' }}>Powered by DeepSQL</span>
+        </header>
+      )}
 
       {state.loading && (
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#5b616e', padding: 40, justifyContent: 'center' }}>
@@ -44,7 +70,7 @@ export default function DashboardViewer({ load, queryFn }) {
         <div style={{ color: '#6b7280', padding: 48, textAlign: 'center', fontSize: 15 }}>{state.error}</div>
       )}
       {!state.loading && !state.error && (
-        <DashboardArtifact html={state.html} queryFn={queryFn} onError={() => {}} />
+        <DashboardArtifact ref={artifactRef} html={state.html} queryFn={queryFn} onError={() => {}} />
       )}
     </div>
   )
diff --git a/src/components/sections/DashboardWorkspace.jsx b/src/components/sections/DashboardWorkspace.jsx
index 26ba9e6..b49b8e7 100644
--- a/src/components/sections/DashboardWorkspace.jsx
+++ b/src/components/sections/DashboardWorkspace.jsx
@@ -1,14 +1,37 @@
 import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react'
-import { LineChart, ArrowUp, ChevronLeft, Sparkles, Check, Loader2, Brain, PencilRuler, ClipboardCheck, TrendingUp, Users, PieChart, Layers, Code2, X, Copy, Undo2, Play } from 'lucide-react'
+import { LineChart, ArrowUp, ChevronLeft, Sparkles, Check, Loader2, Brain, PencilRuler, Pencil, ClipboardCheck, TrendingUp, Users, PieChart, Layers, Code2, X, Copy, Undo2, Play, Database, History, RotateCcw, Eye, RefreshCw, ChevronDown, BellRing, Trash2 } from 'lucide-react'
 import DashboardArtifact from '@/components/DashboardArtifact'
 import ShareMenu from './ShareMenu'
+import { savedDashboardsAPI } from '@/lib/api/client'
 import { useDashboardChatStore, useDashboardSession, useDashboardChatActions } from '@/lib/stores/useDashboardChatStore'
 import styles from './DashboardWorkspace.module.css'
 
 const Editor = lazy(() => import('@monaco-editor/react'))
 
 // Icon per agent step phase, so the live trace reads at a glance.
-const STEP_ICON = { grounding: Brain, planning: PencilRuler, validating: ClipboardCheck, done: Check }
+const STEP_ICON = { grounding: Brain, planning: PencilRuler, sql: Database, validating: ClipboardCheck, done: Check }
+
+// Mirrors SavedDashboardService's snapshotVersion triggers, in plain language.
+const VERSION_TRIGGER_LABEL = { AGENT_BUILD: 'Agent build', MANUAL_EDIT: 'Manual edit', RESTORE: 'Restore' }
+
+const AUTO_REFRESH_OPTIONS = [
+  { ms: 0, label: 'Off' },
+  { ms: 30_000, label: '30s' },
+  { ms: 5 * 60_000, label: '5m' },
+  { ms: 60 * 60_000, label: '1h' },
+]
+const AUTO_REFRESH_LABEL = Object.fromEntries(AUTO_REFRESH_OPTIONS.map((o) => [o.ms, o.label]))
+
+function versionRelTime(iso) {
+  if (!iso) return ''
+  const diff = Date.now() - new Date(iso).getTime()
+  const m = Math.round(diff / 60000)
+  if (m < 1) return 'just now'
+  if (m < 60) return `${m}m ago`
+  const h = Math.round(m / 60)
+  if (h < 24) return `${h}h ago`
+  return `${Math.round(h / 24)}d ago`
+}
 
 // Mirror of DashboardAgentService.extractTitle — a dashboard's name comes from
 // the artifact's <title> (then its <h1>). The backend only derives it while
@@ -25,6 +48,51 @@ function titleFromHtml(html, fallback) {
   return fallback
 }
 
+// A real line-diff between two agent-regenerated HTML docs is mostly noise — the agent
+// rewrites large chunks even for small logical changes. Instead, summarize the shape of
+// the change: title, widget count (via [data-widget] slots — see DashboardArtifact.jsx),
+// and overall size, comparing this version against the one right after it (its "before").
+function widgetIds(html) {
+  const ids = new Set()
+  const re = /data-widget=["']([^"']+)["']/g
+  let m
+  while ((m = re.exec(html))) ids.add(m[1])
+  return ids
+}
+
+// A version's dashboardConfig is the same JSON shape as SavedDashboard.dashboardConfig
+// (see DashboardVersion.dashboardConfig) — parse it the same way DashboardWorkspace
+// already parses the live one, rather than trusting it's pre-parsed.
+function versionHtml(version) {
+  if (!version?.dashboardConfig) return null
+  try {
+    const cfg = JSON.parse(version.dashboardConfig)
+    return cfg?.html || null
+  } catch {
+    return null
+  }
+}
+
+function summarizeChange(fromHtml, toHtml) {
+  if (!fromHtml || !toHtml) return null
+  const fromTitle = titleFromHtml(fromHtml, '')
+  const toTitle = titleFromHtml(toHtml, '')
+  const fromWidgets = widgetIds(fromHtml)
+  const toWidgets = widgetIds(toHtml)
+  const added = [...toWidgets].filter((id) => !fromWidgets.has(id)).length
+  const removed = [...fromWidgets].filter((id) => !toWidgets.has(id)).length
+
+  const parts = []
+  if (fromTitle && toTitle && fromTitle !== toTitle) parts.push(`title changed to “${toTitle}”`)
+  if (added) parts.push(`+${added} widget${added === 1 ? '' : 's'}`)
+  if (removed) parts.push(`-${removed} widget${removed === 1 ? '' : 's'}`)
+  if (parts.length) return parts.join(', ')
+
+  const sizeDelta = toHtml.length - fromHtml.length
+  if (Math.abs(sizeDelta) < 20) return 'no visible change'
+  return sizeDelta > 0 ? `content grew (+${sizeDelta.toLocaleString()} chars)` : `content shrank (${sizeDelta.toLocaleString()} chars)`
+}
+
 // Starting points shown on a brand-new, empty dashboard — concrete enough to click
 // and send immediately, so the first screen a user sees isn't just an empty prompt.
 const EXAMPLE_PROMPTS = [
@@ -49,8 +117,8 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
   const key = keyRef.current
 
   const session = useDashboardSession(key)
-  const { ensureSession, patchSession, releaseAlias, submitPrompt, resumeIfRunning, persistDraft } = useDashboardChatActions()
-  const { messages, thinking, steps, startedAt, config, savedId, dirty } = session
+  const { ensureSession, patchSession, releaseAlias, submitPrompt, resumeIfRunning, persistDraft, renameDashboard } = useDashboardChatActions()
+  const { messages, thinking, steps, startedAt, config, savedId, dirty, liveShell, liveWidget, renderHtml, titleOverride } = session
 
   const [input, setInput] = useState('')
   const [elapsed, setElapsed] = useState(0)
@@ -62,8 +130,38 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
   const sourceBaseRef = useRef(null) // html the editor was last seeded with
   const [showQueries, setShowQueries] = useState(false)
   const [queries, setQueries] = useState([])
+  const [showHistory, setShowHistory] = useState(false)
+  const [versions, setVersions] = useState([])
+  const [versionsLoading, setVersionsLoading] = useState(false)
+  const [restoringId, setRestoringId] = useState(null)
+  const [previewVersion, setPreviewVersion] = useState(null) // the version being previewed, or null
+  const [autoRefreshMs, setAutoRefreshMs] = useState(0) // 0 = off
+  const [showRefreshMenu, setShowRefreshMenu] = useState(false)
+  const [lastRefreshedAt, setLastRefreshedAt] = useState(null)
+  const refreshMenuRef = useRef(null)
+  const [showAlerts, setShowAlerts] = useState(false)
+  const [alerts, setAlerts] = useState([])
+  const [alertsLoading, setAlertsLoading] = useState(false)
+  const [newAlertText, setNewAlertText] = useState('')
+  const [newAlertEmail, setNewAlertEmail] = useState('')
+  const [savingAlert, setSavingAlert] = useState(false)
   const scrollRef = useRef(null)
   const inputRef = useRef(null)
+  const artifactRef = useRef(null)
+  const mountedWidgetSeqRef = useRef(0)
+
+  // Progressive build: as soon as the shell chunk lands, show it as the live
+  // canvas (a build in progress has its own in-flight artifact, distinct from
+  // `config` — the last COMPLETED build — so this never clobbers or races it).
+  // Each widget chunk afterward is a one-shot mount into the already-loaded
+  // iframe; `seq` (not the widget id) gates the effect so the SAME widget id
+  // reappearing later (a self-review correction) still re-mounts.
+  const liveConfig = liveShell ? { renderMode: 'artifact', html: liveShell } : null
+  useEffect(() => {
+    if (!liveWidget || liveWidget.seq === mountedWidgetSeqRef.current) return
+    mountedWidgetSeqRef.current = liveWidget.seq
+    artifactRef.current?.mountWidget(liveWidget.id, liveWidget.html)
+  }, [liveWidget])
 
   // Seed this session exactly once per mount — restoring the persisted chat/
   // config for an existing dashboard, or a greeting for a new one. Never
@@ -120,7 +218,7 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
     const el = inputRef.current
     if (!el) return
     el.style.height = 'auto'
-    el.style.height = `${Math.min(el.scrollHeight, 140)}px`
+    el.style.height = `${Math.min(el.scrollHeight, 280)}px`
   }, [input])
 
   // Elapsed-time ticker so a 15-30s build reads as alive, not stuck. Reads the
@@ -136,6 +234,27 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
 
   useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight }, [messages, thinking])
 
+  const refreshNow = useCallback(() => {
+    artifactRef.current?.reload()
+    setLastRefreshedAt(Date.now())
+  }, [])
+
+  // Auto-refresh: re-run the artifact's queries on a fixed cadence while a build
+  // isn't in flight — a build already replaces the whole iframe on completion, so
+  // ticking during one would just race a reload no one asked for.
+  useEffect(() => {
+    if (!autoRefreshMs || thinking) return undefined
+    const id = setInterval(refreshNow, autoRefreshMs)
+    return () => clearInterval(id)
+  }, [autoRefreshMs, thinking, refreshNow])
+
+  useEffect(() => {
+    if (!showRefreshMenu) return undefined
+    const onDocClick = (e) => { if (refreshMenuRef.current && !refreshMenuRef.current.contains(e.target)) setShowRefreshMenu(false) }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [showRefreshMenu])
+
   // Seed the Source editor when the artifact changes from OUTSIDE the editor —
   // a fresh agent build, or opening a saved dashboard. The editor itself is
   // deliberately UNCONTROLLED (defaultValue + key, never value): a controlled
@@ -151,18 +270,65 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
     setSourceDraft(html)
     setSourceEpoch((e) => e + 1)
   }, [config?.html])
-  // Query log is per-artifact — a new build/edit reloads the iframe, so its
-  // query history starts over too (mirrors DashboardArtifact's own reset).
-  useEffect(() => { setQueries([]) }, [config?.html])
+  // Query log is per-artifact. Reset the instant a NEW build/edit starts
+  // streaming (liveShell's rising edge) rather than waiting for config.html to
+  // change at the end — a live build already runs each widget's query well
+  // before onDone, so waiting for completion left the old dashboard's queries
+  // visible (and mixed with the new ones) for the whole build. Do NOT also
+  // reset on config.html changing: once a build finishes without a reload
+  // (nothing for self-review to correct — see onDone in useDashboardChatStore),
+  // config.html changes from null/old to the final string with no new queries
+  // to show, and resetting again here would wrongly wipe the ones just logged.
+  useEffect(() => { if (liveShell) setQueries([]) }, [liveShell])
 
-  const name = config?.title || (isNew ? 'New dashboard' : dashboard?.name) || 'Dashboard'
+  // A user's explicit rename always wins — over both the HTML-derived title
+  // and the saved row's name — until they rename again (see renameDashboard).
+  const name = titleOverride || config?.title || (isNew ? 'Untitled dashboard' : dashboard?.name) || 'Untitled dashboard'
   // "Live" once published to the web; the ShareMenu keeps this in sync.
   const status = isPublic ? 'live' : 'draft'
   const sourceDirty = sourceDraft !== (config?.html || '')
 
+  const [editingTitle, setEditingTitle] = useState(false)
+  const [titleDraft, setTitleDraft] = useState(name)
+  const titleInputRef = useRef(null)
+
+  function startEditingTitle() {
+    setTitleDraft(name)
+    setEditingTitle(true)
+  }
+  function commitTitle() {
+    setEditingTitle(false)
+    const trimmed = titleDraft.trim()
+    if (!trimmed || trimmed === name) return
+    renameDashboard(key, trimmed)
+  }
+
+  useEffect(() => {
+    if (editingTitle) { titleInputRef.current?.focus(); titleInputRef.current?.select() }
+  }, [editingTitle])
+
+  // v0.dev-style intro: a brand-new dashboard starts with the composer centered
+  // and no side panel/canvas chrome at all. The instant the first user message
+  // is sent, it docks into the left panel and the canvas takes over — driven by
+  // whether a user message exists yet (not local state), so it resolves
+  // correctly even if this component remounts mid-turn (e.g. reopening a
+  // dashboard whose first turn already completed skips the intro entirely).
+  const hasUserMessage = messages.some((m) => m.role === 'user')
+  const [docking, setDocking] = useState(false)
+  // Keep rendering the intro layout for one animation cycle after the message
+  // that ends it — flipping the layout in the same commit as the message would
+  // cut straight to the docked panel instead of gliding into it.
+  const intro = isNew && (!hasUserMessage || docking)
+  useEffect(() => {
+    if (!docking) return undefined
+    const id = setTimeout(() => setDocking(false), 420)
+    return () => clearTimeout(id)
+  }, [docking])
+
   function submit(directPrompt) {
     const prompt = (directPrompt ?? input).trim()
     if (!prompt || thinking) return
+    if (isNew && !hasUserMessage) setDocking(true)
     setInput('')
     submitPrompt(key, connectionId, prompt)
   }
@@ -192,6 +358,7 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
       html: sourceDraft,
       updatedAt: new Date().toISOString(),
     }
+    setQueries([]) // the iframe is about to reload with the edited HTML — old widgets' queries no longer apply
     patchSession(key, (cur) => ({
       config: next,
       messages: [...cur.messages, { role: 'agent', text: 'Source edited manually. Saved as a draft — tell me what to change next, or keep editing the source.' }],
@@ -208,6 +375,105 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
     setSourceEpoch((e) => e + 1) // remount so the editor actually shows the restored text
   }
 
+  async function loadVersions() {
+    if (!savedId) return
+    setVersionsLoading(true)
+    try {
+      const res = await savedDashboardsAPI.getVersionHistory(savedId)
+      setVersions(res?.versions || [])
+    } catch {
+      setVersions([])
+    } finally {
+      setVersionsLoading(false)
+    }
+  }
+
+  function toggleHistory() {
+    const next = !showHistory
+    setShowHistory(next)
+    if (next) loadVersions()
+  }
+
+  function selectAutoRefresh(ms) {
+    setAutoRefreshMs(ms)
+    setShowRefreshMenu(false)
+  }
+
+  async function loadAlerts() {
+    if (!savedId) return
+    setAlertsLoading(true)
+    try {
+      const res = await savedDashboardsAPI.getAlerts(savedId)
+      setAlerts(res?.alerts || [])
+    } catch {
+      setAlerts([])
+    } finally {
+      setAlertsLoading(false)
+    }
+  }
+
+  function toggleAlerts() {
+    const next = !showAlerts
+    setShowAlerts(next)
+    if (next) loadAlerts()
+  }
+
+  async function createAlert() {
+    if (!savedId || !newAlertText.trim() || savingAlert) return
+    setSavingAlert(true)
+    try {
+      const recipients = newAlertEmail.trim()
+      await savedDashboardsAPI.createAlert(savedId, {
+        conditionText: newAlertText.trim(),
+        channels: recipients ? 'in-app,email' : 'in-app',
+        emailRecipients: recipients || null,
+      })
+      setNewAlertText('')
+      setNewAlertEmail('')
+      await loadAlerts()
+    } catch (e) {
+      patchSession(key, (cur) => ({ messages: [...cur.messages, { role: 'agent', text: `⚠ Couldn’t create alert: ${e?.response?.data?.message || e?.message || 'error'}`, error: true }] }))
+    } finally {
+      setSavingAlert(false)
+    }
+  }
+
+  async function toggleAlertEnabled(alert) {
+    try {
+      await savedDashboardsAPI.updateAlert(savedId, alert.id, { isEnabled: !alert.isEnabled })
+      await loadAlerts()
+    } catch { /* leave state as-is on failure */ }
+  }
+
+  async function deleteAlert(alertId) {
+    try {
+      await savedDashboardsAPI.deleteAlert(savedId, alertId)
+      setAlerts((prev) => prev.filter((a) => a.id !== alertId))
+    } catch { /* leave state as-is on failure */ }
+  }
+
+  async function restoreVersion(version) {
+    if (!savedId || restoringId || thinking) return
+    setRestoringId(version.id)
+    try {
+      const res = await savedDashboardsAPI.restoreVersion(savedId, version.id)
+      const restored = res?.savedDashboard
+      if (!restored) return
+      let cfg = {}
+      try { cfg = typeof restored.dashboardConfig === 'string' ? JSON.parse(restored.dashboardConfig || '{}') : (restored.dashboardConfig || {}) } catch { cfg = {} }
+      if (cfg.html) setQueries([]) // the iframe is about to reload with the restored HTML — old widgets' queries no longer apply
+      patchSession(key, (cur) => ({
+        config: cfg.html ? { ...cfg, updatedAt: restored.updatedAt || new Date().toISOString() } : cur.config,
+        messages: [...cur.messages, { role: 'agent', text: `Restored “${version.name || 'a previous version'}”. The version it replaced was saved to history too.` }],
+      }))
+      await loadVersions()
+    } catch (e) {
+      patchSession(key, (cur) => ({ messages: [...cur.messages, { role: 'agent', text: `⚠ Couldn’t restore: ${e?.response?.data?.message || e?.message || 'error'}`, error: true }] }))
+    } finally {
+      setRestoringId(null)
+    }
+  }
+
   const logQuery = useCallback((entry) => { setQueries((prev) => [...prev, entry]) }, [])
   const copyQuery = (sql) => { navigator.clipboard?.writeText(sql).catch(() => {}) }
 
@@ -219,7 +485,24 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
         </button>
         <button className={styles.crumbLink} onClick={onClose}>Dashboards</button>
         <span className={styles.sep}>/</span>
-        <span className={styles.crumbCur}>{name}</span>
+        {editingTitle ? (
+          <input
+            ref={titleInputRef}
+            className={styles.crumbInput}
+            value={titleDraft}
+            onChange={(e) => setTitleDraft(e.target.value)}
+            onBlur={commitTitle}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') { e.preventDefault(); commitTitle() }
+              if (e.key === 'Escape') { e.preventDefault(); setEditingTitle(false) }
+            }}
+          />
+        ) : (
+          <button className={styles.crumbEditable} onClick={startEditingTitle} title="Rename dashboard">
+            <span className={styles.crumbCur}>{name}</span>
+            <Pencil size={12} className={styles.crumbEditIcon} />
+          </button>
+        )}
         <span className={styles.spacer} />
         <span className={status === 'live' ? styles.pillLive : styles.pillDraft}>{status === 'live' ? 'Live' : 'Draft'}</span>
         {config && (dirty || !savedId) && (
@@ -236,15 +519,22 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
         />
       </header>
 
-      <div className={styles.body}>
-        <aside className={styles.agent}>
-          <div className={styles.agentScroll} ref={scrollRef}>
-            {messages.map((msg, i) => (
+      <div className={intro ? styles.bodyIntro : styles.body}>
+        <aside className={intro ? `${styles.agentIntro} ${docking ? styles.agentDocking : ''}` : styles.agent}>
+          {intro && !docking && (
+            <div className={styles.introHead}>
+              <span className={styles.newIcon}><Sparkles size={22} color="#534AB7" /></span>
+              <h2 className={styles.newTitle}>Build a dashboard</h2>
+              <p className={styles.newSub}>Describe what you want and the DeepSQL agent builds it — read-only, grounded on your data.</p>
+            </div>
+          )}
+          <div className={intro ? styles.agentScrollIntro : styles.agentScroll} ref={scrollRef}>
+            {!intro && messages.map((msg, i) => (
               <div key={i} className={msg.role === 'user' ? styles.bubbleUser : (msg.error ? styles.bubbleErr : styles.bubbleAgent)}>
                 {msg.text}
               </div>
             ))}
-            {thinking && (
+            {!intro && thinking && (
               <div className={styles.trace}>
                 <div className={styles.traceHead}>
                   <span className={styles.traceHeadLabel}>
@@ -275,7 +565,18 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
               </div>
             )}
           </div>
-          <div className={styles.composer}>
+          {intro && !docking && (
+            <div className={styles.exampleGridIntro}>
+              {EXAMPLE_PROMPTS.map(({ icon: Icon, title, prompt }) => (
+                <button key={title} className={styles.exampleCard} onClick={() => submit(prompt)} disabled={thinking}>
+                  <span className={styles.exampleIcon}><Icon size={16} /></span>
+                  <span className={styles.exampleTitle}>{title}</span>
+                  <span className={styles.examplePrompt}>{prompt}</span>
+                </button>
+              ))}
+            </div>
+          )}
+          <div className={intro ? `${styles.composerIntro} ${docking ? styles.composerDocking : ''}` : styles.composer}>
             <textarea
               ref={inputRef}
               rows={1}
@@ -288,15 +589,30 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
             />
             <button className={styles.sendBtn} onClick={() => submit()} disabled={thinking || !input.trim()} aria-label="Send"><ArrowUp size={16} /></button>
           </div>
+          {intro && !docking && <button className={styles.backLinkIntro} onClick={onClose}><ChevronLeft size={14} /> Back to dashboards</button>}
         </aside>
 
+        {!intro && (
         <main className={styles.canvas}>
-          {config?.html ? (
+          {config?.html || liveConfig ? (
             <>
               <div className={styles.canvasToolbar}>
-                <div className={styles.viewToggle}>
-                  <button className={viewMode === 'source' ? styles.viewToggleBtnActive : styles.viewToggleBtn} onClick={() => setViewMode('source')}>Source</button>
-                  <button className={viewMode === 'preview' ? styles.viewToggleBtnActive : styles.viewToggleBtn} onClick={() => setViewMode('preview')}>Preview</button>
+                <div className={styles.canvasToolbarLeft}>
+                  <div className={styles.viewToggle}>
+                    {/* Editing source mid-build would be edited out from under the
+                        user the moment the next chunk lands — Source only makes
+                        sense once there's a finished, stable artifact. */}
+                    <button className={viewMode === 'source' ? styles.viewToggleBtnActive : styles.viewToggleBtn} onClick={() => setViewMode('source')} disabled={!config?.html} title={!config?.html ? 'Available once the build finishes' : undefined}>Source</button>
+                    <button className={viewMode === 'preview' ? styles.viewToggleBtnActive : styles.viewToggleBtn} onClick={() => setViewMode('preview')}>Preview</button>
+                  </div>
+                  {/* Only a real build in progress ever has a liveShell — a chat-only
+                      reply (e.g. "hi") never emits one, so this never shows for that. */}
+                  {liveConfig && !config?.html && (
+                    <span className={styles.buildingBadge}>
+                      <span className={styles.buildingDot} />
+                      Building dashboard…
+                    </span>
+                  )}
                 </div>
                 <div className={styles.canvasToolbarRight}>
                   {viewMode === 'source' && (
@@ -305,9 +621,57 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
                       <button className={styles.primaryBtnSm} onClick={applySource} disabled={!sourceDirty || thinking} title={thinking ? 'Wait for the current build to finish first' : undefined}><Play size={13} /> Apply</button>
                     </>
                   )}
+                  {viewMode === 'preview' && config?.html && (
+                    <div className={styles.refreshGroup} ref={refreshMenuRef}>
+                      <button
+                        className={styles.ghostBtn}
+                        onClick={refreshNow}
+                        title={lastRefreshedAt ? `Last refreshed ${new Date(lastRefreshedAt).toLocaleTimeString()}` : 'Refresh'}
+                      >
+                        <RefreshCw size={13} /> Refresh
+                      </button>
+                      <button
+                        className={autoRefreshMs ? styles.refreshMenuBtnActive : styles.refreshMenuBtn}
+                        onClick={() => setShowRefreshMenu((v) => !v)}
+                        title="Auto-refresh"
+                        aria-label="Auto-refresh options"
+                      >
+                        {autoRefreshMs ? AUTO_REFRESH_LABEL[autoRefreshMs] : <ChevronDown size={13} />}
+                      </button>
+                      {showRefreshMenu && (
+                        <div className={styles.refreshMenuPop}>
+                          {AUTO_REFRESH_OPTIONS.map(({ ms, label }) => (
+                            <button
+                              key={ms}
+                              className={autoRefreshMs === ms ? styles.refreshMenuItemActive : styles.refreshMenuItem}
+                              onClick={() => selectAutoRefresh(ms)}
+                            >
+                              {label}{autoRefreshMs === ms && <Check size={12} />}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  <button
+                    className={showAlerts ? styles.queriesBtnActive : styles.queriesBtn}
+                    onClick={() => { setShowQueries(false); setShowHistory(false); toggleAlerts() }}
+                    disabled={!savedId}
+                    title={!savedId ? 'Save the dashboard first' : undefined}
+                  >
+                    <BellRing size={13} /> Alerts{alerts.filter((a) => a.isEnabled).length > 0 ? ` ${alerts.filter((a) => a.isEnabled).length}` : ''}
+                  </button>
+                  <button
+                    className={showHistory ? styles.queriesBtnActive : styles.queriesBtn}
+                    onClick={() => { setShowQueries(false); setShowAlerts(false); toggleHistory() }}
+                    disabled={!savedId}
+                    title={!savedId ? 'Save the dashboard first' : undefined}
+                  >
+                    <History size={13} /> History
+                  </button>
                   <button
                     className={showQueries ? styles.queriesBtnActive : styles.queriesBtn}
-                    onClick={() => setShowQueries((v) => !v)}
+                    onClick={() => { setShowHistory(false); setShowAlerts(false); setShowQueries((v) => !v) }}
                   >
                     <Code2 size={13} /> Queries{queries.length > 0 ? ` ${queries.length}` : ''}
                   </button>
@@ -315,15 +679,16 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
               </div>
 
               <div className={styles.canvasBody}>
-                <div className={styles.canvasMain} style={{ display: viewMode === 'preview' ? 'block' : 'none' }}>
+                <div className={styles.canvasMain} style={{ display: viewMode === 'preview' || !config?.html ? 'block' : 'none' }}>
                   <DashboardArtifact
+                    ref={artifactRef}
                     connectionId={connectionId}
-                    html={config.html}
+                    html={liveConfig ? liveConfig.html : (renderHtml || config.html)}
                     onError={(msg) => console.warn('Dashboard artifact error:', msg)}
                     onQuery={logQuery}
                   />
                 </div>
-                {viewMode === 'source' && (
+                {viewMode === 'source' && config?.html && (
                   <div className={styles.sourceEditor}>
                     <Suspense fallback={<div className={styles.editorLoading}>Loading editor…</div>}>
                       <Editor
@@ -377,39 +742,171 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
                     </div>
                   </aside>
                 )}
+
+                {showAlerts && (
+                  <aside className={styles.queriesPanel}>
+                    <div className={styles.queriesPanelHead}>
+                      <span>Alerts</span>
+                      <button onClick={() => setShowAlerts(false)} aria-label="Close"><X size={14} /></button>
+                    </div>
+                    <div className={styles.queriesPanelList}>
+                      <div className={styles.alertComposer}>
+                        <textarea
+                          className={styles.alertComposerInput}
+                          rows={2}
+                          placeholder="Alert if… (e.g. “alert if the error rate exceeds 5% in the last hour”)"
+                          value={newAlertText}
+                          onChange={(e) => setNewAlertText(e.target.value)}
+                        />
+                        <input
+                          className={styles.alertComposerEmail}
+                          placeholder="Email to notify (optional)"
+                          value={newAlertEmail}
+                          onChange={(e) => setNewAlertEmail(e.target.value)}
+                        />
+                        <button
+                          className={styles.primaryBtnSm}
+                          onClick={createAlert}
+                          disabled={!newAlertText.trim() || savingAlert}
+                        >
+                          {savingAlert ? <Loader2 size={13} className={styles.spin} /> : <BellRing size={13} />} Add alert
+                        </button>
+                      </div>
+
+                      {alertsLoading ? (
+                        <div className={styles.queriesEmpty}><Loader2 size={14} className={styles.spin} /></div>
+                      ) : alerts.length === 0 ? (
+                        <div className={styles.queriesEmpty}>No alerts yet — describe a condition above and the DeepSQL agent will check it on a schedule.</div>
+                      ) : (
+                        alerts.map((a) => (
+                          <div key={a.id} className={styles.alertCard}>
+                            <div className={styles.alertCardHead}>
+                              <span className={a.isEnabled ? styles.alertBadgeOn : styles.alertBadgeOff}>
+                                {a.isEnabled ? 'On' : 'Off'}
+                              </span>
+                              <span className={styles.alertInterval}>every {a.checkIntervalMinutes}m</span>
+                              <div className={styles.alertCardActions}>
+                                <button className={styles.alertTextBtn} onClick={() => toggleAlertEnabled(a)}>
+                                  {a.isEnabled ? 'Disable' : 'Enable'}
+                                </button>
+                                <button className={styles.queryCopyBtn} onClick={() => deleteAlert(a.id)} title="Delete alert" aria-label="Delete alert">
+                                  <Trash2 size={12} />
+                                </button>
+                              </div>
+                            </div>
+                            <div className={styles.alertCondition}>{a.conditionText}</div>
+                            {a.lastVerdict && (
+                              <div className={a.lastVerdict === 'FIRED' ? styles.alertLastFired : (a.lastVerdict === 'ERROR' ? styles.alertLastError : styles.alertLastOk)}>
+                                {a.lastVerdict === 'FIRED' ? '🔔 Fired' : (a.lastVerdict === 'ERROR' ? '⚠ Check failed' : '✓ OK')} — {a.lastVerdict === 'ERROR' ? a.lastError : a.lastReason}
+                              </div>
+                            )}
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </aside>
+                )}
+
+                {showHistory && (
+                  <aside className={styles.queriesPanel}>
+                    <div className={styles.queriesPanelHead}>
+                      <span>Version history</span>
+                      <button onClick={() => setShowHistory(false)} aria-label="Close"><X size={14} /></button>
+                    </div>
+                    <div className={styles.queriesPanelList}>
+                      {versionsLoading ? (
+                        <div className={styles.queriesEmpty}><Loader2 size={14} className={styles.spin} /></div>
+                      ) : versions.length === 0 ? (
+                        <div className={styles.queriesEmpty}>No earlier versions yet — one is saved automatically each time you (or the agent) change this dashboard.</div>
+                      ) : (
+                        <>
+                          <div className={styles.versionCard}>
+                            <div className={styles.versionMeta}>
+                              <span className={styles.versionName}>{name}</span>
+                              <span className={styles.versionSub}>Current</span>
+                              {versionHtml(versions[0]) && (
+                                <span className={styles.versionDiff}>{summarizeChange(versionHtml(versions[0]), config?.html) || 'no visible change'}</span>
+                              )}
+                            </div>
+                            <span className={styles.versionCurrentBadge}>Live</span>
+                          </div>
+                          {versions.map((v, i) => {
+                            const olderHtml = versionHtml(versions[i + 1]) // one snapshot further back — this version's "before"
+                            const diff = olderHtml ? summarizeChange(olderHtml, versionHtml(v)) : null
+                            return (
+                              <div key={v.id} className={styles.versionCard}>
+                                <div className={styles.versionMeta}>
+                                  <span className={styles.versionName}>{v.name || 'Untitled'}</span>
+                                  <span className={styles.versionSub}>{VERSION_TRIGGER_LABEL[v.trigger] || v.trigger} · {versionRelTime(v.createdAt)}</span>
+                                  {diff && <span className={styles.versionDiff}>{diff}</span>}
+                                </div>
+                                <div className={styles.versionActions}>
+                                  <button
+                                    className={styles.versionPreviewBtn}
+                                    onClick={() => setPreviewVersion(v)}
+                                    disabled={!versionHtml(v)}
+                                    title="Preview this version"
+                                  >
+                                    <Eye size={12} />
+                                  </button>
+                                  <button
+                                    className={styles.versionRestoreBtn}
+                                    onClick={() => restoreVersion(v)}
+                                    disabled={restoringId === v.id || thinking}
+                                    title={thinking ? 'Wait for the current build to finish first' : 'Restore this version'}
+                                  >
+                                    {restoringId === v.id ? <Loader2 size={12} className={styles.spin} /> : <RotateCcw size={12} />} Restore
+                                  </button>
+                                </div>
+                              </div>
+                            )
+                          })}
+                        </>
+                      )}
+                    </div>
+                  </aside>
+                )}
+
+                {previewVersion && (
+                  <div className={styles.previewOverlay} onClick={() => setPreviewVersion(null)}>
+                    <div className={styles.previewModal} onClick={(e) => e.stopPropagation()}>
+                      <div className={styles.previewModalHead}>
+                        <span>{previewVersion.name || 'Untitled'} · {VERSION_TRIGGER_LABEL[previewVersion.trigger] || previewVersion.trigger} · {versionRelTime(previewVersion.createdAt)}</span>
+                        <button onClick={() => setPreviewVersion(null)} aria-label="Close preview"><X size={14} /></button>
+                      </div>
+                      <div className={styles.previewModalBody}>
+                        <DashboardArtifact connectionId={connectionId} html={versionHtml(previewVersion)} onError={() => {}} />
+                      </div>
+                      <div className={styles.previewModalFoot}>
+                        <button
+                          className={styles.versionRestoreBtn}
+                          onClick={() => { const v = previewVersion; setPreviewVersion(null); restoreVersion(v) }}
+                          disabled={thinking}
+                        >
+                          <RotateCcw size={12} /> Restore this version
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             </>
           ) : (
             <div className={styles.newCanvas}>
               <div className={styles.newCanvasInner}>
                 <span className={styles.newIcon}><Sparkles size={22} color="#534AB7" /></span>
-                <h2 className={styles.newTitle}>{isNew ? 'Build a dashboard' : 'Nothing built here yet'}</h2>
+                <h2 className={styles.newTitle}>{thinking ? 'Building your dashboard…' : 'Nothing built here yet'}</h2>
                 <p className={styles.newSub}>
-                  {isNew
-                    ? 'Describe what you want on the left and the DeepSQL agent builds it here — read-only, grounded on your data.'
+                  {thinking
+                    ? 'The agent is grounding on your schema and verifying every query — this usually takes a bit.'
                     : 'This dashboard doesn’t have a build yet — the chat on the left may just be planning so far. Ask for a chart to get started.'}
                 </p>
-
-                <div className={styles.exampleGrid}>
-                  {EXAMPLE_PROMPTS.map(({ icon: Icon, title, prompt }) => (
-                    <button
-                      key={title}
-                      className={styles.exampleCard}
-                      onClick={() => submit(prompt)}
-                      disabled={thinking}
-                    >
-                      <span className={styles.exampleIcon}><Icon size={16} /></span>
-                      <span className={styles.exampleTitle}>{title}</span>
-                      <span className={styles.examplePrompt}>{prompt}</span>
-                    </button>
-                  ))}
-                </div>
-
-                <button className={styles.backLink} onClick={onClose}><ChevronLeft size={14} /> Back to dashboards</button>
+                {!thinking && <button className={styles.backLink} onClick={onClose}><ChevronLeft size={14} /> Back to dashboards</button>}
               </div>
             </div>
           )}
         </main>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/sections/DashboardWorkspace.module.css b/src/components/sections/DashboardWorkspace.module.css
index d874b98..b1c0ebf 100644
--- a/src/components/sections/DashboardWorkspace.module.css
+++ b/src/components/sections/DashboardWorkspace.module.css
@@ -71,6 +71,45 @@
   white-space: nowrap;
   max-width: 320px;
 }
+
+.crumbEditable {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  background: transparent;
+  padding: 4px 6px;
+  margin: 0 -6px;
+  border-radius: 7px;
+  cursor: text;
+  min-width: 0;
+  transition: background 120ms ease-out;
+}
+.crumbEditable:hover { background: #f2f2f2; }
+
+.crumbEditIcon {
+  flex-shrink: 0;
+  color: #b0b0b0;
+  transition: color 120ms ease-out;
+}
+.crumbEditable:hover .crumbEditIcon { color: #777; }
+
+.crumbInput {
+  font-size: 14px;
+  font-weight: 590;
+  color: #111;
+  letter-spacing: -0.006em;
+  border: 1px solid #cfcaf0;
+  border-radius: 7px;
+  background: #fff;
+  padding: 3px 7px;
+  margin: 0 -7px;
+  width: 220px;
+  max-width: 320px;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12);
+}
+
 .spacer { flex: 1; }
 
 .pillLive,
@@ -124,6 +163,137 @@
   gap: 10px;
 }
 
+/* v0.dev-style intro: before the first message, the composer sits centered in
+   an otherwise-empty workspace. The instant the user sends, this whole column
+   collapses from full-width to the 340px docked panel and its centered content
+   becomes top-aligned — both genuinely animatable (width, margin, transform),
+   so the dock reads as one continuous motion rather than a cut. The canvas
+   mounts a beat later (it isn't rendered at all during intro), sliding the
+   docked panel's border-right into place as it appears. */
+.bodyIntro {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  background:
+    radial-gradient(ellipse 700px 420px at 50% 38%, rgba(83, 74, 183, 0.06), transparent 70%),
+    #fff;
+}
+
+.agentIntro {
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 0;
+  background: transparent;
+  padding: 32px 24px;
+  overflow-y: auto;
+  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1), background 420ms ease-out;
+}
+
+.agentIntro::before,
+.agentIntro::after {
+  content: '';
+  flex: 1;
+  transition: flex-basis 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* Fired the instant the first message is sent: collapse the centered hero
+   down to the docked panel's width. The heading/example grid have already
+   unmounted (see the JSX's `!docking` guards) so only the composer is left
+   to glide from a wide centered card into the narrow docked composer. */
+.agentDocking {
+  width: 340px;
+  background: #fafafa;
+}
+.agentDocking::before { flex: 0 1 0%; }
+.agentDocking::after { flex: 1 1 auto; }
+
+@media (prefers-reduced-motion: reduce) {
+  .agent, .agentIntro, .agentDocking { transition: none; animation: none; }
+}
+
+.introHead {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  width: 100%;
+  max-width: 640px;
+  margin-bottom: 22px;
+  animation: introFade 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes introFade {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .introHead, .exampleGridIntro { animation: none; }
+}
+
+.agentScrollIntro { display: none; }
+
+.composerIntro {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  width: 100%;
+  max-width: 640px;
+  padding: 10px;
+  border: 1px solid #e2e2e2;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 32px -14px rgba(83, 74, 183, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
+  animation: introFade 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: max-width 420ms cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 420ms ease-out,
+    box-shadow 420ms ease-out, margin 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.composerDocking {
+  max-width: 100%;
+  margin: 0 -12px -12px;
+  width: calc(100% + 24px);
+  border-radius: 0;
+  box-shadow: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.exampleGridIntro {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: 100%;
+  max-width: 640px;
+  margin: 16px 0 20px;
+  animation: introFade 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (max-width: 620px) {
+  .exampleGridIntro { grid-template-columns: 1fr; }
+}
+
+.backLinkIntro {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 20px;
+  border: 1px solid #e2e2e2;
+  background: #fff;
+  border-radius: 9px;
+  padding: 7px 12px;
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  transition: background 120ms ease-out;
+}
+.backLinkIntro:hover { background: #f3f3f3; }
+
 .bubbleAgent {
   background: #fff;
   border: 1px solid #eeeeee;
@@ -257,6 +427,12 @@
   align-items: flex-start;
   gap: 9px;
   min-height: 26px;
+  animation: traceRowIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes traceRowIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .traceRail {
@@ -316,6 +492,7 @@
 @media (prefers-reduced-motion: reduce) {
   .traceDotOuter::before { animation: none; opacity: 0.35; }
   .traceIconActive { animation: none; }
+  .traceRow { animation: none; }
 }
 
 .saveBtn {
@@ -379,7 +556,7 @@
   flex: 1;
   min-width: 0;
   min-height: 38px;
-  max-height: 140px;
+  max-height: 280px;
   padding: 9px 12px;
   border: 1px solid #e2e2e2;
   border-radius: 10px;
@@ -458,12 +635,44 @@
   background: #fff;
 }
 
+.canvasToolbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .canvasToolbarRight {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+.buildingBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #534AB7;
+}
+
+.buildingDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #534AB7;
+  animation: buildingDotPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes buildingDotPulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buildingDot { animation: none; opacity: 0.9; }
+}
+
 .viewToggle {
   display: inline-flex;
   background: #f1f0f5;
@@ -505,6 +714,17 @@
   cursor: pointer;
   transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
 }
+/* Tailwind's Preflight makes SVG sizing CSS-driven, not attribute-driven — an
+   icon's default flex-shrink:1 + min-width:auto then lets it collapse below
+   its intrinsic size inside these toolbar buttons. */
+.ghostBtn svg,
+.primaryBtnSm svg,
+.queriesBtn svg,
+.queriesBtnActive svg,
+.refreshMenuBtn svg,
+.refreshMenuBtnActive svg {
+  flex-shrink: 0;
+}
 
 .ghostBtn,
 .queriesBtn {
@@ -535,6 +755,86 @@
   color: #463c9f;
 }
 
+.refreshGroup {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+/* Refresh + the auto-refresh chevron read as one split button — square off the
+   touching edges so the 1px gap between them looks intentional, not like two
+   unrelated controls that happen to be adjacent. */
+.refreshGroup .ghostBtn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.refreshMenuBtn,
+.refreshMenuBtnActive {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  min-width: 28px;
+  padding: 0 8px;
+  border: 1px solid #e2e2e2;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+  border-left: none;
+  background: #fff;
+  color: #555;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
+}
+.refreshMenuBtn:hover { background: #f6f6f6; }
+
+.refreshMenuBtnActive {
+  border-color: #cfcaf0;
+  background: #f5f3ff;
+  color: #463c9f;
+}
+.refreshMenuBtnActive:hover { background: #ece8fc; }
+
+.refreshMenuPop {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  min-width: 100px;
+  padding: 4px;
+  border: 1px solid #ececec;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
+  animation: dsqlRefreshPopIn 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes dsqlRefreshPopIn { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .refreshMenuPop { animation: none; } }
+
+.refreshMenuItem,
+.refreshMenuItemActive {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  padding: 6px 9px;
+  font-size: 12.5px;
+  color: #333;
+  text-align: left;
+  cursor: pointer;
+}
+.refreshMenuItem:hover { background: #f5f5f5; }
+.refreshMenuItemActive { color: #463c9f; font-weight: 600; background: #f5f3ff; }
+
 .canvasBody {
   flex: 1;
   min-height: 0;
@@ -675,6 +975,241 @@
   color: #9c2b2b;
 }
 
+.versionCard {
+  border: 1px solid #ececec;
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.versionMeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+
+.versionName {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #222;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.versionSub { font-size: 11px; color: #999; }
+
+.versionDiff {
+  font-size: 11.5px;
+  color: #463c9f;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.versionActions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
+
+.versionPreviewBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid #e2e2e2;
+  border-radius: 7px;
+  background: #fff;
+  color: #555;
+  cursor: pointer;
+}
+.versionPreviewBtn:hover:not(:disabled) { background: #f5f3ff; border-color: #cfcaf0; color: #463c9f; }
+.versionPreviewBtn:disabled { opacity: 0.5; cursor: default; }
+.versionPreviewBtn svg { flex-shrink: 0; }
+
+.versionRestoreBtn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid #e2e2e2;
+  border-radius: 7px;
+  background: #fff;
+  color: #555;
+  font-size: 11.5px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.versionRestoreBtn:hover:not(:disabled) { background: #f5f3ff; border-color: #cfcaf0; color: #463c9f; }
+.versionRestoreBtn:disabled { opacity: 0.5; cursor: default; }
+.versionRestoreBtn svg { flex-shrink: 0; }
+
+.versionCurrentBadge {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #0F6E56;
+  background: #E1F5EE;
+  border-radius: 999px;
+  padding: 3px 9px;
+}
+
+.alertComposer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 11px;
+  border: 1px solid #ececec;
+  border-radius: 10px;
+  background: #fafafa;
+  margin-bottom: 4px;
+}
+
+.alertComposerInput {
+  resize: vertical;
+  min-height: 44px;
+  padding: 8px 9px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  background: #fff;
+  font-size: 12.5px;
+  font-family: inherit;
+  color: #222;
+  outline: none;
+}
+.alertComposerInput:focus { border-color: #b8aeee; }
+
+.alertComposerEmail {
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  background: #fff;
+  font-size: 12.5px;
+  color: #222;
+  outline: none;
+}
+.alertComposerEmail:focus { border-color: #b8aeee; }
+
+.alertCard {
+  border: 1px solid #ececec;
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px 11px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.alertCardHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.alertCardActions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.alertTextBtn {
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 11.5px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+.alertTextBtn:hover { background: #f0f0f0; color: #333; }
+
+.alertBadgeOn,
+.alertBadgeOff {
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 2px 9px;
+  flex-shrink: 0;
+}
+.alertBadgeOn { color: #0F6E56; background: #E1F5EE; }
+.alertBadgeOff { color: #6b7280; background: #f1f0f5; }
+
+.alertInterval { font-size: 11px; color: #999; }
+
+.alertCondition { font-size: 12.5px; color: #333; line-height: 1.5; }
+
+.alertLastOk,
+.alertLastFired,
+.alertLastError {
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+.alertLastOk { color: #6b7280; }
+.alertLastFired { color: #b45309; font-weight: 500; }
+.alertLastError { color: #9c2b2b; }
+
+.previewOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 15, 20, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 32px;
+}
+
+.previewModal {
+  width: min(960px, 100%);
+  height: min(720px, 100%);
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.previewModalHead {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid #ececec;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #333;
+}
+.previewModalHead button {
+  display: inline-flex;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #999;
+  padding: 2px;
+  border-radius: 5px;
+}
+.previewModalHead button:hover { background: #ececec; color: #555; }
+
+.previewModalBody {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #fafafa;
+}
+
+.previewModalFoot {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  border-top: 1px solid #ececec;
+}
+
 .newCanvas {
   height: 100%;
   display: flex;
diff --git a/src/components/sections/DashboardsHome.jsx b/src/components/sections/DashboardsHome.jsx
index 1f8124d..e5a3c70 100644
--- a/src/components/sections/DashboardsHome.jsx
+++ b/src/components/sections/DashboardsHome.jsx
@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { Plus, Sparkles, Clock, RefreshCw, Trash2, Loader2, LayoutDashboard, AlertTriangle } from 'lucide-react'
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { Plus, Sparkles, Clock, RefreshCw, Trash2, Loader2, LayoutDashboard, AlertTriangle, Search, Star, Copy, Folder, X } from 'lucide-react'
 import { savedDashboardsAPI } from '@/lib/api/client'
 import styles from './DashboardsHome.module.css'
 
@@ -54,13 +54,30 @@ export default function DashboardsHome({ connectionId, onOpen }) {
   const [dashboards, setDashboards] = useState([])
   const [loading, setLoading] = useState(false)
   const [filter, setFilter] = useState('all')
+  const [folder, setFolder] = useState(null) // null = all folders
+  const [search, setSearch] = useState('')
   const [deletingId, setDeletingId] = useState(null)
+  const [cloningId, setCloningId] = useState(null)
+  const [favoritingId, setFavoritingId] = useState(null)
   // Id of the card showing its inline "delete this?" popover (native window.confirm
   // reads as out-of-place browser chrome next to the rest of this redesigned UI, and
   // some embedded/webview hosts suppress it outright, silently no-opping the delete).
   const [confirmId, setConfirmId] = useState(null)
   const [deleteError, setDeleteError] = useState(null)
+  const [folderMenuId, setFolderMenuId] = useState(null)
+  const [folderInput, setFolderInput] = useState('')
+  const [movingFolderId, setMovingFolderId] = useState(null)
   const confirmRef = useRef(null)
+  const folderMenuRef = useRef(null)
+
+  useEffect(() => {
+    if (!folderMenuId) return
+    const onDocClick = (e) => { if (folderMenuRef.current && !folderMenuRef.current.contains(e.target)) setFolderMenuId(null) }
+    const onKey = (e) => { if (e.key === 'Escape') setFolderMenuId(null) }
+    document.addEventListener('mousedown', onDocClick)
+    document.addEventListener('keydown', onKey)
+    return () => { document.removeEventListener('mousedown', onDocClick); document.removeEventListener('keydown', onKey) }
+  }, [folderMenuId])
 
   useEffect(() => {
     if (!confirmId) return
@@ -87,6 +104,54 @@ export default function DashboardsHome({ connectionId, onOpen }) {
     }
   }, [deletingId])
 
+  const toggleFavorite = useCallback(async (d, e) => {
+    e?.stopPropagation()
+    if (favoritingId) return
+    setFavoritingId(d.id)
+    // Optimistic — this is a one-field toggle a user expects to feel instant.
+    setDashboards((list) => list.map((x) => (x.id === d.id ? { ...x, isFavorite: !x.isFavorite } : x)))
+    try {
+      await savedDashboardsAPI.toggleFavorite(d.id)
+    } catch {
+      setDashboards((list) => list.map((x) => (x.id === d.id ? { ...x, isFavorite: d.isFavorite } : x)))
+      setDeleteError('Couldn’t update favorite — try again.')
+    } finally {
+      setFavoritingId(null)
+    }
+  }, [favoritingId])
+
+  const clone = useCallback(async (d, e) => {
+    e?.stopPropagation()
+    if (cloningId) return
+    setCloningId(d.id)
+    setDeleteError(null)
+    try {
+      const res = await savedDashboardsAPI.cloneDashboard(d.id)
+      if (res?.savedDashboard) setDashboards((list) => [res.savedDashboard, ...list])
+    } catch (err) {
+      setDeleteError(err?.response?.data?.message || err?.message || 'Couldn’t duplicate this dashboard.')
+    } finally {
+      setCloningId(null)
+    }
+  }, [cloningId])
+
+  const moveToFolder = useCallback(async (d, folderName) => {
+    if (movingFolderId) return
+    const trimmed = (folderName || '').trim()
+    setMovingFolderId(d.id)
+    try {
+      // "" clears the folder — updateDashboard treats null as "field omitted".
+      const res = await savedDashboardsAPI.updateDashboard(d.id, { folder: trimmed })
+      setDashboards((list) => list.map((x) => (x.id === d.id ? (res?.savedDashboard || { ...x, folder: trimmed || null }) : x)))
+      setFolderMenuId(null)
+      setFolderInput('')
+    } catch (err) {
+      setDeleteError(err?.response?.data?.message || err?.message || 'Couldn’t move this dashboard.')
+    } finally {
+      setMovingFolderId(null)
+    }
+  }, [movingFolderId])
+
   const load = useCallback(async () => {
     setLoading(true)
     try {
@@ -101,7 +166,20 @@ export default function DashboardsHome({ connectionId, onOpen }) {
 
   useEffect(() => { load() }, [load])
 
-  const shown = dashboards.filter((d) => filter === 'all' || statusOf(d) === filter)
+  const folders = useMemo(() => {
+    const set = new Set(dashboards.map((d) => d.folder).filter(Boolean))
+    return Array.from(set).sort()
+  }, [dashboards])
+
+  const shown = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return dashboards.filter((d) => {
+      if (filter !== 'all' && statusOf(d) !== filter) return false
+      if (folder && d.folder !== folder) return false
+      if (q && !(d.name || '').toLowerCase().includes(q) && !(d.description || '').toLowerCase().includes(q)) return false
+      return true
+    })
+  }, [dashboards, filter, folder, search])
 
   return (
     <div className={styles.root}>
@@ -122,12 +200,45 @@ export default function DashboardsHome({ connectionId, onOpen }) {
         </div>
       </header>
 
+      <datalist id="dsql-folder-options">
+        {folders.map((f) => <option key={f} value={f} />)}
+      </datalist>
+
+      {dashboards.length > 0 && (
+        <div className={styles.searchRow}>
+          <div className={styles.searchBox}>
+            <Search size={14} className={styles.searchIcon} />
+            <input
+              className={styles.searchInput}
+              placeholder="Search dashboards…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            {search && (
+              <button className={styles.searchClear} onClick={() => setSearch('')} aria-label="Clear search">
+                <X size={13} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       <div className={styles.filters}>
         {['all', 'live', 'draft'].map((f) => (
           <button key={f} className={`${styles.chip} ${filter === f ? styles.chipActive : ''}`} onClick={() => setFilter(f)}>
             {f[0].toUpperCase() + f.slice(1)}
           </button>
         ))}
+        {folders.length > 0 && <span className={styles.filterSep} />}
+        {folders.map((f) => (
+          <button
+            key={f}
+            className={`${styles.chip} ${folder === f ? styles.chipActive : ''}`}
+            onClick={() => setFolder(folder === f ? null : f)}
+          >
+            <Folder size={11} style={{ marginRight: 4, verticalAlign: -1.5 }} />{f}
+          </button>
+        ))}
       </div>
 
       {!loading && dashboards.length === 0 ? (
@@ -150,15 +261,61 @@ export default function DashboardsHome({ connectionId, onOpen }) {
             onClick={() => onOpen(d)}
             onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(d) } }}
           >
-            <div className={styles.deleteWrap} ref={confirmId === d.id ? confirmRef : undefined}>
+            <div className={styles.cardActions} ref={confirmId === d.id ? confirmRef : undefined}>
+              <button
+                className={d.isFavorite ? styles.cardActionBtnFav : styles.cardActionBtn}
+                onClick={(e) => toggleFavorite(d, e)}
+                disabled={favoritingId === d.id}
+                title={d.isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+                aria-label={d.isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+              >
+                <Star size={13} fill={d.isFavorite ? 'currentColor' : 'none'} />
+              </button>
               <button
-                className={styles.cardDelete}
+                className={styles.cardActionBtn}
+                onClick={(e) => clone(d, e)}
+                disabled={cloningId === d.id}
+                title="Duplicate dashboard"
+                aria-label={`Duplicate ${d.name || 'dashboard'}`}
+              >
+                {cloningId === d.id ? <Loader2 size={13} className={styles.spin} /> : <Copy size={13} />}
+              </button>
+              <button
+                className={d.folder ? styles.cardActionBtnFav : styles.cardActionBtn}
+                onClick={(e) => { e.stopPropagation(); setFolderInput(d.folder || ''); setFolderMenuId(folderMenuId === d.id ? null : d.id) }}
+                title="Move to folder"
+                aria-label={`Move ${d.name || 'dashboard'} to a folder`}
+              >
+                <Folder size={13} fill={d.folder ? 'currentColor' : 'none'} />
+              </button>
+              {folderMenuId === d.id && (
+                <div className={styles.confirmPopover} ref={folderMenuRef} onClick={(e) => e.stopPropagation()}>
+                  <p className={styles.confirmText}>Move to folder</p>
+                  <input
+                    autoFocus
+                    className={styles.folderMenuInput}
+                    list="dsql-folder-options"
+                    placeholder="Folder name (blank to remove)"
+                    value={folderInput}
+                    onChange={(e) => setFolderInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') moveToFolder(d, folderInput) }}
+                  />
+                  <div className={styles.confirmActions}>
+                    <button className={styles.confirmCancel} onClick={() => setFolderMenuId(null)}>Cancel</button>
+                    <button className={styles.confirmDelete} style={{ background: '#534AB7', borderColor: '#534AB7' }} onClick={() => moveToFolder(d, folderInput)} disabled={movingFolderId === d.id}>
+                      {movingFolderId === d.id ? <Loader2 size={12} className={styles.spin} /> : 'Move'}
+                    </button>
+                  </div>
+                </div>
+              )}
+              <button
+                className={styles.cardActionBtn}
                 onClick={(e) => { e.stopPropagation(); if (!deletingId) setConfirmId(d.id) }}
                 disabled={deletingId === d.id}
                 title="Delete dashboard"
                 aria-label={`Delete ${d.name || 'dashboard'}`}
               >
-                {deletingId === d.id ? <Loader2 size={14} className={styles.spin} /> : <Trash2 size={14} />}
+                {deletingId === d.id ? <Loader2 size={13} className={styles.spin} /> : <Trash2 size={13} />}
               </button>
               {confirmId === d.id && (
                 <div className={styles.confirmPopover} onClick={(e) => e.stopPropagation()}>
@@ -192,7 +349,9 @@ export default function DashboardsHome({ connectionId, onOpen }) {
       )}
 
       {!loading && dashboards.length > 0 && shown.length === 0 && (
-        <div className={styles.emptyNote}>No {filter} dashboards — try a different filter.</div>
+        <div className={styles.emptyNote}>
+          {search ? `No dashboards match “${search}”.` : `No ${folder ? `dashboards in “${folder}”` : filter} dashboards — try a different filter.`}
+        </div>
       )}
 
       {deleteError && (
diff --git a/src/components/sections/DashboardsHome.module.css b/src/components/sections/DashboardsHome.module.css
index 2f55bfb..8c1a0e0 100644
--- a/src/components/sections/DashboardsHome.module.css
+++ b/src/components/sections/DashboardsHome.module.css
@@ -5,6 +5,13 @@
   padding: 22px 28px 40px;
 }
 
+/* Tailwind's Preflight makes SVG sizing CSS-driven, not attribute-driven — inside any
+   flex button here, an icon's default flex-shrink:1 + min-width:auto then lets it
+   collapse below its intrinsic size (observed shrinking to 0 width in small buttons). */
+.root svg {
+  flex-shrink: 0;
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -72,7 +79,61 @@
 .spin { animation: dsqlspin 1s linear infinite; }
 @keyframes dsqlspin { to { transform: rotate(360deg); } }
 
-.filters { display: flex; gap: 8px; margin: 18px 0 16px; }
+.searchRow { margin-top: 18px; }
+
+.searchBox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  max-width: 340px;
+}
+
+.searchIcon {
+  position: absolute;
+  left: 11px;
+  color: #999;
+  pointer-events: none;
+}
+
+.searchInput {
+  width: 100%;
+  height: 34px;
+  padding: 0 30px 0 32px;
+  border: 1px solid #e2e2e2;
+  border-radius: 9px;
+  background: #fff;
+  font-size: 13px;
+  color: #222;
+  outline: none;
+  transition: border-color 120ms ease-out;
+}
+.searchInput:focus { border-color: #b8aeee; }
+.searchInput::placeholder { color: #aaa; }
+
+.searchClear {
+  position: absolute;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: #999;
+  cursor: pointer;
+}
+.searchClear:hover { background: #f3f3f3; color: #555; }
+
+.filters { display: flex; align-items: center; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
+
+.filterSep {
+  width: 1px;
+  height: 16px;
+  background: #e6e6e6;
+  margin: 0 2px;
+}
 
 .chip {
   font-size: 12px;
@@ -124,19 +185,22 @@
   .card:active { transform: none; }
 }
 
-.deleteWrap {
+.cardActions {
   position: absolute;
   top: 8px;
   right: 8px;
   z-index: 3;
+  display: flex;
+  gap: 4px;
 }
 
-.cardDelete {
+.cardActionBtn,
+.cardActionBtnFav {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   border: 1px solid #ececec;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.95);
@@ -149,15 +213,25 @@
   transform: scale(0.85);
   transition: opacity 160ms ease-out, transform 160ms cubic-bezier(0.34, 1.4, 0.64, 1), color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
 }
-.card:hover .cardDelete, .cardDelete:focus-visible { opacity: 1; transform: scale(1); }
-.cardDelete:hover { color: #b91c1c; border-color: #f0c8c8; background: #fef2f2; }
-.cardDelete:active:not(:disabled) { transform: scale(0.88); }
-.cardDelete:disabled { cursor: default; opacity: 1; transform: scale(1); color: #9ca3af; }
+
+.card:hover .cardActionBtn, .cardActionBtn:focus-visible,
+.card:hover .cardActionBtnFav, .cardActionBtnFav:focus-visible { opacity: 1; transform: scale(1); }
+.cardActionBtn:hover { color: #26215C; border-color: #cfcaf0; background: #f5f3ff; }
+.cardActionBtn:active:not(:disabled) { transform: scale(0.88); }
+.cardActionBtn:disabled { cursor: default; opacity: 1; transform: scale(1); color: #9ca3af; }
+
+.cardActionBtnFav { color: #b8860b; opacity: 1; }
+.cardActionBtnFav:hover { border-color: #f0dca8; background: #fffbea; }
+.cardActionBtnFav:active:not(:disabled) { transform: scale(0.88); }
+
+/* Delete affordance keeps its own hover-danger color via a third child selector. */
+.cardActions > button:last-of-type:hover { color: #b91c1c; border-color: #f0c8c8; background: #fef2f2; }
 
 @media (prefers-reduced-motion: reduce) {
-  .cardDelete { transition: opacity 160ms ease-out, color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out; }
-  .card:hover .cardDelete, .cardDelete:focus-visible { transform: none; }
-  .cardDelete:active:not(:disabled) { transform: none; }
+  .cardActionBtn, .cardActionBtnFav { transition: opacity 160ms ease-out, color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out; }
+  .card:hover .cardActionBtn, .cardActionBtn:focus-visible,
+  .card:hover .cardActionBtnFav, .cardActionBtnFav:focus-visible { transform: none; }
+  .cardActionBtn:active:not(:disabled), .cardActionBtnFav:active:not(:disabled) { transform: none; }
 }
 
 .confirmPopover {
@@ -177,6 +251,19 @@
 
 .confirmText { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: #333; }
 
+.folderMenuInput {
+  width: 100%;
+  height: 30px;
+  padding: 0 9px;
+  margin-bottom: 10px;
+  border: 1px solid #e2e2e2;
+  border-radius: 7px;
+  font-size: 12.5px;
+  color: #222;
+  outline: none;
+}
+.folderMenuInput:focus { border-color: #b8aeee; }
+
 .confirmActions { display: flex; justify-content: flex-end; gap: 6px; }
 
 .confirmCancel, .confirmDelete {
diff --git a/src/components/sections/ShareMenu.jsx b/src/components/sections/ShareMenu.jsx
index 1e1fc74..cd343ea 100644
--- a/src/components/sections/ShareMenu.jsx
+++ b/src/components/sections/ShareMenu.jsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Share2, Copy, Check, Loader2, Globe, Users, Lock } from 'lucide-react'
+import { Share2, Copy, Check, Loader2, Globe, Users, Lock, Tv } from 'lucide-react'
 import { savedDashboardsAPI } from '@/lib/api/client'
 import styles from './ShareMenu.module.css'
 
@@ -32,6 +32,7 @@ export default function ShareMenu({ savedId, initialPublic, initialToken, initia
   const origin = window.location.origin
   const internalUrl = `${origin}/dashboard-view/${savedId}`
   const publicUrl = token ? `${origin}/share/dashboard/${token}` : ''
+  const kioskUrl = token ? `${origin}/share/dashboard/${token}?kiosk=1&refresh=60` : ''
 
   const copy = async (url, key) => {
     try { await navigator.clipboard.writeText(url); setCopied(key); setTimeout(() => setCopied(''), 1500) } catch { /* clipboard blocked */ }
@@ -139,6 +140,19 @@ export default function ShareMenu({ savedId, initialPublic, initialToken, initia
                     </>
                   ) : null}
                 </div>
+
+                {!hasPassword && (
+                  <div className={styles.kioskRow}>
+                    <div className={styles.rowHead}><Tv size={13} /> TV / kiosk link</div>
+                    <div className={styles.hint}>Chrome-less, auto-refreshing every 60s — for a wall display.</div>
+                    <div className={styles.linkRow}>
+                      <input readOnly value={kioskUrl} className={styles.input} onFocus={(e) => e.target.select()} />
+                      <button className={styles.copy} onClick={() => copy(kioskUrl, 'kiosk')} title="Copy link">
+                        {copied === 'kiosk' ? <Check size={14} /> : <Copy size={14} />}
+                      </button>
+                    </div>
+                  </div>
+                )}
               </>
             ) : (
               <div className={styles.hint}>Publish to the web to get a link anyone can open without logging in.</div>
diff --git a/src/components/sections/ShareMenu.module.css b/src/components/sections/ShareMenu.module.css
index 51dc9bf..3c1ee8b 100644
--- a/src/components/sections/ShareMenu.module.css
+++ b/src/components/sections/ShareMenu.module.css
@@ -104,6 +104,16 @@
 .spin { animation: sharespin 0.9s linear infinite; }
 @keyframes sharespin { to { transform: rotate(360deg); } }
 
+.kioskRow {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #eef0f3;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.kioskRow .rowHead svg { flex-shrink: 0; }
+
 /* password row */
 .pwRow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
 .pwIcon { color: #8b909b; flex-shrink: 0; }
diff --git a/src/lib/api/client.js b/src/lib/api/client.js
index 4e1a9d8..9ab49ee 100644
--- a/src/lib/api/client.js
+++ b/src/lib/api/client.js
@@ -2694,7 +2694,7 @@ export const dashboardGenAPI = {
   //   onStep({ type, message }) · onDone({ success, dashboardConfig }) · onError(Error)
   // Returns an abort fn.
   generateStream: (connectionId, prompt, currentConfig, dashboardId, handlers = {}) => {
-    const { onStep, onDone, onError, onCreated } = handlers;
+    const { onStep, onChunk, onDone, onError, onCreated } = handlers;
     const controller = new AbortController();
     const body = JSON.stringify({ connectionId, prompt, currentConfig: currentConfig || null, dashboardId: dashboardId || null });
     const doFetch = () =>
@@ -2760,6 +2760,7 @@ export const dashboardGenAPI = {
           // right away rather than waiting for the whole generation to finish.
           if (event === "created") onCreated && onCreated(data);
           else if (event === "step") onStep && onStep(data);
+          else if (event === "chunk") onChunk && onChunk(data);
           // `chat` = out-of-context reply (hi/thanks); must not fall through to `done`
           // or the workspace appends the canned "Done — built…" save message.
           else if (event === "chat") { finished = true; onDone && onDone(data); }
@@ -2902,6 +2903,44 @@ export const savedDashboardsAPI = {
     );
     return response.data;
   },
+
+  // Duplicate a dashboard as a new, independent draft
+  cloneDashboard: async (id) => {
+    const response = await apiClient.post(`/api/saved-dashboards/${id}/clone`);
+    return response.data;
+  },
+
+  // Version history, most recent first
+  getVersionHistory: async (id) => {
+    const response = await apiClient.get(`/api/saved-dashboards/${id}/versions`);
+    return response.data;
+  },
+
+  // Restore a prior version as the current config
+  restoreVersion: async (id, versionId) => {
+    const response = await apiClient.post(
+      `/api/saved-dashboards/${id}/versions/${versionId}/restore`,
+    );
+    return response.data;
+  },
+
+  // Natural-language alerts, evaluated on a schedule by the DeepSQL agent
+  getAlerts: async (id) => {
+    const response = await apiClient.get(`/api/saved-dashboards/${id}/alerts`);
+    return response.data;
+  },
+  createAlert: async (id, alert) => {
+    const response = await apiClient.post(`/api/saved-dashboards/${id}/alerts`, alert);
+    return response.data;
+  },
+  updateAlert: async (id, alertId, updates) => {
+    const response = await apiClient.put(`/api/saved-dashboards/${id}/alerts/${alertId}`, updates);
+    return response.data;
+  },
+  deleteAlert: async (id, alertId) => {
+    const response = await apiClient.delete(`/api/saved-dashboards/${id}/alerts/${alertId}`);
+    return response.data;
+  },
 };
 
 // Playbook API
diff --git a/src/lib/dashboardGenerator.js b/src/lib/dashboardGenerator.js
index 9a0a9f0..2353ef5 100644
--- a/src/lib/dashboardGenerator.js
+++ b/src/lib/dashboardGenerator.js
@@ -7,17 +7,20 @@ import { dashboardGenAPI } from '@/lib/api/client'
 // HTML document — streaming its steps to the UI. The artifact renders in a
 // sandboxed iframe and fetches data via the read-only deepsql.query bridge.
 
-// Streaming generate. Handlers: onCreated({dashboardId}) fired immediately —
+// Streaming generate. Handlers: onChunk({kind,id,html}) for a progressively-built
+// dashboard-shell/dashboard-widget piece, well before the turn finishes.
+// onCreated({dashboardId}) fired immediately —
 // the backend has already resolved/created the dashboard and durably recorded
 // the user's message server-side, before any of the slow agent work runs —
 // onStep({type,message}), onDone(config), onError(Error), onChat(replyText)
 // for a plain conversational reply (no dashboard change — e.g. "hi"). Returns
 // an abort fn. The final config is the artifact spec
 // ({version:3, renderMode:'artifact', title, html}).
-export function generateDashboardStream(connectionId, prompt, currentConfig, dashboardId, { onCreated, onStep, onDone, onError, onChat } = {}) {
+export function generateDashboardStream(connectionId, prompt, currentConfig, dashboardId, { onCreated, onStep, onChunk, onDone, onError, onChat } = {}) {
   return dashboardGenAPI.generateStream(connectionId, prompt, currentConfig, dashboardId, {
     onCreated,
     onStep,
+    onChunk,
     onDone: (data) => {
       // Chat-only can arrive as event:chat (reply at top level) or legacy done
       // with dashboardConfig.chat=true. Treat either as a plain reply — never as
diff --git a/src/lib/stores/useDashboardChatStore.js b/src/lib/stores/useDashboardChatStore.js
index 10d5a19..d5ddcaf 100644
--- a/src/lib/stores/useDashboardChatStore.js
+++ b/src/lib/stores/useDashboardChatStore.js
@@ -43,6 +43,31 @@ const emptySession = () => ({
   savedId: null,
   dirty: false,
   abort: null,
+  // Progressive build: liveShell is the dashboard-shell chunk for the turn
+  // currently in flight — a separate slot from `config` (the last COMPLETED
+  // build) so a live build renders its own in-progress canvas without
+  // clobbering (or being clobbered by) whatever was there before. Cleared
+  // the instant the turn resolves (onDone/onChat/onError), since `config`
+  // takes over as the source of truth from then on.
+  liveShell: null,
+  liveWidget: null,
+  // Every widget chunk seen this turn (id -> html), so onDone can check whether
+  // the final assembled document is identical to what's already live-rendered
+  // (see submitPrompt's onDone) — if so, the iframe is left alone instead of
+  // reloading and re-running every widget's query a second time.
+  liveWidgets: null,
+  // What DashboardWorkspace actually feeds DashboardArtifact's `html` prop once
+  // a build finishes — see onDone. null while a session has never finished a
+  // build (falls back to config?.html), or after a build that DID need a real
+  // reload (self-review changed something), in which case it's just config.html.
+  renderHtml: null,
+  // A user-set name from the breadcrumb title editor, taking precedence over
+  // both the saved dashboard's name and the HTML-derived config.title (see
+  // titleFromHtml in DashboardWorkspace) until the next agent build re-derives
+  // one — same rationale as titleFromHtml's own comment: without this, a
+  // rename would only "stick" until the next chat turn overwrites the title
+  // from the regenerated HTML's <title>.
+  titleOverride: null,
 })
 
 // A single stable reference for "no session yet" reads. useDashboardSession's
@@ -59,6 +84,29 @@ const EMPTY_SESSION = Object.freeze(emptySession())
 const MAX_POLL_WAIT_MS = 20 * 60 * 1000
 const POLL_INTERVAL_MS = 3000
 
+// Mirrors DashboardAgentService.substituteWidgetSlot (same regex shape) so we
+// can reconstruct, on the frontend, what the fully-assembled document would
+// look like from the shell + widget chunks already streamed — purely to
+// compare against the backend's own final assembly and decide whether the
+// iframe needs to reload at all (see onDone below).
+function substituteWidgetSlot(shellHtml, widgetId, widgetHtml) {
+  const escapedId = widgetId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const slot = new RegExp(`(<[a-zA-Z0-9]+[^>]*data-widget="${escapedId}"[^>]*>)([\\s\\S]*?)(</[a-zA-Z0-9]+>)`)
+  if (slot.test(shellHtml)) return shellHtml.replace(slot, (_m, open, _inner, close) => open + widgetHtml + close)
+  const selfClosing = new RegExp(`<[a-zA-Z0-9]+[^>]*data-widget="${escapedId}"[^>]*/>`)
+  if (selfClosing.test(shellHtml)) return shellHtml.replace(selfClosing, `<div data-widget="${widgetId}">${widgetHtml}</div>`)
+  return shellHtml
+}
+
+function assembleLiveHtml(liveShell, liveWidgets) {
+  if (!liveShell) return null
+  let html = liveShell
+  for (const [id, widgetHtml] of Object.entries(liveWidgets || {})) {
+    html = substituteWidgetSlot(html, id, widgetHtml)
+  }
+  return html
+}
+
 function resolveKeyIn(state, key) {
   let k = key
   const seen = new Set()
@@ -142,6 +190,17 @@ export const useDashboardChatStore = create((set, get) => ({
       steps: [],
       thinking: true,
       startedAt: Date.now(),
+      liveShell: null,
+      liveWidget: null,
+      liveWidgets: null,
+      // renderHtml is DELIBERATELY left as-is here (not reset to null): while
+      // this new turn is grounding/verifying (liveShell not set yet), the html
+      // prop still falls back to renderHtml || config.html — resetting it here
+      // would jump the fallback to config.html (the fully-assembled string,
+      // different from whatever bare-shell string is actually still in the
+      // iframe's srcDoc from the LAST turn's no-reload path) and force a
+      // spurious reload + duplicate queries the moment a new prompt is
+      // submitted, before the new build has even started streaming.
     }))
 
     const currentConfig = get().getSession(key).config
@@ -155,10 +214,27 @@ export const useDashboardChatStore = create((set, get) => ({
         if (data?.dashboardId) get().adoptRealId(key, String(data.dashboardId))
       },
       onStep: (s) => get().patchSession(key, (cur) => ({ steps: [...cur.steps, s] })),
+      // Progressive build — a dashboard-shell or dashboard-widget chunk landed
+      // well before the turn finishes. The shell sets up the live canvas once;
+      // each widget after that is a one-shot mount (DashboardWorkspace posts it
+      // into the already-loaded iframe via DashboardArtifact's ref, then this
+      // slot's job is done — liveWidget is "last arrived", not an accumulating
+      // list, since the iframe itself is what now holds that DOM).
+      onChunk: (chunk) => get().patchSession(key, (cur) => (
+        chunk?.kind === 'shell'
+          ? { liveShell: chunk.html }
+          : {
+              liveWidget: { id: chunk.id, html: chunk.html, seq: (cur.liveWidget?.seq || 0) + 1 },
+              liveWidgets: { ...cur.liveWidgets, [chunk.id]: chunk.html },
+            }
+      )),
       onChat: (reply) => get().patchSession(key, (cur) => ({
         thinking: false,
         steps: [],
         abort: null,
+        liveShell: null,
+        liveWidget: null,
+        liveWidgets: null,
         messages: [...cur.messages, { role: 'agent', text: reply || '…' }],
       })),
       onDone: (next) => {
@@ -170,6 +246,9 @@ export const useDashboardChatStore = create((set, get) => ({
             thinking: false,
             steps: [],
             abort: null,
+            liveShell: null,
+            liveWidget: null,
+            liveWidgets: null,
             messages: [...cur.messages, { role: 'agent', text: next?.reply || '…' }],
           }))
           return
@@ -180,18 +259,48 @@ export const useDashboardChatStore = create((set, get) => ({
         // patch is just so the UI updates instantly without waiting on a
         // round-trip. Keep this message textually identical to the one
         // completeBuildTurn appends server-side.
-        get().patchSession(key, (cur) => ({
-          thinking: false,
-          steps: [],
-          abort: null,
-          config: next,
-          messages: [...cur.messages, { role: 'agent', text: 'Done — built and verified against your data. Saved as a draft — tell me what to change.' }],
-        }))
+        get().patchSession(key, (cur) => {
+          // config.html is always the backend's real final document (persisted,
+          // shown in Source, shared) — never rewritten. Separately, renderHtml is
+          // what DashboardWorkspace actually feeds DashboardArtifact's `html` prop:
+          // if self-review didn't touch anything, the reconstruction from chunks
+          // already streamed to this tab is byte-identical to next.html, so
+          // renderHtml keeps the SAME string reference the iframe is already
+          // showing (the live shell + injected widgets) — the srcDoc attribute
+          // never changes, so the browser never reloads the iframe and no
+          // widget's query re-runs a second time. If self-review DID change
+          // something, the strings differ and renderHtml becomes next.html,
+          // which legitimately needs a fresh iframe load to show the fix.
+          const reconstructed = assembleLiveHtml(cur.liveShell, cur.liveWidgets)
+          const noReloadNeeded = reconstructed === next.html
+          return {
+            thinking: false,
+            steps: [],
+            abort: null,
+            config: next,
+            renderHtml: noReloadNeeded ? cur.liveShell : next.html,
+            liveShell: null,
+            liveWidget: null,
+            liveWidgets: null,
+            messages: [...cur.messages, { role: 'agent', text: 'Done — built and verified against your data. Saved as a draft — tell me what to change.' }],
+          }
+        })
+        // completeBuildTurn (the backend's own persistence for this turn) just
+        // wrote its own HTML-derived name over whatever was there — a rename
+        // made before/during this turn needs re-applying now, or it would only
+        // ever have been true in this tab's UI, never in the saved row.
+        const { titleOverride, savedId } = get().getSession(key)
+        if (titleOverride && savedId) {
+          savedDashboardsAPI.updateDashboard(savedId, { name: titleOverride }).catch(() => {})
+        }
       },
       onError: (e) => get().patchSession(key, (cur) => ({
         thinking: false,
         steps: [],
         abort: null,
+        liveShell: null,
+        liveWidget: null,
+        liveWidgets: null,
         messages: [...cur.messages, { role: 'agent', text: `⚠ ${e?.message || 'Generation failed.'}`, error: true }],
       })),
     })
@@ -261,7 +370,7 @@ export const useDashboardChatStore = create((set, get) => ({
     const session = state.sessions[k] || emptySession()
     const body = {
       connectionId,
-      name: cfg.title || 'Untitled dashboard',
+      name: session.titleOverride || cfg.title || 'Untitled dashboard',
       description: cfg.description || '',
       dashboardConfig: JSON.stringify(cfg),
       chatMessages: JSON.stringify(msgs || session.messages),
@@ -282,6 +391,23 @@ export const useDashboardChatStore = create((set, get) => ({
       throw e
     }
   },
+
+  // Breadcrumb title editor. A saved dashboard renames immediately via a
+  // lightweight partial update (SavedDashboardService.updateDashboard only
+  // touches fields that are non-null, so this can't clobber the config/chat
+  // history). A not-yet-saved dashboard has no row to PUT — titleOverride
+  // alone is enough, since persistDraft reads it as the name on first save.
+  renameDashboard: async (key, name) => {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    get().patchSession(key, { titleOverride: trimmed })
+    const state = get()
+    const k = resolveKeyIn(state, key)
+    const session = state.sessions[k] || emptySession()
+    if (session.savedId) {
+      await savedDashboardsAPI.updateDashboard(session.savedId, { name: trimmed })
+    }
+  },
 }))
 
 // Selector hooks for optimized re-renders — a component only re-renders when
@@ -302,4 +428,5 @@ export const useDashboardChatActions = () =>
     submitPrompt: state.submitPrompt,
     resumeIfRunning: state.resumeIfRunning,
     persistDraft: state.persistDraft,
+    renameDashboard: state.renameDashboard,
   })))
diff --git a/src/pages/PublicDashboardPage.jsx b/src/pages/PublicDashboardPage.jsx
index f567929..c97f70b 100644
--- a/src/pages/PublicDashboardPage.jsx
+++ b/src/pages/PublicDashboardPage.jsx
@@ -1,13 +1,39 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 import { Lock, Loader2, LineChart } from 'lucide-react'
 import { publicDashboardAPI } from '@/lib/api/client'
 import DashboardViewer from '@/components/DashboardViewer'
 
+const MIN_KIOSK_REFRESH_MS = 10_000 // a wall display refreshing faster than this just hammers the backend for no visible benefit
+const DEFAULT_KIOSK_REFRESH_MS = 60_000
+const DEFAULT_ADVANCE_MS = 30_000
+
 // Public, no-login dashboard view. The token is the authorization; if the owner
 // set a password, we gate on it here and carry it on every data request.
+//
+// Kiosk mode (for a wall-mounted display cycling a team's dashboards, unattended):
+//   ?kiosk=1                    strip all chrome (header, password-gate styling)
+//   &refresh=<seconds>          re-run queries on this cadence (default 60s, floor 10s)
+//   &tokens=tokA,tokB,tokC       cycle through these share tokens (this page's own
+//                                 :token param is treated as the first slide)
+//   &advance=<seconds>          dwell time per dashboard when cycling (default 30s)
+// A password-protected dashboard can't be included in a token cycle — kiosk mode
+// has no UI to type one in, so it skips straight to the error state for that slide
+// rather than hanging on a gate no one is there to answer.
 export default function PublicDashboardPage() {
-  const { token } = useParams()
+  const { token: routeToken } = useParams()
+  const [searchParams] = useSearchParams()
+  const kiosk = searchParams.get('kiosk') === '1'
+  const cycleTokens = (searchParams.get('tokens') || '').split(',').map((t) => t.trim()).filter(Boolean)
+  const tokens = cycleTokens.length ? [routeToken, ...cycleTokens.filter((t) => t !== routeToken)] : [routeToken]
+  const advanceMs = Math.max(5_000, (Number(searchParams.get('advance')) || DEFAULT_ADVANCE_MS / 1000) * 1000)
+  const refreshMs = kiosk
+    ? Math.max(MIN_KIOSK_REFRESH_MS, (Number(searchParams.get('refresh')) || DEFAULT_KIOSK_REFRESH_MS / 1000) * 1000)
+    : undefined
+
+  const [slideIdx, setSlideIdx] = useState(0)
+  const token = tokens[slideIdx % tokens.length]
+
   const [phase, setPhase] = useState('loading') // loading | gate | ready | error
   const [error, setError] = useState(null)
   const [pwError, setPwError] = useState(null)
@@ -22,18 +48,32 @@ export default function PublicDashboardPage() {
       dataRef.current = d; pwRef.current = pw || ''
       setPhase('ready')
     } catch (e) {
-      if (e.requiresPassword) { setPhase('gate'); if (pw) setPwError('Incorrect password') }
-      else { setError(e.message || 'Unable to load this dashboard.'); setPhase('error') }
+      if (e.requiresPassword) {
+        // Kiosk mode has no one present to type a password — advance past this
+        // slide instead of parking on a gate that will never be answered.
+        if (kiosk && tokens.length > 1) { setError('This dashboard is password protected — skipped.'); setPhase('error'); return }
+        setPhase('gate'); if (pw) setPwError('Incorrect password')
+      } else { setError(e.message || 'Unable to load this dashboard.'); setPhase('error') }
     }
-  }, [token])
+  }, [token, kiosk, tokens.length])
 
   useEffect(() => { attempt('') }, [attempt])
 
+  // Auto-advance to the next token after its dwell time — only when actually
+  // cycling multiple dashboards, and paused while a slide is still loading/gated
+  // so a slow or password-blocked one doesn't get cut off mid-attempt.
+  useEffect(() => {
+    if (tokens.length <= 1) return undefined
+    if (phase !== 'ready' && phase !== 'error') return undefined
+    const id = setTimeout(() => setSlideIdx((i) => (i + 1) % tokens.length), advanceMs)
+    return () => clearTimeout(id)
+  }, [tokens.length, advanceMs, phase, slideIdx])
+
   // Stable callbacks so DashboardViewer's load effect doesn't loop.
   const load = useCallback(() => Promise.resolve(dataRef.current), [])
   const queryFn = useCallback((sql, limit, signal) => publicDashboardAPI.query(token, sql, limit, signal, pwRef.current), [token])
 
-  if (phase === 'ready') return <DashboardViewer load={load} queryFn={queryFn} />
+  if (phase === 'ready') return <DashboardViewer load={load} queryFn={queryFn} autoRefreshMs={refreshMs} hideChrome={kiosk} />
 
   return (
     <div style={{ minHeight: '100vh', background: '#f8fafc', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Maven Pro', system-ui, sans-serif" }}>