npm - @dolusoft/hirebase-mcp - Versions diffs - 1.1.8 - Mend

@dolusoft/hirebase-mcp 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/dist/interface/dashboard/html.js ADDED Viewed

@@ -0,0 +1,1007 @@
+export function getDashboardHtml(port) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>HireBase — Live Dashboard</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --bg-deep: #07090e;
+    --bg-base: #0f1117;
+    --bg-card: #161923;
+    --bg-card-hover: #1c2030;
+    --bg-elevated: #1e2235;
+    --border-subtle: rgba(99, 102, 241, 0.12);
+    --border-active: rgba(99, 102, 241, 0.35);
+    --accent: #6366f1;
+    --accent-glow: rgba(99, 102, 241, 0.4);
+    --accent-soft: rgba(99, 102, 241, 0.15);
+    --success: #22c55e;
+    --success-soft: rgba(34, 197, 94, 0.12);
+    --error: #ef4444;
+    --error-soft: rgba(239, 68, 68, 0.12);
+    --warning: #f59e0b;
+    --text-primary: #e8eaf0;
+    --text-secondary: #8b8fa3;
+    --text-muted: #5c6078;
+    --mono: 'JetBrains Mono', monospace;
+    --sans: 'Outfit', sans-serif;
+  }
+  html { font-size: 14px; }
+  body {
+    background: var(--bg-deep);
+    color: var(--text-primary);
+    font-family: var(--sans);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* === BACKGROUND GRID EFFECT === */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    pointer-events: none;
+    z-index: 0;
+  }
+  body::after {
+    content: '';
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(99,102,241,0.04) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  /* === HEADER === */
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    background: rgba(7, 9, 14, 0.85);
+    backdrop-filter: blur(20px) saturate(1.4);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .logo-icon {
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(135deg, var(--accent), #818cf8);
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 800;
+    color: white;
+    letter-spacing: -0.5px;
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+  .logo-text {
+    font-family: var(--sans);
+    font-weight: 800;
+    font-size: 1.15rem;
+    letter-spacing: -0.5px;
+    background: linear-gradient(135deg, #e8eaf0 40%, var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .logo-badge {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    font-weight: 500;
+    padding: 0.15rem 0.45rem;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: 4px;
+    border: 1px solid var(--border-subtle);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+  .conn-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+  .conn-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--error);
+    transition: background 0.3s, box-shadow 0.3s;
+  }
+  .conn-dot.connected {
+    background: var(--success);
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  /* === LAYOUT === */
+  .dashboard {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    gap: 1px;
+    height: calc(100vh - 49px);
+    background: var(--border-subtle);
+  }
+  .stats-panel {
+    grid-column: 1 / -1;
+    background: var(--bg-base);
+    padding: 1rem 1.5rem;
+    overflow-x: auto;
+  }
+  .activity-feed {
+    background: var(--bg-base);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .search-panel {
+    background: var(--bg-base);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  /* === PANEL HEADERS === */
+  .panel-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+  }
+  .panel-header h2 {
+    font-family: var(--sans);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--text-secondary);
+  }
+  .panel-header .count {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    padding: 0.1rem 0.4rem;
+    background: var(--bg-elevated);
+    border-radius: 3px;
+    color: var(--text-muted);
+  }
+  .panel-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.75rem;
+    scroll-behavior: smooth;
+  }
+  .panel-content::-webkit-scrollbar { width: 4px; }
+  .panel-content::-webkit-scrollbar-track { background: transparent; }
+  .panel-content::-webkit-scrollbar-thumb { background: var(--border-active); border-radius: 2px; }
+  /* === STATS === */
+  .stats-grid {
+    display: flex;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  .stat-card {
+    flex: 0 0 auto;
+    min-width: 130px;
+    padding: 0.75rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    transition: border-color 0.2s, transform 0.2s;
+  }
+  .stat-card:hover {
+    border-color: var(--border-active);
+    transform: translateY(-1px);
+  }
+  .stat-label {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    margin-bottom: 0.35rem;
+  }
+  .stat-value {
+    font-family: var(--mono);
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1;
+  }
+  .stat-value.accent { color: var(--accent); }
+  .stat-card-wide {
+    flex: 1;
+    min-width: 200px;
+    padding: 0.75rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+  }
+  .stat-card-wide .stat-label { margin-bottom: 0.5rem; }
+  .skill-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.3rem;
+  }
+  .skill-bar-row:last-child { margin-bottom: 0; }
+  .skill-name {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    width: 90px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .skill-bar-track {
+    flex: 1;
+    height: 6px;
+    background: var(--bg-deep);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .skill-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #818cf8);
+    border-radius: 3px;
+    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .skill-bar-fill.location {
+    background: linear-gradient(90deg, #06b6d4, #22d3ee);
+  }
+  .skill-count {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    width: 24px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+  /* === ACTIVITY CARDS === */
+  .activity-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 0.65rem 0.75rem;
+    margin-bottom: 0.5rem;
+    animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: border-color 0.2s;
+  }
+  .activity-card:hover { border-color: var(--border-active); }
+  .activity-card.running {
+    border-left: 2px solid var(--accent);
+    background: linear-gradient(90deg, rgba(99,102,241,0.04), transparent 40%);
+  }
+  .activity-card.success { border-left: 2px solid var(--success); }
+  .activity-card.error { border-left: 2px solid var(--error); }
+  @keyframes card-in {
+    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  .card-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
+  }
+  .card-top-left {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .status-indicator {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .status-indicator.running {
+    background: var(--accent);
+    animation: blink 1s ease-in-out infinite;
+  }
+  .status-indicator.success { background: var(--success); }
+  .status-indicator.error { background: var(--error); }
+  @keyframes blink {
+    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent-glow); }
+    50% { opacity: 0.3; box-shadow: none; }
+  }
+  .tool-name {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  .duration-badge {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    font-weight: 500;
+    padding: 0.1rem 0.35rem;
+    border-radius: 3px;
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+  }
+  .duration-badge.fast { color: var(--success); background: var(--success-soft); }
+  .duration-badge.slow { color: var(--warning); background: rgba(245,158,11,0.12); }
+  .card-time {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    color: var(--text-muted);
+  }
+  .card-args {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    padding: 0.3rem 0.5rem;
+    background: var(--bg-deep);
+    border-radius: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    margin-top: 0.25rem;
+  }
+  .card-result {
+    margin-top: 0.35rem;
+  }
+  .result-toggle {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    color: var(--accent);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .result-toggle:hover { text-decoration: underline; }
+  .result-toggle .arrow { transition: transform 0.2s; display: inline-block; }
+  .result-toggle .arrow.open { transform: rotate(90deg); }
+  .result-preview {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    color: var(--text-secondary);
+    padding: 0.35rem 0.5rem;
+    background: var(--bg-deep);
+    border-radius: 4px;
+    margin-top: 0.25rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 120px;
+    overflow-y: auto;
+    display: none;
+  }
+  .result-preview.open { display: block; animation: card-in 0.2s ease; }
+  /* === SEARCH RESULTS === */
+  .search-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    gap: 0.5rem;
+  }
+  .search-empty-icon {
+    font-size: 2rem;
+    opacity: 0.3;
+  }
+  .search-result-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 0.65rem 0.75rem;
+    margin-bottom: 0.5rem;
+    animation: card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: border-color 0.2s;
+  }
+  .search-result-card:hover { border-color: var(--border-active); }
+  .sr-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.35rem;
+  }
+  .sr-name {
+    font-family: var(--sans);
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--text-primary);
+  }
+  .sr-section-badge {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 0.1rem 0.4rem;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: 3px;
+  }
+  .sr-score-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.35rem;
+  }
+  .sr-score-track {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-deep);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .sr-score-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .sr-score-fill.high { background: linear-gradient(90deg, var(--success), #4ade80); }
+  .sr-score-fill.mid { background: linear-gradient(90deg, var(--warning), #fbbf24); }
+  .sr-score-fill.low { background: linear-gradient(90deg, var(--error), #f87171); }
+  .sr-score-label {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    width: 40px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+  .sr-snippet {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    padding: 0.3rem 0.5rem;
+    background: var(--bg-deep);
+    border-radius: 4px;
+    max-height: 48px;
+    overflow: hidden;
+    line-height: 1.4;
+  }
+  .search-query-banner {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    margin-bottom: 0.5rem;
+    background: var(--accent-soft);
+    border: 1px solid var(--border-active);
+    border-radius: 6px;
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    color: var(--accent);
+    animation: card-in 0.3s ease;
+  }
+  .search-query-banner .label {
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  .search-query-banner .query-text {
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* === EMPTY STATE === */
+  .feed-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    gap: 0.5rem;
+  }
+  .feed-empty-icon {
+    width: 40px;
+    height: 40px;
+    border: 2px dashed var(--border-active);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: rotate-slow 8s linear infinite;
+  }
+  @keyframes rotate-slow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  /* === RESPONSIVE === */
+  @media (max-width: 768px) {
+    .dashboard {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr 1fr;
+    }
+    .stats-grid { flex-wrap: wrap; }
+  }
+</style>
+</head>
+<body>
+<header class="header">
+  <div class="header-left">
+    <div class="logo">
+      <div class="logo-icon">H</div>
+      <span class="logo-text">HireBase</span>
+    </div>
+    <span class="logo-badge">live</span>
+  </div>
+  <div class="conn-status">
+    <div class="conn-dot" id="connDot"></div>
+    <span id="connLabel">disconnected</span>
+  </div>
+</header>
+<div class="dashboard">
+  <!-- STATS -->
+  <section class="stats-panel">
+    <div class="stats-grid" id="statsGrid">
+      <div class="stat-card">
+        <div class="stat-label">Candidates</div>
+        <div class="stat-value accent" id="statCandidates">—</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Chunks</div>
+        <div class="stat-value" id="statChunks">—</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Avg Exp. Yrs</div>
+        <div class="stat-value" id="statAvgExp">—</div>
+      </div>
+      <div class="stat-card-wide">
+        <div class="stat-label">Top Skills</div>
+        <div id="skillBars"></div>
+      </div>
+      <div class="stat-card-wide">
+        <div class="stat-label">Locations</div>
+        <div id="locationBars"></div>
+      </div>
+    </div>
+  </section>
+  <!-- ACTIVITY FEED -->
+  <section class="activity-feed">
+    <div class="panel-header">
+      <h2>Activity Feed</h2>
+      <span class="count" id="feedCount">0</span>
+    </div>
+    <div class="panel-content" id="feedContent">
+      <div class="feed-empty" id="feedEmpty">
+        <div class="feed-empty-icon">◆</div>
+        <span>Waiting for tool calls…</span>
+      </div>
+    </div>
+  </section>
+  <!-- SEARCH RESULTS -->
+  <section class="search-panel">
+    <div class="panel-header">
+      <h2>Search Results</h2>
+      <span class="count" id="searchCount">0</span>
+    </div>
+    <div class="panel-content" id="searchContent">
+      <div class="search-empty" id="searchEmpty">
+        <div class="search-empty-icon">⌕</div>
+        <span>Run semantic_search to see results</span>
+      </div>
+    </div>
+  </section>
+</div>
+<script>
+(function() {
+  const PORT = ${port};
+  const MAX_CARDS = 100;
+  let ws = null;
+  let retryDelay = 1000;
+  const activeTools = new Map();
+  let feedCardCount = 0;
+  // DOM refs
+  const connDot = document.getElementById('connDot');
+  const connLabel = document.getElementById('connLabel');
+  const feedContent = document.getElementById('feedContent');
+  const feedEmpty = document.getElementById('feedEmpty');
+  const feedCount = document.getElementById('feedCount');
+  const searchContent = document.getElementById('searchContent');
+  const searchEmpty = document.getElementById('searchEmpty');
+  const searchCount = document.getElementById('searchCount');
+  const statCandidates = document.getElementById('statCandidates');
+  const statChunks = document.getElementById('statChunks');
+  const statAvgExp = document.getElementById('statAvgExp');
+  const skillBars = document.getElementById('skillBars');
+  const locationBars = document.getElementById('locationBars');
+  function setConnected(ok) {
+    connDot.className = ok ? 'conn-dot connected' : 'conn-dot';
+    connLabel.textContent = ok ? 'connected' : 'disconnected';
+  }
+  function formatTime(ts) {
+    return new Date(ts).toLocaleTimeString('en-GB', { hour12: false });
+  }
+  function formatDuration(ms) {
+    if (ms < 1000) return ms + 'ms';
+    return (ms / 1000).toFixed(1) + 's';
+  }
+  function truncateStr(s, n) {
+    return s && s.length > n ? s.slice(0, n) + '…' : (s || '');
+  }
+  function summarizeArgs(args) {
+    if (!args || Object.keys(args).length === 0) return '';
+    const parts = [];
+    for (const [k, v] of Object.entries(args)) {
+      let val = typeof v === 'string' ? truncateStr(v, 60) : JSON.stringify(v);
+      parts.push(k + ': ' + val);
+    }
+    return parts.join(', ');
+  }
+  function renderBars(container, counts, cssClass) {
+    if (!counts || Object.keys(counts).length === 0) {
+      container.innerHTML = '<span style="font-family:var(--mono);font-size:0.65rem;color:var(--text-muted)">No data</span>';
+      return;
+    }
+    const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 5);
+    const max = sorted[0][1];
+    container.innerHTML = sorted.map(([name, count]) => {
+      const pct = Math.round((count / max) * 100);
+      return '<div class="skill-bar-row">' +
+        '<span class="skill-name">' + escHtml(name) + '</span>' +
+        '<div class="skill-bar-track"><div class="skill-bar-fill ' + cssClass + '" style="width:' + pct + '%"></div></div>' +
+        '<span class="skill-count">' + count + '</span>' +
+      '</div>';
+    }).join('');
+  }
+  function escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+  // --- Event Handlers ---
+  function handleToolCallStart(ev) {
+    feedEmpty.style.display = 'none';
+    activeTools.set(ev.id, ev);
+    const card = document.createElement('div');
+    card.className = 'activity-card running';
+    card.id = 'card-' + ev.id;
+    const argsSummary = summarizeArgs(ev.args);
+    card.innerHTML =
+      '<div class="card-top">' +
+        '<div class="card-top-left">' +
+          '<div class="status-indicator running"></div>' +
+          '<span class="tool-name">' + escHtml(ev.tool) + '</span>' +
+        '</div>' +
+        '<span class="card-time">' + formatTime(ev.timestamp) + '</span>' +
+      '</div>' +
+      (argsSummary ? '<div class="card-args">' + escHtml(argsSummary) + '</div>' : '');
+    feedContent.prepend(card);
+    trimFeed();
+    updateFeedCount();
+  }
+  function handleToolCallEnd(ev) {
+    const startEvent = activeTools.get(ev.id);
+    activeTools.delete(ev.id);
+    const card = document.getElementById('card-' + ev.id);
+    if (card) {
+      card.className = 'activity-card ' + (ev.success ? 'success' : 'error');
+      const indicator = card.querySelector('.status-indicator');
+      if (indicator) {
+        indicator.className = 'status-indicator ' + (ev.success ? 'success' : 'error');
+      }
+      const topRow = card.querySelector('.card-top');
+      const timeEl = topRow.querySelector('.card-time');
+      const durClass = ev.durationMs < 1000 ? 'fast' : (ev.durationMs > 5000 ? 'slow' : '');
+      const badge = document.createElement('span');
+      badge.className = 'duration-badge ' + durClass;
+      badge.textContent = formatDuration(ev.durationMs);
+      topRow.insertBefore(badge, timeEl);
+      if (ev.resultPreview) {
+        const resultDiv = document.createElement('div');
+        resultDiv.className = 'card-result';
+        const toggleId = 'toggle-' + ev.id;
+        resultDiv.innerHTML =
+          '<button class="result-toggle" onclick="toggleResult(\\'' + ev.id + '\\')">' +
+            '<span class="arrow" id="arrow-' + ev.id + '">▸</span> result' +
+          '</button>' +
+          '<div class="result-preview" id="preview-' + ev.id + '">' + escHtml(ev.resultPreview) + '</div>';
+        card.appendChild(resultDiv);
+      }
+    } else {
+      // card not found (from history), create completed card
+      feedEmpty.style.display = 'none';
+      const newCard = document.createElement('div');
+      newCard.className = 'activity-card ' + (ev.success ? 'success' : 'error');
+      newCard.id = 'card-' + ev.id;
+      const durClass = ev.durationMs < 1000 ? 'fast' : (ev.durationMs > 5000 ? 'slow' : '');
+      newCard.innerHTML =
+        '<div class="card-top">' +
+          '<div class="card-top-left">' +
+            '<div class="status-indicator ' + (ev.success ? 'success' : 'error') + '"></div>' +
+            '<span class="tool-name">' + escHtml(ev.tool) + '</span>' +
+          '</div>' +
+          '<span class="duration-badge ' + durClass + '">' + formatDuration(ev.durationMs) + '</span>' +
+          '<span class="card-time">' + formatTime(ev.timestamp) + '</span>' +
+        '</div>' +
+        (ev.resultPreview ?
+          '<div class="card-result">' +
+            '<button class="result-toggle" onclick="toggleResult(\\'' + ev.id + '\\')">' +
+              '<span class="arrow" id="arrow-' + ev.id + '">▸</span> result' +
+            '</button>' +
+            '<div class="result-preview" id="preview-' + ev.id + '">' + escHtml(ev.resultPreview) + '</div>' +
+          '</div>' : '') ;
+      feedContent.prepend(newCard);
+    }
+    // Parse search results
+    if (ev.tool === 'semantic_search' && ev.success && ev.resultPreview) {
+      try {
+        const data = JSON.parse(ev.resultPreview);
+        if (Array.isArray(data)) renderSearchResults(data, startEvent?.args);
+      } catch {}
+    }
+    trimFeed();
+    updateFeedCount();
+  }
+  function handleStatsUpdate(ev) {
+    const s = ev.stats;
+    if (s.totalCandidates !== undefined) statCandidates.textContent = s.totalCandidates;
+    if (s.totalChunks !== undefined) statChunks.textContent = s.totalChunks;
+    if (s.avgExperienceYears !== undefined) statAvgExp.textContent = Number(s.avgExperienceYears).toFixed(1);
+    if (s.skillCounts) renderBars(skillBars, s.skillCounts, '');
+    if (s.locationCounts) renderBars(locationBars, s.locationCounts, 'location');
+  }
+  function renderSearchResults(results, startArgs) {
+    searchEmpty.style.display = 'none';
+    searchContent.innerHTML = '';
+    if (startArgs) {
+      const banner = document.createElement('div');
+      banner.className = 'search-query-banner';
+      banner.innerHTML = '<span class="label">Query:</span><span class="query-text">' +
+        escHtml(typeof startArgs === 'object' ? (startArgs.query || JSON.stringify(startArgs)) : String(startArgs)) + '</span>';
+      searchContent.appendChild(banner);
+    }
+    results.forEach(function(r, i) {
+      const name = r.candidateName || r.candidate_name || r.name || 'Unknown';
+      const score = typeof r.score === 'number' ? r.score : (typeof r.relevanceScore === 'number' ? r.relevanceScore : 0);
+      const pct = Math.round(score * 100);
+      const section = r.sectionType || r.section_type || '';
+      const snippet = r.textPreview || r.text_preview || r.snippet || r.text || '';
+      const scoreClass = pct >= 70 ? 'high' : (pct >= 40 ? 'mid' : 'low');
+      const card = document.createElement('div');
+      card.className = 'search-result-card';
+      card.style.animationDelay = (i * 0.05) + 's';
+      card.innerHTML =
+        '<div class="sr-top">' +
+          '<span class="sr-name">' + escHtml(name) + '</span>' +
+          (section ? '<span class="sr-section-badge">' + escHtml(section) + '</span>' : '') +
+        '</div>' +
+        '<div class="sr-score-row">' +
+          '<div class="sr-score-track"><div class="sr-score-fill ' + scoreClass + '" style="width:' + pct + '%"></div></div>' +
+          '<span class="sr-score-label">' + pct + '%</span>' +
+        '</div>' +
+        (snippet ? '<div class="sr-snippet">' + escHtml(truncateStr(snippet, 200)) + '</div>' : '');
+      searchContent.appendChild(card);
+    });
+    searchCount.textContent = results.length;
+  }
+  function trimFeed() {
+    const cards = feedContent.querySelectorAll('.activity-card');
+    while (cards.length > MAX_CARDS) {
+      feedContent.removeChild(cards[cards.length - 1]);
+    }
+  }
+  function updateFeedCount() {
+    feedCount.textContent = feedContent.querySelectorAll('.activity-card').length;
+  }
+  // Toggle result preview
+  window.toggleResult = function(id) {
+    const preview = document.getElementById('preview-' + id);
+    const arrow = document.getElementById('arrow-' + id);
+    if (preview) {
+      const open = preview.classList.toggle('open');
+      if (arrow) arrow.className = 'arrow' + (open ? ' open' : '');
+    }
+  };
+  function processEvent(ev) {
+    switch (ev.type) {
+      case 'tool_call_start': handleToolCallStart(ev); break;
+      case 'tool_call_end': handleToolCallEnd(ev); break;
+      case 'stats_update': handleStatsUpdate(ev); break;
+    }
+  }
+  // --- WebSocket ---
+  function connect() {
+    ws = new WebSocket('ws://localhost:' + PORT + '/ws');
+    ws.onopen = function() {
+      setConnected(true);
+      retryDelay = 1000;
+    };
+    ws.onclose = function() {
+      setConnected(false);
+      setTimeout(connect, retryDelay);
+      retryDelay = Math.min(retryDelay * 2, 30000);
+    };
+    ws.onerror = function() {
+      ws.close();
+    };
+    ws.onmessage = function(msg) {
+      try {
+        const data = JSON.parse(msg.data);
+        if (Array.isArray(data)) {
+          // history batch
+          data.forEach(processEvent);
+        } else {
+          processEvent(data);
+        }
+      } catch {}
+    };
+  }
+  connect();
+})();
+</script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=html.js.map