fix(ui): make tool file links keyboard-accessible

Render clickable tool filenames as native buttons with focus-visible styles so edit/write/apply_patch file links are accessible and keep existing click-to-open behavior.

packages/ui/src/components/message-part.css

@@ -1168,6 +1168,27 @@
     flex-shrink: 0;
   }
 
+  button[data-slot="apply-patch-filename"] {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:focus-visible {
+      outline: 1px solid var(--border-interactive-base);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+  }
+
   [data-slot="apply-patch-trigger-actions"] {
     flex-shrink: 0;
     display: flex;

packages/ui/src/components/message-part.tsx

@@ -963,17 +963,21 @@ function ToolFileAccordion(props: {
                   <Show when={props.path.includes("/")}>
                     <span data-slot="apply-patch-directory">{`\u202A${getDirectory(props.path)}\u202C`}</span>
                   </Show>
-                  <span
-                    data-slot="apply-patch-filename"
-                    classList={{ clickable: !!props.onPathClick }}
-                    onClick={(event) => {
-                      if (!props.onPathClick) return
-                      event.stopPropagation()
-                      props.onPathClick()
-                    }}
+                  <Show
+                    when={props.onPathClick}
+                    fallback={<span data-slot="apply-patch-filename">{getFilename(props.path)}</span>}
                   >
-                    {getFilename(props.path)}
-                  </span>
+                    <button
+                      type="button"
+                      data-slot="apply-patch-filename"
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        props.onPathClick?.()
+                      }}
+                    >
+                      {getFilename(props.path)}
+                    </button>
+                  </Show>
                 </div>
               </div>
               <div data-slot="apply-patch-trigger-actions">
@@ -1717,16 +1721,16 @@ ToolRegistry.register({
                                     <Show when={file.relativePath.includes("/")}>
                                       <span data-slot="apply-patch-directory">{`\u202A${getDirectory(file.relativePath)}\u202C`}</span>
                                     </Show>
-                                    <span
+                                    <button
+                                      type="button"
                                       data-slot="apply-patch-filename"
-                                      class="clickable"
                                       onClick={(event) => {
                                         event.stopPropagation()
                                         openProjectFile(file.relativePath, data.directory, data.openFilePath)
                                       }}
                                     >
                                       {getFilename(file.relativePath)}
-                                    </span>
+                                    </button>
                                   </div>
                                 </div>
                                 <div data-slot="apply-patch-trigger-actions">