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

[venkateshsakamuri-lab]

Summary

Three UI polish fixes for dashboard surfaces based on product feedback, plus follow-up fixes for agent reply brevity, View as relocation, and connection control consolidation.

Fix 1: Eliminate wasted View as row space → Relocated to sidebar

Before: The ProfileSwitch ("View as") component occupied an entire row across the top of every page, creating unnecessary vertical padding even when empty for non-admin users.

After: ProfileSwitch is now permanently located in the left sidebar, above the Connections section. This removes the distracting top-row control from all pages and groups admin controls together logically.

Fix 2: Dashboard icon — monochrome outline instead of purple filled square

Before: The dashboard workspace logo button used a purple filled square background with a white chart icon.

After: Monochrome outline style matching the design system — a simple LineChart icon in dark gray that subtly darkens on hover.

Dashboard workspace with monochrome icon

Fix 3: Agent chat markdown rendering with brevity rules

Before: Agent replies were plain text blobs without formatting, difficult to scan quickly. The agent itself was verbose, restating the user's request and adding filler phrases.

After: Agent bubbles now render markdown (bullets, code blocks, headers, links) via ReactMarkdown with remark-gfm. Additionally, the backend agent prompts now include explicit brevity rules:

• Lead with what changed, no filler or restating the request
• Keep replies to 1-3 short lines, use bullets when listing multiple items
• Skip phrases like "I've created...", "Here's what I did...", "As requested..."
• Only write more than 3 lines for errors, limitations, or breaking changes

Fix 4: Consolidate connection controls into single dropdown

Before: The sidebar had two separate connection-related controls stacked:

• Connection dropdown (to switch between connections)
• Separate "Connections" button (to open management modal)

After: Merged into a single control — the connection dropdown now includes a "Manage connections..." action at the bottom for admins. This streamlines the sidebar and reduces visual clutter.

Streamlined sidebar with consolidated connection control

Connection dropdown with Manage connections action

Technical Changes

Frontend

• src/pages/Home.jsx — Removed ProfileSwitch entirely (relocated to sidebar)
• src/components/layout/AppSidebar.jsx:
  • Added ProfileSwitch above connection switcher in bottom section
  • Removed separate Connections button
  • Added "Manage connections..." action inside connection dropdown
• src/components/layout/AppSidebar.module.css — Added .dropdownDivider and .dropdownManage styles
• src/components/layout/ProfileSwitch.jsx — Added collapsed prop support and sidebar-compatible styling
• src/components/layout/ProfileSwitch.module.css — Added sidebar variant styles
• src/components/sections/DashboardWorkspace.jsx — Changed icon from purple filled square to monochrome outline; added ReactMarkdown rendering for agent bubbles
• src/components/sections/DashboardWorkspace.module.css — Removed .logoMark, added .logoIcon and .agentMarkdown styles

Backend

• backend/src/main/java/com/dbaagent/service/DashboardAgentService.java — Added explicit brevity style rules to both buildChatTask() and buildTask() (step 7 dashboard-note) prompts

Testing

• Frontend lint: ✅ Passes (pre-existing warnings only)
• Manual UI verification:
  • ✅ View as control now in sidebar above Connections
  • ✅ Connection dropdown includes "Manage connections..." action
  • ✅ No separate Connections button in sidebar
  • ✅ Collapsed sidebar behavior preserved

_{To show artifacts inline, enable in settings.}