cue-console 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Cue Hub console launcher (Next.js UI)",
   "license": "Apache-2.0",
   "keywords": ["mcp", "cue", "console", "nextjs"],
@@ -38,7 +38,7 @@
     "@dicebear/core": "^9.2.4",
     "@dicebear/thumbs": "^9.2.4",
     "@fontsource-variable/source-sans-3": "^5.2.8",
-    "better-sqlite3": "^12.5.0",
+    "better-sqlite3": "^12.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { getAgentEmoji } from "@/lib/utils";
+
+interface AvatarPickerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  target: { kind: "agent" | "group"; id: string } | null;
+  titleDisplay: string;
+  currentAvatarUrl: string;
+  candidates: { seed: string; url: string }[];
+  onRandomize: () => void;
+  onSelect: (seed: string) => void;
+}
+
+export function AvatarPickerDialog({
+  open,
+  onOpenChange,
+  target,
+  titleDisplay,
+  currentAvatarUrl,
+  candidates,
+  onRandomize,
+  onSelect,
+}: AvatarPickerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg glass-surface glass-noise">
+        <DialogHeader>
+          <DialogTitle>Avatar</DialogTitle>
+        </DialogHeader>
+        {target && (
+          <div className="flex flex-col gap-4">
+            <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" />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center text-xl">
+                    {target.kind === "group" ? "👥" : getAgentEmoji(target.id)}
+                  </div>
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold truncate">{titleDisplay}</p>
+                <p className="text-xs text-muted-foreground truncate">
+                  Click a thumb to apply
+                </p>
+              </div>
+              <Button variant="outline" size="sm" onClick={onRandomize}>
+                Random
+              </Button>
+            </div>
+
+            <div className="max-h-52 overflow-y-auto pr-1">
+              <div className="grid grid-cols-5 gap-2">
+                {candidates.map((c) => (
+                  <button
+                    key={c.seed}
+                    type="button"
+                    className="h-12 w-12 rounded-full bg-muted overflow-hidden hover:ring-2 hover:ring-ring/40"
+                    onClick={() => onSelect(c.seed)}
+                    title="Apply"
+                  >
+                    {c.url ? (
+                      <img src={c.url} alt="" className="h-full w-full" />
+                    ) : null}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn, getAgentEmoji } from "@/lib/utils";
+import { ChevronLeft, Github } from "lucide-react";
+
+interface ChatHeaderProps {
+  type: "agent" | "group";
+  id: string;
+  titleDisplay: string;
+  avatarUrl: string;
+  members: string[];
+  onBack?: () => void;
+  onAvatarClick: () => void;
+  onTitleChange: (newTitle: string) => Promise<void>;
+}
+
+export function ChatHeader({
+  type,
+  id,
+  titleDisplay,
+  avatarUrl,
+  members,
+  onBack,
+  onAvatarClick,
+  onTitleChange,
+}: ChatHeaderProps) {
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
+
+  const beginEditTitle = () => {
+    setEditingTitle(true);
+    setTitleDraft(titleDisplay);
+    setTimeout(() => {
+      const el = document.getElementById("chat-title-input");
+      if (el instanceof HTMLInputElement) el.focus();
+    }, 0);
+  };
+
+  const commitEditTitle = async () => {
+    const next = titleDraft.trim();
+    setEditingTitle(false);
+    if (!next || next === titleDisplay) return;
+    await onTitleChange(next);
+  };
+
+  return (
+    <div className={cn("px-4 pt-4")}>
+      <div
+        className={cn(
+          "mx-auto flex w-full max-w-230 items-center gap-2 rounded-3xl p-3",
+          "glass-surface glass-noise"
+        )}
+      >
+        {onBack && (
+          <Button variant="ghost" size="icon" onClick={onBack}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+        )}
+        <button
+          type="button"
+          className="h-9 w-9 shrink-0 rounded-full bg-muted overflow-hidden"
+          onClick={onAvatarClick}
+          title="Change avatar"
+        >
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="h-full w-full" />
+          ) : (
+            <span className="flex h-full w-full items-center justify-center text-lg">
+              {type === "group" ? "👥" : getAgentEmoji(id)}
+            </span>
+          )}
+        </button>
+        <div className="flex-1 min-w-0">
+          {editingTitle ? (
+            <input
+              id="chat-title-input"
+              value={titleDraft}
+              onChange={(e) => setTitleDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void commitEditTitle();
+                }
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  setEditingTitle(false);
+                }
+              }}
+              onBlur={() => {
+                void commitEditTitle();
+              }}
+              className="w-60 max-w-full rounded-xl border border-white/45 bg-white/55 px-2.5 py-1.5 text-sm font-semibold outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+            />
+          ) : (
+            <h2
+              className={cn("font-semibold", "cursor-text", "truncate")}
+              onDoubleClick={beginEditTitle}
+              title="Double-click to rename"
+            >
+              {titleDisplay}
+            </h2>
+          )}
+          {type === "group" && members.length > 0 && (
+            <p className="text-xs text-muted-foreground truncate">
+              {members.length} member{members.length === 1 ? "" : "s"}
+            </p>
+          )}
+        </div>
+        <Button variant="ghost" size="icon" asChild>
+          <a
+            href="https://github.com/nmhjklnm/cue-console"
+            target="_blank"
+            rel="noreferrer"
+            title="https://github.com/nmhjklnm/cue-console"
+          >
+            <Github className="h-5 w-5" />
+          </a>
+        </Button>
+        {type === "group" && (
+          <span
+            className="hidden sm:inline text-[11px] text-muted-foreground select-none mr-1"
+            title="Type @ to mention members"
+          >
+            @ mention
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ImagePreviewDialogProps {
+  image: { mime_type: string; base64_data: string } | null;
+  onClose: () => void;
+}
+
+export function ImagePreviewDialog({ image, onClose }: ImagePreviewDialogProps) {
+  return (
+    <Dialog open={!!image} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-3xl glass-surface glass-noise">
+        <DialogHeader>
+          <DialogTitle>Preview</DialogTitle>
+        </DialogHeader>
+        {image && (
+          <div className="flex items-center justify-center">
+            <img
+              src={`data:${image.mime_type};base64,${image.base64_data}`}
+              alt=""
+              className="max-h-[70vh] rounded-lg"
+            />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,186 @@
+import { useMemo } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn, getAgentEmoji, formatFullTime, getWaitingDuration } from "@/lib/utils";
+import { MarkdownRenderer } from "@/components/markdown-renderer";
+import { PayloadCard } from "@/components/payload-card";
+import type { CueRequest } from "@/lib/actions";
+
+interface MessageBubbleProps {
+  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;
+}
+
+export function MessageBubble({
+  request,
+  showAgent,
+  agentNameMap,
+  avatarUrlMap,
+  isHistory,
+  showName,
+  showAvatar,
+  compact,
+  disabled,
+  currentInput,
+  isGroup,
+  onPasteChoice,
+  onSubmitConfirm,
+  onMentionAgent,
+  onReply,
+  onCancel,
+}: MessageBubbleProps) {
+  const isPending = request.status === "PENDING";
+
+  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>
+          {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>
+  );
+}