Merge pull request #115 from codervisor/copilot/implement-spec-193

feat(ui-vite): Implement core visualization features for UI parity (Spec 193, Phase 1-2)

Author: tikazyq

packages/ui-vite/package.json

@@ -14,13 +14,19 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.8",
     "@leanspec/ui-components": "workspace:*",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lucide-react": "^0.553.0",
+    "mermaid": "^11.12.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^9.1.0",
     "react-router-dom": "^7.11.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "reactflow": "^11.11.4",
+    "recharts": "^3.6.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0"
@@ -35,6 +41,7 @@
     "@types/node": "^24.10.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.23",
     "eslint": "^9.39.2",

packages/ui-vite/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Outlet, Link, useLocation } from 'react-router-dom';
-import { BarChart3, FileText, Network, Settings, Keyboard } from 'lucide-react';
+import { BarChart3, FileText, Network, Settings, Keyboard, LayoutDashboard } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { ProjectSwitcher } from './ProjectSwitcher';
 import { ThemeToggle } from './ThemeToggle';
@@ -8,6 +8,7 @@ import { useState } from 'react';
 
 function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
   const shortcuts = [
+    { key: 'h', description: 'Go to dashboard (home)' },
     { key: 'g', description: 'Go to specs list' },
     { key: 's', description: 'Go to stats' },
     { key: 'd', description: 'Go to dependencies' },
@@ -47,6 +48,7 @@ export function Layout() {
   useGlobalShortcuts();
 
   const navItems = [
+    { path: '/', label: 'Dashboard', icon: LayoutDashboard },
     { path: '/specs', label: 'Specs', icon: FileText },
     { path: '/stats', label: 'Stats', icon: BarChart3 },
     { path: '/dependencies', label: 'Dependencies', icon: Network },
@@ -63,7 +65,9 @@ export function Layout() {
             <nav className="flex gap-1">
               {navItems.map((item) => {
                 const Icon = item.icon;
-                const isActive = location.pathname.startsWith(item.path);
+                const isActive = item.path === '/' 
+                  ? location.pathname === '/' 
+                  : location.pathname.startsWith(item.path);
                 return (
                   <Link
                     key={item.path}

packages/ui-vite/src/components/MermaidDiagram.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+
+interface MermaidDiagramProps {
+  chart: string;
+  className?: string;
+}
+
+// Initialize mermaid with configuration
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+});
+
+// Generate unique IDs for Mermaid diagrams using crypto.randomUUID or fallback
+const generateId = () => {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return `mermaid-${crypto.randomUUID()}`;
+  }
+  // Fallback for older browsers
+  return `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+  const [id] = useState(generateId);
+
+  useEffect(() => {
+    if (!chart || !ref.current) return;
+
+    const renderDiagram = async () => {
+      try {
+        setError(null);
+        // Update theme based on document theme
+        const isDark = document.documentElement.classList.contains('dark');
+        mermaid.initialize({
+          theme: isDark ? 'dark' : 'default',
+          securityLevel: 'loose',
+        });
+
+        const { svg } = await mermaid.render(id, chart);
+        setSvg(svg);
+      } catch (err) {
+        console.error('Mermaid rendering error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to render diagram');
+      }
+    };
+
+    renderDiagram();
+  }, [chart, id]);
+
+  if (error) {
+    return (
+      <div className={`border border-destructive rounded-lg p-4 ${className}`}>
+        <div className="text-sm text-destructive">
+          <strong>Mermaid Diagram Error:</strong>
+          <pre className="mt-2 text-xs overflow-auto">{error}</pre>
+        </div>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className={`border rounded-lg p-4 ${className}`}>
+        <div className="text-sm text-muted-foreground">Loading diagram...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      ref={ref}
+      className={`mermaid-diagram border rounded-lg p-4 overflow-auto ${className}`}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

packages/ui-vite/src/hooks/useKeyboardShortcuts.ts

@@ -44,6 +44,11 @@ export function useGlobalShortcuts() {
   const navigate = useNavigate();
 
   const shortcuts: KeyboardShortcut[] = [
+    {
+      key: 'h',
+      description: 'Go to dashboard (home)',
+      action: useCallback(() => navigate('/'), [navigate]),
+    },
     {
       key: 'g',
       description: 'Go to specs list',