@gram-ai/elements 1.38.0 → 1.38.2

package/src/components/ui/tool-ui.tsx

@@ -94,6 +94,12 @@ interface SectionHighlight {
   /** Mark colour: "risk" (red, default) for findings, "search" (yellow) for a
    * text-search hit. */
   tone?: "risk" | "search";
+  /** Search tone only: index of the active query occurrence within THIS section
+   * (the unified thread navigator's current target). The host owns occurrence
+   * stepping, so this is controlled: the occurrence at this index renders bright
+   * and scrolls into view; null/undefined means this section holds no active
+   * occurrence, so all its hits render pale. */
+  activeOccurrence?: number | null;
 }
 
 interface ToolUIProps {
@@ -118,9 +124,10 @@ interface ToolUIProps {
   /** When set, highlight occurrences of this query (case-insensitive) in the
    * tool name — e.g. a thread search for "customer" lights up `get_customer`. */
   nameQuery?: string;
-  /** Whether this tool holds the active thread-search match: bright highlights
-   * (name + sections) when true, pale when false. */
-  searchActive?: boolean;
+  /** Index of the active query occurrence within the tool name (the unified
+   * navigator's current target), or null when the active occurrence isn't in the
+   * name. Per-section args/output active occurrences ride their `*Highlight`. */
+  nameActiveOccurrence?: number | null;
   /** Additional class names */
   className?: string;
   /** MCP tool annotations */
@@ -144,9 +151,6 @@ interface ToolUISectionProps {
   language?: BundledLanguage;
   /** Flagged substrings — renders a navigable highlighted view + header icon. */
   highlight?: SectionHighlight;
-  /** Search tone only: whether this tool holds the active thread match (bright
-   * vs pale marks). */
-  searchActive?: boolean;
 }
 
 /* -----------------------------------------------------------------------------
@@ -401,15 +405,15 @@ function HighlightedCode({
   matches,
   masked,
   tone = "risk",
-  searchActive = false,
+  activeOccurrence = null,
 }: {
   text: string;
   matches: SectionMatch[];
   masked?: boolean;
   tone?: "risk" | "search";
-  /** Search tone only: whether this tool holds the active thread match. Active
-   * → bright marks; inactive → pale. (Risk tone steps per-section instead.) */
-  searchActive?: boolean;
+  /** Search tone only: controlled active occurrence index, owned by the host's
+   * unified navigator. Null when this section holds no active occurrence. */
+  activeOccurrence?: number | null;
 }): React.JSX.Element {
   const hits = React.useMemo(
     () =>
@@ -421,7 +425,12 @@ function HighlightedCode({
     [text, matches, tone],
   );
   const count = hits.length;
+  const isSearch = tone === "search";
+  // Risk tone steps occurrences per-section with its own ▲▼; search tone is
+  // controlled by the host (the thread-wide navigator), so its active index comes
+  // in via `activeOccurrence` (-1 = this section isn't the active one).
   const [active, setActive] = useState(0);
+  const effectiveActive = isSearch ? (activeOccurrence ?? -1) : active;
   const [revealed, setRevealed] = useState(!masked);
   const markRefs = React.useRef<Array<HTMLElement | null>>([]);
   const preRef = React.useRef<HTMLPreElement>(null);
@@ -431,24 +440,24 @@ function HighlightedCode({
   }, [count, active]);
   // Center the active match within the code block *only* — adjust the <pre>'s
   // own scrollTop rather than scrollIntoView(), which would also yank the
-  // surrounding sheet. Runs on mount (focus the first match) and on each step.
+  // surrounding sheet. Runs on mount + each step (risk) or each host nav (search).
   useEffect(() => {
     const pre = preRef.current;
-    const mark = markRefs.current[active];
+    const mark = markRefs.current[effectiveActive];
     if (!pre || !mark) return;
     const markRect = mark.getBoundingClientRect();
     const preRect = pre.getBoundingClientRect();
     pre.scrollTop +=
       markRect.top - preRect.top - pre.clientHeight / 2 + markRect.height / 2;
-  }, [active, count]);
+  }, [effectiveActive, count]);
 
   const go = (delta: number) => {
     if (count === 0) return;
     setActive((a) => (a + delta + count) % count);
   };
 
-  const activeMatch = hits[active]
-    ? matches[hits[active]!.matchIndex]
+  const activeMatch = hits[effectiveActive]
+    ? matches[hits[effectiveActive]!.matchIndex]
     : undefined;
 
   const segments: React.ReactNode[] = [];
@@ -469,12 +478,13 @@ function HighlightedCode({
           // have a visible target; the rest stay a darker shade. Risk findings are
           // red; a plain text-search hit is yellow.
           "rounded-sm px-0.5 font-mono ring-1",
-          tone === "search"
-            ? // Search nav is per-row, so all occurrences here share the row's
-              // active state: bright when this tool is the active match, else pale.
-              searchActive
+          isSearch
+            ? // The single active occurrence (the navigator's current target)
+              // is bright; every other hit is pale. When this section isn't the
+              // active one, effectiveActive is -1 so all hits render pale.
+              i === effectiveActive
               ? "bg-yellow-400 text-yellow-950 ring-yellow-300"
-              : "bg-yellow-800/50 text-yellow-200/90 ring-yellow-700/50"
+              : "bg-yellow-800/40 text-yellow-200/70 ring-yellow-700/40"
             : i === active
               ? "bg-red-700 text-red-50 ring-red-400"
               : "bg-red-900 text-red-300 ring-red-800",
@@ -504,12 +514,12 @@ function HighlightedCode({
                 {count} flagged {count === 1 ? "match" : "matches"}
               </span>
             )}
-            {activeMatch?.label && (
+            {!isSearch && activeMatch?.label && (
               <span className="truncate rounded bg-slate-700/60 px-1.5 py-0.5 font-mono text-slate-300">
                 {activeMatch.label}
               </span>
             )}
-            {activeMatch?.onExclude && (
+            {!isSearch && activeMatch?.onExclude && (
               <button
                 type="button"
                 onClick={activeMatch.onExclude}
@@ -535,7 +545,9 @@ function HighlightedCode({
                 {revealed ? "Hide" : "Reveal"}
               </button>
             )}
-            {count >= 1 && (
+            {/* Risk tone steps occurrences per-section; search tone is driven by
+                the thread-wide navigator, so no per-section prev/next. */}
+            {!isSearch && count >= 1 && (
               <div className="flex items-center gap-0.5">
                 <button
                   type="button"
@@ -651,7 +663,6 @@ function ToolUISection({
   highlightSyntax = true,
   language = "json",
   highlight,
-  searchActive = false,
 }: ToolUISectionProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
@@ -705,7 +716,7 @@ function ToolUISection({
               matches={highlight!.matches}
               masked={highlight?.masked}
               tone={highlight?.tone}
-              searchActive={searchActive}
+              activeOccurrence={highlight?.activeOccurrence ?? null}
             />
           ) : isStructured ? (
             <StructuredResultContent content={content} />
@@ -730,22 +741,23 @@ type ApprovalMode = "one-time" | "for-session";
 
 // Highlight every case-insensitive occurrence of `query` in a short label (the
 // tool name), preserving original casing. Matches over the original string so
-// offsets stay aligned; escapes regex metacharacters in the user query.
+// offsets stay aligned; escapes regex metacharacters in the user query. The
+// occurrence at `activeIndex` (the navigator's current target) is bright; the
+// rest are pale. null when the active occurrence isn't in the name.
 function highlightLabel(
   text: string,
-  query?: string,
-  active = false,
+  query: string | undefined,
+  activeIndex: number | null,
 ): React.ReactNode {
   const q = query?.trim();
   if (!q) return text;
   const re = new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
-  // Active match bright, others pale.
-  const markClass = active
-    ? "rounded-sm bg-yellow-300/80 px-0.5 text-foreground"
-    : "rounded-sm bg-yellow-200/30 px-0.5 text-foreground";
+  const ACTIVE = "rounded-sm bg-yellow-300/80 px-0.5 text-foreground";
+  const INACTIVE = "rounded-sm bg-yellow-200/30 px-0.5 text-foreground";
   const nodes: React.ReactNode[] = [];
   let pos = 0;
   let k = 0;
+  let occ = 0;
   for (let m = re.exec(text); m !== null; m = re.exec(text)) {
     if (m[0].length === 0) {
       re.lastIndex++;
@@ -753,11 +765,12 @@ function highlightLabel(
     }
     if (m.index > pos) nodes.push(text.slice(pos, m.index));
     nodes.push(
-      <mark key={k++} className={markClass}>
+      <mark key={k++} className={occ === activeIndex ? ACTIVE : INACTIVE}>
         {m[0]}
       </mark>,
     );
     pos = m.index + m[0].length;
+    occ++;
   }
   if (pos === 0) return text;
   if (pos < text.length) nodes.push(text.slice(pos));
@@ -775,7 +788,7 @@ function ToolUI({
   requestHighlight,
   resultHighlight,
   nameQuery,
-  searchActive = false,
+  nameActiveOccurrence = null,
   className,
   annotations,
   onApproveOnce,
@@ -861,7 +874,7 @@ function ToolUI({
             !provider && isApprovalPending && "shimmer",
           )}
         >
-          {highlightLabel(displayName, nameQuery, searchActive)}
+          {highlightLabel(displayName, nameQuery, nameActiveOccurrence)}
         </span>
         {hasContent && (
           <ChevronDownIcon
@@ -884,7 +897,6 @@ function ToolUI({
               highlightSyntax
               language="json"
               highlight={requestHighlight}
-              searchActive={searchActive}
               defaultExpanded={(requestHighlight?.matches?.length ?? 0) > 0}
             />
           )}
@@ -896,7 +908,6 @@ function ToolUI({
               highlightSyntax
               language="json"
               highlight={resultHighlight}
-              searchActive={searchActive}
               defaultExpanded={(resultHighlight?.matches?.length ?? 0) > 0}
             />
           )}

package/src/hooks/useGramThreadListAdapter.tsx

@@ -15,6 +15,7 @@ import {
   convertGramMessagesToUIMessages,
 } from "@/lib/messageConverter";
 import { sleep } from "@/lib/utils";
+import { trackError } from "@/lib/errorTracking";
 import {
   ThreadMetaContext,
   type ThreadMeta,
@@ -473,8 +474,42 @@ export function useGramThreadListAdapter(
         };
       },
 
-      async rename() {
-        // No-op
+      async rename(remoteId: string, newTitle: string) {
+        // Brand-new threads only have a local id until the first message
+        // persists them server-side; there's nothing to rename yet.
+        if (!remoteId || isLocalThreadId(remoteId)) {
+          return;
+        }
+
+        // Reuses chat.generateTitle: passing `title` sets a manual title that
+        // auto-generation won't overwrite (empty string resets to auto-naming).
+        //
+        // On failure we track AND rethrow: assistant-ui applies the rename
+        // optimistically and only rolls the title back if this promise rejects.
+        // Swallowing the error would leave a title showing that never persisted.
+        try {
+          const response = await fetch(
+            `${optionsRef.current.apiUrl}/rpc/chat.generateTitle`,
+            {
+              method: "POST",
+              headers: {
+                ...(await resolveAdapterHeaders(optionsRef.current)),
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ id: remoteId, title: newTitle }),
+            },
+          );
+
+          if (!response.ok) {
+            throw new Error(`Failed to rename chat: ${response.status}`);
+          }
+        } catch (error) {
+          trackError(error, {
+            source: "custom",
+            context: "useGramThreadListAdapter.rename",
+          });
+          throw error;
+        }
       },
 
       async archive() {

package/src/index.ts

@@ -15,6 +15,7 @@ export { useChatId } from "./contexts/ChatIdContext";
 // Core Components
 export { Chat } from "@/components/Chat";
 export { ChatHistory } from "@/components/ChatHistory";
+export { ActiveChatTitle } from "@/components/ActiveChatTitle";
 export { ShareButton } from "@/components/ShareButton";
 export type { ShareButtonProps } from "@/components/ShareButton";
 export { ToolFallback } from "@/components/assistant-ui/tool-fallback";