npm - @burdenoff/microfe-vibecontrols - Versions diffs - 2026.623.1 → 2026.623.3 - Mend

@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

package/dist/pages/tunnels/tabs/TunnelDomainsTab.js CHANGED Viewed

@@ -21,14 +21,14 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 	return /* @__PURE__ */ d("div", {
 		className: "max-w-4xl",
 		children: [p && /* @__PURE__ */ d("section", {
-			className: "rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6",
+			className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 mb-6",
 			children: [
 				/* @__PURE__ */ u("h3", {
-					className: "text-sm font-semibold text-text-primary mb-3",
+					className: "text-sm font-semibold text-text-primary tracking-tight mb-3",
 					children: h("vibecontrols.tunnels.domains.attachCustomDomain", "Attach a custom domain")
 				}),
 				/* @__PURE__ */ u("p", {
-					className: "text-xs text-text-secondary mb-3",
+					className: "text-xs text-text-secondary mb-4",
 					children: "Register a user-owned FQDN. You'll be asked to create a TXT record to prove ownership before the domain can be attached."
 				}),
 				/* @__PURE__ */ d("div", {
@@ -39,24 +39,24 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 						value: _,
 						onChange: (e) => v(e.target.value),
 						placeholder: "preview.example.com",
-						className: "flex-1 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none"
+						className: "flex-1 rounded-input border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary placeholder:text-text-placeholder transition-colors focus:border-border-strong focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)]"
 					}), /* @__PURE__ */ u("button", {
 						type: "button",
 						disabled: S || !_.trim(),
 						onClick: () => void E(),
-						className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50",
+						className: "rounded-button bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						children: S ? h("vibecontrols.tunnels.domains.adding", "Adding...") : h("vibecontrols.tunnels.domains.addDomain", "Add domain")
 					})]
 				}),
 				y && /* @__PURE__ */ u("p", {
-					className: "mt-2 text-xs text-status-error-fg",
+					className: "mt-2 text-xs text-status-error-text",
 					children: y
 				})
 			]
 		}), /* @__PURE__ */ u("div", {
-			className: "rounded-lg border border-border-subtle bg-bg-surface overflow-x-auto",
+			className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 overflow-x-auto",
 			children: D.length === 0 ? /* @__PURE__ */ u("div", {
-				className: "p-4 text-sm text-text-muted",
+				className: "p-5 text-sm text-text-muted",
 				children: "No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the Tunnels tab."
 			}) : /* @__PURE__ */ d("table", {
 				className: "min-w-[480px] w-full text-sm",
@@ -64,26 +64,26 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 					className: "border-b border-border-subtle bg-bg-sunken",
 					children: [
 						/* @__PURE__ */ u("th", {
-							className: "px-4 py-2 text-left text-xs font-medium text-text-muted",
+							className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted",
 							children: "Domain"
 						}),
 						/* @__PURE__ */ u("th", {
-							className: "px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap",
+							className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap",
 							children: "Status"
 						}),
 						/* @__PURE__ */ u("th", {
-							className: "px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap",
+							className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap",
 							children: "Type"
 						}),
 						/* @__PURE__ */ u("th", {
-							className: "px-4 py-2 text-right text-xs font-medium text-text-muted whitespace-nowrap",
+							className: "px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap",
 							children: "Actions"
 						})
 					]
 				}) }), /* @__PURE__ */ u("tbody", {
 					className: "divide-y divide-border-subtle",
 					children: D.map((e) => /* @__PURE__ */ d(c, { children: [/* @__PURE__ */ d("tr", {
-						className: "align-middle",
+						className: "align-middle hover:bg-bg-sunken transition-colors",
 						children: [
 							/* @__PURE__ */ u("td", {
 								className: "px-4 py-3",
@@ -110,7 +110,7 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 									children: [m && e.verificationStatus === o.Pending && /* @__PURE__ */ u("button", {
 										type: "button",
 										onClick: () => void T({ variables: { domainId: e.id } }),
-										className: "rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated",
+										className: "rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 										children: "Verify"
 									}), m && /* @__PURE__ */ u("button", {
 										type: "button",
@@ -118,7 +118,7 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 											tunnelId: f.id,
 											domainId: e.id
 										} }),
-										className: "rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated",
+										className: "rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 										children: "Detach"
 									})]
 								})
@@ -128,7 +128,7 @@ function f({ tunnel: f, canCreate: p, canUpdate: m }) {
 						colSpan: 4,
 						className: "px-4 pb-3 pt-0",
 						children: /* @__PURE__ */ d("div", {
-							className: "rounded-md bg-bg-sunken p-2 text-xs text-text-secondary",
+							className: "rounded-button border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary",
 							children: [/* @__PURE__ */ u("div", { children: "Create this TXT record to verify:" }), /* @__PURE__ */ d("div", {
 								className: "font-mono text-text-primary mt-1 break-all",
 								children: [

package/dist/pages/tunnels/tabs/TunnelDomainsTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelDomainsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelDomainsTab.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n useRegisterCustomTunnelDomainMutation,\n useAttachTunnelDomainMutation,\n useDetachTunnelDomainMutation,\n useVerifyTunnelDomainMutation,\n useGetTunnelQuery,\n} from '@/generated/wspace-operations';\nimport { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\nimport { DomainVerificationBadge } from '@/components/tunnels/DomainVerificationBadge';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelDomainsTab({\n tunnel,\n canCreate,\n canUpdate,\n}: {\n tunnel: TunnelDetails;\n canCreate: boolean;\n canUpdate: boolean;\n}) {\n const tr = useTr();\n const { refetch } = useGetTunnelQuery({ variables: { id: tunnel.id } });\n const [newHostname, setNewHostname] = useState('');\n const [addError, setAddError] = useState<string \| null>(null);\n\n const [registerDomain, { loading: adding }] = useRegisterCustomTunnelDomainMutation({\n onCompleted: async (result) => {\n await refetch();\n if (result.registerCustomTunnelDomain.id) {\n await attachDomain({\n variables: {\n tunnelId: tunnel.id,\n domainId: result.registerCustomTunnelDomain.id,\n },\n });\n }\n setNewHostname('');\n setAddError(null);\n },\n onError: (err) => setAddError(err.message),\n });\n const [attachDomain] = useAttachTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n const [detachDomain] = useDetachTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n const [verifyDomain] = useVerifyTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n\n const handleAdd = async () => {\n const trimmed = newHostname.trim().toLowerCase();\n if (!trimmed) return;\n await registerDomain({ variables: { input: { hostname: trimmed } } });\n };\n\n const domains = tunnel.domains ?? [];\n\n return (\n <div className=\"max-w-4xl\">\n {canCreate && (\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.tunnels.domains.attachCustomDomain', 'Attach a custom domain')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-3\">\n Register a user-owned FQDN. You'll be asked to create a TXT record to prove ownership\n before the domain can be attached.\n </p>\n <div className=\"flex gap-2\">\n <input\n aria-label=\"preview.example.com\"\n type=\"text\"\n value={newHostname}\n onChange={(e) => setNewHostname(e.target.value)}\n placeholder=\"preview.example.com\"\n className=\"flex-1 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none\"\n />\n <button\n type=\"button\"\n disabled={adding \|\| !newHostname.trim()}\n onClick={() => void handleAdd()}\n className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50\"\n >\n {adding\n ? tr('vibecontrols.tunnels.domains.adding', 'Adding...')\n : tr('vibecontrols.tunnels.domains.addDomain', 'Add domain')}\n </button>\n </div>\n {addError && <p className=\"mt-2 text-xs text-status-error-fg\">{addError}</p>}\n </section>\n )}\n\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface overflow-x-auto\">\n {domains.length === 0 ? (\n <div className=\"p-4 text-sm text-text-muted\">\n No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the\n Tunnels tab.\n </div>\n ) : (\n <table className=\"min-w-[480px] w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted\">Domain</th>\n <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n Status\n </th>\n <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n Type\n </th>\n <th className=\"px-4 py-2 text-right text-xs font-medium text-text-muted whitespace-nowrap\">\n Actions\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border-subtle\">\n {domains.map((domain) => (\n <Fragment key={domain.id}>\n <tr className=\"align-middle\">\n <td className=\"px-4 py-3\">\n <div className=\"font-mono text-sm text-text-primary break-all min-w-[140px]\">\n {domain.hostname}\n </div>\n </td>\n <td className=\"px-4 py-3 whitespace-nowrap\">\n <DomainVerificationBadge status={domain.verificationStatus} />\n </td>\n <td className=\"px-4 py-3 text-xs text-text-muted whitespace-nowrap\">\n {domain.type}\n {domain.isPrimary && <span className=\"ml-1\">• primary</span>}\n </td>\n <td className=\"px-4 py-3 whitespace-nowrap text-right\">\n <div className=\"flex gap-2 justify-end\">\n {canUpdate &&\n domain.verificationStatus === TunnelDomainVerificationStatus.Pending && (\n <button\n type=\"button\"\n onClick={() =>\n void verifyDomain({ variables: { domainId: domain.id } })\n }\n className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n >\n Verify\n </button>\n )}\n {canUpdate && (\n <button\n type=\"button\"\n onClick={() =>\n void detachDomain({\n variables: { tunnelId: tunnel.id, domainId: domain.id },\n })\n }\n className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n >\n Detach\n </button>\n )}\n </div>\n </td>\n </tr>\n {domain.verificationStatus === TunnelDomainVerificationStatus.Pending &&\n domain.challengeRecordName &&\n domain.challengeToken && (\n <tr>\n <td colSpan={4} className=\"px-4 pb-3 pt-0\">\n <div className=\"rounded-md bg-bg-sunken p-2 text-xs text-text-secondary\">\n <div>Create this TXT record to verify:</div>\n <div className=\"font-mono text-text-primary mt-1 break-all\">\n {domain.challengeRecordName} IN TXT "{domain.challengeToken}\n "\n </div>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n ))}\n </tbody>\n </table>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TunnelDomainsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelDomainsTab.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n useRegisterCustomTunnelDomainMutation,\n useAttachTunnelDomainMutation,\n useDetachTunnelDomainMutation,\n useVerifyTunnelDomainMutation,\n useGetTunnelQuery,\n} from '@/generated/wspace-operations';\nimport { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\nimport { DomainVerificationBadge } from '@/components/tunnels/DomainVerificationBadge';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelDomainsTab({\n tunnel,\n canCreate,\n canUpdate,\n}: {\n tunnel: TunnelDetails;\n canCreate: boolean;\n canUpdate: boolean;\n}) {\n const tr = useTr();\n const { refetch } = useGetTunnelQuery({ variables: { id: tunnel.id } });\n const [newHostname, setNewHostname] = useState('');\n const [addError, setAddError] = useState<string \| null>(null);\n\n const [registerDomain, { loading: adding }] = useRegisterCustomTunnelDomainMutation({\n onCompleted: async (result) => {\n await refetch();\n if (result.registerCustomTunnelDomain.id) {\n await attachDomain({\n variables: {\n tunnelId: tunnel.id,\n domainId: result.registerCustomTunnelDomain.id,\n },\n });\n }\n setNewHostname('');\n setAddError(null);\n },\n onError: (err) => setAddError(err.message),\n });\n const [attachDomain] = useAttachTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n const [detachDomain] = useDetachTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n const [verifyDomain] = useVerifyTunnelDomainMutation({\n onCompleted: () => void refetch(),\n });\n\n const handleAdd = async () => {\n const trimmed = newHostname.trim().toLowerCase();\n if (!trimmed) return;\n await registerDomain({ variables: { input: { hostname: trimmed } } });\n };\n\n const domains = tunnel.domains ?? [];\n\n return (\n <div className=\"max-w-4xl\">\n {canCreate && (\n <section className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 mb-6\">\n <h3 className=\"text-sm font-semibold text-text-primary tracking-tight mb-3\">\n {tr('vibecontrols.tunnels.domains.attachCustomDomain', 'Attach a custom domain')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-4\">\n Register a user-owned FQDN. You'll be asked to create a TXT record to prove ownership\n before the domain can be attached.\n </p>\n <div className=\"flex gap-2\">\n <input\n aria-label=\"preview.example.com\"\n type=\"text\"\n value={newHostname}\n onChange={(e) => setNewHostname(e.target.value)}\n placeholder=\"preview.example.com\"\n className=\"flex-1 rounded-input border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary placeholder:text-text-placeholder transition-colors focus:border-border-strong focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)]\"\n />\n <button\n type=\"button\"\n disabled={adding \|\| !newHostname.trim()}\n onClick={() => void handleAdd()}\n className=\"rounded-button bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {adding\n ? tr('vibecontrols.tunnels.domains.adding', 'Adding...')\n : tr('vibecontrols.tunnels.domains.addDomain', 'Add domain')}\n </button>\n </div>\n {addError && <p className=\"mt-2 text-xs text-status-error-text\">{addError}</p>}\n </section>\n )}\n\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 overflow-x-auto\">\n {domains.length === 0 ? (\n <div className=\"p-5 text-sm text-text-muted\">\n No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the\n Tunnels tab.\n </div>\n ) : (\n <table className=\"min-w-[480px] w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted\">\n Domain\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap\">\n Status\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap\">\n Type\n </th>\n <th className=\"px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide text-text-muted whitespace-nowrap\">\n Actions\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border-subtle\">\n {domains.map((domain) => (\n <Fragment key={domain.id}>\n <tr className=\"align-middle hover:bg-bg-sunken transition-colors\">\n <td className=\"px-4 py-3\">\n <div className=\"font-mono text-sm text-text-primary break-all min-w-[140px]\">\n {domain.hostname}\n </div>\n </td>\n <td className=\"px-4 py-3 whitespace-nowrap\">\n <DomainVerificationBadge status={domain.verificationStatus} />\n </td>\n <td className=\"px-4 py-3 text-xs text-text-muted whitespace-nowrap\">\n {domain.type}\n {domain.isPrimary && <span className=\"ml-1\">• primary</span>}\n </td>\n <td className=\"px-4 py-3 whitespace-nowrap text-right\">\n <div className=\"flex gap-2 justify-end\">\n {canUpdate &&\n domain.verificationStatus === TunnelDomainVerificationStatus.Pending && (\n <button\n type=\"button\"\n onClick={() =>\n void verifyDomain({ variables: { domainId: domain.id } })\n }\n className=\"rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n Verify\n </button>\n )}\n {canUpdate && (\n <button\n type=\"button\"\n onClick={() =>\n void detachDomain({\n variables: { tunnelId: tunnel.id, domainId: domain.id },\n })\n }\n className=\"rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n Detach\n </button>\n )}\n </div>\n </td>\n </tr>\n {domain.verificationStatus === TunnelDomainVerificationStatus.Pending &&\n domain.challengeRecordName &&\n domain.challengeToken && (\n <tr>\n <td colSpan={4} className=\"px-4 pb-3 pt-0\">\n <div className=\"rounded-button border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary\">\n <div>Create this TXT record to verify:</div>\n <div className=\"font-mono text-text-primary mt-1 break-all\">\n {domain.challengeRecordName} IN TXT "{domain.challengeToken}\n "\n </div>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n ))}\n </tbody>\n </table>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAiB,EAC/B,WACA,cACA,gBAKC;CACD,IAAM,IAAK,GAAO,EACZ,EAAE,eAAY,EAAkB,EAAE,WAAW,EAAE,IAAI,EAAO,IAAI,EAAE,CAAC,EACjE,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAU,KAAe,EAAwB,KAAK,EAEvD,CAAC,GAAgB,EAAE,SAAS,OAAY,EAAsC;EAClF,aAAa,OAAO,MAAW;AAW7B,GAVA,MAAM,GAAS,EACX,EAAO,2BAA2B,MACpC,MAAM,EAAa,EACjB,WAAW;IACT,UAAU,EAAO;IACjB,UAAU,EAAO,2BAA2B;IAC7C,EACF,CAAC,EAEJ,EAAe,GAAG,EAClB,EAAY,KAAK;;EAEnB,UAAU,MAAQ,EAAY,EAAI,QAAQ;EAC3C,CAAC,EACI,CAAC,KAAgB,EAA8B,EACnD,mBAAmB,KAAK,GAAS,EAClC,CAAC,EACI,CAAC,KAAgB,EAA8B,EACnD,mBAAmB,KAAK,GAAS,EAClC,CAAC,EACI,CAAC,KAAgB,EAA8B,EACnD,mBAAmB,KAAK,GAAS,EAClC,CAAC,EAEI,IAAY,YAAY;EAC5B,IAAM,IAAU,EAAY,MAAM,CAAC,aAAa;AAC3C,OACL,MAAM,EAAe,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAS,EAAE,EAAE,CAAC;IAGjE,IAAU,EAAO,WAAW,EAAE;AAEpC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KACC,kBAAC,WAAD;GAAS,WAAU;aAAnB;IACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,mDAAmD,yBAAyB;KAC7E,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAmC;KAG5C,CAAA;IACJ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,SAAD;MACE,cAAW;MACX,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,aAAY;MACZ,WAAU;MACV,CAAA,EACF,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,KAAU,CAAC,EAAY,MAAM;MACvC,eAAe,KAAK,GAAW;MAC/B,WAAU;gBAET,IACG,EAAG,uCAAuC,YAAY,GACtD,EAAG,0CAA0C,aAAa;MACvD,CAAA,CACL;;IACL,KAAY,kBAAC,KAAD;KAAG,WAAU;eAAuC;KAAa,CAAA;IACtE;MAGZ,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,WAAW,IAClB,kBAAC,OAAD;IAAK,WAAU;cAA8B;IAGvC,CAAA,GAEN,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAoF;OAE7F,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAsG;OAE/G,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAsG;OAE/G,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAuG;OAEhH,CAAA;MACF;QACC,CAAA,EACR,kBAAC,SAAD;KAAO,WAAU;eACd,EAAQ,KAAK,MACZ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAO;SACJ,CAAA;QACH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,GAAD,EAAyB,QAAQ,EAAO,oBAAsB,CAAA;QAC3D,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACG,EAAO,MACP,EAAO,aAAa,kBAAC,QAAD;SAAM,WAAU;mBAAO;SAAgB,CAAA,CACzD;;OACL,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACG,KACC,EAAO,uBAAuB,EAA+B,WAC3D,kBAAC,UAAD;UACE,MAAK;UACL,eACE,KAAK,EAAa,EAAE,WAAW,EAAE,UAAU,EAAO,IAAI,EAAE,CAAC;UAE3D,WAAU;oBACX;UAEQ,CAAA,EAEZ,KACC,kBAAC,UAAD;UACE,MAAK;UACL,eACE,KAAK,EAAa,EAChB,WAAW;WAAE,UAAU,EAAO;WAAI,UAAU,EAAO;WAAI,EACxD,CAAC;UAEJ,WAAU;oBACX;UAEQ,CAAA,CAEP;;QACH,CAAA;OACF;SACJ,EAAO,uBAAuB,EAA+B,WAC5D,EAAO,uBACP,EAAO,kBACL,kBAAC,MAAD,EAAA,UACE,kBAAC,MAAD;MAAI,SAAS;MAAG,WAAU;gBACxB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD,EAAA,UAAK,qCAAuC,CAAA,EAC5C,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACG,EAAO;SAAoB;SAAe,EAAO;SAAe;SAE7D;UACF;;MACH,CAAA,EACF,CAAA,CAEA,EAAA,EA3DI,EAAO,GA2DX,CACX;KACI,CAAA,CACF;;GAEN,CAAA,CACF"}

package/dist/pages/tunnels/tabs/TunnelOverviewTab.js CHANGED Viewed

@@ -130,7 +130,7 @@ function i({ tunnel: i, canUpdate: a, onChanged: o }) {
 				onChanged: o
 			}),
 			i.lastError && /* @__PURE__ */ r("section", {
-				className: "md:col-span-2 rounded-lg bg-status-error-bg p-4 text-sm text-status-error-fg",
+				className: "md:col-span-2 rounded-card border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text",
 				children: [
 					/* @__PURE__ */ n("strong", { children: "Last error:" }),
 					" ",

package/dist/pages/tunnels/tabs/TunnelOverviewTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelOverviewTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelOverviewTab.tsx"],"sourcesContent":["import type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { TunnelPublicAccessPanel } from '@/components/tunnels/TunnelPublicAccessPanel';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelOverviewTab({\n tunnel,\n canUpdate,\n onChanged,\n}: {\n tunnel: TunnelDetails;\n canUpdate: boolean;\n onChanged: () => void;\n}) {\n const tr = useTr();\n const sessionCount = tunnel.activeSessions?.length ?? 0;\n const domainCount = tunnel.domains?.length ?? 0;\n const publicUrl = tunnel.primaryDomain?.hostname\n ? `https://${tunnel.primaryDomain.hostname}`\n : null;\n return (\n <div className=\"grid gap-6 md:grid-cols-2 max-w-4xl\">\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.tunnels.overview.configuration', 'Configuration')}\n </h3>\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm\">\n <dt className=\"text-text-muted\">Slug</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.slug}</dd>\n <dt className=\"text-text-muted\">Provider</dt>\n <dd className=\"text-text-primary\">{tunnel.providerKey}</dd>\n <dt className=\"text-text-muted\">Protocol</dt>\n <dd className=\"text-text-primary\">{tunnel.protocol}</dd>\n <dt className=\"text-text-muted\">TLS mode</dt>\n <dd className=\"text-text-primary\">{tunnel.tlsMode}</dd>\n <dt className=\"text-text-muted\">Local target</dt>\n <dd className=\"text-text-primary font-mono\">\n {tunnel.localHost}:{tunnel.localPort}\n </dd>\n <dt className=\"text-text-muted\">Basic auth</dt>\n <dd className=\"text-text-primary\">\n {tunnel.hasBasicAuth ? (tunnel.basicAuthUser ?? 'configured') : 'off'}\n </dd>\n </dl>\n </section>\n\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.tunnels.overview.activity', 'Activity')}\n </h3>\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm\">\n <dt className=\"text-text-muted\">Active sessions</dt>\n <dd className=\"text-text-primary\">{sessionCount}</dd>\n <dt className=\"text-text-muted\">Attached domains</dt>\n <dd className=\"text-text-primary\">{domainCount}</dd>\n <dt className=\"text-text-muted\">Primary hostname</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.primaryDomain?.hostname ?? '—'}</dd>\n <dt className=\"text-text-muted\">Agent</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.agentId ?? '—'}</dd>\n <dt className=\"text-text-muted\">Created</dt>\n <dd className=\"text-text-primary\">{new Date(tunnel.createdAt).toLocaleString()}</dd>\n </dl>\n </section>\n\n <TunnelPublicAccessPanel\n tunnelId={tunnel.id}\n tunnelStatus={tunnel.status}\n publicAccessExpiresAt={tunnel.publicAccessExpiresAt}\n publicUrl={publicUrl}\n canUpdate={canUpdate}\n onChanged={onChanged}\n />\n\n {tunnel.lastError && (\n <section className=\"md:col-span-2 rounded-lg bg-status-error-bg p-4 text-sm text-status-error-fg\">\n <strong>Last error:</strong> {tunnel.lastError}\n </section>\n )}\n </div>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,EAAkB,EAChC,WACA,cACA,gBAKC;CACD,IAAM,IAAK,GAAO,EACZ,IAAe,EAAO,gBAAgB,UAAU,GAChD,IAAc,EAAO,SAAS,UAAU,GACxC,IAAY,EAAO,eAAe,WACpC,WAAW,EAAO,cAAc,aAChC;AACJ,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,+CAA+C,gBAAgB;KAChE,CAAA,EACL,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAS,CAAA;MACzC,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO;OAAU,CAAA;MAC9D,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAiB,CAAA;MAC3D,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAc,CAAA;MACxD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAa,CAAA;MACvD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAiB,CAAA;MACjD,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACG,EAAO;QAAU;QAAE,EAAO;QACxB;;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAe,CAAA;MAC/C,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAO,eAAgB,EAAO,iBAAiB,eAAgB;OAC7D,CAAA;MACF;OACG;;GAEV,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,0CAA0C,WAAW;KACtD,CAAA,EACL,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAoB,CAAA;MACpD,kBAAC,MAAD;OAAI,WAAU;iBAAqB;OAAkB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAqB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAAqB;OAAiB,CAAA;MACpD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAqB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO,eAAe,YAAY;OAAS,CAAA;MACxF,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAU,CAAA;MAC1C,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO,WAAW;OAAS,CAAA;MACxE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAY,CAAA;MAC5C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,IAAI,KAAK,EAAO,UAAU,CAAC,gBAAgB;OAAM,CAAA;MACjF;OACG;;GAEV,kBAAC,GAAD;IACE,UAAU,EAAO;IACjB,cAAc,EAAO;IACrB,uBAAuB,EAAO;IACnB;IACA;IACA;IACX,CAAA;GAED,EAAO,aACN,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,UAAD,EAAA,UAAQ,eAAoB,CAAA;;KAAE,EAAO;KAC7B;;GAER"}
1	+ {"version":3,"file":"TunnelOverviewTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelOverviewTab.tsx"],"sourcesContent":["import type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { TunnelPublicAccessPanel } from '@/components/tunnels/TunnelPublicAccessPanel';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelOverviewTab({\n tunnel,\n canUpdate,\n onChanged,\n}: {\n tunnel: TunnelDetails;\n canUpdate: boolean;\n onChanged: () => void;\n}) {\n const tr = useTr();\n const sessionCount = tunnel.activeSessions?.length ?? 0;\n const domainCount = tunnel.domains?.length ?? 0;\n const publicUrl = tunnel.primaryDomain?.hostname\n ? `https://${tunnel.primaryDomain.hostname}`\n : null;\n return (\n <div className=\"grid gap-6 md:grid-cols-2 max-w-4xl\">\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.tunnels.overview.configuration', 'Configuration')}\n </h3>\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm\">\n <dt className=\"text-text-muted\">Slug</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.slug}</dd>\n <dt className=\"text-text-muted\">Provider</dt>\n <dd className=\"text-text-primary\">{tunnel.providerKey}</dd>\n <dt className=\"text-text-muted\">Protocol</dt>\n <dd className=\"text-text-primary\">{tunnel.protocol}</dd>\n <dt className=\"text-text-muted\">TLS mode</dt>\n <dd className=\"text-text-primary\">{tunnel.tlsMode}</dd>\n <dt className=\"text-text-muted\">Local target</dt>\n <dd className=\"text-text-primary font-mono\">\n {tunnel.localHost}:{tunnel.localPort}\n </dd>\n <dt className=\"text-text-muted\">Basic auth</dt>\n <dd className=\"text-text-primary\">\n {tunnel.hasBasicAuth ? (tunnel.basicAuthUser ?? 'configured') : 'off'}\n </dd>\n </dl>\n </section>\n\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.tunnels.overview.activity', 'Activity')}\n </h3>\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm\">\n <dt className=\"text-text-muted\">Active sessions</dt>\n <dd className=\"text-text-primary\">{sessionCount}</dd>\n <dt className=\"text-text-muted\">Attached domains</dt>\n <dd className=\"text-text-primary\">{domainCount}</dd>\n <dt className=\"text-text-muted\">Primary hostname</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.primaryDomain?.hostname ?? '—'}</dd>\n <dt className=\"text-text-muted\">Agent</dt>\n <dd className=\"text-text-primary font-mono\">{tunnel.agentId ?? '—'}</dd>\n <dt className=\"text-text-muted\">Created</dt>\n <dd className=\"text-text-primary\">{new Date(tunnel.createdAt).toLocaleString()}</dd>\n </dl>\n </section>\n\n <TunnelPublicAccessPanel\n tunnelId={tunnel.id}\n tunnelStatus={tunnel.status}\n publicAccessExpiresAt={tunnel.publicAccessExpiresAt}\n publicUrl={publicUrl}\n canUpdate={canUpdate}\n onChanged={onChanged}\n />\n\n {tunnel.lastError && (\n <section className=\"md:col-span-2 rounded-card border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n <strong>Last error:</strong> {tunnel.lastError}\n </section>\n )}\n </div>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,EAAkB,EAChC,WACA,cACA,gBAKC;CACD,IAAM,IAAK,GAAO,EACZ,IAAe,EAAO,gBAAgB,UAAU,GAChD,IAAc,EAAO,SAAS,UAAU,GACxC,IAAY,EAAO,eAAe,WACpC,WAAW,EAAO,cAAc,aAChC;AACJ,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,+CAA+C,gBAAgB;KAChE,CAAA,EACL,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAS,CAAA;MACzC,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO;OAAU,CAAA;MAC9D,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAiB,CAAA;MAC3D,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAc,CAAA;MACxD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAa,CAAA;MAC7C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,EAAO;OAAa,CAAA;MACvD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAiB,CAAA;MACjD,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACG,EAAO;QAAU;QAAE,EAAO;QACxB;;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAe,CAAA;MAC/C,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAO,eAAgB,EAAO,iBAAiB,eAAgB;OAC7D,CAAA;MACF;OACG;;GAEV,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,0CAA0C,WAAW;KACtD,CAAA,EACL,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAoB,CAAA;MACpD,kBAAC,MAAD;OAAI,WAAU;iBAAqB;OAAkB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAqB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAAqB;OAAiB,CAAA;MACpD,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAqB,CAAA;MACrD,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO,eAAe,YAAY;OAAS,CAAA;MACxF,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAU,CAAA;MAC1C,kBAAC,MAAD;OAAI,WAAU;iBAA+B,EAAO,WAAW;OAAS,CAAA;MACxE,kBAAC,MAAD;OAAI,WAAU;iBAAkB;OAAY,CAAA;MAC5C,kBAAC,MAAD;OAAI,WAAU;iBAAqB,IAAI,KAAK,EAAO,UAAU,CAAC,gBAAgB;OAAM,CAAA;MACjF;OACG;;GAEV,kBAAC,GAAD;IACE,UAAU,EAAO;IACjB,cAAc,EAAO;IACrB,uBAAuB,EAAO;IACnB;IACA;IACA;IACX,CAAA;GAED,EAAO,aACN,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,UAAD,EAAA,UAAQ,eAAoB,CAAA;;KAAE,EAAO;KAC7B;;GAER"}

package/dist/pages/tunnels/tabs/TunnelSessionsTab.js CHANGED Viewed

@@ -22,79 +22,82 @@ function l({ tunnelId: l, canExecute: u }) {
 		title: d("vibecontrols.tunnels.sessions.emptySessionsTitle", "No sessions"),
 		description: d("vibecontrols.tunnels.sessions.emptySessionsDescription", "Sessions appear here once a tunnel is started.")
 	}) : /* @__PURE__ */ s("div", {
-		className: "rounded-lg border border-border-subtle bg-bg-surface max-w-4xl",
+		className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 max-w-4xl overflow-x-auto",
 		children: /* @__PURE__ */ c("table", {
 			className: "w-full text-sm",
 			children: [/* @__PURE__ */ s("thead", {
-				className: "border-b border-border-subtle bg-bg-sunken text-text-secondary",
+				className: "border-b border-border-subtle bg-bg-sunken text-text-muted",
 				children: /* @__PURE__ */ c("tr", { children: [
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-left font-medium",
+						className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide",
 						children: "Fingerprint"
 					}),
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-left font-medium",
+						className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide",
 						children: "Status"
 					}),
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-left font-medium",
+						className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide",
 						children: "Issued"
 					}),
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-left font-medium",
+						className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide",
 						children: "Expires"
 					}),
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-left font-medium",
+						className: "px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide",
 						children: "Bytes"
 					}),
 					/* @__PURE__ */ s("th", {
-						className: "px-4 py-3 text-right font-medium",
+						className: "px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide",
 						children: "Actions"
 					})
 				] })
-			}), /* @__PURE__ */ s("tbody", { children: _.map((e) => /* @__PURE__ */ c("tr", {
-				className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken",
-				children: [
-					/* @__PURE__ */ s("td", {
-						className: "px-4 py-3 font-mono text-xs text-text-primary",
-						children: e.tokenFingerprint
-					}),
-					/* @__PURE__ */ s("td", {
-						className: "px-4 py-3 text-text-secondary",
-						children: e.status
-					}),
-					/* @__PURE__ */ s("td", {
-						className: "px-4 py-3 text-text-muted",
-						children: new Date(e.issuedAt).toLocaleString()
-					}),
-					/* @__PURE__ */ s("td", {
-						className: "px-4 py-3 text-text-muted",
-						children: new Date(e.expiresAt).toLocaleString()
-					}),
-					/* @__PURE__ */ c("td", {
-						className: "px-4 py-3 text-text-muted",
-						children: [
-							"↓ ",
-							e.bytesIn,
-							" / ↑ ",
-							e.bytesOut
-						]
-					}),
-					/* @__PURE__ */ s("td", {
-						className: "px-4 py-3 text-right",
-						children: u && (e.status === a.Issued || e.status === a.Connected) && /* @__PURE__ */ s("button", {
-							type: "button",
-							onClick: () => void g({ variables: {
-								sessionId: e.id,
-								reason: "revoked from UI"
-							} }),
-							className: "rounded-md border border-border-default px-3 py-1 text-xs text-status-error-fg hover:bg-status-error-bg",
-							children: d("vibecontrols.tunnels.sessions.revoke", "Revoke")
+			}), /* @__PURE__ */ s("tbody", {
+				className: "divide-y divide-border-subtle",
+				children: _.map((e) => /* @__PURE__ */ c("tr", {
+					className: "hover:bg-bg-sunken transition-colors",
+					children: [
+						/* @__PURE__ */ s("td", {
+							className: "px-4 py-3 font-mono text-xs text-text-primary",
+							children: e.tokenFingerprint
+						}),
+						/* @__PURE__ */ s("td", {
+							className: "px-4 py-3 text-text-secondary",
+							children: e.status
+						}),
+						/* @__PURE__ */ s("td", {
+							className: "px-4 py-3 text-text-muted tabular-nums",
+							children: new Date(e.issuedAt).toLocaleString()
+						}),
+						/* @__PURE__ */ s("td", {
+							className: "px-4 py-3 text-text-muted tabular-nums",
+							children: new Date(e.expiresAt).toLocaleString()
+						}),
+						/* @__PURE__ */ c("td", {
+							className: "px-4 py-3 text-text-muted tabular-nums",
+							children: [
+								"↓ ",
+								e.bytesIn,
+								" / ↑ ",
+								e.bytesOut
+							]
+						}),
+						/* @__PURE__ */ s("td", {
+							className: "px-4 py-3 text-right",
+							children: u && (e.status === a.Issued || e.status === a.Connected) && /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => void g({ variables: {
+									sessionId: e.id,
+									reason: "revoked from UI"
+								} }),
+								className: "rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-status-error-text hover:bg-status-error-bg-subtle hover:border-status-error-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+								children: d("vibecontrols.tunnels.sessions.revoke", "Revoke")
+							})
 						})
-					})
-				]
-			}, e.id)) })]
+					]
+				}, e.id))
+			})]
 		})
 	});
 }

package/dist/pages/tunnels/tabs/TunnelSessionsTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelSessionsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelSessionsTab.tsx"],"sourcesContent":["import {\n useListTunnelSessionsQuery,\n useRevokeTunnelSessionMutation,\n} from '@/generated/wspace-operations';\nimport { TunnelSessionStatus } from '@/generated/wspace-types';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { EmptyState } from '@/components/shared/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\n\nexport function TunnelSessionsTab({\n tunnelId,\n canExecute,\n}: {\n tunnelId: string;\n canExecute: boolean;\n}) {\n const tr = useTr();\n const { data, loading, error, refetch } = useListTunnelSessionsQuery({\n variables: { tunnelId, pagination: { limit: 50 } },\n fetchPolicy: 'cache-and-network',\n });\n const [revoke] = useRevokeTunnelSessionMutation({\n onCompleted: () => void refetch(),\n });\n\n const sessions = data?.tunnelSessions?.items ?? [];\n\n if (loading && !data) return <LoadingState message=\"Loading sessions\" />;\n if (error)\n return (\n <ErrorState\n title=\"Failed to load sessions\"\n message={error.message}\n onRetry={() => refetch()}\n />\n );\n if (sessions.length === 0)\n return (\n <EmptyState\n title={tr('vibecontrols.tunnels.sessions.emptySessionsTitle', 'No sessions')}\n description={tr(\n 'vibecontrols.tunnels.sessions.emptySessionsDescription',\n 'Sessions appear here once a tunnel is started.'\n )}\n />\n );\n\n return (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface max-w-4xl\">\n <table className=\"w-full text-sm\">\n <thead className=\"border-b border-border-subtle bg-bg-sunken text-text-~~secondary~~\">\n <tr>\n <th className=\"px-4 py-3 text-left font-medium\">Fingerprint</th>\n <th className=\"px-4 py-3 text-left font-medium\">Status</th>\n <th className=\"px-4 py-3 text-left font-medium\">Issued</th>\n <th className=\"px-4 py-3 text-left font-medium\">Expires</th>\n <th className=\"px-4 py-3 text-left font-medium\">Bytes</th>\n <th className=\"px-4 py-3 text-right font-medium\">Actions</th>\n </tr>\n </thead>\n <tbody>\n {sessions.map((s: any) => (\n <tr\n key={s.id}\n className=\"~~border-b border-border-subtle last:border-b-0~~ hover:bg-bg-sunken\"\n >\n <td className=\"px-4 py-3 font-mono text-xs text-text-primary\">\n {s.tokenFingerprint}\n </td>\n <td className=\"px-4 py-3 text-text-secondary\">{s.status}</td>\n <td className=\"px-4 py-3 text-text-muted\">{new Date(s.issuedAt).toLocaleString()}</td>\n <td className=\"px-4 py-3 text-text-muted\">\n {new Date(s.expiresAt).toLocaleString()}\n </td>\n <td className=\"px-4 py-3 text-text-muted\">\n ↓ {s.bytesIn} / ↑ {s.bytesOut}\n </td>\n <td className=\"px-4 py-3 text-right\">\n {canExecute &&\n (s.status === TunnelSessionStatus.Issued \|\|\n s.status === TunnelSessionStatus.Connected) && (\n <button\n type=\"button\"\n onClick={() =>\n void revoke({\n variables: { sessionId: s.id, reason: 'revoked from UI' },\n })\n }\n className=\"rounded-md border border-border-~~default~~ px-3 py-1 text-xs text-status-error-fg hover:bg-status-error-bg\"\n >\n {tr('vibecontrols.tunnels.sessions.revoke', 'Revoke')}\n </button>\n )}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,EAAkB,EAChC,aACA,iBAIC;CACD,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,YAAS,UAAO,eAAY,EAA2B;EACnE,WAAW;GAAE;GAAU,YAAY,EAAE,OAAO,IAAI;GAAE;EAClD,aAAa;EACd,CAAC,EACI,CAAC,KAAU,EAA+B,EAC9C,mBAAmB,KAAK,GAAS,EAClC,CAAC,EAEI,IAAW,GAAM,gBAAgB,SAAS,EAAE;AAsBlD,QApBI,KAAW,CAAC,IAAa,kBAAC,GAAD,EAAc,SAAQ,oBAAqB,CAAA,GACpE,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,SAAS,EAAM;EACf,eAAe,GAAS;EACxB,CAAA,GAEF,EAAS,WAAW,IAEpB,kBAAC,GAAD;EACE,OAAO,EAAG,oDAAoD,cAAc;EAC5E,aAAa,EACX,0DACA,iDACD;EACD,CAAA,GAIJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,kBAAC,SAAD;IAAO,WAAU;cACf,kBAAC,MAAD,EAAA,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;~~gBAAkC~~;~~MAAgB~~,CAAA;~~KAChE~~,kBAAC,MAAD;MAAI,WAAU;~~gBAAkC~~;~~MAAW~~,CAAA;~~KAC3D~~,kBAAC,MAAD;MAAI,WAAU;~~gBAAkC~~;~~MAAW~~,CAAA;~~KAC3D~~,kBAAC,MAAD;MAAI,WAAU;~~gBAAkC~~;~~MAAY~~,CAAA;~~KAC5D~~,kBAAC,MAAD;MAAI,WAAU;~~gBAAkC~~;~~MAAU~~,CAAA;~~KAC1D~~,kBAAC,MAAD;MAAI,WAAU;~~gBAAmC~~;~~MAAY~~,CAAA;~~KAC1D~~,EAAA,CAAA;IACC,CAAA,EACR,kBAAC,SAAD,~~EAAA~~,~~UACG,~~EAAS,KAAK,MACb,kBAAC,MAAD;~~IAEE~~,WAAU;~~cAFZ~~;~~KAIE~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBACX~~,EAAE;~~MACA~~,CAAA;~~KACL~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBAAiC~~,EAAE;~~MAAY~~,CAAA;~~KAC7D~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBAA6B~~,IAAI,KAAK,EAAE,SAAS,CAAC,gBAAgB;~~MAAM~~,CAAA;~~KACtF~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBACX~~,IAAI,KAAK,EAAE,UAAU,CAAC,gBAAgB;~~MACpC~~,CAAA;~~KACL~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBAAd~~;~~OAA0C~~;~~OACrC~~,EAAE;~~OAAQ~~;~~OAAM~~,EAAE;~~OAClB~~;;~~KACL~~,kBAAC,MAAD;~~MAAI~~,WAAU;~~gBACX~~,MACE,EAAE,WAAW,EAAoB,UAChC,EAAE,WAAW,EAAoB,cACjC,kBAAC,UAAD;~~OACE~~,MAAK;~~OACL~~,eACE,KAAK,EAAO,EACV,WAAW;~~QAAE~~,WAAW,EAAE;~~QAAI~~,QAAQ;~~QAAmB~~,EAC1D,CAAC;~~OAEJ~~,WAAU;~~iBAET~~,EAAG,wCAAwC,SAAS;~~OAC9C~~,CAAA;~~MAEV~~,CAAA;~~KACF~~;MA/BE,EAAE,GA+BJ,CACL,~~EACI,~~CAAA,CACF;;EACJ,CAAA"}
1	+ {"version":3,"file":"TunnelSessionsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelSessionsTab.tsx"],"sourcesContent":["import {\n useListTunnelSessionsQuery,\n useRevokeTunnelSessionMutation,\n} from '@/generated/wspace-operations';\nimport { TunnelSessionStatus } from '@/generated/wspace-types';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { EmptyState } from '@/components/shared/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\n\nexport function TunnelSessionsTab({\n tunnelId,\n canExecute,\n}: {\n tunnelId: string;\n canExecute: boolean;\n}) {\n const tr = useTr();\n const { data, loading, error, refetch } = useListTunnelSessionsQuery({\n variables: { tunnelId, pagination: { limit: 50 } },\n fetchPolicy: 'cache-and-network',\n });\n const [revoke] = useRevokeTunnelSessionMutation({\n onCompleted: () => void refetch(),\n });\n\n const sessions = data?.tunnelSessions?.items ?? [];\n\n if (loading && !data) return <LoadingState message=\"Loading sessions\" />;\n if (error)\n return (\n <ErrorState\n title=\"Failed to load sessions\"\n message={error.message}\n onRetry={() => refetch()}\n />\n );\n if (sessions.length === 0)\n return (\n <EmptyState\n title={tr('vibecontrols.tunnels.sessions.emptySessionsTitle', 'No sessions')}\n description={tr(\n 'vibecontrols.tunnels.sessions.emptySessionsDescription',\n 'Sessions appear here once a tunnel is started.'\n )}\n />\n );\n\n return (\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 max-w-4xl overflow-x-auto\">\n <table className=\"w-full text-sm\">\n <thead className=\"border-b border-border-subtle bg-bg-sunken text-text-muted\">\n <tr>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide\">\n Fingerprint\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide\">\n Status\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide\">\n Issued\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide\">\n Expires\n </th>\n <th className=\"px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide\">\n Bytes\n </th>\n <th className=\"px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide\">\n Actions\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border-subtle\">\n {sessions.map((s: any) => (\n <tr key={s.id} className=\"hover:bg-bg-sunken transition-colors\">\n <td className=\"px-4 py-3 font-mono text-xs text-text-primary\">\n {s.tokenFingerprint}\n </td>\n <td className=\"px-4 py-3 text-text-secondary\">{s.status}</td>\n <td className=\"px-4 py-3 text-text-muted tabular-nums\">\n {new Date(s.issuedAt).toLocaleString()}\n </td>\n <td className=\"px-4 py-3 text-text-muted tabular-nums\">\n {new Date(s.expiresAt).toLocaleString()}\n </td>\n <td className=\"px-4 py-3 text-text-muted tabular-nums\">\n ↓ {s.bytesIn} / ↑ {s.bytesOut}\n </td>\n <td className=\"px-4 py-3 text-right\">\n {canExecute &&\n (s.status === TunnelSessionStatus.Issued \|\|\n s.status === TunnelSessionStatus.Connected) && (\n <button\n type=\"button\"\n onClick={() =>\n void revoke({\n variables: { sessionId: s.id, reason: 'revoked from UI' },\n })\n }\n className=\"rounded-button border border-border-subtle px-3 py-1 text-xs font-medium text-status-error-text hover:bg-status-error-bg-subtle hover:border-status-error-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {tr('vibecontrols.tunnels.sessions.revoke', 'Revoke')}\n </button>\n )}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,EAAkB,EAChC,aACA,iBAIC;CACD,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,YAAS,UAAO,eAAY,EAA2B;EACnE,WAAW;GAAE;GAAU,YAAY,EAAE,OAAO,IAAI;GAAE;EAClD,aAAa;EACd,CAAC,EACI,CAAC,KAAU,EAA+B,EAC9C,mBAAmB,KAAK,GAAS,EAClC,CAAC,EAEI,IAAW,GAAM,gBAAgB,SAAS,EAAE;AAsBlD,QApBI,KAAW,CAAC,IAAa,kBAAC,GAAD,EAAc,SAAQ,oBAAqB,CAAA,GACpE,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,SAAS,EAAM;EACf,eAAe,GAAS;EACxB,CAAA,GAEF,EAAS,WAAW,IAEpB,kBAAC,GAAD;EACE,OAAO,EAAG,oDAAoD,cAAc;EAC5E,aAAa,EACX,0DACA,iDACD;EACD,CAAA,GAIJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,kBAAC,SAAD;IAAO,WAAU;cACf,kBAAC,MAAD,EAAA,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAoE;MAE7E,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAAoE;MAE7E,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAAoE;MAE7E,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAAoE;MAE7E,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAAoE;MAE7E,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAAqE;MAE9E,CAAA;KACF,EAAA,CAAA;IACC,CAAA,EACR,kBAAC,SAAD;IAAO,WAAU;cACd,EAAS,KAAK,MACb,kBAAC,MAAD;KAAe,WAAU;eAAzB;MACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAE;OACA,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAiC,EAAE;OAAY,CAAA;MAC7D,kBAAC,MAAD;OAAI,WAAU;iBACX,IAAI,KAAK,EAAE,SAAS,CAAC,gBAAgB;OACnC,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBACX,IAAI,KAAK,EAAE,UAAU,CAAC,gBAAgB;OACpC,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAd;QAAuD;QAClD,EAAE;QAAQ;QAAM,EAAE;QAClB;;MACL,kBAAC,MAAD;OAAI,WAAU;iBACX,MACE,EAAE,WAAW,EAAoB,UAChC,EAAE,WAAW,EAAoB,cACjC,kBAAC,UAAD;QACE,MAAK;QACL,eACE,KAAK,EAAO,EACV,WAAW;SAAE,WAAW,EAAE;SAAI,QAAQ;SAAmB,EAC1D,CAAC;QAEJ,WAAU;kBAET,EAAG,wCAAwC,SAAS;QAC9C,CAAA;OAEV,CAAA;MACF;OA/BI,EAAE,GA+BN,CACL;IACI,CAAA,CACF;;EACJ,CAAA"}

package/dist/pages/tunnels/tabs/TunnelSettingsTab.js CHANGED Viewed

@@ -10,46 +10,46 @@ function s({ tunnel: s, canUpdate: c, canDelete: l, onDeleted: u }) {
 		className: "max-w-3xl space-y-6",
 		children: [
 			c && /* @__PURE__ */ o("section", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+				className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5",
 				children: [
 					/* @__PURE__ */ a("h3", {
-						className: "text-sm font-semibold text-text-primary mb-2",
+						className: "text-sm font-semibold text-text-primary tracking-tight mb-2",
 						children: d("vibecontrols.tunnels.settings.rotateCredentials", "Rotate credentials")
 					}),
 					/* @__PURE__ */ a("p", {
-						className: "text-xs text-text-secondary mb-3",
+						className: "text-xs text-text-secondary mb-4",
 						children: "Rotates basic-auth passwords and revokes every active session for this tunnel. The tunnel will restart automatically if currently active."
 					}),
 					/* @__PURE__ */ a("button", {
 						type: "button",
 						disabled: h,
 						onClick: () => void m({ variables: { id: s.id } }),
-						className: "rounded-md border border-border-default px-4 py-2 text-sm text-text-primary hover:bg-bg-elevated disabled:opacity-50",
+						className: "rounded-button border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						children: h ? d("vibecontrols.tunnels.settings.rotating", "Rotating...") : d("vibecontrols.tunnels.settings.rotateNow", "Rotate now")
 					})
 				]
 			}),
 			l && /* @__PURE__ */ o("section", {
-				className: "rounded-lg border border-status-error-bg bg-bg-surface p-4",
+				className: "rounded-card border border-status-error-border bg-status-error-bg-subtle shadow-elevation-1 p-5",
 				children: [
 					/* @__PURE__ */ a("h3", {
-						className: "text-sm font-semibold text-status-error-fg mb-2",
+						className: "text-sm font-semibold text-status-error-text tracking-tight mb-2",
 						children: d("vibecontrols.tunnels.settings.deleteTunnel", "Delete tunnel")
 					}),
 					/* @__PURE__ */ a("p", {
-						className: "text-xs text-text-secondary mb-3",
+						className: "text-xs text-text-secondary mb-4",
 						children: "Permanently removes the tunnel, its sessions, and any managed subdomain reservations. Custom domains remain in the workspace and can be reattached."
 					}),
 					/* @__PURE__ */ a("button", {
 						type: "button",
 						onClick: () => p(!0),
-						className: "rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-fg hover:bg-status-error-bg-hover",
+						className: "rounded-button bg-action-danger-bg px-4 py-2 text-sm font-medium text-action-danger-text hover:bg-action-danger-bgHover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						children: d("vibecontrols.tunnels.settings.deleteTunnelBtn", "Delete tunnel")
 					})
 				]
 			}),
 			!c && !l && /* @__PURE__ */ a("section", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-text-secondary",
+				className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-sm text-text-secondary",
 				children: d("vibecontrols.tunnels.settings.noPermission", "No tunnel settings actions available.")
 			}),
 			/* @__PURE__ */ a(r, {

package/dist/pages/tunnels/tabs/TunnelSettingsTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelSettingsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelSettingsTab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n useRotateTunnelCredentialsMutation,\n useDeleteTunnelMutation,\n} from '@/generated/wspace-operations';\nimport { ConfirmDialog } from '@/components/shared/ConfirmDialog';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelSettingsTab({\n tunnel,\n canUpdate,\n canDelete,\n onDeleted,\n}: {\n tunnel: TunnelDetails;\n canUpdate: boolean;\n canDelete: boolean;\n onDeleted: () => void;\n}) {\n const tr = useTr();\n const [confirmDelete, setConfirmDelete] = useState(false);\n\n const [rotateCredentials, { loading: rotating }] = useRotateTunnelCredentialsMutation();\n const [deleteTunnel, { loading: deleting }] = useDeleteTunnelMutation({\n onCompleted: onDeleted,\n });\n\n return (\n <div className=\"max-w-3xl space-y-6\">\n {canUpdate && (\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <h3 className=\"text-sm font-semibold text-text-primary mb-2\">\n {tr('vibecontrols.tunnels.settings.rotateCredentials', 'Rotate credentials')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-3\">\n Rotates basic-auth passwords and revokes every active session for this tunnel. The\n tunnel will restart automatically if currently active.\n </p>\n <button\n type=\"button\"\n disabled={rotating}\n onClick={() => void rotateCredentials({ variables: { id: tunnel.id } })}\n className=\"rounded-md border border-border-~~default~~ px-4 py-2 text-sm text-text-primary hover:bg-bg-~~elevated~~ disabled:opacity-50\"\n >\n {rotating\n ? tr('vibecontrols.tunnels.settings.rotating', 'Rotating...')\n : tr('vibecontrols.tunnels.settings.rotateNow', 'Rotate now')}\n </button>\n </section>\n )}\n\n {canDelete && (\n <section className=\"rounded-lg border border-status-error-bg bg-bg-~~surface~~ p-4\">\n <h3 className=\"text-sm font-semibold text-status-error-fg mb-2\">\n {tr('vibecontrols.tunnels.settings.deleteTunnel', 'Delete tunnel')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-3\">\n Permanently removes the tunnel, its sessions, and any managed subdomain reservations.\n Custom domains remain in the workspace and can be reattached.\n </p>\n <button\n type=\"button\"\n onClick={() => setConfirmDelete(true)}\n className=\"rounded-md bg-~~status~~-~~error~~-bg px-4 py-2 text-sm font-medium text-~~status~~-~~error~~-fg hover:bg-~~status~~-~~error~~-bg-~~hover~~\"\n >\n {tr('vibecontrols.tunnels.settings.deleteTunnelBtn', 'Delete tunnel')}\n </button>\n </section>\n )}\n\n {!canUpdate && !canDelete && (\n <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.tunnels.settings.noPermission',\n 'No tunnel settings actions available.'\n )}\n </section>\n )}\n\n <ConfirmDialog\n isOpen={confirmDelete}\n onClose={() => setConfirmDelete(false)}\n onConfirm={() => void deleteTunnel({ variables: { id: tunnel.id } })}\n title=\"Delete tunnel\"\n message={`Delete \"${tunnel.name}\"? This cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n isLoading={deleting}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,EAAkB,EAChC,WACA,cACA,cACA,gBAMC;CACD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAe,KAAoB,EAAS,GAAM,EAEnD,CAAC,GAAmB,EAAE,SAAS,OAAc,GAAoC,EACjF,CAAC,GAAc,EAAE,SAAS,OAAc,EAAwB,EACpE,aAAa,GACd,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KACC,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,mDAAmD,qBAAqB;MACzE,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAG5C,CAAA;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAe,KAAK,EAAkB,EAAE,WAAW,EAAE,IAAI,EAAO,IAAI,EAAE,CAAC;MACvE,WAAU;gBAET,IACG,EAAG,0CAA0C,cAAc,GAC3D,EAAG,2CAA2C,aAAa;MACxD,CAAA;KACD;;GAGX,KACC,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8CAA8C,gBAAgB;MAC/D,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAG5C,CAAA;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAiB,GAAK;MACrC,WAAU;gBAET,EAAG,iDAAiD,gBAAgB;MAC9D,CAAA;KACD;;GAGX,CAAC,KAAa,CAAC,KACd,kBAAC,WAAD;IAAS,WAAU;cAChB,EACC,8CACA,wCACD;IACO,CAAA;GAGZ,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAiB,GAAM;IACtC,iBAAiB,KAAK,EAAa,EAAE,WAAW,EAAE,IAAI,EAAO,IAAI,EAAE,CAAC;IACpE,OAAM;IACN,SAAS,WAAW,EAAO,KAAK;IAChC,cAAa;IACb,SAAQ;IACR,WAAW;IACX,CAAA;GACE"}
1	+ {"version":3,"file":"TunnelSettingsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelSettingsTab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n useRotateTunnelCredentialsMutation,\n useDeleteTunnelMutation,\n} from '@/generated/wspace-operations';\nimport { ConfirmDialog } from '@/components/shared/ConfirmDialog';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelSettingsTab({\n tunnel,\n canUpdate,\n canDelete,\n onDeleted,\n}: {\n tunnel: TunnelDetails;\n canUpdate: boolean;\n canDelete: boolean;\n onDeleted: () => void;\n}) {\n const tr = useTr();\n const [confirmDelete, setConfirmDelete] = useState(false);\n\n const [rotateCredentials, { loading: rotating }] = useRotateTunnelCredentialsMutation();\n const [deleteTunnel, { loading: deleting }] = useDeleteTunnelMutation({\n onCompleted: onDeleted,\n });\n\n return (\n <div className=\"max-w-3xl space-y-6\">\n {canUpdate && (\n <section className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5\">\n <h3 className=\"text-sm font-semibold text-text-primary tracking-tight mb-2\">\n {tr('vibecontrols.tunnels.settings.rotateCredentials', 'Rotate credentials')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-4\">\n Rotates basic-auth passwords and revokes every active session for this tunnel. The\n tunnel will restart automatically if currently active.\n </p>\n <button\n type=\"button\"\n disabled={rotating}\n onClick={() => void rotateCredentials({ variables: { id: tunnel.id } })}\n className=\"rounded-button border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {rotating\n ? tr('vibecontrols.tunnels.settings.rotating', 'Rotating...')\n : tr('vibecontrols.tunnels.settings.rotateNow', 'Rotate now')}\n </button>\n </section>\n )}\n\n {canDelete && (\n <section className=\"rounded-card border border-status-error-border bg-status-error-bg-subtle shadow-elevation-1 p-5\">\n <h3 className=\"text-sm font-semibold text-status-error-text tracking-tight mb-2\">\n {tr('vibecontrols.tunnels.settings.deleteTunnel', 'Delete tunnel')}\n </h3>\n <p className=\"text-xs text-text-secondary mb-4\">\n Permanently removes the tunnel, its sessions, and any managed subdomain reservations.\n Custom domains remain in the workspace and can be reattached.\n </p>\n <button\n type=\"button\"\n onClick={() => setConfirmDelete(true)}\n className=\"rounded-button bg-action-danger-bg px-4 py-2 text-sm font-medium text-action-danger-text hover:bg-action-danger-bgHover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n {tr('vibecontrols.tunnels.settings.deleteTunnelBtn', 'Delete tunnel')}\n </button>\n </section>\n )}\n\n {!canUpdate && !canDelete && (\n <section className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.tunnels.settings.noPermission',\n 'No tunnel settings actions available.'\n )}\n </section>\n )}\n\n <ConfirmDialog\n isOpen={confirmDelete}\n onClose={() => setConfirmDelete(false)}\n onConfirm={() => void deleteTunnel({ variables: { id: tunnel.id } })}\n title=\"Delete tunnel\"\n message={`Delete \"${tunnel.name}\"? This cannot be undone.`}\n confirmLabel=\"Delete\"\n variant=\"danger\"\n isLoading={deleting}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,EAAkB,EAChC,WACA,cACA,cACA,gBAMC;CACD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAe,KAAoB,EAAS,GAAM,EAEnD,CAAC,GAAmB,EAAE,SAAS,OAAc,GAAoC,EACjF,CAAC,GAAc,EAAE,SAAS,OAAc,EAAwB,EACpE,aAAa,GACd,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KACC,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,mDAAmD,qBAAqB;MACzE,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAG5C,CAAA;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAe,KAAK,EAAkB,EAAE,WAAW,EAAE,IAAI,EAAO,IAAI,EAAE,CAAC;MACvE,WAAU;gBAET,IACG,EAAG,0CAA0C,cAAc,GAC3D,EAAG,2CAA2C,aAAa;MACxD,CAAA;KACD;;GAGX,KACC,kBAAC,WAAD;IAAS,WAAU;cAAnB;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8CAA8C,gBAAgB;MAC/D,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAG5C,CAAA;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAiB,GAAK;MACrC,WAAU;gBAET,EAAG,iDAAiD,gBAAgB;MAC9D,CAAA;KACD;;GAGX,CAAC,KAAa,CAAC,KACd,kBAAC,WAAD;IAAS,WAAU;cAChB,EACC,8CACA,wCACD;IACO,CAAA;GAGZ,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAiB,GAAM;IACtC,iBAAiB,KAAK,EAAa,EAAE,WAAW,EAAE,IAAI,EAAO,IAAI,EAAE,CAAC;IACpE,OAAM;IACN,SAAS,WAAW,EAAO,KAAK;IAChC,cAAa;IACb,SAAQ;IACR,WAAW;IACX,CAAA;GACE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-vibecontrols",
-  "version": "2026.623.1",
+  "version": "2026.623.3",
   "description": "VibeControls microfrontend for Burdenoff products",
   "type": "module",
   "files": [