@hienlh/ppm 0.4.5 → 0.5.0

package/src/web/components/chat/chat-tab.tsx

@@ -1,11 +1,11 @@
 import { useState, useCallback, useRef, useEffect, type DragEvent } from "react";
-import { Upload, Bug, Copy, ExternalLink, X } from "lucide-react";
+import { Upload, X } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
-import { buildBugReport, openGithubIssue, copyToClipboard } from "@/lib/report-bug";
+import { openBugReportPopup } from "@/lib/report-bug";
 import { MessageList } from "./message-list";
 import { MessageInput, type ChatAttachment } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
@@ -39,10 +39,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [fileFilter, setFileFilter] = useState("");
   const [fileSelected, setFileSelected] = useState<FileNode | null>(null);
 
-  // Bug report popup
-  const [bugReportText, setBugReportText] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-
   // Drag-and-drop state
   const [isDragging, setIsDragging] = useState(false);
   const [externalFiles, setExternalFiles] = useState<File[] | null>(null);
@@ -54,7 +50,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const version = useSettingsStore((s) => s.version);
 
   // Usage runs independently — auto-refreshes on interval
-  const { usageInfo, usageLoading, lastUpdatedAt, refreshUsage, mergeUsage } =
+  const { usageInfo, usageLoading, lastFetchedAt, refreshUsage, mergeUsage } =
     useUsage(projectName, providerId);
 
   // Persist sessionId and providerId to tab metadata so reload restores the session
@@ -69,6 +65,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     messages,
     messagesLoading,
     isStreaming,
+    streamingStatus,
+    connectingElapsed,
+    thinkingWarningThreshold,
     pendingApproval,
     sendMessage,
     respondToApproval,
@@ -78,6 +77,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     isConnected,
   } = useChat(sessionId, providerId, projectName, { onUsageEvent: mergeUsage });
 
+  // Auto-send pending message for forked sessions (set by handleFork)
+  const pendingForkMsgRef = useRef(metadata?.pendingMessage as string | undefined);
+  useEffect(() => {
+    if (pendingForkMsgRef.current && isConnected && sessionId) {
+      const msg = pendingForkMsgRef.current;
+      pendingForkMsgRef.current = undefined;
+      if (tabId) updateTab(tabId, { metadata: { ...metadata, pendingMessage: undefined } });
+      setTimeout(() => sendMessage(msg), 100);
+    }
+  }, [isConnected, sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleNewSession = useCallback(() => {
     useTabStore.getState().openTab({
       type: "chat",
@@ -93,6 +103,27 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     setProviderId(session.providerId);
   }, []);
 
+  /** Fork current session and open new tab with the forked session, resending userMessage */
+  const handleFork = useCallback(async (userMessage: string) => {
+    if (!sessionId || !projectName) return;
+    try {
+      const { api, projectUrl } = await import("@/lib/api-client");
+      const forked = await api.post<{ id: string; forkedFrom: string }>(
+        `${projectUrl(projectName)}/chat/sessions/${sessionId}/fork?providerId=${providerId}`,
+      );
+      // Open new chat tab with forked session — it will send userMessage on connect
+      useTabStore.getState().openTab({
+        type: "chat",
+        title: `Fork: ${userMessage.slice(0, 30)}`,
+        metadata: { projectName, sessionId: forked.id, providerId, pendingMessage: userMessage },
+        projectId: projectName || null,
+        closable: true,
+      });
+    } catch (e) {
+      console.error("Fork failed:", e);
+    }
+  }, [sessionId, projectName, providerId]);
+
   /** Build message content with file references prepended */
   const buildMessageWithAttachments = useCallback(
     (content: string, attachments: ChatAttachment[]): string => {
@@ -238,7 +269,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         pendingApproval={pendingApproval}
         onApprovalResponse={respondToApproval}
         isStreaming={isStreaming}
+        streamingStatus={streamingStatus}
+        connectingElapsed={connectingElapsed}
+        thinkingWarningThreshold={thinkingWarningThreshold}
         projectName={projectName}
+        onFork={!isStreaming ? handleFork : undefined}
       />
 
       {/* Bottom toolbar */}
@@ -249,14 +284,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           usageInfo={usageInfo}
           usageLoading={usageLoading}
           refreshUsage={refreshUsage}
-          lastUpdatedAt={lastUpdatedAt}
+          lastFetchedAt={lastFetchedAt}
           sessionId={sessionId}
           onSelectSession={handleSelectSession}
-          onBugReport={sessionId ? async () => {
-            const text = await buildBugReport(version, { sessionId, projectName });
-            setBugReportText(text);
-            setCopied(false);
-          } : undefined}
+          onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}
           onReconnect={() => {
             if (!isConnected) reconnect();
@@ -296,43 +327,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         />
       </div>
 
-      {/* Bug report popup */}
-      {bugReportText && (
-        <>
-          <div className="fixed inset-0 z-50 bg-black/50" onClick={() => setBugReportText(null)} />
-          <div className="fixed inset-x-4 top-[10%] bottom-[10%] z-50 mx-auto max-w-lg flex flex-col rounded-lg border border-border bg-background shadow-xl">
-            <div className="flex items-center justify-between px-4 py-2 border-b border-border">
-              <span className="text-sm font-medium">Bug Report</span>
-              <button onClick={() => setBugReportText(null)} className="p-1 rounded hover:bg-surface-elevated">
-                <X className="size-4" />
-              </button>
-            </div>
-            <pre className="flex-1 overflow-auto px-4 py-2 text-xs font-mono whitespace-pre-wrap break-all">{bugReportText}</pre>
-            <div className="flex gap-2 px-4 py-3 border-t border-border">
-              <button
-                onClick={async () => {
-                  const ok = await copyToClipboard(bugReportText);
-                  if (ok) setCopied(true);
-                }}
-                className="flex-1 flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg bg-surface hover:bg-surface-elevated border border-border transition-colors"
-              >
-                <Copy className="size-4" />
-                {copied ? "Copied!" : "Copy"}
-              </button>
-              <button
-                onClick={() => {
-                  openGithubIssue(bugReportText);
-                  setBugReportText(null);
-                }}
-                className="flex-1 flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
-              >
-                <ExternalLink className="size-4" />
-                GitHub Issue
-              </button>
-            </div>
-          </div>
-        </>
-      )}
+      {/* Bug report popup is now global — see BugReportPopup in app.tsx */}
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useEffect, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
-import { Send, Square, Paperclip } from "lucide-react";
+import { ArrowUp, Square, Paperclip } from "lucide-react";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
 import { isSupportedFile, isImageFile } from "@/lib/file-support";
@@ -35,6 +35,8 @@ interface MessageInputProps {
   fileSelected?: FileNode | null;
   /** External files added via drag-drop on parent */
   externalFiles?: File[] | null;
+  /** Pre-fill input value (e.g. from command palette "Ask AI") */
+  initialValue?: string;
 }
 
 export function MessageInput({
@@ -50,14 +52,27 @@ export function MessageInput({
   onFileItemsLoaded,
   fileSelected,
   externalFiles,
+  initialValue,
 }: MessageInputProps) {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
   const fileItemsRef = useRef<FileNode[]>([]);
 
+  // Apply initialValue when it changes (e.g. "Ask AI" from command palette)
+  useEffect(() => {
+    if (initialValue) {
+      setValue(initialValue);
+      // Focus and move cursor to end
+      setTimeout(() => {
+        const ta = textareaRef.current;
+        if (ta) { ta.focus(); ta.selectionStart = ta.selectionEnd = ta.value.length; }
+      }, 50);
+    }
+  }, [initialValue]);
+
   // Fetch slash items when projectName changes
   useEffect(() => {
     if (!projectName) {
@@ -366,65 +381,111 @@ export function MessageInput({
   const showCancel = isStreaming && !hasContent;
 
   return (
-    <div className="border-t border-border bg-background">
-      {/* Attachment chips */}
+    <div className="p-2 md:p-3 bg-background">
+      {/* Attachment chips (above input) */}
       <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
 
-      {/* Input row */}
-      <div className="flex items-end gap-2 p-3">
-        {/* Attach button */}
-        <button
-          type="button"
-          onClick={handleAttachClick}
-          disabled={disabled}
-          className="flex items-center justify-center rounded-lg p-2 text-text-subtle hover:text-text-primary hover:bg-surface transition-colors shrink-0 disabled:opacity-50"
-          aria-label="Attach file"
-        >
-          <Paperclip className="size-4" />
-        </button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          className="hidden"
-          onChange={handleFileInputChange}
-        />
-
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(e) => {
-            handleChange(e.target.value);
-            handleInput();
-          }}
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          placeholder={isStreaming ? "Follow-up or Stop..." : "Message... (↵ to send)"}
-          disabled={disabled}
-          rows={1}
-          className="flex-1 resize-none rounded-lg border border-border bg-surface px-3 py-2 text-base md:text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-ring disabled:opacity-50 max-h-40"
-        />
-        {showCancel ? (
+      {/* Rounded input container */}
+      <div
+        className="border border-border rounded-xl md:rounded-2xl bg-surface shadow-sm cursor-text"
+        onClick={() => !disabled && textareaRef.current?.focus()}
+      >
+        {/* Mobile: single row — attach + textarea + send */}
+        <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
-            onClick={onCancel}
-            className="flex items-center justify-center rounded-lg bg-red-600 p-2 text-white hover:bg-red-500 transition-colors shrink-0"
-            aria-label="Stop response"
+            type="button"
+            onClick={(e) => { e.stopPropagation(); handleAttachClick(); }}
+            disabled={disabled}
+            className="flex items-center justify-center size-7 shrink-0 rounded-full text-text-subtle hover:text-text-primary transition-colors disabled:opacity-50"
+            aria-label="Attach file"
           >
-            <Square className="size-4" />
+            <Paperclip className="size-4" />
           </button>
-        ) : (
-          <button
-            onClick={handleSend}
-            disabled={disabled || !hasContent}
-            className="flex items-center justify-center rounded-lg bg-primary p-2 text-white hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shrink-0"
-            aria-label="Send message"
-          >
-            <Send className="size-4" />
-          </button>
-        )}
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            placeholder={isStreaming ? "Follow-up..." : "Ask anything..."}
+            disabled={disabled}
+            rows={1}
+            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-32"
+          />
+          {showCancel ? (
+            <button
+              onClick={(e) => { e.stopPropagation(); onCancel?.(); }}
+              className="flex items-center justify-center size-7 shrink-0 rounded-full bg-red-600 text-white hover:bg-red-500 transition-colors"
+              aria-label="Stop"
+            >
+              <Square className="size-3" />
+            </button>
+          ) : (
+            <button
+              onClick={(e) => { e.stopPropagation(); 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"
+            >
+              <ArrowUp className="size-3.5" />
+            </button>
+          )}
+        </div>
+
+        {/* Desktop: textarea + action bar below */}
+        <div className="hidden md:block">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            placeholder={isStreaming ? "Follow-up or Stop..." : "Ask anything..."}
+            disabled={disabled}
+            rows={1}
+            className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-40"
+          />
+          <div className="flex items-center justify-between px-3 pb-2">
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); handleAttachClick(); }}
+                disabled={disabled}
+                className="flex items-center justify-center size-8 rounded-full text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors disabled:opacity-50"
+                aria-label="Attach file"
+              >
+                <Paperclip className="size-4" />
+              </button>
+            </div>
+            <div className="flex items-center gap-1">
+              {showCancel ? (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onCancel?.(); }}
+                  className="flex items-center justify-center size-8 rounded-full bg-red-600 text-white hover:bg-red-500 transition-colors"
+                  aria-label="Stop response"
+                >
+                  <Square className="size-3.5" />
+                </button>
+              ) : (
+                <button
+                  onClick={(e) => { e.stopPropagation(); 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"
+                >
+                  <ArrowUp className="size-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
+
+      <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileInputChange} />
     </div>
   );
 }