@reqord/web 0.1.0

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

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useState } from "react";
+import type { CriticalPathItem } from "@/lib/dashboard-data";
+
+type CriticalPathDisplayProps = {
+  items: CriticalPathItem[];
+};
+
+const INITIAL_DISPLAY_COUNT = 10;
+
+export function CriticalPathDisplay({ items }: CriticalPathDisplayProps) {
+  const openItems = items.filter((item) => item.status !== "closed");
+  const closedItems = items.filter((item) => item.status === "closed");
+  const [showClosed, setShowClosed] = useState(false);
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6">
+      <h2 className="mb-4 text-lg font-semibold text-gray-900">
+        Critical Path
+        <span className="ml-2 text-sm font-normal text-gray-500">
+          {openItems.length} open / {closedItems.length} closed
+        </span>
+      </h2>
+      {/* Show only open items when they exist; closed items are accessible via the expand button below */}
+      <div className="space-y-3">
+        {(openItems.length > 0
+          ? openItems
+          : (showClosed ? closedItems : closedItems.slice(0, INITIAL_DISPLAY_COUNT))
+        ).map((item) => {
+          const isCompleted = item.status === "closed";
+          const isPending =
+            item.status === "open" || item.status === "in_progress";
+
+          let textClass = "";
+          if (isCompleted) {
+            textClass = "line-through";
+          } else if (isPending) {
+            textClass = "font-bold";
+          }
+
+          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}`}
+            >
+              <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>
+            </div>
+          );
+        })}
+      </div>
+      {openItems.length === 0 && closedItems.length > INITIAL_DISPLAY_COUNT && (
+        <button
+          onClick={() => setShowClosed(!showClosed)}
+          className="mt-3 text-sm text-blue-600 hover:text-blue-800 hover:underline"
+        >
+          {showClosed
+            ? "Show less"
+            : `Show all ${closedItems.length} closed items`}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+
+type ProgressBarProps = {
+  label: string;
+  current: number;
+  total: number;
+  percentage: number;
+  color: string;
+};
+
+const COLOR_CLASSES: Record<string, string> = {
+  blue: "bg-blue-500",
+  purple: "bg-purple-500",
+  green: "bg-green-500",
+};
+
+export function ProgressBar({
+  label,
+  current,
+  total,
+  percentage,
+  color,
+}: ProgressBarProps) {
+  const bgClass = COLOR_CLASSES[color] ?? "bg-gray-500";
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-gray-700">{label}</span>
+        <span className="text-sm text-gray-600">
+          {current}/{total} ({percentage}%)
+        </span>
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-gray-200">
+        <div
+          data-testid="progress-bar-fill"
+          className={`h-full ${bgClass} transition-all duration-300`}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { ProgressBar } from "./progress-bar";
+import type { CategorySummary, IssueSummary } from "@/lib/dashboard-data";
+
+type ProgressSectionProps = {
+  requirements: CategorySummary;
+  specifications: CategorySummary;
+  issues: IssueSummary;
+};
+
+export function ProgressSection({
+  requirements,
+  specifications,
+  issues,
+}: ProgressSectionProps) {
+  const reqApproved = Math.round(requirements.total * requirements.approvalRate);
+  const reqPercentage = Math.round(requirements.approvalRate * 100);
+
+  const specApproved = Math.round(
+    specifications.total * specifications.approvalRate
+  );
+  const specPercentage = Math.round(specifications.approvalRate * 100);
+
+  const issuesPercentage = Math.round(issues.completionRate * 100);
+
+  return (
+    <div className="grid gap-6 md:grid-cols-3">
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <ProgressBar
+          label="Requirements"
+          current={reqApproved}
+          total={requirements.total}
+          percentage={reqPercentage}
+          color="blue"
+        />
+      </div>
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <ProgressBar
+          label="Specifications"
+          current={specApproved}
+          total={specifications.total}
+          percentage={specPercentage}
+          color="purple"
+        />
+      </div>
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <ProgressBar
+          label="Issues"
+          current={issues.completed}
+          total={issues.total}
+          percentage={issuesPercentage}
+          color="green"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+
+type ProjectHealthProps = {
+  score: number;
+};
+
+export function ProjectHealth({ score }: ProjectHealthProps) {
+  const roundedScore = Math.round(score);
+
+  let colorClass = "text-red-500";
+  if (roundedScore >= 80) {
+    colorClass = "text-green-500";
+  } else if (roundedScore >= 50) {
+    colorClass = "text-yellow-500";
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6">
+      <h2 className="mb-4 text-lg font-semibold text-gray-900">
+        Project Health
+      </h2>
+      <div className="flex items-baseline justify-center">
+        <span
+          data-testid="health-score"
+          className={`text-6xl font-bold ${colorClass}`}
+        >
+          {roundedScore}
+        </span>
+        <span className="ml-2 text-2xl text-gray-500">/ 100</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import type { StatusBreakdown } from "@/lib/dashboard-data";
+
+type StatusCardProps = {
+  title: string;
+  total: number;
+  breakdown: StatusBreakdown;
+};
+
+export function StatusCard({ title, total, breakdown }: StatusCardProps) {
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6">
+      <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>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { StatusCard } from "./status-card";
+import type { CategorySummary } from "@/lib/dashboard-data";
+
+type StatusCardsProps = {
+  requirements: CategorySummary;
+  specifications: CategorySummary;
+};
+
+export function StatusCards({
+  requirements,
+  specifications,
+}: StatusCardsProps) {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <StatusCard
+        title="Requirements"
+        total={requirements.total}
+        breakdown={requirements.breakdown}
+      />
+      <StatusCard
+        title="Specifications"
+        total={specifications.total}
+        breakdown={specifications.breakdown}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Warning } from "@/lib/dashboard-data";
+
+type WarningAlertProps = {
+  warning: Warning;
+};
+
+export function WarningAlert({ warning }: WarningAlertProps) {
+  let borderColor = "border-blue-500";
+  let bgColor = "bg-blue-50";
+
+  if (warning.severity === "error") {
+    borderColor = "border-red-500";
+    bgColor = "bg-red-50";
+  } else if (warning.severity === "warning") {
+    borderColor = "border-yellow-500";
+    bgColor = "bg-yellow-50";
+  }
+
+  return (
+    <div
+      data-testid="warning-alert"
+      className={`rounded-md border-l-4 p-4 ${borderColor} ${bgColor}`}
+    >
+      <div className="flex items-start">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-900">{warning.message}</p>
+          <p className="mt-1 text-xs text-gray-600">{warning.relatedId}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/warning-alerts.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { WarningAlert } from "./warning-alert";
+import type { Warning } from "@/lib/dashboard-data";
+
+type WarningAlertsProps = {
+  warnings: Warning[];
+};
+
+export function WarningAlerts({ warnings }: WarningAlertsProps) {
+  if (warnings.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6">
+      <h2 className="mb-4 text-lg font-semibold text-gray-900">Warnings</h2>
+      <div className="space-y-3">
+        {warnings.map((warning, index) => (
+          <WarningAlert key={index} warning={warning} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/feedback/feedback-badge.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+const SEVERITY_STYLES: Record<string, string> = {
+  critical: "bg-red-500 text-white",
+  high: "bg-orange-500 text-white",
+  medium: "bg-yellow-500 text-white",
+  low: "bg-gray-400 text-white",
+};
+
+const TYPE_STYLES: Record<string, { bg: string; label: string }> = {
+  bug: { bg: "bg-red-100 text-red-800", label: "Bug" },
+  improvement: { bg: "bg-blue-100 text-blue-800", label: "Improvement" },
+  "requirement-gap": { bg: "bg-amber-100 text-amber-800", label: "Requirement Gap" },
+  "spec-mismatch": { bg: "bg-purple-100 text-purple-800", label: "Spec Mismatch" },
+  security: { bg: "bg-red-100 text-red-800", label: "Security" },
+};
+
+export function FeedbackBadge({
+  type,
+  severity,
+}: {
+  type?: string;
+  severity?: string;
+}) {
+  const typeStyle = type ? TYPE_STYLES[type] : undefined;
+  const severityStyle = severity ? SEVERITY_STYLES[severity] : undefined;
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      {typeStyle && (
+        <span
+          className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${typeStyle.bg}`}
+          data-testid={`feedback-badge-${type}`}
+        >
+          {typeStyle.label}
+        </span>
+      )}
+      {severityStyle && (
+        <span
+          className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${severityStyle}`}
+          data-testid="feedback-severity"
+        >
+          {severity}
+        </span>
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackFilters, type FeedbackFilterState } from "./feedback-filters";
+import { FeedbackTable } from "./feedback-table";
+
+export function FeedbackClientView({
+  feedbacks,
+  requirementTitles,
+  specificationTitles,
+}: {
+  feedbacks: FeedbackEntry[];
+  requirementTitles: Record<string, string>;
+  specificationTitles: Record<string, string>;
+}) {
+  const [filters, setFilters] = useState<FeedbackFilterState>({});
+
+  const filteredFeedbacks = useMemo(() => {
+    return feedbacks.filter((fb) => {
+      if (filters.type && fb.type !== filters.type) return false;
+      if (filters.severity && fb.severity !== filters.severity) return false;
+      if (filters.status && fb.status !== filters.status) return false;
+      return true;
+    });
+  }, [feedbacks, filters]);
+
+  return (
+    <div className="space-y-4" data-testid="feedback-client-view">
+      <FeedbackFilters activeFilters={filters} onFilterChange={setFilters} />
+      <FeedbackTable
+        feedbacks={filteredFeedbacks}
+        requirementTitles={requirementTitles}
+        specificationTitles={specificationTitles}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+"use client";
+
+import React from "react";
+
+export interface FeedbackFilterState {
+  type?: string;
+  severity?: string;
+  status?: string;
+}
+
+const TYPE_OPTIONS = ["all", "bug", "improvement", "requirement-gap", "spec-mismatch", "security"];
+const SEVERITY_OPTIONS = ["all", "critical", "high", "medium", "low"];
+const STATUS_OPTIONS = ["all", "open", "closed"];
+
+function SegmentedButtons({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: string[];
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-xs font-medium text-gray-500 w-16">{label}</span>
+      <div className="flex gap-1">
+        {options.map((opt) => (
+          <button
+            key={opt}
+            onClick={() => onChange(opt)}
+            aria-label={`${label} ${opt}`}
+            aria-pressed={value === opt}
+            className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+              value === opt
+                ? "bg-blue-600 text-white"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+            }`}
+            data-testid={`filter-${label.toLowerCase()}-${opt}`}
+          >
+            {opt}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function FeedbackFilters({
+  activeFilters,
+  onFilterChange,
+}: {
+  activeFilters: FeedbackFilterState;
+  onFilterChange: (filters: FeedbackFilterState) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-4 rounded-lg border border-gray-200 bg-white p-4" data-testid="feedback-filters">
+      <SegmentedButtons
+        label="Type"
+        options={TYPE_OPTIONS}
+        value={activeFilters.type ?? "all"}
+        onChange={(v) =>
+          onFilterChange({ ...activeFilters, type: v === "all" ? undefined : v })
+        }
+      />
+      <SegmentedButtons
+        label="Severity"
+        options={SEVERITY_OPTIONS}
+        value={activeFilters.severity ?? "all"}
+        onChange={(v) =>
+          onFilterChange({ ...activeFilters, severity: v === "all" ? undefined : v })
+        }
+      />
+      <SegmentedButtons
+        label="Status"
+        options={STATUS_OPTIONS}
+        value={activeFilters.status ?? "all"}
+        onChange={(v) =>
+          onFilterChange({ ...activeFilters, status: v === "all" ? undefined : v })
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import React from "react";
+import Link from "next/link";
+import type { FeedbackLinkedTo } from "@reqord/shared";
+
+export function FeedbackLinkedItems({
+  linkedTo,
+  requirementTitles,
+  specificationTitles,
+}: {
+  linkedTo: FeedbackLinkedTo;
+  requirementTitles: Record<string, string>;
+  specificationTitles: Record<string, string>;
+}) {
+  const hasAny =
+    linkedTo.requirements.length > 0 ||
+    linkedTo.createdRequirements.length > 0 ||
+    linkedTo.specifications.length > 0 ||
+    linkedTo.createdSpecifications.length > 0 ||
+    (linkedTo.resolved &&
+      (linkedTo.resolved.requirements.length > 0 ||
+        linkedTo.resolved.specifications.length > 0));
+
+  if (!hasAny) return null;
+
+  return (
+    <div className="flex flex-wrap gap-1" data-testid="feedback-linked-items">
+      {linkedTo.requirements.map((id) => (
+        <Link
+          key={`req-${id}`}
+          href={`/requirements/${id}`}
+          className="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-100"
+          data-testid="linked-requirement"
+        >
+          {requirementTitles[id] ?? id}
+        </Link>
+      ))}
+      {linkedTo.createdRequirements.map((id) => (
+        <Link
+          key={`created-req-${id}`}
+          href={`/requirements/${id}`}
+          className="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-0.5 text-xs text-green-700 hover:bg-green-100"
+          data-testid="created-requirement"
+        >
+          {requirementTitles[id] ?? id}
+          <span className="rounded bg-green-200 px-1 text-green-800">created</span>
+        </Link>
+      ))}
+      {linkedTo.specifications.map((id) => (
+        <Link
+          key={`spec-${id}`}
+          href={`/specifications/${id}`}
+          className="inline-flex items-center rounded-full bg-purple-50 px-2 py-0.5 text-xs text-purple-700 hover:bg-purple-100"
+          data-testid="linked-specification"
+        >
+          {specificationTitles[id] ?? id}
+        </Link>
+      ))}
+      {linkedTo.createdSpecifications.map((id) => (
+        <Link
+          key={`created-spec-${id}`}
+          href={`/specifications/${id}`}
+          className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs text-emerald-700 hover:bg-emerald-100"
+          data-testid="created-specification"
+        >
+          {specificationTitles[id] ?? id}
+          <span className="rounded bg-emerald-200 px-1 text-emerald-800">created</span>
+        </Link>
+      ))}
+      {linkedTo.resolved?.requirements.map((id) => (
+        <Link
+          key={`resolved-req-${id}`}
+          href={`/requirements/${id}`}
+          className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-200"
+          data-testid="resolved-requirement"
+        >
+          {requirementTitles[id] ?? id}
+          <span className="rounded bg-gray-300 px-1 text-gray-700">resolved</span>
+        </Link>
+      ))}
+      {linkedTo.resolved?.specifications.map((id) => (
+        <Link
+          key={`resolved-spec-${id}`}
+          href={`/specifications/${id}`}
+          className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-200"
+          data-testid="resolved-specification"
+        >
+          {specificationTitles[id] ?? id}
+          <span className="rounded bg-gray-300 px-1 text-gray-700">resolved</span>
+        </Link>
+      ))}
+    </div>
+  );
+}

package/src/components/feedback/feedback-list.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackBadge } from "./feedback-badge";
+
+export function FeedbackList({ feedbacks }: { feedbacks: FeedbackEntry[] }) {
+  if (feedbacks.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-4" data-testid="feedback-list">
+      <h2 className="mb-3 text-sm font-semibold text-gray-700">
+        Unresolved Feedback ({feedbacks.length})
+      </h2>
+      <div className="space-y-3">
+        {feedbacks.map((feedback) => (
+          <div
+            key={feedback.githubIssue}
+            className="rounded-md border border-gray-100 bg-gray-50 p-3"
+            data-testid="feedback-item"
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <span className="shrink-0 font-mono text-sm text-blue-600" data-testid="feedback-issue">
+                #{feedback.githubIssue}
+              </span>
+              {feedback.title && (
+                <span className="truncate text-sm text-gray-700" data-testid="feedback-title">{feedback.title}</span>
+              )}
+              <FeedbackBadge
+                type={feedback.type}
+                severity={feedback.severity}
+              />
+            </div>
+            <p className="mt-1 text-xs text-gray-400">
+              {new Date(feedback.syncedAt).toLocaleDateString("ja-JP")}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}