{# Speaker attribution review workspace #}

<style>
/* Speakers app styles - all classes prefixed with .spk- */

.spk-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
}

.spk-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: calc(100vh - 260px);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.spk-segments {
  background: #fff;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.spk-segments-header {
  padding: 20px 16px 12px 16px;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: #374151;
}

.spk-segments-list {
  flex: 1;
  overflow-y: auto;
}

.spk-segment {
  padding: 12px 16px;
  background-image: linear-gradient(#e5e7eb, #e5e7eb);
  background-size: calc(100% - 32px) 1px;
  background-position: center bottom;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 0.15s;
  border-left: 3px solid transparent;
}

.spk-segment:hover {
  background-color: #f9fafb;
}

.spk-segment:active {
  background-color: #f3f4f6;
}

.spk-segment.active {
  background-color: #eff6ff;
  border-left-color: #3b82f6;
}

.spk-segment-time {
  font-weight: 500;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #1f2937;
}

.spk-segment-meta {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
  margin-top: 6px;
}

.spk-segment-sources {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.spk-source-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #d1d5db;
  border-radius: 12px;
  font-size: 11px;
  color: #4b5563;
  font-weight: 500;
}

.spk-empty {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.spk-segments .surface-state {
  padding: 24px 16px;
}

.spk-segments-status,
.spk-review-status {
  margin: 12px 0;
}

.spk-segments-status:empty,
.spk-review-status:empty {
  display: none;
}

.spk-detail > .surface-state {
  flex: 1;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  margin: 20px;
  padding: 80px 24px 24px;
}

.spk-detail {
  background: #fff;
  border-radius: 0;
  border: none;
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.spk-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.spk-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.spk-source-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 12px;
}

.spk-source-tab {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: #374151;
  transition: all 0.15s;
}

.spk-source-tab:hover {
  background: #f9fafb;
}

.spk-source-tab:active:not(.active) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.spk-source-tab.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.spk-audio-player {
  margin-bottom: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.spk-audio-player audio {
  width: 100%;
}

.spk-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spk-player-controls audio {
  flex: 1;
  min-width: 0;
}

.spk-skip-back,
.spk-speed-toggle {
  padding: 4px 8px;
  background: #e5e7eb;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  color: #374151;
  transition: background 0.15s;
}

.spk-skip-back:hover,
.spk-speed-toggle:hover {
  background: #d1d5db;
}

.spk-skip-back:active,
.spk-speed-toggle:active {
  background: #9ca3af;
}

.spk-sentences {
  margin-top: 16px;
}

.spk-sentences-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.spk-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.spk-seeding-prompt {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-info, #e8f4fd);
  border: 1px solid var(--border-info, #b3d9f2);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #333);
}

.spk-filter-btn {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.spk-filter-btn:hover:not(.active) { background: #f9fafb; border-color: #9ca3af; }
.spk-filter-btn:active:not(.active) { background: #f3f4f6; border-color: #6b7280; }

.spk-filter-btn.active {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}

.spk-sentence {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  border-left: 3px solid transparent;
  align-items: start;
}

.spk-sentence:hover {
  background: #fafafa;
}

.spk-sentence.spk-playing {
  background: #eff6ff;
  border-left-color: #3b82f6;
}

.spk-sentence-time {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #6b7280;
  padding-top: 2px;
}

.spk-sentence-text {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

.spk-sentence-speaker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #4b5563;
  flex-wrap: wrap;
}

.spk-confidence-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #d1d5db;
}

.spk-confidence-high {
  background: #16a34a;
}

.spk-confidence-medium {
  background: #eab308;
}

.spk-confidence-label {
  font-size: 12px;
  color: #6b7280;
}

.spk-correction-original {
  text-decoration: line-through;
  color: #9ca3af;
}

.spk-review-state {
  color: #9ca3af;
  font-style: italic;
}

.spk-sentence-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.spk-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.spk-btn-icon {
  padding: 4px 8px;
  background: #f3f4f6;
  color: #374151;
}

.spk-btn-icon:hover {
  background: #e5e7eb;
}

.spk-btn-icon:active { background: #d1d5db; }

.spk-btn-primary {
  background: #3b82f6;
  color: #fff;
}

.spk-btn-primary:hover {
  background: #2563eb;
}

.spk-btn-primary:active { background: #1d4ed8; }
.spk-btn-primary:disabled { opacity: 0.6; cursor: wait; }

.spk-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.spk-btn-secondary:hover {
  background: #e5e7eb;
}

.spk-select-small {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  min-width: 150px;
  transition: border-color 0.15s;
}

.spk-select-small:hover { border-color: #9ca3af; }

.spk-status {
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 8px;
  transition: opacity 0.3s ease;
}

.spk-status-success {
  background: #dcfce7;
  color: #166534;
}

.spk-status-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fee2e2;
  color: #991b1b;
}

.spk-status-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 8px;
  opacity: 0.7;
}

.spk-status-dismiss:hover,
.spk-status-dismiss:focus {
  opacity: 1;
}

.spk-status-dismiss:focus-visible {
  outline: 2px solid #991b1b;
  outline-offset: 2px;
  border-radius: 2px;
}

.spk-status-info {
  background: #e8f4fd;
  border: 1px solid #b3d9f2;
  color: #1e40af;
}

.spk-speaker-count {
  display: inline-block;
  padding: 2px 8px;
  background: #dbeafe;
  border-radius: 12px;
  font-size: 11px;
  color: #1d4ed8;
  margin-left: 8px;
  font-weight: 500;
}

.spk-review-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
}

.spk-speakers {
  margin-bottom: 20px;
}

.spk-speakers-title {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
}

.spk-speaker-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.spk-speaker-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.spk-speaker-matched {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.spk-speaker-unmatched {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.spk-speaker-entity {
  font-weight: 500;
}

.spk-speaker-detected {
  font-size: 12px;
}

.spk-speaker-matched .spk-speaker-detected {
  color: #15803d;
}

.spk-speaker-unmatched .spk-speaker-detected {
  color: #6b7280;
}

.spk-owner-banner {
  display: none;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.spk-owner-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spk-owner-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e3a8a;
}

.spk-owner-copy {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

.spk-owner-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.spk-owner-sample {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: rgba(255, 255, 255, 0.8);
}

.spk-owner-sample-title {
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.spk-owner-sample-meta {
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
}

.spk-owner-sample audio {
  width: 100%;
}

.spk-owner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.spk-owner-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.spk-owner-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.spk-owner-btn-confirm {
  background: #16a34a;
  color: #fff;
}

.spk-owner-btn-confirm:not(:disabled):hover { background: #15803d; }

.spk-owner-btn-confirm:not(:disabled):active { background: #166534; }

.spk-owner-btn-reject {
  background: #fff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.spk-owner-btn-reject:not(:disabled):hover {
  background: #eff6ff;
  border-color: #60a5fa;
}

.spk-owner-btn-reject:not(:disabled):active {
  background: #dbeafe;
  border-color: #3b82f6;
}

.spk-owner-diagnostics {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.spk-owner-diagnostics-summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
}

.spk-owner-diagnostics-summary::-webkit-details-marker {
  display: none;
}

.spk-owner-diagnostics-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spk-owner-diagnostics-line {
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
}

.spk-owner-toast {
  margin-top: 6px;
}

.spk-discovery-banner {
  display: none;
  margin-bottom: 8px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.spk-discovery-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spk-discovery-title {
  font-size: 18px;
  font-weight: 600;
  color: #14532d;
}

.spk-discovery-copy {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

.spk-discovery-clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.spk-discovery-cluster {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
  background: rgba(255, 255, 255, 0.8);
  transition: opacity 0.3s ease;
}

.spk-discovery-cluster-title {
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  margin-bottom: 10px;
}

.spk-discovery-sample {
  margin-bottom: 8px;
}

.spk-discovery-sample-text {
  font-size: 12px;
  color: #475569;
  margin-bottom: 4px;
  font-style: italic;
}

.spk-discovery-sample audio {
  width: 100%;
}

.spk-discovery-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.spk-discovery-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  transition: border-color 0.15s;
}

.spk-discovery-input:not(:disabled):hover { border-color: #9ca3af; }

.spk-discovery-input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.spk-discovery-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  transition: background 0.15s;
}

.spk-discovery-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.spk-discovery-btn:not(:disabled):hover { background: #15803d; }

.spk-discovery-btn:not(:disabled):active { background: #166534; }

.spk-discovery-status {
  font-size: 12px;
  color: #166534;
  margin-top: 6px;
}

/* Semantic element resets - prevent browser defaults from changing layout */
.spk-detail-title,
.spk-speakers-title,
.spk-sentences-title,
.spk-speaker-entity {
  margin: 0;
  padding: 0;
}

/* List resets - no bullets, no margin, no padding */
.spk-segments-list,
.spk-speaker-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Focus-visible indicators */
.spk-source-tab:focus-visible,
.spk-filter-btn:focus-visible,
.spk-btn:focus-visible,
.spk-skip-back:focus-visible,
.spk-speed-toggle:focus-visible,
.spk-expand-btn:focus-visible,
.spk-load-more-btn:focus-visible,
.spk-segment:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Banner buttons need darker ring for contrast on colored backgrounds */
.spk-owner-btn:focus-visible,
.spk-discovery-btn:focus-visible,
.spk-owner-diagnostics-summary:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* Inputs and selects use :focus (browser convention - always show focus ring) */
.spk-select-small:focus,
.spk-discovery-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Progressive disclosure - collapsed detail */
.spk-detail-collapsed .spk-speakers,
.spk-detail-collapsed .spk-sentences {
  display: none;
}

.spk-detail-summary {
  padding: 8px 16px;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 12px;
}

.spk-detail-summary span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spk-expand-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  margin: 8px 0;
  transition: background 0.15s;
}

.spk-expand-btn:hover {
  background: #f9fafb;
}

.spk-expand-btn:active {
  background: #e5e7eb;
}

/* Pagination - load more */
.spk-load-more {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.spk-load-more-btn {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.spk-load-more-btn:hover {
  background: #f3f4f6;
}

.spk-load-more-btn:active {
  background: #e5e7eb;
}

.spk-load-more-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.spk-segments-count {
  font-weight: 400;
  color: #9ca3af;
  font-size: 12px;
  vertical-align: baseline;
  line-height: 1;
}

@keyframes spk-fade-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.spk-apply-btn { animation: spk-fade-in 0.15s ease; }

@keyframes spk-spin {
  to { transform: rotate(360deg); }
}
.spk-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #b3d9f2;
  border-top-color: #1e40af;
  border-radius: 50%;
  animation: spk-spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@media (max-width: 768px) {
  .spk-wrap {
    padding: 12px 16px;
  }
  .spk-layout {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }
  .spk-segments-list {
    max-height: 40vh;
  }
  .spk-detail {
    border-left: none;
    border-top: 1px solid #e5e7eb;
    padding: 16px;
  }
  .spk-discovery-clusters {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .spk-select-small {
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .spk-wrap {
    padding: 8px 12px;
  }
  .spk-segments-list {
    max-height: 35vh;
  }
  .spk-detail {
    padding: 12px;
  }
  .spk-sentence {
    grid-template-columns: 40px 1fr auto;
    gap: 8px;
  }
  .spk-discovery-clusters {
    grid-template-columns: 1fr;
  }
  .spk-owner-samples {
    grid-template-columns: 1fr;
  }
  .spk-owner-banner,
  .spk-discovery-banner {
    padding: 12px;
  }
  .spk-select-small {
    min-width: 0;
  }
  /* Font size floor - no text below 14px on mobile */
  .spk-source-badge,
  .spk-confidence-label,
  .spk-speaker-detected,
  .spk-speaker-count,
  .spk-review-badge,
  .spk-segment-meta,
  .spk-sentence-speaker,
  .spk-owner-sample-title,
  .spk-owner-sample-meta {
    font-size: 14px;
  }
  .spk-sentence-time,
  .spk-filter-btn,
  .spk-btn,
  .spk-select-small,
  .spk-status,
  .spk-discovery-sample-text,
  .spk-discovery-status,
  .spk-segments-count,
  .spk-source-tab,
  .spk-seeding-prompt,
  .spk-speaker-card,
  .spk-owner-btn,
  .spk-discovery-cluster-title,
  .spk-discovery-input,
  .spk-discovery-btn,
  .spk-detail-summary,
  .spk-expand-btn,
  .spk-load-more-btn {
    font-size: 14px;
  }
}

@media (hover: none), (pointer: coarse) {
  .spk-skip-back,
  .spk-speed-toggle {
    min-height: 44px;
    padding: 10px 12px;
  }
  .spk-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .spk-btn-icon {
    min-height: 44px;
    padding: 10px 12px;
  }
  .spk-filter-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .spk-source-tab {
    min-height: 44px;
    padding: 10px 14px;
  }
  .spk-select-small {
    min-height: 44px;
    padding: 10px 12px;
  }
  .spk-expand-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .spk-load-more-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .spk-owner-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .spk-discovery-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .spk-discovery-input {
    min-height: 44px;
    padding: 10px 12px;
  }
  .spk-status-dismiss {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
  }
}
</style>

<div class="spk-wrap">
  <div id="spkOwnerBanner" class="spk-owner-banner"></div>
  <div id="spkDiscoveryBanner" class="spk-discovery-banner" aria-live="polite"></div>
  <div class="spk-layout">
    <nav class="spk-segments" aria-label="segments">
      <h2 class="spk-segments-header">
        segments
      </h2>
      <div id="spkSegmentsStatus" class="spk-segments-status" aria-live="polite"></div>
      <ul class="spk-segments-list" id="spkSegmentList" role="listbox">
        <li class="spk-empty">loading...</li>
      </ul>
      <div class="spk-load-more" id="spkLoadMore" style="display: none;">
        <button class="spk-load-more-btn" id="spkLoadMoreBtn">load more segments</button>
      </div>
    </nav>

    <div class="spk-detail" id="spkDetail" aria-live="polite">
      <div class="surface-state surface-state--empty">
        <div class="surface-state-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"></path></svg></div>
        <h2 class="surface-state-heading">ready to review</h2>
        <p class="surface-state-desc">select a segment from the list to review speaker assignments</p>
      </div>
    </div>
  </div>
</div>

<script>
(() => {
  const escapeHtml = window.AppServices.escapeHtml;
  const emptyIcons = {
    segment: '<svg viewBox="0 0 24 24"><rect x="4" y="8" width="2" height="8" rx="1"></rect><rect x="8" y="5" width="2" height="14" rx="1"></rect><rect x="12" y="3" width="2" height="18" rx="1"></rect><rect x="16" y="6" width="2" height="12" rx="1"></rect><rect x="20" y="9" width="2" height="6" rx="1"></rect></svg>',
    cursor: '<svg viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"></path></svg>',
    people: '<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>',
    text: '<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>',
    audio: '<svg viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>'
  };

  function attachAudioErrorListeners(container) {
    container.querySelectorAll('audio').forEach(audio => {
      audio.addEventListener('error', () => {
        const msg = document.createElement('div');
        msg.className = 'spk-status spk-status-error';
        msg.setAttribute('role', 'alert');
        msg.innerHTML = 'couldn\'t load this audio<button class="spk-status-dismiss" aria-label="dismiss">&times;</button>';
        msg.querySelector('.spk-status-dismiss').addEventListener('click', (e) => {
          e.target.closest('.spk-status-error').remove();
        });
        audio.parentNode.insertBefore(msg, audio.nextSibling);
        audio.style.display = 'none';
      });
    });
  }

  function renderRefreshError(message, serverMessage) {
    const detail = serverMessage ? `<p>${escapeHtml(serverMessage)}</p>` : '';
    return `<div class="surface-state-refresh-error"><strong>${escapeHtml(message)}</strong>${detail}</div>`;
  }

  function setSegmentsStatus(message, serverMessage) {
    if (!segmentsStatus) return;
    segmentsStatus.innerHTML = message ? renderRefreshError(message, serverMessage) : '';
  }

  function setReviewStatus(message, serverMessage) {
    const reviewStatus = document.getElementById('spkReviewStatus');
    if (!reviewStatus) return;
    reviewStatus.innerHTML = message ? renderRefreshError(message, serverMessage) : '';
  }

  const METHOD_DISPLAY = {
    acoustic: 'voice match',
    structural_single_speaker: 'only speaker',
    structural_setting: 'setting match',
    owner_centroid: 'voice profile match',
    user_confirmed: 'you confirmed',
    user_corrected: 'you corrected',
    user_assigned: 'you assigned',
    user_identified: 'you identified',
    context: 'context match',
    contextual: 'context match',
  };
  const day = '{{ day }}';
  const segmentList = document.getElementById('spkSegmentList');
  const detailPanel = document.getElementById('spkDetail');
  const ownerBanner = document.getElementById('spkOwnerBanner');
  const discoveryBanner = document.getElementById('spkDiscoveryBanner');
  const segmentsStatus = document.getElementById('spkSegmentsStatus');

  let segments = [];
  let segmentTotal = 0;
  let selectedSegment = null;
  let selectedSource = null;
  let audioPlayer = null;
  let currentSentences = [];
  let reviewEntities = [];
  let hasLabels = false;
  let reviewSummary = null;
  const statusTimers = {};
  let currentFilter = 'all';
  let playingSentenceId = null;
  let detailExpanded = false;
  let ownerDetectionInFlight = false;
  const OWNER_HELP_TOAST_KEY = 'speakers-owner-help-toast';
  const OWNER_HELP_TOAST_MESSAGE = 'click on segments and tag your own statements with the assign button. solstone needs ~30 longer ones to lock in your voice.';

  checkOwnerStatus();
  loadSegments();

  window.addEventListener('hashchange', () => {
    const hash = window.location.hash.slice(1);
    if (hash && !selectSegmentByKey(hash) && segments.length < segmentTotal) {
      loadUntilFound(hash);
    }
  });

  segmentList.addEventListener('keydown', e => {
    const item = e.target.closest('.spk-segment');
    if (!item) return;

    const items = [...segmentList.querySelectorAll('.spk-segment')];
    const idx = items.indexOf(item);

    function moveFocus(target) {
      item.setAttribute('tabindex', '-1');
      target.setAttribute('tabindex', '0');
      target.focus();
      target.scrollIntoView({ block: 'nearest' });
    }

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (idx < items.length - 1) moveFocus(items[idx + 1]);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      if (idx > 0) moveFocus(items[idx - 1]);
    } else if (e.key === 'Home') {
      e.preventDefault();
      if (items.length) moveFocus(items[0]);
    } else if (e.key === 'End') {
      e.preventDefault();
      if (items.length) moveFocus(items[items.length - 1]);
    } else if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const seg = segments.find(s => s.key === item.dataset.key);
      if (seg) {
        window.location.hash = seg.key;
        selectSegment(seg);
      }
    }
  });

  function submitDiscoveryName(card) {
    const clusterId = parseInt(card.dataset.clusterId, 10);
    const input = card.querySelector('.spk-discovery-input');
    const status = card.querySelector('.spk-discovery-status');
    const btn = card.querySelector('.spk-discovery-btn');
    const name = input.value.trim();

    if (!name) {
      status.textContent = 'please enter a name.';
      return;
    }

    btn.disabled = true;
    input.disabled = true;
    status.textContent = 'identifying...';

	    window.apiJson('/app/speakers/api/discovery/identify', {
	      method: 'POST',
	      headers: { 'Content-Type': 'application/json' },
	      body: JSON.stringify({ cluster_id: clusterId, name: name }),
	    })
	      .then(data => {
	        status.textContent = `identified as ${data.entity_name} (${data.voiceprints_saved} voiceprints, ${data.segments_updated} segments updated)`;
	        card.style.opacity = '0.5';
        loadSegments();
        if (selectedSegment && selectedSource) {
          loadReview(selectedSegment, selectedSource);
        }
        setTimeout(() => {
          card.style.opacity = '0';
          setTimeout(() => {
            card.remove();
            if (!discoveryBanner.querySelector('.spk-discovery-cluster')) {
              hideDiscovery();
            }
          }, 300);
        }, 3000);
      })
	      .catch((err) => {
	        window.logError(err, { context: 'speakers: identify discovery cluster failed' });
	        status.innerHTML = window.SurfaceState.error({
	          heading: "I couldn't identify that speaker",
	          desc: window.CONVEY_COPY?.RELOAD_HINT || 'reload to try again.',
	          retry: true,
	          retryLabel: window.CONVEY_COPY?.ACTION_TRY_AGAIN || 'Try again',
	          serverMessage: err.serverMessage,
	          detail: err,
	          headingLevel: 'h4'
	        });
	        const retry = status.querySelector('.surface-state-retry');
	        if (retry) {
	          retry.addEventListener('click', () => submitDiscoveryName(card));
	        }
	        btn.disabled = false;
	        input.disabled = false;
	      });
  }

  discoveryBanner.addEventListener('submit', e => {
    e.preventDefault();
    const card = e.target.closest('.spk-discovery-cluster');
    if (!card) return;
    submitDiscoveryName(card);
  });

  function checkOwnerStatus() {
    window.apiJson('/app/speakers/api/owner/status')
      .then(data => {
        if (
          data.status === 'needs_detection'
          || data.status === 'low_quality'
          || (data.status === 'none' && data.segments_with_embeddings > 0)
        ) {
          hideDiscovery();
          renderOwnerNotReady(data);
          if (data.status === 'needs_detection' && !ownerDetectionInFlight) {
            ownerDetectionInFlight = true;
            window.apiJson('/app/speakers/api/owner/detect', { method: 'POST' })
              .then(() => {
                ownerDetectionInFlight = false;
                checkOwnerStatus();
              })
              .catch((err) => {
                ownerDetectionInFlight = false;
                renderOwnerBanner(`Couldn't analyze voice patterns — ${err.serverMessage}`);
                window.logError(err, { context: 'speakers: owner detect failed' });
              });
          }
          return;
        }

        ownerDetectionInFlight = false;
        if (data.status === 'no_cluster') {
          hideDiscovery();
          hideOwnerBanner();
          return;
        }
        if (data.status === 'candidate') {
          hideDiscovery();
          renderOwnerCandidate(data);
          return;
        }

        hideOwnerBanner();
        checkDiscovery();
      })
      .catch((err) => {
        ownerDetectionInFlight = false;
        hideDiscovery();
        renderOwnerBanner(`Couldn't load owner status — ${err.serverMessage}`);
        window.logError(err, { context: 'speakers: checkOwnerStatus failed' });
      });
  }

  function renderOwnerBanner(message) {
    ownerBanner.style.display = 'block';
    ownerBanner.innerHTML = `
      <div class="spk-owner-panel">
        <div class="spk-owner-title">Owner voiceprint</div>
        <div class="spk-owner-copy">${escapeHtml(message)}</div>
      </div>
    `;
  }

  function hideOwnerBanner() {
    ownerBanner.style.display = 'none';
    ownerBanner.innerHTML = '';
  }

  function renderOwnerCandidate(data) {
    const samples = data.samples || [];
    ownerBanner.style.display = 'block';
    ownerBanner.innerHTML = `
      <div class="spk-owner-panel">
        <div class="spk-owner-title">Is this your voice?</div>
        <div class="spk-owner-copy">
          We found a likely owner voice pattern from ${escapeHtml(data.cluster_size || 0)} voice samples. Review a few examples before confirming.
        </div>
        <div class="spk-owner-samples">
          ${samples.map((sample, index) => `
            <div class="spk-owner-sample">
              <div class="spk-owner-sample-title">sample ${index + 1}</div>
              <div class="spk-owner-sample-meta">
                ${escapeHtml(sample.day)} · ${escapeHtml(sample.stream)} · ${escapeHtml(sample.segment_key)}
              </div>
              <audio controls preload="metadata" src="${sample.audio_url}"></audio>
            </div>
          `).join('')}
        </div>
        <div class="spk-owner-actions">
          <button class="spk-owner-btn spk-owner-btn-confirm" id="spkOwnerConfirm">yes, that's me</button>
          <button class="spk-owner-btn spk-owner-btn-reject" id="spkOwnerReject">no, try again</button>
        </div>
      </div>
    `;

    document.getElementById('spkOwnerConfirm')?.addEventListener('click', () => {
      submitOwnerChoice('/app/speakers/api/owner/confirm');
    });
    document.getElementById('spkOwnerReject')?.addEventListener('click', () => {
      submitOwnerChoice('/app/speakers/api/owner/reject');
    });

    attachAudioErrorListeners(ownerBanner);
  }

  function formatOwnerMetric(value) {
    if (typeof value !== 'number' || Number.isNaN(value)) return 'n/a';
    if (Number.isInteger(value)) return String(value);
    return value.toFixed(2);
  }

  function todayDayKey() {
    const now = new Date();
    const year = String(now.getFullYear());
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const datePart = String(now.getDate()).padStart(2, '0');
    return `${year}${month}${datePart}`;
  }

  function principalEntityId() {
    const principal = reviewEntities.find(entity => entity.is_principal);
    return principal ? principal.entity_id : null;
  }

  function showOwnerGuideToast(message = OWNER_HELP_TOAST_MESSAGE, type = 'info') {
    const container = document.getElementById('spkOwnerGuideToast');
    if (!container) return;
    container.innerHTML = `<div class="spk-status spk-status-${type}">${escapeHtml(message)}</div>`;
  }

  function maybeShowOwnerGuideToast() {
    if (sessionStorage.getItem(OWNER_HELP_TOAST_KEY) !== '1') return;
    sessionStorage.removeItem(OWNER_HELP_TOAST_KEY);
    showOwnerGuideToast();
  }

  function navigateToOwnerHelp() {
    const today = todayDayKey();
    if (day !== today) {
      sessionStorage.setItem(OWNER_HELP_TOAST_KEY, '1');
      window.location.href = `/app/speakers/${today}`;
      return;
    }
    showOwnerGuideToast();
  }

  function renderOwnerNotReady(data) {
    ownerBanner.style.display = 'block';
    ownerBanner.innerHTML = `
      <div class="spk-owner-panel">
        <div class="spk-owner-title">solstone is still learning your voice</div>
        <div class="spk-owner-copy">
          we're tagging audio segments to recognize you. help solstone learn faster by tagging your own statements.
        </div>
        <div class="spk-owner-actions">
          <button class="spk-owner-btn spk-owner-btn-confirm" id="spkOwnerHelp">
            help solstone learn faster
          </button>
        </div>
        <div class="spk-owner-toast" id="spkOwnerGuideToast"></div>
        <details class="spk-owner-diagnostics">
          <summary class="spk-owner-diagnostics-summary">why not yet?</summary>
          <div class="spk-owner-diagnostics-body">
            <div class="spk-owner-diagnostics-line">source: ${escapeHtml(data.source || 'auto')}</div>
            ${data.low_quality_reason ? `
              <div class="spk-owner-diagnostics-line">
                gate: ${escapeHtml(data.low_quality_reason)} — observed ${escapeHtml(formatOwnerMetric(data.observed_value))}, threshold ${escapeHtml(formatOwnerMetric(data.threshold_value))}
              </div>
            ` : ''}
            <div class="spk-owner-diagnostics-line">Manual tags: ${escapeHtml(String(data.manual_tags_count || 0))}</div>
            <div class="spk-owner-diagnostics-line">Segments with audio: ${escapeHtml(String(data.segments_available || 0))}</div>
            <div class="spk-owner-diagnostics-line">Embeddings: ${escapeHtml(String(data.embeddings_available || 0))}</div>
            ${data.can_build_from_tags === true ? `
              <div class="spk-owner-actions">
                <button class="spk-owner-btn spk-owner-btn-reject" id="spkOwnerBuildFromTags">
                  Build from manual tags
                </button>
              </div>
            ` : ''}
          </div>
        </details>
      </div>
    `;

    document.getElementById('spkOwnerHelp')?.addEventListener('click', navigateToOwnerHelp);
    document.getElementById('spkOwnerBuildFromTags')?.addEventListener('click', event => {
      const btn = event.currentTarget;
      btn.disabled = true;
      window.apiJson('/app/speakers/api/owner/build-from-tags', { method: 'POST' })
        .then(() => {
          checkOwnerStatus();
        })
        .catch((err) => {
          btn.disabled = false;
          showOwnerGuideToast(`Couldn't build from manual tags — ${err.serverMessage}`, 'error');
          window.logError(err, { context: 'speakers: owner build from tags failed' });
        });
    });
    maybeShowOwnerGuideToast();
  }

  function submitOwnerChoice(path) {
    ownerBanner.querySelectorAll('button').forEach(btn => { btn.disabled = true; });
    window.apiJson(path, { method: 'POST' })
      .then(() => {
        checkOwnerStatus();
      })
      .catch((err) => {
        ownerBanner.querySelectorAll('button').forEach(btn => { btn.disabled = false; });
        renderOwnerBanner(err.serverMessage);
        window.logError(err, { context: 'speakers: submitOwnerChoice failed' });
      });
  }

  function checkDiscovery() {
    discoveryBanner.style.display = 'block';
    discoveryBanner.innerHTML = '<div class="spk-discovery-panel"><div class="spk-discovery-title"><span class="spk-spinner"></span> Discovering new voices…</div></div>';
    fetch('/app/speakers/api/discovery/scan', { method: 'POST' })
      .then(r => r.json())
      .then(data => {
        if (data.clusters && data.clusters.length > 0) {
          renderDiscovery(data.clusters);
        } else {
          hideDiscovery();
        }
      })
      .catch(() => {
        hideDiscovery();
      });
  }

  function renderDiscovery(clusters) {
    discoveryBanner.style.display = 'block';
    discoveryBanner.innerHTML = `
      <div class="spk-discovery-panel">
        <div class="spk-discovery-title">New speakers found</div>
        <div class="spk-discovery-copy">
          We found ${clusters.length} recurring voice pattern${clusters.length > 1 ? 's' : ''} that ${clusters.length > 1 ? "don't" : "doesn't"} match any known speaker. Listen to samples and name them.
        </div>
        <div class="spk-discovery-clusters">
          ${clusters.map(cluster => `
            <div class="spk-discovery-cluster" data-cluster-id="${cluster.cluster_id}">
              <div class="spk-discovery-cluster-title">
                Unknown speaker <span style="font-weight: 400">&middot; ${cluster.size} samples &middot; ${cluster.segment_count} segments</span>
              </div>
              ${cluster.samples.map(sample => `
                <div class="spk-discovery-sample">
                  <div class="spk-discovery-sample-text">${escapeHtml(sample.text || '(no transcript)')}</div>
                  <audio controls preload="metadata" src="${sample.audio_url}"></audio>
                </div>
              `).join('')}
              <form class="spk-discovery-form">
                <input type="text" class="spk-discovery-input" aria-label="speaker name" placeholder="enter speaker name..." />
                <button class="spk-discovery-btn">name</button>
              </form>
              <div class="spk-discovery-status"></div>
            </div>
          `).join('')}
        </div>
      </div>
    `;

    attachAudioErrorListeners(discoveryBanner);
  }

  function hideDiscovery() {
    discoveryBanner.style.display = 'none';
    discoveryBanner.innerHTML = '';
  }

  function loadSegments() {
    const fetchLimit = Math.max(segments.length, 20);
    fetch(`/app/speakers/api/segments/${day}?limit=${fetchLimit}&offset=0`)
      .then(r => r.json())
      .then(data => {
        setSegmentsStatus();
        segments = data.segments || [];
        segmentTotal = data.total || 0;
        renderSegmentList();
        updateLoadMore();
        if (window.location.hash) {
          const hashKey = window.location.hash.slice(1);
          if (!selectSegmentByKey(hashKey) && segments.length < segmentTotal) {
            loadUntilFound(hashKey);
          }
        }
      })
      .catch(() => {
        segmentList.innerHTML = '<li class="spk-empty">Failed to load segments</li>';
      });
  }

  function loadMoreSegments() {
    const btn = document.getElementById('spkLoadMoreBtn');
    if (btn) btn.disabled = true;
    fetch(`/app/speakers/api/segments/${day}?limit=20&offset=${segments.length}`)
      .then(r => r.json())
      .then(data => {
        setSegmentsStatus();
        const newSegments = data.segments || [];
        segments = segments.concat(newSegments);
        segmentTotal = data.total || 0;
        renderSegmentList();
        updateLoadMore();
      })
      .catch(() => {
        if (btn) btn.disabled = false;
      });
  }

  function loadUntilFound(key) {
    window.apiJson(`/app/speakers/api/segments/${day}?limit=20&offset=${segments.length}`)
      .then(data => {
        setSegmentsStatus();
        const newSegments = data.segments || [];
        if (newSegments.length === 0) return;
        segments = segments.concat(newSegments);
        segmentTotal = data.total || 0;
        renderSegmentList();
        updateLoadMore();
        if (!selectSegmentByKey(key) && segments.length < segmentTotal) {
          loadUntilFound(key);
        }
      })
      .catch((err) => {
        setSegmentsStatus("Couldn't load more segments", err.serverMessage);
        window.logError(err, { context: 'speakers: loadUntilFound failed' });
      });
  }

  function updateLoadMore() {
    const container = document.getElementById('spkLoadMore');
    const btn = document.getElementById('spkLoadMoreBtn');
    if (!container || !btn) return;

    if (segmentTotal > 20 && segments.length < segmentTotal) {
      container.style.display = '';
      btn.textContent = `Load more segments (${segments.length} of ${segmentTotal})`;
      btn.onclick = loadMoreSegments;
    } else {
      container.style.display = 'none';
    }
  }

  function renderSegmentList() {
    if (segments.length === 0) {
      segmentList.innerHTML = '<li>' + window.SurfaceState.empty({
        icon: emptyIcons.segment,
        heading: 'no speakers discovered today',
        desc: 'solstone hasn\'t found any speaker segments for this day yet'
      }) + '</li>';
      const header = document.querySelector('.spk-segments-header');
      if (header) {
        header.textContent = 'segments';
      }
      return;
    }

    // Sort segments: by null proportion when needs_review, otherwise by key (chronological)
    const sorted = [...segments].sort((a, b) => {
      if (currentFilter === 'needs_review') {
        const aProp = a.attribution_total ? a.attribution_null / a.attribution_total : 0;
        const bProp = b.attribution_total ? b.attribution_null / b.attribution_total : 0;
        if (bProp !== aProp) return bProp - aProp;
      }
      return a.key.localeCompare(b.key);
    });

    const focusKey = (selectedSegment && sorted.some(s => s.key === selectedSegment.key))
      ? selectedSegment.key
      : sorted[0].key;

    const hadFocus = segmentList.contains(document.activeElement);
    const focusedKey = hadFocus ? document.activeElement.dataset?.key : null;

    segmentList.innerHTML = sorted.map(seg => `
      <li class="spk-segment${selectedSegment?.key === seg.key ? ' active' : ''}"
          data-key="${seg.key}"
          role="option"
          tabindex="${seg.key === focusKey ? '0' : '-1'}"
          aria-selected="${selectedSegment?.key === seg.key}"
          aria-label="${seg.start} - ${seg.end}, ${seg.speaker_count} speaker${seg.speaker_count !== 1 ? 's' : ''}${seg.attribution_needs_review > 0 ? ', ' + seg.attribution_needs_review + ' to review' : ''}">
        <div class="spk-segment-time">
          ${seg.start} - ${seg.end}
          ${seg.speaker_count > 0 ? `<span class="spk-speaker-count">${seg.speaker_count} speakers</span>` : ''}
        </div>
        <div class="spk-segment-meta">${formatDuration(seg.duration)}</div>
        <div class="spk-segment-sources">
          ${seg.sources.map(s => `<span class="spk-source-badge">${formatSource(s)}</span>`).join('')}
        </div>
        ${seg.attribution_needs_review > 0 ? `<div class="spk-review-badge">${seg.attribution_needs_review} to review</div>` : ''}
      </li>
    `).join('');

    segmentList.querySelectorAll('.spk-segment').forEach(el => {
      el.addEventListener('click', () => {
        const seg = segments.find(s => s.key === el.dataset.key);
        if (seg) {
          window.location.hash = seg.key;
          selectSegment(seg);
        }
      });
    });

    if (hadFocus) {
      const restoreKey = focusedKey || focusKey;
      const target = segmentList.querySelector(`.spk-segment[data-key="${restoreKey}"]`)
        || segmentList.querySelector('.spk-segment');
      if (target) target.focus();
    }

    const header = document.querySelector('.spk-segments-header');
    if (header) {
      if (segmentTotal > 20) {
        header.innerHTML = `segments <span class="spk-segments-count">${segments.length} of ${segmentTotal}</span>`;
      } else {
        header.textContent = 'segments';
      }
    }
  }

  function selectSegmentByKey(key) {
    const seg = segments.find(s => s.key === key);
    if (seg) selectSegment(seg);
    return !!seg;
  }

  function selectSegment(seg) {
    const switchingSegment = !selectedSegment || selectedSegment.key !== seg.key;
    selectedSegment = seg;
    selectedSource = seg.sources[0] || null;
    currentFilter = 'all';
    if (switchingSegment) detailExpanded = false;
    renderSegmentList();
    renderDetail(seg);
  }

  function renderDetail(seg) {
    if (!seg.sources.length) {
      detailPanel.innerHTML = window.SurfaceState.empty({
        icon: emptyIcons.audio,
        heading: 'no audio sources',
        desc: 'this segment doesn\'t have any observed audio media'
      });
      return;
    }

    const summaryParts = [];
    if (seg.speaker_count > 0) {
      summaryParts.push(`<span>${seg.speaker_count} speaker${seg.speaker_count !== 1 ? 's' : ''}</span>`);
    }
    if (seg.attribution_total > 0) {
      const reviewed = seg.attribution_total - seg.attribution_needs_review;
      summaryParts.push(`<span>${reviewed}/${seg.attribution_total} attributed</span>`);
    }

    let html = `
      <div class="spk-detail-header">
        <h2 class="spk-detail-title">${seg.start} - ${seg.end}</h2>
      </div>
      ${summaryParts.length ? `<div class="spk-detail-summary">${summaryParts.join('')}</div>` : ''}
    `;

    html += '<div class="spk-speakers" id="spkSpeakers"><div class="spk-empty">Loading speakers...</div></div>';

    if (seg.sources.length > 1) {
      html += `
        <div class="spk-source-tabs">
          ${seg.sources.map(s => `
            <button class="spk-source-tab${s === selectedSource ? ' active' : ''}" data-source="${s}">
              ${formatSource(s)}
            </button>
          `).join('')}
        </div>
      `;
    }

    html += '<div class="spk-audio-player" id="spkAudioContainer"></div>';

    if (!detailExpanded) {
      html += '<button class="spk-expand-btn" id="spkExpandBtn">show sentences and details</button>';
    }

    html += '<div id="spkReviewStatus" class="spk-review-status" aria-live="polite"></div>';
    html += '<div class="spk-sentences" id="spkSentences"><div class="spk-empty">loading...</div></div>';
    detailPanel.innerHTML = html;

    if (!detailExpanded) {
      detailPanel.classList.add('spk-detail-collapsed');
    } else {
      detailPanel.classList.remove('spk-detail-collapsed');
    }

    const expandBtn = document.getElementById('spkExpandBtn');
    if (expandBtn) {
      expandBtn.addEventListener('click', () => {
        detailExpanded = true;
        detailPanel.classList.remove('spk-detail-collapsed');
        expandBtn.remove();
      });
    }

    detailPanel.querySelectorAll('.spk-source-tab').forEach(tab => {
      tab.addEventListener('click', () => {
        selectedSource = tab.dataset.source;
        detailPanel.querySelectorAll('.spk-source-tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        loadReview(seg, selectedSource);
      });
    });

    loadSpeakers(seg);
    loadReview(seg, selectedSource);
  }

  function loadSpeakers(seg) {
    const container = document.getElementById('spkSpeakers');
    if (!container) return;

    fetch(`/app/speakers/api/speakers/${day}/${seg.stream}/${seg.key}`)
      .then(r => r.json())
      .then(data => {
        if (data.error) {
          container.innerHTML = `<div class="spk-empty">${escapeHtml(data.error)}</div>`;
          return;
        }
        renderSpeakerCards(data);
      })
      .catch(() => {
        container.innerHTML = '<div class="spk-empty">Failed to load speakers</div>';
      });
  }

  function renderSpeakerCards(data) {
    const container = document.getElementById('spkSpeakers');
    if (!container) return;

    const { matched, unmatched } = data;
    const hasMatched = matched && matched.length > 0;
    const hasUnmatched = unmatched && unmatched.length > 0;
    const matchedCount = matched ? matched.length : 0;
    const unmatchedCount = unmatched ? unmatched.length : 0;

    if (!hasMatched && !hasUnmatched) {
      container.innerHTML = window.SurfaceState.empty({
        icon: emptyIcons.people,
        heading: 'no speakers found',
        desc: 'no speaker voices were detected in this segment'
      });
      return;
    }

    let titleParts = [];
    if (matchedCount > 0) titleParts.push(`${matchedCount} matched`);
    if (unmatchedCount > 0) titleParts.push(`${unmatchedCount} unmatched`);
    const title = `Speakers (${titleParts.join(', ')})`;

    let html = `<h2 class="spk-speakers-title">${title}</h2><ul class="spk-speaker-cards">`;
    if (hasMatched) {
      matched.forEach(m => {
        html += `
          <li class="spk-speaker-card spk-speaker-matched">
            <h3 class="spk-speaker-entity">${escapeHtml(m.entity_name)}</h3>
            ${m.detected_name !== m.entity_name ? `<span class="spk-speaker-detected">(${escapeHtml(m.detected_name)})</span>` : ''}
          </li>
        `;
      });
    }

    if (hasUnmatched) {
      unmatched.forEach(name => {
        html += `<li class="spk-speaker-card spk-speaker-unmatched"><h3 class="spk-speaker-entity">${escapeHtml(name)}</h3></li>`;
      });
    }

    html += '</ul>';
    container.innerHTML = html;
  }

  function loadReview(seg, source) {
    const container = document.getElementById('spkSentences');
    const isFirstPaint = Boolean(
      container
      && container.querySelector('.spk-sentence') === null
      && container.textContent.trim() === 'Loading...'
    );
    if (container && isFirstPaint) {
      container.innerHTML = '<div class="spk-empty">Loading...</div>';
    }

    setReviewStatus();
    window.apiJson(`/app/speakers/api/review/${day}/${seg.stream}/${seg.key}/${source}`)
      .then(data => {
        if (data.error) {
          const err = new Error(data.error);
          err.serverMessage = data.error;
          throw err;
        }

        currentSentences = data.sentences || [];
        reviewEntities = data.all_entities || [];
        hasLabels = Boolean(data.has_labels);
        reviewSummary = data.summary || null;
        playingSentenceId = null;
        renderReview(data);
      })
      .catch((err) => {
        window.logError(err, { context: 'speakers: loadReview failed' });
        if (container) {
          if (isFirstPaint) {
            container.innerHTML = window.SurfaceState.error({
              heading: "Couldn't load review",
              desc: window.CONVEY_COPY.RELOAD_HINT,
              serverMessage: err.serverMessage,
              detail: err,
            });
          } else {
            setReviewStatus("Couldn't reload review — showing last known state.", err.serverMessage);
          }
        }
      });
  }

  function renderReview(data) {
    const { audio_file } = data;
    const audioContainer = document.getElementById('spkAudioContainer');
    if (audio_file) {
      audioContainer.innerHTML = `
        <div class="spk-player-controls">
          <button class="spk-skip-back" id="spkSkipBack" title="back 5s">&#8634; 5s</button>
          <audio id="spkAudio" controls preload="metadata">
            <source src="${audio_file}" type="audio/flac">
          </audio>
          <button class="spk-speed-toggle" id="spkSpeedToggle" title="playback speed">1x</button>
        </div>
      `;
      audioPlayer = document.getElementById('spkAudio');
      setupAudioListeners();
    } else {
      audioContainer.innerHTML = '<div class="spk-empty">no audio file available</div>';
      audioPlayer = null;
    }

    renderReviewList();
  }

  function renderReviewList() {
    const container = document.getElementById('spkSentences');
    if (!container) return;

    const sentences = filteredSentences();
    const total = currentSentences.length;
    const countLabel = countLabelForFilter(sentences.length, total);

    if (total === 0) {
      container.innerHTML = window.SurfaceState.empty({
        icon: emptyIcons.text,
        heading: 'no sentences to review',
        desc: 'this segment doesn\'t have any sentences to work with yet'
      });
      return;
    }

    container.innerHTML = `
      <h2 class="spk-sentences-title">
        <span id="spkSentenceCount">${escapeHtml(countLabel)}</span>
      </h2>
      <div class="spk-filter-bar">
        <button class="spk-filter-btn${currentFilter === 'all' ? ' active' : ''}" data-filter="all">all</button>
        <button class="spk-filter-btn${currentFilter === 'needs_review' ? ' active' : ''}" data-filter="needs_review">needs review</button>
        <button class="spk-filter-btn${currentFilter === 'corrections' ? ' active' : ''}" data-filter="corrections">corrections</button>
      </div>
      ${(() => {
        const seg = selectedSegment;
        const nonOwnerTotal = seg?.attribution_non_owner_total || 0;
        const nullCount = seg?.attribution_null || 0;
        const showPrompt = seg?.speaker_count > 0 && nonOwnerTotal > 0 && (nullCount / nonOwnerTotal) > 0.5;
        return showPrompt ? `<div class="spk-seeding-prompt">this meeting has ${seg.speaker_count} named speakers but I can't match voices yet. assigning even a few sentences will help me learn their voices for future meetings.</div>` : '';
      })()}
      ${!hasLabels ? '<div class="spk-status spk-status-info">speakers haven\'t been identified yet — assign a few sentences to help solstone learn their voices</div>' : ''}
      ${sentences.length === 0 ? '<div class="spk-empty">no sentences match this filter</div>' : sentences.map(renderSentence).join('')}
    `;

    container.querySelectorAll('.spk-filter-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        currentFilter = btn.dataset.filter;
        renderReviewList();
        renderSegmentList();
      });
    });

    setupSentenceHandlers();
  }

  function filteredSentences() {
    if (currentFilter === 'needs_review') {
      return currentSentences.filter(s => s.needs_review);
    }
    if (currentFilter === 'corrections') {
      return currentSentences.filter(s => s.is_correction);
    }
    return currentSentences;
  }

  function countLabelForFilter(visible, total) {
    if (currentFilter === 'all') {
      return `sentences (${total})`;
    }
    return `sentences (${visible} of ${total})`;
  }

  function renderSentence(sentence) {
    const timeStr = formatOffset(sentence.offset);
    const speakerHtml = renderSpeakerDisplay(sentence);
    const actionsHtml = renderActions(sentence);

    return `
      <div class="spk-sentence" data-id="${sentence.id}" data-offset="${sentence.offset}">
        <div class="spk-sentence-time">${timeStr}</div>
        <div class="spk-sentence-content">
          <div class="spk-sentence-text">${escapeHtml(sentence.text)}</div>
          <div class="spk-sentence-speaker">${speakerHtml}</div>
          <div class="spk-status-container" id="status-${sentence.id}" role="status" aria-live="polite"></div>
        </div>
        <div class="spk-sentence-actions">
          <button class="spk-btn spk-btn-icon spk-play-btn" aria-label="play from here" title="play from here">&#9654;</button>
          ${actionsHtml}
        </div>
      </div>
    `;
  }

  function renderSpeakerDisplay(sentence) {
    if (!sentence.speaker_name) {
      return '<span class="spk-review-state">unassigned</span>';
    }

    let dotClass = '';
    if (sentence.confidence === 'high') {
      dotClass = ' spk-confidence-high';
    } else if (sentence.confidence === 'medium') {
      dotClass = ' spk-confidence-medium';
    }

    let html = '';
    if (dotClass) {
      html += `<span class="spk-confidence-dot${dotClass}" aria-label="${sentence.confidence} confidence"></span>`;
      html += `<span class="spk-confidence-label">${escapeHtml(sentence.confidence)}</span>`;
    }

    if (sentence.is_correction && sentence.original_speaker_name) {
      html += `<span class="spk-correction-original">${escapeHtml(sentence.original_speaker_name)}</span>`;
    }

    html += `<span>${escapeHtml(sentence.speaker_name)}</span>`;

    if (sentence.needs_review) {
      html += '<span class="spk-review-state">needs review</span>';
    } else if (sentence.method) {
      html += `<span class="spk-review-state">${escapeHtml(METHOD_DISPLAY[sentence.method] || sentence.method)}</span>`;
    }

    return html;
  }

  function renderActions(sentence) {
    if (!hasLabels) {
      return '<span class="spk-review-state">not yet identified</span>';
    }

    const options = reviewEntities.map(entity => (
      `<option value="${escapeHtml(entity.entity_id)}">${escapeHtml(entity.name)}</option>`
    )).join('');

    if (sentence.speaker_entity_id) {
      const correctSelect = `
        <select class="spk-select-small spk-correct-select" aria-label="correct attribution" data-sentence-id="${sentence.id}">
          <option value="">correct...</option>
          ${options}
        </select>
        <button class="spk-btn spk-btn-primary spk-apply-btn" data-sentence-id="${sentence.id}" data-action="correct" style="display:none" aria-label="apply correction">&#10003;</button>
      `;

      if (sentence.confidence === 'medium') {
        return `
          <button class="spk-btn spk-btn-primary spk-confirm-btn" data-sentence-id="${sentence.id}">confirm &#10003;</button>
          ${correctSelect}
        `;
      }

      return correctSelect;
    }

    return `
      <select class="spk-select-small spk-assign-select" aria-label="assign speaker" data-sentence-id="${sentence.id}">
        <option value="">assign...</option>
        ${options}
      </select>
      <button class="spk-btn spk-btn-primary spk-apply-btn" data-sentence-id="${sentence.id}" data-action="assign" style="display:none" aria-label="apply assignment">&#10003;</button>
    `;
  }

  function setupSentenceHandlers() {
    detailPanel.querySelectorAll('.spk-play-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const row = btn.closest('.spk-sentence');
        const sentenceId = parseInt(row.dataset.id, 10);
        const offset = parseFloat(row.dataset.offset);

        if (!audioPlayer) return;

        if (sentenceId === playingSentenceId && !audioPlayer.paused) {
          audioPlayer.pause();
        } else {
          audioPlayer.currentTime = offset;
          audioPlayer.play();
        }
      });
    });

    detailPanel.querySelectorAll('.spk-confirm-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const sentenceId = parseInt(btn.dataset.sentenceId, 10);
        confirmAttribution(sentenceId);
      });
    });

    detailPanel.querySelectorAll('.spk-correct-select').forEach(select => {
      select.addEventListener('change', () => {
        const applyBtn = select.nextElementSibling;
        if (select.value) {
          applyBtn.dataset.value = select.value;
          applyBtn.style.display = '';
        } else {
          applyBtn.style.display = 'none';
        }
      });
    });

    detailPanel.querySelectorAll('.spk-assign-select').forEach(select => {
      select.addEventListener('change', () => {
        const applyBtn = select.nextElementSibling;
        if (select.value) {
          applyBtn.dataset.value = select.value;
          applyBtn.style.display = '';
        } else {
          applyBtn.style.display = 'none';
        }
      });
    });

    detailPanel.querySelectorAll('.spk-apply-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const sentenceId = parseInt(btn.dataset.sentenceId, 10);
        const value = btn.dataset.value;
        if (btn.dataset.action === 'correct') {
          correctAttribution(sentenceId, value);
        } else if (btn.dataset.action === 'assign') {
          assignAttribution(sentenceId, value);
        }
      });
    });
  }

  async function confirmAttribution(sentenceId) {
    try {
      const sentence = currentSentences.find(s => s.id === sentenceId);
      const isPrincipalAttestation = Boolean(sentence?.is_owner);
      await window.apiJson('/app/speakers/api/confirm-attribution', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          day,
          stream: selectedSegment.stream,
          segment_key: selectedSegment.key,
          source: selectedSource,
          sentence_id: sentenceId,
        }),
      });
      if (sentence) {
        sentence.confidence = 'high';
        sentence.method = 'user_confirmed';
        sentence.needs_review = false;
        sentence.is_correction = true;
      }
      renderReviewList();
      showStatusBySentence(sentenceId, 'Attribution confirmed', 'success');
      loadSegments();
      if (isPrincipalAttestation) {
        checkOwnerStatus();
      }
    } catch (err) {
      showStatusBySentence(
        sentenceId,
        err.serverMessage || 'something went wrong — try again',
        'error'
      );
    }
  }

  async function correctAttribution(sentenceId, newSpeaker) {
    try {
      await window.apiJson('/app/speakers/api/correct-attribution', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          day,
          stream: selectedSegment.stream,
          segment_key: selectedSegment.key,
          source: selectedSource,
          sentence_id: sentenceId,
          new_speaker: newSpeaker,
        }),
      });
      loadReview(selectedSegment, selectedSource);
      loadSegments();
      triggerOwnerStatusIfPrincipal(newSpeaker);
    } catch (err) {
      showStatusBySentence(
        sentenceId,
        err.serverMessage || 'something went wrong — try again',
        'error'
      );
    }
  }

  async function assignAttribution(sentenceId, speaker) {
    try {
      await window.apiJson('/app/speakers/api/assign-attribution', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          day,
          stream: selectedSegment.stream,
          segment_key: selectedSegment.key,
          source: selectedSource,
          sentence_id: sentenceId,
          speaker,
        }),
      });
      loadReview(selectedSegment, selectedSource);
      loadSegments();
      triggerOwnerStatusIfPrincipal(speaker);
    } catch (err) {
      showStatusBySentence(
        sentenceId,
        err.serverMessage || 'something went wrong — try again',
        'error'
      );
    }
  }

  function triggerOwnerStatusIfPrincipal(speakerId) {
    if (!speakerId) return;
    if (speakerId === principalEntityId()) {
      checkOwnerStatus();
    }
  }

  function showStatusBySentence(sentenceId, message, type) {
    const container = document.getElementById(`status-${sentenceId}`);
    if (!container) return;
    if (statusTimers[sentenceId]) {
      clearTimeout(statusTimers[sentenceId]);
      delete statusTimers[sentenceId];
    }
    if (type === 'error') {
      container.setAttribute('aria-live', 'assertive');
      container.innerHTML = `<div class="spk-status spk-status-${type}">${escapeHtml(message)}<button class="spk-status-dismiss" aria-label="dismiss" onclick="this.closest('.spk-status-container').innerHTML='';this.closest('.spk-status-container').setAttribute('aria-live','polite')">&times;</button></div>`;
    } else {
      container.setAttribute('aria-live', 'polite');
      container.innerHTML = `<div class="spk-status spk-status-${type}">${escapeHtml(message)}</div>`;
      statusTimers[sentenceId] = setTimeout(() => {
        const current = document.getElementById(`status-${sentenceId}`);
        if (current) {
          const msg = current.querySelector('.spk-status');
          if (msg) msg.style.opacity = '0';
          setTimeout(() => { current.innerHTML = ''; }, 300);
        }
        delete statusTimers[sentenceId];
      }, 3000);
    }
  }

  function setupAudioListeners() {
    if (!audioPlayer) return;

    audioPlayer.addEventListener('timeupdate', () => {
      updateActiveSentence(audioPlayer.currentTime);
    });

    audioPlayer.addEventListener('play', () => {
      if (playingSentenceId !== null) {
        const btn = detailPanel.querySelector(`.spk-sentence[data-id="${playingSentenceId}"] .spk-play-btn`);
        if (btn) btn.innerHTML = '&#9208;';
      }
    });

    audioPlayer.addEventListener('pause', () => {
      if (playingSentenceId !== null) {
        const btn = detailPanel.querySelector(`.spk-sentence[data-id="${playingSentenceId}"] .spk-play-btn`);
        if (btn) btn.innerHTML = '&#9654;';
      }
    });

    audioPlayer.addEventListener('ended', () => {
      if (playingSentenceId !== null) {
        const row = detailPanel.querySelector(`.spk-sentence[data-id="${playingSentenceId}"]`);
        if (row) {
          row.classList.remove('spk-playing');
          row.querySelector('.spk-play-btn').innerHTML = '&#9654;';
        }
        playingSentenceId = null;
      }
    });

    audioPlayer.addEventListener('error', () => {
      const container = document.getElementById('spkAudioContainer');
      if (container) {
        container.innerHTML = '<div class="spk-status spk-status-error" role="alert">couldn\'t load audio — the file may be missing or in an unsupported format<button class="spk-status-dismiss" aria-label="dismiss">&times;</button></div>';
        container.querySelector('.spk-status-dismiss')?.addEventListener('click', (e) => {
          e.target.closest('.spk-status-error').remove();
        });
      }
    });

    const skipBackBtn = document.getElementById('spkSkipBack');
    if (skipBackBtn) {
      skipBackBtn.addEventListener('click', () => {
        audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
      });
    }

    const speedToggleBtn = document.getElementById('spkSpeedToggle');
    if (speedToggleBtn) {
      const speeds = [1, 1.5, 2];
      speedToggleBtn.addEventListener('click', () => {
        const currentIndex = speeds.indexOf(audioPlayer.playbackRate);
        const nextIndex = (currentIndex + 1) % speeds.length;
        audioPlayer.playbackRate = speeds[nextIndex];
        speedToggleBtn.textContent = speeds[nextIndex] + 'x';
      });
    }
  }

  function updateActiveSentence(currentTime) {
    let activeSentence = null;
    for (let i = 0; i < currentSentences.length; i++) {
      const sentence = currentSentences[i];
      const nextOffset = currentSentences[i + 1]?.offset ?? Infinity;
      if (currentTime >= sentence.offset && currentTime < nextOffset) {
        activeSentence = sentence;
        break;
      }
    }

    const newId = activeSentence?.id ?? null;
    if (newId === playingSentenceId) return;

    if (playingSentenceId !== null) {
      const prevRow = detailPanel.querySelector(`.spk-sentence[data-id="${playingSentenceId}"]`);
      if (prevRow) {
        prevRow.classList.remove('spk-playing');
        prevRow.querySelector('.spk-play-btn').innerHTML = '&#9654;';
      }
    }

    playingSentenceId = newId;
    if (playingSentenceId !== null) {
      const newRow = detailPanel.querySelector(`.spk-sentence[data-id="${playingSentenceId}"]`);
      if (newRow) {
        newRow.classList.add('spk-playing');
        if (!audioPlayer.paused) {
          newRow.querySelector('.spk-play-btn').innerHTML = '&#9208;';
        }
        newRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    }
  }

  function formatDuration(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    if (mins === 0) return `${secs}s`;
    return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
  }

  function formatOffset(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }

  function formatSource(source) {
    return source
      .replace(/_audio$/, '')
      .replace(/^sys$/, 'system')
      .replace(/^mic$/, 'microphone')
      .replace(/_/g, ' ');
  }

})();
</script>