@leanspec/ui 0.2.8 → 0.2.9

package/.next/standalone/packages/ui/src/app/dependencies/spec-node.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { cn } from '@/lib/utils';
+import type { SpecNodeData } from './types';
+import {
+  NODE_WIDTH,
+  COMPACT_NODE_WIDTH,
+  toneClasses,
+} from './constants';
+
+export const SpecNode = React.memo(function SpecNode({ data }: NodeProps<SpecNodeData>) {
+  const isCompact = data.isCompact;
+  const isSecondary = data.isSecondary;
+  const depthOpacity =
+    data.connectionDepth === 0
+      ? 1
+      : data.connectionDepth === 1
+      ? 0.95
+      : data.connectionDepth === 2
+      ? 0.7
+      : data.isDimmed
+      ? 0.15
+      : 1;
+
+  // Secondary nodes (shown due to critical path) are slightly transparent
+  const baseOpacity = isSecondary ? 0.65 : 1;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded-lg shadow-lg transition-all duration-200',
+        toneClasses[data.tone],
+        data.interactive && 'cursor-pointer hover:scale-105 hover:shadow-xl hover:border-white/50',
+        data.isFocused && 'ring-2 ring-white ring-offset-2 ring-offset-background scale-110 z-50',
+        data.connectionDepth === 1 && 'ring-1 ring-white/40',
+        isCompact ? 'px-2 py-1 gap-0.5' : 'px-2.5 py-1.5 gap-0.5',
+        isSecondary ? 'border border-dashed' : 'border-2'
+      )}
+      style={{
+        width: isCompact ? COMPACT_NODE_WIDTH : NODE_WIDTH,
+        opacity: depthOpacity * baseOpacity,
+        transform: data.isDimmed ? 'scale(0.9)' : undefined,
+      }}
+    >
+      <Handle type="target" position={Position.Left} className="opacity-0" />
+      <div className="flex items-center justify-between gap-1">
+        <span className={cn('font-bold text-white/90', isCompact ? 'text-[9px]' : 'text-[10px]')}>
+          #{data.number.toString().padStart(3, '0')}
+        </span>
+        <span
+          className={cn(
+            'font-medium uppercase tracking-wide rounded',
+            isCompact ? 'text-[7px] px-0.5 py-0.5' : 'text-[8px] px-1 py-0.5',
+            data.tone === 'planned' && 'bg-blue-500/30 text-blue-300',
+            data.tone === 'in-progress' && 'bg-orange-500/30 text-orange-300',
+            data.tone === 'complete' && 'bg-green-500/30 text-green-300',
+            data.tone === 'archived' && 'bg-gray-500/30 text-gray-400'
+          )}
+        >
+          {data.badge}
+        </span>
+      </div>
+      <span
+        className={cn('font-medium leading-tight truncate', isCompact ? 'text-[8px]' : 'text-[10px]')}
+        title={data.label}
+      >
+        {isCompact ? data.shortLabel : data.label}
+      </span>
+      <Handle type="source" position={Position.Right} className="opacity-0" />
+    </div>
+  );
+});
+
+SpecNode.displayName = 'SpecNode';
+
+export const nodeTypes = {
+  specNode: SpecNode,
+};

package/.next/standalone/packages/ui/src/app/dependencies/spec-sidebar.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import type { SpecNode, FocusedNodeDetails, SpecsByDepth } from './types';
+
+interface SpecListItemProps {
+  spec: SpecNode;
+  type: 'upstream' | 'downstream';
+  onClick: () => void;
+}
+
+function SpecListItem({ spec, type, onClick }: SpecListItemProps) {
+  const typeColors = {
+    upstream: 'border-l-amber-500',
+    downstream: 'border-l-emerald-500',
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-full text-left px-2 py-1.5 rounded border-l-2 bg-muted/30 hover:bg-muted/50 transition-colors',
+        typeColors[type]
+      )}
+    >
+      <div className="flex items-center gap-1.5">
+        <span className="text-[10px] font-bold text-muted-foreground">
+          #{spec.number.toString().padStart(3, '0')}
+        </span>
+        <span
+          className={cn(
+            'text-[8px] px-1 py-0.5 rounded font-medium uppercase',
+            spec.status === 'planned' && 'bg-amber-500/20 text-amber-400',
+            spec.status === 'in-progress' && 'bg-sky-500/20 text-sky-400',
+            spec.status === 'complete' && 'bg-emerald-500/20 text-emerald-400'
+          )}
+        >
+          {spec.status === 'in-progress' ? 'WIP' : spec.status.slice(0, 3)}
+        </span>
+      </div>
+      <p className="text-[11px] text-foreground truncate leading-tight mt-0.5">{spec.name}</p>
+    </button>
+  );
+}
+
+interface DepthGroupProps {
+  group: SpecsByDepth;
+  type: 'upstream' | 'downstream';
+  onSelectSpec: (specId: string) => void;
+}
+
+function DepthGroup({ group, type, onSelectSpec }: DepthGroupProps) {
+  const [isExpanded, setIsExpanded] = React.useState(group.depth === 1);
+  const depthLabel = group.depth === 1 ? 'Direct' : `Level ${group.depth}`;
+
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1.5 w-full text-left text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <span className={cn(
+          'transition-transform text-[8px]',
+          isExpanded ? 'rotate-90' : 'rotate-0'
+        )}>
+          ▶
+        </span>
+        <span className="font-medium">{depthLabel}</span>
+        <span className="opacity-60">({group.specs.length})</span>
+      </button>
+      {isExpanded && (
+        <div className="space-y-1 ml-2">
+          {group.specs.map((spec) => (
+            <SpecListItem
+              key={spec.id}
+              spec={spec}
+              type={type}
+              onClick={() => onSelectSpec(spec.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SpecSidebarProps {
+  focusedDetails: FocusedNodeDetails | null;
+  onSelectSpec: (specId: string) => void;
+  onOpenSpec: (specNumber: number) => void;
+}
+
+export function SpecSidebar({ focusedDetails, onSelectSpec, onOpenSpec }: SpecSidebarProps) {
+  if (!focusedDetails) {
+    return (
+      <div className="w-64 shrink-0 rounded-lg border border-border bg-background/95 overflow-hidden flex flex-col">
+        <div className="flex-1 flex items-center justify-center p-4">
+          <div className="text-center text-muted-foreground">
+            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-muted/50 flex items-center justify-center">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
+                />
+              </svg>
+            </div>
+            <p className="text-sm font-medium">Select a spec</p>
+            <p className="text-xs mt-1">Click on a spec to see its dependencies</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const { node, upstream, downstream } = focusedDetails;
+
+  return (
+    <div className="w-64 shrink-0 rounded-lg border border-border bg-background/95 overflow-hidden flex flex-col">
+      {/* Selected spec header */}
+      <div className="p-3 border-b border-border bg-muted/30">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="font-bold text-sm">#{node.number.toString().padStart(3, '0')}</span>
+          <span
+            className={cn(
+              'px-1.5 py-0.5 rounded text-[10px] font-medium uppercase',
+              node.status === 'planned' && 'bg-amber-500/20 text-amber-300',
+              node.status === 'in-progress' && 'bg-sky-500/20 text-sky-300',
+              node.status === 'complete' && 'bg-emerald-500/20 text-emerald-300'
+            )}
+          >
+            {node.status}
+          </span>
+        </div>
+        <p className="text-sm font-medium text-foreground leading-snug">{node.name}</p>
+        <button
+          onClick={() => onOpenSpec(node.number)}
+          className="mt-2 w-full rounded bg-primary/20 border border-primary/40 px-2 py-1.5 text-xs text-primary hover:bg-primary/30 font-medium"
+        >
+          Open Spec →
+        </button>
+      </div>
+
+      {/* Scrollable spec lists */}
+      <div className="flex-1 overflow-auto p-3 space-y-4">
+        {/* Upstream Dependencies */}
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="inline-block w-2 h-2 rounded-full bg-amber-500" />
+            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+              Depends On ({upstream.reduce((sum, g) => sum + g.specs.length, 0)})
+            </span>
+          </div>
+          {upstream.length > 0 ? (
+            <div className="space-y-2">
+              {upstream.map((group) => (
+                <DepthGroup
+                  key={group.depth}
+                  group={group}
+                  type="upstream"
+                  onSelectSpec={onSelectSpec}
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs text-muted-foreground/60 italic">No upstream dependencies</p>
+          )}
+        </div>
+
+        {/* Downstream Dependents */}
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="inline-block w-2 h-2 rounded-full bg-emerald-500" />
+            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+              Required By ({downstream.reduce((sum, g) => sum + g.specs.length, 0)})
+            </span>
+          </div>
+          {downstream.length > 0 ? (
+            <div className="space-y-2">
+              {downstream.map((group) => (
+                <DepthGroup
+                  key={group.depth}
+                  group={group}
+                  type="downstream"
+                  onSelectSpec={onSelectSpec}
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs text-muted-foreground/60 italic">No specs depend on this</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/app/dependencies/types.ts

@@ -0,0 +1,37 @@
+import type { ProjectDependencyGraph } from '@/app/api/dependencies/route';
+
+export type GraphTone = 'planned' | 'in-progress' | 'complete' | 'archived';
+
+export interface SpecNodeData {
+  label: string;
+  shortLabel: string;
+  badge: string;
+  number: number;
+  tone: GraphTone;
+  href?: string;
+  interactive?: boolean;
+  isFocused?: boolean;
+  connectionDepth?: number;
+  isDimmed?: boolean;
+  isCompact?: boolean;
+  isSecondary?: boolean; // Shown due to critical path, not primary filter
+}
+
+export type SpecNode = ProjectDependencyGraph['nodes'][0];
+
+// Specs grouped by their depth level from the focused node
+export interface SpecsByDepth {
+  depth: number;
+  specs: SpecNode[];
+}
+
+export interface FocusedNodeDetails {
+  node: SpecNode;
+  upstream: SpecsByDepth[];  // All transitive deps grouped by depth
+  downstream: SpecsByDepth[]; // All transitive dependents grouped by depth
+}
+
+export interface ConnectionStats {
+  connected: number;
+  standalone: number;
+}

package/.next/standalone/packages/ui/src/app/dependencies/utils.ts

@@ -0,0 +1,194 @@
+import dagre from '@dagrejs/dagre';
+import type { Node, Edge } from 'reactflow';
+import type { SpecNodeData } from './types';
+import {
+  NODE_WIDTH,
+  NODE_HEIGHT,
+  COMPACT_NODE_WIDTH,
+  COMPACT_NODE_HEIGHT,
+} from './constants';
+
+/**
+ * Get nodes at various depths from a starting node (directional BFS)
+ * Only includes upstream (specs this depends on) and downstream (specs that depend on this)
+ * Edge direction: source depends_on target (A→B means A depends on B)
+ */
+export function getConnectionDepths(
+  startId: string,
+  edges: Array<{ source: string; target: string }>,
+  maxDepth: number = 2
+): Map<string, number> {
+  const depths = new Map<string, number>();
+  depths.set(startId, 0);
+
+  // Build directional adjacency maps
+  // upstreamMap: source → targets (specs that source depends on)
+  // downstreamMap: target → sources (specs that depend on target)
+  const upstreamMap = new Map<string, Set<string>>();
+  const downstreamMap = new Map<string, Set<string>>();
+  
+  edges.forEach((e) => {
+    // source depends on target, so target is upstream of source
+    if (!upstreamMap.has(e.source)) upstreamMap.set(e.source, new Set());
+    upstreamMap.get(e.source)!.add(e.target);
+    
+    // source depends on target, so source is downstream of target
+    if (!downstreamMap.has(e.target)) downstreamMap.set(e.target, new Set());
+    downstreamMap.get(e.target)!.add(e.source);
+  });
+
+  // BFS upstream (specs this depends on, directly or transitively)
+  let currentLevel = new Set([startId]);
+  let depth = 1;
+  while (currentLevel.size > 0 && depth <= maxDepth) {
+    const nextLevel = new Set<string>();
+    currentLevel.forEach((nodeId) => {
+      const upstreamNodes = upstreamMap.get(nodeId);
+      if (upstreamNodes) {
+        upstreamNodes.forEach((upstream) => {
+          if (!depths.has(upstream)) {
+            depths.set(upstream, depth);
+            nextLevel.add(upstream);
+          }
+        });
+      }
+    });
+    currentLevel = nextLevel;
+    depth++;
+  }
+
+  // BFS downstream (specs that depend on this, directly or transitively)
+  currentLevel = new Set([startId]);
+  depth = 1;
+  while (currentLevel.size > 0 && depth <= maxDepth) {
+    const nextLevel = new Set<string>();
+    currentLevel.forEach((nodeId) => {
+      const downstreamNodes = downstreamMap.get(nodeId);
+      if (downstreamNodes) {
+        downstreamNodes.forEach((downstream) => {
+          if (!depths.has(downstream)) {
+            depths.set(downstream, depth);
+            nextLevel.add(downstream);
+          }
+        });
+      }
+    });
+    currentLevel = nextLevel;
+    depth++;
+  }
+
+  return depths;
+}
+
+/**
+ * Layout the graph using dagre (hierarchical DAG layout)
+ */
+export function layoutGraph(
+  nodes: Node<SpecNodeData>[],
+  edges: Edge[],
+  isCompact: boolean,
+  showStandalone: boolean
+): { nodes: Node<SpecNodeData>[]; edges: Edge[] } {
+  if (nodes.length === 0) return { nodes: [], edges: [] };
+
+  const width = isCompact ? COMPACT_NODE_WIDTH : NODE_WIDTH;
+  const height = isCompact ? COMPACT_NODE_HEIGHT : NODE_HEIGHT;
+  const gap = isCompact ? 30 : 50;
+
+  // Separate nodes with dependencies from standalone nodes
+  const nodesWithDeps = new Set<string>();
+  edges.forEach((e) => {
+    nodesWithDeps.add(e.source);
+    nodesWithDeps.add(e.target);
+  });
+
+  const connectedNodes = nodes.filter((n) => nodesWithDeps.has(n.id));
+  const standaloneNodes = showStandalone ? nodes.filter((n) => !nodesWithDeps.has(n.id)) : [];
+
+  const allLayoutedNodes: Node<SpecNodeData>[] = [];
+
+  // DAG view: Layout connected nodes with dagre (left-to-right for dependency flow)
+  if (connectedNodes.length > 0) {
+    const graph = new dagre.graphlib.Graph();
+    graph.setGraph({
+      rankdir: 'LR',
+      align: 'UL',
+      nodesep: isCompact ? 30 : 50,
+      ranksep: isCompact ? 80 : 120,
+      marginx: 40,
+      marginy: 40,
+    });
+    graph.setDefaultEdgeLabel(() => ({}));
+
+    connectedNodes.forEach((node) => {
+      graph.setNode(node.id, { width, height });
+    });
+    edges.forEach((edge) => {
+      if (nodesWithDeps.has(edge.source) && nodesWithDeps.has(edge.target)) {
+        graph.setEdge(edge.source, edge.target);
+      }
+    });
+
+    dagre.layout(graph);
+
+    // Find bounds for centering
+    let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
+    connectedNodes.forEach((node) => {
+      const pos = graph.node(node.id);
+      minX = Math.min(minX, pos.x - width / 2);
+      minY = Math.min(minY, pos.y - height / 2);
+      maxX = Math.max(maxX, pos.x + width / 2);
+      maxY = Math.max(maxY, pos.y + height / 2);
+    });
+
+    connectedNodes.forEach((node) => {
+      const pos = graph.node(node.id);
+      allLayoutedNodes.push({
+        ...node,
+        position: {
+          x: pos.x - minX,
+          y: pos.y - minY,
+        },
+      });
+    });
+
+    // Layout standalone nodes in a grid below the graph
+    if (standaloneNodes.length > 0) {
+      const graphHeight = maxY - minY;
+      const graphWidth = maxX - minX;
+      const gridStartY = graphHeight + gap * 2;
+      const cols = Math.ceil(Math.sqrt(standaloneNodes.length * 1.5));
+      const gridWidth = cols * (width + gap);
+      const gridStartX = graphWidth > gridWidth ? Math.floor((graphWidth - gridWidth) / 2) : 0;
+
+      standaloneNodes.forEach((node, i) => {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        allLayoutedNodes.push({
+          ...node,
+          position: {
+            x: gridStartX + col * (width + gap),
+            y: gridStartY + row * (height + gap),
+          },
+        });
+      });
+    }
+  } else {
+    // Only standalone nodes - arrange in a grid
+    const cols = Math.ceil(Math.sqrt(standaloneNodes.length * 1.5));
+
+    standaloneNodes.forEach((node, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      allLayoutedNodes.push({
+        ...node,
+        position: {
+          x: col * (width + gap),
+          y: row * (height + gap),
+        },
+      });
+    });
+  }
+
+  return { nodes: allLayoutedNodes, edges };
+}