@hienlh/ppm 0.8.58 → 0.9.0-beta.0

package/src/services/proxy.service.ts

@@ -60,12 +60,6 @@ class ProxyService {
 
     // Ensure token is fresh for OAuth accounts
     let token = account.accessToken;
-    if (!token) {
-      return new Response(
-        JSON.stringify({ type: "error", error: { type: "authentication_error", message: "Account has no access token (decryption may have failed)" } }),
-        { status: 401, headers: { "Content-Type": "application/json" } },
-      );
-    }
     if (token.startsWith("sk-ant-oat")) {
       const fresh = await accountService.ensureFreshToken(account.id);
       if (fresh) token = fresh.accessToken;
@@ -114,22 +108,14 @@ class ProxyService {
       } else if (upstream.status === 401) {
         accountSelector.onAuthError(account.id);
         console.log(`[proxy] 401 from Anthropic — account ${account.email ?? account.id} auth error`);
-      } else if (upstream.status >= 400) {
-        console.log(`[proxy] ${upstream.status} from Anthropic — account ${account.email ?? account.id} (OAuth=${token.startsWith("sk-ant-oat")})`);
       } else if (upstream.status >= 200 && upstream.status < 300) {
         accountSelector.onSuccess(account.id);
       }
 
       // Stream response back as-is (preserves SSE for streaming)
       const responseHeaders = new Headers();
-      // Forward all relevant response headers from Anthropic
-      for (const key of [
-        "content-type", "x-request-id", "request-id",
-        "anthropic-ratelimit-requests-limit", "anthropic-ratelimit-requests-remaining",
-        "anthropic-ratelimit-requests-reset", "anthropic-ratelimit-tokens-limit",
-        "anthropic-ratelimit-tokens-remaining", "anthropic-ratelimit-tokens-reset",
-        "retry-after",
-      ]) {
+      // Forward key response headers
+      for (const key of ["content-type", "x-request-id", "request-id"]) {
         const val = upstream.headers.get(key);
         if (val) responseHeaders.set(key, val);
       }
@@ -141,10 +127,9 @@ class ProxyService {
         headers: responseHeaders,
       });
     } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      console.error(`[proxy] Error forwarding to Anthropic:`, msg);
+      console.error(`[proxy] Error forwarding to Anthropic:`, (e as Error).message);
       return new Response(
-        JSON.stringify({ type: "error", error: { type: "api_error", message: msg || "Unknown proxy error" } }),
+        JSON.stringify({ type: "error", error: { type: "api_error", message: (e as Error).message } }),
         { status: 502, headers: { "Content-Type": "application/json" } },
       );
     }

package/src/types/api.ts

@@ -28,6 +28,9 @@ export type ChatWsClientMessage =
   | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown }
   | { type: "ready" };
 
+/** Session phase for the 5-state machine (BE-owned) */
+export type SessionPhase = "initializing" | "connecting" | "thinking" | "streaming" | "idle";
+
 export type ChatWsServerMessage =
   | { type: "text"; content: string; parentToolUseId?: string }
   | { type: "thinking"; content: string; parentToolUseId?: string }
@@ -36,4 +39,9 @@ export type ChatWsServerMessage =
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
   | { type: "done"; sessionId: string; contextWindowPct?: number }
   | { type: "error"; message: string }
-  | { type: "account_info"; accountId: string; accountLabel: string };
+  | { type: "account_info"; accountId: string; accountLabel: string }
+  | { type: "phase_changed"; phase: SessionPhase; elapsed?: number }
+  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null }
+  | { type: "turn_events"; events: unknown[] }
+  | { type: "title_updated"; title: string }
+  | { type: "ping" };

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import { Upload, X } from "lucide-react";
+import { Loader2, Upload, X } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
@@ -83,9 +83,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     messages,
     messagesLoading,
     isStreaming,
-    streamingStatus,
+    phase,
+    isReconnecting,
     connectingElapsed,
-    thinkingWarningThreshold,
     pendingApproval,
     contextWindowPct,
     sessionTitle,
@@ -311,6 +311,16 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         </div>
       )}
 
+      {/* Reconnect overlay */}
+      {isReconnecting && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" />
+            <span>Reconnecting...</span>
+          </div>
+        </div>
+      )}
+
       {/* Messages */}
       <MessageList
         messages={messages}
@@ -318,9 +328,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         pendingApproval={pendingApproval}
         onApprovalResponse={respondToApproval}
         isStreaming={isStreaming}
-        streamingStatus={streamingStatus}
+        phase={phase}
         connectingElapsed={connectingElapsed}
-        thinkingWarningThreshold={thinkingWarningThreshold}
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
       />

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/settings/proxy-settings-section.tsx

@@ -127,78 +127,76 @@ export function ProxySettingsSection() {
         <div className="space-y-2 rounded-md border p-3 bg-muted/30">
           <h4 className="text-[11px] font-medium">Connection Info</h4>
 
-          {/* Base URL */}
+          {/* Local endpoint */}
           <div className="space-y-1">
-            <Label className="text-[10px] text-muted-foreground">Base URL</Label>
+            <Label className="text-[10px] text-muted-foreground">Local Endpoint</Label>
             <div className="flex gap-1.5 items-center">
               <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
-                {hasTunnel && settings.tunnelUrl
-                  ? `${settings.tunnelUrl}/proxy`
-                  : `${window.location.origin}/proxy`}
+                {`${window.location.origin}/proxy/v1/messages`}
               </code>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(
-                  hasTunnel && settings.tunnelUrl
-                    ? `${settings.tunnelUrl}/proxy`
-                    : `${window.location.origin}/proxy`,
-                  "baseurl",
-                )}
+                onClick={() => copyToClipboard(`${window.location.origin}/proxy/v1/messages`, "local")}
               >
-                {copied === "baseurl" ? "Copied!" : <Copy className="size-3" />}
+                {copied === "local" ? "Copied!" : <Copy className="size-3" />}
               </Button>
             </div>
           </div>
 
+          {/* Tunnel endpoint */}
+          {hasTunnel && settings.proxyEndpoint && (
+            <div className="space-y-1">
+              <Label className="text-[10px] text-muted-foreground">Public Endpoint (Tunnel)</Label>
+              <div className="flex gap-1.5 items-center">
+                <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
+                  {settings.proxyEndpoint}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1.5 cursor-pointer shrink-0"
+                  onClick={() => copyToClipboard(settings.proxyEndpoint!, "tunnel")}
+                >
+                  {copied === "tunnel" ? "Copied!" : <Copy className="size-3" />}
+                </Button>
+              </div>
+            </div>
+          )}
+
           {!hasTunnel && (
             <p className="text-[10px] text-muted-foreground">
               Start a Cloudflare tunnel (Share) to get a public URL.
             </p>
           )}
 
-          {/* Claude Code CLI usage */}
-          <div className="space-y-1 pt-1">
-            <Label className="text-[10px] text-muted-foreground">Claude Code CLI</Label>
-            <div className="relative">
-              <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
-{`ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"} \\
-ANTHROPIC_API_KEY=${settings.authKey} \\
-claude`}
-              </pre>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
-                  `ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"} ANTHROPIC_API_KEY=${settings.authKey} claude`,
-                  "claude-cli",
-                )}
-              >
-                {copied === "claude-cli" ? "Copied!" : <Copy className="size-2.5" />}
-              </Button>
-            </div>
-          </div>
-
-          {/* Generic env vars */}
+          {/* Usage example */}
           <div className="space-y-1 pt-1">
-            <Label className="text-[10px] text-muted-foreground">Environment Variables</Label>
+            <Label className="text-[10px] text-muted-foreground">Usage Example</Label>
             <div className="relative">
               <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
-{`export ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}
-export ANTHROPIC_API_KEY=${settings.authKey}`}
+{`# Set as base URL in your tool
+ANTHROPIC_BASE_URL=${hasTunnel && settings.proxyEndpoint ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}
+ANTHROPIC_API_KEY=${settings.authKey}
+
+# Or use curl
+curl ${hasTunnel && settings.proxyEndpoint ? settings.proxyEndpoint : window.location.origin + "/proxy/v1/messages"} \\
+  -H "x-api-key: ${settings.authKey}" \\
+  -H "content-type: application/json" \\
+  -H "anthropic-version: 2023-06-01" \\
+  -d '{"model":"claude-sonnet-4-6","max_tokens":1024,"messages":[{"role":"user","content":"Hello"}]}'`}
               </pre>
               <Button
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
                 onClick={() => copyToClipboard(
-                  `export ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}\nexport ANTHROPIC_API_KEY=${settings.authKey}`,
-                  "envvars",
+                  `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
+                  "example",
                 )}
               >
-                {copied === "envvars" ? "Copied!" : <Copy className="size-2.5" />}
+                {copied === "example" ? "Copied!" : <Copy className="size-2.5" />}
               </Button>
             </div>
           </div>