@wopr-network/platform-ui-core 1.0.0

package/src/app/(dashboard)/changesets/[id]/changeset-detail-client.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  FileCode,
+  GitBranch,
+  MessageSquare,
+  ShieldCheck,
+  User,
+} from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getChangeset } from "@/lib/changeset-api";
+import type {
+  ChangesetDetail,
+  ChangesetFile,
+  ChangesetReviewStatus,
+  ChangesetStatus,
+} from "@/lib/changeset-types";
+import { toUserMessage } from "@/lib/errors";
+import { formatRelativeTime } from "@/lib/format";
+import { cn } from "@/lib/utils";
+
+/* ---------------------------------------------------------------------------
+ * Helper sub-components (internal only)
+ * ------------------------------------------------------------------------- */
+
+function ChangesetStatusBadge({ status }: { status: ChangesetStatus }) {
+  const variants: Record<ChangesetStatus, string> = {
+    open: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400",
+    merged: "border-purple-500/30 bg-purple-500/10 text-purple-400",
+    closed: "border-red-500/30 bg-red-500/10 text-red-400",
+  };
+  return (
+    <Badge variant="outline" className={cn("capitalize", variants[status])}>
+      {status}
+    </Badge>
+  );
+}
+
+function ReviewStatusBadge({ status }: { status: ChangesetReviewStatus }) {
+  const variants: Record<ChangesetReviewStatus, string> = {
+    pending: "border-yellow-500/30 bg-yellow-500/10 text-yellow-400",
+    approved: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400",
+    rejected: "border-red-500/30 bg-red-500/10 text-red-400",
+    changes_requested: "border-orange-500/30 bg-orange-500/10 text-orange-400",
+  };
+  const labels: Record<ChangesetReviewStatus, string> = {
+    pending: "Pending",
+    approved: "Approved",
+    rejected: "Rejected",
+    changes_requested: "Changes Requested",
+  };
+  return (
+    <Badge variant="outline" className={cn(variants[status])}>
+      {labels[status]}
+    </Badge>
+  );
+}
+
+function FileStatusBadge({ status }: { status: ChangesetFile["status"] }) {
+  const config: Record<ChangesetFile["status"], { label: string; className: string }> = {
+    added: { label: "A", className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400" },
+    modified: { label: "M", className: "border-blue-500/30 bg-blue-500/10 text-blue-400" },
+    deleted: { label: "D", className: "border-red-500/30 bg-red-500/10 text-red-400" },
+    renamed: { label: "R", className: "border-yellow-500/30 bg-yellow-500/10 text-yellow-400" },
+  };
+  const { label, className } = config[status];
+  return (
+    <Badge variant="outline" className={cn("font-mono text-xs", className)}>
+      {label}
+    </Badge>
+  );
+}
+
+function DiffBlock({ patch }: { patch: string }) {
+  const lines = patch.split("\n");
+  return (
+    <pre className="overflow-x-auto rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+      {lines.map((line, idx) => {
+        let lineClass = "text-muted-foreground";
+        if (line.startsWith("@@")) {
+          lineClass = "text-blue-400";
+        } else if (line.startsWith("+++") || line.startsWith("---")) {
+          lineClass = "text-muted-foreground";
+        } else if (line.startsWith("+")) {
+          lineClass = "text-emerald-400 bg-emerald-500/10";
+        } else if (line.startsWith("-")) {
+          lineClass = "text-red-400 bg-red-500/10";
+        }
+        return (
+          <div key={`${idx}-${line.slice(0, 20)}`} className={lineClass}>
+            {line}
+          </div>
+        );
+      })}
+    </pre>
+  );
+}
+
+/* ---------------------------------------------------------------------------
+ * Main component
+ * ------------------------------------------------------------------------- */
+
+export function ChangesetDetailClient({ changesetId }: { changesetId: string }) {
+  const [changeset, setChangeset] = useState<ChangesetDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getChangeset(changesetId);
+      setChangeset(data);
+    } catch (err) {
+      setError(toUserMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [changesetId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  /* --- Loading state --- */
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-24" />
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-64" />
+          <div className="flex gap-2">
+            <Skeleton className="h-5 w-16" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+          <Skeleton className="h-4 w-80" />
+        </div>
+        <Skeleton className="h-9 w-64" />
+        <div className="space-y-3">
+          {Array.from({ length: 4 }, (_, n) => `sk-${n}`).map((skId) => (
+            <Skeleton key={skId} className="h-16 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /* --- Error state --- */
+  if (error) {
+    return (
+      <div className="space-y-4">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/changesets">
+            <ArrowLeft className="mr-2 size-4" />
+            Back
+          </Link>
+        </Button>
+        <Card>
+          <CardContent className="py-8 text-center">
+            <p className="mb-4 text-sm text-destructive">{error}</p>
+            <Button variant="outline" onClick={load}>
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!changeset) return null;
+
+  /* --- Loaded state --- */
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <Button variant="ghost" size="sm" asChild>
+        <Link href="/changesets">
+          <ArrowLeft className="mr-2 size-4" />
+          Back
+        </Link>
+      </Button>
+
+      <div className="space-y-2">
+        <h1 className="text-2xl font-bold tracking-tight">{changeset.title}</h1>
+        <div className="flex items-center gap-2">
+          <ChangesetStatusBadge status={changeset.status} />
+          <ReviewStatusBadge status={changeset.reviewStatus} />
+        </div>
+        {changeset.description && (
+          <p className="text-sm text-muted-foreground">{changeset.description}</p>
+        )}
+      </div>
+
+      {/* Metadata */}
+      <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+        <span className="flex items-center gap-1">
+          <User className="size-3.5" />
+          {changeset.author}
+        </span>
+        <span className="flex items-center gap-1">
+          <GitBranch className="size-3.5" />
+          {changeset.sourceBranch} → {changeset.targetBranch}
+        </span>
+        <span>Created {formatRelativeTime(changeset.createdAt)}</span>
+        <span>Updated {formatRelativeTime(changeset.updatedAt)}</span>
+        {changeset.mergedAt && <span>Merged {formatRelativeTime(changeset.mergedAt)}</span>}
+      </div>
+
+      <Separator />
+
+      {/* Tabs */}
+      <Tabs defaultValue="files">
+        <TabsList>
+          <TabsTrigger value="files" className="gap-1.5">
+            <FileCode className="size-3.5" />
+            Files
+            <Badge variant="secondary" className="ml-1 text-xs">
+              {changeset.files.length}
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="reviews" className="gap-1.5">
+            <ShieldCheck className="size-3.5" />
+            Reviews
+            <Badge variant="secondary" className="ml-1 text-xs">
+              {changeset.reviews.length}
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="comments" className="gap-1.5">
+            <MessageSquare className="size-3.5" />
+            Comments
+            <Badge variant="secondary" className="ml-1 text-xs">
+              {changeset.comments.length}
+            </Badge>
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Files tab */}
+        <TabsContent value="files" className="space-y-4">
+          <Card>
+            <CardContent className="flex items-center gap-6 py-3">
+              <span className="text-sm text-muted-foreground">
+                {changeset.files.length} file{changeset.files.length !== 1 ? "s" : ""} changed
+              </span>
+              <span className="text-sm font-mono text-emerald-400">
+                +{changeset.totalAdditions}
+              </span>
+              <span className="text-sm font-mono text-red-400">-{changeset.totalDeletions}</span>
+            </CardContent>
+          </Card>
+
+          {changeset.files.map((file) => (
+            <FileCard key={file.path} file={file} />
+          ))}
+        </TabsContent>
+
+        {/* Reviews tab */}
+        <TabsContent value="reviews" className="space-y-4">
+          {changeset.reviews.length === 0 ? (
+            <Card>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                No reviews yet.
+              </CardContent>
+            </Card>
+          ) : (
+            changeset.reviews.map((review) => (
+              <Card key={review.id}>
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <User className="size-3.5 text-muted-foreground" />
+                      <span className="text-sm font-medium">{review.author}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <ReviewStatusBadge status={review.status} />
+                      <span className="text-xs text-muted-foreground">
+                        {formatRelativeTime(review.createdAt)}
+                      </span>
+                    </div>
+                  </div>
+                </CardHeader>
+                {review.body && (
+                  <CardContent className="pt-0">
+                    <p className="text-sm text-muted-foreground">{review.body}</p>
+                  </CardContent>
+                )}
+              </Card>
+            ))
+          )}
+        </TabsContent>
+
+        {/* Comments tab */}
+        <TabsContent value="comments" className="space-y-4">
+          {changeset.comments.length === 0 ? (
+            <Card>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                No comments yet.
+              </CardContent>
+            </Card>
+          ) : (
+            changeset.comments.map((comment) => (
+              <Card key={comment.id}>
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <User className="size-3.5 text-muted-foreground" />
+                      <span className="text-sm font-medium">{comment.author}</span>
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {formatRelativeTime(comment.createdAt)}
+                    </span>
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  <p className="text-sm">{comment.body}</p>
+                  {comment.filePath && (
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      {comment.filePath}
+                      {comment.lineNumber != null && `:${comment.lineNumber}`}
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------------------
+ * File card with collapsible diff
+ * ------------------------------------------------------------------------- */
+
+function FileCard({ file }: { file: ChangesetFile }) {
+  const [open, setOpen] = useState(false);
+  const hasDiff = file.patch != null;
+
+  return (
+    <Card>
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger asChild disabled={!hasDiff}>
+          <button
+            type="button"
+            className={cn(
+              "flex w-full items-center justify-between px-4 py-3 text-left text-sm",
+              hasDiff && "cursor-pointer hover:bg-muted/50",
+            )}
+          >
+            <div className="flex items-center gap-2">
+              {hasDiff ? (
+                open ? (
+                  <ChevronDown className="size-3.5 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="size-3.5 text-muted-foreground" />
+                )
+              ) : (
+                <span className="size-3.5" />
+              )}
+              <FileStatusBadge status={file.status} />
+              <span className="font-mono text-sm">
+                {file.status === "renamed" && file.previousPath
+                  ? `${file.previousPath} → ${file.path}`
+                  : file.path}
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-xs text-emerald-400">+{file.additions}</span>
+              <span className="font-mono text-xs text-red-400">-{file.deletions}</span>
+            </div>
+          </button>
+        </CollapsibleTrigger>
+        {hasDiff && (
+          <CollapsibleContent>
+            <Separator />
+            <div className="p-4">
+              <DiffBlock patch={file.patch as string} />
+            </div>
+          </CollapsibleContent>
+        )}
+        {!hasDiff && (
+          <div className="border-t px-4 py-2">
+            <span className="text-xs text-muted-foreground">No diff available</span>
+          </div>
+        )}
+      </Collapsible>
+    </Card>
+  );
+}

package/src/app/(dashboard)/changesets/[id]/error.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:changesets");
+
+export default function ChangesetDetailError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    log.error("Changeset detail error boundary caught", error);
+  }, [error]);
+
+  return (
+    <div className="flex items-center justify-center p-6">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <AlertTriangle className="mx-auto mb-2 size-10 text-destructive" />
+          <CardTitle>Changeset Error</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 text-center">
+          <p className="text-sm text-muted-foreground">
+            Something went wrong while loading this changeset.
+          </p>
+          <div className="flex justify-center gap-3">
+            <Button variant="outline" onClick={reset}>
+              Retry
+            </Button>
+            <Button asChild>
+              <Link href="/dashboard">Dashboard</Link>
+            </Button>
+          </div>
+          {process.env.NODE_ENV === "development" && (
+            <details className="mt-4 text-left">
+              <summary className="cursor-pointer text-xs text-muted-foreground">
+                Error details
+              </summary>
+              <pre className="mt-2 overflow-auto rounded bg-muted p-2 text-xs">
+                {error.message}
+                {error.stack && `\n\n${error.stack}`}
+              </pre>
+            </details>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/app/(dashboard)/changesets/[id]/loading.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ChangesetDetailLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <Skeleton className="h-8 w-24" />
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-64" />
+        <div className="flex gap-2">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-20" />
+        </div>
+        <Skeleton className="h-4 w-80" />
+      </div>
+      <Skeleton className="h-9 w-64" />
+      <div className="space-y-3">
+        {Array.from({ length: 4 }, (_, n) => `sk-${n}`).map((skId) => (
+          <Skeleton key={skId} className="h-16 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/changesets/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { ChangesetDetailClient } from "./changeset-detail-client";
+
+export default async function ChangesetDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <div className="p-6">
+      <ChangesetDetailClient changesetId={id} />
+    </div>
+  );
+}

package/src/app/(dashboard)/changesets/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AlertTriangleIcon, HomeIcon, RefreshCwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:changesets");
+
+export default function ChangesetsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Changesets error", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <AlertTriangleIcon className="size-6 text-destructive" />
+            <CardTitle className="text-xl">Changesets Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong loading changesets. This may be a temporary issue.
+          </p>
+          {isDev && (
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => setShowDetails((v) => !v)}
+              className="h-auto p-0 text-muted-foreground"
+            >
+              {showDetails ? "Hide" : "Show"} error details
+            </Button>
+          )}
+          {isDev && showDetails && (
+            <pre className="max-h-48 overflow-auto rounded-md border bg-muted p-3 text-xs">
+              {error.message}
+              {error.stack && `\n\n${error.stack}`}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </pre>
+          )}
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button onClick={reset}>
+            <RefreshCwIcon />
+            Try Again
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/dashboard">
+              <HomeIcon />
+              Dashboard
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/app/(dashboard)/changesets/page.tsx

@@ -0,0 +1,10 @@
+export default function ChangesetsPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold tracking-tight">Changesets</h1>
+      <p className="mt-2 text-muted-foreground">
+        Browse and manage your changesets. Select a changeset to view its details.
+      </p>
+    </div>
+  );
+}

package/src/app/(dashboard)/chat/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Trash2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { ChatInput } from "@/components/chat/chat-input";
+import { ChatMessage } from "@/components/chat/chat-message";
+import { Button } from "@/components/ui/button";
+import { brandName } from "@/lib/brand-config";
+import { useChatContext } from "@/lib/chat/chat-context";
+
+export default function ChatPage() {
+  const { messages, isConnected, isTyping, sendMessage, clearHistory } = useChatContext();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire when messages or typing state changes
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+
+  return (
+    <div className="flex h-full flex-col" data-testid="chat-page">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border px-6 py-4">
+        <div className="flex items-center gap-3">
+          <output
+            className={`h-2 w-2 rounded-full inline-block ${isConnected ? "bg-terminal" : "bg-destructive"}`}
+            aria-label={isConnected ? "Connected" : "Disconnected"}
+          />
+          <h1 className="text-sm font-mono uppercase tracking-wider text-muted-foreground">
+            {brandName()}
+          </h1>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          onClick={() => clearHistory()}
+          className="text-muted-foreground hover:text-foreground"
+          aria-label="Clear chat history"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-2 max-w-2xl mx-auto w-full">
+        {messages.length === 0 && isConnected && (
+          <p className="text-center text-sm text-muted-foreground py-12">
+            Send a message to start a conversation with your bot.
+          </p>
+        )}
+        {messages.length === 0 && !isConnected && (
+          <p className="text-center text-xs text-muted-foreground animate-ellipsis">
+            Connecting to {brandName()}
+          </p>
+        )}
+        {messages.map((msg) => (
+          <ChatMessage key={msg.id} message={msg} />
+        ))}
+        {isTyping && (
+          <div className="flex justify-start" data-testid="chat-typing-indicator">
+            <span className="text-xs font-mono text-terminal animate-ellipsis">...</span>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="max-w-2xl mx-auto w-full">
+        <ChatInput onSend={sendMessage} disabled={!isConnected} />
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/bots/[id]/settings/page.tsx

@@ -0,0 +1,10 @@
+import { BotSettingsClient } from "@/components/bot-settings/bot-settings-client";
+
+export default async function BotSettingsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <div className="p-6">
+      <BotSettingsClient botId={id} />
+    </div>
+  );
+}