MessageTicker.tsx

MessageTicker — horizontal scrolling feed of recent agent messages Displays a news-ticker style bar at the bottom of the pixel office showing the latest messages from all active agents. Pauses on hover. /

/**
 * MessageTicker — horizontal scrolling feed of recent agent messages
 *
 * Displays a news-ticker style bar at the bottom of the pixel office
 * showing the latest messages from all active agents. Pauses on hover.
 */

import { useEffect, useRef, useState, useCallback } from 'react';
import { io as socketIO } from 'socket.io-client';
import type { TickerMessage } from '../../shared/types';
import './MessageTicker.css';

/** Format timestamp to HH:MM */
function fmtTime(ts: number): string {
  const d = new Date(ts);
  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}

/** Truncate text with ellipsis */
function truncate(text: string, maxLen: number): string {
  if (text.length <= maxLen) return text;
  return text.slice(0, maxLen - 1) + '…

... (truncated -- full source via MCP)