@openhands/agent-canvas 1.8.0 → 1.9.0

package/dist/components/features/chat/pending-user-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"pending-user-messages.js","names":[],"sources":["../../../../src/components/features/chat/pending-user-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useOptimisticUserMessageStore } from \"#/stores/optimistic-user-message-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useSendMessage } from \"#/hooks/use-send-message\";\nimport { createChatMessage } from \"#/services/chat-service\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { matchesPendingConversationId } from \"#/utils/pending-task-message-link\";\nimport { ImageCarousel } from \"#/components/features/images/image-carousel\";\nimport { ChatMessage } from \"./chat-message\";\n\n/**\n * Renders the queue of locally-tracked user messages that have been submitted\n * but not yet echoed back through the WebSocket. Each message shows a faded\n * \"sending\" treatment until the server echoes a real `UserMessageEvent`\n * (which removes it via `consumeMatchingPendingMessage`). If the API rejects the\n * send, the message switches to an \"error\" state with a retry button.\n *\n * The queue is global but each entry is tagged with the conversation id it\n * was enqueued from; this component filters to only entries belonging to the\n * active conversation, so switching conversations never carries pending\n * bubbles over.\n */\nexport function PendingUserMessages() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const pendingMessages = useOptimisticUserMessageStore(\n    (state) => state.pendingMessages,\n  );\n  const markPendingMessageError = useOptimisticUserMessageStore(\n    (state) => state.markPendingMessageError,\n  );\n  const markPendingMessageSending = useOptimisticUserMessageStore(\n    (state) => state.markPendingMessageSending,\n  );\n  const removePendingMessage = useOptimisticUserMessageStore(\n    (state) => state.removePendingMessage,\n  );\n  const restoreMessageToInputIfEmpty = useConversationStore(\n    (state) => state.restoreMessageToInputIfEmpty,\n  );\n  const { send } = useSendMessage();\n\n  const visibleMessages = React.useMemo(\n    () =>\n      conversationId\n        ? pendingMessages.filter((message) =>\n            matchesPendingConversationId(\n              conversationId,\n              message.conversationId,\n            ),\n          )\n        : [],\n    [pendingMessages, conversationId],\n  );\n\n  const handleRetry = React.useCallback(\n    async (id: string) => {\n      const message = useOptimisticUserMessageStore\n        .getState()\n        .pendingMessages.find((entry) => entry.id === id);\n      if (!message) return;\n\n      markPendingMessageSending(id);\n\n      try {\n        await send(\n          createChatMessage(\n            message.text,\n            message.imageUrls,\n            message.fileUrls,\n            message.timestamp,\n          ),\n        );\n      } catch (error) {\n        const errorMessage =\n          error instanceof Error\n            ? error.message\n            : t(I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE);\n        markPendingMessageError(id, errorMessage);\n      }\n    },\n    [send, markPendingMessageError, markPendingMessageSending, t],\n  );\n\n  const handleStop = React.useCallback(\n    (id: string, text: string) => {\n      restoreMessageToInputIfEmpty(text);\n      removePendingMessage(id);\n    },\n    [restoreMessageToInputIfEmpty, removePendingMessage],\n  );\n\n  if (visibleMessages.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {visibleMessages.map((message) => (\n        <ChatMessage\n          key={message.id}\n          type=\"user\"\n          message={message.text}\n          pendingStatus={message.status}\n          onRetry={\n            message.status === \"error\"\n              ? () => handleRetry(message.id)\n              : undefined\n          }\n          onStop={\n            message.status === \"sending\"\n              ? () => handleStop(message.id, message.text)\n              : undefined\n          }\n        >\n          {message.imageUrls.length > 0 && (\n            <ImageCarousel size=\"small\" images={message.imageUrls} />\n          )}\n        </ChatMessage>\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgB,IAAsB;CACpC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,sBAAmB,EAA0B,GAC/C,IAAkB,GACrB,MAAU,EAAM,eACnB,GACM,IAA0B,GAC7B,MAAU,EAAM,uBACnB,GACM,IAA4B,GAC/B,MAAU,EAAM,yBACnB,GACM,IAAuB,GAC1B,MAAU,EAAM,oBACnB,GACM,IAA+B,GAClC,MAAU,EAAM,4BACnB,GACM,EAAE,YAAS,EAAe,GAE1B,IAAkB,EAAM,cAE1B,IACI,EAAgB,QAAQ,MACtB,EACE,GACA,EAAQ,cACV,CACF,IACA,CAAC,GACP,CAAC,GAAiB,CAAc,CAClC,GAEM,IAAc,EAAM,YACxB,OAAO,MAAe;EACpB,IAAM,IAAU,EACb,SAAS,EACT,gBAAgB,MAAM,MAAU,EAAM,OAAO,CAAE;EAC7C,OAEL;KAA0B,CAAE;GAE5B,IAAI;IACF,MAAM,EACJ,EACE,EAAQ,MACR,EAAQ,WACR,EAAQ,UACR,EAAQ,SACV,CACF;GACF,SAAS,GAAO;IAKd,EAAwB,GAHtB,aAAiB,QACb,EAAM,UACN,EAAE,EAAQ,qCAAqC,CACb;GAC1C;EAjB4B;CAkB9B,GACA;EAAC;EAAM;EAAyB;EAA2B;CAAC,CAC9D,GAEM,IAAa,EAAM,aACtB,GAAY,MAAiB;EAE5B,AADA,EAA6B,CAAI,GACjC,EAAqB,CAAE;CACzB,GACA,CAAC,GAA8B,CAAoB,CACrD;CAMA,OAJI,EAAgB,WAAW,IACtB,OAIP,kBAAA,GAAA,EAAA,UACG,EAAgB,KAAK,MACpB,kBAAC,GAAD;EAEE,MAAK;EACL,SAAS,EAAQ;EACjB,eAAe,EAAQ;EACvB,SACE,EAAQ,WAAW,gBACT,EAAY,EAAQ,EAAE,IAC5B,KAAA;EAEN,QACE,EAAQ,WAAW,kBACT,EAAW,EAAQ,IAAI,EAAQ,IAAI,IACzC,KAAA;YAGL,EAAQ,UAAU,SAAS,KAC1B,kBAAC,GAAD;GAAe,MAAK;GAAQ,QAAQ,EAAQ;EAAY,CAAA;CAE/C,GAlBN,EAAQ,EAkBF,CACd,EACD,CAAA;AAEN"}
+{"version":3,"file":"pending-user-messages.js","names":[],"sources":["../../../../src/components/features/chat/pending-user-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useOptimisticUserMessageStore } from \"#/stores/optimistic-user-message-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useSendMessage } from \"#/hooks/use-send-message\";\nimport { createChatMessage } from \"#/services/chat-service\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { matchesPendingConversationId } from \"#/utils/pending-task-message-link\";\nimport { ImageCarousel } from \"#/components/features/images/image-carousel\";\nimport { ChatMessage } from \"./chat-message\";\n\n/**\n * Renders the queue of locally-tracked user messages that have been submitted\n * but not yet echoed back through the WebSocket. Each message shows a faded\n * \"sending\" treatment until the server echoes a real `UserMessageEvent`\n * (which removes it via `consumeMatchingPendingMessage`). If the API rejects the\n * send, the message switches to an \"error\" state with a retry button.\n *\n * The queue is global but each entry is tagged with the conversation id it\n * was enqueued from; this component filters to only entries belonging to the\n * active conversation, so switching conversations never carries pending\n * bubbles over.\n */\nexport function PendingUserMessages() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const pendingMessages = useOptimisticUserMessageStore(\n    (state) => state.pendingMessages,\n  );\n  const markPendingMessageError = useOptimisticUserMessageStore(\n    (state) => state.markPendingMessageError,\n  );\n  const markPendingMessageSending = useOptimisticUserMessageStore(\n    (state) => state.markPendingMessageSending,\n  );\n  const removePendingMessage = useOptimisticUserMessageStore(\n    (state) => state.removePendingMessage,\n  );\n  const restoreMessageToInputIfEmpty = useConversationStore(\n    (state) => state.restoreMessageToInputIfEmpty,\n  );\n  const { send } = useSendMessage();\n\n  const visibleMessages = React.useMemo(\n    () =>\n      conversationId\n        ? pendingMessages.filter((message) =>\n            matchesPendingConversationId(\n              conversationId,\n              message.conversationId,\n            ),\n          )\n        : [],\n    [pendingMessages, conversationId],\n  );\n\n  const handleRetry = React.useCallback(\n    async (id: string) => {\n      const message = useOptimisticUserMessageStore\n        .getState()\n        .pendingMessages.find((entry) => entry.id === id);\n      if (!message) return;\n\n      markPendingMessageSending(id);\n\n      try {\n        await send(\n          createChatMessage(\n            message.text,\n            message.imageUrls,\n            message.fileUrls,\n            message.timestamp,\n          ),\n        );\n      } catch (error) {\n        const errorMessage =\n          error instanceof Error\n            ? error.message\n            : t(I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE);\n        markPendingMessageError(id, errorMessage);\n      }\n    },\n    [send, markPendingMessageError, markPendingMessageSending, t],\n  );\n\n  const handleStop = React.useCallback(\n    (id: string, text: string) => {\n      restoreMessageToInputIfEmpty(text);\n      removePendingMessage(id);\n    },\n    [restoreMessageToInputIfEmpty, removePendingMessage],\n  );\n\n  const handleDismiss = React.useCallback(\n    (id: string) => {\n      removePendingMessage(id);\n    },\n    [removePendingMessage],\n  );\n\n  if (visibleMessages.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {visibleMessages.map((message) => (\n        <ChatMessage\n          key={message.id}\n          type=\"user\"\n          message={message.text}\n          pendingStatus={message.status}\n          onRetry={\n            message.status === \"error\"\n              ? () => handleRetry(message.id)\n              : undefined\n          }\n          onDismiss={\n            message.status === \"error\"\n              ? () => handleDismiss(message.id)\n              : undefined\n          }\n          onStop={\n            message.status === \"sending\"\n              ? () => handleStop(message.id, message.text)\n              : undefined\n          }\n        >\n          {message.imageUrls.length > 0 && (\n            <ImageCarousel size=\"small\" images={message.imageUrls} />\n          )}\n        </ChatMessage>\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgB,IAAsB;CACpC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,sBAAmB,EAA0B,GAC/C,IAAkB,GACrB,MAAU,EAAM,eACnB,GACM,IAA0B,GAC7B,MAAU,EAAM,uBACnB,GACM,IAA4B,GAC/B,MAAU,EAAM,yBACnB,GACM,IAAuB,GAC1B,MAAU,EAAM,oBACnB,GACM,IAA+B,GAClC,MAAU,EAAM,4BACnB,GACM,EAAE,YAAS,EAAe,GAE1B,IAAkB,EAAM,cAE1B,IACI,EAAgB,QAAQ,MACtB,EACE,GACA,EAAQ,cACV,CACF,IACA,CAAC,GACP,CAAC,GAAiB,CAAc,CAClC,GAEM,IAAc,EAAM,YACxB,OAAO,MAAe;EACpB,IAAM,IAAU,EACb,SAAS,EACT,gBAAgB,MAAM,MAAU,EAAM,OAAO,CAAE;EAC7C,OAEL;KAA0B,CAAE;GAE5B,IAAI;IACF,MAAM,EACJ,EACE,EAAQ,MACR,EAAQ,WACR,EAAQ,UACR,EAAQ,SACV,CACF;GACF,SAAS,GAAO;IAKd,EAAwB,GAHtB,aAAiB,QACb,EAAM,UACN,EAAE,EAAQ,qCAAqC,CACb;GAC1C;EAjB4B;CAkB9B,GACA;EAAC;EAAM;EAAyB;EAA2B;CAAC,CAC9D,GAEM,IAAa,EAAM,aACtB,GAAY,MAAiB;EAE5B,AADA,EAA6B,CAAI,GACjC,EAAqB,CAAE;CACzB,GACA,CAAC,GAA8B,CAAoB,CACrD,GAEM,IAAgB,EAAM,aACzB,MAAe;EACd,EAAqB,CAAE;CACzB,GACA,CAAC,CAAoB,CACvB;CAMA,OAJI,EAAgB,WAAW,IACtB,OAIP,kBAAA,GAAA,EAAA,UACG,EAAgB,KAAK,MACpB,kBAAC,GAAD;EAEE,MAAK;EACL,SAAS,EAAQ;EACjB,eAAe,EAAQ;EACvB,SACE,EAAQ,WAAW,gBACT,EAAY,EAAQ,EAAE,IAC5B,KAAA;EAEN,WACE,EAAQ,WAAW,gBACT,EAAc,EAAQ,EAAE,IAC9B,KAAA;EAEN,QACE,EAAQ,WAAW,kBACT,EAAW,EAAQ,IAAI,EAAQ,IAAI,IACzC,KAAA;YAGL,EAAQ,UAAU,SAAS,KAC1B,kBAAC,GAAD;GAAe,MAAK;GAAQ,QAAQ,EAAQ;EAAY,CAAA;CAE/C,GAvBN,EAAQ,EAuBF,CACd,EACD,CAAA;AAEN"}

package/dist/components/features/chat/typing-indicator.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");let e=require("react/jsx-runtime");function t(){return(0,e.jsxs)(`div`,{className:`flex items-center space-x-1.5 rounded-full bg-[var(--oh-surface)] px-3 py-1.5`,children:[(0,e.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:0ms]`}),(0,e.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:75ms]`}),(0,e.jsx)(`span`,{className:`h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:150ms]`})]})}exports.TypingIndicator=t;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),t=require("../../../types/agent-server/type-guards.cjs"),n=require("../../conversation-events/chat/event-content-helpers/get-acp-tool-call-content.cjs"),r=require("../../conversation-events/chat/event-content-helpers/get-action-event-title.cjs"),i=require("./mono-component.cjs"),a=require("./path-component.cjs");let o=require("react/jsx-runtime");var s={kind:`translation`,key:`ACTION_MESSAGE$THINK`,values:{}},c=new Set([`ExecuteBashAction`,`TerminalAction`,`FileEditorAction`,`StrReplaceEditorAction`,`MCPToolAction`,`InvokeSkillAction`,`TaskAction`,`ThinkAction`,`TaskTrackerAction`,`GrepAction`,`GlobAction`,`BrowserNavigateAction`,`BrowserClickAction`,`BrowserTypeAction`,`BrowserGetStateAction`,`BrowserGetContentAction`,`BrowserScrollAction`,`BrowserGoBackAction`,`BrowserListTabsAction`,`BrowserSwitchTabAction`,`BrowserCloseTabAction`]),l=e=>{if(!t.isActionEvent(e))return null;let n=r.getActionSummaryTitle(e);return n?{kind:`text`,text:n}:c.has(e.action.kind)?r.getActionEventTitleDescriptor(e):null},u=e=>e.source===`environment`&&`rejection_reason`in e,d=e=>{let r=new Set,i=new Set;for(let a=e.length-1;a>=0;--a){let o=e[a];if(!o.isFromPlanningAgent){if(t.isObservationEvent(o)||u(o)){r.add(o.action_id),i.add(o.tool_call_id);continue}if(t.isAgentErrorEvent(o)){i.add(o.tool_call_id);continue}if(t.isACPToolCallEvent(o)){if(!(o.status===`pending`||o.status===`in_progress`)){i.add(o.tool_call_id);continue}if(i.has(o.tool_call_id))continue;let e=n.stripRedundantTitlePrefix(o);return e?{kind:`translation`,key:n.getACPToolCallTitleKey(o),values:{title:e}}:s}if(t.isActionEvent(o)&&!r.has(o.id)&&!i.has(o.tool_call_id))return l(o)??s}}return s};function f({events:t}){let n=d(t);return(0,o.jsxs)(`div`,{className:`flex min-w-0 max-w-full items-center gap-2 rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-3 py-1.5 text-xs text-[var(--oh-text-secondary)]`,"data-testid":`live-activity-chip`,role:`status`,"aria-live":`polite`,children:[(0,o.jsx)(`span`,{"aria-hidden":`true`,className:`size-1.5 shrink-0 animate-pulse rounded-full bg-[var(--oh-status-success)] motion-reduce:animate-none`}),(0,o.jsx)(`span`,{className:`min-w-0 truncate`,children:n.kind===`text`?n.text:(0,o.jsx)(e.Trans,{ns:`openhands`,i18nKey:n.key,values:n.values,components:{path:(0,o.jsx)(a.PathComponent,{}),cmd:(0,o.jsx)(i.MonoComponent,{})}})})]})}exports.TypingIndicator=f;
 //# sourceMappingURL=typing-indicator.cjs.map

package/dist/components/features/chat/typing-indicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typing-indicator.cjs","names":[],"sources":["../../../../src/components/features/chat/typing-indicator.tsx"],"sourcesContent":["export function TypingIndicator() {\n  return (\n    <div className=\"flex items-center space-x-1.5 rounded-full bg-[var(--oh-surface)] px-3 py-1.5\">\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:0ms]\" />\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:75ms]\" />\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:150ms]\" />\n    </div>\n  );\n}\n"],"mappings":"sFAAA,SAAgB,GAAkB,CAChC,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yFAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sHAAwH,CAAA,GACxI,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,uHAAyH,CAAA,GACzI,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,wHAA0H,CAAA,CACvI,GAET"}
+{"version":3,"file":"typing-indicator.cjs","names":[],"sources":["../../../../src/components/features/chat/typing-indicator.tsx"],"sourcesContent":["import { Trans } from \"react-i18next\";\nimport type { OHEvent } from \"#/stores/use-event-store\";\nimport type { UserRejectObservation } from \"#/types/agent-server/core\";\nimport {\n  isACPToolCallEvent,\n  isActionEvent,\n  isAgentErrorEvent,\n  isObservationEvent,\n} from \"#/types/agent-server/type-guards\";\nimport {\n  getACPToolCallTitleKey,\n  stripRedundantTitlePrefix,\n} from \"#/components/conversation-events/chat/event-content-helpers/get-acp-tool-call-content\";\nimport {\n  getActionEventTitleDescriptor,\n  getActionSummaryTitle,\n  type EventTitleDescriptor,\n} from \"#/components/conversation-events/chat/event-content-helpers/get-action-event-title\";\nimport { MonoComponent } from \"./mono-component\";\nimport { PathComponent } from \"./path-component\";\n\nconst THINKING_ACTIVITY: EventTitleDescriptor = {\n  kind: \"translation\",\n  key: \"ACTION_MESSAGE$THINK\",\n  values: {},\n};\n\nconst LIVE_ACTION_KINDS = new Set([\n  \"ExecuteBashAction\",\n  \"TerminalAction\",\n  \"FileEditorAction\",\n  \"StrReplaceEditorAction\",\n  \"MCPToolAction\",\n  \"InvokeSkillAction\",\n  \"TaskAction\",\n  \"ThinkAction\",\n  \"TaskTrackerAction\",\n  \"GrepAction\",\n  \"GlobAction\",\n  \"BrowserNavigateAction\",\n  \"BrowserClickAction\",\n  \"BrowserTypeAction\",\n  \"BrowserGetStateAction\",\n  \"BrowserGetContentAction\",\n  \"BrowserScrollAction\",\n  \"BrowserGoBackAction\",\n  \"BrowserListTabsAction\",\n  \"BrowserSwitchTabAction\",\n  \"BrowserCloseTabAction\",\n]);\n\nconst getLiveActionTitle = (event: OHEvent): EventTitleDescriptor | null => {\n  if (!isActionEvent(event)) return null;\n\n  const summary = getActionSummaryTitle(event);\n  if (summary) {\n    return { kind: \"text\", text: summary };\n  }\n\n  return LIVE_ACTION_KINDS.has(event.action.kind)\n    ? getActionEventTitleDescriptor(event)\n    : null;\n};\n\nconst isUserRejectObservation = (\n  event: OHEvent,\n): event is UserRejectObservation =>\n  event.source === \"environment\" && \"rejection_reason\" in event;\n\nexport const deriveLiveActivity = (\n  events: readonly OHEvent[],\n): EventTitleDescriptor => {\n  const resolvedActionIds = new Set<string>();\n  const resolvedToolCallIds = new Set<string>();\n\n  for (let index = events.length - 1; index >= 0; index -= 1) {\n    const event = events[index];\n    if (event.isFromPlanningAgent) {\n      continue;\n    }\n\n    if (isObservationEvent(event) || isUserRejectObservation(event)) {\n      resolvedActionIds.add(event.action_id);\n      resolvedToolCallIds.add(event.tool_call_id);\n      continue;\n    }\n\n    if (isAgentErrorEvent(event)) {\n      resolvedToolCallIds.add(event.tool_call_id);\n      continue;\n    }\n\n    if (isACPToolCallEvent(event)) {\n      const isInProgress =\n        event.status === \"pending\" || event.status === \"in_progress\";\n      if (!isInProgress) {\n        resolvedToolCallIds.add(event.tool_call_id);\n        continue;\n      }\n      if (resolvedToolCallIds.has(event.tool_call_id)) {\n        continue;\n      }\n\n      const title = stripRedundantTitlePrefix(event);\n      return title\n        ? {\n            kind: \"translation\",\n            key: getACPToolCallTitleKey(event),\n            values: { title },\n          }\n        : THINKING_ACTIVITY;\n    }\n\n    if (\n      isActionEvent(event) &&\n      !resolvedActionIds.has(event.id) &&\n      !resolvedToolCallIds.has(event.tool_call_id)\n    ) {\n      return getLiveActionTitle(event) ?? THINKING_ACTIVITY;\n    }\n  }\n\n  return THINKING_ACTIVITY;\n};\n\ninterface TypingIndicatorProps {\n  readonly events: readonly OHEvent[];\n}\n\nexport function TypingIndicator({ events }: TypingIndicatorProps) {\n  const activity = deriveLiveActivity(events);\n\n  return (\n    <div\n      className=\"flex min-w-0 max-w-full items-center gap-2 rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-3 py-1.5 text-xs text-[var(--oh-text-secondary)]\"\n      data-testid=\"live-activity-chip\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"size-1.5 shrink-0 animate-pulse rounded-full bg-[var(--oh-status-success)] motion-reduce:animate-none\"\n      />\n      <span className=\"min-w-0 truncate\">\n        {activity.kind === \"text\" ? (\n          activity.text\n        ) : (\n          <Trans\n            ns=\"openhands\"\n            i18nKey={activity.key}\n            values={activity.values}\n            components={{\n              path: <PathComponent />,\n              cmd: <MonoComponent />,\n            }}\n          />\n        )}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"ydAqBA,IAAM,EAA0C,CAC9C,KAAM,cACN,IAAK,uBACL,OAAQ,CAAC,CACX,EAEM,EAAoB,IAAI,IAAI,CAChC,oBACA,iBACA,mBACA,yBACA,gBACA,oBACA,aACA,cACA,oBACA,aACA,aACA,wBACA,qBACA,oBACA,wBACA,0BACA,sBACA,sBACA,wBACA,yBACA,uBACF,CAAC,EAEK,EAAsB,GAAgD,CAC1E,GAAI,CAAC,EAAA,cAAc,CAAK,EAAG,OAAO,KAElC,IAAM,EAAU,EAAA,sBAAsB,CAAK,EAK3C,OAJI,EACK,CAAE,KAAM,OAAQ,KAAM,CAAQ,EAGhC,EAAkB,IAAI,EAAM,OAAO,IAAI,EAC1C,EAAA,8BAA8B,CAAK,EACnC,IACN,EAEM,EACJ,GAEA,EAAM,SAAW,eAAiB,qBAAsB,EAE7C,EACX,GACyB,CACzB,IAAM,EAAoB,IAAI,IACxB,EAAsB,IAAI,IAEhC,IAAK,IAAI,EAAQ,EAAO,OAAS,EAAG,GAAS,EAAG,IAAY,CAC1D,IAAM,EAAQ,EAAO,GACjB,MAAM,oBAIV,IAAI,EAAA,mBAAmB,CAAK,GAAK,EAAwB,CAAK,EAAG,CAC/D,EAAkB,IAAI,EAAM,SAAS,EACrC,EAAoB,IAAI,EAAM,YAAY,EAC1C,QACF,CAEA,GAAI,EAAA,kBAAkB,CAAK,EAAG,CAC5B,EAAoB,IAAI,EAAM,YAAY,EAC1C,QACF,CAEA,GAAI,EAAA,mBAAmB,CAAK,EAAG,CAG7B,GAAI,EADF,EAAM,SAAW,WAAa,EAAM,SAAW,eAC9B,CACjB,EAAoB,IAAI,EAAM,YAAY,EAC1C,QACF,CACA,GAAI,EAAoB,IAAI,EAAM,YAAY,EAC5C,SAGF,IAAM,EAAQ,EAAA,0BAA0B,CAAK,EAC7C,OAAO,EACH,CACE,KAAM,cACN,IAAK,EAAA,uBAAuB,CAAK,EACjC,OAAQ,CAAE,OAAM,CAClB,EACA,CACN,CAEA,GACE,EAAA,cAAc,CAAK,GACnB,CAAC,EAAkB,IAAI,EAAM,EAAE,GAC/B,CAAC,EAAoB,IAAI,EAAM,YAAY,EAE3C,OAAO,EAAmB,CAAK,GAAK,CAjCtC,CAmCF,CAEA,OAAO,CACT,EAMA,SAAgB,EAAgB,CAAE,UAAgC,CAChE,IAAM,EAAW,EAAmB,CAAM,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,sKACV,cAAY,qBACZ,KAAK,SACL,YAAU,kBAJZ,EAME,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,UAAU,uGACX,CAAA,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BACb,EAAS,OAAS,OACjB,EAAS,MAET,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,GAAG,YACH,QAAS,EAAS,IAClB,OAAQ,EAAS,OACjB,WAAY,CACV,MAAM,EAAA,EAAA,KAAC,EAAA,cAAD,CAAgB,CAAA,EACtB,KAAK,EAAA,EAAA,KAAC,EAAA,cAAD,CAAgB,CAAA,CACvB,CACD,CAAA,CAEC,CAAA,CACH,GAET"}

package/dist/components/features/chat/typing-indicator.d.ts

@@ -1 +1,8 @@
-export declare function TypingIndicator(): import("react/jsx-runtime").JSX.Element;
+import type { OHEvent } from "#/stores/use-event-store";
+import { type EventTitleDescriptor } from "#/components/conversation-events/chat/event-content-helpers/get-action-event-title";
+export declare const deriveLiveActivity: (events: readonly OHEvent[]) => EventTitleDescriptor;
+interface TypingIndicatorProps {
+    readonly events: readonly OHEvent[];
+}
+export declare function TypingIndicator({ events }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/features/chat/typing-indicator.js

@@ -1,16 +1,100 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Trans as e } from "../../../node_modules/react-i18next/dist/es/Trans.js";
+import { isACPToolCallEvent as t, isActionEvent as n, isAgentErrorEvent as r, isObservationEvent as i } from "../../../types/agent-server/type-guards.js";
+import { getACPToolCallTitleKey as a, stripRedundantTitlePrefix as o } from "../../conversation-events/chat/event-content-helpers/get-acp-tool-call-content.js";
+import { getActionEventTitleDescriptor as s, getActionSummaryTitle as c } from "../../conversation-events/chat/event-content-helpers/get-action-event-title.js";
+import { MonoComponent as l } from "./mono-component.js";
+import { PathComponent as u } from "./path-component.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/features/chat/typing-indicator.tsx
-function n() {
-	return /* @__PURE__ */ t("div", {
-		className: "flex items-center space-x-1.5 rounded-full bg-[var(--oh-surface)] px-3 py-1.5",
-		children: [
-			/* @__PURE__ */ e("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:0ms]" }),
-			/* @__PURE__ */ e("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:75ms]" }),
-			/* @__PURE__ */ e("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:150ms]" })
-		]
+var p = {
+	kind: "translation",
+	key: "ACTION_MESSAGE$THINK",
+	values: {}
+}, m = new Set([
+	"ExecuteBashAction",
+	"TerminalAction",
+	"FileEditorAction",
+	"StrReplaceEditorAction",
+	"MCPToolAction",
+	"InvokeSkillAction",
+	"TaskAction",
+	"ThinkAction",
+	"TaskTrackerAction",
+	"GrepAction",
+	"GlobAction",
+	"BrowserNavigateAction",
+	"BrowserClickAction",
+	"BrowserTypeAction",
+	"BrowserGetStateAction",
+	"BrowserGetContentAction",
+	"BrowserScrollAction",
+	"BrowserGoBackAction",
+	"BrowserListTabsAction",
+	"BrowserSwitchTabAction",
+	"BrowserCloseTabAction"
+]), h = (e) => {
+	if (!n(e)) return null;
+	let t = c(e);
+	return t ? {
+		kind: "text",
+		text: t
+	} : m.has(e.action.kind) ? s(e) : null;
+}, g = (e) => e.source === "environment" && "rejection_reason" in e, _ = (e) => {
+	let s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
+	for (let l = e.length - 1; l >= 0; --l) {
+		let u = e[l];
+		if (!u.isFromPlanningAgent) {
+			if (i(u) || g(u)) {
+				s.add(u.action_id), c.add(u.tool_call_id);
+				continue;
+			}
+			if (r(u)) {
+				c.add(u.tool_call_id);
+				continue;
+			}
+			if (t(u)) {
+				if (!(u.status === "pending" || u.status === "in_progress")) {
+					c.add(u.tool_call_id);
+					continue;
+				}
+				if (c.has(u.tool_call_id)) continue;
+				let e = o(u);
+				return e ? {
+					kind: "translation",
+					key: a(u),
+					values: { title: e }
+				} : p;
+			}
+			if (n(u) && !s.has(u.id) && !c.has(u.tool_call_id)) return h(u) ?? p;
+		}
+	}
+	return p;
+};
+function v({ events: t }) {
+	let n = _(t);
+	return /* @__PURE__ */ f("div", {
+		className: "flex min-w-0 max-w-full items-center gap-2 rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-3 py-1.5 text-xs text-[var(--oh-text-secondary)]",
+		"data-testid": "live-activity-chip",
+		role: "status",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ d("span", {
+			"aria-hidden": "true",
+			className: "size-1.5 shrink-0 animate-pulse rounded-full bg-[var(--oh-status-success)] motion-reduce:animate-none"
+		}), /* @__PURE__ */ d("span", {
+			className: "min-w-0 truncate",
+			children: n.kind === "text" ? n.text : /* @__PURE__ */ d(e, {
+				ns: "openhands",
+				i18nKey: n.key,
+				values: n.values,
+				components: {
+					path: /* @__PURE__ */ d(u, {}),
+					cmd: /* @__PURE__ */ d(l, {})
+				}
+			})
+		})]
 	});
 }
 //#endregion
-export { n as TypingIndicator };
+export { v as TypingIndicator };
 
 //# sourceMappingURL=typing-indicator.js.map

package/dist/components/features/chat/typing-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"typing-indicator.js","names":[],"sources":["../../../../src/components/features/chat/typing-indicator.tsx"],"sourcesContent":["export function TypingIndicator() {\n  return (\n    <div className=\"flex items-center space-x-1.5 rounded-full bg-[var(--oh-surface)] px-3 py-1.5\">\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:0ms]\" />\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:75ms]\" />\n      <span className=\"h-1.5 w-1.5 rounded-full bg-[var(--oh-muted)] animate-[bounce_0.5s_infinite] translate-y-[1px] [animation-delay:150ms]\" />\n    </div>\n  );\n}\n"],"mappings":";;AAAA,SAAgB,IAAkB;CAChC,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,QAAD,EAAM,WAAU,uHAAwH,CAAA;GACxI,kBAAC,QAAD,EAAM,WAAU,wHAAyH,CAAA;GACzI,kBAAC,QAAD,EAAM,WAAU,yHAA0H,CAAA;EACvI;;AAET"}
+{"version":3,"file":"typing-indicator.js","names":[],"sources":["../../../../src/components/features/chat/typing-indicator.tsx"],"sourcesContent":["import { Trans } from \"react-i18next\";\nimport type { OHEvent } from \"#/stores/use-event-store\";\nimport type { UserRejectObservation } from \"#/types/agent-server/core\";\nimport {\n  isACPToolCallEvent,\n  isActionEvent,\n  isAgentErrorEvent,\n  isObservationEvent,\n} from \"#/types/agent-server/type-guards\";\nimport {\n  getACPToolCallTitleKey,\n  stripRedundantTitlePrefix,\n} from \"#/components/conversation-events/chat/event-content-helpers/get-acp-tool-call-content\";\nimport {\n  getActionEventTitleDescriptor,\n  getActionSummaryTitle,\n  type EventTitleDescriptor,\n} from \"#/components/conversation-events/chat/event-content-helpers/get-action-event-title\";\nimport { MonoComponent } from \"./mono-component\";\nimport { PathComponent } from \"./path-component\";\n\nconst THINKING_ACTIVITY: EventTitleDescriptor = {\n  kind: \"translation\",\n  key: \"ACTION_MESSAGE$THINK\",\n  values: {},\n};\n\nconst LIVE_ACTION_KINDS = new Set([\n  \"ExecuteBashAction\",\n  \"TerminalAction\",\n  \"FileEditorAction\",\n  \"StrReplaceEditorAction\",\n  \"MCPToolAction\",\n  \"InvokeSkillAction\",\n  \"TaskAction\",\n  \"ThinkAction\",\n  \"TaskTrackerAction\",\n  \"GrepAction\",\n  \"GlobAction\",\n  \"BrowserNavigateAction\",\n  \"BrowserClickAction\",\n  \"BrowserTypeAction\",\n  \"BrowserGetStateAction\",\n  \"BrowserGetContentAction\",\n  \"BrowserScrollAction\",\n  \"BrowserGoBackAction\",\n  \"BrowserListTabsAction\",\n  \"BrowserSwitchTabAction\",\n  \"BrowserCloseTabAction\",\n]);\n\nconst getLiveActionTitle = (event: OHEvent): EventTitleDescriptor | null => {\n  if (!isActionEvent(event)) return null;\n\n  const summary = getActionSummaryTitle(event);\n  if (summary) {\n    return { kind: \"text\", text: summary };\n  }\n\n  return LIVE_ACTION_KINDS.has(event.action.kind)\n    ? getActionEventTitleDescriptor(event)\n    : null;\n};\n\nconst isUserRejectObservation = (\n  event: OHEvent,\n): event is UserRejectObservation =>\n  event.source === \"environment\" && \"rejection_reason\" in event;\n\nexport const deriveLiveActivity = (\n  events: readonly OHEvent[],\n): EventTitleDescriptor => {\n  const resolvedActionIds = new Set<string>();\n  const resolvedToolCallIds = new Set<string>();\n\n  for (let index = events.length - 1; index >= 0; index -= 1) {\n    const event = events[index];\n    if (event.isFromPlanningAgent) {\n      continue;\n    }\n\n    if (isObservationEvent(event) || isUserRejectObservation(event)) {\n      resolvedActionIds.add(event.action_id);\n      resolvedToolCallIds.add(event.tool_call_id);\n      continue;\n    }\n\n    if (isAgentErrorEvent(event)) {\n      resolvedToolCallIds.add(event.tool_call_id);\n      continue;\n    }\n\n    if (isACPToolCallEvent(event)) {\n      const isInProgress =\n        event.status === \"pending\" || event.status === \"in_progress\";\n      if (!isInProgress) {\n        resolvedToolCallIds.add(event.tool_call_id);\n        continue;\n      }\n      if (resolvedToolCallIds.has(event.tool_call_id)) {\n        continue;\n      }\n\n      const title = stripRedundantTitlePrefix(event);\n      return title\n        ? {\n            kind: \"translation\",\n            key: getACPToolCallTitleKey(event),\n            values: { title },\n          }\n        : THINKING_ACTIVITY;\n    }\n\n    if (\n      isActionEvent(event) &&\n      !resolvedActionIds.has(event.id) &&\n      !resolvedToolCallIds.has(event.tool_call_id)\n    ) {\n      return getLiveActionTitle(event) ?? THINKING_ACTIVITY;\n    }\n  }\n\n  return THINKING_ACTIVITY;\n};\n\ninterface TypingIndicatorProps {\n  readonly events: readonly OHEvent[];\n}\n\nexport function TypingIndicator({ events }: TypingIndicatorProps) {\n  const activity = deriveLiveActivity(events);\n\n  return (\n    <div\n      className=\"flex min-w-0 max-w-full items-center gap-2 rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-3 py-1.5 text-xs text-[var(--oh-text-secondary)]\"\n      data-testid=\"live-activity-chip\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"size-1.5 shrink-0 animate-pulse rounded-full bg-[var(--oh-status-success)] motion-reduce:animate-none\"\n      />\n      <span className=\"min-w-0 truncate\">\n        {activity.kind === \"text\" ? (\n          activity.text\n        ) : (\n          <Trans\n            ns=\"openhands\"\n            i18nKey={activity.key}\n            values={activity.values}\n            components={{\n              path: <PathComponent />,\n              cmd: <MonoComponent />,\n            }}\n          />\n        )}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAqBA,IAAM,IAA0C;CAC9C,MAAM;CACN,KAAK;CACL,QAAQ,CAAC;AACX,GAEM,IAAoB,IAAI,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,GAEK,KAAsB,MAAgD;CAC1E,IAAI,CAAC,EAAc,CAAK,GAAG,OAAO;CAElC,IAAM,IAAU,EAAsB,CAAK;CAK3C,OAJI,IACK;EAAE,MAAM;EAAQ,MAAM;CAAQ,IAGhC,EAAkB,IAAI,EAAM,OAAO,IAAI,IAC1C,EAA8B,CAAK,IACnC;AACN,GAEM,KACJ,MAEA,EAAM,WAAW,iBAAiB,sBAAsB,GAE7C,KACX,MACyB;CACzB,IAAM,oBAAoB,IAAI,IAAY,GACpC,oBAAsB,IAAI,IAAY;CAE5C,KAAK,IAAI,IAAQ,EAAO,SAAS,GAAG,KAAS,GAAG,KAAY;EAC1D,IAAM,IAAQ,EAAO;EACjB,OAAM,qBAIV;OAAI,EAAmB,CAAK,KAAK,EAAwB,CAAK,GAAG;IAE/D,AADA,EAAkB,IAAI,EAAM,SAAS,GACrC,EAAoB,IAAI,EAAM,YAAY;IAC1C;GACF;GAEA,IAAI,EAAkB,CAAK,GAAG;IAC5B,EAAoB,IAAI,EAAM,YAAY;IAC1C;GACF;GAEA,IAAI,EAAmB,CAAK,GAAG;IAG7B,IAAI,EADF,EAAM,WAAW,aAAa,EAAM,WAAW,gBAC9B;KACjB,EAAoB,IAAI,EAAM,YAAY;KAC1C;IACF;IACA,IAAI,EAAoB,IAAI,EAAM,YAAY,GAC5C;IAGF,IAAM,IAAQ,EAA0B,CAAK;IAC7C,OAAO,IACH;KACE,MAAM;KACN,KAAK,EAAuB,CAAK;KACjC,QAAQ,EAAE,SAAM;IAClB,IACA;GACN;GAEA,IACE,EAAc,CAAK,KACnB,CAAC,EAAkB,IAAI,EAAM,EAAE,KAC/B,CAAC,EAAoB,IAAI,EAAM,YAAY,GAE3C,OAAO,EAAmB,CAAK,KAAK;EAjCtC;CAmCF;CAEA,OAAO;AACT;AAMA,SAAgB,EAAgB,EAAE,aAAgC;CAChE,IAAM,IAAW,EAAmB,CAAM;CAE1C,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;EACZ,MAAK;EACL,aAAU;YAJZ,CAME,kBAAC,QAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,GACD,kBAAC,QAAD;GAAM,WAAU;aACb,EAAS,SAAS,SACjB,EAAS,OAET,kBAAC,GAAD;IACE,IAAG;IACH,SAAS,EAAS;IAClB,QAAQ,EAAS;IACjB,YAAY;KACV,MAAM,kBAAC,GAAD,CAAgB,CAAA;KACtB,KAAK,kBAAC,GAAD,CAAgB,CAAA;IACvB;GACD,CAAA;EAEC,CAAA,CACH;;AAET"}

package/dist/components/features/command-menu/command-menu-items.d.ts

@@ -3,7 +3,7 @@ import { I18nKey } from "#/i18n/declaration";
 export declare const COMMAND_MENU_ROUTE: {
     readonly conversations: "/conversations";
     readonly customize: "/customize";
-    readonly automations: "/automations";
+    readonly automations: string;
     readonly mcp: "/mcp";
     readonly settings: "/settings";
     readonly agentSettings: "/settings/agents";
@@ -21,6 +21,10 @@ export interface CommandMenuItemDefinition {
     titleKey: I18nKey;
     descriptionKey: I18nKey;
     keywordsKey: I18nKey;
+    /** Literal copy overriding the i18n key, when a manifest owns it. */
+    title?: string;
+    description?: string;
+    keywords?: string;
     icon: React.ReactElement;
     to?: string;
     perform?: () => void;

package/dist/components/features/files-tab/segmented-toggle.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({value:n,options:r,onChange:i,ariaLabel:a,testId:o}){return(0,t.jsx)(`div`,{role:`radiogroup`,"aria-label":a,"data-testid":o,className:`inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs`,children:r.map(r=>{let a=r.value===n;return(0,t.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":a,"data-testid":o?`${o}-option-${r.value}`:void 0,onClick:()=>i(r.value),className:e.cn(`px-2 py-0.5 rounded cursor-pointer transition-colors`,a?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:text-white`),children:r.label},r.value)})})}exports.SegmentedToggle=n;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({value:n,options:r,onChange:i,ariaLabel:a,testId:o}){return(0,t.jsx)(`div`,{role:`radiogroup`,"aria-label":a,"data-testid":o,className:`inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs`,children:r.map(r=>{let a=r.value===n;return(0,t.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":a,"data-testid":o?`${o}-option-${r.value}`:void 0,onClick:()=>i(r.value),className:e.cn(`inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors`,a?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:text-white`),children:[r.icon?(0,t.jsx)(`span`,{className:`inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5`,children:r.icon}):null,r.label]},r.value)})})}exports.SegmentedToggle=n;
 //# sourceMappingURL=segmented-toggle.cjs.map

package/dist/components/features/files-tab/segmented-toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-toggle.cjs","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n  value: T;\n  label: string;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n  value: T;\n  options: SegmentedToggleOption<T>[];\n  onChange: (value: T) => void;\n  ariaLabel: string;\n  testId?: string;\n}\n\n/**\n * Lightweight 2-state segmented control used for the files-tab toggles\n * (\"Diff view\" on/off, \"Rich\"/\"Plain\"). Kept local because the existing\n * shared switch components are heavier than what we need here.\n */\nexport function SegmentedToggle<T extends string>({\n  value,\n  options,\n  onChange,\n  ariaLabel,\n  testId,\n}: SegmentedToggleProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      data-testid={testId}\n      className=\"inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\"\n    >\n      {options.map((option) => {\n        const isActive = option.value === value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-testid={\n              testId ? `${testId}-option-${option.value}` : undefined\n            }\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"px-2 py-0.5 rounded cursor-pointer transition-colors\",\n              isActive\n                ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"kIAoBA,SAAgB,EAAkC,CAChD,QACA,UACA,WACA,YACA,UAC0B,CAC1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,aACL,aAAY,EACZ,cAAa,EACb,UAAU,2FAET,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,EAAO,QAAU,EAClC,OACE,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,KAAK,QACL,eAAc,EACd,cACE,EAAS,GAAG,EAAO,UAAU,EAAO,QAAU,IAAA,GAEhD,YAAe,EAAS,EAAO,KAAK,EACpC,UAAW,EAAA,GACT,uDACA,EACI,8CACA,yCACN,WAEC,EAAO,KACF,EAhBD,EAAO,KAgBN,CAEZ,CAAC,CACE,CAAA,CAET"}
+{"version":3,"file":"segmented-toggle.cjs","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n  value: T;\n  label: string;\n  icon?: ReactNode;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n  value: T;\n  options: SegmentedToggleOption<T>[];\n  onChange: (value: T) => void;\n  ariaLabel: string;\n  testId?: string;\n}\n\n/**\n * Lightweight 2-state segmented control used for the files-tab toggles\n * (\"Diff view\" on/off, \"Rich\"/\"Plain\"). Kept local because the existing\n * shared switch components are heavier than what we need here.\n */\nexport function SegmentedToggle<T extends string>({\n  value,\n  options,\n  onChange,\n  ariaLabel,\n  testId,\n}: SegmentedToggleProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      data-testid={testId}\n      className=\"inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\"\n    >\n      {options.map((option) => {\n        const isActive = option.value === value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-testid={\n              testId ? `${testId}-option-${option.value}` : undefined\n            }\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors\",\n              isActive\n                ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            {option.icon ? (\n              <span className=\"inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5\">\n                {option.icon}\n              </span>\n            ) : null}\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"kIAsBA,SAAgB,EAAkC,CAChD,QACA,UACA,WACA,YACA,UAC0B,CAC1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,aACL,aAAY,EACZ,cAAa,EACb,UAAU,2FAET,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,EAAO,QAAU,EAClC,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,QACL,eAAc,EACd,cACE,EAAS,GAAG,EAAO,UAAU,EAAO,QAAU,IAAA,GAEhD,YAAe,EAAS,EAAO,KAAK,EACpC,UAAW,EAAA,GACT,wFACA,EACI,8CACA,yCACN,WAdF,CAgBG,EAAO,MACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sFACb,EAAO,IACJ,CAAA,EACJ,KACH,EAAO,KACF,GArBD,EAAO,KAqBN,CAEZ,CAAC,CACE,CAAA,CAET"}

package/dist/components/features/files-tab/segmented-toggle.d.ts

@@ -1,6 +1,8 @@
+import type { ReactNode } from "react";
 interface SegmentedToggleOption<T extends string> {
     value: T;
     label: string;
+    icon?: ReactNode;
 }
 interface SegmentedToggleProps<T extends string> {
     value: T;

package/dist/components/features/files-tab/segmented-toggle.js

@@ -1,27 +1,30 @@
 import { cn as e } from "../../../utils/utils.js";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/features/files-tab/segmented-toggle.tsx
-function n({ value: n, options: r, onChange: i, ariaLabel: a, testId: o }) {
+function r({ value: r, options: i, onChange: a, ariaLabel: o, testId: s }) {
 	return /* @__PURE__ */ t("div", {
 		role: "radiogroup",
-		"aria-label": a,
-		"data-testid": o,
+		"aria-label": o,
+		"data-testid": s,
 		className: "inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs",
-		children: r.map((r) => {
-			let a = r.value === n;
-			return /* @__PURE__ */ t("button", {
+		children: i.map((i) => {
+			let o = i.value === r;
+			return /* @__PURE__ */ n("button", {
 				type: "button",
 				role: "radio",
-				"aria-checked": a,
-				"data-testid": o ? `${o}-option-${r.value}` : void 0,
-				onClick: () => i(r.value),
-				className: e("px-2 py-0.5 rounded cursor-pointer transition-colors", a ? "bg-[var(--oh-interactive-hover)] text-white" : "text-[var(--oh-muted)] hover:text-white"),
-				children: r.label
-			}, r.value);
+				"aria-checked": o,
+				"data-testid": s ? `${s}-option-${i.value}` : void 0,
+				onClick: () => a(i.value),
+				className: e("inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors", o ? "bg-[var(--oh-interactive-hover)] text-white" : "text-[var(--oh-muted)] hover:text-white"),
+				children: [i.icon ? /* @__PURE__ */ t("span", {
+					className: "inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5",
+					children: i.icon
+				}) : null, i.label]
+			}, i.value);
 		})
 	});
 }
 //#endregion
-export { n as SegmentedToggle };
+export { r as SegmentedToggle };
 
 //# sourceMappingURL=segmented-toggle.js.map

package/dist/components/features/files-tab/segmented-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-toggle.js","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n  value: T;\n  label: string;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n  value: T;\n  options: SegmentedToggleOption<T>[];\n  onChange: (value: T) => void;\n  ariaLabel: string;\n  testId?: string;\n}\n\n/**\n * Lightweight 2-state segmented control used for the files-tab toggles\n * (\"Diff view\" on/off, \"Rich\"/\"Plain\"). Kept local because the existing\n * shared switch components are heavier than what we need here.\n */\nexport function SegmentedToggle<T extends string>({\n  value,\n  options,\n  onChange,\n  ariaLabel,\n  testId,\n}: SegmentedToggleProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      data-testid={testId}\n      className=\"inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\"\n    >\n      {options.map((option) => {\n        const isActive = option.value === value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-testid={\n              testId ? `${testId}-option-${option.value}` : undefined\n            }\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"px-2 py-0.5 rounded cursor-pointer transition-colors\",\n              isActive\n                ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAoBA,SAAgB,EAAkC,EAChD,UACA,YACA,aACA,cACA,aAC0B;CAC1B,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,eAAa;EACb,WAAU;YAET,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAW,EAAO,UAAU;GAClC,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,eACE,IAAS,GAAG,EAAO,UAAU,EAAO,UAAU,KAAA;IAEhD,eAAe,EAAS,EAAO,KAAK;IACpC,WAAW,EACT,wDACA,IACI,gDACA,yCACN;cAEC,EAAO;GACF,GAhBD,EAAO,KAgBN;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-toggle.js","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n  value: T;\n  label: string;\n  icon?: ReactNode;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n  value: T;\n  options: SegmentedToggleOption<T>[];\n  onChange: (value: T) => void;\n  ariaLabel: string;\n  testId?: string;\n}\n\n/**\n * Lightweight 2-state segmented control used for the files-tab toggles\n * (\"Diff view\" on/off, \"Rich\"/\"Plain\"). Kept local because the existing\n * shared switch components are heavier than what we need here.\n */\nexport function SegmentedToggle<T extends string>({\n  value,\n  options,\n  onChange,\n  ariaLabel,\n  testId,\n}: SegmentedToggleProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      data-testid={testId}\n      className=\"inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\"\n    >\n      {options.map((option) => {\n        const isActive = option.value === value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-testid={\n              testId ? `${testId}-option-${option.value}` : undefined\n            }\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors\",\n              isActive\n                ? \"bg-[var(--oh-interactive-hover)] text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            {option.icon ? (\n              <span className=\"inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5\">\n                {option.icon}\n              </span>\n            ) : null}\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAsBA,SAAgB,EAAkC,EAChD,UACA,YACA,aACA,cACA,aAC0B;CAC1B,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,eAAa;EACb,WAAU;YAET,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAW,EAAO,UAAU;GAClC,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,eACE,IAAS,GAAG,EAAO,UAAU,EAAO,UAAU,KAAA;IAEhD,eAAe,EAAS,EAAO,KAAK;IACpC,WAAW,EACT,yFACA,IACI,gDACA,yCACN;cAdF,CAgBG,EAAO,OACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO;IACJ,CAAA,IACJ,MACH,EAAO,KACF;MArBD,EAAO,KAqBN;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/features/manifest/manifest-form-field.d.ts

@@ -0,0 +1,27 @@
+import type { GitRepository } from "#/types/git";
+import type { SetupFieldOption, SetupFormField as SetupFormFieldDefinition } from "#/manifests/types";
+export interface SetupFormFieldProps {
+    /** The record key the field is declared under, and what `{{form.x}}` reads. */
+    name: string;
+    field: SetupFormFieldDefinition;
+    value: string;
+    /** Already-resolved copy: local checks and service errors look the same here. */
+    error?: string;
+    /** Declared options, or the ones the deployment supplied. */
+    options: SetupFieldOption[];
+    /** The picked repository, kept so the picker can show what is selected. */
+    repository: GitRepository | null;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    onRepositoryChange: (repository: GitRepository | null) => void;
+    onBlur: () => void;
+}
+/**
+ * Render one manifest-declared field.
+ *
+ * The host knows how to render a field *type*; what any field means is the
+ * manifest's business. Every field's own copy comes from the manifest and is
+ * never translated by the host; the only host string is the format hint the
+ * repository fallback below needs, because no manifest declares it.
+ */
+export declare function SetupFormField({ name, field, value, error, options, repository, disabled, onChange, onRepositoryChange, onBlur, }: SetupFormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/manifest/manifest-prerequisites-step.d.ts

@@ -0,0 +1,11 @@
+import type { SetupPrerequisitesResult } from "#/hooks/query/use-manifest-prerequisites";
+export interface SetupPrerequisitesStepProps {
+    prerequisites: SetupPrerequisitesResult;
+}
+/**
+ * Stage 3 — what has to be connected before the form is worth filling in.
+ *
+ * Each integration is listed with the reason the manifest gives for needing it,
+ * so the user is told why rather than just what.
+ */
+export declare function SetupPrerequisitesStep({ prerequisites, }: SetupPrerequisitesStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/manifest/manifest-review-step.d.ts

@@ -0,0 +1,14 @@
+import type { SetupBlock, SetupFormValues } from "#/manifests/types";
+export interface SetupReviewStepProps {
+    setup: SetupBlock;
+    values: SetupFormValues;
+}
+/**
+ * Stage 7 — the plain-language summary the user confirms.
+ *
+ * The last cheap moment to catch a wrong answer, and the last point at which
+ * nothing has been created yet. A manifest declares no summary of its own: one
+ * row per declared field, labelled the way the field was labelled, says the
+ * same thing without asking every entry to restate it.
+ */
+export declare function SetupReviewStep({ setup, values }: SetupReviewStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/manifest/manifest-setup-dialog.d.ts

@@ -0,0 +1,14 @@
+import type { SetupEntry } from "#/manifests/types";
+export interface SetupDialogProps {
+    entry: SetupEntry;
+    onClose: () => void;
+}
+/**
+ * The setup host: capabilities check, prerequisites, form, review, and the
+ * action the manifest's mode selects, rendered as a dialog.
+ *
+ * The host runs the stages and owns everything the same for every entry; the
+ * manifest supplies only what varies. Any string the user reads here is either
+ * manifest-authored or host chrome.
+ */
+export declare function SetupDialog({ entry, onClose }: SetupDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/settings/settings-input.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaDescribedBy:w,ariaInvalid:T,error:E,showRequiredTag:D,onBlur:O,inputClassName:k},A){let j=E&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),D&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{})]}),(0,i.jsx)(`input`,{ref:A,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:O,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-describedby":j??w,"aria-invalid":!!E||T,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,E&&`border-red-500`,k)}),E&&(0,i.jsx)(`p`,{id:j,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:E})]})});exports.SettingsInput=a;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaDescribedBy:w,ariaInvalid:T,error:E,showRequiredTag:D,hint:O,onBlur:k,inputClassName:A},j){let M=E&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),D&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{}),O&&(0,i.jsx)(`span`,{"data-testid":r?`${r}-hint`:void 0,className:`min-w-0 text-xs text-[var(--oh-muted)]`,children:O})]}),(0,i.jsx)(`input`,{ref:j,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:k,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-describedby":M??w,"aria-invalid":!!E||T,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,E&&`border-red-500`,A)}),E&&(0,i.jsx)(`p`,{id:M,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:E})]})});exports.SettingsInput=a;
 //# sourceMappingURL=settings-input.cjs.map

package/dist/components/features/settings/settings-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":"0OA2CA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,kBACA,cACA,QACA,kBACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,CAC/B,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}
+{"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  /**\n   * Short guidance rendered next to the label, above the input. It sits inside\n   * the `<label>`, so it is announced as part of the field's accessible name —\n   * keep it to a phrase that reads well after the label text.\n   */\n  hint?: string;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      hint,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n          {hint && (\n            <span\n              data-testid={testId ? `${testId}-hint` : undefined}\n              className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n            >\n              {hint}\n            </span>\n          )}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":"0OAiDA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,kBACA,cACA,QACA,kBACA,OACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,EACjC,IACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAS,GAAG,EAAO,OAAS,IAAA,GACzC,UAAU,kDAET,CACG,CAAA,CAEL,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}

package/dist/components/features/settings/settings-input.d.ts

@@ -31,6 +31,12 @@ interface SettingsInputProps {
     error?: string;
     /** Renders a red asterisk next to the label to mark the field as required. */
     showRequiredTag?: boolean;
+    /**
+     * Short guidance rendered next to the label, above the input. It sits inside
+     * the `<label>`, so it is announced as part of the field's accessible name —
+     * keep it to a phrase that reads well after the label text.
+     */
+    hint?: string;
     onBlur?: () => void;
     /** Extra classes merged onto the `<input>` element. */
     inputClassName?: string;

package/dist/components/features/settings/settings-input.js

@@ -4,8 +4,8 @@ import { OptionalTag as n } from "./optional-tag.js";
 import { forwardRef as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/features/settings/settings-input.tsx
-var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaDescribedBy: T, ariaInvalid: E, error: D, showRequiredTag: O, onBlur: k, inputClassName: A }, j) {
-	let M = D && r ? `${r}-error` : void 0;
+var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaDescribedBy: T, ariaInvalid: E, error: D, showRequiredTag: O, hint: k, onBlur: A, inputClassName: j }, M) {
+	let N = D && r ? `${r}-error` : void 0;
 	return /* @__PURE__ */ a("label", {
 		className: e("flex flex-col gap-2.5 w-full min-w-0", h),
 		children: [
@@ -22,15 +22,20 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 						"aria-hidden": !0,
 						children: "*"
 					}),
-					f && /* @__PURE__ */ i(n, {})
+					f && /* @__PURE__ */ i(n, {}),
+					k && /* @__PURE__ */ i("span", {
+						"data-testid": r ? `${r}-hint` : void 0,
+						className: "min-w-0 text-xs text-[var(--oh-muted)]",
+						children: k
+					})
 				]
 			}),
 			/* @__PURE__ */ i("input", {
-				ref: j,
+				ref: M,
 				"data-testid": r,
 				onChange: (e) => g?.(e.target.value),
 				onKeyDown: _,
-				onBlur: k,
+				onBlur: A,
 				name: o,
 				disabled: p,
 				type: c,
@@ -43,12 +48,12 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 				required: v,
 				pattern: S,
 				title: C,
-				"aria-describedby": M ?? T,
+				"aria-describedby": N ?? T,
 				"aria-invalid": !!D || E,
-				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", D && "border-red-500", A)
+				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", D && "border-red-500", j)
 			}),
 			D && /* @__PURE__ */ i("p", {
-				id: M,
+				id: N,
 				role: "alert",
 				"data-testid": r ? `${r}-error` : void 0,
 				className: "text-xs text-red-400 -mt-1",

package/dist/components/features/settings/settings-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":";;;;;;AA2CA,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,oBACA,gBACA,UACA,oBACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;IAC/B;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}
+{"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  /**\n   * Short guidance rendered next to the label, above the input. It sits inside\n   * the `<label>`, so it is announced as part of the field's accessible name —\n   * keep it to a phrase that reads well after the label text.\n   */\n  hint?: string;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      hint,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n          {hint && (\n            <span\n              data-testid={testId ? `${testId}-hint` : undefined}\n              className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n            >\n              {hint}\n            </span>\n          )}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":";;;;;;AAiDA,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,oBACA,gBACA,UACA,oBACA,SACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;KACjC,KACC,kBAAC,QAAD;MACE,eAAa,IAAS,GAAG,EAAO,SAAS,KAAA;MACzC,WAAU;gBAET;KACG,CAAA;IAEL;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}

package/dist/components/features/sidebar/sidebar-rail-body.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("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../shared/buttons/styled-tooltip.cjs"),u=require("../../shared/navigation-link.cjs"),d=require("./sidebar-layout.cjs"),f=require("./sidebar-collapsed-icon-slot.cjs"),p=require("./sidebar-nav-link.cjs"),m=require("../../shared/buttons/openhands-logo-button.cjs"),h=require("../backends/backend-status-dot.cjs"),g=require("../backends/backend-selector.cjs"),_=require("../command-menu/command-menu-trigger.cjs"),v=require("./sidebar-conversation-list.cjs"),y=require("../../../icons/automations.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");var S=18,C=34,w=Math.round(C*30/46);function T({collapsed:e,showCollapseToggle:b,showMobileCloseButton:T=!1,onCloseMobile:E,collapseToggleLabel:D,onCollapse:O,onExpand:k,showCollapsedExpandButton:A,isExtensionsActive:j,currentPath:M,activeBackendHealth:N,collapsedBackendPopoverOpen:P,setCollapsedBackendPopoverOpen:F,collapsedBackendPopoverRef:I,collapsedBackendCloseTimer:L,onOpenAddBackend:R,onOpenManageBackends:z}){let{t:B}=t.useTranslation(`openhands`),V=L;return(0,x.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,x.jsxs)(`div`,{className:d.sidebarHeaderRowClassName(e),children:[(0,x.jsxs)(`div`,{className:c.cn(e&&b?d.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,x.jsx)(`div`,{className:c.cn(e&&b&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&A&&`opacity-0`),children:(0,x.jsx)(m.OpenHandsLogoButton,{logoWidth:C,logoHeight:w,logoClassName:`max-w-none`,className:c.cn(d.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&b?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":D,onClick:k,className:c.cn(d.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,A?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,x.jsx)(i.ChevronRight,{width:14,height:14})}):null]}),!e&&b?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":D,onClick:O,className:c.cn(`hidden md:inline-flex ml-auto`,d.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,x.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&T?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:E,"aria-label":B(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,d.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,x.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,x.jsxs)(`nav`,{className:d.sidebarNavListClassName(e),children:[(0,x.jsx)(_.CommandMenuTrigger,{collapsed:e}),(0,x.jsx)(p.SidebarNavLink,{to:`/conversations`,end:!0,label:B(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,x.jsx)(a.Plus,{width:S,height:S})}),(0,x.jsx)(p.SidebarNavLink,{to:`/customize`,label:B(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:j,icon:(0,x.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:S,height:S,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,x.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,x.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,x.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,x.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,x.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,x.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,x.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,x.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,x.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,x.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,x.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,x.jsx)(`path`,{d:`M12 13.5V8`})]})}),(0,x.jsx)(p.SidebarNavLink,{to:`/automations`,label:B(n.I18nKey.SIDEBAR$AUTOMATIONS),testId:`sidebar-automations-link`,collapsed:e,icon:(0,x.jsx)(y.default,{width:S,height:S})})]}),(0,x.jsx)(v.SidebarConversationList,{collapsed:e}),e&&b?(0,x.jsxs)(`nav`,{className:c.cn(d.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,x.jsx)(l.StyledTooltip,{content:B(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:(0,x.jsxs)(u.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":B(n.I18nKey.SIDEBAR$SETTINGS),className:d.sidebarNavRowClassName({collapsed:!0}),children:[(0,x.jsx)(f.SidebarCollapsedIconSlot,{active:M.startsWith(`/settings`),children:(0,x.jsx)(s.Settings,{width:S,height:S})}),(0,x.jsx)(`span`,{className:d.sidebarNavLabelClassName(!0),children:B(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,x.jsxs)(`div`,{className:`relative`,ref:I,onMouseEnter:()=>{V.current&&=(clearTimeout(V.current),null),F(!0)},onMouseLeave:()=>{V.current=setTimeout(()=>F(!1),150)},children:[(0,x.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":B(n.I18nKey.BACKEND$MANAGE),"aria-expanded":P,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(d.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,x.jsx)(f.SidebarCollapsedIconSlot,{active:P,children:(0,x.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,x.jsx)(h.BackendStatusDot,{isConnected:N?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,x.jsx)(o.Server,{width:S,height:S})]})}),(0,x.jsx)(`span`,{className:d.sidebarNavLabelClassName(!0),children:B(n.I18nKey.BACKEND$MANAGE)})]}),P?(0,x.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,x.jsx)(g.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>F(!1),onOpenAddBackend:R,onOpenManageBackends:z})}):null]})]}):null,e?null:(0,x.jsx)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:(0,x.jsx)(g.BackendSelector,{sidebarCollapsed:e,openUpward:!0})})]})}exports.SidebarRailBody=T;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../../manifests/automation-interface.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../shared/navigation-link.cjs"),f=require("./sidebar-layout.cjs"),p=require("./sidebar-collapsed-icon-slot.cjs"),m=require("./sidebar-nav-link.cjs"),h=require("../../shared/buttons/openhands-logo-button.cjs"),g=require("../backends/backend-status-dot.cjs"),_=require("../backends/backend-selector.cjs"),v=require("../command-menu/command-menu-trigger.cjs"),y=require("./sidebar-conversation-list.cjs"),b=require("../../../icons/automations.cjs");let x=require("react");x=e.__toESM(x,1);let S=require("react/jsx-runtime");var C=18,w=34,T=Math.round(w*30/46);function E({collapsed:e,showCollapseToggle:x,showMobileCloseButton:E=!1,onCloseMobile:D,collapseToggleLabel:O,onCollapse:k,onExpand:A,showCollapsedExpandButton:j,isExtensionsActive:M,currentPath:N,activeBackendHealth:P,collapsedBackendPopoverOpen:F,setCollapsedBackendPopoverOpen:I,collapsedBackendPopoverRef:L,collapsedBackendCloseTimer:R,onOpenAddBackend:z,onOpenManageBackends:B}){let{t:V}=t.useTranslation(`openhands`),H=R;return(0,S.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,S.jsxs)(`div`,{className:f.sidebarHeaderRowClassName(e),children:[(0,S.jsxs)(`div`,{className:c.cn(e&&x?f.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,S.jsx)(`div`,{className:c.cn(e&&x&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&j&&`opacity-0`),children:(0,S.jsx)(h.OpenHandsLogoButton,{logoWidth:w,logoHeight:T,logoClassName:`max-w-none`,className:c.cn(f.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&x?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":O,onClick:A,className:c.cn(f.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,j?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,S.jsx)(i.ChevronRight,{width:14,height:14})}):null]}),!e&&x?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":O,onClick:k,className:c.cn(`hidden md:inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,S.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&E?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:D,"aria-label":V(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,S.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,S.jsxs)(`nav`,{className:f.sidebarNavListClassName(e),children:[(0,S.jsx)(v.CommandMenuTrigger,{collapsed:e}),(0,S.jsx)(m.SidebarNavLink,{to:`/conversations`,end:!0,label:V(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,S.jsx)(a.Plus,{width:C,height:C})}),(0,S.jsx)(m.SidebarNavLink,{to:`/customize`,label:V(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:M,icon:(0,S.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:C,height:C,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,S.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,S.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,S.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,S.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,S.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,S.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,S.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,S.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,S.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,S.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,S.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,S.jsx)(`path`,{d:`M12 13.5V8`})]})}),(0,S.jsx)(m.SidebarNavLink,{to:l.automationListPath(),label:l.getInterfaceCopy().sidebarLabel??V(n.I18nKey.SIDEBAR$AUTOMATIONS),testId:`sidebar-automations-link`,collapsed:e,icon:(0,S.jsx)(b.default,{width:C,height:C})})]}),(0,S.jsx)(y.SidebarConversationList,{collapsed:e}),e&&x?(0,S.jsxs)(`nav`,{className:c.cn(f.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,S.jsx)(u.StyledTooltip,{content:V(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:(0,S.jsxs)(d.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":V(n.I18nKey.SIDEBAR$SETTINGS),className:f.sidebarNavRowClassName({collapsed:!0}),children:[(0,S.jsx)(p.SidebarCollapsedIconSlot,{active:N.startsWith(`/settings`),children:(0,S.jsx)(s.Settings,{width:C,height:C})}),(0,S.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:V(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,S.jsxs)(`div`,{className:`relative`,ref:L,onMouseEnter:()=>{H.current&&=(clearTimeout(H.current),null),I(!0)},onMouseLeave:()=>{H.current=setTimeout(()=>I(!1),150)},children:[(0,S.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":V(n.I18nKey.BACKEND$MANAGE),"aria-expanded":F,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(f.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,S.jsx)(p.SidebarCollapsedIconSlot,{active:F,children:(0,S.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,S.jsx)(g.BackendStatusDot,{isConnected:P?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,S.jsx)(o.Server,{width:C,height:C})]})}),(0,S.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:V(n.I18nKey.BACKEND$MANAGE)})]}),F?(0,S.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,S.jsx)(_.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>I(!1),onOpenAddBackend:z,onOpenManageBackends:B})}):null]})]}):null,e?null:(0,S.jsx)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:(0,S.jsx)(_.BackendSelector,{sidebarCollapsed:e,openUpward:!0})})]})}exports.SidebarRailBody=E;
 //# sourceMappingURL=sidebar-rail-body.cjs.map