feat(dashboard): add quota monitoring, process list, and command history
All checks were successful
Beta Release / beta (push) Successful in 44s
All checks were successful
Beta Release / beta (push) Successful in 44s
- New API endpoints: /providers/quota, /recent-commands, /running-processes - New grid-based dashboard layout with cards for tools, quota, processes, commands - Improved OnboardingWizard with required API key validation and scanning feedback - Auto-initialize config on first run 💘 Generated with Crush Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>
This commit is contained in:
Augustin
@@ -1,438 +1,181 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useI18n } from '../i18n'
|
||||
|
||||
const TOOL_ICONS = {
|
||||
crush: '⚡',
|
||||
claude: '🤖',
|
||||
go: '🔷',
|
||||
node: '🟢',
|
||||
python: '🐍',
|
||||
docker: '🐳',
|
||||
git: '📚',
|
||||
ssh: '🌐',
|
||||
starship: '🚀',
|
||||
rust: '🦀',
|
||||
}
|
||||
|
||||
function ToolCard({ tool, onInstall, installing }) {
|
||||
const { t } = useI18n()
|
||||
const [showInstall, setShowInstall] = useState(false)
|
||||
|
||||
const icon = TOOL_ICONS[tool.name?.toLowerCase()] || '🔧'
|
||||
const isInstalled = tool.installed || tool.status === 'installed'
|
||||
const version = tool.version || ''
|
||||
const hasUpdate = tool.hasUpdate || tool.updateAvailable
|
||||
|
||||
return (
|
||||
<div className={`tool-card ${isInstalled ? 'installed' : 'missing'}`}>
|
||||
<div className="tool-card-icon">{icon}</div>
|
||||
<div className="tool-card-info">
|
||||
<div className="tool-card-name">{tool.name || 'Unknown'}</div>
|
||||
<div className="tool-card-version">
|
||||
{isInstalled ? (
|
||||
<span className="status-ok">{t('dashboard.installed')}</span>
|
||||
) : (
|
||||
<span className="status-missing">{t('dashboard.missing')}</span>
|
||||
)}
|
||||
{version && <span className="tool-version-text">{version}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tool-card-actions">
|
||||
{isInstalled && hasUpdate && (
|
||||
<span className="tool-update-badge" title={`Update to ${tool.latestVersion || 'latest'}`}>
|
||||
↑ {tool.latestVersion || 'new'}
|
||||
</span>
|
||||
)}
|
||||
{!isInstalled && (
|
||||
<button
|
||||
className="sm primary"
|
||||
onClick={() => onInstall(tool.name)}
|
||||
disabled={installing}
|
||||
>
|
||||
{installing ? '...' : t('dashboard.install')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ActivityItem({ entry }) {
|
||||
const time = entry.time
|
||||
? new Date(entry.time).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
: ''
|
||||
const type = entry.type || entry.level || 'info'
|
||||
const text = entry.message || entry.text || entry.content || ''
|
||||
|
||||
const typeClass = {
|
||||
ok: 'notif-ok',
|
||||
success: 'notif-ok',
|
||||
install: 'notif-ok',
|
||||
update: 'notif-info',
|
||||
info: 'notif-info',
|
||||
warn: 'notif-warn',
|
||||
warning: 'notif-warn',
|
||||
error: 'notif-error',
|
||||
fail: 'notif-error',
|
||||
}[type] || 'notif-info'
|
||||
|
||||
const icon = {
|
||||
ok: '✓', success: '✓', install: '✓', update: '→',
|
||||
info: 'ℹ', warn: '⚠', warning: '⚠', error: '✗', fail: '✗',
|
||||
}[type] || '•'
|
||||
|
||||
return (
|
||||
<div className={`notif-row ${typeClass}`}>
|
||||
<span className="notif-time">{time}</span>
|
||||
<span className="notif-icon">{icon}</span>
|
||||
<span className="notif-text">{text}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function QuickActionButton({ icon, label, onClick, loading, disabled }) {
|
||||
return (
|
||||
<button
|
||||
className="quick-action-btn"
|
||||
onClick={onClick}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
{loading ? <span className="spinner" style={{ width: 14, height: 14 }} /> : <span className="quick-action-icon">{icon}</span>}
|
||||
<span className="quick-action-label">{label}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Dashboard({ api }) {
|
||||
const { t } = useI18n()
|
||||
const [activeTab, setActiveTab] = useState('tools')
|
||||
const [tools, setTools] = useState([])
|
||||
const [updates, setUpdates] = useState([])
|
||||
const [systemInfo, setSystemInfo] = useState(null)
|
||||
const [notifications, setNotifications] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [installing, setInstalling] = useState(false)
|
||||
const [scanLoading, setScanLoading] = useState(false)
|
||||
const [mcpLoading, setMcpLoading] = useState(false)
|
||||
const [dashboardStatus, setDashboardStatus] = useState(null)
|
||||
const [quota, setQuota] = useState(null)
|
||||
const [recentCmds, setRecentCmds] = useState([])
|
||||
const [processes, setProcesses] = useState([])
|
||||
const [updates, setUpdates] = useState([])
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
const [toolsData, updatesData, systemData] = await Promise.all([
|
||||
const [toolsData, systemData, dashData, quotaData, cmdData, procData, updatesData] = await Promise.all([
|
||||
api.getTools().catch(() => ({ tools: [] })),
|
||||
api.getUpdates().catch(() => ({ updates: [] })),
|
||||
api.getSystem().catch(() => null),
|
||||
api.getDashboardStatus().catch(() => null),
|
||||
api.getProvidersQuota().catch(() => null),
|
||||
api.getRecentCommands().catch(() => ({ commands: [] })),
|
||||
api.getRunningProcesses().catch(() => ({ processes: [] })),
|
||||
api.getUpdates().catch(() => ({ updates: [] })),
|
||||
])
|
||||
setTools(toolsData.tools || toolsData || [])
|
||||
setSystemInfo(systemData?.system || systemData)
|
||||
setDashboardStatus(dashData)
|
||||
setQuota(quotaData?.providers || [])
|
||||
setRecentCmds(cmdData.commands || [])
|
||||
setProcesses(procData.processes || [])
|
||||
setUpdates(updatesData.updates || updatesData || [])
|
||||
setSystemInfo(systemData)
|
||||
api.getDashboardStatus().then(d => setDashboardStatus(d)).catch(() => {})
|
||||
} catch (err) {
|
||||
console.error('Failed to load dashboard data:', err)
|
||||
console.error('Dashboard load error:', err)
|
||||
}
|
||||
}, [api])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const addNotification = (message, type = 'info') => {
|
||||
const entry = { id: Date.now(), time: new Date().toISOString(), message, type }
|
||||
setNotifications(prev => [entry, ...prev].slice(0, 100))
|
||||
}
|
||||
|
||||
const handleRescan = async () => {
|
||||
setScanLoading(true)
|
||||
addNotification(t('dashboard.rescanning'), 'info')
|
||||
try {
|
||||
await api.runScan()
|
||||
await loadData()
|
||||
addNotification(t('dashboard.scanComplete'), 'ok')
|
||||
} catch (err) {
|
||||
addNotification(`${t('dashboard.scanFailed')}: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setScanLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInstallMissing = async () => {
|
||||
const missing = tools.filter(t => !t.installed && t.status !== 'installed')
|
||||
if (missing.length === 0) return
|
||||
setInstalling(true)
|
||||
addNotification(t('dashboard.installing', { count: missing.length }), 'info')
|
||||
try {
|
||||
await api.installTools(missing.map(t => t.name))
|
||||
addNotification(t('dashboard.installStarted'), 'ok')
|
||||
setTimeout(() => handleRescan(), 2000)
|
||||
} catch (err) {
|
||||
addNotification(`${t('dashboard.installFailed')}: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setInstalling(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCheckUpdates = async () => {
|
||||
setLoading(true)
|
||||
addNotification(t('config.checking'), 'info')
|
||||
try {
|
||||
const data = await api.getUpdates()
|
||||
setUpdates(data.updates || data || [])
|
||||
const count = (data.updates || data || []).length
|
||||
if (count > 0) {
|
||||
addNotification(t('dashboard.updatesCount', { count }), 'warn')
|
||||
} else {
|
||||
addNotification(t('dashboard.allUpToDate'), 'ok')
|
||||
}
|
||||
} catch (err) {
|
||||
addNotification(`${t('dashboard.checkUpdatesFailed')}: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfigureMCP = async () => {
|
||||
setMcpLoading(true)
|
||||
addNotification(t('dashboard.configuringMCP'), 'info')
|
||||
try {
|
||||
await api.configureMCP()
|
||||
addNotification(t('dashboard.mcpConfigured'), 'ok')
|
||||
} catch (err) {
|
||||
addNotification(`${t('dashboard.mcpConfigFailed')}: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setMcpLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInstallTool = async (name) => {
|
||||
setInstalling(true)
|
||||
addNotification(`${t('dashboard.installing')} ${name}...`, 'info')
|
||||
try {
|
||||
await api.installTools([name])
|
||||
addNotification(`${name} ${t('dashboard.installed')}`, 'ok')
|
||||
setTimeout(() => loadData(), 2000)
|
||||
} catch (err) {
|
||||
addNotification(`${t('dashboard.installFailed')}: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setInstalling(false)
|
||||
}
|
||||
}
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
const installedCount = tools.filter(t => t.installed || t.status === 'installed').length
|
||||
const missingCount = tools.length - installedCount
|
||||
const sys = systemInfo || {}
|
||||
|
||||
const minimax = (quota || []).find(p => p.name === 'minimax')
|
||||
const zai = (quota || []).find(p => p.name === 'zai')
|
||||
|
||||
return (
|
||||
<div className="dashboard-layout">
|
||||
<div className="dashboard-tabs">
|
||||
<button
|
||||
className={`dashboard-tab ${activeTab === 'tools' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('tools')}
|
||||
>
|
||||
<span className="tab-icon">🔧</span>
|
||||
{t('dashboard.tools')}
|
||||
<span className="tab-count">{installedCount}</span>
|
||||
</button>
|
||||
<button
|
||||
className={`dashboard-tab ${activeTab === 'activity' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('activity')}
|
||||
>
|
||||
<span className="tab-icon">📋</span>
|
||||
{t('dashboard.activity')}
|
||||
{notifications.length > 0 && <span className="tab-count warn">{notifications.length}</span>}
|
||||
</button>
|
||||
<button
|
||||
className={`dashboard-tab ${activeTab === 'actions' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('actions')}
|
||||
>
|
||||
<span className="tab-icon">⚡</span>
|
||||
{t('dashboard.quickActions')}
|
||||
</button>
|
||||
<button
|
||||
className={`dashboard-tab ${activeTab === 'status' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('status')}
|
||||
>
|
||||
<span className="tab-icon">📡</span>
|
||||
{t('dashboard.status') || 'Status'}
|
||||
</button>
|
||||
<div className="dash-grid">
|
||||
{/* System */}
|
||||
<div className="dash-card dash-span-2">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">{sys.os || sys.platform || 'System'} · {sys.arch || ''}</span>
|
||||
<button className="sm ghost" onClick={() => api.runScan().then(loadData)}>↻ Rescan</button>
|
||||
</div>
|
||||
<div className="dash-tools-row">
|
||||
{tools.slice(0, 12).map((tool, i) => {
|
||||
const ok = tool.installed || tool.status === 'installed'
|
||||
return (
|
||||
<span key={tool.name || i} className={`dash-tool-tag ${ok ? 'ok' : 'missing'}`}>
|
||||
{ok ? '●' : '○'} {tool.name}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
{tools.length > 12 && <span className="dash-tool-tag">+{tools.length - 12}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-content">
|
||||
{activeTab === 'tools' && (
|
||||
<div className="dashboard-tools-panel">
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">{t('dashboard.systemOverview')}</div>
|
||||
<div className="dashboard-tools-stats">
|
||||
<span className="stat-ok">{installedCount} {t('dashboard.installed')}</span>
|
||||
{missingCount > 0 && <span className="stat-missing">{missingCount} {t('dashboard.missing')}</span>}
|
||||
{/* API Quota */}
|
||||
<div className="dash-card">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">API Quota</span>
|
||||
</div>
|
||||
<div className="dash-quota-list">
|
||||
{minimax && minimax.data?.models?.map((m, i) => (
|
||||
<div key={i} className="dash-quota-row">
|
||||
<span className="dash-quota-name">{String(m.model).replace('MiniMax-', '')}</span>
|
||||
<div className="dash-bar">
|
||||
<div className="dash-bar-fill" style={{ width: `${Math.min(100, (m.used / m.total) * 100)}%` }} />
|
||||
</div>
|
||||
<span className="dash-quota-val">{m.remaining}/{m.total}</span>
|
||||
</div>
|
||||
{systemInfo && (
|
||||
<div className="dashboard-system-info">
|
||||
<span className="sys-info-item">{systemInfo.os || systemInfo.platform || 'Unknown'}</span>
|
||||
<span className="sys-info-sep">·</span>
|
||||
<span className="sys-info-item">{systemInfo.arch || 'Unknown'}</span>
|
||||
{systemInfo.shell && <><span className="sys-info-sep">·</span><span className="sys-info-item">{systemInfo.shell}</span></>}
|
||||
</div>
|
||||
)}
|
||||
<div className="tools-grid">
|
||||
{tools.length === 0 && (
|
||||
<div className="empty-state">{t('dashboard.noTools')}</div>
|
||||
)}
|
||||
{tools.map((tool, i) => (
|
||||
<ToolCard
|
||||
key={tool.name || i}
|
||||
tool={tool}
|
||||
onInstall={handleInstallTool}
|
||||
installing={installing}
|
||||
/>
|
||||
))}
|
||||
))}
|
||||
{minimax && minimax.data?.models?.length === 0 && (
|
||||
<div className="dash-quota-row">
|
||||
<span className="dash-quota-name">MiniMax</span>
|
||||
<span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>{minimax.error || 'no data'}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{zai && (
|
||||
<div className="dash-quota-row">
|
||||
<span className="dash-quota-name">Z.AI</span>
|
||||
<span className="dash-quota-val">{zai.healthy ? '✓ active' : zai.error || '—'}</span>
|
||||
</div>
|
||||
)}
|
||||
{!minimax && !zai && <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>No providers</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'activity' && (
|
||||
<div className="dashboard-activity-panel">
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">{t('dashboard.activityLog')}</div>
|
||||
<button className="sm ghost" onClick={() => setNotifications([])} disabled={notifications.length === 0}>
|
||||
{t('dashboard.clearLog')}
|
||||
</button>
|
||||
{/* Running Processes */}
|
||||
<div className="dash-card">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">Running Processes</span>
|
||||
<span className="dash-count">{processes.length}</span>
|
||||
</div>
|
||||
<div className="dash-proc-list">
|
||||
{processes.length === 0 && <span className="dash-empty">No relevant processes</span>}
|
||||
{processes.slice(0, 8).map((p, i) => (
|
||||
<div key={i} className="dash-proc-row">
|
||||
<span className="dash-proc-name">{p.name}</span>
|
||||
<span className="dash-proc-res">cpu {p.cpu}% · mem {p.mem}%</span>
|
||||
</div>
|
||||
{notifications.length === 0 ? (
|
||||
<div className="empty-state">{t('dashboard.noActivity')}</div>
|
||||
) : (
|
||||
<div className="activity-log">
|
||||
{notifications.map(entry => (
|
||||
<ActivityItem key={entry.id} entry={entry} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Commands */}
|
||||
<div className="dash-card">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">Recent Commands</span>
|
||||
</div>
|
||||
<div className="dash-cmd-list">
|
||||
{recentCmds.length === 0 && <span className="dash-empty">No history</span>}
|
||||
{recentCmds.slice(0, 8).map((c, i) => (
|
||||
<div key={i} className="dash-cmd-row" title={c.cmd}>
|
||||
<span className="dash-cmd-shell">{c.shell}</span>
|
||||
<span className="dash-cmd-text">{c.cmd.length > 45 ? c.cmd.slice(0, 42) + '...' : c.cmd}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status (MCP/LSP/Skills) */}
|
||||
<div className="dash-card">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">Services</span>
|
||||
</div>
|
||||
{dashboardStatus ? (
|
||||
<div className="dash-services">
|
||||
<div className="dash-svc-row">
|
||||
<span className="dash-svc-name">MCP</span>
|
||||
<span className="dash-svc-val">{dashboardStatus.mcp?.healthy || 0}/{dashboardStatus.mcp?.total || 0} healthy</span>
|
||||
</div>
|
||||
<div className="dash-svc-row">
|
||||
<span className="dash-svc-name">LSP</span>
|
||||
<span className="dash-svc-val">{dashboardStatus.lsp?.installed || 0}/{dashboardStatus.lsp?.total || 0} installed</span>
|
||||
</div>
|
||||
<div className="dash-svc-row">
|
||||
<span className="dash-svc-name">Skills</span>
|
||||
<span className="dash-svc-val">{dashboardStatus.skills?.total || 0} deployed</span>
|
||||
</div>
|
||||
{(dashboardStatus.skills?.issues || []).length > 0 && (
|
||||
<div className="dash-svc-issues">
|
||||
{(dashboardStatus.skills.issues || []).slice(0, 3).map((issue, i) => (
|
||||
<div key={i} className="dash-svc-issue">⚠ {issue}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'actions' && (
|
||||
<div className="dashboard-actions-panel">
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">{t('dashboard.quickActions')}</div>
|
||||
</div>
|
||||
<div className="quick-actions-grid">
|
||||
<QuickActionButton
|
||||
icon="🔍"
|
||||
label={t('dashboard.rescanSystem')}
|
||||
onClick={handleRescan}
|
||||
loading={scanLoading}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon="📦"
|
||||
label={t('dashboard.installMissing')}
|
||||
onClick={handleInstallMissing}
|
||||
loading={installing}
|
||||
disabled={missingCount === 0}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon="🔄"
|
||||
label={t('dashboard.checkUpdates')}
|
||||
onClick={handleCheckUpdates}
|
||||
loading={loading}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon="⚙"
|
||||
label={t('dashboard.configureMCP')}
|
||||
onClick={handleConfigureMCP}
|
||||
loading={mcpLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{updates.length > 0 && (
|
||||
<div className="dashboard-updates-section">
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">{t('dashboard.updates')}</div>
|
||||
<span className="badge warn">{updates.length}</span>
|
||||
</div>
|
||||
<div className="updates-list">
|
||||
{updates.map((update, i) => (
|
||||
<div key={update.name || i} className="update-row">
|
||||
<div className="update-info">
|
||||
<span className="update-name">{update.name || 'Unknown'}</span>
|
||||
<span className="update-versions">
|
||||
{update.current || update.version || '?'} → {update.latest || update.target || '?'}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
className="sm"
|
||||
onClick={() => api.runUpdate(update.name)}
|
||||
disabled={loading}
|
||||
>
|
||||
{t('dashboard.update')}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'status' && (
|
||||
<div className="dashboard-status-panel">
|
||||
{dashboardStatus ? (
|
||||
<>
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">MCP Servers</div>
|
||||
<span className="badge">{dashboardStatus.mcp?.healthy || 0}/{dashboardStatus.mcp?.total || 0} healthy</span>
|
||||
</div>
|
||||
<div className="tools-grid" style={{ marginBottom: 16 }}>
|
||||
{(dashboardStatus.mcp?.servers || []).map((s, i) => (
|
||||
<div key={i} className={`tool-card ${s.healthy ? 'installed' : s.installed ? '' : 'missing'}`}>
|
||||
<div className="tool-card-info">
|
||||
<div className="tool-card-name">{s.name}</div>
|
||||
<div className="tool-card-version">
|
||||
{s.healthy ? <span className="status-ok">healthy</span> :
|
||||
s.installed ? <span className="status-missing">installed</span> :
|
||||
<span className="status-missing">not found</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">LSP Servers</div>
|
||||
<span className="badge">{dashboardStatus.lsp?.installed || 0}/{dashboardStatus.lsp?.total || 0} installed</span>
|
||||
</div>
|
||||
<div className="tools-grid" style={{ marginBottom: 16 }}>
|
||||
{(dashboardStatus.lsp?.servers || []).filter(s => s.installed).map((s, i) => (
|
||||
<div key={i} className="tool-card installed">
|
||||
<div className="tool-card-info">
|
||||
<div className="tool-card-name">{s.name}</div>
|
||||
<div className="tool-card-version">
|
||||
<span className="status-ok">{s.language}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="dashboard-section-header">
|
||||
<div className="dashboard-section-title">Skills</div>
|
||||
<span className="badge">{dashboardStatus.skills?.total || 0} deployed</span>
|
||||
{(dashboardStatus.skills?.issues || []).length > 0 && (
|
||||
<span className="badge warn">{(dashboardStatus.skills.issues || []).length} issues</span>
|
||||
)}
|
||||
</div>
|
||||
{(dashboardStatus.skills?.issues || []).length > 0 && (
|
||||
<div style={{ fontSize: 12, color: 'var(--warning)', marginBottom: 8 }}>
|
||||
{(dashboardStatus.skills.issues || []).map((issue, i) => (
|
||||
<div key={i}>{issue}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="empty-state">Loading status...</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="dash-empty">Loading...</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Updates */}
|
||||
{updates.length > 0 && (
|
||||
<div className="dash-card dash-span-2">
|
||||
<div className="dash-card-head">
|
||||
<span className="dash-label">Updates Available</span>
|
||||
<span className="dash-count warn">{updates.length}</span>
|
||||
</div>
|
||||
<div className="dash-updates-list">
|
||||
{updates.slice(0, 5).map((u, i) => (
|
||||
<div key={u.name || i} className="dash-update-row">
|
||||
<span className="dash-update-name">{u.name}</span>
|
||||
<span className="dash-update-ver">{u.current || '?'} → {u.latest || '?'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user