From edea580b932de2950a61867d9ce9ebd9b180d59b Mon Sep 17 00:00:00 2001
From: Review <5129532+JasprW@users.noreply.github.com>
Date: Tue, 27 Oct 2026 14:57:37 +0800
Subject: [PATCH] feat(search): mark the hit's words in the item it opens and
 unfold it

The focus request now carries the hit's field and matched words; the targeted
note, check, idea, artifact or Progress card marks them until the sidebar
closes and shows the full text (note line limit lifted, check output shown,
Show more opened, full link or path). DRAWER-SPEC Focus from search 6-7.
---
 client/content-card.tsx           | 33 +++++++++++++++++++-----
 client/drawer-focus-logic.test.ts | 13 ++++++++++
 client/drawer-focus-logic.ts      | 17 ++++++++++---
 client/drawer-focus.tsx           | 34 ++++++++++++++++++++++---
 client/drawer.tsx                 | 18 ++++++++++---
 client/task-artifacts.tsx         | 14 ++++++++---
 client/task-ideas.tsx             | 32 ++++++++++++++++++-----
 client/task-progress.tsx          | 31 +++++++++++++++++------
 client/task-workpad.tsx           | 19 +++++++++-----
 docs/DRAWER-SPEC.md               |  2 ++
 docs/SEARCH-SPEC.md               |  2 ++
 server/search.ts                  | 28 +++------------------
 shared/search-text.test.ts        | 19 ++++++++++++++
 shared/search-text.ts             | 42 +++++++++++++++++++++++++++++++
 14 files changed, 240 insertions(+), 64 deletions(-)
 create mode 100644 shared/search-text.test.ts
 create mode 100644 shared/search-text.ts

diff --git a/client/content-card.tsx b/client/content-card.tsx
index 49a12f87..5c779d64 100644
--- a/client/content-card.tsx
+++ b/client/content-card.tsx
@@ -1,4 +1,5 @@
-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
+import { Marked } from "./drawer-focus";
 import { Animated, Pressable, View } from "react-native";
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import { useMotionHeight, useMotionValue } from "./motion";
@@ -23,19 +24,22 @@ export function ContentCard({
   footer,
   after,
   defaultOpen = false,
+  openWhen,
   children,
 }: {
   footer?: ReactNode;
   after?: ReactNode;
   /** Start expanded (the welcome tour shows every field); Show less still collapses it. */
   defaultOpen?: boolean;
+  /** Expands whenever this changes to a value (a search hit on the card); Show less still collapses it. */
+  openWhen?: unknown;
   children: ReactNode;
 }) {
   const { colors } = useTheme();
   return (
     <View style={cardFrameStyle(colors)}>
       <View style={{ padding: space[3], paddingBottom: space[3] }}>
-        <Clamped background={colors.surface1} footer={footer} defaultOpen={defaultOpen}>
+        <Clamped background={colors.surface1} footer={footer} defaultOpen={defaultOpen} openWhen={openWhen}>
           {children}
         </Clamped>
       </View>
@@ -67,15 +71,17 @@ export function CardText({ children }: { children: ReactNode }) {
   );
 }
 
-/** A titled block (Target, Recap, What to do…). Renders nothing for empty text. */
-export function CardField({ title, text }: { title: string; text: string }) {
+/** A titled block (Target, Recap, What to do…). Renders nothing for empty text. `terms` are marked (search). */
+export function CardField({ title, text, terms }: { title: string; text: string; terms?: readonly string[] | null }) {
   if (!text.trim()) return null;
   return (
     <View style={{ gap: 2 }}>
       <Label muted size={font.xs} selectable={false}>
         {title}
       </Label>
-      <CardText>{text}</CardText>
+      <CardText>
+        <Marked text={text} terms={terms} />
+      </CardText>
     </View>
   );
 }
@@ -114,9 +120,24 @@ const CLAMP_HEIGHT = 104;
  * bottom-left corner and `footer` on the right of the same row.
  * `background` is the surface the fade blends into.
  */
-function Clamped({ background, footer, defaultOpen = false, children }: { background: string; footer?: ReactNode; defaultOpen?: boolean; children: ReactNode }) {
+function Clamped({
+  background,
+  footer,
+  defaultOpen = false,
+  openWhen,
+  children,
+}: {
+  background: string;
+  footer?: ReactNode;
+  defaultOpen?: boolean;
+  openWhen?: unknown;
+  children: ReactNode;
+}) {
   const [natural, setNatural] = useState(0);
   const [open, setOpen] = useState(defaultOpen);
+  useEffect(() => {
+    if (openWhen) setOpen(true);
+  }, [openWhen]);
   const overflows = natural > CLAMP_HEIGHT + 8;
   const target = natural ? (open || !overflows ? natural : CLAMP_HEIGHT) : null;
   const height = useMotionHeight(target);
diff --git a/client/drawer-focus-logic.test.ts b/client/drawer-focus-logic.test.ts
index f3294e11..dfca598e 100644
--- a/client/drawer-focus-logic.test.ts
+++ b/client/drawer-focus-logic.test.ts
@@ -12,6 +12,19 @@ describe("focus from search (DRAWER-SPEC)", () => {
     expect(focusOfHit({ source: "card" })).toBeNull();
     expect(focusOfHit({ source: "memory", refId: "m" })).toBeNull();
   });
+  test("a hit carries its field and matched words for the highlight", () => {
+    expect(focusOfHit({ source: "note", refId: "e1", field: "note", snippet: "ran the Search test", ranges: [[8, 14]] })).toEqual({
+      section: "activity",
+      target: "event:e1",
+      field: "note",
+      terms: ["search"],
+    });
+    expect(focusOfHit({ source: "summary", refId: "s1", field: "target", snippet: "ship it", ranges: [[0, 4]] })).toEqual({
+      section: "progress",
+      field: "target",
+      terms: ["ship"],
+    });
+  });
   test("Activity keeps its last 12 and widens back to an older target only", () => {
     const ids = Array.from({ length: 30 }, (_, i) => `e${i}`);
     expect(activityStart(ids, "")).toBe(18);
diff --git a/client/drawer-focus-logic.ts b/client/drawer-focus-logic.ts
index 23fcd920..3936aa7c 100644
--- a/client/drawer-focus-logic.ts
+++ b/client/drawer-focus-logic.ts
@@ -1,20 +1,29 @@
 import type { SearchHit } from "../shared/search";
+import { termsOfHit } from "../shared/search-text";
 
 /** Focus from search (DRAWER-SPEC "Focus from search", SEARCH-SPEC §5.3): which drawer section and item a hit lands on. */
 
 export type FocusSection = "progress" | "workpad" | "artifacts" | "ideas" | "activity";
-export type DrawerFocus = { key: string; section: FocusSection; target?: string };
+export type DrawerFocus = {
+  key: string;
+  section: FocusSection;
+  target?: string;
+  /** The hit's field (`recap`, `evidence`, `detail`…) and its matched words, for the highlight. */
+  field?: string;
+  terms?: string[];
+};
 /** How long the target keeps its ring. */
 export const FOCUS_RING_MS = 1600;
 /** Without a rendered target by then, the section itself is the target. */
 export const FOCUS_FALLBACK_MS = 1500;
 
 /** Card-field hits have no section: the drawer just opens. */
-export function focusOfHit(hit: Pick<SearchHit, "source" | "refId">): Omit<DrawerFocus, "key"> | null {
-  const item = (prefix: string) => (hit.refId ? { target: `${prefix}:${hit.refId}` } : {});
+export function focusOfHit(hit: Pick<SearchHit, "source" | "refId"> & Partial<Pick<SearchHit, "field" | "snippet" | "ranges">>): Omit<DrawerFocus, "key"> | null {
+  const mark = hit.snippet !== undefined && hit.ranges ? { field: hit.field, terms: termsOfHit({ snippet: hit.snippet, ranges: hit.ranges }) } : {};
+  const item = (prefix: string) => ({ ...mark, ...(hit.refId ? { target: `${prefix}:${hit.refId}` } : {}) });
   switch (hit.source) {
     case "summary":
-      return { section: "progress" };
+      return { section: "progress", ...mark };
     case "note":
       return { section: "activity", ...item("event") };
     case "workpad":
diff --git a/client/drawer-focus.tsx b/client/drawer-focus.tsx
index 65595a99..97e68ba6 100644
--- a/client/drawer-focus.tsx
+++ b/client/drawer-focus.tsx
@@ -1,11 +1,14 @@
 import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
-import { View } from "react-native";
-import { CueRing, radius } from "./ui";
+import { Text, View } from "react-native";
+import { matchRanges } from "../shared/search-text";
+import { CueRing, radius, useTheme } from "./ui";
 
 export * from "./drawer-focus-logic";
 import { FOCUS_RING_MS } from "./drawer-focus-logic";
 
-type FocusState = { key: string; target: string; found(key: string, node: View): void };
+/** The words to mark in one item until the sidebar closes (DRAWER-SPEC "Focus from search" 6–7). */
+export type FocusMark = { target: string; terms: readonly string[]; field?: string };
+type FocusState = { key: string; target: string; found(key: string, node: View): void; mark: FocusMark | null };
 const FocusContext = createContext<FocusState | null>(null);
 export const DrawerFocusProvider = FocusContext.Provider;
 
@@ -14,6 +17,31 @@ export function useFocusTarget(): string {
   return useContext(FocusContext)?.target ?? "";
 }
 
+/** The mark for this item (`event:…`, `section:progress`…), or null when it is not the one a hit opened. */
+export function useMark(id: string): FocusMark | null {
+  const mark = useContext(FocusContext)?.mark;
+  return mark && mark.target === id && mark.terms.length ? mark : null;
+}
+
+/** `text` with the marked words in bold accent (like the Search page snippets); plain text without terms. Put inside a Label. */
+export function Marked({ text, terms }: { text: string; terms?: readonly string[] | null }) {
+  const { colors } = useTheme();
+  if (!terms?.length) return <>{text}</>;
+  const parts: ReactNode[] = [];
+  let at = 0;
+  matchRanges(text, terms).forEach(([start, end], i) => {
+    if (start > at) parts.push(text.slice(at, start));
+    parts.push(
+      <Text key={i} style={{ fontWeight: "600", color: colors.accent }}>
+        {text.slice(start, end)}
+      </Text>,
+    );
+    at = end;
+  });
+  if (at < text.length) parts.push(text.slice(at));
+  return <>{parts}</>;
+}
+
 /**
  * Wraps a section or row. When it is the focus target it reports its node to the drawer (which scrolls to it)
  * and shows the accent ring for a moment. Always a View, so becoming the target never remounts the children.
diff --git a/client/drawer.tsx b/client/drawer.tsx
index c5bf2420..bbfecc43 100644
--- a/client/drawer.tsx
+++ b/client/drawer.tsx
@@ -48,7 +48,7 @@ import { useSessionReads } from "./session-reads";
 import { sessionAttention } from "../shared/session-attention";
 import type { SessionEntry } from "./session-link";
 import { Enter, MotionReveal, useReducedMotion, useSettled } from "./motion";
-import { DrawerFocusProvider, FOCUS_FALLBACK_MS, FOCUS_RING_MS, FocusTarget, activityStart, type DrawerFocus } from "./drawer-focus";
+import { DrawerFocusProvider, FOCUS_FALLBACK_MS, FOCUS_RING_MS, FocusTarget, Marked, activityStart, useMark, type DrawerFocus } from "./drawer-focus";
 import { perfLap, perfStart, perfEnd, usePerfRender } from "./perf";
 import { TaskMetadata } from "./task-metadata";
 import { Chevron, Collapse, Disclosure, Section, useSectionStates } from "./disclosure";
@@ -242,7 +242,16 @@ function TaskDrawerView({
       () => undefined,
     );
   });
-  const focusState = useMemo(() => (focusTarget ? { ...focusTarget, found: focusFound } : null), [focusTarget, focusFound]);
+  // The highlight follows the focus prop itself: the board clears it when the sidebar closes or another card opens,
+  // and a new hit replaces it (DRAWER-SPEC "Focus from search" 6).
+  const mark = useMemo(
+    () => (focus?.terms?.length ? { target: focus.target || `section:${focus.section}`, terms: focus.terms, field: focus.field } : null),
+    [focus],
+  );
+  const focusState = useMemo(
+    () => (focusTarget || mark ? { key: focusTarget?.key ?? "", target: focusTarget?.target ?? "", found: focusFound, mark } : null),
+    [focusTarget, focusFound, mark],
+  );
   // Heavy sections and their reads start once the open transition is over.
   const settled = useSettled(task.id);
   const ready = active && settled;
@@ -1326,6 +1335,7 @@ function ActivityItem({
   last: boolean;
 }) {
   const { colors } = useTheme();
+  const mark = useMark(`event:${event.id}`);
   const question = event.reportKind === "question";
   const verb = question
     ? t("Asked")
@@ -1359,8 +1369,8 @@ function ActivityItem({
           </View>
         )}
         {!!event.note && !isNoMoves(event) && (
-          <Label muted={!question} size={font.sm} lines={question ? 8 : 4}>
-            {event.action === "type_set" && (taskTypes as readonly string[]).includes(event.note) ? taskTypeLabels[event.note as Task["type"] & string] : event.note}
+          <Label muted={!question} size={font.sm} lines={mark ? undefined : question ? 8 : 4}>
+            {event.action === "type_set" && (taskTypes as readonly string[]).includes(event.note) ? taskTypeLabels[event.note as Task["type"] & string] : <Marked text={event.note} terms={mark?.terms} />}
           </Label>
         )}
         <Label muted size={font.xs}>
diff --git a/client/task-artifacts.tsx b/client/task-artifacts.tsx
index f4a90ae0..df735568 100644
--- a/client/task-artifacts.tsx
+++ b/client/task-artifacts.tsx
@@ -11,7 +11,7 @@ import { IdeaRow, useExitList } from "./task-ideas";
 import { useTaskDetail, invalidateCardViews } from "./card-detail-query";
 import { SessionMarkdown } from "./session-content";
 import { PagedRows, Section, ShowMore, pageSize, type SectionState } from "./disclosure";
-import { FocusTarget, limitFor, useFocusTarget } from "./drawer-focus";
+import { FocusTarget, Marked, limitFor, useFocusTarget, useMark } from "./drawer-focus";
 import { AiMark, Actions, Button, Choices, Field, IconButton, Label, Notice, Theme, font, message, space, touch, useTheme, noFocusRing } from "./ui";
 import { t, tn } from "../shared/i18n";
 import { BrandIcon } from "./brand-icons";
@@ -222,6 +222,8 @@ const ArtifactRow = memo(function ArtifactRow({
   onRemove(artifact: Artifact): void;
 }) {
   const { colors } = useTheme();
+  // A search hit on this row unclips it and adds the full link or path (DRAWER-SPEC "Focus from search" 7).
+  const mark = useMark(`artifact:${artifact.id}`);
   const agent = artifact.createdBy === "agent";
   const source = agent ? t("Added by an agent") : t("Added by you");
   const role = artifact.role === "input" ? t("Input") : t("Output");
@@ -240,8 +242,14 @@ const ArtifactRow = memo(function ArtifactRow({
       >
         {external ? <BrandIcon family={familyOf(external.provider)} size={14} /> : <Icon name={icon} size={14} color={missing ? colors.foregroundMuted : colors.foreground} />}
         <View style={{ flex: 1, minWidth: 0 }}>
-          <Label size={font.md} muted={missing} lines={1} selectable={false}>{artifact.title}</Label>
-          <Label size={font.sm} muted lines={1} selectable={false}>{missing ? `${t("Missing")} · ${detail}` : detail}</Label>
+          <Label size={font.md} muted={missing} lines={mark ? undefined : 1} selectable={false}><Marked text={artifact.title} terms={mark?.terms} /></Label>
+          <Label size={font.sm} muted lines={mark ? undefined : 1} selectable={false}>
+            {missing && `${t("Missing")} · `}
+            <Marked text={detail} terms={mark?.terms} />
+          </Label>
+          {!!mark && detail !== artifact.target && (
+            <Label size={font.sm} muted mono selectable={false}><Marked text={artifact.target} terms={mark.terms} /></Label>
+          )}
         </View>
         {agent ? <AiMark size={12} /> : <Icon name="User" size={12} color={colors.foregroundMuted} />}
       </Pressable>
diff --git a/client/task-ideas.tsx b/client/task-ideas.tsx
index 75ca6a29..9a431dbc 100644
--- a/client/task-ideas.tsx
+++ b/client/task-ideas.tsx
@@ -9,7 +9,7 @@ import { continuesInCard } from "../shared/ideas";
 import { eventPoint, useMenuOpener, type MenuEntry, type Point } from "./context-menu";
 import { CardBody, CardField, CardHeadline, CardMeta, CardMetaRow, CardText, ContentCard } from "./content-card";
 import { Disclosure, Section, type SectionState } from "./disclosure";
-import { FocusTarget, useFocusTarget } from "./drawer-focus";
+import { FocusTarget, Marked, useFocusTarget, useMark } from "./drawer-focus";
 import { lerp, motionDuration, useReducedMotion } from "./motion";
 import { exitRows } from "./idea-rows";
 import { useTaskDetail, invalidateCardViews } from "./card-detail-query";
@@ -453,6 +453,9 @@ export const IdeaCard = memo(function IdeaCard({
   onDismiss(idea: Idea): void;
 }) {
   const { colors } = useTheme();
+  // A search hit on this idea marks its words and opens it past Show more (DRAWER-SPEC "Focus from search" 7).
+  const mark = useMark(`idea:${idea.id}`);
+  const terms = mark?.terms;
   const meta = [
     <CardMeta
       key="scope"
@@ -474,6 +477,7 @@ export const IdeaCard = memo(function IdeaCard({
   return (
     <ContentCard
       after={source}
+      openWhen={mark}
       footer={
         <View style={{ flexShrink: 1, flexDirection: "row", justifyContent: "flex-end", gap: space[2] }}>
           <Button quiet disabled={disabled} label={t("Dismiss {title}", { title: idea.title })} onPress={() => onDismiss(idea)}>
@@ -495,15 +499,21 @@ export const IdeaCard = memo(function IdeaCard({
       <CardBody>
         {/* Title and meta stay together. */}
         <View style={{ gap: space[1.5] }}>
-          <CardHeadline selectable={false}>{idea.title}</CardHeadline>
+          <CardHeadline selectable={false}>
+            <Marked text={idea.title} terms={terms} />
+          </CardHeadline>
           <CardMetaRow>
             {meta}
             <CardMeta text={relativeTime(idea.createdAt)} />
           </CardMetaRow>
         </View>
-        {!!idea.rationale.trim() && <CardText>{idea.rationale}</CardText>}
-        <CardField title={t("What to do")} text={idea.detail} />
-        <CardField title={t("Context")} text={idea.context} />
+        {!!idea.rationale.trim() && (
+          <CardText>
+            <Marked text={idea.rationale} terms={terms} />
+          </CardText>
+        )}
+        <CardField title={t("What to do")} text={idea.detail} terms={terms} />
+        <CardField title={t("Context")} text={idea.context} terms={terms} />
       </CardBody>
     </ContentCard>
   );
@@ -527,11 +537,21 @@ export function ClosedIdea({
 }) {
   const { colors } = useTheme();
   const accepted = idea.status === "accepted";
+  // A search hit here: mark the title and, when the words are in another field, show that field under it.
+  const mark = useMark(`idea:${idea.id}`);
+  const matched = mark && mark.field && mark.field !== "title" ? idea[mark.field as "detail" | "rationale" | "context"] : "";
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: space[2], minHeight: touch ? 44 : 32 }}>
       <Icon name={accepted ? "ThumbsUp" : "CircleSlash"} size={14} color={accepted ? colors.statusSuccess : colors.foregroundMuted} />
       <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
-        <Label size={font.sm} muted={!accepted} lines={1} selectable={false}>{idea.title}</Label>
+        <Label size={font.sm} muted={!accepted} lines={mark ? undefined : 1} selectable={false}>
+          <Marked text={idea.title} terms={mark?.terms} />
+        </Label>
+        {!!matched && (
+          <Label size={font.sm} muted selectable={false}>
+            <Marked text={matched} terms={mark?.terms} />
+          </Label>
+        )}
         {accepted &&
           (sentTo ? (
             <Label muted size={font.xs} lines={1} selectable={false}>{`→ ${t("Sent to {session}", { session: sentTo })}`}</Label>
diff --git a/client/task-progress.tsx b/client/task-progress.tsx
index 186f2cd8..b68d2370 100644
--- a/client/task-progress.tsx
+++ b/client/task-progress.tsx
@@ -7,6 +7,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import * as rpc from "../shared/rpc";
 import { modelLabel, targetText, type SummaryEntry, type SummaryOverview } from "../shared/summary";
 import { CardBody, CardField, CardFootnote, CardHeadline, ContentCard } from "./content-card";
+import { Marked, useMark } from "./drawer-focus";
 import { Section, type SectionState } from "./disclosure";
 import { summariesKey, useSummariesQuery } from "./queries";
 import { workpadEnabled, workpadOf } from "../shared/workpad";
@@ -36,6 +37,7 @@ export function TaskProgress({ taskId, active, section }: { taskId: string; acti
   const refreshRpc = useRpc(rpc.refreshSummary);
   const [requesting, setRequesting] = useState(false);
   const latest = cardProgress(overview.data, taskId);
+  const mark = useMark("section:progress");
   const running = !!overview.data?.running.includes(taskId);
   const error = overview.data?.errors.find((e) => e.taskId === taskId);
   const refresh = async () => {
@@ -66,8 +68,12 @@ export function TaskProgress({ taskId, active, section }: { taskId: string; acti
       }
     >
       {latest ? (
-        <ContentCard footer={<CardFootnote>{t("Updated {time}", { time: relativeTime(latest.at) })} · {modelLabel(latest.model)}</CardFootnote>}>
-          <SummaryBody entry={hideTarget ? { ...latest, target: "" } : latest} />
+        <ContentCard
+          openWhen={mark}
+          footer={<CardFootnote>{t("Updated {time}", { time: relativeTime(latest.at) })} · {modelLabel(latest.model)}</CardFootnote>}
+        >
+          {/* A search hit in Target shows it even where the workpad replaces it (DRAWER-SPEC "Focus from search" 7). */}
+          <SummaryBody entry={hideTarget && mark?.field !== "target" ? { ...latest, target: "" } : latest} terms={mark?.terms} />
         </ContentCard>
       ) : (
         <Label muted size={font.sm}>
@@ -88,13 +94,24 @@ export function TaskProgress({ taskId, active, section }: { taskId: string; acti
 }
 
 /** Each field in full: brevity comes from the prompt, never from cutting text (TASK-SUMMARY-SPEC §3, §7). */
-export function SummaryBody({ entry }: { entry: Pick<SummaryEntry, "state" | "target" | "recap" | "next"> }) {
+export function SummaryBody({
+  entry,
+  terms,
+}: {
+  entry: Pick<SummaryEntry, "state" | "target" | "recap" | "next">;
+  /** Search words to mark. */
+  terms?: readonly string[] | null;
+}) {
   return (
     <CardBody>
-      {!!entry.state && <CardHeadline>{entry.state}</CardHeadline>}
-      {!!entry.target && <CardField title={t("Target")} text={targetText(entry.target)} />}
-      {!!entry.recap && <CardField title={t("Recap")} text={entry.recap} />}
-      {!!entry.next && <CardField title={t("Next")} text={entry.next} />}
+      {!!entry.state && (
+        <CardHeadline>
+          <Marked text={entry.state} terms={terms} />
+        </CardHeadline>
+      )}
+      {!!entry.target && <CardField title={t("Target")} text={targetText(entry.target)} terms={terms} />}
+      {!!entry.recap && <CardField title={t("Recap")} text={entry.recap} terms={terms} />}
+      {!!entry.next && <CardField title={t("Next")} text={entry.next} terms={terms} />}
     </CardBody>
   );
 }
diff --git a/client/task-workpad.tsx b/client/task-workpad.tsx
index 3cac639d..81e2cca8 100644
--- a/client/task-workpad.tsx
+++ b/client/task-workpad.tsx
@@ -10,7 +10,7 @@ import type { AcceptanceItem, CheckState, ConfusionItem, PlanSnapshot, Task, Val
 import { plansOf, validationFreshness, workpadOf } from "../shared/workpad";
 import { useLiveAgents } from "./queries";
 import { Collapse, PagedRows, Section, ShowMore, pageSize, type SectionState } from "./disclosure";
-import { FocusTarget, limitFor, useFocusTarget } from "./drawer-focus";
+import { FocusTarget, Marked, limitFor, useFocusTarget, useMark } from "./drawer-focus";
 import { AiMark, IconButton, Label, font, message, radius, relativeTime, space, touch, useTheme, noFocusRing } from "./ui";
 import { t } from "../shared/i18n";
 
@@ -264,6 +264,7 @@ function ByYou({ by }: { by: "agent" | "human" }) {
 }
 
 function AcceptanceRow({ item, disabled, onToggle }: { item: AcceptanceItem; disabled: boolean; onToggle(): void }) {
+  const mark = useMark(`workpad:${item.id}`);
   return (
     <Pressable
       accessibilityRole="checkbox"
@@ -276,7 +277,7 @@ function AcceptanceRow({ item, disabled, onToggle }: { item: AcceptanceItem; dis
     >
       <Box checked={item.done} />
       <View style={{ flex: 1, minWidth: 0 }}>
-        <Label size={font.md}>{item.text}</Label>
+        <Label size={font.md}><Marked text={item.text} terms={mark?.terms} /></Label>
       </View>
       <ByYou by={item.by} />
     </Pressable>
@@ -291,7 +292,12 @@ function stateLabel(item: ValidationItem, stale: boolean) {
 
 function CheckRow({ item, workpad, disabled, onCycle }: { item: ValidationItem; workpad: Workpad; disabled: boolean; onCycle(): void }) {
   const { colors } = useTheme();
+  const mark = useMark(`workpad:${item.id}`);
   const [open, setOpen] = useState(false);
+  // A search hit on this check shows the whole command and its output (DRAWER-SPEC "Focus from search" 7).
+  useEffect(() => {
+    if (mark) setOpen(true);
+  }, [mark]);
   const stale = validationFreshness(item, workpad.head) === "stale";
   const icon =
     item.state === "pass"
@@ -319,12 +325,12 @@ function CheckRow({ item, workpad, disabled, onCycle }: { item: ValidationItem;
         <Icon name={icon.name} size={16} color={icon.color} />
       </Pressable>
       <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
-        <Label size={font.md}>{item.text}</Label>
+        <Label size={font.md}><Marked text={item.text} terms={mark?.terms} /></Label>
         {!!item.command && (
           // One line until the output is shown (or the command is tapped), so long commands don't fill the sidebar.
           <Pressable accessibilityRole="button" accessibilityState={{ expanded: open }} onPress={() => setOpen(!open)} style={noFocusRing}>
             <Label size={font.sm} muted mono selectable lines={open ? undefined : 1}>
-              {item.command}
+              <Marked text={item.command} terms={mark?.terms} />
             </Label>
           </Pressable>
         )}
@@ -351,7 +357,7 @@ function CheckRow({ item, workpad, disabled, onCycle }: { item: ValidationItem;
             </Pressable>
             <Collapse open={open} id="output">
               <Label size={font.sm} muted mono selectable>
-                {item.evidence}
+                <Marked text={item.evidence} terms={mark?.terms} />
               </Label>
             </Collapse>
           </>
@@ -396,11 +402,12 @@ function PlanList({ plan, title }: { plan: PlanSnapshot; title: string }) {
 
 function ConfusionRow({ item, disabled, onResolve }: { item: ConfusionItem; disabled: boolean; onResolve(): void }) {
   const { colors } = useTheme();
+  const mark = useMark(`workpad:${item.id}`);
   return (
     <View style={{ ...rowStyle(), alignItems: "center" }}>
       <Icon name="CircleHelp" size={14} color={colors.statusWarning} />
       <View style={{ flex: 1, minWidth: 0 }}>
-        <Label size={font.md}>{item.text}</Label>
+        <Label size={font.md}><Marked text={item.text} terms={mark?.terms} /></Label>
       </View>
       <IconButton icon="Check" size={touch ? 36 : 24} label={t("Mark resolved: {text}", { text: item.text })} disabled={disabled} onPress={onResolve} />
     </View>
diff --git a/docs/DRAWER-SPEC.md b/docs/DRAWER-SPEC.md
index a17985de..ff4df0b8 100644
--- a/docs/DRAWER-SPEC.md
+++ b/docs/DRAWER-SPEC.md
@@ -53,6 +53,8 @@ Status: implemented 2026-10-27. Card: 搜索功能 (SEARCH-SPEC §5.3).
 3. The section makes the target rendered: Activity widens its last-12 window back to the target event, Workpad and Artifacts raise their page limit to include it, Ideas opens *Closed* for an accepted or dismissed idea.
 4. When the target is laid out the drawer scrolls it near the top of the sidebar's scroll area (`measureLayout` against the scroll content) and rings it with the accent `CueRing` for about 1.6 s. With Reduce Motion the scroll is not animated. If the target has not rendered 1.5 s after the request (removed item, section off), the section itself is the target.
 5. Toggling any section, scrolling or closing the sidebar never re-applies an old request.
+6. **Highlight.** The request also carries the hit's field and its matched words (the folded text under the snippet's ranges, `termsOfHit` in `shared/search-text.ts`; `#tag` filters are never highlighted). Only the target item marks those words, in the same bold accent as the Search page snippets (`matchRanges`, the same folding as the daemon). The marks stay until the sidebar closes, another card opens or a new hit is clicked; the ring still fades after about 1.6 s. A section-level target (a summary hit) marks the Progress card.
+7. **What the target shows while marked.** So a match is never cut off: an Activity note drops its 4-line limit; a check shows its whole command and its output; the Progress card and an idea card open past *Show more*, and Progress shows the summary's Target even where the workpad normally replaces it (when the hit is in Target); an artifact row shows its title and note unclipped plus its full link or path; a closed idea shows the matched field under its title. Nothing else in the sidebar changes, and no stored setting is written.
 
 ## Type scale
 
diff --git a/docs/SEARCH-SPEC.md b/docs/SEARCH-SPEC.md
index 193701bb..4b4ab9ba 100644
--- a/docs/SEARCH-SPEC.md
+++ b/docs/SEARCH-SPEC.md
@@ -130,6 +130,8 @@ output = {
   | `artifact` | Artifacts | 那条交付物 |
   | `card` | 无 | 只打开侧栏（描述就在顶部） |
 
+  定位到的那一条里，命中的词用和片段相同的粗体强调色标出，一直保持到侧栏关闭；命中在被截断或折叠的部分时，那一条展开显示（笔记不限行数、检查显示完整命令和输出、摘要和想法打开 Show more、交付物显示完整链接或路径，DRAWER-SPEC“Focus from search”第 6、7 条）。
+
   分区只在这次打开时展开，不改用户保存的展开偏好。目标不在当前显示范围（Activity 只列最近 12 条、Workpad/Artifacts 分页）时先把范围扩到它；1.5 秒内还没渲染出来就退回到分区本身。滚到目标后给它约 1.6 秒的强调色描边；系统开了 Reduce Motion 时直接跳过去，不做滚动动画。
 - 记忆行：打开 Memory 页。
 - Search 页保持打开，关掉侧栏后结果还在。
diff --git a/server/search.ts b/server/search.ts
index 8b2b9c63..09820c90 100644
--- a/server/search.ts
+++ b/server/search.ts
@@ -3,6 +3,7 @@ import type { Artifact, Board, BoardEvent, Idea, Project, Task, Workpad } from "
 import type { MemoryEntry } from "../shared/memory";
 import type { SummaryEntry } from "../shared/summary";
 import { parseTagSearch, tagMatches, tagValues } from "../shared/tags";
+import { fold, matchRanges } from "../shared/search-text";
 import {
   agentSearchSources,
   searchInputSchema,
@@ -18,18 +19,7 @@ import {
 
 /** Search (SEARCH-SPEC): a plain scan of the daemon's data, no index on disk. */
 
-/** Case and full-width ASCII folded, one UTF-16 unit for one, so match positions index the original text (§3.1). */
-export function fold(value: string): string {
-  const width = value.replace(/[！-～]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xfee0)).replace(/　/g, " ");
-  const lower = width.toLowerCase();
-  if (lower.length === width.length) return lower;
-  let out = "";
-  for (const ch of width) {
-    const l = ch.toLowerCase();
-    out += l.length === ch.length ? l : ch;
-  }
-  return out;
-}
+export { fold } from "../shared/search-text";
 
 export type SearchQuery = { terms: string[]; tags: string[] };
 
@@ -162,19 +152,7 @@ export function snippetOf(text: string, folded: string, terms: readonly string[]
   if (end < text.length && /[\udc00-\udfff]/.test(text[end])) end++;
   const body = text.slice(start, end).replace(/\s+/g, " ");
   const snippet = `${start > 0 ? "…" : ""}${start > 0 ? body.trimStart() : body}`.trimEnd() + (end < text.length ? "…" : "");
-  const lower = fold(snippet);
-  const ranges: [number, number][] = [];
-  for (const term of terms) {
-    for (let at = lower.indexOf(term); at >= 0; at = lower.indexOf(term, at + term.length)) ranges.push([at, at + term.length]);
-  }
-  ranges.sort((a, b) => a[0] - b[0] || b[1] - a[1]);
-  const merged: [number, number][] = [];
-  for (const r of ranges) {
-    const last = merged[merged.length - 1];
-    if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);
-    else merged.push([r[0], r[1]]);
-  }
-  return { snippet, ranges: merged };
+  return { snippet, ranges: matchRanges(snippet, terms) };
 }
 
 const tier = (task: Task) => (task.archivedAt ? 2 : task.status === "done" || task.status === "cancelled" ? 1 : 0);
diff --git a/shared/search-text.test.ts b/shared/search-text.test.ts
new file mode 100644
index 00000000..4a76eaee
--- /dev/null
+++ b/shared/search-text.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+import { fold, matchRanges, termsOfHit } from "./search-text";
+
+describe("search text (SEARCH-SPEC §3, DRAWER-SPEC Focus from search 6)", () => {
+  test("fold keeps length, lowercases and maps full-width ASCII", () => {
+    expect(fold("ＡＢＣ　Def")).toBe("abc def");
+    expect(fold("İx").length).toBe(2);
+  });
+  test("matchRanges finds every occurrence, case-insensitive, merged", () => {
+    expect(matchRanges("Search the SEARCH page", ["search"])).toEqual([[0, 6], [11, 17]]);
+    expect(matchRanges("搜索功能和搜索", ["搜索", "功能"])).toEqual([[0, 4], [5, 7]]);
+    expect(matchRanges("ＰＲ link", ["pr"])).toEqual([[0, 2]]);
+    expect(matchRanges("nothing", ["x", ""])).toEqual([]);
+  });
+  test("termsOfHit takes the snippet's marked words, folded and once each", () => {
+    expect(termsOfHit({ snippet: "Fix Search and search box", ranges: [[4, 10], [15, 21]] })).toEqual(["search"]);
+    expect(termsOfHit({ snippet: "…a b", ranges: [] })).toEqual([]);
+  });
+});
diff --git a/shared/search-text.ts b/shared/search-text.ts
new file mode 100644
index 00000000..d28d3e47
--- /dev/null
+++ b/shared/search-text.ts
@@ -0,0 +1,42 @@
+/** Search text matching shared by the daemon (SEARCH-SPEC §3) and the drawer's highlight (DRAWER-SPEC "Focus from search"). */
+
+/** Case and full-width ASCII folded, one UTF-16 unit for one, so match positions index the original text. */
+export function fold(value: string): string {
+  const width = value.replace(/[！-～]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xfee0)).replace(/　/g, " ");
+  const lower = width.toLowerCase();
+  if (lower.length === width.length) return lower;
+  let out = "";
+  for (const ch of width) {
+    const l = ch.toLowerCase();
+    out += l.length === ch.length ? l : ch;
+  }
+  return out;
+}
+
+/** Where folded `terms` occur in `text`, sorted and merged, as `[start, end)` UTF-16 offsets. */
+export function matchRanges(text: string, terms: readonly string[]): [number, number][] {
+  const lower = fold(text);
+  const ranges: [number, number][] = [];
+  for (const term of terms) {
+    if (!term) continue;
+    for (let at = lower.indexOf(term); at >= 0; at = lower.indexOf(term, at + term.length)) ranges.push([at, at + term.length]);
+  }
+  ranges.sort((a, b) => a[0] - b[0] || b[1] - a[1]);
+  const merged: [number, number][] = [];
+  for (const r of ranges) {
+    const last = merged[merged.length - 1];
+    if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);
+    else merged.push([r[0], r[1]]);
+  }
+  return merged;
+}
+
+/** The words a hit matched: its snippet's ranges, folded and deduplicated (so #tag filters are never highlighted). */
+export function termsOfHit(hit: { snippet: string; ranges: readonly (readonly [number, number])[] }): string[] {
+  const terms: string[] = [];
+  for (const [start, end] of hit.ranges) {
+    const term = fold(hit.snippet.slice(start, end));
+    if (term && !terms.includes(term)) terms.push(term);
+  }
+  return terms;
+}