From 97daae9b779e6d85b711f006b6ac9eb90f437ff6 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Mon, 24 Aug 2026 20:14:40 +1000
Subject: [PATCH] feat(app): align context search rows with figma (#44654)

---
 .../src/components/message-part.css           | 49 ++++++++++++++++++-
 .../src/storybook/current-session-fixtures.ts |  2 +
 .../session-ui/src/tools/tool-renderer.tsx    | 20 +++++---
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css
index c7c6681690d..86a3b8534b9 100644
--- a/packages/session-ui/src/components/message-part.css
+++ b/packages/session-ui/src/components/message-part.css
@@ -674,14 +674,59 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding: 0;
+  /* The 28px compact trigger centers a 16px line box, already leaving 6px above this list. */
+  padding: 4px 0 0 12px;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  /* 16px line boxes with 13px gaps reproduce the design's 29px row pitch for 13px solid rows. */
+  gap: 13px;
 
   [data-slot="context-tool-group-item"] {
     min-width: 0;
     padding: 0;
+    opacity: 0.8;
+
+    [data-slot="basic-tool-tool-info-structured"] {
+      gap: 6px;
+    }
+
+    [data-slot="basic-tool-tool-title"],
+    [data-slot="basic-tool-tool-subtitle"],
+    [data-slot="basic-tool-tool-arg"],
+    [data-slot="context-tool-group-matches"] {
+      font-family: var(--v2-font-family-sans);
+      font-size: 13px;
+      font-weight: 440;
+      line-height: var(--line-height-compact);
+      letter-spacing: -0.04px;
+    }
+
+    [data-slot="basic-tool-tool-subtitle"] {
+      color: var(--v2-text-text-faint);
+    }
+
+    [data-slot="context-tool-group-dot"] {
+      flex-shrink: 0;
+      width: 6px;
+      height: 6px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before {
+        content: "";
+        width: 2.25px;
+        height: 2.25px;
+        border-radius: 50%;
+        background-color: var(--v2-icon-icon-muted);
+      }
+    }
+
+    [data-slot="context-tool-group-matches"] {
+      flex-shrink: 0;
+      white-space: nowrap;
+      color: var(--v2-text-text-faint);
+    }
   }
 }
 
diff --git a/packages/session-ui/src/storybook/current-session-fixtures.ts b/packages/session-ui/src/storybook/current-session-fixtures.ts
index 11a9610ff4b..f1fe93a01cc 100644
--- a/packages/session-ui/src/storybook/current-session-fixtures.ts
+++ b/packages/session-ui/src/storybook/current-session-fixtures.ts
@@ -701,6 +701,7 @@ export const inspectAndExplainDocument = document([
         args: { pattern: "src/timeline/**/*.{ts,tsx}", path: "packages/session-ui" },
         output:
           "packages/session-ui/src/timeline/projection.ts\npackages/session-ui/src/timeline/session-timeline.tsx\npackages/session-ui/src/timeline/timeline-row.ts",
+        metadata: { count: 3 },
       }),
       completedTool({
         id: "tool_research_grep",
@@ -709,6 +710,7 @@ export const inspectAndExplainDocument = document([
         args: { pattern: "TimelineRow.key", path: "packages/session-ui/src/timeline", include: "*.ts*" },
         output:
           "packages/session-ui/src/timeline/projection.ts:39\npackages/session-ui/src/timeline/session-timeline.tsx:332",
+        metadata: { matches: 2 },
       }),
       completedTool({
         id: "tool_research_read",
diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index dfa01161420..ac3dcdeecfb 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -492,6 +492,7 @@ export function CurrentContextToolGroup(props: {
         icon="glasses"
         status={pending() ? "running" : "completed"}
         compact
+        rail={false}
         allowOpenWhilePending
         open={props.open}
         onOpenChange={change}
@@ -545,6 +546,10 @@ export function CurrentContextToolGroup(props: {
                               {(arg) => <span data-slot="basic-tool-tool-arg">{arg}</span>}
                             </For>
                           </div>
+                          <Show when={trigger().matches}>
+                            <span data-slot="context-tool-group-dot" />
+                            <span data-slot="context-tool-group-matches">{trigger().matches}</span>
+                          </Show>
                         </div>
                       </div>
                     </div>
@@ -644,23 +649,22 @@ function currentContextToolTrigger(tool: SessionMessageAssistantTool, i18n: Retu
       ...(typeof input.offset === "number" ? [`offset=${input.offset}`] : []),
       ...(typeof input.limit === "number" ? [`limit=${input.limit}`] : []),
     ]
-    return { title: i18n.t("ui.tool.read"), subtitle: getFilename(path), args }
+    return { title: i18n.t("ui.tool.read"), subtitle: getFilename(path), args, matches: undefined }
   }
-  if (tool.name === "list") return { title: i18n.t("ui.tool.list"), subtitle: displayDirectory(path), args: [] }
+  if (tool.name === "list")
+    return { title: i18n.t("ui.tool.list"), subtitle: displayDirectory(path), args: [], matches: undefined }
   if (tool.name === "glob")
     return {
       title: i18n.t("ui.tool.glob"),
       subtitle: displayDirectory(path),
-      args: [...(pattern ? [`pattern=${pattern}`] : []), ...(matches ? [matches] : [])],
+      args: pattern ? [`pattern=${pattern}`] : [],
+      matches,
     }
   return {
     title: i18n.t("ui.tool.grep"),
     subtitle: displayDirectory(path),
-    args: [
-      ...(pattern ? [`pattern=${pattern}`] : []),
-      ...(include ? [`include=${include}`] : []),
-      ...(matches ? [matches] : []),
-    ],
+    args: [...(pattern ? [`pattern=${pattern}`] : []), ...(include ? [`include=${include}`] : [])],
+    matches,
   }
 }