Event log with agent

import { Meta, StoryObj } from '@storybook/react-vite';

import { ChainOfThought } from '../ChainOfThought/ChainOfThought';
import { LabeledDivider } from '../LabeledDivider/LabeledDivider';
import { ThinkingState } from '../ThinkingState/ThinkingState';
import { Timeline } from '../Timeline/Timeline';
import { TimelineItem } from '../Timeline/TimelineItem';

const meta: Meta = {
	tags: ['new-pattern', 'ready-for-dev'],
	title: 'Recipes/Event log with agent',
	parameters: {
		docs: {
			description: {
				component:
					'**Recipe:** a composition of existing proposals, not a component. An agent joins an event log: an agentic Labeled Divider opens its region, its entries are Timeline Items marked `isAgentic` plus a Chain of Thought and a Thinking State, and a second divider closes the region.',
			},
		},
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

const Log = ({ isWorking }: { isWorking: boolean }) => (
	<Timeline hasRail>
		<TimelineItem
			label={
				<>
					Verified the finding still applies: <strong>Contact Form 7</strong>{' '}
					active on <strong>5 sites</strong>
				</>
			}
			status='done'
			time='01:00 AM'
		/>
		<TimelineItem
			label='Opened a pull request with the update for 5 sites'
			iconName='codeBranch'
			time='01:01 AM'
		/>
		<TimelineItem
			label='Deployed to Dev on a canary group of 4 sites'
			status='done'
			time='01:03 AM'
		/>
		<TimelineItem
			label='Checks failed on 1 canary site'
			status='error'
			time='01:07 AM'
		/>
		<LabeledDivider
			label='Zappy engaged'
			prefixIcon='zappy'
			suffixIcon={undefined}
			size='xs'
			tone='agentic'
		/>
		<TimelineItem
			detail='A separate sandbox forked from Live, so fixes are tried without touching Dev, Test or Live.'
			isAgentic
			label='Created a sandbox to investigate'
			status='done'
			time='01:08 AM'
		/>
		<ChainOfThought
			isActive={false}
			isOpen
			label='Investigated the failing site'
			time='3m'
		>
			<TimelineItem
				isAgentic
				label='Read the build log'
				secondaryText='canary-3'
				status='done'
			/>
			<TimelineItem
				isAgentic
				label='Found a plugin conflict'
				secondaryText='contact-form-7 and cache'
				status='done'
			/>
			<TimelineItem
				isAgentic
				label='Applied a fix in the sandbox'
				status='done'
			/>
		</ChainOfThought>
		<TimelineItem
			isAgentic
			label='Fix succeeded in the sandbox: visual regression clean'
			status='done'
			time='01:11 AM'
		/>
		<TimelineItem
			isAgentic
			label='You approved: deploying to the remaining site'
			status='done'
			time='01:13 AM'
		/>
		{isWorking ? (
			<ThinkingState label='Rolling out to the remaining site' />
		) : (
			<TimelineItem
				isAgentic
				label='Rolled out to the remaining site'
				status='done'
				time='01:15 AM'
			/>
		)}
		{!isWorking && (
			<LabeledDivider
				label='Zappy finished'
				prefixIcon='zappy'
				suffixIcon={undefined}
				size='xs'
				tone='agentic'
			/>
		)}
		{!isWorking && [
			<TimelineItem
				key='deployed-fix'
				label='Deployed the fix to Dev on 5 sites'
				status='done'
				time='01:16 AM'
			/>,
			<TimelineItem
				key='checks-passed'
				label='All 5 sites passed their checks'
				status='done'
				time='01:18 AM'
			/>,
			<TimelineItem
				key='dev-only'
				iconName='circleInfo'
				label='Dev only: this finding stays open until the fix is promoted to Test'
				time='01:18 AM'
			/>,
		]}
	</Timeline>
);

export const AgentWorking: Story = {
	render: () => <Log isWorking />,
};

export const AgentFinished: Story = {
	render: () => <Log isWorking={false} />,
};