| ```javascript | |
| class AgenticTimeline extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| } | |
| connectedCallback() { | |
| this.render(); | |
| } | |
| render() { | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| margin-top: 2rem; | |
| } | |
| .timeline-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .timeline-container { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| border-left: 2px solid #e5e7eb; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 1.5rem; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -1.5rem; | |
| top: 0; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| transform: translateX(-50%); | |
| } | |
| .timeline-content { | |
| padding: 0.75rem; | |
| background-color: white; | |
| border-radius: 0.375rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .timeline-time { | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| margin-bottom: 0.25rem; | |
| } | |
| .timeline-title { | |
| font-weight: 500; | |
| margin-bottom: 0.25rem; | |
| } | |
| .timeline-desc { | |
| font-size: 0.875rem; | |
| color: #4b5563; | |
| } | |
| .tool-call { | |
| margin-top: 0.5rem; | |
| padding: 0.5rem; | |
| background-color: #f9fafb; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| } | |
| .human-review { | |
| margin-top: 0.5rem; | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| } | |
| .review-approved { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .review-pending { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| </style> | |
| <div class="timeline-header"> | |
| <h3 class="text-lg font-medium">Execution Timeline</h3> | |
| </div> | |
| <div class="timeline-container"> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="timeline-content"> | |
| <div class="timeline-time">2 minutes ago</div> | |
| <div class="timeline-title">Cell #3 Completed</div> | |
| <div class="timeline-desc">Data visualization generated</div> | |
| <div class="human-review review-pending"> | |
| <div>🧍 Human Review Required</div> | |
| <div class="mt-1">Status: Pending</div> | |
| </div> | |
| <div class="tool-call"> | |
| <div> |