@stigmer/react 3.12.1 → 3.12.3

package/src/execution/ArtifactPreviewModal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useArtifactDownload } from "./useArtifactDownload.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 import { ArtifactContentBody } from "./ArtifactContentBody.js";
@@ -253,37 +254,24 @@ export function ArtifactPreviewModal({
   onImplement,
   className,
 }: ArtifactPreviewModalProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
+      width="3xl"
       aria-label={`Preview ${artifact.name}`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-lg stg:outline-none",
-        "stg:[&::backdrop]:bg-black/50",
-        className,
-      )}
+      // Background surface is deliberate for content previews. The
+      // previously hardcoded ::backdrop color (bg-black/50 — it escaped the
+      // #652 fence via the arbitrary-variant spelling) now rides the
+      // shell's token backdrop.
+      className={cn("stg:bg-background stg:text-foreground stg:outline-none", className)}
     >
       {open && (
         <ArtifactPreviewContent
@@ -296,7 +284,7 @@ export function ArtifactPreviewModal({
           onImplement={onImplement}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

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>
+  );
+});

package/src/execution/MessageEntry.tsx

@@ -20,6 +20,7 @@ import {
 import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link MessageEntry}. */
 export interface MessageEntryProps {
@@ -192,29 +193,29 @@ function HumanMessage({
         />
       )}
       <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
-      {onEdit && (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={onEdit}
-                aria-label="Edit message"
-                className={cn(
-                  "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
-                  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
-                  "stg:hover:text-foreground stg:hover:bg-accent-hover",
-                  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-                )}
-              />
-            }
-          >
-            <EditIcon />
-          </TooltipTrigger>
-          <TooltipContent side="top">Edit</TooltipContent>
-        </Tooltip>
-      )}
+      {/* The hover-revealed action cluster on the bubble's shoulder: copy is
+          always offered (the message text is the content), edit only when the
+          host wired the callback. */}
+      <div className="stg:absolute stg:-top-2.5 stg:-right-2.5 stg:flex stg:gap-1">
+        <CopyMessageButton text={content} variant="bubble" />
+        {onEdit && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={onEdit}
+                  aria-label="Edit message"
+                  className={BUBBLE_ACTION_CLASSES}
+                />
+              }
+            >
+              <EditIcon />
+            </TooltipTrigger>
+            <TooltipContent side="top">Edit</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
     </div>
   );
 }
@@ -269,7 +270,7 @@ function AiMessage({
       role="article"
       aria-label="AI response"
       aria-busy={isStreaming}
-      className={cn("stg:px-4 stg:py-3", className)}
+      className={cn("stg:group stg:px-4 stg:py-3", className)}
     >
       <div className="stgm-prose">
         <Streamdown
@@ -280,10 +281,118 @@ function AiMessage({
           {markdown}
         </Streamdown>
       </div>
+      {/* The quiet per-message actions row (issue #278). Height is reserved
+          whenever it renders, so the hover reveal never shifts the prose; it
+          appears only once the message settles — a streaming message's text
+          is still changing, so a copy would race the content. Copies the
+          display markdown (fence-unwrapped), i.e. what the reader sees. */}
+      {!isStreaming && markdown.trim().length > 0 && (
+        <div className="stg:mt-1 stg:flex stg:h-6 stg:items-center">
+          <CopyMessageButton text={markdown} variant="quiet" />
+        </div>
+      )}
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Per-message copy affordance (issue #278)
+// ---------------------------------------------------------------------------
+
+// The floating circular action on a human bubble's shoulder — shared by the
+// copy and edit buttons so the cluster reads as one control family.
+const BUBBLE_ACTION_CLASSES = cn(
+  "stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+  "stg:hover:text-foreground stg:hover:bg-accent-hover",
+  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+);
+
+// The quiet in-flow variant for AI prose: no border or fill, one contrast
+// step below the reading text (`muted-foreground-subtle`, rising to
+// `muted-foreground` on hover) — findable when wanted, invisible while
+// reading. The same hover/focus reveal keeps both variants keyboard-reachable.
+const QUIET_ACTION_CLASSES = cn(
+  "stg:inline-flex stg:h-6 stg:w-6 stg:items-center stg:justify-center stg:rounded-md",
+  "stg:text-muted-foreground-subtle stg:transition",
+  "stg:hover:text-muted-foreground stg:hover:bg-accent-hover",
+  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+);
+
+/**
+ * The per-message copy control: writes the message's text to the clipboard
+ * and flips to a check for the feedback window. `variant` selects the visual
+ * home — `"bubble"` joins the human bubble's floating action cluster,
+ * `"quiet"` sits in the AI message's reserved actions row.
+ */
+function CopyMessageButton({
+  text,
+  variant,
+}: {
+  text: string;
+  variant: "bubble" | "quiet";
+}) {
+  const { copy, copied } = useCopyFeedback();
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={() => void copy(text)}
+            aria-label={copied ? "Copied" : "Copy message"}
+            className={
+              variant === "bubble" ? BUBBLE_ACTION_CLASSES : QUIET_ACTION_CLASSES
+            }
+          />
+        }
+      >
+        {copied ? <CheckIcon /> : <CopyMessageIcon />}
+      </TooltipTrigger>
+      <TooltipContent side="top">{copied ? "Copied" : "Copy"}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function CopyMessageIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
 const THINKING_PREVIEW_LENGTH = 80;
 
 function ThinkingMessage({
@@ -320,7 +429,9 @@ function ThinkingMessage({
         )}
       >
         <ThinkingIcon isStreaming={isStreaming} />
-        <span className="stg:min-w-0 stg:truncate">
+        {/* Live reasoning carries the ambient-liveness sweep (stigmer#277) —
+            the words themselves signal activity, not just the icon. */}
+        <span className={cn("stg:min-w-0 stg:truncate", isStreaming && "stgm-shimmer-label")}>
           {isStreaming && !hasContent
             ? "Thinking..."
             : expanded