@phenx-inc/ctlsurf 0.16.1 → 0.17.1

package/src/renderer/App.tsx

@@ -14,6 +14,7 @@ import {
   findPaneIds,
 } from './components/PaneLayout'
 import { StatusBar } from './components/StatusBar'
+import type { ResourceSnapshot } from './components/Resources'
 import { SettingsDialog } from './components/SettingsDialog'
 import { TicketPane } from './components/TicketPanel'
 import { ObserverPane } from './components/ObserverPanel'
@@ -98,6 +99,7 @@ declare global {
       getVersion: () => Promise<string>
       getUpdateInfo: () => Promise<UpdateInfo>
       onUpdateInfo: (callback: (info: UpdateInfo) => void) => () => void
+      getResourceSnapshot: (fast: boolean) => Promise<ResourceSnapshot>
       copyEmailTable: (html: string, text: string) => Promise<{ ok: boolean }>
       copyText: (text: string) => Promise<{ ok: boolean }>
     }
@@ -778,7 +780,13 @@ export default function App() {
         )}
       </div>
 
-      <StatusBar wsStatus={wsStatus} cwd={cwd} onChangeCwd={handleChangeCwd} updateInfo={updateInfo} />
+      <StatusBar
+        wsStatus={wsStatus}
+        cwd={cwd}
+        onChangeCwd={handleChangeCwd}
+        updateInfo={updateInfo}
+        resourceKey={`${activeTabId}:${tabs.find(t => t.id === activeTabId)?.agent?.id ?? ''}`}
+      />
       <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
 
       {showAgentPicker && agents.length > 0 && (

package/src/renderer/components/Resources.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react'
+
+/** Mirrors MonitorSnapshot in src/main/monitor.ts */
+type Service = 'claude' | 'codex'
+interface UsageWindow { label: string; short: string | null; pct: number; resets: string | null }
+interface PlanUsage { ok: boolean; windows: UsageWindow[]; plan?: string | null; source: string; ts: string; error?: string }
+interface AgentProcess {
+  tabId: string; name: string; active: boolean; remote: boolean; service: Service | null
+  pid: number | null; cpu: number | null; mem: number | null; procs: number
+}
+export interface ResourceSnapshot {
+  machine: {
+    ok: boolean; error?: string; ts: string; label: string
+    cpu?: { pct: number | null; cores: number; load: number[] }
+    mem?: { total: number; used: number; pct: number }
+    disk?: { total: number; free: number } | null
+    gpu?: number | null
+    history: { t: number; cpu: number | null; mem: number | null; gpu: number | null }[]
+  }
+  agents: AgentProcess[]
+  activeService: Service | null
+  usage: Partial<Record<Service, PlanUsage>>
+  interval: number
+}
+
+const SERVICE_NAME: Record<Service, string> = { claude: 'Claude', codex: 'Codex' }
+
+const gb = (bytes: number | null | undefined) => bytes == null ? '—' : `${(bytes / 2 ** 30).toFixed(bytes < 10 * 2 ** 30 ? 1 : 0)} GB`
+const pct = (x: number | null | undefined) => x == null ? '—' : `${Math.round(x)}%`
+/** fills (memory, quota): green → yellow → red; load: neutral */
+const fillTone = (x: number | null | undefined) => x == null ? 'var(--text-dim)' : x < 70 ? 'var(--success)' : x < 90 ? 'var(--warning)' : 'var(--danger)'
+
+function ago(iso: string): string {
+  const s = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 1000))
+  if (s < 60) return `${s}s ago`
+  if (s < 3600) return `${Math.round(s / 60)}m ago`
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`
+  return `${Math.round(s / 86400)}d ago`
+}
+
+/** Poll the main-process monitor: every 3 s while the panel is open, 10 s
+ *  otherwise, and right away when the active tab or its agent changes. */
+function useResourceSnapshot(open: boolean, refreshKey: string): ResourceSnapshot | null {
+  const [data, setData] = useState<ResourceSnapshot | null>(null)
+  useEffect(() => {
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const poll = async () => {
+      try {
+        const snap = await window.worker.getResourceSnapshot(open)
+        if (!cancelled) setData(snap)
+      } catch { /* keep the last snapshot */ }
+      if (!cancelled) timer = setTimeout(poll, open ? 3000 : 10000)
+    }
+    void poll()
+    return () => { cancelled = true; clearTimeout(timer) }
+  }, [open, refreshKey])
+  return data
+}
+
+function Gauge({ label, value, tone, title }: { label: string; value: number | null | undefined; tone: string; title: string }) {
+  const v = Math.max(0, Math.min(100, value ?? 0))
+  return (
+    <span className="res-gauge" title={title}>
+      <span className="res-gauge-bar"><span style={{ height: `${v}%`, background: value == null ? 'transparent' : tone }} /></span>
+      <span className="res-gauge-k">{label}</span><span className="res-gauge-v">{pct(value)}</span>
+    </span>
+  )
+}
+
+/** Status-bar gauges: this machine's CPU/RAM and the active agent's plan
+ *  quota. Click to open the details panel. */
+export function ResourceBar({ refreshKey }: { refreshKey: string }) {
+  const [open, setOpen] = useState(false)
+  const data = useResourceSnapshot(open, refreshKey)
+  const m = data?.machine
+  return (
+    <div className="res-bar" onClick={() => setOpen(!open)} title="Resources and plan quota: click for details">
+      {m?.ok && (
+        <span className="res-group">
+          <Gauge label="CPU" value={m.cpu?.pct} tone="var(--accent)" title={`CPU ${pct(m.cpu?.pct)} of ${m.cpu?.cores} cores`} />
+          <Gauge label="RAM" value={m.mem?.pct} tone={fillTone(m.mem?.pct)} title={`RAM ${gb(m.mem?.used)} of ${gb(m.mem?.total)}`} />
+        </span>
+      )}
+      {data?.activeService && <QuotaGauges service={data.activeService} u={data.usage[data.activeService]} />}
+      {open && <ResourcePanel data={data} close={() => setOpen(false)} />}
+    </div>
+  )
+}
+
+/** Quota for the service the active tab's agent runs on. */
+function QuotaGauges({ service, u }: { service: Service; u?: PlanUsage }) {
+  const name = SERVICE_NAME[service]
+  if (!u) return null // first fetch still running
+  const wins = u.windows.filter((w) => w.short)
+  return (
+    <span className="res-group">
+      <span className="res-name">{name}</span>
+      {u.ok && wins.length
+        ? wins.map((w) => (
+          <Gauge key={w.label} label={w.short!} value={w.pct} tone={fillTone(w.pct)}
+            title={`${name} ${w.label}: ${pct(w.pct)} used${w.resets ? ` · resets ${w.resets}` : ''}`} />
+        ))
+        : <span className="res-off" title={u.error ?? 'no usage reported'}>quota unavailable</span>}
+    </span>
+  )
+}
+
+function Bar({ value, tone }: { value: number | null | undefined; tone: string }) {
+  return <span className="res-rbar"><span style={{ width: `${Math.max(0, Math.min(100, value ?? 0))}%`, background: tone }} /></span>
+}
+
+function Spark({ values, tone, width = 120, height = 22 }: { values: (number | null)[]; tone: string; width?: number; height?: number }) {
+  const pts = values.map((v, i) => [values.length < 2 ? width : (i / (values.length - 1)) * width, height - ((v ?? 0) / 100) * (height - 2) - 1])
+  if (pts.length < 2) return <svg width={width} height={height} className="res-spark" />
+  const line = pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ')
+  return (
+    <svg width={width} height={height} className="res-spark">
+      <polygon points={`0,${height} ${line} ${width},${height}`} fill={tone} opacity={0.15} />
+      <polyline points={line} fill="none" stroke={tone} strokeWidth={1.4} />
+    </svg>
+  )
+}
+
+function UsageView({ service, u, active }: { service: Service; u: PlanUsage; active: boolean }) {
+  return (
+    <div className="res-card">
+      <div className="res-head">
+        <b>{SERVICE_NAME[service]} plan</b>{active && <span className="res-tag">active tab</span>}
+        <span className="res-spacer" /><span className="res-muted">as of {ago(u.ts)}</span>
+      </div>
+      {u.ok ? <>
+        {u.windows.map((w) => (
+          <div key={w.label} className="res-row">
+            <span className="res-k wide">{w.label}</span><Bar value={w.pct} tone={fillTone(w.pct)} />
+            <span className="res-v narrow">{pct(w.pct)}</span>
+            <span className="res-muted res-resets">{w.resets ? `resets ${w.resets}` : ''}</span>
+          </div>
+        ))}
+        <div className="res-muted res-note">from {u.source}{u.plan ? ` · plan ${u.plan}` : ''}</div>
+      </> : <div className="res-muted">{u.error ?? 'no usage reported'}</div>}
+    </div>
+  )
+}
+
+function MachineView({ m }: { m: ResourceSnapshot['machine'] }) {
+  const h = m.history
+  return (
+    <div className="res-card">
+      <div className="res-head">
+        <span className={`res-dot ${m.ok ? 'ok' : 'bad'}`} /><b>{m.label}</b>
+        <span className="res-spacer" /><span className="res-muted">updated {ago(m.ts)}</span>
+      </div>
+      {!m.ok ? <div className="res-err">{m.error ?? 'unavailable'}</div> : <>
+        <div className="res-row"><span className="res-k">CPU</span><Bar value={m.cpu?.pct} tone="var(--accent)" />
+          <span className="res-v">{pct(m.cpu?.pct)}</span><Spark values={h.map((p) => p.cpu)} tone="var(--accent)" /></div>
+        <div className="res-row"><span className="res-k" />
+          <span className="res-muted">{m.cpu?.cores} cores · load {m.cpu?.load.map((x) => x.toFixed(2)).join(' ')}</span></div>
+        <div className="res-row"><span className="res-k">RAM</span><Bar value={m.mem?.pct} tone={fillTone(m.mem?.pct)} />
+          <span className="res-v">{gb(m.mem?.used)} / {gb(m.mem?.total)}</span><Spark values={h.map((p) => p.mem)} tone={fillTone(m.mem?.pct)} /></div>
+        {m.gpu != null && <div className="res-row"><span className="res-k">GPU</span><Bar value={m.gpu} tone="var(--sev-digest)" />
+          <span className="res-v">{pct(m.gpu)}</span><Spark values={h.map((p) => p.gpu)} tone="var(--sev-digest)" /></div>}
+        {m.disk && <div className="res-row"><span className="res-k">Disk</span>
+          <Bar value={100 * (1 - m.disk.free / m.disk.total)} tone={fillTone(100 * (1 - m.disk.free / m.disk.total))} />
+          <span className="res-v">{gb(m.disk.free)} free</span></div>}
+      </>}
+    </div>
+  )
+}
+
+function AgentsView({ agents }: { agents: AgentProcess[] }) {
+  return (
+    <div className="res-card">
+      <div className="res-head"><b>Agents in tabs</b></div>
+      {agents.length ? agents.map((a) => (
+        <div key={a.tabId} className="res-agent">
+          <span className={a.active ? 'res-agent-name active' : 'res-agent-name'}>{a.name}</span>
+          {a.active && <span className="res-tag">active</span>}
+          <div className="res-muted">
+            {a.pid == null ? 'exited' : <>
+              pid {a.pid} · {a.procs} process{a.procs === 1 ? '' : 'es'}
+              {a.cpu != null ? ` · CPU ${a.cpu.toFixed(0)}%` : ''}{a.mem != null ? ` · ${gb(a.mem)}` : ''}
+            </>}
+            {a.remote ? ' · local ssh client (agent runs remotely)' : ''}
+          </div>
+        </div>
+      )) : <div className="res-muted">no agents running</div>}
+    </div>
+  )
+}
+
+function ResourcePanel({ data, close }: { data: ResourceSnapshot | null; close: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') close() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [close])
+  // Active tab's service first, then any other service an open tab uses.
+  const services = (Object.keys(data?.usage ?? {}) as Service[])
+    .sort((a, b) => Number(b === data?.activeService) - Number(a === data?.activeService))
+  return (
+    <div className="res-panel" onClick={(e) => e.stopPropagation()}>
+      <div className="res-panel-head">
+        <h2>Resources</h2><span className="res-muted">plan quota and this machine · every 3 s</span>
+        <span className="res-spacer" /><button className="res-close" onClick={close} aria-label="Close">✕</button>
+      </div>
+      <div className="res-panel-body">
+        {!data ? <div className="res-muted">sampling…</div> : <>
+          {services.map((s) => <UsageView key={s} service={s} u={data.usage[s]!} active={s === data.activeService} />)}
+          {data.activeService && !data.usage[data.activeService] && <div className="res-muted">checking {SERVICE_NAME[data.activeService]} quota…</div>}
+          <MachineView m={data.machine} />
+          <AgentsView agents={data.agents} />
+        </>}
+      </div>
+    </div>
+  )
+}

package/src/renderer/components/StatusBar.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { ResourceBar } from './Resources'
 
 interface UpdateInfo {
   current: string
@@ -12,9 +13,12 @@ interface StatusBarProps {
   cwd: string | null
   onChangeCwd: () => void
   updateInfo: UpdateInfo | null
+  // Changes when the active tab or its agent does, so the quota gauges
+  // switch to the new agent's service right away.
+  resourceKey: string
 }
 
-export function StatusBar({ wsStatus, cwd, onChangeCwd, updateInfo }: StatusBarProps) {
+export function StatusBar({ wsStatus, cwd, onChangeCwd, updateInfo, resourceKey }: StatusBarProps) {
   const [creating, setCreating] = useState(false)
 
   const wsLabel = {
@@ -63,6 +67,7 @@ export function StatusBar({ wsStatus, cwd, onChangeCwd, updateInfo }: StatusBarP
         </span>
       </div>
       <div className="statusbar-section">
+        <ResourceBar refreshKey={resourceKey} />
         <span className={`status-dot ${wsDotClass}`} />
         {isNoProject ? (
           <>

package/src/renderer/styles.css

@@ -960,6 +960,51 @@ html, body, #root {
   font-weight: 500;
 }
 
+/* Resources + plan quota (status bar gauges and details panel) */
+.res-bar { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 1px 6px; margin-right: 8px; border-radius: 4px; }
+.res-bar:hover { background: var(--bg-surface); }
+.res-group { display: inline-flex; align-items: center; gap: 7px; }
+.res-group + .res-group { padding-left: 10px; border-left: 1px solid var(--border-subtle); }
+.res-name { color: var(--text-soft); }
+.res-off { color: var(--text-muted); font-style: italic; }
+.res-gauge { display: inline-flex; align-items: center; gap: 3px; }
+.res-gauge-bar { width: 5px; height: 13px; background: var(--bg-surface-hi); border-radius: 2px; display: flex; align-items: flex-end; overflow: hidden; }
+.res-gauge-bar > span { width: 100%; border-radius: 2px; transition: height .6s ease; }
+.res-gauge-k { color: var(--text-muted); }
+.res-gauge-v { color: var(--text-bright); font-family: 'JetBrains Mono', 'Fira Code', monospace; min-width: 26px; }
+
+.res-panel { position: fixed; right: 0; bottom: 25px; width: 440px; max-height: 75vh; z-index: 50; cursor: default;
+  background: var(--bg-raised); border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 0;
+  box-shadow: -12px -12px 40px var(--shadow-color); display: flex; flex-direction: column; animation: res-rise .18s ease-out; }
+@keyframes res-rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
+.res-panel-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 6px; }
+.res-panel-head h2 { margin: 0; font-size: 14px; color: var(--text-bright); }
+.res-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
+.res-close:hover { color: var(--text-bright); }
+.res-panel-body { overflow: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--text); }
+.res-card { background: var(--bg-surface); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
+.res-head { display: flex; align-items: center; gap: 8px; color: var(--text-bright); }
+.res-spacer { flex: 1; }
+.res-muted { color: var(--text-muted); font-size: 11.5px; }
+.res-note { margin-top: 2px; }
+.res-err { color: var(--danger); }
+.res-tag { font-size: 10.5px; color: var(--accent); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
+.res-dot { width: 7px; height: 7px; border-radius: 50%; }
+.res-dot.ok { background: var(--success); }
+.res-dot.bad { background: var(--danger); }
+.res-row { display: flex; align-items: center; gap: 8px; }
+.res-k { width: 40px; color: var(--text-soft); flex: none; }
+.res-k.wide { width: 112px; }
+.res-v { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 11.5px; min-width: 104px; }
+.res-v.narrow { min-width: 36px; }
+.res-resets { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.res-rbar { flex: 1; height: 6px; background: var(--bg-surface-hi); border-radius: 3px; overflow: hidden; min-width: 50px; }
+.res-rbar > span { display: block; height: 100%; border-radius: 3px; transition: width .6s ease; }
+.res-spark { flex: none; }
+.res-agent { padding: 2px 0; }
+.res-agent-name { color: var(--text); }
+.res-agent-name.active { color: var(--text-bright); }
+
 .tracking-dot {
   width: 6px;
   height: 6px;