@reqord/web 0.2.0 → 0.3.0

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

@@ -5,24 +5,76 @@ type WarningAlertProps = {
   warning: Warning;
 };
 
+function ErrorIcon() {
+  return (
+    <svg
+      className="h-5 w-5 text-red-500"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg
+      className="h-5 w-5 text-yellow-500"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function InfoIcon() {
+  return (
+    <svg
+      className="h-5 w-5 text-blue-500"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
 export function WarningAlert({ warning }: WarningAlertProps) {
-  let borderColor = "border-blue-500";
   let bgColor = "bg-blue-50";
+  let icon = <InfoIcon />;
 
   if (warning.severity === "error") {
-    borderColor = "border-red-500";
     bgColor = "bg-red-50";
+    icon = <ErrorIcon />;
   } else if (warning.severity === "warning") {
-    borderColor = "border-yellow-500";
     bgColor = "bg-yellow-50";
+    icon = <WarningIcon />;
   }
 
   return (
     <div
       data-testid="warning-alert"
-      className={`rounded-md border-l-4 p-4 ${borderColor} ${bgColor}`}
+      className={`rounded-lg p-4 ${bgColor}`}
     >
-      <div className="flex items-start">
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 pt-0.5">{icon}</div>
         <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>

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

@@ -8,7 +8,15 @@ export interface FeedbackFilterState {
   status?: string;
 }
 
-const TYPE_OPTIONS = ["all", "bug", "improvement", "requirement-gap", "spec-mismatch", "security"];
+const TYPE_OPTIONS: { value: string; label: string }[] = [
+  { value: "all", label: "all" },
+  { value: "bug", label: "bug" },
+  { value: "improvement", label: "improvement" },
+  { value: "requirement-gap", label: "Req Gap" },
+  { value: "spec-mismatch", label: "Spec Mismatch" },
+  { value: "security", label: "security" },
+];
+
 const SEVERITY_OPTIONS = ["all", "critical", "high", "medium", "low"];
 const STATUS_OPTIONS = ["all", "open", "closed"];
 
@@ -19,7 +27,7 @@ function SegmentedButtons({
   onChange,
 }: {
   label: string;
-  options: string[];
+  options: { value: string; label: string }[];
   value: string;
   onChange: (v: string) => void;
 }) {
@@ -29,18 +37,18 @@ function SegmentedButtons({
       <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
+            key={opt.value}
+            onClick={() => onChange(opt.value)}
+            aria-label={`${label} ${opt.label}`}
+            aria-pressed={value === opt.value}
+            className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+              value === opt.value
                 ? "bg-blue-600 text-white"
                 : "bg-gray-100 text-gray-600 hover:bg-gray-200"
             }`}
-            data-testid={`filter-${label.toLowerCase()}-${opt}`}
+            data-testid={`filter-${label.toLowerCase()}-${opt.value}`}
           >
-            {opt}
+            {opt.label}
           </button>
         ))}
       </div>
@@ -48,6 +56,27 @@ function SegmentedButtons({
   );
 }
 
+function SimpleSegmentedButtons({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: string[];
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <SegmentedButtons
+      label={label}
+      options={options.map((o) => ({ value: o, label: o }))}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
 export function FeedbackFilters({
   activeFilters,
   onFilterChange,
@@ -65,7 +94,7 @@ export function FeedbackFilters({
           onFilterChange({ ...activeFilters, type: v === "all" ? undefined : v })
         }
       />
-      <SegmentedButtons
+      <SimpleSegmentedButtons
         label="Severity"
         options={SEVERITY_OPTIONS}
         value={activeFilters.severity ?? "all"}
@@ -73,7 +102,7 @@ export function FeedbackFilters({
           onFilterChange({ ...activeFilters, severity: v === "all" ? undefined : v })
         }
       />
-      <SegmentedButtons
+      <SimpleSegmentedButtons
         label="Status"
         options={STATUS_OPTIONS}
         value={activeFilters.status ?? "all"}

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

@@ -23,7 +23,7 @@ export function DrillDownBreadcrumb({ requirementTitle, onBack }: DrillDownBread
     <div className="mb-4 flex items-center gap-2 text-sm text-gray-600">
       <button
         onClick={onBack}
-        className="flex items-center gap-1 rounded px-3 py-1 hover:bg-gray-100"
+        className="flex items-center gap-1 rounded px-3 py-1 hover:bg-warm-200/60 hover:text-warm-900"
       >
         ← Back to overview
       </button>

package/src/components/graph/drilldown-graph.tsx

@@ -2,6 +2,7 @@
 
 import React, { useMemo } from "react";
 import { ReactFlow, Background, Controls } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
 import { RequirementNode } from "./requirement-node";
 import { SpecificationNode } from "./specification-node";
 import { IssueNode } from "./issue-node";
@@ -33,7 +34,8 @@ export function DrillDownGraph({ requirement, specifications, tasks }: DrillDown
         edges={edges}
         nodeTypes={nodeTypes}
         fitView
-        minZoom={0.1}
+        fitViewOptions={{ padding: 0.1, maxZoom: 1 }}
+        minZoom={0.2}
         maxZoom={2}
         proOptions={{ hideAttribution: true }}
       >

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

@@ -1,15 +1,15 @@
 export const EDGE_STYLES = {
   dependency: {
-    stroke: "#64748b",
+    stroke: "#94a3b8",
     strokeWidth: 2,
   },
   implements: {
-    stroke: "#3b82f6",
+    stroke: "#dc2626",
     strokeWidth: 2,
     strokeDasharray: "5,5",
   },
   tracks: {
-    stroke: "#22c55e",
+    stroke: "#a855f7",
     strokeWidth: 1.5,
     strokeDasharray: "2,2",
   },

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

@@ -4,9 +4,9 @@ import React, { memo } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 
 const STATUS_COLORS: Record<string, string> = {
-  open: "bg-yellow-200",
-  in_progress: "bg-blue-200",
-  closed: "bg-green-200",
+  open: "border border-amber-300 bg-amber-50",
+  in_progress: "border border-blue-300 bg-blue-50",
+  closed: "border border-emerald-300 bg-emerald-50",
 };
 
 type IssueNodeData = {
@@ -18,7 +18,7 @@ type IssueNodeData = {
 
 function IssueNodeComponent({ data }: NodeProps) {
   const nodeData = data as IssueNodeData;
-  const bgClass = STATUS_COLORS[nodeData.status] ?? "bg-gray-200";
+  const colorClass = STATUS_COLORS[nodeData.status] ?? "border border-gray-300 bg-gray-50";
 
   const handleClick = () => {
     if (nodeData.issueUrl) {
@@ -28,14 +28,14 @@ function IssueNodeComponent({ data }: NodeProps) {
 
   return (
     <div
-      className={`rounded-lg border shadow-sm px-3 py-2 cursor-pointer ${bgClass}`}
+      className={`rounded-lg shadow-sm px-3 py-2 cursor-pointer ${colorClass}`}
       style={{ width: 180 }}
       onClick={handleClick}
     >
-      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <Handle type="target" position={Position.Left} className="!bg-gray-300" />
       <p className="truncate text-sm font-medium text-gray-900">{nodeData.label}</p>
       <div className="mt-1">
-        <span className="inline-block rounded-full bg-white px-2 py-0.5 text-xs text-gray-700">
+        <span className="inline-block rounded-full bg-white/80 backdrop-blur-sm px-2 py-0.5 text-xs text-gray-700">
           {nodeData.status}
         </span>
       </div>

package/src/components/graph/multi-level-graph.tsx

@@ -30,8 +30,8 @@ const EDGE_STYLES = {
     animated: false,
   },
   implements: {
-    style: { stroke: "#6366f1", strokeWidth: 2, strokeDasharray: "5,5" },
-    markerEnd: { type: "arrowclosed" as const, color: "#6366f1" },
+    style: { stroke: "#dc2626", strokeWidth: 2, strokeDasharray: "5,5" },
+    markerEnd: { type: "arrowclosed" as const, color: "#dc2626" },
     animated: false,
   },
   tracks: {

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

@@ -6,8 +6,8 @@ import { useRouter } from "next/navigation";
 
 const STATUS_COLORS: Record<string, string> = {
   draft: "border-gray-300 bg-gray-50",
-  approved: "border-green-300 bg-green-50",
-  implemented: "border-blue-300 bg-blue-50",
+  approved: "border-blue-300 bg-blue-50",
+  implemented: "border-emerald-300 bg-emerald-50",
   deprecated: "border-red-300 bg-red-50",
 };
 
@@ -43,11 +43,11 @@ function RequirementNodeComponent({ data, id }: NodeProps) {
 
   return (
     <div
-      className={`cursor-pointer rounded-lg border-2 px-3 py-2 shadow-sm ${borderClass}`}
+      className={`cursor-pointer rounded-lg border-2 px-3 py-2 shadow-md ${borderClass}`}
       style={{ width: 220 }}
       onClick={handleBodyClick}
     >
-      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <Handle type="target" position={Position.Left} className="!bg-gray-300" />
       <p className="truncate text-xs font-mono text-gray-500">{id}</p>
       <p className="mt-0.5 truncate text-sm font-medium text-gray-900">
         {nodeData.label}
@@ -61,7 +61,7 @@ function RequirementNodeComponent({ data, id }: NodeProps) {
           📄 {nodeData.specCount} spec{nodeData.specCount > 1 ? "s" : ""}
         </button>
       ) : null}
-      <Handle type="source" position={Position.Right} className="!bg-gray-400" />
+      <Handle type="source" position={Position.Right} className="!bg-gray-300" />
     </div>
   );
 }

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

@@ -4,10 +4,10 @@ import React, { memo } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 
 const STATUS_COLORS: Record<string, string> = {
-  draft: "bg-blue-200",
-  approved: "bg-green-200",
-  implemented: "bg-emerald-300",
-  deprecated: "bg-red-200",
+  draft: "border border-gray-300 bg-gray-100",
+  approved: "border border-blue-300 bg-blue-100",
+  implemented: "border border-emerald-300 bg-emerald-100",
+  deprecated: "border border-red-300 bg-red-100",
 };
 
 type SpecificationNodeData = {
@@ -17,21 +17,24 @@ type SpecificationNodeData = {
 
 function SpecificationNodeComponent({ data, id }: NodeProps) {
   const nodeData = data as SpecificationNodeData;
-  const bgClass = STATUS_COLORS[nodeData.status] ?? "bg-gray-200";
+  const colorClass = STATUS_COLORS[nodeData.status] ?? "border border-gray-300 bg-gray-100";
 
   return (
     <div
-      className={`rounded-lg border shadow-sm px-3 py-2 ${bgClass}`}
+      className={`rounded-lg shadow-sm px-3 py-2 ${colorClass}`}
       style={{ width: 200 }}
     >
-      <Handle type="target" position={Position.Left} className="!bg-gray-400" />
+      <Handle type="target" position={Position.Left} className="!bg-gray-300" />
       <p className="truncate text-xs font-mono text-gray-900">{id}</p>
+      {nodeData.label && nodeData.label !== id && (
+        <p className="mt-0.5 truncate text-sm font-medium text-gray-800">{nodeData.label}</p>
+      )}
       <div className="mt-1">
-        <span className="inline-block rounded-full bg-white px-2 py-0.5 text-xs text-gray-700">
+        <span className="inline-block rounded-full bg-white/80 backdrop-blur-sm px-2 py-0.5 text-xs text-gray-700">
           {nodeData.status}
         </span>
       </div>
-      <Handle type="source" position={Position.Right} className="!bg-gray-400" />
+      <Handle type="source" position={Position.Right} className="!bg-gray-300" />
     </div>
   );
 }

package/src/components/requirement/requirement-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import Link from "next/link";
 import type { Requirement, Status, Priority } from "@reqord/shared";
 import { StatusBadge, PriorityBadge, ComplexityBadge } from "@/components/ui/badge";
@@ -87,18 +87,38 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
   }
 
   function renderSortHeader(column: SortKey, label: string) {
-    const arrow = sortKey === column ? (sortDir === "asc" ? " ↑" : " ↓") : "";
+    const isActive = sortKey === column;
     return (
       <th
         key={column}
-        className="cursor-pointer px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-900"
-        onClick={() => handleSort(column)}
+        scope="col"
+        aria-sort={isActive ? (sortDir === "asc" ? "ascending" : "descending") : undefined}
+        className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
       >
-        {label}{arrow}
+        <button
+          type="button"
+          onClick={() => handleSort(column)}
+          className={`inline-flex items-center gap-1 transition-colors ${
+            isActive ? "text-warm-900 font-semibold" : "hover:text-gray-900"
+          }`}
+        >
+          {label}
+          <span aria-hidden="true" className={`text-[10px] ${isActive ? "opacity-100" : "opacity-30"}`}>
+            {isActive && sortDir === "desc" ? "▼" : "▲"}
+          </span>
+        </button>
       </th>
     );
   }
 
+  const hasActiveFilters = search || statusFilter !== "all" || priorityFilter !== "all";
+
+  function clearAllFilters() {
+    setSearch("");
+    setStatusFilter("all");
+    setPriorityFilter("all");
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-3">
@@ -107,12 +127,14 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
           placeholder="Search by ID or title..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
+          aria-label="Search requirements by ID or title"
           className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
         />
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value as Status | "all")}
-          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          aria-label="Filter by status"
+          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
         >
           {STATUS_OPTIONS.map((o) => (
             <option key={o.value} value={o.value}>
@@ -123,7 +145,8 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
         <select
           value={priorityFilter}
           onChange={(e) => setPriorityFilter(e.target.value as Priority | "all")}
-          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          aria-label="Filter by priority"
+          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
         >
           {PRIORITY_OPTIONS.map((o) => (
             <option key={o.value} value={o.value}>
@@ -138,7 +161,7 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
 
       <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
         <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+          <thead className="bg-gray-50 border-b-2 border-gray-200">
             <tr>
               {renderSortHeader("id", "ID")}
               {renderSortHeader("title", "Title")}
@@ -153,14 +176,35 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
           <tbody className="divide-y divide-gray-200">
             {filtered.length === 0 ? (
               <tr>
-                <td colSpan={6} className="px-4 py-8 text-center text-sm text-gray-500">
-                  No requirements found.
+                <td colSpan={6} className="px-4 py-12 text-center">
+                  <div className="text-gray-400">
+                    <svg className="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    <p className="mt-2 text-sm font-medium text-gray-900">No requirements found</p>
+                    <p className="mt-1 text-sm text-gray-500">Try adjusting your search or filter criteria</p>
+                    {hasActiveFilters && (
+                      <button
+                        type="button"
+                        onClick={clearAllFilters}
+                        className="mt-3 text-sm font-medium text-blue-600 hover:text-blue-800"
+                      >
+                        Clear all filters
+                      </button>
+                    )}
+                  </div>
                 </td>
               </tr>
             ) : (
-              filtered.map((req) => (
-                <tr key={req.id} className="hover:bg-gray-50">
-                  <td className="whitespace-nowrap px-4 py-3 text-sm font-mono">
+              filtered.map((req, index) => (
+                <tr
+                  key={req.id}
+                  className={`hover:bg-blue-50/50 transition-colors duration-150 ${
+                    index % 2 === 1 ? "bg-gray-50/50" : ""
+                  }`}
+                >
+                  <td className="whitespace-nowrap px-4 py-3.5 text-sm font-mono">
                     <Link
                       href={`/requirements/${req.id}`}
                       className="text-blue-600 hover:text-blue-800 hover:underline"
@@ -168,7 +212,7 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
                       {req.id}
                     </Link>
                   </td>
-                  <td className="px-4 py-3 text-sm">
+                  <td className="px-4 py-3.5 text-sm">
                     <Link
                       href={`/requirements/${req.id}`}
                       className="text-gray-900 hover:text-blue-600"
@@ -176,20 +220,20 @@ export function RequirementTable({ requirements }: { requirements: Requirement[]
                       {req.title}
                     </Link>
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3">
+                  <td className="whitespace-nowrap px-4 py-3.5">
                     <StatusBadge status={req.status} />
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3">
+                  <td className="whitespace-nowrap px-4 py-3.5">
                     <PriorityBadge priority={req.priority} />
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3">
+                  <td className="whitespace-nowrap px-4 py-3.5">
                     {req.estimatedComplexity ? (
                       <ComplexityBadge complexity={req.estimatedComplexity} />
                     ) : (
                       <span className="text-xs text-gray-400">-</span>
                     )}
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                  <td className="whitespace-nowrap px-4 py-3.5 text-sm text-gray-500">
                     {new Date(req.updatedAt).toLocaleDateString("ja-JP")}
                   </td>
                 </tr>