@stigmer/react 0.3.4 → 0.4.0

package/src/billing/useSetAutoRechargeConfig.ts

@@ -0,0 +1,90 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+import type { BillingAccount } from "@stigmer/protos/ai/stigmer/billing/v1/billing_account_pb";
+
+/** Input for {@link useSetAutoRechargeConfig}. */
+export interface SetAutoRechargeConfigInput {
+  /** Organization ID to configure auto-recharge for. */
+  readonly orgId: string;
+  /** Whether auto-recharge is enabled. */
+  readonly enabled: boolean;
+  /** Trigger threshold in micro-USD. */
+  readonly thresholdMicros: bigint;
+  /** Fixed charge per recharge event in micro-USD. */
+  readonly rechargeAmountMicros: bigint;
+  /** Maximum monthly auto-recharge spend in micro-USD. */
+  readonly monthlyCapMicros: bigint;
+}
+
+/** Return value of {@link useSetAutoRechargeConfig}. */
+export interface UseSetAutoRechargeConfigReturn {
+  /**
+   * Save auto-recharge configuration. Returns the updated BillingAccount
+   * on success.
+   */
+  readonly setConfig: (input: SetAutoRechargeConfigInput) => Promise<BillingAccount>;
+  /** `true` while the configuration is being saved. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook for configuring auto-recharge settings.
+ *
+ * Wraps `billing.setAutoRechargeConfig` with loading and error state
+ * management. Returns the updated `BillingAccount` on success so the
+ * parent can refresh its cached data.
+ *
+ * @example
+ * ```tsx
+ * const { setConfig, isSubmitting, error } = useSetAutoRechargeConfig();
+ *
+ * await setConfig({
+ *   orgId,
+ *   enabled: true,
+ *   thresholdMicros: BigInt(5_000_000),
+ *   rechargeAmountMicros: BigInt(50_000_000),
+ *   monthlyCapMicros: BigInt(200_000_000),
+ * });
+ * ```
+ */
+export function useSetAutoRechargeConfig(): UseSetAutoRechargeConfigReturn {
+  const stigmer = useStigmer();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const setConfig = useCallback(
+    async (input: SetAutoRechargeConfigInput): Promise<BillingAccount> => {
+      setIsSubmitting(true);
+      setError(null);
+
+      try {
+        const account = await stigmer.billing.setAutoRechargeConfig({
+          orgId: input.orgId,
+          enabled: input.enabled,
+          thresholdMicros: input.thresholdMicros,
+          rechargeAmountMicros: input.rechargeAmountMicros,
+          monthlyCapMicros: input.monthlyCapMicros,
+        });
+
+        return account;
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { setConfig, isSubmitting, error, clearError };
+}

package/src/composer/ComposerToolbar.tsx

@@ -97,7 +97,7 @@ export function ComposerToolbar({
   const hasTier2 = configureItems.length > 0;
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
   const hasExecParams = showHarnessSeparate || showModelSelector;
-  const harnessLocked = harness !== undefined && !showHarnessSelector;
+  const harnessLocked = harness !== undefined;
 
   return (
     <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">

package/src/composer/SessionComposer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from "react";
+import { memo, useCallback, useEffect, 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";
@@ -33,6 +33,7 @@ import {
   SYSTEM_ENV_VAR_KEYS,
   resolveSystemEnvVarValues,
 } from "../environment/systemEnvVars";
+import { useRenderTracer } from "../internal/dev";
 import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
 import {
   isActivePhase,
@@ -371,7 +372,7 @@ export interface SessionComposerProps {
  * />
  * ```
  */
-export function SessionComposer({
+export const SessionComposer = memo(function SessionComposer({
   onSubmit,
   isSubmitting = false,
   disabled = false,
@@ -407,7 +408,24 @@ export function SessionComposer({
   ariaLabel = "Send message",
   className,
 }: SessionComposerProps) {
-  const [modelId, setModelId] = useState<string | undefined>(defaultModelId);
+  useRenderTracer("SessionComposer", { disabled, isSubmitting });
+
+  const [modelId, setModelIdRaw] = useState<string | undefined>(defaultModelId);
+  const userOverrodeModel = useRef(false);
+
+  // Sync internal modelId when the external defaultModelId prop changes
+  // (e.g., lastExecModelId resolves after executions load). Only sync if the
+  // user hasn't made a local selection in this composer instance.
+  useEffect(() => {
+    if (!userOverrodeModel.current && defaultModelId !== undefined) {
+      setModelIdRaw(defaultModelId);
+    }
+  }, [defaultModelId]);
+
+  const setModelId = useCallback((id: string | undefined) => {
+    userOverrodeModel.current = true;
+    setModelIdRaw(id);
+  }, []);
 
   const [displayNames, setDisplayNames] = useState<Map<string, string>>(
     () => new Map(),
@@ -1418,7 +1436,7 @@ export function SessionComposer({
       </div>
     </div>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Agent setup error — secret-flow guidance or generic fallback

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

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { SessionComposer } from "../SessionComposer";
+
+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.
+    const memoSymbol = Symbol.for("react.memo");
+    const typed = SessionComposer as unknown as { $$typeof: symbol; type: Function; 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/);
+  });
+
+  it("uses default shallow comparison (no custom areEqual)", () => {
+    const typed = SessionComposer as unknown as { compare: unknown };
+
+    // When React.memo is called without a second argument, `compare`
+    // is null — React falls back to shallow prop comparison.
+    expect(typed.compare).toBeNull();
+  });
+});

package/src/execution/ApprovalCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
 import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
@@ -39,6 +39,10 @@ export interface ApprovalCardProps {
  * dispatch, ensuring pixel-level parity between the approval
  * preview and the post-execution detail view.
  *
+ * Wrapped in `React.memo` — structural sharing (T04) preserves the
+ * `PendingApproval` reference when unchanged, so approval cards
+ * skip re-renders during unrelated stream updates.
+ *
  * @example
  * ```tsx
  * <ApprovalCard
@@ -48,7 +52,7 @@ export interface ApprovalCardProps {
  * />
  * ```
  */
-export function ApprovalCard({
+export const ApprovalCard = memo(function ApprovalCard({
   pendingApproval,
   onSubmit,
   isSubmitting = false,
@@ -198,7 +202,7 @@ export function ApprovalCard({
       </div>
     </div>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Internal sub-components

package/src/execution/ExecutionPhaseBadge.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { memo } from "react";
 import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 
@@ -97,7 +98,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
  * <ExecutionPhaseBadge phase={ExecutionPhase.EXECUTION_COMPLETED} />
  * ```
  */
-export function ExecutionPhaseBadge({
+export const ExecutionPhaseBadge = memo(function ExecutionPhaseBadge({
   phase,
   className,
 }: ExecutionPhaseBadgeProps) {
@@ -122,7 +123,7 @@ export function ExecutionPhaseBadge({
       {config.label}
     </span>
   );
-}
+});
 
 function DotIcon() {
   return (

package/src/execution/MessageEntry.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import Markdown from "react-markdown";
+import { memo, useState } from "react";
+import { Streamdown } from "streamdown";
 import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
-import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components";
+import { MARKDOWN_COMPONENTS } from "../internal/markdown-components";
+import { useRenderTracer } from "../internal/dev";
 
 /** Props for {@link MessageEntry}. */
 export interface MessageEntryProps {
@@ -19,14 +20,18 @@ export interface MessageEntryProps {
  * Renders a single message in the conversation thread.
  *
  * - `MESSAGE_HUMAN` — plain text with muted background
- * - `MESSAGE_AI` — markdown-rendered via `react-markdown` + `remark-gfm`,
- *   with a blinking cursor while streaming
+ * - `MESSAGE_AI` — markdown-rendered via Streamdown with block-level
+ *   memoization and streaming-aware incomplete-syntax healing
  * - `MESSAGE_THINKING` — collapsible thinking block with subdued styling,
  *   collapsed by default showing a brief summary
  * - `MESSAGE_SYSTEM` — small muted text
  * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results are
  *   consumed by {@link ToolCallGroup})
  *
+ * Wrapped in `React.memo` — structural sharing (T04) guarantees that
+ * unchanged messages keep the same object reference, so completed
+ * messages skip re-renders entirely during streaming.
+ *
  * Purely presentational — no data fetching, no state.
  * All visual properties flow through `--stgm-*` tokens.
  *
@@ -35,7 +40,16 @@ export interface MessageEntryProps {
  * <MessageEntry message={agentMessage} />
  * ```
  */
-export function MessageEntry({ message, className }: MessageEntryProps) {
+export const MessageEntry = memo(function MessageEntry({
+  message,
+  className,
+}: MessageEntryProps) {
+  useRenderTracer("MessageEntry", {
+    messageType: message.type,
+    contentLength: message.content.length,
+    isStreaming: message.isStreaming,
+  });
+
   switch (message.type) {
     case MessageType.MESSAGE_HUMAN:
       return <HumanMessage content={message.content} className={className} />;
@@ -60,7 +74,7 @@ export function MessageEntry({ message, className }: MessageEntryProps) {
     default:
       return null;
   }
-}
+});
 
 function HumanMessage({
   content,
@@ -89,6 +103,8 @@ function AiMessage({
   isStreaming: boolean;
   className?: string;
 }) {
+  useRenderTracer("AiMessage", { contentLength: content.length, isStreaming });
+
   return (
     <div
       role="article"
@@ -97,18 +113,13 @@ function AiMessage({
       className={cn("px-4 py-3", className)}
     >
       <div className="stgm-prose">
-        <Markdown
-          remarkPlugins={REMARK_PLUGINS}
+        <Streamdown
           components={MARKDOWN_COMPONENTS}
+          isAnimating={isStreaming}
+          caret="block"
         >
           {content}
-        </Markdown>
-        {isStreaming && (
-          <span
-            className="inline-block w-[2px] h-[1em] bg-foreground align-text-bottom animate-pulse ml-0.5"
-            aria-hidden="true"
-          />
-        )}
+        </Streamdown>
       </div>
     </div>
   );