function Sidebar({ active, setActive }) {
  const { Ico } = window;
  const items = [
    { id: 'hub',     nm: '项目中心',   ico: <Ico.Hub />,    idx: '01' },
    { id: 'bench',   nm: '项目工作台', ico: <Ico.Bench />,  idx: '02' },
    { id: 'asset',   nm: '数字资产',   ico: <Ico.Asset />,  idx: '03' },
    { id: 'script',  nm: '剧本与流程', ico: <Ico.Script />, idx: '04' },
    { id: 'board',   nm: '分镜表',     ico: <Ico.Board />,  idx: '05' },
    { id: 'export',  nm: '导出',       ico: <Ico.Export />, idx: '06' },
    { id: 'model',   nm: '模型设置',   ico: <Ico.Model />,  idx: '07' },
  ];

  // animated quota / latency
  const [quota, setQuota] = React.useState(62);
  const [latency, setLatency] = React.useState(218);
  React.useEffect(() => {
    const id = setInterval(() => {
      setQuota(q => Math.max(58, Math.min(72, q + (Math.random() - 0.5) * 1.5)));
      setLatency(l => Math.max(180, Math.min(260, l + (Math.random() - 0.5) * 8)));
    }, 1200);
    return () => clearInterval(id);
  }, []);

  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-logo" />
        <div className="sb-brand-txt">
          <span className="ttl">EagClaw Story Studio</span>
          <span className="sub">MISSION CTRL · v1.4</span>
        </div>
        <div className="sb-version"><span className="dot" /></div>
      </div>

      <div className="sb-nav-label">
        <span>NAVIGATION</span><span className="dot" />
      </div>
      <nav className="sb-nav">
        {items.map(it => (
          <div key={it.id} className={`sb-item scan-target ${active === it.id ? 'active' : ''}`}
               onClick={() => setActive(it.id)}>
            <span className="ico">{it.ico}</span>
            <span className="nm">{it.nm}</span>
            <span className="idx">{it.idx}</span>
          </div>
        ))}
      </nav>

      <div className="sb-foot">
        <div className="sb-tel-label">SESSION TELEMETRY</div>
        <div className="sb-tel-row">
          <div className="sb-tel-cell">
            <div className="k">QUOTA</div>
            <div><span className="v">{quota.toFixed(0)}</span><span className="u">%</span></div>
          </div>
          <div className="sb-tel-cell">
            <div className="k">LATENCY</div>
            <div><span className="v">{latency.toFixed(0)}</span><span className="u">ms</span></div>
          </div>
        </div>
        <div className="sb-user">
          <div className="av">速</div>
          <div className="info">
            <span className="n">速隐 · 个人版</span>
            <span className="e">studio@local</span>
          </div>
        </div>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;