@hienlh/ppm 0.5.2 → 0.5.3

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

@@ -57,6 +57,7 @@ export function MessageInput({
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
   const fileItemsRef = useRef<FileNode[]>([]);
@@ -238,7 +239,7 @@ export function MessageInput({
           );
         });
       }
-      textareaRef.current?.focus();
+      (mobileTextareaRef.current ?? textareaRef.current)?.focus();
     },
     [uploadFile],
   );
@@ -266,9 +267,8 @@ export function MessageInput({
       if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
     }
     setAttachments([]);
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-    }
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
   }, [value, attachments, disabled, onSend, onSlashStateChange, onFileStateChange]);
 
   const handleKeyDown = useCallback(
@@ -320,8 +320,8 @@ export function MessageInput({
     [updatePickerState],
   );
 
-  const handleInput = useCallback(() => {
-    const el = textareaRef.current;
+  const handleInput = useCallback((e?: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const el = e?.target ?? textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = Math.min(el.scrollHeight, 160) + "px";
@@ -382,14 +382,13 @@ export function MessageInput({
 
   return (
     <div className="p-2 md:p-3 bg-background">
-      {/* Attachment chips (above input) */}
-      <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
-
       {/* Rounded input container */}
       <div
         className="border border-border rounded-xl md:rounded-2xl bg-surface shadow-sm cursor-text"
-        onClick={() => !disabled && textareaRef.current?.focus()}
+        onClick={() => !disabled && (mobileTextareaRef.current ?? textareaRef.current)?.focus()}
       >
+        {/* Attachment chips (inside container, aligned with input) */}
+        <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: single row — attach + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
@@ -402,9 +401,9 @@ export function MessageInput({
             <Paperclip className="size-4" />
           </button>
           <textarea
-            ref={textareaRef}
+            ref={mobileTextareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}
@@ -412,7 +411,7 @@ export function MessageInput({
             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"
+            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-20"
           />
           {showCancel ? (
             <button
@@ -439,7 +438,7 @@ export function MessageInput({
           <textarea
             ref={textareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}

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

@@ -5,6 +5,7 @@ import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { StreamingStatus } from "@/hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+import { basename } from "@/lib/utils";
 
 import {
   AlertCircle,
@@ -164,7 +165,7 @@ function parseUserAttachments(content: string): { files: string[]; text: string
 
 /** Build a preview URL for an uploaded file (served from /chat/uploads/:filename) */
 function uploadPreviewUrl(filePath: string, projectName?: string): string {
-  const filename = filePath.split("/").pop() ?? "";
+  const filename = basename(filePath);
   // Use a generic project name — the upload route is project-scoped but files are global
   return `/api/project/${encodeURIComponent(projectName ?? "_")}/chat/uploads/${encodeURIComponent(filename)}`;
 }
@@ -195,13 +196,13 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                 <AuthImage
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  alt={filePath.split("/").pop() ?? "image"}
+                  alt={basename(filePath) || "image"}
                 />
               ) : isPdfPath(filePath) ? (
                 <AuthFileLink
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  filename={filePath.split("/").pop() ?? "document.pdf"}
+                  filename={basename(filePath) || "document.pdf"}
                   mimeType="application/pdf"
                 />
               ) : (
@@ -210,7 +211,7 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                   className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary"
                 >
                   <FileText className="size-3.5 shrink-0" />
-                  <span className="truncate max-w-40">{filePath.split("/").pop()}</span>
+                  <span className="truncate max-w-40">{basename(filePath)}</span>
                 </div>
               ),
             )}

package/src/web/components/chat/tool-cards.tsx

@@ -21,6 +21,7 @@ import {
 } from "lucide-react";
 import type { ChatEvent } from "../../../types/chat";
 import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -165,7 +166,7 @@ function ToolDetails({
     if (!projectName) return;
     openTab({
       type: "editor",
-      title: filePath.split("/").pop() ?? filePath,
+      title: basename(filePath),
       metadata: { filePath, projectName },
       projectId: projectName,
       closable: true,
@@ -176,7 +177,7 @@ function ToolDetails({
   const openEditDiff = (filePath: string, oldStr: string, newStr: string) => {
     openTab({
       type: "git-diff",
-      title: `Diff ${filePath.split("/").pop() ?? filePath}`,
+      title: `Diff ${basename(filePath)}`,
       metadata: { filePath, projectName, original: oldStr, modified: newStr },
       projectId: projectName ?? null,
       closable: true,
@@ -453,10 +454,6 @@ function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; ma
   return <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />;
 }
 
-function basename(path?: string): string {
-  if (!path) return "";
-  return path.split("/").pop() ?? path;
-}
 
 function truncate(str?: string, max = 50): string {
   if (!str) return "";

package/src/web/components/editor/code-editor.tsx

@@ -5,6 +5,7 @@ import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2, FileWarning, ExternalLink, Code, Eye, WrapText } from "lucide-react";
 
@@ -91,7 +92,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   // Update tab title unsaved indicator
   useEffect(() => {
     if (!ownTab) return;
-    const baseName = filePath?.split("/").pop() ?? "Untitled";
+    const baseName = filePath ? basename(filePath) : "Untitled";
     const newTitle = unsaved ? `${baseName} \u25CF` : baseName;
     if (ownTab.title !== newTitle) updateTab(ownTab.id, { title: newTitle });
   }, [unsaved]); // eslint-disable-line react-hooks/exhaustive-deps

package/src/web/components/editor/diff-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { DiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -43,6 +43,20 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const { wordWrap, toggleWordWrap } = useSettingsStore();
   const monacoTheme = useMonacoTheme();
 
+  // Measure container height — Monaco needs explicit pixel height on mobile
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setContainerHeight(Math.floor(entry.contentRect.height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   useEffect(() => {
     if (isInline) return;
     if (!projectName) return;
@@ -92,6 +106,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     return langFile ? getMonacoLanguage(langFile) : "plaintext";
   }, [filePath, file1, file2]);
 
+  // Force inline on mobile (<768px) since side-by-side is too narrow
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  const renderSideBySide = !isMobile && expandMode === "both";
+
   if (!projectName && !isInline) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -125,9 +143,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     );
   }
 
-  // expandMode left/right → inline diff (Monaco has no single-side mode)
-  const renderSideBySide = expandMode === "both";
-
   const expandToggle = (
     <div className="flex items-center gap-0.5 shrink-0">
       <button type="button"
@@ -163,24 +178,30 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Monaco DiffEditor */}
-      <div className="flex-1 overflow-hidden">
-        <DiffEditor
-          height="100%"
-          language={language}
-          original={original}
-          modified={modified}
-          theme={monacoTheme}
-          options={{
-            fontSize: 13,
-            fontFamily: "Menlo, Monaco, Consolas, monospace",
-            wordWrap: wordWrap ? "on" : "off",
-            renderSideBySide,
-            readOnly: true,
-            automaticLayout: true,
-            scrollBeyondLastLine: false,
-          }}
-          loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
-        />
+      <div ref={containerRef} className="flex-1 overflow-hidden">
+        {containerHeight && containerHeight > 0 ? (
+          <DiffEditor
+            height={containerHeight}
+            language={language}
+            original={original}
+            modified={modified}
+            theme={monacoTheme}
+            options={{
+              fontSize: isMobile ? 11 : 13,
+              fontFamily: "Menlo, Monaco, Consolas, monospace",
+              wordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
+              renderSideBySide,
+              readOnly: true,
+              automaticLayout: true,
+              scrollBeyondLastLine: false,
+            }}
+            loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-5 animate-spin text-text-subtle" />
+          </div>
+        )}
       </div>
     </div>
   );

package/src/web/components/explorer/file-tree.tsx

@@ -14,7 +14,7 @@ import {
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
-import { cn } from "@/lib/utils";
+import { cn, basename } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   ContextMenu,
@@ -220,8 +220,8 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     if (action === "compare-selected" && selectedFiles.length === 2) {
       const file1 = selectedFiles[0]!;
       const file2 = selectedFiles[1]!;
-      const name1 = file1.split("/").pop() ?? file1;
-      const name2 = file2.split("/").pop() ?? file2;
+      const name1 = basename(file1);
+      const name2 = basename(file2);
       openTab({
         type: "git-diff",
         title: `Compare ${name1} vs ${name2}`,

package/src/web/components/git/git-graph.tsx

@@ -14,6 +14,7 @@ import {
   GripVertical,
 } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
+import { basename } from "@/lib/utils";
 import { useTabStore } from "@/stores/tab-store";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -582,7 +583,7 @@ export function GitGraph({ metadata }: GitGraphProps) {
                 className="flex items-center gap-2 py-0.5 text-xs hover:bg-muted/50 rounded px-1 cursor-pointer"
                 onClick={() => openTab({
                   type: "git-diff",
-                  title: `Diff ${file.path.split("/").pop()}`,
+                  title: `Diff ${basename(file.path)}`,
                   closable: true,
                   metadata: {
                     projectName,