@opengeni/react 0.42.1 → 0.44.2

package/src/timeline/parsers.ts

@@ -210,40 +210,222 @@ export function v4aToGitFileDiff(op: ApplyPatchOperation): GitFileDiff {
   };
 }
 
+const BEGIN_PATCH = "*** Begin Patch";
+const END_PATCH = "*** End Patch";
+const ADD_FILE = "*** Add File: ";
+const DELETE_FILE = "*** Delete File: ";
+const UPDATE_FILE = "*** Update File: ";
+const MOVE_TO = "*** Move to: ";
+
+const APPLY_PATCH_OP_TYPES = new Set(["create_file", "update_file", "delete_file"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/** Freeform / `{ patch }` / command payloads — tolerate leading whitespace. */
+function freeformApplyPatchOps(rawPatch: string): ApplyPatchOperation[] {
+  return parseFreeformApplyPatch(rawPatch.trimStart());
+}
+
+function asApplyPatchOperation(value: unknown): ApplyPatchOperation | null {
+  if (!isRecord(value)) return null;
+  if (typeof value.type !== "string" || !APPLY_PATCH_OP_TYPES.has(value.type)) {
+    return null;
+  }
+  if (typeof value.path !== "string" || !value.path) {
+    return null;
+  }
+  const op: ApplyPatchOperation = {
+    type: value.type as ApplyPatchOperation["type"],
+    path: value.path,
+  };
+  if (typeof value.diff === "string") op.diff = value.diff;
+  if (typeof value.moveTo === "string" && value.moveTo.length > 0) op.moveTo = value.moveTo;
+  return op;
+}
+
+function parseStructuredOperations(payloads: unknown[]): ApplyPatchOperation[] {
+  if (payloads.length === 0) return [];
+  const operations: ApplyPatchOperation[] = [];
+  for (const payload of payloads) {
+    const op = asApplyPatchOperation(payload);
+    if (!op) return [];
+    operations.push(op);
+  }
+  return operations;
+}
+
 /**
- * Extract the `apply_patch` operations from a provider-native tool item's `raw`
- * payload, normalizing the two wire shapes (`raw.operations[]` for a multi-file
- * patch, `raw.operation` for a single op). The single owner of this shape so the
- * renderer and the turn-summary facet counter never drift.
+ * Mirror of `@openai/agents-core` freeform `*** Begin Patch` → ops. Kept here so
+ * the timeline can render Codex function-tool apply_patch without importing the
+ * server SDK package.
  */
-export function applyPatchOps(raw: unknown): ApplyPatchOperation[] {
-  const r = (raw ?? {}) as {
-    operation?: ApplyPatchOperation;
-    operations?: ApplyPatchOperation[];
+export function parseFreeformApplyPatch(rawPatch: string): ApplyPatchOperation[] {
+  const lines = rawPatch.split(/\r?\n/);
+  if (lines.at(-1) === "") lines.pop();
+  if (lines[0] !== BEGIN_PATCH) return [];
+  if (lines.length < 2 || lines.at(-1) !== END_PATCH) return [];
+
+  const operations: ApplyPatchOperation[] = [];
+  let index = 1;
+  while (index < lines.length - 1) {
+    const line = lines[index]!;
+    let parsed: { operation: ApplyPatchOperation; nextIndex: number } | { error: true } | null =
+      null;
+    if (line.startsWith(ADD_FILE)) parsed = parseAddFilePatch(lines, index);
+    else if (line.startsWith(DELETE_FILE)) parsed = parseDeleteFilePatch(lines, index);
+    else if (line.startsWith(UPDATE_FILE)) parsed = parseUpdateFilePatch(lines, index);
+    else return [];
+    if (!parsed || "error" in parsed) return [];
+    operations.push(parsed.operation);
+    index = parsed.nextIndex;
+  }
+  // Match the SDK: Begin/End with no file ops is not a valid patch.
+  return operations.length > 0 ? operations : [];
+}
+
+function parsePatchHeader(line: string, prefix: string): string | null {
+  const path = line.slice(prefix.length).trim();
+  return path || null;
+}
+
+function isFileOperationHeader(line: string): boolean {
+  return line.startsWith(ADD_FILE) || line.startsWith(DELETE_FILE) || line.startsWith(UPDATE_FILE);
+}
+
+function joinDiff(lines: string[]): string {
+  return `${lines.join("\n")}\n`;
+}
+
+function parseAddFilePatch(
+  lines: string[],
+  index: number,
+): { operation: ApplyPatchOperation; nextIndex: number } | { error: true } {
+  const path = parsePatchHeader(lines[index]!, ADD_FILE);
+  if (!path) return { error: true };
+  index += 1;
+  const diffLines: string[] = [];
+  while (index < lines.length - 1 && !isFileOperationHeader(lines[index]!)) {
+    const line = lines[index]!;
+    if (!line.startsWith("+")) return { error: true };
+    diffLines.push(line);
+    index += 1;
+  }
+  if (diffLines.length === 0) return { error: true };
+  return {
+    operation: { type: "create_file", path, diff: joinDiff(diffLines) },
+    nextIndex: index,
   };
-  if (Array.isArray(r.operations)) {
-    return r.operations;
+}
+
+function parseDeleteFilePatch(
+  lines: string[],
+  index: number,
+): { operation: ApplyPatchOperation; nextIndex: number } | { error: true } {
+  const path = parsePatchHeader(lines[index]!, DELETE_FILE);
+  if (!path) return { error: true };
+  index += 1;
+  if (index < lines.length - 1 && !isFileOperationHeader(lines[index]!)) {
+    return { error: true };
+  }
+  return { operation: { type: "delete_file", path }, nextIndex: index };
+}
+
+function parseUpdateFilePatch(
+  lines: string[],
+  index: number,
+): { operation: ApplyPatchOperation; nextIndex: number } | { error: true } {
+  const path = parsePatchHeader(lines[index]!, UPDATE_FILE);
+  if (!path) return { error: true };
+  index += 1;
+  let moveTo: string | undefined;
+  if (index < lines.length - 1 && lines[index]!.startsWith(MOVE_TO)) {
+    const parsedMoveTo = parsePatchHeader(lines[index]!, MOVE_TO);
+    if (!parsedMoveTo) return { error: true };
+    moveTo = parsedMoveTo;
+    index += 1;
+  }
+  const diffLines: string[] = [];
+  while (index < lines.length - 1 && !isFileOperationHeader(lines[index]!)) {
+    diffLines.push(lines[index]!);
+    index += 1;
+  }
+  if (diffLines.length === 0 && !moveTo) return { error: true };
+  return {
+    operation: {
+      type: "update_file",
+      path,
+      diff: diffLines.length > 0 ? joinDiff(diffLines) : "",
+      ...(moveTo ? { moveTo } : {}),
+    },
+    nextIndex: index,
+  };
+}
+
+/**
+ * Normalize every apply_patch payload the Agents SDK accepts into structured
+ * ops — hosted `{ operation }` / `{ operations }`, function-tool `{ patch }`,
+ * `command` tuple, flat op, freeform string, or op array.
+ */
+export function applyPatchOps(raw: unknown): ApplyPatchOperation[] {
+  if (raw == null) return [];
+  if (typeof raw === "string") {
+    const trimmed = raw.trimStart();
+    if (trimmed.startsWith(BEGIN_PATCH)) return freeformApplyPatchOps(trimmed);
+    const parsed = tryParseJson(trimmed);
+    return parsed === undefined ? [] : applyPatchOps(parsed);
+  }
+  if (Array.isArray(raw)) return parseStructuredOperations(raw);
+  if (!isRecord(raw)) return [];
+
+  if (typeof raw.patch === "string") return freeformApplyPatchOps(raw.patch);
+  if (Array.isArray(raw.command)) {
+    const [commandName, patch] = raw.command;
+    if (commandName === "apply_patch" && typeof patch === "string") {
+      return freeformApplyPatchOps(patch);
+    }
   }
-  return r.operation ? [r.operation] : [];
+  // Empty `operations: []` is not authoritative — fall through to operation/flat.
+  if (Array.isArray(raw.operations) && raw.operations.length > 0) {
+    return parseStructuredOperations(raw.operations);
+  }
+  if (raw.operation !== undefined) {
+    const op = asApplyPatchOperation(raw.operation);
+    return op ? [op] : [];
+  }
+  // Flat single op: `{ type, path, diff?, moveTo? }`.
+  const flat = asApplyPatchOperation(raw);
+  return flat ? [flat] : [];
 }
 
-/** Ops from provider `raw`, or from function-tool arguments when raw is empty. */
+/** Ops from provider `raw` and/or function-tool arguments (Codex path). */
 export function applyPatchOpsFromToolItem(item: {
   raw: unknown;
   arguments: unknown;
 }): ApplyPatchOperation[] {
   const fromRaw = applyPatchOps(item.raw);
-  if (fromRaw.length > 0) {
-    return fromRaw;
+  if (fromRaw.length > 0) return fromRaw;
+
+  // function_call envelopes sometimes keep the payload only under raw.arguments.
+  if (isRecord(item.raw)) {
+    const nested = item.raw.arguments ?? item.raw.input;
+    if (nested !== undefined && nested !== item.arguments) {
+      const fromNested = applyPatchOps(nested);
+      if (fromNested.length > 0) return fromNested;
+    }
+  }
+
+  if (item.arguments !== undefined && item.arguments !== null) {
+    return applyPatchOps(item.arguments);
   }
-  const args = parseToolArgs(item.arguments);
-  return applyPatchOps(args);
+  return [];
 }
 
 /**
- * True when a tool item is an `apply_patch_call` — by its provider-native
- * `raw.type` (the live-wire source of truth) or by tool `name` (first-party
- * replays that omit `raw`). Centralizes the rawType-or-name check.
+ * True when a tool item is apply_patch — hosted `raw.type === "apply_patch_call"`,
+ * function-tool `name` `apply_patch` / `apply_patch_call`, or an MCP-prefixed
+ * `…__apply_patch` leaf. Centralizes the rawType-or-name check.
  */
 export function isApplyPatch(item: { name: string; raw: unknown }): boolean {
   const type =

package/src/timeline/projection.ts

@@ -54,6 +54,11 @@ const WORKER_MESSAGE_TOOL = "session_send_message";
  * `"agent"`. That keeps mid-turn goal tools from splitting the step rail with
  * a breakaway GoalRow pill. Non-agent goal events (API, create-session,
  * system auto-pause, continuations) still render as landmarks.
+ *
+ * Solo `goal_continuation` machine-input batches are also suppressed: the
+ * paired `goal.continuation` GoalRow already marks the tick; rendering both
+ * restates the goal text. Mixed batches (continuation + other kinds) still
+ * render as machine-input rows.
  */
 const LANDMARK_ONLY_TOOL_LEAVES = new Set(["memory_save", "memory_correct"]);
 
@@ -140,6 +145,12 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       case "system.update.delivered": {
         const inputs = machineInputMembers(payload.members);
         if (inputs.length === 0) break;
+        // Goal continuations already land as `goal.continuation` GoalRows.
+        // A solo continuation batch would duplicate that landmark + dump the
+        // model-facing prompt — skip chrome for that case only.
+        if (inputs.every((member) => member.kind === "goal_continuation")) {
+          break;
+        }
         closeStreamingTail();
         items.push({
           kind: "machine-input-batch",

package/src/timeline/tool-renderers.tsx

@@ -17,6 +17,7 @@ import {
   MessagesSquareIcon,
   MessageSquareIcon,
   MousePointer2Icon,
+  PackageSearchIcon,
   PanelsTopLeftIcon,
   PlugIcon,
   SearchIcon,
@@ -364,12 +365,13 @@ function ApplyPatchRenderer({ item }: ToolRendererProps) {
           </RunningPreview>
         }
       >
-        {ops.map((op) => {
+        {ops.map((op, index) => {
           const file = safeParseOp(op);
+          const key = `${op.type}:${op.path}:${index}`;
           return file ? (
-            <ToolDiff key={op.path} files={[file]} />
+            <ToolDiff key={key} files={[file]} />
           ) : (
-            <div key={op.path}>
+            <div key={key}>
               <p className="mb-1 font-og-mono text-og-xs text-og-fg-muted">{op.path}</p>
               <RawPatch diff={op.diff ?? ""} />
             </div>
@@ -421,10 +423,11 @@ function ApplyPatchRenderer({ item }: ToolRendererProps) {
       >
         {ops.map((op, index) => {
           const file = parsed[index];
+          const key = `${op.type}:${op.path}:${index}`;
           return file ? (
-            <ToolDiff key={op.path} files={[file]} />
+            <ToolDiff key={key} files={[file]} />
           ) : (
-            <div key={op.path}>
+            <div key={key}>
               <p className="mb-1 font-og-mono text-og-xs text-og-fg-muted">{op.path}</p>
               <RawPatch diff={op.diff ?? ""} />
             </div>
@@ -1031,6 +1034,204 @@ function SecretSetRenderer({ item }: ToolRendererProps) {
   );
 }
 
+/* ---- tool_search (progressive MCP disclosure) ------------------------------ */
+
+type DisclosedTool = {
+  /** Full wire name (`server__leaf` or bare). */
+  name: string;
+  /** Server / namespace prefix before `__`, when present. */
+  source: string | null;
+  /** Leaf tool name after `__`. */
+  leaf: string;
+};
+
+function splitToolWireName(name: string): DisclosedTool {
+  const boundary = name.indexOf("__");
+  if (boundary <= 0) {
+    return { name, source: null, leaf: name };
+  }
+  return {
+    name,
+    source: name.slice(0, boundary),
+    leaf: name.slice(boundary + 2),
+  };
+}
+
+/** Capability query from live tool_search args (object or JSON string). */
+function toolSearchQuery(item: ToolRendererProps["item"]): string {
+  const fromArgs = parseToolArgs(item.arguments);
+  if (typeof fromArgs.query === "string" && fromArgs.query.trim()) {
+    return fromArgs.query.trim();
+  }
+  const raw = item.raw;
+  if (raw && typeof raw === "object") {
+    const rawArgs = (raw as { arguments?: unknown }).arguments;
+    if (typeof rawArgs === "string" && rawArgs.trim()) {
+      const parsed = tryParseJson(rawArgs);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        const query = (parsed as { query?: unknown }).query;
+        if (typeof query === "string" && query.trim()) {
+          return query.trim();
+        }
+      }
+    } else if (rawArgs && typeof rawArgs === "object" && !Array.isArray(rawArgs)) {
+      const query = (rawArgs as { query?: unknown }).query;
+      if (typeof query === "string" && query.trim()) {
+        return query.trim();
+      }
+    }
+  }
+  return "";
+}
+
+/**
+ * Parse disclosed tools from the runtime event shape.
+ * `normalizeSdkEvent` collapses `tool_search_output.tools[]` into text:
+ *   "Disclosed tools: a, b" | "No matching tools found."
+ * Also accept a structured `tools` array when a host/enricher preserves it.
+ */
+function parseDisclosedTools(output: unknown): DisclosedTool[] | null {
+  if (output && typeof output === "object" && !Array.isArray(output)) {
+    const tools = (output as { tools?: unknown }).tools;
+    if (Array.isArray(tools)) {
+      return tools
+        .map((tool) => {
+          if (typeof tool === "string" && tool.trim()) {
+            return splitToolWireName(tool.trim());
+          }
+          if (
+            tool &&
+            typeof tool === "object" &&
+            typeof (tool as { name?: unknown }).name === "string"
+          ) {
+            const name = (tool as { name: string }).name.trim();
+            return name ? splitToolWireName(name) : null;
+          }
+          return null;
+        })
+        .filter((tool): tool is DisclosedTool => tool != null);
+    }
+  }
+
+  const { text } = unwrapMcpOutput(output);
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return null;
+  }
+  if (/^no matching tools found\.?$/i.test(trimmed)) {
+    return [];
+  }
+  const disclosed = trimmed.match(/^disclosed tools:\s*(.+)$/i);
+  if (disclosed?.[1]) {
+    return disclosed[1]
+      .split(",")
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .map(splitToolWireName);
+  }
+  const parsed = tryParseJson(trimmed);
+  if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+    return parseDisclosedTools(parsed);
+  }
+  return null;
+}
+
+function toolSearchPreview(tools: DisclosedTool[] | null, cancelled: boolean): string | undefined {
+  if (cancelled) {
+    return undefined;
+  }
+  if (!tools) {
+    return "Done";
+  }
+  if (tools.length === 0) {
+    return "No matches";
+  }
+  if (tools.length === 1) {
+    return tools[0]!.leaf;
+  }
+  const head = tools[0]!.leaf;
+  return `${tools.length} tools · ${truncatePreview(head, 28)}`;
+}
+
+function ToolSearchRenderer({ item }: ToolRendererProps) {
+  const query = toolSearchQuery(item);
+  const icon = <PackageSearchIcon className={ICON_SIZE} />;
+  const running = item.status === "running";
+  const queryPreview = query ? truncatePreview(query, 64) : "";
+
+  if (running) {
+    return (
+      <ActivityDisclosure
+        icon={icon}
+        iconTone="running"
+        title="Looking up tools"
+        running
+        preview={
+          queryPreview ? (
+            <RunningPreview>{queryPreview}</RunningPreview>
+          ) : (
+            <RunningPreview>Matching capabilities…</RunningPreview>
+          )
+        }
+      >
+        {query ? <BodyNote>capability query: {query}</BodyNote> : null}
+        <PayloadBlock label="Arguments" value={redactSecrets(parseToolArgs(item.arguments))} />
+      </ActivityDisclosure>
+    );
+  }
+
+  const { text: outText, isError } = unwrapMcpOutput(item.output);
+  if ((isError || item.status === "failed") && item.status !== "cancelled") {
+    return (
+      <ActivityDisclosure
+        icon={icon}
+        iconTone="failed"
+        title="Tool lookup failed"
+        failed
+        preview={truncatePreview(outText, 80) || queryPreview || "Lookup failed"}
+      >
+        {query ? <BodyNote>capability query: {query}</BodyNote> : null}
+        <PayloadBlock label="Arguments" value={redactSecrets(parseToolArgs(item.arguments))} />
+        <PayloadBlock label="Error" value={outText} failed />
+      </ActivityDisclosure>
+    );
+  }
+
+  const tools = parseDisclosedTools(item.output);
+  const preview = toolSearchPreview(tools, item.status === "cancelled");
+
+  return (
+    <ActivityDisclosure
+      icon={icon}
+      iconTone="muted"
+      title="Looked up tools"
+      cancelled={item.status === "cancelled"}
+      preview={preview}
+    >
+      {query ? <BodyNote>capability query: {query}</BodyNote> : null}
+      {tools && tools.length > 0 ? (
+        <ul className="grid gap-1.5">
+          {tools.slice(0, 12).map((tool) => (
+            <li key={tool.name} className="flex min-w-0 items-baseline gap-2">
+              {tool.source ? (
+                <span className="shrink-0 text-og-xs text-og-fg-subtle">{tool.source}</span>
+              ) : null}
+              <span className="truncate font-mono text-og-sm text-og-fg">{tool.leaf}</span>
+            </li>
+          ))}
+          {tools.length > 12 ? (
+            <li className="text-og-xs text-og-fg-muted">+{tools.length - 12} more</li>
+          ) : null}
+        </ul>
+      ) : tools && tools.length === 0 ? (
+        <BodyNote>no deferred tools matched this capability query.</BodyNote>
+      ) : null}
+      <PayloadBlock label="Arguments" value={redactSecrets(parseToolArgs(item.arguments))} />
+      {tools == null && outText ? <PayloadBlock label="Result" value={outText} /> : null}
+    </ActivityDisclosure>
+  );
+}
+
 /* ---- docs / knowledge search ----------------------------------------------- */
 
 function DocsSearchRenderer({ item }: ToolRendererProps) {
@@ -1575,9 +1776,11 @@ function GenericToolIcon({ name }: { name: string }) {
                                   leaf.includes("knowledge") ||
                                   leaf === "list_document_bases"
                                 ? FileSearchIcon
-                                : leaf === "tool_search" || leaf === "load_skill"
-                                  ? PlugIcon
-                                  : WrenchIcon;
+                                : leaf === "tool_search"
+                                  ? PackageSearchIcon
+                                  : leaf === "load_skill"
+                                    ? PlugIcon
+                                    : WrenchIcon;
   return <Icon className={ICON_SIZE} />;
 }
 
@@ -1589,6 +1792,7 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "rawType", type: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "rawType", type: "computer_call", render: ComputerCallRenderer },
   { match: "rawType", type: "hosted_tool_call", render: WebSearchRenderer },
+  { match: "rawType", type: "tool_search_call", render: ToolSearchRenderer },
   // First-party sandbox + MCP tools resolve by name (exact or MCP leaf).
   { match: "name", name: "exec_command", render: ExecRenderer },
   { match: "name", name: "request_human_input", render: AskRenderer },
@@ -1607,6 +1811,7 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { 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: "tool_search", render: ToolSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
   { match: "name", name: "environment_set_variable", render: SecretSetRenderer },
   { match: "name", name: "variable_set_set_variable", render: SecretSetRenderer },

package/src/timeline/turn-summary.tsx

@@ -16,7 +16,12 @@ import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
 import { useForcedDefaultOpen } from "./disclosure-context";
 import { useEntranceAnimation } from "./entrance";
 import { useFoldMemory, type FoldRestingState } from "./fold-memory";
-import { applyPatchOps, isApplyPatch, mediaPreviewFact, screenshotDataUrl } from "./parsers";
+import {
+  applyPatchOpsFromToolItem,
+  isApplyPatch,
+  mediaPreviewFact,
+  screenshotDataUrl,
+} from "./parsers";
 import { rawTypeOf } from "./registry";
 import type { ActivityItem, ToolCallItem, TurnOutcome } from "./types";
 export type { TurnOutcome } from "./types";
@@ -571,7 +576,7 @@ const BUILT_IN_TURN_SUMMARY_FACETS: readonly TurnSummaryFacet[] = Object.freeze(
       let files = 0;
       for (const item of toolCalls) {
         if (isApplyPatch(item)) {
-          files += applyPatchOps(item.raw).length;
+          files += applyPatchOpsFromToolItem(item).length;
         }
       }
       return files ? { content: `${files} ${files === 1 ? "file" : "files"} edited` } : null;

package/styles/tokens.css

@@ -97,16 +97,18 @@
   --og-session-chrome-surface-open: color-mix(in oklch, var(--og-color-surface-2) 92%, transparent);
   --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 85%, transparent);
   --og-session-chrome-border-open: var(--og-color-border);
-  --og-session-chrome-highlight: color-mix(in oklch, var(--og-color-bg) 72%, transparent);
+  /* Selected chip: solid lift vs open dock surface (not a faint wash). */
+  --og-session-chrome-highlight: var(--og-color-surface-3);
+  --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 16%, transparent);
   --og-session-chrome-shadow: 0 6px 22px -14px oklch(0 0 0 / 0.42);
   --og-session-chrome-shadow-open: 0 10px 28px -16px oklch(0 0 0 / 0.5);
   --og-session-chrome-radius: var(--og-radius-lg);
   --og-session-chrome-chip-min-height: 1.75rem;
   --og-session-chrome-chip-pad-x: 0.5rem;
   --og-session-chrome-chip-gap: 0.125rem;
-  --og-session-chrome-rail-pad: 0.2rem;
-  --og-session-chrome-panel-pad-x: 0.5rem;
-  --og-session-chrome-panel-pad-y: 0.4rem;
+  --og-session-chrome-rail-pad: 0.15rem;
+  --og-session-chrome-panel-pad-x: 0.45rem;
+  --og-session-chrome-panel-pad-y: 0.3rem;
   /* Expanded agents/queue/inbox/goal body — scroll inside, never grow unbound. */
   --og-session-chrome-panel-max-height: min(18rem, 40dvh);
   --og-session-chrome-duration: 220ms;
@@ -158,7 +160,8 @@
   --og-session-chrome-surface-open: var(--og-color-surface-2);
   --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 90%, transparent);
   --og-session-chrome-border-open: var(--og-color-border);
-  --og-session-chrome-highlight: color-mix(in oklch, var(--og-color-surface-1) 88%, transparent);
+  --og-session-chrome-highlight: var(--og-color-surface-3);
+  --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 12%, transparent);
   --og-session-chrome-shadow: 0 4px 16px -10px oklch(0.2 0.02 260 / 0.14);
   --og-session-chrome-shadow-open: 0 8px 22px -12px oklch(0.2 0.02 260 / 0.18);
   --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 70%, transparent);