From 87d2488c78e4caa34da296f7e55ac97d153bd726 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Sat, 22 Aug 2026 14:23:18 +1000
Subject: [PATCH] feat(desktop): apply left border rail styling to all tool
 disclosures (#44052)

---
 .../session-ui/src/components/basic-tool.css  | 18 +++++++
 .../src/components/basic-tool.stories.tsx     | 53 +++++++++++++++++--
 .../src/components/message-part.css           | 36 +++++--------
 .../src/components/tool-error-card.css        | 11 ++++
 .../session-ui/src/tools/tool-renderer.tsx    |  3 --
 5 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css
index 410648c5ae..c7956a9c9c 100644
--- a/packages/session-ui/src/components/basic-tool.css
+++ b/packages/session-ui/src/components/basic-tool.css
@@ -256,6 +256,24 @@
   }
 }
 
+[data-component="collapsible"].tool-collapsible {
+  > [data-slot="collapsible-content"] {
+    position: relative;
+    margin-inline-start: 12px;
+    padding-inline-start: 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+      bottom: 12px;
+      width: 0.5px;
+      background-color: var(--v2-border-border-muted, rgba(0, 0, 0, 0.08));
+    }
+  }
+}
+
 :root body {
   [data-component="task-tool-card"] {
     gap: 8px;
diff --git a/packages/session-ui/src/components/basic-tool.stories.tsx b/packages/session-ui/src/components/basic-tool.stories.tsx
index 1b799bbe38..9280c308fa 100644
--- a/packages/session-ui/src/components/basic-tool.stories.tsx
+++ b/packages/session-ui/src/components/basic-tool.stories.tsx
@@ -147,9 +147,6 @@ export const WebSearch = {
         }}
       >
         <div data-component="exa-tool-output">
-          <div data-slot="exa-tool-rail">
-            <div data-slot="exa-tool-rail-line" />
-          </div>
           <div data-slot="exa-tool-links">
             <For each={visibleLinks()}>
               {(url, index) => (
@@ -180,3 +177,53 @@ export const WebSearch = {
     )
   },
 }
+
+export const GatheredContext = {
+  render: () => (
+    <BasicTool
+      icon="bullet-list"
+      defaultOpen
+      trigger={{ title: "Used", subtitle: "Shell, Explore, Patch", args: ["4"] }}
+    >
+      <div class="flex flex-col gap-1 text-13-regular text-text-base">
+        <div class="flex items-center gap-2">
+          <span class="font-medium text-text-base">Shell</span>
+          <span class="text-text-muted">opencode2 api get /openapi.json</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="font-medium text-text-base">Explore</span>
+          <span class="text-text-muted">inspect active v2 beta service</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="font-medium text-text-base">Patch</span>
+          <span class="text-text-muted">packages/session-ui/src/tools</span>
+        </div>
+      </div>
+    </BasicTool>
+  ),
+}
+
+export const PatchFileList = {
+  render: () => (
+    <BasicTool icon="code-lines" defaultOpen trigger={{ title: "Patch", subtitle: "4 files" }}>
+      <div class="flex flex-col gap-1.5 text-13-regular text-text-base">
+        <div class="flex items-center gap-2">
+          <Icon name="file-tree" size="small" />
+          <span class="text-text-base">packages/app/src/composer/composer.tsx</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <Icon name="file-tree" size="small" />
+          <span class="text-text-base">packages/session-ui/src/tools/tool-renderer.tsx</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <Icon name="file-tree" size="small" />
+          <span class="text-text-base">packages/session-ui/src/components/basic-tool.css</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <Icon name="file-tree" size="small" />
+          <span class="text-text-base">packages/ui/src/icons/icon/icon.tsx</span>
+        </div>
+      </div>
+    </BasicTool>
+  ),
+}
diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css
index 972161af8c..38c5a5f7aa 100644
--- a/packages/session-ui/src/components/message-part.css
+++ b/packages/session-ui/src/components/message-part.css
@@ -326,7 +326,7 @@
 [data-component="tool-output"] {
   white-space: pre;
   padding: 0;
-  margin-bottom: 24px;
+  margin-bottom: 0px;
   height: fit-content;
   display: flex;
   flex-direction: column;
@@ -570,30 +570,15 @@
 
 [data-component="exa-tool-output"] {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   min-width: 0;
+  width: 100%;
   font-family: var(--font-family-sans);
   font-size: 13px;
   line-height: 16px;
   color: var(--v2-text-text-muted);
 }
 
-[data-slot="exa-tool-rail"] {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  padding-bottom: 12px;
-  padding-inline-start: 12px;
-  padding-inline-end: 16px;
-}
-
-[data-slot="exa-tool-rail-line"] {
-  width: 0.5px;
-  height: 100%;
-  background-color: var(--v2-border-border-muted, rgba(0, 0, 0, 0.08));
-}
-
 [data-slot="basic-tool-tool-subtitle"].exa-tool-query {
   display: block;
   max-width: 100%;
@@ -624,7 +609,7 @@
   font-family: var(--font-family-sans);
   font-size: 13px;
   font-weight: var(--font-weight-regular, 440);
-  line-height: 16px;
+  line-height: 13px;
   letter-spacing: -0.04px;
   color: var(--v2-text-text-faint, #808080);
   user-select: none;
@@ -683,10 +668,7 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding-top: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-left: 12px;
+  padding: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1244,7 +1226,15 @@
 
   > [data-component="collapsible"] > [data-slot="collapsible-content"] {
     border: none;
+    border-inline-start: none;
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+    padding-bottom: 0;
     background: transparent;
+
+    &::before {
+      display: none;
+    }
   }
 
   > [data-component="collapsible"] > [data-slot="collapsible-trigger"][aria-expanded="true"] {
diff --git a/packages/session-ui/src/components/tool-error-card.css b/packages/session-ui/src/components/tool-error-card.css
index fbc7a7f4ea..cb6f2e91fd 100644
--- a/packages/session-ui/src/components/tool-error-card.css
+++ b/packages/session-ui/src/components/tool-error-card.css
@@ -17,6 +17,17 @@
 
   > [data-component="collapsible"].tool-collapsible {
     gap: 0px;
+
+    > [data-slot="collapsible-content"] {
+      border-inline-start: none;
+      margin-inline-start: 0;
+      padding-inline-start: 0;
+      padding-bottom: 0;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 
   > [data-component="collapsible"].tool-collapsible[data-open="true"] {
diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index 68cef52994..9da862e317 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -434,9 +434,6 @@ function ExaOutput(props: { output?: string }) {
   return (
     <Show when={links().length > 0}>
       <div data-component="exa-tool-output">
-        <div data-slot="exa-tool-rail">
-          <div data-slot="exa-tool-rail-line" />
-        </div>
         <div data-slot="exa-tool-links">
           <For each={visibleLinks()}>
             {(url, index) => (