update

examples/process_pipeline/ui/app.js

@@ -2572,8 +2572,13 @@ window.renderStructuredData = function (items, type, parentItem = null) {
             html += `<div class="structured-row">
                 <div class="structured-label">action</div>
                 <div class="structured-value">
-                    ${actionDescription ? `<span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;">${actionDescription}</span>` : ''}
-                    ${actionReasoning ? `<span style="color:var(--text-secondary);">${actionReasoning}</span>` : ''}
+                    <style>
+                        .action-description-tooltip:hover .action-reasoning-popover { display:block !important; }
+                    </style>
+                    ${actionDescription ? `<span class="action-description-tooltip" style="position:relative; display:inline-block;">
+                        <span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;">${actionDescription}</span>
+                        ${actionReasoning ? `<span class="action-reasoning-popover" style="display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:300px; max-width:60vw; padding:8px 10px; border-radius:8px; background:#0f172a; color:#f8fafc; box-shadow:0 10px 25px rgba(15,23,42,0.18); font-size:0.86em; line-height:1.5; white-space:normal; font-weight:400;">${actionReasoning}</span>` : ''}
+                    </span>` : ''}
                 </div>
             </div>`;
         }
@@ -2762,7 +2767,10 @@ window.renderStructuredData = function (items, type, parentItem = null) {
                 if (src.action && src.action.description) {
                     const description = escapeHtml(src.action.description);
                     const reasoning = src.action.reasoning ? escapeHtml(src.action.reasoning) : '';
-                    return `<span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;margin-bottom:2px;display:inline-block;">${description}</span>${reasoning ? `<div style="font-size:0.85em;color:#64748b;margin-top:4px;">${reasoning}</div>` : ''}`;
+                    return `<span class="action-description-tooltip">
+                        <span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;margin-bottom:2px;display:inline-block;">${description}</span>
+                        ${reasoning ? `<span class="action-reasoning-popover">${reasoning}</span>` : ''}
+                    </span>`;
                 }
                 if (src.method) return escapeHtml(src.method);
                 if (src.description) return escapeHtml(src.description);
@@ -2822,10 +2830,10 @@ window.renderStructuredData = function (items, type, parentItem = null) {
                     <td class="capability-cell">${capability && capability.inputs && capability.inputs.length > 0 ? renderDataObjList(capability.inputs) : '-'}</td>
                     <td class="capability-cell">${renderAction(capability)}</td>
                     <td class="capability-cell">${capability && capability.outputs && capability.outputs.length > 0 ? renderDataObjList(capability.outputs) : '-'}</td>
-                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderEffects(capability.effects) : '-'}</div></td>
                     <td class="capability-cell" style="font-size:0.9em;"><div class="capability-clamp">${applyTo ? renderApplyToVal(applyTo, suggestApplyTo) : '-'}</div></td>
-                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderTools(capability.tools) : '-'}</div></td>
                     <td class="capability-cell"><div class="capability-clamp capability-text">${capability && capability.body ? escapeHtml(capability.body) : '-'}</div></td>
+                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderEffects(capability.effects) : '-'}</div></td>
+                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderTools(capability.tools) : '-'}</div></td>
                 `;
             };
 
@@ -2845,6 +2853,26 @@ window.renderStructuredData = function (items, type, parentItem = null) {
                         .steps-table .row-expand-icon { display: inline-block; margin-right: 6px; color: var(--text-muted); font-size: 0.8em; transition: transform 0.2s; }
                         .steps-table tr.capability-expanded .row-expand-icon { transform: rotate(90deg); }
                         .steps-table .capability-text { white-space: pre-wrap; word-break: break-word; }
+                        .steps-table .action-description-tooltip { position: relative; display: inline-block; max-width: 100%; }
+                        .steps-table .action-reasoning-popover {
+                            display: none;
+                            position: absolute;
+                            left: 0;
+                            top: calc(100% + 6px);
+                            z-index: 50;
+                            width: 300px;
+                            max-width: 60vw;
+                            padding: 8px 10px;
+                            border-radius: 8px;
+                            background: #0f172a;
+                            color: #f8fafc;
+                            box-shadow: 0 10px 25px rgba(15,23,42,0.18);
+                            font-size: 0.86em;
+                            line-height: 1.5;
+                            white-space: normal;
+                            font-weight: 400;
+                        }
+                        .steps-table .action-description-tooltip:hover .action-reasoning-popover { display: block; }
                         .steps-table .effect-item { padding-bottom:8px; margin-bottom:8px; border-bottom:1px dashed rgba(0,0,0,0.08); color:var(--text-main); line-height:1.5; }
                         .steps-table .effect-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
                         .steps-table .effect-content { min-width:0; flex:1; }
@@ -2863,10 +2891,10 @@ window.renderStructuredData = function (items, type, parentItem = null) {
                                 <th style="padding: 12px 10px; width: 180px;">输入</th>
                                 <th style="padding: 12px 10px; width: 140px;">动作</th>
                                 <th style="padding: 12px 10px; width: 180px;">输出</th>
-                                <th style="padding: 12px 10px; width: 360px;">效果</th>
                                 <th style="padding: 12px 10px; width: 260px;">作用域</th>
-                                <th style="padding: 12px 10px; width: 130px;">工具</th>
                                 <th style="padding: 12px 10px; width: 300px;">做法</th>
+                                <th style="padding: 12px 10px; width: 360px;">效果</th>
+                                <th style="padding: 12px 10px; width: 130px;">工具</th>
                             </tr>
                         </thead>
                         <tbody>`;

examples/process_pipeline/ui/scratchpad.js

@@ -64,11 +64,18 @@ function renderStructuredData(items, type) {
         }
 
         if (item.action && typeof item.action === 'object' && (item.action.description || item.action.reasoning)) {
+            const actionDescription = item.action.description ? String(item.action.description).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
+            const actionReasoning = item.action.reasoning ? String(item.action.reasoning).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
             html += `<div class="structured-row">
                 <div class="structured-label">action</div>
                 <div class="structured-value">
-                    ${item.action.description ? `<span class="data-type-badge">${String(item.action.description).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>` : ''}
-                    ${item.action.reasoning ? `<span style="margin-left:6px;">${String(item.action.reasoning).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>` : ''}
+                    <style>
+                        .action-description-tooltip:hover .action-reasoning-popover { display:block !important; }
+                    </style>
+                    ${actionDescription ? `<span class="action-description-tooltip" style="position:relative; display:inline-block;">
+                        <span class="data-type-badge">${actionDescription}</span>
+                        ${actionReasoning ? `<span class="action-reasoning-popover" style="display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:300px; max-width:60vw; padding:8px 10px; border-radius:8px; background:#0f172a; color:#f8fafc; box-shadow:0 10px 25px rgba(15,23,42,0.18); font-size:0.86em; line-height:1.5; white-space:normal; font-weight:400;">${actionReasoning}</span>` : ''}
+                    </span>` : ''}
                 </div>
             </div>`;
         }