claudeship 0.2.19 → 0.2.21

package/apps/web/package.json

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

package/apps/web/src/app/settings/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { Header } from "@/components/layout/Header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { FolderOpen, Check, AlertCircle, Loader2 } from "lucide-react";
+import { FolderOpen, Check, AlertCircle, Loader2, Database, RefreshCw } from "lucide-react";
 import { api } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
 
@@ -12,6 +12,15 @@ interface Settings {
   projectsBasePath: string;
 }
 
+interface InfraStatus {
+  docker: {
+    available: boolean;
+    version?: string;
+    error?: string;
+  };
+  defaultProvider: "postgres_docker" | "sqlite";
+}
+
 export default function SettingsPage() {
   const { t } = useTranslation();
   const [settings, setSettings] = useState<Settings | null>(null);
@@ -21,8 +30,14 @@ export default function SettingsPage() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
+  // Database infrastructure state
+  const [infraStatus, setInfraStatus] = useState<InfraStatus | null>(null);
+  const [isLoadingInfra, setIsLoadingInfra] = useState(true);
+  const [isRefreshingInfra, setIsRefreshingInfra] = useState(false);
+
   useEffect(() => {
     loadSettings();
+    loadInfraStatus();
   }, []);
 
   const loadSettings = async () => {
@@ -30,13 +45,36 @@ export default function SettingsPage() {
       const data = await api.get<Settings>("/settings");
       setSettings(data);
       setProjectsPath(data.projectsBasePath);
-    } catch (err) {
+    } catch {
       setError("Failed to load settings");
     } finally {
       setIsLoading(false);
     }
   };
 
+  const loadInfraStatus = async () => {
+    try {
+      const data = await api.get<InfraStatus>("/database/status");
+      setInfraStatus(data);
+    } catch {
+      // Silently fail - infrastructure status is optional
+    } finally {
+      setIsLoadingInfra(false);
+    }
+  };
+
+  const refreshInfraStatus = async () => {
+    setIsRefreshingInfra(true);
+    try {
+      const data = await api.post<InfraStatus>("/database/refresh");
+      setInfraStatus(data);
+    } catch {
+      // Silently fail
+    } finally {
+      setIsRefreshingInfra(false);
+    }
+  };
+
   const handleSave = async () => {
     setIsSaving(true);
     setError(null);
@@ -129,6 +167,104 @@ export default function SettingsPage() {
               </div>
             )}
           </section>
+
+          {/* Database Infrastructure */}
+          <section className="rounded-lg border bg-card p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                  <Database className="h-5 w-5 text-primary" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold">데이터베이스 인프라</h2>
+                  <p className="text-sm text-muted-foreground">
+                    프로젝트별 데이터베이스 자동 관리
+                  </p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={refreshInfraStatus}
+                disabled={isRefreshingInfra}
+              >
+                <RefreshCw className={`h-4 w-4 ${isRefreshingInfra ? "animate-spin" : ""}`} />
+              </Button>
+            </div>
+
+            {isLoadingInfra ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : infraStatus ? (
+              <div className="space-y-4">
+                {/* Docker Status */}
+                <div className="flex items-center justify-between rounded-lg bg-muted/50 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className={`h-3 w-3 rounded-full ${
+                      infraStatus.docker.available ? "bg-green-500" : "bg-yellow-500"
+                    }`} />
+                    <div>
+                      <p className="font-medium">Docker</p>
+                      <p className="text-sm text-muted-foreground">
+                        {infraStatus.docker.available
+                          ? `v${infraStatus.docker.version}`
+                          : "설치되지 않음 또는 실행 중이 아님"}
+                      </p>
+                    </div>
+                  </div>
+                  <span className={`text-sm font-medium ${
+                    infraStatus.docker.available ? "text-green-600" : "text-yellow-600"
+                  }`}>
+                    {infraStatus.docker.available ? "실행 중" : "비활성"}
+                  </span>
+                </div>
+
+                {/* Default Provider */}
+                <div className="rounded-lg bg-muted/50 p-4">
+                  <p className="text-sm text-muted-foreground mb-2">기본 데이터베이스</p>
+                  <div className="flex items-center gap-2">
+                    {infraStatus.defaultProvider === "postgres_docker" ? (
+                      <>
+                        <div className="flex h-8 w-8 items-center justify-center rounded bg-blue-500/10">
+                          <span className="text-xs font-bold text-blue-600">PG</span>
+                        </div>
+                        <div>
+                          <p className="font-medium">PostgreSQL (Docker)</p>
+                          <p className="text-xs text-muted-foreground">
+                            프로젝트별 독립 컨테이너
+                          </p>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <div className="flex h-8 w-8 items-center justify-center rounded bg-amber-500/10">
+                          <span className="text-xs font-bold text-amber-600">SL</span>
+                        </div>
+                        <div>
+                          <p className="font-medium">SQLite</p>
+                          <p className="text-xs text-muted-foreground">
+                            경량 파일 기반 DB (폴백)
+                          </p>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Info */}
+                <p className="text-xs text-muted-foreground">
+                  {infraStatus.docker.available
+                    ? "Docker가 감지되어 새 프로젝트에 PostgreSQL이 자동으로 생성됩니다."
+                    : "Docker가 없어 SQLite로 폴백됩니다. Docker를 설치하면 PostgreSQL을 사용할 수 있습니다."}
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground py-4">
+                인프라 상태를 불러올 수 없습니다.
+              </p>
+            )}
+          </section>
         </div>
       </main>
     </div>

package/apps/web/src/components/chat/MessageInput.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/lib/i18n";
 import { ModeToggle } from "./ModeToggle";
 import { FilePreview } from "./FilePreview";
+import { QueuePreview } from "./QueuePreview";
 import { useChatStore } from "@/stores/useChatStore";
 
 interface MessageInputProps {
@@ -34,7 +35,7 @@ const MAX_FILES = 5;
 
 export function MessageInput({ onSend, projectId, disabled, isStreaming, queueCount = 0 }: MessageInputProps) {
   const { t } = useTranslation();
-  const { mode, attachedFiles, addFiles, removeFile, uploadFiles, isUploading } = useChatStore();
+  const { mode, attachedFiles, addFiles, removeFile, uploadFiles, isUploading, messageQueue, deleteFromQueue } = useChatStore();
   const [content, setContent] = useState("");
   const [isDragging, setIsDragging] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -173,7 +174,7 @@ export function MessageInput({ onSend, projectId, disabled, isStreaming, queueCo
         </Button>
       </div>
       {(isStreaming || isUploading) && (
-        <div className="px-4 pb-4 flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="px-4 pb-2 flex items-center gap-2 text-xs text-muted-foreground">
           {isUploading ? (
             <span className="flex items-center gap-1">
               <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
@@ -185,14 +186,10 @@ export function MessageInput({ onSend, projectId, disabled, isStreaming, queueCo
               {t("chat.thinking")}
             </span>
           )}
-          {queueCount > 0 && (
-            <span className="flex items-center gap-1 text-blue-500">
-              <Clock className="h-3 w-3" />
-              {t("chat.queueCount", { count: queueCount })}
-            </span>
-          )}
         </div>
       )}
+      {/* Queue Preview */}
+      <QueuePreview items={messageQueue} onDelete={deleteFromQueue} />
     </div>
   );
 }

package/apps/web/src/components/chat/QueuePreview.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ChevronDown, ChevronUp, Trash2, Play } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useChatStore, type QueuedMessage } from "@/stores/useChatStore";
+
+interface QueuePreviewProps {
+  items: QueuedMessage[];
+  onDelete?: (id: string) => void;
+}
+
+export function QueuePreview({ items, onDelete }: QueuePreviewProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="border-t bg-muted/30">
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+          <span>Queue ({items.length})</span>
+        </div>
+      </button>
+
+      {/* Queue Items */}
+      {isExpanded && (
+        <div className="px-4 pb-3 space-y-2">
+          {items.map((item, index) => (
+            <QueueItem
+              key={item.id}
+              item={item}
+              isNext={index === 0}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface QueueItemProps {
+  item: QueuedMessage;
+  isNext: boolean;
+  onDelete?: (id: string) => void;
+}
+
+function QueueItem({ item, isNext, onDelete }: QueueItemProps) {
+  const isProcessing = item.status === "processing";
+
+  return (
+    <div
+      className={`relative flex items-start gap-2 p-3 rounded-md border ${
+        isProcessing
+          ? "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800"
+          : "bg-background border-border"
+      }`}
+    >
+      <div className="flex-1 min-w-0">
+        <p className="text-sm line-clamp-2 break-words">
+          {item.content}
+        </p>
+      </div>
+      <div className="flex items-center gap-1 shrink-0">
+        {isNext && !isProcessing && (
+          <span className="text-xs font-medium text-blue-600 dark:text-blue-400 px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 rounded">
+            Next
+          </span>
+        )}
+        {isProcessing && (
+          <span className="text-xs font-medium text-blue-600 dark:text-blue-400 px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 rounded animate-pulse">
+            Processing
+          </span>
+        )}
+        {onDelete && !isProcessing && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 text-muted-foreground hover:text-destructive"
+            onClick={() => onDelete(item.id)}
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/chat/StreamingMessage.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { useChatStore, type StreamingBlock } from "@/stores/useChatStore";
 import {
   FileText,
@@ -12,6 +13,8 @@ import {
   Loader2,
   ListTodo,
   Bot,
+  ChevronDown,
+  ChevronUp,
 } from "lucide-react";
 import { MarkdownRenderer } from "./MarkdownRenderer";
 import { AskUserQuestionBlock } from "./AskUserQuestionBlock";
@@ -22,6 +25,9 @@ interface StreamingMessageProps {
   projectId: string;
 }
 
+const COLLAPSE_THRESHOLD = 5; // Number of tool blocks before collapsing
+const VISIBLE_WHEN_COLLAPSED = 2; // Number of items to show at start and end when collapsed
+
 const toolIcons: Record<string, React.ReactNode> = {
   Read: <FileText className="h-4 w-4" />,
   Glob: <FolderSearch className="h-4 w-4" />,
@@ -89,6 +95,13 @@ function TextBlock({ content }: { content: string }) {
   return <MarkdownRenderer content={content} />;
 }
 
+function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
 function ToolUseBlock({ block }: { block: StreamingBlock }) {
   const isRunning = block.status === "running";
   const toolName = block.tool?.name || "Unknown";
@@ -113,17 +126,106 @@ function ToolUseBlock({ block }: { block: StreamingBlock }) {
         {getToolDisplayName(toolName)}
       </span>
       {getToolDescription(block) && (
-        <span className={`truncate ${isRunning ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground"}`}>
+        <span className={`truncate flex-1 ${isRunning ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground"}`}>
           {getToolDescription(block)}
         </span>
       )}
+      {block.duration !== undefined && (
+        <span className="text-xs text-muted-foreground ml-auto tabular-nums">
+          ({formatDuration(block.duration)})
+        </span>
+      )}
     </div>
   );
 }
 
+interface ToolBlockGroupProps {
+  blocks: StreamingBlock[];
+}
+
+function ToolBlockGroup({ blocks }: ToolBlockGroupProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const shouldCollapse = blocks.length > COLLAPSE_THRESHOLD;
+  const hiddenCount = blocks.length - (VISIBLE_WHEN_COLLAPSED * 2);
+
+  if (!shouldCollapse || isExpanded) {
+    return (
+      <div className="space-y-1">
+        {blocks.map((block) => (
+          <ToolUseBlock key={block.id} block={block} />
+        ))}
+        {shouldCollapse && isExpanded && (
+          <button
+            onClick={() => setIsExpanded(false)}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ChevronUp className="h-4 w-4" />
+            <span>접기</span>
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // Show first few, collapse button, then last few
+  const firstBlocks = blocks.slice(0, VISIBLE_WHEN_COLLAPSED);
+  const lastBlocks = blocks.slice(-VISIBLE_WHEN_COLLAPSED);
+
+  return (
+    <div className="space-y-1">
+      {firstBlocks.map((block) => (
+        <ToolUseBlock key={block.id} block={block} />
+      ))}
+      <button
+        onClick={() => setIsExpanded(true)}
+        className="flex items-center gap-1 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors w-full justify-center border border-dashed border-border rounded-md hover:bg-muted/50"
+      >
+        <ChevronDown className="h-4 w-4" />
+        <span>{hiddenCount}개 더 보기</span>
+      </button>
+      {lastBlocks.map((block) => (
+        <ToolUseBlock key={block.id} block={block} />
+      ))}
+    </div>
+  );
+}
+
+// Group consecutive blocks by type
+interface BlockGroup {
+  type: "tool_group" | "other";
+  blocks: StreamingBlock[];
+}
+
+function groupBlocks(blocks: StreamingBlock[]): BlockGroup[] {
+  const groups: BlockGroup[] = [];
+  let currentToolGroup: StreamingBlock[] = [];
+
+  for (const block of blocks) {
+    if (block.type === "tool_use") {
+      currentToolGroup.push(block);
+    } else {
+      // Flush current tool group if exists
+      if (currentToolGroup.length > 0) {
+        groups.push({ type: "tool_group", blocks: currentToolGroup });
+        currentToolGroup = [];
+      }
+      // Add non-tool block as single item
+      groups.push({ type: "other", blocks: [block] });
+    }
+  }
+
+  // Flush remaining tool group
+  if (currentToolGroup.length > 0) {
+    groups.push({ type: "tool_group", blocks: currentToolGroup });
+  }
+
+  return groups;
+}
+
 export function StreamingMessage({ blocks, isStreaming = true, projectId }: StreamingMessageProps) {
   const hasBlocks = blocks.length > 0;
-  const { respondToQuestion, pendingQuestion } = useChatStore();
+  const { respondToQuestion } = useChatStore();
+  const blockGroups = groupBlocks(blocks);
 
   const handleQuestionSubmit = (answers: Record<string, string>) => {
     respondToQuestion(projectId, answers);
@@ -135,25 +237,29 @@ export function StreamingMessage({ blocks, isStreaming = true, projectId }: Stre
         AI
       </div>
       <div className="flex-1 space-y-2 overflow-hidden">
-        {/* Render blocks in order */}
-        {blocks.map((block) => {
-          if (block.type === "text") {
-            return <TextBlock key={block.id} content={block.content || ""} />;
-          }
-          if (block.type === "tool_use") {
-            return <ToolUseBlock key={block.id} block={block} />;
+        {/* Render block groups */}
+        {blockGroups.map((group, groupIndex) => {
+          if (group.type === "tool_group") {
+            return <ToolBlockGroup key={`group-${groupIndex}`} blocks={group.blocks} />;
           }
-          if (block.type === "ask_user_question" && block.askUserQuestion) {
-            return (
-              <AskUserQuestionBlock
-                key={block.id}
-                data={block.askUserQuestion}
-                isWaiting={block.status === "waiting"}
-                onSubmit={handleQuestionSubmit}
-              />
-            );
-          }
-          return null;
+
+          // Render other blocks individually
+          return group.blocks.map((block) => {
+            if (block.type === "text") {
+              return <TextBlock key={block.id} content={block.content || ""} />;
+            }
+            if (block.type === "ask_user_question" && block.askUserQuestion) {
+              return (
+                <AskUserQuestionBlock
+                  key={block.id}
+                  data={block.askUserQuestion}
+                  isWaiting={block.status === "waiting"}
+                  onSubmit={handleQuestionSubmit}
+                />
+              );
+            }
+            return null;
+          });
         })}
 
         {/* Show thinking state when streaming but no blocks yet */}

package/apps/web/src/components/project/ProjectCard.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { Trash2, Globe, Smartphone, Server } from "lucide-react";
+import { Trash2, Globe, Smartphone, Server, Database } from "lucide-react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import type { ProjectListItem } from "@claudeship/shared";
-import { ProjectType, BackendFramework, backendFrameworkLabels } from "@claudeship/shared";
+import { ProjectType, BackendFramework, DatabaseProvider } from "@claudeship/shared";
 import { useTranslation } from "@/lib/i18n";
 
 interface ProjectCardProps {
@@ -104,6 +104,16 @@ export function ProjectCard({ project, onDelete }: ProjectCardProps) {
                 {project.backendFramework === BackendFramework.EXPRESS ? "Express" : "FastAPI"}
               </span>
             )}
+            {project.databaseProvider && (
+              <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                project.databaseProvider === DatabaseProvider.POSTGRES_DOCKER
+                  ? "bg-blue-500/10 text-blue-600"
+                  : "bg-amber-500/10 text-amber-600"
+              }`}>
+                <Database className="h-3 w-3" />
+                {project.databaseProvider === DatabaseProvider.POSTGRES_DOCKER ? "PostgreSQL" : "SQLite"}
+              </span>
+            )}
             <span className="rounded-full bg-secondary px-2.5 py-0.5 text-xs text-muted-foreground">
               {project.projectType === ProjectType.WEB ? "Web" : "Native"}
             </span>

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

@@ -28,6 +28,8 @@ export interface StreamingBlock {
   askUserQuestion?: AskUserQuestionData;
   status?: "running" | "completed" | "error" | "waiting";
   result?: string;
+  timestamp?: number; // Unix timestamp in milliseconds
+  duration?: number; // Duration in milliseconds
 }
 
 export interface QueuedMessage {
@@ -60,6 +62,7 @@ interface ChatState {
   fetchActiveSession: (projectId: string) => Promise<void>;
   sendMessage: (projectId: string, content: string, fromQueue?: boolean) => Promise<void>;
   queueMessage: (projectId: string, content: string) => void;
+  deleteFromQueue: (id: string) => void;
   processQueue: (projectId: string) => Promise<void>;
   respondToQuestion: (projectId: string, answers: Record<string, string>) => Promise<void>;
   addMessage: (message: ChatMessage) => void;
@@ -263,19 +266,24 @@ export const useChatStore = create<ChatState>((set, get) => ({
                             input: data.tool.input,
                           },
                           status: "running",
+                          timestamp: Date.now(),
                         };
                         set((state) => ({
                           streamingBlocks: [...state.streamingBlocks, toolBlock],
                         }));
                       } else if (data.type === "tool_result") {
+                        const now = Date.now();
                         set((state) => {
                           const blocks = [...state.streamingBlocks];
                           for (let i = blocks.length - 1; i >= 0; i--) {
-                            if (blocks[i].type === "tool_use" && blocks[i].status === "running") {
+                            const block = blocks[i];
+                            if (block.type === "tool_use" && block.status === "running") {
+                              const duration = block.timestamp ? now - block.timestamp : undefined;
                               blocks[i] = {
-                                ...blocks[i],
+                                ...block,
                                 status: "completed",
                                 result: data.content,
+                                duration,
                               };
                               break;
                             }
@@ -341,6 +349,13 @@ export const useChatStore = create<ChatState>((set, get) => ({
     }));
   },
 
+  // Delete a message from the queue
+  deleteFromQueue: (id: string) => {
+    set((state) => ({
+      messageQueue: state.messageQueue.filter((m) => m.id !== id),
+    }));
+  },
+
   // Process the message queue sequentially
   processQueue: async (projectId: string) => {
     const state = get();
@@ -487,7 +502,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                   }));
                 }
               } else if (data.type === "tool_use" && data.tool) {
-                // Add tool_use block
+                // Add tool_use block with timestamp
                 const toolBlock: StreamingBlock = {
                   id: `tool-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                   type: "tool_use",
@@ -496,21 +511,26 @@ export const useChatStore = create<ChatState>((set, get) => ({
                     input: data.tool.input,
                   },
                   status: "running",
+                  timestamp: Date.now(),
                 };
                 set((state) => ({
                   streamingBlocks: [...state.streamingBlocks, toolBlock],
                 }));
               } else if (data.type === "tool_result") {
-                // Update the last running tool_use block with result
+                // Update the last running tool_use block with result and duration
+                const now = Date.now();
                 set((state) => {
                   const blocks = [...state.streamingBlocks];
                   // Find the last running tool_use block
                   for (let i = blocks.length - 1; i >= 0; i--) {
-                    if (blocks[i].type === "tool_use" && blocks[i].status === "running") {
+                    const block = blocks[i];
+                    if (block.type === "tool_use" && block.status === "running") {
+                      const duration = block.timestamp ? now - block.timestamp : undefined;
                       blocks[i] = {
-                        ...blocks[i],
+                        ...block,
                         status: "completed",
                         result: data.content,
+                        duration,
                       };
                       break;
                     }

package/package.json

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