feat(dashboards): v0.dev-style centered intro and editable breadcrumb title

A brand-new dashboard now opens with the composer centered and no side
panel/canvas chrome, docking smoothly into the left panel the instant the
first message is sent instead of showing the docked layout from the start.
Driven by whether a user message exists yet, so reopening any dashboard with
prior history skips straight to the normal docked layout.

The breadcrumb now reads "Untitled dashboard" (was "New dashboard") and is
directly editable inline. A rename takes priority over both the agent's
HTML-derived title and the saved row's name, and survives future builds —
including a fix for the build-completion path, which persists its own
HTML-derived name server-side and would otherwise silently revert a pending
rename the moment a build finished.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: notSumit25

src/components/sections/DashboardWorkspace.jsx

@@ -1,5 +1,5 @@
 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, Database, History, RotateCcw, Eye, RefreshCw, ChevronDown, BellRing, Trash2 } 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'
@@ -117,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, liveShell, liveWidget, renderHtml } = 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)
@@ -281,14 +281,54 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
   // 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)
   }
@@ -445,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) && (
@@ -462,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}>
@@ -501,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}
@@ -514,8 +589,10 @@ 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 || liveConfig ? (
             <>
@@ -818,33 +895,18 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
             <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>
   )

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;