cue-console 0.1.16 → 0.1.18

package/package.json

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

package/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "@fontsource-variable/source-sans-3";
 import "./globals.css";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
   title: "cue-console",
@@ -18,7 +19,7 @@ export default function RootLayout({
         className="antialiased"
         suppressHydrationWarning
       >
-        {children}
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

package/src/app/providers.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ConfigProvider } from "@/contexts/config-context";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <ConfigProvider>{children}</ConfigProvider>;
+}

package/src/components/chat/timeline-list.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import { memo, useMemo, useState, type ReactNode } from "react";
+import { memo } from "react";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { cn, formatFullTime, getAgentEmoji, getWaitingDuration } from "@/lib/utils";
-import { MarkdownRenderer } from "@/components/markdown-renderer";
-import { PayloadCard } from "@/components/payload-card";
-import type { AgentTimelineItem, CueRequest, CueResponse } from "@/lib/actions";
-import { Copy, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { AgentTimelineItem } from "@/lib/actions";
+import { MessageBubble } from "@/components/chat/message-bubble";
+import { UserResponseBubble } from "@/components/chat/user-response-bubble";
 
 function parseDbTime(dateStr: string) {
   return new Date((dateStr || "").replace(" ", "T"));
@@ -153,347 +151,3 @@ export const TimelineList = memo(function TimelineList({
     </>
   );
 });
-
-const MessageBubble = memo(function MessageBubble({
-  request,
-  showAgent,
-  agentNameMap,
-  avatarUrlMap,
-  isHistory,
-  showName,
-  showAvatar,
-  compact,
-  disabled,
-  currentInput,
-  isGroup,
-  onPasteChoice,
-  onSubmitConfirm,
-  onMentionAgent,
-  onReply,
-  onCancel,
-}: {
-  request: CueRequest;
-  showAgent?: boolean;
-  agentNameMap?: Record<string, string>;
-  avatarUrlMap?: Record<string, string>;
-  isHistory?: boolean;
-  showName?: boolean;
-  showAvatar?: boolean;
-  compact?: boolean;
-  disabled?: boolean;
-  currentInput?: string;
-  isGroup?: boolean;
-  onPasteChoice?: (text: string, mode?: "replace" | "append" | "upsert") => void;
-  onSubmitConfirm?: (
-    requestId: string,
-    text: string,
-    cancelled: boolean
-  ) => void | Promise<void>;
-  onMentionAgent?: (agentId: string) => void;
-  onReply?: () => void;
-  onCancel?: () => void;
-}) {
-  const isPending = request.status === "PENDING";
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(request.prompt || "");
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-
-  const isPause = useMemo(() => {
-    if (!request.payload) return false;
-    try {
-      const obj = JSON.parse(request.payload) as Record<string, unknown>;
-      return obj?.type === "confirm" && obj?.variant === "pause";
-    } catch {
-      return false;
-    }
-  }, [request.payload]);
-
-  const selectedLines = useMemo(() => {
-    const text = (currentInput || "").trim();
-    if (!text) return new Set<string>();
-    return new Set(
-      text
-        .split(/\r?\n/)
-        .map((s) => s.trim())
-        .filter(Boolean)
-    );
-  }, [currentInput]);
-
-  const rawId = request.agent_id || "";
-  const displayName = (agentNameMap && rawId ? agentNameMap[rawId] || rawId : rawId) || "";
-  const cardMaxWidth = (showAvatar ?? true) ? "calc(100% - 3rem)" : "100%";
-  const avatarUrl = rawId && avatarUrlMap ? avatarUrlMap[`agent:${rawId}`] : "";
-
-  return (
-    <div
-      className={cn(
-        "flex max-w-full min-w-0 items-start gap-3",
-        compact && "gap-2",
-        isHistory && "opacity-60"
-      )}
-    >
-      {(showAvatar ?? true) ? (
-        <span
-          className={cn(
-            "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg",
-            isGroup && request.agent_id && onMentionAgent && "cursor-pointer"
-          )}
-          title={
-            isGroup && request.agent_id && onMentionAgent
-              ? "Double-click avatar to @mention"
-              : undefined
-          }
-          onDoubleClick={() => {
-            if (!isGroup) return;
-            const agentId = request.agent_id;
-            if (!agentId) return;
-            onMentionAgent?.(agentId);
-          }}
-        >
-          {avatarUrl ? (
-            <img src={avatarUrl} alt="" className="h-full w-full rounded-full" />
-          ) : (
-            getAgentEmoji(request.agent_id || "")
-          )}
-        </span>
-      ) : (
-        <span className="h-9 w-9 shrink-0" />
-      )}
-      <div className="flex-1 min-w-0 overflow-hidden">
-        {(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",
-            "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">
-            <MarkdownRenderer>{request.prompt || ""}</MarkdownRenderer>
-          </div>
-          <PayloadCard
-            raw={request.payload}
-            disabled={disabled}
-            onPasteChoice={onPasteChoice}
-            onSubmitConfirm={(text, cancelled) =>
-              isPending ? onSubmitConfirm?.(request.request_id, text, cancelled) : undefined
-            }
-            selectedLines={selectedLines}
-          />
-        </div>
-        <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-          <span className="shrink-0">{formatFullTime(request.created_at || "")}</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-auto p-1 text-xs"
-            onClick={handleCopy}
-            disabled={disabled}
-            title={copied ? "已复制" : "复制"}
-          >
-            {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-            <span className="ml-1">{copied ? "已复制" : "复制"}</span>
-          </Button>
-          {isPending && (
-            <>
-              <Badge variant="outline" className="text-xs shrink-0">
-                Waiting {getWaitingDuration(request.created_at || "")}
-              </Badge>
-              {!isPause && (
-                <>
-                  <Badge variant="default" className="text-xs shrink-0">
-                    Pending
-                  </Badge>
-                  {onReply && (
-                    <Button
-                      variant="link"
-                      size="sm"
-                      className="h-auto p-0 text-xs"
-                      onClick={onReply}
-                      disabled={disabled}
-                    >
-                      Reply
-                    </Button>
-                  )}
-                  {onCancel && (
-                    <Button
-                      variant="link"
-                      size="sm"
-                      className="h-auto p-0 text-xs text-destructive"
-                      onClick={onCancel}
-                      disabled={disabled}
-                    >
-                      End
-                    </Button>
-                  )}
-                </>
-              )}
-            </>
-          )}
-          {request.status === "COMPLETED" && (
-            <Badge variant="secondary" className="text-xs shrink-0">
-              Replied
-            </Badge>
-          )}
-          {request.status === "CANCELLED" && (
-            <Badge variant="destructive" className="text-xs shrink-0">
-              Ended
-            </Badge>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-const UserResponseBubble = memo(function UserResponseBubble({
-  response,
-  showAvatar = true,
-  compact = false,
-  onPreview,
-}: {
-  response: CueResponse;
-  showAvatar?: boolean;
-  compact?: boolean;
-  onPreview?: (img: { mime_type: string; base64_data: string }) => void;
-}) {
-  const parsed = JSON.parse(response.response_json || "{}") as {
-    text?: string;
-    mentions?: { userId: string; start: number; length: number; display: string }[];
-  };
-
-  const filesRaw = (response as unknown as { files?: unknown }).files;
-  const files = Array.isArray(filesRaw) ? filesRaw : [];
-  const imageFiles = files.filter((f) => {
-    const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
-    const mime = String(obj?.mime_type || "");
-    const b64 = obj?.inline_base64;
-    return mime.startsWith("image/") && typeof b64 === "string" && b64.length > 0;
-  });
-  const otherFiles = files.filter((f) => {
-    const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
-    const mime = String(obj?.mime_type || "");
-    return !mime.startsWith("image/");
-  });
-
-  const renderTextWithMentions = (text: string, mentions?: { start: number; length: number }[]) => {
-    if (!mentions || mentions.length === 0) return text;
-    const safe = [...mentions]
-      .filter((m) => m.start >= 0 && m.length > 0 && m.start + m.length <= text.length)
-      .sort((a, b) => a.start - b.start);
-
-    const nodes: ReactNode[] = [];
-    let cursor = 0;
-    for (const m of safe) {
-      if (m.start < cursor) continue;
-      if (m.start > cursor) {
-        nodes.push(text.slice(cursor, m.start));
-      }
-      const seg = text.slice(m.start, m.start + m.length);
-      nodes.push(
-        <span key={`m-${m.start}`} className="text-emerald-900/90 dark:text-emerald-950 font-semibold">
-          {seg}
-        </span>
-      );
-      cursor = m.start + m.length;
-    }
-    if (cursor < text.length) nodes.push(text.slice(cursor));
-    return nodes;
-  };
-
-  if (response.cancelled) {
-    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"
-          style={{
-            clipPath: "inset(0 round 1rem)",
-            maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
-          }}
-        >
-          <p className="text-sm text-muted-foreground italic">Conversation ended</p>
-          <p className="text-xs text-muted-foreground mt-1">{formatFullTime(response.created_at)}</p>
-        </div>
-      </div>
-    );
-  }
-
-  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"
-        style={{
-          clipPath: "inset(0 round 1rem)",
-          maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
-        }}
-      >
-        {parsed.text && (
-          <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
-            {parsed.mentions && parsed.mentions.length > 0 ? (
-              <p className="whitespace-pre-wrap">{renderTextWithMentions(parsed.text, parsed.mentions)}</p>
-            ) : (
-              <MarkdownRenderer>{parsed.text}</MarkdownRenderer>
-            )}
-          </div>
-        )}
-        {imageFiles.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-2 max-w-full">
-            {imageFiles.map((f, i) => {
-              const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
-              const mime = String(obj?.mime_type || "image/png");
-              const b64 = String(obj?.inline_base64 || "");
-              const img = { mime_type: mime, base64_data: b64 };
-              return (
-                <img
-                  key={i}
-                  src={`data:${img.mime_type};base64,${img.base64_data}`}
-                  alt=""
-                  className="max-h-32 max-w-full h-auto rounded cursor-pointer"
-                  onClick={() => onPreview?.(img)}
-                />
-              );
-            })}
-          </div>
-        )}
-
-        {otherFiles.length > 0 && (
-          <div className="mt-2 flex flex-col gap-1 max-w-full">
-            {otherFiles.map((f, i) => {
-              const obj = f && typeof f === "object" ? (f as Record<string, unknown>) : null;
-              const fileRef = String(obj?.file || "");
-              const name = fileRef.split("/").filter(Boolean).pop() || fileRef || "file";
-              return (
-                <div
-                  key={i}
-                  className="px-2 py-1 rounded-lg bg-white/40 dark:bg-black/20 ring-1 ring-border/40 text-xs text-foreground/80 truncate"
-                  title={fileRef}
-                >
-                  {name}
-                </div>
-              );
-            })}
-          </div>
-        )}
-        <p className="text-xs opacity-70 mt-1 text-right">{formatFullTime(response.created_at)}</p>
-      </div>
-      {showAvatar ? (
-        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg">
-          👤
-        </span>
-      ) : (
-        <span className="h-9 w-9 shrink-0" />
-      )}
-    </div>
-  );
-});

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import { cn, formatFullTime } from "@/lib/utils";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import type { CueResponse } from "@/lib/actions";
+import { useConfig } from "@/contexts/config-context";
 
 interface UserResponseBubbleProps {
   response: CueResponse;
@@ -16,11 +17,45 @@ export function UserResponseBubble({
   compact = false,
   onPreview,
 }: UserResponseBubbleProps) {
+  const { config } = useConfig();
   const parsed = JSON.parse(response.response_json || "{}") as {
     text?: string;
     mentions?: { userId: string; start: number; length: number; display: string }[];
   };
 
+  const analysisOnlyInstruction = config.chat_mode_append_text;
+  const { analysisOnlyApplied, displayText } = useMemo(() => {
+    const text = parsed.text;
+    if (typeof text !== "string") return { analysisOnlyApplied: false, displayText: text };
+
+    const raw = text;
+    const lines = raw.split(/\r?\n/);
+    let lastNonEmpty = -1;
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (lines[i]?.trim().length) {
+        lastNonEmpty = i;
+        break;
+      }
+    }
+    if (lastNonEmpty === -1) return { analysisOnlyApplied: false, displayText: raw };
+
+    const tail = (lines[lastNonEmpty] ?? "").trim();
+    if (tail !== analysisOnlyInstruction) {
+      return { analysisOnlyApplied: false, displayText: raw };
+    }
+
+    let cut = lastNonEmpty;
+    if (cut > 0 && (lines[cut - 1] ?? "").trim().length === 0) {
+      cut -= 1;
+    }
+    const stripped = lines.slice(0, cut).join("\n").replace(/\s+$/, "");
+    if (stripped.trim().length === 0) {
+      return { analysisOnlyApplied: false, displayText: raw };
+    }
+
+    return { analysisOnlyApplied: true, displayText: stripped };
+  }, [parsed.text, analysisOnlyInstruction]);
+
   const filesRaw = (response as unknown as { files?: unknown }).files;
   const files = Array.isArray(filesRaw) ? filesRaw : [];
   const imageFiles = files.filter((f) => {
@@ -89,14 +124,14 @@ export function UserResponseBubble({
           maxWidth: showAvatar ? "calc(100% - 3rem)" : "100%",
         }}
       >
-        {parsed.text && (
+        {displayText && (
           <div className="text-sm wrap-anywhere overflow-hidden min-w-0">
             {parsed.mentions && parsed.mentions.length > 0 ? (
               <p className="whitespace-pre-wrap">
-                {renderTextWithMentions(parsed.text, parsed.mentions)}
+                {renderTextWithMentions(displayText, parsed.mentions)}
               </p>
             ) : (
-              <MarkdownRenderer>{parsed.text}</MarkdownRenderer>
+              <MarkdownRenderer>{displayText}</MarkdownRenderer>
             )}
           </div>
         )}
@@ -138,7 +173,17 @@ export function UserResponseBubble({
             })}
           </div>
         )}
-        <p className="text-xs opacity-70 mt-1 text-right">{formatFullTime(response.created_at)}</p>
+        <div className="mt-1 flex items-center justify-end gap-2 text-xs opacity-70">
+          {analysisOnlyApplied && (
+            <span
+              className="rounded-full bg-white/40 dark:bg-black/20 px-2 py-0.5 ring-1 ring-border/40"
+              title="Chat 模式：只做分析，不做改动（该规则会发送给模型，但不会显示在消息正文里）"
+            >
+              Chat
+            </span>
+          )}
+          <span>{formatFullTime(response.created_at)}</span>
+        </div>
       </div>
       {showAvatar ? (
         <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-lg">

package/src/components/chat-composer.tsx

@@ -12,9 +12,15 @@ import {
   type SetStateAction,
 } from "react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { cn, getAgentEmoji } from "@/lib/utils";
 import { setAgentDisplayName } from "@/lib/actions";
-import { CornerUpLeft, GripVertical, Plus, Send, Trash2, X } from "lucide-react";
+import { Bot, CornerUpLeft, GripVertical, Plus, Send, Trash2, X } from "lucide-react";
 
 type MentionDraft = {
   userId: string;
@@ -71,6 +77,8 @@ export function ChatComposer({
   setImages,
   setNotice,
   setPreviewImage,
+  botEnabled,
+  onToggleBot,
   handleSend,
   enqueueCurrent,
   queue,
@@ -113,6 +121,8 @@ export function ChatComposer({
   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>;
   handleSend: () => void | Promise<void>;
   enqueueCurrent: () => void;
   queue: QueuedMessage[];
@@ -152,6 +162,8 @@ export function ChatComposer({
   }, [onBack]);
 
   const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [botToggling, setBotToggling] = useState(false);
+  const [botConfirmOpen, setBotConfirmOpen] = useState(false);
   const isComposingRef = useRef(false);
 
   const submitOrQueue = () => {
@@ -251,6 +263,54 @@ export function ChatComposer({
             </div>
           )}
 
+          <Dialog open={botConfirmOpen} onOpenChange={setBotConfirmOpen}>
+            <DialogContent className="sm:max-w-110">
+              <DialogHeader>
+                <DialogTitle>Enable bot mode?</DialogTitle>
+              </DialogHeader>
+
+              <div className="text-sm text-muted-foreground space-y-3">
+                <p>
+                  Bot mode will automatically reply to <span className="text-foreground font-medium">cue</span> requests
+                  in this conversation.
+                </p>
+                <ul className="list-disc pl-5 space-y-1">
+                  <li>Only affects the current {type === "group" ? "group" : "agent"} conversation.</li>
+                  <li>May immediately reply to currently pending cue requests.</li>
+                  <li>Does not reply to pause confirmations.</li>
+                  <li>You can turn it off anytime.</li>
+                </ul>
+              </div>
+
+              <div className="mt-4 flex items-center justify-end gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={botToggling}
+                  onClick={() => setBotConfirmOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="button"
+                  disabled={botToggling}
+                  onClick={async () => {
+                    if (botToggling) return;
+                    setBotToggling(true);
+                    try {
+                      await onToggleBot();
+                      setBotConfirmOpen(false);
+                    } finally {
+                      setBotToggling(false);
+                    }
+                  }}
+                >
+                  {botToggling ? "Enabling…" : "Enable"}
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+
           {/* Image Preview */}
           {images.length > 0 && (
             <div className="flex max-w-full gap-2 overflow-x-auto px-0.5 pt-0.5">
@@ -614,6 +674,48 @@ export function ChatComposer({
               >
                 Queue
               </Button>
+
+              <div className="relative group">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  disabled={busy || botToggling}
+                  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"
+                  )}
+                  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"}
+                >
+                  {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>
             </div>
 
             <Button