From d19d251d9dc1a19ace4d4f13052678f20d1290c2 Mon Sep 17 00:00:00 2001
From: sumit <sumitgarg380@gmail.com>
Date: Tue, 11 Aug 2026 15:44:53 +0000
Subject: [PATCH 1/2] feat(dashboards): Apple-inspired motion/materials polish,
 fix chart sizing/labels, add chart expand

- DashboardWorkspace/DashboardsHome: translucent chrome, press feedback,
  spring-flavored hover/entrance transitions, reduced-motion and
  reduced-transparency fallbacks, refined chat trace panel with a step timeline.
- DashboardArtifact: fade artifact in on load; fix a feedback loop where a
  CSS height transition plus a stale interval poll made dashboard height grow
  continuously on any reflow (e.g. page scroll).
- dashboardChartLib: cap chart height regardless of container width (was
  inflating on wide cards); add a built-in per-chart expand-to-fullscreen
  control; darken/enlarge and truncate x-axis labels so long names no longer
  render illegible or overlap their neighbor.
- dashboard-design SKILL.md: document the automatic expand control, add a
  named "avoid AI-slop patterns" section (gradients, emoji icons, decorative
  blobs, off-scale spacing/type, chart color discipline) wired into the
  existing self-review checklist; bump skill version to 2.1.0.
---
 agent/skills/dashboard-design/SKILL.md        |  62 ++++-
 src/components/DashboardArtifact.jsx          |  40 ++-
 src/components/dashboardChartLib.js           | 229 +++++++++++-----
 .../sections/DashboardWorkspace.jsx           |  36 ++-
 .../sections/DashboardWorkspace.module.css    | 251 +++++++++++++++---
 .../sections/DashboardsHome.module.css        |  62 ++++-
 6 files changed, 547 insertions(+), 133 deletions(-)

diff --git a/agent/skills/dashboard-design/SKILL.md b/agent/skills/dashboard-design/SKILL.md
index 273b247..6a4e4e7 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.0.0
+version: 2.1.0
 platforms: [linux, macos, windows]
 metadata:
   hermes:
@@ -23,16 +23,26 @@ await deepsql.query("SELECT ...")         // -> { columns: string[], rows: any[]
 deepsql.ready(fn)                          // runs fn() once the bridge is live (use this to kick off loading)
 
 // Charts — ALWAYS use these instead of hand-writing SVG. Built-in hover tooltips
-// (show the value on mouse-over), number formatting, sparse axis labels, and a
-// graceful "No data" empty state. Pass the deepsql.query result straight in, or
-// [{label,value}] / [[label,value]]. First column = label, second = value (or
-// opts.labelKey/valueKey). opts: { valueFormat(fn), height, color, emptyText }.
+// (show the value on mouse-over), number formatting, sparse axis labels, a
+// graceful "No data" empty state, and a corner expand button that opens the
+// same chart larger in an overlay — all automatic, nothing to wire yourself.
+// Pass the deepsql.query result straight in, or [{label,value}] / [[label,value]].
+// First column = label, second = value (or opts.labelKey/valueKey).
+// opts: { valueFormat(fn), height, color, emptyText, title }.
 deepsql.charts.bar(elOrSelector, data, opts)     // rankings, counts by day
 deepsql.charts.line(elOrSelector, data, opts)     // trends over time (area+line)
 deepsql.charts.donut(elOrSelector, data, opts)    // share/composition (with legend + %)
 deepsql.charts.format(n)                           // human number formatter
 ```
 
+**Chart sizing and the expand control are handled by the runtime — do not build your own.**
+Height is fixed regardless of container width (a chart in a wide card never balloons), and every
+chart already gets a corner "expand" button that opens a larger re-render in an overlay — this is
+exactly the kind of per-chart chrome that's tempting to hand-roll and easy to get inconsistent
+across widgets, so it's built into `deepsql.charts.*` once instead. Pass `opts.title` (the chart's
+plain-business-language heading) so the expanded overlay has something to show as its title — do
+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`.
 - Never hardcode result data. Query live on load, and re-query when a control changes.
@@ -52,6 +62,9 @@ Hard rules:
    - 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).
    - 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.
 
 ## NEVER expose internals (security + UX — non-negotiable)
@@ -80,6 +93,45 @@ Rules:
 - Numbers formatted for humans (`deepsql.charts.format(n)` / thousands separators; currency symbol from the business rule) — never raw.
 - **Never render `undefined`, `null`, or `NaN`.** Guard every value you inject into the DOM (`v == null ? '—' : v`); a KPI sub-line/label with no value must fall back to a dash or be omitted — not the literal text "undefined".
 
+## Avoid AI-slop patterns (named, so you can catch yourself)
+
+These are the specific tells that make a generated dashboard look generated instead of
+designed. Each one is easy to reach for by default — that's exactly why it needs to be named
+and ruled out explicitly, not left to taste.
+
+- **No default purple/blue/pink gradient backgrounds.** A `linear-gradient(135deg, #667eea, #764ba2)`-style
+  hero band, header, or card is the single most recognizable AI-generated-UI signature. `--ds-grad`
+  exists for exactly one purpose — a subtle lift on the single most important KPI card — never a page
+  background, never a header banner, never more than one card on the whole dashboard.
+- **No emoji as icons, bullets, or section markers.** Not in KPI labels, not in section headers, not
+  as a substitute for a real icon. If a visual marker is needed, use a plain shape (a dot, a small
+  colored square in a legend) — never 📊📈💰✨ etc.
+- **No oversized rounded "blob" shapes, decorative background circles, or glassmorphism for its own
+  sake.** `backdrop-filter`/translucency is not part of this theme — don't add it. Every visual
+  element must carry information (a card, a chart, a legend swatch); nothing is decoration.
+- **No uniform drop-shadow on every element.** `--ds-shadow` is for cards that sit on `--ds-bg` —
+  don't add extra shadows to buttons, badges, or text, and don't stack multiple shadow layers for
+  "depth." Flat and quiet is correct here.
+- **No arbitrary one-off spacing or font sizes.** Pick from a small fixed scale and stay on it for
+  the whole document:
+  - Spacing: `4px 8px 12px 16px 24px 32px` — nothing between these, nothing larger without a real reason.
+  - Type: 3 sizes total — a KPI number (~28–32px, bold), section/card headings (~14–15px, semibold),
+    body/labels (~12–13px, regular). Don't introduce a fourth size for a one-off caption.
+- **No centered "hero" layout with everything stacked in one narrow column.** This is a working
+  dashboard, not a landing page — use a real grid (`auto-fit`/`auto-fill` KPI row, multi-column chart
+  layout) that uses the available width purposefully.
+- **Chart color discipline:** stick to the theme's own greyscale chart palette (already built into
+  `deepsql.charts.*` — you don't choose chart colors). Don't override `opts.color` per chart to
+  introduce your own arbitrary hues; the built-in palette is the whole point of using the shared
+  chart runtime instead of hand-rolled SVG.
+- **One hero KPI, not a "hero row."** If more than one card gets the gradient/accent treatment,
+  none of them read as important — that defeats the point. Pick the single number the business
+  question is actually about and reserve the accent for it alone.
+
+Before emitting, ask: **would this ship, unedited, from a design team that obsesses over every
+pixel — or does it look like the first thing a template generator produced?** If any of the
+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.
diff --git a/src/components/DashboardArtifact.jsx b/src/components/DashboardArtifact.jsx
index 5602bc0..81f58ab 100644
--- a/src/components/DashboardArtifact.jsx
+++ b/src/components/DashboardArtifact.jsx
@@ -33,15 +33,25 @@ const BRIDGE = `
     if (d.error) p.reject(new Error(d.error));
     else p.resolve({ columns: d.columns || [], rows: d.rows || [] });
   });
+  // Report only the content's own height, never the iframe's current rendered
+  // height — scrollHeight on a body with height:auto reflects content size and
+  // can't be inflated by whatever height the parent last set, so this can't
+  // feed back into itself. Debounced and deduped so parent-side layout thrash
+  // (e.g. a page scroll) can't retrigger it with the same value.
+  var lastReported=-1, reportTimer=null;
   function reportHeight(){
-    var h = Math.max(document.body ? document.body.scrollHeight : 0,
-                     document.documentElement ? document.documentElement.scrollHeight : 0);
-    send({ __deepsql:true, type:'height', value: h });
+    if (reportTimer) return;
+    reportTimer = setTimeout(function(){
+      reportTimer = null;
+      var h = document.documentElement ? document.documentElement.scrollHeight : 0;
+      if (h === lastReported) return;
+      lastReported = h;
+      send({ __deepsql:true, type:'height', value: h });
+    }, 50);
   }
   window.addEventListener('load', function(){
     reportHeight();
     try { new ResizeObserver(reportHeight).observe(document.body); } catch(e){}
-    setInterval(reportHeight, 1000);
   });
   window.addEventListener('error', function(e){
     send({ __deepsql:true, type:'jserror', message: (e && e.message) || 'script error' });
@@ -84,9 +94,13 @@ const MAX_TOTAL_QUERIES = 400
 const QUERY_TIMEOUT_MS = 25000
 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 }) {
   const iframeRef = useRef(null)
   const [height, setHeight] = useState(600)
+  const [loaded, setLoaded] = useState(false)
   const queueRef = useRef([])
   const inflightRef = useRef(0)
   const totalRef = useRef(0)
@@ -162,11 +176,13 @@ export default function DashboardArtifact({ connectionId, html, onError, queryFn
   }, [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.
+  // 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.
   useEffect(() => {
     queueRef.current = []
     inflightRef.current = 0
     totalRef.current = 0
+    setLoaded(false)
   }, [html])
 
   return (
@@ -175,7 +191,19 @@ export default function DashboardArtifact({ connectionId, html, onError, queryFn
       title="Dashboard"
       sandbox="allow-scripts"
       srcDoc={buildSrcDoc(html || '', connectionId)}
-      style={{ width: '100%', height, border: 'none', display: 'block', background: '#f8fafc' }}
+      onLoad={() => setLoaded(true)}
+      style={{
+        width: '100%',
+        height,
+        border: 'none',
+        display: 'block',
+        background: '#f8fafc',
+        opacity: loaded ? 1 : 0,
+        // Height snaps immediately, never transitions — animating it risked measuring
+        // the iframe's own in-transition rendered height as if it were new content,
+        // a feedback loop that made the page grow on every scroll/resize tick.
+        transition: REDUCED_MOTION ? 'opacity 150ms linear' : 'opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1)',
+      }}
     />
   )
 }
diff --git a/src/components/dashboardChartLib.js b/src/components/dashboardChartLib.js
index abf3e66..d30805d 100644
--- a/src/components/dashboardChartLib.js
+++ b/src/components/dashboardChartLib.js
@@ -1,10 +1,11 @@
 // Shared chart runtime injected into every dashboard artifact iframe. Gives the
 // agent-generated code robust, consistent SVG charts with built-in hover
-// tooltips, number formatting, sparse axis labels, and graceful empty states —
-// so it doesn't hand-roll SVG (which produced empty charts, "undefined" labels,
-// and no tooltips). Exposed as deepsql.charts.{bar,line,donut}; each accepts a
-// container (element or selector) and data as [{label,value}] or [[label,value]]
-// or {columns,rows} straight from deepsql.query.
+// tooltips, number formatting, sparse axis labels, graceful empty states, and a
+// built-in expand-to-fullscreen control — so it doesn't hand-roll SVG (which
+// produced empty charts, "undefined" labels, no tooltips, and oversized charts
+// that stretched to fill wide containers). Exposed as deepsql.charts.{bar,line,donut};
+// each accepts a container (element or selector) and data as [{label,value}] or
+// [[label,value]] or {columns,rows} straight from deepsql.query.
 export const CHART_JS = String.raw`
 (function(){
   if(!window.deepsql) window.deepsql = {};
@@ -46,76 +47,174 @@ export const CHART_JS = String.raw`
   function empty(el,msg){ clear(el); var d=document.createElement('div');
     d.style.cssText='color:var(--ds-ink-3,#8b909b);font-size:13px;padding:28px;text-align:center';
     d.textContent=msg||'No data for this range.'; el.appendChild(d); }
+
+  // SVG is sized by an explicit height in CSS (not just the viewBox aspect
+  // ratio), so a wide container can never inflate the rendered height — width
+  // scales freely, height stays exactly H regardless of how wide the card is.
   function svgEl(W,H){ var s=ns('svg'); s.setAttribute('viewBox','0 0 '+W+' '+H);
-    s.setAttribute('width','100%'); s.setAttribute('preserveAspectRatio','xMidYMid meet'); s.style.display='block'; return s; }
+    s.setAttribute('preserveAspectRatio','xMidYMid meet');
+    s.style.display='block'; s.style.width='100%'; s.style.height=H+'px'; s.style.maxWidth='100%';
+    return s; }
+  // Truncates to fit its own slot width (~6.2px/char at this font size) so a
+  // long label can never overlap its neighbor — better a clipped "Multivitam…"
+  // with the full name in the tooltip than two labels running into each other.
+  function truncateLabel(label,maxWidth){
+    var charW=6.2, max=Math.max(3,Math.floor(maxWidth/charW));
+    return label.length<=max ? label : label.slice(0,Math.max(1,max-1))+'…';
+  }
   function xLabels(svg,rows,W,H,padL,bw){ var step=Math.max(1,Math.ceil(rows.length/6));
     rows.forEach(function(r,i){ if(i%step) return; var t=ns('text');
       t.setAttribute('x',padL+i*bw+bw/2); t.setAttribute('y',H-10); t.setAttribute('text-anchor','middle');
-      t.setAttribute('font-size','11'); t.setAttribute('fill','#8b909b'); t.textContent=r.label; svg.appendChild(t); }); }
+      t.setAttribute('font-size','12'); t.setAttribute('fill','#5b616e');
+      t.textContent=truncateLabel(r.label,bw*step*0.92); svg.appendChild(t); }); }
+
+  // ---- Expand-to-fullscreen chrome, shared by every chart type ----------
+  // Wraps the caller's container in a positioned box with a corner button
+  // (visible on hover/focus, like a card lift) that re-renders the same chart
+  // at a larger size in a fullscreen overlay. Re-render, not a CSS zoom, so
+  // labels/legend re-flow properly at the bigger size instead of just scaling.
+  var overlayEl=null;
+  function closeOverlay(){ if(overlayEl){ overlayEl.remove(); overlayEl=null; document.removeEventListener('keydown',onOverlayKey); } }
+  function onOverlayKey(e){ if(e.key==='Escape') closeOverlay(); }
+  function openOverlay(title, renderFn){
+    closeOverlay();
+    overlayEl=document.createElement('div');
+    overlayEl.style.cssText='position:fixed;inset:0;z-index:100000;background:rgba(17,19,24,.5);'+
+      'display:flex;align-items:center;justify-content:center;padding:32px;animation:dsqlFadeIn .15s ease-out';
+    var panel=document.createElement('div');
+    panel.style.cssText='background:var(--ds-surface,#fff);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);'+
+      'width:100%;max-width:920px;max-height:calc(100vh - 64px);padding:24px 24px 20px;overflow:auto;'+
+      'display:flex;flex-direction:column;gap:14px';
+    var head=document.createElement('div');
+    head.style.cssText='display:flex;align-items:center;justify-content:space-between;gap:12px';
+    var h=document.createElement('div');
+    h.style.cssText='font-size:15px;font-weight:600;color:var(--ds-ink,#111318)';
+    h.textContent=title||'';
+    var closeBtn=document.createElement('button');
+    closeBtn.setAttribute('aria-label','Close');
+    closeBtn.style.cssText='width:28px;height:28px;border:none;border-radius:8px;background:var(--ds-surface-2,#f6f7f9);'+
+      'color:var(--ds-ink-2,#5b616e);cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center';
+    closeBtn.textContent='×';
+    closeBtn.addEventListener('click',closeOverlay);
+    head.appendChild(h); head.appendChild(closeBtn);
+    var body=document.createElement('div');
+    panel.appendChild(head); panel.appendChild(body);
+    overlayEl.appendChild(panel);
+    overlayEl.addEventListener('mousedown',function(e){ if(e.target===overlayEl) closeOverlay(); });
+    document.addEventListener('keydown',onOverlayKey);
+    document.body.appendChild(overlayEl);
+    renderFn(body);
+  }
+  if(!document.getElementById('dsql-chart-style')){
+    var st=document.createElement('style'); st.id='dsql-chart-style';
+    st.textContent='@keyframes dsqlFadeIn{from{opacity:0}to{opacity:1}}'+
+      '.dsql-chart-wrap{position:relative}'+
+      '.dsql-chart-expand{position:absolute;top:0;right:0;width:26px;height:26px;border:none;border-radius:7px;'+
+      'background:var(--ds-surface,#fff);color:var(--ds-ink-3,#8b909b);cursor:pointer;opacity:0;'+
+      'transition:opacity .12s,color .12s,background .12s;display:flex;align-items:center;justify-content:center;'+
+      'box-shadow:0 1px 4px rgba(0,0,0,.08)}'+
+      '.dsql-chart-wrap:hover .dsql-chart-expand,.dsql-chart-expand:focus-visible{opacity:1}'+
+      '.dsql-chart-expand:hover{color:var(--ds-ink,#111318);background:var(--ds-surface-2,#f6f7f9)}';
+    document.head.appendChild(st);
+  }
+  var EXPAND_ICON='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" '+
+    'stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>'+
+    '<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+  // Wraps el's content and installs the expand button once per container
+  // (idempotent — re-render calls on the same el just update chartRenderFn).
+  function withExpand(el, title, renderAt){
+    var wrap=el, body=el;
+    if(!el.__dsqlChartWrap){
+      clear(el);
+      wrap=document.createElement('div'); wrap.className='dsql-chart-wrap';
+      body=document.createElement('div');
+      var btn=document.createElement('button');
+      btn.className='dsql-chart-expand'; btn.setAttribute('aria-label','Expand chart'); btn.innerHTML=EXPAND_ICON;
+      btn.addEventListener('click',function(e){
+        e.stopPropagation();
+        openOverlay(title, function(container){ renderAt(container, true); });
+      });
+      wrap.appendChild(body); wrap.appendChild(btn);
+      el.appendChild(wrap);
+      el.__dsqlChartWrap=wrap; el.__dsqlChartBody=body;
+    } else {
+      body=el.__dsqlChartBody; clear(body);
+    }
+    renderAt(body, false);
+  }
 
   function bar(el,data,opts){ opts=opts||{}; el=resolve(el); if(!el) return;
-    var rows=normalize(data,opts); if(!rows.length) return empty(el,opts.emptyText);
-    var fmt=opts.valueFormat||fmtNum, W=640, H=opts.height||240, padT=12,padB=34,padX=6;
-    var max=Math.max.apply(null,rows.map(function(r){return r.value})); if(!(max>0)) max=1;
-    var iw=W-padX*2, ih=H-padT-padB, bw=iw/rows.length, bar=Math.min(bw*0.64,44);
-    clear(el); var svg=svgEl(W,H);
-    rows.forEach(function(r,i){ var h=Math.max(1,(r.value/max)*ih), x=padX+i*bw+(bw-bar)/2, y=padT+ih-h;
-      var rect=ns('rect'); rect.setAttribute('x',x); rect.setAttribute('y',y); rect.setAttribute('width',bar);
-      rect.setAttribute('height',h); rect.setAttribute('rx',3); rect.setAttribute('fill',opts.color||'#111318');
-      rect.style.cursor='default'; rect.style.transition='opacity .1s';
-      rect.addEventListener('mouseenter',function(){ rect.style.opacity='.72'; });
-      rect.addEventListener('mousemove',function(e){ showTip(e,r.label,fmt(r.value)); });
-      rect.addEventListener('mouseleave',function(){ rect.style.opacity='1'; hideTip(); });
-      svg.appendChild(rect); });
-    xLabels(svg,rows,W,H,padX,bw); el.appendChild(svg); }
+    withExpand(el, opts.title, function(target, big){
+      var rows=normalize(data,opts); if(!rows.length) return empty(target,opts.emptyText);
+      var fmt=opts.valueFormat||fmtNum, W=big?960:640, H=big?420:(opts.height||240), padT=12,padB=34,padX=6;
+      var max=Math.max.apply(null,rows.map(function(r){return r.value})); if(!(max>0)) max=1;
+      var iw=W-padX*2, ih=H-padT-padB, bw=iw/rows.length, bar=Math.min(bw*0.64,44);
+      var svg=svgEl(W,H);
+      rows.forEach(function(r,i){ var h=Math.max(1,(r.value/max)*ih), x=padX+i*bw+(bw-bar)/2, y=padT+ih-h;
+        var rect=ns('rect'); rect.setAttribute('x',x); rect.setAttribute('y',y); rect.setAttribute('width',bar);
+        rect.setAttribute('height',h); rect.setAttribute('rx',3); rect.setAttribute('fill',opts.color||'#111318');
+        rect.style.cursor='default'; rect.style.transition='opacity .1s';
+        rect.addEventListener('mouseenter',function(){ rect.style.opacity='.72'; });
+        rect.addEventListener('mousemove',function(e){ showTip(e,r.label,fmt(r.value)); });
+        rect.addEventListener('mouseleave',function(){ rect.style.opacity='1'; hideTip(); });
+        svg.appendChild(rect); });
+      xLabels(svg,rows,W,H,padX,bw); target.appendChild(svg);
+    });
+  }
 
   function line(el,data,opts){ opts=opts||{}; el=resolve(el); if(!el) return;
-    var rows=normalize(data,opts); if(!rows.length) return empty(el,opts.emptyText);
-    var fmt=opts.valueFormat||fmtNum, W=640,H=opts.height||240, padT=12,padB=34,padX=8;
-    var max=Math.max.apply(null,rows.map(function(r){return r.value})); if(!(max>0)) max=1;
-    var iw=W-padX*2, ih=H-padT-padB, n=rows.length, dx=n>1?iw/(n-1):0;
-    var pts=rows.map(function(r,i){ return {x:padX+(n>1?i*dx:iw/2), y:padT+ih-(r.value/max)*ih, r:r}; });
-    clear(el); var svg=svgEl(W,H);
-    var area=ns('path'); var dpath='M'+pts.map(function(p){return p.x+' '+p.y}).join(' L ');
-    area.setAttribute('d',dpath+' L '+pts[pts.length-1].x+' '+(padT+ih)+' L '+pts[0].x+' '+(padT+ih)+' Z');
-    area.setAttribute('fill',opts.fill||'rgba(17,19,24,.06)'); svg.appendChild(area);
-    var pl=ns('path'); pl.setAttribute('d',dpath); pl.setAttribute('fill','none');
-    pl.setAttribute('stroke',opts.color||'#111318'); pl.setAttribute('stroke-width','2'); pl.setAttribute('stroke-linejoin','round'); svg.appendChild(pl);
-    pts.forEach(function(p){ var c=ns('circle'); c.setAttribute('cx',p.x); c.setAttribute('cy',p.y); c.setAttribute('r','9');
-      c.setAttribute('fill','transparent'); c.style.cursor='default';
-      c.addEventListener('mousemove',function(e){ dot.setAttribute('r','4'); showTip(e,p.r.label,fmt(p.r.value)); });
-      c.addEventListener('mouseleave',function(){ dot.setAttribute('r','2.5'); hideTip(); });
-      var dot=ns('circle'); dot.setAttribute('cx',p.x); dot.setAttribute('cy',p.y); dot.setAttribute('r','2.5'); dot.setAttribute('fill',opts.color||'#111318');
-      svg.appendChild(dot); svg.appendChild(c); });
-    xLabels(svg,rows,W,H,padX,n>1?dx:iw); el.appendChild(svg); }
+    withExpand(el, opts.title, function(target, big){
+      var rows=normalize(data,opts); if(!rows.length) return empty(target,opts.emptyText);
+      var fmt=opts.valueFormat||fmtNum, W=big?960:640, H=big?420:(opts.height||240), padT=12,padB=34,padX=8;
+      var max=Math.max.apply(null,rows.map(function(r){return r.value})); if(!(max>0)) max=1;
+      var iw=W-padX*2, ih=H-padT-padB, n=rows.length, dx=n>1?iw/(n-1):0;
+      var pts=rows.map(function(r,i){ return {x:padX+(n>1?i*dx:iw/2), y:padT+ih-(r.value/max)*ih, r:r}; });
+      var svg=svgEl(W,H);
+      var area=ns('path'); var dpath='M'+pts.map(function(p){return p.x+' '+p.y}).join(' L ');
+      area.setAttribute('d',dpath+' L '+pts[pts.length-1].x+' '+(padT+ih)+' L '+pts[0].x+' '+(padT+ih)+' Z');
+      area.setAttribute('fill',opts.fill||'rgba(17,19,24,.06)'); svg.appendChild(area);
+      var pl=ns('path'); pl.setAttribute('d',dpath); pl.setAttribute('fill','none');
+      pl.setAttribute('stroke',opts.color||'#111318'); pl.setAttribute('stroke-width','2'); pl.setAttribute('stroke-linejoin','round'); svg.appendChild(pl);
+      pts.forEach(function(p){ var c=ns('circle'); c.setAttribute('cx',p.x); c.setAttribute('cy',p.y); c.setAttribute('r','9');
+        c.setAttribute('fill','transparent'); c.style.cursor='default';
+        c.addEventListener('mousemove',function(e){ dot.setAttribute('r','4'); showTip(e,p.r.label,fmt(p.r.value)); });
+        c.addEventListener('mouseleave',function(){ dot.setAttribute('r','2.5'); hideTip(); });
+        var dot=ns('circle'); dot.setAttribute('cx',p.x); dot.setAttribute('cy',p.y); dot.setAttribute('r','2.5'); dot.setAttribute('fill',opts.color||'#111318');
+        svg.appendChild(dot); svg.appendChild(c); });
+      xLabels(svg,rows,W,H,padX,n>1?dx:iw); target.appendChild(svg);
+    });
+  }
 
   function donut(el,data,opts){ opts=opts||{}; el=resolve(el); if(!el) return;
-    var rows=normalize(data,opts); if(!rows.length) return empty(el,opts.emptyText);
-    var fmt=opts.valueFormat||fmtNum, S=240, cx=120, cy=120, rO=110, rI=66;
-    var total=rows.reduce(function(a,r){return a+r.value},0); if(!(total>0)) return empty(el,opts.emptyText);
-    var greys=['#111318','#3a3f4a','#5b616e','#8b909b','#b6bac2','#d7dae0','#eceef2'];
-    clear(el); var wrap=document.createElement('div'); wrap.style.cssText='display:flex;gap:20px;align-items:center;flex-wrap:wrap';
-    var svg=svgEl(S,S); svg.setAttribute('width','220'); svg.style.maxWidth='220px';
-    var a0=-Math.PI/2;
-    rows.forEach(function(r,i){ var ang=r.value/total*Math.PI*2, a1=a0+ang, large=ang>Math.PI?1:0;
-      var p=ns('path'); p.setAttribute('d',
-        'M'+(cx+rO*Math.cos(a0))+' '+(cy+rO*Math.sin(a0))+
-        ' A'+rO+' '+rO+' 0 '+large+' 1 '+(cx+rO*Math.cos(a1))+' '+(cy+rO*Math.sin(a1))+
-        ' L'+(cx+rI*Math.cos(a1))+' '+(cy+rI*Math.sin(a1))+
-        ' A'+rI+' '+rI+' 0 '+large+' 0 '+(cx+rI*Math.cos(a0))+' '+(cy+rI*Math.sin(a0))+' Z');
-      p.setAttribute('fill',greys[i%greys.length]); p.style.cursor='default'; p.style.transition='opacity .1s';
-      var pct=(r.value/total*100);
-      p.addEventListener('mouseenter',function(){ p.style.opacity='.75'; });
-      p.addEventListener('mousemove',function(e){ showTip(e,r.label,fmt(r.value)+' ('+pct.toFixed(1)+'%)'); });
-      p.addEventListener('mouseleave',function(){ p.style.opacity='1'; hideTip(); });
-      svg.appendChild(p); a0=a1; });
-    var legend=document.createElement('div'); legend.style.cssText='font-size:13px;color:var(--ds-ink-2,#5b616e)';
-    rows.slice(0,7).forEach(function(r,i){ var row=document.createElement('div');
-      row.style.cssText='display:flex;align-items:center;gap:8px;margin:4px 0';
-      row.innerHTML='<span style="width:10px;height:10px;border-radius:2px;background:'+greys[i%greys.length]+';display:inline-block"></span>'+
-        '<span>'+esc(r.label)+'</span><b style="margin-left:auto;color:var(--ds-ink,#111318)">'+(r.value/total*100).toFixed(1)+'%</b>';
-      legend.appendChild(row); });
-    wrap.appendChild(svg); wrap.appendChild(legend); el.appendChild(wrap); }
+    withExpand(el, opts.title, function(target, big){
+      var rows=normalize(data,opts); if(!rows.length) return empty(target,opts.emptyText);
+      var fmt=opts.valueFormat||fmtNum, S=big?320:240, cx=S/2, cy=S/2, rO=S*0.458, rI=S*0.275;
+      var total=rows.reduce(function(a,r){return a+r.value},0); if(!(total>0)) return empty(target,opts.emptyText);
+      var greys=['#111318','#3a3f4a','#5b616e','#8b909b','#b6bac2','#d7dae0','#eceef2'];
+      var wrap=document.createElement('div'); wrap.style.cssText='display:flex;gap:20px;align-items:center;flex-wrap:wrap';
+      var svg=svgEl(S,S); svg.setAttribute('width',S); svg.style.width=S+'px'; svg.style.maxWidth=S+'px';
+      var a0=-Math.PI/2;
+      rows.forEach(function(r,i){ var ang=r.value/total*Math.PI*2, a1=a0+ang, large=ang>Math.PI?1:0;
+        var p=ns('path'); p.setAttribute('d',
+          'M'+(cx+rO*Math.cos(a0))+' '+(cy+rO*Math.sin(a0))+
+          ' A'+rO+' '+rO+' 0 '+large+' 1 '+(cx+rO*Math.cos(a1))+' '+(cy+rO*Math.sin(a1))+
+          ' L'+(cx+rI*Math.cos(a1))+' '+(cy+rI*Math.sin(a1))+
+          ' A'+rI+' '+rI+' 0 '+large+' 0 '+(cx+rI*Math.cos(a0))+' '+(cy+rI*Math.sin(a0))+' Z');
+        p.setAttribute('fill',greys[i%greys.length]); p.style.cursor='default'; p.style.transition='opacity .1s';
+        var pct=(r.value/total*100);
+        p.addEventListener('mouseenter',function(){ p.style.opacity='.75'; });
+        p.addEventListener('mousemove',function(e){ showTip(e,r.label,fmt(r.value)+' ('+pct.toFixed(1)+'%)'); });
+        p.addEventListener('mouseleave',function(){ p.style.opacity='1'; hideTip(); });
+        svg.appendChild(p); a0=a1; });
+      var legend=document.createElement('div'); legend.style.cssText='font-size:13px;color:var(--ds-ink-2,#5b616e)';
+      rows.slice(0,7).forEach(function(r,i){ var row=document.createElement('div');
+        row.style.cssText='display:flex;align-items:center;gap:8px;margin:4px 0';
+        row.innerHTML='<span style="width:10px;height:10px;border-radius:2px;background:'+greys[i%greys.length]+';display:inline-block"></span>'+
+          '<span>'+esc(r.label)+'</span><b style="margin-left:auto;color:var(--ds-ink,#111318)">'+(r.value/total*100).toFixed(1)+'%</b>';
+        legend.appendChild(row); });
+      wrap.appendChild(svg); wrap.appendChild(legend); target.appendChild(wrap);
+    });
+  }
 
   window.deepsql.charts = { bar: bar, line: line, donut: donut, format: fmtNum };
 })();
diff --git a/src/components/sections/DashboardWorkspace.jsx b/src/components/sections/DashboardWorkspace.jsx
index ccd7f20..51e710b 100644
--- a/src/components/sections/DashboardWorkspace.jsx
+++ b/src/components/sections/DashboardWorkspace.jsx
@@ -196,18 +196,32 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
             {thinking && (
               <div className={styles.trace}>
                 <div className={styles.traceHead}>
-                  <Loader2 size={13} className={styles.spin} /> Working… {elapsed}s
+                  <span className={styles.traceHeadLabel}>
+                    <span className={styles.traceDotOuter}><span className={styles.traceDotInner} /></span>
+                    Working
+                  </span>
+                  <span className={styles.traceTime}>{elapsed}s</span>
+                </div>
+                <div className={styles.traceList}>
+                  {(steps.length === 0
+                    ? [{ type: 'grounding', message: 'Consulting the brain…' }]
+                    : steps.slice(-7)
+                  ).map((s, i, arr) => {
+                    const Icon = STEP_ICON[s.type] || ClipboardCheck
+                    const last = i === arr.length - 1
+                    return (
+                      <div key={steps.length - arr.length + i} className={styles.traceRow}>
+                        <span className={styles.traceRail}>
+                          <span className={last ? styles.traceIconActive : styles.traceIconDone}>
+                            {last ? <Icon size={11} /> : <Check size={11} />}
+                          </span>
+                          {i < arr.length - 1 && <span className={styles.traceLine} />}
+                        </span>
+                        <span className={last ? styles.traceTextActive : styles.traceTextDone}>{s.message}</span>
+                      </div>
+                    )
+                  })}
                 </div>
-                {steps.length === 0 && <div className={styles.traceStep}><Brain size={12} /> <span>Consulting the brain…</span></div>}
-                {steps.slice(-7).map((s, i, arr) => {
-                  const Icon = STEP_ICON[s.type] || ClipboardCheck
-                  const last = i === arr.length - 1
-                  return (
-                    <div key={steps.length - arr.length + i} className={last ? styles.traceStepActive : styles.traceStep}>
-                      <Icon size={12} /> <span>{s.message}</span>
-                    </div>
-                  )
-                })}
               </div>
             )}
           </div>
diff --git a/src/components/sections/DashboardWorkspace.module.css b/src/components/sections/DashboardWorkspace.module.css
index 68c9fc6..2b56a6e 100644
--- a/src/components/sections/DashboardWorkspace.module.css
+++ b/src/components/sections/DashboardWorkspace.module.css
@@ -14,8 +14,16 @@
   height: 52px;
   flex-shrink: 0;
   padding: 0 16px;
-  border-bottom: 1px solid #ececec;
-  background: #fff;
+  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) {
+  .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
 .logoBtn {
@@ -25,7 +33,10 @@
   background: transparent;
   cursor: pointer;
   padding: 0;
+  border-radius: 7px;
+  transition: transform 150ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
+.logoBtn:active { transform: scale(0.92); }
 
 .logoMark {
   width: 26px;
@@ -44,11 +55,22 @@
   color: #555;
   cursor: pointer;
   padding: 0;
+  transition: color 120ms ease-out;
 }
 .crumbLink:hover { color: #111; }
+.crumbLink:active { color: #534AB7; }
 
 .sep { color: #c5c5c5; font-size: 13px; }
-.crumbCur { font-size: 14px; font-weight: 500; color: #111; }
+.crumbCur {
+  font-size: 14px;
+  font-weight: 590;
+  color: #111;
+  letter-spacing: -0.006em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 320px;
+}
 .spacer { flex: 1; }
 
 .pillLive,
@@ -56,6 +78,7 @@
   font-size: 12px;
   border-radius: 999px;
   padding: 4px 11px;
+  transition: background 200ms ease-out, color 200ms ease-out;
 }
 .pillLive { color: #0F6E56; background: #E1F5EE; }
 .pillDraft { color: #5F5E5A; background: #F1EFE8; }
@@ -98,38 +121,53 @@
   padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 .bubbleAgent {
   background: #fff;
-  border: 1px solid #ececec;
-  border-radius: 12px;
-  padding: 11px 13px;
+  border: 1px solid #eeeeee;
+  border-radius: 13px;
+  padding: 12px 14px;
   font-size: 13px;
-  line-height: 1.55;
-  color: #222;
+  line-height: 1.6;
+  color: #26262a;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  animation: bubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .bubbleUser {
   align-self: flex-end;
   max-width: 92%;
-  background: #EEEDFE;
-  color: #26215C;
-  border-radius: 12px;
-  padding: 10px 13px;
+  background: #534AB7;
+  color: #fff;
+  border-radius: 13px;
+  padding: 11px 14px;
   font-size: 13px;
-  line-height: 1.55;
+  line-height: 1.6;
+  box-shadow: 0 1px 2px rgba(83, 74, 183, 0.18);
+  animation: bubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .bubbleErr {
-  background: #fdecec;
-  border: 1px solid #f6cccc;
-  color: #8a2020;
-  border-radius: 12px;
-  padding: 11px 13px;
+  background: #fdf2f2;
+  border: 1px solid #f6d5d5;
+  color: #9c2b2b;
+  border-radius: 13px;
+  padding: 12px 14px;
   font-size: 13px;
-  line-height: 1.55;
+  line-height: 1.6;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  animation: bubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes bubbleIn {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubbleAgent, .bubbleUser, .bubbleErr { animation: none; }
 }
 
 .thinking {
@@ -149,43 +187,136 @@
 .trace {
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  padding: 10px 11px;
+  padding: 13px 14px 14px;
   background: #fff;
   border: 1px solid #ececec;
   border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  animation: bubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .traceHead {
   display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 11px;
+}
+
+.traceHeadLabel {
+  display: inline-flex;
   align-items: center;
   gap: 7px;
-  font-size: 12px;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: #26215C;
+}
+
+.traceDotOuter {
+  position: relative;
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+}
+.traceDotOuter::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #534AB7;
+  opacity: 0.35;
+  animation: traceDotRing 1.8s ease-out infinite;
+}
+.traceDotInner {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #534AB7;
+}
+
+@keyframes traceDotRing {
+  0% { transform: scale(1); opacity: 0.45; }
+  100% { transform: scale(2.6); opacity: 0; }
+}
+
+.traceTime {
+  font-size: 11px;
   font-weight: 500;
-  color: #534AB7;
-  margin-bottom: 2px;
+  color: #a3a0c2;
+  font-variant-numeric: tabular-nums;
+}
+
+.traceList {
+  display: flex;
+  flex-direction: column;
 }
 
-.traceStep,
-.traceStepActive {
+.traceRow {
   display: flex;
   align-items: flex-start;
-  gap: 6px;
-  font-size: 12px;
-  line-height: 1.45;
+  gap: 9px;
+  min-height: 26px;
+}
+
+.traceRail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
 }
 
-.traceStep {
-  color: #9a9a9a;
+.traceIconDone,
+.traceIconActive {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
-.traceStep svg { margin-top: 1px; flex-shrink: 0; }
+.traceIconDone {
+  background: #EEEDFE;
+  color: #534AB7;
+}
 
-.traceStepActive {
-  color: #333;
+.traceIconActive {
+  background: #534AB7;
+  color: #fff;
+  animation: traceIconPulse 1.6s ease-in-out infinite;
 }
 
-.traceStepActive svg { margin-top: 1px; flex-shrink: 0; color: #534AB7; }
+@keyframes traceIconPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(83, 74, 183, 0.28); }
+  50% { box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12); }
+}
+
+.traceLine {
+  width: 1px;
+  flex: 1;
+  min-height: 10px;
+  background: #e6e3f7;
+  margin: 2px 0;
+}
+
+.traceTextDone,
+.traceTextActive {
+  font-size: 12px;
+  line-height: 1.5;
+  padding-top: 1px;
+  padding-bottom: 9px;
+}
+
+.traceTextDone { color: #9a97ad; }
+.traceTextActive { color: #26215C; font-weight: 500; }
+
+@media (prefers-reduced-motion: reduce) {
+  .traceDotOuter::before { animation: none; opacity: 0.35; }
+  .traceIconActive { animation: none; }
+}
 
 .saveBtn {
   display: inline-flex;
@@ -200,10 +331,22 @@
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
+  animation: saveBtnIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .saveBtn:hover { background: #f5f3ff; }
+.saveBtn:active:not(:disabled) { transform: scale(0.96); }
 .saveBtn:disabled { opacity: 0.6; cursor: default; }
 
+@keyframes saveBtnIn {
+  from { opacity: 0; transform: scale(0.9) translateY(-2px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .saveBtn { animation: none; }
+}
+
 .hint {
   display: flex;
   align-items: flex-start;
@@ -222,7 +365,14 @@
   align-items: flex-end;
   gap: 8px;
   padding: 12px;
-  border-top: 1px solid #ececec;
+  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; }
 }
 
 .composerInput {
@@ -241,11 +391,22 @@
   resize: none;
   overflow-y: auto;
   box-sizing: border-box;
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
 }
 
+.composerInput::-webkit-scrollbar { width: 5px; }
+.composerInput::-webkit-scrollbar-track { background: transparent; }
+.composerInput::-webkit-scrollbar-thumb {
+  background: #dcdce3;
+  border-radius: 3px;
+}
+.composerInput::-webkit-scrollbar-thumb:hover { background: #c5c5d1; }
+.composerInput { scrollbar-width: thin; scrollbar-color: #dcdce3 transparent; }
+
 .composerInput:focus {
   outline: none;
   border-color: #534AB7;
+  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12);
 }
 
 .sendBtn {
@@ -260,9 +421,16 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
+.sendBtn:active:not(:disabled) { transform: scale(0.9); }
 .sendBtn:disabled { background: #cfcaf0; cursor: default; }
 
+@media (prefers-reduced-motion: reduce) {
+  .logoBtn, .saveBtn, .sendBtn { transition: none; }
+  .logoBtn:active, .saveBtn:active, .sendBtn:active { transform: none; }
+}
+
 .comingSoon {
   text-align: center;
   font-size: 11px;
@@ -299,7 +467,7 @@
   margin-bottom: 4px;
 }
 
-.newTitle { font-size: 18px; font-weight: 600; color: #111; margin: 0; }
+.newTitle { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; color: #111; margin: 0; }
 .newSub { font-size: 13px; color: #777; max-width: 380px; line-height: 1.6; margin: 0; }
 
 .backLink {
@@ -314,5 +482,12 @@
   font-size: 13px;
   color: #555;
   cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
 .backLink:hover { background: #f3f3f3; }
+.backLink:active { transform: scale(0.96); }
+
+@media (prefers-reduced-motion: reduce) {
+  .backLink { transition: none; }
+  .backLink:active { transform: none; }
+}
diff --git a/src/components/sections/DashboardsHome.module.css b/src/components/sections/DashboardsHome.module.css
index 9a3bbc0..8b621b5 100644
--- a/src/components/sections/DashboardsHome.module.css
+++ b/src/components/sections/DashboardsHome.module.css
@@ -14,7 +14,8 @@
 
 .title {
   font-size: 22px;
-  font-weight: 600;
+  font-weight: 650;
+  letter-spacing: -0.014em;
   color: #111;
   margin: 0;
 }
@@ -32,8 +33,10 @@
   background: #fff;
   color: #555;
   cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
 .ghost:hover { background: #f3f3f3; }
+.ghost:active { transform: scale(0.92); }
 
 .primary {
   display: inline-flex;
@@ -48,8 +51,15 @@
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
+  transition: background 120ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
 .primary:hover { background: #463c9f; }
+.primary:active { transform: scale(0.96); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ghost, .primary { transition: none; }
+  .ghost:active, .primary:active { transform: none; }
+}
 
 .spin { animation: dsqlspin 1s linear infinite; }
 @keyframes dsqlspin { to { transform: rotate(360deg); } }
@@ -64,9 +74,16 @@
   border-radius: 999px;
   padding: 5px 14px;
   cursor: pointer;
+  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
+.chip:active { transform: scale(0.94); }
 .chipActive { color: #26215C; background: #EEEDFE; border-color: #EEEDFE; }
 
+@media (prefers-reduced-motion: reduce) {
+  .chip { transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out; }
+  .chip:active { transform: none; }
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
@@ -84,9 +101,20 @@
   background: #fff;
   overflow: hidden;
   cursor: pointer;
-  transition: border-color 0.12s, transform 0.12s;
+  transition: border-color 200ms ease-out, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease-out;
+}
+.card:hover {
+  border-color: #cfcaf0;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -8px rgba(83, 74, 183, 0.22), 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+.card:active { transform: translateY(-1px) scale(0.995); }
+
+@media (prefers-reduced-motion: reduce) {
+  .card { transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
+  .card:hover { transform: none; }
+  .card:active { transform: none; }
 }
-.card:hover { border-color: #cfcaf0; transform: translateY(-1px); }
 
 .cardDelete {
   position: absolute;
@@ -101,14 +129,24 @@
   border: 1px solid #ececec;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   color: #6b7280;
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
+  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; }
+.card:hover .cardDelete, .cardDelete:focus-visible { opacity: 1; transform: scale(1); }
 .cardDelete:hover { color: #b91c1c; border-color: #f0c8c8; background: #fef2f2; }
-.cardDelete:disabled { cursor: default; opacity: 1; color: #9ca3af; }
+.cardDelete:active:not(:disabled) { transform: scale(0.88); }
+.cardDelete:disabled { cursor: default; opacity: 1; transform: scale(1); color: #9ca3af; }
+
+@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; }
+}
 
 .thumb {
   height: 96px;
@@ -139,7 +177,8 @@
 
 .cardName {
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 550;
+  letter-spacing: -0.006em;
   color: #111;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -179,8 +218,15 @@
   background: #fbfaff;
   color: #555;
   cursor: pointer;
+  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ctaCard:hover { background: #f5f3ff; border-color: #b8aeee; transform: translateY(-2px); }
+.ctaCard:active { transform: translateY(-1px) scale(0.995); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ctaCard { transition: background 200ms ease-out, border-color 200ms ease-out; }
+  .ctaCard:hover, .ctaCard:active { transform: none; }
 }
-.ctaCard:hover { background: #f5f3ff; }
 
 .ctaIcon {
   width: 36px;

From 8cbe9290da966eda7cfea6f29f4df89488e71594 Mon Sep 17 00:00:00 2001
From: sumit <sumitgarg380@gmail.com>
Date: Tue, 11 Aug 2026 15:59:25 +0000
Subject: [PATCH 2/2] fix(dashboards): stop routing every chat message through
 full dashboard generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every message sent in the dashboard builder's chat — including a bare "hi" —
was wrapped in DashboardAgentService.buildTask's full ground+write-SQL+verify+
self-review pipeline, since there was no other path. That's why trivial
messages took ~3 minutes: the agent was dutifully trying to build a dashboard
in response to a greeting.

DashboardAgentService now classifies each message with a direct, single
ChatModel call (no agent session, no tools) before deciding which path to
take — a real LLM judgment call, not a keyword match, since a fixed word list
can't tell "make it prettier" or "no, the other one" from a real edit ask.
The classification prompt is explicitly biased toward "this is a real
request" on anything ambiguous, so a genuine request is never misrouted to
the lightweight reply-only path.

Verified against the running backend: "hi" and "thanks!" both classify as
chat-only and reply in seconds; "make it prettier" (which a keyword list
would have missed — no build-related word in it) correctly routes to the
full grounding+SQL+verify pipeline.

Frontend (dashboardGenerator.js, DashboardWorkspace.jsx) grows an onChat
handler that appends the reply as a plain agent bubble without touching the
saved config or triggering an auto-save.
---
 .../service/DashboardAgentService.java        | 75 ++++++++++++++++++-
 .../sections/DashboardWorkspace.jsx           |  7 ++
 src/lib/dashboardGenerator.js                 |  9 ++-
 3 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java b/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
index 9c6dcca..47ac0e9 100644
--- a/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
+++ b/backend/src/main/java/com/dbaagent/service/DashboardAgentService.java
@@ -5,6 +5,11 @@
 import com.fasterxml.jackson.databind.ObjectMapper;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.ai.chat.client.ChatClient;
+import org.springframework.ai.chat.messages.Message;
+import org.springframework.ai.chat.messages.SystemMessage;
+import org.springframework.ai.chat.messages.UserMessage;
+import org.springframework.ai.chat.model.ChatModel;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ResponseStatusException;
@@ -51,15 +56,18 @@ public interface StepListener {
     private final AccessControlService accessControlService;
     private final AgentBridgeService agentBridgeService;
     private final AgentChatClient agentChatClient;
+    private final ChatClient intentChatClient;
 
     public DashboardAgentService(ObjectMapper objectMapper,
                                  AccessControlService accessControlService,
                                  AgentBridgeService agentBridgeService,
-                                 AgentChatClient agentChatClient) {
+                                 AgentChatClient agentChatClient,
+                                 ChatModel chatModel) {
         this.objectMapper = objectMapper;
         this.accessControlService = accessControlService;
         this.agentBridgeService = agentBridgeService;
         this.agentChatClient = agentChatClient;
+        this.intentChatClient = ChatClient.builder(chatModel).build();
     }
 
     public Map<String, Object> generate(String connectionId, String prompt, Object currentConfig, StepListener listener) {
@@ -75,6 +83,26 @@ public Map<String, Object> generate(String connectionId, String prompt, Object c
             throw new ResponseStatusException(HttpStatus.BAD_GATEWAY, "The DeepSQL agent is unavailable right now.");
         }
 
+        // Most messages are a real build/edit ask, so default to the full pipeline —
+        // only skip it for something that plainly isn't one (a greeting, a question
+        // about the tool itself). Answering "hi" by grounding on the schema, writing
+        // SQL, and self-reviewing an HTML document is where the multi-minute replies
+        // to trivial messages came from.
+        if (isChatOnly(prompt)) {
+            emit(l, trace, "planning", "Replying…");
+            AgentChatClient.AgentReply chatReply = agentChatClient.sendAndAwait(sessionId, buildChatTask(prompt));
+            if (chatReply.ok() && chatReply.text() != null && !chatReply.text().isBlank()) {
+                emit(l, trace, "done", "Replied");
+                Map<String, Object> chat = new LinkedHashMap<>();
+                chat.put("chat", true);
+                chat.put("reply", chatReply.text().trim());
+                chat.put("trace", trace);
+                return chat;
+            }
+            // Ambiguous or the agent didn't just answer — fall through to a real build
+            // rather than surfacing a failure for what might be a legitimate request.
+        }
+
         emit(l, trace, "planning", "Agent is grounding, writing SQL, and coding the dashboard…");
         AgentChatClient.AgentReply reply = agentChatClient.sendAndAwait(
             sessionId, buildTask(connectionId, prompt, currentConfig));
@@ -106,6 +134,51 @@ public Map<String, Object> generate(String connectionId, String prompt, Object c
         return cfg;
     }
 
+    // ── chat-only detection ─────────────────────────────────────────────────
+
+    // A one-word classification call, not a keyword match: a fixed word list can't
+    // tell "make it prettier" or "no, the other one" from a real edit ask. This is a
+    // direct ChatModel call (no agent session, no tools) so it stays fast — the whole
+    // point is answering "hi" without paying for a grounding+SQL+self-review turn.
+    // Biased toward CHAT=false (i.e. toward the full pipeline) in the prompt itself:
+    // a wrong "this is chat" guess on a real request is far worse than an occasional
+    // unnecessary grounding pass on a genuine one-word greeting.
+    private static final String INTENT_SYSTEM_PROMPT = """
+        Classify one chat message from a BI dashboard builder. Decide whether it is a
+        request to build, edit, or change a chart/dashboard/metric/data view (CHAT=false),
+        or plainly just conversation — a greeting, thanks, or a question about the tool
+        itself with no dashboard content in it (CHAT=true).
+
+        If in doubt, answer false — treat anything that could plausibly be about the data
+        or the dashboard's content/appearance as a real request, even if short or vague
+        ("make it prettier", "no, the other one", "add a filter").
+
+        Reply with exactly one word, "true" or "false". No punctuation, no explanation.
+        """;
+    private static final int CHAT_ONLY_MAX_CHARS = 200;
+
+    private boolean isChatOnly(String prompt) {
+        if (prompt == null) return false;
+        String p = prompt.trim();
+        if (p.isEmpty() || p.length() > CHAT_ONLY_MAX_CHARS) return false;
+        try {
+            List<Message> messages = List.of(new SystemMessage(INTENT_SYSTEM_PROMPT), new UserMessage(p));
+            String verdict = intentChatClient.prompt().messages(messages).call().content();
+            return verdict != null && verdict.trim().toLowerCase().startsWith("true");
+        } catch (Exception e) {
+            log.warn("Chat-intent classification failed, defaulting to full pipeline: {}", e.getMessage());
+            return false;
+        }
+    }
+
+    private String buildChatTask(String prompt) {
+        return "The user sent this message in the dashboard builder's chat: \"" + prompt.trim() + "\"\n\n"
+            + "It does not read as a request to build or change a chart/dashboard — it looks like a "
+            + "greeting, small talk, or a question about what you can do. Reply briefly and naturally "
+            + "in plain text (no HTML, no code block, no tool calls, no grounding, no SQL). If it's a "
+            + "greeting, greet back and invite them to describe a dashboard. Keep it to 1-2 sentences.";
+    }
+
     // ── the task the agent runs ────────────────────────────────────────────
 
     private String buildTask(String connectionId, String prompt, Object currentConfig) {
diff --git a/src/components/sections/DashboardWorkspace.jsx b/src/components/sections/DashboardWorkspace.jsx
index 51e710b..40964de 100644
--- a/src/components/sections/DashboardWorkspace.jsx
+++ b/src/components/sections/DashboardWorkspace.jsx
@@ -126,6 +126,13 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
     if (abortRef.current) abortRef.current()
     abortRef.current = generateDashboardStream(connectionId, prompt, config, {
       onStep: (s) => setSteps((prev) => [...prev, s]),
+      onChat: (reply) => {
+        // Just a reply — e.g. "hi" — not a dashboard change. No save, no config touch.
+        abortRef.current = null
+        setThinking(false)
+        setSteps([])
+        setMessages((m) => [...m, { role: 'agent', text: reply || '…' }])
+      },
       onDone: (next) => {
         abortRef.current = null
         setConfig(next)
diff --git a/src/lib/dashboardGenerator.js b/src/lib/dashboardGenerator.js
index 3331396..b4166d9 100644
--- a/src/lib/dashboardGenerator.js
+++ b/src/lib/dashboardGenerator.js
@@ -7,13 +7,18 @@ 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: onStep({type,message}), onDone(config), onError(Error).
+// Streaming generate. Handlers: 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, { onStep, onDone, onError } = {}) {
+export function generateDashboardStream(connectionId, prompt, currentConfig, { onStep, onDone, onError, onChat } = {}) {
   return dashboardGenAPI.generateStream(connectionId, prompt, currentConfig, {
     onStep,
     onDone: (data) => {
+      if (data?.dashboardConfig?.chat) {
+        onChat && onChat(data.dashboardConfig.reply || '')
+        return
+      }
       if (!data?.dashboardConfig) {
         onError && onError(new Error(data?.error || 'Generation returned no dashboard.'))
         return