@burdenoff/microfe-vibecontrols 2026.601.5 → 2026.601.7

package/dist/components/sessions/EntityInfoPopover.js

@@ -0,0 +1,183 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useVibeNavigate as t } from "../../providers/VibeControlsProvider.js";
+import { getAgentStatus as n } from "../agents/agentStatus.js";
+import { Clock as r, Cpu as i, ExternalLink as a, MonitorSmartphone as o, Network as s, Server as c, Wifi as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Popover as f, PopoverContent as p, PopoverTrigger as m } from "@burdenoff/fe-libs/ui";
+//#region src/components/sessions/EntityInfoPopover.tsx
+function h(e) {
+	if (!e) return "—";
+	let t = Date.now() - new Date(e).getTime();
+	return Number.isFinite(t) ? t < 6e4 ? "just now" : t < 36e5 ? `${Math.floor(t / 6e4)}m ago` : t < 864e5 ? `${Math.floor(t / 36e5)}h ago` : new Date(e).toLocaleDateString() : "—";
+}
+var g = {
+	ACTIVE: "bg-status-success-text",
+	DEGRADED: "bg-status-warning-text",
+	OFFLINE: "bg-status-error-text"
+}, _ = {
+	DIRECT: "bg-bg-sunken text-text-secondary",
+	SSH: "bg-status-success-bg text-status-success-text",
+	RDP: "bg-status-warning-bg text-status-warning-text",
+	VNC: "bg-action-primary-bg/15 text-action-primary-text"
+};
+function v({ icon: e, label: t, value: n }) {
+	return /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-between gap-3 py-1 text-xs",
+		children: [/* @__PURE__ */ d("span", {
+			className: "flex items-center gap-1.5 text-text-tertiary",
+			children: [e, t]
+		}), /* @__PURE__ */ u("span", {
+			className: "font-medium text-text-primary truncate max-w-[160px]",
+			title: n,
+			children: n
+		})]
+	});
+}
+function y({ agent: o, children: s, className: _ = "" }) {
+	let y = e(), b = t(), x = n(o);
+	return /* @__PURE__ */ d(f, { children: [/* @__PURE__ */ u(m, {
+		asChild: !0,
+		children: s ?? /* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: (e) => e.stopPropagation(),
+			"data-testid": "session-agent-chip",
+			className: `inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-xs text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors max-w-[140px] ${_}`,
+			title: o.name,
+			children: [
+				/* @__PURE__ */ u("span", {
+					className: `size-1.5 rounded-full shrink-0 ${g[x] ?? "bg-text-muted"}`,
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ u(c, { className: "size-3 shrink-0" }),
+				/* @__PURE__ */ u("span", {
+					className: "truncate",
+					children: o.name
+				})
+			]
+		})
+	}), /* @__PURE__ */ d(p, {
+		align: "start",
+		className: "w-64 p-3",
+		onClick: (e) => e.stopPropagation(),
+		"data-testid": "session-agent-popover",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [
+					/* @__PURE__ */ u("span", {
+						className: `size-2 rounded-full shrink-0 ${g[x] ?? "bg-text-muted"}`,
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ u("span", {
+						className: "text-sm font-semibold text-text-primary truncate",
+						children: o.name
+					}),
+					/* @__PURE__ */ u("span", {
+						className: "ml-auto text-[10px] uppercase tracking-wide text-text-tertiary",
+						children: x
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "border-t border-border-subtle pt-1",
+				children: [
+					/* @__PURE__ */ u(v, {
+						icon: /* @__PURE__ */ u(c, { className: "size-3" }),
+						label: y("sessions.info.host", "Host"),
+						value: o.hostname || "—"
+					}),
+					/* @__PURE__ */ u(v, {
+						icon: /* @__PURE__ */ u(i, { className: "size-3" }),
+						label: y("sessions.info.platform", "Platform"),
+						value: o.platform || "—"
+					}),
+					/* @__PURE__ */ u(v, {
+						icon: /* @__PURE__ */ u(l, { className: "size-3" }),
+						label: y("sessions.info.tunnel", "Tunnel"),
+						value: o.tunnelStatus || (o.tunnelUrl ? "set" : "—")
+					}),
+					/* @__PURE__ */ u(v, {
+						icon: /* @__PURE__ */ u(r, { className: "size-3" }),
+						label: y("sessions.info.heartbeat", "Heartbeat"),
+						value: h(o.lastHeartbeat)
+					})
+				]
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: () => b(`/agents/${o.id}`),
+				"data-testid": "session-agent-view",
+				className: "mt-2 w-full inline-flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors",
+				children: [/* @__PURE__ */ u(a, { className: "size-3" }), y("sessions.info.viewAgent", "View agent")]
+			})
+		]
+	})] });
+}
+function b({ target: n, children: r, className: i = "" }) {
+	let c = e(), h = t();
+	return /* @__PURE__ */ d(f, { children: [/* @__PURE__ */ u(m, {
+		asChild: !0,
+		children: r ?? /* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: (e) => e.stopPropagation(),
+			"data-testid": "session-target-chip",
+			className: `inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-xs text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors max-w-[150px] ${i}`,
+			title: `${n.name} · ${n.type}`,
+			children: [
+				/* @__PURE__ */ u(o, { className: "size-3 shrink-0" }),
+				/* @__PURE__ */ u("span", {
+					className: "truncate",
+					children: n.name
+				}),
+				/* @__PURE__ */ u("span", {
+					className: `shrink-0 px-1 py-0 rounded text-[9px] font-semibold ${_[n.type] ?? "bg-bg-sunken text-text-secondary"}`,
+					children: n.type
+				})
+			]
+		})
+	}), /* @__PURE__ */ d(p, {
+		align: "start",
+		className: "w-60 p-3",
+		onClick: (e) => e.stopPropagation(),
+		"data-testid": "session-target-popover",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [
+					/* @__PURE__ */ u(o, { className: "size-3.5 text-text-secondary shrink-0" }),
+					/* @__PURE__ */ u("span", {
+						className: "text-sm font-semibold text-text-primary truncate",
+						children: n.name
+					}),
+					/* @__PURE__ */ u("span", {
+						className: `ml-auto shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold ${_[n.type] ?? "bg-bg-sunken text-text-secondary"}`,
+						children: n.type
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "border-t border-border-subtle pt-1",
+				children: [/* @__PURE__ */ u(v, {
+					icon: /* @__PURE__ */ u(l, { className: "size-3" }),
+					label: c("sessions.info.status", "Status"),
+					value: n.status || "—"
+				}), /* @__PURE__ */ u(v, {
+					icon: /* @__PURE__ */ u(s, { className: "size-3" }),
+					label: c("sessions.info.address", "Address"),
+					value: n.host ? `${n.host}${n.port ? `:${n.port}` : ""}` : "—"
+				})]
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: () => h(`/targets/${n.id}`),
+				"data-testid": "session-target-view",
+				className: "mt-2 w-full inline-flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors",
+				children: [/* @__PURE__ */ u(a, { className: "size-3" }), c("sessions.info.viewTarget", "View target")]
+			})
+		]
+	})] });
+}
+//#endregion
+export { y as AgentInfoPopover, b as TargetInfoPopover };
+
+//# sourceMappingURL=EntityInfoPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntityInfoPopover.js","names":[],"sources":["../../../src/components/sessions/EntityInfoPopover.tsx"],"sourcesContent":["/**\n * EntityInfoPopover — quick inline detail for the agent / target a\n * session runs on. Anchored on the agent/target chips in the session\n * list, cards and the terminal status bar so operators can confirm\n * \"which machine / is it healthy\" without leaving the page, with a\n * one-click jump to the full AgentDetails / TargetDetails page.\n */\nimport { Popover, PopoverTrigger, PopoverContent } from '@burdenoff/fe-libs/ui';\nimport { Server, MonitorSmartphone, ExternalLink, Cpu, Clock, Wifi, Network } from 'lucide-react';\nimport { getAgentStatus } from '@/components/agents/agentStatus';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { Session, SessionTarget, TargetType } from './types';\n\ntype SessionAgent = NonNullable<Session['agent']>;\n\n/** Relative \"x ago\" for a heartbeat / timestamp. */\nfunction relativeTime(ts: string | null | undefined): string {\n  if (!ts) return '—';\n  const diff = Date.now() - new Date(ts).getTime();\n  if (!Number.isFinite(diff)) return '—';\n  if (diff < 60_000) return 'just now';\n  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n  return new Date(ts).toLocaleDateString();\n}\n\nconst statusDotClass: Record<string, string> = {\n  ACTIVE: 'bg-status-success-text',\n  DEGRADED: 'bg-status-warning-text',\n  OFFLINE: 'bg-status-error-text',\n};\n\nconst targetTypeBadgeClass: Record<TargetType, string> = {\n  DIRECT: 'bg-bg-sunken text-text-secondary',\n  SSH: 'bg-status-success-bg text-status-success-text',\n  RDP: 'bg-status-warning-bg text-status-warning-text',\n  VNC: 'bg-action-primary-bg/15 text-action-primary-text',\n};\n\nfunction InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between gap-3 py-1 text-xs\">\n      <span className=\"flex items-center gap-1.5 text-text-tertiary\">\n        {icon}\n        {label}\n      </span>\n      <span className=\"font-medium text-text-primary truncate max-w-[160px]\" title={value}>\n        {value}\n      </span>\n    </div>\n  );\n}\n\nexport interface AgentInfoPopoverProps {\n  agent: SessionAgent;\n  /** Optional custom trigger; defaults to a chip with the agent name + status dot. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/** Popover summarising an agent's health + a link to its detail page. */\nexport function AgentInfoPopover({ agent, children, className = '' }: AgentInfoPopoverProps) {\n  const tr = useTr();\n  const navigate = useVibeNavigate();\n  const status = getAgentStatus(agent);\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        {children ?? (\n          <button\n            type=\"button\"\n            onClick={(e) => e.stopPropagation()}\n            data-testid=\"session-agent-chip\"\n            className={`inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-xs text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors max-w-[140px] ${className}`}\n            title={agent.name}\n          >\n            <span\n              className={`size-1.5 rounded-full shrink-0 ${statusDotClass[status] ?? 'bg-text-muted'}`}\n              aria-hidden\n            />\n            <Server className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">{agent.name}</span>\n          </button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-64 p-3\"\n        onClick={(e) => e.stopPropagation()}\n        data-testid=\"session-agent-popover\"\n      >\n        <div className=\"flex items-center gap-2 mb-2\">\n          <span\n            className={`size-2 rounded-full shrink-0 ${statusDotClass[status] ?? 'bg-text-muted'}`}\n            aria-hidden\n          />\n          <span className=\"text-sm font-semibold text-text-primary truncate\">{agent.name}</span>\n          <span className=\"ml-auto text-[10px] uppercase tracking-wide text-text-tertiary\">\n            {status}\n          </span>\n        </div>\n        <div className=\"border-t border-border-subtle pt-1\">\n          <InfoRow\n            icon={<Server className=\"size-3\" />}\n            label={tr('sessions.info.host', 'Host')}\n            value={agent.hostname || '—'}\n          />\n          <InfoRow\n            icon={<Cpu className=\"size-3\" />}\n            label={tr('sessions.info.platform', 'Platform')}\n            value={agent.platform || '—'}\n          />\n          <InfoRow\n            icon={<Wifi className=\"size-3\" />}\n            label={tr('sessions.info.tunnel', 'Tunnel')}\n            value={agent.tunnelStatus || (agent.tunnelUrl ? 'set' : '—')}\n          />\n          <InfoRow\n            icon={<Clock className=\"size-3\" />}\n            label={tr('sessions.info.heartbeat', 'Heartbeat')}\n            value={relativeTime(agent.lastHeartbeat)}\n          />\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => navigate(`/agents/${agent.id}`)}\n          data-testid=\"session-agent-view\"\n          className=\"mt-2 w-full inline-flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n        >\n          <ExternalLink className=\"size-3\" />\n          {tr('sessions.info.viewAgent', 'View agent')}\n        </button>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface TargetInfoPopoverProps {\n  target: SessionTarget;\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/** Popover summarising the target machine + a link to its detail page. */\nexport function TargetInfoPopover({ target, children, className = '' }: TargetInfoPopoverProps) {\n  const tr = useTr();\n  const navigate = useVibeNavigate();\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        {children ?? (\n          <button\n            type=\"button\"\n            onClick={(e) => e.stopPropagation()}\n            data-testid=\"session-target-chip\"\n            className={`inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-xs text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors max-w-[150px] ${className}`}\n            title={`${target.name} · ${target.type}`}\n          >\n            <MonitorSmartphone className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">{target.name}</span>\n            <span\n              className={`shrink-0 px-1 py-0 rounded text-[9px] font-semibold ${targetTypeBadgeClass[target.type] ?? 'bg-bg-sunken text-text-secondary'}`}\n            >\n              {target.type}\n            </span>\n          </button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-60 p-3\"\n        onClick={(e) => e.stopPropagation()}\n        data-testid=\"session-target-popover\"\n      >\n        <div className=\"flex items-center gap-2 mb-2\">\n          <MonitorSmartphone className=\"size-3.5 text-text-secondary shrink-0\" />\n          <span className=\"text-sm font-semibold text-text-primary truncate\">{target.name}</span>\n          <span\n            className={`ml-auto shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold ${targetTypeBadgeClass[target.type] ?? 'bg-bg-sunken text-text-secondary'}`}\n          >\n            {target.type}\n          </span>\n        </div>\n        <div className=\"border-t border-border-subtle pt-1\">\n          <InfoRow\n            icon={<Wifi className=\"size-3\" />}\n            label={tr('sessions.info.status', 'Status')}\n            value={target.status || '—'}\n          />\n          <InfoRow\n            icon={<Network className=\"size-3\" />}\n            label={tr('sessions.info.address', 'Address')}\n            value={target.host ? `${target.host}${target.port ? `:${target.port}` : ''}` : '—'}\n          />\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => navigate(`/targets/${target.id}`)}\n          data-testid=\"session-target-view\"\n          className=\"mt-2 w-full inline-flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n        >\n          <ExternalLink className=\"size-3\" />\n          {tr('sessions.info.viewTarget', 'View target')}\n        </button>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sessions/SessionCard.js

@@ -1,23 +1,24 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
 import { SessionStatusBadge as t } from "./SessionStatusBadge.js";
-import { useState as n } from "react";
-import { Clock as r, MoreVertical as i, Play as a, RotateCcw as o, Share2 as s, Square as c, Terminal as l, Trash2 as u } from "lucide-react";
-import { AnimatePresence as d, motion as f } from "framer-motion";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { AgentInfoPopover as n, TargetInfoPopover as r } from "./EntityInfoPopover.js";
+import { useState as i } from "react";
+import { Clock as a, MoreVertical as o, Play as s, RotateCcw as c, Share2 as l, Square as u, Terminal as d, Trash2 as f } from "lucide-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/sessions/SessionCard.tsx
-var h = {
+var _ = {
 	TMUX: "🖥️",
 	SSH: "🔐",
 	TERMINAL: "💻",
 	SCRIPT: "📜",
 	CUSTOM: "⚙️"
-}, g = ({ session: g, onOpen: _, onStart: v, onStop: y, onRestart: b, onTerminate: x, onOpenTerminal: S, onShare: C, selected: w = !1, onToggleSelect: T, className: E = "" }) => {
-	let D = e(), [O, k] = n(!1), A = (e) => {
+}, v = ({ session: v, onOpen: y, onStart: b, onStop: x, onRestart: S, onTerminate: C, onOpenTerminal: w, onShare: T, selected: E = !1, onToggleSelect: D, className: O = "" }) => {
+	let k = e(), [A, j] = i(!1), M = (e) => {
 		if (!e) return "Never";
 		let t = Date.now() - new Date(e).getTime();
 		return t < 6e4 ? "Just now" : t < 36e5 ? `${Math.floor(t / 6e4)}m ago` : t < 864e5 ? `${Math.floor(t / 36e5)}h ago` : new Date(e).toLocaleDateString();
-	}, j = g.status === "RUNNING", M = g.status === "STOPPED" || g.status === "TERMINATED";
-	return /* @__PURE__ */ m(f.div, {
+	}, N = v.status === "RUNNING", P = v.status === "STOPPED" || v.status === "TERMINATED";
+	return /* @__PURE__ */ g(m.div, {
 		whileHover: {
 			y: -2,
 			transition: {
@@ -31,60 +32,67 @@ var h = {
 			}
 		},
 		whileTap: { scale: .98 },
-		className: `bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${w ? "border-action-primary-bg ring-1 ring-action-primary-bg/30" : "border-border-default"} ${E}`,
-		onClick: () => _?.(g),
+		className: `bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${E ? "border-action-primary-bg ring-1 ring-action-primary-bg/30" : "border-border-default"} ${O}`,
+		onClick: () => y?.(v),
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ g("div", {
 				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ g("div", {
 					className: "flex items-start gap-2 sm:gap-3 min-w-0 flex-1",
 					children: [
-						T && /* @__PURE__ */ p("div", {
+						D && /* @__PURE__ */ h("div", {
 							className: "flex-shrink-0 pt-0.5",
-							children: /* @__PURE__ */ p("input", {
+							children: /* @__PURE__ */ h("input", {
 								"aria-label": "control",
 								type: "checkbox",
-								checked: w,
+								checked: E,
 								onChange: (e) => {
-									e.stopPropagation(), T();
+									e.stopPropagation(), D();
 								},
 								onClick: (e) => e.stopPropagation(),
 								className: "size-4 rounded border-border-default cursor-pointer"
 							})
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ h("div", {
 							className: "flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
-							children: /* @__PURE__ */ p(l, { className: "size-4 sm:w-5 sm:h-5 text-text-secondary" })
+							children: /* @__PURE__ */ h(d, { className: "size-4 sm:w-5 sm:h-5 text-text-secondary" })
 						}),
-						/* @__PURE__ */ m("div", {
+						/* @__PURE__ */ g("div", {
 							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ m("div", {
-								className: "flex items-center gap-1.5 sm:gap-2 flex-wrap",
-								children: [/* @__PURE__ */ p("h3", {
-									className: "font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base",
-									children: g.name
-								}), /* @__PURE__ */ p("span", {
-									className: "text-base sm:text-lg flex-shrink-0",
-									children: h[g.type] || "💻"
-								})]
-							}), /* @__PURE__ */ p("p", {
-								className: "text-xs sm:text-sm text-text-secondary",
-								children: g.type
-							})]
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center gap-1.5 sm:gap-2 flex-wrap",
+									children: [/* @__PURE__ */ h("h3", {
+										className: "font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base",
+										children: v.name
+									}), /* @__PURE__ */ h("span", {
+										className: "text-base sm:text-lg flex-shrink-0",
+										children: _[v.type] || "💻"
+									})]
+								}),
+								/* @__PURE__ */ h("p", {
+									className: "text-xs sm:text-sm text-text-secondary",
+									children: v.type
+								}),
+								v.agent && /* @__PURE__ */ g("div", {
+									className: "mt-1.5 flex items-center gap-1 flex-wrap",
+									children: [/* @__PURE__ */ h(n, { agent: v.agent }), v.agent.target && /* @__PURE__ */ h(r, { target: v.agent.target })]
+								})
+							]
 						})
 					]
-				}), /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ g("div", {
 					className: "flex items-center gap-1 sm:gap-2 flex-shrink-0",
-					children: [/* @__PURE__ */ p(t, { status: g.status }), (v || y || b || x) && /* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h(t, { status: v.status }), (b || x || S || C) && /* @__PURE__ */ g("div", {
 						className: "relative",
-						children: [/* @__PURE__ */ p("button", {
+						children: [/* @__PURE__ */ h("button", {
 							type: "button",
 							onClick: (e) => {
-								e.stopPropagation(), k(!O);
+								e.stopPropagation(), j(!A);
 							},
 							className: "p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors",
-							children: /* @__PURE__ */ p(i, { className: "size-4 text-text-secondary" })
-						}), /* @__PURE__ */ p(d, { children: O && /* @__PURE__ */ m(f.div, {
+							children: /* @__PURE__ */ h(o, { className: "size-4 text-text-secondary" })
+						}), /* @__PURE__ */ h(p, { children: A && /* @__PURE__ */ g(m.div, {
 							initial: {
 								opacity: 0,
 								scale: .95,
@@ -103,53 +111,53 @@ var h = {
 							transition: { duration: .15 },
 							className: "absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10",
 							children: [
-								M && v && /* @__PURE__ */ m(f.button, {
+								P && b && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), v(g), k(!1);
+										e.stopPropagation(), b(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg",
-									children: [/* @__PURE__ */ p(a, { className: "size-4" }), D("vibecontrols.sessions.card.start", "Start")]
+									children: [/* @__PURE__ */ h(s, { className: "size-4" }), k("vibecontrols.sessions.card.start", "Start")]
 								}),
-								j && y && /* @__PURE__ */ m(f.button, {
+								N && x && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), y(g), k(!1);
+										e.stopPropagation(), x(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
-									children: [/* @__PURE__ */ p(c, { className: "size-4" }), D("vibecontrols.sessions.card.stop", "Stop")]
+									children: [/* @__PURE__ */ h(u, { className: "size-4" }), k("vibecontrols.sessions.card.stop", "Stop")]
 								}),
-								j && b && /* @__PURE__ */ m(f.button, {
+								N && S && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), b(g), k(!1);
+										e.stopPropagation(), S(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
-									children: [/* @__PURE__ */ p(o, { className: "size-4" }), D("vibecontrols.sessions.card.restart", "Restart")]
+									children: [/* @__PURE__ */ h(c, { className: "size-4" }), k("vibecontrols.sessions.card.restart", "Restart")]
 								}),
-								j && S && /* @__PURE__ */ m(f.button, {
+								N && w && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), S(g), k(!1);
+										e.stopPropagation(), w(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
-									children: [/* @__PURE__ */ p(l, { className: "size-4" }), D("vibecontrols.sessions.card.openTerminal", "Open Terminal")]
+									children: [/* @__PURE__ */ h(d, { className: "size-4" }), k("vibecontrols.sessions.card.openTerminal", "Open Terminal")]
 								}),
-								j && C && /* @__PURE__ */ m(f.button, {
+								N && T && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), C(g), k(!1);
+										e.stopPropagation(), T(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
-									children: [/* @__PURE__ */ p(s, { className: "size-4" }), D("vibecontrols.sessions.card.shareSession", "Share Session")]
+									children: [/* @__PURE__ */ h(l, { className: "size-4" }), k("vibecontrols.sessions.card.shareSession", "Share Session")]
 								}),
-								x && /* @__PURE__ */ m(f.button, {
+								C && /* @__PURE__ */ g(m.button, {
 									whileTap: { scale: .97 },
 									onClick: (e) => {
-										e.stopPropagation(), x(g), k(!1);
+										e.stopPropagation(), C(v), j(!1);
 									},
 									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-status-error-text hover:bg-bg-sunken rounded-b-lg",
-									children: [/* @__PURE__ */ p(u, { className: "size-4" }), D("vibecontrols.sessions.card.terminate", "Terminate")]
+									children: [/* @__PURE__ */ h(f, { className: "size-4" }), k("vibecontrols.sessions.card.terminate", "Terminate")]
 								})
 							]
 						}) })]
@@ -157,42 +165,42 @@ var h = {
 				})]
 			}),
 			(() => {
-				let e = g.metadata || {}, t = typeof e.tmuxSessionName == "string" && e.tmuxSessionName || typeof e.weztermWorkspace == "string" && e.weztermWorkspace || typeof e.zellijSessionName == "string" && e.zellijSessionName || typeof e.externalSessionName == "string" && e.externalSessionName || g.providerSessionName || null;
-				return t ? /* @__PURE__ */ m("div", {
+				let e = v.metadata || {}, t = typeof e.tmuxSessionName == "string" && e.tmuxSessionName || typeof e.weztermWorkspace == "string" && e.weztermWorkspace || typeof e.zellijSessionName == "string" && e.zellijSessionName || typeof e.externalSessionName == "string" && e.externalSessionName || v.providerSessionName || null;
+				return t ? /* @__PURE__ */ g("div", {
 					className: "mt-2 text-[10px] font-mono text-text-tertiary",
 					title: `Provider session: ${t}`,
 					"data-testid": "session-card-external-name",
-					children: [/* @__PURE__ */ m("span", {
+					children: [/* @__PURE__ */ g("span", {
 						className: "opacity-70",
-						children: [g.type.toLowerCase(), ": "]
-					}), /* @__PURE__ */ p("span", {
+						children: [v.type.toLowerCase(), ": "]
+					}), /* @__PURE__ */ h("span", {
 						className: "break-all",
 						children: t
 					})]
 				}) : null;
 			})(),
-			g.command && /* @__PURE__ */ m("div", {
+			v.command && /* @__PURE__ */ g("div", {
 				className: "mt-3 text-xs font-mono bg-bg-sunken p-2 rounded truncate text-text-secondary",
-				children: ["$ ", g.command]
+				children: ["$ ", v.command]
 			}),
-			g.lastOutput && /* @__PURE__ */ p("div", {
+			v.lastOutput && /* @__PURE__ */ h("div", {
 				className: "mt-2 text-xs font-mono bg-bg-sunken text-status-success-text p-2 rounded truncate",
-				children: g.lastOutput
+				children: v.lastOutput
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ g("div", {
 				className: "mt-3 flex items-center justify-between text-sm text-text-secondary",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ g("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ p(r, { className: "size-4" }), /* @__PURE__ */ p("span", { children: A(g.updatedAt) })]
-				}), g.pid && /* @__PURE__ */ m("span", {
+					children: [/* @__PURE__ */ h(a, { className: "size-4" }), /* @__PURE__ */ h("span", { children: M(v.updatedAt) })]
+				}), v.pid && /* @__PURE__ */ g("span", {
 					className: "text-xs font-mono",
-					children: ["PID: ", g.pid]
+					children: ["PID: ", v.pid]
 				})]
 			})
 		]
 	});
 };
 //#endregion
-export { g as SessionCard };
+export { v as SessionCard };
 
 //# sourceMappingURL=SessionCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SessionCard.js","names":[],"sources":["../../../src/components/sessions/SessionCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Terminal,\n  Clock,\n  MoreVertical,\n  Play,\n  Square,\n  RotateCcw,\n  Trash2,\n  Share2,\n} from 'lucide-react';\nimport { SessionStatusBadge } from './SessionStatusBadge';\nimport type { Session } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\nexport interface SessionCardProps {\n  session: Session;\n  onOpen?: (session: Session) => void;\n  onStart?: (session: Session) => void;\n  onStop?: (session: Session) => void;\n  onRestart?: (session: Session) => void;\n  onTerminate?: (session: Session) => void;\n  onOpenTerminal?: (session: Session) => void;\n  /** Callback to open the share dialog */\n  onShare?: (session: Session) => void;\n  /** Whether this card is selected for bulk operations */\n  selected?: boolean;\n  /** Toggle selection for bulk operations */\n  onToggleSelect?: () => void;\n  className?: string;\n}\n\nconst sessionTypeIcons: Record<string, string> = {\n  TMUX: '🖥️',\n  SSH: '🔐',\n  TERMINAL: '💻',\n  SCRIPT: '📜',\n  CUSTOM: '⚙️',\n};\n\n/**\n * SessionCard - Display terminal session information\n */\nexport const SessionCard: FC<SessionCardProps> = ({\n  session,\n  onOpen,\n  onStart,\n  onStop,\n  onRestart,\n  onTerminate,\n  onOpenTerminal,\n  onShare,\n  selected = false,\n  onToggleSelect,\n  className = '',\n}) => {\n  const tr = useTr();\n  const [showMenu, setShowMenu] = useState(false);\n\n  const formatTime = (timestamp: string | undefined | null) => {\n    if (!timestamp) return 'Never';\n    const diff = Date.now() - new Date(timestamp).getTime();\n    if (diff < 60000) return 'Just now';\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return new Date(timestamp).toLocaleDateString();\n  };\n\n  const isRunning = session.status === 'RUNNING';\n  const isStopped = session.status === 'STOPPED' || session.status === 'TERMINATED';\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${selected ? 'border-action-primary-bg ring-1 ring-action-primary-bg/30' : 'border-border-default'} ${className}`}\n      onClick={() => onOpen?.(session)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex items-start gap-2 sm:gap-3 min-w-0 flex-1\">\n          {onToggleSelect && (\n            <div className=\"flex-shrink-0 pt-0.5\">\n              <input\n                aria-label=\"control\"\n                type=\"checkbox\"\n                checked={selected}\n                onChange={(e) => {\n                  e.stopPropagation();\n                  onToggleSelect();\n                }}\n                onClick={(e) => e.stopPropagation()}\n                className=\"size-4 rounded border-border-default cursor-pointer\"\n              />\n            </div>\n          )}\n          <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Terminal className=\"size-4 sm:w-5 sm:h-5 text-text-secondary\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base\">\n                {session.name}\n              </h3>\n              <span className=\"text-base sm:text-lg flex-shrink-0\">\n                {sessionTypeIcons[session.type] || '💻'}\n              </span>\n            </div>\n            <p className=\"text-xs sm:text-sm text-text-secondary\">{session.type}</p>\n          </div>\n        </div>\n        {/* Status and Actions - always visible */}\n        <div className=\"flex items-center gap-1 sm:gap-2 flex-shrink-0\">\n          <SessionStatusBadge status={session.status} />\n          {(onStart || onStop || onRestart || onTerminate) && (\n            <div className=\"relative\">\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setShowMenu(!showMenu);\n                }}\n                className=\"p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors\"\n              >\n                <MoreVertical className=\"size-4 text-text-secondary\" />\n              </button>\n              <AnimatePresence>\n                {showMenu && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                    transition={{ duration: 0.15 }}\n                    className=\"absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n                  >\n                    {isStopped && onStart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Play className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.start', 'Start')}\n                      </motion.button>\n                    )}\n                    {isRunning && onStop && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStop(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Square className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.stop', 'Stop')}\n                      </motion.button>\n                    )}\n                    {isRunning && onRestart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onRestart(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <RotateCcw className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.restart', 'Restart')}\n                      </motion.button>\n                    )}\n                    {isRunning && onOpenTerminal && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onOpenTerminal(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Terminal className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.openTerminal', 'Open Terminal')}\n                      </motion.button>\n                    )}\n                    {isRunning && onShare && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onShare(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Share2 className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.shareSession', 'Share Session')}\n                      </motion.button>\n                    )}\n                    {onTerminate && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onTerminate(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-status-error-text hover:bg-bg-sunken rounded-b-lg\"\n                      >\n                        <Trash2 className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.terminate', 'Terminate')}\n                      </motion.button>\n                    )}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Provider-native session name (e.g. tmux session name like\n          `vibe-051c9c62`). Surfaced so users can recognise their session\n          if they ever need to attach from a CLI (`tmux attach -t …`)\n          and so reconnect-after-restart flows are obvious. */}\n      {(() => {\n        const meta = (session.metadata as Record<string, unknown> | null) || {};\n        const externalName =\n          (typeof meta.tmuxSessionName === 'string' && meta.tmuxSessionName) ||\n          (typeof meta.weztermWorkspace === 'string' && meta.weztermWorkspace) ||\n          (typeof meta.zellijSessionName === 'string' && meta.zellijSessionName) ||\n          (typeof meta.externalSessionName === 'string' && meta.externalSessionName) ||\n          session.providerSessionName ||\n          null;\n        return externalName ? (\n          <div\n            className=\"mt-2 text-[10px] font-mono text-text-tertiary\"\n            title={`Provider session: ${externalName}`}\n            data-testid=\"session-card-external-name\"\n          >\n            <span className=\"opacity-70\">{session.type.toLowerCase()}: </span>\n            <span className=\"break-all\">{externalName}</span>\n          </div>\n        ) : null;\n      })()}\n\n      {session.command && (\n        <div className=\"mt-3 text-xs font-mono bg-bg-sunken p-2 rounded truncate text-text-secondary\">\n          $ {session.command}\n        </div>\n      )}\n\n      {session.lastOutput && (\n        <div className=\"mt-2 text-xs font-mono bg-bg-sunken text-status-success-text p-2 rounded truncate\">\n          {session.lastOutput}\n        </div>\n      )}\n\n      <div className=\"mt-3 flex items-center justify-between text-sm text-text-secondary\">\n        <div className=\"flex items-center gap-2\">\n          <Clock className=\"size-4\" />\n          <span>{formatTime(session.updatedAt)}</span>\n        </div>\n        {session.pid && <span className=\"text-xs font-mono\">PID: {session.pid}</span>}\n      </div>\n    </motion.div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SessionCard.js","names":[],"sources":["../../../src/components/sessions/SessionCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Terminal,\n  Clock,\n  MoreVertical,\n  Play,\n  Square,\n  RotateCcw,\n  Trash2,\n  Share2,\n} from 'lucide-react';\nimport { SessionStatusBadge } from './SessionStatusBadge';\nimport { AgentInfoPopover, TargetInfoPopover } from './EntityInfoPopover';\nimport type { Session } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\nexport interface SessionCardProps {\n  session: Session;\n  onOpen?: (session: Session) => void;\n  onStart?: (session: Session) => void;\n  onStop?: (session: Session) => void;\n  onRestart?: (session: Session) => void;\n  onTerminate?: (session: Session) => void;\n  onOpenTerminal?: (session: Session) => void;\n  /** Callback to open the share dialog */\n  onShare?: (session: Session) => void;\n  /** Whether this card is selected for bulk operations */\n  selected?: boolean;\n  /** Toggle selection for bulk operations */\n  onToggleSelect?: () => void;\n  className?: string;\n}\n\nconst sessionTypeIcons: Record<string, string> = {\n  TMUX: '🖥️',\n  SSH: '🔐',\n  TERMINAL: '💻',\n  SCRIPT: '📜',\n  CUSTOM: '⚙️',\n};\n\n/**\n * SessionCard - Display terminal session information\n */\nexport const SessionCard: FC<SessionCardProps> = ({\n  session,\n  onOpen,\n  onStart,\n  onStop,\n  onRestart,\n  onTerminate,\n  onOpenTerminal,\n  onShare,\n  selected = false,\n  onToggleSelect,\n  className = '',\n}) => {\n  const tr = useTr();\n  const [showMenu, setShowMenu] = useState(false);\n\n  const formatTime = (timestamp: string | undefined | null) => {\n    if (!timestamp) return 'Never';\n    const diff = Date.now() - new Date(timestamp).getTime();\n    if (diff < 60000) return 'Just now';\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return new Date(timestamp).toLocaleDateString();\n  };\n\n  const isRunning = session.status === 'RUNNING';\n  const isStopped = session.status === 'STOPPED' || session.status === 'TERMINATED';\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${selected ? 'border-action-primary-bg ring-1 ring-action-primary-bg/30' : 'border-border-default'} ${className}`}\n      onClick={() => onOpen?.(session)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex items-start gap-2 sm:gap-3 min-w-0 flex-1\">\n          {onToggleSelect && (\n            <div className=\"flex-shrink-0 pt-0.5\">\n              <input\n                aria-label=\"control\"\n                type=\"checkbox\"\n                checked={selected}\n                onChange={(e) => {\n                  e.stopPropagation();\n                  onToggleSelect();\n                }}\n                onClick={(e) => e.stopPropagation()}\n                className=\"size-4 rounded border-border-default cursor-pointer\"\n              />\n            </div>\n          )}\n          <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Terminal className=\"size-4 sm:w-5 sm:h-5 text-text-secondary\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base\">\n                {session.name}\n              </h3>\n              <span className=\"text-base sm:text-lg flex-shrink-0\">\n                {sessionTypeIcons[session.type] || '💻'}\n              </span>\n            </div>\n            <p className=\"text-xs sm:text-sm text-text-secondary\">{session.type}</p>\n            {session.agent && (\n              <div className=\"mt-1.5 flex items-center gap-1 flex-wrap\">\n                <AgentInfoPopover agent={session.agent} />\n                {session.agent.target && <TargetInfoPopover target={session.agent.target} />}\n              </div>\n            )}\n          </div>\n        </div>\n        {/* Status and Actions - always visible */}\n        <div className=\"flex items-center gap-1 sm:gap-2 flex-shrink-0\">\n          <SessionStatusBadge status={session.status} />\n          {(onStart || onStop || onRestart || onTerminate) && (\n            <div className=\"relative\">\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setShowMenu(!showMenu);\n                }}\n                className=\"p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors\"\n              >\n                <MoreVertical className=\"size-4 text-text-secondary\" />\n              </button>\n              <AnimatePresence>\n                {showMenu && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                    transition={{ duration: 0.15 }}\n                    className=\"absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n                  >\n                    {isStopped && onStart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Play className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.start', 'Start')}\n                      </motion.button>\n                    )}\n                    {isRunning && onStop && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStop(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Square className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.stop', 'Stop')}\n                      </motion.button>\n                    )}\n                    {isRunning && onRestart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onRestart(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <RotateCcw className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.restart', 'Restart')}\n                      </motion.button>\n                    )}\n                    {isRunning && onOpenTerminal && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onOpenTerminal(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Terminal className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.openTerminal', 'Open Terminal')}\n                      </motion.button>\n                    )}\n                    {isRunning && onShare && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onShare(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Share2 className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.shareSession', 'Share Session')}\n                      </motion.button>\n                    )}\n                    {onTerminate && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onTerminate(session);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-status-error-text hover:bg-bg-sunken rounded-b-lg\"\n                      >\n                        <Trash2 className=\"size-4\" />\n                        {tr('vibecontrols.sessions.card.terminate', 'Terminate')}\n                      </motion.button>\n                    )}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Provider-native session name (e.g. tmux session name like\n          `vibe-051c9c62`). Surfaced so users can recognise their session\n          if they ever need to attach from a CLI (`tmux attach -t …`)\n          and so reconnect-after-restart flows are obvious. */}\n      {(() => {\n        const meta = (session.metadata as Record<string, unknown> | null) || {};\n        const externalName =\n          (typeof meta.tmuxSessionName === 'string' && meta.tmuxSessionName) ||\n          (typeof meta.weztermWorkspace === 'string' && meta.weztermWorkspace) ||\n          (typeof meta.zellijSessionName === 'string' && meta.zellijSessionName) ||\n          (typeof meta.externalSessionName === 'string' && meta.externalSessionName) ||\n          session.providerSessionName ||\n          null;\n        return externalName ? (\n          <div\n            className=\"mt-2 text-[10px] font-mono text-text-tertiary\"\n            title={`Provider session: ${externalName}`}\n            data-testid=\"session-card-external-name\"\n          >\n            <span className=\"opacity-70\">{session.type.toLowerCase()}: </span>\n            <span className=\"break-all\">{externalName}</span>\n          </div>\n        ) : null;\n      })()}\n\n      {session.command && (\n        <div className=\"mt-3 text-xs font-mono bg-bg-sunken p-2 rounded truncate text-text-secondary\">\n          $ {session.command}\n        </div>\n      )}\n\n      {session.lastOutput && (\n        <div className=\"mt-2 text-xs font-mono bg-bg-sunken text-status-success-text p-2 rounded truncate\">\n          {session.lastOutput}\n        </div>\n      )}\n\n      <div className=\"mt-3 flex items-center justify-between text-sm text-text-secondary\">\n        <div className=\"flex items-center gap-2\">\n          <Clock className=\"size-4\" />\n          <span>{formatTime(session.updatedAt)}</span>\n        </div>\n        {session.pid && <span className=\"text-xs font-mono\">PID: {session.pid}</span>}\n      </div>\n    </motion.div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/sessions/SessionGroup.js

@@ -0,0 +1,49 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { ChevronDown as t, ChevronRight as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/sessions/SessionGroup.tsx
+function a({ label: a, count: o, collapsed: s, onToggleCollapse: c, allSelected: l, someSelected: u, onToggleSelectGroup: d, showSelect: f = !0, children: p }) {
+	let m = e();
+	return /* @__PURE__ */ i("div", {
+		"data-testid": "session-group",
+		"data-group-label": a,
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex items-center gap-2 px-1 py-1.5 sticky top-0 z-[1] bg-bg-surface/95 backdrop-blur-sm",
+			children: [f && /* @__PURE__ */ r("input", {
+				"aria-label": m("sessions.group.selectGroup", "Select group"),
+				type: "checkbox",
+				checked: l,
+				ref: (e) => {
+					e && (e.indeterminate = !l && u);
+				},
+				onChange: (e) => {
+					e.stopPropagation(), d();
+				},
+				onClick: (e) => e.stopPropagation(),
+				className: "size-3.5 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
+			}), /* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: c,
+				className: "flex items-center gap-1.5 text-sm font-semibold text-text-primary hover:text-text-link transition-colors min-w-0",
+				children: [
+					r(s ? n : t, { className: "size-3.5 text-text-tertiary shrink-0" }),
+					/* @__PURE__ */ r("span", {
+						className: "truncate",
+						children: a
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "ml-1 inline-flex items-center justify-center min-w-[1.25rem] px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-bg-sunken text-text-secondary",
+						children: o
+					})
+				]
+			})]
+		}), !s && /* @__PURE__ */ r("div", {
+			className: "pb-2",
+			children: p
+		})]
+	});
+}
+//#endregion
+export { a as SessionGroup };
+
+//# sourceMappingURL=SessionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionGroup.js","names":[],"sources":["../../../src/components/sessions/SessionGroup.tsx"],"sourcesContent":["/**\n * SessionGroup — a collapsible section wrapping one group of sessions in\n * the grid/list views. The header carries the group label, a count, and a\n * tri-state select-all checkbox that toggles only this group's ids in the\n * page-level selection Set (so the global bulk-action bar keeps working).\n */\nimport type { ReactNode } from 'react';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nexport interface SessionGroupProps {\n  label: string;\n  count: number;\n  collapsed: boolean;\n  onToggleCollapse: () => void;\n  /** All sessions in this group are selected. */\n  allSelected: boolean;\n  /** Some (but not all) sessions in this group are selected. */\n  someSelected: boolean;\n  /** Toggle selection of every session in this group. */\n  onToggleSelectGroup: () => void;\n  /** Whether to show the per-group select checkbox (bulk mode). */\n  showSelect?: boolean;\n  children: ReactNode;\n}\n\nexport function SessionGroup({\n  label,\n  count,\n  collapsed,\n  onToggleCollapse,\n  allSelected,\n  someSelected,\n  onToggleSelectGroup,\n  showSelect = true,\n  children,\n}: SessionGroupProps) {\n  const tr = useTr();\n  return (\n    <div data-testid=\"session-group\" data-group-label={label}>\n      <div className=\"flex items-center gap-2 px-1 py-1.5 sticky top-0 z-[1] bg-bg-surface/95 backdrop-blur-sm\">\n        {showSelect && (\n          <input\n            aria-label={tr('sessions.group.selectGroup', 'Select group')}\n            type=\"checkbox\"\n            checked={allSelected}\n            ref={(el) => {\n              if (el) el.indeterminate = !allSelected && someSelected;\n            }}\n            onChange={(e) => {\n              e.stopPropagation();\n              onToggleSelectGroup();\n            }}\n            onClick={(e) => e.stopPropagation()}\n            className=\"size-3.5 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg\"\n          />\n        )}\n        <button\n          type=\"button\"\n          onClick={onToggleCollapse}\n          className=\"flex items-center gap-1.5 text-sm font-semibold text-text-primary hover:text-text-link transition-colors min-w-0\"\n        >\n          {collapsed ? (\n            <ChevronRight className=\"size-3.5 text-text-tertiary shrink-0\" />\n          ) : (\n            <ChevronDown className=\"size-3.5 text-text-tertiary shrink-0\" />\n          )}\n          <span className=\"truncate\">{label}</span>\n          <span className=\"ml-1 inline-flex items-center justify-center min-w-[1.25rem] px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-bg-sunken text-text-secondary\">\n            {count}\n          </span>\n        </button>\n      </div>\n      {!collapsed && <div className=\"pb-2\">{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;AA0BA,SAAgB,EAAa,EAC3B,UACA,UACA,cACA,qBACA,gBACA,iBACA,wBACA,gBAAa,IACb,eACoB;CACpB,IAAM,IAAK,GAAO;AAClB,QACE,kBAAC,OAAD;EAAK,eAAY;EAAgB,oBAAkB;YAAnD,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KACC,kBAAC,SAAD;IACE,cAAY,EAAG,8BAA8B,eAAe;IAC5D,MAAK;IACL,SAAS;IACT,MAAM,MAAO;AACX,KAAI,MAAI,EAAG,gBAAgB,CAAC,KAAe;;IAE7C,WAAW,MAAM;AAEf,KADA,EAAE,iBAAiB,EACnB,GAAqB;;IAEvB,UAAU,MAAM,EAAE,iBAAiB;IACnC,WAAU;IACV,CAAA,EAEJ,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ;KAMI,EADD,IACE,IAEA,GAFD,EAAc,WAAU,wCAAyC,CAED;KAElE,kBAAC,QAAD;MAAM,WAAU;gBAAY;MAAa,CAAA;KACzC,kBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA;KACA;MACL;MACL,CAAC,KAAa,kBAAC,OAAD;GAAK,WAAU;GAAQ;GAAe,CAAA,CACjD"}