@agent-native/toolkit 0.16.1 → 0.16.3

package/src/composer/ComposerPlusMenu.tsx

@@ -12,6 +12,7 @@ import {
   IconArrowLeft,
   IconX,
   IconHelpCircle,
+  IconTerminal2,
 } from "@tabler/icons-react";
 import React, {
   useState,
@@ -23,6 +24,7 @@ import React, {
 import { createPortal } from "react-dom";
 
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+import { Switch } from "../ui/switch.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { cn } from "../utils.js";
 import {
@@ -33,6 +35,12 @@ import {
 import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
 import type { ComposerMode } from "./types.js";
 
+export interface ComposerTerminalModeControl {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+  onNewTerminal?: () => void;
+}
+
 interface ComposerPlusMenuProps {
   onSelectMode?: (mode: ComposerMode) => void;
   onAttachmentError?: (message: string) => void;
@@ -46,9 +54,11 @@ interface ComposerPlusMenuProps {
    * Automation, and MCP Server. Extension is included only when
    * `extensionTools` is true. "upload-only": clicking + opens the file picker
    * directly — no popover, no other modes. Use for prompt popovers where the
-   * only thing to attach is a file.
+   * only thing to attach is a file. "terminal": one new-terminal action plus
+   * the Terminal mode switch.
    */
-  mode?: "full" | "upload-only";
+  mode?: "full" | "upload-only" | "terminal";
+  terminalModeControl?: ComposerTerminalModeControl;
 }
 
 type View = "menu" | "skill-upload";
@@ -294,10 +304,16 @@ export function ComposerPlusMenu({
   onAttachmentError,
   extensionTools = false,
   mode = "full",
+  terminalModeControl,
 }: ComposerPlusMenuProps) {
   if (mode === "upload-only") {
     return <UploadOnlyAttachButton onAttachmentError={onAttachmentError} />;
   }
+  if (mode === "terminal" && terminalModeControl) {
+    return (
+      <ComposerPlusMenuTerminal terminalModeControl={terminalModeControl} />
+    );
+  }
   return (
     <ComposerPlusMenuFull
       onSelectMode={onSelectMode}
@@ -307,6 +323,73 @@ export function ComposerPlusMenu({
   );
 }
 
+function ComposerPlusMenuTerminal({
+  terminalModeControl,
+}: Pick<ComposerPlusMenuProps, "terminalModeControl">) {
+  const [open, setOpen] = useState(false);
+
+  if (!terminalModeControl) return null;
+
+  const handlePrimaryAction = () => {
+    if (!terminalModeControl.enabled) {
+      terminalModeControl.onChange(true);
+      setOpen(false);
+      return;
+    }
+    terminalModeControl.onNewTerminal?.();
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+            aria-label="Terminal options" /* i18n-ignore -- portable toolkit label */
+            title="Terminal options" /* i18n-ignore -- portable toolkit label */
+          >
+            <IconPlus className="h-4 w-4" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={8}
+          className="w-56 border-input bg-muted p-1 text-foreground"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start text-[12px] font-medium text-foreground hover:bg-accent/60"
+            onClick={handlePrimaryAction}
+          >
+            <IconTerminal2
+              size={14}
+              className="shrink-0 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <span>
+              {terminalModeControl.enabled ? "New terminal" : "Start terminal"}
+            </span>
+          </button>
+          <div className="my-1 border-t border-border/70" />
+          <div className="flex items-center justify-between gap-3 px-2.5 py-2">
+            <span className="text-[12px] font-medium text-foreground">
+              {"Terminal mode" /* i18n-ignore -- portable toolkit label */}
+            </span>
+            <Switch
+              checked={terminalModeControl.enabled}
+              onCheckedChange={terminalModeControl.onChange}
+              aria-label="Terminal mode" /* i18n-ignore -- portable toolkit label */
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
 function ComposerPlusMenuFull({
   onSelectMode,
   onAttachmentError,
@@ -631,7 +714,7 @@ function ComposerPlusMenuFull({
           align="start"
           sideOffset={8}
           className={cn(
-            "p-0 rounded-lg",
+            "rounded-lg border-input bg-muted p-0 text-foreground",
             view === "skill-upload"
               ? "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"
               : "w-[260px]",
@@ -703,7 +786,7 @@ function ComposerPlusMenuFull({
                         onMouseEnter={() => openSkillFlyout()}
                         onMouseLeave={scheduleSkillFlyoutClose}
                         className={cn(
-                          "absolute top-0 z-20 w-[240px] rounded-lg border border-border bg-popover py-1 shadow-md",
+                          "absolute top-0 z-20 w-[240px] rounded-lg border border-input bg-muted py-1 text-foreground shadow-md",
                           skillFlyoutSide === "right"
                             ? "left-full ml-1"
                             : "right-full mr-1",

package/src/composer/PromptComposer.tsx

@@ -36,6 +36,7 @@ import {
   PROMPT_DOCUMENT_ATTACHMENT_ACCEPT,
   TextAttachmentAdapter,
 } from "./attachment-accept.js";
+import type { ComposerTerminalModeControl } from "./ComposerPlusMenu.js";
 import { isPastedTextAttachmentName } from "./pasted-text.js";
 import { PastedTextChip } from "./PastedTextChip.js";
 import { escapePromptAttachmentAttribute } from "./prompt-attachments.js";
@@ -85,6 +86,8 @@ export interface PromptComposerProps {
   ) => void | Promise<void>;
   placeholder?: string;
   disabled?: boolean;
+  /** Called when a host-gated composer is clicked while it is disabled. */
+  onDisabledClick?: () => void;
   /** Override the generic document attachment cap for a multipart host. */
   maxDocumentAttachmentBytes?: number;
   /** Label used in the visible document attachment limit error. */
@@ -112,7 +115,9 @@ export interface PromptComposerProps {
    * Controls the shared "+" affordance. Defaults to upload-only for standalone
    * prompt forms; chat surfaces can opt into the full sidebar menu.
    */
-  plusMenuMode?: "full" | "upload-only" | "hidden";
+  plusMenuMode?: "full" | "upload-only" | "terminal" | "hidden";
+  /** Controls the terminal-specific plus menu when `plusMenuMode` is terminal. */
+  terminalModeControl?: ComposerTerminalModeControl;
   /**
    * Include extension creation in the full "+" menu. Defaults to false.
    */
@@ -156,6 +161,8 @@ export interface PromptComposerProps {
   availableAgents?: ComposerAgentOption[];
   /** Selected agent runtime identifier. */
   selectedAgent?: string;
+  /** Show only the selected agent in the model control. */
+  agentOnly?: boolean;
   /** Callback when the user picks an agent runtime. */
   onAgentChange?: (agent: string) => void;
   /** Called when the shared model picker opens or closes. */
@@ -491,6 +498,7 @@ function PromptComposerInner({
   onSubmit,
   placeholder,
   disabled,
+  onDisabledClick,
   maxDocumentAttachmentBytes,
   documentAttachmentLimitLabel,
   autoFocus,
@@ -506,6 +514,7 @@ function PromptComposerInner({
   voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED,
   attachmentsEnabled = true,
   plusMenuMode,
+  terminalModeControl,
   extensionTools = false,
   initialText,
   initialTextKey,
@@ -529,6 +538,7 @@ function PromptComposerInner({
   onEffortChange,
   availableAgents,
   selectedAgent,
+  agentOnly = false,
   onAgentChange,
   onModelSelectorOpenChange,
   modelStatusChecksEnabled,
@@ -643,12 +653,13 @@ function PromptComposerInner({
         <BuilderSetupCard
           onConnected={handleBuilderConnected}
           bouncePulse={missingKeyBouncePulse}
+          attached
           fullWidth
           layout="sidebar"
         />
       ) : null}
       {missingApiKey && useInlineMissingKeySetup && BuilderSetupContent ? (
-        <div className="mb-2 rounded-md border border-border/80 bg-background/80 p-2.5 text-start shadow-sm">
+        <div className="agent-builder-setup-inline--attached mb-0 rounded-md border border-border/80 bg-background/80 p-2.5 text-start shadow-sm">
           <BuilderSetupContent
             onConnected={handleBuilderConnected}
             layout="sidebar"
@@ -659,13 +670,21 @@ function PromptComposerInner({
         className={cn(
           "text-start",
           gateComposer && "cursor-pointer",
+          (gateComposer || onDisabledClick) &&
+            "agent-composer-area--attached-above",
           className,
         )}
         rootClassName={rootClassName}
         style={style}
         rootStyle={rootStyle}
         layoutVariant={layoutVariant}
-        onClick={gateComposer ? bounceMissingKeySetup : undefined}
+        onClick={
+          gateComposer
+            ? bounceMissingKeySetup
+            : onDisabledClick
+              ? () => onDisabledClick()
+              : undefined
+        }
       >
         <PromptAttachmentStrip />
         <TiptapComposer
@@ -687,6 +706,7 @@ function PromptComposerInner({
           plusMenuMode={
             plusMenuMode ?? (attachmentsEnabled ? "upload-only" : "hidden")
           }
+          terminalModeControl={terminalModeControl}
           extensionTools={extensionTools}
           attachButton={attachButton}
           modeControl={modeControl}
@@ -708,6 +728,7 @@ function PromptComposerInner({
           availableModels={composerModelGroups}
           availableAgents={availableAgents}
           selectedAgent={selectedAgent}
+          agentOnly={agentOnly}
           showAutoModelOption={showAutoModelOption}
           modelListLoading={composerModelListLoading}
           onModelChange={handleModelChange}

package/src/composer/TiptapComposer.tsx

@@ -36,7 +36,10 @@ import {
   PopoverTrigger,
 } from "../ui/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
-import { ComposerPlusMenu } from "./ComposerPlusMenu.js";
+import {
+  ComposerPlusMenu,
+  type ComposerTerminalModeControl,
+} from "./ComposerPlusMenu.js";
 import { getComposerDraftKey } from "./draft-key.js";
 import { FileReference } from "./extensions/FileReference.js";
 import { MentionReference } from "./extensions/MentionReference.js";
@@ -668,6 +671,8 @@ export interface ComposerAgentOption {
   id: string;
   /** Human-readable runtime name shown in the picker. */
   label: string;
+  /** Optional icon shown beside the runtime name. */
+  icon?: React.ReactNode;
   /** Optional short detail shown below the runtime name. */
   description?: string;
   /** Whether this runtime can be selected right now. */
@@ -774,6 +779,8 @@ export interface TiptapComposerProps {
   availableAgents?: ComposerAgentOption[];
   /** Selected agent runtime identifier. Defaults to the built-in agent. */
   selectedAgent?: string;
+  /** Show only the selected agent in the model control. */
+  agentOnly?: boolean;
   /** Mark the selected runtime as the hosted tools-only harness mode. */
   hostedHarness?: boolean;
   /** Callback when the user picks an agent runtime. */
@@ -811,7 +818,9 @@ export interface TiptapComposerProps {
    * that opens the file picker directly. `"hidden"` hides attachment controls
    * for text-only prompt surfaces.
    */
-  plusMenuMode?: "full" | "upload-only" | "hidden";
+  plusMenuMode?: "full" | "upload-only" | "terminal" | "hidden";
+  /** Controls the terminal-specific plus menu when `plusMenuMode` is terminal. */
+  terminalModeControl?: ComposerTerminalModeControl;
   /**
    * Include extension creation in the full "+" menu. Defaults to false so
    * apps opt into the extension capability deliberately.
@@ -1297,6 +1306,7 @@ function ModelSelector({
   engines,
   agents,
   selectedAgent,
+  agentOnly = false,
   hostedHarness = false,
   showAutoModelOption = true,
   modelListLoading = false,
@@ -1323,6 +1333,7 @@ function ModelSelector({
     statusLabel?: string;
     isSubscription?: boolean;
   }>;
+  agentOnly?: boolean;
   showAutoModelOption?: boolean;
   modelListLoading?: boolean;
   onChange: (model: string, engine: string) => void;
@@ -1411,9 +1422,10 @@ function ModelSelector({
     }
     onChange(preferredAgentModel.model, preferredAgentModel.engine);
   }, [engines, isClaudeCodeAgent, model, onChange, preferredAgentModel]);
-  const effortOptions =
-    reasoning?.getOptionsForModel?.(model) ??
-    getComposerReasoningEffortOptions(model);
+  const effortOptions = agentOnly
+    ? []
+    : (reasoning?.getOptionsForModel?.(model) ??
+      getComposerReasoningEffortOptions(model));
   const selectedEffort =
     reasoning?.resolve?.(model, effort) ??
     resolveReasoningEffortSelection(model, effort ?? defaultEffort);
@@ -1435,15 +1447,15 @@ function ModelSelector({
   const [detailSection, setDetailSection] = useState<
     "agent" | "model" | "effort" | null
   >(null);
-  const resolvedSection = detailSection ?? "model";
+  const resolvedSection = detailSection ?? (agentOnly ? "agent" : "model");
 
   const setPickerOpen = useCallback(
     (nextOpen: boolean) => {
       if (controlledOpen === undefined) setInternalOpen(nextOpen);
-      if (nextOpen) setDetailSection(null);
+      if (nextOpen) setDetailSection(agentOnly ? "agent" : null);
       onModelSelectorOpenChange?.(nextOpen);
     },
-    [controlledOpen, onModelSelectorOpenChange],
+    [agentOnly, controlledOpen, onModelSelectorOpenChange],
   );
 
   const visibleProviderGroups = modelProviderGroups;
@@ -1518,6 +1530,11 @@ function ModelSelector({
           className="agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
         >
           <span className="min-w-0 truncate">
+            {selectedAgentOption?.icon ? (
+              <span className="me-1 inline-flex shrink-0 align-[-2px] text-muted-foreground">
+                {selectedAgentOption.icon}
+              </span>
+            ) : null}
             {selectedAgentOption && selectedAgentOption.id !== "default"
               ? selectedAgentLabel
               : compactComposerModelName(model, t)}
@@ -1613,25 +1630,29 @@ function ModelSelector({
                   <IconChevronRight className="h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" />
                 </button>
               )}
-              <button
-                type="button"
-                role="tab"
-                aria-selected={resolvedSection === "model"}
-                onClick={() => setDetailSection("model")}
-                onMouseEnter={() => setDetailSection("model")}
-                className={`flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${
-                  resolvedSection === "model"
-                    ? "bg-accent text-foreground"
-                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-                }`}
-              >
-                <span className="shrink-0 text-[12px] font-medium">Model</span>
-                <span className="ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80">
-                  {selectedModelLabel}
-                </span>
-                <IconChevronRight className="h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" />
-              </button>
-              {effortOptions.length > 0 && (
+              {!agentOnly && (
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={resolvedSection === "model"}
+                  onClick={() => setDetailSection("model")}
+                  onMouseEnter={() => setDetailSection("model")}
+                  className={`flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${
+                    resolvedSection === "model"
+                      ? "bg-accent text-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                  }`}
+                >
+                  <span className="shrink-0 text-[12px] font-medium">
+                    Model
+                  </span>
+                  <span className="ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80">
+                    {selectedModelLabel}
+                  </span>
+                  <IconChevronRight className="h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" />
+                </button>
+              )}
+              {!agentOnly && effortOptions.length > 0 && (
                 <button
                   type="button"
                   role="tab"
@@ -1703,6 +1724,14 @@ function ModelSelector({
                                 : "cursor-default opacity-50"
                             }`}
                           >
+                            {agent.icon ? (
+                              <span
+                                className="flex size-4 shrink-0 items-center justify-center text-muted-foreground"
+                                aria-hidden="true"
+                              >
+                                {agent.icon}
+                              </span>
+                            ) : null}
                             <span
                               className={`min-w-0 truncate text-[12px] ${
                                 isSelected
@@ -2134,6 +2163,7 @@ export function TiptapComposer({
   onEffortChange,
   availableAgents,
   selectedAgent,
+  agentOnly = false,
   hostedHarness,
   onAgentChange,
   onModelSelectorOpenChange,
@@ -2145,6 +2175,7 @@ export function TiptapComposer({
   contextItems = [],
   onRemoveContextItem,
   plusMenuMode = "full",
+  terminalModeControl,
   extensionTools = false,
   interceptBuildRequestsForBuilder = false,
   onAttachmentError,
@@ -3631,6 +3662,7 @@ export function TiptapComposer({
             <ComposerPlusMenu
               onSelectMode={handleSelectMode}
               mode={plusMenuMode}
+              terminalModeControl={terminalModeControl}
               extensionTools={extensionTools}
               onAttachmentError={onAttachmentError}
             />
@@ -3645,6 +3677,7 @@ export function TiptapComposer({
             engines={availableModels}
             agents={availableAgents}
             selectedAgent={selectedAgent}
+            agentOnly={agentOnly}
             hostedHarness={hostedHarness}
             showAutoModelOption={showAutoModelOption}
             modelListLoading={modelListLoading}

package/src/composer/index.ts

@@ -29,6 +29,7 @@ export {
   type PromptComposerFile,
   type PromptComposerSubmitOptions,
 } from "./PromptComposer.js";
+export type { ComposerTerminalModeControl } from "./ComposerPlusMenu.js";
 export {
   RealtimeVoiceModeDock,
   RealtimeVoiceModeEntry,