@cadraos/sdk 0.3.8 → 0.3.10

package/dist/kanban/index.js

@@ -16,6 +16,10 @@ function mapHandler(h) {
     type: h.type,
     agentUuid: h.agent_uuid,
     teamUuid: h.team_uuid,
+    // FINDING-6: carry the remote_agent binding through the wire parse. The
+    // engine's remote_agent dispatch reads `remoteAgentUuid`; dropping it here
+    // made every published remote_agent lane dispatch-dead.
+    remoteAgentUuid: h.remote_agent_uuid,
     agentRef: h.agent_ref,
     webhook: h.webhook ? {
       url: h.webhook.url,
@@ -294,7 +298,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");
@@ -403,6 +407,27 @@ function useKanbanBoard(options) {
     },
     [refresh]
   );
+  const deleteCard = 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 ?? [],
@@ -418,6 +443,7 @@ function useKanbanBoard(options) {
     createCard,
     updateCard,
     transitionCard,
+    deleteCard,
     handleRunTerminal
   };
 }
@@ -2293,35 +2319,40 @@ function useCardRun(options) {
 function cn9(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-function runStatusTone(status) {
-  switch (status) {
-    case "running":
-      return {
-        label: "Running",
-        className: "bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300"
-      };
-    case "completed":
-      return {
-        label: "Completed",
-        className: "bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300"
-      };
-    case "failed":
-      return {
-        label: "Failed",
-        className: "bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300"
-      };
-    case "cancelled":
-      return {
-        label: "Cancelled",
-        className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
-      };
+function badgeVariantClass(variant) {
+  switch (variant) {
+    case "default":
+      return "bg-primary text-primary-foreground";
+    case "secondary":
+      return "border border-border bg-secondary text-secondary-foreground";
+    case "outline":
+      return "border border-border text-foreground";
+    case "info":
+      return "border border-info/30 bg-info/15 text-info";
+    case "success":
+      return "border border-success/30 bg-success/15 text-success";
+    case "warning":
+      return "border border-warning/40 bg-warning/15 text-warning";
+    case "destructive":
+      return "border border-destructive/40 bg-destructive/15 text-destructive";
+    case "neutral":
     default:
-      return {
-        label: "Pending",
-        className: "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300"
-      };
+      return "border border-border bg-secondary text-muted-foreground";
   }
 }
+function runStatusTone(status) {
+  const map = {
+    running: { label: "Running", variant: "info" },
+    completed: { label: "Completed", variant: "success" },
+    failed: { label: "Failed", variant: "destructive" },
+    cancelled: { label: "Cancelled", variant: "neutral" }
+  };
+  const { label, variant } = map[status ?? ""] ?? {
+    label: "Pending",
+    variant: "neutral"
+  };
+  return { label, variant, className: badgeVariantClass(variant) };
+}
 function CardDrawer({
   card,
   adapter,
@@ -2440,11 +2471,11 @@ function CardDrawer({
       role: "dialog",
       "aria-label": `Card: ${card.title}`,
       className: cn9(
-        "flex h-full w-full sm:max-w-sm flex-col bg-white dark:bg-gray-950 border-l border-gray-200 dark:border-gray-800 shadow-xl",
+        "flex h-full w-full sm:max-w-sm flex-col bg-card border-l border-border shadow-xl",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b border-gray-200 dark:border-gray-800 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b border-border px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             isEditing ? /* @__PURE__ */ jsx(
               "input",
@@ -2454,14 +2485,14 @@ function CardDrawer({
                 onChange: (e) => setEditTitle(e.target.value),
                 "aria-label": "Card title",
                 placeholder: "Card title",
-                className: "w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-1 text-base font-semibold text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+                className: "w-full rounded-md border border-input bg-background px-2 py-1 text-base font-semibold text-foreground focus:outline-none focus:ring-2 focus:ring-ring/50"
               }
             ) : /* @__PURE__ */ jsx(
               "h2",
               {
                 className: cn9(
-                  "text-base font-semibold text-gray-900 dark:text-gray-100 truncate",
-                  onUpdate && "cursor-text rounded hover:bg-gray-100 dark:hover:bg-gray-800/60 -mx-1 px-1"
+                  "text-base font-semibold text-foreground truncate",
+                  onUpdate && "cursor-text rounded hover:bg-muted/60 -mx-1 px-1"
                 ),
                 onClick: onUpdate ? () => setIsEditing(true) : void 0,
                 title: onUpdate ? "Click to edit" : void 0,
@@ -2469,7 +2500,7 @@ function CardDrawer({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: card.lane }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: card.lane }),
               /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -2489,7 +2520,7 @@ function CardDrawer({
                 type: "button",
                 onClick: () => setIsEditing(true),
                 "aria-label": "Edit card",
-                className: "rounded p-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200",
+                className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
                 children: /* @__PURE__ */ jsxs(
                   "svg",
                   {
@@ -2515,7 +2546,7 @@ function CardDrawer({
                 type: "button",
                 onClick: onClose,
                 "aria-label": "Close",
-                className: "rounded p-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200",
+                className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
                 children: /* @__PURE__ */ jsxs(
                   "svg",
                   {
@@ -2537,8 +2568,8 @@ function CardDrawer({
             )
           ] })
         ] }),
-        isEditing ? /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 px-4 py-3", children: [
-          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: "Description" }),
+        isEditing ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Description" }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -2547,7 +2578,7 @@ function CardDrawer({
               "aria-label": "Card description",
               rows: 4,
               placeholder: "Add a description\u2026",
-              className: "w-full resize-y rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+              className: "w-full resize-y rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring/50"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-end gap-2", children: [
@@ -2557,7 +2588,7 @@ function CardDrawer({
                 type: "button",
                 onClick: handleCancel,
                 disabled: isSaving,
-                className: "rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50",
+                className: "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted disabled:opacity-50",
                 children: "Cancel"
               }
             ),
@@ -2567,26 +2598,27 @@ function CardDrawer({
                 type: "button",
                 onClick: () => void handleSave(),
                 disabled: isSaving,
-                className: "rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50",
+                className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:opacity-50",
                 children: isSaving ? "Saving\u2026" : "Save"
               }
             )
           ] })
-        ] }) : (card.description || onUpdate) && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-gray-800 px-4 py-3", children: /* @__PURE__ */ jsx(
+        ] }) : (card.description || onUpdate) && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsx(
           "p",
           {
             className: cn9(
               "text-sm whitespace-pre-wrap",
-              card.description ? "text-gray-600 dark:text-gray-300" : "italic text-gray-400 dark:text-gray-600",
-              onUpdate && "cursor-text rounded hover:bg-gray-100 dark:hover:bg-gray-800/60 -mx-1 px-1"
+              card.description ? "text-muted-foreground" : "italic text-muted-foreground/70",
+              onUpdate && "cursor-text rounded hover:bg-muted/60 -mx-1 px-1"
             ),
             onClick: onUpdate ? () => setIsEditing(true) : void 0,
             title: onUpdate ? "Click to edit" : void 0,
             children: card.description || "Add a description\u2026"
           }
         ) }),
-        showTransitionButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 border-b border-gray-200 dark:border-gray-800 px-4 py-2", children: [
-          isHumanGate && /* @__PURE__ */ jsx("span", { className: "mr-auto text-xs font-medium text-amber-600 dark:text-amber-400", children: "Awaiting your approval" }),
+        showTransitionButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 border-b border-border px-4 py-2", children: [
+          isHumanGate && // Human gate = needs-you → warning (amber is reserved for this, F3).
+          /* @__PURE__ */ jsx("span", { className: "mr-auto text-xs font-medium text-warning", children: "Awaiting your approval" }),
           manualEdges.map((t, i) => {
             const toLabel = laneByKey.get(t.toLane)?.label ?? t.toLane;
             const isPrimary = isHumanGate ? i === 0 : false;
@@ -2599,26 +2631,27 @@ function CardDrawer({
                 onClick: () => void handleTransition(t.toLane),
                 disabled: pendingLane !== null,
                 className: cn9(
-                  "rounded-md px-3 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 disabled:opacity-50",
-                  isPrimary ? "bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500/40" : "border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-blue-500/40"
+                  // ≥44px touch (M12/F5) — density kept via padding, not height.
+                  "inline-flex min-h-11 items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:opacity-50",
+                  isPrimary ? "border border-border bg-secondary text-secondary-foreground hover:bg-muted" : "border border-border text-foreground hover:bg-muted"
                 ),
                 children: busy ? "Moving\u2026" : label
               },
               t.id
             );
           })
-        ] }) : onAdvance && canAdvance && !isEditing && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-b border-gray-200 dark:border-gray-800 px-4 py-2", children: /* @__PURE__ */ jsx(
+        ] }) : onAdvance && canAdvance && !isEditing && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-b border-border px-4 py-2", children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: () => void handleAdvance(),
             disabled: isAdvancing,
-            className: "rounded-md border border-gray-300 dark:border-gray-700 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50",
+            className: "inline-flex min-h-11 items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:opacity-50",
             children: isAdvancing ? "Advancing\u2026" : "Advance \u2192"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-          !hasExecution ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 dark:text-gray-600", children: "No run yet for this card." }) }) : /* @__PURE__ */ jsx(
+          !hasExecution ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No run yet for this card." }) }) : /* @__PURE__ */ jsx(
             MessageList,
             {
               messages: run.messages,
@@ -2631,14 +2664,14 @@ function CardDrawer({
               className: "flex-1"
             }
           ),
-          failed && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-950/30 px-4 py-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-red-700 dark:text-red-300", children: run.error ?? "Run failed." }),
+          failed && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-destructive/40 bg-destructive/10 px-4 py-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: run.error ?? "Run failed." }),
             onRetry && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: () => onRetry(card),
-                className: "shrink-0 rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500/40",
+                className: "inline-flex min-h-11 shrink-0 items-center justify-center rounded-md border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50",
                 children: "Retry"
               }
             )
@@ -2680,10 +2713,54 @@ function Spinner({ className }) {
     }
   );
 }
-function KanbanCard({ card, onClick, selected, className }) {
+function ClockIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "h-2.5 w-2.5",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+      ]
+    }
+  );
+}
+function KanbanCard({
+  card,
+  onClick,
+  selected,
+  dueState,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  className
+}) {
   const runStatus = card.run?.status;
-  const tone = runStatus ? runStatusTone(runStatus) : null;
-  const isWorking = runStatus === "running" || runStatus === "pending";
+  const isWorking = runStatus === "running";
+  const failed = runStatus === "failed";
+  let chip = null;
+  if (failed) {
+    chip = { label: "Failed", variant: "destructive" };
+  } else if (dueState === "ready") {
+    chip = { label: "Ready", variant: "success" };
+  } else if (runStatus === "completed") {
+    const t = runStatusTone(runStatus);
+    chip = { label: t.label, variant: t.variant };
+  } else if (dueState === "due") {
+    chip = { label: "Due", variant: "neutral", icon: "clock" };
+  } else if (dueState === "waiting") {
+    chip = { label: "Waiting", variant: "neutral" };
+  } else if (runStatus) {
+    const t = runStatusTone(runStatus);
+    chip = { label: t.label, variant: t.variant };
+  }
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -2691,47 +2768,438 @@ function KanbanCard({ card, onClick, selected, className }) {
       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-white dark:bg-gray-900 p-3 shadow-sm transition",
-        "hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600",
-        "focus:outline-none focus:ring-2 focus:ring-blue-500/40",
-        isWorking ? "border-amber-400 dark:border-amber-500 ring-2 ring-amber-400/50 animate-pulse" : selected ? "border-blue-400 dark:border-blue-500 ring-2 ring-blue-500/30" : "border-gray-200 dark:border-gray-700",
+        // 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
       ),
       children: [
-        isWorking && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute -top-1 -right-1 flex h-3 w-3",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75" }),
-              /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-3 w-3 rounded-full bg-amber-500" })
-            ]
-          }
-        ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2", children: card.title }),
-          isWorking ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 inline-flex items-center gap-1 rounded-full bg-amber-100 dark:bg-amber-900/40 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300", children: [
-            /* @__PURE__ */ jsx(Spinner, {}),
-            "Working"
-          ] }) : tone && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground line-clamp-2", children: card.title }),
+          isWorking ? /* @__PURE__ */ jsxs(
             "span",
             {
               className: cn9(
-                "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
-                tone.className
+                "shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
+                badgeVariantClass("info")
               ),
-              children: tone.label
+              children: [
+                /* @__PURE__ */ jsx(Spinner, {}),
+                "Working"
+              ]
+            }
+          ) : chip && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn9(
+                "shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
+                badgeVariantClass(chip.variant)
+              ),
+              children: [
+                chip.icon === "clock" && /* @__PURE__ */ jsx(ClockIcon2, {}),
+                chip.label
+              ]
             }
           )
         ] }),
-        card.description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2", children: card.description }),
-        card.type && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("span", { className: "inline-block rounded bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:text-gray-400", children: card.type }) })
+        card.description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-muted-foreground line-clamp-2", children: card.description }),
+        card.type && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("span", { className: "inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: card.type }) })
       ]
     }
   );
 }
+function CapMeter({ count, cap, className }) {
+  const pct = cap > 0 ? Math.min(100, Math.round(count / cap * 100)) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn9(
+        "mt-2 flex items-center gap-2 text-[11px] text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "tabular-nums font-medium", children: [
+          count,
+          "/",
+          cap
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": cap,
+            "aria-valuenow": count,
+            "aria-label": `${count} of ${cap} used`,
+            className: "h-1 flex-1 overflow-hidden rounded-full bg-secondary",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block h-full rounded-full bg-primary",
+                style: { width: `${pct}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+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",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-3.5 w-3.5",
+    "aria-hidden": true
+  };
+  if (kind === "remote") {
+    return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 21h8M12 17v4" })
+    ] });
+  }
+  if (kind === "human") {
+    return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+      /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v4M8 16h.01M16 16h.01" })
+  ] });
+}
+function OnlineDot({ online }) {
+  if (online === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": online ? "connected" : "offline",
+      className: cn9(
+        "h-1.5 w-1.5 shrink-0 rounded-full",
+        online ? "bg-success" : "bg-muted-foreground"
+      )
+    }
+  );
+}
+function RemoteBadge() {
+  return /* @__PURE__ */ 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] = useState(false);
+  const [placement, setPlacement] = useState(null);
+  const rootRef = useRef(null);
+  const triggerRef = 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);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onDocDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocDown);
+    document.addEventListener("touchstart", onDocDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocDown);
+      document.removeEventListener("touchstart", onDocDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const kind = selected?.kind ?? "cadra";
+  const displayLabel = selected?.label ?? "Unassigned";
+  const face = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn9(
+          "grid h-5 w-5 shrink-0 place-items-center rounded-full",
+          kind === "cadra" ? "bg-primary/15 text-primary" : "bg-secondary text-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(AgentKindIcon, { kind })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: displayLabel }),
+    kind === "remote" && /* @__PURE__ */ jsx(RemoteBadge, {}),
+    /* @__PURE__ */ 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__ */ jsxs("div", { ref: rootRef, className: cn9("relative mt-2 w-full", className), children: [
+    editable ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => open ? setOpen(false) : openMenu(),
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": `Assigned agent: ${displayLabel}. Change`,
+        className: cn9(
+          "flex min-h-11 w-full items-center gap-1.5 rounded-lg border border-border bg-card px-2",
+          "text-xs font-semibold text-foreground",
+          "hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-ring/50"
+        ),
+        children: [
+          face,
+          /* @__PURE__ */ 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 text-muted-foreground",
+              children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": `Assigned agent: ${displayLabel}`,
+        className: cn9(
+          "flex min-h-11 w-full items-center gap-1.5 rounded-lg border border-border bg-muted/60 px-2",
+          "text-xs font-semibold text-muted-foreground"
+        ),
+        children: [
+          face,
+          /* @__PURE__ */ jsxs(
+            "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__ */ jsx("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !editable && lockedReason && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          className: "h-3 w-3 shrink-0",
+          children: [
+            /* @__PURE__ */ jsx("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: lockedReason })
+    ] }),
+    editable && open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: menuStyle,
+        className: cn9(
+          "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: [
+          /* @__PURE__ */ 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__ */ jsxs("li", { role: "presentation", children: [
+                /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.label }),
+                /* @__PURE__ */ 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__ */ jsx("li", { role: "option", "aria-selected": isSelected, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(AgentKindIcon, { kind: optKind })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }),
+                        optKind === "remote" && /* @__PURE__ */ jsx(RemoteBadge, {}),
+                        /* @__PURE__ */ jsx(OnlineDot, { online: opt.online }),
+                        isSelected && /* @__PURE__ */ 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__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+                          }
+                        )
+                      ]
+                    }
+                  ) }, opt.id);
+                }) })
+              ] }, group.kind))
+            }
+          ),
+          onEditAgent && selected && /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                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 text-foreground",
+                "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring/50"
+              ),
+              children: [
+                /* @__PURE__ */ 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 text-muted-foreground",
+                    children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" })
+                  }
+                ),
+                "Edit this agent"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function dueStateFor(card, lane, now) {
+  const rs = card.run?.status;
+  if (rs === "completed" && !lane.terminal) return "ready";
+  if (card.nextDueAt) {
+    const t = Date.parse(card.nextDueAt);
+    if (!Number.isNaN(t) && t <= now) return "due";
+  }
+  if (lane.trigger === "scheduled" && !rs) return "waiting";
+  return void 0;
+}
 function KanbanColumn({
   lane,
   cards,
@@ -2739,29 +3207,100 @@ function KanbanColumn({
   selectedCardId,
   onCreateCard,
   showCreate,
+  count,
+  agentPicker,
+  canEditHandlers,
+  draggableCards,
+  dragActive,
+  dropAllowed,
+  onCardDragStart,
+  onCardDragEnd,
+  onLaneDrop,
   className
 }) {
+  const headerCount = count ?? cards.length;
+  const isScheduled = lane.trigger === "scheduled";
+  const showCapMeter = count !== void 0 && typeof lane.cap === "number" && lane.cap > 0;
+  const showAgentBadge = lane.handler?.type === "cadra_agent" && !agentPicker;
+  const now = Date.now();
   return /* @__PURE__ */ 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-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 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: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5 border-b border-gray-200 dark:border-gray-800", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200 truncate", children: lane.label }),
-            lane.handler?.type === "cadra_agent" && /* @__PURE__ */ jsx(
-              "span",
-              {
-                title: lane.handler.agentRef ? `Agent: ${lane.handler.agentRef}` : "Agent lane",
-                className: "rounded bg-violet-100 dark:bg-violet-950/40 px-1.5 py-0.5 text-[10px] font-medium text-violet-700 dark:text-violet-300",
-                children: "agent"
-              }
-            )
+        /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-3 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground truncate", children: lane.label }),
+              showAgentBadge && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: lane.handler?.agentRef ? `Agent: ${lane.handler.agentRef}` : "Agent lane",
+                  className: cn9(
+                    // A static lane marker — NOT a run state. Uses neutral tokens,
+                    // never `info` (which means "running" in the F3 vocabulary).
+                    "rounded px-1.5 py-0.5 text-[10px] font-medium",
+                    badgeVariantClass("neutral")
+                  ),
+                  children: "agent"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground tabular-nums", children: headerCount })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-gray-200 dark:bg-gray-800 px-2 py-0.5 text-[11px] font-medium text-gray-600 dark:text-gray-400", children: cards.length })
+          isScheduled && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2 flex-wrap", children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn9(
+                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold",
+                badgeVariantClass("neutral")
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                    className: "h-3 w-3",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+                      /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+                    ]
+                  }
+                ),
+                "runs on schedule"
+              ]
+            }
+          ) }),
+          showCapMeter && /* @__PURE__ */ jsx(CapMeter, { count: headerCount, cap: lane.cap }),
+          agentPicker && /* @__PURE__ */ jsx(
+            LaneAgentPicker,
+            {
+              ...agentPicker,
+              canEdit: agentPicker.canEdit ?? canEditHandlers
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto p-2", children: [
           cards.map((card) => /* @__PURE__ */ jsx(
@@ -2769,21 +3308,26 @@ function KanbanColumn({
             {
               card,
               onClick: onCardClick,
-              selected: card.id === selectedCardId
+              selected: card.id === selectedCardId,
+              dueState: dueStateFor(card, lane, now),
+              draggable: draggableCards,
+              onDragStart: onCardDragStart,
+              onDragEnd: onCardDragEnd
             },
             card.id
           )),
-          cards.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-1 py-4 text-center text-xs text-gray-400 dark:text-gray-600", children: "No cards" }),
+          cards.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-1 py-4 text-center text-xs text-muted-foreground", children: "No cards" }),
           showCreate && onCreateCard && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => onCreateCard(lane),
               className: cn9(
-                "mt-1 w-full rounded-lg border border-dashed border-gray-300 dark:border-gray-700 px-3 py-2",
-                "text-sm font-medium text-gray-500 dark:text-gray-400",
-                "hover:border-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition",
-                "focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+                // ≥44px touch (M12/F5) — density kept via padding, not height.
+                "mt-1 inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-dashed border-border px-3 py-2",
+                "text-sm font-medium text-muted-foreground",
+                "hover:border-primary/50 hover:text-foreground transition",
+                "focus:outline-none focus:ring-2 focus:ring-ring/40"
               ),
               children: "+ New card"
             }
@@ -2798,14 +3342,14 @@ function SkeletonCard() {
     "div",
     {
       className: cn9(
-        "w-full rounded-lg border border-gray-200 dark:border-gray-700",
-        "bg-white dark:bg-gray-900 p-3 shadow-sm"
+        "w-full rounded-lg border border-border",
+        "bg-card p-3 shadow-sm"
       ),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3.5 w-3/4 rounded bg-gray-200 dark:bg-gray-800" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-2 h-2.5 w-1/2 rounded bg-gray-200 dark:bg-gray-800" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3 h-4 w-1/3 rounded bg-gray-200 dark:bg-gray-800" })
+        /* @__PURE__ */ jsx("div", { className: "h-3.5 w-3/4 rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 h-2.5 w-1/2 rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 h-4 w-1/3 rounded bg-muted" })
       ]
     }
   );
@@ -2816,14 +3360,14 @@ function SkeletonColumn({ cardCount }) {
     {
       className: cn9(
         "flex w-72 shrink-0 flex-col rounded-xl",
-        "bg-gray-50 dark:bg-gray-900/50",
-        "border border-gray-200 dark:border-gray-800"
+        "bg-muted/40",
+        "border border-border"
       ),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5 border-b border-gray-200 dark:border-gray-800", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-3.5 w-24 rounded bg-gray-200 dark:bg-gray-800" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 w-6 rounded-full bg-gray-200 dark:bg-gray-800" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5 border-b border-border", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3.5 w-24 rounded bg-muted" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-6 rounded-full bg-muted" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2 p-2", children: Array.from({ length: cardCount }).map((_, i) => (
           // eslint-disable-next-line react/no-array-index-key
@@ -2852,6 +3396,67 @@ function KanbanBoardSkeleton({
     }
   );
 }
+function formatCountdown(nextTickAt) {
+  if (!nextTickAt) return null;
+  const target = Date.parse(nextTickAt);
+  if (Number.isNaN(target)) return null;
+  const ms = target - Date.now();
+  if (ms <= 0) return "any moment";
+  const mins = Math.round(ms / 6e4);
+  if (mins < 1) return "under a minute";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  const rem = mins % 60;
+  return rem > 0 ? `${hrs}h ${rem}m` : `${hrs}h`;
+}
+var DOT_TONE = {
+  "on-schedule": "bg-success",
+  due: "bg-info",
+  paused: "bg-muted-foreground"
+};
+var DEFAULT_LABEL = {
+  "on-schedule": "On schedule",
+  due: "Running now",
+  paused: "Paused"
+};
+function ScheduleStatus({
+  nextTickAt,
+  dueByLane,
+  label,
+  tone = "on-schedule",
+  className
+}) {
+  const countdown = formatCountdown(nextTickAt);
+  const totalDue = dueByLane ? Object.values(dueByLane).reduce((a, b) => a + b, 0) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn9(
+        "flex items-center gap-2 text-xs text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn9("h-2 w-2 shrink-0 rounded-full", DOT_TONE[tone])
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label ?? DEFAULT_LABEL[tone] }),
+        countdown && /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+          "\xB7 next run in ",
+          countdown
+        ] }),
+        totalDue > 0 && /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+          "\xB7 ",
+          totalDue,
+          " due"
+        ] })
+      ]
+    }
+  );
+}
 function KanbanBoard({
   adapter,
   onCreateCard,
@@ -2862,6 +3467,13 @@ function KanbanBoard({
   enableEdit = true,
   enableAdvance = true,
   pollIntervalMs,
+  laneCounts,
+  canEditHandlers,
+  laneAgentPicker,
+  scheduleStatus,
+  focusCardId,
+  renderCardDrawer,
+  enableDrag,
   className
 }) {
   const {
@@ -2876,8 +3488,19 @@ function KanbanBoard({
     createCard,
     updateCard,
     transitionCard,
+    deleteCard,
     handleRunTerminal
   } = useKanbanBoard({ adapter, onError, onCardCreated, pollIntervalMs });
+  const lastFocusedRef = useRef(void 0);
+  useEffect(() => {
+    if (!focusCardId) {
+      lastFocusedRef.current = void 0;
+      return;
+    }
+    if (lastFocusedRef.current === focusCardId) return;
+    lastFocusedRef.current = focusCardId;
+    void openCard(focusCardId);
+  }, [focusCardId]);
   const handleCardClick = useCallback(
     (card) => {
       void openCard(card.id);
@@ -2910,14 +3533,53 @@ function KanbanBoard({
     (cardId, toLane) => transitionCard({ cardId, targetLane: toLane }),
     [transitionCard]
   );
+  const [dragging, setDragging] = useState(null);
+  const draggingRef = useRef(null);
+  const dropInFlightRef = useRef(null);
+  const allowedDropLanes = 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 = useCallback((card) => {
+    const d = { id: card.id, lane: card.lane };
+    draggingRef.current = d;
+    setDragging(d);
+  }, []);
+  const handleCardDragEnd = useCallback(() => {
+    draggingRef.current = null;
+    setDragging(null);
+  }, []);
+  const handleLaneDrop = 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;
   return /* @__PURE__ */ jsxs("div", { className: cn9("flex h-full w-full flex-col", className), children: [
-    error && /* @__PURE__ */ jsx("div", { className: "m-3 rounded-md border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-950/30 px-3 py-2 text-sm text-red-700 dark:text-red-300", children: error }),
+    error && /* @__PURE__ */ jsx("div", { className: "m-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error }),
+    scheduleStatus && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border px-4 py-2", children: /* @__PURE__ */ jsx(ScheduleStatus, { ...scheduleStatus }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
       lanes.length === 0 && isLoading ? /* @__PURE__ */ jsx(KanbanBoardSkeleton, { className: "flex-1 overflow-x-auto p-4" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start gap-4 overflow-x-auto p-4 snap-x snap-mandatory no-scrollbar sm:snap-none", children: [
-        lanes.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 dark:text-gray-600", children: "No lanes configured." }),
+        lanes.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No lanes configured." }),
         lanes.map((lane) => /* @__PURE__ */ jsx(
           KanbanColumn,
           {
@@ -2926,12 +3588,35 @@ function KanbanBoard({
             onCardClick: handleCardClick,
             selectedCardId: selectedCard?.id,
             onCreateCard: handleCreate,
-            showCreate: enableCreate && lane.key === initialLaneKey
+            showCreate: enableCreate && lane.key === initialLaneKey,
+            count: laneCounts?.[lane.key],
+            agentPicker: laneAgentPicker?.(lane),
+            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__ */ 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__ */ jsx(
         CardDrawer,
         {
           card: selectedCard,
@@ -2947,7 +3632,7 @@ function KanbanBoard({
           onRunTerminal: handleRunTerminal,
           onError
         }
-      )
+      ))
     ] })
   ] });
 }
@@ -2972,6 +3657,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) } : {}
   };
 }
@@ -3668,15 +4354,6 @@ var ExecutionStreamControllerImpl = class {
   sseClient = null;
   status = "connecting";
   reconnectAttempts = 0;
-  // CAD-39 / webchat dual-plane create-connect race. `hasConnected` flips true on
-  // the first successful SSE open; `notFoundRetries` bounds retries of a 404
-  // encountered BEFORE we ever connect (the run row is persisted slightly AFTER
-  // the client opens the stream — the norm on the webchat path where msg-api owns
-  // the executionId and cadra persists the agent_executions row via an async
-  // worker callback). See handleConnectionError.
-  hasConnected = false;
-  notFoundRetries = 0;
-  maxConnectRaceRetries = 3;
   seenEventIds = /* @__PURE__ */ new Set();
   _lastEventId = null;
   activityTimeoutId = null;
@@ -3816,8 +4493,6 @@ var ExecutionStreamControllerImpl = class {
         if (connected) {
           this.status = "connected";
           this.reconnectAttempts = 0;
-          this.hasConnected = true;
-          this.notFoundRetries = 0;
           this.resetActivityTimeout();
         }
         this.emit("connectionChange", { connected, usingFallback: false });
@@ -4107,38 +4782,6 @@ var ExecutionStreamControllerImpl = class {
       return;
     }
     const msg = error instanceof Error ? error.message : String(error);
-    const isNotFound = /\b404\b/.test(msg);
-    const isAuthFailure = /\b40[13]\b/.test(msg) || /INVALID_API_KEY|INVALID_REQUEST/.test(msg);
-    if (isNotFound && !isAuthFailure && !this.hasConnected) {
-      if (this.notFoundRetries < this.maxConnectRaceRetries) {
-        this.notFoundRetries++;
-        this.status = "reconnecting";
-        const delay = Math.min(
-          this.config.reconnectBaseDelayMs * this.notFoundRetries,
-          this.config.reconnectMaxDelayMs
-        );
-        await new Promise((resolve) => setTimeout(resolve, delay));
-        if (this.status === "closed") {
-          return;
-        }
-        try {
-          await this.connectSSE();
-        } catch (retryError) {
-          await this.handleConnectionError(retryError);
-        }
-        return;
-      }
-      if (this.pollingEnabled) {
-        if (this.sseClient) {
-          this.sseClient.disconnect();
-          this.sseClient = null;
-        }
-        this.status = "fallback_polling";
-        this.emit("connectionChange", { connected: false, usingFallback: true });
-        this.startPolling();
-        return;
-      }
-    }
     if (/\b4\d\d\b/.test(msg) || /INVALID_API_KEY|INVALID_REQUEST/.test(msg)) {
       if (this.sseClient) {
         this.sseClient.disconnect();
@@ -6186,6 +6829,6 @@ function createDefaultKanbanAdapter(config) {
   };
 }
 
-export { AgentBoard, BoardConfigClient, CadraLifecycleSource, CardDrawer, KanbanBoard, KanbanCard as KanbanCardTile, KanbanColumn, createDefaultKanbanAdapter, mapDefinitionToBoard, toResolvedLifecycle, useCardRun, useKanbanBoard };
+export { AgentBoard, BoardConfigClient, CadraLifecycleSource, CapMeter, CardDrawer, KanbanBoard, KanbanCard as KanbanCardTile, KanbanColumn, LaneAgentPicker, ScheduleStatus, badgeVariantClass, cn9 as cn, createDefaultKanbanAdapter, mapDefinitionToBoard, runStatusTone, toResolvedLifecycle, useCardRun, useKanbanBoard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map