feat(web): add in-thread find#7434

@@ -573,6 +725,60 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <InputGroup className="absolute right-4 top-3 z-30 w-auto shadow-lg dark:bg-background **:[input]:w-48">

@@ -573,6 +674,57 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <div className="absolute right-4 top-3 z-30 flex h-9 items-center gap-1 rounded-lg border bg-background/95 px-2 shadow-lg backdrop-blur">
+              <SearchIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
+              <input
+                ref={findInputRef}
+                value={findQuery}
+                onChange={(event) => updateFindQuery(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") goToFindMatch(event.shiftKey ? -1 : 1);
+                  if (event.key === "Escape") setFindOpen(false);
+                }}
+                aria-label="Find in thread"
+                placeholder="Find in thread"
+                className="w-48 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />

@@ -420,6 +424,103 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
+  const findTexts = useMemo(
+    () => rows.map((row) => (row.kind === "message" ? row.message.text : null)),
+    [rows],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      const firstMatch = findTextMatches(findTexts, query)[0];
+      if (firstMatch === undefined) return;
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({ index: firstMatch, animated: false, viewOffset: 80 });
+    },
+    [findTexts, listRef, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({
+        index: findMatches[next]!,
+        animated: false,
+        viewOffset: 80,
+      });
+    },
+    [findMatchIndex, findMatches, listRef, onManualNavigation],
+  );

@@ -573,6 +716,61 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <InputGroup className="surface-glass absolute right-4 top-3 z-30 h-9 w-auto shadow-lg">

@@ -420,6 +423,65 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
+  const findTexts = useMemo(
+    () => rows.map((row) => (row.kind === "message" ? row.message.text : null)),
+    [rows],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      const firstMatch = findTextMatches(findTexts, query)[0];
+      if (firstMatch === undefined) return;
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({ index: firstMatch, animated: true, viewOffset: 80 });
+    },
+    [findTexts, listRef, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({
+        index: findMatches[next]!,

@@ -573,6 +725,60 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <InputGroup className="absolute right-4 top-3 z-30 w-auto shadow-lg dark:bg-background **:[input]:w-48">

@@ -573,6 +802,78 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <div className="absolute right-4 top-3 z-30 rounded-[var(--control-radius)] shadow-lg">
+              <InputGroup className="w-auto dark:bg-background **:[input]:w-48">
+                <InputGroupAddon>
+                  <SearchIcon aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  ref={findInputRef}
+                  value={findQuery}
+                  onChange={(event) => updateFindQuery(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") goToFindMatch(event.shiftKey ? -1 : 1);
+                  }}
+                  aria-label="Find in thread"
+                  placeholder="Find in thread"
+                />
+                <InputGroupAddon align="inline-end" className="gap-1">
+                  <Button
+                    type="button"
+                    size="icon-xs"
+                    variant="ghost"
+                    className="data-pressed:border-primary! data-pressed:bg-primary! data-pressed:text-primary-foreground!"
+                    data-pressed={findCaseSensitive || undefined}
+                    aria-label="Match case"
+                    aria-pressed={findCaseSensitive}
+                    title="Match case"
+                    onClick={() => {
+                      setFindCaseSensitive(!findCaseSensitive);
+                      setFindMatchIndex(0);
+                      onManualNavigation();
+                    }}
+                  >
+                    <span className="text-[11px] font-semibold leading-none">Aa</span>
+                  </Button>

@@ -420,6 +424,103 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
+  const findTexts = useMemo(
+    () => rows.map((row) => (row.kind === "message" ? row.message.text : null)),

@@ -25,6 +25,8 @@ const toggleVariants = cva(
         default: "border-transparent",
         ghost:
           "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",
+        primary:
+          "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-primary data-pressed:text-primary-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",

@@ -573,6 +725,60 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <InputGroup className="absolute right-4 top-3 z-30 w-auto shadow-lg **:[input]:w-48">

@@ -25,6 +25,8 @@ const toggleVariants = cva(
         default: "border-transparent",
         ghost:
           "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",
+        primary:
+          "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-primary data-pressed:text-primary-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",

@@ -573,6 +803,76 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <div className="absolute right-4 top-3 z-30 w-[calc(100%-2rem)] max-w-sm rounded-[var(--control-radius)] shadow-lg">
+              <InputGroup className="w-full dark:bg-background">

@@ -420,10 +427,155 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
-  const minimapItems = useMemo(() => deriveTimelineMinimapItems(rows), [rows]);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
   const [timelineViewportElement, setTimelineViewportElement] = useState<HTMLDivElement | null>(
     null,
   );
+  const findMessageEntries = useMemo(
+    () => timelineEntries.filter((entry) => entry.kind === "message"),
+    [timelineEntries],
+  );
+  const findTexts = useMemo(
+    () => findMessageEntries.map((entry) => renderMarkdownSearchText(entry.message.text)),
+    [findMessageEntries],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);

@@ -420,10 +425,148 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
-  const minimapItems = useMemo(() => deriveTimelineMinimapItems(rows), [rows]);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
   const [timelineViewportElement, setTimelineViewportElement] = useState<HTMLDivElement | null>(
     null,
   );
+  const findMessageEntries = useMemo(
+    () => timelineEntries.filter((entry) => entry.kind === "message"),
+    [timelineEntries],
+  );
+  const findTexts = useMemo(
+    () => findMessageEntries.map((entry) => entry.message.text),
+    [findMessageEntries],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      if (findTextMatches(findTexts, query).length > 0) onManualNavigation();
+    },
+    [findTexts, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+    },
+    [findMatchIndex, findMatches, onManualNavigation],
+  );
+
+  useEffect(() => {
+    const handleFindShortcut = (event: globalThis.KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() !== "f" ||
+        (!event.metaKey && !event.ctrlKey) ||
+        event.altKey ||
+        event.shiftKey ||
+        !timelineViewportElement ||
+        timelineViewportElement.getBoundingClientRect().width === 0 ||
+        timelineViewportElement.closest('[data-chat-column-maximized-away="true"]') ||
+        (event.target instanceof Element &&
+          event.target !== document.body &&
+          (event.target.closest("[data-terminal-owner]") ||
+            !timelineViewportElement
+              .closest("[data-chat-column-maximized-away]")
+              ?.contains(event.target)))
+      ) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      setFindOpen(true);
+    };
+    window.addEventListener("keydown", handleFindShortcut, true);
+    return () => window.removeEventListener("keydown", handleFindShortcut, true);
+  }, [timelineViewportElement]);
+
+  useEffect(() => {
+    if (!findOpen) return;
+    const frame = requestAnimationFrame(() => findInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [findOpen]);
+
+  useEffect(() => {
+    CSS.highlights.delete(THREAD_FIND_HIGHLIGHT);
+    const match = findMatches[findMatchIndex];
+    const entry = match === undefined ? undefined : findMessageEntries[match.textIndex];
+    if (!findOpen || !findQuery || !match || !entry) return;
+
+    const rowIndex = rows.findIndex((row) => row.id === entry.id);
+    if (rowIndex === -1) {
+      const turnId = entry.message.turnId;
+      if (turnId && !expandedTurnIds.has(turnId)) {
+        suspendEndScrollMaintenanceForDisclosure(`turn-fold:${turnId}`);
+        setExpandedTurnIds((existing) => new Set(existing).add(turnId));
+      }
+      return;
+    }
+
+    void listRef.current?.scrollToIndex({ index: rowIndex, animated: false, viewOffset: 80 });
+
+    let paintFrame = 0;
+    const mountFrame = requestAnimationFrame(() => {
+      paintFrame = requestAnimationFrame(() => {
+        const root = document.querySelector(`[data-timeline-row-id="${CSS.escape(entry.id)}"]`);
+        if (!root) return;
+
+        const ranges: Range[] = [];
+        const needle = findQuery.toLowerCase();
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          const text = node.textContent?.toLowerCase() ?? "";
+          for (
+            let offset = 0;
+            (offset = text.indexOf(needle, offset)) !== -1;
+            offset += needle.length
+          ) {
+            const range = new Range();
+            range.setStart(node, offset);
+            range.setEnd(node, offset + needle.length);
+            ranges.push(range);
+          }
+        }
+        const activeRange = ranges[match.occurrenceIndex];

@@ -420,10 +425,148 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
-  const minimapItems = useMemo(() => deriveTimelineMinimapItems(rows), [rows]);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
   const [timelineViewportElement, setTimelineViewportElement] = useState<HTMLDivElement | null>(
     null,
   );
+  const findMessageEntries = useMemo(
+    () => timelineEntries.filter((entry) => entry.kind === "message"),
+    [timelineEntries],
+  );
+  const findTexts = useMemo(
+    () => findMessageEntries.map((entry) => entry.message.text),
+    [findMessageEntries],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      if (findTextMatches(findTexts, query).length > 0) onManualNavigation();
+    },
+    [findTexts, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+    },
+    [findMatchIndex, findMatches, onManualNavigation],
+  );
+
+  useEffect(() => {
+    const handleFindShortcut = (event: globalThis.KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() !== "f" ||
+        (!event.metaKey && !event.ctrlKey) ||
+        event.altKey ||
+        event.shiftKey ||
+        !timelineViewportElement ||
+        timelineViewportElement.getBoundingClientRect().width === 0 ||
+        timelineViewportElement.closest('[data-chat-column-maximized-away="true"]') ||
+        (event.target instanceof Element &&
+          event.target !== document.body &&
+          (event.target.closest("[data-terminal-owner]") ||
+            !timelineViewportElement
+              .closest("[data-chat-column-maximized-away]")
+              ?.contains(event.target)))
+      ) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      setFindOpen(true);
+    };
+    window.addEventListener("keydown", handleFindShortcut, true);
+    return () => window.removeEventListener("keydown", handleFindShortcut, true);
+  }, [timelineViewportElement]);
+
+  useEffect(() => {
+    if (!findOpen) return;
+    const frame = requestAnimationFrame(() => findInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [findOpen]);
+
+  useEffect(() => {
+    CSS.highlights.delete(THREAD_FIND_HIGHLIGHT);
+    const match = findMatches[findMatchIndex];
+    const entry = match === undefined ? undefined : findMessageEntries[match.textIndex];
+    if (!findOpen || !findQuery || !match || !entry) return;
+
+    const rowIndex = rows.findIndex((row) => row.id === entry.id);
+    if (rowIndex === -1) {
+      const turnId = entry.message.turnId;
+      if (turnId && !expandedTurnIds.has(turnId)) {
+        suspendEndScrollMaintenanceForDisclosure(`turn-fold:${turnId}`);
+        setExpandedTurnIds((existing) => new Set(existing).add(turnId));
+      }
+      return;
+    }
+
+    void listRef.current?.scrollToIndex({ index: rowIndex, animated: false, viewOffset: 80 });
+
+    let paintFrame = 0;
+    const mountFrame = requestAnimationFrame(() => {
+      paintFrame = requestAnimationFrame(() => {
+        const root = document.querySelector(`[data-timeline-row-id="${CSS.escape(entry.id)}"]`);
+        if (!root) return;
+
+        const ranges: Range[] = [];
+        const needle = findQuery.toLowerCase();
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          const text = node.textContent?.toLowerCase() ?? "";
+          for (
+            let offset = 0;
+            (offset = text.indexOf(needle, offset)) !== -1;
+            offset += needle.length
+          ) {
+            const range = new Range();
+            range.setStart(node, offset);
+            range.setEnd(node, offset + needle.length);

@@ -420,10 +430,230 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
-  const minimapItems = useMemo(() => deriveTimelineMinimapItems(rows), [rows]);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findCaseSensitive, setFindCaseSensitive] = useState(false);
+  const [findMatchCursor, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
   const [timelineViewportElement, setTimelineViewportElement] = useState<HTMLDivElement | null>(
     null,
   );
+  const findMessageEntries = useMemo(
+    () => timelineEntries.filter((entry) => entry.kind === "message"),
+    [timelineEntries],
+  );
+  const findTexts = useMemo(
+    () => findMessageEntries.map((entry) => renderMarkdownSearchText(entry.message.text)),
+    [findMessageEntries],
+  );
+  const findMatches = useMemo(
+    () => findTextMatches(findTexts, findQuery, findCaseSensitive),
+    [findCaseSensitive, findQuery, findTexts],
+  );
+  const findMatchIndex = Math.min(findMatchCursor, Math.max(0, findMatches.length - 1));
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      if (findTextMatches(findTexts, query, findCaseSensitive).length > 0) onManualNavigation();
+    },
+    [findCaseSensitive, findTexts, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+    },
+    [findMatchIndex, findMatches, onManualNavigation],
+  );
+
+  useEffect(() => {
+    const handleFindShortcut = (event: globalThis.KeyboardEvent) => {
+      const key = event.key.toLowerCase();
+      if (
+        !timelineViewportElement ||
+        timelineViewportElement.getBoundingClientRect().width === 0 ||
+        timelineViewportElement.closest('[data-chat-column-maximized-away="true"]')
+      ) {
+        return;
+      }
+
+      if (key === "escape") {
+        if (
+          !findOpen ||
+          (event.target instanceof Element &&
+            event.target.closest('[role="dialog"], [data-terminal-owner]'))
+        ) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setFindOpen(false);
+        return;
+      }
+      if (
+        event.target instanceof Element &&
+        event.target !== document.body &&
+        (event.target.closest("[data-terminal-owner]") ||
+          !timelineViewportElement
+            .closest("[data-chat-column-maximized-away]")
+            ?.contains(event.target))
+      ) {
+        return;
+      }
+      if ((key !== "f" && key !== "g") || (!event.metaKey && !event.ctrlKey) || event.altKey) {
+        return;
+      }
+
+      const inputFocused = document.activeElement === findInputRef.current;
+      if (key === "g") {
+        if (!findOpen || inputFocused) return;
+        event.preventDefault();
+        event.stopPropagation();
+        goToFindMatch(event.shiftKey ? -1 : 1);
+        return;
+      }
+      if (event.shiftKey || (!isElectron && findOpen && inputFocused)) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (findOpen) {
+        findInputRef.current?.focus();
+      } else {
+        setFindOpen(true);
+      }
+    };
+    window.addEventListener("keydown", handleFindShortcut, true);
+    return () => window.removeEventListener("keydown", handleFindShortcut, true);
+  }, [findOpen, goToFindMatch, timelineViewportElement]);
+
+  useEffect(() => {
+    if (!findOpen) return;
+    const frame = requestAnimationFrame(() => findInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [findOpen]);
+
+  useEffect(() => {
+    CSS.highlights.delete(THREAD_FIND_HIGHLIGHT);
+    CSS.highlights.delete(THREAD_FIND_ACTIVE_HIGHLIGHT);
+    const match = findMatches[findMatchIndex];
+    const entry = match === undefined ? undefined : findMessageEntries[match.textIndex];
+    if (!findOpen || !findQuery || !match || !entry || !timelineViewportElement) return;
+
+    const rowIndex = rows.findIndex((row) => row.id === entry.id);
+    if (rowIndex === -1) {
+      const turnId = entry.message.turnId;
+      if (turnId && !expandedTurnIds.has(turnId)) {
+        suspendEndScrollMaintenanceForDisclosure(`turn-fold:${turnId}`);
+        setExpandedTurnIds((existing) => new Set(existing).add(turnId));
+      }
+      return;
+    }
+
+    void listRef.current?.scrollToIndex({ index: rowIndex, animated: false, viewOffset: 80 });
+
+    let paintFrame = 0;
+    let repaintFrame = 0;
+    const paintHighlights = () => {
+      const allRanges: Range[] = [];
+      let activeRange: Range | undefined;
+      for (const [textIndex, messageEntry] of findMessageEntries.entries()) {
+        const root = timelineViewportElement?.querySelector(
+          `[data-timeline-row-id="${CSS.escape(messageEntry.id)}"]`,
+        );
+        if (!root) continue;
+
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const textNodes: Array<{ node: Text; start: number; end: number }> = [];
+        let text = "";
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          const value = node.textContent ?? "";
+          textNodes.push({
+            node: node as Text,
+            start: text.length,
+            end: text.length + value.length,
+          });
+          text += value;
+        }
+        for (const [occurrenceIndex, textRange] of findTextRanges(
+          text,
+          findQuery,
+          findCaseSensitive,
+        ).entries()) {
+          const startNode = textNodes.find(
+            ({ start, end }) => start <= textRange.start && textRange.start < end,
+          );
+          const endNode = textNodes.find(
+            ({ start, end }) => start < textRange.end && textRange.end <= end,
+          );
+          if (!startNode || !endNode) continue;
+          const range = new Range();
+          range.setStart(startNode.node, textRange.start - startNode.start);
+          range.setEnd(endNode.node, textRange.end - endNode.start);
+          allRanges.push(range);
+          if (textIndex === match.textIndex && occurrenceIndex === match.occurrenceIndex) {
+            activeRange = range;
+          }
+        }
+      }
+      CSS.highlights.set(THREAD_FIND_HIGHLIGHT, new Highlight(...allRanges));
+      if (activeRange) {
+        CSS.highlights.set(THREAD_FIND_ACTIVE_HIGHLIGHT, new Highlight(activeRange));
+      }
+      return activeRange;
+    };
+    const scheduleRepaint = () => {
+      cancelAnimationFrame(repaintFrame);
+      repaintFrame = requestAnimationFrame(() => paintHighlights());
+    };
+    const observer = new MutationObserver(scheduleRepaint);
+    observer.observe(timelineViewportElement, { childList: true, subtree: true });
+    const mountFrame = requestAnimationFrame(() => {
+      paintFrame = requestAnimationFrame(() => {
+        const activeRange = paintHighlights();

@@ -573,6 +802,78 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <div className="absolute right-4 top-3 z-30 rounded-[var(--control-radius)] shadow-lg">
+              <InputGroup className="w-auto dark:bg-background **:[input]:w-48">
+                <InputGroupAddon>
+                  <SearchIcon aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  ref={findInputRef}
+                  value={findQuery}
+                  onChange={(event) => updateFindQuery(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") goToFindMatch(event.shiftKey ? -1 : 1);
+                  }}
+                  aria-label="Find in thread"
+                  placeholder="Find in thread"
+                />
+                <InputGroupAddon align="inline-end" className="gap-1">
+                  <Button
+                    type="button"
+                    size="icon-xs"
+                    variant="ghost"
+                    className="data-pressed:border-primary! data-pressed:bg-primary! data-pressed:text-primary-foreground!"
+                    data-pressed={findCaseSensitive || undefined}
+                    aria-label="Match case"
+                    aria-pressed={findCaseSensitive}
+                    title="Match case"
+                    onClick={() => {
+                      setFindCaseSensitive(!findCaseSensitive);
+                      setFindMatchIndex(0);
+                      onManualNavigation();
+                    }}
+                  >
+                    <span className="text-[11px] font-semibold leading-none">Aa</span>

@@ -573,6 +803,76 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
         <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+          {findOpen ? (
+            <div className="absolute right-4 top-3 z-30 w-[calc(100%-2rem)] max-w-sm rounded-[var(--control-radius)] shadow-lg">
+              <InputGroup className="w-full dark:bg-background">
+                <InputGroupAddon>
+                  <SearchIcon aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  ref={findInputRef}
+                  value={findQuery}
+                  onChange={(event) => updateFindQuery(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") goToFindMatch(event.shiftKey ? -1 : 1);
+                  }}
+                  aria-label="Find in thread"
+                  placeholder="Find in thread"
+                />
+                <InputGroupAddon align="inline-end" className="gap-1">
+                  <Toggle
+                    pressed={findCaseSensitive}
+                    size="xs"
+                    variant="primary"
+                    className="font-mono text-[11px]"

@@ -420,6 +424,103 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     ],
   );
   const rows = useStableRows(rawRows);
+  const [findOpen, setFindOpen] = useState(false);
+  const [findQuery, setFindQuery] = useState("");
+  const [findMatchIndex, setFindMatchIndex] = useState(0);
+  const findInputRef = useRef<HTMLInputElement>(null);
+  const findTexts = useMemo(
+    () => rows.map((row) => (row.kind === "message" ? row.message.text : null)),
+    [rows],
+  );
+  const findMatches = useMemo(() => findTextMatches(findTexts, findQuery), [findQuery, findTexts]);
+  const updateFindQuery = useCallback(
+    (query: string) => {
+      setFindQuery(query);
+      setFindMatchIndex(0);
+      const firstMatch = findTextMatches(findTexts, query)[0];
+      if (firstMatch === undefined) return;
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({ index: firstMatch, animated: false, viewOffset: 80 });
+    },
+    [findTexts, listRef, onManualNavigation],
+  );
+  const goToFindMatch = useCallback(
+    (delta: number) => {
+      if (findMatches.length === 0) return;
+      const next = (findMatchIndex + delta + findMatches.length) % findMatches.length;
+      setFindMatchIndex(next);
+      onManualNavigation();
+      void listRef.current?.scrollToIndex({
+        index: findMatches[next]!,
+        animated: false,
+        viewOffset: 80,
+      });
+    },
+    [findMatchIndex, findMatches, listRef, onManualNavigation],
+  );
+
+  useEffect(() => {
+    const handleFindShortcut = (event: globalThis.KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() !== "f" ||
+        (!event.metaKey && !event.ctrlKey) ||
+        event.altKey ||
+        event.shiftKey ||
+        (event.target instanceof Element && event.target.closest("[data-terminal-owner]"))
+      ) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      setFindOpen(true);
+    };

@@ -242,6 +246,67 @@ export function normalizeCompactToolLabel(value: string): string {
   return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim();
 }
 
+export interface TextMatch {
+  readonly textIndex: number;
+  readonly occurrenceIndex: number;
+}
+
+export interface TextRange {
+  readonly start: number;
+  readonly end: number;
+}
+
+const markdownSearchTextProcessor = unified().use(remarkParse).use(remarkGfm);
+
+export function renderMarkdownSearchText(markdown: string): string {
+  return toString(markdownSearchTextProcessor.parse(markdown), { includeImageAlt: false });