@stigmer/react 3.11.0 → 3.11.1-dev.20260812192248

package/src/conversation/ConversationTimelineView.tsx

@@ -19,6 +19,7 @@ import {
 import { useAutoScroll } from "../internal/useAutoScroll.js";
 import { ConversationMediaAttachment } from "./ConversationMediaAttachment.js";
 import {
+  attemptExplanationOf,
   authorKindOf,
   inboundPlaceholderOf,
   isInternalItem,
@@ -228,8 +229,10 @@ const TimelineItemRow = memo(function TimelineItemRow({
   // relay, never pattern-matched; the numeric twin (receipt_error_code)
   // stays off the surface as machine vocabulary. Gated exactly like
   // ReceiptTicks' failed arm — attempt delivered AND receipt failed —
-  // so the attempt-axis explanation (last_error, F-25's slice) can
-  // structurally never leak in here.
+  // so the attempt-axis explanation (attemptExplanationOf, cloud#262's
+  // slice) can structurally never leak in here: its gate requires
+  // attempt FAILED, this one attempt delivered, so at most one of the
+  // two explanations ever renders.
   const receiptExplanation =
     sendAttemptOf(item) === "delivered" &&
     receiptOf(item) === "failed" &&
@@ -237,6 +240,15 @@ const TimelineItemRow = memo(function TimelineItemRow({
       ? item.receiptDetail
       : null;
 
+  // The attempt axis's explanation (cloud#262, closing F-25), the same
+  // R-1 visible-text treatment as the receipt explanation and for the
+  // same reason: why a send failed is decision-bearing (a closed
+  // 24h-window refusal says "the customer must write first"; a deleted
+  // channel says there is nothing to retry). The words and the gate
+  // live in attemptExplanationOf — presentation vocabulary, never
+  // computed in the view.
+  const attemptExplanation = attemptExplanationOf(item);
+
   return (
     <li className={cn("stg:flex", isCustomer ? "stg:justify-start" : "stg:justify-end")}>
       <div
@@ -274,6 +286,11 @@ const TimelineItemRow = memo(function TimelineItemRow({
             {receiptExplanation}
           </p>
         )}
+        {attemptExplanation !== null && (
+          <p className="stg:mt-1 stg:break-words stg:text-xs stg:text-destructive">
+            {attemptExplanation}
+          </p>
+        )}
         <ItemFooter item={item} />
       </div>
     </li>

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

@@ -10,7 +10,10 @@ import {
   ConversationLane,
   ConversationTimelineItemSchema,
 } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
-import { ChannelDeliveryStatus } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/delivery_pb";
+import {
+  ChannelAttemptFailureKind,
+  ChannelDeliveryStatus,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/delivery_pb";
 import { ChannelReceiptState } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/outbound_pb";
 import { StigmerContext } from "../../context";
 import { ConversationTimelineView } from "../ConversationTimelineView";
@@ -174,8 +177,9 @@ describe("ConversationTimelineView", () => {
             text: "lost reply",
             deliveryStatus: ChannelDeliveryStatus.failed,
             // A malformed item carrying a detail on the wrong axis: the
-            // attempt-axis explanation (last_error) is F-25's separate
-            // slice, so this lane renders nothing extra.
+            // attempt-axis explanation has its own field and gate
+            // (attemptExplanationOf, cloud#262), so a stray receipt
+            // detail still renders nothing here.
             receiptDetail: "should never render",
           }),
         ]}
@@ -185,6 +189,105 @@ describe("ConversationTimelineView", () => {
     expect(screen.queryByText("should never render")).toBeNull();
   });
 
+  it("shows a refused send's platform-authored explanation verbatim (cloud#262)", () => {
+    render(
+      <ConversationTimelineView
+        {...baseProps()}
+        items={[
+          item("ob:1", {
+            author: ConversationItemAuthor.author_teammate,
+            text: "Following up on your case.",
+            deliveryStatus: ChannelDeliveryStatus.failed,
+            attemptFailureKind: ChannelAttemptFailureKind.attempt_refused,
+            attemptDetail: "the recipient's 24-hour customer-service window is closed",
+          }),
+        ]}
+      />,
+    );
+    expect(screen.getByText("Not delivered")).toBeDefined();
+    expect(
+      screen.getByText("the recipient's 24-hour customer-service window is closed"),
+    ).toBeDefined();
+  });
+
+  it("shows a withdrawn send's structural fact verbatim (cloud#262)", () => {
+    render(
+      <ConversationTimelineView
+        {...baseProps()}
+        items={[
+          item("dl:1", {
+            author: ConversationItemAuthor.author_agent,
+            text: "the reply that never landed",
+            deliveryStatus: ChannelDeliveryStatus.failed,
+            attemptFailureKind: ChannelAttemptFailureKind.attempt_withdrawn,
+            attemptDetail: "channel deleted",
+          }),
+        ]}
+      />,
+    );
+    expect(screen.getByText("channel deleted")).toBeDefined();
+  });
+
+  it("shows this surface's own generic copy for an errored send — the wire carries no detail (cloud#262)", () => {
+    render(
+      <ConversationTimelineView
+        {...baseProps()}
+        items={[
+          item("dl:1", {
+            author: ConversationItemAuthor.author_agent,
+            text: "lost reply",
+            deliveryStatus: ChannelDeliveryStatus.failed,
+            attemptFailureKind: ChannelAttemptFailureKind.attempt_errored,
+            // attemptDetail deliberately empty: the server's AttemptFailure
+            // construction keeps diagnostics off the wire entirely.
+          }),
+        ]}
+      />,
+    );
+    expect(screen.getByText("Not delivered")).toBeDefined();
+    expect(
+      screen.getByText("Delivery failed due to a technical problem on the platform's side."),
+    ).toBeDefined();
+  });
+
+  it("keeps the bare tick for a failure the platform never classified (pre-cloud#262 rows)", () => {
+    render(
+      <ConversationTimelineView
+        {...baseProps()}
+        items={[
+          item("ob:1", {
+            author: ConversationItemAuthor.author_teammate,
+            text: "an old failed send",
+            deliveryStatus: ChannelDeliveryStatus.failed,
+          }),
+        ]}
+      />,
+    );
+    expect(screen.getByText("Not delivered")).toBeDefined();
+    expect(screen.queryByText(/technical problem/)).toBeNull();
+  });
+
+  it("never shows the attempt explanation on a delivered item — the F-25 boundary's mirror", () => {
+    render(
+      <ConversationTimelineView
+        {...baseProps()}
+        items={[
+          item("ob:1", {
+            author: ConversationItemAuthor.author_teammate,
+            text: "a landed send",
+            deliveryStatus: ChannelDeliveryStatus.delivered,
+            // A malformed item carrying attempt copy on a success: the
+            // gate requires attempt FAILED, so nothing renders.
+            attemptFailureKind: ChannelAttemptFailureKind.attempt_refused,
+            attemptDetail: "should never render",
+          }),
+        ]}
+      />,
+    );
+    expect(screen.queryByText("should never render")).toBeNull();
+    expect(screen.queryByText("Not delivered")).toBeNull();
+  });
+
   it("renders a dead-lettered send as exactly that", () => {
     render(
       <ConversationTimelineView

package/src/conversation/conversationPresentation.ts

@@ -6,7 +6,10 @@ import {
   ConversationLane,
   type ConversationTimelineItem,
 } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
-import { ChannelDeliveryStatus } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/delivery_pb";
+import {
+  ChannelAttemptFailureKind,
+  ChannelDeliveryStatus,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/delivery_pb";
 import { ChannelReceiptState } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/outbound_pb";
 import type { ChannelProviderId } from "../channel/providers.js";
 
@@ -106,6 +109,54 @@ export function receiptOf(item: ConversationTimelineItem): ReceiptKind | null {
   }
 }
 
+/**
+ * Why a FAILED send attempt failed, in render vocabulary. `null` until
+ * the platform classifies (rows failed before the classification
+ * existed, and every non-failed item).
+ *
+ * The structured twin of {@link attemptExplanationOf}'s prose
+ * (cloud#262): a renderer that branches on the failure keys on this,
+ * never on the explanation's words.
+ */
+export type AttemptFailureKind = "refused" | "errored" | "withdrawn";
+
+/** Map the wire attempt-failure kind onto the render vocabulary. */
+export function attemptFailureOf(item: ConversationTimelineItem): AttemptFailureKind | null {
+  switch (item.attemptFailureKind) {
+    case ChannelAttemptFailureKind.attempt_refused:
+      return "refused";
+    case ChannelAttemptFailureKind.attempt_errored:
+      return "errored";
+    case ChannelAttemptFailureKind.attempt_withdrawn:
+      return "withdrawn";
+    default:
+      return null;
+  }
+}
+
+/**
+ * The visible explanation for a FAILED send attempt, or `null` when the
+ * item carries none to show (non-failed items, and rows failed before
+ * the platform classified failures).
+ *
+ * The attempt-axis sibling of the receipt explanation (cloud#262,
+ * closing F-25): `attempt_detail` is PLATFORM-authored thread-safe copy
+ * — the write side guarantees raw diagnostics never occupy it — so it
+ * renders verbatim when present (refusals and withdrawn sends). An
+ * `errored` failure deliberately carries no detail (its diagnostic is
+ * operator-only, in `last_error` server-side); the copy here is this
+ * surface's own generic for that arm, and it makes NO claim about
+ * attempt counts — the wire does not carry them, and `errored` covers
+ * first-try structural dead-letters as well as exhausted retries.
+ */
+export function attemptExplanationOf(item: ConversationTimelineItem): string | null {
+  if (sendAttemptOf(item) !== "failed") return null;
+  if (item.attemptDetail !== "") return item.attemptDetail;
+  return attemptFailureOf(item) === "errored"
+    ? "Delivery failed due to a technical problem on the platform's side."
+    : null;
+}
+
 /**
  * Placeholder copy for inbound items whose body the platform cannot
  * render (`text` empty, `provider_message_type` names the kind) — the

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -9,6 +9,7 @@ import {
 } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
 import type { CursorMemberSpend } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
 import { Button } from "../button/index.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { StateBadge } from "./badges.js";
 import { formatPoolPercent, formatSpendMicros } from "./cursor-account-format.js";
 import type { CursorAccountCoverage } from "./cursor-account-coverage.js";
@@ -225,9 +226,9 @@ function CoverageGroup({
  * The member-identity cell shared by key rows and gap rows. The email is
  * the row's identity, so it must be fully readable: it wraps onto more
  * lines when the column is narrow (emails are unbroken strings, so they
- * need explicit word-breaking) with a hover tooltip as backup, unlike
- * the other text cells which truncate. The secondary name line stays
- * truncated — it is display sugar, not identity.
+ * need explicit word-breaking), unlike the other text cells which
+ * truncate. The secondary name line stays truncated — it is display
+ * sugar, not identity.
  */
 function MemberCell({
   email,
@@ -238,7 +239,9 @@ function MemberCell({
 }) {
   return (
     <span role="cell" className="stg:min-w-0">
-      <span className="stg:block stg:break-words stg:font-medium stg:text-foreground" title={email}>
+      {/* No tooltip: break-words shows the full email, so a hover hint
+          would only repeat what is already visible. */}
+      <span className="stg:block stg:break-words stg:font-medium stg:text-foreground">
         {email}
       </span>
       {name && (
@@ -273,16 +276,15 @@ function KeyRow({
     <div role="row" className={cn(ROW_GRID, "stg:border-t stg:border-border-muted stg:text-xs")}>
       <MemberCell email={key.boundEmail} />
       <span role="cell" className="stg:min-w-0">
-        <span
-          className="stg:block stg:truncate stg:text-muted-foreground"
-          title={key.cursorKeyName || undefined}
-        >
-          {key.cursorKeyName || "unnamed key"}
-        </span>
+        <TruncatedText
+          text={key.cursorKeyName || "unnamed key"}
+          className="stg:block stg:text-muted-foreground"
+        />
         {key.label && (
-          <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground" title={key.label}>
-            {key.label}
-          </span>
+          <TruncatedText
+            text={key.label}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         )}
       </span>
       <SpendCells spend={keyView.spend} />

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

@@ -237,10 +237,10 @@ describe("CursorAccountsConsole", () => {
     expect(screen.getByText(/On the team — key held/)).toBeTruthy();
     expect(screen.getByText("zane@scenar.ai")).toBeTruthy();
     expect(screen.getByText("stigmer-prod")).toBeTruthy();
-    // The email is the row's identity: full value always hoverable on
-    // both row kinds (the cell wraps rather than truncates).
-    expect(screen.getByTitle("zane@scenar.ai")).toBeTruthy();
-    expect(screen.getByTitle("uncovered@scenar.ai")).toBeTruthy();
+    // The email is the row's identity: the cell wraps rather than
+    // truncates, so the full value is always visible text on both row
+    // kinds — and never a native title (banned, stigmer-cloud#268).
+    expect(document.querySelector("[title]")).toBeNull();
     expect(screen.getByText("$0.17")).toBeTruthy(); // included, 169342 micro-USD
     expect(screen.getByText("Active")).toBeTruthy();
     // Category 2: on the team, no key — server-joined spend on the gap row.

package/src/dashboard/DashboardKPICards.tsx

@@ -103,11 +103,12 @@ export const DashboardKPICards = memo(function DashboardKPICards({
     <div className={cn("stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4", className)}>
       {STAT_CARDS.map((card) => {
         const breakdown = card.getBreakdown(summary);
+        // No tooltip on the card: the breakdown is rendered visibly below
+        // the value, so the old title only repeated on-screen text.
         return (
           <div
             key={card.label}
             className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-3"
-            title={breakdown ?? undefined}
           >
             <p className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               {card.label}

package/src/datastore/CollectionRecordsBrowser.tsx

@@ -14,6 +14,7 @@ import type {
   CollectionDescription,
   RecordEnvelope,
 } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/record_io_pb";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ResourceTable } from "../resource-workbench/components/ResourceTable.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
@@ -505,18 +506,18 @@ function TypedCell({
   readonly numeric?: boolean;
   readonly mono?: boolean;
 }) {
-  const truncated = value.length > 80 ? `${value.slice(0, 79)}…` : value;
+  // TruncatedText's overflow gating supersedes the old hand-rolled
+  // 80-character slice + conditional title: CSS truncates the cell and the
+  // tooltip opens only when the value is actually clipped.
   return (
-    <span
-      title={value.length > 80 ? value : undefined}
+    <TruncatedText
+      text={value}
       className={cn(
-        "stg:block stg:max-w-xs stg:truncate",
+        "stg:block stg:max-w-xs",
         numeric && "stg:text-right stg:tabular-nums",
         mono && "stg:font-mono",
       )}
-    >
-      {truncated}
-    </span>
+    />
   );
 }
 

package/src/environment/EnvironmentVariableEditor.tsx

@@ -12,6 +12,7 @@ import { getUserMessage, type EnvVarInput } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { PermissionGate } from "../iam-policy/PermissionGate.js";
 import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables.js";
 import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables.js";
@@ -390,12 +391,22 @@ function VariableRow({
       <div className="stg:group stg:flex stg:items-center stg:gap-3 stg:py-2">
         {/* Key + badge */}
         <div className="stg:flex stg:shrink-0 stg:items-baseline stg:gap-1.5">
-          <span
-            className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground"
-            title={variable.description || undefined}
-          >
-            {variable.key}
-          </span>
+          {variable.description ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground" />
+                }
+              >
+                {variable.key}
+              </TooltipTrigger>
+              <TooltipContent side="top">{variable.description}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <span className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
+              {variable.key}
+            </span>
+          )}
           {variable.isSecret && (
             <span className="stg:text-[0.55rem] stg:uppercase stg:tracking-wider stg:text-muted-foreground-subtle">
               secret

package/src/execution/ApprovalCard.tsx

@@ -407,12 +407,10 @@ export function ApprovalCardBody({
       </div>
 
       {/* De-emphasized provenance, trailing the decision it explains. Only the
-          informative reasons reach here (see showGateReason); the full phrase is
-          on hover. */}
+          informative reasons reach here (see showGateReason). */}
       {showGateReason && (
         <p
           className="stg:text-[11px] stg:italic stg:text-muted-foreground"
-          title={gateReason ?? undefined}
           data-cursor-target="approval-gate-reason"
         >
           {gateReason}

package/src/execution/ArtifactRowView.tsx

@@ -5,6 +5,7 @@
 
 import { cn } from "@stigmer/theme";
 import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { ArtifactRowItem } from "./artifact-row-item.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 
@@ -59,54 +60,73 @@ export function ArtifactRowView({
 }: ArtifactRowViewProps) {
   return (
     <li className={cn("stg:group stg:flex stg:items-stretch", className)}>
-      <button
-        type="button"
-        onClick={onOpen}
-        onDoubleClick={onActivate}
-        title={item.tooltip}
-        className={cn(
-          "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
-          "stg:hover:bg-muted stg:hover:text-foreground",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-        )}
-      >
-        <span className="stg:shrink-0 stg:text-muted-foreground">
-          {item.isDirectory ? (
-            <FolderTypeIcon open={false} />
-          ) : (
-            <FileTypeIcon fileName={item.name} />
-          )}
-        </span>
-        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
-          {item.name}
-          {item.isDirectory && "/"}
-          {item.subtitlePath && (
-            <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
-              {item.subtitlePath}
-            </span>
-          )}
-        </span>
-        <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
-          {formatArtifactSize(item.sizeBytes)}
-        </span>
-      </button>
-      <button
-        type="button"
-        onClick={onDownload}
-        disabled={isDownloading}
-        aria-label={
-          isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
-        }
-        title={item.isDirectory ? "Download ZIP" : "Download"}
-        className={cn(
-          "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
-          "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-          "stg:hover:text-foreground stg:disabled:opacity-50",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-        )}
-      >
-        <DownloadIcon />
-      </button>
+      {/* The open button is its own tooltip trigger (hover and keyboard focus
+          both reveal the full path); the Download button's trigger is a
+          wrapper span so the hint survives the in-flight `disabled` state
+          (browsers suppress pointer events on disabled form controls, so a
+          disabled button can never open its own tooltip). */}
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onOpen}
+              onDoubleClick={onActivate}
+              className={cn(
+                "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+                "stg:hover:bg-muted stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+              )}
+            />
+          }
+        >
+          <span className="stg:shrink-0 stg:text-muted-foreground">
+            {item.isDirectory ? (
+              <FolderTypeIcon open={false} />
+            ) : (
+              <FileTypeIcon fileName={item.name} />
+            )}
+          </span>
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
+            {item.name}
+            {item.isDirectory && "/"}
+            {item.subtitlePath && (
+              <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
+                {item.subtitlePath}
+              </span>
+            )}
+          </span>
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
+            {formatArtifactSize(item.sizeBytes)}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {item.tooltip}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger render={<span className="stg:flex stg:shrink-0" />}>
+          <button
+            type="button"
+            onClick={onDownload}
+            disabled={isDownloading}
+            aria-label={
+              isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
+            }
+            className={cn(
+              "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+              "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+              "stg:hover:text-foreground stg:disabled:opacity-50",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+            )}
+          >
+            <DownloadIcon />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {item.isDirectory ? "Download ZIP" : "Download"}
+        </TooltipContent>
+      </Tooltip>
     </li>
   );
 }