(function attachRecipeRunTimeline(global) {
  const React = global.React;
  if (!React) return;

  function RecipeRunTimeline({ run, onExport }) {
    if (!run) return null;
    const steps = run.stepResults || [];
    return <section className="free-seo-card">
      <div className="row between"><div><h2>Run timeline</h2><p className="muted">{run.id} · {run.status} · {run.mode}</p></div><div className="row gap small"><button className="button" onClick={() => onExport && onExport('html')}>HTML</button><button className="button" onClick={() => onExport && onExport('json')}>JSON</button><button className="button" onClick={() => onExport && onExport('zip')}>ZIP</button></div></div>
      {!steps.length ? <p className="muted">No steps recorded.</p> : <ol className="timeline">{steps.map((step) => <li key={step.id} className={`timeline-item status-${step.status}`}>
        <strong>{step.name}</strong><span>{step.status} · {step.type}</span>
        {step.linkedRoute ? <p><code>{step.linkedRoute}</code></p> : null}
        {step.output && step.output.instructions ? <ul>{step.output.instructions.map((item, idx) => <li key={idx}>{item}</li>)}</ul> : null}
        {(step.locks || []).length ? <div className="alert alert-warning">{step.locks.map((lock) => lock.message).join(' ')}</div> : null}
      </li>)}</ol>}
    </section>;
  }

  global.RecipeRunTimeline = RecipeRunTimeline;
})(window);