@e-llm-studio/watch-me-work

A React component library that renders a live, animated view of multi-agent orchestration — showing each agent's thinking steps, streaming status, and time taken in a collapsible accordion UI.

Installation

npm install @e-llm-studio/watch-me-work

Usage

import { WatchMeWork } from '@e-llm-studio/watch-me-work';

<WatchMeWork
  orchestratorAndAgentsMessages={message?.orchestratorAndAgentsMessages}
  isStreamEnd={isStreamEnd}
  finalTimeTaken={message?.finalTimeTaken}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | orchestratorAndAgentsMessages | ThinkingResponseData[] | ✅ Yes | Array of agent messages to render as steps | | isStreamEnd | boolean | ✅ Yes | Whether the stream has finished. Controls step finalization and timer stop | | finalTimeTaken | number | ✅ Yes | Total time taken (in ms) displayed after stream ends | | thinkingStartTime | number \| null | ❌ Optional | Timestamp (ms) when thinking started. Used for elapsed timer | | streamEndTime | number \| null | ❌ Optional | Timestamp (ms) when the stream ended | | storeTime | number | ❌ Optional | Timestamp (ms) used for storage-related timing metrics |

ThinkingResponseData shape

Each item in orchestratorAndAgentsMessages should conform to:

interface ThinkingResponseData {
  responseFrom: string;         // Agent or orchestrator name
  responseMessage?: string;     // Optional message string
  header_message: string;       // Step label shown in the accordion header
  finalResponseStatus: boolean; // Whether this step has completed
  responsedata?: string;        // Markdown content shown in the expanded step body
}

Full Example

import { WatchMeWork } from '@e-llm-studio/watch-me-work';

const agentMessages = [
  {
    responseFrom: 'orchestrator',
    header_message: 'Analyzing your request...',
    finalResponseStatus: false,
    responsedata: '',
  },
  {
    responseFrom: 'search-agent',
    header_message: 'Fetching relevant documents',
    finalResponseStatus: true,
    responsedata: '**Found 3 relevant sources.** Summarizing content now.',
  },
];

export default function ChatMessage() {
  return (
    <WatchMeWork
      orchestratorAndAgentsMessages={agentMessages}
      isStreamEnd={false}
      finalTimeTaken={0}
      thinkingStartTime={Date.now()}
      streamEndTime={null}
      storeTime={undefined}
    />
  );
}

Behaviour

• While isStreamEnd is false, an elapsed timer runs showing how long the agents have been working.
• Each step renders as a collapsible accordion row with a shimmer animation on the header label while the step is in progress.
• When finalResponseStatus is true on a step, the header transitions to a gradient style indicating completion.
• When isStreamEnd becomes true, the total time taken (finalTimeTaken) is displayed and all timers stop.

Styling

This package uses self-contained inline styles and injects a minimal @keyframes rule into document.head on first mount (identified by id="wmw-shimmer-keyframes"). No external CSS import is required in your project.

Peer Dependencies

{
  "react": ">=16.8.0 <19.0.0",
  "react-dom": "^17.0.2"
}

Repository

github.com/Techolution/e-llm-studio-lib

License

MIT © Techolution