From b4fabf5984923e7b0515f6d22df03369aaa2640c Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Sat, 22 Aug 2026 12:29:03 +1000
Subject: [PATCH] fix(desktop): align webfetch link styling with figma (#44037)

---
 .../session-ui/src/components/basic-tool.css  | 56 +++++++++++++++++++
 .../session-ui/src/tools/tool-renderer.tsx    | 10 +---
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css
index f162397387a..b10cc738a58 100644
--- a/packages/session-ui/src/components/basic-tool.css
+++ b/packages/session-ui/src/components/basic-tool.css
@@ -145,6 +145,62 @@
         color: var(--text-interactive-base);
       }
     }
+
+    &.webfetch-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--v2-text-text-accent);
+      text-decoration: none;
+
+      &:visited,
+      &:active {
+        color: var(--v2-text-text-accent);
+      }
+
+      [data-slot="webfetch-link-text"] {
+        text-decoration: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .webfetch-link-icon {
+        display: none;
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        color: var(--v2-icon-icon-accent, var(--v2-text-text-accent));
+      }
+
+      &:hover {
+        color: var(--v2-text-text-accent);
+        text-decoration: none;
+
+        [data-slot="webfetch-link-text"] {
+          text-decoration: underline;
+          text-underline-offset: 2px;
+        }
+
+        .webfetch-link-icon {
+          display: inline-flex;
+        }
+      }
+
+      &:focus-visible {
+        outline: 1px solid var(--v2-text-text-accent);
+        outline-offset: 2px;
+
+        [data-slot="webfetch-link-text"] {
+          text-decoration: underline;
+          text-underline-offset: 2px;
+        }
+
+        .webfetch-link-icon {
+          display: inline-flex;
+        }
+      }
+    }
   }
 
   [data-slot="basic-tool-tool-arg"] {
diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index 701f534fb58..824c7b48fed 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -898,21 +898,17 @@ ToolRegistry.register({
               <Show when={!pending() && url()}>
                 <a
                   data-slot="basic-tool-tool-subtitle"
-                  class="clickable subagent-link"
+                  class="clickable webfetch-link"
                   href={url()}
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={(event) => event.stopPropagation()}
                 >
-                  {url()}
+                  <span data-slot="webfetch-link-text">{url()}</span>
+                  <Icon name="outline-square-arrow" class="webfetch-link-icon" />
                 </a>
               </Show>
             </div>
-            <Show when={!pending() && url()}>
-              <div data-component="tool-action">
-                <Icon name="square-arrow-top-right" size="small" />
-              </div>
-            </Show>
           </div>
         }
       />