claudeship 0.2.8 → 0.2.10

package/apps/web/package.json

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState, useRef, useCallback } from "react";
-import { Play, Square, RefreshCw, ExternalLink, Package, Loader2, Zap } from "lucide-react";
+import { Play, Square, RefreshCw, ExternalLink, Package, Loader2, Zap, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { usePreviewStore } from "@/stores/usePreviewStore";
 import { useTranslation } from "@/lib/i18n";
@@ -27,6 +27,7 @@ export function PreviewPanel({ projectId }: PreviewPanelProps) {
     projectReady,
     startPreview,
     stopPreview,
+    restartPreview,
     refreshPreview,
     fetchStatus,
     checkProjectReady,
@@ -187,6 +188,7 @@ export function PreviewPanel({ projectId }: PreviewPanelProps) {
 
   const handleStart = () => startPreview(projectId);
   const handleStop = () => stopPreview(projectId);
+  const handleRestart = () => restartPreview(projectId);
   const handleRefresh = () => refreshPreview();
   const handleOpenExternal = () => {
     if (url) {
@@ -243,14 +245,26 @@ export function PreviewPanel({ projectId }: PreviewPanelProps) {
                 onClick={handleRefresh}
                 disabled={isLoading}
                 className="h-8 w-8 p-0"
+                title="Refresh"
               >
                 <RefreshCw className="h-4 w-4" />
               </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRestart}
+                disabled={isLoading}
+                className="h-8 w-8 p-0"
+                title="Restart server"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </Button>
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={handleOpenExternal}
                 className="h-8 w-8 p-0"
+                title="Open in new tab"
               >
                 <ExternalLink className="h-4 w-4" />
               </Button>
@@ -260,6 +274,7 @@ export function PreviewPanel({ projectId }: PreviewPanelProps) {
                 onClick={handleStop}
                 disabled={isLoading}
                 className="h-8 w-8 p-0"
+                title="Stop"
               >
                 <Square className="h-4 w-4" />
               </Button>

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

@@ -57,18 +57,18 @@ export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
         </div>
       )}
 
-      {/* Chat Panel */}
+      {/* Chat Panel - 30% width */}
       <div
-        className="border-r flex-1"
-        style={{ maxWidth: showFileExplorer ? "calc(50% - 8rem)" : "50%" }}
+        className="border-r flex-shrink-0"
+        style={{ width: showFileExplorer ? "calc(30% - 8rem)" : "30%" }}
       >
         <ChatPanel projectId={projectId} />
       </div>
 
-      {/* Preview Panel */}
+      {/* Preview Panel - 70% width */}
       <div
         className="flex-1"
-        style={{ maxWidth: showFileExplorer ? "calc(50% - 8rem)" : "50%" }}
+        style={{ width: showFileExplorer ? "calc(70%)" : "70%" }}
       >
         <PreviewPanel projectId={projectId} />
       </div>

package/apps/web/src/stores/usePreviewStore.ts

@@ -36,6 +36,7 @@ interface PreviewState {
 
   startPreview: (projectId: string) => Promise<void>;
   stopPreview: (projectId: string) => Promise<void>;
+  restartPreview: (projectId: string) => Promise<void>;
   refreshPreview: () => void;
   fetchStatus: (projectId: string) => Promise<void>;
   checkProjectReady: (projectId: string) => Promise<void>;
@@ -92,6 +93,27 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
     }
   },
 
+  restartPreview: async (projectId: string) => {
+    set({ isLoading: true, error: null, status: "starting" });
+    try {
+      const result = await api.post<PreviewStatus>(
+        `/projects/${projectId}/preview/restart`
+      );
+      set({
+        status: result.status,
+        url: result.url || null,
+        isLoading: false,
+      });
+    } catch (error) {
+      set({
+        error:
+          error instanceof Error ? error.message : "Failed to restart preview",
+        status: "error",
+        isLoading: false,
+      });
+    }
+  },
+
   refreshPreview: () => {
     const currentUrl = get().url;
     if (currentUrl) {

package/package.json

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