@larose/pi-web 0.3.0

package/src/client/display-title.ts

@@ -0,0 +1,36 @@
+export const UNNAMED_SESSION_TITLE = "Unnamed session";
+export const MAX_FALLBACK_TITLE_CHARS = 60;
+
+export interface SessionTitleSource {
+  name?: string | undefined;
+  firstMessage?: string | undefined;
+}
+
+function normalizedFirstSentence(value: string): string {
+  const normalized = value.replace(/\s+/gu, " ").trim();
+  const sentenceEnd = /[.!?。！？](?=\s|$)/u.exec(normalized);
+  return sentenceEnd ? normalized.slice(0, sentenceEnd.index + sentenceEnd[0].length) : normalized;
+}
+
+function boundedTitle(value: string): string {
+  const characters = Array.from(value);
+  if (characters.length <= MAX_FALLBACK_TITLE_CHARS) {
+    return value;
+  }
+
+  const prefix = characters
+    .slice(0, MAX_FALLBACK_TITLE_CHARS - 1)
+    .join("")
+    .trimEnd();
+  return `${prefix}…`;
+}
+
+export function displaySessionTitle(source: SessionTitleSource): string {
+  const nativeName = source.name?.trim();
+  if (nativeName) {
+    return nativeName;
+  }
+
+  const firstSentence = normalizedFirstSentence(source.firstMessage ?? "");
+  return firstSentence ? boundedTitle(firstSentence) : UNNAMED_SESSION_TITLE;
+}

package/src/client/event-stream.ts

@@ -0,0 +1,194 @@
+export type EventStreamState = "connecting" | "connected" | "reconnecting";
+
+export interface EventSourceLike {
+  onerror: ((event: Event) => void) | null;
+  addEventListener(type: string, listener: (event: Event) => void): void;
+  close(): void;
+}
+
+export interface EventStreamScheduler {
+  setTimeout(callback: () => void, delay: number): unknown;
+  clearTimeout(timer: unknown): void;
+}
+
+export interface EventStreamOptions {
+  createEventSource?: (url: string) => EventSourceLike;
+  heartbeatTimeoutMs?: number;
+  retryDelayMs?: number;
+  scheduler?: EventStreamScheduler;
+  onReady(event: MessageEvent<string>, recovered: boolean): void;
+  onRuntime(event: MessageEvent<string>): void;
+  onStateChange(state: EventStreamState): void;
+}
+
+const defaultScheduler: EventStreamScheduler = {
+  setTimeout: (callback, delay) => globalThis.setTimeout(callback, delay),
+  clearTimeout: (timer) => globalThis.clearTimeout(timer as ReturnType<typeof setTimeout>),
+};
+
+export class SessionEventStream {
+  private readonly createEventSource: (url: string) => EventSourceLike;
+  private readonly heartbeatTimeoutMs: number;
+  private readonly retryDelayMs: number;
+  private readonly scheduler: EventStreamScheduler;
+  private readonly onReady: EventStreamOptions["onReady"];
+  private readonly onRuntime: EventStreamOptions["onRuntime"];
+  private readonly onStateChange: EventStreamOptions["onStateChange"];
+  private source: EventSourceLike | undefined;
+  private sessionId: string | undefined;
+  private retryTimer: unknown;
+  private watchdogTimer: unknown;
+  private cursor: number | undefined;
+  private hasConnected = false;
+  private ready = false;
+
+  constructor(options: EventStreamOptions) {
+    this.createEventSource = options.createEventSource ?? ((url) => new EventSource(url));
+    this.heartbeatTimeoutMs = options.heartbeatTimeoutMs ?? 45_000;
+    this.retryDelayMs = options.retryDelayMs ?? 2_000;
+    this.scheduler = options.scheduler ?? defaultScheduler;
+    this.onReady = options.onReady;
+    this.onRuntime = options.onRuntime;
+    this.onStateChange = options.onStateChange;
+  }
+
+  get isReady(): boolean {
+    return this.ready;
+  }
+
+  start(sessionId: string): void {
+    this.stop();
+    this.sessionId = sessionId;
+    this.open("connecting");
+  }
+
+  stop(): void {
+    this.clearRetry();
+    this.clearWatchdog();
+    this.source?.close();
+    this.source = undefined;
+    this.sessionId = undefined;
+    this.cursor = undefined;
+    this.hasConnected = false;
+    this.ready = false;
+  }
+
+  reconnectNow(): void {
+    if (!this.sessionId) {
+      return;
+    }
+    this.open("reconnecting");
+  }
+
+  ensureConnected(): void {
+    if (!this.ready) {
+      this.reconnectNow();
+    }
+  }
+
+  private open(state: Exclude<EventStreamState, "connected">): void {
+    const sessionId = this.sessionId;
+    if (!sessionId) {
+      return;
+    }
+
+    this.clearRetry();
+    this.clearWatchdog();
+    this.source?.close();
+    this.ready = false;
+    this.onStateChange(state);
+
+    const path = `/api/sessions/${encodeURIComponent(sessionId)}/events`;
+    const url = this.cursor === undefined ? path : `${path}?lastEventId=${this.cursor}`;
+    const source = this.createEventSource(url);
+    this.source = source;
+    this.watch(source);
+
+    source.addEventListener("ready", (rawEvent) => {
+      if (source !== this.source) {
+        return;
+      }
+
+      this.markActivity(source);
+      this.ready = true;
+      const recovered = this.hasConnected;
+      this.hasConnected = true;
+      this.onStateChange("connected");
+      this.onReady(rawEvent as MessageEvent<string>, recovered);
+    });
+    source.addEventListener("runtime", (rawEvent) => {
+      if (source !== this.source) {
+        return;
+      }
+
+      this.markActivity(source);
+      const event = rawEvent as MessageEvent<string>;
+      const cursor = Number(event.lastEventId);
+      if (event.lastEventId && Number.isSafeInteger(cursor) && cursor >= 0) {
+        this.cursor = cursor;
+      }
+      this.onRuntime(event);
+    });
+    source.addEventListener("heartbeat", () => {
+      if (source === this.source) {
+        this.markActivity(source);
+      }
+    });
+    source.onerror = () => {
+      if (source === this.source) {
+        this.fail(source);
+      }
+    };
+  }
+
+  private fail(source: EventSourceLike): void {
+    if (source !== this.source) {
+      return;
+    }
+
+    source.close();
+    this.source = undefined;
+    this.ready = false;
+    this.clearWatchdog();
+    this.onStateChange("reconnecting");
+    this.clearRetry();
+    this.retryTimer = this.scheduler.setTimeout(() => {
+      this.retryTimer = undefined;
+      this.open("reconnecting");
+    }, this.retryDelayMs);
+  }
+
+  private markActivity(source: EventSourceLike): void {
+    if (source !== this.source) {
+      return;
+    }
+
+    this.clearWatchdog();
+    this.watch(source);
+  }
+
+  private watch(source: EventSourceLike): void {
+    this.watchdogTimer = this.scheduler.setTimeout(() => {
+      this.watchdogTimer = undefined;
+      if (source === this.source) {
+        this.open("reconnecting");
+      }
+    }, this.heartbeatTimeoutMs);
+  }
+
+  private clearRetry(): void {
+    if (this.retryTimer === undefined) {
+      return;
+    }
+    this.scheduler.clearTimeout(this.retryTimer);
+    this.retryTimer = undefined;
+  }
+
+  private clearWatchdog(): void {
+    if (this.watchdogTimer === undefined) {
+      return;
+    }
+    this.scheduler.clearTimeout(this.watchdogTimer);
+    this.watchdogTimer = undefined;
+  }
+}