@hienlh/ppm 0.8.59 → 0.8.60

package/src/web/components/chat/message-input.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
-import { ArrowUp, Square, Paperclip } from "lucide-react";
+import { ArrowUp, Square, Paperclip, Loader2 } from "lucide-react";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
@@ -67,6 +67,7 @@ export const MessageInput = memo(function MessageInput({
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
+  const [pendingSend, setPendingSend] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -274,11 +275,14 @@ export const MessageInput = memo(function MessageInput({
     });
   }, []);
 
-  const handleSend = useCallback(() => {
+  /** Execute the actual send (called directly or after uploads complete) */
+  const executeSend = useCallback(() => {
     const trimmed = value.trim();
     const readyAttachments = attachments.filter((a) => a.status === "ready");
-    if (!trimmed && readyAttachments.length === 0) return;
-    if (disabled) return;
+    if (!trimmed && readyAttachments.length === 0) {
+      setPendingSend(false);
+      return;
+    }
 
     onSlashStateChange?.(false, "");
     onFileStateChange?.(false, "");
@@ -289,9 +293,32 @@ export const MessageInput = memo(function MessageInput({
       if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
     }
     setAttachments([]);
+    setPendingSend(false);
     if (textareaRef.current) textareaRef.current.style.height = "auto";
     if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
-  }, [value, attachments, disabled, onSend, onSlashStateChange, onFileStateChange]);
+  }, [value, attachments, onSend, onSlashStateChange, onFileStateChange]);
+
+  const handleSend = useCallback(() => {
+    if (disabled) return;
+
+    // If files are still uploading, queue the send for when they finish
+    if (attachments.some((a) => a.status === "uploading")) {
+      const trimmed = value.trim();
+      if (trimmed || attachments.some((a) => a.status !== "error")) {
+        setPendingSend(true);
+      }
+      return;
+    }
+
+    executeSend();
+  }, [value, attachments, disabled, executeSend]);
+
+  // Auto-send when queued and all uploads complete
+  useEffect(() => {
+    if (!pendingSend) return;
+    if (attachments.some((a) => a.status === "uploading")) return;
+    executeSend();
+  }, [pendingSend, attachments, executeSend]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -404,7 +431,7 @@ export const MessageInput = memo(function MessageInput({
     [processFiles],
   );
 
-  const hasContent = value.trim().length > 0 || attachments.some((a) => a.status === "ready");
+  const hasContent = value.trim().length > 0 || attachments.some((a) => a.status !== "error");
   const showCancel = isStreaming && !hasContent;
 
   return (
@@ -472,12 +499,12 @@ export const MessageInput = memo(function MessageInput({
             </button>
           ) : (
             <button
-              onClick={(e) => { e.stopPropagation(); handleSend(); }}
+              onClick={(e) => { e.stopPropagation(); pendingSend ? setPendingSend(false) : handleSend(); }}
               disabled={disabled || !hasContent}
               className="flex items-center justify-center size-7 shrink-0 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-30 transition-colors"
-              aria-label="Send"
+              aria-label={pendingSend ? "Cancel queued send" : "Send"}
             >
-              <ArrowUp className="size-3.5" />
+              {pendingSend ? <Loader2 className="size-3.5 animate-spin" /> : <ArrowUp className="size-3.5" />}
             </button>
           )}
         </div>
@@ -533,12 +560,12 @@ export const MessageInput = memo(function MessageInput({
                 </button>
               ) : (
                 <button
-                  onClick={(e) => { e.stopPropagation(); handleSend(); }}
+                  onClick={(e) => { e.stopPropagation(); pendingSend ? setPendingSend(false) : handleSend(); }}
                   disabled={disabled || !hasContent}
                   className="flex items-center justify-center size-8 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-                  aria-label="Send message"
+                  aria-label={pendingSend ? "Cancel queued send" : "Send message"}
                 >
-                  <ArrowUp className="size-4" />
+                  {pendingSend ? <Loader2 className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
                 </button>
               )}
             </div>

package/src/web/components/chat/message-list.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { getAuthToken } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent } from "../../../types/chat";
-import type { StreamingStatus } from "@/hooks/use-chat";
+import type { SessionPhase } from "../../../types/api";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { cn, basename } from "@/lib/utils";
@@ -39,9 +39,8 @@ interface MessageListProps {
   pendingApproval: { requestId: string; tool: string; input: unknown } | null;
   onApprovalResponse: (requestId: string, approved: boolean, data?: unknown) => void;
   isStreaming: boolean;
-  streamingStatus?: StreamingStatus;
+  phase?: SessionPhase;
   connectingElapsed?: number;
-  thinkingWarningThreshold?: number;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string) => void;
@@ -53,9 +52,8 @@ export function MessageList({
   pendingApproval,
   onApprovalResponse,
   isStreaming,
-  streamingStatus,
+  phase,
   connectingElapsed,
-  thinkingWarningThreshold,
   projectName,
   onFork,
 }: MessageListProps) {
@@ -108,7 +106,7 @@ export function MessageList({
             : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
         )}
 
-        {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} streamingStatus={streamingStatus} elapsed={connectingElapsed} warningThreshold={thinkingWarningThreshold} />}
+        {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} phase={phase} elapsed={connectingElapsed} />}
       </StickToBottom.Content>
       <ScrollToBottomButton />
     </StickToBottom>
@@ -751,14 +749,13 @@ function StreamingText({ content, animate: isStreaming, projectName }: { content
  * - After tool: "Processing..."
  * - Text streaming: hidden
  */
-function ThinkingIndicator({ lastMessage, streamingStatus, elapsed, warningThreshold = 15 }: { lastMessage?: ChatMessage; streamingStatus?: StreamingStatus; elapsed?: number; warningThreshold?: number }) {
-  // Show "Thinking" when:
+function ThinkingIndicator({ lastMessage, phase, elapsed }: { lastMessage?: ChatMessage; phase?: SessionPhase; elapsed?: number }) {
+  // Show indicator when:
   // 1. No assistant message yet (waiting for first response)
-  // 2. Last event is tool_use/tool_result (Claude thinking after tool execution)
+  // 2. Last event is tool_result (Claude thinking after tool execution)
   // Hide when text is actively streaming (text itself is the indicator)
 
   const isWaiting = !lastMessage || lastMessage.role !== "assistant";
-  // Show Thinking only after tool_result (tool finished), not tool_use (tool still running)
   const isAfterTool = (() => {
     if (!lastMessage?.events?.length) return false;
     const last = lastMessage.events[lastMessage.events.length - 1]!;
@@ -767,13 +764,19 @@ function ThinkingIndicator({ lastMessage, streamingStatus, elapsed, warningThres
 
   if (!isWaiting && !isAfterTool) return null;
 
-  const isLong = isWaiting && (elapsed ?? 0) >= warningThreshold;
+  const label = phase === "initializing" ? "Initializing"
+    : phase === "connecting" ? "Connecting"
+    : phase === "thinking" ? "Thinking"
+    : "Processing";
+
+  const isLong = phase === "connecting" && (elapsed ?? 0) >= 30;
+
   return (
     <div className="flex flex-col gap-1 text-sm">
       <div className="flex items-center gap-2 text-text-subtle">
         <Loader2 className="size-3 animate-spin" />
         <span>
-          Thinking
+          {label}
           {isWaiting && (elapsed ?? 0) > 0 && <span className="text-text-subtle/60">... ({elapsed}s)</span>}
         </span>
       </div>

package/src/web/components/layout/panel-layout.tsx

@@ -1,6 +1,8 @@
+import { useEffect } from "react";
 import { Panel, Group, Separator } from "react-resizable-panels";
 import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { createPanel } from "@/stores/panel-utils";
 import { EditorPanel } from "./editor-panel";
 
 interface PanelLayoutProps {
@@ -13,7 +15,21 @@ export function PanelLayout({ projectName }: PanelLayoutProps) {
   );
   const panelCount = grid.flat().length;
 
-  if (panelCount <= 1 && grid[0]?.[0]) {
+  // Recover from empty grid (corrupt persisted state or edge-case bug)
+  useEffect(() => {
+    if (panelCount === 0) {
+      const p = createPanel();
+      usePanelStore.setState((s) => ({
+        panels: { ...s.panels, [p.id]: p },
+        grid: [[p.id]],
+        focusedPanelId: p.id,
+      }));
+    }
+  }, [panelCount]);
+
+  if (panelCount === 0) return null;
+
+  if (panelCount === 1 && grid[0]?.[0]) {
     return <EditorPanel panelId={grid[0][0]} projectName={projectName} />;
   }