tool card UI redesign: semantic icons, inline diff persistence, tool detail page, MCP-friendly titles

web/lib/chat-session.js

@@ -314,6 +314,8 @@ export class ChatSession extends LightElement {
             kind:         'tool',
             tool_call_id: msg.tool_call_id,
             name:         msg.name,
+            display_name: msg.display_name,
+            icon:         msg.icon,
             label_short:  msg.label_short,
             label_full:   msg.label_full,
             path:         msg.path,
@@ -327,7 +329,12 @@ export class ChatSession extends LightElement {
       }
 
       case 'tool_done':
-        this._updateTool(msg.tool_call_id, { status: 'done', result: msg.result, result_type: msg.result_type });
+        // `preview_old`/`preview_new` are present only for a file-write; they let the
+        // card render the diff inline even for an auto-allowed write (no PendingWrite).
+        this._updateTool(msg.tool_call_id, {
+          status: 'done', result: msg.result, result_type: msg.result_type,
+          preview_old: msg.preview_old, preview_new: msg.preview_new,
+        });
         break;
 
       case 'tool_error':

web/lib/open-tool.js

@@ -0,0 +1,17 @@
+/**
+ * Global tool-detail opener helper.
+ *
+ * `window.openToolDetail(id)` is the single entry point for "show this tool
+ * call's full input / result / diff in the dedicated detail page". It navigates
+ * to `#tool_detail?id=<id>`, which the hash router in `sidebar.js` resolves to
+ * the `<tool-detail-page>` element. Back/forward navigation works naturally.
+ *
+ * Mirrors `open-file.js` — the URL format lives in one place, so a tool card's
+ * "details" (eye) affordance calls this rather than setting the hash directly.
+ */
+export function openToolDetail(id) {
+  if (id == null) return;
+  location.hash = `tool_detail?id=${encodeURIComponent(id)}`;
+}
+
+window.openToolDetail = openToolDetail;