@stigmer/react 1.0.4 → 2.0.0

package/src/environment/EnvironmentPicker.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { useCallback, useId, useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
+import type { ResourceRef } from "@stigmer/sdk";
+import { useEnvironmentList } from "./useEnvironmentList";
+
+/** Props for {@link EnvironmentPicker}. */
+export interface EnvironmentPickerProps {
+  /** Organization slug to list environments from. */
+  readonly org: string;
+  /** Currently selected environment references, in merge order. */
+  readonly value: readonly ResourceRef[];
+  /** Called when the selection changes. */
+  readonly onChange: (refs: ResourceRef[]) => void;
+  /** Disable all interactions. */
+  readonly disabled?: boolean;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Multi-select component for binding Environment resources to an instance.
+ *
+ * Displays available environments as a dropdown and shows selected environments
+ * as an ordered list with position numbers indicating merge priority.
+ * Later entries override earlier ones when keys conflict.
+ *
+ * Uses `useEnvironmentList(org)` for data. Arrow buttons provide accessible
+ * reordering without requiring drag-and-drop libraries.
+ *
+ * @example
+ * ```tsx
+ * <EnvironmentPicker
+ *   org="acme"
+ *   value={environmentRefs}
+ *   onChange={setEnvironmentRefs}
+ * />
+ * ```
+ */
+export function EnvironmentPicker({
+  org,
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: EnvironmentPickerProps) {
+  const { environments, isLoading } = useEnvironmentList(org);
+  const selectId = useId();
+
+  const selectedSlugs = useMemo(
+    () => new Set(value.map((ref) => ref.slug)),
+    [value],
+  );
+
+  const availableEnvironments = useMemo(
+    () => environments.filter((env) => !selectedSlugs.has(env.metadata?.slug ?? "")),
+    [environments, selectedSlugs],
+  );
+
+  const handleAdd = useCallback(
+    (slug: string) => {
+      const env = environments.find((e) => e.metadata?.slug === slug);
+      if (!env) return;
+
+      const ref: ResourceRef = { org, slug: env.metadata!.slug };
+      onChange([...value, ref]);
+    },
+    [environments, onChange, org, value],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      const next = [...value];
+      next.splice(index, 1);
+      onChange(next);
+    },
+    [onChange, value],
+  );
+
+  const handleMoveUp = useCallback(
+    (index: number) => {
+      if (index === 0) return;
+      const next = [...value];
+      [next[index - 1], next[index]] = [next[index], next[index - 1]];
+      onChange(next);
+    },
+    [onChange, value],
+  );
+
+  const handleMoveDown = useCallback(
+    (index: number) => {
+      if (index >= value.length - 1) return;
+      const next = [...value];
+      [next[index], next[index + 1]] = [next[index + 1], next[index]];
+      onChange(next);
+    },
+    [onChange, value],
+  );
+
+  const resolveEnvName = useCallback(
+    (ref: ResourceRef): string => {
+      const env = environments.find((e) => e.metadata?.slug === ref.slug);
+      return env?.metadata?.name ?? ref.slug;
+    },
+    [environments],
+  );
+
+  const resolveEnvDescription = useCallback(
+    (ref: ResourceRef): string => {
+      const env = environments.find((e) => e.metadata?.slug === ref.slug);
+      return env?.spec?.description ?? "";
+    },
+    [environments],
+  );
+
+  return (
+    <div className={cn("space-y-3", className)} role="group" aria-label="Environment bindings">
+      {value.length > 0 && (
+        <SelectedList
+          value={value}
+          disabled={disabled}
+          resolveEnvName={resolveEnvName}
+          resolveEnvDescription={resolveEnvDescription}
+          onRemove={handleRemove}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+          total={value.length}
+        />
+      )}
+
+      {value.length > 1 && (
+        <p className="text-[0.65rem] text-muted-foreground">
+          Environments are merged in order. Later entries override earlier ones when keys conflict.
+        </p>
+      )}
+
+      <div>
+        <label htmlFor={selectId} className="sr-only">
+          Add environment
+        </label>
+        <select
+          id={selectId}
+          disabled={disabled || availableEnvironments.length === 0}
+          value=""
+          onChange={(e) => {
+            if (e.target.value) handleAdd(e.target.value);
+          }}
+          className={cn(
+            "w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm",
+            "text-foreground placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+        >
+          <option value="">
+            {isLoading
+              ? "Loading environments..."
+              : availableEnvironments.length === 0
+                ? value.length === environments.length && environments.length > 0
+                  ? "All environments selected"
+                  : "No environments available"
+                : "+ Add environment"}
+          </option>
+          {availableEnvironments.map((env) => (
+            <option key={env.metadata?.slug} value={env.metadata?.slug}>
+              {env.metadata?.name ?? env.metadata?.slug}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+interface SelectedListProps {
+  readonly value: readonly ResourceRef[];
+  readonly disabled: boolean;
+  readonly resolveEnvName: (ref: ResourceRef) => string;
+  readonly resolveEnvDescription: (ref: ResourceRef) => string;
+  readonly onRemove: (index: number) => void;
+  readonly onMoveUp: (index: number) => void;
+  readonly onMoveDown: (index: number) => void;
+  readonly total: number;
+}
+
+function SelectedList({
+  value,
+  disabled,
+  resolveEnvName,
+  resolveEnvDescription,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  total,
+}: SelectedListProps) {
+  return (
+    <ol className="space-y-1.5" aria-label="Selected environments (merge order)">
+      {value.map((ref, index) => (
+        <li
+          key={`${ref.org}-${ref.slug}-${index}`}
+          className={cn(
+            "flex items-center gap-2 rounded-md border border-border px-3 py-2",
+            "bg-muted/30",
+          )}
+        >
+          <span className="shrink-0 w-5 text-xs font-medium text-muted-foreground text-right">
+            {index + 1}.
+          </span>
+
+          <div className="flex-1 min-w-0">
+            <span className="text-sm font-medium text-foreground truncate block">
+              {resolveEnvName(ref)}
+            </span>
+            {resolveEnvDescription(ref) && (
+              <span className="text-[0.65rem] text-muted-foreground truncate block">
+                {resolveEnvDescription(ref)}
+              </span>
+            )}
+          </div>
+
+          {!disabled && (
+            <div className="flex items-center gap-0.5 shrink-0">
+              <ReorderButton
+                direction="up"
+                disabled={index === 0}
+                onClick={() => onMoveUp(index)}
+                label={`Move ${resolveEnvName(ref)} up`}
+              />
+              <ReorderButton
+                direction="down"
+                disabled={index === total - 1}
+                onClick={() => onMoveDown(index)}
+                label={`Move ${resolveEnvName(ref)} down`}
+              />
+              <button
+                type="button"
+                onClick={() => onRemove(index)}
+                aria-label={`Remove ${resolveEnvName(ref)}`}
+                className={cn(
+                  "rounded p-1 text-muted-foreground",
+                  "hover:text-destructive hover:bg-destructive/10",
+                  "focus:outline-none focus:ring-1 focus:ring-ring",
+                )}
+              >
+                <RemoveIcon />
+              </button>
+            </div>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function ReorderButton({
+  direction,
+  disabled,
+  onClick,
+  label,
+}: {
+  readonly direction: "up" | "down";
+  readonly disabled: boolean;
+  readonly onClick: () => void;
+  readonly label: string;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        "rounded p-1 text-muted-foreground",
+        "hover:text-foreground hover:bg-accent-hover",
+        "focus:outline-none focus:ring-1 focus:ring-ring",
+        "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+      )}
+    >
+      {direction === "up" ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    </button>
+  );
+}
+
+function ArrowUpIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M6 2.5v7M6 2.5L3 5.5M6 2.5l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ArrowDownIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M6 9.5v-7M6 9.5L3 6.5M6 9.5l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function RemoveIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}

package/src/environment/index.ts

@@ -48,3 +48,5 @@ export {
   resolveSystemEnvVarValues,
   resolveDeclaredSystemEnvVars,
 } from "./systemEnvVars";
+export { EnvironmentPicker } from "./EnvironmentPicker";
+export type { EnvironmentPickerProps } from "./EnvironmentPicker";

package/src/execution/MessageThread.tsx

@@ -25,6 +25,7 @@ import { ApprovalCard } from "./ApprovalCard";
 import { SummarizationCard } from "./SummarizationCard";
 import { PlanCompletionCard } from "./PlanCompletionCard";
 import type { SummarizationEventView } from "./useContextWindow";
+import { isInternalTool } from "./tool-categories";
 import { FilePathContext, type FilePathContextValue } from "./FilePathContext";
 import type { ResolvedPathAction } from "./file-path-resolver";
 import { SandboxContext, type SandboxContextValue } from "./SandboxContext";
@@ -137,6 +138,18 @@ export interface MessageThreadProps {
    * compatible — existing consumers see no change.
    */
   readonly onBuildFromPlan?: () => void;
+  /**
+   * Center thread content within a max-width reading column.
+   *
+   * When `true`, items are constrained to `max-w-3xl` (768 px) and
+   * horizontally centered. The scroll container stays full-width so
+   * the scrollbar remains at the viewport edge.
+   *
+   * Opt-in per DD-011 — existing consumers see no layout change.
+   *
+   * @default false
+   */
+  readonly centerContent?: boolean;
 }
 
 /**
@@ -267,16 +280,18 @@ export function buildThreadItems(
         msg.type === MessageType.MESSAGE_AI &&
         msg.toolCalls.length > 0
       ) {
-        const hasTaskTools = msg.toolCalls.some((tc) => tc.name === "task");
+        const needsSplit = msg.toolCalls.some(
+          (tc) => tc.name === "task" || isInternalTool(tc.name),
+        );
 
-        if (hasTaskTools) {
+        if (needsSplit) {
           const regularTools: ToolCall[] = [];
           const matchedSubAgents: SubAgentExecution[] = [];
           for (const tc of msg.toolCalls) {
             if (tc.name === "task") {
               const matched = subAgents.find((sa) => sa.id === tc.id);
               if (matched) matchedSubAgents.push(matched);
-            } else {
+            } else if (!isInternalTool(tc.name)) {
               regularTools.push(tc);
             }
           }
@@ -434,6 +449,7 @@ export function MessageThread({
   summarizationEvents,
   virtualized = false,
   onBuildFromPlan,
+  centerContent = false,
 }: MessageThreadProps) {
   useRenderTracer("MessageThread", { executions, activeStreamExecution });
 
@@ -470,6 +486,7 @@ export function MessageThread({
             filePathCtx={filePathCtx}
             sandboxCtx={sandboxCtx}
             onBuildFromPlan={onBuildFromPlan}
+            centerContent={centerContent}
           />
         </Suspense>
       </div>
@@ -480,6 +497,7 @@ export function MessageThread({
     <NonVirtualizedThread
       items={items}
       className={className}
+      centerContent={centerContent}
       formatToolCallSummary={formatToolCallSummary}
       onApprovalSubmit={onApprovalSubmit}
       submittingApprovalIds={submittingApprovalIds}
@@ -497,6 +515,7 @@ export function MessageThread({
 interface NonVirtualizedThreadProps {
   readonly items: readonly ThreadItem[];
   readonly className?: string;
+  readonly centerContent?: boolean;
   readonly formatToolCallSummary?: (toolCalls: readonly ToolCall[]) => string;
   readonly onApprovalSubmit?: (
     toolCallId: string,
@@ -512,6 +531,7 @@ interface NonVirtualizedThreadProps {
 function NonVirtualizedThread({
   items,
   className,
+  centerContent,
   formatToolCallSummary,
   onApprovalSubmit,
   submittingApprovalIds,
@@ -542,7 +562,7 @@ function NonVirtualizedThread({
         <SandboxContext.Provider value={sandboxCtx}>
         <FilePathContext.Provider value={filePathCtx}>
         <DevProfiler id="MessageThread">
-          <div ref={contentRef} className="flex flex-col gap-4">
+          <div ref={contentRef} className={cn("flex flex-col gap-4", centerContent && "mx-auto w-full max-w-3xl px-4")}>
             {items.map((item) => (
               <ThreadItemWrapper key={item.key} animate>
                 <ThreadItemRenderer

package/src/execution/SubAgentSection.tsx

@@ -13,6 +13,8 @@ import { cn } from "@stigmer/theme";
 import { formatDuration } from "./ToolCallDetail";
 import { MessageEntry } from "./MessageEntry";
 import { ToolCallGroup } from "./ToolCallGroup";
+import { isInternalTool } from "./tool-categories";
+import { useThreadSelection } from "./useThreadSelection";
 import {
   TodoList,
   TodoInProgressIcon,
@@ -81,9 +83,14 @@ export const SubAgentSection = memo(function SubAgentSection({
   const StatusIcon = statusInfo.icon;
   const isFailed = sub.status === SubAgentStatus.SUB_AGENT_FAILED;
   const threadItems = buildSubAgentThreadItems(sub.id, sub.messages);
+  const selection = useThreadSelection("sub-agent", sub.id);
 
   const displayLabel = sub.subject || sub.name;
 
+  const selectionClassName = selection?.isSelected
+    ? "ring-1 ring-primary/40"
+    : undefined;
+
   if (!collapsible) {
     return (
       <FlatContent
@@ -93,7 +100,7 @@ export const SubAgentSection = memo(function SubAgentSection({
         duration={duration}
         isFailed={isFailed}
         threadItems={threadItems}
-        className={className}
+        className={cn(selectionClassName, className)}
       />
     );
   }
@@ -106,7 +113,8 @@ export const SubAgentSection = memo(function SubAgentSection({
       duration={duration}
       isFailed={isFailed}
       threadItems={threadItems}
-      className={className}
+      selection={selection}
+      className={cn(selectionClassName, className)}
     />
   );
 });
@@ -122,6 +130,7 @@ interface CollapsibleCardProps {
   readonly duration: string | null;
   readonly isFailed: boolean;
   readonly threadItems: SubAgentThreadItem[];
+  readonly selection?: { readonly isSelected: boolean; readonly select: () => void } | null;
   readonly className?: string;
 }
 
@@ -132,6 +141,7 @@ function CollapsibleCard({
   duration,
   isFailed,
   threadItems,
+  selection,
   className,
 }: CollapsibleCardProps) {
   const [expanded, setExpanded] = useState(false);
@@ -197,6 +207,23 @@ function CollapsibleCard({
             {duration}
           </span>
         )}
+        {selection && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              selection.select();
+            }}
+            className={cn(
+              "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              selection.isSelected && "text-primary",
+            )}
+            aria-label="Inspect sub-agent"
+            aria-pressed={selection.isSelected}
+          >
+            <SubAgentInspectIcon />
+          </button>
+        )}
         <ChevronIcon expanded={expanded} />
       </button>
 
@@ -387,11 +414,14 @@ function buildSubAgentThreadItems(
     items.push({ kind: "message", message: msg, key: `${subAgentId}-m${i}` });
 
     if (msg.type === MessageType.MESSAGE_AI && msg.toolCalls.length > 0) {
-      items.push({
-        kind: "tool-group",
-        toolCalls: msg.toolCalls,
-        key: `${subAgentId}-m${i}-tc`,
-      });
+      const visibleTools = msg.toolCalls.filter((tc) => !isInternalTool(tc.name));
+      if (visibleTools.length > 0) {
+        items.push({
+          kind: "tool-group",
+          toolCalls: visibleTools.length === msg.toolCalls.length ? msg.toolCalls : visibleTools,
+          key: `${subAgentId}-m${i}-tc`,
+        });
+      }
     }
   }
 
@@ -550,6 +580,15 @@ function BotIcon() {
   );
 }
 
+function SubAgentInspectIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="5.5" cy="5.5" r="3.5" />
+      <path d="M8 8L10.5 10.5" />
+    </svg>
+  );
+}
+
 function ChevronIcon({ expanded }: { expanded: boolean }) {
   return (
     <svg

package/src/execution/ThreadSelectionContext.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { createContext } from "react";
+import type { SelectionStore } from "../internal/store/selection-store";
+
+/**
+ * Carries the {@link SelectionStore} instance (stable ref) into the
+ * thread subtree.
+ *
+ * **Defaults to `null`.** When absent, `useThreadSelection` returns
+ * `null` and selectable components (ToolCallGroup, SubAgentSection)
+ * behave exactly as they did before this feature — no DOM changes,
+ * no selection affordance (DD-011 opt-in).
+ *
+ * `SessionViewer` provides the store; bare `MessageThread` does not.
+ *
+ * @internal Not exported from the public SDK barrel — consumed only
+ * by SDK components and `SessionViewer`.
+ */
+export const ThreadSelectionContext = createContext<SelectionStore | null>(null);

package/src/execution/ToolCallItem.tsx

@@ -17,6 +17,7 @@ import {
   type ToolCategory,
 } from "./tool-categories";
 import { useSandboxNormalize } from "./SandboxContext";
+import { useThreadSelection } from "./useThreadSelection";
 
 /** Props for {@link ToolCallItem}. */
 export interface ToolCallItemProps {
@@ -80,6 +81,7 @@ export function ToolCallItem({
 
   const normalize = useSandboxNormalize();
   const approvalBadge = getApprovalBadge(toolCall);
+  const selection = useThreadSelection("tool-call", toolCall.id);
 
   // Completed/skipped Read items are non-expandable — the clickable
   // path in the row is the complete information. Failed reads remain
@@ -121,12 +123,34 @@ export function ToolCallItem({
           {duration}
         </span>
       )}
+
+      {selection && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            selection.select();
+          }}
+          className={cn(
+            "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+            selection.isSelected && "text-primary",
+          )}
+          aria-label="Inspect tool call"
+          aria-pressed={selection.isSelected}
+        >
+          <InspectIcon />
+        </button>
+      )}
     </>
   );
 
   if (isNonExpandableRead) {
     return (
-      <div className={cn("border-b border-border-muted last:border-b-0", className)}>
+      <div className={cn(
+        "border-b border-border-muted last:border-b-0",
+        selection?.isSelected && "ring-1 ring-primary/40 rounded-sm",
+        className,
+      )}>
         <div
           className="flex w-full items-center gap-2 px-2.5 py-1.5 text-xs"
         >
@@ -156,7 +180,11 @@ export function ToolCallItem({
       : primaryArg;
 
   return (
-    <div className={cn("border-b border-border-muted last:border-b-0", className)}>
+    <div className={cn(
+      "border-b border-border-muted last:border-b-0",
+      selection?.isSelected && "ring-1 ring-primary/40 rounded-sm",
+      className,
+    )}>
       <button
         type="button"
         aria-expanded={expanded}
@@ -274,6 +302,7 @@ export const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   list: FolderIcon,
   think: BrainIcon,
   "sub-agent": BotIcon,
+  internal: WrenchIcon,
   mcp: McpPlugIcon,
   unknown: WrenchIcon,
 };
@@ -431,6 +460,15 @@ function DotIcon() {
   );
 }
 
+function InspectIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="5.5" cy="5.5" r="3.5" />
+      <path d="M8 8L10.5 10.5" />
+    </svg>
+  );
+}
+
 function ChevronIcon({ expanded }: { expanded: boolean }) {
   return (
     <svg

package/src/execution/UsageWidget.tsx

@@ -64,8 +64,15 @@ export function UsageWidget({ executions, className }: UsageWidgetProps) {
       role="region"
       aria-label="Session cost summary"
     >
-      <div className="text-sm font-medium tabular-nums text-foreground">
-        {formatCost(usage.totalCostUsd)}
+      <div className="flex items-baseline gap-1.5">
+        <span className="text-sm font-medium tabular-nums text-foreground">
+          {formatCost(usage.totalCostUsd)}
+        </span>
+        {usage.isEstimated && (
+          <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+            Estimated
+          </span>
+        )}
       </div>
 
       {multiModel ? (