claudeship 0.2.12 → 0.2.15

package/apps/web/src/components/visual-editor/VisualEditor.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { useEffect, useState, useRef, useCallback } from "react";
+import {
+  MousePointer2,
+  Move,
+  Maximize2,
+  Type,
+  Palette,
+  Box,
+  X,
+  RefreshCw,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface SelectedElement {
+  selector: string;
+  tagName: string;
+  className: string;
+  id: string;
+  styles: Record<string, string>;
+  rect: DOMRect;
+}
+
+interface VisualEditorProps {
+  projectId: string;
+  previewUrl: string;
+}
+
+const STYLE_CATEGORIES = {
+  layout: ["display", "position", "width", "height", "margin", "padding"],
+  typography: ["font-size", "font-weight", "color", "text-align", "line-height"],
+  background: ["background-color", "background-image", "opacity"],
+  border: ["border", "border-radius", "box-shadow"],
+};
+
+export function VisualEditor({ projectId, previewUrl }: VisualEditorProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<SelectedElement | null>(null);
+  const [hoveredRect, setHoveredRect] = useState<DOMRect | null>(null);
+  const [editedStyles, setEditedStyles] = useState<Record<string, string>>({});
+
+  // Inject editor script into iframe
+  const injectEditorScript = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) return;
+
+    const script = `
+      (function() {
+        if (window.__visualEditorInjected) return;
+        window.__visualEditorInjected = true;
+
+        let hoveredElement = null;
+        let selectedElement = null;
+        const overlay = document.createElement('div');
+        overlay.id = '__visual-editor-overlay';
+        overlay.style.cssText = 'position:fixed;pointer-events:none;z-index:99999;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s;display:none;';
+        document.body.appendChild(overlay);
+
+        const selectionOverlay = document.createElement('div');
+        selectionOverlay.id = '__visual-editor-selection';
+        selectionOverlay.style.cssText = 'position:fixed;pointer-events:none;z-index:99998;border:2px solid #10b981;background:rgba(16,185,129,0.1);display:none;';
+        document.body.appendChild(selectionOverlay);
+
+        function getSelector(el) {
+          if (el.id) return '#' + el.id;
+          if (el.className && typeof el.className === 'string') {
+            const classes = el.className.split(' ').filter(c => c && !c.startsWith('__'));
+            if (classes.length) return el.tagName.toLowerCase() + '.' + classes.join('.');
+          }
+          return el.tagName.toLowerCase();
+        }
+
+        function getStyles(el) {
+          const computed = window.getComputedStyle(el);
+          return {
+            'display': computed.display,
+            'position': computed.position,
+            'width': computed.width,
+            'height': computed.height,
+            'margin': computed.margin,
+            'padding': computed.padding,
+            'font-size': computed.fontSize,
+            'font-weight': computed.fontWeight,
+            'color': computed.color,
+            'text-align': computed.textAlign,
+            'line-height': computed.lineHeight,
+            'background-color': computed.backgroundColor,
+            'border': computed.border,
+            'border-radius': computed.borderRadius,
+            'box-shadow': computed.boxShadow,
+            'opacity': computed.opacity,
+          };
+        }
+
+        document.addEventListener('mousemove', function(e) {
+          if (!window.__visualEditorEnabled) return;
+
+          const el = document.elementFromPoint(e.clientX, e.clientY);
+          if (!el || el === overlay || el === selectionOverlay) return;
+          if (el === hoveredElement) return;
+
+          hoveredElement = el;
+          const rect = el.getBoundingClientRect();
+          overlay.style.display = 'block';
+          overlay.style.left = rect.left + 'px';
+          overlay.style.top = rect.top + 'px';
+          overlay.style.width = rect.width + 'px';
+          overlay.style.height = rect.height + 'px';
+
+          window.parent.postMessage({
+            type: 'visualEditor:hover',
+            rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
+          }, '*');
+        });
+
+        document.addEventListener('click', function(e) {
+          if (!window.__visualEditorEnabled) return;
+          e.preventDefault();
+          e.stopPropagation();
+
+          const el = document.elementFromPoint(e.clientX, e.clientY);
+          if (!el || el === overlay || el === selectionOverlay) return;
+
+          selectedElement = el;
+          const rect = el.getBoundingClientRect();
+          selectionOverlay.style.display = 'block';
+          selectionOverlay.style.left = rect.left + 'px';
+          selectionOverlay.style.top = rect.top + 'px';
+          selectionOverlay.style.width = rect.width + 'px';
+          selectionOverlay.style.height = rect.height + 'px';
+
+          window.parent.postMessage({
+            type: 'visualEditor:select',
+            element: {
+              selector: getSelector(el),
+              tagName: el.tagName.toLowerCase(),
+              className: el.className || '',
+              id: el.id || '',
+              styles: getStyles(el),
+              rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
+            }
+          }, '*');
+        }, true);
+
+        window.addEventListener('message', function(e) {
+          if (e.data.type === 'visualEditor:enable') {
+            window.__visualEditorEnabled = true;
+            document.body.style.cursor = 'crosshair';
+          } else if (e.data.type === 'visualEditor:disable') {
+            window.__visualEditorEnabled = false;
+            document.body.style.cursor = '';
+            overlay.style.display = 'none';
+            selectionOverlay.style.display = 'none';
+          } else if (e.data.type === 'visualEditor:updateStyle' && selectedElement) {
+            selectedElement.style[e.data.property] = e.data.value;
+          }
+        });
+      })();
+    `;
+
+    try {
+      const doc = iframe.contentDocument;
+      if (doc) {
+        // Remove existing script if any
+        const existing = doc.getElementById("__visual-editor-script");
+        if (existing) existing.remove();
+
+        const scriptEl = doc.createElement("script");
+        scriptEl.id = "__visual-editor-script";
+        scriptEl.textContent = script;
+        doc.body.appendChild(scriptEl);
+      }
+    } catch {
+      // Cross-origin - can't inject script
+      console.warn("Visual editor: Cannot inject script (cross-origin)");
+    }
+  }, []);
+
+  // Handle messages from iframe
+  useEffect(() => {
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data.type === "visualEditor:hover") {
+        setHoveredRect(e.data.rect);
+      } else if (e.data.type === "visualEditor:select") {
+        setSelectedElement(e.data.element);
+        setEditedStyles(e.data.element.styles);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  // Toggle editor mode
+  const toggleEditor = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) return;
+
+    if (!isEnabled) {
+      injectEditorScript();
+      iframe.contentWindow.postMessage({ type: "visualEditor:enable" }, "*");
+    } else {
+      iframe.contentWindow.postMessage({ type: "visualEditor:disable" }, "*");
+      setSelectedElement(null);
+      setHoveredRect(null);
+    }
+    setIsEnabled(!isEnabled);
+  }, [isEnabled, injectEditorScript]);
+
+  // Update style
+  const updateStyle = (property: string, value: string) => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow || !selectedElement) return;
+
+    setEditedStyles((prev) => ({ ...prev, [property]: value }));
+    iframe.contentWindow.postMessage(
+      { type: "visualEditor:updateStyle", property, value },
+      "*"
+    );
+  };
+
+  // Generate Tailwind classes (simplified)
+  const generateTailwindClass = (property: string, value: string): string => {
+    // This is a simplified version - full implementation would need more mappings
+    const mappings: Record<string, Record<string, string>> = {
+      display: { flex: "flex", grid: "grid", block: "block", none: "hidden" },
+      "text-align": { center: "text-center", left: "text-left", right: "text-right" },
+      "font-weight": { "700": "font-bold", "600": "font-semibold", "400": "font-normal" },
+    };
+
+    return mappings[property]?.[value] || "";
+  };
+
+  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 flex items-center gap-2">
+          <MousePointer2 className="h-4 w-4" />
+          Visual Editor
+        </h3>
+        <Button
+          variant={isEnabled ? "secondary" : "outline"}
+          size="sm"
+          onClick={toggleEditor}
+        >
+          {isEnabled ? "Disable" : "Enable"} Inspector
+        </Button>
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Preview */}
+        <div className="flex-1 bg-muted/30 relative">
+          <iframe
+            ref={iframeRef}
+            src={previewUrl}
+            className="w-full h-full border-0"
+            onLoad={injectEditorScript}
+          />
+          {isEnabled && (
+            <div className="absolute top-2 left-2 px-2 py-1 bg-blue-500 text-white text-xs rounded">
+              Inspector Mode
+            </div>
+          )}
+        </div>
+
+        {/* Style Panel */}
+        {selectedElement && (
+          <div className="w-72 border-l overflow-auto">
+            <div className="p-4 space-y-4">
+              {/* Element Info */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Selected Element</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setSelectedElement(null)}
+                    className="h-6 w-6 p-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+                <code className="block text-xs bg-muted p-2 rounded">
+                  {selectedElement.selector}
+                </code>
+              </div>
+
+              {/* Layout */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Box className="h-4 w-4" />
+                  Layout
+                </div>
+                {STYLE_CATEGORIES.layout.map((prop) => (
+                  <div key={prop} className="flex items-center gap-2">
+                    <label className="text-xs text-muted-foreground w-20 shrink-0">
+                      {prop}
+                    </label>
+                    <Input
+                      value={editedStyles[prop] || ""}
+                      onChange={(e) => updateStyle(prop, e.target.value)}
+                      className="h-7 text-xs font-mono"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* Typography */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Type className="h-4 w-4" />
+                  Typography
+                </div>
+                {STYLE_CATEGORIES.typography.map((prop) => (
+                  <div key={prop} className="flex items-center gap-2">
+                    <label className="text-xs text-muted-foreground w-20 shrink-0">
+                      {prop}
+                    </label>
+                    <Input
+                      value={editedStyles[prop] || ""}
+                      onChange={(e) => updateStyle(prop, e.target.value)}
+                      className="h-7 text-xs font-mono"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* Background */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Palette className="h-4 w-4" />
+                  Background
+                </div>
+                {STYLE_CATEGORIES.background.map((prop) => (
+                  <div key={prop} className="flex items-center gap-2">
+                    <label className="text-xs text-muted-foreground w-20 shrink-0">
+                      {prop}
+                    </label>
+                    <Input
+                      value={editedStyles[prop] || ""}
+                      onChange={(e) => updateStyle(prop, e.target.value)}
+                      className="h-7 text-xs font-mono"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* Border */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Maximize2 className="h-4 w-4" />
+                  Border
+                </div>
+                {STYLE_CATEGORIES.border.map((prop) => (
+                  <div key={prop} className="flex items-center gap-2">
+                    <label className="text-xs text-muted-foreground w-20 shrink-0">
+                      {prop}
+                    </label>
+                    <Input
+                      value={editedStyles[prop] || ""}
+                      onChange={(e) => updateStyle(prop, e.target.value)}
+                      className="h-7 text-xs font-mono"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* Note */}
+              <p className="text-xs text-muted-foreground mt-4">
+                Changes are preview only. Use the AI to update source code.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/workspace/WorkspaceLayout.tsx

@@ -5,7 +5,19 @@ import { ChatPanel } from "@/components/chat/ChatPanel";
 import { PreviewPanel } from "@/components/preview/PreviewPanel";
 import { FileExplorer } from "@/components/file/FileExplorer";
 import { FileViewer } from "@/components/file/FileViewer";
-import { FolderTree, X } from "lucide-react";
+import { DatabasePanel } from "@/components/database/DatabasePanel";
+import { TestRunner } from "@/components/testing/TestRunner";
+import { CheckpointPanel } from "@/components/checkpoint/CheckpointPanel";
+import { EnvPanel } from "@/components/env/EnvPanel";
+import {
+  FolderTree,
+  X,
+  Eye,
+  Database,
+  FlaskConical,
+  GitBranch,
+  Settings2,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/lib/i18n";
 
@@ -19,10 +31,21 @@ interface SelectedFile {
   extension: string;
 }
 
+type RightPanelTab = "preview" | "database" | "testing" | "checkpoint" | "env";
+
+const tabConfig: { id: RightPanelTab; icon: React.ReactNode; label: string }[] = [
+  { id: "preview", icon: <Eye className="h-4 w-4" />, label: "Preview" },
+  { id: "database", icon: <Database className="h-4 w-4" />, label: "Database" },
+  { id: "testing", icon: <FlaskConical className="h-4 w-4" />, label: "Testing" },
+  { id: "checkpoint", icon: <GitBranch className="h-4 w-4" />, label: "Checkpoint" },
+  { id: "env", icon: <Settings2 className="h-4 w-4" />, label: "Env" },
+];
+
 export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
   const { t } = useTranslation();
   const [showFileExplorer, setShowFileExplorer] = useState(false);
   const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null);
+  const [activeTab, setActiveTab] = useState<RightPanelTab>("preview");
 
   const handleFileSelect = (path: string, content: string) => {
     const extension = path.split(".").pop() || "";
@@ -33,6 +56,23 @@ export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
     setSelectedFile(null);
   };
 
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "preview":
+        return <PreviewPanel projectId={projectId} />;
+      case "database":
+        return <DatabasePanel projectId={projectId} />;
+      case "testing":
+        return <TestRunner projectId={projectId} />;
+      case "checkpoint":
+        return <CheckpointPanel projectId={projectId} />;
+      case "env":
+        return <EnvPanel projectId={projectId} />;
+      default:
+        return <PreviewPanel projectId={projectId} />;
+    }
+  };
+
   return (
     <div className="flex h-[calc(100vh-3.5rem)]">
       {/* File Explorer Toggle Button */}
@@ -65,12 +105,34 @@ export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
         <ChatPanel projectId={projectId} />
       </div>
 
-      {/* Preview Panel - 70% width */}
+      {/* Right Panel - 70% width */}
       <div
-        className="flex-1"
+        className="flex-1 flex flex-col"
         style={{ width: showFileExplorer ? "calc(70%)" : "70%" }}
       >
-        <PreviewPanel projectId={projectId} />
+        {/* Tab Bar */}
+        <div className="flex items-center border-b bg-muted/30 px-2">
+          {tabConfig.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === tab.id
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+              title={tab.label}
+            >
+              {tab.icon}
+              <span className="hidden lg:inline">{tab.label}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Tab Content */}
+        <div className="flex-1 overflow-hidden">
+          {renderTabContent()}
+        </div>
       </div>
 
       {/* File Viewer Modal */}

package/apps/web/src/lib/api.ts

@@ -46,8 +46,11 @@ export const api = {
       method: "PUT",
       body: data ? JSON.stringify(data) : undefined,
     }),
-  delete: <T>(endpoint: string) =>
-    request<T>(endpoint, { method: "DELETE" }),
+  delete: <T>(endpoint: string, data?: unknown) =>
+    request<T>(endpoint, {
+      method: "DELETE",
+      body: data ? JSON.stringify(data) : undefined,
+    }),
 
   uploadFiles: async (
     projectId: string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeship",
-  "version": "0.2.12",
+  "version": "0.2.15",
   "description": "AI-Powered App Builder using Claude Code CLI",
   "bin": {
     "claudeship": "./bin/claudeship.js"