MuyueWorkspace/web/src/components/Dashboard.jsx

import { useState, useEffect, useCallback, useRef } from 'react'
import { useI18n } from '../i18n'

const MAX_POINTS = 30

const POLL_INTERVAL = 5000
const MAX_IDLE_POLLS = 3

function MiniGraph({ data, max, color, label, unit }) {
  if (!data || data.length < 2) return <div className="dash-graph-empty">collecting...</div>
  const m = max || Math.max(...data, 1)
  const w = 100
  const h = 32
  const points = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w
    const y = h - (v / m) * h
    return `${x},${y}`
  }).join(' ')
  const last = data[data.length - 1]
  return (
    <div className="dash-graph-wrap">
      <div className="dash-graph-header">
        <span className="dash-graph-label">{label}</span>
        <span className="dash-graph-value" style={{ color }}>{last.toFixed(1)}{unit}</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} className="dash-graph-svg" preserveAspectRatio="none">
        <defs>
          <linearGradient id={`fg-${color.replace('#','').replace('var(','').replace(')','')}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.3" />
            <stop offset="100%" stopColor={color} stopOpacity="0.02" />
          </linearGradient>
        </defs>
        <polygon fill={`url(#fg-${color.replace('#','').replace('var(','').replace(')','')})`} points={`${points} ${w},${h} 0,${h}`} />
        <polyline fill="none" stroke={color} strokeWidth="1.5" points={points} vectorEffect="non-scaling-stroke" />
      </svg>
    </div>
  )
}

export default function Dashboard({ api, refreshRef }) {
  const { t } = useI18n()
  const [quota, setQuota] = useState(null)
  const [recentCmds, setRecentCmds] = useState([])
  const [processes, setProcesses] = useState([])
  const [metrics, setMetrics] = useState(null)
  const [copiedIdx, setCopiedIdx] = useState(-1)
  const cpuRef = useRef([])
  const memRef = useRef([])
  const netRxRef = useRef([])
  const netTxRef = useRef([])

  const loadData = useCallback(async () => {
    try {
      const [quotaData, cmdData, procData, metricsData] = await Promise.all([
        api.getProvidersQuota().catch(() => null),
        api.getRecentCommands().catch(() => ({ commands: [] })),
        api.getRunningProcesses().catch(() => ({ processes: [] })),
        api.getSystemMetrics().catch(() => null),
      ])
      setQuota(quotaData?.providers || [])
      setRecentCmds(cmdData.commands || [])
      setProcesses(procData.processes || [])
      if (metricsData) {
        setMetrics(metricsData)
        cpuRef.current = [...cpuRef.current, metricsData.cpu_percent].slice(-MAX_POINTS)
        memRef.current = [...memRef.current, metricsData.mem_percent].slice(-MAX_POINTS)
        netRxRef.current = [...netRxRef.current, metricsData.net_rx_kbs].slice(-MAX_POINTS)
        netTxRef.current = [...netTxRef.current, metricsData.net_tx_kbs].slice(-MAX_POINTS)
      }
    } catch (err) {
      console.error('Dashboard load error:', err)
    }
  }, [api])

  useEffect(() => {
    loadData()
    if (refreshRef) refreshRef.current = loadData
    let active = true
    let idleTicks = 0
    const iv = setInterval(() => {
      const hidden = document.querySelector('.dash-grid')?.closest('.tab-hidden')
      if (hidden) {
        idleTicks++
        if (idleTicks >= MAX_IDLE_POLLS) return
      } else {
        idleTicks = 0
      }
      if (active) loadData()
    }, POLL_INTERVAL)
    return () => { active = false; clearInterval(iv) }
  }, [loadData, refreshRef])

  const minimax = (quota || []).find(p => p.name === 'minimax')
  const zai = (quota || []).find(p => p.name === 'zai')

  const EXCLUDE_CMDS = ['ls', 'cd', 'pwd', 'clear', 'exit', 'history', 'cat', 'echo', 'grep', 'export', 'alias', 'unalias', 'set', 'unset', 'source', '.', 'fg', 'bg', 'jobs', 'wait', 'true', 'false', 'yes', 'sleep', 'date', 'whoami', 'id', 'uname', 'hostname', 'uptime', 'df', 'free', 'top', 'htop', 'nano', 'vi', 'vim', 'less', 'more', 'tail', 'head', 'man', 'info', 'which', 'whereis', 'type', 'command', 'hash', 'builtin', 'help']

  const topCmds = (() => {
    const counts = {}
    for (const c of recentCmds) {
      const base = c.cmd.split(/\s+/)[0]
      if (!base || base.length < 2 || EXCLUDE_CMDS.includes(base)) continue
      if (!/^[a-zA-Z@.\/]/.test(base)) continue
      counts[base] = (counts[base] || 0) + 1
    }
    return Object.entries(counts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([cmd, count]) => ({ cmd, count }))
  })()

  return (
    <div className="dash-grid">
      {/* CPU */}
      <div className="dash-card">
        <div className="dash-card-head">
          <span className="dash-label">CPU</span>
          <span className="dash-count">{metrics ? metrics.cpu_percent.toFixed(0) : '—'}%</span>
        </div>
        <MiniGraph data={cpuRef.current} max={100} color="var(--accent)" label="CPU" unit="%" />
      </div>

      {/* RAM */}
      <div className="dash-card">
        <div className="dash-card-head">
          <span className="dash-label">RAM</span>
          <span className="dash-count">{metrics ? `${metrics.mem_used_mb.toFixed(0)}/${metrics.mem_total_mb.toFixed(0)}` : '—'}</span>
        </div>
        <MiniGraph data={memRef.current} max={100} color="#a78bfa" label="RAM" unit="%" />
      </div>

      {/* Network */}
      <div className="dash-card">
        <div className="dash-card-head">
          <span className="dash-label">Network</span>
          <span className="dash-count">{metrics ? `↓${metrics.net_rx_kbs.toFixed(0)} ↑${metrics.net_tx_kbs.toFixed(0)}` : '—'}</span>
        </div>
        <MiniGraph data={netRxRef.current} max={null} color="#34d399" label="RX" unit=" KB/s" />
        <MiniGraph data={netTxRef.current} max={null} color="#f59e0b" label="TX" unit=" KB/s" />
      </div>

      {/* 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.used}/{m.total}</span>
            </div>
          ))}
          {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>
          )}
          {zai && zai.data?.models?.map((m, i) => (
            <div key={i} className="dash-quota-row">
              <span className="dash-quota-name">{String(m.model)}</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.used}/{m.total}</span>
            </div>
          ))}
          {zai && !zai.data?.models?.length && (
            <div className="dash-quota-row">
              <span className="dash-quota-name">Z.AI</span>
              <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>{zai.error || 'no data'}</span>
            </div>
          )}
          {!minimax && !zai && <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>No providers</span>}
        </div>
      </div>

      {/* Running Processes */}
      <div className="dash-card">
        <div className="dash-card-head">
          <span className="dash-label">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.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>
          ))}
        </div>
      </div>

      {/* Recent Commands */}
      <div className="dash-card">
        <div className="dash-card-head">
          <span className="dash-label">Recent Commands</span>
        </div>
        {topCmds.length > 0 && (
          <div className="dash-cmd-top">
            {topCmds.map((c, i) => (
              <div key={i} className={'dash-cmd-chip' + (copiedIdx === i ? ' dash-cmd-chip-copied' : '')} onClick={() => { navigator.clipboard.writeText(c.cmd); setCopiedIdx(i); setTimeout(() => setCopiedIdx(-1), 1200); }}>
                <span className="dash-cmd-chip-name">{copiedIdx === i ? '✓ Copié' : c.cmd}</span>
                <span className="dash-cmd-chip-count">{c.count}×</span>
              </div>
            ))}
          </div>
        )}
        <div className="dash-cmd-list">
          {recentCmds.length === 0 && <span className="dash-empty">No history</span>}
          {recentCmds.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>
    </div>
  )
}