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

2026-07-21 23:39:41 +01:00
parent 8e891fbced
commit c11702c3d3
44 changed files with 1103 additions and 50 deletions
@@ -0,0 +1,80 @@
+import { LitElement, html, nothing } from 'lit';
+import { t }              from '../../lib/i18n.js';
+import { fetchToolDetail, renderToolBody, STATUS_ICON } from './tool-detail-view.js';
+
+/**
+ * Mobile tool-execution detail page. Same shared engine as the desktop
+ * `<tool-detail-page>`, but prop-driven: `<mobile-app>` binds `visible` / `toolId`
+ * from its hash router (`#tool_detail?id=...`) instead of the component listening to
+ * the hash. The back button returns to the previous mobile section via history.
+ */
+export class MobileToolDetailPage extends LitElement {
+  // No shadow DOM — inherit the app's global CSS + Bootstrap Icons.
+  createRenderRoot() { return this; }
+
+  static properties = {
+    visible:   { type: Boolean },
+    toolId:    { attribute: 'tool-id' },
+    _loading:  { state: true },
+    _error:    { state: true },
+    _tool:     { state: true },
+  };
+
+  constructor() {
+    super();
+    this.visible  = false;
+    this.toolId   = null;
+    this._loading = false;
+    this._error   = null;
+    this._tool    = null;
+  }
+
+  updated(changed) {
+    if (changed.has('visible') || changed.has('toolId')) {
+      if (this.visible && this.toolId != null) this._load();
+    }
+  }
+
+  async _load() {
+    this._loading = true;
+    this._error = null;
+    this._tool = null;
+    try {
+      this._tool = await fetchToolDetail(this.toolId);
+    } catch (e) {
+      this._error = e.message || String(e);
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  _back() { history.back(); }
+
+  render() {
+    if (!this.visible) return nothing;
+    const tl = this._tool;
+    const si = tl ? (STATUS_ICON[tl.status] || STATUS_ICON.done) : null;
+    return html`
+      <div class="mobile-tool-detail tool-detail-page">
+        <div class="mobile-section-header">
+          <span class="mobile-section-title">
+            <button class="chat-page-back" title=${t('fv.back')} @click=${() => this._back()}>
+              <i class="bi bi-arrow-left"></i>
+            </button>
+            <span>
+              ${si ? html`<i class="bi ${si.glyph} ${si.cls} me-1"></i>` : nothing}
+              ${tl ? (tl.display_name || tl.name) : t('tool_detail.title')}
+            </span>
+          </span>
+        </div>
+        <div class="tool-detail-body">
+          ${this._loading ? html`<div class="tool-detail-muted">${t('common.loading')}</div>` : nothing}
+          ${this._error ? html`<div class="alert alert-danger">${this._error}</div>` : nothing}
+          ${renderToolBody(tl)}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('mobile-tool-detail-page', MobileToolDetailPage);