@atercates/claude-deck 0.2.1

package/components/DevServers/StartServerDialog.tsx

@@ -0,0 +1,359 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X, Server, Container, Loader2, Play, FolderOpen } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Project, ProjectDevServer } from "@/lib/db";
+
+interface DetectedServer {
+  type: "node" | "docker";
+  name: string;
+  command: string;
+  ports: number[];
+}
+
+interface StartServerDialogProps {
+  project: Project;
+  projectDevServers?: ProjectDevServer[];
+  onStart: (opts: {
+    projectId: string;
+    type: "node" | "docker";
+    name: string;
+    command: string;
+    workingDirectory: string;
+    ports?: number[];
+  }) => Promise<void>;
+  onClose: () => void;
+}
+
+export function StartServerDialog({
+  project,
+  projectDevServers = [],
+  onStart,
+  onClose,
+}: StartServerDialogProps) {
+  const [detected, setDetected] = useState<DetectedServer[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Custom server form state
+  const [showCustom, setShowCustom] = useState(false);
+  const [customType, setCustomType] = useState<"node" | "docker">("node");
+  const [customName, setCustomName] = useState("");
+  const [customCommand, setCustomCommand] = useState("");
+  const [customPort, setCustomPort] = useState("3000");
+
+  // Detect available servers
+  useEffect(() => {
+    async function detect() {
+      try {
+        const res = await fetch(
+          `/api/dev-servers/detect?projectId=${project.id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          setDetected(data.servers || []);
+        }
+      } catch (err) {
+        console.error("Failed to detect servers:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    detect();
+  }, [project.id]);
+
+  const handleStartProjectServer = async (server: ProjectDevServer) => {
+    setStarting(true);
+    setError(null);
+    try {
+      await onStart({
+        projectId: project.id,
+        type: server.type,
+        name: server.name,
+        command: server.command,
+        workingDirectory: project.working_directory,
+        ports: server.port ? [server.port] : undefined,
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to start server");
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const handleStartDetected = async (server: DetectedServer) => {
+    setStarting(true);
+    setError(null);
+    try {
+      await onStart({
+        projectId: project.id,
+        type: server.type,
+        name: server.name,
+        command: server.command,
+        workingDirectory: project.working_directory,
+        ports: server.ports,
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to start server");
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const handleStartCustom = async () => {
+    if (!customName || !customCommand) {
+      setError("Name and command are required");
+      return;
+    }
+
+    setStarting(true);
+    setError(null);
+    try {
+      const port = parseInt(customPort, 10);
+      await onStart({
+        projectId: project.id,
+        type: customType,
+        name: customName,
+        command: customCommand,
+        workingDirectory: project.working_directory,
+        ports: isNaN(port) ? undefined : [port],
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to start server");
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div
+        className={cn(
+          "w-full max-w-md rounded-xl",
+          "bg-background border-border border",
+          "shadow-2xl"
+        )}
+      >
+        {/* Header */}
+        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <h2 className="text-lg font-semibold">Start Dev Server</h2>
+          <button
+            onClick={onClose}
+            className="hover:bg-muted rounded-md p-1 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4 p-4">
+          {/* Project info */}
+          <div className="text-muted-foreground text-sm">
+            Project:{" "}
+            <span className="text-foreground font-medium">{project.name}</span>
+          </div>
+
+          {/* Project dev servers */}
+          {projectDevServers.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <FolderOpen className="h-4 w-4" />
+                Project servers
+              </div>
+              {projectDevServers.map((server) => (
+                <button
+                  key={server.id}
+                  onClick={() => handleStartProjectServer(server)}
+                  disabled={starting}
+                  className={cn(
+                    "border-primary/30 bg-primary/5 flex w-full items-center gap-3 rounded-lg border p-3",
+                    "hover:bg-primary/10 text-left transition-colors",
+                    "disabled:cursor-not-allowed disabled:opacity-50"
+                  )}
+                >
+                  {server.type === "docker" ? (
+                    <Container className="h-5 w-5 text-blue-500" />
+                  ) : (
+                    <Server className="h-5 w-5 text-green-500" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate font-medium">{server.name}</div>
+                    <div className="text-muted-foreground truncate text-xs">
+                      {server.command}
+                      {server.port && ` (port ${server.port})`}
+                    </div>
+                  </div>
+                  <Play className="text-primary h-4 w-4" />
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Detected servers */}
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+              <span className="text-muted-foreground ml-2 text-sm">
+                Detecting dev servers...
+              </span>
+            </div>
+          ) : detected.length > 0 ? (
+            <div className="space-y-2">
+              <div className="text-sm font-medium">Detected servers</div>
+              {detected.map((server, i) => (
+                <button
+                  key={i}
+                  onClick={() => handleStartDetected(server)}
+                  disabled={starting}
+                  className={cn(
+                    "border-border flex w-full items-center gap-3 rounded-lg border p-3",
+                    "hover:bg-muted/50 text-left transition-colors",
+                    "disabled:cursor-not-allowed disabled:opacity-50"
+                  )}
+                >
+                  {server.type === "docker" ? (
+                    <Container className="h-5 w-5 text-blue-500" />
+                  ) : (
+                    <Server className="h-5 w-5 text-green-500" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate font-medium">{server.name}</div>
+                    <div className="text-muted-foreground truncate text-xs">
+                      {server.command}
+                      {server.ports.length > 0 && ` (port ${server.ports[0]})`}
+                    </div>
+                  </div>
+                  <Play className="text-primary h-4 w-4" />
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted-foreground py-4 text-center text-sm">
+              No dev servers detected automatically
+            </div>
+          )}
+
+          {/* Custom server form toggle */}
+          {!showCustom ? (
+            <button
+              onClick={() => setShowCustom(true)}
+              className="text-primary w-full text-sm hover:underline"
+            >
+              + Add custom server
+            </button>
+          ) : (
+            <div className="border-border space-y-3 border-t pt-4">
+              <div className="text-sm font-medium">Custom server</div>
+
+              {/* Type selector */}
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setCustomType("node")}
+                  className={cn(
+                    "flex flex-1 items-center justify-center gap-2 rounded-md py-2",
+                    "border transition-colors",
+                    customType === "node"
+                      ? "border-primary bg-primary/10 text-primary"
+                      : "border-border hover:bg-muted"
+                  )}
+                >
+                  <Server className="h-4 w-4" />
+                  Node.js
+                </button>
+                <button
+                  onClick={() => setCustomType("docker")}
+                  className={cn(
+                    "flex flex-1 items-center justify-center gap-2 rounded-md py-2",
+                    "border transition-colors",
+                    customType === "docker"
+                      ? "border-primary bg-primary/10 text-primary"
+                      : "border-border hover:bg-muted"
+                  )}
+                >
+                  <Container className="h-4 w-4" />
+                  Docker
+                </button>
+              </div>
+
+              {/* Name input */}
+              <input
+                type="text"
+                placeholder="Server name"
+                value={customName}
+                onChange={(e) => setCustomName(e.target.value)}
+                className={cn(
+                  "border-border bg-background w-full rounded-md border px-3 py-2",
+                  "placeholder:text-muted-foreground text-sm",
+                  "focus:ring-primary/50 focus:ring-2 focus:outline-none"
+                )}
+              />
+
+              {/* Command input */}
+              <input
+                type="text"
+                placeholder={
+                  customType === "docker"
+                    ? "Service name (e.g., web)"
+                    : "Command (e.g., npm run dev)"
+                }
+                value={customCommand}
+                onChange={(e) => setCustomCommand(e.target.value)}
+                className={cn(
+                  "border-border bg-background w-full rounded-md border px-3 py-2",
+                  "placeholder:text-muted-foreground font-mono text-sm",
+                  "focus:ring-primary/50 focus:ring-2 focus:outline-none"
+                )}
+              />
+
+              {/* Port input (for Node.js only) */}
+              {customType === "node" && (
+                <input
+                  type="text"
+                  placeholder="Port (optional)"
+                  value={customPort}
+                  onChange={(e) => setCustomPort(e.target.value)}
+                  className={cn(
+                    "border-border bg-background w-full rounded-md border px-3 py-2",
+                    "placeholder:text-muted-foreground text-sm",
+                    "focus:ring-primary/50 focus:ring-2 focus:outline-none"
+                  )}
+                />
+              )}
+
+              {/* Start custom button */}
+              <button
+                onClick={handleStartCustom}
+                disabled={starting || !customName || !customCommand}
+                className={cn(
+                  "flex w-full items-center justify-center gap-2 rounded-md py-2",
+                  "bg-primary text-primary-foreground font-medium",
+                  "hover:bg-primary/90 transition-colors",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                )}
+              >
+                {starting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Play className="h-4 w-4" />
+                )}
+                Start Server
+              </button>
+            </div>
+          )}
+
+          {/* Error message */}
+          {error && (
+            <div className="rounded-md bg-red-500/10 p-2 text-sm text-red-500">
+              {error}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/DevServers/index.ts

@@ -0,0 +1,4 @@
+export { DevServerCard } from "./DevServerCard";
+export { DevServersSection } from "./DevServersSection";
+export { StartServerDialog } from "./StartServerDialog";
+export { ServerLogsModal } from "./ServerLogsModal";

package/components/DiffViewer/DiffModal.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { X, Plus, Minus, ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { UnifiedDiff } from "./UnifiedDiff";
+import { parseDiff, getDiffFileName, getDiffSummary } from "@/lib/diff-parser";
+import { cn } from "@/lib/utils";
+
+interface DiffModalProps {
+  diff: string;
+  fileName?: string;
+  onClose: () => void;
+  onStage?: () => void;
+  onUnstage?: () => void;
+  isStaged?: boolean;
+}
+
+export function DiffModal({
+  diff,
+  fileName,
+  onClose,
+  onStage,
+  onUnstage,
+  isStaged = false,
+}: DiffModalProps) {
+  const parsedDiff = parseDiff(diff);
+  const displayName = fileName || getDiffFileName(parsedDiff);
+  const summary = getDiffSummary(parsedDiff);
+
+  return (
+    <div className="bg-background fixed inset-0 z-50 flex flex-col">
+      {/* Header */}
+      <div className="border-border bg-background/95 flex items-center gap-2 border-b p-3 backdrop-blur-sm">
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onClose}
+          className="h-9 w-9"
+        >
+          <ChevronLeft className="h-5 w-5" />
+        </Button>
+
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-sm font-medium">{displayName}</h3>
+          <p className="text-muted-foreground text-xs">{summary}</p>
+        </div>
+
+        {/* Stage/Unstage button */}
+        {(onStage || onUnstage) && (
+          <Button
+            variant={isStaged ? "outline" : "default"}
+            size="sm"
+            onClick={isStaged ? onUnstage : onStage}
+            className="h-9"
+          >
+            {isStaged ? (
+              <>
+                <Minus className="mr-1 h-4 w-4" />
+                Unstage
+              </>
+            ) : (
+              <>
+                <Plus className="mr-1 h-4 w-4" />
+                Stage
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onClose}
+          className="h-9 w-9 md:hidden"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-3">
+        {diff ? (
+          <UnifiedDiff
+            diff={parsedDiff}
+            fileName={displayName}
+            expanded={true}
+          />
+        ) : (
+          <div className="text-muted-foreground flex h-full items-center justify-center">
+            <p className="text-sm">No changes to display</p>
+          </div>
+        )}
+      </div>
+
+      {/* Mobile action bar */}
+      <div className="border-border bg-background/95 safe-area-bottom flex items-center justify-between border-t p-3 backdrop-blur-sm md:hidden">
+        <div className="flex items-center gap-4">
+          {parsedDiff.additions > 0 && (
+            <span className="flex items-center gap-1 text-sm text-green-500">
+              <Plus className="h-4 w-4" />
+              {parsedDiff.additions}
+            </span>
+          )}
+          {parsedDiff.deletions > 0 && (
+            <span className="flex items-center gap-1 text-sm text-red-500">
+              <Minus className="h-4 w-4" />
+              {parsedDiff.deletions}
+            </span>
+          )}
+        </div>
+
+        {(onStage || onUnstage) && (
+          <Button
+            variant={isStaged ? "outline" : "default"}
+            size="default"
+            onClick={isStaged ? onUnstage : onStage}
+            className="min-h-[44px]"
+          >
+            {isStaged ? "Unstage" : "Stage"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface DiffViewProps {
+  diff: string;
+  fileName?: string;
+}
+
+/**
+ * Inline diff view (non-modal)
+ * For embedding in other components
+ */
+export function DiffView({ diff, fileName }: DiffViewProps) {
+  const parsedDiff = parseDiff(diff);
+  const displayName = fileName || getDiffFileName(parsedDiff);
+
+  if (!diff) {
+    return (
+      <div className="text-muted-foreground p-4 text-center">
+        <p className="text-sm">No changes to display</p>
+      </div>
+    );
+  }
+
+  return (
+    <UnifiedDiff diff={parsedDiff} fileName={displayName} expanded={true} />
+  );
+}

package/components/DiffViewer/UnifiedDiff.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight, Plus, Minus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ParsedDiff, DiffHunk, DiffLine } from "@/lib/diff-parser";
+
+interface UnifiedDiffProps {
+  diff: ParsedDiff;
+  fileName: string;
+  expanded?: boolean;
+  onToggle?: () => void;
+}
+
+export function UnifiedDiff({
+  diff,
+  fileName,
+  expanded = true,
+  onToggle,
+}: UnifiedDiffProps) {
+  const [localExpanded, setLocalExpanded] = useState(expanded);
+  const isExpanded = onToggle ? expanded : localExpanded;
+
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setLocalExpanded(!localExpanded);
+    }
+  };
+
+  return (
+    <div className="border-border overflow-hidden rounded-lg border">
+      {/* File header */}
+      <button
+        onClick={handleToggle}
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-2.5 text-sm",
+          "bg-muted/50 hover:bg-muted text-left transition-colors",
+          "min-h-[44px]" // Mobile touch target
+        )}
+      >
+        {isExpanded ? (
+          <ChevronDown className="text-muted-foreground h-4 w-4 flex-shrink-0" />
+        ) : (
+          <ChevronRight className="text-muted-foreground h-4 w-4 flex-shrink-0" />
+        )}
+
+        <span className="flex-1 truncate font-mono text-xs">{fileName}</span>
+
+        {/* Stats */}
+        <span className="flex flex-shrink-0 items-center gap-2 text-xs">
+          {diff.additions > 0 && (
+            <span className="flex items-center gap-0.5 text-green-500">
+              <Plus className="h-3 w-3" />
+              {diff.additions}
+            </span>
+          )}
+          {diff.deletions > 0 && (
+            <span className="flex items-center gap-0.5 text-red-500">
+              <Minus className="h-3 w-3" />
+              {diff.deletions}
+            </span>
+          )}
+        </span>
+      </button>
+
+      {/* Diff content */}
+      {isExpanded && (
+        <div className="overflow-x-auto">
+          {diff.isBinary ? (
+            <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+              Binary file not shown
+            </div>
+          ) : diff.hunks.length === 0 ? (
+            <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+              No changes
+            </div>
+          ) : (
+            <div className="font-mono text-xs">
+              {diff.hunks.map((hunk, index) => (
+                <Hunk key={index} hunk={hunk} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface HunkProps {
+  hunk: DiffHunk;
+}
+
+function Hunk({ hunk }: HunkProps) {
+  return (
+    <div>
+      {/* Hunk header */}
+      <div className="border-border border-y bg-blue-500/10 px-3 py-1 text-xs text-blue-400">
+        {hunk.header}
+      </div>
+
+      {/* Lines */}
+      <table className="w-full border-collapse">
+        <tbody>
+          {hunk.lines.map((line, index) => (
+            <DiffLineRow key={index} line={line} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+interface DiffLineRowProps {
+  line: DiffLine;
+}
+
+function DiffLineRow({ line }: DiffLineRowProps) {
+  const bgColor = getLineBgColor(line.type);
+  const textColor = getLineTextColor(line.type);
+
+  // Skip header lines in the main content
+  if (line.type === "header") {
+    return null;
+  }
+
+  return (
+    <tr className={cn("hover:bg-muted/30", bgColor)}>
+      {/* Old line number */}
+      <td className="text-muted-foreground border-border/50 w-12 border-r px-2 py-0.5 text-right tabular-nums select-none">
+        {line.oldLineNumber || ""}
+      </td>
+
+      {/* New line number */}
+      <td className="text-muted-foreground border-border/50 w-12 border-r px-2 py-0.5 text-right tabular-nums select-none">
+        {line.newLineNumber || ""}
+      </td>
+
+      {/* Line marker */}
+      <td className={cn("w-6 px-1 py-0.5 text-center select-none", textColor)}>
+        {getLineMarker(line.type)}
+      </td>
+
+      {/* Content */}
+      <td className={cn("px-2 py-0.5 whitespace-pre", textColor)}>
+        {line.content || " "}
+      </td>
+    </tr>
+  );
+}
+
+function getLineBgColor(type: DiffLine["type"]): string {
+  switch (type) {
+    case "addition":
+      return "bg-green-500/10";
+    case "deletion":
+      return "bg-red-500/10";
+    default:
+      return "";
+  }
+}
+
+function getLineTextColor(type: DiffLine["type"]): string {
+  switch (type) {
+    case "addition":
+      return "text-green-400";
+    case "deletion":
+      return "text-red-400";
+    default:
+      return "text-foreground";
+  }
+}
+
+function getLineMarker(type: DiffLine["type"]): string {
+  switch (type) {
+    case "addition":
+      return "+";
+    case "deletion":
+      return "-";
+    default:
+      return "";
+  }
+}

package/components/DiffViewer/index.tsx

@@ -0,0 +1,2 @@
+export { UnifiedDiff } from "./UnifiedDiff";
+export { DiffModal, DiffView } from "./DiffModal";