@invergent/agent-chat-react 2.12.0 → 2.13.1

package/dist/index.cjs

@@ -2504,7 +2504,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "relative inline-flex min-h-11 h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 pointer-fine:min-h-0 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
@@ -4291,21 +4291,162 @@ var OTHER_INDEX_OFFSET = 1e6;
 function emptySelection() {
   return { index: -1, other: "" };
 }
+function hasChoices(question) {
+  return (question.choices?.length ?? 0) > 0;
+}
 function buildAnswer(q, sel) {
   if (sel.index < 0) return null;
   if (sel.index >= OTHER_INDEX_OFFSET) {
     const text = sel.other.trim();
     if (!text) return null;
-    return { question: q.prompt, answer: text, is_other: true };
+    return { question: q.prompt, answer: text, is_other: hasChoices(q) };
   }
   const choice = q.choices?.[sel.index];
   if (!choice) return null;
   return { question: q.prompt, answer: choice.label, is_other: false };
 }
-function AskUserQuestionToolBlock({ tc }) {
+function askQuestionsOf(tc) {
+  return parseArgs(tc.args)?.questions ?? [];
+}
+function isConversationalAsk(questions) {
+  return questions.length === 1;
+}
+function conversationalAskAcceptsFreeText(question) {
+  return !hasChoices(question) || question.allow_other !== false;
+}
+function promptEchoedInContent(content, prompt) {
+  const normalize = (s) => s.replace(/[*_`]/g, "").replace(/\s+/g, " ").trim().toLowerCase();
+  const body = normalize(content ?? "");
+  const question = normalize(prompt);
+  return !!body && !!question && body.endsWith(question);
+}
+function AskUserQuestionToolBlock({
+  tc,
+  assistantContent,
+  viewMode = "simple"
+}) {
+  const questions = react.useMemo(() => askQuestionsOf(tc), [tc.args]);
+  if (questions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "ask_user_question: no questions provided" });
+  }
+  if (isConversationalAsk(questions)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ConversationalAsk,
+      {
+        tc,
+        question: questions[0],
+        assistantContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(BatchAsk, { tc, questions, viewMode });
+}
+function ConversationalAsk({
+  tc,
+  question,
+  assistantContent
+}) {
+  const { adapter, sessionId } = useAgentChatAdapterContext();
+  const [submitting, setSubmitting] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const answered = tc.askUserQuestionAnswers !== void 0;
+  const pending = !answered && tc.status === "running";
+  const choices = question.choices ?? [];
+  const showPrompt = react.useMemo(
+    () => !promptEchoedInContent(assistantContent, question.prompt),
+    [assistantContent, question.prompt]
+  );
+  react.useEffect(() => {
+    if (!pending || !sessionId) return;
+    const handler = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      void adapter.pauseSession({ sessionId }).catch(() => {
+      });
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [adapter, sessionId, pending]);
+  const pick = react.useCallback(
+    async (label) => {
+      if (!sessionId || submitting) return;
+      setError(null);
+      setSubmitting(true);
+      try {
+        await adapter.submitAskUserQuestionResponse({
+          sessionId,
+          toolCallId: tc.id,
+          responses: [
+            { question: question.prompt, answer: label, is_other: false }
+          ]
+        });
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Submit failed.");
+        setSubmitting(false);
+      }
+    },
+    [adapter, sessionId, tc.id, question.prompt, submitting]
+  );
+  const stacked = choices.some((c) => !!c.description);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    showPrompt && /* @__PURE__ */ jsxRuntime.jsx(MessageResponse, { children: question.prompt }),
+    pending && choices.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          stacked ? "flex flex-col gap-1.5" : "flex flex-wrap gap-2",
+          "max-w-2xl"
+        ),
+        role: "group",
+        "aria-label": "Suggested answers",
+        children: choices.map((choice, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          QuickReply,
+          {
+            choice,
+            stacked,
+            disabled: submitting,
+            onSelect: () => void pick(choice.label)
+          },
+          i
+        ))
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }),
+    !answered && !pending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs italic text-muted-foreground/70", children: "No answer recorded." })
+  ] });
+}
+function QuickReply({
+  choice,
+  stacked,
+  disabled,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: onSelect,
+      className: cn(
+        "border border-border bg-background text-left text-foreground transition-colors",
+        "hover:border-foreground/30 hover:bg-muted",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        stacked ? "rounded-md px-3 py-2" : "rounded-full px-3.5 py-1.5 text-sm"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block", stacked && "text-sm"), children: choice.label }),
+        stacked && choice.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: choice.description })
+      ]
+    }
+  );
+}
+function BatchAsk({
+  tc,
+  questions,
+  viewMode
+}) {
   const { adapter, sessionId } = useAgentChatAdapterContext();
-  const args = react.useMemo(() => parseArgs(tc.args), [tc.args]);
-  const questions = args?.questions ?? [];
   const [active, setActive] = react.useState(0);
   const [selections, setSelections] = react.useState(
     () => questions.map(emptySelection)
@@ -4399,11 +4540,8 @@ function AskUserQuestionToolBlock({ tc }) {
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [handleCancel, handleSubmit, locked]);
-  if (questions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "ask_user_question: no questions provided" });
-  }
   if (locked) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestionLocked, { tc, questions });
+    return /* @__PURE__ */ jsxRuntime.jsx(BatchAskLocked, { tc, questions, viewMode });
   }
   const current = questions[active];
   const currentSel = selections[active] ?? emptySelection();
@@ -4481,7 +4619,7 @@ function AskUserQuestionToolBlock({ tc }) {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-            questions.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 tabular-nums", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 tabular-nums", children: [
               answeredCount,
               " of ",
               questions.length,
@@ -4490,11 +4628,11 @@ function AskUserQuestionToolBlock({ tc }) {
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70", children: "Esc to cancel" }),
             error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-destructive", children: error })
           ] }),
-          allAnswered || questions.length === 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+          allAnswered ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              disabled: !allAnswered || submitting,
+              disabled: submitting,
               onClick: () => void handleSubmit(),
               className: cn(
                 "shrink-0 rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors",
@@ -4604,9 +4742,10 @@ function Radio({ selected }) {
     }
   );
 }
-function AskUserQuestionLocked({
+function BatchAskLocked({
   tc,
-  questions
+  questions,
+  viewMode
 }) {
   const answers = tc.askUserQuestionAnswers;
   const byPrompt = new Map(
@@ -4631,7 +4770,7 @@ function AskUserQuestionLocked({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-500", children: "\u2192" }),
           " ",
           a.answer,
-          a.is_other && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[10px] text-muted-foreground/70", children: "(other)" })
+          a.is_other && viewMode === "expert" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[10px] text-muted-foreground/70", children: "(other)" })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-5 text-muted-foreground/60 italic", children: "\u2014 no answer \u2014" })
       ] }, i);
     }) })
@@ -5036,6 +5175,8 @@ function CodeRunToolBlock({
 function ToolCallBlock({
   tc,
   resolvedArtifactName,
+  assistantContent,
+  viewMode,
   onFileSelect
 }) {
   if (tc.toolName.startsWith("mcp__")) {
@@ -5078,7 +5219,14 @@ function ToolCallBlock({
     case "skill_manage":
       return /* @__PURE__ */ jsxRuntime.jsx(SkillManageToolBlock, { tc });
     case "ask_user_question":
-      return /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestionToolBlock, { tc });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AskUserQuestionToolBlock,
+        {
+          tc,
+          assistantContent,
+          viewMode
+        }
+      );
     case "create_artifact":
       return /* @__PURE__ */ jsxRuntime.jsx(ArtifactToolBlock, { tc, resolvedName: resolvedArtifactName });
     case "delegate_task":
@@ -5490,6 +5638,22 @@ function CommandEmpty({
     }
   );
 }
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:mb-1 **:[[cmdk-group-heading]]:rounded-sm **:[[cmdk-group-heading]]:bg-orange-100 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground dark:**:[[cmdk-group-heading]]:bg-orange-400/40 dark:**:[[cmdk-group-heading]]:text-foreground/90",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   children,
@@ -8391,13 +8555,20 @@ var PromptInputTextarea = ({
 var PromptInputFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  InputGroupAddon,
-  {
-    align: "block-end",
-    className: cn("justify-between gap-1", className),
-    ...props
-  }
+}) => (
+  // flex-wrap: the footer holds a left tools group (add, browser profile,
+  // workspace) and a right group (view mode, send). On a phone those stop
+  // fitting one line as soon as a profile or workspace chip appears, and a
+  // non-wrapping row crushes the icons instead. Wrapping only engages when
+  // the space is genuinely gone, so wider screens are unchanged.
+  /* @__PURE__ */ jsxRuntime.jsx(
+    InputGroupAddon,
+    {
+      align: "block-end",
+      className: cn("flex-wrap justify-between gap-1", className),
+      ...props
+    }
+  )
 );
 var PromptInputTools = ({
   className,
@@ -8511,44 +8682,6 @@ function splitComposerFiles(files) {
   return { images, pending };
 }
 
-// src/components/ui/popover.tsx
-init_utils();
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Popover.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-150 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-
 // src/components/ui/progress.tsx
 init_utils();
 function Progress({
@@ -8588,24 +8721,26 @@ var ContextContext = react.createContext(null);
 var useContextValue = () => {
   const context = react.useContext(ContextContext);
   if (!context) {
-    throw new Error("Context components must be used within Context");
+    throw new Error(
+      "Context components must be used within ContextValueProvider"
+    );
   }
   return context;
 };
-var Context = ({
+var ContextValueProvider = ({
   usedTokens,
   maxTokens,
   usage,
   modelId,
-  ...props
+  children
 }) => {
   const contextValue = react.useMemo(
     () => ({ maxTokens, modelId, usage, usedTokens }),
     [maxTokens, modelId, usage, usedTokens]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children });
 };
-var ContextIcon = () => {
+var ContextIcon = ({ className }) => {
   const { usedTokens, maxTokens } = useContextValue();
   const circumference = 2 * Math.PI * ICON_RADIUS;
   const usedPercent = usedTokens / maxTokens;
@@ -8614,6 +8749,7 @@ var ContextIcon = () => {
     "svg",
     {
       "aria-label": "Model context usage",
+      className,
       height: "20",
       role: "img",
       style: { color: "currentcolor" },
@@ -8652,19 +8788,6 @@ var ContextIcon = () => {
     }
   );
 };
-var ContextTrigger = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContextIcon, {}) }) });
-};
-var ContextContent = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverContent,
-  {
-    className: cn("min-w-60 divide-y overflow-hidden p-0", className),
-    ...props
-  }
-);
 var ContextContentHeader = ({
   children,
   className,
@@ -8844,6 +8967,9 @@ var ContextCacheUsage = ({
   );
 };
 
+// src/components/chat/chat-composer.tsx
+init_utils();
+
 // src/components/ui/item.tsx
 init_utils();
 var itemVariants = classVarianceAuthority.cva(
@@ -8966,6 +9092,120 @@ function ItemActions({ className, ...props }) {
   );
 }
 
+// src/components/ui/popover.tsx
+init_utils();
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-150 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+var MOBILE_QUERY = "(max-width: 767px)";
+function subscribe(onChange) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+function useIsMobile() {
+  return react.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    // No viewport when server-rendered; assume desktop, as the SDK does.
+    () => false
+  );
+}
+
+// src/components/ui/responsive-panel.tsx
+init_utils();
+function ResponsivePanel({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  children,
+  align = "start",
+  popoverClassName
+}) {
+  const isMobile = useIsMobile();
+  if (!isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          side: "top",
+          align,
+          className: cn("w-64 overflow-hidden rounded-xl p-1", popoverClassName),
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Dialog.Overlay,
+        {
+          "data-slot": "responsive-panel-overlay",
+          className: "fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        radixUi.Dialog.Content,
+        {
+          "data-slot": "responsive-panel-sheet",
+          "aria-describedby": void 0,
+          className: cn(
+            "fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg",
+            "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Title, { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1", children })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/components/ui/skeleton.tsx
 init_utils();
 function Skeleton({ className, ...props }) {
@@ -9139,6 +9379,7 @@ function SkillsEmptyState() {
     ] })
   ] });
 }
+var TOOLS_ITEM_CLASS = "gap-3 rounded-md px-3 py-2 pointer-coarse:min-h-11 pointer-coarse:text-[15px]";
 function ChatComposer(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(PromptInputProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ChatComposerInner, { ...props }) });
 }
@@ -9236,6 +9477,8 @@ function ChatComposerInner({
   isRunning,
   disabled = false,
   disabledReason,
+  awaitingAnswer = false,
+  placeholder,
   tokenUsage,
   onComposerError,
   showBrowser = false,
@@ -9259,7 +9502,6 @@ function ChatComposerInner({
   onViewModeChange
 }) {
   const { adapter } = useAgentChatAdapterContext();
-  const [profileMenuOpen, setProfileMenuOpen] = react.useState(false);
   const [browserProfiles, setBrowserProfiles] = react.useState(null);
   const loadBrowserProfiles = react.useCallback(() => {
     if (!adapter.listBrowserProfiles) return;
@@ -9272,16 +9514,15 @@ function ChatComposerInner({
     loadBrowserProfiles();
   }, [browserProfilesEnabled, browserProfileId, browserProfiles, loadBrowserProfiles]);
   const activeBrowserProfile = (browserProfiles ?? []).find((p) => p.id === browserProfileId) ?? null;
-  const profileTriggerLabel = activeBrowserProfile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-24 truncate text-xs", children: activeBrowserProfile.name });
   const { textInput, attachments } = usePromptInputController();
-  const status = isRunning ? "streaming" : disabled ? "error" : "ready";
+  const status = isRunning && !awaitingAnswer ? "streaming" : disabled ? "error" : "ready";
   const [adapterCommands, setAdapterCommands] = react.useState([]);
   const [skillsLoading, setSkillsLoading] = react.useState(false);
   const [buttonMenuOpen, setButtonMenuOpen] = react.useState(false);
   const [menuMode, setMenuMode] = react.useState("all");
   const [addMenuOpen, setAddMenuOpen] = react.useState(false);
   const [menuDismissed, setMenuDismissed] = react.useState(false);
-  const showSlashMenu = !menuDismissed && (textInput.value.startsWith("/") || buttonMenuOpen);
+  const showSlashMenu = !menuDismissed && !awaitingAnswer && (textInput.value.startsWith("/") || buttonMenuOpen);
   react.useEffect(() => {
     if (menuDismissed && !textInput.value.startsWith("/") && !buttonMenuOpen) {
       setMenuDismissed(false);
@@ -9477,16 +9718,13 @@ function ChatComposerInner({
         });
         return;
       }
-      if (isRunning) {
-        await onStop();
-      }
       await onSend(
         text,
         images.length > 0 ? images : void 0,
         pending.length > 0 ? pending : void 0
       );
     },
-    [onSend, onStop, onComposerError, isRunning, disabled]
+    [onSend, onComposerError, disabled]
   );
   const handlePromptInputError = react.useCallback(
     (err) => {
@@ -9494,6 +9732,59 @@ function ChatComposerInner({
     },
     [onComposerError]
   );
+  const [contextOpen, setContextOpen] = react.useState(false);
+  const contextPercentLabel = tokenUsage?.contextWindow ? `${Math.min(100, Math.round(tokenUsage.totalTokens / tokenUsage.contextWindow * 100))}%` : "0%";
+  const canAttach = !disabled && !awaitingAnswer;
+  const showPaneToggles = Boolean(
+    canShowBrowser && onToggleBrowser || canShowWorkspace && onToggleWorkspace
+  );
+  const canPickProfile = Boolean(
+    browserProfilesEnabled && onSelectBrowserProfile && adapter.listBrowserProfiles
+  );
+  const showToolsPanel = canAttach || showPaneToggles || canPickProfile;
+  const viewModeToggle = onViewModeChange ? /* @__PURE__ */ jsxRuntime.jsxs(
+    ButtonGroup,
+    {
+      "aria-label": "Chat view mode",
+      className: "overflow-hidden rounded-full border border-border bg-muted/40 p-0.5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PromptInputButton,
+          {
+            "aria-label": "Simple view",
+            "aria-pressed": viewMode === "simple",
+            tooltip: "Simple \u2014 just the conversation",
+            variant: viewMode === "simple" ? "secondary" : "ghost",
+            onClick: () => onViewModeChange("simple"),
+            className: cn(
+              // 32px is a comfortable segment for a cursor and a miss for a
+              // thumb, so touch takes both halves to the 44px floor.
+              "size-8 rounded-full pointer-coarse:size-11",
+              viewMode === "simple" && "shadow-sm"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "size-[18px] pointer-coarse:size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PromptInputButton,
+          {
+            "aria-label": "Advanced view",
+            "aria-pressed": viewMode === "expert",
+            tooltip: "Advanced \u2014 every step the agent took",
+            variant: viewMode === "expert" ? "secondary" : "ghost",
+            onClick: () => onViewModeChange("expert"),
+            className: cn(
+              // 32px is a comfortable segment for a cursor and a miss for a
+              // thumb, so touch takes both halves to the 44px floor.
+              "size-8 rounded-full pointer-coarse:size-11",
+              viewMode === "expert" && "shadow-sm"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, { className: "size-[18px] pointer-coarse:size-5" })
+          }
+        )
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Popover,
     {
@@ -9546,154 +9837,132 @@ function ChatComposerInner({
                 PromptInputTextarea,
                 {
                   ref: textareaRef,
-                  placeholder: disabled ? disabledReason ?? "Session disabled" : "Send a message...",
+                  placeholder: disabled ? disabledReason ?? "Session disabled" : placeholder ?? "Send a message...",
                   disabled
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsxs(PromptInputFooter, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(PromptInputTools, { children: [
-                  !disabled && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: addMenuOpen, onOpenChange: setAddMenuOpen, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputButton, { "aria-label": "Add", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-4" }) }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      PopoverContent,
-                      {
-                        side: "top",
-                        align: "start",
-                        className: "w-64 overflow-hidden rounded-xl p-1",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children: /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                  showToolsPanel && /* @__PURE__ */ jsxRuntime.jsx(
+                    ResponsivePanel,
+                    {
+                      open: addMenuOpen,
+                      onOpenChange: (open) => {
+                        setAddMenuOpen(open);
+                        if (open && canPickProfile && !browserProfileLocked && browserProfiles === null) {
+                          loadBrowserProfiles();
+                        }
+                      },
+                      title: "Composer tools",
+                      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                        PromptInputButton,
+                        {
+                          "aria-label": "Composer tools",
+                          tooltip: "Attach files, panes and browser profile",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-4" })
+                        }
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children: /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { className: "max-md:max-h-none", children: [
+                        canAttach && /* @__PURE__ */ jsxRuntime.jsxs(CommandGroup, { heading: "Attach", children: [
                           /* @__PURE__ */ jsxRuntime.jsxs(
                             CommandItem,
                             {
-                              disabled: true,
-                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              onSelect: () => {
+                                setAddMenuOpen(false);
+                                attachments.openFileDialog();
+                              },
+                              className: TOOLS_ITEM_CLASS,
                               children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CloudIcon, { className: "size-4 shrink-0 text-sky-500" }),
-                                "Add from OneDrive",
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto size-4 shrink-0 text-muted-foreground" })
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                "Add local files"
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
+                          /* @__PURE__ */ jsxRuntime.jsxs(CommandItem, { disabled: true, className: TOOLS_ITEM_CLASS, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CloudIcon, { className: "size-4 shrink-0 text-sky-500" }),
+                            "Add from OneDrive"
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(CommandItem, { disabled: true, className: TOOLS_ITEM_CLASS, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HardDriveIcon, { className: "size-4 shrink-0 text-emerald-500" }),
+                            "Add from Google Drive"
+                          ] })
+                        ] }),
+                        showPaneToggles && // Panes stay available while a question is pending —
+                        // only attachments are suppressed there.
+                        /* @__PURE__ */ jsxRuntime.jsxs(CommandGroup, { heading: "Panes", children: [
+                          canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
                             CommandItem,
                             {
-                              disabled: true,
-                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              onSelect: onToggleBrowser,
+                              "data-checked": showBrowser || void 0,
+                              className: TOOLS_ITEM_CLASS,
                               children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HardDriveIcon, { className: "size-4 shrink-0 text-emerald-500" }),
-                                "Add from Google Drive"
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                "Browser"
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
+                          canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsxRuntime.jsxs(
                             CommandItem,
                             {
-                              onSelect: () => {
-                                setAddMenuOpen(false);
-                                attachments.openFileDialog();
-                              },
-                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              onSelect: onToggleWorkspace,
+                              "data-checked": showWorkspace || void 0,
+                              className: TOOLS_ITEM_CLASS,
                               children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
-                                "Add local files"
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                "Workspace"
                               ]
                             }
                           )
-                        ] }) })
-                      }
-                    )
-                  ] }),
-                  canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsxRuntime.jsx(
-                    PromptInputButton,
-                    {
-                      "aria-label": showBrowser ? "Hide browser pane" : "Show browser pane",
-                      "aria-pressed": showBrowser,
-                      onClick: onToggleBrowser,
-                      tooltip: showBrowser ? "Hide browser pane" : "Show browser pane",
-                      className: showBrowser ? "bg-accent text-foreground" : void 0,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-4" })
-                    }
-                  ),
-                  browserProfilesEnabled && onSelectBrowserProfile && adapter.listBrowserProfiles && (browserProfileLocked ? (
-                    // A profile is bound at session creation; once a session is
-                    // active the choice can't change. Render disabled (via
-                    // aria-disabled, not the `disabled` attribute, so the
-                    // tooltip still shows on hover) with an explanation.
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      PromptInputButton,
-                      {
-                        "aria-label": "Select browser profile",
-                        "aria-disabled": true,
-                        "aria-pressed": !!browserProfileId,
-                        tooltip: activeBrowserProfile ? `Browser profile: ${activeBrowserProfile.name} (locked for this session)` : "A browser profile must be chosen before starting the session",
-                        className: `cursor-not-allowed opacity-50 ${browserProfileId ? "bg-accent text-foreground" : ""}`,
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.IdCardIcon, { className: "size-4" }),
-                          profileTriggerLabel
-                        ]
-                      }
-                    )
-                  ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                    Popover,
-                    {
-                      open: profileMenuOpen,
-                      onOpenChange: (open) => {
-                        setProfileMenuOpen(open);
-                        if (open) loadBrowserProfiles();
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          PromptInputButton,
-                          {
-                            "aria-label": "Select browser profile",
-                            "aria-pressed": !!browserProfileId,
-                            tooltip: activeBrowserProfile ? `Browser profile: ${activeBrowserProfile.name}` : "Select browser profile",
-                            className: browserProfileId ? "bg-accent text-foreground" : void 0,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.IdCardIcon, { className: "size-4" }),
-                              profileTriggerLabel
-                            ]
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          PopoverContent,
-                          {
-                            side: "top",
-                            align: "start",
-                            className: "w-64 overflow-hidden rounded-xl p-1",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children: /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: [
-                              { id: null, name: "No profile" },
-                              ...browserProfiles ?? []
-                            ].map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+                        ] }),
+                        canPickProfile && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: "Browser profile", children: browserProfileLocked ? (
+                          // A profile is bound at session creation and cannot
+                          // change mid-session. In a menu there is nothing to
+                          // hover, so the reason is stated outright rather
+                          // than hidden in a tooltip as it was on the button.
+                          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
                               CommandItem,
                               {
-                                onSelect: () => {
-                                  setProfileMenuOpen(false);
-                                  onSelectBrowserProfile(p.id);
-                                },
-                                "data-checked": (browserProfileId ?? null) === p.id || void 0,
-                                className: "gap-3 rounded-md px-3 py-2",
-                                children: p.name
+                                disabled: true,
+                                "data-checked": !!browserProfileId || void 0,
+                                className: TOOLS_ITEM_CLASS,
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.IdCardIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                  activeBrowserProfile?.name ?? "No profile"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pt-0.5 pb-1.5 text-xs text-muted-foreground", children: activeBrowserProfile ? "Locked for this session." : "A profile can only be chosen before the session starts." })
+                          ] })
+                        ) : (
+                          // data-checked lights CommandItem's built-in
+                          // trailing check on the selected entry.
+                          [
+                            { id: null, name: "No profile" },
+                            ...browserProfiles ?? []
+                          ].map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            CommandItem,
+                            {
+                              onSelect: () => {
+                                setAddMenuOpen(false);
+                                onSelectBrowserProfile?.(p.id);
                               },
-                              p.id ?? "none"
-                            )) }) })
-                          }
-                        )
-                      ]
-                    }
-                  )),
-                  canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsxRuntime.jsx(
-                    PromptInputButton,
-                    {
-                      "aria-label": showWorkspace ? "Hide workspace pane" : "Show workspace pane",
-                      "aria-pressed": showWorkspace,
-                      onClick: onToggleWorkspace,
-                      tooltip: showWorkspace ? "Hide workspace pane" : "Show workspace pane",
-                      className: showWorkspace ? "bg-accent text-foreground" : void 0,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { className: "size-4" })
+                              "data-checked": (browserProfileId ?? null) === p.id || void 0,
+                              className: TOOLS_ITEM_CLASS,
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.IdCardIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                p.name
+                              ]
+                            },
+                            p.id ?? "none"
+                          ))
+                        ) })
+                      ] }) })
                     }
                   ),
-                  !disabled && tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                    Context,
+                  !disabled && tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    ContextValueProvider,
                     {
                       usedTokens: tokenUsage.totalTokens,
                       maxTokens: tokenUsage.contextWindow,
@@ -9707,82 +9976,68 @@ function ChatComposerInner({
                         inputTokenDetails: void 0,
                         outputTokenDetails: void 0
                       },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ContextTrigger,
-                          {
-                            size: "icon-sm",
-                            className: "rounded-sm border border-input/70 text-foreground hover:bg-accent"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(ContextContent, { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(ContextContentHeader, {}),
-                          /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(ContextInputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.inputTokens.toLocaleString() })
-                            ] }) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(ContextOutputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.outputTokens.toLocaleString() })
-                            ] }) }),
-                            tokenUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextReasoningUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.reasoningTokens.toLocaleString() })
-                            ] }) }),
-                            tokenUsage.cachedInputTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextCacheUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.cachedInputTokens.toLocaleString() })
-                            ] }) })
-                          ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
-                          tokenUsage.totalTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-end gap-3 bg-secondary p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                            Button,
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        ResponsivePanel,
+                        {
+                          open: contextOpen,
+                          onOpenChange: setContextOpen,
+                          title: "Session context",
+                          align: "end",
+                          popoverClassName: "min-w-60 divide-y p-0",
+                          trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+                            PromptInputButton,
                             {
-                              type: "button",
-                              size: "xs",
-                              onClick: () => onSend("/compress"),
-                              children: "Compress"
+                              "aria-label": `Session context: ${contextPercentLabel} of the window used`,
+                              tooltip: "Session context",
+                              variant: "ghost",
+                              className: "h-9 gap-1 rounded-md border-0 bg-transparent px-1.5 text-muted-foreground hover:bg-accent/60 hover:text-foreground pointer-coarse:h-11",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ContextIcon, { className: "size-4" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] tabular-nums", children: contextPercentLabel })
+                              ]
                             }
-                          ) })
-                        ] })
-                      ]
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ContextContentHeader, {}),
+                            /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(ContextInputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.inputTokens.toLocaleString() })
+                              ] }) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(ContextOutputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.outputTokens.toLocaleString() })
+                              ] }) }),
+                              tokenUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextReasoningUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.reasoningTokens.toLocaleString() })
+                              ] }) }),
+                              tokenUsage.cachedInputTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextCacheUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.cachedInputTokens.toLocaleString() })
+                              ] }) })
+                            ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
+                            tokenUsage.totalTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-end gap-3 bg-secondary p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                              Button,
+                              {
+                                type: "button",
+                                size: "xs",
+                                className: "pointer-coarse:h-11 pointer-coarse:px-4 pointer-coarse:text-sm",
+                                onClick: () => {
+                                  setContextOpen(false);
+                                  onSend("/compress");
+                                },
+                                children: "Compress"
+                              }
+                            ) })
+                          ]
+                        }
+                      )
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  onViewModeChange && /* @__PURE__ */ jsxRuntime.jsxs(
-                    ButtonGroup,
-                    {
-                      "aria-label": "Chat view mode",
-                      className: "overflow-hidden rounded-md border border-border",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Button,
-                          {
-                            type: "button",
-                            size: "xs",
-                            className: "capitalize font-normal",
-                            variant: viewMode === "simple" ? "secondary" : "ghost",
-                            "aria-pressed": viewMode === "simple",
-                            onClick: () => onViewModeChange("simple"),
-                            children: "Simple"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Button,
-                          {
-                            type: "button",
-                            size: "xs",
-                            className: "capitalize font-normal",
-                            variant: viewMode === "expert" ? "secondary" : "ghost",
-                            "aria-pressed": viewMode === "expert",
-                            onClick: () => onViewModeChange("expert"),
-                            children: "Advanced"
-                          }
-                        )
-                      ]
-                    }
-                  ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                  viewModeToggle,
                   !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                     PromptInputSubmit,
                     {
@@ -11723,16 +11978,34 @@ var WORKING_ON_IT_DELAY_MS = 250;
 function hasUserFacingAskContent(msg) {
   return !!msg.toolCalls?.some((tc) => tc.toolName === "ask_user_question");
 }
-function isAwaitingUserInput(messages) {
+function pendingAskCall(messages) {
   for (let i = messages.length - 1; i >= 0; i--) {
     const m = messages[i];
-    if (m.role === "user") return false;
+    if (m.role === "user") return null;
     if (m.role !== "assistant") continue;
-    return !!m.toolCalls?.some(
+    return m.toolCalls?.find(
       (tc) => tc.toolName === "ask_user_question" && tc.status === "running"
-    );
+    ) ?? null;
   }
-  return false;
+  return null;
+}
+function askComposerPolicy(pending) {
+  if (!pending) return null;
+  const questions = askQuestionsOf(pending);
+  if (!isConversationalAsk(questions)) {
+    return { locked: true, reason: "Answer the questions above to continue." };
+  }
+  const question = questions[0];
+  if (!conversationalAskAcceptsFreeText(question)) {
+    return {
+      locked: true,
+      reason: "Pick one of the options above to continue."
+    };
+  }
+  return {
+    locked: false,
+    placeholder: hasChoices(question) ? "Pick one above, or type your answer\u2026" : "Type your answer\u2026"
+  };
 }
 function messageToEntries(msg, isLast, artifactFallbacks) {
   if (msg.role === "system") {
@@ -11815,7 +12088,14 @@ function messageToEntries(msg, isLast, artifactFallbacks) {
         const parsed = parseTerminalResult(tc.result, tc.args);
         if (parsed && (parsed.exit_code !== 0 || parsed.error)) continue;
       }
-      entries.push({ kind: "tool", key: tc.id, tc });
+      entries.push({
+        kind: "tool",
+        key: tc.id,
+        tc,
+        // Only ask_user_question reads this, to suppress a prompt the
+        // agent already spelled out in its message body.
+        assistantContent: tc.toolName === "ask_user_question" ? msg.content : void 0
+      });
     }
   }
   if (effectiveHasContent) {
@@ -12060,6 +12340,8 @@ function TimelineEntryItem({
           {
             tc: entry.tc,
             resolvedArtifactName: entry.resolvedArtifactName,
+            assistantContent: entry.assistantContent,
+            viewMode: "expert",
             onFileSelect
           }
         ),
@@ -12583,7 +12865,14 @@ function IterationGroup({
     (tc) => tc.toolName === "ask_user_question"
   );
   if (askCall) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 py-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestionToolBlock, { tc: askCall }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 py-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AskUserQuestionToolBlock,
+      {
+        tc: askCall,
+        assistantContent: message.content,
+        viewMode: "simple"
+      }
+    ) });
   }
   if (isIterationLive(message)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12926,7 +13215,12 @@ function ChatThread({
   onOpenIntegrations
 }) {
   const groups = react.useMemo(() => groupMessages(messages), [messages]);
-  const awaitingInput = react.useMemo(() => isAwaitingUserInput(messages), [messages]);
+  const pendingAsk = react.useMemo(() => pendingAskCall(messages), [messages]);
+  const askPolicy = react.useMemo(
+    () => askComposerPolicy(pendingAsk),
+    [pendingAsk?.id, pendingAsk?.args]
+  );
+  const awaitingInput = askPolicy !== null;
   const orbActivity = react.useMemo(
     () => deriveOrbActivity(
       messages,
@@ -12935,8 +13229,9 @@ function ChatThread({
     [messages, viewMode]
   );
   const showWorkingOnIt = useDelayedRunningIndicator(isRunning) && !awaitingInput;
-  const composerDisabled = disabled || awaitingInput;
-  const composerDisabledReason = awaitingInput ? "Answer the question above to continue." : disabledReason;
+  const composerLocked = askPolicy?.locked ?? false;
+  const composerDisabled = disabled || composerLocked;
+  const composerDisabledReason = composerLocked ? askPolicy?.reason : disabledReason;
   const artifactFallbacks = react.useMemo(() => {
     const fallbacks = {};
     const createArtifactToolCallIds = [];
@@ -12981,6 +13276,8 @@ function ChatThread({
         isRunning,
         disabled: composerDisabled,
         disabledReason: composerDisabledReason,
+        awaitingAnswer: askPolicy !== null && !askPolicy.locked,
+        placeholder: askPolicy?.placeholder,
         tokenUsage,
         onComposerError,
         showBrowser,
@@ -13013,10 +13310,16 @@ function ChatThread({
     )
   ] });
   if (messages.length === 0 && !isLoadingHistory && !disabled) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center justify-center overflow-hidden bg-background px-3 text-base", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-8 text-center text-2xl font-bold text-foreground", children: "What should we do ?" }),
-      composerArea
-    ] }) });
+    return (
+      // A centred hero is a deliberate desktop look. On a phone it leaves the
+      // input floating mid-screen with dead space under it, and the keyboard
+      // then opens across that gap. There the composer keeps its usual place
+      // at the bottom edge and the greeting takes the space above it.
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-end overflow-hidden bg-background px-3 text-base md:justify-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-1 flex-col justify-center md:flex-none", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-6 text-center text-2xl font-bold text-foreground md:mb-8", children: "What should we do ?" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: composerArea })
+      ] })
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-base", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
@@ -13096,6 +13399,7 @@ function IntegrationsBandSlot({
     }
   );
 }
+init_utils();
 
 // src/components/ai-elements/file-tree.tsx
 init_utils();
@@ -13265,9 +13569,6 @@ function FileTreeFile({
     }
   );
 }
-
-// src/components/workspace/workspace-panel.tsx
-init_utils();
 var SKELETON_WIDTHS2 = [75, 60, 90, 65, 80, 70, 85, 55];
 var DEFAULT_WIDTH = 400;
 var MIN_WIDTH = 300;
@@ -13322,14 +13623,22 @@ function RenderEntries({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: entries.map((entry) => {
     if (entry.kind === "dir") {
-      return /* @__PURE__ */ jsxRuntime.jsx(FileTreeFolder, { name: entry.name, path: entry.path, children: entry.children && entry.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        RenderEntries,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FileTreeFolder,
         {
-          entries: entry.children,
-          onDelete,
-          downloadUrlFor
-        }
-      ) }, entry.path);
+          name: entry.name,
+          path: entry.path,
+          children: entry.children && entry.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            RenderEntries,
+            {
+              entries: entry.children,
+              onDelete,
+              downloadUrlFor
+            }
+          )
+        },
+        entry.path
+      );
     }
     const fileName2 = entry.name;
     return /* @__PURE__ */ jsxRuntime.jsxs(FileTreeFile, { name: entry.name, path: entry.path, children: [
@@ -13388,6 +13697,7 @@ function WorkspacePanel({
   const [deleteTarget, setDeleteTarget] = react.useState(null);
   const [expandedPaths, setExpandedPaths] = react.useState(/* @__PURE__ */ new Set());
   const [width, setWidth] = react.useState(DEFAULT_WIDTH);
+  const narrow = useIsMobile();
   const sessionIdRef = react.useRef(sessionId);
   const isResizing = react.useRef(false);
   const startX = react.useRef(0);
@@ -13537,7 +13847,14 @@ function WorkspacePanel({
         setDeleteTarget(null);
       }
     },
-    [adapter, disabled, fetchTree, onSelectedPathChange, selectedPath, sessionId]
+    [
+      adapter,
+      disabled,
+      fetchTree,
+      onSelectedPathChange,
+      selectedPath,
+      sessionId
+    ]
   );
   const onResizeStart = react.useCallback(
     (event) => {
@@ -13577,11 +13894,11 @@ function WorkspacePanel({
       "data-testid": "workspace-panel",
       className: cn(
         "relative z-10 flex h-full min-h-0 flex-col overflow-hidden border-l border-muted-foreground/20 bg-card",
-        fillParent && "w-full"
+        (fillParent || narrow) && "w-full"
       ),
-      style: fillParent ? void 0 : { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
+      style: fillParent || narrow ? void 0 : { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
       children: [
-        !fillParent && /* @__PURE__ */ jsxRuntime.jsx(
+        !(fillParent || narrow) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "absolute inset-y-0 left-0 z-20 w-1.5 cursor-col-resize transition-colors hover:bg-primary/20 active:bg-primary/30",
@@ -13754,10 +14071,18 @@ function ConfirmDialog2({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "destructive", disabled: loading, onClick: handleConfirm, children: [
-            loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
-            confirmLabel
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "destructive",
+              disabled: loading,
+              onClick: handleConfirm,
+              children: [
+                loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
+                confirmLabel
+              ]
+            }
+          )
         ] })
       ] })
     }
@@ -14056,7 +14381,11 @@ function applyAgentChatEvent(state, event) {
     case "ask_user_question.response":
       return withMessages(
         nextState,
-        applyAskUserQuestionResponse(nextState.messages, event.data)
+        applyAskUserQuestionResponse(
+          nextState.messages,
+          event.eventId,
+          event.data
+        )
       );
     case "policy.denied":
       return applyPolicyDenied(nextState, event.data);
@@ -14807,34 +15136,59 @@ function applyUserFeedback(messages, data) {
   }
   return messages;
 }
-function applyAskUserQuestionResponse(messages, data) {
+function applyAskUserQuestionResponse(messages, eventId, data) {
   const targetToolId = stringValue2(data.tool_call_id);
   const responses = Array.isArray(data.responses) ? data.responses : void 0;
   if (!targetToolId || !responses) return messages;
+  const answers = responses.map((response) => {
+    const row = objectValue(response) ?? {};
+    return {
+      question: stringValue2(row.question),
+      answer: stringValue2(row.answer),
+      is_other: Boolean(row.is_other)
+    };
+  });
   const next = [...messages];
   for (let i = next.length - 1; i >= 0; i--) {
     const msg = next[i];
     if (!msg?.toolCalls?.some((tc) => tc.id === targetToolId)) continue;
+    const alreadyAnswered = msg.toolCalls.some(
+      (tc) => tc.id === targetToolId && tc.askUserQuestionAnswers !== void 0
+    );
+    if (alreadyAnswered) return messages;
     next[i] = {
       ...msg,
       toolCalls: msg.toolCalls.map(
-        (tc) => tc.id === targetToolId ? {
-          ...tc,
-          askUserQuestionAnswers: responses.map((response) => {
-            const row = objectValue(response) ?? {};
-            return {
-              question: stringValue2(row.question),
-              answer: stringValue2(row.answer),
-              is_other: Boolean(row.is_other)
-            };
-          })
-        } : tc
+        (tc) => tc.id === targetToolId ? { ...tc, askUserQuestionAnswers: answers } : tc
       )
     };
-    return next;
+    return appendConversationalAnswer(next, i, eventId, answers);
   }
   return messages;
 }
+function appendConversationalAnswer(messages, askIndex, eventId, answers) {
+  if (answers.length !== 1) return messages;
+  const answer = answers[0].answer.trim();
+  if (!answer) return messages;
+  const id = `evt-${eventId}`;
+  if (messages.some((m) => m.id === id)) return messages;
+  const next = [...messages];
+  for (let i = askIndex + 1; i < next.length; i++) {
+    const msg = next[i];
+    if (msg.role !== "user" || !msg.id.startsWith("local-")) continue;
+    if (msg.status === "error") continue;
+    next[i] = { ...msg, id, content: answer, status: "complete" };
+    return next;
+  }
+  next.push({
+    id,
+    role: "user",
+    content: answer,
+    createdAt: /* @__PURE__ */ new Date(),
+    status: "complete"
+  });
+  return next;
+}
 function applyPolicyDenied(state, data) {
   const messages = [...state.messages];
   const policyIdx = findLastAssistantIndex(messages);
@@ -15526,6 +15880,11 @@ function parseGoalDefinition(content) {
 var RIGHT_STACK_STYLE = {
   ["--right-stack-w"]: "440px"
 };
+var MOBILE_PANE_LABELS = {
+  chat: "Chat",
+  browser: "Browser",
+  workspace: "Workspace"
+};
 function AgentChat({
   adapter,
   agentId,
@@ -15598,7 +15957,14 @@ function AgentChat({
   const handleToggleWorkspace = react.useCallback(() => {
     setShowWorkspace((prev) => !prev);
   }, []);
-  const showMobileToggle = rightStackVisible;
+  const mobilePanes = react.useMemo(() => {
+    const panes = ["chat"];
+    if (browserVisible) panes.push("browser");
+    if (workspaceVisible) panes.push("workspace");
+    return panes;
+  }, [browserVisible, workspaceVisible]);
+  const activeMobilePane = mobilePanes.includes(mobileView) ? mobileView : "chat";
+  const showMobileToggle = mobilePanes.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsx(
     AgentChatAdapterProvider,
     {
@@ -15625,43 +15991,36 @@ function AgentChat({
           ),
           style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
-            showMobileToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex shrink-0 border-b border-line bg-card", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setMobileView("chat"),
-                  "aria-pressed": mobileView === "chat",
-                  className: cn(
-                    "flex-1 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
-                    mobileView === "chat" ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
-                  ),
-                  children: "Chat"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setMobileView("workspace"),
-                  "aria-pressed": mobileView === "workspace",
-                  className: cn(
-                    "flex-1 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
-                    mobileView === "workspace" ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
-                  ),
-                  children: "Workspace"
-                }
-              )
-            ] }),
+            showMobileToggle && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "mobile-pane-toggle",
+                className: "md:hidden flex shrink-0 border-b border-line bg-card",
+                children: mobilePanes.map((pane) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setMobileView(pane),
+                    "aria-pressed": activeMobilePane === pane,
+                    className: cn(
+                      "flex-1 min-h-11 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
+                      activeMobilePane === pane ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
+                    ),
+                    children: MOBILE_PANE_LABELS[pane]
+                  },
+                  pane
+                ))
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 "data-testid": "chat-panel",
-                "data-mobile-view": mobileView,
+                "data-mobile-view": activeMobilePane,
                 className: cn(
-                  // Phone: full width column, hidden when workspace tab active.
+                  // Phone: full width column, hidden while another pane is picked.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
-                  showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
+                  showMobileToggle && "data-[mobile-view=browser]:hidden data-[mobile-view=workspace]:hidden md:flex!",
                   // md+: positioning depends on whether the browser/workspace
                   // right stack is laid out. When the browser pane is shown
                   // we pin a fixed-width column on the right and absolutely
@@ -15718,7 +16077,7 @@ function AgentChat({
               "div",
               {
                 "data-testid": "right-stack",
-                "data-mobile-view": mobileView,
+                "data-mobile-view": activeMobilePane,
                 className: cn(
                   // Phone: full width column, hidden when chat tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
@@ -15736,9 +16095,13 @@ function AgentChat({
                     "div",
                     {
                       "data-testid": "browser-panel",
+                      "data-mobile-view": activeMobilePane,
                       className: cn(
                         "min-h-0 w-full overflow-hidden",
-                        bothPanesVisible ? "h-1/2 border-b border-line" : "h-full"
+                        // With both panes the desktop splits the column in half.
+                        // A phone gives whichever pane is selected the whole
+                        // height instead — see the mobile toggle above.
+                        bothPanesVisible ? "h-full data-[mobile-view=workspace]:hidden md:block! md:h-1/2 md:border-b md:border-line" : "h-full"
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         BrowserPane,
@@ -15755,7 +16118,8 @@ function AgentChat({
                     "div",
                     {
                       "data-testid": "workspace-panel-frame",
-                      className: bothPanesVisible ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
+                      "data-mobile-view": activeMobilePane,
+                      className: bothPanesVisible ? "h-full min-h-0 w-full overflow-hidden data-[mobile-view=browser]:hidden md:block! md:h-1/2" : "min-h-0 h-full",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         WorkspacePanel,
                         {
@@ -16055,7 +16419,7 @@ function IntegrationsPage({ agentId, adapter, onBack }) {
       {
         type: "button",
         onClick: onBack,
-        className: "flex w-fit items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
+        className: "-mx-2 inline-flex min-h-11 w-fit items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground pointer-fine:mx-0 pointer-fine:min-h-0 pointer-fine:px-0 pointer-fine:hover:text-foreground",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-4 w-4" }),
           "Back"
@@ -16199,7 +16563,7 @@ function CodingAgentsPanel({ agentId, adapter, onBack }) {
       {
         type: "button",
         onClick: onBack,
-        className: "flex w-fit items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
+        className: "-mx-2 inline-flex min-h-11 w-fit items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground pointer-fine:mx-0 pointer-fine:min-h-0 pointer-fine:px-0 pointer-fine:hover:text-foreground",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-4 w-4" }),
           "Back"
@@ -16340,7 +16704,7 @@ function ProviderCard({
           type: "button",
           disabled: busy,
           onClick: submit,
-          className: "inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs text-foreground hover:bg-accent disabled:opacity-60",
+          className: "inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-3 text-xs text-foreground disabled:opacity-60 pointer-fine:min-h-0 pointer-fine:py-1.5 pointer-fine:hover:bg-accent",
           children: [
             busy && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-3.5 w-3.5 animate-spin" }),
             connected ? "Update" : "Connect"
@@ -16360,6 +16724,65 @@ function ProviderCard({
     ] })
   ] });
 }
+
+// src/components/inbox/inbox-answers.ts
+function hasChoices2(question) {
+  return (question.choices?.length ?? 0) > 0;
+}
+function parseInboxQuestions(item) {
+  const raw = item.payload.questions;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((entry) => {
+    const question = entry;
+    const choices = Array.isArray(question.choices) ? question.choices.map((choice) => ({
+      label: typeof choice.label === "string" ? choice.label : "",
+      description: typeof choice.description === "string" ? choice.description : void 0
+    })).filter((choice) => choice.label) : void 0;
+    return {
+      prompt: typeof question.prompt === "string" ? question.prompt : "",
+      choices,
+      allowOther: question.allow_other !== false
+    };
+  }).filter((question) => question.prompt);
+}
+function isOtherAnswer(question, draft) {
+  return hasChoices2(question) && !!draft?.useOther;
+}
+function answerText(question, draft) {
+  const fromMenu = hasChoices2(question) && !draft?.useOther;
+  return (fromMenu ? draft?.picked ?? "" : draft?.typed ?? "").trim();
+}
+function buildInboxResponse(question, draft) {
+  return {
+    question: question.prompt,
+    answer: answerText(question, draft),
+    is_other: isOtherAnswer(question, draft)
+  };
+}
+var TICK_MS = 3e4;
+function formatExpiresIn(expiresAtIso, nowMs) {
+  const remainingMs = Date.parse(expiresAtIso) - nowMs;
+  if (remainingMs <= 0) return "Expired";
+  if (remainingMs < 6e4) return "Expires in under a minute";
+  const minutes = Math.round(remainingMs / 6e4);
+  return `Expires in ~${minutes} minute${minutes === 1 ? "" : "s"}`;
+}
+function useAnswerWindow(expiresAtIso) {
+  const [now, setNow] = react.useState(() => Date.now());
+  react.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), TICK_MS);
+    return () => clearInterval(id);
+  }, []);
+  if (!expiresAtIso) {
+    return { expired: false, label: "" };
+  }
+  return {
+    expired: Date.parse(expiresAtIso) <= now,
+    label: formatExpiresIn(expiresAtIso, now)
+  };
+}
+
+// src/components/inbox/inbox-panel.tsx
 init_utils();
 var DEFAULT_LIMIT = 50;
 function requireInboxAdapter(adapter) {
@@ -16394,8 +16817,33 @@ function kindIcon(kind) {
   if (kind === "progress_checkin") return lucideReact.TimerIcon;
   return lucideReact.CircleDotIcon;
 }
+var VIEWS = {
+  active: {
+    statuses: ["pending"],
+    kinds: ["input_required", "action_required", "governance_gate"],
+    empty: "Nothing needs you right now"
+  },
+  updates: {
+    statuses: ["pending"],
+    kinds: ["task_complete", "progress_checkin"],
+    empty: "No news from your agent"
+  },
+  history: {
+    statuses: ["acknowledged", "responded", "expired"],
+    empty: "No history yet"
+  }
+};
+var VIEW_NAMES = Object.keys(VIEWS);
+function belongsToView(item, view) {
+  const kinds = VIEWS[view].kinds;
+  return VIEWS[view].statuses.includes(item.status) && (kinds === void 0 || kinds.includes(item.kind));
+}
 function sortItems(items) {
-  return [...items].sort((a, b) => {
+  const byId = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    if (!byId.has(item.id)) byId.set(item.id, item);
+  }
+  return [...byId.values()].sort((a, b) => {
     if (a.createdAt !== b.createdAt) return a.createdAt > b.createdAt ? -1 : 1;
     return b.id - a.id;
   });
@@ -16409,37 +16857,106 @@ function InboxBody({ body, muted }) {
     }
   );
 }
+var FIELD_CLASS = "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50";
+function errorMessage(error, fallback) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+function useAction() {
+  const [error, setError] = react.useState(null);
+  const [busy, setBusy] = react.useState(false);
+  const run = react.useCallback(
+    async (fallback, action) => {
+      setBusy(true);
+      setError(null);
+      try {
+        await action();
+      } catch (err) {
+        setError(errorMessage(err, fallback));
+      } finally {
+        setBusy(false);
+      }
+    },
+    []
+  );
+  return { error, busy, run };
+}
+function ActionError({ message }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: message });
+}
+function ExpiryNote({ label, expired }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: cn(
+        "text-xs",
+        expired ? "text-muted-foreground" : "text-foreground"
+      ),
+      children: expired ? "The agent stopped waiting for this answer and moved on, so it can no longer be submitted." : `${label}. Deleting it will not answer the agent; it only clears it from your inbox.`
+    }
+  );
+}
+var OTHER_OPTION = "other";
 function QuestionInput({
-  prompt,
-  choices,
+  question,
+  draft,
   disabled,
-  value,
-  onChange
+  onPickChoice,
+  onChooseOther,
+  onType
 }) {
+  const { prompt, choices, allowOther } = question;
+  const typed = draft?.typed ?? "";
+  const useOther = !!draft?.useOther;
   if (choices && choices.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        "aria-label": prompt,
-        className: "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50",
-        disabled,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select" }),
-          choices.map((choice) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: choice.label, children: choice.label }, choice.label))
-        ]
-      }
+    const pickedIndex = choices.findIndex(
+      (choice) => choice.label === draft?.picked
     );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          "aria-label": prompt,
+          className: FIELD_CLASS,
+          disabled,
+          value: useOther ? OTHER_OPTION : pickedIndex >= 0 ? String(pickedIndex) : "",
+          onChange: (event) => {
+            const value = event.target.value;
+            if (value === OTHER_OPTION) {
+              onChooseOther();
+              return;
+            }
+            const choice = choices[Number(value)];
+            if (choice) onPickChoice(choice.label);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select" }),
+            choices.map((choice, index) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(index), children: choice.label }, choice.label)),
+            allowOther && /* @__PURE__ */ jsxRuntime.jsx("option", { value: OTHER_OPTION, children: "Other" })
+          ]
+        }
+      ),
+      useOther && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "aria-label": `${prompt} (other)`,
+          className: FIELD_CLASS,
+          placeholder: "Type your answer\u2026",
+          disabled,
+          value: typed,
+          onChange: (event) => onType(event.target.value)
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       "aria-label": prompt,
-      className: "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50",
+      className: FIELD_CLASS,
       disabled,
-      value,
-      onChange: (event) => onChange(event.target.value)
+      value: typed,
+      onChange: (event) => onType(event.target.value)
     }
   );
 }
@@ -16450,47 +16967,45 @@ function InboxDetailActions({
   onSessionSelect,
   children
 }) {
-  const [deleting, setDeleting] = react.useState(false);
+  const { error, busy: deleting, run } = useAction();
   async function deleteItem() {
     if (!adapter.deleteInboxItem) return;
-    setDeleting(true);
-    try {
-      await onDeleted(item.id);
-    } finally {
-      setDeleting(false);
-    }
+    await run("Failed to delete", () => onDeleted(item.id));
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        size: "sm",
-        onClick: () => onSessionSelect?.(item.sessionId, item),
-        "aria-label": "Open session",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "size-3.5" }),
-          "Open session"
-        ]
-      }
-    ),
-    children,
-    adapter.deleteInboxItem && /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        size: "sm",
-        variant: "ghost",
-        onClick: () => void deleteItem(),
-        disabled: deleting,
-        "aria-label": "Delete inbox item",
-        title: "Delete inbox item",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: "size-3.5" }),
-          deleting ? "Deleting" : "Delete"
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          onClick: () => onSessionSelect?.(item.sessionId, item),
+          "aria-label": "Open session",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "size-3.5" }),
+            "Open session"
+          ]
+        }
+      ),
+      children,
+      adapter.deleteInboxItem && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: () => void deleteItem(),
+          disabled: deleting,
+          "aria-label": "Delete inbox item",
+          title: "Delete inbox item",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: "size-3.5" }),
+            deleting ? "Deleting" : "Delete"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 function InputRequiredDetail({
@@ -16500,36 +17015,31 @@ function InputRequiredDetail({
   onDeleted,
   onSessionSelect
 }) {
-  const questions = Array.isArray(item.payload.questions) ? item.payload.questions.map((question) => ({
-    prompt: typeof question.prompt === "string" ? question.prompt : "",
-    choices: Array.isArray(question.choices) ? question.choices.map((choice) => ({
-      label: typeof choice.label === "string" ? choice.label : "",
-      description: typeof choice.description === "string" ? choice.description : void 0
-    })).filter((choice) => choice.label) : void 0
-  })).filter((question) => question.prompt) : [];
-  const [answers, setAnswers] = react.useState({});
-  const [submitting, setSubmitting] = react.useState(false);
-  const disabled = item.status !== "pending" || submitting;
-  const canSubmit = questions.every((question) => answers[question.prompt]?.trim());
+  const questions = react.useMemo(() => parseInboxQuestions(item), [item]);
+  const [drafts, setDrafts] = react.useState({});
+  const { error, busy: submitting, run } = useAction();
+  const { expired, label: expiryLabel } = useAnswerWindow(item.expiresAt);
+  const pending = item.status === "pending" && !expired;
+  const disabled = !pending || submitting;
+  const editDraft = (prompt, patch) => setDrafts((current) => ({
+    ...current,
+    [prompt]: { ...current[prompt], ...patch }
+  }));
+  const canSubmit = questions.length > 0 && questions.every((question) => answerText(question, drafts[question.prompt]));
   async function submit() {
     const toolCallId = typeof item.payload.tool_call_id === "string" ? item.payload.tool_call_id : "";
     if (!toolCallId || !canSubmit) return;
-    setSubmitting(true);
-    try {
-      const responses = questions.map((question) => ({
-        question: question.prompt,
-        answer: answers[question.prompt]?.trim() ?? "",
-        is_other: false
-      }));
+    await run("Failed to submit your answer", async () => {
+      const responses = questions.map(
+        (question) => buildInboxResponse(question, drafts[question.prompt])
+      );
       await adapter.submitAskUserQuestionResponse({
         sessionId: item.sessionId,
         toolCallId,
         responses
       });
       onUpdated(await adapter.getInboxItem({ itemId: item.id }));
-    } finally {
-      setSubmitting(false);
-    }
+    });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     item.body && /* @__PURE__ */ jsxRuntime.jsx(InboxBody, { body: item.body, muted: true }),
@@ -16538,17 +17048,25 @@ function InputRequiredDetail({
       /* @__PURE__ */ jsxRuntime.jsx(
         QuestionInput,
         {
-          prompt: question.prompt,
-          choices: question.choices,
+          question,
+          draft: drafts[question.prompt],
           disabled,
-          value: answers[question.prompt] ?? "",
-          onChange: (value) => setAnswers((current) => ({
-            ...current,
-            [question.prompt]: value
-          }))
+          onPickChoice: (label) => (
+            // Dropping the typed value keeps an abandoned draft from
+            // resurfacing if the user switches back to Other.
+            editDraft(question.prompt, {
+              picked: label,
+              typed: "",
+              useOther: false
+            })
+          ),
+          onChooseOther: () => editDraft(question.prompt, { useOther: true }),
+          onType: (value) => editDraft(question.prompt, { typed: value })
         }
       )
     ] }, question.prompt)),
+    item.status === "pending" && /* @__PURE__ */ jsxRuntime.jsx(ExpiryNote, { label: expiryLabel, expired }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InboxDetailActions,
       {
@@ -16578,8 +17096,11 @@ function AckDetail({
   onDeleted,
   onSessionSelect
 }) {
+  const { error, busy, run } = useAction();
   async function acknowledge() {
-    onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+    await run("Failed to acknowledge", async () => {
+      onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+    });
   }
   const outcome = typeof item.payload.outcome === "string" ? item.payload.outcome : "";
   const duration = typeof item.payload.duration_seconds === "number" ? item.payload.duration_seconds : null;
@@ -16594,6 +17115,7 @@ function AckDetail({
       duration,
       " s)"
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InboxDetailActions,
       {
@@ -16607,10 +17129,11 @@ function AckDetail({
             type: "button",
             size: "sm",
             onClick: () => void acknowledge(),
+            disabled: busy,
             "aria-label": "Acknowledge inbox item",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" }),
-              "Acknowledge"
+              busy ? "Saving" : "Acknowledge"
             ]
           }
         )
@@ -16625,15 +17148,18 @@ function GovernanceDetail({
   onDeleted,
   onSessionSelect
 }) {
+  const { error, busy, run } = useAction();
   async function decide(decision) {
-    onUpdated(
-      await adapter.respondGovernanceInboxItem({ itemId: item.id, decision })
-    );
+    await run(`Failed to ${decision}`, async () => {
+      onUpdated(
+        await adapter.respondGovernanceInboxItem({ itemId: item.id, decision })
+      );
+    });
   }
   const toolName = typeof item.payload.tool_name === "string" ? item.payload.tool_name : "tool";
   const args = typeof item.payload.arguments_excerpt === "string" ? item.payload.arguments_excerpt : "";
   const reason = typeof item.payload.deny_reason === "string" ? item.payload.deny_reason : "";
-  const disabled = item.status !== "pending";
+  const disabled = item.status !== "pending" || busy;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-base font-semibold text-foreground", children: [
@@ -16644,6 +17170,7 @@ function GovernanceDetail({
       reason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: reason })
     ] }),
     args && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto border border-line bg-muted p-3 text-xs", children: args }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       InboxDetailActions,
       {
@@ -16685,23 +17212,22 @@ function ActionRequiredDetail({
   onDeleted,
   onSessionSelect
 }) {
-  const [submitting, setSubmitting] = react.useState(false);
+  const { error, busy: submitting, run } = useAction();
   const actionType = typeof item.payload.action_type === "string" ? item.payload.action_type : "";
   const context = typeof item.payload.context === "string" ? item.payload.context : "";
   const disabled = item.status !== "pending" || submitting || !adapter.respondActionRequiredInboxItem;
   async function complete() {
-    if (!adapter.respondActionRequiredInboxItem) return;
-    setSubmitting(true);
-    try {
-      onUpdated(await adapter.respondActionRequiredInboxItem({ itemId: item.id }));
-    } finally {
-      setSubmitting(false);
-    }
+    const respond = adapter.respondActionRequiredInboxItem;
+    if (!respond) return;
+    await run("Failed to mark the action complete", async () => {
+      onUpdated(await respond({ itemId: item.id }));
+    });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     item.body && /* @__PURE__ */ jsxRuntime.jsx(InboxBody, { body: item.body }),
     context && context !== item.body && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: context }),
     actionType && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: actionType }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InboxDetailActions,
       {
@@ -16734,8 +17260,11 @@ function ProgressDetail({
   onDeleted,
   onSessionSelect
 }) {
+  const { error, busy, run } = useAction();
   async function acknowledge() {
-    onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+    await run("Failed to acknowledge", async () => {
+      onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+    });
   }
   const rows = [];
   for (const row of [
@@ -16753,6 +17282,7 @@ function ProgressDetail({
       /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-20 shrink-0", children: String(label) }),
       /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "min-w-0", children: String(value) })
     ] }, String(label))) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionError, { message: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InboxDetailActions,
       {
@@ -16766,10 +17296,11 @@ function ProgressDetail({
             type: "button",
             size: "sm",
             onClick: () => void acknowledge(),
+            disabled: busy,
             "aria-label": "Acknowledge inbox item",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" }),
-              "Acknowledge"
+              busy ? "Saving" : "Acknowledge"
             ]
           }
         )
@@ -16782,10 +17313,23 @@ function InboxDetail({
   adapter,
   onUpdated,
   onDeleted,
-  onSessionSelect
+  onSessionSelect,
+  onBack
 }) {
   const Icon = kindIcon(item.kind);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "min-w-0 flex-1 overflow-y-auto p-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "min-w-0 flex-1 overflow-y-auto p-4 md:p-6", children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "-ml-2 mb-2 inline-flex min-h-11 items-center gap-1.5 px-2 text-sm font-medium text-muted-foreground md:hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-4" }),
+          "Inbox"
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex min-w-0 items-start gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center border border-line text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -16857,6 +17401,7 @@ function InboxPanel({
   const [items, setItems] = react.useState([]);
   const [nextCursor, setNextCursor] = react.useState(null);
   const [internalSelectedId, setInternalSelectedId] = react.useState(null);
+  const [view, setView] = react.useState("active");
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
   const requestId = react.useRef(0);
@@ -16865,13 +17410,20 @@ function InboxPanel({
     () => items.find((item) => item.id === selectedItemId) ?? null,
     [items, selectedItemId]
   );
+  const viewRef = react.useRef(view);
+  viewRef.current = view;
   const applyItem = react.useCallback((nextItem) => {
-    setItems(
-      (current) => sortItems(
-        current.map((item) => item.id === nextItem.id ? nextItem : item)
-      )
-    );
+    setItems((current) => {
+      if (current.some((item) => item.id === nextItem.id)) {
+        return sortItems([nextItem, ...current]);
+      }
+      return belongsToView(nextItem, viewRef.current) ? sortItems([nextItem, ...current]) : current;
+    });
   }, []);
+  const clearSelection = react.useCallback(() => {
+    if (selectedId === void 0) setInternalSelectedId(null);
+    onSelectedIdChange?.(null);
+  }, [onSelectedIdChange, selectedId]);
   const selectItem = react.useCallback(
     async (itemId) => {
       if (selectedId === void 0) setInternalSelectedId(itemId);
@@ -16888,26 +17440,26 @@ function InboxPanel({
     async (cursor) => {
       const id = ++requestId.current;
       setLoading(true);
-      setError(null);
       try {
         const response = await inboxAdapter.listInbox({
+          status: VIEWS[view].statuses,
+          kind: VIEWS[view].kinds,
           cursor: cursor ?? void 0,
           limit
         });
         if (id !== requestId.current) return;
-        setItems(
-          (current) => sortItems(cursor ? [...current, ...response.items] : response.items)
-        );
+        setItems((current) => sortItems([...response.items, ...current]));
         setNextCursor(response.nextCursor);
+        setError(null);
       } catch (err) {
         if (id === requestId.current) {
-          setError(err instanceof Error ? err.message : "Failed to load inbox");
+          setError(errorMessage(err, "Failed to load inbox"));
         }
       } finally {
         if (id === requestId.current) setLoading(false);
       }
     },
-    [inboxAdapter, limit]
+    [inboxAdapter, limit, view]
   );
   react.useEffect(() => {
     void load(null);
@@ -16915,15 +17467,33 @@ function InboxPanel({
   react.useEffect(() => {
     const stream = inboxAdapter.openInboxStream();
     stream.addEventListener("item", (event) => {
-      const payload = JSON.parse(event.data);
-      if (typeof payload.item_id !== "number") return;
-      void inboxAdapter.getInboxItem({ itemId: payload.item_id }).then(applyItem);
+      let itemId;
+      try {
+        itemId = JSON.parse(event.data).item_id;
+      } catch {
+        return;
+      }
+      if (typeof itemId !== "number") return;
+      if (viewRef.current === "history") return;
+      void inboxAdapter.getInboxItem({ itemId }).then(applyItem, () => void 0);
     });
     return () => stream.close();
   }, [applyItem, inboxAdapter]);
   function updateSelectedItem(item) {
     applyItem(item);
   }
+  const selectView = react.useCallback(
+    (next) => {
+      if (next === view) return;
+      setView(next);
+      setItems([]);
+      setNextCursor(null);
+      setError(null);
+      if (selectedId === void 0) setInternalSelectedId(null);
+      onSelectedIdChange?.(null);
+    },
+    [onSelectedIdChange, selectedId, view]
+  );
   const deleteItem = react.useCallback(
     async (itemId) => {
       if (!inboxAdapter.deleteInboxItem) return;
@@ -16937,55 +17507,80 @@ function InboxPanel({
     [inboxAdapter, onSelectedIdChange, selectedId, selectedItemId]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 min-w-0 bg-background text-foreground", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "flex w-80 min-w-72 max-w-sm shrink-0 flex-col border-r border-line", children: [
-      !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-14 items-center gap-2 border-b border-line px-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InboxIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-semibold", children: title })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-destructive", children: error }),
-        !error && items.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-sm text-muted-foreground", children: "No inbox items" }),
-        items.map((item) => {
-          const Icon = kindIcon(item.kind);
-          const selected = item.id === selectedItemId;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        className: cn(
+          "flex min-w-0 flex-col border-line md:w-80 md:min-w-72 md:max-w-sm md:shrink-0 md:border-r",
+          selectedItemId != null ? "hidden md:flex" : "w-full"
+        ),
+        children: [
+          !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-14 items-center gap-2 border-b border-line px-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InboxIcon, { className: "size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-semibold", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 border-b border-line px-2 py-2", children: VIEW_NAMES.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              "aria-label": `Open inbox item ${item.title}`,
+              onClick: () => selectView(value),
               className: cn(
-                "flex w-full min-w-0 gap-3 border-l-2 px-3 py-3 text-left transition-colors hover:bg-input",
-                selected ? "border-l-primary bg-line text-foreground" : "border-l-transparent text-subtle",
-                !item.readAt && "font-medium text-foreground"
+                "px-2 py-1 text-xs capitalize transition-colors",
+                view === value ? "bg-line font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
-              onClick: () => void selectItem(item.id),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs uppercase tracking-wide text-muted-foreground", children: kindLabel(item.kind) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(item.createdAt) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block truncate text-sm", children: item.title }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: statusLabel(item.status) })
-                ] })
-              ]
+              children: value
             },
-            item.id
-          );
-        }),
-        nextCursor && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "w-full px-3 py-3 text-sm text-muted-foreground hover:bg-input",
-            onClick: () => void load(nextCursor),
-            disabled: loading,
-            children: loading ? "Loading" : "Load more"
-          }
-        )
-      ] })
-    ] }),
+            value
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+            error && items.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: () => void load(null), children: "Try again" })
+            ] }),
+            items.length === 0 && !error && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-sm text-muted-foreground", children: VIEWS[view].empty }),
+            items.map((item) => {
+              const Icon = kindIcon(item.kind);
+              const selected = item.id === selectedItemId;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Open inbox item ${item.title}`,
+                  className: cn(
+                    "flex w-full min-w-0 gap-3 border-l-2 px-3 py-3 text-left transition-colors hover:bg-input",
+                    selected ? "border-l-primary bg-line text-foreground" : "border-l-transparent text-subtle",
+                    !item.readAt && "font-medium text-foreground"
+                  ),
+                  onClick: () => void selectItem(item.id),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs uppercase tracking-wide text-muted-foreground", children: kindLabel(item.kind) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(item.createdAt) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block truncate text-sm", children: item.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: statusLabel(item.status) })
+                    ] })
+                  ]
+                },
+                item.id
+              );
+            }),
+            nextCursor && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "w-full px-3 py-3 text-sm text-muted-foreground hover:bg-input",
+                onClick: () => void load(nextCursor),
+                disabled: loading,
+                children: loading ? "Loading" : "Load more"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     selectedItem ? /* @__PURE__ */ jsxRuntime.jsx(
       InboxDetail,
       {
@@ -16993,59 +17588,59 @@ function InboxPanel({
         adapter: inboxAdapter,
         onUpdated: updateSelectedItem,
         onDeleted: deleteItem,
-        onSessionSelect
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex min-w-0 flex-1 items-center justify-center px-4 text-sm text-muted-foreground", children: "Select an item" })
+        onSessionSelect,
+        onBack: clearSelection
+      },
+      selectedItem.id
+    ) : /* @__PURE__ */ jsxRuntime.jsx("main", { className: "hidden min-w-0 flex-1 items-center justify-center px-4 text-sm text-muted-foreground md:flex", children: "Select an item" })
   ] });
 }
 function useInboxUnreadCount(adapter) {
   const [unreadCount, setUnreadCount] = react.useState(0);
   const [hasLoaded, setHasLoaded] = react.useState(false);
   const [error, setError] = react.useState(null);
+  const requestId = react.useRef(0);
+  const listInbox = adapter.listInbox;
+  const openInboxStream = adapter.openInboxStream;
+  const refetch = react.useCallback(async () => {
+    if (!listInbox) return;
+    const id = ++requestId.current;
+    try {
+      const response = await listInbox({ status: "pending", limit: 200 });
+      if (id !== requestId.current) return;
+      setUnreadCount(response.items.filter((item) => !item.readAt).length);
+      setError(null);
+    } catch (err) {
+      if (id !== requestId.current) return;
+      setError(err instanceof Error ? err.message : "Failed to load inbox");
+    } finally {
+      if (id === requestId.current) setHasLoaded(true);
+    }
+  }, [listInbox]);
   react.useEffect(() => {
-    let cancelled = false;
-    let stream = null;
-    if (!adapter.listInbox || !adapter.openInboxStream) {
+    if (!listInbox || !openInboxStream) {
       setError("Inbox is not supported by this adapter.");
       setHasLoaded(true);
-      return () => {
-        cancelled = true;
-      };
+      return;
     }
-    adapter.listInbox({ status: "pending", limit: 200 }).then((response) => {
-      if (cancelled) return;
-      setUnreadCount(response.items.filter((item) => !item.readAt).length);
-      setHasLoaded(true);
-    }).catch((err) => {
-      if (cancelled) return;
-      setError(err instanceof Error ? err.message : "Failed to load inbox");
-      setHasLoaded(true);
-    });
+    void refetch();
+    let stream = null;
     try {
-      stream = adapter.openInboxStream();
-      stream.addEventListener("snapshot", (event) => {
-        if (cancelled) return;
-        const payload = JSON.parse(event.data);
-        const ids = Array.isArray(payload.unread_ids) ? payload.unread_ids : [];
-        setUnreadCount(ids.length);
-        setHasLoaded(true);
-      });
-      stream.addEventListener("item", () => {
-        if (cancelled) return;
-        setUnreadCount((count) => count + 1);
-        setHasLoaded(true);
-      });
-      stream.onerror = () => {
-        if (!cancelled) setError("Inbox stream disconnected.");
-      };
+      stream = openInboxStream();
+      const onChange = () => void refetch();
+      stream.addEventListener("snapshot", onChange);
+      stream.addEventListener("item", onChange);
+      stream.onerror = () => setError("Inbox stream disconnected.");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to open inbox stream");
+      setError(
+        err instanceof Error ? err.message : "Failed to open inbox stream"
+      );
     }
     return () => {
-      cancelled = true;
+      requestId.current += 1;
       stream?.close();
     };
-  }, [adapter]);
+  }, [listInbox, openInboxStream, refetch]);
   return { unreadCount, hasLoaded, error };
 }