@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

package/dist/components/agent-manager/ProfilesPanel.js

@@ -0,0 +1,260 @@
+import { Card as e } from "../shared/Card.js";
+import { VIBECONTROLS_AGENT_PROFILES_QUERY as t, useActiveAgentProfile as n } from "../../hooks/useActiveAgentProfile.js";
+import "../shared/index.js";
+import { useCallback as r, useState as i } from "react";
+import { CheckCircle2 as a, Loader2 as o, Plus as s, Star as c, Trash2 as l, X as u } from "lucide-react";
+import { gql as d } from "@apollo/client";
+import { useMutation as f } from "@apollo/client/react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/agent-manager/ProfilesPanel.tsx
+var h = d`
+  mutation CreateVibecontrolsAgentProfile($input: CreateAgentProfileInput!) {
+    createVibecontrolsAgentProfile(input: $input) {
+      id
+      name
+      isDefault
+      status
+    }
+  }
+`, g = d`
+  mutation DeleteVibecontrolsAgentProfile($id: ID!) {
+    deleteVibecontrolsAgentProfile(id: $id)
+  }
+`, _ = d`
+  mutation SetDefaultVibecontrolsAgentProfile($id: ID!) {
+    setDefaultVibecontrolsAgentProfile(id: $id) {
+      id
+      isDefault
+    }
+  }
+`;
+function v(e) {
+	let t = (e ?? "").toLowerCase();
+	return t === "running" || t === "active" || t === "healthy" ? "bg-status-success-text" : t === "stopped" || t === "inactive" ? "bg-text-placeholder" : t === "error" || t === "failed" ? "bg-status-error-text" : "bg-status-warning-text";
+}
+function y({ agentId: d }) {
+	let { profiles: y, active: b, setActive: x, loading: S, refetch: C } = n(d), [w, T] = i(!1), [E, D] = i("default"), [O, k] = i(""), [A, j] = i(null), M = { agentId: d }, [N, { loading: P }] = f(h, {
+		refetchQueries: [{
+			query: t,
+			variables: M
+		}],
+		awaitRefetchQueries: !0
+	}), [F, { loading: I }] = f(g, {
+		refetchQueries: [{
+			query: t,
+			variables: M
+		}],
+		awaitRefetchQueries: !0
+	}), [L, { loading: R }] = f(_, {
+		refetchQueries: [{
+			query: t,
+			variables: M
+		}],
+		awaitRefetchQueries: !0
+	}), z = r(async () => {
+		j(null);
+		let e = E.trim();
+		if (!e) {
+			j("Profile name is required");
+			return;
+		}
+		let t = O.trim() ? Number(O.trim()) : null;
+		if (O.trim() && (Number.isNaN(t) || t === null || t <= 0)) {
+			j("Port must be a positive number");
+			return;
+		}
+		try {
+			await N({ variables: { input: {
+				agentId: d,
+				name: e,
+				port: t
+			} } }), T(!1), D("default"), k("");
+		} catch (e) {
+			j(e instanceof Error ? e.message : "Failed to create profile");
+		}
+	}, [
+		d,
+		N,
+		E,
+		O
+	]), B = r(async (e) => {
+		if (j(null), window.confirm(`Delete profile "${e.name}"? This cannot be undone.`)) try {
+			await F({ variables: { id: e.id } });
+		} catch (e) {
+			j(e instanceof Error ? e.message : "Failed to delete profile");
+		}
+	}, [F]), V = r(async (e) => {
+		j(null);
+		try {
+			await L({ variables: { id: e.id } });
+		} catch (e) {
+			j(e instanceof Error ? e.message : "Failed to set default profile");
+		}
+	}, [L]), H = P || I || R;
+	return /* @__PURE__ */ m(e, { children: [
+		/* @__PURE__ */ m("div", {
+			className: "p-4 border-b border-border-default flex items-center justify-between",
+			children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h3", {
+				className: "font-semibold text-text-primary",
+				children: "Profiles"
+			}), /* @__PURE__ */ m("p", {
+				className: "text-xs text-text-secondary mt-0.5",
+				children: [
+					"Each profile runs an isolated CLI on this agent. Active:",
+					" ",
+					/* @__PURE__ */ p("code", {
+						className: "font-mono text-text-primary",
+						children: b
+					})
+				]
+			})] }), /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ p("button", {
+					type: "button",
+					onClick: () => C(),
+					className: "px-2 py-1 text-xs text-text-secondary hover:text-text-primary",
+					children: "Refresh"
+				}), /* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => T((e) => !e),
+					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:opacity-90",
+					children: [/* @__PURE__ */ p(s, { className: "w-4 h-4" }), "New profile"]
+				})]
+			})]
+		}),
+		A && /* @__PURE__ */ p("div", {
+			className: "px-4 py-2 bg-status-error-bg/30 border-b border-status-error-text/20 text-sm text-status-error-text",
+			children: A
+		}),
+		w && /* @__PURE__ */ m("div", {
+			className: "p-4 border-b border-border-default bg-bg-sunken/40 space-y-3",
+			children: [/* @__PURE__ */ m("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+					className: "block text-xs font-medium text-text-secondary mb-1",
+					children: "Profile name"
+				}), /* @__PURE__ */ p("input", {
+					type: "text",
+					value: E,
+					onChange: (e) => D(e.target.value),
+					placeholder: "default",
+					className: "w-full px-3 py-1.5 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono",
+					autoFocus: !0
+				})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+					className: "block text-xs font-medium text-text-secondary mb-1",
+					children: "Port (optional)"
+				}), /* @__PURE__ */ p("input", {
+					type: "number",
+					value: O,
+					onChange: (e) => k(e.target.value),
+					placeholder: "auto",
+					className: "w-full px-3 py-1.5 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono"
+				})] })]
+			}), /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ m("button", {
+					type: "button",
+					disabled: P,
+					onClick: () => void z(),
+					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:opacity-90 disabled:opacity-50",
+					children: [P ? /* @__PURE__ */ p(o, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ p(a, { className: "w-3.5 h-3.5" }), "Create"]
+				}), /* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => {
+						T(!1), j(null);
+					},
+					className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary",
+					children: [/* @__PURE__ */ p(u, { className: "w-3.5 h-3.5" }), "Cancel"]
+				})]
+			})]
+		}),
+		S && y.length === 0 ? /* @__PURE__ */ m("div", {
+			className: "p-6 text-center text-text-secondary",
+			children: [/* @__PURE__ */ p(o, { className: "w-5 h-5 mx-auto mb-2 animate-spin" }), "Loading profiles…"]
+		}) : y.length === 0 ? /* @__PURE__ */ m("div", {
+			className: "p-6 text-center text-text-secondary",
+			children: [/* @__PURE__ */ p("p", { children: "No profiles configured yet." }), /* @__PURE__ */ m("p", {
+				className: "text-xs mt-1",
+				children: [
+					"The agent will fall back to the implicit ",
+					/* @__PURE__ */ p("code", {
+						className: "font-mono",
+						children: "default"
+					}),
+					" ",
+					"profile until you create one."
+				]
+			})]
+		}) : /* @__PURE__ */ p("div", {
+			className: "divide-y divide-border-default",
+			children: y.map((e) => {
+				let t = e.name === b;
+				return /* @__PURE__ */ m("div", {
+					className: `p-4 flex items-center justify-between gap-4 ${t ? "bg-action-primary-bg/5" : ""}`,
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center gap-3 min-w-0",
+						children: [/* @__PURE__ */ p("span", {
+							className: `h-2 w-2 rounded-full flex-shrink-0 ${v(e.status)}`,
+							"aria-hidden": !0
+						}), /* @__PURE__ */ m("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ m("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ p("code", {
+										className: "font-mono font-medium text-text-primary truncate",
+										children: e.name
+									}),
+									e.isDefault && /* @__PURE__ */ m("span", {
+										className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] uppercase tracking-wide bg-action-primary-bg/10 text-action-primary-bg rounded",
+										children: [/* @__PURE__ */ p(c, { className: "w-3 h-3" }), "Default"]
+									}),
+									t && /* @__PURE__ */ p("span", {
+										className: "px-1.5 py-0.5 text-[10px] uppercase tracking-wide bg-status-success-bg/40 text-status-success-text rounded",
+										children: "Active"
+									})
+								]
+							}), /* @__PURE__ */ m("p", {
+								className: "text-xs text-text-secondary mt-0.5 truncate",
+								children: [
+									e.status ?? "unknown",
+									e.port ? ` · port ${e.port}` : "",
+									e.tunnelUrl ? ` · ${e.tunnelUrl}` : ""
+								]
+							})]
+						})]
+					}), /* @__PURE__ */ m("div", {
+						className: "flex items-center gap-2 flex-shrink-0",
+						children: [
+							!t && /* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => x(e.name),
+								className: "px-2 py-1 text-xs text-text-secondary hover:text-text-primary border border-border-default rounded",
+								children: "Use"
+							}),
+							!e.isDefault && /* @__PURE__ */ m("button", {
+								type: "button",
+								disabled: H,
+								onClick: () => void V(e),
+								className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary border border-border-default rounded disabled:opacity-50",
+								children: [/* @__PURE__ */ p(c, { className: "w-3 h-3" }), "Set default"]
+							}),
+							/* @__PURE__ */ m("button", {
+								type: "button",
+								disabled: H || e.isDefault,
+								title: e.isDefault ? "Cannot delete the default profile" : "Delete",
+								onClick: () => void B(e),
+								className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-status-error-text hover:bg-status-error-bg/30 border border-status-error-text/20 rounded disabled:opacity-50",
+								children: [/* @__PURE__ */ p(l, { className: "w-3 h-3" }), "Delete"]
+							})
+						]
+					})]
+				}, e.id);
+			})
+		})
+	] });
+}
+//#endregion
+export { y as ProfilesPanel };
+
+//# sourceMappingURL=ProfilesPanel.js.map

package/dist/components/agent-manager/ProfilesPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilesPanel.js","names":[],"sources":["../../../src/components/agent-manager/ProfilesPanel.tsx"],"sourcesContent":["/**\n * ProfilesPanel — Phase 5B (multi-profile-per-daemon).\n *\n * Mounted on AgentDetailsPage as the \"Profiles\" tab. Lists every\n * `AgentProfile` row for the current agent and exposes full CRUDL:\n *   - List with status indicators\n *   - Create (autofilled name \"default\" but editable)\n *   - Delete\n *   - Set-default\n *\n * Apollo `gql` documents are inlined so the component compiles cleanly\n * before Phase 5A (svc) publishes the AgentProfile schema to Hive.\n */\n\nimport { useCallback, useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation } from '@apollo/client/react';\nimport { CheckCircle2, Loader2, Plus, Star, Trash2, X } from 'lucide-react';\nimport { Card } from '@/components/shared';\nimport {\n  useActiveAgentProfile,\n  VIBECONTROLS_AGENT_PROFILES_QUERY,\n  type AgentProfile,\n} from '@/hooks/useActiveAgentProfile';\n\ninterface ProfilesPanelProps {\n  agentId: string;\n}\n\ninterface CreateAgentProfileInput {\n  agentId: string;\n  name: string;\n  port?: number | null;\n}\n\ninterface CreateProfileData {\n  createVibecontrolsAgentProfile: Pick<AgentProfile, 'id' | 'name' | 'isDefault' | 'status'>;\n}\n\ninterface CreateProfileVars {\n  input: CreateAgentProfileInput;\n}\n\ninterface DeleteProfileData {\n  deleteVibecontrolsAgentProfile: boolean;\n}\n\ninterface DeleteProfileVars {\n  id: string;\n}\n\ninterface SetDefaultProfileData {\n  setDefaultVibecontrolsAgentProfile: Pick<AgentProfile, 'id' | 'isDefault'>;\n}\n\ninterface SetDefaultProfileVars {\n  id: string;\n}\n\nconst CREATE_PROFILE_MUTATION = gql`\n  mutation CreateVibecontrolsAgentProfile($input: CreateAgentProfileInput!) {\n    createVibecontrolsAgentProfile(input: $input) {\n      id\n      name\n      isDefault\n      status\n    }\n  }\n`;\n\nconst DELETE_PROFILE_MUTATION = gql`\n  mutation DeleteVibecontrolsAgentProfile($id: ID!) {\n    deleteVibecontrolsAgentProfile(id: $id)\n  }\n`;\n\nconst SET_DEFAULT_PROFILE_MUTATION = gql`\n  mutation SetDefaultVibecontrolsAgentProfile($id: ID!) {\n    setDefaultVibecontrolsAgentProfile(id: $id) {\n      id\n      isDefault\n    }\n  }\n`;\n\nfunction statusDot(status: string | null): string {\n  const s = (status ?? '').toLowerCase();\n  if (s === 'running' || s === 'active' || s === 'healthy') return 'bg-status-success-text';\n  if (s === 'stopped' || s === 'inactive') return 'bg-text-placeholder';\n  if (s === 'error' || s === 'failed') return 'bg-status-error-text';\n  return 'bg-status-warning-text';\n}\n\nexport function ProfilesPanel({ agentId }: ProfilesPanelProps) {\n  const { profiles, active, setActive, loading, refetch } = useActiveAgentProfile(agentId);\n\n  const [showCreate, setShowCreate] = useState(false);\n  const [newName, setNewName] = useState('default');\n  const [newPort, setNewPort] = useState<string>('');\n  const [actionError, setActionError] = useState<string | null>(null);\n\n  const refetchVars = { agentId };\n\n  const [createProfile, { loading: creating }] = useMutation<CreateProfileData, CreateProfileVars>(\n    CREATE_PROFILE_MUTATION,\n    {\n      refetchQueries: [{ query: VIBECONTROLS_AGENT_PROFILES_QUERY, variables: refetchVars }],\n      awaitRefetchQueries: true,\n    }\n  );\n\n  const [deleteProfile, { loading: deleting }] = useMutation<DeleteProfileData, DeleteProfileVars>(\n    DELETE_PROFILE_MUTATION,\n    {\n      refetchQueries: [{ query: VIBECONTROLS_AGENT_PROFILES_QUERY, variables: refetchVars }],\n      awaitRefetchQueries: true,\n    }\n  );\n\n  const [setDefaultProfile, { loading: settingDefault }] = useMutation<\n    SetDefaultProfileData,\n    SetDefaultProfileVars\n  >(SET_DEFAULT_PROFILE_MUTATION, {\n    refetchQueries: [{ query: VIBECONTROLS_AGENT_PROFILES_QUERY, variables: refetchVars }],\n    awaitRefetchQueries: true,\n  });\n\n  const handleCreate = useCallback(async () => {\n    setActionError(null);\n    const trimmedName = newName.trim();\n    if (!trimmedName) {\n      setActionError('Profile name is required');\n      return;\n    }\n    const portNum = newPort.trim() ? Number(newPort.trim()) : null;\n    if (newPort.trim() && (Number.isNaN(portNum) || portNum === null || portNum <= 0)) {\n      setActionError('Port must be a positive number');\n      return;\n    }\n    try {\n      await createProfile({\n        variables: {\n          input: { agentId, name: trimmedName, port: portNum },\n        },\n      });\n      setShowCreate(false);\n      setNewName('default');\n      setNewPort('');\n    } catch (err) {\n      setActionError(err instanceof Error ? err.message : 'Failed to create profile');\n    }\n  }, [agentId, createProfile, newName, newPort]);\n\n  const handleDelete = useCallback(\n    async (profile: AgentProfile) => {\n      setActionError(null);\n      if (!window.confirm(`Delete profile \"${profile.name}\"? This cannot be undone.`)) {\n        return;\n      }\n      try {\n        await deleteProfile({ variables: { id: profile.id } });\n      } catch (err) {\n        setActionError(err instanceof Error ? err.message : 'Failed to delete profile');\n      }\n    },\n    [deleteProfile]\n  );\n\n  const handleSetDefault = useCallback(\n    async (profile: AgentProfile) => {\n      setActionError(null);\n      try {\n        await setDefaultProfile({ variables: { id: profile.id } });\n      } catch (err) {\n        setActionError(err instanceof Error ? err.message : 'Failed to set default profile');\n      }\n    },\n    [setDefaultProfile]\n  );\n\n  const busy = creating || deleting || settingDefault;\n\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border-default flex items-center justify-between\">\n        <div>\n          <h3 className=\"font-semibold text-text-primary\">Profiles</h3>\n          <p className=\"text-xs text-text-secondary mt-0.5\">\n            Each profile runs an isolated CLI on this agent. Active:{' '}\n            <code className=\"font-mono text-text-primary\">{active}</code>\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-2 py-1 text-xs text-text-secondary hover:text-text-primary\"\n          >\n            Refresh\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setShowCreate((v) => !v)}\n            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:opacity-90\"\n          >\n            <Plus className=\"w-4 h-4\" />\n            New profile\n          </button>\n        </div>\n      </div>\n\n      {actionError && (\n        <div className=\"px-4 py-2 bg-status-error-bg/30 border-b border-status-error-text/20 text-sm text-status-error-text\">\n          {actionError}\n        </div>\n      )}\n\n      {showCreate && (\n        <div className=\"p-4 border-b border-border-default bg-bg-sunken/40 space-y-3\">\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div>\n              <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                Profile name\n              </label>\n              <input\n                type=\"text\"\n                value={newName}\n                onChange={(e) => setNewName(e.target.value)}\n                placeholder=\"default\"\n                className=\"w-full px-3 py-1.5 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                autoFocus\n              />\n            </div>\n            <div>\n              <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                Port (optional)\n              </label>\n              <input\n                type=\"number\"\n                value={newPort}\n                onChange={(e) => setNewPort(e.target.value)}\n                placeholder=\"auto\"\n                className=\"w-full px-3 py-1.5 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n              />\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              disabled={creating}\n              onClick={() => void handleCreate()}\n              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:opacity-90 disabled:opacity-50\"\n            >\n              {creating ? (\n                <Loader2 className=\"w-3.5 h-3.5 animate-spin\" />\n              ) : (\n                <CheckCircle2 className=\"w-3.5 h-3.5\" />\n              )}\n              Create\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => {\n                setShowCreate(false);\n                setActionError(null);\n              }}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary\"\n            >\n              <X className=\"w-3.5 h-3.5\" />\n              Cancel\n            </button>\n          </div>\n        </div>\n      )}\n\n      {loading && profiles.length === 0 ? (\n        <div className=\"p-6 text-center text-text-secondary\">\n          <Loader2 className=\"w-5 h-5 mx-auto mb-2 animate-spin\" />\n          Loading profiles…\n        </div>\n      ) : profiles.length === 0 ? (\n        <div className=\"p-6 text-center text-text-secondary\">\n          <p>No profiles configured yet.</p>\n          <p className=\"text-xs mt-1\">\n            The agent will fall back to the implicit <code className=\"font-mono\">default</code>{' '}\n            profile until you create one.\n          </p>\n        </div>\n      ) : (\n        <div className=\"divide-y divide-border-default\">\n          {profiles.map((profile) => {\n            const isActive = profile.name === active;\n            return (\n              <div\n                key={profile.id}\n                className={`p-4 flex items-center justify-between gap-4 ${\n                  isActive ? 'bg-action-primary-bg/5' : ''\n                }`}\n              >\n                <div className=\"flex items-center gap-3 min-w-0\">\n                  <span\n                    className={`h-2 w-2 rounded-full flex-shrink-0 ${statusDot(profile.status)}`}\n                    aria-hidden\n                  />\n                  <div className=\"min-w-0\">\n                    <div className=\"flex items-center gap-2\">\n                      <code className=\"font-mono font-medium text-text-primary truncate\">\n                        {profile.name}\n                      </code>\n                      {profile.isDefault && (\n                        <span className=\"inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] uppercase tracking-wide bg-action-primary-bg/10 text-action-primary-bg rounded\">\n                          <Star className=\"w-3 h-3\" />\n                          Default\n                        </span>\n                      )}\n                      {isActive && (\n                        <span className=\"px-1.5 py-0.5 text-[10px] uppercase tracking-wide bg-status-success-bg/40 text-status-success-text rounded\">\n                          Active\n                        </span>\n                      )}\n                    </div>\n                    <p className=\"text-xs text-text-secondary mt-0.5 truncate\">\n                      {profile.status ?? 'unknown'}\n                      {profile.port ? ` · port ${profile.port}` : ''}\n                      {profile.tunnelUrl ? ` · ${profile.tunnelUrl}` : ''}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2 flex-shrink-0\">\n                  {!isActive && (\n                    <button\n                      type=\"button\"\n                      onClick={() => setActive(profile.name)}\n                      className=\"px-2 py-1 text-xs text-text-secondary hover:text-text-primary border border-border-default rounded\"\n                    >\n                      Use\n                    </button>\n                  )}\n                  {!profile.isDefault && (\n                    <button\n                      type=\"button\"\n                      disabled={busy}\n                      onClick={() => void handleSetDefault(profile)}\n                      className=\"inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary border border-border-default rounded disabled:opacity-50\"\n                    >\n                      <Star className=\"w-3 h-3\" />\n                      Set default\n                    </button>\n                  )}\n                  <button\n                    type=\"button\"\n                    disabled={busy || profile.isDefault}\n                    title={profile.isDefault ? 'Cannot delete the default profile' : 'Delete'}\n                    onClick={() => void handleDelete(profile)}\n                    className=\"inline-flex items-center gap-1 px-2 py-1 text-xs text-status-error-text hover:bg-status-error-bg/30 border border-status-error-text/20 rounded disabled:opacity-50\"\n                  >\n                    <Trash2 className=\"w-3 h-3\" />\n                    Delete\n                  </button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/controls/ModelSelector.js

@@ -1,35 +1,24 @@
 import { useTr as e } from "../../../shared/hooks/useTr.js";
-import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { ChevronDown as a } from "lucide-react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { fetchModels as t } from "../../../services/aiApi.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { ChevronDown as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/agent-manager/controls/ModelSelector.tsx
-var l = [
+var u = [
 	{
 		label: "Claude",
 		sdk: "claude",
-		models: [
-			"claude-sonnet-4-20250514",
-			"claude-opus-4-20250514",
-			"claude-haiku-4-5-20251001"
-		]
+		models: []
 	},
 	{
 		label: "Codex",
 		sdk: "codex",
-		models: [
-			"codex-mini-latest",
-			"gpt-4.1",
-			"gpt-4.1-mini"
-		]
+		models: []
 	},
 	{
 		label: "Gemini",
 		sdk: "gemini",
-		models: [
-			"gemini-2.5-flash",
-			"gemini-2.5-pro",
-			"gemini-2.0-flash"
-		]
+		models: []
 	},
 	{
 		label: "OpenCode",
@@ -39,7 +28,7 @@ var l = [
 	{
 		label: "OpenAI-compatible",
 		sdk: "openai-compat",
-		models: ["gpt-3.5-turbo"]
+		models: []
 	},
 	{
 		label: "Goose",
@@ -77,82 +66,110 @@ var l = [
 		models: []
 	}
 ];
-function u(e) {
-	return e.replace("claude-", "").replace("-20250514", "").replace("-20251001", "");
+function d(e) {
+	return e.replace(/^opencode\//, "").replace("claude-", "").replace("-20250514", "").replace("-20251001", "");
+}
+function f(e) {
+	return u.find((t) => t.sdk === e)?.label ?? e;
+}
+function p(e, t) {
+	return Array.from(new Set([t, ...e].filter(Boolean)));
 }
-function d({ value: d, onChange: f, provider: p }) {
-	let m = e(), [h, g] = i(!1), [_, v] = i(""), y = r(null), b = r(null), [x, S] = i({
+function m({ value: m, onChange: h, provider: g, agentId: _, profile: v }) {
+	let y = e(), [b, x] = a(!1), [S, C] = a(""), [w, T] = a(null), E = i(null), D = i(null), [O, k] = a({
 		bottom: 0,
 		left: 0
-	}), C = p ? l.filter((e) => e.sdk === p) : l, w = t((e) => {
-		y.current && !y.current.contains(e.target) && g(!1);
+	}), A = g && w ? [{
+		label: f(g),
+		sdk: g,
+		models: p(w, m)
+	}] : g ? u.filter((e) => e.sdk === g) : u, j = n((e) => {
+		E.current && !E.current.contains(e.target) && x(!1);
 	}, []);
-	n(() => {
-		if (h) return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
-	}, [h, w]), n(() => {
-		h || v("");
-	}, [h]);
-	let T = _.toLowerCase(), E = C.map((e) => ({
+	r(() => {
+		if (b) return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
+	}, [b, j]), r(() => {
+		b || C("");
+	}, [b]), r(() => {
+		if (!b || !_ || !g) return;
+		let e = !1;
+		return T(null), t({
+			id: _,
+			profile: v ?? "default"
+		}, g).then((t) => {
+			e || T(t.map((e) => e.id).filter(Boolean));
+		}).catch(() => {
+			e || T([]);
+		}), () => {
+			e = !0;
+		};
+	}, [
+		_,
+		b,
+		v,
+		g
+	]);
+	let M = S.toLowerCase(), N = A.map((e) => ({
 		...e,
-		models: _ ? e.models.filter((e) => e.toLowerCase().includes(T)) : e.models
+		models: S ? e.models.filter((e) => e.toLowerCase().includes(M)) : e.models
 	}));
-	return /* @__PURE__ */ c("div", {
-		ref: y,
+	return /* @__PURE__ */ l("div", {
+		ref: E,
 		className: "relative",
-		children: [/* @__PURE__ */ c("button", {
-			ref: b,
+		children: [/* @__PURE__ */ l("button", {
+			ref: D,
 			type: "button",
 			onClick: () => {
-				if (!h && b.current) {
-					let e = b.current.getBoundingClientRect();
-					S({
+				if (!b && D.current) {
+					let e = D.current.getBoundingClientRect();
+					k({
 						bottom: window.innerHeight - e.top + 4,
 						left: e.left
 					});
 				}
-				g((e) => !e);
+				x((e) => !e);
 			},
 			className: "flex items-center gap-1 px-2 py-1 text-xs font-medium rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors max-w-[160px]",
-			title: d,
-			children: [/* @__PURE__ */ s("span", {
+			title: m,
+			children: [/* @__PURE__ */ c("span", {
 				className: "truncate",
-				children: u(d)
-			}), /* @__PURE__ */ s(a, { className: "w-3 h-3 flex-shrink-0" })]
-		}), h && /* @__PURE__ */ c("div", {
+				children: d(m)
+			}), /* @__PURE__ */ c(o, { className: "w-3 h-3 flex-shrink-0" })]
+		}), b && /* @__PURE__ */ l("div", {
 			className: "fixed w-64 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-bg-surface shadow-lg z-[100]",
 			style: {
-				bottom: x.bottom,
-				left: x.left
+				bottom: O.bottom,
+				left: O.left
 			},
 			children: [
-				/* @__PURE__ */ s("input", {
+				/* @__PURE__ */ c("input", {
 					type: "text",
-					value: _,
-					onChange: (e) => v(e.target.value),
+					value: S,
+					onChange: (e) => C(e.target.value),
 					placeholder: "Search...",
 					className: "w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none sticky top-0 bg-bg-surface",
 					autoFocus: !0
 				}),
-				E.map((e) => /* @__PURE__ */ s("div", { children: e.models.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+				N.map((e) => /* @__PURE__ */ c("div", { children: e.models.length > 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
 					className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary bg-bg-sunken",
 					children: e.label
-				}), e.models.map((e) => /* @__PURE__ */ s("button", {
+				}), e.models.map((e) => /* @__PURE__ */ c("button", {
 					type: "button",
 					onClick: () => {
-						f(e), g(!1);
+						h(e), x(!1);
 					},
-					className: `w-full text-left px-3 py-2 text-sm hover:bg-bg-elevated transition-colors ${e === d ? "text-action-primary-text bg-action-primary-bg/10" : "text-text-primary"}`,
+					className: `w-full text-left px-3 py-2 text-sm hover:bg-bg-elevated transition-colors ${e === m ? "text-action-primary-text bg-action-primary-bg/10" : "text-text-primary"}`,
 					children: e
 				}, e))] }) }, e.sdk)),
-				E.every((e) => e.models.length === 0) && /* @__PURE__ */ s("div", {
+				N.every((e) => e.models.length === 0) && /* @__PURE__ */ c("div", {
 					className: "px-3 py-4 text-sm text-text-tertiary text-center",
-					children: m("vibecontrols.agentManager.controls.noModelsAvailable", "No models available")
+					children: y("vibecontrols.agentManager.controls.noModelsAvailable", "No models available")
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { d as ModelSelector };
+export { m as ModelSelector };
 
 //# sourceMappingURL=ModelSelector.js.map

package/dist/components/agent-manager/controls/ModelSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.js","names":[],"sources":["../../../../src/components/agent-manager/controls/ModelSelector.tsx"],"sourcesContent":["/**\n * Model selector dropdown.\n *\n * Displays a compact button with the current model name that opens a\n * grouped dropdown of models filtered by SDK provider.\n */\n\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { AgentSdkType } from '@/types/agentManager';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface ModelSelectorProps {\n  value: string;\n  onChange: (model: string) => void;\n  provider?: AgentSdkType;\n}\n\ninterface ModelGroup {\n  label: string;\n  sdk: AgentSdkType;\n  models: string[];\n}\n\nconst MODEL_GROUPS: ModelGroup[] = [\n  {\n    label: 'Claude',\n    sdk: 'claude',\n    models: ['claude-sonnet-4-20250514', 'claude-opus-4-20250514', 'claude-haiku-4-5-20251001'],\n  },\n  {\n    label: 'Codex',\n    sdk: 'codex',\n    models: ['codex-mini-latest', 'gpt-4.1', 'gpt-4.1-mini'],\n  },\n  {\n    label: 'Gemini',\n    sdk: 'gemini',\n    models: ['gemini-2.5-flash', 'gemini-2.5-pro', 'gemini-2.0-flash'],\n  },\n  {\n    label: 'OpenCode',\n    sdk: 'opencode',\n    models: [],\n  },\n  {\n    label: 'OpenAI-compatible',\n    sdk: 'openai-compat',\n    models: ['gpt-3.5-turbo'],\n  },\n  { label: 'Goose', sdk: 'goose', models: [] },\n  { label: 'Amp', sdk: 'amp', models: [] },\n  { label: 'Copilot', sdk: 'copilot', models: [] },\n  { label: 'Crush', sdk: 'crush', models: [] },\n  { label: 'Pi', sdk: 'pi', models: [] },\n  { label: 'Aider', sdk: 'aider', models: [] },\n  { label: 'Plandex', sdk: 'plandex', models: [] },\n];\n\n/** Truncate model name for compact display */\nfunction displayName(model: string): string {\n  // Remove common prefixes for compact display\n  return model.replace('claude-', '').replace('-20250514', '').replace('-20251001', '');\n}\n\nexport function ModelSelector({ value, onChange, provider }: ModelSelectorProps) {\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [pos, setPos] = useState({ bottom: 0, left: 0 });\n\n  const filteredGroups = provider ? MODEL_GROUPS.filter((g) => g.sdk === provider) : MODEL_GROUPS;\n\n  const handleClickOutside = useCallback((e: MouseEvent) => {\n    if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n      setOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [open, handleClickOutside]);\n\n  useEffect(() => {\n    if (!open) setSearch('');\n  }, [open]);\n\n  const searchLower = search.toLowerCase();\n  const searchedGroups = filteredGroups.map((g) => ({\n    ...g,\n    models: search ? g.models.filter((m) => m.toLowerCase().includes(searchLower)) : g.models,\n  }));\n\n  const handleToggle = () => {\n    if (!open && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setPos({ bottom: window.innerHeight - rect.top + 4, left: rect.left });\n    }\n    setOpen((prev) => !prev);\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        className=\"flex items-center gap-1 px-2 py-1 text-xs font-medium rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors max-w-[160px]\"\n        title={value}\n      >\n        <span className=\"truncate\">{displayName(value)}</span>\n        <ChevronDown className=\"w-3 h-3 flex-shrink-0\" />\n      </button>\n\n      {open && (\n        <div\n          className=\"fixed w-64 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-bg-surface shadow-lg z-[100]\"\n          style={{ bottom: pos.bottom, left: pos.left }}\n        >\n          <input\n            type=\"text\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            placeholder=\"Search...\"\n            className=\"w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none sticky top-0 bg-bg-surface\"\n            autoFocus\n          />\n          {searchedGroups.map((group) => (\n            <div key={group.sdk}>\n              {group.models.length > 0 && (\n                <>\n                  <div className=\"px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary bg-bg-sunken\">\n                    {group.label}\n                  </div>\n                  {group.models.map((model) => (\n                    <button\n                      key={model}\n                      type=\"button\"\n                      onClick={() => {\n                        onChange(model);\n                        setOpen(false);\n                      }}\n                      className={`w-full text-left px-3 py-2 text-sm hover:bg-bg-elevated transition-colors ${\n                        model === value\n                          ? 'text-action-primary-text bg-action-primary-bg/10'\n                          : 'text-text-primary'\n                      }`}\n                    >\n                      {model}\n                    </button>\n                  ))}\n                </>\n              )}\n            </div>\n          ))}\n          {searchedGroups.every((g) => g.models.length === 0) && (\n            <div className=\"px-3 py-4 text-sm text-text-tertiary text-center\">\n              {tr('vibecontrols.agentManager.controls.noModelsAvailable', 'No models available')}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ModelSelector.js","names":[],"sources":["../../../../src/components/agent-manager/controls/ModelSelector.tsx"],"sourcesContent":["/**\n * Model selector dropdown.\n *\n * Displays a compact button with the current model name that opens a\n * grouped dropdown of models filtered by SDK provider.\n */\n\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { fetchModels } from '@/services/aiApi';\nimport type { AgentSdkType } from '@/types/agentManager';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface ModelSelectorProps {\n  value: string;\n  onChange: (model: string) => void;\n  provider?: AgentSdkType;\n  agentId?: string;\n  /** Canonical CLI profile name on the remote agent. */\n  profile?: string;\n}\n\ninterface ModelGroup {\n  label: string;\n  sdk: AgentSdkType;\n  models: string[];\n}\n\nconst MODEL_GROUPS: ModelGroup[] = [\n  { label: 'Claude', sdk: 'claude', models: [] },\n  { label: 'Codex', sdk: 'codex', models: [] },\n  { label: 'Gemini', sdk: 'gemini', models: [] },\n  { label: 'OpenCode', sdk: 'opencode', models: [] },\n  { label: 'OpenAI-compatible', sdk: 'openai-compat', models: [] },\n  { label: 'Goose', sdk: 'goose', models: [] },\n  { label: 'Amp', sdk: 'amp', models: [] },\n  { label: 'Copilot', sdk: 'copilot', models: [] },\n  { label: 'Crush', sdk: 'crush', models: [] },\n  { label: 'Pi', sdk: 'pi', models: [] },\n  { label: 'Aider', sdk: 'aider', models: [] },\n  { label: 'Plandex', sdk: 'plandex', models: [] },\n];\n\n/** Truncate model name for compact display */\nfunction displayName(model: string): string {\n  // Remove common prefixes for compact display\n  return model\n    .replace(/^opencode\\//, '')\n    .replace('claude-', '')\n    .replace('-20250514', '')\n    .replace('-20251001', '');\n}\n\nfunction modelGroupLabel(provider: AgentSdkType): string {\n  return MODEL_GROUPS.find((group) => group.sdk === provider)?.label ?? provider;\n}\n\nfunction uniqueModels(models: string[], currentValue: string): string[] {\n  return Array.from(new Set([currentValue, ...models].filter(Boolean)));\n}\n\nexport function ModelSelector({ value, onChange, provider, agentId, profile }: ModelSelectorProps) {\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [agentModels, setAgentModels] = useState<string[] | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [pos, setPos] = useState({ bottom: 0, left: 0 });\n\n  const filteredGroups =\n    provider && agentModels\n      ? [\n          {\n            label: modelGroupLabel(provider),\n            sdk: provider,\n            models: uniqueModels(agentModels, value),\n          },\n        ]\n      : provider\n        ? MODEL_GROUPS.filter((g) => g.sdk === provider)\n        : MODEL_GROUPS;\n\n  const handleClickOutside = useCallback((e: MouseEvent) => {\n    if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n      setOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [open, handleClickOutside]);\n\n  useEffect(() => {\n    if (!open) setSearch('');\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !agentId || !provider) return;\n\n    let cancelled = false;\n    setAgentModels(null);\n    void fetchModels({ id: agentId, profile: profile ?? 'default' }, provider)\n      .then((models) => {\n        if (cancelled) return;\n        const modelIds = models.map((model) => model.id).filter(Boolean);\n        setAgentModels(modelIds);\n      })\n      .catch(() => {\n        if (!cancelled) setAgentModels([]);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [agentId, open, profile, provider]);\n\n  const searchLower = search.toLowerCase();\n  const searchedGroups = filteredGroups.map((g) => ({\n    ...g,\n    models: search ? g.models.filter((m) => m.toLowerCase().includes(searchLower)) : g.models,\n  }));\n\n  const handleToggle = () => {\n    if (!open && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setPos({ bottom: window.innerHeight - rect.top + 4, left: rect.left });\n    }\n    setOpen((prev) => !prev);\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        className=\"flex items-center gap-1 px-2 py-1 text-xs font-medium rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors max-w-[160px]\"\n        title={value}\n      >\n        <span className=\"truncate\">{displayName(value)}</span>\n        <ChevronDown className=\"w-3 h-3 flex-shrink-0\" />\n      </button>\n\n      {open && (\n        <div\n          className=\"fixed w-64 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-bg-surface shadow-lg z-[100]\"\n          style={{ bottom: pos.bottom, left: pos.left }}\n        >\n          <input\n            type=\"text\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            placeholder=\"Search...\"\n            className=\"w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none sticky top-0 bg-bg-surface\"\n            autoFocus\n          />\n          {searchedGroups.map((group) => (\n            <div key={group.sdk}>\n              {group.models.length > 0 && (\n                <>\n                  <div className=\"px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary bg-bg-sunken\">\n                    {group.label}\n                  </div>\n                  {group.models.map((model) => (\n                    <button\n                      key={model}\n                      type=\"button\"\n                      onClick={() => {\n                        onChange(model);\n                        setOpen(false);\n                      }}\n                      className={`w-full text-left px-3 py-2 text-sm hover:bg-bg-elevated transition-colors ${\n                        model === value\n                          ? 'text-action-primary-text bg-action-primary-bg/10'\n                          : 'text-text-primary'\n                      }`}\n                    >\n                      {model}\n                    </button>\n                  ))}\n                </>\n              )}\n            </div>\n          ))}\n          {searchedGroups.every((g) => g.models.length === 0) && (\n            <div className=\"px-3 py-4 text-sm text-text-tertiary text-center\">\n              {tr('vibecontrols.agentManager.controls.noModelsAvailable', 'No models available')}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}