@reqord/web 0.1.0

package/src/components/graph/drilldown-graph.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { ReactFlow, Background, Controls } from "@xyflow/react";
+import { RequirementNode } from "./requirement-node";
+import { SpecificationNode } from "./specification-node";
+import { IssueNode } from "./issue-node";
+import { buildDrillDownGraphData } from "@/lib/drilldown-graph-data";
+import type { Requirement, Specification, TaskEntry } from "@reqord/shared";
+
+interface DrillDownGraphProps {
+  requirement: Requirement;
+  specifications: Specification[];
+  tasks: TaskEntry[];
+}
+
+const nodeTypes = {
+  requirement: RequirementNode,
+  specification: SpecificationNode,
+  issue: IssueNode,
+};
+
+export function DrillDownGraph({ requirement, specifications, tasks }: DrillDownGraphProps) {
+  const { nodes, edges } = useMemo(
+    () => buildDrillDownGraphData(requirement, specifications, tasks),
+    [requirement, specifications, tasks],
+  );
+
+  return (
+    <div className="h-[calc(100vh-10rem)] w-full rounded-lg border border-gray-200 bg-white">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        fitView
+        minZoom={0.1}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}

package/src/components/graph/edge-styles.ts

@@ -0,0 +1,16 @@
+export const EDGE_STYLES = {
+  dependency: {
+    stroke: "#64748b",
+    strokeWidth: 2,
+  },
+  implements: {
+    stroke: "#3b82f6",
+    strokeWidth: 2,
+    strokeDasharray: "5,5",
+  },
+  tracks: {
+    stroke: "#22c55e",
+    strokeWidth: 1.5,
+    strokeDasharray: "2,2",
+  },
+} as const;

package/src/components/graph/graph-loader.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Requirement } from "@reqord/shared";
+
+const DependencyGraph = dynamic(
+  () =>
+    import("./dependency-graph").then((mod) => mod.DependencyGraph),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="animate-pulse h-96 rounded-lg bg-gray-200" />
+    ),
+  },
+);
+
+export function GraphLoader({
+  requirements,
+  specCountMap = {},
+}: {
+  requirements: Requirement[];
+  specCountMap?: Record<string, number>;
+}) {
+  return <DependencyGraph requirements={requirements} specCountMap={specCountMap} />;
+}

package/src/components/graph/graph-page-client.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useCallback } from "react";
+import dynamic from "next/dynamic";
+import { useSearchParams, useRouter } from "next/navigation";
+import type { Requirement, Specification, TaskEntry } from "@reqord/shared";
+import { DrillDownBreadcrumb } from "./drilldown-breadcrumb";
+
+const DependencyGraph = dynamic(
+  () => import("./dependency-graph").then((mod) => mod.DependencyGraph),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="animate-pulse h-96 rounded-lg bg-gray-200" />
+    ),
+  }
+);
+
+const DrillDownGraph = dynamic(
+  () => import("./drilldown-graph").then((mod) => mod.DrillDownGraph),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="animate-pulse h-96 rounded-lg bg-gray-200" />
+    ),
+  }
+);
+
+type GraphPageClientProps = {
+  requirements: Requirement[];
+  specifications: Specification[];
+  specCountMap: Record<string, number>;
+  tasks: TaskEntry[];
+};
+
+export function GraphPageClient({
+  requirements,
+  specifications,
+  specCountMap,
+  tasks,
+}: GraphPageClientProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const selectedReqId = searchParams.get("req");
+
+  const handleRequirementClick = useCallback(
+    (reqId: string) => {
+      router.push(`/graph?req=${reqId}`);
+    },
+    [router],
+  );
+
+  const handleBackToOverview = useCallback(() => {
+    router.push("/graph");
+  }, [router]);
+
+  if (selectedReqId) {
+    const requirement = requirements.find((r) => r.id === selectedReqId);
+    if (!requirement) {
+      // Invalid req ID → fallback to overview
+      return (
+        <div>
+          <h1 className="mb-4 text-2xl font-bold">Dependency Graph</h1>
+          <DependencyGraph
+            requirements={requirements}
+            specCountMap={specCountMap}
+            onRequirementClick={handleRequirementClick}
+          />
+        </div>
+      );
+    }
+
+    const relatedSpecs = specifications.filter(
+      (s) => s.requirementId === selectedReqId,
+    );
+
+    return (
+      <div>
+        <DrillDownBreadcrumb
+          requirementTitle={requirement.title}
+          onBack={handleBackToOverview}
+        />
+        <DrillDownGraph requirement={requirement} specifications={relatedSpecs} tasks={tasks} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="mb-4 text-2xl font-bold">Dependency Graph</h1>
+      <DependencyGraph
+        requirements={requirements}
+        specCountMap={specCountMap}
+        onRequirementClick={handleRequirementClick}
+      />
+    </div>
+  );
+}

package/src/components/graph/issue-node.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+
+const STATUS_COLORS: Record<string, string> = {
+  open: "bg-yellow-200",
+  in_progress: "bg-blue-200",
+  closed: "bg-green-200",
+};
+
+type IssueNodeData = {
+  label: string;
+  status: string;
+  issueNumber: number;
+  issueUrl: string;
+};
+
+function IssueNodeComponent({ data }: NodeProps) {
+  const nodeData = data as IssueNodeData;
+  const bgClass = STATUS_COLORS[nodeData.status] ?? "bg-gray-200";
+
+  const handleClick = () => {
+    if (nodeData.issueUrl) {
+      window.open(nodeData.issueUrl, "_blank", "noopener,noreferrer");
+    }
+  };
+
+  return (
+    <div
+      className={`rounded-lg border shadow-sm px-3 py-2 cursor-pointer ${bgClass}`}
+      style={{ width: 180 }}
+      onClick={handleClick}
+    >
+      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <p className="truncate text-sm font-medium text-gray-900">{nodeData.label}</p>
+      <div className="mt-1">
+        <span className="inline-block rounded-full bg-white px-2 py-0.5 text-xs text-gray-700">
+          {nodeData.status}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export const IssueNode = memo(IssueNodeComponent);

package/src/components/graph/multi-level-graph.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useMemo, useCallback } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import type { MultiLevelGraphData } from "@/lib/graph-data";
+import { RequirementNode } from "./requirement-node";
+import { SpecificationNode } from "./specification-node";
+import { IssueNode } from "./issue-node";
+
+const nodeTypes = {
+  requirement: RequirementNode,
+  specification: SpecificationNode,
+  issue: IssueNode,
+};
+
+const EDGE_STYLES = {
+  dependency: {
+    style: { stroke: "#94a3b8", strokeWidth: 2 },
+    markerEnd: { type: "arrowclosed" as const, color: "#94a3b8" },
+    animated: false,
+  },
+  implements: {
+    style: { stroke: "#6366f1", strokeWidth: 2, strokeDasharray: "5,5" },
+    markerEnd: { type: "arrowclosed" as const, color: "#6366f1" },
+    animated: false,
+  },
+  tracks: {
+    style: { stroke: "#a855f7", strokeWidth: 2, strokeDasharray: "2,2" },
+    markerEnd: { type: "arrowclosed" as const, color: "#a855f7" },
+    animated: false,
+  },
+};
+
+export function MultiLevelGraph({ data }: { data: MultiLevelGraphData }) {
+  const { initialNodes, initialEdges } = useMemo(() => {
+    const rfNodes: Node[] = data.nodes.map((n) => ({
+      id: n.id,
+      type: n.type,
+      position: n.position,
+      data: n.data,
+    }));
+
+    const rfEdges: Edge[] = data.edges.map((e) => {
+      const edgeStyle = EDGE_STYLES[e.type];
+      return {
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        ...edgeStyle,
+      };
+    });
+
+    return { initialNodes: rfNodes, initialEdges: rfEdges };
+  }, [data]);
+
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
+
+  const onInit = useCallback((instance: { fitView: () => void }) => {
+    instance.fitView();
+  }, []);
+
+  return (
+    <div className="h-[calc(100vh-10rem)] w-full rounded-lg border border-gray-200 bg-white">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onInit={onInit}
+        nodeTypes={nodeTypes}
+        fitView
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+        <MiniMap nodeStrokeWidth={3} zoomable pannable />
+      </ReactFlow>
+    </div>
+  );
+}

package/src/components/graph/requirement-node.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { memo, useCallback } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { useRouter } from "next/navigation";
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: "border-gray-300 bg-gray-50",
+  approved: "border-green-300 bg-green-50",
+  implemented: "border-blue-300 bg-blue-50",
+  deprecated: "border-red-300 bg-red-50",
+};
+
+type RequirementNodeData = {
+  label: string;
+  status: string;
+  priority: string;
+  specCount?: number;
+  onDrillDown?: (reqId: string) => void;
+};
+
+function RequirementNodeComponent({ data, id }: NodeProps) {
+  const nodeData = data as RequirementNodeData;
+  const borderClass = STATUS_COLORS[nodeData.status] ?? "border-gray-300 bg-white";
+  const router = useRouter();
+
+  const handleBodyClick = useCallback(() => {
+    router.push(`/requirements/${id}`);
+  }, [router, id]);
+
+  const handleDrillDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      nodeData.onDrillDown?.(id);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nodeData.onDrillDown, id],
+  );
+
+  const handleButtonMouseDown = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <div
+      className={`cursor-pointer rounded-lg border-2 px-3 py-2 shadow-sm ${borderClass}`}
+      style={{ width: 220 }}
+      onClick={handleBodyClick}
+    >
+      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <p className="truncate text-xs font-mono text-gray-500">{id}</p>
+      <p className="mt-0.5 truncate text-sm font-medium text-gray-900">
+        {nodeData.label}
+      </p>
+      {nodeData.onDrillDown && nodeData.specCount && nodeData.specCount > 0 ? (
+        <button
+          className="nodrag mt-1 text-xs text-gray-400"
+          onClick={handleDrillDown}
+          onMouseDown={handleButtonMouseDown}
+        >
+          📄 {nodeData.specCount} spec{nodeData.specCount > 1 ? "s" : ""}
+        </button>
+      ) : null}
+      <Handle type="source" position={Position.Right} className="!bg-gray-400" />
+    </div>
+  );
+}
+
+export const RequirementNode = memo(RequirementNodeComponent);

package/src/components/graph/specification-node.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React, { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: "bg-blue-200",
+  approved: "bg-green-200",
+  implemented: "bg-emerald-300",
+  deprecated: "bg-red-200",
+};
+
+type SpecificationNodeData = {
+  label: string;
+  status: string;
+};
+
+function SpecificationNodeComponent({ data, id }: NodeProps) {
+  const nodeData = data as SpecificationNodeData;
+  const bgClass = STATUS_COLORS[nodeData.status] ?? "bg-gray-200";
+
+  return (
+    <div
+      className={`rounded-lg border shadow-sm px-3 py-2 ${bgClass}`}
+      style={{ width: 200 }}
+    >
+      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <p className="truncate text-xs font-mono text-gray-900">{id}</p>
+      <div className="mt-1">
+        <span className="inline-block rounded-full bg-white px-2 py-0.5 text-xs text-gray-700">
+          {nodeData.status}
+        </span>
+      </div>
+      <Handle type="source" position={Position.Right} className="!bg-gray-400" />
+    </div>
+  );
+}
+
+export const SpecificationNode = memo(SpecificationNodeComponent);

package/src/components/requirement/delete-button.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { deleteRequirement } from "@/lib/actions";
+
+export function DeleteButton({ id }: { id: string }) {
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  function handleDelete() {
+    startTransition(async () => {
+      await deleteRequirement(id);
+    });
+  }
+
+  if (showConfirm) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-red-600">Delete {id}?</span>
+        <button
+          onClick={handleDelete}
+          disabled={isPending}
+          className="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
+        >
+          {isPending ? "Deleting..." : "Confirm"}
+        </button>
+        <button
+          onClick={() => setShowConfirm(false)}
+          disabled={isPending}
+          className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setShowConfirm(true)}
+      className="rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-600 hover:bg-red-50"
+    >
+      Delete
+    </button>
+  );
+}

package/src/components/requirement/dependency-editor.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { Requirement } from "@reqord/shared";
+import { useMemo } from "react";
+
+interface Props {
+  label: string;
+  selected: string[];
+  onChange: (ids: string[]) => void;
+  allRequirements: Requirement[];
+  excludeId?: string;
+}
+
+export function DependencyEditor({
+  label,
+  selected,
+  onChange,
+  allRequirements,
+  excludeId,
+}: Props) {
+  const options = useMemo(
+    () => allRequirements.filter((r) => r.id !== excludeId),
+    [allRequirements, excludeId],
+  );
+
+  function handleToggle(id: string) {
+    if (selected.includes(id)) {
+      onChange(selected.filter((s) => s !== id));
+    } else {
+      onChange([...selected, id]);
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <label className="block text-sm font-medium text-gray-700">{label}</label>
+      <div className="max-h-40 overflow-y-auto rounded-md border border-gray-300 p-2">
+        {options.length === 0 ? (
+          <p className="text-sm text-gray-400">No other requirements</p>
+        ) : (
+          options.map((req) => (
+            <label
+              key={req.id}
+              className="flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-gray-50"
+            >
+              <input
+                type="checkbox"
+                checked={selected.includes(req.id)}
+                onChange={() => handleToggle(req.id)}
+                className="rounded border-gray-300"
+              />
+              <span className="font-mono text-gray-500">{req.id}</span>
+              <span className="truncate">{req.title}</span>
+            </label>
+          ))
+        )}
+      </div>
+      {selected.length > 0 ? (
+        <div className="flex flex-wrap gap-1">
+          {selected.map((id) => (
+            <span
+              key={id}
+              className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-mono text-blue-700"
+            >
+              {id}
+              <button
+                type="button"
+                onClick={() => onChange(selected.filter((s) => s !== id))}
+                className="hover:text-blue-900"
+              >
+                x
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/requirement/markdown-editor.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function MarkdownEditor({ value, onChange }: Props) {
+  const [showPreview, setShowPreview] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="block text-sm font-medium text-gray-700">
+          Description (Markdown)
+        </label>
+        <button
+          type="button"
+          onClick={() => setShowPreview((prev) => !prev)}
+          className="text-sm text-blue-600 hover:text-blue-800"
+        >
+          {showPreview ? "Edit" : "Preview"}
+        </button>
+      </div>
+      {showPreview ? (
+        <div className="min-h-[200px] rounded-md border border-gray-300 bg-white p-4">
+          {value.trim() ? (
+            <MarkdownRenderer content={value} />
+          ) : (
+            <p className="text-sm text-gray-400">No content</p>
+          )}
+        </div>
+      ) : (
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          rows={10}
+          className="w-full rounded-md border border-gray-300 px-3 py-2 font-mono text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="Enter requirement description in Markdown..."
+        />
+      )}
+    </div>
+  );
+}

package/src/components/requirement/markdown-renderer.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export function MarkdownRenderer({ content }: { content: string }) {
+  return (
+    <div className="prose prose-sm max-w-none">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+}