@reqord/web 0.2.0 → 0.3.0

package/src/__tests__/components/ui/nav.test.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { Nav } from "../../../components/ui/nav";
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/requirements",
+}));
+
+vi.mock("next/link", () => ({
+  default: ({
+    href,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+describe("Nav", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders all navigation items", () => {
+    render(<Nav />);
+
+    expect(screen.getByText("Dashboard")).toBeInTheDocument();
+    expect(screen.getByText("Requirements")).toBeInTheDocument();
+    expect(screen.getByText("Specifications")).toBeInTheDocument();
+    expect(screen.getByText("Feedback")).toBeInTheDocument();
+    expect(screen.getByText("Graph")).toBeInTheDocument();
+  });
+
+  it("renders the Reqord brand link", () => {
+    render(<Nav />);
+
+    const brandLogo = screen.getByAltText("Reqord");
+    expect(brandLogo).toBeInTheDocument();
+    expect(brandLogo.closest("a")).toHaveAttribute("href", "/dashboard");
+  });
+
+  it("applies active styles to the current path link", () => {
+    render(<Nav />);
+
+    const requirementsLink = screen.getByText("Requirements").closest("a");
+    expect(requirementsLink).toHaveClass("bg-warm-200");
+    expect(requirementsLink).toHaveClass("text-warm-900");
+  });
+
+  it("applies inactive styles to non-active links", () => {
+    render(<Nav />);
+
+    const dashboardLink = screen.getByText("Dashboard").closest("a");
+    expect(dashboardLink).toHaveClass("text-warm-700");
+    expect(dashboardLink).not.toHaveClass("bg-warm-200");
+  });
+
+  it("each nav item has correct href", () => {
+    render(<Nav />);
+
+    expect(screen.getByText("Dashboard").closest("a")).toHaveAttribute(
+      "href",
+      "/dashboard"
+    );
+    expect(screen.getByText("Requirements").closest("a")).toHaveAttribute(
+      "href",
+      "/requirements"
+    );
+    expect(screen.getByText("Specifications").closest("a")).toHaveAttribute(
+      "href",
+      "/specifications"
+    );
+    expect(screen.getByText("Feedback").closest("a")).toHaveAttribute(
+      "href",
+      "/feedback"
+    );
+    expect(screen.getByText("Graph").closest("a")).toHaveAttribute(
+      "href",
+      "/graph"
+    );
+  });
+});

package/src/__tests__/components/ui/tabs.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { Tabs } from "../../../components/ui/tabs";
+
+const tabs = [
+  { id: "design", label: "Design" },
+  { id: "research", label: "Research" },
+  { id: "coverage", label: "Coverage" },
+];
+
+describe("Tabs - アクセシビリティ", () => {
+  afterEach(() => cleanup());
+
+  it("各タブボタンにrole='tab'が設定されている", () => {
+    render(<Tabs tabs={tabs} activeTab="design" onTabChange={vi.fn()} />);
+
+    const tabButtons = screen.getAllByRole("tab");
+    expect(tabButtons).toHaveLength(3);
+  });
+
+  it("アクティブなタブのaria-selected='true'が設定される", () => {
+    render(<Tabs tabs={tabs} activeTab="design" onTabChange={vi.fn()} />);
+
+    const designTab = screen.getByRole("tab", { name: "Design" });
+    expect(designTab).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("非アクティブなタブのaria-selected='false'が設定される", () => {
+    render(<Tabs tabs={tabs} activeTab="design" onTabChange={vi.fn()} />);
+
+    const researchTab = screen.getByRole("tab", { name: "Research" });
+    expect(researchTab).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("タブクリックでonTabChangeが呼ばれる", () => {
+    const onTabChange = vi.fn();
+    render(<Tabs tabs={tabs} activeTab="design" onTabChange={onTabChange} />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Research" }));
+    expect(onTabChange).toHaveBeenCalledWith("research");
+  });
+
+  it("全タブのラベルが表示される", () => {
+    render(<Tabs tabs={tabs} activeTab="design" onTabChange={vi.fn()} />);
+
+    expect(screen.getByText("Design")).toBeInTheDocument();
+    expect(screen.getByText("Research")).toBeInTheDocument();
+    expect(screen.getByText("Coverage")).toBeInTheDocument();
+  });
+});

package/src/__tests__/lib/drilldown-graph-data.test.ts

@@ -107,7 +107,7 @@ describe("buildDrillDownGraphData", () => {
       expect(result.edges).toHaveLength(2);
     });
 
-    it("positions spec nodes at x=400 with vertical gap of 120", () => {
+    it("positions spec nodes at x=400 with vertical gap of 120 when no tasks", () => {
       const req = makeReq("req-000001");
       const spec1 = makeSpec("spec-000001", "req-000001");
       const spec2 = makeSpec("spec-000002", "req-000001");
@@ -202,7 +202,7 @@ describe("buildDrillDownGraphData", () => {
       });
     });
 
-    it("positions issues based on spec index and task index", () => {
+    it("positions issues without overlap when spec has many tasks", () => {
       const req = makeReq("req-000001");
       const spec1 = makeSpec("spec-000001", "req-000001");
       const spec2 = makeSpec("spec-000002", "req-000001");
@@ -214,9 +214,51 @@ describe("buildDrillDownGraphData", () => {
 
       const issueNodes = result.nodes.filter((n) => n.type === "issue");
       expect(issueNodes).toHaveLength(3);
+      // spec1 issues start at y=0
       expect(issueNodes[0].position).toEqual({ x: 800, y: 0 });
       expect(issueNodes[1].position).toEqual({ x: 800, y: 80 });
-      expect(issueNodes[2].position).toEqual({ x: 800, y: 120 });
+      // spec2 is pushed down so its issues don't overlap with spec1's
+      // spec1 had 2 tasks → occupies 2*80=160px, so spec2 starts at max(120, 160)=160
+      expect(issueNodes[2].position).toEqual({ x: 800, y: 160 });
+    });
+
+    it("pushes spec nodes down when previous spec has many tasks", () => {
+      const req = makeReq("req-000001");
+      const spec1 = makeSpec("spec-000001", "req-000001");
+      const spec2 = makeSpec("spec-000002", "req-000001");
+      const tasks = [
+        makeTask(1, ["spec-000001"]),
+        makeTask(2, ["spec-000001"]),
+        makeTask(3, ["spec-000001"]),
+        makeTask(4, ["spec-000001"]),
+      ];
+
+      const result = buildDrillDownGraphData(req, [spec1, spec2], tasks);
+
+      const specNodes = result.nodes.filter((n) => n.type === "specification");
+      // spec1 has 4 tasks → occupies 4*80=320px, which exceeds default gap of 120
+      // so spec2 is pushed to y=320
+      expect(specNodes[0].position).toEqual({ x: 400, y: 0 });
+      expect(specNodes[1].position).toEqual({ x: 400, y: 320 });
+    });
+
+    it("centers requirement node vertically relative to all specs", () => {
+      const req = makeReq("req-000001");
+      const spec1 = makeSpec("spec-000001", "req-000001");
+      const spec2 = makeSpec("spec-000002", "req-000001");
+      const tasks = [
+        makeTask(1, ["spec-000001"]),
+        makeTask(2, ["spec-000001"]),
+        makeTask(3, ["spec-000001"]),
+        makeTask(4, ["spec-000001"]),
+      ];
+
+      const result = buildDrillDownGraphData(req, [spec1, spec2], tasks);
+
+      const reqNode = result.nodes.find((n) => n.type === "requirement");
+      const specNodes = result.nodes.filter((n) => n.type === "specification");
+      const lastSpecY = specNodes[specNodes.length - 1].position.y; // 320
+      expect(reqNode?.position.y).toBe(lastSpecY / 2); // 160
     });
 
     it("does not create issue nodes when no tasks are linked to spec", () => {

package/src/app/dashboard/page.tsx

@@ -11,32 +11,40 @@ 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">
+    <div className="space-y-6 py-2">
       <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} />}
+      {/* Overview zone: Project Health + Progress */}
+      <div className="space-y-4">
+        <ProjectHealth score={data.healthScore} />
+        <ProgressSection
+          requirements={data.requirements}
+          specifications={data.specifications}
+          issues={data.issues}
+        />
+      </div>
+
+      {/* Action zone: Warnings */}
+      {data.warnings.length > 0 && (
+        <div className="mt-10">
+          <WarningAlerts warnings={data.warnings} />
+        </div>
+      )}
 
-      {/* Critical Path */}
+      {/* Action zone: Critical Path */}
       {data.criticalPath !== null && (
-        <CriticalPathDisplay items={data.criticalPath} />
+        <div className="mt-10">
+          <CriticalPathDisplay items={data.criticalPath} />
+        </div>
       )}
+
+      {/* Detail zone: Status Cards */}
+      <div className="mt-10">
+        <StatusCards
+          requirements={data.requirements}
+          specifications={data.specifications}
+        />
+      </div>
     </div>
   );
 }

package/src/app/globals.css

@@ -1,2 +1,48 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+
+@theme {
+  /* ロゴ由来のアクセント — ポイント使い専用 */
+  --color-accent: #ff3b2f;
+  --color-accent-hover: #e5342a;
+
+  /* 暖色ニュートラル — ロゴの #f5f2ed/#1a1a1a ベース */
+  --color-warm-50: #FAF8F5;
+  --color-warm-100: #F5F2ED;
+  --color-warm-200: #E8E4DD;
+  --color-warm-300: #D4CFC7;
+  --color-warm-700: #4A3F35;
+  --color-warm-800: #33291F;
+  --color-warm-900: #1A1A1A;
+
+  /* brand = warm（UIの主色調） */
+  --color-brand-50: #FAF8F5;
+  --color-brand-100: #F5F2ED;
+  --color-brand-200: #E8E4DD;
+  --color-brand-500: #8C7E6F;
+  --color-brand-600: #6B5D4F;
+  --color-brand-700: #4A3F35;
+  --color-brand-800: #33291F;
+  --color-brand-900: #1A1A1A;
+}
+
+/* ページ遷移アニメーション */
+main > * {
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  main > * {
+    animation: none;
+  }
+}
+
+/* グローバルフォーカスインジケータ */
+:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+  border-radius: 2px;
+}

package/src/app/layout.tsx

@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import { Nav } from "@/components/ui/nav";
 import "./globals.css";
 
+const inter = Inter({ subsets: ["latin"], display: "swap" });
+
 export const metadata: Metadata = {
   title: "Reqord",
   description: "Requirements management UI",
@@ -14,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ja">
-      <body className="bg-gray-50 text-gray-900 antialiased">
+      <body className={`${inter.className} bg-warm-50 text-warm-900 antialiased`}>
         <Nav />
         <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
           {children}

package/src/app/requirements/loading.tsx

@@ -2,11 +2,36 @@ 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" />
-        ))}
+      {/* Filter bar skeleton */}
+      <div className="flex gap-3">
+        <div className="h-10 w-64 rounded-md bg-gray-200" />
+        <div className="h-10 w-32 rounded-md bg-gray-200" />
+        <div className="h-10 w-32 rounded-md bg-gray-200" />
+      </div>
+      {/* Table skeleton */}
+      <div className="overflow-hidden rounded-lg border border-gray-200">
+        {/* Table header skeleton */}
+        <div className="flex gap-4 border-b-2 border-gray-200 bg-gray-50 px-4 py-3">
+          <div className="h-4 w-16 rounded bg-gray-300" />
+          <div className="h-4 w-48 rounded bg-gray-300" />
+          <div className="h-4 w-20 rounded bg-gray-300" />
+          <div className="h-4 w-20 rounded bg-gray-300" />
+          <div className="h-4 w-20 rounded bg-gray-300" />
+          <div className="h-4 w-24 rounded bg-gray-300" />
+        </div>
+        {/* Table rows skeleton */}
+        <div className="divide-y divide-gray-200">
+          {Array.from({ length: 8 }, (_, i) => (
+            <div key={i} className="flex gap-4 px-4 py-3.5">
+              <div className="h-4 w-24 rounded bg-gray-200" />
+              <div className="h-4 w-64 rounded bg-gray-200" />
+              <div className="h-5 w-20 rounded-full bg-gray-200" />
+              <div className="h-5 w-16 rounded-full bg-gray-200" />
+              <div className="h-5 w-8 rounded-full bg-gray-200" />
+              <div className="h-4 w-20 rounded bg-gray-200" />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

package/src/app/specifications/loading.tsx

@@ -2,11 +2,35 @@ 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" />
-        ))}
+      {/* Filter bar skeleton */}
+      <div className="flex gap-3">
+        <div className="h-10 w-64 rounded-md bg-gray-200" />
+        <div className="h-10 w-32 rounded-md bg-gray-200" />
+      </div>
+      {/* Table skeleton */}
+      <div className="overflow-hidden rounded-lg border border-gray-200">
+        {/* Table header skeleton */}
+        <div className="flex gap-4 border-b-2 border-gray-200 bg-gray-50 px-4 py-3">
+          <div className="h-4 w-16 rounded bg-gray-300" />
+          <div className="h-4 w-48 rounded bg-gray-300" />
+          <div className="h-4 w-32 rounded bg-gray-300" />
+          <div className="h-4 w-20 rounded bg-gray-300" />
+          <div className="h-4 w-16 rounded bg-gray-300" />
+          <div className="h-4 w-24 rounded bg-gray-300" />
+        </div>
+        {/* Table rows skeleton */}
+        <div className="divide-y divide-gray-200">
+          {Array.from({ length: 8 }, (_, i) => (
+            <div key={i} className="flex gap-4 px-4 py-3.5">
+              <div className="h-4 w-24 rounded bg-gray-200" />
+              <div className="h-4 w-64 rounded bg-gray-200" />
+              <div className="h-4 w-32 rounded bg-gray-200" />
+              <div className="h-5 w-20 rounded-full bg-gray-200" />
+              <div className="h-4 w-12 rounded bg-gray-200" />
+              <div className="h-4 w-20 rounded bg-gray-200" />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

package/src/components/dashboard/critical-path-display.tsx

@@ -9,6 +9,13 @@ type CriticalPathDisplayProps = {
 
 const INITIAL_DISPLAY_COUNT = 10;
 
+const PRIORITY_BADGE_CLASSES: Record<string, string> = {
+  P0: "bg-red-100 text-red-800",
+  P1: "bg-red-100 text-red-800",
+  P2: "bg-orange-100 text-orange-800",
+  P3: "bg-gray-100 text-gray-800",
+};
+
 export function CriticalPathDisplay({ items }: CriticalPathDisplayProps) {
   const openItems = items.filter((item) => item.status !== "closed");
   const closedItems = items.filter((item) => item.status === "closed");
@@ -23,10 +30,12 @@ export function CriticalPathDisplay({ items }: CriticalPathDisplayProps) {
         </span>
       </h2>
       {/* Show only open items when they exist; closed items are accessible via the expand button below */}
-      <div className="space-y-3">
+      <div className="space-y-2">
         {(openItems.length > 0
           ? openItems
-          : (showClosed ? closedItems : closedItems.slice(0, INITIAL_DISPLAY_COUNT))
+          : showClosed
+            ? closedItems
+            : closedItems.slice(0, INITIAL_DISPLAY_COUNT)
         ).map((item) => {
           const isCompleted = item.status === "closed";
           const isPending =
@@ -39,24 +48,30 @@ export function CriticalPathDisplay({ items }: CriticalPathDisplayProps) {
             textClass = "font-bold";
           }
 
+          const badgeClass =
+            PRIORITY_BADGE_CLASSES[item.priority] ?? "bg-gray-100 text-gray-800";
+
           return (
             <div
               key={item.issueNumber}
               data-testid="critical-path-item"
-              className={`flex items-start gap-3 rounded-md border border-gray-200 p-3 ${textClass}`}
+              className={`flex items-center gap-3 rounded-md border border-gray-200 px-3 py-2 ${textClass}`}
             >
-              <div className="flex-1">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-gray-900">
-                    #{item.issueNumber}
-                  </span>
-                  <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
-                    {item.priority}
-                  </span>
-                </div>
-                <p className="mt-1 text-sm text-gray-700">{item.title}</p>
-                <p className="mt-1 text-xs text-gray-500">{item.status}</p>
-              </div>
+              <a
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm font-medium text-blue-600 hover:underline"
+              >
+                #{item.issueNumber}
+              </a>
+              <span
+                className={`rounded-full px-2 py-0.5 text-xs font-medium ${badgeClass}`}
+              >
+                {item.priority}
+              </span>
+              <span className="flex-1 text-sm text-gray-700">{item.title}</span>
+              <span className="text-xs text-gray-400">{item.status}</span>
             </div>
           );
         })}

package/src/components/dashboard/progress-bar.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 type ProgressBarProps = {
@@ -33,10 +31,10 @@ export function ProgressBar({
           {current}/{total} ({percentage}%)
         </span>
       </div>
-      <div className="h-2 overflow-hidden rounded-full bg-gray-200">
+      <div className="h-3 overflow-hidden rounded-full bg-gray-100">
         <div
           data-testid="progress-bar-fill"
-          className={`h-full ${bgClass} transition-all duration-300`}
+          className={`h-full rounded-full ${bgClass} transition-all duration-500 ease-out`}
           style={{ width: `${percentage}%` }}
         />
       </div>

package/src/components/dashboard/project-health.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 type ProjectHealthProps = {
@@ -9,26 +7,27 @@ type ProjectHealthProps = {
 export function ProjectHealth({ score }: ProjectHealthProps) {
   const roundedScore = Math.round(score);
 
-  let colorClass = "text-red-500";
+  let colorClass = "text-red-600";
   if (roundedScore >= 80) {
-    colorClass = "text-green-500";
+    colorClass = "text-emerald-600";
   } else if (roundedScore >= 50) {
-    colorClass = "text-yellow-500";
+    colorClass = "text-yellow-600";
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-6">
-      <h2 className="mb-4 text-lg font-semibold text-gray-900">
+    <div className="relative overflow-hidden rounded-2xl border border-warm-200 bg-warm-100 p-8 shadow-sm">
+      <div className="absolute left-0 top-0 h-full w-1.5 bg-accent" />
+      <h2 className="text-sm font-medium uppercase tracking-wider text-warm-700">
         Project Health
       </h2>
-      <div className="flex items-baseline justify-center">
+      <div className="mt-4 flex items-baseline justify-center">
         <span
           data-testid="health-score"
-          className={`text-6xl font-bold ${colorClass}`}
+          className={`text-7xl font-extrabold tabular-nums ${colorClass}`}
         >
           {roundedScore}
         </span>
-        <span className="ml-2 text-2xl text-gray-500">/ 100</span>
+        <span className="ml-2 text-2xl text-warm-500">/ 100</span>
       </div>
     </div>
   );

package/src/components/dashboard/status-card.tsx

@@ -7,20 +7,31 @@ type StatusCardProps = {
   breakdown: StatusBreakdown;
 };
 
+const STATUS_BADGE_CLASSES: Record<string, string> = {
+  draft: "bg-gray-100 text-gray-600",
+  approved: "bg-blue-50 text-blue-700",
+  implemented: "bg-emerald-50 text-emerald-700",
+  deprecated: "bg-red-50 text-red-700",
+};
+
 export function StatusCard({ title, total, breakdown }: StatusCardProps) {
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-6">
+    <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
       <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
       <p className="mt-2 text-3xl font-bold text-gray-900">{total}</p>
       <div className="mt-4 flex flex-wrap gap-2">
-        {Object.entries(breakdown).map(([status, count]) => (
-          <span
-            key={status}
-            className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800"
-          >
-            {status}: {count}
-          </span>
-        ))}
+        {Object.entries(breakdown).map(([status, count]) => {
+          const badgeClass =
+            STATUS_BADGE_CLASSES[status] ?? "bg-gray-100 text-gray-600";
+          return (
+            <span
+              key={status}
+              className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${badgeClass}`}
+            >
+              {status}: {count}
+            </span>
+          );
+        })}
       </div>
     </div>
   );