@stigmer/react 3.12.1 → 3.12.3

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(
@@ -192,7 +193,11 @@ export function ConversationListPane({
             {/* One context-only provider arms every row's attention
                 tooltip (the WorkspaceSidebar recents-list precedent). */}
             <TooltipProvider>
-              <ul className="stg:space-y-0.5">
+              {/* The SDK's own list reset (the MemberKeysPanel
+                  convention): hosts without a global preflight would
+                  otherwise render inbox rows with UA bullets and
+                  indent. */}
+              <ul className="stg:m-0 stg:list-none stg:space-y-0.5 stg:p-0">
                 {conversations.map((conversation) => (
                   <ConversationRow
                     key={`${conversation.agentChannelId}:${conversation.conversationKey}`}
@@ -332,6 +337,20 @@ function ConversationFilterToggle({
   );
 }
 
+/**
+ * The awaiting dot's meaning, shared verbatim by its tooltip and its
+ * sr-only text — one string per strength so sighted-hover and
+ * screen-reader users hear the identical fact. The copy carries the
+ * DISTINCTION, not just the fact (cloud#266): who holds the
+ * conversation is exactly what the two strengths encode, and it names
+ * the stake without promising an outcome — a muted dot survives a dead
+ * agent turn on purpose (DD-011 D-b's recovery path).
+ */
+const AWAITING_COPY: Record<"strong" | "muted", string> = {
+  strong: "Customer awaiting reply — a human has this conversation; the agent will not answer",
+  muted: "Customer awaiting reply — the agent has this conversation",
+};
+
 const ConversationRow = memo(function ConversationRow({
   conversation,
   label,
@@ -424,22 +443,29 @@ const ConversationRow = memo(function ConversationRow({
               // carries a dot under its timestamp. Strength maps the
               // holder (DD-011 D-a): strong when a human holds it — the
               // agent will not answer, a person must — muted when the
-              // agent does. No tooltip and no tab stop (the F-18
-              // discipline); the sr-only text is the accessible meaning.
-              <span className="stg:flex">
-                <span
-                  aria-hidden="true"
-                  className={cn(
-                    "stg:size-2 stg:rounded-full",
-                    awaiting === "strong" ? "stg:bg-primary" : "stg:bg-muted-foreground",
-                  )}
-                />
-                <span className="stg:sr-only">
-                  {awaiting === "strong"
-                    ? "Customer awaiting reply — the conversation is human-held"
-                    : "Customer awaiting reply"}
-                </span>
-              </span>
+              // agent does. Strong is FILLED and muted is a hollow RING
+              // (cloud#266): fill-vs-outline reads as "act vs watching"
+              // without decoding color, and color alone inverted in dark
+              // mode, where the muted gray outshone the strong primary.
+              // The meaning rides the house tooltip (the attention
+              // icon's exact pattern above — span trigger inside the row
+              // button, out of the tab order, sr-only as the accessible
+              // name); a bare dot told a first-time viewer nothing.
+              <Tooltip>
+                <TooltipTrigger render={<span className="stg:flex" />}>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "stg:size-2 stg:rounded-full",
+                      awaiting === "strong"
+                        ? "stg:bg-primary"
+                        : "stg:border-2 stg:border-muted-foreground",
+                    )}
+                  />
+                  <span className="stg:sr-only">{AWAITING_COPY[awaiting]}</span>
+                </TooltipTrigger>
+                <TooltipContent side="top">{AWAITING_COPY[awaiting]}</TooltipContent>
+              </Tooltip>
             )}
           </span>
         )}

package/src/conversation/ConversationsWorkbench.tsx

@@ -340,6 +340,7 @@ export function ConversationsWorkbench({
             <ConversationAttentionBanner
               conversation={detail.conversation}
               participation={participation}
+              supportsStaffReplies={descriptor?.supportsStaffReplies ?? true}
             />
           )}
           {detail.conversation && (

package/src/conversation/__tests__/ConversationAttentionBanner.test.tsx

@@ -2,7 +2,10 @@ import { describe, it, expect, vi, afterEach } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { create } from "@bufbuild/protobuf";
-import { ChannelConversationSchema } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
+import {
+  ChannelConversationSchema,
+  ConversationControl,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
 import { ConversationAttentionBanner } from "../ConversationAttentionBanner";
 import type {
   ConversationCommand,
@@ -23,7 +26,7 @@ function participation(
 ): UseConversationParticipationReturn {
   return {
     reply: vi.fn(),
-    takeOver: vi.fn(),
+    takeOver: vi.fn().mockResolvedValue(conversation()),
     handBack: vi.fn(),
     clearAttention: vi.fn().mockResolvedValue(conversation()),
     pendingCommands: new Set<ConversationCommand>(),
@@ -79,4 +82,75 @@ describe("ConversationAttentionBanner", () => {
     );
     expect(screen.getByText("agent channel ach_1 not found")).toBeDefined();
   });
+
+  it("offers Take over beside Dismiss while the agent holds it — the escalation's answer lives where the escalation speaks (cloud#266, F-20)", async () => {
+    const user = userEvent.setup();
+    const p = participation();
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={p}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Take over" }));
+    expect(p.takeOver).toHaveBeenCalled();
+    // Dismiss stays — the false-alarm path never disappears.
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("offers only Dismiss when a human already holds it — the human arriving IS the attention answered", () => {
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({
+          needsAttention: true,
+          control: ConversationControl.control_human,
+          controlledBy: "idt_staff",
+        })}
+        participation={participation()}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: "Take over" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("offers only Dismiss on senderless providers — the control banner already explains the missing lane", () => {
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation()}
+        supportsStaffReplies={false}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: "Take over" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("shows the takeover in flight and renders its failure verbatim", () => {
+    const { rerender } = render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation({
+          pendingCommands: new Set<ConversationCommand>(["takeOver"]),
+        })}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Taking over…" })).toBeDefined();
+
+    rerender(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation({
+          commandErrors: new Map([
+            ["takeOver", new Error("this channel is disabled: set spec.enabled to resume messaging on it")],
+          ]),
+        })}
+      />,
+    );
+    expect(
+      screen.getByText("this channel is disabled: set spec.enabled to resume messaging on it"),
+    ).toBeDefined();
+  });
 });

package/src/conversation/__tests__/ConversationListPane.test.tsx

@@ -145,7 +145,7 @@ describe("ConversationListPane", () => {
     ).toBeDefined();
   });
 
-  it("uses the house tooltip for the attention badge and no native titles anywhere (F-18)", () => {
+  it("uses the house tooltip for the attention badge and awaiting dot, no native titles anywhere (F-18)", () => {
     const { container } = render(
       <ConversationListPane
         {...baseProps()}
@@ -154,6 +154,9 @@ describe("ConversationListPane", () => {
             displayName: "Pat with a very long name that will truncate",
             needsAttention: true,
             attentionReason: "refund I cannot process",
+            // The awaiting dot renders too, so its tooltip trigger is
+            // under the same no-title / no-tab-stop assertions below.
+            awaitingReply: true,
           }),
         ]}
       />,
@@ -204,8 +207,12 @@ describe("ConversationListPane", () => {
       />,
     );
 
+    // The copy names the stake, not just the fact (cloud#266): a
+    // human-held wait is one only a person can end.
     expect(
-      screen.getByText("Customer awaiting reply — the conversation is human-held"),
+      screen.getByText(
+        "Customer awaiting reply — a human has this conversation; the agent will not answer",
+      ),
     ).toBeDefined();
   });
 
@@ -217,9 +224,13 @@ describe("ConversationListPane", () => {
       />,
     );
 
-    expect(screen.getByText("Customer awaiting reply")).toBeDefined();
     expect(
-      screen.queryByText("Customer awaiting reply — the conversation is human-held"),
+      screen.getByText("Customer awaiting reply — the agent has this conversation"),
+    ).toBeDefined();
+    expect(
+      screen.queryByText(
+        "Customer awaiting reply — a human has this conversation; the agent will not answer",
+      ),
     ).toBeNull();
   });
 

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/ApprovalCard.tsx

@@ -12,6 +12,7 @@ import {
 import {
   resolveToolCategoryFromKind,
   extractPrimaryArgFromPreview,
+  extractShellIntentFromPreview,
   extractWriteContentFromPreview,
   isFileCategory,
   type ToolCategory,
@@ -160,6 +161,26 @@ export function ApprovalCardHeader({
     ],
   );
 
+  // A shell gate whose call carries a model-authored intent phrase titles
+  // the header with it (stigmer#276) — supplementary context only: the
+  // command stays foregrounded in the body's terminal preview, which remains
+  // the content the user is approving.
+  const intent = useMemo(
+    () =>
+      extractShellIntentFromPreview(
+        pendingApproval.toolName,
+        pendingApproval.argsPreview,
+        pendingApproval.mcpServerSlug,
+        pendingApproval.toolKind,
+      ),
+    [
+      pendingApproval.toolName,
+      pendingApproval.argsPreview,
+      pendingApproval.mcpServerSlug,
+      pendingApproval.toolKind,
+    ],
+  );
+
   return (
     <div
       className={cn(
@@ -173,7 +194,7 @@ export function ApprovalCardHeader({
 
       <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-center stg:gap-1.5 stg:overflow-hidden">
         <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
-          {categoryInfo.label}
+          {intent ?? categoryInfo.label}
         </span>
         {primaryArg &&
           categoryInfo.category !== "shell" &&
@@ -186,7 +207,7 @@ export function ApprovalCardHeader({
             />
           ) : (
             // Shell is the exception: its command is shown in the body's
-            // terminal session, so the header stays minimal (icon + label).
+            // terminal session, so the header stays minimal (icon + title).
             <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-muted-foreground">
               {primaryArg}
             </span>

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