-
{row.name}
-
fetched {formatDate(overview.usage.fetchedAt)}
+
+
+
+ {t.usage.highest}
+
+ {highest.name} · {formatPct(usagePeak(highest))}
+
+
+
+ {t.usage.watch}
+ {watched}
+
+
+ {t.usage.updated}
+ {formatDate(overview.usage.fetchedAt, locale)}
+
+
+
+
+
+ {t.usage.usage}
+ {t.usage.window5h}
+ {t.usage.window7d}
+
+ {groups.map((group) => (
+
+
+ {group.label}
+
+ {group.rows.map((row) => {
+ const risk = usageRiskLevel(row);
+ return (
+
+
+ {row.name}
+
+ {t.usage.risk[risk]}
+
+
+
+
+
+ );
+ })}
-
-
5h
-
-
{formatPct(row.h5pct)}
-
{row.h5reset}
-
-
-
7d
-
-
{formatPct(row.d7pct)}
-
{row.d7reset}
-
-
- ))}
+ ))}
+
);
}
-function TaskPanel({ tasks }: { tasks: DashboardTask[] }) {
+function TaskPanel({
+ tasks,
+ locale,
+ t,
+}: {
+ tasks: DashboardTask[];
+ locale: Locale;
+ t: Messages;
+}) {
const sortedTasks = useMemo(
() =>
[...tasks].sort((a, b) => {
@@ -272,53 +660,97 @@ function TaskPanel({ tasks }: { tasks: DashboardTask[] }) {
);
if (sortedTasks.length === 0) {
- return
등록된 scheduled task가 없어.;
+ return
{t.tasks.empty};
}
return (
-
-
-
-
- | task |
- status |
- schedule |
- next |
- last |
-
-
-
- {sortedTasks.map((task) => (
-
- |
- {task.isWatcher ? 'CI Watch' : task.id}
- {task.promptPreview || '(empty prompt preview)'}
-
- {task.groupFolder} · {task.promptLength} chars
-
- |
-
-
- {statusLabel(task.status)}
-
- {task.suspendedUntil ? (
- until {formatDate(task.suspendedUntil)}
- ) : null}
- |
-
- {task.scheduleType} · {task.scheduleValue}
- {task.contextMode}
- |
- {formatDate(task.nextRun)} |
-
- {formatDate(task.lastRun)}
- {task.lastResult ? {task.lastResult} : null}
- |
+ <>
+
+
+
+
+ | {t.tasks.task} |
+ {t.tasks.status} |
+ {t.tasks.schedule} |
+ {t.tasks.next} |
+ {t.tasks.last} |
- ))}
-
-
-
+ {sortedTasks.map((task) => (
+
+ |
+ {task.isWatcher ? t.tasks.ciWatch : task.id}
+ {task.promptPreview || t.tasks.emptyPrompt}
+
+ {task.groupFolder} · {task.promptLength} {t.units.chars}
+
+ |
+
+
+ {statusLabel(task.status, t)}
+
+ {task.suspendedUntil ? (
+
+ {t.tasks.until} {formatDate(task.suspendedUntil, locale)}
+
+ ) : null}
+ |
+
+ {task.scheduleType} · {task.scheduleValue}
+ {task.contextMode}
+ |
+ {formatDate(task.nextRun, locale)} |
+
+ {formatDate(task.lastRun, locale)}
+ {task.lastResult ? {task.lastResult} : null}
+ |
+
+ ))}
+
+
+
+
+
+ {sortedTasks.map((task) => (
+
+
+
+ {task.isWatcher ? t.tasks.ciWatch : task.id}
+ {task.groupFolder}
+
+
+ {statusLabel(task.status, t)}
+
+
{task.promptPreview || t.tasks.emptyPrompt}
+
+
+ {t.tasks.schedule}
+ {task.scheduleType}
+
+
+ {t.tasks.next}
+ {formatDate(task.nextRun, locale)}
+
+
+ {t.tasks.last}
+ {formatDate(task.lastRun, locale)}
+
+
+ {t.tasks.context}
+ {task.contextMode}
+
+
+ {task.lastResult ? (
+
+ {t.tasks.lastResult}: {task.lastResult}
+
+ ) : null}
+
+ ))}
+
+
);
}
@@ -327,12 +759,22 @@ function App() {
const [error, setError] = useState
(null);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
+ const [lastRefreshed, setLastRefreshed] = useState(null);
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ const [locale, setLocale] = useState(readInitialLocale);
+ const t = messages[locale];
+
+ function setDashboardLocale(nextLocale: Locale) {
+ setLocale(nextLocale);
+ window.localStorage.setItem(LOCALE_STORAGE_KEY, nextLocale);
+ }
async function refresh(showSpinner = false) {
if (showSpinner) setRefreshing(true);
try {
const nextData = await fetchDashboardData();
setData(nextData);
+ setLastRefreshed(new Date().toISOString());
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
@@ -342,6 +784,10 @@ function App() {
}
}
+ useEffect(() => {
+ document.documentElement.lang = localeTags[locale];
+ }, [locale]);
+
useEffect(() => {
void refresh();
const id = window.setInterval(() => {
@@ -350,94 +796,94 @@ function App() {
return () => window.clearInterval(id);
}, []);
+ useEffect(() => {
+ if (!drawerOpen) return;
+
+ function handleKeyDown(event: KeyboardEvent) {
+ if (event.key === 'Escape') setDrawerOpen(false);
+ }
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [drawerOpen]);
+
if (loading && !data) {
- return (
- EJClaw Dashboard 불러오는 중...
- );
+ return ;
}
return (
-
-
+
+
void refresh(true)}
+ refreshing={refreshing}
+ t={t}
+ />
+
+ setDrawerOpen(false)}
+ onLocaleChange={setDashboardLocale}
+ onOpenDrawer={() => setDrawerOpen(true)}
+ onRefresh={() => void refresh(true)}
+ refreshing={refreshing}
+ t={t}
+ />
- {error ? (
-
- ) : null}
-
- {data ? (
- <>
-
-
-
-
-
-
-
+ {error ? (
+
+
+ {t.error.api}: {error}
+
+
+ ) : null}
-
-
-
Agent Heartbeats
- 최근 heartbeat 기준
-
-
-
-
-
-
+ {data ? (
+ <>
+
-
Cost & Quota
- 5h / 7d usage snapshot
+ {t.panels.usage}
+ {t.panels.usageWindow}
-
-
-
-
Rooms & Queues
- processing / waiting / inactive
-
-
-
-
Scheduled Work
- watchers, heartbeats, redacted prompt previews
-
-
-
-
- ) : null}
-
+
+
+
+
+
{t.panels.health}
+ {t.panels.heartbeat}
+
+
+
+
+
+
+
{t.panels.rooms}
+ {t.panels.queue}
+
+
+
+
+
+
+
{t.panels.scheduled}
+ {t.panels.promptPreviews}
+
+
+
+
+ ) : null}
+
+