Research Report

import * as React from 'react'
import { ResearchReport, type ResearchReportSection } from '@/components/ui/research-report'

const reportStats = [
  ['53', 'agent components'],
  ['7', 'workflows covered'],
  ['120', 'pages read'],
]

const reportSections: ResearchReportSection[] = [
  {
    id: 'finding',
    title: 'The opportunity',
    content: (
      <>
        <p>
          Most libraries stop at chat primitives. Product teams still rebuild approvals, tool
          execution, recovery, and durable output from scratch.
        </p>
        <div className="mt-4 grid grid-cols-3 gap-2 whitespace-normal">
          {reportStats.map(([value, label]) => (
            <div className="rounded-[12px] bg-muted/60 p-3" key={label}>
              <span className="block text-xl font-medium tabular-nums">{value}</span>
              <span className="block text-xs leading-4">{label}</span>
            </div>
          ))}
        </div>
      </>
    ),
  },
  {
    id: 'execution',
    title: 'Tool execution and approvals',
    content:
      'A tool call needs to show what will happen, which resources it can access, and whether the user can stop it. Approval belongs beside the proposed action so the decision stays connected to its consequences.\n\nOnce execution starts, the same surface should show progress and the result. If a call fails, keep the attempted action visible and offer a specific recovery step.',
  },
  {
    id: 'recovery',
    title: 'Failure and recovery',
    level: 3,
    content:
      'Distinguish a temporary connection problem from an action that needs new input. Preserve completed work when retrying, and make it clear which step will run again.',
  },
  {
    id: 'outputs',
    title: 'Reports and durable output',
    content:
      'Long-form results need a reading surface with stable headings, source links, and navigation. Keep the report readable independently of the conversation that produced it.\n\nA compact contents rail lets readers move between findings without keeping a sidebar open. The active section should follow the reader as they scroll.',
  },
  {
    id: 'context',
    title: 'Context and memory',
    content:
      'Readers need to understand which documents, decisions, and preferences informed a result. Show the relevant context beside the work and let people correct an outdated assumption before it shapes the next step.',
  },
  {
    id: 'context-limits',
    title: 'Context limits',
    level: 3,
    content:
      'When a conversation grows too long, explain what remains available and what has been summarized. Keep important constraints visible so users can confirm that the agent still understands the task.',
  },
  {
    id: 'background',
    title: 'Background work',
    content:
      'Long-running tasks should remain accessible after the user leaves the conversation. Give each run a stable name, a current state, and a clear place to review its output. Progress updates should describe completed work and the next meaningful step.',
  },
  {
    id: 'notifications',
    title: 'Notifications and handoffs',
    level: 3,
    content:
      'Notify people when a decision is needed or a result is ready. Include enough context to resume the task without rereading the entire conversation, and distinguish requests for input from routine progress updates.',
  },
  {
    id: 'collaboration',
    title: 'Collaboration and ownership',
    content:
      'Shared work needs a visible owner and a record of decisions. Make it clear who requested an action, who approved it, and which version of the result is current. Comments should stay attached to the section or artifact they discuss.',
  },
  {
    id: 'accessibility',
    title: 'Accessibility and navigation',
    content:
      'Every action should be reachable with a keyboard. Long reports need consistent heading levels, visible focus, and a contents menu that can scroll independently. Respect reduced-motion preferences when moving between sections.',
  },
  {
    id: 'small-screens',
    title: 'Small-screen reading',
    level: 3,
    content:
      'Keep the reading column comfortable on narrow screens. Navigation can temporarily cover the report, but it should dismiss predictably after selecting a section and leave the reader at the chosen heading.',
  },
  {
    id: 'evaluation',
    title: 'Evaluating the experience',
    content:
      'Test complete tasks rather than isolated controls. Check whether people can identify the current state, find a supporting source, recover from a failed action, and return to a previous result without losing their place.',
  },
  {
    id: 'direction',
    title: 'Recommended direction',
    content:
      'Lead with complete agent workflows, keep state legible, and give generated work a durable place in the interface.',
  },
]

export default function Demo() {
  const [visible, setVisible] = React.useState(1)

  React.useEffect(() => {
    if (visible >= reportSections.length) return
    const timer = setTimeout(() => setVisible((value) => value + 1), 450)
    return () => clearTimeout(timer)
  }, [visible])

  return (
    <ResearchReport
      className="w-full max-w-3xl"
      generatedAt={
        visible < reportSections.length
          ? `Writing section ${visible + 1} of ${reportSections.length}…`
          : 'Generated in 42s from 120 pages'
      }
      sections={reportSections.slice(0, visible)}
      sources={[
        { id: 'directory', label: 'shadcn registry directory' },
        { id: 'agentui', label: 'Agent UI component catalog' },
      ]}
      summary="The strongest product gap is not another set of buttons. It is a coherent interface system for software that thinks and acts over time."
      title="Agent UI landscape"
    />
  )
}