@openhands/agent-canvas 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/components/conversation-events/chat/event-message.js

@@ -1,114 +1,123 @@
 import { AgentState as e } from "../../../types/agent-state.js";
 import { useConversationStore as t } from "../../../stores/conversation-store.js";
-import { isACPToolCallEvent as n, isActionEvent as r, isAgentErrorEvent as i, isHookExecutionEvent as a, isObservationEvent as o, isPlanningFileEditorObservationEvent as s, isUserMessageEvent as c } from "../../../types/agent-server/type-guards.js";
-import { useAgentState as l } from "../../../hooks/use-agent-state.js";
-import { useConfig as u } from "../../../hooks/query/use-config.js";
-import { PlanPreview as d } from "../../features/chat/plan-preview.js";
-import { ErrorEventMessage as f } from "./event-message-components/error-event-message.js";
-import { UserAssistantEventMessage as p } from "./event-message-components/user-assistant-event-message.js";
-import { createSkillReadyEvent as m } from "./event-content-helpers/create-skill-ready-event.js";
-import { FinishEventMessage as h } from "./event-message-components/finish-event-message.js";
-import { GenericEventMessageWrapper as g } from "./event-message-components/generic-event-message-wrapper.js";
-import { ThoughtEventMessage as _ } from "./event-message-components/thought-event-message.js";
-import { CollapsibleThinking as v } from "./event-message-components/collapsible-thinking.js";
-import { HookExecutionEventMessage as y } from "../../shared/hook-execution-event-message.js";
+import { isACPToolCallEvent as n, isActionEvent as r, isAgentErrorEvent as i, isHookExecutionEvent as a, isObservationEvent as o, isPlanningFileEditorObservationEvent as s, isStreamingDeltaEvent as c, isUserMessageEvent as l } from "../../../types/agent-server/type-guards.js";
+import { useAgentState as u } from "../../../hooks/use-agent-state.js";
+import { useConfig as d } from "../../../hooks/query/use-config.js";
+import { ChatMessage as f } from "../../features/chat/chat-message.js";
+import { PlanPreview as p } from "../../features/chat/plan-preview.js";
+import { ErrorEventMessage as m } from "./event-message-components/error-event-message.js";
+import { UserAssistantEventMessage as h } from "./event-message-components/user-assistant-event-message.js";
+import { createSkillReadyEvent as g } from "./event-content-helpers/create-skill-ready-event.js";
+import { FinishEventMessage as _ } from "./event-message-components/finish-event-message.js";
+import { GenericEventMessageWrapper as v } from "./event-message-components/generic-event-message-wrapper.js";
+import { ThoughtEventMessage as y } from "./event-message-components/thought-event-message.js";
+import { CollapsibleThinking as b } from "./event-message-components/collapsible-thinking.js";
+import { HookExecutionEventMessage as x } from "../../shared/hook-execution-event-message.js";
 import "./event-message-components/hook-execution-event-message.js";
-import { shouldShowPlanPreview as b } from "./hooks/use-plan-preview-events.js";
-import { getReasoningContent as x } from "./event-thought-helpers.js";
+import { shouldShowPlanPreview as S } from "./hooks/use-plan-preview-events.js";
+import { getReasoningContent as C } from "./event-thought-helpers.js";
 import "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/components/conversation-events/chat/event-message.tsx
-var T = (e) => e.activated_skills || e.activated_microagents || [], E = (e) => !e || e.length === 0 ? !1 : e.some((e) => e.type === "text" && e.text.trim().length > 0), D = (e) => {
-	let t = T(e).length > 0, n = E(e.extended_content);
+var D = (e) => e.activated_skills || e.activated_microagents || [], O = (e) => !e || e.length === 0 ? !1 : e.some((e) => e.type === "text" && e.text.trim().length > 0), k = (e) => {
+	let t = D(e).length > 0, n = O(e.extended_content);
 	return t && n;
-}, O = (e, t, n) => {
+}, A = (e, t, n) => {
 	try {
-		let r = m(e);
-		return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(p, {
+		let r = g(e);
+		return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(h, {
 			event: e,
 			isLastMessage: !1,
 			isFromPlanningAgent: t.isFromPlanningAgent
-		}), /* @__PURE__ */ C(g, {
+		}), /* @__PURE__ */ T(v, {
 			event: r,
 			isLastMessage: n
 		})] });
 	} catch {
-		return /* @__PURE__ */ C(p, {
+		return /* @__PURE__ */ T(h, {
 			event: e,
 			isLastMessage: n,
 			isFromPlanningAgent: t.isFromPlanningAgent
 		});
 	}
 };
-function k({ event: m, messages: T, isLastMessage: E, isInLast10Actions: k, planPreviewEventIds: A, suppressThought: j = !1 }) {
-	let { data: M } = u(), { planContent: N } = t(), { curAgentState: P } = l(), F = P === e.RUNNING || P === e.LOADING, I = m.isFromPlanningAgent || !1, L = {
-		isLastMessage: E,
-		isInLast10Actions: k,
-		config: M,
-		isFromPlanningAgent: I
+function j({ event: g, messages: D, isLastMessage: O, isInLast10Actions: j, planPreviewEventIds: M, suppressThought: N = !1 }) {
+	let { data: P } = d(), { planContent: F } = t(), { curAgentState: I } = u(), L = I === e.RUNNING || I === e.LOADING, R = g.isFromPlanningAgent || !1, z = {
+		isLastMessage: O,
+		isInLast10Actions: j,
+		config: P,
+		isFromPlanningAgent: R
 	};
-	if (i(m)) return /* @__PURE__ */ C(f, {
-		event: m,
-		...L
+	if (i(g)) return /* @__PURE__ */ T(m, {
+		event: g,
+		...z
 	});
-	if (a(m)) return /* @__PURE__ */ C(y, { event: m });
-	if (n(m)) return /* @__PURE__ */ C(g, {
-		event: m,
-		isLastMessage: E
+	if (a(g)) return /* @__PURE__ */ T(x, { event: g });
+	if (n(g)) return /* @__PURE__ */ T(v, {
+		event: g,
+		isLastMessage: O
 	});
-	if (r(m) && m.action.kind === "FinishAction") return /* @__PURE__ */ C(h, {
-		event: m,
-		...L
+	if (c(g)) {
+		let e = g.content ?? "", t = g.reasoning_content ?? "";
+		return /* @__PURE__ */ E(w, { children: [t && /* @__PURE__ */ T(b, { content: t }), e && /* @__PURE__ */ T(f, {
+			type: "agent",
+			message: e,
+			isFromPlanningAgent: R
+		})] });
+	}
+	if (r(g) && g.action.kind === "FinishAction") return /* @__PURE__ */ T(_, {
+		event: g,
+		...z
 	});
-	if (r(m) && m.action.kind === "ThinkAction") return /* @__PURE__ */ C(v, { content: m.action.thought });
-	if (r(m)) {
-		let e = x(m);
-		return /* @__PURE__ */ w(S, { children: [
-			e && /* @__PURE__ */ C(v, { content: e }),
-			!j && /* @__PURE__ */ C(_, {
-				event: m,
-				isFromPlanningAgent: I
+	if (r(g) && g.action.kind === "ThinkAction") return /* @__PURE__ */ T(b, { content: g.action.thought });
+	if (r(g)) {
+		let e = C(g);
+		return /* @__PURE__ */ E(w, { children: [
+			e && /* @__PURE__ */ T(b, { content: e }),
+			!N && /* @__PURE__ */ T(y, {
+				event: g,
+				isFromPlanningAgent: R
 			}),
-			/* @__PURE__ */ C(g, {
-				event: m,
-				isLastMessage: E
+			/* @__PURE__ */ T(v, {
+				event: g,
+				isLastMessage: O
 			})
 		] });
 	}
-	if (o(m)) {
-		if (s(m)) return A && b(m.id, A) ? /* @__PURE__ */ C(d, {
-			planContent: N,
-			isStreaming: E && P === e.RUNNING,
-			isBuildDisabled: F
+	if (o(g)) {
+		if (s(g)) return M && S(g.id, M) ? /* @__PURE__ */ T(p, {
+			planContent: F,
+			isStreaming: O && I === e.RUNNING,
+			isBuildDisabled: L
 		}) : null;
-		let t = T.find((e) => r(e) && e.id === m.action_id), n = !j && t && r(t) && t.action.kind !== "ThinkAction", i = t && r(t) ? x(t) : "";
-		return /* @__PURE__ */ w(S, { children: [
-			i && /* @__PURE__ */ C(v, { content: i }),
-			n && /* @__PURE__ */ C(_, {
+		let t = D.find((e) => r(e) && e.id === g.action_id), n = !N && t && r(t) && t.action.kind !== "ThinkAction", i = t && r(t) ? C(t) : "";
+		return /* @__PURE__ */ E(w, { children: [
+			i && /* @__PURE__ */ T(b, { content: i }),
+			n && /* @__PURE__ */ T(y, {
 				event: t,
-				isFromPlanningAgent: I
+				isFromPlanningAgent: R
 			}),
-			/* @__PURE__ */ C(g, {
-				event: m,
-				isLastMessage: E,
+			/* @__PURE__ */ T(v, {
+				event: g,
+				isLastMessage: O,
 				correspondingAction: t && r(t) ? t : void 0
 			})
 		] });
 	}
-	if (!r(m) && !o(m)) {
-		let e = m;
-		return c(m) && D(e) ? O(e, L, E) : /* @__PURE__ */ C(p, {
+	if (!r(g) && !o(g)) {
+		let e = g;
+		return l(g) && k(e) ? A(e, z, O) : /* @__PURE__ */ T(h, {
 			event: e,
-			...L,
-			isLastMessage: E
+			...z,
+			isLastMessage: O
 		});
 	}
-	return /* @__PURE__ */ C(g, {
-		event: m,
-		isLastMessage: E
+	return /* @__PURE__ */ T(v, {
+		event: g,
+		isLastMessage: O
 	});
 }
 //#endregion
-export { k as EventMessage };
+export { j as EventMessage };
 
 //# sourceMappingURL=event-message.js.map

package/dist/components/conversation-events/chat/event-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-message.js","names":[],"sources":["../../../../src/components/conversation-events/chat/event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  OpenHandsEvent,\n  MessageEvent,\n  ActionEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  FinishAction,\n  ThinkAction,\n} from \"#/types/agent-server/core/base/action\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n  isAgentErrorEvent,\n  isUserMessageEvent,\n  isPlanningFileEditorObservationEvent,\n  isHookExecutionEvent,\n  isACPToolCallEvent,\n} from \"#/types/agent-server/type-guards\";\nimport { useConfig } from \"#/hooks/query/use-config\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { PlanPreview } from \"../../features/chat/plan-preview\";\nimport { ErrorEventMessage } from \"./event-message-components/error-event-message\";\nimport { UserAssistantEventMessage } from \"./event-message-components/user-assistant-event-message\";\nimport { FinishEventMessage } from \"./event-message-components/finish-event-message\";\nimport { GenericEventMessageWrapper } from \"./event-message-components/generic-event-message-wrapper\";\nimport { ThoughtEventMessage } from \"./event-message-components/thought-event-message\";\nimport { CollapsibleThinking } from \"./event-message-components/collapsible-thinking\";\nimport { HookExecutionEventMessage } from \"./event-message-components/hook-execution-event-message\";\nimport { createSkillReadyEvent } from \"./event-content-helpers/create-skill-ready-event\";\nimport { shouldShowPlanPreview } from \"./hooks/use-plan-preview-events\";\nimport { getReasoningContent } from \"./event-thought-helpers\";\n\ninterface EventMessageProps {\n  event: OpenHandsEvent & { isFromPlanningAgent?: boolean };\n  messages: OpenHandsEvent[];\n  isLastMessage: boolean;\n  isInLast10Actions: boolean;\n  /** Set of event IDs that should render PlanPreview (one per user message phase) */\n  planPreviewEventIds?: Set<string>;\n  /**\n   * When true, do not render the inline `ThoughtEventMessage` for action /\n   * observation events. The caller is expected to render the thought\n   * separately (e.g. via a hoisted \"thought\" rendered item) so the message\n   * pane and the in-group rendering don't double up on the same content.\n   * Has no effect on `ThinkAction`, whose thought IS its action body.\n   */\n  suppressThought?: boolean;\n}\n\n/**\n * Extracts activated skills from a MessageEvent, supporting both\n * activated_skills and activated_microagents field names.\n */\nconst getActivatedSkills = (event: MessageEvent): string[] =>\n  (event as unknown as { activated_skills?: string[] }).activated_skills ||\n  event.activated_microagents ||\n  [];\n\n/**\n * Checks if extended content contains valid text content.\n */\nconst hasValidExtendedContent = (\n  extendedContent: MessageEvent[\"extended_content\"],\n): boolean => {\n  if (!extendedContent || extendedContent.length === 0) {\n    return false;\n  }\n\n  return extendedContent.some(\n    (content) => content.type === \"text\" && content.text.trim().length > 0,\n  );\n};\n\n/**\n * Determines if a Skill Ready event should be displayed for the given message event.\n */\nconst shouldShowSkillReadyEvent = (messageEvent: MessageEvent): boolean => {\n  const activatedSkills = getActivatedSkills(messageEvent);\n  const hasActivatedSkills = activatedSkills.length > 0;\n  const hasExtendedContent = hasValidExtendedContent(\n    messageEvent.extended_content,\n  );\n\n  return hasActivatedSkills && hasExtendedContent;\n};\n\ninterface CommonProps {\n  isLastMessage: boolean;\n  isInLast10Actions: boolean;\n  config: unknown;\n  isFromPlanningAgent: boolean;\n}\n\n/**\n * Renders a user message with its corresponding Skill Ready event.\n */\nconst renderUserMessageWithSkillReady = (\n  messageEvent: MessageEvent,\n  commonProps: CommonProps,\n  isLastMessage: boolean,\n): React.ReactElement => {\n  try {\n    const skillReadyEvent = createSkillReadyEvent(messageEvent);\n    return (\n      <>\n        <UserAssistantEventMessage\n          event={messageEvent}\n          isLastMessage={false}\n          isFromPlanningAgent={commonProps.isFromPlanningAgent}\n        />\n        <GenericEventMessageWrapper\n          event={skillReadyEvent}\n          isLastMessage={isLastMessage}\n        />\n      </>\n    );\n  } catch (error) {\n    // If skill ready event creation fails, just render the user message\n    return (\n      <UserAssistantEventMessage\n        event={messageEvent}\n        isLastMessage={isLastMessage}\n        isFromPlanningAgent={commonProps.isFromPlanningAgent}\n      />\n    );\n  }\n};\n\nexport function EventMessage({\n  event,\n  messages,\n  isLastMessage,\n  isInLast10Actions,\n  planPreviewEventIds,\n  suppressThought = false,\n}: EventMessageProps) {\n  const { data: config } = useConfig();\n  const { planContent } = useConversationStore();\n  const { curAgentState } = useAgentState();\n\n  // Disable Build button while agent is running (streaming)\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n\n  // Read isFromPlanningAgent directly from the event object\n  const isFromPlanningAgent = event.isFromPlanningAgent || false;\n\n  // Common props for components that need them\n  const commonProps = {\n    isLastMessage,\n    isInLast10Actions,\n    config,\n    isFromPlanningAgent,\n  };\n\n  // Agent error events\n  if (isAgentErrorEvent(event)) {\n    return <ErrorEventMessage event={event} {...commonProps} />;\n  }\n\n  // Hook execution events\n  if (isHookExecutionEvent(event)) {\n    return <HookExecutionEventMessage event={event} />;\n  }\n\n  // ACP sub-agent tool call events (Claude Code, Codex, Gemini CLI, …)\n  // render through the same generic wrapper used for observation events so\n  // the card shape, success indicator and markdown rendering all match.\n  if (isACPToolCallEvent(event)) {\n    return (\n      <GenericEventMessageWrapper event={event} isLastMessage={isLastMessage} />\n    );\n  }\n\n  // Finish actions\n  if (isActionEvent(event) && event.action.kind === \"FinishAction\") {\n    return (\n      <FinishEventMessage\n        event={event as ActionEvent<FinishAction>}\n        {...commonProps}\n      />\n    );\n  }\n\n  // ThinkAction - render the thought inside a collapsible section so it\n  // doesn't dominate the chat, especially when the thinking language\n  // (usually English) differs from the conversation language.\n  if (isActionEvent(event) && event.action.kind === \"ThinkAction\") {\n    const thinkAction = event as ActionEvent<ThinkAction>;\n    return <CollapsibleThinking content={thinkAction.action.thought} />;\n  }\n\n  // Action events - render thought + action (will be replaced by thought + observation)\n  if (isActionEvent(event)) {\n    const reasoningContent = getReasoningContent(event);\n    return (\n      <>\n        {reasoningContent && <CollapsibleThinking content={reasoningContent} />}\n        {!suppressThought && (\n          <ThoughtEventMessage\n            event={event}\n            isFromPlanningAgent={isFromPlanningAgent}\n          />\n        )}\n        <GenericEventMessageWrapper\n          event={event}\n          isLastMessage={isLastMessage}\n        />\n      </>\n    );\n  }\n\n  // Observation events - find the corresponding action and render thought + observation\n  if (isObservationEvent(event)) {\n    // Handle PlanningFileEditorObservation specially\n    if (isPlanningFileEditorObservationEvent(event)) {\n      // Only show PlanPreview if this event is marked as the one to display\n      // (last PlanningFileEditorObservation in its phase)\n      if (\n        planPreviewEventIds &&\n        shouldShowPlanPreview(event.id, planPreviewEventIds)\n      ) {\n        // Show shine effect only if this is the last message AND agent is running\n        const isStreaming =\n          isLastMessage && curAgentState === AgentState.RUNNING;\n        return (\n          <PlanPreview\n            planContent={planContent}\n            isStreaming={isStreaming}\n            isBuildDisabled={isAgentRunning}\n          />\n        );\n      }\n      // Not the designated preview event for this phase - render nothing\n      // This prevents duplicate previews within the same phase\n      return null;\n    }\n\n    // Find the action that this observation is responding to\n    const correspondingAction = messages.find(\n      (msg) => isActionEvent(msg) && msg.id === event.action_id,\n    );\n\n    // Skip ThoughtEventMessage for ThinkAction (thought IS the action)\n    const shouldShowThought =\n      !suppressThought &&\n      correspondingAction &&\n      isActionEvent(correspondingAction) &&\n      correspondingAction.action.kind !== \"ThinkAction\";\n\n    const reasoningContent =\n      correspondingAction && isActionEvent(correspondingAction)\n        ? getReasoningContent(correspondingAction)\n        : \"\";\n\n    return (\n      <>\n        {reasoningContent && <CollapsibleThinking content={reasoningContent} />}\n        {shouldShowThought && (\n          <ThoughtEventMessage\n            event={correspondingAction}\n            isFromPlanningAgent={isFromPlanningAgent}\n          />\n        )}\n        <GenericEventMessageWrapper\n          event={event}\n          isLastMessage={isLastMessage}\n          correspondingAction={\n            correspondingAction && isActionEvent(correspondingAction)\n              ? correspondingAction\n              : undefined\n          }\n        />\n      </>\n    );\n  }\n\n  // Message events (user and assistant messages)\n  if (!isActionEvent(event) && !isObservationEvent(event)) {\n    const messageEvent = event as MessageEvent;\n\n    // Check if this is a user message that should display a Skill Ready event\n    if (isUserMessageEvent(event) && shouldShowSkillReadyEvent(messageEvent)) {\n      return renderUserMessageWithSkillReady(\n        messageEvent,\n        commonProps,\n        isLastMessage,\n      );\n    }\n\n    // Render normal message event (user or assistant)\n    return (\n      <UserAssistantEventMessage\n        event={messageEvent}\n        {...commonProps}\n        isLastMessage={isLastMessage}\n      />\n    );\n  }\n\n  // Generic fallback for all other events\n  return (\n    <GenericEventMessageWrapper event={event} isLastMessage={isLastMessage} />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"event-message.js","names":[],"sources":["../../../../src/components/conversation-events/chat/event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  OpenHandsEvent,\n  MessageEvent,\n  ActionEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  FinishAction,\n  ThinkAction,\n} from \"#/types/agent-server/core/base/action\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n  isAgentErrorEvent,\n  isUserMessageEvent,\n  isPlanningFileEditorObservationEvent,\n  isHookExecutionEvent,\n  isACPToolCallEvent,\n  isStreamingDeltaEvent,\n} from \"#/types/agent-server/type-guards\";\nimport { useConfig } from \"#/hooks/query/use-config\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { ChatMessage } from \"#/components/features/chat/chat-message\";\nimport { PlanPreview } from \"../../features/chat/plan-preview\";\nimport { ErrorEventMessage } from \"./event-message-components/error-event-message\";\nimport { UserAssistantEventMessage } from \"./event-message-components/user-assistant-event-message\";\nimport { FinishEventMessage } from \"./event-message-components/finish-event-message\";\nimport { GenericEventMessageWrapper } from \"./event-message-components/generic-event-message-wrapper\";\nimport { ThoughtEventMessage } from \"./event-message-components/thought-event-message\";\nimport { CollapsibleThinking } from \"./event-message-components/collapsible-thinking\";\nimport { HookExecutionEventMessage } from \"./event-message-components/hook-execution-event-message\";\nimport { createSkillReadyEvent } from \"./event-content-helpers/create-skill-ready-event\";\nimport { shouldShowPlanPreview } from \"./hooks/use-plan-preview-events\";\nimport { getReasoningContent } from \"./event-thought-helpers\";\n\ninterface EventMessageProps {\n  event: OpenHandsEvent & { isFromPlanningAgent?: boolean };\n  messages: OpenHandsEvent[];\n  isLastMessage: boolean;\n  isInLast10Actions: boolean;\n  /** Set of event IDs that should render PlanPreview (one per user message phase) */\n  planPreviewEventIds?: Set<string>;\n  /**\n   * When true, do not render the inline `ThoughtEventMessage` for action /\n   * observation events. The caller is expected to render the thought\n   * separately (e.g. via a hoisted \"thought\" rendered item) so the message\n   * pane and the in-group rendering don't double up on the same content.\n   * Has no effect on `ThinkAction`, whose thought IS its action body.\n   */\n  suppressThought?: boolean;\n}\n\n/**\n * Extracts activated skills from a MessageEvent, supporting both\n * activated_skills and activated_microagents field names.\n */\nconst getActivatedSkills = (event: MessageEvent): string[] =>\n  (event as unknown as { activated_skills?: string[] }).activated_skills ||\n  event.activated_microagents ||\n  [];\n\n/**\n * Checks if extended content contains valid text content.\n */\nconst hasValidExtendedContent = (\n  extendedContent: MessageEvent[\"extended_content\"],\n): boolean => {\n  if (!extendedContent || extendedContent.length === 0) {\n    return false;\n  }\n\n  return extendedContent.some(\n    (content) => content.type === \"text\" && content.text.trim().length > 0,\n  );\n};\n\n/**\n * Determines if a Skill Ready event should be displayed for the given message event.\n */\nconst shouldShowSkillReadyEvent = (messageEvent: MessageEvent): boolean => {\n  const activatedSkills = getActivatedSkills(messageEvent);\n  const hasActivatedSkills = activatedSkills.length > 0;\n  const hasExtendedContent = hasValidExtendedContent(\n    messageEvent.extended_content,\n  );\n\n  return hasActivatedSkills && hasExtendedContent;\n};\n\ninterface CommonProps {\n  isLastMessage: boolean;\n  isInLast10Actions: boolean;\n  config: unknown;\n  isFromPlanningAgent: boolean;\n}\n\n/**\n * Renders a user message with its corresponding Skill Ready event.\n */\nconst renderUserMessageWithSkillReady = (\n  messageEvent: MessageEvent,\n  commonProps: CommonProps,\n  isLastMessage: boolean,\n): React.ReactElement => {\n  try {\n    const skillReadyEvent = createSkillReadyEvent(messageEvent);\n    return (\n      <>\n        <UserAssistantEventMessage\n          event={messageEvent}\n          isLastMessage={false}\n          isFromPlanningAgent={commonProps.isFromPlanningAgent}\n        />\n        <GenericEventMessageWrapper\n          event={skillReadyEvent}\n          isLastMessage={isLastMessage}\n        />\n      </>\n    );\n  } catch (error) {\n    // If skill ready event creation fails, just render the user message\n    return (\n      <UserAssistantEventMessage\n        event={messageEvent}\n        isLastMessage={isLastMessage}\n        isFromPlanningAgent={commonProps.isFromPlanningAgent}\n      />\n    );\n  }\n};\n\nexport function EventMessage({\n  event,\n  messages,\n  isLastMessage,\n  isInLast10Actions,\n  planPreviewEventIds,\n  suppressThought = false,\n}: EventMessageProps) {\n  const { data: config } = useConfig();\n  const { planContent } = useConversationStore();\n  const { curAgentState } = useAgentState();\n\n  // Disable Build button while agent is running (streaming)\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n\n  // Read isFromPlanningAgent directly from the event object\n  const isFromPlanningAgent = event.isFromPlanningAgent || false;\n\n  // Common props for components that need them\n  const commonProps = {\n    isLastMessage,\n    isInLast10Actions,\n    config,\n    isFromPlanningAgent,\n  };\n\n  // Agent error events\n  if (isAgentErrorEvent(event)) {\n    return <ErrorEventMessage event={event} {...commonProps} />;\n  }\n\n  // Hook execution events\n  if (isHookExecutionEvent(event)) {\n    return <HookExecutionEventMessage event={event} />;\n  }\n\n  // ACP sub-agent tool call events (Claude Code, Codex, Gemini CLI, …)\n  // render through the same generic wrapper used for observation events so\n  // the card shape, success indicator and markdown rendering all match.\n  if (isACPToolCallEvent(event)) {\n    return (\n      <GenericEventMessageWrapper event={event} isLastMessage={isLastMessage} />\n    );\n  }\n\n  if (isStreamingDeltaEvent(event)) {\n    const content = event.content ?? \"\";\n    const reasoningContent = event.reasoning_content ?? \"\";\n    return (\n      <>\n        {reasoningContent && <CollapsibleThinking content={reasoningContent} />}\n        {content && (\n          <ChatMessage\n            type=\"agent\"\n            message={content}\n            isFromPlanningAgent={isFromPlanningAgent}\n          />\n        )}\n      </>\n    );\n  }\n\n  // Finish actions\n  if (isActionEvent(event) && event.action.kind === \"FinishAction\") {\n    return (\n      <FinishEventMessage\n        event={event as ActionEvent<FinishAction>}\n        {...commonProps}\n      />\n    );\n  }\n\n  // ThinkAction - render the thought inside a collapsible section so it\n  // doesn't dominate the chat, especially when the thinking language\n  // (usually English) differs from the conversation language.\n  if (isActionEvent(event) && event.action.kind === \"ThinkAction\") {\n    const thinkAction = event as ActionEvent<ThinkAction>;\n    return <CollapsibleThinking content={thinkAction.action.thought} />;\n  }\n\n  // Action events - render thought + action (will be replaced by thought + observation)\n  if (isActionEvent(event)) {\n    const reasoningContent = getReasoningContent(event);\n    return (\n      <>\n        {reasoningContent && <CollapsibleThinking content={reasoningContent} />}\n        {!suppressThought && (\n          <ThoughtEventMessage\n            event={event}\n            isFromPlanningAgent={isFromPlanningAgent}\n          />\n        )}\n        <GenericEventMessageWrapper\n          event={event}\n          isLastMessage={isLastMessage}\n        />\n      </>\n    );\n  }\n\n  // Observation events - find the corresponding action and render thought + observation\n  if (isObservationEvent(event)) {\n    // Handle PlanningFileEditorObservation specially\n    if (isPlanningFileEditorObservationEvent(event)) {\n      // Only show PlanPreview if this event is marked as the one to display\n      // (last PlanningFileEditorObservation in its phase)\n      if (\n        planPreviewEventIds &&\n        shouldShowPlanPreview(event.id, planPreviewEventIds)\n      ) {\n        // Show shine effect only if this is the last message AND agent is running\n        const isStreaming =\n          isLastMessage && curAgentState === AgentState.RUNNING;\n        return (\n          <PlanPreview\n            planContent={planContent}\n            isStreaming={isStreaming}\n            isBuildDisabled={isAgentRunning}\n          />\n        );\n      }\n      // Not the designated preview event for this phase - render nothing\n      // This prevents duplicate previews within the same phase\n      return null;\n    }\n\n    // Find the action that this observation is responding to\n    const correspondingAction = messages.find(\n      (msg) => isActionEvent(msg) && msg.id === event.action_id,\n    );\n\n    // Skip ThoughtEventMessage for ThinkAction (thought IS the action)\n    const shouldShowThought =\n      !suppressThought &&\n      correspondingAction &&\n      isActionEvent(correspondingAction) &&\n      correspondingAction.action.kind !== \"ThinkAction\";\n\n    const reasoningContent =\n      correspondingAction && isActionEvent(correspondingAction)\n        ? getReasoningContent(correspondingAction)\n        : \"\";\n\n    return (\n      <>\n        {reasoningContent && <CollapsibleThinking content={reasoningContent} />}\n        {shouldShowThought && (\n          <ThoughtEventMessage\n            event={correspondingAction}\n            isFromPlanningAgent={isFromPlanningAgent}\n          />\n        )}\n        <GenericEventMessageWrapper\n          event={event}\n          isLastMessage={isLastMessage}\n          correspondingAction={\n            correspondingAction && isActionEvent(correspondingAction)\n              ? correspondingAction\n              : undefined\n          }\n        />\n      </>\n    );\n  }\n\n  // Message events (user and assistant messages)\n  if (!isActionEvent(event) && !isObservationEvent(event)) {\n    const messageEvent = event as MessageEvent;\n\n    // Check if this is a user message that should display a Skill Ready event\n    if (isUserMessageEvent(event) && shouldShowSkillReadyEvent(messageEvent)) {\n      return renderUserMessageWithSkillReady(\n        messageEvent,\n        commonProps,\n        isLastMessage,\n      );\n    }\n\n    // Render normal message event (user or assistant)\n    return (\n      <UserAssistantEventMessage\n        event={messageEvent}\n        {...commonProps}\n        isLastMessage={isLastMessage}\n      />\n    );\n  }\n\n  // Generic fallback for all other events\n  return (\n    <GenericEventMessageWrapper event={event} isLastMessage={isLastMessage} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,KAAsB,MACzB,EAAqD,oBACtD,EAAM,yBACN,EAAE,EAKE,KACJ,MAEI,CAAC,KAAmB,EAAgB,WAAW,IAC1C,KAGF,EAAgB,MACpB,MAAY,EAAQ,SAAS,UAAU,EAAQ,KAAK,MAAM,CAAC,SAAS,EACtE,EAMG,KAA6B,MAAwC;CAEzE,IAAM,IADkB,EAAmB,EAChB,CAAgB,SAAS,GAC9C,IAAqB,EACzB,EAAa,iBACd;AAED,QAAO,KAAsB;GAazB,KACJ,GACA,GACA,MACuB;AACvB,KAAI;EACF,IAAM,IAAkB,EAAsB,EAAa;AAC3D,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,OAAO;GACP,eAAe;GACf,qBAAqB,EAAY;GACjC,CAAA,EACF,kBAAC,GAAD;GACE,OAAO;GACQ;GACf,CAAA,CACD,EAAA,CAAA;SAES;AAEd,SACE,kBAAC,GAAD;GACE,OAAO;GACQ;GACf,qBAAqB,EAAY;GACjC,CAAA;;;AAKR,SAAgB,EAAa,EAC3B,UACA,aACA,kBACA,sBACA,wBACA,qBAAkB,MACE;CACpB,IAAM,EAAE,MAAM,MAAW,GAAW,EAC9B,EAAE,mBAAgB,GAAsB,EACxC,EAAE,qBAAkB,GAAe,EAGnC,IACJ,MAAkB,EAAW,WAC7B,MAAkB,EAAW,SAGzB,IAAsB,EAAM,uBAAuB,IAGnD,IAAc;EAClB;EACA;EACA;EACA;EACD;AAGD,KAAI,EAAkB,EAAM,CAC1B,QAAO,kBAAC,GAAD;EAA0B;EAAO,GAAI;EAAe,CAAA;AAI7D,KAAI,EAAqB,EAAM,CAC7B,QAAO,kBAAC,GAAD,EAAkC,UAAS,CAAA;AAMpD,KAAI,EAAmB,EAAM,CAC3B,QACE,kBAAC,GAAD;EAAmC;EAAsB;EAAiB,CAAA;AAI9E,KAAI,EAAsB,EAAM,EAAE;EAChC,IAAM,IAAU,EAAM,WAAW,IAC3B,IAAmB,EAAM,qBAAqB;AACpD,SACE,kBAAA,GAAA,EAAA,UAAA,CACG,KAAoB,kBAAC,GAAD,EAAqB,SAAS,GAAoB,CAAA,EACtE,KACC,kBAAC,GAAD;GACE,MAAK;GACL,SAAS;GACY;GACrB,CAAA,CAEH,EAAA,CAAA;;AAKP,KAAI,EAAc,EAAM,IAAI,EAAM,OAAO,SAAS,eAChD,QACE,kBAAC,GAAD;EACS;EACP,GAAI;EACJ,CAAA;AAON,KAAI,EAAc,EAAM,IAAI,EAAM,OAAO,SAAS,cAEhD,QAAO,kBAAC,GAAD,EAAqB,SAAS,EAAY,OAAO,SAAW,CAAA;AAIrE,KAAI,EAAc,EAAM,EAAE;EACxB,IAAM,IAAmB,EAAoB,EAAM;AACnD,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,KAAoB,kBAAC,GAAD,EAAqB,SAAS,GAAoB,CAAA;GACtE,CAAC,KACA,kBAAC,GAAD;IACS;IACc;IACrB,CAAA;GAEJ,kBAAC,GAAD;IACS;IACQ;IACf,CAAA;GACD,EAAA,CAAA;;AAKP,KAAI,EAAmB,EAAM,EAAE;AAE7B,MAAI,EAAqC,EAAM,CAoB7C,QAhBE,KACA,EAAsB,EAAM,IAAI,EAAoB,GAMlD,kBAAC,GAAD;GACe;GACA,aAJf,KAAiB,MAAkB,EAAW;GAK5C,iBAAiB;GACjB,CAAA,GAKC;EAIT,IAAM,IAAsB,EAAS,MAClC,MAAQ,EAAc,EAAI,IAAI,EAAI,OAAO,EAAM,UACjD,EAGK,IACJ,CAAC,KACD,KACA,EAAc,EAAoB,IAClC,EAAoB,OAAO,SAAS,eAEhC,IACJ,KAAuB,EAAc,EAAoB,GACrD,EAAoB,EAAoB,GACxC;AAEN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,KAAoB,kBAAC,GAAD,EAAqB,SAAS,GAAoB,CAAA;GACtE,KACC,kBAAC,GAAD;IACE,OAAO;IACc;IACrB,CAAA;GAEJ,kBAAC,GAAD;IACS;IACQ;IACf,qBACE,KAAuB,EAAc,EAAoB,GACrD,IACA,KAAA;IAEN,CAAA;GACD,EAAA,CAAA;;AAKP,KAAI,CAAC,EAAc,EAAM,IAAI,CAAC,EAAmB,EAAM,EAAE;EACvD,IAAM,IAAe;AAYrB,SATI,EAAmB,EAAM,IAAI,EAA0B,EAAa,GAC/D,EACL,GACA,GACA,EACD,GAKD,kBAAC,GAAD;GACE,OAAO;GACP,GAAI;GACW;GACf,CAAA;;AAKN,QACE,kBAAC,GAAD;EAAmC;EAAsB;EAAiB,CAAA"}

package/dist/components/features/automations/recommended-automations-launcher.d.ts

@@ -4,6 +4,12 @@ interface RecommendedAutomationsLauncherProps {
     /** When true, only the automation card grid scrolls inside its section. */
     scrollableGrid?: boolean;
 }
-export declare function buildAutomationPrompt(basePrompt: string, backendKind: "local" | "cloud", backendHost?: string): string;
+/**
+ * The catalog prompt (or slash command) is passed through as-is.
+ * API routing (host, auth) is discovered by the agent at runtime from
+ * `<RUNTIME_SERVICES>` in the system prompt — the skills themselves
+ * contain the instructions for reading that block.
+ */
+export declare function buildAutomationPrompt(basePrompt: string): string;
 export declare function RecommendedAutomationsLauncher({ query, onLaunched, scrollableGrid, }: RecommendedAutomationsLauncherProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/features/home/workspace-selection-form.d.ts

@@ -10,5 +10,6 @@ interface WorkspaceSelectionFormProps {
      */
     onConfirm?: (workspace: LocalWorkspace) => void;
 }
+export declare const HOME_SELECTED_WORKSPACE_PATH_KEY = "oh:home-selected-workspace-path";
 export declare function WorkspaceSelectionForm({ isLoadingSettings, onConfirm, }: WorkspaceSelectionFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/onboarding/steps/setup-llm-step.d.ts

@@ -2,6 +2,14 @@ interface SetupLlmStepProps {
     onBack: () => void;
     onNext: () => void;
 }
+/**
+ * Pre-fills the LLM form with the OpenAI GPT-5.5 model. The SDK's
+ * bare default model is `gpt-5.5`; Canvas stores provider-qualified
+ * LiteLLM model ids, so the onboarding override uses this OpenAI-prefixed
+ * model id. Keeping this as an explicit override marks the model dirty so
+ * the Next button persists the suggested default immediately.
+ */
+export declare const ONBOARDING_DEFAULT_LLM_MODEL = "openai/gpt-5.5";
 /**
  * Step 2: embed the LLM settings form. The screen runs in `embedded`
  * mode (so it doesn't render its own sticky Save bar) and with

package/dist/components/features/sidebar/sidebar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../context/navigation-context.cjs`),a=require(`../../../contexts/active-backend-context.cjs`),o=require(`../../../utils/custom-toast-handlers.cjs`),s=require(`../../../hooks/query/use-settings.cjs`),c=require(`../../../hooks/use-click-outside-element.cjs`),l=require(`../../../hooks/query/use-config.cjs`),ee=require(`./sidebar-mobile-nav-context.cjs`),u=require(`../../../stores/sidebar-store.cjs`),d=require(`../../../hooks/query/use-backends-health.cjs`),f=require(`./sidebar-rail-body.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);var h=p.default.lazy(()=>Promise.resolve().then(()=>require(`../../shared/modals/settings/settings-modal.cjs`)).then(e=>({default:e.SettingsModal}))),g=p.default.lazy(()=>Promise.resolve().then(()=>require(`../backends/add-backend-modal.cjs`)).then(e=>({default:e.AddBackendModal}))),_=p.default.lazy(()=>Promise.resolve().then(()=>require(`../backends/manage-backends-modal.cjs`)).then(e=>({default:e.ManageBackendsModal}))),v=250;function y(){let{t:e}=t.useTranslation(`openhands`),{currentPath:y}=i.useNavigation(),{data:b}=l.useConfig(),{data:x,error:S,isError:C,isFetching:w}=s.useSettings(),{backends:T,active:E}=a.useActiveBackendContext(),D=d.useBackendsHealth(T)[E.backend.id],O=u.useSidebarStore(e=>e.collapsed),k=u.useSidebarStore(e=>e.setCollapsed),[A,j]=p.default.useState(!1),[M,N]=p.default.useState(!1),P=p.default.useRef(null),[F,I]=p.default.useState(!1),[L,R]=p.default.useState(!1),[z,B]=p.default.useState(!1),V=p.default.useRef(!1),[,H]=p.default.useReducer(e=>e+1,0),{isOpen:U,close:W}=ee.useSidebarMobileNav(),[G,K]=p.default.useState(!1),[q,J]=p.default.useState(!1),Y=c.useClickOutsideElement(()=>N(!1)),X=s.getErrorStatus(S);p.default.useEffect(()=>{W()},[y,W]),p.default.useEffect(()=>{if(U){K(!0);let e=requestAnimationFrame(()=>{J(!0)});return()=>cancelAnimationFrame(e)}J(!1);let e=window.setTimeout(()=>{K(!1)},v);return()=>window.clearTimeout(e)},[U]),p.default.useEffect(()=>{if(!U)return;let e=e=>{e.key===`Escape`&&W()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[U,W]),p.default.useEffect(()=>{y===`/settings`?j(!1):!w&&C&&X!==404?o.displayErrorToast(`Something went wrong while fetching settings. Please reload the page.`):X===404&&!b?.feature_flags?.hide_llm_settings&&j(!0)},[y,w,C,X,b?.feature_flags?.hide_llm_settings]);let Z=x?.email_verified===!1,Q=e(O?n.I18nKey.SIDEBAR$EXPAND:n.I18nKey.SIDEBAR$COLLAPSE),te=p.default.useCallback(e=>{if(!O)return;let t=e.target;t instanceof HTMLElement&&(t.closest(`a,button,input,textarea,select,[role='button'],[role='link']`)||k(!1))},[O,k]),$={linkDisabled:Z,collapseToggleLabel:Q,onCollapse:p.default.useCallback(()=>{B(!1),V.current=!0,H(),k(!0),window.setTimeout(()=>{V.current=!1,H()},250)},[k]),onExpand:()=>k(!1),showCollapsedExpandButton:O&&z&&!V.current,isExtensionsActive:y===`/customize`||y.startsWith(`/skills`)||y===`/plugins`||y===`/mcp`,currentPath:y,activeBackendHealth:D,collapsedBackendPopoverOpen:M,setCollapsedBackendPopoverOpen:N,collapsedBackendPopoverRef:Y,collapsedBackendCloseTimer:P,onOpenAddBackend:()=>I(!0),onOpenManageBackends:()=>R(!0)};return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`aside`,{"aria-label":e(n.I18nKey.SIDEBAR$NAVIGATION_LABEL),"data-collapsed":O?`true`:`false`,onClick:te,onMouseEnter:()=>{O&&B(!0)},onMouseLeave:()=>{B(!1)},className:r.cn(`max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200`,`md:border-r md:border-[var(--oh-border)] md:h-full`,O?`md:w-[60px] md:min-w-[60px] md:px-2.5`:`md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0`,y===`/`&&`md:pb-3`),children:(0,m.jsx)(f.SidebarRailBody,{collapsed:O,showCollapseToggle:!0,...$})}),G?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{className:r.cn(`fixed inset-0 z-40 bg-black/50 md:hidden`,`transition-opacity ease-in-out motion-reduce:transition-none`,q?`opacity-100`:`pointer-events-none opacity-0`),style:{transitionDuration:`${v}ms`},onClick:W,"aria-hidden":!q}),(0,m.jsx)(`aside`,{"aria-label":e(n.I18nKey.SIDEBAR$NAVIGATION_LABEL),"data-testid":`sidebar-mobile-drawer`,"aria-hidden":!q,className:r.cn(`fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base`,`border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden`,`transition-transform ease-in-out motion-reduce:transition-none`,q?`translate-x-0`:`-translate-x-full`),style:{transitionDuration:`${v}ms`},children:(0,m.jsx)(f.SidebarRailBody,{collapsed:!1,showCollapseToggle:!1,showMobileCloseButton:!0,onCloseMobile:W,...$})})]}):null,A&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(h,{settings:x,onClose:()=>j(!1)})}),F&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(g,{onClose:()=>I(!1)})}),L&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(_,{onClose:()=>R(!1)})})]})}exports.Sidebar=y;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../context/navigation-context.cjs`),a=require(`../../../contexts/active-backend-context.cjs`),o=require(`../../../utils/custom-toast-handlers.cjs`),s=require(`../../../hooks/query/use-settings.cjs`),c=require(`../../../hooks/use-click-outside-element.cjs`),l=require(`../../../hooks/query/use-config.cjs`),ee=require(`./sidebar-mobile-nav-context.cjs`),u=require(`../../../hooks/query/use-backends-health.cjs`),d=require(`./sidebar-rail-body.cjs`),f=require(`../../../stores/sidebar-store.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);var h=p.default.lazy(()=>Promise.resolve().then(()=>require(`../../shared/modals/settings/settings-modal.cjs`)).then(e=>({default:e.SettingsModal}))),g=p.default.lazy(()=>Promise.resolve().then(()=>require(`../backends/add-backend-modal.cjs`)).then(e=>({default:e.AddBackendModal}))),_=p.default.lazy(()=>Promise.resolve().then(()=>require(`../backends/manage-backends-modal.cjs`)).then(e=>({default:e.ManageBackendsModal}))),v=250;function y(){let{t:e}=t.useTranslation(`openhands`),{currentPath:y}=i.useNavigation(),{data:b}=l.useConfig(),{data:x,error:S,isError:C,isFetching:w}=s.useSettings(),{backends:T,active:E}=a.useActiveBackendContext(),D=u.useBackendsHealth(T)[E.backend.id],O=f.useSidebarStore(e=>e.collapsed),k=f.useSidebarStore(e=>e.setCollapsed),[A,j]=p.default.useState(!1),[M,N]=p.default.useState(!1),P=p.default.useRef(null),[F,I]=p.default.useState(!1),[L,R]=p.default.useState(!1),[z,B]=p.default.useState(!1),V=p.default.useRef(!1),[,H]=p.default.useReducer(e=>e+1,0),{isOpen:U,close:W}=ee.useSidebarMobileNav(),[G,K]=p.default.useState(!1),[q,J]=p.default.useState(!1),Y=c.useClickOutsideElement(()=>N(!1)),X=s.getErrorStatus(S);p.default.useEffect(()=>{W()},[y,W]),p.default.useEffect(()=>{if(U){K(!0);let e=requestAnimationFrame(()=>{J(!0)});return()=>cancelAnimationFrame(e)}J(!1);let e=window.setTimeout(()=>{K(!1)},v);return()=>window.clearTimeout(e)},[U]),p.default.useEffect(()=>{if(!U)return;let e=e=>{e.key===`Escape`&&W()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[U,W]),p.default.useEffect(()=>{y===`/settings`?j(!1):!w&&C&&X!==404?o.displayErrorToast(`Something went wrong while fetching settings. Please reload the page.`):X===404&&!b?.feature_flags?.hide_llm_settings&&j(!0)},[y,w,C,X,b?.feature_flags?.hide_llm_settings]);let Z=x?.email_verified===!1,Q=e(O?n.I18nKey.SIDEBAR$EXPAND:n.I18nKey.SIDEBAR$COLLAPSE),te=p.default.useCallback(e=>{if(!O)return;let t=e.target;t instanceof HTMLElement&&(t.closest(`a,button,input,textarea,select,[role='button'],[role='link']`)||k(!1))},[O,k]),$={linkDisabled:Z,collapseToggleLabel:Q,onCollapse:p.default.useCallback(()=>{B(!1),V.current=!0,H(),k(!0),window.setTimeout(()=>{V.current=!1,H()},250)},[k]),onExpand:()=>k(!1),showCollapsedExpandButton:O&&z&&!V.current,isExtensionsActive:y===`/customize`||y.startsWith(`/skills`)||y===`/plugins`||y===`/mcp`,currentPath:y,activeBackendHealth:D,collapsedBackendPopoverOpen:M,setCollapsedBackendPopoverOpen:N,collapsedBackendPopoverRef:Y,collapsedBackendCloseTimer:P,onOpenAddBackend:()=>I(!0),onOpenManageBackends:()=>R(!0)};return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`aside`,{"aria-label":e(n.I18nKey.SIDEBAR$NAVIGATION_LABEL),"data-collapsed":O?`true`:`false`,onClick:te,onMouseEnter:()=>{O&&B(!0)},onMouseLeave:()=>{B(!1)},className:r.cn(`max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200`,`md:border-r md:border-[var(--oh-border)] md:h-full`,O?`md:w-[60px] md:min-w-[60px] md:px-2.5`:`md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0`,y===`/`&&`md:pb-3`),children:(0,m.jsx)(d.SidebarRailBody,{collapsed:O,showCollapseToggle:!0,...$})}),G?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{className:r.cn(`fixed inset-0 z-40 bg-black/50 md:hidden`,`transition-opacity ease-in-out motion-reduce:transition-none`,q?`opacity-100`:`pointer-events-none opacity-0`),style:{transitionDuration:`${v}ms`},onClick:W,"aria-hidden":!q}),(0,m.jsx)(`aside`,{"aria-label":e(n.I18nKey.SIDEBAR$NAVIGATION_LABEL),"data-testid":`sidebar-mobile-drawer`,"aria-hidden":!q,className:r.cn(`fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base`,`border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden`,`transition-transform ease-in-out motion-reduce:transition-none`,q?`translate-x-0`:`-translate-x-full`),style:{transitionDuration:`${v}ms`},children:(0,m.jsx)(d.SidebarRailBody,{collapsed:!1,showCollapseToggle:!1,showMobileCloseButton:!0,onCloseMobile:W,...$})})]}):null,A&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(h,{settings:x,onClose:()=>j(!1)})}),F&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(g,{onClose:()=>I(!1)})}),L&&(0,m.jsx)(p.default.Suspense,{fallback:null,children:(0,m.jsx)(_,{onClose:()=>R(!1)})})]})}exports.Sidebar=y;
 //# sourceMappingURL=sidebar.cjs.map

package/dist/components/features/sidebar/sidebar.js

@@ -8,15 +8,15 @@ import { getErrorStatus as o, useSettings as s } from "../../../hooks/query/use-
 import { useClickOutsideElement as c } from "../../../hooks/use-click-outside-element.js";
 import { useConfig as ee } from "../../../hooks/query/use-config.js";
 import { useSidebarMobileNav as te } from "./sidebar-mobile-nav-context.js";
-import { useSidebarStore as l } from "../../../stores/sidebar-store.js";
-import { useBackendsHealth as u } from "../../../hooks/query/use-backends-health.js";
-import { SidebarRailBody as d } from "./sidebar-rail-body.js";
+import { useBackendsHealth as l } from "../../../hooks/query/use-backends-health.js";
+import { SidebarRailBody as u } from "./sidebar-rail-body.js";
+import { useSidebarStore as d } from "../../../stores/sidebar-store.js";
 import f from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/features/sidebar/sidebar.tsx
 var g = f.lazy(() => import("../../shared/modals/settings/settings-modal.js").then((e) => ({ default: e.SettingsModal }))), _ = f.lazy(() => import("../backends/add-backend-modal.js").then((e) => ({ default: e.AddBackendModal }))), v = f.lazy(() => import("../backends/manage-backends-modal.js").then((e) => ({ default: e.ManageBackendsModal }))), y = 250;
 function b() {
-	let { t: b } = e("openhands"), { currentPath: x } = r(), { data: S } = ee(), { data: C, error: w, isError: T, isFetching: E } = s(), { backends: D, active: O } = i(), k = u(D)[O.backend.id], A = l((e) => e.collapsed), j = l((e) => e.setCollapsed), [M, N] = f.useState(!1), [P, F] = f.useState(!1), I = f.useRef(null), [L, R] = f.useState(!1), [z, B] = f.useState(!1), [V, H] = f.useState(!1), U = f.useRef(!1), [, W] = f.useReducer((e) => e + 1, 0), { isOpen: G, close: K } = te(), [q, J] = f.useState(!1), [Y, X] = f.useState(!1), Z = c(() => F(!1)), Q = o(w);
+	let { t: b } = e("openhands"), { currentPath: x } = r(), { data: S } = ee(), { data: C, error: w, isError: T, isFetching: E } = s(), { backends: D, active: O } = i(), k = l(D)[O.backend.id], A = d((e) => e.collapsed), j = d((e) => e.setCollapsed), [M, N] = f.useState(!1), [P, F] = f.useState(!1), I = f.useRef(null), [L, R] = f.useState(!1), [z, B] = f.useState(!1), [V, H] = f.useState(!1), U = f.useRef(!1), [, W] = f.useReducer((e) => e + 1, 0), { isOpen: G, close: K } = te(), [q, J] = f.useState(!1), [Y, X] = f.useState(!1), Z = c(() => F(!1)), Q = o(w);
 	f.useEffect(() => {
 		K();
 	}, [x, K]), f.useEffect(() => {
@@ -83,7 +83,7 @@ function b() {
 				H(!1);
 			},
 			className: n("max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200", "md:border-r md:border-[var(--oh-border)] md:h-full", A ? "md:w-[60px] md:min-w-[60px] md:px-2.5" : "md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0", x === "/" && "md:pb-3"),
-			children: /* @__PURE__ */ m(d, {
+			children: /* @__PURE__ */ m(u, {
 				collapsed: A,
 				showCollapseToggle: !0,
 				...$
@@ -100,7 +100,7 @@ function b() {
 			"aria-hidden": !Y,
 			className: n("fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base", "border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden", "transition-transform ease-in-out motion-reduce:transition-none", Y ? "translate-x-0" : "-translate-x-full"),
 			style: { transitionDuration: `${y}ms` },
-			children: /* @__PURE__ */ m(d, {
+			children: /* @__PURE__ */ m(u, {
 				collapsed: !1,
 				showCollapseToggle: !1,
 				showMobileCloseButton: !0,

package/dist/components/features/skills/extensions-navigation.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../shared/navigation-link.cjs`),i=require(`../../../icons/skills.cjs`),a=require(`../../../hooks/use-breakpoint.cjs`),o=require(`../sidebar/sidebar-layout.cjs`),s=require(`../settings/backend-synced-settings-badge.cjs`),c=require(`../../../icons/server-process.cjs`),l=require(`../../../stores/sidebar-store.cjs`);let u=require(`react/jsx-runtime`);var d=[{to:`/skills`,label:`Skills`,icon:(0,u.jsx)(i.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/mcp`,label:`MCP Servers`,icon:(0,u.jsx)(c.default,{width:16,height:16}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,u.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,u.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,u.jsx)(`path`,{d:`M12 22V12`})]}),end:!0,comingSoon:!0}];function f(){let{t:i}=e.useTranslation(`openhands`),c=l.useSidebarStore(e=>e.collapsed),f=a.useBreakpoint(1023),p=a.useBreakpoint(767);return!c&&f&&!p?null:(0,u.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,u.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:i(t.I18nKey.NAV$CUSTOMIZE)}),(0,u.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:d.map(e=>{let a=(0,u.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),s=(0,u.jsx)(`span`,{className:`truncate`,children:e.label}),c=e.comingSoon&&(0,u.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:i(t.I18nKey.NAV$COMING_SOON)});return(0,u.jsxs)(r.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>n.cn(o.sidebarNavRowClassName(),`truncate`,e?o.SIDEBAR_ROW_INTERACTIVE_CLASS.active:o.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,s,c]},e.to)})}),(0,u.jsx)(`div`,{className:`px-2 pt-3`,children:(0,u.jsx)(s.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=f;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../shared/navigation-link.cjs`),i=require(`../../../icons/skills.cjs`),a=require(`../sidebar/sidebar-layout.cjs`),o=require(`../settings/backend-synced-settings-badge.cjs`),s=require(`../../../icons/server-process.cjs`);let c=require(`react/jsx-runtime`);var l=[{to:`/skills`,label:`Skills`,icon:(0,c.jsx)(i.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/mcp`,label:`MCP Servers`,icon:(0,c.jsx)(s.default,{width:16,height:16}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,c.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,c.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,c.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,c.jsx)(`path`,{d:`M12 22V12`})]}),end:!0,comingSoon:!0}];function u(){let{t:i}=e.useTranslation(`openhands`);return(0,c.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,c.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:i(t.I18nKey.NAV$CUSTOMIZE)}),(0,c.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:l.map(e=>{let o=(0,c.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),s=(0,c.jsx)(`span`,{className:`truncate`,children:e.label}),l=e.comingSoon&&(0,c.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:i(t.I18nKey.NAV$COMING_SOON)});return(0,c.jsxs)(r.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>n.cn(a.sidebarNavRowClassName(),`truncate`,e?a.SIDEBAR_ROW_INTERACTIVE_CLASS.active:a.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[o,s,l]},e.to)})}),(0,c.jsx)(`div`,{className:`px-2 pt-3`,children:(0,c.jsx)(o.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=u;
 //# sourceMappingURL=extensions-navigation.cjs.map

package/dist/components/features/skills/extensions-navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n    comingSoon: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n  // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n  // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n  // until the user collapses the Sidebar or the viewport reaches `lg`.\n  const belowLg = useBreakpoint(1023);\n  const belowMd = useBreakpoint(767);\n  const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n\n  if (hideForExpandedSidebar) return null;\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.map((item) => {\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = <span className=\"truncate\">{item.label}</span>;\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"ikBAsBA,IAAa,EAA2C,CACtD,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,OAAS,CAAA,CAC9D,IAAK,GACN,CACD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,GAAM,CAAA,CAClD,IAAK,GACN,CACD,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yHAA2H,CAAA,EACnI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,qBAAuB,CAAA,EAC/B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CAClB,GAER,IAAK,GACL,WAAY,GACb,CACF,CAED,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAmB,EAAA,gBAAiB,GAAU,EAAM,UAAU,CAI9D,EAAU,EAAA,cAAc,KAAK,CAC7B,EAAU,EAAA,cAAc,IAAI,CAKlC,MAJ+B,CAAC,GAAoB,GAAW,CAAC,EAE7B,MAGjC,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,cAAc,CACpB,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,IAAK,GAAS,CAClC,IAAM,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,KACD,CAAA,CAEH,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,MAAa,CAAA,CACtD,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,gBAAgB,CACtB,CAAA,CAGT,OACE,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,wBAAwB,CACxB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,KACnC,UAZL,CAeG,EACA,EACA,EACc,EAjBV,EAAK,GAiBK,EAEnB,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}
+{"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n    comingSoon: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.map((item) => {\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = <span className=\"truncate\">{item.label}</span>;\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"meAoBA,IAAa,EAA2C,CACtD,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,OAAS,CAAA,CAC9D,IAAK,GACN,CACD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,GAAM,CAAA,CAClD,IAAK,GACN,CACD,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yHAA2H,CAAA,EACnI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,qBAAuB,CAAA,EAC/B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CAClB,GAER,IAAK,GACL,WAAY,GACb,CACF,CAED,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEzC,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,cAAc,CACpB,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,IAAK,GAAS,CAClC,IAAM,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,KACD,CAAA,CAEH,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,MAAa,CAAA,CACtD,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,gBAAgB,CACtB,CAAA,CAGT,OACE,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,wBAAwB,CACxB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,KACnC,UAZL,CAeG,EACA,EACA,EACc,EAjBV,EAAK,GAiBK,EAEnB,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}

package/dist/components/features/skills/extensions-navigation.d.ts

@@ -6,5 +6,5 @@ interface ExtensionNavItem {
     comingSoon?: boolean;
 }
 export declare const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[];
-export declare function ExtensionsNavigation(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ExtensionsNavigation(): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/skills/extensions-navigation.js

@@ -3,18 +3,16 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import { NavigationLink as r } from "../../shared/navigation-link.js";
 import i from "../../../icons/skills.js";
-import { useBreakpoint as a } from "../../../hooks/use-breakpoint.js";
-import { SIDEBAR_ROW_INTERACTIVE_CLASS as o, sidebarNavRowClassName as s } from "../sidebar/sidebar-layout.js";
-import { BackendSyncedSettingsBadge as c } from "../settings/backend-synced-settings-badge.js";
-import l from "../../../icons/server-process.js";
-import { useSidebarStore as u } from "../../../stores/sidebar-store.js";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { SIDEBAR_ROW_INTERACTIVE_CLASS as a, sidebarNavRowClassName as o } from "../sidebar/sidebar-layout.js";
+import { BackendSyncedSettingsBadge as s } from "../settings/backend-synced-settings-badge.js";
+import c from "../../../icons/server-process.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/skills/extensions-navigation.tsx
-var p = [
+var d = [
 	{
 		to: "/skills",
 		label: "Skills",
-		icon: /* @__PURE__ */ d(i, {
+		icon: /* @__PURE__ */ l(i, {
 			width: 16,
 			height: 16,
 			"aria-hidden": "true"
@@ -24,7 +22,7 @@ var p = [
 	{
 		to: "/mcp",
 		label: "MCP Servers",
-		icon: /* @__PURE__ */ d(l, {
+		icon: /* @__PURE__ */ l(c, {
 			width: 16,
 			height: 16
 		}),
@@ -33,7 +31,7 @@ var p = [
 	{
 		to: "/plugins",
 		label: "Plugins",
-		icon: /* @__PURE__ */ f("svg", {
+		icon: /* @__PURE__ */ u("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -45,59 +43,59 @@ var p = [
 			height: 16,
 			"aria-hidden": "true",
 			children: [
-				/* @__PURE__ */ d("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
-				/* @__PURE__ */ d("path", { d: "m3.3 7 8.7 5 8.7-5" }),
-				/* @__PURE__ */ d("path", { d: "M12 22V12" })
+				/* @__PURE__ */ l("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+				/* @__PURE__ */ l("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+				/* @__PURE__ */ l("path", { d: "M12 22V12" })
 			]
 		}),
 		end: !0,
 		comingSoon: !0
 	}
 ];
-function m() {
-	let { t: i } = e("openhands"), l = u((e) => e.collapsed), m = a(1023), h = a(767);
-	return !l && m && !h ? null : /* @__PURE__ */ f("aside", {
+function f() {
+	let { t: i } = e("openhands");
+	return /* @__PURE__ */ u("aside", {
 		"data-testid": "extensions-navbar-desktop",
 		className: "hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start",
 		children: [
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ l("span", {
 				className: "px-2 text-sm font-normal text-white",
 				children: i(t.NAV$CUSTOMIZE)
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex flex-col gap-0.5 pt-0.5",
-				children: p.map((e) => {
-					let a = /* @__PURE__ */ d("span", {
+				children: d.map((e) => {
+					let s = /* @__PURE__ */ l("span", {
 						className: "shrink-0 flex items-center justify-center",
 						children: e.icon
-					}), c = /* @__PURE__ */ d("span", {
+					}), c = /* @__PURE__ */ l("span", {
 						className: "truncate",
 						children: e.label
-					}), l = e.comingSoon && /* @__PURE__ */ d("span", {
+					}), d = e.comingSoon && /* @__PURE__ */ l("span", {
 						className: "ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]",
 						children: i(t.NAV$COMING_SOON)
 					});
-					return /* @__PURE__ */ f(r, {
+					return /* @__PURE__ */ u(r, {
 						to: e.to,
 						end: e.end,
 						"data-testid": `sidebar-extensions-${e.to}`,
-						className: ({ isActive: e }) => n(s(), "truncate", e ? o.active : o.idle),
+						className: ({ isActive: e }) => n(o(), "truncate", e ? a.active : a.idle),
 						children: [
-							a,
+							s,
 							c,
-							l
+							d
 						]
 					}, e.to);
 				})
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ l("div", {
 				className: "px-2 pt-3",
-				children: /* @__PURE__ */ d(c, {})
+				children: /* @__PURE__ */ l(s, {})
 			})
 		]
 	});
 }
 //#endregion
-export { m as ExtensionsNavigation };
+export { f as ExtensionsNavigation };
 
 //# sourceMappingURL=extensions-navigation.js.map

package/dist/components/features/skills/extensions-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n    comingSoon: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n  // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n  // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n  // until the user collapses the Sidebar or the viewport reaches `lg`.\n  const belowLg = useBreakpoint(1023);\n  const belowMd = useBreakpoint(767);\n  const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n\n  if (hideForExpandedSidebar) return null;\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.map((item) => {\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = <span className=\"truncate\">{item.label}</span>;\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EAC9D,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;GAAM,CAAA;EAClD,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,0HAA2H,CAAA;IACnI,kBAAC,QAAD,EAAM,GAAE,sBAAuB,CAAA;IAC/B,kBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;IAClB;;EAER,KAAK;EACL,YAAY;EACb;CACF;AAED,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAmB,GAAiB,MAAU,EAAM,UAAU,EAI9D,IAAU,EAAc,KAAK,EAC7B,IAAU,EAAc,IAAI;AAKlC,QAJ+B,CAAC,KAAoB,KAAW,CAAC,IAE7B,OAGjC,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,cAAc;IACpB,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,KAAK,MAAS;KAClC,IAAM,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,EAEH,IAAQ,kBAAC,QAAD;MAAM,WAAU;gBAAY,EAAK;MAAa,CAAA,EACtD,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,gBAAgB;MACtB,CAAA;AAGT,YACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,GAAwB,EACxB,YACA,IACI,EAA8B,SAC9B,EAA8B,KACnC;gBAZL;OAeG;OACA;OACA;OACc;QAjBV,EAAK,GAiBK;MAEnB;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}
+{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n    comingSoon: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.map((item) => {\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = <span className=\"truncate\">{item.label}</span>;\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EAC9D,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;GAAM,CAAA;EAClD,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,0HAA2H,CAAA;IACnI,kBAAC,QAAD,EAAM,GAAE,sBAAuB,CAAA;IAC/B,kBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;IAClB;;EAER,KAAK;EACL,YAAY;EACb;CACF;AAED,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,YAAY;AAEzC,QACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,cAAc;IACpB,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,KAAK,MAAS;KAClC,IAAM,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,EAEH,IAAQ,kBAAC,QAAD;MAAM,WAAU;gBAAY,EAAK;MAAa,CAAA,EACtD,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,gBAAgB;MACtB,CAAA;AAGT,YACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,GAAwB,EACxB,YACA,IACI,EAA8B,SAC9B,EAA8B,KACnC;gBAZL;OAeG;OACA;OACA;OACc;QAjBV,EAAK,GAiBK;MAEnB;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}