@burdenoff/microfe-vibecontrols 2026.527.11 → 2026.527.13

package/dist/components/vibe/VibeAgentEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { useApolloClient } from '@apollo/client/react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  GetVibeDocument,\n  ListVibesDocument,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const apolloClient = useApolloClient();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached, apolloClient]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { useApolloClient } from '@apollo/client/react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  GetVibeDocument,\n  ListVibesDocument,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const apolloClient = useApolloClient();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached, apolloClient]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"size-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"size-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div tabIndex={0} onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); setOpen(false); } }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"size-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"size-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"size-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/vibe/VibeAgentSwitcher.js

@@ -70,13 +70,13 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 			className: "p-4 border-b border-border-default flex items-center justify-between",
 			children: [/* @__PURE__ */ y("h3", {
 				className: "font-semibold text-text-primary flex items-center gap-2",
-				children: [/* @__PURE__ */ v(h, { className: "w-5 h-5" }), C("vibeAgentSwitcher.title", "Active agent for this vibe")]
+				children: [/* @__PURE__ */ v(h, { className: "size-5" }), C("vibeAgentSwitcher.title", "Active agent for this vibe")]
 			}), /* @__PURE__ */ y("button", {
 				type: "button",
 				onClick: () => j(!0),
 				className: "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken",
 				disabled: I,
-				children: [/* @__PURE__ */ v(p, { className: "w-3.5 h-3.5" }), C("vibeAgentSwitcher.attachAnother", "Attach another")]
+				children: [/* @__PURE__ */ v(p, { className: "size-3.5" }), C("vibeAgentSwitcher.attachAnother", "Attach another")]
 			})]
 		}),
 		/* @__PURE__ */ y("div", {
@@ -89,7 +89,7 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 				"aria-expanded": E,
 				children: [/* @__PURE__ */ y("span", {
 					className: "flex items-center gap-3 min-w-0",
-					children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
+					children: [/* @__PURE__ */ v(h, { className: "size-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
 						className: "min-w-0 text-left",
 						children: [/* @__PURE__ */ v("span", {
 							className: "block text-sm font-medium text-text-primary truncate",
@@ -99,18 +99,18 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 							children: [R?.hostname ?? "—", R && (R.isActive ? " · active" : " · offline")]
 						})]
 					})]
-				}), /* @__PURE__ */ v(f, { className: `w-4 h-4 text-text-secondary transition-transform ${E ? "rotate-180" : ""}` })]
+				}), /* @__PURE__ */ v(f, { className: `size-4 text-text-secondary transition-transform ${E ? "rotate-180" : ""}` })]
 			}), E && /* @__PURE__ */ y("div", {
 				className: "absolute left-4 right-4 z-30 mt-1 rounded-md border border-border-default bg-bg-elevated shadow-lg",
 				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2 px-3 py-2 border-b border-border-subtle",
-					children: [/* @__PURE__ */ v(m, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ v("input", {
+					children: [/* @__PURE__ */ v(m, { className: "size-4 text-text-secondary" }), /* @__PURE__ */ v("input", {
+						"aria-label": "control",
 						type: "text",
 						value: O,
 						onChange: (e) => k(e.target.value),
 						placeholder: C("vibeAgentSwitcher.searchPlaceholder", "Search agents…"),
-						className: "w-full bg-transparent text-sm text-text-primary outline-none",
-						autoFocus: !0
+						className: "w-full bg-transparent text-sm text-text-primary outline-none"
 					})]
 				}), /* @__PURE__ */ v("ul", {
 					role: "listbox",
@@ -130,7 +130,7 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 								className: `flex-1 flex items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-bg-sunken ${t ? "bg-bg-sunken" : ""}`,
 								children: [/* @__PURE__ */ y("span", {
 									className: "flex items-center gap-2 min-w-0",
-									children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ v(h, { className: "size-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
 										className: "min-w-0",
 										children: [/* @__PURE__ */ v("span", {
 											className: "block text-text-primary truncate",
@@ -144,14 +144,14 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 											]
 										})]
 									})]
-								}), t && /* @__PURE__ */ v(d, { className: "w-4 h-4 text-action-primary-bg" })]
+								}), t && /* @__PURE__ */ v(d, { className: "size-4 text-action-primary-bg" })]
 							}), /* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => J(e.id),
 								disabled: I,
 								title: C("vibeAgentSwitcher.detach", "Detach from vibe"),
 								className: "px-2 text-text-secondary hover:text-status-error-text",
-								children: /* @__PURE__ */ v(g, { className: "w-4 h-4" })
+								children: /* @__PURE__ */ v(g, { className: "size-4" })
 							})]
 						}, e.id);
 					})
@@ -159,6 +159,10 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 			})]
 		}),
 		A && /* @__PURE__ */ v("div", {
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				e.key === "Escape" && (e.preventDefault(), j(!1));
+			},
 			role: "dialog",
 			"aria-modal": "true",
 			className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
@@ -178,25 +182,25 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 							onClick: () => j(!1),
 							className: "text-text-secondary hover:text-text-primary",
 							"aria-label": C("common.close", "Close"),
-							children: /* @__PURE__ */ v(g, { className: "w-4 h-4" })
+							children: /* @__PURE__ */ v(g, { className: "size-4" })
 						})]
 					}),
 					/* @__PURE__ */ v("div", {
 						className: "px-5 py-3 border-b border-border-subtle",
 						children: /* @__PURE__ */ y("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ v(m, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ v("input", {
+							children: [/* @__PURE__ */ v(m, { className: "size-4 text-text-secondary" }), /* @__PURE__ */ v("input", {
+								"aria-label": "control",
 								type: "text",
 								value: M,
 								onChange: (e) => N(e.target.value),
 								placeholder: C("vibeAgentSwitcher.searchPlaceholder", "Search agents…"),
-								className: "w-full bg-transparent text-sm text-text-primary outline-none",
-								autoFocus: !0
+								className: "w-full bg-transparent text-sm text-text-primary outline-none"
 							})]
 						})
 					}),
 					/* @__PURE__ */ y("div", {
-						className: "px-2 py-2 max-h-[60vh] overflow-y-auto",
+						className: "p-2 max-h-[60vh] overflow-y-auto",
 						children: [U.length === 0 ? /* @__PURE__ */ v("p", {
 							className: "text-sm text-text-secondary px-3 py-2",
 							children: C("vibeAgentSwitcher.noCandidates", "No unattached agents available. Register a new agent first.")
@@ -209,7 +213,7 @@ function b({ vibeId: b, attachedAgents: x, effectiveAgentId: S }) {
 								className: "w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover text-left disabled:opacity-60",
 								children: [/* @__PURE__ */ y("span", {
 									className: "flex items-center gap-3 min-w-0",
-									children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ v(h, { className: "size-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ y("span", {
 										className: "min-w-0",
 										children: [/* @__PURE__ */ v("span", {
 											className: "block text-sm font-medium text-text-primary truncate",

package/dist/components/vibe/VibeAgentSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeAgentSwitcher.js","names":[],"sources":["../../../src/components/vibe/VibeAgentSwitcher.tsx"],"sourcesContent":["/**\n * VibeAgentSwitcher — inline switcher + attach-more affordance shown on the\n * Vibe detail Overview tab once at least one agent is attached.\n *\n * Why this exists: a vibe can carry many agents (every collaborator brings\n * their own host/dev VM alongside shared env agents). Without a top-level\n * switcher, the \"effective agent\" chosen by the auto-pick heuristic is\n * invisible and unswitchable from the detail page, and there's no way to\n * attach a *second* agent without leaving for the agents tab. This card:\n *\n *   1. Names the active agent for the current user on this vibe.\n *   2. Lists every attached agent in a searchable dropdown — choosing one\n *      writes to the per-vibe default store slot, persisted across reloads.\n *   3. Surfaces \"Attach another agent\" so users discover the multi-attach\n *      flow without bouncing tabs.\n *   4. Surfaces \"Detach\" per agent (owner-scoped, no peer detaches).\n */\nimport { useMemo, useState, useCallback } from 'react';\nimport { Check, ChevronDown, Plus, Search, Server, X } from 'lucide-react';\nimport { useApolloClient } from '@apollo/client/react';\nimport { Card } from '@/components/shared';\nimport {\n  useAttachAgentToVibeMutation,\n  useDetachAgentFromVibeMutation,\n  useListAgentsQuery,\n  GetVibeDocument,\n  ListVibesDocument,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\ntype ListAgent = NonNullable<ListAgentsQuery['vibecontrolsAgents']>[number];\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\nimport { useTr } from '@/shared/hooks/useTr';\n\nexport interface AttachedAgent {\n  id: string;\n  name: string;\n  hostname?: string | null;\n  isActive: boolean;\n  ownerUserId?: string | null;\n  tunnelUrl?: string | null;\n}\n\ninterface Props {\n  vibeId: string;\n  attachedAgents: ReadonlyArray<AttachedAgent>;\n  effectiveAgentId: string | null;\n}\n\nexport function VibeAgentSwitcher({ vibeId, attachedAgents, effectiveAgentId }: Props) {\n  const tr = useTr();\n  const apolloClient = useApolloClient();\n  const setDefault = useVibeControlsStore((s) => s.setDefaultAgentForVibe);\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [attachOpen, setAttachOpen] = useState(false);\n  const [attachQuery, setAttachQuery] = useState('');\n  const [attachError, setAttachError] = useState<string | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  const active = attachedAgents.find((a) => a.id === effectiveAgentId) ?? attachedAgents[0] ?? null;\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return attachedAgents;\n    return attachedAgents.filter(\n      (a) =>\n        a.name.toLowerCase().includes(q) ||\n        (a.hostname ?? '').toLowerCase().includes(q) ||\n        a.id.toLowerCase().includes(q)\n    );\n  }, [attachedAgents, query]);\n\n  const { data: agentsData, refetch: refetchAgents } = useListAgentsQuery({\n    skip: !attachOpen,\n    fetchPolicy: 'cache-and-network',\n  });\n  const attachedIds = useMemo(() => new Set(attachedAgents.map((a) => a.id)), [attachedAgents]);\n  const candidates = useMemo(() => {\n    const all = agentsData?.vibecontrolsAgents ?? [];\n    const q = attachQuery.trim().toLowerCase();\n    return all\n      .filter((a: ListAgent) => !attachedIds.has(a.id))\n      .filter((a: ListAgent) =>\n        q ? a.name.toLowerCase().includes(q) || (a.hostname ?? '').toLowerCase().includes(q) : true\n      );\n  }, [agentsData, attachedIds, attachQuery]);\n\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n  const [detach] = useDetachAgentFromVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n\n  const handlePick = useCallback(\n    (agentId: string) => {\n      setDefault(vibeId, agentId);\n      setOpen(false);\n    },\n    [setDefault, vibeId]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setBusy(true);\n      setAttachError(null);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        await refetchAgents();\n        setAttachOpen(false);\n      } catch (err) {\n        setAttachError(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusy(false);\n      }\n    },\n    [attach, refetchAgents, vibeId, apolloClient]\n  );\n\n  const handleDetach = useCallback(\n    async (agentId: string) => {\n      if (!confirm(tr('vibeAgentSwitcher.detachConfirm', 'Detach this agent from the vibe?'))) {\n        return;\n      }\n      setBusy(true);\n      try {\n        await detach({ variables: { input: { vibeId, agentId } } });\n        // Evict the vibe from cache so the parent GetVibe query re-renders immediately\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        setOpen(false);\n      } finally {\n        setBusy(false);\n      }\n    },\n    [detach, tr, vibeId, apolloClient]\n  );\n\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border-default flex items-center justify-between\">\n        <h3 className=\"font-semibold text-text-primary flex items-center gap-2\">\n          <Server className=\"w-5 h-5\" />\n          {tr('vibeAgentSwitcher.title', 'Active agent for this vibe')}\n        </h3>\n        <button\n          type=\"button\"\n          onClick={() => setAttachOpen(true)}\n          className=\"inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken\"\n          disabled={busy}\n        >\n          <Plus className=\"w-3.5 h-3.5\" />\n          {tr('vibeAgentSwitcher.attachAnother', 'Attach another')}\n        </button>\n      </div>\n\n      <div className=\"p-4 space-y-2 relative\">\n        <button\n          type=\"button\"\n          onClick={() => setOpen((v) => !v)}\n          className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-default bg-bg-sunken hover:border-action-primary-bg\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n        >\n          <span className=\"flex items-center gap-3 min-w-0\">\n            <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n            <span className=\"min-w-0 text-left\">\n              <span className=\"block text-sm font-medium text-text-primary truncate\">\n                {active?.name ?? tr('vibeAgentSwitcher.none', 'No active agent')}\n              </span>\n              <span className=\"block text-xs text-text-secondary truncate\">\n                {active?.hostname ?? '—'}\n                {active && (active.isActive ? ' · active' : ' · offline')}\n              </span>\n            </span>\n          </span>\n          <ChevronDown\n            className={`w-4 h-4 text-text-secondary transition-transform ${open ? 'rotate-180' : ''}`}\n          />\n        </button>\n\n        {open && (\n          <div className=\"absolute left-4 right-4 z-30 mt-1 rounded-md border border-border-default bg-bg-elevated shadow-lg\">\n            <div className=\"flex items-center gap-2 px-3 py-2 border-b border-border-subtle\">\n              <Search className=\"w-4 h-4 text-text-secondary\" />\n              <input\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={tr('vibeAgentSwitcher.searchPlaceholder', 'Search agents…')}\n                className=\"w-full bg-transparent text-sm text-text-primary outline-none\"\n                autoFocus\n              />\n            </div>\n            <ul role=\"listbox\" className=\"max-h-64 overflow-y-auto py-1\">\n              {filtered.length === 0 ? (\n                <li className=\"px-3 py-2 text-xs text-text-secondary\">\n                  {tr('vibeAgentSwitcher.noMatch', 'No agents match your search.')}\n                </li>\n              ) : (\n                filtered.map((a) => {\n                  const isActive = a.id === effectiveAgentId;\n                  return (\n                    <li key={a.id} className=\"flex items-center\">\n                      <button\n                        type=\"button\"\n                        role=\"option\"\n                        aria-selected={isActive}\n                        onClick={() => handlePick(a.id)}\n                        className={`flex-1 flex items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-bg-sunken ${isActive ? 'bg-bg-sunken' : ''}`}\n                      >\n                        <span className=\"flex items-center gap-2 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-text-primary truncate\">{a.name}</span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname ?? '—'} {a.isActive ? '· active' : '· offline'}\n                            </span>\n                          </span>\n                        </span>\n                        {isActive && <Check className=\"w-4 h-4 text-action-primary-bg\" />}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleDetach(a.id)}\n                        disabled={busy}\n                        title={tr('vibeAgentSwitcher.detach', 'Detach from vibe')}\n                        className=\"px-2 text-text-secondary hover:text-status-error-text\"\n                      >\n                        <X className=\"w-4 h-4\" />\n                      </button>\n                    </li>\n                  );\n                })\n              )}\n            </ul>\n          </div>\n        )}\n      </div>\n\n      {attachOpen && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setAttachOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">\n                {tr('vibeAgentSwitcher.attachTitle', 'Attach an additional agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setAttachOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                <X className=\"w-4 h-4\" />\n              </button>\n            </div>\n            <div className=\"px-5 py-3 border-b border-border-subtle\">\n              <div className=\"flex items-center gap-2\">\n                <Search className=\"w-4 h-4 text-text-secondary\" />\n                <input\n                  type=\"text\"\n                  value={attachQuery}\n                  onChange={(e) => setAttachQuery(e.target.value)}\n                  placeholder={tr('vibeAgentSwitcher.searchPlaceholder', 'Search agents…')}\n                  className=\"w-full bg-transparent text-sm text-text-primary outline-none\"\n                  autoFocus\n                />\n              </div>\n            </div>\n            <div className=\"px-2 py-2 max-h-[60vh] overflow-y-auto\">\n              {candidates.length === 0 ? (\n                <p className=\"text-sm text-text-secondary px-3 py-2\">\n                  {tr(\n                    'vibeAgentSwitcher.noCandidates',\n                    'No unattached agents available. Register a new agent first.'\n                  )}\n                </p>\n              ) : (\n                <ul className=\"space-y-1\">\n                  {candidates.map((a: ListAgent) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busy}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}\n                              {a.isActive ? ' · active' : ' · inactive'}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {tr('vibeAgentSwitcher.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n              {attachError && (\n                <p className=\"mt-2 px-3 text-sm text-status-error-text\">{attachError}</p>\n              )}\n            </div>\n          </div>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;AAiDA,SAAgB,EAAkB,EAAE,WAAQ,mBAAgB,uBAA2B;CACrF,IAAM,IAAK,GAAO,EACZ,IAAe,GAAiB,EAChC,IAAa,GAAsB,MAAM,EAAE,uBAAuB,EAElE,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,GAAM,KAAW,EAAS,GAAM,EAEjC,IAAS,EAAe,MAAM,MAAM,EAAE,OAAO,EAAiB,IAAI,EAAe,MAAM,MAEvF,IAAW,QAAc;EAC7B,IAAM,IAAI,EAAM,MAAM,CAAC,aAAa;AAEpC,SADK,IACE,EAAe,QACnB,MACC,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,KAC/B,EAAE,YAAY,IAAI,aAAa,CAAC,SAAS,EAAE,IAC5C,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,CACjC,GANc;IAOd,CAAC,GAAgB,EAAM,CAAC,EAErB,EAAE,MAAM,GAAY,SAAS,MAAkB,EAAmB;EACtE,MAAM,CAAC;EACP,aAAa;EACd,CAAC,EACI,IAAc,QAAc,IAAI,IAAI,EAAe,KAAK,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,EAAe,CAAC,EACvF,IAAa,QAAc;EAC/B,IAAM,IAAM,GAAY,sBAAsB,EAAE,EAC1C,IAAI,EAAY,MAAM,CAAC,aAAa;AAC1C,SAAO,EACJ,QAAQ,MAAiB,CAAC,EAAY,IAAI,EAAE,GAAG,CAAC,CAChD,QAAQ,MACP,IAAI,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,KAAK,EAAE,YAAY,IAAI,aAAa,CAAC,SAAS,EAAE,GAAG,GACxF;IACF;EAAC;EAAY;EAAa;EAAY,CAAC,EAEpC,CAAC,KAAU,EAA6B;EAC5C,gBAAgB,CAAC,GAAiB,EAAkB;EACpD,qBAAqB;EACtB,CAAC,EACI,CAAC,KAAU,EAA+B;EAC9C,gBAAgB,CAAC,GAAiB,EAAkB;EACpD,qBAAqB;EACtB,CAAC,EAEI,IAAa,GAChB,MAAoB;AAEnB,EADA,EAAW,GAAQ,EAAQ,EAC3B,EAAQ,GAAM;IAEhB,CAAC,GAAY,EAAO,CACrB,EAEK,IAAe,EACnB,OAAO,MAAoB;AAEzB,EADA,EAAQ,GAAK,EACb,EAAe,KAAK;AACpB,MAAI;AAKF,GAJA,MAAM,EAAO,EAAE,WAAW,EAAE,OAAO;IAAE;IAAQ;IAAS,EAAE,EAAE,CAAC,EAC3D,EAAa,MAAM,MAAM,EAAE,IAAI,QAAQ,KAAU,CAAC,EAClD,EAAa,MAAM,IAAI,EACvB,MAAM,GAAe,EACrB,EAAc,GAAM;WACb,GAAK;AACZ,KAAe,aAAe,QAAQ,EAAI,UAAU,OAAO,EAAI,CAAC;YACxD;AACR,KAAQ,GAAM;;IAGlB;EAAC;EAAQ;EAAe;EAAQ;EAAa,CAC9C,EAEK,IAAe,EACnB,OAAO,MAAoB;AACpB,cAAQ,EAAG,mCAAmC,mCAAmC,CAAC,EAGvF;KAAQ,GAAK;AACb,OAAI;AAKF,IAJA,MAAM,EAAO,EAAE,WAAW,EAAE,OAAO;KAAE;KAAQ;KAAS,EAAE,EAAE,CAAC,EAE3D,EAAa,MAAM,MAAM,EAAE,IAAI,QAAQ,KAAU,CAAC,EAClD,EAAa,MAAM,IAAI,EACvB,EAAQ,GAAM;aACN;AACR,MAAQ,GAAM;;;IAGlB;EAAC;EAAQ;EAAI;EAAQ;EAAa,CACnC;AAED,QACE,kBAAC,GAAD,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAAd,CACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAC7B,EAAG,2BAA2B,6BAA6B,CACzD;OACL,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAc,GAAK;IAClC,WAAU;IACV,UAAU;cAJZ,CAME,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA,EAC/B,EAAG,mCAAmC,iBAAiB,CACjD;MACL;;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,GAAS,MAAM,CAAC,EAAE;IACjC,WAAU;IACV,iBAAc;IACd,iBAAe;cALjB,CAOE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAQ,WAAU,6CAA8C,CAAA,EAChE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,QAAD;OAAM,WAAU;iBACb,GAAQ,QAAQ,EAAG,0BAA0B,kBAAkB;OAC3D,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,GAAQ,YAAY,KACpB,MAAW,EAAO,WAAW,cAAc,cACvC;SACF;QACF;QACP,kBAAC,GAAD,EACE,WAAW,oDAAoD,IAAO,eAAe,MACrF,CAAA,CACK;OAER,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,+BAAgC,CAAA,EAClD,kBAAC,SAAD;MACE,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;MACzC,aAAa,EAAG,uCAAuC,iBAAiB;MACxE,WAAU;MACV,WAAA;MACA,CAAA,CACE;QACN,kBAAC,MAAD;KAAI,MAAK;KAAU,WAAU;eAC1B,EAAS,WAAW,IACnB,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,6BAA6B,+BAA+B;MAC7D,CAAA,GAEL,EAAS,KAAK,MAAM;MAClB,IAAM,IAAW,EAAE,OAAO;AAC1B,aACE,kBAAC,MAAD;OAAe,WAAU;iBAAzB,CACE,kBAAC,UAAD;QACE,MAAK;QACL,MAAK;QACL,iBAAe;QACf,eAAe,EAAW,EAAE,GAAG;QAC/B,WAAW,iGAAiG,IAAW,iBAAiB;kBAL1I,CAOE,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,GAAD,EAAQ,WAAU,6CAA8C,CAAA,EAChE,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAoC,EAAE;WAAY,CAAA,EAClE,kBAAC,QAAD;WAAM,WAAU;qBAAhB;YACG,EAAE,YAAY;YAAI;YAAE,EAAE,WAAW,aAAa;YAC1C;aACF;YACF;YACN,KAAY,kBAAC,GAAD,EAAO,WAAU,kCAAmC,CAAA,CAC1D;WACT,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAa,EAAE,GAAG;QACjC,UAAU;QACV,OAAO,EAAG,4BAA4B,mBAAmB;QACzD,WAAU;kBAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;QAClB,CAAA,CACN;SA5BI,EAAE,GA4BN;OAEP;KAED,CAAA,CACD;MAEJ;;EAEL,KACC,kBAAC,OAAD;GACE,MAAK;GACL,cAAW;GACX,WAAU;GACV,UAAU,MAAM;AACd,IAAI,EAAE,WAAW,EAAE,iBAAe,EAAc,GAAM;;aAGxD,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,iCAAiC,6BAA6B;OAC/D,CAAA,EACL,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAc,GAAM;OACnC,WAAU;OACV,cAAY,EAAG,gBAAgB,QAAQ;iBAEvC,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;OAClB,CAAA,CACL;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,+BAAgC,CAAA,EAClD,kBAAC,SAAD;QACE,MAAK;QACL,OAAO;QACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;QAC/C,aAAa,EAAG,uCAAuC,iBAAiB;QACxE,WAAU;QACV,WAAA;QACA,CAAA,CACE;;MACF,CAAA;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,EAAW,WAAW,IACrB,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,kCACA,8DACD;OACC,CAAA,GAEJ,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAW,KAAK,MACf,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAa,EAAE,GAAG;QACjC,UAAU;QACV,WAAU;kBAJZ,CAME,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,GAAD,EAAQ,WAAU,6CAA8C,CAAA,EAChE,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CACE,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAE;WACE,CAAA,EACP,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CACG,EAAE,YAAY,KACd,EAAE,WAAW,cAAc,cACvB;aACF;YACF;YACP,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,4BAA4B,SAAS;SACpC,CAAA,CACA;WACN,EAvBI,EAAE,GAuBN,CACL;OACC,CAAA,EAEN,KACC,kBAAC,KAAD;OAAG,WAAU;iBAA4C;OAAgB,CAAA,CAEvE;;KACF;;GACF,CAAA;EAEH,EAAA,CAAA"}
+{"version":3,"file":"VibeAgentSwitcher.js","names":[],"sources":["../../../src/components/vibe/VibeAgentSwitcher.tsx"],"sourcesContent":["/**\n * VibeAgentSwitcher — inline switcher + attach-more affordance shown on the\n * Vibe detail Overview tab once at least one agent is attached.\n *\n * Why this exists: a vibe can carry many agents (every collaborator brings\n * their own host/dev VM alongside shared env agents). Without a top-level\n * switcher, the \"effective agent\" chosen by the auto-pick heuristic is\n * invisible and unswitchable from the detail page, and there's no way to\n * attach a *second* agent without leaving for the agents tab. This card:\n *\n *   1. Names the active agent for the current user on this vibe.\n *   2. Lists every attached agent in a searchable dropdown — choosing one\n *      writes to the per-vibe default store slot, persisted across reloads.\n *   3. Surfaces \"Attach another agent\" so users discover the multi-attach\n *      flow without bouncing tabs.\n *   4. Surfaces \"Detach\" per agent (owner-scoped, no peer detaches).\n */\nimport { useMemo, useState, useCallback } from 'react';\nimport { Check, ChevronDown, Plus, Search, Server, X } from 'lucide-react';\nimport { useApolloClient } from '@apollo/client/react';\nimport { Card } from '@/components/shared';\nimport {\n  useAttachAgentToVibeMutation,\n  useDetachAgentFromVibeMutation,\n  useListAgentsQuery,\n  GetVibeDocument,\n  ListVibesDocument,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\ntype ListAgent = NonNullable<ListAgentsQuery['vibecontrolsAgents']>[number];\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\nimport { useTr } from '@/shared/hooks/useTr';\n\nexport interface AttachedAgent {\n  id: string;\n  name: string;\n  hostname?: string | null;\n  isActive: boolean;\n  ownerUserId?: string | null;\n  tunnelUrl?: string | null;\n}\n\ninterface Props {\n  vibeId: string;\n  attachedAgents: ReadonlyArray<AttachedAgent>;\n  effectiveAgentId: string | null;\n}\n\nexport function VibeAgentSwitcher({ vibeId, attachedAgents, effectiveAgentId }: Props) {\n  const tr = useTr();\n  const apolloClient = useApolloClient();\n  const setDefault = useVibeControlsStore((s) => s.setDefaultAgentForVibe);\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [attachOpen, setAttachOpen] = useState(false);\n  const [attachQuery, setAttachQuery] = useState('');\n  const [attachError, setAttachError] = useState<string | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  const active = attachedAgents.find((a) => a.id === effectiveAgentId) ?? attachedAgents[0] ?? null;\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return attachedAgents;\n    return attachedAgents.filter(\n      (a) =>\n        a.name.toLowerCase().includes(q) ||\n        (a.hostname ?? '').toLowerCase().includes(q) ||\n        a.id.toLowerCase().includes(q)\n    );\n  }, [attachedAgents, query]);\n\n  const { data: agentsData, refetch: refetchAgents } = useListAgentsQuery({\n    skip: !attachOpen,\n    fetchPolicy: 'cache-and-network',\n  });\n  const attachedIds = useMemo(() => new Set(attachedAgents.map((a) => a.id)), [attachedAgents]);\n  const candidates = useMemo(() => {\n    const all = agentsData?.vibecontrolsAgents ?? [];\n    const q = attachQuery.trim().toLowerCase();\n    return all\n      .filter((a: ListAgent) => !attachedIds.has(a.id))\n      .filter((a: ListAgent) =>\n        q ? a.name.toLowerCase().includes(q) || (a.hostname ?? '').toLowerCase().includes(q) : true\n      );\n  }, [agentsData, attachedIds, attachQuery]);\n\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n  const [detach] = useDetachAgentFromVibeMutation({\n    refetchQueries: [GetVibeDocument, ListVibesDocument],\n    awaitRefetchQueries: true,\n  });\n\n  const handlePick = useCallback(\n    (agentId: string) => {\n      setDefault(vibeId, agentId);\n      setOpen(false);\n    },\n    [setDefault, vibeId]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setBusy(true);\n      setAttachError(null);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        await refetchAgents();\n        setAttachOpen(false);\n      } catch (err) {\n        setAttachError(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusy(false);\n      }\n    },\n    [attach, refetchAgents, vibeId, apolloClient]\n  );\n\n  const handleDetach = useCallback(\n    async (agentId: string) => {\n      if (!confirm(tr('vibeAgentSwitcher.detachConfirm', 'Detach this agent from the vibe?'))) {\n        return;\n      }\n      setBusy(true);\n      try {\n        await detach({ variables: { input: { vibeId, agentId } } });\n        // Evict the vibe from cache so the parent GetVibe query re-renders immediately\n        apolloClient.cache.evict({ id: `Vibe:${vibeId}` });\n        apolloClient.cache.gc();\n        setOpen(false);\n      } finally {\n        setBusy(false);\n      }\n    },\n    [detach, tr, vibeId, apolloClient]\n  );\n\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border-default flex items-center justify-between\">\n        <h3 className=\"font-semibold text-text-primary flex items-center gap-2\">\n          <Server className=\"size-5\" />\n          {tr('vibeAgentSwitcher.title', 'Active agent for this vibe')}\n        </h3>\n        <button\n          type=\"button\"\n          onClick={() => setAttachOpen(true)}\n          className=\"inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken\"\n          disabled={busy}\n        >\n          <Plus className=\"size-3.5\" />\n          {tr('vibeAgentSwitcher.attachAnother', 'Attach another')}\n        </button>\n      </div>\n\n      <div className=\"p-4 space-y-2 relative\">\n        <button\n          type=\"button\"\n          onClick={() => setOpen((v) => !v)}\n          className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-default bg-bg-sunken hover:border-action-primary-bg\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n        >\n          <span className=\"flex items-center gap-3 min-w-0\">\n            <Server className=\"size-4 text-text-secondary flex-shrink-0\" />\n            <span className=\"min-w-0 text-left\">\n              <span className=\"block text-sm font-medium text-text-primary truncate\">\n                {active?.name ?? tr('vibeAgentSwitcher.none', 'No active agent')}\n              </span>\n              <span className=\"block text-xs text-text-secondary truncate\">\n                {active?.hostname ?? '—'}\n                {active && (active.isActive ? ' · active' : ' · offline')}\n              </span>\n            </span>\n          </span>\n          <ChevronDown\n            className={`size-4 text-text-secondary transition-transform ${open ? 'rotate-180' : ''}`}\n          />\n        </button>\n\n        {open && (\n          <div className=\"absolute left-4 right-4 z-30 mt-1 rounded-md border border-border-default bg-bg-elevated shadow-lg\">\n            <div className=\"flex items-center gap-2 px-3 py-2 border-b border-border-subtle\">\n              <Search className=\"size-4 text-text-secondary\" />\n              <input aria-label=\"control\"\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={tr('vibeAgentSwitcher.searchPlaceholder', 'Search agents…')}\n                className=\"w-full bg-transparent text-sm text-text-primary outline-none\"\n\n              />\n            </div>\n            <ul role=\"listbox\" className=\"max-h-64 overflow-y-auto py-1\">\n              {filtered.length === 0 ? (\n                <li className=\"px-3 py-2 text-xs text-text-secondary\">\n                  {tr('vibeAgentSwitcher.noMatch', 'No agents match your search.')}\n                </li>\n              ) : (\n                filtered.map((a) => {\n                  const isActive = a.id === effectiveAgentId;\n                  return (\n                    <li key={a.id} className=\"flex items-center\">\n                      <button\n                        type=\"button\"\n                        role=\"option\"\n                        aria-selected={isActive}\n                        onClick={() => handlePick(a.id)}\n                        className={`flex-1 flex items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-bg-sunken ${isActive ? 'bg-bg-sunken' : ''}`}\n                      >\n                        <span className=\"flex items-center gap-2 min-w-0\">\n                          <Server className=\"size-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-text-primary truncate\">{a.name}</span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname ?? '—'} {a.isActive ? '· active' : '· offline'}\n                            </span>\n                          </span>\n                        </span>\n                        {isActive && <Check className=\"size-4 text-action-primary-bg\" />}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleDetach(a.id)}\n                        disabled={busy}\n                        title={tr('vibeAgentSwitcher.detach', 'Detach from vibe')}\n                        className=\"px-2 text-text-secondary hover:text-status-error-text\"\n                      >\n                        <X className=\"size-4\" />\n                      </button>\n                    </li>\n                  );\n                })\n              )}\n            </ul>\n          </div>\n        )}\n      </div>\n\n      {attachOpen && (\n        <div tabIndex={0} onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); setAttachOpen(false); } }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setAttachOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">\n                {tr('vibeAgentSwitcher.attachTitle', 'Attach an additional agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setAttachOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n            <div className=\"px-5 py-3 border-b border-border-subtle\">\n              <div className=\"flex items-center gap-2\">\n                <Search className=\"size-4 text-text-secondary\" />\n                <input aria-label=\"control\"\n                  type=\"text\"\n                  value={attachQuery}\n                  onChange={(e) => setAttachQuery(e.target.value)}\n                  placeholder={tr('vibeAgentSwitcher.searchPlaceholder', 'Search agents…')}\n                  className=\"w-full bg-transparent text-sm text-text-primary outline-none\"\n\n                />\n              </div>\n            </div>\n            <div className=\"p-2 max-h-[60vh] overflow-y-auto\">\n              {candidates.length === 0 ? (\n                <p className=\"text-sm text-text-secondary px-3 py-2\">\n                  {tr(\n                    'vibeAgentSwitcher.noCandidates',\n                    'No unattached agents available. Register a new agent first.'\n                  )}\n                </p>\n              ) : (\n                <ul className=\"space-y-1\">\n                  {candidates.map((a: ListAgent) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busy}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"size-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}\n                              {a.isActive ? ' · active' : ' · inactive'}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {tr('vibeAgentSwitcher.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n              {attachError && (\n                <p className=\"mt-2 px-3 text-sm text-status-error-text\">{attachError}</p>\n              )}\n            </div>\n          </div>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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"}

package/dist/components/vibe/VibeLlmContextAdminPanel.js

@@ -58,7 +58,7 @@ function p({ vibeId: a }) {
 		children: [
 			/* @__PURE__ */ l("header", {
 				className: "flex items-start gap-3",
-				children: [/* @__PURE__ */ c(r, { className: "w-5 h-5 text-status-warning-text mt-0.5" }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h3", {
+				children: [/* @__PURE__ */ c(r, { className: "size-5 text-status-warning-text mt-0.5" }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h3", {
 					className: "text-base font-semibold text-text-primary",
 					children: "Admin · all URLs for this vibe"
 				}), /* @__PURE__ */ c("p", {
@@ -72,7 +72,7 @@ function p({ vibeId: a }) {
 			}),
 			y.length === 0 && !m && /* @__PURE__ */ l("div", {
 				className: "text-sm text-text-secondary py-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ c(n, { className: "w-4 h-4" }), "No URLs minted for this vibe by any user."]
+				children: [/* @__PURE__ */ c(n, { className: "size-4" }), "No URLs minted for this vibe by any user."]
 			}),
 			y.length > 0 && /* @__PURE__ */ c("div", {
 				className: "overflow-x-auto",
@@ -151,7 +151,7 @@ function p({ vibeId: a }) {
 								className: "py-2 pr-3 text-xs text-text-secondary",
 								children: /* @__PURE__ */ l("span", {
 									className: "inline-flex items-center gap-1",
-									children: [/* @__PURE__ */ c(t, { className: "w-3 h-3" }), f(e.expiresAt)]
+									children: [/* @__PURE__ */ c(t, { className: "size-3" }), f(e.expiresAt)]
 								})
 							}),
 							/* @__PURE__ */ c("td", {
@@ -163,6 +163,7 @@ function p({ vibeId: a }) {
 								children: e.status === "ACTIVE" ? /* @__PURE__ */ l("div", {
 									className: "flex items-center gap-1",
 									children: [/* @__PURE__ */ c("input", {
+										"aria-label": "reason",
 										type: "text",
 										value: _[e.id] ?? "",
 										onChange: (t) => v((n) => ({
@@ -177,7 +178,7 @@ function p({ vibeId: a }) {
 										title: "Admin revoke",
 										"aria-label": "Admin revoke URL",
 										className: "p-1.5 text-status-error-text hover:opacity-80",
-										children: /* @__PURE__ */ c(i, { className: "w-4 h-4" })
+										children: /* @__PURE__ */ c(i, { className: "size-4" })
 									})]
 								}) : /* @__PURE__ */ c("span", {
 									className: "text-xs text-text-secondary",

package/dist/components/vibe/VibeLlmContextAdminPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeLlmContextAdminPanel.js","names":[],"sources":["../../../src/components/vibe/VibeLlmContextAdminPanel.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { Clock, Info, Shield, Trash2 } from 'lucide-react';\n\ninterface AdminTokenRow {\n  id: string;\n  vibeId: string;\n  userId: string;\n  label: string | null;\n  tokenFingerprint: string;\n  includeCredentials: boolean;\n  includes: string[];\n  status: 'ACTIVE' | 'REVOKED';\n  expiresAt: string;\n  lastFetchedAt: string | null;\n  fetchCount: number;\n  createdAt: string;\n  revokedAt: string | null;\n  revokedReason: string | null;\n}\n\nconst ALL_TOKENS = gql`\n  query AllVibeLlmContextTokens($vibeId: ID, $userId: ID) {\n    allVibeLlmContextTokens(vibeId: $vibeId, userId: $userId) {\n      id\n      vibeId\n      userId\n      label\n      tokenFingerprint\n      includeCredentials\n      includes\n      status\n      expiresAt\n      lastFetchedAt\n      fetchCount\n      createdAt\n      revokedAt\n      revokedReason\n    }\n  }\n`;\n\nconst ADMIN_REVOKE = gql`\n  mutation AdminRevokeVibeLlmContextToken($tokenId: ID!, $reason: String) {\n    adminRevokeVibeLlmContextToken(tokenId: $tokenId, reason: $reason) {\n      id\n      status\n      revokedAt\n      revokedReason\n    }\n  }\n`;\n\nfunction formatExpiry(expiresAt: string): string {\n  const diff = new Date(expiresAt).getTime() - Date.now();\n  if (diff < 0) return 'expired';\n  const hours = Math.floor(diff / (1000 * 60 * 60));\n  const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n  if (hours > 24) return `${Math.floor(hours / 24)}d`;\n  if (hours > 0) return `${hours}h ${mins}m`;\n  return `${mins}m`;\n}\n\ninterface VibeLlmContextAdminPanelProps {\n  vibeId: string;\n}\n\nexport function VibeLlmContextAdminPanel({ vibeId }: VibeLlmContextAdminPanelProps): ReactElement {\n  const { data, loading, refetch } = useQuery<{ allVibeLlmContextTokens: AdminTokenRow[] }>(\n    ALL_TOKENS,\n    {\n      variables: { vibeId },\n      fetchPolicy: 'cache-and-network',\n      errorPolicy: 'ignore',\n    }\n  );\n  const [adminRevoke] = useMutation<\n    { adminRevokeVibeLlmContextToken: AdminTokenRow },\n    { tokenId: string; reason?: string | null }\n  >(ADMIN_REVOKE, { refetchQueries: ['AllVibeLlmContextTokens'] });\n\n  const [reasonDraft, setReasonDraft] = useState<Record<string, string>>({});\n  const tokens = data?.allVibeLlmContextTokens ?? [];\n\n  const onRevoke = async (tokenId: string) => {\n    await adminRevoke({\n      variables: {\n        tokenId,\n        reason: (reasonDraft[tokenId] ?? '').trim() || null,\n      },\n    });\n    setReasonDraft((prev) => {\n      const next = { ...prev };\n      delete next[tokenId];\n      return next;\n    });\n    await refetch();\n  };\n\n  return (\n    <section className=\"bg-bg-surface border border-status-warning-border rounded-lg p-5 space-y-3\">\n      <header className=\"flex items-start gap-3\">\n        <Shield className=\"w-5 h-5 text-status-warning-text mt-0.5\" />\n        <div>\n          <h3 className=\"text-base font-semibold text-text-primary\">\n            Admin · all URLs for this vibe\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Visible only to workspace admins. Lists every user's signed URLs for this vibe. Use\n            revoke to immediately invalidate any URL — takes effect on the next fetch.\n          </p>\n        </div>\n      </header>\n\n      {loading && tokens.length === 0 && (\n        <div className=\"text-sm text-text-secondary py-3\">Loading…</div>\n      )}\n      {tokens.length === 0 && !loading && (\n        <div className=\"text-sm text-text-secondary py-3 flex items-center gap-2\">\n          <Info className=\"w-4 h-4\" />\n          No URLs minted for this vibe by any user.\n        </div>\n      )}\n      {tokens.length > 0 && (\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-default text-left text-xs text-text-secondary\">\n                <th className=\"py-2 pr-3\">User</th>\n                <th className=\"py-2 pr-3\">Label</th>\n                <th className=\"py-2 pr-3\">Fingerprint</th>\n                <th className=\"py-2 pr-3\">Creds</th>\n                <th className=\"py-2 pr-3\">Status</th>\n                <th className=\"py-2 pr-3\">Expires</th>\n                <th className=\"py-2 pr-3\">Fetches</th>\n                <th className=\"py-2 pr-3\">Revoke</th>\n              </tr>\n            </thead>\n            <tbody>\n              {tokens.map((t) => (\n                <tr key={t.id} className=\"border-b border-border-subtle align-top\">\n                  <td\n                    className=\"py-2 pr-3 font-mono text-xs text-text-secondary truncate max-w-[120px]\"\n                    title={t.userId}\n                  >\n                    {t.userId}\n                  </td>\n                  <td className=\"py-2 pr-3 text-text-primary\">{t.label ?? '—'}</td>\n                  <td className=\"py-2 pr-3 font-mono text-xs text-text-secondary\">\n                    {t.tokenFingerprint}\n                  </td>\n                  <td className=\"py-2 pr-3\">\n                    {t.includeCredentials ? (\n                      <span className=\"text-xs text-status-warning-text\">on</span>\n                    ) : (\n                      <span className=\"text-xs text-text-secondary\">off</span>\n                    )}\n                  </td>\n                  <td className=\"py-2 pr-3\">\n                    <span\n                      className={`text-xs px-1.5 py-0.5 rounded ${\n                        t.status === 'ACTIVE'\n                          ? 'bg-status-success-bg/20 text-status-success-text'\n                          : 'bg-bg-sunken text-text-secondary'\n                      }`}\n                    >\n                      {t.status}\n                    </span>\n                  </td>\n                  <td className=\"py-2 pr-3 text-xs text-text-secondary\">\n                    <span className=\"inline-flex items-center gap-1\">\n                      <Clock className=\"w-3 h-3\" />\n                      {formatExpiry(t.expiresAt)}\n                    </span>\n                  </td>\n                  <td className=\"py-2 pr-3 text-xs text-text-secondary\">{t.fetchCount}</td>\n                  <td className=\"py-2 pr-3\">\n                    {t.status === 'ACTIVE' ? (\n                      <div className=\"flex items-center gap-1\">\n                        <input\n                          type=\"text\"\n                          value={reasonDraft[t.id] ?? ''}\n                          onChange={(e) =>\n                            setReasonDraft((prev) => ({ ...prev, [t.id]: e.target.value }))\n                          }\n                          placeholder=\"reason\"\n                          className=\"w-28 px-1.5 py-1 text-xs bg-bg-sunken border border-border-default rounded text-text-primary\"\n                        />\n                        <button\n                          type=\"button\"\n                          onClick={() => onRevoke(t.id)}\n                          title=\"Admin revoke\"\n                          aria-label=\"Admin revoke URL\"\n                          className=\"p-1.5 text-status-error-text hover:opacity-80\"\n                        >\n                          <Trash2 className=\"w-4 h-4\" />\n                        </button>\n                      </div>\n                    ) : (\n                      <span className=\"text-xs text-text-secondary\" title={t.revokedReason ?? ''}>\n                        {t.revokedReason ?? '—'}\n                      </span>\n                    )}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VibeLlmContextAdminPanel.js","names":[],"sources":["../../../src/components/vibe/VibeLlmContextAdminPanel.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { Clock, Info, Shield, Trash2 } from 'lucide-react';\n\ninterface AdminTokenRow {\n  id: string;\n  vibeId: string;\n  userId: string;\n  label: string | null;\n  tokenFingerprint: string;\n  includeCredentials: boolean;\n  includes: string[];\n  status: 'ACTIVE' | 'REVOKED';\n  expiresAt: string;\n  lastFetchedAt: string | null;\n  fetchCount: number;\n  createdAt: string;\n  revokedAt: string | null;\n  revokedReason: string | null;\n}\n\nconst ALL_TOKENS = gql`\n  query AllVibeLlmContextTokens($vibeId: ID, $userId: ID) {\n    allVibeLlmContextTokens(vibeId: $vibeId, userId: $userId) {\n      id\n      vibeId\n      userId\n      label\n      tokenFingerprint\n      includeCredentials\n      includes\n      status\n      expiresAt\n      lastFetchedAt\n      fetchCount\n      createdAt\n      revokedAt\n      revokedReason\n    }\n  }\n`;\n\nconst ADMIN_REVOKE = gql`\n  mutation AdminRevokeVibeLlmContextToken($tokenId: ID!, $reason: String) {\n    adminRevokeVibeLlmContextToken(tokenId: $tokenId, reason: $reason) {\n      id\n      status\n      revokedAt\n      revokedReason\n    }\n  }\n`;\n\nfunction formatExpiry(expiresAt: string): string {\n  const diff = new Date(expiresAt).getTime() - Date.now();\n  if (diff < 0) return 'expired';\n  const hours = Math.floor(diff / (1000 * 60 * 60));\n  const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));\n  if (hours > 24) return `${Math.floor(hours / 24)}d`;\n  if (hours > 0) return `${hours}h ${mins}m`;\n  return `${mins}m`;\n}\n\ninterface VibeLlmContextAdminPanelProps {\n  vibeId: string;\n}\n\nexport function VibeLlmContextAdminPanel({ vibeId }: VibeLlmContextAdminPanelProps): ReactElement {\n  const { data, loading, refetch } = useQuery<{ allVibeLlmContextTokens: AdminTokenRow[] }>(\n    ALL_TOKENS,\n    {\n      variables: { vibeId },\n      fetchPolicy: 'cache-and-network',\n      errorPolicy: 'ignore',\n    }\n  );\n  const [adminRevoke] = useMutation<\n    { adminRevokeVibeLlmContextToken: AdminTokenRow },\n    { tokenId: string; reason?: string | null }\n  >(ADMIN_REVOKE, { refetchQueries: ['AllVibeLlmContextTokens'] });\n\n  const [reasonDraft, setReasonDraft] = useState<Record<string, string>>({});\n  const tokens = data?.allVibeLlmContextTokens ?? [];\n\n  const onRevoke = async (tokenId: string) => {\n    await adminRevoke({\n      variables: {\n        tokenId,\n        reason: (reasonDraft[tokenId] ?? '').trim() || null,\n      },\n    });\n    setReasonDraft((prev) => {\n      const next = { ...prev };\n      delete next[tokenId];\n      return next;\n    });\n    await refetch();\n  };\n\n  return (\n    <section className=\"bg-bg-surface border border-status-warning-border rounded-lg p-5 space-y-3\">\n      <header className=\"flex items-start gap-3\">\n        <Shield className=\"size-5 text-status-warning-text mt-0.5\" />\n        <div>\n          <h3 className=\"text-base font-semibold text-text-primary\">\n            Admin · all URLs for this vibe\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Visible only to workspace admins. Lists every user's signed URLs for this vibe. Use\n            revoke to immediately invalidate any URL — takes effect on the next fetch.\n          </p>\n        </div>\n      </header>\n\n      {loading && tokens.length === 0 && (\n        <div className=\"text-sm text-text-secondary py-3\">Loading…</div>\n      )}\n      {tokens.length === 0 && !loading && (\n        <div className=\"text-sm text-text-secondary py-3 flex items-center gap-2\">\n          <Info className=\"size-4\" />\n          No URLs minted for this vibe by any user.\n        </div>\n      )}\n      {tokens.length > 0 && (\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-default text-left text-xs text-text-secondary\">\n                <th className=\"py-2 pr-3\">User</th>\n                <th className=\"py-2 pr-3\">Label</th>\n                <th className=\"py-2 pr-3\">Fingerprint</th>\n                <th className=\"py-2 pr-3\">Creds</th>\n                <th className=\"py-2 pr-3\">Status</th>\n                <th className=\"py-2 pr-3\">Expires</th>\n                <th className=\"py-2 pr-3\">Fetches</th>\n                <th className=\"py-2 pr-3\">Revoke</th>\n              </tr>\n            </thead>\n            <tbody>\n              {tokens.map((t) => (\n                <tr key={t.id} className=\"border-b border-border-subtle align-top\">\n                  <td\n                    className=\"py-2 pr-3 font-mono text-xs text-text-secondary truncate max-w-[120px]\"\n                    title={t.userId}\n                  >\n                    {t.userId}\n                  </td>\n                  <td className=\"py-2 pr-3 text-text-primary\">{t.label ?? '—'}</td>\n                  <td className=\"py-2 pr-3 font-mono text-xs text-text-secondary\">\n                    {t.tokenFingerprint}\n                  </td>\n                  <td className=\"py-2 pr-3\">\n                    {t.includeCredentials ? (\n                      <span className=\"text-xs text-status-warning-text\">on</span>\n                    ) : (\n                      <span className=\"text-xs text-text-secondary\">off</span>\n                    )}\n                  </td>\n                  <td className=\"py-2 pr-3\">\n                    <span\n                      className={`text-xs px-1.5 py-0.5 rounded ${\n                        t.status === 'ACTIVE'\n                          ? 'bg-status-success-bg/20 text-status-success-text'\n                          : 'bg-bg-sunken text-text-secondary'\n                      }`}\n                    >\n                      {t.status}\n                    </span>\n                  </td>\n                  <td className=\"py-2 pr-3 text-xs text-text-secondary\">\n                    <span className=\"inline-flex items-center gap-1\">\n                      <Clock className=\"size-3\" />\n                      {formatExpiry(t.expiresAt)}\n                    </span>\n                  </td>\n                  <td className=\"py-2 pr-3 text-xs text-text-secondary\">{t.fetchCount}</td>\n                  <td className=\"py-2 pr-3\">\n                    {t.status === 'ACTIVE' ? (\n                      <div className=\"flex items-center gap-1\">\n                        <input aria-label=\"reason\"\n                          type=\"text\"\n                          value={reasonDraft[t.id] ?? ''}\n                          onChange={(e) =>\n                            setReasonDraft((prev) => ({ ...prev, [t.id]: e.target.value }))\n                          }\n                          placeholder=\"reason\"\n                          className=\"w-28 px-1.5 py-1 text-xs bg-bg-sunken border border-border-default rounded text-text-primary\"\n                        />\n                        <button\n                          type=\"button\"\n                          onClick={() => onRevoke(t.id)}\n                          title=\"Admin revoke\"\n                          aria-label=\"Admin revoke URL\"\n                          className=\"p-1.5 text-status-error-text hover:opacity-80\"\n                        >\n                          <Trash2 className=\"size-4\" />\n                        </button>\n                      </div>\n                    ) : (\n                      <span className=\"text-xs text-text-secondary\" title={t.revokedReason ?? ''}>\n                        {t.revokedReason ?? '—'}\n                      </span>\n                    )}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/components/vibe/VibeLlmContextTabPanel.js

@@ -202,7 +202,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 				className: "rounded-lg border border-status-warning-border bg-status-warning-bg/30 p-4",
 				children: /* @__PURE__ */ g("div", {
 					className: "flex items-start gap-3",
-					children: [/* @__PURE__ */ h(ie, { className: "w-5 h-5 text-status-warning-text mt-0.5" }), /* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ h(ie, { className: "size-5 text-status-warning-text mt-0.5" }), /* @__PURE__ */ g("div", {
 						className: "text-sm text-text-primary",
 						children: [/* @__PURE__ */ h("p", {
 							className: "font-medium mb-1",
@@ -241,10 +241,11 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 							},
 							disabled: w.loading,
 							className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover disabled:opacity-50",
-							children: [K && !w.loading && /* @__PURE__ */ h(s, { className: "w-4 h-4" }), w.loading ? "Saving…" : K ? "Saved" : "Save settings"]
+							children: [K && !w.loading && /* @__PURE__ */ h(s, { className: "size-4" }), w.loading ? "Saving…" : K ? "Saved" : "Save settings"]
 						})]
 					}),
 					/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+						htmlFor: "vibellmcontexttabpanel-44",
 						className: "block text-sm font-medium text-text-primary mb-2",
 						children: "URL expiry"
 					}), /* @__PURE__ */ g("div", {
@@ -261,6 +262,8 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 								children: "or custom hours:"
 							}),
 							/* @__PURE__ */ h("input", {
+								id: "vibellmcontexttabpanel-44",
+								"aria-label": "control",
 								type: "number",
 								min: 1,
 								max: 168,
@@ -274,26 +277,28 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 						className: "flex items-center gap-2 text-sm text-text-primary",
 						children: [
 							/* @__PURE__ */ h("input", {
+								"aria-label": "control",
 								type: "checkbox",
 								checked: N,
 								onChange: (e) => P(e.target.checked),
-								className: "w-4 h-4"
+								className: "size-4"
 							}),
 							/* @__PURE__ */ h("span", { children: "Include credentials (tunnel URLs + agent API keys)" }),
 							N ? /* @__PURE__ */ h(a, {
-								className: "w-4 h-4 text-status-warning-text",
+								className: "size-4 text-status-warning-text",
 								"aria-label": "Credentials will be exposed in the snapshot"
 							}) : /* @__PURE__ */ h(re, {
-								className: "w-4 h-4 text-text-secondary",
+								className: "size-4 text-text-secondary",
 								"aria-label": "Credentials redacted"
 							})
 						]
 					}), N && /* @__PURE__ */ g("p", {
 						className: "mt-1.5 text-xs text-status-warning-text flex items-start gap-1.5",
-						children: [/* @__PURE__ */ h(a, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ h("span", { children: "Anyone with a URL minted while this is on can read live agent tunnel URLs and API keys. Only enable for trusted recipients." })]
+						children: [/* @__PURE__ */ h(a, { className: "size-3.5 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ h("span", { children: "Anyone with a URL minted while this is on can read live agent tunnel URLs and API keys. Only enable for trusted recipients." })]
 					})] }),
 					/* @__PURE__ */ g("div", { children: [
 						/* @__PURE__ */ h("label", {
+							htmlFor: "vibellmcontexttabpanel-43",
 							className: "block text-sm font-medium text-text-primary mb-2",
 							children: "Sections to include"
 						}),
@@ -317,9 +322,11 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 						})
 					] }),
 					y.length > 0 && /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+						htmlFor: "vibellmcontexttabpanel-43",
 						className: "block text-sm font-medium text-text-primary mb-2",
 						children: "Default agent for context fetch"
 					}), /* @__PURE__ */ g("select", {
+						id: "vibellmcontexttabpanel-43",
 						value: z,
 						onChange: (e) => B(e.target.value),
 						className: "w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary",
@@ -333,10 +340,13 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 					})] }),
 					/* @__PURE__ */ g("div", { children: [
 						/* @__PURE__ */ h("label", {
+							htmlFor: "vibellmcontexttabpanel-42",
 							className: "block text-sm font-medium text-text-primary mb-2",
 							children: "Custom context text"
 						}),
 						/* @__PURE__ */ h("textarea", {
+							id: "vibellmcontexttabpanel-42",
+							"aria-label": "Free-form notes embedded in every snapshot you mint AFTER saving (existing tokens keep their original copy).",
 							value: L,
 							onChange: (e) => R(e.target.value.slice(0, 8192)),
 							rows: 5,
@@ -366,9 +376,12 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 							/* @__PURE__ */ g("div", {
 								className: "flex-1 min-w-[200px]",
 								children: [/* @__PURE__ */ h("label", {
+									htmlFor: "vibellmcontexttabpanel-41",
 									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Label (optional)"
 								}), /* @__PURE__ */ h("input", {
+									id: "vibellmcontexttabpanel-41",
+									"aria-label": "e.g. Claude desktop",
 									type: "text",
 									value: V,
 									onChange: (e) => H(e.target.value.slice(0, 120)),
@@ -381,7 +394,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 								onClick: Te,
 								disabled: $.loading,
 								className: "px-4 py-2 text-sm bg-bg-sunken text-text-primary border border-border-default rounded-md hover:bg-action-primary-bg-hover disabled:opacity-50 inline-flex items-center gap-1.5",
-								children: [/* @__PURE__ */ h(ne, { className: "w-4 h-4" }), $.loading ? "Loading…" : "Preview"]
+								children: [/* @__PURE__ */ h(ne, { className: "size-4" }), $.loading ? "Loading…" : "Preview"]
 							}),
 							/* @__PURE__ */ h("button", {
 								type: "button",
@@ -409,7 +422,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 						children: [/* @__PURE__ */ g("div", {
 							className: "flex items-center gap-2 text-sm mb-2",
 							children: [
-								/* @__PURE__ */ h(s, { className: "w-4 h-4 text-status-success-text" }),
+								/* @__PURE__ */ h(s, { className: "size-4 text-status-success-text" }),
 								/* @__PURE__ */ h("span", {
 									className: "font-medium text-text-primary",
 									children: "URL generated"
@@ -433,7 +446,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 								},
 								className: "px-2 py-1.5 text-xs bg-bg-sunken border border-border-default rounded text-text-primary",
 								"aria-label": "Copy URL",
-								children: Se ? /* @__PURE__ */ h(s, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ h(te, { className: "w-4 h-4" })
+								children: Se ? /* @__PURE__ */ h(s, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ h(te, { className: "size-4" })
 							})]
 						})]
 					})
@@ -457,16 +470,16 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 							},
 							disabled: A.every((e) => e.status !== "ACTIVE"),
 							className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-status-error-bg/10 text-status-error-text border border-status-error-border rounded-md hover:bg-status-error-bg/20 disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ h(u, { className: "w-4 h-4" }), "Revoke all"]
+							children: [/* @__PURE__ */ h(u, { className: "size-4" }), "Revoke all"]
 						})]
 					}),
 					C.loading && A.length === 0 && /* @__PURE__ */ g("div", {
 						className: "text-sm text-text-secondary py-4 flex items-center gap-2",
-						children: [/* @__PURE__ */ h(ae, { className: "w-4 h-4 animate-spin" }), "Loading tokens…"]
+						children: [/* @__PURE__ */ h(ae, { className: "size-4 animate-spin" }), "Loading tokens…"]
 					}),
 					A.length === 0 && !C.loading && /* @__PURE__ */ g("div", {
 						className: "text-sm text-text-secondary py-4 flex items-center gap-2",
-						children: [/* @__PURE__ */ h(c, { className: "w-4 h-4" }), "No URLs minted yet for this vibe."]
+						children: [/* @__PURE__ */ h(c, { className: "size-4" }), "No URLs minted yet for this vibe."]
 					}),
 					A.length > 0 && /* @__PURE__ */ h("div", {
 						className: "overflow-x-auto",
@@ -547,7 +560,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 										className: "py-2 pr-3 text-xs text-text-secondary",
 										children: /* @__PURE__ */ g("span", {
 											className: "inline-flex items-center gap-1",
-											children: [/* @__PURE__ */ h(ee, { className: "w-3 h-3" }), x(e.expiresAt)]
+											children: [/* @__PURE__ */ h(ee, { className: "size-3" }), x(e.expiresAt)]
 										})
 									}),
 									/* @__PURE__ */ h("td", {
@@ -564,7 +577,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 												title: "Show fetch history",
 												"aria-label": "Show fetch history",
 												className: "p-1.5 text-text-secondary hover:text-text-primary",
-												children: /* @__PURE__ */ h(c, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ h(c, { className: "size-4" })
 											}), e.status === "ACTIVE" && /* @__PURE__ */ g(ce, { children: [/* @__PURE__ */ h("button", {
 												type: "button",
 												onClick: async () => {
@@ -574,14 +587,14 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 												title: "Rotate (revoke + mint a new one with same settings)",
 												"aria-label": "Rotate URL",
 												className: "p-1.5 text-text-secondary hover:text-text-primary",
-												children: /* @__PURE__ */ h(l, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ h(l, { className: "size-4" })
 											}), /* @__PURE__ */ h("button", {
 												type: "button",
 												onClick: () => E({ variables: { tokenId: e.id } }),
 												title: "Revoke",
 												"aria-label": "Revoke URL",
 												className: "p-1.5 text-status-error-text hover:opacity-80",
-												children: /* @__PURE__ */ h(u, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ h(u, { className: "size-4" })
 											})] })]
 										})
 									})
@@ -599,7 +612,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 			/* @__PURE__ */ g("p", {
 				className: "text-xs text-text-secondary flex items-center gap-1",
 				children: [
-					/* @__PURE__ */ h(o, { className: "w-3 h-3" }),
+					/* @__PURE__ */ h(o, { className: "size-3" }),
 					"Tip: pipe the URL to any LLM with",
 					" ",
 					/* @__PURE__ */ h("code", {
@@ -617,6 +630,10 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 				]
 			}),
 			Y && /* @__PURE__ */ h("div", {
+				tabIndex: 0,
+				onKeyDown: (e) => {
+					e.key === "Escape" && (e.preventDefault(), X(!1));
+				},
 				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4",
 				role: "dialog",
 				"aria-modal": "true",
@@ -655,7 +672,7 @@ function S({ vibeId: f, attachedAgents: y = [] }) {
 								onClick: () => X(!1),
 								"aria-label": "Close preview",
 								className: "text-text-secondary hover:text-text-primary",
-								children: /* @__PURE__ */ h(d, { className: "w-4 h-4" })
+								children: /* @__PURE__ */ h(d, { className: "size-4" })
 							})
 						]
 					}), /* @__PURE__ */ h("div", {