fix: UI polish — object display, zero-value modals, dark theme, map sizing, console default

- Dashboard: fix [object object] for REST endpoints — flattenToRecord
  handles nested API responses. Zero-value stats don't open modal.
- Dark theme: lighter grayish black (#1f1f23/#27272b/#18181b) instead
  of deep purple-black
- Codebase Map: negative margin to fill full viewport, no card wrapper
- MCP Console: first tool selected by default on load

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

Author: aksOps

src/main/frontend/src/components/AppLayout.tsx

@@ -39,7 +39,7 @@ export default function AppLayout() {
           position: 'sticky',
           top: 0,
           zIndex: 100,
-          borderBottom: isDark ? '1px solid #2d2d4a' : '1px solid #f0f0f0',
+          borderBottom: isDark ? '1px solid #3f3f46' : '1px solid #f0f0f0',
         }}
       >
         <Typography.Title

src/main/frontend/src/main.tsx

@@ -28,11 +28,11 @@ function ThemedApp() {
         wireframe: false,
         // Dark mode refinements
         ...(isDark ? {
-          colorBgContainer: '#1a1a2e',
-          colorBgElevated: '#1f1f38',
-          colorBgLayout: '#0f0f1a',
-          colorBorder: '#2d2d4a',
-          colorBorderSecondary: '#252542',
+          colorBgContainer: '#1f1f23',
+          colorBgElevated: '#27272b',
+          colorBgLayout: '#18181b',
+          colorBorder: '#3f3f46',
+          colorBorderSecondary: '#34343a',
         } : {
           colorBgContainer: '#ffffff',
           colorBgElevated: '#ffffff',
@@ -41,8 +41,8 @@ function ThemedApp() {
       },
       components: {
         Table: {
-          headerBg: isDark ? '#1f1f38' : '#fafafa',
-          rowHoverBg: isDark ? '#252542' : '#f0f0ff',
+          headerBg: isDark ? '#27272b' : '#fafafa',
+          rowHoverBg: isDark ? '#2d2d33' : '#f0f0ff',
         },
         Card: {
           paddingLG: 20,

src/main/frontend/src/pages/CodebaseMap.tsx

@@ -202,7 +202,7 @@ export default function CodebaseMap() {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 80px)' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 96px)', margin: '-16px -24px', padding: '8px 16px 0' }}>
       {/* Top bar: title + filter */}
       <div style={{
         display: 'flex',

src/main/frontend/src/pages/Dashboard.tsx

@@ -14,6 +14,29 @@ import { useApi } from '@/hooks/useApi';
 import { api } from '@/lib/api';
 import type { StatsResponse } from '@/types/api';
 
+/** Flatten a value into a Record<string, number>. Handles nested objects, numbers, arrays. */
+function flattenToRecord(val: unknown): Record<string, number> {
+  if (!val || typeof val !== 'object') return {};
+  const result: Record<string, number> = {};
+  for (const [k, v] of Object.entries(val as Record<string, unknown>)) {
+    if (typeof v === 'number') {
+      result[k] = v;
+    } else if (typeof v === 'object' && v !== null && !Array.isArray(v)) {
+      // Nested object — flatten one level
+      for (const [k2, v2] of Object.entries(v as Record<string, unknown>)) {
+        if (typeof v2 === 'number') {
+          result[`${k}/${k2}`] = v2;
+        }
+      }
+    }
+  }
+  return result;
+}
+
+function sumValues(rec: Record<string, number>): number {
+  return Object.values(rec).reduce((a, b) => a + b, 0);
+}
+
 interface StatCardProps {
   title: string;
   value: number | string;
@@ -25,21 +48,24 @@ interface StatCardProps {
 function StatCard({ title, value, icon, detail, detailTitle }: StatCardProps) {
   const [open, setOpen] = useState(false);
 
-  const tableData = detail
-    ? Object.entries(detail)
+  // Only allow click if detail has entries and total > 0
+  const hasDetail = detail && Object.keys(detail).length > 0 && sumValues(detail) > 0;
+
+  const tableData = hasDetail
+    ? Object.entries(detail!)
         .sort((a, b) => b[1] - a[1])
         .map(([name, count]) => ({ key: name, name, count }))
     : [];
 
   return (
     <>
       <Card
-        hoverable={!!detail}
-        onClick={() => detail && setOpen(true)}
-        style={{ cursor: detail ? 'pointer' : 'default' }}
+        hoverable={!!hasDetail}
+        onClick={() => hasDetail && setOpen(true)}
+        style={{ cursor: hasDetail ? 'pointer' : 'default' }}
       >
         <Statistic title={title} value={value} prefix={icon} />
-        {detail && (
+        {hasDetail && (
           <Typography.Text type="secondary" style={{ fontSize: 12 }}>
             Click for breakdown
           </Typography.Text>
@@ -76,9 +102,9 @@ function isComputedStats(s: StatsResponse): s is StatsResponse & {
   graph: { nodes: number; edges: number; files: number };
   languages: Record<string, number>;
   frameworks: Record<string, number>;
-  connections?: { rest?: Record<string, number> };
-  auth?: Record<string, number>;
-  architecture?: Record<string, number>;
+  connections?: unknown;
+  auth?: unknown;
+  architecture?: unknown;
 } {
   return 'graph' in s;
 }
@@ -95,14 +121,13 @@ export default function Dashboard() {
   const nodeCount = computed?.graph?.nodes ?? queryStats?.node_count ?? 0;
   const edgeCount = computed?.graph?.edges ?? queryStats?.edge_count ?? 0;
   const fileCount = computed?.graph?.files ?? 0;
-  const languages = computed?.languages ?? {};
+  const languages = flattenToRecord(computed?.languages);
   const langCount = Object.keys(languages).length;
-  const frameworks = computed?.frameworks ?? {};
-  const connections = computed?.connections?.rest ?? {};
-  const auth = computed?.auth ?? {};
-  const architecture = computed?.architecture ?? {};
+  const frameworks = flattenToRecord(computed?.frameworks);
+  const connections = flattenToRecord(computed?.connections);
+  const auth = flattenToRecord(computed?.auth);
+  const architecture = flattenToRecord(computed?.architecture);
 
-  // Build node kind breakdown from kinds API
   const nodeKindBreakdown: Record<string, number> = {};
   if (kinds?.kinds) {
     for (const k of kinds.kinds) {
@@ -167,7 +192,7 @@ export default function Dashboard() {
         <Col xs={12} sm={8} md={6}>
           <StatCard
             title="REST Endpoints"
-            value={Object.values(connections).reduce((a, b) => a + b, 0)}
+            value={sumValues(connections)}
             icon={<ApiOutlined />}
             detail={connections}
             detailTitle="REST Endpoints by Method"
@@ -176,7 +201,7 @@ export default function Dashboard() {
         <Col xs={12} sm={8} md={6}>
           <StatCard
             title="Auth Guards"
-            value={Object.values(auth).reduce((a, b) => a + b, 0)}
+            value={sumValues(auth)}
             icon={<SafetyOutlined />}
             detail={auth}
             detailTitle="Auth Patterns"
@@ -193,7 +218,6 @@ export default function Dashboard() {
         </Col>
       </Row>
 
-      {/* Frameworks as tags for quick glance */}
       {Object.keys(frameworks).length > 0 && (
         <Card title="Detected Frameworks" style={{ marginTop: 16 }} size="small">
           <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>

src/main/frontend/src/pages/McpConsole.tsx

@@ -54,7 +54,7 @@ function countResults(json: unknown): number | null {
 }
 
 export default function McpConsole() {
-  const [selectedTool, setSelectedTool] = useState<McpTool | null>(null);
+  const [selectedTool, setSelectedTool] = useState<McpTool | null>(TOOLS[0] ?? null);
   const [response, setResponse] = useState<string>('');
   const [status, setStatus] = useState<number | null>(null);
   const [duration, setDuration] = useState<number | null>(null);