claudeship 0.2.12 → 0.2.15

package/apps/web/src/components/env/EnvPanel.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import {
+  Eye,
+  EyeOff,
+  Plus,
+  Trash2,
+  Save,
+  FileText,
+  RefreshCw,
+  AlertCircle,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api";
+
+interface EnvVariable {
+  key: string;
+  value: string;
+}
+
+interface EnvFile {
+  path: string;
+  variables: EnvVariable[];
+}
+
+interface EnvPanelProps {
+  projectId: string;
+}
+
+// Keys that should be masked by default
+const SENSITIVE_KEYS = [
+  "SECRET",
+  "PASSWORD",
+  "KEY",
+  "TOKEN",
+  "API_KEY",
+  "PRIVATE",
+  "CREDENTIAL",
+];
+
+function isSensitiveKey(key: string): boolean {
+  const upperKey = key.toUpperCase();
+  return SENSITIVE_KEYS.some((sensitive) => upperKey.includes(sensitive));
+}
+
+export function EnvPanel({ projectId }: EnvPanelProps) {
+  const [envFiles, setEnvFiles] = useState<EnvFile[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [variables, setVariables] = useState<EnvVariable[]>([]);
+  const [visibleValues, setVisibleValues] = useState<Set<string>>(new Set());
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // Fetch env files list
+  const fetchEnvFiles = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const files = await api.get<EnvFile[]>(`/projects/${projectId}/env`);
+      setEnvFiles(files);
+      if (files.length > 0 && !selectedFile) {
+        setSelectedFile(files[0].path);
+        setVariables(files[0].variables);
+      }
+    } catch (e) {
+      setError("Failed to load environment files");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectId, selectedFile]);
+
+  // Fetch specific env file
+  const fetchEnvFile = useCallback(async (filePath: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const file = await api.get<EnvFile>(
+        `/projects/${projectId}/env/file?path=${encodeURIComponent(filePath)}`
+      );
+      setVariables(file.variables);
+      setHasChanges(false);
+    } catch (e) {
+      setError(`Failed to load ${filePath}`);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchEnvFiles();
+  }, [fetchEnvFiles]);
+
+  useEffect(() => {
+    if (selectedFile) {
+      fetchEnvFile(selectedFile);
+    }
+  }, [selectedFile, fetchEnvFile]);
+
+  const handleSelectFile = (filePath: string) => {
+    if (hasChanges) {
+      if (!confirm("You have unsaved changes. Discard them?")) {
+        return;
+      }
+    }
+    setSelectedFile(filePath);
+    setVisibleValues(new Set());
+  };
+
+  const handleAddVariable = () => {
+    setVariables([...variables, { key: "", value: "" }]);
+    setHasChanges(true);
+  };
+
+  const handleUpdateVariable = (index: number, field: "key" | "value", value: string) => {
+    const newVariables = [...variables];
+    newVariables[index] = { ...newVariables[index], [field]: value };
+    setVariables(newVariables);
+    setHasChanges(true);
+  };
+
+  const handleDeleteVariable = (index: number) => {
+    const newVariables = variables.filter((_, i) => i !== index);
+    setVariables(newVariables);
+    setHasChanges(true);
+  };
+
+  const handleToggleVisibility = (key: string) => {
+    const newVisible = new Set(visibleValues);
+    if (newVisible.has(key)) {
+      newVisible.delete(key);
+    } else {
+      newVisible.add(key);
+    }
+    setVisibleValues(newVisible);
+  };
+
+  const handleSave = async () => {
+    if (!selectedFile) return;
+
+    // Validate: no empty keys
+    const emptyKeys = variables.filter((v) => !v.key.trim());
+    if (emptyKeys.length > 0) {
+      setError("Variable names cannot be empty");
+      return;
+    }
+
+    // Validate: no duplicate keys
+    const keys = variables.map((v) => v.key.trim());
+    const duplicates = keys.filter((key, i) => keys.indexOf(key) !== i);
+    if (duplicates.length > 0) {
+      setError(`Duplicate variable name: ${duplicates[0]}`);
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+    try {
+      await api.put(
+        `/projects/${projectId}/env/file?path=${encodeURIComponent(selectedFile)}`,
+        { variables }
+      );
+      setHasChanges(false);
+    } catch (e) {
+      setError("Failed to save environment variables");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCreateEnvFile = async () => {
+    const fileName = prompt("Enter .env file name (e.g., .env.local):");
+    if (!fileName) return;
+
+    if (!fileName.startsWith(".env")) {
+      setError("File name must start with .env");
+      return;
+    }
+
+    try {
+      await api.post(
+        `/projects/${projectId}/env/file?path=${encodeURIComponent(fileName)}`,
+        { variables: [] }
+      );
+      await fetchEnvFiles();
+      setSelectedFile(fileName);
+    } catch (e) {
+      setError("Failed to create environment file");
+    }
+  };
+
+  if (isLoading && envFiles.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <RefreshCw className="h-5 w-5 animate-spin mr-2" />
+        Loading...
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <h3 className="font-medium">Environment Variables</h3>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleCreateEnvFile}
+            className="h-8"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            New File
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleSave}
+            disabled={!hasChanges || isSaving}
+            className="h-8"
+          >
+            {isSaving ? (
+              <RefreshCw className="h-4 w-4 animate-spin mr-1" />
+            ) : (
+              <Save className="h-4 w-4 mr-1" />
+            )}
+            Save
+          </Button>
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="flex items-center gap-2 px-4 py-2 bg-destructive/10 text-destructive text-sm">
+          <AlertCircle className="h-4 w-4" />
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* File List Sidebar */}
+        <div className="w-48 border-r overflow-auto">
+          <div className="p-2 space-y-1">
+            {envFiles.map((file) => (
+              <button
+                key={file.path}
+                onClick={() => handleSelectFile(file.path)}
+                className={`w-full flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors ${
+                  selectedFile === file.path
+                    ? "bg-primary/10 text-primary"
+                    : "hover:bg-muted"
+                }`}
+              >
+                <FileText className="h-4 w-4 shrink-0" />
+                <span className="truncate">{file.path}</span>
+              </button>
+            ))}
+            {envFiles.length === 0 && (
+              <p className="text-sm text-muted-foreground px-3 py-2">
+                No .env files found
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Variables Editor */}
+        <div className="flex-1 overflow-auto">
+          {selectedFile ? (
+            <div className="p-4 space-y-3">
+              {/* Table Header */}
+              <div className="grid grid-cols-[1fr_1fr_auto] gap-2 px-2 text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                <div>Key</div>
+                <div>Value</div>
+                <div className="w-16"></div>
+              </div>
+
+              {/* Variables */}
+              {variables.map((variable, index) => (
+                <div
+                  key={index}
+                  className="grid grid-cols-[1fr_1fr_auto] gap-2 items-center"
+                >
+                  <Input
+                    value={variable.key}
+                    onChange={(e) => handleUpdateVariable(index, "key", e.target.value)}
+                    placeholder="VARIABLE_NAME"
+                    className="font-mono text-sm"
+                  />
+                  <div className="relative">
+                    <Input
+                      type={
+                        isSensitiveKey(variable.key) && !visibleValues.has(variable.key)
+                          ? "password"
+                          : "text"
+                      }
+                      value={variable.value}
+                      onChange={(e) => handleUpdateVariable(index, "value", e.target.value)}
+                      placeholder="value"
+                      className="font-mono text-sm pr-10"
+                    />
+                    {isSensitiveKey(variable.key) && (
+                      <button
+                        onClick={() => handleToggleVisibility(variable.key)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                      >
+                        {visibleValues.has(variable.key) ? (
+                          <EyeOff className="h-4 w-4" />
+                        ) : (
+                          <Eye className="h-4 w-4" />
+                        )}
+                      </button>
+                    )}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDeleteVariable(index)}
+                    className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+
+              {/* Add Variable Button */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleAddVariable}
+                className="w-full mt-4"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add Variable
+              </Button>
+
+              {/* Tip */}
+              {variables.some((v) => v.key.startsWith("NEXT_PUBLIC_")) && (
+                <p className="text-xs text-muted-foreground mt-4">
+                  Variables starting with NEXT_PUBLIC_ will be exposed to the browser.
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className="flex h-full items-center justify-center text-muted-foreground">
+              <p>Select a file or create a new one</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/preview/ConsoleViewer.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useEffect, useState, useRef, useCallback } from "react";
+import { Trash2, Download, Filter, AlertCircle, Terminal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:14000";
+
+interface LogEntry {
+  id: string;
+  timestamp: number;
+  level: "stdout" | "stderr";
+  source: "frontend" | "backend";
+  message: string;
+}
+
+interface ConsoleViewerProps {
+  projectId: string;
+  isRunning: boolean;
+}
+
+type FilterType = "all" | "frontend" | "backend" | "error";
+
+export function ConsoleViewer({ projectId, isRunning }: ConsoleViewerProps) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [autoScroll, setAutoScroll] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Fetch initial logs
+  useEffect(() => {
+    if (!isRunning) {
+      setLogs([]);
+      return;
+    }
+
+    const fetchLogs = async () => {
+      try {
+        const response = await fetch(`${API_BASE}/projects/${projectId}/preview/logs`);
+        if (response.ok) {
+          const initialLogs = await response.json();
+          setLogs(initialLogs);
+        }
+      } catch (error) {
+        console.error("Failed to fetch logs:", error);
+      }
+    };
+
+    fetchLogs();
+  }, [projectId, isRunning]);
+
+  // Subscribe to log stream
+  useEffect(() => {
+    if (!isRunning) {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      return;
+    }
+
+    const eventSource = new EventSource(
+      `${API_BASE}/projects/${projectId}/preview/logs/stream`
+    );
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "log" && data.entry) {
+          setLogs((prev) => {
+            const newLogs = [...prev, data.entry];
+            // Keep max 1000 logs
+            if (newLogs.length > 1000) {
+              return newLogs.slice(-1000);
+            }
+            return newLogs;
+          });
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+      eventSourceRef.current = null;
+    };
+
+    eventSourceRef.current = eventSource;
+
+    return () => {
+      eventSource.close();
+      eventSourceRef.current = null;
+    };
+  }, [projectId, isRunning]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    // Enable auto-scroll if scrolled near bottom
+    setAutoScroll(scrollHeight - scrollTop - clientHeight < 50);
+  }, []);
+
+  const handleClear = async () => {
+    try {
+      await fetch(`${API_BASE}/projects/${projectId}/preview/logs`, {
+        method: "DELETE",
+      });
+      setLogs([]);
+    } catch (error) {
+      console.error("Failed to clear logs:", error);
+    }
+  };
+
+  const handleDownload = () => {
+    const content = filteredLogs
+      .map((log) => {
+        const time = new Date(log.timestamp).toISOString();
+        return `[${time}] [${log.source}] [${log.level}] ${log.message}`;
+      })
+      .join("\n");
+
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `console-${projectId}-${Date.now()}.log`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const filteredLogs = logs.filter((log) => {
+    switch (filter) {
+      case "frontend":
+        return log.source === "frontend";
+      case "backend":
+        return log.source === "backend";
+      case "error":
+        return log.level === "stderr";
+      default:
+        return true;
+    }
+  });
+
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  if (!isRunning) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <div className="text-center">
+          <Terminal className="mx-auto h-8 w-8 mb-2 opacity-50" />
+          <p className="text-sm">Start the preview to see console output</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="flex h-10 items-center justify-between border-b px-2">
+        <div className="flex items-center gap-1">
+          <Button
+            variant={filter === "all" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setFilter("all")}
+            className="h-7 px-2 text-xs"
+          >
+            All
+          </Button>
+          <Button
+            variant={filter === "frontend" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setFilter("frontend")}
+            className="h-7 px-2 text-xs"
+          >
+            Frontend
+          </Button>
+          <Button
+            variant={filter === "backend" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setFilter("backend")}
+            className="h-7 px-2 text-xs"
+          >
+            Backend
+          </Button>
+          <Button
+            variant={filter === "error" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setFilter("error")}
+            className="h-7 px-2 text-xs text-red-500"
+          >
+            <AlertCircle className="h-3 w-3 mr-1" />
+            Errors
+          </Button>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDownload}
+            className="h-7 w-7 p-0"
+            title="Download logs"
+          >
+            <Download className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClear}
+            className="h-7 w-7 p-0"
+            title="Clear logs"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Log Output */}
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 overflow-auto bg-zinc-950 p-2 font-mono text-xs"
+      >
+        {filteredLogs.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-zinc-500">
+            <span>No logs yet...</span>
+          </div>
+        ) : (
+          <div className="space-y-0.5">
+            {filteredLogs.map((log) => (
+              <div
+                key={log.id}
+                className={`flex gap-2 ${
+                  log.level === "stderr" ? "text-red-400" : "text-zinc-300"
+                }`}
+              >
+                <span className="text-zinc-600 shrink-0">
+                  {formatTime(log.timestamp)}
+                </span>
+                <span
+                  className={`shrink-0 px-1 rounded text-[10px] ${
+                    log.source === "frontend"
+                      ? "bg-blue-500/20 text-blue-400"
+                      : "bg-green-500/20 text-green-400"
+                  }`}
+                >
+                  {log.source === "frontend" ? "FE" : "BE"}
+                </span>
+                <span className="whitespace-pre-wrap break-all">
+                  {log.message}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}