@opengeni/react 1.2.1-canary.37222965366001 → 1.4.0

package/src/timeline/retained-loaders.ts

@@ -0,0 +1,86 @@
+import type { OpenGeniClient, RetainedArtifactReference } from "@opengeni/sdk";
+import type {
+  RetainedArtifactLoader,
+  RetainedScreenshotLoader,
+  VideoArtifactPlaybackLoader,
+} from "./registry";
+
+/** SDK methods the workspace retained-artifact loader needs. */
+export type RetainedArtifactLoaderClient = Pick<
+  OpenGeniClient,
+  "createRetainedArtifactDownloadUrl" | "downloadRetainedArtifact"
+>;
+
+/** SDK method the session retained-screenshot loader needs. */
+export type RetainedScreenshotLoaderClient = Pick<OpenGeniClient, "downloadRetainedScreenshot">;
+
+/** SDK method the generated-video playback loader needs. */
+export type RetainedVideoLoaderClient = Pick<OpenGeniClient, "createVideoArtifactPlaybackSource">;
+
+/**
+ * Bind permanent retained-artifact retrieval (generated images, published
+ * files) to one authenticated workspace, for `MessageTimeline`'s
+ * `loadRetainedArtifact`. Images get a short-lived URL; files are assembled
+ * from verified byte ranges.
+ */
+export function createWorkspaceRetainedArtifactLoader(
+  client: RetainedArtifactLoaderClient,
+  workspaceId: string,
+): RetainedArtifactLoader {
+  return async (artifact: RetainedArtifactReference, signal: AbortSignal) => {
+    if (artifact.kind === "file") {
+      const download = await client.downloadRetainedArtifact(workspaceId, artifact, { signal });
+      return download.bytes;
+    }
+    const download = await client.createRetainedArtifactDownloadUrl(workspaceId, artifact, {
+      signal,
+    });
+    return { url: download.url };
+  };
+}
+
+/**
+ * Bind the authenticated screenshot downloader to one workspace and session,
+ * for `MessageTimeline`'s `loadRetainedScreenshot`. Fetched metadata must match
+ * the timeline receipt before bytes are handed to React; errors deliberately
+ * contain no storage locator or content.
+ */
+export function createSessionRetainedScreenshotLoader(
+  client: RetainedScreenshotLoaderClient,
+  workspaceId: string,
+  sessionId: string,
+): RetainedScreenshotLoader {
+  return async (artifact: RetainedArtifactReference, signal: AbortSignal) => {
+    const download = await client.downloadRetainedScreenshot(
+      workspaceId,
+      sessionId,
+      artifact.artifactId,
+      { signal },
+    );
+    if (!download.metadata.available || !download.bytes) return null;
+    if (
+      download.metadata.artifactId !== artifact.artifactId ||
+      download.metadata.kind !== artifact.kind ||
+      download.metadata.contentType !== artifact.contentType ||
+      download.metadata.originalBytes !== artifact.originalBytes ||
+      download.metadata.sha256 !== artifact.sha256 ||
+      download.metadata.dimensions?.width !== artifact.dimensions?.width ||
+      download.metadata.dimensions?.height !== artifact.dimensions?.height
+    ) {
+      throw new Error("Retained screenshot receipt verification failed");
+    }
+    return download.bytes;
+  };
+}
+
+/**
+ * Bind expiring generated-video playback sources to one authenticated
+ * workspace, for `MessageTimeline`'s `loadVideoArtifactPlayback`.
+ */
+export function createWorkspaceRetainedVideoLoader(
+  client: RetainedVideoLoaderClient,
+  workspaceId: string,
+): VideoArtifactPlaybackLoader {
+  return async (artifactId: string, signal: AbortSignal) =>
+    await client.createVideoArtifactPlaybackSource(workspaceId, artifactId, { signal });
+}

package/src/timeline/tool-display-name.ts

@@ -30,7 +30,11 @@ export function toolMatchesLeaf(wireName: string, leaf: string): boolean {
  */
 export function toolDisplayName(name: string, display?: ToolDisplayMetadata): string {
   if (!display && /^[a-f0-9]{64}$/.test(name)) return "Tool call";
-  const phrase = (display?.toolName ?? mcpToolLeaf(name)).replace(/[_-]+/g, " ").trim();
+  // "batch modify messages" → "Modify messages": batching is transport, not the action.
+  const phrase = (display?.toolName ?? mcpToolLeaf(name))
+    .replace(/[_-]+/g, " ")
+    .trim()
+    .replace(/^batch\s+(?=\S)/i, "");
   const title =
     display?.title ?? (phrase ? phrase.charAt(0).toUpperCase() + phrase.slice(1) : name);
   return display?.accountLabel ? `${title} — ${display.accountLabel}` : title;

package/src/timeline/tool-renderers.tsx

@@ -1,3 +1,6 @@
+import { useHasToolReview, useRecordedToolReview } from "../components/tool-review-history";
+import { ToolActionReviewCard } from "../components/tool-action-review";
+import type { ToolReviewStatus } from "@opengeni/sdk";
 import { KnowledgeReceiptRow } from "./knowledge-receipt";
 import { defaultUrlTransform } from "react-markdown";
 import { isRetainedImageContentType, useRetainedImageObjectUrl } from "./retained-image";
@@ -587,7 +590,10 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
   // every transport.
   const functionAction: ComputerAction | undefined =
     !raw.action && item.name.startsWith("computer_") && item.name !== "computer_call"
-      ? { type: item.name.slice("computer_".length), ...asComputerArgs(item.arguments) }
+      ? {
+          type: item.name.slice("computer_".length),
+          ...asComputerArgs(item.arguments),
+        }
       : undefined;
   const action = raw.action ?? functionAction;
   const actions = raw.actions ?? (action ? [action] : []);
@@ -2333,6 +2339,76 @@ function RunOnRenderer({ item }: ToolRendererProps) {
  * JSON stays in the expandable body only.
  */
 function GenericRenderer({ item }: ToolRendererProps) {
+  const reviewed = useHasToolReview(item.callId);
+  if (reviewed && item.callId) return <ReviewedGenericRenderer item={item} />;
+  return <UnreviewedGenericRenderer item={item} />;
+}
+
+/** Settled review states earn one quiet gutter word; success and waiting stay chip-free. */
+const REVIEW_CHIP: Partial<Record<ToolReviewStatus, DisclosureChip>> = {
+  rejected: { tone: "interrupted", text: "declined" },
+  cancelled: { tone: "interrupted", text: "not run" },
+  expired: { tone: "interrupted", text: "expired" },
+  stale: { tone: "interrupted", text: "not run" },
+  revoked: { tone: "interrupted", text: "not run" },
+  blocked: { tone: "interrupted", text: "blocked" },
+  unknown: { tone: "bad", text: "outcome unknown" },
+  partial: { tone: "bad", text: "partly done" },
+  failed: { tone: "bad", text: "failed" },
+};
+
+/**
+ * A call that went through approval keeps the ordinary row shape, titled with
+ * what was approved. The expanded body is the saved review plus the result.
+ */
+function ReviewedGenericRenderer({ item }: ToolRendererProps) {
+  const { review, onViewDetails } = useRecordedToolReview(item.callId);
+  if (!review) return <UnreviewedGenericRenderer item={item} />;
+  const icon = <GenericToolIcon name={item.name} />;
+  const waiting = review.status === "pending";
+  const running =
+    !waiting &&
+    (review.status === "executing" || review.status === "approved") &&
+    item.status === "running";
+  const { text: outText, isError } = unwrapMcpOutput(item.output);
+  const chip =
+    REVIEW_CHIP[review.status] ??
+    (isError && !running && !waiting ? ({ tone: "bad", text: "error" } as const) : undefined);
+  return (
+    <ActivityDisclosure
+      icon={icon}
+      iconTone={chip?.tone === "bad" ? "failed" : waiting ? "accent" : "muted"}
+      title={review.title}
+      running={running}
+      chip={chip}
+      preview={
+        waiting ? (
+          "Waiting for your approval"
+        ) : running ? (
+          <RunningPreview>Running…</RunningPreview>
+        ) : (
+          (review.accountLabel ?? undefined)
+        )
+      }
+    >
+      <div className="py-1" data-approval-id={item.callId} data-review-origin="history">
+        <ToolActionReviewCard
+          bare
+          review={{ ...review, availableActions: [] }}
+          onViewDetails={onViewDetails}
+        />
+      </div>
+      {outText ? <PayloadBlock label="Result" value={outText} failed={isError} /> : null}
+    </ActivityDisclosure>
+  );
+}
+
+/** The runtime's exact refusal for a tool whose effective permission is Block. */
+const BLOCKED_OUTPUT = /Connector action was not executed: blocked\b/;
+/** The runtime's refusal to guess whether an approved action ran. */
+const UNCERTAIN_OUTPUT = /Connector action outcome is uncertain\b/;
+
+function UnreviewedGenericRenderer({ item }: ToolRendererProps) {
   const running = item.status === "running";
   const args = parseToolArgs(item.arguments);
   const display = toolDisplayName(item.name, item.display);
@@ -2356,6 +2432,42 @@ function GenericRenderer({ item }: ToolRendererProps) {
   }
 
   const { text: outText, isError } = unwrapMcpOutput(item.output);
+  // A permission Block is a decision, not a tool failure: say so plainly instead
+  // of the generic "error occurred, please try again" wrapper.
+  if (isError && BLOCKED_OUTPUT.test(outText)) {
+    return (
+      <ActivityDisclosure
+        icon={icon}
+        iconTone="muted"
+        title={display}
+        chip={{ tone: "interrupted", text: "blocked" }}
+        preview="Blocked by your permission settings"
+      >
+        <p className="m-0 py-1 text-og-sm text-og-fg-muted">
+          Your permission settings block this action, so it did not run. You can change this in the
+          integration's tool permissions.
+        </p>
+        <PayloadBlock label="Arguments" value={args} />
+      </ActivityDisclosure>
+    );
+  }
+  // An interrupted approved action may have run. Never invite a blind retry.
+  if (isError && UNCERTAIN_OUTPUT.test(outText)) {
+    return (
+      <ActivityDisclosure
+        icon={icon}
+        iconTone="failed"
+        title={display}
+        chip={{ tone: "bad", text: "outcome unknown" }}
+        preview="It may have run"
+      >
+        <p className="m-0 py-1 text-og-sm text-og-fg-muted">
+          This action may have run. Check the result in the connected app before trying again.
+        </p>
+        <PayloadBlock label="Arguments" value={args} />
+      </ActivityDisclosure>
+    );
+  }
   // Cancelled is NOT an error — a user-cancelled tool should not surface the red
   // error chip even if the output payload carries an isError flag (the error may be
   // a consequence of the cancellation, not the tool's own failure).
@@ -2536,25 +2648,41 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "name", name: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "name", name: "apply_patch", render: ApplyPatchRenderer },
   { match: "name", name: "computer_call", render: ComputerCallRenderer },
-  { match: "name", name: "browser_screenshot", render: BrowserScreenshotRenderer },
+  {
+    match: "name",
+    name: "browser_screenshot",
+    render: BrowserScreenshotRenderer,
+  },
   { match: "name", name: "browser_observe", render: BrowserScreenshotRenderer },
   { match: "name", name: "browser_act", render: BrowserScreenshotRenderer },
   // Function-mode computer tools (codex / chat-wire transports).
   { match: "name", name: "computer_screenshot", render: ComputerCallRenderer },
   { match: "name", name: "computer_click", render: ComputerCallRenderer },
-  { match: "name", name: "computer_double_click", render: ComputerCallRenderer },
+  {
+    match: "name",
+    name: "computer_double_click",
+    render: ComputerCallRenderer,
+  },
   { match: "name", name: "computer_move", render: ComputerCallRenderer },
   { match: "name", name: "computer_scroll", render: ComputerCallRenderer },
   { match: "name", name: "computer_type", render: ComputerCallRenderer },
   { match: "name", name: "computer_keypress", render: ComputerCallRenderer },
   { match: "name", name: "computer_drag", render: ComputerCallRenderer },
   { match: "name", name: "web_search_call", render: WebSearchRenderer },
-  { match: "name", name: "image_generation_call", render: GeneratedImageRenderer },
+  {
+    match: "name",
+    name: "image_generation_call",
+    render: GeneratedImageRenderer,
+  },
   { match: "name", name: "generate_image", render: GeneratedImageRenderer },
   { match: "name", name: "generate_video", render: GeneratedVideoRenderer },
   { match: "name", name: "tool_search", render: ToolSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
-  { match: "name", name: "sandbox_file_publish", render: SandboxFilePublishRenderer },
+  {
+    match: "name",
+    name: "sandbox_file_publish",
+    render: SandboxFilePublishRenderer,
+  },
   {
     match: "name",
     name: "artifacts_create",
@@ -2579,13 +2707,25 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
     render: SiteArtifactRenderer,
     matchPrefixedLeaf: false,
   },
-  { match: "name", name: "environment_set_variable", render: SecretSetRenderer },
-  { match: "name", name: "variable_set_set_variable", render: SecretSetRenderer },
+  {
+    match: "name",
+    name: "environment_set_variable",
+    render: SecretSetRenderer,
+  },
+  {
+    match: "name",
+    name: "variable_set_set_variable",
+    render: SecretSetRenderer,
+  },
   { match: "name", name: "search_documents", render: DocsSearchRenderer },
   { match: "name", name: "knowledge_search", render: DocsSearchRenderer },
   { match: "name", name: "memory_propose", render: MemoryProposeRenderer },
   { match: "name", name: "set_session_title", render: SetSessionTitleRenderer },
-  { match: "name", name: "set_other_session_title", render: SetSessionTitleRenderer },
+  {
+    match: "name",
+    name: "set_other_session_title",
+    render: SetSessionTitleRenderer,
+  },
 ];
 
 /** The built-in tool renderer registry: every first-party tool plus a fallback. */

package/styles/compiled.css

@@ -698,7 +698,7 @@
   --_og-color-primary-hover: var(--og-color-primary-hover, var(--og-color-primary));
   --_og-color-diff-add-bg: var(--og-color-diff-add-bg, var(--og-color-status-idle));
   --_og-color-diff-del-bg: var(--og-color-diff-del-bg, var(--og-color-status-failed));
-  --_og-shadow-glow: var(--og-shadow-glow, 0 0 24px var(--og-color-accent));
+  --_og-shadow-glow: var(--og-shadow-glow, 0 0 24px color-mix(in oklch, var(--og-color-accent) 10%, transparent));
   --_og-session-chrome-surface: var(--og-session-chrome-surface, var(--og-color-surface-2));
   --_og-session-chrome-surface-open: var(--og-session-chrome-surface-open, var(--og-color-surface-2));
   --_og-session-chrome-border: var(--og-session-chrome-border, var(--og-color-border));
@@ -1786,6 +1786,9 @@
 :where(.og-root).mt-5,:where(.og-root) .mt-5 {
     margin-top: calc(var(--spacing) * 5);
   }
+:where(.og-root).mt-\[0\.55em\],:where(.og-root) .mt-\[0\.55em\] {
+    margin-top: 0.55em;
+  }
 :where(.og-root).mt-auto,:where(.og-root) .mt-auto {
     margin-top: auto;
   }
@@ -1828,6 +1831,9 @@
 :where(.og-root).mb-3,:where(.og-root) .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+:where(.og-root).mb-4,:where(.og-root) .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
 :where(.og-root).ml-0\.5,:where(.og-root) .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
@@ -1993,6 +1999,9 @@
 :where(.og-root).h-2\.5,:where(.og-root) .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
+:where(.og-root).h-3,:where(.og-root) .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
 :where(.og-root).h-3\.5,:where(.og-root) .h-3\.5 {
     height: calc(var(--spacing) * 3.5);
   }
@@ -2065,9 +2074,6 @@
 :where(.og-root).max-h-40,:where(.og-root) .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
-:where(.og-root).max-h-48,:where(.og-root) .max-h-48 {
-    max-height: calc(var(--spacing) * 48);
-  }
 :where(.og-root).max-h-56,:where(.og-root) .max-h-56 {
     max-height: calc(var(--spacing) * 56);
   }
@@ -2173,9 +2179,15 @@
 :where(.og-root).w-1\.5,:where(.og-root) .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+:where(.og-root).w-1\/2,:where(.og-root) .w-1\/2 {
+    width: calc(1 / 2 * 100%);
+  }
 :where(.og-root).w-3,:where(.og-root) .w-3 {
     width: calc(var(--spacing) * 3);
   }
+:where(.og-root).w-3\/4,:where(.og-root) .w-3\/4 {
+    width: calc(3 / 4 * 100%);
+  }
 :where(.og-root).w-5,:where(.og-root) .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -2356,6 +2368,9 @@
 :where(.og-root).min-w-4,:where(.og-root) .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+:where(.og-root).min-w-8,:where(.og-root) .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
 :where(.og-root).min-w-10,:where(.og-root) .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
@@ -2407,6 +2422,9 @@
 :where(.og-root).grow,:where(.og-root) .grow {
     flex-grow: 1;
   }
+:where(.og-root).basis-48,:where(.og-root) .basis-48 {
+    flex-basis: calc(var(--spacing) * 48);
+  }
 :where(.og-root).border-collapse,:where(.og-root) .border-collapse {
     border-collapse: collapse;
   }
@@ -2554,9 +2572,6 @@
 :where(.og-root).grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\],:where(.og-root) .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0,1fr) minmax(0,1fr);
   }
-:where(.og-root).grid-cols-\[minmax\(5\.5rem\,max-content\)_minmax\(0\,1fr\)\],:where(.og-root) .grid-cols-\[minmax\(5\.5rem\,max-content\)_minmax\(0\,1fr\)\] {
-    grid-template-columns: minmax(5.5rem,max-content) minmax(0,1fr);
-  }
 :where(.og-root).flex-col,:where(.og-root) .flex-col {
     flex-direction: column;
   }
@@ -2731,14 +2746,6 @@
       }
     }
   }
-:where(.og-root).divide-og-status-waiting\/20,:where(.og-root) .divide-og-status-waiting\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: var(--og-color-status-waiting);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--og-color-status-waiting) 20%, transparent);
-      }
-    }
-  }
 :where(.og-root).self-center,:where(.og-root) .self-center {
     align-self: center;
   }
@@ -2858,6 +2865,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+:where(.og-root).border-y,:where(.og-root) .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
 :where(.og-root).border-t,:where(.og-root) .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -3283,6 +3294,12 @@
       background-color: color-mix(in oklab, var(--og-color-fg) 5%, transparent);
     }
   }
+:where(.og-root).bg-og-fg\/8,:where(.og-root) .bg-og-fg\/8 {
+    background-color: var(--og-color-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--og-color-fg) 8%, transparent);
+    }
+  }
 :where(.og-root).bg-og-primary,:where(.og-root) .bg-og-primary {
     background-color: var(--og-color-primary);
   }
@@ -3750,6 +3767,9 @@
 :where(.og-root).pr-1,:where(.og-root) .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
+:where(.og-root).pr-2,:where(.og-root) .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
 :where(.og-root).pr-2\.5,:where(.og-root) .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
@@ -5288,6 +5308,13 @@
       }
     }
   }
+:where(.og-root).hover\:decoration-current,:where(.og-root) .hover\:decoration-current {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-color: currentcolor;
+      }
+    }
+  }
 :where(.og-root).hover\:opacity-80,:where(.og-root) .hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {
@@ -5997,6 +6024,11 @@
       grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 11rem;
     }
   }
+:where(.og-root).sm\:grid-cols-\[minmax\(0\,9rem\)_minmax\(0\,1fr\)\],:where(.og-root) .sm\:grid-cols-\[minmax\(0\,9rem\)_minmax\(0\,1fr\)\] {
+    @media (width >= 40rem) {
+      grid-template-columns: minmax(0,9rem) minmax(0,1fr);
+    }
+  }
 :where(.og-root).sm\:flex-row,:where(.og-root) .sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;
@@ -6074,6 +6106,11 @@
       padding-block: calc(var(--spacing) * 2);
     }
   }
+:where(.og-root).sm\:pt-px,:where(.og-root) .sm\:pt-px {
+    @media (width >= 40rem) {
+      padding-top: 1px;
+    }
+  }
 :where(.og-root).sm\:pb-2\.5,:where(.og-root) .sm\:pb-2\.5 {
     @media (width >= 40rem) {
       padding-bottom: calc(var(--spacing) * 2.5);
@@ -6084,6 +6121,23 @@
       padding-left: calc(var(--spacing) * 4);
     }
   }
+:where(.og-root).sm\:pl-\[3\.75rem\],:where(.og-root) .sm\:pl-\[3\.75rem\] {
+    @media (width >= 40rem) {
+      padding-left: 3.75rem;
+    }
+  }
+:where(.og-root).sm\:text-og-sm,:where(.og-root) .sm\:text-og-sm {
+    @media (width >= 40rem) {
+      font-size: var(--og-font-size-sm);
+      line-height: var(--tw-leading, var(--og-line-height-sm));
+    }
+  }
+:where(.og-root).sm\:text-og-sm,:where(.og-root) .sm\:text-og-sm {
+    @media (width >= 40rem) {
+      --og-component-font-size: var(--og-font-size-sm);
+      --og-component-line-height: var(--og-line-height-sm);
+    }
+  }
 :where(.og-root).md\:px-4,:where(.og-root) .md\:px-4 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 4);
@@ -6525,6 +6579,16 @@
       margin-block: calc(var(--spacing) * 1);
     }
   }
+:where(.og-root).\[\@media\(pointer\:coarse\)\]\:min-h-11,:where(.og-root) .\[\@media\(pointer\:coarse\)\]\:min-h-11 {
+    @media (pointer:coarse) {
+      min-height: calc(var(--spacing) * 11);
+    }
+  }
+:where(.og-root).\[\@media\(pointer\:coarse\)\]\:min-w-11,:where(.og-root) .\[\@media\(pointer\:coarse\)\]\:min-w-11 {
+    @media (pointer:coarse) {
+      min-width: calc(var(--spacing) * 11);
+    }
+  }
 :where(.og-root).\[tr\:last-child\>\&\]\:border-b-0,:where(.og-root) .\[tr\:last-child\>\&\]\:border-b-0 {
     tr:last-child>& {
       border-bottom-style: var(--tw-border-style);

package/styles/tokens.css

@@ -165,7 +165,7 @@
      draws a crisp edge via `focus-within:border-og-accent/50`; the old
      `0 0 0 1px` ring sat flush against that border and read as a doubled
      hairline, so the glow is purely a faint diffuse grey halo. */
-  --og-shadow-glow: 0 0 24px var(--og-color-accent);
+  --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 10%, transparent);
 
   /* Session chrome — override on `.og-session-chrome` (or an ancestor) to rebrand.
      Defaults stay quiet: soft surface, short motion, no gold shout. */