mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +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;
|
||||
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>' +
|
||||
'</div>';
|
||||
} else {
|
||||
toolsHtml = '<div class="tools-list">' +
|
||||
ccwEndpointTools.map(function(t) {
|
||||
toolsHtml = '<div class="endpoint-tools-grid">' +
|
||||
ccwEndpointTools.map(function(t, idx) {
|
||||
var name = t && t.name ? String(t.name) : 'unknown';
|
||||
var desc = t && t.description ? String(t.description) : '';
|
||||
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 shortDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
|
||||
|
||||
return '<div class="tool-item endpoint">' +
|
||||
'<div class="tool-item-left">' +
|
||||
'<span class="tool-status-dot status-available" style="background: hsl(var(--indigo)); box-shadow: 0 0 6px hsl(var(--indigo) / 0.45);"></span>' +
|
||||
'<div class="tool-item-info">' +
|
||||
'<div class="tool-item-name">' + escapeHtml(name) +
|
||||
'<span class="tool-type-badge">endpoint</span>' +
|
||||
'</div>' +
|
||||
'<div class="tool-item-desc">' + escapeHtml(desc || '—') + '</div>' +
|
||||
'</div>' +
|
||||
return '<div class="endpoint-tool-card" onclick="showEndpointToolDetail(' + idx + ')">' +
|
||||
'<div class="endpoint-tool-header">' +
|
||||
'<span class="endpoint-tool-dot"></span>' +
|
||||
'<span class="endpoint-tool-name">' + escapeHtml(name) + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="tool-item-right">' +
|
||||
'<span class="tool-status-text muted">' +
|
||||
'<i data-lucide="braces" class="w-3.5 h-3.5"></i> ' +
|
||||
propsCount + ' params' + (requiredCount ? (' · ' + requiredCount + ' required') : '') +
|
||||
'<div class="endpoint-tool-desc">' + escapeHtml(shortDesc || 'No description') + '</div>' +
|
||||
'<div class="endpoint-tool-meta">' +
|
||||
'<span class="endpoint-tool-params">' +
|
||||
'<i data-lucide="braces" class="w-3 h-3"></i> ' + propsCount +
|
||||
'</span>' +
|
||||
(requiredCount > 0 ? '<span class="endpoint-tool-required">' + requiredCount + ' required</span>' : '') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}).join('') +
|
||||
@@ -299,6 +296,108 @@ function renderCcwEndpointToolsSection() {
|
||||
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
|
||||
var ccwCarouselIndex = 0;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user