@leanspec/ui 0.2.11 → 0.2.12

package/.next/standalone/packages/ui-vite/src/pages/DependenciesPage.tsx

@@ -1,19 +1,142 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { api, type DependencyGraph } from '../lib/api';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import ReactFlow, {
+  type Node,
+  type Edge,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  Position,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import dagre from '@dagrejs/dagre';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@leanspec/ui-components';
+import { Network, List } from 'lucide-react';
+import { api, type DependencyGraph as APIDependencyGraph } from '../lib/api';
+
+// Node layout using dagre
+const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const nodeWidth = 200;
+  const nodeHeight = 80;
+
+  dagreGraph.setGraph({ rankdir: direction, ranksep: 100, nodesep: 50 });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      },
+    };
+  });
+
+  return { nodes: layoutedNodes, edges };
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'complete':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 border-green-500';
+    case 'in-progress':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 border-blue-500';
+    case 'planned':
+      return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-500';
+    case 'archived':
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300 border-gray-500';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300 border-gray-500';
+  }
+};
 
 export function DependenciesPage() {
   const { specName } = useParams<{ specName: string }>();
-  const [graph, setGraph] = useState<DependencyGraph | null>(null);
+  const navigate = useNavigate();
+  const [graph, setGraph] = useState<APIDependencyGraph | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'graph' | 'list'>('graph');
+  
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
   useEffect(() => {
     api.getDependencies(specName)
-      .then(setGraph)
+      .then((data) => {
+        setGraph(data);
+        
+        // Convert API graph to React Flow format
+        const flowNodes: Node[] = data.nodes.map((node) => ({
+          id: node.id,
+          data: { 
+            label: (
+              <div className="text-center p-2">
+                <div className="font-medium text-sm">{node.name}</div>
+                <div className={`text-xs px-2 py-0.5 rounded mt-1 ${getStatusColor(node.status)}`}>
+                  {node.status}
+                </div>
+              </div>
+            ),
+            name: node.name,
+            status: node.status,
+          },
+          position: { x: 0, y: 0 },
+          type: 'default',
+          sourcePosition: Position.Bottom,
+          targetPosition: Position.Top,
+          style: {
+            border: '2px solid',
+            borderRadius: '8px',
+            padding: '10px',
+            width: 200,
+          },
+          className: getStatusColor(node.status),
+        }));
+
+        const flowEdges: Edge[] = data.edges.map((edge, index) => ({
+          id: `${edge.source}-${edge.target}-${index}`,
+          source: edge.source,
+          target: edge.target,
+          type: 'smoothstep',
+          animated: edge.type === 'depends_on',
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+          },
+          label: edge.type === 'depends_on' ? 'depends on' : 'required by',
+          style: { stroke: edge.type === 'depends_on' ? '#3B82F6' : '#6B7280' },
+        }));
+
+        const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
+          flowNodes,
+          flowEdges
+        );
+        
+        setNodes(layoutedNodes);
+        setEdges(layoutedEdges);
+      })
       .catch((err) => setError(err.message))
       .finally(() => setLoading(false));
-  }, [specName]);
+  }, [specName, setNodes, setEdges]);
+
+  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
+    navigate(`/specs/${node.id}`);
+  }, [navigate]);
 
   if (loading) {
     return <div className="text-center py-12">Loading dependencies...</div>;
@@ -28,39 +151,102 @@ export function DependenciesPage() {
   }
 
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-6">
-        {specName ? `Dependencies for ${specName}` : 'All Dependencies'}
-      </h2>
-
-      <div className="border rounded-lg p-6">
-        <p className="text-muted-foreground mb-4">
-          Dependency graph visualization will be implemented with a proper graph component.
-        </p>
-        <div className="space-y-4">
-          <div>
-            <h3 className="font-medium mb-2">Nodes ({graph.nodes.length})</h3>
-            <div className="grid gap-2 sm:grid-cols-2 md:grid-cols-3">
-              {graph.nodes.map((node) => (
-                <div key={node.id} className="p-2 bg-secondary rounded text-sm">
-                  <div className="font-medium">{node.name}</div>
-                  <div className="text-xs text-muted-foreground">{node.status}</div>
-                </div>
-              ))}
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">
+            {specName ? `Dependencies for ${specName}` : 'All Dependencies'}
+          </h2>
+          <p className="text-muted-foreground mt-1">
+            {graph.nodes.length} specs, {graph.edges.length} relationships
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant={viewMode === 'graph' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('graph')}
+          >
+            <Network className="w-4 h-4 mr-2" />
+            Graph
+          </Button>
+          <Button
+            variant={viewMode === 'list' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('list')}
+          >
+            <List className="w-4 h-4 mr-2" />
+            List
+          </Button>
+        </div>
+      </div>
+
+      {viewMode === 'graph' ? (
+        <Card>
+          <CardContent className="p-0">
+            <div style={{ height: '600px' }} className="border rounded-lg">
+              <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onNodeClick={onNodeClick}
+                fitView
+                attributionPosition="bottom-left"
+              >
+                <Controls />
+                <Background />
+              </ReactFlow>
             </div>
-          </div>
-          <div>
-            <h3 className="font-medium mb-2">Edges ({graph.edges.length})</h3>
-            <div className="space-y-1">
-              {graph.edges.map((edge, i) => (
-                <div key={i} className="text-sm text-muted-foreground">
-                  {edge.source} → {edge.target} ({edge.type})
-                </div>
-              ))}
+            <div className="p-4 text-sm text-muted-foreground">
+              Click on a node to view spec details. Use mouse wheel to zoom, drag to pan.
             </div>
-          </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Specs ({graph.nodes.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {graph.nodes.map((node) => (
+                  <button
+                    key={node.id}
+                    onClick={() => navigate(`/specs/${node.id}`)}
+                    className="w-full p-3 bg-secondary rounded-lg hover:bg-secondary/80 transition-colors text-left"
+                  >
+                    <div className="font-medium">{node.name}</div>
+                    <div className={`text-xs px-2 py-0.5 rounded mt-1 inline-block ${getStatusColor(node.status)}`}>
+                      {node.status}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+          
+          <Card>
+            <CardHeader>
+              <CardTitle>Relationships ({graph.edges.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {graph.edges.map((edge, i) => (
+                  <div key={i} className="p-3 bg-secondary rounded-lg text-sm">
+                    <div className="font-medium">{edge.source}</div>
+                    <div className="text-xs text-muted-foreground my-1">
+                      {edge.type === 'depends_on' ? '↓ depends on' : '↑ required by'}
+                    </div>
+                    <div className="font-medium">{edge.target}</div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
         </div>
-      </div>
+      )}
     </div>
   );
 }

package/.next/standalone/packages/ui-vite/src/pages/SpecDetailPage.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, Edit2, Save, X } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { api, type SpecDetail, type Spec } from '../lib/api';
+import { MermaidDiagram } from '../components/MermaidDiagram';
 
 function MetadataEditor({ 
   spec, 
@@ -256,7 +257,29 @@ export function SpecDetailPage() {
       )}
 
       <div className="prose prose-sm dark:prose-invert max-w-none">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+        <ReactMarkdown 
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code({ className, children, ...props }: any) {
+              const inline = !className?.includes('language-');
+              const match = /language-(\w+)/.exec(className || '');
+              const language = match ? match[1] : null;
+              const code = String(children).replace(/\n$/, '');
+              
+              // Render mermaid diagrams
+              if (!inline && language === 'mermaid') {
+                return <MermaidDiagram chart={code} className="my-4" />;
+              }
+              
+              // Regular code blocks
+              return (
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              );
+            },
+          }}
+        >
           {spec.content}
         </ReactMarkdown>
       </div>

package/.next/standalone/packages/ui-vite/src/pages/StatsPage.tsx

@@ -1,6 +1,34 @@
 import { useState, useEffect } from 'react';
+import { 
+  BarChart, 
+  Bar, 
+  PieChart, 
+  Pie, 
+  Cell, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer,
+  Legend
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@leanspec/ui-components';
 import { api, type Stats } from '../lib/api';
 
+const STATUS_COLORS = {
+  planned: '#3B82F6',
+  'in-progress': '#F59E0B',
+  complete: '#10B981',
+  archived: '#6B7280',
+};
+
+const PRIORITY_COLORS = {
+  critical: '#EF4444',
+  high: '#F59E0B',
+  medium: '#3B82F6',
+  low: '#6B7280',
+};
+
 export function StatsPage() {
   const [stats, setStats] = useState<Stats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -25,54 +53,153 @@ export function StatsPage() {
     );
   }
 
+  // Prepare data for charts
+  const statusData = Object.entries(stats.by_status).map(([status, count]) => ({
+    name: status.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+    value: count,
+    fill: STATUS_COLORS[status as keyof typeof STATUS_COLORS] || '#6B7280',
+  }));
+
+  const priorityData = Object.entries(stats.by_priority).map(([priority, count]) => ({
+    name: priority.charAt(0).toUpperCase() + priority.slice(1),
+    value: count,
+    fill: PRIORITY_COLORS[priority as keyof typeof PRIORITY_COLORS] || '#6B7280',
+  }));
+
+  const completionRate = stats.total > 0 
+    ? ((stats.by_status.complete || 0) / stats.total * 100).toFixed(1)
+    : '0';
+
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-6">Statistics</h2>
-
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <div className="border rounded-lg p-6">
-          <h3 className="text-sm font-medium text-muted-foreground mb-2">Total Specs</h3>
-          <p className="text-3xl font-bold">{stats.total}</p>
-        </div>
-
-        <div className="border rounded-lg p-6">
-          <h3 className="text-sm font-medium text-muted-foreground mb-4">By Status</h3>
-          <div className="space-y-2">
-            {Object.entries(stats.by_status).map(([status, count]) => (
-              <div key={status} className="flex justify-between items-center">
-                <span className="text-sm capitalize">{status}</span>
-                <span className="font-medium">{count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="border rounded-lg p-6">
-          <h3 className="text-sm font-medium text-muted-foreground mb-4">By Priority</h3>
-          <div className="space-y-2">
-            {Object.entries(stats.by_priority).map(([priority, count]) => (
-              <div key={priority} className="flex justify-between items-center">
-                <span className="text-sm capitalize">{priority}</span>
-                <span className="font-medium">{count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {Object.keys(stats.by_tag).length > 0 && (
-          <div className="border rounded-lg p-6 md:col-span-2 lg:col-span-3">
-            <h3 className="text-sm font-medium text-muted-foreground mb-4">By Tag</h3>
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">Statistics</h2>
+        <p className="text-muted-foreground mt-1">Overview of your specifications</p>
+      </div>
+
+      {/* Summary Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Total Specs
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats.total}</div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Completed
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats.by_status.complete || 0}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {completionRate}% completion rate
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              In Progress
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats.by_status['in-progress'] || 0}</div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Planned
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{stats.by_status.planned || 0}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Status Distribution - Pie Chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Status Distribution</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={statusData}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={({ name, value }) => `${name}: ${value}`}
+                  outerRadius={80}
+                  dataKey="value"
+                >
+                  {statusData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.fill} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Priority Distribution - Bar Chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Priority Distribution</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={priorityData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="value" fill="#3B82F6" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Tags */}
+      {Object.keys(stats.by_tag).length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Tags</CardTitle>
+          </CardHeader>
+          <CardContent>
             <div className="grid gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {Object.entries(stats.by_tag).map(([tag, count]) => (
-                <div key={tag} className="flex justify-between items-center p-2 bg-secondary rounded">
-                  <span className="text-sm">{tag}</span>
-                  <span className="font-medium">{count}</span>
-                </div>
-              ))}
+              {Object.entries(stats.by_tag)
+                .sort(([, a], [, b]) => b - a)
+                .map(([tag, count]) => (
+                  <div 
+                    key={tag} 
+                    className="flex justify-between items-center p-3 bg-secondary rounded-lg hover:bg-secondary/80 transition-colors"
+                  >
+                    <span className="text-sm font-medium">{tag}</span>
+                    <span className="text-sm font-bold">{count}</span>
+                  </div>
+                ))}
             </div>
-          </div>
-        )}
-      </div>
+          </CardContent>
+        </Card>
+      )}
     </div>
   );
 }

package/.next/standalone/packages/ui-vite/src/router.tsx

@@ -1,5 +1,6 @@
-import { createBrowserRouter, Navigate } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 import { Layout } from './components/Layout';
+import { DashboardPage } from './pages/DashboardPage';
 import { SpecsPage } from './pages/SpecsPage';
 import { SpecDetailPage } from './pages/SpecDetailPage';
 import { StatsPage } from './pages/StatsPage';
@@ -11,7 +12,7 @@ export const router = createBrowserRouter([
     path: '/',
     element: <Layout />,
     children: [
-      { index: true, element: <Navigate to="/specs" replace /> },
+      { index: true, element: <DashboardPage /> },
       { path: 'specs', element: <SpecsPage /> },
       { path: 'specs/:specName', element: <SpecDetailPage /> },
       { path: 'stats', element: <StatsPage /> },