@reqord/web 0.1.0

package/src/components/specification/tab-coverage.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+
+type TabCoverageProps = {
+  successCriteria: string[] | null;
+};
+
+export function TabCoverage({ successCriteria }: TabCoverageProps) {
+  if (!successCriteria || successCriteria.length === 0) {
+    return (
+      <div className="py-8 text-center text-gray-500">
+        No success criteria available
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16">
+              #
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Criteria
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {successCriteria.map((criterion, index) => (
+            <tr key={index} className={index % 2 === 1 ? "bg-gray-50" : ""}>
+              <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
+                {index + 1}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-900">
+                {criterion}
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+                Unchecked
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/specification/tab-design.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { MarkdownRenderer } from "@/components/requirement/markdown-renderer";
+
+export function TabDesign({ content }: { content: string | null }) {
+  if (content === null) {
+    return (
+      <div className="py-8 text-center text-gray-500">
+        Design document not available
+      </div>
+    );
+  }
+
+  return <MarkdownRenderer content={content} />;
+}

package/src/components/specification/tab-history.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import type { VersionHistoryEntry } from "@reqord/shared";
+import { StatusBadge } from "@/components/ui/badge";
+
+type TabHistoryProps = {
+  versionHistory: VersionHistoryEntry[];
+};
+
+export function TabHistory({ versionHistory }: TabHistoryProps) {
+  if (!versionHistory || versionHistory.length === 0) {
+    return (
+      <div className="py-8 text-center text-gray-500">
+        No version history yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative pl-8 border-l-2 border-gray-200">
+      {versionHistory.map((entry, index) => {
+        const isLatest = index === 0;
+        const date = new Date(entry.changedAt);
+
+        return (
+          <div key={entry.version} className="relative mb-8 last:mb-0">
+            {/* Timeline dot */}
+            <div
+              className={`absolute -left-[33px] w-3 h-3 rounded-full ${
+                isLatest
+                  ? "bg-blue-500 ring-2 ring-blue-500"
+                  : "bg-gray-400"
+              }`}
+            />
+
+            {/* Content */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <span className="font-mono font-semibold text-gray-900">
+                  {entry.version}
+                </span>
+                <StatusBadge status={entry.status} />
+              </div>
+
+              <p className="text-sm text-gray-500">
+                {date.toLocaleDateString("ja-JP", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </p>
+
+              <p className="text-sm text-gray-700">{entry.summary}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/specification/tab-issues.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React from "react";
+
+export type IssueItem = {
+  number: number;
+  title: string;
+  url: string;
+  priority: string;
+  status: string;
+};
+
+type TabIssuesProps = {
+  issues: IssueItem[] | null;
+};
+
+function getPriorityColor(priority: string): string {
+  switch (priority) {
+    case "P0":
+      return "bg-red-100 text-red-800";
+    case "P1":
+      return "bg-orange-100 text-orange-800";
+    case "P2":
+      return "bg-yellow-100 text-yellow-800";
+    case "P3":
+      return "bg-gray-100 text-gray-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+}
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case "open":
+      return "bg-gray-100 text-gray-800";
+    case "in_progress":
+      return "bg-blue-100 text-blue-800";
+    case "closed":
+      return "bg-green-100 text-green-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+}
+
+export function TabIssues({ issues }: TabIssuesProps) {
+  if (!issues || issues.length === 0) {
+    return (
+      <div className="py-8 text-center text-gray-500">
+        No issues generated yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
+              #
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Title
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
+              Priority
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">
+              Status
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
+              Link
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {issues.map((issue) => (
+            <tr key={issue.number}>
+              <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
+                {issue.number}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-900">
+                {issue.title}
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap">
+                <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getPriorityColor(issue.priority)}`}>
+                  {issue.priority}
+                </span>
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap">
+                <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(issue.status)}`}>
+                  {issue.status}
+                </span>
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap text-sm">
+                <a
+                  href={issue.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline"
+                >
+                  View
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/specification/tab-research.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { MarkdownRenderer } from "@/components/requirement/markdown-renderer";
+
+export function TabResearch({ content }: { content: string | null }) {
+  if (content === null) {
+    return (
+      <div className="py-8 text-center text-gray-500">
+        Research document not available
+      </div>
+    );
+  }
+
+  return <MarkdownRenderer content={content} />;
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { Status, Priority, Complexity } from "@reqord/shared";
+
+const STATUS_STYLES: Record<Status, string> = {
+  draft: "bg-gray-100 text-gray-700",
+  approved: "bg-green-100 text-green-800",
+  implemented: "bg-blue-100 text-blue-800",
+  deprecated: "bg-red-100 text-red-700",
+};
+
+const STATUS_LABELS: Record<Status, string> = {
+  draft: "Draft",
+  approved: "Approved",
+  implemented: "Implemented",
+  deprecated: "Deprecated",
+};
+
+const PRIORITY_STYLES: Record<Priority, string> = {
+  low: "bg-blue-100 text-blue-700",
+  medium: "bg-orange-100 text-orange-700",
+  high: "bg-red-100 text-red-700",
+};
+
+const PRIORITY_LABELS: Record<Priority, string> = {
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+};
+
+const COMPLEXITY_STYLES: Record<Complexity, string> = {
+  small: "bg-emerald-100 text-emerald-700",
+  medium: "bg-amber-100 text-amber-700",
+  large: "bg-orange-100 text-orange-700",
+  xlarge: "bg-red-100 text-red-700",
+};
+
+const COMPLEXITY_LABELS: Record<Complexity, string> = {
+  small: "S",
+  medium: "M",
+  large: "L",
+  xlarge: "XL",
+};
+
+function Badge({ className, children }: { className: string; children: React.ReactNode }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function StatusBadge({ status }: { status: Status }) {
+  return <Badge className={STATUS_STYLES[status]}>{STATUS_LABELS[status]}</Badge>;
+}
+
+export function PriorityBadge({ priority }: { priority: Priority }) {
+  return <Badge className={PRIORITY_STYLES[priority]}>{PRIORITY_LABELS[priority]}</Badge>;
+}
+
+export function ComplexityBadge({ complexity }: { complexity: Complexity }) {
+  return <Badge className={COMPLEXITY_STYLES[complexity]}>{COMPLEXITY_LABELS[complexity]}</Badge>;
+}

package/src/components/ui/nav.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+
+export function Nav() {
+  return (
+    <nav className="border-b border-gray-200 bg-white">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-14 items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link href="/requirements" className="text-lg font-bold text-gray-900">
+              Reqord
+            </Link>
+            <div className="flex gap-4">
+              <Link
+                href="/dashboard"
+                className="text-sm font-medium text-gray-600 hover:text-gray-900"
+              >
+                Dashboard
+              </Link>
+              <Link
+                href="/requirements"
+                className="text-sm font-medium text-gray-600 hover:text-gray-900"
+              >
+                Requirements
+              </Link>
+              <Link
+                href="/specifications"
+                className="text-sm font-medium text-gray-600 hover:text-gray-900"
+              >
+                Specifications
+              </Link>
+              <Link
+                href="/feedback"
+                className="text-sm font-medium text-gray-600 hover:text-gray-900"
+              >
+                Feedback
+              </Link>
+              <Link
+                href="/graph"
+                className="text-sm font-medium text-gray-600 hover:text-gray-900"
+              >
+                Graph
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+
+type Tab = { id: string; label: string };
+
+type TabsProps = {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+};
+
+export function Tabs({ tabs, activeTab, onTabChange }: TabsProps) {
+  return (
+    <div className="border-b border-gray-200">
+      <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`
+                whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium
+                ${
+                  isActive
+                    ? "border-blue-500 text-blue-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                }
+              `}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}

package/src/lib/actions.ts

@@ -0,0 +1,222 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { RequirementSchema } from "@reqord/shared";
+import { getRepository } from "./get-repository";
+
+export type ActionResult = {
+  success: boolean;
+  error?: string;
+};
+
+export async function createRequirement(formData: FormData): Promise<ActionResult> {
+  const repo = getRepository();
+
+  const title = formData.get("title") as string;
+  const status = formData.get("status") as string;
+  const priority = formData.get("priority") as string;
+  const formatType = formData.get("formatType") as string;
+  const estimatedComplexity = formData.get("estimatedComplexity") as string | null;
+  const estimatedHours = formData.get("estimatedHours") as string | null;
+  const description = formData.get("description") as string | null;
+  const successCriteriaRaw = formData.get("successCriteria") as string | null;
+  const blockedByRaw = formData.get("blockedBy") as string | null;
+  const blocksRaw = formData.get("blocks") as string | null;
+  const relatedToRaw = formData.get("relatedTo") as string | null;
+
+  // User story fields
+  const userStoryAs = formData.get("userStoryAs") as string | null;
+  const userStoryIWant = formData.get("userStoryIWant") as string | null;
+  const userStorySoThat = formData.get("userStorySoThat") as string | null;
+
+  // EARS fields
+  const earsType = formData.get("earsType") as string | null;
+  const earsTrigger = formData.get("earsTrigger") as string | null;
+  const earsCondition = formData.get("earsCondition") as string | null;
+  const earsAction = formData.get("earsAction") as string | null;
+  const earsResponse = formData.get("earsResponse") as string | null;
+
+  const id = await repo.generateNextId();
+  const now = new Date().toISOString();
+
+  const successCriteria = successCriteriaRaw
+    ? JSON.parse(successCriteriaRaw) as string[]
+    : [];
+  const blockedBy = blockedByRaw ? JSON.parse(blockedByRaw) as string[] : [];
+  const blocks = blocksRaw ? JSON.parse(blocksRaw) as string[] : [];
+  const relatedTo = relatedToRaw ? JSON.parse(relatedToRaw) as string[] : [];
+
+  let format: Record<string, unknown>;
+  switch (formatType) {
+    case "user-story":
+      format = {
+        type: "user-story",
+        userStory: {
+          as: userStoryAs ?? "",
+          iWant: userStoryIWant ?? "",
+          soThat: userStorySoThat ?? "",
+        },
+      };
+      break;
+    case "ears":
+      format = {
+        type: "ears",
+        ears: {
+          type: earsType ?? "",
+          trigger: earsTrigger || undefined,
+          condition: earsCondition || undefined,
+          action: earsAction ?? "",
+          response: earsResponse || undefined,
+        },
+      };
+      break;
+    default:
+      format = { type: "free-form" };
+      break;
+  }
+
+  const raw = {
+    id,
+    version: "1.0.0",
+    title,
+    status,
+    priority,
+    createdAt: now,
+    updatedAt: now,
+    versionHistory: [],
+    files: { description: `${id}/description.md` },
+    successCriteria,
+    format,
+    dependencies: { blockedBy, blocks, relatedTo },
+    estimatedComplexity: estimatedComplexity || undefined,
+    estimatedHours: estimatedHours ? Number(estimatedHours) : undefined,
+  };
+
+  const result = RequirementSchema.safeParse(raw);
+  if (!result.success) {
+    return { success: false, error: result.error.message };
+  }
+
+  await repo.save(result.data);
+
+  if (description?.trim()) {
+    await repo.saveDescription(id, description);
+  }
+
+  revalidatePath("/requirements");
+  redirect(`/requirements/${id}`);
+}
+
+export async function updateRequirement(formData: FormData): Promise<ActionResult> {
+  const repo = getRepository();
+
+  const id = formData.get("id") as string;
+  const existing = await repo.findById(id);
+  if (!existing) {
+    return { success: false, error: `Requirement ${id} not found` };
+  }
+
+  const title = formData.get("title") as string;
+  const status = formData.get("status") as string;
+  const priority = formData.get("priority") as string;
+  const formatType = formData.get("formatType") as string;
+  const estimatedComplexity = formData.get("estimatedComplexity") as string | null;
+  const estimatedHours = formData.get("estimatedHours") as string | null;
+  const description = formData.get("description") as string | null;
+  const successCriteriaRaw = formData.get("successCriteria") as string | null;
+  const blockedByRaw = formData.get("blockedBy") as string | null;
+  const blocksRaw = formData.get("blocks") as string | null;
+  const relatedToRaw = formData.get("relatedTo") as string | null;
+
+  // User story fields
+  const userStoryAs = formData.get("userStoryAs") as string | null;
+  const userStoryIWant = formData.get("userStoryIWant") as string | null;
+  const userStorySoThat = formData.get("userStorySoThat") as string | null;
+
+  // EARS fields
+  const earsType = formData.get("earsType") as string | null;
+  const earsTrigger = formData.get("earsTrigger") as string | null;
+  const earsCondition = formData.get("earsCondition") as string | null;
+  const earsAction = formData.get("earsAction") as string | null;
+  const earsResponse = formData.get("earsResponse") as string | null;
+
+  const now = new Date().toISOString();
+  const successCriteria = successCriteriaRaw
+    ? JSON.parse(successCriteriaRaw) as string[]
+    : [];
+  const blockedBy = blockedByRaw ? JSON.parse(blockedByRaw) as string[] : [];
+  const blocks = blocksRaw ? JSON.parse(blocksRaw) as string[] : [];
+  const relatedTo = relatedToRaw ? JSON.parse(relatedToRaw) as string[] : [];
+
+  let format: Record<string, unknown>;
+  switch (formatType) {
+    case "user-story":
+      format = {
+        type: "user-story",
+        userStory: {
+          as: userStoryAs ?? "",
+          iWant: userStoryIWant ?? "",
+          soThat: userStorySoThat ?? "",
+        },
+      };
+      break;
+    case "ears":
+      format = {
+        type: "ears",
+        ears: {
+          type: earsType ?? "",
+          trigger: earsTrigger || undefined,
+          condition: earsCondition || undefined,
+          action: earsAction ?? "",
+          response: earsResponse || undefined,
+        },
+      };
+      break;
+    default:
+      format = { type: "free-form" };
+      break;
+  }
+
+  const raw = {
+    ...existing,
+    title,
+    status,
+    priority,
+    updatedAt: now,
+    successCriteria,
+    format,
+    dependencies: { blockedBy, blocks, relatedTo },
+    estimatedComplexity: estimatedComplexity || undefined,
+    estimatedHours: estimatedHours ? Number(estimatedHours) : undefined,
+  };
+
+  const result = RequirementSchema.safeParse(raw);
+  if (!result.success) {
+    return { success: false, error: result.error.message };
+  }
+
+  await repo.save(result.data);
+
+  if (description != null) {
+    await repo.saveDescription(id, description);
+  }
+
+  revalidatePath("/requirements");
+  revalidatePath(`/requirements/${id}`);
+  redirect(`/requirements/${id}`);
+}
+
+export async function deleteRequirement(id: string): Promise<ActionResult> {
+  const repo = getRepository();
+
+  const existing = await repo.findById(id);
+  if (!existing) {
+    return { success: false, error: `Requirement ${id} not found` };
+  }
+
+  await repo.deleteById(id);
+
+  revalidatePath("/requirements");
+  redirect("/requirements");
+}