cue-console 0.1.0

package/src/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-sm ring-1 ring-white/20 hover:bg-primary/90 hover:shadow-md",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border border-white/45 bg-white/45 shadow-sm backdrop-blur-md hover:bg-white/60 hover:text-foreground dark:border-white/12 dark:bg-white/6 dark:hover:bg-white/10",
+        secondary:
+          "bg-white/55 text-foreground shadow-sm ring-1 ring-white/35 backdrop-blur-md hover:bg-white/70 dark:bg-white/8 dark:text-foreground dark:ring-white/12 dark:hover:bg-white/12",
+        ghost:
+          "hover:bg-white/45 hover:text-foreground dark:hover:bg-white/10",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+import { cn } from "@/lib/utils"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleTrigger
+    ref={ref}
+    data-slot="collapsible-trigger"
+    className={cn(
+      "outline-none transition-[color,background-color,box-shadow]",
+      "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      className
+    )}
+    {...props}
+  />
+))
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    data-slot="collapsible-content"
+    className={cn(
+      "overflow-hidden",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
+      className
+    )}
+    {...props}
+  />
+))
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/45 backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded-xl border bg-white/45 px-3 py-1 text-base shadow-sm backdrop-blur-md transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-white/40 dark:border-white/14 dark:bg-white/6",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        ref={ref}
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+})
+ScrollArea.displayName = "ScrollArea"
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-0.5 transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border/80 hover:bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/lib/actions.ts

@@ -0,0 +1,300 @@
+"use server";
+
+import {
+  getPendingRequests,
+  getRequestsByAgent,
+  getResponsesByAgent,
+  getAllAgents,
+  getAgentDisplayNames,
+  upsertAgentDisplayName,
+  getAgentLastRequest,
+  getPendingCountByAgent,
+  getAgentTimeline,
+  getAgentLastResponse,
+  sendResponse,
+  createGroup,
+  getAllGroups,
+  getGroupMembers,
+  getGroupLastRequest,
+  getGroupLastResponse,
+  addGroupMember,
+  removeGroupMember,
+  deleteGroup,
+  updateGroupName,
+  getGroupPendingCount,
+  getGroupPendingRequests,
+  getGroupTimeline,
+  type CueResponse,
+} from "./db";
+
+// Import/export from the shared types file
+import type { ConversationItem, UserResponse } from "./types";
+export type { Group, UserResponse, ImageContent, ConversationItem } from "./types";
+export type { CueRequest, CueResponse, AgentTimelineItem } from "./db";
+import { v4 as uuidv4 } from "uuid";
+
+export async function fetchAgentDisplayNames(agentIds: string[]) {
+  return getAgentDisplayNames(agentIds);
+}
+
+export async function setAgentDisplayName(agentId: string, displayName: string) {
+  upsertAgentDisplayName(agentId, displayName);
+  return { success: true } as const;
+}
+
+// Agent
+export async function fetchAllAgents() {
+  return getAllAgents();
+}
+
+export async function fetchAgentRequests(agentName: string) {
+  return getRequestsByAgent(agentName);
+}
+
+export async function fetchAgentResponses(agentName: string) {
+  return getResponsesByAgent(agentName);
+}
+
+export async function fetchAgentTimeline(
+  agentName: string,
+  before: string | null,
+  limit: number
+) {
+  return getAgentTimeline(agentName, before, limit);
+}
+
+export async function fetchAgentLastRequest(agentName: string) {
+  return getAgentLastRequest(agentName);
+}
+
+export async function fetchAgentPendingCount(agentName: string) {
+  return getPendingCountByAgent(agentName);
+}
+
+export async function fetchPendingRequests() {
+  return getPendingRequests();
+}
+
+// Responses
+export async function submitResponse(
+  requestId: string,
+  text: string,
+  images: { mime_type: string; base64_data: string }[] = [],
+  mentions: { userId: string; start: number; length: number; display: string }[] = []
+) {
+  try {
+    const response: UserResponse = {
+      text,
+      images,
+      mentions: mentions.length > 0 ? mentions : undefined,
+    };
+    sendResponse(requestId, response, false);
+    return { success: true } as const;
+  } catch (e) {
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : String(e),
+    } as const;
+  }
+}
+
+export async function cancelRequest(requestId: string) {
+  try {
+    const response: UserResponse = { text: "", images: [] };
+    sendResponse(requestId, response, true);
+    return { success: true } as const;
+  } catch (e) {
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : String(e),
+    } as const;
+  }
+}
+
+export async function batchRespond(
+  requestIds: string[],
+  text: string,
+  images: { mime_type: string; base64_data: string }[] = [],
+  mentions: { userId: string; start: number; length: number; display: string }[] = []
+) {
+  try {
+    const response: UserResponse = {
+      text,
+      images,
+      mentions: mentions.length > 0 ? mentions : undefined,
+    };
+    for (const id of requestIds) {
+      sendResponse(id, response, false);
+    }
+    return { success: true, count: requestIds.length } as const;
+  } catch (e) {
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : String(e),
+    } as const;
+  }
+}
+
+// Groups
+export async function fetchAllGroups() {
+  return getAllGroups();
+}
+
+export async function fetchGroupMembers(groupId: string) {
+  return getGroupMembers(groupId);
+}
+
+export async function fetchGroupPendingCount(groupId: string) {
+  return getGroupPendingCount(groupId);
+}
+
+export async function fetchGroupPendingRequests(groupId: string) {
+  return getGroupPendingRequests(groupId);
+}
+
+export async function fetchGroupTimeline(
+  groupId: string,
+  before: string | null,
+  limit: number
+) {
+  return getGroupTimeline(groupId, before, limit);
+}
+
+export async function createNewGroup(name: string, members: string[]) {
+  try {
+    const id = `grp_${uuidv4().slice(0, 8)}`;
+    createGroup(id, name);
+    for (const member of members) {
+      addGroupMember(id, member);
+    }
+    return { success: true, id, name } as const;
+  } catch (e) {
+    return {
+      success: false,
+      error: e instanceof Error ? e.message : String(e),
+    } as const;
+  }
+}
+
+export async function addMemberToGroup(groupId: string, agentName: string) {
+  addGroupMember(groupId, agentName);
+  return { success: true };
+}
+
+export async function removeMemberFromGroup(
+  groupId: string,
+  agentName: string
+) {
+  removeGroupMember(groupId, agentName);
+  return { success: true };
+}
+
+export async function removeGroup(groupId: string) {
+  deleteGroup(groupId);
+  return { success: true };
+}
+
+export async function setGroupName(groupId: string, name: string) {
+  updateGroupName(groupId, name);
+  return { success: true } as const;
+}
+
+// Aggregated data
+export async function fetchConversationList(): Promise<ConversationItem[]> {
+  const agents = getAllAgents();
+  const groups = getAllGroups();
+
+  const agentNameMap = getAgentDisplayNames(agents);
+
+  const items: ConversationItem[] = [];
+
+  const responsePreview = (r: CueResponse | undefined) => {
+    if (!r) return undefined;
+    try {
+      const parsed = JSON.parse(r.response_json || "{}") as {
+        text?: string;
+        images?: unknown[];
+      };
+      const text = (parsed.text || "").trim();
+      if (text) return `You: ${text}`;
+      if (Array.isArray(parsed.images) && parsed.images.length > 0) return "You: [image]";
+      return "You: [message]";
+    } catch {
+      return "You: [message]";
+    }
+  };
+
+  // Groups
+  for (const group of groups) {
+    const pendingCount = getGroupPendingCount(group.id);
+    const members = getGroupMembers(group.id);
+    const lastReq = getGroupLastRequest(group.id);
+
+    const lastResp = getGroupLastResponse(group.id);
+    const lastReqTime = lastReq?.created_at;
+    const lastRespTime = lastResp?.created_at;
+
+    const respMsg = responsePreview(lastResp);
+
+    const lastIsResp =
+      !!lastRespTime &&
+      (!lastReqTime || new Date(lastRespTime).getTime() >= new Date(lastReqTime).getTime());
+
+    const lastReqName = lastReq?.agent_id
+      ? agentNameMap[lastReq.agent_id] || lastReq.agent_id
+      : undefined;
+
+    items.push({
+      type: "group",
+      id: group.id,
+      name: group.name,
+      displayName: `${group.name} (${members.length} members)`,
+      pendingCount,
+      lastMessage: (
+        lastIsResp
+          ? respMsg
+          : lastReq?.prompt
+            ? `${lastReqName}: ${lastReq.prompt}`
+            : undefined
+      )?.slice(0, 50),
+      lastTime: (lastIsResp ? lastRespTime : lastReqTime) || group.created_at,
+    });
+  }
+
+  // Agents
+  for (const agent of agents) {
+    const pendingCount = getPendingCountByAgent(agent);
+    const lastReq = getAgentLastRequest(agent);
+    const lastResp = getAgentLastResponse(agent);
+    const lastReqTime = lastReq?.created_at;
+    const lastRespTime = lastResp?.created_at;
+
+    const respMsg = responsePreview(lastResp);
+    const reqMsg = lastReq?.prompt ? `Other: ${lastReq.prompt}` : undefined;
+
+    const lastIsResp =
+      !!lastRespTime &&
+      (!lastReqTime || new Date(lastRespTime).getTime() >= new Date(lastReqTime).getTime());
+
+    items.push({
+      type: "agent",
+      id: agent,
+      name: agent,
+      displayName: agentNameMap[agent] || agent,
+      pendingCount,
+      lastMessage: (lastIsResp ? respMsg : reqMsg)?.slice(0, 50),
+      lastTime: (lastIsResp ? lastRespTime : lastReqTime),
+    });
+  }
+
+  // Pin pending first, then sort by last activity time
+  items.sort((a, b) => {
+    if (a.pendingCount > 0 && b.pendingCount === 0) return -1;
+    if (a.pendingCount === 0 && b.pendingCount > 0) return 1;
+    if (!a.lastTime) return 1;
+    if (!b.lastTime) return -1;
+    return new Date(b.lastTime).getTime() - new Date(a.lastTime).getTime();
+  });
+
+  return items;
+}