botschat 0.1.8 → 0.1.10

package/packages/web/src/components/SessionTabs.tsx

@@ -3,6 +3,45 @@ import { useAppState, useAppDispatch } from "../store";
 import { sessionsApi, channelsApi, agentsApi } from "../api";
 import { dlog } from "../debug-log";
 
+// ---------------------------------------------------------------------------
+// Session history — tracks per-channel usage order in localStorage
+// ---------------------------------------------------------------------------
+const SESSION_HISTORY_KEY = "botschat:sessionHistory";
+
+/** Get the ordered list of recently-used session IDs for a channel. */
+function getSessionHistory(channelId: string): string[] {
+  try {
+    const all = JSON.parse(localStorage.getItem(SESSION_HISTORY_KEY) || "{}");
+    return Array.isArray(all[channelId]) ? all[channelId] : [];
+  } catch {
+    return [];
+  }
+}
+
+/** Record a session as the most-recently-used for its channel. */
+function recordSessionUsage(channelId: string, sessionId: string) {
+  try {
+    const all = JSON.parse(localStorage.getItem(SESSION_HISTORY_KEY) || "{}");
+    const list: string[] = Array.isArray(all[channelId]) ? all[channelId] : [];
+    // Move to front (most recent)
+    const filtered = list.filter((id) => id !== sessionId);
+    filtered.unshift(sessionId);
+    // Keep at most 50 entries per channel
+    all[channelId] = filtered.slice(0, 50);
+    localStorage.setItem(SESSION_HISTORY_KEY, JSON.stringify(all));
+  } catch { /* ignore */ }
+}
+
+/** Remove a session from the history for a channel. */
+function removeSessionFromHistory(channelId: string, sessionId: string) {
+  try {
+    const all = JSON.parse(localStorage.getItem(SESSION_HISTORY_KEY) || "{}");
+    const list: string[] = Array.isArray(all[channelId]) ? all[channelId] : [];
+    all[channelId] = list.filter((id) => id !== sessionId);
+    localStorage.setItem(SESSION_HISTORY_KEY, JSON.stringify(all));
+  } catch { /* ignore */ }
+}
+
 type SessionTabsProps = {
   channelId: string | null;
 };
@@ -12,8 +51,10 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
   const dispatch = useAppDispatch();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editValue, setEditValue] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const editRef = useRef<HTMLInputElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const confirmRef = useRef<HTMLDivElement>(null);
 
   const sessions = state.sessions;
   const selectedId = state.selectedSessionId;
@@ -26,19 +67,33 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
     }
   }, [editingId]);
 
+  // Close confirmation popover on outside click
+  useEffect(() => {
+    if (!confirmDeleteId) return;
+    const handler = (e: MouseEvent) => {
+      if (confirmRef.current && !confirmRef.current.contains(e.target as Node)) {
+        setConfirmDeleteId(null);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [confirmDeleteId]);
+
   const handleSelect = useCallback(
     (sessionId: string) => {
       if (sessionId === selectedId) return;
       const session = sessions.find((s) => s.id === sessionId);
       if (!session) return;
       dlog.info("Session", `Switched to session: ${session.name} (${session.id})`);
+      // Record usage for smart navigation on close
+      if (channelId) recordSessionUsage(channelId, session.id);
       dispatch({
         type: "SELECT_SESSION",
         sessionId: session.id,
         sessionKey: session.sessionKey,
       });
     },
-    [selectedId, sessions, dispatch],
+    [selectedId, sessions, channelId, dispatch],
   );
 
   const handleCreate = useCallback(async () => {
@@ -73,6 +128,7 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
       const session = await sessionsApi.create(effectiveChannelId);
       dlog.info("Session", `Created session: ${session.name} (${session.id})`);
       dispatch({ type: "ADD_SESSION", session });
+      recordSessionUsage(effectiveChannelId, session.id);
       dispatch({
         type: "SELECT_SESSION",
         sessionId: session.id,
@@ -96,14 +152,22 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
         await sessionsApi.delete(channelId, sessionId);
         dlog.info("Session", `Deleted session: ${sessionId}`);
         dispatch({ type: "REMOVE_SESSION", sessionId });
-        // If deleted the selected session, switch to the first remaining
+        removeSessionFromHistory(channelId, sessionId);
+        setConfirmDeleteId(null);
+
+        // If deleted the selected session, navigate to the last-used session
+        // in the same channel (from history), or fall back to first remaining
         if (selectedId === sessionId) {
           const remaining = sessions.filter((s) => s.id !== sessionId);
           if (remaining.length > 0) {
+            const history = getSessionHistory(channelId);
+            const target = history
+              .map((hId) => remaining.find((s) => s.id === hId))
+              .find(Boolean) ?? remaining[0];
             dispatch({
               type: "SELECT_SESSION",
-              sessionId: remaining[0].id,
-              sessionKey: remaining[0].sessionKey,
+              sessionId: target.id,
+              sessionKey: target.sessionKey,
             });
           }
         }
@@ -197,23 +261,6 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
                   title={`${session.name} (double-click to rename)`}
                 >
                   <span className="max-w-[120px] truncate">{session.name}</span>
-
-                  {/* Close button — only show on hover, not for last session */}
-                  {sessions.length > 1 && (
-                    <span
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDelete(session.id);
-                      }}
-                      className="ml-0.5 w-4 h-4 flex items-center justify-center rounded-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[--bg-hover]"
-                      style={{ color: "var(--text-muted)" }}
-                      title="Close session"
-                    >
-                      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </span>
-                  )}
                 </button>
               )}
             </div>
@@ -241,6 +288,76 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
           </svg>
         </button>
       </div>
+
+      {/* Close current session button — separate from tabs, with confirmation */}
+      {sessions.length > 1 && selectedId && (
+        <div className="relative ml-auto pl-2 flex-shrink-0">
+          <button
+            onClick={() => setConfirmDeleteId(selectedId)}
+            className="w-7 h-7 flex items-center justify-center rounded-md transition-colors"
+            style={{ color: "var(--text-muted)" }}
+            title="Close current session"
+            aria-label="Close current session"
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "var(--bg-hover)";
+              e.currentTarget.style.color = "var(--text-primary)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "";
+              e.currentTarget.style.color = "var(--text-muted)";
+            }}
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+
+          {/* Confirmation popover */}
+          {confirmDeleteId && (
+            <div
+              ref={confirmRef}
+              className="absolute right-0 top-full mt-1 z-50 rounded-md shadow-lg py-2 px-3 min-w-[180px]"
+              style={{
+                background: "var(--bg-surface)",
+                border: "1px solid var(--border)",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+              }}
+            >
+              <p className="text-caption mb-2" style={{ color: "var(--text-primary)" }}>
+                Close this session?
+              </p>
+              <div className="flex items-center gap-2 justify-end">
+                <button
+                  onClick={() => setConfirmDeleteId(null)}
+                  className="px-2.5 py-1 text-caption rounded-md transition-colors"
+                  style={{ color: "var(--text-secondary)" }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "var(--bg-hover)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "";
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => handleDelete(confirmDeleteId)}
+                  className="px-2.5 py-1 text-caption font-bold rounded-md text-white transition-colors"
+                  style={{ background: "#e74c3c" }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "#c0392b";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "#e74c3c";
+                  }}
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/packages/web/src/components/Sidebar.tsx

@@ -3,7 +3,7 @@ import { useAppState, useAppDispatch } from "../store";
 import { agentsApi, channelsApi } from "../api";
 import { dlog } from "../debug-log";
 
-export function Sidebar() {
+export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}) {
   const state = useAppState();
   const dispatch = useAppDispatch();
   const [showCreate, setShowCreate] = useState(false);
@@ -88,6 +88,19 @@ export function Sidebar() {
         <span className="text-[--text-sidebar-active] font-bold text-h2 truncate flex-1">
           BotsChat
         </span>
+        {onOpenSettings && (
+          <button
+            onClick={onOpenSettings}
+            className="p-1 rounded transition-colors hover:bg-[--sidebar-hover]"
+            style={{ color: "var(--text-sidebar)" }}
+            title="Settings"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
+        )}
         <svg className="w-3 h-3 text-[--text-sidebar]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
         </svg>

package/packages/web/src/components/ThreadPanel.tsx

@@ -1,9 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useAppState, useAppDispatch, type ChatMessage } from "../store";
 import { messagesApi } from "../api";
 import type { WSMessage } from "../ws";
 import { MessageContent } from "./MessageContent";
 import { dlog } from "../debug-log";
+import { randomUUID } from "../utils/uuid";
+
+/** Simple string hash for action prompt keys (matches MessageContent / ChatWindow) */
+function simpleHash(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+  }
+  return hash.toString(36);
+}
 
 type ThreadPanelProps = {
   sendMessage: (msg: WSMessage) => void;
@@ -39,15 +49,85 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
     (m) => m.id === state.activeThreadId,
   );
 
+  const threadSessionKey = state.selectedSessionKey
+    ? `${state.selectedSessionKey}:thread:${state.activeThreadId}`
+    : null;
+
+  /** Handle A2UI action button clicks in thread — sends as user message */
+  const handleA2UIAction = useCallback((action: string) => {
+    if (!threadSessionKey) return;
+    dlog.info("Thread/A2UI", `Action triggered: ${action}`);
+    const msg: ChatMessage = {
+      id: randomUUID(),
+      sender: "user",
+      text: action,
+      timestamp: Date.now(),
+      threadId: state.activeThreadId ?? undefined,
+    };
+    dispatch({ type: "ADD_THREAD_MESSAGE", message: msg });
+    sendMessage({
+      type: "user.message",
+      sessionKey: threadSessionKey,
+      text: action,
+      userId: state.user?.id ?? "",
+      messageId: msg.id,
+    });
+  }, [threadSessionKey, state.activeThreadId, state.user?.id, sendMessage, dispatch]);
+
+  /** Handle ActionCard resolve in thread — marks widget done + sends choice */
+  const handleResolveAction = useCallback((messageId: string, value: string, label: string) => {
+    if (!threadSessionKey) return;
+    dlog.info("Thread/ActionCard", `Resolved: "${label}" (value="${value}")`);
+    const promptHash = simpleHash(label + value);
+    dispatch({ type: "RESOLVE_ACTION", messageId, promptHash, value, label });
+    const msg: ChatMessage = {
+      id: randomUUID(),
+      sender: "user",
+      text: label,
+      timestamp: Date.now(),
+      threadId: state.activeThreadId ?? undefined,
+    };
+    dispatch({ type: "ADD_THREAD_MESSAGE", message: msg });
+    sendMessage({
+      type: "user.message",
+      sessionKey: threadSessionKey,
+      text: label,
+      userId: state.user?.id ?? "",
+      messageId: msg.id,
+    });
+  }, [threadSessionKey, state.activeThreadId, state.user?.id, sendMessage, dispatch]);
+
+  /** Stop the current thread streaming — sends /stop */
+  const handleStop = useCallback(() => {
+    if (!threadSessionKey || !state.streamingRunId || !state.streamingThreadId) return;
+    dlog.info("Thread", "Stop streaming requested");
+    const msg: ChatMessage = {
+      id: randomUUID(),
+      sender: "user",
+      text: "/stop",
+      timestamp: Date.now(),
+      threadId: state.activeThreadId ?? undefined,
+    };
+    dispatch({ type: "ADD_THREAD_MESSAGE", message: msg });
+    sendMessage({
+      type: "user.message",
+      sessionKey: threadSessionKey,
+      text: "/stop",
+      userId: state.user?.id ?? "",
+      messageId: msg.id,
+    });
+  }, [threadSessionKey, state.streamingRunId, state.streamingThreadId, state.activeThreadId, state.user?.id, sendMessage, dispatch]);
+
+  const isThreadStreaming = !!state.streamingRunId && !!state.streamingThreadId;
+
   const handleSend = () => {
     if (!input.trim() || !state.selectedSessionKey) return;
 
     const trimmed = input.trim();
-    const threadSessionKey = `${state.selectedSessionKey}:thread:${state.activeThreadId}`;
     dlog.info("Thread", `Send reply: ${trimmed.length > 120 ? trimmed.slice(0, 120) + "…" : trimmed}`, { threadId: state.activeThreadId });
 
     const msg: ChatMessage = {
-      id: crypto.randomUUID(),
+      id: randomUUID(),
       sender: "user",
       text: trimmed,
       timestamp: Date.now(),
@@ -58,7 +138,7 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
 
     sendMessage({
       type: "user.message",
-      sessionKey: threadSessionKey,
+      sessionKey: threadSessionKey!,
       text: trimmed,
       userId: state.user?.id ?? "",
       messageId: msg.id,
@@ -113,7 +193,14 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
                     {new Date(parentMessage.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                   </span>
                 </div>
-                <MessageContent text={parentMessage.text} mediaUrl={parentMessage.mediaUrl} />
+                <MessageContent
+                  text={parentMessage.text}
+                  mediaUrl={parentMessage.mediaUrl}
+                  a2ui={parentMessage.a2ui}
+                  onAction={handleA2UIAction}
+                  onResolveAction={(value, label) => handleResolveAction(parentMessage.id, value, label)}
+                  resolvedActions={parentMessage.resolvedActions}
+                />
               </div>
             </div>
           </div>
@@ -164,7 +251,44 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
                     text={msg.text}
                     mediaUrl={msg.mediaUrl}
                     a2ui={msg.a2ui}
+                    isStreaming={msg.isStreaming}
+                    onAction={handleA2UIAction}
+                    onResolveAction={(value, label) => handleResolveAction(msg.id, value, label)}
+                    resolvedActions={msg.resolvedActions}
                   />
+                  {msg.isStreaming && (
+                    <div className="flex items-center gap-2 mt-1">
+                      <span
+                        className="inline-block w-1.5 h-4 rounded-sm animate-pulse"
+                        style={{ background: "var(--text-link)", verticalAlign: "text-bottom" }}
+                      />
+                      <button
+                        onClick={handleStop}
+                        className="flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium transition-colors"
+                        style={{
+                          color: "var(--text-secondary)",
+                          background: "var(--bg-hover)",
+                          border: "1px solid var(--border)",
+                        }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.background = "#e74c3c";
+                          e.currentTarget.style.color = "#fff";
+                          e.currentTarget.style.borderColor = "#e74c3c";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.background = "var(--bg-hover)";
+                          e.currentTarget.style.color = "var(--text-secondary)";
+                          e.currentTarget.style.borderColor = "var(--border)";
+                        }}
+                        title="Stop generating"
+                      >
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                          <rect x="6" y="6" width="12" height="12" rx="2" />
+                        </svg>
+                        Stop
+                      </button>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -193,14 +317,32 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
             style={{ color: "var(--text-primary)", minHeight: 36 }}
           />
           <div className="flex justify-end px-3 pb-2">
-            <button
-              onClick={handleSend}
-              disabled={!input.trim()}
-              className="px-3 py-1 rounded-sm text-caption font-bold text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-              style={{ background: "var(--bg-active)" }}
-            >
-              Send
-            </button>
+            {isThreadStreaming ? (
+              <button
+                onClick={handleStop}
+                className="px-3 py-1 rounded-sm text-caption font-bold text-white transition-colors"
+                style={{ background: "#e74c3c" }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = "#c0392b"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "#e74c3c"; }}
+                title="Stop generating"
+              >
+                <div className="flex items-center gap-1">
+                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+                    <rect x="6" y="6" width="12" height="12" rx="2" />
+                  </svg>
+                  Stop
+                </div>
+              </button>
+            ) : (
+              <button
+                onClick={handleSend}
+                disabled={!input.trim()}
+                className="px-3 py-1 rounded-sm text-caption font-bold text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                style={{ background: "var(--bg-active)" }}
+              >
+                Send
+              </button>
+            )}
           </div>
         </div>
       </div>

package/packages/web/src/utils/uuid.ts

@@ -0,0 +1,21 @@
+/**
+ * Generate a UUID v4. Uses crypto.randomUUID() when available (HTTPS),
+ * otherwise falls back to crypto.getRandomValues() for HTTP/insecure contexts
+ * where randomUUID is not defined.
+ */
+export function randomUUID(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  // Fallback for insecure context (e.g. http://0.0.0.0:8787): UUID v4 via getRandomValues
+  const bytes = new Uint8Array(16);
+  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
+  }
+  bytes[6] = (bytes[6]! & 0x0f) | 0x40;
+  bytes[8] = (bytes[8]! & 0x3f) | 0x80;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}

package/packages/web/src/ws.ts

@@ -2,6 +2,7 @@
 
 import { dlog } from "./debug-log";
 import { E2eService } from "./e2e";
+import { getToken, tryRefreshAccessToken } from "./api";
 
 export type WSMessage = {
   type: string;
@@ -11,7 +12,8 @@ export type WSMessage = {
 export type WSClientOptions = {
   userId: string;
   sessionId: string;
-  token: string;
+  /** Function that returns the current access token (reads from localStorage). */
+  getToken: () => string | null;
   onMessage: (msg: WSMessage) => void;
   onStatusChange: (connected: boolean) => void;
 };
@@ -41,8 +43,14 @@ export class BotsChatWSClient {
 
     this.ws.onopen = () => {
       dlog.info("WS", "Socket opened, sending auth");
+      const token = this.opts.getToken();
+      if (!token) {
+        dlog.error("WS", "No access token available, closing");
+        this.ws?.close();
+        return;
+      }
       // Authenticate with the ConnectionDO
-      this.ws!.send(JSON.stringify({ type: "auth", token: this.opts.token }));
+      this.ws!.send(JSON.stringify({ type: "auth", token }));
     };
 
     this.ws.onmessage = async (evt) => {
@@ -124,9 +132,21 @@ export class BotsChatWSClient {
       this._connected = false;
       this.opts.onStatusChange(false);
       if (!this.intentionalClose) {
-        dlog.warn("WS", `Connection closed (code=${evt.code}), reconnecting in ${this.backoffMs}ms`);
-        this.reconnectTimer = setTimeout(() => {
+        const isAuthFail = evt.code === 4001;
+        dlog.warn("WS", `Connection closed (code=${evt.code}), reconnecting in ${this.backoffMs}ms${isAuthFail ? " (will refresh token)" : ""}`);
+        this.reconnectTimer = setTimeout(async () => {
           this.backoffMs = Math.min(this.backoffMs * 2, 30000);
+          // On auth failure (4001), refresh the access token before reconnecting
+          if (isAuthFail) {
+            dlog.info("WS", "Refreshing access token before reconnect...");
+            const ok = await tryRefreshAccessToken();
+            if (ok) {
+              dlog.info("WS", "Token refreshed, reconnecting");
+              this.backoffMs = 1000; // reset backoff on successful refresh
+            } else {
+              dlog.error("WS", "Token refresh failed — will retry on next cycle");
+            }
+          }
           this.connect();
         }, this.backoffMs);
       } else {