@atercates/claude-deck 0.2.1

package/components/DevServers/DevServerCard.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Play,
+  Square,
+  RefreshCw,
+  FileText,
+  Trash2,
+  Copy,
+  Check,
+  Server,
+  Container,
+  X,
+  ExternalLink,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+import type { DevServer, DevServerStatus } from "@/lib/db";
+
+interface DevServerCardProps {
+  server: DevServer;
+  projectName?: string;
+  onStart: (id: string) => Promise<void>;
+  onStop: (id: string) => Promise<void>;
+  onRestart: (id: string) => Promise<void>;
+  onRemove: (id: string) => Promise<void>;
+  onViewLogs: (id: string) => void;
+}
+
+const statusConfig: Record<
+  DevServerStatus,
+  { color: string; bgColor: string; label: string }
+> = {
+  running: {
+    color: "bg-green-500",
+    bgColor: "bg-green-500/10",
+    label: "Running",
+  },
+  stopped: {
+    color: "bg-zinc-500",
+    bgColor: "bg-zinc-500/10",
+    label: "Stopped",
+  },
+  starting: {
+    color: "bg-yellow-500",
+    bgColor: "bg-yellow-500/10",
+    label: "Starting",
+  },
+  failed: { color: "bg-red-500", bgColor: "bg-red-500/10", label: "Failed" },
+};
+
+export function DevServerCard({
+  server,
+  projectName,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
+  onViewLogs,
+}: DevServerCardProps) {
+  const [loading, setLoading] = useState(false);
+  const [confirmingStop, setConfirmingStop] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
+
+  const status = statusConfig[server.status] || statusConfig.stopped;
+  const ports: number[] = JSON.parse(server.ports || "[]");
+  const primaryPort = ports[0];
+  const isRunning = server.status === "running";
+  const isStopped = server.status === "stopped";
+  const isFailed = server.status === "failed";
+
+  const handleAction = async (action: () => Promise<void>) => {
+    setLoading(true);
+    try {
+      await action();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 rounded-md border px-2 py-1.5",
+        "bg-card/50 hover:bg-card/80 transition-colors"
+      )}
+    >
+      {/* Header row */}
+      <div className="flex items-center gap-2">
+        {/* Status dot */}
+        <div className={cn("h-2 w-2 rounded-full", status.color)} />
+
+        {/* Name */}
+        <span className="flex-1 truncate text-sm font-medium">
+          {server.name}
+        </span>
+
+        {/* Type badge */}
+        <span
+          className={cn(
+            "flex items-center gap-1 rounded px-1.5 py-0.5",
+            "text-muted-foreground text-[10px] font-medium",
+            "bg-muted/50"
+          )}
+        >
+          {server.type === "docker" ? (
+            <Container className="h-3 w-3" />
+          ) : (
+            <Server className="h-3 w-3" />
+          )}
+          {server.type === "docker" ? "Docker" : "Node"}
+        </span>
+      </div>
+
+      {/* Project name (if provided) */}
+      {projectName && (
+        <div className="text-muted-foreground mt-1 truncate text-xs">
+          {projectName}
+        </div>
+      )}
+
+      {/* Port badge */}
+      {primaryPort && (
+        <div className="mt-1 flex items-center gap-1">
+          {isRunning ? (
+            <a
+              href={`http://localhost:${primaryPort}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                "flex items-center gap-1 rounded px-2 py-1",
+                "font-mono text-xs transition-colors",
+                "bg-primary/10 text-primary hover:bg-primary/20"
+              )}
+            >
+              <ExternalLink className="h-3 w-3" />
+              localhost:{primaryPort}
+            </a>
+          ) : (
+            <span
+              className={cn(
+                "flex items-center gap-1 rounded px-2 py-1",
+                "font-mono text-xs",
+                "bg-muted/30 text-muted-foreground"
+              )}
+            >
+              localhost:{primaryPort}
+            </span>
+          )}
+          <button
+            onClick={() => primaryPort && copy(`localhost:${primaryPort}`)}
+            disabled={!isRunning}
+            className={cn(
+              "flex items-center justify-center rounded p-1",
+              "text-xs transition-colors",
+              isRunning
+                ? "text-muted-foreground hover:text-foreground hover:bg-muted"
+                : "text-muted-foreground/50 cursor-not-allowed"
+            )}
+            title="Copy URL"
+          >
+            {copied ? (
+              <Check className="h-3 w-3 text-green-500" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="mt-1.5 flex items-center gap-1">
+        {isRunning && (
+          <>
+            {confirmingStop ? (
+              <>
+                <ActionButton
+                  icon={Square}
+                  label="Confirm"
+                  onClick={() => {
+                    setConfirmingStop(false);
+                    handleAction(() => onStop(server.id));
+                  }}
+                  disabled={loading}
+                  variant="danger"
+                />
+                <ActionButton
+                  icon={X}
+                  label="Cancel"
+                  onClick={() => setConfirmingStop(false)}
+                  disabled={loading}
+                />
+              </>
+            ) : (
+              <>
+                <ActionButton
+                  icon={Square}
+                  label="Stop"
+                  onClick={() => setConfirmingStop(true)}
+                  disabled={loading}
+                  variant="danger"
+                />
+                <ActionButton
+                  icon={RefreshCw}
+                  label="Restart"
+                  onClick={() => handleAction(() => onRestart(server.id))}
+                  disabled={loading}
+                />
+                <ActionButton
+                  icon={FileText}
+                  label="Logs"
+                  onClick={() => onViewLogs(server.id)}
+                  disabled={loading}
+                />
+              </>
+            )}
+          </>
+        )}
+
+        {isStopped && (
+          <>
+            <ActionButton
+              icon={Play}
+              label="Start"
+              onClick={() => handleAction(() => onStart(server.id))}
+              disabled={loading}
+              variant="primary"
+            />
+            <ActionButton
+              icon={Trash2}
+              label="Remove"
+              onClick={() => handleAction(() => onRemove(server.id))}
+              disabled={loading}
+              variant="danger"
+            />
+          </>
+        )}
+
+        {isFailed && (
+          <>
+            <ActionButton
+              icon={Play}
+              label="Start"
+              onClick={() => handleAction(() => onStart(server.id))}
+              disabled={loading}
+              variant="primary"
+            />
+            <ActionButton
+              icon={FileText}
+              label="Logs"
+              onClick={() => onViewLogs(server.id)}
+              disabled={loading}
+            />
+            <ActionButton
+              icon={Trash2}
+              label="Remove"
+              onClick={() => handleAction(() => onRemove(server.id))}
+              disabled={loading}
+              variant="danger"
+            />
+          </>
+        )}
+
+        {server.status === "starting" && (
+          <span className="text-muted-foreground flex items-center gap-1 text-xs">
+            <RefreshCw className="h-3 w-3 animate-spin" />
+            Starting...
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ActionButtonProps {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: "default" | "primary" | "danger";
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  onClick,
+  disabled,
+  variant = "default",
+}: ActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      title={label}
+      className={cn(
+        "flex h-7 items-center gap-1 rounded px-1.5",
+        "text-xs font-medium transition-colors",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        variant === "primary" &&
+          "bg-primary/10 text-primary hover:bg-primary/20",
+        variant === "danger" &&
+          "bg-red-500/10 text-red-500 hover:bg-red-500/20",
+        variant === "default" && "bg-muted/50 text-foreground hover:bg-muted"
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}

package/components/DevServers/DevServersSection.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Server } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { DevServerCard } from "./DevServerCard";
+import type { DevServer, Project } from "@/lib/db";
+
+interface DevServersSectionProps {
+  servers: DevServer[];
+  projects: Project[];
+  onStart: (id: string) => Promise<void>;
+  onStop: (id: string) => Promise<void>;
+  onRestart: (id: string) => Promise<void>;
+  onRemove: (id: string) => Promise<void>;
+  onViewLogs: (id: string) => void;
+}
+
+export function DevServersSection({
+  servers,
+  projects,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
+  onViewLogs,
+}: DevServersSectionProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (servers.length === 0) return null;
+
+  // Count running servers
+  const runningCount = servers.filter((s) => s.status === "running").length;
+
+  // Create project lookup map
+  const projectMap = new Map(projects.map((p) => [p.id, p]));
+
+  return (
+    <div className="border-border/50 border-b">
+      {/* Header */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-2",
+          "hover:bg-muted/50 transition-colors"
+        )}
+      >
+        <ChevronDown
+          className={cn(
+            "text-muted-foreground h-4 w-4 transition-transform",
+            !expanded && "-rotate-90"
+          )}
+        />
+        <Server className="text-muted-foreground h-4 w-4" />
+        <span className="flex-1 text-left text-sm font-medium">
+          Dev Servers
+        </span>
+        {runningCount > 0 && (
+          <span
+            className={cn(
+              "rounded-full px-1.5 py-0.5",
+              "text-[10px] font-medium",
+              "bg-green-500/20 text-green-500"
+            )}
+          >
+            {runningCount} running
+          </span>
+        )}
+        <span className="text-muted-foreground text-xs">{servers.length}</span>
+      </button>
+
+      {/* Server list */}
+      {expanded && (
+        <div className="space-y-2 px-3 pb-3">
+          {servers.map((server) => (
+            <DevServerCard
+              key={server.id}
+              server={server}
+              projectName={projectMap.get(server.project_id)?.name}
+              onStart={onStart}
+              onStop={onStop}
+              onRestart={onRestart}
+              onRemove={onRemove}
+              onViewLogs={onViewLogs}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/DevServers/ServerLogsModal.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { X, RefreshCw, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ServerLogsModalProps {
+  serverId: string;
+  serverName: string;
+  onClose: () => void;
+}
+
+export function ServerLogsModal({
+  serverId,
+  serverName,
+  onClose,
+}: ServerLogsModalProps) {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const logsRef = useRef<HTMLDivElement>(null);
+
+  const fetchLogs = async (isRefresh = false) => {
+    if (isRefresh) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
+
+    try {
+      const res = await fetch(`/api/dev-servers/${serverId}/logs?lines=200`);
+      if (res.ok) {
+        const data = await res.json();
+        setLogs(data.logs || []);
+      }
+    } catch (err) {
+      console.error("Failed to fetch logs:", err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  // Initial fetch
+  useEffect(() => {
+    fetchLogs();
+  }, [serverId]);
+
+  // Auto-scroll to bottom when logs update
+  useEffect(() => {
+    if (logsRef.current) {
+      logsRef.current.scrollTop = logsRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  // Auto-refresh every 3 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchLogs(true);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [serverId]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div
+        className={cn(
+          "flex h-[80vh] w-full max-w-3xl flex-col 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="truncate text-lg font-semibold">Logs: {serverName}</h2>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => fetchLogs(true)}
+              disabled={refreshing}
+              className={cn(
+                "hover:bg-muted rounded-md p-1.5 transition-colors",
+                "disabled:opacity-50"
+              )}
+              title="Refresh"
+            >
+              <RefreshCw
+                className={cn("h-4 w-4", refreshing && "animate-spin")}
+              />
+            </button>
+            <button
+              onClick={onClose}
+              className="hover:bg-muted rounded-md p-1.5 transition-colors"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Logs content */}
+        <div
+          ref={logsRef}
+          className={cn(
+            "flex-1 overflow-auto p-4",
+            "bg-zinc-950 font-mono text-sm leading-relaxed"
+          )}
+        >
+          {loading ? (
+            <div className="flex h-full items-center justify-center">
+              <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+              <span className="text-muted-foreground ml-2">
+                Loading logs...
+              </span>
+            </div>
+          ) : logs.length === 0 ? (
+            <div className="text-muted-foreground flex h-full items-center justify-center">
+              No logs available
+            </div>
+          ) : (
+            <div className="space-y-0.5">
+              {logs.map((line, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    "break-all whitespace-pre-wrap",
+                    line.includes("error") || line.includes("Error")
+                      ? "text-red-400"
+                      : line.includes("warn") || line.includes("Warning")
+                        ? "text-yellow-400"
+                        : "text-zinc-300"
+                  )}
+                >
+                  {line || " "}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-border text-muted-foreground border-t px-4 py-2 text-xs">
+          Auto-refreshing every 3 seconds
+          {refreshing && (
+            <span className="ml-2">
+              <RefreshCw className="inline h-3 w-3 animate-spin" />
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}