inspect-ai 0.3.108__py3-none-any.whl → 0.3.110__py3-none-any.whl

inspect_ai/_view/www/src/client/remote/remoteLogFile.ts

@@ -7,10 +7,15 @@ import {
   LogViewAPI,
   SampleSummary,
 } from "../api/types";
-import { FileSizeLimitError, openRemoteZipFile } from "./remoteZipFile";
+import {
+  CentralDirectoryEntry,
+  FileSizeLimitError,
+  openRemoteZipFile,
+} from "./remoteZipFile";
 
 // don't try to load samples greater than 50mb
 const MAX_BYTES = 50 * 1024 * 1024;
+const OPEN_RETRY_LIMIT = 5;
 
 interface SampleEntry {
   sampleId: string;
@@ -47,11 +52,38 @@ export const openRemoteLogFile = async (
   concurrency: number,
 ): Promise<RemoteLogFile> => {
   const queue = new AsyncQueue(concurrency);
-  const remoteZipFile = await openRemoteZipFile(
-    url,
-    api.eval_log_size,
-    api.eval_log_bytes,
-  );
+
+  let remoteZipFile:
+    | {
+        centralDirectory: Map<string, CentralDirectoryEntry>;
+        readFile: (file: string, maxBytes?: number) => Promise<Uint8Array>;
+      }
+    | undefined = undefined;
+
+  let retryCount = 0;
+  while (!remoteZipFile && retryCount < OPEN_RETRY_LIMIT) {
+    try {
+      remoteZipFile = await openRemoteZipFile(
+        url,
+        api.eval_log_size,
+        api.eval_log_bytes,
+      );
+    } catch {
+      retryCount++;
+      console.warn(
+        `Failed to open remote log file at ${url}, retrying (${retryCount}/${OPEN_RETRY_LIMIT})...`,
+      );
+      await new Promise((resolve) =>
+        setTimeout(resolve, 100 * (retryCount + retryCount)),
+      );
+    }
+  }
+
+  if (!remoteZipFile) {
+    throw new Error(
+      `Failed to open remote log file at ${url} after ${OPEN_RETRY_LIMIT} attempts.`,
+    );
+  }
 
   /**
    * Reads and parses a JSON file from the zip.

inspect_ai/_view/www/src/components/TextInput.module.css

@@ -0,0 +1,45 @@
+.container {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+  border: solid var(--bs-border-color) 1px;
+  border-radius: var(--bs-border-radius);
+  background-color: var(--inspect-input-background);
+  align-items: center;
+}
+
+.container:focus-within {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+.input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--bs-body-color);
+}
+
+.withIcon {
+  grid-template-columns: max-content max-content max-content;
+}
+
+.icon {
+  margin-left: 0.3em;
+}
+
+.clearText {
+  opacity: 0.6;
+  margin-right: 0.3em;
+}
+
+.clearText:hover {
+  cursor: pointer;
+}
+
+.clearText.hidden:hover {
+  cursor: default !important;
+}
+.hidden {
+  opacity: 0 !important;
+}

inspect_ai/_view/www/src/components/TextInput.tsx

@@ -0,0 +1,52 @@
+import { ChangeEvent, forwardRef } from "react";
+
+import clsx from "clsx";
+import { ApplicationIcons } from "../app/appearance/icons";
+import styles from "./TextInput.module.css";
+
+export interface TextInputProps {
+  value?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  icon?: string;
+  placeholder?: string;
+  className?: string | string[];
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ value, onChange, icon, placeholder, className }, ref) => {
+    return (
+      <div
+        className={clsx(
+          styles.container,
+          className,
+          icon ? styles.withIcon : "",
+        )}
+      >
+        {icon && <i className={clsx(icon, styles.icon)} />}
+        <input
+          type="text"
+          value={value}
+          onChange={onChange}
+          ref={ref}
+          placeholder={placeholder}
+          className={clsx(styles.input)}
+        />
+        <i
+          className={clsx(
+            styles.clearText,
+            value === "" ? styles.hidden : "",
+            ApplicationIcons["clear-text"],
+          )}
+          onClick={() => {
+            if (onChange && value !== "") {
+              onChange({
+                target: { value: "" },
+              } as ChangeEvent<HTMLInputElement>);
+            }
+          }}
+          role="button"
+        />
+      </div>
+    );
+  },
+);

inspect_ai/_view/www/src/constants.ts

@@ -8,6 +8,14 @@ export const kLogViewInfoTabId = "info";
 export const kLogViewModelsTabId = "models";
 export const kLogViewTaskTabId = "task";
 
+export const kWorkspaceTabs = [
+  kLogViewSamplesTabId,
+  kLogViewJsonTabId,
+  kLogViewInfoTabId,
+  kLogViewModelsTabId,
+  kLogViewTaskTabId,
+];
+
 // Sample tab constants
 export const kSampleMessagesTabId = `messages`;
 export const kSampleTranscriptTabId = `transcript`;
@@ -17,6 +25,16 @@ export const kSampleErrorTabId = `error`;
 export const kSampleErrorRetriesTabId = `retry-errors`;
 export const kSampleJsonTabId = `json`;
 
+export const kSampleTabIds = [
+  kSampleMessagesTabId,
+  kSampleTranscriptTabId,
+  kSampleScoringTabId,
+  kSampleMetdataTabId,
+  kSampleErrorTabId,
+  kSampleErrorRetriesTabId,
+  kSampleJsonTabId,
+];
+
 // Scoring constants
 export const kScoreTypePassFail = "passfail";
 export const kScoreTypeCategorical = "categorical";

inspect_ai/_view/www/src/img/inspect-16.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.33 12.33">
+  <g id="Layer_2">
+    <path class="cls-1" d="M5.05,12.16c-.14-.11-.24-.27-.29-.48l-.26-1.12-.28-.1-.98.61c-.18.11-.36.16-.54.13s-.35-.11-.5-.25l-.82-.82c-.15-.15-.24-.31-.26-.5s.03-.36.13-.54l.62-.98-.1-.27-1.12-.27c-.2-.05-.36-.14-.48-.29s-.17-.32-.17-.52v-1.17c0-.21.06-.38.17-.52s.27-.24.48-.29l1.12-.26.11-.29-.62-.98c-.11-.17-.16-.35-.14-.53s.11-.35.25-.5l.82-.83c.15-.14.31-.22.5-.25s.36.02.54.13l.98.62.29-.11.26-1.13c.05-.2.14-.36.29-.48s.32-.17.53-.17h1.18c.21,0,.38.06.52.17s.24.27.28.48l.26,1.13.29.11.98-.62c.17-.11.35-.15.53-.13s.35.11.49.25l.83.83c.14.15.23.31.25.5s-.02.36-.13.53l-.62.98.11.29,1.12.26c.2.05.36.15.48.29s.17.32.17.52v1.17c0,.2-.06.38-.17.52s-.27.24-.48.29l-1.12.27-.11.27.62.98c.11.18.15.36.13.54s-.11.35-.25.5l-.83.82c-.14.14-.31.23-.49.25s-.36-.02-.54-.13l-.98-.61-.28.1-.26,1.12c-.05.21-.14.37-.28.48s-.32.17-.52.17h-1.18c-.21,0-.38-.06-.53-.17ZM6.69,11.63c.14,0,.22-.07.24-.2l.34-1.42c.16-.04.31-.09.46-.16s.28-.12.4-.19l1.24.77c.11.07.22.06.32-.04l.71-.71c.09-.09.1-.2.03-.32l-.77-1.24c.06-.12.12-.25.18-.4s.11-.3.16-.46l1.43-.33c.13-.03.2-.11.2-.25v-1.02c0-.13-.07-.21-.2-.25l-1.42-.33c-.04-.17-.1-.33-.16-.48s-.12-.28-.18-.39l.77-1.24c.07-.12.06-.23-.03-.32l-.71-.71c-.1-.1-.21-.11-.33-.04l-1.24.77c-.12-.06-.25-.12-.4-.18s-.3-.11-.47-.16l-.34-1.43c-.02-.13-.1-.2-.24-.2h-1.03c-.14,0-.22.07-.25.2l-.33,1.42c-.16.04-.31.1-.47.16s-.29.12-.41.19l-1.24-.76c-.11-.07-.22-.06-.32.04l-.72.71c-.09.09-.1.2-.03.32l.77,1.24c-.05.11-.1.24-.17.39s-.12.31-.16.48l-1.42.33c-.13.03-.19.11-.19.25v1.02c0,.14.06.22.19.25l1.43.33c.04.16.1.31.16.46s.12.28.18.4l-.77,1.24c-.07.12-.06.22.04.32l.71.71c.11.1.21.12.32.04l1.24-.77c.12.07.26.13.4.19s.3.11.47.16l.33,1.42c.03.13.11.2.25.2h1.03Z"/>
+  </g>
+  <g id="Layer_3">
+    <rect class="cls-1" x="5.41" y="5.36" width="1.5" height="3.75" rx=".34" ry=".34"/>
+    <circle class="cls-1" cx="6.12" cy="4" r=".92"/>
+  </g>
+</svg>

inspect_ai/_view/www/src/img/inspect-back.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.77 9.73">
+  <rect class="cls-1" x="-.82" y="1.97" width="7.07" height="1.5" rx=".75" ry=".75" transform="translate(-1.13 2.72) rotate(-45)"/>
+  <rect class="cls-1" x="2.14" y="3.08" width="1.5" height="7.54" rx=".75" ry=".75" transform="translate(-4 4.05) rotate(-45)"/>
+</svg>

inspect_ai/_view/www/src/img/inspect-file.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: currentColor;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: currentColor;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1">
+    <path class="cls-2" d="M5.26,11.55c-.1-.07-.16-.18-.19-.32l-.17-.74-.19-.07-.65.4c-.12.07-.24.1-.36.09s-.23-.07-.33-.17l-.54-.54c-.1-.1-.16-.21-.17-.33s.02-.24.09-.36l.41-.65-.07-.18-.74-.18c-.13-.03-.24-.09-.32-.19s-.11-.21-.11-.35v-.77c0-.14.04-.25.11-.35s.18-.16.32-.19l.74-.17.07-.19-.41-.65c-.07-.11-.11-.23-.09-.35s.07-.23.17-.33l.54-.55c.1-.09.21-.15.33-.16s.24.01.35.09l.65.41.19-.07.17-.75c.03-.13.09-.24.19-.32s.21-.11.35-.11h.78c.14,0,.25.04.35.11s.16.18.19.32l.17.75.19.07.65-.41c.11-.07.23-.1.35-.09s.23.07.33.16l.55.55c.1.1.15.21.17.33s-.01.24-.09.35l-.41.65.07.19.74.17c.13.03.24.1.32.19s.11.21.11.35v.77c0,.13-.04.25-.11.35s-.18.16-.32.19l-.74.18-.07.18.41.65c.07.12.1.24.09.36s-.07.23-.17.33l-.55.54c-.1.1-.2.15-.33.17s-.24-.01-.36-.09l-.65-.4-.19.07-.17.74c-.03.14-.09.24-.19.32s-.21.11-.35.11h-.78c-.14,0-.25-.04-.35-.11ZM6.34,11.2c.09,0,.14-.04.16-.13l.23-.94c.11-.03.21-.06.31-.1s.19-.08.26-.13l.82.51c.07.05.14.04.21-.03l.47-.47c.06-.06.07-.13.02-.21l-.51-.82c.04-.08.08-.17.12-.27s.07-.2.1-.3l.95-.22c.09-.02.13-.07.13-.16v-.67c0-.09-.04-.14-.13-.16l-.94-.22c-.03-.11-.06-.22-.11-.32s-.08-.18-.12-.26l.51-.82c.05-.08.04-.15-.02-.21l-.47-.47c-.07-.06-.14-.07-.22-.03l-.82.51c-.08-.04-.16-.08-.26-.12s-.2-.08-.31-.11l-.23-.95c-.02-.09-.07-.13-.16-.13h-.68c-.09,0-.14.04-.16.13l-.22.94c-.1.03-.21.06-.31.1s-.19.08-.27.12l-.82-.5c-.07-.05-.15-.04-.21.03l-.48.47c-.06.06-.07.13-.02.21l.51.82c-.03.07-.07.16-.11.26s-.08.2-.11.32l-.94.22c-.09.02-.13.07-.13.16v.67c0,.09.04.14.13.16l.95.22c.03.11.06.21.1.3s.08.19.12.27l-.51.82c-.05.08-.04.15.02.21l.47.47c.07.07.14.08.21.03l.82-.51c.08.04.17.09.27.13s.2.07.31.1l.22.94c.02.09.07.13.16.13h.68Z"/>
+  </g>
+  <g id="Layer_3">
+    <rect class="cls-2" x="5.46" y="7.01" width="1.07" height="2.68" rx=".34" ry=".34"/>
+    <circle class="cls-2" cx="6" cy="6.04" r=".65"/>
+  </g>
+  <g id="Layer_2">
+    <rect class="cls-1" x=".5" y=".5" width="11" height="14" rx="1" ry="1"/>
+  </g>
+</svg>

inspect_ai/_view/www/src/img/inspect-forward.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.77 9.73">
+  <g transform="scale(-1, 1) translate(-5.77, 0)">
+    <rect class="cls-1" x="-.82" y="1.97" width="7.07" height="1.5" rx=".75" ry=".75" transform="translate(-1.13 2.72) rotate(-45)"/>
+    <rect class="cls-1" x="2.14" y="3.08" width="1.5" height="7.54" rx=".75" ry=".75" transform="translate(-4 4.05) rotate(-45)"/>
+  </g>
+</svg>

inspect_ai/_view/www/src/img/inspect-home.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.2">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="12.78" y="5.56" width="1.5" height="8.48" rx=".75" ry=".75"/>
+  <rect class="cls-1" x="1.78" y="5.08" width="1.5" height="8.95" rx=".75" ry=".75"/>
+  <rect class="cls-1" x="7.29" y="7.33" width="1.5" height="12.24" rx=".75" ry=".75" transform="translate(21.49 5.42) rotate(90)"/>
+  <rect class="cls-1" x="3.53" y="-1.55" width="1.5" height="11" rx=".75" ry=".75" transform="translate(4.35 -1.87) rotate(47.95)"/>
+  <rect class="cls-1" x="10.59" y="-1.57" width="1.5" height="11" rx=".75" ry=".75" transform="translate(21.85 -1.86) rotate(132.05)"/>
+  <rect class="cls-1" x="8.78" y="7.74" width="1" height="5.47"/>
+  <rect class="cls-1" x="6.28" y="7.72" width="1" height="5.49"/>
+  <rect class="cls-1" x="6.29" y="7.72" width="3.46" height="1"/>
+</svg>

inspect_ai/_view/www/src/scoring/metrics.ts

@@ -0,0 +1,75 @@
+import { EvalResults, Scores } from "../@types/log";
+import { MetricSummary, ScoreSummary } from "./types";
+
+export const metricDisplayName = (metric: MetricSummary): string => {
+  let modifier = undefined;
+  for (const metricModifier of metricModifiers) {
+    modifier = metricModifier(metric);
+    if (modifier) {
+      break;
+    }
+  }
+  const metricName = !modifier ? metric.name : `${metric.name}[${modifier}]`;
+
+  return metricName;
+};
+
+export const firstMetric = (results: EvalResults) => {
+  const scores = results.scores || [];
+  const firstScore = scores.length > 0 ? results.scores?.[0] : undefined;
+  if (firstScore === undefined || firstScore.metrics === undefined) {
+    return undefined;
+  }
+
+  const metrics = firstScore.metrics;
+  if (Object.keys(metrics).length === 0) {
+    return undefined;
+  }
+
+  const metric = metrics[Object.keys(metrics)[0]];
+  if (metric === undefined) {
+    return undefined;
+  }
+  return metric;
+};
+
+type MetricModifier = (metric: MetricSummary) => string | undefined;
+
+const clusterMetricModifier: MetricModifier = (
+  metric: MetricSummary,
+): string | undefined => {
+  if (metric.name !== "stderr") {
+    return undefined;
+  }
+
+  const clusterValue = ((metric.params || {}) as Record<string, unknown>)[
+    "cluster"
+  ];
+  if (clusterValue === undefined || typeof clusterValue !== "string") {
+    return undefined;
+  }
+  return clusterValue;
+};
+
+const metricModifiers: MetricModifier[] = [clusterMetricModifier];
+
+export const toDisplayScorers = (scores?: Scores): ScoreSummary[] => {
+  if (!scores) {
+    return [];
+  }
+
+  return scores.map((score) => {
+    return {
+      scorer: score.name,
+      reducer: score.reducer === null ? undefined : score.reducer,
+      metrics: Object.keys(score.metrics).map((key) => {
+        const metric = score.metrics[key];
+        return {
+          name: metric.name,
+          value: metric.value,
+          params: metric.params,
+        };
+      }),
+    };
+  });
+};

inspect_ai/_view/www/src/scoring/scores.ts

@@ -0,0 +1,19 @@
+import { MetricSummary, ScoreSummary } from "./types";
+
+export const groupScorers = (scorers: ScoreSummary[]): ScoreSummary[][] => {
+  const results: Record<string, ScoreSummary[]> = {};
+  scorers.forEach((scorer) => {
+    if (scorer.metrics.length > 0) {
+      const key = metricsKey(scorer.metrics);
+      results[key] = results[key] || [];
+
+      results[key].push(scorer);
+    }
+  });
+  return Object.values(results);
+};
+
+const metricsKey = (metrics: MetricSummary[]): string => {
+  const metricKey = metrics.map((m) => m.name).join("");
+  return metricKey;
+};

inspect_ai/_view/www/src/scoring/types.ts

@@ -0,0 +1,11 @@
+export interface MetricSummary {
+  name: string;
+  params?: {};
+  value: number;
+}
+
+export interface ScoreSummary {
+  scorer: string;
+  reducer?: string;
+  metrics: MetricSummary[];
+}

inspect_ai/_view/www/src/state/appSlice.ts

@@ -10,7 +10,6 @@ export interface AppSlice {
   capabilities: Capabilities;
   appActions: {
     setStatus: (status: AppStatus) => void;
-    setOffcanvas: (show: boolean) => void;
     setShowFind: (show: boolean) => void;
     hideFind: () => void;
 
@@ -46,7 +45,15 @@ export interface AppSlice {
     setPropertyValue: <T>(bagName: string, key: string, value: T) => void;
     removePropertyValue: (bagName: string, key: string) => void;
 
+    setPagination: (
+      name: string,
+      pagination: { page: number; pageSize: number },
+    ) => void;
+    clearPagination: (name: string) => void;
+
     setUrlHash: (urlHash: string) => void;
+
+    setSingleFileMode: (singleFile: boolean) => void;
   };
 }
 
@@ -55,7 +62,6 @@ const kDefaultSampleTab = kSampleTranscriptTabId;
 
 const initialState: AppState = {
   status: { loading: false },
-  offcanvas: false,
   showFind: false,
   dialogs: {
     sample: false,
@@ -69,6 +75,7 @@ const initialState: AppState = {
   collapsed: {},
   messages: {},
   propertyBags: {},
+  pagination: {},
 };
 
 export const createAppSlice = (
@@ -100,11 +107,6 @@ export const createAppSlice = (
           state.app.status = status;
         }),
 
-      setOffcanvas: (show: boolean) =>
-        set((state) => {
-          state.app.offcanvas = show;
-        }),
-
       setShowFind: (show: boolean) =>
         set((state) => {
           state.app.showFind = show;
@@ -262,6 +264,24 @@ export const createAppSlice = (
           state.app.urlHash = urlHash;
         });
       },
+      setSingleFileMode: (singleFile: boolean) => {
+        set((state) => {
+          state.app.singleFileMode = singleFile;
+        });
+      },
+      setPagination: (
+        name: string,
+        pagination: { page: number; pageSize: number },
+      ) => {
+        set((state) => {
+          state.app.pagination[name] = pagination;
+        });
+      },
+      clearPagination: (name: string) => {
+        set((state) => {
+          delete state.app.pagination[name];
+        });
+      },
     },
   } as const;
 

inspect_ai/_view/www/src/state/clientEvents.ts

@@ -0,0 +1,73 @@
+import { useCallback, useEffect } from "react";
+import { LogFile } from "../client/api/types";
+import { createLogger } from "../utils/logger";
+import { clientEventsService } from "./clientEventsService";
+import { useLogs } from "./hooks";
+import { useStore } from "./store";
+
+const log = createLogger("Client-Events");
+
+export function useClientEvents() {
+  const refreshLogs = useStore((state) => state.logsActions.refreshLogs);
+  const logHeaders = useStore((state) => state.logs.logHeaders);
+  const api = useStore((state) => state.api);
+  const { loadHeaders } = useLogs();
+
+  // Set up the refresh callback for the service
+  const refreshCallback = useCallback(
+    async (logFiles: LogFile[]) => {
+      // Refresh the list of log files
+      log.debug("Refresh Log Files");
+      await refreshLogs();
+
+      const toRefresh: LogFile[] = [];
+      for (const logFile of logFiles) {
+        const header = logHeaders[logFile.name];
+        if (!header || header.status === "started") {
+          toRefresh.push(logFile);
+        }
+      }
+
+      // Refresh any logFiles that are currently being watched
+      if (toRefresh.length > 0) {
+        log.debug(`Refreshing ${toRefresh.length} log files`, toRefresh);
+        await loadHeaders(toRefresh);
+      }
+    },
+    [logHeaders, refreshLogs, loadHeaders],
+  );
+
+  // Update the service's refresh callback when dependencies change
+  useEffect(() => {
+    clientEventsService.setRefreshCallback(refreshCallback);
+  }, [refreshCallback]);
+
+  // Wrapper functions that call the service
+  const startPolling = useCallback(
+    (logFiles: LogFile[]) => {
+      clientEventsService.startPolling(logFiles, api);
+    },
+    [api],
+  );
+
+  const stopPolling = useCallback(() => {
+    clientEventsService.stopPolling();
+  }, []);
+
+  const cleanup = useCallback(() => {
+    clientEventsService.cleanup();
+  }, []);
+
+  // Cleanup when hook unmounts
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  return {
+    startPolling,
+    stopPolling,
+    cleanup,
+  };
+}

inspect_ai/_view/www/src/state/clientEventsService.ts

@@ -0,0 +1,105 @@
+import { LogFile } from "../client/api/types";
+import { createLogger } from "../utils/logger";
+import { createPolling } from "../utils/polling";
+
+const log = createLogger("Client-Events-Service");
+
+const kRetries = 10;
+const kPollingInterval = 5;
+const kRefreshEvent = "refresh-evals";
+
+class ClientEventsService {
+  private currentPolling: ReturnType<typeof createPolling> | null = null;
+  private abortController: AbortController | null = null;
+  private isRefreshing = false;
+  private pendingLogFiles = new Set<LogFile>();
+  private onRefreshCallback: ((logFiles: LogFile[]) => Promise<void>) | null =
+    null;
+
+  setRefreshCallback(callback: (logFiles: LogFile[]) => Promise<void>) {
+    this.onRefreshCallback = callback;
+  }
+
+  private async refreshPendingLogFiles() {
+    if (this.isRefreshing || !this.onRefreshCallback) {
+      return;
+    }
+
+    do {
+      try {
+        const logFiles = [...this.pendingLogFiles];
+        this.pendingLogFiles.clear();
+        this.isRefreshing = true;
+
+        // Call the refresh callback
+        await this.onRefreshCallback(logFiles);
+      } finally {
+        this.isRefreshing = false;
+      }
+    } while (this.pendingLogFiles.size > 0);
+  }
+
+  private async refreshLogFiles(logFiles: LogFile[]) {
+    logFiles.forEach((file) => this.pendingLogFiles.add(file));
+    await this.refreshPendingLogFiles();
+  }
+
+  startPolling(logFiles: LogFile[], api: any) {
+    // Stop any existing polling
+    this.stopPolling();
+
+    this.abortController = new AbortController();
+
+    this.currentPolling = createPolling(
+      `Client-Events`,
+      async () => {
+        if (this.abortController?.signal.aborted) {
+          log.debug(`Component unmounted, stopping poll for client events`);
+          return false;
+        }
+
+        log.debug(`Polling client events`);
+        const events = await api?.client_events();
+        log.debug(`Received events`, events);
+
+        if (this.abortController?.signal.aborted) {
+          log.debug(`Polling aborted, stopping poll for client events`);
+          return false;
+        }
+
+        if ((events || []).includes(kRefreshEvent)) {
+          await this.refreshLogFiles(logFiles);
+        }
+
+        return true;
+      },
+      {
+        maxRetries: kRetries,
+        interval: kPollingInterval,
+      },
+    );
+
+    this.currentPolling.start();
+  }
+
+  stopPolling() {
+    if (this.currentPolling) {
+      this.currentPolling.stop();
+      this.currentPolling = null;
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  cleanup() {
+    log.debug(`Cleanup`);
+    this.stopPolling();
+    this.pendingLogFiles.clear();
+    this.onRefreshCallback = null;
+  }
+}
+
+// Singleton instance
+export const clientEventsService = new ClientEventsService();