@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/vibedeck/VibeDeckButtonTile.js

@@ -0,0 +1,196 @@
+import { SelectionCheckbox as e } from "../shared/SelectionCheckbox.js";
+import { AlertTriangle as t, Check as n, FileCode as r, Globe as i, Loader2 as a, Pencil as o, Play as s, Terminal as c, Trash2 as l, X as u } from "lucide-react";
+import { AnimatePresence as d, motion as f } from "framer-motion";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/vibedeck/VibeDeckButtonTile.tsx
+var h = ({ button: h, onExecute: g, onEdit: _, onDelete: v, canUpdate: y, canDelete: b, canExecute: x, executing: S = !1, executionStatus: C = "idle", isDragOver: w = !1, selected: T = !1, onToggleSelect: E, previewMode: D = !1 }) => {
+	let O = {
+		red: "border-status-error-border/30 bg-status-error-bg-subtle",
+		green: "border-status-success-border/30 bg-status-success-bg-subtle",
+		blue: "border-accent-blue/30 bg-accent-blue-subtle",
+		yellow: "border-status-warning-border/30 bg-status-warning-bg-subtle",
+		purple: "border-accent-purple/30 bg-accent-purple-subtle",
+		orange: "border-status-warning-border/30 bg-status-warning-bg-subtle",
+		cyan: "border-accent-teal/30 bg-accent-teal-subtle",
+		pink: "border-accent-purple/30 bg-accent-purple-subtle"
+	}, k = {
+		red: "border-status-error-border/40 bg-gradient-to-br from-status-error-bg/15 to-status-error-bg/5 hover:shadow-status-error-bg/20",
+		green: "border-status-success-border/40 bg-gradient-to-br from-status-success-bg/15 to-status-success-bg/5 hover:shadow-status-success-bg/20",
+		blue: "border-accent-blue/40 bg-gradient-to-br from-accent-blue/15 to-accent-blue/5 hover:shadow-accent-blue/20",
+		yellow: "border-status-warning-border/40 bg-gradient-to-br from-status-warning-bg/15 to-status-warning-bg/5 hover:shadow-status-warning-bg/20",
+		purple: "border-accent-purple/40 bg-gradient-to-br from-accent-purple/15 to-accent-purple/5 hover:shadow-accent-purple/20",
+		orange: "border-status-warning-border/40 bg-gradient-to-br from-status-warning-bg/15 to-status-warning-bg/5 hover:shadow-status-warning-bg/20",
+		cyan: "border-accent-teal/40 bg-gradient-to-br from-accent-teal/15 to-accent-teal/5 hover:shadow-accent-teal/20",
+		pink: "border-accent-purple/40 bg-gradient-to-br from-accent-purple/15 to-accent-purple/5 hover:shadow-accent-purple/20"
+	}, A = D ? h.color && k[h.color] ? k[h.color] : "border-border-default bg-gradient-to-br from-bg-secondary to-bg-surface hover:shadow-action-primary-bg/10" : h.color && O[h.color] ? O[h.color] : "border-border-default bg-bg-secondary", j = h.action?.actionType || h.actionType, M = h.action?.command ?? h.command, N = h.action?.script ?? null, P = h.action?.webhookUrl ?? h.webhookUrl, F = h.action?.displayName || h.action?.name || null, I = j === "WEBHOOK", L = j === "SCRIPT", R = I ? i : L ? r : c, z = I ? `${h.webhookMethod || "POST"} ${P || ""}` : L ? `Script (${h.scriptInterpreter || "bash"})${N ? `: ${N.slice(0, 60)}` : ""}` : `${M || ""}${h.keyboardShortcut ? ` (${h.keyboardShortcut})` : ""}`, B = () => {
+		D && x && !S && g(h.id);
+	}, V = C === "executing" ? "ring-2 ring-action-primary-bg/60 ring-offset-1" : C === "success" ? "ring-2 ring-status-success-border/50 ring-offset-1" : C === "error" ? "ring-2 ring-status-error-border/50 ring-offset-1" : "", H = C === "executing" ? "border-action-primary-bg/60" : C === "success" ? "border-status-success-border/50" : C === "error" ? "border-status-error-border/50" : "";
+	return /* @__PURE__ */ m(f.div, {
+		className: `relative group h-full ${V} ${w ? "ring-2 ring-action-primary-bg ring-offset-1" : ""} ${T ? "ring-2 ring-action-primary-bg/40 ring-offset-1" : ""} ${D && x ? "cursor-pointer" : ""} rounded-lg`,
+		whileHover: {
+			scale: D ? 1.04 : 1.02,
+			transition: { duration: .15 }
+		},
+		whileTap: D ? {
+			scale: .95,
+			transition: { duration: .1 }
+		} : { scale: .96 },
+		children: [
+			/* @__PURE__ */ m("div", {
+				onClick: B,
+				className: `w-full h-full min-h-[80px] rounded-lg border-2 p-3 flex flex-col items-center justify-center gap-2 transition-all ${A} ${H} ${C === "executing" ? "animate-pulse" : ""} ${D ? "hover:shadow-lg transition-shadow duration-200" : ""}`,
+				title: z,
+				children: [
+					I && h.webhookMethod && /* @__PURE__ */ p("span", {
+						className: `absolute left-1.5 text-[9px] font-bold text-text-tertiary bg-bg-tertiary/80 rounded px-1 py-0.5 uppercase ${!D && E ? "top-8" : "top-1.5"}`,
+						children: h.webhookMethod
+					}),
+					L && h.scriptInterpreter && /* @__PURE__ */ p("span", {
+						className: `absolute left-1.5 text-[9px] font-bold text-text-tertiary bg-bg-tertiary/80 rounded px-1 py-0.5 ${!D && E ? "top-8" : "top-1.5"}`,
+						children: h.scriptInterpreter
+					}),
+					!D && E && /* @__PURE__ */ p("div", {
+						className: "absolute top-1.5 left-1.5 z-10",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ p(e, {
+							checked: T,
+							onChange: E,
+							ariaLabel: `Select vibe deck button ${h.label}`
+						})
+					}),
+					h.confirmationRequired && /* @__PURE__ */ p(t, {
+						size: 10,
+						className: "absolute bottom-1.5 left-1.5 text-status-warning-text"
+					}),
+					/* @__PURE__ */ p(R, {
+						size: D ? 24 : 20,
+						className: D ? "text-text-primary" : "text-text-secondary"
+					}),
+					/* @__PURE__ */ p("span", {
+						className: `font-medium text-text-primary text-center leading-tight line-clamp-2 ${D ? "text-base" : "text-sm"}`,
+						children: h.label
+					}),
+					F && /* @__PURE__ */ p("span", {
+						className: "text-[10px] text-action-primary-bg/70 font-medium truncate max-w-full px-1",
+						children: F
+					}),
+					h.category && /* @__PURE__ */ p("span", {
+						className: "text-[10px] text-text-tertiary uppercase tracking-wider",
+						children: h.category
+					}),
+					/* @__PURE__ */ m(d, { children: [
+						C === "executing" && /* @__PURE__ */ p(f.div, {
+							initial: {
+								opacity: 0,
+								scale: .8
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .8
+							},
+							className: "absolute top-1.5 right-1.5 z-10",
+							children: /* @__PURE__ */ p("div", {
+								className: "w-5 h-5 rounded-full bg-action-primary-bg flex items-center justify-center shadow-sm",
+								children: /* @__PURE__ */ p(a, {
+									size: 11,
+									className: "text-text-inverse animate-spin"
+								})
+							})
+						}),
+						C === "success" && /* @__PURE__ */ p(f.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							className: "absolute top-1.5 right-1.5 z-10",
+							children: /* @__PURE__ */ p("div", {
+								className: "w-5 h-5 rounded-full bg-status-success-bg flex items-center justify-center shadow-sm",
+								children: /* @__PURE__ */ p(n, {
+									size: 11,
+									className: "text-text-inverse",
+									strokeWidth: 3
+								})
+							})
+						}),
+						C === "error" && /* @__PURE__ */ p(f.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							className: "absolute top-1.5 right-1.5 z-10",
+							children: /* @__PURE__ */ p("div", {
+								className: "w-5 h-5 rounded-full bg-status-error-bg flex items-center justify-center shadow-sm",
+								children: /* @__PURE__ */ p(u, {
+									size: 11,
+									className: "text-text-inverse",
+									strokeWidth: 3
+								})
+							})
+						})
+					] }),
+					D && x && C !== "executing" && /* @__PURE__ */ p("div", {
+						className: "absolute inset-0 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-bg-elevated/40 backdrop-blur-[1px]",
+						children: /* @__PURE__ */ p("div", {
+							className: "w-10 h-10 rounded-full bg-status-success-bg/90 flex items-center justify-center shadow-md",
+							children: /* @__PURE__ */ p(s, {
+								size: 18,
+								className: "text-status-success-text ml-0.5"
+							})
+						})
+					})
+				]
+			}),
+			!D && x && /* @__PURE__ */ p("button", {
+				onClick: (e) => {
+					e.stopPropagation(), g(h.id);
+				},
+				disabled: S,
+				className: "absolute top-0.5 right-0.5 p-1 rounded bg-bg-elevated/80 text-status-success-text/60 hover:text-status-success-text hover:bg-bg-elevated transition-colors shadow-sm",
+				title: "Execute",
+				children: /* @__PURE__ */ p(s, { size: 12 })
+			}),
+			!D && (y || b) && /* @__PURE__ */ m("div", {
+				className: "absolute bottom-0.5 right-0.5 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+				children: [y && /* @__PURE__ */ p("button", {
+					onClick: (e) => {
+						e.stopPropagation(), _(h.id);
+					},
+					className: "p-1 rounded bg-bg-elevated/80 hover:bg-bg-elevated text-text-tertiary hover:text-text-primary shadow-sm",
+					title: "Edit",
+					children: /* @__PURE__ */ p(o, { size: 12 })
+				}), b && /* @__PURE__ */ p("button", {
+					onClick: (e) => {
+						e.stopPropagation(), v(h.id);
+					},
+					className: "p-1 rounded bg-bg-elevated/80 hover:bg-bg-elevated text-text-tertiary hover:text-status-error-text shadow-sm",
+					title: "Delete",
+					children: /* @__PURE__ */ p(l, { size: 12 })
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { h as VibeDeckButtonTile };
+
+//# sourceMappingURL=VibeDeckButtonTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckButtonTile.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckButtonTile.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Play,\n  Pencil,\n  Trash2,\n  Terminal,\n  Globe,\n  FileCode,\n  AlertTriangle,\n  Check,\n  X,\n  Loader2,\n} from 'lucide-react';\nimport { SelectionCheckbox } from '../shared/SelectionCheckbox';\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}\n\ninterface VibeDeckButtonTileProps {\n  button: ButtonData;\n  onExecute: (id: string) => void;\n  onEdit: (id: string) => void;\n  onDelete: (id: string) => void;\n  canUpdate: boolean;\n  canDelete: boolean;\n  canExecute: boolean;\n  executing?: boolean;\n  /** Visual feedback state after execution completes */\n  executionStatus?: 'idle' | 'executing' | 'success' | 'error';\n  isDragOver?: boolean;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n  previewMode?: boolean;\n}\n\nexport const VibeDeckButtonTile: FC<VibeDeckButtonTileProps> = ({\n  button,\n  onExecute,\n  onEdit,\n  onDelete,\n  canUpdate,\n  canDelete,\n  canExecute,\n  executing = false,\n  executionStatus = 'idle',\n  isDragOver = false,\n  selected = false,\n  onToggleSelect,\n  previewMode = false,\n}) => {\n  const colorClasses: Record<string, string> = {\n    red: 'border-status-error-border/30 bg-status-error-bg-subtle',\n    green: 'border-status-success-border/30 bg-status-success-bg-subtle',\n    blue: 'border-accent-blue/30 bg-accent-blue-subtle',\n    yellow: 'border-status-warning-border/30 bg-status-warning-bg-subtle',\n    purple: 'border-accent-purple/30 bg-accent-purple-subtle',\n    orange: 'border-status-warning-border/30 bg-status-warning-bg-subtle',\n    cyan: 'border-accent-teal/30 bg-accent-teal-subtle',\n    pink: 'border-accent-purple/30 bg-accent-purple-subtle',\n  };\n\n  const previewColorClasses: Record<string, string> = {\n    red: 'border-status-error-border/40 bg-gradient-to-br from-status-error-bg/15 to-status-error-bg/5 hover:shadow-status-error-bg/20',\n    green:\n      'border-status-success-border/40 bg-gradient-to-br from-status-success-bg/15 to-status-success-bg/5 hover:shadow-status-success-bg/20',\n    blue: 'border-accent-blue/40 bg-gradient-to-br from-accent-blue/15 to-accent-blue/5 hover:shadow-accent-blue/20',\n    yellow:\n      'border-status-warning-border/40 bg-gradient-to-br from-status-warning-bg/15 to-status-warning-bg/5 hover:shadow-status-warning-bg/20',\n    purple:\n      'border-accent-purple/40 bg-gradient-to-br from-accent-purple/15 to-accent-purple/5 hover:shadow-accent-purple/20',\n    orange:\n      'border-status-warning-border/40 bg-gradient-to-br from-status-warning-bg/15 to-status-warning-bg/5 hover:shadow-status-warning-bg/20',\n    cyan: 'border-accent-teal/40 bg-gradient-to-br from-accent-teal/15 to-accent-teal/5 hover:shadow-accent-teal/20',\n    pink: 'border-accent-purple/40 bg-gradient-to-br from-accent-purple/15 to-accent-purple/5 hover:shadow-accent-purple/20',\n  };\n\n  const tileColor = previewMode\n    ? button.color && previewColorClasses[button.color]\n      ? previewColorClasses[button.color]\n      : 'border-border-default bg-gradient-to-br from-bg-secondary to-bg-surface hover:shadow-action-primary-bg/10'\n    : button.color && colorClasses[button.color]\n      ? colorClasses[button.color]\n      : 'border-border-default bg-bg-secondary';\n\n  // Prefer action fields when linked, fall back to inline (deprecated) fields\n  const effectiveActionType = button.action?.actionType || button.actionType;\n  const effectiveCommand = button.action?.command ?? button.command;\n  const effectiveScript = button.action?.script ?? null;\n  const effectiveWebhookUrl = button.action?.webhookUrl ?? button.webhookUrl;\n  const actionName = button.action?.displayName || button.action?.name || null;\n\n  const isWebhook = effectiveActionType === 'WEBHOOK';\n  const isScript = effectiveActionType === 'SCRIPT';\n  const ActionIcon = isWebhook ? Globe : isScript ? FileCode : Terminal;\n  const tooltip = isWebhook\n    ? `${button.webhookMethod || 'POST'} ${effectiveWebhookUrl || ''}`\n    : isScript\n      ? `Script (${button.scriptInterpreter || 'bash'})${effectiveScript ? `: ${effectiveScript.slice(0, 60)}` : ''}`\n      : `${effectiveCommand || ''}${button.keyboardShortcut ? ` (${button.keyboardShortcut})` : ''}`;\n\n  // In preview mode, the entire tile is clickable to execute\n  const handleTileClick = () => {\n    if (previewMode && canExecute && !executing) {\n      onExecute(button.id);\n    }\n  };\n\n  // Status-dependent styles\n  const statusRing =\n    executionStatus === 'executing'\n      ? 'ring-2 ring-action-primary-bg/60 ring-offset-1'\n      : executionStatus === 'success'\n        ? 'ring-2 ring-status-success-border/50 ring-offset-1'\n        : executionStatus === 'error'\n          ? 'ring-2 ring-status-error-border/50 ring-offset-1'\n          : '';\n\n  const statusBorderOverride =\n    executionStatus === 'executing'\n      ? 'border-action-primary-bg/60'\n      : executionStatus === 'success'\n        ? 'border-status-success-border/50'\n        : executionStatus === 'error'\n          ? 'border-status-error-border/50'\n          : '';\n\n  return (\n    <motion.div\n      className={`relative group h-full ${statusRing} ${isDragOver ? 'ring-2 ring-action-primary-bg ring-offset-1' : ''} ${selected ? 'ring-2 ring-action-primary-bg/40 ring-offset-1' : ''} ${previewMode && canExecute ? 'cursor-pointer' : ''} rounded-lg`}\n      whileHover={{ scale: previewMode ? 1.04 : 1.02, transition: { duration: 0.15 } }}\n      whileTap={previewMode ? { scale: 0.95, transition: { duration: 0.1 } } : { scale: 0.96 }}\n    >\n      <div\n        onClick={handleTileClick}\n        className={`w-full h-full min-h-[80px] rounded-lg border-2 p-3 flex flex-col items-center justify-center gap-2 transition-all ${tileColor} ${statusBorderOverride} ${executionStatus === 'executing' ? 'animate-pulse' : ''} ${previewMode ? 'hover:shadow-lg transition-shadow duration-200' : ''}`}\n        title={tooltip}\n      >\n        {/* Top-left: webhook method or script interpreter badge */}\n        {isWebhook && button.webhookMethod && (\n          <span\n            className={`absolute left-1.5 text-[9px] font-bold text-text-tertiary bg-bg-tertiary/80 rounded px-1 py-0.5 uppercase ${!previewMode && onToggleSelect ? 'top-8' : 'top-1.5'}`}\n          >\n            {button.webhookMethod}\n          </span>\n        )}\n        {isScript && button.scriptInterpreter && (\n          <span\n            className={`absolute left-1.5 text-[9px] font-bold text-text-tertiary bg-bg-tertiary/80 rounded px-1 py-0.5 ${!previewMode && onToggleSelect ? 'top-8' : 'top-1.5'}`}\n          >\n            {button.scriptInterpreter}\n          </span>\n        )}\n\n        {!previewMode && onToggleSelect && (\n          <div\n            className=\"absolute top-1.5 left-1.5 z-10\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            <SelectionCheckbox\n              checked={selected}\n              onChange={onToggleSelect}\n              ariaLabel={`Select vibe deck button ${button.label}`}\n            />\n          </div>\n        )}\n\n        {/* Bottom-left: confirmation required warning */}\n        {button.confirmationRequired && (\n          <AlertTriangle\n            size={10}\n            className=\"absolute bottom-1.5 left-1.5 text-status-warning-text\"\n          />\n        )}\n\n        <ActionIcon\n          size={previewMode ? 24 : 20}\n          className={previewMode ? 'text-text-primary' : 'text-text-secondary'}\n        />\n        <span\n          className={`font-medium text-text-primary text-center leading-tight line-clamp-2 ${previewMode ? 'text-base' : 'text-sm'}`}\n        >\n          {button.label}\n        </span>\n        {actionName && (\n          <span className=\"text-[10px] text-action-primary-bg/70 font-medium truncate max-w-full px-1\">\n            {actionName}\n          </span>\n        )}\n        {button.category && (\n          <span className=\"text-[10px] text-text-tertiary uppercase tracking-wider\">\n            {button.category}\n          </span>\n        )}\n\n        {/* Execution status indicator */}\n        <AnimatePresence>\n          {executionStatus === 'executing' && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0.8 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.8 }}\n              className=\"absolute top-1.5 right-1.5 z-10\"\n            >\n              <div className=\"w-5 h-5 rounded-full bg-action-primary-bg flex items-center justify-center shadow-sm\">\n                <Loader2 size={11} className=\"text-text-inverse animate-spin\" />\n              </div>\n            </motion.div>\n          )}\n          {executionStatus === 'success' && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              className=\"absolute top-1.5 right-1.5 z-10\"\n            >\n              <div className=\"w-5 h-5 rounded-full bg-status-success-bg flex items-center justify-center shadow-sm\">\n                <Check size={11} className=\"text-text-inverse\" strokeWidth={3} />\n              </div>\n            </motion.div>\n          )}\n          {executionStatus === 'error' && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              className=\"absolute top-1.5 right-1.5 z-10\"\n            >\n              <div className=\"w-5 h-5 rounded-full bg-status-error-bg flex items-center justify-center shadow-sm\">\n                <X size={11} className=\"text-text-inverse\" strokeWidth={3} />\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        {/* Preview mode: centered play overlay on hover */}\n        {previewMode && canExecute && executionStatus !== 'executing' && (\n          <div className=\"absolute inset-0 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-bg-elevated/40 backdrop-blur-[1px]\">\n            <div className=\"w-10 h-10 rounded-full bg-status-success-bg/90 flex items-center justify-center shadow-md\">\n              <Play size={18} className=\"text-status-success-text ml-0.5\" />\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Top-right: Play button — visible in edit mode when user has execute permission */}\n      {!previewMode && canExecute && (\n        <button\n          onClick={(e) => {\n            e.stopPropagation();\n            onExecute(button.id);\n          }}\n          disabled={executing}\n          className=\"absolute top-0.5 right-0.5 p-1 rounded bg-bg-elevated/80 text-status-success-text/60 hover:text-status-success-text hover:bg-bg-elevated transition-colors shadow-sm\"\n          title=\"Execute\"\n        >\n          <Play size={12} />\n        </button>\n      )}\n\n      {/* Bottom-right: Edit / Delete — visible on hover in edit mode only */}\n      {!previewMode && (canUpdate || canDelete) && (\n        <div className=\"absolute bottom-0.5 right-0.5 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n          {canUpdate && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onEdit(button.id);\n              }}\n              className=\"p-1 rounded bg-bg-elevated/80 hover:bg-bg-elevated text-text-tertiary hover:text-text-primary shadow-sm\"\n              title=\"Edit\"\n            >\n              <Pencil size={12} />\n            </button>\n          )}\n          {canDelete && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onDelete(button.id);\n              }}\n              className=\"p-1 rounded bg-bg-elevated/80 hover:bg-bg-elevated text-text-tertiary hover:text-status-error-text shadow-sm\"\n              title=\"Delete\"\n            >\n              <Trash2 size={12} />\n            </button>\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+export interface ExecutionLogEntry {
+    id: string;
+    buttonId: string;
+    buttonLabel: string;
+    actionType: 'COMMAND' | 'SCRIPT' | 'WEBHOOK';
+    command?: string | null;
+    status: 'pending' | 'running' | 'success' | 'error';
+    output?: string | null;
+    exitCode?: number | null;
+    webhookStatusCode?: number | null;
+    startedAt: Date;
+    completedAt?: Date | null;
+    error?: string | null;
+}
+interface VibeDeckExecutionLogProps {
+    entries: ExecutionLogEntry[];
+    expanded: boolean;
+    onToggleExpanded: () => void;
+    onClear: () => void;
+}
+export declare const VibeDeckExecutionLog: FC<VibeDeckExecutionLogProps>;
+export {};
+//# sourceMappingURL=VibeDeckExecutionLog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckExecutionLog.d.ts","sourceRoot":"","sources":["../../../src/components/vibedeck/VibeDeckExecutionLog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAgBnD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,IAAI,CAAC;IAChB,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAmDD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAyK9D,CAAC"}

package/dist/components/vibedeck/VibeDeckExecutionLog.js

@@ -0,0 +1,212 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useEffect as t, useRef as n } from "react";
+import { Check as r, ChevronDown as i, ChevronUp as a, Clock as o, FileCode as s, Globe as c, Loader2 as l, Terminal as u, Trash2 as d, X as f } from "lucide-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/vibedeck/VibeDeckExecutionLog.tsx
+function _(e, t) {
+	let n = (t ? t.getTime() : Date.now()) - e.getTime();
+	return n < 1e3 ? `${n}ms` : n < 6e4 ? `${(n / 1e3).toFixed(1)}s` : `${Math.floor(n / 6e4)}m ${Math.floor(n % 6e4 / 1e3)}s`;
+}
+function v(e) {
+	return e.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+var y = ({ status: e }) => {
+	switch (e) {
+		case "pending": return /* @__PURE__ */ h(o, {
+			size: 14,
+			className: "text-text-tertiary"
+		});
+		case "running": return /* @__PURE__ */ h(l, {
+			size: 14,
+			className: "text-action-primary-bg animate-spin"
+		});
+		case "success": return /* @__PURE__ */ h(r, {
+			size: 14,
+			className: "text-green-500"
+		});
+		case "error": return /* @__PURE__ */ h(f, {
+			size: 14,
+			className: "text-red-500"
+		});
+	}
+}, b = ({ type: e }) => {
+	switch (e) {
+		case "WEBHOOK": return /* @__PURE__ */ h(c, {
+			size: 12,
+			className: "text-text-tertiary"
+		});
+		case "SCRIPT": return /* @__PURE__ */ h(s, {
+			size: 12,
+			className: "text-text-tertiary"
+		});
+		default: return /* @__PURE__ */ h(u, {
+			size: 12,
+			className: "text-text-tertiary"
+		});
+	}
+}, x = {
+	pending: "Pending",
+	running: "Running",
+	success: "Success",
+	error: "Failed"
+}, S = {
+	pending: "bg-bg-tertiary text-text-tertiary",
+	running: "bg-action-primary-bg/10 text-action-primary-bg",
+	success: "bg-green-500/10 text-green-600 dark:text-green-400",
+	error: "bg-red-500/10 text-red-600 dark:text-red-400"
+}, C = ({ entries: o, expanded: s, onToggleExpanded: c, onClear: C }) => {
+	let w = e(), T = n(null);
+	if (t(() => {
+		T.current && s && (T.current.scrollTop = T.current.scrollHeight);
+	}, [o.length, s]), o.length === 0) return null;
+	let E = o.filter((e) => e.status === "running").length, D = o.filter((e) => e.status === "success").length, O = o.filter((e) => e.status === "error").length;
+	return /* @__PURE__ */ g("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface overflow-hidden",
+		children: [/* @__PURE__ */ g("button", {
+			onClick: c,
+			className: "w-full flex items-center justify-between px-4 py-2.5 hover:bg-bg-secondary/50 transition-colors",
+			children: [/* @__PURE__ */ g("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ h(u, {
+						size: 14,
+						className: "text-text-secondary"
+					}),
+					/* @__PURE__ */ h("span", {
+						className: "text-sm font-medium text-text-primary",
+						children: w("vibecontrols.vibedeck.executionLog.title", "Execution Log")
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2",
+						children: [
+							E > 0 && /* @__PURE__ */ g("span", {
+								className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-action-primary-bg/10 text-action-primary-bg",
+								children: [/* @__PURE__ */ h(l, {
+									size: 10,
+									className: "animate-spin"
+								}), E]
+							}),
+							D > 0 && /* @__PURE__ */ g("span", {
+								className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-500/10 text-green-600 dark:text-green-400",
+								children: [/* @__PURE__ */ h(r, { size: 10 }), D]
+							}),
+							O > 0 && /* @__PURE__ */ g("span", {
+								className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-red-500/10 text-red-600 dark:text-red-400",
+								children: [/* @__PURE__ */ h(f, { size: 10 }), O]
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-xs text-text-tertiary",
+								children: [o.length, " total"]
+							})
+						]
+					})
+				]
+			}), /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-2",
+				children: [s && /* @__PURE__ */ h("span", {
+					onClick: (e) => {
+						e.stopPropagation(), C();
+					},
+					className: "p-1 rounded hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary transition-colors",
+					title: "Clear log",
+					children: /* @__PURE__ */ h(d, { size: 12 })
+				}), h(s ? i : a, {
+					size: 14,
+					className: "text-text-tertiary"
+				})]
+			})]
+		}), /* @__PURE__ */ h(p, { children: s && /* @__PURE__ */ g(m.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: { duration: .2 },
+			className: "overflow-hidden",
+			children: [/* @__PURE__ */ h("div", { className: "border-t border-border-default" }), /* @__PURE__ */ h("div", {
+				ref: T,
+				className: "max-h-[240px] overflow-y-auto divide-y divide-border-default/50",
+				children: o.map((e) => /* @__PURE__ */ g("div", {
+					className: `px-4 py-2.5 flex items-start gap-3 text-sm transition-colors ${e.status === "running" ? "bg-action-primary-bg/5" : ""}`,
+					children: [
+						/* @__PURE__ */ h("div", {
+							className: "pt-0.5 shrink-0",
+							children: /* @__PURE__ */ h(y, { status: e.status })
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ h("span", {
+											className: "font-medium text-text-primary truncate",
+											children: e.buttonLabel
+										}),
+										/* @__PURE__ */ h("span", {
+											className: `inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase ${S[e.status]}`,
+											children: x[e.status]
+										}),
+										/* @__PURE__ */ h("span", {
+											className: "flex items-center gap-1 text-text-tertiary",
+											children: /* @__PURE__ */ h(b, { type: e.actionType })
+										})
+									]
+								}),
+								e.command && /* @__PURE__ */ h("div", {
+									className: "mt-0.5 text-xs text-text-tertiary font-mono truncate",
+									children: e.command
+								}),
+								e.output && /* @__PURE__ */ h("pre", {
+									className: "mt-1 text-[11px] font-mono text-text-secondary bg-bg-sunken rounded px-2 py-1 max-h-16 overflow-y-auto whitespace-pre-wrap",
+									children: e.output
+								}),
+								e.error && /* @__PURE__ */ h("div", {
+									className: "mt-1 text-xs text-red-500 font-mono",
+									children: e.error
+								})
+							]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "shrink-0 text-right",
+							children: [
+								/* @__PURE__ */ h("div", {
+									className: "text-[10px] text-text-tertiary",
+									children: v(e.startedAt)
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "text-[10px] text-text-tertiary font-mono",
+									children: _(e.startedAt, e.completedAt)
+								}),
+								e.exitCode != null && e.exitCode !== 0 && /* @__PURE__ */ g("div", {
+									className: "text-[10px] text-red-500 font-mono",
+									children: ["exit ", e.exitCode]
+								}),
+								e.webhookStatusCode != null && /* @__PURE__ */ g("div", {
+									className: `text-[10px] font-mono ${e.webhookStatusCode >= 400 ? "text-red-500" : "text-text-tertiary"}`,
+									children: ["HTTP ", e.webhookStatusCode]
+								})
+							]
+						})
+					]
+				}, e.id))
+			})]
+		}) })]
+	});
+};
+//#endregion
+export { C as VibeDeckExecutionLog };
+
+//# sourceMappingURL=VibeDeckExecutionLog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckExecutionLog.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckExecutionLog.tsx"],"sourcesContent":["import { type FC, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Terminal,\n  Globe,\n  FileCode,\n  Check,\n  X,\n  Loader2,\n  Clock,\n  ChevronDown,\n  ChevronUp,\n  Trash2,\n} from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nexport interface ExecutionLogEntry {\n  id: string;\n  buttonId: string;\n  buttonLabel: string;\n  actionType: 'COMMAND' | 'SCRIPT' | 'WEBHOOK';\n  command?: string | null;\n  status: 'pending' | 'running' | 'success' | 'error';\n  output?: string | null;\n  exitCode?: number | null;\n  webhookStatusCode?: number | null;\n  startedAt: Date;\n  completedAt?: Date | null;\n  error?: string | null;\n}\n\ninterface VibeDeckExecutionLogProps {\n  entries: ExecutionLogEntry[];\n  expanded: boolean;\n  onToggleExpanded: () => void;\n  onClear: () => void;\n}\n\nfunction formatDuration(start: Date, end?: Date | null): string {\n  const ms = (end ? end.getTime() : Date.now()) - start.getTime();\n  if (ms < 1000) return `${ms}ms`;\n  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;\n  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;\n}\n\nfunction formatTime(date: Date): string {\n  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n}\n\nconst StatusIcon: FC<{ status: ExecutionLogEntry['status'] }> = ({ status }) => {\n  switch (status) {\n    case 'pending':\n      return <Clock size={14} className=\"text-text-tertiary\" />;\n    case 'running':\n      return <Loader2 size={14} className=\"text-action-primary-bg animate-spin\" />;\n    case 'success':\n      return <Check size={14} className=\"text-green-500\" />;\n    case 'error':\n      return <X size={14} className=\"text-red-500\" />;\n  }\n};\n\nconst ActionTypeIcon: FC<{ type: string }> = ({ type }) => {\n  switch (type) {\n    case 'WEBHOOK':\n      return <Globe size={12} className=\"text-text-tertiary\" />;\n    case 'SCRIPT':\n      return <FileCode size={12} className=\"text-text-tertiary\" />;\n    default:\n      return <Terminal size={12} className=\"text-text-tertiary\" />;\n  }\n};\n\nconst statusLabel: Record<string, string> = {\n  pending: 'Pending',\n  running: 'Running',\n  success: 'Success',\n  error: 'Failed',\n};\n\nconst statusBadgeClass: Record<string, string> = {\n  pending: 'bg-bg-tertiary text-text-tertiary',\n  running: 'bg-action-primary-bg/10 text-action-primary-bg',\n  success: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  error: 'bg-red-500/10 text-red-600 dark:text-red-400',\n};\n\nexport const VibeDeckExecutionLog: FC<VibeDeckExecutionLogProps> = ({\n  entries,\n  expanded,\n  onToggleExpanded,\n  onClear,\n}) => {\n  const tr = useTr();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Auto-scroll to bottom when new entries arrive\n  useEffect(() => {\n    if (scrollRef.current && expanded) {\n      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;\n    }\n  }, [entries.length, expanded]);\n\n  if (entries.length === 0) return null;\n\n  const runningCount = entries.filter((e) => e.status === 'running').length;\n  const successCount = entries.filter((e) => e.status === 'success').length;\n  const errorCount = entries.filter((e) => e.status === 'error').length;\n\n  return (\n    <div className=\"rounded-lg border border-border-default bg-bg-surface overflow-hidden\">\n      {/* Header bar — always visible */}\n      <button\n        onClick={onToggleExpanded}\n        className=\"w-full flex items-center justify-between px-4 py-2.5 hover:bg-bg-secondary/50 transition-colors\"\n      >\n        <div className=\"flex items-center gap-3\">\n          <Terminal size={14} className=\"text-text-secondary\" />\n          <span className=\"text-sm font-medium text-text-primary\">\n            {tr('vibecontrols.vibedeck.executionLog.title', 'Execution Log')}\n          </span>\n          <div className=\"flex items-center gap-2\">\n            {runningCount > 0 && (\n              <span className=\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-action-primary-bg/10 text-action-primary-bg\">\n                <Loader2 size={10} className=\"animate-spin\" />\n                {runningCount}\n              </span>\n            )}\n            {successCount > 0 && (\n              <span className=\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-500/10 text-green-600 dark:text-green-400\">\n                <Check size={10} />\n                {successCount}\n              </span>\n            )}\n            {errorCount > 0 && (\n              <span className=\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-red-500/10 text-red-600 dark:text-red-400\">\n                <X size={10} />\n                {errorCount}\n              </span>\n            )}\n            <span className=\"text-xs text-text-tertiary\">{entries.length} total</span>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {expanded && (\n            <span\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n              }}\n              className=\"p-1 rounded hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary transition-colors\"\n              title=\"Clear log\"\n            >\n              <Trash2 size={12} />\n            </span>\n          )}\n          {expanded ? (\n            <ChevronDown size={14} className=\"text-text-tertiary\" />\n          ) : (\n            <ChevronUp size={14} className=\"text-text-tertiary\" />\n          )}\n        </div>\n      </button>\n\n      {/* Log entries — expandable */}\n      <AnimatePresence>\n        {expanded && (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"overflow-hidden\"\n          >\n            <div className=\"border-t border-border-default\" />\n            <div\n              ref={scrollRef}\n              className=\"max-h-[240px] overflow-y-auto divide-y divide-border-default/50\"\n            >\n              {entries.map((entry) => (\n                <div\n                  key={entry.id}\n                  className={`px-4 py-2.5 flex items-start gap-3 text-sm transition-colors ${\n                    entry.status === 'running' ? 'bg-action-primary-bg/5' : ''\n                  }`}\n                >\n                  {/* Status icon */}\n                  <div className=\"pt-0.5 shrink-0\">\n                    <StatusIcon status={entry.status} />\n                  </div>\n\n                  {/* Main content */}\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"font-medium text-text-primary truncate\">\n                        {entry.buttonLabel}\n                      </span>\n                      <span\n                        className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase ${statusBadgeClass[entry.status]}`}\n                      >\n                        {statusLabel[entry.status]}\n                      </span>\n                      <span className=\"flex items-center gap-1 text-text-tertiary\">\n                        <ActionTypeIcon type={entry.actionType} />\n                      </span>\n                    </div>\n\n                    {/* Command or detail */}\n                    {entry.command && (\n                      <div className=\"mt-0.5 text-xs text-text-tertiary font-mono truncate\">\n                        {entry.command}\n                      </div>\n                    )}\n\n                    {/* Output (collapsed, show first line) */}\n                    {entry.output && (\n                      <pre className=\"mt-1 text-[11px] font-mono text-text-secondary bg-bg-sunken rounded px-2 py-1 max-h-16 overflow-y-auto whitespace-pre-wrap\">\n                        {entry.output}\n                      </pre>\n                    )}\n\n                    {/* Error message */}\n                    {entry.error && (\n                      <div className=\"mt-1 text-xs text-red-500 font-mono\">{entry.error}</div>\n                    )}\n                  </div>\n\n                  {/* Timing */}\n                  <div className=\"shrink-0 text-right\">\n                    <div className=\"text-[10px] text-text-tertiary\">\n                      {formatTime(entry.startedAt)}\n                    </div>\n                    <div className=\"text-[10px] text-text-tertiary font-mono\">\n                      {formatDuration(entry.startedAt, entry.completedAt)}\n                    </div>\n                    {entry.exitCode != null && entry.exitCode !== 0 && (\n                      <div className=\"text-[10px] text-red-500 font-mono\">\n                        exit {entry.exitCode}\n                      </div>\n                    )}\n                    {entry.webhookStatusCode != null && (\n                      <div\n                        className={`text-[10px] font-mono ${entry.webhookStatusCode >= 400 ? 'text-red-500' : 'text-text-tertiary'}`}\n                      >\n                        HTTP {entry.webhookStatusCode}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+interface VibeDeckFormData {
+    name: string;
+    description: string;
+    icon: string;
+    colorTheme: string;
+    gridColumns: number;
+    gridRows: number;
+    buttonSize: string;
+}
+interface VibeDeckFormProps {
+    initialData?: Partial<VibeDeckFormData>;
+    onSubmit: (data: VibeDeckFormData) => void;
+    onCancel: () => void;
+    isLoading: boolean;
+    title: string;
+}
+export declare const VibeDeckForm: FC<VibeDeckFormProps>;
+export {};
+//# sourceMappingURL=VibeDeckForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckForm.d.ts","sourceRoot":"","sources":["../../../src/components/vibedeck/VibeDeckForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAsBD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAoK9C,CAAC"}