// G-INTEL — Live Frontend (Cloudflare Pages) // Real API-connected UI. Uses the same HUD design tokens as the prototype. const { useState, useEffect, useMemo, useCallback, useRef } = React; const CFG = window.GINTEL_CONFIG; // ─── API client ─────────────────────────────────────────── const api = { base: () => CFG.API_BASE || '', headers(withAuth) { const h = { 'content-type': 'application/json' }; if (withAuth && CFG.ADMIN_TOKEN) h.authorization = `Bearer ${CFG.ADMIN_TOKEN}`; return h; }, async get(path) { const r = await fetch(this.base() + path, { credentials: 'include' }); if (!r.ok) throw new Error(`GET ${path} → ${r.status}`); return r.json(); }, async send(method, path, body, withAuth = true) { const r = await fetch(this.base() + path, { method, headers: this.headers(withAuth), credentials: 'include', body: body ? JSON.stringify(body) : undefined, }); if (!r.ok) { let err = `${method} ${path} → ${r.status}`; try { const j = await r.json(); if (j?.error) err += ` · ${j.error}`; } catch {} throw new Error(err); } return r.json().catch(() => ({})); }, }; // ─── Utils ──────────────────────────────────────────────── const fmtAgo = (ms) => { if (!ms) return '—'; const d = Date.now() - ms; if (d < 0) return 'now'; if (d < 60_000) return `${Math.floor(d/1000)}秒前`; if (d < 3_600_000) return `${Math.floor(d/60_000)}分前`; if (d < 86_400_000) return `${Math.floor(d/3_600_000)}時間前`; return `${Math.floor(d/86_400_000)}日前`; }; const StatusChip = ({ status }) => { const s = CFG.STATUS[status] ?? CFG.STATUS.unknown; return ( {s.label} ); }; const CatChip = ({ category }) => { const c = CFG.CATEGORIES[category] ?? CFG.CATEGORIES.custom; return ( {c.label} ); }; // ─── Top bar ────────────────────────────────────────────── function TopBar({ health, tab, onTab, mode }) { const tabs = ['EVENTS', 'STORES', 'CONFIG']; return (
G
G-INTEL · RESTOCK INTEL TERMINAL GUNPLA INTELLIGENCE
{tabs.map(t => ( ))}
{health ? `ONLINE · ${mode?.toUpperCase() ?? '—'}` : 'OFFLINE'}
); } // ─── Events tab ─────────────────────────────────────────── function EventsTab({ events, stores, loading, onRefresh, filter, setFilter }) { const byId = useMemo(() => Object.fromEntries(stores.map(s => [s.id, s])), [stores]); return (
{/* Filter bar */}
▸ FILTER
{/* Event feed */}
{events.length === 0 && !loading && (
NO EVENTS YET · Cron runs every minute — check back soon
)} {events.map(e => )}
); } function EventRow({ ev, store }) { const color = ev.store_color || '#8b95a7'; return (
{ev.store_code}
{ev.product_name}
{ev.qty_text && ( {ev.qty_text} )} {ev.price && ( ¥{ev.price.toLocaleString()} )} {ev.store_name} · {ev.source.toUpperCase()} · {fmtAgo(ev.detected_at)} conf {ev.confidence}
{ev.raw_text && (
{ev.raw_text.slice(0, 200)}{ev.raw_text.length > 200 ? '…' : ''}
)}
OPEN ↗
); } // ─── Stores tab ─────────────────────────────────────────── function StoresTab({ stores, onReload, onCollect, onDelete, onOpenAdd, onEdit }) { const grouped = useMemo(() => { const g = {}; for (const s of stores) (g[s.category] ??= []).push(s); return g; }, [stores]); return (
▸ MONITORING STORES
{stores.length} STORES · {stores.filter(s => s.enabled).length} ACTIVE
{Object.entries(CFG.CATEGORIES).map(([cat, meta]) => { const arr = grouped[cat] ?? []; if (!arr.length) return null; return (
{meta.label} {arr.length} STORES
{arr.map(s => )}
); })}
); } function StoreRow({ s, onCollect, onDelete, onEdit }) { return (
{s.code}
{s.name}
{s.sources.map(x => x.toUpperCase()).join(' · ')} {s.x_handles.length > 0 && ( @{s.x_handles.join(' @')} )} last: {fmtAgo(s.last_fetched)} {!s.enabled && ( PAUSED )}
); } // ─── Add-store modal ────────────────────────────────────── function AddStoreModal({ existingIds, onClose, onCreate }) { const [tab, setTab] = useState('catalog'); // catalog | custom const [msg, setMsg] = useState(null); const [busy, setBusy] = useState(false); const catalog = CFG.ADDABLE_STORES.filter(p => !existingIds.includes(p.id)); const [form, setForm] = useState({ id: '', name: '', code: '', color: '#00b8d9', category: 'custom', sources: ['web'], x_handles_str: '', web_urls_str: '', }); const submit = async (payload) => { setBusy(true); setMsg(null); try { await onCreate(payload); onClose(); } catch (e) { setMsg(String(e.message ?? e)); } finally { setBusy(false); } }; const submitCatalog = (preset) => submit({ id: preset.id, name: preset.name, code: preset.code, color: preset.color, category: preset.category, sources: preset.sources, x_handles: preset.x_handles, web_urls: [], }); const submitCustom = () => submit({ id: form.id, name: form.name, code: form.code, color: form.color, category: form.category, sources: form.sources, x_handles: form.x_handles_str.split(/[\s,]+/).map(s => s.trim().replace(/^@/, '')).filter(Boolean), web_urls: form.web_urls_str.split(/[\s,]+/).map(s => s.trim()).filter(Boolean), }); return (
{[['catalog', 'CATALOG · プリセット'], ['custom', 'CUSTOM · 自由入力']].map(([k, l]) => ( ))}
{tab === 'catalog' && (
{catalog.length === 0 && (
すべてのプリセット店舗を追加済みです
)} {catalog.map(p => (
{p.code}
{p.name}
{p.note}
{p.sources.map(s => s.toUpperCase()).join(' · ')}
))}
)} {tab === 'custom' && (
setForm({ ...form, id: e.target.value })} placeholder="e.g. mystore" style={inputStyle} /> setForm({ ...form, name: e.target.value })} placeholder="e.g. マイホビーショップ" style={inputStyle} />
setForm({ ...form, code: e.target.value.toUpperCase() })} maxLength={6} placeholder="MH" style={inputStyle} /> setForm({ ...form, color: e.target.value })} style={{ ...inputStyle, height: 34, padding: 2 }} />
{CFG.SOURCES.map(src => { const on = form.sources.includes(src); return ( ); })}
setForm({ ...form, x_handles_str: e.target.value })} placeholder="e.g. mystore_official, mystore_bot" style={inputStyle} />