Initial implementation of Codex Helper

frontend/index.html

@@ -0,0 +1 @@
+<div id="root"></div><script type="module" src="/src/main.tsx"></script>

frontend/package.json

@@ -0,0 +1 @@
+{"name":"codex-helper-ui","private":true,"version":"0.1.0","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","test":"vitest run"},"dependencies":{"@vitejs/plugin-react":"latest","vite":"8.2.1","typescript":"7.0.2","react":"19.2.7","react-dom":"19.2.7","react-router-dom":"7.18.2","recharts":"3.1.2","lucide-react":"0.539.0"},"devDependencies":{"@types/react":"19.1.10","@types/react-dom":"19.1.7","vitest":"3.2.4"}}

frontend/src/api.ts

@@ -0,0 +1,3 @@
+export async function api<T>(path:string,init:RequestInit={}):Promise<T>{const r=await fetch('/api/v1/'+path,{credentials:'same-origin',...init,headers:{'Content-Type':'application/json','X-Requested-With':'codex-helper',...(init.headers||{})}});const j=await r.json().catch(()=>({}));if(!r.ok)throw new Error(j.error||`HTTP ${r.status}`);return j}
+export const post=<T>(p:string,v:unknown={})=>api<T>(p,{method:'POST',body:JSON.stringify(v)})
+export const put=<T>(p:string,v:unknown)=>api<T>(p,{method:'PUT',body:JSON.stringify(v)})

frontend/src/main.tsx

@@ -0,0 +1,28 @@
+import React,{useEffect,useState} from 'react'
+import{createRoot}from'react-dom/client'
+import{BrowserRouter,Navigate,Route,Routes,useNavigate}from'react-router-dom'
+import{Activity,Bell,ChartNoAxesCombined,Database,LogOut,Moon,RefreshCw,Settings,Sun,Zap}from'lucide-react'
+import{Area,AreaChart,CartesianGrid,ResponsiveContainer,Tooltip,XAxis,YAxis}from'recharts'
+import{api,post}from'./api'
+import'./styles.css'
+
+type Status={initialized:boolean;appServer:boolean;version:string};type Limit={limitId:string;limitName?:string;windowType:string;usedPercent:number;windowDurationMinutes:number;resetsAt:number};type Point={date:string;totalTokens:number};type Dash={account:{email?:string;planType?:string;connected:boolean};limits:Limit[];summary:{lifetimeTokens?:number;peakDailyTokens?:number;currentStreakDays?:number;callCount?:number};usage:Point[];fetchedAt:number;stale:boolean;lastError?:string};
+function App(){const[s,setS]=useState<Status|null>(null);const[auth,setAuth]=useState<boolean|null>(null);useEffect(()=>{api<Status>('system/status').then(x=>{setS(x);if(x.initialized)api('auth/me').then(()=>setAuth(true)).catch(()=>setAuth(false));else setAuth(false)})},[]);if(!s||auth===null)return <Splash/>;if(!s.initialized)return <Setup onDone={()=>{setS({...s,initialized:true});setAuth(true)}}/>;return <BrowserRouter><Routes>{auth?<Route path="*" element={<Shell logout={()=>setAuth(false)}/>}/>:<Route path="*" element={<Login done={()=>setAuth(true)}/>}/>}</Routes></BrowserRouter>}
+const Splash=()=> <main className="center"><div className="logo"><Zap/> Codex Helper</div><div className="spinner"/></main>;
+function Setup({onDone}:{onDone:()=>void}){const[form,set]=useState({username:'admin',password:'',timezone:Intl.DateTimeFormat().resolvedOptions().timeZone});const[err,setErr]=useState('');async function submit(e:React.FormEvent){e.preventDefault();try{await post('setup',form);onDone()}catch(x){setErr((x as Error).message)}}return <main className="setup"><section className="hero"><div className="logo"><Zap/> Codex Helper</div><h1>连接你的 Codex<br/><span>看见每一次增长</span></h1><p>一个容器内完成用量洞察、重置提醒与账户管理。</p></section><form className="panel form" onSubmit={submit}><small>首次初始化 · 1 / 1</small><h2>创建管理员</h2><label>用户名<input value={form.username} onChange={e=>set({...form,username:e.target.value})}/></label><label>密码<input type="password" minLength={10} value={form.password} onChange={e=>set({...form,password:e.target.value})} placeholder="至少 10 位"/></label><label>时区<input value={form.timezone} onChange={e=>set({...form,timezone:e.target.value})}/></label>{err&&<p className="error">{err}</p>}<button>完成初始化</button><p className="hint">Codex、Telegram 与 SMTP 可在进入系统后通过设置中心完成。</p></form></main>}
+function Login({done}:{done:()=>void}){const[u,setU]=useState('admin'),[p,setP]=useState(''),[e,setE]=useState('');return <main className="center"><form className="panel form login" onSubmit={async x=>{x.preventDefault();try{await post('auth/login',{username:u,password:p});done()}catch(q){setE((q as Error).message)}}}><div className="logo"><Zap/> Codex Helper</div><h2>欢迎回来</h2><label>用户名<input value={u} onChange={x=>setU(x.target.value)}/></label><label>密码<input type="password" value={p} onChange={x=>setP(x.target.value)}/></label>{e&&<p className="error">{e}</p>}<button>登录</button></form></main>}
+function Shell({logout}:{logout:()=>void}){const nav=useNavigate();const[theme,setTheme]=useState(localStorage.theme||'system');useEffect(()=>{document.documentElement.dataset.theme=theme==='system'?(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):theme;localStorage.theme=theme},[theme]);return <div className="app"><aside><div className="logo"><Zap/> Codex Helper</div><nav><button onClick={()=>nav('/')}><Activity/>总览</button><button onClick={()=>nav('/history')}><ChartNoAxesCombined/>历史用量</button><button onClick={()=>nav('/settings')}><Settings/>设置中心</button></nav><div className="aside-bottom"><button onClick={()=>setTheme(theme==='dark'?'light':'dark')}>{theme==='dark'?<Sun/>:<Moon/>}切换主题</button><button onClick={async()=>{await post('auth/logout');logout()}}><LogOut/>退出</button></div></aside><section className="content"><Routes><Route path="/" element={<Dashboard/>}/><Route path="/history" element={<History/>}/><Route path="/settings" element={<SettingsPage/>}/><Route path="*" element={<Navigate to="/"/>}/></Routes></section></div>}
+function useDash(){const[d,setD]=useState<Dash|null>(null),[e,setE]=useState('');const load=()=>api<Dash>('dashboard').then(setD).catch(x=>setE(x.message));useEffect(()=>{load();const t=setInterval(load,30000);return()=>clearInterval(t)},[]);return{d,e,load}}
+function Dashboard(){const{d,e,load}=useDash();if(!d)return <Splash/>;return <><Header title="用量总览" sub="实时掌握 Codex 账户限额与重置周期"><button className="secondary" onClick={async()=>{await post('sync');load()}}><RefreshCw/>立即刷新</button></Header>{e&&<div className="banner">{e}</div>}<div className="account panel"><span className={'dot '+(d.account.connected?'ok':'')}/><div><small>CODEx ACCOUNT</small><b>{d.account.email||'尚未连接'}</b></div><span className="badge">{d.account.planType||'未识别套餐'}</span><span className="fresh">更新于 {new Date(d.fetchedAt*1000).toLocaleString()}</span></div><div className="limits">{d.limits.map((x,i)=><LimitCard key={i} x={x}/>)}</div><div className="stats"><Stat label="累计 Tokens" v={num(d.summary.lifetimeTokens)}/><Stat label="单日峰值" v={num(d.summary.peakDailyTokens)}/><Stat label="连续使用" v={d.summary.currentStreakDays==null?'暂无':d.summary.currentStreakDays+' 天'}/><Stat label="调用次数" v="暂不提供" muted/></div><Chart data={d.usage}/></>}
+function LimitCard({x}:{x:Limit}){const left=Math.max(0,100-x.usedPercent);return <div className="panel limit"><div><small>{x.limitName||x.limitId} · {x.windowType}</small><strong>{x.usedPercent.toFixed(1)}<i>%</i></strong><span>已使用</span></div><div className="ring" style={{background:`conic-gradient(var(--accent) ${x.usedPercent}%,var(--track) 0)`}}><div>{left.toFixed(0)}%<small>剩余</small></div></div><footer><span>{x.windowDurationMinutes} 分钟窗口</span><span>重置 {new Date(x.resetsAt*1000).toLocaleString()}</span></footer></div>}
+const Stat=({label,v,muted=false}:{label:string,v:string,muted?:boolean})=><div className="panel stat"><small>{label}</small><b className={muted?'muted':''}>{v}</b></div>;
+const Chart=({data}:{data:Point[]})=><div className="panel chart"><div><h3>每日 Token 趋势</h3><small>Codex app server 提供的每日总量</small></div><ResponsiveContainer width="100%" height={280}><AreaChart data={data}><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#5ee7f7" stopOpacity={.35}/><stop offset="1" stopColor="#5ee7f7" stopOpacity={0}/></linearGradient></defs><CartesianGrid stroke="var(--grid)" vertical={false}/><XAxis dataKey="date" stroke="var(--muted)"/><YAxis stroke="var(--muted)"/><Tooltip contentStyle={{background:'var(--panel)',border:'1px solid var(--border)',borderRadius:12}}/><Area type="monotone" dataKey="totalTokens" stroke="#4dd8ed" fill="url(#a)" strokeWidth={2}/></AreaChart></ResponsiveContainer></div>;
+function History(){const{d}=useDash();return <><Header title="历史用量" sub="最多展示本地保留期内的每日总 Token"/>{d?<><div className="notice"><Database/> 调用次数、输入 Token 和输出 Token 暂未由 Codex app server 提供。</div><Chart data={d.usage}/></>:<Splash/>}</>}
+function SettingsPage(){const[tab,setTab]=useState('general');return <><Header title="设置中心" sub="所有运行期配置均可在这里完成"/><div className="settings"><div className="tabs"><button className={tab==='general'?'active':''} onClick={()=>setTab('general')}><Settings/>通用</button><button className={tab==='codex'?'active':''} onClick={()=>setTab('codex')}><Zap/>Codex</button><button className={tab==='telegram'?'active':''} onClick={()=>setTab('telegram')}><Bell/>Telegram</button><button className={tab==='smtp'?'active':''} onClick={()=>setTab('smtp')}><Bell/>SMTP 邮件</button></div>{tab==='general'?<General/>:tab==='codex'?<CodexSettings/>:tab==='telegram'?<Telegram/>:<SMTP/>}</div></>}
+function General(){const[v,setV]=useState<any>(null),[msg,setMsg]=useState('');useEffect(()=>{api('settings/general').then(setV)},[]);if(!v)return <Splash/>;return <form className="panel form wide" onSubmit={async e=>{e.preventDefault();try{await api('settings/general',{method:'PUT',body:JSON.stringify(v)});setMsg('设置已保存')}catch(x){setMsg((x as Error).message)}}}><h2>通用设置</h2><div className="grid2"><label>时区<input value={v.timezone} onChange={e=>setV({...v,timezone:e.target.value})}/></label><label>主题<select value={v.theme} onChange={e=>setV({...v,theme:e.target.value})}><option value="system">跟随系统</option><option value="dark">深色</option><option value="light">浅色</option></select></label><label>同步间隔（分钟）<input type="number" min="1" max="60" value={v.syncMinutes} onChange={e=>setV({...v,syncMinutes:+e.target.value})}/></label><label>历史保留（天）<select value={v.retentionDays} onChange={e=>setV({...v,retentionDays:+e.target.value})}>{[30,60,90,180,365].map(x=><option key={x}>{x}</option>)}</select></label><label>提前提醒（分钟）<input type="number" min="1" max="1440" value={v.beforeMinutes} onChange={e=>setV({...v,beforeMinutes:+e.target.value})}/></label><label className="checks"><input type="checkbox" checked={v.notifyBefore} onChange={e=>setV({...v,notifyBefore:e.target.checked})}/>重置前提醒 <input type="checkbox" checked={v.notifyAfter} onChange={e=>setV({...v,notifyAfter:e.target.checked})}/>重置后确认</label></div><button>保存设置</button>{msg&&<p className="hint">{msg}</p>}</form>}
+function CodexSettings(){const[result,setResult]=useState<any>(null),[err,setErr]=useState('');return <div className="panel form wide"><h2>Codex 账户</h2><p>使用设备码登录，适合 Docker 与远程部署。Codex app server 将安全管理登录凭据。</p><button onClick={async()=>{try{setResult(await post('codex/login/device'));setErr('')}catch(x){setErr((x as Error).message)}}}>生成设备码</button>{result&&<div className="codebox"><span>访问 <a href={result.verificationUrl} target="_blank">{result.verificationUrl}</a></span><strong>{result.userCode}</strong></div>}{err&&<p className="error">{err}</p>}<button className="danger" onClick={()=>post('codex/logout')}>退出 Codex 账户</button></div>}
+function Telegram(){const[v,setV]=useState<any>(null),[msg,setMsg]=useState(''),[code,setCode]=useState('');useEffect(()=>{api('settings/telegram').then(setV)},[]);if(!v)return <Splash/>;return <form className="panel form wide" onSubmit={async e=>{e.preventDefault();try{const x:any=await api('settings/telegram',{method:'PUT',body:JSON.stringify(v)});setV(x);setMsg('Bot 已验证并保存')}catch(x){setMsg((x as Error).message)}}}><h2>Telegram Bot</h2><label>Bot Token<input type="password" value={v.token||''} onChange={e=>setV({...v,token:e.target.value})} placeholder={v.configured?'已配置，留空表示不修改':'从 BotFather 获取'}/></label><div className="checks"><label><input type="checkbox" checked={v.enabled} onChange={e=>setV({...v,enabled:e.target.checked})}/>启用提醒</label><label><input type="checkbox" checked={v.menuEnabled} onChange={e=>setV({...v,menuEnabled:e.target.checked})}/>启用查询菜单</label></div><button>验证并保存</button><div className="actions"><button type="button" className="secondary" onClick={async()=>{const x:any=await post('settings/telegram/bind');setCode(x.code)}}>生成绑定码</button><button type="button" className="secondary" onClick={async()=>{try{await post('settings/telegram/test');setMsg('测试消息已发送')}catch(x){setMsg((x as Error).message)}}}>发送测试</button></div>{code&&<div className="codebox"><span>向 Bot 发送</span><strong>/bind {code}</strong></div>}{msg&&<p className="hint">{msg}</p>}</form>}
+function SMTP(){const[v,setV]=useState<any>(null),[msg,setMsg]=useState('');useEffect(()=>{api('settings/smtp').then(setV)},[]);if(!v)return <Splash/>;const save=async(e:React.FormEvent)=>{e.preventDefault();try{setV(await api('settings/smtp',{method:'PUT',body:JSON.stringify(v)}));setMsg('SMTP 设置已保存')}catch(x){setMsg((x as Error).message)}};return <form className="panel form wide" onSubmit={save}><h2>SMTP 邮件</h2><div className="grid2"><label>服务器<input value={v.host} onChange={e=>setV({...v,host:e.target.value})} placeholder="smtp.example.com"/></label><label>端口<input type="number" value={v.port} onChange={e=>setV({...v,port:+e.target.value})}/></label><label>用户名<input value={v.username} onChange={e=>setV({...v,username:e.target.value})}/></label><label>密码<input type="password" value={v.password||''} onChange={e=>setV({...v,password:e.target.value})} placeholder={v.configured?'已配置，留空不修改':''}/></label><label>加密<select value={v.security} onChange={e=>setV({...v,security:e.target.value})}><option value="starttls">STARTTLS</option><option value="tls">隐式 TLS</option><option value="none">无加密</option></select></label><label>发件名称<input value={v.fromName} onChange={e=>setV({...v,fromName:e.target.value})}/></label><label>发件地址<input type="email" value={v.from} onChange={e=>setV({...v,from:e.target.value})}/></label><label>收件地址<input type="email" value={v.to} onChange={e=>setV({...v,to:e.target.value})}/></label></div><label className="checks"><input type="checkbox" checked={v.enabled} onChange={e=>setV({...v,enabled:e.target.checked})}/>启用邮件提醒</label><div className="actions"><button>保存</button><button type="button" className="secondary" onClick={async()=>{try{await post('settings/smtp/test');setMsg('测试邮件已发送')}catch(x){setMsg((x as Error).message)}}}>发送测试邮件</button></div>{msg&&<p className="hint">{msg}</p>}</form>}
+function Header({title,sub,children}:{title:string,sub:string,children?:React.ReactNode}){return <header><div><h1>{title}</h1><p>{sub}</p></div>{children}</header>}
+const num=(v?:number)=>v==null?'暂无':new Intl.NumberFormat('zh-CN',{notation:'compact',maximumFractionDigits:1}).format(v);
+createRoot(document.getElementById('root')!).render(<React.StrictMode><App/></React.StrictMode>)

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"ES2022","useDefineForClassFields":true,"lib":["ES2022","DOM","DOM.Iterable"],"allowJs":false,"skipLibCheck":true,"esModuleInterop":true,"allowSyntheticDefaultImports":true,"strict":true,"forceConsistentCasingInFileNames":true,"module":"ESNext","moduleResolution":"Bundler","resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"jsx":"react-jsx"},"include":["src"],"references":[]}

frontend/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: { outDir: '../backend/internal/web/dist', emptyOutDir: true },
+  server: { proxy: { '/api': 'http://localhost:8080', '/health': 'http://localhost:8080' } },
+})