cue-console 0.1.0

package/src/components/create-group-dialog.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { fetchAllAgents, fetchConversationList, createNewGroup } from "@/lib/actions";
+import { getAgentEmoji, cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+
+interface CreateGroupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (groupId: string, groupName: string) => void;
+}
+
+export function CreateGroupDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: CreateGroupDialogProps) {
+  const [mode, setMode] = useState<"quick" | "select">("quick");
+  const [name, setName] = useState("");
+  const [agents, setAgents] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [recentAgents, setRecentAgents] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchAllAgents().then(setAgents);
+      fetchConversationList()
+        .then((items) => {
+          const recent = items
+            .filter((i) => i.type === "agent")
+            .slice()
+            .sort((a, b) => {
+              const ta = a.lastTime ? new Date(a.lastTime + "Z").getTime() : 0;
+              const tb = b.lastTime ? new Date(b.lastTime + "Z").getTime() : 0;
+              return tb - ta;
+            })
+            .map((i) => i.name)
+            .slice(0, 5);
+          setRecentAgents(recent);
+        })
+        .catch(() => {
+          setRecentAgents([]);
+        });
+      setName("");
+      setSelected(new Set());
+      setMode("quick");
+    }
+  }, [open]);
+
+  const toggleAgent = (agent: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(agent)) {
+        next.delete(agent);
+      } else {
+        next.add(agent);
+      }
+      return next;
+    });
+  };
+
+  const membersForMode = () => {
+    if (mode === "quick") return recentAgents;
+    return Array.from(selected);
+  };
+
+  const handleCreate = async () => {
+    const groupName = name.trim() || (mode === "quick" ? "Recent" : "New group");
+    const members = membersForMode();
+    if (members.length === 0) return;
+
+    setLoading(true);
+    try {
+      const result = await createNewGroup(groupName, members);
+      if (!result.success) {
+        alert(result.error || "Create failed");
+        return;
+      }
+      onCreated(result.id, result.name);
+      onOpenChange(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md glass-surface-opaque glass-noise">
+        <DialogHeader>
+          <DialogTitle>Create group chat</DialogTitle>
+          <DialogDescription className="sr-only">
+            Create a group chat and choose members to join
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className={cn(
+                "flex-1 rounded-xl border px-3 py-2 text-sm transition",
+                mode === "quick"
+                  ? "bg-primary text-primary-foreground border-primary/20"
+                  : "bg-white/60 hover:bg-white/75"
+              )}
+              onClick={() => setMode("quick")}
+              disabled={loading}
+            >
+              Quick create (recent 5)
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "flex-1 rounded-xl border px-3 py-2 text-sm transition",
+                mode === "select"
+                  ? "bg-primary text-primary-foreground border-primary/20"
+                  : "bg-white/60 hover:bg-white/75"
+              )}
+              onClick={() => setMode("select")}
+              disabled={loading}
+            >
+              Select members
+            </button>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-medium">Group name</label>
+            <Input
+              placeholder="Enter group name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="bg-white/80"
+            />
+          </div>
+
+          {mode === "quick" ? (
+            <div>
+              <label className="mb-2 block text-sm font-medium">Members to add</label>
+              <div className="rounded-xl border bg-white/60 p-3">
+                {recentAgents.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">No recent agents</p>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {recentAgents.map((a) => (
+                      <span
+                        key={a}
+                        className="inline-flex items-center gap-2 rounded-full border bg-white/70 px-2.5 py-1 text-sm"
+                        title={a}
+                      >
+                        <span className="text-base">{getAgentEmoji(a)}</span>
+                        <span className="max-w-40 truncate">{a}</span>
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div>
+              <label className="mb-2 block text-sm font-medium">
+                Select members ({selected.size} selected)
+              </label>
+              <ScrollArea className="h-60 rounded-md border bg-white/55 p-2">
+                {agents.length === 0 ? (
+                  <p className="py-8 text-center text-sm text-muted-foreground">
+                    No agents available
+                  </p>
+                ) : (
+                  <div className="space-y-1">
+                    {agents.map((agent) => (
+                      <button
+                        key={agent}
+                        className={cn(
+                          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors",
+                          selected.has(agent)
+                            ? "bg-primary text-primary-foreground"
+                            : "hover:bg-accent"
+                        )}
+                        onClick={() => toggleAgent(agent)}
+                      >
+                        <span className="text-xl">{getAgentEmoji(agent)}</span>
+                        <span className="flex-1 font-medium">{agent}</span>
+                        {selected.has(agent) && <Check className="h-4 w-4" />}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={membersForMode().length === 0 || loading}
+          >
+            {loading ? "Creating..." : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/markdown-renderer.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { type ReactNode, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+
+export function MarkdownRenderer({ children }: { children: string }) {
+  const components = useMemo<Partial<Components>>(
+    () => ({
+      p: ({ children }: { children?: ReactNode }) => <p>{children}</p>,
+      a: ({ children, href }: { children?: ReactNode; href?: string }) => (
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-2 break-all"
+        >
+          {children}
+        </a>
+      ),
+      code: ({ children }: { children?: ReactNode }) => (
+        <code className="rounded bg-muted/40 px-1 py-0.5 text-[0.9em] wrap-anywhere">
+          {children}
+        </code>
+      ),
+      pre: ({ children }: { children?: ReactNode }) => (
+        <pre className="mt-2 max-w-full overflow-auto rounded-lg border bg-muted/30 p-2 text-xs text-muted-foreground">
+          {children}
+        </pre>
+      ),
+      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" />;
+      },
+      table: ({ children }: { children?: ReactNode }) => (
+        <div className="mt-2 max-w-full overflow-auto">
+          <table className="w-full text-left text-sm">{children}</table>
+        </div>
+      ),
+    }),
+    []
+  );
+
+  return (
+    <div className="md-flow">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]} components={components}>
+        {children || ""}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/payload-card.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useMemo } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function PayloadCard({
+  raw,
+  disabled,
+  onPasteChoice,
+  selectedLines,
+}: {
+  raw?: string | null;
+  disabled?: boolean;
+  onPasteChoice?: (text: string, mode?: "replace" | "append") => void;
+  selectedLines?: Set<string>;
+}) {
+  type ParsedChoice = { id?: string; label?: string } | string;
+  type ParsedField = { id?: string; label?: string; kind?: string } | string;
+  type ParsedViewModel =
+    | { kind: "raw"; raw: string }
+    | { kind: "unknown"; pretty: string }
+    | { kind: "choice"; allowMultiple: boolean; options: ParsedChoice[] }
+    | { kind: "confirm"; text: string; confirmLabel: string; cancelLabel: string }
+    | { kind: "form"; fields: ParsedField[] };
+
+  const vm = useMemo<ParsedViewModel | null>(() => {
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw) as unknown;
+      if (!parsed || typeof parsed !== "object") {
+        return { kind: "raw", raw: String(raw) };
+      }
+
+      const obj = parsed as Record<string, unknown>;
+      const type = typeof obj.type === "string" ? obj.type : "unknown";
+
+      if (type === "choice") {
+        return {
+          kind: "choice",
+          allowMultiple: Boolean(obj.allow_multiple),
+          options: Array.isArray(obj.options) ? (obj.options as ParsedChoice[]) : [],
+        };
+      }
+
+      if (type === "confirm") {
+        return {
+          kind: "confirm",
+          text: typeof obj.text === "string" ? obj.text : "",
+          confirmLabel:
+            typeof obj.confirm_label === "string" ? obj.confirm_label : "Confirm",
+          cancelLabel:
+            typeof obj.cancel_label === "string" ? obj.cancel_label : "Cancel",
+        };
+      }
+
+      if (type === "form") {
+        return {
+          kind: "form",
+          fields: Array.isArray(obj.fields) ? (obj.fields as ParsedField[]) : [],
+        };
+      }
+
+      return { kind: "unknown", pretty: JSON.stringify(parsed, null, 2) };
+    } catch {
+      return { kind: "raw", raw };
+    }
+  }, [raw]);
+
+  if (!vm) return null;
+
+  if (vm.kind === "raw") {
+    return (
+      <pre className="mt-2 max-w-full overflow-auto rounded-lg border bg-muted/30 p-2 text-xs text-muted-foreground">
+        {vm.raw}
+      </pre>
+    );
+  }
+
+  if (vm.kind === "unknown") {
+    return (
+      <pre className="mt-2 max-w-full overflow-auto rounded-lg border bg-muted/30 p-2 text-xs text-muted-foreground">
+        {vm.pretty}
+      </pre>
+    );
+  }
+
+  if (vm.kind === "choice") {
+    const selected = selectedLines ?? new Set<string>();
+    return (
+      <div className="mt-2 rounded-xl border bg-linear-to-b from-background to-muted/20 p-2.5 text-xs shadow-sm">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary" className="text-[11px]">
+              Choice
+            </Badge>
+            {vm.allowMultiple && (
+              <span className="text-[11px] text-muted-foreground">Multiple allowed</span>
+            )}
+          </div>
+          <span className="text-[11px] text-muted-foreground">Click a button to fill the input</span>
+        </div>
+        <div className="grid grid-cols-1 gap-2">
+          {vm.options.length > 0 ? (
+            vm.options.map((opt, idx) => {
+              if (opt && typeof opt === "object") {
+                const o = opt as Record<string, unknown>;
+                const id = typeof o.id === "string" ? o.id : "";
+                const label = typeof o.label === "string" ? o.label : "";
+                const text = id && label ? `${id}: ${label}` : id || label || "<empty>";
+                const pasteText = id || label || "";
+                const cleaned = pasteText.trim();
+                const isSelected = vm.allowMultiple && !!cleaned && selected.has(cleaned);
+
+                return (
+                  <Button
+                    key={`${id || "opt"}-${idx}`}
+                    type="button"
+                    variant={isSelected ? "secondary" : "outline"}
+                    size="sm"
+                    className={cn(
+                      "h-auto min-h-9 justify-start gap-2 px-3 py-2 text-left text-xs",
+                      "rounded-xl",
+                      isSelected && "cursor-not-allowed opacity-80"
+                    )}
+                    disabled={disabled || !onPasteChoice || !pasteText || isSelected}
+                    onClick={() =>
+                      onPasteChoice?.(pasteText, vm.allowMultiple ? "append" : "replace")
+                    }
+                    title={pasteText ? `Click to paste: ${pasteText}` : undefined}
+                  >
+                    {id && (
+                      <span className="inline-flex h-5 items-center rounded-md bg-muted px-1.5 font-mono text-[11px] text-muted-foreground">
+                        {id}
+                      </span>
+                    )}
+                    <span className="min-w-0 flex-1 truncate">{id && label ? label : text}</span>
+                  </Button>
+                );
+              }
+
+              const asText = String(opt);
+              return (
+                <Button
+                  key={`opt-${idx}`}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-auto min-h-9 justify-start rounded-xl px-3 py-2 text-left text-xs"
+                  disabled={disabled || !onPasteChoice}
+                  onClick={() =>
+                    onPasteChoice?.(asText, vm.allowMultiple ? "append" : "replace")
+                  }
+                  title={`Click to paste: ${asText}`}
+                >
+                  {asText}
+                </Button>
+              );
+            })
+          ) : (
+            <div className="text-muted-foreground">No options</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (vm.kind === "confirm") {
+    return (
+      <div className="mt-2 rounded-xl border bg-linear-to-b from-background to-muted/20 p-2.5 text-xs shadow-sm">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <Badge variant="secondary" className="text-[11px]">
+            Confirm
+          </Badge>
+          <span className="text-[11px] text-muted-foreground">Click a button to fill the input</span>
+        </div>
+        {vm.text && <div className="mb-2 whitespace-pre-wrap leading-normal">{vm.text}</div>}
+        <div className="flex flex-col gap-2">
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            className="h-9 w-full rounded-xl px-3 text-xs"
+            disabled={disabled || !onPasteChoice}
+            onClick={() => onPasteChoice?.(vm.confirmLabel)}
+            title={`Click to paste: ${vm.confirmLabel}`}
+          >
+            {vm.confirmLabel}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-9 w-full rounded-xl px-3 text-xs"
+            disabled={disabled || !onPasteChoice}
+            onClick={() => onPasteChoice?.(vm.cancelLabel)}
+            title={`Click to paste: ${vm.cancelLabel}`}
+          >
+            {vm.cancelLabel}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // vm.kind === "form"
+  return (
+    <div className="mt-2 rounded-xl border bg-linear-to-b from-background to-muted/20 p-2.5 text-xs shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <Badge variant="secondary" className="text-[11px]">
+          Form
+        </Badge>
+        <span className="text-[11px] text-muted-foreground">Fill by field (click to insert)</span>
+      </div>
+      <div className="space-y-2">
+        {vm.fields.length > 0 ? (
+          vm.fields.map((f, idx) => {
+            if (f && typeof f === "object") {
+              const fo = f as Record<string, unknown>;
+              const id = typeof fo.id === "string" ? fo.id : "";
+              const label = typeof fo.label === "string" ? fo.label : "";
+              const kind = typeof fo.kind === "string" ? fo.kind : "";
+              const name = label || id || "Field";
+              const pasteText = id || label || "";
+
+              return (
+                <button
+                  key={`${id || "field"}-${idx}`}
+                  type="button"
+                  className={cn(
+                    "w-full rounded-xl border bg-background/60 px-3 py-2 text-left",
+                    "hover:bg-background/80 hover:shadow-sm transition",
+                    "disabled:opacity-60"
+                  )}
+                  disabled={disabled || !onPasteChoice || !pasteText}
+                  onClick={() => onPasteChoice?.(pasteText)}
+                  title={pasteText ? `Click to paste: ${pasteText}` : undefined}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="min-w-0 flex-1 truncate text-[13px]">{name}</span>
+                    {kind && (
+                      <span className="shrink-0 rounded-md bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+                        {kind}
+                      </span>
+                    )}
+                  </div>
+                  {id && label && (
+                    <div className="mt-1 text-[11px] text-muted-foreground">{id}</div>
+                  )}
+                </button>
+              );
+            }
+
+            const asText = String(f);
+            return (
+              <button
+                key={`field-${idx}`}
+                type="button"
+                className="w-full rounded-xl border bg-background/60 px-3 py-2 text-left text-[13px] hover:bg-background/80 hover:shadow-sm transition disabled:opacity-60"
+                disabled={disabled || !onPasteChoice}
+                onClick={() => onPasteChoice?.(asText)}
+                title={`Click to paste: ${asText}`}
+              >
+                {asText}
+              </button>
+            );
+          })
+        ) : (
+          <div className="text-muted-foreground">No fields</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+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 badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden backdrop-blur-md",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-white/20 bg-primary text-primary-foreground shadow-sm ring-1 ring-white/15 [a&]:hover:bg-primary/90",
+        secondary:
+          "border-white/35 bg-white/55 text-foreground shadow-sm ring-1 ring-white/25 dark:border-white/12 dark:bg-white/8 dark:text-foreground [a&]:hover:bg-white/70 dark:[a&]:hover:bg-white/12",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-white/40 bg-white/35 text-foreground ring-1 ring-white/20 dark:border-white/12 dark:bg-white/6 [a&]:hover:bg-white/50 dark:[a&]:hover:bg-white/10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }