@reqord/web 0.1.0

package/src/__tests__/lib/tasks-data.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { TaskEntry, TasksIndex } from "@reqord/shared";
+
+// Mock the file-system module
+vi.mock("../../lib/file-system.js", () => ({
+  joinPath: vi.fn((...args: string[]) => args.join("/")),
+  readYAML: vi.fn(),
+}));
+
+// Mock reqord-root
+vi.mock("../../lib/reqord-root.js", () => ({
+  getReqordRoot: vi.fn(() => "/mock/root"),
+}));
+
+const mockTaskEntry: TaskEntry = {
+  number: 1,
+  title: "Test Task",
+  url: "https://github.com/owner/repo/issues/1",
+  status: "open",
+  linkedTo: { specifications: ["spec-000001"] },
+  syncedAt: "2026-02-22T00:00:00.000Z",
+};
+
+describe("tasks-data", () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  describe("loadTasksYaml", () => {
+    it("returns tasks index from loaded tasks.yaml", async () => {
+      const { readYAML } = await import("../../lib/file-system.js");
+
+      const mockIndex: TasksIndex = {
+        title: "Tasks",
+        tasks: [mockTaskEntry],
+      };
+
+      vi.mocked(readYAML).mockResolvedValue(mockIndex);
+
+      const { loadTasksYaml } = await import("../../lib/tasks-data.js");
+      const result = await loadTasksYaml();
+
+      expect(result.tasks).toHaveLength(1);
+      expect(result.tasks[0]).toEqual(mockTaskEntry);
+    });
+
+    it("returns empty tasks index when tasks.yaml is missing or invalid", async () => {
+      const { readYAML } = await import("../../lib/file-system.js");
+
+      vi.mocked(readYAML).mockRejectedValue(new Error("File not found"));
+
+      const { loadTasksYaml } = await import("../../lib/tasks-data.js");
+      const result = await loadTasksYaml();
+
+      expect(result.tasks).toEqual([]);
+    });
+  });
+
+  describe("getAllTasks", () => {
+    it("returns tasks array from loaded TasksIndex", async () => {
+      const { readYAML } = await import("../../lib/file-system.js");
+
+      const mockIndex: TasksIndex = {
+        title: "Tasks",
+        tasks: [mockTaskEntry],
+      };
+
+      vi.mocked(readYAML).mockResolvedValue(mockIndex);
+
+      const { getAllTasks } = await import("../../lib/tasks-data.js");
+      const result = await getAllTasks();
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual(mockTaskEntry);
+    });
+
+    it("returns empty array when tasks.yaml has no tasks", async () => {
+      const { readYAML } = await import("../../lib/file-system.js");
+
+      const mockIndex: TasksIndex = {
+        title: "Tasks",
+        tasks: [],
+      };
+
+      vi.mocked(readYAML).mockResolvedValue(mockIndex);
+
+      const { getAllTasks } = await import("../../lib/tasks-data.js");
+      const result = await getAllTasks();
+
+      expect(result).toEqual([]);
+    });
+
+    it("returns empty array when tasks.yaml is missing or invalid", async () => {
+      const { readYAML } = await import("../../lib/file-system.js");
+
+      vi.mocked(readYAML).mockRejectedValue(new Error("File not found"));
+
+      const { getAllTasks } = await import("../../lib/tasks-data.js");
+      const result = await getAllTasks();
+
+      expect(result).toEqual([]);
+    });
+  });
+});

package/src/app/dashboard/loading.tsx

@@ -0,0 +1,21 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
+      {/* Health Score Skeleton */}
+      <div className="h-48 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+
+      {/* Progress Section Skeleton */}
+      <div className="grid gap-6 md:grid-cols-3">
+        <div className="h-32 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+        <div className="h-32 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+        <div className="h-32 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+      </div>
+
+      {/* Status Cards Skeleton */}
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="h-48 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+        <div className="h-48 animate-pulse rounded-lg border border-gray-200 bg-gray-100"></div>
+      </div>
+    </div>
+  );
+}

package/src/app/dashboard/page.tsx

@@ -0,0 +1,50 @@
+import { Suspense } from "react";
+import { getDashboardData } from "@/lib/dashboard-data";
+import { ProjectHealth } from "@/components/dashboard/project-health";
+import { ProgressSection } from "@/components/dashboard/progress-section";
+import { StatusCards } from "@/components/dashboard/status-cards";
+import { WarningAlerts } from "@/components/dashboard/warning-alerts";
+import { CriticalPathDisplay } from "@/components/dashboard/critical-path-display";
+import Loading from "./loading";
+
+async function DashboardContent() {
+  const data = await getDashboardData();
+
+  return (
+    <div className="mx-auto max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+
+      {/* Project Health */}
+      <ProjectHealth score={data.healthScore} />
+
+      {/* Progress Section */}
+      <ProgressSection
+        requirements={data.requirements}
+        specifications={data.specifications}
+        issues={data.issues}
+      />
+
+      {/* Status Cards */}
+      <StatusCards
+        requirements={data.requirements}
+        specifications={data.specifications}
+      />
+
+      {/* Warnings */}
+      {data.warnings.length > 0 && <WarningAlerts warnings={data.warnings} />}
+
+      {/* Critical Path */}
+      {data.criticalPath !== null && (
+        <CriticalPathDisplay items={data.criticalPath} />
+      )}
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <DashboardContent />
+    </Suspense>
+  );
+}

package/src/app/error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20">
+      <h2 className="text-2xl font-bold text-red-600">Something went wrong</h2>
+      <p className="mt-2 text-gray-600">{error.message}</p>
+      <button
+        onClick={reset}
+        className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/src/app/feedback/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="h-8 w-48 rounded bg-gray-200" />
+      <div className="h-10 w-full rounded bg-gray-200" />
+      <div className="space-y-2">
+        {Array.from({ length: 8 }, (_, i) => (
+          <div key={i} className="h-12 w-full rounded bg-gray-200" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/feedback/page.tsx

@@ -0,0 +1,48 @@
+import { Suspense } from "react";
+import { getAllFeedbacks } from "@/lib/feedback-data";
+import { getAllRequirements } from "@/lib/data";
+import { getAllSpecifications } from "@/lib/specification-data";
+import { FeedbackClientView } from "@/components/feedback/feedback-client-view";
+import Loading from "./loading";
+
+export const metadata = {
+  title: "Feedback - Reqord",
+};
+
+export const dynamic = "force-dynamic";
+
+async function FeedbackContent() {
+  const [feedbacks, requirements, specifications] = await Promise.all([
+    getAllFeedbacks(),
+    getAllRequirements(),
+    getAllSpecifications(),
+  ]);
+
+  const reqTitleMap: Record<string, string> = Object.fromEntries(
+    requirements.map((r) => [r.id, r.title]),
+  );
+  const specTitleMap: Record<string, string> = Object.fromEntries(
+    specifications.map((s) => [s.id, s.title ?? s.id]),
+  );
+
+  return (
+    <FeedbackClientView
+      feedbacks={feedbacks}
+      requirementTitles={reqTitleMap}
+      specificationTitles={specTitleMap}
+    />
+  );
+}
+
+export default function FeedbackPage() {
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">Feedback</h1>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <FeedbackContent />
+      </Suspense>
+    </div>
+  );
+}

package/src/app/globals.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

package/src/app/graph/page.tsx

@@ -0,0 +1,32 @@
+import { getAllRequirements } from "@/lib/data";
+import { getAllSpecifications } from "@/lib/specification-data";
+import { getAllTasks } from "@/lib/tasks-data";
+import { GraphPageClient } from "@/components/graph/graph-page-client";
+
+export const metadata = {
+  title: "Dependency Graph - Reqord",
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function GraphPage() {
+  const [requirements, specifications, tasks] = await Promise.all([
+    getAllRequirements(),
+    getAllSpecifications(),
+    getAllTasks(),
+  ]);
+
+  const specCountMap: Record<string, number> = {};
+  for (const spec of specifications) {
+    specCountMap[spec.requirementId] = (specCountMap[spec.requirementId] ?? 0) + 1;
+  }
+
+  return (
+    <GraphPageClient
+      requirements={requirements}
+      specifications={specifications}
+      specCountMap={specCountMap}
+      tasks={tasks}
+    />
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Nav } from "@/components/ui/nav";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Reqord",
+  description: "Requirements management UI",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ja">
+      <body className="bg-gray-50 text-gray-900 antialiased">
+        <Nav />
+        <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/requirements");
+}

package/src/app/requirements/[id]/edit/page.tsx

@@ -0,0 +1,40 @@
+import { notFound } from "next/navigation";
+import {
+  getAllRequirements,
+  getRequirementById,
+  getRequirementDescription,
+} from "@/lib/data";
+import { RequirementForm } from "@/components/requirement/requirement-form";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return { title: `Edit ${id} - Reqord` };
+}
+
+export default async function EditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [requirement, description, allRequirements] = await Promise.all([
+    getRequirementById(id),
+    getRequirementDescription(id),
+    getAllRequirements(),
+  ]);
+
+  if (!requirement) {
+    notFound();
+  }
+
+  return (
+    <RequirementForm
+      mode="edit"
+      requirement={requirement}
+      description={description}
+      allRequirements={allRequirements}
+    />
+  );
+}

package/src/app/requirements/[id]/loading.tsx

@@ -0,0 +1,14 @@
+export default function Loading() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="h-6 w-32 rounded bg-gray-200" />
+      <div className="h-8 w-96 rounded bg-gray-200" />
+      <div className="flex gap-2">
+        <div className="h-6 w-16 rounded-full bg-gray-200" />
+        <div className="h-6 w-16 rounded-full bg-gray-200" />
+      </div>
+      <div className="h-24 w-full rounded bg-gray-200" />
+      <div className="h-48 w-full rounded bg-gray-200" />
+    </div>
+  );
+}

package/src/app/requirements/[id]/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center py-20">
+      <h2 className="text-2xl font-bold text-gray-900">Requirement Not Found</h2>
+      <p className="mt-2 text-gray-600">
+        The requirement you&apos;re looking for does not exist.
+      </p>
+      <Link
+        href="/requirements"
+        className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      >
+        Back to Requirements
+      </Link>
+    </div>
+  );
+}

package/src/app/requirements/[id]/page.tsx

@@ -0,0 +1,43 @@
+import { notFound } from "next/navigation";
+import { getRequirementById, getRequirementDescription } from "@/lib/data";
+import { getSpecificationsByRequirementId } from "@/lib/specification-data";
+import { findUnresolvedByArtifactId } from "@/lib/feedback-data";
+import { RequirementDetail } from "@/components/requirement/requirement-detail";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const requirement = await getRequirementById(id);
+  if (!requirement) {
+    return { title: "Not Found - Reqord" };
+  }
+  return { title: `${requirement.id}: ${requirement.title} - Reqord` };
+}
+
+export default async function RequirementPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [requirement, description, specifications, feedbacks] = await Promise.all([
+    getRequirementById(id),
+    getRequirementDescription(id),
+    getSpecificationsByRequirementId(id),
+    findUnresolvedByArtifactId(id),
+  ]);
+
+  if (!requirement) {
+    notFound();
+  }
+
+  return (
+    <RequirementDetail
+      requirement={requirement}
+      description={description}
+      specifications={specifications}
+      feedbacks={feedbacks}
+    />
+  );
+}

package/src/app/requirements/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="h-8 w-48 rounded bg-gray-200" />
+      <div className="h-10 w-full rounded bg-gray-200" />
+      <div className="space-y-2">
+        {Array.from({ length: 8 }, (_, i) => (
+          <div key={i} className="h-12 w-full rounded bg-gray-200" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/requirements/new/page.tsx

@@ -0,0 +1,14 @@
+import { getAllRequirements } from "@/lib/data";
+import { RequirementForm } from "@/components/requirement/requirement-form";
+
+export const metadata = {
+  title: "New Requirement - Reqord",
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function NewPage() {
+  const allRequirements = await getAllRequirements();
+
+  return <RequirementForm mode="create" allRequirements={allRequirements} />;
+}

package/src/app/requirements/page.tsx

@@ -0,0 +1,35 @@
+import { Suspense } from "react";
+import Link from "next/link";
+import { getAllRequirements } from "@/lib/data";
+import { RequirementTable } from "@/components/requirement/requirement-table";
+import Loading from "./loading";
+
+export const metadata = {
+  title: "Requirements - Reqord",
+};
+
+export const dynamic = "force-dynamic";
+
+async function RequirementList() {
+  const requirements = await getAllRequirements();
+  return <RequirementTable requirements={requirements} />;
+}
+
+export default function RequirementsPage() {
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Requirements</h1>
+        <Link
+          href="/requirements/new"
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
+          New Requirement
+        </Link>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <RequirementList />
+      </Suspense>
+    </div>
+  );
+}

package/src/app/specifications/[id]/loading.tsx

@@ -0,0 +1,14 @@
+export default function Loading() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="h-6 w-32 rounded bg-gray-200" />
+      <div className="h-8 w-96 rounded bg-gray-200" />
+      <div className="flex gap-2">
+        <div className="h-6 w-16 rounded-full bg-gray-200" />
+        <div className="h-6 w-16 rounded-full bg-gray-200" />
+      </div>
+      <div className="h-24 w-full rounded bg-gray-200" />
+      <div className="h-48 w-full rounded bg-gray-200" />
+    </div>
+  );
+}

package/src/app/specifications/[id]/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center py-20">
+      <h2 className="text-2xl font-bold text-gray-900">Specification Not Found</h2>
+      <p className="mt-2 text-gray-600">
+        The specification you&apos;re looking for does not exist.
+      </p>
+      <Link
+        href="/specifications"
+        className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      >
+        Back to Specifications
+      </Link>
+    </div>
+  );
+}

package/src/app/specifications/[id]/page.tsx

@@ -0,0 +1,52 @@
+import { notFound } from "next/navigation";
+import { getSpecificationById } from "@/lib/specification-data";
+import { getRequirementById } from "@/lib/data";
+import { loadSpecFile } from "@/lib/specification-file";
+import { findUnresolvedByArtifactId } from "@/lib/feedback-data";
+import { SpecDetail } from "@/components/specification/spec-detail";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const specification = await getSpecificationById(id);
+  if (!specification) {
+    return { title: "Not Found - Reqord" };
+  }
+  const title = specification.title
+    ? `${specification.id}: ${specification.title} - Reqord`
+    : `${specification.id} - Reqord`;
+  return { title };
+}
+
+export default async function SpecificationPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [specification, design, research] = await Promise.all([
+    getSpecificationById(id),
+    loadSpecFile(id, "design.md"),
+    loadSpecFile(id, "research.md"),
+  ]);
+
+  if (!specification) {
+    notFound();
+  }
+
+  const [requirement, feedbacks] = await Promise.all([
+    getRequirementById(specification.requirementId),
+    findUnresolvedByArtifactId(id),
+  ]);
+
+  return (
+    <SpecDetail
+      specification={specification}
+      design={design}
+      research={research}
+      requirement={requirement}
+      feedbacks={feedbacks}
+    />
+  );
+}

package/src/app/specifications/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="h-8 w-48 rounded bg-gray-200" />
+      <div className="h-10 w-full rounded bg-gray-200" />
+      <div className="space-y-2">
+        {Array.from({ length: 8 }, (_, i) => (
+          <div key={i} className="h-12 w-full rounded bg-gray-200" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/specifications/page.tsx

@@ -0,0 +1,42 @@
+import { Suspense } from "react";
+import { getAllSpecifications } from "@/lib/specification-data";
+import { getAllRequirements } from "@/lib/data";
+import { SpecificationTable } from "@/components/specification/specification-table";
+import Loading from "./loading";
+
+export const metadata = {
+  title: "Specifications - Reqord",
+};
+
+export const dynamic = "force-dynamic";
+
+async function SpecificationList() {
+  const [specifications, requirements] = await Promise.all([
+    getAllSpecifications(),
+    getAllRequirements(),
+  ]);
+
+  const requirementMap = Object.fromEntries(
+    requirements.map((r) => [r.id, r.title]),
+  );
+
+  return (
+    <SpecificationTable
+      specifications={specifications}
+      requirementTitleMap={requirementMap}
+    />
+  );
+}
+
+export default function SpecificationsPage() {
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">Specifications</h1>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <SpecificationList />
+      </Suspense>
+    </div>
+  );
+}