claudeship 0.2.9 → 0.2.11

package/apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudeship/web",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "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/useChatStore.ts

@@ -1,6 +1,12 @@
 import { create } from "zustand";
 import { api, type UploadedFile } from "@/lib/api";
 import { Role, type ChatMessage, type StreamEvent, type ChatMode, type AskUserQuestionData } from "@claudeship/shared";
+import { usePreviewStore } from "./usePreviewStore";
+
+// Marker detection constants
+const RESTART_MARKER_REGEX = /<restart-preview\s*\/>/g;
+const RESTART_DEBOUNCE_MS = 3000;
+let lastRestartTime = 0;
 
 export interface AttachedFile {
   id: string;
@@ -452,15 +458,34 @@ export const useChatStore = create<ChatState>((set, get) => ({
               console.log("[SSE Event]", data.type, data);
 
               if (data.type === "text" && data.content) {
-                // Add text block
-                const textBlock: StreamingBlock = {
-                  id: `text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-                  type: "text",
-                  content: data.content,
-                };
-                set((state) => ({
-                  streamingBlocks: [...state.streamingBlocks, textBlock],
-                }));
+                // Check for restart-preview marker
+                const hasRestartMarker = RESTART_MARKER_REGEX.test(data.content);
+                // Reset regex lastIndex after test()
+                RESTART_MARKER_REGEX.lastIndex = 0;
+
+                // Filter out the marker from content
+                const filteredContent = data.content.replace(RESTART_MARKER_REGEX, '').trim();
+
+                // Trigger preview restart with debouncing
+                if (hasRestartMarker) {
+                  const now = Date.now();
+                  if (now - lastRestartTime > RESTART_DEBOUNCE_MS) {
+                    lastRestartTime = now;
+                    usePreviewStore.getState().restartPreview(projectId);
+                  }
+                }
+
+                // Only add text block if there's content after filtering
+                if (filteredContent) {
+                  const textBlock: StreamingBlock = {
+                    id: `text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                    type: "text",
+                    content: filteredContent,
+                  };
+                  set((state) => ({
+                    streamingBlocks: [...state.streamingBlocks, textBlock],
+                  }));
+                }
               } else if (data.type === "tool_use" && data.tool) {
                 // Add tool_use block
                 const toolBlock: StreamingBlock = {

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.9",
+  "version": "0.2.11",
   "description": "AI-Powered App Builder using Claude Code CLI",
   "bin": {
     "claudeship": "./bin/claudeship.js"