@flame0510/project-aether 1.1.9

package/lib/hooks/useDashboard.ts

@@ -0,0 +1,264 @@
+'use client';
+// Composes EventBus, FilterStrategy, and local state into one dashboard hook
+
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+import type { Session, SessionEvent, Costs, FilterConfig, Period, AgentFilter } from '../types';
+import { Rev4aEventBus } from '../patterns/EventBus';
+import { buildFilterStrategy } from '../patterns/FilterStrategy';
+import { isCronSession, extractAgentId } from '../patterns/SessionFactory';
+import { isSessionActive } from '../patterns/sessionPresentation';
+import { PERIOD_MS as PERIOD_MAP, PERIODS } from '../types';
+import { adaptCosts } from '../patterns/ApiAdapter';
+import { apiFetch } from '../apiFetch';
+
+function filterFromParams(params: URLSearchParams): Partial<FilterConfig> {
+  const patch: Partial<FilterConfig> = {};
+  const agent = params.get('agent');
+  if (agent) patch.agent = agent as AgentFilter;
+  const period = params.get('period');
+  if (period && (PERIODS as readonly string[]).includes(period)) patch.period = period as Period;
+  const active = params.get('active');
+  if (active !== null) patch.showOnlyActive = active === '1';
+  const cron = params.get('cron');
+  if (cron !== null) patch.showCron = cron !== '0';
+  return patch;
+}
+
+function filterToParams(filter: FilterConfig): URLSearchParams {
+  const p = new URLSearchParams();
+  if (filter.agent !== 'all') p.set('agent', filter.agent);
+  if (filter.period !== '7d') p.set('period', filter.period);
+  if (filter.showOnlyActive) p.set('active', '1');
+  if (!filter.showCron) p.set('cron', '0');
+  return p;
+}
+
+function expandSessionsWithVisibleParents(allSessions: Session[], visibleLeafSessions: Session[]): Session[] {
+  if (!visibleLeafSessions.length) return [];
+
+  const byId = new Map(allSessions.map((session) => [session.session_id, session]));
+  const included = new Map<string, Session>();
+
+  for (const session of visibleLeafSessions) {
+    let currentSession: Session | undefined = session;
+    const seenInChain = new Set<string>();
+
+    while (currentSession?.session_id && !seenInChain.has(currentSession.session_id)) {
+      seenInChain.add(currentSession.session_id);
+      included.set(currentSession.session_id, currentSession);
+      const parentId: string | null = currentSession.parent_id ?? null;
+      currentSession = parentId ? byId.get(parentId) : undefined;
+    }
+  }
+
+  return allSessions.filter((session) => included.has(session.session_id));
+}
+
+// ── State ──────────────────────────────────────────────────────────────────
+
+interface DashboardState {
+  sessions: Session[];
+  events: SessionEvent[];
+  costs: Costs;
+  filter: FilterConfig;
+  selectedSessionId: string | null;
+  hasSessionsLoaded: boolean;
+  hasCostLoaded: boolean;
+}
+
+type Action =
+  | { type: 'SET_SESSIONS'; sessions: Session[] }
+  | { type: 'SET_EVENTS'; events: SessionEvent[] }
+  | { type: 'PREPEND_EVENTS'; events: SessionEvent[] }
+  | { type: 'SET_COSTS'; costs: Partial<Costs> }
+  | { type: 'UPDATE_COST_TODAY'; today: number }
+  | { type: 'SET_FILTER'; patch: Partial<FilterConfig> }
+  | { type: 'SELECT_SESSION'; id: string | null };
+
+function reducer(state: DashboardState, action: Action): DashboardState {
+  switch (action.type) {
+    case 'SET_SESSIONS':
+      return { ...state, sessions: action.sessions, hasSessionsLoaded: true };
+    case 'SET_EVENTS':
+      return {
+        ...state,
+        events: action.events.slice(0, 50),
+      };
+    case 'PREPEND_EVENTS':
+      return {
+        ...state,
+        events: [...action.events, ...state.events]
+          .filter((event, index, all) => index === all.findIndex((candidate) => candidate.id === event.id && candidate.ts === event.ts && candidate.session_id === event.session_id && candidate.type === event.type))
+          .slice(0, 50),
+      };
+    case 'SET_COSTS':
+      return { ...state, costs: { ...state.costs, ...action.costs }, hasCostLoaded: true };
+    case 'UPDATE_COST_TODAY':
+      return { ...state, costs: { ...state.costs, today: action.today }, hasCostLoaded: true };
+    case 'SET_FILTER':
+      return { ...state, filter: { ...state.filter, ...action.patch } };
+    case 'SELECT_SESSION':
+      return { ...state, selectedSessionId: action.id };
+    default:
+      return state;
+  }
+}
+
+// ── Hook ──────────────────────────────────────────────────────────────────
+
+interface UseDashboardOptions {
+  initialCosts?: Partial<Costs>;
+}
+
+export function useDashboard({ initialCosts }: UseDashboardOptions = {}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const initialFilter: FilterConfig = {
+    agent: 'all',
+    showOnlyActive: false,
+    showCron: true,
+    period: '7d',
+    ...filterFromParams(searchParams),
+  };
+
+  const [state, dispatch] = useReducer(reducer, {
+    sessions: [],
+    events: [],
+    costs: { today: 0, allTime: 0, byModel: [], ...initialCosts },
+    filter: initialFilter,
+    selectedSessionId: null,
+    hasSessionsLoaded: false,
+    hasCostLoaded: false,
+  });
+
+  const hasSessionsLoadedRef = useRef(false);
+  const hasCostLoadedRef = useRef(false);
+
+  useEffect(() => {
+    hasSessionsLoadedRef.current = state.hasSessionsLoaded;
+  }, [state.hasSessionsLoaded]);
+
+  useEffect(() => {
+    hasCostLoadedRef.current = state.hasCostLoaded;
+  }, [state.hasCostLoaded]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const unsubscribe = Rev4aEventBus.subscribe({
+      onSessions: (sessions) => dispatch({ type: 'SET_SESSIONS', sessions }),
+      onEvents: (events) => dispatch({ type: 'PREPEND_EVENTS', events }),
+      onCostUpdate: (today) => dispatch({ type: 'UPDATE_COST_TODAY', today }),
+    });
+
+    apiFetch('/api/sessions', { signal: controller.signal })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((sessions: Session[]) => {
+        if (!hasSessionsLoadedRef.current && Array.isArray(sessions)) {
+          dispatch({ type: 'SET_SESSIONS', sessions });
+        }
+      })
+      .catch(() => {});
+
+    apiFetch('/api/events?limit=20', { signal: controller.signal })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((events: SessionEvent[]) => {
+        if (Array.isArray(events)) dispatch({ type: 'SET_EVENTS', events });
+      })
+      .catch(() => {});
+
+    apiFetch('/api/costs', { signal: controller.signal })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((rawCosts: Partial<Costs>) => {
+        const costs = adaptCosts(rawCosts as Record<string, unknown>);
+        if (!hasCostLoadedRef.current || costs.allTime || costs.byModel.length) {
+          dispatch({ type: 'SET_COSTS', costs });
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      controller.abort();
+      unsubscribe();
+    };
+  }, []);
+
+  const [availableAgents, setAvailableAgents] = useState<string[]>(['all']);
+  useEffect(() => {
+    const load = () =>
+      apiFetch('/api/agents')
+        .then((r) => r.json())
+        .then((agents: Array<{ agentId: string; displayName?: string; name: string }>) => {
+          if (Array.isArray(agents)) {
+            const names = agents.map((a) => a.displayName || a.name || a.agentId).filter(Boolean);
+            setAvailableAgents(['all', ...names]);
+          }
+        })
+        .catch(() => {});
+    load();
+    const t = setInterval(load, 30_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const visibleLeafSessions = useMemo(() => {
+    const strategy = buildFilterStrategy(state.filter);
+    return strategy.filter(state.sessions);
+  }, [state.sessions, state.filter]);
+
+  const visibleSessions = useMemo(() => {
+    const expanded = expandSessionsWithVisibleParents(state.sessions, visibleLeafSessions);
+    return expanded.length ? expanded : visibleLeafSessions;
+  }, [state.sessions, visibleLeafSessions]);
+
+  const visibleEvents = useMemo(() => {
+    const { agent, showCron, period, showOnlyActive } = state.filter;
+    const cutoff =
+      period !== 'all'
+        ? Date.now() - PERIOD_MAP[period as Exclude<Period, 'all'>]
+        : 0;
+    const visibleSessionIds = new Set(visibleLeafSessions.map((session) => session.session_id));
+    const activeSessionIds = showOnlyActive
+      ? new Set(state.sessions.filter(isSessionActive).map((session) => session.session_id))
+      : null;
+
+    return state.events
+      .filter((e) => {
+        const sessionId = e.session_id ?? '';
+        if (agent !== 'all' && extractAgentId(sessionId) !== agent) return false;
+        if (!showCron && isCronSession(sessionId)) return false;
+        if (cutoff && Number(e.ts ?? 0) * 1000 < cutoff) return false;
+        if (showOnlyActive) return activeSessionIds?.has(sessionId) ?? false;
+        return visibleSessionIds.size === 0 || visibleSessionIds.has(sessionId);
+      })
+      .slice(0, 20);
+  }, [state.events, state.filter, state.sessions, visibleLeafSessions]);
+
+  const setFilter = useCallback((patch: Partial<FilterConfig>) => {
+    dispatch({ type: 'SET_FILTER', patch });
+    const next: FilterConfig = { ...state.filter, ...patch };
+    const qs = filterToParams(next).toString();
+    router.replace(`${pathname}${qs ? `?${qs}` : ''}`, { scroll: false });
+  }, [state.filter, router, pathname]);
+
+  const selectSession = useCallback((id: string | null) => {
+    dispatch({ type: 'SELECT_SESSION', id });
+  }, []);
+
+  return {
+    sessions: state.sessions,
+    events: state.events,
+    costs: state.costs,
+    filter: state.filter,
+    selectedSessionId: state.selectedSessionId,
+    availableAgents,
+    visibleSessions,
+    visibleEvents,
+    setFilter,
+    selectSession,
+    hasSessionsLoaded: state.hasSessionsLoaded,
+    hasCostLoaded: state.hasCostLoaded,
+  };
+}

package/lib/hooks/useRev4aTimezone.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  DEFAULT_REV4A_TIMEZONE,
+  fetchRev4aTimezone,
+  normalizeRev4aTimezone,
+  setCachedRev4aTimezone,
+} from '@/lib/timezone';
+
+export function useRev4aTimezone(initialTimezone = DEFAULT_REV4A_TIMEZONE): string {
+  const [timezone, setTimezone] = useState(normalizeRev4aTimezone(initialTimezone));
+
+  useEffect(() => {
+    setCachedRev4aTimezone(initialTimezone);
+    let active = true;
+
+    void fetchRev4aTimezone().then((resolvedTimezone) => {
+      if (active) setTimezone(resolvedTimezone);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [initialTimezone]);
+
+  return timezone;
+}

package/lib/hooks/useScreenshot.ts

@@ -0,0 +1,30 @@
+'use client';
+import { useState, useCallback } from 'react';
+
+export function useScreenshot() {
+  const [loading, setLoading] = useState(false);
+
+  const takeScreenshot = useCallback(async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const { toPng } = await import('html-to-image');
+      const dataUrl = await toPng(document.body, {
+        backgroundColor: '#0A0A0B',
+        quality: 1,
+        pixelRatio: window.devicePixelRatio || 1,
+      });
+      const a = document.createElement('a');
+      a.download = 'rev4a-' + new Date().toISOString().slice(0, 16).replace(/[T:]/g, '-') + '.png';
+      a.href = dataUrl;
+      a.click();
+    } catch (e) {
+      console.error('screenshot failed', e);
+      alert('Screenshot failed: ' + (e instanceof Error ? e.message : String(e)));
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+
+  return { loading, takeScreenshot };
+}