@burdenoff/microfe-vibecontrols 2026.610.6 → 2026.610.8

package/dist/components/sessions/SessionPublicLinkPanel.js

@@ -0,0 +1,232 @@
+import { useCreateSessionShareLinkMutation as e, useGetSessionShareLinksQuery as t, useRevokeSessionShareLinkMutation as n } from "../../generated/wspace-operations.js";
+import { LoadingState as r } from "../shared/LoadingState.js";
+import { ErrorState as i } from "../shared/ErrorState.js";
+import { SessionSharePermission as a } from "../../generated/wspace-types.js";
+import "../shared/index.js";
+import { notify as o } from "../../lib/toast.js";
+import { useState as s } from "react";
+import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Check as l, Copy as u, Eye as d, Keyboard as f, Link2 as p, Lock as m, Plus as h, Trash2 as g, X as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/sessions/SessionPublicLinkPanel.tsx
+var x = [
+	{
+		label: "1 hour",
+		hours: 1
+	},
+	{
+		label: "4 hours",
+		hours: 4
+	},
+	{
+		label: "24 hours",
+		hours: 24
+	},
+	{
+		label: "No expiry",
+		hours: 0
+	}
+], S = ({ sessionId: S, sessionName: w, onClose: T }) => {
+	let { t: E } = c(), D = (e, t) => {
+		let n = E(e);
+		return n === e ? t : n;
+	}, { data: O, loading: k, error: A, refetch: j } = t({
+		variables: { sessionId: S },
+		fetchPolicy: "cache-and-network"
+	}), [M, { loading: N }] = e(), [P] = n(), [F, I] = s(!1), [L, R] = s(4), [z, B] = s(""), [V, H] = s(""), [U, W] = s(null), G = O?.sessionShareLinks ?? [], K = G.filter((e) => e.status === "ACTIVE"), q = async (e, t) => {
+		try {
+			await navigator.clipboard.writeText(e), W(t), o.success(D("sessLink.copied", "Link copied")), window.setTimeout(() => W(null), 1500);
+		} catch {
+			o.error(D("sessLink.copyFailed", "Could not copy — copy it manually"), e);
+		}
+	}, J = async (e) => {
+		e.preventDefault();
+		let t = V.trim() ? Number.parseInt(V.trim(), 10) : null;
+		if (t !== null && (!Number.isFinite(t) || t < 1)) {
+			o.error(D("sessLink.badMax", "Max uses must be a positive number"));
+			return;
+		}
+		try {
+			let e = await M({ variables: { input: {
+				sessionId: S,
+				permission: F ? a.Interact : a.View,
+				expiresInHours: L > 0 ? L : null,
+				password: z.trim() ? z.trim() : null,
+				maxUses: t
+			} } });
+			await j();
+			let n = e.data?.createSessionShareLink.shareUrl;
+			n && await q(n, e.data?.createSessionShareLink.id ?? "new"), o.success(D("sessLink.created", "Share link created"), F ? D("sessLink.createdInteract", "Recipient can request keyboard control") : D("sessLink.createdView", "Recipient can watch the terminal (view-only)")), B(""), H("");
+		} catch (e) {
+			o.error(D("sessLink.createFailed", "Could not create link"), e.message);
+		}
+	}, Y = async (e) => {
+		try {
+			await P({ variables: { id: e } }), await j(), o.success(D("sessLink.revoked", "Link revoked — it no longer works"));
+		} catch (e) {
+			o.error(D("sessLink.revokeFailed", "Could not revoke"), e.message);
+		}
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+		onClick: T,
+		children: /* @__PURE__ */ b("div", {
+			className: "w-full max-w-lg rounded-lg border border-border-default bg-bg-surface p-5 shadow-lg",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ b("div", {
+					className: "mb-4 flex items-start justify-between",
+					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("h3", {
+						className: "flex items-center gap-2 text-lg font-semibold text-text-primary",
+						children: [/* @__PURE__ */ y(p, { className: "size-5" }), D("sessLink.title", "Share link")]
+					}), /* @__PURE__ */ y("p", {
+						className: "mt-0.5 text-sm text-text-secondary",
+						children: w
+					})] }), /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: T,
+						className: "p-1 text-text-tertiary hover:text-text-primary",
+						"aria-label": D("common.close", "Close"),
+						children: /* @__PURE__ */ y(_, { className: "size-5" })
+					})]
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "mb-4 space-y-2",
+					children: k && G.length === 0 ? /* @__PURE__ */ y(r, {}) : A ? /* @__PURE__ */ y(i, {
+						message: A.message,
+						onRetry: () => void j()
+					}) : K.length === 0 ? /* @__PURE__ */ y("p", {
+						className: "text-sm text-text-secondary",
+						children: D("sessLink.none", "No share links yet. Create one below.")
+					}) : /* @__PURE__ */ y("ul", {
+						className: "space-y-2",
+						children: K.map((e) => /* @__PURE__ */ b("li", {
+							className: "flex items-center gap-2 rounded-md border border-border-default px-3 py-2",
+							children: [
+								/* @__PURE__ */ y(C, { children: e.permission === a.Interact ? /* @__PURE__ */ b(v, { children: [
+									/* @__PURE__ */ y(f, { className: "size-3" }),
+									" ",
+									D("sessLink.interact", "Interactive")
+								] }) : /* @__PURE__ */ b(v, { children: [
+									/* @__PURE__ */ y(d, { className: "size-3" }),
+									" ",
+									D("sessLink.view", "View")
+								] }) }),
+								e.hasPassword && /* @__PURE__ */ y(m, {
+									className: "size-3.5 text-text-tertiary",
+									"aria-label": "password"
+								}),
+								/* @__PURE__ */ y("span", {
+									className: "flex-1 truncate font-mono text-xs text-text-secondary",
+									children: e.shareUrl
+								}),
+								/* @__PURE__ */ b("span", {
+									className: "shrink-0 text-xs text-text-tertiary",
+									children: [
+										e.useCount,
+										e.maxUses ? `/${e.maxUses}` : "",
+										" ",
+										D("sessLink.uses", "uses")
+									]
+								}),
+								/* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: () => void q(e.shareUrl, e.id),
+									className: "p-1 text-text-secondary hover:text-text-primary",
+									"aria-label": D("common.copy", "Copy"),
+									children: U === e.id ? /* @__PURE__ */ y(l, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ y(u, { className: "size-4" })
+								}),
+								/* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: () => void Y(e.id),
+									className: "p-1 text-text-secondary hover:text-action-danger-text",
+									"aria-label": D("common.revoke", "Revoke"),
+									children: /* @__PURE__ */ y(g, { className: "size-4" })
+								})
+							]
+						}, e.id))
+					})
+				}),
+				/* @__PURE__ */ b("form", {
+					onSubmit: (e) => void J(e),
+					className: "space-y-3 border-t border-border-default pt-4",
+					children: [
+						/* @__PURE__ */ b("label", {
+							className: "flex cursor-pointer items-center gap-2 text-sm text-text-primary",
+							children: [
+								/* @__PURE__ */ y("input", {
+									type: "checkbox",
+									checked: F,
+									onChange: (e) => I(e.target.checked),
+									className: "rounded border-border-default"
+								}),
+								/* @__PURE__ */ y(f, { className: "size-3.5" }),
+								D("sessLink.allowInteract", "Allow interactive control (recipient can request the keyboard)")
+							]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "flex flex-col gap-3 sm:flex-row",
+							children: [/* @__PURE__ */ b("label", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
+									children: D("sessLink.expiry", "Expires")
+								}), /* @__PURE__ */ y("select", {
+									value: L,
+									onChange: (e) => R(Number(e.target.value)),
+									className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary",
+									children: x.map((e) => /* @__PURE__ */ y("option", {
+										value: e.hours,
+										children: e.label
+									}, e.label))
+								})]
+							}), /* @__PURE__ */ b("label", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
+									children: D("sessLink.maxUses", "Max uses (optional)")
+								}), /* @__PURE__ */ y("input", {
+									value: V,
+									onChange: (e) => H(e.target.value),
+									inputMode: "numeric",
+									placeholder: D("sessLink.unlimited", "unlimited"),
+									className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ b("label", {
+							className: "block",
+							children: [/* @__PURE__ */ y("span", {
+								className: "text-sm text-text-secondary",
+								children: D("sessLink.password", "Password (optional)")
+							}), /* @__PURE__ */ y("input", {
+								value: z,
+								onChange: (e) => B(e.target.value),
+								type: "password",
+								autoComplete: "new-password",
+								placeholder: D("sessLink.noPassword", "no password"),
+								className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
+							})]
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "flex justify-end",
+							children: /* @__PURE__ */ b("button", {
+								type: "submit",
+								disabled: N,
+								className: "flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:opacity-90 disabled:opacity-50",
+								children: [/* @__PURE__ */ y(h, { className: "size-4" }), D("sessLink.create", "Create share link")]
+							})
+						})
+					]
+				})
+			]
+		})
+	});
+}, C = ({ children: e }) => /* @__PURE__ */ y("span", {
+	className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-primary",
+	children: e
+});
+//#endregion
+export { S as SessionPublicLinkPanel };
+
+//# sourceMappingURL=SessionPublicLinkPanel.js.map

package/dist/components/sessions/SessionPublicLinkPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionPublicLinkPanel.js","names":[],"sources":["../../../src/components/sessions/SessionPublicLinkPanel.tsx"],"sourcesContent":["import type { FC, FormEvent, ReactNode } from 'react';\nimport { useState } from 'react';\nimport { Link2, Keyboard, Eye, Lock, Copy, Trash2, Plus, X, Check } from 'lucide-react';\n\nimport { LoadingState, ErrorState } from '@/components/shared';\nimport { notify } from '@/lib/toast';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useGetSessionShareLinksQuery,\n  useCreateSessionShareLinkMutation,\n  useRevokeSessionShareLinkMutation,\n  type SessionShareLinkFieldsFragment,\n} from '@/generated/wspace-operations';\nimport { SessionSharePermission } from '@/generated/wspace-types';\n\ninterface SessionPublicLinkPanelProps {\n  sessionId: string;\n  sessionName: string;\n  onClose: () => void;\n}\n\nconst EXPIRY_OPTIONS = [\n  { label: '1 hour', hours: 1 },\n  { label: '4 hours', hours: 4 },\n  { label: '24 hours', hours: 24 },\n  { label: 'No expiry', hours: 0 },\n];\n\n/**\n * SessionPublicLinkPanel — create and manage expiring share links to a live terminal session, with\n * the controls the live-session-share story promises but the generic member-share dialog dropped:\n * viewer vs interactive permission, an **expiry**, an optional **password**, and an optional\n * **usage limit**. Links point at the live `share/:token` page (the real collaborative terminal,\n * not an auth'd accept page). Backed by the existing `createSessionShareLink` mutation — no backend\n * change.\n */\nexport const SessionPublicLinkPanel: FC<SessionPublicLinkPanelProps> = ({\n  sessionId,\n  sessionName,\n  onClose,\n}) => {\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 } = useGetSessionShareLinksQuery({\n    variables: { sessionId },\n    fetchPolicy: 'cache-and-network',\n  });\n  const [createLink, { loading: creating }] = useCreateSessionShareLinkMutation();\n  const [revokeLink] = useRevokeSessionShareLinkMutation();\n\n  const [interactive, setInteractive] = useState(false);\n  const [expiryHours, setExpiryHours] = useState(4);\n  const [password, setPassword] = useState('');\n  const [maxUses, setMaxUses] = useState('');\n  const [copiedId, setCopiedId] = useState<string | null>(null);\n\n  const links: SessionShareLinkFieldsFragment[] = data?.sessionShareLinks ?? [];\n  const activeLinks = links.filter((l) => l.status === 'ACTIVE');\n\n  const copy = async (url: string, id: string): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(url);\n      setCopiedId(id);\n      notify.success(tr('sessLink.copied', 'Link copied'));\n      window.setTimeout(() => setCopiedId(null), 1500);\n    } catch {\n      notify.error(tr('sessLink.copyFailed', 'Could not copy — copy it manually'), url);\n    }\n  };\n\n  const handleCreate = async (e: FormEvent): Promise<void> => {\n    e.preventDefault();\n    const parsedMax = maxUses.trim() ? Number.parseInt(maxUses.trim(), 10) : null;\n    if (parsedMax !== null && (!Number.isFinite(parsedMax) || parsedMax < 1)) {\n      notify.error(tr('sessLink.badMax', 'Max uses must be a positive number'));\n      return;\n    }\n    try {\n      const res = await createLink({\n        variables: {\n          input: {\n            sessionId,\n            permission: interactive ? SessionSharePermission.Interact : SessionSharePermission.View,\n            expiresInHours: expiryHours > 0 ? expiryHours : null,\n            password: password.trim() ? password.trim() : null,\n            maxUses: parsedMax,\n          },\n        },\n      });\n      await refetch();\n      const url = res.data?.createSessionShareLink.shareUrl;\n      if (url) await copy(url, res.data?.createSessionShareLink.id ?? 'new');\n      notify.success(\n        tr('sessLink.created', 'Share link created'),\n        interactive\n          ? tr('sessLink.createdInteract', 'Recipient can request keyboard control')\n          : tr('sessLink.createdView', 'Recipient can watch the terminal (view-only)')\n      );\n      setPassword('');\n      setMaxUses('');\n    } catch (err) {\n      notify.error(tr('sessLink.createFailed', 'Could not create link'), (err as Error).message);\n    }\n  };\n\n  const handleRevoke = async (id: string): Promise<void> => {\n    try {\n      await revokeLink({ variables: { id } });\n      await refetch();\n      notify.success(tr('sessLink.revoked', 'Link revoked — it no longer works'));\n    } catch (err) {\n      notify.error(tr('sessLink.revokeFailed', 'Could not revoke'), (err as Error).message);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\"\n      onClick={onClose}\n    >\n      <div\n        className=\"w-full max-w-lg rounded-lg border border-border-default bg-bg-surface p-5 shadow-lg\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"mb-4 flex items-start justify-between\">\n          <div>\n            <h3 className=\"flex items-center gap-2 text-lg font-semibold text-text-primary\">\n              <Link2 className=\"size-5\" />\n              {tr('sessLink.title', 'Share link')}\n            </h3>\n            <p className=\"mt-0.5 text-sm text-text-secondary\">{sessionName}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1 text-text-tertiary hover:text-text-primary\"\n            aria-label={tr('common.close', 'Close')}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        <div className=\"mb-4 space-y-2\">\n          {loading && links.length === 0 ? (\n            <LoadingState />\n          ) : error ? (\n            <ErrorState message={error.message} onRetry={() => void refetch()} />\n          ) : activeLinks.length === 0 ? (\n            <p className=\"text-sm text-text-secondary\">\n              {tr('sessLink.none', 'No share links yet. Create one below.')}\n            </p>\n          ) : (\n            <ul className=\"space-y-2\">\n              {activeLinks.map((l) => (\n                <li\n                  key={l.id}\n                  className=\"flex items-center gap-2 rounded-md border border-border-default px-3 py-2\"\n                >\n                  <Badge>\n                    {l.permission === SessionSharePermission.Interact ? (\n                      <>\n                        <Keyboard className=\"size-3\" /> {tr('sessLink.interact', 'Interactive')}\n                      </>\n                    ) : (\n                      <>\n                        <Eye className=\"size-3\" /> {tr('sessLink.view', 'View')}\n                      </>\n                    )}\n                  </Badge>\n                  {l.hasPassword && (\n                    <Lock className=\"size-3.5 text-text-tertiary\" aria-label=\"password\" />\n                  )}\n                  <span className=\"flex-1 truncate font-mono text-xs text-text-secondary\">\n                    {l.shareUrl}\n                  </span>\n                  <span className=\"shrink-0 text-xs text-text-tertiary\">\n                    {l.useCount}\n                    {l.maxUses ? `/${l.maxUses}` : ''} {tr('sessLink.uses', 'uses')}\n                  </span>\n                  <button\n                    type=\"button\"\n                    onClick={() => void copy(l.shareUrl, l.id)}\n                    className=\"p-1 text-text-secondary hover:text-text-primary\"\n                    aria-label={tr('common.copy', 'Copy')}\n                  >\n                    {copiedId === l.id ? (\n                      <Check className=\"size-4 text-status-success-text\" />\n                    ) : (\n                      <Copy className=\"size-4\" />\n                    )}\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => void handleRevoke(l.id)}\n                    className=\"p-1 text-text-secondary hover:text-action-danger-text\"\n                    aria-label={tr('common.revoke', 'Revoke')}\n                  >\n                    <Trash2 className=\"size-4\" />\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n\n        <form\n          onSubmit={(e) => void handleCreate(e)}\n          className=\"space-y-3 border-t border-border-default pt-4\"\n        >\n          <label className=\"flex cursor-pointer items-center gap-2 text-sm text-text-primary\">\n            <input\n              type=\"checkbox\"\n              checked={interactive}\n              onChange={(e) => setInteractive(e.target.checked)}\n              className=\"rounded border-border-default\"\n            />\n            <Keyboard className=\"size-3.5\" />\n            {tr(\n              'sessLink.allowInteract',\n              'Allow interactive control (recipient can request the keyboard)'\n            )}\n          </label>\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <label className=\"flex-1\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('sessLink.expiry', 'Expires')}\n              </span>\n              <select\n                value={expiryHours}\n                onChange={(e) => setExpiryHours(Number(e.target.value))}\n                className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              >\n                {EXPIRY_OPTIONS.map((o) => (\n                  <option key={o.label} value={o.hours}>\n                    {o.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n            <label className=\"flex-1\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('sessLink.maxUses', 'Max uses (optional)')}\n              </span>\n              <input\n                value={maxUses}\n                onChange={(e) => setMaxUses(e.target.value)}\n                inputMode=\"numeric\"\n                placeholder={tr('sessLink.unlimited', 'unlimited')}\n                className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </label>\n          </div>\n          <label className=\"block\">\n            <span className=\"text-sm text-text-secondary\">\n              {tr('sessLink.password', 'Password (optional)')}\n            </span>\n            <input\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              type=\"password\"\n              autoComplete=\"new-password\"\n              placeholder={tr('sessLink.noPassword', 'no password')}\n              className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            />\n          </label>\n          <div className=\"flex justify-end\">\n            <button\n              type=\"submit\"\n              disabled={creating}\n              className=\"flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n            >\n              <Plus className=\"size-4\" />\n              {tr('sessLink.create', 'Create share link')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n};\n\nconst Badge: FC<{ children: ReactNode }> = ({ children }) => (\n  <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-primary\">\n    {children}\n  </span>\n);\n"],"mappings":"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"}

package/dist/components/vibedeck/VibeDeckPublicLinkPanel.js

@@ -0,0 +1,232 @@
+import { useCreateVibeDeckShareLinkMutation as e, useListVibeDeckShareLinksQuery as t, useRevokeVibeDeckShareLinkMutation as n } from "../../generated/wspace-operations.js";
+import { LoadingState as r } from "../shared/LoadingState.js";
+import { ErrorState as i } from "../shared/ErrorState.js";
+import { VibeDeckSharePermission as a } from "../../generated/wspace-types.js";
+import "../shared/index.js";
+import { notify as o } from "../../lib/toast.js";
+import { useState as s } from "react";
+import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Check as l, Copy as u, Eye as d, Link2 as f, Lock as p, Play as m, Plus as h, Trash2 as g, X as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/vibedeck/VibeDeckPublicLinkPanel.tsx
+var x = [
+	{
+		label: "4 hours",
+		hours: 4
+	},
+	{
+		label: "24 hours",
+		hours: 24
+	},
+	{
+		label: "7 days",
+		hours: 168
+	},
+	{
+		label: "No expiry",
+		hours: 0
+	}
+], S = ({ vibeDeckId: S, vibeDeckName: w, onClose: T }) => {
+	let { t: E } = c(), D = (e, t) => {
+		let n = E(e);
+		return n === e ? t : n;
+	}, { data: O, loading: k, error: A, refetch: j } = t({
+		variables: { vibeDeckId: S },
+		fetchPolicy: "cache-and-network"
+	}), [M, { loading: N }] = e(), [P] = n(), [F, I] = s(!0), [L, R] = s(4), [z, B] = s(""), [V, H] = s(""), [U, W] = s(null), G = O?.vibeDeckShareLinks ?? [], K = G.filter((e) => e.status === "ACTIVE"), q = async (e, t) => {
+		try {
+			await navigator.clipboard.writeText(e), W(t), o.success(D("deckLink.copied", "Link copied")), window.setTimeout(() => W(null), 1500);
+		} catch {
+			o.error(D("deckLink.copyFailed", "Could not copy — copy it manually"), e);
+		}
+	}, J = async (e) => {
+		e.preventDefault();
+		let t = V.trim() ? Number.parseInt(V.trim(), 10) : null;
+		if (t !== null && (!Number.isFinite(t) || t < 1)) {
+			o.error(D("deckLink.badMax", "Max uses must be a positive number"));
+			return;
+		}
+		try {
+			let e = await M({ variables: { input: {
+				vibeDeckId: S,
+				permission: F ? a.Execute : a.View,
+				expiresInHours: L > 0 ? L : null,
+				password: z.trim() ? z.trim() : null,
+				maxUses: t
+			} } });
+			await j();
+			let n = e.data?.createVibeDeckShareLink.shareUrl;
+			n && await q(n, e.data?.createVibeDeckShareLink.id ?? "new"), o.success(D("deckLink.created", "Public link created"), F ? D("deckLink.createdExec", "Anyone with the link can run the deck tiles") : D("deckLink.createdView", "Anyone with the link can view the deck")), B(""), H("");
+		} catch (e) {
+			o.error(D("deckLink.createFailed", "Could not create link"), e.message);
+		}
+	}, Y = async (e) => {
+		try {
+			await P({ variables: { id: e } }), await j(), o.success(D("deckLink.revoked", "Link revoked — it no longer works"));
+		} catch (e) {
+			o.error(D("deckLink.revokeFailed", "Could not revoke"), e.message);
+		}
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+		onClick: T,
+		children: /* @__PURE__ */ b("div", {
+			className: "w-full max-w-lg rounded-lg border border-border-default bg-bg-surface p-5 shadow-lg",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ b("div", {
+					className: "mb-4 flex items-start justify-between",
+					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("h3", {
+						className: "flex items-center gap-2 text-lg font-semibold text-text-primary",
+						children: [/* @__PURE__ */ y(f, { className: "size-5" }), D("deckLink.title", "Public links")]
+					}), /* @__PURE__ */ y("p", {
+						className: "mt-0.5 text-sm text-text-secondary",
+						children: w
+					})] }), /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: T,
+						className: "p-1 text-text-tertiary hover:text-text-primary",
+						"aria-label": D("common.close", "Close"),
+						children: /* @__PURE__ */ y(_, { className: "size-5" })
+					})]
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "mb-4 space-y-2",
+					children: k && G.length === 0 ? /* @__PURE__ */ y(r, {}) : A ? /* @__PURE__ */ y(i, {
+						message: A.message,
+						onRetry: () => void j()
+					}) : K.length === 0 ? /* @__PURE__ */ y("p", {
+						className: "text-sm text-text-secondary",
+						children: D("deckLink.none", "No public links yet. Create one below.")
+					}) : /* @__PURE__ */ y("ul", {
+						className: "space-y-2",
+						children: K.map((e) => /* @__PURE__ */ b("li", {
+							className: "flex items-center gap-2 rounded-md border border-border-default px-3 py-2",
+							children: [
+								/* @__PURE__ */ y(C, { children: e.permission === a.Execute ? /* @__PURE__ */ b(v, { children: [
+									/* @__PURE__ */ y(m, { className: "size-3" }),
+									" ",
+									D("deckLink.execute", "Execute")
+								] }) : /* @__PURE__ */ b(v, { children: [
+									/* @__PURE__ */ y(d, { className: "size-3" }),
+									" ",
+									D("deckLink.view", "View")
+								] }) }),
+								e.hasPassword && /* @__PURE__ */ y(p, {
+									className: "size-3.5 text-text-tertiary",
+									"aria-label": "password"
+								}),
+								/* @__PURE__ */ y("span", {
+									className: "flex-1 truncate font-mono text-xs text-text-secondary",
+									children: e.shareUrl
+								}),
+								/* @__PURE__ */ b("span", {
+									className: "shrink-0 text-xs text-text-tertiary",
+									children: [
+										e.useCount,
+										e.maxUses ? `/${e.maxUses}` : "",
+										" ",
+										D("deckLink.uses", "uses")
+									]
+								}),
+								/* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: () => void q(e.shareUrl, e.id),
+									className: "p-1 text-text-secondary hover:text-text-primary",
+									"aria-label": D("common.copy", "Copy"),
+									children: U === e.id ? /* @__PURE__ */ y(l, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ y(u, { className: "size-4" })
+								}),
+								/* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: () => void Y(e.id),
+									className: "p-1 text-text-secondary hover:text-action-danger-text",
+									"aria-label": D("common.revoke", "Revoke"),
+									children: /* @__PURE__ */ y(g, { className: "size-4" })
+								})
+							]
+						}, e.id))
+					})
+				}),
+				/* @__PURE__ */ b("form", {
+					onSubmit: (e) => void J(e),
+					className: "space-y-3 border-t border-border-default pt-4",
+					children: [
+						/* @__PURE__ */ b("label", {
+							className: "flex cursor-pointer items-center gap-2 text-sm text-text-primary",
+							children: [
+								/* @__PURE__ */ y("input", {
+									type: "checkbox",
+									checked: F,
+									onChange: (e) => I(e.target.checked),
+									className: "rounded border-border-default"
+								}),
+								/* @__PURE__ */ y(m, { className: "size-3.5" }),
+								D("deckLink.allowExecution", "Allow execution (anyone with the link can run tiles)")
+							]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "flex flex-col gap-3 sm:flex-row",
+							children: [/* @__PURE__ */ b("label", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
+									children: D("deckLink.expiry", "Expires")
+								}), /* @__PURE__ */ y("select", {
+									value: L,
+									onChange: (e) => R(Number(e.target.value)),
+									className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary",
+									children: x.map((e) => /* @__PURE__ */ y("option", {
+										value: e.hours,
+										children: e.label
+									}, e.label))
+								})]
+							}), /* @__PURE__ */ b("label", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
+									children: D("deckLink.maxUses", "Max uses (optional)")
+								}), /* @__PURE__ */ y("input", {
+									value: V,
+									onChange: (e) => H(e.target.value),
+									inputMode: "numeric",
+									placeholder: D("deckLink.unlimited", "unlimited"),
+									className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ b("label", {
+							className: "block",
+							children: [/* @__PURE__ */ y("span", {
+								className: "text-sm text-text-secondary",
+								children: D("deckLink.password", "Password (optional)")
+							}), /* @__PURE__ */ y("input", {
+								value: z,
+								onChange: (e) => B(e.target.value),
+								type: "password",
+								autoComplete: "new-password",
+								placeholder: D("deckLink.noPassword", "no password"),
+								className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
+							})]
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "flex justify-end",
+							children: /* @__PURE__ */ b("button", {
+								type: "submit",
+								disabled: N,
+								className: "flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:opacity-90 disabled:opacity-50",
+								children: [/* @__PURE__ */ y(h, { className: "size-4" }), D("deckLink.create", "Create public link")]
+							})
+						})
+					]
+				})
+			]
+		})
+	});
+}, C = ({ children: e }) => /* @__PURE__ */ y("span", {
+	className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-primary",
+	children: e
+});
+//#endregion
+export { S as VibeDeckPublicLinkPanel };
+
+//# sourceMappingURL=VibeDeckPublicLinkPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibeDeckPublicLinkPanel.js","names":[],"sources":["../../../src/components/vibedeck/VibeDeckPublicLinkPanel.tsx"],"sourcesContent":["import type { FC, FormEvent, ReactNode } from 'react';\nimport { useState } from 'react';\nimport { Link2, Play, Eye, Lock, Copy, Trash2, Plus, X, Check } from 'lucide-react';\n\nimport { LoadingState, ErrorState } from '@/components/shared';\nimport { notify } from '@/lib/toast';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useListVibeDeckShareLinksQuery,\n  useCreateVibeDeckShareLinkMutation,\n  useRevokeVibeDeckShareLinkMutation,\n  type VibeDeckShareLinkFieldsFragment,\n} from '@/generated/wspace-operations';\nimport { VibeDeckSharePermission } from '@/generated/wspace-types';\n\ninterface VibeDeckPublicLinkPanelProps {\n  vibeDeckId: string;\n  vibeDeckName: string;\n  onClose: () => void;\n}\n\nconst EXPIRY_OPTIONS = [\n  { label: '4 hours', hours: 4 },\n  { label: '24 hours', hours: 24 },\n  { label: '7 days', hours: 168 },\n  { label: 'No expiry', hours: 0 },\n];\n\n/**\n * VibeDeckPublicLinkPanel — create and manage public links to a VibeDeck with explicit\n * **execution** control. Unlike the generic member-share dialog, this exposes the deck story's\n * promised controls: \"Public access + Allow execution + optional password + expiry + usage limit\".\n * Links carry a `VibeDeckSharePermission` (VIEW or EXECUTE); the URL points at the live\n * `deck/:token` page (not an auth'd accept page). Backed by the existing `createVibeDeckShareLink`\n * mutation — no backend change.\n */\nexport const VibeDeckPublicLinkPanel: FC<VibeDeckPublicLinkPanelProps> = ({\n  vibeDeckId,\n  vibeDeckName,\n  onClose,\n}) => {\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 } = useListVibeDeckShareLinksQuery({\n    variables: { vibeDeckId },\n    fetchPolicy: 'cache-and-network',\n  });\n  const [createLink, { loading: creating }] = useCreateVibeDeckShareLinkMutation();\n  const [revokeLink] = useRevokeVibeDeckShareLinkMutation();\n\n  const [allowExecution, setAllowExecution] = useState(true);\n  const [expiryHours, setExpiryHours] = useState(4);\n  const [password, setPassword] = useState('');\n  const [maxUses, setMaxUses] = useState('');\n  const [copiedId, setCopiedId] = useState<string | null>(null);\n\n  const links: VibeDeckShareLinkFieldsFragment[] = data?.vibeDeckShareLinks ?? [];\n  const activeLinks = links.filter((l) => l.status === 'ACTIVE');\n\n  const copy = async (url: string, id: string): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(url);\n      setCopiedId(id);\n      notify.success(tr('deckLink.copied', 'Link copied'));\n      window.setTimeout(() => setCopiedId(null), 1500);\n    } catch {\n      notify.error(tr('deckLink.copyFailed', 'Could not copy — copy it manually'), url);\n    }\n  };\n\n  const handleCreate = async (e: FormEvent): Promise<void> => {\n    e.preventDefault();\n    const parsedMax = maxUses.trim() ? Number.parseInt(maxUses.trim(), 10) : null;\n    if (parsedMax !== null && (!Number.isFinite(parsedMax) || parsedMax < 1)) {\n      notify.error(tr('deckLink.badMax', 'Max uses must be a positive number'));\n      return;\n    }\n    try {\n      const res = await createLink({\n        variables: {\n          input: {\n            vibeDeckId,\n            permission: allowExecution\n              ? VibeDeckSharePermission.Execute\n              : VibeDeckSharePermission.View,\n            expiresInHours: expiryHours > 0 ? expiryHours : null,\n            password: password.trim() ? password.trim() : null,\n            maxUses: parsedMax,\n          },\n        },\n      });\n      await refetch();\n      const url = res.data?.createVibeDeckShareLink.shareUrl;\n      if (url) await copy(url, res.data?.createVibeDeckShareLink.id ?? 'new');\n      notify.success(\n        tr('deckLink.created', 'Public link created'),\n        allowExecution\n          ? tr('deckLink.createdExec', 'Anyone with the link can run the deck tiles')\n          : tr('deckLink.createdView', 'Anyone with the link can view the deck')\n      );\n      setPassword('');\n      setMaxUses('');\n    } catch (err) {\n      notify.error(tr('deckLink.createFailed', 'Could not create link'), (err as Error).message);\n    }\n  };\n\n  const handleRevoke = async (id: string): Promise<void> => {\n    try {\n      await revokeLink({ variables: { id } });\n      await refetch();\n      notify.success(tr('deckLink.revoked', 'Link revoked — it no longer works'));\n    } catch (err) {\n      notify.error(tr('deckLink.revokeFailed', 'Could not revoke'), (err as Error).message);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\"\n      onClick={onClose}\n    >\n      <div\n        className=\"w-full max-w-lg rounded-lg border border-border-default bg-bg-surface p-5 shadow-lg\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"mb-4 flex items-start justify-between\">\n          <div>\n            <h3 className=\"flex items-center gap-2 text-lg font-semibold text-text-primary\">\n              <Link2 className=\"size-5\" />\n              {tr('deckLink.title', 'Public links')}\n            </h3>\n            <p className=\"mt-0.5 text-sm text-text-secondary\">{vibeDeckName}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1 text-text-tertiary hover:text-text-primary\"\n            aria-label={tr('common.close', 'Close')}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {/* Existing links */}\n        <div className=\"mb-4 space-y-2\">\n          {loading && links.length === 0 ? (\n            <LoadingState />\n          ) : error ? (\n            <ErrorState message={error.message} onRetry={() => void refetch()} />\n          ) : activeLinks.length === 0 ? (\n            <p className=\"text-sm text-text-secondary\">\n              {tr('deckLink.none', 'No public links yet. Create one below.')}\n            </p>\n          ) : (\n            <ul className=\"space-y-2\">\n              {activeLinks.map((l) => (\n                <li\n                  key={l.id}\n                  className=\"flex items-center gap-2 rounded-md border border-border-default px-3 py-2\"\n                >\n                  <Badge>\n                    {l.permission === VibeDeckSharePermission.Execute ? (\n                      <>\n                        <Play className=\"size-3\" /> {tr('deckLink.execute', 'Execute')}\n                      </>\n                    ) : (\n                      <>\n                        <Eye className=\"size-3\" /> {tr('deckLink.view', 'View')}\n                      </>\n                    )}\n                  </Badge>\n                  {l.hasPassword && (\n                    <Lock className=\"size-3.5 text-text-tertiary\" aria-label=\"password\" />\n                  )}\n                  <span className=\"flex-1 truncate font-mono text-xs text-text-secondary\">\n                    {l.shareUrl}\n                  </span>\n                  <span className=\"shrink-0 text-xs text-text-tertiary\">\n                    {l.useCount}\n                    {l.maxUses ? `/${l.maxUses}` : ''} {tr('deckLink.uses', 'uses')}\n                  </span>\n                  <button\n                    type=\"button\"\n                    onClick={() => void copy(l.shareUrl, l.id)}\n                    className=\"p-1 text-text-secondary hover:text-text-primary\"\n                    aria-label={tr('common.copy', 'Copy')}\n                  >\n                    {copiedId === l.id ? (\n                      <Check className=\"size-4 text-status-success-text\" />\n                    ) : (\n                      <Copy className=\"size-4\" />\n                    )}\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => void handleRevoke(l.id)}\n                    className=\"p-1 text-text-secondary hover:text-action-danger-text\"\n                    aria-label={tr('common.revoke', 'Revoke')}\n                  >\n                    <Trash2 className=\"size-4\" />\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n\n        {/* Create form */}\n        <form\n          onSubmit={(e) => void handleCreate(e)}\n          className=\"space-y-3 border-t border-border-default pt-4\"\n        >\n          <label className=\"flex cursor-pointer items-center gap-2 text-sm text-text-primary\">\n            <input\n              type=\"checkbox\"\n              checked={allowExecution}\n              onChange={(e) => setAllowExecution(e.target.checked)}\n              className=\"rounded border-border-default\"\n            />\n            <Play className=\"size-3.5\" />\n            {tr('deckLink.allowExecution', 'Allow execution (anyone with the link can run tiles)')}\n          </label>\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <label className=\"flex-1\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('deckLink.expiry', 'Expires')}\n              </span>\n              <select\n                value={expiryHours}\n                onChange={(e) => setExpiryHours(Number(e.target.value))}\n                className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              >\n                {EXPIRY_OPTIONS.map((o) => (\n                  <option key={o.label} value={o.hours}>\n                    {o.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n            <label className=\"flex-1\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('deckLink.maxUses', 'Max uses (optional)')}\n              </span>\n              <input\n                value={maxUses}\n                onChange={(e) => setMaxUses(e.target.value)}\n                inputMode=\"numeric\"\n                placeholder={tr('deckLink.unlimited', 'unlimited')}\n                className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </label>\n          </div>\n          <label className=\"block\">\n            <span className=\"text-sm text-text-secondary\">\n              {tr('deckLink.password', 'Password (optional)')}\n            </span>\n            <input\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              type=\"password\"\n              autoComplete=\"new-password\"\n              placeholder={tr('deckLink.noPassword', 'no password')}\n              className=\"mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            />\n          </label>\n          <div className=\"flex justify-end\">\n            <button\n              type=\"submit\"\n              disabled={creating}\n              className=\"flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n            >\n              <Plus className=\"size-4\" />\n              {tr('deckLink.create', 'Create public link')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n};\n\nconst Badge: FC<{ children: ReactNode }> = ({ children }) => (\n  <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-primary\">\n    {children}\n  </span>\n);\n"],"mappings":"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"}

package/dist/components/vibedeck/index.js

@@ -4,4 +4,5 @@ import "./VibeDeckSwitcher.js";
 import "./VibeDeckForm.js";
 import "./VibeDeckButtonForm.js";
 import "./VibeDeckShareDialog.js";
+import "./VibeDeckPublicLinkPanel.js";
 import "./VibeDeckExecutionLog.js";

package/dist/generated/wspace-types.js

@@ -34,13 +34,15 @@ var e = /* @__PURE__ */ function(e) {
 }({}), g = /* @__PURE__ */ function(e) {
 	return e.Csv = "CSV", e.Json = "JSON", e;
 }({}), _ = /* @__PURE__ */ function(e) {
-	return e.Action = "ACTION", e.AiContext = "AI_CONTEXT", e.AiPrompt = "AI_PROMPT", e.InstructionFile = "INSTRUCTION_FILE", e.Sandbox = "SANDBOX", e.ScheduledJob = "SCHEDULED_JOB", e.Tunnel = "TUNNEL", e.VibeDeck = "VIBE_DECK", e;
+	return e.Execute = "EXECUTE", e.View = "VIEW", e;
 }({}), v = /* @__PURE__ */ function(e) {
-	return e.Private = "PRIVATE", e.SharedWithVibe = "SHARED_WITH_VIBE", e;
+	return e.Action = "ACTION", e.AiContext = "AI_CONTEXT", e.AiPrompt = "AI_PROMPT", e.InstructionFile = "INSTRUCTION_FILE", e.Sandbox = "SANDBOX", e.ScheduledJob = "SCHEDULED_JOB", e.Tunnel = "TUNNEL", e.VibeDeck = "VIBE_DECK", e;
 }({}), y = /* @__PURE__ */ function(e) {
+	return e.Private = "PRIVATE", e.SharedWithVibe = "SHARED_WITH_VIBE", e;
+}({}), b = /* @__PURE__ */ function(e) {
 	return e.Custom = "CUSTOM", e.Script = "SCRIPT", e.Ssh = "SSH", e.Terminal = "TERMINAL", e.Tmux = "TMUX", e.Wezterm = "WEZTERM", e.Zellij = "ZELLIJ", e;
 }({});
 //#endregion
-export { e as AgentCapabilityScope, t as AnalyticsEntityType, n as CollaboratorRole, r as DeploymentEnvironment, i as InstructionFilename, a as InstructionScope, o as MeshSessionKind, s as NoteVisibility, c as SessionSharePermission, l as TunnelDomainType, u as TunnelDomainVerificationStatus, d as TunnelEnvironment, f as TunnelProtocol, p as TunnelProviderKey, m as TunnelSessionStatus, h as TunnelStatus, g as VibeAuditExportFormat, _ as VibeEntityType, v as VibeVisibility, y as VibecontrolsSessionType };
+export { e as AgentCapabilityScope, t as AnalyticsEntityType, n as CollaboratorRole, r as DeploymentEnvironment, i as InstructionFilename, a as InstructionScope, o as MeshSessionKind, s as NoteVisibility, c as SessionSharePermission, l as TunnelDomainType, u as TunnelDomainVerificationStatus, d as TunnelEnvironment, f as TunnelProtocol, p as TunnelProviderKey, m as TunnelSessionStatus, h as TunnelStatus, g as VibeAuditExportFormat, _ as VibeDeckSharePermission, v as VibeEntityType, y as VibeVisibility, b as VibecontrolsSessionType };
 
 //# sourceMappingURL=wspace-types.js.map