jigsaw_engine 0.4.0

data/app/javascript/seeds/ide-editor/render.jsx

@@ -0,0 +1,132 @@
+import React, { useRef } from "react"
+import { createRoot } from "react-dom/client"
+import MonacoEditor from "@monaco-editor/react"
+import { X } from "lucide-react"
+
+function Editor({
+  openFiles,
+  activeFile,
+  fileContents,
+  closeFile,
+  setActiveFile,
+  updateFileContent
+}) {
+
+  const editorRef = useRef(null)
+
+  const handleEditorChange = async (value) => {
+    if (!activeFile || value === undefined) return
+
+    updateFileContent(activeFile, value)
+
+    // Auto-save to WebContainer
+    try {
+      await window.__wc.fs.writeFile(activeFile, value)
+    } catch (error) {
+      console.error("Failed to write file:", error)
+    }
+  }
+
+  const getLanguage = (filename) => {
+    const ext = filename.split(".").pop()?.toLowerCase()
+    const languageMap = {
+      yml: "yaml",
+      yaml: "yaml",
+      rb: "ruby",
+      js: "javascript",
+      jsx: "javascript",
+      ts: "typescript",
+      tsx: "typescript",
+      json: "json",
+      html: "html",
+      css: "css",
+      md: "markdown",
+    }
+    return languageMap[ext || ""] || "plaintext"
+  }
+
+  return (
+    <div className="tw-h-full tw-flex tw-flex-col tw-bg-gray-900">
+      {/* Tabs */}
+      <div className="tw-flex tw-items-center tw-bg-gray-800 tw-border-b tw-border-gray-700 tw-overflow-x-auto">
+        {openFiles.length === 0 ? (
+          <div className="tw-flex-1 tw-flex tw-items-center tw-justify-center tw-text-gray-500 tw-py-8">
+            <p>No file open. Select a file from the file tree.</p>
+          </div>
+        ) : (
+          openFiles.map((file) => (
+            <div
+              key={file}
+              className={`tw-flex tw-items-center tw-gap-2 tw-px-4 tw-py-2 tw-border-r tw-border-gray-700 tw-cursor-pointer ${
+                activeFile === file ? "tw-bg-gray-900 tw-text-white" : "tw-bg-gray-800 tw-text-gray-400"
+              }`}
+              onClick={() => setActiveFile(file)}
+            >
+              <span className="tw-text-sm tw-whitespace-nowrap">{file.split("/").pop()}</span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  closeFile(file)
+                }}
+                className="hover:tw-bg-gray-700 tw-rounded tw-p-0.5"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Editor */}
+      <div className="tw-flex-1">
+        {activeFile && (
+          <MonacoEditor
+            height="100%"
+            language={getLanguage(activeFile)}
+            value={fileContents[activeFile] || ""}
+            onChange={handleEditorChange}
+            theme="vs-dark"
+            options={{
+              minimap: { enabled: false },
+              fontSize: 14,
+              lineNumbers: "on",
+              automaticLayout: true,
+              tabSize: 2,
+            }}
+            onMount={(editor) => {
+              editorRef.current = editor
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function(data) {
+  console.log("[editor] render called", data)
+  if (!this._root) this._root = createRoot(this.element)
+  this._root.render(
+    <Editor
+      openFiles={data.openFiles}
+      activeFile={data.activeFile}
+      fileContents={data.fileContents}
+      setActiveFile={(path) => {
+        data._shared.editor.proxy.activeFile = path
+      }}
+      closeFile={(path) => {
+        const p = data._shared.editor.proxy
+        const newOpen = (p.openFiles || []).filter((f) => f !== path)
+        const newContents = { ...(p.fileContents || {}) }
+        delete newContents[path]
+        p.openFiles = newOpen
+        p.fileContents = newContents
+        p.activeFile = p.activeFile === path ? newOpen[0] || null : p.activeFile
+      }}
+      updateFileContent={(path, content) => {
+        const p = data._shared.editor.proxy
+        p.fileContents = { ...(p.fileContents || {}), [path]: content }
+      }}
+    />
+  )
+}

data/app/javascript/seeds/ide-file-tree/config.json

@@ -0,0 +1,4 @@
+{
+  "shares": ["wc", "editor"],
+  "resizable": true
+}

data/app/javascript/seeds/ide-file-tree/data.js

@@ -0,0 +1,50 @@
+import { WebContainer } from "@webcontainer/api"
+
+async function buildFileTree(container, path = ".") {
+  const entries = await container.fs.readdir(path, { withFileTypes: true })
+  const nodes = []
+  for (const entry of entries) {
+    if (entry.name === "node_modules" || entry.name === ".git") continue
+    const fullPath = path === "." ? entry.name : path + "/" + entry.name
+    if (entry.isDirectory()) {
+      nodes.push({ name: entry.name, path: fullPath, type: "directory", children: await buildFileTree(container, fullPath) })
+    } else {
+      nodes.push({ name: entry.name, path: fullPath, type: "file" })
+    }
+  }
+  return nodes.sort((a, b) => {
+    if (a.type === b.type) return a.name.localeCompare(b.name)
+    return a.type === "directory" ? -1 : 1
+  })
+}
+
+export default async function(shared, config) {
+  console.log("[filetree] data_source called")
+  const wc = shared.wc.proxy
+  const editor = shared.editor.proxy
+
+  if (!window.__wc && !window.__wcBooting) {
+    try {
+      window.__wcBooting = true
+      console.log("[filetree] booting WebContainer...")
+      wc.status = "booting"
+      const container = await WebContainer.boot()
+      window.__wc = container
+      console.log("[filetree] WebContainer booted", container)
+      wc.status = "ready"
+      console.log("[filetree] building file tree...")
+      wc.fileTree = await buildFileTree(container)
+      console.log("[filetree] file tree built", wc.fileTree)
+    } catch (err) {
+      console.error("[filetree] ERROR during boot:", err)
+      wc.status = "error"
+    }
+  }
+
+  console.log("[filetree] returning data", { tree: wc.fileTree, activeFile: editor.activeFile })
+  return {
+    tree: wc.fileTree || [],
+    activeFile: editor.activeFile,
+    _shared: shared,
+  }
+}

data/app/javascript/seeds/ide-file-tree/render.jsx

@@ -0,0 +1,426 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+import {
+  ChevronRight,
+  ChevronDown,
+  File,
+  Folder,
+  FolderOpen,
+  FilePlus,
+  FolderPlus,
+  Trash2,
+} from "lucide-react"
+import * as ContextMenu from "@radix-ui/react-context-menu"
+import * as Dialog from "@radix-ui/react-dialog"
+
+function FileTreeItem({ node, level, activeFile, onOpenFile, onRefresh }) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [showNewFileDialog, setShowNewFileDialog] = useState(false)
+  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false)
+  const [newItemName, setNewItemName] = useState("")
+
+  const handleClick = async () => {
+    if (node.type === "directory") {
+      setIsExpanded(!isExpanded)
+    } else {
+      try {
+        const content = await window.__wc.fs.readFile(node.path, "utf-8")
+        onOpenFile(node.path, content)
+      } catch (error) {
+        console.error("Failed to read file:", error)
+      }
+    }
+  }
+
+  const refreshFileTree = async () => {
+    onRefresh()
+  }
+
+  const handleCreateFile = async () => {
+    if (!newItemName.trim()) return
+    const newPath =
+      node.type === "directory" ? `${node.path}/${newItemName}` : `${node.path}/../${newItemName}`
+    try {
+      await window.__wc.fs.writeFile(newPath, "")
+      await refreshFileTree()
+      setShowNewFileDialog(false)
+      setNewItemName("")
+    } catch (error) {
+      console.error("Failed to create file:", error)
+    }
+  }
+
+  const handleCreateFolder = async () => {
+    if (!newItemName.trim()) return
+    const newPath =
+      node.type === "directory" ? `${node.path}/${newItemName}` : `${node.path}/../${newItemName}`
+    try {
+      await window.__wc.fs.mkdir(newPath, { recursive: true })
+      await refreshFileTree()
+      setShowNewFolderDialog(false)
+      setNewItemName("")
+    } catch (error) {
+      console.error("Failed to create folder:", error)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm(`Are you sure you want to delete ${node.name}?`)) return
+    try {
+      await window.__wc.fs.rm(node.path, { recursive: true })
+      await refreshFileTree()
+    } catch (error) {
+      console.error("Failed to delete:", error)
+    }
+  }
+
+  const isActive = activeFile === node.path
+
+  return (
+    <div>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger asChild>
+          <div
+            className={`tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-cursor-pointer hover:tw-bg-gray-700 ${
+              isActive ? "tw-bg-blue-600" : ""
+            }`}
+            style={{ paddingLeft: `${level * 12 + 8}px` }}
+            onClick={handleClick}
+          >
+            {node.type === "directory" ? (
+              <>
+                {isExpanded ? (
+                  <ChevronDown size={16} className="tw-text-gray-400 tw-flex-shrink-0" />
+                ) : (
+                  <ChevronRight size={16} className="tw-text-gray-400 tw-flex-shrink-0" />
+                )}
+                {isExpanded ? (
+                  <FolderOpen size={16} className="tw-text-blue-400 tw-flex-shrink-0" />
+                ) : (
+                  <Folder size={16} className="tw-text-blue-400 tw-flex-shrink-0" />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="tw-w-4 tw-flex-shrink-0" />
+                <File size={16} className="tw-text-gray-400 tw-flex-shrink-0" />
+              </>
+            )}
+            <span className="tw-text-sm tw-text-gray-200 tw-truncate">{node.name}</span>
+          </div>
+        </ContextMenu.Trigger>
+
+        <ContextMenu.Portal>
+          <ContextMenu.Content className="tw-min-w-[180px] tw-bg-gray-800 tw-rounded-md tw-overflow-hidden tw-p-1 tw-shadow-lg tw-border tw-border-gray-700">
+            <ContextMenu.Item
+              className="tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1.5 tw-text-sm tw-text-gray-200 tw-cursor-pointer hover:tw-bg-gray-700 tw-rounded tw-outline-none"
+              onClick={() => setShowNewFileDialog(true)}
+            >
+              <FilePlus size={16} />
+              New File
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              className="tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1.5 tw-text-sm tw-text-gray-200 tw-cursor-pointer hover:tw-bg-gray-700 tw-rounded tw-outline-none"
+              onClick={() => setShowNewFolderDialog(true)}
+            >
+              <FolderPlus size={16} />
+              New Folder
+            </ContextMenu.Item>
+            <ContextMenu.Separator className="tw-h-[1px] tw-bg-gray-700 tw-my-1" />
+            <ContextMenu.Item
+              className="tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1.5 tw-text-sm tw-text-red-400 tw-cursor-pointer hover:tw-bg-gray-700 tw-rounded tw-outline-none"
+              onClick={handleDelete}
+            >
+              <Trash2 size={16} />
+              Delete
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+
+      <Dialog.Root open={showNewFileDialog} onOpenChange={setShowNewFileDialog}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="tw-fixed tw-inset-0 tw-bg-black/50" style={{ zIndex: 9998 }} />
+          <Dialog.Content className="tw-fixed tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-bg-gray-800 tw-rounded-lg tw-p-6 tw-w-96 tw-shadow-xl" style={{ zIndex: 9999 }}>
+            <Dialog.Title className="tw-text-lg tw-font-semibold tw-text-white tw-mb-4">
+              New File
+            </Dialog.Title>
+            <Dialog.Description className="tw-sr-only">Enter a name for the new file</Dialog.Description>
+            <input
+              type="text"
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFile()}
+              placeholder="filename.txt"
+              className="tw-w-full tw-px-3 tw-py-2 tw-bg-gray-900 tw-text-white tw-rounded tw-border tw-border-gray-700 focus:tw-border-blue-500 tw-outline-none"
+              autoFocus
+            />
+            <div className="tw-flex tw-justify-end tw-gap-2 tw-mt-4">
+              <button
+                onClick={() => setShowNewFileDialog(false)}
+                className="tw-px-4 tw-py-2 tw-text-gray-400 hover:tw-text-white"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateFile}
+                className="tw-px-4 tw-py-2 tw-bg-blue-600 tw-text-white tw-rounded hover:tw-bg-blue-700"
+              >
+                Create
+              </button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
+      <Dialog.Root open={showNewFolderDialog} onOpenChange={setShowNewFolderDialog}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="tw-fixed tw-inset-0 tw-bg-black/50" style={{ zIndex: 9998 }} />
+          <Dialog.Content className="tw-fixed tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-bg-gray-800 tw-rounded-lg tw-p-6 tw-w-96 tw-shadow-xl" style={{ zIndex: 9999 }}>
+            <Dialog.Title className="tw-text-lg tw-font-semibold tw-text-white tw-mb-4">
+              New Folder
+            </Dialog.Title>
+            <Dialog.Description className="tw-sr-only">Enter a name for the new folder</Dialog.Description>
+            <input
+              type="text"
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
+              placeholder="folder-name"
+              className="tw-w-full tw-px-3 tw-py-2 tw-bg-gray-900 tw-text-white tw-rounded tw-border tw-border-gray-700 focus:tw-border-blue-500 tw-outline-none"
+              autoFocus
+            />
+            <div className="tw-flex tw-justify-end tw-gap-2 tw-mt-4">
+              <button
+                onClick={() => setShowNewFolderDialog(false)}
+                className="tw-px-4 tw-py-2 tw-text-gray-400 hover:tw-text-white"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateFolder}
+                className="tw-px-4 tw-py-2 tw-bg-blue-600 tw-text-white tw-rounded hover:tw-bg-blue-700"
+              >
+                Create
+              </button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
+      {node.type === "directory" && isExpanded && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <FileTreeItem
+              key={child.path}
+              node={child}
+              level={level + 1}
+              activeFile={activeFile}
+              onOpenFile={onOpenFile}
+              onRefresh={onRefresh}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function FileTree({ tree, activeFile, onOpenFile, onRefresh }) {
+  const [showNewFileDialog, setShowNewFileDialog] = useState(false)
+  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false)
+  const [newItemName, setNewItemName] = useState("")
+
+  const handleCreateFile = async () => {
+    if (!newItemName.trim()) return
+    try {
+      await window.__wc.fs.writeFile(newItemName, "")
+      onRefresh()
+      setShowNewFileDialog(false)
+      setNewItemName("")
+    } catch (error) {
+      console.error("Failed to create file:", error)
+    }
+  }
+
+  const handleCreateFolder = async () => {
+    if (!newItemName.trim()) return
+    try {
+      await window.__wc.fs.mkdir(newItemName, { recursive: true })
+      onRefresh()
+      setShowNewFolderDialog(false)
+      setNewItemName("")
+    } catch (error) {
+      console.error("Failed to create folder:", error)
+    }
+  }
+
+  return (
+    <div className="tw-h-full tw-bg-gray-800 tw-overflow-auto">
+      <ContextMenu.Root>
+        <ContextMenu.Trigger asChild>
+          <div className="tw-h-full">
+            <div className="tw-p-2 tw-border-b tw-border-gray-700 tw-flex tw-items-center tw-justify-between">
+              <h3 className="tw-text-sm tw-font-semibold tw-text-gray-300">FILES</h3>
+              <div className="tw-flex tw-gap-1">
+                <button
+                  onClick={() => setShowNewFileDialog(true)}
+                  className="tw-p-1 hover:tw-bg-gray-700 tw-rounded"
+                  title="New File"
+                >
+                  <FilePlus size={16} className="tw-text-gray-400" />
+                </button>
+                <button
+                  onClick={() => setShowNewFolderDialog(true)}
+                  className="tw-p-1 hover:tw-bg-gray-700 tw-rounded"
+                  title="New Folder"
+                >
+                  <FolderPlus size={16} className="tw-text-gray-400" />
+                </button>
+              </div>
+            </div>
+            <div className="tw-py-1">
+              {tree.map((node) => (
+                <FileTreeItem
+                  key={node.path}
+                  node={node}
+                  level={0}
+                  activeFile={activeFile}
+                  onOpenFile={onOpenFile}
+                  onRefresh={onRefresh}
+                />
+              ))}
+            </div>
+          </div>
+        </ContextMenu.Trigger>
+
+        <ContextMenu.Portal>
+          <ContextMenu.Content className="tw-min-w-[180px] tw-bg-gray-800 tw-rounded-md tw-overflow-hidden tw-p-1 tw-shadow-lg tw-border tw-border-gray-700">
+            <ContextMenu.Item
+              className="tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1.5 tw-text-sm tw-text-gray-200 tw-cursor-pointer hover:tw-bg-gray-700 tw-rounded tw-outline-none"
+              onClick={() => setShowNewFileDialog(true)}
+            >
+              <FilePlus size={16} />
+              New File
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              className="tw-flex tw-items-center tw-gap-2 tw-px-2 tw-py-1.5 tw-text-sm tw-text-gray-200 tw-cursor-pointer hover:tw-bg-gray-700 tw-rounded tw-outline-none"
+              onClick={() => setShowNewFolderDialog(true)}
+            >
+              <FolderPlus size={16} />
+              New Folder
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+
+      <Dialog.Root open={showNewFileDialog} onOpenChange={setShowNewFileDialog}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="tw-fixed tw-inset-0 tw-bg-black/50" style={{ zIndex: 9998 }} />
+          <Dialog.Content className="tw-fixed tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-bg-gray-800 tw-rounded-lg tw-p-6 tw-w-96 tw-shadow-xl" style={{ zIndex: 9999 }}>
+            <Dialog.Title className="tw-text-lg tw-font-semibold tw-text-white tw-mb-4">
+              New File
+            </Dialog.Title>
+            <Dialog.Description className="tw-sr-only">Enter a name for the new file</Dialog.Description>
+            <input
+              type="text"
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFile()}
+              placeholder="filename.txt"
+              className="tw-w-full tw-px-3 tw-py-2 tw-bg-gray-900 tw-text-white tw-rounded tw-border tw-border-gray-700 focus:tw-border-blue-500 tw-outline-none"
+              autoFocus
+            />
+            <div className="tw-flex tw-justify-end tw-gap-2 tw-mt-4">
+              <button
+                onClick={() => setShowNewFileDialog(false)}
+                className="tw-px-4 tw-py-2 tw-text-gray-400 hover:tw-text-white"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateFile}
+                className="tw-px-4 tw-py-2 tw-bg-blue-600 tw-text-white tw-rounded hover:tw-bg-blue-700"
+              >
+                Create
+              </button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
+      <Dialog.Root open={showNewFolderDialog} onOpenChange={setShowNewFolderDialog}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="tw-fixed tw-inset-0 tw-bg-black/50" style={{ zIndex: 9998 }} />
+          <Dialog.Content className="tw-fixed tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-bg-gray-800 tw-rounded-lg tw-p-6 tw-w-96 tw-shadow-xl" style={{ zIndex: 9999 }}>
+            <Dialog.Title className="tw-text-lg tw-font-semibold tw-text-white tw-mb-4">
+              New Folder
+            </Dialog.Title>
+            <Dialog.Description className="tw-sr-only">Enter a name for the new folder</Dialog.Description>
+            <input
+              type="text"
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
+              placeholder="folder-name"
+              className="tw-w-full tw-px-3 tw-py-2 tw-bg-gray-900 tw-text-white tw-rounded tw-border tw-border-gray-700 focus:tw-border-blue-500 tw-outline-none"
+              autoFocus
+            />
+            <div className="tw-flex tw-justify-end tw-gap-2 tw-mt-4">
+              <button
+                onClick={() => setShowNewFolderDialog(false)}
+                className="tw-px-4 tw-py-2 tw-text-gray-400 hover:tw-text-white"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateFolder}
+                className="tw-px-4 tw-py-2 tw-bg-blue-600 tw-text-white tw-rounded hover:tw-bg-blue-700"
+              >
+                Create
+              </button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  )
+}
+
+export default function(data) {
+  console.log("[filetree] render called", data)
+  if (!this._root) this._root = createRoot(this.element)
+
+  const rebuildTree = async () => {
+    if (!window.__wc) return
+    async function build(container, path = ".") {
+      const entries = await container.fs.readdir(path, { withFileTypes: true })
+      const nodes = []
+      for (const entry of entries) {
+        if (entry.name === "node_modules" || entry.name === ".git") continue
+        const fullPath = path === "." ? entry.name : path + "/" + entry.name
+        if (entry.isDirectory()) {
+          nodes.push({ name: entry.name, path: fullPath, type: "directory", children: await build(container, fullPath) })
+        } else {
+          nodes.push({ name: entry.name, path: fullPath, type: "file" })
+        }
+      }
+      return nodes.sort((a, b) => a.type === b.type ? a.name.localeCompare(b.name) : a.type === "directory" ? -1 : 1)
+    }
+    data._shared.wc.proxy.fileTree = await build(window.__wc)
+  }
+
+  this._root.render(
+    <FileTree
+      tree={data.tree || []}
+      activeFile={data.activeFile}
+      onOpenFile={async (path, content) => {
+        const p = data._shared.editor.proxy
+        p.openFiles = [...new Set([...(p.openFiles || []), path])]
+        p.activeFile = path
+        p.fileContents = { ...(p.fileContents || {}), [path]: content }
+      }}
+      onRefresh={rebuildTree}
+    />
+  )
+}

data/app/javascript/seeds/ide-preview/config.json

@@ -0,0 +1,4 @@
+{
+  "shares": ["wc"],
+  "resizable": true
+}

data/app/javascript/seeds/ide-preview/data.js

@@ -0,0 +1,4 @@
+export default async function(shared, config) {
+  console.log("[preview] data_source called", { previewUrl: shared.wc.proxy.previewUrl })
+  return { previewUrl: shared.wc.proxy.previewUrl || null }
+}

data/app/javascript/seeds/ide-preview/render.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { RefreshCw } from "lucide-react"
+
+function Preview({ previewUrl }) {
+  const [key, setKey] = React.useState(0)
+
+  const handleRefresh = () => {
+    setKey((prev) => prev + 1)
+  }
+
+  return (
+    <div className="tw-h-full tw-flex tw-flex-col tw-bg-gray-900">
+      <div className="tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-bg-gray-800 tw-border-b tw-border-gray-700">
+        <h3 className="tw-text-sm tw-font-semibold tw-text-gray-300">PREVIEW</h3>
+        {previewUrl && (
+          <button
+            onClick={handleRefresh}
+            className="tw-p-1 hover:tw-bg-gray-700 tw-rounded"
+            title="Refresh preview"
+          >
+            <RefreshCw size={16} className="tw-text-gray-400" />
+          </button>
+        )}
+      </div>
+      <div className="tw-flex-1 tw-bg-white">
+        {previewUrl ? (
+          <iframe
+            key={key}
+            src={previewUrl}
+            className="tw-w-full tw-h-full tw-border-0"
+            title="Preview"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
+          />
+        ) : (
+          <div className="tw-flex tw-items-center tw-justify-center tw-h-full tw-text-gray-500">
+            <p>Starting dev server...</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function(data) {
+  console.log("[preview] render called", data)
+  if (!this._root) this._root = createRoot(this.element)
+  this._root.render(<Preview previewUrl={data.previewUrl} />)
+}

data/app/javascript/seeds/ide-terminal/config.json

@@ -0,0 +1,4 @@
+{
+  "shares": ["wc"],
+  "resizable": true
+}

data/app/javascript/seeds/ide-terminal/data.js

@@ -0,0 +1,4 @@
+export default async function(shared, config) {
+  console.log("[terminal] data_source called", { status: shared.wc.proxy.status })
+  return { status: shared.wc.proxy.status || "waiting" }
+}