mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
- Implemented CLI History Component to display execution history with filtering and search capabilities. - Created CLI Status Component to show availability of CLI tools and allow setting a default tool. - Enhanced notifications to handle CLI execution events. - Integrated CLI Manager view to combine status and history panels for better user experience. - Developed CLI Executor Tool for unified execution of external CLI tools (Gemini, Qwen, Codex) with streaming output. - Added functionality to save and retrieve CLI execution history. - Updated dashboard HTML to include navigation for CLI tools management.
102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
// CLI Status Component
|
|
// Displays CLI tool availability status and allows setting default tool
|
|
|
|
// ========== CLI State ==========
|
|
let cliToolStatus = { gemini: {}, qwen: {}, codex: {} };
|
|
let defaultCliTool = 'gemini';
|
|
|
|
// ========== Initialization ==========
|
|
function initCliStatus() {
|
|
// Load CLI status on init
|
|
loadCliToolStatus();
|
|
}
|
|
|
|
// ========== Data Loading ==========
|
|
async function loadCliToolStatus() {
|
|
try {
|
|
const response = await fetch('/api/cli/status');
|
|
if (!response.ok) throw new Error('Failed to load CLI status');
|
|
const data = await response.json();
|
|
cliToolStatus = data;
|
|
|
|
// Update badge
|
|
updateCliBadge();
|
|
|
|
return data;
|
|
} catch (err) {
|
|
console.error('Failed to load CLI status:', err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ========== Badge Update ==========
|
|
function updateCliBadge() {
|
|
const badge = document.getElementById('badgeCliTools');
|
|
if (badge) {
|
|
const available = Object.values(cliToolStatus).filter(t => t.available).length;
|
|
const total = Object.keys(cliToolStatus).length;
|
|
badge.textContent = `${available}/${total}`;
|
|
badge.classList.toggle('text-success', available === total);
|
|
badge.classList.toggle('text-warning', available > 0 && available < total);
|
|
badge.classList.toggle('text-destructive', available === 0);
|
|
}
|
|
}
|
|
|
|
// ========== Rendering ==========
|
|
function renderCliStatus() {
|
|
const container = document.getElementById('cli-status-panel');
|
|
if (!container) return;
|
|
|
|
const tools = ['gemini', 'qwen', 'codex'];
|
|
|
|
const toolsHtml = tools.map(tool => {
|
|
const status = cliToolStatus[tool] || {};
|
|
const isAvailable = status.available;
|
|
const isDefault = defaultCliTool === tool;
|
|
|
|
return `
|
|
<div class="cli-tool-card ${isAvailable ? 'available' : 'unavailable'}">
|
|
<div class="cli-tool-header">
|
|
<span class="cli-tool-status ${isAvailable ? 'status-available' : 'status-unavailable'}"></span>
|
|
<span class="cli-tool-name">${tool.charAt(0).toUpperCase() + tool.slice(1)}</span>
|
|
${isDefault ? '<span class="cli-tool-badge">Default</span>' : ''}
|
|
</div>
|
|
<div class="cli-tool-info">
|
|
${isAvailable
|
|
? `<span class="text-success">Ready</span>`
|
|
: `<span class="text-muted-foreground">Not Installed</span>`
|
|
}
|
|
</div>
|
|
${isAvailable && !isDefault
|
|
? `<button class="btn-sm btn-outline" onclick="setDefaultCliTool('${tool}')">Set Default</button>`
|
|
: ''
|
|
}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
container.innerHTML = `
|
|
<div class="cli-status-header">
|
|
<h3>CLI Tools</h3>
|
|
<button class="btn-icon" onclick="loadCliToolStatus()" title="Refresh">
|
|
<i data-lucide="refresh-cw"></i>
|
|
</button>
|
|
</div>
|
|
<div class="cli-tools-grid">
|
|
${toolsHtml}
|
|
</div>
|
|
`;
|
|
|
|
// Initialize Lucide icons
|
|
if (window.lucide) {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
// ========== Actions ==========
|
|
function setDefaultCliTool(tool) {
|
|
defaultCliTool = tool;
|
|
renderCliStatus();
|
|
showRefreshToast(`Default CLI tool set to ${tool}`, 'success');
|
|
}
|