claudeship 0.2.14 → 0.2.15

package/apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudeship/web",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "private": true,
   "scripts": {
     "dev": "node scripts/dev-with-recovery.mjs",

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/package.json

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