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

web/css/copilot-messages.css

@@ -131,13 +131,67 @@
   font-size: 0.7rem;
 }
 
+/* The leading tool-type icon: a colored glyph, or an MCP connector's own icon. */
+.copilot-tool-ico {
+  flex-shrink: 0;
+  font-size: 0.9rem;
+  line-height: 1;
+  color: var(--tool-generic);
+}
+.copilot-tool-ico-wrap {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.copilot-tool-ico-img {
+  width: 15px;
+  height: 15px;
+  object-fit: contain;
+  border-radius: 3px;
+}
+/* Fallback: hide the glyph unless the connector image failed to load. */
+.copilot-tool-ico-wrap .copilot-tool-ico { display: none; }
+.copilot-tool-ico-wrap.img-failed .copilot-tool-ico-img { display: none; }
+.copilot-tool-ico-wrap.img-failed .copilot-tool-ico { display: inline; }
+
+.tool-ico--edit          { color: var(--tool-edit); }
+.tool-ico--read          { color: var(--tool-read); }
+.tool-ico--list          { color: var(--tool-list); }
+.tool-ico--search        { color: var(--tool-search); }
+.tool-ico--shell         { color: var(--tool-shell); }
+.tool-ico--subagent      { color: var(--tool-subagent); }
+.tool-ico--image         { color: var(--tool-image); }
+.tool-ico--config        { color: var(--tool-config); }
+.tool-ico--introspection { color: var(--tool-introspection); }
+.tool-ico--mcp           { color: var(--tool-mcp); }
+.tool-ico--file,
+.tool-ico--tool          { color: var(--tool-generic); }
+
 .copilot-tool-name {
-  font-weight: 400;
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* The friendly, static tool title ("Edit File") — the primary label. */
+.copilot-tool-title {
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--msg-assistant-text);
+}
+
+/* The muted secondary detail (target path / command / primary arg). */
+.copilot-tool-detail {
   font-family: var(--bs-font-monospace);
+  font-size: 0.72rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
+  color: var(--placeholder-color);
 }
 
 .copilot-tool-name code {
@@ -583,3 +637,86 @@
 }
 
 .attach-chip-remove:hover { background: var(--sidebar-hover); color: #dc2626; }
+
+/* ── Tool card "view details" (eye) ────────────────────────────────────────── */
+
+.copilot-tool-eye {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  color: var(--placeholder-color);
+  border-radius: 0.25rem;
+  flex-shrink: 0;
+}
+.copilot-tool-eye:hover { color: var(--accent); background: var(--accent-soft); }
+
+/* ── Tool-detail page (#tool_detail) ───────────────────────────────────────── */
+
+.tool-detail-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.tool-detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tool-detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.tool-detail-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--placeholder-color);
+}
+
+.tool-detail-pre {
+  font-family: var(--bs-font-monospace);
+  font-size: 0.82rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  padding: 0.7rem 0.9rem;
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--toolbar-border);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+}
+.tool-detail-pre--error { color: #dc2626; }
+
+@media (prefers-color-scheme: dark) {
+  .tool-detail-pre { background: rgba(255, 255, 255, 0.04); }
+}
+
+.tool-detail-muted { color: var(--placeholder-color); font-size: 0.85rem; }
+
+.tool-detail-path {
+  align-self: flex-start;
+  font-family: var(--bs-font-monospace);
+  font-size: 0.82rem;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+}
+.tool-detail-path:hover { text-decoration: underline; }
+
+/* The detail page's diff fills the panel rather than the compact card height. */
+.tool-detail-page .copilot-diff {
+  max-height: none;
+  font-size: 0.82rem;
+}