{# Agents day view - historical agent runs browser #}

<style>
/* ============================================================================
   Layout & Navigation
   ============================================================================ */
.agents-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid var(--facet-border, #e5e0db);
}

.view-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--facet-border, #e5e0db);
}

.back-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.back-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #333;
}

.back-btn:active {
  background: #e0e0e0;
}

.back-btn:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}

.view-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

/* ============================================================================
   Day Summary Bar
   ============================================================================ */
.day-summary {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0 1rem;
  font-size: 0.85rem;
  color: #666;
}

.day-summary .summary-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.day-summary .summary-failed {
  color: #c62828;
}

/* ============================================================================
   Agent Card Grid
   ============================================================================ */
.agent-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--facet-border, #e5e0db);
}

.agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.agent-card {
  background: white;
  border: 2px solid var(--facet-border, #e5e0db);
  border-left: 3px solid #6c757d;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.agent-card:hover {
  border-top-color: #007bff;
  border-right-color: #007bff;
  border-bottom-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.agent-card:active {
  transform: scale(0.98);
}

.agent-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.agent-card-title {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}

.agent-card-badges {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-failed {
  background: #ffebee;
  color: #c62828;
}

.agent-card-description {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-card-caps {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #f0f0f0;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agent-card-activity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: #666;
}

.activity-counts {
  display: flex;
  gap: 0.75rem;
}

.facet-dots {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.facet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}

/* ============================================================================
   Run List View
   ============================================================================ */
.run-list-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.preview-btn {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s, border-color 0.2s;
  margin-left: auto;
}

.preview-btn:hover {
  background: #e9ecef;
  border-color: #ccc;
}

.preview-btn:active {
  background: #dee2e6;
}

.preview-btn:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}

.runs-table {
  width: 100%;
  border-collapse: collapse;
}

.runs-table th,
.runs-table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--facet-border, #e5e0db);
}

.runs-table th {
  font-weight: 600;
  color: #666;
  font-size: 0.85rem;
}

.runs-table tr {
  cursor: pointer;
  transition: background 0.15s;
}

.runs-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

.runs-table tbody tr:active {
  background: rgba(0, 0, 0, 0.06);
}

.col-status { width: 50px; text-align: center; }
.col-time { width: 100px; }
.col-model { width: 140px; }
.col-provider { width: 90px; }
.col-runtime { width: 80px; text-align: right; }
.col-activity { width: 50px; text-align: center; }
.col-facet { width: 120px; }
.col-output { width: 120px; }
.col-prompt { }

.status-icon {
  font-size: 1.1rem;
}

.status-ok { color: #4caf50; }
.status-failed { color: #f44336; }
.status-running { color: #ff9800; }

.facet-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  background: #f5f5f5;
}

.prompt-snippet {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
  font-size: 0.85rem;
}

.model-name {
  font-size: 0.85rem;
  color: #5f6368;
}

.provider-name {
  font-size: 0.8rem;
  color: #888;
}

.error-preview {
  font-size: 0.8rem;
  color: #c62828;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

/* ============================================================================
   Run Detail View
   ============================================================================ */
.run-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.crumb-link {
  color: #1a73e8;
  text-decoration: none;
  cursor: pointer;
}

.crumb-link:hover {
  text-decoration: underline;
}

.crumb-link:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
  border-radius: 2px;
}

.crumb-sep {
  color: #999;
}

.crumb-current {
  color: #5f6368;
}

.run-detail-header-card {
  background: #fafafa;
  border: 1px solid var(--facet-border, #e5e0db);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.run-detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.run-detail-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.run-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.run-status-badge.status-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.run-status-badge.status-failed {
  background: #ffebee;
  color: #c62828;
}

.run-status-badge.status-running {
  background: #e3f2fd;
  color: #1565c0;
}

.run-detail-subtitle {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 0.85rem;
}

.run-detail-prompt {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #d1d5db;
}

.run-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.run-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #fff;
  border: 1px solid var(--facet-border, #e5e0db);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
}

.meta-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.meta-value {
  font-size: 0.9rem;
  color: #2f3437;
}

.rd-tabs {
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--facet-border, #e5e0db);
  flex-shrink: 0;
  display: flex;
}

.rd-tab {
  padding: 6px 14px;
  border: 1px solid var(--facet-border, #e5e0db);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: #374151;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rd-tab:hover {
  background: #f9fafb;
}

.rd-tab.active {
  background: var(--facet-color, #b06a1a);
  border-color: var(--facet-color, #b06a1a);
  color: #fff;
}

.rd-tab:not(.active):active {
  background: #e5e7eb;
}

.rd-tab:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}

.rd-panel {
  padding-top: 0.85rem;
}

.rd-tab-pane {
  display: none;
}

.rd-tab-pane.active {
  display: block;
}

.run-output-content {
  line-height: 1.6;
  font-size: 0.9rem;
}

.run-output-content pre {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

.run-output-content .rendered-markdown h1,
.run-output-content .rendered-markdown h2,
.run-output-content .rendered-markdown h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.run-output-content .rendered-markdown ul,
.run-output-content .rendered-markdown ol {
  padding-left: 1.5rem;
}

.run-output-content .rendered-markdown p {
  margin-bottom: 0.5rem;
}

.run-loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}

/* Event timeline */
.event-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-block {
  border-left: 3px solid #e0e0e0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.event-block .event-time {
  font-size: 0.75rem;
  color: #999;
  margin-right: 0.5rem;
  font-family: monospace;
}

/* Thinking events */
.event-thinking {
  border-left-color: #7c4dff;
  background: #f5f0ff;
}

.event-thinking .event-label {
  font-weight: 600;
  color: #7c4dff;
  font-size: 0.75rem;
}

.event-thinking .thinking-text {
  margin-top: 0.3rem;
  color: #555;
  white-space: pre-wrap;
}

/* Tool events */
.event-tool {
  border-left-color: #0288d1;
  background: #f0f7ff;
}

.event-tool .event-label {
  font-weight: 600;
  color: #0288d1;
  font-size: 0.75rem;
}

.event-tool .tool-name {
  font-weight: 600;
  color: #01579b;
}

.event-tool .tool-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0288d1;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.5rem;
}

.event-tool .tool-toggle:hover {
  background: #e1f0ff;
}

.event-tool .tool-toggle:active {
  background: #c8e1f7;
}

.event-tool .tool-toggle:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 1px;
}

.event-tool .tool-details {
  margin-top: 0.4rem;
}

.event-tool .tool-details pre {
  background: #e8f0f8;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 0.3rem 0;
  max-height: 300px;
  overflow-y: auto;
}

.event-tool .tool-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  margin-top: 0.4rem;
}

.event-tool .tool-incomplete {
  font-style: italic;
  color: #999;
  font-size: 0.82rem;
}

.event-tool .tool-incomplete-badge {
  font-size: 0.72rem;
  color: #e65100;
  font-style: italic;
  margin-left: 0.4rem;
}

/* Error events */
.event-error {
  border-left-color: #d32f2f;
  background: #fff5f5;
}

.event-error .event-label {
  font-weight: 600;
  color: #d32f2f;
  font-size: 0.75rem;
}

.event-error .error-message {
  font-weight: 500;
  color: #c62828;
}

.event-error .error-trace {
  margin-top: 0.3rem;
}

.event-error .error-trace pre {
  background: #fee;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
}

/* Info events */
.event-info {
  border-left-color: #bbb;
  color: #888;
  font-size: 0.82rem;
  font-style: italic;
}

/* Finish event */
.event-finish {
  border-left-color: #388e3c;
  background: #f0faf0;
}

.event-finish .event-label {
  font-weight: 600;
  color: #388e3c;
  font-size: 0.75rem;
}

.event-finish .finish-result {
  margin-top: 0.3rem;
  line-height: 1.6;
}

.event-finish .finish-empty {
  color: #9e9e9e;
  font-style: italic;
  font-size: 0.85rem;
}

.event-finish .finish-result pre {
  background: #e8f5e9;
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.8rem;
}

.event-finish .finish-result code {
  background: #e0f0e0;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.event-finish .finish-result pre code {
  background: none;
  padding: 0;
}

/* Flow events (talent_updated, continue) */
.event-flow {
  border-left-color: #f9a825;
  background: #fffde7;
  font-size: 0.82rem;
  color: #666;
}

.event-flow .flow-label {
  font-weight: 500;
  color: #f57f17;
}

/* ============================================================================
   Preview Modal
   ============================================================================ */
.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modals, 200);
}

.modal-backdrop.show {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--facet-border, #e5e0db);
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: #333;
}

.modal-close:active {
  color: #111;
}

.modal-close:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
  border-radius: 4px;
}

.modal-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.modal-body pre {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================================
   Empty States
   ============================================================================ */
.empty-state {
  text-align: center;
  color: #666;
  padding: calc(30vh - 2rem) 1rem 2rem;
  min-height: calc(100vh - 300px);
  box-sizing: border-box;
}

.empty-state-icon {
  font-size: 2.5rem;
  margin: 0 auto 0.75rem;
  opacity: 0.5;
  width: 72px;
  height: 72px;
  line-height: 72px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 50%;
}

.empty-state-text {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.empty-state-hint {
  font-size: 0.85rem;
  color: #aaa;
}

/* ============================================================================
   Loading
   ============================================================================ */
.loading {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid #e0e0e0;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.updated-banner {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #5d4037;
}

.updated-banner-stale {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ffe082;
  font-size: 0.9em;
  color: #5d4037;
}

.updated-banner-unknown {
  color: #5d4037;
}

.updated-banner-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.updated-banner a {
  color: #e65100;
  text-decoration: none;
  font-weight: 500;
}

.updated-banner a:hover {
  text-decoration: underline;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-top-color: #007bff;
    opacity: 0.7;
  }
}

.agent-card:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}

.runs-table tbody tr:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: -2px;
}

/* Responsive: tablet */
@media (max-width: 768px) {
  .col-model, .col-provider, .col-output, .col-prompt {
    display: none;
  }
  .runs-table {
    font-size: 0.85rem;
  }
  #list-view {
    overflow-x: auto;
  }
}

/* Responsive: mobile */
@media (max-width: 480px) {
  .col-runtime, .col-facet {
    display: none;
  }
  .runs-table {
    font-size: 0.8rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Identity Header */
.sol-identity {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem 0;
}

.sol-identity-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--card-bg, #faf9f7);
  border: 1px solid var(--facet-border, #e5e0db);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary, #6b6560);
}

.sol-identity-card .identity-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #2c2825);
}

.sol-identity-card .identity-status {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--facet-border, #e5e0db);
}

</style>

<div class="sol-identity" id="sol-identity">
  <div class="sol-identity-card">
    <div>
      <span class="identity-name" id="identity-name">...</span>
      <span class="identity-status" id="identity-status"></span>
    </div>
    <div style="color: var(--text-secondary, #6b6560)">
      <span id="identity-owner"></span>
    </div>
  </div>
</div>

<div class="agents-content">
  <h2 class="sr-only">talent runs</h2>
  <!-- Loading state -->
  <div id="loading-view" class="loading" role="status" aria-live="polite">
    <div class="spinner" aria-hidden="true"></div>
    <div>loading talents...</div>
  </div>

  <div id="agents-status" class="sr-only" role="status" aria-live="polite"></div>

  <!-- Card Grid View -->
  <div id="grid-view" style="display: none;">
    <div id="updated-banner" class="updated-banner" style="display: none;"></div>
    <div id="day-summary" class="day-summary" style="display: none;"></div>
    <div id="agent-groups"></div>
    <div id="empty-state" class="empty-state" style="display: none;">
      <div class="empty-state-icon">🤖</div>
      <div class="empty-state-text">No talent runs on this day</div>
      <div class="empty-state-hint">talent runs will appear here when they complete</div>
    </div>
  </div>

  <!-- Run List View -->
  <div id="list-view" style="display: none;">
    <div class="view-header">
      <button class="back-btn" onclick="showGridView()">
        <span>←</span> Back
      </button>
      <h2 class="view-title" id="list-view-title"></h2>
      <button class="preview-btn" id="preview-btn" onclick="showPreview()">
        View Prompt
      </button>
    </div>
    <div class="run-list-header">
      <span id="list-view-count"></span>
    </div>
    <table class="runs-table">
      <thead>
        <tr>
          <th class="col-status"></th>
          <th class="col-time">time</th>
          <th class="col-model">model</th>
          <th class="col-provider">provider</th>
          <th class="col-runtime">runtime</th>
          <th class="col-activity" title="thinking events">💭</th>
          <th class="col-activity" title="tool calls">🔧</th>
          <th class="col-activity" title="cost">💰</th>
          <th class="col-facet">facet</th>
          <th class="col-output">output</th>
          <th class="col-prompt">prompt</th>
        </tr>
      </thead>
      <tbody id="runs-tbody"></tbody>
    </table>
  </div>

  <!-- Run Detail View -->
  <div id="run-detail-view" style="display: none;">
    <div class="run-detail-breadcrumb">
      <a class="crumb-link" id="crumb-agents" href="#" onclick="event.preventDefault(); showGridView()">talents</a>
      <span class="crumb-sep">/</span>
      <a class="crumb-link" id="crumb-agent" href="#">talent name</a>
      <span class="crumb-sep">/</span>
      <span class="crumb-current" id="crumb-run">Run 09:41</span>
    </div>
    <div id="run-detail-header-mount"></div>
    <div id="run-detail-tabs" class="rd-tabs" role="tablist" aria-label="run detail tabs">
      <button type="button" class="rd-tab active" data-tab="log" id="tab-log" role="tab" aria-selected="true" aria-controls="run-detail-log-pane" tabindex="0">run log</button>
      <button type="button" class="rd-tab" data-tab="output" id="tab-output" role="tab" aria-selected="false" aria-controls="run-detail-output-pane" tabindex="-1" style="display: none;">output</button>
    </div>
    <div id="run-detail-panel" class="rd-panel">
      <div id="run-detail-log-pane" class="rd-tab-pane active" role="tabpanel" aria-labelledby="tab-log"></div>
      <div id="run-detail-output-pane" class="rd-tab-pane" role="tabpanel" aria-labelledby="tab-output"></div>
    </div>
  </div>
</div>

<!-- Preview Modal -->
<div id="preview-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="preview-modal-title">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="preview-modal-title">talent prompt</h3>
      <button class="modal-close" onclick="hidePreview()">&times;</button>
    </div>
    <div class="modal-body">
      <pre id="preview-modal-content"></pre>
    </div>
  </div>
</div>

<script>
(function() {
  // State
  let currentDay = null;
  let currentName = null;
  let currentRunId = null;
  let cachedRunDetail = null;
  let runOutputLoaded = false;
  let runOutputLoading = false;
  let allRuns = [];
  let agentsMeta = {};
  let facetsMeta = {};
  let previousPreviewFocus = null;
  let previewFocusTrapHandler = null;

  // Get current day from URL path
  function getDayFromUrl() {
    const path = window.location.pathname;
    const match = path.match(/\/app\/sol\/(\d{8})$/);
    return match ? match[1] : null;
  }

  function loadIdentity() {
    window.apiJson('/app/sol/api/identity')
      .then(data => {
        const agent = data.agent || {};
        const identity = data.identity || {};

        document.getElementById('identity-name').textContent = agent.name || 'sol';
        const statusEl = document.getElementById('identity-status');
        statusEl.textContent = agent.name_status || 'default';

        const ownerEl = document.getElementById('identity-owner');
        if (identity.name) {
          ownerEl.textContent = 'owner: ' + identity.name;
        }
      })
      .catch((err) => {
        window.logError(err, { context: 'sol: loadIdentity failed' });
        document.getElementById('sol-identity').innerHTML = window.SurfaceState.error({
          heading: "Couldn't load identity",
          desc: window.CONVEY_COPY.RELOAD_HINT,
          serverMessage: err.serverMessage,
          detail: err,
        });
      });
  }

  // Format timestamp to time string
  function formatTime(ts) {
    if (!ts) return '\u2014';
    const d = new Date(ts);
    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  }

  // Format runtime
  function formatRuntime(seconds) {
    if (seconds === null || seconds === undefined) return '\u2014';
    if (seconds < 60) return `${Math.round(seconds)}s`;
    const mins = Math.floor(seconds / 60);
    const secs = Math.round(seconds % 60);
    return `${mins}m ${secs}s`;
  }

  // Truncate text for display
  function truncate(text, maxLen = 80) {
    if (!text) return '\u2014';
    const clean = text.replace(/\s+/g, ' ').trim();
    if (clean.length <= maxLen) return clean;
    return clean.substring(0, maxLen) + '...';
  }

  // Format cost in USD with exact value in title
  function formatCost(costUSD) {
    if (costUSD === null || costUSD === undefined) {
      return { text: '\u2014', title: '' };
    }
    const exactUSD = '$' + costUSD.toFixed(4);
    if (costUSD > 0 && costUSD < 0.01) {
      return { text: '<$0.01', title: exactUSD };
    }
    return { text: '$' + costUSD.toFixed(2), title: exactUSD };
  }

  // Shorten model name for display
  function formatModel(model) {
    if (!model) return '\u2014';
    // Strip common provider prefixes and date suffixes
    return model
      .replace(/^(models\/|accounts\/[^/]+\/models\/)/, '')
      .replace(/-\d{8}$/, '');
  }

  function formatAgentDisplayName(name) {
    if (!name) return '\u2014';
    const meta = agentsMeta[name];
    if (meta && meta.title) return meta.title;
    return name.charAt(0).toUpperCase() + name.slice(1);
  }

  // =========================================================================
  // Grouping & Aggregation (moved from server)
  // =========================================================================

  function groupRunsByAgent(runs) {
    const groups = {};

    for (const run of runs) {
      const name = run.name;
      if (!groups[name]) {
        const meta = agentsMeta[name] || {};
        groups[name] = {
          name: name,
          title: meta.title || name,
          description: meta.description || null,
          color: meta.color || '#6c757d',
          source: meta.source || 'system',
          app: meta.app || null,
          schedule: meta.schedule || null,
          type: meta.type || null,
          multi_facet: meta.multi_facet || false,
          run_count: 0,
          failed_count: 0,
          thinking_count: 0,
          tool_count: 0,
          total_cost: 0.0,
          facets: new Set(),
        };
      }

      const g = groups[name];
      g.run_count++;
      if (run.failed) g.failed_count++;
      g.thinking_count += (run.thinking_count || 0);
      g.tool_count += (run.tool_count || 0);
      if (run.cost != null) g.total_cost += run.cost;
      if (run.facet) g.facets.add(run.facet);
    }

    return groups;
  }

  function organizeGroups(groups) {
    const systemGroups = [];
    const appGroups = {};

    for (const group of Object.values(groups)) {
      if (group.source === 'system') {
        systemGroups.push(group);
      } else {
        const appName = group.app || 'unknown';
        if (!appGroups[appName]) appGroups[appName] = [];
        appGroups[appName].push(group);
      }
    }

    // Sort alphabetically by title
    const sortByTitle = (a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase());
    systemGroups.sort(sortByTitle);
    for (const appName of Object.keys(appGroups)) {
      appGroups[appName].sort(sortByTitle);
    }

    return { system: systemGroups, apps: appGroups };
  }

  // =========================================================================
  // Data Loading
  // =========================================================================

  function hideAllViews() {
    document.getElementById('loading-view').style.display = 'none';
    document.getElementById('grid-view').style.display = 'none';
    document.getElementById('list-view').style.display = 'none';
    document.getElementById('run-detail-view').style.display = 'none';
  }

  function loadUpdatedBanner() {
    const banner = document.getElementById('updated-banner');
    if (!banner) return;

    const clearIndicators = () => {
      banner.querySelectorAll('.updated-banner-stale, .updated-banner-unknown').forEach(el => el.remove());
    };
    const hasPendingContent = () => banner.style.display !== 'none' && !!banner.querySelector('.updated-banner-title');

    clearIndicators();

    const now = new Date();
    const today = String(now.getFullYear()) + String(now.getMonth() + 1).padStart(2, '0') + String(now.getDate()).padStart(2, '0');
    if (currentDay !== today || window.selectedFacet) {
      banner.style.display = 'none';
      return;
    }
    window.apiJson('/app/sol/api/updated-days')
      .then(days => {
        clearIndicators();
        if (!Array.isArray(days) || !days.length) {
          banner.innerHTML = '';
          banner.style.display = 'none';
          return;
        }
        const links = days.map(d => {
          const label = d.slice(0, 4) + '-' + d.slice(4, 6) + '-' + d.slice(6);
          return `<a href="${d}">${label}</a>`;
        }).join(', ');
        banner.innerHTML = `<div class="updated-banner-title">days with pending reprocessing</div>${links}`;
        banner.style.display = 'block';
      })
      .catch(err => {
        window.logError(err, { context: 'sol-updated-days' });
        if (hasPendingContent()) {
          if (!banner.querySelector('.updated-banner-stale')) {
            const stale = document.createElement('div');
            stale.className = 'updated-banner-stale';
            stale.textContent = 'status check failed — ' + window.CONVEY_COPY.RELOAD_HINT;
            banner.appendChild(stale);
          }
          return;
        }

        clearIndicators();
        banner.innerHTML = '';
        const unknown = document.createElement('div');
        unknown.className = 'updated-banner-unknown';
        unknown.textContent = 'status check failed; unknown if pending.';
        banner.appendChild(unknown);
        banner.style.display = 'block';
      });
  }

  async function loadTalents() {
    currentDay = getDayFromUrl();
    if (!currentDay) return;

    hideAllViews();
    document.getElementById('loading-view').style.display = 'block';
    document.getElementById('agents-status').textContent = '';

    try {
      const response = await fetch(`api/talents/${currentDay}`);
      const data = await response.json();

      allRuns = data.uses || [];
      agentsMeta = data.talents || {};
      facetsMeta = data.facets || {};

      renderGridView();
      document.getElementById('agents-status').textContent =
        allRuns.length + ' talent run' + (allRuns.length !== 1 ? 's' : '') + ' loaded';

      // Restore hash-based view after data load
      if (location.hash) {
        handleHashChange();
      }
    } catch (error) {
      console.error('Error loading talents:', error);
      document.getElementById('loading-view').innerHTML =
        '<div class="empty-state" aria-live="polite">' +
          '<div class="empty-state-icon">⚠️</div>' +
          '<div class="empty-state-text">unable to load talents</div>' +
          '<div class="empty-state-hint">the server may be temporarily unavailable. check your connection and try again.</div>' +
          '<button class="back-btn" onclick="loadTalents()" style="margin-top: 1rem;">try again</button>' +
        '</div>';
    }
  }

  // =========================================================================
  // Grid View
  // =========================================================================

  function renderGridView() {
    hideAllViews();
    document.getElementById('grid-view').style.display = 'block';

    const container = document.getElementById('agent-groups');
    container.innerHTML = '';

    if (allRuns.length === 0) {
      document.getElementById('day-summary').style.display = 'none';
      document.getElementById('empty-state').style.display = 'block';
      return;
    }

    document.getElementById('empty-state').style.display = 'none';

    // Group and organize
    const groups = groupRunsByAgent(allRuns);
    const organized = organizeGroups(groups);

    // Render summary bar
    renderDaySummary(allRuns);

    // Render system agents
    if (organized.system.length > 0) {
      container.appendChild(renderSection('system talents', organized.system));
    }

    // Render app agent sections
    const appNames = Object.keys(organized.apps).sort();
    for (const appName of appNames) {
      const title = appName;
      container.appendChild(renderSection(title, organized.apps[appName]));
    }
  }

  function renderDaySummary(runs) {
    const summary = document.getElementById('day-summary');
    const totalRuns = runs.length;
    const failedRuns = runs.filter(r => r.failed).length;
    let totalCost = 0;
    for (const r of runs) {
      if (r.cost != null) totalCost += r.cost;
    }

    const parts = [];
    parts.push(`<span class="summary-item">${totalRuns} run${totalRuns !== 1 ? 's' : ''}</span>`);
    if (failedRuns > 0) {
      parts.push(`<span class="summary-item summary-failed">${failedRuns} failed</span>`);
    }
    if (totalCost > 0) {
      const costInfo = formatCost(totalCost);
      parts.push(`<span class="summary-item" title="${costInfo.title}">💰 ${costInfo.text}</span>`);
    }

    summary.innerHTML = parts.join('');
    summary.style.display = totalRuns > 0 ? 'flex' : 'none';
  }

  // Render a section with cards
  function renderSection(title, agents) {
    const section = document.createElement('div');
    section.className = 'agent-section';

    const titleEl = document.createElement('h3');
    titleEl.className = 'section-title';
    titleEl.textContent = title;
    section.appendChild(titleEl);

    const grid = document.createElement('div');
    grid.className = 'agent-cards';

    for (const agent of agents) {
      grid.appendChild(renderCard(agent));
    }

    section.appendChild(grid);
    return section;
  }

  // Render an agent card
  function renderCard(agent) {
    const card = document.createElement('div');
    card.className = 'agent-card';
    card.style.borderLeftColor = agent.color;
    card.onclick = () => showRunList(agent.name);
    card.setAttribute('role', 'button');
    card.setAttribute('tabindex', '0');
    card.setAttribute('aria-label', agent.title);
    card.addEventListener('keydown', e => {
      if (e.key !== 'Enter' && e.key !== ' ') return;
      e.preventDefault();
      showRunList(agent.name);
    });

    // Header with title and badges
    const header = document.createElement('div');
    header.className = 'agent-card-header';

    const title = document.createElement('h4');
    title.className = 'agent-card-title';
    title.textContent = agent.title;
    header.appendChild(title);

    const badges = document.createElement('div');
    badges.className = 'agent-card-badges';

    const successCount = agent.run_count - agent.failed_count;
    if (successCount > 0) {
      const successBadge = document.createElement('span');
      successBadge.className = 'badge badge-success';
      successBadge.textContent = '✓ ' + successCount;
      badges.appendChild(successBadge);
    }

    if (agent.failed_count > 0) {
      const failBadge = document.createElement('span');
      failBadge.className = 'badge badge-failed';
      failBadge.textContent = '✗ ' + agent.failed_count;
      badges.appendChild(failBadge);
    }

    header.appendChild(badges);
    card.appendChild(header);

    // Description
    if (agent.description) {
      const desc = document.createElement('p');
      desc.className = 'agent-card-description';
      desc.textContent = agent.description;
      desc.title = agent.description;
      card.appendChild(desc);
    }

    // Capability badges
    const caps = [];
    if (agent.schedule) caps.push(agent.schedule);
    if (agent.type === 'cogitate') caps.push('tools');
    if (agent.type === 'generate') caps.push('output');
    if (agent.multi_facet) caps.push('per-facet');

    if (caps.length > 0) {
      const capsRow = document.createElement('div');
      capsRow.className = 'agent-card-caps';
      for (const cap of caps) {
        const pill = document.createElement('span');
        pill.className = 'cap-badge';
        pill.textContent = cap;
        capsRow.appendChild(pill);
      }
      card.appendChild(capsRow);
    }

    // Activity row: counts on left, facet dots on right
    const hasActivity = agent.thinking_count > 0 || agent.tool_count > 0 || agent.total_cost > 0;
    const facetNames = Array.from(agent.facets);
    const hasFacetDots = facetNames.length > 0;

    if (hasActivity || hasFacetDots) {
      const activity = document.createElement('div');
      activity.className = 'agent-card-activity';

      const counts = document.createElement('div');
      counts.className = 'activity-counts';

      if (agent.thinking_count > 0) {
        const thinking = document.createElement('span');
        thinking.className = 'activity-item';
        thinking.innerHTML = `💭 ${agent.thinking_count}`;
        thinking.title = `${agent.thinking_count} thinking events`;
        counts.appendChild(thinking);
      }

      if (agent.tool_count > 0) {
        const tools = document.createElement('span');
        tools.className = 'activity-item';
        tools.innerHTML = `🔧 ${agent.tool_count}`;
        tools.title = `${agent.tool_count} tool calls`;
        counts.appendChild(tools);
      }

      if (agent.total_cost > 0) {
        const costInfo = formatCost(agent.total_cost);
        const cost = document.createElement('span');
        cost.className = 'activity-item';
        cost.innerHTML = `💰 ${costInfo.text}`;
        cost.title = costInfo.title;
        counts.appendChild(cost);
      }

      activity.appendChild(counts);

      if (hasFacetDots) {
        const dots = document.createElement('div');
        dots.className = 'facet-dots';

        for (const facetName of facetNames) {
          const facet = facetsMeta[facetName];
          const dot = document.createElement('span');
          dot.className = 'facet-dot';
          dot.style.backgroundColor = (facet && facet.color) || '#999';
          const label = (facet && facet.title) || facetName;
          dot.setAttribute('aria-label', label);
          dot.style.fontSize = '7px';
          dot.style.color = 'white';
          dot.style.fontWeight = 'bold';
          dot.style.lineHeight = '10px';
          dot.style.textAlign = 'center';
          dot.appendChild(document.createTextNode(label.charAt(0).toUpperCase()));
          dots.appendChild(dot);
        }

        activity.appendChild(dots);
      }

      card.appendChild(activity);
    }

    return card;
  }

  // =========================================================================
  // Run List View
  // =========================================================================

  function showRunList(name) {
    currentName = name;
    currentRunId = null;
    cachedRunDetail = null;
    runOutputLoaded = false;
    runOutputLoading = false;

    // Update hash without re-triggering if already correct
    const encodedName = encodeURIComponent(name);
    if (location.hash.slice(1) !== encodedName) {
      location.hash = encodedName;
      return; // hashchange will call us back
    }

    hideAllViews();
    document.getElementById('list-view').style.display = 'block';

    // Filter runs client-side
    const runs = allRuns.filter(r => r.name === name);
    const meta = agentsMeta[name] || {};
    const title = meta.title || name;
    const failedCount = runs.filter(r => r.failed).length;

    document.getElementById('list-view-title').textContent = title;
    document.getElementById('list-view-count').textContent =
      `${runs.length} run${runs.length !== 1 ? 's' : ''}` +
      (failedCount > 0 ? ` (${failedCount} failed)` : '');

    renderRunList(runs);
  }

  // Render the run list table
  function renderRunList(runs) {
    const tbody = document.getElementById('runs-tbody');
    tbody.innerHTML = '';

    if (runs.length === 0) {
      tbody.innerHTML = '<tr><td colspan="11" class="run-loading">No runs found</td></tr>';
      return;
    }

    for (const run of runs) {
      const row = document.createElement('tr');
      row.dataset.runId = run.id;
      row.onclick = () => showRunDetail(run.id, run.name);
      row.setAttribute('tabindex', '0');
      row.addEventListener('keydown', e => {
        if (e.key === 'Enter') {
          showRunDetail(run.id, run.name);
        } else if (e.key === 'ArrowDown') {
          e.preventDefault();
          const next = row.nextElementSibling;
          if (next) next.focus();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          const prev = row.previousElementSibling;
          if (prev) prev.focus();
        } else if (e.key === 'Home') {
          e.preventDefault();
          const tbody = row.closest('tbody');
          if (tbody && tbody.firstElementChild) tbody.firstElementChild.focus();
        } else if (e.key === 'End') {
          e.preventDefault();
          const tbody = row.closest('tbody');
          if (tbody && tbody.lastElementChild) tbody.lastElementChild.focus();
        }
      });

      // Status
      const statusCell = document.createElement('td');
      statusCell.className = 'col-status';
      const statusIcon = document.createElement('span');
      statusIcon.className = 'status-icon';
      if (run.status === 'running') {
        statusIcon.className += ' status-running';
        statusIcon.textContent = '\u23f3';
        statusIcon.title = 'Running';
      } else if (run.failed) {
        statusIcon.className += ' status-failed';
        statusIcon.textContent = '\u2717';
        statusIcon.title = 'Failed';
      } else {
        statusIcon.className += ' status-ok';
        statusIcon.textContent = '\u2713';
        statusIcon.title = 'Completed';
      }
      statusCell.appendChild(statusIcon);
      row.appendChild(statusCell);

      // Time
      const timeCell = document.createElement('td');
      timeCell.className = 'col-time';
      timeCell.textContent = formatTime(run.start);
      row.appendChild(timeCell);

      // Model
      const modelCell = document.createElement('td');
      modelCell.className = 'col-model';
      const modelSpan = document.createElement('span');
      modelSpan.className = 'model-name';
      modelSpan.textContent = formatModel(run.model);
      modelSpan.title = run.model || '';
      modelCell.appendChild(modelSpan);
      row.appendChild(modelCell);

      // Provider
      const providerCell = document.createElement('td');
      providerCell.className = 'col-provider';
      const providerSpan = document.createElement('span');
      providerSpan.className = 'provider-name';
      providerSpan.textContent = run.provider || '\u2014';
      providerCell.appendChild(providerSpan);
      row.appendChild(providerCell);

      // Runtime
      const runtimeCell = document.createElement('td');
      runtimeCell.className = 'col-runtime';
      runtimeCell.textContent = formatRuntime(run.runtime_seconds);
      row.appendChild(runtimeCell);

      // Thinking count
      const thinkingCell = document.createElement('td');
      thinkingCell.className = 'col-activity';
      thinkingCell.textContent = run.thinking_count || 0;
      row.appendChild(thinkingCell);

      // Tool count
      const toolCell = document.createElement('td');
      toolCell.className = 'col-activity';
      toolCell.textContent = run.tool_count || 0;
      row.appendChild(toolCell);

      // Cost
      const costCell = document.createElement('td');
      costCell.className = 'col-activity';
      const costInfo = formatCost(run.cost);
      costCell.textContent = costInfo.text;
      if (costInfo.title) costCell.title = costInfo.title;
      row.appendChild(costCell);

      // Facet
      const facetCell = document.createElement('td');
      facetCell.className = 'col-facet';
      if (run.facet) {
        const facet = facetsMeta[run.facet];
        const tag = document.createElement('span');
        tag.className = 'facet-tag';
        if (facet && facet.color) {
          const dot = document.createElement('span');
          dot.className = 'facet-dot';
          dot.style.backgroundColor = facet.color;
          dot.setAttribute('aria-label', facet.title || run.facet);
          tag.appendChild(dot);
        }
        tag.appendChild(document.createTextNode((facet && facet.title) || run.facet));
        facetCell.appendChild(tag);
      } else {
        facetCell.textContent = '\u2014';
      }
      row.appendChild(facetCell);

      // Output file
      const outputCell = document.createElement('td');
      outputCell.className = 'col-output';
      if (run.output_file) {
        outputCell.textContent = run.output_file.split('/').pop();
        outputCell.title = run.output_file;
      } else {
        outputCell.textContent = '\u2014';
      }
      row.appendChild(outputCell);

      // Prompt + error preview
      const promptCell = document.createElement('td');
      promptCell.className = 'col-prompt';
      const promptSpan = document.createElement('span');
      promptSpan.className = 'prompt-snippet';
      promptSpan.textContent = truncate(run.prompt);
      promptSpan.title = run.prompt || '';
      promptCell.appendChild(promptSpan);

      if (run.failed && run.error_message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-preview';
        errorDiv.textContent = run.error_message;
        errorDiv.title = run.error_message;
        promptCell.appendChild(errorDiv);
      }

      row.appendChild(promptCell);

      tbody.appendChild(row);
    }
  }

  async function showRunDetail(runId, agentName) {
    currentName = agentName;
    currentRunId = runId;
    cachedRunDetail = null;
    runOutputLoaded = false;
    runOutputLoading = false;

    const targetHash = `${encodeURIComponent(agentName)}/${encodeURIComponent(runId)}`;
    if (location.hash.slice(1) !== targetHash) {
      location.hash = targetHash;
      return;
    }

    hideAllViews();
    document.getElementById('run-detail-view').style.display = 'block';

    const crumbAgent = document.getElementById('crumb-agent');
    crumbAgent.textContent = formatAgentDisplayName(agentName);
    crumbAgent.onclick = (e) => {
      e.preventDefault()
      showRunList(agentName)
    };
    document.getElementById('crumb-run').textContent = 'run ...';

    document.getElementById('run-detail-header-mount').innerHTML =
      '<div class="run-loading"><div class="spinner"></div><div>Loading run details...</div></div>';
    document.getElementById('run-detail-log-pane').innerHTML =
      '<div class="run-loading"><div class="spinner"></div><div>Loading run log...</div></div>';
    document.getElementById('run-detail-output-pane').innerHTML = '';
    document.getElementById('tab-output').style.display = 'none';
    activateRunDetailTab('log');

    try {
      const response = await fetch(`api/run/${encodeURIComponent(runId)}`);
      const data = await response.json();

      if (currentRunId !== runId) return;

	      if (response.status === 202) {
	        renderRunDetailMessage({
	          heading: 'run is still in progress',
	          desc: data.error || 'check back soon.',
	          error: false,
	        });
	        return;
	      }

	      if (data.error) {
	        renderRunDetailMessage({
	          heading: "I couldn't load that run",
	          desc: window.CONVEY_COPY?.RELOAD_HINT || 'reload to try again.',
	          retry: true,
	          retryLabel: window.CONVEY_COPY?.ACTION_TRY_AGAIN || 'Try again',
	          detail: new window.ApiError({
	            status: response.status,
	            statusText: response.statusText,
	            serverMessage: data.error,
	            url: response.url,
	            reasonCode: data.reason_code,
	            rawDetail: data.detail,
	          }),
	          onRetry: () => showRunDetail(runId, agentName),
	        });
	        return;
	      }

	      renderRunDetail(data, agentName);
	    } catch (error) {
	      if (currentRunId !== runId) return;
	      renderRunDetailMessage({
	        heading: "I couldn't load that run",
	        desc: window.CONVEY_COPY?.RELOAD_HINT || 'reload to try again.',
	        retry: true,
	        retryLabel: window.CONVEY_COPY?.ACTION_TRY_AGAIN || 'Try again',
	        detail: new window.ApiError({
	          status: 0,
	          statusText: 'Network Error',
	          serverMessage: error.message || "I couldn't reach the server.",
	          url: `api/run/${encodeURIComponent(runId)}`,
	          cause: error,
	        }),
	        onRetry: () => showRunDetail(runId, agentName),
	      });
	    }
	  }

	  function renderRunDetailMessage({ heading, desc, error = true, retry = false, retryLabel = 'Try again', detail = null, onRetry = null }) {
	    document.getElementById('run-detail-header-mount').innerHTML = '';
	    const logPane = document.getElementById('run-detail-log-pane');
	    logPane.innerHTML = '';
	    if (error) {
	      logPane.innerHTML = window.SurfaceState.error({
	        heading,
	        desc,
	        retry,
	        retryLabel,
	        detail,
	      });
	      const retryBtn = logPane.querySelector('.surface-state-retry');
	      if (retryBtn && onRetry) {
	        retryBtn.addEventListener('click', onRetry);
	      }
	    } else {
	      const msg = document.createElement('div');
	      msg.className = 'run-loading';
	      msg.setAttribute('aria-live', 'polite');
	      msg.innerHTML = `<strong>${escapeHtml(heading)}</strong>${desc ? '<div>' + escapeHtml(desc) + '</div>' : ''}`;
	      logPane.appendChild(msg);
	    }
	    document.getElementById('run-detail-output-pane').innerHTML = '';
	    document.getElementById('tab-output').style.display = 'none';
	    activateRunDetailTab('log');
	  }

  function renderRunDetail(data, agentName) {
    cachedRunDetail = data;
    runOutputLoaded = false;
    runOutputLoading = false;

    const displayName = formatAgentDisplayName(agentName);
    const crumbAgent = document.getElementById('crumb-agent');
    crumbAgent.textContent = displayName;
    crumbAgent.onclick = (e) => {
      e.preventDefault()
      showRunList(agentName)
    };
    document.getElementById('crumb-run').textContent = `Run ${formatTime(data.start)}`;

    const headerMount = document.getElementById('run-detail-header-mount');
    headerMount.innerHTML = '';
    headerMount.appendChild(renderRunDetailHeader(data));

    const logPane = document.getElementById('run-detail-log-pane');
    logPane.innerHTML = '';
    const events = Array.isArray(data.events) ? data.events : [];
    if (events.length > 0) {
      logPane.appendChild(renderEventTimeline(events));
    } else {
      const empty = document.createElement('div');
      empty.className = 'run-loading';
      empty.textContent = 'no log events for this run';
      logPane.appendChild(empty);
    }

    const outputTab = document.getElementById('tab-output');
    outputTab.style.display = data.output_file ? 'inline-flex' : 'none';
    document.getElementById('run-detail-output-pane').innerHTML = '';
    activateRunDetailTab('log');
  }

  function renderRunDetailHeader(data) {
    const card = document.createElement('div');
    card.className = 'run-detail-header-card';

    const titleRow = document.createElement('div');
    titleRow.className = 'run-detail-title-row';

    const status = document.createElement('span');
    status.className = 'run-status-badge';
    if (data.status === 'running') {
      status.classList.add('status-running');
      status.textContent = 'running';
    } else if (data.failed) {
      status.classList.add('status-failed');
      status.textContent = 'failed';
    } else {
      status.classList.add('status-completed');
      status.textContent = 'completed';
    }
    titleRow.appendChild(status);

    const title = document.createElement('h2');
    title.className = 'run-detail-title';
    title.textContent = `Run ${formatTime(data.start)}`;
    titleRow.appendChild(title);

    if (data.facet) {
      const facet = facetsMeta[data.facet];
      const tag = document.createElement('span');
      tag.className = 'facet-tag';
      if (facet && facet.color) {
        const dot = document.createElement('span');
        dot.className = 'facet-dot';
        dot.style.backgroundColor = facet.color;
        dot.setAttribute('aria-label', (facet && facet.title) || data.facet);
        tag.appendChild(dot);
      }
      tag.appendChild(document.createTextNode((facet && facet.title) || data.facet));
      titleRow.appendChild(tag);
    }

    card.appendChild(titleRow);

    const subtitle = document.createElement('div');
    subtitle.className = 'run-detail-subtitle';
    subtitle.textContent = formatAgentDisplayName(data.name || currentName);
    card.appendChild(subtitle);

    if (data.prompt) {
      const prompt = document.createElement('div');
      prompt.className = 'run-detail-prompt';
      prompt.textContent = data.prompt;
      card.appendChild(prompt);
    }

    const grid = document.createElement('div');
    grid.className = 'run-meta-grid';

    function addMetaItem(label, value, titleText = '') {
      const item = document.createElement('div');
      item.className = 'run-meta-item';
      const labelEl = document.createElement('span');
      labelEl.className = 'meta-label';
      labelEl.textContent = label;
      const valueEl = document.createElement('span');
      valueEl.className = 'meta-value';
      valueEl.textContent = value;
      if (titleText) valueEl.title = titleText;
      item.appendChild(labelEl);
      item.appendChild(valueEl);
      grid.appendChild(item);
    }

    addMetaItem('started', formatTimestamp(data.start) || '\u2014');
    addMetaItem('runtime', formatRuntime(data.runtime_seconds));
    addMetaItem('model', formatModel(data.model), data.model || '');
    addMetaItem('provider', data.provider || '\u2014');
    addMetaItem('thinking', String(data.thinking_count || 0));
    addMetaItem('tools', String(data.tool_count || 0));
    const costInfo = formatCost(data.cost);
    addMetaItem('cost', costInfo.text, costInfo.title);

    card.appendChild(grid);
    return card;
  }

  function activateRunDetailTab(tabId) {
    const tabs = document.querySelectorAll('#run-detail-tabs .rd-tab');
    for (const tab of tabs) {
      tab.classList.toggle('active', tab.dataset.tab === tabId);
      tab.setAttribute('aria-selected', tab.dataset.tab === tabId ? 'true' : 'false');
      tab.setAttribute('tabindex', tab.dataset.tab === tabId ? '0' : '-1');
    }

    document.getElementById('run-detail-log-pane').classList.toggle('active', tabId === 'log');
    document.getElementById('run-detail-output-pane').classList.toggle('active', tabId === 'output');

    if (tabId === 'output') {
      loadRunOutput();
    }
  }

  async function loadRunOutput() {
    if (
      !cachedRunDetail ||
      !cachedRunDetail.day ||
      !cachedRunDetail.output_file ||
      runOutputLoaded ||
      runOutputLoading
    ) {
      return;
    }

    runOutputLoading = true;
    const pane = document.getElementById('run-detail-output-pane');
    pane.innerHTML = '<div class="run-loading"><div class="spinner"></div><div>Loading output...</div></div>';

    const encodedFilename = cachedRunDetail.output_file
      .split('/')
      .map(part => encodeURIComponent(part))
      .join('/');

    try {
      const response = await fetch(`api/output/${cachedRunDetail.day}/${encodedFilename}`);
	      const data = await response.json();

	      if (data.error) {
	        renderOutputError(pane, {
	          status: response.status,
	          statusText: response.statusText,
	          serverMessage: data.error,
	          url: response.url,
	          reasonCode: data.reason_code,
	          rawDetail: data.detail,
	        });
	        return;
	      }

      const container = document.createElement('div');
      container.className = 'run-output-content';

      if (data.format === 'md') {
        const markdown = document.createElement('div');
        markdown.className = 'rendered-markdown';
        markdown.innerHTML = window.AppServices.renderMarkdown(data.content);
        container.appendChild(markdown);
      } else {
        const pre = document.createElement('pre');
        if (data.format === 'json') {
          try {
            pre.textContent = JSON.stringify(JSON.parse(data.content), null, 2);
          } catch (e) {
            pre.textContent = data.content;
          }
        } else {
          pre.textContent = data.content;
        }
        container.appendChild(pre);
      }

      pane.innerHTML = '';
      pane.appendChild(container);
      runOutputLoaded = true;
	    } catch (error) {
	      renderOutputError(pane, {
	        status: 0,
	        statusText: 'Network Error',
	        serverMessage: error.message || "I couldn't reach the server.",
	        url: `api/output/${cachedRunDetail.day}/${encodedFilename}`,
	        cause: error,
	      });
	    } finally {
	      runOutputLoading = false;
	    }
	  }

	  function renderOutputError(pane, detailFields) {
	    const detail = new window.ApiError(detailFields);
	    pane.innerHTML = window.SurfaceState.error({
	      heading: "I couldn't load that output",
	      desc: window.CONVEY_COPY?.RELOAD_HINT || 'reload to try again.',
	      retry: true,
	      retryLabel: window.CONVEY_COPY?.ACTION_TRY_AGAIN || 'Try again',
	      detail,
	    });
	    const retryBtn = pane.querySelector('.surface-state-retry');
	    if (retryBtn) {
	      retryBtn.addEventListener('click', () => {
	        runOutputLoaded = false;
	        runOutputLoading = false;
	        loadRunOutput();
	      });
	    }
	  }

  // Format a millisecond timestamp to HH:MM:SS
  function formatTimestamp(ts) {
    if (!ts) return '';
    const d = new Date(ts);
    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  }

  const escapeHtml = (value) => window.AppServices.escapeHtml(value);

  // Render agent events as a rich interactive timeline
  function renderEventTimeline(events) {
    const timeline = document.createElement('div');
    timeline.className = 'event-timeline';

    // First pass: index tool_end events by call_id for pairing
    const toolEnds = {};
    for (const event of events) {
      if (event.event === 'tool_end' && event.call_id) {
        toolEnds[event.call_id] = event;
      }
    }

    // Second pass: render in chronological order
    for (const event of events) {
      const type = event.event;
      if (!type) continue;

      // Skip request/start events (metadata, shown in header already)
      if (type === 'request' || type === 'start') continue;

      // Skip tool_end with call_id (rendered with its tool_start)
      if (type === 'tool_end' && event.call_id && toolEnds[event.call_id]) continue;

      if (type === 'thinking') {
        timeline.appendChild(renderThinkingEvent(event));
      } else if (type === 'tool_start') {
        const endEvent = event.call_id ? toolEnds[event.call_id] : null;
        timeline.appendChild(renderToolEvent(event, endEvent || null));
      } else if (type === 'tool_end') {
        // Orphaned tool_end (no call_id or unmatched)
        timeline.appendChild(renderToolEvent(null, event));
      } else if (type === 'error') {
        timeline.appendChild(renderErrorEvent(event));
      } else if (type === 'info') {
        timeline.appendChild(renderInfoEvent(event));
      } else if (type === 'finish') {
        timeline.appendChild(renderFinishEvent(event));
      } else if (type === 'talent_updated') {
        timeline.appendChild(renderFlowEvent('Switched to talent: ' + (event.talent || 'unknown'), event.ts));
      } else if (type === 'continue') {
        timeline.appendChild(renderFlowEvent('Continued in talent: ' + (event.to || 'unknown'), event.ts));
      }
    }

    return timeline;
  }

  function renderThinkingEvent(event) {
    const block = document.createElement('div');
    block.className = 'event-block event-thinking';

    const text = event.summary || event.content || '';
    block.innerHTML =
      '<span class="event-time">' + escapeHtml(formatTimestamp(event.ts)) + '</span>' +
      '<span class="event-label">thinking</span>' +
      (text ? '<div class="thinking-text">' + escapeHtml(text) + '</div>' : '');

    return block;
  }

  function renderToolEvent(startEvent, endEvent) {
    const block = document.createElement('div');
    block.className = 'event-block event-tool';

    const toolName = (startEvent && startEvent.tool) || (endEvent && endEvent.tool) || 'unknown';
    const ts = (startEvent && startEvent.ts) || (endEvent && endEvent.ts) || 0;
    const args = (startEvent && startEvent.args) || (endEvent && endEvent.args) || null;
    const result = endEvent && endEvent.result;
    const hasDetails = args || result;
    const incomplete = startEvent && !endEvent;

    // Header line with tool name and toggle
    const headerLine = document.createElement('div');
    headerLine.innerHTML =
      '<span class="event-time">' + escapeHtml(formatTimestamp(ts)) + '</span>' +
      '<span class="event-label">tool</span> ' +
      '<span class="tool-name">' + escapeHtml(toolName) + '</span>' +
      (incomplete ? '<span class="tool-incomplete-badge">did not complete</span>' : '');

    if (hasDetails) {
      const toggle = document.createElement('button');
      toggle.className = 'tool-toggle';
      toggle.textContent = 'show';
      toggle.onclick = function(e) {
        e.stopPropagation();
        const details = block.querySelector('.tool-details');
        if (details.style.display === 'none') {
          details.style.display = 'block';
          toggle.textContent = 'hide';
        } else {
          details.style.display = 'none';
          toggle.textContent = 'show';
        }
      };
      headerLine.appendChild(toggle);
    }

    block.appendChild(headerLine);

    // Collapsible details section
    if (hasDetails || incomplete) {
      const details = document.createElement('div');
      details.className = 'tool-details';
      details.style.display = 'none';

      if (args && Object.keys(args).length > 0) {
        const argsLabel = document.createElement('div');
        argsLabel.className = 'tool-section-label';
        argsLabel.textContent = 'args';
        details.appendChild(argsLabel);
        const argsPre = document.createElement('pre');
        argsPre.textContent = JSON.stringify(args, null, 2);
        details.appendChild(argsPre);
      }

      if (result) {
        const resultLabel = document.createElement('div');
        resultLabel.className = 'tool-section-label';
        resultLabel.textContent = 'result';
        details.appendChild(resultLabel);
        const resultPre = document.createElement('pre');
        resultPre.textContent = result;
        details.appendChild(resultPre);
      }

      if (incomplete) {
        const note = document.createElement('div');
        note.className = 'tool-incomplete';
        note.textContent = 'tool call did not complete';
        details.appendChild(note);
      }

      block.appendChild(details);
    }

    return block;
  }

  function renderErrorEvent(event) {
    const block = document.createElement('div');
    block.className = 'event-block event-error';

    let html =
      '<span class="event-time">' + escapeHtml(formatTimestamp(event.ts)) + '</span>' +
      '<span class="event-label">error</span> ' +
      '<span class="error-message">' + escapeHtml(event.error || 'Unknown error') + '</span>';

    if (event.trace) {
      html += '<div class="error-trace"><pre>' + escapeHtml(event.trace) + '</pre></div>';
    }

    block.innerHTML = html;
    return block;
  }

  function renderInfoEvent(event) {
    const block = document.createElement('div');
    block.className = 'event-block event-info';
    block.innerHTML =
      '<span class="event-time">' + escapeHtml(formatTimestamp(event.ts)) + '</span>' +
      escapeHtml(event.message || '');
    return block;
  }

  function renderFinishEvent(event) {
    const block = document.createElement('div');
    block.className = 'event-block event-finish';

    const timeSpan = document.createElement('span');
    timeSpan.className = 'event-time';
    timeSpan.textContent = formatTimestamp(event.ts);
    block.appendChild(timeSpan);

    const label = document.createElement('span');
    label.className = 'event-label';
    label.textContent = 'result';
    block.appendChild(label);

    if (event.result && event.result.trim()) {
      const resultDiv = document.createElement('div');
      resultDiv.className = 'finish-result';
      resultDiv.innerHTML = window.AppServices.renderMarkdown(event.result);
      block.appendChild(resultDiv);
    } else {
      const empty = document.createElement('div');
      empty.className = 'finish-empty';
      empty.textContent = 'no output';
      block.appendChild(empty);
    }

    return block;
  }

  function renderFlowEvent(text, ts) {
    const block = document.createElement('div');
    block.className = 'event-block event-flow';
    block.innerHTML =
      '<span class="event-time">' + escapeHtml(formatTimestamp(ts)) + '</span>' +
      '<span class="flow-label">' + escapeHtml(text) + '</span>';
    return block;
  }

  // =========================================================================
  // Navigation & Preview Modal
  // =========================================================================

  window.loadTalents = loadTalents;

  window.showGridView = function() {
    currentName = null;
    currentRunId = null;
    cachedRunDetail = null;
    runOutputLoaded = false;
    runOutputLoading = false;
    if (location.hash) {
      location.hash = '';
      return;
    }
    handleHashChange();
  };

  // Hash-based routing
  window.addEventListener('hashchange', handleHashChange);

  function handleHashChange() {
    const hash = location.hash.startsWith('#') ? location.hash.slice(1) : location.hash;
    if (!hash) {
      renderGridView();
      return;
    }

    try {
      const slashIndex = hash.indexOf('/');
      if (slashIndex === -1) {
        showRunList(decodeURIComponent(hash));
        return;
      }

      const namePart = hash.slice(0, slashIndex);
      const runPart = hash.slice(slashIndex + 1);
      if (!namePart || !runPart) {
        renderGridView();
        return;
      }

      showRunDetail(decodeURIComponent(runPart), decodeURIComponent(namePart));
    } catch (_error) {
      renderGridView();
    }
  }

  document.getElementById('run-detail-tabs').addEventListener('click', function(e) {
    const tab = e.target.closest('.rd-tab');
    if (!tab) return;
    activateRunDetailTab(tab.dataset.tab);
  });

  document.getElementById('run-detail-tabs').addEventListener('keydown', function(e) {
    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
    e.preventDefault();
    const visibleTabs = Array.from(this.querySelectorAll('.rd-tab')).filter(t => t.offsetParent !== null);
    if (visibleTabs.length === 0) return;
    const currentIndex = visibleTabs.indexOf(document.activeElement);
    if (currentIndex === -1) return;
    let newIndex;
    switch (e.key) {
      case 'ArrowRight': newIndex = (currentIndex + 1) % visibleTabs.length; break;
      case 'ArrowLeft': newIndex = (currentIndex - 1 + visibleTabs.length) % visibleTabs.length; break;
      case 'Home': newIndex = 0; break;
      case 'End': newIndex = visibleTabs.length - 1; break;
    }
    visibleTabs[newIndex].focus();
    activateRunDetailTab(visibleTabs[newIndex].dataset.tab);
  });

  window.showPreview = async function() {
    if (!currentName) return;

    previousPreviewFocus = document.activeElement;

    const modal = document.getElementById('preview-modal');
    const content = document.getElementById('preview-modal-content');
    const title = document.getElementById('preview-modal-title');

    content.textContent = 'loading...';
    modal.classList.add('show');

    // Focus the close button
    const closeBtn = modal.querySelector('.modal-close');
    if (closeBtn) closeBtn.focus();

    // Install focus trap (mirrors conversation panel pattern from app.html:230-246)
    previewFocusTrapHandler = function(e) {
      if (e.key !== 'Tab') return;
      var focusable = Array.from(
        modal.querySelectorAll('button, [href], input, select, textarea, [tabindex="0"]')
      ).filter(function(el) { return el.offsetParent !== null && el.tabIndex >= 0 && !el.disabled; });
      if (focusable.length === 0) return;
      var first = focusable[0];
      var last = focusable[focusable.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    };
    document.addEventListener('keydown', previewFocusTrapHandler);

    try {
      const response = await fetch(`api/preview/${encodeURIComponent(currentName)}`);
      const data = await response.json();

      if (data.error) {
        content.textContent = `Error: ${data.error}`;
      } else {
        title.textContent = `${data.title} - Prompt`;
        content.textContent = data.full_prompt;
      }
    } catch (error) {
      content.textContent = 'error loading prompt';
    }
  };

  window.hidePreview = function() {
    document.getElementById('preview-modal').classList.remove('show');

    // Remove focus trap
    if (previewFocusTrapHandler) {
      document.removeEventListener('keydown', previewFocusTrapHandler);
      previewFocusTrapHandler = null;
    }

    // Restore focus (mirrors conversation panel pattern from app.html:273-278)
    if (previousPreviewFocus && previousPreviewFocus.isConnected) {
      previousPreviewFocus.focus();
    } else {
      document.getElementById('preview-btn')?.focus();
    }
    previousPreviewFocus = null;
  };

  // Close modal on backdrop click
  document.getElementById('preview-modal').addEventListener('click', function(e) {
    if (e.target === this) {
      hidePreview();
    }
  });

  // Close modal on Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && document.getElementById('preview-modal').classList.contains('show')) {
      hidePreview();
    }
  });

  function initSol() {
    // Listen for facet changes
    window.addEventListener('facet.switch', () => {
      loadUpdatedBanner();
      loadTalents();
    });

    // Initial load
    loadIdentity();
    loadUpdatedBanner();
    loadTalents();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSol);
  } else {
    initSol();
  }
})();
</script>