claudeship 0.2.18 → 0.2.20

package/apps/web/package.json

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

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