feat(dashboard): focus ops usage signals (#25)

* feat(dashboard): focus ops usage signals

* style(dashboard): apply usage formatting

* fix(dashboard): hide refresh timestamp noise

apps/dashboard/src/App.tsx

@@ -36,7 +36,7 @@ type HealthLevel = 'ok' | 'stale' | 'down';
 
 const REFRESH_INTERVAL_MS = 15_000;
 const LOCALE_STORAGE_KEY = 'ejclaw.dashboard.locale';
-const DEFAULT_VIEW: DashboardView = 'usage';
+const DEFAULT_VIEW: DashboardView = 'inbox';
 const HEALTH_STALE_MS = 5 * 60_000;
 const HEALTH_DOWN_MS = 15 * 60_000;
 
@@ -139,6 +139,12 @@ function usagePeak(row: UsageRow): number {
   return Math.max(row.h5pct, row.d7pct);
 }
 
+function usageRemaining(row: UsageRow): number | null {
+  const peak = usagePeak(row);
+  if (peak < 0) return null;
+  return Math.max(0, 100 - peak);
+}
+
 function usageRiskLevel(row: UsageRow): RiskLevel {
   const peak = usagePeak(row);
   if (peak >= 85) return 'critical';
@@ -146,6 +152,49 @@ function usageRiskLevel(row: UsageRow): RiskLevel {
   return 'ok';
 }
 
+function usageActive(row: UsageRow): boolean {
+  return row.name.includes('*');
+}
+
+function usageLimited(row: UsageRow): boolean {
+  return row.name.includes('!');
+}
+
+function usageNameParts(row: UsageRow): {
+  account: string;
+  plan: string | null;
+} {
+  const cleaned = row.name.replace(/[*!]/g, '').replace(/\s+/g, ' ').trim();
+  const parts = cleaned.split(' ');
+  const plan = parts.at(-1) ?? null;
+  if (plan && ['max', 'mid', 'pro', 'team'].includes(plan.toLowerCase())) {
+    return { account: parts.slice(0, -1).join(' ') || cleaned, plan };
+  }
+  return { account: cleaned, plan: null };
+}
+
+function usageLimitReset(row: UsageRow): string {
+  return (row.d7pct >= row.h5pct ? row.d7reset : row.h5reset).trim();
+}
+
+function usageBurnRate(row: UsageRow): number | null {
+  if (row.h5pct < 0) return null;
+  return row.h5pct / 5;
+}
+
+function usageSpeedLevel(rate: number | null): RiskLevel {
+  if (rate === null) return 'ok';
+  if (rate >= 12) return 'critical';
+  if (rate >= 7) return 'warn';
+  return 'ok';
+}
+
+function formatUsageRate(rate: number | null): string {
+  if (rate === null) return '-';
+  if (rate > 0 && rate < 1) return '<1%/h';
+  return `${Math.round(rate)}%/h`;
+}
+
 function usageGroup(row: UsageRow): UsageGroup {
   return row.name.toLowerCase().startsWith('codex') ? 'codex' : 'primary';
 }
@@ -322,7 +371,6 @@ function LoadingSkeleton({ t }: { t: Messages }) {
 
 function SideRail({
   activeView,
-  lastRefreshed,
   locale,
   onNavigate,
   onLocaleChange,
@@ -331,7 +379,6 @@ function SideRail({
   t,
 }: {
   activeView: DashboardView;
-  lastRefreshed: string | null;
   locale: Locale;
   onNavigate: (view: DashboardView) => void;
   onLocaleChange: (locale: Locale) => void;
@@ -368,10 +415,6 @@ function SideRail({
       >
         {refreshing ? t.actions.refreshing : t.actions.refresh}
       </button>
-      <div className="drawer-meta">
-        <span>{t.nav.updated}</span>
-        <strong>{formatDate(lastRefreshed, locale)}</strong>
-      </div>
     </aside>
   );
 }
@@ -379,7 +422,6 @@ function SideRail({
 function SectionNav({
   activeView,
   drawerOpen,
-  lastRefreshed,
   locale,
   onCloseDrawer,
   onLocaleChange,
@@ -391,7 +433,6 @@ function SectionNav({
 }: {
   activeView: DashboardView;
   drawerOpen: boolean;
-  lastRefreshed: string | null;
   locale: Locale;
   onCloseDrawer: () => void;
   onLocaleChange: (locale: Locale) => void;
@@ -430,9 +471,6 @@ function SectionNav({
         >
           {refreshing ? '...' : t.actions.refresh}
         </button>
-        <span>
-          {t.nav.updated} {formatDate(lastRefreshed, locale)}
-        </span>
       </nav>
 
       {drawerOpen ? (
@@ -484,10 +522,6 @@ function SectionNav({
               onLocaleChange={onLocaleChange}
               t={t}
             />
-            <div className="drawer-meta">
-              <span>{t.nav.updated}</span>
-              <strong>{formatDate(lastRefreshed, locale)}</strong>
-            </div>
           </aside>
         </>
       ) : null}
@@ -631,9 +665,14 @@ function InboxPanel({
                   <span className="eyebrow">{t.inbox.kinds[item.kind]}</span>
                   <strong>{item.title}</strong>
                 </div>
+                <div className="inbox-card-badges">
                   <span className={`pill pill-${item.severity}`}>
                     {t.inbox.severity[item.severity]}
                   </span>
+                  {item.occurrences > 1 ? (
+                    <span className="pill pill-info">x{item.occurrences}</span>
+                  ) : null}
+                </div>
               </div>
               <p>{item.summary || t.inbox.noSummary}</p>
               <div className="inbox-meta">
@@ -696,9 +735,11 @@ function HealthPanel({
     },
     { pendingTasks: 0, pendingMessageRooms: 0 },
   );
-  const ciFailures = data.overview.inbox.filter(
+  const ciFailures = data.overview.inbox.reduce(
-    (item) => item.kind === 'ci-failure',
+    (count, item) =>
-  ).length;
+      item.kind === 'ci-failure' ? count + item.occurrences : count,
+    0,
+  );
   const healthLevel: HealthLevel =
     down > 0 ? 'down' : stale > 0 || ciFailures > 0 ? 'stale' : 'ok';
   const affectedServices = serviceLevels.filter((item) => item.level !== 'ok');
@@ -735,9 +776,6 @@ function HealthPanel({
         <div>
           <span>{t.health.ciFailures}</span>
           <strong>{ciFailures}</strong>
-          <small>
-            {data.overview.tasks.watchers.paused} {t.status.paused}
-          </small>
         </div>
       </section>
 
@@ -803,10 +841,9 @@ function RoomPanel({
           <thead>
             <tr>
               <th>{t.rooms.room}</th>
-              <th>{t.rooms.service}</th>
-              <th>{t.rooms.agent}</th>
               <th>{t.rooms.status}</th>
               <th>{t.rooms.queue}</th>
+              <th>{t.rooms.elapsed}</th>
             </tr>
           </thead>
           <tbody>
@@ -814,21 +851,23 @@ function RoomPanel({
               <tr key={`${entry.serviceId}:${entry.jid}`}>
                 <td>
                   <strong>{entry.name}</strong>
+                  <details className="record-details">
+                    <summary>{t.rooms.details}</summary>
                     <span>
-                    {entry.folder} · {entry.jid}
+                      {entry.folder} · {entry.jid} · {entry.serviceId} ·{' '}
+                      {entry.agentType}
                     </span>
+                  </details>
                 </td>
-                <td>{entry.serviceId}</td>
-                <td>{entry.agentType}</td>
                 <td>
                   <span className={`pill pill-${entry.status}`}>
                     {statusLabel(entry.status, t)}
                   </span>
-                  <small>{formatDuration(entry.elapsedMs, t)}</small>
                 </td>
                 <td>
                   {queueLabel(entry.pendingTasks, entry.pendingMessages, t)}
                 </td>
+                <td>{formatDuration(entry.elapsedMs, t)}</td>
               </tr>
             ))}
           </tbody>
@@ -857,20 +896,18 @@ function RoomPanel({
                   {queueLabel(entry.pendingTasks, entry.pendingMessages, t)}
                 </strong>
               </span>
-              <span>
-                <small>{t.rooms.agent}</small>
-                <strong>{entry.agentType}</strong>
-              </span>
-              <span>
-                <small>{t.rooms.service}</small>
-                <strong>{entry.serviceId}</strong>
-              </span>
               <span>
                 <small>{t.rooms.elapsed}</small>
                 <strong>{formatDuration(entry.elapsedMs, t)}</strong>
               </span>
             </div>
-            <p className="record-id">{entry.jid}</p>
+            <details className="record-details">
+              <summary>{t.rooms.details}</summary>
+              <p className="record-id">
+                {entry.folder} · {entry.jid} · {entry.serviceId} ·{' '}
+                {entry.agentType}
+              </p>
+            </details>
           </article>
         ))}
       </div>
@@ -878,54 +915,80 @@ function RoomPanel({
   );
 }
 
-function UsageMeter({
+function UsageRemainingMeter({
-  label,
+  row,
-  pct,
-  reset,
   rowName,
   t,
 }: {
-  label: string;
+  row: UsageRow;
-  pct: number;
-  reset: string;
   rowName: string;
   t: Messages;
 }) {
+  const remaining = usageRemaining(row);
+  const reset = usageLimitReset(row);
+
   return (
-    <div className="usage-window">
+    <div className="usage-remaining">
       <div>
-        <span>{label}</span>
+        <span>{t.usage.remaining}</span>
-        <strong>{formatPct(pct)}</strong>
+        <strong>{remaining === null ? '-' : formatPct(remaining)}</strong>
       </div>
       <progress
-        aria-label={`${rowName} ${label} ${t.usage.usage} ${formatPct(pct)}`}
+        aria-label={`${rowName} ${t.usage.remaining} ${
+          remaining === null ? '-' : formatPct(remaining)
+        }`}
         max={100}
-        value={Math.max(0, pct)}
+        value={remaining ?? 0}
       />
-      <small>
+      <small>{reset ? `${t.usage.reset} ${reset}` : t.usage.noReset}</small>
-        {t.usage.reset} {reset || '-'}
+    </div>
-      </small>
+  );
+}
+
+function UsageSpeed({ row, t }: { row: UsageRow; t: Messages }) {
+  const rate = usageBurnRate(row);
+  const level = usageSpeedLevel(rate);
+
+  return (
+    <div className={`usage-speed usage-speed-${level}`}>
+      <span>{t.usage.speed}</span>
+      <strong>{formatUsageRate(rate)}</strong>
+      <small>{t.usage.speedLabel[level]}</small>
     </div>
   );
 }
 
 function UsagePanel({
   overview,
-  locale,
   t,
 }: {
   overview: DashboardOverview;
-  locale: Locale;
   t: Messages;
 }) {
-  const rows = useMemo(() => [...overview.usage.rows], [overview.usage.rows]);
+  const rows = useMemo(
+    () =>
+      [...overview.usage.rows].sort((a, b) => {
+        if (usageActive(a) !== usageActive(b)) return usageActive(a) ? -1 : 1;
+        return usagePeak(b) - usagePeak(a);
+      }),
+    [overview.usage.rows],
+  );
   const watched = rows.filter((row) => usagePeak(row) >= 65).length;
 
   if (rows.length === 0) {
     return <EmptyState>{t.usage.empty}</EmptyState>;
   }
 
-  const highest = rows[0];
+  const activeRows = rows.filter(usageActive);
+  const focusRows = activeRows.length > 0 ? activeRows : rows.slice(0, 1);
+  const focusLabel = activeRows.length > 0 ? t.usage.current : t.usage.tightest;
+  const focusValue = focusRows
+    .map((row) => {
+      const { account } = usageNameParts(row);
+      const remaining = usageRemaining(row);
+      return `${account} ${remaining === null ? '-' : formatPct(remaining)}`;
+    })
+    .join(' · ');
   const groups = [
     {
       key: 'primary' as const,
@@ -943,26 +1006,20 @@ function UsagePanel({
     <div className="usage-dashboard">
       <div className="usage-summary">
         <div>
-          <span>{t.usage.highest}</span>
+          <span>{focusLabel}</span>
-          <strong>
+          <strong>{focusValue}</strong>
-            {highest.name} · {formatPct(usagePeak(highest))}
-          </strong>
         </div>
         <div>
           <span>{t.usage.watch}</span>
           <strong>{watched}</strong>
         </div>
-        <div>
-          <span>{t.usage.updated}</span>
-          <strong>{formatDate(overview.usage.fetchedAt, locale)}</strong>
-        </div>
       </div>
 
       <div className="usage-matrix" role="table" aria-label={t.panels.usage}>
         <div className="usage-matrix-head" role="row">
           <span>{t.usage.usage}</span>
-          <span>{t.usage.window5h}</span>
+          <span>{t.usage.remaining}</span>
-          <span>{t.usage.window7d}</span>
+          <span>{t.usage.speed}</span>
         </div>
         {groups.map((group) => (
           <div className="usage-group" key={group.key} role="rowgroup">
@@ -971,28 +1028,25 @@ function UsagePanel({
             </div>
             {group.rows.map((row) => {
               const risk = usageRiskLevel(row);
+              const { account, plan } = usageNameParts(row);
               return (
                 <section className={`usage-row usage-${risk}`} key={row.name}>
                   <div className="usage-account">
-                    <strong>{row.name}</strong>
+                    <strong>{account}</strong>
+                    <div>
+                      {usageActive(row) ? (
+                        <span className="pill pill-info">{t.usage.inUse}</span>
+                      ) : null}
+                      {plan ? <span className="mono-chip">{plan}</span> : null}
+                      {usageLimited(row) || risk !== 'ok' ? (
                         <span className={`pill pill-${risk}`}>
                           {t.usage.risk[risk]}
                         </span>
+                      ) : null}
                     </div>
-                  <UsageMeter
+                  </div>
-                    label={t.usage.window5h}
+                  <UsageRemainingMeter row={row} rowName={account} t={t} />
-                    pct={row.h5pct}
+                  <UsageSpeed row={row} t={t} />
-                    reset={row.h5reset}
-                    rowName={row.name}
-                    t={t}
-                  />
-                  <UsageMeter
-                    label={t.usage.window7d}
-                    pct={row.d7pct}
-                    reset={row.d7reset}
-                    rowName={row.name}
-                    t={t}
-                  />
                 </section>
               );
             })}
@@ -1192,7 +1246,6 @@ function App() {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
-  const [lastRefreshed, setLastRefreshed] = useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [activeView, setActiveView] = useState<DashboardView>(readViewFromHash);
   const [locale, setLocale] = useState<Locale>(readInitialLocale);
@@ -1215,7 +1268,6 @@ function App() {
     try {
       const nextData = await fetchDashboardData();
       setData(nextData);
-      setLastRefreshed(new Date().toISOString());
       setError(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -1266,7 +1318,6 @@ function App() {
     <div className="shell">
       <SideRail
         activeView={activeView}
-        lastRefreshed={lastRefreshed}
         locale={locale}
         onNavigate={navigateToView}
         onLocaleChange={setDashboardLocale}
@@ -1278,7 +1329,6 @@ function App() {
         <SectionNav
           activeView={activeView}
           drawerOpen={drawerOpen}
-          lastRefreshed={lastRefreshed}
           locale={locale}
           onCloseDrawer={() => setDrawerOpen(false)}
           onLocaleChange={setDashboardLocale}
@@ -1309,7 +1359,7 @@ function App() {
                     <h2>{t.panels.usage}</h2>
                     <span>{t.panels.usageWindow}</span>
                   </div>
-                  <UsagePanel locale={locale} overview={data.overview} t={t} />
+                  <UsagePanel overview={data.overview} t={t} />
                 </section>
                 <ControlRail data={data} t={t} />
               </>

apps/dashboard/src/api.ts

@@ -37,6 +37,7 @@ export interface DashboardOverview {
   };
   inbox: Array<{
     id: string;
+    groupKey: string;
     kind:
       | 'pending-room'
       | 'reviewer-request'
@@ -48,7 +49,9 @@ export interface DashboardOverview {
     title: string;
     summary: string;
     occurredAt: string;
+    lastOccurredAt: string;
     createdAt: string;
+    occurrences: number;
     source: 'status-snapshot' | 'paired-task' | 'scheduled-task';
     roomJid?: string;
     roomName?: string;

apps/dashboard/src/i18n.ts

@@ -114,17 +114,19 @@ export interface Messages {
     status: string;
     queue: string;
     elapsed: string;
+    details: string;
   };
   usage: {
     empty: string;
-    highest: string;
+    current: string;
+    tightest: string;
     watch: string;
-    updated: string;
+    remaining: string;
-    peak: string;
+    speed: string;
+    inUse: string;
     reset: string;
+    noReset: string;
     usage: string;
-    window5h: string;
-    window7d: string;
     groupPrimary: string;
     groupCodex: string;
     risk: {
@@ -132,6 +134,11 @@ export interface Messages {
       warn: string;
       critical: string;
     };
+    speedLabel: {
+      ok: string;
+      warn: string;
+      critical: string;
+    };
   };
   tasks: {
     empty: string;
@@ -244,7 +251,7 @@ export const messages = {
       inbox: '인입',
       inboxQueue: '대기 항목',
       usage: '사용량',
-      usageWindow: '5시간 / 7일',
+      usageWindow: '남음 / 속도',
       rooms: '룸',
       queue: '큐',
       scheduled: '예약',
@@ -308,17 +315,19 @@ export const messages = {
       status: '상태',
       queue: '큐',
       elapsed: '경과',
+      details: '세부',
     },
     usage: {
       empty: '사용량 스냅샷 없음. 수집기 확인.',
-      highest: '최고',
+      current: '사용중',
+      tightest: '가장 적음',
       watch: '주의',
-      updated: '갱신',
+      remaining: '남음',
-      peak: '피크',
+      speed: '속도',
+      inUse: '사용중',
       reset: '리셋',
+      noReset: '리셋 없음',
       usage: '사용량',
-      window5h: '5시간',
-      window7d: '7일',
       groupPrimary: 'Claude / Kimi',
       groupCodex: 'Codex',
       risk: {
@@ -326,6 +335,11 @@ export const messages = {
         warn: '주의',
         critical: '위험',
       },
+      speedLabel: {
+        ok: '보통',
+        warn: '빠름',
+        critical: '너무 빠름',
+      },
     },
     tasks: {
       empty: '예약 작업 없음.',
@@ -422,7 +436,7 @@ export const messages = {
       inbox: 'Inbox',
       inboxQueue: 'Work intake',
       usage: 'Usage',
-      usageWindow: '5h / 7d',
+      usageWindow: 'Remaining / speed',
       rooms: 'Rooms',
       queue: 'Queue',
       scheduled: 'Scheduled',
@@ -486,17 +500,19 @@ export const messages = {
       status: 'status',
       queue: 'queue',
       elapsed: 'elapsed',
+      details: 'details',
     },
     usage: {
       empty: 'No usage snapshot. Check collector.',
-      highest: 'Highest',
+      current: 'In use',
+      tightest: 'Lowest',
       watch: 'Watch',
-      updated: 'Updated',
+      remaining: 'Left',
-      peak: 'Peak',
+      speed: 'Speed',
+      inUse: 'in use',
       reset: 'reset',
+      noReset: 'no reset',
       usage: 'usage',
-      window5h: '5h',
-      window7d: '7d',
       groupPrimary: 'Claude / Kimi',
       groupCodex: 'Codex',
       risk: {
@@ -504,6 +520,11 @@ export const messages = {
         warn: 'Watch',
         critical: 'Limit risk',
       },
+      speedLabel: {
+        ok: 'Normal',
+        warn: 'Fast',
+        critical: 'Too fast',
+      },
     },
     tasks: {
       empty: 'No scheduled work.',
@@ -600,7 +621,7 @@ export const messages = {
       inbox: '收件',
       inboxQueue: '待处理',
       usage: '用量',
-      usageWindow: '5小时 / 7天',
+      usageWindow: '剩余 / 速度',
       rooms: '房间',
       queue: '队列',
       scheduled: '计划',
@@ -617,7 +638,7 @@ export const messages = {
       system: '系统',
       signals: '健康信号',
       services: '服务',
-      fresh: '心跳正常',
+      fresh: '正常',
       stale: '延迟',
       queue: '队列',
       ciFailures: 'CI 失败',
@@ -664,17 +685,19 @@ export const messages = {
       status: '状态',
       queue: '队列',
       elapsed: '耗时',
+      details: '详情',
     },
     usage: {
       empty: '暂无用量快照。检查采集器。',
-      highest: '最高',
+      current: '使用中',
+      tightest: '剩余最少',
       watch: '关注',
-      updated: '更新',
+      remaining: '剩余',
-      peak: '峰值',
+      speed: '速度',
+      inUse: '使用中',
       reset: '重置',
+      noReset: '无重置',
       usage: '用量',
-      window5h: '5小时',
-      window7d: '7天',
       groupPrimary: 'Claude / Kimi',
       groupCodex: 'Codex',
       risk: {
@@ -682,6 +705,11 @@ export const messages = {
         warn: '关注',
         critical: '接近上限',
       },
+      speedLabel: {
+        ok: '正常',
+        warn: '较快',
+        critical: '过快',
+      },
     },
     tasks: {
       empty: '暂无计划任务。',
@@ -778,7 +806,7 @@ export const messages = {
       inbox: '受信',
       inboxQueue: '対応待ち',
       usage: '使用量',
-      usageWindow: '5時間 / 7日',
+      usageWindow: '残量 / 速度',
       rooms: 'ルーム',
       queue: 'キュー',
       scheduled: '予定',
@@ -842,17 +870,19 @@ export const messages = {
       status: '状態',
       queue: 'キュー',
       elapsed: '経過',
+      details: '詳細',
     },
     usage: {
       empty: '使用量スナップショットなし。収集器を確認。',
-      highest: '最高',
+      current: '使用中',
+      tightest: '残量最少',
       watch: '注意',
-      updated: '更新',
+      remaining: '残量',
-      peak: 'ピーク',
+      speed: '速度',
+      inUse: '使用中',
       reset: 'リセット',
+      noReset: 'リセットなし',
       usage: '使用量',
-      window5h: '5時間',
-      window7d: '7日',
       groupPrimary: 'Claude / Kimi',
       groupCodex: 'Codex',
       risk: {
@@ -860,6 +890,11 @@ export const messages = {
         warn: '注意',
         critical: '上限注意',
       },
+      speedLabel: {
+        ok: '通常',
+        warn: '速い',
+        critical: '速すぎ',
+      },
     },
     tasks: {
       empty: '予定作業なし。',

apps/dashboard/src/styles.css

@@ -206,17 +206,6 @@ button:disabled {
   white-space: nowrap;
 }
 
-.section-nav span {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 750;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .side-rail {
   position: sticky;
   top: 18px;
@@ -383,19 +372,6 @@ button:disabled {
   content: '↘';
 }
 
-.drawer-meta {
-  display: grid;
-  gap: 4px;
-  padding: 14px;
-  border-radius: 18px;
-  color: var(--muted);
-  background: rgba(43, 55, 38, 0.06);
-}
-
-.drawer-meta strong {
-  color: var(--bg-ink);
-}
-
 .error-card,
 .card,
 .panel {
@@ -627,7 +603,7 @@ td small {
 
 .usage-summary {
   display: grid;
-  grid-template-columns: 1.1fr 0.46fr 0.9fr;
+  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.28fr);
   gap: 8px;
 }
 
@@ -646,7 +622,7 @@ td small {
 }
 
 .usage-summary span,
-.usage-window small {
+.usage-remaining small {
   color: var(--muted);
 }
 
@@ -666,7 +642,10 @@ td small {
 .usage-matrix-head,
 .usage-row {
   display: grid;
-  grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: minmax(132px, 0.78fr) minmax(0, 1fr) minmax(
+      96px,
+      0.46fr
+    );
   gap: 8px;
   align-items: center;
 }
@@ -714,7 +693,7 @@ td small {
 }
 
 .usage-account,
-.usage-window div {
+.usage-remaining div {
   display: flex;
   min-width: 0;
   gap: 8px;
@@ -723,7 +702,16 @@ td small {
 }
 
 .usage-account {
-  justify-content: flex-start;
+  display: grid;
+  gap: 5px;
+  justify-content: stretch;
+}
+
+.usage-account div {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .usage-account strong {
@@ -735,7 +723,8 @@ td small {
   white-space: nowrap;
 }
 
-.usage-window span {
+.usage-remaining span,
+.usage-speed span {
   color: var(--muted);
   font-size: 11px;
   font-weight: 850;
@@ -743,12 +732,38 @@ td small {
   text-transform: uppercase;
 }
 
-.usage-window {
+.usage-remaining,
+.usage-speed {
   display: grid;
   min-width: 0;
   gap: 5px;
 }
 
+.usage-speed {
+  min-height: 54px;
+  align-content: center;
+  padding: 8px;
+  border-radius: 14px;
+  background: rgba(43, 55, 38, 0.045);
+}
+
+.usage-speed strong {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.usage-speed small {
+  color: var(--muted);
+}
+
+.usage-speed-warn {
+  background: rgba(181, 138, 34, 0.16);
+}
+
+.usage-speed-critical {
+  background: rgba(183, 71, 52, 0.16);
+}
+
 progress {
   width: 100%;
   height: 8px;
@@ -904,6 +919,13 @@ progress::-moz-progress-bar {
   align-items: start;
 }
 
+.inbox-card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: flex-end;
+}
+
 .inbox-card-head strong,
 .inbox-card p,
 .inbox-meta strong,
@@ -1028,6 +1050,23 @@ progress::-moz-progress-bar {
   font-style: normal;
 }
 
+.record-details {
+  margin-top: 4px;
+}
+
+.record-details summary {
+  display: inline-flex;
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 850;
+  list-style: none;
+}
+
+.record-details summary::-webkit-details-marker {
+  display: none;
+}
+
 .task-board {
   display: grid;
   gap: 12px;
@@ -1462,10 +1501,6 @@ progress::-moz-progress-bar {
     font-size: 12px;
   }
 
-  .section-nav span {
-    display: none;
-  }
-
   .section-nav .menu-button span {
     display: block;
   }
@@ -1520,11 +1555,7 @@ progress::-moz-progress-bar {
   }
 
   .usage-summary {
-    grid-template-columns: minmax(0, 1fr) minmax(78px, 0.55fr);
+    grid-template-columns: minmax(0, 1fr) minmax(78px, 0.4fr);
-  }
-
-  .usage-summary div:last-child {
-    grid-column: 1 / -1;
   }
 
   .usage-matrix-head {
@@ -1532,7 +1563,7 @@ progress::-moz-progress-bar {
   }
 
   .usage-row {
-    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(90px, 0.5fr);
     gap: 6px;
     padding: 9px;
   }
@@ -1542,15 +1573,16 @@ progress::-moz-progress-bar {
     gap: 5px;
   }
 
-  .usage-window {
+  .usage-remaining,
+  .usage-speed {
     gap: 4px;
   }
 
-  .usage-window div {
+  .usage-remaining div {
     gap: 6px;
   }
 
-  .usage-window small {
+  .usage-remaining small {
     overflow: hidden;
     font-size: 11px;
     text-overflow: ellipsis;
@@ -1650,7 +1682,6 @@ progress::-moz-progress-bar {
 
   .usage-account {
     grid-column: 1 / -1;
-    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .skeleton-grid,

src/web-dashboard-data.test.ts

@@ -291,6 +291,14 @@ describe('web dashboard data', () => {
           last_result: 'Error: BOT_TOKEN=plain-secret-value failed',
           status: 'paused',
         }),
+        makeTask({
+          id: 'ci-2',
+          prompt:
+            '[BACKGROUND CI WATCH]\nWatch target:\nPR #22\n\nCheck instructions:\nwatch',
+          last_run: '2026-04-26T05:07:00.000Z',
+          last_result: 'Error: BOT_TOKEN=plain-secret-value failed',
+          status: 'active',
+        }),
         makeTask({
           id: 'cron-1',
           prompt: 'regular cron',
@@ -329,10 +337,12 @@ describe('web dashboard data', () => {
     );
     const ciFailure = overview.inbox.find((item) => item.kind === 'ci-failure');
     expect(ciFailure).toMatchObject({
-      id: 'ci:ci-1',
+      id: 'ci:ci-2',
       severity: 'error',
+      occurrences: 2,
       source: 'scheduled-task',
-      taskId: 'ci-1',
+      taskId: 'ci-2',
+      lastOccurredAt: '2026-04-26T05:07:00.000Z',
     });
     expect(ciFailure?.summary).toContain('BOT_TOKEN=<redacted>');
     expect(ciFailure?.summary).not.toContain('plain-secret-value');

src/web-dashboard-data.ts

@@ -69,12 +69,15 @@ export type InboxItemSeverity = 'info' | 'warn' | 'error';
 
 export interface InboxItem {
   id: string;
+  groupKey: string;
   kind: InboxItemKind;
   severity: InboxItemSeverity;
   title: string;
   summary: string;
   occurredAt: string;
+  lastOccurredAt: string;
   createdAt: string;
+  occurrences: number;
   source: 'status-snapshot' | 'paired-task' | 'scheduled-task';
   roomJid?: string;
   roomName?: string;
@@ -108,6 +111,14 @@ function buildInboxPreview(value: string): string {
   return truncateText(redactSensitiveText(value).replace(/\s+/g, ' ').trim());
 }
 
+function stableHash(value: string): string {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) | 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
 function collectUsageRows(snapshots: StatusSnapshot[]): UsageRowSnapshot[] {
   const rows: UsageRowSnapshot[] = [];
   const seen = new Set<string>();
@@ -174,12 +185,15 @@ function collectInboxItems(args: {
 
       items.push({
         id: `room:${snapshot.serviceId}:${entry.jid}`,
+        groupKey: `room:${snapshot.serviceId}:${entry.jid}`,
         kind: 'pending-room',
         severity: entry.pendingTasks > 0 ? 'warn' : 'info',
         title: entry.name || entry.folder || entry.jid,
         summary: parts.join(' · '),
         occurredAt: snapshot.updatedAt,
+        lastOccurredAt: snapshot.updatedAt,
         createdAt: args.createdAt,
+        occurrences: 1,
         source: 'status-snapshot',
         roomJid: entry.jid,
         roomName: entry.name,
@@ -195,9 +209,9 @@ function collectInboxItems(args: {
 
     items.push({
       id: `paired:${task.id}:${task.status}`,
+      groupKey: `paired:${task.id}:${task.status}`,
       kind,
-      severity:
+      severity: kind === 'arbiter-request' ? 'error' : 'warn',
-        kind === 'approval' || kind === 'arbiter-request' ? 'error' : 'warn',
       title: task.title || task.group_folder,
       summary: task.status,
       occurredAt:
@@ -206,7 +220,14 @@ function collectInboxItems(args: {
           : kind === 'reviewer-request'
             ? (task.review_requested_at ?? task.updated_at)
             : task.updated_at,
+      lastOccurredAt:
+        kind === 'arbiter-request'
+          ? (task.arbiter_requested_at ?? task.updated_at)
+          : kind === 'reviewer-request'
+            ? (task.review_requested_at ?? task.updated_at)
+            : task.updated_at,
       createdAt: args.createdAt,
+      occurrences: 1,
       source: 'paired-task',
       roomJid: task.chat_jid,
       groupFolder: task.group_folder,
@@ -226,12 +247,15 @@ function collectInboxItems(args: {
 
     items.push({
       id: `ci:${task.id}`,
+      groupKey: `ci:${stableHash(result.toLowerCase())}`,
       kind: 'ci-failure',
       severity: task.status === 'paused' ? 'error' : 'warn',
       title: 'CI watcher failed',
       summary: result,
       occurredAt: task.last_run ?? task.created_at,
+      lastOccurredAt: task.last_run ?? task.created_at,
       createdAt: args.createdAt,
+      occurrences: 1,
       source: 'scheduled-task',
       roomJid: task.chat_jid,
       groupFolder: task.group_folder,
@@ -247,11 +271,40 @@ function collectInboxItems(args: {
     info: 2,
   };
 
-  return items
+  const groupedItems = new Map<string, InboxItem>();
+  for (const item of items) {
+    const existing = groupedItems.get(item.groupKey);
+    if (!existing) {
+      groupedItems.set(item.groupKey, item);
+      continue;
+    }
+
+    const occurrences = existing.occurrences + item.occurrences;
+    const severity =
+      severityRank[item.severity] < severityRank[existing.severity]
+        ? item.severity
+        : existing.severity;
+    const latest =
+      item.lastOccurredAt.localeCompare(existing.lastOccurredAt) > 0
+        ? item
+        : existing;
+
+    groupedItems.set(item.groupKey, {
+      ...latest,
+      severity,
+      occurrences,
+      lastOccurredAt:
+        item.lastOccurredAt.localeCompare(existing.lastOccurredAt) > 0
+          ? item.lastOccurredAt
+          : existing.lastOccurredAt,
+    });
+  }
+
+  return [...groupedItems.values()]
     .sort((a, b) => {
       const severityDelta = severityRank[a.severity] - severityRank[b.severity];
       if (severityDelta !== 0) return severityDelta;
-      return b.occurredAt.localeCompare(a.occurredAt);
+      return b.lastOccurredAt.localeCompare(a.lastOccurredAt);
     })
     .slice(0, 50);
 }