@burdenoff/microfe-vibecontrols 2026.528.6 → 2026.528.8

package/dist/components/shared/AgentSetupBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentSetupBanner.js","names":[],"sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Download, Copy, Check, ExternalLink, X, Terminal } from 'lucide-react';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { getProfileScopedKey } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { InstallTabs } from './InstallTabs';\n\ninterface AgentSetupBannerProps {\n  /** Compact mode shows a single-line banner; full mode shows a multi-step card */\n  variant?: 'compact' | 'full';\n  /** Allow the banner to be dismissed */\n  dismissible?: boolean;\n  /** Storage key for dismissed state */\n  dismissKey?: string;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nconst NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\n\n/**\n * Build the quick-install one-liner using the live host so the command shown\n * to the user reflects the environment they are actually on (local dev,\n * alpha, prod). InstallTabs uses the same `resolveHost()` shape — keep them\n * aligned by reading from `window.__VIBECONTROLS_HOST__` first, then\n * falling back to `window.location.host`.\n */\nfunction getQuickInstallCommand(): string {\n  if (typeof window === 'undefined') {\n    return 'curl -fsSL https://app.vibecontrols.com/install | bash';\n  }\n  const injected = (window as { __VIBECONTROLS_HOST__?: string }).__VIBECONTROLS_HOST__;\n  const host = injected ?? window.location.host;\n  return `curl -fsSL https://${host}/install | bash`;\n}\n\n/**\n * Reusable banner/card prompting users to install the VibeControls Agent CLI.\n * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)\n *\n * The full variant mirrors the Getting Started page's tabbed install widget\n * (`InstallTabs`) so users see a single consistent install flow wherever\n * the banner shows up.\n */\nexport function AgentSetupBanner({\n  variant = 'compact',\n  dismissible = true,\n  dismissKey = 'vibecontrols-setup-banner-dismissed',\n  className = '',\n}: AgentSetupBannerProps) {\n  const tr = useTr();\n  const handleNavigate = useVibeNavigate();\n  const quickInstall = useMemo(() => getQuickInstallCommand(), []);\n  const [copied, setCopied] = useState(false);\n  const [dismissed, setDismissed] = useState(() => {\n    try {\n      return localStorage.getItem(getProfileScopedKey(dismissKey)) === 'true';\n    } catch {\n      return false;\n    }\n  });\n\n  const handleCopy = useCallback(async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = text;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  }, []);\n\n  const handleDismiss = useCallback(() => {\n    setDismissed(true);\n    try {\n      localStorage.setItem(getProfileScopedKey(dismissKey), 'true');\n    } catch {\n      // ignore\n    }\n  }, [dismissKey]);\n\n  const bannerTransition = { duration: 0.3, ease: [0.4, 0, 0.2, 1] as const };\n\n  // ─── Compact variant: single-line info banner ─────────────────────────\n  if (variant === 'compact') {\n    return (\n      <AnimatePresence>\n        {!dismissed && (\n          <motion.div\n            initial={{ opacity: 0, y: -8, height: 0 }}\n            animate={{ opacity: 1, y: 0, height: 'auto' }}\n            exit={{ opacity: 0, y: -8, height: 0 }}\n            transition={bannerTransition}\n            className={`relative flex flex-col items-start gap-3 px-4 py-3 bg-accent-purple-subtle border border-accent-purple/20 rounded-lg sm:flex-row sm:items-center ${className}`}\n          >\n            <Download className=\"size-5 text-accent-purple flex-shrink-0\" />\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.installPrompt',\n                  'Install the VibeControls Agent CLI to get started'\n                )}\n              </span>\n              <code\n                className=\"inline-flex min-w-0 max-w-full items-center gap-1.5 rounded border border-border-default bg-bg-sunken px-2.5 py-1 font-mono text-xs text-text-primary transition-colors hover:bg-bg-elevated\"\n                onClick={() => handleCopy(quickInstall)}\n                title={tr('vibecontrols.shared.agentSetupBanner.clickToCopy', 'Click to copy')}\n              >\n                <Terminal className=\"size-3\" />\n                <span className=\"min-w-0 break-all\">{quickInstall}</span>\n                {copied ? (\n                  <Check className=\"size-3 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"size-3 text-text-muted\" />\n                )}\n              </code>\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"text-sm text-accent-purple hover:underline flex items-center gap-1\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.setupGuide', 'Setup guide')}{' '}\n                <ExternalLink className=\"size-3\" />\n              </button>\n            </div>\n            {dismissible && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors\"\n                title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n\n  // ─── Full variant: tabbed install card (mirrors Getting Started) ──────\n  return (\n    <AnimatePresence>\n      {!dismissed && (\n        <motion.div\n          initial={{ opacity: 0, y: -8, height: 0 }}\n          animate={{ opacity: 1, y: 0, height: 'auto' }}\n          exit={{ opacity: 0, y: -8, height: 0 }}\n          transition={bannerTransition}\n          className={`relative border border-accent-purple/20 bg-accent-purple-subtle rounded-lg overflow-hidden ${className}`}\n        >\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              className=\"absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10\"\n              title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n\n          <div className=\"p-5 sm:p-6\">\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"flex-shrink-0 size-10 rounded-lg bg-accent-purple/10 flex items-center justify-center\">\n                <Download className=\"size-5 text-accent-purple\" />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold text-text-primary\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.title',\n                    'Get Started with VibeControls Agent'\n                  )}\n                </h3>\n                <p className=\"text-sm text-text-secondary mt-0.5\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.description',\n                    'Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.'\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Tabbed install widget mirrors the Getting Started page */}\n            <div className=\"ml-0 sm:ml-13\">\n              <InstallTabs compact />\n            </div>\n\n            {/* Actions */}\n            <div className=\"flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13\">\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm bg-accent-purple text-text-inverse rounded-md hover:bg-accent-purple/90 transition-colors\"\n              >\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.viewFullSetupGuide',\n                  'View full setup guide'\n                )}\n                <ExternalLink className=\"size-3.5\" />\n              </button>\n              <a\n                href={NPM_URL}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm border border-border-default text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.npmPackage', 'npm package')}\n                <ExternalLink className=\"size-3.5\" />\n              </a>\n            </div>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgentSetupBanner.js","names":[],"sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Download, Copy, Check, ExternalLink, X, Terminal } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { getProfileScopedKey } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { InstallTabs } from './InstallTabs';\n\ninterface AgentSetupBannerProps {\n  /** Compact mode shows a single-line banner; full mode shows a multi-step card */\n  variant?: 'compact' | 'full';\n  /** Allow the banner to be dismissed */\n  dismissible?: boolean;\n  /** Storage key for dismissed state */\n  dismissKey?: string;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nconst NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\n\n/**\n * Build the quick-install one-liner using the live host so the command shown\n * to the user reflects the environment they are actually on (local dev,\n * alpha, prod). InstallTabs uses the same `resolveHost()` shape — keep them\n * aligned by reading from `window.__VIBECONTROLS_HOST__` first, then\n * falling back to `window.location.host`.\n */\nfunction getQuickInstallCommand(): string {\n  if (typeof window === 'undefined') {\n    return 'curl -fsSL https://app.vibecontrols.com/install | bash';\n  }\n  const injected = (window as { __VIBECONTROLS_HOST__?: string }).__VIBECONTROLS_HOST__;\n  const host = injected ?? window.location.host;\n  return `curl -fsSL https://${host}/install | bash`;\n}\n\n/**\n * Reusable banner/card prompting users to install the VibeControls Agent CLI.\n * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)\n *\n * The full variant mirrors the Getting Started page's tabbed install widget\n * (`InstallTabs`) so users see a single consistent install flow wherever\n * the banner shows up.\n */\nexport function AgentSetupBanner({\n  variant = 'compact',\n  dismissible = true,\n  dismissKey = 'vibecontrols-setup-banner-dismissed',\n  className = '',\n}: AgentSetupBannerProps) {\n  const tr = useTr();\n  const handleNavigate = useVibeNavigate();\n  const quickInstall = useMemo(() => getQuickInstallCommand(), []);\n  const [copied, setCopied] = useState(false);\n  const [dismissed, setDismissed] = useState(() => {\n    try {\n      return localStorage.getItem(getProfileScopedKey(dismissKey)) === 'true';\n    } catch {\n      return false;\n    }\n  });\n\n  const handleCopy = useCallback(async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = text;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  }, []);\n\n  const handleDismiss = useCallback(() => {\n    setDismissed(true);\n    try {\n      localStorage.setItem(getProfileScopedKey(dismissKey), 'true');\n    } catch {\n      // ignore\n    }\n  }, [dismissKey]);\n\n  const bannerTransition = { duration: 0.3, ease: [0.4, 0, 0.2, 1] as const };\n\n  // ─── Compact variant: single-line info banner ─────────────────────────\n  if (variant === 'compact') {\n    return (\n      <AnimatePresence>\n        {!dismissed && (\n          <motion.div\n            initial={{ opacity: 0, y: -8, height: 0 }}\n            animate={{ opacity: 1, y: 0, height: 'auto' }}\n            exit={{ opacity: 0, y: -8, height: 0 }}\n            transition={bannerTransition}\n            className={`relative flex flex-col items-start gap-3 px-4 py-3 bg-accent-purple-subtle border border-accent-purple/20 rounded-lg sm:flex-row sm:items-center ${className}`}\n          >\n            <Download className=\"size-5 text-accent-purple flex-shrink-0\" />\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.installPrompt',\n                  'Install the VibeControls Agent CLI to get started'\n                )}\n              </span>\n              <code\n                className=\"inline-flex min-w-0 max-w-full items-center gap-1.5 rounded border border-border-default bg-bg-sunken px-2.5 py-1 font-mono text-xs text-text-primary transition-colors hover:bg-bg-elevated\"\n                onClick={() => handleCopy(quickInstall)}\n                title={tr('vibecontrols.shared.agentSetupBanner.clickToCopy', 'Click to copy')}\n              >\n                <Terminal className=\"size-3\" />\n                <span className=\"min-w-0 break-all\">{quickInstall}</span>\n                {copied ? (\n                  <Check className=\"size-3 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"size-3 text-text-muted\" />\n                )}\n              </code>\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"text-sm text-accent-purple hover:underline flex items-center gap-1\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.setupGuide', 'Setup guide')}{' '}\n                <ExternalLink className=\"size-3\" />\n              </button>\n            </div>\n            {dismissible && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors\"\n                title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n\n  // ─── Full variant: tabbed install card (mirrors Getting Started) ──────\n  return (\n    <AnimatePresence>\n      {!dismissed && (\n        <motion.div\n          initial={{ opacity: 0, y: -8, height: 0 }}\n          animate={{ opacity: 1, y: 0, height: 'auto' }}\n          exit={{ opacity: 0, y: -8, height: 0 }}\n          transition={bannerTransition}\n          className={`relative border border-accent-purple/20 bg-accent-purple-subtle rounded-lg overflow-hidden ${className}`}\n        >\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              className=\"absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10\"\n              title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n\n          <div className=\"p-5 sm:p-6\">\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"flex-shrink-0 size-10 rounded-lg bg-accent-purple/10 flex items-center justify-center\">\n                <Download className=\"size-5 text-accent-purple\" />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold text-text-primary\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.title',\n                    'Get Started with VibeControls Agent'\n                  )}\n                </h3>\n                <p className=\"text-sm text-text-secondary mt-0.5\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.description',\n                    'Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.'\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Tabbed install widget mirrors the Getting Started page */}\n            <div className=\"ml-0 sm:ml-13\">\n              <InstallTabs compact />\n            </div>\n\n            {/* Actions */}\n            <div className=\"flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13\">\n              <Button\n                variant=\"default\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"gap-2\"\n              >\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.viewFullSetupGuide',\n                  'View full setup guide'\n                )}\n                <ExternalLink className=\"size-3.5\" />\n              </Button>\n              <Button variant=\"outline\" asChild className=\"gap-2\">\n                <a href={NPM_URL} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {tr('vibecontrols.shared.agentSetupBanner.npmPackage', 'npm package')}\n                  <ExternalLink className=\"size-3.5\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/LinkToVibePanel.js

@@ -0,0 +1,97 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useListVibesQuery as t } from "../../generated/wspace-operations.js";
+import { useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/shared/LinkToVibePanel.tsx
+function a({ value: a, onChange: o, label: s, disabled: c = !1 }) {
+	let l = e(), { data: u, loading: d } = t({
+		variables: { pagination: { limit: 200 } },
+		fetchPolicy: "cache-first"
+	}), f = n(() => (u?.vibes?.items ?? []).map((e) => ({
+		id: e.id,
+		name: e.name
+	})), [u?.vibes?.items]), p = (e) => {
+		o({
+			vibeId: e,
+			visibility: e ? a.visibility : "PRIVATE"
+		});
+	}, m = (e) => {
+		o({
+			...a,
+			visibility: e
+		});
+	};
+	return /* @__PURE__ */ i("fieldset", {
+		disabled: c,
+		className: "space-y-3 rounded-md border border-border-default bg-bg-surface p-3",
+		children: [
+			/* @__PURE__ */ r("legend", {
+				className: "px-1 text-sm font-medium text-text-secondary",
+				children: s || l("vibecontrols.linkToVibe.title", "Link to Vibe (optional)")
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "text-xs text-text-tertiary",
+				children: l("vibecontrols.linkToVibe.description", "Associate this entity with a vibe so it shows up under the vibe’s related tabs.")
+			}),
+			/* @__PURE__ */ i("select", {
+				value: a.vibeId ?? "",
+				onChange: (e) => p(e.target.value === "" ? null : e.target.value),
+				"aria-label": l("vibecontrols.linkToVibe.pickVibeAria", "Pick a vibe to link"),
+				className: "w-full rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-action-primary-bg",
+				children: [/* @__PURE__ */ r("option", {
+					value: "",
+					children: d ? l("vibecontrols.linkToVibe.loadingVibes", "Loading vibes…") : l("vibecontrols.linkToVibe.pickVibe", "Pick a vibe to link…")
+				}), f.map((e) => /* @__PURE__ */ r("option", {
+					value: e.id,
+					children: e.name
+				}, e.id))]
+			}),
+			a.vibeId && /* @__PURE__ */ i("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-xs font-medium text-text-secondary",
+					children: l("vibecontrols.linkToVibe.visibilityLabel", "Who can see it")
+				}), /* @__PURE__ */ i("div", {
+					role: "radiogroup",
+					"aria-label": l("vibecontrols.linkToVibe.visibilityLabel", "Who can see it"),
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ i("label", {
+						className: "flex cursor-pointer items-start gap-2 text-sm",
+						children: [/* @__PURE__ */ r("input", {
+							type: "radio",
+							name: "link-to-vibe-visibility",
+							value: "PRIVATE",
+							checked: a.visibility === "PRIVATE",
+							onChange: () => m("PRIVATE"),
+							className: "mt-1"
+						}), /* @__PURE__ */ r("span", {
+							className: "text-text-primary",
+							children: l("vibecontrols.linkToVibe.private", "Private to me")
+						})]
+					}), /* @__PURE__ */ i("label", {
+						className: "flex cursor-pointer items-start gap-2 text-sm",
+						children: [/* @__PURE__ */ r("input", {
+							type: "radio",
+							name: "link-to-vibe-visibility",
+							value: "SHARED_WITH_VIBE",
+							checked: a.visibility === "SHARED_WITH_VIBE",
+							onChange: () => m("SHARED_WITH_VIBE"),
+							className: "mt-1"
+						}), /* @__PURE__ */ r("span", {
+							className: "text-text-primary",
+							children: l("vibecontrols.linkToVibe.shared", "Shared with everyone who has access to this vibe")
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}
+var o = {
+	vibeId: null,
+	visibility: "PRIVATE"
+};
+//#endregion
+export { o as LINK_TO_VIBE_DEFAULT, a as LinkToVibePanel };
+
+//# sourceMappingURL=LinkToVibePanel.js.map

package/dist/components/shared/LinkToVibePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkToVibePanel.js","names":[],"sources":["../../../src/components/shared/LinkToVibePanel.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useListVibesQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Visibility for an entity that links to a vibe.\n *\n * - `PRIVATE`: only the creator can see it.\n * - `SHARED_WITH_VIBE`: anyone with access to the linked vibe can see it.\n *\n * Mirrors the proposed `EntityVisibility` enum on the wspace-vibecontrols-svc\n * schema. If the schema does not yet define this enum, callers should drop\n * the field from their mutation input (see the TODO in each form).\n */\nexport type LinkToVibeVisibility = 'PRIVATE' | 'SHARED_WITH_VIBE';\n\nexport interface LinkToVibeValue {\n  vibeId: string | null;\n  visibility: LinkToVibeVisibility;\n}\n\ninterface LinkToVibePanelProps {\n  value: LinkToVibeValue;\n  onChange: (value: LinkToVibeValue) => void;\n  /** Optional label override */\n  label?: string;\n  /** Disable the panel entirely (e.g. while submitting). */\n  disabled?: boolean;\n}\n\n/**\n * Optional \"Link to Vibe\" + visibility selector reusable across every entity\n * create form (VibeDeck / Action / Tunnel / Sandbox / AiPrompt / ScheduledJob).\n *\n * Forms thread the value into their mutation input as `vibeId` + `visibility`.\n * If the underlying schema does not yet define either field, the form should\n * omit it from the mutation; the resolver will pick a sensible default.\n */\nexport function LinkToVibePanel({\n  value,\n  onChange,\n  label,\n  disabled = false,\n}: LinkToVibePanelProps) {\n  const tr = useTr();\n  const { data, loading } = useListVibesQuery({\n    variables: { pagination: { limit: 200 } },\n    fetchPolicy: 'cache-first',\n  });\n\n  const vibeOptions = useMemo(() => {\n    const items = data?.vibes?.items ?? [];\n    return items.map((v: { id: string; name: string }) => ({ id: v.id, name: v.name }));\n  }, [data?.vibes?.items]);\n\n  const handleVibeChange = (vibeId: string | null) => {\n    onChange({ vibeId, visibility: vibeId ? value.visibility : 'PRIVATE' });\n  };\n\n  const handleVisibilityChange = (visibility: LinkToVibeVisibility) => {\n    onChange({ ...value, visibility });\n  };\n\n  return (\n    <fieldset\n      disabled={disabled}\n      className=\"space-y-3 rounded-md border border-border-default bg-bg-surface p-3\"\n    >\n      <legend className=\"px-1 text-sm font-medium text-text-secondary\">\n        {label || tr('vibecontrols.linkToVibe.title', 'Link to Vibe (optional)')}\n      </legend>\n      <p className=\"text-xs text-text-tertiary\">\n        {tr(\n          'vibecontrols.linkToVibe.description',\n          'Associate this entity with a vibe so it shows up under the vibe’s related tabs.'\n        )}\n      </p>\n\n      <select\n        value={value.vibeId ?? ''}\n        onChange={(e) => handleVibeChange(e.target.value === '' ? null : e.target.value)}\n        aria-label={tr('vibecontrols.linkToVibe.pickVibeAria', 'Pick a vibe to link')}\n        className=\"w-full rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n      >\n        <option value=\"\">\n          {loading\n            ? tr('vibecontrols.linkToVibe.loadingVibes', 'Loading vibes…')\n            : tr('vibecontrols.linkToVibe.pickVibe', 'Pick a vibe to link…')}\n        </option>\n        {vibeOptions.map((opt: { id: string; name: string }) => (\n          <option key={opt.id} value={opt.id}>\n            {opt.name}\n          </option>\n        ))}\n      </select>\n\n      {value.vibeId && (\n        <div className=\"space-y-2\">\n          <p className=\"text-xs font-medium text-text-secondary\">\n            {tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n          </p>\n          <div\n            role=\"radiogroup\"\n            aria-label={tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n            className=\"space-y-1.5\"\n          >\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"PRIVATE\"\n                checked={value.visibility === 'PRIVATE'}\n                onChange={() => handleVisibilityChange('PRIVATE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr('vibecontrols.linkToVibe.private', 'Private to me')}\n              </span>\n            </label>\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"SHARED_WITH_VIBE\"\n                checked={value.visibility === 'SHARED_WITH_VIBE'}\n                onChange={() => handleVisibilityChange('SHARED_WITH_VIBE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr(\n                  'vibecontrols.linkToVibe.shared',\n                  'Shared with everyone who has access to this vibe'\n                )}\n              </span>\n            </label>\n          </div>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport const LINK_TO_VIBE_DEFAULT: LinkToVibeValue = {\n  vibeId: null,\n  visibility: 'PRIVATE',\n};\n"],"mappings":";;;;;AAsCA,SAAgB,EAAgB,EAC9B,UACA,aACA,UACA,cAAW,MACY;CACvB,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,eAAY,EAAkB;EAC1C,WAAW,EAAE,YAAY,EAAE,OAAO,KAAK,EAAE;EACzC,aAAa;EACd,CAAC,EAEI,IAAc,SACJ,GAAM,OAAO,SAAS,EAAE,EACzB,KAAK,OAAqC;EAAE,IAAI,EAAE;EAAI,MAAM,EAAE;EAAM,EAAE,EAClF,CAAC,GAAM,OAAO,MAAM,CAAC,EAElB,KAAoB,MAA0B;AAClD,IAAS;GAAE;GAAQ,YAAY,IAAS,EAAM,aAAa;GAAW,CAAC;IAGnE,KAA0B,MAAqC;AACnE,IAAS;GAAE,GAAG;GAAO;GAAY,CAAC;;AAGpC,QACE,kBAAC,YAAD;EACY;EACV,WAAU;YAFZ;GAIE,kBAAC,UAAD;IAAQ,WAAU;cACf,KAAS,EAAG,iCAAiC,0BAA0B;IACjE,CAAA;GACT,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,uCACA,kFACD;IACC,CAAA;GAEJ,kBAAC,UAAD;IACE,OAAO,EAAM,UAAU;IACvB,WAAW,MAAM,EAAiB,EAAE,OAAO,UAAU,KAAK,OAAO,EAAE,OAAO,MAAM;IAChF,cAAY,EAAG,wCAAwC,sBAAsB;IAC7E,WAAU;cAJZ,CAME,kBAAC,UAAD;KAAQ,OAAM;eACX,IACG,EAAG,wCAAwC,iBAAiB,GAC5D,EAAG,oCAAoC,uBAAuB;KAC3D,CAAA,EACR,EAAY,KAAK,MAChB,kBAAC,UAAD;KAAqB,OAAO,EAAI;eAC7B,EAAI;KACE,EAFI,EAAI,GAER,CACT,CACK;;GAER,EAAM,UACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,2CAA2C,iBAAiB;KAC9D,CAAA,EACJ,kBAAC,OAAD;KACE,MAAK;KACL,cAAY,EAAG,2CAA2C,iBAAiB;KAC3E,WAAU;eAHZ,CAKE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,UAAU;OACjD,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,mCAAmC,gBAAgB;OAClD,CAAA,CACD;SACR,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,mBAAmB;OAC1D,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EACC,kCACA,mDACD;OACI,CAAA,CACD;QACJ;OACF;;GAEC;;;AAIf,IAAa,IAAwC;CACnD,QAAQ;CACR,YAAY;CACb"}

package/dist/components/shared/index.js

@@ -14,6 +14,7 @@ import "./Card.js";
 import "./StatCard.js";
 import "./InstallTabs.js";
 import "./AgentSetupBanner.js";
+import "./LinkToVibePanel.js";
 import "./GetHelpButton.js";
 import "./SearchableSelect.js";
 import "./SessionNotificationBanner.js";

package/dist/components/templates/TemplateWizard.js

@@ -278,12 +278,12 @@ var m = ({ templateName: m, variables: h, sourceRepoUrl: g, githubConnections: _
 										className: "flex items-start gap-3",
 										children: [g ? /* @__PURE__ */ u("div", {
 											className: "mt-0.5 flex-shrink-0 w-9 h-5 rounded-full bg-action-primary-bg relative opacity-70 cursor-not-allowed",
-											children: /* @__PURE__ */ u("span", { className: "absolute top-0.5 size-4 rounded-full bg-white shadow translate-x-4" })
+											children: /* @__PURE__ */ u("span", { className: "absolute top-0.5 size-4 rounded-full bg-bg-surface shadow translate-x-4" })
 										}) : /* @__PURE__ */ u("button", {
 											type: "button",
 											onClick: () => W({ enabled: !I.enabled }),
 											className: `mt-0.5 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${I.enabled ? "bg-action-primary-bg" : "bg-bg-sunken border border-border-default"}`,
-											children: /* @__PURE__ */ u("span", { className: `absolute top-0.5 size-4 rounded-full bg-white shadow transition-transform ${I.enabled ? "translate-x-4" : "translate-x-0.5"}` })
+											children: /* @__PURE__ */ u("span", { className: `absolute top-0.5 size-4 rounded-full bg-bg-surface shadow transition-transform ${I.enabled ? "translate-x-4" : "translate-x-0.5"}` })
 										}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("p", {
 											className: "text-sm font-medium text-text-primary flex items-center gap-2",
 											children: [

package/dist/components/templates/TemplateWizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateWizard.js","names":[],"sources":["../../../src/components/templates/TemplateWizard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Copy, ChevronRight, Check, X, Github, Eye, EyeOff } from 'lucide-react';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface GitHubConfig {\n  enabled: boolean;\n  /** When set, the backend resolves the token via the OAuth connection (token stays server-side) */\n  connectionId: string | null;\n  repoName: string;\n  visibility: 'public' | 'private';\n  scope: 'user' | 'org';\n  orgName: string;\n  /** Personal access token — only used when connectionId is null */\n  token: string;\n}\n\nexport interface GitHubConnection {\n  id: string;\n  name: string;\n  externalAccountEmail?: string | null;\n  externalAccountName?: string | null;\n  provider: { key: string; name: string };\n}\n\ninterface TemplateWizardProps {\n  templateName: string;\n  variables: TemplateVariable[];\n  /** URL of the template's source component repository, used for forking */\n  sourceRepoUrl?: string | null;\n  /** Active GitHub OAuth connections for the current workspace */\n  githubConnections?: GitHubConnection[];\n  onClose: () => void;\n  onSubmit: (data: {\n    name: string;\n    description: string;\n    variableValues: Record<string, unknown>;\n    githubConfig: GitHubConfig | null;\n  }) => Promise<void>;\n}\n\nconst inputCls =\n  'w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-action-primary-bg text-sm';\n\nfunction toKebab(s: string) {\n  return s\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '');\n}\n\nexport const TemplateWizard: FC<TemplateWizardProps> = ({\n  templateName,\n  variables,\n  sourceRepoUrl,\n  githubConnections = [],\n  onClose,\n  onSubmit,\n}) => {\n  const hasVariables = variables.length > 0;\n\n  // Steps: 0=BasicInfo, 1=Variables(if any), N-1=GitHub, N=Review\n  const steps = [\n    'Basic Info',\n    ...(hasVariables ? ['Configure Variables'] : []),\n    'GitHub Repo',\n    'Review',\n  ];\n  const totalSteps = steps.length;\n  const githubStep = hasVariables ? 2 : 1;\n  const reviewStep = hasVariables ? 3 : 2;\n\n  const [step, setStep] = useState(0);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [varValues, setVarValues] = useState<Record<string, string>>(() => {\n    const init: Record<string, string> = {};\n    for (const v of variables) init[v.name] = v.default || '';\n    return init;\n  });\n\n  const hasConnections = githubConnections.length > 0;\n  const [githubAuthMode, setGithubAuthMode] = useState<'connection' | 'pat'>(\n    hasConnections ? 'connection' : 'pat'\n  );\n  const [github, setGithub] = useState<GitHubConfig>({\n    enabled: !!sourceRepoUrl,\n    connectionId: hasConnections ? githubConnections[0].id : null,\n    repoName: '',\n    visibility: 'private',\n    scope: 'user',\n    orgName: '',\n    token: '',\n  });\n\n  const [showToken, setShowToken] = useState(false);\n\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const updateGithub = (patch: Partial<GitHubConfig>) => setGithub((g) => ({ ...g, ...patch }));\n\n  // Keep repoName in sync with component name (only if user hasn't manually changed it)\n  const [repoNameTouched, setRepoNameTouched] = useState(false);\n\n  const handleNameChange = (v: string) => {\n    setName(v);\n    if (!repoNameTouched) {\n      updateGithub({ repoName: toKebab(v) });\n    }\n  };\n\n  const canProceed = (): boolean => {\n    if (step === 0) return name.trim().length > 0;\n    if (step === 1 && hasVariables) {\n      return variables.filter((v) => v.required).every((v) => varValues[v.name]?.trim());\n    }\n    if (step === githubStep) {\n      if (sourceRepoUrl && !github.enabled) return false;\n      if (github.enabled) {\n        if (!github.repoName.trim()) return false;\n        if (github.scope === 'org' && !github.orgName.trim()) return false;\n        if (githubAuthMode === 'connection') {\n          if (!hasConnections) return false;\n        } else {\n          if (!github.token.trim()) return false;\n        }\n      }\n    }\n    return true;\n  };\n\n  const next = () => {\n    if (!canProceed()) {\n      if (step === 0) setError('Component name is required');\n      else if (step === 1 && hasVariables) setError('Please fill in all required fields');\n      else if (step === githubStep)\n        setError(\n          sourceRepoUrl\n            ? 'A GitHub repository is required to fork this template — enable it and fill in the details'\n            : 'Repo name, org (if applicable), and token are required to create a GitHub repo'\n        );\n      return;\n    }\n    setError(null);\n    setStep((s) => Math.min(s + 1, totalSteps - 1));\n  };\n\n  const back = () => setStep((s) => Math.max(s - 1, 0));\n\n  const handleSubmit = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const variableValues: Record<string, unknown> = {};\n      for (const v of variables) {\n        const val = varValues[v.name];\n        if (val !== undefined && val !== '') {\n          if (v.type === 'number') variableValues[v.name] = Number(val);\n          else if (v.type === 'boolean') variableValues[v.name] = val === 'true';\n          else variableValues[v.name] = val;\n        }\n      }\n      await onSubmit({\n        name,\n        description,\n        variableValues,\n        githubConfig: github.enabled ? github : null,\n      });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create component');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n      style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        className=\"bg-bg-surface rounded-lg w-full max-w-lg shadow-xl\"\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n          <h2 className=\"text-base font-semibold text-text-primary flex items-center gap-2\">\n            <Copy className=\"size-4 text-action-primary-bg\" />\n            Use Template: <span className=\"text-action-primary-bg ml-1\">{templateName}</span>\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n\n        {/* Step pills */}\n        <div className=\"px-6 pt-4\">\n          <div className=\"flex items-center gap-2 overflow-x-auto pb-1\">\n            {steps.map((label, i) => (\n              <div key={i} className=\"flex items-center gap-2 flex-shrink-0\">\n                <div\n                  className={`flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${\n                    i < step\n                      ? 'bg-status-success-bg text-status-success-text'\n                      : i === step\n                        ? 'bg-action-primary-bg text-action-primary-text'\n                        : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {i < step ? <Check className=\"size-3\" /> : i + 1}\n                </div>\n                <span\n                  className={`text-xs ${i === step ? 'text-text-primary font-medium' : 'text-text-muted'}`}\n                >\n                  {label}\n                </span>\n                {i < steps.length - 1 && (\n                  <ChevronRight className=\"size-3 text-text-muted flex-shrink-0\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Body */}\n        <div className=\"px-6 py-5 min-h-[220px] max-h-[60vh] overflow-y-auto\">\n          <AnimatePresence mode=\"wait\">\n            {/* Step 0 — Basic Info */}\n            {step === 0 && (\n              <motion.div\n                key=\"step0\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  This wizard creates a new <strong>component</strong> — a tracked entry in your\n                  software catalog — pre-configured from the{' '}\n                  <span className=\"font-medium text-text-primary\">{templateName}</span> blueprint.\n                </p>\n                <div>\n                  <label\n                    htmlFor=\"templatewizard-56\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Component Name <span className=\"text-status-error-text\">*</span>\n                  </label>\n                  <input\n                    id=\"templatewizard-56\"\n                    aria-label=\"my-new-service\"\n                    className={inputCls}\n                    placeholder=\"my-new-service\"\n                    value={name}\n                    onChange={(e) => handleNameChange(e.target.value)}\n                  />\n                  <p className=\"mt-1 text-xs text-text-muted\">\n                    Name of the new component created from this template.\n                  </p>\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"templatewizard-55\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Description\n                  </label>\n                  <textarea\n                    id=\"templatewizard-55\"\n                    aria-label=\"What does this component do?\"\n                    className={`${inputCls} resize-none`}\n                    rows={3}\n                    placeholder=\"What does this component do?\"\n                    value={description}\n                    onChange={(e) => setDescription(e.target.value)}\n                  />\n                </div>\n              </motion.div>\n            )}\n\n            {/* Step 1 — Variables (if any) */}\n            {step === 1 && hasVariables && (\n              <motion.div\n                key=\"step1\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  Fill in the configuration values for this template.\n                </p>\n                {variables.map((v) => (\n                  <div key={v.name}>\n                    <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                      {v.title || v.name}\n                      {v.required && <span className=\"text-status-error-text ml-1\">*</span>}\n                    </label>\n                    {v.options.length > 0 ? (\n                      <select\n                        className={inputCls}\n                        value={varValues[v.name] || ''}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      >\n                        <option value=\"\">Select…</option>\n                        {v.options.map((opt) => (\n                          <option key={opt} value={opt}>\n                            {opt}\n                          </option>\n                        ))}\n                      </select>\n                    ) : v.type === 'boolean' ? (\n                      <select\n                        className={inputCls}\n                        value={varValues[v.name] || 'false'}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      >\n                        <option value=\"true\">Yes</option>\n                        <option value=\"false\">No</option>\n                      </select>\n                    ) : (\n                      <input\n                        aria-label=\"control\"\n                        className={inputCls}\n                        type={v.type === 'number' ? 'number' : 'text'}\n                        placeholder={v.placeholder || v.default || ''}\n                        value={varValues[v.name] || ''}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      />\n                    )}\n                  </div>\n                ))}\n              </motion.div>\n            )}\n\n            {/* GitHub step */}\n            {step === githubStep && (\n              <motion.div\n                key=\"stepGithub\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                {/* Source repo fork notice */}\n                {sourceRepoUrl && (\n                  <div className=\"flex items-start gap-2 p-3 bg-status-info-bg rounded-md text-xs text-status-info-text\">\n                    <Github className=\"size-4 flex-shrink-0 mt-0.5\" />\n                    <div>\n                      <p className=\"font-medium\">Source repository detected</p>\n                      <p className=\"mt-0.5 text-status-info-text/80 break-all\">{sourceRepoUrl}</p>\n                      <p className=\"mt-1\">\n                        Enabling GitHub will <strong>fork</strong> this repository into your new\n                        repo (with fallback to a new empty repo if the fork is unavailable).\n                      </p>\n                    </div>\n                  </div>\n                )}\n\n                <div className=\"flex items-start gap-3\">\n                  {sourceRepoUrl ? (\n                    <div className=\"mt-0.5 flex-shrink-0 w-9 h-5 rounded-full bg-action-primary-bg relative opacity-70 cursor-not-allowed\">\n                      <span className=\"absolute top-0.5 size-4 rounded-full bg-white shadow translate-x-4\" />\n                    </div>\n                  ) : (\n                    <button\n                      type=\"button\"\n                      onClick={() => updateGithub({ enabled: !github.enabled })}\n                      className={`mt-0.5 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${\n                        github.enabled\n                          ? 'bg-action-primary-bg'\n                          : 'bg-bg-sunken border border-border-default'\n                      }`}\n                    >\n                      <span\n                        className={`absolute top-0.5 size-4 rounded-full bg-white shadow transition-transform ${\n                          github.enabled ? 'translate-x-4' : 'translate-x-0.5'\n                        }`}\n                      />\n                    </button>\n                  )}\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n                      <Github className=\"size-4\" />\n                      {sourceRepoUrl\n                        ? 'Fork source & create GitHub repository'\n                        : 'Create a GitHub repository'}\n                      {sourceRepoUrl && (\n                        <span className=\"text-xs text-status-error-text font-normal\">Required</span>\n                      )}\n                    </p>\n                    <p className=\"text-xs text-text-muted mt-0.5\">\n                      {sourceRepoUrl\n                        ? 'Forks the template source repo and links it to the new component.'\n                        : 'Automatically creates a new GitHub repo and links it to the component.'}\n                    </p>\n                  </div>\n                </div>\n\n                {github.enabled && (\n                  <div className=\"space-y-3 pl-12\">\n                    <div>\n                      <label\n                        htmlFor=\"templatewizard-54\"\n                        className=\"block text-xs font-medium text-text-primary mb-1\"\n                      >\n                        Repository name <span className=\"text-status-error-text\">*</span>\n                      </label>\n                      <input\n                        id=\"templatewizard-54\"\n                        aria-label=\"my-new-service\"\n                        className={inputCls}\n                        value={github.repoName}\n                        onChange={(e) => {\n                          setRepoNameTouched(true);\n                          updateGithub({ repoName: e.target.value });\n                        }}\n                        placeholder=\"my-new-service\"\n                      />\n                    </div>\n\n                    <div className=\"grid grid-cols-2 gap-3\">\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-53\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Visibility\n                        </label>\n                        <select\n                          id=\"templatewizard-53\"\n                          className={inputCls}\n                          value={github.visibility}\n                          onChange={(e) =>\n                            updateGithub({\n                              visibility: e.target.value as GitHubConfig['visibility'],\n                            })\n                          }\n                        >\n                          <option value=\"private\">Private</option>\n                          <option value=\"public\">Public</option>\n                        </select>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-52\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Create under\n                        </label>\n                        <select\n                          id=\"templatewizard-52\"\n                          className={inputCls}\n                          value={github.scope}\n                          onChange={(e) =>\n                            updateGithub({ scope: e.target.value as GitHubConfig['scope'] })\n                          }\n                        >\n                          <option value=\"user\">My account</option>\n                          <option value=\"org\">Organization</option>\n                        </select>\n                      </div>\n                    </div>\n\n                    {github.scope === 'org' && (\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-51\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Organization name <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          id=\"templatewizard-51\"\n                          aria-label=\"my-org\"\n                          className={inputCls}\n                          value={github.orgName}\n                          onChange={(e) => updateGithub({ orgName: e.target.value })}\n                          placeholder=\"my-org\"\n                        />\n                      </div>\n                    )}\n\n                    {/* Auth method toggle — always visible */}\n                    <div>\n                      <label\n                        htmlFor=\"templatewizard-50\"\n                        className=\"block text-xs font-medium text-text-primary mb-2\"\n                      >\n                        Authentication <span className=\"text-status-error-text\">*</span>\n                      </label>\n                      <div className=\"flex rounded-md border border-border-default overflow-hidden mb-3\">\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setGithubAuthMode('connection');\n                            updateGithub({\n                              connectionId: githubConnections[0]?.id ?? null,\n                              token: '',\n                            });\n                          }}\n                          className={`flex-1 py-1.5 text-xs font-medium transition-colors ${\n                            githubAuthMode === 'connection'\n                              ? 'bg-action-primary-bg text-action-primary-text'\n                              : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n                          }`}\n                        >\n                          Connected Account\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setGithubAuthMode('pat');\n                            updateGithub({ connectionId: null });\n                          }}\n                          className={`flex-1 py-1.5 text-xs font-medium transition-colors border-l border-border-default ${\n                            githubAuthMode === 'pat'\n                              ? 'bg-action-primary-bg text-action-primary-text'\n                              : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n                          }`}\n                        >\n                          Personal Token\n                        </button>\n                      </div>\n\n                      {/* Connected account panel */}\n                      {githubAuthMode === 'connection' &&\n                        (hasConnections ? (\n                          <div className=\"space-y-2\">\n                            <select\n                              id=\"templatewizard-50\"\n                              className={inputCls}\n                              value={github.connectionId ?? githubConnections[0]?.id ?? ''}\n                              onChange={(e) => updateGithub({ connectionId: e.target.value })}\n                            >\n                              {githubConnections.map((conn) => (\n                                <option key={conn.id} value={conn.id}>\n                                  {conn.externalAccountEmail ||\n                                    conn.externalAccountName ||\n                                    conn.name}{' '}\n                                  — {conn.provider.name}\n                                </option>\n                              ))}\n                            </select>\n                            <p className=\"text-xs text-status-success-text\">\n                              Token resolved server-side — never exposed to the browser.\n                            </p>\n                          </div>\n                        ) : (\n                          <div className=\"p-3 bg-bg-sunken rounded-md text-xs text-text-secondary space-y-1\">\n                            <p>No GitHub accounts connected to this workspace.</p>\n                            <p>\n                              <a\n                                href=\"/vibecontrols/settings/integrations\"\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                className=\"text-action-primary-bg underline\"\n                              >\n                                Connect GitHub in Settings →\n                              </a>{' '}\n                              then come back here to use it.\n                            </p>\n                          </div>\n                        ))}\n\n                      {/* PAT panel */}\n                      {githubAuthMode === 'pat' && (\n                        <div>\n                          <div className=\"relative\">\n                            <input\n                              aria-label=\"ghp_••••••••••••••••••••\"\n                              className={`${inputCls} pr-10`}\n                              type={showToken ? 'text' : 'password'}\n                              value={github.token}\n                              onChange={(e) => updateGithub({ token: e.target.value })}\n                              placeholder=\"ghp_••••••••••••••••••••\"\n                              autoComplete=\"off\"\n                            />\n                            <button\n                              type=\"button\"\n                              onClick={() => setShowToken((v) => !v)}\n                              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary\"\n                            >\n                              {showToken ? (\n                                <EyeOff className=\"size-4\" />\n                              ) : (\n                                <Eye className=\"size-4\" />\n                              )}\n                            </button>\n                          </div>\n                          <p className=\"mt-1 text-xs text-text-muted\">\n                            Needs <code className=\"font-mono\">repo</code> scope.{' '}\n                            <a\n                              href=\"https://github.com/settings/tokens/new?scopes=repo&description=VibeControls+scaffolding\"\n                              target=\"_blank\"\n                              rel=\"noreferrer\"\n                              className=\"text-action-primary-bg underline\"\n                            >\n                              Generate one →\n                            </a>\n                          </p>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n\n                {!github.enabled && !sourceRepoUrl && (\n                  <p className=\"text-sm text-text-muted pl-12\">\n                    Skip this step — the component will be created without a linked repository. You\n                    can add a repository URL later in the component settings.\n                  </p>\n                )}\n              </motion.div>\n            )}\n\n            {/* Review step */}\n            {step === reviewStep && (\n              <motion.div\n                key=\"review\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  Review the details before creating your component.\n                </p>\n                <div className=\"bg-bg-sunken rounded-lg p-4 space-y-3 text-sm\">\n                  <div className=\"flex gap-3\">\n                    <span className=\"text-text-muted w-28 flex-shrink-0\">Name</span>\n                    <span className=\"text-text-primary font-medium\">{name}</span>\n                  </div>\n                  {description && (\n                    <div className=\"flex gap-3\">\n                      <span className=\"text-text-muted w-28 flex-shrink-0\">Description</span>\n                      <span className=\"text-text-primary\">{description}</span>\n                    </div>\n                  )}\n                  {hasVariables && variables.length > 0 && (\n                    <div className=\"pt-2 border-t border-border-default\">\n                      <p className=\"text-text-muted text-xs mb-2\">Variables</p>\n                      {variables.map((v) => (\n                        <div key={v.name} className=\"flex gap-3\">\n                          <span className=\"text-text-muted w-28 flex-shrink-0 truncate\">\n                            {v.title || v.name}\n                          </span>\n                          <span className=\"text-text-primary font-mono text-xs\">\n                            {varValues[v.name] || (\n                              <span className=\"text-text-muted italic\">default</span>\n                            )}\n                          </span>\n                        </div>\n                      ))}\n                    </div>\n                  )}\n                  <div className=\"pt-2 border-t border-border-default flex gap-3\">\n                    <span className=\"text-text-muted w-28 flex-shrink-0\">GitHub repo</span>\n                    {github.enabled ? (\n                      <span className=\"text-text-primary font-mono text-xs\">\n                        {github.scope === 'org' ? github.orgName : 'personal'}/{github.repoName}{' '}\n                        <span className=\"text-text-muted\">({github.visibility})</span>\n                        {github.connectionId && (\n                          <span className=\"ml-2 text-status-success-text font-sans font-normal\">\n                            via connected account\n                          </span>\n                        )}\n                      </span>\n                    ) : (\n                      <span className=\"text-text-muted italic\">not creating</span>\n                    )}\n                  </div>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          {error && (\n            <div className=\"mt-3 p-3 bg-status-error-bg text-status-error-text text-sm rounded-md\">\n              {error}\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-t border-border-default\">\n          <button\n            type=\"button\"\n            onClick={step === 0 ? onClose : back}\n            disabled={loading}\n            className=\"px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n          >\n            {step === 0 ? 'Cancel' : 'Back'}\n          </button>\n          {step < reviewStep ? (\n            <button\n              type=\"button\"\n              onClick={next}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              Next\n              <ChevronRight className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={handleSubmit}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n            >\n              <Copy className=\"size-4\" />\n              {loading ? 'Creating...' : 'Create Component'}\n            </button>\n          )}\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TemplateWizard.js","names":[],"sources":["../../../src/components/templates/TemplateWizard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Copy, ChevronRight, Check, X, Github, Eye, EyeOff } from 'lucide-react';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface GitHubConfig {\n  enabled: boolean;\n  /** When set, the backend resolves the token via the OAuth connection (token stays server-side) */\n  connectionId: string | null;\n  repoName: string;\n  visibility: 'public' | 'private';\n  scope: 'user' | 'org';\n  orgName: string;\n  /** Personal access token — only used when connectionId is null */\n  token: string;\n}\n\nexport interface GitHubConnection {\n  id: string;\n  name: string;\n  externalAccountEmail?: string | null;\n  externalAccountName?: string | null;\n  provider: { key: string; name: string };\n}\n\ninterface TemplateWizardProps {\n  templateName: string;\n  variables: TemplateVariable[];\n  /** URL of the template's source component repository, used for forking */\n  sourceRepoUrl?: string | null;\n  /** Active GitHub OAuth connections for the current workspace */\n  githubConnections?: GitHubConnection[];\n  onClose: () => void;\n  onSubmit: (data: {\n    name: string;\n    description: string;\n    variableValues: Record<string, unknown>;\n    githubConfig: GitHubConfig | null;\n  }) => Promise<void>;\n}\n\nconst inputCls =\n  'w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-action-primary-bg text-sm';\n\nfunction toKebab(s: string) {\n  return s\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '');\n}\n\nexport const TemplateWizard: FC<TemplateWizardProps> = ({\n  templateName,\n  variables,\n  sourceRepoUrl,\n  githubConnections = [],\n  onClose,\n  onSubmit,\n}) => {\n  const hasVariables = variables.length > 0;\n\n  // Steps: 0=BasicInfo, 1=Variables(if any), N-1=GitHub, N=Review\n  const steps = [\n    'Basic Info',\n    ...(hasVariables ? ['Configure Variables'] : []),\n    'GitHub Repo',\n    'Review',\n  ];\n  const totalSteps = steps.length;\n  const githubStep = hasVariables ? 2 : 1;\n  const reviewStep = hasVariables ? 3 : 2;\n\n  const [step, setStep] = useState(0);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [varValues, setVarValues] = useState<Record<string, string>>(() => {\n    const init: Record<string, string> = {};\n    for (const v of variables) init[v.name] = v.default || '';\n    return init;\n  });\n\n  const hasConnections = githubConnections.length > 0;\n  const [githubAuthMode, setGithubAuthMode] = useState<'connection' | 'pat'>(\n    hasConnections ? 'connection' : 'pat'\n  );\n  const [github, setGithub] = useState<GitHubConfig>({\n    enabled: !!sourceRepoUrl,\n    connectionId: hasConnections ? githubConnections[0].id : null,\n    repoName: '',\n    visibility: 'private',\n    scope: 'user',\n    orgName: '',\n    token: '',\n  });\n\n  const [showToken, setShowToken] = useState(false);\n\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const updateGithub = (patch: Partial<GitHubConfig>) => setGithub((g) => ({ ...g, ...patch }));\n\n  // Keep repoName in sync with component name (only if user hasn't manually changed it)\n  const [repoNameTouched, setRepoNameTouched] = useState(false);\n\n  const handleNameChange = (v: string) => {\n    setName(v);\n    if (!repoNameTouched) {\n      updateGithub({ repoName: toKebab(v) });\n    }\n  };\n\n  const canProceed = (): boolean => {\n    if (step === 0) return name.trim().length > 0;\n    if (step === 1 && hasVariables) {\n      return variables.filter((v) => v.required).every((v) => varValues[v.name]?.trim());\n    }\n    if (step === githubStep) {\n      if (sourceRepoUrl && !github.enabled) return false;\n      if (github.enabled) {\n        if (!github.repoName.trim()) return false;\n        if (github.scope === 'org' && !github.orgName.trim()) return false;\n        if (githubAuthMode === 'connection') {\n          if (!hasConnections) return false;\n        } else {\n          if (!github.token.trim()) return false;\n        }\n      }\n    }\n    return true;\n  };\n\n  const next = () => {\n    if (!canProceed()) {\n      if (step === 0) setError('Component name is required');\n      else if (step === 1 && hasVariables) setError('Please fill in all required fields');\n      else if (step === githubStep)\n        setError(\n          sourceRepoUrl\n            ? 'A GitHub repository is required to fork this template — enable it and fill in the details'\n            : 'Repo name, org (if applicable), and token are required to create a GitHub repo'\n        );\n      return;\n    }\n    setError(null);\n    setStep((s) => Math.min(s + 1, totalSteps - 1));\n  };\n\n  const back = () => setStep((s) => Math.max(s - 1, 0));\n\n  const handleSubmit = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const variableValues: Record<string, unknown> = {};\n      for (const v of variables) {\n        const val = varValues[v.name];\n        if (val !== undefined && val !== '') {\n          if (v.type === 'number') variableValues[v.name] = Number(val);\n          else if (v.type === 'boolean') variableValues[v.name] = val === 'true';\n          else variableValues[v.name] = val;\n        }\n      }\n      await onSubmit({\n        name,\n        description,\n        variableValues,\n        githubConfig: github.enabled ? github : null,\n      });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create component');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n      style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        className=\"bg-bg-surface rounded-lg w-full max-w-lg shadow-xl\"\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n          <h2 className=\"text-base font-semibold text-text-primary flex items-center gap-2\">\n            <Copy className=\"size-4 text-action-primary-bg\" />\n            Use Template: <span className=\"text-action-primary-bg ml-1\">{templateName}</span>\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n\n        {/* Step pills */}\n        <div className=\"px-6 pt-4\">\n          <div className=\"flex items-center gap-2 overflow-x-auto pb-1\">\n            {steps.map((label, i) => (\n              <div key={i} className=\"flex items-center gap-2 flex-shrink-0\">\n                <div\n                  className={`flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${\n                    i < step\n                      ? 'bg-status-success-bg text-status-success-text'\n                      : i === step\n                        ? 'bg-action-primary-bg text-action-primary-text'\n                        : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {i < step ? <Check className=\"size-3\" /> : i + 1}\n                </div>\n                <span\n                  className={`text-xs ${i === step ? 'text-text-primary font-medium' : 'text-text-muted'}`}\n                >\n                  {label}\n                </span>\n                {i < steps.length - 1 && (\n                  <ChevronRight className=\"size-3 text-text-muted flex-shrink-0\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Body */}\n        <div className=\"px-6 py-5 min-h-[220px] max-h-[60vh] overflow-y-auto\">\n          <AnimatePresence mode=\"wait\">\n            {/* Step 0 — Basic Info */}\n            {step === 0 && (\n              <motion.div\n                key=\"step0\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  This wizard creates a new <strong>component</strong> — a tracked entry in your\n                  software catalog — pre-configured from the{' '}\n                  <span className=\"font-medium text-text-primary\">{templateName}</span> blueprint.\n                </p>\n                <div>\n                  <label\n                    htmlFor=\"templatewizard-56\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Component Name <span className=\"text-status-error-text\">*</span>\n                  </label>\n                  <input\n                    id=\"templatewizard-56\"\n                    aria-label=\"my-new-service\"\n                    className={inputCls}\n                    placeholder=\"my-new-service\"\n                    value={name}\n                    onChange={(e) => handleNameChange(e.target.value)}\n                  />\n                  <p className=\"mt-1 text-xs text-text-muted\">\n                    Name of the new component created from this template.\n                  </p>\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"templatewizard-55\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Description\n                  </label>\n                  <textarea\n                    id=\"templatewizard-55\"\n                    aria-label=\"What does this component do?\"\n                    className={`${inputCls} resize-none`}\n                    rows={3}\n                    placeholder=\"What does this component do?\"\n                    value={description}\n                    onChange={(e) => setDescription(e.target.value)}\n                  />\n                </div>\n              </motion.div>\n            )}\n\n            {/* Step 1 — Variables (if any) */}\n            {step === 1 && hasVariables && (\n              <motion.div\n                key=\"step1\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  Fill in the configuration values for this template.\n                </p>\n                {variables.map((v) => (\n                  <div key={v.name}>\n                    <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                      {v.title || v.name}\n                      {v.required && <span className=\"text-status-error-text ml-1\">*</span>}\n                    </label>\n                    {v.options.length > 0 ? (\n                      <select\n                        className={inputCls}\n                        value={varValues[v.name] || ''}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      >\n                        <option value=\"\">Select…</option>\n                        {v.options.map((opt) => (\n                          <option key={opt} value={opt}>\n                            {opt}\n                          </option>\n                        ))}\n                      </select>\n                    ) : v.type === 'boolean' ? (\n                      <select\n                        className={inputCls}\n                        value={varValues[v.name] || 'false'}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      >\n                        <option value=\"true\">Yes</option>\n                        <option value=\"false\">No</option>\n                      </select>\n                    ) : (\n                      <input\n                        aria-label=\"control\"\n                        className={inputCls}\n                        type={v.type === 'number' ? 'number' : 'text'}\n                        placeholder={v.placeholder || v.default || ''}\n                        value={varValues[v.name] || ''}\n                        onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n                      />\n                    )}\n                  </div>\n                ))}\n              </motion.div>\n            )}\n\n            {/* GitHub step */}\n            {step === githubStep && (\n              <motion.div\n                key=\"stepGithub\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                {/* Source repo fork notice */}\n                {sourceRepoUrl && (\n                  <div className=\"flex items-start gap-2 p-3 bg-status-info-bg rounded-md text-xs text-status-info-text\">\n                    <Github className=\"size-4 flex-shrink-0 mt-0.5\" />\n                    <div>\n                      <p className=\"font-medium\">Source repository detected</p>\n                      <p className=\"mt-0.5 text-status-info-text/80 break-all\">{sourceRepoUrl}</p>\n                      <p className=\"mt-1\">\n                        Enabling GitHub will <strong>fork</strong> this repository into your new\n                        repo (with fallback to a new empty repo if the fork is unavailable).\n                      </p>\n                    </div>\n                  </div>\n                )}\n\n                <div className=\"flex items-start gap-3\">\n                  {sourceRepoUrl ? (\n                    <div className=\"mt-0.5 flex-shrink-0 w-9 h-5 rounded-full bg-action-primary-bg relative opacity-70 cursor-not-allowed\">\n                      <span className=\"absolute top-0.5 size-4 rounded-full bg-bg-surface shadow translate-x-4\" />\n                    </div>\n                  ) : (\n                    <button\n                      type=\"button\"\n                      onClick={() => updateGithub({ enabled: !github.enabled })}\n                      className={`mt-0.5 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${\n                        github.enabled\n                          ? 'bg-action-primary-bg'\n                          : 'bg-bg-sunken border border-border-default'\n                      }`}\n                    >\n                      <span\n                        className={`absolute top-0.5 size-4 rounded-full bg-bg-surface shadow transition-transform ${\n                          github.enabled ? 'translate-x-4' : 'translate-x-0.5'\n                        }`}\n                      />\n                    </button>\n                  )}\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n                      <Github className=\"size-4\" />\n                      {sourceRepoUrl\n                        ? 'Fork source & create GitHub repository'\n                        : 'Create a GitHub repository'}\n                      {sourceRepoUrl && (\n                        <span className=\"text-xs text-status-error-text font-normal\">Required</span>\n                      )}\n                    </p>\n                    <p className=\"text-xs text-text-muted mt-0.5\">\n                      {sourceRepoUrl\n                        ? 'Forks the template source repo and links it to the new component.'\n                        : 'Automatically creates a new GitHub repo and links it to the component.'}\n                    </p>\n                  </div>\n                </div>\n\n                {github.enabled && (\n                  <div className=\"space-y-3 pl-12\">\n                    <div>\n                      <label\n                        htmlFor=\"templatewizard-54\"\n                        className=\"block text-xs font-medium text-text-primary mb-1\"\n                      >\n                        Repository name <span className=\"text-status-error-text\">*</span>\n                      </label>\n                      <input\n                        id=\"templatewizard-54\"\n                        aria-label=\"my-new-service\"\n                        className={inputCls}\n                        value={github.repoName}\n                        onChange={(e) => {\n                          setRepoNameTouched(true);\n                          updateGithub({ repoName: e.target.value });\n                        }}\n                        placeholder=\"my-new-service\"\n                      />\n                    </div>\n\n                    <div className=\"grid grid-cols-2 gap-3\">\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-53\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Visibility\n                        </label>\n                        <select\n                          id=\"templatewizard-53\"\n                          className={inputCls}\n                          value={github.visibility}\n                          onChange={(e) =>\n                            updateGithub({\n                              visibility: e.target.value as GitHubConfig['visibility'],\n                            })\n                          }\n                        >\n                          <option value=\"private\">Private</option>\n                          <option value=\"public\">Public</option>\n                        </select>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-52\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Create under\n                        </label>\n                        <select\n                          id=\"templatewizard-52\"\n                          className={inputCls}\n                          value={github.scope}\n                          onChange={(e) =>\n                            updateGithub({ scope: e.target.value as GitHubConfig['scope'] })\n                          }\n                        >\n                          <option value=\"user\">My account</option>\n                          <option value=\"org\">Organization</option>\n                        </select>\n                      </div>\n                    </div>\n\n                    {github.scope === 'org' && (\n                      <div>\n                        <label\n                          htmlFor=\"templatewizard-51\"\n                          className=\"block text-xs font-medium text-text-primary mb-1\"\n                        >\n                          Organization name <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          id=\"templatewizard-51\"\n                          aria-label=\"my-org\"\n                          className={inputCls}\n                          value={github.orgName}\n                          onChange={(e) => updateGithub({ orgName: e.target.value })}\n                          placeholder=\"my-org\"\n                        />\n                      </div>\n                    )}\n\n                    {/* Auth method toggle — always visible */}\n                    <div>\n                      <label\n                        htmlFor=\"templatewizard-50\"\n                        className=\"block text-xs font-medium text-text-primary mb-2\"\n                      >\n                        Authentication <span className=\"text-status-error-text\">*</span>\n                      </label>\n                      <div className=\"flex rounded-md border border-border-default overflow-hidden mb-3\">\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setGithubAuthMode('connection');\n                            updateGithub({\n                              connectionId: githubConnections[0]?.id ?? null,\n                              token: '',\n                            });\n                          }}\n                          className={`flex-1 py-1.5 text-xs font-medium transition-colors ${\n                            githubAuthMode === 'connection'\n                              ? 'bg-action-primary-bg text-action-primary-text'\n                              : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n                          }`}\n                        >\n                          Connected Account\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setGithubAuthMode('pat');\n                            updateGithub({ connectionId: null });\n                          }}\n                          className={`flex-1 py-1.5 text-xs font-medium transition-colors border-l border-border-default ${\n                            githubAuthMode === 'pat'\n                              ? 'bg-action-primary-bg text-action-primary-text'\n                              : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n                          }`}\n                        >\n                          Personal Token\n                        </button>\n                      </div>\n\n                      {/* Connected account panel */}\n                      {githubAuthMode === 'connection' &&\n                        (hasConnections ? (\n                          <div className=\"space-y-2\">\n                            <select\n                              id=\"templatewizard-50\"\n                              className={inputCls}\n                              value={github.connectionId ?? githubConnections[0]?.id ?? ''}\n                              onChange={(e) => updateGithub({ connectionId: e.target.value })}\n                            >\n                              {githubConnections.map((conn) => (\n                                <option key={conn.id} value={conn.id}>\n                                  {conn.externalAccountEmail ||\n                                    conn.externalAccountName ||\n                                    conn.name}{' '}\n                                  — {conn.provider.name}\n                                </option>\n                              ))}\n                            </select>\n                            <p className=\"text-xs text-status-success-text\">\n                              Token resolved server-side — never exposed to the browser.\n                            </p>\n                          </div>\n                        ) : (\n                          <div className=\"p-3 bg-bg-sunken rounded-md text-xs text-text-secondary space-y-1\">\n                            <p>No GitHub accounts connected to this workspace.</p>\n                            <p>\n                              <a\n                                href=\"/vibecontrols/settings/integrations\"\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                className=\"text-action-primary-bg underline\"\n                              >\n                                Connect GitHub in Settings →\n                              </a>{' '}\n                              then come back here to use it.\n                            </p>\n                          </div>\n                        ))}\n\n                      {/* PAT panel */}\n                      {githubAuthMode === 'pat' && (\n                        <div>\n                          <div className=\"relative\">\n                            <input\n                              aria-label=\"ghp_••••••••••••••••••••\"\n                              className={`${inputCls} pr-10`}\n                              type={showToken ? 'text' : 'password'}\n                              value={github.token}\n                              onChange={(e) => updateGithub({ token: e.target.value })}\n                              placeholder=\"ghp_••••••••••••••••••••\"\n                              autoComplete=\"off\"\n                            />\n                            <button\n                              type=\"button\"\n                              onClick={() => setShowToken((v) => !v)}\n                              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary\"\n                            >\n                              {showToken ? (\n                                <EyeOff className=\"size-4\" />\n                              ) : (\n                                <Eye className=\"size-4\" />\n                              )}\n                            </button>\n                          </div>\n                          <p className=\"mt-1 text-xs text-text-muted\">\n                            Needs <code className=\"font-mono\">repo</code> scope.{' '}\n                            <a\n                              href=\"https://github.com/settings/tokens/new?scopes=repo&description=VibeControls+scaffolding\"\n                              target=\"_blank\"\n                              rel=\"noreferrer\"\n                              className=\"text-action-primary-bg underline\"\n                            >\n                              Generate one →\n                            </a>\n                          </p>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n\n                {!github.enabled && !sourceRepoUrl && (\n                  <p className=\"text-sm text-text-muted pl-12\">\n                    Skip this step — the component will be created without a linked repository. You\n                    can add a repository URL later in the component settings.\n                  </p>\n                )}\n              </motion.div>\n            )}\n\n            {/* Review step */}\n            {step === reviewStep && (\n              <motion.div\n                key=\"review\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.15 }}\n                className=\"space-y-4\"\n              >\n                <p className=\"text-sm text-text-secondary\">\n                  Review the details before creating your component.\n                </p>\n                <div className=\"bg-bg-sunken rounded-lg p-4 space-y-3 text-sm\">\n                  <div className=\"flex gap-3\">\n                    <span className=\"text-text-muted w-28 flex-shrink-0\">Name</span>\n                    <span className=\"text-text-primary font-medium\">{name}</span>\n                  </div>\n                  {description && (\n                    <div className=\"flex gap-3\">\n                      <span className=\"text-text-muted w-28 flex-shrink-0\">Description</span>\n                      <span className=\"text-text-primary\">{description}</span>\n                    </div>\n                  )}\n                  {hasVariables && variables.length > 0 && (\n                    <div className=\"pt-2 border-t border-border-default\">\n                      <p className=\"text-text-muted text-xs mb-2\">Variables</p>\n                      {variables.map((v) => (\n                        <div key={v.name} className=\"flex gap-3\">\n                          <span className=\"text-text-muted w-28 flex-shrink-0 truncate\">\n                            {v.title || v.name}\n                          </span>\n                          <span className=\"text-text-primary font-mono text-xs\">\n                            {varValues[v.name] || (\n                              <span className=\"text-text-muted italic\">default</span>\n                            )}\n                          </span>\n                        </div>\n                      ))}\n                    </div>\n                  )}\n                  <div className=\"pt-2 border-t border-border-default flex gap-3\">\n                    <span className=\"text-text-muted w-28 flex-shrink-0\">GitHub repo</span>\n                    {github.enabled ? (\n                      <span className=\"text-text-primary font-mono text-xs\">\n                        {github.scope === 'org' ? github.orgName : 'personal'}/{github.repoName}{' '}\n                        <span className=\"text-text-muted\">({github.visibility})</span>\n                        {github.connectionId && (\n                          <span className=\"ml-2 text-status-success-text font-sans font-normal\">\n                            via connected account\n                          </span>\n                        )}\n                      </span>\n                    ) : (\n                      <span className=\"text-text-muted italic\">not creating</span>\n                    )}\n                  </div>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          {error && (\n            <div className=\"mt-3 p-3 bg-status-error-bg text-status-error-text text-sm rounded-md\">\n              {error}\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-t border-border-default\">\n          <button\n            type=\"button\"\n            onClick={step === 0 ? onClose : back}\n            disabled={loading}\n            className=\"px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n          >\n            {step === 0 ? 'Cancel' : 'Back'}\n          </button>\n          {step < reviewStep ? (\n            <button\n              type=\"button\"\n              onClick={next}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              Next\n              <ChevronRight className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={handleSubmit}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n            >\n              <Copy className=\"size-4\" />\n              {loading ? 'Creating...' : 'Create Component'}\n            </button>\n          )}\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/vibe/VibeLinkedEntitiesPanel.js

@@ -0,0 +1,60 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { EmptyState as t } from "../shared/EmptyState.js";
+import "../shared/index.js";
+import { useEffect as n } from "react";
+import { Link2 as r, Plus as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/vibe/VibeLinkedEntitiesPanel.tsx
+var s = {
+	vibedecks: {
+		singular: "Vibe Deck",
+		plural: "Vibe Decks"
+	},
+	actions: {
+		singular: "Action",
+		plural: "Actions"
+	},
+	scheduledJobs: {
+		singular: "Scheduled Job",
+		plural: "Scheduled Jobs"
+	},
+	sandboxes: {
+		singular: "Sandbox",
+		plural: "Sandboxes"
+	},
+	aiPrompts: {
+		singular: "AI Prompt",
+		plural: "AI Prompts"
+	},
+	tunnels: {
+		singular: "Tunnel",
+		plural: "Tunnels"
+	}
+};
+function c({ vibeId: c, kind: l }) {
+	let u = e(), d = s[l];
+	return n(() => {
+		console.warn(`[VibeLinkedEntitiesPanel] No Vibe.linkedEntities.${l} federation field yet; rendering placeholder for vibe ${c}.`);
+	}, [c, l]), /* @__PURE__ */ a("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface p-6",
+		children: /* @__PURE__ */ a(t, {
+			icon: /* @__PURE__ */ a(r, {
+				size: 48,
+				className: "text-text-secondary"
+			}),
+			title: u(`vibeDetails.linked.${l}.title`, `${d.plural} linked to this vibe`),
+			description: u(`vibeDetails.linked.${l}.description`, `Linked ${d.plural.toLowerCase()} for this vibe will appear here. Coming soon.`),
+			action: /* @__PURE__ */ o("button", {
+				type: "button",
+				disabled: !0,
+				className: "inline-flex cursor-not-allowed items-center gap-2 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-tertiary opacity-60",
+				title: u("vibeDetails.linked.comingSoon", "Coming soon"),
+				children: [/* @__PURE__ */ a(i, { size: 14 }), u("vibeDetails.linked.linkExisting", `Link existing ${d.singular}`)]
+			})
+		})
+	});
+}
+//#endregion
+export { c as VibeLinkedEntitiesPanel };
+
+//# sourceMappingURL=VibeLinkedEntitiesPanel.js.map

package/dist/components/vibe/VibeLinkedEntitiesPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VibeLinkedEntitiesPanel.js","names":[],"sources":["../../../src/components/vibe/VibeLinkedEntitiesPanel.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Link2, Plus } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useTr } from '@/shared/hooks/useTr';\n\nexport type LinkedEntityKind =\n  | 'vibedecks'\n  | 'actions'\n  | 'scheduledJobs'\n  | 'sandboxes'\n  | 'aiPrompts'\n  | 'tunnels';\n\ninterface VibeLinkedEntitiesPanelProps {\n  vibeId: string;\n  kind: LinkedEntityKind;\n}\n\nconst KIND_LABELS: Record<LinkedEntityKind, { singular: string; plural: string }> = {\n  vibedecks: { singular: 'Vibe Deck', plural: 'Vibe Decks' },\n  actions: { singular: 'Action', plural: 'Actions' },\n  scheduledJobs: { singular: 'Scheduled Job', plural: 'Scheduled Jobs' },\n  sandboxes: { singular: 'Sandbox', plural: 'Sandboxes' },\n  aiPrompts: { singular: 'AI Prompt', plural: 'AI Prompts' },\n  tunnels: { singular: 'Tunnel', plural: 'Tunnels' },\n};\n\n/**\n * F10 round-3 panel — shows entities linked to a vibe.\n *\n * Expected data source is `Vibe.linkedEntities.{kind}` federation field\n * on wspace-vibecontrols-svc. Until that ships, we render a \"Coming\n * soon\" empty state. Once it does, swap the placeholder for a list\n * query and add the \"+ Link existing\" picker.\n *\n * TODO(boff-vibe-linked-entities): wire the real query + picker.\n */\nexport function VibeLinkedEntitiesPanel({ vibeId, kind }: VibeLinkedEntitiesPanelProps) {\n  const tr = useTr();\n  const labels = KIND_LABELS[kind];\n\n  useEffect(() => {\n    // Single console warn per mount so dev sees the placeholder reason.\n    console.warn(\n      `[VibeLinkedEntitiesPanel] No Vibe.linkedEntities.${kind} federation field yet; rendering placeholder for vibe ${vibeId}.`\n    );\n  }, [vibeId, kind]);\n\n  return (\n    <div className=\"rounded-lg border border-border-default bg-bg-surface p-6\">\n      <EmptyState\n        icon={<Link2 size={48} className=\"text-text-secondary\" />}\n        title={tr(`vibeDetails.linked.${kind}.title`, `${labels.plural} linked to this vibe`)}\n        description={tr(\n          `vibeDetails.linked.${kind}.description`,\n          `Linked ${labels.plural.toLowerCase()} for this vibe will appear here. Coming soon.`\n        )}\n        action={\n          <button\n            type=\"button\"\n            disabled\n            className=\"inline-flex cursor-not-allowed items-center gap-2 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-tertiary opacity-60\"\n            title={tr('vibeDetails.linked.comingSoon', 'Coming soon')}\n          >\n            <Plus size={14} />\n            {tr('vibeDetails.linked.linkExisting', `Link existing ${labels.singular}`)}\n          </button>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,IAAM,IAA8E;CAClF,WAAW;EAAE,UAAU;EAAa,QAAQ;EAAc;CAC1D,SAAS;EAAE,UAAU;EAAU,QAAQ;EAAW;CAClD,eAAe;EAAE,UAAU;EAAiB,QAAQ;EAAkB;CACtE,WAAW;EAAE,UAAU;EAAW,QAAQ;EAAa;CACvD,WAAW;EAAE,UAAU;EAAa,QAAQ;EAAc;CAC1D,SAAS;EAAE,UAAU;EAAU,QAAQ;EAAW;CACnD;AAYD,SAAgB,EAAwB,EAAE,WAAQ,WAAsC;CACtF,IAAM,IAAK,GAAO,EACZ,IAAS,EAAY;AAS3B,QAPA,QAAgB;AAEd,UAAQ,KACN,oDAAoD,EAAK,wDAAwD,EAAO,GACzH;IACA,CAAC,GAAQ,EAAK,CAAC,EAGhB,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD;IAAO,MAAM;IAAI,WAAU;IAAwB,CAAA;GACzD,OAAO,EAAG,sBAAsB,EAAK,SAAS,GAAG,EAAO,OAAO,sBAAsB;GACrF,aAAa,EACX,sBAAsB,EAAK,eAC3B,UAAU,EAAO,OAAO,aAAa,CAAC,+CACvC;GACD,QACE,kBAAC,UAAD;IACE,MAAK;IACL,UAAA;IACA,WAAU;IACV,OAAO,EAAG,iCAAiC,cAAc;cAJ3D,CAME,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,mCAAmC,iBAAiB,EAAO,WAAW,CACnE;;GAEX,CAAA;EACE,CAAA"}

package/dist/components/vibedeck/VibeDeckButtonTile.js

@@ -22,35 +22,30 @@ var h = ({ button: h, onExecute: g, onEdit: _, onDelete: v, canUpdate: y, canDel
 		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 = () => {
+	}, A = "border-border-default bg-bg-elevated/80 backdrop-blur-md shadow-lg hover:border-border-focus hover:shadow-xl", j = D ? h.color && k[h.color] ? `${k[h.color]} backdrop-blur-md shadow-lg hover:shadow-xl` : A : h.color && O[h.color] ? `${O[h.color]} backdrop-blur-md shadow-md hover:shadow-lg` : A, M = h.action?.actionType || h.actionType, N = h.action?.command ?? h.command, P = h.action?.script ?? null, F = h.action?.webhookUrl ?? h.webhookUrl, I = h.action?.displayName || h.action?.name || null, L = M === "WEBHOOK", R = M === "SCRIPT", z = L ? i : R ? r : c, B = L ? `${h.webhookMethod || "POST"} ${F || ""}` : R ? `Script (${h.scriptInterpreter || "bash"})${P ? `: ${P.slice(0, 60)}` : ""}` : `${N || ""}${h.keyboardShortcut ? ` (${h.keyboardShortcut})` : ""}`, V = () => {
 		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" : "";
+	}, H = 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" : "", U = C === "executing" ? "border-action-primary-bg/60" : C === "success" ? "border-status-success-border/50" : C === "error" ? "border-status-error-border/50" : "", W = D ? x && !S : y;
 	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 },
+		className: `relative group h-full ${H} ${w ? "ring-2 ring-action-primary-bg ring-offset-1" : ""} ${T ? "ring-2 ring-action-primary-bg/40 ring-offset-1" : ""} ${W ? "cursor-pointer" : ""} rounded-lg focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:outline-none`,
+		whileHover: W ? { scale: 1.03 } : void 0,
+		whileTap: W ? { scale: .97 } : void 0,
+		transition: { duration: .15 },
 		children: [
 			/* @__PURE__ */ m("div", {
 				role: "button",
 				tabIndex: 0,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), B());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), V());
 				},
-				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,
+				onClick: V,
+				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 duration-200 ${j} ${U} ${C === "executing" ? "animate-pulse" : ""}`,
+				title: B,
 				children: [
-					I && h.webhookMethod && /* @__PURE__ */ p("span", {
+					L && 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", {
+					R && 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
 					}),
@@ -67,7 +62,7 @@ var h = ({ button: h, onExecute: g, onEdit: _, onDelete: v, canUpdate: y, canDel
 						size: 10,
 						className: "absolute bottom-1.5 left-1.5 text-status-warning-text"
 					}),
-					/* @__PURE__ */ p(R, {
+					/* @__PURE__ */ p(z, {
 						size: D ? 24 : 20,
 						className: D ? "text-text-primary" : "text-text-secondary"
 					}),
@@ -75,9 +70,9 @@ var h = ({ button: h, onExecute: g, onEdit: _, onDelete: v, canUpdate: y, canDel
 						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", {
+					I && /* @__PURE__ */ p("span", {
 						className: "text-[10px] text-action-primary-bg/70 font-medium truncate max-w-full px-1",
-						children: F
+						children: I
 					}),
 					h.category && /* @__PURE__ */ p("span", {
 						className: "text-[10px] text-text-tertiary uppercase tracking-wider",
@@ -165,15 +160,22 @@ var h = ({ button: h, onExecute: g, onEdit: _, onDelete: v, canUpdate: y, canDel
 					})
 				]
 			}),
-			!D && x && /* @__PURE__ */ p("button", {
+			!D && x && /* @__PURE__ */ p(f.button, {
 				type: "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",
+				whileHover: { scale: 1.05 },
+				whileTap: { scale: .95 },
+				transition: { duration: .15 },
+				className: "absolute -top-3 left-1/2 -translate-x-1/2 size-14 rounded-full bg-action-primary-bg text-action-primary-text shadow-xl flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-200 z-20",
 				title: "Execute",
-				children: /* @__PURE__ */ p(s, { size: 12 })
+				"aria-label": "Execute button",
+				children: /* @__PURE__ */ p(s, {
+					size: 20,
+					className: "ml-0.5"
+				})
 			}),
 			!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",