@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/SharedVibeDeckPage.js

@@ -0,0 +1,262 @@
+import { useExecuteSharedVibeDeckButtonMutation as e, useGetSharedVibeDeckQuery as t, useValidateVibeDeckShareLinkQuery as n } from "../generated/wspace-operations.js";
+import { VibeDeckGrid as r } from "../components/vibedeck/VibeDeckGrid.js";
+import { useCallback as i, useState as a } from "react";
+import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as s, Eye as c, Loader2 as l, Lock as u, Play as d, Zap as f } from "lucide-react";
+import { useParams as p, useSearchParams as m } from "react-router-dom";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { MotionPage as _ } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/SharedVibeDeckPage.tsx
+function v({ onSubmit: e, isLoading: t, error: n }) {
+	let [r, i] = a("");
+	return /* @__PURE__ */ g("form", {
+		onSubmit: (t) => {
+			t.preventDefault(), r.trim() && e(r);
+		},
+		className: "space-y-4 w-full max-w-sm",
+		children: [
+			/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+				className: "block text-sm font-medium text-text-primary mb-2",
+				children: "This VibeDeck is password protected"
+			}), /* @__PURE__ */ g("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ h(u, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary" }), /* @__PURE__ */ h("input", {
+					type: "password",
+					value: r,
+					onChange: (e) => i(e.target.value),
+					placeholder: "Enter password",
+					autoFocus: !0,
+					className: "w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
+				})]
+			})] }),
+			n && /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg",
+				children: [/* @__PURE__ */ h(s, { className: "w-4 h-4 text-status-error-text" }), /* @__PURE__ */ h("span", {
+					className: "text-sm text-status-error-text",
+					children: n
+				})]
+			}),
+			/* @__PURE__ */ h("button", {
+				type: "submit",
+				disabled: t || !r.trim(),
+				className: "w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+				children: t ? "Verifying..." : "Access VibeDeck"
+			})
+		]
+	});
+}
+function y({ message: e }) {
+	return /* @__PURE__ */ g("div", {
+		className: "flex flex-col items-center justify-center min-h-[60vh] gap-4",
+		children: [/* @__PURE__ */ h("div", {
+			className: "w-16 h-16 rounded-full bg-status-error-bg/10 flex items-center justify-center",
+			children: /* @__PURE__ */ h(s, {
+				size: 32,
+				className: "text-status-error-text"
+			})
+		}), /* @__PURE__ */ g("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ h("h2", {
+				className: "text-lg font-semibold text-text-primary",
+				children: "Access Denied"
+			}), /* @__PURE__ */ h("p", {
+				className: "text-sm text-text-secondary mt-1",
+				children: e
+			})]
+		})]
+	});
+}
+function b() {
+	let { t: s } = o(), b = i((e, t) => {
+		let n = s(e);
+		return n === e ? t : n;
+	}, [s]), { token: x } = p(), [S] = m(), C = S.get("embed") === "true", w = S.get("bg") === "transparent", [T, E] = a(null), [D, O] = a(null), [k, A] = a(null), { data: j, loading: M } = n({
+		variables: { token: x || "" },
+		skip: !x
+	}), N = j?.validateVibeDeckShareLink, P = N?.isValid && N.requiresPassword && !T, F = N?.isValid && (!N.requiresPassword || T !== null), { data: I, loading: L, error: R } = t({
+		variables: {
+			token: x || "",
+			password: T
+		},
+		skip: !F
+	}), z = I?.sharedVibeDeck, B = z?.permission === "EXECUTE", [V] = e(), H = i((e) => {
+		O(null), E(e);
+	}, []), U = i(async (e) => {
+		if (!(!x || !B)) {
+			A(e);
+			try {
+				await V({ variables: {
+					token: x,
+					buttonId: e,
+					password: T
+				} });
+			} catch {} finally {
+				A(null);
+			}
+		}
+	}, [
+		x,
+		T,
+		B,
+		V
+	]), W = R?.message?.includes("Password is required") || R?.message?.includes("Incorrect password");
+	if (W && T && (D || (O("Incorrect password. Please try again."), E(null))), M) return /* @__PURE__ */ h("div", {
+		className: `flex items-center justify-center min-h-[60vh] ${w ? "bg-transparent" : ""}`,
+		children: /* @__PURE__ */ h(l, {
+			size: 24,
+			className: "animate-spin text-text-tertiary"
+		})
+	});
+	if (!N?.isValid) return C ? /* @__PURE__ */ h("div", {
+		className: `flex items-center justify-center p-8 ${w ? "bg-transparent" : ""}`,
+		children: /* @__PURE__ */ h("p", {
+			className: "text-sm text-text-secondary",
+			children: N?.error || b("sharedVibeDeck.invalidLink", "Invalid share link")
+		})
+	}) : /* @__PURE__ */ h(_, {
+		className: "p-4 sm:p-6",
+		children: /* @__PURE__ */ h(y, { message: N?.error || b("sharedVibeDeck.linkInvalidOrExpired", "This share link is invalid or has expired.") })
+	});
+	if (P || W && !T) return C ? /* @__PURE__ */ h("div", {
+		className: `flex items-center justify-center p-8 ${w ? "bg-transparent" : ""}`,
+		children: /* @__PURE__ */ h("p", {
+			className: "text-sm text-text-secondary",
+			children: b("sharedVibeDeck.requiresPassword", "This VibeDeck requires a password")
+		})
+	}) : /* @__PURE__ */ h(_, {
+		className: "p-4 sm:p-6",
+		children: /* @__PURE__ */ g("div", {
+			className: "flex flex-col items-center justify-center min-h-[60vh] gap-6",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "w-16 h-16 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+					children: /* @__PURE__ */ h(u, {
+						size: 28,
+						className: "text-action-primary-bg"
+					})
+				}),
+				/* @__PURE__ */ g("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ h("h2", {
+						className: "text-lg font-semibold text-text-primary",
+						children: N.vibeDeckName || "Shared VibeDeck"
+					}), /* @__PURE__ */ h("p", {
+						className: "text-sm text-text-secondary mt-1",
+						children: b("sharedVibeDeck.enterPasswordHint", "Enter the password to continue")
+					})]
+				}),
+				/* @__PURE__ */ h(v, {
+					onSubmit: H,
+					isLoading: L,
+					error: D
+				})
+			]
+		})
+	});
+	if (L || !z) return /* @__PURE__ */ h("div", {
+		className: `flex items-center justify-center min-h-[60vh] ${w ? "bg-transparent" : ""}`,
+		children: /* @__PURE__ */ h(l, {
+			size: 24,
+			className: "animate-spin text-text-tertiary"
+		})
+	});
+	let G = z.buttons.map((e) => ({
+		id: e.id,
+		label: e.label,
+		icon: e.icon || null,
+		color: e.color || null,
+		command: null,
+		actionType: e.actionType || "COMMAND",
+		category: e.category || null,
+		confirmationRequired: e.confirmationRequired,
+		keyboardShortcut: null,
+		targetAgentId: null,
+		scriptInterpreter: null,
+		webhookUrl: null,
+		webhookMethod: null,
+		row: e.row,
+		column: e.column,
+		rowSpan: e.rowSpan,
+		colSpan: e.colSpan
+	}));
+	return C ? /* @__PURE__ */ h("div", {
+		className: `p-3 ${w ? "bg-transparent" : ""}`,
+		children: /* @__PURE__ */ h(r, {
+			gridColumns: z.gridColumns,
+			gridRows: z.gridRows,
+			buttons: G,
+			onExecuteButton: U,
+			onEditButton: () => {},
+			onDeleteButton: () => {},
+			onDropButton: () => {},
+			onAddButton: () => {},
+			executingButtonId: k,
+			canCreate: !1,
+			canUpdate: !1,
+			canDelete: !1,
+			canExecute: B
+		})
+	}) : /* @__PURE__ */ g(_, {
+		className: "p-4 sm:p-6 space-y-6",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ h("div", { children: /* @__PURE__ */ g("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ h("div", {
+						className: "w-10 h-10 rounded-xl bg-action-primary-bg/10 flex items-center justify-center",
+						children: /* @__PURE__ */ h(f, {
+							size: 20,
+							className: "text-action-primary-bg"
+						})
+					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
+						className: "text-xl font-semibold text-text-primary",
+						children: z.name
+					}), z.description && /* @__PURE__ */ h("p", {
+						className: "text-sm text-text-secondary mt-0.5",
+						children: z.description
+					})] })]
+				}) }), /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2",
+					children: /* @__PURE__ */ g("span", {
+						className: `inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${B ? "bg-status-success-bg/10 text-status-success-text border border-status-success-border/30" : "bg-bg-secondary text-text-secondary border border-border-default"}`,
+						children: [h(B ? d : c, { size: 12 }), B ? b("sharedVibeDeck.canExecute", "Can execute") : b("sharedVibeDeck.viewOnly", "View only")]
+					})
+				})]
+			}),
+			/* @__PURE__ */ h(r, {
+				gridColumns: z.gridColumns,
+				gridRows: z.gridRows,
+				buttons: G,
+				onExecuteButton: U,
+				onEditButton: () => {},
+				onDeleteButton: () => {},
+				onDropButton: () => {},
+				onAddButton: () => {},
+				executingButtonId: k,
+				canCreate: !1,
+				canUpdate: !1,
+				canDelete: !1,
+				canExecute: B
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "text-center pt-4",
+				children: /* @__PURE__ */ g("p", {
+					className: "text-xs text-text-tertiary",
+					children: [
+						b("sharedVibeDeck.poweredBy", "Powered by"),
+						" ",
+						/* @__PURE__ */ h("span", {
+							className: "font-medium text-text-secondary",
+							children: "VibeControls"
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { b as SharedVibeDeckPage };
+
+//# sourceMappingURL=SharedVibeDeckPage.js.map

package/dist/pages/SharedVibeDeckPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedVibeDeckPage.js","names":[],"sources":["../../src/pages/SharedVibeDeckPage.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Loader2, AlertCircle, Lock, Play, Zap, Eye } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { VibeDeckGrid } from '@/components/vibedeck/VibeDeckGrid';\nimport {\n  useValidateVibeDeckShareLinkQuery,\n  useGetSharedVibeDeckQuery,\n  useExecuteSharedVibeDeckButtonMutation,\n} from '@/generated/wspace-operations';\n\n/**\n * Password entry form for protected share links\n */\nfunction PasswordForm({\n  onSubmit,\n  isLoading,\n  error,\n}: {\n  onSubmit: (password: string) => void;\n  isLoading: boolean;\n  error?: string | null;\n}) {\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (password.trim()) onSubmit(password);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4 w-full max-w-sm\">\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-2\">\n          This VibeDeck is password protected\n        </label>\n        <div className=\"relative\">\n          <Lock className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary\" />\n          <input\n            type=\"password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Enter password\"\n            autoFocus\n            className=\"w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          />\n        </div>\n      </div>\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg\">\n          <AlertCircle className=\"w-4 h-4 text-status-error-text\" />\n          <span className=\"text-sm text-status-error-text\">{error}</span>\n        </div>\n      )}\n      <button\n        type=\"submit\"\n        disabled={isLoading || !password.trim()}\n        className=\"w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {isLoading ? 'Verifying...' : 'Access VibeDeck'}\n      </button>\n    </form>\n  );\n}\n\n/**\n * Error display component\n */\nfunction ShareError({ message }: { message: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-4\">\n      <div className=\"w-16 h-16 rounded-full bg-status-error-bg/10 flex items-center justify-center\">\n        <AlertCircle size={32} className=\"text-status-error-text\" />\n      </div>\n      <div className=\"text-center\">\n        <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n        <p className=\"text-sm text-text-secondary mt-1\">{message}</p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * SharedVibeDeckPage — standalone page for viewing/executing a shared VibeDeck via token.\n * Supports:\n *   - /vibecontrols/deck/:token — full page with header\n *   - ?embed=true — minimal iframe mode (no header/chrome)\n */\nexport function SharedVibeDeckPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { token } = useParams<{ token: string }>();\n  const [searchParams] = useSearchParams();\n  const isEmbed = searchParams.get('embed') === 'true';\n  const transparentBg = searchParams.get('bg') === 'transparent';\n\n  const [password, setPassword] = useState<string | null>(null);\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [executingButtonId, setExecutingButtonId] = useState<string | null>(null);\n\n  // Step 1: Validate the share link\n  const { data: validationData, loading: validating } = useValidateVibeDeckShareLinkQuery({\n    variables: { token: token || '' },\n    skip: !token,\n  });\n\n  const validation = validationData?.validateVibeDeckShareLink;\n  const needsPassword = validation?.isValid && validation.requiresPassword && !password;\n\n  // Step 2: Fetch the deck data (once validated and password provided if needed)\n  const shouldFetchDeck =\n    validation?.isValid && (!validation.requiresPassword || password !== null);\n\n  const {\n    data: deckData,\n    loading: deckLoading,\n    error: deckError,\n  } = useGetSharedVibeDeckQuery({\n    variables: { token: token || '', password },\n    skip: !shouldFetchDeck,\n  });\n\n  const sharedDeck = deckData?.sharedVibeDeck;\n  const canExecute = sharedDeck?.permission === 'EXECUTE';\n\n  // Execute mutation for shared buttons\n  const [executeSharedButton] = useExecuteSharedVibeDeckButtonMutation();\n\n  const handlePasswordSubmit = useCallback((pw: string) => {\n    setPasswordError(null);\n    setPassword(pw);\n  }, []);\n\n  const handleExecuteButton = useCallback(\n    async (buttonId: string) => {\n      if (!token || !canExecute) return;\n      setExecutingButtonId(buttonId);\n      try {\n        await executeSharedButton({\n          variables: { token, buttonId, password },\n        });\n      } catch {\n        // Silent — execution status is visible from the button\n      } finally {\n        setExecutingButtonId(null);\n      }\n    },\n    [token, password, canExecute, executeSharedButton]\n  );\n\n  // Handle password errors from the deck query\n  const passwordRequired =\n    deckError?.message?.includes('Password is required') ||\n    deckError?.message?.includes('Incorrect password');\n\n  if (passwordRequired && password) {\n    // Reset and show password form with error\n    if (!passwordError) {\n      setPasswordError('Incorrect password. Please try again.');\n      setPassword(null);\n    }\n  }\n\n  // Loading state\n  if (validating) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Invalid token\n  if (!validation?.isValid) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {validation?.error || tr('sharedVibeDeck.invalidLink', 'Invalid share link')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <ShareError\n          message={\n            validation?.error ||\n            tr('sharedVibeDeck.linkInvalidOrExpired', 'This share link is invalid or has expired.')\n          }\n        />\n      </MotionPage>\n    );\n  }\n\n  // Password required\n  if (needsPassword || (passwordRequired && !password)) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {tr('sharedVibeDeck.requiresPassword', 'This VibeDeck requires a password')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-6\">\n          <div className=\"w-16 h-16 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n            <Lock size={28} className=\"text-action-primary-bg\" />\n          </div>\n          <div className=\"text-center\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {validation.vibeDeckName || 'Shared VibeDeck'}\n            </h2>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {tr('sharedVibeDeck.enterPasswordHint', 'Enter the password to continue')}\n            </p>\n          </div>\n          <PasswordForm\n            onSubmit={handlePasswordSubmit}\n            isLoading={deckLoading}\n            error={passwordError}\n          />\n        </div>\n      </MotionPage>\n    );\n  }\n\n  // Loading deck\n  if (deckLoading || !sharedDeck) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Map shared buttons to the format expected by VibeDeckGrid\n  const gridButtons = sharedDeck.buttons.map((b: Record<string, unknown>) => ({\n    id: b.id,\n    label: b.label,\n    icon: b.icon || null,\n    color: b.color || null,\n    command: null,\n    actionType: b.actionType || 'COMMAND',\n    category: b.category || null,\n    confirmationRequired: b.confirmationRequired,\n    keyboardShortcut: null,\n    targetAgentId: null,\n    scriptInterpreter: null,\n    webhookUrl: null,\n    webhookMethod: null,\n    row: b.row,\n    column: b.column,\n    rowSpan: b.rowSpan,\n    colSpan: b.colSpan,\n  }));\n\n  // Embed mode: just the grid, no chrome\n  if (isEmbed) {\n    return (\n      <div className={`p-3 ${transparentBg ? 'bg-transparent' : ''}`}>\n        <VibeDeckGrid\n          gridColumns={sharedDeck.gridColumns}\n          gridRows={sharedDeck.gridRows}\n          buttons={gridButtons}\n          onExecuteButton={handleExecuteButton}\n          onEditButton={() => {}}\n          onDeleteButton={() => {}}\n          onDropButton={() => {}}\n          onAddButton={() => {}}\n          executingButtonId={executingButtonId}\n          canCreate={false}\n          canUpdate={false}\n          canDelete={false}\n          canExecute={canExecute}\n        />\n      </div>\n    );\n  }\n\n  // Full page mode\n  return (\n    <MotionPage className=\"p-4 sm:p-6 space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-10 h-10 rounded-xl bg-action-primary-bg/10 flex items-center justify-center\">\n              <Zap size={20} className=\"text-action-primary-bg\" />\n            </div>\n            <div>\n              <h1 className=\"text-xl font-semibold text-text-primary\">{sharedDeck.name}</h1>\n              {sharedDeck.description && (\n                <p className=\"text-sm text-text-secondary mt-0.5\">{sharedDeck.description}</p>\n              )}\n            </div>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span\n            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${\n              canExecute\n                ? 'bg-status-success-bg/10 text-status-success-text border border-status-success-border/30'\n                : 'bg-bg-secondary text-text-secondary border border-border-default'\n            }`}\n          >\n            {canExecute ? <Play size={12} /> : <Eye size={12} />}\n            {canExecute\n              ? tr('sharedVibeDeck.canExecute', 'Can execute')\n              : tr('sharedVibeDeck.viewOnly', 'View only')}\n          </span>\n        </div>\n      </div>\n\n      {/* Grid */}\n      <VibeDeckGrid\n        gridColumns={sharedDeck.gridColumns}\n        gridRows={sharedDeck.gridRows}\n        buttons={gridButtons}\n        onExecuteButton={handleExecuteButton}\n        onEditButton={() => {}}\n        onDeleteButton={() => {}}\n        onDropButton={() => {}}\n        onAddButton={() => {}}\n        executingButtonId={executingButtonId}\n        canCreate={false}\n        canUpdate={false}\n        canDelete={false}\n        canExecute={canExecute}\n      />\n\n      {/* Footer branding */}\n      <div className=\"text-center pt-4\">\n        <p className=\"text-xs text-text-tertiary\">\n          {tr('sharedVibeDeck.poweredBy', 'Powered by')}{' '}\n          <span className=\"font-medium text-text-secondary\">VibeControls</span>\n        </p>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/TargetDetailsPage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TargetDetailsPage — `/vibecontrols/targets/:id`
+ *
+ * Mirrors AgentDetailsPage shell. Three sections:
+ *   1. Identity card (name, type, status, host, last updated)
+ *   2. Agents on this target (table with link to AgentDetailsPage)
+ *   3. Inbound agent connections
+ *
+ * Reuses the existing `GetTarget` query — no schema changes needed; the
+ * `TargetFields` fragment already includes the agent list and metadata.
+ */
+export declare function TargetDetailsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TargetDetailsPage.d.ts.map

package/dist/pages/TargetDetailsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TargetDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/TargetDetailsPage.tsx"],"names":[],"mappings":"AAoBA;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,4CAiQhC"}

package/dist/pages/TargetDetailsPage.js

@@ -0,0 +1,266 @@
+import { useGetTargetQuery as e } from "../generated/wspace-operations.js";
+import { PageHeader as t } from "../components/shared/PageHeader.js";
+import { LoadingState as n } from "../components/shared/LoadingState.js";
+import { ErrorState as r } from "../components/shared/ErrorState.js";
+import { EmptyState as i } from "../components/shared/EmptyState.js";
+import { StatusBadge as a } from "../components/shared/StatusBadge.js";
+import { Card as o } from "../components/shared/Card.js";
+import "../components/shared/index.js";
+import { useMemo as s } from "react";
+import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Activity as l, ArrowLeft as u, CircleCheck as d, CircleX as f, Cpu as p, ExternalLink as m, Server as h } from "lucide-react";
+import { Link as g, useNavigate as _, useParams as v } from "react-router-dom";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { MotionPage as x } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/TargetDetailsPage.tsx
+function S() {
+	let { id: S } = v(), C = _(), { t: w } = c(), T = (e, t) => {
+		let n = w(e);
+		return n === e ? t : n;
+	}, { data: E, loading: D, error: O, refetch: k } = e({
+		variables: { id: S ?? "" },
+		skip: !S,
+		fetchPolicy: "cache-and-network"
+	}), A = E?.target ?? null, j = s(() => A?.agents ?? [], [A]), M = s(() => A?.inboundConnections ?? [], [A]);
+	if (!S) return /* @__PURE__ */ y(r, {
+		title: T("targetDetails.missingId", "Target id missing from URL"),
+		message: ""
+	});
+	if (D && !E) return /* @__PURE__ */ y(n, { message: T("targetDetails.loading", "Loading target…") });
+	if (O && !A) return /* @__PURE__ */ y(r, {
+		title: T("targetDetails.errorTitle", "Failed to load target"),
+		message: O.message,
+		onRetry: () => void k()
+	});
+	if (!A) return /* @__PURE__ */ y(i, {
+		icon: /* @__PURE__ */ y(h, {
+			size: 48,
+			className: "text-text-tertiary"
+		}),
+		title: T("targetDetails.notFoundTitle", "Target not found"),
+		description: T("targetDetails.notFoundBody", "The target you requested may have been deleted or is in a different workspace.")
+	});
+	let N = A.updatedAt ? new Date(A.updatedAt).toLocaleString() : "—";
+	return /* @__PURE__ */ b(x, { children: [
+		/* @__PURE__ */ y(t, {
+			title: A.name,
+			description: `${A.type} · ${A.host ?? "no host"}`,
+			breadcrumb: [
+				{
+					label: T("breadcrumbs.targetsAgents", "Targets & Agents"),
+					path: "../agents"
+				},
+				{
+					label: T("breadcrumbs.targets", "Targets"),
+					path: "../agents?tab=targets"
+				},
+				{ label: A.name }
+			],
+			actions: /* @__PURE__ */ b("button", {
+				onClick: () => C("../agents?tab=targets"),
+				className: "flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border-default hover:bg-bg-sunken transition-colors",
+				children: [/* @__PURE__ */ y(u, { size: 14 }), T("common.back", "Back")]
+			})
+		}),
+		/* @__PURE__ */ b(o, {
+			className: "mt-4",
+			children: [/* @__PURE__ */ b("div", {
+				className: "p-4 border-b border-border-default flex items-center gap-2",
+				children: [/* @__PURE__ */ y(h, { className: "w-5 h-5" }), /* @__PURE__ */ y("h3", {
+					className: "font-semibold text-text-primary",
+					children: T("targetDetails.identity", "Identity")
+				})]
+			}), /* @__PURE__ */ b("div", {
+				className: "p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
+				children: [
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.name", "Name")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary font-medium",
+						children: A.name
+					})] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.type", "Type")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary font-medium",
+						children: A.type
+					})] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.status", "Status")
+					}), /* @__PURE__ */ y(a, { status: A.status })] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.host", "Host")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary font-mono text-xs",
+						children: A.host ?? "—"
+					})] }),
+					A.username && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.username", "Username")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary font-mono text-xs",
+						children: A.username
+					})] }),
+					A.port != null && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.port", "Port")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary font-mono text-xs",
+						children: A.port
+					})] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+						className: "text-text-tertiary",
+						children: T("targetDetails.updatedAt", "Last updated")
+					}), /* @__PURE__ */ y("p", {
+						className: "text-text-primary text-xs",
+						children: N
+					})] }),
+					A.tags && A.tags.length > 0 && /* @__PURE__ */ b("div", {
+						className: "sm:col-span-2",
+						children: [/* @__PURE__ */ y("p", {
+							className: "text-text-tertiary mb-1",
+							children: T("targetDetails.tags", "Tags")
+						}), /* @__PURE__ */ y("div", {
+							className: "flex flex-wrap gap-1",
+							children: A.tags.map((e) => /* @__PURE__ */ y("span", {
+								className: "px-2 py-0.5 text-xs rounded bg-bg-sunken border border-border-default",
+								children: e
+							}, e))
+						})]
+					})
+				]
+			})]
+		}),
+		/* @__PURE__ */ b(o, {
+			className: "mt-4",
+			children: [/* @__PURE__ */ b("div", {
+				className: "p-4 border-b border-border-default flex items-center justify-between",
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y(p, { className: "w-5 h-5" }), /* @__PURE__ */ b("h3", {
+						className: "font-semibold text-text-primary",
+						children: [
+							T("targetDetails.agents", "Agents on this target"),
+							" (",
+							j.length,
+							")"
+						]
+					})]
+				}), /* @__PURE__ */ b(g, {
+					to: "../agents?tab=agents",
+					className: "text-sm text-action-primary-text hover:underline flex items-center gap-1",
+					children: [T("targetDetails.allAgents", "All agents"), /* @__PURE__ */ y(m, { size: 12 })]
+				})]
+			}), j.length === 0 ? /* @__PURE__ */ y("div", {
+				className: "p-6",
+				children: /* @__PURE__ */ y(i, {
+					icon: /* @__PURE__ */ y(p, {
+						size: 40,
+						className: "text-text-tertiary"
+					}),
+					title: T("targetDetails.noAgents", "No agents on this target yet"),
+					description: T("targetDetails.noAgentsBody", "Use the Agents tab to onboard an agent and select this target during setup.")
+				})
+			}) : /* @__PURE__ */ y("div", {
+				className: "p-4 space-y-2",
+				children: j.map((e) => /* @__PURE__ */ b(g, {
+					to: `../agents/${e.id}`,
+					className: "flex items-center justify-between gap-3 p-3 rounded-md border border-border-default hover:bg-bg-sunken/40 transition-colors",
+					children: [/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-3 min-w-0",
+						children: [/* @__PURE__ */ y("div", {
+							className: "w-8 h-8 rounded-md bg-bg-sunken flex items-center justify-center flex-shrink-0",
+							children: e.isActive ? /* @__PURE__ */ y(d, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ y(f, { className: "w-4 h-4 text-text-tertiary" })
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-sm font-medium text-text-primary truncate",
+								children: e.name
+							}), /* @__PURE__ */ b("p", {
+								className: "text-xs text-text-tertiary truncate",
+								children: [
+									"v",
+									e.version,
+									e.tunnelUrl ? ` · ${e.tunnelUrl}` : ""
+								]
+							})]
+						})]
+					}), /* @__PURE__ */ b("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ y("span", {
+							className: `text-xs px-2 py-0.5 rounded ${e.isActive ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-tertiary"}`,
+							children: e.isActive ? T("targetDetails.active", "Active") : T("targetDetails.offline", "Offline")
+						}), /* @__PURE__ */ y(m, {
+							size: 14,
+							className: "text-text-tertiary"
+						})]
+					})]
+				}, e.id))
+			})]
+		}),
+		/* @__PURE__ */ b(o, {
+			className: "mt-4",
+			children: [/* @__PURE__ */ b("div", {
+				className: "p-4 border-b border-border-default flex items-center gap-2",
+				children: [/* @__PURE__ */ y(l, { className: "w-5 h-5" }), /* @__PURE__ */ b("h3", {
+					className: "font-semibold text-text-primary",
+					children: [
+						T("targetDetails.connections", "Inbound connections"),
+						" (",
+						M.length,
+						")"
+					]
+				})]
+			}), M.length === 0 ? /* @__PURE__ */ y("div", {
+				className: "p-6",
+				children: /* @__PURE__ */ y(i, {
+					icon: /* @__PURE__ */ y(l, {
+						size: 40,
+						className: "text-text-tertiary"
+					}),
+					title: T("targetDetails.noConnections", "No inbound connections"),
+					description: T("targetDetails.noConnectionsBody", "No agents are currently connected to this target.")
+				})
+			}) : /* @__PURE__ */ y("div", {
+				className: "p-4 space-y-2",
+				children: M.map((e) => /* @__PURE__ */ b("div", {
+					className: "flex items-center justify-between gap-3 p-3 rounded-md border border-border-default",
+					children: [/* @__PURE__ */ b("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ y("p", {
+							className: "text-sm font-medium text-text-primary truncate",
+							children: e.label || `${e.protocol} connection`
+						}), /* @__PURE__ */ b("p", {
+							className: "text-xs text-text-tertiary truncate",
+							children: [
+								T("targetDetails.from", "From"),
+								" ",
+								/* @__PURE__ */ y(g, {
+									to: `../agents/${e.sourceAgent.id}`,
+									className: "text-action-primary-text hover:underline",
+									children: e.sourceAgent.name
+								}),
+								" ",
+								"· ",
+								e.protocol,
+								" · ",
+								e.status
+							]
+						})]
+					}), /* @__PURE__ */ y("span", {
+						className: "text-xs px-2 py-0.5 rounded bg-bg-sunken",
+						children: e.status
+					})]
+				}, e.id))
+			})]
+		})
+	] });
+}
+//#endregion
+export { S as TargetDetailsPage };
+
+//# sourceMappingURL=TargetDetailsPage.js.map

package/dist/pages/TargetDetailsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TargetDetailsPage.js","names":[],"sources":["../../src/pages/TargetDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link, useNavigate } from 'react-router-dom';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { ArrowLeft, Server, CircleCheck, CircleX, Cpu, ExternalLink, Activity } from 'lucide-react';\nimport {\n  PageHeader,\n  Card,\n  StatusBadge,\n  EmptyState,\n  LoadingState,\n  ErrorState,\n} from '@/components/shared';\nimport { useGetTargetQuery } from '@/generated/wspace-operations';\nimport type { GetTargetQuery } from '@/generated/wspace-operations';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype TargetType = NonNullable<GetTargetQuery['target']>;\ntype AgentSummary = TargetType['agents'][number];\ntype ConnectionSummary = TargetType['inboundConnections'][number];\n\n/**\n * TargetDetailsPage — `/vibecontrols/targets/:id`\n *\n * Mirrors AgentDetailsPage shell. Three sections:\n *   1. Identity card (name, type, status, host, last updated)\n *   2. Agents on this target (table with link to AgentDetailsPage)\n *   3. Inbound agent connections\n *\n * Reuses the existing `GetTarget` query — no schema changes needed; the\n * `TargetFields` fragment already includes the agent list and metadata.\n */\nexport function TargetDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useNavigate();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  const { data, loading, error, refetch } = useGetTargetQuery({\n    variables: { id: id ?? '' },\n    skip: !id,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const target = data?.target ?? null;\n  const agents = useMemo(() => target?.agents ?? [], [target]);\n  const connections = useMemo(() => target?.inboundConnections ?? [], [target]);\n\n  if (!id) {\n    return (\n      <ErrorState title={tr('targetDetails.missingId', 'Target id missing from URL')} message=\"\" />\n    );\n  }\n\n  if (loading && !data) {\n    return <LoadingState message={tr('targetDetails.loading', 'Loading target…')} />;\n  }\n\n  if (error && !target) {\n    return (\n      <ErrorState\n        title={tr('targetDetails.errorTitle', 'Failed to load target')}\n        message={error.message}\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (!target) {\n    return (\n      <EmptyState\n        icon={<Server size={48} className=\"text-text-tertiary\" />}\n        title={tr('targetDetails.notFoundTitle', 'Target not found')}\n        description={tr(\n          'targetDetails.notFoundBody',\n          'The target you requested may have been deleted or is in a different workspace.'\n        )}\n      />\n    );\n  }\n\n  const lastUpdatedAt = target.updatedAt\n    ? new Date(target.updatedAt as string).toLocaleString()\n    : '—';\n\n  return (\n    <MotionPage>\n      <PageHeader\n        title={target.name}\n        description={`${target.type} · ${target.host ?? 'no host'}`}\n        breadcrumb={[\n          { label: tr('breadcrumbs.targetsAgents', 'Targets & Agents'), path: '../agents' },\n          { label: tr('breadcrumbs.targets', 'Targets'), path: '../agents?tab=targets' },\n          { label: target.name },\n        ]}\n        actions={\n          <button\n            onClick={() => navigate('../agents?tab=targets')}\n            className=\"flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border-default hover:bg-bg-sunken transition-colors\"\n          >\n            <ArrowLeft size={14} />\n            {tr('common.back', 'Back')}\n          </button>\n        }\n      />\n\n      {/* Identity */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Server className=\"w-5 h-5\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.identity', 'Identity')}\n          </h3>\n        </div>\n        <div className=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-tertiary\">{tr('targetDetails.name', 'Name')}</p>\n            <p className=\"text-text-primary font-medium\">{target.name}</p>\n          </div>\n          <div>\n            <p className=\"text-text-tertiary\">{tr('targetDetails.type', 'Type')}</p>\n            <p className=\"text-text-primary font-medium\">{target.type}</p>\n          </div>\n          <div>\n            <p className=\"text-text-tertiary\">{tr('targetDetails.status', 'Status')}</p>\n            <StatusBadge status={target.status} />\n          </div>\n          <div>\n            <p className=\"text-text-tertiary\">{tr('targetDetails.host', 'Host')}</p>\n            <p className=\"text-text-primary font-mono text-xs\">{target.host ?? '—'}</p>\n          </div>\n          {target.username && (\n            <div>\n              <p className=\"text-text-tertiary\">{tr('targetDetails.username', 'Username')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.username}</p>\n            </div>\n          )}\n          {target.port != null && (\n            <div>\n              <p className=\"text-text-tertiary\">{tr('targetDetails.port', 'Port')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.port}</p>\n            </div>\n          )}\n          <div>\n            <p className=\"text-text-tertiary\">{tr('targetDetails.updatedAt', 'Last updated')}</p>\n            <p className=\"text-text-primary text-xs\">{lastUpdatedAt}</p>\n          </div>\n          {target.tags && target.tags.length > 0 && (\n            <div className=\"sm:col-span-2\">\n              <p className=\"text-text-tertiary mb-1\">{tr('targetDetails.tags', 'Tags')}</p>\n              <div className=\"flex flex-wrap gap-1\">\n                {target.tags.map((tag: string) => (\n                  <span\n                    key={tag}\n                    className=\"px-2 py-0.5 text-xs rounded bg-bg-sunken border border-border-default\"\n                  >\n                    {tag}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </Card>\n\n      {/* Agents on this target */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <Cpu className=\"w-5 h-5\" />\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('targetDetails.agents', 'Agents on this target')} ({agents.length})\n            </h3>\n          </div>\n          <Link\n            to=\"../agents?tab=agents\"\n            className=\"text-sm text-action-primary-text hover:underline flex items-center gap-1\"\n          >\n            {tr('targetDetails.allAgents', 'All agents')}\n            <ExternalLink size={12} />\n          </Link>\n        </div>\n        {agents.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Cpu size={40} className=\"text-text-tertiary\" />}\n              title={tr('targetDetails.noAgents', 'No agents on this target yet')}\n              description={tr(\n                'targetDetails.noAgentsBody',\n                'Use the Agents tab to onboard an agent and select this target during setup.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {agents.map((agent: AgentSummary) => (\n              <Link\n                key={agent.id}\n                to={`../agents/${agent.id}`}\n                className=\"flex items-center justify-between gap-3 p-3 rounded-md border border-border-default hover:bg-bg-sunken/40 transition-colors\"\n              >\n                <div className=\"flex items-center gap-3 min-w-0\">\n                  <div className=\"w-8 h-8 rounded-md bg-bg-sunken flex items-center justify-center flex-shrink-0\">\n                    {agent.isActive ? (\n                      <CircleCheck className=\"w-4 h-4 text-status-success-text\" />\n                    ) : (\n                      <CircleX className=\"w-4 h-4 text-text-tertiary\" />\n                    )}\n                  </div>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-medium text-text-primary truncate\">{agent.name}</p>\n                    <p className=\"text-xs text-text-tertiary truncate\">\n                      v{agent.version}\n                      {agent.tunnelUrl ? ` · ${agent.tunnelUrl}` : ''}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span\n                    className={`text-xs px-2 py-0.5 rounded ${\n                      agent.isActive\n                        ? 'bg-status-success-bg text-status-success-text'\n                        : 'bg-bg-sunken text-text-tertiary'\n                    }`}\n                  >\n                    {agent.isActive\n                      ? tr('targetDetails.active', 'Active')\n                      : tr('targetDetails.offline', 'Offline')}\n                  </span>\n                  <ExternalLink size={14} className=\"text-text-tertiary\" />\n                </div>\n              </Link>\n            ))}\n          </div>\n        )}\n      </Card>\n\n      {/* Inbound connections */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Activity className=\"w-5 h-5\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.connections', 'Inbound connections')} ({connections.length})\n          </h3>\n        </div>\n        {connections.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Activity size={40} className=\"text-text-tertiary\" />}\n              title={tr('targetDetails.noConnections', 'No inbound connections')}\n              description={tr(\n                'targetDetails.noConnectionsBody',\n                'No agents are currently connected to this target.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {connections.map((conn: ConnectionSummary) => (\n              <div\n                key={conn.id}\n                className=\"flex items-center justify-between gap-3 p-3 rounded-md border border-border-default\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-text-primary truncate\">\n                    {conn.label || `${conn.protocol} connection`}\n                  </p>\n                  <p className=\"text-xs text-text-tertiary truncate\">\n                    {tr('targetDetails.from', 'From')}{' '}\n                    <Link\n                      to={`../agents/${conn.sourceAgent.id}`}\n                      className=\"text-action-primary-text hover:underline\"\n                    >\n                      {conn.sourceAgent.name}\n                    </Link>{' '}\n                    · {conn.protocol} · {conn.status}\n                  </p>\n                </div>\n                <span className=\"text-xs px-2 py-0.5 rounded bg-bg-sunken\">{conn.status}</span>\n              </div>\n            ))}\n          </div>\n        )}\n      </Card>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/TargetsPage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Targets Page — Manage all targets (servers, workstations, environments).
+ *
+ * Targets are the first-class entity. Each target can have agents installed,
+ * and supports two access types: Direct and SSH.
+ */
+export declare function TargetsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TargetsPage.d.ts.map

package/dist/pages/TargetsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TargetsPage.d.ts","sourceRoot":"","sources":["../../src/pages/TargetsPage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiJH,wBAAgB,WAAW,4CAy6C1B"}