@burdenoff/microfe-vibecontrols 2026.611.2 → 2026.611.4

package/dist/components/ai/AIQueueTab.js

@@ -0,0 +1,165 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { LoadingState as t } from "../shared/LoadingState.js";
+import { ErrorState as n } from "../shared/ErrorState.js";
+import { EmptyState as r } from "../shared/EmptyState.js";
+import { Card as i } from "../shared/Card.js";
+import "../shared/index.js";
+import { cancelQueueItem as a, fetchQueueItems as o } from "../../services/aiApi.js";
+import { notify as s } from "../../lib/toast.js";
+import { useCallback as c, useEffect as l, useState as u } from "react";
+import { AlertCircle as d, Ban as f, CheckCircle2 as p, Clock as m, ListChecks as h, Loader2 as g, RefreshCw as _, X as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/ai/AIQueueTab.tsx
+var S = {
+	pending: {
+		label: "Pending",
+		cls: "bg-status-warning-bg text-status-warning-text",
+		icon: m
+	},
+	processing: {
+		label: "Processing",
+		cls: "bg-action-primary-bg/20 text-action-primary-bg",
+		icon: g
+	},
+	completed: {
+		label: "Completed",
+		cls: "bg-status-success-bg text-status-success-text",
+		icon: p
+	},
+	failed: {
+		label: "Failed",
+		cls: "bg-status-error-bg text-status-error-text",
+		icon: d
+	},
+	cancelled: {
+		label: "Cancelled",
+		cls: "bg-bg-sunken text-text-secondary",
+		icon: f
+	}
+};
+function C({ agent: d, onNavigateToSession: f }) {
+	let p = e(), [m, g] = u([]), [C, w] = u(!0), [T, E] = u(null), [D, O] = u(null), k = c(async (e) => {
+		if (d.id) {
+			e && w(!0);
+			try {
+				g(await o(d)), E(null);
+			} catch (e) {
+				E(e.message);
+			} finally {
+				e && w(!1);
+			}
+		}
+	}, [d]);
+	l(() => {
+		k(!0);
+		let e = window.setInterval(() => void k(!1), 15e3);
+		return () => window.clearInterval(e);
+	}, [k]);
+	let A = async (e) => {
+		O(e);
+		try {
+			await a(d, e), s.success(p("aiQueue.cancelled", "Queued item cancelled")), await k(!1);
+		} catch (e) {
+			s.error(p("aiQueue.cancelFailed", "Could not cancel"), e.message);
+		} finally {
+			O(null);
+		}
+	};
+	if (!d.id) return /* @__PURE__ */ b(r, {
+		icon: /* @__PURE__ */ b(h, { className: "size-10" }),
+		title: p("aiQueue.noAgentTitle", "No active agent"),
+		description: p("aiQueue.noAgentDesc", "Start or attach an agent to queue AI prompts for background processing.")
+	});
+	if (C && m.length === 0) return /* @__PURE__ */ b(t, {});
+	if (T && m.length === 0) return /* @__PURE__ */ b(n, {
+		message: T,
+		onRetry: () => void k(!0)
+	});
+	let j = m.filter((e) => e.status === "pending" || e.status === "processing").length;
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ x("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("h3", {
+				className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+				children: [/* @__PURE__ */ b(h, { className: "size-5" }), p("aiQueue.title", "AI Queue")]
+			}), /* @__PURE__ */ b("p", {
+				className: "text-sm text-text-secondary",
+				children: p("aiQueue.subtitle", "Prompts queued for background processing on this agent — queue at night, review in the morning.")
+			})] }), /* @__PURE__ */ x("button", {
+				type: "button",
+				onClick: () => void k(!0),
+				className: "flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-sm text-text-primary hover:bg-bg-sunken",
+				children: [/* @__PURE__ */ b(_, { className: `size-4 ${C ? "animate-spin" : ""}` }), p("common.refresh", "Refresh")]
+			})]
+		}), m.length === 0 ? /* @__PURE__ */ b(r, {
+			icon: /* @__PURE__ */ b(h, { className: "size-10" }),
+			title: p("aiQueue.emptyTitle", "Queue is empty"),
+			description: p("aiQueue.emptyDesc", "Dispatch a prompt with \"Queue\" instead of \"Run\" to have the agent process it in the background.")
+		}) : /* @__PURE__ */ x(y, { children: [j > 0 && /* @__PURE__ */ x("p", {
+			className: "text-xs text-text-tertiary",
+			children: [
+				j,
+				" ",
+				p("aiQueue.inFlight", "in flight"),
+				" · ",
+				m.length,
+				" ",
+				p("aiQueue.total", "total")
+			]
+		}), /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b("ul", {
+			className: "divide-y divide-border-subtle",
+			children: m.map((e) => {
+				let t = S[e.status], n = t.icon;
+				return /* @__PURE__ */ x("li", {
+					className: "flex items-center gap-3 px-4 py-3",
+					children: [
+						/* @__PURE__ */ x("span", {
+							className: `inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${t.cls}`,
+							children: [/* @__PURE__ */ b(n, { className: `size-3.5 ${e.status === "processing" ? "animate-spin" : ""}` }), t.label]
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ b("button", {
+									type: "button",
+									onClick: () => f?.(e.sessionId),
+									className: "truncate text-left font-mono text-sm text-text-primary hover:underline",
+									title: p("aiQueue.openSession", "Open the session this prompt runs in"),
+									children: e.sessionId
+								}),
+								/* @__PURE__ */ x("div", {
+									className: "text-xs text-text-tertiary",
+									children: [
+										p("aiQueue.attempt", "attempt"),
+										" ",
+										e.attempts,
+										"/",
+										e.maxAttempts,
+										e.createdAt ? ` · ${new Date(e.createdAt).toLocaleString()}` : ""
+									]
+								}),
+								e.lastError && /* @__PURE__ */ b("div", {
+									className: "mt-0.5 truncate text-xs text-status-error-text",
+									children: e.lastError
+								})
+							]
+						}),
+						e.status === "pending" && /* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: () => void A(e.id),
+							disabled: D === e.id,
+							className: "shrink-0 rounded p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50",
+							"aria-label": p("common.cancel", "Cancel"),
+							children: /* @__PURE__ */ b(v, { className: "size-4" })
+						})
+					]
+				}, e.id);
+			})
+		}) })] })]
+	});
+}
+//#endregion
+export { C as AIQueueTab };
+
+//# sourceMappingURL=AIQueueTab.js.map

package/dist/components/ai/AIQueueTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIQueueTab.js","names":[],"sources":["../../../src/components/ai/AIQueueTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport {\n  ListChecks,\n  RefreshCw,\n  X,\n  AlertCircle,\n  Clock,\n  Loader2,\n  CheckCircle2,\n  Ban,\n} from 'lucide-react';\nimport { Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport type { AIQueueItem, AgentRef } from '@/services/aiApi';\nimport { fetchQueueItems, cancelQueueItem } from '@/services/aiApi';\nimport { notify } from '@/lib/toast';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIQueueTabProps {\n  agent: AgentRef;\n  onNavigateToSession?: (sessionId: string) => void;\n}\n\nconst STATUS_META: Record<\n  AIQueueItem['status'],\n  { label: string; cls: string; icon: typeof Clock }\n> = {\n  pending: { label: 'Pending', cls: 'bg-status-warning-bg text-status-warning-text', icon: Clock },\n  processing: {\n    label: 'Processing',\n    cls: 'bg-action-primary-bg/20 text-action-primary-bg',\n    icon: Loader2,\n  },\n  completed: {\n    label: 'Completed',\n    cls: 'bg-status-success-bg text-status-success-text',\n    icon: CheckCircle2,\n  },\n  failed: { label: 'Failed', cls: 'bg-status-error-bg text-status-error-text', icon: AlertCircle },\n  cancelled: { label: 'Cancelled', cls: 'bg-bg-sunken text-text-secondary', icon: Ban },\n};\n\n/**\n * AIQueueTab — the \"queue overnight, review in the morning\" surface. Lists the queued AI prompts on\n * the active agent (the agent runs them in the background), with per-item status, attempts, and\n * errors, plus cancel for anything still pending. Auto-refreshes so a morning check shows the latest\n * results. Backed by the agent's `/ai/queue` API (fetchQueueItems / cancelQueueItem) — the same\n * governed agent surface the rest of AI mode uses.\n */\nexport function AIQueueTab({ agent, onNavigateToSession }: AIQueueTabProps): React.ReactElement {\n  const tr = useTr();\n  const [items, setItems] = useState<AIQueueItem[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [cancelling, setCancelling] = useState<string | null>(null);\n\n  const load = useCallback(\n    async (showSpinner: boolean): Promise<void> => {\n      if (!agent.id) return;\n      if (showSpinner) setLoading(true);\n      try {\n        const data = await fetchQueueItems(agent);\n        setItems(data);\n        setError(null);\n      } catch (err) {\n        setError((err as Error).message);\n      } finally {\n        if (showSpinner) setLoading(false);\n      }\n    },\n    [agent]\n  );\n\n  useEffect(() => {\n    void load(true);\n    // Poll while items are still in flight so a left-open tab updates itself overnight.\n    const timer = window.setInterval(() => void load(false), 15000);\n    return () => window.clearInterval(timer);\n  }, [load]);\n\n  const handleCancel = async (id: string): Promise<void> => {\n    setCancelling(id);\n    try {\n      await cancelQueueItem(agent, id);\n      notify.success(tr('aiQueue.cancelled', 'Queued item cancelled'));\n      await load(false);\n    } catch (err) {\n      notify.error(tr('aiQueue.cancelFailed', 'Could not cancel'), (err as Error).message);\n    } finally {\n      setCancelling(null);\n    }\n  };\n\n  if (!agent.id) {\n    return (\n      <EmptyState\n        icon={<ListChecks className=\"size-10\" />}\n        title={tr('aiQueue.noAgentTitle', 'No active agent')}\n        description={tr(\n          'aiQueue.noAgentDesc',\n          'Start or attach an agent to queue AI prompts for background processing.'\n        )}\n      />\n    );\n  }\n\n  if (loading && items.length === 0) return <LoadingState />;\n  if (error && items.length === 0) {\n    return <ErrorState message={error} onRetry={() => void load(true)} />;\n  }\n\n  const pendingCount = items.filter(\n    (i) => i.status === 'pending' || i.status === 'processing'\n  ).length;\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <ListChecks className=\"size-5\" />\n            {tr('aiQueue.title', 'AI Queue')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'aiQueue.subtitle',\n              'Prompts queued for background processing on this agent — queue at night, review in the morning.'\n            )}\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => void load(true)}\n          className=\"flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-sm text-text-primary hover:bg-bg-sunken\"\n        >\n          <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n          {tr('common.refresh', 'Refresh')}\n        </button>\n      </div>\n\n      {items.length === 0 ? (\n        <EmptyState\n          icon={<ListChecks className=\"size-10\" />}\n          title={tr('aiQueue.emptyTitle', 'Queue is empty')}\n          description={tr(\n            'aiQueue.emptyDesc',\n            'Dispatch a prompt with \"Queue\" instead of \"Run\" to have the agent process it in the background.'\n          )}\n        />\n      ) : (\n        <>\n          {pendingCount > 0 && (\n            <p className=\"text-xs text-text-tertiary\">\n              {pendingCount} {tr('aiQueue.inFlight', 'in flight')} · {items.length}{' '}\n              {tr('aiQueue.total', 'total')}\n            </p>\n          )}\n          <Card>\n            <ul className=\"divide-y divide-border-subtle\">\n              {items.map((item) => {\n                const meta = STATUS_META[item.status];\n                const StatusIcon = meta.icon;\n                return (\n                  <li key={item.id} className=\"flex items-center gap-3 px-4 py-3\">\n                    <span\n                      className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${meta.cls}`}\n                    >\n                      <StatusIcon\n                        className={`size-3.5 ${item.status === 'processing' ? 'animate-spin' : ''}`}\n                      />\n                      {meta.label}\n                    </span>\n                    <div className=\"min-w-0 flex-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => onNavigateToSession?.(item.sessionId)}\n                        className=\"truncate text-left font-mono text-sm text-text-primary hover:underline\"\n                        title={tr('aiQueue.openSession', 'Open the session this prompt runs in')}\n                      >\n                        {item.sessionId}\n                      </button>\n                      <div className=\"text-xs text-text-tertiary\">\n                        {tr('aiQueue.attempt', 'attempt')} {item.attempts}/{item.maxAttempts}\n                        {item.createdAt ? ` · ${new Date(item.createdAt).toLocaleString()}` : ''}\n                      </div>\n                      {item.lastError && (\n                        <div className=\"mt-0.5 truncate text-xs text-status-error-text\">\n                          {item.lastError}\n                        </div>\n                      )}\n                    </div>\n                    {item.status === 'pending' && (\n                      <button\n                        type=\"button\"\n                        onClick={() => void handleCancel(item.id)}\n                        disabled={cancelling === item.id}\n                        className=\"shrink-0 rounded p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50\"\n                        aria-label={tr('common.cancel', 'Cancel')}\n                      >\n                        <X className=\"size-4\" />\n                      </button>\n                    )}\n                  </li>\n                );\n              })}\n            </ul>\n          </Card>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/tunnels/TunnelPublicAccessPanel.js

@@ -0,0 +1,132 @@
+import { useRevokeTunnelPublicAccessMutation as e, useSetTunnelPublicAccessMutation as t } from "../../generated/wspace-operations.js";
+import { notify as n } from "../../lib/toast.js";
+import { useState as r } from "react";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Check as a, Clock as o, Copy as s, Globe as c, ShieldOff as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/tunnels/TunnelPublicAccessPanel.tsx
+var f = [
+	{
+		key: "1h",
+		seconds: 3600
+	},
+	{
+		key: "4h",
+		seconds: 14400
+	},
+	{
+		key: "24h",
+		seconds: 86400
+	},
+	{
+		key: "7d",
+		seconds: 604800
+	}
+], p = ({ tunnelId: p, tunnelStatus: m, publicAccessExpiresAt: h, publicUrl: g, onChanged: _ }) => {
+	let { t: v } = i(), y = (e, t) => {
+		let n = v(e);
+		return n === e ? t : n;
+	}, [b, x] = r(f[1].seconds), [S, C] = r(!1), [w, { loading: T }] = t(), [E, { loading: D }] = e(), O = h ? new Date(h) : null, k = !!(O && O.getTime() > Date.now()), A = (e) => ({
+		"1h": "1 hour",
+		"4h": "4 hours",
+		"24h": "24 hours",
+		"7d": "7 days"
+	})[e] ?? e, j = async () => {
+		try {
+			await w({ variables: {
+				tunnelId: p,
+				ttlSeconds: b
+			} }), _(), n.success(y("tunPublic.granted", "Public access granted"), y("tunPublic.grantedDesc", "The link auto-expires when the window ends."));
+		} catch (e) {
+			n.error(y("tunPublic.grantFailed", "Could not grant access"), e.message);
+		}
+	}, M = async () => {
+		try {
+			await E({ variables: { tunnelId: p } }), _(), n.success(y("tunPublic.revoked", "Public access revoked — the link is dead"));
+		} catch (e) {
+			n.error(y("tunPublic.revokeFailed", "Could not revoke"), e.message);
+		}
+	}, N = async () => {
+		if (g) try {
+			await navigator.clipboard.writeText(g), C(!0), n.success(y("tunPublic.copied", "Public URL copied")), window.setTimeout(() => C(!1), 1500);
+		} catch {
+			n.error(y("tunPublic.copyFailed", "Could not copy — copy it manually"), g);
+		}
+	};
+	return /* @__PURE__ */ d("section", {
+		className: "md:col-span-2 rounded-lg border border-border-subtle bg-bg-surface p-4",
+		children: [/* @__PURE__ */ d("h3", {
+			className: "mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary",
+			children: [/* @__PURE__ */ u(c, { className: "size-4" }), y("tunPublic.title", "Time-limited public access")]
+		}), k && O ? /* @__PURE__ */ d("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2 rounded-md bg-status-success-bg px-3 py-2 text-sm text-status-success-text",
+					children: [/* @__PURE__ */ u(o, { className: "size-4 shrink-0" }), /* @__PURE__ */ d("span", { children: [
+						y("tunPublic.liveUntil", "Public until"),
+						" ",
+						/* @__PURE__ */ u("strong", { children: O.toLocaleString() }),
+						m !== "ACTIVE" && /* @__PURE__ */ u("span", {
+							className: "ml-1 text-text-tertiary",
+							children: y("tunPublic.notRunning", "(start the tunnel for the URL to serve)")
+						})
+					] })]
+				}),
+				g && /* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2 rounded-md border border-border-default px-3 py-2",
+					children: [/* @__PURE__ */ u("span", {
+						className: "flex-1 truncate font-mono text-xs text-text-secondary",
+						children: g
+					}), /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => void N(),
+						className: "p-1 text-text-secondary hover:text-text-primary",
+						"aria-label": y("common.copy", "Copy"),
+						children: S ? /* @__PURE__ */ u(a, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ u(s, { className: "size-4" })
+					})]
+				}),
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => void M(),
+					disabled: D,
+					className: "flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken disabled:opacity-50",
+					children: [/* @__PURE__ */ u(l, { className: "size-4" }), y("tunPublic.revoke", "Revoke now")]
+				})
+			]
+		}) : /* @__PURE__ */ d("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ u("p", {
+				className: "text-sm text-text-secondary",
+				children: y("tunPublic.off", "Public access is off. Grant a time-boxed window and the link tears itself down when it ends.")
+			}), /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-end gap-3",
+				children: [/* @__PURE__ */ d("label", {
+					className: "flex-1 min-w-[10rem]",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-sm text-text-secondary",
+						children: y("tunPublic.window", "Access window")
+					}), /* @__PURE__ */ u("select", {
+						value: b,
+						onChange: (e) => x(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: f.map((e) => /* @__PURE__ */ u("option", {
+							value: e.seconds,
+							children: y(`tunPublic.ttl.${e.key}`, A(e.key))
+						}, e.key))
+					})]
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => void j(),
+					disabled: T,
+					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__ */ u(c, { className: "size-4" }), y("tunPublic.grant", "Grant public access")]
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+export { p as TunnelPublicAccessPanel };
+
+//# sourceMappingURL=TunnelPublicAccessPanel.js.map

package/dist/components/tunnels/TunnelPublicAccessPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelPublicAccessPanel.js","names":[],"sources":["../../../src/components/tunnels/TunnelPublicAccessPanel.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { Globe, Copy, Check, Clock, ShieldOff } from 'lucide-react';\n\nimport { notify } from '@/lib/toast';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useSetTunnelPublicAccessMutation,\n  useRevokeTunnelPublicAccessMutation,\n} from '@/generated/wspace-operations';\n\ninterface TunnelPublicAccessPanelProps {\n  tunnelId: string;\n  tunnelStatus: string;\n  publicAccessExpiresAt?: string | null;\n  publicUrl?: string | null;\n  onChanged: () => void;\n}\n\n// TTL choices in seconds, inside the svc's 300 (5m) … 2592000 (30d) bounds.\nconst TTL_OPTIONS = [\n  { key: '1h', seconds: 3600 },\n  { key: '4h', seconds: 14_400 },\n  { key: '24h', seconds: 86_400 },\n  { key: '7d', seconds: 604_800 },\n];\n\n/**\n * TunnelPublicAccessPanel — grant a time-boxed public link to a tunnel and have it tear itself down.\n * Picking a window stamps `publicAccessExpiresAt = now + ttl`; a backend sweep stops the tunnel (the\n * public URL goes dead) the moment it lapses, so a \"share my localhost for 4 hours\" or \"open this DB\n * port to a contractor until tonight\" link can't outlive its purpose. Revoke kills it immediately.\n * This is the UI half of the beta-tester-tunnel / local-port-share / database-port-forward stories.\n */\nexport const TunnelPublicAccessPanel: FC<TunnelPublicAccessPanelProps> = ({\n  tunnelId,\n  tunnelStatus,\n  publicAccessExpiresAt,\n  publicUrl,\n  onChanged,\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 [ttlSeconds, setTtlSeconds] = useState(TTL_OPTIONS[1].seconds);\n  const [copied, setCopied] = useState(false);\n  const [setAccess, { loading: granting }] = useSetTunnelPublicAccessMutation();\n  const [revokeAccess, { loading: revoking }] = useRevokeTunnelPublicAccessMutation();\n\n  const expiresAt = publicAccessExpiresAt ? new Date(publicAccessExpiresAt) : null;\n  const isActive = Boolean(expiresAt && expiresAt.getTime() > Date.now());\n  const ttlLabel = (key: string): string =>\n    ({ '1h': '1 hour', '4h': '4 hours', '24h': '24 hours', '7d': '7 days' })[key] ?? key;\n\n  const handleGrant = async (): Promise<void> => {\n    try {\n      await setAccess({ variables: { tunnelId, ttlSeconds } });\n      onChanged();\n      notify.success(\n        tr('tunPublic.granted', 'Public access granted'),\n        tr('tunPublic.grantedDesc', 'The link auto-expires when the window ends.')\n      );\n    } catch (err) {\n      notify.error(tr('tunPublic.grantFailed', 'Could not grant access'), (err as Error).message);\n    }\n  };\n\n  const handleRevoke = async (): Promise<void> => {\n    try {\n      await revokeAccess({ variables: { tunnelId } });\n      onChanged();\n      notify.success(tr('tunPublic.revoked', 'Public access revoked — the link is dead'));\n    } catch (err) {\n      notify.error(tr('tunPublic.revokeFailed', 'Could not revoke'), (err as Error).message);\n    }\n  };\n\n  const copyUrl = async (): Promise<void> => {\n    if (!publicUrl) return;\n    try {\n      await navigator.clipboard.writeText(publicUrl);\n      setCopied(true);\n      notify.success(tr('tunPublic.copied', 'Public URL copied'));\n      window.setTimeout(() => setCopied(false), 1500);\n    } catch {\n      notify.error(tr('tunPublic.copyFailed', 'Could not copy — copy it manually'), publicUrl);\n    }\n  };\n\n  return (\n    <section className=\"md:col-span-2 rounded-lg border border-border-subtle bg-bg-surface p-4\">\n      <h3 className=\"mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n        <Globe className=\"size-4\" />\n        {tr('tunPublic.title', 'Time-limited public access')}\n      </h3>\n\n      {isActive && expiresAt ? (\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-2 rounded-md bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n            <Clock className=\"size-4 shrink-0\" />\n            <span>\n              {tr('tunPublic.liveUntil', 'Public until')}{' '}\n              <strong>{expiresAt.toLocaleString()}</strong>\n              {tunnelStatus !== 'ACTIVE' && (\n                <span className=\"ml-1 text-text-tertiary\">\n                  {tr('tunPublic.notRunning', '(start the tunnel for the URL to serve)')}\n                </span>\n              )}\n            </span>\n          </div>\n          {publicUrl && (\n            <div className=\"flex items-center gap-2 rounded-md border border-border-default px-3 py-2\">\n              <span className=\"flex-1 truncate font-mono text-xs text-text-secondary\">\n                {publicUrl}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => void copyUrl()}\n                className=\"p-1 text-text-secondary hover:text-text-primary\"\n                aria-label={tr('common.copy', 'Copy')}\n              >\n                {copied ? (\n                  <Check className=\"size-4 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"size-4\" />\n                )}\n              </button>\n            </div>\n          )}\n          <button\n            type=\"button\"\n            onClick={() => void handleRevoke()}\n            disabled={revoking}\n            className=\"flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken disabled:opacity-50\"\n          >\n            <ShieldOff className=\"size-4\" />\n            {tr('tunPublic.revoke', 'Revoke now')}\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'tunPublic.off',\n              'Public access is off. Grant a time-boxed window and the link tears itself down when it ends.'\n            )}\n          </p>\n          <div className=\"flex flex-wrap items-end gap-3\">\n            <label className=\"flex-1 min-w-[10rem]\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('tunPublic.window', 'Access window')}\n              </span>\n              <select\n                value={ttlSeconds}\n                onChange={(e) => setTtlSeconds(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                {TTL_OPTIONS.map((o) => (\n                  <option key={o.key} value={o.seconds}>\n                    {tr(`tunPublic.ttl.${o.key}`, ttlLabel(o.key))}\n                  </option>\n                ))}\n              </select>\n            </label>\n            <button\n              type=\"button\"\n              onClick={() => void handleGrant()}\n              disabled={granting}\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              <Globe className=\"size-4\" />\n              {tr('tunPublic.grant', 'Grant public access')}\n            </button>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}