@hienlh/ppm 0.9.2 → 0.9.4

package/src/providers/claude-agent-sdk.ts

@@ -902,12 +902,12 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                   console.log(`[sdk] session=${sessionId} OAuth token refreshed for ${account.id} (${label}) — retrying`);
                   yield { type: "account_retry" as const, reason: "Token refreshed", accountId: refreshedAccount.id, accountLabel: label };
                   const retryEnv = this.buildQueryEnv(meta.projectPath, refreshedAccount);
-                  // Close failed query and old channel, create new channel + query with refreshed token
+                  // Close failed query and old channel, create new channel + query with refreshed token.
+                  // Resume existing SDK session so conversation context is preserved.
                   streamCtrl.done();
                   q.close();
                   const { generator: authRetryGen, controller: authRetryCtrl } = createMessageChannel();
-                  authRetryCtrl.push(firstMsg);
-                  const retryOpts = { ...queryOptions, sessionId: undefined, resume: undefined, env: retryEnv };
+                  const retryOpts = { ...queryOptions, sessionId: undefined, resume: sdkId, env: retryEnv };
                   const rq = query({
                     prompt: authRetryGen,
                     options: { ...retryOpts, ...(permissionHooks && { hooks: permissionHooks }), canUseTool } as any,
@@ -953,13 +953,13 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               }
               yield { type: "error", message: `Rate limited. Auto-retrying in ${backoff / 1000}s... (${rateLimitRetryCount}/${MAX_RATE_LIMIT_RETRIES})` };
               await new Promise((r) => setTimeout(r, backoff));
-              // Close failed query and recreate with (potentially new) account env
+              // Close failed query and recreate with (potentially new) account env.
+              // Resume existing SDK session so conversation context is preserved.
               streamCtrl.done();
               q.close();
               const rlRetryEnv = this.buildQueryEnv(meta.projectPath, account);
               const { generator: rlRetryGen, controller: rlRetryCtrl } = createMessageChannel();
-              rlRetryCtrl.push(firstMsg);
-              const retryOpts = { ...queryOptions, sessionId: undefined, resume: undefined, env: rlRetryEnv };
+              const retryOpts = { ...queryOptions, sessionId: undefined, resume: sdkId, env: rlRetryEnv };
               const rq = query({
                 prompt: rlRetryGen,
                 options: { ...retryOpts, ...(permissionHooks && { hooks: permissionHooks }), canUseTool } as any,
@@ -1050,12 +1050,12 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                 }
                 yield { type: "error", message: `Rate limited. Auto-retrying in ${backoff / 1000}s... (${rateLimitRetryCount}/${MAX_RATE_LIMIT_RETRIES})` };
                 await new Promise((r) => setTimeout(r, backoff));
+                // Resume existing SDK session so conversation context is preserved.
                 streamCtrl.done();
                 q.close();
                 const rlRetryEnv = this.buildQueryEnv(meta.projectPath, account);
                 const { generator: rlRetryGen, controller: rlRetryCtrl } = createMessageChannel();
-                rlRetryCtrl.push(firstMsg);
-                const retryOpts = { ...queryOptions, sessionId: undefined, resume: undefined, env: rlRetryEnv };
+                const retryOpts = { ...queryOptions, sessionId: undefined, resume: sdkId, env: rlRetryEnv };
                 const rq = query({
                   prompt: rlRetryGen,
                   options: { ...retryOpts, ...(permissionHooks && { hooks: permissionHooks }), canUseTool } as any,
@@ -1068,7 +1068,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               yield { type: "error", message: `Rate limited. Retried ${MAX_RATE_LIMIT_RETRIES} times without success.` };
               continue;
             } else if (errCode === 401) {
-              // Refresh token and retry with fresh session (same logic as assistant-level auth retry)
+              // Refresh token and retry — resume existing SDK session to preserve context
               if (!authRetried) {
                 authRetried = true;
                 try {
@@ -1078,12 +1078,17 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                     const label = refreshedAccount.label ?? refreshedAccount.email ?? "Unknown";
                     console.log(`[sdk] 401 in result on account ${account.id} (${label}) — token refreshed, retrying`);
                     yield { type: "account_retry" as const, reason: "Token refreshed", accountId: refreshedAccount.id, accountLabel: label };
+                    // Resume existing SDK session so conversation context is preserved.
+                    streamCtrl.done();
+                    q.close();
                     const retryEnv = this.buildQueryEnv(meta.projectPath, refreshedAccount);
-                    const retryOpts = { ...queryOptions, sessionId: undefined, resume: undefined, env: retryEnv };
+                    const { generator: authRetryGen2, controller: authRetryCtrl2 } = createMessageChannel();
+                    const retryOpts = { ...queryOptions, sessionId: undefined, resume: sdkId, env: retryEnv };
                     const rq = query({
-                      prompt: message,
+                      prompt: authRetryGen2,
                       options: { ...retryOpts, ...(permissionHooks && { hooks: permissionHooks }), canUseTool } as any,
                     });
+                    this.streamingSessions.set(sessionId, { meta, query: rq, controller: authRetryCtrl2 });
                     this.activeQueries.set(sessionId, rq);
                     eventSource = rq;
                     continue retryLoop;

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

@@ -341,6 +341,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         connectingElapsed={connectingElapsed}
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
+        onSelectSession={handleSelectSession}
       />
 
       {/* Bottom toolbar */}

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

@@ -26,6 +26,7 @@ import {
   XCircle,
   ExternalLink,
 } from "lucide-react";
+import { ChatWelcome } from "./chat-welcome";
 import { QuestionCard } from "./question-card";
 import type { Question } from "./question-card";
 import { useTabStore } from "@/stores/tab-store";
@@ -44,6 +45,8 @@ interface MessageListProps {
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string, messageId?: string) => void;
+  /** Called when user selects a recent session from the welcome screen */
+  onSelectSession?: (session: import("../../../types/chat").SessionInfo) => void;
 }
 
 export function MessageList({
@@ -53,6 +56,7 @@ export function MessageList({
   onApprovalResponse,
   isStreaming,
   phase,
+  onSelectSession,
   connectingElapsed,
   projectName,
   onFork,
@@ -70,10 +74,10 @@ export function MessageList({
 
   if (messages.length === 0 && !isStreaming) {
     return (
-      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
-        <Bot className="size-10 text-text-subtle" />
-        <p className="text-sm">Send a message to start the conversation</p>
-      </div>
+      <ChatWelcome
+        projectName={projectName || ""}
+        onSelectSession={onSelectSession || (() => {})}
+      />
     );
   }
 

package/src/web/components/layout/mobile-nav.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
-  ChevronLeft, ChevronRight, Globe, Puzzle,
+  ChevronRight, Globe, Puzzle,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -42,7 +42,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const mobileScrollRef = useRef<HTMLDivElement>(null);
   const prevTabCount = useRef(tabs.length);
   const notifications = useNotificationStore((s) => s.notifications);
-  const { canScrollLeft, canScrollRight, scrollLeft: doScrollLeft, scrollRight: doScrollRight } =
+  const { canScrollLeft, canScrollRight, scrollRight: doScrollRight } =
     useTabOverflow(mobileScrollRef);
   const hiddenUnread = getHiddenUnreadDirection(mobileScrollRef.current, tabRefs.current as Map<string, HTMLElement>, tabs, notifications);
 
@@ -114,21 +114,51 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   return (
     <nav className="fixed bottom-0 left-0 right-0 md:hidden bg-background border-t border-border z-40 select-none">
       <div className="flex items-center h-12">
-        <button onClick={onMenuPress} className="flex items-center justify-center size-12 shrink-0 text-text-secondary border-r border-border">
-          <Menu className="size-5" />
-        </button>
+        {/* Fixed section: Menu + Project + Add — curved right edge */}
+        <div className={cn(
+          "flex items-center shrink-0 bg-background relative z-10 transition-all duration-200",
+          canScrollLeft ? "rounded-r-2xl shadow-[6px_0_12px_-4px_rgba(0,0,0,0.12)]" : "border-r border-border",
+        )}>
+          <button onClick={onMenuPress} className="flex items-center justify-center size-12 shrink-0 text-text-secondary">
+            <Menu className="size-5" />
+          </button>
 
-        <div className="flex-1 min-w-0 relative flex items-center h-12">
-          {/* Left scroll arrow */}
-          {canScrollLeft && (
-            <button onClick={doScrollLeft} className="absolute left-0 z-10 flex items-center justify-center size-8 bg-gradient-to-r from-background via-background to-transparent">
-              <span className="relative">
-                <ChevronLeft className="size-3.5 text-text-secondary" />
-                {hiddenUnread.left && <span className={cn("absolute -top-1 -right-0.5 size-1.5 rounded-full", notificationColor(hiddenUnread.left))} />}
-              </span>
-            </button>
-          )}
-          <div ref={mobileScrollRef} className="flex-1 min-w-0 flex items-center h-12 overflow-x-auto scrollbar-none">
+          <div className="w-px self-stretch bg-border shrink-0" />
+
+          <button
+            onClick={onProjectsPress}
+            className="flex items-center justify-center size-12 shrink-0 text-text-secondary"
+            title="Switch project"
+          >
+            {activeInitials ? (
+              <div
+                className="size-7 rounded-full flex items-center justify-center text-[10px] font-bold text-white"
+                style={{ background: activeColor }}
+              >
+                {activeInitials}
+              </div>
+            ) : (
+              <Layers className="size-5" />
+            )}
+          </button>
+
+          <div className="w-px self-stretch bg-border shrink-0" />
+
+          <button
+            onClick={() => openCommandPalette()}
+            className={cn(
+              "flex items-center justify-center shrink-0 text-text-secondary gap-1.5 h-12",
+              tabs.length === 0 ? "px-4" : "w-12",
+            )}
+          >
+            <Plus className="size-4" />
+            {tabs.length === 0 && <span className="text-xs">New Tab</span>}
+          </button>
+        </div>
+
+        {/* Tab list — overlaps under curved edge so tabs slide beneath it */}
+        <div className="flex-1 min-w-0 relative flex items-center h-12 -ml-4">
+          <div ref={mobileScrollRef} className="flex-1 min-w-0 flex items-center h-12 overflow-x-auto scrollbar-none pl-4">
           {tabs.map((tab) => {
             const Icon = TAB_ICONS[tab.type];
             const isActive = tab.id === activeTabId;
@@ -179,32 +209,6 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
             </button>
           )}
         </div>
-
-        {/* Add tab — opens command palette */}
-        <button
-          onClick={() => openCommandPalette()}
-          className="flex items-center justify-center size-12 shrink-0 border-t-2 border-transparent text-text-secondary"
-        >
-          <Plus className="size-4" />
-        </button>
-
-        {/* Projects button (rightmost) */}
-        <button
-          onClick={onProjectsPress}
-          className="flex items-center justify-center size-12 shrink-0 text-text-secondary border-l border-border"
-          title="Switch project"
-        >
-          {activeInitials ? (
-            <div
-              className="size-7 rounded-full flex items-center justify-center text-[10px] font-bold text-white"
-              style={{ background: activeColor }}
-            >
-              {activeInitials}
-            </div>
-          ) : (
-            <Layers className="size-5" />
-          )}
-        </button>
       </div>
 
       {/* New tab action sheet */}