cue-console 0.1.9 → 0.1.12

package/README.md

@@ -2,11 +2,14 @@
 
 [![Repo: cue-stack](https://img.shields.io/badge/repo-cue--stack-111827)](https://github.com/nmhjklnm/cue-stack)
 [![Repo: cue-console](https://img.shields.io/badge/repo-cue--console-111827)](https://github.com/nmhjklnm/cue-console)
+[![Repo: cue-command](https://img.shields.io/badge/repo-cue--command-111827)](https://github.com/nmhjklnm/cue-command)
 [![Repo: cue-mcp](https://img.shields.io/badge/repo-cue--mcp-111827)](https://github.com/nmhjklnm/cue-mcp)
 
 [![npm](https://img.shields.io/npm/v/cue-console?label=cue-console&color=CB3837)](https://www.npmjs.com/package/cue-console)
 [![npm downloads](https://img.shields.io/npm/dw/cue-console?color=CB3837)](https://www.npmjs.com/package/cue-console)
 
+[Contributing](./CONTRIBUTING.md) · [Trademark](./TRADEMARK.md)
+
 | Mobile | Desktop |
 | --- | --- |
 | ![Mobile screenshot](./assets/iphone.png) | ![Desktop screenshot](./assets/desktop.png) |
@@ -27,7 +30,9 @@ Think of it as an “all-in-one” collaboration console for your agents and CLI
 
 ### Goal
 
-Run the console and pair it with `cuemcp`.
+Run the console and pair it with `cueme` (recommended).
+
+Note: `cuemcp` (MCP mode) can be blocked/flagged by some IDEs, so command mode is currently recommended.
 
 ### Step 1: Install `cue-console`
 
@@ -38,24 +43,36 @@ npm install -g cue-console
 ### Step 2: Start `cue-console`
 
 ```bash
-cue-console dev --port 3000
+cue-console start
 ```
 
 Alternatively, you can run it without installing globally:
 
 ```bash
-npx cue-console dev --port 3000
+npx cue-console start
 ```
 
 Open `http://localhost:3000`.
 
-### Step 3: Start `cuemcp`
+### Step 3: Install `cueme` (recommended)
 
-Add and run the MCP server in your agent/runtime (see [`cue-mcp`](https://github.com/nmhjklnm/cue-mcp) for client-specific MCP configuration).
+```bash
+npm install -g cueme
+```
+
+### Step 4: Configure your system prompt (HAP)
 
-### Step 4: Connect your runtime
+Add the contents of `cue-command/protocol.md` to your tool's system prompt / rules (see [`cue-command`](https://github.com/nmhjklnm/cue-command)).
 
-In the agent/runtime you want to use, type `cue` to trigger connect (or reconnect) and route the collaboration flow to `cue-console`.
+### Step 5: Connect your runtime
+
+In the agent/runtime you want to use, call `cueme cue <agent_id> -` / `cueme pause <agent_id> -` (see `cue-command/protocol.md`).
+
+---
+
+### Optional: MCP mode (`cuemcp`)
+
+Add and run the MCP server in your agent/runtime (see [`cue-mcp`](https://github.com/nmhjklnm/cue-mcp) for client-specific MCP configuration).
 
 ---
 
@@ -123,6 +140,7 @@ Not calling cue() means the user cannot continue the interaction.
 After installation, the `cue-console` command is available:
 
 ```bash
+cue-console start
 cue-console dev --port 3000
 cue-console build
 cue-console start --host 0.0.0.0 --port 3000

package/bin/cue-console.js

@@ -1,10 +1,13 @@
 #!/usr/bin/env node
 
 const { spawn } = require("node:child_process");
+const fs = require("node:fs");
 const path = require("node:path");
 
 function printHelp() {
-  process.stdout.write(`cue-console - Cue Hub console launcher\n\nUsage:\n  cue-console <dev|build|start> [--port <port>] [--host <host>]\n\nExamples:\n  cue-console dev --port 3000\n  cue-console start --host 0.0.0.0 --port 3000\n`);
+  process.stdout.write(
+    `cue-console - Cue Hub console launcher\n\nUsage:\n  cue-console <dev|build|start> [--port <port>] [--host <host>]\n\nExamples:\n  cue-console start --port 3000\n  cue-console start --host 0.0.0.0 --port 3000\n\nNotes:\n  - start will auto-build if needed (when .next is missing)\n`
+  );
 }
 
 function parseArgs(argv) {
@@ -70,16 +73,30 @@ async function main() {
 
   const pkgRoot = path.resolve(__dirname, "..");
 
-  const child = spawn(process.execPath, [nextBin, command, ...passthrough], {
-    stdio: "inherit",
-    env,
-    cwd: pkgRoot,
-  });
+  const spawnNext = (subcmd) =>
+    new Promise((resolve, reject) => {
+      const child = spawn(process.execPath, [nextBin, subcmd, ...passthrough], {
+        stdio: "inherit",
+        env,
+        cwd: pkgRoot,
+      });
+      child.on("exit", (code, signal) => {
+        if (signal) return reject(Object.assign(new Error(`terminated: ${signal}`), { code, signal }));
+        if (code && code !== 0) return reject(Object.assign(new Error(`exit ${code}`), { code }));
+        resolve();
+      });
+    });
+
+  if (command === "start") {
+    const buildIdPath = path.join(pkgRoot, ".next", "BUILD_ID");
+    if (!fs.existsSync(buildIdPath)) {
+      await spawnNext("build");
+    }
+    await spawnNext("start");
+    return;
+  }
 
-  child.on("exit", (code, signal) => {
-    if (signal) process.kill(process.pid, signal);
-    process.exit(code ?? 0);
-  });
+  await spawnNext(command);
 }
 
 main().catch((err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "Cue Hub console launcher (Next.js UI)",
   "license": "Apache-2.0",
   "keywords": ["mcp", "cue", "console", "nextjs"],
@@ -33,6 +33,7 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20",
     "@dicebear/core": "^9.2.4",
     "@dicebear/thumbs": "^9.2.4",
@@ -54,7 +55,6 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@types/better-sqlite3": "^7.6.13",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/uuid": "^11.0.0",

package/src/app/page.tsx

@@ -5,23 +5,115 @@ 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";
 
 export default function Home() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [selectedType, setSelectedType] = useState<"agent" | "group" | null>(null);
   const [selectedName, setSelectedName] = useState<string>("");
   const [showCreateGroup, setShowCreateGroup] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
-    if (typeof window === "undefined") return false;
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  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-queue-worker";
+    const leaseTtlMs = 12_000;
+    const claimEveryMs = 4_000;
+    const tickEveryMs = 3_000;
+
+    let isLeader = false;
+    let tickTimer: ReturnType<typeof setInterval> | null = null;
+    let claimTimer: ReturnType<typeof setInterval> | null = null;
+
+    const stopTick = () => {
+      if (tickTimer) {
+        clearInterval(tickTimer);
+        tickTimer = null;
+      }
+    };
+
+    const startTick = () => {
+      if (tickTimer) return;
+      tickTimer = setInterval(() => {
+        if (document.visibilityState !== "visible") return;
+        void (async () => {
+          try {
+            const res = await processQueueTick(holderId);
+            if ((res?.sent ?? 0) > 0 || (res?.failed ?? 0) > 0 || (res?.rescheduled ?? 0) > 0) {
+              const removedQueueIds = Array.isArray((res as { removedQueueIds?: unknown })?.removedQueueIds)
+                ? ((res as { removedQueueIds: string[] }).removedQueueIds || [])
+                : [];
+              window.dispatchEvent(
+                new CustomEvent("cue-console:queueUpdated", {
+                  detail: {
+                    removedQueueIds,
+                  },
+                })
+              );
+            }
+          } 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 {
       const raw = window.localStorage.getItem("cuehub.sidebarCollapsed");
-      if (raw === "1") return true;
-      if (raw === "0") return false;
+      if (raw === "1") setSidebarCollapsed(true);
+      if (raw === "0") setSidebarCollapsed(false);
     } catch {
       // ignore
     }
-    return false;
-  });
+  }, []);
 
   useEffect(() => {
     try {

package/src/components/chat-composer.tsx

@@ -2,6 +2,7 @@
 
 import {
   useMemo,
+  useState,
   type ChangeEvent,
   type ClipboardEvent,
   type Dispatch,
@@ -12,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { cn, getAgentEmoji } from "@/lib/utils";
 import { setAgentDisplayName } from "@/lib/actions";
-import { Plus, Send, X } from "lucide-react";
+import { CornerUpLeft, GripVertical, Plus, Send, Trash2, X } from "lucide-react";
 
 type MentionDraft = {
   userId: string;
@@ -21,6 +22,13 @@ type MentionDraft = {
   display: string;
 };
 
+export type QueuedMessage = {
+  id: string;
+  text: string;
+  images: { mime_type: string; base64_data: string }[];
+  createdAt: number;
+};
+
 const shiftMentions = (from: number, delta: number, list: MentionDraft[]) => {
   return list.map((m) => {
     if (m.start >= from) return { ...m, start: m.start + delta };
@@ -61,6 +69,11 @@ export function ChatComposer({
   setNotice,
   setPreviewImage,
   handleSend,
+  enqueueCurrent,
+  queue,
+  removeQueued,
+  recallQueued,
+  reorderQueue,
   handlePaste,
   handleImageUpload,
   textareaRef,
@@ -91,11 +104,16 @@ export function ChatComposer({
   hasPendingRequests: boolean;
   input: string;
   setInput: Dispatch<SetStateAction<string>>;
-  images: { mime_type: string; base64_data: string }[];
-  setImages: Dispatch<SetStateAction<{ mime_type: string; base64_data: 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>>;
   handleSend: () => void | Promise<void>;
+  enqueueCurrent: () => void;
+  queue: QueuedMessage[];
+  removeQueued: (id: string) => void;
+  recallQueued: (id: string) => void;
+  reorderQueue: (fromIndex: number, toIndex: number) => void;
   handlePaste: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
   handleImageUpload: (e: ChangeEvent<HTMLInputElement>) => void;
   textareaRef: RefObject<HTMLTextAreaElement | null>;
@@ -128,6 +146,17 @@ export function ChatComposer({
       : ({ left: "var(--cuehub-sidebar-w, 0px)", right: 0 } as const);
   }, [onBack]);
 
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+
+  const submitOrQueue = () => {
+    if (busy) return;
+    if (canSend) {
+      void handleSend();
+      return;
+    }
+    enqueueCurrent();
+  };
+
   return (
     <>
       {/* Input */}
@@ -139,17 +168,106 @@ export function ChatComposer({
             "glass-surface glass-noise"
           )}
         >
+          {/* Queue Panel */}
+          {queue.length > 0 && (
+            <div className="px-1 pt-1">
+              <div className="flex items-center justify-between">
+                <p className="text-[11px] text-muted-foreground">
+                  {queue.length} messages queued
+                </p>
+              </div>
+              <div className="mt-1 max-h-28 overflow-y-auto pr-1">
+                <div className="space-y-1">
+                  {queue.map((q, idx) => {
+                    const summary = (q.text || "").split(/\r?\n/)[0] || "(empty)";
+                    const hasImages = (q.images?.length || 0) > 0;
+                    return (
+                      <div
+                        key={q.id}
+                        className={cn(
+                          "flex items-center gap-2 rounded-2xl px-2 py-1",
+                          "bg-white/35 ring-1 ring-white/25"
+                        )}
+                        draggable
+                        onDragStart={(e) => {
+                          setDragIndex(idx);
+                          e.dataTransfer.setData("text/plain", String(idx));
+                          e.dataTransfer.effectAllowed = "move";
+                        }}
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          e.dataTransfer.dropEffect = "move";
+                        }}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          const raw = e.dataTransfer.getData("text/plain");
+                          const from = Number(raw);
+                          if (Number.isFinite(from)) reorderQueue(from, idx);
+                          setDragIndex(null);
+                        }}
+                        onDragEnd={() => setDragIndex(null)}
+                        data-dragging={dragIndex === idx ? "true" : "false"}
+                      >
+                        <span className="text-muted-foreground">
+                          <GripVertical className="h-3.5 w-3.5" />
+                        </span>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-xs">
+                            {summary}
+                            {hasImages ? "  [img]" : ""}
+                          </p>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 rounded-xl hover:bg-white/40"
+                          onClick={() => recallQueued(q.id)}
+                          title="Recall to input"
+                        >
+                          <CornerUpLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 rounded-xl hover:bg-white/40"
+                          onClick={() => removeQueued(q.id)}
+                          title="Remove from queue"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Image Preview */}
           {images.length > 0 && (
             <div className="flex max-w-full gap-2 overflow-x-auto px-0.5 pt-0.5">
               {images.map((img, i) => (
                 <div key={i} className="relative shrink-0">
-                  <img
-                    src={`data:${img.mime_type};base64,${img.base64_data}`}
-                    alt=""
-                    className="h-16 w-16 rounded-xl object-cover shadow-sm ring-1 ring-border/60 cursor-pointer"
-                    onClick={() => setPreviewImage(img)}
-                  />
+                  {img.mime_type.startsWith("image/") ? (
+                    <img
+                      src={`data:${img.mime_type};base64,${img.base64_data}`}
+                      alt=""
+                      className="h-16 w-16 rounded-xl object-cover shadow-sm ring-1 ring-border/60 cursor-pointer"
+                      onClick={() => setPreviewImage(img)}
+                    />
+                  ) : (
+                    <div
+                      className="h-16 w-16 rounded-xl bg-white/40 dark:bg-black/20 ring-1 ring-border/60 shadow-sm flex flex-col items-center justify-center px-1"
+                      title={`${img.file_name || "File"}${img.mime_type ? ` (${img.mime_type})` : ""}`}
+                    >
+                      <div className="text-[10px] font-semibold text-muted-foreground">FILE</div>
+                      <div className="mt-0.5 text-[11px] font-semibold text-foreground/80 truncate w-full text-center">
+                        {(img.file_name || "File").slice(0, 10)}
+                      </div>
+                    </div>
+                  )}
                   <button
                     className="absolute -right-1 -top-1 rounded-full bg-destructive p-0.5 text-white"
                     onClick={() => setImages((prev) => prev.filter((_, j) => j !== i))}
@@ -281,16 +399,16 @@ export function ChatComposer({
               placeholder={
                 hasPendingRequests
                   ? type === "group"
-                    ? "Type... (Enter to send, Shift+Enter for newline, supports @)"
-                    : "Type... (Enter to send, Shift+Enter for newline)"
+                    ? "Type... (Enter to send or queue, Shift+Enter for newline, supports @)"
+                    : "Type... (Enter to send or queue, Shift+Enter for newline)"
                   : "Waiting for new pending requests..."
               }
               title={
                 !hasPendingRequests
                   ? "No pending requests (PENDING/PROCESSING). Send button is disabled."
                   : type === "group"
-                    ? "Type @ to mention members; ↑↓ to navigate, Enter to insert; Enter to send, Shift+Enter for newline"
-                    : "Enter to send, Shift+Enter for newline"
+                    ? "Type @ to mention members; ↑↓ to navigate, Enter to insert; Enter to send or queue, Shift+Enter for newline"
+                    : "Enter to send or queue, Shift+Enter for newline"
               }
               value={input}
               onPaste={handlePaste}
@@ -392,7 +510,7 @@ export function ChatComposer({
 
                 if (e.key === "Enter" && !e.shiftKey) {
                   e.preventDefault();
-                  if (canSend) void handleSend();
+                  submitOrQueue();
                 }
               }}
               onKeyUp={() => {
@@ -440,39 +558,45 @@ export function ChatComposer({
                 )}
                 onClick={() => fileInputRef.current?.click()}
                 disabled={busy}
-                title="Add image"
+                title="Add file"
               >
                 <Plus className="h-4.5 w-4.5" />
               </Button>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-8 rounded-xl px-2",
+                  "text-muted-foreground hover:text-foreground",
+                  "hover:bg-white/40"
+                )}
+                onClick={() => {
+                  if (busy) return;
+                  enqueueCurrent();
+                }}
+                disabled={busy || (!input.trim() && images.length === 0)}
+                title="Queue (Enter)"
+              >
+                Queue
+              </Button>
             </div>
 
             <Button
               type="button"
               onClick={() => {
-                if (canSend) {
-                  void handleSend();
-                  return;
-                }
-                if (!hasPendingRequests) {
-                  setNotice("No pending questions to answer.");
-                  return;
-                }
-                if (!input.trim() && images.length === 0) {
-                  setNotice("Enter a message to send, or select an image.");
-                  return;
-                }
-                setNotice("Unable to send right now. Please try again later.");
+                submitOrQueue();
               }}
-              disabled={busy || (!canSend && (!input.trim() && images.length === 0))}
+              disabled={busy || (!input.trim() && images.length === 0)}
               className={cn(
                 "h-8 w-8 rounded-xl p-0",
                 canSend
                   ? "bg-primary text-primary-foreground hover:bg-primary/90"
                   : "bg-transparent text-muted-foreground hover:bg-white/40",
-                (busy || (!canSend && (!input.trim() && images.length === 0))) &&
-                  "opacity-40 hover:bg-transparent"
+                (busy || (!input.trim() && images.length === 0)) && "opacity-40 hover:bg-transparent"
               )}
-              title={canSend ? "Send" : "Enter a message"}
+              title={canSend ? "Send" : "Queue (cannot send now)"}
             >
               <Send className="h-4 w-4" />
             </Button>
@@ -481,7 +605,7 @@ export function ChatComposer({
           <input
             ref={fileInputRef}
             type="file"
-            accept="image/*"
+            accept="*/*"
             multiple
             className="hidden"
             onChange={handleImageUpload}