@stigmer/react 3.11.0 → 3.12.0

package/src/platform-client/PlatformClientListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
 
@@ -239,12 +240,14 @@ function PlatformClientRow({
 
       <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-3 stg:text-xs stg:text-muted-foreground">
         {fingerprint && (
-          <span
-            className="stg:font-mono"
-            title={`Secret fingerprint: ${fingerprint}`}
-          >
-            ••••{fingerprint.slice(-4)}
-          </span>
+          <Tooltip>
+            <TooltipTrigger render={<span className="stg:font-mono" />}>
+              ••••{fingerprint.slice(-4)}
+            </TooltipTrigger>
+            <TooltipContent side="top" className="stg:break-all">
+              {`Secret fingerprint: ${fingerprint}`}
+            </TooltipContent>
+          </Tooltip>
         )}
         <ExpiryBadge spec={spec} />
         {spec?.autoProvisionAccounts && (
@@ -253,9 +256,16 @@ function PlatformClientRow({
           </span>
         )}
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
       </div>
 
@@ -305,15 +315,22 @@ function ExpiryBadge({ spec }: { spec: PlatformClient["spec"] }) {
     const date = timestampDate(spec.expiresAt);
     const isExpired = date < new Date();
     return (
-      <span
-        className={cn(
-          "stg:text-[0.65rem]",
-          isExpired ? "stg:text-destructive stg:font-medium" : "stg:text-muted-foreground",
-        )}
-        title={`Expires ${date.toISOString()}`}
-      >
-        {isExpired ? "Expired" : `Exp ${formatShortDate(date)}`}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <time
+              dateTime={date.toISOString()}
+              className={cn(
+                "stg:text-[0.65rem]",
+                isExpired ? "stg:text-destructive stg:font-medium" : "stg:text-muted-foreground",
+              )}
+            />
+          }
+        >
+          {isExpired ? "Expired" : `Exp ${formatShortDate(date)}`}
+        </TooltipTrigger>
+        <TooltipContent side="top">{`Expires ${date.toISOString()}`}</TooltipContent>
+      </Tooltip>
     );
   }
   return null;

package/src/pricing-governance/BaselineEditor.tsx

@@ -86,6 +86,8 @@ interface CatalogForm {
   readonly speedTier: string;
   readonly costTier: string;
   readonly featured: boolean;
+  /** Comma-separated base-level wire ids (inbound aliases). */
+  readonly wireIds: string;
   readonly input: string;
   readonly output: string;
   readonly cacheWrite: string;
@@ -105,6 +107,7 @@ const EMPTY_FORM: CatalogForm = {
   speedTier: "fast",
   costTier: "standard",
   featured: false,
+  wireIds: "",
   input: "",
   output: "",
   cacheWrite: "0",
@@ -126,6 +129,7 @@ function formFromBaseline(baseline: ModelPricingBaseline): CatalogForm {
     speedTier: baseline.speedTier || "fast",
     costTier: baseline.costTier || "standard",
     featured: baseline.featured,
+    wireIds: baseline.wireIds.join(", "),
     input: microsToDollarString(pricing?.inputPriceMicrosPerMillion ?? ZERO),
     output: microsToDollarString(pricing?.outputPriceMicrosPerMillion ?? ZERO),
     cacheWrite: microsToDollarString(pricing?.cacheWritePriceMicrosPerMillion ?? ZERO),
@@ -212,6 +216,10 @@ function buildBaseline(
     speedTier: form.speedTier,
     costTier: form.costTier,
     featured: form.featured,
+    wireIds: form.wireIds
+      .split(",")
+      .map((w) => w.trim())
+      .filter((w) => w !== ""),
     pricing: create(PricingBlockSchema, {
       inputPriceMicrosPerMillion: input,
       outputPriceMicrosPerMillion: output,
@@ -516,6 +524,18 @@ export function BaselineEditor({
         </Field>
       </div>
 
+      {/* Inbound aliases, editable on existing entries (unlike identity):
+          adding an alias to a live model is this field's primary use. */}
+      <Field label="Wire ids (comma-separated)">
+        <input
+          className={INPUT_CLASSES}
+          value={form.wireIds}
+          onChange={(e) => set("wireIds", e.target.value)}
+          placeholder="e.g. gemini-3-flash-preview"
+          disabled={isSubmitting}
+        />
+      </Field>
+
       <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
         <input
           type="checkbox"

package/src/pricing-governance/ModelCatalogPanel.tsx

@@ -8,6 +8,7 @@ import {
   type ModelPricingBaseline,
 } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
 import { Button } from "../button/index.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { BaselineEditor } from "./BaselineEditor.js";
 import { RetireConfirm } from "./RetireConfirm.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
@@ -232,13 +233,16 @@ function CatalogRow({
         className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-xs"
       >
         <span role="cell" className="stg:min-w-0">
-          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground" title={baseline.modelId}>
+          {/* The display name needs no tooltip: the model id it used to
+              reveal is printed on the line below, which shows its own
+              tooltip when clipped. */}
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {baseline.displayName || baseline.modelId}
           </span>
-          <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground">
-            {baseline.modelId}
-            {baseline.featured ? " · featured" : ""}
-          </span>
+          <TruncatedText
+            text={`${baseline.modelId}${baseline.featured ? " · featured" : ""}`}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         </span>
         <span role="cell" className="stg:text-muted-foreground">
           {baseline.harness}

package/src/pricing-governance/PricingGovernanceConsole.tsx

@@ -12,6 +12,7 @@ import { ModelGovernanceDetail } from "./ModelGovernanceDetail.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
 import { INPUT_CLASSES } from "../internal/form-primitives.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ZERO } from "./pricing-format.js";
 import { useDecidePricingOverride } from "./useDecidePricingOverride.js";
 import { useRetireModelPricingBaseline } from "./useRetireModelPricingBaseline.js";
@@ -367,13 +368,16 @@ function ModelRow({
         )}
       >
         <span className="stg:min-w-0">
-          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground" title={baseline.modelId}>
+          {/* The display name needs no tooltip: the model id it used to
+              reveal is printed on the line below, which shows its own
+              tooltip when clipped. */}
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {baseline.displayName || baseline.modelId}
           </span>
-          <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground">
-            {baseline.modelId}
-            {baseline.featured ? " · featured" : ""}
-          </span>
+          <TruncatedText
+            text={`${baseline.modelId}${baseline.featured ? " · featured" : ""}`}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         </span>
         <span className="stg:text-muted-foreground">{baseline.harness}</span>
         <RateCell

package/src/pricing-governance/PricingGovernancePanel.tsx

@@ -5,6 +5,7 @@ import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
 import type {
   ModelPricingGovernanceEntry,
 } from "@stigmer/protos/ai/stigmer/billing/v1/io_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
 import { usePricingGovernance } from "./usePricingGovernance.js";
@@ -140,10 +141,18 @@ function GovernanceRow({ entry }: { readonly entry: ModelPricingGovernanceEntry
   return (
     <div role="row"
          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-xs stg:last:border-b-0">
-      <span role="cell" className="stg:truncate stg:font-medium stg:text-foreground"
-            title={entry.modelId}>
-        {entry.displayName || entry.modelId}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span role="cell" className="stg:truncate stg:font-medium stg:text-foreground" />
+          }
+        >
+          {entry.displayName || entry.modelId}
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {entry.modelId}
+        </TooltipContent>
+      </Tooltip>
       <span role="cell" className="stg:text-muted-foreground">{entry.harness}</span>
       <RateCell
         role="cell"

package/src/pricing-governance/__tests__/ModelCatalogPanel.test.tsx

@@ -53,6 +53,7 @@ function sonnetBaseline(overrides: Record<string, unknown> = {}) {
     costTier: "standard",
     speedTier: "fast",
     featured: true,
+    wireIds: ["claude-sonnet-4-6-preview"],
     status: ModelPricingBaselineStatus.pricing_baseline_active,
     pricing: create(PricingBlockSchema, {
       inputPriceMicrosPerMillion: 3_000_000n,
@@ -169,6 +170,42 @@ describe("ModelCatalogPanel", () => {
     expect(submitted.baseline.pricingVariants.fast.wireIds).toEqual([
       "claude-sonnet-4-6-fast",
     ]);
+    // Base-level wire ids survive an unrelated edit — the form surfaces
+    // them precisely so a price edit can never silently erase them.
+    expect(submitted.baseline.wireIds).toEqual(["claude-sonnet-4-6-preview"]);
+  });
+
+  it("edits base-level wire ids and submits the parsed list", async () => {
+    const user = userEvent.setup();
+    const upsertModelPricingBaseline = vi.fn().mockResolvedValue(sonnetBaseline());
+    const client = createMockStigmer({
+      listModelPricingBaselines: vi
+        .fn()
+        .mockResolvedValue({ baselines: [sonnetBaseline()] }),
+      upsertModelPricingBaseline,
+    });
+
+    render(<ModelCatalogPanel />, { wrapper: wrapper(client) });
+    await user.click(await screen.findByRole("button", { name: "Edit" }));
+
+    // The base "Wire ids" field comes before the variant's in DOM order.
+    const wireIdsField = screen.getAllByLabelText("Wire ids (comma-separated)")[0];
+    await user.clear(wireIdsField);
+    await user.type(
+      wireIdsField,
+      "claude-sonnet-4-6-preview, accounts/fireworks/models/sonnet-4p6",
+    );
+    await user.click(screen.getByRole("button", { name: "Review changes" }));
+
+    // Alias-only edits move no rates — the confirm step says so.
+    expect(await screen.findByText(/No rate changes/)).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: "Apply revision" }));
+    await waitFor(() => expect(upsertModelPricingBaseline).toHaveBeenCalledTimes(1));
+
+    expect(upsertModelPricingBaseline.mock.calls[0][0].baseline.wireIds).toEqual([
+      "claude-sonnet-4-6-preview",
+      "accounts/fireworks/models/sonnet-4p6",
+    ]);
   });
 
   it("rejects invalid rates client-side before any RPC", async () => {

package/src/resource-workbench/components/StatusBadge.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 import type { StatusPhase } from "../types.js";
 
 /** Props for {@link StatusBadge}. */
@@ -69,9 +70,12 @@ export function StatusBadge({
   if (!tooltip) return badge;
 
   return (
-    <span title={tooltip} className="stg:inline-flex">
-      {badge}
-    </span>
+    <Tooltip>
+      <TooltipTrigger render={<span className="stg:inline-flex" />}>
+        {badge}
+      </TooltipTrigger>
+      <TooltipContent side="top">{tooltip}</TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/schedule/CadenceField.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import {
   cadenceToCron,
   describeCadence,
@@ -164,33 +165,43 @@ export function CadenceField({
               // schedule with zero days is not expressible in cron.
               const isLastSelected = isOn && value.days.length === 1;
               return (
-                <button
-                  key={label}
-                  type="button"
-                  aria-pressed={isOn}
-                  aria-label={label}
-                  title={label}
-                  disabled={disabled || isLastSelected}
-                  onClick={() =>
-                    onChange({
-                      ...value,
-                      days: isOn
-                        ? value.days.filter((d) => d !== day)
-                        : [...value.days, day].sort((a, b) => a - b),
-                    })
-                  }
-                  className={cn(
-                    "stg:inline-flex stg:h-7 stg:w-9 stg:items-center stg:justify-center stg:rounded-md stg:border stg:text-xs stg:font-medium stg:transition-colors",
-                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-                    "stg:disabled:pointer-events-none",
-                    isOn
-                      ? "stg:border-primary stg:bg-primary stg:text-primary-foreground"
-                      : "stg:border-input stg:bg-background stg:text-muted-foreground stg:hover:text-foreground",
-                    isLastSelected && "stg:opacity-70",
-                  )}
-                >
-                  {label.slice(0, 3)}
-                </button>
+                // The tooltip trigger is a wrapper span so the hint stays
+                // hoverable on the always-disabled last selected day — the
+                // one toggle whose state actually needs explaining.
+                <Tooltip key={label}>
+                  <TooltipTrigger render={<span className="stg:inline-flex" />}>
+                    <button
+                      type="button"
+                      aria-pressed={isOn}
+                      aria-label={label}
+                      disabled={disabled || isLastSelected}
+                      onClick={() =>
+                        onChange({
+                          ...value,
+                          days: isOn
+                            ? value.days.filter((d) => d !== day)
+                            : [...value.days, day].sort((a, b) => a - b),
+                        })
+                      }
+                      className={cn(
+                        "stg:inline-flex stg:h-7 stg:w-9 stg:items-center stg:justify-center stg:rounded-md stg:border stg:text-xs stg:font-medium stg:transition-colors",
+                        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                        "stg:disabled:pointer-events-none",
+                        isOn
+                          ? "stg:border-primary stg:bg-primary stg:text-primary-foreground"
+                          : "stg:border-input stg:bg-background stg:text-muted-foreground stg:hover:text-foreground",
+                        isLastSelected && "stg:opacity-70",
+                      )}
+                    >
+                      {label.slice(0, 3)}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {isLastSelected
+                      ? "A weekly schedule needs at least one day"
+                      : label}
+                  </TooltipContent>
+                </Tooltip>
               );
             })}
           </div>

package/src/schedule/ScheduleRunsTable.tsx

@@ -11,6 +11,7 @@ import {
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
 import { Pagination } from "../internal/Pagination.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useScheduleRuns } from "./useScheduleRuns.js";
 
 /** Props for {@link ScheduleRunsTable}. */
@@ -188,12 +189,17 @@ function RunTableRow({
       <span role="cell" className="stg:hidden stg:text-xs stg:text-muted-foreground stg:sm:block">
         {runOriginLabel(run.origin)}
       </span>
-      <span
-        role="cell"
-        className="stg:text-xs stg:text-muted-foreground"
-        title={fireDate ? fireDate.toLocaleString() : undefined}
-      >
-        {fireDate ? formatRelativeTime(fireDate, now) : "—"}
+      <span role="cell" className="stg:text-xs stg:text-muted-foreground">
+        {fireDate ? (
+          <Tooltip>
+            <TooltipTrigger render={<time dateTime={fireDate.toISOString()} />}>
+              {formatRelativeTime(fireDate, now)}
+            </TooltipTrigger>
+            <TooltipContent side="top">{fireDate.toLocaleString()}</TooltipContent>
+          </Tooltip>
+        ) : (
+          "—"
+        )}
       </span>
       <span
         role="cell"
@@ -313,11 +319,17 @@ function CompactRunRow({
           {runOriginLabel(run.origin)}
         </span>
         <span className="stg:text-xs stg:text-muted-foreground-subtle">·</span>
-        <span
-          className="stg:text-xs stg:text-muted-foreground"
-          title={fireDate ? fireDate.toLocaleString() : undefined}
-        >
-          {fireDate ? formatRelativeTime(fireDate, now) : "—"}
+        <span className="stg:text-xs stg:text-muted-foreground">
+          {fireDate ? (
+            <Tooltip>
+              <TooltipTrigger render={<time dateTime={fireDate.toISOString()} />}>
+                {formatRelativeTime(fireDate, now)}
+              </TooltipTrigger>
+              <TooltipContent side="top">{fireDate.toLocaleString()}</TooltipContent>
+            </Tooltip>
+          ) : (
+            "—"
+          )}
         </span>
       </div>
       {run.reason && (

package/src/schedule/__tests__/cadence-tooltips.layout.test.tsx

@@ -0,0 +1,86 @@
+// The disabled-control tooltip contract from the native-title sweep
+// (stigmer-cloud#268), pinned in a real Chromium on CadenceField's
+// weekday toggles — the sweep's canonical "explanation on a disabled
+// control" site. Browsers suppress pointer events on disabled form
+// controls, so the old native `title` was unreachable by EVERY input
+// method exactly when it mattered (the always-disabled last selected
+// day). The fix hangs the house tooltip off a wrapper span; this suite
+// proves a mouse user really gets the reason while the button is
+// disabled.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import { CadenceField } from "../CadenceField.js";
+
+function renderWeekly() {
+  const pane = document.createElement("div");
+  pane.className = "stgm";
+  pane.style.width = "480px";
+  document.body.appendChild(pane);
+  render(
+    <CadenceField
+      value={{ kind: "weekly", days: [1], hour: 9, minute: 0 }}
+      onChange={() => {}}
+    />,
+    { container: pane },
+  );
+  return pane;
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("CadenceField disabled-day tooltip", () => {
+  it("explains the locked last-selected day on hover while the button is disabled", async () => {
+    const pane = renderWeekly();
+    expect(pane.querySelector("[title]")).toBeNull();
+
+    const monday = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Monday",
+    );
+    expect(monday!.disabled).toBe(true);
+
+    // Hover the wrapper span — the disabled button itself receives no
+    // pointer events, which is the entire reason the wrapper exists.
+    const wrapper = monday!.parentElement!;
+    await userEvent.hover(wrapper);
+    await vi.waitFor(
+      () => {
+        const portaled = Array.from(document.body.children)
+          .filter((node) => node !== pane)
+          .map((node) => node.textContent ?? "")
+          .join(" ");
+        expect(portaled).toContain("A weekly schedule needs at least one day");
+      },
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(wrapper);
+  });
+
+  it("names an enabled weekday on hover", async () => {
+    const pane = renderWeekly();
+
+    const tuesday = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Tuesday",
+    );
+    expect(tuesday!.disabled).toBe(false);
+
+    await userEvent.hover(tuesday!.parentElement!);
+    await vi.waitFor(
+      () => {
+        const portaled = Array.from(document.body.children)
+          .filter((node) => node !== pane)
+          .map((node) => node.textContent ?? "")
+          .join(" ");
+        expect(portaled).toContain("Tuesday");
+      },
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(tuesday!.parentElement!);
+  });
+});

package/src/session/PlanEditor.tsx

@@ -153,17 +153,21 @@ export function PlanEditor({
               onClick={() => setView("edit")}
               label="Edit"
               disabled={!canEdit}
-              title={
-                !canEdit
-                  ? "This plan is too large to edit in place — download it instead."
-                  : undefined
-              }
             />
           )}
         </div>
         <span className="stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground-faint">
           {formatArtifactSize(plan.artifact.sizeBytes)}
         </span>
+        {/* The reason the Edit tab is disabled must be visible text: a
+            disabled tab leaves the tab order and drops pointer events, so
+            no hover- or focus-dependent hint can ever reach the user who
+            needs it. */}
+        {activeDraft !== undefined && !canEdit && (
+          <span className="stg:min-w-0 stg:text-[0.65rem] stg:text-muted-foreground">
+            This plan is too large to edit in place — download it instead.
+          </span>
+        )}
 
         <div className="stg:ml-auto stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-3">
           {activeDraft?.isEdited && (
@@ -312,13 +316,11 @@ function ViewTab({
   onClick,
   label,
   disabled,
-  title,
 }: {
   readonly active: boolean;
   readonly onClick: () => void;
   readonly label: string;
   readonly disabled?: boolean;
-  readonly title?: string;
 }) {
   return (
     <button
@@ -327,7 +329,6 @@ function ViewTab({
       aria-selected={active}
       onClick={onClick}
       disabled={disabled}
-      title={title}
       className={cn(
         "stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
         "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",

package/src/sharing/AgentShareList.tsx

@@ -15,6 +15,8 @@ import { ActionMenu } from "../action-menu/index.js";
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import { useCopyResource } from "../resource-detail/useCopyResource.js";
@@ -311,35 +313,39 @@ function ShareRow({
     >
       <td className="stg:px-4 stg:py-2.5">
         <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
-          <span
-            className="stg:truncate stg:font-medium stg:text-foreground"
-            title={meta?.name || slug || undefined}
-          >
-            {meta?.name || slug || "\u2014"}
-          </span>
+          <TruncatedText
+            text={meta?.name || slug || "\u2014"}
+            className="stg:font-medium stg:text-foreground"
+          />
           {isCrossOrg && (
-            <span
-              className={cn(
-                "stg:inline-flex stg:shrink-0 stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
-                "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wide",
-                "stg:bg-muted stg:text-muted-foreground stg:border stg:border-border",
-              )}
-              title={`This share lives in ${org}; the agent lives in ${agent.metadata?.org}`}
-            >
-              Cross-org
-            </span>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span
+                    className={cn(
+                      "stg:inline-flex stg:shrink-0 stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
+                      "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wide",
+                      "stg:bg-muted stg:text-muted-foreground stg:border stg:border-border",
+                    )}
+                  />
+                }
+              >
+                Cross-org
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                {`This share lives in ${org}; the agent lives in ${agent.metadata?.org}`}
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
       </td>
 
       <td className="stg:px-4 stg:py-2.5" onClick={(e) => e.stopPropagation()}>
         <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-1.5">
-          <code
-            className="stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground"
-            title={displayPath}
-          >
-            {displayPath}
-          </code>
+          <TruncatedText
+            text={displayPath}
+            className="stg:font-mono stg:text-xs stg:text-muted-foreground"
+          />
           <button
             type="button"
             onClick={handleCopyLink}