@stigmer/react 3.12.1 → 3.12.2

package/src/composer/icons.tsx

@@ -54,24 +54,6 @@ export function ArrowUpIcon() {
   );
 }
 
-export function SpinnerIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}
-
 /**
  * Filled rounded square — the universal "stop" glyph. Sized to ~62% of the
  * viewBox so it reads as a confident, deliberate mark (not a stray dot) when

package/src/conversation/ConversationComposer.tsx

@@ -7,7 +7,7 @@ import { getUserMessage } from "@stigmer/sdk";
 import { ChannelSendOutcome } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
 import type { SendChannelMessageOutput } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
 import { Button } from "../button/Button.js";
-import { SpinnerIcon } from "../composer/icons.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useComposer } from "../composer/useComposer.js";
 
 /** Props for {@link ConversationComposer}. */

package/src/conversation/ConversationListPane.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useRef } from "react";
+import { memo, useCallback, useId, useRef } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { MessageSquare, TriangleAlert, User } from "lucide-react";
 import { cn } from "@stigmer/theme";
@@ -110,6 +110,7 @@ export function ConversationListPane({
   now,
   className,
 }: ConversationListPaneProps) {
+  const channelFilterId = useId();
   const providerById = new Map(
     channels.map((channel) => [
       channel.metadata?.id ?? "",
@@ -129,11 +130,11 @@ export function ConversationListPane({
           )}
           {channels.length > 1 && (
             <>
-              <label className="stg:sr-only" htmlFor="stgm-conversation-channel-filter">
+              <label className="stg:sr-only" htmlFor={channelFilterId}>
                 Filter by channel
               </label>
               <select
-                id="stgm-conversation-channel-filter"
+                id={channelFilterId}
                 value={channelFilter}
                 onChange={(e) => onChannelFilterChange(e.target.value)}
                 className={cn(

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { cn } from "@stigmer/theme";
 import {
   CursorMemberKeyState,
@@ -420,21 +420,10 @@ function KeyStatusBadge({
  * would join the operator's own Cursor account to the team.
  */
 function CopyInviteButton({ inviteLink }: { readonly inviteLink: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(inviteLink);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard unavailable (permissions, non-secure context) — the
-      // section description still points at the Cursor dashboard.
-    }
-  }, [inviteLink]);
+  const { copy, copied } = useCopyFeedback();
 
   return (
-    <Button size="sm" variant="outline" onClick={() => void handleCopy()}>
+    <Button size="sm" variant="outline" onClick={() => void copy(inviteLink)}>
       {copied ? "Copied" : "Copy invite"}
     </Button>
   );

package/src/cursor-accounts/__tests__/CursorAccountsConsole.test.tsx

@@ -137,16 +137,8 @@ function scenarView() {
         }),
       }),
     ],
-    // The server populates both the deprecated flat list and the
-    // spend-joined views; the console reads only the views.
-    membersWithoutKeys: [
-      create(CursorTeamMemberSchema, {
-        userId: "u2",
-        email: "uncovered@scenar.ai",
-        name: "Uncovered U",
-        role: "member",
-      }),
-    ],
+    // The console reads the spend-joined views (field 4's flat list is
+    // gone from the proto — stigmer#313).
     membersWithoutKeysViews: [
       create(CursorTeamMemberViewSchema, {
         member: create(CursorTeamMemberSchema, {

package/src/dashboard/DashboardFailedRuns.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import type { DashboardFailedRun } from "./types.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface DashboardFailedRunsProps {
   readonly failedRuns: readonly DashboardFailedRun[];
@@ -12,17 +13,6 @@ export interface DashboardFailedRunsProps {
   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.
@@ -89,7 +79,7 @@ export const DashboardFailedRuns = memo(function DashboardFailedRuns({
                 )}
               </div>
               <span className="stg:shrink-0 stg:text-muted-foreground">
-                {timeAgo(run.failedAt)}
+                {formatRelativeTime(run.failedAt)}
               </span>
               {onViewClick && (
                 <button

package/src/environment/CreateEnvironmentForm.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import { useCreateEnvironment } from "./useCreateEnvironment.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,6 +48,7 @@ export function CreateEnvironmentForm({
   onCancel,
   className,
 }: CreateEnvironmentFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateEnvironment();
 
   const [name, setName] = useState("");
@@ -80,13 +82,13 @@ export function CreateEnvironmentForm({
       <div className="stg:space-y-2">
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-env-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-new-env-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -105,14 +107,14 @@ export function CreateEnvironmentForm({
 
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-env-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-muted-foreground"
           >
             Description{" "}
             <span className="stg:text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
-            id="stgm-new-env-desc"
+            id={`${baseId}-desc`}
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -144,7 +146,7 @@ export function CreateEnvironmentForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create environment
         </button>
 
@@ -167,24 +169,3 @@ export function CreateEnvironmentForm({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/environment/EnvVarForm.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import type { EnvVarInput } from "@stigmer/sdk";
 import { useScrollShadows } from "../internal/useScrollShadows.js";
 import { ScrollFade } from "../internal/ScrollFade.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /**
  * Describes a single environment variable the form should collect.
@@ -414,7 +415,7 @@ export function EnvVarForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isSubmitting && <SpinnerIcon />}
+          {isSubmitting && <SpinnerIcon size={12} />}
           {resolvedSubmitLabel}
         </button>
       </div>
@@ -466,20 +467,3 @@ function EyeOffIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/environment/EnvironmentVariableEditor.tsx

@@ -17,6 +17,7 @@ import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables.js";
 import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables.js";
 import { useRevealSecretValue } from "./useRevealSecretValue.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -367,7 +368,7 @@ function VariableRow({
             label="Save"
             variant="primary"
           >
-            {isSaving ? <SpinnerIcon /> : <CheckIcon />}
+            {isSaving ? <SpinnerIcon size={12} /> : <CheckIcon />}
           </ActionButton>
 
           <ActionButton
@@ -436,7 +437,7 @@ function VariableRow({
               label="Confirm delete"
               variant="danger"
             >
-              {isDeleting ? <SpinnerIcon /> : <CheckIcon />}
+              {isDeleting ? <SpinnerIcon size={12} /> : <CheckIcon />}
             </ActionButton>
             <ActionButton
               onClick={() => setMode("idle")}
@@ -469,7 +470,7 @@ function VariableRow({
                     variant="muted"
                   >
                     {isRevealing ? (
-                      <SpinnerIcon />
+                      <SpinnerIcon size={12} />
                     ) : revealedValue !== null ? (
                       <EyeOffIcon />
                     ) : (
@@ -609,7 +610,7 @@ function AddVariableForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isAdding && <SpinnerIcon />}
+          {isAdding && <SpinnerIcon size={12} />}
           Add
         </button>
         <button
@@ -815,20 +816,3 @@ function PlusIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/execution/ArtifactApplyButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** Props for {@link ArtifactApplyButton}. */
 export interface ArtifactApplyButtonProps {
@@ -51,7 +52,7 @@ export function ArtifactApplyButton({
     >
       {isApplying ? (
         <span className="stg:inline-flex stg:items-center stg:gap-1.5">
-          <SpinnerIcon />
+          <SpinnerIcon size={12} className="stg:shrink-0" />
           Applying{"\u2026"}
         </span>
       ) : (
@@ -61,19 +62,3 @@ export function ArtifactApplyButton({
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:shrink-0 stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}

package/src/execution/ExecutionErrorNotice.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Recognizes a recoverable *interruption* (worker reaped / heartbeat timeout /
+ * stall) as opposed to a genuine application failure. The runner stamps these
+ * with a stable signature ("[StallTimeoutError]", "Execution interrupted",
+ * "Retry or resume."), and the workflow auto-resumes them while recovery cycles
+ * remain; by the time one reaches the UI as terminal it is resumable from the
+ * session's persisted harness_state_id rather than a dead end.
+ */
+function isInterruptedError(error: string): boolean {
+  return /\[StallTimeoutError\]|execution interrupted|retry or resume/i.test(error);
+}
+
+/** Props for {@link ExecutionErrorNotice} and its MessageThread slot. */
+export interface ExecutionErrorNoticeProps {
+  /** The server-reported failure reason (`AgentExecutionStatus.error`), raw. */
+  readonly error: string;
+  /**
+   * The originating user message, resent verbatim on retry. Absent when the
+   * failed execution has no resendable prompt — the retry affordance is
+   * hidden in that case.
+   */
+  readonly retryMessage?: string;
+  /**
+   * Resends {@link retryMessage}; the server continues from the session's
+   * persisted harness_state_id. Retry renders only when both this handler
+   * and {@link retryMessage} are present.
+   */
+  readonly onRetry?: (message: string) => void;
+}
+
+/**
+ * Renders the server-reported failure reason (`AgentExecutionStatus.error`)
+ * for an execution that died — typically before producing any messages. The
+ * reason can be a long Temporal error, so it is clamped by default with a
+ * Show more / Show less toggle.
+ *
+ * A genuine failure renders as a destructive alert with a Retry. A *recoverable
+ * interruption* renders as a neutral notice with a Resume — both resend the
+ * originating message, which the server continues from the session's persisted
+ * harness_state_id (the same data path; the framing differs so an interruption
+ * never looks like a dead-end crash).
+ *
+ * Slot-overridable via `MessageThreadSlots.ExecutionErrorNotice`. An override
+ * receives the raw reason and the retry wiring and owns its own presentation —
+ * including whether to reproduce the interruption-vs-failure framing, which is
+ * an internal heuristic of this built-in, not part of the slot contract.
+ */
+export function ExecutionErrorNotice({
+  error,
+  retryMessage,
+  onRetry,
+}: ExecutionErrorNoticeProps) {
+  const [expanded, setExpanded] = useState(false);
+  const canRetry = !!onRetry && !!retryMessage;
+  const interrupted = isInterruptedError(error);
+
+  return (
+    <div
+      role={interrupted ? "status" : "alert"}
+      className={cn(
+        "stg:mx-4 stg:flex stg:flex-col stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-2",
+        interrupted ? "stg:bg-muted" : "stg:bg-destructive-subtle",
+      )}
+    >
+      <p
+        className={cn(
+          "stg:text-xs stg:whitespace-pre-wrap stg:break-words",
+          interrupted ? "stg:text-foreground" : "stg:text-destructive",
+          !expanded && "stg:line-clamp-3",
+        )}
+      >
+        {error}
+      </p>
+      <div className="stg:flex stg:items-center stg:gap-3 stg:text-xs">
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="stg:font-medium stg:text-muted-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+        {canRetry && (
+          <button
+            type="button"
+            onClick={() => onRetry!(retryMessage!)}
+            className="stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
+          >
+            {interrupted ? "Resume" : "Retry"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/execution/FilePathLink.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo } from "react";
 import { cn } from "@stigmer/theme";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { FilePathContext } from "./FilePathContext.js";
 import { resolvePathAction, splitDisplayPath } from "./file-path-resolver.js";
 
@@ -28,8 +29,6 @@ export interface FilePathLinkProps {
   readonly className?: string;
 }
 
-const COPIED_FEEDBACK_MS = 2000;
-
 /**
  * Interactive file path display that replaces inert `<span>` path
  * text in tool call rendering.
@@ -62,7 +61,7 @@ export function FilePathLink({
   className,
 }: FilePathLinkProps) {
   const { workspaceEntries, onFilePathClick } = useContext(FilePathContext);
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
 
   const resolved = useMemo(
     () => resolvePathAction(path, workspaceEntries),
@@ -80,11 +79,8 @@ export function FilePathLink({
 
   const handleCopy = useCallback(() => {
     const value = resolved.action === "copy" ? resolved.value : path;
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    });
-  }, [resolved, path]);
+    void copy(value);
+  }, [resolved, path, copy]);
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {

package/src/execution/FileReviewCard.tsx

@@ -28,6 +28,7 @@ import {
   fileReviewability,
   type FileReviewability,
 } from "./file-review-status.js";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** A stable empty set so the default `submittingDecisionKeys` keeps a constant ref. */
 const NO_KEYS: ReadonlySet<string> = new Set();
@@ -1063,23 +1064,3 @@ function bulkLabels(
   return { approve: `${approveVerb} all`, reject: "Reject all" };
 }
 
-// ---------------------------------------------------------------------------
-// Inline SVG icon
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}

package/src/execution/FollowUpInput.tsx

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { cn } from "@stigmer/theme";
 import { ModelSelector } from "../models/ModelSelector.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link FollowUpInput}. */
 export interface FollowUpInputProps {
@@ -204,19 +205,3 @@ function ArrowUpIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/execution/LivenessStatusLine.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link LivenessStatusLine}. */
+export interface LivenessStatusLineProps {
+  /**
+   * The status copy. Defaults to `"Working…"` — deliberately generic: the
+   * thread has no model-authored account of what the agent is doing between
+   * visible events (that seam is stigmer#276), so the line claims only what
+   * is provably true.
+   */
+  readonly label?: string;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The thread's ambient-liveness anchor (stigmer#277): a quiet one-line status
+ * at the bottom of the thread while an execution is live but nothing else on
+ * screen is visibly moving — the exact stretches (model generation between
+ * tool calls) where users conclude the agent died and reach for a restart.
+ *
+ * The label carries the shared `stgm-shimmer-label` sweep, the same treatment
+ * as a running tool row's title and the thinking indicator, so "alive" reads
+ * identically everywhere. {@link MessageThread} emits it only while the
+ * active execution is `IN_PROGRESS` with no running tool call, no live
+ * sub-agent, and no pending approval — when a gate is waiting on the *user*,
+ * shimmering "Working…" would be a lie, and when a tool is running, its own
+ * row carries the sweep. It disappears the moment the execution settles
+ * (phase-driven, DD-009 — never inferred from the stream going quiet).
+ *
+ * Replaceable via {@link MessageThreadSlots.LivenessStatusLine} (the
+ * SetupProgress precedent) for hosts that want their own liveness voice.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * <LivenessStatusLine />
+ * <LivenessStatusLine label="Reviewing your data…" />
+ * ```
+ */
+export const LivenessStatusLine = memo(function LivenessStatusLine({
+  label = "Working\u2026",
+  className,
+}: LivenessStatusLineProps) {
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      data-cursor-target="liveness-status-line"
+      className={cn("stg:flex stg:items-center stg:px-4 stg:py-1.5", className)}
+    >
+      <span className="stg:text-xs stgm-shimmer-label">{label}</span>
+    </div>
+  );
+});