claude-world-studio 1.0.0

package/client/components/FileExplorer.tsx

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from "react";
+
+interface FileEntry {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  size?: number;
+  modified?: string;
+  children?: FileEntry[];
+}
+
+interface FileExplorerProps {
+  sessionId: string | null;
+  isVisible: boolean;
+  onToggle: () => void;
+  onPreviewFile: (relativePath: string) => void;
+}
+
+const IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "webp", "svg"];
+
+function FileIcon({ type, name }: { type: string; name: string }) {
+  if (type === "directory") return <span className="text-yellow-500">D</span>;
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return <span className="text-blue-400">T</span>;
+    case "js":
+    case "jsx":
+      return <span className="text-yellow-400">J</span>;
+    case "py":
+      return <span className="text-green-400">P</span>;
+    case "md":
+      return <span className="text-gray-400">M</span>;
+    case "json":
+      return <span className="text-orange-400">{"{}"}</span>;
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "webp":
+    case "svg":
+      return <span className="text-pink-400">I</span>;
+    case "pdf":
+      return <span className="text-red-400">P</span>;
+    case "mp3":
+    case "wav":
+    case "m4a":
+      return <span className="text-purple-400">A</span>;
+    case "mp4":
+    case "webm":
+      return <span className="text-indigo-400">V</span>;
+    default:
+      return <span className="text-gray-400">F</span>;
+  }
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + "B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + "KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + "MB";
+}
+
+function FileTreeNode({
+  entry,
+  depth,
+  onSelect,
+  sessionId,
+}: {
+  entry: FileEntry;
+  depth: number;
+  onSelect: (path: string) => void;
+  sessionId: string;
+}) {
+  const [isOpen, setIsOpen] = useState(depth < 1);
+  const ext = entry.name.split(".").pop()?.toLowerCase() || "";
+  const isImage = IMAGE_EXTS.includes(ext);
+
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={entry.type === "directory" ? isOpen : undefined}
+        className="w-full flex items-center gap-1.5 py-1 px-1.5 hover:bg-gray-100 rounded cursor-pointer text-xs group text-left"
+        style={{ paddingLeft: depth * 14 + 6 }}
+        onClick={() => {
+          if (entry.type === "directory") {
+            setIsOpen(!isOpen);
+          } else {
+            onSelect(entry.path);
+          }
+        }}
+      >
+        {entry.type === "directory" && (
+          <span className="text-gray-400 w-3 text-center text-[10px]">
+            {isOpen ? "▼" : "▶"}
+          </span>
+        )}
+        <FileIcon type={entry.type} name={entry.name} />
+        <span className="truncate flex-1">{entry.name}</span>
+        {entry.type === "file" && entry.size != null && (
+          <span className="text-gray-400 text-[10px] shrink-0">
+            {formatSize(entry.size)}
+          </span>
+        )}
+      </button>
+
+      {/* Inline image thumbnail for image files */}
+      {entry.type === "file" && isImage && (
+        <button
+          type="button"
+          className="ml-8 mr-2 my-1 cursor-pointer block"
+          onClick={() => onSelect(entry.path)}
+          aria-label={`Preview ${entry.name}`}
+        >
+          <img
+            src={`/api/sessions/${encodeURIComponent(sessionId)}/files/${entry.path.split("/").map(encodeURIComponent).join("/")}`}
+            alt={entry.name}
+            className="max-h-16 rounded border border-gray-200 hover:border-blue-300 transition-colors"
+            loading="lazy"
+          />
+        </button>
+      )}
+
+      {entry.type === "directory" && isOpen && entry.children && (
+        <div>
+          {entry.children.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              onSelect={onSelect}
+              sessionId={sessionId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FileExplorer({ sessionId, isVisible, onToggle, onPreviewFile }: FileExplorerProps) {
+  const [tree, setTree] = useState<FileEntry[]>([]);
+  const [workspace, setWorkspace] = useState("");
+  const [loadingTree, setLoadingTree] = useState(false);
+
+  useEffect(() => {
+    if (!sessionId || !isVisible) return;
+
+    const controller = new AbortController();
+    setLoadingTree(true);
+
+    fetch(`/api/sessions/${encodeURIComponent(sessionId)}/files`, {
+      signal: controller.signal,
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => {
+        setTree(data.tree || []);
+        setWorkspace(data.workspace || "");
+      })
+      .catch((err) => {
+        if (err.name !== "AbortError") {
+          console.error("Failed to load file tree:", err);
+        }
+      })
+      .finally(() => setLoadingTree(false));
+
+    return () => controller.abort();
+  }, [sessionId, isVisible]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="w-96 border-l border-gray-200 flex flex-col bg-white shrink-0">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-gray-200 flex items-center justify-between">
+        <h3 className="text-xs font-semibold text-gray-600 uppercase">Files</h3>
+        <button
+          onClick={onToggle}
+          className="text-xs text-gray-400 hover:text-gray-600"
+        >
+          Close
+        </button>
+      </div>
+
+      {/* Workspace path */}
+      <div className="px-3 py-1 text-[10px] text-gray-400 truncate border-b border-gray-100">
+        {workspace}
+      </div>
+
+      {/* Tree */}
+      <div role="list" aria-label="File explorer" className="flex-1 overflow-y-auto p-1.5">
+        {loadingTree ? (
+          <div className="text-xs text-gray-400 text-center mt-4">
+            Loading...
+          </div>
+        ) : tree.length === 0 ? (
+          <div className="text-xs text-gray-400 text-center mt-4">
+            No files found
+          </div>
+        ) : (
+          tree.map((entry) => (
+            <FileTreeNode
+              key={entry.path}
+              entry={entry}
+              depth={0}
+              onSelect={onPreviewFile}
+              sessionId={sessionId!}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/client/components/FilePreviewModal.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from "react";
+
+interface FilePreviewModalProps {
+  sessionId: string;
+  filePath: string; // relative path from workspace
+  onClose: () => void;
+}
+
+const IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "webp", "svg"];
+
+/** Reject paths containing ".." traversal segments; strip "." */
+function sanitizePath(p: string): string | null {
+  const segs = p.split("/").filter((s) => s !== "" && s !== ".");
+  if (segs.some((s) => s === "..")) return null; // reject traversal
+  return segs.join("/");
+}
+
+export function FilePreviewModal({ sessionId, filePath, onClose }: FilePreviewModalProps) {
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [fileType, setFileType] = useState<"image" | "pdf" | "audio" | "video" | "text" | "binary">("text");
+
+  const safePath = sanitizePath(filePath);
+
+  // Reject traversal paths immediately
+  if (!safePath) {
+    return (
+      <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-6" onClick={onClose}>
+        <div role="dialog" aria-modal="true" className="bg-white rounded-xl shadow-2xl p-8 text-center">
+          <p className="text-red-600 font-medium">Invalid file path (traversal rejected)</p>
+          <button onClick={onClose} className="mt-4 px-4 py-2 bg-gray-200 rounded-lg text-sm">Close</button>
+        </div>
+      </div>
+    );
+  }
+
+  const ext = safePath.split(".").pop()?.toLowerCase() || "";
+  const encodedPath = safePath.split("/").map(encodeURIComponent).join("/");
+  const fileUrl = `/api/sessions/${encodeURIComponent(sessionId)}/files/${encodedPath}`;
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const load = async () => {
+      setLoading(true);
+
+      if (IMAGE_EXTS.includes(ext)) {
+        setFileType("image");
+        setContent(fileUrl);
+        setLoading(false);
+        return;
+      }
+
+      if (ext === "pdf") {
+        setFileType("pdf");
+        setContent(fileUrl);
+        setLoading(false);
+        return;
+      }
+
+      if (["mp3", "wav", "m4a", "ogg"].includes(ext)) {
+        setFileType("audio");
+        setContent(fileUrl);
+        setLoading(false);
+        return;
+      }
+
+      if (["mp4", "webm"].includes(ext)) {
+        setFileType("video");
+        setContent(fileUrl);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const res = await fetch(fileUrl, { signal: controller.signal });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          setFileType("text");
+          setContent(`[Error: ${err.error || res.statusText}]`);
+          setLoading(false);
+          return;
+        }
+        if (res.headers.get("content-type")?.includes("json")) {
+          const data = await res.json();
+          setFileType("text");
+          setContent(data.content ?? "[No content]");
+        } else {
+          setFileType("binary");
+          setContent(fileUrl);
+        }
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setFileType("text");
+        setContent("[Error loading file]");
+      }
+      setLoading(false);
+    };
+
+    load();
+    return () => controller.abort();
+  }, [sessionId, filePath]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+
+  const fileName = safePath.split("/").pop() || safePath;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-6"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div role="dialog" aria-modal="true" aria-label={fileName} className="bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[90vh] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="px-4 py-3 border-b border-gray-200 flex items-center justify-between shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-xs font-mono px-2 py-0.5 rounded bg-gray-100 text-gray-500 uppercase shrink-0">
+              {ext}
+            </span>
+            <span className="text-sm font-medium text-gray-700 truncate">{fileName}</span>
+            <span className="text-xs text-gray-400 truncate hidden sm:inline">{safePath}</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 text-lg px-2 shrink-0"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="text-center text-gray-400 py-16">Loading...</div>
+          ) : fileType === "image" ? (
+            <div className="flex items-center justify-center p-6 bg-gray-50">
+              <img
+                src={content!}
+                alt={fileName}
+                className="max-w-full max-h-[75vh] rounded shadow-lg"
+              />
+            </div>
+          ) : fileType === "pdf" ? (
+            <iframe src={content!} className="w-full h-[80vh]" title={fileName} />
+          ) : fileType === "audio" ? (
+            <div className="flex items-center justify-center p-12">
+              <audio controls src={content!} className="w-full max-w-lg" />
+            </div>
+          ) : fileType === "video" ? (
+            <div className="flex items-center justify-center p-6 bg-black">
+              <video controls src={content!} className="max-w-full max-h-[75vh]" />
+            </div>
+          ) : fileType === "binary" ? (
+            <div className="text-center py-16">
+              <p className="text-gray-500 mb-3">Binary file — preview not available</p>
+              <a
+                href={content!}
+                download={fileName}
+                className="inline-flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 text-sm"
+              >
+                Download {fileName}
+              </a>
+            </div>
+          ) : (
+            <pre className="text-sm text-gray-700 whitespace-pre-wrap break-words font-mono p-6 leading-relaxed">
+              {content}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}