@stigmer/react 3.12.1 → 3.12.2

package/src/attachment/__tests__/vision-preflight.test.ts

@@ -0,0 +1,311 @@
+import { describe, it, expect } from "vitest";
+import {
+  assessVisionPreflight,
+  visionPreflightMessage,
+  type VisionPreflightAttachment,
+} from "../vision-preflight";
+import type { ModelInfo, VisionLimits } from "../../models/registry";
+
+/** The production budget the registry advertises (3 MiB / 4 MiB / 10). */
+const LIMITS: VisionLimits = {
+  maxImageBytes: 3 * 1024 * 1024,
+  maxTotalBytes: 4 * 1024 * 1024,
+  maxImages: 10,
+};
+
+function image(name: string, sizeBytes: number, contentType = "image/png"): VisionPreflightAttachment {
+  return { name, sizeBytes, contentType };
+}
+
+function model(overrides?: Partial<ModelInfo>): ModelInfo {
+  return {
+    modelId: "test-model",
+    provider: "anthropic",
+    displayName: "Test Model",
+    shortDescription: "",
+    speedTier: "fast",
+    costTier: "standard",
+    harness: "native",
+    featured: false,
+    serviceTiers: [],
+    ...overrides,
+  };
+}
+
+describe("assessVisionPreflight — tri-state silence", () => {
+  it("warns about nothing when limits are absent (older server)", () => {
+    const result = assessVisionPreflight([image("huge.png", 50 * 1024 * 1024)], {
+      model: model(),
+    });
+    expect(result.warnings).toEqual([]);
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("stays silent on an unassessed model (visionCapability undefined)", () => {
+    const result = assessVisionPreflight([image("a.png", 100)], {
+      model: model(),
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("never treats an unknown model as blind", () => {
+    const result = assessVisionPreflight([image("a.png", 100)], { limits: LIMITS });
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("returns no warnings for zero attachments", () => {
+    expect(assessVisionPreflight([], { model: model(), limits: LIMITS }).warnings).toEqual([]);
+  });
+});
+
+describe("assessVisionPreflight — vision candidates", () => {
+  it("ignores non-image attachments entirely, even huge ones", () => {
+    const result = assessVisionPreflight(
+      [
+        { name: "big.pdf", sizeBytes: 50 * 1024 * 1024, contentType: "application/pdf" },
+        { name: "big.zip", sizeBytes: 50 * 1024 * 1024, contentType: "application/zip" },
+      ],
+      { model: model({ visionCapability: false }), limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([]);
+    expect(result.modelCannotSeeImages).toBe(false);
+  });
+
+  it("ignores SVG — image/* but not a runner vision type", () => {
+    const result = assessVisionPreflight(
+      [image("diagram.svg", 50 * 1024 * 1024, "image/svg+xml")],
+      { model: model(), limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("assesses all four runner vision types, case-insensitively", () => {
+    const oversized = LIMITS.maxImageBytes + 1;
+    const result = assessVisionPreflight(
+      [
+        image("a.png", oversized, "image/png"),
+        image("b.jpg", oversized, "image/JPEG"),
+        image("c.webp", oversized, "image/webp"),
+        image("d.gif", oversized, "image/gif"),
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings.map((w) => w.reason)).toEqual([
+      "too_large", "too_large", "too_large", "too_large",
+    ]);
+  });
+});
+
+describe("assessVisionPreflight — per-image cap (too_large)", () => {
+  it("accepts an image exactly at the cap", () => {
+    const result = assessVisionPreflight([image("edge.png", LIMITS.maxImageBytes)], {
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([]);
+  });
+
+  it("degrades an image one byte over the cap", () => {
+    const result = assessVisionPreflight([image("over.png", LIMITS.maxImageBytes + 1)], {
+      limits: LIMITS,
+    });
+    expect(result.warnings).toEqual([
+      { name: "over.png", sizeBytes: LIMITS.maxImageBytes + 1, reason: "too_large" },
+    ]);
+  });
+
+  it("mirrors the production regression: a 3.59 MiB PNG warns", () => {
+    // The prod-verified case from stigmer/stigmer#365 — this image uploaded
+    // fine and then surprised the user with a disclosure after the turn.
+    const bytes = Math.round(3.59 * 1024 * 1024);
+    const result = assessVisionPreflight([image("photo.png", bytes)], { limits: LIMITS });
+    expect(result.warnings[0]?.reason).toBe("too_large");
+  });
+});
+
+describe("assessVisionPreflight — per-turn budget (budget_exhausted)", () => {
+  it("replicates the runner's admission: an oversized image does NOT consume budget", () => {
+    // 3.5 MiB is over the per-image cap (degraded, not counted); the two
+    // 1.9 MiB images then fit the 4 MiB total exactly like the runner
+    // would admit them. A naive sum (7.3 MiB) would wrongly warn on all.
+    const result = assessVisionPreflight(
+      [
+        image("oversized.png", 3.5 * 1024 * 1024),
+        image("ok-1.png", 1.9 * 1024 * 1024),
+        image("ok-2.png", 1.9 * 1024 * 1024),
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([
+      { name: "oversized.png", sizeBytes: 3.5 * 1024 * 1024, reason: "too_large" },
+    ]);
+  });
+
+  it("degrades the image that would cross the total-byte budget, in attachment order", () => {
+    const twoMib = 2 * 1024 * 1024;
+    const result = assessVisionPreflight(
+      [image("a.png", twoMib), image("b.png", twoMib), image("c.png", twoMib)],
+      { limits: LIMITS },
+    );
+    // a (2 MiB) + b (2 MiB) = 4 MiB exactly; c would cross.
+    expect(result.warnings).toEqual([
+      { name: "c.png", sizeBytes: twoMib, reason: "budget_exhausted" },
+    ]);
+  });
+
+  it("degrades images past the count cap", () => {
+    const tiny = 1024;
+    const images = Array.from({ length: 12 }, (_, i) => image(`img-${i}.png`, tiny));
+    const result = assessVisionPreflight(images, { limits: LIMITS });
+    expect(result.warnings.map((w) => w.name)).toEqual(["img-10.png", "img-11.png"]);
+    expect(result.warnings.every((w) => w.reason === "budget_exhausted")).toBe(true);
+  });
+
+  it("admits a smaller later image after an earlier refusal (runner semantics: sequential offers, no reservation)", () => {
+    // The runner offers every image in order and never reserves budget for
+    // a refused one; the preflight must not be cleverer or dumber than the
+    // enforcement it predicts.
+    const result = assessVisionPreflight(
+      [
+        image("big.png", 3 * 1024 * 1024),
+        image("medium.png", 2 * 1024 * 1024), // 3+2 > 4 → refused
+        image("small.png", 512 * 1024),       // 3+0.5 ≤ 4 → admitted
+      ],
+      { limits: LIMITS },
+    );
+    expect(result.warnings).toEqual([
+      { name: "medium.png", sizeBytes: 2 * 1024 * 1024, reason: "budget_exhausted" },
+    ]);
+  });
+});
+
+describe("assessVisionPreflight — blind model (model_no_vision)", () => {
+  it("short-circuits the byte math: every image warns model_no_vision, sizes irrelevant", () => {
+    const result = assessVisionPreflight(
+      [image("tiny.png", 10), image("huge.png", 50 * 1024 * 1024)],
+      { model: model({ visionCapability: false }), limits: LIMITS },
+    );
+    expect(result.modelCannotSeeImages).toBe(true);
+    expect(result.warnings).toEqual([
+      { name: "tiny.png", sizeBytes: 10, reason: "model_no_vision" },
+      { name: "huge.png", sizeBytes: 50 * 1024 * 1024, reason: "model_no_vision" },
+    ]);
+  });
+
+  it("applies the capability verdict even without limits (older server)", () => {
+    const result = assessVisionPreflight([image("a.png", 10)], {
+      model: model({ visionCapability: false }),
+    });
+    expect(result.modelCannotSeeImages).toBe(true);
+  });
+
+  it("an explicitly sighted model gets the normal byte assessment", () => {
+    const result = assessVisionPreflight([image("a.png", LIMITS.maxImageBytes + 1)], {
+      model: model({ visionCapability: true }),
+      limits: LIMITS,
+    });
+    expect(result.modelCannotSeeImages).toBe(false);
+    expect(result.warnings[0]?.reason).toBe("too_large");
+  });
+});
+
+describe("visionPreflightMessage", () => {
+  it("returns null for a clean preflight", () => {
+    expect(
+      visionPreflightMessage({ warnings: [], modelCannotSeeImages: false }),
+    ).toBeNull();
+  });
+
+  it("leads with the model for a blind-model preflight, never file advice", () => {
+    const preflight = assessVisionPreflight([image("a.png", 10)], {
+      model: model({ visionCapability: false, displayName: "Kimi K3" }),
+      limits: LIMITS,
+    });
+    const message = visionPreflightMessage(preflight, {
+      limits: LIMITS,
+      modelDisplayName: "Kimi K3",
+    });
+    expect(message).toBe(
+      "Kimi K3 can't view images — attached images will reach the agent as files only.",
+    );
+  });
+
+  it("names a single oversized file with its size and the actual cap", () => {
+    const preflight = assessVisionPreflight(
+      [image("screenshot.png", Math.round(3.6 * 1024 * 1024))],
+      { limits: LIMITS },
+    );
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toBe(
+      "screenshot.png (3.6 MB) exceeds the 3.0 MB inline-image limit and will reach the agent as a file, not an image.",
+    );
+  });
+
+  it("names two oversized files, then switches to a count for more", () => {
+    const over = LIMITS.maxImageBytes + 1;
+    const two = assessVisionPreflight(
+      [image("a.png", over), image("b.png", over)],
+      { limits: LIMITS },
+    );
+    expect(visionPreflightMessage(two, { limits: LIMITS })).toContain(
+      "a.png and b.png exceed",
+    );
+
+    const three = assessVisionPreflight(
+      [image("a.png", over), image("b.png", over), image("c.png", over)],
+      { limits: LIMITS },
+    );
+    expect(visionPreflightMessage(three, { limits: LIMITS })).toContain(
+      "3 images exceed",
+    );
+  });
+
+  it("explains the per-turn budget for budget_exhausted", () => {
+    const twoMib = 2 * 1024 * 1024;
+    const preflight = assessVisionPreflight(
+      [image("a.png", twoMib), image("b.png", twoMib), image("c.png", twoMib)],
+      { limits: LIMITS },
+    );
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toBe(
+      "c.png is over this turn's inline-image budget (10 images, 4.0 MB total) and will reach the agent as a file.",
+    );
+  });
+
+  it("joins mixed too_large and budget_exhausted reasons into one line", () => {
+    const preflight = {
+      warnings: [
+        { name: "big.png", sizeBytes: 4 * 1024 * 1024, reason: "too_large" as const },
+        { name: "late.png", sizeBytes: 1024, reason: "budget_exhausted" as const },
+      ],
+      modelCannotSeeImages: false,
+    };
+    const message = visionPreflightMessage(preflight, { limits: LIMITS });
+    expect(message).toContain("big.png");
+    expect(message).toContain("late.png");
+    expect(message).toContain("; ");
+  });
+
+  it("degrades copy gracefully when limits are unknown", () => {
+    const preflight = {
+      warnings: [
+        { name: "big.png", sizeBytes: 4 * 1024 * 1024, reason: "too_large" as const },
+      ],
+      modelCannotSeeImages: false,
+    };
+    const message = visionPreflightMessage(preflight);
+    expect(message).toBe(
+      "big.png (4.0 MB) exceeds the inline-image size limit and will reach the agent as a file, not an image.",
+    );
+  });
+
+  it("falls back to generic wording when the blind model has no display name", () => {
+    const preflight = {
+      warnings: [{ name: "a.png", sizeBytes: 10, reason: "model_no_vision" as const }],
+      modelCannotSeeImages: true,
+    };
+    expect(visionPreflightMessage(preflight)).toBe(
+      "The selected model can't view images — attached images will reach the agent as files only.",
+    );
+  });
+});

package/src/attachment/index.ts

@@ -21,6 +21,18 @@ export { extractClipboardFiles } from "./clipboard.js";
 export type { ClipboardFilesSource } from "./clipboard.js";
 
 export { prepareImageForVision } from "./prepare-image.js";
+export {
+  assessVisionPreflight,
+  visionPreflightMessage,
+} from "./vision-preflight.js";
+export type {
+  AssessVisionPreflightOptions,
+  VisionPreflight,
+  VisionPreflightAttachment,
+  VisionPreflightMessageOptions,
+  VisionPreflightReason,
+  VisionPreflightWarning,
+} from "./vision-preflight.js";
 export {
   MAX_VISION_LONG_EDGE_PX,
   MAX_VISION_PIXELS,

package/src/attachment/vision-preflight.ts

@@ -0,0 +1,236 @@
+/**
+ * Client-side vision preflight — predicts, before a turn is spent, which
+ * attached images the runner will refuse to deliver inline and why
+ * (stigmer/stigmer#365, stigmer/stigmer#386).
+ *
+ * The runner is the enforcement authority (`VisionBudget` in its
+ * `shared/attachment-vision.ts`); this module is the warning authority.
+ * To never warn differently than the runner behaves, it replicates the
+ * runner's admission semantics against the SAME data the runner uses:
+ *
+ * - the byte budget arrives via the registry document's `limits.vision`
+ *   block ({@link VisionLimits}) — advertised == enforced;
+ * - the model's vision capability arrives via the per-model
+ *   `capabilities` block ({@link ModelInfo.visionCapability});
+ * - reasons reuse the runner's disclosure vocabulary
+ *   (`VisionDegradedReason`), so a warning here and a disclosure in the
+ *   agent's reply always tell one story.
+ *
+ * Tri-state discipline: absent limits or an unassessed model produce NO
+ * warnings. A client that cannot know the budget must stay silent, not
+ * guess — the runner's own disclosure remains the backstop.
+ *
+ * Deliberately assessed client-side reasons are a SUBSET of the runner's:
+ * `unsupported_format` and `type_mismatch` need magic-byte sniffing that a
+ * declared content type cannot honestly stand in for (and pasted images are
+ * already normalized by `prepareImageForVision`), so those two remain
+ * runner-disclosed only.
+ */
+
+import type { ModelInfo, VisionLimits } from "../models/registry.js";
+import { formatFileSize } from "./attachment-utils.js";
+
+/**
+ * Content types the runner recognizes as vision candidates (its
+ * `VisionMimeType` set). Anything else — PDFs, SVGs, archives — rides the
+ * normal file story with no inline-vision expectation and no warning.
+ */
+const VISION_CANDIDATE_TYPES: ReadonlySet<string> = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+]);
+
+/** Minimal attachment shape the preflight needs — pure data, no `File`. */
+export interface VisionPreflightAttachment {
+  /** Display name used in warning copy (the chip's filename). */
+  readonly name: string;
+  /** Raw byte size — what the runner's budget counts. */
+  readonly sizeBytes: number;
+  /** Declared/detected MIME type (`AttachmentEntry.contentType`). */
+  readonly contentType: string;
+}
+
+/**
+ * Why an image will not be viewable inline — the client-assessable subset
+ * of the runner's `VisionDegradedReason` vocabulary, same spellings.
+ */
+export type VisionPreflightReason =
+  /** Raw bytes exceed the per-image cap; a smaller re-export would fix it. */
+  | "too_large"
+  /** Image is fine but the turn's total/count budget is already spent. */
+  | "budget_exhausted"
+  /** The selected model is explicitly assessed as unable to see images. */
+  | "model_no_vision";
+
+/** One image the runner is predicted to degrade, and why. */
+export interface VisionPreflightWarning {
+  readonly name: string;
+  readonly sizeBytes: number;
+  readonly reason: VisionPreflightReason;
+}
+
+/** Result of {@link assessVisionPreflight}. */
+export interface VisionPreflight {
+  /** Predicted-degraded images in attachment order. Empty = all clear. */
+  readonly warnings: readonly VisionPreflightWarning[];
+  /**
+   * True when the selected model is explicitly blind (`vision: false`)
+   * and at least one image is attached. When set, every image warning
+   * carries `model_no_vision` — resending smaller images cannot help, so
+   * warning UI should lead with the model, not the files.
+   */
+  readonly modelCannotSeeImages: boolean;
+}
+
+const NO_WARNINGS: VisionPreflight = { warnings: [], modelCannotSeeImages: false };
+
+/** Options for {@link assessVisionPreflight}. */
+export interface AssessVisionPreflightOptions {
+  /**
+   * The model the turn will run on. `undefined` (unknown/still loading)
+   * disables the capability verdict, never the byte assessment.
+   */
+  readonly model?: ModelInfo | undefined;
+  /**
+   * The advertised byte budget from `useModelRegistry().visionLimits`.
+   * `undefined` (older server, still loading) disables the byte
+   * assessment, never the capability verdict.
+   */
+  readonly limits?: VisionLimits | undefined;
+}
+
+/**
+ * Predict which attached images the runner will degrade this turn.
+ *
+ * Pure and deterministic — safe to call in render (memoized by callers).
+ * Non-image attachments never warn. The byte assessment replicates the
+ * runner's sequential admission: an image over the per-image cap is
+ * degraded WITHOUT consuming budget; remaining images are admitted in
+ * order until the count or total-byte budget is exhausted.
+ */
+export function assessVisionPreflight(
+  attachments: readonly VisionPreflightAttachment[],
+  options?: AssessVisionPreflightOptions,
+): VisionPreflight {
+  const candidates = attachments.filter((a) =>
+    VISION_CANDIDATE_TYPES.has(a.contentType.toLowerCase()),
+  );
+  if (candidates.length === 0) return NO_WARNINGS;
+
+  // The capability gate short-circuits the byte math: on an explicitly
+  // blind model no image is deliverable at any size, and mixing byte
+  // warnings in would wrongly suggest a smaller resend could help.
+  if (options?.model?.visionCapability === false) {
+    return {
+      warnings: candidates.map((a) => ({
+        name: a.name,
+        sizeBytes: a.sizeBytes,
+        reason: "model_no_vision",
+      })),
+      modelCannotSeeImages: true,
+    };
+  }
+
+  const limits = options?.limits;
+  if (!limits) return NO_WARNINGS;
+
+  const warnings: VisionPreflightWarning[] = [];
+  let acceptedCount = 0;
+  let acceptedBytes = 0;
+
+  for (const image of candidates) {
+    if (image.sizeBytes > limits.maxImageBytes) {
+      warnings.push({ name: image.name, sizeBytes: image.sizeBytes, reason: "too_large" });
+      continue;
+    }
+    if (
+      acceptedCount >= limits.maxImages ||
+      acceptedBytes + image.sizeBytes > limits.maxTotalBytes
+    ) {
+      warnings.push({
+        name: image.name,
+        sizeBytes: image.sizeBytes,
+        reason: "budget_exhausted",
+      });
+      continue;
+    }
+    acceptedCount += 1;
+    acceptedBytes += image.sizeBytes;
+  }
+
+  return warnings.length === 0
+    ? NO_WARNINGS
+    : { warnings, modelCannotSeeImages: false };
+}
+
+/** Options for {@link visionPreflightMessage}. */
+export interface VisionPreflightMessageOptions {
+  /** The advertised budget — names the caps in the copy when present. */
+  readonly limits?: VisionLimits | undefined;
+  /** Display name of the selected model, for the capability wording. */
+  readonly modelDisplayName?: string | undefined;
+}
+
+/**
+ * One-line human copy for a {@link VisionPreflight} — the client-side twin
+ * of the runner's `visionDisclosureLines`, worded for BEFORE the turn
+ * ("will arrive as a file") instead of after ("was not viewable").
+ *
+ * Returns `null` when there is nothing to warn about. Copy rules:
+ * - a blind model leads with the model, never the files — no smaller
+ *   resend can help, so file-size advice would be dishonest;
+ * - `too_large` names the files (up to two, then a count) and the actual
+ *   cap, so the fix — export smaller — is self-evident;
+ * - `budget_exhausted` explains the per-turn budget, the only fix being
+ *   fewer images this turn.
+ */
+export function visionPreflightMessage(
+  preflight: VisionPreflight,
+  options?: VisionPreflightMessageOptions,
+): string | null {
+  if (preflight.warnings.length === 0) return null;
+
+  if (preflight.modelCannotSeeImages) {
+    const model = options?.modelDisplayName ?? "The selected model";
+    return `${model} can't view images — attached images will reach the agent as files only.`;
+  }
+
+  const tooLarge = preflight.warnings.filter((w) => w.reason === "too_large");
+  const exhausted = preflight.warnings.filter((w) => w.reason === "budget_exhausted");
+  const parts: string[] = [];
+
+  if (tooLarge.length > 0) {
+    const capPhrase = options?.limits
+      ? `the ${formatFileSize(options.limits.maxImageBytes)} inline-image limit`
+      : "the inline-image size limit";
+    if (tooLarge.length === 1) {
+      const w = tooLarge[0];
+      parts.push(
+        `${w.name} (${formatFileSize(w.sizeBytes)}) exceeds ${capPhrase} and will reach the agent as a file, not an image`,
+      );
+    } else if (tooLarge.length === 2) {
+      parts.push(
+        `${tooLarge[0].name} and ${tooLarge[1].name} exceed ${capPhrase} and will reach the agent as files, not images`,
+      );
+    } else {
+      parts.push(
+        `${tooLarge.length} images exceed ${capPhrase} and will reach the agent as files, not images`,
+      );
+    }
+  }
+
+  if (exhausted.length > 0) {
+    const budget = options?.limits
+      ? `this turn's inline-image budget (${options.limits.maxImages} images, ${formatFileSize(options.limits.maxTotalBytes)} total)`
+      : "this turn's inline-image budget";
+    parts.push(
+      exhausted.length === 1
+        ? `${exhausted[0].name} is over ${budget} and will reach the agent as a file`
+        : `${exhausted.length} images are over ${budget} and will reach the agent as files`,
+    );
+  }
+
+  return parts.length === 0 ? null : `${parts.join("; ")}.`;
+}

package/src/billing/AutoRechargeCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useId } from "react";
 import { cn } from "@stigmer/theme";
 import type { AutoRechargeConfig } from "@stigmer/protos/ai/stigmer/billing/v1/billing_account_pb";
 import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
@@ -64,6 +64,7 @@ export function AutoRechargeCard({
   onSaved,
   className,
 }: AutoRechargeCardProps) {
+  const baseId = useId();
   const { setConfig, isSubmitting, error, clearError } =
     useSetAutoRechargeConfig();
 
@@ -168,7 +169,7 @@ export function AutoRechargeCard({
       {canConfigure && (
         <div className="stg:mt-4 stg:space-y-3">
           <DollarInput
-            id="ar-threshold"
+            id={`${baseId}-threshold`}
             label="When balance drops below"
             value={threshold}
             onChange={setThreshold}
@@ -176,7 +177,7 @@ export function AutoRechargeCard({
             placeholder="e.g. 5"
           />
           <DollarInput
-            id="ar-amount"
+            id={`${baseId}-amount`}
             label="Recharge amount"
             value={amount}
             onChange={setAmount}
@@ -184,7 +185,7 @@ export function AutoRechargeCard({
             placeholder="e.g. 50"
           />
           <DollarInput
-            id="ar-cap"
+            id={`${baseId}-cap`}
             label="Monthly cap"
             value={cap}
             onChange={setCap}

package/src/billing/BillingSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
@@ -53,14 +53,15 @@ export function BillingSection({
   onDismissCheckoutSuccess,
   className,
 }: BillingSectionProps) {
+  const headingId = useId();
   const { activeOrg } = useOrg();
   const mode = useDeploymentMode();
   const orgId = activeOrg?.metadata?.id ?? "";
 
   return (
-    <section aria-labelledby="billing-heading" className={className}>
+    <section aria-labelledby={headingId} className={className}>
       <h2
-        id="billing-heading"
+        id={headingId}
         className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Billing

package/src/channel/ChannelConversationsDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useCallback, useId, useRef } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { MessageSquare, User, X } from "lucide-react";
 import { cn } from "@stigmer/theme";
@@ -69,6 +69,7 @@ export function ChannelConversationsDialog({
   modal = true,
 }: ChannelConversationsDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
 
   const handleClose = useCallback(() => {
     dialogRef.current?.close();
@@ -97,13 +98,14 @@ export function ChannelConversationsDialog({
       onClose={handleClose}
       className={cn(
         "stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="channel-conversations-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so each opening fetches fresh. */}
       {open && (
         <ChannelConversationsDialogBody
+          titleId={titleId}
           channel={channel}
           sessionHref={sessionHref}
           onClose={handleClose}
@@ -114,10 +116,12 @@ export function ChannelConversationsDialog({
 }
 
 function ChannelConversationsDialogBody({
+  titleId,
   channel,
   sessionHref,
   onClose,
 }: {
+  readonly titleId: string;
   readonly channel: AgentChannel;
   readonly sessionHref?: (sessionId: string) => string;
   readonly onClose: () => void;
@@ -133,7 +137,7 @@ function ChannelConversationsDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
         <div className="stg:min-w-0">
           <h2
-            id="channel-conversations-title"
+            id={titleId}
             className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Sessions