@stigmer/react 0.5.1 → 1.0.0

package/src/composer/ComposerToolbar.tsx

@@ -6,6 +6,7 @@ import { ConfigureMenu, type ConfigureMenuItem } from "./ConfigureMenu";
 import { ModelSelector } from "../models/ModelSelector";
 import { HarnessSelector } from "../models/HarnessSelector";
 import type { HarnessOption } from "../models/harness";
+import { InteractionModePicker, type InteractionModeOption } from "./InteractionModePicker";
 import {
   PaperclipIcon,
   WorkspaceIcon,
@@ -48,6 +49,12 @@ export interface ComposerToolbarProps {
   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;
@@ -89,6 +96,9 @@ export function ComposerToolbar({
   showHarnessSelector,
   harness,
   onHarnessChange,
+  showInteractionModePicker,
+  interactionMode,
+  onInteractionModeChange,
   showModelSelector,
   modelId,
   onModelChange,
@@ -96,7 +106,7 @@ export function ComposerToolbar({
   const hasTier1 = showAttach || showWorkspace;
   const hasTier2 = configureItems.length > 0;
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
-  const hasExecParams = showHarnessSeparate || 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">
@@ -169,6 +179,14 @@ export function ComposerToolbar({
           />
         )}
 
+        {showInteractionModePicker && (
+          <InteractionModePicker
+            value={interactionMode ?? "agent"}
+            onValueChange={onInteractionModeChange}
+            disabled={disabled}
+          />
+        )}
+
         {showModelSelector && (
           <ModelSelector
             value={modelId}

package/src/composer/InteractionModePicker.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { cn } from "@stigmer/theme";
+import { useStigmerPortalContainer } from "../portal-container";
+
+/**
+ * Interaction mode options for agent executions.
+ *
+ * Maps to `InteractionMode` proto enum values (excluding UNSPECIFIED):
+ * - `"agent"` → `INTERACTION_MODE_AGENT` (full tool access)
+ * - `"plan"` → `INTERACTION_MODE_PLAN` (read-only analysis)
+ */
+export type InteractionModeOption = "agent" | "plan";
+
+const OPTIONS: readonly InteractionModeOption[] = ["agent", "plan"];
+
+const MODE_META: Record<
+  InteractionModeOption,
+  { label: string; description: string }
+> = {
+  agent: {
+    label: "Agent",
+    description: "Full tool access — read, write, and execute",
+  },
+  plan: {
+    label: "Plan",
+    description: "Read-only analysis — search and reason only",
+  },
+};
+
+/** Props for {@link InteractionModePicker}. */
+export interface InteractionModePickerProps {
+  /** Currently selected interaction mode. */
+  readonly value: InteractionModeOption;
+  /** Called when the user picks a different mode. */
+  readonly onValueChange: (mode: InteractionModeOption) => void;
+  /** Additional CSS class names for the trigger button. */
+  readonly className?: string;
+  /** When true, disables the picker. */
+  readonly disabled?: boolean;
+}
+
+/**
+ * Compact dropdown for choosing the execution interaction mode.
+ *
+ * Renders a trigger button showing the current mode label with a
+ * chevron, and a popover with the available options. Each option
+ * shows a label and a short description.
+ *
+ * Designed to scale to additional modes (e.g. Ask) without layout
+ * changes. Uses `@base-ui/react` Popover for positioning and portal
+ * rendering, matching the pattern used by {@link ModelSelector}.
+ *
+ * @example
+ * ```tsx
+ * function ComposerToolbar() {
+ *   const [mode, setMode] = useState<InteractionModeOption>("agent");
+ *   return <InteractionModePicker value={mode} onValueChange={setMode} />;
+ * }
+ * ```
+ */
+export function InteractionModePicker({
+  value,
+  onValueChange,
+  className,
+  disabled,
+}: InteractionModePickerProps) {
+  const portalContainer = useStigmerPortalContainer();
+  const [open, setOpen] = useState(false);
+
+  const select = useCallback(
+    (mode: InteractionModeOption) => {
+      onValueChange(mode);
+      setOpen(false);
+    },
+    [onValueChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const idx = OPTIONS.indexOf(value);
+      let next: number | undefined;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          next = idx < OPTIONS.length - 1 ? idx + 1 : 0;
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          next = idx > 0 ? idx - 1 : OPTIONS.length - 1;
+          break;
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          return;
+      }
+
+      if (next !== undefined) {
+        select(OPTIONS[next]);
+      }
+    },
+    [value, select],
+  );
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger
+        disabled={disabled}
+        className={cn(
+          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className,
+        )}
+      >
+        <span className="font-medium text-foreground">
+          {MODE_META[value].label}
+        </span>
+        <ChevronIcon />
+      </Popover.Trigger>
+
+      <Popover.Portal container={portalContainer}>
+        <Popover.Positioner sideOffset={4}>
+          <Popover.Popup
+            role="listbox"
+            aria-label="Interaction mode"
+            onKeyDown={handleKeyDown}
+            className={cn(
+              "z-50 w-56 rounded-lg border border-border bg-popover p-1 shadow-md",
+              "animate-in fade-in-0 zoom-in-95",
+            )}
+          >
+            {OPTIONS.map((option) => {
+              const meta = MODE_META[option];
+              const isActive = value === option;
+
+              return (
+                <button
+                  key={option}
+                  type="button"
+                  role="option"
+                  aria-selected={isActive}
+                  onClick={() => select(option)}
+                  className={cn(
+                    "flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    isActive
+                      ? "bg-accent text-foreground"
+                      : "text-foreground hover:bg-accent-hover",
+                  )}
+                >
+                  <span className="text-xs font-medium">{meta.label}</span>
+                  <span className="text-[0.65rem] leading-snug text-muted-foreground">
+                    {meta.description}
+                  </span>
+                </button>
+              );
+            })}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      className="shrink-0 text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 4.5L6 7.5L9 4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/composer/SessionComposer.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from "react";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage, type AttachmentInput, type EnvVarInput, type McpServerUsageInput, type ResourceRef } from "@stigmer/sdk";
 import { useComposer } from "./useComposer";
 import { ComposerToolbar } from "./ComposerToolbar";
 import { type ConfigureMenuItem } from "./ConfigureMenu";
 import type { HarnessOption } from "../models/harness";
+import type { InteractionModeOption } from "./InteractionModePicker";
 import { parseModelKey } from "../models/registry";
 import { ContextChip, type ChipItem } from "./ContextChip";
 import { WorkspaceEditor } from "../workspace/WorkspaceEditor";
@@ -51,6 +52,33 @@ import {
   ResolveSpinner,
 } from "./icons";
 
+/**
+ * Imperative handle exposed by {@link SessionComposer} via `ref`.
+ *
+ * Allows parent components to programmatically set the composer's
+ * message text and focus the textarea. Used for features like
+ * "Build from Plan" where a CTA outside the composer needs to
+ * pre-fill and focus the input.
+ *
+ * @example
+ * ```tsx
+ * const composerRef = useRef<SessionComposerHandle>(null);
+ *
+ * function handleBuildFromPlan() {
+ *   composerRef.current?.setMessage("Implement the plan above");
+ *   composerRef.current?.focus();
+ * }
+ *
+ * <SessionComposer ref={composerRef} onSubmit={handleSubmit} />
+ * ```
+ */
+export interface SessionComposerHandle {
+  /** Replace the composer's message text. */
+  setMessage(message: string): void;
+  /** Focus the composer's textarea. */
+  focus(): void;
+}
+
 /**
  * Context provided to `onSubmit` at the moment of submission.
  *
@@ -83,6 +111,16 @@ export interface SessionComposerSubmitContext {
    * `undefined` when no files were attached.
    */
   readonly attachments?: AttachmentInput[];
+  /**
+   * Interaction mode selected by the user for this execution.
+   *
+   * - `"agent"` (default): full tool access — read, write, create, delete.
+   * - `"plan"`: read-only analysis — read, search, list only.
+   *
+   * `undefined` when no mode picker is shown (defaults to `"agent"`).
+   * Pass to execution creation as `execution_config.interaction_mode`.
+   */
+  readonly interactionMode?: InteractionModeOption;
 }
 
 /** Props for {@link SessionComposer}. */
@@ -120,6 +158,22 @@ export interface SessionComposerProps {
   /** Show the harness selector in the toolbar. @default false */
   readonly showHarnessSelector?: boolean;
 
+  /**
+   * Currently selected interaction mode.
+   *
+   * When `onInteractionModeChange` is provided, renders a mode picker
+   * in the toolbar. Defaults to `"agent"` when omitted.
+   */
+  readonly interactionMode?: InteractionModeOption;
+  /**
+   * Called when the user switches the interaction mode.
+   *
+   * Providing this callback enables the mode picker in the toolbar.
+   */
+  readonly onInteractionModeChange?: (mode: InteractionModeOption) => void;
+  /** Show the interaction mode picker in the toolbar. @default false */
+  readonly showInteractionModePicker?: boolean;
+
   /** Initial model ID for the model selector. */
   readonly defaultModelId?: string;
   /** Called when the user changes the selected model. */
@@ -384,13 +438,16 @@ export interface SessionComposerProps {
  * />
  * ```
  */
-export const SessionComposer = memo(function SessionComposer({
+const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerProps>(function SessionComposer({
   onSubmit,
   isSubmitting = false,
   disabled = false,
   harness,
   onHarnessChange,
   showHarnessSelector = false,
+  interactionMode,
+  onInteractionModeChange,
+  showInteractionModePicker = false,
   defaultModelId,
   onModelChange,
   showModelSelector = true,
@@ -420,7 +477,7 @@ export const SessionComposer = memo(function SessionComposer({
   autoFocus = false,
   ariaLabel = "Send message",
   className,
-}: SessionComposerProps) {
+}, ref) {
   useRenderTracer("SessionComposer", { disabled, isSubmitting });
 
   const [modelId, setModelIdRaw] = useState<string | undefined>(defaultModelId);
@@ -655,12 +712,17 @@ export const SessionComposer = memo(function SessionComposer({
       const hasEnv = Object.keys(env).length > 0;
       const hasAttachments =
         attachmentInputs !== undefined && attachmentInputs.length > 0;
+      const effectiveMode =
+        showInteractionModePicker && interactionMode
+          ? interactionMode
+          : undefined;
 
       const context: SessionComposerSubmitContext | undefined =
-        hasEnv || hasAttachments
+        hasEnv || hasAttachments || effectiveMode
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
+              interactionMode: effectiveMode,
             }
           : undefined;
 
@@ -673,7 +735,7 @@ export const SessionComposer = memo(function SessionComposer({
         attachments.clear();
       }
     },
-    [onSubmit, modelId, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv],
+    [onSubmit, modelId, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
   );
 
   const composer = useComposer({
@@ -681,6 +743,11 @@ export const SessionComposer = memo(function SessionComposer({
     disabled: isDisabled,
   });
 
+  useImperativeHandle(ref, () => ({
+    setMessage: composer.setMessage,
+    focus: () => composer.textareaRef.current?.focus(),
+  }), [composer.setMessage, composer.textareaRef]);
+
   const handleModelChange = useCallback(
     (id: string) => {
       setModelId(id);
@@ -696,6 +763,13 @@ export const SessionComposer = memo(function SessionComposer({
     [onHarnessChange],
   );
 
+  const handleInteractionModeChange = useCallback(
+    (mode: InteractionModeOption) => {
+      onInteractionModeChange?.(mode);
+    },
+    [onInteractionModeChange],
+  );
+
   const handleDisplayNameResolved = useCallback(
     (key: string, name: string) => {
       setDisplayNames((prev) => {
@@ -1197,7 +1271,6 @@ export const SessionComposer = memo(function SessionComposer({
             <div className="relative">
               <AgentPicker
                 org={org!}
-                scope="all"
                 value={agentRef ?? null}
                 onChange={handleAgentSelect}
                 onDisplayNameResolved={handleDisplayNameResolved}
@@ -1218,7 +1291,6 @@ export const SessionComposer = memo(function SessionComposer({
           return (
             <McpServerPicker
               org={org!}
-              scope="all"
               setup={{
                 entries: mcpSetup.entries,
                 onServerAdded: (ref) => mcpSetup.addServer(ref),
@@ -1241,7 +1313,6 @@ export const SessionComposer = memo(function SessionComposer({
           return (
             <SkillPicker
               org={org!}
-              scope="all"
               value={skillRefs ?? []}
               onChange={onSkillRefsChange!}
               onDisplayNameResolved={handleDisplayNameResolved}
@@ -1478,6 +1549,9 @@ export const SessionComposer = memo(function SessionComposer({
           showHarnessSelector={showHarnessSelector}
           harness={harness}
           onHarnessChange={handleHarnessChange}
+          showInteractionModePicker={showInteractionModePicker}
+          interactionMode={interactionMode}
+          onInteractionModeChange={handleInteractionModeChange}
           showModelSelector={showModelSelector}
           modelId={modelId}
           onModelChange={handleModelChange}
@@ -1487,6 +1561,9 @@ export const SessionComposer = memo(function SessionComposer({
   );
 });
 
+export const SessionComposer = memo(SessionComposerInner);
+
+
 // ---------------------------------------------------------------------------
 // Agent setup error — secret-flow guidance or generic fallback
 // ---------------------------------------------------------------------------

package/src/composer/__tests__/SessionComposer-memo.test.ts

@@ -5,15 +5,20 @@ describe("SessionComposer — memo isolation", () => {
   it("is wrapped in React.memo (shallow prop comparison)", () => {
     // React.memo returns an exotic component with $$typeof set to
     // Symbol.for("react.memo") and a `type` field pointing at the
-    // inner function. Regular function components have neither.
+    // inner component. For forwardRef components the inner type is an
+    // object (the forwardRef exotic), not a plain function.
     const memoSymbol = Symbol.for("react.memo");
-    const typed = SessionComposer as unknown as { $$typeof: symbol; type: Function; compare: unknown };
+    const typed = SessionComposer as unknown as { $$typeof: symbol; type: unknown; compare: unknown };
 
     expect(typed.$$typeof).toBe(memoSymbol);
-    expect(typeof typed.type).toBe("function");
-    // The transform may rename the inner function to avoid shadowing
-    // the outer `const SessionComposer` binding (e.g. "SessionComposer2").
-    expect(typed.type.name).toMatch(/^SessionComposer/);
+    expect(typed.type).toBeTruthy();
+
+    const innerType = typed.type as { $$typeof?: symbol; render?: Function };
+    if (typeof typed.type === "function") {
+      expect((typed.type as Function).name).toMatch(/^SessionComposer/);
+    } else {
+      expect(innerType.$$typeof).toBe(Symbol.for("react.forward_ref"));
+    }
   });
 
   it("uses default shallow comparison (no custom areEqual)", () => {

package/src/composer/index.ts

@@ -3,6 +3,13 @@ export type { UseComposerOptions, UseComposerReturn } from "./useComposer";
 
 export { SessionComposer } from "./SessionComposer";
 export type {
+  SessionComposerHandle,
   SessionComposerProps,
   SessionComposerSubmitContext,
 } from "./SessionComposer";
+
+export { InteractionModePicker } from "./InteractionModePicker";
+export type {
+  InteractionModePickerProps,
+  InteractionModeOption,
+} from "./InteractionModePicker";

package/src/dashboard/DashboardFailedRuns.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { DashboardFailedRun } from "./types";
+
+export interface DashboardFailedRunsProps {
+  readonly failedRuns: readonly DashboardFailedRun[];
+  readonly isLoading: boolean;
+  /** Called when the user clicks "View" on a failed run. */
+  readonly onViewClick?: (id: string, type: DashboardFailedRun["type"]) => void;
+  readonly className?: string;
+}
+
+function timeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/**
+ * Widget showing recent failed executions from both agent and workflow
+ * domains, interleaved by timestamp.
+ *
+ * Each row includes a type badge (Agent / Workflow), the execution name,
+ * a truncated error, and a relative timestamp.
+ *
+ * @since Unified Platform Dashboard
+ */
+export const DashboardFailedRuns = memo(function DashboardFailedRuns({
+  failedRuns,
+  isLoading,
+  onViewClick,
+  className,
+}: DashboardFailedRunsProps) {
+  if (isLoading) {
+    return (
+      <div
+        className={cn("rounded-lg border border-border bg-card p-4", className)}
+        aria-busy="true"
+      >
+        <div className="mb-3 h-4 w-32 animate-pulse rounded bg-muted" />
+        <div className="space-y-2">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div key={i} className="h-10 animate-pulse rounded bg-muted/50" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("rounded-lg border border-border bg-card p-4", className)}>
+      <h3 className="mb-3 text-sm font-semibold text-foreground">
+        Recent Failures
+      </h3>
+      {failedRuns.length === 0 ? (
+        <p className="py-6 text-center text-xs text-muted-foreground">
+          No recent failures
+        </p>
+      ) : (
+        <ul className="space-y-1.5" role="list">
+          {failedRuns.map((run) => (
+            <li
+              key={run.id}
+              className="flex items-start gap-2 rounded-md px-2 py-1.5 text-xs hover:bg-muted/50"
+            >
+              <span
+                className={cn(
+                  "mt-0.5 shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+                  run.type === "agent_execution"
+                    ? "bg-primary/10 text-primary"
+                    : "bg-muted text-muted-foreground",
+                )}
+              >
+                {run.type === "agent_execution" ? "Agent" : "Workflow"}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-medium text-foreground">
+                  {run.name}
+                </p>
+                {run.error && (
+                  <p className="truncate text-muted-foreground">{run.error}</p>
+                )}
+              </div>
+              <span className="shrink-0 text-muted-foreground">
+                {timeAgo(run.failedAt)}
+              </span>
+              {onViewClick && (
+                <button
+                  type="button"
+                  onClick={() => onViewClick(run.id, run.type)}
+                  className="shrink-0 text-primary hover:underline"
+                >
+                  View
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+});