@stigmer/react 1.0.2 → 1.0.4

package/src/composer/ComposerToolbar.tsx

@@ -20,21 +20,31 @@ export interface ComposerToolbarProps {
   readonly canSend: boolean;
   readonly onSend: () => void;
 
-  // -- Tier 1: Workspace ----------------------------------------------------
+  // -- Left group: Primary state --------------------------------------------
+
+  readonly showHarnessSelector: boolean;
+  readonly harness?: HarnessOption;
+  readonly onHarnessChange: (harness: HarnessOption) => void;
+
+  readonly showInteractionModePicker: boolean;
+  readonly interactionMode?: InteractionModeOption;
+  readonly onInteractionModeChange: (mode: InteractionModeOption) => void;
+
+  readonly showModelSelector: boolean;
+  readonly modelId?: string;
+  readonly onModelChange: (id: string) => void;
+
+  // -- Right group: Secondary actions (icon-only) ---------------------------
 
   readonly showWorkspace: boolean;
   readonly workspaceCount: number;
   /** Pre-built workspace editor content for the popover. */
   readonly workspaceContent: React.ReactNode;
 
-  // -- Tier 1: Attach -------------------------------------------------------
-
   readonly showAttach: boolean;
   readonly attachmentCount: number;
   readonly onAttachClick: () => void;
 
-  // -- Tier 2: Configure menu -----------------------------------------------
-
   readonly configureItems: readonly ConfigureMenuItem[];
   readonly configOpen: boolean;
   readonly onConfigOpenChange: (open: boolean) => void;
@@ -42,39 +52,23 @@ export interface ComposerToolbarProps {
   readonly onConfigActivePanelChange: (panel: string | null) => void;
   /** Render the picker content for a given configure panel id. */
   readonly renderConfigPanel: (itemId: string) => React.ReactNode;
-
-  // -- Harness selector -----------------------------------------------------
-
-  readonly showHarnessSelector: boolean;
-  readonly harness?: HarnessOption;
-  readonly onHarnessChange: (harness: HarnessOption) => void;
-
-  // -- Interaction mode picker ------------------------------------------------
-
-  readonly showInteractionModePicker: boolean;
-  readonly interactionMode?: InteractionModeOption;
-  readonly onInteractionModeChange: (mode: InteractionModeOption) => void;
-
-  // -- Model selector -------------------------------------------------------
-
-  readonly showModelSelector: boolean;
-  readonly modelId?: string;
-  readonly onModelChange: (id: string) => void;
 }
 
 /**
  * Composer toolbar — Zone 3 of the SessionComposer.
  *
- * Renders a two-tier toolbar following the frequency-of-interaction principle:
+ * Layout follows a two-group pattern inspired by Cursor's compact approach:
  *
- * **Tier 1 (always visible):** Workspace, Attach
- * **Tier 2 (behind Configure menu):** Agent, MCP, Skills, Secrets
- * **Right edge:** Runner Picker, Model Selector, Send
+ * **Left group (primary state):** Interaction Mode, Model Selector
+ * **Right group (secondary actions, icon-only):** Workspace, Attach, Configure, Send
  *
- * Workspace precedes Attach because it is the higher-signal context setter
- * (defines the codebase scope for the session). Attach is supplementary.
+ * Primary state indicators retain text labels (users glance at mode and model
+ * frequently). Secondary actions use icon-only buttons with tooltips and
+ * aria-labels — they are actions triggered occasionally, not state to monitor.
  *
- * Separators are placed between conceptual groups using Gestalt proximity.
+ * This separation follows Fitts's Law (related actions clustered near Send),
+ * Gestalt proximity (left = "what," right = "do"), and Nielsen H8 (minimal
+ * visual weight for secondary controls).
  */
 export function ComposerToolbar({
   disabled,
@@ -103,23 +97,50 @@ export function ComposerToolbar({
   modelId,
   onModelChange,
 }: ComposerToolbarProps) {
-  const hasTier1 = showAttach || showWorkspace;
-  const hasTier2 = configureItems.length > 0;
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
-  const hasExecParams = showHarnessSeparate || showInteractionModePicker || showModelSelector;
 
   return (
     <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
-      <div className="flex items-center gap-1.5">
-        {/* ---- Tier 1: Input context (Workspace first, then Attach) ---- */}
+      {/* ---- Left group: Primary state (Mode + Model) ---- */}
+
+      <div className="flex min-w-0 items-center gap-1.5">
+        {showInteractionModePicker && (
+          <InteractionModePicker
+            value={interactionMode ?? "agent"}
+            onValueChange={onInteractionModeChange}
+            disabled={disabled}
+          />
+        )}
+
+        {showHarnessSeparate && (
+          <HarnessSelector
+            value={harness ?? "native"}
+            onValueChange={onHarnessChange}
+            disabled={disabled}
+          />
+        )}
+
+        {showModelSelector && (
+          <ModelSelector
+            value={modelId}
+            onValueChange={onModelChange}
+            harness={showHarnessSelector ? undefined : harness}
+            initialHarness={showHarnessSelector ? harness : undefined}
+            onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
+            disabled={disabled}
+          />
+        )}
+      </div>
+
+      {/* ---- Right group: Secondary actions (icon-only) + Send ---- */}
 
+      <div className="flex shrink-0 items-center gap-1">
         {showWorkspace && (
           <ContextPopover
             icon={<WorkspaceIcon />}
             label="Workspace"
             count={workspaceCount}
             disabled={disabled}
-            hideLabel
           >
             {workspaceContent}
           </ContextPopover>
@@ -130,31 +151,25 @@ export function ComposerToolbar({
             type="button"
             disabled={disabled}
             onClick={onAttachClick}
+            title="Attach files"
             className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+              "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
               "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
             aria-label="Attach files"
           >
-            <PaperclipIcon />
-            <span className="max-sm:hidden">Attach</span>
-            {attachmentCount > 0 && (
-              <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-                {attachmentCount}
-              </span>
-            )}
+            <span className="relative">
+              <PaperclipIcon />
+              {attachmentCount > 0 && (
+                <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+                  {attachmentCount}
+                </span>
+              )}
+            </span>
           </button>
         )}
 
-        {/* ---- Separator between Tier 1 and Tier 2 ---- */}
-
-        {hasTier1 && hasTier2 && (
-          <div className="mx-0.5 h-4 w-px bg-border/50" aria-hidden="true" />
-        )}
-
-        {/* ---- Tier 2: Agent configuration (behind Configure menu) ---- */}
-
         <ConfigureMenu
           open={configOpen}
           onOpenChange={onConfigOpenChange}
@@ -165,51 +180,16 @@ export function ComposerToolbar({
           disabled={disabled}
         />
 
-        {/* ---- Separator before execution parameters ---- */}
-
-        {(hasTier1 || hasTier2) && hasExecParams && (
-          <div className="mx-0.5 h-4 w-px bg-border/50" aria-hidden="true" />
-        )}
-
-        {showHarnessSeparate && (
-          <HarnessSelector
-            value={harness ?? "native"}
-            onValueChange={onHarnessChange}
-            disabled={disabled}
-          />
-        )}
-
-        {showInteractionModePicker && (
-          <InteractionModePicker
-            value={interactionMode ?? "agent"}
-            onValueChange={onInteractionModeChange}
-            disabled={disabled}
-          />
-        )}
-
-        {showModelSelector && (
-          <ModelSelector
-            value={modelId}
-            onValueChange={onModelChange}
-            harness={showHarnessSelector ? undefined : harness}
-            initialHarness={showHarnessSelector ? harness : undefined}
-            onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
-            disabled={disabled}
-          />
-        )}
+        <button
+          type="button"
+          disabled={!canSend}
+          onClick={onSend}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
+          aria-label="Send message"
+        >
+          {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
+        </button>
       </div>
-
-      {/* ---- Send button ---- */}
-
-      <button
-        type="button"
-        disabled={!canSend}
-        onClick={onSend}
-        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
-        aria-label="Send message"
-      >
-        {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
-      </button>
     </div>
   );
 }

package/src/composer/ConfigureMenu.tsx

@@ -73,26 +73,28 @@ export function ConfigureMenu({
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
       <Popover.Trigger
         disabled={disabled}
+        title="Configure"
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
           "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
           "disabled:pointer-events-none disabled:opacity-50",
         )}
         aria-label="Configure agent, tools, and skills"
       >
-        <ConfigureIcon />
-        <span className="max-sm:hidden">Configure</span>
-        {totalCount > 0 && (
-          <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-            {totalCount}
-          </span>
-        )}
-        {hasWarning && totalCount === 0 && (
-          <span
-            className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
-            aria-label="Configuration needed"
-          />
-        )}
+        <span className="relative">
+          <ConfigureIcon />
+          {totalCount > 0 && (
+            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+              {totalCount}
+            </span>
+          )}
+          {hasWarning && totalCount === 0 && (
+            <span
+              className="absolute -right-0.5 -top-0.5 inline-block h-2 w-2 rounded-full bg-warning"
+              aria-label="Configuration needed"
+            />
+          )}
+        </span>
       </Popover.Trigger>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">

package/src/composer/ContextPopover.tsx

@@ -10,7 +10,6 @@ export function ContextPopover({
   disabled,
   open,
   onOpenChange,
-  hideLabel,
 }: {
   icon: React.ReactNode;
   label: string;
@@ -19,8 +18,6 @@ export function ContextPopover({
   disabled?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  /** When true, hides the text label on small viewports (icon-only). */
-  hideLabel?: boolean;
 }) {
   const portalContainer = useStigmerPortalContainer();
 
@@ -28,19 +25,22 @@ export function ContextPopover({
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger
         disabled={disabled}
+        title={label}
+        aria-label={label}
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
           "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
           "disabled:pointer-events-none disabled:opacity-50",
         )}
       >
-        {icon}
-        <span className={cn(hideLabel && "max-sm:hidden")}>{label}</span>
-        {count > 0 && (
-          <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-            {count}
-          </span>
-        )}
+        <span className="relative">
+          {icon}
+          {count > 0 && (
+            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+              {count}
+            </span>
+          )}
+        </span>
       </Popover.Trigger>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">

package/src/composer/SessionComposer.tsx

@@ -381,9 +381,9 @@ export interface SessionComposerProps {
  * Combines a self-resizing textarea, model selector, and context pickers
  * (agent, workspace, MCP servers, skills) into a single input card.
  *
- * The toolbar uses a two-tier layout:
- * - **Tier 1** (always visible): Workspace, Attach, Model Selector
- * - **Tier 2** (behind Configure menu): Agent, MCP, Skills, Secrets
+ * The toolbar uses a two-group layout:
+ * - **Left (primary state):** Interaction Mode, Model Selector
+ * - **Right (secondary actions, icon-only):** Workspace, Attach, Configure (Agent, MCP, Skills, Secrets), Send
  *
  * Selected items render as removable chips between the textarea and toolbar.
  *
@@ -1510,9 +1510,6 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           isSubmitting={isSubmitting}
           canSend={canSend}
           onSend={composer.submit}
-          showAttach={showAttach}
-          attachmentCount={attachments.entries.length}
-          onAttachClick={() => fileInputRef.current?.click()}
           showWorkspace={showWorkspace}
           workspaceCount={workspaceCount}
           workspaceContent={
@@ -1540,6 +1537,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 </div>
               : null
           }
+          showAttach={showAttach}
+          attachmentCount={attachments.entries.length}
+          onAttachClick={() => fileInputRef.current?.click()}
           configureItems={configureItems}
           configOpen={configOpen}
           onConfigOpenChange={handleConfigOpenChange}

package/src/composer/icons.tsx

@@ -93,8 +93,8 @@ export function XIcon() {
 export function PaperclipIcon() {
   return (
     <svg
-      width="14"
-      height="14"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
@@ -133,8 +133,8 @@ export function AgentIcon() {
 export function WorkspaceIcon() {
   return (
     <svg
-      width="14"
-      height="14"
+      width="16"
+      height="16"
       viewBox="0 0 14 14"
       fill="none"
       stroke="currentColor"
@@ -238,8 +238,8 @@ export function RunnerIcon() {
 export function ConfigureIcon() {
   return (
     <svg
-      width="14"
-      height="14"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"

package/src/internal/withTimeout.ts

@@ -0,0 +1,25 @@
+/**
+ * Races a promise against a timer. Rejects with `message` if the timer
+ * fires before the promise settles.
+ *
+ * @internal Not part of the public `@stigmer/react` API.
+ */
+export function withTimeout<T>(
+  promise: Promise<T>,
+  ms: number,
+  message: string,
+): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(message)), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (reason) => {
+        clearTimeout(timer);
+        reject(reason);
+      },
+    );
+  });
+}