@invergent/agent-chat-react 1.9.8 → 2.0.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, PlusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, GlobeIcon, ListTodoIcon, CornerDownLeftIcon, XCircleIcon, CheckCircle2Icon, Code, TerminalIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, GlobeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
-import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Separator as Separator$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
+import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Separator as Separator$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { cjk } from '@streamdown/cjk';
@@ -44,13 +44,13 @@ var buttonVariants = cva(
         link: "text-primary underline underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        default: "h-11 md:h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
         xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        sm: "h-11 md:h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
         lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
-        icon: "size-10",
+        icon: "size-11 md:size-10",
         "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-9",
+        "icon-sm": "size-11 md:size-9",
         "icon-lg": "size-11"
       }
     },
@@ -483,7 +483,7 @@ function BrowserPane({ sessionId, state, adapter }) {
       DialogContent,
       {
         "aria-describedby": void 0,
-        className: "flex h-screen w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none ring-0 sm:max-w-none",
+        className: "flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none ring-0 sm:max-w-none",
         children: [
           /* @__PURE__ */ jsxs(DialogHeader, { className: "h-10 shrink-0 flex-row items-center gap-2 border-b border-line bg-card px-4 py-0", children: [
             /* @__PURE__ */ jsx(ZapIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
@@ -3171,7 +3171,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50",
         className
       ),
       ...props
@@ -3478,7 +3478,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        "h-11 md:h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
         className
       ),
       ...props
@@ -4308,7 +4308,7 @@ function InputGroup({ className, ...props }) {
       "data-slot": "input-group",
       role: "group",
       className: cn(
-        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "group/input-group relative flex h-11 md:h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
         className
       ),
       ...props
@@ -4423,7 +4423,7 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-1", children: /* @__PURE__ */ jsxs(InputGroup, { className: "border-transparent border-b-input bg-transparent px-3", children: [
+  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-3", children: /* @__PURE__ */ jsxs(InputGroup, { className: "rounded-lg border-transparent bg-muted px-3", children: [
     /* @__PURE__ */ jsx(
       Command$1.Input,
       {
@@ -4467,35 +4467,6 @@ function CommandEmpty({
     }
   );
 }
-function CommandGroup({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.Group,
-    {
-      "data-slot": "command-group",
-      className: cn(
-        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group-heading]]:uppercase",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.Separator,
-    {
-      "data-slot": "command-separator",
-      className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className),
-      ...props
-    }
-  );
-}
 function CommandItem({
   className,
   children,
@@ -4506,7 +4477,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[selected=true]:*:[svg]:text-foreground",
         className
       ),
       ...props,
@@ -4517,89 +4488,6 @@ function CommandItem({
     }
   );
 }
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenu$1.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
-    DropdownMenu$1.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      align,
-      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
-      ...props
-    }
-  ) });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenu$1.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function HoverCard({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(HoverCard$1.Root, { "data-slot": "hover-card", ...props });
-}
-function HoverCardTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(HoverCard$1.Trigger, { "data-slot": "hover-card-trigger", ...props });
-}
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(HoverCard$1.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
-    HoverCard$1.Content,
-    {
-      "data-slot": "hover-card-content",
-      align,
-      sideOffset,
-      className: cn(
-        "z-50 w-72 origin-(--radix-hover-card-content-transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
 function Spinner({ className, ...props }) {
   return /* @__PURE__ */ jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
 }
@@ -4751,24 +4639,6 @@ var usePromptInputAttachments = () => {
   return context;
 };
 var LocalReferencedSourcesContext = createContext(null);
-var PromptInputActionAddAttachments = ({
-  label = "Add photos or files",
-  ...props
-}) => {
-  const attachments = usePromptInputAttachments();
-  const handleSelect = useCallback(
-    (e) => {
-      e.preventDefault();
-      attachments.openFileDialog();
-    },
-    [attachments]
-  );
-  return /* @__PURE__ */ jsxs(DropdownMenuItem, { ...props, onSelect: handleSelect, children: [
-    /* @__PURE__ */ jsx(ImageIcon, { className: "mr-2 size-4" }),
-    " ",
-    label
-  ] });
-};
 var PromptInput = ({
   className,
   accept,
@@ -5104,7 +4974,7 @@ var PromptInput = ({
         onSubmit: handleSubmit,
         ref: formRef,
         ...props,
-        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden", children })
+        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-3 py-1 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
       }
     )
   ] });
@@ -5194,7 +5064,7 @@ var PromptInputTextarea = ({
   return /* @__PURE__ */ jsx(
     InputGroupTextarea,
     {
-      className: cn("field-sizing-content max-h-48 min-h-16", className),
+      className: cn("field-sizing-content max-h-48 min-h-16 px-1.5 py-3", className),
       name: "message",
       onCompositionEnd: handleCompositionEnd,
       onCompositionStart: handleCompositionStart,
@@ -5238,7 +5108,11 @@ var PromptInputButton = ({
   const button = /* @__PURE__ */ jsx(
     InputGroupButton,
     {
-      className: cn(className),
+      className: cn(
+        "rounded-sm border border-input/70 text-foreground hover:bg-accent",
+        newSize === "icon-sm" && "size-9",
+        className
+      ),
       size: newSize,
       type: "button",
       variant,
@@ -5259,19 +5133,9 @@ var PromptInputButton = ({
     ] })
   ] });
 };
-var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu, { ...props });
-var PromptInputActionMenuTrigger = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) }) });
-var PromptInputActionMenuContent = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
 var PromptInputSubmit = ({
   className,
-  variant = "default",
+  variant = "secondary",
   size = "icon-sm",
   status,
   onStop,
@@ -5280,11 +5144,11 @@ var PromptInputSubmit = ({
   ...props
 }) => {
   const isGenerating = status === "submitted" || status === "streaming";
-  let Icon = /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4" });
+  let Icon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" });
   if (status === "submitted") {
     Icon = /* @__PURE__ */ jsx(Spinner, {});
   } else if (status === "streaming") {
-    Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+    Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" });
   } else if (status === "error") {
     Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
   }
@@ -5303,7 +5167,7 @@ var PromptInputSubmit = ({
     InputGroupButton,
     {
       "aria-label": isGenerating ? "Stop" : "Submit",
-      className: cn(className),
+      className: cn("rounded-full", className),
       onClick: handleClick,
       size,
       type: isGenerating && onStop ? "button" : "submit",
@@ -5313,6 +5177,41 @@ var PromptInputSubmit = ({
     }
   );
 };
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.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__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
 function Progress({
   className,
   value,
@@ -5362,7 +5261,7 @@ var Context = ({
     () => ({ maxTokens, modelId, usage, usedTokens }),
     [maxTokens, modelId, usage, usedTokens]
   );
-  return /* @__PURE__ */ jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HoverCard, { closeDelay: 100, openDelay: 0, ...props }) });
+  return /* @__PURE__ */ jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Popover, { ...props }) });
 };
 var ContextIcon = () => {
   const { usedTokens, maxTokens } = useContextValue();
@@ -5412,13 +5311,13 @@ var ContextIcon = () => {
   );
 };
 var ContextTrigger = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", ...props, children: /* @__PURE__ */ jsx(ContextIcon, {}) }) });
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", ...props, children: /* @__PURE__ */ jsx(ContextIcon, {}) }) });
 };
 var ContextContent = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx(
-  HoverCardContent,
+  PopoverContent,
   {
     className: cn("min-w-60 divide-y overflow-hidden p-0", className),
     ...props
@@ -5721,36 +5620,6 @@ function ItemActions({ className, ...props }) {
     }
   );
 }
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
-    Popover$1.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-100 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
-}
 function ChatComposer(props) {
   return /* @__PURE__ */ jsx(PromptInputProvider, { children: /* @__PURE__ */ jsx(ChatComposerInner, { ...props }) });
 }
@@ -5832,10 +5701,12 @@ function ChatComposerInner({
   onComposerError
 }) {
   const { adapter } = useAgentChatAdapterContext();
-  const { textInput } = usePromptInputController();
+  const { textInput, attachments } = usePromptInputController();
   const status = isRunning ? "streaming" : disabled ? "error" : "ready";
   const [adapterCommands, setAdapterCommands] = useState([]);
   const [buttonMenuOpen, setButtonMenuOpen] = useState(false);
+  const [menuMode, setMenuMode] = useState("all");
+  const [addMenuOpen, setAddMenuOpen] = useState(false);
   const [menuDismissed, setMenuDismissed] = useState(false);
   const showSlashMenu = !menuDismissed && (textInput.value.startsWith("/") || buttonMenuOpen);
   useEffect(() => {
@@ -5843,17 +5714,17 @@ function ChatComposerInner({
       setMenuDismissed(false);
     }
   }, [buttonMenuOpen, menuDismissed, textInput.value]);
-  const [wasClosed, setWasClosed] = useState(true);
   useEffect(() => {
-    if (showSlashMenu && wasClosed) {
-      setWasClosed(false);
+    if (textInput.value.startsWith("/")) {
+      setMenuMode("all");
+    }
+  }, [textInput.value]);
+  useEffect(() => {
+    if (showSlashMenu && (menuMode === "skills" || menuMode === "all")) {
       adapter.listSlashCommands?.().then(setAdapterCommands).catch(() => {
       });
     }
-    if (!showSlashMenu && !wasClosed) {
-      setWasClosed(true);
-    }
-  }, [adapter, showSlashMenu, wasClosed]);
+  }, [adapter, showSlashMenu, menuMode]);
   const builtinCommands = useMemo(
     () => [
       { value: "/clear", label: "/clear", description: "Clear conversation" },
@@ -5874,6 +5745,23 @@ function ChatComposerInner({
     ],
     []
   );
+  const scheduledExamples = useMemo(
+    () => [
+      { value: "/loop list", label: "/loop list", description: "List your active scheduled tasks" },
+      { value: "/loop cancel ", label: "/loop cancel <id>", description: "Cancel a scheduled task by ID" },
+      { value: "/loop 5m check the deployment status and surface any failures", label: "/loop 5m deployment check", description: "Every 5 minutes: poll deployment status" },
+      { value: "/loop 10m pull the build queue and report any stuck jobs", label: "/loop 10m build queue", description: "Every 10 minutes: review the build queue" },
+      { value: "/loop 15m triage new PRs assigned to me", label: "/loop 15m PR triage", description: "Every 15 minutes: triage incoming PRs" },
+      { value: "/loop 30m summarize new threads in support inbox", label: "/loop 30m support inbox", description: "Every 30 minutes: summarize support traffic" },
+      { value: "/loop 1h review the on-call dashboard and flag anomalies", label: "/loop 1h on-call check", description: "Hourly: review the on-call dashboard" },
+      { value: "/loop 2h scan production error rates and alert if elevated", label: "/loop 2h error scan", description: "Every 2 hours: production error scan" },
+      { value: "/loop 1d give me a morning briefing of yesterday's activity", label: "/loop 1d daily briefing", description: "Daily: morning briefing of prior day" },
+      { value: "/loop every 5 minutes check whether CI on the current branch has finished", label: "/loop every 5 minutes (verbose)", description: "Verbose interval form" },
+      { value: "/loop watch the active deploy and notify me when it stabilises or rolls back", label: "/loop <prompt> (dynamic)", description: "Dynamic loop \u2014 model self-paces 1m\u20131h via loop_wait" },
+      { value: "/loop babysit the long-running data migration and only ping me on errors or completion", label: "/loop migration watcher (dynamic)", description: "Dynamic loop \u2014 best when cadence is unpredictable" }
+    ],
+    []
+  );
   const searchQuery = showSlashMenu ? textInput.value.slice(1) : "";
   const menuOpen = showSlashMenu;
   const textareaRef = useRef(null);
@@ -5888,7 +5776,7 @@ function ChatComposerInner({
   }, []);
   const handleCommandSelect = useCallback(
     (commandValue) => {
-      textInput.setInput(commandValue + " ");
+      textInput.setInput(`${commandValue} `);
       setButtonMenuOpen(false);
       setMenuDismissed(true);
       focusTextareaAtEnd();
@@ -5897,7 +5785,7 @@ function ChatComposerInner({
   );
   const handleSearchChange = useCallback(
     (next) => {
-      textInput.setInput("/" + next);
+      textInput.setInput(`/${next}`);
     },
     [textInput]
   );
@@ -5992,6 +5880,62 @@ function ChatComposerInner({
       },
       children: [
         /* @__PURE__ */ jsx(AttachmentPreviewStrip, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 px-1 pb-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              onClick: () => {
+                setMenuMode("commands");
+                setMenuDismissed(false);
+                setButtonMenuOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(TerminalIcon, {}),
+                "Commands"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              onClick: () => {
+                setMenuMode("skills");
+                setMenuDismissed(false);
+                setButtonMenuOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(SparklesIcon, {}),
+                "Skills"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              onClick: () => {
+                setMenuMode("scheduled");
+                setMenuDismissed(false);
+                setButtonMenuOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(ClockIcon, {}),
+                "Scheduled Tasks"
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
           PromptInput,
           {
@@ -6011,25 +5955,56 @@ function ChatComposerInner({
               ) }),
               /* @__PURE__ */ jsxs(PromptInputFooter, { children: [
                 /* @__PURE__ */ jsxs(PromptInputTools, { children: [
-                  /* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [
-                    /* @__PURE__ */ jsx(PromptInputActionMenuTrigger, {}),
-                    /* @__PURE__ */ jsx(PromptInputActionMenuContent, { children: /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}) })
+                  /* @__PURE__ */ jsxs(Popover, { open: addMenuOpen, onOpenChange: setAddMenuOpen, children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PromptInputButton, { "aria-label": "Add", children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) }) }),
+                    /* @__PURE__ */ jsx(
+                      PopoverContent,
+                      {
+                        side: "top",
+                        align: "start",
+                        className: "w-64 overflow-hidden rounded-xl p-1",
+                        children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsxs(CommandList, { children: [
+                          /* @__PURE__ */ jsxs(
+                            CommandItem,
+                            {
+                              disabled: true,
+                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              children: [
+                                /* @__PURE__ */ jsx(CloudIcon, { className: "size-4 shrink-0 text-sky-500" }),
+                                "Add from OneDrive",
+                                /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4 shrink-0 text-muted-foreground" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            CommandItem,
+                            {
+                              disabled: true,
+                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              children: [
+                                /* @__PURE__ */ jsx(HardDriveIcon, { className: "size-4 shrink-0 text-emerald-500" }),
+                                "Add from Google Drive"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            CommandItem,
+                            {
+                              onSelect: () => {
+                                setAddMenuOpen(false);
+                                attachments.openFileDialog();
+                              },
+                              className: "gap-3 rounded-md px-3 py-2 [&>svg:last-child]:hidden",
+                              children: [
+                                /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                                "Add local files"
+                              ]
+                            }
+                          )
+                        ] }) })
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "icon-xs",
-                      className: "text-muted-foreground",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        setButtonMenuOpen((v) => !v);
-                      },
-                      "aria-label": "Slash commands",
-                      children: /* @__PURE__ */ jsx("span", { className: "text-xs  font-bold", children: "/" })
-                    }
-                  ),
                   tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxs(
                     Context,
                     {
@@ -6046,7 +6021,13 @@ function ChatComposerInner({
                         outputTokenDetails: void 0
                       },
                       children: [
-                        /* @__PURE__ */ jsx(ContextTrigger, {}),
+                        /* @__PURE__ */ jsx(
+                          ContextTrigger,
+                          {
+                            size: "icon-sm",
+                            className: "rounded-sm border border-input/70 text-foreground hover:bg-accent"
+                          }
+                        ),
                         /* @__PURE__ */ jsxs(ContextContent, { children: [
                           /* @__PURE__ */ jsx(ContextContentHeader, {}),
                           /* @__PURE__ */ jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6091,14 +6072,14 @@ function ChatComposerInner({
           {
             side: "top",
             align: "start",
-            className: "overflow-hidden p-0",
+            className: "overflow-hidden rounded-xl p-0",
             style: { width: "var(--radix-popover-trigger-width)" },
             onCloseAutoFocus: (e) => e.preventDefault(),
             onEscapeKeyDown: () => {
               focusTextareaAtEnd();
             },
             children: /* @__PURE__ */ jsxs(Command, { children: [
-              /* @__PURE__ */ jsx(
+              menuMode === "skills" ? /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search skills..." }) : menuMode === "scheduled" ? /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search scheduled tasks..." }) : /* @__PURE__ */ jsx(
                 CommandInput,
                 {
                   placeholder: "Type a command or search...",
@@ -6107,8 +6088,36 @@ function ChatComposerInner({
                 }
               ),
               /* @__PURE__ */ jsxs(CommandList, { children: [
-                /* @__PURE__ */ jsx(CommandEmpty, { children: "No commands found." }),
-                builtinCommands.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { heading: "Built-in commands", children: builtinCommands.map((cmd) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(CommandEmpty, { children: menuMode === "skills" ? "No skills found." : menuMode === "scheduled" ? "No scheduled tasks found." : "No commands found." }),
+                menuMode === "scheduled" && scheduledExamples.map((cmd) => /* @__PURE__ */ jsxs(
+                  CommandItem,
+                  {
+                    value: cmd.value,
+                    keywords: [cmd.description],
+                    onSelect: () => handleCommandSelect(cmd.value),
+                    className: "grid grid-cols-[14rem_1fr] items-baseline gap-3 [&_svg]:hidden",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "font-mono font-semibold text-foreground truncate",
+                          title: cmd.label,
+                          children: cmd.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "min-w-0 truncate text-sm text-muted-foreground",
+                          title: cmd.description,
+                          children: cmd.description
+                        }
+                      )
+                    ]
+                  },
+                  cmd.value
+                )),
+                (menuMode === "commands" || menuMode === "all") && builtinCommands.map((cmd) => /* @__PURE__ */ jsxs(
                   CommandItem,
                   {
                     value: cmd.value,
@@ -6119,7 +6128,7 @@ function ChatComposerInner({
                       /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: "font-mono text-foreground truncate",
+                          className: "font-mono font-semibold text-foreground truncate",
                           title: cmd.label,
                           children: cmd.label
                         }
@@ -6127,7 +6136,7 @@ function ChatComposerInner({
                       /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: "min-w-0 truncate text-xs text-muted-foreground",
+                          className: "min-w-0 truncate text-sm text-muted-foreground",
                           title: cmd.description,
                           children: cmd.description
                         }
@@ -6135,9 +6144,8 @@ function ChatComposerInner({
                     ]
                   },
                   cmd.value
-                )) }),
-                builtinCommands.length > 0 && adapterCommands.length > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
-                adapterCommands.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { heading: "Skills", children: adapterCommands.map((cmd) => /* @__PURE__ */ jsxs(
+                )),
+                (menuMode === "skills" || menuMode === "all") && adapterCommands.map((cmd) => /* @__PURE__ */ jsxs(
                   CommandItem,
                   {
                     value: cmd.value,
@@ -6148,7 +6156,7 @@ function ChatComposerInner({
                       /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: "font-mono text-foreground truncate",
+                          className: "font-mono font-semibold text-foreground truncate",
                           title: cmd.label,
                           children: cmd.label
                         }
@@ -6156,7 +6164,7 @@ function ChatComposerInner({
                       /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: "min-w-0 truncate text-xs text-muted-foreground",
+                          className: "min-w-0 truncate text-sm text-muted-foreground",
                           title: cmd.description,
                           children: cmd.description
                         }
@@ -6164,7 +6172,7 @@ function ChatComposerInner({
                     ]
                   },
                   cmd.value
-                )) })
+                ))
               ] })
             ] })
           }
@@ -7314,7 +7322,7 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-6 pb-5 pt-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
       retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
       disabled && disabledReason ? /* @__PURE__ */ jsx(
         "div",
@@ -7970,7 +7978,7 @@ function RenderEntries({
       /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
       entry.size != null && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 text-xs text-muted-foreground/60", children: formatFileSize(entry.size) }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-0 transition-opacity group-hover:opacity-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100", children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -9495,6 +9503,9 @@ function parseGoalDefinition(content) {
   const rubric = match ? args.slice(match.index + match[0].length).trim() : "";
   return rubric ? { description, rubric } : { description };
 }
+var RIGHT_STACK_STYLE = {
+  ["--right-stack-w"]: "440px"
+};
 function AgentChat({
   adapter,
   agentId,
@@ -9506,6 +9517,7 @@ function AgentChat({
   onComposerError
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
+  const [mobileView, setMobileView] = useState("chat");
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9523,10 +9535,12 @@ function AgentChat({
   const handleFileSelect = useCallback(
     (path) => {
       setWorkspacePath(path);
+      setMobileView("workspace");
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
+  const showMobileToggle = Boolean(sessionId);
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
@@ -9539,15 +9553,56 @@ function AgentChat({
         "section",
         {
           "data-testid": "agent-chat-layout",
-          className: hasBrowserPanel ? "relative min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground" : "flex min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground",
-          style: { direction: "ltr" },
+          "data-mobile-view": mobileView,
+          className: cn(
+            // Phone: flex column, tab toggle on top, then either chat or
+            // right stack visible based on `data-mobile-view`.
+            "flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-sm text-foreground",
+            // md+: restore desktop two-pane layout.
+            hasBrowserPanel ? "md:relative md:flex-row" : "md:flex-row"
+          ),
+          style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
+            showMobileToggle && /* @__PURE__ */ jsxs("div", { className: "md:hidden flex shrink-0 border-b border-line bg-card", children: [
+              /* @__PURE__ */ 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__ */ 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"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 "data-testid": "chat-panel",
-                className: hasBrowserPanel ? "absolute inset-y-0 left-0 flex min-h-0 min-w-0 flex-col overflow-hidden" : "flex min-w-0 flex-1 flex-col overflow-hidden",
-                style: hasBrowserPanel ? { right: 440 } : void 0,
+                "data-mobile-view": mobileView,
+                className: cn(
+                  // Phone: full width column, hidden when workspace tab active.
+                  "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+                  showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
+                  // md+: restore desktop positioning.
+                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                ),
                 children: /* @__PURE__ */ jsx(
                   ChatThread,
                   {
@@ -9572,8 +9627,16 @@ function AgentChat({
               "div",
               {
                 "data-testid": "right-stack",
-                className: hasBrowserPanel ? "absolute inset-y-0 flex min-h-0 flex-col overflow-hidden" : "flex min-h-0 shrink-0 flex-col",
-                style: hasBrowserPanel ? { right: 0, width: 440 } : void 0,
+                "data-mobile-view": mobileView,
+                className: cn(
+                  // Phone: full width column, hidden when chat tab active.
+                  "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+                  showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
+                  // md+: restore desktop positioning. With browser panel the
+                  // right stack is absolutely positioned at the configured
+                  // width; without it the stack flows in the row.
+                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-(--right-stack-w,440px)"
+                ),
                 children: [
                   hasBrowserPanel && /* @__PURE__ */ jsx(
                     "div",
@@ -10556,16 +10619,16 @@ function MissionDashboard({
     }
   };
   const statusVariant = mission.status === "satisfied" ? "default" : mission.status === "failed" || mission.status === "cancelled" ? "destructive" : "secondary";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-6 max-w-6xl mx-auto", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6 max-w-6xl mx-auto", children: [
     /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "wrap-break-word -uppercase text-sm", children: mission.description }),
           /* @__PURE__ */ jsxs(CardDescription, { className: "wrap-break-word text-foreground/70", children: [
             "Rubric: ",
             mission.rubric
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2 text-xs text-foreground/70", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pt-2 text-xs text-foreground/70", children: [
             /* @__PURE__ */ jsx(Badge, { variant: statusVariant, className: "font-mono text-foreground", children: mission.status }),
             /* @__PURE__ */ jsxs("span", { className: "font-mono text-primary", children: [
               "Iteration ",
@@ -10580,7 +10643,7 @@ function MissionDashboard({
             ] }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: ACTIVE_MISSION_STATUSES.has(mission.status) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: ACTIVE_MISSION_STATUSES.has(mission.status) ? /* @__PURE__ */ jsxs(Fragment, { children: [
           mission.status === "active" ? /* @__PURE__ */ jsxs(
             Button,
             {
@@ -10700,7 +10763,7 @@ function MissionDashboard({
         return /* @__PURE__ */ jsxs(
           "li",
           {
-            className: "flex items-start justify-between gap-3 rounded border border-border/40 px-3 py-2 text-sm",
+            className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between rounded border border-border/40 px-3 py-2 text-sm",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -10858,7 +10921,8 @@ function MissionRow({
     "div",
     {
       className: cn(
-        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors cursor-pointer hover:border-l-primary hover:bg-input"
+        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors cursor-pointer hover:border-l-primary hover:bg-input",
+        "min-h-11 md:min-h-0"
       ),
       onClick: openMission,
       onKeyDown: handleRowKeyDown,
@@ -10885,7 +10949,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onPause(mission.id);
@@ -10900,7 +10964,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onResume(mission.id);
@@ -10915,7 +10979,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onCancel(mission.id);
@@ -11192,6 +11256,7 @@ function ScheduledWorkRow({
     {
       className: cn(
         "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors hover:border-l-primary hover:bg-input",
+        "min-h-11 md:min-h-0",
         lastSessionId && "cursor-pointer"
       ),
       onClick: openLastRun,
@@ -11218,7 +11283,7 @@ function ScheduledWorkRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onRunNow(item.id);
@@ -11233,7 +11298,7 @@ function ScheduledWorkRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onCancel(item.id);
@@ -11539,6 +11604,7 @@ function TreeNodeRow({
         },
         className: cn(
           "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
+          "min-h-11 md:min-h-0",
           isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-subtle hover:bg-input hover:text-foreground border-l-transparent"
         ),
         style: { paddingLeft: `${depth * 12 + 12}px` },
@@ -11547,7 +11613,7 @@ function TreeNodeRow({
             "button",
             {
               type: "button",
-              className: "p-0.5 rounded hover:bg-line shrink-0",
+              className: "p-2 md:p-0.5 rounded hover:bg-line shrink-0",
               onClick: (e) => {
                 e.stopPropagation();
                 setExpanded(!expanded);
@@ -11565,7 +11631,7 @@ function TreeNodeRow({
             "button",
             {
               type: "button",
-              className: "p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
+              className: "p-2 md:p-1 rounded opacity-100 md:opacity-0 md:group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
               onClick: (e) => {
                 e.stopPropagation();
                 onStop(entry.id);
@@ -11580,8 +11646,8 @@ function TreeNodeRow({
             {
               type: "button",
               className: cn(
-                "p-1 rounded hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none transition-all",
-                deletingSessionId === entry.id ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+                "p-2 md:p-1 rounded hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none transition-all",
+                deletingSessionId === entry.id ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
               ),
               onClick: (e) => {
                 e.stopPropagation();