@leanspec/ui 0.2.11 → 0.2.12

package/.next/standalone/packages/ui/src/app/api/search/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import { getSpecsWithMetadata } from '@/lib/db/service-queries';
+import { isDefaultProject } from '@/lib/projects/constants';
+
+export async function POST(request: Request) {
+  let body: any;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json(
+      { error: 'Invalid request body', code: 'INVALID_REQUEST' },
+      { status: 400 }
+    );
+  }
+
+  const { query, projectId } = body || {};
+  if (!query || typeof query !== 'string') {
+    return NextResponse.json(
+      { error: 'Query is required', code: 'INVALID_REQUEST' },
+      { status: 400 }
+    );
+  }
+
+  const scopedProjectId = isDefaultProject(projectId) ? undefined : projectId;
+
+  try {
+    const specs = await getSpecsWithMetadata(scopedProjectId);
+    const queryLower = query.toLowerCase();
+
+    const results = specs.filter((spec) => {
+      const title = spec.title || spec.specName || '';
+      const path = spec.specName || '';
+      const tags = spec.tags || [];
+
+      return (
+        title.toLowerCase().includes(queryLower) ||
+        path.toLowerCase().includes(queryLower) ||
+        tags.some((tag) => tag.toLowerCase().includes(queryLower))
+      );
+    });
+
+    return NextResponse.json({
+      results,
+      total: results.length,
+      query,
+    });
+  } catch (error) {
+    console.error('Error performing search:', error);
+    return NextResponse.json(
+      { error: 'Failed to perform search', code: 'INTERNAL_ERROR' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/src/app/health/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+import pkg from '../../../package.json';
+
+export async function GET() {
+  return NextResponse.json({
+    status: 'ok',
+    version: process.env.npm_package_version || pkg.version,
+  });
+}

package/.next/standalone/packages/ui/src/lib/spec-utils/frontmatter.ts

@@ -7,12 +7,15 @@
  * @see spec 181-typescript-deprecation-rust-migration
  */
 import matter from 'gray-matter';
-import { load, FAILSAFE_SCHEMA } from 'js-yaml';
+import { dump, load, FAILSAFE_SCHEMA } from 'js-yaml';
 
-// Shared YAML engine for gray-matter to avoid js-yaml safeLoad removal
+// Shared YAML engine for gray-matter to avoid js-yaml safeLoad/safeDump removal
 export const safeMatterOptions = {
   engines: {
-    yaml: (str: string) => load(str, { schema: FAILSAFE_SCHEMA }) as Record<string, unknown>,
+    yaml: {
+      parse: (str: string) => load(str, { schema: FAILSAFE_SCHEMA }) as Record<string, unknown>,
+      stringify: (data: unknown) => dump(data),
+    },
   },
 };
 
@@ -52,7 +55,7 @@ export interface SpecFrontmatter {
  */
 function normalizeDateFields(data: Record<string, unknown>): void {
   const dateFields = ['created', 'completed', 'updated', 'due'];
-  
+
   for (const field of dateFields) {
     if (data[field] instanceof Date) {
       data[field] = (data[field] as Date).toISOString().split('T')[0];
@@ -124,24 +127,24 @@ function getStatusEmojiPlain(status: string): string {
 function updateVisualMetadata(content: string, frontmatter: SpecFrontmatter): string {
   const statusEmoji = getStatusEmojiPlain(frontmatter.status);
   const statusLabel = frontmatter.status.charAt(0).toUpperCase() + frontmatter.status.slice(1).replace('-', ' ');
-  
+
   // Use the created date as-is (already in YYYY-MM-DD format)
   const created = frontmatter.created;
-  
+
   // Build metadata line
   let metadataLine = `> **Status**: ${statusEmoji} ${statusLabel}`;
-  
+
   if (frontmatter.priority) {
     const priorityLabel = frontmatter.priority.charAt(0).toUpperCase() + frontmatter.priority.slice(1);
     metadataLine += ` · **Priority**: ${priorityLabel}`;
   }
-  
+
   metadataLine += ` · **Created**: ${created}`;
-  
+
   if (frontmatter.tags && frontmatter.tags.length > 0) {
     metadataLine += ` · **Tags**: ${frontmatter.tags.join(', ')}`;
   }
-  
+
   // For enterprise template with assignee/reviewer
   let secondLine = '';
   if (frontmatter.assignee || frontmatter.reviewer) {
@@ -149,10 +152,10 @@ function updateVisualMetadata(content: string, frontmatter: SpecFrontmatter): st
     const reviewer = frontmatter.reviewer || 'TBD';
     secondLine = `\n> **Assignee**: ${assignee} · **Reviewer**: ${reviewer}`;
   }
-  
+
   // Replace existing metadata block or add after title
   const metadataPattern = /^>\s+\*\*Status\*\*:.*(?:\n>\s+\*\*Assignee\*\*:.*)?/m;
-  
+
   if (metadataPattern.test(content)) {
     // Replace existing metadata
     return content.replace(metadataPattern, metadataLine + secondLine);
@@ -164,7 +167,7 @@ function updateVisualMetadata(content: string, frontmatter: SpecFrontmatter): st
       return content.slice(0, insertPos) + '\n\n' + metadataLine + secondLine + '\n' + content.slice(insertPos);
     }
   }
-  
+
   return content;
 }
 
@@ -203,8 +206,8 @@ export function createUpdatedFrontmatter(
   updatedContent = updateVisualMetadata(updatedContent, newData as SpecFrontmatter);
 
   // Stringify back to markdown
-  const newContent = matter.stringify(updatedContent, newData);
-  
+  const newContent = matter.stringify(updatedContent, newData, safeMatterOptions);
+
   return {
     content: newContent,
     frontmatter: newData as SpecFrontmatter

package/.next/standalone/packages/ui-components/package.json

@@ -60,13 +60,13 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
+    "@dagrejs/dagre": "^1.1.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "lucide-react": "^0.553.0",
@@ -74,26 +74,26 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/addon-links": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-vite": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
     "@storybook/test": "^8.6.15",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20.19.27",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "storybook": "^8.6.3",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5",
-    "vite": "^6.0.1",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^4.0.6"
+    "storybook": "^8.6.15",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.16"
   }
 }

package/.next/standalone/packages/ui-vite/package.json

@@ -14,40 +14,47 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.8",
     "@leanspec/ui-components": "workspace:*",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lucide-react": "^0.553.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "mermaid": "^11.12.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-markdown": "^9.1.0",
-    "react-router-dom": "^7.10.1",
+    "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"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@tailwindcss/typography": "^0.5.15",
+    "@eslint/js": "^9.39.2",
+    "@tailwindcss/typography": "^0.5.19",
     "@tauri-apps/api": "^2.9.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.39.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
     "jsdom": "^27.3.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4",
-    "vitest": "^4.0.6"
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
   },
   "keywords": [
     "leanspec",

package/.next/standalone/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}

package/.next/standalone/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 }}
+    />
+  );
+}

package/.next/standalone/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',