@hienlh/ppm 0.9.79 → 0.9.80

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

@@ -49,6 +49,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     (metadata?.permissionMode as string) ?? undefined,
   );
 
+  // Pending message to send after WS connects (replaces unreliable setTimeout)
+  const pendingSendRef = useRef<{ content: string; permissionMode?: string } | null>(null);
+
   // Drag-and-drop state
   const [isDragging, setIsDragging] = useState(false);
   const [externalFiles, setExternalFiles] = useState<File[] | null>(null);
@@ -92,7 +95,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     compactStatus,
     statusMessage,
     sessionTitle,
-    migratedSessionId,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -104,12 +106,14 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     markTeamRead,
   } = useChat(sessionId, providerId, projectName);
 
-  // When CLI provider assigns a different session ID, update our state
+  // Flush pending message once WS connects (replaces unreliable setTimeout)
   useEffect(() => {
-    if (migratedSessionId && migratedSessionId !== sessionId) {
-      setSessionId(migratedSessionId);
+    if (isConnected && pendingSendRef.current) {
+      const { content, permissionMode: pm } = pendingSendRef.current;
+      pendingSendRef.current = null;
+      sendMessage(content, { permissionMode: pm });
     }
-  }, [migratedSessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [isConnected, sendMessage]);
 
   // Auto-clear notification badge when this tab is active and document is visible.
   // Handles the case where notification arrived while browser tab was hidden.
@@ -222,9 +226,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           });
           setSessionId(session.id);
           setProviderId(session.providerId);
-          setTimeout(() => {
-            sendMessage(fullContent, { permissionMode });
-          }, 500);
+          // Queue message — will be sent by effect when WS reports isConnected
+          pendingSendRef.current = { content: fullContent, permissionMode };
           return;
         } catch (e) {
           console.error("Failed to create session:", e);

package/src/web/components/layout/project-bar.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { Plus, Settings, Pencil, Trash2, Palette, Bug, Cloud, X } from "lucide-react";
+import { Plus, Settings, Pencil, Trash2, Palette, Bug, Cloud, X, Copy } from "lucide-react";
 import { CloudSharePopover } from "./cloud-share-popover";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -23,7 +23,6 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { AddProjectForm } from "@/components/layout/add-project-form";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useNotificationStore, selectProjectUrgentType, notificationColor } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 
@@ -110,6 +109,45 @@ export function ProjectBar() {
   const [colorValue, setColorValue] = useState("");
   const [colorSaving, setColorSaving] = useState(false);
 
+  // Hover expand (desktop only — ignored on touch devices)
+  const [expanded, setExpanded] = useState(false);
+  const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const leaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mouseInsideRef = useRef(false);
+  const contextMenuOpenRef = useRef(false);
+  const canHoverRef = useRef(
+    typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches,
+  );
+
+  useEffect(() => {
+    return () => {
+      if (enterTimerRef.current) clearTimeout(enterTimerRef.current);
+      if (leaveTimerRef.current) clearTimeout(leaveTimerRef.current);
+    };
+  }, []);
+
+  const handleBarMouseEnter = useCallback(() => {
+    if (!canHoverRef.current) return;
+    mouseInsideRef.current = true;
+    if (leaveTimerRef.current) { clearTimeout(leaveTimerRef.current); leaveTimerRef.current = null; }
+    enterTimerRef.current = setTimeout(() => setExpanded(true), 150);
+  }, []);
+
+  const handleBarMouseLeave = useCallback(() => {
+    if (!canHoverRef.current) return;
+    mouseInsideRef.current = false;
+    if (enterTimerRef.current) { clearTimeout(enterTimerRef.current); enterTimerRef.current = null; }
+    if (contextMenuOpenRef.current) return;
+    leaveTimerRef.current = setTimeout(() => setExpanded(false), 300);
+  }, []);
+
+  const handleCtxMenuChange = useCallback((open: boolean) => {
+    contextMenuOpenRef.current = open;
+    if (!open && !mouseInsideRef.current) {
+      leaveTimerRef.current = setTimeout(() => setExpanded(false), 300);
+    }
+  }, []);
+
   const openRename = useCallback((name: string) => {
     setRenameTarget(name);
     setRenameValue(name);
@@ -172,7 +210,15 @@ export function ProjectBar() {
   }
 
   return (
-    <aside className="hidden md:flex flex-col w-[52px] min-w-[52px] bg-background border-r border-border overflow-hidden">
+    <div
+      className="hidden md:block relative w-[52px] min-w-[52px]"
+      onMouseEnter={handleBarMouseEnter}
+      onMouseLeave={handleBarMouseLeave}
+    >
+    <aside className={cn(
+      "absolute inset-y-0 left-0 flex flex-col bg-background border-r border-border overflow-hidden transition-[width] duration-200 ease-out",
+      expanded ? "w-[240px] shadow-lg z-30" : "w-[52px]",
+    )}>
       {/* Logo + version */}
       <div className="shrink-0 flex flex-col items-center justify-center h-[41px] border-b border-border gap-0.5">
         <span className="text-[11px] font-bold text-primary leading-none">PPM</span>
@@ -182,47 +228,49 @@ export function ProjectBar() {
       </div>
 
       {/* Project avatar list */}
-      <div className="flex-1 overflow-y-auto py-2 flex flex-col items-center gap-2 min-h-0">
+      <div className={cn("flex-1 overflow-y-auto py-2 flex flex-col gap-2 min-h-0", expanded ? "items-stretch px-1.5" : "items-center")}>
         {ordered.map((project, idx) => {
           const color = resolveProjectColor(project.color, idx);
           const isActive = activeProject?.name === project.name;
           const isDragging = dragIdx === idx;
           const isDropTarget = dropIdx === idx && dragIdx !== idx;
           return (
-            <ContextMenu key={project.name}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <ContextMenuTrigger asChild>
-                    <button
-                      draggable
-                      onDragStart={() => setDragIdx(idx)}
-                      onDragOver={(e) => { e.preventDefault(); setDropIdx(idx); }}
-                      onDragLeave={() => setDropIdx(null)}
-                      onDragEnd={() => { setDragIdx(null); setDropIdx(null); }}
-                      onDrop={() => {
-                        if (dragIdx != null && dragIdx !== idx) {
-                          const names = ordered.map((p) => p.name);
-                          const [moved] = names.splice(dragIdx, 1);
-                          names.splice(idx, 0, moved!);
-                          reorderProjects(names);
-                        }
-                        setDragIdx(null);
-                        setDropIdx(null);
-                      }}
-                      onClick={() => setActiveProject(project)}
-                      className={`p-1 rounded-lg hover:bg-surface-elevated transition-all ${
-                        isDragging ? "opacity-40 scale-90" : ""
-                      } ${isDropTarget ? "ring-2 ring-accent" : ""}`}
-                    >
-                      <ProjectAvatar name={project.name} color={color} active={isActive} allNames={allNames} />
-                    </button>
-                  </ContextMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent side="right" className="max-w-[200px]">
-                  <p className="font-medium">{project.name}</p>
-                  <p className="text-xs text-text-subtle truncate">{project.path}</p>
-                </TooltipContent>
-              </Tooltip>
+            <ContextMenu key={project.name} onOpenChange={handleCtxMenuChange}>
+              <ContextMenuTrigger asChild>
+                <button
+                  draggable
+                  onDragStart={() => setDragIdx(idx)}
+                  onDragOver={(e) => { e.preventDefault(); setDropIdx(idx); }}
+                  onDragLeave={() => setDropIdx(null)}
+                  onDragEnd={() => { setDragIdx(null); setDropIdx(null); }}
+                  onDrop={() => {
+                    if (dragIdx != null && dragIdx !== idx) {
+                      const names = ordered.map((p) => p.name);
+                      const [moved] = names.splice(dragIdx, 1);
+                      names.splice(idx, 0, moved!);
+                      reorderProjects(names);
+                    }
+                    setDragIdx(null);
+                    setDropIdx(null);
+                  }}
+                  onClick={() => setActiveProject(project)}
+                  className={cn(
+                    "p-1 rounded-lg transition-all",
+                    !expanded && "hover:bg-surface-elevated",
+                    isDragging && "opacity-40 scale-90",
+                    isDropTarget && "ring-2 ring-accent",
+                    expanded && "w-full flex items-center gap-2 px-2 hover:bg-muted/50",
+                  )}
+                >
+                  <ProjectAvatar name={project.name} color={color} active={isActive} allNames={allNames} />
+                  {expanded && (
+                    <div className="min-w-0 text-left">
+                      <p className="text-sm font-medium truncate">{project.name}</p>
+                      <p className="text-[11px] text-text-subtle truncate [direction:rtl] text-left">{project.path}</p>
+                    </div>
+                  )}
+                </button>
+              </ContextMenuTrigger>
               <ContextMenuContent>
                 <ContextMenuItem onClick={() => openRename(project.name)}>
                   <Pencil className="size-3.5 mr-2" /> Rename
@@ -230,6 +278,9 @@ export function ProjectBar() {
                 <ContextMenuItem onClick={() => openColor(project.name, color)}>
                   <Palette className="size-3.5 mr-2" /> Change Color
                 </ContextMenuItem>
+                <ContextMenuItem onClick={() => navigator.clipboard.writeText(project.path)}>
+                  <Copy className="size-3.5 mr-2" /> Copy Path
+                </ContextMenuItem>
                 <ContextMenuSeparator />
                 <ContextMenuItem
                   className="text-destructive focus:text-destructive"
@@ -243,36 +294,32 @@ export function ProjectBar() {
         })}
 
         {/* Add project button */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={handleAddProject}
-              className="size-10 rounded-full border-2 border-dashed border-border flex items-center justify-center text-text-subtle hover:border-primary hover:text-primary transition-colors"
-            >
-              <Plus className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">Add Project</TooltipContent>
-        </Tooltip>
+        <button
+          onClick={handleAddProject}
+          className={cn(
+            "border-2 border-dashed border-border flex items-center justify-center text-text-subtle hover:border-primary hover:text-primary transition-colors",
+            expanded ? "w-full h-10 gap-2 rounded-lg px-2" : "size-10 rounded-full",
+          )}
+        >
+          <Plus className="size-4 shrink-0" />
+          {expanded && <span className="text-sm whitespace-nowrap">Add Project</span>}
+        </button>
       </div>
 
       {/* Footer: cloud + report bug + settings */}
-      <div className="shrink-0 flex flex-col items-center gap-1 py-2 border-t border-border">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              ref={cloudBtnRef}
-              onClick={() => setCloudOpen(!cloudOpen)}
-              className={cn(
-                "flex items-center justify-center size-8 rounded-md transition-colors",
-                cloudOpen ? "text-primary bg-primary/10" : "text-text-subtle hover:text-foreground hover:bg-surface-elevated",
-              )}
-            >
-              <Cloud className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">Cloud & Share</TooltipContent>
-        </Tooltip>
+      <div className={cn("shrink-0 flex flex-col gap-1 py-2 border-t border-border", expanded ? "items-stretch px-1.5" : "items-center")}>
+        <button
+          ref={cloudBtnRef}
+          onClick={() => setCloudOpen(!cloudOpen)}
+          className={cn(
+            "flex items-center rounded-md transition-colors",
+            expanded ? "w-full h-8 gap-2 px-2 justify-start" : "justify-center size-8",
+            cloudOpen ? "text-primary bg-primary/10" : "text-text-subtle hover:text-foreground hover:bg-surface-elevated",
+          )}
+        >
+          <Cloud className="size-4 shrink-0" />
+          {expanded && <span className="text-xs whitespace-nowrap">Cloud & Share</span>}
+        </button>
 
         {/* Cloud popover — rendered via portal to escape overflow-hidden */}
         {cloudOpen && popoverPos && createPortal(
@@ -288,28 +335,26 @@ export function ProjectBar() {
           document.body,
         )}
 
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={handleReportBug}
-              className="flex items-center justify-center size-8 rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
-            >
-              <Bug className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">Report Bug</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={handleSettings}
-              className="flex items-center justify-center size-8 rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
-            >
-              <Settings className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">Settings</TooltipContent>
-        </Tooltip>
+        <button
+          onClick={handleReportBug}
+          className={cn(
+            "flex items-center rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors",
+            expanded ? "w-full h-8 gap-2 px-2 justify-start" : "justify-center size-8",
+          )}
+        >
+          <Bug className="size-4 shrink-0" />
+          {expanded && <span className="text-xs whitespace-nowrap">Report Bug</span>}
+        </button>
+        <button
+          onClick={handleSettings}
+          className={cn(
+            "flex items-center rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors",
+            expanded ? "w-full h-8 gap-2 px-2 justify-start" : "justify-center size-8",
+          )}
+        >
+          <Settings className="size-4 shrink-0" />
+          {expanded && <span className="text-xs whitespace-nowrap">Settings</span>}
+        </button>
       </div>
 
       {/* Add project dialog */}
@@ -388,5 +433,6 @@ export function ProjectBar() {
         </DialogContent>
       </Dialog>
     </aside>
+    </div>
   );
 }

package/src/web/hooks/use-chat.ts

@@ -44,8 +44,6 @@ interface UseChatReturn {
   compactStatus: "compacting" | null;
   statusMessage: string | null;
   sessionTitle: string | null;
-  /** When CLI provider assigns a different session ID, this holds the new ID */
-  migratedSessionId: string | null;
   /** Team activity state from WS events */
   teamActivity: TeamActivityState;
   /** All team messages (ref-backed, updated live) */
@@ -82,7 +80,6 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
-  const [migratedSessionId, setMigratedSessionId] = useState<string | null>(null);
   const streamingContentRef = useRef("");
   const streamingEventsRef = useRef<ChatEvent[]>([]);
   const streamingAccountRef = useRef<{ accountId: string; accountLabel: string } | null>(null);
@@ -356,13 +353,6 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
-    // Handle session ID migration (CLI provider assigned different ID)
-    if ((data as any).type === "session_migrated") {
-      const newId = (data as any).newSessionId as string;
-      if (newId) setMigratedSessionId(newId);
-      return;
-    }
-
     // Handle title updates from SDK summary
     if ((data as any).type === "title_updated") {
       setSessionTitle((data as any).title ?? null);
@@ -671,7 +661,6 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     compactStatus,
     statusMessage,
     sessionTitle,
-    migratedSessionId,
     teamActivity,
     teamMessages,
     markTeamRead,

package/AGENTS.md

@@ -1,80 +0,0 @@
-# AGENTS.md
-
-## Project
-
-PPM (Project & Process Manager) — a web-based IDE/project manager with AI chat powered by Codex Agent SDK.
-
-## Stack
-
-- **Runtime**: Bun
-- **Backend**: Hono (HTTP) + Bun WebSocket
-- **Frontend**: React + Vite + Tailwind + shadcn/ui
-- **AI**: @anthropic-ai/Codex-agent-sdk
-- **Tests**: bun:test
-
-## Commands
-
-```bash
-bun dev:server    # Start backend dev (port 8081, uses ~/.ppm/ppm.dev.db)
-bun dev:web       # Start Vite frontend (port 5173)
-bun test          # Run all tests
-bun test tests/integration/  # Integration tests only
-```
-
-## Dev Config
-
-Config is stored in **SQLite** (`~/.ppm/ppm.db`). Dev uses a separate DB:
-
-- **Dev**: `~/.ppm/ppm.dev.db` — port **8081**
-- **Production**: `~/.ppm/ppm.db` — port **8080**
-
-`bun dev:server` automatically uses the dev database. On a new machine, run `ppm init` to create default config, then `ppm config set port 8081` for dev.
-
-## Release Process
-
-1. Commit feature/fix changes
-2. Update `CHANGELOG.md` with all changes
-3. Bump version in `package.json` — patch for small changes, minor/major for large ones
-4. Commit: `chore: bump version to x.x.x`
-5. Publish: `npm publish --access public`
-
-## Quick SDK Tool Test
-
-Use `test-tool.mjs` to verify SDK tool execution against any project cwd:
-
-```bash
-bun test-tool.mjs /path/to/project                    # default: echo test
-bun test-tool.mjs /path/to/project "dùng thử tool bash"  # custom prompt
-```
-
-This uses `ClaudeAgentSdkProvider` directly — same env/settings overrides as production.
-
-## Known Gotchas
-
-- **SDK .env poisoning**: Projects with `ANTHROPIC_API_KEY` in `.env` break SDK tool execution. Provider neutralizes these vars. See `docs/lessons-learned.md`.
-- **Project Codex settings**: `.Codex/settings.local.json` can restrict tools even with `bypassPermissions`. Provider overrides with empty settings.
-
-## UI Rules
-
-When creating or modifying any UI component, you MUST read and follow `docs/design-guidelines.md`, especially the **Mobile-First UI Rules** section. Key rules:
-- Dialogs → bottom sheet on mobile (below `md:` breakpoint)
-- No hover-only interactions — must have touch alternatives
-- Touch targets minimum 44×44px
-- Context menus → long-press on mobile, not tap
-- Thumb zone: primary actions in bottom 1/3 of screen for one-handed use
-- Always test both mobile and desktop layouts
-
-## Roadmap & Context
-
-Before planning or implementing a new feature, read `docs/project-roadmap.md` to understand:
-- Which version the feature belongs to (v0.8, v0.9, v0.10, v1.0)
-- The theme and scope of that version
-- Dependencies between features
-- Strategic principles (multi-device focus, extension architecture, tiered providers)
-
-## Architecture
-
-- `src/providers/Codex-agent-sdk.ts` — SDK integration, tool execution, streaming
-- `src/server/ws/chat.ts` — WebSocket chat handler
-- `src/web/hooks/use-chat.ts` — Frontend chat state management
-- `src/services/config.service.ts` — Config from SQLite (`~/.ppm/ppm.db`)