mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
feat(dashboard): optimize CCW Endpoint Tools display with card grid and detail modal
This commit is contained in:
catlog22
@@ -1719,3 +1719,312 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.generic-modal.lg {
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
* Endpoint Tools Grid Styles
|
||||||
|
* ======================================== */
|
||||||
|
.endpoint-tools-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.875rem;
|
||||||
|
background: hsl(var(--background));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-card:hover {
|
||||||
|
background: hsl(var(--hover));
|
||||||
|
border-color: hsl(var(--indigo) / 0.5);
|
||||||
|
box-shadow: 0 2px 8px hsl(var(--indigo) / 0.1);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: hsl(var(--indigo));
|
||||||
|
box-shadow: 0 0 6px hsl(var(--indigo) / 0.5);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-name {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-desc {
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
line-height: 1.4;
|
||||||
|
flex: 1;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-params {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-size: 0.625rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
background: hsl(var(--muted) / 0.5);
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-tool-required {
|
||||||
|
font-size: 0.5625rem;
|
||||||
|
color: hsl(var(--warning));
|
||||||
|
background: hsl(var(--warning) / 0.1);
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
* Tool Detail Modal Styles
|
||||||
|
* ======================================== */
|
||||||
|
.tool-detail-modal {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid hsl(var(--border));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
background: hsl(var(--indigo) / 0.1);
|
||||||
|
color: hsl(var(--indigo));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-title h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
margin: 0 0 0.375rem 0;
|
||||||
|
font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-badge {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.1875rem 0.5rem;
|
||||||
|
background: hsl(var(--indigo) / 0.1);
|
||||||
|
color: hsl(var(--indigo));
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-desc {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-params h4,
|
||||||
|
.tool-detail-usage h4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-params h4 i,
|
||||||
|
.tool-detail-usage h4 i {
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-params-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
max-height: 280px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: hsl(var(--muted) / 0.3);
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.375rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-name {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
background: hsl(var(--muted));
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-type {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
color: hsl(var(--primary));
|
||||||
|
background: hsl(var(--primary) / 0.1);
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-required {
|
||||||
|
font-size: 0.5625rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: hsl(var(--destructive));
|
||||||
|
background: hsl(var(--destructive) / 0.1);
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-optional {
|
||||||
|
font-size: 0.5625rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
background: hsl(var(--muted));
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-desc {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-default,
|
||||||
|
.tool-param-enum {
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-param-default code,
|
||||||
|
.tool-param-enum code {
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
background: hsl(var(--muted));
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-no-params {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: hsl(var(--muted) / 0.3);
|
||||||
|
border: 1px dashed hsl(var(--border));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-detail-usage {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-usage-code {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: hsl(var(--muted) / 0.5);
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-usage-code code {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-copy-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.375rem;
|
||||||
|
background: hsl(var(--background));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: hsl(var(--muted-foreground));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-copy-btn:hover {
|
||||||
|
background: hsl(var(--hover));
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
border-color: hsl(var(--primary) / 0.3);
|
||||||
|
}
|
||||||
|
|||||||
@@ -257,28 +257,25 @@ function renderCcwEndpointToolsSection() {
|
|||||||
'<i data-lucide="refresh-cw" class="w-3 h-3"></i> Refresh</button>' +
|
'<i data-lucide="refresh-cw" class="w-3 h-3"></i> Refresh</button>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
} else {
|
} else {
|
||||||
toolsHtml = '<div class="tools-list">' +
|
toolsHtml = '<div class="endpoint-tools-grid">' +
|
||||||
ccwEndpointTools.map(function(t) {
|
ccwEndpointTools.map(function(t, idx) {
|
||||||
var name = t && t.name ? String(t.name) : 'unknown';
|
var name = t && t.name ? String(t.name) : 'unknown';
|
||||||
var desc = t && t.description ? String(t.description) : '';
|
var desc = t && t.description ? String(t.description) : '';
|
||||||
var requiredCount = (t && t.parameters && Array.isArray(t.parameters.required)) ? t.parameters.required.length : 0;
|
var requiredCount = (t && t.parameters && Array.isArray(t.parameters.required)) ? t.parameters.required.length : 0;
|
||||||
var propsCount = (t && t.parameters && t.parameters.properties) ? Object.keys(t.parameters.properties).length : 0;
|
var propsCount = (t && t.parameters && t.parameters.properties) ? Object.keys(t.parameters.properties).length : 0;
|
||||||
|
var shortDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
|
||||||
|
|
||||||
return '<div class="tool-item endpoint">' +
|
return '<div class="endpoint-tool-card" onclick="showEndpointToolDetail(' + idx + ')">' +
|
||||||
'<div class="tool-item-left">' +
|
'<div class="endpoint-tool-header">' +
|
||||||
'<span class="tool-status-dot status-available" style="background: hsl(var(--indigo)); box-shadow: 0 0 6px hsl(var(--indigo) / 0.45);"></span>' +
|
'<span class="endpoint-tool-dot"></span>' +
|
||||||
'<div class="tool-item-info">' +
|
'<span class="endpoint-tool-name">' + escapeHtml(name) + '</span>' +
|
||||||
'<div class="tool-item-name">' + escapeHtml(name) +
|
|
||||||
'<span class="tool-type-badge">endpoint</span>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div class="tool-item-desc">' + escapeHtml(desc || '—') + '</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="tool-item-right">' +
|
'<div class="endpoint-tool-desc">' + escapeHtml(shortDesc || 'No description') + '</div>' +
|
||||||
'<span class="tool-status-text muted">' +
|
'<div class="endpoint-tool-meta">' +
|
||||||
'<i data-lucide="braces" class="w-3.5 h-3.5"></i> ' +
|
'<span class="endpoint-tool-params">' +
|
||||||
propsCount + ' params' + (requiredCount ? (' · ' + requiredCount + ' required') : '') +
|
'<i data-lucide="braces" class="w-3 h-3"></i> ' + propsCount +
|
||||||
'</span>' +
|
'</span>' +
|
||||||
|
(requiredCount > 0 ? '<span class="endpoint-tool-required">' + requiredCount + ' required</span>' : '') +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
}).join('') +
|
}).join('') +
|
||||||
@@ -299,6 +296,108 @@ function renderCcwEndpointToolsSection() {
|
|||||||
if (window.lucide) lucide.createIcons();
|
if (window.lucide) lucide.createIcons();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ========== Endpoint Tool Detail Modal ==========
|
||||||
|
function showEndpointToolDetail(toolIndex) {
|
||||||
|
var tool = ccwEndpointTools[toolIndex];
|
||||||
|
if (!tool) return;
|
||||||
|
|
||||||
|
var name = tool.name || 'unknown';
|
||||||
|
var desc = tool.description || 'No description available';
|
||||||
|
var params = tool.parameters || {};
|
||||||
|
var properties = params.properties || {};
|
||||||
|
var required = params.required || [];
|
||||||
|
|
||||||
|
// Build parameters table
|
||||||
|
var paramsHtml = '';
|
||||||
|
var propKeys = Object.keys(properties);
|
||||||
|
|
||||||
|
if (propKeys.length > 0) {
|
||||||
|
paramsHtml = '<div class="tool-detail-params">' +
|
||||||
|
'<h4><i data-lucide="settings-2" class="w-4 h-4"></i> Parameters</h4>' +
|
||||||
|
'<div class="tool-params-list">';
|
||||||
|
|
||||||
|
for (var i = 0; i < propKeys.length; i++) {
|
||||||
|
var key = propKeys[i];
|
||||||
|
var prop = properties[key];
|
||||||
|
var isRequired = required.indexOf(key) !== -1;
|
||||||
|
var propType = prop.type || 'any';
|
||||||
|
var propDesc = prop.description || '';
|
||||||
|
var propDefault = prop.default !== undefined ? JSON.stringify(prop.default) : null;
|
||||||
|
var propEnum = prop.enum ? prop.enum.join(', ') : null;
|
||||||
|
|
||||||
|
paramsHtml += '<div class="tool-param-item">' +
|
||||||
|
'<div class="tool-param-header">' +
|
||||||
|
'<code class="tool-param-name">' + escapeHtml(key) + '</code>' +
|
||||||
|
'<span class="tool-param-type">' + escapeHtml(propType) + '</span>' +
|
||||||
|
(isRequired ? '<span class="tool-param-required">required</span>' : '<span class="tool-param-optional">optional</span>') +
|
||||||
|
'</div>' +
|
||||||
|
(propDesc ? '<div class="tool-param-desc">' + escapeHtml(propDesc) + '</div>' : '') +
|
||||||
|
(propDefault ? '<div class="tool-param-default">Default: <code>' + escapeHtml(propDefault) + '</code></div>' : '') +
|
||||||
|
(propEnum ? '<div class="tool-param-enum">Options: <code>' + escapeHtml(propEnum) + '</code></div>' : '') +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
paramsHtml += '</div></div>';
|
||||||
|
} else {
|
||||||
|
paramsHtml = '<div class="tool-detail-no-params">' +
|
||||||
|
'<i data-lucide="info" class="w-4 h-4"></i>' +
|
||||||
|
'<span>This tool has no parameters</span>' +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage example
|
||||||
|
var usageExample = 'ccw tool exec ' + name;
|
||||||
|
if (propKeys.length > 0) {
|
||||||
|
var exampleParams = {};
|
||||||
|
for (var j = 0; j < Math.min(propKeys.length, 2); j++) {
|
||||||
|
var k = propKeys[j];
|
||||||
|
var p = properties[k];
|
||||||
|
if (p.type === 'string') exampleParams[k] = '<value>';
|
||||||
|
else if (p.type === 'boolean') exampleParams[k] = true;
|
||||||
|
else if (p.type === 'number') exampleParams[k] = 0;
|
||||||
|
else exampleParams[k] = '<value>';
|
||||||
|
}
|
||||||
|
usageExample += " '" + JSON.stringify(exampleParams) + "'";
|
||||||
|
}
|
||||||
|
|
||||||
|
var modalContent = '<div class="tool-detail-modal">' +
|
||||||
|
'<div class="tool-detail-header">' +
|
||||||
|
'<div class="tool-detail-icon"><i data-lucide="terminal" class="w-6 h-6"></i></div>' +
|
||||||
|
'<div class="tool-detail-title">' +
|
||||||
|
'<h3>' + escapeHtml(name) + '</h3>' +
|
||||||
|
'<span class="tool-detail-badge">endpoint tool</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="tool-detail-desc">' + escapeHtml(desc) + '</div>' +
|
||||||
|
paramsHtml +
|
||||||
|
'<div class="tool-detail-usage">' +
|
||||||
|
'<h4><i data-lucide="terminal-square" class="w-4 h-4"></i> Usage Example</h4>' +
|
||||||
|
'<div class="tool-usage-code">' +
|
||||||
|
'<code>' + escapeHtml(usageExample) + '</code>' +
|
||||||
|
'<button class="tool-copy-btn" onclick="copyToolUsage(this, \'' + escapeHtml(usageExample.replace(/'/g, "\\'")) + '\')" title="Copy">' +
|
||||||
|
'<i data-lucide="copy" class="w-3.5 h-3.5"></i>' +
|
||||||
|
'</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
showModal(name, modalContent, { size: 'lg' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyToolUsage(btn, text) {
|
||||||
|
navigator.clipboard.writeText(text).then(function() {
|
||||||
|
var icon = btn.querySelector('i');
|
||||||
|
if (icon) {
|
||||||
|
icon.setAttribute('data-lucide', 'check');
|
||||||
|
if (window.lucide) lucide.createIcons();
|
||||||
|
setTimeout(function() {
|
||||||
|
icon.setAttribute('data-lucide', 'copy');
|
||||||
|
if (window.lucide) lucide.createIcons();
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// CCW Install Carousel State
|
// CCW Install Carousel State
|
||||||
var ccwCarouselIndex = 0;
|
var ccwCarouselIndex = 0;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user