@bbki.ng/bb-msg-history 0.14.1 → 2.0.0

package/src/component.ts

@@ -1,19 +1,24 @@
 import type { AuthorOptions, Message } from './types/index.js';
-import { EMPTY_STYLES, LOADING_STYLES, MAIN_STYLES } from './const/styles.js';
 import { parseMessages } from './utils/message-parser.js';
-import { resolveAuthorConfig } from './utils/author-resolver.js';
-import { setupTooltips } from './utils/tooltip.js';
-import { buildMessageRowHtml, setupTooltipForElement } from './utils/message-builder.js';
-import { buildScrollButtonHtml } from './utils/scroll-button.js';
+import { EventTracker } from './utils/event-tracker.js';
+import { MessageProcessor } from './core/message-processor.js';
+import { ScrollManager } from './core/scroll-manager.js';
+import { Renderer } from './core/renderer.js';
 
 export class BBMsgHistory extends HTMLElement {
   private _mutationObserver?: MutationObserver;
+  private _debounceTimer?: ReturnType<typeof setTimeout>;
+
+  // Core modules
+  private _eventTracker = new EventTracker();
+  private _messageProcessor = new MessageProcessor();
+  private _scrollManager: ScrollManager;
+  private _renderer: Renderer;
+
+  // State
   private _userAuthors = new Map<string, AuthorOptions>();
   private _lastAuthor = '';
   private _lastGroupTimestamp: string | undefined;
-  private _scrollButtonVisible = false;
-  private _scrollListeners: Array<{ el: EventTarget; type: string; fn: EventListener }> = [];
-  private _debounceTimer?: ReturnType<typeof setTimeout>;
 
   static get observedAttributes() {
     return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
@@ -22,7 +27,16 @@ export class BBMsgHistory extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    // Create MutationObserver once - will be connected in connectedCallback
+
+    // Initialize renderer with shadow root
+    this._renderer = new Renderer(this.shadowRoot!);
+
+    // Initialize scroll manager with callback
+    this._scrollManager = new ScrollManager(this, this.shadowRoot!, this._eventTracker, _ => {
+      // Callback for visibility changes (state tracking if needed)
+    });
+
+    // Create MutationObserver for reactive rendering
     this._mutationObserver = new MutationObserver(() => {
       clearTimeout(this._debounceTimer);
       this._debounceTimer = setTimeout(() => this.render(), 50);
@@ -31,7 +45,7 @@ export class BBMsgHistory extends HTMLElement {
 
   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
     if (oldValue === newValue) return;
-    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
+    if (['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'].includes(name)) {
       this.render();
     }
   }
@@ -109,119 +123,32 @@ export class BBMsgHistory extends HTMLElement {
    * el.scrollToBottom();  // Scroll with smooth animation
    */
   scrollToBottom(): this {
-    if (this.hasAttribute('infinite')) {
-      return this;
-    }
-
-    const container = this.shadowRoot?.querySelector('.history') as HTMLElement | null;
-    if (!container) {
-      return this;
-    }
-
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: 'smooth',
-    });
-
+    this._scrollManager.scrollToBottom();
     return this;
   }
 
   /**
-   * Check if two messages can be grouped (same author, no timestamp conflict)
+   * Internal: Append a single message with incremental DOM update
    */
-  private _canGroupMessages(prev: Message | null, curr: Message): boolean {
-    if (!prev) return false;
-    if (prev.author !== curr.author) return false;
-    // Different timestamps = break group
-    if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
-      return false;
-    }
-    return true;
-  }
-
   private _appendSingleMessage(message: Message): void {
-    const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
+    const result = this._renderer.appendSingleMessage(message, this._userAuthors, {
+      author: this._lastAuthor,
+      groupTimestamp: this._lastGroupTimestamp,
+    });
 
-    // If empty state or no container, do full render first
-    if (!container) {
+    if (!result.success) {
+      // Container not ready, do full render
       this.render();
       return;
     }
 
-    const author = message.author;
-    const text = message.text;
-    const timestamp = message.timestamp;
-    const config = resolveAuthorConfig(author, this._userAuthors);
-
-    // Build previous message object for grouping check
-    const prevMessage: Message | null = this._lastAuthor
-      ? { author: this._lastAuthor, text: '', timestamp: this._lastGroupTimestamp }
-      : null;
-
-    // Use unified grouping logic
-    const canGroupWithLast = this._canGroupMessages(prevMessage, message);
-    const isFirstFromAuthor = !canGroupWithLast;
-    this._lastAuthor = author;
-
-    const isSubsequent = !isFirstFromAuthor;
-
-    // Update group timestamp tracking (consistent with render())
-    if (isFirstFromAuthor) {
-      // Start new group
-      this._lastGroupTimestamp = timestamp;
-    } else if (!this._lastGroupTimestamp && timestamp) {
-      // If no timestamp in group yet and current has one, use it
-      this._lastGroupTimestamp = timestamp;
-    }
-
-    // When appending, we assume this IS the last in group (for now)
-    // If another message from same author comes, we'll re-render
-    const isLastInGroup = true;
-    const groupTimestamp = this._lastGroupTimestamp;
-
-    // Use utility function to build message HTML
-    const msgHtml = buildMessageRowHtml(
-      author,
-      text,
-      config,
-      isSubsequent,
-      groupTimestamp,
-      isLastInGroup
-    );
-
-    // Append to container
-    container.insertAdjacentHTML('beforeend', msgHtml);
-
-    // Setup tooltip for new element using utility function
-    const newWrapper = container.lastElementChild?.querySelector('.avatar-wrapper');
-    if (newWrapper) {
-      setupTooltipForElement(newWrapper);
-    }
+    // Update state
+    this._lastAuthor = result.lastAuthor;
+    this._lastGroupTimestamp = result.lastGroupTimestamp;
 
-    // Smooth scroll to bottom (skip in infinite mode)
+    // Scroll to bottom (skip in infinite mode)
     if (!this.hasAttribute('infinite')) {
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: 'smooth',
-      });
-
-      // Hide scroll button since we're scrolling to bottom
-      if (this._scrollButtonVisible) {
-        this._scrollButtonVisible = false;
-        const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
-        if (scrollButton) {
-          scrollButton.classList.remove('visible');
-        }
-
-        // Dispatch hide event (always, regardless of button visibility)
-        this.dispatchEvent(
-          new CustomEvent('bb-scrollbuttonhide', {
-            bubbles: true,
-            composed: true,
-            detail: { visible: false }
-          })
-        );
-      }
+      this._scrollManager.scrollToBottom();
     }
   }
 
@@ -233,29 +160,10 @@ export class BBMsgHistory extends HTMLElement {
   disconnectedCallback() {
     this._mutationObserver?.disconnect();
     clearTimeout(this._debounceTimer);
-    this._cleanupListeners();
-  }
-
-  /**
-   * Track an event listener for cleanup on disconnect
-   */
-  private _addTrackedListener(el: EventTarget, type: string, fn: EventListener): void {
-    el.addEventListener(type, fn);
-    this._scrollListeners.push({ el, type, fn });
-  }
-
-  /**
-   * Remove all tracked event listeners
-   */
-  private _cleanupListeners(): void {
-    this._scrollListeners.forEach(({ el, type, fn }) => {
-      el.removeEventListener(type, fn);
-    });
-    this._scrollListeners = [];
+    this._eventTracker.cleanup();
   }
 
   private _setupMutationObserver() {
-    // Observer was already created in constructor, just need to connect it
     this._mutationObserver?.observe(this, {
       childList: true,
       characterData: true,
@@ -269,231 +177,41 @@ export class BBMsgHistory extends HTMLElement {
     if (messages.length === 0) {
       this._lastAuthor = '';
       this._lastGroupTimestamp = undefined;
-      this._renderEmpty();
+      this._renderer.renderEmpty(this.hasAttribute('loading'));
       return;
     }
 
-    // First pass: determine which messages are last in their group
-    const lastInGroupFlags: boolean[] = messages.map((msg, i) => {
-      const next = messages[i + 1];
-      return !next || !this._canGroupMessages(msg, next);
-    });
-
-    // Second pass: collect the timestamp for each group
-    // Use the first non-empty timestamp in the group
-    const groupTimestamps = new Map<number, string | undefined>();
-    let currentGroupTimestamp: string | undefined;
-
-    messages.forEach((msg, i) => {
-      // Start of a new group
-      if (i === 0 || !this._canGroupMessages(messages[i - 1], msg)) {
-        currentGroupTimestamp = msg.timestamp;
-      } else if (!currentGroupTimestamp && msg.timestamp) {
-        // If no timestamp yet and current msg has one, use it
-        currentGroupTimestamp = msg.timestamp;
-      }
-
-      // If this is the last message in the group, save the timestamp
-      if (lastInGroupFlags[i]) {
-        groupTimestamps.set(i, currentGroupTimestamp);
-        currentGroupTimestamp = undefined;
-      }
-    });
-
-    // Third pass: build HTML
-    let lastAuthor = '';
-    const messagesHtml = messages
-      .map((msg, i) => {
-        const { author, text } = msg;
-        const config = resolveAuthorConfig(author, this._userAuthors);
-
-        // Determine if this is a new author group (can't group with previous)
-        const isFirstFromAuthor = i === 0 || !this._canGroupMessages(messages[i - 1], msg);
-        lastAuthor = author;
-        const isSubsequent = !isFirstFromAuthor;
-
-        // Get timestamp if this is the last in group
-        const isLastInGroup = lastInGroupFlags[i];
-        const groupTimestamp = groupTimestamps.get(i);
-
-        // Use utility function to build message HTML
-        return buildMessageRowHtml(
-          author,
-          text,
-          config,
-          isSubsequent,
-          groupTimestamp,
-          isLastInGroup
-        );
-      })
-      .join('');
+    // Process messages (single-pass algorithm)
+    const { processed, lastAuthor, lastGroupTimestamp } = this._messageProcessor.process(messages);
 
+    // Update state
     this._lastAuthor = lastAuthor;
+    this._lastGroupTimestamp = lastGroupTimestamp;
 
-    // Check if we need to create or update the structure
-    const historyContainer = this.shadowRoot!.querySelector('.history') as HTMLElement;
-    const needsFullSetup = !historyContainer;
-
-    if (needsFullSetup) {
-      // First render - create full structure
-      this._renderFullStructure(messagesHtml);
-    } else {
-      // Update only - preserve DOM structure, just update content
-      this._updateContent(historyContainer, messagesHtml);
-    }
-  }
-
-  private _renderFullStructure(messagesHtml: string): void {
-    // Check if we should preserve scroll position before re-rendering
-    const existingContainer = this.shadowRoot!.querySelector('.history') as HTMLElement | null;
-    const wasAtBottom = existingContainer
-      ? existingContainer.scrollHeight - existingContainer.scrollTop - existingContainer.clientHeight < 50
-      : true; // Default to true for initial render
-
-    const loadingOverlay = this.hasAttribute('loading')
-      ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
-          <div class="loading-spinner"></div>
-        </div>`
-      : '';
-
+    // Render messages
+    const isLoading = this.hasAttribute('loading');
     const hideScrollButton = this.hasAttribute('hide-scroll-button');
+    const { wasAtBottom } = this._renderer.render(
+      processed,
+      this._userAuthors,
+      isLoading,
+      hideScrollButton
+    );
 
-    this.shadowRoot!.innerHTML = `
-      <style>${MAIN_STYLES}${LOADING_STYLES}</style>
-      <div class="history" role="log" aria-live="polite" aria-label="Message history">
-        ${messagesHtml}
-      </div>
-      ${hideScrollButton ? '' : buildScrollButtonHtml()}
-      ${loadingOverlay}
-    `;
-
+    // Setup scroll tracking and other post-render tasks
     this._setupAfterRender(wasAtBottom);
   }
 
-  private _updateContent(historyContainer: HTMLElement, messagesHtml: string): void {
-    // Preserve scroll position before update
-    const scrollContainer = historyContainer;
-    const wasAtBottom =
-      scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 50;
-
-    // Update messages content only
-    historyContainer.innerHTML = messagesHtml;
-
-    // Update loading overlay
-    this._updateLoadingOverlay();
-
-    // Restore scroll position or scroll to bottom if we were there
-    if (wasAtBottom) {
-      scrollContainer.scrollTop = scrollContainer.scrollHeight;
-    }
-
-    // Re-setup tooltips for new content
-    setupTooltips(this.shadowRoot!);
-  }
-
-  private _updateLoadingOverlay(): void {
-    const existingOverlay = this.shadowRoot!.querySelector('.loading-overlay');
-    const shouldShow = this.hasAttribute('loading');
-
-    if (shouldShow && !existingOverlay) {
-      const overlay = document.createElement('div');
-      overlay.className = 'loading-overlay';
-      overlay.setAttribute('role', 'status');
-      overlay.setAttribute('aria-label', 'Loading messages');
-      overlay.innerHTML = '<div class="loading-spinner"></div>';
-      this.shadowRoot!.appendChild(overlay);
-    } else if (!shouldShow && existingOverlay) {
-      existingOverlay.remove();
-    }
-  }
-
   private _setupAfterRender(shouldScrollToBottom = true): void {
     requestAnimationFrame(() => {
-      const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
-      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
+      const container = this._renderer.getHistoryContainer();
+      const scrollButton = this._renderer.getScrollButton();
       const isInfinite = this.hasAttribute('infinite');
 
       if (container && !isInfinite) {
-        if (shouldScrollToBottom) {
-          container.scrollTop = container.scrollHeight;
-        }
-        this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
-      }
-
-      if (scrollButton && !isInfinite) {
-        scrollButton.addEventListener('click', () => {
-          container?.scrollTo({
-            top: container.scrollHeight,
-            behavior: 'smooth',
-          });
-        });
+        // Initialize scroll manager
+        this._scrollManager.init(container, scrollButton, shouldScrollToBottom);
       }
-
-      setupTooltips(this.shadowRoot!);
     });
   }
-
-  private _renderEmpty() {
-    const isLoading = this.hasAttribute('loading');
-
-    if (isLoading) {
-      // Show loading overlay with minimum height for better appearance
-      this.shadowRoot!.innerHTML = `
-        <style>${EMPTY_STYLES}${LOADING_STYLES}</style>
-        <div style="position: relative; min-height: 120px;">
-          <div class="loading-overlay" role="status" aria-label="Loading messages">
-            <div class="loading-spinner"></div>
-          </div>
-        </div>
-      `;
-    } else {
-      this.shadowRoot!.innerHTML = `
-        <style>${EMPTY_STYLES}</style>
-        <div class="empty-state">No messages</div>
-      `;
-    }
-  }
-
-  private _setupScrollTracking(
-    container: HTMLElement,
-    button: HTMLButtonElement | null,
-    options?: { skipInitialCheck?: boolean }
-  ): void {
-    const checkScrollPosition = () => {
-      const threshold = 50; // pixels from bottom
-      const isAtBottom =
-        container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
-      const hasOverflow = container.scrollHeight > container.clientHeight;
-      // Show button when not at bottom and content has overflow
-      const shouldShow = !isAtBottom && hasOverflow;
-
-      if (shouldShow !== this._scrollButtonVisible) {
-        this._scrollButtonVisible = shouldShow;
-        // Only toggle button visibility if button exists
-        if (button) {
-          button.classList.toggle('visible', shouldShow);
-        }
-
-        // Dispatch custom event (always, regardless of button visibility)
-        this.dispatchEvent(
-          new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
-            bubbles: true,
-            composed: true,
-            detail: { visible: shouldShow }
-          })
-        );
-      }
-    };
-
-    // Check initial state unless skipped
-    if (!options?.skipInitialCheck) {
-      checkScrollPosition();
-    }
-
-    // Listen for scroll events with passive listener for performance
-    this._addTrackedListener(container, 'scroll', checkScrollPosition);
-
-    // Also check on resize
-    this._addTrackedListener(window, 'resize', checkScrollPosition);
-  }
 }

package/src/const/authors.ts

@@ -24,8 +24,9 @@ export const AUTHOR_CONFIG: Record<string, Omit<AuthorConfig, 'isCustomAvatar'>>
     textColor: THEME.gray[900],
     side: 'left',
   },
-  'GitHub': {
-    avatar: '<div style="width: 60%; height: 60%; margin: auto"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" viewBox="0 0 16 16" width="16" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.46252C4.40875 1.46252 1.5 4.37029 1.5 7.96032C1.5 10.8356 3.36062 13.2642 5.94438 14.1251C6.26937 14.182 6.39125 13.987 6.39125 13.8165C6.39125 13.6621 6.38313 13.1504 6.38313 12.6063C4.75 12.9068 4.3275 12.2083 4.1975 11.8428C4.12437 11.6559 3.8075 11.0793 3.53125 10.9249C3.30375 10.8031 2.97875 10.5026 3.52312 10.4945C4.035 10.4863 4.40062 10.9656 4.5225 11.1605C5.1075 12.1433 6.04188 11.8671 6.41563 11.6966C6.4725 11.2742 6.64313 10.9899 6.83 10.8275C5.38375 10.665 3.8725 10.1046 3.8725 7.61919C3.8725 6.91255 4.12438 6.32775 4.53875 5.87291C4.47375 5.71046 4.24625 5.04444 4.60375 4.15099C4.60375 4.15099 5.14812 3.98042 6.39125 4.81701C6.91125 4.67081 7.46375 4.59771 8.01625 4.59771C8.56875 4.59771 9.12125 4.67081 9.64125 4.81701C10.8844 3.9723 11.4288 4.15099 11.4288 4.15099C11.7863 5.04444 11.5588 5.71046 11.4938 5.87291C11.9081 6.32775 12.16 6.90443 12.16 7.61919C12.16 10.1127 10.6406 10.665 9.19438 10.8275C9.43 11.0305 9.63313 11.4204 9.63313 12.0296C9.63313 12.8987 9.625 13.5972 9.625 13.8165C9.625 13.987 9.74687 14.1901 10.0719 14.1251C11.3622 13.6896 12.4835 12.8606 13.2779 11.7547C14.0722 10.6488 14.4997 9.32178 14.5 7.96032C14.5 4.37029 11.5913 1.46252 8 1.46252Z" fill="currentColor"></path></svg></div>',
+  GitHub: {
+    avatar:
+      '<div style="width: 60%; height: 60%; margin: auto"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" viewBox="0 0 16 16" width="16" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.46252C4.40875 1.46252 1.5 4.37029 1.5 7.96032C1.5 10.8356 3.36062 13.2642 5.94438 14.1251C6.26937 14.182 6.39125 13.987 6.39125 13.8165C6.39125 13.6621 6.38313 13.1504 6.38313 12.6063C4.75 12.9068 4.3275 12.2083 4.1975 11.8428C4.12437 11.6559 3.8075 11.0793 3.53125 10.9249C3.30375 10.8031 2.97875 10.5026 3.52312 10.4945C4.035 10.4863 4.40062 10.9656 4.5225 11.1605C5.1075 12.1433 6.04188 11.8671 6.41563 11.6966C6.4725 11.2742 6.64313 10.9899 6.83 10.8275C5.38375 10.665 3.8725 10.1046 3.8725 7.61919C3.8725 6.91255 4.12438 6.32775 4.53875 5.87291C4.47375 5.71046 4.24625 5.04444 4.60375 4.15099C4.60375 4.15099 5.14812 3.98042 6.39125 4.81701C6.91125 4.67081 7.46375 4.59771 8.01625 4.59771C8.56875 4.59771 9.12125 4.67081 9.64125 4.81701C10.8844 3.9723 11.4288 4.15099 11.4288 4.15099C11.7863 5.04444 11.5588 5.71046 11.4938 5.87291C11.9081 6.32775 12.16 6.90443 12.16 7.61919C12.16 10.1127 10.6406 10.665 9.19438 10.8275C9.43 11.0305 9.63313 11.4204 9.63313 12.0296C9.63313 12.8987 9.625 13.5972 9.625 13.8165C9.625 13.987 9.74687 14.1901 10.0719 14.1251C11.3622 13.6896 12.4835 12.8606 13.2779 11.7547C14.0722 10.6488 14.4997 9.32178 14.5 7.96032C14.5 4.37029 11.5913 1.46252 8 1.46252Z" fill="currentColor"></path></svg></div>',
     side: 'left',
     bubbleColor: '#ecf4ec',
     textColor: THEME.gray[900],

package/src/const/styles.ts

@@ -160,7 +160,6 @@ export const MAIN_STYLES = `
     background: #ffffff;
     border-radius: 50%;
     overflow: hidden;
-    cursor: help;
   }
 
   .avatar-wrapper--hidden {
@@ -183,38 +182,6 @@ export const MAIN_STYLES = `
     height: 100%;
   }
 
-  /* Hover tooltip */
-  .avatar-tooltip {
-    position: fixed;
-    padding: 0.25rem 0.5rem;
-    background: ${THEME.gray[800]};
-    color: ${THEME.gray[50]};
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 10;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-  }
-
-  .avatar-tooltip::after {
-    content: '';
-    position: absolute;
-    top: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
-    border-top-color: ${THEME.gray[800]};
-  }
-
-  .avatar-wrapper:hover .avatar-tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-
   /* Message content area */
   .msg-content {
     display: flex;

package/src/core/message-processor.ts

@@ -0,0 +1,120 @@
+import type { Message } from '../types/index.js';
+
+/**
+ * Extended message with grouping metadata
+ */
+export interface ProcessedMessage extends Message {
+  /** Whether this is the first message from this author in the current group */
+  isFirstFromAuthor: boolean;
+  /** Whether this is the last message in the current group */
+  isLastInGroup: boolean;
+  /** The timestamp to display for this group (if any) */
+  groupTimestamp?: string;
+}
+
+/**
+ * Result of processing messages, including state for incremental updates
+ */
+export interface ProcessResult {
+  /** Processed messages with grouping metadata */
+  processed: ProcessedMessage[];
+  /** The author of the last message */
+  lastAuthor: string;
+  /** The timestamp of the current group */
+  lastGroupTimestamp?: string;
+}
+
+/**
+ * MessageProcessor - Handles message grouping and metadata calculation
+ *
+ * Encapsulates the grouping algorithm to determine:
+ * - Which messages are first from an author (show avatar)
+ * - Which messages are last in a group (show timestamp)
+ * - Group timestamps for display
+ *
+ * Optimized to process messages in a single pass instead of multiple traversals.
+ */
+export class MessageProcessor {
+  /**
+   * Check if two messages can be grouped together
+   * Messages can be grouped if they have the same author and compatible timestamps
+   *
+   * @param prev - Previous message (null if this is the first)
+   * @param curr - Current message
+   * @returns true if messages can be grouped
+   */
+  private canGroup(prev: Message | null, curr: Message): boolean {
+    if (!prev) return false;
+    if (prev.author !== curr.author) return false;
+    // Different timestamps = break group
+    if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Process messages to add grouping metadata
+   *
+   * This method performs a single-pass algorithm that:
+   * 1. Determines first/last status for each message in its group
+   * 2. Assigns group timestamps consistently
+   * 3. Tracks state for incremental updates
+   *
+   * @param messages - Raw messages from parser
+   * @returns Processed messages with grouping metadata and state
+   */
+  process(messages: Message[]): ProcessResult {
+    if (messages.length === 0) {
+      return { processed: [], lastAuthor: '' };
+    }
+
+    const processed: ProcessedMessage[] = [];
+    let lastAuthor = '';
+    let lastGroupTimestamp: string | undefined;
+
+    // Track group state
+    let currentGroupTimestamp: string | undefined;
+
+    for (let i = 0; i < messages.length; i++) {
+      const msg = messages[i];
+      const prev = i > 0 ? messages[i - 1] : null;
+      const next = i < messages.length - 1 ? messages[i + 1] : null;
+
+      // Determine if this is first from author
+      const isFirstFromAuthor = !this.canGroup(prev, msg);
+
+      // Start of new group - initialize group timestamp
+      if (isFirstFromAuthor) {
+        currentGroupTimestamp = msg.timestamp;
+      } else if (!currentGroupTimestamp && msg.timestamp) {
+        // If no timestamp yet and current msg has one, use it
+        currentGroupTimestamp = msg.timestamp;
+      }
+
+      // Determine if this is last in group
+      const isLastInGroup = !next || !this.canGroup(msg, next);
+
+      // Create processed message with metadata
+      const processedMsg: ProcessedMessage = {
+        ...msg,
+        isFirstFromAuthor,
+        isLastInGroup,
+        groupTimestamp: isLastInGroup ? currentGroupTimestamp : undefined,
+      };
+
+      processed.push(processedMsg);
+
+      // Update state tracking
+      lastAuthor = msg.author;
+
+      // If this is the last in group, reset group timestamp
+      if (isLastInGroup) {
+        lastGroupTimestamp = currentGroupTimestamp;
+        currentGroupTimestamp = undefined;
+      }
+    }
+
+    return { processed, lastAuthor, lastGroupTimestamp };
+  }
+}