File changes

'use client';

import * as React from 'react';
import { type DiffLine, type FileChange, FileChanges } from './file-changes';

const themeLines: DiffLine[] = [
  { kind: 'context', text: 'export const theme = {' },
  { kind: 'remove', text: "  radius: 'sm'," },
  { kind: 'add', text: "  radius: 'md'," },
  { kind: 'add', text: "  motion: 'calm'," },
  { kind: 'context', text: '};' },
];
const buttonLines: DiffLine[] = [
  { kind: 'context', text: 'export function Button(props) {' },
  { kind: 'remove', text: '  return <button {...props} />;' },
  { kind: 'add', text: '  const label = props.label ?? "Save";' },
  { kind: 'add', text: '  return <button {...props}>{label}</button>;' },
  { kind: 'context', text: '}' },
];
const menuLines: DiffLine[] = [
  { kind: 'add', text: 'export function openMenu(id: string) {' },
  { kind: 'add', text: '  return menus.get(id)?.open();' },
  { kind: 'add', text: '}' },
];
const FILES: FileChange[] = [
  { path: 'src/theme.ts', additions: 14, deletions: 3, lines: themeLines },
  { path: 'src/components/button.tsx', additions: 8, deletions: 2, lines: buttonLines },
  { path: 'src/menu.ts', additions: 22, deletions: 0, lines: menuLines },
  { path: 'tests/menu.test.ts', additions: 31, deletions: 0 },
  { path: 'README.md', additions: 3, deletions: 1 },
];
const LIVE_END = 27;

export default function FileChangesDemo({ replay = 0 }: { replay?: number }) {
  const [live, setLive] = React.useState(LIVE_END);

  // Replay runs the end of a run again, and a count that rises while the agent is still editing.
  React.useEffect(() => {
    if (replay === 0) return;
    setLive(4);
    const timer = window.setInterval(() => {
      setLive((n) => {
        if (n >= LIVE_END) {
          window.clearInterval(timer);
          return LIVE_END;
        }
        return Math.min(LIVE_END, n + 5);
      });
    }, 450);
    return () => window.clearInterval(timer);
  }, [replay]);

  return (
    <div className="flex w-full max-w-[560px] flex-col gap-6 rounded-xl border border-secondary bg-primary p-6">
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-primary">Run finished, 5 files changed</p>
        <FileChanges key={replay} files={FILES} />
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-primary">Agent is editing</p>
        <FileChanges files={[{ path: 'src/app.tsx', additions: live, deletions: 2 }]} />
      </div>
    </div>
  );
}