@cadraos/sdk 0.3.9 → 0.3.10

package/dist/kanban/index.cjs

@@ -305,7 +305,7 @@ function useKanbanBoard(options) {
       try {
         const full = await adapter.getCard(cardId);
         setSelectedCard(
-          (prev) => prev && prev.id === cardId ? full : prev
+          (prev) => prev == null || prev.id === cardId ? full : prev
         );
       } catch (err) {
         if (!known) fail(err, "Failed to open card");
@@ -414,6 +414,27 @@ function useKanbanBoard(options) {
     },
     [refresh]
   );
+  const deleteCard = react.useCallback(
+    async (cardId) => {
+      if (!adapter.deleteCard) return false;
+      setError(null);
+      const prevCards = cards;
+      const prevSelected = selectedCard;
+      setCards((prev) => prev.filter((c) => c.id !== cardId));
+      setSelectedCard((prev) => prev && prev.id === cardId ? null : prev);
+      try {
+        await adapter.deleteCard(cardId);
+        void silentRefresh();
+        return true;
+      } catch (err) {
+        setCards(prevCards);
+        setSelectedCard(prevSelected);
+        fail(err, "Failed to delete card");
+        return false;
+      }
+    },
+    [adapter, cards, selectedCard, silentRefresh, fail]
+  );
   return {
     board,
     lanes: board?.lanes ?? [],
@@ -429,6 +450,7 @@ function useKanbanBoard(options) {
     createCard,
     updateCard,
     transitionCard,
+    deleteCard,
     handleRunTerminal
   };
 }
@@ -2722,6 +2744,9 @@ function KanbanCard({
   onClick,
   selected,
   dueState,
+  draggable,
+  onDragStart,
+  onDragEnd,
   className
 }) {
   const runStatus = card.run?.status;
@@ -2750,10 +2775,20 @@ function KanbanCard({
       onClick: () => onClick?.(card),
       "aria-pressed": selected,
       "aria-busy": isWorking,
+      draggable,
+      onDragStart: draggable ? (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", card.id);
+        onDragStart?.(card);
+      } : void 0,
+      onDragEnd: draggable ? () => onDragEnd?.() : void 0,
       className: cn9(
-        "relative w-full text-left rounded-lg border bg-card p-3 shadow-sm transition",
+        // Solid card: fill + border + a faint token top-sheen (adapts to theme),
+        // matching the host's cockpit cards (work-shell v2 visual pass).
+        "relative w-full text-left rounded-xl border bg-card bg-gradient-to-b from-foreground/[0.03] to-transparent p-3 shadow-sm motion-safe:transition-shadow",
         "hover:shadow-md hover:border-primary/40",
         "focus:outline-none focus:ring-2 focus:ring-ring/50",
+        draggable && "cursor-grab active:cursor-grabbing",
         // The working card carries the SINGLE focal motion on the board (F11).
         isWorking ? "border-info/60 ring-2 ring-info/40 animate-pulse" : selected ? "border-primary/60 ring-2 ring-primary/30" : "border-border",
         className
@@ -2830,6 +2865,11 @@ function CapMeter({ count, cap, className }) {
     }
   );
 }
+var AGENT_GROUPS = [
+  { kind: "cadra", label: "Cadra agents" },
+  { kind: "remote", label: "Your own agents" },
+  { kind: "human", label: "Teammates" }
+];
 function AgentKindIcon({ kind }) {
   const common = {
     viewBox: "0 0 24 24",
@@ -2872,17 +2912,55 @@ function OnlineDot({ online }) {
     }
   );
 }
+function RemoteBadge() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded-full border border-accent/40 bg-accent/15 px-1.5 py-px text-[10px] font-semibold leading-4 text-accent", children: "Remote" });
+}
 function LaneAgentPicker({
   selected,
   options,
   onSelect,
   canEdit = true,
   lockedReason,
+  onEditAgent,
   className
 }) {
   const [open, setOpen] = react.useState(false);
+  const [placement, setPlacement] = react.useState(null);
   const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
   const editable = canEdit && !!onSelect && (options?.length ?? 0) > 0;
+  const openMenu = () => {
+    const el = triggerRef.current;
+    if (el && typeof window !== "undefined") {
+      const rect = el.getBoundingClientRect();
+      const vw = window.innerWidth || 0;
+      const vh = window.innerHeight || 0;
+      const margin = 8;
+      const gap = 4;
+      const desired = 288;
+      const width = Math.max(
+        Math.min(rect.width || 224, Math.max(vw - margin * 2, 160)),
+        160
+      );
+      const left = Math.min(
+        Math.max(rect.left, margin),
+        Math.max(vw - width - margin, margin)
+      );
+      const spaceBelow = vh - rect.bottom - gap - margin;
+      const spaceAbove = rect.top - gap - margin;
+      const flipUp = spaceBelow < desired && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(
+        Math.min(desired, flipUp ? spaceAbove : spaceBelow),
+        120
+      );
+      setPlacement(
+        flipUp ? { bottom: Math.max(vh - rect.top + gap, margin), left, width, maxHeight } : { top: rect.bottom + gap, left, width, maxHeight }
+      );
+    } else {
+      setPlacement(null);
+    }
+    setOpen(true);
+  };
   react.useEffect(() => {
     if (!open) return;
     const onDocDown = (e) => {
@@ -2916,14 +2994,28 @@ function LaneAgentPicker({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: displayLabel }),
+    kind === "remote" && /* @__PURE__ */ jsxRuntime.jsx(RemoteBadge, {}),
     /* @__PURE__ */ jsxRuntime.jsx(OnlineDot, { online: selected?.online })
   ] });
+  const grouped = AGENT_GROUPS.map((group) => ({
+    ...group,
+    items: (options ?? []).filter((opt) => (opt.kind ?? "cadra") === group.kind)
+  })).filter((group) => group.items.length > 0);
+  const menuStyle = placement ? {
+    position: "fixed",
+    top: placement.top,
+    bottom: placement.bottom,
+    left: placement.left,
+    width: placement.width,
+    maxHeight: placement.maxHeight
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn9("relative mt-2 w-full", className), children: [
     editable ? /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
-        onClick: () => setOpen((o) => !o),
+        onClick: () => open ? setOpen(false) : openMenu(),
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-label": `Assigned agent: ${displayLabel}. Change`,
@@ -3001,47 +3093,106 @@ function LaneAgentPicker({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: lockedReason })
     ] }),
-    editable && open && /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
+    editable && open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        role: "listbox",
-        "aria-label": "Assign an agent",
+        style: menuStyle,
         className: cn9(
-          "absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded-lg border border-border",
-          "bg-popover p-1 shadow-lg"
+          "flex flex-col overflow-hidden rounded-lg border border-border bg-popover shadow-lg",
+          menuStyle ? "z-50" : "absolute z-20 mt-1 max-h-64 w-full"
         ),
-        children: options.map((opt) => {
-          const isSelected = opt.id === selected?.id;
-          return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              role: "listbox",
+              "aria-label": "Assign an agent",
+              className: "min-h-0 flex-1 overflow-y-auto p-1",
+              children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("li", { role: "presentation", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", "aria-label": group.label, children: group.items.map((opt) => {
+                  const isSelected = opt.id === selected?.id;
+                  const optKind = opt.kind ?? "cadra";
+                  return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        onSelect(opt.id);
+                        setOpen(false);
+                      },
+                      className: cn9(
+                        "flex min-h-11 w-full items-center gap-1.5 rounded-md px-2 text-left text-xs font-medium",
+                        "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50",
+                        isSelected ? "text-primary" : "text-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: cn9(
+                              "grid h-5 w-5 shrink-0 place-items-center rounded-full",
+                              optKind === "cadra" ? "bg-primary/15 text-primary" : "bg-secondary text-foreground"
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsx(AgentKindIcon, { kind: optKind })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }),
+                        optKind === "remote" && /* @__PURE__ */ jsxRuntime.jsx(RemoteBadge, {}),
+                        /* @__PURE__ */ jsxRuntime.jsx(OnlineDot, { online: opt.online }),
+                        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            "aria-hidden": true,
+                            className: "h-3.5 w-3.5 shrink-0",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" })
+                          }
+                        )
+                      ]
+                    }
+                  ) }, opt.id);
+                }) })
+              ] }, group.kind))
+            }
+          ),
+          onEditAgent && selected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
               onClick: () => {
-                onSelect(opt.id);
+                onEditAgent(selected.id);
                 setOpen(false);
               },
               className: cn9(
-                "flex min-h-11 w-full items-center gap-1.5 rounded-md px-2 text-left text-xs font-medium",
-                "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50",
-                isSelected ? "text-primary" : "text-foreground"
+                "flex min-h-11 w-full items-center gap-1.5 rounded-md px-2 text-left text-xs font-medium text-foreground",
+                "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
+                  "svg",
                   {
-                    className: cn9(
-                      "grid h-5 w-5 shrink-0 place-items-center rounded-full",
-                      (opt.kind ?? "cadra") === "cadra" ? "bg-primary/15 text-primary" : "bg-secondary text-foreground"
-                    ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(AgentKindIcon, { kind: opt.kind ?? "cadra" })
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(OnlineDot, { online: opt.online })
+                "Edit this agent"
               ]
             }
-          ) }, opt.id);
-        })
+          ) })
+        ]
       }
     )
   ] });
@@ -3066,6 +3217,12 @@ function KanbanColumn({
   count,
   agentPicker,
   canEditHandlers,
+  draggableCards,
+  dragActive,
+  dropAllowed,
+  onCardDragStart,
+  onCardDragEnd,
+  onLaneDrop,
   className
 }) {
   const headerCount = count ?? cards.length;
@@ -3076,9 +3233,21 @@ function KanbanColumn({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      onDragOver: dropAllowed ? (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+      } : void 0,
+      onDrop: dropAllowed && onLaneDrop ? (e) => {
+        e.preventDefault();
+        onLaneDrop(lane);
+      } : void 0,
       className: cn9(
-        "flex w-[85vw] max-w-sm snap-start shrink-0 flex-col rounded-xl bg-muted/40 border border-border sm:w-72 sm:max-w-none",
+        "flex w-[85vw] max-w-sm snap-start shrink-0 flex-col rounded-xl bg-muted/40 border border-border transition sm:w-72 sm:max-w-none",
         isScheduled && "border-border",
+        // MV4 drag affordance: allowed targets glow; other lanes dim so the
+        // valid drop zones read at a glance.
+        dragActive && dropAllowed && "border-primary/60 ring-2 ring-primary/40 bg-primary/5",
+        dragActive && !dropAllowed && "opacity-55",
         className
       ),
       children: [
@@ -3147,7 +3316,10 @@ function KanbanColumn({
               card,
               onClick: onCardClick,
               selected: card.id === selectedCardId,
-              dueState: dueStateFor(card, lane, now)
+              dueState: dueStateFor(card, lane, now),
+              draggable: draggableCards,
+              onDragStart: onCardDragStart,
+              onDragEnd: onCardDragEnd
             },
             card.id
           )),
@@ -3307,6 +3479,8 @@ function KanbanBoard({
   laneAgentPicker,
   scheduleStatus,
   focusCardId,
+  renderCardDrawer,
+  enableDrag,
   className
 }) {
   const {
@@ -3321,6 +3495,7 @@ function KanbanBoard({
     createCard,
     updateCard,
     transitionCard,
+    deleteCard,
     handleRunTerminal
   } = useKanbanBoard({ adapter, onError, onCardCreated, pollIntervalMs });
   const lastFocusedRef = react.useRef(void 0);
@@ -3365,6 +3540,44 @@ function KanbanBoard({
     (cardId, toLane) => transitionCard({ cardId, targetLane: toLane }),
     [transitionCard]
   );
+  const [dragging, setDragging] = react.useState(null);
+  const draggingRef = react.useRef(null);
+  const dropInFlightRef = react.useRef(null);
+  const allowedDropLanes = react.useMemo(() => {
+    if (!dragging || !board?.transitions) return /* @__PURE__ */ new Set();
+    return new Set(
+      board.transitions.filter((t) => t.fromLane === dragging.lane && t.manualAllowed).map((t) => t.toLane)
+    );
+  }, [dragging, board?.transitions]);
+  const handleCardDragStart = react.useCallback((card) => {
+    const d = { id: card.id, lane: card.lane };
+    draggingRef.current = d;
+    setDragging(d);
+  }, []);
+  const handleCardDragEnd = react.useCallback(() => {
+    draggingRef.current = null;
+    setDragging(null);
+  }, []);
+  const handleLaneDrop = react.useCallback(
+    (lane) => {
+      const cur = draggingRef.current;
+      draggingRef.current = null;
+      setDragging(null);
+      if (!cur || lane.key === cur.lane) return;
+      if (dropInFlightRef.current === cur.id) return;
+      const allowed = (board?.transitions ?? []).some(
+        (t) => t.fromLane === cur.lane && t.toLane === lane.key && t.manualAllowed
+      );
+      if (!allowed) return;
+      dropInFlightRef.current = cur.id;
+      void Promise.resolve(transitionCard({ cardId: cur.id, targetLane: lane.key })).finally(
+        () => {
+          if (dropInFlightRef.current === cur.id) dropInFlightRef.current = null;
+        }
+      );
+    },
+    [board?.transitions, transitionCard]
+  );
   const initialLaneKey = lanes.find((l) => !l.terminal)?.key ?? lanes[0]?.key;
   const selectedLane = selectedCard ? lanes.find((l) => l.key === selectedCard.lane) : void 0;
   const canAdvanceSelected = !!selectedLane && !selectedLane.terminal;
@@ -3385,12 +3598,32 @@ function KanbanBoard({
             showCreate: enableCreate && lane.key === initialLaneKey,
             count: laneCounts?.[lane.key],
             agentPicker: laneAgentPicker?.(lane),
-            canEditHandlers
+            canEditHandlers,
+            draggableCards: enableDrag && enableAdvance,
+            dragActive: !!dragging,
+            dropAllowed: !!dragging && dragging.lane !== lane.key && allowedDropLanes.has(lane.key),
+            onCardDragStart: handleCardDragStart,
+            onCardDragEnd: handleCardDragEnd,
+            onLaneDrop: handleLaneDrop
           },
           lane.id ?? lane.key
         ))
       ] }),
-      selectedCard && /* @__PURE__ */ jsxRuntime.jsx(
+      selectedCard && (renderCardDrawer ? renderCardDrawer({
+        card: selectedCard,
+        adapter,
+        lanes,
+        transitions: enableAdvance ? board?.transitions : void 0,
+        canAdvance: canAdvanceSelected,
+        onClose: closeCard,
+        onRetry: onRetryCard ? handleRetry : void 0,
+        onUpdate: enableEdit ? handleUpdate : void 0,
+        onAdvance: enableAdvance ? handleAdvance : void 0,
+        onTransition: enableAdvance ? handleTransition : void 0,
+        onDelete: adapter.deleteCard ? deleteCard : void 0,
+        onRunTerminal: handleRunTerminal,
+        onError
+      }) : /* @__PURE__ */ jsxRuntime.jsx(
         CardDrawer,
         {
           card: selectedCard,
@@ -3406,7 +3639,7 @@ function KanbanBoard({
           onRunTerminal: handleRunTerminal,
           onError
         }
-      )
+      ))
     ] })
   ] });
 }
@@ -3431,6 +3664,7 @@ function composeAdapter(source, boardConfigUuid, version, cardSource) {
     transitionCard(input) {
       return cardSource.transitionCard(input);
     },
+    ...cardSource.deleteCard ? { deleteCard: (id) => cardSource.deleteCard(id) } : {},
     ...cardSource.createRunStream ? { createRunStream: (id) => cardSource.createRunStream(id) } : {}
   };
 }
@@ -4804,7 +5038,6 @@ var AgentsAPI = class extends BaseResourceAPI {
     super(http, "/api/v1/agents");
     this.getStreamConfig = getStreamConfig;
   }
-  getStreamConfig;
   // ===== LIST Operations =====
   /**
    * List all agents in the organization
@@ -5710,7 +5943,6 @@ var SessionsAPI = class extends BaseResourceAPI {
     super(http, "/api/v1/sessions");
     this.getStreamConfig = getStreamConfig;
   }
-  getStreamConfig;
   // ===== LIST Operations =====
   /**
    * List all sessions in the organization
@@ -6030,7 +6262,6 @@ var KanbanAPI = class extends BaseResourceAPI {
     super(http, "/api/v1/kanban");
     this.getStreamConfig = getStreamConfig;
   }
-  getStreamConfig;
   // ===== BOARD =====
   /**
    * Get the current org's board (lanes in declared order). Auto-provisions
@@ -6232,7 +6463,6 @@ var RemoteAgentsAPI = class extends BaseResourceAPI {
     super(http, "/api/v1/remote-agents");
     this.getStreamConfig = getStreamConfig;
   }
-  getStreamConfig;
   /**
    * List all remote agents in the organization
    *