cue-console 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Cue Hub console launcher (Next.js UI)",
   "license": "Apache-2.0",
   "keywords": ["mcp", "cue", "console", "nextjs"],

package/src/app/globals.css

@@ -209,6 +209,12 @@
     background-size: 140px 140px;
   }
 
+  /* Text wrapping utilities for mobile responsiveness */
+  .overflow-wrap-anywhere {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
   /* Markdown document-flow: harden list/paragraph spacing to avoid regressions */
   .md-flow {
     max-width: 100%;

package/src/app/page.tsx

@@ -6,6 +6,7 @@ import { ChatView } from "@/components/chat-view";
 import { CreateGroupDialog } from "@/components/create-group-dialog";
 import { MessageCircle } from "lucide-react";
 import { claimWorkerLease, fetchBotEnabledConversations, processBotTick, processQueueTick } from "@/lib/actions";
+import "@/lib/perf-monitor"; // Auto-starts if enabled in localStorage
 
 export default function Home() {
   const [selectedId, setSelectedId] = useState<string | null>(null);

package/src/components/chat/message-bubble.tsx

@@ -126,19 +126,19 @@ export function MessageBubble({
       ) : (
         <span className="h-9 w-9 shrink-0" />
       )}
-      <div className="flex-1 min-w-0 overflow-hidden">
+      <div className="flex-1 min-w-0">
         {(showName ?? true) && (showAgent || displayName) && (
           <p className="mb-1 text-xs text-muted-foreground truncate">{displayName}</p>
         )}
         <div
           className={cn(
-            "rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 overflow-hidden",
+            "rounded-3xl p-3 sm:p-4 w-full",
             "glass-surface-soft glass-noise",
             isPending ? "ring-1 ring-ring/25" : "ring-1 ring-white/25"
           )}
           style={{ clipPath: "inset(0 round 1rem)", maxWidth: cardMaxWidth }}
         >
-          <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
+          <div className="text-sm overflow-wrap-anywhere">
             <MarkdownRenderer>{request.prompt || ""}</MarkdownRenderer>
           </div>
           <PayloadCard

package/src/components/chat/user-response-bubble.tsx

@@ -103,7 +103,7 @@ export function UserResponseBubble({
     return (
       <div className="flex justify-end gap-3 max-w-full min-w-0">
         <div
-          className="rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 sm:max-w-215 sm:flex-none sm:w-fit overflow-hidden glass-surface-soft glass-noise ring-1 ring-white/25"
+          className="rounded-3xl p-3 sm:p-4 w-full sm:max-w-215 sm:w-fit glass-surface-soft glass-noise ring-1 ring-white/25"
           style={{
             clipPath: "inset(0 round 1rem)",
             maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
@@ -119,14 +119,14 @@ export function UserResponseBubble({
   return (
     <div className={cn("flex justify-end gap-3 max-w-full min-w-0", compact && "gap-2")}>
       <div
-        className="rounded-3xl p-3 sm:p-4 max-w-full flex-1 basis-0 min-w-0 sm:max-w-215 sm:flex-none sm:w-fit overflow-hidden glass-surface-soft glass-noise ring-1 ring-white/25"
+        className="rounded-3xl p-3 sm:p-4 w-full sm:max-w-215 sm:w-fit glass-surface-soft glass-noise ring-1 ring-white/25"
         style={{
           clipPath: "inset(0 round 1rem)",
           maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
         }}
       >
         {displayText && (
-          <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
+          <div className="text-sm overflow-wrap-anywhere">
             {parsed.mentions && parsed.mentions.length > 0 ? (
               <p className="whitespace-pre-wrap">
                 {renderTextWithMentions(displayText, parsed.mentions)}

package/src/components/chat-composer.tsx

@@ -78,6 +78,8 @@ export function ChatComposer({
   setImages,
   setPreviewImage,
   botEnabled,
+  botLoaded,
+  botLoadError,
   onToggleBot,
   handleSend,
   enqueueCurrent,
@@ -121,6 +123,8 @@ export function ChatComposer({
   setImages: Dispatch<SetStateAction<{ mime_type: string; base64_data: string; file_name?: string }[]>>;
   setPreviewImage: Dispatch<SetStateAction<{ mime_type: string; base64_data: string } | null>>;
   botEnabled: boolean;
+  botLoaded: boolean;
+  botLoadError: string | null;
   onToggleBot: () => Promise<boolean>;
   handleSend: () => void | Promise<void>;
   enqueueCurrent: () => void;
@@ -677,47 +681,86 @@ export function ChatComposer({
                 Queue
               </Button>
 
-              <div className="relative group">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  disabled={busy || botToggling}
+              <button
+                type="button"
+                disabled={busy || botToggling || !botLoaded}
+                className={cn(
+                  "relative h-8 px-3 rounded-xl transition-all duration-200",
+                  "flex items-center gap-1.5",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  botEnabled
+                    ? "bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg shadow-emerald-500/25"
+                    : botLoadError
+                      ? "bg-red-500/10 hover:bg-red-500/20 text-red-500 ring-1 ring-red-500/30"
+                      : "bg-white/10 hover:bg-white/20 text-muted-foreground"
+                )}
+                onClick={async () => {
+                  if (busy || botToggling) return;
+                  if (!botLoaded) return;
+                  if (!botEnabled) {
+                    setBotConfirmOpen(true);
+                    return;
+                  }
+                  setBotToggling(true);
+                  try {
+                    await onToggleBot();
+                  } finally {
+                    setBotToggling(false);
+                  }
+                }}
+                aria-label={botEnabled ? "Stop bot" : "Start bot"}
+                title={
+                  !botLoaded
+                    ? "Bot status loading…"
+                    : botToggling
+                      ? "Turning…"
+                      : botLoadError
+                        ? "Bot state sync error"
+                        : botEnabled
+                          ? "Bot is active - click to stop"
+                          : "Start bot mode"
+                }
+              >
+                {/* Custom SVG icon */}
+                <svg
                   className={cn(
-                    "relative h-9 w-9 rounded-2xl",
-                    "hover:bg-white/40",
-                    botEnabled ? "text-primary" : "text-muted-foreground",
-                    (busy || botToggling) && "opacity-60 cursor-not-allowed"
+                    "w-4 h-4 transition-transform duration-200",
+                    botEnabled && "scale-110"
                   )}
-                  onClick={async () => {
-                    if (busy || botToggling) return;
-                    if (!botEnabled) {
-                      setBotConfirmOpen(true);
-                      return;
-                    }
-                    setBotToggling(true);
-                    try {
-                      await onToggleBot();
-                    } finally {
-                      setBotToggling(false);
-                    }
-                  }}
-                  aria-label={botEnabled ? "Stop bot" : "Start bot"}
-                  title={botToggling ? "Turning…" : botEnabled ? "Stop bot" : "Start bot"}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                 >
-                  {botEnabled && (
-                    <span className="pointer-events-none absolute inset-0 rounded-xl">
-                      <span className="absolute inset-0 rounded-2xl bg-primary/15 blur-md animate-pulse" />
-                    </span>
-                  )}
-                  <Bot
-                    className={cn(
-                      "relative z-10 h-5 w-5",
-                      botEnabled && "drop-shadow-[0_0_12px_rgba(99,102,241,0.45)]"
-                    )}
-                  />
-                </Button>
-              </div>
+                  {/* Robot head */}
+                  <rect x="6" y="8" width="12" height="10" rx="2" />
+                  {/* Antenna */}
+                  <path d="M12 8V5" />
+                  <circle cx="12" cy="4" r="1" fill="currentColor" />
+                  {/* Eyes */}
+                  <circle cx="9.5" cy="12" r="1" fill="currentColor" />
+                  <circle cx="14.5" cy="12" r="1" fill="currentColor" />
+                  {/* Mouth */}
+                  <path d="M9 15h6" />
+                  {/* Arms */}
+                  <path d="M6 13H4" />
+                  <path d="M20 13h-2" />
+                </svg>
+                
+                <span className="text-xs font-medium">
+                  {botToggling ? "..." : botEnabled ? "ON" : "Bot"}
+                </span>
+                
+                {/* Status indicator dot */}
+                {!botLoaded && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />
+                )}
+                {botLoadError && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
+                )}
+              </button>
             </div>
 
             <Button

package/src/components/chat-view.tsx

@@ -80,6 +80,8 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
   const imagesRef = useRef(images);
 
   const [botEnabled, setBotEnabled] = useState(false);
+  const [botLoaded, setBotLoaded] = useState(false);
+  const [botLoadError, setBotLoadError] = useState<string | null>(null);
 
   const { soundEnabled, setSoundEnabled, playDing } = useAudioNotification();
 
@@ -119,6 +121,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
     })()
   );
   const botTickBusyRef = useRef(false);
+  const currentConvRef = useRef({ type, id });
 
   const nextCursorRef = useRef<string | null>(null);
   const loadingMoreRef = useRef(false);
@@ -282,11 +285,16 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
   }, [id, refreshLatest, setNotice, type]);
 
   const toggleBot = useCallback(async (): Promise<boolean> => {
+    if (!botLoaded) {
+      setNotice("Bot status is still loading");
+      return botEnabled;
+    }
     const prev = botEnabled;
     const next = !prev;
     try {
       await updateBotEnabled(type, id, next);
       setBotEnabled(next);
+      setBotLoadError(null);
       if (next) void triggerBotTickOnce();
       return next;
     } catch {
@@ -294,24 +302,72 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
       setNotice("Failed to toggle bot");
       return prev;
     }
-  }, [botEnabled, id, setNotice, triggerBotTickOnce, type]);
+  }, [botEnabled, botLoaded, id, setNotice, triggerBotTickOnce, type]);
 
   useEffect(() => {
     let cancelled = false;
+    // Update current conversation ref
+    currentConvRef.current = { type, id };
+    
+    // Immediately reset bot state when switching conversations
+    setBotEnabled(false);
+    setBotLoaded(false);
+    setBotLoadError(null);
+    botTickBusyRef.current = false;
+    
     void (async () => {
       try {
         const res = await fetchBotEnabled(type, id);
-        if (cancelled) return;
+        // Check if conversation hasn't changed during async operation
+        if (cancelled || currentConvRef.current.type !== type || currentConvRef.current.id !== id) return;
         setBotEnabled(Boolean(res.enabled));
+        setBotLoaded(true);
+        setBotLoadError(null);
       } catch {
-        if (cancelled) return;
+        if (cancelled || currentConvRef.current.type !== type || currentConvRef.current.id !== id) return;
         setBotEnabled(false);
+        setBotLoaded(true);
+        setBotLoadError("Failed to sync bot state");
+        setNotice("Failed to sync bot state (may still be enabled in background)");
       }
     })();
     return () => {
       cancelled = true;
     };
-  }, [id, type]);
+  }, [id, type, setNotice]);
+
+  useEffect(() => {
+    if (!botLoaded) return;
+    let cancelled = false;
+
+    const tick = async () => {
+      if (cancelled) return;
+      if (document.visibilityState !== "visible") return;
+      try {
+        const res = await fetchBotEnabled(type, id);
+        // Check if conversation hasn't changed during async operation
+        if (cancelled || currentConvRef.current.type !== type || currentConvRef.current.id !== id) return;
+        const next = Boolean(res.enabled);
+        setBotEnabled(next);
+        setBotLoadError(null);
+      } catch {
+        if (cancelled || currentConvRef.current.type !== type || currentConvRef.current.id !== id) return;
+        setBotLoadError("Failed to sync bot state");
+      }
+    };
+
+    const interval = setInterval(() => void tick(), 3000);
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") void tick();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      cancelled = true;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      clearInterval(interval);
+    };
+  }, [botLoaded, id, type]);
 
   useEffect(() => {
     if (!botEnabled) return;
@@ -802,7 +858,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         onBack={onBack}
         busy={busy}
         canSend={canSend}
-        hasPendingRequests={hasPendingRequests}
+        hasPendingRequests={pendingRequests.length > 0}
         input={input}
         conversationMode={conversationMode}
         setConversationMode={setConversationMode}
@@ -811,8 +867,10 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         setImages={setImages}
         setPreviewImage={setPreviewImage}
         botEnabled={botEnabled}
+        botLoaded={botLoaded}
+        botLoadError={botLoadError}
         onToggleBot={toggleBot}
-        handleSend={send}
+        handleSend={() => void send()}
         enqueueCurrent={enqueueCurrent}
         queue={queue}
         removeQueued={removeQueued}
@@ -834,7 +892,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         pointerInMentionRef={pointerInMentionRef}
         mentionScrollTopRef={mentionScrollTopRef}
         closeMention={closeMention}
-        insertMention={insertMention}
+        insertMention={insertMentionAtCursor}
         updateMentionFromCursor={updateMentionFromCursor}
         draftMentions={mentions}
         setDraftMentions={setMentions}

package/src/components/conversation-list.tsx

@@ -332,14 +332,19 @@ export function ConversationList({
     };
   }, [ensureAvatarUrl, items]);
 
+  const loadDataRef = useRef(loadData);
+  useEffect(() => {
+    loadDataRef.current = loadData;
+  }, [loadData]);
+
   useEffect(() => {
     const t0 = setTimeout(() => {
-      void loadData();
+      void loadDataRef.current();
     }, 0);
 
     const tick = () => {
       if (document.visibilityState !== "visible") return;
-      void loadData();
+      void loadDataRef.current();
     };
 
     const interval = setInterval(tick, 10_000);
@@ -355,7 +360,7 @@ export function ConversationList({
       clearInterval(interval);
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
-  }, [loadData]);
+  }, []);
 
   useEffect(() => {
     if (!menu.open) return;
@@ -500,6 +505,16 @@ export function ConversationList({
     setPendingDelete([]);
   }, []);
 
+  useEffect(() => {
+    return () => {
+      // Clean up all pending delete timers on unmount
+      for (const timer of deleteTimersRef.current.values()) {
+        clearTimeout(timer);
+      }
+      deleteTimersRef.current.clear();
+    };
+  }, []);
+
   useEffect(() => {
     if (pendingDelete.length > 0) {
       queueMicrotask(() => setUndoToastKey((v) => v + 1));

package/src/hooks/use-conversation-timeline.ts

@@ -45,6 +45,16 @@ export function useConversationTimeline({
 
   const loadSeqRef = useRef(0);
   const pendingNonPauseSeenRef = useRef<Set<string>>(new Set());
+  const soundEnabledRef = useRef(soundEnabled);
+  const playDingRef = useRef(playDing);
+
+  useEffect(() => {
+    soundEnabledRef.current = soundEnabled;
+  }, [soundEnabled]);
+
+  useEffect(() => {
+    playDingRef.current = playDing;
+  }, [playDing]);
 
   const keyForItem = useCallback((item: AgentTimelineItem) => {
     return item.item_type === "request"
@@ -115,7 +125,7 @@ export function useConversationTimeline({
       const { items } = await fetchPage(null, pageSize);
       const asc = [...items].reverse();
 
-      if (document.visibilityState === "visible" && soundEnabled) {
+      if (document.visibilityState === "visible" && soundEnabledRef.current) {
         const seen = pendingNonPauseSeenRef.current;
         let shouldDing = false;
         for (const it of asc) {
@@ -129,7 +139,7 @@ export function useConversationTimeline({
           }
         }
         if (shouldDing) {
-          void playDing();
+          void playDingRef.current();
         }
       }
 
@@ -147,7 +157,7 @@ export function useConversationTimeline({
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
     }
-  }, [fetchPage, isPauseRequest, keyForItem, pageSize, playDing, setError, soundEnabled]);
+  }, [fetchPage, isPauseRequest, keyForItem, pageSize, setError]);
 
   const loadMore = useCallback(
     async (before: string) => {

package/src/hooks/use-message-queue.ts

@@ -198,10 +198,15 @@ export function useMessageQueue({
     return () => window.removeEventListener("cue-console:queueUpdated", onQueueUpdated);
   }, [refreshQueue]);
 
+  const refreshQueueRef = useRef(refreshQueue);
+  useEffect(() => {
+    refreshQueueRef.current = refreshQueue;
+  }, [refreshQueue]);
+
   useEffect(() => {
     const tick = () => {
       if (document.visibilityState !== "visible") return;
-      void refreshQueue();
+      void refreshQueueRef.current();
     };
 
     const interval = setInterval(tick, 10_000);
@@ -216,7 +221,7 @@ export function useMessageQueue({
       document.removeEventListener("visibilitychange", onVisibilityChange);
       clearInterval(interval);
     };
-  }, [refreshQueue]);
+  }, []);
 
   return {
     queue,

package/src/lib/db.ts

@@ -8,18 +8,43 @@ import type { UserResponse, Group } from "./types";
 const DB_PATH = join(homedir(), ".cue", "cue.db");
 
 let db: Database.Database | null = null;
+let lastCheckpoint = 0;
 
 export function getDb(): Database.Database {
   if (!db) {
     mkdirSync(join(homedir(), ".cue"), { recursive: true });
     db = new Database(DB_PATH);
     db.pragma("journal_mode = WAL");
+    db.pragma("wal_autocheckpoint = 1000");
     initTables();
   }
 
+  // Periodic WAL checkpoint to prevent unbounded growth
+  const now = Date.now();
+  if (now - lastCheckpoint > 60000) {
+    lastCheckpoint = now;
+    try {
+      db.pragma("wal_checkpoint(PASSIVE)");
+    } catch {
+      // ignore checkpoint errors
+    }
+  }
+
   return db;
 }
 
+export function closeDb(): void {
+  if (db) {
+    try {
+      db.pragma("wal_checkpoint(TRUNCATE)");
+      db.close();
+    } catch {
+      // ignore
+    }
+    db = null;
+  }
+}
+
 function filesRootDir(): string {
   return join(homedir(), ".cue", "files");
 }

package/src/lib/perf-monitor.ts

@@ -0,0 +1,140 @@
+/**
+ * Performance monitoring utility to track interval leaks and resource usage
+ * Usage: Open browser console and run: localStorage.setItem('cue-console:perf-monitor', '1')
+ */
+
+interface IntervalStats {
+  count: number;
+  lastCheck: number;
+}
+
+class PerformanceMonitor {
+  private originalSetInterval: typeof setInterval;
+  private originalClearInterval: typeof clearInterval;
+  private activeIntervals = new Map<number, { stack: string; created: number }>();
+  private stats: IntervalStats = { count: 0, lastCheck: Date.now() };
+  private monitorInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    this.originalSetInterval = window.setInterval.bind(window);
+    this.originalClearInterval = window.clearInterval.bind(window);
+  }
+
+  start() {
+    if (this.monitorInterval) return;
+
+    // Intercept setInterval
+    window.setInterval = ((handler: TimerHandler, timeout?: number, ...args: unknown[]) => {
+      const stack = new Error().stack || '';
+      const id = this.originalSetInterval(handler, timeout, ...args);
+      this.activeIntervals.set(id as number, {
+        stack,
+        created: Date.now(),
+      });
+      return id;
+    }) as typeof setInterval;
+
+    // Intercept clearInterval
+    window.clearInterval = ((id?: number) => {
+      if (id !== undefined) {
+        this.activeIntervals.delete(id);
+      }
+      this.originalClearInterval(id);
+    }) as typeof clearInterval;
+
+    // Monitor every 10 seconds
+    this.monitorInterval = this.originalSetInterval(() => {
+      this.report();
+    }, 10000);
+
+    console.log('[PerfMonitor] Started tracking intervals');
+  }
+
+  stop() {
+    if (!this.monitorInterval) return;
+
+    // Restore original functions
+    window.setInterval = this.originalSetInterval;
+    window.clearInterval = this.originalClearInterval;
+
+    this.originalClearInterval(this.monitorInterval);
+    this.monitorInterval = null;
+
+    console.log('[PerfMonitor] Stopped tracking intervals');
+  }
+
+  report() {
+    const now = Date.now();
+    const elapsed = (now - this.stats.lastCheck) / 1000;
+    const currentCount = this.activeIntervals.size;
+    const delta = currentCount - this.stats.count;
+
+    console.group(`[PerfMonitor] Interval Report (${elapsed.toFixed(1)}s elapsed)`);
+    console.log(`Active intervals: ${currentCount} (${delta >= 0 ? '+' : ''}${delta})`);
+
+    if (delta > 0) {
+      console.warn(`⚠️ Interval leak detected! ${delta} new intervals not cleaned up`);
+      
+      // Show recent intervals
+      const recent = Array.from(this.activeIntervals.entries())
+        .filter(([, info]) => now - info.created < 15000)
+        .slice(0, 5);
+
+      if (recent.length > 0) {
+        console.log('Recent intervals (last 15s):');
+        recent.forEach(([id, info]) => {
+          const age = ((now - info.created) / 1000).toFixed(1);
+          const location = info.stack.split('\n')[3]?.trim() || 'unknown';
+          console.log(`  ID ${id} (${age}s ago): ${location}`);
+        });
+      }
+    }
+
+    // Memory info if available
+    if ('memory' in performance && (performance as { memory?: { usedJSHeapSize: number; totalJSHeapSize: number } }).memory) {
+      const mem = (performance as { memory: { usedJSHeapSize: number; totalJSHeapSize: number } }).memory;
+      const usedMB = (mem.usedJSHeapSize / 1024 / 1024).toFixed(1);
+      const totalMB = (mem.totalJSHeapSize / 1024 / 1024).toFixed(1);
+      console.log(`Memory: ${usedMB}MB / ${totalMB}MB`);
+    }
+
+    console.groupEnd();
+
+    this.stats = { count: currentCount, lastCheck: now };
+  }
+
+  getActiveCount(): number {
+    return this.activeIntervals.size;
+  }
+}
+
+// Singleton instance
+let monitor: PerformanceMonitor | null = null;
+
+export function startPerfMonitor() {
+  if (!monitor) {
+    monitor = new PerformanceMonitor();
+  }
+  monitor.start();
+}
+
+export function stopPerfMonitor() {
+  if (monitor) {
+    monitor.stop();
+  }
+}
+
+export function getPerfMonitorStats() {
+  return monitor ? { activeIntervals: monitor.getActiveCount() } : null;
+}
+
+// Auto-start if enabled in localStorage
+if (typeof window !== 'undefined') {
+  try {
+    if (window.localStorage.getItem('cue-console:perf-monitor') === '1') {
+      startPerfMonitor();
+    }
+  } catch {
+    // ignore
+  }
+}