cue-console 0.1.19 → 0.1.20

package/package.json

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

package/src/app/page.tsx

@@ -5,7 +5,7 @@ import { ConversationList } from "@/components/conversation-list";
 import { ChatView } from "@/components/chat-view";
 import { CreateGroupDialog } from "@/components/create-group-dialog";
 import { MessageCircle } from "lucide-react";
-import { claimWorkerLease, processQueueTick } from "@/lib/actions";
+import { claimWorkerLease, fetchBotEnabledConversations, processBotTick, processQueueTick } from "@/lib/actions";
 
 export default function Home() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -114,6 +114,96 @@ export default function Home() {
     };
   }, []);
 
+  useEffect(() => {
+    let stopped = false;
+    const holderId =
+      (globalThis.crypto && "randomUUID" in globalThis.crypto
+        ? (globalThis.crypto as Crypto).randomUUID()
+        : `${Date.now()}-${Math.random().toString(16).slice(2)}`);
+    const leaseKey = "cue-console:global-bot-worker";
+    const leaseTtlMs = 12_000;
+    const claimEveryMs = 4_000;
+    const tickEveryMs = 2_500;
+
+    let isLeader = false;
+    let tickTimer: ReturnType<typeof setInterval> | null = null;
+    let claimTimer: ReturnType<typeof setInterval> | null = null;
+    let rrIndex = 0;
+
+    const stopTick = () => {
+      if (tickTimer) {
+        clearInterval(tickTimer);
+        tickTimer = null;
+      }
+    };
+
+    const startTick = () => {
+      if (tickTimer) return;
+      tickTimer = setInterval(() => {
+        if (document.visibilityState !== "visible") return;
+        void (async () => {
+          try {
+            const enabled = await fetchBotEnabledConversations(200);
+            if (!Array.isArray(enabled) || enabled.length === 0) return;
+
+            const maxPerTick = 10;
+            const n = Math.min(enabled.length, maxPerTick);
+            for (let i = 0; i < n; i += 1) {
+              const idx = (rrIndex + i) % enabled.length;
+              const row = enabled[idx] as { conv_type?: unknown; conv_id?: unknown };
+              const convType = row?.conv_type === "group" ? "group" : "agent";
+              const convId = String(row?.conv_id || "").trim();
+              if (!convId) continue;
+              await processBotTick({ holderId, convType, convId, limit: 80 });
+            }
+            rrIndex = (rrIndex + n) % enabled.length;
+          } catch {
+            // ignore
+          }
+        })();
+      }, tickEveryMs);
+    };
+
+    const claimOnce = async () => {
+      try {
+        const res = await claimWorkerLease({ leaseKey, holderId, ttlMs: leaseTtlMs });
+        const nextLeader = Boolean(res.acquired && res.holderId === holderId);
+        if (nextLeader !== isLeader) {
+          isLeader = nextLeader;
+          if (isLeader) startTick();
+          else stopTick();
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    const boot = async () => {
+      await claimOnce();
+      if (stopped) return;
+      claimTimer = setInterval(() => {
+        if (document.visibilityState !== "visible") return;
+        void claimOnce();
+      }, claimEveryMs);
+    };
+
+    void boot();
+
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        void claimOnce();
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      stopped = true;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      stopTick();
+      if (claimTimer) clearInterval(claimTimer);
+    };
+  }, []);
+
   useEffect(() => {
     try {
       window.localStorage.setItem("cuehub.sidebarCollapsed", sidebarCollapsed ? "1" : "0");

package/src/components/chat/avatar-picker-dialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { getAgentEmoji } from "@/lib/utils";
+import Image from "next/image";
 
 interface AvatarPickerDialogProps {
   open: boolean;
@@ -41,7 +42,14 @@ export function AvatarPickerDialog({
             <div className="flex items-center gap-3">
               <div className="h-14 w-14 rounded-full bg-muted overflow-hidden">
                 {currentAvatarUrl ? (
-                  <img src={currentAvatarUrl} alt="" className="h-full w-full" />
+                  <Image
+                    src={currentAvatarUrl}
+                    alt=""
+                    width={56}
+                    height={56}
+                    unoptimized
+                    className="h-full w-full"
+                  />
                 ) : (
                   <div className="flex h-full w-full items-center justify-center text-xl">
                     {target.kind === "group" ? "👥" : getAgentEmoji(target.id)}
@@ -70,7 +78,14 @@ export function AvatarPickerDialog({
                     title="Apply"
                   >
                     {c.url ? (
-                      <img src={c.url} alt="" className="h-full w-full" />
+                      <Image
+                        src={c.url}
+                        alt=""
+                        width={48}
+                        height={48}
+                        unoptimized
+                        className="h-full w-full"
+                      />
                     ) : null}
                   </button>
                 ))}

package/src/components/chat/chat-header.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { cn, getAgentEmoji } from "@/lib/utils";
 import { ChevronLeft, Github } from "lucide-react";
+import Image from "next/image";
 
 interface ChatHeaderProps {
   type: "agent" | "group";
@@ -11,6 +12,8 @@ interface ChatHeaderProps {
   titleDisplay: string;
   avatarUrl: string;
   members: string[];
+  agentRuntime?: string;
+  projectName?: string;
   onBack?: () => void;
   onAvatarClick: () => void;
   onTitleChange: (newTitle: string) => Promise<void>;
@@ -22,6 +25,8 @@ export function ChatHeader({
   titleDisplay,
   avatarUrl,
   members,
+  agentRuntime,
+  projectName,
   onBack,
   onAvatarClick,
   onTitleChange,
@@ -29,6 +34,8 @@ export function ChatHeader({
   const [editingTitle, setEditingTitle] = useState(false);
   const [titleDraft, setTitleDraft] = useState("");
 
+  const showAgentTags = type === "agent" && (agentRuntime || projectName);
+
   const beginEditTitle = () => {
     setEditingTitle(true);
     setTitleDraft(titleDisplay);
@@ -65,7 +72,14 @@ export function ChatHeader({
           title="Change avatar"
         >
           {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="h-full w-full" />
+            <Image
+              src={avatarUrl}
+              alt=""
+              width={36}
+              height={36}
+              unoptimized
+              className="h-full w-full"
+            />
           ) : (
             <span className="flex h-full w-full items-center justify-center text-lg">
               {type === "group" ? "👥" : getAgentEmoji(id)}
@@ -102,6 +116,20 @@ export function ChatHeader({
               {titleDisplay}
             </h2>
           )}
+          {showAgentTags && (
+            <div className="mt-0.5 flex flex-wrap gap-1">
+              {agentRuntime && (
+                <span className="inline-flex items-center rounded-full border bg-white/55 px-2 py-0.5 text-[10px] text-muted-foreground">
+                  {agentRuntime}
+                </span>
+              )}
+              {projectName && (
+                <span className="inline-flex items-center rounded-full border bg-white/55 px-2 py-0.5 text-[10px] text-muted-foreground">
+                  {projectName}
+                </span>
+              )}
+            </div>
+          )}
           {type === "group" && members.length > 0 && (
             <p className="text-xs text-muted-foreground truncate">
               {members.length} member{members.length === 1 ? "" : "s"}

package/src/components/chat/image-preview-dialog.tsx

@@ -6,6 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import Image from "next/image";
 
 interface ImagePreviewDialogProps {
   image: { mime_type: string; base64_data: string } | null;
@@ -21,10 +22,13 @@ export function ImagePreviewDialog({ image, onClose }: ImagePreviewDialogProps)
         </DialogHeader>
         {image && (
           <div className="flex items-center justify-center">
-            <img
+            <Image
               src={`data:${image.mime_type};base64,${image.base64_data}`}
               alt=""
-              className="max-h-[70vh] rounded-lg"
+              width={1200}
+              height={800}
+              unoptimized
+              className="max-h-[70vh] h-auto w-auto rounded-lg"
             />
           </div>
         )}

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

@@ -6,6 +6,7 @@ import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { PayloadCard } from "@/components/payload-card";
 import type { CueRequest } from "@/lib/actions";
 import { Copy, Check } from "lucide-react";
+import Image from "next/image";
 
 interface MessageBubbleProps {
   request: CueRequest;
@@ -110,7 +111,14 @@ export function MessageBubble({
           }}
         >
           {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="h-full w-full rounded-full" />
+            <Image
+              src={avatarUrl}
+              alt=""
+              width={36}
+              height={36}
+              unoptimized
+              className="h-full w-full rounded-full"
+            />
           ) : (
             getAgentEmoji(request.agent_id || "")
           )}

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

@@ -3,6 +3,7 @@ import { cn, formatFullTime } from "@/lib/utils";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import type { CueResponse } from "@/lib/actions";
 import { useConfig } from "@/contexts/config-context";
+import Image from "next/image";
 
 interface UserResponseBubbleProps {
   response: CueResponse;
@@ -143,11 +144,14 @@ export function UserResponseBubble({
               const b64 = String(obj?.inline_base64 || "");
               const img = { mime_type: mime, base64_data: b64 };
               return (
-                <img
+                <Image
                   key={i}
                   src={`data:${img.mime_type};base64,${img.base64_data}`}
                   alt=""
-                  className="max-h-32 max-w-full h-auto rounded cursor-pointer"
+                  width={512}
+                  height={256}
+                  unoptimized
+                  className="max-h-32 max-w-full h-auto w-auto rounded cursor-pointer"
                   onClick={() => onPreview?.(img)}
                 />
               );

package/src/components/chat-composer.tsx

@@ -21,6 +21,7 @@ import {
 import { cn, getAgentEmoji } from "@/lib/utils";
 import { setAgentDisplayName } from "@/lib/actions";
 import { Bot, CornerUpLeft, GripVertical, Plus, Send, Trash2, X } from "lucide-react";
+import Image from "next/image";
 
 type MentionDraft = {
   userId: string;
@@ -75,7 +76,6 @@ export function ChatComposer({
   setInput,
   images,
   setImages,
-  setNotice,
   setPreviewImage,
   botEnabled,
   onToggleBot,
@@ -119,7 +119,6 @@ export function ChatComposer({
   setInput: Dispatch<SetStateAction<string>>;
   images: { mime_type: string; base64_data: string; file_name?: string }[];
   setImages: Dispatch<SetStateAction<{ mime_type: string; base64_data: string; file_name?: string }[]>>;
-  setNotice: Dispatch<SetStateAction<string | null>>;
   setPreviewImage: Dispatch<SetStateAction<{ mime_type: string; base64_data: string } | null>>;
   botEnabled: boolean;
   onToggleBot: () => Promise<boolean>;
@@ -317,9 +316,12 @@ export function ChatComposer({
               {images.map((img, i) => (
                 <div key={i} className="relative shrink-0">
                   {img.mime_type.startsWith("image/") ? (
-                    <img
+                    <Image
                       src={`data:${img.mime_type};base64,${img.base64_data}`}
                       alt=""
+                      width={64}
+                      height={64}
+                      unoptimized
                       className="h-16 w-16 rounded-xl object-cover shadow-sm ring-1 ring-border/60 cursor-pointer"
                       onClick={() => setPreviewImage(img)}
                     />

package/src/components/chat-view.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useRef,
   useState,
-  type ClipboardEvent,
 } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
@@ -19,14 +18,16 @@ import {
 } from "@/components/ui/dialog";
 import { cn, getAgentEmoji } from "@/lib/utils";
 import { randomSeed } from "@/lib/avatar";
+import Image from "next/image";
 import {
   setAgentDisplayName,
   setGroupName,
   submitResponse,
   cancelRequest,
-  batchRespond,
   processBotTick,
-  type CueRequest,
+  fetchBotEnabled,
+  updateBotEnabled,
+  fetchAgentEnv,
 } from "@/lib/actions";
 import { ChatComposer } from "@/components/chat-composer";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -45,7 +46,7 @@ import { useMessageSender } from "@/hooks/use-message-sender";
 import { useFileHandler } from "@/hooks/use-file-handler";
 import { useDraftPersistence } from "@/hooks/use-draft-persistence";
 import { isPauseRequest, filterPendingRequests } from "@/lib/chat-logic";
-import type { ChatType, MentionDraft } from "@/types/chat";
+import type { ChatType } from "@/types/chat";
 import { ArrowDown } from "lucide-react";
 
 function perfEnabled(): boolean {
@@ -78,10 +79,6 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
   const deferredInput = useDeferredValue(input);
   const imagesRef = useRef(images);
 
-  const botStorageKey = useMemo(() => {
-    return `cue-console:botEnabled:${type}:${id}`;
-  }, [type, id]);
-
   const [botEnabled, setBotEnabled] = useState(false);
 
   const { soundEnabled, setSoundEnabled, playDing } = useAudioNotification();
@@ -105,6 +102,8 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
   const [members, setMembers] = useState<string[]>([]);
   const [agentNameMap, setAgentNameMap] = useState<Record<string, string>>({});
   const [groupTitle, setGroupTitle] = useState<string>(name);
+  const [agentRuntime, setAgentRuntime] = useState<string | undefined>(undefined);
+  const [projectName, setProjectName] = useState<string | undefined>(undefined);
   const [previewImage, setPreviewImage] = useState<{ mime_type: string; base64_data: string } | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
 
@@ -161,12 +160,11 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
 
   const {
     queue,
-    refreshQueue,
+    setQueue,
     enqueueCurrent,
     removeQueued,
     recallQueued,
     reorderQueue,
-    setQueue,
   } = useMessageQueue({
     type,
     id,
@@ -196,6 +194,32 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
     return groupTitle;
   }, [agentNameMap, groupTitle, id, type]);
 
+  useEffect(() => {
+    if (type !== "agent") {
+      setAgentRuntime(undefined);
+      setProjectName(undefined);
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      try {
+        const env = await fetchAgentEnv(id);
+        if (cancelled) return;
+        setAgentRuntime(env.agentRuntime);
+        setProjectName(env.projectName);
+      } catch {
+        if (cancelled) return;
+        setAgentRuntime(undefined);
+        setProjectName(undefined);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [id, type]);
+
   useEffect(() => {
     if (type !== "group") return;
     queueMicrotask(() => setGroupTitle(name));
@@ -260,9 +284,9 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
   const toggleBot = useCallback(async (): Promise<boolean> => {
     const prev = botEnabled;
     const next = !prev;
-    setBotEnabled(next);
     try {
-      window.localStorage.setItem(botStorageKey, next ? "1" : "0");
+      await updateBotEnabled(type, id, next);
+      setBotEnabled(next);
       if (next) void triggerBotTickOnce();
       return next;
     } catch {
@@ -270,16 +294,24 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
       setNotice("Failed to toggle bot");
       return prev;
     }
-  }, [botEnabled, botStorageKey, setNotice, triggerBotTickOnce]);
+  }, [botEnabled, id, setNotice, triggerBotTickOnce, type]);
 
   useEffect(() => {
-    try {
-      const raw = window.localStorage.getItem(botStorageKey);
-      setBotEnabled(raw === "1");
-    } catch {
-      setBotEnabled(false);
-    }
-  }, [botStorageKey]);
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await fetchBotEnabled(type, id);
+        if (cancelled) return;
+        setBotEnabled(Boolean(res.enabled));
+      } catch {
+        if (cancelled) return;
+        setBotEnabled(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [id, type]);
 
   useEffect(() => {
     if (!botEnabled) return;
@@ -371,7 +403,6 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         await ensureAvatarUrl("agent", id);
         if (t0) {
           const t1 = performance.now();
-          // eslint-disable-next-line no-console
           console.log(`[perf] ensureAvatarUrl(agent) id=${id} ${(t1 - t0).toFixed(1)}ms`);
         }
       })();
@@ -384,7 +415,6 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
       await ensureAvatarUrl("group", id);
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(`[perf] ensureAvatarUrl(group) id=${id} ${(t1 - t0).toFixed(1)}ms`);
       }
     })();
@@ -399,7 +429,6 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
       }
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(`[perf] ensureAvatarUrl(group members) group=${id} n=${members.length} ${(t1 - t0).toFixed(1)}ms`);
       }
     })();
@@ -485,7 +514,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
     setImages([]);
     imagesRef.current = [];
     setMentions([]);
-  }, [type, id]);
+  }, [type, id, setBusy, setError, setImages, setInput, setMentions, setNotice]);
 
   const loadMore = useCallback(async () => {
     if (!nextCursor) return;
@@ -528,7 +557,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
     el.addEventListener("scroll", onScroll, { passive: true });
     onScroll();
     return () => el.removeEventListener("scroll", onScroll);
-  }, []);
+  }, [loadMore]);
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -619,7 +648,7 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
     if (!notice) return;
     const t = setTimeout(() => setNotice(null), 2200);
     return () => clearTimeout(t);
-  }, [notice]);
+  }, [notice, setNotice]);
 
   useEffect(() => {
     const el = textareaRef.current;
@@ -674,6 +703,8 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         titleDisplay={titleDisplay}
         avatarUrl={type === "group" ? avatarUrlMap[`group:${id}`] : avatarUrlMap[`agent:${id}`]}
         members={members}
+        agentRuntime={agentRuntime}
+        projectName={projectName}
         onBack={onBack}
         onAvatarClick={() => openAvatarPicker({ kind: type, id })}
         onTitleChange={handleTitleChange}
@@ -778,7 +809,6 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
         setInput={setInput}
         images={images}
         setImages={setImages}
-        setNotice={setNotice}
         setPreviewImage={setPreviewImage}
         botEnabled={botEnabled}
         onToggleBot={toggleBot}
@@ -820,10 +850,13 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
           {previewImage ? (
             <div className="flex items-center justify-center">
               {((img) => (
-                <img
+                <Image
                   src={`data:${img.mime_type};base64,${img.base64_data}`}
                   alt=""
-                  className="max-h-[70vh] rounded-lg"
+                  width={1200}
+                  height={800}
+                  unoptimized
+                  className="max-h-[70vh] h-auto w-auto rounded-lg"
                 />
               ))(previewImage!)}
             </div>
@@ -844,7 +877,14 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
                   return (
                     <div className="h-14 w-14 rounded-full bg-muted overflow-hidden">
                       {avatarUrlMap[key] ? (
-                        <img src={avatarUrlMap[key]} alt="" className="h-full w-full" />
+                        <Image
+                          src={avatarUrlMap[key]}
+                          alt=""
+                          width={56}
+                          height={56}
+                          unoptimized
+                          className="h-full w-full"
+                        />
                       ) : (
                         <div className="flex h-full w-full items-center justify-center text-xl">
                           {target.kind === "group" ? "👥" : getAgentEmoji(id)}
@@ -890,7 +930,16 @@ function ChatViewContent({ type, id, name, onBack }: ChatViewProps) {
                     }}
                     title="Apply"
                   >
-                    {c.url ? <img src={c.url} alt="" className="h-full w-full" /> : null}
+                    {c.url ? (
+                      <Image
+                        src={c.url}
+                        alt=""
+                        width={48}
+                        height={48}
+                        unoptimized
+                        className="h-full w-full"
+                      />
+                    ) : null}
                   </button>
                 ))}
                 </div>

package/src/components/conversation-list.tsx

@@ -38,19 +38,20 @@ import {
 } from "@/lib/actions";
 import {
   Archive,
-  Plus,
-  MessageCircle,
-  Search,
-  ChevronDown,
-  Users,
   Bot,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
+  MessageCircle,
   MoreHorizontal,
   Pin,
+  Plus,
+  Search,
   Settings,
+  Users,
   X,
 } from "lucide-react";
+import Image from "next/image";
 import { ConfirmDialog } from "@/components/confirm-dialog";
 
 function perfEnabled(): boolean {
@@ -135,8 +136,7 @@ export function ConversationList({
         setPendingRequestTimeoutMs(String(cfg.pending_request_timeout_ms ?? 600000));
         setBotModeReplyText(
           String(
-            (cfg as any).bot_mode_reply_text ||
-              DEFAULT_USER_CONFIG.bot_mode_reply_text
+            cfg.bot_mode_reply_text || DEFAULT_USER_CONFIG.bot_mode_reply_text
           )
         );
         try {
@@ -175,7 +175,6 @@ export function ConversationList({
       setAvatarUrlMap((prev) => ({ ...prev, [key]: url }));
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(`[perf] ensureAvatarUrl kind=${kind} id=${rawId} ${(t1 - t0).toFixed(1)}ms`);
       }
     } catch {
@@ -254,7 +253,6 @@ export function ConversationList({
     setArchivedCount(count);
     if (t0) {
       const t1 = performance.now();
-      // eslint-disable-next-line no-console
       console.log(`[perf] conversationList loadData view=${view} items=${data.length} ${(t1 - t0).toFixed(1)}ms`);
     }
   }, [view]);
@@ -428,7 +426,6 @@ export function ConversationList({
   }, [agentsAll, pinnedKeys, pinnedSet]);
 
   const groupsPendingTotal = groups.reduce((sum, g) => sum + g.pendingCount, 0);
-  const agentsPendingTotal = agents.reduce((sum, a) => sum + a.pendingCount, 0);
 
   const isCollapsed = !!collapsed;
 
@@ -443,14 +440,6 @@ export function ConversationList({
 
   const selectedKeyList = useMemo(() => Array.from(selectedKeys), [selectedKeys]);
 
-  const isSelectable = useCallback(
-    (item: ConversationItem) => {
-      if (view === "archived") return true;
-      return true;
-    },
-    [view]
-  );
-
   const toggleSelected = useCallback(
     (key: string) => {
       setSelectedKeys((prev) => {
@@ -542,7 +531,7 @@ export function ConversationList({
       confirmLabel: "Delete",
       destructive: true,
     });
-  }, [selectedKeyList, scheduleDelete, clearBulk]);
+  }, [selectedKeyList]);
 
   const handleArchiveAll = useCallback(async () => {
     if (view !== "active") return;
@@ -558,7 +547,7 @@ export function ConversationList({
       description: `Archive ${keys.length} conversation(s) (current filter, only pending == 0). You can unarchive later.`,
       confirmLabel: "Archive",
     });
-  }, [view, filtered, loadData]);
+  }, [view, filtered]);
 
   return (
     <div
@@ -840,10 +829,9 @@ export function ConversationList({
                       bulkMode={bulkMode}
                       checked={selectedKeys.has(conversationKey(item))}
                       onToggleChecked={() => toggleSelected(conversationKey(item))}
-                      view={view}
                       onClick={() => {
                         if (bulkMode) {
-                          if (isSelectable(item)) toggleSelected(conversationKey(item));
+                          toggleSelected(conversationKey(item));
                           return;
                         }
                         onSelect(item.id, "group", item.name);
@@ -883,10 +871,9 @@ export function ConversationList({
                       bulkMode={bulkMode}
                       checked={selectedKeys.has(conversationKey(item))}
                       onToggleChecked={() => toggleSelected(conversationKey(item))}
-                      view={view}
                       onClick={() => {
                         if (bulkMode) {
-                          if (isSelectable(item)) toggleSelected(conversationKey(item));
+                          toggleSelected(conversationKey(item));
                           return;
                         }
                         onSelect(item.id, "agent", item.name);
@@ -1377,7 +1364,14 @@ function ConversationIconButton({
       title={item.displayName}
     >
       {avatarUrl ? (
-        <img src={avatarUrl} alt="" className="h-7 w-7 rounded-full" />
+        <Image
+          src={avatarUrl}
+          alt=""
+          width={28}
+          height={28}
+          unoptimized
+          className="h-7 w-7 rounded-full"
+        />
       ) : (
         <span className="text-xl">{emoji}</span>
       )}
@@ -1397,7 +1391,6 @@ function ConversationItemCard({
   bulkMode,
   checked,
   onToggleChecked,
-  view,
 }: {
   item: ConversationItem;
   avatarUrl?: string;
@@ -1407,9 +1400,9 @@ function ConversationItemCard({
   bulkMode?: boolean;
   checked?: boolean;
   onToggleChecked?: () => void;
-  view?: "active" | "archived";
 }) {
   const emoji = item.type === "group" ? "👥" : getAgentEmoji(item.name);
+  const showAgentTags = item.type === "agent" && (item.agentRuntime || item.projectName);
 
   return (
     <button
@@ -1437,7 +1430,14 @@ function ConversationItemCard({
       <span className="relative h-9 w-9 shrink-0">
         <span className="flex h-full w-full items-center justify-center rounded-full bg-white/55 ring-1 ring-white/40 text-[18px] overflow-hidden">
           {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="h-full w-full rounded-full" />
+            <Image
+              src={avatarUrl}
+              alt=""
+              width={36}
+              height={36}
+              unoptimized
+              className="h-full w-full rounded-full"
+            />
           ) : (
             emoji
           )}
@@ -1458,6 +1458,20 @@ function ConversationItemCard({
             </span>
           )}
         </div>
+        {showAgentTags && (
+          <div className="mt-0.5 flex flex-wrap gap-1">
+            {item.agentRuntime && (
+              <span className="inline-flex items-center rounded-full border bg-white/55 px-2 py-0.5 text-[10px] text-muted-foreground">
+                {item.agentRuntime}
+              </span>
+            )}
+            {item.projectName && (
+              <span className="inline-flex items-center rounded-full border bg-white/55 px-2 py-0.5 text-[10px] text-muted-foreground">
+                {item.projectName}
+              </span>
+            )}
+          </div>
+        )}
         {item.lastMessage && (
           <p className="text-[11px] text-muted-foreground whitespace-nowrap leading-4">
             {truncateText(item.lastMessage.replace(/\n/g, ' '), 20)}

package/src/components/markdown-renderer.tsx

@@ -4,6 +4,7 @@ import { type ReactNode, useMemo } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
+import Image from "next/image";
 
 export function MarkdownRenderer({ children }: { children: string }) {
   const normalized = useMemo(() => {
@@ -40,7 +41,17 @@ export function MarkdownRenderer({ children }: { children: string }) {
       img: (props) => {
         const safeSrc = typeof props.src === "string" ? props.src : undefined;
         const safeAlt = typeof props.alt === "string" ? props.alt : "";
-        return <img {...props} src={safeSrc} alt={safeAlt} className="max-w-full h-auto" />;
+        if (!safeSrc) return null;
+        return (
+          <Image
+            src={safeSrc}
+            alt={safeAlt}
+            width={1200}
+            height={800}
+            unoptimized
+            className="max-w-full h-auto"
+          />
+        );
       },
       table: ({ children }: { children?: ReactNode }) => (
         <div className="mt-2 max-w-full overflow-auto">

package/src/hooks/use-avatar.ts

@@ -124,7 +124,6 @@ export function useAvatar() {
       }
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(
           `[perf] ensureAvatarUrl(group members) n=${members.length} ${(t1 - t0).toFixed(1)}ms`
         );

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

@@ -97,7 +97,6 @@ export function useConversationTimeline({
 
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(
           `[perf] bootstrapConversation type=${type} id=${id} items=${asc.length} queue=${res.queue.length} ${(t1 - t0).toFixed(1)}ms`
         );

package/src/hooks/use-mentions.ts

@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
   type Dispatch,
-  type MutableRefObject,
   type RefObject,
   type SetStateAction,
 } from "react";

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

@@ -54,7 +54,6 @@ export function useMessageQueue({
       setQueue(rows as QueuedMessage[]);
       if (t0) {
         const t1 = performance.now();
-        // eslint-disable-next-line no-console
         console.log(
           `[perf] fetchMessageQueue type=${type} id=${id} n=${rows.length} ${(t1 - t0).toFixed(1)}ms`
         );

package/src/lib/actions.ts

@@ -11,6 +11,8 @@ import {
   getAllAgents,
   getConversationMetaMap,
   getAgentDisplayNames,
+  getAgentEnv,
+  getAgentEnvMap,
   upsertAgentDisplayName,
   getAgentLastRequest,
   getPendingCountByAgent,
@@ -47,6 +49,9 @@ import {
   pinConversation,
   unpinConversation,
   listPinnedConversations,
+  getBotEnabledConversation,
+  setBotEnabledConversation,
+  listBotEnabledConversations,
   type ConversationType,
   type CueResponse,
 } from "./db";
@@ -409,6 +414,19 @@ export async function claimWorkerLease(args: {
   return acquireWorkerLease(args);
 }
 
+export async function fetchBotEnabled(type: ConversationType, id: string) {
+  return { enabled: getBotEnabledConversation(type, id) } as const;
+}
+
+export async function updateBotEnabled(type: ConversationType, id: string, enabled: boolean) {
+  setBotEnabledConversation(type, id, enabled);
+  return { success: true, enabled } as const;
+}
+
+export async function fetchBotEnabledConversations(limit?: number) {
+  return listBotEnabledConversations(limit);
+}
+
 // Responses
 export async function submitResponse(
   requestId: string,
@@ -561,6 +579,7 @@ export async function fetchConversationList(options?: {
     : groupsAll;
 
   const agentNameMap = getAgentDisplayNames(agents);
+  const agentEnvMap = getAgentEnvMap(agents);
 
   const groupIds = groups.map((g) => g.id);
   const groupMemberCounts = getGroupMemberCounts(groupIds);
@@ -647,6 +666,13 @@ export async function fetchConversationList(options?: {
       id: agent,
       name: agent,
       displayName: agentNameMap[agent] || agent,
+      agentRuntime: agentEnvMap[agent]?.agent_runtime || undefined,
+      projectName: (() => {
+        const p = agentEnvMap[agent]?.project_dir;
+        if (!p) return undefined;
+        const base = path.basename(String(p));
+        return base || undefined;
+      })(),
       pendingCount,
       lastMessage: (lastIsResp ? respMsg : reqMsg)?.slice(0, 50),
       lastTime: (lastIsResp ? lastRespTime : lastReqTime),
@@ -664,3 +690,20 @@ export async function fetchConversationList(options?: {
 
   return items;
 }
+
+export async function fetchAgentEnv(agentId: string): Promise<{
+  agentRuntime?: string;
+  projectName?: string;
+}> {
+  const id = String(agentId || "").trim();
+  if (!id) return {};
+  const env = getAgentEnv(id);
+  const agentRuntime = env?.agent_runtime || undefined;
+  const projectName = (() => {
+    const p = env?.project_dir;
+    if (!p) return undefined;
+    const base = path.basename(String(p));
+    return base || undefined;
+  })();
+  return { agentRuntime, projectName };
+}

package/src/lib/avatar.ts

@@ -126,7 +126,6 @@ export async function thumbsAvatarDataUrl(seed: string): Promise<string> {
 
   if (t0) {
     const t2 = performance.now();
-    // eslint-disable-next-line no-console
     console.log(
       `[perf] thumbsAvatarDataUrl seed=${String(seed).slice(0, 8)} import=${(t1 - t0).toFixed(1)}ms encode=${(
         t2 - t1

package/src/lib/db.ts

@@ -212,6 +212,16 @@ function initTables() {
     )
   `);
 
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS bot_enabled_conversations (
+      conv_type TEXT NOT NULL,
+      conv_id TEXT NOT NULL,
+      enabled INTEGER NOT NULL,
+      updated_at DATETIME NOT NULL,
+      PRIMARY KEY (conv_type, conv_id)
+    )
+  `);
+
   // Mode B: guide migrate and exit if an old DB exists.
   const versionRow = database
     .prepare(`SELECT value FROM schema_meta WHERE key = ?`)
@@ -286,6 +296,16 @@ function initTables() {
     )
   `);
 
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS agent_envs (
+      agent_id TEXT PRIMARY KEY,
+      agent_runtime TEXT,
+      project_dir TEXT,
+      agent_terminal TEXT,
+      updated_at DATETIME
+    )
+  `);
+
   database.exec(`
     CREATE TABLE IF NOT EXISTS cue_message_queue (
       id TEXT PRIMARY KEY,
@@ -411,6 +431,46 @@ export function acquireWorkerLease(args: {
 
 export type ConversationType = "agent" | "group";
 
+export function setBotEnabledConversation(convType: ConversationType, convId: string, enabled: boolean): void {
+  const t = convType === "group" ? "group" : "agent";
+  const id = String(convId || "").trim();
+  if (!id) return;
+  const now = nowIso();
+  getDb()
+    .prepare(
+      `INSERT INTO bot_enabled_conversations (conv_type, conv_id, enabled, updated_at)
+       VALUES (?, ?, ?, ?)
+       ON CONFLICT(conv_type, conv_id) DO UPDATE SET
+         enabled = excluded.enabled,
+         updated_at = excluded.updated_at`
+    )
+    .run(t, id, enabled ? 1 : 0, now);
+}
+
+export function getBotEnabledConversation(convType: ConversationType, convId: string): boolean {
+  const t = convType === "group" ? "group" : "agent";
+  const id = String(convId || "").trim();
+  if (!id) return false;
+  const row = getDb()
+    .prepare(`SELECT enabled FROM bot_enabled_conversations WHERE conv_type = ? AND conv_id = ?`)
+    .get(t, id) as { enabled?: number } | undefined;
+  return Number(row?.enabled ?? 0) === 1;
+}
+
+export function listBotEnabledConversations(limit?: number): Array<{ conv_type: ConversationType; conv_id: string }> {
+  const lim = Math.max(1, Math.min(500, Math.floor(Number(limit ?? 200))));
+  const rows = getDb()
+    .prepare(
+      `SELECT conv_type, conv_id
+       FROM bot_enabled_conversations
+       WHERE enabled = 1
+       ORDER BY updated_at DESC
+       LIMIT ?`
+    )
+    .all(lim) as Array<{ conv_type: ConversationType; conv_id: string }>;
+  return rows || [];
+}
+
 export interface CueQueuedMessage {
   id: string;
   conv_type: ConversationType;
@@ -859,6 +919,41 @@ export function getAgentDisplayNames(agentIds: string[]): Record<string, string>
   return map;
 }
 
+export interface AgentEnv {
+  agent_id: string;
+  agent_runtime: string | null;
+  project_dir: string | null;
+  agent_terminal: string | null;
+  updated_at: string | null;
+}
+
+export function getAgentEnvMap(agentIds: string[]): Record<string, AgentEnv> {
+  const unique = Array.from(new Set(agentIds.filter(Boolean)));
+  if (unique.length === 0) return {};
+  const placeholders = unique.map(() => "?").join(",");
+  const rows = getDb()
+    .prepare(
+      `SELECT agent_id, agent_runtime, project_dir, agent_terminal, updated_at
+       FROM agent_envs
+       WHERE agent_id IN (${placeholders})`
+    )
+    .all(...unique) as AgentEnv[];
+  const map: Record<string, AgentEnv> = {};
+  for (const r of rows) map[r.agent_id] = r;
+  return map;
+}
+
+export function getAgentEnv(agentId: string): AgentEnv | undefined {
+  const row = getDb()
+    .prepare(
+      `SELECT agent_id, agent_runtime, project_dir, agent_terminal, updated_at
+       FROM agent_envs
+       WHERE agent_id = ?`
+    )
+    .get(agentId) as AgentEnv | undefined;
+  return row;
+}
+
 // Type definitions
 export interface CueRequest {
   id: number;

package/src/lib/types.ts

@@ -86,4 +86,6 @@ export interface ConversationItem {
   lastMessage?: string;
   lastTime?: string;
   pendingCount: number;
+  agentRuntime?: string;
+  projectName?: string;
 }

package/src/types/chat.ts

@@ -1,4 +1,4 @@
-import type { CueRequest, CueResponse } from "@/lib/actions";
+import type { CueRequest } from "@/lib/actions";
 
 export type ChatType = "agent" | "group";