@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/sessions/CollaboratorsList.js

@@ -0,0 +1,162 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { CollaboratorRole as t } from "../../generated/wspace-types.js";
+import { useMemo as n } from "react";
+import { Crown as r, Eye as i, Gamepad2 as a, User as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/sessions/CollaboratorsList.tsx
+var l = [
+	"bg-accent-blue",
+	"bg-status-success-bg",
+	"bg-accent-purple",
+	"bg-accent-teal",
+	"bg-accent-indigo",
+	"bg-status-error-bg",
+	"bg-status-warning-bg",
+	"bg-action-primary-bg"
+];
+function u(e) {
+	return l[e.split("").reduce((e, t) => e + t.charCodeAt(0), 0) % l.length];
+}
+var d = ({ collaborators: l, currentUserId: d, onRequestControl: f, onTransferControl: p, isRequestingControl: m = !1, className: h = "" }) => {
+	let g = e(), _ = l.find((e) => e.hasControl), v = l.filter((e) => !e.hasControl), y = l.find((e) => e.userId === d), b = y?.role === t.Owner, x = y?.hasControl, S = y?.role !== t.Viewer && !x, C = (e) => {
+		switch (e) {
+			case t.Owner: return /* @__PURE__ */ s(r, { className: "w-3 h-3 text-status-warning-text" });
+			case t.Editor: return /* @__PURE__ */ s(a, { className: "w-3 h-3 text-action-primary-bg" });
+			default: return /* @__PURE__ */ s(i, { className: "w-3 h-3 text-text-secondary" });
+		}
+	}, w = (e) => {
+		switch (e) {
+			case t.Owner: return /* @__PURE__ */ s("span", {
+				className: "px-1.5 py-0.5 text-xs bg-status-warning-bg/10 text-status-warning-text rounded",
+				children: g("vibecontrols.sessions.collaborators.owner", "Owner")
+			});
+			case t.Editor: return /* @__PURE__ */ s("span", {
+				className: "px-1.5 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded",
+				children: g("vibecontrols.sessions.collaborators.editor", "Editor")
+			});
+			default: return /* @__PURE__ */ s("span", {
+				className: "px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+				children: g("vibecontrols.sessions.collaborators.viewer", "Viewer")
+			});
+		}
+	}, T = n(() => new Map(l.map((e) => [e.userId, u(e.userId)])), [l]);
+	return l.length === 0 ? null : /* @__PURE__ */ c("div", {
+		className: `space-y-3 ${h}`,
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between",
+				children: /* @__PURE__ */ c("h4", {
+					className: "text-sm font-medium text-text-primary flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ s(o, { className: "w-4 h-4" }),
+						g("vibecontrols.sessions.collaborators.title", "Collaborators"),
+						" (",
+						l.length,
+						")"
+					]
+				})
+			}),
+			_ && /* @__PURE__ */ c("div", {
+				className: "p-3 bg-action-primary-bg/5 border border-action-primary-bg/20 rounded-lg",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2 mb-2",
+					children: [/* @__PURE__ */ s(a, { className: "w-4 h-4 text-action-primary-bg" }), /* @__PURE__ */ s("span", {
+						className: "text-xs font-medium text-action-primary-bg uppercase tracking-wide",
+						children: g("vibecontrols.sessions.collaborators.hasControl", "Has Control")
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ c("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ s("div", {
+							className: `w-8 h-8 rounded-full flex items-center justify-center text-text-inverse text-sm font-medium ${T.get(_.userId)}`,
+							children: _.username?.[0]?.toUpperCase() || _.userId[0].toUpperCase()
+						}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("p", {
+							className: "text-sm font-medium text-text-primary",
+							children: [_.username || `User ${_.userId.slice(0, 6)}`, _.userId === d && /* @__PURE__ */ c("span", {
+								className: "ml-1 text-xs text-text-secondary",
+								children: [
+									"(",
+									g("vibecontrols.sessions.collaborators.you", "You"),
+									")"
+								]
+							})]
+						}), /* @__PURE__ */ c("div", {
+							className: "flex items-center gap-1",
+							children: [C(_.role), w(_.role)]
+						})] })]
+					}), b && _.userId !== d && p && /* @__PURE__ */ s("button", {
+						onClick: () => p(_.userId),
+						className: "text-xs text-text-secondary hover:text-text-primary transition-colors",
+						children: g("vibecontrols.sessions.collaborators.transferControl", "Transfer control")
+					})]
+				})]
+			}),
+			v.length > 0 && /* @__PURE__ */ c("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ s(i, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ s("span", {
+						className: "text-xs font-medium text-text-secondary uppercase tracking-wide",
+						children: g("vibecontrols.sessions.collaborators.viewing", "Viewing")
+					})]
+				}), /* @__PURE__ */ s("div", {
+					className: "space-y-1",
+					children: v.map((e) => /* @__PURE__ */ c("div", {
+						className: "flex items-center justify-between p-2 rounded-lg hover:bg-bg-sunken transition-colors",
+						children: [/* @__PURE__ */ c("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ s("div", {
+								className: `w-7 h-7 rounded-full flex items-center justify-center text-text-inverse text-xs font-medium ${T.get(e.userId)}`,
+								children: e.username?.[0]?.toUpperCase() || e.userId[0].toUpperCase()
+							}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("p", {
+								className: "text-sm text-text-primary",
+								children: [e.username || `User ${e.userId.slice(0, 6)}`, e.userId === d && /* @__PURE__ */ c("span", {
+									className: "ml-1 text-xs text-text-secondary",
+									children: [
+										"(",
+										g("vibecontrols.sessions.collaborators.you", "You"),
+										")"
+									]
+								})]
+							}), /* @__PURE__ */ s("div", {
+								className: "flex items-center gap-1",
+								children: w(e.role)
+							})] })]
+						}), b && e.role === t.Editor && p && /* @__PURE__ */ s("button", {
+							onClick: () => p(e.userId),
+							className: "text-xs text-action-primary-bg hover:underline",
+							children: g("vibecontrols.sessions.collaborators.giveControl", "Give control")
+						})]
+					}, e.id))
+				})]
+			}),
+			S && f && /* @__PURE__ */ c("button", {
+				onClick: f,
+				disabled: m,
+				className: "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+				children: [/* @__PURE__ */ s(a, { className: "w-4 h-4" }), m ? g("vibecontrols.sessions.collaborators.requesting", "Requesting...") : g("vibecontrols.sessions.collaborators.requestControl", "Request Control")]
+			}),
+			y && /* @__PURE__ */ s("div", {
+				className: "p-2 bg-bg-sunken rounded-lg",
+				children: /* @__PURE__ */ s("p", {
+					className: "text-xs text-text-secondary text-center",
+					children: x ? /* @__PURE__ */ c("span", {
+						className: "flex items-center justify-center gap-1",
+						children: [/* @__PURE__ */ s(a, { className: "w-3 h-3 text-action-primary-bg" }), g("vibecontrols.sessions.collaborators.youHaveControl", "You have control - others are watching")]
+					}) : y.role === t.Viewer ? /* @__PURE__ */ c("span", {
+						className: "flex items-center justify-center gap-1",
+						children: [/* @__PURE__ */ s(i, { className: "w-3 h-3" }), g("vibecontrols.sessions.collaborators.viewOnlyMode", "View only mode")]
+					}) : /* @__PURE__ */ c("span", {
+						className: "flex items-center justify-center gap-1",
+						children: [/* @__PURE__ */ s(i, { className: "w-3 h-3" }), g("vibecontrols.sessions.collaborators.watchingRequestControl", "Watching - request control to type")]
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { d as CollaboratorsList };
+
+//# sourceMappingURL=CollaboratorsList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollaboratorsList.js","names":[],"sources":["../../../src/components/sessions/CollaboratorsList.tsx"],"sourcesContent":["import { type FC, useMemo } from 'react';\nimport { Crown, Eye, Gamepad2, User } from 'lucide-react';\nimport type { SessionCollaboratorFieldsFragment } from '../../generated/wspace-operations';\nimport { CollaboratorRole } from '../../generated/wspace-types';\nimport { useTr } from '../../shared/hooks/useTr';\n\nconst AVATAR_COLORS = [\n  'bg-accent-blue',\n  'bg-status-success-bg',\n  'bg-accent-purple',\n  'bg-accent-teal',\n  'bg-accent-indigo',\n  'bg-status-error-bg',\n  'bg-status-warning-bg',\n  'bg-action-primary-bg',\n];\n\nfunction getAvatarColor(userId: string): string {\n  const hash = userId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);\n  return AVATAR_COLORS[hash % AVATAR_COLORS.length];\n}\n\ninterface CollaboratorsListProps {\n  collaborators: SessionCollaboratorFieldsFragment[];\n  currentUserId?: string;\n  onRequestControl?: () => void;\n  onTransferControl?: (toUserId: string) => void;\n  isRequestingControl?: boolean;\n  className?: string;\n}\n\n/**\n * CollaboratorsList - Shows users currently viewing/collaborating on a session\n * Displays who has control and allows control requests in turn-based mode\n */\nexport const CollaboratorsList: FC<CollaboratorsListProps> = ({\n  collaborators,\n  currentUserId,\n  onRequestControl,\n  onTransferControl,\n  isRequestingControl = false,\n  className = '',\n}) => {\n  const tr = useTr();\n  const controller = collaborators.find((c) => c.hasControl);\n  const viewers = collaborators.filter((c) => !c.hasControl);\n  const currentUserCollaborator = collaborators.find((c) => c.userId === currentUserId);\n  const isOwner = currentUserCollaborator?.role === CollaboratorRole.Owner;\n  const hasControl = currentUserCollaborator?.hasControl;\n  const canRequestControl =\n    currentUserCollaborator?.role !== CollaboratorRole.Viewer && !hasControl;\n\n  const getRoleIcon = (role: CollaboratorRole) => {\n    switch (role) {\n      case CollaboratorRole.Owner:\n        return <Crown className=\"w-3 h-3 text-status-warning-text\" />;\n      case CollaboratorRole.Editor:\n        return <Gamepad2 className=\"w-3 h-3 text-action-primary-bg\" />;\n      default:\n        return <Eye className=\"w-3 h-3 text-text-secondary\" />;\n    }\n  };\n\n  const getRoleBadge = (role: CollaboratorRole) => {\n    switch (role) {\n      case CollaboratorRole.Owner:\n        return (\n          <span className=\"px-1.5 py-0.5 text-xs bg-status-warning-bg/10 text-status-warning-text rounded\">\n            {tr('vibecontrols.sessions.collaborators.owner', 'Owner')}\n          </span>\n        );\n      case CollaboratorRole.Editor:\n        return (\n          <span className=\"px-1.5 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded\">\n            {tr('vibecontrols.sessions.collaborators.editor', 'Editor')}\n          </span>\n        );\n      default:\n        return (\n          <span className=\"px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n            {tr('vibecontrols.sessions.collaborators.viewer', 'Viewer')}\n          </span>\n        );\n    }\n  };\n\n  // Memoize avatar colors for all collaborators to avoid recomputing on every render\n  const avatarColors = useMemo(\n    () => new Map(collaborators.map((c) => [c.userId, getAvatarColor(c.userId)])),\n    [collaborators]\n  );\n\n  if (collaborators.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={`space-y-3 ${className}`}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <h4 className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n          <User className=\"w-4 h-4\" />\n          {tr('vibecontrols.sessions.collaborators.title', 'Collaborators')} ({collaborators.length}\n          )\n        </h4>\n      </div>\n\n      {/* Controller Section */}\n      {controller && (\n        <div className=\"p-3 bg-action-primary-bg/5 border border-action-primary-bg/20 rounded-lg\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <Gamepad2 className=\"w-4 h-4 text-action-primary-bg\" />\n            <span className=\"text-xs font-medium text-action-primary-bg uppercase tracking-wide\">\n              {tr('vibecontrols.sessions.collaborators.hasControl', 'Has Control')}\n            </span>\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <div\n                className={`w-8 h-8 rounded-full flex items-center justify-center text-text-inverse text-sm font-medium ${avatarColors.get(controller.userId)}`}\n              >\n                {controller.username?.[0]?.toUpperCase() || controller.userId[0].toUpperCase()}\n              </div>\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {controller.username || `User ${controller.userId.slice(0, 6)}`}\n                  {controller.userId === currentUserId && (\n                    <span className=\"ml-1 text-xs text-text-secondary\">\n                      ({tr('vibecontrols.sessions.collaborators.you', 'You')})\n                    </span>\n                  )}\n                </p>\n                <div className=\"flex items-center gap-1\">\n                  {getRoleIcon(controller.role)}\n                  {getRoleBadge(controller.role)}\n                </div>\n              </div>\n            </div>\n            {isOwner && controller.userId !== currentUserId && onTransferControl && (\n              <button\n                onClick={() => onTransferControl(controller.userId)}\n                className=\"text-xs text-text-secondary hover:text-text-primary transition-colors\"\n              >\n                {tr('vibecontrols.sessions.collaborators.transferControl', 'Transfer control')}\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Viewers List */}\n      {viewers.length > 0 && (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-2\">\n            <Eye className=\"w-4 h-4 text-text-secondary\" />\n            <span className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              {tr('vibecontrols.sessions.collaborators.viewing', 'Viewing')}\n            </span>\n          </div>\n          <div className=\"space-y-1\">\n            {viewers.map((collaborator) => (\n              <div\n                key={collaborator.id}\n                className=\"flex items-center justify-between p-2 rounded-lg hover:bg-bg-sunken transition-colors\"\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div\n                    className={`w-7 h-7 rounded-full flex items-center justify-center text-text-inverse text-xs font-medium ${avatarColors.get(collaborator.userId)}`}\n                  >\n                    {collaborator.username?.[0]?.toUpperCase() ||\n                      collaborator.userId[0].toUpperCase()}\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-text-primary\">\n                      {collaborator.username || `User ${collaborator.userId.slice(0, 6)}`}\n                      {collaborator.userId === currentUserId && (\n                        <span className=\"ml-1 text-xs text-text-secondary\">\n                          ({tr('vibecontrols.sessions.collaborators.you', 'You')})\n                        </span>\n                      )}\n                    </p>\n                    <div className=\"flex items-center gap-1\">{getRoleBadge(collaborator.role)}</div>\n                  </div>\n                </div>\n                {isOwner && collaborator.role === CollaboratorRole.Editor && onTransferControl && (\n                  <button\n                    onClick={() => onTransferControl(collaborator.userId)}\n                    className=\"text-xs text-action-primary-bg hover:underline\"\n                  >\n                    {tr('vibecontrols.sessions.collaborators.giveControl', 'Give control')}\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Request Control Button */}\n      {canRequestControl && onRequestControl && (\n        <button\n          onClick={onRequestControl}\n          disabled={isRequestingControl}\n          className=\"w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n        >\n          <Gamepad2 className=\"w-4 h-4\" />\n          {isRequestingControl\n            ? tr('vibecontrols.sessions.collaborators.requesting', 'Requesting...')\n            : tr('vibecontrols.sessions.collaborators.requestControl', 'Request Control')}\n        </button>\n      )}\n\n      {/* Current User Status */}\n      {currentUserCollaborator && (\n        <div className=\"p-2 bg-bg-sunken rounded-lg\">\n          <p className=\"text-xs text-text-secondary text-center\">\n            {hasControl ? (\n              <span className=\"flex items-center justify-center gap-1\">\n                <Gamepad2 className=\"w-3 h-3 text-action-primary-bg\" />\n                {tr(\n                  'vibecontrols.sessions.collaborators.youHaveControl',\n                  'You have control - others are watching'\n                )}\n              </span>\n            ) : currentUserCollaborator.role === CollaboratorRole.Viewer ? (\n              <span className=\"flex items-center justify-center gap-1\">\n                <Eye className=\"w-3 h-3\" />\n                {tr('vibecontrols.sessions.collaborators.viewOnlyMode', 'View only mode')}\n              </span>\n            ) : (\n              <span className=\"flex items-center justify-center gap-1\">\n                <Eye className=\"w-3 h-3\" />\n                {tr(\n                  'vibecontrols.sessions.collaborators.watchingRequestControl',\n                  'Watching - request control to type'\n                )}\n              </span>\n            )}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/sessions/ControlStatusBar.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { SessionCollaboratorFieldsFragment } from '../../generated/wspace-operations';
+import { SessionSharePermission } from '../../generated/wspace-types';
+
+interface ControlStatusBarProps {
+    collaborators: SessionCollaboratorFieldsFragment[];
+    currentUserId?: string;
+    permission?: SessionSharePermission;
+    onRequestControl?: () => void;
+    onReleaseControl?: () => void;
+    isRequestingControl?: boolean;
+    isReleasingControl?: boolean;
+    className?: string;
+}
+/**
+ * ControlStatusBar - Compact status bar showing control state and viewer count
+ * Designed to be displayed above or below the terminal
+ */
+export declare const ControlStatusBar: FC<ControlStatusBarProps>;
+/**
+ * MiniControlIndicator - Minimal floating indicator for control status
+ * Can be overlaid on top of the terminal
+ */
+export declare const MiniControlIndicator: FC<{
+    hasControl: boolean;
+    controllerName?: string;
+    viewerCount: number;
+    isViewer?: boolean;
+}>;
+export {};
+//# sourceMappingURL=ControlStatusBar.d.ts.map

package/dist/components/sessions/ControlStatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlStatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/sessions/ControlStatusBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;AAC3F,OAAO,EAAoB,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAGxF,UAAU,qBAAqB;IAC7B,aAAa,EAAE,iCAAiC,EAAE,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA6GtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAyCA,CAAC"}

package/dist/components/sessions/ControlStatusBar.js

@@ -0,0 +1,79 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { CollaboratorRole as t, SessionSharePermission as n } from "../../generated/wspace-types.js";
+import { ArrowRightLeft as r, Eye as i, Gamepad2 as a, HandMetal as o, Users as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/sessions/ControlStatusBar.tsx
+var d = ({ collaborators: c, currentUserId: d, permission: f, onRequestControl: p, onReleaseControl: m, isRequestingControl: h = !1, isReleasingControl: g = !1, className: _ = "" }) => {
+	let v = e(), y = c.find((e) => e.hasControl), b = c.find((e) => e.userId === d), x = b?.hasControl, S = c.filter((e) => !e.hasControl).length, C = f === n.View || b?.role === t.Viewer, w = !C && !x, T = x ? {
+		icon: /* @__PURE__ */ l(a, { className: "w-4 h-4 text-status-success-text" }),
+		text: v("vibecontrols.sessions.control.youHaveControl", "You have control"),
+		bgColor: "bg-status-success-bg/10 border-status-success-bg/30",
+		textColor: "text-status-success-text"
+	} : y ? {
+		icon: /* @__PURE__ */ l(i, { className: "w-4 h-4 text-action-primary-bg" }),
+		text: v("vibecontrols.sessions.control.userHasControl", "{{username}} has control", { username: y.username || "Someone" }),
+		bgColor: "bg-action-primary-bg/10 border-action-primary-bg/30",
+		textColor: "text-action-primary-bg"
+	} : {
+		icon: /* @__PURE__ */ l(s, { className: "w-4 h-4 text-text-secondary" }),
+		text: v("vibecontrols.sessions.control.noOneHasControl", "No one has control"),
+		bgColor: "bg-bg-sunken border-border-default",
+		textColor: "text-text-secondary"
+	};
+	return /* @__PURE__ */ u("div", {
+		className: `flex items-center justify-between px-4 py-2 border rounded-t-lg ${T.bgColor} ${_}`,
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [T.icon, /* @__PURE__ */ l("span", {
+						className: `text-sm font-medium ${T.textColor}`,
+						children: T.text
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-1 px-2 py-0.5 bg-bg-surface/50 rounded text-xs text-text-secondary",
+					children: [/* @__PURE__ */ l(s, { className: "w-3 h-3" }), /* @__PURE__ */ u("span", { children: [
+						S,
+						" ",
+						v("vibecontrols.sessions.control.watching", "watching")
+					] })]
+				}),
+				C && /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-1 px-2 py-0.5 bg-bg-surface/50 rounded text-xs text-text-secondary",
+					children: [/* @__PURE__ */ l(i, { className: "w-3 h-3" }), /* @__PURE__ */ l("span", { children: v("vibecontrols.sessions.control.viewOnly", "View only") })]
+				})
+			]
+		}), /* @__PURE__ */ u("div", {
+			className: "flex items-center gap-2",
+			children: [x && m && /* @__PURE__ */ u("button", {
+				onClick: m,
+				disabled: g,
+				className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-default rounded hover:bg-bg-elevated transition-colors disabled:opacity-50",
+				children: [/* @__PURE__ */ l(r, { className: "w-3.5 h-3.5" }), g ? v("vibecontrols.sessions.control.releasing", "Releasing...") : v("vibecontrols.sessions.control.releaseControl", "Release Control")]
+			}), w && p && /* @__PURE__ */ u("button", {
+				onClick: p,
+				disabled: h,
+				className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+				children: [/* @__PURE__ */ l(o, { className: "w-3.5 h-3.5" }), h ? v("vibecontrols.sessions.control.requesting", "Requesting...") : v("vibecontrols.sessions.control.takeControl", "Take Control")]
+			})]
+		})]
+	});
+}, f = ({ hasControl: t, controllerName: n, viewerCount: r, isViewer: o }) => {
+	let d = e();
+	return /* @__PURE__ */ u("div", {
+		className: "absolute top-2 right-2 flex items-center gap-2 z-10",
+		children: [/* @__PURE__ */ l("div", {
+			className: `flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium backdrop-blur-sm ${t ? "bg-status-success-bg/80 text-status-success-text" : o ? "bg-bg-sunken/80 text-text-secondary" : "bg-action-primary-bg/80 text-action-primary-text"}`,
+			children: t ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, { className: "w-3 h-3" }), /* @__PURE__ */ l("span", { children: d("vibecontrols.sessions.control.you", "You") })] }) : n ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(i, { className: "w-3 h-3" }), /* @__PURE__ */ l("span", { children: n })] }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s, { className: "w-3 h-3" }), /* @__PURE__ */ l("span", { children: d("vibecontrols.sessions.control.noControl", "No control") })] })
+		}), r > 0 && /* @__PURE__ */ u("div", {
+			className: "flex items-center gap-1 px-2 py-1 rounded-full bg-bg-sunken/80 text-xs text-text-secondary backdrop-blur-sm",
+			children: [/* @__PURE__ */ l(s, { className: "w-3 h-3" }), /* @__PURE__ */ l("span", { children: r })]
+		})]
+	});
+};
+//#endregion
+export { d as ControlStatusBar, f as MiniControlIndicator };
+
+//# sourceMappingURL=ControlStatusBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlStatusBar.js","names":[],"sources":["../../../src/components/sessions/ControlStatusBar.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Eye, Gamepad2, Users, HandMetal, ArrowRightLeft } from 'lucide-react';\nimport type { SessionCollaboratorFieldsFragment } from '../../generated/wspace-operations';\nimport { CollaboratorRole, SessionSharePermission } from '../../generated/wspace-types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface ControlStatusBarProps {\n  collaborators: SessionCollaboratorFieldsFragment[];\n  currentUserId?: string;\n  permission?: SessionSharePermission;\n  onRequestControl?: () => void;\n  onReleaseControl?: () => void;\n  isRequestingControl?: boolean;\n  isReleasingControl?: boolean;\n  className?: string;\n}\n\n/**\n * ControlStatusBar - Compact status bar showing control state and viewer count\n * Designed to be displayed above or below the terminal\n */\nexport const ControlStatusBar: FC<ControlStatusBarProps> = ({\n  collaborators,\n  currentUserId,\n  permission,\n  onRequestControl,\n  onReleaseControl,\n  isRequestingControl = false,\n  isReleasingControl = false,\n  className = '',\n}) => {\n  const tr = useTr();\n  const controller = collaborators.find((c) => c.hasControl);\n  const currentUser = collaborators.find((c) => c.userId === currentUserId);\n  const hasControl = currentUser?.hasControl;\n  const viewerCount = collaborators.filter((c) => !c.hasControl).length;\n  const isViewer =\n    permission === SessionSharePermission.View || currentUser?.role === CollaboratorRole.Viewer;\n  const canRequestControl = !isViewer && !hasControl;\n\n  // Determine status display\n  const getStatusDisplay = () => {\n    if (hasControl) {\n      return {\n        icon: <Gamepad2 className=\"w-4 h-4 text-status-success-text\" />,\n        text: tr('vibecontrols.sessions.control.youHaveControl', 'You have control'),\n        bgColor: 'bg-status-success-bg/10 border-status-success-bg/30',\n        textColor: 'text-status-success-text',\n      };\n    }\n\n    if (controller) {\n      return {\n        icon: <Eye className=\"w-4 h-4 text-action-primary-bg\" />,\n        text: tr('vibecontrols.sessions.control.userHasControl', '{{username}} has control', {\n          username: controller.username || 'Someone',\n        }),\n        bgColor: 'bg-action-primary-bg/10 border-action-primary-bg/30',\n        textColor: 'text-action-primary-bg',\n      };\n    }\n\n    return {\n      icon: <Users className=\"w-4 h-4 text-text-secondary\" />,\n      text: tr('vibecontrols.sessions.control.noOneHasControl', 'No one has control'),\n      bgColor: 'bg-bg-sunken border-border-default',\n      textColor: 'text-text-secondary',\n    };\n  };\n\n  const status = getStatusDisplay();\n\n  return (\n    <div\n      className={`flex items-center justify-between px-4 py-2 border rounded-t-lg ${status.bgColor} ${className}`}\n    >\n      {/* Status */}\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex items-center gap-2\">\n          {status.icon}\n          <span className={`text-sm font-medium ${status.textColor}`}>{status.text}</span>\n        </div>\n\n        {/* Viewer count */}\n        <div className=\"flex items-center gap-1 px-2 py-0.5 bg-bg-surface/50 rounded text-xs text-text-secondary\">\n          <Users className=\"w-3 h-3\" />\n          <span>\n            {viewerCount} {tr('vibecontrols.sessions.control.watching', 'watching')}\n          </span>\n        </div>\n\n        {/* Permission indicator */}\n        {isViewer && (\n          <div className=\"flex items-center gap-1 px-2 py-0.5 bg-bg-surface/50 rounded text-xs text-text-secondary\">\n            <Eye className=\"w-3 h-3\" />\n            <span>{tr('vibecontrols.sessions.control.viewOnly', 'View only')}</span>\n          </div>\n        )}\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        {hasControl && onReleaseControl && (\n          <button\n            onClick={onReleaseControl}\n            disabled={isReleasingControl}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-default rounded hover:bg-bg-elevated transition-colors disabled:opacity-50\"\n          >\n            <ArrowRightLeft className=\"w-3.5 h-3.5\" />\n            {isReleasingControl\n              ? tr('vibecontrols.sessions.control.releasing', 'Releasing...')\n              : tr('vibecontrols.sessions.control.releaseControl', 'Release Control')}\n          </button>\n        )}\n\n        {canRequestControl && onRequestControl && (\n          <button\n            onClick={onRequestControl}\n            disabled={isRequestingControl}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-action-primary-text bg-action-primary-bg rounded hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n          >\n            <HandMetal className=\"w-3.5 h-3.5\" />\n            {isRequestingControl\n              ? tr('vibecontrols.sessions.control.requesting', 'Requesting...')\n              : tr('vibecontrols.sessions.control.takeControl', 'Take Control')}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * MiniControlIndicator - Minimal floating indicator for control status\n * Can be overlaid on top of the terminal\n */\nexport const MiniControlIndicator: FC<{\n  hasControl: boolean;\n  controllerName?: string;\n  viewerCount: number;\n  isViewer?: boolean;\n}> = ({ hasControl, controllerName, viewerCount, isViewer }) => {\n  const tr = useTr();\n  return (\n    <div className=\"absolute top-2 right-2 flex items-center gap-2 z-10\">\n      {/* Control status pill */}\n      <div\n        className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium backdrop-blur-sm ${\n          hasControl\n            ? 'bg-status-success-bg/80 text-status-success-text'\n            : isViewer\n              ? 'bg-bg-sunken/80 text-text-secondary'\n              : 'bg-action-primary-bg/80 text-action-primary-text'\n        }`}\n      >\n        {hasControl ? (\n          <>\n            <Gamepad2 className=\"w-3 h-3\" />\n            <span>{tr('vibecontrols.sessions.control.you', 'You')}</span>\n          </>\n        ) : controllerName ? (\n          <>\n            <Eye className=\"w-3 h-3\" />\n            <span>{controllerName}</span>\n          </>\n        ) : (\n          <>\n            <Users className=\"w-3 h-3\" />\n            <span>{tr('vibecontrols.sessions.control.noControl', 'No control')}</span>\n          </>\n        )}\n      </div>\n\n      {/* Viewer count */}\n      {viewerCount > 0 && (\n        <div className=\"flex items-center gap-1 px-2 py-1 rounded-full bg-bg-sunken/80 text-xs text-text-secondary backdrop-blur-sm\">\n          <Users className=\"w-3 h-3\" />\n          <span>{viewerCount}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/sessions/SessionCard.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Session } from './types';
+
+export interface SessionCardProps {
+    session: Session;
+    onOpen?: (session: Session) => void;
+    onStart?: (session: Session) => void;
+    onStop?: (session: Session) => void;
+    onRestart?: (session: Session) => void;
+    onTerminate?: (session: Session) => void;
+    onOpenTerminal?: (session: Session) => void;
+    /** Callback to open the share dialog */
+    onShare?: (session: Session) => void;
+    /** Whether this card is selected for bulk operations */
+    selected?: boolean;
+    /** Toggle selection for bulk operations */
+    onToggleSelect?: () => void;
+    className?: string;
+}
+/**
+ * SessionCard - Display terminal session information
+ */
+export declare const SessionCard: FC<SessionCardProps>;
+//# sourceMappingURL=SessionCard.d.ts.map

package/dist/components/sessions/SessionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCard.d.ts","sourceRoot":"","sources":["../../../src/components/sessions/SessionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmO5C,CAAC"}

package/dist/components/sessions/SessionCard.js

@@ -0,0 +1,196 @@
+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";
+//#region src/components/sessions/SessionCard.tsx
+var h = {
+	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) => {
+		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, {
+		whileHover: {
+			y: -2,
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			}
+		},
+		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),
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-start gap-2 sm:gap-3 min-w-0 flex-1",
+					children: [
+						T && /* @__PURE__ */ p("div", {
+							className: "flex-shrink-0 pt-0.5",
+							children: /* @__PURE__ */ p("input", {
+								type: "checkbox",
+								checked: w,
+								onChange: (e) => {
+									e.stopPropagation(), T();
+								},
+								onClick: (e) => e.stopPropagation(),
+								className: "w-4 h-4 rounded border-border-default cursor-pointer"
+							})
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+							children: /* @__PURE__ */ p(l, { className: "w-4 h-4 sm:w-5 sm:h-5 text-text-secondary" })
+						}),
+						/* @__PURE__ */ m("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
+							})]
+						})
+					]
+				}), /* @__PURE__ */ m("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", {
+						className: "relative",
+						children: [/* @__PURE__ */ p("button", {
+							onClick: (e) => {
+								e.stopPropagation(), k(!O);
+							},
+							className: "p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors",
+							children: /* @__PURE__ */ p(i, { className: "w-4 h-4 text-text-secondary" })
+						}), /* @__PURE__ */ p(d, { children: O && /* @__PURE__ */ m(f.div, {
+							initial: {
+								opacity: 0,
+								scale: .95,
+								y: -4
+							},
+							animate: {
+								opacity: 1,
+								scale: 1,
+								y: 0
+							},
+							exit: {
+								opacity: 0,
+								scale: .95,
+								y: -4
+							},
+							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, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), v(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.start", "Start")]
+								}),
+								j && y && /* @__PURE__ */ m(f.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), y(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.stop", "Stop")]
+								}),
+								j && b && /* @__PURE__ */ m(f.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), b(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.restart", "Restart")]
+								}),
+								j && S && /* @__PURE__ */ m(f.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), S(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.openTerminal", "Open Terminal")]
+								}),
+								j && C && /* @__PURE__ */ m(f.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), C(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.shareSession", "Share Session")]
+								}),
+								x && /* @__PURE__ */ m(f.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), x(g), k(!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: "w-4 h-4" }), D("vibecontrols.sessions.card.terminate", "Terminate")]
+								})
+							]
+						}) })]
+					})]
+				})]
+			}),
+			(() => {
+				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", {
+					className: "mt-2 text-[10px] font-mono text-text-tertiary",
+					title: `Provider session: ${t}`,
+					"data-testid": "session-card-external-name",
+					children: [/* @__PURE__ */ m("span", {
+						className: "opacity-70",
+						children: [g.type.toLowerCase(), ": "]
+					}), /* @__PURE__ */ p("span", {
+						className: "break-all",
+						children: t
+					})]
+				}) : null;
+			})(),
+			g.command && /* @__PURE__ */ m("div", {
+				className: "mt-3 text-xs font-mono bg-bg-sunken p-2 rounded truncate text-text-secondary",
+				children: ["$ ", g.command]
+			}),
+			g.lastOutput && /* @__PURE__ */ p("div", {
+				className: "mt-2 text-xs font-mono bg-bg-sunken text-status-success-text p-2 rounded truncate",
+				children: g.lastOutput
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "mt-3 flex items-center justify-between text-sm text-text-secondary",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ p(r, { className: "w-4 h-4" }), /* @__PURE__ */ p("span", { children: A(g.updatedAt) })]
+				}), g.pid && /* @__PURE__ */ m("span", {
+					className: "text-xs font-mono",
+					children: ["PID: ", g.pid]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { g as SessionCard };
+
+//# sourceMappingURL=SessionCard.js.map

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

@@ -0,0 +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                type=\"checkbox\"\n                checked={selected}\n                onChange={(e) => {\n                  e.stopPropagation();\n                  onToggleSelect();\n                }}\n                onClick={(e) => e.stopPropagation()}\n                className=\"w-4 h-4 rounded border-border-default cursor-pointer\"\n              />\n            </div>\n          )}\n          <div className=\"flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Terminal className=\"w-4 h-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                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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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=\"w-4 h-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/SessionForm.d.ts

@@ -0,0 +1,20 @@
+import { CreateSessionInput, Session } from './types';
+
+interface SessionFormProps {
+    session?: Session;
+    vibeOptions?: {
+        id: string;
+        name: string;
+    }[];
+    agentOptions?: {
+        id: string;
+        name: string;
+        platform?: string | null;
+    }[];
+    onSubmit: (data: CreateSessionInput) => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+}
+export declare function SessionForm({ session, vibeOptions, agentOptions, onSubmit, onCancel, isLoading, }: SessionFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SessionForm.d.ts.map

package/dist/components/sessions/SessionForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionForm.d.ts","sourceRoot":"","sources":["../../../src/components/sessions/SessionForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AAGxE,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,EAAE,CAAC;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,WAAgB,EAChB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CA6RlB"}

package/dist/components/sessions/SessionForm.js

@@ -0,0 +1,4 @@
+import "../../shared/hooks/useTr.js";
+import "react";
+import "lucide-react";
+import "react/jsx-runtime";