npm - hzl-web - Versions diffs - 2.2.0 → 2.4.0 - Mend

hzl-web 2.2.0 → 2.4.0

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 (21) hide show

package/dist/server.d.ts +2 -1
package/dist/server.d.ts.map +1 -1
package/dist/server.js +107 -64
package/dist/server.js.map +1 -1
package/dist/server.test.js +299 -189
package/dist/server.test.js.map +1 -1
package/dist/ui/assets/Paired-CHegtbHO.js +1 -0
package/dist/ui/assets/force-graph-B5HrL0HG.js +42 -0
package/dist/ui/assets/index-CdpHwHFG.css +1 -0
package/dist/ui/assets/index-CgGSX2ei.js +5 -0
package/dist/ui/assets/index-DhxVdKMf.js +109 -0
package/dist/ui/index.html +9 -4466
package/dist/ui/legacy.html +4473 -0
package/dist/ui/screenshot-mobile.png +0 -0
package/dist/ui/screenshot-wide.png +0 -0
package/dist/ui/site.webmanifest +27 -0
package/dist/ui-embed.d.ts +8 -8
package/dist/ui-embed.d.ts.map +1 -1
package/dist/ui-embed.js +71 -29
package/dist/ui-embed.js.map +1 -1
package/package.json +16 -3

package/dist/ui/index.html CHANGED Viewed

@@ -1,4473 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="theme-color" content="#1a1a1a">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
-  <link rel="shortcut icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <meta name="apple-mobile-web-app-title" content="HZL">
-  <link rel="manifest" href="/site.webmanifest">
-  <title>HZL</title>
-  <style>
-    :root {
-      --bg-primary: #1a1a1a;
-      --bg-secondary: #252525;
-      --bg-card: #2d2d2d;
-      --text-primary: #e5e5e5;
-      --text-secondary: #a3a3a3;
-      --text-muted: #737373;
-      --accent: #f59e0b;
-      --accent-dim: #b45309;
-      --border: #404040;
-      --status-backlog: #6b7280;     /* gray - not yet prioritized */
-      --status-blocked: #ef4444;     /* red - stuck, needs help */
-      --status-ready: #3b82f6;       /* blue - available to claim */
-      --status-in-progress: #f59e0b; /* orange - active work */
-      --status-done: #22c55e;        /* green - completed */
-      --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    body {
-      font-family: var(--font-mono);
-      font-size: 13px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      line-height: 1.5;
-      min-height: 100vh;
-    }
-    /* Header */
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 14px;
-      padding: 12px 16px;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-    .logo {
-      font-weight: 600;
-      font-size: 14px;
-      color: var(--accent);
-    }
-    .header-filters {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex: 1;
-      min-width: 0;
-    }
-    .filter-group {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      position: relative;
-    }
-    .filter-label {
-      color: var(--text-muted);
-      font-size: 11px;
-    }
-    select {
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      padding: 0 44px 0 12px;
-      border-radius: 6px;
-      cursor: pointer;
-      min-height: 42px;
-      line-height: 1.2;
-    }
-    select:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    .task-search-group {
-      gap: 6px;
-    }
-    .task-search-input {
-      width: 220px;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      padding: 0 12px;
-      border-radius: 6px;
-      min-height: 42px;
-    }
-    .task-search-input:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    .task-search-clear {
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      background: var(--bg-primary);
-      color: var(--text-secondary);
-      font-family: var(--font-mono);
-      font-size: 12px;
-      line-height: 1;
-      padding: 4px 8px;
-      cursor: pointer;
-    }
-    .task-search-clear:hover {
-      border-color: var(--accent);
-      color: var(--text-primary);
-    }
-    .task-search-clear[hidden] {
-      display: none;
-    }
-    .task-search-meta {
-      min-width: 0;
-      width: 0;
-      overflow: hidden;
-      font-size: 11px;
-      color: var(--text-muted);
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-      transition: width 120ms ease;
-    }
-    .task-search-group.active .task-search-meta {
-      width: 56px;
-    }
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-left: auto;
-      flex-shrink: 0;
-    }
-    .connection-indicator {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: var(--text-muted);
-      min-width: 85px;
-      justify-content: flex-end;
-    }
-    .connection-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--text-muted);
-    }
-    .connection-dot.live {
-      background: var(--status-done);
-    }
-    .connection-dot.error {
-      background: var(--status-blocked);
-    }
-    .activity-btn {
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      min-height: 42px;
-      padding: 0 14px;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    .activity-btn:hover {
-      border-color: var(--accent);
-    }
-    .settings-shortcuts-btn {
-      width: 100%;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-secondary);
-      border: 1px solid var(--border);
-      padding: 6px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      text-align: left;
-      white-space: nowrap;
-    }
-    .settings-shortcuts-btn:hover {
-      color: var(--text-primary);
-      border-color: var(--accent);
-    }
-    .settings-view-select {
-      width: 100%;
-    }
-    .collapse-parents-actions {
-      display: flex;
-      gap: 6px;
-      margin-top: 2px;
-    }
-    .collapse-parents-btn {
-      flex: 1;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      background: var(--bg-primary);
-      color: var(--text-secondary);
-      border: 1px solid var(--border);
-      padding: 5px 6px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .collapse-parents-btn:hover:not(:disabled) {
-      color: var(--text-primary);
-      border-color: var(--accent);
-    }
-    .collapse-parents-btn:disabled {
-      opacity: 0.45;
-      cursor: not-allowed;
-    }
-    .collapse-parents-meta {
-      margin-top: 5px;
-      font-size: 10px;
-      color: var(--text-muted);
-    }
-    /* Column Visibility Dropdown */
-    .columns-toggle {
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      padding: 4px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .columns-toggle:hover {
-      border-color: var(--accent);
-    }
-    .columns-dropdown {
-      display: none;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      margin-top: 4px;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 8px;
-      z-index: 100;
-      min-width: 140px;
-    }
-    .columns-dropdown.open {
-      display: block;
-    }
-    .column-checkbox {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 4px 0;
-      cursor: pointer;
-      font-size: 12px;
-      color: var(--text-primary);
-    }
-    .column-checkbox:hover {
-      color: var(--accent);
-    }
-    .column-checkbox input {
-      accent-color: var(--accent);
-    }
-    /* Settings Dropdown */
-    .settings-group {
-      position: relative;
-    }
-    .settings-toggle {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--bg-primary);
-      color: var(--text-secondary);
-      border: 1px solid var(--border);
-      width: 42px;
-      height: 42px;
-      padding: 0;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    #dateFilter {
-      min-width: 150px;
-    }
-    #projectFilter {
-      min-width: 220px;
-    }
-    #assigneeFilter {
-      min-width: 180px;
-    }
-    .settings-toggle:hover {
-      border-color: var(--accent);
-      color: var(--text-primary);
-    }
-    .settings-dropdown {
-      display: none;
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 4px;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 12px;
-      z-index: 100;
-      min-width: 180px;
-    }
-    .settings-dropdown.open {
-      display: block;
-    }
-    .settings-section {
-      margin-bottom: 12px;
-    }
-    .settings-section:last-child {
-      margin-bottom: 0;
-    }
-    .settings-label {
-      display: block;
-      font-size: 11px;
-      color: var(--text-muted);
-      margin-bottom: 6px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .settings-section select {
-      width: 100%;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      padding: 4px 8px;
-      border-radius: 4px;
-    }
-    .column-checkboxes {
-      display: flex;
-      flex-direction: column;
-    }
-    /* Kanban Board */
-    .board {
-      display: flex;
-      gap: 12px;
-      padding: 16px;
-      overflow-x: auto;
-      min-height: calc(100vh - 53px);
-    }
-    .column {
-      flex: 1 1 220px;
-      min-width: 180px;
-      max-width: 320px;
-      background: var(--bg-secondary);
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-      max-height: calc(100vh - 85px);
-    }
-    .column.hidden {
-      display: none;
-    }
-    .column-header {
-      padding: 12px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .column-title {
-      font-weight: 600;
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .column-count {
-      font-size: 11px;
-      color: var(--text-muted);
-      background: var(--bg-primary);
-      padding: 2px 8px;
-      border-radius: 10px;
-    }
-    .column-cards {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-    .column-cards::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-    .column-cards.is-scrolling,
-    .column-cards:hover,
-    .column-cards:focus-within {
-      scrollbar-width: thin;
-      scrollbar-color: var(--border) transparent;
-    }
-    .column-cards.is-scrolling::-webkit-scrollbar,
-    .column-cards:hover::-webkit-scrollbar,
-    .column-cards:focus-within::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    .column-cards.is-scrolling::-webkit-scrollbar-thumb,
-    .column-cards:hover::-webkit-scrollbar-thumb,
-    .column-cards:focus-within::-webkit-scrollbar-thumb {
-      background: var(--border);
-      border-radius: 999px;
-    }
-    .column-cards.is-scrolling::-webkit-scrollbar-track,
-    .column-cards:hover::-webkit-scrollbar-track,
-    .column-cards:focus-within::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    /* Task Cards */
-    .card {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 10px 12px;
-      cursor: pointer;
-      transition: border-color 0.15s;
-    }
-    .card:hover {
-      border-color: var(--accent);
-    }
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      margin-bottom: 4px;
-    }
-    .card-header-left {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex: 1;
-      min-width: 0;
-    }
-    .card-header-right {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 4px;
-      min-width: 0;
-      flex-shrink: 0;
-    }
-    .card-emoji {
-      font-size: 12px;
-      flex-shrink: 0;
-    }
-    .card-parent {
-      box-shadow: 0 0 0 1px var(--family-color);
-    }
-    .card-id {
-      font-size: 10px;
-      color: var(--text-muted);
-    }
-    .card-title {
-      font-size: 13px;
-      color: var(--text-primary);
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      margin-bottom: 8px;
-    }
-    .card-meta {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 8px;
-      font-size: 11px;
-      color: var(--text-muted);
-    }
-    .card-project {
-      display: inline-block;
-      max-width: 140px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background: var(--bg-primary);
-      padding: 2px 6px;
-      border-radius: 3px;
-    }
-    .card-assignee {
-      display: inline-block;
-      max-width: 140px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 11px;
-      font-weight: 600;
-      padding: 2px 8px;
-      border-radius: 3px;
-      background: var(--bg-primary);
-      line-height: 1.2;
-    }
-    .card-assignee.assigned {
-      color: var(--accent);
-    }
-    .card-assignee.unassigned {
-      color: var(--text-muted);
-      font-weight: 500;
-    }
-    .card-progress {
-      color: var(--accent);
-      background: rgba(245, 158, 11, 0.15);
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-size: 10px;
-      flex-shrink: 0;
-    }
-    .card-progress.complete {
-      color: var(--status-done);
-      background: rgba(34, 197, 94, 0.15);
-    }
-    .card-subtask-count {
-      font-size: 11px;
-      color: var(--text-muted);
-      margin-bottom: 6px;
-    }
-    .card-subtask-toggle {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      background: var(--bg-primary);
-      color: var(--text-muted);
-      font-family: var(--font-mono);
-      font-size: 11px;
-      padding: 2px 6px;
-      margin-bottom: 6px;
-      cursor: pointer;
-    }
-    .card-subtask-toggle:hover {
-      color: var(--text-primary);
-      border-color: var(--accent);
-    }
-    .card-blocked {
-      font-size: 10px;
-      color: var(--status-blocked);
-      margin-top: 6px;
-    }
-    .card-lease {
-      font-size: 10px;
-      color: var(--text-muted);
-      margin-top: 4px;
-    }
-    /* Empty State */
-    .empty-column {
-      text-align: center;
-      color: var(--text-muted);
-      padding: 24px 12px;
-      font-size: 12px;
-    }
-    /* Modal */
-    .modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.7);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      z-index: 200;
-      padding: 24px;
-    }
-    .modal-overlay.open {
-      display: flex;
-    }
-    .modal {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      max-width: 800px;
-      width: 100%;
-      max-height: 80vh;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    .modal-header {
-      padding: 16px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-    }
-    .modal-title-wrap {
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .modal-title {
-      font-size: 16px;
-      font-weight: 600;
-    }
-    .modal-task-id-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
-      font-size: 11px;
-      color: var(--text-muted);
-    }
-    .modal-task-id-value {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-      font-size: 11px;
-      color: var(--text-primary);
-      background: var(--bg-primary);
-      padding: 2px 8px;
-      border-radius: 999px;
-      max-width: 360px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .modal-task-id-copy {
-      border: 1px solid var(--border);
-      background: var(--bg-primary);
-      color: var(--text-muted);
-      border-radius: 4px;
-      font-size: 11px;
-      line-height: 1.3;
-      padding: 2px 8px;
-      cursor: pointer;
-      transition: color 120ms ease, border-color 120ms ease;
-    }
-    .modal-task-id-copy:hover:not(:disabled) {
-      color: var(--text-primary);
-    }
-    .modal-task-id-copy:disabled {
-      opacity: 0.55;
-      cursor: default;
-    }
-    .modal-task-id-copy.copied {
-      color: var(--status-done);
-      border-color: var(--status-done);
-    }
-    .modal-task-id-copy.failed {
-      color: var(--status-blocked);
-      border-color: var(--status-blocked);
-    }
-    .modal-close {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      font-size: 20px;
-      cursor: pointer;
-      padding: 0;
-      line-height: 1;
-    }
-    .modal-close:hover {
-      color: var(--text-primary);
-    }
-    .modal-body {
-      padding: 16px;
-      overflow-y: auto;
-      flex: 1;
-    }
-    .modal-section {
-      margin-bottom: 16px;
-    }
-    .modal-section:last-child {
-      margin-bottom: 0;
-    }
-    .modal-section-title {
-      font-size: 11px;
-      text-transform: uppercase;
-      color: var(--text-muted);
-      margin-bottom: 8px;
-      letter-spacing: 0.5px;
-    }
-    .modal-meta {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 8px;
-    }
-    .modal-meta-item {
-      background: var(--bg-primary);
-      padding: 8px 10px;
-      border-radius: 4px;
-    }
-    .modal-meta-label {
-      font-size: 10px;
-      color: var(--text-muted);
-      margin-bottom: 2px;
-    }
-    .modal-meta-value {
-      font-size: 12px;
-    }
-    .modal-meta-fallback {
-      color: var(--text-muted);
-    }
-    .modal-progress {
-      color: var(--accent);
-      background: rgba(245, 158, 11, 0.15);
-      padding: 2px 8px;
-      border-radius: 4px;
-    }
-    .modal-progress.complete {
-      color: var(--status-done);
-      background: rgba(34, 197, 94, 0.15);
-    }
-    .modal-description {
-      background: var(--bg-primary);
-      padding: 12px;
-      border-radius: 4px;
-      font-size: 12px;
-      line-height: 1.6;
-    }
-    /* Markdown content styles */
-    .modal-description h1,
-    .modal-description h2,
-    .modal-description h3,
-    .modal-description h4,
-    .modal-description h5,
-    .modal-description h6 {
-      margin: 16px 0 8px 0;
-      font-weight: 600;
-      line-height: 1.3;
-    }
-    .modal-description h1:first-child,
-    .modal-description h2:first-child,
-    .modal-description h3:first-child {
-      margin-top: 0;
-    }
-    .modal-description h1 { font-size: 18px; }
-    .modal-description h2 { font-size: 16px; }
-    .modal-description h3 { font-size: 14px; }
-    .modal-description h4,
-    .modal-description h5,
-    .modal-description h6 { font-size: 12px; }
-    .modal-description p {
-      margin: 8px 0;
-    }
-    .modal-description p:first-child {
-      margin-top: 0;
-    }
-    .modal-description p:last-child {
-      margin-bottom: 0;
-    }
-    .modal-description ul,
-    .modal-description ol {
-      margin: 8px 0;
-      padding-left: 20px;
-    }
-    .modal-description li {
-      margin: 4px 0;
-    }
-    .modal-description code {
-      background: var(--bg-secondary);
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-family: var(--font-mono);
-      font-size: 11px;
-    }
-    .modal-description pre {
-      background: var(--bg-secondary);
-      padding: 12px;
-      border-radius: 4px;
-      overflow-x: auto;
-      margin: 12px 0;
-    }
-    .modal-description pre code {
-      background: none;
-      padding: 0;
-      font-size: 11px;
-      line-height: 1.5;
-    }
-    .modal-description blockquote {
-      border-left: 3px solid var(--accent);
-      margin: 12px 0;
-      padding: 8px 12px;
-      background: var(--bg-secondary);
-      color: var(--text-secondary);
-    }
-    .modal-description blockquote p {
-      margin: 0;
-    }
-    .modal-description a {
-      color: var(--accent);
-      text-decoration: none;
-    }
-    .modal-description a:hover {
-      text-decoration: underline;
-    }
-    .modal-description hr {
-      border: none;
-      border-top: 1px solid var(--border);
-      margin: 16px 0;
-    }
-    .modal-description table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 12px 0;
-      font-size: 11px;
-    }
-    .modal-description th,
-    .modal-description td {
-      border: 1px solid var(--border);
-      padding: 6px 10px;
-      text-align: left;
-    }
-    .modal-description th {
-      background: var(--bg-secondary);
-      font-weight: 600;
-    }
-    .modal-description img {
-      max-width: 100%;
-      height: auto;
-    }
-    .modal-comments {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .comment {
-      background: var(--bg-primary);
-      padding: 10px;
-      border-radius: 4px;
-      border-left: 2px solid var(--accent);
-    }
-    .comment-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 4px;
-      font-size: 11px;
-      color: var(--text-muted);
-    }
-    .comment-author {
-      color: var(--accent);
-    }
-    .comment-text {
-      font-size: 12px;
-      white-space: pre-wrap;
-    }
-    .modal-checkpoint-list,
-    .modal-task-activity-list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .modal-checkpoint-entry,
-    .modal-task-activity-entry {
-      background: var(--bg-primary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 10px 12px;
-    }
-    .modal-checkpoint-header,
-    .modal-task-activity-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 10px;
-      margin-bottom: 6px;
-    }
-    .modal-checkpoint-name,
-    .modal-task-activity-type {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-primary);
-      line-height: 1.3;
-    }
-    .modal-entry-time {
-      color: var(--text-muted);
-      font-size: 11px;
-      white-space: nowrap;
-      line-height: 1.3;
-      margin-top: 1px;
-    }
-    .modal-checkpoint-data {
-      margin: 0;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      line-height: 1.45;
-      color: var(--text-secondary);
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 8px;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-    }
-    .modal-task-activity-author {
-      color: var(--text-secondary);
-      font-size: 11px;
-      margin-bottom: 4px;
-    }
-    .modal-task-activity-detail {
-      color: var(--text-primary);
-      font-size: 12px;
-      line-height: 1.45;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-    }
-    .show-more-btn {
-      width: 100%;
-      padding: 8px;
-      background: var(--bg-primary);
-      border: 1px dashed var(--border);
-      border-radius: 4px;
-      color: var(--text-secondary);
-      font-family: var(--font-mono);
-      font-size: 12px;
-      cursor: pointer;
-      transition: border-color 0.15s, color 0.15s;
-    }
-    .show-more-btn:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    .modal-tabs {
-      display: flex;
-      gap: 0;
-      border-bottom: 1px solid var(--border);
-      margin-bottom: 12px;
-    }
-    .modal-tab {
-      padding: 8px 16px;
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      font-family: var(--font-mono);
-      font-size: 12px;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-      margin-bottom: -1px;
-    }
-    .modal-tab:hover {
-      color: var(--text-primary);
-    }
-    .modal-tab.active {
-      color: var(--accent);
-      border-bottom-color: var(--accent);
-    }
-    .modal-tab:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-    .modal-tab-count {
-      background: var(--bg-primary);
-      padding: 1px 6px;
-      border-radius: 8px;
-      font-size: 10px;
-      margin-left: 6px;
-    }
-    .modal-tab-content {
-      display: none;
-    }
-    .modal-tab-content.active {
-      display: block;
-    }
-    .shortcuts-modal-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.65);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      z-index: 300;
-    }
-    .shortcuts-modal-overlay.open {
-      display: flex;
-    }
-    .shortcuts-modal {
-      width: min(460px, calc(100vw - 24px));
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
-      overflow: hidden;
-    }
-    .shortcuts-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .shortcuts-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .shortcuts-close {
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      font-size: 18px;
-      cursor: pointer;
-      line-height: 1;
-    }
-    .shortcuts-close:hover {
-      color: var(--text-primary);
-    }
-    .shortcuts-body {
-      padding: 14px 16px 16px;
-    }
-    .shortcuts-list {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 8px 12px;
-      align-items: center;
-    }
-    .shortcut-key {
-      display: inline-block;
-      min-width: 34px;
-      padding: 1px 8px;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      font-size: 11px;
-      text-align: center;
-      font-weight: 600;
-    }
-    .shortcut-desc {
-      color: var(--text-secondary);
-      font-size: 12px;
-    }
-    .shortcuts-note {
-      margin-top: 12px;
-      font-size: 11px;
-      color: var(--text-muted);
-    }
-    /* Activity Panel */
-    .activity-panel {
-      position: fixed;
-      top: 0;
-      right: -400px;
-      width: 400px;
-      height: 100vh;
-      background: var(--bg-secondary);
-      border-left: 1px solid var(--border);
-      z-index: 150;
-      transition: right 0.2s ease;
-      display: flex;
-      flex-direction: column;
-    }
-    .activity-panel.open {
-      right: 0;
-    }
-    .activity-header {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .activity-title {
-      font-weight: 600;
-      font-size: 14px;
-    }
-    .activity-close {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      font-size: 18px;
-      cursor: pointer;
-    }
-    .activity-filters {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 10px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .activity-filters select,
-    .activity-filters input {
-      width: 100%;
-      box-sizing: border-box;
-    }
-    .activity-filters input {
-      font-family: var(--font-mono);
-      font-size: 12px;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      padding: 4px 8px;
-      border-radius: 4px;
-    }
-    .activity-filters input:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    .activity-list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px;
-    }
-    .activity-item {
-      padding: 10px;
-      border-bottom: 1px solid var(--border);
-      cursor: pointer;
-    }
-    .activity-item:last-child {
-      border-bottom: none;
-    }
-    .activity-item-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 4px;
-    }
-    .activity-type {
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      padding: 2px 6px;
-      border-radius: 3px;
-      background: var(--bg-primary);
-    }
-    .activity-type.status_changed { color: var(--status-in-progress); }
-    .activity-type.task_created { color: var(--status-ready); }
-    .activity-type.comment_added { color: var(--accent); }
-    .activity-type.checkpoint_recorded { color: var(--text-secondary); }
-    .activity-time {
-      font-size: 10px;
-      color: var(--text-muted);
-    }
-    .activity-task {
-      font-size: 12px;
-      color: var(--text-primary);
-      margin-top: 4px;
-    }
-    .activity-detail {
-      font-size: 11px;
-      color: var(--text-muted);
-      margin-top: 2px;
-    }
-    /* Graph Container */
-    .graph-container {
-      flex: 1;
-      position: relative;
-      min-height: 400px;
-      background: var(--bg-primary);
-    }
-    .graph-container.hidden {
-      display: none;
-    }
-    .graph-loading {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      color: var(--text-secondary);
-    }
-    .graph-loading .spinner {
-      width: 24px;
-      height: 24px;
-      border: 2px solid var(--border);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    /* Mobile Styles */
-    @media (max-width: 768px) {
-      .header {
-        flex-wrap: wrap;
-        row-gap: 10px;
-        align-items: center;
-        align-content: flex-start;
-      }
-      .header-left {
-        order: 1;
-        flex: 0 0 auto;
-        min-height: 42px;
-      }
-      .header-right {
-        order: 2;
-        flex: 0 0 auto;
-        margin-left: auto;
-        min-height: 42px;
-        gap: 8px;
-      }
-      .header-filters {
-        order: 3;
-        flex: 0 0 100%;
-        width: 100%;
-        max-width: 100%;
-        min-width: 100%;
-        display: none;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 8px;
-        border-top: 1px solid var(--border);
-        padding-top: 8px;
-      }
-      .header-filters.open {
-        display: flex;
-      }
-      .filter-group {
-        width: 100%;
-        max-width: 100%;
-      }
-      .task-search-group {
-        width: 100%;
-      }
-      .task-search-input {
-        flex: 1;
-        width: 100%;
-      }
-      #dateFilter,
-      #projectFilter,
-      #assigneeFilter {
-        min-width: 0;
-        width: 100%;
-      }
-      .task-search-meta {
-        display: none;
-      }
-      .board {
-        display: none;
-      }
-      .graph-container {
-        min-height: calc(100vh - 150px);
-      }
-      .mobile-tabs {
-        display: flex;
-        overflow-x: auto;
-        background: var(--bg-secondary);
-        border-bottom: 1px solid var(--border);
-        padding: 0 8px;
-      }
-      .mobile-tab {
-        flex: 0 0 auto;
-        padding: 12px 16px;
-        font-size: 12px;
-        color: var(--text-muted);
-        border-bottom: 2px solid transparent;
-        cursor: pointer;
-        white-space: nowrap;
-      }
-      .mobile-tab.active {
-        color: var(--accent);
-        border-bottom-color: var(--accent);
-      }
-      .mobile-tab-badge {
-        background: var(--bg-primary);
-        padding: 1px 6px;
-        border-radius: 8px;
-        font-size: 10px;
-        margin-left: 6px;
-      }
-      .mobile-cards {
-        display: none;
-        padding: 12px;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .mobile-cards.active {
-        display: flex;
-      }
-      .card-assignee {
-        max-width: 110px;
-      }
-      .activity-panel {
-        width: 100%;
-        right: -100%;
-      }
-    }
-    @media (min-width: 769px) {
-      .mobile-tabs,
-      .mobile-cards {
-        display: none !important;
-      }
-    }
-    /* Hamburger menu for mobile */
-    .hamburger {
-      display: none;
-      background: none;
-      border: none;
-      color: var(--text-primary);
-      font-size: 20px;
-      cursor: pointer;
-    }
-    @media (max-width: 768px) {
-      .hamburger {
-        display: block;
-      }
-    }
-    /* Calendar View */
-    .calendar-container {
-      padding: 16px 24px;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    .calendar-container.hidden { display: none; }
-    .calendar-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-    }
-    .calendar-nav-btn {
-      font-family: var(--font-mono);
-      font-size: 14px;
-      background: var(--bg-card);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 4px 10px;
-      cursor: pointer;
-    }
-    .calendar-nav-btn:hover { background: var(--bg-hover); }
-    .calendar-month-label {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--text-primary);
-      min-width: 200px;
-      text-align: center;
-    }
-    .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 1px;
-      background: var(--border);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      overflow: hidden;
-    }
-    .calendar-day-header {
-      background: var(--bg-card);
-      color: var(--text-muted);
-      font-size: 12px;
-      font-weight: 600;
-      text-align: center;
-      padding: 8px 4px;
-      text-transform: uppercase;
-    }
-    .calendar-day {
-      background: var(--bg-card);
-      min-height: 100px;
-      padding: 4px;
-      display: flex;
-      flex-direction: column;
-    }
-    .calendar-day.other-month {
-      opacity: 0.35;
-    }
-    .calendar-day.today {
-      border: 2px solid var(--accent);
-      border-radius: 2px;
-    }
-    .calendar-day-number {
-      font-size: 12px;
-      color: var(--text-secondary);
-      margin-bottom: 4px;
-      font-weight: 500;
-    }
-    .calendar-day.today .calendar-day-number {
-      color: var(--accent);
-      font-weight: 700;
-    }
-    .calendar-day-tasks {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      flex: 1;
-    }
-    .calendar-mini-card { border-left-color: var(--text-muted); }
-    .calendar-mini-card[data-status="backlog"] { border-left-color: var(--status-backlog); }
-    .calendar-mini-card[data-status="ready"] { border-left-color: var(--status-ready); }
-    .calendar-mini-card[data-status="in_progress"] { border-left-color: var(--status-in-progress); }
-    .calendar-mini-card[data-status="blocked"] { border-left-color: var(--status-blocked); }
-    .calendar-mini-card[data-status="done"] { border-left-color: var(--status-done); }
-    .calendar-mini-card {
-      background: var(--bg-primary);
-      border-left: 3px solid;
-      border-radius: 3px;
-      padding: 2px 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      overflow: hidden;
-    }
-    .calendar-mini-card:hover { background: var(--bg-hover); }
-    .calendar-mini-title {
-      font-size: 11px;
-      color: var(--text-primary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-    }
-    .calendar-mini-project {
-      font-size: 9px;
-      color: var(--text-muted);
-      background: var(--bg-card);
-      padding: 0 4px;
-      border-radius: 3px;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    .calendar-more-link {
-      font-size: 11px;
-      color: var(--accent);
-      cursor: pointer;
-      padding: 1px 4px;
-    }
-    .calendar-more-link:hover { text-decoration: underline; }
-    .calendar-popover {
-      position: absolute;
-      z-index: 100;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-      padding: 8px;
-      min-width: 200px;
-      max-width: 280px;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-    .calendar-popover-header {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-secondary);
-      margin-bottom: 6px;
-      padding-bottom: 4px;
-      border-bottom: 1px solid var(--border);
-    }
-    .calendar-popover .calendar-mini-card {
-      margin-bottom: 2px;
-    }
-    .calendar-empty-state {
-      text-align: center;
-      color: var(--text-muted);
-      padding: 32px 16px;
-      font-size: 14px;
-    }
-  </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HZL Dashboard</title>
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <script type="module" crossorigin src="/assets/index-DhxVdKMf.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CdpHwHFG.css">
 </head>
 <body>
-  <header class="header">
-    <div class="header-left">
-      <button class="hamburger" id="hamburgerBtn">&#9776;</button>
-      <span class="logo">HZL</span>
-    </div>
-    <div class="header-filters">
-      <div class="filter-group">
-        <select id="dateFilter">
-          <option value="1d">Today</option>
-          <option value="3d" selected>Last 3 days</option>
-          <option value="7d">Last 7 days</option>
-          <option value="14d">Last 14 days</option>
-          <option value="30d">Last 30 days</option>
-        </select>
-      </div>
-      <div class="filter-group">
-        <select id="projectFilter">
-          <option value="">All projects</option>
-        </select>
-      </div>
-      <div class="filter-group">
-      <select id="assigneeFilter">
-        <option value="">Any Agent</option>
-      </select>
-      </div>
-      <div class="filter-group task-search-group" id="taskSearchGroup">
-        <input
-          type="search"
-          id="taskSearchInput"
-          class="task-search-input"
-          placeholder="Find task (/)"
-          aria-label="Search tasks"
-        >
-        <button type="button" class="task-search-clear" id="taskSearchClear" hidden>&times;</button>
-        <span class="task-search-meta" id="taskSearchMeta"></span>
-      </div>
-      <div class="filter-group settings-group">
-        <button class="settings-toggle" id="settingsToggle" title="Settings">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
-            <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
-          </svg>
-        </button>
-        <div class="settings-dropdown" id="settingsDropdown">
-          <div class="settings-section">
-            <label class="settings-label" for="viewFilter">View</label>
-            <select id="viewFilter" class="settings-view-select" aria-label="Select view">
-              <option value="kanban">Kanban</option>
-              <option value="calendar">Calendar</option>
-              <option value="graph">Graph</option>
-            </select>
-          </div>
-          <div class="settings-section">
-            <label class="settings-label">Refresh</label>
-            <select id="refreshFilter">
-              <option value="1000">1s</option>
-              <option value="2000">2s</option>
-              <option value="5000" selected>5s</option>
-              <option value="10000">10s</option>
-              <option value="30000">30s</option>
-            </select>
-          </div>
-          <div class="settings-section">
-            <label class="settings-label">Columns</label>
-            <div class="column-checkboxes">
-              <label class="column-checkbox">
-                <input type="checkbox" value="backlog" checked> Backlog
-              </label>
-              <label class="column-checkbox">
-                <input type="checkbox" value="ready" checked> Ready
-              </label>
-              <label class="column-checkbox">
-                <input type="checkbox" value="in_progress" checked> In Progress
-              </label>
-              <label class="column-checkbox">
-                <input type="checkbox" value="blocked" checked> Blocked
-              </label>
-              <label class="column-checkbox">
-                <input type="checkbox" value="done" checked> Done
-              </label>
-            </div>
-          </div>
-          <div class="settings-section">
-            <label class="column-checkbox">
-              <input type="checkbox" id="showSubtasks" checked> Show subtasks
-            </label>
-          </div>
-          <div class="settings-section">
-            <label class="settings-label">Parent View</label>
-            <div class="collapse-parents-actions">
-              <button type="button" class="collapse-parents-btn" id="collapseAllParentsBtn">Collapse all</button>
-              <button type="button" class="collapse-parents-btn" id="expandAllParentsBtn">Expand all</button>
-            </div>
-            <div class="collapse-parents-meta" id="collapseParentsMeta"></div>
-          </div>
-          <div class="settings-section">
-            <button
-              type="button"
-              class="settings-shortcuts-btn"
-              id="shortcutsBtn"
-              title="Keyboard shortcuts (?)"
-              aria-label="Keyboard shortcuts"
-            >
-              Shortcuts (?)
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="header-right">
-      <div class="connection-indicator">
-        <div class="connection-dot" id="connectionDot"></div>
-        <span id="connectionText">Connecting...</span>
-      </div>
-      <button class="activity-btn" id="activityBtn">Activity</button>
-    </div>
-  </header>
-  <!-- Mobile Tabs -->
-  <div class="mobile-tabs" id="mobileTabs">
-    <div class="mobile-tab" data-status="backlog">Backlog <span class="mobile-tab-badge" id="badge-backlog">0</span></div>
-    <div class="mobile-tab active" data-status="ready">Ready <span class="mobile-tab-badge" id="badge-ready">0</span></div>
-    <div class="mobile-tab" data-status="in_progress">In Progress <span class="mobile-tab-badge" id="badge-in_progress">0</span></div>
-    <div class="mobile-tab" data-status="blocked">Blocked <span class="mobile-tab-badge" id="badge-blocked">0</span></div>
-    <div class="mobile-tab" data-status="done">Done <span class="mobile-tab-badge" id="badge-done">0</span></div>
-  </div>
-  <!-- Mobile Cards Container -->
-  <div id="mobileCardsContainer"></div>
-  <!-- Desktop Kanban Board -->
-  <main class="board" id="board">
-    <div class="column" data-status="backlog">
-      <div class="column-header">
-        <span class="column-title">Backlog</span>
-        <span class="column-count" id="count-backlog">0</span>
-      </div>
-      <div class="column-cards" id="cards-backlog"></div>
-    </div>
-    <div class="column" data-status="ready">
-      <div class="column-header">
-        <span class="column-title">Ready</span>
-        <span class="column-count" id="count-ready">0</span>
-      </div>
-      <div class="column-cards" id="cards-ready"></div>
-    </div>
-    <div class="column" data-status="in_progress">
-      <div class="column-header">
-        <span class="column-title">In Progress</span>
-        <span class="column-count" id="count-in_progress">0</span>
-      </div>
-      <div class="column-cards" id="cards-in_progress"></div>
-    </div>
-    <div class="column" data-status="blocked">
-      <div class="column-header">
-        <span class="column-title">Blocked</span>
-        <span class="column-count" id="count-blocked">0</span>
-      </div>
-      <div class="column-cards" id="cards-blocked"></div>
-    </div>
-    <div class="column" data-status="done">
-      <div class="column-header">
-        <span class="column-title">Done</span>
-        <span class="column-count" id="count-done">0</span>
-      </div>
-      <div class="column-cards" id="cards-done"></div>
-    </div>
-  </main>
-  <!-- Calendar View Container -->
-  <div id="calendarContainer" class="calendar-container hidden"></div>
-  <!-- Graph View Container -->
-  <div id="graphContainer" class="graph-container hidden">
-    <div class="graph-loading" id="graphLoading">
-      <div class="spinner"></div>
-      <span>Loading graph...</span>
-    </div>
-  </div>
-  <!-- Task Detail Modal -->
-  <div class="modal-overlay" id="modalOverlay">
-    <div class="modal">
-      <div class="modal-header">
-        <div class="modal-title-wrap">
-          <span class="modal-title" id="modalTitle">Task Details</span>
-          <div class="modal-task-id-row">
-            <span>Task ID</span>
-            <span class="modal-task-id-value" id="modalTaskIdValue">-</span>
-            <button type="button" class="modal-task-id-copy" id="modalTaskIdCopy" disabled>Copy</button>
-          </div>
-        </div>
-        <button class="modal-close" id="modalClose">&times;</button>
-      </div>
-      <div class="modal-body" id="modalBody">
-        <!-- Populated by JavaScript -->
-      </div>
-    </div>
-  </div>
-  <!-- Activity Panel -->
-  <div class="activity-panel" id="activityPanel">
-    <div class="activity-header">
-      <span class="activity-title">Activity</span>
-      <button class="activity-close" id="activityClose">&times;</button>
-    </div>
-    <div class="activity-filters">
-      <select id="activityAssigneeFilter">
-        <option value="">Any Agent</option>
-      </select>
-      <input
-        type="search"
-        id="activityKeywordFilter"
-        placeholder="Search title/description (3+ chars)"
-      >
-    </div>
-    <div class="activity-list" id="activityList">
-      <!-- Populated by JavaScript -->
-    </div>
-  </div>
-  <div class="shortcuts-modal-overlay" id="shortcutsModalOverlay">
-    <div class="shortcuts-modal">
-      <div class="shortcuts-header">
-        <span class="shortcuts-title">Keyboard Shortcuts</span>
-        <button type="button" class="shortcuts-close" id="shortcutsClose">&times;</button>
-      </div>
-      <div class="shortcuts-body">
-        <div class="shortcuts-list">
-          <span class="shortcut-key">/</span><span class="shortcut-desc">Focus task search</span>
-          <span class="shortcut-key">a</span><span class="shortcut-desc">Toggle activity panel</span>
-          <span class="shortcut-key">?</span><span class="shortcut-desc">Open this shortcuts dialog</span>
-          <span class="shortcut-key">Esc</span><span class="shortcut-desc">Close open dialogs/panels</span>
-        </div>
-        <div class="shortcuts-note">Shortcuts are disabled while typing in inputs.</div>
-      </div>
-    </div>
-  </div>
-  <script>
-    // State
-    let tasks = [];
-    let events = [];
-    let lastEventId = 0;
-    const SSE_ENDPOINT = '/api/events/stream';
-    const SSE_MIN_RECONNECT_MS = 1000;
-    const SSE_MAX_RECONNECT_MS = 30000;
-    const SSE_HEARTBEAT_MARKERS = new Set(['ping', 'pong', 'heartbeat', 'keepalive', 'keep-alive']);
-    let eventSource = null;
-    let reconnectTimer = null;
-    let reconnectAttempt = 0;
-    let reconnectAt = null;
-    let streamState = 'connecting'; // connecting | live | reconnecting | paused
-    let windowHasFocus = typeof document.hasFocus === 'function' ? document.hasFocus() : true;
-    let pendingPoll = false; // Queue refreshes while a poll() is in flight
-    let lastPollTime = null;
-    let lastPollError = false;
-    let selectedTask = null;
-    let showAllComments = false;
-    let showAllCheckpoints = false;
-    let showAllTaskActivity = false;
-    let activeModalTab = 'comments';
-    const COMMENT_DISPLAY_LIMIT = 15;
-    const CHECKPOINT_DISPLAY_LIMIT = 15;
-    const TASK_ACTIVITY_DISPLAY_LIMIT = 20;
-    let activeTab = 'ready';
-    let activeView = 'kanban';
-    let taskSearchQuery = '';
-    let collapsedParents = new Set();
-    let graphInstance = null;
-    let graphInitialized = false;
-    let nodeStatusMap = new Map();
-    let pendingModalRequestId = 0; // Track modal fetch requests to avoid race conditions
-    let isPolling = false; // Guard against concurrent poll() calls
-    let copyFeedbackTimer = null;
-    let calendarYear = new Date().getFullYear();
-    let calendarMonth = new Date().getMonth(); // 0-indexed
-    let initialTaskIdFromUrl = null;
-    let initialActivityPanelOpen = false;
-    // DOM Elements
-    const dateFilter = document.getElementById('dateFilter');
-    const taskSearchInput = document.getElementById('taskSearchInput');
-    const taskSearchClear = document.getElementById('taskSearchClear');
-    const taskSearchMeta = document.getElementById('taskSearchMeta');
-    const taskSearchGroup = document.getElementById('taskSearchGroup');
-    const projectFilter = document.getElementById('projectFilter');
-    const assigneeFilter = document.getElementById('assigneeFilter');
-    const refreshFilter = document.getElementById('refreshFilter');
-    const connectionDot = document.getElementById('connectionDot');
-    const connectionText = document.getElementById('connectionText');
-    const shortcutsBtn = document.getElementById('shortcutsBtn');
-    const shortcutsModalOverlay = document.getElementById('shortcutsModalOverlay');
-    const shortcutsClose = document.getElementById('shortcutsClose');
-    const activityBtn = document.getElementById('activityBtn');
-    const activityPanel = document.getElementById('activityPanel');
-    const activityClose = document.getElementById('activityClose');
-    const activityAssigneeFilter = document.getElementById('activityAssigneeFilter');
-    const activityKeywordFilter = document.getElementById('activityKeywordFilter');
-    const activityList = document.getElementById('activityList');
-    const modalOverlay = document.getElementById('modalOverlay');
-    const modalClose = document.getElementById('modalClose');
-    const modalTitle = document.getElementById('modalTitle');
-    const modalTaskIdValue = document.getElementById('modalTaskIdValue');
-    const modalTaskIdCopy = document.getElementById('modalTaskIdCopy');
-    const modalBody = document.getElementById('modalBody');
-    const hamburgerBtn = document.getElementById('hamburgerBtn');
-    const mobileTabs = document.getElementById('mobileTabs');
-    const settingsToggle = document.getElementById('settingsToggle');
-    const settingsDropdown = document.getElementById('settingsDropdown');
-    const viewFilter = document.getElementById('viewFilter');
-    const showSubtasksCheckbox = document.getElementById('showSubtasks');
-    const collapseAllParentsBtn = document.getElementById('collapseAllParentsBtn');
-    const expandAllParentsBtn = document.getElementById('expandAllParentsBtn');
-    const collapseParentsMeta = document.getElementById('collapseParentsMeta');
-    const board = document.getElementById('board');
-    const calendarContainer = document.getElementById('calendarContainer');
-    const graphContainer = document.getElementById('graphContainer');
-    const graphLoading = document.getElementById('graphLoading');
-    let pendingProjectPreference = null;
-    let pendingAssigneePreference = null;
-    let pendingActivityAssigneePreference = null;
-    const columnScrollTimers = new WeakMap();
-    // Column visibility
-    const COLUMNS = ['backlog', 'ready', 'in_progress', 'blocked', 'done'];
-    // Emoji family system for parent/child task indicators
-    const FAMILY_EMOJIS = [
-      '🔷', '🔶', '🔴', '🟢', '🔵', '🟡', '🟣', '🟠',
-      '⬛', '⬜', '🔳', '🔲', '▪️', '▫️', '◾', '◽',
-      '💠', '🔹', '🔸', '♦️', '♠️', '♣️', '♥️', '🃏',
-      '⭐', '🌟', '✨', '💫', '🔆', '🔅', '☀️', '🌙',
-      '🎯', '🎪', '🎨', '🎭', '🎬', '🎮', '🎲', '🎸',
-      '🔑', '🔐', '🔒', '🔓', '🗝️', '⚡', '💡', '🔔'
-    ];
-    // djb2 hash for deterministic emoji assignment
-    function getTaskEmoji(taskId) {
-      let hash = 5381;
-      for (let i = 0; i < taskId.length; i++) {
-        hash = ((hash << 5) + hash) ^ taskId.charCodeAt(i);
-      }
-      return FAMILY_EMOJIS[Math.abs(hash) % FAMILY_EMOJIS.length];
-    }
-    function getTaskFamilyColor(taskId) {
-      let hash = 5381;
-      for (let i = 0; i < taskId.length; i++) {
-        hash = ((hash << 5) + hash) ^ taskId.charCodeAt(i);
-      }
-      const hue = Math.abs(hash) % 360;
-      return `hsl(${hue} 55% 55%)`;
-    }
-    // Build emoji map with suffix numbers for children
-    function buildEmojiMap(taskList) {
-      // Build set of known task IDs for visible parent detection
-      const taskIds = new Set(taskList.map(t => t.task_id));
-      // Group visible children by parent for suffix ordering
-      // Only children whose parent is visible get suffix numbers
-      const childrenByParent = new Map();
-      for (const task of taskList) {
-        if (task.parent_id && taskIds.has(task.parent_id)) {
-          if (!childrenByParent.has(task.parent_id)) {
-            childrenByParent.set(task.parent_id, []);
-          }
-          childrenByParent.get(task.parent_id).push(task);
-        }
-      }
-      // Sort children by task_id for stable suffix ordering
-      for (const children of childrenByParent.values()) {
-        children.sort((a, b) => a.task_id.localeCompare(b.task_id));
-      }
-      // Build emoji assignments
-      const emojiMap = new Map(); // task_id -> { emoji, suffix }
-      for (const task of taskList) {
-        if (task.parent_id) {
-          // Child task: always use parent's emoji for family consistency
-          // (even if parent is filtered out)
-          const emoji = getTaskEmoji(task.parent_id);
-          // Only show suffix if parent is visible (siblings can be compared)
-          const siblings = childrenByParent.get(task.parent_id) || [];
-          const suffix = siblings.length > 0 ? siblings.indexOf(task) + 1 : null;
-          emojiMap.set(task.task_id, { emoji, suffix: suffix || null });
-        } else {
-          // Parent or standalone task: use own emoji, no suffix
-          emojiMap.set(task.task_id, { emoji: getTaskEmoji(task.task_id), suffix: null });
-        }
-      }
-      return emojiMap;
-    }
-    function updateColumnVisibility() {
-      COLUMNS.forEach(status => {
-        const checkbox = settingsDropdown.querySelector(`input[value="${status}"]`);
-        const column = document.querySelector(`.column[data-status="${status}"]`);
-        if (column && checkbox) {
-          column.classList.toggle('hidden', !checkbox.checked);
-        }
-      });
-    }
-    function normalizeTaskSearchQuery(value) {
-      if (typeof value !== 'string') return '';
-      return value.trim().replace(/\s+/g, ' ').slice(0, 120);
-    }
-    function getTaskSearchQuery() {
-      return taskSearchQuery.toLowerCase();
-    }
-    function taskMatchesSearch(task, query) {
-      if (!query) return true;
-      const terms = query.split(' ');
-      const haystack = [
-        task.task_id,
-        task.title,
-        task.project,
-        getAssigneeValue(task.assignee),
-        task.description,
-        Array.isArray(task.tags) ? task.tags.join(' ') : '',
-        Array.isArray(task.blocked_by) ? task.blocked_by.join(' ') : '',
-      ]
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase();
-      return terms.every((term) => haystack.includes(term));
-    }
-    function getParentTaskIds(taskList = tasks) {
-      return taskList
-        .filter((task) => (task.subtask_total ?? 0) > 0)
-        .map((task) => task.task_id);
-    }
-    function pruneCollapsedParents(taskList = tasks) {
-      const validParents = new Set(getParentTaskIds(taskList));
-      let changed = false;
-      for (const parentId of Array.from(collapsedParents)) {
-        if (!validParents.has(parentId)) {
-          collapsedParents.delete(parentId);
-          changed = true;
-        }
-      }
-      return changed;
-    }
-    function updateCollapseControls() {
-      const parentIds = getParentTaskIds(tasks);
-      const collapsedCount = parentIds.filter((parentId) => collapsedParents.has(parentId)).length;
-      const showSubtasks = showSubtasksCheckbox.checked;
-      collapseAllParentsBtn.disabled = !showSubtasks || parentIds.length === 0 || collapsedCount === parentIds.length;
-      expandAllParentsBtn.disabled = !showSubtasks || collapsedCount === 0;
-      if (parentIds.length === 0) {
-        collapseParentsMeta.textContent = 'No parent tasks';
-        return;
-      }
-      if (!showSubtasks) {
-        collapseParentsMeta.textContent = 'Enable "Show subtasks" to expand by parent';
-        return;
-      }
-      collapseParentsMeta.textContent = `${collapsedCount}/${parentIds.length} collapsed`;
-    }
-    function toggleParentCollapsed(parentId) {
-      if (!parentId) return;
-      if (collapsedParents.has(parentId)) {
-        collapsedParents.delete(parentId);
-      } else {
-        collapsedParents.add(parentId);
-      }
-      savePreferences();
-      renderBoard();
-      renderActivity();
-    }
-    function collapseAllParents() {
-      if (!showSubtasksCheckbox.checked) return;
-      for (const parentId of getParentTaskIds(tasks)) {
-        collapsedParents.add(parentId);
-      }
-      savePreferences();
-      renderBoard();
-      renderActivity();
-    }
-    function expandAllParents() {
-      for (const parentId of getParentTaskIds(tasks)) {
-        collapsedParents.delete(parentId);
-      }
-      savePreferences();
-      renderBoard();
-      renderActivity();
-    }
-    function parseYearMonth(value) {
-      const match = /^(\d{4})-(0[1-9]|1[0-2])$/.exec(value);
-      if (!match) return null;
-      return {
-        year: Number(match[1]),
-        month: Number(match[2]) - 1,
-      };
-    }
-    function getActiveTaskId() {
-      const taskId = selectedTask?.task?.task_id;
-      return typeof taskId === 'string' && taskId ? taskId : null;
-    }
-    function setShortcutsModalOpen(open) {
-      shortcutsModalOverlay.classList.toggle('open', open);
-    }
-    function setActivityPanelOpen(open, options = {}) {
-      const { persist = true } = options;
-      activityPanel.classList.toggle('open', open);
-      if (persist) {
-        syncUrlState();
-      }
-    }
-    function setActiveTab(status, options = {}) {
-      const { persist = true } = options;
-      if (!COLUMNS.includes(status)) return;
-      activeTab = status;
-      document.querySelectorAll('.mobile-tab').forEach((tab) => {
-        tab.classList.toggle('active', tab.dataset.status === activeTab);
-      });
-      document.querySelectorAll('.mobile-cards').forEach((cards) => {
-        cards.classList.toggle('active', cards.dataset.status === activeTab);
-      });
-      if (persist) {
-        savePreferences();
-      }
-    }
-    function buildUrlStateParams() {
-      const params = new URLSearchParams();
-      if (activeView !== 'kanban') {
-        params.set('view', activeView);
-      }
-      if (activeView === 'calendar') {
-        const month = String(calendarMonth + 1).padStart(2, '0');
-        params.set('month', `${calendarYear}-${month}`);
-      } else if (dateFilter.value !== '3d') {
-        params.set('since', dateFilter.value);
-      }
-      if (projectFilter.value) params.set('project', projectFilter.value);
-      if (assigneeFilter.value) params.set('assignee', assigneeFilter.value);
-      if (taskSearchQuery) params.set('q', taskSearchQuery);
-      if (!showSubtasksCheckbox.checked) params.set('subtasks', '0');
-      if (activeTab !== 'ready') params.set('tab', activeTab);
-      if (activityAssigneeFilter.value) params.set('activity_assignee', activityAssigneeFilter.value);
-      if (activityKeywordFilter.value.trim()) params.set('activity_q', activityKeywordFilter.value.trim());
-      if (activityPanel.classList.contains('open')) params.set('activity', '1');
-      const taskId = getActiveTaskId();
-      if (taskId) params.set('task', taskId);
-      return params;
-    }
-    function syncUrlState() {
-      const params = buildUrlStateParams();
-      const query = params.toString();
-      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash || ''}`;
-      history.replaceState(null, '', nextUrl);
-    }
-    function applyUrlStateOverrides() {
-      const params = new URLSearchParams(window.location.search);
-      let preferredView = null;
-      const since = params.get('since');
-      const validDateValues = new Set(Array.from(dateFilter.options).map((option) => option.value));
-      if (since && validDateValues.has(since)) {
-        dateFilter.value = since;
-      }
-      const view = params.get('view');
-      if (view && (view === 'kanban' || view === 'calendar' || view === 'graph')) {
-        preferredView = view;
-      }
-      const monthParam = params.get('month');
-      if (monthParam) {
-        const parsedMonth = parseYearMonth(monthParam);
-        if (parsedMonth) {
-          calendarYear = parsedMonth.year;
-          calendarMonth = parsedMonth.month;
-          if (!preferredView) preferredView = 'calendar';
-        }
-      }
-      const project = params.get('project');
-      if (project !== null) {
-        pendingProjectPreference = project;
-      }
-      const assignee = params.get('assignee');
-      if (assignee !== null) {
-        pendingAssigneePreference = assignee;
-      }
-      const activityAssignee = params.get('activity_assignee');
-      if (activityAssignee !== null) {
-        pendingActivityAssigneePreference = activityAssignee;
-      }
-      const activityKeyword = params.get('activity_q');
-      if (activityKeyword !== null) {
-        activityKeywordFilter.value = activityKeyword;
-      }
-      const searchQuery = params.get('q');
-      if (searchQuery !== null) {
-        taskSearchQuery = normalizeTaskSearchQuery(searchQuery);
-        taskSearchInput.value = taskSearchQuery;
-      }
-      const subtasks = params.get('subtasks');
-      if (subtasks === '0') showSubtasksCheckbox.checked = false;
-      if (subtasks === '1') showSubtasksCheckbox.checked = true;
-      const tab = params.get('tab');
-      if (tab && COLUMNS.includes(tab)) {
-        activeTab = tab;
-      }
-      const taskId = params.get('task');
-      if (taskId && taskId.trim()) {
-        initialTaskIdFromUrl = taskId.trim();
-      }
-      initialActivityPanelOpen = params.get('activity') === '1';
-      return { preferredView };
-    }
-    // Load saved preferences
-    function loadPreferences() {
-      let preferredView = null;
-      const saved = localStorage.getItem('hzl-dashboard-prefs');
-      if (saved) {
-        try {
-          const prefs = JSON.parse(saved);
-          if (prefs.dateFilter) dateFilter.value = prefs.dateFilter;
-          if (typeof prefs.projectFilter === 'string') pendingProjectPreference = prefs.projectFilter;
-          if (typeof prefs.assigneeFilter === 'string') pendingAssigneePreference = prefs.assigneeFilter;
-          if (typeof prefs.activityAssigneeFilter === 'string') pendingActivityAssigneePreference = prefs.activityAssigneeFilter;
-          if (typeof prefs.activityKeywordFilter === 'string') activityKeywordFilter.value = prefs.activityKeywordFilter;
-          if (typeof prefs.taskSearch === 'string') {
-            taskSearchQuery = normalizeTaskSearchQuery(prefs.taskSearch);
-            taskSearchInput.value = taskSearchQuery;
-          }
-          if (prefs.refreshFilter) refreshFilter.value = prefs.refreshFilter;
-          if (Array.isArray(prefs.columnVisibility)) {
-            settingsDropdown.querySelectorAll('.column-checkboxes input[type="checkbox"]').forEach(cb => {
-              cb.checked = prefs.columnVisibility.includes(cb.value);
-            });
-            updateColumnVisibility();
-          }
-          if (prefs.showSubtasks !== undefined) {
-            showSubtasksCheckbox.checked = prefs.showSubtasks;
-          }
-          if (Array.isArray(prefs.collapsedParents)) {
-            collapsedParents = new Set(
-              prefs.collapsedParents.filter((value) => typeof value === 'string' && value.length > 0)
-            );
-          }
-          if (typeof prefs.activeTab === 'string' && COLUMNS.includes(prefs.activeTab)) {
-            activeTab = prefs.activeTab;
-          }
-          if (prefs.activeView && prefs.activeView !== 'kanban') {
-            preferredView = prefs.activeView;
-          }
-        } catch {}
-      }
-      const urlOverrides = applyUrlStateOverrides();
-      if (urlOverrides.preferredView) {
-        preferredView = urlOverrides.preferredView;
-      }
-      if (initialActivityPanelOpen) {
-        setActivityPanelOpen(true, { persist: false });
-      }
-      setActiveTab(activeTab, { persist: false });
-      updateTaskSearchUi();
-      updateCollapseControls();
-      if (preferredView && preferredView !== 'kanban') {
-        // Defer view switch until after ForceGraph may have loaded
-        setTimeout(() => setActiveView(preferredView), 100);
-      }
-    }
-    function savePreferences() {
-      const prefs = {
-        dateFilter: dateFilter.value,
-        projectFilter: projectFilter.value,
-        assigneeFilter: assigneeFilter.value,
-        activityAssigneeFilter: activityAssigneeFilter.value,
-        activityKeywordFilter: activityKeywordFilter.value,
-        taskSearch: taskSearchQuery,
-        refreshFilter: refreshFilter.value,
-        columnVisibility: Array.from(
-          settingsDropdown.querySelectorAll('.column-checkboxes input[type="checkbox"]:checked')
-        ).map(cb => cb.value),
-        showSubtasks: showSubtasksCheckbox.checked,
-        collapsedParents: Array.from(collapsedParents),
-        activeView: activeView,
-        activeTab: activeTab,
-      };
-      localStorage.setItem('hzl-dashboard-prefs', JSON.stringify(prefs));
-      syncUrlState();
-    }
-    // Graph View Functions
-    function handleGraphLibError() {
-      console.warn('[hzl] force-graph CDN failed to load');
-      const graphOption = viewFilter.querySelector('option[value="graph"]');
-      if (graphOption) {
-        graphOption.disabled = true;
-        graphOption.textContent = 'Graph (unavailable)';
-      }
-      if (activeView === 'graph') {
-        setActiveView('kanban');
-      }
-    }
-    function getStatusColor(status, type) {
-      if (type === 'root') return '#f59e0b';
-      if (type === 'project') return '#e5e5e5';
-      const colors = {
-        backlog: '#6b7280',     // gray - not yet prioritized
-        ready: '#3b82f6',       // blue - available to claim
-        in_progress: '#f59e0b', // orange - active work
-        blocked: '#ef4444',     // red - stuck, needs help
-        done: '#22c55e',        // green - completed
-      };
-      return colors[status] ?? '#6b7280';
-    }
-    function getNodeSize(node) {
-      if (node.type === 'root') return 20;
-      if (node.type === 'project') return 14;
-      const progress = node.progress ?? 0;
-      return 8 + (progress / 100) * 16;
-    }
-    function transformTasksToGraph(taskList) {
-      const nodes = [{ id: 'root', type: 'root', name: 'HZL', ring: 0, angle: 0 }];
-      const links = [];
-      const projectList = [];
-      const projectAngles = new Map();
-      nodeStatusMap.clear();
-      // First pass: collect unique projects
-      for (const task of taskList) {
-        if (task.project && !projectAngles.has(task.project)) {
-          projectList.push(task.project);
-          projectAngles.set(task.project, 0);
-        }
-      }
-      // Assign angles to projects (evenly distributed)
-      projectList.forEach((proj, i) => {
-        const angle = (2 * Math.PI * i) / projectList.length;
-        projectAngles.set(proj, angle);
-      });
-      // Second pass: create nodes
-      const addedProjects = new Set();
-      for (const task of taskList) {
-        if (!task.project || !task.task_id) {
-          console.warn('[hzl] Skipping task with missing required fields:', task);
-          continue;
-        }
-        const projAngle = projectAngles.get(task.project);
-        // Add project node if not seen
-        if (!addedProjects.has(task.project)) {
-          addedProjects.add(task.project);
-          const projectId = `project:${task.project}`;
-          nodes.push({ id: projectId, type: 'project', name: task.project, ring: 1, angle: projAngle });
-          links.push({ source: projectId, target: 'root', type: 'hierarchy' });
-          nodeStatusMap.set(projectId, null);
-        }
-        // Add task node with same angle as its project (with small random offset)
-        const ring = task.parent_id ? 3 : 2;
-        const angleOffset = (Math.random() - 0.5) * 0.3; // small spread within project
-        nodes.push({
-          id: task.task_id,
-          type: task.parent_id ? 'subtask' : 'task',
-          name: task.title,
-          status: task.status,
-          progress: task.progress ?? 0,
-          ring,
-          angle: projAngle + angleOffset,
-          project: task.project,
-        });
-        nodeStatusMap.set(task.task_id, task.status);
-        // Hierarchy link
-        const parent = task.parent_id || `project:${task.project}`;
-        links.push({ source: task.task_id, target: parent, type: 'hierarchy' });
-        // Dependency links (for particles)
-        if (task.blocked_by) {
-          for (const blockerId of task.blocked_by) {
-            links.push({ source: blockerId, target: task.task_id, type: 'dependency' });
-          }
-        }
-      }
-      return { nodes, links };
-    }
-    function initGraph() {
-      if (graphInitialized) return;
-      if (typeof ForceGraph === 'undefined') {
-        console.error('[hzl] ForceGraph not available - CDN may have failed');
-        handleGraphLibError();
-        return;
-      }
-      // Hide loading spinner
-      graphLoading.style.display = 'none';
-      const RING_RADII = { 0: 0, 1: 180, 2: 360, 3: 540 };
-      const baseRadius = window.innerWidth < 768 ? 0.6 : 1;
-      // Pre-position nodes based on angle and ring
-      const graphData = transformTasksToGraph(tasks);
-      for (const node of graphData.nodes) {
-        const radius = (RING_RADII[node.ring] ?? 300) * baseRadius;
-        node.x = Math.cos(node.angle || 0) * radius;
-        node.y = Math.sin(node.angle || 0) * radius;
-      }
-      graphInstance = ForceGraph()(graphContainer)
-        .graphData(graphData)
-        .backgroundColor('#1a1a1a')
-        .nodeLabel(n => n.name)
-        .nodeColor(n => getStatusColor(n.status, n.type))
-        .nodeVal(n => getNodeSize(n))
-        .linkColor(l => l.type === 'dependency' ? '#e57373' : '#40404080')
-        .linkWidth(l => l.type === 'dependency' ? 2 : 1)
-        .linkLabel(l => l.type === 'dependency' ? 'blocks' : '')
-        .linkDirectionalArrowLength(l => l.type === 'dependency' ? 6 : 0)
-        .linkDirectionalArrowRelPos(1)
-        .onNodeClick(n => {
-          if (n.type !== 'root' && n.type !== 'project') {
-            openTaskModal(n.id);
-          }
-        })
-        // Forces to keep nodes in their angular sectors
-        .d3Force('x', d3.forceX(d => {
-          const radius = (RING_RADII[d.ring] ?? 300) * baseRadius;
-          return Math.cos(d.angle || 0) * radius;
-        }).strength(0.3))
-        .d3Force('y', d3.forceY(d => {
-          const radius = (RING_RADII[d.ring] ?? 300) * baseRadius;
-          return Math.sin(d.angle || 0) * radius;
-        }).strength(0.3))
-        .d3Force('collision', d3.forceCollide(d => getNodeSize(d) + 15))
-        .d3Force('charge', d3.forceManyBody().strength(-50))
-        .d3Force('link', d3.forceLink().strength(0.1))
-        // Animated particles on dependency edges
-        .linkDirectionalParticles(l => l.type === 'dependency' ? 3 : 0)
-        .linkDirectionalParticleWidth(3)
-        .linkDirectionalParticleSpeed(0.005)
-        .linkDirectionalParticleColor(() => '#e57373')
-        // Custom node rendering for root glow
-        .nodeCanvasObject((node, ctx, globalScale) => {
-          if (node.type === 'root') {
-            // Pulsing glow effect
-            const pulse = Math.sin(Date.now() / 500) * 0.3 + 0.7;
-            ctx.beginPath();
-            ctx.arc(node.x, node.y, 25 * pulse, 0, 2 * Math.PI);
-            ctx.fillStyle = `rgba(245, 158, 11, ${0.3 * pulse})`;
-            ctx.fill();
-          }
-          // Draw node
-          const size = getNodeSize(node);
-          ctx.beginPath();
-          ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
-          ctx.fillStyle = getStatusColor(node.status, node.type);
-          ctx.fill();
-          // Label for root node
-          if (node.type === 'root') {
-            ctx.font = `bold ${11 / globalScale}px ui-monospace`;
-            ctx.fillStyle = '#1a1a1a';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText('HZL', node.x, node.y + 1);
-          }
-          // Label for projects
-          if (node.type === 'project' && globalScale > 0.5) {
-            ctx.font = `${10 / globalScale}px ui-monospace`;
-            ctx.fillStyle = '#e5e5e5';
-            ctx.textAlign = 'center';
-            ctx.fillText(node.name, node.x, node.y + size + 12);
-          }
-        })
-        .nodePointerAreaPaint((node, color, ctx) => {
-          const size = getNodeSize(node);
-          ctx.beginPath();
-          ctx.arc(node.x, node.y, size + 4, 0, 2 * Math.PI);
-          ctx.fillStyle = color;
-          ctx.fill();
-        });
-      graphInitialized = true;
-      // Zoom to fit after layout settles
-      setTimeout(() => {
-        if (graphInstance) {
-          graphInstance.zoomToFit(400, 50);
-        }
-      }, 500);
-    }
-    let lastGraphDataHash = '';
-    function hashTasks(taskList) {
-      // Simple hash based on task ids, statuses, and dependencies
-      return taskList.map(t => `${t.task_id}:${t.status}:${t.progress}`).sort().join('|');
-    }
-    function updateGraphData() {
-      // Skip updates when graph isn't visible to save CPU
-      if (!graphInstance || !graphInitialized || activeView !== 'graph') {
-        return;
-      }
-      const newHash = hashTasks(tasks);
-      if (newHash !== lastGraphDataHash) {
-        lastGraphDataHash = newHash;
-        // Get current node positions
-        const currentData = graphInstance.graphData();
-        const positionMap = new Map();
-        for (const node of currentData.nodes) {
-          if (node.x !== undefined && node.y !== undefined) {
-            positionMap.set(node.id, { x: node.x, y: node.y, vx: node.vx, vy: node.vy });
-          }
-        }
-        // Create new graph data and preserve positions
-        const newData = transformTasksToGraph(tasks);
-        for (const node of newData.nodes) {
-          const pos = positionMap.get(node.id);
-          if (pos) {
-            node.x = pos.x;
-            node.y = pos.y;
-            node.vx = pos.vx;
-            node.vy = pos.vy;
-          }
-        }
-        graphInstance.graphData(newData);
-      }
-    }
-    // Debounced resize handling
-    let resizeTimeout;
-    window.addEventListener('resize', () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if (graphInstance && activeView === 'graph') {
-          graphInstance.width(graphContainer.clientWidth);
-          graphInstance.height(graphContainer.clientHeight);
-        }
-      }, 100);
-    });
-    // API calls
-    async function fetchTasks() {
-      const project = projectFilter.value;
-      let url;
-      if (activeView === 'calendar') {
-        const mm = String(calendarMonth + 1).padStart(2, '0');
-        url = `/api/tasks?due_month=${calendarYear}-${mm}${project ? `&project=${encodeURIComponent(project)}` : ''}`;
-      } else {
-        const since = dateFilter.value;
-        url = `/api/tasks?since=${since}${project ? `&project=${encodeURIComponent(project)}` : ''}`;
-      }
-      const res = await fetch(url);
-      if (!res.ok) throw new Error('Failed to fetch tasks');
-      const data = await res.json();
-      return data.tasks;
-    }
-    async function fetchEvents() {
-      const res = await fetch(`/api/events?since=${lastEventId}`);
-      if (!res.ok) throw new Error('Failed to fetch events');
-      const data = await res.json();
-      return data.events;
-    }
-    async function fetchTaskDetail(taskId) {
-      const [taskRes, commentsRes, checkpointsRes, eventsRes] = await Promise.all([
-        fetch(`/api/tasks/${taskId}`),
-        fetch(`/api/tasks/${taskId}/comments`),
-        fetch(`/api/tasks/${taskId}/checkpoints`),
-        fetch(`/api/tasks/${taskId}/events`),
-      ]);
-      if (!taskRes.ok) throw new Error('Task not found');
-      if (!commentsRes.ok || !checkpointsRes.ok || !eventsRes.ok) {
-        throw new Error('Failed to load task activity');
-      }
-      const taskData = await taskRes.json();
-      const commentsData = await commentsRes.json();
-      const checkpointsData = await checkpointsRes.json();
-      const eventsData = await eventsRes.json();
-      return {
-        task: taskData.task,
-        comments: commentsData.comments,
-        checkpoints: checkpointsData.checkpoints,
-        taskEvents: eventsData.events,
-      };
-    }
-    async function fetchStats() {
-      const res = await fetch('/api/stats');
-      if (!res.ok) throw new Error('Failed to fetch stats');
-      return await res.json();
-    }
-    // Render functions
-    function renderCard(task, emojiInfo, showSubtasks) {
-      const isBlocked = task.blocked_by && task.blocked_by.length > 0;
-      const status = isBlocked ? 'blocked' : task.status;
-      const isParentTask = (task.subtask_total ?? 0) > 0;
-      const parentStyle = isParentTask
-        ? `style="--family-color: ${getTaskFamilyColor(task.task_id)}"`
-        : '';
-      // Build emoji indicator
-      let emojiHtml = '';
-      if (emojiInfo) {
-        const { emoji, suffix } = emojiInfo;
-        emojiHtml = suffix
-          ? `<span class="card-emoji">${emoji}-${suffix}</span>`
-          : `<span class="card-emoji">${emoji}</span>`;
-      }
-      // Build subtask count (for parents regardless of subtasks visibility)
-      let subtaskHtml = '';
-      const visibleCount = task.subtask_count ?? 0;
-      const totalCount = task.subtask_total ?? visibleCount;
-      if (totalCount > 0) {
-        const label = totalCount === 1 ? 'subtask' : 'subtasks';
-        const countLabel = visibleCount === totalCount
-          ? `${visibleCount} ${label}`
-          : `${visibleCount}/${totalCount} ${label}`;
-        if (showSubtasks) {
-          const isCollapsed = collapsedParents.has(task.task_id);
-          const symbol = isCollapsed ? '&#9654;' : '&#9660;';
-          subtaskHtml = `
-            <button
-              type="button"
-              class="card-subtask-toggle"
-              data-action="toggle-subtasks"
-              data-parent-id="${escapeHtml(task.task_id)}"
-              aria-expanded="${isCollapsed ? 'false' : 'true'}"
-              title="${isCollapsed ? 'Expand subtasks' : 'Collapse subtasks'}"
-            >${symbol} [${countLabel}]</button>
-          `;
-        } else {
-          subtaskHtml = `<div class="card-subtask-count">[${countLabel}]</div>`;
-        }
-      }
-      // Build progress badge
-      let progressHtml = '';
-      if (task.progress !== null && task.progress !== undefined && task.progress > 0) {
-        const progressClass = task.progress >= 100 ? 'card-progress complete' : 'card-progress';
-        progressHtml = `<span class="${progressClass}">${task.progress}%</span>`;
-      }
-      const assignee = getAssigneeValue(task.assignee);
-      const hasAssignee = assignee.length > 0;
-      const assigneeText = hasAssignee ? assignee : 'Unassigned';
-      const assigneeCardText = truncateCardLabel(assigneeText, 10);
-      const assigneeClass = hasAssignee ? 'card-assignee assigned' : 'card-assignee unassigned';
-      const assigneeHtml = `<span class="${assigneeClass}" title="${escapeHtml(assigneeText)}">${escapeHtml(assigneeCardText)}</span>`;
-      const projectHtml = `<span class="card-project" title="${escapeHtml(task.project)}">${escapeHtml(task.project)}</span>`;
-      let extra = '';
-      if (isBlocked) {
-        extra = `<div class="card-blocked">Blocked by: ${task.blocked_by.map(id => escapeHtml(id.slice(0, 8))).join(', ')}</div>`;
-      }
-      if (task.status === 'in_progress' && task.lease_until) {
-        const remaining = formatTimeRemaining(task.lease_until);
-        extra += `<div class="card-lease">${remaining}</div>`;
-      }
-      return `
-        <div class="card${isParentTask ? ' card-parent' : ''}" data-task-id="${task.task_id}" ${parentStyle}>
-          <div class="card-header">
-            <div class="card-header-left">
-              ${emojiHtml}
-              <span class="card-id">${task.task_id.slice(0, 8)}</span>
-            </div>
-            <div class="card-header-right">
-              ${projectHtml}
-              ${progressHtml}
-            </div>
-          </div>
-          <div class="card-title">${escapeHtml(task.title)}</div>
-          ${subtaskHtml}
-          <div class="card-meta">
-            ${assigneeHtml}
-          </div>
-          ${extra}
-        </div>
-      `;
-    }
-    // Group tasks into Kanban columns, treating ready tasks with unmet dependencies as blocked
-    function getBoardStatus(task) {
-      const isBlocked = task.blocked_by && task.blocked_by.length > 0;
-      return isBlocked && task.status === 'ready' ? 'blocked' : task.status;
-    }
-    function getVisibleBoardStatuses() {
-      return new Set(
-        Array.from(
-          settingsDropdown.querySelectorAll('.column-checkboxes input[type="checkbox"]:checked')
-        ).map(cb => cb.value)
-      );
-    }
-    function updateTaskSearchUi() {
-      const hasQuery = taskSearchQuery.length > 0;
-      taskSearchGroup.classList.toggle('active', hasQuery);
-      taskSearchClear.hidden = !hasQuery;
-      if (!hasQuery) {
-        taskSearchMeta.textContent = '';
-        return;
-      }
-      const totalCandidates = getFilteredBoardTasks(tasks, { applySearchFilter: false }).length;
-      const matchedCount = getFilteredBoardTasks(tasks).length;
-      const label = totalCandidates === 1 ? 'task' : 'tasks';
-      taskSearchMeta.textContent = `${matchedCount}/${totalCandidates} ${label}`;
-    }
-    function applyTaskSearch(value, options = {}) {
-      const { persist = true } = options;
-      const normalized = normalizeTaskSearchQuery(value);
-      taskSearchInput.value = normalized;
-      if (normalized === taskSearchQuery) return;
-      taskSearchQuery = normalized;
-      updateTaskSearchUi();
-      updateAssigneeOptions();
-      updateActivityAssigneeOptions();
-      renderBoard();
-      renderActivity();
-      if (persist) {
-        savePreferences();
-      }
-    }
-    function getFilteredBoardTasks(taskList = tasks, options = {}) {
-      const {
-        onlyVisibleColumns = false,
-        applyAssigneeFilter = true,
-        applySearchFilter = true,
-        applyCollapsedParents = true,
-      } = options;
-      const showSubtasks = showSubtasksCheckbox.checked;
-      let filtered = showSubtasks ? taskList : taskList.filter(task => !task.parent_id);
-      if (onlyVisibleColumns) {
-        const visibleStatuses = getVisibleBoardStatuses();
-        filtered = filtered.filter(task => visibleStatuses.has(getBoardStatus(task)));
-      }
-      if (applyAssigneeFilter && assigneeFilter.value) {
-        filtered = filtered.filter(task => getAssigneeValue(task.assignee) === assigneeFilter.value);
-      }
-      if (applySearchFilter) {
-        const query = getTaskSearchQuery();
-        if (query) {
-          filtered = filtered.filter((task) => taskMatchesSearch(task, query));
-        }
-      }
-      if (showSubtasks && applyCollapsedParents) {
-        // Search mode should always show matching subtasks, regardless of collapsed parents.
-        const query = getTaskSearchQuery();
-        if (!query) {
-          const visibleTaskIds = new Set(filtered.map((task) => task.task_id));
-          filtered = filtered.filter((task) => {
-            if (!task.parent_id) return true;
-            if (!visibleTaskIds.has(task.parent_id)) return true;
-            return !collapsedParents.has(task.parent_id);
-          });
-        }
-      }
-      return filtered;
-    }
-    function updateAssigneeOptions(preferredAssignee = null) {
-      const previousSelection = assigneeFilter.value;
-      const targetSelection = preferredAssignee ?? previousSelection;
-      const optionTasks = getFilteredBoardTasks(tasks, {
-        onlyVisibleColumns: true,
-        applyAssigneeFilter: false,
-      });
-      const assigneeCounts = new Map();
-      for (const task of optionTasks) {
-        const assignee = getAssigneeValue(task.assignee);
-        if (!assignee) continue;
-        assigneeCounts.set(assignee, (assigneeCounts.get(assignee) ?? 0) + 1);
-      }
-      const sortedAssignees = Array.from(assigneeCounts.entries())
-        .sort(([a], [b]) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
-      assigneeFilter.innerHTML = '';
-      const anyOption = document.createElement('option');
-      anyOption.value = '';
-      anyOption.textContent = 'Any Agent';
-      assigneeFilter.appendChild(anyOption);
-      for (const [assignee, count] of sortedAssignees) {
-        const option = document.createElement('option');
-        option.value = assignee;
-        option.textContent = `${assignee} (${count})`;
-        assigneeFilter.appendChild(option);
-      }
-      const nextSelection = targetSelection && assigneeCounts.has(targetSelection) ? targetSelection : '';
-      assigneeFilter.value = nextSelection;
-      return {
-        changed: previousSelection !== nextSelection,
-        reset: targetSelection !== nextSelection,
-      };
-    }
-    function getActivityKeywordFilter() {
-      const keyword = activityKeywordFilter.value.trim().toLowerCase();
-      return keyword.length >= 3 ? keyword : '';
-    }
-    function eventMatchesActivityKeyword(event, keyword) {
-      if (!keyword) return true;
-      const title = typeof event.task_title === 'string' ? event.task_title.toLowerCase() : '';
-      const description = typeof event.task_description === 'string' ? event.task_description.toLowerCase() : '';
-      return title.includes(keyword) || description.includes(keyword);
-    }
-    function getEventAssignee(event) {
-      const taskAssignee = getAssigneeValue(event.task_assignee);
-      if (taskAssignee) return taskAssignee;
-      return getAssigneeValue(event.data?.assignee);
-    }
-    function getFilteredActivityEvents(options = {}) {
-      const { applyAssigneeFilter = true } = options;
-      const assignee = activityAssigneeFilter.value;
-      const keyword = getActivityKeywordFilter();
-      const visibleBoardTaskIds = new Set(
-        getFilteredBoardTasks(tasks, {
-          onlyVisibleColumns: true,
-          applyAssigneeFilter: false,
-        }).map((task) => task.task_id)
-      );
-      return events.filter((event) => {
-        if (!visibleBoardTaskIds.has(event.task_id)) return false;
-        if (keyword && !eventMatchesActivityKeyword(event, keyword)) return false;
-        if (applyAssigneeFilter && assignee && getEventAssignee(event) !== assignee) return false;
-        return true;
-      });
-    }
-    function updateActivityAssigneeOptions(preferredAssignee = null) {
-      const previousSelection = activityAssigneeFilter.value;
-      const targetSelection = preferredAssignee ?? previousSelection;
-      const optionEvents = getFilteredActivityEvents({ applyAssigneeFilter: false });
-      const assigneeTaskSets = new Map();
-      for (const event of optionEvents) {
-        const assignee = getEventAssignee(event);
-        if (!assignee) continue;
-        if (!assigneeTaskSets.has(assignee)) {
-          assigneeTaskSets.set(assignee, new Set());
-        }
-        assigneeTaskSets.get(assignee).add(event.task_id);
-      }
-      const sortedAssignees = Array.from(assigneeTaskSets.entries())
-        .sort(([a], [b]) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
-      activityAssigneeFilter.innerHTML = '';
-      const anyOption = document.createElement('option');
-      anyOption.value = '';
-      anyOption.textContent = 'Any Agent';
-      activityAssigneeFilter.appendChild(anyOption);
-      for (const [assignee, taskIds] of sortedAssignees) {
-        const option = document.createElement('option');
-        option.value = assignee;
-        option.textContent = `${assignee} (${taskIds.size})`;
-        activityAssigneeFilter.appendChild(option);
-      }
-      const nextSelection = targetSelection && assigneeTaskSets.has(targetSelection) ? targetSelection : '';
-      activityAssigneeFilter.value = nextSelection;
-      return {
-        changed: previousSelection !== nextSelection,
-        reset: targetSelection !== nextSelection,
-      };
-    }
-    function groupTasksByStatus(taskList) {
-      const columns = {
-        backlog: [],
-        blocked: [],
-        ready: [],
-        in_progress: [],
-        done: [],
-      };
-      for (const task of taskList) {
-        const status = getBoardStatus(task);
-        if (columns[status]) {
-          columns[status].push(task);
-        }
-      }
-      return columns;
-    }
-    // Calendar state shared between renderCalendar and popover
-    let calendarTasksByDay = {};
-    function renderMiniCard(task) {
-      return `<div class="calendar-mini-card" data-task-id="${task.task_id}" data-status="${task.status}">
-        <span class="calendar-mini-title">${escapeHtml(task.title)}</span>
-        <span class="calendar-mini-project">${escapeHtml(task.project)}</span>
-      </div>`;
-    }
-    function renderCalendar() {
-      const now = new Date();
-      const isCurrentMonth = calendarYear === now.getFullYear() && calendarMonth === now.getMonth();
-      const todayDate = now.getDate();
-      const MAX_CARDS = 3;
-      // Filter to current month in local timezone and group by day in single pass
-      // (Server already filters by project via ?project= param, no client-side filter needed)
-      calendarTasksByDay = {};
-      let monthTaskCount = 0;
-      for (const t of tasks) {
-        if (!t.due_at) continue;
-        const d = new Date(t.due_at);
-        if (d.getFullYear() !== calendarYear || d.getMonth() !== calendarMonth) continue;
-        const day = d.getDate();
-        if (!calendarTasksByDay[day]) calendarTasksByDay[day] = [];
-        calendarTasksByDay[day].push(t);
-        monthTaskCount++;
-      }
-      // Month label
-      const monthLabel = new Date(calendarYear, calendarMonth, 1)
-        .toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
-      // First day of month (0=Sun) and number of days
-      const firstDow = new Date(calendarYear, calendarMonth, 1).getDay();
-      const daysInMonth = new Date(calendarYear, calendarMonth + 1, 0).getDate();
-      const daysInPrevMonth = new Date(calendarYear, calendarMonth, 0).getDate();
-      // Build header
-      let html = `
-        <div class="calendar-header">
-          <button class="calendar-nav-btn" id="calPrev">&larr;</button>
-          <div class="calendar-month-label">${escapeHtml(monthLabel)}</div>
-          <button class="calendar-nav-btn" id="calNext">&rarr;</button>
-          <button class="calendar-nav-btn" id="calToday">Today</button>
-        </div>
-      `;
-      // Empty state message (grid still renders for visual context)
-      if (monthTaskCount === 0) {
-        html += `<div class="calendar-empty-state">No tasks with due dates in ${escapeHtml(monthLabel)}</div>`;
-      }
-      html += `<div class="calendar-grid">`;
-      // Day-of-week headers
-      const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-      for (const d of dayNames) {
-        html += `<div class="calendar-day-header">${d}</div>`;
-      }
-      // Leading days from previous month
-      for (let i = firstDow - 1; i >= 0; i--) {
-        const day = daysInPrevMonth - i;
-        html += `<div class="calendar-day other-month"><span class="calendar-day-number">${day}</span></div>`;
-      }
-      // Current month days
-      for (let d = 1; d <= daysInMonth; d++) {
-        const isToday = isCurrentMonth && d === todayDate;
-        const dateStr = `${calendarYear}-${String(calendarMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
-        html += `<div class="calendar-day${isToday ? ' today' : ''}" data-date="${dateStr}">`;
-        html += `<span class="calendar-day-number">${d}</span>`;
-        html += `<div class="calendar-day-tasks">`;
-        const dayTasks = calendarTasksByDay[d] || [];
-        const visible = dayTasks.slice(0, MAX_CARDS);
-        for (const t of visible) {
-          html += renderMiniCard(t);
-        }
-        if (dayTasks.length > MAX_CARDS) {
-          html += `<div class="calendar-more-link" data-date="${dateStr}">+${dayTasks.length - MAX_CARDS} more</div>`;
-        }
-        html += `</div></div>`;
-      }
-      // Trailing days to fill last week
-      const totalCells = firstDow + daysInMonth;
-      const trailingDays = (7 - (totalCells % 7)) % 7;
-      for (let d = 1; d <= trailingDays; d++) {
-        html += `<div class="calendar-day other-month"><span class="calendar-day-number">${d}</span></div>`;
-      }
-      html += `</div>`;
-      calendarContainer.innerHTML = html;
-      // Wire navigation (named functions to avoid re-adding anonymous listeners)
-      document.getElementById('calPrev').addEventListener('click', navPrev);
-      document.getElementById('calNext').addEventListener('click', navNext);
-      document.getElementById('calToday').addEventListener('click', navToday);
-    }
-    function navPrev() {
-      calendarMonth--;
-      if (calendarMonth < 0) { calendarMonth = 11; calendarYear--; }
-      syncUrlState();
-      requestPoll();
-    }
-    function navNext() {
-      calendarMonth++;
-      if (calendarMonth > 11) { calendarMonth = 0; calendarYear++; }
-      syncUrlState();
-      requestPoll();
-    }
-    function navToday() {
-      const today = new Date();
-      calendarYear = today.getFullYear();
-      calendarMonth = today.getMonth();
-      syncUrlState();
-      requestPoll();
-    }
-    // Calendar popover for "+N more" links
-    let activePopover = null;
-    let popoverOutsideListener = null;
-    function dismissPopover() {
-      if (popoverOutsideListener) {
-        document.removeEventListener('click', popoverOutsideListener);
-        popoverOutsideListener = null;
-      }
-      if (activePopover) {
-        activePopover.remove();
-        activePopover = null;
-      }
-    }
-    function showCalendarPopover(dateStr, anchorEl) {
-      dismissPopover();
-      // Reuse grouped data from renderCalendar instead of re-filtering
-      const [y, m, d] = dateStr.split('-').map(Number);
-      const dayTasks = calendarTasksByDay[d] || [];
-      if (dayTasks.length === 0) return;
-      // Format date for header
-      const headerDate = new Date(y, m - 1, d)
-        .toLocaleDateString(undefined, { month: 'long', day: 'numeric' });
-      const popover = document.createElement('div');
-      popover.className = 'calendar-popover';
-      popover.innerHTML = `<div class="calendar-popover-header">${escapeHtml(headerDate)}</div>`
-        + dayTasks.map(t => renderMiniCard(t)).join('');
-      // Position below the anchor, clamped to viewport edges
-      const rect = anchorEl.getBoundingClientRect();
-      const popoverWidth = 280; // matches CSS max-width
-      const popoverMaxHeight = 300; // matches CSS max-height
-      const left = Math.min(rect.left, window.innerWidth - popoverWidth - 8);
-      // If popover would overflow bottom, position above the anchor instead
-      const spaceBelow = window.innerHeight - rect.bottom - 8;
-      const top = spaceBelow >= popoverMaxHeight
-        ? rect.bottom + 4
-        : Math.max(8, rect.top - popoverMaxHeight - 4);
-      popover.style.position = 'fixed';
-      popover.style.left = left + 'px';
-      popover.style.top = top + 'px';
-      document.body.appendChild(popover);
-      activePopover = popover;
-      // Dismiss on click-outside (next tick to avoid immediate dismiss)
-      setTimeout(() => {
-        popoverOutsideListener = function onClickOutside(e) {
-          if (activePopover && !activePopover.contains(e.target)) {
-            dismissPopover();
-          }
-        };
-        document.addEventListener('click', popoverOutsideListener);
-      }, 0);
-    }
-    // Event delegation for calendar interactions
-    calendarContainer.addEventListener('click', (e) => {
-      // "+N more" link
-      const moreLink = e.target.closest('.calendar-more-link');
-      if (moreLink) {
-        e.stopPropagation();
-        showCalendarPopover(moreLink.dataset.date, moreLink);
-        return;
-      }
-      // Mini card click → open task modal
-      const card = e.target.closest('.calendar-mini-card');
-      if (card) {
-        dismissPopover();
-        openTaskModal(card.dataset.taskId);
-        return;
-      }
-    });
-    // Also handle clicks inside popover (which is appended to body, not calendarContainer)
-    document.addEventListener('click', (e) => {
-      if (!activePopover) return;
-      const card = e.target.closest('.calendar-popover .calendar-mini-card');
-      if (card) {
-        dismissPopover();
-        openTaskModal(card.dataset.taskId);
-      }
-    });
-    function renderBoard() {
-      const showSubtasks = showSubtasksCheckbox.checked;
-      const emojiMap = buildEmojiMap(tasks);
-      const visibleTasks = getFilteredBoardTasks(tasks);
-      const emptyMessage = taskSearchQuery ? 'No matching tasks' : 'No tasks';
-      const columns = groupTasksByStatus(visibleTasks);
-      for (const [status, statusTasks] of Object.entries(columns)) {
-        const container = document.getElementById(`cards-${status}`);
-        const countEl = document.getElementById(`count-${status}`);
-        const badgeEl = document.getElementById(`badge-${status}`);
-        if (container) {
-          if (statusTasks.length === 0) {
-            container.innerHTML = `<div class="empty-column">${emptyMessage}</div>`;
-          } else {
-            container.innerHTML = statusTasks.map(task => {
-              const emojiInfo = emojiMap.get(task.task_id);
-              return renderCard(task, emojiInfo, showSubtasks);
-            }).join('');
-          }
-        }
-        if (countEl) countEl.textContent = statusTasks.length;
-        if (badgeEl) badgeEl.textContent = statusTasks.length;
-      }
-      // Render mobile cards for active tab
-      renderMobileCards(showSubtasks, emojiMap);
-      updateTaskSearchUi();
-      updateCollapseControls();
-      // Card click handlers are set up via event delegation in init
-    }
-    function bindColumnScrollIndicators() {
-      document.querySelectorAll('.column-cards').forEach((column) => {
-        column.addEventListener('scroll', () => {
-          column.classList.add('is-scrolling');
-          const existingTimer = columnScrollTimers.get(column);
-          if (existingTimer) {
-            clearTimeout(existingTimer);
-          }
-          const timerId = setTimeout(() => {
-            column.classList.remove('is-scrolling');
-            columnScrollTimers.delete(column);
-          }, 700);
-          columnScrollTimers.set(column, timerId);
-        }, { passive: true });
-      });
-    }
-    function renderMobileCards(showSubtasks, emojiMap) {
-      const container = document.getElementById('mobileCardsContainer');
-      if (!container) return;
-      const visibleTasks = getFilteredBoardTasks(tasks);
-      const emptyMessage = taskSearchQuery ? 'No matching tasks' : 'No tasks';
-      const columns = groupTasksByStatus(visibleTasks);
-      container.innerHTML = Object.entries(columns).map(([status, statusTasks]) => `
-        <div class="mobile-cards ${status === activeTab ? 'active' : ''}" data-status="${status}">
-          ${statusTasks.length === 0
-            ? `<div class="empty-column">${emptyMessage}</div>`
-            : statusTasks.map(task => {
-                const emojiInfo = emojiMap.get(task.task_id);
-                return renderCard(task, emojiInfo, showSubtasks);
-              }).join('')
-          }
-        </div>
-      `).join('');
-      // Card click handlers are set up via event delegation in init
-    }
-    function renderActivity() {
-      const filteredEvents = getFilteredActivityEvents();
-      if (filteredEvents.length === 0) {
-        activityList.innerHTML = '<div class="empty-column">No recent activity</div>';
-        return;
-      }
-      activityList.innerHTML = filteredEvents.map(event => {
-        const actor = getEventActor(event);
-        const actionDetail = formatEventDetail(event);
-        const detail = actionDetail ? `${actionDetail} by ${actor}` : `by ${actor}`;
-        return `
-          <div class="activity-item" data-task-id="${escapeHtml(event.task_id || '')}">
-            <div class="activity-item-header">
-              <span class="activity-type ${event.type}">${formatEventType(event.type)}</span>
-              <span class="activity-time">${formatTime(event.timestamp)}</span>
-            </div>
-            <div class="activity-task">${escapeHtml(event.task_title || event.task_id.slice(0, 8))}</div>
-            ${detail ? `<div class="activity-detail">${escapeHtml(detail)}</div>` : ''}
-          </div>
-        `;
-      }).join('');
-    }
-    async function openTaskModal(taskId, preserveShowAll = false) {
-      // Track this request to handle rapid clicks (race condition prevention)
-      const requestId = ++pendingModalRequestId;
-      // Reset expansion state for new tasks
-      if (!preserveShowAll) {
-        showAllComments = false;
-        showAllCheckpoints = false;
-        showAllTaskActivity = false;
-        activeModalTab = 'comments';
-      }
-      try {
-        const data = await fetchTaskDetail(taskId);
-        // Discard stale response if a newer request was made
-        if (requestId !== pendingModalRequestId) return;
-        selectedTask = data;
-        modalTitle.textContent = data.task.title;
-        const resolvedTaskId = data.task.task_id || taskId;
-        modalTaskIdValue.textContent = resolvedTaskId || '-';
-        modalTaskIdCopy.dataset.taskId = resolvedTaskId || '';
-        modalTaskIdCopy.disabled = !resolvedTaskId;
-        setTaskIdCopyFeedback('idle');
-        const progressValue = data.task.progress ?? 0;
-        const progressClass = progressValue >= 100 ? 'modal-progress complete' : 'modal-progress';
-        const assignee = getAssigneeValue(data.task.assignee);
-        const hasAssignee = assignee.length > 0;
-        const assigneeValue = hasAssignee
-          ? escapeHtml(assignee)
-          : '<span class="modal-meta-fallback">Unassigned</span>';
-        let html = `
-          <div class="modal-section">
-            <div class="modal-meta">
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Status</div>
-                <div class="modal-meta-value">${data.task.status}</div>
-              </div>
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Progress</div>
-                <div class="modal-meta-value"><span class="${progressClass}">${progressValue}%</span></div>
-              </div>
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Project</div>
-                <div class="modal-meta-value">${escapeHtml(data.task.project)}</div>
-              </div>
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Assignee</div>
-                <div class="modal-meta-value">${assigneeValue}</div>
-              </div>
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Priority</div>
-                <div class="modal-meta-value">${data.task.priority}</div>
-              </div>
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Created</div>
-                <div class="modal-meta-value">${formatTime(data.task.created_at)}</div>
-              </div>
-              ${data.task.lease_until ? `
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Lease Until</div>
-                <div class="modal-meta-value">${formatTime(data.task.lease_until)}</div>
-              </div>
-              ` : ''}
-              ${data.task.due_at ? `
-              <div class="modal-meta-item">
-                <div class="modal-meta-label">Due Date</div>
-                <div class="modal-meta-value">${new Date(data.task.due_at).toLocaleDateString()}</div>
-              </div>
-              ` : ''}
-            </div>
-          </div>
-        `;
-        if (data.task.blocked_by && data.task.blocked_by.length > 0) {
-          html += `
-            <div class="modal-section">
-              <div class="modal-section-title">Blocked By</div>
-              <div class="modal-description">${data.task.blocked_by.join(', ')}</div>
-            </div>
-          `;
-        }
-        if (data.task.description) {
-          html += `
-            <div class="modal-section">
-              <div class="modal-section-title">Description</div>
-              <div class="modal-description">${renderMarkdown(data.task.description)}</div>
-            </div>
-          `;
-        }
-        // Tabbed interface for comments, checkpoints, and per-task activity
-        if (data.comments.length > 0 || data.checkpoints.length > 0 || data.taskEvents.length > 0) {
-          const tabAvailability = {
-            comments: data.comments.length > 0,
-            checkpoints: data.checkpoints.length > 0,
-            activity: data.taskEvents.length > 0,
-          };
-          if (!tabAvailability[activeModalTab]) {
-            activeModalTab = ['comments', 'checkpoints', 'activity'].find(t => tabAvailability[t]) || 'activity';
-          }
-          const hasMoreComments = data.comments.length > COMMENT_DISPLAY_LIMIT && !showAllComments;
-          const visibleComments = hasMoreComments
-            ? data.comments.slice(-COMMENT_DISPLAY_LIMIT)
-            : data.comments;
-          const hiddenCommentCount = Math.max(0, data.comments.length - COMMENT_DISPLAY_LIMIT);
-          const hasMoreCheckpoints = data.checkpoints.length > CHECKPOINT_DISPLAY_LIMIT && !showAllCheckpoints;
-          const visibleCheckpoints = hasMoreCheckpoints
-            ? data.checkpoints.slice(-CHECKPOINT_DISPLAY_LIMIT)
-            : data.checkpoints;
-          const hiddenCheckpointCount = Math.max(0, data.checkpoints.length - CHECKPOINT_DISPLAY_LIMIT);
-          const hasMoreTaskActivity = data.taskEvents.length > TASK_ACTIVITY_DISPLAY_LIMIT && !showAllTaskActivity;
-          const visibleTaskActivity = hasMoreTaskActivity
-            ? data.taskEvents.slice(-TASK_ACTIVITY_DISPLAY_LIMIT)
-            : data.taskEvents;
-          const displayTaskActivity = [...visibleTaskActivity].reverse();
-          const hiddenTaskActivityCount = Math.max(0, data.taskEvents.length - TASK_ACTIVITY_DISPLAY_LIMIT);
-          html += `
-            <div class="modal-section">
-              <div class="modal-tabs">
-                <button class="modal-tab ${activeModalTab === 'comments' ? 'active' : ''}" data-tab="comments" ${data.comments.length === 0 ? 'disabled' : ''}>
-                  Comments<span class="modal-tab-count">${data.comments.length}</span>
-                </button>
-                <button class="modal-tab ${activeModalTab === 'checkpoints' ? 'active' : ''}" data-tab="checkpoints" ${data.checkpoints.length === 0 ? 'disabled' : ''}>
-                  Checkpoints<span class="modal-tab-count">${data.checkpoints.length}</span>
-                </button>
-                <button class="modal-tab ${activeModalTab === 'activity' ? 'active' : ''}" data-tab="activity" ${data.taskEvents.length === 0 ? 'disabled' : ''}>
-                  Activity<span class="modal-tab-count">${data.taskEvents.length}</span>
-                </button>
-              </div>
-              <div class="modal-tab-content ${activeModalTab === 'comments' ? 'active' : ''}" data-tab-content="comments">
-                ${data.comments.length === 0 ? '<div class="empty-column">No comments</div>' : `
-                  <div class="modal-comments">
-                    ${hasMoreComments ? `
-                      <button class="show-more-btn" id="showMoreComments">
-                        Show ${hiddenCommentCount} earlier comment${hiddenCommentCount === 1 ? '' : 's'}
-                      </button>
-                    ` : ''}
-                    ${visibleComments.map(c => `
-                      <div class="comment">
-                        <div class="comment-header">
-                          <span class="comment-author">${escapeHtml(c.agent_id || c.author || 'Unknown')}</span>
-                          <span>${formatTime(c.timestamp)}</span>
-                        </div>
-                        <div class="comment-text">${escapeHtml(c.text)}</div>
-                      </div>
-                    `).join('')}
-                  </div>
-                `}
-              </div>
-              <div class="modal-tab-content ${activeModalTab === 'checkpoints' ? 'active' : ''}" data-tab-content="checkpoints">
-                ${data.checkpoints.length === 0 ? '<div class="empty-column">No checkpoints</div>' : `
-                  <div class="modal-checkpoint-list">
-                    ${hasMoreCheckpoints ? `
-                      <button class="show-more-btn" id="showMoreCheckpoints">
-                        Show ${hiddenCheckpointCount} earlier checkpoint${hiddenCheckpointCount === 1 ? '' : 's'}
-                      </button>
-                    ` : ''}
-                    ${visibleCheckpoints.map(cp => {
-                      const hasData = cp.data && Object.keys(cp.data).length > 0;
-                      return `
-                        <div class="modal-checkpoint-entry">
-                          <div class="modal-checkpoint-header">
-                            <span class="modal-checkpoint-name">${escapeHtml(cp.name)}</span>
-                            <span class="modal-entry-time">${formatTime(cp.timestamp)}</span>
-                          </div>
-                          ${hasData ? `<pre class="modal-checkpoint-data">${escapeHtml(JSON.stringify(cp.data, null, 2))}</pre>` : ''}
-                        </div>
-                      `;
-                    }).join('')}
-                  </div>
-                `}
-              </div>
-              <div class="modal-tab-content ${activeModalTab === 'activity' ? 'active' : ''}" data-tab-content="activity">
-                ${data.taskEvents.length === 0 ? '<div class="empty-column">No activity</div>' : `
-                  <div class="modal-task-activity-list">
-                    ${hasMoreTaskActivity ? `
-                      <button class="show-more-btn" id="showMoreTaskActivity">
-                        Show ${hiddenTaskActivityCount} earlier event${hiddenTaskActivityCount === 1 ? '' : 's'}
-                      </button>
-                    ` : ''}
-                    ${displayTaskActivity.map(event => {
-                      const actor = getEventActor(event);
-                      const hasActor = actor !== 'system';
-                      const detail = formatEventDetail(event);
-                      return `
-                        <div class="modal-task-activity-entry">
-                          <div class="modal-task-activity-header">
-                            <span class="modal-task-activity-type">${escapeHtml(formatEventType(event.type))}</span>
-                            <span class="modal-entry-time">${formatTime(event.timestamp)}</span>
-                          </div>
-                          ${hasActor ? `<div class="modal-task-activity-author">By ${escapeHtml(actor)}</div>` : ''}
-                          ${detail ? `<div class="modal-task-activity-detail">${escapeHtml(detail)}</div>` : ''}
-                        </div>
-                      `;
-                    }).join('')}
-                  </div>
-                `}
-              </div>
-            </div>
-          `;
-        }
-        modalBody.innerHTML = html;
-        modalOverlay.classList.add('open');
-        syncUrlState();
-        // Attach tab switching handlers (DOM-only, no re-fetch)
-        modalBody.querySelectorAll('.modal-tab').forEach(tab => {
-          tab.addEventListener('click', () => {
-            if (tab.hasAttribute('disabled')) return;
-            const targetTab = tab.dataset.tab;
-            // Update tab active states
-            modalBody.querySelectorAll('.modal-tab').forEach(t =>
-              t.classList.toggle('active', t.dataset.tab === targetTab));
-            // Update content visibility
-            modalBody.querySelectorAll('.modal-tab-content').forEach(c =>
-              c.classList.toggle('active', c.dataset.tabContent === targetTab));
-            // Update global state for re-opens
-            activeModalTab = targetTab;
-          });
-        });
-        // Attach "show more comments" handler if present
-        const showMoreCommentsBtn = document.getElementById('showMoreComments');
-        if (showMoreCommentsBtn) {
-          showMoreCommentsBtn.addEventListener('click', () => {
-            showAllComments = true;
-            openTaskModal(taskId, true);
-          });
-        }
-        // Attach "show more checkpoints" handler if present
-        const showMoreCheckpointsBtn = document.getElementById('showMoreCheckpoints');
-        if (showMoreCheckpointsBtn) {
-          showMoreCheckpointsBtn.addEventListener('click', () => {
-            showAllCheckpoints = true;
-            openTaskModal(taskId, true);
-          });
-        }
-        const showMoreTaskActivityBtn = document.getElementById('showMoreTaskActivity');
-        if (showMoreTaskActivityBtn) {
-          showMoreTaskActivityBtn.addEventListener('click', () => {
-            showAllTaskActivity = true;
-            openTaskModal(taskId, true);
-          });
-        }
-      } catch (error) {
-        console.error('Failed to load task:', error);
-        alert('Failed to load task details');
-      }
-    }
-    function closeModal() {
-      const wasOpen = modalOverlay.classList.contains('open');
-      modalOverlay.classList.remove('open');
-      selectedTask = null;
-      modalTaskIdValue.textContent = '-';
-      modalTaskIdCopy.dataset.taskId = '';
-      modalTaskIdCopy.disabled = true;
-      setTaskIdCopyFeedback('idle');
-      if (wasOpen) {
-        syncUrlState();
-      }
-    }
-    // Live updates + refresh
-    function getConfiguredRefreshMs() {
-      const interval = parseInt(refreshFilter.value, 10);
-      return Number.isFinite(interval) ? Math.max(SSE_MIN_RECONNECT_MS, interval) : 5000;
-    }
-    function shouldRunLiveUpdates() {
-      return !document.hidden && windowHasFocus;
-    }
-    function requestPoll() {
-      if (isPolling) {
-        pendingPoll = true;
-        return;
-      }
-      void poll();
-    }
-    async function poll() {
-      if (isPolling) {
-        pendingPoll = true;
-        return;
-      }
-      isPolling = true;
-      do {
-        pendingPoll = false;
-        try {
-          const [newTasks, newEvents, stats] = await Promise.all([
-            fetchTasks(),
-            fetchEvents(),
-            fetchStats(),
-          ]);
-          tasks = newTasks;
-          const collapsedParentsPruned = pruneCollapsedParents(tasks);
-          const selectionUpdate = updateAssigneeOptions(pendingAssigneePreference);
-          pendingAssigneePreference = null;
-          const activitySelectionUpdate = updateActivityAssigneeOptions(pendingActivityAssigneePreference);
-          pendingActivityAssigneePreference = null;
-          if (selectionUpdate.reset || activitySelectionUpdate.reset || collapsedParentsPruned) {
-            savePreferences();
-          }
-          if (newEvents.length > 0) {
-            events = [...newEvents, ...events].slice(0, 50);
-            lastEventId = newEvents[0].id;
-          }
-          // Update project filter
-          const currentProject = pendingProjectPreference ?? projectFilter.value;
-          projectFilter.innerHTML = '<option value="">All projects</option>' +
-            stats.projects.map(p => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`).join('');
-          const hasProject = currentProject && stats.projects.includes(currentProject);
-          projectFilter.value = hasProject ? currentProject : '';
-          pendingProjectPreference = null;
-          if (activeView === 'calendar') {
-            renderCalendar();
-          } else {
-            renderBoard();
-            updateGraphData();
-          }
-          renderActivity();
-          updateTaskSearchUi();
-          syncUrlState();
-          if (initialTaskIdFromUrl) {
-            const taskToOpen = initialTaskIdFromUrl;
-            initialTaskIdFromUrl = null;
-            void openTaskModal(taskToOpen);
-          }
-          lastPollTime = Date.now();
-          lastPollError = false;
-        } catch (error) {
-          console.error('Poll failed:', error);
-          lastPollError = true;
-        } finally {
-          updateConnectionStatus();
-        }
-      } while (pendingPoll);
-      isPolling = false;
-    }
-    function getSseUrl() {
-      if (lastEventId <= 0) return SSE_ENDPOINT;
-      const params = new URLSearchParams({ since: String(lastEventId) });
-      return `${SSE_ENDPOINT}?${params.toString()}`;
-    }
-    function clearReconnectTimer() {
-      if (reconnectTimer) {
-        clearTimeout(reconnectTimer);
-        reconnectTimer = null;
-      }
-      reconnectAt = null;
-    }
-    function disconnectEventStream() {
-      if (!eventSource) return;
-      eventSource.onopen = null;
-      eventSource.onmessage = null;
-      eventSource.onerror = null;
-      eventSource.close();
-      eventSource = null;
-    }
-    function scheduleReconnect() {
-      if (!shouldRunLiveUpdates()) {
-        pauseLiveUpdates();
-        return;
-      }
-      clearReconnectTimer();
-      const base = Math.max(SSE_MIN_RECONNECT_MS, Math.min(getConfiguredRefreshMs(), 10000));
-      const expDelay = Math.min(SSE_MAX_RECONNECT_MS, base * (2 ** reconnectAttempt));
-      const jitter = Math.floor(Math.random() * Math.min(1000, Math.round(expDelay * 0.2)));
-      const delay = Math.min(SSE_MAX_RECONNECT_MS, expDelay + jitter);
-      reconnectAttempt = Math.min(reconnectAttempt + 1, 12);
-      reconnectAt = Date.now() + delay;
-      streamState = 'reconnecting';
-      updateConnectionStatus();
-      reconnectTimer = setTimeout(() => {
-        reconnectTimer = null;
-        reconnectAt = null;
-        connectEventStream();
-      }, delay);
-    }
-    function parseSsePayload(rawData) {
-      if (typeof rawData !== 'string') return rawData;
-      const trimmed = rawData.trim();
-      if (!trimmed) return null;
-      try {
-        return JSON.parse(trimmed);
-      } catch {
-        return trimmed;
-      }
-    }
-    function shouldRefreshFromSseEvent(streamEvent) {
-      const type = String(streamEvent?.type || '').toLowerCase();
-      if (type === 'updates_available' || type === 'update' || type === 'updates') {
-        return true;
-      }
-      if (SSE_HEARTBEAT_MARKERS.has(type)) {
-        return false;
-      }
-      const payload = parseSsePayload(streamEvent?.data);
-      if (payload == null) return false;
-      if (typeof payload === 'boolean') return payload;
-      if (typeof payload === 'number') return payload > 0;
-      if (typeof payload === 'string') {
-        const normalized = payload.toLowerCase();
-        if (SSE_HEARTBEAT_MARKERS.has(normalized)) return false;
-        if (normalized === 'updates_available' || normalized === 'update' || normalized === 'updates') {
-          return true;
-        }
-        return true;
-      }
-      if (Array.isArray(payload)) return payload.length > 0;
-      if (typeof payload === 'object') {
-        const kind = typeof payload.type === 'string' ? payload.type.toLowerCase() : '';
-        if (kind && SSE_HEARTBEAT_MARKERS.has(kind)) return false;
-        if (kind === 'updates_available' || kind === 'update' || kind === 'updates') return true;
-        if (Object.keys(payload).length === 0) return false;
-        if (
-          payload.updates_available === true ||
-          payload.updatesAvailable === true ||
-          payload.has_updates === true ||
-          payload.hasUpdates === true ||
-          payload.changed === true
-        ) {
-          return true;
-        }
-        if (Array.isArray(payload.events)) return payload.events.length > 0;
-        if (typeof payload.event_count === 'number') return payload.event_count > 0;
-        if (typeof payload.eventCount === 'number') return payload.eventCount > 0;
-      }
-      return true;
-    }
-    function handleSseSignal(streamEvent) {
-      const streamEventId = parseInt(streamEvent?.lastEventId || '', 10);
-      if (Number.isFinite(streamEventId) && streamEventId > lastEventId) {
-        lastEventId = streamEventId;
-      }
-      if (shouldRefreshFromSseEvent(streamEvent)) {
-        requestPoll();
-      }
-    }
-    function connectEventStream() {
-      if (!shouldRunLiveUpdates()) {
-        pauseLiveUpdates();
-        return;
-      }
-      if (typeof EventSource === 'undefined') {
-        streamState = 'reconnecting';
-        reconnectAt = Date.now() + getConfiguredRefreshMs();
-        updateConnectionStatus();
-        scheduleReconnect();
-        return;
-      }
-      clearReconnectTimer();
-      disconnectEventStream();
-      streamState = 'connecting';
-      updateConnectionStatus();
-      const source = new EventSource(getSseUrl());
-      eventSource = source;
-      const onSignal = (streamEvent) => {
-        if (eventSource !== source) return;
-        handleSseSignal(streamEvent);
-      };
-      source.onopen = () => {
-        if (eventSource !== source) return;
-        reconnectAttempt = 0;
-        reconnectAt = null;
-        streamState = 'live';
-        updateConnectionStatus();
-        requestPoll();
-      };
-      source.onmessage = onSignal;
-      source.addEventListener('updates_available', onSignal);
-      source.addEventListener('update', onSignal);
-      source.addEventListener('updates', onSignal);
-      source.onerror = () => {
-        if (eventSource !== source) return;
-        disconnectEventStream();
-        scheduleReconnect();
-      };
-    }
-    function pauseLiveUpdates() {
-      clearReconnectTimer();
-      disconnectEventStream();
-      reconnectAt = null;
-      streamState = 'paused';
-      updateConnectionStatus();
-    }
-    function resumeLiveUpdates() {
-      if (!shouldRunLiveUpdates()) {
-        pauseLiveUpdates();
-        return;
-      }
-      reconnectAttempt = 0;
-      reconnectAt = null;
-      connectEventStream();
-      requestPoll();
-    }
-    function setTaskIdCopyFeedback(state) {
-      if (copyFeedbackTimer) {
-        clearTimeout(copyFeedbackTimer);
-        copyFeedbackTimer = null;
-      }
-      modalTaskIdCopy.classList.remove('copied', 'failed');
-      modalTaskIdCopy.textContent = 'Copy';
-      if (state === 'copied') {
-        modalTaskIdCopy.classList.add('copied');
-        modalTaskIdCopy.textContent = 'Copied';
-      } else if (state === 'failed') {
-        modalTaskIdCopy.classList.add('failed');
-        modalTaskIdCopy.textContent = 'Copy failed';
-      } else {
-        return;
-      }
-      copyFeedbackTimer = setTimeout(() => {
-        modalTaskIdCopy.classList.remove('copied', 'failed');
-        modalTaskIdCopy.textContent = 'Copy';
-        copyFeedbackTimer = null;
-      }, 1500);
-    }
-    async function copyTextToClipboard(text) {
-      if (!text) return false;
-      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
-        try {
-          await navigator.clipboard.writeText(text);
-          return true;
-        } catch (error) {
-          // Fall through to execCommand fallback for local/dev environments.
-        }
-      }
-      const textarea = document.createElement('textarea');
-      textarea.value = text;
-      textarea.setAttribute('readonly', '');
-      textarea.style.position = 'fixed';
-      textarea.style.left = '-9999px';
-      textarea.style.top = '-9999px';
-      textarea.style.opacity = '0';
-      document.body.appendChild(textarea);
-      textarea.select();
-      textarea.setSelectionRange(0, textarea.value.length);
-      let copied = false;
-      try {
-        copied = document.execCommand('copy');
-      } catch (error) {
-        copied = false;
-      }
-      document.body.removeChild(textarea);
-      return copied;
-    }
-    // Connection status
-    function updateConnectionStatus() {
-      connectionDot.classList.remove('live', 'error');
-      if (streamState === 'paused') {
-        connectionDot.classList.add('error');
-        connectionText.textContent = 'Paused';
-        return;
-      }
-      if (streamState === 'connecting') {
-        connectionText.textContent = 'Connecting...';
-        return;
-      }
-      if (streamState === 'reconnecting') {
-        connectionDot.classList.add('error');
-        const msRemaining = reconnectAt ? Math.max(0, reconnectAt - Date.now()) : 0;
-        const seconds = Math.max(1, Math.ceil(msRemaining / 1000));
-        connectionText.textContent = `Reconnecting ${seconds}s`;
-        return;
-      }
-      if (lastPollError) {
-        connectionDot.classList.add('error');
-        connectionText.textContent = 'Sync error';
-        return;
-      }
-      connectionDot.classList.add('live');
-      connectionText.textContent = 'Live';
-    }
-    // Helpers
-    function escapeHtml(str) {
-      if (!str) return '';
-      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-    }
-    function getAssigneeValue(value) {
-      if (typeof value !== 'string') return '';
-      return value.trim().length > 0 ? value : '';
-    }
-    function truncateCardLabel(value, maxChars = 10) {
-      if (typeof value !== 'string' || maxChars <= 0) return '';
-      const graphemes = Array.from(value);
-      if (graphemes.length <= maxChars) return value;
-      return `${graphemes.slice(0, maxChars).join('')}...`;
-    }
-    // Render markdown to sanitized HTML
-    function renderMarkdown(str) {
-      if (!str) return '';
-      // Fall back to plain text if libraries aren't loaded
-      if (typeof marked === 'undefined' || typeof DOMPurify === 'undefined') {
-        return escapeHtml(str);
-      }
-      try {
-        const html = marked.parse(str);
-        return DOMPurify.sanitize(html);
-      } catch (e) {
-        console.error('Markdown parse error:', e);
-        return escapeHtml(str);
-      }
-    }
-    // Time constants in milliseconds
-    const MS_PER_SECOND = 1000;
-    const MS_PER_MINUTE = 60 * MS_PER_SECOND;
-    const MS_PER_HOUR = 60 * MS_PER_MINUTE;
-    const MS_PER_DAY = 24 * MS_PER_HOUR;
-    function formatTime(isoString) {
-      if (!isoString) return '';
-      const date = new Date(isoString);
-      const now = new Date();
-      const diff = now - date;
-      if (diff < MS_PER_MINUTE) return 'just now';
-      if (diff < MS_PER_HOUR) return `${Math.floor(diff / MS_PER_MINUTE)}m ago`;
-      if (diff < MS_PER_DAY) return `${Math.floor(diff / MS_PER_HOUR)}h ago`;
-      return date.toLocaleDateString();
-    }
-    function formatTimeRemaining(isoString) {
-      if (!isoString) return '';
-      const date = new Date(isoString);
-      const now = new Date();
-      const diff = date - now;
-      if (diff <= 0) return 'expired';
-      if (diff < MS_PER_MINUTE) return `${Math.floor(diff / MS_PER_SECOND)}s left`;
-      if (diff < MS_PER_HOUR) return `${Math.floor(diff / MS_PER_MINUTE)}m left`;
-      return `${Math.floor(diff / MS_PER_HOUR)}h left`;
-    }
-    function formatEventType(type) {
-      return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-    }
-    function getEventActor(event) {
-      const explicitAuthor = typeof event.author === 'string' && event.author.trim() ? event.author : null;
-      if (explicitAuthor) return explicitAuthor;
-      const explicitAgent = typeof event.agent_id === 'string' && event.agent_id.trim() ? event.agent_id : null;
-      if (explicitAgent) return explicitAgent;
-      const dataAuthor = event.data && typeof event.data.author === 'string' && event.data.author.trim()
-        ? event.data.author
-        : null;
-      return dataAuthor || 'system';
-    }
-    function truncateText(text, max = 160) {
-      if (!text || text.length <= max) return text;
-      return `${text.slice(0, max - 3)}...`;
-    }
-    function formatEventDetail(event) {
-      if (!event || !event.data) return '';
-      if (event.type === 'task_created') {
-        const assignee = typeof event.data.assignee === 'string' ? event.data.assignee : null;
-        const project = typeof event.data.project === 'string' ? event.data.project : null;
-        if (assignee && project) return `Assigned to ${assignee} in ${project}`;
-        if (assignee) return `Assigned to ${assignee}`;
-        if (project) return `Created in ${project}`;
-        return '';
-      }
-      if (event.type === 'status_changed') {
-        const from = typeof event.data.from === 'string' ? event.data.from : null;
-        const to = typeof event.data.to === 'string' ? event.data.to : null;
-        if (!from || !to) return '';
-        return `${from} → ${to}`;
-      }
-      if (event.type === 'task_updated') {
-        const field = typeof event.data.field === 'string' ? event.data.field : null;
-        if (!field) return 'Task updated';
-        return `${field} updated`;
-      }
-      if (event.type === 'comment_added') {
-        const text = typeof event.data.text === 'string' ? event.data.text : '';
-        return truncateText(text);
-      }
-      if (event.type === 'checkpoint_recorded') {
-        const name = typeof event.data.name === 'string' ? event.data.name : null;
-        return name ? `Checkpoint: ${name}` : 'Checkpoint recorded';
-      }
-      if (event.type === 'task_moved') {
-        const fromProject = typeof event.data.from_project === 'string' ? event.data.from_project : null;
-        const toProject = typeof event.data.to_project === 'string' ? event.data.to_project : null;
-        if (!fromProject || !toProject) return '';
-        return `${fromProject} → ${toProject}`;
-      }
-      if (event.type === 'dependency_added') {
-        const depId = typeof event.data.depends_on_id === 'string' ? event.data.depends_on_id : null;
-        return depId ? `Added dependency on ${depId}` : 'Added dependency';
-      }
-      if (event.type === 'dependency_removed') {
-        const depId = typeof event.data.depends_on_id === 'string' ? event.data.depends_on_id : null;
-        return depId ? `Removed dependency on ${depId}` : 'Removed dependency';
-      }
-      if (event.type === 'task_archived') {
-        return 'Task archived';
-      }
-      return '';
-    }
-    function isTypingTarget(target) {
-      if (!target || !(target instanceof Element)) return false;
-      if (target.closest('input, textarea, select')) return true;
-      return target.isContentEditable;
-    }
-    // Event listeners
-    dateFilter.addEventListener('change', () => {
-      savePreferences();
-      requestPoll();
-    });
-    taskSearchInput.addEventListener('input', () => {
-      applyTaskSearch(taskSearchInput.value);
-    });
-    taskSearchClear.addEventListener('click', () => {
-      applyTaskSearch('');
-      taskSearchInput.focus();
-    });
-    projectFilter.addEventListener('change', () => {
-      savePreferences();
-      requestPoll();
-    });
-    assigneeFilter.addEventListener('change', () => {
-      savePreferences();
-      renderBoard();
-    });
-    activityAssigneeFilter.addEventListener('change', () => {
-      savePreferences();
-      renderActivity();
-    });
-    activityKeywordFilter.addEventListener('input', () => {
-      updateActivityAssigneeOptions();
-      savePreferences();
-      renderActivity();
-    });
-    refreshFilter.addEventListener('change', () => {
-      savePreferences();
-      reconnectAttempt = 0;
-      if (shouldRunLiveUpdates() && streamState !== 'live') {
-        connectEventStream();
-      }
-      requestPoll();
-    });
-    shortcutsBtn.addEventListener('click', () => {
-      setShortcutsModalOpen(true);
-    });
-    shortcutsClose.addEventListener('click', () => {
-      setShortcutsModalOpen(false);
-    });
-    shortcutsModalOverlay.addEventListener('click', (e) => {
-      if (e.target === shortcutsModalOverlay) {
-        setShortcutsModalOpen(false);
-      }
-    });
-    activityBtn.addEventListener('click', () => {
-      setActivityPanelOpen(true);
-    });
-    activityClose.addEventListener('click', () => {
-      setActivityPanelOpen(false);
-    });
-    activityList.addEventListener('click', (e) => {
-      const item = e.target.closest('.activity-item');
-      if (!item || !activityList.contains(item)) return;
-      const { taskId } = item.dataset;
-      if (!taskId) return;
-      openTaskModal(taskId);
-    });
-    modalTaskIdCopy.addEventListener('click', async () => {
-      const taskId = modalTaskIdCopy.dataset.taskId || '';
-      if (!taskId) return;
-      const copied = await copyTextToClipboard(taskId);
-      setTaskIdCopyFeedback(copied ? 'copied' : 'failed');
-    });
-    modalClose.addEventListener('click', closeModal);
-    modalOverlay.addEventListener('click', (e) => {
-      if (e.target === modalOverlay) closeModal();
-    });
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        closeModal();
-        setActivityPanelOpen(false);
-        setShortcutsModalOpen(false);
-        settingsDropdown.classList.remove('open');
-        return;
-      }
-      if (isTypingTarget(e.target)) {
-        return;
-      }
-      if (e.key === '/') {
-        e.preventDefault();
-        taskSearchInput.focus();
-        taskSearchInput.select();
-        return;
-      }
-      if (e.key === '?') {
-        e.preventDefault();
-        setShortcutsModalOpen(true);
-        return;
-      }
-      if (e.key.toLowerCase() === 'a') {
-        e.preventDefault();
-        setActivityPanelOpen(!activityPanel.classList.contains('open'));
-      }
-    });
-    // Visibility/focus API
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden) {
-        pauseLiveUpdates();
-      } else {
-        windowHasFocus = typeof document.hasFocus === 'function' ? document.hasFocus() : true;
-        resumeLiveUpdates();
-      }
-    });
-    window.addEventListener('focus', () => {
-      windowHasFocus = true;
-      resumeLiveUpdates();
-    });
-    window.addEventListener('blur', () => {
-      windowHasFocus = false;
-      pauseLiveUpdates();
-    });
-    // Mobile tabs
-    mobileTabs.addEventListener('click', (e) => {
-      const tab = e.target.closest('.mobile-tab');
-      if (!tab) return;
-      setActiveTab(tab.dataset.status);
-    });
-    // Hamburger menu (toggle filters on mobile)
-    hamburgerBtn.addEventListener('click', () => {
-      const filters = document.querySelector('.header-filters');
-      filters.classList.toggle('open');
-    });
-    // Settings dropdown
-    settingsToggle.addEventListener('click', (e) => {
-      e.stopPropagation();
-      settingsDropdown.classList.toggle('open');
-    });
-    document.addEventListener('click', () => {
-      settingsDropdown.classList.remove('open');
-    });
-    settingsDropdown.addEventListener('click', (e) => e.stopPropagation());
-    // Column visibility checkboxes
-    settingsDropdown.querySelectorAll('.column-checkboxes input').forEach(cb => {
-      cb.addEventListener('change', () => {
-        updateColumnVisibility();
-        updateAssigneeOptions();
-        updateActivityAssigneeOptions();
-        savePreferences();
-        renderBoard();
-        renderActivity();
-      });
-    });
-    // Show subtasks toggle
-    showSubtasksCheckbox.addEventListener('change', () => {
-      updateAssigneeOptions();
-      updateActivityAssigneeOptions();
-      savePreferences();
-      renderBoard();
-      renderActivity();
-    });
-    collapseAllParentsBtn.addEventListener('click', () => {
-      collapseAllParents();
-    });
-    expandAllParentsBtn.addEventListener('click', () => {
-      expandAllParents();
-    });
-    // View selection
-    function setActiveView(view) {
-      const allowedViews = new Set(['kanban', 'calendar', 'graph']);
-      if (!allowedViews.has(view)) {
-        view = 'kanban';
-      }
-      const graphOption = viewFilter.querySelector('option[value="graph"]');
-      if (view === 'graph' && graphOption && graphOption.disabled) {
-        view = 'kanban';
-      }
-      // Dismiss calendar popover when leaving calendar view
-      if (activeView === 'calendar' && view !== 'calendar') {
-        dismissPopover();
-      }
-      activeView = view;
-      viewFilter.value = view;
-      // Show/hide containers
-      board.style.display = view === 'kanban' ? '' : 'none';
-      calendarContainer.classList.toggle('hidden', view !== 'calendar');
-      graphContainer.classList.toggle('hidden', view !== 'graph');
-      mobileTabs.style.display = view === 'kanban' ? '' : 'none';
-      document.getElementById('mobileCardsContainer').style.display = view === 'kanban' ? '' : 'none';
-      // Hide date filter when calendar is active (calendar has its own month navigation)
-      dateFilter.closest('.filter-group').style.display = view === 'calendar' ? 'none' : '';
-      // Pause/resume graph
-      if (view === 'graph') {
-        if (!graphInitialized && typeof ForceGraph !== 'undefined') {
-          initGraph();
-        } else if (graphInstance) {
-          graphInstance.resumeAnimation();
-        }
-      } else if (graphInstance) {
-        graphInstance.pauseAnimation();
-      }
-      savePreferences();
-      requestPoll();
-    }
-    viewFilter.addEventListener('change', () => {
-      if (viewFilter.value !== activeView) {
-        setActiveView(viewFilter.value);
-      }
-    });
-    // Event delegation for card clicks (avoids re-adding handlers on every render)
-    function handleCardContainerClick(e) {
-      const toggle = e.target.closest('[data-action="toggle-subtasks"]');
-      if (toggle) {
-        e.preventDefault();
-        e.stopPropagation();
-        const parentId = toggle.dataset.parentId;
-        toggleParentCollapsed(parentId);
-        return;
-      }
-      const card = e.target.closest('.card');
-      if (card) openTaskModal(card.dataset.taskId);
-    }
-    board.addEventListener('click', handleCardContainerClick);
-    document.getElementById('mobileCardsContainer').addEventListener('click', handleCardContainerClick);
-    function registerServiceWorker() {
-      if (!('serviceWorker' in navigator)) {
-        return;
-      }
-      window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {
-          // PWA support is optional; ignore registration failures.
-        });
-      });
-    }
-    // Initialize
-    loadPreferences();
-    bindColumnScrollIndicators();
-    registerServiceWorker();
-    connectEventStream();
-    requestPoll();
-    // Update connection indicator every second (age + reconnect countdown)
-    setInterval(() => {
-      updateConnectionStatus();
-    }, 1000);
-  </script>
-  <!-- Markdown rendering -->
-  <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
-  <!-- d3 for graph layout forces -->
-  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js" defer></script>
-  <!-- Force-graph library for Graph view -->
-  <script src="https://cdn.jsdelivr.net/npm/force-graph@1/dist/force-graph.min.js"
-          defer
-          onerror="handleGraphLibError()"></script>
+  <div id="root"></div>
 </body>
 </html>