@burdenoff/microfe-vibecontrols 2026.529.10 → 2026.529.12

package/dist/components/agents/ConnectionLogPanel.js

@@ -0,0 +1,206 @@
+import { useGetAgentConnectionEventsQuery as e } from "../../generated/wspace-operations.js";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/agents/ConnectionLogPanel.tsx
+var o = {
+	info: "text-status-info-text",
+	warn: "text-status-warning-text",
+	error: "text-status-danger-text",
+	debug: "text-fg-muted"
+}, s = {
+	info: "bg-status-info-bg",
+	warn: "bg-status-warning-bg",
+	error: "bg-status-danger-bg",
+	debug: "bg-bg-muted"
+};
+function c(e) {
+	try {
+		return new Date(e).toISOString().replace("T", " ").replace("Z", "");
+	} catch {
+		return e;
+	}
+}
+function l(e) {
+	return e.map((e) => {
+		let t = e.detailsJson ? `\n    details: ${e.detailsJson}` : "";
+		return `[${e.timestamp}] #${e.sequence} ${e.level.toUpperCase().padEnd(5)} ${e.step.padEnd(28)} ${e.message}${t}`;
+	}).join("\n");
+}
+function u(e, t, n) {
+	return JSON.stringify({
+		exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+		agentId: t,
+		agentName: n,
+		count: e.length,
+		events: e.map((e) => ({
+			id: e.id,
+			timestamp: e.timestamp,
+			sequence: e.sequence,
+			step: e.step,
+			level: e.level,
+			message: e.message,
+			details: e.detailsJson ? JSON.parse(e.detailsJson) : null
+		}))
+	}, null, 2);
+}
+function d(e, t, n) {
+	let r = new Blob([n], { type: t }), i = URL.createObjectURL(r), a = document.createElement("a");
+	a.href = i, a.download = e, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(i);
+}
+function f({ agentId: f, agentName: p }) {
+	let { data: m, loading: h, error: g, refetch: _ } = e({
+		variables: {
+			agentId: f,
+			limit: 200
+		},
+		pollInterval: 3e3,
+		fetchPolicy: "cache-and-network"
+	}), [v, y] = r("none"), b = n(() => (m?.vibecontrolsAgentConnectionEvents ?? []).map((e) => ({
+		id: e.id,
+		timestamp: e.timestamp,
+		sequence: e.sequence,
+		step: e.step,
+		level: e.level,
+		message: e.message,
+		detailsJson: e.detailsJson ?? null
+	})), [m]), x = t(async (e) => {
+		let t = e === "text" ? l(b) : u(b, f, p);
+		try {
+			await navigator.clipboard.writeText(t), y(e), setTimeout(() => y("none"), 1500);
+		} catch {
+			d(`agent-${f}-connection-log.${e === "text" ? "txt" : "json"}`, e === "text" ? "text/plain" : "application/json", t);
+		}
+	}, [
+		b,
+		f,
+		p
+	]), S = t((e) => {
+		let t = e === "text" ? l(b) : u(b, f, p), n = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+		d(`agent-${p ?? f}-connection-log-${n}.${e === "text" ? "txt" : "json"}`, e === "text" ? "text/plain" : "application/json", t);
+	}, [
+		b,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ a("div", {
+		className: "flex flex-col h-full",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center justify-between p-4 border-b border-border-default",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("h3", {
+					className: "text-fg-default font-semibold text-base",
+					children: "Connection Log"
+				}), /* @__PURE__ */ i("p", {
+					className: "text-fg-muted text-xs mt-0.5",
+					children: h && b.length === 0 ? "Loading…" : `${b.length} event${b.length === 1 ? "" : "s"} · auto-refresh every 3s`
+				})] }), /* @__PURE__ */ a("div", {
+					className: "flex gap-2",
+					children: [
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => _(),
+							className: "px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default",
+							children: "Refresh"
+						}),
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => x("text"),
+							className: "px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default",
+							children: v === "text" ? "Copied!" : "Copy text"
+						}),
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => x("json"),
+							className: "px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default",
+							children: v === "json" ? "Copied!" : "Copy JSON"
+						}),
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => S("text"),
+							className: "px-3 py-1.5 text-xs rounded bg-action-primary hover:bg-action-primary-hover text-action-primary-text border border-action-primary",
+							children: "Export .txt"
+						}),
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => S("json"),
+							className: "px-3 py-1.5 text-xs rounded bg-action-primary hover:bg-action-primary-hover text-action-primary-text border border-action-primary",
+							children: "Export .json"
+						})
+					]
+				})]
+			}),
+			g && /* @__PURE__ */ a("div", {
+				className: "m-4 p-3 rounded bg-status-danger-bg text-status-danger-text text-sm",
+				children: ["Failed to load events: ", g.message]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex-1 overflow-auto p-4",
+				children: [b.length === 0 && !h && /* @__PURE__ */ a("div", {
+					className: "text-fg-muted text-sm text-center py-12",
+					children: [
+						"No connection events recorded for this agent yet.",
+						/* @__PURE__ */ i("br", {}),
+						"Events appear here every time the platform probes, registers, or syncs the agent."
+					]
+				}), /* @__PURE__ */ i("ol", {
+					className: "space-y-2",
+					children: b.map((e) => {
+						let t = o[e.level] ?? o.info, n = s[e.level] ?? s.info, r = (() => {
+							if (!e.detailsJson) return null;
+							try {
+								return JSON.stringify(JSON.parse(e.detailsJson), null, 2);
+							} catch {
+								return e.detailsJson;
+							}
+						})();
+						return /* @__PURE__ */ i("li", {
+							className: "rounded border border-border-default bg-bg-subtle",
+							children: /* @__PURE__ */ a("div", {
+								className: "flex items-start gap-3 p-3",
+								children: [/* @__PURE__ */ i("div", {
+									className: `px-2 py-0.5 rounded text-[10px] uppercase font-mono ${n} ${t} shrink-0`,
+									children: e.level
+								}), /* @__PURE__ */ a("div", {
+									className: "flex-1 min-w-0",
+									children: [
+										/* @__PURE__ */ a("div", {
+											className: "flex items-center gap-2 text-xs text-fg-muted font-mono",
+											children: [
+												/* @__PURE__ */ a("span", { children: ["#", e.sequence] }),
+												/* @__PURE__ */ i("span", { children: "·" }),
+												/* @__PURE__ */ i("span", { children: c(e.timestamp) }),
+												/* @__PURE__ */ i("span", { children: "·" }),
+												/* @__PURE__ */ i("span", {
+													className: "text-fg-default font-medium",
+													children: e.step
+												})
+											]
+										}),
+										/* @__PURE__ */ i("div", {
+											className: "text-sm text-fg-default mt-1 break-words",
+											children: e.message
+										}),
+										r && /* @__PURE__ */ a("details", {
+											className: "mt-2",
+											children: [/* @__PURE__ */ i("summary", {
+												className: "text-xs text-fg-muted cursor-pointer hover:text-fg-default",
+												children: "Details"
+											}), /* @__PURE__ */ i("pre", {
+												className: "mt-2 p-2 rounded bg-bg-default text-xs text-fg-default overflow-x-auto whitespace-pre-wrap break-words",
+												children: r
+											})]
+										})
+									]
+								})]
+							})
+						}, e.id);
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { f as ConnectionLogPanel };
+
+//# sourceMappingURL=ConnectionLogPanel.js.map

package/dist/components/agents/ConnectionLogPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionLogPanel.js","names":[],"sources":["../../../src/components/agents/ConnectionLogPanel.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useGetAgentConnectionEventsQuery } from '@/generated/wspace-operations';\n\ninterface Props {\n  agentId: string;\n  agentName?: string;\n}\n\ninterface EventRow {\n  id: string;\n  timestamp: string;\n  sequence: number;\n  step: string;\n  level: string;\n  message: string;\n  detailsJson?: string | null;\n}\n\nconst LEVEL_COLOR: Record<string, string> = {\n  info: 'text-status-info-text',\n  warn: 'text-status-warning-text',\n  error: 'text-status-danger-text',\n  debug: 'text-fg-muted',\n};\n\nconst LEVEL_BG: Record<string, string> = {\n  info: 'bg-status-info-bg',\n  warn: 'bg-status-warning-bg',\n  error: 'bg-status-danger-bg',\n  debug: 'bg-bg-muted',\n};\n\nfunction formatTimestamp(iso: string): string {\n  try {\n    return new Date(iso).toISOString().replace('T', ' ').replace('Z', '');\n  } catch {\n    return iso;\n  }\n}\n\nfunction eventsAsText(rows: EventRow[]): string {\n  return rows\n    .map((e) => {\n      const detail = e.detailsJson ? `\\n    details: ${e.detailsJson}` : '';\n      return `[${e.timestamp}] #${e.sequence} ${e.level.toUpperCase().padEnd(5)} ${e.step.padEnd(28)} ${e.message}${detail}`;\n    })\n    .join('\\n');\n}\n\nfunction eventsAsJson(rows: EventRow[], agentId: string, agentName?: string): string {\n  return JSON.stringify(\n    {\n      exportedAt: new Date().toISOString(),\n      agentId,\n      agentName,\n      count: rows.length,\n      events: rows.map((e) => ({\n        id: e.id,\n        timestamp: e.timestamp,\n        sequence: e.sequence,\n        step: e.step,\n        level: e.level,\n        message: e.message,\n        details: e.detailsJson ? JSON.parse(e.detailsJson) : null,\n      })),\n    },\n    null,\n    2,\n  );\n}\n\nfunction downloadBlob(filename: string, mime: string, body: string): void {\n  const blob = new Blob([body], { type: mime });\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\nexport function ConnectionLogPanel({ agentId, agentName }: Props) {\n  // Poll every 3s while the panel is mounted so the operator sees new\n  // events appear as the svc records them — no manual refresh needed\n  // while debugging \"stuck\" agents.\n  const { data, loading, error, refetch } = useGetAgentConnectionEventsQuery({\n    variables: { agentId, limit: 200 },\n    pollInterval: 3000,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [copied, setCopied] = useState<'none' | 'text' | 'json'>('none');\n\n  const events: EventRow[] = useMemo(() => {\n    const raw = data?.vibecontrolsAgentConnectionEvents ?? [];\n    return raw.map((e: { id: string; timestamp: string; sequence: number; step: string; level: string; message: string; detailsJson?: string | null }) => ({\n      id: e.id,\n      timestamp: e.timestamp,\n      sequence: e.sequence,\n      step: e.step,\n      level: e.level,\n      message: e.message,\n      detailsJson: e.detailsJson ?? null,\n    }));\n  }, [data]);\n\n  const handleCopy = useCallback(\n    async (mode: 'text' | 'json') => {\n      const body = mode === 'text' ? eventsAsText(events) : eventsAsJson(events, agentId, agentName);\n      try {\n        await navigator.clipboard.writeText(body);\n        setCopied(mode);\n        setTimeout(() => setCopied('none'), 1500);\n      } catch {\n        /* clipboard denied — fall back to download */\n        downloadBlob(`agent-${agentId}-connection-log.${mode === 'text' ? 'txt' : 'json'}`, mode === 'text' ? 'text/plain' : 'application/json', body);\n      }\n    },\n    [events, agentId, agentName],\n  );\n\n  const handleDownload = useCallback(\n    (mode: 'text' | 'json') => {\n      const body = mode === 'text' ? eventsAsText(events) : eventsAsJson(events, agentId, agentName);\n      const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n      downloadBlob(\n        `agent-${agentName ?? agentId}-connection-log-${stamp}.${mode === 'text' ? 'txt' : 'json'}`,\n        mode === 'text' ? 'text/plain' : 'application/json',\n        body,\n      );\n    },\n    [events, agentId, agentName],\n  );\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex items-center justify-between p-4 border-b border-border-default\">\n        <div>\n          <h3 className=\"text-fg-default font-semibold text-base\">Connection Log</h3>\n          <p className=\"text-fg-muted text-xs mt-0.5\">\n            {loading && events.length === 0\n              ? 'Loading…'\n              : `${events.length} event${events.length === 1 ? '' : 's'} · auto-refresh every 3s`}\n          </p>\n        </div>\n        <div className=\"flex gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default\"\n          >\n            Refresh\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleCopy('text')}\n            className=\"px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default\"\n          >\n            {copied === 'text' ? 'Copied!' : 'Copy text'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleCopy('json')}\n            className=\"px-3 py-1.5 text-xs rounded bg-bg-subtle hover:bg-bg-muted text-fg-default border border-border-default\"\n          >\n            {copied === 'json' ? 'Copied!' : 'Copy JSON'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleDownload('text')}\n            className=\"px-3 py-1.5 text-xs rounded bg-action-primary hover:bg-action-primary-hover text-action-primary-text border border-action-primary\"\n          >\n            Export .txt\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleDownload('json')}\n            className=\"px-3 py-1.5 text-xs rounded bg-action-primary hover:bg-action-primary-hover text-action-primary-text border border-action-primary\"\n          >\n            Export .json\n          </button>\n        </div>\n      </div>\n\n      {error && (\n        <div className=\"m-4 p-3 rounded bg-status-danger-bg text-status-danger-text text-sm\">\n          Failed to load events: {error.message}\n        </div>\n      )}\n\n      <div className=\"flex-1 overflow-auto p-4\">\n        {events.length === 0 && !loading && (\n          <div className=\"text-fg-muted text-sm text-center py-12\">\n            No connection events recorded for this agent yet.\n            <br />\n            Events appear here every time the platform probes, registers, or syncs the agent.\n          </div>\n        )}\n        <ol className=\"space-y-2\">\n          {events.map((e) => {\n            const levelColor = LEVEL_COLOR[e.level] ?? LEVEL_COLOR.info;\n            const levelBg = LEVEL_BG[e.level] ?? LEVEL_BG.info;\n            const details = (() => {\n              if (!e.detailsJson) return null;\n              try {\n                return JSON.stringify(JSON.parse(e.detailsJson), null, 2);\n              } catch {\n                return e.detailsJson;\n              }\n            })();\n            return (\n              <li\n                key={e.id}\n                className=\"rounded border border-border-default bg-bg-subtle\"\n              >\n                <div className=\"flex items-start gap-3 p-3\">\n                  <div className={`px-2 py-0.5 rounded text-[10px] uppercase font-mono ${levelBg} ${levelColor} shrink-0`}>\n                    {e.level}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center gap-2 text-xs text-fg-muted font-mono\">\n                      <span>#{e.sequence}</span>\n                      <span>·</span>\n                      <span>{formatTimestamp(e.timestamp)}</span>\n                      <span>·</span>\n                      <span className=\"text-fg-default font-medium\">{e.step}</span>\n                    </div>\n                    <div className=\"text-sm text-fg-default mt-1 break-words\">{e.message}</div>\n                    {details && (\n                      <details className=\"mt-2\">\n                        <summary className=\"text-xs text-fg-muted cursor-pointer hover:text-fg-default\">\n                          Details\n                        </summary>\n                        <pre className=\"mt-2 p-2 rounded bg-bg-default text-xs text-fg-default overflow-x-auto whitespace-pre-wrap break-words\">\n                          {details}\n                        </pre>\n                      </details>\n                    )}\n                  </div>\n                </div>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/vibedeck/VibeDeckGrid.js

@@ -4,14 +4,14 @@ import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProv
 import { Plus as a } from "lucide-react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/vibedeck/VibeDeckGrid.tsx
-var s = ({ gridColumns: s, gridRows: c, buttons: l, onExecuteButton: u, onEditButton: d, onDeleteButton: f, onDropButton: p, onAddButton: m, executingButtonId: h, canCreate: g, canUpdate: _, canDelete: v, canExecute: y }) => {
-	let { t: b } = i(), x = (e, t) => {
-		let n = b(e);
+var s = ({ gridColumns: s, gridRows: c, buttons: l, onExecuteButton: u, onEditButton: d, onDeleteButton: f, onDropButton: p, onAddButton: m, executingButtonId: h, canCreate: g, canUpdate: _, canDelete: v, canExecute: y, previewMode: b = !1 }) => {
+	let { t: x } = i(), S = (e, t) => {
+		let n = x(e);
 		return n === e ? t : n;
-	}, [S, C] = r({
+	}, [C, w] = r({
 		draggingId: null,
 		targetKey: null
-	}), { occupiedCells: w, buttonAtCell: T } = n(() => {
+	}), { occupiedCells: T, buttonAtCell: E } = n(() => {
 		let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Map();
 		for (let n of l) {
 			for (let t = n.row; t < n.row + n.rowSpan; t++) for (let r = n.column; r < n.column + n.colSpan; r++) e.add(`${t},${r}`);
@@ -21,61 +21,61 @@ var s = ({ gridColumns: s, gridRows: c, buttons: l, onExecuteButton: u, onEditBu
 			occupiedCells: e,
 			buttonAtCell: t
 		};
-	}, [l]), E = t((e, t) => {
-		e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move", C({
+	}, [l]), D = t((e, t) => {
+		e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move", w({
 			draggingId: t,
 			targetKey: null
 		});
-	}, []), D = t((e, t) => {
-		if (!S.draggingId) return !1;
-		let n = l.find((e) => e.id === S.draggingId);
+	}, []), O = t((e, t) => {
+		if (!C.draggingId) return !1;
+		let n = l.find((e) => e.id === C.draggingId);
 		if (!n || e + n.rowSpan > c || t + n.colSpan > s) return !1;
-		for (let r = e; r < e + n.rowSpan; r++) for (let e = t; e < t + n.colSpan; e++) if (w.has(`${r},${e}`) && !(r >= n.row && r < n.row + n.rowSpan && e >= n.column && e < n.column + n.colSpan)) return !1;
+		for (let r = e; r < e + n.rowSpan; r++) for (let e = t; e < t + n.colSpan; e++) if (T.has(`${r},${e}`) && !(r >= n.row && r < n.row + n.rowSpan && e >= n.column && e < n.column + n.colSpan)) return !1;
 		return !0;
 	}, [
-		S.draggingId,
+		C.draggingId,
 		l,
 		c,
 		s,
-		w
-	]), O = t((e, t, n, r) => {
-		e.preventDefault(), e.dataTransfer.dropEffect = "move", D(n, r) ? C((e) => ({
+		T
+	]), k = t((e, t, n, r) => {
+		e.preventDefault(), e.dataTransfer.dropEffect = "move", O(n, r) ? w((e) => ({
 			...e,
 			targetKey: t
-		})) : C((e) => ({
+		})) : w((e) => ({
 			...e,
 			targetKey: null
 		}));
-	}, [D]), k = t(() => {
-		C((e) => ({
+	}, [O]), A = t(() => {
+		w((e) => ({
 			...e,
 			targetKey: null
 		}));
-	}, []), A = t((e, t, n) => {
+	}, []), j = t((e, t, n) => {
 		e.preventDefault();
 		let r = e.dataTransfer.getData("text/plain");
-		C({
+		w({
 			draggingId: null,
 			targetKey: null
-		}), r && D(t, n) && p(r, t, n);
-	}, [p, D]), j = t(() => {
-		C({
+		}), r && O(t, n) && p(r, t, n);
+	}, [p, O]), M = t(() => {
+		w({
 			draggingId: null,
 			targetKey: null
 		});
-	}, []), M = [];
+	}, []), N = [];
 	for (let t = 0; t < c; t++) for (let n = 0; n < s; n++) {
-		let r = `${t},${n}`, i = T.get(r);
+		let r = `${t},${n}`, i = E.get(r);
 		if (i) {
-			let a = S.draggingId === i.id;
-			M.push(/* @__PURE__ */ o("div", {
+			let a = C.draggingId === i.id;
+			N.push(/* @__PURE__ */ o("div", {
 				style: {
 					gridRow: `${t + 1} / span ${i.rowSpan}`,
 					gridColumn: `${n + 1} / span ${i.colSpan}`
 				},
 				draggable: _,
-				onDragStart: (e) => E(e, i.id),
-				onDragEnd: j,
+				onDragStart: (e) => D(e, i.id),
+				onDragEnd: M,
 				className: `${a ? "opacity-40" : ""} ${_ ? "cursor-grab active:cursor-grabbing" : ""}`,
 				children: /* @__PURE__ */ o(e, {
 					button: i,
@@ -85,24 +85,25 @@ var s = ({ gridColumns: s, gridRows: c, buttons: l, onExecuteButton: u, onEditBu
 					canUpdate: _,
 					canDelete: v,
 					canExecute: y,
-					executing: h === i.id
+					executing: h === i.id,
+					previewMode: b
 				})
 			}, r));
-		} else if (!w.has(r)) {
-			let e = S.draggingId && S.targetKey === r;
-			M.push(/* @__PURE__ */ o("div", {
+		} else if (!T.has(r)) {
+			let e = C.draggingId && C.targetKey === r;
+			N.push(/* @__PURE__ */ o("div", {
 				style: {
 					gridRow: t + 1,
 					gridColumn: n + 1
 				},
-				onDragOver: (e) => O(e, r, t, n),
-				onDragLeave: k,
-				onDrop: (e) => A(e, t, n),
-				children: S.draggingId ? /* @__PURE__ */ o("div", {
+				onDragOver: (e) => k(e, r, t, n),
+				onDragLeave: A,
+				onDrop: (e) => j(e, t, n),
+				children: C.draggingId ? /* @__PURE__ */ o("div", {
 					className: `w-full h-full min-h-[80px] rounded-lg border-2 border-dashed flex items-center justify-center transition-all ${e ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default/30 text-text-tertiary/30"}`,
 					children: e && /* @__PURE__ */ o("span", {
 						className: "text-xs font-medium",
-						children: x("vibeDeck.dropHere", "Drop here")
+						children: S("vibeDeck.dropHere", "Drop here")
 					})
 				}) : g ? /* @__PURE__ */ o("button", {
 					type: "button",
@@ -119,7 +120,7 @@ var s = ({ gridColumns: s, gridRows: c, buttons: l, onExecuteButton: u, onEditBu
 			gridTemplateColumns: `repeat(${s}, 1fr)`,
 			gridTemplateRows: `repeat(${c}, auto)`
 		},
-		children: M
+		children: N
 	});
 };
 //#endregion

package/dist/components/vibedeck/VibeDeckGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeDeckGrid.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckGrid.tsx"],"sourcesContent":["import { type FC, type ReactElement, useState, useCallback, useMemo } from 'react';\nimport { Plus } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VibeDeckButtonTile } from './VibeDeckButtonTile';\n\ninterface ActionRef {\n  id: string;\n  name: string;\n  displayName: string | null;\n  actionType: string;\n  command: string | null;\n  script: string | null;\n  webhookUrl: string | null;\n  targetAgentId: string | null;\n}\n\ninterface ButtonData {\n  id: string;\n  label: string;\n  icon: string | null;\n  color: string | null;\n  command: string | null;\n  actionType: string;\n  category: string | null;\n  confirmationRequired: boolean;\n  keyboardShortcut: string | null;\n  targetAgentId: string | null;\n  scriptInterpreter: string | null;\n  webhookUrl: string | null;\n  webhookMethod: string | null;\n  actionId?: string | null;\n  action?: ActionRef | null;\n  row: number;\n  column: number;\n  rowSpan: number;\n  colSpan: number;\n}\n\ninterface VibeDeckGridProps {\n  gridColumns: number;\n  gridRows: number;\n  buttons: ButtonData[];\n  onExecuteButton: (id: string) => void;\n  onEditButton: (id: string) => void;\n  onDeleteButton: (id: string) => void;\n  onDropButton: (buttonId: string, targetRow: number, targetColumn: number) => void;\n  onAddButton: (row: number, column: number) => void;\n  executingButtonId: string | null;\n  canCreate: boolean;\n  canUpdate: boolean;\n  canDelete: boolean;\n  canExecute: boolean;\n}\n\nexport const VibeDeckGrid: FC<VibeDeckGridProps> = ({\n  gridColumns,\n  gridRows,\n  buttons,\n  onExecuteButton,\n  onEditButton,\n  onDeleteButton,\n  onDropButton,\n  onAddButton,\n  executingButtonId,\n  canCreate,\n  canUpdate,\n  canDelete,\n  canExecute,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  const [dragState, setDragState] = useState<{\n    draggingId: string | null;\n    targetKey: string | null;\n  }>({ draggingId: null, targetKey: null });\n\n  // Build a map of occupied cells (memoized to stabilize hook dependencies)\n  const { occupiedCells, buttonAtCell } = useMemo(() => {\n    const occupied = new Set<string>();\n    const cellMap = new Map<string, ButtonData>();\n    for (const btn of buttons) {\n      for (let r = btn.row; r < btn.row + btn.rowSpan; r++) {\n        for (let c = btn.column; c < btn.column + btn.colSpan; c++) {\n          occupied.add(`${r},${c}`);\n        }\n      }\n      cellMap.set(`${btn.row},${btn.column}`, btn);\n    }\n    return { occupiedCells: occupied, buttonAtCell: cellMap };\n  }, [buttons]);\n\n  const handleDragStart = useCallback((e: React.DragEvent, buttonId: string) => {\n    e.dataTransfer.setData('text/plain', buttonId);\n    e.dataTransfer.effectAllowed = 'move';\n    setDragState({ draggingId: buttonId, targetKey: null });\n  }, []);\n\n  const isDropValid = useCallback(\n    (targetRow: number, targetCol: number) => {\n      if (!dragState.draggingId) return false;\n      const btn = buttons.find((b) => b.id === dragState.draggingId);\n      if (!btn) return false;\n      // Check grid boundary\n      if (targetRow + btn.rowSpan > gridRows || targetCol + btn.colSpan > gridColumns) return false;\n      // Check collision with other buttons\n      for (let r = targetRow; r < targetRow + btn.rowSpan; r++) {\n        for (let c = targetCol; c < targetCol + btn.colSpan; c++) {\n          if (occupiedCells.has(`${r},${c}`)) {\n            // Allow overlap with the dragged button's own current footprint\n            const isOwnCell =\n              r >= btn.row &&\n              r < btn.row + btn.rowSpan &&\n              c >= btn.column &&\n              c < btn.column + btn.colSpan;\n            if (!isOwnCell) return false;\n          }\n        }\n      }\n      return true;\n    },\n    [dragState.draggingId, buttons, gridRows, gridColumns, occupiedCells]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent, key: string, row: number, col: number) => {\n      e.preventDefault();\n      e.dataTransfer.dropEffect = 'move';\n      if (isDropValid(row, col)) {\n        setDragState((prev) => ({ ...prev, targetKey: key }));\n      } else {\n        setDragState((prev) => ({ ...prev, targetKey: null }));\n      }\n    },\n    [isDropValid]\n  );\n\n  const handleDragLeave = useCallback(() => {\n    setDragState((prev) => ({ ...prev, targetKey: null }));\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent, row: number, col: number) => {\n      e.preventDefault();\n      const buttonId = e.dataTransfer.getData('text/plain');\n      setDragState({ draggingId: null, targetKey: null });\n      if (buttonId && isDropValid(row, col)) {\n        onDropButton(buttonId, row, col);\n      }\n    },\n    [onDropButton, isDropValid]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setDragState({ draggingId: null, targetKey: null });\n  }, []);\n\n  // Build grid cells\n  const cells: ReactElement[] = [];\n  for (let row = 0; row < gridRows; row++) {\n    for (let col = 0; col < gridColumns; col++) {\n      const key = `${row},${col}`;\n      const button = buttonAtCell.get(key);\n\n      if (button) {\n        const isDragging = dragState.draggingId === button.id;\n        cells.push(\n          <div\n            key={key}\n            style={{\n              gridRow: `${row + 1} / span ${button.rowSpan}`,\n              gridColumn: `${col + 1} / span ${button.colSpan}`,\n            }}\n            draggable={canUpdate}\n            onDragStart={(e) => handleDragStart(e, button.id)}\n            onDragEnd={handleDragEnd}\n            className={`${isDragging ? 'opacity-40' : ''} ${canUpdate ? 'cursor-grab active:cursor-grabbing' : ''}`}\n          >\n            <VibeDeckButtonTile\n              button={button}\n              onExecute={onExecuteButton}\n              onEdit={onEditButton}\n              onDelete={onDeleteButton}\n              canUpdate={canUpdate}\n              canDelete={canDelete}\n              canExecute={canExecute}\n              executing={executingButtonId === button.id}\n            />\n          </div>\n        );\n      } else if (!occupiedCells.has(key)) {\n        const isDropTarget = dragState.draggingId && dragState.targetKey === key;\n        cells.push(\n          <div\n            key={key}\n            style={{ gridRow: row + 1, gridColumn: col + 1 }}\n            onDragOver={(e) => handleDragOver(e, key, row, col)}\n            onDragLeave={handleDragLeave}\n            onDrop={(e) => handleDrop(e, row, col)}\n          >\n            {dragState.draggingId ? (\n              <div\n                className={`w-full h-full min-h-[80px] rounded-lg border-2 border-dashed flex items-center justify-center transition-all ${\n                  isDropTarget\n                    ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                    : 'border-border-default/30 text-text-tertiary/30'\n                }`}\n              >\n                {isDropTarget && (\n                  <span className=\"text-xs font-medium\">\n                    {tr('vibeDeck.dropHere', 'Drop here')}\n                  </span>\n                )}\n              </div>\n            ) : canCreate ? (\n              <button\n                type=\"button\"\n                onClick={() => onAddButton(row, col)}\n                className=\"w-full h-full min-h-[80px] rounded-lg border-2 border-dashed border-border-strong text-text-tertiary hover:border-border-focus hover:text-text-secondary flex items-center justify-center transition-all hover:bg-bg-secondary/50\"\n              >\n                <Plus size={18} />\n              </button>\n            ) : (\n              <div className=\"w-full h-full min-h-[80px] rounded-lg border-2 border-dashed border-border-default\" />\n            )}\n          </div>\n        );\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"grid gap-3\"\n      style={{\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridTemplateRows: `repeat(${gridRows}, auto)`,\n      }}\n    >\n      {cells}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VibeDeckGrid.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckGrid.tsx"],"sourcesContent":["import { type FC, type ReactElement, useState, useCallback, useMemo } from 'react';\nimport { Plus } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VibeDeckButtonTile } from './VibeDeckButtonTile';\n\ninterface ActionRef {\n  id: string;\n  name: string;\n  displayName: string | null;\n  actionType: string;\n  command: string | null;\n  script: string | null;\n  webhookUrl: string | null;\n  targetAgentId: string | null;\n}\n\ninterface ButtonData {\n  id: string;\n  label: string;\n  icon: string | null;\n  color: string | null;\n  command: string | null;\n  actionType: string;\n  category: string | null;\n  confirmationRequired: boolean;\n  keyboardShortcut: string | null;\n  targetAgentId: string | null;\n  scriptInterpreter: string | null;\n  webhookUrl: string | null;\n  webhookMethod: string | null;\n  actionId?: string | null;\n  action?: ActionRef | null;\n  row: number;\n  column: number;\n  rowSpan: number;\n  colSpan: number;\n}\n\ninterface VibeDeckGridProps {\n  gridColumns: number;\n  gridRows: number;\n  buttons: ButtonData[];\n  onExecuteButton: (id: string) => void;\n  onEditButton: (id: string) => void;\n  onDeleteButton: (id: string) => void;\n  onDropButton: (buttonId: string, targetRow: number, targetColumn: number) => void;\n  onAddButton: (row: number, column: number) => void;\n  executingButtonId: string | null;\n  canCreate: boolean;\n  canUpdate: boolean;\n  canDelete: boolean;\n  canExecute: boolean;\n  /**\n   * When true, the grid is in Preview mode — tile clicks execute (and route\n   * through the parent's confirmation check for buttons with\n   * `confirmationRequired: true`). Defaults to false so the tile behaves as a\n   * static editor surface.\n   */\n  previewMode?: boolean;\n}\n\nexport const VibeDeckGrid: FC<VibeDeckGridProps> = ({\n  gridColumns,\n  gridRows,\n  buttons,\n  onExecuteButton,\n  onEditButton,\n  onDeleteButton,\n  onDropButton,\n  onAddButton,\n  executingButtonId,\n  canCreate,\n  canUpdate,\n  canDelete,\n  canExecute,\n  previewMode = false,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  const [dragState, setDragState] = useState<{\n    draggingId: string | null;\n    targetKey: string | null;\n  }>({ draggingId: null, targetKey: null });\n\n  // Build a map of occupied cells (memoized to stabilize hook dependencies)\n  const { occupiedCells, buttonAtCell } = useMemo(() => {\n    const occupied = new Set<string>();\n    const cellMap = new Map<string, ButtonData>();\n    for (const btn of buttons) {\n      for (let r = btn.row; r < btn.row + btn.rowSpan; r++) {\n        for (let c = btn.column; c < btn.column + btn.colSpan; c++) {\n          occupied.add(`${r},${c}`);\n        }\n      }\n      cellMap.set(`${btn.row},${btn.column}`, btn);\n    }\n    return { occupiedCells: occupied, buttonAtCell: cellMap };\n  }, [buttons]);\n\n  const handleDragStart = useCallback((e: React.DragEvent, buttonId: string) => {\n    e.dataTransfer.setData('text/plain', buttonId);\n    e.dataTransfer.effectAllowed = 'move';\n    setDragState({ draggingId: buttonId, targetKey: null });\n  }, []);\n\n  const isDropValid = useCallback(\n    (targetRow: number, targetCol: number) => {\n      if (!dragState.draggingId) return false;\n      const btn = buttons.find((b) => b.id === dragState.draggingId);\n      if (!btn) return false;\n      // Check grid boundary\n      if (targetRow + btn.rowSpan > gridRows || targetCol + btn.colSpan > gridColumns) return false;\n      // Check collision with other buttons\n      for (let r = targetRow; r < targetRow + btn.rowSpan; r++) {\n        for (let c = targetCol; c < targetCol + btn.colSpan; c++) {\n          if (occupiedCells.has(`${r},${c}`)) {\n            // Allow overlap with the dragged button's own current footprint\n            const isOwnCell =\n              r >= btn.row &&\n              r < btn.row + btn.rowSpan &&\n              c >= btn.column &&\n              c < btn.column + btn.colSpan;\n            if (!isOwnCell) return false;\n          }\n        }\n      }\n      return true;\n    },\n    [dragState.draggingId, buttons, gridRows, gridColumns, occupiedCells]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent, key: string, row: number, col: number) => {\n      e.preventDefault();\n      e.dataTransfer.dropEffect = 'move';\n      if (isDropValid(row, col)) {\n        setDragState((prev) => ({ ...prev, targetKey: key }));\n      } else {\n        setDragState((prev) => ({ ...prev, targetKey: null }));\n      }\n    },\n    [isDropValid]\n  );\n\n  const handleDragLeave = useCallback(() => {\n    setDragState((prev) => ({ ...prev, targetKey: null }));\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent, row: number, col: number) => {\n      e.preventDefault();\n      const buttonId = e.dataTransfer.getData('text/plain');\n      setDragState({ draggingId: null, targetKey: null });\n      if (buttonId && isDropValid(row, col)) {\n        onDropButton(buttonId, row, col);\n      }\n    },\n    [onDropButton, isDropValid]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setDragState({ draggingId: null, targetKey: null });\n  }, []);\n\n  // Build grid cells\n  const cells: ReactElement[] = [];\n  for (let row = 0; row < gridRows; row++) {\n    for (let col = 0; col < gridColumns; col++) {\n      const key = `${row},${col}`;\n      const button = buttonAtCell.get(key);\n\n      if (button) {\n        const isDragging = dragState.draggingId === button.id;\n        cells.push(\n          <div\n            key={key}\n            style={{\n              gridRow: `${row + 1} / span ${button.rowSpan}`,\n              gridColumn: `${col + 1} / span ${button.colSpan}`,\n            }}\n            draggable={canUpdate}\n            onDragStart={(e) => handleDragStart(e, button.id)}\n            onDragEnd={handleDragEnd}\n            className={`${isDragging ? 'opacity-40' : ''} ${canUpdate ? 'cursor-grab active:cursor-grabbing' : ''}`}\n          >\n            <VibeDeckButtonTile\n              button={button}\n              onExecute={onExecuteButton}\n              onEdit={onEditButton}\n              onDelete={onDeleteButton}\n              canUpdate={canUpdate}\n              canDelete={canDelete}\n              canExecute={canExecute}\n              executing={executingButtonId === button.id}\n              previewMode={previewMode}\n            />\n          </div>\n        );\n      } else if (!occupiedCells.has(key)) {\n        const isDropTarget = dragState.draggingId && dragState.targetKey === key;\n        cells.push(\n          <div\n            key={key}\n            style={{ gridRow: row + 1, gridColumn: col + 1 }}\n            onDragOver={(e) => handleDragOver(e, key, row, col)}\n            onDragLeave={handleDragLeave}\n            onDrop={(e) => handleDrop(e, row, col)}\n          >\n            {dragState.draggingId ? (\n              <div\n                className={`w-full h-full min-h-[80px] rounded-lg border-2 border-dashed flex items-center justify-center transition-all ${\n                  isDropTarget\n                    ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                    : 'border-border-default/30 text-text-tertiary/30'\n                }`}\n              >\n                {isDropTarget && (\n                  <span className=\"text-xs font-medium\">\n                    {tr('vibeDeck.dropHere', 'Drop here')}\n                  </span>\n                )}\n              </div>\n            ) : canCreate ? (\n              <button\n                type=\"button\"\n                onClick={() => onAddButton(row, col)}\n                className=\"w-full h-full min-h-[80px] rounded-lg border-2 border-dashed border-border-strong text-text-tertiary hover:border-border-focus hover:text-text-secondary flex items-center justify-center transition-all hover:bg-bg-secondary/50\"\n              >\n                <Plus size={18} />\n              </button>\n            ) : (\n              <div className=\"w-full h-full min-h-[80px] rounded-lg border-2 border-dashed border-border-default\" />\n            )}\n          </div>\n        );\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"grid gap-3\"\n      style={{\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridTemplateRows: `repeat(${gridRows}, auto)`,\n      }}\n    >\n      {cells}\n    </div>\n  );\n};\n"],"mappings":"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"}