cue-console 0.1.2 → 0.1.5

package/README.md

@@ -1,6 +1,8 @@
 # cue-console
 
-Cue Hub console (Next.js UI).
+| Mobile | Desktop |
+| --- | --- |
+| ![Mobile screenshot](../iphone.png) | ![Desktop screenshot](../desktop.png) |
 
 ---
 
@@ -20,9 +22,11 @@ Think of it as an “all-in-one” collaboration console for your agents and CLI
 
 Run the console and pair it with `cuemcp`.
 
-### Step 1: Start `cuemcp`
+### Step 1: Install `cue-console`
 
-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 cue-console
+```
 
 ### Step 2: Start `cue-console`
 
@@ -30,8 +34,22 @@ Add and run the MCP server in your agent/runtime (see [`cue-mcp`](https://github
 cue-console dev --port 3000
 ```
 
+Alternatively, you can run it without installing globally:
+
+```bash
+npx cue-console dev --port 3000
+```
+
 Open `http://localhost:3000`.
 
+### Step 3: Start `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).
+
+### Step 4: Connect your runtime
+
+In the agent/runtime you want to use, type `cue` to trigger connect (or reconnect) and route the collaboration flow to `cue-console`.
+
 ---
 
 ## Notes
@@ -39,8 +57,53 @@ Open `http://localhost:3000`.
 - The current version can occasionally disconnect (for example, the agent replies directly without calling `cue()` at the end).
 - If you get disconnected, type `cue` in the affected runtime to trigger auto-reconnect.
 
+<details>
+<summary>Human Agent Protocol (HAP) rules (required)</summary>
+
+```text
+Human Agent Protocol (HAP)
+
+Hard rule: the agent must call the `cue` tool at the end of every response, no exceptions.
+Always use the cue MCP to provide a final summary, ask a question, or request input.
+
+Convention: when the user types `cue`, the user is accepting the HAP rules (supports disconnect + reconnect).
+
+- First-time connection / no agent_id: call join() to obtain an agent_id, then call cue().
+- Reconnect / existing agent_id (e.g. the cue call timed out but the chat continued):
+  when the user types cue again, prefer calling cue() with the existing agent_id;
+  only call join() again if you cannot determine the agent_id.
+
+When to call
+
+- On first message in a new chat (no history): call join().
+- After completing any task: call cue().
+- Before ending any response: call cue().
+
+Forbidden behavior
+
+- Using a self-chosen name without calling join() first.
+- Ending a reply without calling cue().
+- Replacing cue() with "let me know if you need anything else".
+- Assuming there are no follow-ups.
+
+Notes
+
+If you are not sure whether to call it, call it.
+
+Not calling cue() means the user cannot continue the interaction.
+```
+
+</details>
+
 ---
 
+## Design notes
+
+- **Group chat UX**: collaboration requests and responses are organized like a chat, so you can scan context quickly.
+- **Mentions (`@...`)**: lightweight addressing to route a response or bring a specific agent/human into the thread.
+- **Option cards**: responses can be captured as tappable cards with a responsive layout that works on both mobile and desktop.
+- **Keyboard-first + mobile-friendly**: input affordances aim to work well with both quick desktop workflows and on-the-go usage.
+
 ## Pairing with cuemcp
 
 **Rule #1:** both sides must agree on the same DB location.

package/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import path from "node:path";
 
 const nextConfig: NextConfig = {
   experimental: {
@@ -6,6 +7,9 @@ const nextConfig: NextConfig = {
       bodySizeLimit: "10mb",
     },
   },
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
 };
 
 export default nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "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/node": "^20",
     "better-sqlite3": "^12.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -51,7 +52,6 @@
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.13",
-    "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/uuid": "^11.0.0",

package/src/app/layout.tsx

@@ -14,7 +14,7 @@ const geistMono = Recursive({
 });
 
 export const metadata: Metadata = {
-  title: "Cue Hub",
+  title: "cue-console",
   description: "AI agent group chat console",
 };
 

package/src/components/chat-view.tsx

@@ -38,7 +38,7 @@ import {
   type CueResponse,
   type AgentTimelineItem,
 } from "@/lib/actions";
-import { ChevronLeft } from "lucide-react";
+import { ChevronLeft, Github } from "lucide-react";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { PayloadCard } from "@/components/payload-card";
 import { ChatComposer } from "@/components/chat-composer";
@@ -423,11 +423,51 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
     closeMention();
   };
 
-  const pasteToInput = (text: string, mode: "replace" | "append" = "replace") => {
+  const pasteToInput = (
+    text: string,
+    mode: "replace" | "append" | "upsert" = "replace"
+  ) => {
     const cleaned = (text || "").trim();
     if (!cleaned) return;
 
     const next = (() => {
+      if (mode === "replace") return cleaned;
+
+      if (mode === "upsert") {
+        // Upsert by "<field>:" prefix (first colon defines the key)
+        const colon = cleaned.indexOf(":");
+        if (colon <= 0) {
+          // No clear field key; fall back to append behavior
+          mode = "append";
+        } else {
+          const key = cleaned.slice(0, colon).trim();
+          if (!key) {
+            mode = "append";
+          } else {
+            const rawLines = input.split(/\r?\n/);
+            const lines = rawLines.map((s) => s.replace(/\s+$/, ""));
+            const needle = key + ":";
+
+            let replaced = false;
+            const out = lines.map((line) => {
+              const t = line.trimStart();
+              if (!replaced && t.startsWith(needle)) {
+                replaced = true;
+                return cleaned;
+              }
+              return line;
+            });
+
+            if (!replaced) {
+              const base = out.join("\n").trim() ? out.join("\n").replace(/\s+$/, "") : "";
+              return base ? base + "\n" + cleaned : cleaned;
+            }
+
+            return out.join("\n");
+          }
+        }
+      }
+
       if (mode !== "append") return cleaned;
 
       const lines = input
@@ -811,10 +851,19 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
     const isPending = (r: CueRequest) => r.status === "PENDING";
     
     if (type === "agent") {
-      // Direct chat: respond to all pending requests for this agent
-      const pendingIds = pendingRequests.filter(isPending).map((r) => r.request_id);
-      if (pendingIds.length > 0) {
-        const result = await batchRespond(pendingIds, input, currentImages, draftMentions);
+      // Direct chat: reply only to the latest pending request for this agent
+      const latestPending = pendingRequests
+        .filter(isPending)
+        .slice()
+        .sort((a, b) => (b.created_at || "").localeCompare(a.created_at || ""))[0];
+
+      if (latestPending) {
+        const result = await submitResponse(
+          latestPending.request_id,
+          input,
+          currentImages,
+          draftMentions
+        );
         if (!result.success) {
           setError(result.error || "Send failed");
           setBusy(false);
@@ -1035,6 +1084,16 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
             </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
@@ -1235,7 +1294,7 @@ function MessageBubble({
   disabled?: boolean;
   currentInput?: string;
   isGroup?: boolean;
-  onPasteChoice?: (text: string, mode?: "replace" | "append") => void;
+  onPasteChoice?: (text: string, mode?: "replace" | "append" | "upsert") => void;
   onMentionAgent?: (agentId: string) => void;
   onReply?: () => void;
   onCancel?: () => void;

package/src/components/conversation-list.tsx

@@ -241,7 +241,15 @@ export function ConversationList({
           </div>
         ) : (
           <div className="flex w-full items-center justify-between gap-2">
-            <h1 className="text-lg font-semibold">Cue Hub</h1>
+            <a
+              href="https://github.com/nmhjklnm/cue-console"
+              target="_blank"
+              rel="noreferrer"
+              className="text-lg font-semibold hover:underline underline-offset-4"
+              title="Open cue-console repository"
+            >
+              cue-console
+            </a>
             <div className="flex items-center gap-1">
               <Button
                 variant="ghost"

package/src/components/payload-card.tsx

@@ -1,210 +1,396 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-export function PayloadCard({
-  raw,
+type PasteMode = "replace" | "append" | "upsert";
+type OnPasteChoice = (text: string, mode?: PasteMode) => void;
+
+type ParsedChoice = { id?: string; label?: string } | string;
+type ParsedField =
+  | {
+      id?: string;
+      label?: string;
+      kind?: string;
+      allow_multiple?: boolean;
+      options?: ParsedChoice[];
+    }
+  | 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[] };
+
+function parsePayload(raw?: string | null): 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 };
+  }
+}
+
+function formatChoiceLabel(opt: ParsedChoice): string {
+  if (opt && typeof opt === "object") {
+    const o = opt as Record<string, unknown>;
+    const label = typeof o.label === "string" ? o.label : "";
+    return label.trim();
+  }
+  return String(opt || "").trim();
+}
+
+function fieldDisplayName(f: ParsedField, idx: number): string {
+  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 : "";
+    return (label || id || `Field ${idx + 1}`).trim();
+  }
+  return String(f || `Field ${idx + 1}`).trim();
+}
+
+function findFieldLine(selectedLines: Set<string>, fieldKey: string): string | null {
+  const needle = `${fieldKey}:`;
+  for (const line of selectedLines) {
+    const t = (line || "").trim();
+    if (t.startsWith(needle)) return t;
+  }
+  return null;
+}
+
+function parseMultiValues(line: string, fieldKey: string): string[] {
+  const needle = `${fieldKey}:`;
+  const idx = line.indexOf(needle);
+  if (idx < 0) return [];
+  const rest = line.slice(idx + needle.length).trim();
+  if (!rest) return [];
+  return rest
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function toggleValue(values: string[], v: string): string[] {
+  const next = new Set(values);
+  if (next.has(v)) next.delete(v);
+  else next.add(v);
+  return Array.from(next);
+}
+
+function PayloadChoiceView({
+  vm,
   disabled,
   onPasteChoice,
   selectedLines,
 }: {
-  raw?: string | null;
+  vm: Extract<ParsedViewModel, { kind: "choice" }>;
   disabled?: boolean;
-  onPasteChoice?: (text: string, mode?: "replace" | "append") => void;
+  onPasteChoice?: OnPasteChoice;
   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]);
+  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>
+          <Badge variant="outline" className="text-[11px]">
+            {vm.allowMultiple ? "多选" : "单选"}
+          </Badge>
+        </div>
+        <span className="text-[11px] text-muted-foreground">
+          {vm.allowMultiple
+            ? "点击选项追加到输入框（可多次选择）"
+            : "点击选项填入输入框（单选替换）"}
+        </span>
+      </div>
+      <div className="grid grid-cols-1 gap-2">
+        {vm.options.length > 0 ? (
+          vm.options.map((opt, idx) => {
+            const label = formatChoiceLabel(opt);
+            const text = label || "<empty>";
+            const cleaned = label.trim();
+            const isSelected = vm.allowMultiple && !!cleaned && selected.has(cleaned);
+            return (
+              <Button
+                key={`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 || !label || isSelected}
+                onClick={() =>
+                  onPasteChoice?.(label, vm.allowMultiple ? "append" : "replace")
+                }
+                title={label ? `Click to paste: ${label}` : undefined}
+              >
+                <span className="min-w-0 flex-1 truncate">{text}</span>
+              </Button>
+            );
+          })
+        ) : (
+          <div className="text-muted-foreground">No options</div>
+        )}
+      </div>
+    </div>
+  );
+}
 
-  if (!vm) return null;
+function PayloadConfirmView({
+  vm,
+  disabled,
+  onPasteChoice,
+}: {
+  vm: Extract<ParsedViewModel, { kind: "confirm" }>;
+  disabled?: boolean;
+  onPasteChoice?: OnPasteChoice;
+}) {
+  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>
+  );
+}
 
-  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>
-    );
-  }
+function PayloadFormView({
+  vm,
+  disabled,
+  onPasteChoice,
+  selectedLines,
+}: {
+  vm: Extract<ParsedViewModel, { kind: "form" }>;
+  disabled?: boolean;
+  onPasteChoice?: OnPasteChoice;
+  selectedLines?: Set<string>;
+}) {
+  const [activeFieldIdx, setActiveFieldIdx] = useState(0);
 
-  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>
-    );
-  }
+  const clampFieldIdx = (idx: number) => {
+    const max = Math.max(0, vm.fields.length - 1);
+    return Math.min(Math.max(0, idx), max);
+  };
 
-  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">
+  const safeActiveIdx = clampFieldIdx(activeFieldIdx);
+  const selected = selectedLines ?? new Set<string>();
+
+  const advance = () => setActiveFieldIdx((prev) => clampFieldIdx(prev + 1));
+
+  const renderPanel = () => {
+    const f = vm.fields[safeActiveIdx];
+    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 allowMultiple = Boolean(fo.allow_multiple);
+      const options = Array.isArray(fo.options) ? (fo.options as ParsedChoice[]) : [];
+      const name = (label || id || `Field ${safeActiveIdx + 1}`).trim();
+      const fieldKey = name.trim();
+
+      const currentLine = fieldKey ? findFieldLine(selected, fieldKey) : null;
+      const currentValues =
+        allowMultiple && currentLine ? parseMultiValues(currentLine, fieldKey) : [];
+      const currentSet = new Set(currentValues);
+
+      const selectSingle = (value: string) => {
+        const v = (value || "").trim();
+        if (!v) return;
+        onPasteChoice?.(`${fieldKey}: ${v}`, "upsert");
+        advance();
+      };
+
+      const toggleMulti = (value: string) => {
+        const v = (value || "").trim();
+        if (!v) return;
+        const next = toggleValue(currentValues, v).sort();
+        const line = next.length > 0 ? `${fieldKey}: ${next.join(", ")}` : `${fieldKey}:`;
+        onPasteChoice?.(line, "upsert");
+      };
+
+      const upsertOther = () => {
+        if (!fieldKey) return;
+        onPasteChoice?.(`${fieldKey}:`, "upsert");
+      };
+
+      return (
+        <div
+          key={`panel-${safeActiveIdx}`}
+          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"
+          )}
+        >
           <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>
+            <span className="min-w-0 flex-1 truncate text-[13px]" title={name}>
+              {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>
+            )}
+            {allowMultiple && (
+              <span className="shrink-0 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 className="mt-2 grid grid-cols-1 gap-2">
+            {options.length > 0 ? (
+              <div className="grid grid-cols-1 gap-2">
+                {options.map((opt, oidx) => {
+                  const value = formatChoiceLabel(opt);
+                  const title = value ? `Click to select: ${fieldKey}: ${value}` : undefined;
+                  const isSelected = allowMultiple && !!value && currentSet.has(value);
+                  return (
+                    <Button
+                      key={`field-${safeActiveIdx}-opt-${oidx}`}
+                      type="button"
+                      variant={isSelected ? "secondary" : "outline"}
+                      size="sm"
+                      className="h-auto min-h-9 justify-start rounded-xl px-3 py-2 text-left text-xs"
+                      disabled={disabled || !onPasteChoice || !fieldKey || !value}
+                      onClick={() =>
+                        allowMultiple ? toggleMulti(value) : selectSingle(value)
+                      }
+                      title={title}
+                    >
+                      {value || "<empty>"}
+                    </Button>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-muted-foreground">No options</div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                className="h-9 flex-1 justify-start rounded-xl px-3 text-left text-xs"
+                disabled={disabled || !onPasteChoice || !fieldKey}
+                onClick={upsertOther}
+                title={fieldKey ? `Click to enter custom value: ${fieldKey}:` : undefined}
+              >
+                Other
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-9 rounded-xl px-3 text-xs"
+                disabled={disabled || safeActiveIdx >= vm.fields.length - 1}
+                onClick={() => setActiveFieldIdx((prev) => clampFieldIdx(prev + 1))}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
         </div>
-      </div>
-    );
-  }
+      );
+    }
 
-  if (vm.kind === "confirm") {
+    const asText = String(f || "").trim();
+    const fieldKey = asText || `Field ${safeActiveIdx + 1}`;
     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
+        key={`panel-${safeActiveIdx}`}
+        className="w-full rounded-xl border bg-background/60 px-3 py-2 text-left text-[13px]"
+      >
+        <div className="mb-2 truncate" title={fieldKey}>
+          {fieldKey}
         </div>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          className="h-9 justify-start rounded-xl px-3 text-left text-xs"
+          disabled={disabled || !onPasteChoice || !fieldKey}
+          onClick={() => onPasteChoice?.(`${fieldKey}:`, "upsert")}
+        >
+          Other
+        </Button>
       </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">
@@ -215,57 +401,36 @@ export function PayloadCard({
       </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 className="space-y-2">
+            <div className="flex items-center gap-2 overflow-x-auto rounded-xl border bg-background/60 p-1">
+              {vm.fields.map((f, idx) => {
+                const name = fieldDisplayName(f, idx);
+                const active = idx === safeActiveIdx;
+                return (
+                  <Button
+                    key={`tab-${idx}`}
+                    type="button"
+                    variant={active ? "secondary" : "ghost"}
+                    size="sm"
+                    className={cn(
+                      "h-8 shrink-0 rounded-lg px-2 text-xs",
+                      "max-w-55",
+                      active && "cursor-default"
                     )}
-                  </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>
-            );
-          })
+                    disabled={disabled || active}
+                    onClick={() => setActiveFieldIdx(idx)}
+                    title={name}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {idx + 1}. {name}
+                    </span>
+                  </Button>
+                );
+              })}
+            </div>
+
+            {renderPanel()}
+          </div>
         ) : (
           <div className="text-muted-foreground">No fields</div>
         )}
@@ -273,3 +438,59 @@ export function PayloadCard({
     </div>
   );
 }
+
+export function PayloadCard({
+  raw,
+  disabled,
+  onPasteChoice,
+  selectedLines,
+}: {
+  raw?: string | null;
+  disabled?: boolean;
+  onPasteChoice?: OnPasteChoice;
+  selectedLines?: Set<string>;
+}) {
+  const vm = useMemo<ParsedViewModel | null>(() => parsePayload(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") {
+    return (
+      <PayloadChoiceView
+        vm={vm}
+        disabled={disabled}
+        onPasteChoice={onPasteChoice}
+        selectedLines={selectedLines}
+      />
+    );
+  }
+
+  if (vm.kind === "confirm") {
+    return <PayloadConfirmView vm={vm} disabled={disabled} onPasteChoice={onPasteChoice} />;
+  }
+
+  return (
+    <PayloadFormView
+      vm={vm}
+      disabled={disabled}
+      onPasteChoice={onPasteChoice}
+      selectedLines={selectedLines}
+    />
+  );
+}