@reqord/web 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqord/web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Web dashboard for Reqord",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -37,7 +37,7 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "@reqord/shared": "0.2.0"
+    "@reqord/shared": "0.3.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.0",

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

@@ -126,4 +126,65 @@ describe("CriticalPathDisplay", () => {
     );
     expect(listItems).toHaveLength(0);
   });
+
+  it("renders issue number as GitHub link", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 42,
+        title: "Linked task",
+        url: "https://github.com/repo/issues/42",
+        priority: "high",
+        status: "open",
+        estimatedHours: 4,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const link = screen.getByRole("link", { name: "#42" });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      "href",
+      "https://github.com/repo/issues/42"
+    );
+  });
+
+  it("applies red badge to P1 priority items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 100,
+        title: "High priority task",
+        url: "https://github.com/repo/issues/100",
+        priority: "P1",
+        status: "open",
+        estimatedHours: 8,
+        specId: "spec-000001",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const badge = screen.getByText("P1");
+    expect(badge).toHaveClass("bg-red-100");
+  });
+
+  it("applies orange badge to P2 priority items", () => {
+    const items: CriticalPathItem[] = [
+      {
+        issueNumber: 101,
+        title: "Medium priority task",
+        url: "https://github.com/repo/issues/101",
+        priority: "P2",
+        status: "open",
+        estimatedHours: 8,
+        specId: "spec-000002",
+      },
+    ];
+
+    render(<CriticalPathDisplay items={items} />);
+
+    const badge = screen.getByText("P2");
+    expect(badge).toHaveClass("bg-orange-100");
+  });
 });

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

@@ -84,4 +84,67 @@ describe("ProgressBar", () => {
     const progressBar = screen.getByTestId("progress-bar-fill");
     expect(progressBar).toHaveClass("bg-green-500");
   });
+
+  it("uses h-3 height for the track", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    const track = progressBar.parentElement;
+    expect(track).toHaveClass("h-3");
+  });
+
+  it("uses gray-100 background for the track", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    const track = progressBar.parentElement;
+    expect(track).toHaveClass("bg-gray-100");
+  });
+
+  it("applies rounded-full to the fill bar", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveClass("rounded-full");
+  });
+
+  it("applies duration-500 ease-out transition to the fill bar", () => {
+    render(
+      <ProgressBar
+        label="Test"
+        current={5}
+        total={10}
+        percentage={50}
+        color="blue"
+      />
+    );
+
+    const progressBar = screen.getByTestId("progress-bar-fill");
+    expect(progressBar).toHaveClass("duration-500");
+    expect(progressBar).toHaveClass("ease-out");
+  });
 });

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

@@ -10,13 +10,13 @@ describe("ProjectHealth", () => {
     cleanup();
   });
 
-  it("renders score with green color when score >= 80", () => {
+  it("renders score with emerald 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");
+    expect(scoreElement).toHaveClass("text-emerald-600");
   });
 
   it("renders score with yellow color when score >= 50 and < 80", () => {
@@ -24,7 +24,7 @@ describe("ProjectHealth", () => {
 
     const scoreElement = screen.getByTestId("health-score");
     expect(scoreElement).toHaveTextContent("65");
-    expect(scoreElement).toHaveClass("text-yellow-500");
+    expect(scoreElement).toHaveClass("text-yellow-600");
   });
 
   it("renders score with red color when score < 50", () => {
@@ -32,21 +32,21 @@ describe("ProjectHealth", () => {
 
     const scoreElement = screen.getByTestId("health-score");
     expect(scoreElement).toHaveTextContent("30");
-    expect(scoreElement).toHaveClass("text-red-500");
+    expect(scoreElement).toHaveClass("text-red-600");
   });
 
-  it("renders score at boundary (score = 80) as green", () => {
+  it("renders score at boundary (score = 80) as emerald", () => {
     render(<ProjectHealth score={80} />);
 
     const scoreElement = screen.getByTestId("health-score");
-    expect(scoreElement).toHaveClass("text-green-500");
+    expect(scoreElement).toHaveClass("text-emerald-600");
   });
 
   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");
+    expect(scoreElement).toHaveClass("text-yellow-600");
   });
 
   it("displays '/ 100' label", () => {
@@ -54,4 +54,18 @@ describe("ProjectHealth", () => {
 
     expect(screen.getByText("/ 100")).toBeInTheDocument();
   });
+
+  it("renders with warm background and accent bar", () => {
+    render(<ProjectHealth score={75} />);
+
+    const container = screen.getByTestId("health-score").closest("div[class*='bg-warm']");
+    expect(container).not.toBeNull();
+  });
+
+  it("rounds fractional score for display", () => {
+    render(<ProjectHealth score={84.6} />);
+
+    const scoreElement = screen.getByTestId("health-score");
+    expect(scoreElement).toHaveTextContent("85");
+  });
 });

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

@@ -0,0 +1,86 @@
+// @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 { StatusCard } from "../../../components/dashboard/status-card";
+import type { StatusBreakdown } from "../../../lib/dashboard-data";
+
+describe("StatusCard", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders title and total count", () => {
+    const breakdown: StatusBreakdown = { draft: 5, approved: 3 };
+    render(<StatusCard title="Requirements" total={8} breakdown={breakdown} />);
+
+    expect(screen.getByText("Requirements")).toBeInTheDocument();
+    expect(screen.getByText("8")).toBeInTheDocument();
+  });
+
+  it("renders breakdown badges for each status", () => {
+    const breakdown: StatusBreakdown = { draft: 5, approved: 3 };
+    render(<StatusCard title="Requirements" total={8} breakdown={breakdown} />);
+
+    expect(screen.getByText("draft: 5")).toBeInTheDocument();
+    expect(screen.getByText("approved: 3")).toBeInTheDocument();
+  });
+
+  it("applies rounded-xl class to the card container", () => {
+    const breakdown: StatusBreakdown = { draft: 2 };
+    const { container } = render(
+      <StatusCard title="Test" total={2} breakdown={breakdown} />
+    );
+
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("rounded-xl");
+  });
+
+  it("applies draft badge styling to draft status", () => {
+    const breakdown: StatusBreakdown = { draft: 3 };
+    render(<StatusCard title="Test" total={3} breakdown={breakdown} />);
+
+    const draftBadge = screen.getByText("draft: 3");
+    expect(draftBadge).toHaveClass("bg-gray-100");
+    expect(draftBadge).toHaveClass("text-gray-600");
+  });
+
+  it("applies approved badge styling to approved status", () => {
+    const breakdown: StatusBreakdown = { approved: 2 };
+    render(<StatusCard title="Test" total={2} breakdown={breakdown} />);
+
+    const approvedBadge = screen.getByText("approved: 2");
+    expect(approvedBadge).toHaveClass("bg-blue-50");
+    expect(approvedBadge).toHaveClass("text-blue-700");
+  });
+
+  it("applies implemented badge styling to implemented status", () => {
+    const breakdown: StatusBreakdown = { implemented: 4 };
+    render(<StatusCard title="Test" total={4} breakdown={breakdown} />);
+
+    const implementedBadge = screen.getByText("implemented: 4");
+    expect(implementedBadge).toHaveClass("bg-emerald-50");
+    expect(implementedBadge).toHaveClass("text-emerald-700");
+  });
+
+  it("applies deprecated badge styling to deprecated status", () => {
+    const breakdown: StatusBreakdown = { deprecated: 1 };
+    render(<StatusCard title="Test" total={1} breakdown={breakdown} />);
+
+    const deprecatedBadge = screen.getByText("deprecated: 1");
+    expect(deprecatedBadge).toHaveClass("bg-red-50");
+    expect(deprecatedBadge).toHaveClass("text-red-700");
+  });
+
+  it("applies hover shadow transition", () => {
+    const breakdown: StatusBreakdown = { draft: 1 };
+    const { container } = render(
+      <StatusCard title="Test" total={1} breakdown={breakdown} />
+    );
+
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("hover:shadow-md");
+    expect(card).toHaveClass("transition-shadow");
+  });
+});

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

@@ -11,7 +11,7 @@ describe("WarningAlert", () => {
     cleanup();
   });
 
-  it("renders error severity with red border and background", () => {
+  it("renders error severity with red background and rounded corners", () => {
     const warning: Warning = {
       type: "design_verification_error",
       message: "Critical issue detected",
@@ -23,12 +23,12 @@ describe("WarningAlert", () => {
 
     const alert = screen.getByTestId("warning-alert");
     expect(alert).toBeInTheDocument();
-    expect(alert).toHaveClass("border-red-500");
     expect(alert).toHaveClass("bg-red-50");
+    expect(alert).toHaveClass("rounded-lg");
     expect(screen.getByText("Critical issue detected")).toBeInTheDocument();
   });
 
-  it("renders warning severity with yellow border and background", () => {
+  it("renders warning severity with yellow background and rounded corners", () => {
     const warning: Warning = {
       type: "missing_specification",
       message: "Specification is missing",
@@ -39,12 +39,12 @@ describe("WarningAlert", () => {
     render(<WarningAlert warning={warning} />);
 
     const alert = screen.getByTestId("warning-alert");
-    expect(alert).toHaveClass("border-yellow-500");
     expect(alert).toHaveClass("bg-yellow-50");
+    expect(alert).toHaveClass("rounded-lg");
     expect(screen.getByText("Specification is missing")).toBeInTheDocument();
   });
 
-  it("renders info severity with blue border and background", () => {
+  it("renders info severity with blue background and rounded corners", () => {
     const warning: Warning = {
       type: "unapproved_dependency",
       message: "Dependency not approved",
@@ -55,8 +55,8 @@ describe("WarningAlert", () => {
     render(<WarningAlert warning={warning} />);
 
     const alert = screen.getByTestId("warning-alert");
-    expect(alert).toHaveClass("border-blue-500");
     expect(alert).toHaveClass("bg-blue-50");
+    expect(alert).toHaveClass("rounded-lg");
     expect(screen.getByText("Dependency not approved")).toBeInTheDocument();
   });
 

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

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { FeedbackFilters } from "../../../components/feedback/feedback-filters";
+
+describe("FeedbackFilters - ラベル短縮", () => {
+  afterEach(() => cleanup());
+
+  it("requirement-gapタイプのラベルが'Req Gap'と短縮表示される", () => {
+    render(<FeedbackFilters activeFilters={{}} onFilterChange={vi.fn()} />);
+
+    // data-testidで要素を取得してテキストを確認
+    const reqGapButton = screen.getByTestId("filter-type-requirement-gap");
+    expect(reqGapButton).toHaveTextContent("Req Gap");
+  });
+
+  it("spec-mismatchタイプのラベルが'Spec Mismatch'と短縮表示される", () => {
+    render(<FeedbackFilters activeFilters={{}} onFilterChange={vi.fn()} />);
+
+    const specMismatchButton = screen.getByTestId("filter-type-spec-mismatch");
+    expect(specMismatchButton).toHaveTextContent("Spec Mismatch");
+  });
+
+  it("セグメントボタンのパディングが拡大されている（px-3 py-1.5）", () => {
+    render(<FeedbackFilters activeFilters={{}} onFilterChange={vi.fn()} />);
+
+    const allTypeButton = screen.getByTestId("filter-type-all");
+    expect(allTypeButton.className).toContain("px-3");
+    expect(allTypeButton.className).toContain("py-1.5");
+  });
+});

package/src/__tests__/components/graph/drilldown-breadcrumb.test.tsx

@@ -67,4 +67,16 @@ describe("DrillDownBreadcrumb", () => {
 
     expect(onBack).not.toHaveBeenCalled();
   });
+
+  it("back button uses warm hover colors", () => {
+    const onBack = vi.fn();
+
+    const { container } = render(
+      <DrillDownBreadcrumb requirementTitle="User Login" onBack={onBack} />
+    );
+
+    const button = container.querySelector("button");
+    expect(button).toHaveClass("hover:bg-warm-200/60");
+    expect(button).toHaveClass("hover:text-warm-900");
+  });
 });

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

@@ -2,24 +2,24 @@ import { describe, it, expect } from "vitest";
 import { EDGE_STYLES } from "../../../components/graph/edge-styles";
 
 describe("EDGE_STYLES", () => {
-  it("dependency has stroke #64748b and strokeWidth 2", () => {
+  it("dependency has stroke #94a3b8 (slate-400) and strokeWidth 2 (brand color system)", () => {
     expect(EDGE_STYLES.dependency).toEqual({
-      stroke: "#64748b",
+      stroke: "#94a3b8",
       strokeWidth: 2,
     });
   });
 
-  it("implements has stroke #3b82f6, strokeWidth 2, and strokeDasharray '5,5'", () => {
+  it("implements has stroke #dc2626 (brand red), strokeWidth 2, and strokeDasharray '5,5'", () => {
     expect(EDGE_STYLES.implements).toEqual({
-      stroke: "#3b82f6",
+      stroke: "#dc2626",
       strokeWidth: 2,
       strokeDasharray: "5,5",
     });
   });
 
-  it("tracks has stroke #22c55e, strokeWidth 1.5, and strokeDasharray '2,2'", () => {
+  it("tracks has stroke #a855f7 (purple), strokeWidth 1.5, and strokeDasharray '2,2'", () => {
     expect(EDGE_STYLES.tracks).toEqual({
-      stroke: "#22c55e",
+      stroke: "#a855f7",
       strokeWidth: 1.5,
       strokeDasharray: "2,2",
     });

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

@@ -46,7 +46,7 @@ describe("IssueNode", () => {
     expect(screen.getByText("Issue #123")).toBeInTheDocument();
   });
 
-  it("renders open status with yellow background class", () => {
+  it("renders open status with amber background class (brand color system)", () => {
     const { container } = render(
       <IssueNode
         {...defaultNodeProps}
@@ -61,11 +61,11 @@ describe("IssueNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-yellow-200");
+    const nodeDiv = container.querySelector(".bg-amber-50");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders closed status with green background class", () => {
+  it("renders closed status with emerald background class (brand color system)", () => {
     const { container } = render(
       <IssueNode
         {...defaultNodeProps}
@@ -80,11 +80,11 @@ describe("IssueNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-green-200");
+    const nodeDiv = container.querySelector(".bg-emerald-50");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders in_progress status with blue background class", () => {
+  it("renders in_progress status with blue background class (brand color system)", () => {
     const { container } = render(
       <IssueNode
         {...defaultNodeProps}
@@ -99,10 +99,29 @@ describe("IssueNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-blue-200");
+    const nodeDiv = container.querySelector(".bg-blue-50");
     expect(nodeDiv).toBeInTheDocument();
   });
 
+  it("renders status badge with semi-transparent white background", () => {
+    const { container } = render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    const badge = container.querySelector(".bg-white\\/80");
+    expect(badge).toBeInTheDocument();
+  });
+
   it("renders status badge", () => {
     render(
       <IssueNode

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

@@ -148,4 +148,49 @@ describe("RequirementNode", () => {
       expect(screen.getByRole("button", { name: /1 spec$/i })).toBeInTheDocument();
     });
   });
+
+  describe("brand color system", () => {
+    it("renders approved status with blue border and background (brand color system)", () => {
+      const { container } = render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, status: "approved" }}
+        />
+      );
+
+      const nodeDiv = container.querySelector(".border-blue-300.bg-blue-50");
+      expect(nodeDiv).toBeInTheDocument();
+    });
+
+    it("renders implemented status with emerald border and background (brand color system)", () => {
+      const { container } = render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, status: "implemented" }}
+        />
+      );
+
+      const nodeDiv = container.querySelector(".border-emerald-300.bg-emerald-50");
+      expect(nodeDiv).toBeInTheDocument();
+    });
+
+    it("renders with shadow-md for improved visibility", () => {
+      const { container } = render(
+        <RequirementNode {...baseProps} />
+      );
+
+      const nodeDiv = container.querySelector(".shadow-md");
+      expect(nodeDiv).toBeInTheDocument();
+    });
+
+    it("renders handles with softened gray color (!bg-gray-300)", () => {
+      const { container } = render(
+        <RequirementNode {...baseProps} />
+      );
+
+      // Check that no handle has the old !bg-gray-400 class
+      const oldHandles = container.querySelector('[class*="bg-gray-400"]');
+      expect(oldHandles).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -41,7 +41,7 @@ describe("SpecificationNode", () => {
     expect(screen.getByText("spec-000001")).toBeInTheDocument();
   });
 
-  it("renders draft status with blue background class", () => {
+  it("renders draft status with gray background class (brand color system)", () => {
     const { container } = render(
       <SpecificationNode
         {...defaultNodeProps}
@@ -51,11 +51,11 @@ describe("SpecificationNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-blue-200");
+    const nodeDiv = container.querySelector(".bg-gray-100");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders approved status with green background class", () => {
+  it("renders approved status with blue background class (brand color system)", () => {
     const { container } = render(
       <SpecificationNode
         {...defaultNodeProps}
@@ -65,11 +65,11 @@ describe("SpecificationNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-green-200");
+    const nodeDiv = container.querySelector(".bg-blue-100");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders implemented status with emerald background class", () => {
+  it("renders implemented status with emerald background class (brand color system)", () => {
     const { container } = render(
       <SpecificationNode
         {...defaultNodeProps}
@@ -79,36 +79,49 @@ describe("SpecificationNode", () => {
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-emerald-300");
+    const nodeDiv = container.querySelector(".bg-emerald-100");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders implemented status with emerald background class", () => {
+  it("renders deprecated status with red background class (brand color system)", () => {
     const { container } = render(
       <SpecificationNode
         {...defaultNodeProps}
         id="spec-000004"
-        data={{ label: "spec-000004", status: "implemented" }}
+        data={{ label: "spec-000004", status: "deprecated" }}
         type="specification"
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-emerald-300");
+    const nodeDiv = container.querySelector(".bg-red-100");
     expect(nodeDiv).toBeInTheDocument();
   });
 
-  it("renders deprecated status with red background class", () => {
+  it("renders status badge with semi-transparent white background", () => {
     const { container } = render(
       <SpecificationNode
         {...defaultNodeProps}
-        id="spec-000005"
-        data={{ label: "spec-000005", status: "deprecated" }}
+        id="spec-000001"
+        data={{ label: "My Spec Title", status: "draft" }}
         type="specification"
       />
     );
 
-    const nodeDiv = container.querySelector(".bg-red-200");
-    expect(nodeDiv).toBeInTheDocument();
+    const badge = container.querySelector(".bg-white\\/80");
+    expect(badge).toBeInTheDocument();
+  });
+
+  it("renders label text as title", () => {
+    render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000001"
+        data={{ label: "My Spec Title", status: "draft" }}
+        type="specification"
+      />
+    );
+
+    expect(screen.getByText("My Spec Title")).toBeInTheDocument();
   });
 
   it("renders status badge", () => {