@invergent/agent-chat-react 1.9.7 → 1.10.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';
@@ -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
@@ -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
-                )) })
+                ))
               ] })
             ] })
           }