@reqord/web 0.1.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@reqord/web",
+  "version": "0.1.0",
+  "description": "Web dashboard for Reqord",
+  "license": "AGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kicchann/reqord.git",
+    "directory": "packages/web"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "reqord",
+    "requirements",
+    "dashboard",
+    "next.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "next.config.ts",
+    "postcss.config.mjs",
+    "tsconfig.json",
+    "next-env.d.ts"
+  ],
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@xyflow/react": "^12.6.0",
+    "js-yaml": "^4.1.1",
+    "next": "^15.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "@reqord/shared": "0.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.3.0"
+  },
+  "scripts": {
+    "dev": "next dev --port 3456",
+    "build": "next build",
+    "start": "next start --port 3456",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

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

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { CriticalPathDisplay } from "../../../components/dashboard/critical-path-display";
+import type { CriticalPathItem } from "../../../lib/dashboard-data";
+
+describe("CriticalPathDisplay", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders all critical path items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "Implement feature A",
+        url: "https://github.com/repo/issues/100",
+        priority: "high",
+        status: "open",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+      {
+        issueNumber: 101,
+        title: "Implement feature B",
+        url: "https://github.com/repo/issues/101",
+        priority: "medium",
+        status: "in_progress",
+        estimatedHours: 16,
+        specId: "spec-000002",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    expect(screen.getByText("#100")).toBeInTheDocument();
+    expect(screen.getByText("Implement feature A")).toBeInTheDocument();
+    expect(screen.getByText("#101")).toBeInTheDocument();
+    expect(screen.getByText("Implement feature B")).toBeInTheDocument();
+  });
+
+  it("applies line-through decoration to closed items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "Completed task",
+        url: "https://github.com/repo/issues/100",
+        priority: "high",
+        status: "closed",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const item = screen.getByTestId("critical-path-item");
+    expect(item).toHaveClass("line-through");
+  });
+
+  it("applies bold styling to open items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "Open task",
+        url: "https://github.com/repo/issues/100",
+        priority: "high",
+        status: "open",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const item = screen.getByTestId("critical-path-item");
+    expect(item).toHaveClass("font-bold");
+  });
+
+  it("applies bold styling to in_progress items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "In progress task",
+        url: "https://github.com/repo/issues/100",
+        priority: "high",
+        status: "in_progress",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const item = screen.getByTestId("critical-path-item");
+    expect(item).toHaveClass("font-bold");
+  });
+
+  it("displays priority badges", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "High priority task",
+        url: "https://github.com/repo/issues/100",
+        priority: "high",
+        status: "open",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    expect(screen.getByText("high")).toBeInTheDocument();
+  });
+
+  it("renders empty list when no items", () => {
+    const items: CriticalPathItem[] = [];
+
+    const { container } = render(<CriticalPathDisplay items={items} />);
+
+    const listItems = container.querySelectorAll(
+      '[data-testid="critical-path-item"]'
+    );
+    expect(listItems).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { ProgressBar } from "../../../components/dashboard/progress-bar";
+
+describe("ProgressBar", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders label and progress text", () => {
+    render(
+      <ProgressBar
+        label="Requirements"
+        current={8}
+        total={10}
+        percentage={80}
+        color="blue"
+      />
+    );
+
+    expect(screen.getByText("Requirements")).toBeInTheDocument();
+    expect(screen.getByText("8/10 (80%)")).toBeInTheDocument();
+  });
+
+  it("renders 0% width when percentage is 0", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={0}
+        total={10}
+        percentage={0}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveStyle({ width: "0%" });
+  });
+
+  it("renders 50% width when percentage is 50", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveStyle({ width: "50%" });
+  });
+
+  it("renders 100% width when percentage is 100", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={10}
+        total={10}
+        percentage={100}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveStyle({ width: "100%" });
+  });
+
+  it("applies the correct color class", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="green"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveClass("bg-green-500");
+  });
+});

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

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { ProjectHealth } from "../../../components/dashboard/project-health";
+
+describe("ProjectHealth", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders score with green color when score >= 80", () => {
+    render(<ProjectHealth score={85} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toBeInTheDocument();
+    expect(scoreElement).toHaveTextContent("85");
+    expect(scoreElement).toHaveClass("text-green-500");
+  });
+
+  it("renders score with yellow color when score >= 50 and < 80", () => {
+    render(<ProjectHealth score={65} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toHaveTextContent("65");
+    expect(scoreElement).toHaveClass("text-yellow-500");
+  });
+
+  it("renders score with red color when score < 50", () => {
+    render(<ProjectHealth score={30} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toHaveTextContent("30");
+    expect(scoreElement).toHaveClass("text-red-500");
+  });
+
+  it("renders score at boundary (score = 80) as green", () => {
+    render(<ProjectHealth score={80} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toHaveClass("text-green-500");
+  });
+
+  it("renders score at boundary (score = 50) as yellow", () => {
+    render(<ProjectHealth score={50} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toHaveClass("text-yellow-500");
+  });
+
+  it("displays '/ 100' label", () => {
+    render(<ProjectHealth score={75} />);
+
+    expect(screen.getByText("/ 100")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/dashboard/warning-alert.test.tsx

@@ -0,0 +1,75 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { WarningAlert } from "../../../components/dashboard/warning-alert";
+import type { Warning } from "../../../lib/dashboard-data";
+
+describe("WarningAlert", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders error severity with red border and background", () => {
+    const warning: Warning = {
+      type: "design_verification_error",
+      message: "Critical issue detected",
+      severity: "error",
+      relatedId: "spec-000001",
+    };
+
+    render(<WarningAlert warning={warning} />);
+
+    const alert = screen.getByTestId("warning-alert");
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("border-red-500");
+    expect(alert).toHaveClass("bg-red-50");
+    expect(screen.getByText("Critical issue detected")).toBeInTheDocument();
+  });
+
+  it("renders warning severity with yellow border and background", () => {
+    const warning: Warning = {
+      type: "missing_specification",
+      message: "Specification is missing",
+      severity: "warning",
+      relatedId: "req-000001",
+    };
+
+    render(<WarningAlert warning={warning} />);
+
+    const alert = screen.getByTestId("warning-alert");
+    expect(alert).toHaveClass("border-yellow-500");
+    expect(alert).toHaveClass("bg-yellow-50");
+    expect(screen.getByText("Specification is missing")).toBeInTheDocument();
+  });
+
+  it("renders info severity with blue border and background", () => {
+    const warning: Warning = {
+      type: "unapproved_dependency",
+      message: "Dependency not approved",
+      severity: "info",
+      relatedId: "req-000002",
+    };
+
+    render(<WarningAlert warning={warning} />);
+
+    const alert = screen.getByTestId("warning-alert");
+    expect(alert).toHaveClass("border-blue-500");
+    expect(alert).toHaveClass("bg-blue-50");
+    expect(screen.getByText("Dependency not approved")).toBeInTheDocument();
+  });
+
+  it("displays the related ID", () => {
+    const warning: Warning = {
+      type: "missing_specification",
+      message: "Test message",
+      severity: "warning",
+      relatedId: "req-000123",
+    };
+
+    render(<WarningAlert warning={warning} />);
+
+    expect(screen.getByText("req-000123")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/feedback/feedback-client-view.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackClientView } from "../../../components/feedback/feedback-client-view";
+
+const feedbacks: FeedbackEntry[] = [
+  {
+    githubIssue: 1,
+    type: "bug",
+    severity: "high",
+    status: "open",
+    linkedTo: { requirements: [], createdRequirements: [], specifications: [], createdSpecifications: [] },
+    syncedAt: "2026-01-01T00:00:00Z",
+  },
+  {
+    githubIssue: 2,
+    type: "improvement",
+    severity: "medium",
+    status: "closed",
+    linkedTo: { requirements: [], createdRequirements: [], specifications: [], createdSpecifications: [] },
+    syncedAt: "2026-01-02T00:00:00Z",
+  },
+  {
+    githubIssue: 3,
+    type: "bug",
+    severity: "low",
+    status: "open",
+    linkedTo: { requirements: [], createdRequirements: [], specifications: [], createdSpecifications: [] },
+    syncedAt: "2026-01-03T00:00:00Z",
+  },
+];
+
+describe("FeedbackClientView", () => {
+  afterEach(() => cleanup());
+
+  it("初期状態で全件表示される", () => {
+    render(
+      <FeedbackClientView feedbacks={feedbacks} requirementTitles={{}} specificationTitles={{}} />,
+    );
+
+    expect(screen.getAllByTestId("feedback-row")).toHaveLength(3);
+  });
+
+  it("typeフィルタで絞り込みができる", () => {
+    render(
+      <FeedbackClientView feedbacks={feedbacks} requirementTitles={{}} specificationTitles={{}} />,
+    );
+
+    fireEvent.click(screen.getByTestId("filter-type-bug"));
+    expect(screen.getAllByTestId("feedback-row")).toHaveLength(2);
+  });
+
+  it("statusフィルタで絞り込みができる", () => {
+    render(
+      <FeedbackClientView feedbacks={feedbacks} requirementTitles={{}} specificationTitles={{}} />,
+    );
+
+    fireEvent.click(screen.getByTestId("filter-status-closed"));
+    expect(screen.getAllByTestId("feedback-row")).toHaveLength(1);
+  });
+
+  it("複数フィルタのAND条件で絞り込みができる", () => {
+    render(
+      <FeedbackClientView feedbacks={feedbacks} requirementTitles={{}} specificationTitles={{}} />,
+    );
+
+    fireEvent.click(screen.getByTestId("filter-type-bug"));
+    fireEvent.click(screen.getByTestId("filter-severity-high"));
+    expect(screen.getAllByTestId("feedback-row")).toHaveLength(1);
+    expect(screen.getByTestId("feedback-issue")).toHaveTextContent("#1");
+  });
+
+  it("フィルタ結果が0件の場合emptyメッセージが表示される", () => {
+    render(
+      <FeedbackClientView feedbacks={feedbacks} requirementTitles={{}} specificationTitles={{}} />,
+    );
+
+    fireEvent.click(screen.getByTestId("filter-type-security"));
+    expect(screen.getByTestId("feedback-empty")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/feedback/feedback-filters.test.tsx

@@ -0,0 +1,51 @@
+// @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 { FeedbackFilters } from "../../../components/feedback/feedback-filters";
+
+describe("FeedbackFilters", () => {
+  afterEach(() => cleanup());
+
+  it("全フィルタグループが表示される", () => {
+    const onChange = vi.fn();
+    render(<FeedbackFilters activeFilters={{}} onFilterChange={onChange} />);
+
+    expect(screen.getByTestId("feedback-filters")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-type-all")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-type-bug")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-severity-all")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-severity-critical")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-status-all")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-status-open")).toBeInTheDocument();
+  });
+
+  it("typeフィルタ選択でonFilterChangeが呼ばれる", () => {
+    const onChange = vi.fn();
+    render(<FeedbackFilters activeFilters={{}} onFilterChange={onChange} />);
+
+    fireEvent.click(screen.getByTestId("filter-type-bug"));
+    expect(onChange).toHaveBeenCalledWith({ type: "bug" });
+  });
+
+  it("allを選択するとフィルタがundefinedになる", () => {
+    const onChange = vi.fn();
+    render(
+      <FeedbackFilters activeFilters={{ type: "bug" }} onFilterChange={onChange} />,
+    );
+
+    fireEvent.click(screen.getByTestId("filter-type-all"));
+    expect(onChange).toHaveBeenCalledWith({ type: undefined });
+  });
+
+  it("アクティブなフィルタボタンにbg-blue-600クラスが適用される", () => {
+    const onChange = vi.fn();
+    render(
+      <FeedbackFilters activeFilters={{ severity: "high" }} onFilterChange={onChange} />,
+    );
+
+    expect(screen.getByTestId("filter-severity-high")).toHaveClass("bg-blue-600");
+    expect(screen.getByTestId("filter-severity-all")).not.toHaveClass("bg-blue-600");
+  });
+});

package/src/__tests__/components/feedback/feedback-linked-items.test.tsx

@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import type { FeedbackLinkedTo } from "@reqord/shared";
+import { FeedbackLinkedItems } from "../../../components/feedback/feedback-linked-items";
+
+const emptyLinkedTo: FeedbackLinkedTo = {
+  requirements: [],
+  createdRequirements: [],
+  specifications: [],
+  createdSpecifications: [],
+};
+
+const reqTitles: Record<string, string> = {
+  "req-000001": "ユーザー認証",
+  "req-000002": "データ管理",
+};
+
+const specTitles: Record<string, string> = {
+  "spec-000001": "認証API",
+  "spec-000002": "管理画面",
+};
+
+describe("FeedbackLinkedItems", () => {
+  afterEach(() => cleanup());
+
+  it("空の場合: 何も表示されない", () => {
+    const { container } = render(
+      <FeedbackLinkedItems
+        linkedTo={emptyLinkedTo}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("requirementsリンクが表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{ ...emptyLinkedTo, requirements: ["req-000001"] }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const link = screen.getByTestId("linked-requirement");
+    expect(link).toHaveTextContent("ユーザー認証");
+    expect(link).toHaveAttribute("href", "/requirements/req-000001");
+  });
+
+  it("createdRequirementsに「created」バッジが表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{ ...emptyLinkedTo, createdRequirements: ["req-000002"] }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const link = screen.getByTestId("created-requirement");
+    expect(link).toHaveTextContent("データ管理");
+    expect(link).toHaveTextContent("created");
+  });
+
+  it("specificationsリンクが表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{ ...emptyLinkedTo, specifications: ["spec-000001"] }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const link = screen.getByTestId("linked-specification");
+    expect(link).toHaveTextContent("認証API");
+    expect(link).toHaveAttribute("href", "/specifications/spec-000001");
+  });
+
+  it("createdSpecificationsに「created」バッジが表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{ ...emptyLinkedTo, createdSpecifications: ["spec-000002"] }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const link = screen.getByTestId("created-specification");
+    expect(link).toHaveTextContent("管理画面");
+    expect(link).toHaveTextContent("created");
+  });
+
+  it("resolvedに「resolved」バッジが表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{
+          ...emptyLinkedTo,
+          resolved: {
+            requirements: ["req-000001"],
+            specifications: ["spec-000001"],
+          },
+        }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const reqLink = screen.getByTestId("resolved-requirement");
+    expect(reqLink).toHaveTextContent("ユーザー認証");
+    expect(reqLink).toHaveTextContent("resolved");
+
+    const specLink = screen.getByTestId("resolved-specification");
+    expect(specLink).toHaveTextContent("認証API");
+    expect(specLink).toHaveTextContent("resolved");
+  });
+
+  it("タイトルマップにないIDはIDがそのまま表示される", () => {
+    render(
+      <FeedbackLinkedItems
+        linkedTo={{ ...emptyLinkedTo, requirements: ["req-999999"] }}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getByTestId("linked-requirement")).toHaveTextContent("req-999999");
+  });
+});