@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/vibedeck/VibeDeckButtonForm.js

@@ -0,0 +1,400 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useCreateActionMutation as t, useListActionsQuery as n } from "../../generated/wspace-operations.js";
+import { useCallback as r, useMemo as i, useState as a } from "react";
+import { Plus as o, Unlink as s, X as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/vibedeck/VibeDeckButtonForm.tsx
+var d = [
+	{
+		value: "",
+		label: "Default"
+	},
+	{
+		value: "red",
+		label: "Red"
+	},
+	{
+		value: "green",
+		label: "Green"
+	},
+	{
+		value: "blue",
+		label: "Blue"
+	},
+	{
+		value: "yellow",
+		label: "Yellow"
+	},
+	{
+		value: "purple",
+		label: "Purple"
+	},
+	{
+		value: "orange",
+		label: "Orange"
+	},
+	{
+		value: "cyan",
+		label: "Cyan"
+	},
+	{
+		value: "pink",
+		label: "Pink"
+	}
+];
+function f(e) {
+	return e ? Array.isArray(e) ? e : Object.entries(e).map(([e, t]) => ({
+		key: e,
+		value: String(t)
+	})) : [];
+}
+function p(e) {
+	return e.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 60);
+}
+var m = ({ initialData: m, agents: h, onSubmit: g, onCancel: _, isLoading: v, title: y, gridColumns: b, gridRows: x, buttonRow: S, buttonColumn: C }) => {
+	let w = e(), T = Math.max(1, x != null && S != null ? x - S : 4), E = Math.max(1, b != null && C != null ? b - C : 4), [D, O] = a(m?.actionId || ""), [k, A] = a(""), [j, M] = a(!1), [N, P] = a(!1), { data: F } = n({
+		variables: { pagination: { limit: 100 } },
+		fetchPolicy: "cache-and-network"
+	}), [I] = t(), L = i(() => (F?.actions?.items || []).map((e) => ({
+		id: e.id,
+		name: e.name,
+		displayName: e.displayName || null,
+		actionType: e.actionType,
+		command: e.command || null,
+		script: e.script || null,
+		scriptInterpreter: e.scriptInterpreter || null,
+		webhookUrl: e.webhookUrl || null,
+		webhookMethod: e.webhookMethod || null,
+		targetAgentId: e.targetAgentId || null,
+		workingDirectory: e.workingDirectory || null,
+		category: e.category || null
+	})), [F]), R = i(() => L.find((e) => e.id === D) || null, [L, D]), z = i(() => {
+		if (!k.trim()) return L;
+		let e = k.toLowerCase();
+		return L.filter((t) => t.name.toLowerCase().includes(e) || t.displayName && t.displayName.toLowerCase().includes(e) || t.actionType.toLowerCase().includes(e));
+	}, [L, k]), [B, V] = a({
+		label: m?.label || "",
+		icon: m?.icon || "",
+		color: m?.color || "",
+		category: m?.category || "",
+		keyboardShortcut: m?.keyboardShortcut || "",
+		confirmationRequired: m?.confirmationRequired || !1,
+		rowSpan: Math.min(m?.rowSpan || 1, T),
+		colSpan: Math.min(m?.colSpan || 1, E),
+		actionId: m?.actionId || "",
+		actionType: m?.actionType || "COMMAND",
+		command: m?.command || "",
+		workingDirectory: m?.workingDirectory || "",
+		targetAgentId: m?.targetAgentId || "",
+		script: m?.script || "",
+		scriptInterpreter: m?.scriptInterpreter || "bash",
+		webhookUrl: m?.webhookUrl || "",
+		webhookMethod: m?.webhookMethod || "POST",
+		webhookHeaders: f(m?.webhookHeaders),
+		webhookBody: m?.webhookBody || "",
+		webhookAuthType: m?.webhookAuthType || "",
+		webhookAuthValue: m?.webhookAuthValue || ""
+	}), H = (e) => {
+		O(e.id), M(!1), A(""), P(!1), V((t) => ({
+			...t,
+			actionId: e.id,
+			actionType: e.actionType,
+			command: e.command || "",
+			script: e.script || "",
+			scriptInterpreter: e.scriptInterpreter || "bash",
+			webhookUrl: e.webhookUrl || "",
+			webhookMethod: e.webhookMethod || "POST",
+			workingDirectory: e.workingDirectory || "",
+			targetAgentId: e.targetAgentId || "",
+			category: e.category || t.category
+		}));
+	}, U = () => {
+		O(""), V((e) => ({
+			...e,
+			actionId: ""
+		}));
+	}, W = !!D, G = B.actionType === "COMMAND" && B.command.trim() || B.actionType === "SCRIPT" && B.script.trim() || B.actionType === "WEBHOOK" && B.webhookUrl.trim(), K = B.label.trim() && (W || G), q = r(async (e) => {
+		if (e.preventDefault(), !W && N) try {
+			let e = (await I({
+				variables: { input: {
+					name: p(B.label || "vibedeck-action") + "-" + Date.now().toString(36),
+					displayName: B.label,
+					actionType: B.actionType,
+					command: B.actionType === "COMMAND" ? B.command : void 0,
+					script: B.actionType === "SCRIPT" ? B.script : void 0,
+					scriptInterpreter: B.actionType === "SCRIPT" ? B.scriptInterpreter : void 0,
+					webhookUrl: B.actionType === "WEBHOOK" ? B.webhookUrl : void 0,
+					webhookMethod: B.actionType === "WEBHOOK" ? B.webhookMethod : void 0,
+					webhookBody: B.actionType === "WEBHOOK" ? B.webhookBody : void 0,
+					webhookAuthType: B.actionType === "WEBHOOK" ? B.webhookAuthType : void 0,
+					webhookAuthValue: B.actionType === "WEBHOOK" ? B.webhookAuthValue : void 0,
+					workingDirectory: B.workingDirectory || void 0,
+					targetAgentId: B.targetAgentId || void 0,
+					category: B.category || void 0,
+					confirmationRequired: B.confirmationRequired
+				} },
+				refetchQueries: ["ListActions"]
+			})).data?.createAction?.id;
+			if (e) {
+				g({
+					...B,
+					actionId: e
+				});
+				return;
+			}
+		} catch {}
+		g({
+			...B,
+			actionId: D
+		});
+	}, [
+		B,
+		W,
+		N,
+		D,
+		I,
+		g
+	]), J = "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg", Y = `${J} font-mono text-sm`, X = "block text-sm font-medium text-text-secondary mb-1";
+	return /* @__PURE__ */ l("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay backdrop-blur-sm",
+		children: /* @__PURE__ */ u("div", {
+			className: "bg-bg-elevated border border-border-default rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto",
+			children: [/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between px-6 py-4 border-b border-border-default sticky top-0 bg-bg-elevated z-10",
+				children: [/* @__PURE__ */ l("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: y
+				}), /* @__PURE__ */ l("button", {
+					onClick: _,
+					className: "p-1 rounded hover:bg-bg-tertiary text-text-tertiary",
+					children: /* @__PURE__ */ l(c, { size: 18 })
+				})]
+			}), /* @__PURE__ */ u("form", {
+				onSubmit: q,
+				className: "p-6 space-y-4",
+				children: [
+					/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ u("label", {
+						className: X,
+						children: [w("vibecontrols.vibedeck.buttonForm.label", "Label"), " *"]
+					}), /* @__PURE__ */ l("input", {
+						type: "text",
+						value: B.label,
+						onChange: (e) => V({
+							...B,
+							label: e.target.value
+						}),
+						className: J,
+						placeholder: "Deploy Staging",
+						required: !0
+					})] }),
+					/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ u("label", {
+						className: X,
+						children: [w("vibecontrols.vibedeck.buttonForm.action", "Action"), " *"]
+					}), R ? /* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 px-3 py-2.5 rounded-lg border border-action-primary-bg/40 bg-bg-secondary",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ l("div", {
+								className: "text-sm font-medium text-text-primary truncate",
+								children: R.displayName || R.name
+							}), /* @__PURE__ */ u("div", {
+								className: "text-xs text-text-tertiary flex items-center gap-1",
+								children: [/* @__PURE__ */ l("span", {
+									className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-action-primary-bg/10 text-action-primary-bg",
+									children: R.actionType
+								}), R.command && /* @__PURE__ */ l("span", {
+									className: "font-mono truncate",
+									children: R.command.length > 35 ? `${R.command.slice(0, 35)}...` : R.command
+								})]
+							})]
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: U,
+							className: "p-1.5 rounded hover:bg-bg-tertiary text-text-tertiary hover:text-status-error-text",
+							title: "Change action",
+							children: /* @__PURE__ */ l(s, { size: 14 })
+						})]
+					}) : /* @__PURE__ */ u("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ u("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ l("input", {
+								type: "text",
+								value: k,
+								onChange: (e) => {
+									A(e.target.value), M(!0), P(!1);
+								},
+								onFocus: () => M(!0),
+								onBlur: () => setTimeout(() => M(!1), 200),
+								className: "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+								placeholder: w("vibecontrols.vibedeck.buttonForm.searchActions", "Search existing actions...")
+							}), j && /* @__PURE__ */ l("div", {
+								className: "absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border-default shadow-xl bg-bg-elevated",
+								children: z.length === 0 ? /* @__PURE__ */ l("div", {
+									className: "px-3 py-2 text-sm text-text-tertiary",
+									children: "No actions found"
+								}) : z.map((e) => /* @__PURE__ */ u("button", {
+									type: "button",
+									onMouseDown: (e) => e.preventDefault(),
+									onClick: () => H(e),
+									className: "w-full text-left px-3 py-2 hover:bg-bg-tertiary",
+									children: [/* @__PURE__ */ l("div", {
+										className: "text-sm font-medium",
+										children: e.displayName || e.name
+									}), /* @__PURE__ */ l("div", {
+										className: "text-xs text-text-tertiary",
+										children: e.actionType
+									})]
+								}, e.id))
+							})]
+						}), !N && /* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => P(!0),
+							className: "flex items-center gap-1.5 text-sm text-action-primary-bg hover:opacity-80",
+							children: [
+								/* @__PURE__ */ l(o, { size: 14 }),
+								" ",
+								w("vibecontrols.vibedeck.buttonForm.createNewAction", "Create new action")
+							]
+						})]
+					})] }),
+					N && /* @__PURE__ */ u("div", {
+						className: "p-4 rounded-lg bg-bg-secondary/50 border border-dashed border-border-default space-y-4",
+						children: [
+							/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+								className: X,
+								children: "Action Type"
+							}), /* @__PURE__ */ u("select", {
+								value: B.actionType,
+								onChange: (e) => V({
+									...B,
+									actionType: e.target.value
+								}),
+								className: J,
+								children: [
+									/* @__PURE__ */ l("option", {
+										value: "COMMAND",
+										children: "Command"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "SCRIPT",
+										children: "Script"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "WEBHOOK",
+										children: "Webhook"
+									})
+								]
+							})] }),
+							B.actionType === "COMMAND" && /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+								className: X,
+								children: "Command *"
+							}), /* @__PURE__ */ l("textarea", {
+								value: B.command,
+								onChange: (e) => V({
+									...B,
+									command: e.target.value
+								}),
+								className: Y,
+								rows: 2,
+								required: !0
+							})] }),
+							B.actionType === "SCRIPT" && /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+								className: X,
+								children: "Script *"
+							}), /* @__PURE__ */ l("textarea", {
+								value: B.script,
+								onChange: (e) => V({
+									...B,
+									script: e.target.value
+								}),
+								className: Y,
+								rows: 4,
+								required: !0
+							})] }),
+							B.actionType === "WEBHOOK" && /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+								className: X,
+								children: "URL *"
+							}), /* @__PURE__ */ l("input", {
+								type: "url",
+								value: B.webhookUrl,
+								onChange: (e) => V({
+									...B,
+									webhookUrl: e.target.value
+								}),
+								className: J,
+								required: !0
+							})] })
+						]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+							className: X,
+							children: "Color"
+						}), /* @__PURE__ */ l("select", {
+							value: B.color,
+							onChange: (e) => V({
+								...B,
+								color: e.target.value
+							}),
+							className: J,
+							children: d.map((e) => /* @__PURE__ */ l("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						})] }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
+							className: X,
+							children: "Category"
+						}), /* @__PURE__ */ l("input", {
+							type: "text",
+							value: B.category,
+							onChange: (e) => V({
+								...B,
+								category: e.target.value
+							}),
+							className: J
+						})] })]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: /* @__PURE__ */ u("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ l("input", {
+								type: "checkbox",
+								checked: B.confirmationRequired,
+								onChange: (e) => V({
+									...B,
+									confirmationRequired: e.target.checked
+								}),
+								id: "confReq"
+							}), /* @__PURE__ */ l("label", {
+								htmlFor: "confReq",
+								className: "text-sm",
+								children: w("vibecontrols.vibedeck.buttonForm.requireConfirmation", "Require confirmation")
+							})]
+						})
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "flex justify-end gap-3 pt-2",
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: _,
+							className: "px-4 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-tertiary",
+							children: w("vibecontrols.vibedeck.buttonForm.cancel", "Cancel")
+						}), /* @__PURE__ */ l("button", {
+							type: "submit",
+							disabled: v || !K,
+							className: "px-4 py-2 rounded-lg text-sm bg-action-primary-bg text-action-primary-text hover:opacity-90 disabled:opacity-50",
+							children: v ? w("vibecontrols.vibedeck.buttonForm.saving", "Saving...") : w("vibecontrols.vibedeck.buttonForm.save", "Save")
+						})]
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { m as VibeDeckButtonForm };
+
+//# sourceMappingURL=VibeDeckButtonForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckButtonForm.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckButtonForm.tsx"],"sourcesContent":["import { type FC, useState, useMemo, useCallback } from 'react';\nimport { X, Plus, Search, ChevronDown, Unlink } from 'lucide-react';\nimport { useListActionsQuery, useCreateActionMutation } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface Agent {\n  id: string;\n  name: string;\n  isActive: boolean;\n}\n\ninterface ActionData {\n  id: string;\n  name: string;\n  displayName: string | null;\n  actionType: string;\n  command: string | null;\n  script: string | null;\n  scriptInterpreter: string | null;\n  webhookUrl: string | null;\n  webhookMethod: string | null;\n  targetAgentId: string | null;\n  workingDirectory: string | null;\n  category: string | null;\n}\n\ninterface ButtonFormData {\n  label: string;\n  icon: string;\n  color: string;\n  category: string;\n  keyboardShortcut: string;\n  confirmationRequired: boolean;\n  rowSpan: number;\n  colSpan: number;\n  actionId: string;\n  // Temporary fields for creating a new action inline\n  actionType: 'COMMAND' | 'SCRIPT' | 'WEBHOOK';\n  command: string;\n  workingDirectory: string;\n  targetAgentId: string;\n  script: string;\n  scriptInterpreter: string;\n  webhookUrl: string;\n  webhookMethod: string;\n  webhookHeaders: Array<{ key: string; value: string }>;\n  webhookBody: string;\n  webhookAuthType: string;\n  webhookAuthValue: string;\n}\n\ntype ButtonFormInitialData = Partial<Omit<ButtonFormData, 'webhookHeaders'>> & {\n  webhookHeaders?: Array<{ key: string; value: string }> | Record<string, string> | null;\n};\n\ninterface VibeDeckButtonFormProps {\n  initialData?: ButtonFormInitialData;\n  agents: Agent[];\n  onSubmit: (data: ButtonFormData) => void;\n  onCancel: () => void;\n  isLoading: boolean;\n  title: string;\n  gridColumns?: number;\n  gridRows?: number;\n  buttonRow?: number;\n  buttonColumn?: number;\n}\n\nconst colorOptions = [\n  { value: '', label: 'Default' },\n  { value: 'red', label: 'Red' },\n  { value: 'green', label: 'Green' },\n  { value: 'blue', label: 'Blue' },\n  { value: 'yellow', label: 'Yellow' },\n  { value: 'purple', label: 'Purple' },\n  { value: 'orange', label: 'Orange' },\n  { value: 'cyan', label: 'Cyan' },\n  { value: 'pink', label: 'Pink' },\n];\n\nconst httpMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\n\nconst interpreters = [\n  { value: 'bash', label: 'Bash' },\n  { value: 'sh', label: 'Shell (sh)' },\n  { value: 'zsh', label: 'Zsh' },\n  { value: 'python', label: 'Python' },\n  { value: 'python3', label: 'Python 3' },\n  { value: 'node', label: 'Node.js' },\n  { value: 'bun', label: 'Bun' },\n  { value: 'ruby', label: 'Ruby' },\n  { value: 'perl', label: 'Perl' },\n];\n\nfunction parseHeadersToArray(\n  headers: Array<{ key: string; value: string }> | Record<string, string> | null | undefined\n): Array<{ key: string; value: string }> {\n  if (!headers) return [];\n  if (Array.isArray(headers)) return headers;\n  return Object.entries(headers).map(([key, value]) => ({ key, value: String(value) }));\n}\n\nfunction slugify(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-|-$/g, '')\n    .slice(0, 60);\n}\n\nexport const VibeDeckButtonForm: FC<VibeDeckButtonFormProps> = ({\n  initialData,\n  agents,\n  onSubmit,\n  onCancel,\n  isLoading,\n  title,\n  gridColumns,\n  gridRows,\n  buttonRow,\n  buttonColumn,\n}) => {\n  const tr = useTr();\n  const DEFAULT_MAX_SPAN = 4;\n  const maxRowSpan = Math.max(\n    1,\n    gridRows != null && buttonRow != null ? gridRows - buttonRow : DEFAULT_MAX_SPAN\n  );\n  const maxColSpan = Math.max(\n    1,\n    gridColumns != null && buttonColumn != null ? gridColumns - buttonColumn : DEFAULT_MAX_SPAN\n  );\n\n  // Action selection state\n  const [selectedActionId, setSelectedActionId] = useState<string>(initialData?.actionId || '');\n  const [actionSearchQuery, setActionSearchQuery] = useState('');\n  const [isActionDropdownOpen, setIsActionDropdownOpen] = useState(false);\n  const [isCreatingNewAction, setIsCreatingNewAction] = useState(false);\n\n  // Fetch available actions\n  const { data: actionsData } = useListActionsQuery({\n    variables: { pagination: { limit: 100 } },\n    fetchPolicy: 'cache-and-network',\n  });\n  const [createActionMutation] = useCreateActionMutation();\n\n  const availableActions: ActionData[] = useMemo(\n    () =>\n      (actionsData?.actions?.items || []).map(\n        (a: {\n          id: string;\n          name: string;\n          displayName?: string | null;\n          actionType: string;\n          command?: string | null;\n          script?: string | null;\n          scriptInterpreter?: string | null;\n          webhookUrl?: string | null;\n          webhookMethod?: string | null;\n          targetAgentId?: string | null;\n          workingDirectory?: string | null;\n          category?: string | null;\n        }) => ({\n          id: a.id,\n          name: a.name,\n          displayName: a.displayName || null,\n          actionType: a.actionType,\n          command: a.command || null,\n          script: a.script || null,\n          scriptInterpreter: a.scriptInterpreter || null,\n          webhookUrl: a.webhookUrl || null,\n          webhookMethod: a.webhookMethod || null,\n          targetAgentId: a.targetAgentId || null,\n          workingDirectory: a.workingDirectory || null,\n          category: a.category || null,\n        })\n      ),\n    [actionsData]\n  );\n\n  const selectedAction = useMemo(\n    () => availableActions.find((a) => a.id === selectedActionId) || null,\n    [availableActions, selectedActionId]\n  );\n\n  const filteredActions = useMemo(() => {\n    if (!actionSearchQuery.trim()) return availableActions;\n    const q = actionSearchQuery.toLowerCase();\n    return availableActions.filter(\n      (a) =>\n        a.name.toLowerCase().includes(q) ||\n        (a.displayName && a.displayName.toLowerCase().includes(q)) ||\n        a.actionType.toLowerCase().includes(q)\n    );\n  }, [availableActions, actionSearchQuery]);\n\n  const [form, setForm] = useState<ButtonFormData>({\n    label: initialData?.label || '',\n    icon: initialData?.icon || '',\n    color: initialData?.color || '',\n    category: initialData?.category || '',\n    keyboardShortcut: initialData?.keyboardShortcut || '',\n    confirmationRequired: initialData?.confirmationRequired || false,\n    rowSpan: Math.min(initialData?.rowSpan || 1, maxRowSpan),\n    colSpan: Math.min(initialData?.colSpan || 1, maxColSpan),\n    actionId: initialData?.actionId || '',\n    // Legacy fields for creating new action\n    actionType: initialData?.actionType || 'COMMAND',\n    command: initialData?.command || '',\n    workingDirectory: initialData?.workingDirectory || '',\n    targetAgentId: initialData?.targetAgentId || '',\n    script: initialData?.script || '',\n    scriptInterpreter: initialData?.scriptInterpreter || 'bash',\n    webhookUrl: initialData?.webhookUrl || '',\n    webhookMethod: initialData?.webhookMethod || 'POST',\n    webhookHeaders: parseHeadersToArray(initialData?.webhookHeaders),\n    webhookBody: initialData?.webhookBody || '',\n    webhookAuthType: initialData?.webhookAuthType || '',\n    webhookAuthValue: initialData?.webhookAuthValue || '',\n  });\n\n  const handleSelectAction = (action: ActionData) => {\n    setSelectedActionId(action.id);\n    setIsActionDropdownOpen(false);\n    setActionSearchQuery('');\n    setIsCreatingNewAction(false);\n    setForm((prev) => ({\n      ...prev,\n      actionId: action.id,\n      actionType: action.actionType as 'COMMAND' | 'SCRIPT' | 'WEBHOOK',\n      command: action.command || '',\n      script: action.script || '',\n      scriptInterpreter: action.scriptInterpreter || 'bash',\n      webhookUrl: action.webhookUrl || '',\n      webhookMethod: action.webhookMethod || 'POST',\n      workingDirectory: action.workingDirectory || '',\n      targetAgentId: action.targetAgentId || '',\n      category: action.category || prev.category,\n    }));\n  };\n\n  const handleUnlinkAction = () => {\n    setSelectedActionId('');\n    setForm((prev) => ({ ...prev, actionId: '' }));\n  };\n\n  const addHeader = () => {\n    setForm({ ...form, webhookHeaders: [...form.webhookHeaders, { key: '', value: '' }] });\n  };\n\n  const removeHeader = (index: number) => {\n    setForm({ ...form, webhookHeaders: form.webhookHeaders.filter((_, i) => i !== index) });\n  };\n\n  const updateHeader = (index: number, field: 'key' | 'value', val: string) => {\n    const updated = [...form.webhookHeaders];\n    updated[index] = { ...updated[index], [field]: val };\n    setForm({ ...form, webhookHeaders: updated });\n  };\n\n  const hasSelectedAction = !!selectedActionId;\n  const isActionFieldsReadOnly = hasSelectedAction && !isCreatingNewAction;\n\n  const isNewActionValid =\n    (form.actionType === 'COMMAND' && form.command.trim()) ||\n    (form.actionType === 'SCRIPT' && form.script.trim()) ||\n    (form.actionType === 'WEBHOOK' && form.webhookUrl.trim());\n\n  const isValid = form.label.trim() && (hasSelectedAction || isNewActionValid);\n\n  const handleSubmit = useCallback(\n    async (e: React.FormEvent) => {\n      e.preventDefault();\n\n      // If creating new action inline, create it first\n      if (!hasSelectedAction && isCreatingNewAction) {\n        try {\n          const actionName =\n            slugify(form.label || 'vibedeck-action') + '-' + Date.now().toString(36);\n          const result = await createActionMutation({\n            variables: {\n              input: {\n                name: actionName,\n                displayName: form.label,\n                actionType: form.actionType,\n                command: form.actionType === 'COMMAND' ? form.command : undefined,\n                script: form.actionType === 'SCRIPT' ? form.script : undefined,\n                scriptInterpreter:\n                  form.actionType === 'SCRIPT' ? form.scriptInterpreter : undefined,\n                webhookUrl: form.actionType === 'WEBHOOK' ? form.webhookUrl : undefined,\n                webhookMethod: form.actionType === 'WEBHOOK' ? form.webhookMethod : undefined,\n                webhookBody: form.actionType === 'WEBHOOK' ? form.webhookBody : undefined,\n                webhookAuthType: form.actionType === 'WEBHOOK' ? form.webhookAuthType : undefined,\n                webhookAuthValue: form.actionType === 'WEBHOOK' ? form.webhookAuthValue : undefined,\n                workingDirectory: form.workingDirectory || undefined,\n                targetAgentId: form.targetAgentId || undefined,\n                category: form.category || undefined,\n                confirmationRequired: form.confirmationRequired,\n              },\n            },\n            refetchQueries: ['ListActions'],\n          });\n\n          const newActionId = result.data?.createAction?.id;\n          if (newActionId) {\n            onSubmit({ ...form, actionId: newActionId });\n            return;\n          }\n        } catch {\n          // Fall through\n        }\n      }\n\n      onSubmit({ ...form, actionId: selectedActionId });\n    },\n    [form, hasSelectedAction, isCreatingNewAction, selectedActionId, createActionMutation, onSubmit]\n  );\n\n  // -- Shared CSS classes --\n  const inputCls =\n    'w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg';\n  const inputMonoCls = `${inputCls} font-mono text-sm`;\n  const readOnlyCls = 'opacity-70 cursor-not-allowed';\n  const sectionLabel = 'block text-sm font-medium text-text-secondary mb-1';\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay backdrop-blur-sm\">\n      <div className=\"bg-bg-elevated border border-border-default rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default sticky top-0 bg-bg-elevated z-10\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">{title}</h2>\n          <button\n            onClick={onCancel}\n            className=\"p-1 rounded hover:bg-bg-tertiary text-text-tertiary\"\n          >\n            <X size={18} />\n          </button>\n        </div>\n\n        <form onSubmit={handleSubmit} className=\"p-6 space-y-4\">\n          {/* Label */}\n          <div>\n            <label className={sectionLabel}>\n              {tr('vibecontrols.vibedeck.buttonForm.label', 'Label')} *\n            </label>\n            <input\n              type=\"text\"\n              value={form.label}\n              onChange={(e) => setForm({ ...form, label: e.target.value })}\n              className={inputCls}\n              placeholder=\"Deploy Staging\"\n              required\n            />\n          </div>\n\n          {/* ── Action Selection ── */}\n          <div>\n            <label className={sectionLabel}>\n              {tr('vibecontrols.vibedeck.buttonForm.action', 'Action')} *\n            </label>\n\n            {/* Selected action card */}\n            {selectedAction ? (\n              <div className=\"flex items-center gap-2 px-3 py-2.5 rounded-lg border border-action-primary-bg/40 bg-bg-secondary\">\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"text-sm font-medium text-text-primary truncate\">\n                    {selectedAction.displayName || selectedAction.name}\n                  </div>\n                  <div className=\"text-xs text-text-tertiary flex items-center gap-1\">\n                    <span className=\"inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-action-primary-bg/10 text-action-primary-bg\">\n                      {selectedAction.actionType}\n                    </span>\n                    {selectedAction.command && (\n                      <span className=\"font-mono truncate\">\n                        {selectedAction.command.length > 35\n                          ? `${selectedAction.command.slice(0, 35)}...`\n                          : selectedAction.command}\n                      </span>\n                    )}\n                  </div>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={handleUnlinkAction}\n                  className=\"p-1.5 rounded hover:bg-bg-tertiary text-text-tertiary hover:text-status-error-text\"\n                  title=\"Change action\"\n                >\n                  <Unlink size={14} />\n                </button>\n              </div>\n            ) : (\n              /* Search for existing action or create new */\n              <div className=\"space-y-2\">\n                <div className=\"relative\">\n                  <input\n                    type=\"text\"\n                    value={actionSearchQuery}\n                    onChange={(e) => {\n                      setActionSearchQuery(e.target.value);\n                      setIsActionDropdownOpen(true);\n                      setIsCreatingNewAction(false);\n                    }}\n                    onFocus={() => setIsActionDropdownOpen(true)}\n                    onBlur={() => setTimeout(() => setIsActionDropdownOpen(false), 200)}\n                    className=\"w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                    placeholder={tr(\n                      'vibecontrols.vibedeck.buttonForm.searchActions',\n                      'Search existing actions...'\n                    )}\n                  />\n                  {isActionDropdownOpen && (\n                    <div className=\"absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border-default shadow-xl bg-bg-elevated\">\n                      {filteredActions.length === 0 ? (\n                        <div className=\"px-3 py-2 text-sm text-text-tertiary\">No actions found</div>\n                      ) : (\n                        filteredActions.map((action) => (\n                          <button\n                            key={action.id}\n                            type=\"button\"\n                            onMouseDown={(e) => e.preventDefault()}\n                            onClick={() => handleSelectAction(action)}\n                            className=\"w-full text-left px-3 py-2 hover:bg-bg-tertiary\"\n                          >\n                            <div className=\"text-sm font-medium\">\n                              {action.displayName || action.name}\n                            </div>\n                            <div className=\"text-xs text-text-tertiary\">{action.actionType}</div>\n                          </button>\n                        ))\n                      )}\n                    </div>\n                  )}\n                </div>\n\n                {!isCreatingNewAction && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsCreatingNewAction(true)}\n                    className=\"flex items-center gap-1.5 text-sm text-action-primary-bg hover:opacity-80\"\n                  >\n                    <Plus size={14} />{' '}\n                    {tr('vibecontrols.vibedeck.buttonForm.createNewAction', 'Create new action')}\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n\n          {/* ── New Action Fields (if creating new) ── */}\n          {isCreatingNewAction && (\n            <div className=\"p-4 rounded-lg bg-bg-secondary/50 border border-dashed border-border-default space-y-4\">\n              <div>\n                <label className={sectionLabel}>Action Type</label>\n                <select\n                  value={form.actionType}\n                  onChange={(e) => setForm({ ...form, actionType: e.target.value as any })}\n                  className={inputCls}\n                >\n                  <option value=\"COMMAND\">Command</option>\n                  <option value=\"SCRIPT\">Script</option>\n                  <option value=\"WEBHOOK\">Webhook</option>\n                </select>\n              </div>\n\n              {form.actionType === 'COMMAND' && (\n                <div>\n                  <label className={sectionLabel}>Command *</label>\n                  <textarea\n                    value={form.command}\n                    onChange={(e) => setForm({ ...form, command: e.target.value })}\n                    className={inputMonoCls}\n                    rows={2}\n                    required\n                  />\n                </div>\n              )}\n\n              {form.actionType === 'SCRIPT' && (\n                <div>\n                  <label className={sectionLabel}>Script *</label>\n                  <textarea\n                    value={form.script}\n                    onChange={(e) => setForm({ ...form, script: e.target.value })}\n                    className={inputMonoCls}\n                    rows={4}\n                    required\n                  />\n                </div>\n              )}\n\n              {form.actionType === 'WEBHOOK' && (\n                <div>\n                  <label className={sectionLabel}>URL *</label>\n                  <input\n                    type=\"url\"\n                    value={form.webhookUrl}\n                    onChange={(e) => setForm({ ...form, webhookUrl: e.target.value })}\n                    className={inputCls}\n                    required\n                  />\n                </div>\n              )}\n            </div>\n          )}\n\n          {/* ── Appearance ── */}\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div>\n              <label className={sectionLabel}>Color</label>\n              <select\n                value={form.color}\n                onChange={(e) => setForm({ ...form, color: e.target.value })}\n                className={inputCls}\n              >\n                {colorOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </div>\n            <div>\n              <label className={sectionLabel}>Category</label>\n              <input\n                type=\"text\"\n                value={form.category}\n                onChange={(e) => setForm({ ...form, category: e.target.value })}\n                className={inputCls}\n              />\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div className=\"flex items-center gap-2\">\n              <input\n                type=\"checkbox\"\n                checked={form.confirmationRequired}\n                onChange={(e) => setForm({ ...form, confirmationRequired: e.target.checked })}\n                id=\"confReq\"\n              />\n              <label htmlFor=\"confReq\" className=\"text-sm\">\n                {tr('vibecontrols.vibedeck.buttonForm.requireConfirmation', 'Require confirmation')}\n              </label>\n            </div>\n          </div>\n\n          {/* Submit */}\n          <div className=\"flex justify-end gap-3 pt-2\">\n            <button\n              type=\"button\"\n              onClick={onCancel}\n              className=\"px-4 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-tertiary\"\n            >\n              {tr('vibecontrols.vibedeck.buttonForm.cancel', 'Cancel')}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isLoading || !isValid}\n              className=\"px-4 py-2 rounded-lg text-sm bg-action-primary-bg text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n            >\n              {isLoading\n                ? tr('vibecontrols.vibedeck.buttonForm.saving', 'Saving...')\n                : tr('vibecontrols.vibedeck.buttonForm.save', 'Save')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/vibedeck/VibeDeckButtonTile.d.ts

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+
+interface ActionRef {
+    id: string;
+    name: string;
+    displayName: string | null;
+    actionType: string;
+    command: string | null;
+    script: string | null;
+    webhookUrl: string | null;
+    targetAgentId: string | null;
+}
+interface ButtonData {
+    id: string;
+    label: string;
+    icon: string | null;
+    color: string | null;
+    command: string | null;
+    actionType: string;
+    category: string | null;
+    confirmationRequired: boolean;
+    keyboardShortcut: string | null;
+    targetAgentId: string | null;
+    scriptInterpreter: string | null;
+    webhookUrl: string | null;
+    webhookMethod: string | null;
+    actionId?: string | null;
+    action?: ActionRef | null;
+}
+interface VibeDeckButtonTileProps {
+    button: ButtonData;
+    onExecute: (id: string) => void;
+    onEdit: (id: string) => void;
+    onDelete: (id: string) => void;
+    canUpdate: boolean;
+    canDelete: boolean;
+    canExecute: boolean;
+    executing?: boolean;
+    /** Visual feedback state after execution completes */
+    executionStatus?: 'idle' | 'executing' | 'success' | 'error';
+    isDragOver?: boolean;
+    selected?: boolean;
+    onToggleSelect?: (checked: boolean) => void;
+    previewMode?: boolean;
+}
+export declare const VibeDeckButtonTile: FC<VibeDeckButtonTileProps>;
+export {};
+//# sourceMappingURL=VibeDeckButtonTile.d.ts.map

package/dist/components/vibedeck/VibeDeckButtonTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckButtonTile.d.ts","sourceRoot":"","sources":["../../../src/components/vibedeck/VibeDeckButtonTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBhC,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED,UAAU,uBAAuB;IAC/B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA+P1D,CAAC"}