fix: improve dashboard UI (View as row, icon, chat markdown)

Address three dashboard UI issues from product feedback:

1. Hide View as row in immersive mode (DashboardWorkspace)
   - ProfileSwitch is now hidden when immersive mode is active
   - Reclaims vertical space in the dashboard editor
   - File: src/pages/Home.jsx

2. Change dashboard icon to monochrome outline style
   - Removed purple filled square background (#534AB7)
   - Now uses simple grey LineChart icon that matches app iconography
   - Files: src/components/sections/DashboardWorkspace.jsx,
            src/components/sections/DashboardWorkspace.module.css

3. Add markdown rendering to dashboard chat bubbles
   - Agent responses now render with ReactMarkdown + remark-gfm
   - Added CSS styles for bullets, code blocks, headers, links
   - Makes agent replies more scannable with proper structure
   - Files: src/components/sections/DashboardWorkspace.jsx,
            src/components/sections/DashboardWorkspace.module.css

Co-authored-by: Venkat SF <venkatesh.sakamuri@stayflexi.com>

Author: cursoragent

src/components/sections/DashboardWorkspace.jsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef, useCallback, lazy, Suspense } from '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 ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import DashboardArtifact from '@/components/DashboardArtifact'
 import ShareMenu from './ShareMenu'
 import { savedDashboardsAPI } from '@/lib/api/client'
@@ -506,7 +508,7 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
     <div className={styles.root}>
       <header className={styles.topbar}>
         <button className={styles.logoBtn} onClick={onClose} title="Back to dashboards" aria-label="Back to dashboards">
-          <span className={styles.logoMark}><LineChart size={15} color="#fff" /></span>
+          <LineChart size={18} className={styles.logoIcon} />
         </button>
         <button className={styles.crumbLink} onClick={onClose}>Dashboards</button>
         <span className={styles.sep}>/</span>
@@ -556,7 +558,11 @@ export default function DashboardWorkspace({ connectionId, dashboard, onClose })
           <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}
+                {msg.role === 'agent' && !msg.error ? (
+                  <div className={styles.agentMarkdown}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.text}</ReactMarkdown>
+                  </div>
+                ) : msg.text}
               </div>
             ))}
             {!intro && thinking && (

src/components/sections/DashboardWorkspace.module.css

@@ -38,15 +38,12 @@
 }
 .logoBtn:active { transform: scale(0.92); }
 
-.logoMark {
-  width: 26px;
-  height: 26px;
-  border-radius: 7px;
-  background: #534AB7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.logoIcon {
+  color: #555;
+  flex-shrink: 0;
+  transition: color 120ms ease-out;
 }
+.logoBtn:hover .logoIcon { color: #111; }
 
 .crumbLink {
   border: none;
@@ -306,6 +303,60 @@
   animation: bubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+.agentMarkdown {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #26262a;
+}
+.agentMarkdown p { margin: 0 0 8px; }
+.agentMarkdown p:last-child { margin-bottom: 0; }
+.agentMarkdown ul, .agentMarkdown ol {
+  margin: 6px 0;
+  padding-left: 18px;
+}
+.agentMarkdown li {
+  margin: 3px 0;
+}
+.agentMarkdown li::marker {
+  color: #9a97ad;
+}
+.agentMarkdown strong {
+  font-weight: 600;
+  color: #111;
+}
+.agentMarkdown code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  background: #f5f5f7;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+.agentMarkdown pre {
+  background: #f5f5f7;
+  border-radius: 6px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+.agentMarkdown pre code {
+  background: none;
+  padding: 0;
+}
+.agentMarkdown h1, .agentMarkdown h2, .agentMarkdown h3 {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 10px 0 6px;
+  color: #111;
+}
+.agentMarkdown h1:first-child, .agentMarkdown h2:first-child, .agentMarkdown h3:first-child {
+  margin-top: 0;
+}
+.agentMarkdown a {
+  color: #534AB7;
+  text-decoration: none;
+}
+.agentMarkdown a:hover { text-decoration: underline; }
+
 .bubbleUser {
   align-self: flex-end;
   max-width: 92%;

src/pages/Home.jsx

@@ -79,7 +79,7 @@ export default function Home() {
 
       {/* Main content — lazy-mount sections on first visit, then keep alive */}
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column' }}>
-        {canSwitchProfile && <ProfileSwitch />}
+        {canSwitchProfile && !immersive && <ProfileSwitch />}
         <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
           {visibleSections.map(([key, Section]) => {
             if (!mounted.has(key)) return null